You are here: Foswiki>Sysadmin Web>CmiBrasilTech>GuiaHtml (13 Sep 2007, AlsteR)Edit Attach

Manual Pr\xE1tico de HTML

Este \xE9 um pequeno guia de como criar documentos num formato amig\xE1vel \xE0 World Wide Web. Quando voc\xEA navega na internet, praticamente todos as "p\xE1ginas" pelas quais voc\xEA passa est\xE3o escritas em HTML. Os requisitos para que voc\xEA entenda o que est\xE1 escrito aqui s\xE3o:

  • Saber navegar pela internet
  • Saber mexer num editor de textos
  • Um pouco de tempo livre

Este texto foi redigido pensando nas pessoas que ter\xE3o um primeiro contato com o HTML e tamb\xE9m para aquelas que buscam uma vis\xE3o geral do t\xF3pico de processamento de textos.

\xCDndice

Processamento e Formata\xE7\xE3o de textos

Essa primeira se\xE7\xE3o tem apenas finalidade a cultural de informar o que \xE9 processamento de textos, como surgiu, os principais conceitos da edi\xE7\xE3o em computador, etc. Se voc\xEA j\xE1 tem alguma no\xE7\xE3o nisso e quer partir direito pra pr\xE1tica, pule logo pra se\xE7\xE3o HTML.

Texto e escrita

Primeiro os caras escreviam coisas na areia da praia ou em volta da fogueira. Talvez na mesma \xE9poca descobriram que carv\xE3o e outras paradas serviam pra escrever em rochas e a\xED as primeiras hist\xF3rias em quadrinhos foram criadas.

Um pouco depois, os parceirias inventaram papiros, pergaminhos e pigmentos, e a\xED aqueles s\xEDmbolos de animais e forquilhas viraram \xE9picos.

A\xED, muito tempo depois, teve um cara que descobriu como seria muito legal se ele pudesse criar tipos m\xF3veis, encharc\xE1-los de tinta e prens\xE1-los em papel. E ele fez isso. E surgiram os primeiros contrabandistas de livros.

Voc\xEA deve estar achando que agora vou falar que o pr\xF3ximo paradigma da informa\xE7\xE3o veio com as televis\xF5es, os r\xE1dios, os computadores e as pixa\xE7\xF5es de banheiro. Certo, as paredes de banheiro s\xE3o o melhor sistema de publica\xE7\xE3o aberta j\xE1 desenvolvido, mas ler coisas no computador \xE9 algo muito pouco confort\xE1vel. Um jornal voc\xEA pode dobrar, por no bolso ou usar de papel higi\xEAnico, mas duvido que algu\xE9m consiga fazer o mesmo com um laptop.

Mesmo que o computador n\xE3o tenha roubado todo o espa\xE7o dos livros, ele ainda tem seus m\xE9ritos. No campo onde eles tem algo em comum - transmis\xE3o visual de informa\xE7\xF5es - o texto no computador possibilita um sequenciamento diferente da leitura do que no livro.

Texto puro

Dede o come\xE7o da computa\xE7\xE3o, o computador interpreta todas as letras e s\xEDmbolos gr\xE1ficos - ou caracteres - como n\xFAmeros. Na verdade, o processo \xE9 inverso: quando trata-se de texto, o computador interpreta n\xFAmeros como texto. Confuso? Calma, vamos por partes: o computador \xE9 um dispositivo de manipula\xE7\xE3o de informa\xE7\xF5es, mais especificamente informa\xE7\xF5es num\xE9ricas. Os computadores tem a limita\xE7\xE3o de s\xF3 saber manipular n\xFAmeros.

Ent\xE3o como fazer para que os computadores lidem com texto? Simples, basta criarmos uma correspond\xEAncia entre n\xFAmeros e os caracteres gr\xE1ficos. A esses n\xFAmeros d\xE1-se o nome de c\xF3digos de caracteres. O conjunto de todos os c\xF3digos \xE9 conhecido como charset.

Se eu quiser, posso muito bem inventar um charset. Posso fazer, por exemplo, a t\xEDpica associa\xE7\xE3o que fazemos entre as letras, em ordem alfab\xE9tica, e os n\xFAmeros:

C\xF3digo Caractere
01 A
02 B
03 C
04 D
05 E
06 F

Podemos inventar qualquer charset, mas, quando desejamos que outras pessoas entendam nossas mensagens facilmente, devemos nos preocupar em criar um charset universal. Assim como muitas outras coisas na computa\xE7\xE3o, existe uma certa padroniza\xE7\xE3o do charset. A maioria dos computadores usa o mesmo charset, conhecido como ASCII, que \xE9 a sigla para American Standard Code for Information Interchange.

A tabela seguinte mostra um peda\xE7o do charset ASCII:

C\xF3digo Caractere
65 A
66 B
67 C
68 D
69 E
79 F

A tabela ASCII pode ser vista aqui. Existe ainda o formato ASCII Extendido, que cont\xE9m caracteres acentuados e outros s\xEDmbolos al\xE9m das letras do idioma ingl\xEAs.

\xC9 importante ressaltar que nesse tipo de representa\xE7\xE3o n\xE3o h\xE1 como distinguir entre uma letra e uma letra em negrito ou letras com tamanhos diferentes, j\xE1 que na tabela ASCII esses atributos, como tamanho e it\xE1lico, n\xE3o existem. No ASCII, para cada letra s\xF3 h\xE1 uma manifesta\xE7\xE3o tipogr\xE1fica - no m\xE1ximo duas, no caso de letra mai\xFAscula e m\xEDn\xFAscula - e o texto escrito usando apenas essa representa\xE7\xE3o \xE9 chamado de texto puro.

Por conven\xE7\xE3o, os nomes de arquivos que terminam com .txt s\xE3o arquivos de texto puro. Se voc\xEA abri-los num editor de textos simples, como o Bloco de Notas, Nedit, Emacs ou similar, ver\xE1 apenas um texto em formata\xE7\xE3o ASCII.

Al\xE9m do ASCII, um outro padr\xE3o de representa\xE7\xE3o de caracteres muito poderoso \xE9 o Unicode, que foi idealizado para representar qualquer caractere de qualquer alfabeto humano (incluindo aqueles de idiomas mortos). Por quest\xE3o de simplicidade, n\xE3o nos referiremos ao Unicode ao longo deste documento e sim ao ASCII Extendido.

Markup Language

Durante o per\xEDodo em que na computa\xE7\xE3o os gr\xE1ficos n\xE3o eram muito desenvolvidos, o ASCII e outros padr\xF5es de texto puro foram suficientes. Com a expans\xE3o das capacidades do hardware de v\xEDdeo, surgiu a possibilidade de criar textos explorando cores, tamanhos e formas.

Na computa\xE7\xE3o, o desenvolvimento aliado \xE0 retrocompatibilidade costuma ser uma constante. Retrocompatibilidade, no caso da edi\xE7\xE3o de textos, quer dizer que os novos computadores suportam textos em negrito, it\xE1lico, etc, mas ainda funcionam em conformidade com o padr\xE3o ASCII. Mas como conciliar o padr\xE3o ASCII com todos esses atributos do texto?

A solu\xE7\xE3o para esse aparente dilema foi a cria\xE7\xE3o de processadores de texto. Esses processadores lidam com a chamada Markup Language (Linguagem de Marca\xE7\xE3o), uma linguagem de formata\xE7\xE3o escrita em texto puro. \xC3hn? Novamente, vamos por partes: um processador de texto \xE9 um programa que manipula textos de acordo com algumas instru\xE7\xF5es. No caso de processadores de texto gr\xE1ficos, as instru\xE7\xF5es est\xE3o no pr\xF3prio arquivo onde est\xE1 o texto. Assim, se eu quiser escrever um texto em negrito, terei que passar essa instru\xE7\xE3o ao processador. No meu texto, terei que incluir algum aviso pro processador interpretar aquilo como uma instru\xE7\xE3o sobre a natureza gr\xE1fica do meu texto.

Para o computador n\xE3o confundir as instru\xE7\xF5es com o texto, temos que padronizar as instru\xE7\xF5es, uma vez que elas tamb\xE9m s\xE3o escritas em texto puro. Existem muitas formas de se fazer isso. Aqui daremos o exemplo segundo a solu\xE7\xE3o encontrada no padr\xE3o do html. Suponha que tudo num texto que estiver escrito entre par\xEAnteses ser\xE1 considerado como instru\xE7\xE3o pelo processador e tudo que estiver fora dos par\xEAnteses seja considerado como o texto a ser formatado pelo processador. Ent\xE3o, algo como: 

TEXTO SIMPLES
(computador, o texto a seguir \xE9 em negrito!!)
TEXTO EM NEGRITO
(computador, o texto anterior foi em negrito!!)
TEXTO SIMPLES

Quando for interpretado pelo processador de textos, dever\xE1 produzir no monitor ou na impressora o seguinte:

TEXTO SIMPLES
TEXTO EM NEGRITO
TEXTO SIMPLES

Damos o nome de caracteres reservados aos par\xEAnteses, pois eles servem como marcadores das instru\xE7\xF5es, e nisso consiste o Markup Language. Mas e se voc\xEA quisesse escrever um texto entre par\xEAnteses, como por exemplo (TEXTO EM NEGRITO)? Simples, \xE9 s\xF3 fazer com que a combina\xE7\xE3o 

((

seja interpretada pelo processador como apenas um par\xEAntese, o mesmo acontecendo para os par\xEAnteses )). Assim, nosso exemplo ficaria assim: 

(computador, o texto a seguir \xE9 em negrito!!)
((TEXTO EM NEGRITO))
(computador, o texto anterior foi em negrito!!)

Considere novamente nosso primeiro exemplo: 

TEXTO SIMPLES
(computador, o texto a seguir \xE9 em negrito!!)
TEXTO EM NEGRITO
(computador, o texto anterior foi em negrito!!)
TEXTO SIMPLES

Onde a sa\xEDda produzida pelo processador de texto \xE9:

TEXTO SIMPLES
TEXTO EM NEGRITO
TEXTO SIMPLES

Repare que nem todo o texto ficou em negrito. Apenas a por\xE7\xE3o de texto que est\xE1 entre as instru\xE7\xF5es de come\xE7ar e terminar o negrito \xE9 que foi afetado. A maioria dos comandos da maioria das linguagens de markup utiliza comandos que precisam ser come\xE7ados e terminados, ou seja, s\xE3o comandos de bloco, pois afetam uma se\xE7\xE3o do texto. Outros comandos n\xE3o necessitam de serem terminados, como o caso de quebras de linha e novos par\xE1grafos.

Resumindo, as linguagens de marca\xE7\xE3o consistem de instru\xE7\xF5es que ficam misturadas ao pr\xF3prio texto e s\xE3o interpretadas por um processador de textos, e a partir dessa interpreta\xE7\xE3o \xE9 produzida uma formata\xE7\xE3o gr\xE1fica do texto. As linguagens de marca\xE7\xE3o mais modernas tamb\xE9m suportam a formata\xE7\xE3o l\xF3gica do textos, isto \xE9, sua divis\xE3o em cabe\xE7alho, rodap\xE9, notas, se\xE7\xF5es como cap\xEDtulos, \xEDndice, bibliografia, etc. A formata\xE7\xE3o l\xF3gica ajuda tanto no estilo gr\xE1fico quanto na cataloga\xE7\xE3o de textos em bancos de dados.

Editores "Puros" versus WYSIWYG

Existem duas formas de se criar um texto formatado atrav\xE9s de linguagens de marca\xE7\xE3o. A primeira consiste em escrever o texto, usando as instru\xE7\xF5es da linguagem, num editor de texto puro. Em seguida, usa-se o processador de texto para produzir o texto formatado.

A outra maneira \xE9 usar um editor de textos WYSIWYG (What You See Is What You Get - O Que Voc\xEA V\xEA \xC9 O Que Voc\xEA Tem). Apesar da sigla ser comprida, o conceito \xE9 simples: esse tipo de programa \xE9 composto por um editor de texto que tamb\xE9m \xE9 um processador de textos formatados. A diferen\xE7a aqui \xE9 que o texto que o usu\xE1rio est\xE1 editando e visualizando n\xE3o \xE9 o texto puro, mas sim o texto j\xE1 formatado graficamente, ou seja, o que voc\xEA v\xEA \xE9 o que voc\xEA tem.

Voc\xEA provavelmente j\xE1 usou editores desse tipo. Os editores como o Word, o AbiWord e o OpenOffice Writer s\xE3o WYSIWYG e os documentos que eles geram utilizam linguagens de marca\xE7\xE3o.

Hipertexto

A formata\xE7\xE3o gr\xE1fica e l\xF3gica s\xE3o duas das principais caracter\xEDsticas do texto eletr\xF4nico. Elas definem um modo de escrever o texto. A outra caracter\xEDstica importante no texto eletr\xF4nico reside na sua leitura. No texto eletr\xF4nico \xE9 poss\xEDvel criar refer\xEAncias din\xE2micas que relacionem uma se\xE7\xE3o do texto com outra, e \xE9 permitido ao leitor, ao encontrar a refer\xEAncia, mudar de se\xE7\xE3o do texto ou mesmo saltar para outro texto. O texto formatado que possui essa possibilidade \xE9 chamado de Hipertexto.

HTML B\xE1sico

O HTML (Hyper Text Markup Language) \xE9 uma linguagem de marca\xE7\xE3o que suporta as refer\xEAncias do hipertexto. Ela surgiu logo no in\xEDcio da internet, junto com a World Wide Web. O HTML n\xE3o era uma linguagem de formata\xE7\xE3o 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 \xE9 chamado de Navegador, por causa da caracter\xEDstica do hipertexto que permite ao usu\xE1rio "nadar" na informa\xE7\xE3o.

O navegador, tamb\xE9m chamado de browser, nada mais faz do que abrir arquivos de computador e, caso esses arquivos contenham c\xF3digo html, interpret\xE1-los segundo o padr\xE3o do hipertexto e gerar a "p\xE1gina html", que \xE9 a manifesta\xE7\xE3o gr\xE1fica dos c\xF3digos - aquilo que voc\xEA usualmente v\xEA quando navega pela internet. Por conven\xE7\xE3o, os nomes dos arquivos em html terminam com .html. Exemplo: index.html, foo.bar.html e etc.hml (existem tamb\xE9m arquivos html que terminam com .shtml e outras extens\xF5es malucas). Observe que esses arquivos podem estar tanto no computador do usu\xE1rio que usa o navegador quanto em outros computadores: o navegador \xE9 capaz de abrir esses arquivos desde que eles estejam acess\xEDveis - as tais p\xE1ginas web. Para uma maior compreens\xE3o de como isso \xE9 poss\xEDvel, consulte um guia b\xE1sico sobre redes e internet.

Por que n\xE3o usar um editor de html?

Voc\xEA deve estar pensando agora que existem programas que criam p\xE1ginas na web para voc\xEA. Bem, existem, mas \xE9 importante aprender como que o c\xF3digo HTML foi criado. Se voc\xEA n\xE3o sabe o fundamental do HTML, ent\xE3o desista de todo o seu poder de usar esses editores - isto n\xE3o \xE9 muito fa\xE7a voc\xEA mesmo, n\xE3o \xE9? Estes programas s\xE3o legais, mas voc\xEA realmente precisa saber o que eles est\xE3o fazendo por de tr\xE1s das cenas.

Mesmo sabendo que tais programas s\xE3o \xFAteis, muitas pessoas ainda escrevem a m\xE3o HTML utilizando ferramentas de editores de texto comum. Editores de Texto s\xE3o programas para manipula\xE7\xE3o b\xE1sica de palavras sem todas aquelas "frescuragens" de um processador de palavras. As vantagens de se utilizar um editor de texto \xE9 que os arquivos s\xE3o criados e salvos sem os c\xF3digos invis\xEDveis ao usu\xE1rio para formata\xE7\xE3o, os quais poderiam afetar drasticamente o seu documento quando for salvo como uma p\xE1gina da web e jogado num browser. Lembre-se sempre que a maioria dos editores/processadores WYSIWYG n\xE3o exibem o conte\xFAdo dos seus arquivos em texto puro, mas sim o seu texto j\xE1 formato. Se voc\xEA ainda tem d\xFAvidas nisso, releia as se\xE7\xF5es Texto puro, Markup Language e Editores "Puros" versus WYSIWYG. Por esta raz\xE3o, recomendamos o uso de editores de texto simples criar documentos da web.

Um ponto contra os editores de html, esses programas que facilmente criam pra voc\xEA p\xE1ginas web, \xE9 que eles frequentemente bagun\xE7am o c\xF3digo. Pessoas s\xE3o imperfeitas. Programas s\xE3o feitos por pessoas. Logo, programas s\xE3o imperfeitos (demonstre). Mas pessoas s\xE3o inteligentes e acho que programas "inteligentes" ainda s\xE3o um sonho no nosso dia-a-dia. Ent\xE3o, m\xE3os \xE0 obra e aprenda um pouco de html. Acima de tudo, html n\xE3o \xE9 dificl. Voc\xEA n\xE3o quer continuar a ser um analfabeto digital, n\xE3o \xE9 verdade?

Come\xE7ando

No HTML, os c\xF3digos s\xE3o inseridor entre os marcadores < e >. Um comando em HTML \xE9 o c\xF3digo e mais os marcadores < e >. Por exemplo, p \xE9 o c\xF3digo html para novo par\xE1grafo, e o comando correspondente \xE9 

<p>

Se voc\xEA digitar apenas o c\xF3digo, sem os marcadores, o seu navegador vai interpretar o c\xF3digo apenas como mais um caractere do seu texto. Em outras palavras, o navegador considera tudo o que est\xE1 ente < e > como comandos em html, e tudo o que est\xE1 do lado de fora ele interpreta como texto simples sujeito a modifica\xE7\xF5es gr\xE1ficas pelos comandos. No html, os comandos s\xE3o conhecidos pelo nome de tags.

Se voc\xEA j\xE1 entendeu como funciona o html, pode pular a pr\xF3xima se\xE7\xE3o. O que vem a seguir \xE9 apenas um pouco de enseba\xE7\xE3o te\xF3rica, mas servir\xE1 muito pra quem tem paci\xEAncia e quer aprender direitinho como o html \xE9 engra\xE7ad\xE3o.

Mais um pouco de teoria

Muito bem, vamos agora nos concentrar na estrutra de um comando em html e em seguia \xE0 estrutura de um documento (p\xE1gina, documento e arquivo s\xE3o express\xF5es aqui tratadas como equivalentes), para em seguida juntar o tudo e fazer algumas demonstra\xE7\xF5es.

O primeiro c\xF3digo que aparece entre os famigerados < e > \xE9 chamado de elemento. O elemento informa ao navegador qual \xE9 o tipo de instru\xE7\xE3o que trata o comando. Os tipo de istru\xE7\xF5es podem ser, por exemplo, de criar uma refer\xEAncia (link ou liga\xE7\xE3o tamb\xE9m s\xE3o sin\xF4nimos), adicionar uma imagem, mudar o tamanho da letra, etc. Palavras que seguem o elemento e que ainda est\xE3o dentro dos famigerados delimitadores de instru\xE7\xE3o < e > s\xE3o chamadas de atributos (veremos mais sobre atributos a partir da se\xE7\xE3o Par\xE1grafos).

Observa\xE7\xF5es

  • As tags podem ser escritas usando letras mai\xFAsculas ou min\xFAsculas, indiferentemente, mas aqui sempre usaremos letras min\xFAsculas, ou seja, <p> ao inv\xE9s de <P>.

  • Existem instru\xE7\xF5es em html que precisam de comandos de abertura e fechamento e outras n\xE3o. Lembra o que \xE9 abertura e fechamento de uma instru\xE7\xE3o? \xC9 s\xF3 voltar um pouco pra tr\xE1s, na se\xE7\xE3o Markup Language. Lembre-se: instru\xE7\xF5es que afetam apenas blocos ou regi\xF5es do texto precisam de comandos de abertura e fechamento. Aguarde nossos exemplos!

  • Se por acaso voc\xEA escreveu os c\xF3digos html errado - por exemplo >p> inv\xE9s de <p> - n\xE3o se desespere! O m\xE1ximo que pode acontecer \xE9 o seu navegador interpretar sua p\xE1gina de forma diferente do esperado e desenh\xE1-la de um jeito maluco.

Finalmente a pr\xE1tica!

Depois de tanta enrola\xE7\xE3o, vamos l\xE1, criar um pouco de texto formatado. Voc\xEA ir\xE1 precisar do seguinte antes de come\xE7ar: acesso a um computador, algum conhecimento de como rodar um computador, um editor de texto ou html, um navegador e muito tempo livre!

Uma p\xE1gina html \xE9 dividida em duas partes, a cabe\xE7a e o corpo. Na cabe\xE7a s\xE3o definidos os atributos principais do documento, como o t\xEDtulo e as palavras-chave. O corpo cont\xE9m a parte vis\xEDvel do documento, i.e, aquela que voc\xEA ver\xE1 processada em seu navegador. Existe ainda uma regi\xE3o da p\xE1gina que est\xE1 tanto fora da cabe\xE7a quanto do corpo (n\xE3o! n\xE3o \xE9 a falta de ju\xEDzo!), mas n\xE3o iremos entrar nesse m\xE9rito. Consulte um guia mais detalhado de html para obter mais informa\xE7\xF5es.

Todo o c\xF3digo de um documento desse tipo fica entre os comandos 

<html>

e 

</html>

Observe que toda instru\xE7\xE3o (tag) come\xE7a pelo nome do elemento e termina com o nome do elemento precedido por uma barra /. Tudo o que estiver entre o come\xE7o e o fim da instru\xE7\xE3o html ser\xE1 interpretado pelo navegador como c\xF3digo html.

Para escrever a cabe\xE7a do documento, usamos o elemento head, e para o corpo usamos o elemento body. Na cabe\xE7a do documento s\xE3o definidos seu t\xEDtulo e alguns atributos invis\xEDveis ao usu\xE1rio e que dizem respeito \xE0 pr\xF3pria navega\xE7\xE3o e por isso s\xE3o definidas com o elemento meta.

A cabe\xE7a do documento pode conter informa\xE7\xF5es do tipo:

  • T\xEDtulo do documento
  • Data de cria\xE7\xE3o
  • Prazo de validade
  • Autor
  • Qualquer outra informa\xE7\xE3o que o autor ache necess\xE1ria

Maiores detalhes sobre o conte\xFAdo da cabe\xE7a do documento s\xE3o dados na se\xE7\xE3o Meta Informa\xE7\xF5es.

J\xE1 o corpo do documento pode conter uma infinidade de elementos, desde texto comum quanto imagens, tabelas e formul\xE1rios.

Escrevendo uma p\xE1gina em HTML

Agora vamos escrever uma p\xE1gina em html. Abra um editor de textos de sua prefer\xEAncia (Bloco de Notas, Emacs, etc) e um navegador web (Mozilla, Galeon, etc). Escreva isso no editor:

<html>
<head> <title>Isso \xE9 uma confus\xE3o!</title></head>
<body>

Isso \xE9 uma p\xE1gina em html.

</body>
</html>

Salve isso num arquivo cujo nome tenha a extens\xE3o html, como por exemplo teste.html. Em seguida, abra esse arquivo no seu Navegador. Voc\xEA n\xE3o ver\xE1 nada especial al\xE9m de uma tela em branco com a inscri\xE7\xE3o "Isso \xE9 uma p\xE1gina em html". Mas essa \xE9 a pura verdade, essa j\xE1 \xE9 uma p\xE1gina em html. F\xE1cil, n\xE3o?

Mas e todo aquele monte de coisa que eu vejo enquanto navego pela internet? Calma, aqui sempre iremos por partes. Concentremo-nos ao c\xF3digo que acabamos de escrever no arquivo teste.html. Na primeira linha o elemento html informa ao navegador que esse documento est\xE1 no formato html. Na segunda linha, o elemento head abre o cabe\xE7alho do documento. Ainda nessa linha vemos um elemento novo, o title, que define um t\xEDtulo para o documento.

Note que 

<title>Isso \xE9 uma confus\xE3o!</title>

define o t\xEDtulo da p\xE1gina como sendo "Isso \xE9 uma confus\xE3o", apesar de, como voc\xEA est\xE1 vendo, n\xE3o ser nada confuso.

O t\xEDtulo da p\xE1gina normalmente \xE9 exibido no t\xEDtulo da janela do seu navegador e tamb\xE9m \xE9 usado pelos mecanismos de busca (Google, Astalavista, etc) para cadastrar esse documento.

Depois de definir o t\xEDtulo, vemos o elemento head fechando o cabe\xE7alho, ou seja, s\xF3 o texto localizado entre 

<head>

e 

</head>

ser\xE1 parte do cabe\xE7alho.

Depois disso, na terceira linha, vemos a "abertura" do corpo do documento, com o comando <body>. O corpo s\xF3 \xE9 fechado na s\xE9tima linha, com o comando </body>. Lembre-se: assim como acontece com as pessoas, um documento html s\xF3 estar\xE1 protegido se tiver o corpo fechado, portanto nunca se esque\xE7a de acrescentar </body> antes de terminar o documento. Brincadeiras \xE0 parte, voc\xEA at\xE9 pode esquecer de fechar o corpo do documento que o navegador n\xE3o vai exibir nenhuma mensagem de erro e muitas vezes pode at\xE9 produzir um documento formatado corretamente, mas \xE9 sempre bom escrevemos num bom html, pois os computadores s\xE3o burros.

Voltemos ao documento teste.html. Dentro do corpo, vemos a linha 

Isso \xE9 uma p\xE1gina em html.

Como esses caracteres est\xE3o no corpo do texto, eles ser\xE3o exibidos na tela do seu navegador. No nosso caso, o corpo do documento n\xE3o cont\xE9m comandos em html mas apenas texto simples e ent\xE3o tudo que o navegador precisa fazer \xE9 imprimir esse texto na tela. Se no corpo do texto houvessem comandos, eles seriam interpretados pelo navegador e teriam uma sa\xEDda gr\xE1fica correspondente. Os pr\xF3ximos exemplos esclarecer\xE3o este ponto.

Texto em negrito

Volte para o editor de textos e mude no arquivo teste.html a linha 

Isso \xE9 uma p\xE1gina em html.

para 

Isso \xE9 uma p\xE1gina em <b>html</b>.

Salve essa altera\xE7\xE3o e abra novamente esse arquivo no Navegador (ou utilize o bot\xE3o "Atualizar"). Note que o texto agora ser\xE1 exibido pelo navegador como

Isso \xE9 uma p\xE1gina em html.

O elemento b (bold - negrito) altera o texto para que ele apare\xE7a mais escuro. Para fazer jus ao m\xE9todo da lavagem cerebral, vou repetir: apenas o texto que ficou entre os comandos <b> e </b> ficam em negrito, o resto do texto n\xE3o \xE9 alterado.

Texto em it\xE1lico

Para o texto em it\xE1lico utiliza-se o elemento i, da mesma forma como utilizamos o elemento b: 

Isso \xE9 uma p\xE1gina em <i>html</i>.

E o resultado esperado \xE9:

Isso \xE9 uma p\xE1gina em html.

Podemos misturar texto em negrito com texto em it\xE1lico. Veja os exemplos seguintes e seus respectivos resultados:

Exemplo 1: 

Isso \xE9 uma <b>p\xE1gina</b> em <i>html</i>.

Resultado: Isso \xE9 uma p\xE1gina em html.

Exemplo 2: 

Isso \xE9 uma p\xE1gina em <b><i>html</i></b>.

Resultado: Isso \xE9 uma p\xE1gina em html.

Exemplo 3: 

Isso \xE9 uma p\xE1gina em <b><i>ht</i>ml</b>.

Resultado: Isso \xE9 uma p\xE1gina em html.

Texto sublinhado

Para sublinharmos um texto, utilizamos o elemento u (underline):

Exemplo: 

Vamos <u>sublinhar</u> algumas coisas.

Resultado: Vamos sublinhar algumas coisas.

Agora vamos misturar algumas coisas, negrito com it\xE1lico e sublinhado, para mostra a voc\xEA que os comandos em html podem ser usados conjuntamente.

Exemplo: 

"Eu n\xE3o tenho <u>escr\xFApulos</u>.
O que \xE9 <i>bom</i>, a gente <b>fatura</b>;
o que \xE9 <i>ruim</i>, a gente <i><b>esconde</b></i>".
- <b><u><i>Rubens Ricupero</i></u></b>, ex-ministro da Fazenda, setembro de 1994

Resultdado: "Eu n\xE3o tenho escr\xFApulos. O que \xE9 bom, a gente fatura; o que \xE9 ruim, a gente esconde". - Rubens Ricupero, ex-ministro da Fazenda, setembro de 1994

Note que neste exemplo utilizamos v\xE1rias tags atuando sobre um mesmo bloco de texto, como em <i><b>esconde</b></i> A ordem na qual as tags s\xE3o abertas e fechadas n\xE3o precisa ser exatamente essa. Voc\xEA poderia, sem problemas, usar <i><b>esconde</i></b>, mas por uma quest\xE3o estil\xEDstica recomendamos que voc\xEA sempre comece fechando a \xFAltima tag que foi aberta e ir fechando de "dentro pra fora".

Espa\xE7amento

No html, o espa\xE7amento do texto simples n\xE3o \xE9 autom\xE1tico. Isso quer dizer que, se voc\xEA escrever no corpo de um documento algo como 

Olha como  as   coisas    v\xE3o     ficando      longe!

voc\xEA ter\xE1 o resultado:

Olha como as coisas v\xE3o ficando longe!

Em outras palavras, qualquer espa\xE7o adicional \xE9 ignorado, de modo semelhante ao que acontece com as quebras de linha. Se quisermos adicionarmos espa\xE7os, devemos utilizar um objeto novo, que chamaremos de entidade, &nbsp; As entidades ser\xE3o tratadas em detalhes na se\xE7\xE3o Entidades, acentua\xE7\xE3o e caracteres especiais.

Trocando em mi\xFAdos, uma entidade \xE9 uma por\xE7\xE3o de texto que come\xE7a com o caractere & ("e" comercial) e termina com um ponto e v\xEDrgula. Quando o navegador encontra uma entidade, ele a troca por um conjunto de caracteres previamente determinados. \xC9 poss\xEDvel n\xE3o s\xF3 usar as entidades padr\xF5es do html como definir nossas pr\xF3prias entidades. Mas n\xE3o nos precipitemos.

Aqui segue o exemplo de como usar uma entidade. Nesse caso, a entidade associada ao caractere de espa\xE7o simples, &nbsp;:

Exemplo 1: 

Espa\xE7o simples e espa\xE7o&nbsp;&nbsp;duplo.

Resultado:

Espa\xE7o simples e espa\xE7o  duplo.

Exemplo 2: 

Olha&amp;nbsp;como&amp;nbsp;&amp;nbsp;as
&amp;nbsp;&amp;nbsp;&amp;nbsp;coisas
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;v\xE3o
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
&amp;nbsp;ficando&amp;nbsp;&amp;nbsp;&amp;nbsp;
&amp;nbsp;&amp;nbsp;&amp;nbsp;longe!

Resultado:

Olha como  as    coisas     v\xE3o       ficando       longe!

Quebra de linha

Repare que se escrevermos o seguinte texto no corpo do documento, 

Linha 1
Linha 2
Linha 3

o navegador imprimir\xE1 em sua tela isso: 

Linha 1 Linha 2 Linha 3

Isso mostra que no html as quebras de linha n\xE3o s\xE3o feitas automaticamente. Quando quisermos pular uma linha precisamos usar o comando <br>: 

Linha 1<br>
Linha 2<br>
Linha 3<br>

Isso dar\xE1 o resultado desejado. Note que para o elemento br n\xE3o existe o comando </br>, isto \xE9, a quebra de linha n\xE3o age numa regi\xE3o de texto delimitada, mas sim num ponto do texto. Complicado? Ent\xE3o vamos l\xE1, mais uma vez explicando de uma outra forma: comandos como <b>, <i> e <u> agem sobre uma regi\xE3o do texto e precisam ser fechados com seus respectivos </b>, </i> e </u>, pois do contr\xE1rio esses comandos agir\xE3o at\xE9 o fim do documento. J\xE1 o comando de quebra de linha, </br>, e alguns outros atuam s\xF3 no ponto onde eles aparecem.

Texto centralizado

Um elemento muito simples de usar \xE9 o center, que deixa o texto centralizado: 

<center>
No meio do caminho tinha uma pr\xE9da.
</center>

O resultado, como \xE9 de se esperar, \xE9 o texto sendo exibido no centro da p\xE1gina ou da divis\xE3o atual:

No meio do caminho tinha uma pr\xE9da.

Par\xE1grafos

\xC0s vezes uma quebra de linha n\xE3o \xE9 suficiente para dar o espa\xE7o que queremos no nosso texto. Imagine se quisermos escrever algo como 

Par\xE1grafo 1

Par\xE1grafo 2

deixando uma linha entre os dois par\xE1grafos. Uma solu\xE7\xE3o simples \xE9 utilizar duas quebras de linha, 

Par\xE1grafo 1<br><br>Par\xE1grafo 2

A melhor solu\xE7\xE3o, por\xE9m, \xE9 utilizar o elemento p (par\xE1grafo), que efetua uma quebra de linha com espa\xE7amento maior que o br: 

Par\xE1grafo 1<p>Par\xE1grafo 2

O elemento p tem um uso controverso no html. Ele pode ser usado tanto como um comando pontual (exemplo anterior) como um comando que age numa regi\xE3o do texto: 

<p>Par\xE1grafo 1</p>
<p>Par\xE1grafo 2</p>

Perceba a diferen\xE7a, que n\xE3o \xE9 apenas estil\xEDstica, entre os dois usos do elemento. No primeiro caso, p apenas efetua uma quebra de linha com espa\xE7amento grande. No segundo, p define uma regi\xE3o de texto como sendo um par\xE1grafo. Por criar uma divis\xE3o l\xF3gica, procure sempre utilizar o elemento p conforme esse \xFAltimo caso.

Alinhamentos de par\xE1grafo

Agora vamos mostrar um uso avan\xE7ado do elemento p. Voc\xEA j\xE1 deve ter visto que em certos documentos o texto aparece hora alinhado \xE0 direita, hora \xE0 esquerda, no centro ou ent\xE3o ocupando uniformemente o espa\xE7o da p\xE1gina (texto justificado). Isso pde ser obtido facilmente em html. Veja os exemplos:

Exemplo 1 (texto \xE0 esquerda): 

<p align="left">
Texto Texto Texto<br>
Texto Texto Texto<br>
Texto Texto Texto<br>
Texto Texto Texto<br>
</p>

Resultado:

Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto

Exemplo 2 (texto \xE0 direita): 

<p align="right">
Texto Texto Texto<br>
Texto Texto Texto<br>
Texto Texto Texto<br>
Texto Texto Texto<br>
</p>

Resultado:

Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto

Exemplo 3 (texto centralizado): 

<p align="center">
Texto Texto Texto<br>
Texto Texto Texto<br>
Texto Texto Texto<br>
Texto Texto Texto<br>
</p>

Resultado:

Texto Texto Texto
Texto Texto Texto
Texto Texto Texto
Texto Texto Texto

Exemplo 4 (texto justificado): 

<p align="justify">
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto 
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto 
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto 
Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto 
</p>

Resultado:

Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto

Note que entre os delimitadores < e > n\xE3o encontra-se apenas o elemento p. Al\xE9m dele, existe o texto align="alinamento". Dizemos que align \xE9 um atributo do elemento p e alinhamento \xE9 o valor desse atributo. No caso de <p align="justify">, o valor do atributo align (que significa alinhamento em ingl\xEAs) \xE9 justify (justificado).

Os atributos, as palavras que seguem o elemento, informam o navegador a respeito das propriedades que os elementos podem assumir. Confuso? Pode parecer um pouco confuso, mas n\xE3o \xE9. Como disse a Toya, "Um disco de banda punk pode ter diversas propriedades ou 'atributos' - a cor do disco, tamanho, velocidade, etc, tudo isso s\xE3o atributos." E eu digo mais: se voc\xEA coloca o disco num toca-discos, voc\xEA pode ouvi-lo em duas ou no m\xE1ximo tr\xEAs velocidades. \xC0s vezes d\xE1 pra ouvir ao contr\xE1rio. Mas se voc\xEA arremessar seus discos do Fof\xE3o, garanto que eles poder\xE3o girar em muitas outras velocidades. Assim \xE9 o html, com muitas op\xE7\xF5es para voc\xEA exibir seu texto.

No html, os valores dos atributos podem ser definidos da forma atributo=valor ou atributos="valor" (como em align="justify"), que \xE9 mais recomendada.

Como voc\xEA viu, nem todos os c\xF3digos em html necessitam de atributos, em especial os comandos de modifica\xE7\xE3o de texto como negrito, it\xE1lico, sublinhado, etc.

Resumindo, os atributos definem caracter\xEDsticas adicionais aos elementos. Nas se\xE7\xF5es seguintes veremos elementos com v\xE1rios atributos. Por exemplo, n\xE3o adianta dizer ao seu navegador pra por um link em alguma parte do seu texto, \xE9 preciso dizer ao navegador, por exemplo, pra que lugar esse link aponta. \xC9 isso o que um atributo faz (mais detalhes sobre links na se\xE7\xE3o Links).

Criando uma divis\xE3o

Existem momentos em que queremos que v\xE1rios par\xE1grafos possuam um mesmo valor de atributo - centralizado, por exemplo. Ao inv\xE9s de escrevermos align="justify" a cada abertura de novo par\xE1grafo, podemos usar o elemento div, que cria uma "divis\xE3o" no documento na qual alguns atributos s\xE3o preservados. Vejamos o exemplo:

Exemplo: 

<div align="center">
 <p>
 Par\xE1grafo 1
 Par\xE1grafo 1
 Par\xE1grafo 1
 </p>
 <p>
 Par\xE1grafo 2
 Par\xE1grafo 2
 Par\xE1grafo 2
 </p>
 <p>
 Par\xE1grafo 3
 Par\xE1grafo 3
 Par\xE1grafo 3
 </p>
</div>

Resultado:

Par\xE1grafo 1 Par\xE1grafo 1 Par\xE1grafo 1

Par\xE1grafo 2 Par\xE1grafo 2 Par\xE1grafo 2

Par\xE1grafo 3 Par\xE1grafo 3 Par\xE1grafo 3

Experimente mudar os atributos do alinhamento pra ver o que acontece! Na se\xE7\xE3o Folhas de Estilo mostraremos como utilizar o elemento div para criar se\xE7\xF5es l\xF3gicas em documentos.

Mudando os atributos da fonte.

At\xE9 agora mostramos as modifica\xE7\xF5es enf\xE1ticas do texto, como o negrito, it\xE1lico e sublinhado. Adiante veremos o elemento font e seus atributos, que permitem grande controle sobre os caracteres gr\xE1ficos.

O font - fonte do texto, no sentido tipogr\xE1fico - \xE9 um elemento cujos principais atributos s\xE3o size (tamanho), color (cor) e face. Olhe como eles funcionam:

Exemplo 1: 

<font face="times" color="red" size="+2">CUIDADO!</font>

Resultado:

CUIDADO!

Aqui vemos pela primeira vez o uso de mais de um atributo para um mesmo elemento. A ordem em que os atributos aparecem \xE9 arbitr\xE1ria: poder\xEDamos ter escrito <font color="red" face="times" size="+2"> ou ent\xE3o <font size="+2" face="times" color="red">.

O atributo face define o tipo de fonte do seu texto. Uma fonte \xE9 o conjunto de s\xEDmbolos gr\xE1ficos que representam os caracteres. Existem fontes nas quais os caracteres est\xE3o representados de formas mais arredondadas, outras em que eles aparecem com um desenho mais moderno, etc. Veja as diferen\xE7as entre alguns tipos de fonte: 

<font face="times" size="+1">Isso fica de um jeito...</font>
<font face="courier" size="+1">e isso de outro.</font>

Resultado:

Isso fica de um jeito... e isso de outro.

Notou a diferen\xE7a? Em caso negativo, pode ser que o seu navegador - ou qualquer outro meio pelo qual voc\xEA esteja lendo isso - n\xE3o diferencie muito bem os tipos de fonte. Times e courier s\xE3o fontes comuns de se encontrar nos computadores, por\xE9m cada sistema possui seus tipos de fontes pr\xF3prios e \xE0s vezes pode acontecer de um documento pedir ao navegador exibir o texto numa determinada fonte ausente no sistema. Nesse caso, o navegador utilizar\xE1 uma das fontes padr\xF5es do sistema no lugar daquela requisitada. Como essa quest\xE3o do tipo de fonte \xE9 muito particular, deixaremos aqui apenas o que \xE9 relacionado ao html: utilizando a atribui\xE7\xE3o face="nome-da-fonte" podemos modificar a fonte que exibir\xE1 nosso texto.

A seguir, vejamos o pr\xF3ximo atributo importante do elemento font, que \xE9 o size, com o qual podemos regular o tamanho da fonte exibida. O tamanho pode ser dado relativamente ao tamanho padr\xE3o da fonte no navegador ou pode ser um n\xFAmero entre 1 e 7: 

<font size="1">Crescendo,</font>
<font size="2">crescendo,</font>
<font size="3">crescendo</font>
<font sizer="4">e crescendo!</font>

Resultado:

Crescendo, crescendo, crescendo e crescendo!

\xC9 mais comum escrevermos relativamente ao tamanho padr\xE3o da fonte do navegador: 

<font size="-2">Crescendo,</font>
<font size="-1">crescendo,</font>
<font size="+1">crescendo</font>
<font sizer="+2">e crescendo!</font>

Crescendo, crescendo, crescendo e crescendo!

A atribu\xE7\xE3o size="-2" faz com que o texto seja exibido duas vezes menor que o tamanho padr\xE3o. J\xE1 para size="+2" o tamanho ser\xE1 duas vezes maior que o padr\xE3o. A escala de tamanhos vai de -7 a +7.

O \xFAltimo atributo do elemento font que veremos aqui \xE9 o color, que define a cor do texto. O valor desse atributo pode ser o nome de uma cor (em ingl\xEAs) ou um n\xFAmero que represente aquela cor na codifica\xE7\xE3o RGB - Red Green Blue ou Vermelho Verde Azul, as cores prim\xE1rias. A vantagem de usar n\xFAmeros ao inv\xE9s dos nomes \xE9 que existem milh\xF5es (literalmente) de cores suportadas pelos atuais monitores e placas de v\xEDdeo dos computadores, ao passo que a l\xEDngua ingles s\xF3 tem nomes para uma meia d\xFAzia de cores.

  As letras e respectivas cores s\xE3o:

NomeC\xF3digo n\xFAmericoCor correspondente
black#000000 
green#008000 
silver#C0C0C0 
lime#00FF00 
gray#808080 
olive#808000 
white#FFFFFF 
yellow#FFFF00 
maroon#800000 
navy#000080 
red#FF0000 
blue#0000FF 
purple#800080 
teal#008080 
fuchsia#FF00FF 
aqua#00FFFF 

Portanto, tanto faz escrever <font color="red"> como <font color="#FF0000"> para usar a fonte na cor vermelha. O que faz com que o navegador diferencie um nome de um n\xFAmero \xE9 o s\xEDmbolo #. Quando o atributo come\xE7a com uma # o navegador sabe que trata-se de um n\xFAmero. Mas a\xED voc\xEA vem e pergunta:

Que diabos \xE9 um n\xFAmero desses, como FF00FF ou C0C0C0? Pra mim isso n\xE3o \xE9 um n\xFAmero, s\xE3o letras doidas!

Isso s\xE3o n\xFAmeros sim, mas escritos na base hexadecimal, e n\xE3o na decimal, que \xE9 a que estamos acostumados a usar. Para quem n\xE3o sabe o que \xE9 a base hexadecimal, leia a Nota sobre n\xFAmeros hexadecimais.

Texto pr\xE9-formatado

Haver\xE1 ocasi\xF5es nas quais voc\xEA precisar\xE1 exibir o texto sem nenhuma formata\xE7\xE3o especial de html ou ent\xE3o quer definir sua pr\xF3pria formata\xE7\xE3o. Por exemplo, quero que no meio documento apare\xE7a um texto escrito exatamente desta maneira: 

                      o
                    novelo
                    ovo
                   ovo
                    e
                    l
                    o

augusto de campos

Se eu simplesmente digitar isso no meu editor de textos, o resultado ser\xE1:

o novelo ovo ovo e l o

augusto de campos

Eu poderia contornar esse problema utilizando a entidade de espa\xE7amento, mas seria algo muito trabalhoso. Ao inv\xE9s disso, usemos o elemento pre, que tem a fun\xE7\xE3o de manter a formata\xE7\xE3o original do texto. Ou seja, ela mant\xE9m o formato do texto do jeito que ele \xE9 colocado, com par\xE1grafos, tabelas, listas etc.

No caso acima, bastaria que eu utiliza-se a dessa maneira para que obtivesse o resultado desejado: 

<pre>
                      o
                    novelo
                    ovo
                   ovo
                    e
                    l
                    o

augusto de campos
</pre>

Como \xE9 de praxe, podemos misturar outras tags html junto com o elemento pre, isto \xE9, utilizar comandos html dentro de um bloco pre: 

&lt;pre&gt;
Lista de cores:
&lt;font color="#FFFF00"&gt;
   a
    m
     arelo
&lt;/font&gt;
&lt;font color="#000000"&gt;
   p
   r
    e
     to
&lt;/font&gt;
&lt;font color="#0000FF"&gt;
      l
     u
    z
   azul
&lt;/font&gt;
&lt;font color="#FF0000"&gt;
   v   r  e   h
     e  m   l   o
&lt;/font&gt;
&lt;pre&gt;

Resultado: 

Lista de cores:

   a
    m
     arelo
 

   p
   r
    e
     to
 

      l
     u
    z
   azul


   v   r  e   h
     e  m   l   o

O texto aparece justamente da maneira como foi escrito. O elemento pre n\xE3o impede que voc\xEA utilize tags dentro dele. Ou seja, ela ir\xE1 ler as tags de HTML e respeit\xE1-las.

Imagens

Al\xE9m de manipular texto, o html tamb\xE9m serve para exibir imagens de uma maneira muito simples, usando para isso o elemento img: 

<img src="emma.jpg" width="221" height="300">

Resultado:

emma.jpg

O atributo src - source, fonte em ingl\xEAs - d\xE1 o nome do arquivo da imagem e \xE9 o \xFAnico atributo obrigat\xF3rio para o elemento img. Os atributos para a largura (width) e a altura (height) n\xE3o s\xE3o necess\xE1rios, mas ser\xE3o muito \xFAteis quando as pessoas estiverem navegando em seu site: quando seu navegador abre um arquivo html e encontra o elemento img, ele usar\xE1 o respectivo atributo src como o endere\xE7o onde est\xE1 o arquivo de imagem a ser exibido. Em outras palavras, o elemento img apenas passa uma refer\xEAncia do arquivo de imagem ao navegador, ou seja, voc\xEA n\xE3o est\xE1 colocando esse arquivo de imagem dentro do seu arquivo html, voc\xEA est\xE1 apenas colocando em seu arquivo html uma refer\xEAncia a esse arquivo de imagem. O navegador, por sua vez, come\xE7a a baixar essa imagem a partir desse endere\xE7o atributo enquanto termina de exibir o documento.

Dependendo do tipo de arquivo de imagem, ela s\xF3 ser\xE1 exibido pelo navegador quando terminar de ser baixada. Se isso ocorrer e voc\xEA n\xE3o utilizou os atributos width e height no seu documento, o navegador s\xF3 reservar\xE1 espa\xE7o na tela do seu computador para a exibi\xE7\xE3o da imagem quando ela estiver sido baixada, e duranter esse intervalo a formata\xE7\xE3o do seu documento pode ficar diferente. Para evitar isso - somente por uma quest\xE3o de estilo - recomendamos que voc\xEA sempre use os atributos width e height, que informam ao navegador o tamanho da imagem, antes mesmo dele come\xE7ar a baix\xE1-la, e assim o espa\xE7o na tela do seu computador ser\xE1 apropriadamente reservado para ela.

Tamanho de exibi\xE7\xE3o da imagem

Os atributos width e height merecem um pouco mais de aten\xE7\xE3o. Como vimos, s\xE3o os atributos que determinam o tamanho que a imagem ser\xE1 exibida. Existem duas formas de se fazer isso, utilizando o tamanho em pixels (tamanho absoluto) e em valores relativos ao tamanho dispon\xEDvel da tela do computador, isto \xE9, em porcentagem.

Um pixel \xE9 a menor unidade luminosa da tela do seu computador que os programas podem manipular, e isso depende muito da resolu\xE7\xE3o da tela do seu computador. Um pixel \xE9 um quadradinho luminoso. Atualmente as telas de computador tem uma resolu\xE7\xE3o de 800 pixels de comprimento e 600 de altura, \xE0s vezes pode ser de 1024 de comprimento e 768 na altura ou resolu\xE7\xF5es at\xE9 maiores, de tal modo que nossos olhos j\xE1 n\xE3o conseguem distinguir entre pixels cont\xEDguos.

O tamanho das imagens computadorizadas tamb\xE9m pode ser medido em pixels, que \xE9 o tamanho que a imagem vai ocupar na tela do seu computador quando ela for exibida. Para que voc\xEA descubra qual \xE9 o tamanho da sua imagem, voc\xEA ter\xE1 que usar algum programa de edi\xE7\xE3o de imagens ou ent\xE3o abri-la diretamente no seu navegador. Experimente ir no menu Arquivo e depois em Abrir, no seu nagevador, ou ent\xE3o digitar a localiza\xE7\xE3o da imagem diretamente na barra de endere\xE7os. Quando a imagem for exibida, clique sobre ela com o bot\xE3o direito do seu mouse e em seguida v\xE1 em Propriedades. Uma janela com as informa\xE7\xF5es da imagens - inclusive seu tamanho - dever\xE1 aparecer. De posse desses valores, basta colocar-los dentro da do img. No exemplo anterior, onde usamos o c\xF3digo width="221" height="300", a imagem foi exibida com 221 pixels de largura e 300 de altura, coincidentemente sendo seu tamanho original. Poder\xEDamos ter escrito: 

<img src="emma.jpg" width="22" height="30">

Resultado:

emma.jpg

Ou seja, a imagem foi mostrada com um tamanho menor do que o orginal. Tamb\xE9m poder\xEDamos usar tamanhos maiores que original... que tal voc\xEA experimentar algo como width="2210" height="3000"?

O segundo modo de determinar o tamanho de exibi\xE7\xE3o das imagens no navegador consiste em utilizar porcentagem. Por exemplo, 

<img src="emma.jpg" width="10%" height="10%">

Resultar\xE1 numa imagem exibida com um d\xE9cimo (10%) do espa\xE7o dispon\xEDvel da tela do computador:

emma.jpg

Nos dois modos de determinar o tamanho - em pixels e em porcentagem - podemos escolher valores independentes para a altura e a largura, de tal forma que a imagem fique distorcida. Olha que engra\xE7ado: 

<img src="emma.jpg" width="50" height="400">

emma.jpg

Texto alternativo

Existem ainda outros atributos interessantes para a exibi\xE7\xE3o de imagens. Voc\xEA pode incluir uma descri\xE7\xE3o da imagem para que se, por qualquer raz\xE3o, algu\xE9m n\xE3o consiga ver a imagem ela possa ler uma descri\xE7\xE3o no espa\xE7o vazio. Essa descri\xE7\xE3o tamb\xE9m aparecer\xE1 quando voc\xEA passar o mouse por sobre a imagem.

Voc\xEA pode adicionar uma pequena descri\xE7\xE3o desta maneira: 

<img src="emma.jpg" width="221" height="300" alt="Emma Goldman!">

emma.jpg

O atributo alt (texto alternativo) \xE9 utilizado para dar a pequena descri\xE7\xE3o, neste caso "Emma Goldman!". Experimente passar o mouse sobre ela, \xE0s vezes funciona :P.

Borda da imagem

Uma borda (contorno) da imagem pode ser adicionada com o atributo border: 

<img src="emma.jpg" width="10%" height="10%" border="1">
<img src="emma.jpg" width="10%" height="10%" border="2">
<img src="emma.jpg" width="10%" height="10%" border="3">

O valor do atributo border indicar\xE1 o tamanho dessa moldura:

emma.jpg emma.jpg emma.jpg

Alinhamento da imagem

\xC9 poss\xEDvel ainda colocar imagens e texto um do lado do outro, de diversas formas. Vamos supor a mais simples: 

<img src="emma.jpg" width="3%" height="3%" border="1">
O texto aparece ao lado da imagem.

emma.jpg O texto aparece ao lado da imagem.

Esse c\xF3digo pode funcionar muito bem, mas \xE0s vezes acontece do texto aparecer abaixo da imagem. Para fazer o posicionamento da imagens e do texto corretamente, basta utilizar o atributo align, que funciona de modo an\xE1logo ao do alinhamento de paragr\xE1fos: 

<img src="emma.jpg" width="5%" height="5%" border="1" align="right" border="1">

O texto vai aparecer \xE0 esquerda da imagem, mesmo tendo escrito ap\xF3s o c\xF3digo sobre a imagem.
Enquanto o texto puder ficar ao lado da imagem, ele ficar\xE1. Quando ele n\xE3o mais couber nesse
espa\xE7o, ele come\xE7ar\xE1 a ser exibido abaixo da imagem, como voc\xEA pode ver aqui. Utilizar o
alinhamento de imagens \xE9 a melhor maneira de garantir que ela aparecer\xE1 no local desejado.

emma.jpg O texto vai aparecer \xE0 esquerda da imagem, mesmo tendo escrito ap\xF3s o c\xF3digo sobre a imagem. Enquanto o texto puder ficar ao lado da imagem, ele ficar\xE1. Quando ele n\xE3o mais couber nesse espa\xE7o, ele come\xE7ar\xE1 a ser exibido abaixo da imagem, como voc\xEA pode ver aqui. Utilizar o alinhamento de imagens \xE9 a melhor maneira de garantir que ela aparecer\xE1 no local desejado.

Espa\xE7amento da imagem

Notou como o texto do exemplo anterior saiu colado \xE0 imagem? \xC9 poss\xEDvel definir um espa\xE7amento entre a imagem e qualquer objeto (texto, imagem, tabelas) que esteja ao seu lado, acima ou abaixo, usando para isso os atributos vspace (espa\xE7amento vertical) e hspace (espa\xE7amento horizontal). O valor desses atributos diz ao navegador qual ser\xE1 o espa\xE7o em pixels entre a imagem e qualquer objeto: 

<img src="emma.jpg" width="3%" height="3%" border="1" align="left" hspace="5" border="1">
O texto vai aparecer \xE0 direita da imagem, a cinco pixels de dist\xE2ncia dela. Deu pra notar a
diferen\xE7a? Utilizando todos esses atributos para a exibi\xE7\xE3o de imagens voc\xEA obt\xE9m um texto
bem diagramado e bonito de ser lido!

emma.jpg O texto vai aparecer \xE0 direita da imagem, a cinco pixels de dist\xE2ncia dela. Deu pra notar a diferen\xE7a? Utilizando todos esses atributos para a exibi\xE7\xE3o de imagens voc\xEA obt\xE9m um texto bem diagramado e bonito de ser lido!

Tipos de imagens

Agora que voc\xEA j\xE1 sabe tudo isso veremos quais s\xE3o os principais tipos de arquivos de imagem e quais s\xE3o os melhores para se usar no seu site. Para maiores informa\xE7\xF5es sobre a manipula\xE7\xE3o de imagens, consulte o Guia de Edi\xE7\xE3o de Imagens.

Essa \xE9 uma das se\xE7\xF5es mais importantes deste manual, pois afinal estamos falando de hipertexto. Queremos que uma p\xE1gina html possa fazer refer\xEAncia a outras p\xE1ginas html ou para qualquer outro tipo de arquivo que se encontre em outros lugares da web. No jarg\xE3o da internet, voc\xEA quer ligar (link) parte da sua p\xE1gina com outras.

Isso \xE9 feito de modo muito simples com o elemento a, como segue: 

<a href="http://www.midiaindependente.org">CMI Brasil</a>.

CMI Brasil.

Como voc\xEA deve ter percebido, o atribudo href (Hipertext Reference / Refer\xEAncia de Hipertexto) indica o endere\xE7o da p\xE1gina que voc\xEA quer "linkar" (ligar) ao seu documento. No exemplo acima, o texto CMI Brasil aparece como uma refer\xEAncia para o link. Se voc\xEA clicar sobre esse texto, seu navegador automaticamente tentar\xE1 abrir a p\xE1gina http://www.midiaindependente.org

Os endere\xE7os s\xE3o escritos na forma de URL (Uniform Resource Locators), que \xE9 uma maneira que inventaram para se especificar o caminho at\xE9 se chegar num arquivo que esteja nalgum local da internet.

O formato da URL \xE9 

protocolo://nome-do-computador/pastas/arquivo

O protocolo indica como o navegador ir\xE1 buscar o arquivo (mais informa\xE7\xF5es aqui). Nome do computador \xE9 aquele endere\xE7o do tipo www.ninguem.com.br e as pastas s\xE3o os diret\xF3rios dentro desse computador onde est\xE3o os arquivos. Uma URL de artigo do CMI \xE9, por exemplo, http://www.midiaindependente.org/pt/blue/2004/09/290669.shtml, onde http:// \xE9 o protocolo, pt, blue, 2004 e 09 s\xE3o pastas (uma fica dentro da outra) e 290669.shtml \xE9 o nome do arquivo. 

http://
  \--- www.midiaindependente.org
                  \--- pt
                        \-- blue
                              \--- 2004
                                     \--- 09
                                           \--- 290669.shtml

Lembre-se tamb\xE9m que quando voc\xEA acessa o endere\xE7o http://www.ninguem.com.br, por exemplo, est\xE1 na verdade vendo o arquivo http://www.ninguem.com.br/index.html. Os arquivos do tipo index.html sempre s\xE3o procurados pelo navegador quando voc\xEA solicita apenas o nome do site ou uma pasta de um computador.

Em html, existem tr\xEAs formas poss\xEDveis de se fazer links: os links internos, os links locais (ou relativos) e os links externos.

Links internos s\xE3o aqueles que ligam uma se\xE7\xE3o de uma p\xE1gina com uma outra se\xE7\xE3o da mesma p\xE1gina. Por exemplo, se eu quiser fazer uma refer\xEAncia para a se\xE7\xE3o Hipertexto desse nosso manual, basta que eu primeiro defina um nome para a se\xE7\xE3o Hipertexto e ent\xE3o adicione um link pra ela. Isso \xE9 feito da seguinte forma:

1 - Vou at\xE9 o in\xEDcio da se\xE7\xE3o Hipertexto e adiciono o seguinte c\xF3digo, ao inv\xE9s de simplesmente escrever o t\xEDtulo da se\xE7\xE3o: 

<a name="Hipertexto">Hipertexto</a>

2 - Adiciono o link pra essa se\xE7\xE3o com o seguinte c\xF3digo,

<a href="#Hipertexto">V\xE1 para a se\xE7\xE3o hipertexto</a>

Cujo resultado \xE9

V\xE1 para a se\xE7\xE3o hipertexto

Experimente clicar nesse link! O atributo name serve apenas para dar um nome para uma posi\xE7\xE3o de uma p\xE1gina html. O valor de name pode ser qualquer um (nesse caso \xE9 "Hipertexto").

Quand voc\xEA fizer uma refer\xEAncia a um link interno utilizando o atributo href, voc\xEA precisa necessariamente adicionar o caractere # antes do nome da sua se\xE7\xE3o - no nosso caso, #Hipertexto - pois do contr\xE1rio seu navegador tentar\xE1 abri-lo como um link local.

Links locais s\xE3o aqueles que referenciam um arquivo que esteja no mesmo computador que a sua p\xE1gina. Links locias n\xE3o cont\xE9m o http:// no in\xEDcio do endere\xE7o. Por exemplo, se no meu documento html eu quiser fazer um link para o arquivo links.html que est\xE1 na mesma pasta do meu documento, n\xE3o preciso digital o endere\xE7o completo, mas apenas 

<a href="links.html">Acesse os links!</a>

Esse tipo de argumento para o href tamb\xE9m \xE9 chamado de links relativos. Se voc\xEA quiser linkar uma p\xE1gina que esteja do diret\xF3rio (pasta) superior da sua p\xE1gina, use dois pontos e uma barra antes do nome do arquivo: 

<a href="../links.html">Acesse os links!</a>

A vantagem de voc\xEA usar links relativos \xE9 que voc\xEA pode mover todo o seu site para um novo endere\xE7o na internet e n\xE3o precisar reeditar todos os links que apontam para p\xE1ginas do seu pr\xF3prio site.

Links externos s\xE3o aqueles que podem apontar para qualquer arquivo dispon\xEDvel na internet, como por exemplo 

<a href="http://pt.wikipedia.org">Acesse a Wikipedia!</a>

Os links externos precisam necessariamente conter o prefixo http:// e o endere\xE7o completo do arquivo.

Alvo (target)

Um outro atributo interessante para o elemento a \xE9 o target, que permite que o link seja aberto numa outra janela do seu navegador. 

<a href="http://pt.wikipedia.org" target="__BLANK">Acesse a Wikipedia!</a>

Resultado: Acesse a Wikipedia! (experimente clicar sobre o link).

O argumento do atributo target \xE9 o nome da janela do navegador que abrir\xE1 o link. Se voc\xEA quiser que o link seja aberto numa nova janela, simplesmente escolha qualquer nome como argumento.

Headings

Agora vejamos um elemento que serve para hierarquizar o conte\xFAdo do seu documento em se\xE7\xF5es e subse\xE7\xF5es, \xFAtil quando voc\xEA for escrever um texto bem grande, da mesma forma como este documento tem uma divis\xE3o em t\xF3picos. Os headings servem para criar t\xEDtulos diferenciar as se\xE7\xF5es da sua p\xE1gina. O heading possui seis valores diferentes, sendo que a de valor 1 \xE9 a que possui a maior fonte e a de valor 6 possui a menor fonte. A tag de abertura do heading \xE9 e a que fecha \xE9 , sendo que x \xE9 o valor dado ao heading.

Por exemplo, usando o seguinte c\xF3digo:

<h1>t\xEDtulo 1</h1>
<h2>t\xEDtulo 2</h2>
<h3>t\xEDtulo 3</h3>
<h4>t\xEDtulo 4</h4>
<h5>t\xEDtulo 5</h5>

A sua p\xE1gina ter\xE1 os seguintes t\xEDtulos:

t\xEDtulo 1

t\xEDtulo 2

t\xEDtulo 3

t\xEDtulo 4

t\xEDtulo 5

Note que o efeito do elemento h n\xE3o \xE9 semelhante ao uso do elemento font com o atributo size alterado, isto \xE9, o elemento h n\xE3o \xE9 apenas a mudan\xE7a de tamanho da fonte. Ele cria uma divis\xE3o l\xF3gica para o seu texto. Falaremos sobre divis\xF5es l\xF3gicas na se\xE7\xE3o O presente e o futuro do markup.

Tabelas

Tabelas auxiliam na visualiza\xE7\xE3o de dados ou na divis\xE3o de sua p\xE1gina em setores. Entenda por uma tabela HTML como sendo semelhante a uma tabela que voc\xEA desenharia numa folha de papel ou num outro programa de computador. O elemento principal de uma tabela \xE9 o table e aqui segue um exemplo simples de tabela: 

<table border="1">
  <tr>
    <td>Primeira</td>
    <td>Segunda</td>
  </tr>
  <tr>
    <td>Terceira</td>
    <td>Quarta</td>
  </tr>
</table>

Cujo resultado \xE9

Primeira Segunda
Terceira Quarta

Em HTML, as tabelas s\xE3o divididas em linhas e c\xE9lulas. Na tabela acima, a primeira linha cont\xE9m as c\xE9lulas Primeira e Segunda, enquanto que a segunda linha cont\xE9m as c\xE9lulas Terceira e Quarta.

Dentro de um bloco table, os principais elementos que voc\xEA utilizar\xE1 s\xE3o o tr, ou table row (linha), e o td, ou table data (c\xE9lula). Dessa forma, podemos definir as linhas e as c\xE9lulas da tabela. \xC9 mandat\xF3rio que um bloco td esteja definido dentro de um bloco tr, ou seja, que as c\xE9lulas estejam dentro de linhas.

No exemplo anterior, criamos uma linha com tr e em seguida, dentro de um bloco td, escrevemos o texto da c\xE9lula (Primeira). Abrimos outro bloco td nesse mesmo bloco tr, onde colocamos o texto da segunda c\xE9lula (Segunda). Depois, fechamos a linha com o </tr> para em seguida abrir uma nova linha, onde criamos as c\xE9lulas contendo os textos Terceira e Quarta.

O atributo border no elemento table serve para dar borda \xE0 tabela. Sem o ele n\xE3o ficaria muito distinto onde come\xE7a e termina cada uma das c\xE9lulas: 

<table>
  <tr>
    <td>Primeira</td>
    <td>Segunda</td>
  </tr>
  <tr>
    <td>Terceira</td>
    <td>Quarta</td>
  </tr>
</table>

Primeira Segunda
Terceira Quarta

Dentro de um bloco td \xE9 poss\xEDvel colocar c\xF3digos HTML e inclusive criar at\xE9 tabelas dentro de c\xE9lulas! Veja s\xF3: 

<table border="1">
  <tr>
    <td>Primeira</td>
    <td>Segunda</td>
  </tr>
  <tr>
    <td>Terceira</td>
    <td>
      <table border="1">
        <tr>
          <td>Quarta</td>
          <td>Quinta</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Primeira Segunda
Terceira
Quarta Quinta

O c\xF3digo fica complicado o tanto quanto se queira.

Agora que voc\xEA captou a ess\xEAncia das tabelas, vamos mostrar dois tr\xEAs atributos que podem ser utilizados em tabelas.

Espa\xE7amento entre c\xE9lulas

Para controlarmos a dist\xE2ncia entre duas c\xE9lulas, utilizamos o atributo cellspacing, cujo argumento \xE9 dado em pixels: 

<table cellspacing="20" border="1">
  <tr>
    <td>Primeira</td>
    <td>Segunda</td>
  </tr>
  <tr>
    <td>Terceira</td>
    <td>Quarta</td>
  </tr>
</table>

Primeira Segunda
Terceira Quarta

Para controlar o espa\xE7amento vertical, utilizamos o cellpadding: 

<table cellspacing="20" cellpadding="35" border="1">
  <tr>
    <td>Primeira</td>
    <td>Segunda</td>
  </tr>
  <tr>
    <td>Terceira</td>
    <td>Quarta</td>
  </tr>
</table>

Primeira Segunda
Terceira Quarta

Preenchimento de c\xE9lulas

Pode ser que voc\xEA queira uma tabela onde a primeira linha tenha duas c\xE9lulas, a segunda com apenas uma c\xE9lula e a terceira com tr\xEAs c\xE9lulas. Faremos o seguinte: 

<table border="1">
  <tr>
    <td>Primeira</td>
    <td>Segunda</td>
  </tr>
  <tr>
    <td>Terceira</td>
  </tr>
  <tr>
    <td>Quarta</td>
    <td>Quinta</td>
    <td>Sexta</td>
  </tr>
</table>

Primeira Segunda
Terceira
Quarta Quinta Sexta

Percebeu como a tabela ficou cheia de buracos? Para que as c\xE9luas preecham os buracos, utilizaremos o atributo colspan: 

<table border="1">
  <tr>
    <td>Primeira</td>
    <td colspan="2">Segunda</td>
  </tr>
  <tr>
    <td colspan="3">Terceira</td>
  </tr>
  <tr>
    <td>Quarta</td>
    <td>Quinta</td>
    <td>Sexta</td>
  </tr>
</table>

Primeira Segunda
Terceira
Quarta Quinta Sexta

Da mesma forma, se quisermos uma coluna com apenas uma c\xE9lulas e outra com duas, poder\xEDamos usar o atributo rowspan. Veja a diferen\xE7a entre usarmos e n\xE3o usarmos o rowspan: 

<table border="1">
  <tr>
    <td>Primeira</td>
    <td>Segunda</td>
  </tr>
  <tr>
    <td>Terceira</td>
  </tr>
</table>

Primeira Segunda
Terceira 

<table border="1">
  <tr>
    <td rowspan="2">Primeira</td>
    <td>Segunda</td>
  </tr>
  <tr>
    <td>Terceira</td>
  </tr>
</table>

Primeira Segunda
Terceira

Largura de c\xE9lulas e tabelas

Para escolher a largura de tabelas e c\xE9lulas, utiliza-se o j\xE1 conhecido atributo width, cujo argumento \xE9 id\xEAntico para o caso de imagens: 

<table border="1" width="200">
  <tr>
    <td width="30%">Primeira</td>
    <td width="70%">Segunda</td>
  </tr>
  <tr>
    <td>Terceira</td>
    <td>Quarta</td>
  </tr>
</table>

Primeira Segunda
Terceira Quarta

Note que quando width \xE9 utilizado com o elemento table, a largura refere-se \xE0 largura da p\xE1gina, enquanto que quando usado dentro de um td a largura \xE9 referente ao tamando da tabela. Isso tudo desde que o argumento seja dado em porcentagem e n\xE3o em pixels.

Uso de tabelas

Aqui exploramos poucas possibilidades das tabelas HTML. Voc\xEA pode utiliz\xE1-las para construir uma simples caixa para exibi\xE7\xE3o de informa\xE7\xF5es como fazer uma p\xE1gina inteira utilizando tabelas. Existem muitos outros elementos e atributos para ajud\xE1-lo nessa tarefa. Consulte as refer\xEAncias para mais informa\xE7\xF5es sobre tabelas.

Entidades, acentua\xE7\xE3o e caracteres especiais

No come\xE7o desse manual falamos de caracteres reservados ou marcadores, que no caso do HTML s\xE3o os < e >, que quando aparecem num documento HTML s\xE3o interpretados pelo navegador como delimitadores de instru\xE7\xE3o. Mas e se eu quiser simplesmente que esses caracteres fa\xE7am parte do meu texto e n\xE3o sejam interpretados como marcadores?

No HTML, todos os caracteres tem um nome especial, ou c\xF3digo. Para acessar um caractere, voc\xEA precisa usar a seguinte conven\xE7\xE3o: 

&nome-especial;

onde o nome-especial \xE9 o nome ou um n\xFAmero associado ao s\xEDmbolo gr\xE1fico que voc\xEA deseja mostrar no seu documento. Isso define algo que podemos chamar de sequ\xEAncia reservada, que \xE9 um grupo de caracteres que quando interpretado pelo navegador produzir\xE1 um caractere, que inclusive pode ser um caractere reservado. No HTML, os nomes especiais s\xE3o chamaos de entidades.

Na pr\xF3xima tabela mostramos alguns nomes especiais de caracteres e suas respectivas sequ\xEAncias reservadas para acess\xE1-los:

Caracteres Nome Especial Sequ\xEAncia Reservada
\xE1 aacute &aacute;
\xC1 Aacute &Aacute;
\xE9 eacute &eacute;
\xE3 atilde &atilde;
\xF4 ocirc &ocirc;
& amp &amp;
< lt &lt;
> gt &gt;

Voc\xEA encontra aqui uma lista completa das entidades HTML.

Como voc\xEA observou, n\xE3o s\xF3 os caracteres reservados, mas qualquer tipo de caractere pode ser representado com entidades. Isso pode ser muito \xFAtil quando voc\xEA estiver editando uma p\xE1gina HTML num computador que n\xE3o esteja com suporte para acentua\xE7\xE3o. Inclusive as entidades podem ser utilizadas para exibir s\xEDmbolos matem\xE1ticos e monet\xE1rios, letras gregas, etc.

Modificando o corpo do documento

Como dito anteriormente, o elemento body engloba o corpo do seu documento HTML. Ele possui muitos atributos que possibiltam modificar a apar\xEAncia da sua p\xE1gina, como cor de fundo ou das letras. Esses atributos tamb\xE9m podem ser utilizados junto com o atributo td. Aqui mostraremos apenas os atributos que interferem nas cores da sua p\xE1gina:

  • bgcolor: define a cor de fundo de um documento
  • text: a cor do texto
  • link: a cor dos links
  • alink: a cor dos links ativos atualmente (a p\xE1gina que voc\xEA est\xE1 visitando)
  • vlink: cor dos links j\xE1 visitados

Os argumentos s\xE3o o nome ou o n\xFAmero de uma cor, exatamente como no caso do atributo color usado no elemento font. Por exemplo,

<html>
<head> <title>Isso \xE9 uma confus\xE3o!</title></head>
<body bgcolor="black" text="gray" link="red" alink="white">

Isso \xE9 uma p\xE1gina em html.

</body>
</html>

Essa \xE9 uma p\xE1gina HTML onde o fundo ser\xE1 preto, com letras cinzas, links em vermelho e links ativos em branco. Essas s\xE3o as defini\xE7\xF5es globais de cor para seu documento, e a qualquer instante voc\xEA pode mudar as cores com o elemento font.

Outras possibilidades

O princ\xEDpio de funcionamento do HTML j\xE1 deve estar s\xF3lido em sua mente, se \xE9 que voc\xEA leu tudo o que antecede esta se\xE7\xE3o. Para que este texto n\xE3o se torne enfadonho, passaremos para a Especifica\xE7\xE3o HTML (texto em espanhol), desenvolvida pelo cons\xF3rcio da web, a tarefa de detalhar cada um dos t\xF3picos listados a seguir.

  • Texto estruturado: blocos que permitem estruturar l\xF3gica e visualmente seu texto
  • Listas: blocos para a cria\xE7\xE3o de listagens
  • Frames: permite que a p\xE1gina exibida no navegador seja formada por mais de um arquivo html (n\xE3o recomendado, veja em Acessibilidade)
  • Formul\xE1rios: possibilita a intera\xE7\xE3o do seu html com aplica\xE7\xF5es web
  • Scripting: permite a automatiza\xE7\xE3o de certas se\xE7\xF5es do seu documento
  • Meta-informa\xE7\xF5es: fornecem dados a respeito do pr\xF3prio documento, como data, conjunto de caracteres usado, data de validade, etc

Essas funcionalidades permitir\xE3o que voc\xEA fa\xE7a documentos html bem completos. Prosseguiremos agora a parte final deste manual, onde ser\xE3o abordados os temas:

  • Como colocar seu site no ar
  • HTML Avan\xE7ado
  • O Presente e o futuro do markup

Colocando seu site no ar

Depois de escrever suas p\xE1ginas html, talvez voc\xEA queira coloc\xE1-las nalgum lugar acess\xEDvel na internet, para que outras pessoas possam visit\xE1-las.

Se voc\xEA estiver escrevendo um html que ser\xE1 inserido dentro de outra p\xE1gina html, voc\xEA n\xE3o precisar\xE1 inserir o cabe\xE7alho da p\xE1gina - elementos html, head, title, etc - e nem definir o corpo do documento com o elemento body, pois isso \xE9 assumido j\xE1 estar escrito no documento principal. Da mesma forma, s\xF3 no documento principal \xE9 preciso colocar as tags </body> e </html>.

Para colocar suas p\xE1ginas HTML num s\xEDtio da internet, voc\xEA precisa de uma conta nalgum provedor que ofere\xE7a esse tipo de servi\xE7os. Dependendo do provedor, voc\xEA enviar\xE1 seus arquivos para o site usando algum programa do tipo FTP (Protocolo de Transfer\xEAncia de Arquivos), SFTP (FTP Seguro) ou atrav\xE9s do pr\xF3prio site do provedor. Para saber como proceder, contate o administrador do local onde seu site ser\xE1 hospedado.

HTML Avan\xE7ado

Esta se\xE7\xE3o assume que voc\xEA j\xE1 treinou html o suficiente para estar familiarizado com a linguagem e fazer s\xEDtios na internet. Daqui em diante, este manual apenas far\xE1 um tour por outras linguagens e tecnologias que podem ser utilizadas para organizar seus documentos, separar a apar\xEAncia do conte\xFAdo, facilitar buscas e criar documentos que sobretudo n\xE3o utilizem formatos que venham a ser tornar obsoletos.

Aqui daremos uma vis\xE3o geral de todas as tecnologias usadas atualmente que podem ser integradas ou tem alguma rela\xE7\xE3o com o html e linguagens de marca\xE7\xE3o:

  • Folhas de Estilo
  • Templates
  • Acessibilidade
  • S\xEDtios din\xE2micos ou automatizados

Folhas de Estilo

Folhas de estilo permitem que voc\xEA separe o conte\xFAdo do seu documento da sua representa\xE7\xE3o gr\xE1fica. Como exemplo, ao inv\xE9s de uma express\xE3o do tipo 

<font face="fixed" size="+2" color="red">Estilo misturado com o texto</font>

voc\xEA utiliza algo mais organizado, como 

<div class="estilosa">Estilo separado do texto</div>

E ent\xE3o voc\xEA definiria uma classe de nome estilosa onde os atributos, como tipo de fonte, tamanho e cor seriam definidos. Essa defini\xE7\xE3o pode inclusive estar armazenada num arquivo separado do seu documento, sendo que neste \xFAltimo \xE9 necess\xE1rio apenas uma refer\xEAncia ao arquivo que contanha os estilos.

O mecanismo mais utilizado para criar folhas de estilo para um arquivo HTML \xE9 o Cascading Style Sheet, ou CSS. Em CSS, o estilo estilosa para o exemplo acima poderia ser definido como 

div.estilosa {
   color : red;
   font  : fixed;
   font-size: 14;
}

As vantagens de usar folhas de estilo s\xE3o

  • Separa\xE7\xE3o entre a informa\xE7\xE3o que o seu texto pretende passar e sua apresenta\xE7\xE3o
  • Permite que toda a apresenta\xE7\xE3o do seu texto seja mudada sem que seja preciso alterar o html, bastando apenas que o arquivo que contenha a folha de estilo seja alterado
  • Mais organiza\xE7\xE3o para seus documentos
  • Facilita a cria\xE7\xE3o de Templates

Pela clareza e organiza\xE7\xE3o resultante do uso de folhas de estilo, muitas tags e atributos do HTML s\xE3o consideradas obsoletas ou seu uso \xE9 depreciado, inclusive muitas das quais ensinadas neste tutorial. Sempre que poss\xEDvel, utilize CSS nos seus documentos.

Para mais informa\xE7\xF5es sobre Folhas de Estilo em HTML, consulte esta se\xE7\xE3o da especifica\xE7\xE3o HTML. Para ver a especifica\xE7\xE3o do CSS, consulte Cascading Style Sheets, level 1. Um bom documento em portugu\xEAs se encontra em http://www.codigofonte.com/css/.

Templates

Quem usa HTML provavelmente n\xE3o o faz para escrever um \xFAnico documento e sim um grande n\xFAmero deles. Se voc\xEA est\xE1 redigindo um texto ou fazendo um s\xEDtio composto por muitos arquivos, provavelmente voc\xEA deseja que todos seus documentos HTML tenham a mesma apar\xEAncia ou o mesmo estilo.

Para uniformizar o estilo e a apresenta\xE7\xE3o, voc\xEA pode criar um modelo, tamb\xE9m conhecido como template, que contenha o esqueleto de qualquer p\xE1gina de um s\xEDtio ou texto que seja dividido em v\xE1rios arquivos. Esse template pode conter menus, tabelas e todos os campos que voc\xEA for utilizar.

Existem ainda os motores de template, que s\xE3o softwares que juntam o conte\xFAdo com os templates e produzem p\xE1ginas HTML. Criar um template depende do gosto de cada um, por\xE9m se voc\xEA pretende utilizar um s\xEDtio automatizado existem v\xE1rios motores de template que voc\xEA pode utilizar, como por exemplo:

Acessibilidade

Uma considera\xE7\xE3o importante ao escrever seus documentos HTML \xE9 o qu\xE3o us\xE1vel e acess\xEDvel ele \xE9, tanto em termos visuais quanto na organiza\xE7\xE3o do conte\xFAdo. Lembre-se que todo o tipo de pessoas podem acessar seu s\xEDtio, desde as leigas at\xE9 as especialistas no assunto que voc\xEA trata, desde aquelas que j\xE1 conhecem o s\xEDtio at\xE9 as que nunca ouviram falar dele. Seu conte\xFAdo tamb\xE9m precisa estar organizado para que ao longo do tempo as coisas n\xE3o se percam.

Para ter um bom n\xEDvel de usabilidade em seu s\xEDtio, siga as seguintes recomenda\xE7\xF5es:

  • Use esquemas simples
  • A navega\xE7\xE3o do seu s\xEDtio deve ser intuitiva
  • Crie se\xE7\xF5es do tipo "Sobre este s\xEDtio", "Quem somos", etc
  • Use \xEDndices na medida do poss\xEDvel
  • Escreva resumos
  • Use refer\xEAncias
  • Use uma l\xF3gica para os nomes de arquivos e pastas
  • Evite usar frames, elas bloqueiam o modo natural de se navegar pela web
  • Escolha mais de um estilo para seu s\xEDtio e evite usar combina\xE7\xF5es de cores que dificultem a visualiza\xE7\xE3o
  • Disponibilize, na medida do poss\xEDvel, seu conte\xFAdo em mais de um formato: texto simples, documento HTML, etc
  • Disponibilize seu conte\xFAdo em copyleft ou em outras licen\xE7as
  • Valide seu HTML: verifique se seu c\xF3digo HTML est\xE1 v\xE1lido ou se existem incorre\xE7\xF5es

A acessibilidade de um s\xEDtio tamb\xE9m leva em considera\xE7\xE3o os portadores de necessidades especiais.

O W3C possui linhas gerais de recomenda\xE7\xE3o quanto \xE0 acessibilidade do conte\xFAdo de documentos que usam linguagem de marca\xE7\xE3o.

S\xEDtios din\xE2micos ou automatizados

Seu texto ou s\xEDtio pode ser composto simplesmente por meia d\xFAzia de documentos HTML e ter pouca ou nenhuma atualiza\xE7\xE3o ao longo da sua exist\xEAncia. Caso nada disso seja verdade e voc\xEA est\xE1 fazendo algo grande ou ent\xE3o voc\xEA n\xE3o tem tempo para escrever seu c\xF3digo HTML na m\xE3o, talvez seja o momento de considerar a ado\xE7\xE3o de um sistema automatizado. Destacaremos tr\xEAs tipos deles:

  • Gerenciadores de conte\xFAdo
  • Blogs
  • Wikis

Gerenciadores de conte\xFAdo s\xE3o softwares que rodam em servidores e que administram informa\xE7\xF5es dispon\xEDveis em sites. Muitos s\xEDtios na internet s\xE3o apenas arquivos html, mas tamb\xE9m existem s\xEDtios automatizados que permitem armazenar o conte\xFAdo das p\xE1ginas num banco de dados e a partir desse banco criar muitas p\xE1ginas html e ainda manter sistema de busca e publica\xE7\xE3o sem que para isso o usu\xE1rio precise saber html ou qualquer outra linguagem de marca\xE7\xE3o. Alguns gerenciadores de conte\xFAdo permitem que existam usu\xE1rios capazes de adicionar coment\xE1rios em publica\xE7\xF5es existentes ou at\xE9 mesmo criar suas pr\xF3prias p\xE1ginas atrav\xE9s do preenchimento de formul\xE1rios.

Os Blogs s\xE3o casos especiais de gerenciadores de conte\xFAdo que funcionam como di\xE1rios ou coluna de editorial, onde o dono do blog adiciona texto, imagens e c\xF3digo HTML no s\xEDtio apenas preenchendo um formul\xE1rio.

J\xE1 os Wikis s\xE3o ferramentas que permitem qualquer pessoa criar ou editar um texto utilizando uma linguagem de marca\xE7\xE3o especial e mais simples de ser utilizada do que o HTML. Duas caracter\xEDsticas principais dos sistemas Wiki s\xE3o: voc\xEA pode criar facilmente uma nova p\xE1gina simplesmente escolhendo um nome especial para ela e escrev\xEA-lo nalguma p\xE1gina j\xE1 existente. A outra caracter\xEDstica dos wikis \xE9 a preserva\xE7\xE3o das modifica\xE7\xF5es: o wiki possui um hist\xF3rico de todas as modifica\xE7\xF5es feitas num documento. Mais informa\xE7\xF5es sobre como usar um sistema wiki voc\xEA encontra no texo O Sistema Wiki.

Os gerenciadores de conte\xFAdo, blogs e wikis s\xE3o escritos nalguma linguagem de programa\xE7\xE3o como PHP, Perl, Python, Java, Ruby e muitas vezes utilizam um banco de dados para armazenar o conte\xFAdo. Com um pouco de estudo, voc\xEA pode escrever seu pr\xF3prio sistema ou ent\xE3o utilizar uma solu\xE7\xE3o pronta, como por exemplo:

Programas de edi\xE7\xE3o e ferramentas diversas

Como dito anteriormente (mas bem anteriormente, no come\xE7o deste texto), \xE9 poss\xEDvel redigir arquivos HTML em editores que possuem uma interface WYSIWYG acoplada ao editor de textos, o que facilita tanto o ensino da linguagem quanto as tarefas di\xE1rias que precisam ser executadas com maior velocidade. Esses editores tem tr\xEAs grandes facilidades:

  • Possuem atalhos para inserir no c\xF3digo os blocos HTML mais usados
  • Mudan\xE7as no c\xF3digo podem ser rapidamente visualizadas
  • Possuem um corretor de sintaxe baseado em cores: o c\xF3digo HTML escrito de forma correta \xE9 visualizado no editor com um determinado conjunto de cores no editor, como por exemplo "<a href="http://ln-s.net">Link para o s\xEDtio Ln-s.net<</a>". O c\xF3digo digitado \xE9 constantemente inspecionado pelo programa e, caso ele encontre algum erro, um conjunto de cores de cores diferente \xE9 produzido para informar ao usu\xE1rio que h\xE1 algum erro de sintaxe. Isso ajuda muito a produzir c\xF3digos sempre corretos.

Dois bons exemplos desse tipo de editor s\xE3o o Amaya e o Bluefish.

HTML: Guia de refer\xEAncia r\xE1pida

Como resumo de todo o c\xF3digo HTML apresentado at\xE9 agora, deixamos algumas tabelas de refer\xEAncia r\xE1pida que podem ser at\xE9 impressas e guardadas no bolso.

Caracter\xEDsticas gerais de um documento HTML

C\xF3digo Fun\xE7\xE3o Exige fechamento
html bloco interno \xE9 considerado documento html sim
head bloco que define a cabe\xE7a do documento sim
title bloco que define o t\xEDtulo do documento sim
body bloco interno \xE9 considerado o corpo do html sim

Apar\xEAncia do documento

C\xF3digo Fun\xE7\xE3o Exige fechamento
b bloco em negrito sim
i bloco em it\xE1lico sim
u bloco sublinhado sim
font muda as caracter\xEDsticas da fonte sim
pre mant\xE9m o texto pr\xE9-formatado sim

Quebra de linha, par\xE1grafos e divis\xF5es

C\xF3digo Fun\xE7\xE3o Exige fechamento
br quebra de linha n\xE3o
center texto centralizado sim
p par\xE1grafos recomendado
div cria uma divis\xE3o sim

Atributos diversos

C\xF3digo Atributo Fun\xE7\xE3o Valores poss\xEDveis
p, div align alinhamento letf, right, justify, center
font face fonte nome da fonte
font size tamanho -7 a +7
font color cor ver na se\xE7\xE3o de cores

Espa\xE7amento e entidades

C\xF3digo Fun\xE7\xE3o Exige fechamento
&nbsp; espa\xE7o simples n\xE3o \xE9 uma tag

O Presente e o futuro do markup

As linguagens de marca\xE7\xE3o se mostraram formas poderos\xEDssimas para armazenar e categorizar conte\xFAdo, tanto \xE9 que elas est\xE3o sendo desenvolvidas para acomodar dados com diferentes prop\xF3sitos, incluindo representa\xE7\xF5es de roteamento de chamadas telef\xF4nicas, f\xF3rmulas matem\xE1ticas e esquemas de classifica\xE7\xE3o de rem\xE9dios. Nas pr\xF3ximas se\xE7\xF5es veremos como essa generaliza\xE7\xE3o est\xE1 tomando forma.

O cons\xF3rcio da Web

O HTML e demais linguagens de marca\xE7\xE3o s\xE3o atualmente regulamentados pelo World Wide Web Consortium, o Cons\xF3rcio da Web ou simplesmente W3C, uma iniciativa criada para padronizar muitas das tecnologias de informa\xE7\xE3o surgidas com o advento da Internet.

O sucesso do HTML levou a diversos pesquisadores/as a explorar mais as possibilidades das linguagens de marca\xE7\xE3o que:

  • Acomodem bem o tipo de informa\xE7\xE3o que pretendem armazenar
  • Separem o conte\xFAdo da visualiza\xE7\xE3o
  • Possam ser interpretados por diversos programas

A abordagem que as pesquisas na \xE1rea escolheram foi a busca por uma generaliza\xE7\xE3o total das linguagens e duas metalinguagens (linguagens usadas para definir linguagens) foram definidas: o SGML e o XML.

SGML e HTML

O SGML (ou Standard Generalized Markup Language, Linguagem de Marca\xE7\xE3o Gen\xE9rica Padr\xE3o) foi a primeira generaliza\xE7\xE3o de linguagem de marca\xE7\xE3o a ser largamente adotada. Como metalinguagem, o SGML \xE9 utilizado para definir novas linguagens de marca\xE7\xE3o e atualmente o HTML \xE9 definido atrav\xE9s de SGML.

XML

O XML tamb\xE9m \xE9 uma linguagem definida sobre SGML, mas que serve para definir linguagens de marca\xE7\xE3o com prop\xF3sitos espec\xEDficos e com uma sintaxe bem estrita. O XML \xE9 mais simples de ser interpretado via software e por isso tem ganho bastante visibilidade. Exemplos de linguagens de marca\xE7\xE3o criadas em XML s\xE3o:

  • MathML: usada para nota\xE7\xE3o matem\xE1tica.
  • RDF: usado principalmente para armazenar not\xEDcias.
  • VoiceXML: projetada para esquematizar conversas entre um ser humano e um computador.
  • XHTML: uma vers\xE3o do HTML mais simples e escrita em XML.

RDF e Syndication

Em especial, o RDF (Resource Description Framework) \xE9 uma linguagem utilizada para criar uma outra sopa de letrinhas conhecida como RSS (RDF Site Summary, ou Conte\xFAdo de S\xEDtios em RDF), que \xE9 um cont\xEAiner para armazenar informa\xE7\xF5es de s\xEDtios na internet.

Por exemplo, Centro de M\xEDdia Independente tem um desenho do s\xEDtio e uma disposi\xE7\xE3o das not\xEDcias que s\xE3o bem espec\xEDficos. Se algu\xE9m quiser divulgar not\xEDcias veiculadas no CMI em seu pr\xF3prio s\xEDtio, teria que fazer um programa bem complicado para extrair essa informa\xE7\xE3o do HTML.

Mas o CMI tamb\xE9m oferece seu conte\xFAdo em RSS, que nada mais \xE9 do que um arquivo escrito num dialeto XML que cont\xE9m os t\xEDtulos, as datas e os/as autores das not\xEDcias numa estrutura bem r\xEDgida, que pode ser facilmente interpretada por outros s\xEDtios e programas. Ent\xE3o, se algu\xE9m quiser divulgar conte\xFAdo publicado no CMI em seu pr\xF3prio s\xEDtio, basta utilizar o RSS do CMI.

O RSS resolveu o problema de juntar informa\xE7\xF5es de diferentes s\xEDtios, cada um deles escrito em determinado software ou usando determinado template HTML. Al\xE9m disso, o RSS permite que a informa\xE7\xE3o de s\xEDtio seja obtida por qualquer sistema de tratamento de informa\xE7\xF5es (outro s\xEDtio, um programa leitor de not\xEDcias, um telefone m\xF3vel).

O RSS \xE9 suficientemente completo para permitir tamb\xE9m que informa\xE7\xF5es de conte\xFAdos multim\xEDdia sejam distribu\xEDdas. Exemplos disso s\xE3o o podcast e o vodcast. O podcast \xE9 o RSS que cont\xE9m informa\xE7\xF5es de arquivos de \xE1udio dispon\xEDveis nalgum site (por exemplo, \xE1udios de not\xEDcias, m\xFAsicas ou programas de r\xE1dio). Um tocador de \xE1udio pode ser constantemente alimentado com um podcast e com as informa\xE7\xF5es contidas nele baixar todos os \xE1udios automaticamente, sem interven\xE7\xE3o do usu\xE1rio. Com um vodcast \xE9 similar e consiste num RSS para arquivos de v\xEDdeo.

Novos formatos e acessibilidade

A exist\xEAncia de novos formatos de armazenamento e visualiza\xE7\xE3o de conte\xFAdo bem como o desenvolvimento de editores para tais formatos permite que pessoas com necessidades especiais tenham acesso \xE0s informa\xE7\xF5es de um documento de maneira muito mais f\xE1cil, j\xE1 que a convers\xE3o do conte\xFAdo de um formato para outro (texto para voz ou diferentes representa\xE7\xF5es gr\xE1ficas de um mesmo texto, por exemplo) \xE9 muito mais simples. O Cons\xF3rcio da Web inclusive mant\xE9m uma recomenda\xE7\xE3o sobre como criar s\xEDtios na internet acess\xEDveis tamb\xE9m a portadores de necessidades especiais.

Fuga de padr\xF5es: flash e conte\xFAdo embarcado

Apesar da universalidade dos formatos de armazenamento na web estar a cada dia mais pr\xF3xima, existem ainda alguns formatos de arquivos que n\xE3o compartilham seu conte\xFAdo de modo a possibilitar que este seja convertido para outras formas de representa\xE7\xE3o de informa\xE7\xE3o. Isso acontece principalmente porque os arquivos n\xE3o est\xE3o representados como texto puro, mas sim diretamente em linguagem de m\xE1quina e muitas vezes o procedimento de decodifica\xE7\xE3o do conte\xFAdo \xE9 mantido em sigilo pelos desenvolvedores.

Dois exemplos desses conte\xFAdos "embardacos" s\xE3o o Flash e o Java. O principal problema deles \xE9 que a extra\xE7\xE3o de conte\xFAdo neles \xE9 deliberadamente dificultada: \xE9 complicado copiar um texto de um documento em Flash ou em Java.

Tais formatos que fogem dos padr\xF5es amig\xE1veis da web em geral s\xE3o desenvolvidos por empresas privadas que desejam ter controle sobre os programas existentes para cria\xE7\xE3o e exibi\xE7\xE3o do conte\xFAdo. H\xE1 uma verdadeira batalha de formatos e para mais sobre ela, leia [[http://www.gnu.org/philosophy/no-word-attachments.pt.html][N\xF3s Podemos P\xF4r um Fim aos Anexos [de e-mail] do Word]].

Portanto, como a boa etiqueta da internet pede, evite utilizar conte\xFAdo embarcado em seu s\xEDtio smile

Teia de informa\xE7\xE3o: web sem\xE2ntica, busca por contexto e redes sociais

A consequ\xEAncia de in\xFAmeros documentos HTML referencidando uns aos outros \xE9 a forma\xE7\xE3o de uma teia de textos e imagens, entrela\xE7ados por links.

A web permitiu que conex\xF5es entre documentos fossem estabelecidas com um m\xEDnimo esfor\xE7o. Essa conex\xE3o desde cedo refletiu tanto uma rela\xE7\xE3o entre assuntos e textos quanto entre pessoas. Se no in\xEDcio da internet apenas as rela\xE7\xF5es entre assuntos eram evidenciadas, hoje a rede social \xE9 tida como o par\xE2metro fundamental de constru\xE7\xE3o da teia da informa\xE7\xE3o.

Leia mais sobre isso em

Se por um lado essas novas tecnologias e formas de organiza\xE7\xE3o representam um avan\xE7o na inform\xE1tica, por outro elas podem implicar numa grave perda da privacidade das pessoas, que a cada dia colocam mais informa\xE7\xE3o das suas vidas em servi\xE7os web. Leia mais sobre isso em

Gran Finale

Apesar de excitante, a discuss\xE3o sobre esses temas come\xE7a a fugir muito do objetivo inicial deste documento, que \xE9 a introdu\xE7\xE3o pr\xE1tica do leitor ou da leitora \xE0 linguagem de marca\xE7\xE3o conhecida como HTML e tamb\xE9m dar uma no\xE7\xE3o sobre as novas tecnologias e o futuro da linguagem de marca\xE7\xE3o.

Espero que voc\xEA tenha gostado smile

Notas

Tabela ASCII

Aqui est\xE1 uma c\xF3pia da Tabela ASCII Simples.

Sobre n\xFAmeros hexadecimais

N\xFAmeros s\xE3o n\xFAmeros. Agora, a maneira como podemos represent\xE1-los pode variar dependendo do uso que damos a eles. Por exemplo, muitas vezes \xE9 suficiente usarmos um palito para cada unidade. A representa\xE7\xE3o do n\xFAmero 4 seria: 

| | | |

Note que escrever 4 j\xE1 \xE9 uma representa\xE7\xE3o do n\xFAmero quatro (que tamb\xE9m \xE9 uma outra representa\xE7\xE3o desse n\xFAmero). Em n\xFAmeros romanos seria IV. O que muda de uma representa\xE7\xE3o pra outra - I I I I, 4 ou IV - s\xE3o os s\xEDmbolos, a base do n\xFAmero e sua nota\xE7\xE3o. No primeiro caso, temos a nota\xE7\xE3o sequencial, onde para cada incremento adiciona-se uma barrinha ao lado das outras. J\xE1 no segundo caso, usamos uma nota\xE7\xE3o posicional.

Por alguma coincid\xEAncia da natureza, o ser humano tem 10 dedos nas m\xE3os e provavelmente por isso utilizamos o sistema decimal. No sistema decimal os s\xEDmbolos s\xE3o, em ordem crescente de valor 0, 1, 2, 3, 4, 5, 6, 7, 8 e 9. Cada um desses s\xEDmbolos ocupa uma posi\xE7\xE3o. Mas o que acontece quando quisermos representar n\xFAmeros maiores que nove? Melhor dizendo: o que acontece no sistema decimal conforme formos somando n\xFAmeros em sequ\xEAncia? Por exemplo, como podemos representar o n\xFAmero formado pela soma de 9 com 1 se s\xF3 temos s\xEDmbolos de 0 a 9?

A resposta para essa pergunta \xE9 simples: na nota\xE7\xE3o decimal, o valor de um s\xEDmbolo depende da posi\xE7\xE3o que ele ocupa. Por conven\xE7\xE3o, se um s\xEDmbolo for deslocado para esquerda ele ter\xE1 seu valor aumentado dez vezes. Assim, o n\xFAmero 2, quando deslocado para a esquerda, se transforma em 20 e um zero \xE9 colocado na sua posi\xE7\xE3o anterior para marcar uma posi\xE7\xE3o vazia. Da mesma forma, um deslocamento de d\xEDgito para a direita implica na redu\xE7\xE3o do valor de um n\xFAmero em dez vezes.

"Mas voc\xEA ainda n\xE3o respondeu minha pergunta: o que acontece quando somamos 9 com 1?" A\xED vem o pulo do gato: quando somamos 8 com 1, o n\xFAmero resultante \xE9 representado pelo s\xEDmbolo que na ordem crescente de valores vem logo ap\xF3s o 8, que \xE9 o 9. Quando somamos 1 ao 9, n\xE3o temos mais s\xEDmbolos com valor maior que o 9. O que fazemos simplesmente \xE9 "limpar" a posi\xE7\xE3o atual ocupada pelo 9 usando o n\xFAmero 0 e colocando o n\xFAmero 1 numa posi\xE7\xE3o \xE0 esquerda do zero. Lembra que eu disse que um d\xEDgito quando deslocado para a esquerda cresce dez vezes de valor? Pois quando deslocamos o n\xFAmero 1 para esquerda ele se torna 10 (usamos o zero para indicar que h\xE1 uma posi\xE7\xE3o vazia \xE0 direita do 1), que \xE9 o n\xFAmero dez, o resultado da soma de 1 com 9.

Portanto, para representar o n\xFAmero dez, \xE9 necess\xE1rio adicionar uma nova posi\xE7\xE3o, o que significa que precisamos usar dois desses s\xEDmbolos: 10. Ou seja, no sistema decimal necessitamos de dez s\xEDmbolos para representar os n\xFAmeros e por isso dizemos que ele \xE9 um sistema de base 10.

Mas nem sempre foi assim. Os babil\xF4nios utilizavam um sistema de base 60! Para eles, isso facilitava muito os c\xE1lculos de astronomia e agrimensura, porque 60 \xE9 um n\xFAmero divis\xEDvel por 2, 3, 4, 5, 6, 10, 12, etc e isso era crucial para facilitar as contas.

Em computa\xE7\xE3o, onde em geral os n\xFAmeros s\xE3o bem grandes, \xE9 comum utilizar uma nota\xE7\xE3o com base maior que dez, pois cabe mais informa\xE7\xE3o em cada posi\xE7\xE3o num\xE9rica. A base mais utilizada \xE9 a 16, tamb\xE9m chamada de hexadecimal, porque em geral as informa\xE7\xF5es s\xE3o agrupadas em m\xFAltiplos de oito. \xC9 por isso que neste tutorial os c\xF3digos de cores est\xE3o em hexadecimal: s\xE3o tantas cores que a nota\xE7\xE3o em decimal ficaria muito complicada.

Para ver a tabela de n\xFAmeros hexadecimais e saber como converter da nota\xE7\xE3o decimal para hexadecimal (e vice-versa), acesse a p\xE1gina http://pt.wikipedia.org/wiki/Hexadecimal.

Sobre este Guia

Este manual foi escrito por Rhatto (rhatto@riseupSTOPSPAM.net).

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

-- SilvioRhatto - 18 Sep 2006
Topic attachments
I Attachment Action Size Date Who Comment
ascii.htmlhtml ascii.html manage 7 K 26 Aug 2003 - 01:25 UnknownUser Tabela ASCII
emma.jpgjpg emma.jpg manage 12 K 24 Apr 2004 - 19:58 UnknownUser Emma Goldman
Edit  | Attach | Print version | History: r67 < r66 < r65 < r64 | Backlinks | View wiki text | Edit wiki text | More topic actions
Topic revision: r67 - 13 Sep 2007, AlsteR
This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback