Web Aula HTML e Css 2s2010

04/03/2010
Ferramentas básicas de desenvolvimento para web

1
HTML
HTML - Hyper Text Markup Language
Conteúdo – Parte 1
A linguagem de marcação HTML
Estrutura do documento HTML
Tags e Atributos HTML
Tags de formatação
Imagens - img
Ligações - links
Tabelas – table
Bloclo – div
Cores
Eventos intrínsecos
Referências
W3C - Especificação HTML4 - http://www.w3.org/TR/html401/
Conceitos básicos - http://www.obasicodaweb.com
Tutorial HTML - http://www.icmc.usp.br/ensino/material/html/

2
HTML
HTML - Evolução Histórica

1992 – Primeira versão HTML.
1993 - HTML+ Algumas definições de aparência, tabelas, formulários.
1994 - HTML v2.0 Padronização para os características principais.
1994 - HTML v3.0 Uma extensão do HTML+ entendido como um rascunho de padrão.
1995 - HTML v3.2 Netscape e Internet Explorer definem seus próprios padrões baseados nas
1
04/03/2010

3
HTML
HTML - Hyper Text Markup Language
Uma linguagem de marcação de hipertexto utilizada para estruturar conteúdo
em páginas web.
A linguagem é formada por um conjunto de marcadores denominados Tags (rótulos) e seus

atributos.
Tag: É o marcador usado para delimitar o início e, onde for requerido, o fim de um elemento
HTML. A Tag é identificada por uma palavra ou letra entre os símbolos “<“ e “>”
Geralmente para cada Tag de abertura existe uma de fechamento.
Atributos: definem propriedades específicas (formatação, identificação ou ação) para o elemento

html.
Elemento html: É uma estrutura semântica, composta de: tag de abertura, conteúdo e tag de fechamento.
<h1>Programação HTML</h1>
<p> Não há diferenciação entre letras maiúsculas e minúsculas. </p>
<br />

4
HTML
Tag HTML
Marcadores de conteúdo em um documento html que informam ao interpretador (Browser)
como exibir o elemento.
Atributos dos Elementos

Definem propriedades para o elemento HTML. (formatação, identificação, ação)
São inseridos na tag de abertura, logo após o nome da tag, precedido de um espaço 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 Descrição
id identificação 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.
2
04/03/2010

5
HTML
Documento HTML
Compreende um arquivo texto com extensão htm ou html criado a partir de um

processador de texto qualquer.
Seções do documento HTML
<html > Head - Informações de cabeçalho - não

são exibidas na janela do browser.
<head>
Cabeçalho
<title> Programação HTML</title>

Documento HTML
<meta name=“author“ lang=“pt-br" content=“…" />

<meta name=“keywords" lang=“pt-br" content=“…” />
</head>
<body> Body - Conteúdo que será exibido na
janela do browser.
Corpo
</body>
</html>

6
HTML
Formatação básica Tags

Parágrafo <p> ... </p>
Quebra de linha <br/>
Títulos <h1> <h2> <h3> <h4> <h5> <h6>
Comentários <!– aqui vai o comentário-->
Estilos de caracteres Tags
Negrito <b> ... </b>
Itálico <i> ... </i>
Sublinhado <u> ... </u>
Subscrito <sub> ... </sub>
Sobrescrito <sup> ... </sup>
Caracteres especiais Tags
espaço em branco
3
04/03/2010

7
HTML
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 3</h4>
<h5>Título 3</h5>
<h6>Título 3</h6>
<p> Este é um parágrafo </p>

<p> Este é outro parágrafo</p>

8
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
src endereço da imagem - relativo ou absoluto
alt texto alternativo
height altura do elemento para exibição da imagem
width largura do elemento para exibição da imagem
border espessura da borda em torno da imagem – por padrão a borda não é
exibida
class identifica a classe CSS para este elemento
style define os atributos de estilo inline
4
04/03/2010

9
HTML
Exemplo:
Imagem original: floresta.jpg - 1024x768 pixels - 648 KB
<img id=“img1” src=“floresta.jpg“ width=“155px” />
Embora a dimensão tenha sido redefinida, a imagem

transmitida será a mesma ( 648KB )
se a imagem fosse outra: floresta155.jpg

155x118 pixels = 3KB
página html exemplo
Ferramentas básicas de desenvolvimento para web 1

HTML 0
Links
<a> </a> permite a criação de links entre documentos
link entre páginas do site:
<a href=“pag2.htm”>link para a página 2</a>
<a href=“pag2.htm”><img id=“img1” src=“foto1.gif“ /> </a>
pag1.htm pag2.htm
link para a página 2
5
04/03/2010

11
Links HTML
Caminho absoluto
quando a URL esta incluída no caminho.
<a href=“http://www.fatec.br/pagina2.htm”>conteúdo da página 2 </a>
Caminho Relativo
quando o caminho está relacionado a estrutura do site local.
<a href=“../../pagina2.htm”>conteúdo da página 2 </a>
wwwroot index.htm sobre.htm
imagens
instituicao <a href=“instituicao/sobre.htm”>sobre nos</a>
sobre.htm index.htm sobre.htm
produtos
lista.htm <a href=“../index.htm”>sobre nos</a>
detalhe.htm listahtm sobre.htm
index.htm
<a href=“../produtos/lista.htm”>lista de produtos</a>

12
HTML
Links
Atributos
a
href especifica o endereço (URL) da página destino
target especifica a janela ou frame onde o link deve ser carregado:
_blank = carrega em uma nova janela
_parent = carrega no frame de nível 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
6
04/03/2010

13
HTML
Links
Exibir uma página em uma nova janela:
<a href=“http://www.fatec.br/pagina2.htm” target=“_blank” >conteúdo da página 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 vídeo:
<a href=“timberners.mp4” >Tim Berners Lee</a>
Página Exemplo

14
HTML
Links
Links para seções na mesma página:
Âncoras :
Definem posições no documento que podem ser acessadas como links.
Índice
Criar o link para a seção
vá para a seção 1 2 <a href=“#secao1” >vá para a seção 1</a>
vá para a seção 2
Criar uma âncora para a seção 1

Seção 1 1 <a name=“secao1” >Seção 1</a>
Seção 2
Página Exemplo
7
04/03/2010

15
HTML
Table
Aldemir Martins (Ingazeiras CE 1922 - São Paulo SP 2006). Pintor, gravador,

desenhista, ilustrador. Em 1941, participa da criação do Centro Cultural de Belas Artes, um
dos mais reconhecidos artistas brasileiros.
Gato
Técnica: Pintura acrílica s/ tela
Medida: 40x40 cm
Ano: 2004
Melancias
Técnica: Acrílico sobre tela
Medida: 60 x 80 cm
Ano: 1978
Pássaro
Técnica: Acrílico sobre tela
Medida: 46 x 55 cm
Ano: 1994

16
HTML
Table
<table>
Lin 1 Col 1 Lin 1 Col 2
<tr>
<td> Lin 2 Col 1 Lin 2 Col 2
Col 1
Lin 1 Col 1
</td>
Linha 1
<td> <tr></tr> Representa a linha da tabela

Col 2
Lin 1 Col 2
</td>
<td></td> Representa a célula da linha
Tabela
</tr>
<tr>
<th></th> Representa a célula de título
<td>
Col 1
Lin 2 Col 1
Linha 2
</td>
<td>
Col 2
Lin 2 Col 2
</td>
</tr>
</table>
8
04/03/2010

17
HTML
Table
Delimita uma tabela dentro da página, composta por linhas e colunas.
<table> </table>
table
align define o alinhamento horizontal - left, center ou right
bgcolor define a cor de fundo
border define a espessura da borda em pixels nas células da tabela
bordercolor define a cor da borda
background define uma imagem como fundo da tabela
height altura do elemento para exibição da imagem
width largura do elemento para exibição da imagem
cellpadding Define (em pixel) o espaço entre o conteúdo da célula e a bordar.
default=1
cellspacing Define (em pixel) o espaço entre as células da tabela. default = 2

18
HTML
Table
<tr></tr> Representa a linha da tabela
tr – linha da tabela
valign define o alinhamento vertical do conteúdo nas células da linha
top, middle, bottom, baseline
<table border=“2” bordercolor=“black”>

<tr bgcolor=“blue”>
<td>
Lin 1 Col 1
</td>
<td>
Lin 1 Col 2
</td>
</tr>
9
04/03/2010

19
HTML
Table
<td></td> Representa a célula de uma linha
td – célula da linha
align define o alinhamento horizontal - left, center, right ou justify
bordercolor define a cor da borda
background define uma imagem para o fundo da célula
colspan define o número de colunas ocupadas por uma célula
rowspan define o número de linhas ocupadas por uma célula
height altura da célula
width largura da célula
nowrap desativa a mudança automática de linha em uma celula
valign define o alinhamento vertical do conteúdo nas células da linha
top, middle, bottom, baseline

20
HTML
Table Mesclando células – colspan. rowspan
<table> Lin 1 Col 1

<tr>
<td colspan="2"> Lin 2 Col 1 Lin 2,3 Col 2
Lin 1 Col 1
Lin 3 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>
10
04/03/2010

21
HTML
Exemplo Página 1 Página 2

22
<html>
HTML
<head>
<title>Orquídeas</title>
</head>
<body bgcolor="black" text="white" >
<table width="70%" border="3" bordercolor="black" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2">
<h2>Orquídeas</h2>
As orquídeas são largamente cultivadas no Brasil e no mundo e seu comércio movimenta grandes somas...
</td>
</tr>
<tr valign="middle">
<td >
<img src="imagem1.png" />
</td>
<td>
<h3>Phalaenopsis</h3> é uma planta muito popular por sua fácil adaptação 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

23
HTML
Table – carregando imagens nas células da tabela

24
HTML
Div Define uma divisão, uma seção ou um bloco em um documento html
div
<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

25
HTML
Div Define uma divisão, uma seção 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 margin:10px
border:3px solid red border:3px solid red
padding:10px padding:10px
Bloco 1 Bloco 2

26
HTML
Div 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

27
HTML
Div – Criando células em linha
<div style="width: 338px; float: left; margin: 5px;">

<img alt="" src="images/flores.gif“/>
</div>

28
HTML
Cores
As cores para os atributos podem ser informadas pelo nome oficial “reconhecido pelo browser” ou pelo
código hexadecimal RGB.
O código RGB
RGB é a sigla para Red, Green, Blue (Vermelho, Verde, Azul), que gera o padrão de cores pelo qual os
monitores obtém cores com brilho.
A codificação das cores está baseada na mistura cromática. Ou seja, certas quantidades dessas 3 cores são
misturadas para se obter uma determinada cor.
Aqua Black Blue Fuchsia

(#00FFFF) (#000000) (#0000FF) (#FF00FF)
Green Gray Lime Maroon
(#008000) (#808080) (#00FF00) (#800000)
Navy Olive Purple Red
(#000080) (#808000) (#800080) (#FF0000)
Silver Teal White Yellow
(#C0C0C0) (#008080) (#FFFFFF) (#FFFF00)
Exemplo:
<body bgcolor=“#C0C0C0“ > <body bgcolor=“silver“ >
14
04/03/2010

29
HTML
HTML - Eventos intrínsecos
Utilizados para programar ações no cliente. serão associadas a funções JavaScript.
Os eventos dependem do tipo de elemento associado.
Eventos Ação
onLoad executado quando a imagem ou a página é carregada
onUnLoad executado quando a página é 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 após a liberação de uma tecla pressionada
onMouseDown botão 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 botão do mouse é liberado sobre o elemento
onReset quando pressionado o botão Reset de um formulário
onSubmit quando pressionado o botão Submit

30
HTML
Exercício
#604A7B #CCC1DA
Construa o código HTML da página
conforme o modelo.
Margem=30px
Aldemir Martins
80px
wwwroot Pintor, gravador, desenhista, ilustrador.

15px
imagens 100%
Biografia
gato.gif Hoc vero, quod nimirum
Obras exigit legitimam kalendarii
restitutionem, iamdiu a
Romanis
Galo.gif
Pontificibus
Conteudo praedecessoribus nostris
et saepius tentatum est;
verum absolvi et
Obras.htm #DFD8E8
500px
Biografia.htm
index.htm
20% 75%
#B3A2C7
15

Web Aula HTML e Css 2s2010

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Web Aula HTML e Css 2s2010

Enviado por

Direitos autorais:

Formatos disponíveis

04/03/2010

Ferramentas básicas de desenvolvimento para web

Ferramentas básicas de desenvolvimento para web

HTML - Evolução Histórica

Ferramentas básicas de desenvolvimento para web

A linguagem é formada por um conjunto de marcadores denominados Tags (rótulos) e seus

Atributos: definem propriedades específicas (formatação, identificação ou ação) para o elemento

Ferramentas básicas de desenvolvimento para web

Atributos dos Elementos

<body bgcolor=“Blue” id=“BodyContent” >

Ferramentas básicas de desenvolvimento para web

Compreende um arquivo texto com extensão htm ou html criado a partir de um

Seções do documento HTML

<html > Head - Informações de cabeçalho - não

<title> Programação HTML</title>

<meta name=“author“ lang=“pt-br" content=“…" />

Ferramentas básicas de desenvolvimento para web

Formatação básica Tags

Ferramentas básicas de desenvolvimento para web

<p> Este é um parágrafo </p>

Ferramentas básicas de desenvolvimento para web

<img .../> Permite inserir imagens no documento html.

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

Ferramentas básicas de desenvolvimento para web

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

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

Embora a dimensão tenha sido redefinida, a imagem

se a imagem fosse outra: floresta155.jpg

página html exemplo

Ferramentas básicas de desenvolvimento para web 1

link entre páginas do site:

<a href=“pag2.htm”>link para a página 2</a>

<a href=“pag2.htm”><img id=“img1” src=“foto1.gif“ /> </a>

link para a página 2

Ferramentas básicas de desenvolvimento para web

wwwroot index.htm sobre.htm

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

sobre.htm index.htm sobre.htm

lista.htm <a href=“../index.htm”>sobre nos</a>

detalhe.htm listahtm sobre.htm

<a href=“../produtos/lista.htm”>lista de produtos</a>

Ferramentas básicas de desenvolvimento para web

Ferramentas básicas de desenvolvimento para web

Enviar E-mail usando um cliente de email:

Ferramentas básicas de desenvolvimento para web

Criar uma âncora para a seção 1

Ferramentas básicas de desenvolvimento para web

Aldemir Martins (Ingazeiras CE 1922 - São Paulo SP 2006). Pintor, gravador,

Ferramentas básicas de desenvolvimento para web

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

Ferramentas básicas de desenvolvimento para web

Ferramentas básicas de desenvolvimento para web

<table border=“2” bordercolor=“black”>

Ferramentas básicas de desenvolvimento para web

Ferramentas básicas de desenvolvimento para web

<table> Lin 1 Col 1

Ferramentas básicas de desenvolvimento para web

Ferramentas básicas de desenvolvimento para web

Ferramentas básicas de desenvolvimento para web

Ferramentas básicas de desenvolvimento para web

<div style=“width:300px; height:300px; border:3px solid red; padding:10px; margin:10px”>

Ferramentas básicas de desenvolvimento para web