Xaulin - Therebels.up 00014

Uma breve biografia
Alfredo Limongi trabalha atualmente para ForenSys Caribean (anteriormente Vision Interconnect)
como desenvolvedor. Empresa Lder mundial em software para o mercado de recopilao forense
para as companhias de seguros.
Sua trajetria inclui mais de vinte e cinco anos de programao, dos quais pelo menos oito foram
dedicados programao em PHP.
Paralelamente a sua atividade profissional, tem lecionado diferentes cursos de programao Web
para principiantes, o que resultou na recopilao e preparao de uma srie de livros didticos sobre
programao, da qual, esse faz parte.
Cursou seus estudos de computao na prestigiada Universidad Central de Venezuela, em Caracas.
ndice
INTRODUO GERAL
COMO USAR ESTE LIVRO
NOMENCLATURA UTILIZADA
CAPTULO I - Conceitos bsicos
Introduo
O que HTML?
O que hipertexto?
O que um navegador?
O que a internet e o que WWW?
O que uma pgina Web?
Enfim, o que HTML?
CAPTULO II Estrutura de uma pgina
Introduo
Entendendo a linguagem de marcao
Tags HTML
Estrutura de uma pgina Web
Tag de abertura de pgina
Tag de definio de cabealho
Tag de definio do corpo da pgina
CAPTULO III Tags bsicas
Introduo
Tags bsicas
Ttulo de uma pgina
Centralizando textos
Manipulao de pargrafos
Ttulos e subttulos
CAPTULO IV Manipulando caracteres
Introduo
Manipulando caracteres
Colocando o texto em negrito
Colocando parte do texto em itlico
Sublinhando o texto
Outras tags para modificar o texto
Tags para quebra de linha e inserir uma linha horizontal
CAPTULO V Listas em HTML
Introduo
Listas em HTML
Listas no enumeradas
Listas numeradas
Listas de definies
CAPTULO VI Tags com atributos
Introduo
Tags com atributos
Exibindo imagens
Tags para criar links
Alterando o texto com a tag <font>
CAPTULO VII Trabalhando com tabelas
Introduo
Trabalhando com tabelas
Alguns dos atributos da tag <table>
Alguns dos atributos da tag <tr>
Alguns dos atributos da tag <td>
Melhores formas de organizar a informao
A tag <div>
A tag <span>
Nota final
CAPTULO VIII Criando pginas com quadros
Introduo
Criando pginas com quadros
Aninhando estruturas de quadros
Consideraes finais
CAPTULO IX Manipulao de formulrios
Introduo
Manipulao de formulrios
Definindo um formulrio
As listas suspensas
Caixas de texto
A tag input e suas mltiplas formas
Campos de texto
Campos de texto oculto
Campos de texto invisveis
Botes tipo rdio
Elementos tipo check box
Botes
Boto para o envio de formulrios
Boto para cancelar o envio
CONSIDERAES FINAIS
Introduo geral
No faz tanto tempo assim desde que as mquinas de escrever eltricas comearam a se transformar
em processadores de texto. Foi uma revoluo quanto a forma de se escrever, j que no era mais
necessrio recorrer ao corretivo para no ter que reescrever tudo de novo quando errvamos na
ltima linha.
Rapidamente esses processadores modernos deram lugar aos primeiros computadores pessoais, em
seguida, para os laptops e mais recentemente os smartphones, leitores de e-book e tablets. Todas as
tecnologias associadas ao papel foram renovadas vrias vezes durante a vida de uma nica gerao.
No entanto, a transformao mais importante deu-se no mundo das comunicaes. O papel sobre o
qual escrevamos h dcadas e que era distribudo pelo mundo inteiro como qualquer outra
mercadoria, hoje viaja por todo planeta de forma instantnea.
Esta transformao tecnolgica fez do nosso mundo um lugar bem menor. A informao digital nos
ajuda tanto ficar informado sobre o que est acontecendo do outro lado do globo como tambm para
encontrar antiga colega de escola que no vamos desde o colegial.
A internet, e sua passageira mais frequente, a pgina Web, tornaram-se quase to imprescindveis em
nossas vidas como nossas prprias roupas e casas.
Atualmente existem milhes de consumidores de pginas Web, desde aqueles que procuram diverso,
notcias ou fofocas das celebridades at mesmo os que trabalham conectados Internet.
Em um mundo como esse, representa uma enorme vantagem estar capacitado para criar pginas Web.
Compreender como elas funcionam saber program-las ou adapt-las s nossas necessidades, nos
coloca diante de um mercado de propores gigantescas.
No decorrer de todo este livro, lhe conduziremos cuidadosamente para que voc compreenda e
assimile todos os conceitos necessrios para mergulhar no mundo da programao Web. Aprender
HTML simples e muito gratificante, uma vez que os resultados podem ser percebidos desde a
primeira lio. Ento sem mais delongas, ns convidamos voc a aprender HTML e a se divertir
conosco.
Como usar este livro

Este livro est dividido em nove captulos que de forma progressiva vai ajudando o leitor menos
experiente nos seus primeiros passos no mundo da programao Web.
No incio de cada captulo contem um breve resumo dos tpicos que sero abordados. Alm disso,
para facilitar a leitura daqueles quem j conhecem basicamente a linguagem, decidimos incluir notas
que os ajudaro a saber, quando uma seo especfica pode ser ignorada sem prejuzos.
No primeiro captulo abordamos os conceitos que so mais necessrios para entender genericamente
uma pgina Web. Pode ser que muitos desses conceitos, ou at mesmo todos eles, j sejam
amplamente conhecidos pelo leitor, pois, o nosso compromisso foi o de fazer um guia sobre HTML a
partir do zero.
Do captulo dois at o oito abordamos de forma progressiva as diferentes tags que compem a
linguagem. Desde aquelas que provocam um efeito simples no estilo do texto at outras mais
complicadas como as usadas na criao de tabelas e os quadros.
O captulo nove talvez o mais importante do livro, pois aborda a criao de formulrios, por isso,
como no restante do livro, tentamos explicar os elementos de maneira fcil e sempre com base em um
exemplo prtico que ajude o leitor a compreender a utilidade do que exposto.
Tambm inclumos uma quantidade considervel de pequenos exemplos curtos ao longo desta edio
com a ideia de fazer com que o leitor possa assimilar o que explicado sem precisar revisar dezenas
de linhas de programao. A nfase do texto foi colocada na pedagogia da linguagem e o seu uso.
Exemplos foram cuidadosamente colocados em prol desse objetivo.
Nomenclatura utilizada
Ao longo do livro voc vai encontrar dois tipos de cones que servem para destacar os conceitos
mais importantes bem como as recomendaes que ns consideramos serem relevantes.
Sempre que voc observar este smbolo na margem esquerda do texto porque nesse ponto
estaremos abordando um conceito. O objetivo fazer com que o leitor preste sua mxima ateno a
estes pontos.
Quando voc visualizar este smbolo na margem esquerda do texto porque queremos fazer alguma
recomendao, sugesto, ou talvez alertar sobre a importncia de um assunto em particular.
Introduo
Neste captulo iremos explorar alguns dos conceitos subjacentes programao de pginas Web em
HTML. Muitos destes conceitos talvez sejam conhecidos por voc. Se este for o caso, ns lhe
orientamos a ignor-los e seguir em frente.
Alm disso, abordamos a definio e tambm algumas das caractersticas da linguagem que estamos
tratando nesta publicao, ou seja, a HTML.
Ao concluir a leitura deste captulo voc ser capaz de usar a terminologia bsica que ser
empregada vrias vezes ao longo deste livro.
Se voc j tem conhecimentos elementares sobre o mundo da Internet e sabe o que uma
linguagem de hipertexto, e mais especificamente, sabe o que a linguagem HTML, ento
poder ir direto para o prximo captulo.
Assuntos abordados neste captulo:
O que HTML?
O que o hipertexto?
O que um navegador?
O que a Internet e o que WWW?
Enfim, o que HTML?
O que HTML?
A HTML basicamente uma linguagem de hipertexto projetada para mostrar pginas Web nos
navegadores.
Para saber exatamente o que isso significa, comecemos ento, definindo melhor alguns conceitos:
Hipertexto
Navegador
Internet
Pginas Web
O que hipertexto?
Desde milhares de anos, o homem tem escrito textos em diferentes formatos e sobre diferentes
superfcies. Temos sido testemunhas da histria da humanidade atravs de contedos gravados sobre
pedras, sobre madeira e mais recentemente sobre papeis e outros tipos de materiais sintticos.
Porm, no final das contas, sem importar a forma ou o material sobre o qual os mesmos foram
escritos, a informao sempre foi tratada de maneira esttica, com apenas uma forma de ser lida.
A chegada dos computadores deu uma reviravolta nesse conceito.
Ao falar de hipertexto nos referimos a textos interligados entre eles, de modo a nos permitir
outras possibilidades alm da leitura linear (nica opo possvel em um livro fsico).
Alm dessa funcionalidade, o hipertexto suporta outros contedos (no somente palavras) entre eles:
imagens, sons, vdeos, entre outros.
O que um navegador?
Um navegador (mais especificamente um navegador Web) um programa que funciona em um
computador ou algum outro tipo de dispositivo para ler e interpretar arquivos acessados pela
Internet.
Os navegadores, basicamente funcionam interpretando cdigo do tipo hipertexto e mostrando os
resultados ao usurio de uma forma amigvel.
Quando surgiram, os navegadores interpretavam basicamente textos com um ou outro elemento
grfico e links para ir de um texto a outro. Estes tipos de funcionalidades tm crescido bastante desde
ento.
Os navegadores Web mais conhecidos (e mais usados) na atualidade so os seguintes:
Chrome
Internet Explorer
Firefox
Opera
Safari
O que a Internet e o que WWW?

Para falar do que significa o conceito por trs da sigla WWW, necessrio primeiro deixar
estabelecido o que significa Internet.
Ainda que parea um tanto absurdo falar do conceito de Internet, dado que se voc est lendo este
livro de se supor que j esteja mais do que familiarizado com o termo, mas na verdade muita gente
confunde este com outros conceitos.
Internet no nada mais que uma rede lgica que se interconecta a numerosssimas redes
individuais atravs da famlia de protocolos TCP/IP.
De maneira menos tcnica poderamos dizer que a internet formada por todas as redes do planeta
que esto interconectadas entre si atravs de uma srie de convenes, para apresentar um
funcionamento lgico uniforme.
Por outro lado, a chamada Rede de Alcance Mundial (ou WWW sua sigla em ingls) um
conjunto de protocolos implementados na internet para compartilhar contedos de hipertexto.
Resumindo, internet um meio (semelhante rede telefnica mundial) que une a distintas redes
locais. A rede WWW uma serie de protocolos para compartilhar contedos de hipertexto na
internet.

Uma pgina Web no nada mais que um documento publicado na Rede Mundial de
Computadores (WWW), que pode ser aberto usando um navegador. Essas pginas esto escritas
em HTML com adies de linguagens especficas como CSS, JavaScript ou VBScript.
As pginas Web podem ser armazenadas localmente, isto , dentro do equipamento onde se encontra
o leitor, em alguma rede privada, ou em algum servidor remoto. O aceso a pgina pode ser pblico
ou restrito.
Enfim, o que HTML?

Para escrever hipertextos existem diversas linguagens, no entanto, vamos concentrar nossa ateno
em apenas uma delas: a HTML.
A Hipertext Markup Language ou HTML, se trata de uma linguagem para a manipulao de

hipertextos baseada em marcas. Basicamente um conjunto de comandos que se intercalam
dentro de um texto para cumprir certas funes de formatao, comando e relaes.
Adicionalmente serve para incorporar outros tipos de contedos como udio, vdeo e imagens.
A maior vantagem da linguagem HTML est no fato dela ser o padro no qual est construda a
WWW.
Quando falamos que a HTML uma linguagem de marcao, nos referimos ao fato dos seus
comandos terem a forma de tags imersas no texto. Isto , todos os comandos da linguagem HTML
podem ser identificados porque comeam e terminam com os delimitadores < e >. Um exemplo
disso a tag (ou comando) center:
<center>
Em outras palavras, em uma linguagem de marcao o protagonista o texto. Sempre que se desejar
alterar alguma caracterstica de formato a esse texto ou acrescentar-lhe algum outro elemento
diferente, isso ser feito atravs de uma tag ou marca.
Introduo
Ao longo deste captulo explicaremos atravs de um exemplo simples a natureza das linguagens de
marcao, a partir dai comearemos a falar mais formalmente da linguagem HTML em si, com sua
estrutura e suas convenes.
Ao concluir a leitura deste captulo voc ser capaz de reconhecer a estrutura bsica de uma pgina
escrita em HTML.
Se voc j possui conhecimento bsico em HTML e a sua inteno ao ler este livro a de se
aprofundar nos conhecimentos a esse respeito, Ento lhe convidamos a ir diretamente ao
captulo seguinte.

Tags HTML
Tag de definio do cabealho

Como mencionamos no captulo anterior, HTML uma linguagem de marcao. Sempre que neste
livro falarmos de marcas, ou tags, estaremos nos referindo a ordens inseridas dentro do texto que
desejamos exibir. Ou seja, uma tag uma ordem ou um comando para uma funo dentro do contedo
que se deseja mostrar.
Para ilustrar o que acabamos de dizer, propomos a voc o seguinte exerccio hipottico:
Suponhamos que frequentemente necessitamos enviar pargrafos de texto a uma pessoa que se
encontra bem distante, e para isso dispomos apenas de mensagens de texto em nosso celular.
Um desses pargrafos a ser enviado o seguinte.
Cem anos de solido Muitos anos depois frente ao peloto de

fuzilamento o coronel Aureliano Buenda haveria de recordar aquela
tarde remota em que seu pai o levou para conhecer o gelo. Macondo
era at ento uma aldeia de vinte casas de barro e canabrava
construdas a margem de um rio de aguas difanas que se precipitavam
por um leito de pedras polidas brancas e enormes como ovos prhistricos.
Suponhamos ainda que a pessoa que vai receber o pargrafo deva colocar a mensagem recebida em
um quadro usando o formato que ns lhe enviarmos. Isto , junto com as letras da mensagem,
necessitamos enviar-lhe informao acerca de como queremos que o texto seja mostrado.
A forma que queremos que o texto seja exibido esta:
Cem anos de solido

Muitos anos depois frente ao peloto de fuzilamento o coronel
Aureliano Buenda haveria de recordar aquela tarde remota em que
seu padre o levou para conhecer o gelo. Macondo era ento uma
aldeia de vinte casas de barro e canabrava construdas a margem de
um rio de guas difanas que se precipitavam por um leito de pedras
polidas brancas e enormes como ovos pr-histricos.
Para tornar possvel essa tarefa poderamos mandar algumas mensagens de texto com o contedo e
em seguida outras, explicando como mostr-la. No entanto, uma maneira mais eficiente seria
combinar com o nosso interlocutor algumas pequenas regras acerca das ordens para alterar o
formato.
Isto quer dizer que poderamos estabelecer algumas normas como as seguintes:
A palavra salto indica que se deve saltar uma linha.
A palavra negrito indica que se deve comear a escrever em negrito.
A palavra normal indica que se deve escrever de maneira normal (sem negrito).
A palavra centralizar indica que o escrito a seguir deve ficar centralizado.
A palavra justificar indica que se deve retornar ao formato justificado (no
centralizado).
Acordado isso, poderamos enviar o texto original da seguinte forma:
centralizar Cem anos de solido justificar e saltar Muitos anos

depois frente ao peloto de fuzilamento o negrito coronel Aureliano
Buenda normal haveria de recordar aquela tarde remota em que seu
padre o levou para conhecer o gelo. Macondo era ento uma aldeia de
vinte casas de barro e canabrava construdas a margem de um rio de
guas difanas que se precipitavam por um leito de pedras polidas
brancas e enormes como ovos pr-histricos.
Ressaltamos os comandos para torn-los evidentes.

Como podemos imaginar, o mtodo anterior tem o inconveniente de que as palavras saltar,
negrito, normal, centralizar e justificar tem um significado no que se refere ao formato e no
poderiam ser usadas no texto sem causar confuso a nosso interlocutor.
Para resolver essa limitao, deveramos combinar algo mais: os comandos de formatao devem ser
colocados entre colchetes, dessa forma palavras como centralizar e normal sero texto e as palavras
como [centrar] e [normal] sero comandos de formatao.
Voltando ao nosso exemplo, o texto poderia ser enviado da seguinte forma:
[centralizar] Cem anos de solido [justificar] [saltar] Muitos anos

depois frente ao peloto de fuzilamento o [negrito] coronel Aureliano
Buenda [normal] haveria de recordar aquela tarde remota em que seu
padre o levou para conhecer o gelo. Macondo era ento uma aldeia de
vinte casas de barro e canabrava construdas a margem de um rio de
guas difanas que se precipitavam por um leito de pedras polidas
brancas e enormes como ovos pr-histricos.
No exemplo anterior criamos uma linguagem de marcao rudimentar.
Tags HTML
A linguagem HTML se parece com a nossa linguagem do exemplo anterior, s que em nosso caso
escolhemos como delimitadores para nossas tags, os colchetes, enquanto que em HTML, as tags esto
colocadas entre os smbolos < e >.
Outra diferena entre a linguagem HTML e a nossa rudimentar linguagem para mensagens de texto,
que em HTML para os comandos que definem o incio de certo formato e o final do mesmo usa-se a
mesma palavra, mas ambas as tags se diferenciam porque na que finaliza a ao, encontramos uma
barra obliqua (slash) antes do comando em si.
Se voltarmos ao nosso exemplo, o que para ns era:
[centralizar] comea o texto centralizado.
[justificado] termina o texto centralizado.
Em HTML seria o seguinte:
<center> comea o texto centralizado.
</center> termina o texto centralizado.
Existem outros tipos de tags que no se referem a reas do texto, so as declarativas. Isto , esto
preparadas p
ara dar um comando imediato. Um exemplo disso o comando para quebra de linha. Uma quebra de
linha no tem uma rea de comeo nem fim. to apenas uma ordem que deve ser cumprida pelo
navegador. Este tipo de comando tem uma forma especial que :
<comando />
Retornando mais uma vez ao nosso exemplo, a tag para quebra de linha, que decidimos que tivesse a
forma [saltar], em HTML representada por:
<br />
comum ver este tipo de comando escrito como um comando de abertura, isto <br>. Ainda que os
navegadores aceitem igualmente as formas <br> e <br />, se recomenda usar esta ltima j que as
novas verses dos navegadores podem em algum momento deixar de reconhecer a antiga forma,
fazendo com que as nossas pginas tenham problemas para funcionar.

necessrio esclarecer que os diferentes navegadores tm tolerncias distintas aos erros. Quer dizer
que ainda sendo verdade que todos os navegadores comerciais foram pensados para exibir pginas
HTML, e ainda que a linguagem HTML seja regulada por um comit que decide o comportamento de
cada comando em particular, a verdade que cada navegador tem, por assim dizer, suas
particularidades.
Alm disso, quando uma pgina contm um comando mal escrito, a resposta de cada navegador, a
ele, difere bastante. H alguns navegadores mais permissivos que outros. Isso leva ao programador a
falsa segurana de que o navegador ignorar os nossos pequenos erros. Por isso muito importante
sempre testar as nossas pginas em vrios deles.
Dito isto, passaremos a descrever a estrutura de uma pgina criada em HTML.
Uma pgina Web um mero arquivo de texto que pode ser editado usando o bloco de notas ou
qualquer outro editor de texto simples (sem formatao).
Para que os navegadores interpretem corretamente uma pgina, a extenso o tipo do arquivo deve ser
HTM ou HTML. Isto , o nome do arquivo em disco deve ser algo como: exemplo.htm
Se voc quiser experimentar o modo como o seu navegador favorito mostrar a sua pgina, apenas
dever dar um duplo click sobre o arquivo correspondente; se a extenso do mesmo estiver correta,
ento o prprio navegador se encarregar de execut-lo automaticamente.
Quanto ao contedo, podemos dizer o seguinte:

Uma pgina HTML padro, comea com a tag <html> e termina com a tag </html>.
Ainda que nenhuma destas duas tags apresente efeitos visveis na tela e que a omisso das mesmas
seja ignorada pela maioria dos navegadores, seu uso obrigatrio. Sempre que observarmos o
cdigo de uma pgina web, devemos encontrar estas duas tags, uma ao principio e outra ao final do
mesmo.
Dentro de uma pgina, sempre se definem duas sees, a primeira se chama cabealho e a segunda,
corpo.
Tag de definio do cabealho

O cabealho de uma pgina Web uma rea mais declarativa, ou seja, nela colocado certo tipo de
informao que a principio, no se pretende mostr-la.
A tag utilizada para definir o cabealho da pgina <head>, e sua tag de fechamento </head>.
Esta seo da pgina sempre deve ser colocada imediatamente depois da tag de abertura de pgina. A
tag de fechamento do cabealho por sua vez, deve preceder em todos os casos ao corpo da mesma,
que ser descrito a seguir.

O corpo da pgina a parte visvel em si mesma. Dentro das tags que o definem, onde o
programador dever colocar todo o texto e as marcas que tero um efeito visvel no navegador que
ir interpret-la.
A tag para definir o corpo da pgina <body> e sua tag de fechamento, como o leitor pode imaginar,
</body>.
O comando das seis tags apresentadas at agora ser sempre o mesmo em qualquer pgina Web.
Veja-o:
<html>
<head>
</head>
<body>
</body>
</html>
oportuno lembrar que em HTML no h limitaes quanto a colocar mais de uma tag na mesma
linha. No entanto, isso proporciona certa legibilidade ao cdigo, e, assim ser mais difcil
encontrarmos possveis erros.
Por outro lado, ser uma boa fazer com que as tags que abrem e fecham certa zona, se escrevam a
mesma altura com referencia a margem esquerda. Desse modo, voc poder apreciar mais facilmente
sua rea de ao.
No exemplo anterior podemos ver como as duas tags que definem a pgina (<html> e </html>)
encontram-se a esquerda enquanto que tudo o que est dentro delas foi escrito um pouco mais
adiante. No meu caso, dei dois espaos, mas, muita gente usa o tabulador.
No entanto, para o navegador tudo isso irrelevante. O mesmo resultado poder se alcanado se
escrevermos o nosso exemplo da seguinte forma:
<html><head></head><body></body></html>
Dado que as tags que temos visto at o presente momento no tem nenhum efeito visvel no
navegador, se torna irrelevante mostrar o efeito da nossa pgina ao ser carregada em um deles.
Porm, a partir do prximo captulo, ser possvel testar o efeito dos comandos aprendidos
diretamente na tela.
Introduo
Neste captulo comearemos a aprender as primeiras tags HTML, veremos os primeiros exemplos e
conselhos prticos.
Ao concluir a leitura deste captulo voc ser capaz de fazer uma pgina Web bsica.
Assuntos desenvolvidos neste captulo:
Tags bsicas
Ttulo de uma pgina
Ttulos e subttulos
Tags bsicas
Vamos comear um pouco mais formalmente nosso passeio pelo mundo HTML revisando algumas
das tags mais simples.
Sempre que abordarmos a explicao de uma nova tag, vamos exibir um pequeno exemplo e
mostraremos qual o efeito produzido ao carregar esse cdigo em um navegador.
Convidamos-lhe a fazer voc mesmo suas prprias experincias medida que for aprendendo.
Assim, ir assimilar melhor os conceitos e ser capaz de record-los com maior facilidade.
Ttulo de uma pgina

Todos os navegadores exibem na parte superior o ttulo da pgina que esto mostrando.
Para poder mostrar o ttulo de uma pgina Web usamos a tag title juntamente com a sua tag de
fechamento correspondente.
Esta tag a nica que mesmo tendo um efeito visvel na tela; deve ser escrita na rea do cabealho
da pgina. A justificativa que, tecnicamente, o ttulo da pgina no deve ser mostrado dentro do
navegador, mas na borda da sua janela. Portanto, no tem sentido exibir o ttulo dentro do corpo
(body) da pgina, sendo que ele j consta no cabealho (head) da mesma.
<html>
<head>
<title>Exemplo 1</title>
</head>
<body>
Esta a minha primeira pgina em HTML
</body>
</html>
Note que no exemplo anterior o texto que escrevemos dentro das tags que definem o corpo da nossa
pgina aparece diretamente na tela.
Para fazer com que um texto seja exibido de modo centralizado em HTML s preciso usar a tag
center e sua correspondente tag de fechamento, as mesmas delimitaro o texto que se pretende
centralizar.
Vejamos um exemplo:
<html>
<head>
</head>
<body>
<center> Este texto deve aparecer centralizado
</center>
</body>
</html>
Um pargrafo em um texto qualquer uma sequncia de oraes escritas uma atrs da outra at
encontrar um ponto pargrafo. Isto que dizer que um pargrafo um bloco de oraes.
Para fazer com que todo um texto aparea como um simples pargrafo em HTML voc deve escrevlo dentro de um par de tags tipo p.
Os navegadores ao detectarem uma estrutura de pargrafo, inserem uma linha em branco antes e outra
depois do mesmo.
<html>
<head>
</head>
<body>
<p>Este texto pertence ao primeiro pargrafo.
Este outro tambm pertence ao primeiro pargrafo sem
importar o fato de que foi inserida uma linha no meio dele.
</p>
<p>Este texto pertence ao segundo pargrafo. </p>
<p>Este texto pertence ao terceiro pargrafo. </p>
</body>
</html>
possvel fazer pargrafos em HTML simplesmente colocando as quebras de linha nos seus
respectivos lugares, no entanto, a vantagem de usar esta tag est na possibilidade de alterar o formato
de todos os pargrafos simultaneamente apenas fazendo uma pequena alterao em CSS.
Ttulos e subttulos
Em qualquer texto escrito, seja em livros fsicos ou na Internet, podemos encontrar ttulos de
classificaes distintas. Nos livros, por exemplo, os captulos tendem a apresentar um ttulo em
tamanho grande; por sua vez, se o contedo de qualquer um deles estiver dividido em sees, cada
uma delas dever, normalmente, estar precedida por um subttulo e assim por diante.
A fim de poder mostrar ttulos de diferentes tamanhos, a linguagem HTML oferece seis pares de tags.
Um ttulo de grande tamanho pode ser produzido a travs da tag h1, outro um pouco menor, se logra
com a tag h2 e assim sucessivamente. Os ttulos de menor escala possvel, atravs do uso de tags
HTML, so delimitados pelas tags h6.
Vejamos um exemplo:
<html>
<head>
</head>
<body>
<h1>Ttulo principal usando h1</h1>
<h2>Subttulo usando h2</h2>
</body>
</html>
Introduo
Neste captulo explicaremos algumas das diferentes opes oferecidas pela linguagem HTML para
alterar as caractersticas de um texto. Para cada uma das tags descritas iremos mostrar um exemplo
de sua utilizao.
Alm disso, mostraremos uma lista detalhada de todos os comandos similares aos descritos. No
entanto, devido a grande extenso dos mesmos, e seu uso prtico pouco frequente, trataremos somente
sobre alguns desses comandos.
Ao concluir a leitura deste captulo voc ser capaz de mostrar diferentes estilos de texto usando as
tags especficas de HTML.
Colocar parte do texto em negrito.
Colocando parte do texto em itlico.
Sublinhar o texto.
Outras tags para modificar o texto.
Tags para quebra de linha e para inserir linha horizontal no texto.
Sempre que procuramos escrever um texto em qualquer aplicativo em um computador, podemos fazer
variaes na forma na qual os caracteres dos nossos textos so apresentados. Essas variaes so de
vrios tipos, por exemplo, podemos mudar o tipo de letra (Font) que estamos usando, o alterar o
tamanho das mesmas, ou talvez, fazer uma alterao no seu estilo (sublinhar o texto, destac-lo ou
inclin-lo).
Geralmente, as variaes aplicadas as letras pode fazer parte de uma das seguintes categorias:
Tipo
Tamanho
Estilo
Cor
A seguir lhe explicaremos como usar as tags HTML relacionadas com a manipulao da forma como
os textos se apresentam. Porm, bom mencionar que, geralmente, teremos um melhor resultado
trabalhando o estilo da pgina utilizando a linguagem de estilos CSS.
Colocando parte do texto em negrito

Para colocar um texto em negrito pode-se utilizar a tag <b>, a qual possui como sua tag de
fechamento </b>.
Uma tag alternativa com a qual (geralmente) se obtm o mesmo resultado <strong>, a qual tambm
possui sua tag de fechamento </strong>.
A diferena entre ambas as tags que <b> se refere ao atributo bold da Font que se est utilizando,
enquanto que strong indica ao navegador que este deve destacar o texto contido entre ambas as tags.
Na maioria dos navegadores existentes na atualidade, a tag strong simplesmente se interpreta como
uma tag b, no entanto, isso poder mudar no futuro.
Vejamos um exemplo simples:
<html>
<head>
</head>
<body>
Este texto contm uma palavra em <b>negrito</b> e
outra em <strong>strong</strong>. No entanto, no se
nota nenhuma diferena entre ambas.
</body>
</html>
Colocando parte do texto em itlico

O principal uso das letras em itlico dentro de um texto , geralmente, para destacar aquelas palavras
tcnicas ou escritas em outro idioma. No entanto, frequente encontrar letras itlicas em muitos
lugares com a simples funo de destacar um fragmento de texto em particular.
Com as letras itlicas acontece a mesma coisa que com as em negrito. Isto , para elas tambm
existem dois pares de tags que, na prtica, conseguem o mesmo efeito.
Para colocar um texto em itlico se utiliza a tag <i>, a qual possui como respectiva tag de
fechamento </i>.
A tag alternativa <em> consegue o mesmo resultado que <i> na maioria dos navegadores. Esta tag,
da mesma forma que a anterior, tambm possui sua tag de fechamento </em>.
A diferena entre ambas tags que <i> se refere de forma direta ao atributo italics da Font que se
est utilizando, enquanto que em indica ao navegador que este deve dar nfase ao texto contido entre
ambas as tags.
como no caso anterior, a maioria dos navegadores existentes na atualidade interpreta a tag em como
uma tag i, no entanto, isto poder mudar no futuro.
Vejamos um exemplo:
<html>
<head>
</head>
<body>
Este texto contem uma palavra em <i>itlico</i> e
outra <em>enfatizada</em>. No entanto, no se observa
nenhuma diferena entre ambas.
</body>
</html>
Sublinhando o texto
Para sublinhar uma parte do texto usando HTML, devemos somente inserir o texto correspondente
dentro de um par de tags tipo u.
A tag u tem esse nome devido ao atributo underline (sublinhado).
Vejamos um exemplo:
<html>
<head>
</head>
<body>
Este texto contm uma palavra <u>sublinhada</u>.
</body>
</html>
Outras tags para modificar o texto

Existem muitos mais atributos que podem ser usados para mudar a apresentao do texto. Em geral,
todos so utilizados da mesma forma, isto , colocando a tag de abertura no princpio do texto a ser
alterado e colocando a tag de fechamento ao final do mesmo.
importante que o leitor no fique preocupado com a grande quantidade de tags HTML que existem
para este tipo de tarefa. possvel ser um programador muito bom em HTML sem que nunca seja
preciso utilizar nenhuma das tags apresentadas nesta seo. Dessa forma, nossa dica a que voc d
uma olhada na lista sem a obrigao de memoriz-las uma a uma.
Algumas dessas tags so as seguintes:
Etiqueta
<small>
<sub>
<sup>
<ins>
<do>
Descrio
Define um texto de menor
tamanho.
Define um texto tipo
subndice (aparece mais
abaixo e em menor tamanho).
Define um texto sobrescrito
(aparece mais acima e em
tamanho menor).
Define um texto inserido
(geralmente equivale ao
sublinhado).
Define um texto eliminado
(geralmente se mostra
tachado).
<code>
Define uma poro de texto

tipo programa (usualmente se
mostra usando um font no
proporcional como o
Courier).
<kbd>
Define uma entrada de texto a
partir do teclado (igual ao
anterior).
<samp>
Define um exemplo (igual ao
anterior).
<var>
Define uma varivel
(usualmente em itlico).
<pre>
Define um texto prformatado (usualmente
respeita os espaos em
branco).
<abbr>
Define uma abreviatura.
<address> Define um endereo pessoal.
<bdo>
Define a direo do texto
(direita a esquerda o viceversa).
<blockquote> Define uma seo que
corresponde a uma cita de
outro texto (altera os
margens).
<q>
Define uma citao de uma ou
poucas palavras.
<cite>
Define uma citao de, por
exemplo, um ttulo de uma
obra.
<dfn>
Destaca uma definio
(usualmente se faz em
itlico).
O uso das tags que acabamos de mencionar passa a ter sentido ao complementar-se a pgina usando a
linguagem CSS. Mediante seu uso, podemos definir exatamente como queremos que nossa pgina seja
vista, por exemplo, todas as citaes (tags tipo quote).
Tags para quebra de linha e para inserir uma linha horizontal no

texto
Para forar uma quebra de linha usada uma tag especial que no possui tag de fechamento, j que
executada como uma ordem direta. A tag da qual tratamos : <br />.
importante lembrar que a tag br, por ser um comando direto e no ter tag de fechamento, deve
fechar-se a si mesma usando uma barra inclinada aps o comando em si. Esta forma de escrever os
comandos diretos em HTML, Ainda que em determinados momentos seja opcional, deve ser levada
em considerao para se evitar problemas de compatibilidade com verses futuras dos navegadores.
Outro comando muito utilizado o que permite desenhar uma linha horizontal na pgina. Sua estrutura
similar a do comando anterior no que se refere a incluir uma barra inclinada para indicar seu
prprio fechamento. O comando do qual estamos falando o: <hr />.
Vejamos um exemplo destes comandos:
<html>
<head>
</head>
<body>
Texto inicial <br /><br /><br />continuao
<hr />
Texto final
</body>
</html>
Introduo
Neste captulo explicaremos os distintos tipos de listas que podem ser elaboradas com a linguagem
HTML. Para cada um desses tipos, explicaremos quando a mesma dever ser utilizado,
enumeraremos as tags que a linguagem oferece e mostraremos um exemplo.
Ao concluir a leitura deste captulo voc ser capaz de escolher o tipo de lista que deseja elaborar e
cri-la corretamente usando HTML.
Listas em HTML?
Listas no enumeradas.
Listas numeradas.
Listas de definies.
Listas em HTML
Uma lista dentro de um texto uma serie de oraes (s vezes at mesmo pargrafos inteiros)
correlacionadas entre si, pois, em conjunto, explicam ou enumeram melhor algo em comum.
As listas so encontradas diariamente como sequncias numeradas quando se indicam os passos a
serem seguidos para realizar algum processo, tambm as vemos como sequncias de pontos quando
as mesmas mencionam as caractersticas de algum objeto.
A linguagem HTML nos oferece a possibilidade de programar trs tipos distintos de listas. Tais tipos
so os seguintes:
Listas numeradas
Listas no numeradas
Listas de definies
Vejamos em que consiste e como podemos elaborar cada uma delas.
Listas no enumeradas
As listas no enumeradas so encontradas com muita frequncia em todo tipo de texto. Sem precisar
ir muito longe, anteriormente pudemos ver um exemplo claro deste tipo de lista.
A principal caracterstica das listas no enumeradas a presena de um smbolo que antecede cada
um dos elementos que a compem. Esse smbolo costuma ser um trao - ou em certas ocasies um
pequeno ponto o algum outro tipo de caractere especial.
Listas no enumeradas podem ser criadas em HTML mediante a combinao de dois pares distintos
de tags.
Para descrever os dois tipos de tags que devem ser utilizadas na construo de uma lista veremos e
no podia ser de outra forma - a seguinte lista:
Para delimitar o comeo e o final de uma lista, isto , a rea compreendida entre o
inicio do primeiro dos elementos e o final do ltimo elemento, so utilizadas as tags
<ul> e </ul>. denominada conforme o seu nome em ingls: unordered list (lista no
enumerada).
Para delimitar cada elemento da lista de forma individual, so utilizadas as tags <li> e
</li>. O nome desta outra tag proveem de list tem (elemento de lista).
Vejamos um exemplo baseado na lista anterior:
<html>
<head>
</head>
<body>
<p> Para descrever os dois tipos de tags que devem ser
usadas na construo de uma lista observe a lista abaixo:
</p>
<ul>
<li>Para delimitar o comeo e o final de uma lista, isto ,
a rea compreendida entre o inicio do primeiro dos
elementos e o final do ltimo elemento, se utilizam as tags
ul e /ul.</li>
<li>Para delimitar cada elemento da lista individualmente,
se utilizam as tags li e /li.</li>
</ul>
</body>
</html>
Resumindo o exposto anteriormente podemos dizer que quando desejarmos criar uma lista de itens
no enumerada devemos usar um par de tags <ul> e </ul> em torno de toda a lista para indicar que o
contedo dever ser mostrado como tal.
Alm disso, para cada uma das linhas que desejarmos mostrar como elementos independentes da
lista, devem ser inseridas entre as tags <li> e </li>.
No exemplo anterior vemos como a lista exibida no navegador usando apenas pequenos pontos
pretos como identificadores de cada elemento. Mais uma vez, devemos informar que o formato,
assim como a distncia das margens e a quantidade de espao entre os elementos, podem ser
manipulados com o uso da linguagem de estilo CSS.
Listas numeradas
As listas numeradas so encontradas com maior frequncia em textos um pouco mais tcnicos como
manuais, tutoriais, receiturios e formulrios. Seu uso est relacionado com a enumerao de uma
serie de passos que devem ser executados em uma determinada ordem.
A principal caracterstica das listas numeradas , obviamente, a presena de um nmero que precede
cada elemento.
As listas numeradas, da mesma forma que no caso anterior, podem ser elaboradas com a combinao
de dois pares distintos de tags.
inicio do primeiro dos elementos e o final do ltimo elemento, se utilizam as tags <ol>
e </ol>. O nome desta tag est relacionado com seu nome em idioma ingls: ordered
list (lista numerada).
Para delimitar cada elemento da lista de forma individual, como no caso anterior, so
utilizadas as tags <li> e </li>.
<html>
<head>
<title>Exemplo 9.1</title>
</head>
<body>
<p>Para mostrar na tela uma lista numerada devemos
seguir os passos mencionados a seguir: </p>
<ol>
<li>Coloque um par de tags (ol e /ol) para definir a rea
da lista.</li>
<li>Para cada elemento que voc deseje incluir na
lista, coloque o texto correspondente inserido entre as
tags li e /li.</li>
</ol>
</body>
</html>
No exemplo anterior podemos ver como uma lista exibida no navegador usando nmeros
consecutivos que precedem a cada elemento. Usando a linguagem de estilo CSS podemos fazer
com que esta numerao aparea em forma de nmeros romanos, ou mesmo com letras do
alfabeto, etc.
Listas de definies
A diferena desta para as anteriores consiste em que cada um dos seus elementos tem um ttulo
prprio com a explicao (ou definio) do mesmo na sequncia.
As listas de definies podem ser construdas mediante a combinao de trs pares distintos de tags,
que so:
inicio do primeiro dos elementos e o final do ltimo elemento, se utilizam as tags <dl>
e </dl>. O nome desta tag est relacionado com seu nome em idioma ingls: definition
list (lista de definies).
Para identificar cada um dos ttulos da lista, devem ser usadas as tags <dt> e </dt>,
cujos nomes proveem do ingls definition term (termo definido).
Logo aps cada termo definido com as tags anteriores, se deve colocar sua respectiva
explicao usando as tags <dd> e </dd>, as quais proveem do termo definition
description (descrio da definio).
<html>
<head>
<title>Exemplo 9.2</title>
</head>
<body>
<p>Existem trs tipos de listas que podem ser feitas
com HTML: </p>
<dl>
<dt>Listas enumeradas.</dt>
<dd>Usadas para enumerar de uma serie de passos
a serem executados em determinada ordem.</dd>
<dt>Listas no enumeradas.</dt>
<dd>Usadas principalmente para estabelecer uma
serie de caractersticas individuais.</dd>
<dt>Listas de definies.</dt>
<dd>Usadas em listas de itens com suas
respectivas descries individuais.</dd>
</dl>
</body>
</html>
Devemos reforar, mais uma vez, que a linguagem de estilo CSS pode ser utilizada para
personalizar a forma como a informao exibida .
Introduo
Neste captulo explicaremos algumas tags um pouco mais complexas do que as anteriores no que se
refere a sua estrutura interna. Isto , tags que podem atuar de diferentes formas dependendo de certos
parmetros internos.
Ao concluir a leitura deste captulo voc ser capaz de compreender e utilizar tags mais complexas
do que as j estudadas at aqui. Poder criar seus prprios links, exibir imagens e tambm modificar
o tipo de letra, a cor e o tamanho das mesmas.
Tags com atributos
Exibindo imagens
Tags com atributos

At aqui temos utilizado as tags de HTML em suas formas bsicas, isto , apenas para indicar aonde
comea e aonde finda uma rea especial, ou em que lugar se deve executar uma ao, como uma
quebra de linha, por exemplo. Porm, as tags podem ser um pouco mais complexas. Podem ser
capazes no apenas de indicar o que fazer, mas tambm de dizer como faz-lo.
Para conseguir isso, se faz necessrio explicar o que so os atributos dentro das tags.
Tomemos como exemplo a tag usada para exibir uma imagem: <img />. Esta tag em si mesma no
tem nenhuma utilidade a no ser que possamos indicar qual a imagem que desejamos mostrar. Para
isso, se deve incluir dentro da tag o atributo chamado src. A forma de faz-lo a seguinte:
<img src=imagem1.jpg />
Sempre que necessitarmos indicar um valor a um atributo em uma tag HTML, necessrio
colocarmos o nome do atributo, seguido do smbolo de igualdade e em seguida o valor que
desejamos colocar entre aspas.
Geralmente, os valores dos atributos podem ser inseridos entre aspas simples, duplas, ou s vezes
at sem aspas. No entanto, eu particularmente recomendo com muita nfase ser coerente no uso das
aspas. No meu caso, prefiro usar sempre aspas simples nos atributos HTML. No entanto, essa uma
deciso pessoal, voc dever tomar a sua e segui-la sempre que possvel para evitar problemas
futuros com os navegadores.
Vejamos alguns exemplos de tags que usam atributos:
Exibindo imagens
Tal como mencionamos anteriormente, a tag <img /> serve para mostrar certa imagem. Esta tag,
como a quase todas as tags de HTML, possui diversos tipos de atributos. No entanto, falaremos dos
mais importantes:
src: utilizado para indicar o nome ( preciso indicar o diretrio) da imagem.
border: Indica a grossura (largura) da borda a ser mostrada ao redor da imagem.
width: Indica o largura em pixels em que se deve exibir a imagem.

height: indica a altura em pixels da imagem a ser mostrada.
<html>
<head>
</head>
<body>
<center>
<img src=imagem1.jpg border=1/>
Exemplo
</center>
</body>
</html>
importante destacar que os atributos width e height, os quais nos permitem ajustar o tamanho
da imagem, funcionam de maneira correlativa entre eles. Isto , se alterarmos apenas um deles,
por exemplo, a altura da imagem, Ento a largura da mesma se alterar de forma automtica
proporcionalmente a mudana na altura.
Se mudarmos apenas a largura da imagem, atribuindo um valor ao atributo width, ento a altura da
imagem a ser mostrada ser alterada da mesma forma.
No entanto, devemos ter cuidado ao alterarmos ambos os atributos simultaneamente, porque nesse
caso o navegador ajustar a imagem para que se adeque a ambas as especificaes fazendo com que
a imagem resulte esticada em uma das direes.

A tag <a> e sua correspondente tag de fechamento </a>, servem para definir os chamados links.
Um link, um texto ou imagem que ao ser selecionado com o mouse, nos conduz a outra pgina ou a
uma seo diferente dentro da mesma pgina.
A estrutura geral de uma tag tipo <a> a seguinte:
<a href=endereo da pgina>Texto que queremos
mostrar</a>
Como podemos ver, o atributo principal desta tag o seguinte:

href: indica a pgina ou seo que o navegador deve acessar se o usurio clicar no link.
Em outras palavras, o navegador ir mostrar o texto que foi colocado entre as tags de abertura e
fechamento (geralmente sublinhado) e se o usurio clicar sobre esse texto, Ento o navegador
acessar a pgina descrita no atributo href.
<html>
<head>
</head>
<body>
Voc deve clicar no link para ir para a
<a href=pagina1.htm>pgina 2</a>
</body>
</html>
Outro dos atributos desta tag, no menos importante que o anterior, o seguinte:
target: este atributo especifica o local que o link abrir.
Os principais valores do atributo target so os seguintes:
_blank
_self
Abre a pgina especificada em uma

nova janela do navegador ou em
outra guia do mesmo.
Abre o link encima da pgina atual
(este o valor padro deste
atributo).
Tal como mencionamos anteriormente, os links no precisam obrigatoriamente ser textos. Podemos
usar uma imagem como link sendo que o usurio, ao clicar sobre ela, ir abrir uma pgina da mesma
forma que fazemos com os links textuais.
Vejamos um exemplo disso:
<html>
<head>
</head>
<body>
Voc pode clicar sobre a imagem para ir para pgina
seguinte:
<a href=pagina1.htm>
<img src=imagem1.jpg border=1/>
</a>
</body>
</html>

Nas sees anteriores temos visto como podemos alterar algumas das caractersticas do texto, no
entanto no havamos mencionado ainda como mudar o tipo de fonte, por exemplo, Isso porque ainda
no estvamos preparados para uma tag com mltiplos atributos como font.
As tags <font> e sua correspondente tag de fechamento </font> servem para alterar o tipo, cor e
tamanho da fonte utilizada entre ambos delimitadores. Os principais atributos so:
face: Nome da fonte (font), por exemplo Tahoma, Courier o Arial.
size: Tamanho de cada caractere.
color: Cor do texto.
preciso esclarecer que o uso excessivo do comando <font> em HTML, tende a complicar a
legibilidade do cdigo, por isso, recomendamos seu uso seja feito de maneira um tanto
cautelosa.
Vejamos um exemplo da utilizao deste comando:
<html>
<head>
</head>
<body>
<font face=Arial size=15>
Este texto est em Arial 15.
</font>
<font face=Courier size=13 color=blue>
Este outro texto est em Courier 13 e na cor azul.
</font>
<font face=Arial size=14>
Este, em contrapartida, est em Arial 14.
</font>
</body>
</html>
Como mencionamos anteriormente, existe uma melhor forma de controlar os tipos de letra em
uma pgina Web, ou seja, usando a linguagem CSS, entretanto, esse no o objetivo do
presente livro.
Introduo
Neste captulo falaremos das tags conhecidas como demarcadoras, isto , as que delimitam reas
dentro da tela para distribuir os contedos.
Na primeira parte explicaremos as tabelas de maneira profunda, as quais nos permitem dividir certo
espao em linhas e colunas. Logo explicaremos algumas tags alternativas para organizar a
informao.
Ao concluir a leitura deste captulo voc ser capaz de elaborar e construir tabelas, criar sees
horizontais dentro da tela e criar blocos dentro dos textos para trabalhar na formatao.
A tag <div>
A tag <span>
Nota final

Existem distintas maneiras de organizar a informao dentro de uma pgina. Uma delas, no que seja
necessariamente a melhor, consiste em utilizar tabelas.
Uma tabela em linguagem HTML basicamente um quadro ao estilo das planilhas de clculo. A
informao dentro de uma tabela, da mesma maneira que em uma planilha Excel, organizada
em linhas e colunas.
Existem trs tipos de tags usadas na criao de uma tabela HTML. Vejamos a funo de cada uma
delas:
A tag mais externa de uma tabela a que indica onde comea e termina a definio da
mesma. Esta tag que estamos tratando a <table>, ela tambm tem sua correspondente
tag de fechamento que </table>.
Dentro da tabela, deve ser definida cada uma das linhas que a constituem usando um par
de tags de inicio e fim de linha. Elas so: <tr> e </tr>.
Dentro de cada linha por sua vez, se deve indicar cada uma das colunas que iro
aparecer dentro. Para isso utilizada a tag <td> e sua tag de fechamento </td>.
Por exemplo, se queremos construir uma tabela com trs linhas e trs colunas, devemos proceder da
seguinte forma:
1. Primero se devem colocar (obrigatoriamente) as tags de inicio e fim da tabela.
2. Dentro desse par de tags, deve-se colocar um par de tags de linha para cada uma das
linhas que desejamos definir. Isto , trs casais de tags <tr> e </tr>.
3. Entre cada par de tags de linha devem-se colocar tantos pares de tags de coluna quantos
forem necessrios. Em nosso caso, ser necessrio colocar trs pares de tags <td>
</td>
4. O contedo de cada clula deve ser escrito dentro do par <td></td> correspondente.
Vejamos esse exemplo precisamente:
<html>
<head>
</head>
<body>
<table border=1>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
</table>
</body>
</html>
Um dos problemas ao se trabalhar com tabelas que qualquer erro no fechamento de uma das tags,
ou colocar acidentalmente mais colunas em uma das linhas, podem produzir resultados imprevisveis.
Isto , se voc for trabalhar com tabelas, dever ser bastante paciente e cuidadoso.
recomendvel que antes de se fazer uma tabela em HTML desenhe sobre uma folha de papel
as linhas e as colunas que sero necessrias. Como voc j deve ter notado no exemplo anterior,
a quantidade de tags usadas para estruturar a tabela, costuma exceder em cdigo aos contedos
que desejamos organizar.
Existem dois atributos que podem dar mais poder as tabelas que voc deseja criar, eles so
utilizados para unir duas ou mais linhas, ou duas ou mais colunas. Estes atributos se chamam rowspan
e colspan. Vejamos os efeitos deles mudando um pouco o exemplo anterior:

<html>
<head>
</head>
<body>
<table border=1>
<tr>
<td rowspan=2>1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td colspan=3>C</td>
</tr>
</table>
</body>
</html>
Como podemos ver no exemplo anterior, usando o atributo rowspan conseguimos fazer com que uma
das clulas se propague para as linhas seguintes. por isso, que ao definir as linhas para onde a
coluna original se propagou, devemos descrever uma linha menos. O atributo colspan, por sua vez,
nos permite unir duas ou mais colunas com uma s definio.
Existem alguns atributos adicionais nas tags das tabelas que ajudam muito ao programador na hora de
ajustar o estilo de uma tabela. A seguir citaremos alguns.
bgcolor
Cor de fundo aplicvel a toda a rea

da tabela.
Indica se a borda deve ser visvel (1)

ou invisvel (0).
Indica o espao entre a borda da
cellpadding
clula e o contedo.
cellspacing Indica o espao entre clulas.
Largura da tabela em pixels ou em
width
porcentagem com referencia ao
demarcador externo.
border

Indica como se deve alinhar o
align
contedo de cada clula na linha
(right, left, center, justify).
bgcolor Cor de fundo aplicvel a toda a linha.
Alinhamento no eixo vertical (top,
valign
middle, bottom).
Indica como se deve alinhar o
align
contedo da clula (right, left, center,
justify).
bgcolor Cor de fundo aplicvel a clula.
Nmero de colunas a mesclada em
colspan
uma s.
Altura em pixels da clula ou em
height
porcentagem com referncia a tabela.
Nmero de linhas a ser mescladas
rowspan
como uma s.
Alinhamento no eixo vertical (top,
valign
middle, bottom).
Largura da clula em pixels ou em
width
porcentagem com referncia a tabela.
As tabelas em HTML podem ser aninhadas, isto quer dizer que podemos por uma tabela completa
dentro de uma das clulas de outra tabela. Desta forma, podemos fazer estruturas sumamente
complexas e por sua vez difceis de compreender caso tenhamos a necessidade de procurar por um
erro.

Como mencionamos vrias vezes anteriormente, as tabelas no so a melhor maneira de organizar as
informaes dentro de uma pgina Web. Por isso, mostraremos alternativas mais eficazes.
A tag <div>
Este talvez seja o mtodo mais recomendado para organizar a informao dentro de uma pgina Web.
Trata-se de um par de tags <div> e sua correspondente tag de fechamento </div>. Esse par de tags,
em combinao com alguns atributos de estilo (usando a linguagem CSS) so capazes de alcanar
praticamente qualquer resultado que voc pretenda.
Sempre que se colocar parte da informao em um bloco tipo <div>, o navegador parecer inserir
uma quebra de linha antes e outra depois do contedo. Isto , que em sua forma mais simples, um div
no nada a mais que uma seo horizontal de nossa pgina. No entanto, h maneiras de informar a
uma seo tipo div a quantidade exata de espao vertical e horizontal que necessitamos que ela
abranja, igualmente podemos indicar-lhe a cor de fundo e at dar um estilo unificado a todo o
contedo. Tudo isso, como j temos dito, pode ser conseguido por meio da linguagem CSS.
As zonas div podem ser aninhadas, ou seja, possvel colocar umas dentro das outras. Desta forma
poderamos usar um div que englobe toda a pgina, dentro desse div, podemos criar outro para o
cabealho e mais um para o corpo. Alm disso, podemos, por exemplo, criar uma, duas ou trs
sees independentes dentro do corpo, cada uma com suas caractersticas de formato particulares.
Os blocos criados com as tags div, tambm podem ser organizados horizontalmente um ao lado
do outro. Isto , no apenas devemos pensar nas div como sees horizontais da pgina.
Podemos, com ajuda de CSS, criar sees div em forma de quadrados ou retngulos a nossa
convenincia. Talvez seja esta a caracterstica que proporciona maior versatilidade a este tipo
de tags.
A tag <span>
Diferentemente da anterior, a tag span no visa estabelecer uma rea dentro da pgina. Sua utilidade
est em agrupar certa quantidade de informao para aplicar-lhe um estilo comum com ajuda de CSS.
Um bloco span utilizado da mesma forma que algumas em tags, como <font>, <b>, <i>, etc.
Nesses casos, como j explicamos em outra oportunidade, colocamos uma tag de abertura em certa
parte do texto e outra ao final da rea que desejamos aplicar certo efeito (itlico, negrito ou uma
fonte em particular).
Pois bem, o bloco span pode ser usado para delimitar pores do texto e assim manipul-los com
CSS para aplicar aos mesmos qualquer tipo de estilo.
Nota final
Ainda que as tags div e span acrescentem legibilidade a nosso cdigo, sero de bem pouca utilidade
para um programador que no conhea CSS, j que atravs desta linguagem que se torna possvel
explorar a fundo as capacidades de ambas.
Qualquer pgina elaborada usando tabelas pode ser feita com o uso de elementos div. Alm
disso, qualquer formato que desejemos aplicar a reas inteiras ou a partes do texto pode ser
realizado inserindo um destes blocos e manipulando o estilo externamente.
por isso que recomendamos iniciar o quanto antes o estudo da linguagem de estilos CSS. Ao fazer
isso, voc poder tirar um maior proveito de tudo o que aprendeu atravs deste livro de HTML.
Introduo
Neste captulo explicaremos o conceito de quadros (frames) na criao de pginas Web.
Mostraremos um par de exemplos e explicaremos as vantagens e desvantagens deste tipo de
ferramentas.
Ao concluir a leitura deste captulo voc ser capaz de elaborar pginas Web utilizando a
funcionalidade de quadros independentes.
Criando de pginas com quadros.
Aninhando estruturas de quadros.
Consideraes finais
Criando pginas com quadros

Em condies normais, o navegador carrega e exibe uma s pgina Web dentro de si mesmo. No
entanto, existe a possibilidade de dividir o espao dentro da rea do navegador de forma que
possamos exibir, digamos, uma pgina Web do lado esquerdo, e outra no lado direito, atravs do
conceito de quadros (ou frames).
Para entender um pouco melhor o que estamos falando, imaginemos que a tela do televisor de um
casal com gostos incompatveis, poda ser dividida em trs sees. Na metade da esquerda
carregaramos um canal de series para a esposa, na metade da direita um canal de esportes para o
esposo, e na parte de baixo reservaramos uma estreita faixa na que pudssemos mostrar as
principais noticias em tempo real. Isto exatamente o que significa trabalhar com quadros.
Uma pgina construda com quadros no final das contas a juno de varias pginas. Isto , se
precisarmos criar uma estrutura de quadros, por exemplo, para carregar duas pginas independentes
em duas sees da tela, Ento devemos criar trs pginas Web:
1. Uma pgina controladora que contenha os comandos necessrios para definir a estrutura
de quadros que se quer utilizar, ou seja, uma que indica que ns queremos carregar
contedos independentes nas duas metades da tela.
2. Uma pgina para uma das sees definidas.
3. Outra pgina para a outra seo restante.
O que chamamos de pgina controladora, no nada alm de uma pgina Web que contenha
unicamente comandos relacionados com a estrutura de quadros. Isto , onde deve indicar
quantos quadros sero carregados, como sero distribudos no espao, que medidas tero, e o
mais importante, que pginas sero carregadas em cada um deles.
O conceito de quadros no pode ser usado por qualquer navegador. Existem certos navegadores
antigos, e alguns mais modernos, mas que funcionam dentro de dispositivos mveis, que no
suportam esse conceito. Devido a isso, possvel incluir dentro da delimitao da pgina, uma rea
que funcione como pgina alternativa.
Resumindo, uma pgina com quadros apresenta as seguintes funes:
Estabelece duas ou mais sees (verticais ou horizontais) dentro da rea do navegador.
Para cada rea, se estabelece um nome de arquivo da pgina que ser carregado em dita
seo.
Opcionalmente permite definir uma pgina (geralmente uma pgina de alerta) para ser
mostrada pelo navegador no caso de no suportar quadros.
Vejamos um exemplo:
<html>
<head>
</head>
<frameset cols=80,*>
<frame src=PaginaEsq.html />
<frame src=PaginaDir.html />
<noframes>
<body>
Lamento.<br />
O conceito de quadros no suportado pelo seu
navegador.
</body>
</noframes>
</frameset>
</html>
Se nos fixarmos no exemplo anterior, podemos notar que existem trs tipos distintos de tags que no
havamos trabalhado at agora:
A tag <frameset> e sua correspondente tag de fechamento </frameset> servem para
indicar ao navegador que desejamos definir uma zona de quadros. Em geral essa
zona corresponde totalidade da rea do navegador. Nesta tag (frameset) podemos
indicar se desejamos dividir a rea em linhas (usando o atributo rows) ou em colunas
(usando o atributo cols).
A tag <frame> o que chamamos de tag declarativa. Isto , que no possui tag de
fechamento. Ela serve basicamente para indicar o nome da pgina que se pretende
carregar nessa rea especfica.
As tags <noframes> e </noframes> delimitam um rea onde se deve escrever a pgina
alternativa, ou seja, o contedo que desejamos mostrar unicamente nos casos em que o
navegador do usurio no suporte o conceito de quadros.
Voltando ao exemplo anterior, podemos ver que a tag frameset faz uso do atributo cols, ao qual lhe
temos atribuido um valor de 80,*.
O que significa isso?
Quer dizer que desejamos dividir o espao por colunas (verticalmente) e que desejamos criar s
duas delas (porque a lista de valores separados por vrgula contem apenas dois elementos).
Alm disso, a primeira das colunas que estamos criando ter uma largura de 80 pixels e a segunda
vai ocupar o espao restante (indicado pelo asterisco).
No que se refere as tags frame, podemos ver que nelas estamos fazendo uso de apenas um atributo
chamado src. Este atributo serve para indicar o nome da pgina que desejamos carregar nesse site.
importante destacar que h uma correlao muito precisa entre o comando frameset e seus
comandos frame. Isto , digamos hipoteticamente que temos um comando frameset que vai trabalhar,
por exemplo, com trs linhas:
<frameset rows=100,150,*>
No comando anterior temos especificado uma diviso da rea de trabalho em trs seces horizontais
(rows), das quais a primeira ter uma altura de 100 pixels, a segunda ter uma altura de 150 pixels e
a terceira ocupar a rea restante.
Dentro do comando frameset anterior, isto , entre esse comando e sua tag de fechamento, devem ser
especificados nessa mesma ordem os trs comandos frame que definam as pginas que iro ser
carregadas em cada um deles. Isto , o primeiro comando frame indicar a pgina que ser carregada
no quadro superior de 100 pixels, o segundo comando frame indicar a pgina do segundo quadro de
150 pixels e o terceiro a pgina para a rea restante.
Aninhando estruturas de quadros

Uma das caractersticas dos comandos frame e frameset que os mesmos podem ser aninhados. Ou
seja, possvel eliminar um dos frames na estrutura descrita anteriormente e troc-lo por uma
definio completa de frames adicional. Desta forma poderamos ter, por exemplo, uma diviso de
linhas na qual uma das linhas seria formada por duas ou mais colunas.
Vejamos um exemplo do que estamos falando:
<html>
<head>
</head>
<frameset rows=40,*,20>
<frame src=Top.html />
<frameset cols=60,*>
<frame src=Left.html />
<frame src=Right.html />
</frameset>
<frame src=Bottom.html />
<noframes>
<body>
Lamento.<br />
O conceito de quadros no suportado pelo seu
navegador.
</body>
</noframes>
</frameset>
</html>
O exemplo anterior mostra duas estruturas de quadros uma dentro da outra.

O primeiro comando frameset divide a rea em trs seces horizontais: a primeira de 40 pixels, a
do meio adaptvel e a terceira (inferior) de 20 pixels.
Na rea superior ser indicado que se deve carregar a pgina chamada Top.html. Na rea inferior
ser indicado que se deseja carregar a pgina Bottom.html. Porm, o que deveria ser o frame central,
ser substitudo por uma nova estrutura completa de frameset. Isto quer dizer que esse espao
restante dever ser redistribudo segundo outras regras.
O segundo bloco frameset, que ser exibido na rea central, indica a criao de dois novos quadros
tipo coluna (verticais). O primeiro deles deve ter uma largura de 60 pixels e conter a pgina
chamada Left.html e o seguinte ter uma largura ajustvel e nele se exibir a pgina Right.html.
O resultado final seria uma pgina formada por quatro pginas independentes entre elas e convivendo
na mesma janela do navegador. Parece tentador, porm, nossa recomendao para no utilizar em
tuas aplicaes quadros desnecessariamente.
Consideraes finais
H alguns anos atrs as estruturas de frames eram plenamente justificadas pela necessidade de
recarregar apenas uma parte da tela e assim poder acelerar o funcionamento do site Web. Hoje em
dia, a tecnologia de internet tem feito grandes progressos e o tempo de carregamento das pginas se
torna cada vez menos importante. Ainda mais com o surgimento de tecnologias como Ajax que nos
permite recarregar partes inteiras da pgina sem ter que usar quadros.
Talvez a principal desvantagem de usar quadros que muitas vezes se torna bem difcil
controlar a coerncia das pginas que so carregadas. Existem muitas pginas que usam
quadros para ter um menu de um lado e os contedos do outro, mas o programador costuma
investir muito tempo trabalhando para impedir situaes nas quais ambos os lados do site
venham mostrar contedos no relacionados entre si. Isto acontece em sua maior parte, quando
o usurio pressiona o boto Voltar (Back) do navegador, quem geralmente ter de recarregar
a pgina anterior do ltimo quadro recarregado.
Introduo
Este captulo talvez o mais denso e importante de todo o livro. Nele abordaremos o estudo dos
formulrios digitais, os quais nos permitem interagir com os usurios de nossas pginas.
Ainda, estudaremos tambm um por um os diferentes elementos utilizados nos formulrios, como as
caixas de texto, os botes de radio e as caixas de seleo.
Para cada tag estudada ser mostrado um exemplo prtico simples, a fim de complementar a
explicao terica.
Ao concluir a leitura deste captulo voc ser capaz de criar formulrios que incluam distintas
interfaces para satisfazer distintos tipos de necessidades.
Declarando um formulrio
As listas suspensas
Caixas de texto.
Campos de texto
Botes tipo rdio.
Elementos tipo Check Box
Botes
Tudo o que temos falado at este momento sobre HTML se refere a como exibir as informaes em
um site Web. Porm, a comunicao na internet se caracteriza por ser bidirecional, por isso, devemos
aprender tambm como obter informao a partir do usurio.
O universo dos papeis impressos basicamente unidirecional, isto , os livros, revistas, jornais e
cartazes publicitrios so absolutamente passivos. Porm, uma pequena porcentagem destes tem
objetivo contrrio, ou seja, obter informao do usurio para que seja analisada pelo ente que
originalmente o imprimiu.
Estamos falando dos chamados formulrios.
No mundo HTML, um formulrio um conjunto de comandos que nos permitem solicitar ao

usurio certa informao para ser processada em um dado servidor onde se situa nossa pgina.
Vamos dar uma olhada nas tags com as quais podemos construir um formulrio Web.
Definindo um formulrio
Todos formulrio delimitado por uma tag especial chamada <form> e por sua correspondente tag
de fechamento </form>. Estas tags agrupam todos os itens que fazem parte do formulrio em si e que
apresentam um mesmo mtodo de processamento.
Por exemplo, cada vez que em uma pgina Web vemos uma seco de login, isto , uma entrada de
dados para nome de usurio, senha e um boto para enviar os dados, estamos vendo um formulrio.
As tags <form> e </form> no apresentam nenhum efeito visvel sobre a pgina. So o que
chamamos de declarativas. No entanto, elas produzem efeito na forma como os elementos contidos
entre ambas sero processados. Em nosso exemplo do login, a tag form que no vemos seria a
encargada de indicar ao navegador o que deve ser feito com os dados quando o boto enviar for
pressionado. Em geral, os dados so enviados a outra pgina Web que se encarrega de realizar certas
aes segundo a informao recebida.
Os atributos mais importantes da tag form so estes:
name: Este atributo serve para identificar o
nome do formulrio, o qual sumamente importante quando se deseja manipular o
comportamento da tela usando JavaScript.
action: Atravs desse atributo se estabelece

o nome da pgina para a qual sero transmitidos os dados do formulrio para serem
processados.
method: Este um atributo opcional que
indicar o mtodo que ser usado na chamada da p. Existem distintos mtodos de
transmisso, no entanto os principais so GET e POST.
Devido ao fato de que a tag form em si mesma carece de uma representao visual, e tambm por seu
uso ser apreciado apenas quando combinado com outras tags de captura de dados, nos absteremos de
mostrar exemplos, entretanto, nas sees seguintes iremos usar esta tag repetidas vezes.
As listas suspensas
Para qualquer usurio de internet completamente familiar o conceito de uma lista suspensa ou
combo box, portanto, no creio que seja preciso se aprofundar demais sobre sua definio.
Em HTML as listas suspensas so conseguidas usando dois tipos diferentes de tags. A primeira delas
a que se refere ao elemento em si mesmo, se chama <select> e tem uma tag de fechamento
</select>. A segunda a usada para especificar cada uma das opes que compem a lista, se chama
<option> e como voc j deve ter imaginado, sua tag de fechamento </option>.
Os principais atributos da tag select so os seguintes:
name: Indica o nome do elemento.
essencial para se processar o formulrio, j que ao ser enviado, este o nome com o
qual ser possvel recuperar a opo que o usurio selecionou.
disabled: Sempre que este atributo aparecer
especificado dentro da tag select, o elemento aparecer como desabilitado, isto , o
usurio no poder mudar o seu valor. Este atributo afirmativo (no possvel dar-lhe
um valor).
multiple: Quando esta opo aparecer dentro
da tag <select>, ser produzida uma mudana significativa no comportamento do
elemento, j que o usurio ter a possibilidade de selecionar mais de uma opo
simultaneamente.
size: Este atributo permite estabelecer o
nmero mximo de opes que podero ser exibidas simultaneamente no momento em
que o usurio estiver fazendo uma seleo.
A tag option, como j indicamos, permite estabelecer cada uma das opes que sero mostradas
sempre que o usurio selecionar a lista suspensa.
Cada uma das opes dentro de um select cumpre uma dupla funo. Por um lado existe o texto que
ser mostrado e por outro o valor que se deseja enviar como resultado quando essa opo for
selecionada. Por exemplo, em um combo box usado para perguntar ao usurio seu gnero, as opes
visveis sero Masculino e Feminino, no entanto, obviamente que os valores que se deseja
registrar so M e F.
O texto para mostrar em cada opo dever ser escrito entre as duas tags <option> e </option>.
Agora, quanto aos atributos da tag em si, podemos destacar estes:
value: Usado para indicar o valor que ter o
select caso a opo seja selecionada.
selected: Este atributo indica que essa opo
o padro para lista suspensa a qual pertence.
Vejamos um exemplo:
<html>
<head>
</head>
<body>
<form name=formulrio >
Indique sua profisso:
<select name=profisso >
<option value=0 selected>Nenhuma</option>
<option value=1>Programador</option>
<option value=2>Especialista em
redes</option>
<option value=3>Designer grfico</option>
<option value=4>Adm. de banco de
dados</option>
</select>
</form>
</body>
</html>
Caixas de texto
Uma Caixa de texto ou textarea no nada mais que uma rea disponvel para que o usurio
escreva uma ou mais linhas de texto simples (no formatado).
Para mostrar uma caixa de texto em HTML devemos usar a tag <textarea> e tambm sua respectiva
tag de fechamento </textarea>. Entre elas podemos escrever todo o contedo que desejamos exibir
dentro da caixa de texto na hora que a pgina carregar.
Os principais atributos da tag <textarea> so estes:
name: Se trata do nome do elemento em si.
muito importante na hora que pgina, que o contenha, transmitir os seus valores para
outra pgina, pois ser a senha para acessar a informao escrita pelo usurio.
disabled: Este atributo declarativo indica
que o elemento est desabilitado. Se aparecer esta palavra dentro da tag porque se
deseja que o usurio no possa mudar o contedo mostrado.
rows: Este atributo serve para especificar o
nmero de linhas que queremos mostrar de uma vez. Vale dizer que o mesmo pode fazer
scroll dentro do texto, isto , podemos exibir 3 linhas, mas o texto real poder conter
mais que isso.
cols: Indica a largura da rea medida pela
quantidade de caracteres por linha.
readonly: Este atributo afirmativo indica que
o elemento est no modo de somente leitura, ou seja, o usurio no poder fazer
modificaes no contedo. A diferena em relao ao atributo disabled consiste no fato
de que este ltimo mostra o elemento em um formato distinto o que torna evidente que o
mesmo no selecionvel. Em contrapartida Readonly, mostra o contedo como seria
visto caso o elemento estivesse habilitado para mudanas.
Vejamos um exemplo:
<html>
<head>
</head>
<body>
Endereo: <br />
<textarea rows=5 cols=50>
Este controle uma grande ajuda para a captura
de textos um pouco mais longos.
</textarea>
</form>
</body>
</html>

A tag input tem uma tremenda importncia em HTML pelas mltiplas formas que ela pode adoptar.
Com este tipo de tag podemos conseguir uma captura de texto, ou um boto, ou um controle tipo
radio, ou uma caixa de marca, entre outras...
O atributo que define a forma que este elemento haver de tomar type.
Comecemos por enumerar alguns dos atributos que so comuns a todas as formas para depois
desenvolver cada uma em particular:
type: Este o atributo que indica a forma que

ter o elemento. Nas prximas seces vamos analisar um por um todos os possveis
valores.
name: Da mesma forma que nos anteriores
exemplos, name o atributo principal j que estabelece o nome com o qual ser
acessado o contedo da pgina que processar o formulrio. Tambm nos permite
identificar o elemento se desejarmos manipul-lo usando JavaScript.
id: Este atributo tambm muito importante
na hora de trabalhar o contedo do elemento em tempo real usando JavaScript, no
entanto, esse assunto est fora do foco deste livro.
disabled: Como j indicamos anteriormente
em outros elementos, este atributo indica que o elemento dever aparecer como
desabilitado.
Passemos agora a estudar separadamente cada uma das formas deste elemento.
Campos de texto
Os campos de texto so as entradas de dados mais comuns em qualquer formulrio Web. Os vemos
sempre que, por exemplo, so solicitados o nosso nome, sobrenome ou nome de usurio.
Para criar um campo de texto em HTML tudo o que devemos fazer inserir uma tag input com o
atributo type igual a text.
<input type=text />
Alm dos atributos gerais de qualquer tag input, que foram citados anteriormente, podemos
mencionar os atributos a seguir:
value: Este atributo permite ao elemento um
certo contedo. Isto , permite por um valor padro dentro dele.
Um dos exemplos mais recorrentes do emprego desse tipo de tags quando a utilizamos para
perguntar o nome e o sobrenome de uma pessoa. Vejamos esse exemplo:
<html>
<head>
</head>
<body>
Sobrenome:
<input type=text name=nome />
<br />
Nome:
<input type=text name=sobrenome />
</form>
</body>
</html>

Esses elementos so exatamente iguais aos anteriores, mas no exibem o texto que o usurio escreve,
mas em vez disso, mostram um carcter (smbolo) repetido tantas vezes quantas forem as letras
digitadas pelo usurio.
<input type=password />
O principal uso deste tipo de elemento como o leitor j deve ter imaginado, para solicitao de
senhas de usurio.
Vejamos um exemplo simples:
<html>
<head>
</head>
<body>
Nome de usurio:
<input type=text name=usurio />
<br />
Senha pessoal:
<input type=password name=senha />
</form>
</body>
</html>

Os campos invisveis so uma variante dos dois campos anteriores. Tal como o ttulo indica, sua
caracterstica principal a de no aparecer visivelmente na tela.
<input type=hidden />
A importncia de se ter um campo de texto invisvel no pode ser entendida a menos que
abordemos um pouco sobre o que pode ser feito com uma linguagem como JavaScript, mas como
j mencionamos outras vezes, isso est fora do foco deste livro.
No entanto, para ilustrar um pouco sobre o tipo de uso que estes elementos podem ter, devemos
recordar que todos os elementos dos formulrios transmitem seus contedos pgina seguinte. H
ocasies em que desejamos transmitir, alm dos dados do usurio, dados de controle nossos, como
um cdigo de sesso, ou talvez algum valor baseado no que o usurio escreve.
Botes tipo rdio

O uso principal dos botes do tipo rdio ou radio buttons para permitir ao usurio escolher uma
nica opo dentro de uma lista.

O termo radio buttons vem da comparao com os botes para mudar de emissora nos rdios dos
carros. Nesses aparelhos, ao apertar um dos botes, se destrava automaticamente o outro boto que
fora pressionado anteriormente. exatamente assim que funcionam os botes tipo radio em HTML.
Estes elementos funcionam em conjunto. Isto , um s elemento de tipo rdio no tem nenhum sentido,
pois ele sempre estar selecionado. Porm, s combinando vrios deles, que conseguiremos obter o
efeito desejado.
O formato mais bsico de um radio o seguinte:
<input type=radio />
O atributo name o que permite associar dois ou mais elementos de radio. Ou seja, se em um mesmo
formulrio queremos mostrar distintos grupos de elementos deste tipo para, digamos, preguntar o
gnero (Masculino ou Feminino) e o estado civil (Solteiro, Casado, Vivo ou Divorciado), devemos
criar seis elementos de radio distintos. No entanto, temos que procurar fazer com que o atributo name
dos dois primeiros seja o mesmo e que o dos outros quatro seja por sua vez igual entre eles. Sendo
assim, o navegador poder saber como os grupos esto formados.
Alguns dos atributos dos elementos de radio, alm dos j mencionados so:
checked: Este atributo indica que a opo
deve aparecer selecionada ao carregar-se a pgina.
value: Este atributo similar ao das tags
option dos combo boxes. Ou seja, permite estabelecer o valor a ser transmitido se
a opo em particular for selecionada.
Vejamos um exemplo que combina dois grupos destes elementos em um mesmo formulrio.
<html>
<head>
</head>
<body>
<b>Gnero: </b><br />
<input type=radio name=genero value=M
/>Masculino<br />
<input type=radio name=genero value=F
/>Feminino<br />
<br />
<b>Estado civil: </b><br />

<input type=radio name=estado value=S
/>Solteiro<br />
<input type=radio name=estado value=C
/>Casado<br />
<input type=radio name=estado value=V
/>Vivo<br />
<input type=radio name=estado value=D
/>Divorciado
</form>
</body>
</html>
Elementos tipo check box

Um check box equivalente as opes que se mostram nos formulrios de papel para que o usurio
as preencha caso cumpra uma certa condio.
Estes elementos tm por finalidade perguntar ao usurio sobre uma opo em particular. Isto , ainda
que se encontrem muitos deles agrupados em um mesmo formulrio, cada um atua de forma
Independiente.
Para criar um elemento deste, devemos apenas usar uma tag input colocando o atributo type da
seguinte forma:
<input type=checkbox />
O atributo principal dos elementos tipo checkbox o:

checked: Este atributo afirmativo indica que a
opo deve aparecer selecionada.
<html>
<head>
</head>
<body>
<b>Experincia: </b><br />
<input type=checkbox name=exp0 />Sabe
conduzir<br />
ingls<br />
programar<br />
</form>
</body>
</html>
Botes
No preciso definir o que um boto. Os usamos a todo o momento em nossa vida diria e tambm
ao navegar pela Internet. Um boto, de alguma forma, sinnimo de uma ao.
Os botes em HTML so criados tambm a partir da tag input, mas nesse caso usando o valor button
no atributo type.
<input type=button />
Da mesma maneira que nos outros elementos dos formulrios, muito de sua funcionalidade pode se
apreciada apenas quando combinada com algum cdigo em JavaScript. A parte mais importante do
boto a ao que ser realizada no momento em que ele for pressionado, mas isso est fora do foco
deste livro. No entanto, confiamos em que o seu interesse pela programao Web o leve a se
aprofundar na programao de scripts.

Vejamos o argumento principal (no funcional) dos botes:
value: Este atributo serve para definir o texto
que desejamos mostrar no boto que estivermos criando.
<html>
<head>
</head>
<body>
<input type=button value=Imprimir />
</form>
</body>
</html>
Existem dois tipos de aes muito usadas quando se criam formulrios em HTML. Elas so: o envio
do formulrio e o cancelamento do envio do mesmo. Para execut-las, sem a ajuda de JavaScript,
voc poder usar os tipos de elementos que descreveremos a seguir.

Quando falamos ao principio deste captulo sobre a tag form, dissemos que ela era capaz de chamar a
outra pgina e enviar-lhe os valores registrados no formulrio. Pois bem, a forma mais simples de
poder indicar a tag form que o momento de enviar esses dados, atravs de um boto tipo submit.
<input type=submit />
O elemento submit no outra coisa que um boto, a nica diferena que estes tm a misso de
executar a ordem de enviar o formulrio quando pressionados.

<html>
<head>
</head>
<body>
Nome de usurio:
<input type=text name=usurio />
<br />
Senha pessoal:
<input type=password name=senha />
<br />
<input type=submit name=Enviar />
</form>
</body>
</html>

Outro boto especial, que permite cancelar o envio de um formulrio retornando todos os valores
escritos dentro deste a seu valor original, o elemento cancel.
<input type=cancel />
Como no caso anterior, por tratar-se de duas variedades distintas de botes, podemos ficar seguros
de que todas as propriedades dos botes genricos so aplicveis a eles tambm.
Ao longo deste livro temos mencionado em repetidas oportunidades a existncia de outras linguagens
que so complementares ao HTML. Duas delas em particular, so muito importantes no
desenvolvimento de pginas Web.
A primeira CSS o Cascading Style Sheets conforme sua sigla, em ingls, se trata de uma linguagem
que permite manipular o formato de certos elementos dentro de uma pgina.
Em sua forma mais bsica, o CSS no nada mais do que uma serie de definies de estilo colocadas
na seo do cabealho de nossas pginas e que nos permite modificar o aspecto visual dos elementos
exibidos.
A JavaScript por sua vez um pouco mais complicada, j que se trata de uma linguagem de
programao que permite adicionar funcionalidades alternativas aos nossos elementos.
Com JavaScript, por exemplo, podemos mostrar as mensagens de erro quando o usurio esquecer de
preencher um dos campos de algum formulrio, ou podemos fazer clculos, mandar imprimir pginas
ou recarregar fragmentos de informao.
Agora que voc j conhece todos os conceitos bsicos da linguagem HTML, lhe recomendamos que
complemente a sua aprendizagem com estas duas linguagens. Ao faz-lo, voc estar apto a controlar
completamente tanto o aspecto visual como a funcionalidade de suas pginas, e poder seguir
avanando para outras metas.

Xaulin - Therebels.up 00014

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Xaulin - Therebels.up 00014

Enviado por

Direitos autorais:

Formatos disponíveis

Uma breve biografia

Como usar este livro

O que a Internet e o que WWW?

O que uma pgina Web?

Enfim, o que HTML?

A Hipertext Markup Language ou HTML, se trata de uma linguagem para a manipulao de

Assuntos abordados neste captulo:

Entendendo a linguagem de marcao

Cem anos de solido Muitos anos depois frente ao peloto de

Cem anos de solido

centralizar Cem anos de solido justificar e saltar Muitos anos

Ressaltamos os comandos para torn-los evidentes.

[centralizar] Cem anos de solido [justificar] [saltar] Muitos anos

No exemplo anterior criamos uma linguagem de marcao rudimentar.

Estrutura de uma pgina Web

Tag de abertura de pgina

Tag de definio do cabealho

Tag de definio do corpo da pgina

Ttulo de uma pgina

Colocando parte do texto em negrito

Colocando parte do texto em itlico

Outras tags para modificar o texto

Define uma poro de texto

Tags para quebra de linha e para inserir uma linha horizontal no

Tags com atributos

width: Indica o largura em pixels em que se deve exibir a imagem.

Tags para criar links

Como podemos ver, o atributo principal desta tag o seguinte:

Abre a pgina especificada em uma

Alterando o texto com a tag <font>

Trabalhando com tabelas

e colspan. Vejamos os efeitos deles mudando um pouco o exemplo anterior:

Cor de fundo aplicvel a toda a rea

Indica se a borda deve ser visvel (1)

Alguns dos atributos da tag <tr>

Melhores formas de organizar a informao

Criando pginas com quadros

Aninhando estruturas de quadros

O exemplo anterior mostra duas estruturas de quadros uma dentro da outra.

No mundo HTML, um formulrio um conjunto de comandos que nos permitem solicitar ao

action: Atravs desse atributo se estabelece

A tag input e suas mltiplas formas

type: Este o atributo que indica a forma que

Campos de texto oculto

Campos de texto invisveis

Botes tipo rdio

nica opo dentro de uma lista.

<b>Estado civil: </b><br />

Elementos tipo check box

O atributo principal dos elementos tipo checkbox o:

aprofundar na programao de scripts.

Boto para o envio de formulrios

executar a ordem de enviar o formulrio quando pressionados.

Boto para cancelar o envio

Você também pode gostar