Introdução Ao HTML

Curso: Rececionista de Hotel
TIC-Tecnologia de Informao e Comunicao

0792/Criao de Pginas para a Web em hipertexto
Formador: Rui Pereira

1
Governo da Repblica
Portuguesa
ndice
Introduo ao HTML ...................................................................................................................... 2
TAGS (Marcaes) e elementos .................................................................................................... 2
Estrutura bsica de uma pgina em HTML ................................................................................... 3
AS TAGS HTML, HEAD, TITLE E BODY ........................................................................................... 4
Definies de Carcter Entities ..................................................................................................... 6
Os caracteres acentuados ............................................................................................................. 7
Tags Elementares ........................................................................................................................ 11
Listas ............................................................................................................................................ 13
Definio do fundo da pgina ..................................................................................................... 18
Uso das Cores .............................................................................................................................. 24
Nomes de cores ........................................................................................................................... 25
Uso de imagens ........................................................................................................................... 30
HIPERLIGAES ........................................................................................................................... 35
IMAGE MAPS ............................................................................................................................... 40
Insero de elementos multimdia............................................................................................. 44
Tabelas ........................................................................................................................................ 46
Molduras (frames) ....................................................................................................................... 51
Planeamento de um site ............................................................................................................. 57


2
Governo da Repblica
Portuguesa
Introduo ao HTML
A linguagem HTML significa Hypertext Markup Language - linguagem de marcao de
hipertexto. uma linguagem universal destinada elaborao de pginas com hiper-
texto, como o nome indica. O conceito de hipertexto muito simples: certos itens de
um documento contm uma ligao a outra zona do mesmo documento ou, como
mais vulgar a outros documentos.
A principal aplicao do HTML a criao de pginas da Web, e convm esclarecer que
no se trata de uma linguagem de programao. O HTML uma espcie de linguagem
de formatao, um ficheiro de texto que formatado atravs de uma srie de
comandos designados por TAGS.
Para criar uma pgina HTML, no necessrio nenhum software especial. O Notepad
do Windows suficiente para a criao de uma pgina. Para testar a pgina
necessrio um Browser (Netscape Communicator e/ou Microsoft Internet Explorer).
TAGS (Marcaes) e elementos
As Tags consistem do sinal (<), ( o smbolo de "menor que"), seguida pelo nome da
marcao e fechada por (>) ("maior que").
Todas as tags de formatao devem ser abertas e fechadas. O smbolo que termina
uma determinada tag igual aquele que a inicia, antecedido por uma barra (/) e
precedido pelo texto referente:
EXEMPLO: <tag>
</tag>
Todas as tags obedecem a uma hierarquia, como no seguinte exemplo:
<a> <b> <c> </c> </b> </a> - Correcto
<a> <b> <c> </a> </b> </c> - Incorrecto
O primeiro a abrir o ultimo a fechar, e vice-versa.


3
Governo da Repblica
Portuguesa
Existem algumas excepes das tags: a tag que indica um final de pargrafo: <P>, no
necessita de fechar: </P>. A tag que indica quebra de linha - <br> - tambm no
precisa de fechar, e outras tais como <hr> e <li>.
A linguagem HTML no diferencia as maisculas das minsculas ( no Case Sensitive),
pois se escrever uma tag como <html>, <HTML>, <Html> ou <HtMl>, o comando o
mesmo e os browsers vo interpret-lo da mesma forma.
Estrutura bsica de uma pgina em HTML
Existem quatro pares de tags que devem ser sempre colocados na pgina. As tags
<HTML> e </HTML> devem englobar todo o contedo da pgina (estar presente no
incio e no fim do texto) para indicar ao browser que se trata de um documento HTML.
O documento, por sua vez, est dividio em duas partes: o cabealho e o corpo do
texto, cada um indicado por tags diferente. Tudo que estiver entre <HEAD> e </HEAD>
ir compor o cabealho, no aparecendo na pgina. O elemento prinicpal do cabealho
e o titulo do documento, que deve ser colocado entre <TITLE> e </TITLE>. Por fim,
existe o <BODY> e </BODY> que serve para indicar o corpo do texto.
EXEMPLO:
<HTML>
<HEAD>
Cabealho do Documento
</HEAD>

<BODY>
Corpo do Documento
<BODY>
</HTML>


4
Governo da Repblica
Portuguesa

AS TAGS HTML, HEAD, TITLE E BODY
As tags <HTML> e </HTML> servem para indicar ao browser onde comea e termina
um documento.
As tags <HEAD> e </HEAD> determina os comandos que devem ser lidos antes de
carregar o texto HTML, como por exemplo, mtodos de abertura da pgina, linguagens
incorporadas ao texto e o ttulo da pgina.
A utilizao da tag HEAD opcional, porm ferramentas de pesquisa como o Google
utilizam esta tag como parmetro para encontrar palavras-chave que identificaro um
site.
As tags que podem ser colocadas na parte HEAD so: base, link, meta, title, style,
script.
Base: define o URL do documento actual.
Exemplo: <base href=http://www.alcobias.net>
Link: estabelece uma organizao hierrquica para a navegao entre
documentos.
Exemplo: <link rel="index"href="index.html">
<link rel="previous" href="anterior.html">
<link rel="next" href="seguinte.html">
Meta: serve para definir os atributos identificadores do site como por exemplo
o autor da pgina, os direitos de autor e as palavras-chaves.

Sintaxe:
<META NAME="[author/copyright/keywords]"CONTENT="[Valor do atributo]">

Exemplo:
<META NAME="author"CONTENT="Paula Cardoso Alcobia">

Atributos:
NAME - identifica o identificador que se vai adicionar pgina, podendo ser:


5
Governo da Repblica
Portuguesa
- AUTHOR: autor da pgina;
- COPYRIGHT: direitos de autor;
- KEYWORDS. palavras-chave, utilizadas por ferramentas de pesquisa
para conhecer o contedo do site.

CONTENT - determina o contedo do identificador. Se um item possuir mais do
que um identificador, ento necessrio separ-los por virgulas.

Exemplo:
<HEAD>
<META NAME="author"CONTENT="Paula Cardoso Alcobia">
<META NAME="copyright"CONTENT="Paula Alcobia">
<META NAME="keywords"CONTENT="API A. Curso Tecnolgico
de Informtica, 11ano, Aplicaes Informticas">
</HEAD>

HTTP-EQUIV="REFRESH"
Um recurso da tag Meta que determina um tempo em segundos, antes que o
browser seja direccionado para a outra pgina.

Exemplo:
<html>
<head>
<META HTTP-EQUIV="REFRESH"CONTENT="5;URL=http://www.alcobias.net">
</head>
veja esta pgina por 5 segundos e depois ver o portal alcobia.
</html>

TITLE - o responsvel por identificar o ttulo da pgina, colocando na janela do
browser, ou seja na barra de ttulos.
Sintaxe:
<TITLE> [Ttulo da pgina] </TITLE>


6
Governo da Repblica
Portuguesa
Exemplo:
<head>
<title>" .. -..-..-..Pgina Pessoal da Paula Cardoso Alcobia..-..-..-..
</title>
</head>

STYLE - define um estilo embutido na pgina
Exemplo:
<style type="Text/css"> h1.mine{text-align:center:color:blue}</style>

Script - inclui scripts no documento. Estes so executados pela oredem que
aparecem no documento.
Exemplo:
<HEAD>
<SCRIPT LANGAUAGE="JavaScript">document.write("o meu primeiro
script")
</script>
</HEAD>

As tags <body > e </body> delimitam o corpo do documento. Estas contm as
tags e o texto que formam o contedo principal da pgina web, por exemplo,
pargrafos, listas, imagens, hiperligaes entre outros.

Definies de Carcter Entities
Alguns caracteres tm um significado prprio para o html e por isso, so caracteres
reservados, como, por exemplo o smbolo <. Para poder visualizar estes caracteres
necessrio recorrer ao uso de carcter entities.
O carcter entity composto por:


7
Governo da Repblica
Portuguesa
- o E comercial (&), o nome ou nmero da entidade precedido de cardinal(#) e o
smbolo ponto e virgula(;).
Alguns caracteres entities:
Visualizao Descrio
Nome da
entidade
Nmero da
entidade
Espao (non-breaking space)
< Menor que (less than) < <
> Maior que (greater than) > >
& E comercial (ampersand) & &
" Aspas (quotation mark) " "
Cntimo (de dlar) ¢ ¢
Libra esterlina (pound) £ £
Yen ¥ ¥
Euro € €
Marca de seco § §
Copyright © ©
Marca Registada (registered
trademark)
® ®
Marca Comercial (trademark) ™ ™

Os caracteres acentuados
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.
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 directamente sem necessidades de recorrer a entidades porque esto
sempre disponveis em todas as maquinas 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 carcter definidos em HTML.


8
Governo da Repblica
Portuguesa
Nota. os nomes das entidades so sensveis ao tipo de letra (maiscula ou minscula).

Entidades para caracteres do conjunto ISO 8859-1 (no ASCII)
Resultado Descrio Nome da
Entidade
Cdigo Numrico
Inserir um espao sem mudar de linha
(non-breaking space)

Ponto de exclamao invertido ¡ ¡
Cntimo(de dolar) ¢ ¢
Libra esterlina £ £
Dinheiro ¤ ¤
Yen ¥ ¥
Barra vertical descontinua ¦ ¦
Seco § §
Acento diaeresis(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 registada ® ®
Sinal (acento) ¯ ¯
Graus ° °
Mais ou menos ± ±
2 Sobrescrito ² ²
3 Sobrescrito ³ ³
Acento agudo ´ ´
Micro µ µ
Pargrafo ¶ ¶
Ponto a meia altura · ·
Cedilha ¸ ¸


9
Governo da Repblica
Portuguesa
Sobrescrito 1 ¹ ¹
Ordinal masculino º º
Fecho de aspas angulares (right) » »
Frao 1/4 ¼ ¼
Frao 1/2 ½ ½
Frao 3/4 ¾ ¾
Ponto de interrogao invertido ¿ ¿
Multiplicao × ×
Diviso ÷ ÷

Resultado Descrio
Nome da
entidade
Nmero da
entidade
capital a, grave accent À À
capital a, acute accent Á Á
capital a, circumflex accent Â Â
capital a, tilde Ã Ã
capital a, umlaut mark Ä Ä
capital a, ring Å Å
capital ae Æ Æ
capital c, cedilla Ç Ç
capital e, grave accent È È
capital e, acute accent É É
capital e, circumflex accent Ê Ê
capital e, umlaut mark Ë Ë
capital i, grave accent Ì Ì
capital i, acute accent Í Í
capital i, circumflex accent Î Î
capital i, umlaut mark Ï Ï
capital eth, Icelandic Ð Ð
capital n, tilde Ñ Ñ
capital o, grave accent Ò Ò
capital o, acute accent Ó Ó
capital o, circumflex accent Ô Ô
capital o, tilde Õ Õ
capital o, umlaut mark Ö Ö


10
Governo da Repblica
Portuguesa
capital o, slash Ø Ø
capital u, grave accent Ù Ù
capital u, acute accent Ú Ú
capital u, circumflex accent Û Û
capital u, umlaut mark Ü Ü
capital y, acute accent Ý Ý
capital THORN, Icelandic Þ Þ
small sharp s, German ß ß
small a, grave accent à à
small a, acute accent á á
small a, circumflex accent â â
small a, tilde ã ã
small a, umlaut mark ä ä
small a, ring å å
small ae æ æ
small c, cedilla ç ç
small e, grave accent è è
small e, acute accent é é
small e, circumflex accent ê ê
small e, umlaut mark ë ë
small i, grave accent ì ì
small i, acute accent í í
small i, circumflex accent î î
small i, umlaut mark ï ï
small eth, Icelandic ð ð
small n, tilde ñ ñ
small o, grave accent ò ò
small o, acute accent ó ó
small o, circumflex accent ô ô
small o, tilde õ õ
small o, umlaut mark ö ö
small o, slash ø ø
small u, grave accent ù ù
small u, acute accent ú ú
small u, circumflex accent û û
small u, umlaut mark ü ü


11
Governo da Repblica
Portuguesa
small y, acute accent ý ý
small thorn, Icelandic þ þ
small y, umlaut mark ÿ ÿ

Tags Elementares
Cabealhos
No corpo do texto podem ser colocados at seis nveis de cabealhos. A
hierarquia comea em <H1>, como o maior cabealho, e termina em <H6>,
como o menor. Os cabealhos <H5> e <H6> aparecem to pequenos no
browser que provavelmente nunca sero usados.
Exemplo:
<h1> isto um cabealho </h1<
<h2> isto um cabealho </h2>
O HTML adiciona de forma automtica uma linha em branco antes e depois de
um cabealho.

Pargrafos
A tag <P> serve para indicar o incio de um novo pargrafo. Se a tag <P> for
colocado antes de um cabealho (<H2>, por exemplo), a marca de pargrafo e
ignorada. Nesse caso, o prprio cabealho se encarrega de colocar o espao
necessrio.
Exemplo:
<p>isto um pargrafo</p>

Quebras de linhas
Assim como as marcas de pargrafo, as quebras de linha so indicadas por uma
tag simples. Para abrir uma nova linha, usa-se a tag <BR> ou "line break".
Exemplo:
Isto<br> um par-<br>grafo


12
Governo da Repblica
Portuguesa
A tag <br> uma tag vazia. Ela no pode ter qualquer contedo e no tem tag
de fim (fecho).

Divises
Para dividir uma pgina com linhas horizontais utiliza-se a tag <hr>. O hr no
possui uma tag de fecho. O quadro seguinte define os vrios atributos desta
tag.

Atributo Valor Descrio
Align Center
Left
right
Especifica o alinhamento da linha horizontal
Noshade True
false
Quando contm o valor true, a linha ter uma nica cor.
com false ter duas cores tentando dar a impresso de
relevo.
size Pixels
%
Especifica a espessura da linha horizontal
width Pixels
%
Especifica a largura da linha horizontal

Exemplo:
Isto algum texto <hr> Isto mais texto
O output fica assim:
Isto um texto
Isto mais texto

Comentrios
As tags de comentrio so especiais porque no se escrevem da mesma forma
que as tags que representam elementos normais, Os comentrios servem para
dizer ao browser que o seu contedo um comentrio e no pode ser
apresentado graficamente.


13
Governo da Repblica
Portuguesa
O exemplo seguinte mostra um comentrio:

O facto de termos um ponto de exclamao no incio diz ao browser que esta
uma tag especial, a qual no representa um elemento normal da linguagem
HTML

Listas
Listas ordenadas
As listas ordenadas so delimitadas pelas tags <ol> e </ol> e cada um dos seus itens
delimitado pelas tags <li> e </li>.
<LI> - marca um item de lista. Pode ser usado com tags <DL>, <UL>, <OL>,
<DIR> e <MENU>.
Exemplo:
<UL>
<LI>Item 1
<LI>Item2
</UL>
Aceito por: todos os browsers.
Atributos
Type=n: modifica o tipo de marca que ser colocada antes de cada item da lista.
Quando utilizado numa lista ordenada (<OL>), pode modificar o tipo de marca para um
crculo ou um quadrado. TYPE=CIRCLE coloca um crculo vazio (uma falha no Netscape
2.0 para Windows faz com que a mesma opo produza um quadrado vazio).
TYPE=DISC coloca um crculo cheio. TYPE=SQUARE coloca um quadrado cheio. Quando
utilizado numa lista no ordenada, modifica o tipo de carcter que utilizado para a
contagem. TYPE=A ou TYPE= a coloca marcas em ordem alfabtica (A,B,C ou a,b,c)-
TYPE=1 marca os itens em ordem numrica. TYPE=I ou TYPE=i marca os itens com
nmeros romanos (I,II,III ou i,ii,iii).
Exemplo:


14
Governo da Repblica
Portuguesa
<UL>
<Li type=square> Item 1
<LI>
</UL>
ou
<OL>
<Li> TYPE=a > Item 1
<li> Item 2
</OL>
Aceito por: Netscape 1.1 e Internet Explorer
<MENU> E </MENU> - Marcam o inicio e o fim de uma lista. Devem ser usados
junto com a tag <LI>.
Exemplo:
<Menu>
<Li> item 1
<li> item 2
</Menu>
Aceito por: Todos os browsers
<Dir> e </Dir> - Marcam o inicio e o fim de uma lista. Devem ser usadas junto
com a tag <Li>
Exemplo:
<DIR>


15
Governo da Repblica
Portuguesa
<Li> item 1
<li> item 2
</Dir>
Aceito por todos os browsers
<OL> e </OL> - Marcam o incio e o fim de uma lista ordenada. Os item da lista
so colocados em ordem e recebem na primeira linha um nmero ou letra.
Devem ser usados junto com a tag <LI>.

Exemplo:
<OL>
<Li> item 1
<li> item 2
</OL>
Atributos
START=n: especifica o nmero a partir do qual os itens da lista comeam a ser
contados. Sendo que n pode ser um nmero ou uma letra. Tambm podem ser
utilizados nmeros romanos.
Exemplo:
<OL START=3>
<Li> item 1
<li> item 2
</OL>


16
Governo da Repblica
Portuguesa
Aceito por: Internet Explorer e Netscape 1.1
Listas No ordenadas (Desordenadas)
As listas no ordenadas so limitadas pelas tags <UL> e </UL> e cada um dos seus itens
delimitado pela tags <li> e </li>
<UL> e </UL> - Marcam o inicio e o fim de uma lista no ordenada. Deve ser
usada junto com a tag <li>. os itens da lista recebem marcas grficas na
primeira linha conhecidas como bullets.

Exemplo:
<UL>
<Li> item 1
<li> item 2
</UL>
Listas de definio
As listas de definio so limitadas pelas tags <DL> e </DL>. Por sua vez, cada um dos
seus itens delimitado pelas tags <dt> e </dt> e cada uma das suas definies
delimitada pelas tags <dd> e </dd>.
<DL> e </DL> - Marcam o inicio e o fim de uma lista de definio. Devem ser
usadas com as tags <DT> e <DD>
Exemplo:
<DL>
<DT> Ttulo </DT>
<DD> Texto </DD>


17
Governo da Repblica
Portuguesa
<DT> Ttulo </DT>
<DD> Texto </DD>
</DL>
<DD> e </DD> - Marcam o incio e o fim do texto de uma lista de definio.
Devem ser usadas junto com os tags <DL> e < DT>.
Exemplo:
Exemplo:
<DL>
<DT> Ttulo </DT>
<DD> Texto </DD>
<DT> Ttulo </DT>
<DD> Texto </DD>
</DL>
Resumo dos elementos para as listas
Elementos Descrio
<ol> Define uma lista ordenada
<ul> Define uma lista no ordenada
<li>
<dl>
Insere um item na lista
Insere uma lista de definio
<dt> Apresenta a definio de um termo
<dd> Insere a definio de um termo
<dir> Utilize o <ul>


18
Governo da Repblica
Portuguesa
<menu> Utilize o <ul>

Definio do fundo da pgina
A definio do fundo da pgina pode ser feita atravs da atribuio de uma cor ou de
uma imagem.
Para a definio do fundo da pgina utilizam-se os atributos bgcolor e background da
tag <body>
O atributo bgcolor
O atributo bgcolor permite-nos escolher a cor de fundo da pgina. Existem trs formas
de indicar a cor de fundo da pgina: usando um cdigo de cor hexadecimal um cdigo
rgb e um nome de cor.
<body bgcolor=#000000>
<body bgcolor=rgb(0,0,0)>
<body bjcolor=black>
Todas as formas so validas para atribuir a cor de preto ao fundo da pgina.
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 por forma a ocupar todo fundo da pgina.
<body background="bonecos.gif">
<body background="http://www.clipart.com/smile.gif">
Marca de gua


19
Governo da Repblica
Portuguesa
No internet Explorer pode-se controlar o comportamento da imagem de fundo.
O background. Foi criado um atributo para o tag <Body> chamado
BGPROPERTIES. Com a opo BGPROPERTES-FIXED. O recurso da a impresso
da pgina ter uma marca d' gua e de que o texto flutua sobre o fundo.
<body background=fundo.gif BGPROPERTIES=FIXED>

Dicas

Sempre que usar uma imagem de fundo deve-se ter em considerao os seguintes
aspectos:

O tamanho da imagem (em kbytes) no deve ser demasiado grande.
Se a imagem de fundo combina bem com a cor do texto.
Se o fundo combina bem com as outras imagens que tem na pgina.
Se da repetio a imagem de fundo em mosaico resulta um padro perfeito.
Se a imagem no incomodativa e no desvia a ateno do texto.
A linguagem HTML define vrios elementos para formatar texto, como por exemplo
escrever em negrito, itlico, ou sublinhado.
Estilos de caracteres
Elementos Descrio
<b>
<big>
Texto a negrito
Texto Grande
<em> Texto Itlico Sombreado
<i> Texto em Itlico
<small> Texto pequeno
<strong> Texto grande negrito
<sub>
<sup>
Inferior linha
Superior linha
<ins> Texto grande negrito
<del> Texto rasurado
<s> Texto rasurado


20
Governo da Repblica
Portuguesa
<strike> Texto rasurado
<u> Texto sublinhado
<TT> Texto monoespaado

Exemplo
<b> Texto em negrito </b>
<i> Texto em Itlico </i>
<u> Texto sublinhado </u>
As tags de estilo podem ser usadas uns sobre os outros, acumulando seus efeitos.
<B> <I> texto em negrito e itlico </i></B><p>
<B> <TT> texto nonoespaado em itlico </TT></i><P>
<i><tt> Texto monoespaado em itlico </tt></I><p>
<B> <TT> <i> Texto monoespaado em negrito e itlico </i> </TT> </B>
Para alterar a cor, o tipo de letra e o seu tamanho nos documento HTML, utiliza-se a
tag <font> que pode conter os atributos opcionais size, color e face.
Tamanho da caracteres atributos Size da tag <Font>
Exemplo:
<font Size=7> Texto </font>
A tag <font> pode ser atribudo a qualquer parte do texto, com excepo dos ttulos
(<H1>, <H2> etc.). Os valores do atributo Size variam de 1 a 7. O tamanho normal do
texto nos Browsers equivalente a SIZE=3.
<FONT SIZE=7> Texto com Font size=7 </font> <p>
O tag <font> tambm pode ser utilizado com um atributo diferente para cada letra. A
aplicao mais bvia a colocao de uma capitular, aquela letra em tamanho maior
no incio de um pargrafo.
<font size=7> T </font> <Font size=4> Texto </font>


21
Governo da Repblica
Portuguesa
Tambm possivel modificar o tamanho de todo o texto de uma vez s colocando a
tag <BaseFont> no topo do texto.
<BaseFont Size=5>

Exemplo:
<Body>
<Font Size=7> Texto com Font Size=7 </font> <p>
<Font Size="-2"> Texto com Font Size=-2 </font> <p>
<Font Size="-1"> Texto com Font Size=-1 </font> <p>
<Font Size="+1"> Texto com Font Size=+1 </font> <p>
<Font Size="+4"> Texto com Font Size=+4</font> <p>
</body>

Cores
<font color=ffffff> Texto na cor branca </font>
Ou
<Font color=White> texto na cor branca </font>

Tipos de Fontes

Um dos tipos de fontes mais comum o arial.
Exemplo:
<font Face=arial < <h1> Titulo principal </h1>

Alinhamento


22
Governo da Repblica
Portuguesa
A primeira providencia para melhorar a aparncia da pgina modificar o alinhamento
do texto. O alinhamento padro (como o qual vem configurado os Browsers)
esquerda. Para mudar o alinhamento padro deve-se adicionar o atributo ALIGN
dentro das tags que marcam os ttulos e os pargrafos.
<h1 align=center> ttulo </h1>
<p Align =center< Este um pargrafo centralizado. </P>

Desta vez, a tag <p> ganhou uma opo (ALIGN=CENTER). Por isso, preciso utilizar
uma tag </P> para indicar que apenas aquele pargrafo receber um alinhamento
diferente.

Texto pr-formatado
Com a pr-formatao, pode-se controlar o espaamento com a barra de espao e
colocar o texto em praticamente qualquer lugar da pgina.
Apesar da vantagem dessa forma de alinhamento arbitrrio, o tag <pre> muda o tipo
de carcter para uma fonte monoespaada. Uma fonte monoespaada aquela na
qual todos os caracteres ocupam o mesmo espao horizontal, ao contrrio da fonte
proporcional, na qual o "i" ocupa menos espaos do que o "a", por exemplo.

Exemplo.
<pre> Este texto est pr-Formatado. </pre>

Margem

O texto sempre comea a uma determinda distncia da janela do Browser. s vezes,
necessrio aumentar a margem e fazer com que o texto comece mais para dentro da
pgina. As tags <BLOCKQUOTE> E </BLOCKQUOTE> serve para aumentar a margem. O
efeito dessa Tag pode ser acumulado para conseguir margens maiores. Veja os
exemplos:
<blockquote> Texto com mais margem</blockquote>
<blockquote> <blockquote> texto com mais margem ainda
</blockquote></blockquote>

Formataes Lgicas


23
Governo da Repblica
Portuguesa
Elementos Descrio
<abbr> Define uma abreviatura
<acronym> Define um acrnimo
<address> Define um endereo (postal)
<bdo> Define a direco de escrita do texto
<cite> Citao
<dfn> Apresenta a definio de um termo
<var> Texto que representa uma varivel
<samp> Amostra do cdigo de computador
<code> Define texto que cdigo de computador

Marquee

O internet Explorer implementa uma forma muito simples de dar movimento ao texto.
Uma serie de atributos permitem controlar o tipo de movimentos do texto (da
esquerda para a direita ou vice-versa), a velocidade e o tamanho, entre outras coisas.

Sintaxe
<marquee behavior="[scroll/slide/alternate]"
Direction="[Left/Right]"
Loop="[1..N/Infinite]"
Align="[Left/right/center]" Bgcolor="[Color]"
Scrollamount="[espao]" scrolldelay="[tempo]"
Height="[altura]" widht="[largura]"
Hspace="[espaamento horizontal]"
Vspace="[espaamento vertical]" [letreiro]</marquee>


24
Governo da Repblica
Portuguesa

Behavior- define como o texto em movimento vai deslizar no monitor.
Scroll- passa o texto continuamente no mesmo sentido
Slide- o texto parte de um ponto do monitor e vai at outro e para.
Alternate- O texto vai e vem.
Direction-define a direo em que o texto vai deslizar.
Loop- determina quantas vezes o texto vai deslizar no monitor.
Height e width altura e largura
Hspace e Vspace determina o espao em pixeis que deve ficar livre em torno do
texto em movimento. Hspace- Espao horizontal e Vspace espao vertical
Bgcolor- cor de fundo do texto em movimento
Scrollamount e scrolldelay- controlam a velocidade do texto em movimento. O
scrolldelay define o tempo em milissegundos, que o texto em movimento vai demorar
em cada um dos quadros.
O scrollamount define a quantidade de pixels que vai percorrer em cada quadro.

Exemplo:
<marquee behavior=alternate height=30 widht=300 direction=left scrollamount=20 bg
color=blue> ol melguinhas. </marquee>
Blink- faz com que o texto fique a piscar.
Exemplo:
<blink> A minha Escola </Blink>

Uso das Cores
Os cdigos das cores em HTML tm por base a codificao RGB(Red,Green,Blue) e
podem ser referenciadas de 3 formas distintas:
-pelo nome das cores em ingls, por exemplo, black;
-pelo sistema de numerao hexadecimal, por exemplo, #ffff00
-pelo sistema de numerao decimal, por exemplo, rgb(2,255,0).


25
Governo da Repblica
Portuguesa

Formas de exprimir cores
Na notao hexadecimal as cores exprimem-se usando trs nmeros hexadecimais que
definem as quantidades de encarnados, verdes e azul que entram na composio de
uma determinada cor. O valor mais baixo de uma determinada cor o (#00 na notao
hexadecimal) e o valo mais alto 255 (#FF em notao hexadecimal.)
Assim, a cor preta tem 0 de encarnado, 0 de verde, e 0 azul pelo que se escreve na
forma #000000. J o branco tem 255 encarnados, 255 verdes e 255 azul pelo que se
escreve como #ffffff. O amarelo forte tem 255 de encarnado, 255 de verde e zer de
azul e escreve-se como #ffff00.
A tabela seguinte mostra os resultados de diversas combinaes de cores:

Cor Cdigo Hexadecimal Color RGB (decimal)

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)

Nomes de cores
A tabela seguinte mostra as 16 cores cujos nomes foram definidos oficialmente pela
W3C. todos os browsers reconhecem estes nomes pelo que pode us-los sem qualquer
problemas.


26
Governo da Repblica
Portuguesa
Cores com Nomes Atributos oficialmente
Aqua
(#00FFFF)
Black
(#00000)
Blue
(#0000FF)
Fudisia
(#FF00FF)
Green
(#008000)
Gray
(#808080)
Lime
(#00FF00)
Maroon
(#800000)
Navy
(#000080)
Olive
(#808000)
Purple
(#800080)
Red
(#FF0000)
Silver
(#C0C0C0)
Teal
(#008080)
White
(#FFFFFF)
Yellow
(#FFFF00)

Cores Seguras da Web
Problemas causados por um nmero reduzido de cores
Todos os computadores modernos so capazes de mostrar dezenas de milhar 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. Actualmente estas
limitaes j quase no existem.
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 operativos Windows e Aplle Macintosh reservavam 20
cores cada um (40 no total) para desenhar os seus interfaces grficos.


27
Governo da Repblica
Portuguesa
Assim, de um total de 256 cores possveis, apenas 216 podiam se escolhidas
livremente com 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 consequncias 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

As 216 cores seguras da Web, juntamente com os seus cdigos hexadecimais (o
carcter # no inicio foi omitido)
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF


28
Governo da Repblica
Portuguesa
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

Tons de Cinzento
As cores cinzentas obtm-se combinando quantidades iguais de encarnado, verde e
azul. A cor branca corres ponde ao cinzento mais claro de todos e obtm-se juntando
255 cores de encarnado, 255 cores de verde e 255 de azul (#FFFFF em hexadecimal.) o
preto e o cinzento mais escuro de todos obtm-se colocando todas as cores a zero
(#000000 em hexadecimal.) Entre este dois valores extremos temos 254 graus de
intensidade possveis.


29
Governo da Repblica
Portuguesa
A tabela seguinte da uma ideia dos tons de cinzento que podemos obter:
Tons de cinzento Hexadecimal RGB
#000000 rgb(0,0,0)
#080808 rgb(8,8,8)
#101010 rgb(16,16,16)
#181818 rgb(24,24,24)
#202020 rgb(32,32,32)
#282828 rgb(40,40,40)
#303030 rgb(48,48,48)
#383838 rgb(56,56,56)
#404040 rgb(64,64,64)
#484848 rgb(72,72,72)
#505050 rgb(80,80,80)
#585858 rgb(88,88,88)
#606060 rgb(96,96,96)
#686868 rgb(104,104,104)
#707070 rgb(112,112,112)
#787878 rgb(120,120,120)
#808080 rgb(128,128,128)
#888888 rgb(136,136,136)
#909090 rgb(144,144,144)
#989898 rgb(152,152,152)
#A0A0A0 rgb(160,160,160)
#A8A8A8 rgb(168,168,168)
#B0B0B0 rgb(176,176,176)
#B8B8B8 rgb(184,184,184)
#C0C0C0 rgb(192,192,192)
#C8C8C8 rgb(200,200,200)
#D0D0D0 rgb(208,208,208)
#D8D8D8 rgb(216,216,216)
#E0E0E0 rgb(224,224,224)
#E8E8E8 rgb(232,232,232)
#F0F0F0 rgb(240,240,240)
#F8F8F8 rgb(248,248,248)
#FFFFFF rgb(255,255,255)


30
Governo da Repblica
Portuguesa

A tabela correspondente ao cdigo das cores seguras pode ser consultado em:
http://www3shools.com/html/html/colors.asp
http://www3shools.com/html/html/colorsfull.asp
http://www3shools.com/html/html/colorsnames.asp

Uso de imagens
possvel colocar variados formatos de imagens nos documentos HTML, embora, por
questo de eficincia e tamanho, os formatos mais comuns so o JPEG, o GIF e o PNG.
Sintaxe:
<img src=[url da imagem]
ALIGN=
[center/left/rigth/top/middle/bottom/absmiddle/texttop/baseline/absbottom]
WIDTH =[largura] Height=[altura]
VSPACE =[Espaamento vertical]
HSPACE=[Espaamento Horizontal]
BORDER=[Borda]
ALT=[texto alternativo]
LOWSRC=[url de baixa qualidade]
O elemento <img> e o atributo src.
A insero de imagens num documento faz-se com o elemento <img>. Este elemento
tem contedo vazio, o que significa que ele apenas possui atributos e no tem a tag de


31
Governo da Repblica
Portuguesa
fecho. O atributo src (que uma abreviatura de source, ou origem) indica o nome e
o local em que pode ser encontrado o ficheiro que contm a imagem.
Exemplos:
<img src=imagem.jpg> -apresenta uma imagem de nome imagem.jp que se
encontra no mesmo directrio da pgina.
<img src=/imagem.gif> -apresenta uma imagem de nome imagem.gif que se encontra
no directrio raiz do host.
<img src=/imagem/jpg > - apresenta uma imagem de nome imagem.jpg que se
encontra no directrio um nvel abaixo do directrio da pgina.
<img src=http://www.alcobias.net/paulacardoso/imagens/imagem.jpg> -apresenta
uma imagem de nome imagem.jpg que se encontra no site Alcobia.
O atributo alt
O atributo alt usa-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: <img src=imagem.gif Alt=nome_da_imagem>
Exemplo: <img src=image.gif alt=Escola SJE>
O atributo alt deve conter uma descrio daquilo que a imagem contm para que
seja possvel compreender o seu contedo mesmo sem a ver. A utilizao do atributo
alt 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 o atributo alt o contedo das imagens seria
sempre um mistrio.

Alinhamento da imagem
possvel mudar o alinhamento utilizando o atributo ALIGN=dentro da tag <IMG>.
Exemplo: <IMG SRC=imagem.gif ALIGN=TOP>


32
Governo da Repblica
Portuguesa

ALIGN=LEFT faz a imagem flutuar esquerda, enquanto o texto circunda a imagem
pela direita.

ALIGN=RIGHT faz a imagem flutuar direita, enquanto o texto circunda a imagem
esquerda.

ALIGN=TOP alinha o topo da
imagem com o topo do
elemento mais alto da linha,
que pode ser uma outra
imagem.
ALIGN=TEXTTOP alinha o topo
da imagem com o topo do
texto.


33
Governo da Repblica
Portuguesa
ALIGN=MIDDLE alinha a base do
texto com o centro da imagem.

ALIGN=BOTTOM alinha a imagem com a
base dos outros elementos da linha.
ALIGN=BASELINE E ALIGN=ABSBOTTOM
alinham a imagem com a base dos
outros.

ALIGN=ABSMIDDLE
alinha o centro do texto
com o centro da
imagem.

Contorno
O atributo BORDER. O valor da borda expresso em pixels.
Exemplo: <IMG SRC=imagens/imagem.gif BORDER=2>


34
Governo da Repblica
Portuguesa
Margens
possvel definir as margens separadamente ou em conjunto. Para mais espao em
cima e em baixo da imagem, o atributo e VSPACE. Se o problema for espao dos lados
da imagem usa-se o atributo HSPACE para definir as margens horizontais.
<IMG SRC=imagem.gif VSPACE=10 HSPACE=20>
Cada um desses atributos (HSPACE e VSPACE) adiciona espao nas duas faces a
imagem (em cima e em baixo e a direita e a esquerda).
Baixa resoluo
A incluso da imagem de baixa resoluo e conseguida com a colocao do atributo
LOWSRC que indica o ficheiro que ser carregado primeiro.
<IMG SRC=altaresco.gif LOWSRC=baixares.gif>
No exemplo acima, o arquivo altaresco.gif a imagem definitiva, de alta resoluo. O
arquivo baixares.gif a imagem de baixa resoluo que ser carregada antes.
Controlar a quebra de linha
Quando aplicamos atributos de alinhamento na imagem, o texto fica colocado ao lado
da imagem. Quando necessrio quebrar o texto e o prximo paragrafo se apresente
aps a imagem, ento utiliza-se o atributo clear, na tag BR.
Sintaxe: <BR CLEAR =[left/right/all]
Exemplo:
<p align=left><imgsrc=../imagens/Morangos.jpgwidth=96
height=142align=left> O morango rico em gua e tem baixos nveis de hidratos
de carbono.bTem tambm um elevado contedo de potssio, responsvel pela
transmisso de impulsos nervosos e pelo bom funcionamento dos msculos..
<BR CLEAR=left> O fruto conta ainda com cido flico, que intervm na produo de
glbulos vermelhos e brancos e na sntese de anticorpos, o que ajuda a reforaras


35
Governo da Repblica
Portuguesa
defesas naturais, sendo muito recomendado s mulheres grvidas na preveno da
espinha fbida do feto e de anemias. Alm disto o morango tem ainda um efeito
diurtico, que favorece a eliminao do cido rico e sais.

Hiperligaes

Ao criar links, essencial compreender o caminho do ficheiro entre o documento do
qual parte o link e o que est a ser vinculado.
Cada pgina da Web tem endereo nico chamado Universal Resource Locator (URL).
Existem trs tipos de caminhos de links:
1. Caminhos absolutos;
2. Caminhos relativos a documentos;
3. Caminhos relativos raiz.

Caminhos absolutos fornecem a URL completa do documento vinculado. Por
exemplo: http://www.essje.pt/paginashtml/escola/orgaos.htm um caminho
absoluto. Deve ser utilizado um caminho absoluto para estabelecer um link a u
documento noutro servidor.


36
Governo da Repblica
Portuguesa
Caminhos relativos a documentos so os mais apropriados para os links locais na
maioria dos sites da Web. Eles so particularmente teis quando o documento actual e
o vinculado esto na mesma pasta, e possivelmente permanecero juntos.
O caminho relativo a documento tambm utilizado para estabelecer um link a um
documento noutra pasta especificando o caminho atravs da hierarquia de pastas, do
documento actual ao vinculado. Na especificao desse caminho, no consta a parte
da URL absoluta, que a mesma para ambos os documentos. fornecido apenas o
segmento do caminho que diferente.
Para estabelecer um link a outro ficheiro na mesma pasta que o documento
actual, basta indicar o nome do ficheiro.
Para vincular a um ficheiro numa subpasta da pasta do documento actual,
fornea o nome da subpasta, coloque uma barra inclinada para a direita e, em
seguida o nome do ficheiro.
Para vincular a um ficheiro numa pasta-me daquela onde est o documento
actual, preceda o nome do arquivo por ../ (onde .. significa um nvel acima
na hierarquia de pastas.).
Caminhos relativos raiz fornecem o caminho da pasta raiz do site a um
documento. Pode ser conveniente utilizar esses tipos de caminhos ao trabalhar num
site grande da Web, que use vrios servidores, ou um servidor que hospede diversos
sites diferentes. Contudo, se no estiver familiarizado com este tipo de caminho, pode
ser melhor continuar a usar os caminhos relativos a documento.
Um caminho relativo raiz inicia com uma barra inclinada para a direita, que
representa a pasta raiz do site. Por exemplo: /escola/orgaos.html um caminho
relativo raiz.
Podem ser criados diversos tipos de links num documento:
Um link a outro documento ou ficheiro, como um ficheiro de imagem, filme,
PDF ou som;
Um link de ancora com nome, que salta para uma localizao especifica num
documento;


37
Governo da Repblica
Portuguesa
Um link de correio electrnico, que cria uma nova mensagem com o endereo
do destinatrio j preenchido;
Os links nulos e de script, que permitem anexar comportamentos a um objecto
ou criar um link que execute cdigo JavaScript.
O elemento <a> 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 ficheiro de som, um filme, etc.
Sintaxe:
<a href=url> Texto a mostrar</a>
O atributo href (Hipertext REFerence) contem 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.
NOTA: todos os ficheiros referidos numa pagina, quer links a outras paginas, quer
imagens, etc., devem ser escritos em minsculas, pois a grande maioria dos servidores
Web fazem a distino entre maisculas e minsculas.
Diversos tipos de links

Uma imagem com um link:
<a href=contactos.htm> <img src=contactos.gif></a>
Um link a outro site:
<a HREF=http://www.essje.pt>HTML Pgina da Escola</a>
Um link para download:
<a HREF=Exemplos.ZIP>Faa o Download Aqui</a>
Um link a outra pagina do mesmo site:
<a HREF=alunos.html></a>


38
Governo da Repblica
Portuguesa
O atributo target
O atributo target permite-nos abrir a ligao numa janela ou moldura (frame)
diferente daquela em que foi feito o clique. Os valores padro so:
_blank (uma nova janela)
_self (prpria janela)
_top (na janela principal do browser, em casos de frames)
_parent (s para ligaes que esto numa moldura, ou frame) a ligao abre-
se no documento que contem a moldura (que ter sido criada atravs de um
<frame> ou de um <iframe>)
Nome a especificar (nome da frame)
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 directamente
para esse local a partir de outros documentos ou de outros pontos do mesmo
documento sem que o utilizador tenha de se deslocar na pgina.
A criao de um link a uma ancora com nome um processo em duas etapas.
Primeiro, crie uma ancora com nome e, em seguida, crie um link a essa ancora.
Sintaxe de uma ncora: < a name=nome>Texto a mostrar</a>
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:
<a name=topo>Voltar ao Menu</a>


39
Governo da Repblica
Portuguesa
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 directamente
a ele.
<a href=#topo>Topo</a>

Exemplo de ncoras

ncora Topo:
<p> <font color=#990000size=5face=Arial, Helvetica, sans-serif> <a
name=Topo> </a> Gros</font></p>

Link ncora Topo: <a href=#topo>Topo</a>


40
Governo da Repblica
Portuguesa
Cores dos links
A cor dos links definida na tag <BODY>.
<BODY LINK=RED ALINK=BLUE VLINK=GREEN>
Onde:
LINK determina a cor dos links no visitados
ALINK determina a cor que os links devem ter quando clicados
VLINK determina a cor dos links j visitados

Link de correio electrnico
Um link de correio electrnico abre uma nova janela de mensagem sempre que for
clicado. Para que um link seja identificado como link de correio electrnico
necessrio escrever antes do endereo electrnico a palavra mailto:
Exemplo para criar um link de correio electrnico:
<a href=mailto:moldura_cafe@hotmail.com>Contacto atravs de E-mail</a>

Image maps

Um mapa de imagens uma imagem que foi dividida em regies, ou pontos activos:
quando um ponto activo clicado, ocorre uma aco (um novo ficheiro aberto, por
exemplo).
O conjunto destes pontos activos permite criar diferentes formas, como crculos,
rectngulos e polgonos, construindo, desta forma um mapa de imagem, em que cada
uma das formas geomtricas possibilita uma hiperligao para outro documento.


41
Governo da Repblica
Portuguesa

Definir as zonas das imagens
Para definir as zonas das imagens necessrio conhecer as coordenadas dos
pontos essenciais, que identificam as formas dessas zonas num mapa de imagem.
Criao de server-side e client-side image maps
A criao de mapas pode ser feita de duas formas: criao do mapa do lado do
servidor (server-side image map) ou do lado do cliente (client-side image map).
A criao do mapa de imagem do lado do servidor, mtodo inicialmente usado,
guardar e executar no servidor Web, como recurso ao CGI, um mapa separado do
documento. Se a grande vantagem ser suportado por todos os browsers, o maior
inconveniente provocar uma carga de processamento no prprio servidor, pelo
que se torna difcil encontrar quem permita este tipo de processo nos seus
servidores.
Para utilizar este mtodo necessrio referenci-lo atravs do atributo ismap da
tag img. Este atributo indica ao browser que a referida imagem no uma
hiperligao, mas sim o fundo sobre a qual estaro as hiperligaes definidas no
mapa.
<a href=nome_do_ficheiro_do_mapa_de_imagem.map>
<img src=nome_do_ficheiro_de_imagem.gifismap> </a>
A criao do mapa de imagem do lado do cliente feita aproveitando a capacidade
de processamento deste. Para utilizar este mtodo necessrio enviar o mapa de
imagem dentro do documento HTML, indicando ao browser o que fazer, atravs da
utilizao do atributo usemap da tag img. Este atributo indica ao browser que a
referida imagem o fundo sobre o qual esto as hiperligaes definidas no mapa.
<img src=nome_do_ficheiro_de_imagem.gifusemap=nome do mapa de
imagem atl=>


42
Governo da Repblica
Portuguesa
Para definir um mapa de imagem utiliza-se as tags <map> e </map>. Dentro desta
tag utiliza-se a tag <area> que contem os tributos que permitem definir as zonas do
mapa de imagem e as respectivas hiperligaes, entre outros.
Atributos da tag <area>
Coords Se shape="rect" ento
coords="left",
top,right,bottom".
Se shape="circ" ento
coords="centerx,
centery,radius"
Se shape="poly" ento
coords="x1,y1,x2,y2,...,xn,yn
"
Especifica as coordenadas que definem a rea
"clicvel"
Href

nohref
URL

True
false
Especifica o valor do URL atribudo rea
Se false exclui uma rea do mapa de imagem

shape Rect
Rectangle
Circ
Circle
Poly
polygon
Define a forma geomtrica da rea (retngulo,
circulo ou polgono)
Target _blank
_parent
Especifica a janela (ou a moldura) onde se abre
a ligao ao clicar.
_blank- a ligao abre-se numa nova
janela


43
Governo da Repblica
Portuguesa
_self
_top
_self- a ligao abre-se na prpria janela
que contm o elemento <a>
_parent- (s para ligaes que esto
numa moldura, ou "frame" a ligao
abre-se no documento que contm a
moldura (que ter sido criado atravs
de um <frame> ou de um elemento
<iframe>)
_top- a ligao abre-se no documento
que ocupa a posio mais elevada na
hierarquia (aquele que no est dentro
de nenhum <frameset> nem num
<iframe>

O atributos id e name da tag <map>
id Unique_name Define um nome nico que identifica o mapa
name Unique_name Define um nome nico para o elemento <map> (para
manter a compatibilidade com os browsers antigos)

Exemplo:
<html>
<head>
<title>Exemplo</title>
</head>
<body>
<img src=botoes/principal.gif width=800height=100 align=top
bordercolor=#FFFFFFBORDER=0 usemap=#banner>


44
Governo da Repblica
Portuguesa

<map id=bannername=banner>

<area shape=rect cords=189,81,288,100 href=index.htmltarget=_self
alt=Pgina Principal>
<area shape=rect cords=323,81,425,102 href=paginas/trabalhos.html
target=_self alt=Trabalhos por mim relaizados>
</map>

<p> <b> Nota:</b> O atributo usemap utilizado com o element img refere-se ao
atributo id ou o atributo name (depende do browser) existente num elemento
map. Por isso, se queremos garantir a compatibilidade da pgina com todos os
browsers, devemos aplicar ambos os atributos (id e name) ao elemento map.
</p>

</body>
</html>

Compatibilidade com os vrios browsers
Para tornar o HTML compatvel com os browsers como o Netscape e afins, deve-se
acrescentar o atributo id tag <map>, j que este no reconhece o atributo name.
<map id=banner name=banner>

Insero de elementos multimdia


45
Governo da Repblica
Portuguesa
Gifs animados
Para inserir um gif animado num documento html utilize-se a tag <img> e indica-se o
nome do ficheiro que se deseja abrir atravs do seu atributo src.
<img src=nome do ficheiro do gif animado>
Vdeo
A Microsoft inventou um atributo chamado DYNSRC (de dynamic source, fonte
dinmica) para ser includo dentro do tag <IMG>. O formato do ficheiro de vdeo
suportado o AVI (Audio Video Interleave).
<IMG DYNSRC=vdeo.avi SRC=imagem.gif WIDTH=50 HEIGHT=50
START=MOUSEOVER LOOP=INFINITE>

O atributo START=MOUSEOVER indica que o vdeo comear a ser executado quando o
utilizador passar a mousse sobre ele. O atributo LOOP=INFINITE declara que o vdeo
ser visualizado continuamente at que o utilizador mude de pgina.

Outros atributos so:
START=FILEOPEN o vdeo comea a ser visualizado assim que a pgina carregada
CONTROLS adiciona um conjunto de botes para controlar a execuo do vdeo
LOOP=n executa o vdeo n vezes. Se for colocado LOOP=5, o vdeo ser visualizado
cinco vezes
LOOPDELAY=n especifica, em milissegundos, de quanto em quanto tempo o vdeo
ser executado quando colocado em loop.

Som
Para colocar som, a Microsoft criou o tag BGSOUND. Pode-se incluir udio nos
formatos WAV, AU ou MIDI.
<BGSOUND SRC=som.wav LOOP=INFINITE>

Ficheiros de vdeo e udio embebidos e ancorados

Para embeber ou inserir um ficheiro de som ou de vdeo num documento HTML
utiliza-se a tag <embed>. Quando se utiliza esta tag, os ficheiros de som podem ser


46
Governo da Repblica
Portuguesa
automaticamente reproduzidos utilizando suplementos ou plug-ins e surgem como
objecto a ser controlado na pgina Web.

Caso o suplemento ou Plug-in no exista, o browser reagir com uma das trs
possibilidades: ignora a instruo, pergunta o que deseja fazer com o ficheiro ou
indica que necessita de um suplemento e se gostaria de o descarregar.

A tag embed tem como principais atributos o src, que se iguala ao url do ficheiro
aembeber, o autostart, o hidden e o loop, que pode assumir valores True ou False.

Autostart define se o objecto deve ser iniciado imediatamente aps ter sido
carregado.

Hidden define se o objecto deve ser visvel na pgina Web.

Loop reproduz continuamente o ficheiro.

udio:

<embed src=nome do ficheiro de som autostart=True hidden=False loop=False
width=145 height=55 align=center> </embed>

Video:

<embed src=nome do ficheiro de vdeo autostart=false loop=Falase
align=center> </embed>

<a href=nome do ficheiro de vdeo> Texto associado hiperligao </a>

Tabelas

As tabelas definidas em HTML tem permitido apresentar dados em forma tabular e
constituir arranjos de pgina complexos.


47
Governo da Repblica
Portuguesa
Definir tabelas
As tabelas definem-se com o elemento <table>. Uma tabela divide-se em linhas
(com o elemento <tr>, cujo nome deriva de table row), e cada linha divide-se em
clulas (definidas com o elemento <td>, cujo o nome deriva de table data). Uma
clula pode conter dados, textos, imagens e outros elementos do HTML.
Sintaxe:
<TABLE WIDTH=[largura] HEIGHT=[altura]
ALIGN=[left/center/right]
BGCOLOR=[COR] BACKGROUND=[url]
CELLSPACING=[espaamento]
BORDER=[espessura] BORDERCOLOR=[cor]
BORDERCOLORDARK=[cor] BORDERCOLORLIGHT=[cor]
FRAME=[estilo borda]>
<TR ALIGN=[left/center/right] VALIGN=[top/middle/bottom]
BGCOLOR=[colr] BACKGROUND=[URL]>
<TD WIDTH=[largura] HEIGHT=[altura]
CELLPADDING=[distanciamento]
CELLSPACING=[espaamento]
ALIGN=[left/center/right]
VALIGN=[top/middle/bottom]
BGCOLOR=[cor] BACKGROUND=[url]
COLSPAN=[celulas] ROWSPAN=[celulas]>
[conteudo]
</TD>
</TR>
</TABLE>


48
Governo da Repblica
Portuguesa
Atributos:
WIDTH determina a largura da tabela ou da clula e aceita valores em pixies
ou em percentagem.
HEIGHT determina a altura da tabela ou da clula e aceita valores em pixis
ou em percentagem.
ALIGN determina o alinhamento da tabela em relao pgina.
VALIGN determina o alinhamento vertical do contedo de uma clula. O valor
padro para a maioria dos browsers e centralizado (middle).
BGCOLOR determina a cor de fundo.
BACKGROUND atribui uma imagem de fundo sua tabela, linha ou clula.
CELLPADDING determina em pixis a distncia existente entre as bordas da
clula e o seu contedo.
CELLSPACING determina o espao em pixis existente entre uma borda e
outra.
BORDER determina a espessura do limite da tabela. O padro sem limite.
BORDERCOLOR determina a cor do limite (borda) da tabela.
BORDERCOLORDARK como os limites da tabela apresentam a colorao de
forma diferente para criar a sensao de tridimenso, podemos determinar de
forma diferente as cores do lado escuro e do lado claro da tabela.
BORDERCOLORDARK determina a cor do lado escuro da borda ( esquerda e
acima da tabela).
BORDERCOLORLIGHT determina a cor do lado claro da borda ( direita e
abaixo da tabela).
FRAME pode alterar o posicionamento dos limites de uma tabela. Os valores
vlidos para o atributo frame so:
Void elimina os limites externos;
Above apenas o limite superior;
Below apenas o limite inferior;
Hsides lados horizontais, ou seja, os limites de cima e de baixo;
Vsides lados verticais, esquerda e direita da tabela
Lhs limite do lado esquerdo;
Rhs limite do lado direito;


49
Governo da Repblica
Portuguesa
Box limite completo (padro);
Broder limite completo (padro).
COLSPAN atributo que une duas ou mais clulas horizontalmente.
ROWSPAN atributo que une duas ou mais clulas verticalmente.

Exemplo:
<table border=1>
<tr>
<td> linha 1, celula 1 </td>
</tr>
<tr>
</tr>
</table>

Definio das reas da tabela

As tags de definio das reas da tabela so:
<THEAD> - cabealho da tabela, posiciona a linha no inicio da tabela.
<TFOOT> - rodap da tabela, posiciona a linha no fim da tabela.
<TBOBY> - corpo da tabela, posiciona a linha no fim da tabela.
Basicamente as tags de definio de reas da tabela comportam-se como a tag
de linha (<TR>) e aceitam os mesmos parmetros.

Exemplo:
<table border = 1>
Linha 1, clula 1 Linha 1, clula 2
Linha 2, clula 1 Linha 2, clula 2


50
Governo da Repblica
Portuguesa
<thead>
<tr>
<td> Este texto est sob um elemento </td>
</tr>
</thead>

<tfoot>
<tr>
<td> Este texto est sob um elemento tfoot </td>
</tr>
</tfoot>
<tbody>
<tr>
<td> Este texto est sob um elemento body >/td>
</tr>
</tbody>
</table>

Ttulo da tabela
Para activar um ttulo para uma tabela, deve-se utilizar a tag CAPTION.
Sintaxe:
<CAPTION ALIGN= [left/center/right] VALIGN=[top/bottom]> [ttulo]
</CAPTION>
EXEMPLO:
<table border=1>
<caption> Isto uma legenda </caption>
<tr>
<td> clula 1 </td>
<td> Clula 2 </td>
</tr>
</table>


51
Governo da Repblica
Portuguesa

Molduras (frames)

O que uma frame?
As molduras so subjanelas definidas sobre a janela principal do browser. Estas
subjanelas so criadas dividindo a janela em vrias partes. Cada uma dessas
partes pode apresentar uma pgina da Web diferente.
Vantagens e desvantagens das molduras
As molduras permitem-nos apresentar mais do que uma pgina HTML numa
nica janela do browser. Cada pagina esta dentro da sua prpria moldura
(subjanela) e independente das restantes pginas. Podemos determinar
regies fixas nas molduras, apresentando por exemplo um logtipo de uma
empresa, um menu de navegao, etc.
Apesar de oferecerem alguma liberdade ao facilitarem bastante a criao de
barras de navegao em conjuntos de documentos com muitas pginas e de
tornarem bastante mais rpido o carregamento das pginas, as molduras
tambm podem dar origem a algumas dificuldades, tais como:
O criador de pginas v-se obrigado a lidar com um nmero maior de
pginas ao mesmo tempo;
A impresso do contedo do browser fica mais difcil;
Por vezes preciso que um nico elemento <a> faa ligao a duas ou
mais paginas, o que obriga a utilizar JavaScript.
Sintaxe:
<FRAMESET ROWS=[frame1,frame2] COLS=[frame1,frame2]
BORDER=[espessura] BORDERCOLOR=[cor]
FRAMEBORDER=[yes/no]
<FRAME SRC=[url] NAME=[nome] NORESIZE


52
Governo da Repblica
Portuguesa
MARGINWIDTH=[Margem lateral]
MAGINHEIGHT=[Margem vertical]
SCROLLING=[yes/no/auto]
</FRAMESET>

A tag Frameset
O elemento <frameset> define a forma como a janela do browser se subdivide para
acomodar as molduras. Este elemento divide a janela do browser em linhas e
colunas. Os valores atributos s linhas e s colunas indicam a quantidade de rea
de ecr que cada linha e cada coluna devem ocupar.

NOTA: no necessrio colocar a tag TITLE nas pginas que fazem parte da frame,
pois o nico de ttulo de pgina que aparece o que foi indicado na pgina
principal que controla as frames.
Cols Pixels
%
*
Define o nmero de colunas em que a janela dividida
e os seus tamanhos
rows Pixels
%
*
Define o nmero de linhas em que a janela dividida e
os seus tamanhos

A tag <frame>
O elemento <frame> define qual o documento HTML a colocar numa determinada
moldura.
NOTA: no use o elemento <body> numa pgina que contem molduras (frames).
Se o fizer as molduras no sero apresentadas.
frameborder 0 Indica se deve ser desenhada ou no uma linha


53
Governo da Repblica
Portuguesa
1 em redor da moldura
longdesc URL URL de uma pgina que contm uma descrio
extensa do contedo da moldura. til para ajudar
os utilizadores de browsers que no suportam
molduras.
marginheight Pixels Define as espessuras das margens superior e
inferior da moldura
marginwidth pixels Define espessuras das margens esquerda e direita
da moldura
name Frame name Define um nome nico a dar moldura objecto.
(usa-se para comunicar com os scripts, que podem
estar em outras molduras
noresize noresize Quando utilizado ( o valor "noresize" o nico
permitido), o tamanho da moldura deixa de poder
ser alterado.
scrolling Yes
No
Auto
Determina se existem ou no barras de
deslocamento ("scroll bars".) o valor "auto"
sugnifica automtico ( o browser decide se deve
ou no mostrar "scroll bars")
src URL O URL da pgina que vai ser apresentada na
moldura

A tag noframes
O elemento <noframes> deve conter texto que s ser mostrado no caso de o
browser no ser capaz de mostrar documentos contidos em molduras (frames).
Este elemento deve ficar dentro de um elemento <frameset>.
A tag iframes
O elemento iframe insere uma subjanela, ou moldura, dentro de uma pgina da
Web (inline frame). A nova moldura contem a sua prpria pgina e assemelha-se
a uma moldura (frame) criada com os elementos <frame> e <frameset>, mas


54
Governo da Repblica
Portuguesa
est dentro de uma pgina normal (no meio dos seus contedos) em vez de estar
num frameset.
Atributos opcionais:
Align Left
Right
Top
Middle
bottom
Especifica o modo como a moldura (ou sujanela)
alinha na pgina que a contm
Frameborder 0
1
Indica se desenhada ou no uma linha em redor da
moldura
height Pixels
%
Define a altura da moldura
longdesc URL URL de uma pgina que contm uma descrio
extensa do contedo da moldura
Marginheight

Marginwidth
Pixels

Pixels
Define as espessuras das margens superior e inferior
da moldura
Define as espessuras das margens esquerda e direita
da moldura

name Frame-
name
Define um nome nico a dar a moldura (usada para
comunicar com os sripls, que podem estar em outras
molduras
scrolling Yes
No
Auto
URL
Especifica como so apresentadas as barras de
deslocamento ("scroll bars")

O URL da pgina que vai ser apresentada na moldura
Width Pixels
%
Define a largura da moldura


55
Governo da Repblica
Portuguesa

Exemplos:

Criar janelas dispostas na vertical
<html>
<head>
<title> Exemplo 1 </title>
</head>
<frameset cols=25%,50%,25%>
<frame src=esquerda.html>
<frame src=centro.html>
<frame src=direita.html>
</frameset>
</html>

Criar janelas dispostas na horizontal
<html>
<head>
</head>
<frameset rows=25%,50%,25%>
<frame src=primeira.html>
<frame src=segunda.html>
<frame src=terceira.html>
</frameset>
</html>


56
Governo da Repblica
Portuguesa

Criar janelas na horizontal e vertical
<html>
<head>
</head>
<frameset rows=50%,50%>
<frame src=horizontal.html>
<frameset cols=25%,75%>
<frame src=esquerda_vertical.html>
<frame src=direita_vertical.html>
</frameset>
</frameset>
</html>

Colocar uma inline frame dentro de uma pgina
<html>
<head>
<title> Exemplo </title>
</head>
<body>
<h3> Uma frame inline (iframe)</h3>
<iframe src=exemplo.html>
</iframe>

<p> Alguns browsers antigos no suportam iframes. </p>
</body>


57
Governo da Repblica
Portuguesa
</html>

Planeamento de um site

O planeamento de um Web site fundamental quando se quer construir algo
com cabea, tronco e membros.

FASE 1 DEFINIR OBJECTIVOS

Para qu?
Qual o propsito ou finalidade do WebSite?
Uma definio precisa dos objectivos necessria e til para fundamentar as
decises que se tomam quanto sua estrutura, contedo e manuteno.
FASE 2 CARACTERIZAR O PUBLICO ALVO


58
Governo da Repblica
Portuguesa
Para quem?
A quem se dirige?
Para qualquer pessoa em geral, ou para um determinado tipo de utilizador?
FASE 3 IDENTIFICAR OS CONTEUDOS A PUBLICAR

O que adequado a publicar?
Que informao deve conter?
Devem ter em conta os objectivos definidos, o pblico-alvo.
Trabalhos pessoais, imagens, contedos, multimdia, etc.
FASE 4 IDENTIFICAR OS RECURSOS A UTILIZAR

Que recursos ou meios necessitamos para a construo?
Exemplo: software de tratamento de imagens
FASE 5 ESTRUTURA GERAL DO WEBSITE

Trata-se de pensar o site em termos globais ou de estrutura (no ainda em
ralao aos detalhes).
Devemos pensar em fazer um esboo ou esquema das pginas que vo integrar
o site; organizar o site por seces; definir relaes ou ligaes entre pginas
estrutura hierrquica.
Devem ser distribudos por pginas construdas com uma estrutura
consistente, isto , com regras de construo, organizao e arrumao
semelhantes, para que o acesso informao seja fcil.
Outro cuidado a ter prende-se com uma caracterstica essencial das pginas
WEB: as pginas Web no so livros, a sua leitura no linear.
Por isso, em cada pgina que compe o site deve poder saber-se:
Quem o autor?
De que se trata o Site?


59
Governo da Repblica
Portuguesa
Como voltar pgina inicial, ou como ir at qualquer outra
pgina do site?

HIERARQUIA DA INFORMAO

Estrutura do site
A estrutura que ser apresentada no site deve ser dividida em unidades.
Deve ser estabelecida uma hierarquia entre esses blocos de informao, bem
como determinar as ligaes entre esses blocos.
EXEMPLO:
FALTA IMAGEM
Reparem na sequncia principal (o ndex.html) aponta para mais duas pginas
e estas pginas vo apontando para outras, inclusive no exemplo a pgina 5
aponta para um arquivo, isso pode ser infinito, voc pode criar quantas pginas
e apont-las para quantas pginas e arquivos quiser.

CONSISTNCIA DO SITE

Identidade visual prpria, que se deve manter ao longo de todas as pginas
para que o utilizador encontre a informao que procura utilizando os mesmos
procedimentos.
O Layout de uma pgina com tabelas. As tabelas so compostas por clulas
que iro apresentar os dados e organizar texto, imagens e outros objectos.
DEFINIR O ASPECTO VISUAL DAS PGINAS

FALTA IMAGEM
CUIDADOS A TER


60
Governo da Repblica
Portuguesa

Destacar o ttulo utilizando formatos maiores, maisculas ou negrito;
Aplicar nas listagens marcas e/ou numerao;
Identificar claramente os links e a pgina para onde hiperligam;
No sobrecarregar as pginas com muitas cores, de forma a no distrair o
utilizador;
Aconselhvel no utilizar mais de trs cores;
Escolher uma cor de fundo neutra que garanta legibilidade;
O excesso de objectos multimdia sobrecarrega as pginas e torna a navegao
lenta e difcil. O tempo de abertura das pginas aumenta com a insero de
alguns formatos de ficheiros.

IMAGENS, SONS E VDEOS

As imagens devem ser guardadas em formatos adequados s suas
caractersticas:
GIF imagens com poucas cores.
JPG ou JPEG fotografias, imagens com muitas tonalidades.
Os sons:
WAVE ocupa muito espao e torna a pgina lenta.
MP3 ficheiros mais leves.
Os vdeos introduzem muita lentido na visualizao das pginas. Os formatos
mais utilizados so:
MPEG relativamente pouco pesados e com qualidade.
AVI ocupa muito espao.

Introdução Ao HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Introdução Ao HTML

Transféré par

Droits d'auteur :

Formats disponibles

Curso: Rececionista de Hotel

TIC-Tecnologia de Informao e Comunicao

Vous aimerez peut-être aussi