HTML HyperText Markup Language

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 (

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

4 server cliente html files webserver Arquitectura HTML browser

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: Texto do parágrafo

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: Título Chamamos tags às etiquetas.

7 Estrutura de um documento Título Conteúdo do documento Cabeçalho Conteúdo

8 Estruturar Informação Para parágrafos, utiliza-se a tag ; Para títulos utiliza-se as tags a, conforme o nível do título (título, subtítulo,...). Para representar listas, utiliza-se as tags e, respectivamente para lista não ordenadas ou ordenadas; Para representar cada item da lista, utiliza- se a tag.

9 Estruturar Informação Também podemos criar listas de definições, em que a lista está delimitada por, o termo a definir está entre e a definição entre. Existe ainda a tag de uso genérico como sejam: –Zonas coloridas; –Alinhar zonas;

10 Exemplo Exemplo 1 Exemplo 1 Um exemplo simples! Um Dois

11 Exercício Utilizando o notepad, crie um documento HTML com o seguinte aspecto:

12 Imagens Para incluir imagens utilizamos a tag 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 ).

13 Formatar a Informação Não sendo um uso 100% correcto, podemos colocar o texto: –em bold ( bold ) –em itálico ( italico ) –à máquina ( truetype ) Podemos dividir blocos de informação com um risco horizontal ( ) Podemos obrigar à mudança de linha ( )

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 em que o atributo href deve indicar para que página queremos saltar. Um exemplo, para ir para a página da U.M. U.M.

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... Quando se quiser referenciar esse local, utiliza-se um link na forma...

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 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)

17 Parte II

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.

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 ; Cada zona, deve ser definida pela tag.

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

21 Image Maps Atributos (cont.) –href (o link) –nohref (sem link) –alt (alternate text) A tag tem, também um atributo, obrigatório: name (um identificador do mapa)

22 Image Maps Por fim, na tag 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.

23 Image Maps (exemplo)

24 Image Maps (exercício) Utilizando o notepad, crie um Image Map para a imagem 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

25 Tabelas Cada tabela é delimitada pela tag Cada linha é delimitada pela tag Cada célula é delimitada pela tag 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.

26 Exercício Imite a seguinte página:

27 Parte III

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.

29 Frames No documento pai das frames, devemos especificar como é que as frames vão ser divididas. Especifica-se, portanto, tudo dentro das tags 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 para aqueles browsers que não as consigam mostrar!

30 Frames