curso de html e introducao ao xhtml

ndice PARTE I HTML Bsico 1 Noes Bsicas ................................................................................................. 8 Sobre a "World Wide Web" ............................................................................... 8 O que preciso para criar pginas para a Web? ............................................. 9 A sua primeira pgina escrita em HTML ........................................................... 9 2 Elementos e atributos ....................................................................................... 11 Elementos ......................................................................................................... 11 Atributos ............................................................................................................ 13 3 Elementos bsicos da linguagem HTML ......................................................... 16 Cabealhos ....................................................................................................... 16 Pargrafos ......................................................................................................... 16 Quebras de linha ............................................................................................... 16 Comentrios ...................................................................................................... 17 Lista de elementos bsicos do HTML ............................................................... 17 Dicas ................................................................................................................. 21 Como ver o cdigo fonte de uma pgina HTML ............................................... 21 4 Formatao de texto ......................................................................................... 22 Elementos para formatao de texto ................................................................ 23 Elementos para o "output de cdigo de computador" ...................................... 23 Elementos para citaes e listas de definies ................................................ 23 5 Ligaes de HiperTexto ("links") ..................................................................... 28 O Elemento (ncora) e o atributo href ....................................................... 28 O atributo target ................................................................................................ 30 O atributo name ................................................................................................ 30 "Uniform Resource Locators" (URLs) ............................................................... 34 Ligaes em HTML ("links") .............................................................................. 34 Como se forma um URL ................................................................................... 34 Protocolos de acesso ....................................................................................... 35 6 Listas .................................................................................................................. 35 Listas No Ordenadas ...................................................................................... 35 Listas Ordenadas .............................................................................................. 36 Listas de Definies .......................................................................................... 36 Elementos para Listas ...................................................................................... 36 7 Imagens .............................................................................................................. 41 O elemento e o atributo src ................................................................... 41 O atributo alt ou title ......................................................................................... 43 Elementos relacionados com imagens ............................................................. 43 Fundos de pgina ............................................................................................. 48 O atributo bgcolor do elemento ........................................................... 49 O atributo background ...................................................................................... 49 Dicas ................................................................................................................. 49 8 Cores .................................................................................................................. 50 Formas de exprimir cores ................................................................................. 50 Nomes de cores ................................................................................................ 50

Curso de HTML 4.01 e Introduo ao XHTMLDesenvolvimento, aplicaes e referncias de acordo com as normas do W3C

3

Curso de HTML 4.01 e Introduo ao XHTML 1.0 Desenvolvimento, aplicaes e referncias de acordo com as normas do W3C

4

Cores seguras da Web ..................................................................................... 51 Formas de exprimir os valores das cores ......................................................... 53 Mais de 16 milhes de cores diferentes ........................................................... 55 Mais nomes de cores ........................................................................................ 55 9 As entidades de caracteres do HTML .............................................................. 60 Entidades de caracteres mais importantes ....................................................... 61 Inserir espaos sem quebras de linha .............................................................. 61 Entidades para caracteres do conjunto ASCII .................................................. 62 Entidades para caracteres do conjunto ISO 8859-1 ......................................... 62 Entidades no pertencentes ao conjunto ISO 8859-1 ...................................... 64 10 Tabelas ............................................................................................................. 65 Definir tabelas ................................................................................................... 67 O atributo border ............................................................................................... 68 Cabealhos numa tabela .................................................................................. 68 Clulas vazias numa tabela .............................................................................. 69 Elementos relativos a tabelas ........................................................................... 69 PARTE II HTML Avanado 11 Arranjo grfico das pginas ........................................................................... 79 12 Formatao com estilos CSS ......................................................................... 79 Com atuam os estilos? ...................................................................................... 79 Folha de estilos externa .................................................................................... 79 Folhas de estilos internas ................................................................................. 79 Estilos "inline" ................................................................................................... 80 Elementos para estilos ..................................................................................... 80 O Elemento ............................................................................................ 81 A forma correta de formatar, com estilos .......................................................... 82 13 Formulrios ...................................................................................................... 85 Criar um formulrio ........................................................................................... 85 Inputs ................................................................................................................ 85 Radio Buttons ................................................................................................... 85 Checkboxes ...................................................................................................... 86 O atributo action e o boto de submisso ........................................................ 86 Elementos para Formulrios ............................................................................. 86 14 Porqu usar HTML 4? ..................................................................................... 92 O HTML 3.2 criava muitos problemas! ............................................................. 92 O que que o HTML 4 veio resolver? .............................................................. 93 Escolha a DTD .................................................................................................. 93 Teste o seu HTML no validador do W3C .......................................................... 94 15 O cabealho de um documento HTML .......................................................... 94 O Elemento ........................................................................................... 94 Elementos de cabealho () ................................................................... 95 A declarao DOCTYPE ................................................................................... 96 O elemento .......................................................................................... 96 Valores desconhecidos para o atributo name ................................................... 97


5

16 Molduras ("frames") ........................................................................................ 98 Elementos para molduras ("frames") ................................................................ 102 17 Insero de scripts .......................................................................................... 105 Inserir um script numa pgina HTML ................................................................ 105 Como lidar com os browsers antigos ................................................................ 106 Elementos para inserir scripts e cdigo ............................................................ 107 PARTE III Referncia Rpida e Reviso 18 Exemplos rpidos de HTML 4.01 .................................................................... 109 19 Referncia rpida de HTML 4.01 ..................................................................... 111 Todos os elementos ordenados alfabeticamente ............................................. 111 20 Atributos especiais do HTML 4 ...................................................................... 113 Atributos nucleares ou intrnsecos ("Core Attributes") ...................................... 113 Atributos lingsticos ......................................................................................... 113 Atributos de teclado .......................................................................................... 113 Atributos de eventos do HTML 4 ....................................................................... 114 Eventos de janela .............................................................................................. 114 Eventos para formulrios .................................................................................. 114 Eventos de teclado ............................................................................................ 114 Eventos do mouse ............................................................................................ 114 21 O conjunto de caracteres ASCII de 7 bits ..................................................... 115 Caracteres ASCII imprimveis ........................................................................... 115 Caracteres de controle ASCII (no imprimveis) ............................................... 117 PARTE IV: Referncia de HTML 4 e XHTML 1

1. Introduo ...................................................................................................... 119 2. ..................................................................................... 119 3. ................................................................................................. 119 4. a ..................................................................................................................... 121 5. abbr ................................................................................................................ 123 6. acronym ......................................................................................................... 124 7. address .......................................................................................................... 125 8. applet ............................................................................................................. 125 9. area ................................................................................................................ 127 10. b ..................................................................................................................... 145 11. base ............................................................................................................... 129 12. basefont ......................................................................................................... 130 13. bdo ................................................................................................................. 131 14. big .................................................................................................................. 145 15. blockquote ...................................................................................................... 131 16. body ............................................................................................................... 132 17. br .................................................................................................................... 133 18. button ............................................................................................................. 134 19. caption ............................................................................................................ 135 20. center ............................................................................................................. 136 21. cite .................................................................................................................. 175


6

22. code ............................................................................................................... 175 23. col ................................................................................................................... 136 24. colgroup ......................................................................................................... 138 25. dd ................................................................................................................... 139 26. del .................................................................................................................. 140 27. dfn .................................................................................................................. 175 28. dir ................................................................................................................... 140 29. div ................................................................................................................... 141 30. dl .................................................................................................................... 142 31. dt .................................................................................................................... 143 32. em .................................................................................................................. 175 33. fieldset ............................................................................................................ 143 34. font ................................................................................................................. 144 35. form ................................................................................................................ 146 36. frame .............................................................................................................. 147 37. frameset ......................................................................................................... 149 38. head ............................................................................................................... 150 39. ... .................................................................................................... 150 40. hr .................................................................................................................... 151 41. html ................................................................................................................ 152 42. i ...................................................................................................................... 145 43. iframe ............................................................................................................. 153 44. img ................................................................................................................. 154 45. input ............................................................................................................... 156 46. ins ................................................................................................................... 158 47. kbd ................................................................................................................. 175 48. label ............................................................................................................... 159 49. legend ............................................................................................................ 160 50. li ..................................................................................................................... 161 51. link ................................................................................................................. 162 52. map ................................................................................................................ 164 53. menu .............................................................................................................. 165 54. meta ............................................................................................................... 166 55. noframes ........................................................................................................ 167 56. noscript .......................................................................................................... 168 57. object .............................................................................................................. 169 58. ol .................................................................................................................... 171 59. optgroup ......................................................................................................... 172 60. option ............................................................................................................. 172 61. p ..................................................................................................................... 173 62. param ............................................................................................................. 174 63. pre .................................................................................................................. 176 64. q ..................................................................................................................... 177 65. s ..................................................................................................................... 180 66. samp .............................................................................................................. 175 67. script ............................................................................................................... 177 68. select .............................................................................................................. 179 69. small ............................................................................................................... 145 70. span ............................................................................................................... 180 71. strike ............................................................................................................... 180 72. strong ............................................................................................................. 175 73. style ................................................................................................................ 181 74. sub ................................................................................................................. 182 75. sup ................................................................................................................. 182 76. table ............................................................................................................... 182


7

77. tbody .............................................................................................................. 184 78. td .................................................................................................................... 185 79. textarea .......................................................................................................... 187 80. tfoot ................................................................................................................ 188 81. th .................................................................................................................... 190 82. thead .............................................................................................................. 192 83. title .................................................................................................................. 193 84. tr ..................................................................................................................... 194 85. tt ..................................................................................................................... 145 86. u ..................................................................................................................... 195 87. ul .................................................................................................................... 195 88. var .................................................................................................................. 175


8

PARTE I: HTML Bsico

1. Noes Bsicas

1.1 Sobre a "World Wide Web" O que a World Wide Web? x A World Wide Web (WWW), designada habitualmente apenas por a Web,

formada por muitas redes de computadores ligadas entre si que se estendem por quase todo o mundo.

x Todos os computadores que esto ligados Web podem comunicar uns com os outros.

x A comunicao entre os computadores que esto na Web faz-se usando o protocolo padro HTTP ("HypertText Transfer Protocol,") que significa: Protocolo para a Transferncia de HiperTexto.

Como funciona a WWW? x Na Web a informao normalmente guardada em documentos designados

por pginas da Web. x As pginas da Web so constitudas por arquivos que esto guardados em

computadores designados por servidores da Web. x Os computadores usados para ler as pginas da Web so designados por

clientes da Web. x Os clientes da Web usam um software designado por Web browser (ou

navegador da Web) para apresentar as pginas graficamente. x Os browsers mais populares so o Microsoft Internet Explorer e o Netscape,

mas o Mozilla (do qual derivam as verses modernas do Netscape) revela muitas qualidades que j superam o MSIE. A verso 9 do browser Opera tambm revela qualidades que merecem a nossa ateno.

Como que o browser vai buscar as pginas? x O browser faz um pedido ao servidor da Web que guarda a pgina que quer

ver. x O pedido, que contm o endereo (URL) da pgina desejada, enviado

usando o protocolo padro HTTP. x O endereo (URL) tem um aspecto semelhante a este:

http://www.qualquersitio.com/pagina.html Como que o browser faz a apresentao das pginas? x As pginas contm instrues que descrevem a forma como devem ser

mostradas. x O browser l as instrues e usa-as para desenhar uma representao grfica

do contedo da pgina. x A forma usada para escrever essas instrues baseia-se na linguagem HTML.

Quem responsvel pela definio dos padres da Web?


9

x Os padres atuais da Web foram influenciados por aquilo que a Netscape e a Microsoft fizeram no passado com os seus Web browsers, mas atualmente a influncia destas entidades menor.

x O organismo que define as regras para a Web o World Wide Web Consortium (W3C), que conta com a participao ativa dos lderes da indstria e de meios acadmicos.

x O W3C define as especificaes tcnicas que formam os padres da Web. x Os padres mais importantes da Web so: HTML, CSS e XML. x O padro mais recente da famlia HTML o XHTML 2.0. Esta uma

reformulao da linguagem XHTML 2.0 baseada no HTML 4.01 que obedece aos requisitos do XML.

1.2 O que preciso para criar pginas para a Web? x Um editor de texto capaz x Um programa para manipular imagens x Web Browser x Idias e coisas para mostrar

1.3 A sua primeira pgina escrita em HTML

O acrnimo HTML significa HyperText Markup Language. Este nome significa que o HTML constitudo por um texto especial que habitualmente designado por hipertexto. O que que est dentro de um arquivo HTML? x Um arquivo HTML constitudo por um texto que define os elementos da

linguagem HTML usando "etiquetas de markup". x As etiquetas de markup do instrues ao browser sobre a estrutura do

documento e sobre forma como a pgina deve ser apresentada graficamente. x Os arquivos HTML podem ser escritos usando um simples editor de texto e os

seus nomes devem ter a extenso .html ou .htm. Experimente voc mesmo

Usando o seu editor de texto preferido crie um novo arquivo e escreva nele o texto seguinte: Ttulo da pgina Esta a minha primeira pgina da Web. Este texto est em negrito

Salve o arquivo com o nome "pagina.html".

Abra o documento "pagina.html" no local em que voc salvou o arquivo e observe o resultado:


10

Explicao do Exemplo

A primeira etiqueta que encontramos no documento anterior . Ela define o elemento raiz do documento, que aquele que contm toda a definio da pgina. Esta etiqueta diz ao browser para iniciar um novo documento HTML cujo contedo se encontra definido entre esse local e a etiqueta de fim (ou de finalizao), que . Esta etiqueta de fim marca o fim do documento (pgina).

O texto contido entre as etiquetas e define o cabealho do documento. Esta informao no apresentada graficamente, mas d indicaes importantes a respeito daquilo que a pgina contm e sobre a forma como ela deve ser apresentada graficamente.

O texto contido no elemento define o ttulo do documento. Repare que o seu sistema operacional d janela do browser um nome em que entra este ttulo.

O texto contido no elemento define tudo aquilo que o browser deve apresentar graficamente. O corpo da pgina ("body") constitudo por tudo o que se encontra entre e .

O texto contido entre as etiquetas e ser apresentado em negrito. Devemos usar a extenso .htm ou .html?

Os nomes dos arquivos escritos em HTML devem ter a extenso .html, mas a extenso .htm ainda usada. Este fato uma herana dos tempos (pr-histricos no que diz respeito Internet) do MS DOS e do Windows 3.11 de 16 bits, em que os nomes dos arquivos tinham no mximo 8 caracteres e as suas extenses no podiam ter mais de 3 caracteres.

Essas deficincias, que no passado obrigaram a usar a extenso .htm em vez de .html, j foram eliminadas. Por isso devemos usar a extenso .html, a no ser que exista uma boa razo para usar .htm (pouco provvel). Editores Especializados em HTML

Muita gente acha que a forma mais fcil de criar e editar arquivos HTML consiste em usar um editor do tipo "what you see is what you get" ou em uma traduo ao p da letra o que voc v o que voc comea (WYSIWYG) como o Macromedia


11

Dreamweaver MX, o Adobe GoLive ou o Microsoft FrontPage 2003. Estes editores WYSIWYG permitem criar as pginas num ambiente grfico sem que o usurio precise conhecer a linguagem HTML. No entanto, estas aplicaes apresentam diversas deficincias na qualidade do HTML que produzem. Apesar de as verses mais recentes produzirem cdigo de melhor qualidade, elas ainda esto muito longe da perfeio, o que obriga os usurios a editar manualmente partes do HTML produzido para corrigir os erros criados. Se no quiser desistir de usar a sua aplicao preferida, mas quer produzir bom HTML ento ter de ser capaz de corrigir o cdigo que ela produz de forma deficiente.

O melhor uso que se pode dar a um editor WYSIWYG consiste em us-lo para acelerar o desenvolvimento das pginas e sempre que necessrio ir ao cdigo fonte para fazer as otimizaes necessrias. Se o seu objetivo adquirir conhecimentos que lhe permitam criar pginas para a Web de forma competente, ento deve aprender HTML usando um editor de texto e s depois comear a usar um editor especializado em HTML. Editores de texto simples

Muita gente usa o editor de texto notepad (Bloco de Notas) para editar as suas pginas HTML. Isto acontece porque este editor de texto est presente em todas as mquinas Windows. Muitos consideram este editor fraco por no apresentar uma boa interface ou por no destacar trecos de cdigos que facilitem a localizao entre as linhas. No entanto para quem adotar essa mesma idia, atualmente o mercado oferece boas alternativas de softwares para edio HTML, um deles o PHP Editor que oferece suporte tanto a HTML quanto ao PHP, com esquema de cores, e algumas formataes pr-definidas.

2. Elementos e atributos 2.1 Elementos

Os documentos HTML so simples arquivos de texto que contm "etiquetas de markup". Estas etiquetas definem os elementos da linguagem HTML e os seus contedos. A lista seguinte indica algumas das suas caractersticas: x As "etiquetas de markup" do HTML so usadas para definir os elementos.


12

x As etiquetas do HTML escrevem-se usando os caracteres < e >, envolvendo o nome do elemento e os seus atributos.

x Em regra, as etiquetas do HTML aparecem em pares, como em e . x A primeira etiqueta do par a etiqueta de incio (ou de abertura) e a segunda

etiqueta do par a etiqueta de fim (ou de finalizao). x Tudo o que se encontrar entre as etiquetas de incio e de fim faz parte do

contedo do elemento. x Em HTML as etiquetas podem ser escritas com letra maiscula ou com letra

minscula, ou seja, o html no sensitive case. Os resultados so os mesmos porque os nomes dos elementos no dependem do tipo de letra. As etiquetas e representam o mesmo elemento.

x Em XHTML as etiquetas devem ser escritas sempre com letra pequena. Em XHTML as etiquetas e no representam o mesmo elemento.

Relembremos agora o exemplo apresentado antes:

Ttulo da pgina Esta a minha primeira pgina da Web. Este texto est em negrito

O fragmento apresentado a seguir um elemento da linguagem HTML:

Este texto est em negrito

Repare nos aspectos seguintes deste fragmento: x O elemento comea com a etiqueta de incio (ou abertura): x O contedo do elemento apenas texto ("Este texto est em negrito") x O elemento termina com a etiqueta de fim (ou de finalizao):

A etiqueta serve para definir o elemento do HTML que provoca a escrita do

texto em negrito. Um exemplo mais complexo

O fragmento seguinte tambm um elemento do HTML: Esta a minha primeira pgina da Web. Este texto est em negrito

O elemento principal deste fragmento inicia-se com a etiqueta , e termina com a etiqueta .

A etiqueta serve para definir o elemento que contm tudo aquilo que vai ser apresentado graficamente na janela do browser. Ele contm o corpo ("body") do documento HTML. Porque que se recomenda a escrita das etiquetas com letra minscula?


13

Como se disse antes, em HTML os nomes dos elementos podem ser escritos tanto com letra maiscula como com letra minscula: significa o mesmo que . Se voc buscar mais tutoriais de HTML na Web, vai reparar que os mais antigos usam quase sempre letra maiscula para escrever os nomes dos elementos, mas os mais modernos usam exclusivamente letra minscula. Aqui usaremos sempre letra minscula porque existe uma razo muito forte para isso.

A nova gerao do HTML uma aplicao do XML e designa-se por XHTML. O XHTML a melhor linguagem para criar pginas para a Web, mas mais restritiva do que o HTML (rouba algumas das liberdades que o HTML oferece.) Contrariamente ao que acontece em HTML, em XML as etiquetas e representam coisas diferentes, pois em XHTML adotou-se uma conveno segundo a qual todas as etiquetas devem ser escritas com letra minscula. Por este motivo conveniente que escreva todas as etiquetas com letra minscula. Deste modo no s adquirir bons hbitos, como ter muito pouco (quase nenhum) trabalho quando precisar converter as suas pginas de HTML para XHTML. 2.2 Atributos

A etiqueta define o corpo ("body") de uma pgina HTML. No exemplo seguinte adicionamos o atributo bgcolor (que significa "background color", ou cor de fundo) para indicarmos que queremos que a pgina seja pintada com a cor de fundo vermelha: Esta a minha primeira pgina da Web. Este texto est em negrito

Consideremos agora a etiqueta , que define um elemento de tabela. Ao juntarmos o atributo border (que significa fronteira, ou limites) com o valor apresentado a seguir estamos dizendo ao browser para no desenhar os limites da tabela ( indica uma espessura nula para a linha de contorno da tabela):


14

Esta a minha primeira tabela.

J no exemplo seguinte ns dizemos ao browser para desenhar uma linha de contorno com espessura 2 (border="2"). Esta a minha segunda tabela.

Como acabou de ver os atributos aparecem sempre em pares nome/valor,

assim: nome="valor".


15

Nota: Os atributos s podem aparecer nas etiquetas de incio. proibido colocar atributos nas etiquetas de finalizao.

Nota: Para assegurar a compatibilidade com o XHTML use letra minscula para escrever os nomes dos atributos e coloque os valores entre aspas. Devemos usar aspas ou apstrofos (escrevemos "texto" ou 'texto')?

Pelos motivos que acabamos de ver, os valores dos atributos devem ser sempre colocados entre aspas. Normalmente usam-se aspas normais ("), mas os apstrofos (') tambm so permitidos. No entanto, provvel que ao misturarmos cdigo PHP ou JavaScript estrutura HTML ocorra enganos quanto sintaxe utilizada.

Em certos casos, o valor do atributo contm o prprio caractere aspas. Numa situao dessas devemos usar apstrofos (que aqui funcionam como aspas simples) para colocar em torno do valor do atributo, assim: alt='Ele disse: "No!"'

Se preferirmos usar apstrofos devemos escrever assim: alt="Ele disse: 'No!'" 3. Elementos bsicos da linguagem HTML

Algumas das etiquetas mais importantes em HTML so aquelas que definem cabealhos de seo, pargrafos, divises e quebras de linha.

Para aprofundarmos este tema vamos ver e executar um exemplo muito simples que demonstra a forma como o texto dentro de um elemento (pargrafo) apresentado pelo browser: Exemplo Isto um pargrafo. Isto outro pargrafo. Os pargrafos definem-se com o elemento


16

Nota: A iniciativa da Web Semntica d muita importncia aos elementos que vamos estudar nesta pgina e nas pginas seguintes. O uso correto destes elementos permite melhorar muito as potencialidades da Web como meio de publicao. 3.1 Cabealhos

Os cabealhos (de captulo ou de seo) definem-se com as etiquetas .... define o cabealho mais importante (maior) e define o menos importante (menor). Isto um cabealho Isto um cabealho Isto um cabealho Isto um cabealho Isto um cabealho Isto um cabealho

O HTML adiciona de forma automtica uma linha em branco antes e depois de um cabealho. 3.2 Pargrafos

Os pargrafos definem-se com a etiqueta . Isto um pargrafo Isto outro pargrafo

O HTML adiciona de forma automtica uma linha em branco antes e depois de um pargrafo. 3.3 Quebras de linha

A etiqueta usa-se para terminar uma linha sem iniciar um novo pargrafo. Esta etiqueta (, ou "line break") provoca uma mudana de linha forada no local em que aparece. Isto um par-grafo com quebras de linha


17

O exerccio seguinte d uma oportunidade para experimentar: Exemplo Isto um par-grafo com quebras de linha

A etiqueta uma etiqueta vazia. Ela no pode ter qualquer contedo e no tem etiqueta de fim (finalizao). 3.4 Comentrios

As etiquetas de comentrio so especiais porque no se escrevem da mesma forma que as etiquetas que representam elementos normais. Os comentrios servem para dizer ao browser que o seu contedo um comentrio e no pode ser apresentado graficamente. Usa-se essas etiquetas para fazer anotaes que explicam a forma como o cdigo fonte est feito para que mais tarde consigamos compreender aquilo que fizemos antes. O exemplo seguinte mostra um comentrio

Repare que o fato de termos um ponto de exclamao no incio diz ao browser que esta uma etiqueta especial, a qual no representa um elemento normal da linguagem HTML. 3.5 Lista de elementos bsicos do HTML Elemento Descrio Elemento que contm todas as definies da pgina HTML Elemento que contm o corpo ("body") da pgina ...

Define cabealhos desde o nvel 1 (mais importante) at ao nvel 6 (menos importante)

Define um pargrafo


18

Provoca uma mudana de linha forada Insere uma linha horizontal Insere um comentrio no cdigo fonte Exemplos de Aplicao Mais pargrafos Exemplo No cdigo fonte este pargrafo tem trs linhas, mas o browser ignora isso e pode apresentar outro nmero. No cdigo fonte o texto deste pargrafo tem vrios espaos seguidos, mas o browser trata-os como se eles formassem um nico espao. O nmero de linhas de um pargrafo depende do tamanho da janela do browser. Ao alterar a largura desta provocar alteraes no nmero de linhas

Elementos de cabealho Exemplo Isto um cabealho de nvel 1 Isto um cabealho de nvel 2


19

Isto um cabealho de nvel 3 Isto um cabealho de nvel 4 Isto um cabealho de nvel 5 Isto um cabealho de nvel 6 Os elementos h1-h6 devem ser usados apenas para escrever cabealhos. No os use para outros fins. Existem outros elementos concebidos especificamente para outras finalidades.

Cabealho alinhado ao centro Exemplo Este um cabealho de nvel 1 Este cabealho mostrado mais acima est alinhado ao centro da pgina.


20

Inserir uma linha horizontal Exemplo O elemento hr desenha uma linha horizontal: Isto um pargrafo Isto um pargrafo Isto um pargrafo

Comentrios no cdigo fonte de uma pgina HTML Isto um pargrafo normal


21

Utilizando uma cor de fundo Exemplo Um fundo colorido

3.6 Dicas

Se voc executou os exemplos de aplicao listados mais acima provavelmente deparou com alguns comportamentos inesperados. As dicas seguintes chamam a ateno para alguns deles.

1) Quando escrevemos pginas em HTML devemos ter sempre ateno ao fato de elas poderem ser apresentadas de forma diferente em browsers diferentes ou em mquinas diferentes. O aspecto grfico de uma pgina pode diferir entre mquinas ou entre browsers! Isso se deve no s a diferenas nos sistemas, mas tambm ao fato


22

de os usurios poderem ter monitores de tamanhos diferentes e de poderem redimensionar a janela do browser para o tamanho que preferirem.

2) As diferenas nos tamanhos das janelas dos browsers fazem com que o nmero de caracteres que cabem numa linha varie muito. Por esse motivo no seremos capazes de controlar nem o nmero de linhas nem os locais em que acontecem as mudanas de linha. Nunca tente formatar o texto inserindo espaos ou linhas vazias pois os resultados possveis podem no ser aqueles que pretende obter!

3) Quando encontra dois ou mais espaos seguidos, o HTML trata-os como se fossem um nico espao. Quando escreve uma seqncia de espaos seguidos o resultado o mesmo de escrever um nico espao. Em HTML as teclas Tab e Enter equivalem a um espao.

4) Sempre que quiser inserir linhas em branco use o elemento . H quem use pargrafos vazios para obter o mesmo resultado, mas isso est errado. O elemento deve ser usado apenas para definir pargrafos e o elemento no deve ser usado para fins como criar listas por exemplo. Existem elementos concebidos especificamente para isso. Sempre que precisar obter uma formatao especial deve usar o elemento que foi criado para esse efeito.

5) Em muitas pginas os pargrafos esto escritos sem a etiqueta de finalizao (.) Apesar de os browsers aceitarem essa omisso tenha sempre o cuidado de fechar todas os elementos que requerem uma etiqueta de finalizao. Se tentar validar uma pgina que contenha estes erros ver que ela no passar no teste de validao.

6) Aos elementos e ... o browser adiciona automaticamente uma linha em branco antes do incio e outra depois do fim. 3.7 Como ver o cdigo fonte de uma pgina HTML

Voc alguma vez olhou para uma pgina da Web e se perguntou sobre a forma com que as instrues do origem ao que exibido na tela do seu computador?

Se estiver usando o Internet Explorer, Netscape, Mozilla ou outro browser e quer descobrir, ento v ao menu "Exibir" (ou "View") e escolha a opo "Exibir Cdigo Fonte". Tanto no Netscape, no Internet Explorer ou no Mozilla voc pode clicar com o boto inverso sobre a pgina e escolher a opo "Cdigo Fonte" ou "View Page Source." Depois de realizar esta ao ir abrir uma nova janela contendo o cdigo fonte da pgina que est sendo apresentado pelo browser.

No desanime se o aspecto do cdigo fonte lhe parecer assustador. Se for esse o caso pode estar certo que a pgina que est visualizando foi escrita por um programa de software ou ento o cdigo foi propositadamente "desarranjado" para confundir os "espies. Como ter oportunidade de ver ao longo deste curso, o cdigo HTML bem escrito mo muito mais fcil de ler, mas h muita gente que o complica de propsito s para confundir. 4. Formatao de texto

A linguagem HTML define vrios elementos para formatar texto, como, por exemplo, escrever em negrito, itlico, ou sublinhado. O exemplo seguinte d uma oportunidade para experimentar alguns deles:


23

Este exemplo tem texto em itlico, negrito, enfatizado, sublinhado e tipo cdigo de computador.

4.1 Elementos para formatao de texto Elemento Descrio Define texto escrito em negrito Define texto com letra maior Define texto enfatizado (escreve-se com caracteres itlicos) Define texto escrito com caracteres itlicos Define texto com letra menor Define texto forte (escreve-se em negrito) Texto subscrito (alinhado um pouco mais abaixo) Texto sobrescrito (alinhado um pouco mais acima) Texto sublinhado 4.2 Elementos para o "output de cdigo de computador" Elemento Descrio Define texto que cdigo de computador Texto inserido com o teclado Amostra de cdigo de computador "Teletype text" (imita a letra de uma mquina de escrever antiga) Texto que representa uma varivel Texto pr-formatado 4.3 Elementos para citaes e listas de definies Elemento Descrio Define uma abreviao Define um acrnimo


4

Define um endereo (postal) Define a direo de escrita do texto Citao longa Citao curta Citao Apresenta a definio de um termo Exemplos de Aplicao Formatao de Texto Exemplo Isto texto em negrito Isto texto forte Isto texto maior Isto texto enfatizado Isto texto itlico Isto texto mais pequeno Este texto contm uma parte alinhada mais abaixo Este texto contm uma parte alinhada mais acima

Texto pr-formatado (controla rigorosamente as mudanas de linha e a insero de espaos) Exemplo Isto texto pr formatado. ele preserva os espaos e as quebras de linha.

2


25

O elemento pre til para representar cdigo de computador: for(var i = 0; i< 20; i++) document.write(i);

Diversos elementos para mostrar cdigo de computador Exemplo Cdigo de computador Keyboard input Teletype text Amostra de texto Varivel de cdigo de computador Nota: Estes elementos so normalmente usados para apresentar texto que cdigo de computador


26

Inserir um endereo Exemplo Robin dos Bosques Clareira dos Cucos Floresta de Sherwood Nottingham

Abreviaes e acrnimos Exemplo UN WWW O atributo "title" deve ser usado para dar a conhecer o significado do acrnimo ou da abreviao. O seu contedo mostrado quando o ponteiro do mouse pra sobre o elemento (Algumas verses do MSIE no respeitam as normas e s fazem isto com o elemento )


27

Citaes extensas e curtas Exemplo Aqui temos uma citao longa: Isto uma citao extensa. Ou pelo menos devia ser. Aqui temos uma citao curta: Esta mesmo curta. Nota: O elemento insere automaticamente margens e quebras de linha. J o elemento no produz nada de especial para alm de colocar o texto entre aspas.

Como indicar texto que foi apagado e texto que foi inserido em substituio


28

Exemplo Um quarteiro so 12 25 unidades. Nota: A maioria dos browsers escreve um trao horizontal a meia altura sobre o texto apagado e sublinha o texto inserido, mas alguns browsers antigos podem apresentar o texto apenas como texto normal.

5. Ligaes de HiperTexto ("links")

O HTML usa ligaes de hipertexto ("hyperlinks") para ligar as pginas da Web umas s outras.

5.1 O Elemento (ncora) e o atributo href

O elemento serve para criar uma ligao ("link") para outro documento. A ligao pode apontar para qualquer recurso disponvel na Web: uma pgina escrita em HTML, uma imagem, um arquivo de som, um filme, etc. Sintaxe para criar uma ncora: Texto a mostrar

O atributo href contm o endereo (URL) do recurso ao qual se faz a ligao. Aquilo que est dentro do elemento constitui o material visvel sobre o qual se deve clicar para ligar ao recurso.

A ligao seguinte define uma ligao para o stio do W3C: Stio do World Wide Web Consortium


29

A linha mais acima tem o seguinte aspecto no seu browser:

Site do World Wide Web Consortium Exemplos de Aplicao Como inserir ligaes (links) Exemplo Isto uma ligao para outra pgina deste website. Isto outra ligao, mas para outro website

Colocar uma ligao sobre uma imagem Exemplo Uma imagem com uma ligao ("link"):


30

5.2 O atributo target

O atributo target permite abrir a ligao numa janela ou moldura ("frame") diferente daquela em que foi feito o clique.

A linha mais abaixo vai abrir o documento numa nova janela do browser: World Wide Web Consortium 5.3 O atributo name

O atributo name usa-se para dar um nome nico ncora. Este nome serve para marcar o lugar em que a ncora se encontra e tornar possvel saltar diretamente para esse local a partir de outros documentos ou de outros pontos do mesmo documento sem que o usurio tenha de se deslocar na pgina.

Mais abaixo temos a sintaxe de uma ncora que recebeu um nome: Texto a mostrar

O atributo name d um nome nico ao local em que se encontra a ncora. Esse nome pode ser um texto sua escolha e no deve ser repetido em nenhuma outra ncora que esteja no mesmo documento.

A linha seguinte define uma ncora com um nome: Tabela de Contedos

Nota: uma ncora com atributo name no pode ter atributo href. Por isso ela no sensvel a cliques. Ela serve apenas para marcar um local do documento para o qual podem apontar outras ligaes.

Depois de darmos um nome a um local do documento podemos ligar diretamente a ele. Continuando com o ltimo exemplo que vimos podemos ligar seo "Tabela de Contedos" usando uma ligao como esta: Ir para a tabela de contedos da especificao HTML 4.01


31

Se a tabela de contedos a que queremos ligar estiver na pgina cujo URL http://www.w3.org/TR/1999/REC-html401-19991224/cover.html basta escrever esta ligao: Ir para a tabela de contedos da especificao HTML 4.01 Dicas

As ncoras com nomes so freqentemente usadas para criar "tabelas de contedos" no incio de um documento extenso (a pgina do W3C indicada no exemplo anterior antes um bom exemplo disto.) Cada captulo dentro do documento recebe uma ncora com um nome, e as ligaes presentes na tabela de contedos referem-se a esses nomes para saltar para a seo ou captulo pretendidos.

Quando o browser recebe um clique para um local que devia conter uma ncora com um nome, mas no consegue encontrar a ncora indicada, ento salta para o topo do documento. Isto no gera qualquer erro. Elementos para fazer ligaes Elemento Descrio Define uma ncora ou uma ligao de hipertexto Exemplos de Aplicao Abrir uma pgina numa nova janela do browser Exemplo Saltar para a pgina de teste Se colocar o valor "_blank" no atributo target a ligao ser aberta numa nova janela do browser.


32

Saltar para um outro local dentro da mesma pgina Exemplo Veja tambm o Captulo 3 Manual de Iniciao Tortura Chinesa Captulo 1 Neste captulo vamos descrever as qualidades necessrias para poder tornar-se num Tcnico Superior de Tortura Chinesa. Esta nobre arte, desenvolvida ao longo de muitos sculos por grandes mestres da cultura oriental, assenta numa filosofia de respeito pelos valores da tolerncia e amor pelo prximo. Captulo 2 Para desenvolver as aptides necessrias a um bom exerccio desta nobre arte voc precisa de arranjar um espao fsico para instalar o seu laboratrio. Esta escolha uma das decises mais importantes para o sucesso das suas inciativas de tortura chinesa. Captulo 3 Agora chegado o momento de recrutar alguns colaboradores e testar os conhecimentos j adquiridos. Comece por tentar persuadir algumas pessoas de quem goste menos para participarem nas suas sesses de iniciao tortura chinesa na qualidade de vtimas indefesas. No caso de elas se mostrarem reticentes ser obrigado a nome-los como voluntrios fora, o que j ser um excelente exerccio de iniciao.


33

Como libertar uma pgina que est dentro de uma subjanela ("frame") Exemplo Esta pgina est dentro de uma moldura ("frame")? Clique aqui para sair dele!

Como fazer uma ligao para enviar e-mail Exemplo Ligao: Enviar e-mail


34

"Uniform Resource Locators" (URLs) 5.4 Ligaes em HTML ("links")

Em uma Pgina, existe um elemento que contm informao sobre o local da Web onde se encontra a pgina que vai ser mostrada a seguir. Essa informao o endereo (URL) da nova pgina e est contida no atributo href, assim: Uma Pgina.

O caminho para a ligao que tem escrito "Uma pgina", apresentada antes, uma ligao relativa. Isto significa que o browser constri o endereo da nova pgina baseando-se no endereo da pgina atual. 5.5 Como se forma um URL

O conceito de Uniform Resource Locator (URL) est na base da forma como so localizados os recursos da Web. Para acessarmos um recurso precisamos saber como encontr-lo. A informao que nos permite encontr-lo est contida no seu URL.

Um URL completo (absoluto) contm o endereo completo, que comea sempre pelo protocolo (que quase sempre http://), mas tambm podemos usar URLs relativos. Sempre que se encontra um link em que o atributo href no comea por http:// o browser trata-o como um URL relativo. Isto significa que o browser calcula o novo endereo (URL) a partir do servidor e da pasta em que se encontra a pgina que est a mostrar. H uma exceo a esta regra: quando se usa o elemento no cabealho head, os URLs relativos so calculados a partir do endereo indicado no atributo href desse elemento:

Um URL composto pelas seguintes partes: protocolo://subdominio.dominio: porta/pasta/arquivo

O protocolo quase sempre http, mas tambm pode ser ftp ou outro que seja adequado.

O domnio uma identificao nica para o website ou a rede onde est o recurso. Por exemplo, o domnio atribudo ao World Wide Web Consortium w3c.org

O subdomnio representa normalmente uma subrede dentro de uma rede maior, mas as coisas podem ser mais complexas do que isso. Para aquilo que nos interessa podemos considerar que se trata de uma identificao dada a uma parte do domnio que passa a ter um nome que permite distingui-la das restantes. Nos primeiros tempos da Web usava-se sempre o subdomnio www para identificar a parte da rede pertencente ao servidor da Web, mas hoje freqente no encontrar subdomnio nenhum e subdomnios com nomes diferentes (como por exemplo http://yahoo.com, ou http://msdn.microsoft.com).

A porta utilizada para acessar o servidor representada por um nmero: o nmero de porta. O software do servidor escuta apenas os pedidos que so feitos atravs de uma determinada porta. Os servidores da Web em regra escutam a porta nmero 80. Como o valor deste parmetro por omisso 80 ns no precisamos de escrev-lo porque ele acrescentado automaticamente. Se o servidor escutar uma


35

porta diferente ento temos de escrever o seu nmero para que ele oua os nossos pedidos.

O parmetro da pasta indica diretrio do servidor dentro da qual se encontra o recurso a que queremos acessar. Se no escrevermos nenhum valor para este parmetro o servidor procura o arquivo no diretrio raiz do website.

O parmetro arquivo contm o nome do arquivo a que queremos acessar. Se no escrevermos nada o servidor insere um valor por omisso, que normalmente index (ou default nos servidores da Microsoft) e apresenta-nos essa pgina. 5.6 Protocolos de acesso

Alguns dos protocolos mais usados para acessar aos recursos da Internet so: Fazer um download por FTP

O seguinte cdigo HTML cria uma ligao para um arquivo acessvel por ftp (a ligao que mostramos fictcia e no funciona!). Download de Arquivo Abrir o Programa de E-mail

O seguinte cdigo HTML cria uma ligao que faz abrir o seu programa de e-mail, normalmente o outllook, com o e-mail do destinatrio j escrito. [email protected] 6. Listas

A linguagem HTML contm elementos que permitem criar listas de definies, listas ordenadas e listas no ordenadas. 6.1 Listas No Ordenadas

Uma lista no ordenada contm vrios itens marcados todos com o mesmo smbolo (normalmente um crculo pequeno ou um quadrado pequeno).

Para criar uma lista no ordenada usa-se o elemento ("unordered list") Dentro desse elemento os vrios itens so criados com o elemento ("list item.") O exemplo seguinte mostra uma lista simples: Rum Bagao

Este o aspecto com que fica no seu browser: x Rum x Bagao

Dentro de uma lista no ordenada podemos colocar pargrafos, quebras de

linha, imagens, outras listas, etc.


36

6.2 Listas Ordenadas

Uma lista ordenada contm vrios itens numerados e criada com o elemento ("ordered list"). Os itens da lista definem-se com o elemento ("list item"). Rum Bagao

Este o aspecto com que fica no seu browser:

1. Rum 2. Bagao

Dentro de uma lista ordenada podemos colocar pargrafos, quebras de linha,

imagens, outras listas, etc. 6.3 Listas de Definies

Uma lista de definies no constituda por uma srie de itens mas sim por vrios termos acompanhados de descries dos seus significados.

As listas de definies criam-se com o elemento ("definition list"). O nome de cada termo fica dentro de um elemento ("definition term") e a sua descrio fica num elemento ("definition description"). Rum Bebida espirituosa muito apreciada pelos piratas das Carabas Bagao Bebida com elevado contedo alcolico. A sabedoria popular atribui-lhe fortes propriedades teraputicas.

Este o aspecto com que fica no seu browser: Rum

Bebida espirituosa muito apreciada pelos piratas das Carabas Bagao

Bebida com elevado contedo alcolico. A sabedoria popular reconhece-lhe fortes propriedades teraputicas.

Dentro de um elemento podemos colocar pargrafos, quebras de linha, imagens, outras listas, etc. 6.4 Elementos para Listas Elemento Descrio Define uma lista ordenada Define uma lista no ordenada Insere um item na lista Insere uma lista de definies Apresenta a definio de um termo Insere a definio de um termo


37

Exemplos de Aplicao Uma lista ordenada Exemplo Uma lista ordenada: Rum gua do Luso Bagaceira

Diferentes tipos de listas ordenadas Exemplo Lista Ordenada com nmeros: Espinafres Ervilhas Cenouras Alfaces Lista Ordenada com letras maisculas: Espinafres Ervilhas Cenouras Alfaces Lista Ordenada com letras minsculas: Espinafres


38

Ervilhas Cenouras Alfaces Lista Ordenada com nmeros romanos (maisculas): Espinafres Ervilhas Cenouras Alfaces Lista Ordenada com nmeros romanos (minsculas): Espinafres Ervilhas Cenouras Alfaces

Diferentes tipos de listas no ordenadas Exemplo Lista com discos como marca:


39

Bagaceira Aguardente de Medronho Cachaa Ginja com Elas Lista com anis como marca: Bagaceira Aguardente de Medronho Cachaa Ginja com Elas Lista com quadrados como marca: Bagaceira Aguardente de Medronho Cachaa Ginja com Elas

Listas encaixadas Exemplo Listas encaixadas:


40

Bagao Bebidas de menina Chazinho Leitinho Rum Cachaa

Uma lista de definies Exemplo Uma Lista de Definies: Rum Bebida com alto teor alcolico. Revigorante poderoso para quem sofre de fraqueza fsica. gua das pedras Bebida para senhoras e meninos fracos. Bagao Bebida para Homens e Mulheres de barba.


41

7. Imagens

O HTML torna muito fcil a tarefa de mostrar imagens dentro de um documento. 7.1 O elemento e o atributo src

A insero de imagens num documento se faz com o elemento . Este elemento tem contedo vazio, o que significa que ele apenas possui atributos e no tem etiqueta de finalizao.

A escolha da imagem para mostrar na pgina se faz atravs do atributo src (que uma abreviao de "source", ou origem) o qual indica o nome e o local em que pode ser encontrado o arquivo que contm a imagem.

O exemplo seguinte ilustra o uso deste elemento:

A forma genrica mais simples deste elemento a seguinte:


42

A URL aponta para o local onde se encontra o arquivo que contm a imagem. Por exemplo, se quisermos mostrar o cone que aparece no incio de cada pgina do W3C devemos usar o URL: http://www.w3.org/Icons/WWW/w3c_home

A imagem ser desenhada no local que corresponde ao elemento dentro do documento HTML. 7.2 O atributo alt ou title

Os atributos alt e title usam-se para definir "texto alternativo" imagem. Este texto ser mostrado em vez da imagem no caso de o browser no conseguir apresent-la, e usa-se assim: importante ressaltar a diferena entre alt e tile. O atributo alt funciona somente no Internet Explorer, j o atributo title usado no Mozilla. Para evitar problemas com a utilizao desses atributos, utilize-os juntamente como no exemplo:

Os atributos alt e title devem conter uma descrio daquilo que a imagem contm para que seja possvel compreender o seu contedo mesmo sem a ver. A utilizao dos atributos alt e title recomendada porque melhora a acessibilidade das pginas. Este atributo pode ser lido em voz alta pelo software de leitura utilizado pelas pessoas que tm deficincias visuais. Nesses casos, sem os atributos alt e title o contedo das imagens seria sempre um mistrio.

Nota: Ao utilizar imagens tenha em mente que elas podem aumentar consideravelmente o tempo que preciso esperar para ver os contedos das suas pginas: Por isso, use-as com cuidado! 7.3 Elementos relacionados com imagens Elemento Descrio Insere uma imagem Define um mapa sobre uma imagem ("image map") Define uma rea clicvel sobre um mapa de imagem Exemplos de Aplicao Como inserir imagens Exemplo Uma imagem em formato gif: Uma imagem em formato jpg:


43

"praia.jpg"> Repare que em ambos os casos a imagem inserida do mesmo modo.

Utilizando uma imagem de fundo Exemplo Uma imagem de fundo Os fundos de imagem tanto podem ser criados com imagens do tipo jpg como gif ou png. Se a imagem de fundo tiver dimenses inferiores s da janela do browser ela ser repetida (formando um mosaico) at preencher todo o fundo da pgina.


44

Como alinhar uma imagem com o texto Exemplo Uma imagem misturada com texto Uma imagem misturada com texto Uma imagem misturada com texto Nota: O valor do alinhamento por omisso align="bottom" Uma imagem misturada com texto Uma imagem antes do texto Uma imagem depois do texto


45

Como fazer com que uma imagem flutue esquerda ou direita de um pargrafo Exemplo Aqui temos um pargrafo com uma imagem. O atributo align tem o valor "left", deste modo, a imagem deve flutar esquerda do texto. Aqui temos um pargrafo com uma imagem. O atributo align tem o valor "right", deste modo, a imagem deve flutar direita do texto.

Como ajustar o tamanho de uma imagem Exemplo Nota: Para alterar o tamanho de uma imagem utilize os atributos "height" (altura) e "width" (largura).


46

Como juntar texto alternativo (visvel quando no possvel mostrar a imagem) Exemplo O web browser no consegue encontrar a imagem "magoo.fif". Por isso escreve o texto alternativo dado atravs do atributo alt.

Colocar uma ligao sobre uma imagem Exemplo


47

Uma imagem com uma ligao ("link"):

Crie um mapa sobre uma imagem com diferentes reas sensveis a cliques Exemplo Clique sobre a rea 1. Nota: O atributo "usemap" utilizado com o elemento img refere-se ao atributo "id" ou ao atributo "name" (depende do browser) existente num elemento map. Por isso temos, se queremos garantir a compatibilidade da pgina com todos os browsers, devemos aplicar ambos os atributos ("id" e "name") ao elemento .


48

Fundos de pgina

Uma cor ou uma imagem de fundo bem escolhidos podem melhorar o aspecto da pgina, mas uma m escolha capaz de causar danos muito graves na legibilidade e no aspecto geral. Uma boa escolha para as cores de fundo e do texto Exemplo Neste exemplo a cor escolhida para o fundo adequada porque permite ler o texto com facilidade.

Uma m escolha para as cores de fundo e do texto Exemplo Neste exemplo a cor escolhida para o fundo desadequada porque no permite ler o texto com facilidade.


49

7.4 O atributo bgcolor do elemento

O elemento possui atributos que nos permite especificar as cores do texto e a cor de fundo. Tambm podemos usar uma imagem como padro de fundo.

O atributo bgcolor nos permite escolher a cor de fundo da pgina. O quadro seguinte mostra trs formas de indicar a cor de fundo da pgina usando um cdigo de cor hexadecimal um cdigo rgb e um nome de cor (veja mais frente neste curso como se definem as cores.)

As linhas apresentadas mais acima usam formas diferentes (mas todas vlidas) para dar a cor preta ao fundo da pgina.

Nota: a forma recomendada para formatar o texto e os fundos de pgina baseia-se em estilos CSS. A utilizao do atributo bgcolor s se justifica se precisarmos manter a compatibilidade com browsers antigos que no suportam CSS. 7.5 O atributo background

O atributo "background" estabelece que o padro de fundo da pgina dado por uma imagem. O valor deste atributo indica o local onde se encontra a imagem. Se as dimenses da imagem forem inferiores s dimenses da pgina, o browser repetir a imagem (como num cho de mosaicos ou numa parede de azulejos) de modo a ocupar todo o fundo da pgina. O quadro seguinte mostra como isso se faz:

O valor do atributo background um URL que define o local onde pode ser encontrada a imagem. Na primeira linha mais acima demos um URL relativo e na segunda demos um URL absoluto.

Nota: a forma recomendada para formatar o texto e os fundos de pgina baseia-se em estilos CSS. A utilizao deste atributo s se justifica se precisarmos manter a compatibilidade com browsers antigos que no suportam CSS. 7.6 Dicas

Sempre que usar uma imagem de fundo considere os seguintes aspectos: x Certifique-se de que o tamanho da imagem (em KBytes) no muito grande, o

que aumentaria o tempo de carregamento da pgina. x Certifique-se de que a imagem de fundo combina bem com a cor do texto. x Certifique-se de que o fundo combina bem com as outras imagens que tem na

pgina. x Verifique se da repetio a imagem de fundo em mosaico resulta um padro

perfeito. Se detectar falhas ao passar de um mosaico para o seguinte no use essa imagem.

x Certifique-se de que a imagem no incomoda e no desvia a ateno do texto.


50

Os atributos "bgcolor", "background" e "text" do elemento foram desaprovados nas recomendaes mais recentes do W3C para a linguagem HTML (HTML 4 e XHTML). A forma recomendada para obter os mesmos resultados baseia-se na utilizao de estilos CSS. A utilizao destes atributos s se justifica se precisarmos manter a compatibilidade com browsers antigos que no suportam CSS.

So muito poucos os websites de qualidade que usam imagens de fundo, e aqueles que o fazem usam fundos discretos.

As cores de fundo mais usadas so: branco (a escolha mais frequente,) preto e cinzento. 8. Cores

Podemos obter qualquer cor nossa escolha combinando em propores corretas trs cores base: vermelho (red), verde (green) e azul (blue). 8.1 Formas de exprimir cores

Em CSS a forma recomendada para exprimir cores baseia-se em notao hexadecimal. Nesta forma as cores exprimem-se usando trs nmeros hexadecimais que definem as quantidades de vermelho, verde e azul que entram na composio de uma determinada cor. O valor mais baixo de uma determinada cor 0 (#00 na notao hexadecimal usada em CSS) e o valor mais alto 255 (#FF em notao hexadecimal.) Assim, a cor preta tem 0 vermelho, 0 verde e 0 azul escrita na forma #000000. J o branco tem 255 vermelho, 255 verde e 255 azul escrita como #FFFFFF. O amarelo forte tem 255 de vermelho, 255 de verde e zero de azul e escreve-se como #FFFF00.

A tabela seguinte mostra os resultados de diversas combinaes de cores:

8.2 Nomes de cores

A tabela seguinte mostra as 16 cores cujos nomes foram definidos oficialmente pelo W3C. Todos os browsers reconhecem estes nomes podendo assim, us-las sem qualquer problema:


51

Cores com Nomes Atribudos Oficialmente

Apesar de no estarem definidos oficialmente, os nomes de cor apresentados a seguir so reconhecidos por todos os browsers relevantes com exceo das verses muito antigas.

Nota: Estes nomes de cores no esto definidos em nenhum padro do W3C. Apesar de serem reconhecidos pelos browsers mais importantes, esse reconhecimento no exigido a nenhum browser para estar conforme com as recomendaes oficiais. pouco provvel que nos anos mais prximos os browsers para PDA e telefones mveis consigam reconhecer estes nomes de cor. Se deseja garantir a apresentao correta das cores das suas pginas em todos os browsers conforme as normas do W3C deve usar, em vez dos nomes apresentados na tabela, os cdigos hexadecimais apresentados junto das cores.

8.3 Cores seguras da Web Problemas causados por um nmero reduzido de cores

Todos os computadores modernos so capazes de mostrar dezenas de milhares ou milhes de cores em simultneo. Contudo, at meados da dcada de 1990 muitos sistemas apenas conseguiam apresentar 256 cores diferentes de cada vez. Esta limitao obrigava os browsers a trabalharem com uma paleta fixa que continha apenas 256 cores.

Os browsers eram obrigados a usar apenas 256 cores para simular todas as cores que no conseguiam apresentar. Os efeitos destas aproximaes eram visveis na forma pontos adjacentes com cores diferentes e de manchas de cor. Atualmente estas limitaes j no existem.


52

Como acabamos de ver, na primeira metade da dcada de 1990, a maioria dos computadores eram capazes de apresentar apenas 256 cores diferentes de cada vez. Dessas 256 cores, os sistemas operacionais Windows e Apple Macintosh reservavam 20 cores cada um (40 no total) para desenhar as suas interfaces grficas. Assim, de um total de 256 cores possveis, apenas 216 podiam ser escolhidas livremente com a garantia de poderem ser apresentadas tanto numa mquina Windows como num Mac. Estas 216 cores receberam a designao de cores seguras da Web. A forma encontrada para limitar as conseqncias resultantes da utilizao de uma paleta com apenas 216 cores consiste em usar apenas cores cujos cdigos hexadecimais usam apenas combinaes dos nmeros indicados na tabela seguinte:

RGB 00 51 102 153 204 255 Hex 00 33 66 99 CC FF

A tabela seguinte mostra todas as 216 combinaes de cores que podemos

formar com os valores apresentados na tabela anterior. Estas so, portanto as 216 cores seguras da Web, que mostramos juntamente com os seus cdigos hexadecimais (o caractere # no incio foi omitido):


53

Atualmente qualquer mquina consegue apresentar milhes de cores diferentes ao mesmo tempo, sendo assim, j no precisamos de ter o cuidado de usar apenas cores seguras. Apesar disso, este tema continua a ser focado em quase todas as introdues construo de pginas para a Web. 8.4 Formas de exprimir os valores das cores

As cores definem-se usando notao hexadecimal que exprime as quantidades de vermelho (Red), verde (Green) e azul (Blue) que entram na sua composio. A quantidade mnima de uma dada cor 0 (#00 em notao hexadecimal) e a quantidade mxima 255 (#FF em notao hexadecimal.) Assim, a cor branca escreve-se na forma #FFFFFF e a cor preta na forma #000000. Uma forma mais antiga que ainda funciona a forma decimal. Na forma decimal a cor branca exprime-se como rgb(255,255,255) e a cor preta exprime-se como rgb(0,0,0). Entre estes dois extremos temos toda a gama de cores que podem ser apresentadas num monitor de computador. Nada de Vermelho

Se desligarmos completamente a cor vermelha ficamos com 65536 cores diferentes que resultam de combinar 256 quantidades de verde com 256 quantidades de azul (65536 = 256 256).

A tabela seguinte mostra algumas destas combinaes:


54

Tons de Vermelho

A tabela apresentada mais abaixo mostra o que se obtm variando a quantidade de cor vermelha desde 0 at 255 ao mesmo tempo que se mantm a zero as quantidades de verde e de azul. Existem 256 tons diferentes de vermelho puro e muitos outros que contm misturas de outras cores.

Tons de Cinza

As cores cinzentas obtm-se combinado quantidades iguais de vermelho, verde e azul. A cor branca corresponde ao cinzento mais claro de todos e obtm-se juntando 255 de vermelho, 255 de verde e 255 de azul (#FFFFFF em hexadecimal). O preto o cinzento mais escuro de todos e obtm-se colocando todas as cores a zero (#000000 em hexadecimal.) Entre estes dois valores extremos temos 254 graus de intensidade possveis.

A tabela seguinte d uma idia dos tons de cinza que podemos obter:


55

8.5 Mais de 16 milhes de cores diferentes

Combinando as 256 quantidades possveis de vermelho com as 256 quantidades possveis de verde e as 256 quantidades possveis de azul conseguimos criar mais de 16 milhes de cores diferentes (256256256).

Praticamente todos os monitores de computador modernos esto preparados para apresentar mais de 16 milhes de cores diferentes. No entanto, preciso levar em conta que os novos terminais mveis a cores que existem no mercado (em telefones mveis e em PDAs) em regra possuem paletas mais reduzidas. Alguns mostram apenas 256 cores, outros 4096 ou 65536. 8.6 Mais nomes de cores

As cores mostradas na tabela seguinte tm nomes que so reconhecidos por todos os browsers relevantes. A utilizao destes nomes muito conveniente porque nos permite evitar o uso cdigos hexadecimais, mas infelizmente eles no esto definidos em nenhum padro do W3C. Se deseja que as suas pginas estejam em conformidade com as recomendaes do W3C deve usar os cdigos hexadecimais equivalentes em vez dos nomes.


56


57


58


59


60

9. As entidades de caracteres do HTML

Alguns caracteres, como o caractere ) no contedo da pgina (no para escrever uma etiqueta) deve usar entidades de caracteres. A lista abaixo contm estes e outros caracteres especiais importantes em HTML. Entidades de caracteres

Os caracteres mais especiais em HTML so e &. Sempre que precisarmos inserir um destes caracteres como parte do contedo de uma pgina devemos usar entidades de caracteres.

Uma entidade de caractere formada por trs partes: o smbolo &, o nome da entidade (ou o seu cdigo numrico equivalente) e finalmente o smbolo ; (ponto e virgula).

Temos assim que os caracteres mais especiais (entre eles temos os parntesis angulares que representam os smbolos matemticos "menor do que" e "maior do que") so representados pelas seguintes entidades: Caractere Entidade correspondente < < ("less than") > > ("greater than") & & (ampersand)

Um pouco mais abaixo voc pode ver uma lista que contm estes e outros caracteres especiais importantes em HTML.


61

9.1 Entidades de caracteres mais importantes: Resultado Descrio Entidade Cdigo inserir espao sem mudar de linha ("non-

breaking space")

< menor do que < < > maior do que > > & "e" comercial & & " aspas " " Euro

Outras entidades importantes: Resultado Descrio Entidade Cdigo cntimo (de dollar) libra esterlina yen seo direitos de cpia ("copyright") marca registada sinal de multiplicao sinal de diviso 9.2 Inserir espaos sem quebras de Linha

Uma entidade de caractere que muito utilizada . Ela serve para forar o browser a inserir um espao e probe-o de mudar de linha junto a esse espao. A seguir temos 5 espaos normais. A seguir temos5 espaos especiais.


62

Entidades de caracteres do HTML 4.01

O HTML 4.01 suporta o conjunto de caracteres ISO 8859-1 (Latin-1), que contm os caracteres com acentos usados pelas lnguas da Europa Ocidental. Os caracteres acentuados da lngua portuguesa podem ser todos obtidos usando este conjunto de caracteres. 9.3 Entidades para caracteres do conjunto ASCII e os nomes definidos em HTML

Os caracteres da primeira metade do conjunto ISO-8859-1 (cdigos desde 0 a 127) so os mesmos que os caracteres padro ASCII de 7 BITs. A maior parte destes caracteres pode ser usada diretamente sem necessidade de recorrer a entidades porque esto sempre disponveis em todas as mquinas qualquer que seja a sua configurao.

Os caracteres finais do conjunto ISO-8859-1 (cdigos desde 160 at 255) podem ser usados recorrendo a nomes de entidade de caractere definidos em HTML.

Nota: os nomes das entidades so sensveis ao tipo de letra (maiscula ou minscula). Resultado Descrio Nome da Entidade Cdigo Numrico " aspas " " & "e" comercial & & < menor do que < < > maior do que > > 9.4 Entidades para caracteres do conjunto ISO 8859-1 (no ASCII) Resultado Descrio Entidade Cdigo inserir espao sem mudar de linha ("non-

breaking space")

ponto de exclamao invertido dinheiro centavo (de dollar) libra esterlina yen barra vertical descontnua seo acento direse (trema, metafonia) direitos de cpia ("copyright") ordinal feminino abertura de aspas angulares negao hfen "soft" (pode acontecer uma quebra

de linha junto ao hfen)

marca registrada sinal (acento) graus


63

mais ou menos 2 sobrescrito 3 sobrescrito acento agudo micro pargrafo ponto a meia altura cedilha 1 sobrescrito ordinal masculino fecho de aspas angulares frao 1/4 frao 1/2 frao 3/4 ponto de interrogao invertido sinal de multiplicao sinal de diviso a grande com acento grave a grande com acento agudo a grande com acento circunflexo a grande com til a grande com direse a grande com anel ae ligados, grandes c grande com cedilha e grande com acento grave e grande com acento agudo e grande com acento circunflexo e grande com direse i grande com acento grave i grande com acento agudo i grande com acento circunflexo i grande com direse eth grande (Islands) n grande com til o grande com acento grave o grande com acento agudo o grande com acento circunflexo o grande com til o grande com direse o grande com trao obliquo u grande com acento grave u grande com acento agudo u grande com acento circunflexo u grande com direse y grande com acento agudo thorn grande (Islands)


64

caractere que representa a ligao sz, minsculo (Alemo)

a pequeno com acento grave a pequeno com acento agudo a pequeno com acento circunflexo a pequeno com til a pequeno com direse a pequeno com anel ligao ae, minscula c pequeno com cedilha e pequeno com acento grave e pequeno com acento agudo e pequeno com acento circunflexo e pequeno com direse i pequeno com acento grave i pequeno com acento agudo i pequeno com acento circunflexo i pequeno com direse eth pequeno (Islands) n pequeno com til o pequeno com acento grave o pequeno com acento agudo o pequeno com acento circunflexo o pequeno com til o pequeno com direse o pequeno com trao oblquo u pequeno com acento grave u pequeno com acento agudo u pequeno com acento circunflexo u pequeno com direse y pequeno com acento agudo thorn pequeno (Islands) y pequeno com direse 9.5 Entidades HTML no pertencentes ao conjunto ISO 8859-1 Resultado

Descrio Entidade Cdigo

Moeda Euro Marca para item em lista no ordenada

("bullet")

Marca comercial ("Trade Mark") trs pontos (elipse) aspas aspas duplas aspas (elegantes) do lado esquerdo aspas (elegantes) do lado direito seta para a direita


65

seta para a esquerda ligao OE grande ligao oe pequena s grande com um caron s pequeno com um caron y grande com direse caractere modificador para acento

circunflexo

til pequeno trao "en dash" trao "em dash" aspa esquerda simples aspa direita simples 10. Tabelas

As tabelas definidas em HTML tm permitido apresentar dados em forma tabular e construir arranjos de pgina complexos. Apesar de as recomendaes modernas darem preferncia utilizao das Folhas de Estilos em Cascata (CSS) em desfavor das tabelas quando se trata de fazer arranjos grficos complexos, a verdade que as tabelas continuam a ser muito teis devido ao fato de os browsers apresentarem alguns erros na forma como implementam os padres CSS. Exemplos de Aplicao Tabelas simples Exemplo Uma coluna: 1

curso de html e introducao ao xhtml

Documents