Esta é a versão para impressão de Curso de HTML

Se você for imprimir esta página, escolha "Visualizar impressão" no seu navegador, ou clique em Versão para impressão, você irá ver esta página sem esse aviso, sem os elementos de navegação a esquerda ou acima, e sem as TOC's de cada página.
Atualize esta página para ter certeza de que está imprimindo a versão mais atual.
Para maiores informações sobre a versão para impressão, incluindo como fazer arquivos PDF realmente adequados para a impressão, veja Wikilivros:Versões para impressão.

Capa

Prefácio

Este livro pretende cobrir os aspectos básicos da linguagem de marcação HTML junto com uma introdução ao CSS (Cascading Style Sheets). Como é um livro introdutório, não espera-se que o leitor tenha conhecimento prévio no assunto, espera-se que apenas tenha interesse.

Introdução

A sintaxe XHTML

O XHTML é a reformulação do HTML baseada no XML. O XHTML tem atualmente três versões, 1.0 e 1.1, ambas linguagens de marcação seguras que se tornaram uma recomendação da W3C, e uma nova versão 2.0 ainda em desenvolvimento.

Características obsoletas

Frames, do inglês quadro, servem para dividir a sua página em várias telas, possibilitando que seja mostrada mais de uma página na mesma tela.

Quando for fazer um frame, ao invés de inserir a tag <body> após a tag </head> deverá utilizar <frameset>.

Atributos de FRAMESET

cols: define as colunas do frame em pixel ou porcentagem. <frameset cols=”X.X”>
rows: define as linhas do frame em pixel ou porcentagem. <frameset rows=”X.X”>
border: define a espessura da borda frameset border=”X”

Já a tag <frame> é inserida entre as tags <frameset></frameset>, ela especifica as páginas que irão abrir nos frames correspondentes.

Atributos de FRAME

src: especifica o endereço que será carregado. <frame src="endereço">
name: nomeia o frame <frame name="nome_frame">
norezise: determina que o frame não poderá ser redimensionando. <frame noresize>

Exemplo de página com frame

<html>
<head>
<title>Exemplo Frame</title>
</head>
<frameset cols="30%,*">
<frame src="http://pt.wikipedia.org/wiki/P%C3%A1gina_principal">
<frameset  cols="30%,*" >
<frame src="http://pt.wikipedia.org/wiki/P%C3%A1gina_principal">
<frame src="http://pt.wikipedia.org/wiki/P%C3%A1gina_principal">
</frameset>
</html>

Página

Introdução/Contexto

Este módulo precisa ser revisado por alguém que conheça o assunto (discuta).

HTML - HiperTextMarkupLanguage - Linguagem de Marcação de Hipertexto.

O HTML é uma linguagem derivada da SGML, criada com o fim específico de formatar textos para a World Wide Web. Neste curso são apresentados os fundamentos do HTML tal como é usado e padronizado pelo W3C (World Wide Web Consortium). Atualmente, o nome correto para a recomendação do W3C é XHTML, mas a continuação do uso de "HTML" não constitui um erro grave (existindo algumas diferenças entre eles que iremos ver mais à frente).

O principal a saber, antes de iniciar o estudo da HTML, é que se trata de um padrão desrespeitado por companhias de'software, que frequentemente incluem "extensões" da linguagem em seus aplicativos. Entretanto, é preciso tomar cuidado para não usar essas extensões, que limitam a correta exibição das páginas em determinados navegadores. Neste curso, portanto, é apresentado o HTML padrão e o XHTML segundo, também, as suas diferenças, conforme [1] e [2].

Material necessário'

Um editor de textos:

Pode ser o Notepad (bloco de notas) do Windows, mas é recomendável algum que suporte a sintaxe HTML, como o Jedit, Vim, Emacs, ou qualquer um de sua preferência.

Um navegador

O Internet Explorer serve, mas é recomendável o uso do Mozilla Firefox ou do Opera, que são mais compatíveis com as regras W3C.

O que é o HTML?

OHTMLé bastante utilizada atualmente, para confecção de documentos e exibição principalmente na Web. A HTML foi inicialmente uma derivada da SGML, uma meta-linguagem (ou seja, uma linguagem para criação de linguagens) com todos os elementos para marcar dados ou textos com atributos. Atualmente, a HTML, ou XHTML, é uma derivada da XML.

A marcação, referida no nome da HTML, é nada mais do que indicar partes especiais num texto simples. Por exemplo: partes em negrito, partes em itálico, inserção de imagens, etc.

Já o hipertexto é o meio no qual vários documentos estão ligados entre si por meio de um ou mais'linksou ligações, áreas de texto especiais que ativam outros documentos com um clique. A ligação pode se estabelecer estruturalmente, também - no cabeçalho do documento pode haver indicação de documento-pai, documento seguinte, etc -, mas é mais comum definir-se a ligação dentro do próprio texto.

O HTML, como linguagem de marcação de hipertextos, permite fazer muitas coisas, desde inserir e formatar texto, até inserir imagens, passando por organizar os conteúdos em tabelas, inserir objetos em formatos de terceiros (tal como Flash, Java, ActiveX, entre outros). Outras coisas são também possíveis em linguagens comerciais derivadas da HTML; neste caso, as características adicionais limitam-se a alguns navegadores ou renderizadores de página. Resumidamente, um navegador ou renderizador é um programa que transforma o código HTML, escrito pelo autor, em uma página de exibição coerente. A HTML é uma linguagem com uma sintaxe rígida em certos aspectos, principalmente se houver interesse em respeitar toda sua norma - alguns programas conseguem contornar pequenas violações.

Como o próprio nome diz, o HTML é uma linguagem de marcação, isso significa que, quando ao trabalhar com HTML, devemos marcar os pontos de início e fim de alterações/formatações.

Essa marcação é feita através de comandos denominadostag's e seus respectivos atributos e ocorre da seguinte forma:

<tag atributo1="valor1" atributo2='valor2'>Texto a ser formatado</tag>

Existem algumas exceções à essa regra, como as tag's usadas para inserir objetos como imagens e quebras de linha. Como você podem ter observado, é possível colocar o valor dos atributos entre apóstrofes (') ou entre aspas (").

O HTML é uma linguagem padronizada, apesar de haver várias extensões. As versões oficiais e padronizadas são publicadas pelo World Wide Web Consortium (ou, abreviadamente, W3C).

Introdução/Uma rápida introdução ao HTML

O que é uma tag?

Um documento HTML não é nada mais do que um arquivo de texto plano, escritas em um arquivo com a extensão HTML, Então você me pergunta: como se faz para aumentar o tamanho da letra, colocar em negrito, itálico, mudar a cor e todo tipo de coisa que vejo na Internet? A resposta é, para isso usa-se sequências de caracteres para indicar ao navegador que alguma parte do seu texto, não deve ser mostrada como o resto, que aquele pedaço, deve ser vermelho e em itálico, para aumentar a visibilidade e chamar atenção, o nome desta sequência de caracteres é chamada de tag (em inglês significa marcação, dando sentido ao Markup (marcação da sigla HTML), que sempre começam com o caractere <(menor que) e terminam com o'>(maior que). Devido a isso, quando for necessário inserir um destes caracteres numa página html, deve-se usar a notação <(lowerthan - menor que) e >(greterthan - maior que), respectivamente, já que o que vier depois do < será entendido como umatag, resultando em vários problemas na apresentação do seu documento. Atagé um comando que diz como um texto será entendido, ou formatado pelo navegador. Existem dois tipos detags, as como a tag <n> que marca um bloco de texto, em que é obrigatório haver uma marca dizendo onde termina a formatação, no caso, o negrito, sendo no caso destatag</n>(repare na barra, que ocorre no fechamento de todas astagsque marcam um bloco); e astagsque terminam nela mesma, como atag<br />, que indica um salto de linha, e não há nada mais a ser dito(repare no espaço e na barra no final, diferente do outro tipo detag).

Segundo a W3C todas astagsdevem ser escritas em minúsculo.

Estrutura básica de um documento HTML

<html>

<head>

<title> Título </title>

</head>

<body>

<p> Este é um parágrafo </p>

</body>

</html>

Veja acima, que todas astagsabertas, foram fechadas, o documento começa com atag<html> e termina com o fechamento destatag</html>. O fechamento de umatagé representada pela /.

<html>'- marca do início do documento HTML
<head>- início do cabeçalho
<title>- título
<body>- corpo do documento
<p>- parágrafo

Atributos das'tags

Quando umatagpossui um atributo, ele é inserido antes do > na abertura datag, ou antes do espaço . <tag atributo="valor">texto</tag> ou <tag atributo="valor" />

Font

Uma fonte é um conjunto de números, símbolos e caracteres. Uma fonte descreve uma determinada face de tipos, juntamente com outras qualidades, como tamanho, espaçamento e densidade.

Color

O atributocoloré utilizado para modificar a cor de um pedaço de texto e pode receber 3 tipos de valores:

Hexadecimal

Neste a cor é representada por um valor em hexadecimal que indica a cor no sistema RGB, ficando #abcdfe

RGB
Nome da cor:

Neste caso o valor e um nome de cor pré-definida

Black #000000	Green #008000	Silver #C0C0C0	Lime #00FF00
Black Black#000000	Olive #808000	White #FFFFFF	Yellow #FFFF00
Navy #000080	Maroon #800000	Red #FF0000	Blue #0000FF>
Purple #800080	Teal #008080	Fuchsia #FF00FF	Aqua #00FFFF

Size

O atributosize'é usado para modificar o tamanho da fonte de um pedaço de texto.

Relativo: quando se utiliza os sinais de maior e menor para indicar que aquele texto deve ser maior x ou menor x que a fonte do local.
Nomeado: big small x-big

Os elementos do HTML/Agrupamento de conteúdo

Tal como qualquer linguagem de marcação, a HTML tem marcas ou elementos (conforme nomenclatura oficial do W3C). Os elementos são diferenciados do texto comum por uma marca de início - o "<" e uma marca de final - o ">". Tecnicamente, de acordo com a XML, tudo que está dentro de um "< >" é uma marcação (Markup), e tudo que não está dentro, um texto (CharData).

Podemos vulgarmente classificar os elementos de marcação em dois tipos: os elementos normais e os elementos simples.

Elementos normais

Chamamos de elementos normais aos elementos de marcação que obrigatoriamente aparecem aos pares, envolvendo um trecho de texto. Sua função é atribuir uma propriedade ao texto envolvido, e somente ao texto envolvido. Sendo assim, nos elementos normais há sempre uma marcação de abertura e uma marcação diferenciada no fechamento.

Texto em itálico

Exemplo de texto em itálico:

Tal como a torre pisa <i>estas palavras</i> estão inclinadas.

Saída:

Tal como a torre pisa estas palavras estão inclinadas.

É possível fazer marcações "em cascata", ou seja, marcar trechos dentro de trechos marcados com outra característica.

Texto em negrito

Exemplo de texto sublinhado dentro de texto em negrito.

<b>O Fortuna, velut luna statu variabilis, <u>semper crescis aut decrescis...</u></b>

O Fortuna, velut luna statu variabilis, semper crescis aut decrescis...

Cruzamento de atributos

Não cruze atributos distintos. Embora o HTML possa ser permissivo quanto a isso, o XHTML já não o é:

Exemplo de cruzamento de atributos distintos (Não faça isto nos seus projetos)

<b>Cruzamentos entre atributos distintos <i>dá sempre para</b> o torto</i>.

Saída:

Cruzamentos entre atributos distintos dá sempre para o torto.

Elementos simples

Os elementos simples são aqueles que se encontram sempre sozinhos, pois a sua função é produzir no texto ou na página alguma exibição especial - ou indicar alguma coisa que não precisa necessariamente ser exibida.

Como não possuem marca de fechamento, os elementos simples são caracterizados por uma barra inclinada/ao final, antes do ">". Quaisquer elementos simples deve ter essa barra, para indicar ao navegador que não é preciso procurar uma marcação de fechamento. (Isso simplifica o processo de exibição da página, em alguns programas.)

Linha Horizontal

Exemplo - linha horizontal:

Nome: Alberto<hr />Idade: 46 anos

Saída

Nome: Alberto

Idade: 46 anos

Mudança de linha

Exemplo - Mudança de uma linha:

E eu disse que poderia mudar de linha<br />mas ninguém acreditou!

Saída:

E eu disse que poderia mudar de linha
mas ninguém acreditou!

Mudança de parágrafo

Exemplo da mudança de parágrafo:

É recomendável antes de qualquer texto escrever-se<p>, para possibilitar a mudança de parágrafo:

<p>Era uma vez um parágrafo</p><p>Era uma vez outro parágrafo</p>
<p>...tantos parágrafos que poderiam existir aqui</p>

Saída:

Era uma vez um parágrafo

Era uma vez outro parágrafo

...tantos parágrafos que poderiam existir aqui

Estrutura básica

Todo documento HTML obedece a uma estrutura padrão composta por 3'tagsou elementos essenciais e mais alguns atributos.

A estrutura é a seguinte:

<html>
 <head>
  <title>Título da Página</title>
 </head>
 <body>
  "Conteúdo da página"
 </body>
</html>

A saída na Janela de umbrowserseria

Explicação dastagsda estrutura básica

Tags <html></html>'

Esta é atagmais famosa do HTML. Ela inicia e termina todos os documentos HTML que seguem o padrão W3C. Todo o conteúdo que será exibido ou utilizado pela páginawebdeve estar declarado entre elas nas devidas sub-tags.

Tags <head></head>'

Mais conhecidas comotagsde cabeçalho, elas podem conter as seguintes declarações:

Do Título da página:<title></title>'

De estilos CSS que a página utilizará:<style></style>'

DescriptsJavaScript, VBscript, etc:<script></script>'

De meta dados:<meta>'

Delinksque permitem a adição de outros conteúdos dependendo dobrowsersendo utilizado:<link>'

Tags <title></title>'

Sãotagsutilizadas para definir o título da página. Este título é sempre exibido na Barra de Título dobrowser.

Tags <body></body>'

Definem o local onde deve estar o conteúdo dositee a estrutura na qual ele será exibido. Entre essastagsserá incluído o conteúdo da página que poderá ser estruturado através de tabelas ou com o uso de estilos CSS. Podem ser adicionadoslinksque farão a ligação com outras páginaswebe utilizados os recursos que foram declarados entre as tags <head></head> (scripts, estilos CSS etc).

Os elementos do HTML/Dados tabulares

Tabelas

Para se iniciar uma tabela dentro do documento html usa-se a tagtable, porém são necessárias as tagstd e trpara construí-la.

<table>
  <tr>
    <td>Uma célula</td>
    <td>Outra célula</td>
  </tr>
  <tr>
    <td>Uma célula em quebra de coluna</td>
    <td>Uma última tabela</td>
  </tr>
</table>

A saída seria:

Uma célula	Outra célula
Uma célula em quebra de coluna	Uma última tabela

Parâmetros de Table

Para se manipular o aspecto gráfico e a disposição de uma tabela usam-se vários parâmetros

Width

width dá o comprimento da tabela na página. Um comprimento width pode ter o seu valor em pixels ou em percentagem de espaço. 100% representa a ocupação máxima do espaço disponível para a tabela.

<!-- A tabela tem de largura 250 pixels -->
<table width="250">
  <tr>
     <td>Tabela de uma célula</td>
  </tr>
</table>

<!-- A tabela ocupa 70% do espaço disponível para ela -->
<table width="70%">
  <tr>
    <td>Table de uma célula</td>
  </tr>
</table>

A saída desta última tabela é:

Table de uma célula

Height

Assim como widtho parâmetro height comporta-se da mesma maneira, alterando a altura da tabela.

<table height="150">
  <tr>
    <td>Uma célula</td>
  </tr>
</table>

A saída é:

Uma célula

Border, Bgcolor e bdcolor

Borderdefine a espessura da borda da tabela; Bgcolordefine a cor de fundo da tabela; Bdcolor ou bordercolor define a cor da borda da tabela;

<table border="4" bdcolor="green" bgcolor="grey">
  <tr>
    <td>Uma mistura de cores berrante!</td>
  </tr>
</table>

A saída seria:

Uma mistura de cores berrante!

Cellpadding

Cellpadding aumenta ou diminui a borda interior em cada célula.

<table cellpadding="5">
  <tr>
    <td>Padding 5</td>
  </tr>
</table>

A saída é:

Padding 5

Outra célula

Cellspacing

Aumenta o espaço entre células.

<table cellspaccing="5">
  <tr>
    <td>CellSpacing é 5</td>
  </tr>
</table>

CellSpacing é 5	Outra célula
Repare no espaço que elas têm entre si

<td>

No corpo da tabela existem várias tags que representam a forma como os dados são visualizados: assim são controladores da organização do espaço. <td> representa o conteúdo dentro de uma tabela. td quer dizer table data.

<table>
 <tr>
  <td>Conteúdo</td>
 </tr>
</table>

<tr>

<tr> controla e incrementa uma nova linha na tabela. tr quer dizer table row.

<table>
 <tr> <!-- Linha de começo é sempre necessária -->
  <td>
 </tr>
 <tr> <!-- Nova linha -->
 </tr>
</table>

<th>

<th> é a linha mestra e não pode ser deformada por outras de nível inferior, sendo assim qualquer uma das outras terá que se ajustar a esta. Embora seja aconselhável a inserção desta tag numa das linhas que queremos para mestra, não é necessária atualmente pois os ajustes da tabela são feitos pelo conteúdo da tag style.

<table>
 <th>
  <td></td>
 </th>
 <tr>
  <td></td>
 </tr>
</table>

Imagens

Podemos criar imagens usando a marcação img.

Exemplo:

<img src="imagem.jpg" alt="A minha imagem">

Neste caso nós estamos a requisitar a imagem denominada imagem.jpg incluindo o parâmetro src e damos-lhe um comentário com o parâmetro alt. Estes dois são os parâmetros obrigatórios exigidos pela W3C. Existem mais opções para alteração do aspecto da imagem:

Width

Para se alterar a largura da imagem recorre-se ao parâmetro width

<!-- Altera a largura da imagem para 200 pixels -->
<img src="imagem.jpg" alt="A minha imagem" width="200">

<!-- Altera a largura da imagem para 75% do seu valor real -->
<img src="imagem.jpg" alt="A minha imagem" width="75%">

Height

Pode-se alterar a altura da imagem com o parâmetro height através da referência por percentagem %assim como por pixelagempx

<!-- Altera a largura e a altura da imagem para 200 e 100 pixels respectivamente -->
<img src="imagem.jpg alt="A minha imagem" width="200" height="100">

<!-- Altera somente a altura da imagem para 150 pixels -->
<img src="imagem.jpg" alt="A minha imagem" height="150">

É necessário ter sempre em atenção o uso do parâmetro alt numa imagem para assegurar a compatibilidade com as normas da W3C. Se não se quiser comentar nada na imagem pode-se somente deixar em branco o valor de alt.

Align

Podemos sempre alinhar as imagens na página para torná-la mais agradável e atraente. Para isso usa-se o parâmetro align

<!-- Alinhar uma imagem à direita -->
<img src="imagem.jpg" alt="Uma imagem alinhada à direita" align="right">

Border

Por padrão uma imagem que é inserida no documento HTML apresenta uma borda de 2 pontos de espessura. Com o parâmetro border é possível diminuir, retirar ou aumentar essa borda em torno da imagem.

Para mudar a cor da borda inserida diretamente na imagem, utilizar a seguinte linha de comando:

<img src="imagem.jpg" alt="Uma imagem bem contornada" style = "border:#ffcc66 solid 10px;">

Normalmente usa-se uma técnica muito mais atraente: contornar a imagem com uma tabela.

<!-- Aumentar para 4 pontos a borda da imagem -->
<img src="imagem.jpg" alt="Uma imagem!" border="4">

<!-- Fazer desaparecer a borda em volta da imagem -->
<img src="imagem.jpg" alt="Uma imagem sem borda" border="0">

<!-- Usar uma tabela para contornar a imagem -->
<table border="4" bdcolor="green" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="imagem.jpg" alt="Uma imagem bem contornada" border="0"></td>
  </tr>
</table>

Links

Para fazermos uma imagem com uma hiperligação basta usar a tag acomo se usa no texto.

<a href="http://www.dominio.com/pagina" target="_parent">
  <img src="imagem.jpg" alt="Imagem com ligação" border="0">
</a>

Curiosidade

Podemos criar uma galeria de imagens clicáveis usando todos os parâmetros de cima. Encolhemos as imagens e criamos umlinkà imagem original, organizando-as dentro de uma tabela.

<table width="300" border="1" bdcolor="grey" cellpadding="1" cellspacing="1">
  <tr>
    <td width="100" height="100"><a href="imagem1.jpgl"><img src="imagem1.jpg" alt="Imagem 1"
                                      width="200" height="200" border="0"></a></td>
    <td width="100" height="100"><a href="imagem2.jpgl"><img src="imagem2.jpg" alt="Imagem 2"
                                      width="200" height="200" border="0"></a></td>
    <td width="100" height="100"><a href="imagem3.jpgl"><img src="image3.jpg" alt="Image 3"
                                      width="200" height="200" border="0"></a></td>
  </tr>
  <tr>
    <td width="100" height="100"><a href="imagem4.jpgl"><img src="imagem4.jpg" alt="Imagem 1"
                                      width="200" height="200" border="0"></a></td>
    <td width="100" height="100"><a href="imagem5.jpgl"><img src="imagem5.jpg" alt="Imagem 2"
                                      width="200" height="200" border="0"></a></td>
    <td width="100" height="100"><a href="imagem6.jpgl"><img src="image6.jpg" alt="Image 3"
                                      width="200" height="200" border="0"></a></td>
  </tr>
</table>

A Saída dentro de um browser teria o seguinte aspecto (ao clicar-se numa imagem, abrir-se-á na mesma janela a respectiva imagem, mas no tamanho normal):

Os elementos do HTML/Metadados

As metatagssão usadas para diversas ocasiões. É possível fazer passar aobrowserinformações acerca do conteúdo, do autor, de descrições, etc, assim como controlar fluxo de informação e indexação acrawlersdos serviços de motores de busca.
Para se usar este recurso, usamos a tag <meta> dentro do corpo de <head>, composto pelos parâmetros HTTP-EQUIV, name e content.

<html>
<head>
  <title>Página</title>
  <meta http-equiv="Refresh" content="60" />
</head>
<body>
</body>
</html>

No exemplo acima, atagmeta indica aobrowserque a página em questão deve ser atualizada de 60 em 60 segundos. Outrastagsmeta podem ser combinadas de forma a criarem outras instruções. De seguida apresentamos mais umas.

Indexação

Como já foi referido, as metatagspodem ser usadas para informar aoscrawlersdos motores de busca o tipo de dados, as páginas, etc que podem ou não ser indexadas. Essas instruções são passadas usando o parâmetro name="robots" seguido da instrução que queremos passar aocrawlercom content="<informação a passar ao crawler>". Exemplos destas metatags parabots:

<meta name="robots" content="INDEX" />: Este parâmetro informa aocrawlerque pode indexar a página, ou seja, indexar a informação que se encontra nela.
<meta name="robots" content="FOLLOW" />: Este parâmetro passa aocrawlera informação das hiperligações existentes na página, levando-o a segui-las para poder ou não - consoante as metatagsque existirem nas outras páginas - a indexar a informação lá existente.
<meta name="robots" content="NOINDEX" />: Com isto estamos a pedir aocrawlerpara não indexar a página referida.

Também é possível combinar vários parâmetros:

<meta name="robots" content="INDEX,NOFOLLOW" />: Lendo isto, ocrawlerindexará a página referida mas não seguirá as hiperligações sugeridas no resto do documento.

Descrição

Com estastagsdescritivas, podemos oferecer ao serviço de indexação ou motor de busca um texto personalizado e descritivo da página, ao invés das primeiras linhas que contem.

<meta name="description" content="Esta é a página pessoal do Vitor!" />

Não há muita variação possível aqui, a descrição é feita de apenas uma forma.

Palavras chave

Para quecrawlersindexem por categorias, precisamos fazer passar uma metatag com palavras chave acerca dosite:

<meta name="keywords" content="palavra chave nº1, palavra chave nº2, ..." />

Autor

É possível fazer passar informação do autor da página através dasmetatags. A forma de uso é a seguinte, desconhecendo-se atualmente outra forma de atuar.

<meta name="author" content="Lightningspirit" />

Cache

Podemos através dasmetatagsoptar por não fazercachetanto à página como aos ficheiros nela submetidos nobrowserdo cliente.

<meta http-equiv="cache-control" content="no-cache" />

ou

<meta http-equiv="Pragma" content="no-cache" />

Refresh e redirecionamentos

Com o mesmo http-equiv, é possível fazer passar aobrowser o refresh da página de x em x segundos:

<meta http-equiv="Refresh" content="60" />: De 60 em 60 segundos (1 em 1 minuto) o browser atualizará a página

Do mesmo modo, acrescentando apenas um parâmetro, é possível redirecionar o browser para outra página:

<meta http-equiv="Refresh" content="3;URL:página de destino" />: Ao entrar nesta página, o cliente é redirecionando dentro de 3 segundos para a URL especificada.

Os elementos do HTML/Texto

Editores de HTML

Como já tivemos oportunidade de observar, o código de um documento HTML é texto puro (isto é, é completamente traduzível através da tabela de caracteres ASCII). Visto isto, qualquer editor de texto sem formatação permite escrever código HTML. Seguem-se alguns exemplos:

Notepad (Windows)
Vim (Unix)
Emacs (Unix)
Xemacs (Unix e Windows)
Wordpad (Windows)
Edit (DOS)

Obviamente que para trabalhos mais complexos o melhor é usar-se um editor HTML especializado. Existem muitos gratuitos na internet. Seguem-se alguns exemplos:

PHP Editor - Editor de PHP compacto e completo. Também serve para HTML.
AceHTML Free - Versão gratuita do aclamado AceHTML. Possui muitas funções. É a melhor opção para edição de HTML.
Sothink HTML - Para quem tem um computador lento e precisa de poupar memória, este editor de HTML é dos melhores que andam pela rede.
OpenOffice.org - Para quem tem o OpenOffice ou queira instalá-lo, também poderá usar a ferramenta de edição de HTML existente no pacote.

Seja qual for a sua opção, aconselho-o a vasculhar pelo menos todos estes quatro programas aqui apresentados. Depois de um tempo a experimentá-lo poderá perceber qual deles é o melhor para a sua situação.

Marcações básicas

O primeiro passo é criar um ficheiro vazio e dar-lhe a extensão .html. Para detalhes sobre como fazer isto consulte a documentação do seu Interface com o Utilizador (User Interface). Seguidamente é necessário abrir o ficheiro vazio com o editor de texto escolhido.

Começa-se por inserir a estrutura básica dos documentos HTML que, como já vimos, é composta por um mínimo de 3 TAGs normais (<html>, <head> e <body>):

<html>
  <head>
    <title>Título da Página</title>
  </head>
  <body>
    DOCUMENTO HTML<hr />Este documento tem o propósito de mostrar
    somente o que existe
    em &lt;body&gt; saí no corpo do ''browser''.
  </body>
</html>

A saída é a seguinte:

Os elementos do HTML/Usando seletores em elementos HTML

CSS - Cascading Style Sheet

Introdução

Folhas de estilo em cascata (CSS) é a formatação de seu (X)HTML, qualquer alteração (cor de fonte, tamanho de fonte, tamanho da alguma coluna, etc.) no HTML, antigamente deveria ser feita em todas as páginas de seu site.

Agora que já vimos HTML, podemos ver como estilizar nosso documento HTML. A estilização permite que criemos estilos para os nossos documentos HTML, de modo a colocar uma "cara" nos documentos, podemos mudar a cor do fundo, a fonte, criar caixas com bordas, e muito mais. Mais aí você me pergunta: "Eu já não posso fazer isso em HTML"?

Mas porque?

Simples, os sites antigamente eram desenvolvidos com a estrutura junto com a formatação, isso gerava um trabalho imenso a cada alteração. E o código desses sites eram sujos demais, com tabelas desnecessárias e diversas "sujeiras" criadas por editores WYSIWYG.

Com o bom uso da CSS isso é possível ser contornado sem alterar a estrutura do projeto web.

Por que devo usar CSS?

Código enxuto, deixa seu (X)HTML a ser usado para sua função principal, sem sujar o código, focando na acessibilidade e semântica;
Facilidade de manutenção;
Otimização de tempo de carregamento da página.

Atributos CSS e seus efeitos

Nome	Valor	Valor inicial	Herdado?	Percentagens (padrão: N/A)	Grupo de Mídias
background-attachment	scroll \| fixed \| inherit	scroll	no		visual
background-color	<color> \| transparent \| inherit	transparent	no		visual
background-image	<uri> \| none \| inherit	none	no		visual
background-position	[ [ <percentage> \| <length> \| left \| center \| right ] [ <percentage> \| <length> \| top \| center \| bottom ]? ] \| [ [ left \| center \| right ] \|\| [ top \| center \| bottom ] ] \| inherit	0% 0%	no	refer to the size of the box itself	visual
background-repeat	repeat \| repeat-x \| repeat-y \| no-repeat \| inherit	repeat	no		visual
background	['background-color' \|\| 'background-image' \|\| 'background-repeat' \|\| 'background-attachment' \|\| 'background-position'] \| inherit	see individual properties	no	allowed on 'background-position'	visual

Sintaxe CSS

A sintaxe CSS é bem simples, segue abaixo um exemplo:

 seletor {
   propriedade: valor;
 }

Onde:

seletor é a tag HTML que você quer estilizar. propriedade é a propriedade CSS que você quer aplicar para o seletor. valor é o valor a ser declarado para propriedade.

Seletores

Existe diversas formas de estilizar um seletor, desde estilizar um seletor genérico, por exemplo:

 div {
    propriedade: valor;
 }

 /* Desta forma todos elementos 'DIV' receberiam as declarações CSS. */

Até estilizar apenas um único elemento, por exemplo, um elemento com o atributo 'ID' (lembre-se que em seu (X)HTML não pode existir elementos com o atributo 'ID' igual):

#ElementoUnico {
    propriedade: valor;
}

/* Desta forma apenas o elemento com ID = ElementoUnico receberia as declarações CSS. */

Nota: No caso de estilização por 'ID' não há diferenças se escrevermos "#ElementoUnico" ou "div#ElementoUnico" Veremos a seguir que pode existir diferenças na estilização utilizada desta forma com elementos com o atributo 'CLASS'.

Seletor de tag

Como já vimos, é o seletor CSS utilizado para elementos genéricos.

Exemplo:

p {
    propriedade: valor;
}

/* Desta forma todos elementos 'P' receberiam as declarações CSS. */

Seletor de ID

Como já vimos, é o seletor CSS utilizado para um elemento específico. Este seletor vem sempre acompanhado de "#" antes da 'ID'

Exemplo:

#ElementoUnico {
    propriedade: valor;
}

/* Desta forma apenas o elemento com ID = ElementoUnico receberia as declarações CSS. */

Seletor de Classe

No (X)HTML pode (e deve) ser re-aproveitadas classes de elementos que recebem as mesmas declarações. Este seletor vem sempre acompanhado de "." antes da 'CLASS'

Exemplo:

CÓDIGO HTML:

<a class="estilosIguais" href="#">Link A</a>
<a class="estilosIguais" href="#">Link B</a>

CÓDIGO CSS:

.linksIguais {
    color:red;
    text-decoration:underline;
}
/* Desta forma todos os ELEMENTOS com a classe 'estilosIguais" receberia as declarações CSS. */

Por quê se disse "ELEMENTOS" e não "LINKS HTML"? Por causa da forma que o CSS foi escrito.

Declarando apenas a classe como seletor, você está indicando que TODOS elementos com esta classe (seja link, ou não) receberá as propriedades do CSS.

Se o seu desejo for especificar estas propriedades apenas para links, você deve indicar a tag alvo antes da classe:

Exemplo:

CÓDIGO HTML:

<a class="estilosIguais" href="#">Link A</a>
<a class="estilosIguais" href="#">Link B</a>

<p class="estilosIguais">Este parágrafo receberá as declarações CSS?</p>

CÓDIGO CSS:

a.linksIguais {
    color:red;
    text-decoration:underline;
}
/* Desta forma todos os ELEMENTOS <a>, com a classe 'estilosIguais" receberia as declarações CSS. */

Cartões de referência

Comparação entre as versões do HTML

n°	Elemento	HTML2.0(1995)	HTML3.2(1997)	HTML4.01(1999)			XHTML1.0(2000)			XHTML1.1(2001)	(X)HTML5(s/d)	XHTML2.0(s/d)
n°	Elemento	HTML2.0(1995)	HTML3.2(1997)	F	T	S	F	T	S	XHTML1.1(2001)	(X)HTML5(s/d)	XHTML2.0(s/d)
1	a	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
2	abbr	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
3	access	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
4	acronym	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não	Não
5	action	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
6	address	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
7	animate	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
8	applet	Não	Sim	Sim	Sim	Não	Sim	Sim	Não	Não	Não	Não
9	area	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
10	article	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
11	aside	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
12	audio	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
13	audioscope	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
14	b	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
15	base	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
16	basefont	Não	Sim	Sim	Sim	Não	Sim	Sim	Não	Não	Não	Não
17	bb	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
18	bdo	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
19	bgsound	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
20	big	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não	Não
21	blackface	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
22	blink	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
23	blockcode	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
24	blockquote	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
25	body	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
26	bq	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
27	br	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
28	button	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
29	canvas	Não	Não	{{não	Não	Não	Não	Não	Não	Não	Sim	Não
30	caption	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
31	center	Não	Sim	Sim	Sim	Não	Sim	Sim	Não	Não	Não	Não
32	cite	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
33	code	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
34	col	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
35	colgroup	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
36	command	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
37	comment	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
38	datalist	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
39	dd	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
40	del	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
41	delete	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
42	details	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
43	dfn	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
44	di	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
45	dir	Sim	Sim	Sim	Sim	Não	Sim	Sim	Não	Não	Não	Não
46	dispatch	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
47	div	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
48	dl	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
49	dt	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
50	em	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
51	embed	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
52	ev:listener	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
53	fieldset	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
54	figcaption	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
55	figure	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
56	fn	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
57	font	Não	Sim	Sim	Sim	Não	Sim	Sim	Não	Não	Não	Não
58	footer	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
59	form	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
60	frame	Não	Não	Sim	Não	Não	Sim	Não	Não	Não	Não	Não
61	frameset	Não	Não	Sim	Não	Não	Sim	Não	Não	Não	Não	Não
62	group	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
63	h	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
64	h1	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
65	h2	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
66	h3	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
67	h4	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
68	h5	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
69	h6	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
70	handler	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
71	head	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
72	header	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
73	hgroup	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
74	hr	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
75	html	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
76	i	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
77	iframe	Não	Não	Sim	Sim	Não	Sim	Sim	Não	Não	Sim	Não
78	ilayer	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
79	image	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
80	img	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
81	input	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
82	ins	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
83	insert	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
84	isindex	Sim	Sim	Sim	Sim	Não	Sim	Sim	Não	Não	Não	Não
85	kbd	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
86	keygen	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
87	l	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
88	label	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
89	layer	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
90	legend	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
91	li	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
92	limittext	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
93	link	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
94	listing	Sim	Sim	Não	Não	Não	Não	Não	Não	Não	Não	Não
95	load	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
96	map	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
97	mark	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
98	marquee	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
99	menu	Sim	Sim	Sim	Sim	Não	Sim	Sim	Não	Não	Sim	Não
100	message	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não
101	meta	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
102	meter	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
103	model	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
104	multicol	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
105	nav	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
106	nextid	Sim	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não
107	nl	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
108	nobr	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
109	noembed	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
110	noframes	Não	Não	Sim	Sim	Não	Sim	Sim	Não	Não	Não	Não
111	noscript	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
112	nosmartquotes	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
113	object	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
114	ol	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
115	optgroup	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
116	option	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
117	output	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Sim
118	p	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
119	param	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
120	plaintext	Sim	Sim	Não	Não	Não	Não	Não	Não	Não	Não	Não
121	pre	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não	Não
122	progress	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
123	q	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
124	range	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
125	rb	Não	Não	Não	Não	Não	Não	Não	Sim	Não	Não	Sim
126	rbc	Não	Não	Não	Não	Não	Não	Não	Sim	Não	Não	Sim
127	rebuild	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
128	recalculate	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
129	refresh	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
130	repeat	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
131	reset	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
132	revalidate	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
133	rp	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Sim	Sim
134	rt	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Sim	Sim
135	rtc	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não	Sim
136	ruby	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Sim	Sim
137	s	Não	Não	Sim	Sim	Não	Sim	Sim	Não	Não	Sim	Não
138	samp	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
139	script	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
140	secret	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
141	section	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Sim
142	select	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
143	select1	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
144	send	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
145	separator	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
146	setfocus	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
147	setindex	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
148	setvalue	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
149	shadow	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
150	sidebar	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
151	small	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não
152	sound	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
153	source	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
154	spacer	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
155	span	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
156	standby	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
157	strike	Sim	Sim	Sim	Sim	Não	Sim	Sim	Não	Não	Não	Não
158	strong	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
159	style	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
160	sub	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
161	submit	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
162	summary	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Sim
163	sup	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
164	switch	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
165	table	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
166	tbody	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
167	td	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
168	textarea	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
169	tfoot	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
170	th	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
171	thead	Não	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
172	time	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
173	title	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
174	tr	Não	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
175	track	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
176	trigger	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
177	tt	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Não	Não
178	u	Não	Sim	Sim	Sim	Não	Sim	Sim	Não	Não	Não	Não
179	ul	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
180	upload	Não	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim
181	var	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim	Sim
182	video	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
183	wbr	Não	Não	Não	Não	Não	Não	Não	Não	Não	Sim	Não
184	xml	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D	N/D
185	xmp	Sim	Sim	Sim	Sim	Não	Sim	Sim	Não	Não	Não	Não

Ligações externas

Referências

W3C HTML, XHTML etc.

Completed Work
- RDFa in XHTML: Syntax and Processing, A collection of attributes and processing rules for extending XHTML to support RDF W3C Recommendation 14 October 2008.
- XHTML™ Basic 1.1 W3C Recommendation 29 July 2008.
- XHTML-Print W3C Recommendation 20 September 2006.
- Document Object Model (DOM) Level 2 HTML Specification. Version 1.0 W3C Recommendation 09 January 2003.
- XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition). A Reformulation of HTML 4 in XML 1.0 W3C Recommendation 26 January 2000, revised 1 August 2002.
- XHTML™ 1.1 - Module-based XHTML W3C Recommendation 31 May 2001.
- Ruby Annotation W3C Recommendation 31 May 2001 (Markup errors corrected 25 June 2008).
- HTML 4.01 Specification W3C Recommendation 24 December 1999.
- HTML 3.2 Reference Specification W3C Recommendation 14-Jan-1997.
- XHTML Media Types - Second Edition, Serving the Most Appropriate Content to Multiple User Agents from a Single Document Source W3C Working Group Note 16 January 2009.
- RDFa Primer, Bridging the Human and Data Webs W3C Working Group Note 14 October 2008.
- Offline Web Applications W3C Working Group Note 30 May 2008.
- XHTML™ XHTML™ 1.0 in XML Schema W3C Working Group Note 2 September 2002.
- XHTML™ Basic 1.1, XHTML+SMIL Profile W3C Working Group Note 31 January 2002.
Drafts
Obsolete

W3C CSS

Completed Work
- zzzzz
- zzzzz
- zzzzz
Drafts
- zzzzz
- zzzzz
- zzzzz
- zzzzz
Obsolete

Outros

Português
- Site do Maujor - CSS, Padrões Web, Acessibilidade Maurício Samy Silva
- Tableless - Desenvolvimento Web com XHTML e CSS Tableless.com
- Pinceladas da Web - HTML5 Hard Coding and Bullet Proof CSS Pedro Rogério
- CSS no Lanche - Ingerir CSS na hora do lanche não engorda Pedro Rogério
- CriarWeb.com Manuais Desenvolvimento web Juliana Monteiro Lázaro
- Mozilla Developer Center PT Mozilla Foundation
- HTML.net - Tutoriais HTML e CSS HTML.net
English
- Jens O. Meiert - Web design, Web development, Accessibility, and Usability de Jens O. Meier
- Cookwood Press Elizabeth Castro
- W3Schools Online Web Tutorials Refsnes Data.
- Mozilla Developer Center Mozilla Foundation
- QuirksMode - for all your browser quirks quirksmode.org

Curso de HTML/Imprimir

Capa

Prefácio

Introdução

A sintaxe XHTML

Características obsoletas

Atributos de FRAMESET

Atributos de FRAME

Exemplo de página com frame

Introdução/Contexto

O que é o HTML?

Introdução/Uma rápida introdução ao HTML

O que é uma tag?

Estrutura básica de um documento HTML

Atributos das'tags

Font

Color

Size

Os elementos do HTML/Agrupamento de conteúdo

Elementos normais

Texto em itálico

Texto em negrito

Cruzamento de atributos

Elementos simples

Linha Horizontal

Mudança de linha

Mudança de parágrafo

Estrutura básica

Explicação dastagsda estrutura básica

Os elementos do HTML/Dados tabulares

Tabelas

Parâmetros de Table

Width

Height

Border, Bgcolor e bdcolor

Cellpadding

Cellspacing

<td>

<tr>

<th>

Imagens

Width

Height

Align

Border

Links

Curiosidade

Os elementos do HTML/Metadados

Indexação

Descrição

Palavras chave

Autor

Cache

Refresh e redirecionamentos

Os elementos do HTML/Texto

Editores de HTML

Marcações básicas

Os elementos do HTML/Usando seletores em elementos HTML

CSS - Cascading Style Sheet

Introdução

Mas porque?

Por que devo usar CSS?

Atributos CSS e seus efeitos

Sintaxe CSS

Seletores

Seletor de tag

Seletor de ID

Seletor de Classe

Cartões de referência

Comparação entre as versões do HTML

Ligações externas

Referências