Upload
reginaldo-gomes
View
224
Download
0
Embed Size (px)
DESCRIPTION
Aula3 - HTML - Parte 1
Citation preview
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/
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
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.
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
HTML7
Ttulo 1Ttulo 2Ttulo 3 Ttulo 3 Ttulo 3 Ttulo 3
Este um pargrafo
Este outro pargrafo
Tags de formatao
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
HTML12
a
Atributos Descrio
id identificao do elemento
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
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
HTML17
Delimita uma tabela dentro da pgina, composta por linhas e colunas.
table
Atributos Descrio
id identificao do elemento
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
Ferramentas bsicas de desenvolvimento para web
HTML18
tr linha da tabela
Atributos Descrio
id identificao do elemento
align define o alinhamento horizontal - left, center ou right
bgcolor define a cor de fundo
valign define o alinhamento vertical do contedo nas clulas da linhatop, middle, bottom, baseline
class identifica a classe CSS para este elemento
style define os atributos de estilo inline
Representa a linha da tabela
Lin 1 Col 1
Lin 1 Col 2
Table
04/03/2010
10
Ferramentas bsicas de desenvolvimento para web
HTML19
td clula da linha
Atributos Descrio
id identificao do elemento
align define o alinhamento horizontal - left, center, right ou justify
bgcolor define a cor de fundo
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
class identifica a classe CSS para este elemento
style define os atributos de estilo inline
Representa a clula de uma linha
Table
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
HTML21
Exemplo Pgina 1 Pgina 2
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
HTML23
Table carregando imagens nas clulas da tabela
margin:10px
border:3px solid red
Ferramentas bsicas de desenvolvimento para web
HTML24
Div Define uma diviso, uma seo ou um bloco em um documento html
div
Atributos Descrio
id identificao do elemento
align define o alinhamento horizontal - left, center ou right
class identifica a classe CSS para este elemento
style define os atributos de estilo inline
padding:10px
04/03/2010
13
margin:10px
border:3px solid red
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
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
Ferramentas bsicas de desenvolvimento para web
HTML27
04/03/2010
15
Ferramentas bsicas de desenvolvimento para web
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.
Ferramentas bsicas de desenvolvimento para web
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