Aula3 - HTML - Parte 1

04/03/2010
Ferramentas bsicas de desenvolvimento para web
HTML
HTML - Hyper Text Markup Language

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
Referncias
W3C - Especificao HTML4 - http://www.w3.org/TR/html401/
Conceitos bsicos - http://www.obasicodaweb.com
Tutorial HTML - http://www.icmc.usp.br/ensino/material/html/
HTML
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
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 < e >
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.
<h1>Programao HTML</h1>
<p> No h diferenciao entre letras maisculas e minsculas. </p>
<br />
HTML
Tag HTML
Marcadores de contedo em um documento html que informam ao interpretador (Browser)
como exibir o elemento.
Atributos dos Elementos

Definem 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 bgcolor=Blue id=BodyContent >

...
</body>
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
HTML
Documento HTML
Compreende um arquivo texto com extenso htm ou html criado a partir de um
processador de texto qualquer.
Sees do documento HTML
Cabealho
Head - Informaes de cabealho - no

so exibidas na janela do browser.
<head>
<title> Programao HTML</title>
<meta name=author lang=pt-br" content=" />
<meta name=keywords" lang=pt-br" content= />
</head>
Body - Contedo que ser exibido na
<body>
janela do browser.
Corpo
Documento HTML
<html >
</body>
</html>
HTML
Tags de formatao
Formatao bsica
Tags
Pargrafo
<p> ... </p>
Quebra de linha
<br/>
Ttulos
<h1> <h2> <h3> <h4> <h5> <h6>
Comentrios
<! aqui vai o comentrio-->
Estilos de caracteres
Tags
Negrito
<b> ... </b>
Itlico
<i> ... </i>
Sublinhado
<u> ... </u>
Subscrito
<sub> ... </sub>
Sobrescrito
<sup> ... </sup>
Caracteres especiais
Tags
espao em branco

04/03/2010
HTML
Tags de formatao
<h1>Ttulo 1</h1>
<h2>Ttulo 2</h2>
<h3>Ttulo 3</h3>
<h4>Ttulo 3</h4>
<h5>Ttulo 3</h5>
<h6>Ttulo 3</h6>
<p> Este um pargrafo </p>

<p> Este outro pargrafo</p>
HTML
Imagens
<img .../> 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.
<img id=img1 src=floresta.jpg" alt=foto da floresta />

img
Atributos
Descrio
id
src
endereo da imagem - relativo ou absoluto
alt
texto alternativo
height
altura do elemento para exibio da imagem
width
largura do elemento para exibio da imagem
border
espessura da borda em torno da imagem por padro a borda no

exibida
class
identifica a classe CSS para este elemento
style
define os atributos de estilo inline
04/03/2010
HTML
Exemplo:
Imagem original: floresta.jpg - 1024x768 pixels - 648 KB
<img id=img1 src=floresta.jpg width=155px />

Embora a dimenso tenha sido redefinida, a imagem
transmitida ser a mesma ( 648KB )
se a imagem fosse outra: floresta155.jpg
155x118 pixels = 3KB
pgina html exemplo
HTML
1
0
Links
<a> </a> permite a criao de links entre documentos
link entre pginas do site:
<a href=pag2.htm>link para a pgina 2</a>

<a href=pag2.htm><img id=img1 src=foto1.gif /> </a>
pag1.htm
pag2.htm
link para a pgina 2
04/03/2010
Links
HTML
Caminho absoluto
11
quando a URL esta includa no caminho.

<a href=http://www.fatec.br/pagina2.htm>contedo da pgina 2 </a>
Caminho Relativo
quando o caminho est relacionado a estrutura do site local.
<a href=../../pagina2.htm>contedo da pgina 2 </a>
wwwroot
index.htm
sobre.htm
imagens
instituicao
sobre.htm
<a href=instituicao/sobre.htm>sobre nos</a>

index.htm
sobre.htm
produtos
lista.htm
detalhe.htm
<a href=../index.htm>sobre nos</a>

listahtm
sobre.htm
index.htm
<a href=../produtos/lista.htm>lista de produtos</a>
HTML
12
Links
Atributos
a
Atributos
Descrio
id
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
04/03/2010
HTML
13
Links
Exibir uma pgina em uma nova janela:
<a href=http://www.fatec.br/pagina2.htm target=_blank >contedo da pgina 2 </a>
Download de um arquivo:
<a href=html.docx >Download do arquivo html.docx</a>
Enviar E-mail usando um cliente de email:

<a href=mailto:contato@fatec.br >Fale conosco</a>
Exibir um vdeo:
<a href=timberners.mp4 >Tim Berners Lee</a>
Pgina Exemplo
HTML
14
Links
Links para sees na mesma pgina:
ncoras :
Definem posies no documento que podem ser acessadas como links.
ndice
v para a seo 1
v para a seo 2
Seo 1
Criar o link para a seo

<a href=#secao1 >v para a seo 1</a>
Criar uma ncora para a seo 1

<a name=secao1 >Seo 1</a>
Seo 2
Pgina Exemplo
04/03/2010
HTML
15
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
Melancias
Tcnica: Acrlico sobre tela
Medida: 60 x 80 cm
Ano: 1978
Pssaro
Tcnica: Acrlico sobre tela
Medida: 46 x 55 cm
Ano: 1994
HTML
16
Col 2
Col 1
Col 2
Linha 2
Tabela
Linha 1
Col 1
Table
<table>
<tr>
<td>
Lin 1 Col 1
</td>
<td>
Lin 1 Col 2
</td>
</tr>
<tr>
<td>
Lin 2 Col 1
</td>
<td>
Lin 2 Col 2
</td>
</tr>
</table>
Lin 1 Col 1
Lin 1 Col 2
Lin 2 Col 1
Lin 2 Col 2
<tr></tr> Representa a linha da tabela

<td></td> Representa a clula da linha
<th></th> Representa a clula de ttulo
04/03/2010
HTML
17
Table
Delimita uma tabela dentro da pgina, composta por linhas e colunas.
<table> </table>
table
Atributos
Descrio
id
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
style
HTML
18
Table
<tr></tr> Representa a linha da tabela
tr linha da tabela
Atributos
Descrio
id
align
bgcolor
valign
define o alinhamento vertical do contedo nas clulas da linha

top, middle, bottom, baseline
class
style
<table border=2 bordercolor=black>

<tr bgcolor=blue>
<td>
Lin 1 Col 1
</td>
<td>
Lin 1 Col 2
</td>
</tr>
04/03/2010
HTML
Table
19
<td></td> Representa a clula de uma linha

td clula da linha
Atributos
Descrio
id
align
define o alinhamento horizontal - left, center, right ou justify
bgcolor
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 linha

top, middle, bottom, baseline
class
style
HTML
Table
20
Mesclando clulas colspan. rowspan
<table>
<tr>
<td colspan="2">
Lin 1 Col 1
</td>
</tr>
<tr>
<td>
Lin 2 Col 1
</td>
<td rowspan="2">
Lin 2,3 Col 2
</td>
</tr>
<tr>
<td>
Lin 3 Col 1
</td>
</tr>
</table>
Lin 1 Col 1
Lin 2 Col 1
Lin 2,3 Col 2
Lin 3 Col 1
10
04/03/2010
HTML
Exemplo
Pgina 1
21
Pgina 2
HTML
22
<html>
<head>
<title>Orqudeas</title>
</head>
<body bgcolor="black" text="white" >
<table width="70%" border="3" bordercolor="black" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2">
<h2>Orqudeas</h2>
As orqudeas so largamente cultivadas no Brasil e no mundo e seu comrcio movimenta grandes somas...
</td>
</tr>
<tr valign="middle">
<td >
<img src="imagem1.png" />
</td>
<td>
<h3>Phalaenopsis</h3> uma planta muito popular por sua fcil adaptao em apartamentos, perto de...
</td>
</tr>
<tr valign="middle">
<td >
<img src="imagem3.jpg" />
</td>
<td>
<h3>Cattleya forbesii</h3> uma bifoliada que apresenta pseudobulbos com at 20 cm de ...
</td>
</tr>
</table>
</body>
</html>
11
04/03/2010
Table carregando imagens nas clulas da tabela
HTML
HTML
23
24
Div Define uma diviso, uma seo ou um bloco em um documento html

div
Atributos
Descrio
id
align
class
style
<div style=width:300px; height:300px; border:3px solid red; padding:10px; margin:10px>
</div>
margin:10px
border:3px solid red
padding:10px
12
04/03/2010
HTML
25
Div Define uma diviso, uma seo ou um bloco em um documento html

<div style=width:300px; height:300px; border:3px solid red; padding:10px; margin:10px>
Bloco 1
</div>
<div style=float:left; width:300px; height:300px; border:3px solid red; padding:10px; margin:10px>
Bloco 2
</div>
margin:10px
padding:10px
Bloco 1
margin:10px
padding:10px
Bloco 2
HTML
Div
26
CSS - Float
O atributo CSS float utilizado para posicionar o elemento a esquerda left ou a

direita right de outro elemento.
13
04/03/2010
HTML
Div Criando clulas em linha
27
<div style="width: 338px; float: left; margin: 5px;">

<img alt="" src="images/flores.gif/>
</div>
HTML
28
Cores
As cores para os atributos podem ser informadas pelo nome oficial reconhecido pelo browser ou pelo
cdigo hexadecimal RGB.
O cdigo RGB
RGB a sigla para Red, Green, Blue (Vermelho, Verde, Azul), que gera o padro de cores pelo qual os
monitores obtm cores com brilho.
A codificao das cores est baseada na mistura cromtica. Ou seja, certas quantidades dessas 3 cores so
misturadas para se obter uma determinada cor.
Aqua
(#00FFFF)
Green
(#008000)
Navy
(#000080)
Silver
(#C0C0C0)
Black
(#000000)
Gray
(#808080)
Olive
(#808000)
Teal
(#008080)
Blue
(#0000FF)
Lime
(#00FF00)
Purple
(#800080)
White
(#FFFFFF)
Fuchsia
(#FF00FF)
Maroon
(#800000)
Red
(#FF0000)
Yellow
(#FFFF00)
Exemplo:
<body bgcolor=#C0C0C0 >
<body bgcolor=silver >
14
04/03/2010
HTML
29
HTML - Eventos intrnsecos

Utilizados para programar aes no cliente. sero associadas a funes JavaScript.
Os eventos dependem do tipo de elemento associado.
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
Exerccio
#604A7B
Construa o cdigo HTML da pgina

conforme o modelo.
Margem=30px
imagens
#CCC1DA
Aldemir Martins
80px
15px
wwwroot
30
Pintor, gravador, desenhista, ilustrador.
100%
Biografia
gato.gif
Obras
Galo.gif
Pontificibus
praedecessoribus nostris
et saepius tentatum est;
verum absolvi et
Conteudo
Biografia.htm
#DFD8E8
500px
Obras.htm
Hoc vero, quod nimirum

exigit legitimam kalendarii
restitutionem, iamdiu a
Romanis
index.htm
75%
20%
#B3A2C7
15

Aula3 - HTML - Parte 1

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Aula3 - HTML - Parte 1

Diunggah oleh

Hak Cipta:

Format Tersedia

04/03/2010

Ferramentas bsicas de desenvolvimento para web

HTML - Hyper Text Markup Language

Ferramentas bsicas de desenvolvimento para web

HTML - Evoluo Histrica

Ferramentas bsicas de desenvolvimento para web

HTML - Hyper Text Markup Language

definem propriedades especficas (formatao, identificao ou ao) para o elemento

Ferramentas bsicas de desenvolvimento para web

Atributos dos Elementos

<body bgcolor=Blue id=BodyContent >

imagem para preencher fundo

cor dos links de hipertexto

cor dos links visitados

cor dos links quando o mouse

Ferramentas bsicas de desenvolvimento para web

Head - Informaes de cabealho - no

Ferramentas bsicas de desenvolvimento para web

<p> ... </p>

<h1> <h2> <h3> <h4> <h5> <h6>

<! aqui vai o comentrio-->

<b> ... </b>

<i> ... </i>

<u> ... </u>

<sub> ... </sub>

<sup> ... </sup>

Ferramentas bsicas de desenvolvimento para web

<p> Este um pargrafo </p>

Ferramentas bsicas de desenvolvimento para web

<img id=img1 src=floresta.jpg" alt=foto da floresta />

endereo da imagem - relativo ou absoluto

altura do elemento para exibio da imagem

largura do elemento para exibio da imagem

espessura da borda em torno da imagem por padro a borda no

identifica a classe CSS para este elemento

define os atributos de estilo inline

Ferramentas bsicas de desenvolvimento para web

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

<img id=img1 src=floresta.jpg width=155px />

pgina html exemplo

Ferramentas bsicas de desenvolvimento para web

<a href=pag2.htm>link para a pgina 2</a>

link para a pgina 2

Ferramentas bsicas de desenvolvimento para web

quando a URL esta includa no caminho.

<a href=instituicao/sobre.htm>sobre nos</a>

<a href=../index.htm>sobre nos</a>

Ferramentas bsicas de desenvolvimento para web

especifica o endereo (URL) da pgina destino

especifica a janela ou frame onde o link deve ser carregado:

Especifica o nome de uma ncora

Ferramentas bsicas de desenvolvimento para web

Enviar E-mail usando um cliente de email:

Ferramentas bsicas de desenvolvimento para web

Criar o link para a seo

Criar uma ncora para a seo 1

Ferramentas bsicas de desenvolvimento para web

Ferramentas bsicas de desenvolvimento para web

<tr></tr> Representa a linha da tabela

Ferramentas bsicas de desenvolvimento para web

define o alinhamento horizontal - left, center ou right

define a cor de fundo

define a espessura da borda em pixels nas clulas da tabela

define a cor da borda