Download - HTML Tutorial
-
Ano Lectivo 2008/2009
Redes de Comunicao
-
HTML
Introduo ao HTML
2
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.
-
Como guardar um documento em HTML
Introduo ao HTML (cont.)
3
Guarda-se o ficheiro com o nome e a
extenso . html ou htm.
-
Tags
Tags e Atributos
4
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.)
5
Cada tag est contida entre os sinais de menor ;
Tag de fecho tag de incio, exceptuando o smbolo
/;
Exemplos:
- tag de abertura;
- tag de fecho.
-
Tags e Atributos (cont.)
6
Elementos bsicos:
Tag de abertura;
Contedo;
Tag de fim.
A minha primeira linguagem de programao.
Tag de abertura Contedo Tag de fim
-
Tags e Atributos (cont.)
7
A minha primeira linguagem de programao.
-
Tags e Atributos (cont.)
8
Comandos que fornecem informao
adicional ao browser para a
apresentao das pginas.
Atributos
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
9
A estrutura bsica de uma pgina em HTML, consiste nos blocos head e body;
Cabealho do documento
Corpo do documento
-
Tags Bsicas
10
e ;
e ;
e ;
e .
-
Tag Bsicas
11
e servem para indicar ao browser
onde comea e onde termina um documento em html;
e indicam o incio e o fim do
cabealho do documento, onde se define o ttulo da
pgina;
e define o ttulo da pgina,
apresentado na barra de ttulo da janela do browser;
e delimitam o corpo do documento.
-
Caracteres especiais
12
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 (;).
-
Caracteres especiais
13
Visualizao Descrio Nome Nmero
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
-
Links teis
14
http://www.htmldog.com/reference/htmltags/
http://www.truquesedicas.com/tutoriais/html/00007a.htm
-
Tags elementares
15
Cabealhos;
Pargrafos;
Quebras de linha;
Divises;
Comentrios.
-
Tags elementares (cont.)
16
O HTML tem seis nveis de cabealhos;
Identificados com as tags H1, H2, H6;
Pode ter o atributo align.
-
Tags elementares (cont.)
17
Exemplo:
Este um cabealho tamanho 1
-
Tags elementares (cont.)
18
Criados atravs da utilizao da tag ;
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
e para o fim a tag ;
-
Tags elementares (cont.)
19
Exemplo:
Isto um pargrafo ;
-
Tags elementares (cont.)
20
Criadas em HTML atravs da utilizao da tag ;
Utiliza-se quando se pretende forar uma mudana
de linha, num determinado ponto do texto, sem se
criar um pargrafo.
-
Tags elementares (cont.)
21
Mudana
de
linha
usando
br
-
Tags elementares (cont.)
22
Para dividir uma pgina com linhas horizontais utiliza-
se a tag ;
Atributos:
align;
noshade;
size;
width.
-
Tags elementares (cont.)
23
Exemplo:
Insere uma linha de largura 7 (pixels)
Insere uma linha que ocupa 50% do espao
disponvel:
-
Tags elementares (cont.)
24
Para dividir uma pgina com linhas horizontais utiliza-
se a tag ;
Atributos:
align;
noshade;
size;
width.
-
Tags elementares (cont.)
25
Para colocar comentrios ou referncias num
documento sem se desejar que estes apaream,
utiliza-se a tag de abertura ;
-
Fundo da pgina
26
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.
-
Fundo da pgina (cont.)
27
Exemplo:
- aplica a cor azul ao fundo da pgina;
-
Formatao de texto em HTML
28
Para formatar o tipo, a cor e o tamanho da letra utiliza-
se:
As tags e ;
Atributos:
Face tipo de letra;
Size tamanho da letra;
Color cor da letra.
-
Formatao face (tipo letra)
29
http://www.bigoo.ws/help/help_font.aspx
O atributo face define o tipo de letra que se pretende
utilizar.
-
Formatao face (tipo letra)
30
Exemplo
-
Formatao size (tamanho)
31
O atributo size define o tamanho de letra que se
pretende utilizar. Pode tomar valores de 1 a 7 e de -2
a +4.
-
Formatao size (tamanho)
32
Exemplo:
-
Formatao color (cor)
33
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.
-
Formatao color (cor)
34
Exemplo:
-
Formatao - Estilos
35
Estilos mais utilizados:
Tag Resultado
Texto a negrito.
Texto grande a negrito.
Texto em itlico.
Texto em itlico sombreado.
Texto sublinhado.
Texto grande.
Texto pequeno.
Texto inferior linha.
Texto superior linha.
Texto rasurado.
-
Listas
36
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.
-
Listas numeradas
37
Delimitadas pelas tags e ;
Cada item delimitado pelas tags e ;
Por defeito a numerao surge com valores de 1 a n;
O atributo type permite alterar esses valores para
outros.
-
Listas numeradas
38
Linguagem do exemplo anterior:
-
Listas com marcadores
39
Delimitadas pelas tags e ;
Cada item delimitado pelas tags e ;
Por defeito a numerao surge o smbolo disc;
O atributo type permite alterar esses smbolo para
outros.
-
Listas com marcadores
40
Exemplo:
-
Listas com marcadores
41
Exemplo:
-
Listas de definies
42
Delimitadas pelas tags e ;
Cada item delimitado pelas tags e ;
Cada definio delimitado pelas tags e
.
-
Listas de definies
43
Linguagem do exemplo anterior.
-
Listas de definies
44
Exemplo:
-
Resoluo da ficha de Trabalho
45
2. Indica os trs tipos de listas.
- Listas numeradas ordenadas;
- Listas com marcadores;
- Listas de definies.
-
Formatos de imagens
46
Nos documentos HTML, possvel utilizar variados
formatos de imagens.
Jpeg;
Png;
Gif.
-
Formatos de imagens (cont.)
47
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
cones que no exijam muita qualidade de imagem.
-
Formatos de imagens (cont.)
48
Combinam a compresso do jpg com uma maior
qualidade da imagem.
-
Insero de Imagens
49
Tag - 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.
-
Alinhamento das imagens
50
O alinhamento das imagens corresponde ao
alinhamento das imagens em relao aos elementos
circundantes;
Atributo align.
-
Alinhamento das imagens (cont.)
51
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.
-
Alinhamento das imagens (cont.)
52
Exemplo:
-
Dimensionamento das imagens
53
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 .
-
Dimensionamento das imagens
54
Dimensionamento das imagens
-
Alternativa em texto
55
Alt Permite definir um texto.
Estaes do ano
-
Alternativa em texto (cont.)
56
-
Contorno
57
Border Atributo utilizado para colocar um contorno volta da imagem.;
Definido em pixis.
-
Tabelas
58
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 e
, e para definir linhas e e
para definir colunas;
importante NO esquecer de fechar as tags.
-
Tabelas principais tags
59
Tag Descrio
Define uma tabela.
Insere uma linha numa tabela.
Insere uma clula numa linha da tabela.
Define um cabealho numa linha da tabela.
Associa uma legenda a uma tabela.
-
Tabelas principais atributos
60
Atributo Valor Descrio
border pxeis Especifica a espessura dos limites da tabela ou da clula.
bordercolor#xxxxxx
nome_da_corDefine a cor dos limites da tabela ou da clula.
bgcolor#xxxxxx
nome_da_corDefine a cor de fundo da tabela ou da clula.
heightpxeis
%Especifica a altura da tabela ou da clula.
widthpxeis
%Especifica a largura da tabela ou da clula.
align
left
right
center
Define o alinhamento horizontal da tabela ou do contedo da clula.
valign
top
middle
bottom
Define o alinhamento vertical da tabela ou do contedo da clula.
cellpadding pxeisEspecifica 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 nmero Une horizontalmente duas ou mais clulas.
rowspan nmero Une verticalmente duas ou mais clulas.
-
Estrutura bsica de uma tabela
61
Tags para insero de tabela num
documento HTML:
- Define a tabela e seus
atributos;
- Define as linhas e seus
atributos;
- Define as colunas e os seus
atributos.
-
Estrutura bsica de uma tabela
62
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   para marcar como
espao vazio.
-
Exemplo de uma tabela
63
-
Limites de uma tabela
64
Para evidenciar os limites das tabelas utiliza-se o
atributo border da tag ;
-
Tabelas - Fundos
Para colocar uma cor de fundo numa tabela
utiliza-se o atributo bgcolor da tag , da
tag ou da tag , igualado cor que se
deseja;
A prioridade de aplicao da cor definida pela
ordem descrita (tag , tag e tag
).
-
Tabelas - Fundos
Tabela principal
SubTabela 1
Item 1.1
Item 1.2
-
67
Tabelas - Fundos
-
Tabelas - Dimenses
As dimenses das clulas e tabelas podem ser
redi-mensionadas atravs dos atributos widht
(altura) e height (largura) da tag ou da
tag ;
Estes atributos podem dimensionar as clulas
e as tabelas de forma absoluta, em pixis, ou
de forma relativa, em percentagem.
-
Tabelas - Dimenses
Tabela principal
SubTabela 1
Item 1.1
Item 1.2
-
70
Tabelas - Dimenses
-
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 ou da tag ,
igualado aos valores left, center ou right.
-
Tabelas - Alinhamento
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 ou da tag ,
igualado aos valores top, middle ou bottom.
-
Tabelas - Alinhamento
Horizontal = esquerda
Vertical = topo
Horizontal = centro
Vertical = meio
-
74
Tabelas - Alinhamento
-
Tabelas - Espaamentos
Para colocar um espaamento entre os limites
das tabelas e das subtabelas utiliza-se o
atributo cellspacing da tag ;
Pode tomar um valor igual ao nmero de pxeis
correspondente ao espaamento entre as
clulas das tabelas.
75
-
Tabelas - Espaamentos
Para aumentar a distncia do texto aos limites
das clulas, pode utilizar-se o atributo
cellpadding da tag ;
Pode tomar um valor igual ao nmero de pxeis
correspondente ao espaamento entre as
clulas das tabelas.
76
-
Tabelas - Espaamentos
Tabela principal
Subtabela 1
Item 1.1
Item 1.2
77
-
78
Tabelas - Espaamentos
-
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
Aplicao do atributo
colspan=2, para a unio de 2 colunas
Linha 1
Aplicao do atributo rowspan=3, para a unio de 3
linhas
Linha 2
Linha 3
80
-
81
Tabelas - Dimenses