W3C Web Standards HTML

HTML
HyperText Markup
Language
Linguagem de
Marcação de
Hipertexto
(Português)
Hyper
Significa que não é linear, ou seja se
navega entre documentos html
utilizando links.
Text
Consiste num ficheiro de texto.
Markup
Utiliza-se marcas ou seja marcações
(etiquetas) no corpo do código para
identificar parágrafos, títulos, listas
e outros elementos.
Language
Porque é uma linguagem.

HTML
HTML é uma linguagem de
marcação para a criação de páginas
web. HTML significa HyperText
Markup Language, é a linguagem
de publicação da WorldWideWeb e
é utilizada para criar páginas web.
A primeira versão do HTML foi
descrito porTim Berners-Lee no
final de 1991. Durante cinco anos
(1990-1995), o HTML passou por
uma série de revisões e
experimentou uma série de
extensões.
Uma primeira tentativa abortada
para estender a linguagem HTML
em 1995, conhecida como HTML
3.0, abriu caminho para uma
abordagem mais pragmática
conhecida como HTML 3.2 concluída
em 1997.A publicação seguinte foi a
linguagem HTML 4.0, concluída em
1998.
*No início de 2008 o W3C anunciou a primeira especificação do
HTML5, cuja versão final está prevista para 2014.
Versão Publicado (ano)
HTML + 1993
HTML2.0 1995
HTML3.2 1997
HTML4.01 1999
HTML5 2008*

EvoluçãoCronológicadoHTML(1)
1992 - Primeira aparição do HTML.
1993 - HTML+Algumas definições da aparência, tabelas, formulários.
1994 - HTML v2.0 Padronização para as características principais.
1994 - HTML v3.0 Uma extensão do HTML+ entendido como um rascunho de
padrão.
1995 - HTML v3.2 Netscape e Internet Explorer definem seus próprios
padrões baseados nas implementações correntes.
1995 - JavaScript criada por Brendan Eich da Netscape como uma extensão
do HTML para o browser Navigator v2.0. JavaScript é uma linguagem
de roteiro (script) baseada em objetos e permite que sejam
manipulados através de eventos dinâmicos que faltavam ao HTML.
1996 - CSS1 Em dezembro deste ano é apresentada pela primeira vez a Folha
de Estilo, criada para complementar a linguagem HTML. Possuía uma
formatação simples e cerca de 60 propriedades.

EvoluçãoCronológicadoHTML(2)
1997 - HTML v4.0 São lançados os browsers Netscape v4.0 (agosto) e
Internet Explorer v4.0 (outubro) que apresentaram um conjunto de
tecnologias (CSS, JavaScript/VBScript e DOM) que juntas
disponibilizaram diversos recursos tornando o HTML dinâmico. Surge
então o DHTML.
1998 - CSS2 Em maio é lançado a segunda versão da Folha de Estilo
que, além de incluir todas as propriedades do CSS1 ainda apresenta
por volta de 70 novas propriedades.
1999 - HTML v4.01 Alguma modificações da versão anterior.
2000 - XHTML v1.0 É criado e consiste de uma versão XML do HTML v4.01.
2008 - AW3C (WorldWideWeb Consortium, entidade que administra padrões
para desenvolvimento web), publicou um rascunho do HTML 5. A
linguagem está sendo bem ampliada, com muitas funções novas e
coisas que não é possível fazer com a versão HTML 4.x.
Fonte: http://orbita.starmedia.com/~edaurelio/historia.htm

Comosãofeitasaspáginasweb?
Todas estas páginas possuem um código fonte, que contêm linguagens de
marcação chamadas tags.
As tags consistem em breves instruções, tendo uma marca de início e outra
de fim, que definem a estrutura, o formato, e as ligações de hipertexto com
outros documentos ou mídias. Qualquer texto que não for tag é conteúdo.
Uma vez criadas, as páginas são salvas com uma extensão .htm ou .html.
O nome “index” é padrão para nomear a página principal.As páginas internas
podem ser nomeadas como quiser, porém deve usar apenas caracteres
alfanuméricos, hífen (-) e sublinhado (_)". É recomendável que não utilize
nomes extensos.

HTMouHTML?Qualextensãousar?
Quando você salvar uma página HTML, você pode usar a extensão .htm ou
.html.Antigamente os softwares só permitiam extensões de três caracteres,
por isso era usada a extensão .htm. Hoje em dia todos os softwares permitem
o uso de extensões com mais de três caracteres, então é seguro usar a
extensão .html.

TagSintaxe
Importante!
Alguns elementos não têm uma tag final. Por exemplo: <br />.
Para que seu código fonte seja validado pelaW3C não esqueça
de inserir uma barra (/) antes de fechar a tag dos elementos que
não têm tag final.

Atributo
Exemplos:
<bandido nome="George 'Espingarda' Ziegler"></bandido> ou
<bandido nome='George "Espingarda" Ziegler'></bandido>.
<-!Atributos vazios ->
<input disabled>
<input disabled="">
<input disabled=""/>
<-!Atributos com um valor ->
<input name=address>
<input name='address'>
<input name="address">

ElementosBásicosdaLinguagemHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>TÍTULO DA PÁGINA</title>
</head>


<body>
<div class=”content”>
CONTEÚDO DA PÁGINA.
</div>
</body>

</html>

CONCEITOUSADOSNOCÓDIGO:
TAG
O QUE FAZ?
INÍCIO FIM
<html> </html>
Marca o início e o fim do documento HTML. Com esta tag você inicia e finaliza a
construção da página Web.
<head> </head>
Marca o início e o fim do cabeçalho, ou seja, a área onde serão descritos os
cabeçalhos e o título da página. Estas informações não aparecerão na sua
página.
<title> </title>
Marca o início e o fim do título do cabeçalho. O título da página aparecerá na
barra superior do navegador (browser).
<body> </body> Marca o início e o fim do corpo da página, ou seja, do conteúdo.
<div> </div> Define as seções em uma página HTML.

DOCTYPE
O DOCTYPE é a maneira de você dizer para qualquer navegador como deve agir ao ler
seu código HTML. Ou seja, é uma declaração, e não uma tag, com instruções para o
navegador entender qual a versão do HTML utilizada para escrever o código fonte de
uma página web.
Cada navegador tem um padrão próprio de “interpretar” o HTML sem DOCTYPE.
Desta forma, o DOCTYPE deve ser a primeira coisa que um navegador lê em seu
código HTML, ou seja, na primeira linha.
Veja a lista recomendada pelaW3C para declarações DOCTYPE:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Metadados
O exemplo a seguir representa os metadados de uma página HTML:
<head>
<meta charset="utf-8">
<title> Sobre o W3C | World Wide Web Consortium (W3C) </title>
<meta name="description" content="World Wide Web Consortium (W3C) é uma
comunidade internacional para desenvolver padrões Web" >
<meta name="keywords" content="W3C, HTML, HTML5, XHTML, CSS, CSS3, SVG,
MathML, WCAG">
</head>

Listas
Lista não ordenada
Lista não ordenada é especificada pelas tags
<ul> e <li>. Os itens da lista são escritos entre
as tags <li> </li>, elementos filhos do
elemento ul.
Então, uma lista com três itens terá o
seguinte código fonte:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
A lista aparecerá assim:
Lista ordenada
Lista ordenada é especificada por <ol> e <li>.
Os itens da lista são escritos entre tags
<li></li>, elementos filhos do elemento ol.
O atributo type especifica o tipo de marcador
a ser usado na lista. <ol type="a">
Então, uma lista numérica terá o seguinte
código fonte:
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
E aparecerá assim:

Listas
Lista de definição
Lista de definição é especificada pelas tags
<dl>, <dt> e <dd>.
Então, uma lista de definição terá o
seguinte código fonte:
<dl>
<dt>Termo 1</dt>
<dd>Definition 1</dd>
<dt> Termo 2</dt>
<dd>Definition 2</dd>
</dl>
E aparecerá assim:

Hiperlinks
Hiperlinks, ou simplesmente links, permitem o acesso entre as diversas
páginas (navegação) e mesmo a movimentação rápida dentro de um texto
longo.
Os hiperlinks são especificados por <a>, e o documento ou site vinculado é
representado pelo atributo href. Ou seja,
<a href="URL">rótulo</a>

CaminhosrelativosouURLabsoluta
 Link para um documento de uma
mesma pasta/diretório. Ex: link na
página b.html para acessar c.html
<a href="c.html">rótulo</a>
 Link para um documento de
pasta/diretório pai. Ex: link na página
b.html para acessar a.html
<a href="../a.html">rótulo</a>
 Link para um documento de um
subdiretório. Ex: na página a.html
para acessar b.html
<a href="XXX/b.html">rótulo</a>
 URL absoluta:
<a href="URL">rótulo</a>

Opçõesdelink
Por exemplo, se você quiser que o link para a página do Google abra em
outra janela/aba deverá utilizar a opção “_blank” para o valor do atributo de
destino:
<a href="http://www.google.com" target="_blank" >Ir para o Google</a>
_blank Abre a página de destino em outra janela.
_self Abre a página de destino na mesma janela.
_parent Abre a página de destino na janela principal, utilizado em sites que usam frameset.
_top Abre a página de destino no frameset superior.

Conteúdosincorporados:imagens
As imagens são especificadas pela tag <img>. O elemento img pode omitir a
tag final.A imagem é incorporada pelo atributo src.
Importante! Para que seu código fonte seja validado pelaW3C não esqueça o
atributo “alt” e a barra (/) antes de fechar a tag <img>.
Exemplo 1:
Exemplo 2:
<img src = "images/logo.png" alt=”descrição” />
<img src="https://ssl.gstatic.com/images/logos/google_logo_41.png" alt=”marca Google” />

Conteúdosincorporados:multimídias
A tag <object> define um objeto
incorporado dentro de um
documento HTML. Use este
elemento para incorporar objetos
multimídia em páginas web, como:
áudio, vídeo, applets Java,ActiveX,
PDF ou Flash.
Use a tag <param> para definir os
parâmetros para plugins que foram
incorporados com a marca <object>.
<video width="320" height="240"
controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Seu navegador não suporta a tag video.
</video>
Uma maneira de incorporar um
vídeo em página web é através da
tag <video>, utilizando o atributo
“src” e o elemento <source>.
O vídeo é incorporado pelo atributo
“src”:
<object width="400" height="400"
data="helloworld.swf">
</object>

Conteúdosincorporados:multimídias
Outra opção para incorporar um
vídeo em páginas web é utilizar a tag
<embed>. Porém, esta é uma
extensão da Netscape, não
padronizada - ou seja, que não faz
parte dosW3CWeb Standards -,
muito utilizada porque as versões
anteriores do navegador Internet
Explorer não ofereciam suporte à
tag <object>.Vale ressaltar que esta
opção para incorporar um vídeo em
página web funciona, mas se quiser
validar seu website, terá que evitar o
uso da tag <embed>.
<embed src=”NOME_VIDEO.EXTENSÃO” width="320"
height="240" loop="true" autostart="true"
controls="true" />
O código para incorporar o vídeo
com ajuste de tamanho deve ser
escrito da seguinte forma:
ou
<embed src="NOME_VIDEO.EXTENSÃO" width="320"
height="240"></embed>

Tabelas
Tabelas são especificadas pela tag
<table>.As linhas da tabela são
especificadas pela tag <tr>, e as
células pela tag <td>.
Nesta imagem temos o exemplo de
uma tabela com 3 colunas e 3 linhas.
O código fonte desta tabela seria
escrito como no quadro ao lado.
<table border=1>
<tr>
<td>célula 1.1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

<table border=1>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Tabela
LinhaColuna

Cabeçalhodatabela
O cabeçalho da tabela pode ser
especificado utilizando a tag <th>. O
texto escrito entre as tags de início
<th> e de fim </ th> aparecerá em
negrito e centralizado na célula.
Por exemplo:
<table border=1>
<tr>
<th>Versão</th>
<th>Publicado (ano)</th>
</tr>
<tr>
<td>HTML +</td>
<td>1993</td>
</tr>
<tr>
<td>HTML2.0</td>
<td>1995</td>
</tr>
<tr>
<td>HTML3.2</td>
<td>1997</td>
</tr>
<tr>
<td>HTML4.01</td>
<td>1999</td>
</tr>
</table>

Títulodatabela
Os títulos das tabelas são
especificados pela tag <caption>.
Por exemplo:
<table border=1>
<caption>História HTML</caption>
<tr>
<th>Versão</th>
<th>Publicado (ano)</th>
</tr>
<tr>
<td>HTML +</td>
<td>1993</td>
</tr>
<tr>
<td>HTML2.0</td>
<td>1995</td>
</tr>
<tr>
<td>HTML3.2</td>
<td>1997</td>
</tr>
<tr>
<td>HTML4.01</td>
<td>1999</td>
</tr>
</table>

Formulários
Os formulários são especificados
pela tag <form>.
Através de um formulário é possível
enviar dados de um usuário para um
servidor ou email de contato
específico.
Entre as tags <form> e </form> pode
conter um ou mais dos elementos de
formulário.Veja na tabela a seguir.

Elementosdeformulário
tag Descrição
<input> Especifica um campo de entrada onde o usuário pode inserir dados.
<label> Define um rótulo para um elemento <input>.
<textarea> Define um multi-linha de controle de entrada de texto. Pode conter um número
ilimitado/limitado de caracteres, com fonte específica (geralmente Courier) e largura e
altura fixa.
<button> Define um botão clicável. Dentro de um elemento <button> você pode colocar conteúdo,
como texto ou imagens.
<select> É usado para criar uma lista drop-down.
<option> Define uma opção em uma lista de seleção. Elementos <option> podem estar contidos em
elementos <select> ou <datalist>.
<optgroup> É usado para relacionar um grupo de opções em uma lista drop-down. É recomendável
para uma longa lista de opções, pois fica mais fácil para um usuário manusear.
<fieldset> É utilizado para agrupar elementos relacionados em um formulário, criando uma caixa em
torno dos elementos relacionados.
<legend> Define uma legenda para o elemento <fieldset>.

Atributosutilizadosparaformulários(1)
Atributo Valor Descrição
accept MIME_type Especifica os tipos de arquivos que o servidor aceita (que pode
ser apresentado por meio de um carregamento de arquivo).
accept-charset character_set Especifica as codificações de caracteres, usados para o envio
de formulário.
action URL Especifica para onde enviar os dados do formulário
preenchido.
enctype application/x-www-form-
urlencoded
multipart/form-data
text/plain
Especifica como o formulário de dados deve ser codificado
quando enviado para o servidor (apenas para o método =
"post").
method get
post
Especifica o método HTTP para o envio de formulário de
dados.
name Text Especifica o nome de um formulário.
target _blank
_self
_parent
_top
Especifica onde será exibida a confirmação que o formulário
enviado foi recebido.
alt text Especifica um texto alternativo para imagens (somente para
type = "imagem")

Atributosutilizadosparaformulários(2)
Atributo Valor Descrição
checked checked Especifica que um elemento <input> deve ser pré-selecionado
quando a página é carregada (por type = "checkbox" ou type =
"radio")
disabled disabled Especifica que um elemento <input> deve ser desativado
name text Especifica o nome de um elemento <input>
maxlength number Especifica a largura, em caracteres, de um elemento <input>
src URL Especifica o URL da imagem para usar como um botão de
envio (somente para type = "imagem")
type button, checkbox, color, date,
datetime , datetime-local, email,
file, hidden, image, month,
number, password, radio, range,
reset, search, submit, tel, text,
time, url, Week
Especifica o elemento <input> tipo para exibir
value text Especifica o valor de um elemento <input>
cols number Especifica a largura visível de uma área de texto
selected selected Especifica que a opção deve ser pré-selecionado quando a
página é carregada

Exemplodeformulário
<html>
<body>
<form action="form.asp">
<table>
<tr>
<td>Nome</td>
<td><input type="text" id="fn"></td>
</tr>
<tr>
<td>Sobrenome</td>
<td><input type="text" id="ln"></td>
</tr>
<tr>
<td>Sexo</td>
<td>
<input type="radio" id="m"
name="gender">masculino<br/>
<input type="radio" id="f"
name="gender">feminino
</td>
</tr>
<tr>
<td>Telefone</td>
<td><input type="tel" id="tel"></td>
</tr>
<tr>
<td>e-mail</td>
<td><input type="email" id="email"></td>
</tr>
<tr>
<td> Assunto </td>
<td>
<select>
<option value=“op1“>Opção 1</option>
<option value=“op2“>Opção 2</option>
<option value=“op3">Opção 3</option>
</select>
</td>
</tr>
<tr>
<td> Comentário </td>
<td><textarea></textarea></td>
</tr>
</table>
<input type="Submit" value="enviar">
</form>
<p>Clique no botão para enviar seus dados.</p>
</body>
</html>

W3C Web Standards HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (19)

Semelhante a W3C Web Standards HTML

Semelhante a W3C Web Standards HTML (20)

Mais de Andrea Dalforno

Mais de Andrea Dalforno (10)

Último

Último (20)

W3C Web Standards HTML