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.


6

Elementos bsicos:

Tag de abertura;

Contedo;

Tag de fim.

A minha primeira linguagem de programao.

Tag de abertura Contedo Tag de fim


7

A minha primeira linguagem de programao.


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.


17

Exemplo:

Este um cabealho tamanho 1


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 ;


19

Exemplo:

Isto um pargrafo ;


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.


21

Mudana

de

linha

usando

br


22

Para dividir uma pgina com linhas horizontais utiliza-

se a tag ;

Atributos:

align;

noshade;

size;

width.


23

Exemplo:

Insere uma linha de largura 7 (pixels)

Insere uma linha que ocupa 50% do espao

disponvel:


24

Para dividir uma pgina com linhas horizontais utiliza-

se a tag ;

Atributos:

align;

noshade;

size;

width.


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



Por defeito a numerao surge o smbolo disc;

O atributo type permite alterar esses smbolo para

outros.


40

Exemplo:


41

Exemplo:

Listas de definies

42



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 .


54


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 &nbsp 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.


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.


Horizontal = esquerda

Vertical = topo

Horizontal = centro

Vertical = meio

74


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


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


Tabela principal

Subtabela 1

Item 1.1

Item 1.2

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

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

html tutorial

Documents