1. html - introduçãocio 06 - html.pdf · – não depende da plataforma em que é vizualizado ......

TIC II 2005/6 VB, JP1

1. HTML - Introdução

Hyper Text Markup Language

É uma linguagem de formatação de conteúdos– Não é uma linguagem de programação

Portável– Não depende da plataforma em que é vizualizado

Ficheiros de pequena dimensão


1. HTML - Introdução

Um ficheiro html é um ficheiro de texto com uma determinada estrutura

– Pode ser criado usando um editor de texto simples (Notepad, etc)

– Pode ser usada a extensão htm ou html (preferível)

Consiste num conjunto de “tags”, que são comandos de formatação, que indicam de que forma a informação é representada


1. HTML - Tags

Uma tag é delimitado por < e > (ie. <html>)

Quase todas as tags têm de ser fechadas (ie. depois de fazer <html> é necessário fazer </html>

À tag podem estar associados atributos:<tag atributo1=“valor” atributo2=“valor”> ...... </tag>

O encadeamento de tags deve ser feito da forma:<tag1> <tag2> ...... </tag2> </tag1>


1.1 HTML – Formato geral

O formato de um documento html é:

<html><head>....</head>

<body>....</body>

</html>

html identifica o tipo de documento

Este organiza-se em duas secções:– head: onde está o título, autor e

informação sobre o tipo de conteúdoPode ser usada a tag “title”

– body: onde está a informação propriamente dita


1.1 HTML – Formato geral

Crie um ficheiro de texto usando o Notepad, escreva:

<html><head></head><body>

<p align=center> Olá! /p></body>

</html>

No final grave o ficheiro com o nome texto.html

Abra o Word, e coloque uma linha de texto contendo “Olá!”, alinhada ao centro do documento.No final grave o documento em formato html, com o nome word.html.


1.2 HTML - Sintaxe

Atributos para o “body”:– bgcolor : cor de fundo– text: cor do texto– link: cor dos links– vlink: cor dos links já visitados– alink: cor do link ao ser clicado

As cores podem ser indicadas pelo seu nome (black, green, gold, etc) ou por um valor numérico #rrggbb (com os valores das componentes RGB em hexadecimal)

Exemplo: <body bgcolor=“yellow” text=#33ff33> ..... </body>


1.2 HTML - Sintaxe

Atributos para formatação de parágrafos:– p: delimita um parágrafo– hx : cabeçalho x, podendo x ser de 1 (maior) a 6 (menor)– b: texto em negrito– i: texto em itálico– align: alinhamento do parágrafo (left, right ou center)

Exemplo: <p align=“center”> <b> ESTA </b> <br> IPT </p>


1.2 HTML - Sintaxe

Atributos para formatação de texto:– font face: fonte a usar (“arial”, “verdana”, etc)– font size: dimensão relativa do texto (de 1 para dimensão

normal a 7)– font color: cor do texto

Exemplo: <p> <font size=“2” face=“arial”> ESTA IPT </font> </p>Exemplo: <p> <font size=“2” face=“arial”> ESTA </font> <font

face=“verdana”> IPT </font> </p>


1.2 HTML - Sintaxe

Âncoras (anchor) são elementos que permitem a navegação e delimitação de localizações num documento. São identificadas pelo tag a.Âncoras internas permitem saltar para pontos específicos de um documento

<a href=”#paragrafo2”> Saltar para o texto 2</a>

<p>Texto 1</p><br> <br> <br><a name=”paragrafo2”><p>Texto 2</p></a>


1.2 HTML - Sintaxe

Âncoras externas permitem saltar para outras páginas<a href=”http://www.esta.ipcb.pt”>Página da ESTA</a>

Existe um atributo de particular interesse, target, que define em que janela se aplica a referência. Valores possíveis são:

– _blank : abre o link numa nova janela;– _self : abre o link na própria janela;– _parent : abre o link na página onde se define o frameset (ver 1.5 – Frames)– _top : abre o link na própria janela, que é ocupada na totalidade (ver 1.5 –

Frames)


1.3 HTML – Elementos Multimédia

Elementos gráficos:– <img src=“name”> : insere a imagem nameOutros atributos usáveis são align (alinhamento) e border

(dimensão do contorno da imagem)– <hr>: linha horizontalAtributos: size (dimensão) e width (dimensão em percentagem

da largura da janela)

É possível inserir elementos multimédia criados em aplicações externas, usando para tal a tag object.


1.4 HTML - Tabelas

O HTML define dois tipos de lista: ordenada e (tag ol) e desordenadas (tag ul).

– Nas listas ordenadas a sequência pode ser 1,2,... (type 1); A,B,... (type A); a,b,... (type a); I,II,... (type I); i,ii,... (type i);

– Nas listas desordenadas o tipo pode ser “disc”, “circle” ou “square”

Em ambos os casos podem-se criar listas dentro de listas.


1.4 HTML - Tabelas

A utilização de tabelas permite versatilizar muito a forma como a informação é representada. A correcta formatação das tabelas pode no entanto ser problemática.A tag table permite definir os atributos globais da tabela: altura (height), largura (width), cor de fundo (bgcolor), imagem de fundo (background), espessura de linha (border), espaçamento entre células (cellspacing) e espaçamento entre os limites da célula e o seu conteúdo (cellpadding).A altura e largura podem ser definidas em valor absoluto (iewidth=200) ou relativo à dimensão da janela (width=50%).


1.4 HTML - Tabelas

O número de elementos que compoêm a janela é definido por tags específicas. Para criar uma linha usa-se tr (Table Row) e para depois usa-se a tag td (Table Data) para criar células dentro da linha.

– Visualize o resultado de<table width=400 border=1>

<tr><td width=75%> 1,1 </td><td width=25%> 1,2 </td>

</tr></table>


1.4 HTML - Tabelas

Como fazer para ter número de células diferentes em linhas (ou colunas)?

– A tag colspan agrupa várias células numa linha;– A tag rowspan agrupa várias células numa coluna;

<table width=400 border=1><tr>

<td width=50% rowspan=2> texto </td><td width=25%> texto </td><td width=25%> texto </td>

</tr><tr>

<td> texto </td><td> texto </td>

</tr><tr>

<td> texto </td><td colspan=2> texto </td>

</tr></table>


1.4 HTML - Tabelas

O conteúdo das células, toda a linha ou mesmo toda a tabela, pode ser alinhado. O alinhamento horizontal é feito pelo atributo ALIGN (left/center/right/justify) e o vertical por VALIGN (top/middle/bottom)


1.5 HTML – Frames e IFrames

As frames permitem criar àreas específicas numa página, e que são trabalhadas de forma independente. Se devidamente criadas, podem facilitar bastante a criação e navegação num site.



Criar uma estrutura como a da figura, implica definir 4 ficheiros html diferentes, um para cada um dos campos e um último que gere o conjunto (e será este o ficheiro a ser aberto para visualização). No caso anterior, criamos uma estrutura no ficheiro principal (ver página seguinte). Existirão ainda 3 ficheiros com o conteúdo de cada uma das zonas.Como nem todos os browsers suportam frames, é também conveniente prever essa situação.



<html><head>

<title>Conjunto de Frames</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<frameset rows="80,*" cols="*" border="0" framespacing="0"><frame src="topo.htm" name="topFrame" scrolling="NO" noresize ><frameset rows="*" cols="154,*" framespacing="0" border="0">

<frame src="navega.htm" name="leftFrame" scrolling="NO" noresize><frame src="central.htm " name="mainFrame">

</frameset></frameset>

<noframes><body> O seu browser não consegue abrir frames. </body>

</noframes></html>



Um problema que pode surgir nesta estrutura é como relacionar as acções feitas entre as várias janelas. No exemplo, é usada uma frame de navegação e uma outra sobre a qual essa visualização será feita. Assim, os links indicados na janela de navegação deverão ser abertos na janela de visualização. Para tal os links criados na janela de navegação devem ser criados daseguinte forma (recorde que cada frame é criada com um nome e a frame de visualização é denominada mainFrame):

<a href="http://www.esta.ipcb.pt/" target=“mainFrame">Visit W3Schools!</a>



As IFrames podem ser utilizadas dentro de um documento HTML, e permitem inserir um outro documento dentro deste. É possível definir as dimensões dessa àrea.

<p><iframe src=”documento.htm” width=”500” heigth=”250”></iframe></p>

1. html - introduçãocio 06 - html.pdf · – não depende da plataforma em que é vizualizado ......

Documents