HTML Hyper Text Markup Language HTML Origem O

HTML Origem • O HTML foi criado, juntamente com o HTTP nos laboratórios do

• Independência entre plataformas HTML Objectivos – Conseguido usando simbolos ASCII e não

cliente webserver html files HTML browser HTML Arquitectura 4

HTML Sintaxe • Um ficheiro HTML é um ficheiro de texto normal (pode ser

HTML Sintaxe • Cada etiqueta pode conter atributos, para classificar de alguma forma a

HTML Estrutura de um documento Cabeçalho Conteúdo <html> <head> <title>Título</title> </head> <body> Conteúdo do

HTML Estruturar Informação • Para parágrafos, utiliza-se a tag <p>; • Para títulos utiliza-se

HTML Estruturar Informação • Também podemos criar listas de definições, em que a lista

<html> <head><title>Exemplo 1</title></head> <body bgcolor=“#cdefdc”> <h 1>Exemplo 1</h 1> <p>Um exemplo simples!</p> <ol> <li>Um</li>

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

HTML Imagens • Para incluir imagens utilizamos a tag <img> que deve conter um

HTML Formatar a Informação • Não sendo um uso 100% correcto, podemos colocar o

HTML Links • Chamamos um documento em Hyper. Texto por poder conter links, ou

HTML Links • Os links não se usam apenas para referenciar páginas externas, mas

HTML Links • Ainda em relação à utilização de links, existem alguns cuidados a

HTML Image Maps • Misturando links com imagens, criaram-se os image maps. Ou seja,

HTML Image Maps • A definição de um image map pode ser vista como

HTML Image Maps • A definição da área clicável contem os seguintes atributos: –

• Atributos (cont. ) – href – nohref – alt (o link) (sem

HTML Image Maps • Por fim, na tag <img> em que colocamos a imagem,

(exemplo) HTML Image Maps <map name=“mapa 1”> <area href=“guia. html” alt=“Guia de acesso” shape=“rect”

(exercício) HTML Image Maps Utilizando o notepad, crie um Image Map para a imagem

• • HTML Tabelas Cada tabela é delimitada pela tag <table> Cada linha

• Imite a seguinte página: HTML Exercício 26

HTML Frames • As Frames permitem organizar documentos de uma forma mais estrutural. •

HTML Frames • No documento pai das frames, devemos especificar como é que as

Slides: 30

Download presentation

HTML Hyper. Text Markup Language

HTML 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: Hyper. Text Markup Language – HTTP: Hyper. Text Transfer Protocol • Agora, o HTML é mantido pelo world wide web consourcium (http: //www. w 3 c. org) 2

• Independência entre plataformas HTML Objectivos – 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

cliente webserver html files HTML browser HTML Arquitectura 4

HTML 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 5

HTML 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 queremos o parágrafo centrado: Título • Chamamos tags às etiquetas. 6

HTML Estrutura de um documento Cabeçalho Conteúdo <html> <head> <title>Título</title> </head> <body> Conteúdo do documento </body> </html> 7

HTML Estruturar Informação • Para parágrafos, utiliza-se a tag ; • Para títulos utiliza-se as tags <h 1> a <h 6>, 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>. 8

HTML 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

<html> <head><title>Exemplo 1</title></head> <body bgcolor=“#cdefdc”> <h 1>Exemplo 1</h 1> Um exemplo simples! <ol> <li>Um</li> <li>Dois</li> </ol> </body> </html> HTML Exemplo 10

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

HTML 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

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

HTML Links • Chamamos um documento em Hyper. Texto 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

HTML 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=“nome. Do. Sitio”>. . . </a> • Quando se quiser referenciar esse local, utiliza-se um link na forma <a href=“#nome. Do. Sitio”>. . . </a> 15

HTML 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

HTML Parte II 17

HTML 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

HTML 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

HTML 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 • x 1, y 1, x 2, y 2, . . . , xn, yn 20

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

HTML 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. 22

(exemplo) HTML Image Maps <map name=“mapa 1”> <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=“top 10. html” alt=“Top Ten” shape=“poly” coords=“ 276, 0, 276, 28, 100, 200, 50, 276, 0”> </map> <img src=“menu. gif” usemap=“#mapa 1”> 23

(exercício) HTML Image Maps 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

• • HTML 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

• Imite a seguinte página: HTML Exercício 26

HTML Parte III 27

HTML 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

HTML 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

HTML Frames 30