(Parte 1 de 14)

Guia Prático de HTML

Este Guia foi escrito por Tiago Daniel de Souza Email: tiagocopa [at] gmail [dot] com Site do Autor: http://www.tiagosouza.com

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.0 Brazil

License. http://creativecommons.org/licenses/by-nc-sa/2.0/br

1. INTRODUÇÃO05
2. SOBRE O HTML05
3. SUA PRIMEIRA PÁGINA EM HTML06
3.1 - O que está dentro de um arquivo em HTML?!06
3.2 - Experimente você mesmo06
3.3 - Explicação do Exemplo06
3.4 - Devemos usar a extensão .htm ou .html?07
3.5 - Editores "Puros" versus WYSIWYG07
3.6 - FAQ (Perguntas Freqüentes)07
4. ELEMENTOS E ATRIBUTOS08
4.1 – Elementos08
4.2 – Atributos das Tags09
4.2.1 - Atributos podem ser aplicados à maioria das tags10
4.3 - Devemos usar aspas ou plicas/apóstrofos1
4.4 – Notas Rápidas1
5. O CABEÇALHO DE UM DOCUMENTO HTML1
5.1 - O Elemento <head> (cabeçalho do documento)1
5.1.1 - A Informação Contida no Elemento <head>1
5.1.2 - Elementos de cabeçalho ( <head> )12
5.1.3 - A declaração DOCTYPE12
5.2 - O elemento <meta>12
5.2.1 - Palavras-chave para os motores de pesquisa12
5.2.2 - Valores desconhecidos para o atributo name do <meta>13
6. MODIFICANDO O CORPO DO DOCUMENTO13
7. ELEMENTOS BÁSICOS DA LINGUAGEM HTML14
7.1 – Cabeçalhos14
7.2 – Parágrafos14
7.2.1 - Alinhamentos de parágrafo14
7.3 - Criando uma divisão15
7.4 – Quebras de Linha16
7.5 – Comentários16
7.6 – Informações Úteis16
7.7 – Lista de elementos básicos do HTML17
8. FORMATAÇÃO DE TEXTO17
8.1 – Elementos para formatação de texto17
8.2 – Elementos para o "output de código de computador"18
8.3 – Elementos para citações e listas de definições18
9. LIGAÇÕES DE HIPERTEXTO ("LINKS")18
9.1 - Links internos19
9.2 - Links locais ou relativos20
9.3 - Links externos20
9.4 - Alvo (target)20
9.5 – Elementos para fazer ligações20
10.1 - Listas Não Ordenadas21
10.2 - Listas Ordenadas21
10.3 – Listas de Definições21
10.4 – Elementos para Listas2
1. IMAGENS2
1.1 - Tamanho de exibição da imagem23
1.2 - Texto alternativo24
1.3 - Borda da imagem24
1.4 - Alinhamento da imagem24
1.5 - Espaçamento da imagem24
1.6 – Elementos relacionados com imagens25
1.7 – Fundos de Página25
1.7.1 - O atributo bgcolor do elemento <body>25
1.7.2 - O atributo background26
1.8 – Dicas26
12 – CORES27
12.1 - Formas de exprimir cores27
12.2 – Nomes de cores27
12.3 – Cores seguras da Web28
12.4 - Formas de exprimir os valores das cores30
12.5 - Mais de 16 milhões de cores diferentes32
12.6 - Mais nomes de cores32
13. ENTIDADES, ACENTUAÇÃO E CARACTERES ESPECIAIS32
14. TABELAS3
14.1 - Espaçamento entre células35
14.2 - Preenchimento de células35
14.3 - Largura de células e tabelas37
14.4 - Uso de tabelas37
14.5 – Dicas37
14.6 – Elementos relativos a tabela37
15. FORMULÁRIOS38
15.1 – Criar Formulários38
15.2 – input38
15.3 - "Radio Buttons"39
15.4 – Checkboxes39
15.5 - O atributo action e o botão de submissão39
15.6 - Elementos para Formulários40
16. FRAMES HTML40
16.1 - Vantagens e desvantagens das molduras40
16.2 - O Elemento frameset40
16.3 – O Elemento frame41
16.4 – Dicas41
16.5 – Elementos para Frames41
17. INSERÇÃO DE SCRIPTS41
17.1 - Inserir um script numa página HTML41
17.1.1 - Um exemplo prático42
17.2 - Como lidar com os browsers antigos42
17.2.1 - O Elemento <noscript>42
17.2.2 - Um exemplo42
18. OUTRAS POSSIBILIDADES43
19. COLOCANDO SEU SITE NO AR43
19.1 – Isto é tudo que eu preciso?!4
19.2 - Como eu faço envio os arquivos do meu site?!4
20. HTML AVANÇADO45
20.1 - Folhas de Estilo (CSS)46
20.2 – Templates47
20.3 – Acessibilidade47
20.4 – Sites dinâmicos ou automatizados48
20.5 - Web standards e validação49
20.5.1 - O que mais há para conhecer sobre HTML?!49
20.5.1.1 - Legal!! Posso anunciar?!50
20.5.1.2 - Validação?! Porquê deveria eu fazer isto?!50
21 - GUIA DE REFERÊNCIA RÁPIDA51
2 – REFERÊNCIAS COMPLETAS DE HTML 4.0153
23. ATRIBUTOS ESPECIAIS DE HTML 45
23.1 - Atributos intrínsecos5
23.2 - Atributos nucleares ou intrínsecos ("Core Attributes")5
23.3 - Atributos lingüísticos5
23.4 - Atributos de teclado56
23.5 - Eventos de janela56
23.6 - Eventos para formulários56
23.7 - Eventos de teclado56
23.8 - Eventos do mouse57
24. O PRESENTE E O FUTURO DO MARKUP57
24.1 - O consórcio da Web57
24.2 - SGML e HTML57
24.3 – XML58
24.4 - RDF e Syndication58
25. DICAS FINAIS58

1. INTRODUÇÃO

As pessoas imaginam que é muito difícil construir um site. Isto não é verdade!! Qualquer um pode aprender como construir uma página. Se você continuar lendo, estará apto a construir um rapidamente, quando menos esperar.

Outros pensam - erroneamente - que será necessário softwares avançados e caros para construir websites. É verdade que existem muitos softwares capazes de criar um website para você. Alguns mais fechados que outros. Mas, se você pretende trilhar o caminho certo, deverá criar você mesmo o website. Felizmente, isto é simples é você já tem a sua disposição todos os softwares que necessita.

O objetivo desta minha apostila é fornecer os conhecimentos básicos que permitirão construir um website de forma correta. A apostila parte da estaca zero e não requer qualquer conhecimento prévio de programação.

Obviamente, a apostila não ensina tudo. Diante disto, será necessário que você se empenhe, pratique e consolide os ensinamentos aqui contidos. Mas, não se aborreça, pois aprender como construir um website é bem divertido e bastante satisfatório quando você trilha o caminho certo do aprendizado.

OK. Chega de conversa. Vamos começar

2. SOBRE O HTML

O HTML é uma Linguagem de marcação de texto. Mais especificamente, uma linguagem de marcação de hipertexto. Portanto, antes de começar a falar de HTML, vamos entender o que vem a ser uma linguagem de marcação.

Linguagens de marcação (markup languages em inglês) são linguagens que combinam texto com informações extras sobre o texto. Essa informação extra pode ser representada por diversos símbolos ou palavras-chave diferentes, dependendo da linguagem de marcação com que estivermos trabalhando.

O HTML não era uma linguagem de formatação de textos qualquer, ela possibilitava ligar textos que estavam num computador a textos que estavam num outro computador, usando como meio a internet. O processador e visualizador de HTML são chamados de navegador, pela característica do hipertexto que permite ao usuário "nadar" na informação.

O navegador (também chamado de browser), nada mais faz do que abrir arquivos de computador e, caso esses arquivos contenham códigos HTML, interpretá-los segundo o padrão do hipertexto e gerar a "página html", que é a manifestação gráfica dos códigos - aquilo que você usualmente vê quando navega pela internet. Por convenção, os nomes dos arquivos em HTML terminam com .html. Exemplo: index.html, foo.bar.html e etc.hml (existem também arquivos html que terminam com .shtml e outras extensões malucas). Observe que esses arquivos podem estar tanto no computador do usuário que usa o navegador quanto em outros computadores: o navegador é capaz de abrir esses arquivos desde que eles estejam acessíveis - as tais páginas web.

3. SUA PRIMEIRA PÁGINA EM HTML

Uma página HTML é dividida em duas partes, a cabeça e o corpo. Na cabeça (ou cabeçalho) são definidos os atributos principais do documento, como o título e as palavras-chave. O corpo contém a parte visível do documento, i.e, aquela que você verá processada em seu navegador. Existe ainda uma região da página que está tanto fora da cabeça quanto do corpo (não! não é a falta de juízo!), mas não iremos entrar nesse mérito.

3.1 - O que está dentro de um arquivo em HTML?!

• Um arquivo HTML é constituído por textos que definem os elementos da linguagem HTML usando "etiquetas de marcação";

• As etiquetas de marcação dão instruções ao navegador sobre a estrutura do documento e sobre a forma de como a página deve ser apresentada graficamente;

• Os arquivos HTML podem ser escritos usando um simples editor de textos e seus nomes devem possuir a extensão .html

3.2 - Experimente você mesmo

Bom, se você utiliza o Windows (95, 98, 2000, XP, etc), inicie o Bloco de Notas (Notepad).

Agora digite o seguinte texto:

<html> <head>

<title> Título da Página </title>

<body> Esta é minha primeira página. <b>Este texto está em negrito</b> </body>

Salve este arquivo com o nome index.htm

Abra o seu navegador. Agora abra o arquivo que você salvou acima, chamado index.htm utilizando as opções do menu ou arrastando o ícone do arquivo para dentro da janela do navegador. Observe o resultado.

3.3 - Explicação do Exemplo

A primeira tag em seu documento HTML é <html>. Esta tag define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML. A última tag em seu documento deverá ser </html>. Esta tag indica ao navegador que é o fim de seu documento HTML.

O texto entre as tags <head></head> é a informação do cabeçalho.

Nenhuma informação contida no cabeçalho é exibida na janela do navegador.

O texto entre as tags <title></title> é o título de seu documento. O

- 7 - título será exibido na legenda do navegador, na parte de cima do browser.

O texto entre as tags <body></body> são as informações que serão

exibidas na página.

O texto entre <b></b> ficará com o estilo Negrito (Bold)

3.4 - Devemos usar a extensão .htm ou .html?

Os nomes dos arquivos escritos em HTML devem ter a extensão .html, mas a extensão .htm ainda é utilizada. Este fato é uma herança dos tempos (préhistóricos no que diz respeito à Internet) do MS-DOS e do Windows 16 bits, em que os nomes dos arquivos tinham no máximo 8 caracteres e as suas extensões não podiam ter mais de 3 caracteres.

Essas deficiências, que no passado obrigaram a usar a extensão .htm em vez de .html já foram eliminadas. Por isso devemos usar a extensão .html, a não ser que exista uma boa razão para você estar utilizando .htm (pouco provável).

3.5 - Editores "Puros" versus WYSIWYG

Existem duas formas de se criar um texto formatado através de linguagens de marcação. A primeira consiste em escrever o texto, usando as instruções da linguagem, num editor de texto puro. Em seguida, usa-se o processador de texto para produzir o texto formatado.

A outra maneira é usar um editor de textos WYSIWYG (What You See Is What You Get - O Que Você Vê É O Que Você Tem). Apesar da sigla ser comprida, o conceito é simples: esse tipo de programa é composto por um editor de texto que também é um processador de textos formatados. A diferença aqui é que o texto que o usuário está editando e visualizando não é o texto puro, mas sim o texto já formatado graficamente, ou seja, o que você vê é o que você tem.

Você provavelmente já usou editores desse tipo. Os editores como o Word, o AbiWord e o OpenOffice Writer são WYSIWYG e os documentos que eles geram utilizam Linguagens de marcação.

3.6 - FAQ (Perguntas Freqüentes)

Depois que eu editei meu arquivo HTML, eu não consigo visualizar o resultado em meu navegador. Por quê?! Verifique se você salvou o arquivo com o nome correto e que sua extensão seja .htm. Confira também em sua barra de endereços do navegador, verifique quanto ao diretório se está correto.

Qual navegador eu devo utilizar?! Você pode utilizar qualquer browser, como o Internet Explorer, Mozilla, Opera, etc... particularmente recomendo o Firefox e o Internet Explorer.

Porque utilizamos tags com letras minúsculas?! Em HTML os nomes das tags e elementos podem ser escritos tanto com letras maiúsculas quanto com letras minúsculas, tanto que <B> é a mesma coisa que <b>. Se você observar em tutoriais encontrados pela Web, vai notar que os mais antigos geralmente utilizam letras maiúsculas para escrever os nomes das tags, mas os mais modernos utilizam exclusivamente letras minúsculas. Nesta minha apostila utilizo sempre letras minúsculas porque existe uma razão muito forte para isso.

A nova geração do HTML é uma aplicação do XML e é designada por XHTML. O XHTML é a melhor linguagem para se criar páginas para a Web, mas é mais restrita do que o HTML (“rouba” algumas das liberdades que o HTML oferece). Ao contrário do que acontece em HTML, em XML as etiquetas <B> e <b> representam elementos diferentes, visto que em XHTML foi adotado uma convenção segundo a qual todas as etiquetas devem ser escritas com letras minúsculas. Por este motivo é extremamente recomendável que se escreva todas as etiquetas com letras minúsculas. Deste modo, você estará adquirindo bons modos e quase não terá trabalho de converter suas páginas HTML para XHTML.

4. ELEMENTOS E ATRIBUTOS

4.1 - Elementos

Um elemento é uma estrutura semântica, composta de tag de abertura, conteúdo e tag de fechamento.

Os documentos HTML são simples arquivos de texto que contêm "tags de marcação". Essas etiquetas definem os elementos da linguagem HTML e os seus conteúdos. A lista seguinte indica algumas de suas características:

• As "tags de marcação" do HTML são usadas para definir os elementos.

(Parte 1 de 14)

Comentários