HTML
HyperText Markup Language
Origem
• O HTML foi criado, juntamente com o
HTTP nos laboratórios do CERN, na europa
para permitir a consulta de documentos dos
vários departamentos.
– HTML: HyperText Markup Language
– HTTP: HyperText Transfer Protocol
• Agora, o HTML é mantido pelo world wide
web consourcium (http://www.w3c.org)
2
Objectivos
• Independência entre plataformas
– Conseguido usando simbolos ASCII e não
formatos proprietários
– Ajudado pelo desenvolvimento de browsers
para todas as plataformas
• Formatação de Estrutura e Visualização
– Foram criados dois tipos de comandos, uns para
estruturar documentos e outros para alterar a
forma como são visualizados
3
Arquitectura
cliente
webserver
HTML
browser
server
html files
4
Sintaxe
• Um ficheiro HTML é um ficheiro de texto
normal (pode ser feito com o notepad) em
que se etiquetam as partes relevantes.
• Cada etiqueta tem um nome e engloba
determinada informação.
• Se uma etiqueta se chama p, para formatar
parágrafos, isto seria um parágrafo anotado:
<p> Texto do parágrafo </p>
5
Sintaxe
• Cada etiqueta pode conter atributos, para
classificar de alguma forma a informação
que está a anotar;
• O seguinte exemplo, coloca um atributo
para indicar que queremos o parágrafo
centrado:
<p align=“center”> Título </p>
• Chamamos tags às etiquetas.
6
Estrutura de um documento
Cabeçalho
Conteúdo
<html>
<head>
<title>Título</title>
</head>
<body>
Conteúdo do documento
</body>
</html>
7
Estruturar Informação
• Para parágrafos, utiliza-se a tag <p>;
• Para títulos utiliza-se as tags <h1> a <h6>,
conforme o nível do título (título, subtítulo, ...).
• Para representar listas, utiliza-se as tags
<ul> e <ol>, respectivamente para lista não
ordenadas ou ordenadas;
• Para representar cada item da lista, utilizase a tag <li>.
8
Estruturar Informação
• Também podemos criar listas de definições,
em que a lista está delimitada por <dl>, o
termo a definir está entre <dt> e a definição
entre <dd>.
• Existe ainda a tag <div> de uso genérico
como sejam:
– Zonas coloridas;
– Alinhar zonas;
9
Exemplo
<html>
<head><title>Exemplo 1</title></head>
<body bgcolor=“#cdefdc”>
<h1>Exemplo 1</h1>
<p>Um exemplo simples!</p>
<ol>
<li>Um</li>
<li>Dois</li>
</ol>
</body>
</html>
10
Exercício
Utilizando o notepad, crie um documento
HTML com o seguinte aspecto:
11
Imagens
• Para incluir imagens utilizamos a tag <img>
que deve conter um atributo chamado src
com o nome do ficheiro da imagem.
• Devemos ainda colocar o atributo alt para
browsers que não possam mostrar a
imagem. Deve ser uma frase representativa
da imagem.
• Podemos ainda especificar se queremos
uma borda ou não (utilizando o atributo
border).
12
Formatar a Informação
• Não sendo um uso 100% correcto, podemos
colocar o texto:
– em bold (<b>bold</b>)
– em itálico (<i>italico</i>)
– à máquina (<tt>truetype</tt>)
• Podemos dividir blocos de informação com
um risco horizontal (<hr>)
• Podemos obrigar à mudança de linha (<br>)
13
Links
• Chamamos um documento em HyperTexto
por poder conter links, ou seja, ligações
para outras páginas desenvolvidas, ou não,
por nós.
• Um link é colocado num documento
utilizando a tag <a> em que o atributo
href deve indicar para que página
queremos saltar.
• Um exemplo, para ir para a página da U.M.
<a href=http://www.uminho.pt>U.M.</a>
14
Links
• Os links não se usam apenas para
referenciar páginas externas, mas também
para referencias num mesmo documento;
• No local a referenciar, utiliza-se uma tag do
estilo
<a name=“nomeDoSitio”>...</a>
• Quando se quiser referenciar esse local,
utiliza-se um link na forma
<a href=“#nomeDoSitio”>...</a>
15
Links
• Ainda em relação à utilização de links,
existem alguns cuidados a ter, como sejam:
– Os URL devem ser sempre o mais completos
possível (não esquecer o tipico http:// ou
ainda o www, quando existe)
– Testar todos os links, pelo menos uma vez
durante o desenvolvimento.
– Utilizar apenas links de confiança (que não
desapareçam daí a uns dias)
16
Parte II
17
Image Maps
• Misturando links com imagens, criaram-se
os image maps. Ou seja, uma imagem tornase interactiva podendo aceder-se aos mais
diversos links clicando em zonas da
imagem;
• É possível, por exemplo, criar um menu
apenas com uma imagem em que se define
um Image Map para associar partes do
desenho a determinados links.
18
Image Maps
• A definição de um image map pode ser vista
como um par:
– A imagem a ser clicada
– Um conjunto de definições de zonas geométricas
em que cada uma destas zonas está associada a
um link.
• A definição de zonas clicáveis (definição do
mapa) é colocado entre tags <map>;
• Cada zona, deve ser definida pela tag <area>.
19
Image Maps
• A definição da área clicável contem
os seguintes atributos:
– Shape (rect, circle, poly)
– Coords
• left-x, top-y, right-x, bottom-y
• center-x, center-y, radius
• x1, y1, x2, y2, ..., xn, yn
20
Image Maps
• Atributos (cont.)
– href
– nohref
– alt
(o link)
(sem link)
(alternate text)
• A tag <map> tem, também um atributo,
obrigatório: name (um identificador do
mapa)
21
Image Maps
• Por fim, na tag <img> em que
colocamos a imagem, devemos indicar
que mapa ela deve usar. Para tal, utilizase o atributo usemap com o nome que
demos ao mapa.
22
Image Maps
(exemplo)
<map name=“mapa1”>
<area href=“guia.html” alt=“Guia de
acesso” shape=“rect”
coords=“0,0,118,28”>
<area href=“atalho.html” alt=“Ir”
shape=“circle” coords=“184,200,60”>
<area href=“top10.html” alt=“Top Ten”
shape=“poly”
coords=“276,0,276,28,100,200,50,50,276
,0”>
</map>
<img src=“menu.gif” usemap=“#mapa1”>
23
Image Maps
(exercício)
Utilizando o notepad, crie um Image Map para a
imagem
http://eremita.di.uminho.pt/formas.gif
Com as seguintes áreas:
• Rectangulo de 20,25 a 84,113
• Poligono com 90,25 162,26 163,96 89,25 e 90,24
• Circulo com centro em 130,114 e raio 29
• Rectangulo de 19,156 a 170,211
24
Tabelas
•
•
•
•
Cada tabela é delimitada pela tag <table>
Cada linha é delimitada pela tag <tr>
Cada célula é delimitada pela tag <td>
Podemos unir células utilizando os atributos
– colspan – número de colunas a juntar
– rowspan – número de linhas a juntar
• Cada célula pode especificar algumas
propriedades, como por exemplo, a cor de
fundo (bgcolor), alinhamento (align), etc.
25
Exercício
• Imite a seguinte página:
26
Parte III
27
Frames
• As Frames permitem organizar documentos
de uma forma mais estrutural.
• Para criar um conjunto de frames,
precisamos de:
– Uma página mãe, que dispõe as outras
– Uma página por cada zona da página mãe
– Dar um nome a cada zona da página mãe
• É uma forma prática de construir um índice
de navegação.
28
Frames
• No documento pai das frames, devemos
especificar como é que as frames vão ser
divididas.
• Especifica-se, portanto, tudo dentro das tags
<frameset>
• Esta tag deve ter um atributo, chamado cols ou
rows, com a percentagem das linhas/colunas a
criar, separados por virgulas
• Dentro desta tag, deve existir uma zona
chamada <noframes> para aqueles browsers
que não as consigam mostrar!
29
Frames
30