Departamento de Informtica

MDULO DE HTML & XHTML

([Extended] HyperText Markup Language)

Prof. Carlos Pampulim Caldeira http://www.di.uevora.pt/~ccaldeira

vora, Outubro de 2007

NDICE
1. O QUE O HTML? ............................................................................................................................. 1 1.1 1.2 1.3 INTRODUO ...................................................................................................................................... 1 QUE EDITOR UTILIZAR? ....................................................................................................................... 1 OS QUATRO CONCEITOS FUNDAMENTAIS ............................................................................................. 1 Elementos ................................................................................................................................. 1 Etiquetas ou tags ...................................................................................................................... 2

1.3.1 1.3.2

Todas as tags so construdas da mesma forma. A etiqueta inicia-se com o sinal de menor que (<) seguido do nome do elemento e termina com o sinal de maior que (>). A forma da etiqueta para a abertura de um pargrafo : <p>. A tag de terminao diferencia-se apenas por possuir uma barra (/) antes do nome do elemento: </p>. O contedo fica entre as etiquetas de incio e fim: .................... 2 1.3.3 1.3.4 1.4 2. Atributos e valores .................................................................................................................... 2 Aninhamento (Nesting) ............................................................................................................. 3

ESTRUTURA BSICA DE UM PROGRAMA EM HTML ............................................................................. 3

CRIAO DE UMA PRIMEIRA PGINA EM HTML ................................................................. 5 2.1 2.2 CRIAR UMA HOME PAGE NO NOTEPAD................................................................................................. 5 VIZUALIZAO DA PGINA NUM BROWSER ......................................................................................... 6

3.

DEFINIES DAS ETIQUETAS BSICAS .................................................................................... 8 3.1 3.2 HEADINGS ........................................................................................................................................... 8 DIVIDINDO O TEXTO ............................................................................................................................ 8 Pargrafos ................................................................................................................................ 8 Outros tipos de quebras............................................................................................................ 9
Linhas horizontais ..........................................................................................................................9 Nova linha ......................................................................................................................................9

3.2.1 3.2.2

3.2.2.1 3.2.2.2

3.3 3.4

ESTILOS NO TEXTO ............................................................................................................................ 10 FORMATAO DE LISTAS .................................................................................................................. 10 Listas no-numeradas ............................................................................................................ 10 Listas numeradas .................................................................................................................... 11 Listas com sub-listas ............................................................................................................... 12

3.4.1 3.4.2 3.4.3 4.

IMAGENS E GRFICOS .................................................................................................................. 14 4.1 IMAGENS DO TIPO INLINE ................................................................................................................ 14 Alinhamento por defeito ......................................................................................................... 14 Alinhamento de imagens inline............................................................................................... 15
Alinhamento pelo topo .................................................................................................................15

4.1.1 4.1.2

4.1.2.1

4.1.2.2 4.1.2.3

Alinhamento pelo centro ..............................................................................................................15 Alinhamento por defeito ..............................................................................................................16

4.1.3 4.1.4

Imagem sem texto ................................................................................................................... 16 Formataes adicionais para imagens do tipo inline ............................................................ 17
Legenda alternativa visualizao da imagem ............................................................................17 Altura e comprimento da imagem ................................................................................................17

4.1.4.1 4.1.4.2

5.

HIPERLIGAES ............................................................................................................................. 19 5.1 LIGAES A FICHEIROS LOCAIS ......................................................................................................... 19 Todos os documentos numa nica pasta ................................................................................ 19 Com os documentos em pastas diferentes .............................................................................. 20

5.1.1 5.1.2 5.2 6.

LIGAES A DOCUMENTOS LOCALIZADOS NA INTERNET ................................................................... 20

FUNDOS DE ECR ........................................................................................................................... 22 6.1 6.2 6.3 DEFINIO DAS CORES EM HTML .................................................................................................... 22 CORES SLIDAS DE FUNDO ................................................................................................................ 22 FUNDOS COM TEXTURA ..................................................................................................................... 23

7.

FORMATAO DE TEXTO ........................................................................................................... 24 7.1 7.2 7.3 7.4 TAMANHO DA LETRA......................................................................................................................... 24 COR DA FONTE .................................................................................................................................. 25 FORMA SUPERIOR LINHA E FORMA INFERIOR LINHA .................................................................... 25 TIPO DE LETRA (FONTE) .................................................................................................................... 25

8.

TABELAS ............................................................................................................................................ 27 8.1 8.2 8.3 ESTRUTURA BSICA .......................................................................................................................... 27 LINHAS E COLUNAS ........................................................................................................................... 28 CABEALHOS DAS COLUNAS ............................................................................................................. 30

Universidade de vora

HTML

1.
1.1

O que o HTML?
Introduo

O HTML (HyperText Markup Language) um conjunto estruturado de instrues, conhecidas por etiquetas ou tags (em ingls), que dizem a um browser como publicar uma pgina web, ou seja, o browser interpreta essas etiquetas e desenha a pgina no ecr. Estes conjuntos de instrues esto agrupados em ficheiros de tipo texto, i.e., sem qualquer tipo especial de formatao.

1.2

Que editor utilizar?

A forma mais simples, e bsica, de fazer programas em HTML ser a utilizao de simples editores de texto como o caso, por exemplo, do Notepad. No entanto, os utilizadores mais experientes utilizam diversos tipos de aplicaes, mais ou menos sofisticadas, para desenvolverem as partes fundamentais de uma pgina em HTML. Algumas dessas aplicaes permitem que numa primeira fase o programador faa um desenho grfico daquilo que pretende e que posteriormente seja gerado, de uma forma automtica, o cdigo HTML correspondente.

1.3

Os quatro conceitos fundamentais

O primeiro passo na aprendizagem do HTML o estudo dos termos bsicos que descrevem a maior parte das funes desta linguagem.

1.3.1 Elementos Todas as pginas de HTML so compostas por elementos. Um elemento pode ser visto com um contentor em que colocada uma seco de uma pgina web. Tudo o que estiver dentro desse contentor fica com as caractersticas desse
Departamento de Informtica - C. Caldeira -1-

Universidade de vora

HTML

mesmo elemento. Se, por exemplo, se quiser fazer uma tabela toda a informao referente a essa tabela ter que estar colocado no interior do elemento <table> </table>.

1.3.2

Etiquetas ou tags

Por vezes os termos elemento ou tag, de uma forma errada so usados indistintamente. Um elemento composto por duas etiquetas: uma a abrir e outra a fechar. Apesar de no HTML esta distino no ser muito importante j no caso do XHTML ela torna-se fundamental. Todas as tags so construdas da mesma forma. A etiqueta inicia-se com o sinal de menor que (<) seguido do nome do elemento e termina com o sinal de maior que (>). A forma da etiqueta para a abertura de um pargrafo : <p>. A tag de terminao diferencia-se apenas por possuir uma barra (/) antes do nome do elemento: </p>. O contedo fica entre as etiquetas de incio e fim: <p>Este um pequeno pargrafo.</p> Alguns elementos no precisam de uma tag de terminao porque no incluem qualquer tipo de contedo e so por isso denominados elementos vazios. assim que, por exemplo, o elemento de quebra de linha <br> no requer uma etiqueta de terminao.

1.3.3 Atributos e valores Os atributos so outro elemento importante da linguagem HTML. Um atributo utilizado para definir as caractersticas de um elemento e colocado no interior da tag de abertura do elemento. Por exemplo, para atrbuir a cor a uma palavra utiliza-se o elemento FONT em conjunto com o atributo COLOR: <font color= >. O sinal de igual e as aspas so fundamentais pois atribuem um valor a um atributo.

Departamento de Informtica - C. Caldeira

-2-

Universidade de vora

HTML

A utilizao de letras minsculas ou maisculas no nome dos elementos, tags e atributos indiferente para a interpretao que os browsers fazem delas. Por exemplo: <p>.</p> a mesma coisa que <P>.</P>. Se for escrita uma etiqueta que no exista em HTML ou que um determinado browser no entenda essa etiqueta ser ignorada no produzindo qualquer output.

1.3.4 Aninhamento (Nesting) Numa pgina web existem quase sempre mltiplos elementos que nunca se devem sobrepor. Os elementos devidamente aninhados so sempre independentes uns dos outros. Veja-se o seguinte exemplo em que tudo est arrumado ou aninhado: <a> <b> <c> </c> </b> </a> Agora uma situao em que h sobreposio, i.e., uma falta de aninhamento: <a> <b> </a> <c> </b> </c>

1.4

Estrutura bsica de um programa em HTML

Os elementos referidos em baixo so os mais bsicos e aqueles estritamente necessrios para programar uma pgina em HTML. <html> </html> Definem o incio e o fim do programa <head> </head> o cabealho do programa e, normalmente, no aparece na janela web.

Departamento de Informtica - C. Caldeira

-3-

Universidade de vora

HTML

<title> </title> Este elemento est aninhado no HEAD e escreve o ttulo da pgina na barra de ttulo no cima da janela do browser.

<body> </body> Contm o contedo principal da pgina web. <!Coloque aqui os seus comentrios --> Serve para inserir notas ou comentrios sobre o programa e no so mostrados na janela do browser.

Ento, o documento mais simples em HTML, tambm conhecido como documento mnimo, ter a seguinte estrutura: <html> <head><title>Este nome da pgina</title> <!-- informao extra sobre este documento que no ir aparecer na pgina mas no cabealho --> </head> <body>
O body contm todo o texto e todas as imagens que constituem a pgina

</body> </html> A ordem de abertura e fecho dos tags, como se pode ver, no arbitrria e tem uma sequncia hierrquica. Quando se est a escrever um programa muitas vezes sente-se a necessidade de fazer alguns comentrios a uma parte especfica do cdigo, para tal utilizam-se as tags <!- - e - ->, os comentrios no tm qualquer output.

Departamento de Informtica - C. Caldeira

-4-

Universidade de vora

HTML

2.
2.1

Criao de uma primeira pgina em HTML

Criar uma home page no Notepad

Apesar de se poder usar um processador de texto como, por exemplo, o Microsoft Word para criar documentos em HTML, o mais fcil comear por um simples editor de texto como o caso do Notepad do Windows. Para construir uma primeira pgina seguiam-se estes pontos: 1. Abrir o Notepad. 2. No incio do documento escreve-se <html>. 3. Na linha seguinte: <head>. 4. Em baixo <title>Este nome da pgina</title>. 5. Na linha de baixo fecha-se o cabealho: </head>. 6. Depois inicia-se o corpo do documento <body>. 7. Em seguida digita-se a frase O body contm todo o texto e todas as imagens que constituem a pgina. e fecha-se o corpo: </body>. 8. Finalmente fecha-se o documento: </html>, na Figura 2-1 pode-se ver o cdigo completo.

Figura 2-1: Uma pgina bsica em HTML.

9. No men File/Ficheiro, escolhe-se Save. D-se o nome indice.htm (ver Figura 2-2)

Departamento de Informtica - C. Caldeira

-5-

Universidade de vora

HTML

10. Premir Save/Guardar.

Figura 2-2:Como guardar uma pgina com o Notepad.

2.2

Vizualizao da pgina num browser

Aps o projecto inicial ter sido guardado a etapa seguinte a sua vizualizao numa browser da Internet. Para tal observem-se os pontos seguintes: 1. No menu File do browser escolhe-se a opo, dependendo do browser utilizado, Open, Open Page ou Open File. 2. Na janela de dilogo que aparece navega-se at pasta onde est guardada a pgina com o nome indice.htm e clica-se no seu icone. 3. Premir OK e o resultado deve ser semelhante ao da Figura 2-3.

Departamento de Informtica - C. Caldeira

-6-

Universidade de vora

HTML

Figura 2-3: A primeira pgina web.

Departamento de Informtica - C. Caldeira

-7-

Universidade de vora

HTML

3.
3.1

Definies das etiquetas bsicas

Headings

Em HTML podem ser criados diversos nveis de cabealho. Essa formatao tem a seguinte sintaxe: <Hn>Texto a aparecer no cabealho</Hn> em que n um nmero entre 1 e 6 que representam um tamanho relativo como pode ser visualizado na seguinte figura:

3.2

Dividindo o texto

3.2.1 Pargrafos Em HTML o <CR> no tem qualquer significado, o mesmo para os espaos ou linhas em branco. No entanto, a tag para pargrafo insere uma linha em branco e inicia um novo pargrafo.

Departamento de Informtica - C. Caldeira

-8-

Universidade de vora

HTML

Sintaxe: <p> Este um pargrafo! </p> Em algumas situaes no necessrio utilizar a tag de finalizao </p>, mas isto um caso de excepo pois a norma o de se ter que fechar todas as etiquetas que se abrem.

3.2.2 Outros tipos de quebras

3.2.2.1

Linhas horizontais

Para separar as principais seces de um documentos utiliza-se a tag de linha horizontal que insere um trao horizontal no ecr e cujo formato : <hr> (esta tag no tem terminao) Este tag tem dois atributos configurveis: a espessura e o comprimento da linha: <hr size=4 width=50%> que produz o seguinte output:

3.2.2.2

Nova linha

Existe ainda a tag de nova linha (<br>)que fora a passagem para outra linha, mas no insere uma nova linha. Esta etiqueta no tem terminao.

Departamento de Informtica - C. Caldeira

-9-

Universidade de vora

HTML

3.3

Estilos no texto

O HTML tem vrias formas de formatao para o texto que alm de se poderem utilizar isoladamente tambm se podem combinar entre si ou com outras tags. a. Itlico <I> Vamos visitar Itlia!!!! </I> b. Negrito <B> Isto est escuro! </B> c. Sublinhado <U> vora </U> Exemplos: <h2><i>Nova pgina</i></h2> <b>Ateno ao<u>sublinhado</u>!</b>

3.4

Formatao de listas

3.4.1 Listas no-numeradas A etiqueta para lista no-numerada permite a criao de listas de itens com bullets ou marcas antecedendo cada elemento da lista. O tipo de marca depende do browser utilizado e da fonte especificada para o texto. Para uma lista deste tipo devem seguir-se os passos seguintes: a. Escrever o tag <UL> b. Digitar <LI> seguido do elemento c. Fechar a lista com </UL> O tag de finalizao para cada elemento da lista, </li>, , neste caso especial, opcional. Para alm da pequena bola preta, que a marca por defeito, podem-se utilizar mais dois tipos diferentes de marcas, de acordo com a etiqueta seguinte:

Departamento de Informtica - C. Caldeira

- 10 -

Universidade de vora

HTML

<ul type = valor_para_o_tipo>

o tipo de marca pode ainda ser alterado atravs da tag <li>. Considere o cdigo seguinte: <ul type=square> <li>Item n 1 <li>Item n2 <li>Item n3 <li type=circle>Isto uma marca circular <li type=circle>Ainda a mesma marca <li type=disc>Isto a marca normal </ul>

3.4.2 Listas numeradas A etiqueta para lista numerada permite a criao de listas de itens com numerao numrica, comeando em 1 e antecedendo cada elemento da lista. Para uma lista deste tipo devem seguir-se os passos seguintes: a. Escrever o tag <OL> b. Digitar <LI> seguido do elemento c. Fechar a lista com </OL>

Departamento de Informtica - C. Caldeira

- 11 -

Universidade de vora

HTML

Para alm da numerao rabe normal, que a numerao por defeito, podemse utilizar mais quatro tipos diferentes de numerao, de acordo com a etiqueta seguinte: <ol type = valor_para_o_tipo>, em que o tipo pode ser:

Para alm desta formatao nas listas numeradas pode-se ainda iniciar a lista num nmero diferente de 1, ou seja, utilizando o atributo start=y da tag <ol> a contagem pode ser inicializada noutro elemento: <ol type=A start=11>, significa que o primeiro elemento da lista ser a letra K.

3.4.3 Listas com sub-listas As listas numeradas e no-numeradas podem ter vrios nveis, sendo cada um deles devidamente indentado pelos browsers. Na construo de estruturas aninhadas tem que existir o maior cuidado na verificao de que cada lista est convenientemente terminada e de que a ordem das sub-listas est correcta. A seguinte figura mostra um exemplo de uma estrutura deste tipo:

Departamento de Informtica - C. Caldeira

- 12 -

Universidade de vora

HTML

E este o cdigo HTML que produz aquele output: <ul> <li> ...Nvel 1, Nmero 1... <ol> <li> ...Nvel 2, Nmero 1... <li> ...Nvel 1, Nmero 2... <ol start="10"> <li> ...Nvel 3, Nmero 1... </ol> <li>...Nvel 2, Nmero 3... </ol> <li>...Nvel 1, Nmero 2... </ul>

Departamento de Informtica - C. Caldeira

- 13 -

Universidade de vora

HTML

4.

Imagens e Grficos

As imagens e os grficos para serem utilizados na Internet tm que ser independentes do sistema operativo do utilizador, i.e., um browser a funcionar num Macintosh mostrar a imagem num formato prprio para o Macintosh, enquanto que a mesma imagem recebida num computador com Windows ser lida para um formato apropriado a este sistema operativo. O formato standard para utilizao em HTML o GIF (Graphics Interchange Format). Esta formatao comprime a informao da imagem reduzindo o seu tamanho e faz ainda a sua traduo para cdigo binrio que pode ser enviado pela Internet. O outro formato usado frequentemente em HTML o JPEG (Joint Photographic Expert Group). Este formato inclui uma compresso (reduo do tamanho dos ficheiros) bastante eficaz para imagens fotogrficas que pode atingir um factor de 10 (por exemplo, um ficheiro com o tamanho de 3000 Kb pode ser reduzido a 300 Kb).

4.1

Imagens do tipo INLINE

Uma imagem do tipo inline aquela que se posiciona entre o texto de uma pgina. O tag para colocar numa pgina uma imagem inline o seguinte: <IMG SRC=nome da imagem.gif> ou <IMG SRC=nome da imagem.jpg> em que, por exemplo, nome da imagem.gif o nome de um ficheiro de tipo GIF que est armazenado na mesma pasta do documento HTML.

4.1.1 Alinhamento por defeito O alinhamento standard entre o texto e imagem inline o seguinte:
Departamento de Informtica - C. Caldeira - 14 -

Universidade de vora

HTML

Quando se pretende que o texto aparea imediatamente abaixo da imagem basta inserir uma etiqueta de pargrafo antes da tag da imagem: <p> <img src = imagem.gif>

4.1.2 Alinhamento de imagens inline Com um atributo adicional etiqueta <img> pode ser controlado a posio relativa do texto da imagem:

4.1.2.1

Alinhamento pelo topo

<IMG SRC = nome da imagem.jpg ALIGN = TOP>

4.1.2.2

Alinhamento pelo centro

<IMG SRC = nome da imagem.jpg ALIGN = MIDDLE>

Departamento de Informtica - C. Caldeira - 15 -

Universidade de vora

HTML

4.1.2.3

Alinhamento por defeito

No alinhamento por defeito (ver 4.1.1) o valor a utilizar no atributo align bottom, mas como j se referiu no necessrio explicit-lo pois esse valor automaticamente assumido pelo HTML.

4.1.3 Imagem sem texto <P ALIGN=CENTER> <IMG SRC=nome da imagem.gif> </P>

Departamento de Informtica - C. Caldeira

- 16 -

Universidade de vora

HTML

4.1.4 Formataes adicionais para imagens do tipo inline

4.1.4.1

Legenda alternativa visualizao da imagem

Quando, por qualquer problema, o browser no consegue mostrar a imagem em seu lugar aparece o smbolo ou (ou ainda outro smbolo diferente, o que

depende do browser), ficando o utilizador sem ter a certeza sobre aquilo que se trata, pelo que se deve sempre acrescentar o atributo ALT tag <img> por forma a que naqueles casos se visualize igualmente uma legenda sobre a imagem ou grfico em causa: <IMG SRC=nome da imagem.jpg ALT=Logotipo Parque Natural> Exemplo:

4.1.4.2

Altura e comprimento da imagem

Outra opo que pode ser includa na etiqueta <img> so dois atributos que controlam, em pixels, as dimenses da imagem. Como o browser tem que determinar essas dimenses ao mesmo tempo que carrega a imagem para o ecr, o tempo em que isso feito por ser optimizado se as dimenses forem prdeterminadas no cdigo HTML. A sintaxe a seguinte: <img src=nome do ficheiro.gif width=x height=y> em que x a largura da imagem em pixels e y a altura da imagem em pixels. A maior parte dos programas de tratamento de imagem permitem determinar facilmente aquelas dimenses.

Departamento de Informtica - C. Caldeira

- 17 -

Universidade de vora

HTML

Os atributos height e width devem ser exactamente as dimenses reais da imagem e nunca se devem usar aqueles atributos para ampliar ou reduzir o tamanho da imagem pois a consequncia ser uma imagem distorcida com pouca qualidade.

Departamento de Informtica - C. Caldeira

- 18 -

Universidade de vora

HTML

5.

Hiperligaes

O verdadeiro poder da Internet reside no facto de ser possvel estabelecer ligaes (links) entre diferentes peas de informao, formando uma verdadeira teia (web) de conhecimento. Esses links de um tipo especial designam-se por hiperligaes. A World Wide Web utiliza um esquema de endereos conhecido como URLs (Uniform Resource Locators) para identificar o local de destino de cada hiperligao. Por vezes estas ligaes tambm so conhecidas por ncoras. Sem esta estrutura no se falaria de HTML mas apenas de TML (Text Markup Language)!

5.1

Ligaes a ficheiros locais

5.1.1 Todos os documentos numa nica pasta A ligao a um outro documento pode ser feita a um nvel local (no mesmo computador onde se encontra o programa HTML em questo) pois no necessrio navegar na Internet para lhe ter acesso. A ncora mais simples aquela que liga a um documento situado na mesma pasta do programa HTML em funcionamento: <a href=ficheiro.html>texto que se refere a esse link</a> em q a se refere a ncora (anchor) e href a referncia de hipertexto (hypertext reference). Tambm possvel fazer uma ligao deste tipo a uma imagem ou grfico: <a href=nome da imagem.gif>texto que se refere a esse link</a>
Departamento de Informtica - C. Caldeira - 19 -

Universidade de vora

HTML

ou, caso seja pretendida uma imagem sem bordadura: <a href="index.html"><img src="logotipo.gif" border=0></a> Neste exemplo, para alm do atributo border=0 (que especifica que no se pretende a bordadura que colocada, por defeito, pelo HTML), constate-se uma outra possibilidade que a formatar uma imagem por forma que ela prpria seja uma hiperligao para outro documento.

5.1.2 Com os documentos em pastas diferentes A etiqueta <a> permite tambm a ligao a documentos HTML que estejam localizados em pastas diferentes daquele que contm a ncora. Suponha-se que as imagens, por uma questo de organizao, esto todas armazenadas numa determinada pasta, ento a sintaxe para a hiperligao passa a ser: <a href=imagens/nome da imagem.gif>esta imagem est numa pasta abaixo</a> isto significa que a pasta imagens est localizada um nvel abaixo daquele em que est a funcionar o programa em HTML que contm a ncora. Se for necessrio fazer referncia a documentos que se situem em pastas a um nvel superior quele em que est a funcionar o programa em HTML que contm a ncora, ento a sintaxe passa a ser: <a href=../imagens/nome da imagem.gif>esta imagem est numa pasta acima</a>

5.2

Ligaes a documentos localizados na Internet

A ligao a documentos localizados na web vai fazer recurso da formatao URL da seguinte maneira: <a href=URL>texto que remete para o link</a>

Departamento de Informtica - C. Caldeira

- 20 -

Universidade de vora

HTML

ou, num exemplo especfico: <a href="http://www.uevora.pt"><b>Universidade de vora</b></a>

Departamento de Informtica - C. Caldeira

- 21 -

Universidade de vora

HTML

6.

Fundos de Ecr

O fundo de ecr, o background em ingls, pode ser parametrizado de algumas formas, sendo que a principal formatao que hbito fazer a alterao da cor do fundo.

6.1

Definio das cores em HTML

Um browser tem sua disposio um sistema de colorao para o texto e fundo de ecr. Cada cor identificada por um conjunto de valores baseados no trptico Red-Green-Blue (RGB), em que cada uma dessas cores tem um intervalo de variao entre 0 e 255. Um valor mximo e simultneo para os trs (R=255, G=255, B=255) produz a cor branca; um valor mnimo e simultneo para os trs (R=0, G=0, B=0) equivale ao preto. O HTML em vez de identificar cada uma das cores possveis por um conjunto de trs nmeros como, por exemplo, 102, 153, 255 vai utilizar uma representao hexadecimal (uma base 16, com uma numerao que contm: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) que tratada de uma forma mais eficiente pelos computadores. A cor referida em cima em cdigo hexadecimal : 6699FF, em que 66 o valor do vermelho, 99 o valor do verde e FF o valor para o azul. Os browsers de utilizao mais corrente tm uma facilidade na utilizao de cores que o reconhecimento automtico de dezasseis cores: aqua, blue, gray, black, fuchsia, green, lime, navy, purple, silver, white, maroon, olive, red, teal e yellow.

6.2

Cores slidas de fundo

A formatao da cor de fundo implica uma modificao na tag <body>: <body bgcolor=#YYYYYY>

Departamento de Informtica - C. Caldeira

- 22 -

Universidade de vora

HTML

em que YYYYYY a representao hexadecimal da cor. preciso ter cuidado na conjugao de cores entre o fundo e os restantes elementos, como o caso do texto. Se, por exemplo, o valor para o atributo bgcolor for #000000 no vais ser possvel visualizar o texto pois este tm tambm a cor preta. Numa situao destas convm utilizar outros atributos que compem a etiqueta <body> e que permitem atribuir cores aos vrios elementos que constituem uma pgina web: <body bgcolor=#YYYYYY text=#YYYYYY link=#YYYYYY vlink=#YYYYYY> cujo significado o que segue: BGCOLOR a cor de fundo (por defeito grey) TEXT a cor do texto normal (por defeito black) LINK a cor de uma hiperligao (por defeito blue) VLINK a cor de uma hiperligao recentemente visitada (por defeito purple)

6.3

Fundos com textura

Para alm de ser colorida uma pgina web pode ainda ter um fundo com textura. Para tal utiliza-se uma pequena imagem (em GIG ou JPEG) que o browser ir reproduzir vrias vezes (tile, em ingls) no ecr. Uma imagem com esta finalidade deve ter um tamanho mximo de 10 kbytes. A tag para adicionar uma imagem de fundo a seguinte: <body background=ficheiro_bg.gif> em que ficheiro_bg.gif o nome da imagem.

Departamento de Informtica - C. Caldeira

- 23 -

Universidade de vora

HTML

7.

Formatao de Texto

O texto que utilizado nas pginas web pode ser formatado de formas muito diversas: cor, tamanho, tipo de letra (fonte) e ainda escrever numa forma superior linha (superscript, em ingls) ou inferior linha (subscript, em ingls).

7.1

Tamanho da letra

A tag <font></font> pode ser utilizada para valores entre 1 (a letra mais pequena) e 7 (a maior) sendo que 3 o tamanho normal do texto. Estes valores so relativos e dependem do tipo de fonte que o utilizador tiver escolhido para o browser. A sintaxe a seguinte: <font size=>Universidade de vora</font>, em que est entre 1 e 7. O tamanho da letra pode ser alterado de uma forma relativa: <font size=+>Universidade de vora</font> <font size=->Universidade de vora</font> em que + ou representam, respectivamente, um aumento ou reduo de tamanho relativamente ao tamanho em utilizao. O tamanho utilizado por defeito pode ser definido para uma determinada pgina web com a seguinte etiqueta: <basefont size=> que altera o tamanho normal de 3 para um outro valor qualquer. Esta etiqueta no tem terminao pelo que continua activa at ocorrer outra tag <basefont>.

Departamento de Informtica - C. Caldeira

- 24 -

Universidade de vora

HTML

7.2

Cor da fonte

No captulo 6.1 j foi introduzido o tema das cores em HTML que se aplica igualmente fonte da letra. Exemplos: <font color=red>Vinho Tinto</font> <font color=#993459>Teste de Colorizao</font> Os atributos size e color podem ser utilizados simultaneamente na tag <font>: <font size=5 color=navy>Azul Cor do Mar</font>

7.3

Forma superior linha e forma inferior linha

Este tipo de formatao pode ser muito til para a escrita de frmulas qumicas ou de expresses matemticas. forma superior linha  forma inferior linha  Exemplos de aplicao destas formataes: Ex.^mos Senhores H₂O

7.4

Tipo de letra (fonte)

Os browsers podem alternar entre diferentes tipos de letras desde que essas fontes estejam instaladas no computador do utilizador. A fonte (tipo de letra) pode ser formatada pela tag seguinte: <font face=nome da fonte> Exemplo: <font face=arial>Letra Arial

Departamento de Informtica - C. Caldeira

- 25 -

Universidade de vora

HTML

Quando se pretender voltar fonte definida por defeito no computador do utilizador tem que se colocar a tag de terminao </font>.

Departamento de Informtica - C. Caldeira

- 26 -

Universidade de vora

HTML

8.

Tabelas

As tabelas em HTML so estruturas de diviso dos elementos que compem uma pgina web. As tabelas em HTML funcionam de uma forma idntica a estruturas semelhantes que existem nos processadores de texto. As tabelas no servem apenas para escrever texto em colunas mas ainda, e principalmente, para alterar o layout normal de uma pgina web.

8.1

Estrutura bsica

A seguinte poro de cdigo HTML demonstra a construo de uma tabela bsica: <table border=1> <tr> <td>Linha 1 coluna 1</td> <td>Linha 1 coluna 2</td> <td>Linha 1 coluna 3</td> </tr> <tr> <td>Linha 2 coluna 1</td> <td>Linha 2 coluna 2</td> <td>Linha 2 coluna 3</td> </tr> <tr> <td>Linha 3 coluna 1</td> <td>Linha 3 coluna 2</td> <td>Linha 3 coluna 3</td> </tr> </table>

Departamento de Informtica - C. Caldeira

- 27 -

Universidade de vora

HTML

O resultado produzido mostrado nesta figura:

O atributo border=1 utilizado na tag <table> desenha uma bordadura em volta da tabela com uma espessura de 1 pixel. Cada linha da tabela definida pelas etiquetas <tr></tr> e as clulas que compem as linhas so definidas por <td></td>. As etiquetas <td></td> podem conter qualquer outra tag de HTML; com esta etiqueta podem ainda ser utilizados vrios atributos que controlam o alinhamento do contedo em cada uma das clulas: <td align=left> alinha ao lado esquerdo da clula (alinhamento por defeito) <td align=rigth> alinha ao lado direito <td align=center> alinha ao centro <td valign=bottom> alinha ao fundo <td valign=top> alinha ao topo <td valign=middle> alinha ao meio (alinhamento por defeito)

Estes atributos podem ser combinados entre si como, por exemplo: <td align=left valign=bottom> em que o HTML produz uma clula cujo contedo est alinhado a partir da esquerda e junto ao fundo da clula.

8.2

Linhas e colunas

O aspecto regular das linhas e colunas pode ser alterado com os atributos colspan e rowspan da tag <td></td>. Veja-se o caso seguinte: <table border=1> <tr> <td>Linha 1 coluna 1</td> <td align=center colspan=2>Linha 1 coluna 2 e 3</td>
Departamento de Informtica - C. Caldeira - 28 -

Universidade de vora

HTML

</tr> <tr> <td>Linha 2 coluna 1</td> <td>Linha 2 coluna 2</td> <td>Linha 2 coluna 3</td> </tr> <tr> <td>Linha 3 coluna 1</td> <td>Linha 3 coluna 2</td> <td>Linha 3 coluna 3</td> </tr> </table> O aspecto inicial da tabela foi alterado pois a segunda clula da primeira linha ocupa (spans, em ingls) duas colunas:

Uma clula pode igualmente ocupar o espao de duas linhas: <table border=1> <tr> <td>Linha 1 coluna 1</td> <td align=center colspan=2>Linha 1 coluna 2 e 3</td> </tr> <tr> <td>Linha 2 coluna 1</td> <td valign=top rowspan=2>Linha 2 coluna 2</td> <td>Linha 2 coluna 3</td> </tr> <tr> <td>Linha 3 coluna 1</td> <td>Linha 3 coluna 3</td> </tr> </table>

Departamento de Informtica - C. Caldeira

- 29 -

Universidade de vora

HTML

8.3

Cabealhos das colunas

Numa tabela podem ser criados cabealhos para as colunas atravs do atributo <th></th> da etiqueta table. Na tabela anterior podem ser colocados cabealhos nas trs colunas: <table border=1> <tr> <th>COLUNA A</th> <th>COLUNA B</td> <th>COLUNA C</th> </tr> <tr> <td>Linha 1 coluna 1</td> <td>Linha 1 coluna 2</td> <td>Linha 1 coluna 3</td> </tr> <tr> <td>Linha 2 coluna 1</td> <td>Linha 2 coluna 2</td> <td>Linha 2 coluna 3</td> </tr> <tr> <td>Linha 3 coluna 1</td> <td>Linha 3 coluna 2</td> <td>Linha 3 coluna 3</td> </tr> </table>

Departamento de Informtica - C. Caldeira

- 30 -