Professional Documents
Culture Documents
HTML
bsico
cdigos
O contedo da tag <title>, ou seja, o ttulo da pgina, ser exibido no topo da janela/aba do
browser. Quando a pgina for adicionada aos favoritos, esse ttulo tambm ser sugerido
como atalho.
link: cor natural dos links, ou seja, enquanto eles ainda no foram clicados (o padro
azul).
alink: cor dos links quando so clicados (o padro vermelho).
vlink: cor dos links aps serem visitados (o padro roxo).
text: cor do texto da pgina.
A listagem a seguir mostra um exemplo de definio de alguns desses atributos.
Listagem 2: Definindo atributos da tag body
<body text=black bgcolor=blue link=yellow></body>
Cores
Ao atribuir valores aos atributos de cores da pgina (plano de fundo, cor do texto, etc),
possvel usar o nome das cores em ingls (apenas algumas cores) ou o cdigo
hexadecimal destas. Usando o cdigo hexadecimal possvel aplicar vrias cores alm das
que possuem nome padro, que so listadas abaixo.
Cor
Cdigo hexadecimal
Preto
black
#000000
Branco
white
#ffffff
Azul
blue
#0000ff
Amarelo
yellow
#ffff00
Verde
green
#009000
Lima
lime
#00ff00
Marrom
maroon
#800000
Oliva
olive
#00ffff
Azul celeste
aqua
#ff00ff
Lils
fuchsia
#808080
Cinza
gray
#000080
Azul escuro
navy
#000080
Roxo
purple
#800080
Verde escuro
teal
#008080
Cinza claro
silver
#c0c0c0
Vermelho
red
#ff0000
Cabealhos HTML
A linguagem HTML permite adicionar cabealhos (ou ttulos) no corpo da pgina,
diferenciando-os do restante do texto pelo tamanho da fonte. Para isso existem as tags h,
que possuem seis nveis, de 1 a 6. A seguir tem-se um exemplo de utilizao dos seis
nveis de cabealho, seguido do resultado do cdigo na Figura 1.
Listagem 3: Utilizando cabealhos
<h1>Ttulo de nvel 1</h1>
<h2>Ttulo de nvel 2</h2>
<h3>Ttulo de nvel 3</h3>
<h4>Ttulo de nvel 4</h4>
<h5>Ttulo de nvel 5</h5>
<h6>Ttulo de nvel 6</h6>
vestibulum
lacus
eget
odio
fermentum
viverra.
Pellentesque
hendrerit
pulvinar
venenatis. Donec ut odio vel velit iaculis hendrerit. Sed pharetra augue eget ipsum faucibus
lobortis.
<br/>
Fusce quis magna ante, sed tempus lorem. Sed lacus ipsum, tempus ac aliquet a, dignissim in
neque. Praesent sed lorem id augue dignissim lacinia.
O resultado o seguinte:
vestibulum lacus
eget odio
fermentum viverra.
Pellentesque hendrerit
pulvinar
venenatis. Donec ut odio vel velit iaculis hendrerit. Sed pharetra augue eget ipsum faucibus
lobortis.</p>
<p>Fusce quis magna ante, sed tempus lorem. Sed lacus ipsum, tempus ac aliquet a, dignissim
in neque. Praesent sed lorem id augue dignissim lacinia.</p>
Agora, vemos que o resultado inclusive visualmente mais organizado (Figura 6), como
deve ser o texto realmente.
Imagens
Inserir imagens na pgina uma das necessidades mais comuns e, por esse motivo,
tambm consideravelmente simples de ser feito. Para esse fim existe a tag <img>, cujos
atributos so mostrados a seguir:
src: caminho completo do arquivo de imagem (incluindo a extenso do arquivo).
alt: texto alternativo para a imagem, geralmente uma descrio da mesma.
width: largura da imagem em pixels.
Criando links
Como em toda pgina web, podemos precisar inserir links para outras pginas, para
downloads, e-mails, etc. A HTML possui uma tag chamada ncora (anchor, em ingls)
representada por <a> que nos permite criar links facilmente, apenas definindo seu atributo
href com o endereo para o qual o usurio deve ser redirecionado.
A sintaxe bsica da tag <a> apresentada na listagem a seguir, onde criamos um link para
o endereo http://www.meusite.com.br com o texto Meu Link, onde o usurio pode clicar
para ser redirecionado.
Listagem 10: Sintaxe de criao de links
<a href="http://www.meusite.com.br">Meu Link</a>
No lugar do texto Meu Link podem ser inseridos outros elementos como, por exemplo,
imagens, ttulos, etc. Basta manter a ordem de abertura e fechamento correta das tags.
No atributo href informamos o caminho para o qual o link deve levar o usurio, o que no
necessariamente precisa ser outro site. Podemos tambm criar links para download de
arquivos ou para envio de emails. Para downloads, basta indicar o caminho do arquivo a
ser baixado e para enviar emails, preciso usar mailto:email_desejado. A seguir veremos
vrios exemplos de links para sites e arquivos, usando imagens e textos comuns.
Listagem 11: Exemplos de links
<a href="www.meusite.com.br">Meu Link</a>
<a href="arquivo.zip">Baixar arquivo</a>
<a href="arquivo.zip"><img src="download.png" alt="Download"/></a>
Listas
Outra estrutura bastante comum de ser utilizada em pginas web a lista, que serve pra
organizar um conjunto de itens, sequencialmente ou no. As listas podem ser ordenadas ou
no, ou seja, cada item podem ou no ter um nmero/letra/smbolo que o identifique
sequencialmente.
As tags para listas ordenadas e no ordenadas so, respectivamente, <ol></ol> e
<ul></ul>. Entre essas marcaes devem ser inseridos os itens, que levam a tag <li></li>,
conforme os exemplos abaixo.
Listagem 12: Usando listas
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>
<ul>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ul>
Nesse cdigo temos duas listas, uma ordenada e uma no ordenada, que no browser tm a
seguinte aparncia.
<dt>Item 2</dt>
<dd>Definicao do item 2</dd>
<dt>Item 3</dt>
<dd>Definicao do item 3</dd>
</dl>
Tabelas
As tabelas, por muito tempo foram usadas incorretamente para montar toda a estrutura do
site. Ou seja, a pgina era uma grande tabela e todo seu contedo era organizado dentro
das clulas. Isso era usado pela facilidade de se montar o layout usando essa estrutura,
afinal, as tabelas tinham suas clulas bem definidas e fceis de manipular.
Porm, forma no era correta e isso foi sendo visto ao longo dos anos e passou-se a utilizar
o conceito de tableless (sem tabelas). Comeou-se a incentivar o uso das tags corretas
para estruturao do layout e das tabelas para seu objetivo real: apresentao de dados
tabulares.
Nessa tabela temos duas linhas (tr) com trs colunas (td) cada, como vemos na figura a
seguir.