HTML

Prof. Claudio Azevedo Passos

 Voc sabe que a Internet o meio fcil de se

comunicar com as pessoas, localizar informaes
sobre poltica, economia, notcias, educao, imagens,
enfim qualquer tema que precisar, at mesmo
assuntos quentes. Pela Internet tambm eu posso
fazer amigos, divulgar meu trabalhos, fazer
conferncias atravs de programas de redes sociais e
outros. Mais ainda, posso comprar, vender e divulgar
o meu negcio pela Internet, atravs de aplicativos
voltados para WEB, desenvolvidos em qualquer
plataforma para atender a ns amantes da NET

 Com toda essa tecnologia necessrio hoje,

no se limitar ao Uso da Internet, somente
em saber:
O que preciso para se conectar
Meios de Navegao
Correio Eletrnico
Rede Dial Up

 necessrio entender que estas informaes

se propagam atravs de pgina no formato
de hypertexto, ou seja HTML(HyperText
Markup Language), tornando a WEB cada
vez mais dinmica.

Histrico
A Internet deve incio em 1969 sob o nome de ARPANET (USA).
Composta de quatro computadores tinha coo finalidade,
demonstrar as potencialidades na construo de redes usando
computadores dispersos (espalhados) em uma grande rea. A
idia foi boa, e em 1972, 50 universidades e instituies militares
j possuam conexes.

Hoje uma arquitetura de software e hardware que se

comunicam entre si que so mantidas por organizaes comerciais
e governamentais. Mas uma das principais caractersticas da
Internet, que no possui dono, para organizar toda essa troca de
informaes, existem associaes e grupos que se dedicam para
suportar, ratificar padres e resolver questes operacionais,
visando promover os objetivos da Internet.

A WORD WIDE WEB

As pessoas costuma falar em Internet e Web,
ser a mesma coisa? Ser apenas uma gria
da moada do bate papo? Ou existe
realmente um conceito cientfico para isto?

A WORD WIDE WEB

A Word Wide Web (teia mundial) conhecida como
WWW, uma nova estrutura de navegao pelos diversos
itens de dados em vrios computadores diferentes. O
modelo WWW tratar todos os dados da Internet como
hipertexto, isto , vinculaes entre as diferentes partes
do documento para permitir que as informaes sejam
exploradas interativamente e no apenas de uma forma
linear.
Por isso existem os programas navegadores, que
aumentaram muito a popularidade da Internet e graas as
suas potencialidades, hoje podemos ver nas pginas da
Internet, documentos formatados (cores, efeitos e etc...),
escutar msica, assistir a vdeos, e muito mais.

A WORD WIDE WEB

Enfim a Web, a interface grfica da Internet, pois
podemos acessar a Internet, transferir arquivos
(UpLoad), e realizar outras operaes bsica sem
precisar de uma interface grfica.
Para concluir s estamos de fato usando a Web,
quando estamos navegando fazendo uso das Home
Pages para acessar um site, ou seja, um endereo
nico que contm a Home Page (pgina inicial) e
outras pginas que fazem parte deste conjunto de
pginas e todas em um nico cdigo fonte escrito em
uma linguagem chamada HTML.

CONECTANDO SE INTERNET
TIPOS DE CONEXES
Existem dois tipos de conexes para acesso a
Internet.
DEDICADA So as conexes diretas, utilizadas pelos
fornecedores de servios que vendem conexes de
todos os tipos para pessoas e organizaes. Estes
tipos de fornecedores chamamos de Provedores.
Estas linhas so de alta velocidade e tambm muito
caras.
DISCADA - o tipo de conexo usada por usurios
comuns. Nesse caso, voc disca para o provedor
atravs da Rede DialUp, pedindo acesso a Internet.

HTML
Toda vez que voc acessar um site (veja
tpico Word Wide Web) por meios de
domnios quando adiciona a URL na barra de
endereo, do seu Navegador (Browser), voc
ver pginas na WEB bem dinmicas,
organizadas, animadas e com ela trazendo
informaes, imagens, sons, vdeos e etc.

HIERARQUIA DE ELEMENTOS
Primeiramente, gostaria de lembrar, que
existem vrios editores de Home Pages, como
por exemplo: o Front Page Express, Netscape
Composer, Home Site, Dreamweaver etc. S
que na ausncia destes aplicativos e voc
desconhecendo a Linguagem de HyperTextos,
HTML, no poderia criar suas pginas. Da a
importncia de se conhecer esta linguagem.

Estrutura bsicas de uma pgina HTML

<html>

<head>
<title>COLOQUE AQUI O TTULO DA PGINA</title>
</head>
<body>
DAQUI EM DIANTE Voc DESENVOLVE SUA PGINA
</body>
</html>

 Com certeza voc observou que sempre usei

os tags, fazendo demarcao, ou seja, eles
sempre estaro ANTES DE ALGUMA COISA E
APS ALGUMA COISA.
Exemplo:
<title>Colgio Pedro II</title>

CONCEITO DOS TAGS USADOS NESTE

EXERCCIO
IMPORTANTE

TAG

O QUE FAZ

<html> Marca o incio e o fim do documento HTML.

Com ele voc inicia e finaliza a construo da
pgina Web.
<head> Marca o incio e do fim do cabealho, ou seja, a
rea onde sero descritos cabealhos e o ttulo
da pgina
<title> Marca o incio e o fim do ttulo do cabealho. O
ttulo da pgina aparecer na barra superior do
browser.
<body> Marca o incio e o fim do corpo da pgina

EXERCCIO 1 Vamos praticar?

1) Abra o Bloco de Notas
2) Digite o cdigo da listagem 1.2. Aps digit-lo salve na pasta
Meus Documentos ou em outra se preferir com o nome
exemplo1.html.
Listagem 1.2
<html>
<head>

<title>Minha Home Page</title>

</head>
<body>
Aqui neste espao desenvolverei minha Home Page!
Aguarde!!

</body>
</html>

Resposta
1) Abra o Menu Arquivo e escolha
Salvar
2) Na janela que aparecer como
mostrar figura ao lado, faa as
seguintes tarefas:
2.1) Na opo Salvar em selecione a
pasta onde deseja salvar, no caso
Meus Documentos
2.2) Na opo Nome do arquivo
coloque o nome do arquivo
exemplo1.html
2.3) Finalmente clique no boto
Salvar.

Exerccio 2
Em alguns momentos em sua pgina faz
necessrio comentar alguns trechos do cdigo
para facilitar na leitura e manuteno da pgina,
por isso adicionamos comentrios, ou seja,
palavras ou frases que no so exibidos no
Nevegador, apenas so visto como estamos
trabalhando no cdigo fonte.
Na listagem 1.3 faremos um novo exemplo e
incrementaremos novos tags. Digite a listagem
1.3 abaixo e salve com o nome exemplo2.html
na pasta Meus Documentos.

 ATENO: Salve sempre os seus exemplos na

pasta Meus Documentos, o processo para
salvar igual ao do Exemplo1, troque apenas
o nome do arquivo. Na dvida veja o
exemplo 1.

Listagem 1.3
<!Incio do Documento HTML>
<html>
<head>
<title>Melhorando Minha Home Page</title>
<meta name="author" content="NMBS Informtica">
<meta name="keywords" content="html, homepages">
</head>
<! Incio do Corpo da Pgina>
<body>
<h1>Este o ttulo Principal</h1>
<h2>Este o ttulo Secundrio</h2>
<h3> Estou adorando criar pginas</h3>
<hr>
<p>Este o 1 Primeiro Paragrfo <br> Esta 2 Linha do 1 Paragrfo
<p>Com este recurso inicio um paragrfo<br> E Com este recurso quebro uma linha
<hr>
<! Fim do Corpo da Pgina>
</body>
</html>
<! Fim do Documento HTML>

 Para ver o resultado deste exemplo abra o Internet Explorer,

e na barra de endereo digite C:\Meus
documentos\exemplo2.html. Veja a figura abaixo

CONCEITO DOS TAGS USADOS NESTE

EXERCCIO

IMPORTANTE

TAG
<!>
<meta>

O QUE FAZ
Insere comentrios nas pginas
Marcas Metas. Servem para voc especificar o autor,
palavras-chaves, descrio da pgina, etc..
Dentro do tag<meta>, tem os comandos name e o
content. No comando name voc especifica que
informao voc quer dar, e no content voc descreve a
informao

<hn>

Marca um ttulo. Sendo que n representa um valor que

pode ser de 1 a 6, o tamanho muda de forma decrescente,
ou seja, o nmero 1 o maior tamanho do ttulo.

<hr>
<p>

Insere uma linha horizontal

Marca um pargrafo e acrescenta uma linha em branco.

<br>

Insere uma quebra de linha

Exerccio 3 TAGS DE ALINHAMENTO

O Alinhamento padro que vem configurado nos
navegadores, a esquerda. Para entender isto, digite a
listagem 1.4, e salve como exemplo3.html, e acompanhe o
conceito de tag que marcam o alinhamento dos ttulos e
pargrafos nas pginas.

Listagem 1.4
<html>
<head>
<title>Tags para Alinhamentos</title>
</head>
<body>
<h4 align=center>Ttulo Centralizado</h4>
<h4 align=right>Ttulo Direita</h4>
<h4 align=left> Ttulo Esquerda<h4>
<hr>
<p align=center> Pargrafo ao Centro
<p align=right>Pargrafo a direita
<p align=left>Paragrfo a esquerda
<p align=justify>Este um texto justificado. Na linguagem HTML
temos vrios tipos de alinhamentos que voc poder aplicar em sua pgina
<br> <br>
<hr width=50% align=center>
<blockquote>Texto com mais margem</blockquote>
<blockquote><blockquote>Mais margem
ainda</blockquote></blockquote>
</body>
</html>

 Para ver o resultado deste exemplo abra o Internet Explorer,

e na barra de endereo digite C:\Meus
documentos\exemplo3.html. Veja a figura abaixo

CONCEITO DOS TAGS USADOS NESTE EXERCCIO

TAG
<center>

O QUE FAZ
Alinha o trecho (texto, imagem ou tabela ao centro>

align=center, Atribudos dentro do tag <p> que marca o incio de um

right, left ou pargrafo modificam o alinhamento do ttulo.
Center= alinha ao centro
justify
Right = alinha a direita
Left = alinha a esquerda
Justify = faz a justificao do pargrafo.
<blockquote> Adiciona uma margem de cerca de um centmetro
<hr>

Atributos
Size = define a altura da linha. Exemplo: <hr size=50>
Width = define a largura da linha horizontal.
Exemplo: <hr width=200>ou <hr width=50%>
Noshade = desenha a linha sem a sombra para dar o
efeito de trs dimenses. Exemplo: <hr noshade>

Exerccio 4 FORMATAO DE ESTILOS

Neste exemplo trabalharemos com a formatao
das letras bem como cor, tamanho de fonte, estilo,
e etc.
Para entender isto, digite a listagem 1.5, e salve
como exemplo4.html.

Listagem 1.5

<html>
<head>
<title>Formatando Estilos</title>
</head>
<body>
<center>Mudando o Estilo dos Caracteres</center>
<p>
<b>Texto em Negrito</b><br>
<i>Texto em Itlico</i><br>
<u>Texto sublinhado</u><br>
<tt>Texto Monoespaado</tt><br>
<br><font color=red>Texto em Vermelho</font>
<br><font size=5>Texto em Tamanho 5</font>
<br><font face=verdana>Texto com a letra Verdana</font>
<br><font face=arial black>Voc pode fazer combinaes</font>
<br><center>
<font color=blue face=verdana size=5><b>Editora rica</b></font></center>
<br>Voc poder os atributos para cada tipo de letra!
<br>
<font color=blue size=6>E</font><font color=red size=4>ditora rica</font>
<br>
<pre>
Estamos progredindo
no curso de HTML.
Este tag permite que todos os espaos feitos no cdigo fonte
sejam respeitados. Certo?
</pre>
</body>
</html>

 Para ver o resultado deste exemplo abra o Internet Explorer,

e na barra de endereo digite C:\Meus
documentos\exemplo4.html. Veja a figura abaixo.

CONCEITO DOS TAGS USADOS NESTE EXERCCIO

TAG
<b>
<i>
<u>
<tt>

<font>

O QUE FAZ
Coloca o texto em negrito
Coloca o texto em itlico
Coloca o texto sublinhado
Coloca o texto em fonte monoespaada. (fonte Courier,como
mquina de escrever)
Modifica a formatao do texto.
Atributos:
Size = define o tamanho da letra. Ex: <font size=5>Texto</font>
Face = define o estilo da letra. Ex: <font face=verdana>Texto</font>
Color = define a cor da letra. Ex:<font color=red>Texto</font>

Marca um trecho formatado com fonte monoespaada. A

formatao com espaos e entrada de pargrafos respeitada.
<basefont> Modifica a formatao padro do texto.
Ex: <basefont size=5>
<pre>

TABELA DE CORES

Exerccio 5 LISTAS NUMERADAS E MARCADAS

Assim como em uma carta ou qualquer outro documento comum, precisamos listar tpicos
atravs de smbolos ou nmeros. Para entender isto, digite a listagem 1.6, e salve como
exemplo5.html.
Listagem 1.6
<html>
<head>
<title>Listas</title>
</head>
<body>
<h3>Isto uma lista</h3>
<! Incio dos Numeradores>
<ol>
<li>Item 1
<li>Item 2
</ol>
<! Fim dos Numeradores>
<hr width=50% size=5 align=left>
<! Incio dos Marcadores>
<ul>
<li>Item 1
<li>Item 2
</ul>
<! Fim dos Marcadores>
</body>
</html>

Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de

endereo digite C:\Meus documentos\exemplo5.html. Veja a figura abaixo.

CONCEITO DOS TAGS USADOS NESTE EXERCCIO

TAG
<ol>

O QUE FAZ
Marca o incio e o fim de uma lista ordenada. Recebem na primeira
linha um nmero ou letra. Devem ser usados com tag <LI>
Atributos
Start = especifica o nmero a partir do qual os itens comeam a ser
contados. Ex: <ol start=3>
Type = modifica o tipo do numerador que pode ser: nmero, letras
ou algarismo romano.
Ex: <ol type=A> <ol type=I>

<ul>

Marca o incio e o fim de uma lista no ordenada, ou seja, os itens

da lista recebem smbolos na primeira linha. Devem ser usados com
tag <LI>
Atributos
Type = modifica o tipo do marcador (smbolo), que pode ser:
Circle = um crculo vazio.
Ex: <ul type=circle>
Disc = um crculo cheio.
Ex: <ul type=disc>
Square = um quadrado cheio
Ex: <ul type=square>

Exerccio

<html>
<head><title>Listas</title>
</head>
<body>
<h3>Isto uma listagem iniciando no nmero 4</h3>
<ol start=4>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
<h3>Isto uma listagem com letras</h3>
<ol type=A>
<li>Editora
<li>rica
<li>Livros
</ol>
<h3>Isto uma listagem em algarismo romano</h3>
<ol type=I>
<li>Editora
<li>rica
<li>Livros
</ol>
<h3>Esta uma listagem em algarismo romano a partir do nmero 3</h3>
<ol type=I start=3>
<li>Editora
<li>rica
<li>Livros
</ol>
</body>
</html>

Subnveis - Listagem 1.8

<html>
<head><title>Listas</title>
</head>
<body>
<h3>Listagem e SubListagem</h3>
<ol><! Incio do Numerador>
<li>Item 1
<ul><! Incio do Marcador dentro do Numerador>
<li type=disc>Item 1.1
<li type=disc>Item 1.2
<li type=disc>Item 1.3
</ul><! Fim do Marcador dentro do Numerador>
<li> Item 2
<ul><! Incio do Marcador dentro do Numerador>
<li type=square>Item 2.1
<ul><!Incio do Marcador dentro do Marcador>
<li type=circle>Item 2.1.1
<li type=circle>Item 2.1.2
<li type=circle>Item 2.1.3
</ul><!Fim do Marcador dentro do Marcador>
<li type=circle>Item 2.2
<li type=disc>Item 2.3
</ul><! Fim do Marcador dentro do Numerador>
<li> Item 3
</ol><! Fim do Numerador>
</body>
</html>

Resposta exemplo anterior

Exerccio 6 DEFININDO O CORPO DA PGINA

Voc teve ter observado em algumas sites, que as cores de fundo
da pgina so bem diversificados, ou em outros casos, uma
imagem adicionado no fundo da pgina, como uma marca
dgua. Ento, todas estas definies so feitas dentro do tag
<BODY>.
Listagem 1.9
<html>
<head><title>Pgina com Fundo Colorido</title>
</head>
<body bgcolor=beige text=blue>
<h3>Definfo cor de fundo para a pgina</h3>
</body>
</html>

Observao: Voc poder adicionar a cor que desejar, tanto para o

fundo quanto para o texto. Os dois s no podem ser da mesma
cor. Para escolher a cor, consulte na Tabela de Cores (pag. 31)

Imagem de Fundo

Observe as seguintes recomendaes:

As imagens suportadas so do tipo GIF e JPG. Na dvida sobre imagens
aconselho, consultar um livro de PhotoShop .
As imagens devem estar na mesma pasta, onde estar o documento
HTML, ou numa subpasta.
Exemplo: Imagine que voc tem uma pasta chamada projeto e nessa
pasta voc armazena todos os documentos HTML referente a pgina que
por hora desenvolve. Certo at a? Ento, basta que os arquivos de
imagens, tambm fiquem na mesma pasta projeto, assim no ter
problema na hora de visualizar no Browser.
Outro exemplo que posso citar o seguinte. Imagine agora outra
situao:
Voc agora resolveu organizar ainda mais o desenvolvimento de sua pgina.
Criou uma pasta projeto e dentro armazenou todos os arquivos HTML. Certo?
Depois resolveu criar uma subpasta dentro da pasta projeto chamada imagens e nela
voc colocou todas as imagens. Mas no esquea de na hora de especificar a imagem
que deseja inserir no fundo dentro do tag <BODY>, o caminho, ou seja, o nome da
subpasta.

 Listagem 1.10
<html>
<head><title>Inserindo Imagem no Fundo da Pgina</title>
</head>
<body background=parede.gif bgproperties=fixed>
<h1 align=center>Editora rica</h1>
<font size=4 face=verdana>
<ul>
<li>Livros
<li>Dicas
<li>Volte Sempre
</ul>
</font>
</body>
</html

Observao: Caso a imagem estivesse em uma subpasta bastaria apontar o

caminho para ela no tag. Veja o exemplo:
Exemplo: <body background=/imagens/parede.gif bgproperties=fixed>

CONCEITO DOS TAGS USADOS NESTE

EXERCCIO
TAG
O QUE FAZ
<body> Marca o incio e o fim do corpo da pgina
Atributos
Bgcolor = define a cor do fundo da pgina
Text = define a cor do texto padro da pgina
Background = permite inserir uma imagem como
fundo da pgina
Bgproperties = fixa a imagem no fundo da pgina
quando a pgina rolada, criando um efeito de
marca dgua.

Exerccio 7 IMAGENS
Neste exemplo exercitaremos os tags que permitem a
insero de imagens em sua home page.
Antes de iniciar o estudo sobre imagens, quero lembrar-lhe
que uma imagem s poder ser exibida no browser, se ela
estiver na mesma pasta, ou ento, voc dever apontar o
caminho onde est, conforme o exemplo de nmero 6.

 Listagem 1.11
<html>
<head><title>Imagens</title>
</head>
<body>
<h1>Agora estamos trabalhando com imagens</h1>
<h3> Esta sua primeira imagem. Sorria?</h3>
<img src=fig.jpg align=left>Veja se consegue enxergar, as
seguintes imagens?<br>
O rosto de um velho<br>
Uma moa<br>
Um cachorro<br>
Um outro velho<br>
Um pssaro<br>
E algo mais<br>
</body>
</html>

Resultado Listagem 1.11

Alinhamento de Imagens

Listagem 1.12
<html>
<head><title>Imagens</title>
</head>
<body>
Note neste exemplo que a imagem <img src=fig2.jpg> est entre o texto<br>
<img src=fig2.jpg align=top>Imagem est esquerda e o texto no topo<br>
<img src=fig2.jpg align=middle>Imagem est esquerda e o texto no centro<br>
<img src=fig2.jpg align=left>Neste exemplo a imagem ficou alinhada esquerda,
permitindo que o texto ficasse todo direita ao redor da imagem. Utilize este
recurso toda vez que desejar que o texto fique ao lado da imagem <br>
</body>
</html>

Resultado Listagem 1.12

CONCEITO DOS TAGS USADOS NESTE

EXERCCIO
TAG
O QUE FAZ
<img> Insere uma imagem
Atributos
src indica o nome da imagem a ser carregado.
align=middle centraliza o base do texto com o centro da imagem
align=left faz a imagem flutuar a esquerda enquanto o texto
circunda imagem direita.
align=top alinha o texto no topo
align=right faz a imagem flutuar a direita enquanto o texto
circunda imagem esquerda.
alt=n indica o texto para ser exibido quando o navegador no
exibe a imagem. Sendo que n o ttulo que identifique a
imagem.
Exemplo: <img src=fig.jp alt=Esta uma imagem legal>

Tabelas
Utilizaremos a tabela como recurso para a
definio dos layouts de nossas pginas.

 Listagem 1.13
<html>
<head><title>Montando Tabelas</title>
</head>
<body>
<table border=2> <! Aqui comea a Tabela>
<tr><! Aqui Comea uma linha>
<td>Clula1</td>
<td>Clula2</td>
<td>Clula3</td>
</tr><! Aqui termina uma linha>
<tr><! Aqui Comea outra linha>
<td>Frase 1</td>
<td>Frase 2</td>
<td>Frase 3</td>
</tr><! Fim da outra linha>
</table><! Fim da Tabela>
</body>
</html>

Tabelas
Resultado da listagem 1.13

Controlando as dimenses de sua tabela.

Listagem 1.14
<html>
<head><title>Montando Tabelas</title>
</head>
<body>
<table border=1 width=400 height=50 cellpadding=5 cellspacing=5>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
<tr>
<td>Item 4</td>
<td>Item 5</td>
<td>Item 6</td>
</tr>
</table>
</body>
</html>

Tabelas
Resultado da listagem 1.14

Tabelas - Alinhamentos
Listagem 1.15

Os elementos dentro
da tabela tambm
podem ser alinhados
da mesma forma
que um pargrafo

<html>
<head><title>Montando Tabelas</title>
</head>
<body>
<table border=1 width=400 height=120 cellpadding=5 cellspacing=5>
<tr>
<td align=center>No Centro</td>
<td align=right>Para Direita</td>
<td align=left>Para a Esquerda</td>
</tr>
<tr>
<td valign=bottom>Em baixo</td>
<td valign=top>No Topo</td>
<td valign=middle>Centro na Vertical</td>
</tr>
</table>
</body>
</html>

Tabelas
Resultado da listagem 1.15

Tabela - Cores
Cor de Fundo
Voc pode ainda adicionar cores no fundo da tabela ou apenas de
uma clula que deseja. Lembra do atributo bgcolor, ento com este
mesmo que voc pode adicionar um cor padro para tabela ou para a
clula. Veja o exemplo:

<table bgcolor=blue>
O resultado seria assim: Toda Tabela teria um preenchimento azul

Tabela - Cores
Veja mais este exemplo:
<table>
<tr>
<td bgcolor=beige>Bege</td>
<td bgcolor=red> Vermelho<td>
O resultado seria assim: As clulas teriam cores diferentes

Tabelas
CONCEITO DOS TAGS USADOS NESTE EXERCCIO
TAG
<table>

<tr>
<td>
border=n

O QUE FAZ
Marca o incio e o fim de uma tabela
Atributos
Width define a largura da tabela ou da clula
Height define a altura da tabela ou da clula
Cellpadding define a margem dentro das clulas
Cellspacing define o espao entre as clulas
Bgcolor define a cor de fundo da tabela ou da clula
Marca o incio e o fim de uma linha
Marca o incio e o fim de uma clula
Coloca uma borda na tabela, onde n o valor em pixels da borda

align=left
align=right
align=center

Alinha o contedo da clula a esquerda na horizontal

Alinha o contedo da clula a direita na horizontal
Alinha o contedo da clula ao centro na horizontal

valign=top
Alinha o contedo da clula no topo (vertical)
valign=bottom Alinha o contedo da clula na base da clula (vertical)
valign=middle Alinha o contedo da clula no centro na vertical

Links
Estamos produzindo pginas de hipertextos, ou
seja, textos que podem fazer ligaes com outros
textos, ligando pginas entre si e a WEB. Ento, este
pontos ns chamamos de links ou hyperlinks,
ncoras de hipertexto, todos com a mesma funo,
de atravs de um nico clique sobre a frase ou
imagem conduzir a algum lugar no site ou na WEB.

Links
Tag responsvel o <A>, onde dentro deste,
atravs de um atributo coloco a referncia, ou
seja, A URL (Uniform Resource Locator).

Para criar um link usamos a seguinte sintaxe:

SINTAXE: <A HREF=URL>Frase que aparece na pgina</a>

Onde:
<a> tag que marca o incio e o fim do link
href= atributo que especifica o nome da referncia URL o
nome do local para onde desejar ligar (ir)

 Listagem 1.16
<html>
<head><title>Estudando Links</title>
</head>
<body>
<h2>Exemplo de Links Internos</h2>
<h3>Seo de Exemplos</h3>
<a href=exemplo1.html>Exemplo1</a>
<a href=exemplo2.html>Exemplo2</a>
<hr>
<h2>Exemplo de Links Externos</h2>
<a href=http://www.erica.com.br>Conhea a Editora
rica</a><br>
<a href=http://www.apple.com>Apple Computer</a>
<h3>Voc pode usar imagens para usar nos links</h3>
<a href=exemplo10.html><img src=bola.gif>
</a>Imagens
</body>
</html>

Links
Resultado da listagem 1.16

<!DOCTYPE html>
<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a id="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
...
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>

Listagem 1.17
Link para a
mesma Pgina

HTML Layouts - Usando <div>

A tag <div> serve para alterar o estilo em partes especficas da
pgina e posicionar objetos.

Listagem 1.18 : O Uso da tag <div>

<html>
<head>
<title>Divs</title>
</head>
<body>
<div style="background-color:#00BFFF;text-align:center">
<p>Primeira Div</p>
</div>
<div style="border:3px dotted #9F0">
<p>Segunda Div</p>
</div>
</body>
</html>

HTML Layouts - Usando <div>

Listagem 1.19
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Ttulo da Web Page</h1></div>
<div id="menu" style="backgroundcolor:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="conteudo" style="backgroundcolor:#EEEEEE;height:200px;width:400px;float:left;">
Escreva o contedo aqui</div>
<div id="rodape" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright W3Schools.com</div>
</div>
</body>
</html>

HTML Layouts - Usando <div>

Resultado da listagem 1.19

Formulrios
Para criar uma interface entre o formulrio e o
usurio, usaremos a tag <FORM>
Nesta interatividade, teremos vrias opes para
entradas de textos (informaes):
campos de entrada de texto
menus de mltipla escolha ou escolha nica

botes sim-ou-no
botes para submisso ou limpeza de formulrio

Formulrios
TAGs Definindo um Formulrio

Seguindo as regras do HTML, necessrio informar

quando iniciado um formulrio e quando queremos
encerrar a marcao do formulrio.

<FORM> utilizado para iniciar a marcao.

</FORM> utilizado para encerrar a marcao.

Formulrios
Atributos da tag <FORM>

O formulrio precisa saber como enviar a informao

para o servidor. utilizado a varivel METHOD.
METHOD
Indica o modo que os dados sero fornecidos ao
servidor. Existem dois modos para acessar seus
FORMs (GET e POST). Dependendo qual modo voc
usar, voc ir receber os resultados codificados de
formas diferentes. O mtodo mais utilizado o POST.

Formulrios
Atributos da tag <FORM>

O formulrio precisa saber para onde enviar a

informao.
Para isso, utiliza-se a marcao ACTION. Geralmente
esta ao aponta para um script que ir receber e
decodificar os resultados.
Deve-se informar o endereo do script, que deve estar
em um servidor particular ou gratuito, caso seja um
programa em PHP, por exemplo, ou uma funo
javascript que possa estar no prprio arquivo ou em
algum diretrio local.

Listagem 1.17 (a)

<html>
<head>
<title>Ttulo</title>

</head>
<body>
<form method="POST" action="www.site.com.br/script">

<!Contedo do formulrio>
</form>
</body>

</html>

Listagem 1.17 (b)

<html>
<head>

<title>Ttulo</title>
</head>
<body>

<form method="POST action=aula.php">

<!Contedo do formulrio>
</form>

</body>
</html>

Formatos dos Campos de Entrada (informaes)

Tag <input>
Muitos elementos de um formulrio html so definidos
pela tag <input>.
Cada tipo de elemento possui parmetros prprios,
mas quase todos possuem pelo menos dois
parmetros em comum: type, que define o tipo de
elemento, e name, que define o nome daquele
elemento.

<input type="XXX" name=YYY">

Parmetro TYPE

TYPE = "CHECKBOX", "PASSWORD", "RADIO",

"TEXT", BUTTON, "SUBMIT ou "RESET" esse
atributo recebe, como parmetro, a especificao do
tipo de contedo que a varivel poder guardar.

Outros parmetros (opcionais):

VALUE=XXX Utilizando a marcao VALUE voc
especifica que texto aparecer no campo quando o
formulrio for exibido.

SIZE=XXX"

Esta marcao altera o tamanho deste campo exibido

na tela.
Obs.: o usurio sempre poder digitar mais caracteres
do que o tamanho do campo na tela, pois o texto ir se
deslocar a esquerda dentro do campo.
MAXLENGTH=XX

Se voc deseja limitar o nmero de caracteres que o

usurio pode digitar, basta usar esta marcao. O
formulrio ir emitir um bip de erro se o usurio tentar
digitar alm do permitido em MAXLENGTH.

Textos em Linha Simples (TEXT)

<form method="POST action=aula.php">

Qual seu nome?
<input type=text" name=nome size=20>
</form>

Textos protegidos senhas (PASSWORD)

<form method="POST action=aula.php">

Digite sua senha:
<input type=password" name=senha value=abcd
size=8 maxlength="8">
</form>

Textos com Multiplas Escolhas (CHECKBOX)

<form method="POST action=aula.php">
Voc concorda com a Pena de Morte?<br>
<input type="checkbox" name=concorda"
value=concorda">concordo<br>
<input type="checkbox" name=discorda"
value=nao_concorda">no concordo

</form>

*checked

Textos com Escolha nica (RADIO)

<form method="POST action=aula.php">
Qual seu sexo?<br>
<input type=radio" name=sexo"
value=masc">Masculino<br>
<input type=radio" name=sexo"
value=fem">Feminino

</form>

*checked

Boto de ao Enviar (SUBMIT) e Redefinir (RESET)

<form method="POST action=aula.php">

Contedo do formulrio
<input type="submit" value=Enviar" name="enviar">
<input type="reset" value=Apagar" name=apagar">
</form>

Entrada de texto com vrias linhas (TEXTAREA)

Deixe sua opinio:<br>

<textarea rows="4" name="opiniao cols="20"></textarea>

Entrada de menu com opes (SELECT)

Qual sua formao:<br>

<select size="1" name="formacao">
<option>enfermeiro</option>
<option>farmacutico</option>
<option>mdico</option>

</select>

*<option selected>