Download
1 / 30
310 likes | 537 Views
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
E N D
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)
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
server cliente webserver html files Arquitectura HTML browser
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>
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.
Estrutura de um documento <html> <head> <title>Título</title> </head> <body> Conteúdo do documento </body> </html> Cabeçalho Conteúdo
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>.
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;
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>
Exercício Utilizando o notepad, crie um documento HTML com o seguinte aspecto:
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).
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>)
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>
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>
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)
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.
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>.
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
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)
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.
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”>
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
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.
Exercício • Imite a seguinte página:
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.
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!
