HTML Tutorial

Ano Lectivo 2008/2009
Redes de Comunicao
Introduo ao HTML
HTML
HyperText MarKup Language
Linguagem de marcao de hipertexto utilizada na

construo de pginas para a Web;
O HTML permite:
Marcar seces de texto
Ttulos;
Pargrafos.
Introduo ao HTML (cont.)
Como guardar um documento em HTML

Guarda-se o ficheiro com o nome e a
extenso . html ou htm.
Tags e Atributos
Tags
Comando ou instruo embutidos no

documento, que tem indicadores de incio e
de fim, indica ao browser onde comea e
acaba o texto que deve ser formatado pela
referida tag.
Tags e Atributos (cont.)

Cada tag est contida entre os sinais de menor < e
maior >;
Tag de fecho tag de incio, exceptuando o smbolo

/;
Exemplos:
<body> - tag de abertura;
</body> - tag de fecho.

Elementos bsicos:
Tag de abertura;
Contedo;
Tag de fim.
<b> A minha primeira linguagem de programao. </b>
Tag de abertura
Contedo
Tag de fim

<b> A minha primeira <u> linguagem de programao.</u>
</b>

Atributos
Comandos que fornecem informao

adicional
ao
browser
para
a
apresentao das pginas.
Exemplos:
Bgcolor: define a cor do fundo da pgina;

Background: define a imagem de fundo da pgina;
Text: define o tipo de letra do texto.
Estrutura bsica de uma pgina em HTML

A estrutura bsica de uma pgina em HTML, consiste
nos blocos head e body;
<html>
<head>
Cabealho do documento
</head>
<body>
Corpo do documento
</body>
</html>
Tags Bsicas
<html> e </html>;
<head> e </head>;
<title> e </title>;
<body> e </body>.
10
Tag Bsicas
<html>
e <html> servem para indicar ao browser
onde comea e onde termina um documento em html;

<head> e </head> indicam o incio e o fim do
cabealho do documento, onde se define o ttulo da
pgina;
<title>
</title>
define
ttulo
da
pgina,
apresentado na barra de ttulo da janela do browser;
11
<body> e </body> delimitam o corpo do documento.
Caracteres especiais
Caracteres reservados;
Para se poder empregar estes caracteres necessrio
recorrer ao uso de character entities;
Compostos por: E comercial (&), o nome ou o nmero
precedido de (#) da entidade que representa o carcter e o

smbolo ponto e vrgula (;).
12
Caracteres especiais
Visualizao
Descrio
Nome
espao (non-breaking space)

<
menor que (less than)
<
<
>
maior que (greater than)
>
>
&
E comercial (ampersand)
&
&
aspas (quotation mark)
"
"
Tabela de caracteres:
http://www.geocities.com/guia_rapido/car_esp.html
13
Nmero
Links teis
http://www.htmldog.com/reference/htmltags/
http://www.truquesedicas.com/tutoriais/html/00007a.htm
14
Tags elementares
Cabealhos;
Pargrafos;
Quebras de linha;
Divises;
Comentrios.
15
Tags elementares (cont.)
O HTML tem seis nveis de cabealhos;
Identificados com as tags H1, H2, H6;

Pode ter o atributo align.
16

Exemplo:
<h1>Este um cabealho tamanho 1</h1>
17
Criados atravs da utilizao da tag <p>;

As
mudanas
de
linha
no
tm
qualquer
expresso aquando da visualizao no browser;

Utiliza-se sempre que se queira delimitar um
pargrafo de um texto, utiliza-se para incio a tag
<p> e para o fim a tag </p>;
18

Exemplo:
<p> Isto um pargrafo </p>;
19
Criadas em HTML atravs da utilizao da tag <br>;

Utiliza-se quando se pretende forar uma mudana
de linha, num determinado ponto do texto, sem se
criar um pargrafo.
20

Mudana <br>
de <br>
linha <br>
usando <br>
br
21

Para dividir uma pgina com linhas horizontais utilizase a tag <hr>;
Atributos:
align;
noshade;
size;
width.
22

Exemplo:
<hr size=7>
Insere uma linha de largura 7 (pixels)
<hr width=50%>
Insere uma linha que ocupa 50% do espao
disponvel:
23

Para dividir uma pgina com linhas horizontais utilizase a tag <hr>;
Atributos:
align;
noshade;
size;
width.
24
Para
colocar
comentrios
ou
referncias
num
documento sem se desejar que estes apaream,

utiliza-se a tag de abertura ;
25
Fundo da pgina
A definio do fundo da pgina pode ser feita atravs
da atribuio de uma cor ou de uma imagem;
Atributos:
Bgcolor define uma cor de fundo;
Background define uma imagem de fundo.
26
Fundo da pgina (cont.)

Exemplo:
<body bgcolor=blue> - aplica a cor azul ao fundo
da pgina;
<body background="pegadas.jpg> - aplica a
imagem com o nome pegadas ao fundo da
pgina;
27
Formatao de texto em HTML

Para formatar o tipo, a cor e o tamanho da letra utilizase:
As tags <font> e </font>;
Atributos:
Face tipo de letra;
Size tamanho da letra;
Color cor da letra.
28
Formatao face (tipo letra)

O atributo face define o tipo de letra que se pretende
utilizar.
http://www.bigoo.ws/help/help_font.aspx
29
Formatao face (tipo letra)

Exemplo
30
Formatao size (tamanho)

O atributo size define o tamanho de letra que se
pretende utilizar. Pode tomar valores de 1 a 7 e de -2
a +4.
31
Formatao size (tamanho)

Exemplo:
32
Formatao color (cor)

O atributo color define a cor de letra que se pretende
utilizar;
As cores podem ser definidas pelo nome da cor (em
ingls) ou pelo sistema de numerao hexadecimal.
33
Formatao color (cor)

Exemplo:
34
Formatao - Estilos
Estilos mais utilizados:
Tag
<b>
Resultado
Texto a negrito.
<strong> Texto grande a negrito.

<i>
<em>
<u>
<big>
Texto em itlico.
Texto em itlico sombreado.

Texto sublinhado.
Texto grande.
<small> Texto pequeno.
35
<sub>
Texto inferior linha.
<sup>
<del>
Texto superior linha.

Texto rasurado.
Listas
Trs tipos de listas:
Lista numerada (ordenada) procedida por
nmeros sequenciais;
Lista com marcadores (desordenada) procedida
por marcas;
Lista de definies constitudas por vrios itens e
as suas respectivas definies.
36
Listas numeradas
Delimitadas pelas tags <ol> e </ol>;
Cada item delimitado pelas tags <li> e </li>;
Por defeito a numerao surge com valores de 1 a n;
O atributo type permite alterar esses valores para
outros.
37
Listas numeradas
Linguagem do exemplo anterior:
38
Listas com marcadores

Delimitadas pelas tags <ul> e </ul>;
Cada item delimitado pelas tags <li> e </li>;
Por defeito a numerao surge o smbolo disc;
O atributo type permite alterar esses smbolo para
outros.
39

Exemplo:
40

Exemplo:
41
Listas de definies
Delimitadas pelas tags <dl> e </dl>;
Cada item delimitado pelas tags <dt> e </dt>;
Cada definio delimitado pelas tags <dd> e
</dd>.
42
Listas de definies
Linguagem do exemplo anterior.
43
Listas de definies
Exemplo:
44
Resoluo da ficha de Trabalho

2. Indica os trs tipos de listas.
- Listas numeradas ordenadas;
- Listas com marcadores;
- Listas de definies.
45
Formatos de imagens
Nos documentos HTML, possvel utilizar variados
formatos de imagens.
Jpeg;
Png;
Gif.
46
Formatos de imagens (cont.)

Guardam informao de grandes imagens comprimidas
em ficheiros de tamanho reduzido.
So muito flexveis e a sua capacidade de produzir gifs

animados tornaram-no muito utilizado em banners e
47
cones que no exijam muita qualidade de imagem.
Formatos de imagens (cont.)

Combinam a compresso do jpg com uma maior
qualidade da imagem.
48
Insero de Imagens
Tag <img> - tag utilizada para inserir uma imagem
numa pgina web.
Atributo src obrigatrio pois indica ao browser a
localizao e o nome do ficheiro de imagem a inserir.
Exemplo:
src=imagem.png.
49
Alinhamento das imagens

O
alinhamento
das
imagens
corresponde
ao
alinhamento das imagens em relao aos elementos
circundantes;
Atributo align.
50
Alinhamento das imagens (cont.)

Valores:
Right e left alinhamento das imagens esquerda
ou direita da pgina, com o texto sua volta;

Top, middle, bottom, absmiddle alinhamento
vertical da imagem em relao aos outros itens da

mesma linha.
51
Alinhamento das imagens (cont.)

Exemplo:
52
Dimensionamento das imagens

Pode definir-se o seu tamanho, ou seja, a sua altura e
largura. Para isso, utilizam-se os atributos height
(altura) e width (largura) da tag <img>.
53
Dimensionamento das imagens

<html>
<head>
<title>Dimensionamento das imagens
</title>
</head>
<body>
<img src="imagem.gif" height= 180 width=135 align="left">
</body>
</html>
54
Alternativa em texto
Alt
Permite definir um texto.
<body>
<p> Estaes do ano</p>
<img src="Primavera.jpg" alt="Aqui est uma bela paisagem">
</body>
55
Alternativa em texto (cont.)
56
Contorno
Border
Atributo utilizado para colocar um contorno

volta da imagem.;
Definido em pixis.
<body>
<img src="imagem.gif" border=4>
</body>
57
Tabelas
A sua utilizao pode ser importante na estruturao
da pgina, pois facilita a disposio dos contedos;

Permite dividir, aproveitar e organizar melhor o
espao;
Para construir uma tabela utilizam-se as tags <table> e
</table>, <tr> e </tr> para definir linhas e <td> e </td>
para definir colunas;
importante NO esquecer de fechar as tags.
58
Tabelas principais tags

Tag
Descrio
<table>
Define uma tabela.
<tr>
Insere uma linha numa tabela.
<td>
Insere uma clula numa linha da tabela.
<th>
Define um cabealho numa linha da tabela.
<caption> Associa uma legenda a uma tabela.
59
Tabelas principais atributos

Atributo
Descrio
border
pxeis
Especifica a espessura dos limites da tabela ou da clula.
bordercolor
#xxxxxx
nome_da_cor
Define a cor dos limites da tabela ou da clula.
bgcolor
#xxxxxx
nome_da_cor
Define a cor de fundo da tabela ou da clula.
height
width
align
valign
60
Valor
pxeis
%
pxeis
%
left
right
center
top
middle
bottom
Especifica a altura da tabela ou da clula.

Especifica a largura da tabela ou da clula.
Define o alinhamento horizontal da tabela ou do contedo da clula.
Define o alinhamento vertical da tabela ou do contedo da clula.
cellpadding
pxeis
Especifica o espao em branco entre o texto e os limites da clula,

definindo a rea do texto.
cellspacing
pxeis
Especifica o espao em branco que fica entre as clulas vizinhas.
colspan
rowspan
nmero
nmero
Une horizontalmente duas ou mais clulas.

Une verticalmente duas ou mais clulas.
Estrutura bsica de uma tabela

Tags para insero de tabela num
documento HTML:
<table> - Define a tabela e seus
atributos;
<tr> - Define as linhas e seus

atributos;
<td> - Define as colunas e os seus
61
atributos.
Estrutura bsica de uma tabela

Nas clulas de uma tabela pode colocar-te todo o tipo
de informao que o HTML permite: texto, imagens,

hiperligaes, etc.;
O nmero total de colunas de uma tabela
identificado a partir do maior nmero de clulas
definido por cada linha;
Os browsers no lidam bem com clulas vazias. Para
isso deve-se usar o cdigo &nbsp para marcar como
62
espao vazio.
Exemplo de uma tabela
63
Limites de uma tabela

Para evidenciar os limites das tabelas utiliza-se o
atributo border da tag <table>;
64
Tabelas - Fundos
Para colocar uma cor de fundo numa tabela
utiliza-se o atributo bgcolor da tag <table>, da
tag <tr> ou da tag <td>, igualado cor que se
deseja;
A prioridade de aplicao da cor definida pela
ordem descrita (tag <td>, tag <tr> e tag

<table>).
Tabelas - Fundos
<table border=2 bgcolor=#FFCCCC>
<tr> <th> Tabela principal </th> </tr>
<tr>
<td> <table border=4 bgcolor=#33CCFF>
<tr> <th> SubTabela 1 </th> </tr>
<tr> <td> Item 1.1 </td>
<td> Item 1.2 </td> </tr>
</table> </td>
</tr>
</table>
Tabelas - Fundos
67
Tabelas - Dimenses
As dimenses das clulas e tabelas podem ser
redi-mensionadas atravs dos atributos widht
(altura) e height (largura) da tag <table> ou da
tag <td>;
Estes atributos podem dimensionar as clulas
e as tabelas de forma absoluta, em pixis, ou

de forma relativa, em percentagem.
Tabelas - Dimenses
<table border=2 bgcolor=#FFCCCC width=600>
<tr>
<td> <table border=4 width=100%>

<tr> <th> SubTabela 1 </th> </tr>
<tr> <td> Item 1.1 </td>
<td> Item 1.2 </td> </tr>

</table> </td>
</tr>
</table>
Tabelas - Dimenses
70
Tabelas - Alinhamento
Por defeito, o alinhamento horizontal de uma
tabela e do contedo das clulas feito
esquerda;
Para alterar o alinhamento horizontal utiliza-se

o atributo align da tag <table> ou da tag <td>,
igualado aos valores left, center ou right.
Por defeito, o alinhamento vertical de uma
tabela o alinhamento superior, e do contedo
das clulas o alinhamento ao meio;
Para alterar o alinhamento vertical utiliza-se o

atributo valign da tag <table> ou da tag <td>,
igualado aos valores top, middle ou bottom.
<table width=400 align=left valign=top>
<tr>
<td> Horizontal = esquerda </td>
<td> Vertical = topo </td>

</tr> </table>
<table width=70% align=center valign=middle>
<tr>
<td align=center> Horizontal = centro </td>
<td align=center> Vertical = meio </td>
</tr> </table>
74
Tabelas - Espaamentos
Para colocar um espaamento entre os limites
das tabelas e das subtabelas utiliza-se o
atributo cellspacing da tag <table>;
Pode tomar um valor igual ao nmero de pxeis

correspondente ao espaamento entre as
clulas das tabelas.
75
Para aumentar a distncia do texto aos limites
das
clulas,
pode
utilizar-se
atributo
cellpadding da tag <table>;
Pode tomar um valor igual ao nmero de pxeis

correspondente ao espaamento entre as
clulas das tabelas.
76
<table border=2 bordercolor="blue" bgcolor="#CCFFFF" width=100%

align=center>
<tr> <td>
<table border="4" bordercolor="green" bgcolor="#8FBC8F"
width=80% cellspacing=10 cellpadding=10>
<tr align=center> <td> Subtabela 1 </td>
<td> </td>
</tr>
<tr> <td align=center> Item 1.1 </td>
<td align=center> Item 1.2 </td> </tr>
</table>
</td>
</table>
77
78
Tabelas Unio de clulas

Nas tabelas construdas em documentos HTML,
possvel unir algumas das suas clulas, quer
horizontalmente, com o atributo colspan, quer
verticalmente, com o atributo rowspan.
Basta igualar estes atributos ao nmero de
clulas que se pretende unir.
79
Tabelas - Dimenses
<table border=1 width=100%>
<tr> <td colspan=2> Aplicao do atributo
colspan=2, para a unio de 2 colunas
</td> </tr>
<tr> <td> Linha 1 </td>
<td rowspan=3>
Aplicao do atributo rowspan=3, para a unio de 3
linhas </td>
</tr>
<tr> <td> Linha 2 </td> </tr>
<tr> <td> Linha 3 </td> </tr>
</table>
80
Tabelas - Dimenses
81

HTML Tutorial

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML Tutorial

Transféré par

Droits d'auteur :

Formats disponibles

Ano Lectivo 2008/2009

HyperText MarKup Language

Linguagem de marcao de hipertexto utilizada na

Introduo ao HTML (cont.)

Como guardar um documento em HTML

Comando ou instruo embutidos no

Tags e Atributos (cont.)

Tag de fecho tag de incio, exceptuando o smbolo

Tags e Atributos (cont.)

Tags e Atributos (cont.)

Tags e Atributos (cont.)

Comandos que fornecem informao

Bgcolor: define a cor do fundo da pgina;

Estrutura bsica de uma pgina em HTML

e <html> servem para indicar ao browser

onde comea e onde termina um documento em html;

apresentado na barra de ttulo da janela do browser;

<body> e </body> delimitam o corpo do documento.

precedido de (#) da entidade que representa o carcter e o

espao (non-breaking space) &nbsp;

menor que (less than)

maior que (greater than)

aspas (quotation mark)

Tags elementares (cont.)

O HTML tem seis nveis de cabealhos;

Identificados com as tags H1, H2, H6;

Tags elementares (cont.)

Tags elementares (cont.)

Criados atravs da utilizao da tag <p>;

expresso aquando da visualizao no browser;

Tags elementares (cont.)

Tags elementares (cont.)

Criadas em HTML atravs da utilizao da tag <br>;

Tags elementares (cont.)

Tags elementares (cont.)

Tags elementares (cont.)

Tags elementares (cont.)

Tags elementares (cont.)

documento sem se desejar que estes apaream,

Fundo da pgina (cont.)

Formatao de texto em HTML

Formatao face (tipo letra)

Formatao face (tipo letra)

Formatao size (tamanho)

Formatao size (tamanho)

Formatao color (cor)

Formatao color (cor)

<strong> Texto grande a negrito.

Texto em itlico sombreado.

<small> Texto pequeno.

Texto inferior linha.

Texto superior linha.

Listas com marcadores

Listas com marcadores

Listas com marcadores

Resoluo da ficha de Trabalho

Formatos de imagens (cont.)

So muito flexveis e a sua capacidade de produzir gifs

cones que no exijam muita qualidade de imagem.

Formatos de imagens (cont.)

Alinhamento das imagens

alinhamento das imagens em relao aos elementos

Alinhamento das imagens (cont.)

ou direita da pgina, com o texto sua volta;

espao (non-breaking space)