HyperText Markup Language

HTML
BSICO
Prof.: Svio
Prof.: Svio
HTML Bsico
Pgina 1
Contedo
O que HTML? ......................................................................................................................... 3
Primeira Pgina em HTML ......................................................................................................... 3
Iniciando um documento .......................................................................................................... 4
Trabalhando com textos ........................................................................................................... 8
Caracteres especiais................................................................................................................ 14
Imagens .................................................................................................................................. 15
LINKS ...................................................................................................................................... 17
Listas ...................................................................................................................................... 20
Tabelas ................................................................................................................................... 23
Formulrios ............................................................................................................................ 33
Iframes ................................................................................................................................... 40
Frames .................................................................................................................................... 40
FRAME .................................................................................................................................... 43
Tabelas de Cores ..................................................................................................................... 47
Bibliografia ............................................................................................................................. 50
Prof.: Svio
HTML Bsico
Pgina 2
O que HTML?
HTML (HyperText Markup Language - Linguagem de Marcao de Hipertexto)
a uma linguagem considerada a base de todas as outras linguagens de
desenvolvimento de projetos para WEB. Com ela voc pode compartilhar fotos,
vdeos, msicas, textos e fazer muitas coisas.
A linguagem HTML foi criada com a viso de que todos os dispositivos
deveriam ser capazes de usar informaes da Web: PCs com placas de vdeos
e monitores de diferentes resolues e profundidades de cores; telefones
celulares; dispositivos para processar entrada e sada de voz; computadores
com taxa de transferncia alta ou baixa e assim por diante.
Foi a primeira linguagem no setor e usada amplamente at os dias atuais. Foi

criada pelo Tim Berners-Lee quando ele trabalhava como pesquisador para o
CERN (Laboratrio Europeu de Fsica de Partculas, na Sua). Foi
popularizado pelo aparecimento do browser Mosaic, criado por Marc
Andreessen quando ele estudava na Universidade de Illinois.
Primeira Pgina em HTML

Uma pgina bsica em HTML um arquivo de texto simples contendo o texto
da pgina e os comandos HTML que definem a formatao das mesmas. Os
comandos so indicados entre os marcadores chamados TAG que vem entre
os smbolos de < e >. A maioria dos comandos usada em pares, sendo que
quando voc abre alguma TAG como, por exemplo, a TAG <BODY>voc
precisar fechar repetindo a TAG assim: </BODY>. A TAG com barra (/)
significa que est fechando a que esta sem barra.
Exemplos:
TAG nico:
<BR>
TAG duplo:
Prof.: Svio
HTML Bsico
Pgina 3
<BODY> </BODY>
<HTML> </HTML>
<P> </P>
<div></div>
<table></table>
<form></form>
<font></font>
<center></center>
Existem muitos programas que j montam o cdigo fonte da sua pgina
automaticamente. Mas desta forma voc no ir conseguir fazer uma pgina
legal.
Para fazer uma pgina legal voc vai ter que aprender HTML. E para aprender
voc ter que praticar. Ou seja, as suas primeiras pginas devero ser feitas
no Bloco de Notas e depois que voc j estiver crack em escrever as TAG do
HTML poder sim usar um editor HTML.
Iniciando um documento
Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>.
Uma pgina HTML possui trs partes bsicas: estrutura principal, um
cabealho e um corpo de pgina.
Possui uma estrutura dividida em 4 TAGs bsicas:

<HTML> ... </HTML>
Estrutura Principal
<HEAD> ... </HEAD>

<TITLE> ... </TITLE>
CABEALHO
<BODY> ... </BODY>

Corpo
Prof.: Svio
HTML Bsico
Pgina 4
<HTML> </HTML>
So usados para delimitar os comandos HTML, indicam o incio e o fim de um
documento.
<HEAD> ... </HEAD>
Indica que voc abriu um cabealho.
Usado para indicar parmetros de configurao do documento, tambm
utilizado para exibir o ttulo na barra de ttulos do browser.
<TITLE> ... </TITLE>
Indica o ttulo do documento para o browser. Esta TAG deve estar sempre
dentro das TAGs <HEAD> </HEAD>.
Veja exemplo:
Alm disso, quando o usurio escolhe uma pgina para colocar em sua lista de
Favoritos do browser, o ttulo da pgina que aparecer na lista. Caso a
pgina no tenha o marcador <TITLE> ou ele no conter nada, o browser
assumir o nome do arquivo.
<BODY> ... </BODY>
Envolvem a seo de corpo do documento. Aqui fica o contedo principal da
Home Page.
Opcionalmente podemos indicar uma cor para o fundo da pgina, usando a

opo BGCOLOR, ou um arquivo de imagem para formar o fundo, usando a
opo BACKGROUND.
Iniciaremos a nossa primeira pgina editando o cdigo no Bloco de Notas.
Prof.: Svio
HTML Bsico
Pgina 5
Siga os passos abaixo:

1. Crie uma pasta chamada CursoHtml.
2. Crie um arquivo de documento de texto no bloco de notas
3. Nomeie o arquivo como index.html
4. Abra o arquivo no Browser, voc ir notar que a pgina est em branco,
pois ainda no escrevemos nenhum cdigo.
5. Abra o arquivo no bloco de notas.
6. Digite o exemplo abaixo, salve e feche.
7. Depois abra novamente o arquivo HTML no Browser.
Exemplo com cor de fundo na pgina:

<html>
<head>
<title>Curso de HTML</title>
</head>
<body bgcolor="green" >
Corpo da pgina HTML com cor de fundo.
</body>
</html>
Prof.: Svio
HTML Bsico
Pgina 6
BGCOLOR
<BODY BGCOLOR="cor">
Determina a cor do Fundo da pgina. O valor a ser entrado pode ser uma
constante (nome em ingls da cor) ou um nmero hexadecimal (#xxxxxx)
correspondente aos valores RGB da cor.
Agora substitua o cdigo acima pelo exemplo abaixo seguindo os passos 5,6 e
7.
Exemplo com imagem de fundo na pgina:

<html>
<head>
</head>
<body background="fundo.gif" >
Corpo da pgina HTML com imagem de fundo.
</body>
</html>
Prof.: Svio
HTML Bsico
Pgina 7
BACKGROUND
<BODY BACKGROUND="URL DA IMAGEM">
Determina a imagem utilizada para preencher o fundo da tela. importante
observar se o endereo da imagem est correto. A imagem escolhida como
fundo da pgina ocupar toda a regio da tela, ou seja, mesmo sendo uma
imagem pequena, esta ser repetida por toda a pgina, cobrindo toda a
extenso.
Trabalhando com textos

No corpo do documento onde estar localizado o ttulo e subttulos, texto,
imagens, ligaes com outras pginas, etc. Nesta seo veremos como
trabalhar com os textos.
Ttulos e Subttulos
Para demarcar ttulos e subttulos, use os TAGs de HEADER (H1 a H6),
juntamente com a opo CENTER.
Veja alguns exemplos:
Texto inserido entre <H1> e </H1>:
Texto inserido entre <H3><CENTER> e </CENTER></H3>:
Observaes: A TAG CENTER tm a funo de deixar o cabealho ou texto

centralizado.
Exemplo:
Crie um novo arquivo chamado ExemploTitulo.html e insira o cdigo abaixo.
<html>
<head>
Prof.: Svio
HTML Bsico
Pgina 8
</head>
<body>
<H1>Ttulo com H1: Exemplo HTML</H1>
<H2>Ttulo com H2: Exemplo HTML </H2>
<H6><CENTER>Ttulo com H6 centralizado: Exemplo HTML
</CENTER></H6>
</body>
</html>
Estilos de texto Alm da TAG <CENTER>...</CENTER> existem as seguintes

TAGs que podem ser utilizadas para a formatao de um texto.
<B>...</B> ou <STRONG></STRONG>
Aplica o estilo negrito.
<I>...</I>
Aplica o estilo itlico.
<U>...</U>
Aplica o estilo sublinhado (nem todos os browser o reconhecem).
<SUP>...</SUP>
Faz com que o texto fique sobrescrito.
<SUB>...</SUB>
Faz com que o texto fique subscrito.
Prof.: Svio
HTML Bsico
Pgina 9
<PRE>...</PRE>
Utiliza a pr-formatao, ou seja, deixa o texto da maneira em que foi digitado.
<P>
A TAG responsvel pela quebra de pargrafos a <P> que finaliza o pargrafo
e insere automaticamente uma linha em branco entre pargrafos.
Sintaxe do comando:
<p align=posio> Texto do pargrafo. </p>
Posio pode ser:
Left: alinhamento esquerda;
Center: centralizado ;
Right: alinhamento direita;
Justify: justificado;
<BR>
Marcador utilizado para separar uma linha da outra sem um espao em branco
entre as duas. importante observar que o marcador <BR> deve vir no final da
linha que se quer separar.
Exemplo:
Crie um novo arquivo com o nome EstiloTexto e insira o cdigo abaixo:
<html>
<head>
</head>
<body>
<B>Estilo negrito.</B>
<br>
<I>Estilo itlico.</I>
<br>
<U>estilo sublinhado (nem todos os browser o reconhecem)</U>
<br>
<SUP>Texto sobrescrito.</SUP>
<br>
<SUB>Texto subscrito.</SUB>
<br>
<PRE>Este um pequeno texto com estilo pr-formatado.</PRE>
<p align="center"> Este um exemplo do primeiro pargrafo centralizado.</p>
<p> Este um exemplo do segundo pargrafo.</p>
Prof.: Svio
HTML Bsico
Pgina 10
</body>
</html>
Fontes
Para inserir em sua pgina um texto com fontes de tamanhos, cores e tipos
diferentes utilizamos a TAG <FONT> ... </FONT>.
Sintaxe do comando:
<FONT size=n face=nome color=cor>
TEXTO
</FONT>
Onde:
SIZE=n : n varia de 1 a 7 e 3 o valor padro da maioria dos

navegadores;
FACE=nome : nome da fonte a ser utilizada (Arial, Tahoma, etc);
COLOR=cor : cor da fonte definida em hexadecimal, ou atravs de um

nome pr-definido de cores.
Exemplo:
Crie um arquivo chamado Fontes.html e insira o cdigo abaixo:
Prof.: Svio
HTML Bsico
Pgina 11
<html>
<head><title>Curso de HTML</title></head>
<body>
<FONT size="1" face="Tahoma" color="red">
Texto com cor vermelha
</FONT>
<br><br>
<FONT size="2" face="Arial" color="green">
Texto com cor verde
</FONT>
<br><br>
<FONT size="3" face="Tahoma" color="blue">
Texto com cor azul
</FONT>
<br><br>
<FONT size="4" face="Tahoma" color="orange">
Texto com cor laranja
</FONT>
<br><br>
<FONT size="5" face="Tahoma" color="pink">
Texto com cor pink
</FONT>
<br><br>
<FONT size="6" face="Tahoma" color="#4F2F4F">
Texto com cor violeta
</FONT>
<br><br>
<FONT size="7" face="Tahoma" color="#FF00FF">
Texto com cor magenta
</FONT>
<br><br>
</body>
</html>
Prof.: Svio
HTML Bsico
Pgina 12
<HR> Linhas Horizontais

Desenha uma linha horizontal no documento.
No precisa ser finalizada com </HR>.
Sintaxe:
<HR width=n% align=posio size=n color=#cor noshade>
Atributos:
SIZE: Define a espessura, em pixels, da linha.
WIDTH: Define a largura da linha, o que pode ser feito em pixels

(nmero absoluto) ou em percentual da tela (com o smbolo de %)
ALIGN: Alinhamento, como o que tem sido usado, pode ser LEFT,
RIGHT
CENTER,
ou
seja,
esquerda,
direita
ao
centro,
respectivamente.
Prof.: Svio
HTML Bsico
Pgina 13
NOSHADE: Linha sem sombra. O padro a linha sombreada,

utilizando esse atributo temos uma linha sem sombra.
Exemplo:
Crie um arquivo chamado LinhaHorizontal.html e insira o cdigo abaixo:
<html>
<body>
Primeiro exemplo com a linha horizontal
<HR width="100%" align="left" size="2" color="silver" >
<br>
<center>Segundo exemplo com a linha horizontal</center>
<HR width="70%" align="center" size="3" color="blue" >
<br>
Terceiro exemplo com a linha horizontal
<HR width="30%" align="center" size="5" color="red" noshade>
<br>
</body>
</html>
Caracteres especiais
As formas de representar caracteres especiais, atravs de uma notao
especifica, so chamadas de ENTIDADES. Existem "ENTIDADES DE
CARACTERES" e "ENTIDADES NUMRICAS".
Um carter bastante til o espao no ignorvel, o "&nbsp". Este caractere
importante quando desejamos forar o browser a no ignorar espaos em
brancos entre palavras.
Prof.: Svio
HTML Bsico
Pgina 14
Veja a tabela mostrando vrios smbolos:
>
Á
â
Å
ã
Æ
&eacute
È
ë
Í
î
Ï
ó
Ò
ø
Ö
ú
Ù
ü
Ñ
>
®
ý
ß
¹

«
·
¾
÷
&
á
À
å
Ä
æ
Ê
è
Ð
&iacute
Ì
ï
Ô
ò
Õ
ö
Û
ù
Ç
ñ
&
©
Þ
º
²

¢
±
¼
¿
¡
<
"
&Acirc
à
Ã
ä
É
ê
Ë
ð
Î
ì
Ó
&ocirc
Ø
õ
Ú
û
Ü
ç
<
"
Ý
þ
&170;
³

£
»
½
×
¤
Imagens
Para inserir uma imagem em uma pgina web utilizamos o comando, tag, <img
src= > e seus atributos. Os formatos mais usados so o GIF e o JPG, ambos
com compactao de pixels.
Sintaxe:
<IMG SRC="endereo da imagem WIDTH=n% HEIGHT=n%
ALIGN=posio ALT=texto>
Prof.: Svio
HTML Bsico
Pgina 15
Atributos:
WIDTH: Define a largura da imagem, o que pode ser feito em pixels

(nmero absoluto) ou em percentual da tela (com o smbolo de %).
HEIGHT: Define a altura da linha, o que pode ser feito em pixels

(nmero absoluto) ou em percentual da tela (com o smbolo de %).
ALIGN: Alinhamento da imagem pode ser, LEFT, RIGHT e CENTER, ou

seja, esquerda, direita e ao centro, respectivamente.
ALT: texto que ir aparecer ao passar o mouse sobre a imagem ou texto

que surgir caso a imagem no possa ser visualizada.
BORDER: Especificao da largura da borda da imagem. Valor em

pixel.
VSPACE: Para especificar o espao que deve ser deixado acima e

abaixo da imagem. Valor em pixel.
HSPACE: Especifica o espao que deve ser deixado nas laterais da

imagem. Valor em pixel.
O nico obrigatrio o src.

Exemplo.:
Crie um arquivo chamado Imagem.html e insira o cdigo abaixo:
<html>
<body>
<IMG SRC="carro.gif" ALIGN="left" ALT="Imagem de carro">
<font size="3" face="arial" color="blue">Esta a nossa primeira imagem
inserida.</font>
<br><br>
<font size="4" face="Courier New" color="orange">Abaixo segue mais imagens
na pgina.</font>
<br><br>
<IMG SRC="calendario.gif" ALIGN="left" ALT="Calendrio">
<font size="3" face="arial" color="black">Calendrio.</font>
<br><br>
Prof.: Svio
HTML Bsico
Pgina 16
<IMG SRC="buscar.gif" ALIGN="left" ALT="Buscar">

<font size="3" face="arial" color="black">Buscar.</font>
<br><br>
<IMG SRC="salvar.gif" ALIGN="left" ALT="Salvar">
<font size="3" face="arial" color="black">Salvar.</font>
<br><br>
</body>
</html>
LINKS
O principal poder do HTML vem da capacidade de interligar partes de um texto,
imagens a outros documentos.
A interligao entre documentos no se restringe somente s ligaes com
outras pginas. Em pginas muito longas onde um assunto tem vrios tpicos,
podemos utilizar ndices onde os links tm a funo de interligar os tpicos de
Prof.: Svio
HTML Bsico
Pgina 17
um texto e que com apenas um clique em um dos tpicos do ndice, o item

exibido.
Links para o mesmo diretrio
Voc s precisa especificar o nome do arquivo que ser chamado e a sua

extenso.
Sintaxe:
<A HREF = nomeDoArquivo.extenso>
Texto ou imagem
</A>
Onde:
A: abertura da TAG de link;
HREF=nomeDoArquivo.extenso: deve ser informado o nome

completo do arquivo que ser acessado;
Texto ou imagem: que servir como link;
/A: encerra a TAG de link.
Exemplo:
Edite o primeiro arquivo que criamos index.html. Substitua o cdigo pelo o que
est abaixo:
<html>
<body >
<h1><font face="arial" color="orange">MENU</font></h1>
<HR width="100%" align="left" size="2" color="silver" >
<A HREF = "EstiloTexto.html">Estilo de Texto</A>
<br>
<A HREF = "ExemploTitulo.html">Ttulos e Subttulos</A>
<br>
<A HREF = "LinhaHorizontal.html">Linha Horizontal</A>
<br>
<A HREF = "Fontes.html">Fontes</A>
Prof.: Svio
HTML Bsico
Pgina 18
<br>
<A HREF = "Imagem.html">Imagem</A>
</body>
</html>
Links para outro diretrio

Para criar links para uma pgina localizada em outros diretrios necessrio
indicar o caminho completo do arquivo. Para a WEB isto tem uma forma um
pouco diferente do Windows e do DOS, veja:
A barra utilizada para separar os diretrios a barra convencional (/);
O ponto de partida para localizar um arquivo em outro diretrio o atual;
Para baixar um nvel deve utilizar os sinais ../.
Exemplo:
<A HREF=../matricula/CadastraAluno.html >
Cadastro de Aluno
</A>
Prof.: Svio
HTML Bsico
Pgina 19
Parmetro NAME
O parmetro NAME serve para marcar um ponto para possveis desvios.
Quando desviamos para um determinado ponto dentro de um documento,
indicamos este nome com um "#". Por exemplo:
<A NAME="AQUI">Aqui um ponto para desvios</A>...
<A HREF="#AQUI">Desvia para o ponto "AQUI"</A>
Listas
Criando listas ordenadas
Listas ordenadas so tambm denominadas listas numeradas, pois, quando
um navegador encontra uma TAG, iniciando uma lista ordenada, ele passa a
mostrar cada item utilizando nmeros, como 1, 2, 3, e assim sucessivamente.
Listas ordenadas so iniciadas pela TAG <OL>.
Cada item utiliza a TAG <LI>.
Finalmente, </OL>.
Sintaxe:
<OL TYPE=formato START=n>

<LI> Tpico 1 </LI>
<LI> Tpico 2 </LI>
<LI> Tpico n </LI>
</OL>
Onde:
<OL>: incio da lista numerada;
TYPE=formato: o formato da numerao pode ser:

o 1: lista numrica (no necessrio ser definido);
o A: lista alfabtica com letras maisculas;
o A: lista alfabtica com letras minsculas;
o I: Lista numrica com nmeros romanos maisculos;
o I: lista numrica com nmeros romanos minsculos;
Prof.: Svio
HTML Bsico
Pgina 20
START=n: o valor inicial de uma lista numerada;
<LI>...</LI>: tpicos da lista;
</OL>: fim da lista numerada;
Exemplo:
Crie um arquivo chamado Listas.html e insira o cdigo abaixo:
<html>
<body>
<center><h1>Listas Ordenadas</h1></center>
<h3>Cursos</h3>
<OL>
<LI>Graduao</LI>
<LI>Ps-Graduao Lato Sensu</LI>
<LI>Cursos de Ps-Graduao Stricto Sensu</LI>
</OL>
</body>
</html>
Criando listas no ordenadas

Listas no ordenadas so muito parecidas com as ordenadas. A nica
diferena o fato de elas no definirem explicitamente uma ordem, como no
caso as numeradas. Eles so formados por smbolos, que podem ser bola,
quadrado, e uma bola vazia. Elas so iniciadas com a TAG <UL> e so
Prof.: Svio
HTML Bsico
Pgina 21
respectivamente terminadas com </UL>. E seus elementos so que nem as

numeradas: com <LI>...</LI>.
Sintaxe:
<UL TYPE=formato>
<LI> Tpico 1</LI>
<LI> Tpico 2 </LI>
<LI> Tpico 3 </LI>
</UL>
Onde:
<UL> : Incio da lista pontuada;
TYPE=formato: o formato do marcador pode ser:

o disc: o marcador um ponto (padro utilizado pelos navegadores,
no precisa indicar);
o square: o marcador um quadrado;
o circle: o marcador um ponto.
<LI>...</LI>: tpicos da lista;
</UL>: fim da lista pontuada
Exemplo:
Acrescente o cdigo abaixo no arquivo Listas.html:
<br>
<center><h1>Listas No Ordenadas</h1></center>
<h3>Membro da Comunidade Acadmica</h3>
<UL TYPE = disc>
<LI>Aluno</LI>
<LI>Docente</LI>
<LI>Tcnico Administrativo</LI>
</UL>
Prof.: Svio
HTML Bsico
Pgina 22
Tabelas
<TABLE></TABLE>
Conceito bsico
Utilizadas como um recurso essencial para o layout geral da pgina atravs do
posicionamento de imagens e texto, as tabelas so compostas de linhas dentro
das quais so colocadas clulas de contedo. O contedo de cada clula pode
ser texto, imagem ou at mesmo outra tabela.
Construindo tabelas com o elemento TABLE

A TAG <TABLE> utilizada para a representao de dados tabulares. A
estrutura e o contedo da tabela devem ficar dentro das TAGs <TABLE>
</TABLE>
Exemplo:
<TABLE>
<TR> Indica o incio de uma nova linha na tabela
<TD> Indica uma coluna na tabela
</TD> Indica o final daquela coluna na tabela
</TR> Indica o final da linha na tabela
Prof.: Svio
HTML Bsico
Pgina 23
</TABLE>
O ttulo da tabela (elemento CAPTION)
A TAG <CAPTION> especifica o ttulo de uma tabela.
Por exemplo:
<CAPTION>Notas da primeira avaliao</CAPTION>
TABLE HEADINGS (elemento TH)
A TAG <TH> usada para especificar as clulas de cabealho da tabela.
Essas clulas so diferentes das outras, pois seu contedo aparece
geralmente em negrito. O elemento TH pode ser apresentado sem contedo
algum: isso corresponde a uma clula em branco. As tabelas podem ainda
conter mais de um TH para uma dada coluna, ou linha, ou simplesmente no
conter nenhum elemento TH, isto , no conter em nenhuma clula em
destaque. O TAG dela :
<TH>texto em destaque</TH>
Observaes: Elas devem ficar, assim como todas, dentro da TAG <TABLE>.
TABLE DATA (elemento TD)

A TAG <TD> especifica a clulas de dados de uma tabela. Por se tratar de
dados comuns (e no cabealhos), essas clulas possuem seu contedo
escrito em fonte normal, sem nenhum destaque e alinhamento esquerda.
Assim como o TH, podem-se construir clulas em branco, usando o elemento
TD, como no exemplo a seguir:
<TD>Clulas de dados</TD>
END OF TABLE ROW (elemento TR)
A TAG <TR> indica o incio de uma linha na tabela. Cada linha da tabela pode
conter vrias clulas, e, portanto, necessrio que se faa uso de uma
marcao que indique exatamente o ponto de quebra de uma linha e incio de
outra. Toda linha deve terminar com um </TR>.
Prof.: Svio
HTML Bsico
Pgina 24
Principais atributos de uma tabela
BORDER
<TABLE BORDER="espessura da borda">

Especifica a presena ou a ausncia de borda na tabela bem como sua
espessura. No caso de uma tabela sem bordas no necessrio colocar o
atributo BORDER.
Exemplo:
<html>
<head>
<title>Curso de Html</title>
</head>
<body>
<table border="5">
<CAPTION>Título</CAPTION>
<tr>
<td>Tabela html</td>
</tr>
<tr>
<td>Tabela html</td>
</tr>
</table>
</body>
</html>
Veja o resultado:
Prof.: Svio
HTML Bsico
Pgina 25
WIDTH e HEIGHT
<TABLE WIDHT="largura da tabela" HEIGHT="altura da tabela">

Indica o tamanho da tabela. Este caminho pode ser relativo ao tamanho da
pgina, em que a tabela ser exibida, ou absoluta. Uma tabela de tamanho
relativo chamada de "TABELA ELSTICA" e se estica de acordo com o
tamanho da pgina. Neste caso, a largura e altura da tabela so fornecidas em
medida de porcentagem (%). 100% indicam que a tabela ir ocupar a tela toda.
Exemplo:
<TABLE WIDTH="300" HEIGHT="200">
Prof.: Svio
HTML Bsico
Pgina 26
ALIGN
Este atributo pode ser aplicado a TH, TD ou TR e controla o alinhamento do

texto dentro de uma clula, com relao as bordas laterais. Quando aplicado a
TR, ele define o alinhamento de toda uma linha da tabela.
O exemplo abaixo mostra como o ALIGN aceita os valores LEFT, CENTER ou
RIGHT,
para
alinhar
esquerda,
centralizar
ou
alinhar
direita,
respectivamente.
Exemplo:
<table border="1" width="500">
<tr>
<TD ALIGN="CENTER">Centro</TD>
<TD ALIGN="LEFT">Esquerda</TD>
<TD ALIGN="RIGHT">Direita</TD>
</tr>
</table>
Veja o resultado:
VALIGN
Pode ser aplicado a TH e TD e define o alinhamento do texto em relao s

bordas superior e inferior.
Aceite os valores TOP, MIDDLE, E BOTTOM para alinhar na parte de cima, no
meio e na parte de baixo, respectivamente.
Veja o exemplo:
<html>
Prof.: Svio
HTML Bsico
Pgina 27
<head>
</head>
<body>
<table border="1" width="500" height="100">
<tr>
<TD>Teste de alinhamento</TD>
<TD VALIGN="TOP">TOP</TD>
<TD VALIGN="middle">MIDDLE</TD>
<TD VALIGN="bottom">BOTTOM</TD>
</tr>
</table>
</body>
</html>
Veja o resultado:
CELLSPACING
Este atributo compreende a distncia entre clulas e linhas.

Deve ser adicionado dentro da TAG <TABLE>.
Como padro dos navegadores a distncia 2 pixels.
Exemplo:
Criei o arquivo Tabela.html e insira o cdigo abaixo:
<html>
Prof.: Svio
HTML Bsico
Pgina 28
<head>
</head>
<body>
<h3>Exemplo com CELLSPACING</h3>
<TABLE BORDER="1" WIDTH="50%" CELLSPACING="6">
<TR>
<TD WIDTH="33%" ALIGN="center"> Coluna 1 </TD>
</TR>
</TABLE>
</body>
</html>
Veja o resultado:
CELLPADDING
Este atributo utilizado para formatar o espao entre o contedo de uma clula
e suas bordas em todos os sentidos.
aplicado dentro da TAG <TABLE>.
Exemplo:
Criei o arquivo Tabela2.html:
<html>
<head>
Prof.: Svio
HTML Bsico
Pgina 29
</head>
<body>
<h3>Exemplo com CELLPADDING </h3>
<TABLE BORDER="1" WIDTH="50%" CELLPADDING="6">
<TR>
<TD WIDTH="33%" ALIGN="center"> Aluno </TD>
<TD WIDTH="33%" ALIGN="center"> Docente </TD>
<TD WIDTH="34%" ALIGN="center"> Administrativo </TD>
</TR>
</TABLE>
</body>
</html>
ROWSPAN
Define quantas linhas uma mesma clula pode abranger. Por padro, na
maioria dos navegadores de Internet cada clula adicionada em uma tabela
corresponde a uma linha.
Exemplo:
Criei o arquivo Tabela3.html.
<html>
<head>
Prof.: Svio
HTML Bsico
Pgina 30
</head>
<body>
<TABLE BORDER="1" WIDTH="380" CELLPADDING="7" ALIGN="center">
<TR>
<TD WIDTH="16%" ROWSPAN="2"> 2 linhas </TD>
<TD WIDTH="16%"> coluna 2 </TD>
</TR>
<TR>
</TR>
</TABLE>
</body>
</html>
COLSPAN
Este atributo define quantas colunas uma clula pode abranger. Por padro, na
maioria dos navegadores de Internet cada clula adicionada em uma tabela
corresponde a uma coluna. Pode ser aplicado em TH ou TD, proporcionando a
mesma abrangncia.
Prof.: Svio
HTML Bsico
Pgina 31
Exemplo:
Criei o arquivo Tabela4.html
<html>
<head>
</head>
<body>
<TABLE BORDER="1" WIDTH="50%" ALIGN="center">
<TR>
<TD WIDTH="24%" COLSPAN="3">com 3 colunas </TD>
<TD WIDTH="20%">coluna 4</TD>
</TR>
<TR>
</TR>
</TABLE>
</body>
</html>
BORDERCOLOR e BGCOLOR
Prof.: Svio
HTML Bsico
Pgina 32
<TABLE BORDERCOLOR="valor hexadecimal" BGCOLOR="valor

hexadecimal">
Especifica respectivamente a cor da borda e a cor da tabela. As cores devem
ser dadas em valores hexadecimais.
Exemplo:
<TABLE BORDER="1" BORDERCOLOR="#333333" BGCOLOR="#999999">
Ateno! Precisa existir as bordas. Ento necessria a colocao do atributo
BORDER="valor maior que zero" caso contrrio s ir aparecer cor da tabela
(BGCOLOR)
BACKGROUND
<TABLE BACKGROUND="imagem.jpg">
Especifica a imagem de fundo da tabela.
Exemplo:
<TABLE BACKGROUND="casa.jpg">
Repare que se a tabela for maior que a foto de fundo ela se repete. Usando a
imaginao d pra fazer coisas muito legais!
Formulrios
A linguagem HTML tambm permite que o cliente (navegador) interaja com o
servidor, preenchendo campos, clicando em botes e passando informaes.
O elemento FORM, da linguagem HTML, justamente o responsvel por tal
interao. Ele prov uma maneira agradvel e familiar para coletar dados do
usurio atravs da criao de formulrios com janelas de entrada de textos,
botes, etc.
Construindo formulrios com o FORM

Para fazer formulrio, voc tem que colocar as TAGs <FORM> </FORM>.
Todos os outros comandos, devem ficar dentro dessas TAGs. Ok?!
Prof.: Svio
HTML Bsico
Pgina 33
Atributos para FORM

O elemento FORM pode conter dois atributos que determinaram para onde
ser mandada a entrada do FORM. Vejam como eles so:
GET
Os dados entrados fazem parte do URL associado consulta enviado para o

servidor e suporta at 128 caracteres.
POST
o mais utilizado, pois envia cada informao de forma separada da URL.

Com este mtodo POST os dados entrados fazem parte do corpo da
mensagem enviada para o servidor e transfere grande quantidade de dados.
INPUT
A TAG <INPUT> especifica uma variedade de campos editveis dentro de um
formulrio. Ele pode receber diversos atributos que definem o tipo de
mecanismo de entrada (botes, janelas de texto, etc.), o nome da varivel
associada com o dado da entrada, o alinhamento e o campo do valor mostrado.
O atributo mais importante do INPUT o NAME. Ele associa o valor da entrada
do elemento.
Por exemplo, quando voc for receber os dados, j, processados, ir vir o
name: = resposta dada pelo visitante. Outro atributo importante o TYPE. Ele
determina o campo de entradas de dados.
Veja como se usa este atributo:
<INPUT TYPE="TEXT" NAME="nome">
Para mudar o tamanho, da janela padro, voc tem que colocar o comando
SIZE.
Por exemplo:
<INPUT TYPE "TEXT" NAME="nome" SIZE=8>(ou nmero desejado)
Outro comando importante o VALUE. Ele acrescenta uma palavra digitada no

comando janela.
Prof.: Svio
HTML Bsico
Pgina 34
Por exemplo:
<INPUT TYPE "TEXT" NAME="nome" SIZE=8 VALUE="texto.">
Olhe como ficaria:
Tipos de elementos TYPE

Voc pode fazer vrias coisas com o elemento TYPE. Por exemplo, para ser
um campo de senha, que quando digitado, aparea o smbolo "*", ao invs das
letras, voc deve escrever o seguinte:
<INPUT TYPE"PASSWORD" NAME="nome" SIZE=8>
TYPE="RADIO"
Quando o usurio deve escolher uma resposta em uma nica alternativa, de

um conjunto, utiliza-se o RADIO Buttons. Um exemplo tpico do uso de tais
botes cuja resposta pode ser SIM ou NO. preciso que todos os rdios
buttons de um mesmo grupo, ou seja, referentes mesma pergunta, tenham o
mesmo atributo NAME. Para esse tipo de entrada, os atributos NAME e
VALUE, so necessrios.
<INPUT
TYPE="RADIO"
NAME="voc gostou dessa home page?"
VALUE="sim">sim<p>
<INPUT TYPE="RADIO" NAME="voc gostou dessa home page?"
VALUE="nao">no<p>
Prof.: Svio
HTML Bsico
Pgina 35
TYPE="PASSWORD"
Este comando serve para fazer um campo de senhas! Quando a pessoa

digitar, aparecer o sinal de "*"! O comando :
<INPUT TYPE="PASSWORD" NAME="SENHA" MAXLENGHT=6>
TYPE="CHECKBOX"
Esse comando vlido quando apenas uma resposta, esperada. Mas nem
sempre esta a situao...O tipo CHECKBOX prov outros botes atravs dos
quais mais de uma alternativa, pode ser escolhida.
Definio dos checkboxs:
<INPUT TYPE="CHECKBOX" NAME="netscape" VALUE="net">
Netscape<p>
<INPUT TYPE="CHECKBOX" NAME="Explorer" VALUE="exp"> Internet
Explorer<p>
<INPUT TYPE="CHECKBOX" NAME="Mosaic" VALUE="mos"> Mosaic<P>
<INPUT TYPE="CHECKBOX" NAME="Hot Java" VALUE="hot"> Hot
Java<P>
Veja o resultado:
Prof.: Svio
HTML Bsico
Pgina 36
TYPE="SUBMIT"
Esse o boto que submete os dados do formulrio quando pressionados, ou

seja, possibilitam o envio, dos dados para o script que vai trat-los. Veja como
se adiciona o boto:
<INPUT TYPE="SUBMIT" VALUE="enviar">
Veja como ficar:
TYPE="RESET"
No caso dos botes RESET, quando o boto clicado, ele automaticamente

limpa todos os campos j preenchidos no formulrio, voltando situao inicial.
<INPUT TYPE="RESET" VALUE="Limpar">
Veja como ficar:
Prof.: Svio
HTML Bsico
Pgina 37
TEXTAREA
Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos

atributos COLS e ROWS que especificam, respectivamente, o nmero de
colunas e linhas que se deseja mostrar para o usurio. O atributo NAME
obrigatrio, e especifica o nome da varivel, que ser associada entrada do
cliente (navegador). O atributo VALUE no aceito nesse elemento, mas voc
pode colocar j um texto da seguinte maneira.
Veja como ele colocado:
<TEXTAREA NAME="nome" COLS=20 ROWS=3>texto</TEXTAREA>
SELECT
Permite definir uma lista de opes, com barra de rolagem ou fixa na tela do
navegador. uma TAG que deve ser iniciada com <SELECT> e finalizada com
</SELECT>.
Sintaxe:
<SELECT MULTIPLE NAME="nomeDaLista">
Prof.: Svio
HTML Bsico
Pgina 38
<OPTION SELECTED VALUE="valor de retorno">Valor Visualizado

</OPTION>
<OPTION VALUE="Valor de retorno">Valor Visualizado 2</OPTION>
</SELECT>
Onde:
NAME: obrigatrio, serve para a identificao da lista;
OPTION: item da lista;
MULTIPLE: com este atributo a lista aparecer sempre aberta;
SELECTED: indica o valor padro da lista;
VALUE: valor a ser retornado ao servidor.
Exemplo:
<SELECT NAME="Estados">
<OPTION SELECTED VALUE="SP"> So Paulo </OPTION>
<OPTION VALUE="RJ"> Rio de Janeiro </OPTION>
<OPTION VALUE="MG"> Minas Gerais </OPTION>
<OPTION VALUE="ES"> Esprito Santo </OPTION>
</SELECT>
Prof.: Svio
HTML Bsico
Pgina 39
Iframes
O iframe e um recurso que eu acho muito funcional. Ele e muito pratico,
pois cria uma janela onde voce quiser para colocar uma pagina HTML.
Basta voce colocar o seguinte codigo aonde deseja que a janela do

Iframe apareca:
<IFRAME
name=iframe0
src="iframe_0.html"
width=400
height=150
scrolling=auto></IFRAME>
NAME: e o nome da janela, ele sera usado caso voce queira criar links que
abram dentro do iframe, e o valor do TARGET.
SRC: e a pagina que sera aberta dentro do iframe.
FRAMEBORDER: borda do frame.
WIDTH e HEIGHT: largura e altura do iframe, respectivamente.
SCROLLING: barra de rolagem.
Frames
um recurso que permite dividir uma pgina de Internet em outras, na mesma
pgina. Nada mais que uma pgina que chama outras na pgina inicial que
um documento html que contm frames.
Prof.: Svio
HTML Bsico
Pgina 40
Em um determinado arquivo como o index.html, onde pode ser definida a

estrutura das novas janelas para o seu HTML.
Estrutura
Assim como o corpo do HTML, os FRAMES tm sua estrutura. Eles entram no
lugar do corpo, substituindo o <BODY></BODY> por <FRAMESET>
</FRAMESET>.
Exemplo:
<HTML>
<HEAD>
<TITLE> Ttulo do Documento </TITLE>
</HEAD>
<FRAMESET>
Sintaxe dos Frames
</FRAMESET>
</HTML>
Sintaxe
Primeiramente devemos fazer um documento HTML para ele ser especificado
pela sintaxe de FRAMES, no caso chamado de Frame1.htm.
<HTML>
<HEAD>
<TITLE> Frame 1 </TITLE>
</HEAD>
<BODY>
<FONT SIZE=+1> <B> Frame n1 </B> </FONT>
</BODY>
</HTML>
Prof.: Svio
HTML Bsico
Pgina 41
FRAMESET
A primeira especificao o FRAMESET, que acompanhado pelas
definies ROWS e COLS.
ROWS
Especifica o nmero de FRAMES e a altura de cada um.
Exemplo:
<FRAMESET ROWS="20%,30%,50%">
<FRAME SRC="Frame1.html">
</FRAMESET>
Neste exemplo de cima, ele chama trs FRAMES, o 1 com 20% da tela, o 2
com 30% da tela, o 3 com 50% da tela (ambos em altura).
COLS
Especifica o nmero de FRAMES e a largura de cada um.
Exemplo:
<FRAMESET COLS="20%,30%,50%">
Prof.: Svio
HTML Bsico
Pgina 42
</FRAMESET>
Neste exemplo de cima, ele chama trs FRAMES, o 1 com 20% da tela, o 2
com 30% da tela, o 3 com 50% da tela (ambos em largura).
FRAME
A segunda especificao o FRAME, que acompanhado pelas definies
SRC, NAME, SCROLLING, NORESIZE, TARGET.
SRC
Especifica o documento de formato HTML chamado para o FRAME.
Indispensvel, por que sem ele s o documento aparecer vazio, s com as
divises.
Exemplo:
</FRAMESET>
NAME
Prof.: Svio
HTML Bsico
Pgina 43
Especifica o nome do documento de formato HTML chamado para o FRAME.

extremamente necessrio para o uso do TARGET, que ser visto a seguir.
Exemplo:
<FRAME SRC="Frame1.html" NAME="Principal">
</FRAMESET>
SCROLLING
Define se o Frame ter barra de rolagem, o default Auto.
Fornece as opes: Yes, No, Auto.
Yes - Exibe a barra de rolagem independente do tamanho do documento.
No - No exibe a barra de rolagem, mesmo que o documento seja maior que o
tamanho especificado.
Auto - S exibe a barra de rolagem se o documento for maior que a rea
especificada.
Exemplo:
<FRAME SRC="Frame1.html" SCROLLING="no">
<FRAME SRC="Frame1.html" SCROLLING="yes">
<FRAME SRC="Frame1.html" SCROLLING="auto">
</FRAMESET>
Prof.: Svio
HTML Bsico
Pgina 44
NORESIZE
Impossibilita o usurio de mudar o tamanho da rea especificada do FRAME.
Por default o usurio pode mudar esta rea.
Exemplo:
<FRAME SRC="Frame1.html" NORESIZE>
<FRAME SRC="Frame1.html" >
<FRAME SRC="Frame1.html" >
</FRAMESET>
TARGET
Define qual a rea (FRAME) que aparecer o documento especificado pelo
link.
Mais til na utilizao de Menus e ndices.
Necessita do NAME.
Exemplo:
<FRAME SRC="Frame1.html" NAME="Principal">
Prof.: Svio
HTML Bsico
Pgina 45
</FRAMESET>
O Link:
<A HREF="http://www.unesp.br" TARGET="Principal"> Unesp </A>
Se voc quiser criar um link que chama uma nova tela do browser basta
colocar TARGET="um nome que no existe".
BORDER
Define qual a borda que o FRAME ter.
Mais til na utilizao de BACKGROUNDS iguais.
Exemplo:
<FRAMESET COLS="20%,30%,50%" FRAMEBORDER="NO" BORDER=0>
<FRAME SRC="Frame1.html" FRAMEBORDER="NO" BORDER=0>
</FRAMESET>
Prof.: Svio
HTML Bsico
Pgina 46
Tabelas de Cores
Nome da Cor
RGB Hexadecimal
Amarelo
#FFFF00
Amarelo Esverdeado
#99CC32
Aquamarine
#70DB93
Aquamarine Mdio
#32CD99
Azul
#0000FF
Azul Ardsia
#007FFF
Azul Ardsia Escuro
#6B238E
Azul Brilhante
#C0D9D9
Azul Celeste
#3299CC
Azul Claro
#5F9F9F
Azul Corn Flower
#42426F
Azul Escuro
#00009C
Azul Marinho
#23238E
Azul Mdio
#3232CD
Azul Neon
#4D4DFF
Azul Rich
#5959AB
Azul Violeta
#9F5F9F
Baker's Chocolate
#5C3317
Branco
#FFFFFF
Bright Ouro
#D9D919
Bronze
#DB9370
Bronze Claro
#EBC79E
Bronze Escuro
#8C7853
Caqui
#9F9F5F
Cinza
#C0C0C0
Cinza Brilhante
#A8A8A8
Cinza Claro
#CDCDCD
Cobre
#D98719
Cobre Claro
#B5A642
Cobre Escuro
#B87333
Coral
#FF7F00
Prof.: Svio
HTML Bsico
Cor
Pgina 47
Cyan
#00FFFF
Escarlata
#8C1717
Firebrick
#8E2323
Goldenrod Mdio
#EAEAAE
Goldenrod
#DBDB70
Laranja
#FF7F00
Laranja Mandarian
#E47833
Light Steel Blue
#8F8FBD
Light Wood
#E9C2A6
Magenta
#FF00FF
Marrom
#8E236B
Marrom
#A62A2A
Marrom Escuro
#5C4033
Medium Slate Blue
#7F00FF
Orqudea Escuro
#9932CD
Orqudea Mdio
#9370DB
Ouro
#CD7F32
Ouro Velho
#CFB53B
Plum
#EAADEA
Preto
#000000
Prpura Escuro
#871F78
Quartz
#D9D9F3
Rosa
#FF6EC7
Rosa Temperado
#FF1CAE
Salmo
#6F4242
Semi-Sweet Chocolate
#6B4226
Sienna
#8E6B23
Silver
#E6E8FA
Steel Azul
#236B8E
Summer Sky
#38B0DE
Tan Escuro
#97694F
Thistle
#D8BFD8
Turquesa
#ADEAEA
Turquesa Escuro
#7093DB
Turquesa Mdio
#70DBDB
Prof.: Svio
HTML Bsico
Pgina 48
Verde
#00FF00
Verde Amarelado
#93DB70
Verde Cobre
#527F76
Verde Cobre Escuro
#4A766E
Verde Escuro
#2F4F2F
Verde Floresta
#238E23
Verde Floresta Mdio
#6B8E23
Verde Hunter
#215E21
Verde Limo
#32CD32
Verde Oceano
#426F42
Verde Oceano claro
#238E68
Verde Oliva Escuro
#4F4F2F
Verde Primavera
#7FFF00
Verde Primavera
#00FF7F
Vermelho
#FF0000
Vermelho Indiano
#4E2F2F
Vermelho Violeta
#CC3299
Violeta
#4F2F4F
Violeta Vermelho Mdio
#DB7093
Wheat
#D8D8BF
Wood Mdio
#A68064
Prof.: Svio
HTML Bsico
Pgina 49
Bibliografia
W3Schools Online 01/10/2010 : http://www.w3schools.com/
ELISABETH FREEMAN & ERIC FREEMAN , Use a Cabea HTML com CSS e
XHTML, Ed: Alta Books
Prof.: Svio
HTML Bsico
Pgina 50

HyperText Markup Language

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HyperText Markup Language

Загружено:

Авторское право:

Доступные форматы

HTML

Foi a primeira linguagem no setor e usada amplamente at os dias atuais. Foi

Primeira Pgina em HTML

Possui uma estrutura dividida em 4 TAGs bsicas:

<HEAD> ... </HEAD>

<BODY> ... </BODY>

Opcionalmente podemos indicar uma cor para o fundo da pgina, usando a

Iniciaremos a nossa primeira pgina editando o cdigo no Bloco de Notas.

Siga os passos abaixo:

Exemplo com cor de fundo na pgina:

Exemplo com imagem de fundo na pgina:

Trabalhando com textos

Observaes: A TAG CENTER tm a funo de deixar o cabealho ou texto

Estilos de texto Alm da TAG <CENTER>...</CENTER> existem as seguintes

<p align=posio> Texto do pargrafo. </p>

Posio pode ser:

Left: alinhamento esquerda;

Right: alinhamento direita;

SIZE=n : n varia de 1 a 7 e 3 o valor padro da maioria dos

FACE=nome : nome da fonte a ser utilizada (Arial, Tahoma, etc);

COLOR=cor : cor da fonte definida em hexadecimal, ou atravs de um

<HR> Linhas Horizontais

WIDTH: Define a largura da linha, o que pode ser feito em pixels

NOSHADE: Linha sem sombra. O padro a linha sombreada,

Veja a tabela mostrando vrios smbolos:

WIDTH: Define a largura da imagem, o que pode ser feito em pixels

HEIGHT: Define a altura da linha, o que pode ser feito em pixels

ALIGN: Alinhamento da imagem pode ser, LEFT, RIGHT e CENTER, ou

ALT: texto que ir aparecer ao passar o mouse sobre a imagem ou texto

BORDER: Especificao da largura da borda da imagem. Valor em

VSPACE: Para especificar o espao que deve ser deixado acima e

HSPACE: Especifica o espao que deve ser deixado nas laterais da

O nico obrigatrio o src.

<IMG SRC="buscar.gif" ALIGN="left" ALT="Buscar">

um texto e que com apenas um clique em um dos tpicos do ndice, o item

Voc s precisa especificar o nome do arquivo que ser chamado e a sua

A: abertura da TAG de link;

HREF=nomeDoArquivo.extenso: deve ser informado o nome

Texto ou imagem: que servir como link;

/A: encerra a TAG de link.

Links para outro diretrio

A barra utilizada para separar os diretrios a barra convencional (/);

O ponto de partida para localizar um arquivo em outro diretrio o atual;

Para baixar um nvel deve utilizar os sinais ../.

<OL TYPE=formato START=n>

<OL>: incio da lista numerada;

TYPE=formato: o formato da numerao pode ser:

START=n: o valor inicial de uma lista numerada;

<LI>...</LI>: tpicos da lista;

</OL>: fim da lista numerada;

Criando listas no ordenadas

respectivamente terminadas com </UL>. E seus elementos so que nem as

<UL> : Incio da lista pontuada;

TYPE=formato: o formato do marcador pode ser:

<LI>...</LI>: tpicos da lista;

</UL>: fim da lista pontuada

Construindo tabelas com o elemento TABLE

TABLE DATA (elemento TD)

Principais atributos de uma tabela

<TABLE BORDER="espessura da borda">

<TABLE WIDHT="largura da tabela" HEIGHT="altura da tabela">

Este atributo pode ser aplicado a TH, TD ou TR e controla o alinhamento do

Pode ser aplicado a TH e TD e define o alinhamento do texto em relao s

Este atributo compreende a distncia entre clulas e linhas.