Aula3 - HTML - Parte 1

04/03/2010

1

Contedo Parte 1

A linguagem de marcao HTML

Estrutura do documento HTML

Tags e Atributos HTML

Tags de formatao

Imagens - img

Ligaes - links

Tabelas table

Bloclo div

Cores

Eventos intrnsecos

HTML - Hyper Text Markup Language

Ferramentas bsicas de desenvolvimento para web

HTML1

RefernciasW3C - Especificao HTML4 - http://www.w3.org/TR/html401/Conceitos bsicos - http://www.obasicodaweb.comTutorial HTML - http://www.icmc.usp.br/ensino/material/html/


HTML2

HTML - Evoluo Histrica

1992 Primeira verso HTML. 1993 - HTML+ Algumas definies de aparncia, tabelas, formulrios. 1994 - HTML v2.0 Padronizao para os caractersticas principais. 1994 - HTML v3.0 Uma extenso do HTML+ entendido como um rascunho de padro. 1995 - HTML v3.2 Netscape e Internet Explorer definem seus prprios padres baseados nas implementaes correntes. 1995 - JavaScript criada por Brendan Eich da Netscape como uma extenso do HTML para o browser Navigator v2.0. JavaScript uma linguagem de roteiro (script) baseada em objetos e permite que sejam manipulados atravs de eventos dinmicos que faltavam ao HTML 1996 - CSS1 Em dezembro deste ano apresentada pela primeira vez a Folha de Estilo, criada para complementar a linguagem HTML. Possua uma formatao simples e cerca de 60 propriedades. 1997 - HTML v4.0 So lanados os browsers Netscape v4.0 (agosto) e Internet Explorer v4.0 (outubro) que apresentaram um conjunto de tecnologias (CSS, JavaScript/VBScript e DOM) que juntas disponibilizaram diversos recursos tornando o HTML dinmico. Surge ento o DHTML. 1998 - CSS2 Em maio lanado a segunda verso da Folha de Estilo que, alm de incluir todas as propriedades do CSS1 ainda apresenta por volta de 70 novas propriedades. 1999 - HTML v4.01 Alguma modificaes da verso anterior. 2000 - XHTML v1.0 criado e consiste de uma verso XML do HTML v4.01.

04/03/2010

2


HTML

HTML - Hyper Text Markup Language

Uma linguagem de marcao de hipertexto utilizada para estruturar contedo em pginas web.

A linguagem formada por um conjunto de marcadores denominados Tags (rtulos) e seus atributos.

Tag: o marcador usado para delimitar o incio e, onde for requerido, o fim de um elemento HTML. A Tag identificada por uma palavra ou letra entre os smbolos Geralmente para cada Tag de abertura existe uma de fechamento.

Atributos: definem propriedades especficas (formatao, identificao ou ao) para o elemento html.

Elemento html: uma estrutura semntica, composta de: tag de abertura, contedo e tag de fechamento.

Programao HTML No h diferenciao entre letras maisculas e minsculas.

3


HTML4

Tag HTMLMarcadores de contedo em um documento html que informam ao interpretador (Browser) como exibir o elemento.

Atributos dos ElementosDefinem propriedades para o elemento HTML. (formatao, identificao, ao)So inseridos na tag de abertura, logo aps o nome da tag, precedido de um espao e composto de um nome de atributo, um sinal de igual (=) e um valor de atributo, entre aspas duplas (") ou simples ()

... body

Atributos Descrio

id identificao do elemento

background imagem para preencher fundo

bgcolor cor de fundo

text cor do texto

link cor dos links de hipertexto

vlink cor dos links visitados

alink cor dos links quando o mouse posicionado sobre.

04/03/2010

3


HTML5

Documento HTML

Compreende um arquivo texto com extenso htm ou html criado a partir de um processador de texto qualquer.

Sees do documento HTML

Programao HTML

Do

cum

ento

HTM

L

Cab

eal

ho

Co

rpo

Head - Informaes de cabealho - no so exibidas na janela do browser.

Body - Contedo que ser exibido na janela do browser.


HTML6

Formatao bsica Tags

Pargrafo ...

Quebra de linha

Ttulos

Comentrios

Estilos de caracteres Tags

Negrito ...

Itlico ...

Sublinhado ...

Subscrito ...

Sobrescrito ...

Caracteres especiais Tags

espao em branco

Tags de formatao

04/03/2010

4


HTML7

Ttulo 1Ttulo 2Ttulo 3 Ttulo 3 Ttulo 3 Ttulo 3

Este um pargrafo

Este outro pargrafo

Tags de formatao


HTML8

Imagens

Permite inserir imagens no documento html.A maioria dos browsers exibe imagens nos formatos GIF, JPEG e PNG.

A imagem exibida no local onde o elemento img foi inserido no documento.

04/03/2010

5


HTML9

Exemplo:

Imagem original: floresta.jpg - 1024x768 pixels - 648 KB

Embora a dimenso tenha sido redefinida, a imagem transmitida ser a mesma ( 648KB )

se a imagem fosse outra: floresta155.jpg155x118 pixels = 3KB

pgina html exemplo


HTML1

0Links

permite a criao de links entre documentos

link entre pginas do site:

link para a pgina 2

pag2.htmpag1.htm

link para a pgina 2

04/03/2010

6


HTML11

Caminho absolutoquando a URL esta includa no caminho.contedo da pgina 2

Caminho Relativoquando o caminho est relacionado a estrutura do site local.contedo da pgina 2

wwwroot

imagens

instituicao

produtos

detalhe.htm

lista.htm

sobre.htm

index.htm

sobre nos

index.htm sobre.htm

index.htm sobre.htm

sobre nos

listahtm sobre.htm

lista de produtos

Links


HTML12

a

Atributos Descrio


href especifica o endereo (URL) da pgina destino

target especifica a janela ou frame onde o link deve ser carregado:_blank = carrega em uma nova janela_parent = carrega no frame de nvel superior ao atual_self = carrega o link na mesma janela ou frame_top = remove os frames e carrega o link

Name Especifica o nome de uma ncora

Links

Atributos

04/03/2010

7


HTML13

Exibir uma pgina em uma nova janela:contedo da pgina 2

Links

Download de um arquivo:Download do arquivo html.docx

Enviar E-mail usando um cliente de email:Fale conosco

Exibir um vdeo:Tim Berners Lee

Pgina Exemplo


HTML14

Links

Links para sees na mesma pgina:

Seo 1

Seo 2

v para a seo 1v para a seo 2

Seo 1

Criar uma ncora para a seo 1

1

v para a seo 1

Criar o link para a seo

2

ncoras :Definem posies no documento que podem ser acessadas como links.

Pgina Exemplo

ndice

04/03/2010

8


HTML15

Table

Aldemir Martins (Ingazeiras CE 1922 - So Paulo SP 2006). Pintor, gravador, desenhista, ilustrador. Em 1941, participa da criao do Centro Cultural de Belas Artes, um dos mais reconhecidos artistas brasileiros.

Gato Tcnica: Pintura acrlica s/ tela Medida: 40x40 cm Ano: 2004

MelanciasTcnica: Acrlico sobre telaMedida: 60 x 80 cmAno: 1978

PssaroTcnica: Acrlico sobre telaMedida: 46 x 55 cmAno: 1994


HTML16

Table

Lin 1 Col 1 Lin 1 Col 2

Lin 2 Col 1 Lin 2 Col 2

Lin 1 Col 1

Lin 1 Col 2

Lin 2 Col 1

Lin 2 Col 2

Representa a linha da tabela

Representa a clula da linha

Tab

ela

Lin

ha

1Li

nh

a 2

Co

l1C

ol2

Co

l2C

ol1

Representa a clula de ttulo

04/03/2010

9


HTML17

Delimita uma tabela dentro da pgina, composta por linhas e colunas.

table

Atributos Descrio


align define o alinhamento horizontal - left, center ou right

bgcolor define a cor de fundo

border define a espessura da borda em pixels nas clulas da tabela

bordercolor define a cor da borda

background define uma imagem como fundo da tabela

height altura do elemento para exibio da imagem

width largura do elemento para exibio da imagem

cellpadding Define (em pixel) o espao entre o contedo da clula e a bordar.default=1

cellspacing Define (em pixel) o espao entre as clulas da tabela. default = 2

class identifica a classe CSS para este elemento

style define os atributos de estilo inline

Table


HTML18

tr linha da tabela

Atributos Descrio




valign define o alinhamento vertical do contedo nas clulas da linhatop, middle, bottom, baseline



Representa a linha da tabela

Lin 1 Col 1

Lin 1 Col 2

Table

04/03/2010

10


HTML19

td clula da linha

Atributos Descrio


align define o alinhamento horizontal - left, center, right ou justify


bordercolor define a cor da borda

background define uma imagem para o fundo da clula

colspan define o nmero de colunas ocupadas por uma clula

rowspan define o nmero de linhas ocupadas por uma clula

height altura da clula

width largura da clula

nowrap desativa a mudana automtica de linha em uma celula

valign define o alinhamento vertical do contedo nas clulas da linhatop, middle, bottom, baseline



Representa a clula de uma linha

Table


HTML20

Lin 1 Col 1

Lin 2 Col 1 Lin 2,3 Col 2

Lin 3 Col 1

Lin 1 Col 1

Lin 2 Col 1

Lin 2,3 Col 2

Lin 3 Col 1

Mesclando clulas colspan. rowspanTable

04/03/2010

11


HTML21

Exemplo Pgina 1 Pgina 2


HTML22

Orqudeas

OrqudeasAs orqudeas so largamente cultivadas no Brasil e no mundo e seu comrcio movimenta grandes somas...

Phalaenopsis uma planta muito popular por sua fcil adaptao em apartamentos, perto de...

Cattleya forbesii uma bifoliada que apresenta pseudobulbos com at 20 cm de ...

04/03/2010

12


HTML23

Table carregando imagens nas clulas da tabela

margin:10px

border:3px solid red


HTML24

Div Define uma diviso, uma seo ou um bloco em um documento html

div

Atributos Descrio





padding:10px

04/03/2010

13

margin:10px

border:3px solid red


HTML25

Div Define uma diviso, uma seo ou um bloco em um documento html

Bloco 1

Bloco 2

padding:10px

Bloco 1

margin:10px

border:3px solid redpadding:10px

Bloco 2


HTML26

Div CSS - Float

O atributo CSS float utilizado para posicionar o elemento a esquerda left ou adireita right de outro elemento.

04/03/2010

14


HTML27

04/03/2010

15


HTML29

Eventos Ao

onLoad executado quando a imagem ou a pgina carregada

onUnLoad executado quando a pgina encerrada (fechada no browser ou redirecionamento )

onFocus executado quando o elemento ganha o foco

onBlur executado quando o elemento perde o foco

onChange executado quando o valor do elemento alterado

onSelect quando selecionado um texto em um elemento texto

onClick quando executado um clique do mouse no elemento

onDbClick quando executado um duplo clique do mouse no elemento

onKeyDown executado quando pressionada uma tecla no elemento

onKeyPress executado quando uma tecla pressionada e solta

onKeyUp executado aps a liberao de uma tecla pressionada

onMouseDown boto do mouse pressionado sobre o elemento

onMouseOut o ponteiro do mouse sai do elemento

onMouseOver o ponteiro do mouse colocado sobre o elemento

onMouseUp o boto do mouse liberado sobre o elemento

onReset quando pressionado o boto Reset de um formulrio

onSubmit quando pressionado o boto Submit

HTML - Eventos intrnsecosUtilizados para programar aes no cliente. sero associadas a funes JavaScript.Os eventos dependem do tipo de elemento associado.


HTML30

Exerccio#604A7B #CCC1DA

#DFD8E8

#B3A2C7

Hoc vero, quod nimirumexigit legitimam kalendariirestitutionem, iamdiu a Romanis

Pontificibuspraedecessoribus nostriset saepius tentatum est; verum absolvi et

Biografia

Obras

Aldemir Martins Pintor, gravador, desenhista, ilustrador.

100%

20%

80px

500p

x

Margem=30px

75%

15px

Construa o cdigo HTML da pginaconforme o modelo.

wwwroot

imagens

gato.gif

Galo.gif

index.htm

Conteudo

Obras.htm

Biografia.htm

Aula3 - HTML - Parte 1

Documents

Transcript of Aula3 - HTML - Parte 1