Apostila HTML

TCNICAS DE PROGRAMAO
PARA INTERNET
PROF. VALRIA HELENA P. GERBELLI
H.T.M.L
HYPERTEXT MARK-UP LANGUAGE
O QUE UM BROWSER
Procure por BROWSE em

seu dicionrio.
O resultado ser
FOLHEAR.
O QUE UM BROWSER
BROWSER o folheador da
Internet. Permite navegar entre
as pginas.
C O M O D E S E N VO LV E R U M S I T E ?
Podemos fazer no Bloco de Notas, ou usar softwares que agilizam

seu desenvolvimento como Web Expression da Microsoft,
Alleycode HTML Editor, Visual Studio na parte de HTML,
DreamWeaver, etc.
O importante saber que todo arquivo deve ter sua extenso
.htm ou .html e deve ser texto puro (caractere ASCII), nunca use e
formate suas pgina no word ou outros software.
C O M O D E S E N VO LV E R U M S I T E ?
ASCII American Stardard Code for Information

Interchange Cdigo Americano Padro para Troca de
Informaes.
uma tabela de cdigos que tem como objetivo
padronizar os caracteres alfa-numricos, para que todos
os computadores de diferentes fabricantes, possam
entender os cdigos.
Portanto um arquivo ASCII no tem formataes.
C O M O U M A PG I N A
REC ONHECIDA PELO BROWSER ?
Todo arquivo que gravado no computador tem um tipo.

Um arquivo do Word tem a extenso .DOCX, um arquivo
do Paint tem o tipo .BMP, assim por diante.
Cada um, dependendo do seu tipo ter o seu cone de
acordo com o Sofware do qual ele foi criado.
Uma pgina reconhecida pelo seu Navegador Padro
instalado em sua mquina, ele s precisa ter a extenso
.HTM ou .HTML.
W3C WORLD WIDE WEB

CONSORTIUN
O W3C liderado por Tim Berners-Lee, o inventor da World Wide Web, e

por Dr. Jeffrey Jaffe, diretor executivo do W3C. Eles so apoiados por
uma equipe de tcnicos que ajudam a coordenar o desenvolvimento de
tecnologia e gerenciar as operaes do Consrcio, auxiliados tambm pelos
escritrios locais, como o W3C Brasil, hospedado peloCGI.br e NIC.br
Os membros filiados ao W3C e especialistas convidados proveem energia
para os grupos de trabalho que desenvolvem os padres W3C para a Web.
A grande comunidade da Web tambm desempenha um papel importante ao
revisar e opinar sobre as especificaes, h muitas maneiras de participar do
W3C, mesmo individualmente.
W3C WORLD WIDE WEB

CONSORTIUN
O W3C liderado por Tim Berners-Lee, o inventor da World Wide Web, e por Dr. Jeffrey
Jaffe, diretor executivo do W3C. Eles so apoiados por uma equipe de tcnicos que ajudam
a coordenar o desenvolvimento de tecnologia e gerenciar as operaes do Consrcio,
auxiliados tambm pelos escritrios locais, como o W3C Brasil, hospedado
peloCGI.br e NIC.br
Os membros filiados ao W3C e especialistas convidados proveem energia para os grupos de
trabalho que desenvolvem os padres W3C para a Web.
A grande comunidade da Web tambm desempenha um papel importante ao revisar e
opinar sobre as especificaes, h muitas maneiras de participar do W3C, mesmo
individualmente.
Fonte : http://www.w3c.br/Sobre/ConhecendoW3C
H . T. M . L .
HyperText Markup Language Linguagem de Marcao de Hipertexto - Hipertexto so os

links.
HTML uma linguagem de formatao, esttica que permite formatar apenas os textos.
Seus comando veem dentro de tags <> (sinais de maior e menor). Quando falamos em
formatar textos, tambm podemos dizer que um texto formatado como link, se transforma
em link, um nome de arquivo de imagem, dentro de um comando, carrega essa imagem para
a tela, uma tag com funo de inserir um linha horizontal para criar um layout bonito,
tambm permitido com esta linguagem de formatao.
Quase todas as tags tm a sua correspondente de fechamento :

<comando> texto formado </comando>.
H . T. M . L . E S T RU T U R A B S I C A
A estrutura de uma pgina HTML, significa que temos um padro para iniciar e terminar uma
pgina. O que deve mudar o meio, onde digitado e formatado o corpo da pgina.
Para digitar os comandos tanto faz ser maiscula ou minscula, pois HTML no Case
Sensitive. Vejamos a estrutura da Linguagem :
<html lang=pt-br>
<head>
<meta charset=UTF-8>
<link rel=stylesheet type=text/css href=estilo.css>
<title> TITULO DA PGINA - BARRA DE TTULO </title> </head>
<body>
Aqui vai o seu texto, sua tabela, sons, figuras, listas, tudo o que voc quiser
</body>
</html>
ENTENDENDO A ESTRUTURA
BSICA
<html lang=pt-br> > - Indica ao Browser que sua pgina est

formatada em HTML. O Atributo language indica a linguagem principal do
documento.
<head> - Do Ingls Cabea Aqui significa Cabealho Fica a parte
inteligente da pgina. Aqui inserimos os Metadados que so informaes
sobre a pgina.
<link rel> - importa um arquivo de configurao externo
<title> - Do Ingls Ttulo Ttulo da Pgina
</title> - Indica que terminamos de colocar o ttulo
ENTENDENDO A ESTRUTURA
BSICA
</head> - Indica que terminamos de colocar o cabealho

<body> - Do Ingls Corpo inicio do corpo da pgina, aqui dever ser
inserido tudo o que desejamos como : tabelas imagens links listas etc
</body> - Indica trmino do corpo da pgina
</html> - Indica trmino da pgina
Preste ateno !! Caso voc no tenha todas suas pginas iniciadas e
terminadas desta maneira, voc est fora do Padro W3C !!!
DOCTYPE
O doctype a maneira de voc dizer para qualquer navegador como ele deve agir ao ler seu
cdigo HTML. Deve estar logo no comeo da pgina.

A tag DOCTYPE no tem um finalizador;
No diferencia maiscula de minscula;
Use validate do W3C para verificar que voc escreveu um documento HTML vlido.
D E C L A R A O S T R I C T
Esta declarao contm todos os elementos HTML, mas no

inclui elementos de apresentao obsoleta (como fonte).
Frameset no so permitidos
<!doctype html public -//w3c//dtd html 4.01
transitional//en
http://w3.org/tr/html4/strict.dtd>
D E C L A R A O T R A N S I T I O NA L
Esta declarao contm todos os elementos HTML, inclui

elementos obsoletos (como fonte). Frameset no so permitidos
transitional//en
http://w3.org/tr/html4/loose.dtd>
D E C L A R A O F R A M E S E T
Esta declarao igual ao Transitional, mas permite o uso de

contedo de quadros.
frameset//en
http://w3.org/tr/html4/frameset.dtd>
M E TA
um comando implementado no cdigo da pgina web, dentro

da seo <head> para passar instrues a programas externos ou
aes mais simples, como por exemplo, informar qual a pessoa
responsvel pelo desenvolvimento da pgina.
Outras so utilizadas para passar aos sites de busca, instrues
sobre o ttulo da pgina e uma breve descrio a ser exibidas nos
resultados de busca, etc.
M E TA
A tag meta suportado em todos os principais navegadores.

IE
Mozila Firefox
pera
Chrome
Netscape
M E TA
Metadados so dados (informaes sobre os dados)

A tag meta fornece metadados sobre o documento HTML.
Meta elementos so tipicamente usados para especificar
descrio da pgina, palavras-chave, autor do documento,
data da ltima modificao, e outros.
M E TA
Tags meta sempre vai dentro da seo <head>;

So sempre passados como pares nome / valor;
O atributo de contedo deve ser definido se o nome ou o
atributo http-equiv est definida. Se nenhum so destes so
definidos, no se pode atribuir o atributo de contedo.
M E TA D E S C R I P T I O N
esta tag meta que geralmente define a descrio exibida dos

resultados do Google. Descreve o contedo do site de uma forma
a estimular o interesse das pessoas em conhecer mais sobre o
contedo de uma pgina, para aumentar a visitao do seu site.
<meta name=description content=Veja no Terra as ltimas notcias e as melhores
coberturas ao vivo do Brasil e do Mundo, Esportes, Diverso, Vida e Estilo>
M E TA K E Y W O R D
Antigamente os sites de buscas, tinham dificuldade em interpretar a

relevncia de sites para determinadas palavras-chave e utilizava o
contedo da Meta Keyword para ajud-los a interpretar o contedo da
pgina. Os webmasters perceberam que bastava incluir uma afinidade
de palavras nessa tag para aparecer nas buscas, mesmo palavras no
relacionadas ao contedo da pgina. A experincia do usurio era
comprometida e ao ser direcionada a uma pagina que no final das
contas no possua o contedo buscado.
M E TA K E Y W O R D
Os sites de busca evoluram e hoje desconsideram a meta keyword, uma vez

que ela no exibida ao usurio, seja nos resultados de busca, no contedo
do site, os buscadores no consideram como um fator de relevncia.
<meta name=keywords content=climtica, previso climtica,

desenvolvimento, tempo, clima>
B O DY
A TAG BODY responsvel por configurar o corpo da pgina, ou seja, tudo o

que voc tem no site, fica dentro do corpo da pgina. Existe apenas um
<BODY> na pgina. Se voc tiver alguma coisa a mais para colocar referente
ao corpo da pgina, altere a TAG <BODY> e no insira outra TAG.
<body bgcolor="cor" background="arquivo.ext topmargin="n"
bottommargin="n" leftmargin="n" rightmargin="n" scroll="yes/no" text="cor"
bgproperties="tipo">
B O DY
BODY = Corpo o corpo da pgina o incio de tudo, S TEM UM NA SUA

PGINA. Utilizando apenas esta tag, sem parmetro algum, a cor de fundo
padro branco e a cor da letra preto.
BGCOLOR = Background Color Cor de fundo da pgina, aqui voc pode
escrever a cor em Ingls ou usar o cdigo RGB (Red Green Blue). Veja a
tabela de cores aqui
B O DY
BACKGROUND = Fundo uma figura de fundo que pode ser colocada na

sua pgina. Se a figura no ocupar o espao todo da tela, ela ir se repetir
at preench-la. Em HTML no possvel posicionar a figura centralizada,
apenas utilizando Estilo. O nome do arquivo deve ser escrito corretamente e
no deve estar com letra maiscula, muito menos o arquivo da figura.
topmargin = margem do topo Aqui definimos um margem a partir do topo da
pgina. Este nmero definido em Pixels.
B O DY
bottommargin = margem do rodap Aqui definimos um margem a partir do

fim da pgina. Este nmero definido em Pixels.
leftmargin = margem da esquerda Aqui definimos um margem a partir do
lado esquerdo da pgina. Este nmero definido em Pixels.
rightmargin = margem da direita Aqui definimos um margem a partir do lado
direito da pgina. Este nmero definido em Pixels.
B O DY
scroll = barra de rolagem Se colocarmos o valor no , a barra de rolagem ser

omitida, pois mesmo que no ela no fique ativada por no existir texto
suficiente para sua ativao, o seu espao fica reservado, ela fica inativa,
portanto ocupa luga na pgina.
text = texto Definimos um cor padro para o texto, que inicialmente preto.
Bgproperties = Propriedade de Fundo com Figura, use FIXED para fixar a
figura de fundo, ela no rola junto com o texto, caso contrrio, omita a
propriedade
Hn TTULOS
Os ttulos so utilizados para definir um tamanho de ttulo qualquer, e este
d um espao antes e depois do ttulo. As tags de ttulos tem fechamento e
vo de 1 a 6, sendo o 1 o maior tamanho.
<h1 align=alinhamento> Titulo </h1>
Alinhamentos podem ser :
center = centralizado
right = direita
left = esquerda padro
P PA R G R A F O S
Quando queremos pular de pargrafo, ou seja, pular uma linha e iniciar a

digitao, utilizamos a tag P (paragraph) :
<p align=alinhamento>
O alinhamento pode ser :
Left = esquerda (padro)
Right=direita
Center=centralizado
BR PULANDO LINHA
Quando queremos pular de linha, ou seja, simplesmente iniciar uma nova

linha no texto utilizamos a tag BR (Break Row).
<br>
I M G I N S E R I N D O I M AG E M
Para inserir imagens dentro da pgina utilizamos a seguinte tag :

<img src=arquivo.ext width=n height=n alt=texto vspace=n hspace=n
border=n align=alinhamento lowsrc=arquivo.ext >
img abreviao de image (imagem)
src source (origem) exemplo sol.jpg ou crianca.gif
width largura
height altura
I M G I N S E R I N D O I M AG E M
alt texto alternativo

vspace vertical space espao vertical entre a figura e o texto
hspace horizontal space - espaco horizontal entre a figura e o texto
border insere borda na figura
align alinhamento do texto adjacente
lowsrc baixa resoluo - carrega figura arquivo de baixa resoluo antes de carregar a figura original
A L I N H A N D O I M AG E M
TOP
alinhamento no topo da
imagem
MIDDLE
alinhamento no meio da
imagem
BOTTOM
alinhamento no rodap da
imagem
A L I N H A N D O I M AG E M
Left
Imagem esquerda, e o
texto direita.
Right
Imagem direita e o texto
esquerda.
E XERCCIO
Desenvolva uma pgina que fale sobre frutas, ou verduras ou legumes. Utilize
o comandos de formatao que foram ensinados at ento.
Insira Figuras e utilize os alinhamentos.
Salve esta pgina com extenso .HTML
HRLINHA DIVISRIA
Horizontal Row Linha Horizontal, insere uma linha horizontal para dividir pargrafos, ttulos, etc.
<hr color="cor" width="n" size="n" align=alinhamento noshade>
COLOR
Define a cor da linha, caso seja omitido este parmetro, a cor da linha fica transparente.
NOSHADE
Retira a sombra padro da linha, tornando-a slida.
WIDTH
Define a largura da linha, pode especificar nmero relativos (%) ou em pixels.
SIZE
Define a espessura da linha.
ALIGN
Alinha a linha para esquerda ou direita (left, right ou center)
A- LINKS
Links so ligaes com outras pginas na Internet, com outros documentos ou com parte do
mesmo documento:
<a href=URL target=destino title=titulo> Texto para Link </a>
A Significa ANCHOR - Ancora.

HREF Horizontal Reference - Referncia Horizontal, aqui que colocamos o nome do arquivo,
local ou endereo da Internet que queremos abrir.
A- LINKS
TARGET Destino - onde dever ser aberta a URL.

Os tipos so :
_blank - abre uma nova janela do Browser para exibir o documento
_parent - abre o documento no frame principal ou na janela que contm o link.
_self - este o padro, abre o documento na janela do link, por ser o padro no precisa ser
especificado.
_top - abre o documento na janela inteira do Browser, removendo todos os frames, se no existir frame
ele age como o _self.
TITLE Ttulo, abre um texto, como a dica, ao apontar o mouse.
E XERCCIO
Altere a pgina do exerccio anterior, criando mais de uma pgina e que estas pginas estejam linkadas
entre si. Utilize todos os comandos HTML que foram vistos at agora. Crie os links que no foram criados,
confome abaixo. Estes links devem estar dentro de uma tabela.
FRUTAS
SUCOS
LEGUMES
LINKS
PGINA PRINCIPAL chama-se index.html
FRUTAS
SUCOS
LEGUMES
Todos os links devero voltar para a pgina principal
TA B L E - TA B E L A S
Para criar tabelas, interessante termos em mente que criamos as tabelas na

horizontal : a linha e cada clula.
As principais tags para utilizarmos na tabela so :
table Tabela e sua respectiva de fechamento ao final /table
TR Table Row Linha da Tabela
TH Table Head Cabealho de Tabela
TD Table Data Dados da Tabela
TABELA DE PROFESSORES
PROFESSOR
MATRIA
Valria
DDW
Rosinha
LOP
Viviane
OSA
<Table>
TABELA DE PROFESSORES
<TR> <TH> PROFESSOR</TH> <TH> MATRIA </TH> </TR>
<TR> <TD> Valria </TD> <TD> DDW
</TD> </TR>
<TR> <TD>
<TR> <TD>
</Table>
Rosinha </TD> <TD>

Viviane </TD> <TD>
LOP
</TD> </TR>
OSA
</TD> </TR>
TA B L E - P R O P R I E DA D E S
bgcolor = cor
background = imagem
border = insere borda
width = largura
height = altura da tabela
cellpadding = espaamento entre o texto e as bordas das celulas
cellspacing = espaamento entre as clulas
align = alinhamento da tabela (right center left padro )
T R , T H , T D - P RO P R I E DA D E S
bgcolor = cor
background = imagem
height = altura
valign = alinhamento vertical (vertical align) middle
(padro), top or bottom
rowspan = mescla linhas
colspan = mescla colunas
E XERCCIO 1
E XERCCIO 2
MARCADOR
O marcador uma lista no numerada em HTML que

permite criar listas, assim como criamos lista no Word.
UL Unnumbered List lista no numerada
LI List Item item da lista
UL tem a propriedade type que permite os valores :
disc(padro), circle e square.
MARCADOR
<ul type=disc>
<li> Primeiro item
<li> Segundo Item
<li> Terceiro Item
</ul>
<ul type=circle>
<li> Primeiro item
<li> Segundo Item
<li> Terceiro Item
</ul>
<ul type=square>
<li> Primeiro item
<li> Segundo Item
<li> Terceiro Item
</ul>
NUMERADOR
Permite numerar uma lista com nmeros Arbicos, Letras ou

Numeros Romanos. possvel tambm fazer mais de uma lista em
uma pgina e deix-las com numerao continuada.
OL Ordered List lista numerada
LI List Item item da lista
OL type=valor start=n, onde
Valores permitidos : 1, A, a, I e i, onde 1 o padro
N = nmero correspondente ao inicio da lista 1 o padro
NUMERADOR
<ol>
<li> Arroz
<li> Feijo
<li> Azeite
<li> Yakult
</ol>
<ol>
<li> Quem Descobriu o Brasil?</li>
</ol>
<ol type="a">
<li> Jos Cabral</li>
<li> Pedro Alvares</li>
<li> Pedro Alvarez Cabral </li>
<li> nda </li>
</ol>
<ol start="5">
<li> Pizza
<li> Ovos
<li> Leite
<li> Caf
</ol>
<ol start="2">
<li> Assinale a
Alternativa Correta</li>
</ol>
O termo correto :
<ol type="I">
<li> Os Juros </li>
<li> O Juro </li>
<li> Os Juro </li>
<li> O Juros </li>
</ol>
L I S TA D E D E F I N I O
Cria uma lista definio, onde o termo a ser definido ganha uma margem sua esquerda.
DL Define List Lista de Definio
DT Define Term Termo a ser Definido
DD Define Data Dados da Defino
<dl>
<dt> HTML </dt>
<dd> HyperText Markup Language </dd>
<dt> CSS </dt>
<dd> Cascade Style Sheet </dd>
</dl>
E XERCCIO
IFRAME INTERNAL FRAME
Internal Frame Quadro Interno, permite visualizar mais de uma pgina ao mesmo tempo, ou seja, insere
outro documento HTML ao documento corrente.
<iframe src=URL frameborder=n width=n height=n name=nome> </iframe>
Iframe insere um frame

Src = documento ou endereo
Frameborder - 1 ou 0 exibe ou no uma borda no frame
Height especifica a altura do frame
Width especifica a largura do frame
Name = define um nome para o quadro para poder receber links
IFRAME INTERNAL FRAME
Isto um Iframe
Isto uma pgina com Iframe
IFRAME EXERCCIO
MORANGO
ABBORA
ALFACE
CEREJA
INSERIR UMA PGINA DE ENTRADA FAZENDO PROPAGANDA DO SITE
E XERCCIO
Desenvolva um site e utilize TODOS os comandos HTML que foram vistos at agora inclusive links.
FRUTAS
SUCOS
LEGUMES
LINKS
PGINA PRINCIPAL chama-se index.html
FRUTAS
SUCOS
LEGUMES
Todos os links devero voltar para a pgina principal
FORMULRIOS
FORM
utilizado para criar formulrios de entrada de

dados e criar interao entre o site e o usurio. Um
formulrio pode conter vrios elementos dentro dele:
<INPUT> <TEXTAREA> <SELECT> <OPTION>
<FIELDSET> <LABEL> <BUTTON> <OPTGROUP>
FORM
<form action=ao method=metodo

enctype=codificaa name=nome novalidate>
Action = define a ao do formulrio ao ser submetido,

pode ser uma pgina asp ou php ou ainda outra pgina
html.
method= define o mtodo usado quando submeter o
formulrio POST ou GET.
FORM - GET
GET=usamos este mtodo quando no houver alteraes no servidor, como

uma consulta, ou quando queremos passar alguma informao para outra
pgina atravs da URL(barra de endereo). O resultado de uma requisio
GET fica no histrico do navegador. um mtodo restrito quanto a quantidade
de caracteres que podem ser passados apenas 1024 caracteres. Utilizar esse
mtodo arriscado quando existe informaes sigilosas ou que possam alterar
um contedo SQL: Veja o que acontece quando um formulrio utiliza o mtodo
GET para envio de dados :
http://www.umsite.com.br/?cat=3&pag=2&tipo=5
FORM - POST
POST=usamos este mtodo quando criamos sistemas com acesso

restrito, utilizando SESSES. Ele tambm permite que aps o envio
dos dados o programador possa tratar esses dados ou gravar em
BD. No h restrio quanto ao tamanho de caracteres e os dados
no ficam visveis ao usurio. Nesse mtodo uma conexo paralela
aberta e os dados so passados por ela.
FORM
enctype=define como os dados devem ser codificados

quando forem submetidos. S usado com o mtodo
POST.
application/x-www-form-urlencoded - Todos os caracteres
so codificados antes de serem enviados (espaos so
convertidos em smbolos "+" , e caracteres especiais so
convertidos em valores HEX ASCII)
FORM
multipart/form-data Nenhum dos caracteres so

codificados . Este valor necessrio quando voc estiver
usando formulrios que tm um controle de upload de
arquivos.
text/plain - Os espaos so convertidos em smbolos "+" ,
mas nenhum dos caracteres especiais so codificados.
FORM
Name Define um nome ao formulrio para podermos

ter acesso via javascript, Jquery ou PHP quando
utilizamos programao.
Novalidate O formulrio no ser validado quando

submetido.
FIELDSET
Agrupa elementos relacionados em um

formulrio, e desenha um quadro em torno
destes elementos relacionados. Todos os
Browsers suportam FIELDSET.
LEGEND
Define um ttulo para os

agrupados com FIELDSET.
elementos
INPUT
Especifica um campo de entrada, onde o

usurio poder digitar dados. So
utilizados dentro do <FORM>. Um campo
pode variar, dependendo da entrada de
dados.
TYPE
Especifica o tipo de elemento a ser exibido para o

usurio. Pode ter vrios, veremos aqui apenas
alguns : button, checkbox, color, date, datetime,
datetime-local, email, file, hidden, image, month,
number, password, radio, range, reset, search,
submit, tel, text, time, url, week.
TYPE=TEXT
Insere um objeto do tipo texto.

Digite seu Nome
<input type=text name=txt_nome
width=30 maxlength=30>
TYPE=TEXT
<input type=text name=txt_nome

name = define um nome como uma varivel
width = largura da caixa em pixel
maxlenght = mximo de caracteres
TYPE=HIDDEN
Insere um objeto do tipo hidden (escondido), no visivel

ao usurio. Usamos como um controle interno.
<input type=hidden name=variavel
value=valor>
name = define um nome como uma varivel
value= o valor para varivel
T Y P E = PA S S W O R D
Insere um objeto do tipo senha.

Digite uma Senha
<input type=password name=txtsenha
T YPE=EMAIL
Insere um objeto para digitao de e-mail, que

ser validado como e-mail vlido ou no
automaticamente.
Digite seu E-Mail
<input type=email>
TYPE=RADIO
Insere um objeto do tipo radio, para opo exclusiva.

Estado Civil
<input type=radio name=civil
value=casado>Casado
<input type=radio name=civil
value=solteiro>Solteiro
TYPE=RADIO
Name = define a varivel que ir receber o valor quando a opo

for selecionada.
Value = o valor que ser guardado na varivel quando a opo for
selecionada.
CUIDADO
SE OS NAMES DOS RADIOS
FOREM IGUAIS, MAIS DE UMA
OPO PODER SER
MARCADA !!!
T YPE=C HEC KBOX
Insere um objeto do tipo checkbox, para vrias opes.

Linguagem de Programao
<input type=checkbox name=ling value=java>Java
<input type=checkbox name=ling value=vb>VB.NET
<input type=checkbox name=ling value-csharp> C#
TYPE=NUMBER
Insere um objeto para inserir nmeros.

Digite sua Idade
<input type=number>
T YPE=URL
Insere um objeto para inserir URL.

Digite seu Site
<input type=url>
TYPE=RANGE
Insere um objeto para inserir nmeros que o valor exato

no tem grande importncia.
Grau de Satisfao
<input type=range min=0 max=10>
TYPE=COLOR
Insere um objeto que ao ser clicado

abre a caixa de dilogo de seletor
de cores.
Escolha sua cor de Fundo
<input type=color>
T YPE=TEL
Insere um objeto para insero de nmero de telefone.

Celular
<input type=tel placeholder=(xx)xxxxx-xxxx">
T Y P E = DAT E
Insere um objeto para insero de data.

Data de Nascimento
<input type=date>
TYPE=TIME
Insere um objeto para insero de horas.

Hora do Nascimento
<input type=time >
TYPE=SELECT
Insere uma lista de opes.

Estado
<select name=estado>
TYPE=SELECT
Insere as opes da lista de opes.

<option
<option
<option
<option
value=rs>
value=sc>
value=pr>
value=sp>
RS
SC
PR
SP
T YPE=SEARC H
Insere um objeto para insero de texto de pesquisa.

Pesquisa
<input type=search >
T Y P E = T E X TA R E A
Insere uma rea de texto para insero de pequenos

textos.
Sugesto/Crtica/Dvidas
<textarea name="sugestao"
cols="40" rows="10"> </textarea>
Cols define o numero de colunas
Rows define o nmero de linhas
T Y P E = I M AG E
Insere um boto que ter como fundo uma figura.

<input type=image
src=flor.png>
TYPE=SUBMIT
Insere um boto que encarregado de executar a ao

do formulrio. Assim que clicamos neste boto, ele
verifica a ao do form (action) e executa.
<input type=submit
value=Enviar>
TYPE=RESET
Insere um boto que limpar todos os valores dos objetos.

<input type=reset
value=Limpar>
TYPE=BUTTON
Insere um boto, muito usado para ativar um Script.

<input type=button
value=Gravar>
E XERCCIO
Crie um formulrio de cadastro de alunos. Este

formulrio deve ter seus dados agrupados pelo
Fieldset. Use os objetos de acordo com o valor
que ir abrigar. D nome todos os objetos e
valores nos que necessitam.
O formulrio deve conter os seguintes dados :
E XERCCIO
Nome
Data de Nascimento
Hora do Nascimento
Idade
Sexo (feminino / masculino)
Curso (Informtica/Administrao / Redes / Mecatrnica)
Senha de Cadastro
E-Mail
Telefone
Site (se houver)
Grau de Satisfao com Escola
Cor Preferida

Apostila HTML

Enviado por

Dados do documento

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

Apostila HTML

Enviado por

Direitos autorais:

Formatos disponíveis

TCNICAS DE PROGRAMAO

Procure por BROWSE em

Podemos fazer no Bloco de Notas, ou usar softwares que agilizam

ASCII American Stardard Code for Information

Todo arquivo que gravado no computador tem um tipo.

W3C WORLD WIDE WEB

O W3C liderado por Tim Berners-Lee, o inventor da World Wide Web, e

W3C WORLD WIDE WEB

HyperText Markup Language Linguagem de Marcao de Hipertexto - Hipertexto so os

Quase todas as tags tm a sua correspondente de fechamento :

<html lang=pt-br> > - Indica ao Browser que sua pgina est

</head> - Indica que terminamos de colocar o cabealho

cdigo HTML. Deve estar logo no comeo da pgina.

Esta declarao contm todos os elementos HTML, mas no

Esta declarao contm todos os elementos HTML, inclui

Esta declarao igual ao Transitional, mas permite o uso de

um comando implementado no cdigo da pgina web, dentro

A tag meta suportado em todos os principais navegadores.

Metadados so dados (informaes sobre os dados)

Tags meta sempre vai dentro da seo <head>;

esta tag meta que geralmente define a descrio exibida dos

Antigamente os sites de buscas, tinham dificuldade em interpretar a

Os sites de busca evoluram e hoje desconsideram a meta keyword, uma vez

<meta name=keywords content=climtica, previso climtica,

A TAG BODY responsvel por configurar o corpo da pgina, ou seja, tudo o

BODY = Corpo o corpo da pgina o incio de tudo, S TEM UM NA SUA

BACKGROUND = Fundo uma figura de fundo que pode ser colocada na

bottommargin = margem do rodap Aqui definimos um margem a partir do

scroll = barra de rolagem Se colocarmos o valor no , a barra de rolagem ser

Quando queremos pular de pargrafo, ou seja, pular uma linha e iniciar a

Quando queremos pular de linha, ou seja, simplesmente iniciar uma nova

Para inserir imagens dentro da pgina utilizamos a seguinte tag :

alt texto alternativo

Alinha a linha para esquerda ou direita (left, right ou center)

A Significa ANCHOR - Ancora.

TARGET Destino - onde dever ser aberta a URL.

TITLE Ttulo, abre um texto, como a dica, ao apontar o mouse.

Para criar tabelas, interessante termos em mente que criamos as tabelas na

Rosinha </TD> <TD>

O marcador uma lista no numerada em HTML que

Permite numerar uma lista com nmeros Arbicos, Letras ou

IFRAME INTERNAL FRAME

Iframe insere um frame

IFRAME INTERNAL FRAME

INSERIR UMA PGINA DE ENTRADA FAZENDO PROPAGANDA DO SITE

utilizado para criar formulrios de entrada de

<form action=ao method=metodo

Action = define a ao do formulrio ao ser submetido,

GET=usamos este mtodo quando no houver alteraes no servidor, como

POST=usamos este mtodo quando criamos sistemas com acesso

enctype=define como os dados devem ser codificados

multipart/form-data Nenhum dos caracteres so

Name Define um nome ao formulrio para podermos

Novalidate O formulrio no ser validado quando

Agrupa elementos relacionados em um

Define um ttulo para os

Especifica um campo de entrada, onde o

Especifica o tipo de elemento a ser exibido para o

Insere um objeto do tipo texto.

<input type=text name=txt_nome

Insere um objeto do tipo hidden (escondido), no visivel

Insere um objeto do tipo senha.

Insere um objeto para digitao de e-mail, que

Insere um objeto do tipo radio, para opo exclusiva.