html hypertext markup language. 2 origem o html foi criado, juntamente com o http nos laboratórios...
TRANSCRIPT
HTML
HTML
HTMLHyperText Markup Language
HTML
HTML
2
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)
HTML
HTML
3
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
HTML
HTML
4
server
cliente
html files
webserver
Arquitectura
HTML browser
HTML
HTML
5
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>
HTML
HTML
6
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.
HTML
HTML
7
Estrutura de um documento
<html> <head> <title>Título</title> </head>
<body> Conteúdo do documento </body></html>
Cabeçalho
Conteúdo
HTML
HTML
8
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, utiliza-se a tag <li>.
HTML
HTML
9
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;
HTML
HTML
10
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>
HTML
HTML
11
ExercícioUtilizando o notepad, crie um documento HTML com o seguinte aspecto:
HTML
HTML
12
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).
HTML
HTML
13
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>)
HTML
HTML
14
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>
HTML
HTML
15
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>
HTML
HTML
16
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)
HTML
HTML
17
Parte II
HTML
HTML
18
Image Maps• Misturando links com imagens, criaram-se
os image maps. Ou seja, uma imagem torna-se 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.
HTML
HTML
19
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>.
HTML
HTML
20
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
HTML
HTML
21
Image Maps• Atributos (cont.)
– href (o link)– nohref (sem link)– alt (alternate text)
• A tag <map> tem, também um atributo, obrigatório: name (um identificador do mapa)
HTML
HTML
22
Image Maps• Por fim, na tag <img> em que
colocamos a imagem, devemos indicar que mapa ela deve usar. Para tal, utiliza-se o atributo usemap com o nome que demos ao mapa.
HTML
HTML
23
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”>
HTML
HTML
24
Image Maps (exercício)
Utilizando o notepad, crie um Image Map para a imagem
http://eremita.di.uminho.pt/formas.gifCom 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
HTML
HTML
25
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.
HTML
HTML
26
Exercício• Imite a seguinte página:
HTML
HTML
27
Parte III
HTML
HTML
28
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.
HTML
HTML
29
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!
HTML
HTML
30
Frames