Curso Relmpago de HTML/XHTML

verso 1.0, Janeiro 2007 por Antnio Manuel Dias ammdias@gmail.com

Copyright 2004 - 2006 Antnio Manuel Dias Este documento pode ser copiado e distribudo segundo a licena Creative Commons Atribuio Partilha nos Termos da Mesma Licena 2.5. Esta licena permite que o documento seja copiado, distribudo e lido sob as seguintes condies:

Atribuio. O utilizador deve dar crdito ao autor original, da forma especificada pelo autor ou licenciante. Partilha nos termos da mesma Licena. Se alterar, transformar, ou criar outra obra com base nesta, s poder distribuir a obra resultante atravs de uma licena idntica a esta.

Para cada reutilizao ou distribuio, dever deixar claro para outros os termos da licena desta obra. Qualquer uma destas condies podem ser renunciadas, desde que obtenha permisso por parte do autor. Qualquer direito de uso legtimo (ou "fair use") concedido por lei, ou qualquer outro direito protegido pela legislao local, no so em hiptese alguma afectados pelo disposto acima. Para mais informaes, pode consultar o texto jurdico, na ntegra, no endereo web: http://creativecommons.org/licenses/by-sa/2.5/pt/legalcode

Contedo
1 Introduo ..................................................................................... ......................... 2 2 Primeiros passos ....................................................................... ............................. 3 3 Listas ......................................................................................................................8 . 4 Tabelas ......................................................................................................... ......... 13 5 Hiperligaes ......................................................................... .............................. 15 6 Estrutura de um documento HTML ................................................................ 17 ..... 7 Imagens e outros efeitos ........................................................................... ........... 18 7.1 Imagens ...................................................................................................... 18 ... 7.2 Caracteres especiais ................................................................................... 20 ..

7.3 Efeitos ...................................................................................... ..................... 22 8 Concluso ..................................................................................... ........................ 24

Introduo

HTML uma linguagem de marcao de texto, tendo como utilidade no s a alterao do seu aspecto (formatao) e incluso de imagens, animaes, etc. como, e principalmente, a possibilidade da incluso de hiper-texto referncias para outras partes do mesmo documento e para outros documentos. esta possibilidade que lhe d o nome, Hyper-Text Markup Language e que a tornou to til, possibilitando a criao da World-Wide Web, a face mais visvel da Internet. A grande maioria dos stios na Internet que visitas com o teu navegador web so escritos numa verso desta linguagem ou numa das suas derivadas. Actualmente, a verso de HTML mais usada a 4.01, que tambm a ltima, no sentido de que no haver mais nenhuma, estando j em grande ascenso de popularidade a sua substituta, XHTML, que baseada na primeira e, na sua verso inicial, totalmente compatvel. Uma vez que so compatveis, ou seja, XHTML HTML vlido, e que esta est gradualmente a ser substituda em todo o lado por XHTML, todos os exemplos que utilizarei estaro apenas escritos nesta ltima. Antes de iniciar o curso, vamos listar aquilo que necessitas para o completar e descrever as convenes que utilizarei ao longo das pginas que se seguem. Como a maior parte das linguagens, HTML texto puro aquele que consegues ao utilizar um editor como o Bloco de Notas do Windows. Necessitas, portanto, de um editor de texto para criares documentos (pginas) HTML; o Bloco de Notas ou outro editor do gnero, como o KEdit, para aqueles que usam o ambiente KDE de sistemas Unix, sero suficientes. No entanto, podes tambm usar editores mais sofisticados, com realce de sintaxe a separao visual, geralmente por intermdio de cores diferentes, entre os elementos de formatao da linguagem e o texto (ou contedo) propriamente dito. Bons exemplos deste tipo de editores so o tsWebEditor1, para Windows, ou o Kate2, para KDE. At o clebre Vim3, editor de consola presente na maior parte das distribuies de GNU/Linux, tem um modo de realce de HTML. Necessitars tambm de um navegador web, para ires vendo os resultados dos exemplos que formos construindo. Para distinguir os comandos HTML, usarei uma fonte fixa e para apresentar novos conceitos ou pontos importantes, usarei itlico. A cheio estaro todos os avisos e chamadas de ateno.

1 2 3

http://tswebeditor.at.tf/ http://kate.kde.org/ http://www.vim.org/

 agora tempo de passarmos aco e comearmos a produzir HTML. (Podes transferir um arquivo com todos os ficheiros-fonte deste curso a partir do mesmo site deste documento: http://maracuja.homeip.net/doc/ti/src/crhtml.zip)

Primeiros passos

Como disse, um documento HTML apenas texto puro, pelo que podes comear por abrir o editor que escolheste e escrever o teu primeiro documento (ou copia e cola o texto no editor no pretendo ensinar-te dactilografia): Cano de embalar Dorme meu menino a estrela d'alva j a procurei e no a vi Se ela no vier de madrugada Outra que eu souber ser pra ti Outra que eu souber na noite escura Sobre o teu sorriso de encantar Ouvirs cantando nas alturas Trovas e cantigas de embalar por Jos Afonso Os documentos HTML e XHTML devem ter a extenso .html, para que o sistema operativo os trate por omisso como tal. Assim, guarda este texto com o nome embalar.html (se estiveres a usar o Bloco de Notas do Windows, toma ateno que este programa insiste em gravar os documentos com a extenso .txt, mesmo que lhe coloques outra extenso; para contornar este problema, coloca o nome entre aspas: "embalar.html"). Agora, visualiza o documento no teu navegador favorito.

Ups, o texto est todo seguido, sem quebras de linha nem pargrafos... no era bem isto o que pretendamos. O que se passa que no colocmos qualquer formatao no texto, pelo que o interpretador do navegador no lhe deu nenhuma e, em HTML, todo o espao em branco, sejam qualquer nmero de espaos, tabulaes ou mudanas de linha, so interpretados da mesma forma: uma separao entre duas palavras seguidas. As separaes entre palavras so mostradas de uma de duas formas pelo navegador: se as palavras couberem as duas na mesma linha, ser introduzido um, e apenas um, espao entre elas; se no couberem, ser introduzida uma mudana de linha. Se reparares, foi o que aconteceu com o nosso texto. Toda a formatao HTML/XHTML feita com tags (etiquetas), que equivalem aos comandos da linguagem. Uma tag, em HTML, no mais do que uma palavra chave rodeada por um sinal de menor ('<') e maior ('>'). Existem duas variantes de tags, as normais, compostas por uma tag de abertura e outra de fecho, e as nicas ou simples, em que se usa apenas uma nica tag. Por exemplo, para dividirmos o texto em pargrafos usamos a tag de abertura <p> a que corresponde a de fecho </p> sempre assim: a tag de fecho a de abertura precedida de uma barra. Vamos usar esta tag para dividir o nosso texto em pargrafos (deves gravar o ficheiro sempre que fizeres alteraes e fazer Refrescar ou Recarregar no teu navegador para visualizar a nova verso): <p>Cano de embalar</p> <p>Dorme meu menino a estrela d'alva j a procurei e no a vi Se ela no vier de madrugada Outra que eu souber ser pra ti</p> <p>Outra que eu souber na noite escura

Sobre o teu sorriso de encantar Ouvirs cantando nas alturas Trovas e cantigas de embalar</p> <p>por Jos Afonso</p> Como se pode ver, o texto foi separado em pargrafos, sendo estes mostrados com uma linha de intervalo entre cada um.

Est melhor, mas ainda no bem isto que queramos. O necessrio agora quebrar as linhas de cada estrofe em versos. No podemos usar a tag anterior, j que esta colocaria uma linha a separar cada verso; o que necessitamos de um comando para mudar de linha sem iniciar um novo pargrafo. Para esse efeito usaremos uma tag simples, <br />. Para distinguir as tags simples das normais de abertura, as primeiras devem ser terminadas com uma barra, tal como apresentado (esta uma restrio apenas do XHTML, que no era necessria no HTML). Vamos ento formatar de novo a letra da cano do Jos Afonso, colocando uma quebra de linha em cada verso (br vem de line break): <p>Cano de embalar</p> <p>Dorme meu menino a estrela d'alva<br /> j a procurei e no a vi<br /> Se ela no vier de madrugada<br /> Outra que eu souber ser pra ti</p> <p>Outra que eu souber na noite escura<br /> Sobre o teu sorriso de encantar<br /> Ouvirs cantando nas alturas<br /> Trovas e cantigas de embalar</p>

<p>por Jos Afonso</p>

Agora sim, j se parece com a letra de uma cano. No entanto, ainda podemos introduzir alguns melhoramentos, como pr a atribuio da autoria em itlico e o nome do autor a cheio. Para isso iremos utilizar as duas tags correspondentes, <em> e <strong>, respectivamente, com as suas tags de fecho (em, nfase; strong, forte): <p>Cano de embalar</p> <p>Dorme meu menino a estrela d'alva<br /> j a procurei e no a vi<br /> Se ela no vier de madrugada<br /> Outra que eu souber ser pra ti</p> <p>Outra que eu souber na noite escura<br /> Sobre o teu sorriso de encantar<br /> Ouvirs cantando nas alturas<br /> Trovas e cantigas de embalar</p> <p><em>por <strong>Jos Afonso</strong></em></p> Nota que todo o texto do pargrafo ficou em itlico e apenas o nome a cheio.

Isto demostra o facto de que podes embeber tags umas dentro das outras, desde que as mais interiores fiquem totalmente includas nas exteriores. Ou seja, o cdigo seguinte seria XHTML invlido, uma vez que a marcao interior no est totalmente includa na exterior (nota que a maior parte dos navegadores fosse ignorar o erro e mostrar o texto correctamente): <em>texto <strong>XHTML</em> invlido</strong> Para terminar esta seco, vamos destacar o ttulo da cano, usando a tag indicada, <h1>, e sublinhando-o. O h vem de Heading (ttulo ou cabealho) e o 1 indica que um ttulo de primeira ordem, podendo ser usados ttulos de <h1> a <h6>. Para sublinhar usamos a tag <u> (underline). Vamos ainda separar o ttulo do texto atravs de uma linha horizontal, com a tag <hr /> (horizontal rule). <h1><u>Cano de embalar</u></h1> <hr /> <p>Dorme meu menino a estrela d'alva<br /> j a procurei e no a vi<br /> Se ela no vier de madrugada<br /> Outra que eu souber ser pra ti</p> <p>Outra que eu souber na noite escura<br /> Sobre o teu sorriso de encantar<br />

Ouvirs cantando nas alturas<br /> Trovas e cantigas de embalar</p> <p><em>por <strong>Jos Afonso</strong></em></p> Reparaste que substitu a tag de pargrafo pela de ttulo, o que faz todo o sentido: um ttulo ser sempre apresentado separado do resto do texto.

Apenas com estas tags j poderias produzir muitos documentos em texto formatado, demonstrando assim a facilidade de aprendizagem desta linguagem, uma das razes que a levaram ao sucesso que hoje. ento uma boa altura de terminar esta lio e passar seguinte.

Listas

Listas, tabelas e imagens so das adies mais comuns para tornar um texto interessante. Como no podia deixar de ser, tudo isso possvel fazer com HTML. Ns iremos comear por falar de listas. Genericamente, podemos dividir as listas em dois grandes tipos: numeradas e no numeradas (listas de itens). As listas no numeradas so descritas em HTML com duas tags: <ul> e <li>. Para memorizares mais facilmente, basta lembrares-te que

ul vem de unordered list, lista no ordenada, e li de list item, item de uma lista. Eis um pequeno exemplo da utilizao destas tags (comea um novo ficheiro de nome listas.html): <h1>Listas</h1> <h2>Lista no ordenada:</h2> <ul> <li>Primeiro item</li> <li>Segundo item</li> <li>Terceiro item</li> </ul>

Toda a lista envolvida entre as tags <ul> e </ul> e cada item entre as tags <li> e </li>. Lembra-te que as quebras de linha e espaos so irrelevantes em HTML, pelo que a separao e indentao de itens so apenas por motivos estticos e para melhorar a leitura do ficheiro de texto. Um item no precisa de ter uma s linha, pode ser do tamanho que for necessrio. Alis, pode mesmo conter outra lista: <h1>Listas</h1> <h2>Lista no ordenada:</h2> <ul> <li>Primeiro item</li> <li>Segundo item, uma sub-lista: <ul> <li>Primeiro sub-item</li> <li>Segundo sub-item</li> </ul>

</li> <li>Terceiro item</li> </ul>

As listas ordenadas so semelhantes s anteriores, com a diferena que a sua tag de definio <ol> (ol vem de ordered list, lista ordenada). Podes adicionar esta parte no fim do ficheiro anterior e visualizar no navegador para veres o efeito: <h2>Lista ordenada:</h2> <ol> <li>Primeiro item</li> <li>Segundo item</li> <li>Terceiro item</li> </ol>

10

As listas ordenadas podem tambm ser por ordem alfabtica ou de numerao romana. Para tal temos de incluir no elemento de abertura da lista um atributo a especificar o tipo de lista pretendido. Os atributos usam-se da seguinte forma: <h2>Lista ordenada:</h2> <ol type="a"> <li>Primeiro item</li> <li>Segundo item</li> <li>Terceiro item</li> </ol>

11

Neste caso o atributo chama-se type e indica o tipo de lista que queremos usar. A maior parte dos atributos tem um valor (neste caso, a) que deve ser includo sempre entre aspas e a seguir ao sinal de igual. O atributo type de ol pode ter estes valores:
1: lista numerada normal (pode ser omitido) a: lista alfabtica em letra minscula ('a', 'b', etc...) A: lista alfabtica em letra maiscula ('A', 'B', etc...) i: lista em numerao romana minscula ('i', 'ii', etc...) I: lista em numerao romana maiscula ('I', 'II', etc...)

Outro atributo bastante til nas listas o value, que serve para alterar o valor de um item na lista. Este atributo tem de ser sempre um nmero inteiro, que representa o valor que ir ser atribudo ao item; mesmo numa lista alfabtica, sempre o nmero de ordem que especificado. Por exemplo, se quisssemos uma lista iniciada no item e, faramos o seguinte: <h2>Lista ordenada:</h2> <ol type="a"> <li value="5">Primeiro item</li> <li>Segundo item</li> <li>Terceiro item</li> </ol>

Como vs, aps a especificao de um valor, os itens restantes seguem a numerao normalmente, mesmo sem especificarmos o seu valor.

12

Tabelas

As tags para construir uma tabela so <table>, <tr> e <td>, que representam respectivamente uma tabela, uma linha e uma clula. Vamos construir uma tabela de multiplicao, para ficares com uma ideia de como se usam estes elementos (grava num ficheiro de nome tabela.html): <h1>Tabela de multiplicao</h1> <table> <tr> <td><b>X</b></td> <td><b>1</b></td> <td><b>2</b></td> <td><b>3</b></td> </tr> <tr> <td><b>1</b></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><b>2</b></td> <td>2</td> <td>4</td> <td>6</td> </tr> <tr> <td><b>3</b></td> <td>3</td> <td>6</td> <td>9</td> </tr> </table>

Mais uma vez, lembra-te que as quebras de linha e espaos so opcionais, servindo apenas para tornar legvel o texto fonte.

13

Repara como toda a tabela est envolvida entre as tags <table> e </table>, cada linha entre as tags <tr> e </tr> (table row, linha de tabela) e cada clula entre as tags <td> e </td> (table data, dados da tabela). Dentro das clulas pode estar qualquer contedo, incluindo outras tabelas -- alis, dessa forma que muitas das pginas web mais complexas so feitas. Para mostrar as linhas divisoras entre as clulas deves incluir o atributo border na tag <table>. Este atributo tambm um nmero inteiro que significa a espessura da linha. Por exemplo, para que a tabela anterior tivesse linhas com a espessura de um pixel, a tag inicial deveria ser <table border="1">.

14

Hiperligaes

Aquilo que torna o HTML especial, e o que lhe d inclusivamente o nome, o facto de poder incluir hiperligaes (referncias) nos documentos. As hiper-ligaes podem ser internas, para um local na prpria pgina ou externas, para outra pgina. As outras pginas referenciadas podem estar na mesma mquina ou em qualquer local acessvel por rede. Tambm podes referenciar locais especficos dentro de uma pgina externa. Para inclures uma ligao para uma pgina deves usar a tag <a>, de anchor, indicando no seu atributo href a localizao dessa pgina. O texto que puseres entre a tag de abertura e a de fecho ser o texto da ligao. Por exemplo, no pargrafo seguinte est uma ligao para o Google (grava num ficheiro href.html): <h1>Hiperligaes</h1> <p>Consulta o <a href="http://www.google.com">Google</a> para descobrires o que procuras.</p>

Neste caso era uma ligao para uma pgina externa, pelo que deve levar sempre a indicao do protocolo a usar (o http://) sempre que necessitares de ligar a uma pgina exterior, a melhor forma abri-la num navegador e copiar o endereo para o atributo href. Se a pgina referenciada for local ao stio ( site) ou mquina onde est a pgina com a ligao para l, no necessitas de incluir o protocolo, bastando incluir o caminho relativo ou absoluto para a pgina em questo. Por exemplo, para uma ligao para a pgina listas.html, que fizeste anteriormente, localizada na mesma directoria desta pgina, poderias incluir o seguinte cdigo (vai acrescentando ao ficheiro anterior): <p>Ligao para <a href="listas.html">listas.html</a>.</p>

15

Quando o navegador segue a ligao para uma pgina, mostra sempre o topo da nova pgina e, na maior parte dos casos, isso mesmo que queremos. No entanto, em pginas mais compridas, com vrias seces, podemos querer ir directamente para uma dessas seces. Tambm, se a pgina que estivermos a escrever ultrapassar vrias vezes a altura do ecr, ser conveniente colocarmos um ndice no topo com referncias para cada uma das seces ou partes da pgina. Para este efeito temos de marcar as seces no documento para onde queremos ligar com o atributo id. Para exemplificar, volta a abrir a pgina listas.html e altera os ttulos das seces para que fiquem desta forma: <h2 id="li_nord">Lista no ordenada:</h2> <h2 id="li_ord">Lista ordenada:</h2> <h2 id="li_alf">Lista ordenada:</h2> <h2 id="li_alf2">Lista ordenada:</h2>

Agora, podemos criar uma lista de ligaes para cada uma dessas seces na pgina href.html: <ul> <li><a <li><a <li><a <li><a </ul> href="listas.html#li_nord">Lista no ordenada</a></li> href="listas.html#li_ord">Lista ordenada</a></li> href="listas.html#li_alf">Lista alfabtica</a></li> href="listas.html#li_alf2">Segunda lista alfabtica</a></li>

16

Repara no uso do cardinal antes do nome que demos s seces, o que indica precisamente que uma referncia para uma seco da pgina se no tivesse o cardinal seria tratado como uma referncia para um ficheiro local. Se pretendesses criar um ndice na prpria pgina listas.html, poderias faz-lo desta forma (coloca este pedao no incio do ficheiro, logo a seguir ao ttulo): <h2>ndice</h2> <ul> <li><a <li><a <li><a <li><a </ul> href="#li_nord">Lista no ordenada</a></li> href="#li_ord">Lista ordenada</a></li> href="#li_alf">Lista alfabtica</a></li> href="#li_alf2">Segunda lista alfabtica</a></li>

Uma vez que a seco fica na prpria pgina, no necessitas de incluir o seu nome antes do cardinal. Nesta pgina coloquei todos os atributos id em tags <h2>, porque me pareceu a localizao mais lgica. No entanto, este atributo vlido em qualquer tag.

Estrutura de um documento HTML

At agora temos usado a marcao HTML/XHTML para produzir documentos mas, apesar de a maior parte dos navegadores os conseguir interpretar, os documentos que temos criado no so documentos HTML vlidos, uma vez que todo o docu-

17

mento HTML tem de obedecer a uma estrutura rgida. Uma pgina HTML vlida mas bastante bsica poderia ser assim: <html> <head> <title>A minha pgina</title> </head> <body> <h1>A minha pgina</h1> <p>Pgina em construo.</p> </body> </html>

Os documentos HTML e XHTML tm duas partes distintas. A primeira parte, o cabealho, envolto entre as tags <head> e </head> e contm informao diversa sobre o documento; neste caso tem apenas o seu ttulo, que definido com a tag <title>. O ttulo da pgina normalmente mostrado na barra de ttulo do navegador, junto com o seu nome. A segunda parte, envolta entre as tags <body> e </body>, contm o corpo do documento, ou seja, o seu contedo propriamente dito. Toda a pgina HTML deve ficar dentro das marcaes <html> e </html>.

Imagens e outros efeitos

Com o que falmos at aqui j podemos escrever uns bons textos para colocar na Internet. No entanto, podemos tornar as coisas ainda mais interessantes colocando algumas imagens e incluindo outros efeitos. disso que irei falar nesta ltima seco do Curso Relmpago.

7.1

Imagens

Para incluir imagens nas pginas HTML usa-se a tag <img /> (image), indicando o ficheiro com a imagem que queremos incluir (este ficheiro podes chamar efeitos.html): <html> <head> <title>Efeitos</title> </head> <body> <h1>Efeitos</h1> <h2>Imagens</h2> <img src="http://maracuja.homeip.net/info/antonio/antonio.png"

18

width="158" height="140" alt="Antnio" /> </body> </html>

O nome do ficheiro com a imagem indicado no atributo src (source, fonte) e pode indicar uma imagem local ou em qualquer ponto da rede. Se a imagem estiver numa mquina diferente, como no exemplo acima, deve indicar-se o seu URL completo; se, por outro lado, esta se encontrar no mesmo sistema da pgina, basta indicar o seu caminho absoluto (partindo da raiz do sistema) ou relativo (a partir da localizao da pgina). Experimenta incluir uma imagem que tenhas no teu sistema copia-a para a directoria onde tens a pgina e d-lhe o nome teste.png (altera a extenso do ficheiro consoante o tipo de imagem que vais utilizar). Em seguida, acrescenta esta linha ao ficheiro anterior (antes da tag </body>, obviamente): <h2>Imagem local</h2> <img src="teste.png" alt="Imagem local de teste" />

Os formatos de imagem admitidos variam consoante o programa utilizado para visualizar a pgina, sendo os mais vulgares os JPEG, GIF e PNG. Os atributos width e height so opcionais, levando respectivamente a largura e altura da imagem em pixeis, e servem para indicar ao navegador o espao que a imagem ir ocupar, tor-

19

nando mais rpida a construo da pgina. Finalmente, o atributo alt contm um texto a ser exibido no caso de ser impossvel mostrar a imagem, quer isso seja por indisponibilidade do ficheiro quer por outro qualquer problema; uma boa norma incluir sempre este atributo, apesar de tambm ele ser opcional. Para veres o efeito deste atributo, remove a imagem anterior da directoria e visualiza novamente a pgina.

7.2

Caracteres especiais

Existem alguns caracteres que necessitam de uma notao especial para serem representados numa pgina HTML. Por exemplo, os sinais de maior e menor, uma vez que so utilizados para delimitar as tags, no seriam visualizados se os inclussemos naturalmente numa pgina. Estes sinais podem ser representados da seguinte forma:
&lt; sinal de menor, < (lt significa less than) &gt; sinal de maior, > (gt singifica greater than)

Os caracteres especiais so ento representados atravs de uma abreviatura entre um e-comercial (&) e um ponto e vrgula (;). O prprio e-comercial tem tambm uma representao: &amp; (amp vem de ampersand). Tambm smbolos que no constam nos teclados podem ser representados por esta notao:
&copy; smbolo de copyright, &nbsp; espao entre palavras que no devem ser separadas por uma

quebra de linha (nbsp significa non-breaking space) Os caracteres acentuados tambm podem ser representados desta forma:
&aacute; a com acento agudo, &agrave; a com acento grave, &acirc; a com acento circumflexo, &atilde; a com til, &auml; a com trema, &ccedil; c com cedilha,

Penso que percebeste a lgica: primeiro coloca-se a letra que se quer acentuar e depois o tipo de acento a colocar. Isto muito til quando no se sabe a codificao de caracteres que estamos a usar para editar a pgina HTML: se esta for diferente da que utilizada por omisso pelos navegadores das pessoas que a iro visualizar, estes caracteres sairo todos trocados. Acrescenta estas linhas ao ficheiro efeitos.html para veres um exemplo da utilizao desta notao:

20

<h2>Caracteres especiais</h2> <p>&lt; &copy; 2007 Maracuj! &gt; <br /> &Eacute; um texto divert&iacute;ssimo.</p>

Tambm possvel indicar a codificao que estamos a usar incluindo esta tag dentro da <head> </head> da pgina: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Esta tag, quando includa, indica o tipo de documento que se trata, neste caso um documento HTML (text/html), e qual a codificao de caracteres que foi utilizada para o editar, aqui UFT-8 (charset=utf-8). Deves colocar a codificao de caracteres que usares a seguir a charset=. As codificaes mais vulgares em Portugal, para alm do UTF-8, utilizada pelos sistemas operativos mais modernos, so o ISO-

21

8859-1, ISO-8859-15 e Windows-1252, este ltimo utilizado maioritariamente pelos Windows mais antigos.

7.3

Efeitos

Tradicionalmente, o estilo utilizado nos documentos, como o tipo de fonte, o seu tamanho, a cor do texto e do fundo, etc., eram definidos no prprio documento HTML atravs de tags e atributos especficos. No entanto, foi depois verificado que isso implica um pesadelo de manuteno para sites com muitas pginas, uma vez que. quando se quisesse alterar o aspecto de um stio web teriam de se alterar todas elas, uma a uma, correndo sempre o risco de deixar algo para trs. Por essa razo foi criada uma nova norma, chamada Cascading Style Sheets (CSS), que possibilita colocar todas as definies de estilo num nico ficheiro, bastando ento que nas pginas HTML o referenciemos para que estas adoptem essas definies. Assim, nas pginas HTML passa a estar apenas o contedo, o que torna mais fcil a sua manuteno e a alterao consistente do aspecto de todo um stio, bastando alterar apenas num ficheiro. Como o objectivo deste curso apenas inici-los no HTML, no me irei debruar sobre CSS, deixando isso, talvez, para um documento futuro. No entanto, para que consigas embelezar as tuas pginas, irei abordar levemente a forma de embeberes CSS em HTML (defraudando assim todo o objectivo deste padro, mas por uma boa causa). Para incluires uma definio de estilo numa tag, basta colocares o atributo style="" dentro dessa tag, colocando a definio dentro das aspas. Por exemplo, para modificarmos a cor do texto de um pargrafo faramos (vai acrescentando ao ficheiro anterior): <h2>Cores</h2> <p style="color: green;">Texto a verde.</p>

Para alterar a cor do texto usa-se a propriedade CSS color, indicando a cor desejada de seguida e terminando com um ponto e vrgula. Aqui usmos uma cor predefinida, green, estando disponveis as cores mais vulgares como red, blue, yellow, pink, orange, etc. Tambm podemos construir uma cor usando uma escala de 16 nveis das trs cores fundamentais: vermelho, verde e azul. Para indicar o nvel pretendido usamos o seu valor com um dgito hexadecimal (0-9, A-F). Por exemplo, para uma cor composta por 15 de vermelho, 8 de verde e 0 de azul, usaramos a seguinte especificao: <p style="color: #F80;">Texto a laranja.</p> Quando indicamos uma cor em hexadecimal, temos de o indicar com um cardinal (#) antes do valor e seguindo a ordem vermelho-verde-azul.

22

Podemos incluir vrios elementos de estilo no mesmo atributo. O pargrafo que se segue apresenta texto a branco sobre um fundo (background) verde: <p style="color: white; background: green;">Branco sobre verde.</p>

Para terminar, v como se muda a fonte (propriedades font-family e font-size) e o alinhamento (text-align): <h2>Fontes e alinhamento</h2> <p style="text-align: left; font-family: serif; font-size: x-small;"> esquerda, Serif e muito pequeno </p> <p style="text-align: justify; font-size: small;"> Justificado (alinhado s margens) e apenas pequeno, mas temos que colocar bastante texto para ver o efeito, pelo que este pargrafo anormalmente grande, no sei se me ests a compreender... </p> <p style="text-align: center; font-family: courier; font-size: large;"> Ao centro, Courier e grande </p> <p style="text-align: right; font-family: sans-serif; font-size: x-large;"> direita, Sans-serif e enorme </p>

23

Apesar de ter usado as definies de estilo sempre em tags <p>, podes us-las onde quiseres, desde que faa sentido, como em tags <tr> e <td>, por exemplo. Tambm, se quiseres que uma grande poro de texto tenha um estilo definido, por exemplo, que todo o texto de um artigo seja justificado, podes inclu-lo dentro de um bloco <div style="text-align: justified"></div>. A tag <div> serve precisamente para definir um bloco na pgina.

Concluso

Com os conhecimentos abordados ao longo deste guia, deves poder desenrascar-te a fazer algumas pginas para publicao na Internet. No entanto, deves tentar aumentar os teus conhecimentos, para poderes fazer coisas realmente interessantes e bonitas, utilizando todas as caractersticas do HTML, incluindo a utilizao de formulrios. Para tal deixo aqui umas referncias para estudo futuro:
http://www.w3.org/MarkUp/ a casa da HTML na Web. http://www.w3.org/TR/html4/ a descrio completa da ltima verso de

HTML.
http://www.w3.org/TR/xhtml11/ a descrio da verso 1.1 da norma

XHTML.
http://www.w3.org/Style/CSS/ a pgina de referncia da CSS.

24