5/26/2018 00293 - Programando Em HTML
1/104
SumrioINTRODUO _________________________________ 3
EDIODEDOCUMENTOS__________________________________ 4COMANDOSDEHTML ___________________________________ 5ATRIBUTOS ____________________________________________ 5COMENTRIOS__________________________________________ 6COMPONENTES BSICOS ___________________________________ 6CRIANDOUMDOCUMENTO _________________________________ 7
HTML BSICO _________________________________ 9CABEALHOS ___________________________________________ 9PARGRAFOS__________________________________________ 12SEPARADORES _________________________________________ 15FORMATAODOTEXTO _________________________________ 17FORMATAODECARACTERES_____________________________ 17BLOCOS _____________________________________________ 22FONTE_______________________________________________ 25
LISTAS_______________________________________________ 29ANINHANDOECOMBINANDOLISTAS _________________________ 34
IMAGENS_____________________________________ 37INSERINDOIMAGENS _____________________________________ 39ATRIBUTOS ___________________________________________ 40IMAGENSDEFUNDO_____________________________________ 42
IMAGENSMAPEADAS ____________________________________ 45
5/26/2018 00293 - Programando Em HTML
2/104
LIGAES (LINKS)____________________________ 48LINKSPARAARQUIVOS __________________________________ 48LINKSPARASEESDEDOCUMENTOS _______________________ 51HIPERLINKCOMIMAGEMMAPEADA_________________________ 55
TABELAS _____________________________________ 62ANINHANDOTABELAS ___________________________________ 65MESCLANDOCLULAS___________________________________ 67ALTERANDODIMENSES__________________________________ 70IMAGEMDEFUNDO ______________________________________ 73
FRAMES ______________________________________ 75COMPOSIESCOMFRAMES______________________________ 81LIGANDOFRAMES ______________________________________ 85ENCADEANDOFRAMES___________________________________ 88
FORMULRIOS _______________________________ 91OSOBJETOSDEFORMULRIOS ____________________________ 91
INSERINDOOBJETOS ____________________________________ 93FAZENDOOFORMULRIOFUNCIONAR_______________________ 99
EXERCCIOS ________________________________ 101
5/26/2018 00293 - Programando Em HTML
3/104
Programando em HTML
Pgina: 3Celta Informtica - F: (11) 4331-1586
INTRODUO
Antes de iniciar este curso importante que voc saiba o que WorldWide Web (www), consiga operar um navegador(browser) e o que uma homepage. Porm no necessrio que voc conecte-se Internetpara poder ver as pginas que est editando.
A HTML (HyperText Markup Language) uma linguagem utilizada para aedio de documentos da Web que possui etiquetas para formatar o tex-
to e figuras que sero apresentados pelo navegador e cria ligaes entrepginas, criando o conceito de hipertexto. Ela composta por comandoscolocados entre parnteses angulares (< e >). Estes comandos sochamados de etiquetas (tags) que informam ao navegador como os tex-tos e imagens sero exibidos na pgina.
Toda pgina Web um arquivo de texto gravado com a extenso .htm(Windows) ou .html(Unix) que possui comandos HTML e est gravado
em um servidor. Quando o computador cliente solicita uma pgina, oservidor envia para ele o arquivo html que o navegador se encarregar deinterpretar e exibir a pgina solicitada.
5/26/2018 00293 - Programando Em HTML
4/104
Programando em HTML
Pgina: 4Celta Informtica - F: (11) 4331-1586
EDIO DE DOCUMENTOS
Um documento HTML pode ser criado utilizando um simples editor detextos como o Bloco de Notas do Windows ou um editor de HTML quepossui atalhos para os comandos e insere automaticamente as etique-tas, orientando na digitao dos seus elementos, e aumentando muito aprodutividade. Existem atualmente editores do tipo WYSIWYG (what yousee is what you get - o que voc v o que voc quer) que permitem aconstruo da pgina sem a necessidade de digitar ou ver o cdigo HTML,tais como o Dreamweaver e FrontPage.
Neste curso iremos utilizar o Bloco de Notas do Windows, pois o queinteressa voc se familiarizar bastante com as tags HTML e casoutilizassemos algum editor, estas tags seriam colocadas automaticamen-te prejudicando o seu aprendizado.
5/26/2018 00293 - Programando Em HTML
5/104
Programando em HTML
Pgina: 5Celta Informtica - F: (11) 4331-1586
Comandos de HTML
Como voc j sabe, um documento HTML possui tags que informamcomo a pgina ser exibida pelo navegador. A maioria dessas tags pos-suem tambm sua correspondente de fechamento:
texto formatado
Este fechamento necessrio porque estas tags servem para definir aformatao de uma poro de texto, e por isso devemos marcar ondecomea e termina o texto com a formatao especificada por ela.
Existem tambm tags chamadas vazias, pois no marcam uma regio
de texto, apenas inserem algum elemento ou formatao no documento:
Todas as tags possuem atributos que podem ser utilizados ou no, de-pendendo da formatao desejada para o texto. Eles definem algumacaracterstica especial e so colocados na etiqueta inicial.
texto formatado
As tags HTML no so sensveis caixa, ou seja, tanto faz escrev-lacom letras maisculas ou minsculas. Sendo assim, , ou so a mesma coisa.
Atributos
Um atributo define vrias propriedades para uma tag. Por exemplo, a tag texto possui o atributo COLORquedetermina qual ser a cor da font utilizada no texto.
O atributo sempre includo na tag inicial e nunca na tag final, e o seuvalor delimitado por aspas simples ou duplas. Estas aspas so opcionaisse o valor do atributo consistir somente de letras (a-z), dgitos (0-9), hfene ponto. O nome dos atributos no so sensveis a caixa mas seus valo-res podem ser.
5/26/2018 00293 - Programando Em HTML
6/104
Programando em HTML
Pgina: 6Celta Informtica - F: (11) 4331-1586
Comentrios
Todo bom programador inclui comentrios em seu cdigo para uma pos-terior manuteno feita por ele mesmo ou por outra pessoa. Estes co-mentrios no so interpretados pelo navegador, sendo teis no entendi-
mento de como o cdigo est sendo executado.Um comentrio em HTML comea com , nopodendo ser utilizados dentro do comentrio. Por exemplo:
Componentes bsicos
A estrutura bsica de um documento HTML a seguinte:
Titulo do Documento elementos opcionais textos,imagens,links
A etiqueta ... marca o incio o final do documento HTML,e entre ela existem as sees de cabealho (head) e corpo (body) dodocumento.
O cabealho delimitado por ... e contm informa-es sobre o documento e seu contedo que podem ser recuperadospor robs de busca na Internet, e no sero exibidos na pgina.
A principal informao contida no cabealho o ttulo do documento queaparece na barra de ttulo do navegador e est delimitado pela etiqueta.... Este ttulo no deve ser nem muito longo e nem
muito curto, ele deve indicar claramente o contedo da pgina. Ele pre-cisa ter algum significado para o internauta pois alm de ser exibido pe-los programas de busca, o ttulo ser listado nos favoritos do navegador(bookmark).
5/26/2018 00293 - Programando Em HTML
7/104
Programando em HTML
Pgina: 7Celta Informtica - F: (11) 4331-1586
O corpo do documento contm todas as informaes que sero exibidaspelo navegador, tais como: cabealhos, pargrafos, imagens, listas, ta-belas e links. Ele est delimitado pela etiqueta ....
Criando um documento
Para iniciar e edio de um documento, abra o Bloco de notas do Windowse digite o texto mostrado a seguir.
Salve este documento com o nome de modelo.htm, para no ter quedigitar toda estrutura bsica novamente a cada novo documento.
Aps salvar, inclua um ttulo e algum texto no corpo do documento. Salveo arquivo com o nome de primeiro.htm, utilizando a opo Salvar como...do menu Arquivo, no esquecendo de informar a extenso .htmou oarquivo ser gravado como .txt. Observe a figura.
5/26/2018 00293 - Programando Em HTML
8/104
Programando em HTML
Pgina: 8Celta Informtica - F: (11) 4331-1586
No navegador utilize o menu Arquivo> Abrir...e procure pelo arquivo
que voc acabou de salvar.
Repare na informao da barra de ttulo, no endereo e no contedo dapgina.
5/26/2018 00293 - Programando Em HTML
9/104
Programando em HTML
Pgina: 9Celta Informtica - F: (11) 4331-1586
Na caixa de lista do endereo informado o local do arquivo no computa-dor, quando esta pgina for publicada, ou seja, gravada em um servidorWeb, o endereo ser alguma coisa parecida com:
http://www.meunome.com.br/primeiro.htm
Repare que o texto na pgina apareceu sem quebra de linha apesar deter sido pressionada a tecla Enter aps a digitao da palavra pgina noBloco de notas. Isto ocorre porque o navegador no recebeu uma instru-o para quebrar a linha ou qualquer outra que modificasse o texto, eleapenas exibiu o que estava na tag .
HTML BSICO
Agora que voc aprendeu a editar, salvar como html e abrir um docu-
mento no navegador, est na hora de comear a aprender como formataro texto, inserir figuras e links e criar tabelas e frames.
CABEALHOS
Todo documento possui cabealhos que separam sees ou tpicos quefacilitam a visualizao de quem os l, permitindo um melhor acompa-
nhamento das idias expostas. O HTML possui a etiqueta que criacabealhos na rea de visualizao das pginas.
Existem seis tipos de cabealhos no HTML com formatao prpria eprontos para serem utilizados, indo de a . Sendo detamanho maior que .
5/26/2018 00293 - Programando Em HTML
10/104
Programando em HTML
Pgina: 10Celta Informtica - F: (11) 4331-1586
Faa o seguinte documento:
Que ser exibido desta forma no navegador.
5/26/2018 00293 - Programando Em HTML
11/104
Programando em HTML
Pgina: 11Celta Informtica - F: (11) 4331-1586
Os cabealhos possuem o atributo ALIGN que faz o alinhamento do texto.
ALIGN = [ left | center | right | justify ]
Defina o atributo ALIGN para as etiquetas de cabealho como mostra a
figura.
5/26/2018 00293 - Programando Em HTML
12/104
Programando em HTML
Pgina: 12Celta Informtica - F: (11) 4331-1586
PARGRAFOS
Como vimos no primeiro exemplo, o HTML no quebra ou avana linhasquando pressionamos a tecla Enter, ele s avanar uma linha aps umcomando especfico que mande ele fazer isto.
Existem duas etiquetas que permitem uma quebra de linha, so
elas:
e
. A primeira avana uma linha imediatamente aps ser en-contrada, e a segunda fora um novo pargrafo inserindo uma linha embranco separando blocos de texto.
Este comando quebra a linha em determinado ponto, dando
continuida-de ao texto em outra linha, no possuindo seu
correspondente fecha-mento (etiqueta vazia). J que o navegador
quebra linhas automatica-mente de forma a caberem em sua janela,
utilizamos o
paraformatar o texto ao nosso gosto.
Pargrafos
Etiqueta BREm outubro, 27 a 29, iremos para o nossoacampamento
na estncia de Atibaia. Sairemosdia 27 s 13 horas da sede do
clube.
No cheguem atrasados.
At l.
Como vimos, esta Tag alm de causar uma quebra da linha, tambmadiciona uma linha em branco. Ela utilizada para criar pargrafos, se-parando blocos de texto que podem ser formatados em conjunto.
5/26/2018 00293 - Programando Em HTML
13/104
Programando em HTML
Pgina: 13Celta Informtica - F: (11) 4331-1586
Esta etiqueta pode ser utilizada somente no final de um pargrafo oujuntamente com sua correspondente de fechamento (
) envolvendouma regio do texto para formatao. Como a Tag , ela tambmpossui o atributo ALIGN.O exemplo anterior ficaria da seguinte forma com o uso de
.
Pargrafos
Etiqueta PEm outubro, 27 a 29, iremos para o nossoacampamento na estncia de Atibaia. Sairemosdia 27 s 13 horas da sede do clube.
No cheguem atrasados.
At l.
5/26/2018 00293 - Programando Em HTML
14/104
Programando em HTML
Pgina: 14Celta Informtica - F: (11) 4331-1586
As duas etiquetas de quebra de linha (BR) e pargrafo (P) tambm po-dem ser combinadas:
Pargrafos
Etiqueta PEm outubro, 27 a 29, iremos para o nossoacampamento na estncia de Atibaia. Sairemosdia 27 s 13 horas da sede do clube.
No cheguem atrasados.
At l.
Repare que a etiqueta
pode estar no meio de uma linha no Bloco denotas que sua funo
continuar a mesma. Isto ocorre com outras etique-tas que podem
estar em qualquer posio no documento, desde que res-
peitada a ordem de leitura dos comandos. Mas para facilitar a vida do pro-gramador, devemos utilizar deslocamentos do texto separando e agrupan-do os diversos comandos. Este deslocamento conhecido comoedentao, e muito utilizado em outras linguagens de programao.
5/26/2018 00293 - Programando Em HTML
15/104
Programando em HTML
Pgina: 15Celta Informtica - F: (11) 4331-1586
SEPARADORES
Separadores so linhas horizontais que dividem o documento, desta-cando ttulos e separando diferentes tipos de informao .
Estas linhas podem ser usadas com os atributos de altura (SIZE), largu-ra (WIDTH), sombra (NOSHADE) e alinhamento (ALIGN)
Separadores
SeparadoresEm outubro, 27 a 29, iremos para o nossoacampamento na estncia de Atibaia. Sairemosdia 27 s 13 horas da sede do clube.No cheguem atrasados.
At l.
5/26/2018 00293 - Programando Em HTML
16/104
Programando em HTML
Pgina: 16Celta Informtica - F: (11) 4331-1586
Neste exemplo foi includa a etiqueta , como o nome j diz,centraliza o texto que estiver entre ela e sua correspondente de fecha-mento .
O atributo SIZEdo separador indicado por um valor inteiro de pixels,enquanto que o atributo WIDTHpode ser indicado tanto em pixels quanto
em porcentagem da largura da pgina.Quando um valor absoluto de pixels utilizado, o comprimento da linhapermanecer o mesmo independente da dimenso da janela do navega-dor, enquanto que ao utilizar porcentagem, este comprimento mudar deacordo com o redimensionamento do navegador. O padro para HR100% da largura.
Separadores
SeparadoresLinha de tamanho fixo
Linha de tamanho proporcional
5/26/2018 00293 - Programando Em HTML
17/104
Programando em HTML
Pgina: 17Celta Informtica - F: (11) 4331-1586
Observe nas figuras anteriores a alterao na largura da linha proporcio-nal quando a janela do navegador foi redimensionada.
FORMATAO DO TEXTO
O texto em uma pgina Web pode ser formatado como se estivssemosem um programa editor de textos, alterando a fonte ou o estilo doscaracteres apresentados. O HTML possui etiquetas que realizam estaformatao sendo necessrio utilizar em todas elas a sua correspon-dente de fechamento, indicando o incio e fim do trecho de texto a serformatado.
Formatao de Caracteres
Os comandos para formatao de texto dividem-se em elementos lgi-cose fsicos. A formatao lgica depende de como o navegador estconfigurado, garantindo uma uniformidade na apresentao de cabea-lhos, pargrafos, listas e outros elementos preconfigurados. Naformatao fsica, so especificados claramente os estilos de texto de-sejado: negrito, itlico, cor, grifado, dentre outros.
5/26/2018 00293 - Programando Em HTML
18/104
Programando em HTML
Pgina: 18Celta Informtica - F: (11) 4331-1586
Fsica
So utilizadas as seguintes etiquetas para a formatao fsica do texto:
Fonte um pouco menor texto
Fonte um pouco maior texto
Subescrito texto
Sobrescrito texto
Riscado texto
Teletipo - caracteres monoespaados texto Sublinhado texto
Itlico texto Negrito texto
FunoEtiqueta
O programa abaixo mostra o uso de alguns formatadores de texto utiliza-dos no clebre soneto de Cames.
Formatao de texto
Formatadores fsicos
Soneto - 05Amor um fogo que arde sem se
ver,
ferida que di, e no se sente;
um contentamento descontente,
dor que desatina sem doer.
um no querer mais que bem querer;
um andar solitrio entre a gente;
nunca contentar se de contente;
um cuidar que ganha em se perder.
querer estar preso por vontade;
servir a quem vence, o vencedor;
ter com quem nos mata, lealdade.
Mas como causar pode seu favor
nos coraes humanos amizade,
se to contrrio a si o mesmo Amor?
(Cames)
5/26/2018 00293 - Programando Em HTML
19/104
Programando em HTML
Pgina: 19Celta Informtica - F: (11) 4331-1586
Lgica
Esta formatao utilizada quando se deseja formatar o texto utilizandoum dos padres disponveis. Por exemplo, quando vocformata um tex-to como cabealho no especificado como este texto serapresenta-do pois toda esta definio jesta internamente programada no navega-
dor.
Indica valores que o usurio deverescreverEnfatiza o texto - negritoRepresenta a sada de um programa
Indica uma entrada via teclado
Enfatiza o texto - itlico
Descreve um termo
Indica trechos de cdigo de programa
Destaca citaes, como ttulos de revistas e filmesFunoEtiqueta
5/26/2018 00293 - Programando Em HTML
20/104
Programando em HTML
Pgina: 20Celta Informtica - F: (11) 4331-1586
Estes formatadores so utilizados da mesma forma que os formatadoresfsicos, devendo o texto que se queira formatar estar entre a etiqueta esua correspondente de fechamento:
texto .
Podemos tambm combinar os diversos comandos de formatao paradeterminado trecho do texto. Desde que observados se as etiquetasesto sendo abertas e fechadas na ordem correta evitando possveiserros na apresentao por alguns navegadores.
Correto: Texto em cdigo e negrito.
Incorreto: Texto em cdigo e negrito.
Caracteres especiais
Caracteres especiais so aqueles que no so interpretados por algunsnavegadores ou no so possveis de serem digitados pelo teclado. Pararepresentar estes caracteres, utilizamos seqncias de escape, indicadaspor trs partes:
1 - o caracter &2 - um nmero ou cadeia de caracteres3 - o caracter ;
Ex: ç= ã=
Outro uso para esse recurso quando se deseja utilizar na pgina,caracteres de uso do HTML, tais como: e &.
&&
>>
5/26/2018 00293 - Programando Em HTML
21/104
Programando em HTML
Pgina: 21Celta Informtica - F: (11) 4331-1586
Na tabela a seguir temos os caracteres mais utilizados pela lngua portu-guesa.
espao 
CaracterEntidadeCaracterEntidade
importante a utilizao destes caracteres de escape na construo desua pgina, pois garante que ela seja visualizada corretamente por qual-quer navegador no importado a lngua configurada no computador dousurio.
O exemplo seguinte ilustra o uso das seqncias de escape.
Formatao de texto
Caracteres especiaisA etiqueta utilizada para
a edio de documentos HTML.
5/26/2018 00293 - Programando Em HTML
22/104
Programando em HTML
Pgina: 22Celta Informtica - F: (11) 4331-1586
Blocos
Com o HTML podemos tambm criar blocos de texto destacando-os dorestante da pgina. As etiquetas utilizadas so as seguintes:, e .
Esta etiqueta cria um bloco de texto para endereos, identificando o au-tor do documento. Este bloco pode conter endereo para contato, e-mail,link para a pgina do webmaster e outras informaes a respeito do do-cumento. Ela geralmente colocada no final da pgina.
Address
Esta pgina foi desenvolvida por Marcos: [email protected]
5/26/2018 00293 - Programando Em HTML
23/104
Programando em HTML
Pgina: 23Celta Informtica - F: (11) 4331-1586
Blockquote destaca um bloco de texto separando-o em um novo par-grafo. Ele pode tanto aparecer em itlico quanto edentado, dependendodo navegador utilizado.
Blockquote
BLOCKQUOTEOs dias esto se passando muitorpido, por isso:
Nunca deixe para realizar as tarefas de sua
responsabilidade
o mais rpido possvel.Tenha isso em mente.
5/26/2018 00293 - Programando Em HTML
24/104
Programando em HTML
Pgina: 24Celta Informtica - F: (11) 4331-1586
Utilizamos a etiqueta PREpara inserir na pgina um texto com o mesmoformato que ele foi digitado, respeitando os espaamentos, fontes, mar-cas de tabulao e quebras de linha feitas com a tecla Enter, formatandoo texto na tela com uma fonte monoespaada como a Courier. Ela muito til para exibir textos que necessitam deste tipo de fonte como porexemplo: listagens de programas e planilhas.
No entanto, os comandos HTML colocadas entre e se-ro interpretados pelo navegador normalmente.
PrePRE
Populao brasileiraAno Total(mil)
1940 41.2361950 51.9441960 70.0701970 93.1381980 119.0021991 146.825
1996 157.069 Fonte: IBGE
5/26/2018 00293 - Programando Em HTML
25/104
Programando em HTML
Pgina: 25Celta Informtica - F: (11) 4331-1586
Fonte
A linguagem HTML possui recursos para alterar o tipo, cor e tamanho dafonte utilizada nos textos. Estes recursos so implementados com aetiqueta e seus atributos SIZE (tamanho), FACE (tipo) e COLOR
(cor).
O atributo SIZEdetermina o tamanho da fonte a ser mostrada e varia emnmeros inteiros de 1 at7, sendo o tamanho 3, definido como padro.
Fonte tamanho 3
Fonte tamanho 5
Fonte tamanho 2
O atributo SIZE tambm pode ser incrementado ou decrementado, colo-cando-se um sinal(+ ou -) antes do nmero, baseando-se no tamanho padro de fonte(SIZE=3).
Fonte tamanho 3
Fonte tamanho 5
Fonte tamanho 2Os dois exemplos anteriores apresentam o mesmo efeito de tamanhoda fonte que mostrado na prxima figura.
Com o atributo FACEalteramos o nome da fonte que sermostrada pelonavegador. Caso a fonte especificada no esteja instalada no computadordo usurio, o sistema a substituirpela fonte padro. Mas possvel evitar
esta substituio criando uma lista preferencial de fontes, onde se no forencontrada a primeira, a segunda serutilizada e assim por diante.
5/26/2018 00293 - Programando Em HTML
26/104
Programando em HTML
Pgina: 26Celta Informtica - F: (11) 4331-1586
Fonte
Meu corao desmaiapensativo,
Cismando em tua rosa predileta.
Sou teu plido amantevaporoso,
Sou teu Romeu... teu lnguido poeta!...
Sonho-te s vezes virgem... seminua...
Roubo-te um casto beijo luz da lua...
E tu s Julieta...
Castro Alves
Por ltimo temos o atributo COLORque especifica a cor do texto. A cor
escolhida utilizando-se o formato hexadecimal, RGB ou uma entre asdezesseis constantes para nome de cor.O formato hexadecimal composto de um nmero nesta base precedi-do pelo caracter #indicando a intensidade de cada cor primria (red,
5/26/2018 00293 - Programando Em HTML
27/104
Programando em HTML
Pgina: 27Celta Informtica - F: (11) 4331-1586
green e blue) na composio da cor final. Estes valores variam de 00 (0)a FF (255) para cada uma das cores.
Texto na cor violeta azulado
Para usar um dos nomes predefinidos, basta digitar o nome da cor dese-jada.
Texto em verdeTexto em verde oliva
Na tabela a seguir so mostradas os nomes das dezesseis corespredefinidas.
#00FFFFaqua#FF00FFfuchsia
#008080teal#800080purple#0000FFblue#FF0000red
#000080navy#800000maroon
#FFFF00yellow#000000white
#808000olive#808080gray
#00FF00lime#C0C0C0silver
#008000green#000000black
HexadecimalCorHexadecimalCor
No exemplo a seguir mostrado o uso do atributo COLOR, e repare queestsendo usado um encadeamento da etiqueta FONT. A primeira eti-
queta determina a fonte utilizada e o tamanho do texto e as outras deter-minam a cor de cada palavra.
Fonte Cores
Olhe abaixo e diga as CORES, no as palavras.
AMARELO AZUL 
5/26/2018 00293 - Programando Em HTML
28/104
Programando em HTML
Pgina: 28Celta Informtica - F: (11) 4331-1586
LARANJA
PRETO
 CINZA VERDE
VERDE
 AZUL VERMELHO
ROXO
LARANJA
AMARELO
Vocencontrou dificuldade pois, o ladodireito do crebro tenta dizer a cor, mas o
lado esquerdo insiste em ler a palavra.
Na listagem anterior foi utilizado o caracter especial  para inserirum espao a mais entre algumas palavras. A etiqueta FONT inclui umespao automaticamente e caso vocdeseje incluir mais espaos embranco, necessrio utilizar esse caracter especial. Ele tambm tildurante a digitao de um texto qualquer, pois o HTML aceita somenteum espao entre palavras, mesmo que existam 20 espaos no cdigo,na pgina sermostrado apenas um.
5/26/2018 00293 - Programando Em HTML
29/104
Programando em HTML
Pgina: 29Celta Informtica - F: (11) 4331-1586
Primeiro Segundo Terceiro
Primeiro    Segundo    Terceiro
LISTAS
Em algumas pginas til colocar listas formatadas com itens para enu-merar informaes. Elas podem apresentar resumos do contedo dapgina ou funcionarem como ponto de ligao entre as diversas informa-
es do site (links). O cdigo HTML suporta os seguintes tipos de listas:
Listas no ordenadas, que acrescentando uma marca no incio de cadalinha do texto.
Listas ordenadas, que enumeram cada item com nmeros ou letras.
Listas de glossrio, utilizadas para descrever cada item listado.
Listas no ordenadas
Criamos uma lista no ordenada com duas etiquetas, uma para iniciar alista (UL) e outra para indicar cada linha desta lista (LI). O comando e seu correspondente de fechamento devem envolver to-dos os itens da lista.
5/26/2018 00293 - Programando Em HTML
30/104
Programando em HTML
Pgina: 30Celta Informtica - F: (11) 4331-1586
Listas
Pases da Amrica do Sul
Argentina BolviaBrasil ChileColmbia EquadorGuiana ParaguaiPeru SurinameUruguai Venezuela
possvel modificar o marcador utilizado neste tipo de lista alterando oatributo TYPEda etiqueta . Existem trs tipos de marcadores: circle,disce square.
Argentina Bolvia Brasil Chile Colmbia Equador
5/26/2018 00293 - Programando Em HTML
31/104
Programando em HTML
Pgina: 31Celta Informtica - F: (11) 4331-1586
Podemos tambm alterar o marcador de cada linha individualmente,modificando o atributo TYPE da etiqueta .
Peru
Suriname Uruguai
Lista ordenadas
A lista ordenada utilizada quando desejamos enumerar os itens apre-sentados. Ela criada com a tag e sua correspondente de fecha-mento , mais a tag para cada item desta lista, da mesmaforma que na Lista no ordenada.
Listas
Pases da Amrica do Sul com maior rea.
BrasilArgentinaPeru
5/26/2018 00293 - Programando Em HTML
32/104
Programando em HTML
Pgina: 32Celta Informtica - F: (11) 4331-1586
A etiqueta possui dois atributos: TYPEe START. TYPE determinao estilo de nmero que sermostrado pelo navegador, e possui os se-guintes valores:
1 - nmero decimal: 1, 2, 3, 4, 5, ...
a - alfabeto minsculo: a, b, c, d, e, ...
A - alfabeto maisculo: A, B, C, D, E, ...
i - nmeros romanos minsculos: i, ii, iii, iv, v, ...
I - nmeros romanos maisculos: I, II, III, IV, V, ...
O atributo START indica qual sero ponto de partida da lista.
America do Sul
Pases mais populosos
Brasil
ColmbiaPases menos populosos
Quiana
Suriname
5/26/2018 00293 - Programando Em HTML
33/104
Programando em HTML
Pgina: 33Celta Informtica - F: (11) 4331-1586
Lista de glossrio
Esta lista tambm chamadas Lista de definio, pois permite incluiruma descrio de cada item listado. A etiqueta marca este tipo delista, que possui mais duas outras etiquetas para indicar o termo a serdefinido () e sua definio ().
IBGEInstituto Brasileiro de Geografia eEstatstica
INSSInstituto Nacional do Seguro Social
EMBRAPAEmpresa Brasileira de Pesquisa Agropecuria
Podemos utilizar este tipo de lista tambm para organizar a pgina, poisele permite uma tabulao bem prtica do texto.
5/26/2018 00293 - Programando Em HTML
34/104
Programando em HTML
Pgina: 34Celta Informtica - F: (11) 4331-1586
Regies, estados e maiorescidadesSul
Rio Grande do SulPorto Alegre
GravataSanta Catarina
BlumenauJoinvile
ParanCuritiba
LondrinaSudesteCentro-oeste
Como exerccio, complete a lista com cidades e estados do sudeste ecentro-oeste brasileiros.
Aninhando e combinando listas
Podemos colocar uma lista dentro de outra (aninhar) de mesmo tipo oude tipos diferentes, criando uma estrutura hierrquica de itens e subitens.
No aninhamento de listas no ordenadas, o marcador de linha seralte-rado automaticamente a cada sub-lista e tambm cada uma destas serdeslocada mais para direita. Faa o seguinte exemplo:
5/26/2018 00293 - Programando Em HTML
35/104
Programando em HTML
Pgina: 35Celta Informtica - F: (11) 4331-1586
Aninhamento de listas no ordenadasPrimeiro item principal
Primeiro item secundrio
Segundo item secundrioItem da lista de terceiro nvel
Segundo item principalTerceiro item principal
O aninhamento de listas ordenadas funciona da mesma forma para aslistas no ordenadas, bastando apenas trocar a etiqueta pela .Faa esta troca na listagem anterior e veja o resultado dos dois casos nafigura a seguir.
No aninhamento com os dois tipos de listas cria-se uma estrutura mais
elegante e complicada, sendo necessrio tomar um certo cuidado nomomento de abrir e fechar cada uma das etiquetas de lista. Por isso importante contar as etiquetas de abertura e sua correspondente de fe-chamento para a listas ficarem conforme vocdeseja.
Lista de filiais por ordem de rentabilidade
So PauloSanto AndrSo Paulo
5/26/2018 00293 - Programando Em HTML
36/104
Programando em HTML
Pgina: 36Celta Informtica - F: (11) 4331-1586
Santo AmaroMoca
Votuporanga
Mato-Grosso
CuiabRondonpolis
GoisGoinia
No cdigo desse exemplo usamos os atributos START da lista ordenadae VALUEda etiqueta para dar uma continuidade classificao dasfiliais na pgina. O atributo VALUE funciona para as linhas da lista orde-nada da mesma forma que START.
A etiqueta possui tambm o atributo TYPEque especifica o tipo de
marcadorou de nmeroque serutilizado, dependendo se ela estemuma lista no ordenada ou ordenada. Faa as seguintes alteraes eveja o resultado:
Santo AmaroMoca..
.GoisGoinia
5/26/2018 00293 - Programando Em HTML
37/104
Programando em HTML
Pgina: 37Celta Informtica - F: (11) 4331-1586
IMAGENS
Todo bom site possui imagens integradas ao texto. Estas imagens aju-dam a tornar as pginas da Internet mais atraentes para o usurio, moti-vando ainda mais suas visitas.
Mas ao mesmo tempo que ajudam, as imagens podem atrapalhar sevocno escolher adequadamente o seu tamanho de arquivo e em quetipo elas sero salvas. Pois para arquivos de imagem muito grandes, apgina demorarpara ser visualizada, desmotivando com isso o usurioque logo pularpara outro site. Por outro lado se esta mesma imagemfor salva em um formato incorreto ela ficardeformada e feia, apesar deo arquivo ser pequeno. Devido a isto tudo, importante vocconheceralgum programa que trabalhe e salve suas imagens nos formatos acei-tos pela WEB, tais como o Macromedia Fireworks e Adobe Photoshop.
Os formatos aceitos pelos navegadores para arquivos de imagens, com-primem estas a fim de diminuir seu tamanho e tempo de carregamento,so eles : GIF,JPGe PNG.
GIF- o formato utilizado para imagens com poucas cores e altos con-trastes sem perda durante a compresso (lossless), sendo ideal parailustraes, grficos e figuras ou imagens de textos com at256 cores.Estes arquivos podem ser entrelaados permitindo uma visualizaogradativa da imagem indo de uma menor para uma maior qualidade du-rante o carregamento. O formato GIF permite tambm fundos transpa-rentes que causam a impresso de uma integrao maior pgina semdar a aparncia de uma caixa. possvel criar tambm pequenas anima-es utilizando diversas imagens GIF juntamente com um programa quesobrepe estas imagens a tempo regulares e salvas em um nico arqui-vo GIF, formando o que conhecemos como GIF animado.
JPEG- Este formato utilizado para conter imagens que possuem mui-tas cores e uma transio suave entre elas (baixo contraste), como porexemplo fotografias e arte digitalizada. Ele permite vrios graus decompactao com perda (lossey) da imagem, sendo uma maiorcompactao responsvel por uma menor qualidade desta. Este forma-to no muito bom para figuras com poucas cores pois durante acompactao o programa fora uma transio gradativa entre as coresdando ao final a impresso de figuras embaadas.
5/26/2018 00293 - Programando Em HTML
38/104
Programando em HTML
Pgina: 38Celta Informtica - F: (11) 4331-1586
PNG - Ele o mais novo formato para arquivos grficos utilizados naWEB, suportado somente pelos navegadores da gerao 4 em diante,no sendo visualizado pelos navegadores mais antigos. Os arquivos PNGcombinam as melhores caractersticas do GIF e JPEG, pois permitemtransparncias e podem conter fotografias exibidas com milhes de co-res preservando tambm as cores slidas e ilustraes com texto,compactando as imagens sem perda. Geralmente os arquivos PNG so
maiores que os JPEG da mesma imagem sendo recomendados somentepara imagens com baixo contraste (tons contnuos) que contm transpa-rncias.
Quando colocamos imagens em uma pgina devemos tomar certos cui-dados quanto ao tempo de carga desta pgina. Observando que quantomaior a dimenso e profundidade de cores de uma figura maior serotamanho do seu arquivo mesmo com o uso de um dos trs formatos
descritos acima, tendo sempre como parmetro que uma figura com15Kb leva aproximadamente 6 segundos para ser carregada com ummodem de 28,8Kbps.
A resoluo da imagem outro parmetro importante pois os monitoresconseguem exibir somente figuras com aproximadamente 72 pixels porpolegada, no adiantando portanto, ter uma imagem com 600x600 pon-tos por polegada de resoluo, fazendo apenas o arquivo ficar enorme
sem nenhum benefcio prtico.
5/26/2018 00293 - Programando Em HTML
39/104
Programando em HTML
Pgina: 39Celta Informtica - F: (11) 4331-1586
INSERINDO IMAGENS
Usamos o elemento IMGpara inserir imagens na pgina na linha de tex-to. Este elemento possui obrigatoriamente o atributo SRCque contm alocalizao da imagem, que pode estar tanto no mesmo diretrio quanto
em qualquer lugar da WEB. O conjunto destes dois elementos formam aetiqueta indicando uma imagem nocdigo HTML.
O URLo local da Internet onde a imagem est- seu endereo, porexemplo: http://www.america.com.br/brasil.gif. Quando a imagem esti-ver no mesmo diretrio que o arquivo HTML, no necessrio indicartodo o endereo bastando apenas informar o nome.
No exemplo a seguir utilizado o comando IMG para exibir as bandeirasde alguns pases. Repare que estas imagens so tratadas pelo navega-dor como se fossem caracteres de texto.
Imagens BANDEIRAS   
5/26/2018 00293 - Programando Em HTML
40/104
Programando em HTML
Pgina: 40Celta Informtica - F: (11) 4331-1586
ATRIBUTOS
Alm do atributo SRC, o elemento IMG possui outros atributos opcionaisque determinam o tamanho da imagem, seu alinhamento, como seraborda e o espao deixado entre a imagem e outros elementos da pgina.
ALT- Contm o texto que aparece quando o mouse passado sobre aimagem, ou quando ela no carregada pelo navegador.
ALIGN- Determina o alinhamento da imagem em relao ao texto, e slaterais da janela do navegador. Podendo ser: top, middle, bottom, left eright.
USEMAP- utilizado para indicar que a imagem um mapa de ima-gem, e que cada regio dela serum link diferente.
WIDTH- Este atributo determina a largura da imagem em pixel, indepen-dente de seu tamanho original. A imagem sersempre forada a caberna dimenso especificada, se WIDTH for menor que a largura da ima-gem, ela sercomprimida e vice-versa. Ele pode ser dado tanto em valorabsoluto quanto em porcentagem do tamanho da janela.
HEIGHT - Determina a altura da imagem e funciona semelhante aoWIDTH.
BORDER- Especifica a largura da borda da imagem.
VSPACEe HSPACE- Determinam os espaos em branco deixados en-tre a figura e os outros elementos da pgina.
Imagens
BANDEIRASEsta a bandeira do Brasil:.Ela foi criada para a repblica.
A bandeira da Guiana( ) pouco conhecida por ns.
5/26/2018 00293 - Programando Em HTML
41/104
Programando em HTML
Pgina: 41Celta Informtica - F: (11) 4331-1586
O atributo ALIGN alinha a imagem com relao ao texto utilizando osparmetros top, middle e bottom. Os parmetros left e right alinham aimagem em relao borda da janela. E caso no seja especificado umvalor para o atributo ALIGN, o padro ser: ALIGN=bottom.
Neste prximo exemplo so utilizados outros parmetros de ALIGN e
tambm para borda e espaamentos. Salve-o com o nome deguiana.htm.
Imagens
GUIANA
Antigamente uma colnia holandesa, que passa asercontrolada pelos ingleses em 1815 aps grandesdisputas. Rivalidades entrenegros escravos trazidos pelos holandeses,
indianos trazidos pelos ingleses e indgenasnativos passam a fazer parte do contexto
nacional. Aps a independncia em 1966, do inicio
discusses com a Venezuela e o Suriname a respeitode divisas territoriais, que so resolvidasdiplomaticamente.
5/26/2018 00293 - Programando Em HTML
42/104
Programando em HTML
Pgina: 42Celta Informtica - F: (11) 4331-1586
Experimente alterar ALIGN=right e os parmetros de VSPACE, HSPACEe BORDER. Altere tambm o alinhamento do pargrafo:
Antigamente uma colnia ...diplomaticamente.
IMAGENS DE FUNDO
A imagem de fundo ou segundo plano elimina o fundo branco ou cinza,trazendo mais vida s pginas. Ela deve ter o formato de um dos tipospermitidos na Web e no ser muito grande, evitando uma demora nocarregamento da pgina.As imagens utilizadas como fundo (background) podem ser de dimen-ses pequenas ou do tamanho total da tela. Quando for pequena, o nave-gador irrepetir esta imagem diversas vezes atcompletar toda a rea
5/26/2018 00293 - Programando Em HTML
43/104
Programando em HTML
Pgina: 43Celta Informtica - F: (11) 4331-1586
visvel da pgina, enquanto que a de dimenses maiores no serrepe-tida, desde que ela seja maior ou igual a rea visvel da janela do navega-dor.
Mesmo ocupando toda a rea visvel, as diversas cpias das figuras pe-
quenas sero transmitidas pelo servidor apenas uma nica vez, ficandoo navegador responsvel pela sua repetio.
Como exemplo vamos utilizar uma figura pequena chamada fundo1.gif euma maior com o nome de fundo2.jpg.
A figura de fundo adicionada ao cdigo HTML utilizando-se o parmetroBACKGROUNDda etiqueta BODYjuntamente com o URL da imagemdesejada.
Aproveite o exerccio anterior incluindo nele a figura fundo1.gif como fun-do.
Imagens
GUIANA
5/26/2018 00293 - Programando Em HTML
44/104
Programando em HTML
Pgina: 44Celta Informtica - F: (11) 4331-1586
Utilizando os atributos de BODY podemos definir uma imagem de fundo,como vimos, alterar a cor de fundo do documento e mudar a cor do textoe dos links. As cores so atribudas da mesma forma que feita paramudar a cor da fonte, podendo usar tanto o padro RGB quanto as vari-veis predefinidas.
Os atributos de BODY so:
BACKGROUND- URL da figura de fundo do documentoBGCOLOR- cor de fundo do documentoTEXT- cor do texto, padro=pretoLINK- cor do link, padro=azulVLINK- cor do link visitado, padro=vermelho-prpuraALINK- cor do link ativo
No exemplo a seguir, a figura fundo2.jpg o fundo com o texto em branco(white). Repare que a cor do fundo foi alterada para azul, no caso de oservidor no encontrar a figura de fundo, tornando o texto ilegvel em umfundo padro branco. E as cores dos links no foram alteradas, e nem bom fazer isso, pois os usurios jesto acostumados com as corespadro.
5/26/2018 00293 - Programando Em HTML
45/104
Programando em HTML
Pgina: 45Celta Informtica - F: (11) 4331-1586
Imagens
GUIANA
IMAGENS MAPEADAS
As imagens mapeadas possuem regies delimitadas pelo cdigo HTMLque servem como referncia ao acesso outros documentos a partir de
um clique sobre cada regio.
Existem trs tipos de delimitao de reas: retangular, circular e poligonal.Para delimitar cada regio, devemos informar um grupo de coordenadasque depende do formato de cada regio escolhida. So elas:
Retngulo= esquerda, topo, direita, base (x1, y
1, x
2, y
2)
Polgono= x1, y
1, x
2, y
2, ..., x
N,y
N(x
1, y
1, x
2, y
2, x
3, y
3)
Crculo= centroX, centroY, raio (x1, y1,r)
5/26/2018 00293 - Programando Em HTML
46/104
Programando em HTML
Pgina: 46Celta Informtica - F: (11) 4331-1586
Como vimos anteriormente, a Tag IMGpossui o atributo USEMAPindi-cando que a imagem um mapa e qual o nome do mapa de coordena-das ela deverutilizar.
O mapa definido pela Tag que con-tm uma outra Tag responsvel pelas definies de cada regio e suas
coordenadas chamada AREA.
A seguir so apresentados as principais atributos da Tag AREA:
SHAPE - Determina a forma geomtrica da rea, podendo ser: rect,circle, polye default. Default utilizada para indicar o restante da ima-gem.
COORDS- So as coordenadas de cada regio.
HREF - Contm o URL que sersolicitado quando o usurio der umclique na regio delimitada.ALT- Texto alternativo que aparece, caso a figura no possa ser exibidaou quando o ponteiro do mouse ficar parado por alguns instantes sobre aregio.
Faa o exemplo a seguir, utilizando a figura mapa_robo.gifcomo ummapa chamado mapa:
Mapas
Figura mapeada
5/26/2018 00293 - Programando Em HTML
47/104
Programando em HTML
Pgina: 47Celta Informtica - F: (11) 4331-1586
ALT=nariz>
As coordenadas dessa figura podem ser obtidas atravs do Photoshop ouFireworks, posicionando-se o ponteiro do mouse sobre os vrtices e ano-tando suas coordenadas.
Mais a frente, veremos uma figura mapeada com ligaes para diversaspginas, que sercriada com um programa especfico para mapear figuras.
5/26/2018 00293 - Programando Em HTML
48/104
Programando em HTML
Pgina: 48Celta Informtica - F: (11) 4331-1586
LIGAES (LINKS)
Os documentos apresentados na Internet possuem o conceito hipertexto,que so pginas a partir das quais podemos acessar qualquer outra p-gina, ou trechos, no importando em que local da Internet ela esteja. O
uso do hipertexto tambm facilita a edio de documentos longos, pois ousurio pode facilmente ir de um ponto ao outro, acessando tpicos ousees com apenas um clique.
Essas ligaes entre documentos HTML so chamadas de hypertextlinksou hiperlinks (ligao de hipermdia) ou simplesmente links. Queso ligaes entre dois pontos, a fonte e o destino.
A fonte de uma hiperligao comumente chamada apenas de link, queo navegador destaca geralmente em azul e sublinhado, indicando queso ligaes de hipertexto. Este linkpode ser qualquer texto ou imagemque ao ser clicado levaro usurio ato destino.
O destino ou ncoraum ponto de referncia de um documento ouendereo que seracessado por um linkquando o usurio der um cliquenele e pode ser de qualquer formato de mdia eletrnica (arquivo de texto,imagem, vdeo, HTML e outros). Existem ncoras para arquivos e paratrechos de documentos.
LINKS PARA ARQUIVOS
ncoras locais so aquelas que esto no mesmo site do link que aschama, ou seja, esto no mesmo diretrio ou em subdiretrios do diretrioonde esto documento principal.
Para construir um link utilizamos a Tag , e seus principais parmetros:
HREF- Contm o URL do documento de destino - o arquivo eletrnico a seracessado.
NAME- Determina o nome do destino a ser acessado por um link - ncora.
link ou; ncora
5/26/2018 00293 - Programando Em HTML
49/104
Programando em HTML
Pgina: 49Celta Informtica - F: (11) 4331-1586
Vamos agora criar um documento HTML que possui um link para a pgi-na guiana.hmt construda anteriormente.
Pases
PasesA Guiana foi colonizadapelos ingleses.
Caso o arquivo desejado esteja em um diretrio abaixo ou acima, utiliza-mos o mesmo esquema de caminhos parecidos com o DOS, conside-rando o diretrio atual para iniciar as buscas. Suponha a seguinte rvorede pastas:
Se a pgina que estiver na pasta paisescontm um link para uma ima-gemda subpasta america, este link deverter a seguinte sintaxe:
texto
Caso uma pgina na pasta americatenha um link para uma imagem daEuropa, necessrio subir um nvel com ../e depois descer atimagens:
texto
5/26/2018 00293 - Programando Em HTML
50/104
Programando em HTML
Pgina: 50Celta Informtica - F: (11) 4331-1586
E para subir dois nveis e descer um, se a imagem estiver na pastasimbolos:
texto
Os caminhos para os links criados anteriormente so chamados Links
relativos, pois informam a localizao completa do arquivo desejadotendo apenas como base o diretrio da arquivo ativo. Os links podemconter tambm o caminho completo do arquivo, quando so chamadosLinks absolutos, teis quando tem-se a certeza de que o arquivo dedestino no tersua localizao modificada.
Um exemplo de Link absoluto seria:
Universidade
No parmetro HREF podemos utilizar outros tipos de URL da Internet,tais como o ftp, gopherou um URL para o correio eletrnico, que ao seracionado pelo usurio, abre uma nova mensagem no programa de cor-reio eletrnico do seu sistema, com o destinatrio determinado pelo link.Por exemplo:
Univ Fed do RioGrande do SulDownload
NetscapeMeunome
No link para o correio eletrnico podemos incluir um textos automatica-mente, no campo assunto ou um texto padro.
Para incluir um assunto faa o seguinte:
Convite
E inclua um texto padro na mensagem, acrescentando &BODY=e o
texto, da seguinte forma:Convite
5/26/2018 00293 - Programando Em HTML
51/104
Programando em HTML
Pgina: 51Celta Informtica - F: (11) 4331-1586
LINKS PARA SEES DE DOCUMENTOS
Alm de acessar arquivos completos atravs de um link, podemos tam-bm acessar sees especficas do documento. Este recurso permiteuma navegao mais rpida em documentos longos, pois atravs do
sumrio, podemos ir direto ao assunto desejado.
Primeiro devemos criar os links e depois nomear um trecho do docu-mento ou imagem como ncora. Siga o exemplo:
Pases
Pases
ArgentinaBrasilGuiana
Argentina
A Argentina um dos pases que fazem fronteiracom o
Brasil.
Voltar
Brasil
O Brasil o maior pas da Amrica do sul.
Voltar
Guiana
Athoje a Guiana ainda apresenta problemas
defronteiras.
Voltar
5/26/2018 00293 - Programando Em HTML
52/104
Programando em HTML
Pgina: 52Celta Informtica - F: (11) 4331-1586
Como dito anteriormente, as imagens tambm podem ser links da mes-mo forma que o texto, servindo tanto como origem quanto destino de um
hiperlink.
Altere o ltimo exerccio eliminando a lista inicial para formar outra comcones antes do nome de cada pas, que levaro o usurio para umaseo com a bandeira do pas correspondente.
Pases
PasesArgentina
Brasil
Guiana
5/26/2018 00293 - Programando Em HTML
53/104
Programando em HTML
Pgina: 53Celta Informtica - F: (11) 4331-1586
Argentina
A Argentina um dos pases que fazem fronteiracom o
Brasil.
Voltar
Brasil
O Brasil o maior pas da Amrica do Sul.
Voltar
Guiana
Athoje a Guiana ainda apresenta problemas
defronteiras.
Voltar
5/26/2018 00293 - Programando Em HTML
54/104
Programando em HTML
Pgina: 54Celta Informtica - F: (11) 4331-1586
Repare que quando a imagem um link, ela envolvida por uma moldurada mesma cor que um link de texto.
Tambm pode existir hiperlink ligando um documento e uma seo deoutro. Vamos supor que no exerccio anterior, os textos sobre os pases
estivessem em outro documento HTML, para acessarmos uma das se-es deste segundo documento necessitaramos construir um hiperlinkcom o atributo HREF contendo o nome do arquivo e sua respectiva se-o:
Divida o exerccio anterior em dois arquivo HTML, um deles scom os
nomes dos pases, chamado: index.htm, e o outro com o restante, cha-mado: texto.htm. Faa as alteraes listadas a seguir.
index.htmPases
Pases
Argentina
Brasil
Guiana
texto.htmTexto
Argentina
A Argentina um dos pases que fazem fronteira
com o Brasil.
Voltar
5/26/2018 00293 - Programando Em HTML
55/104
Programando em HTML
Pgina: 55Celta Informtica - F: (11) 4331-1586
Brasil
O Brasil o maior pas da Amrica do Sul.
Voltar
Guiana
Athoje a Guiana ainda apresenta problemas
defronteiras.
Voltar
HIPERLINK COM IMAGEM MAPEADA
A imagem mapeada tambm pode ser um link, tendo cada uma de suasregies associada a uma determinada ncora, que pode estar tanto nomesmo documento quanto em qualquer outro lugar na Internet.
No tpico referente imagens, construmos uma imagem mapeada ma-nualmente sem o uso de um programa especfico para isso. Mas destavez iremos utilizar um programa chamado Map This.
O Map Thisum programa freeware que vocencontra no endereoabaixo, ou em algum site de busca.
http://xoom.com/helpcenter/mapthis/mainmenu
Esse programa faz somente o mapa da figura no realizando qualquermodificao nela. Aps a abertura do programa, clique no menu File>>Newe escolha a figura que servircomo plano de fundo do mapa.
5/26/2018 00293 - Programando Em HTML
56/104
Programando em HTML
Pgina: 56Celta Informtica - F: (11) 4331-1586
Como exemplo escolha a figura mapa_robo.gifutilizada anteriormentecomo modelo de mapa.
Esta programa possui botes na barra de ferramentas associados aosparmetros do atributo SHAPEda tag AREAe outros botes operacionaisque so os seguintes:
- Usado para criar reas retangulares no mapa.
- Cria reas circulares no mapa.
- Usado para criar reas no uniformes que possuem vrios vrti-
ces.
- A Arrow usada para selecionar, mover, editar e redimensionar
reas do mapa.
- Edita as informao da rea selecionada.
- Apaga a rea selecionada.
5/26/2018 00293 - Programando Em HTML
57/104
Programando em HTML
Pgina: 57Celta Informtica - F: (11) 4331-1586
Para demarcar um retngulo (RECT), clique no boto especfico e arras-te o ponteiro do canto superior esquerdo ato canto inferior direito darea que deseja demarcar. No exemplo, o rosto do rob.
A rea circular (CIRCLE) feita arrastando o ponteiro a partir do centroda regio a ser demarcando atsua periferia.
Um polgono (POLY) demarcado com um clique em cada um dos seusvrtices, fechando ele com um duplo-clique no ltimo vrtice.
Demarque todas as reas do robcomo mostra a figura abaixo. Sendoque o retngulo deverser feito primeiro, pois seno o usurio no teracesso aos crculos que estaro sobrepostos.
5/26/2018 00293 - Programando Em HTML
58/104
Programando em HTML
Pgina: 58Celta Informtica - F: (11) 4331-1586
Aps demarcar todas reas, clique no boto seta da barra de ferramen-tas e clique-direito em um dos crculos, escolhendo a opo Edit AreaInfodo pop menu.
Na caixa de dilogo Area Setting, determine o URL que serchamado quan-
do for dado um clique nesta rea. E na caixa de texto Internal commentabout this area, escreva o texto alternativo mostrado quando o ponteiroficar sobre a rea ou se a figura no for carregada pelo navegador.
No exemplo iremos construir quatro links, para os seguintes locais: duaspginas, uma figura e uma ncora na mesma pgina. Siga a tabela abai-xo para definir os parmetros de cada uma das reas:
Rostorosto.htmRetngulo
Cabelocabelo.jpgPolgonoNariz#narizPolgono
Olhoolho.htmCrculosComentrioURLObjeto
Aps estas definies Map This nos oferece a possibilidade de testar omapa construdo, onde ao passar o ponteiro sobre uma rea, a URL as-sociada serexibida na barra de status.
A partir do menu Goodies>> Test Map...abra a janela de teste verifi-cando se todas as reas esto corretas e quando estiver acabado o tes-te, clique no boto Done. Caso alguma rea no esteja de acordo comos seus propsitos, basta selecion-la e editar arrastando um dos seuspontos de delimitao ou ento apag-la para fazer uma nova rea.
5/26/2018 00293 - Programando Em HTML
59/104
Programando em HTML
Pgina: 59Celta Informtica - F: (11) 4331-1586
Quando o mapa estiver do seu gosto, clique no menu File>> Savee na
caixa de dilogo Setting for this Mapfiledo nome cabeca_roboparao mapa, escreva seu nome como autor e na caixa de texto Default URLdigite #forapara ncora quando o usurio clicar em uma regio nomapeada da figura.
Salve o mapa com o nome de cara_robo.htme o formato (File Format)HTML. Feche o Map This e abra o arquivo cara_robo.htm com o seueditor de HTML ou com o Bloco de Notas do Windows. Este arquivo deve
estar parecido com a listagem mostrada a seguir.
5/26/2018 00293 - Programando Em HTML
60/104
Programando em HTML
Pgina: 60Celta Informtica - F: (11) 4331-1586
COORDS=14,22,26,3,45,12,57,3,76,12,93,3,115, 15,134,2,146,23,14,22,14,22" HREF=cabelo.jpg ALT=Cabelo>
Mas observe que o Map This fez somente o mapa para ns. Agora paratornar este mapa funcional, precisamos indicar qual a figura de base,
como fizemos anteriormente no tpico de figuras, e completar o cdigopara uma pgina completa.
Cabea do rob
5/26/2018 00293 - Programando Em HTML
61/104
Programando em HTML
Pgina: 61Celta Informtica - F: (11) 4331-1586
HREF=#nariz ALT=Nariz>
5/26/2018 00293 - Programando Em HTML
62/104
Programando em HTML
Pgina: 62Celta Informtica - F: (11) 4331-1586
TABELAS
As tabelas so utilizadas para controlar vrios aspectos da formataode uma pgina, organizando informaes atravs de linhas e colunas.Com elas podemos criar layouts de pginas utilizando-as para demarcar
regies onde sero colocados textos e figuras.
Uma tabela construda com a tag e que marcamo seu incio e fim. E pelas tags e que informam onde come-am as linhas e colunas.
A tabela construda linha a linha com a tag indicando o incio deuma linha. E para cada coluna nesta linha, utilizamos a tag , for-mando com isso uma clula.
Na listagem a seguir temos o exemplo de uma tabela simples com qua-tro linhas e trs colunas. Digite este cdigo complementando-o com oselementos bsicos de uma pgina HTML.
PasPopulaorea
Argentina34.0002.780
Brasil157.0708.547
5/26/2018 00293 - Programando Em HTML
63/104
Programando em HTML
Pgina: 63Celta Informtica - F: (11) 4331-1586
Colmbia35.7001.140
A tag TABLE possui os atributos BORDER, que determina a espessura
das bordas da tabela em pixel, e ALIGN, que informa a posio de exibi-o da tabela no navegador.
As tags TD e TR possuem dois atributos que determinam o alinhamentodo texto para toda a linha (TR) ou somente para determinada clula (TD).Um deles, o ALIGNinforma o alinhamento horizontal e o VALIGNdeter-mina o alinhamento vertical.
BORDER= pixel
ALIGN= [ left | center | right ] (valores para a tag TR)
ALIGN= [ left | center | right | justify ] (valores para a tag TD)
VALIGN=[ top | middle | bottom ]
Quando o atributo BORDER informado sem nenhum valor, o navega-dor constri a tabela com borda igual a um pixel.
Altere o cdigo da pgina anterior implementando os recursos de borda ealinhamento. No prximo exemplo temos tambm como novidade a tag que utilizada para construir clulas da mesma forma que a tag, informando que a clula um ttulo, centralizando e colocandonegrito em seu contedo.
5/26/2018 00293 - Programando Em HTML
64/104
Programando em HTML
Pgina: 64Celta Informtica - F: (11) 4331-1586
PasPopulaorea
Argentina
34.0002.780
Brasil
157.0708.547
Colmbia35.7001.140
5/26/2018 00293 - Programando Em HTML
65/104
Programando em HTML
Pgina: 65Celta Informtica - F: (11) 4331-1586
Uma clula pode conter texto, figuras, figuras mapeadas e qualquer ou-tro objeto permitido em uma pgina HTML. Para inserir uma imagem naclula, basta utilizar a tag IMG logo aps a tag TD.
ANINHANDO TABELAS
As tabelas tambm podem ser aninhadas, contendo uma tabela dentrode outra e assim sucessivamente. Fazemos isso colocando a definiode uma tabela dentro de uma clula.
contedo da segunda tabela
contedo da terceira tabela
Inclua mais algumas linhas no exemplo anterior, para colocar a nossaprimeira tabela dentro de uma tabela maior sem bordas, contendo umaclula com uma imagem.
Pas
5/26/2018 00293 - Programando Em HTML
66/104
Programando em HTML
Pgina: 66Celta Informtica - F: (11) 4331-1586
Populaorea
Argentina
34.0002.780
Brasil
157.0708.547
Colmbia35.700
1.140
Enquanto construmos tabelas aninhadas, muito importante observar-mos a abertura e fechamento de cada uma delas para uma perfeita
visualizao. E tambm prestar bastante ateno quantidade de colu-nas de cada tabela, pois para cada linha teremos que ter o mesmo n-mero de colunas ou clulas que nas outras linhas da mesma tabela.
5/26/2018 00293 - Programando Em HTML
67/104
Programando em HTML
Pgina: 67Celta Informtica - F: (11) 4331-1586
MESCLANDO CLULAS
Em uma tabela HTML podemos mesclar clulas umas com as outras damesma forma que no editor de texto. As clulas da tabela so mescla-dos quando usamos os atributos ROWSPANe COLSPANdas tags TD e
TH.
ROWSPAN= nmero
COLSPAN= nmero
Quando vocdesejar que uma determinada clula ocupe duas ou maislinhas necessrio utilizar o atributo ROWSPAN juntamente com a tagTD informando quantas linhas esta clula ocupar.
Altere a pgina do nosso exemplo incluindo mais uma coluna com uma
clula mesclando duas linhas.
PasPopulaoreaIdioma
Brasil
157.070
8.547Portugus
5/26/2018 00293 - Programando Em HTML
68/104
Programando em HTML
Pgina: 68Celta Informtica - F: (11) 4331-1586
Argentina
34.0002.780
Espanhol
Colmbia35.700
1.140
Na listagem anterior a clula que contm o mapa est com a cor defundo alterada pela atributo BGCOLOR. Na tag TD este atributo funciona
da mesma forma quando o usamos para colorir o fundo da pgina. Astags TABLE e TR tambm podem ter sua cor de fundo alterada, sendoque altera a cor de toda tabela, e altera a cor de fundo da linha. A definio de cor paraa clula sobrepe a cor da linha que por sua vez sobrepe a cor dadapara a tabela.
Como dito anteriormente, as clulas podem ser mescladas ocupando,alm de linhas, duas ou mais colunas utilizando-se o atributo COLSPAN.
5/26/2018 00293 - Programando Em HTML
69/104
Programando em HTML
Pgina: 69Celta Informtica - F: (11) 4331-1586
No exemplo a seguir, utilizamos vrias cores para cada uma das tagsque compem a tabela e mesclamos duas clulas em linha e mais duasem coluna..
Pas
IdiomaPopulao(mil)rea(mil Km2)
BrasilPortugus
157.0708.547
Argentina
Espanhol34.000
2.780
Colmbia35.700
1.140
Total226.77012.467
5/26/2018 00293 - Programando Em HTML
70/104
Programando em HTML
Pgina: 70Celta Informtica - F: (11) 4331-1586
ALTERANDO DIMENSES
Quando uma tabela criada, as dimenses das linhas e colunas sodeterminadas pelo maior contedo existente na clula. Na clula quecontm o mapa, ela que especifica a altura de toda a linha, e nas colu-nas Populaoe reaso os ttulos que determinam a largura de to-das as linhas abaixo deles.
Para alterar o tamanho das clulas e da tabela utilizamos o atributoWIDTH, que pode ser informado em porcentagem ou em pixels. Sendoque na tag TABLE a largura proporcional em relao dimenso da
janela do navegador e na tag TD esta proporo em relao largurada tabela.
O uso das larguras proporcional e absoluta mostrado nos dois exem-plos a seguir.
Exemplo 1
  A B C
1 Clula A1 Clula B1 Clula C1
2 Clula A2 Clula B2 Clula C2
5/26/2018 00293 - Programando Em HTML
71/104
Programando em HTML
Pgina: 71Celta Informtica - F: (11) 4331-1586
A linha da tabela pode ter sua altura modificada pelo atributo HEIGHTfuncionando da mesma forma que WIDTH.
Exemplo 2
 A B C
1 Clula A1 Clula B1 Clula C1
2 Clula A2Clula B2 Clula C2
Para afastar uma clula de outra usamos o atributo CELLSPACINGjun-
tamente com um nmero que determina a distncia entre elas. O atribu-to CELLPADDINGcausa o afastamento do contedo da clula e suaborda, indicado tambm por um nmero de pixels.
5/26/2018 00293 - Programando Em HTML
72/104
Programando em HTML
Pgina: 72Celta Informtica - F: (11) 4331-1586
  A B C
1 Clula A1 Clula B1 Clula C1
2 Clula A2Clula B2 Clula C2
Em algumas tabelas temos a necessidade de incluir uma legenda naparte superior ou inferior delas para mostrar um ttulo ou a fonte dos seusdados. Em uma pgina HTML as legendas so feitas pela tag CAPTIONcolocada dentro de uma definio de tabela ( ... ).Esta tag possui o atributo ALIGN e seus seguintes valores:
ALIGN=[ top | bottom | left | right ]
AMRICA DO SULPopulao em mil habitantes
rea em mil Km2MAIORES
MENORES
Pop.157.070
5/26/2018 00293 - Programando Em HTML
73/104
Programando em HTML
Pgina: 73Celta Informtica - F: (11) 4331-1586
Pop.410rea8.547rea163
Pop.34.000
Pop.3.220rea2.780rea176
IMAGEM DE FUNDO
Para inserir uma imagem de fundo numa tabela, utilizamos o atributoBACKGROUND
com seu valor igual o URL da imagem desejada, comoutilizado para pgina.
No exemplo seguinte, estsendo utilizado o atributo BACKGROUNDpara colocar uma imagem no fundo da tabela e tambm links sob o mapade cada pas que levaro o usurio para pginas especficas.
AMRICA DO SUL
Populao em milhabitantes
rea em mil Km2MAIORES
MENORES
BrasilPop.157.070
SurinamePop.410
rea8.547rea163
Argentina
5/26/2018 00293 - Programando Em HTML
74/104
Programando em HTML
Pgina: 74Celta Informtica - F: (11) 4331-1586
Pop.34.000
UruguaiPop.3.220
rea2.780rea176
5/26/2018 00293 - Programando Em HTML
75/104
Programando em HTML
Pgina: 75Celta Informtica - F: (11) 4331-1586
FRAMES
Frame ou moldura um recurso da linguagem HTML que permite aonavegador exibir duas ou mais pginas simultaneamente na mesma ja-nela. Caso voctenha a necessidade de exibir uma pgina contendo a
apresentao da empresa e uma lista de seus produtos e mais umapgina para cada produto, o usurio teria que voltar para a pgina deapresentao se desejasse ver outro produto.
Com o uso do frame, a lista de produtos poderser constantementeexibida enquanto o usurio visualiza os produtos em uma outra moldurana mesma janela do navegador.
Para construir uma pgina com a estrutura mostrada na figura acima, necessrio construir na verdade trs pginas HTML, sendo uma princi-pal (frame.htm) com as definies de frame e as outras duas com ocontedo de cada frame (frame1.htm e frame2.htm).Inicialmente vamos construir quatro pginas sem a utilizao de frames,
com os recursos de navegao vistos at agora. Partindo da pginamenu.htm poderemos acessar as pginas empresa.htm, produtos.htmeservicos.htme a partir delas o menu novamente.
5/26/2018 00293 - Programando Em HTML
76/104
Programando em HTML
Pgina: 76Celta Informtica - F: (11) 4331-1586
menu.htm
Menu
Menu
Empresa
Produtos
Servios
empresa.htm
Empresa
EMPRESA
Somos empresa que vem atuando nomercado nacional oferecendosolues para o ramo de
veculos. Com uma poltica de
Qualidade e Tecnologia enfrentamos com otimismoe
confiana todos os obstculos,
pois
o desafio para oferecer a melhorsoluo nos motiva a crescer cada
vez mais.
menu
produtos.htm
Produtos
5/26/2018 00293 - Programando Em HTML
77/104
Programando em HTML
Pgina: 77Celta Informtica - F: (11) 4331-1586
PRODUTOS
Vendemos o que há
de
melhor no mercado global.
MOTORRODAS
VirabrequimGota
Correia
Beca
Vela
Estrela
menu
5/26/2018 00293 - Programando Em HTML
78/104
Programando em HTML
Pgina: 78Celta Informtica - F: (11) 4331-1586
servicos.htm
Servios
SERVIOS
Ns oferecemos a melhororientao aos nossos clientes na
escolhe do produto que melhor atende s
suasexigncias. Alm de dar
manutenão permanente e por toda vida
de nossos produtos sem nenhum custo adicional.
menu
5/26/2018 00293 - Programando Em HTML
79/104
Programando em HTML
Pgina: 79Celta Informtica - F: (11) 4331-1586
Antes de trabalhar com frames necessrio um planejamento prvio decomo sero lay-out da pgina e de que modo os frames estaro. Nesteplanejamento devero ser determinadas as dimenses de cada frame,bem como se a janela do navegador serdividida em colunas, linhas ouuma combinao de ambas.
Aps o planejamento, o arquivo principal ser formado pela tage sua correspondente de fechamento ,contendo entre elas as definies de diviso e contedo da pgina. Estatag possui os seguintes atributos:
COLS= [ pixel | % | * ] Determina o tamanho e quantidade dascolunas.
FRAMEBORDER= [ 0 | 1 ] Se igual a 0, no exibe bordas.
FRAMESPACING= [ pixel ] Espao entre os frames.ROWS= [ pixel | % | * ] Determina o tamanho e quantidadedas linhas.
Os valores dos atributos COLS e ROWS podem ser um nmero inteiroem pixel, uma porcentagem do espao vertical ou horizontal, ou um com-primento expresso como i*, onde ium nmero inteiro.Na rea da janela, o navegador primeiro destina dimenses em pixel e
porcentagem, ento divide o espao remanescente entre todos elemen-tos com dimenses relativas. Para um elemento com comprimento de3* serdestinado o triplo do espao de um elemento com comprimento1*. O valor * equivalente a 1* e muitas vezes usado para preencher oespao restante da janela.
Para indicar o contedo de cada frame, utilizamos a tag jun-tamente com seu atributo SRCinformando que pgina sercarregadadentro do frame. A tag FRAME substitui a tag BODY dos documento
HTML normais.
Frame
5/26/2018 00293 - Programando Em HTML
80/104
Programando em HTML
Pgina: 80Celta Informtica - F: (11) 4331-1586
Na listagem anterior apesar de as dimenses serem exatas, o navega-dor irpreencher toda sua janela com os trs frames nas proporesindicadas pelos valores absolutos. Neste exemplo poderamos, ento,ter usado na linha do FRAMESET o asterisco no dimensionamento doltimo frame para ocupar o restante da janela, ao invs de um valor abso-luto. Altere o exemplo e redimensione a janela do navegador.
A listagem a seguir constri uma pgina com dois frames em linha, sen-do que um possui o triplo da altura do outro.
Frame
5/26/2018 00293 - Programando Em HTML
81/104
Programando em HTML
Pgina: 81Celta Informtica - F: (11) 4331-1586
COMPOSIES COM FRAMES
Para dividir uma janela com frames em linhas e colunas, necessriocombinar estes frames inserindo uma definio de frame (FRAMESET)dentro de outra, na posio de uma tag FRAME normal.
5/26/2018 00293 - Programando Em HTML
82/104
Programando em HTML
Pgina: 82Celta Informtica - F: (11) 4331-1586
5/26/2018 00293 - Programando Em HTML
83/104
Programando em HTML
Pgina: 83Celta Informtica - F: (11) 4331-1586
Faa o prximo exemplo que cria uma pgina com duas linhas de frames,sendo a linha superior dividida em duas colunas de frames.
Frame
A tag FRAME possui alm do atributo SRC, os seguintes atributos:
NAME- Nome do frame para sua identificao quando se usa o atributoTARGET.
SRC- Endereo (URL) do contedo do frame.
FRAMEBORDER= [ 1 | 0 ] - Se igual a 1, o frame terborda.
MARGINWIDTH- Largura da margem em pixel
MARGINHEIGHT- Altura da margem em pixel
NORESIZE- Quando usado, no permite o redimensionamento do frame
SCROLLING= [ yes | no | auto ] - Exibe ou no as barras de rolagem.
5/26/2018 00293 - Programando Em HTML
84/104
Programando em HTML
Pgina: 84Celta Informtica - F: (11) 4331-1586
Faa os dois exemplos a seguir para ver a utilizao desses atributos,faa tambm testes com outros valores e atributos em linhas diferentesdas mostradas.
Exemplo 1
Frame
Exemplo 2
Frame
5/26/2018 00293 - Programando Em HTML
85/104
Programando em HTML
Pgina: 85Celta Informtica - F: (11) 4331-1586
LIGANDO FRAMES
Atagora trabalhamos com frames exibidos de uma forma independenteuns dos outros, criando um documento principal que exibe outros emmolduras separadas, sem nenhuma ligao um com o outro.
Para fazer esta ligao devemos primeiro nomear cada frame no arquivoprincipal para depois com o atributo TARGETpoder apontar o link para oframe desejado. Este atributo pertence s tags BASEe A.
A tag BASEdeve ser localizada no cabealho da pgina, sendo respon-svel por informar ao navegador qual sero documento base vinculadoaos links da pgina, que pode ser tanto um frame quanto uma outra URL.Seus atributos so:
HREF = URL
TARGET = Frame
5/26/2018 00293 - Programando Em HTML
86/104
Programando em HTML
Pgina: 86Celta Informtica - F: (11) 4331-1586
No prximo exerccio faa uma arquivo principal definindo o nome dosframes, e altere os quatro arquivos j construdos (menu.htm,servicos.htm, produtos.htm e empresa.htm).
O arquivo vazio.htm contm somente as definies bsicas de uma p-
gina HTML. Ele usado para o Netscape no abrir os documentos emoutro frame seno o frame de nome conteudo.
Documento principal
Frame
menu.htm
Frame
Menu
Empresa
Produtos
Servios
servicos.htm
empresa  
produtos
5/26/2018 00293 - Programando Em HTML
87/104
Programando em HTML
Pgina: 87Celta Informtica - F: (11) 4331-1586
Observe que na pgina servicos.htmo link empresa possui o seu atri-buto TARGETapontando para o frame menu, ou seja, quando o usurioder um clique nele, a pgina empresa.htmsercarregada no lugar ocu-pado pela pgina menu.htm.
5/26/2018 00293 - Programando Em HTML
88/104
Programando em HTML
Pgina: 88Celta Informtica - F: (11) 4331-1586
ENCADEANDO FRAMES
Fazemos encadeamento de frames carregando um arquivo com defini-es de frameset dentro da tag FRAME de outro arquivo. Este recurso semelhante ao utilizado quando desejamos encadear tabelas, colocan-
do uma tabela dentro da clula de outra.
frame.htm
subframe.htm
Partindo do exerccio anterior iremos exibir uma pgina com definies deframes no lugar da pgina produtos.htm. Esta nova pgina terum framesuperior com links para pginas que sero exibidas no frame inferior.
Inicie alterando a linha do arquivo menu.htm que abre a pgina produto.htmfazendo ela apontar para a nova pgina:
5/26/2018 00293 - Programando Em HTML
89/104
Programando em HTML
Pgina: 89Celta Informtica - F: (11) 4331-1586
Empresa
ProdutosServios
Construa o cdigo da pgina produtos_b.htmque contm a definiodos frames:
produtos_b.htm
Frame
Nos dois frames da pgina produtos_b.htm sero carregados quatro ar-quivos. Um deles no frame superior - menu_produtos.htm e os outros
trs no frame inferior - produtos_inicio.htm, motor.htm e rodas.htm.
menu_produtos.htm
Motor
Rodas
produtos_inicio.htm
PRODUTOS
Vendemos o que háde melhor no mercado global.
5/26/2018 00293 - Programando Em HTML
90/104
Programando em HTML
Pgina: 90Celta Informtica - F: (11) 4331-1586
motor.htm
MOTOR
Virabrequim
Correia
Vela
rodas.htm
RODAS
Gota
Beca
Estrela
5/26/2018 00293 - Programando Em HTML
91/104
Programando em HTML
Pgina: 91Celta Informtica - F: (11) 4331-1586
FORMULRIOS
Os formulrios so bastante utilizados nos sites da Web, pois atravs de-les possvel coletar informaes de vrias pessoas, solicitar a opiniodos visitantes, fazer uma votao onde os visitantes escolhem entre um
item e outro, etc, assim, podemos concluir que os formulrios permitemcoletar informaes dos usurios. As respostas fornecidas pelos visitan-tes so armazenadas, e depois vocpode acess-las e compar-las.
Mas para que este formulrio funcione, preciso que no servidor tenhaum programa, escrito em outra linguagem, responsvel em receber eprocessar o formulrio.
Obs: Neste curso serensinando apenas a linguagem HTML referente criao e envio do formulrio.
OS OBJETOS DE FORMULRIOS
Os formulrios so compostos por vrios objetos, onde uns oferecemopes para serem clicados e outros exibem campos de texto editveis(atravs da utilizao de comportamentos, vocpodervalidar as infor-maes digitadas pelo usurio). A prxima figura exibe um simples for-mulrio que foi criado em uma pgina.
5/26/2018 00293 - Programando Em HTML
92/104
Programando em HTML
Pgina: 92Celta Informtica - F: (11) 4331-1586
Os itens numerados na figura anterior representam alguns objetos deformulrio, os quais so denominados:
1, 2 e 5Campo de texto3 e 4Menu de lista
6 - Botes de opo7 - rea de texto8 e 9 - Botes de comando
Alm desses quatro objetos, ainda temos: caixa de seleo, campo dearquivos, campo de imagens, campo oculto e menu de salto.
Campos de texto: tambm chamados caixas de texto, so utilizadospara coletar informaes dos usurios, onde estes podero digitar qual-quer tipo de texto: alfabtico ou numrico. O texto digitado exibido emuma linha simples.
Botes: realizam tarefas quando so clicados, ou seja, so aquilo quefaz o formulrio fazer algo, como enviar as informaes e redefinir osdados dos formulrios.Campos de imagens: podem ser utilizados no lugar do boto Enviar,onde este pode ser substitudo por um boto de imagens.Caixas de seleo: permitem que o usurio faa uma ou mais seleesem um conjunto de opes.Botes de opo: enquanto as caixas de seleo podem aparecer indi-vidualmente ou em grupos, os botes de opo aparecem sempre emgrupos. A seleo de um dos botes do grupo cancela a seleo detodos os outros.
Menus de lista: apresentam um conjunto de valores que os usuriospodero escolher.Campos de arquivos: permitem que o usurio procure os arquivos nosdiscos rgidos, carregando-os como dados do formulrio.Campos ocultos: permitem armazenar informaes (como o destinat-rio dos dados do formulrio ou o assunto do formulrio) que no foremrelevantes ao usurio, mas que sero utilizadas pelo aplicativo que pro-cessa o formulrio.Menu de salto: permite inserir um menu no qual cada opo se vinculaa um documento ou arquivo.
rea de texto: uma caixa de texto onde o usurio pode digitar inmerapalavras com linhas mltiplas (exibem uma barra de rolagem).
5/26/2018 00293 - Programando Em HTML
93/104
Programando em HTML
Pgina: 93Celta Informtica - F: (11) 4331-1586
INSERINDO OBJETOS
Para construirmos um formulrio utilizamos a tag e sua cor-respondente de fechamento . entre elas que sero coloca-dos os elementos que formam um formulrio interativo.
A tag FORM possui os seguintes atributos:
ACTION= URL Especifica o endereo onde esto programa queirprocessar o formulrio
METHOD= [get | post]Indica o mtodo utilizado pelo servidor paraprocessar o formulrio
Um campo para entrada de dados definido com a tag , tendoos dados digitados pelo usurio atribudos a uma varivel com nome etipo especficos. Esta tag possui os seguintes atributos:
TYPE = [ text | password | checkbox | radio | submit | reset | file | hidden |image | button ]
text- Campo de texto.password - Campo texto que mostra astericos no lugar do texto
digitado.checkbox- Caixa de seleo.radio- Boto de opo.submit- Boto para envio dos dados do formulrio.reset- Boto que apaga os textos do formulrio.file- Campo de arquivo.hidden- Campo de arquivo.image- Campo de imagem.button- Boto de comando.
NAME = varivel- Nome da varivel que recebero contedo do campo.VALUE = texto- Representa o valor padro do campo.CHECKED- Seleciona o campos do tipo checkbox.SIZE = nmero- Define o tamanho do campo, sugerindo um nmero de
caracteres.
5/26/2018 00293 - Programando Em HTML
94/104
Programando em HTML
Pgina: 94Celta Informtica - F: (11) 4331-1586
MAXLENGTH = nmero- Nmero mximo de caracteres para a entra-da de texto
Inicialmente vamos criar uma pgina que envia somente o nome do usu-rio guando este clicar no boto Enviar.
Formulrio
Os botes de opo so feitos informando o mesmo nome de varivelpara todos do mesmo grupo mas com valores diferentes.
Opes de uso da Internet:
Estudo
Pesquisa
Trabalho
Lazer
5/26/2018 00293 - Programando Em HTML
95/104
Programando em HTML
Pgina: 95Celta Informtica - F: (11) 4331-1586
A caixa de opo funciona semelhante ao boto de opo, com a diferen-a de poder ter mais de um campo selecionado ao mesmo tempo.
Possui em sua casa:
Geladeira
Automvel
Televiso
O menu de lista criado com as tags ..., quedefine a lista e seu comportamento, e , que define os ele-
mentos de escolha da lista. Numa lista o usurio escolhe um ou maisitens aps dar um clique na sua seta.
5/26/2018 00293 - Programando Em HTML
96/104
Programando em HTML
Pgina: 96Celta Informtica - F: (11) 4331-1586
A tag SELECT possui os seguintes atributos:
NAME= varivel- Nome da varivel que recebero contedo do campo.
MULTIPLE- Permite selees mltiplas
SIZE= nmero- Define o nmero de opes visveis na lista.
Data da nascimento:
01
02
03
04
05
Janeiro
Fevereiro
Maro
Criamos uma rea de texto com a tag ...eseus atributos:
NAME= varivel- nome da varivel que recebero contedo do campo.
COLS= nmero- especifica a largura da caixa de texto.
ROWS= nmero- especifica o nmero de linhas da caixa (altura).
Dentro da tag TEXTAREA podemos incluir um texto padro para ser exi-bido ao usurio.
Sugestes
Digite aqui suas sugestes
A maioria dos provedores nos oferece pronto um scrip que envia as res-postas do formulrio para um e-mail especificado e exibe uma pgina deagradecimento ao usurio. Este scrip recebe valores de campos ocultos
5/26/2018 00293 - Programando Em HTML
97/104
Programando em HTML
Pgina: 97Celta Informtica - F: (11) 4331-1586
(hidden) no formulrio e que indicam os endereos da pgina de agrade-cimento e do e-mail de resposta.
Na listagem a seguir temos o cdigo completo da primeira ilustraodeste tpico, repare os valores do atributo ACTIONe dos campos ocul-
tos emaildestinoe resposta:
Formulario
E-mail:
0102
03
04
Janeiro
Fevereiro
Maro
5/26/2018 00293 - Programando Em HTML
98/104
Programando em HTML
Pgina: 98Celta Informtica - F: (11) 4331-1586
SIZE=6">
Opes de uso da Internet:Estudo
PesquisaTrabalhoLazer
Comentrios:
5/26/2018 00293 - Programando Em HTML
99/104
Programando em HTML
Pgina: 99Celta Informtica - F: (11) 4331-1586
FAZENDO O FORMULRIO FUNCIONAR
Toda vez que um usurio preenche os campos do formulrio e clica noboto Enviar, os dados vo para o servidor na forma de uma string (ca-deia de caracteres) agrupados em pares. Cada um desses pares possui
o nome da varivel e o seu valor que o script CGI (ou outro script perso-nalizado) recebe para ser executado, pois sassim vocpoderrecupe-rar e acessar os dados resultantes do formulrio.
varivel1=valor1&varivel2=valor2 ... &variveln=nome
n
Os formulrios so enviados por um dos dois mtodos: GET, que enviaos resultados do formulrio no URL enviado para o script; e POST, quecodifica o material enviado para o script. Consulte seu programador ouadministrador de sistema para vocsaber determinar qual mtodo deveser utilizado.
Aps o usurio preencher o formulrio e der um clique no boto Enviar,este serencaminhado ao seu provedor de hospedagem e l, o scriptCGI recebendo a string com os valores da variveis, enviarum e-mailpara vocda seguinte forma:
5/26/2018 00293 - Programando Em HTML
100/104
Programando em HTML
Pgina: 100Celta Informtica - F: (11) 4331-1586
Form ResultsThis form was submitted with a method of
POST
The URL it was posted from: http://www.dominio.com.br/formulario.htm
The host that posted it: 200.193.220.27 (200.193.220.27)
Location of Thank You Page: http://www.dominio.com.br/grato.htmEmail Results to: [email protected]
Submit Date: Sun Sep 24 22:19:13 EDT 2000
Form Values
Variable nome= Hamilton LuizVariable campoemail= [email protected] data= 03Variable mes= MaroVariable ano= 1968Variable opcao= lazerVariable comentarios = Gostei muito do
que existe no seu site. Mas a parte visualdeixa a desejar.
5/26/2018 00293 - Programando Em HTML
101/104
Programando em HTML
Pgina: 101Celta Informtica - F: (11) 4331-1586
EXERCCIOS
1. Quais os componentes bsicos de um programa HTML?
2. Para editar um programa HTML que ferramentas so necessrias?
3. Que comando utilizado para inserir linhas em branco e quebra delinha?
4. O que so tags ou etiquetas?
5. Quais as tags alteram o estilo do texto para negrito e itlico?
6. Crie uma pgina semelhante mostrada na figura.
7. Qual a tag utilizada para alterar a fonte do texto e seus atributos?
8. Construa uma pgina utilizando vrios atributos da tag do exerccio
anterior.
9. Faa uma pgina com cabealho, texto na cor branca e fundo navy,tendo o seguinte texto:
Existem diversas maneiras e promover o um site.Vocpode distribuir panfletos, anunciar em jornais e revistas ouainda a velha divulgao boca-a-boca.
10. Quais os tipos de lista podemos criar com HTML e que tags so
utilizadas?
11. Faa o cdigo da lista mostrada a seguir.
5/26/2018 00293 - Programando Em HTML
102/104
Programando em HTML
Pgina: 102Celta Informtica - F: (11) 4331-1586
12. Complemente a lista anterior colocando pequenas definies em cadaum dos itens.
13. Altere a lista de forma que ela exiba pequenos quadrados no lugardos nmeros.
14. Quais os tipos de imagens podemos carregar em uma pgina deInternet?
15. Quando usar cada um desses tipos?
16. Como fazemos para inserir uma figura na pgina?
17. Faa a seguinte pgina, utilizando as figuras brasil.gif e fundo1.gif:
18. Aumente a largura e diminua a altura da figura central, colocandoalgum texto antes e depois dela.
19. Faa uma pgina com a bandeira Argentina e um texto do lado direitodessa bandeira.
20. O que um hyperlink, e com fazemos um em HTML?
21. Mapeie a bandeira do Brasil, e faa ela ter links para pginas com a
descrio de suas partes.22. Continuando com o exerccio anterior, crie uma lista abaixo do mapa
com o nome de estados brasileiros, e links para uma rpida descri-o de cada estado na mesma pgina.
23. Quais as tags utilizadas para a confeco de tabelas em HTML?
24. Monte uma tabela com borda espessa, fundo vermelho e letras bran-cas, conforme a figura.
5/26/2018 00293 - Programando Em HTML
103/104
Programando em HTML
Pgina: 103Celta Informtica - F: (11) 4331-1586
25. Coloque uma legenda na tabela anterior e mais uma coluna comfigura que ocupe todas trs linhas.
26. Altera as dimenses da tabela para que todas colunas tenhas a mes-ma largura.
27. O que frame e como ele implementado em HTML?
28. Faa uma pgina com a seguinte estrutura de frames.
29. Ponha no frame Alinks para abrir pginas nos outros frames.
30. Em uma das pginas carregadas no frame B, faa um link que abrauma pgina em Dque tenha mais dois frames.
31. Crie um formulrio que obtenha os dados pessoais do usurio, e al-guns gostos pessoais utilizando todos os objetos de formulrio vistos.
5/26/2018 00293 - Programando Em HTML
104/104
Celta Informtica
http://www.celtainformatica.com.br