HTML Ler

1
HTML= Hyper Text Markup Language.

Onde escrever em HTML: Bloco de Notas do Windows, ou algum outro editor de texto
simples no caso de algum outro sistema (Linux, por exemplo).Salvar os documentos como
“nome.html” ou “nome.htm”.
TAG: comandos do HTML utilizados para criar scripts. Possui 2 modos:
TAG simples: ocorre apenas uma vez no script para executar sua função.
TAG composta: ocorre 2 vezes no script delimitando a área onde deverá
executar sua função.
Exemplo:
<html> TAG composta

<head> TAG composta
<title>Meu 1º HTML</title> TAG composta
</head>
<body> TAG composta
Exemplo 1 <br> TAG simples
</body>
</html>
<html>...</html> envolvem todas as seções de um documento (<head> e <body>).

<head>...</head>Envolvem a seção de cabeçalho do documento.Contém informações que
facilitam a classificação do documento.
<title>...</title>É localizado dentro da TAG <head>. Define um título para a página que é
mostrado no alto da janela do browser. Todo documento HTML deve ter um título, pois esse
título é referenciado em buscas pela rede. Quanto mais próximo for o titulo daquilo que o
visitante digita, maior a chance dele visitar a página.
<body>...</body>Envolvem o corpo do documento. É aqui que se escreve o que vai ser
visualizado na página.
Observação:
As TAGS da linguagem HTML não reconhecem caixa alta, portanto não faz diferença escrever
<html>, <HTML> ou <hTmL> pois o browser reconhecerá de qualquer jeito.
Campos <meta>:
Os campos <meta>, localizados dentro da TAG <head>, tem dois atributos principais:
name, indicando um nome para a informação;
http-equiv, que faz uma correspondência com campos de cabeçalho do protocolo HTTP; a
informação desse campo pode ser lida pelos browsers, e provocar algumas ações.
<head>
<title>Título do Documento</title>
<meta name=”nome” content=”valor”>
<meta http-equiv=”nome” content=”valor”>
</head>
Exemplo:
<head>
<title>Atributos de documento em HTML</title>
<meta name=”Autor” content=”João da Silva (jds@email.com.br)”>
<meta name=”Description” content=”Tutorial de HTML”>
<meta name=”KeyWords” content=”HTML, WWW, Webpublishing”>
</head>
Alguns desses atributos são inseridos automaticamente pelos editores.
2
Um exemplo de uso do atributo http-equiv é promover a mudança automática de páginas.
(Funciona com o Netscape, Internet Explorer 2.0 em diante e Mosaic 2.0 em diante).
<head>
<title> . . . </title>
<meta http-equiv=”Refresh” content=”segundos” url=”pagina.html”>
</head>
onde:
segundos é o número de segundos passados até que a página indicada seja carregada.
pagina.html é a página a ser carregada automaticamente.
Atributos de <body>:
Através desses atributos podemos definir cores para os textos, links, para o fundo das
páginas e definir uma imagem de fundo (marca d’água).
<body bgcolor=”#rrggbb” text=”#rrggbb” link=”#rrggbb” alink=”#rrggbb” vlink=”#rrggbb”

background=”imagem.jpg” leftmargin=n topmargin=n>
onde:
bgcolor : cor de fundo (padrão: branco ou cinza)
text : cor dos textos da página (padrão: preto)
link : cor dos links (padrão: azul)
alink : cor dos links ativos (padrão: vermelho)
vlink : cor dos links depois de visitados (padrão: azul escuro ou roxo)
background : indica a URL da imagem (geralmemente em formato .jpg ou .jpeg ou.gif) a ser
replicada no fundo da página, como uma marca d’água.
Os valores #rrggbb são valores hexadecimais, equivalentes a cores no padrão RGB (red,
green, blue).
<body bgcolor=”#FFFFFF” text=”#AA00AA” link=”#008000” alink=”#FFFF00” vlink=”#000000”>
Usando o background:
<body background=”URL”>
<body background=”gato.jpg”>
<body background=”c:\site\imagem.jpg”>
Para deixar a imagem de fundo fixa, bgproperties:
<body background=”gato.jpg” bgproperties=”fixed”>
leftmargin : define a largura da margem esquerda. Assume qualquer valor em pixels.

topmargin : define a altura da margem superior. Assume qualquer valor em pixels.
Cabeçalhos:
Há seis níveis de cabeçalhos em HTML, de <h1> a <h6>.
<h1>Este é um cabeçalho de nível 1</h1>

<h2> Este é um cabeçalho de nível 2</h2>
3
Esses cabeçalhos são mostrados da seguinte forma:
Os
cabeçalhos não podem ser aninhados, isto é:
<h2> Este é <h1> um cabeçalho de nível 1 </h1> dentro de um cabeçalho de nível 2 </h2>
Embora em alguns browsers esse aninhamento possa dar um resultado.

Os cabeçalhos tem atributos de alinhamento:
Cabeçalho centralizado:
<h2 align=center>Cabeçalho centralizado</h2>
Cabeçalho alinhado à direita:
<h3 align=right>Cabeçalho à direita</h3>
Cabeçalho alinhado à esquerda (default):
<h1 align=left>Cabeçalho à esquerda</h1>
Separadores:
Quebra de linha: Quando queremos mudar de linha, usamos o elemento <br>. Isso só é
necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já
quebram as linhas automaticamente para apresentar os textos.
Esta frase está dividida <br> com uma quebra de linha.

Resultado: Esta frase está dividida
com uma quebra de linha
Parágrafos: para separar blocos de texto, usamos o elemento <p>.
parágrafo1; <p> parágrafo 2.
Que produz:
parágrafo1;
parágrafo2.
Combinando parágrafos e quebras de linha, temos:
parágrafo 1; <br> linha 1 do parágrafo 1, <br> linha 2 do parágrafo1 .<p>

parágrafo 2; <br> linha 1 do parágrafo 2, <br> linha 2 do parágrafo 2.
O resultado é:
4
parágrafo 1;
linha 1 do parágrafo 1,
linha 2 do parágrafo 2.
parágrafo 2;
linha 1 do parágrafo 2,
linha 2 do parágrafo 2.
<p> também tem atributos de alinhamento:
<p align=center>Centro</p>
<p align=right>Direita</p>
<p align=left>Esquerda</p>
Linha horizontal: <hr> insere uma linha horizontal. Essa linha tem diversos atributos,
oferecendo resultados diversos.
<hr size=7> insere uma linha de largura 7 (pixels).

<hr width=50% color=”#000000”> insere uma linha que ocupa 50% do espaço disponível, de
cor preta.
<hr width=30% align=right color=black noshade> insere uma linha de comprimento 30%,
alinhada à direita, preta, sem efeito tridimensional.
Exemplos:
Para centralizar tanto textos quanto imagens pode-se usar a TAG <center> . . . </center>.
Alinhamento com o comando <div> : a utilização dessa TAG é uma forma prática e rápida
de alinhar blocos de texto. A abreviatura div significa divisão. Ao usarmos essa TAG em um
bloco de texto estaremos atingindo todas as TAGs dentro daquele bloco.
A TAG <div> pode ser usada para alinhar qualquer elemento (cabeçalho, parágrafos, citações,
imagens, tabelas, etc.). O atributo align encontra-se disponível apenas em um número
limitado de TAGs. Os valores de align podem ser: left, right e center.
<div align=”center”>
TEXTO E OUTRAS TAGS
TEXTO E OUTRAS TAGS
</div>
A TAG <span> ... </span>, produz um efeito parecido com a TAG <div>.
Cores e fontes:
Cores: As cores são introduzidas através do elemento <font>, usando o sistema RGB para
cores. Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores
definido no atributo text de <body>.
<font color=”#rrggbb”>Texto</font>
5
Tamanho: Essa formatação permite que o autor do documento altere o tamanho das letras
em trechos específicos do texto.
<font size=+2>Letra maior</font>
<font size=-2>Letra menor</font>
<font size=2>Tamanho específico em pixels</font>
Fonte: permite a escolha da fonte para os textos. Usa o atributo face.
<font face=Times color=”#0000AA”>Fonte Times azul</font>

<font face=Arial color=”#00AA00”>Fonte Arial verde</font>
<font face=Courier color=”#AA0000”>Fonte Courier vermelha</font>
Em casos de fontes específicas deve-se usar o nome completo da fonte entre aspas.
<font face=”Bookman Old Style” color=”#AA00AA”>Bookman Old Style</font>
Para fazer uma padronização da fonte da página, independentemente do atributo text da TAG
<body>, pode-se utilizar a TAG <basefont>.
<basefont size=3 color=red face=Arial,Times,Courier>
Algumas observações sobre <basefont>:

1- <basefont> não altera o cabeçalho <h1>,<h2>,etc.
2-Pode-se usar a TAG <font> ou qualquer outra formatação (serão apresentados abaixo) para
modificar as fontes em trechos específicos; os valores desses se sobressairão ao valor
estabelecido em <basefont>.
3-É aconselhável atribuir mais de um tipo de fonte para o atributo face, separadas por vírgula,
como no exemplo acima. Dessa forma caso o computador do usuário não contiver a primeira
fonte ele irá ignorá-la e usar a segunda.
4- Esta TAG não é mais utlizada, apesar dos browsers a aceitarem. Para padronizar a fonte
de uma página, costuma-se usar estilos (CSS).
Formatação de textos e caracteres:
Há dois tipos de formatação em HTML: lógica e física. Os efeitos de formatação na tela são os
mesmos: o motivo da distinção entre eles se deve à idéia básica de independência entre
especificação e apresentação.
A formatação lógica segue o significado lógico do texto marcado: um endereço de e-mail, uma
citação, etc. Sua apresentação final varia conforme o browser, podendo oferecer resultados
mais ricos.
A formatação física especifica explicitamente o estilo que se quer para o texto: negrito, itálico,
grifado, etc. Sua apresentação final não sofre grandes variações.
Blocos de texto: o HTML oferece as seguintes formatações de blocos de texto:
<pre> apresenta o texto na mesma maneira em que foi digitado, mantendo as quebras de
linha e tabulações:
<pre> Uma linha aqui,

6
outra ali,
etc.</pre>
resulta em:
Uma linha aqui,

outra ali,
etc.
Uma vez que <pre> mantém o texto original, não se deve forçar espaços com essa marcação
dentro de outra marcação que já apresente tabulação e espaços específicos. Até o presente
momento, somente com o uso do <pre>, é possível gerar parágrafos com texto justificado à
esquerda ou à direita em HTML.
<blockquote> é usado para citações longas.
<blockquote> A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra
siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em
órbita circular no espaço tridimensional.</blockquote> (Stephen W. Hawking, “Uma Breve
História do Tempo”)
resulta em:
A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma
trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita
circular no espaço tridimensional.
(Stephen W. Hawking, “Uma Breve História do Tempo”)
Porém, o efeito dessa TAG pode ser acumulado para conseguir margens maiores:
<blockquote>Texto com mais margem</blockquote>

<blockquote><blockquote>Texto com mais margem ainda</blockquote></blockquote>
<address> : Usado para identificar autorias de página. Geralmente apresentadas na parte

inferior da página.
<address>
jds@email.com.br<br>
Desenvolvimento de Websites Ltda<br>
Última atualização: 22 de janeiro de 2005<br>
Todos os direitos autorais reservados<br>
</address>
Formatação de frases:
Estilos lógicos:
<cite> : Para títulos de livros, filmes e citações curtas:
Assisti <cite>Guerra Nas Estrelas</cite> um milhão de vezes!

Assisti Guerra Nas Estrelas um milhão de vezes!
<code> : Para indicar trechos de código de programa:
<code>for (x=0); cl &&(!feof(stdin)); x++));</code>
7
for (x=0); cl &&(!feof(stdin)); x++));
<dfn> : Indica a definição de uma palavra, em geral apresenta o texto em itálico:

CERN: <dfn>Centre d’Estudes et Recherches Nucleaires</dfn>
CERN: Centre d’Estudes et Recherches Nucleaires
<em> : Ênfase, também normalmente apresentado em itálico:
É preciso pesquisar <em>muito</em> para encontrar o termo exato.

É preciso pesquisar muito para encontrar o termo exato.
<kbd> : Indica uma entrada via teclado:

Para ler mensagens recebidas, digite <kbd>pine -i</kbd>
Para ler mensagens recebidas, digite pine –i
<samp> : Indica uma seqüência de caracteres, por exemplo, uma mensagem de erro, ou um
resultado:
O resultado do primeiro applet é: <samp>Hello, World!</samp>

O resultado do primeiro applet é: Hello, World!
<strong> : Forte ênfase, geralmente mostrado em negrito:
Antes de enviar um e-mail, <strong>confira o campo “Subject:”</strong>!

Antes de enviar um e-mail, confira o campo “Subject:”!
<var> : Indica variáveis, ou valores que o usuário deverá escrever; geralmente mostrado em
itálico:
No campo Login, escreva <var>guest</var>.

No campo Login, escreva guest.
Estilos físicos:
<b> : quando disponível no browser, mostra caracteres, palavras, frases ou textos inteiros em
negrito (bold). Em alguns browsers pode aparecer sublinhado.
<b>Texto em negrito</b>
<i> : Itálico. Em alguns casos, apenas caracteres inclinados.
<i>Texto em itálico</i>
<tt> : Tipo teletype, fonte de espaçamento fixo.
<tt>Texto de espaçamento fixo</tt>
<u> : Sublinhado. Deve ser usado com cuidado, pois

confunde-se com a apresentação de links.
<u>Texto sublinhado</u>
<strike> ou <s> : Texto riscado (tachado).
8
<strike>Texto riscado</strike>
<s>Texto riscado</s>
<big> : Fonte um pouco maior
<big>Maior</big>
<small> : Fonte um pouco menor

<small>Menor</small>
<sub> : Frase em estilo índice (subscrito).
<sub>Subscrito</sub>
<sup> : Frase em estilo expoente (sobrescrito).
<sup>Sobrescrito</sup>
Exemplo de código:
<html>
<head>
<title>Aprendendo HTML</title>
<meta name=”Autor” content=”Seu Nome Aqui”>
<meta name=”Descrição” content=”Aprendiz”>
</head>
<body bgcolor=”#000000” link=”#0000FF” alink=”#00FFFF” vlink=”#C0C0C0”>
<basefont size=30 color=”#0000FF” face=Arial>
<h1 align=center>Aprendendo HTML</h1>
<hr size=10 color=”#0000FF” noshade>
<p>Apesar <font color="#00FFFF">DE TUDO</font><br>
Ainda que <i>com</i> muito <u>pesar</u><br>
Digo que <b><i><u>FICO!</u></i></b>
</p><br><br>
<blockquote>Uma vez no <b>litoral</b><br>
encontrei um peixe<br>
chamado <b><u>Wanda</u></b>
</blockquote>
</body>
</html>
Listas em HTML:
Listas de definição: são chamadas também de ‘listas de glossário’, que tem o formato:
<dl>
<dt>Termo a ser definido
<dd>Definição
<dt>Termo a ser definido
<dd>Definição
</dl>
Que produz:
Termo a ser definido

Definição
9
Termo a ser definido
Definição
Este tipo de lista é muito utilizado para diversos efeitos de organização de páginas, por
permitir a tabulação de texto.
Listas não-numeradas: são equivalentes às listas com marcadores do MS Word. Pode ter
vários níveis um dentro do outro.
<ul>
<li>item de uma lista
<li>item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se
preocupar com a formatação das margens do texto.
<li>item
<ul>
<li>item em um segundo nível
<ul>
<li>item em um terceiro nível
</ul>
<li>item
</ul>
<li>item
</ul>
De acordo com o HTML 3.2, essa lista pode ter marcadores diferentes, indicados através do
atributo type, que assume os valores circle, square e disc (default).
<ul type=circle>
<li>um item
<li>mais um item
</ul>
Cada item também pode ter seu atributo específico:
<ul>
<li type=disc>um item
<li type=circle>mais um item
<li type=square>último item
</ul>
Observações:
1-Boa parte dos editores HTML, insere marcações que não existem em listas. Exemplos
típicos são <dd>, <dt> e <li>. Porém, como essas etiquetas não são reconhecidas pelos
browsers, não causam efeito colateral algum nos documentos.
2-nem todo usuário poderá ver o resultado das novas marcações, porque browsers antigos
não tem os atributos do HTML 3.2.
Listas numeradas:
<ol>
<li>item de uma lista numerada
<li>item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja
necessário se preocupar com a formatação das margens de texto
<ol>
10
<li>item de lista em um segundo nível
<ol>
<li>item de lista em um terceiro nível
</ol>
</ol>
<li>item de lista numerada
</ol>
Pode-se, através do atributo type (HTML 3.2), que assume os valores I (algarismos romanos,
maiúsculo ou minúsculo), e a (marcação alfabética, idem) pode-se lidar com a numeração dos
items:
<ol type=I>
<li>Documentos básicos
<li>Documentos avançados
<ol type=a>
<li>formulários
<ol type=i>
<li>CGI
</ol>
<li>contadores
<li>relógios
</ol>
<li>Detalhes sobre imagens
</ol>
Pode-se ainda usar o atributo start para indicar o início da numeração da lista.
<ol start=4 type=a>

<li>um item
<li>outro item
<li>mais um item
</ol>
D. um item
E. outro item
F. mais um item
Listas e “sub-listas”: As listas podem ser aninhadas.
<dl>
<dt>termo a ser definido
<dd>definição
<ol>
<ul>
<li>item de uma lista
</ul>
11
</ol>
<dt>termo a ser definido
<dd>definição
</dl>
Exemplo de código:
<html>
<head>
<title>LISTAS</title>
</head>
<body bgcolor=”#00FFFF”>
<basefont size=4 color=”#0000FF” face=Courier>
<h1 align=center>Listas</h1>
<hr width=50% size=5>
<br>
<dl>
<dt>Feira:
<dd>Lugar onde se compra frutas, verduras e legumes.
</dl>
<br><br>
<ul type=disc>
<li>Frutas:
<ul>
<li>Laranjas
<ol type=i>
<li>Lima
<li>Pêra
</ol>
<li>Uvas
<ol type=a>
<li>Moscatel
<li>Verde
</ol>
</ul>
</ul>
</body>
</html>
Inserção de imagens:
O elemento img insere imagens que são apresentadas junto com os textos. Um atributo src
deve estar presente, da seguinte forma:
<img src=”url_imagem”>
onde url_imagem é a url do arquivo que contém a imagem que se quer inserir; pode ser
referenciada uma imagem que esteja em outro servidor (o que, logicamente não é
conveniente).
Assim escrevendo:
<img src=”/ícones/bola.gif”> inserimos a figura no documento.
As imagens usadas na Web geralmente tem as extensões *.xbm, *.gif e *.jpg (ou *.jpeg),
sendo que as mais usadas são as duas últimas.
12
Atributos básicos:
ALT : Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no

lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em
browsers gráficos. É recomendável que esteja sempre presente.
<img src=”url_imagem” alt=”descrição_da_imagem”>
<img src=”bola.gif” alt=”PRATO”> é apresentado nos browsers gráficos como aparece abaixo
e, nos browsers texto, assim: [PRATO].
Width e Height : Atributos de dimensão de imagem em pixels. Grande parte dos editores
HTML coloca automaticamente os valores desses atributos, quando indicamos a inserção de
uma imagem.
<img src=”imagem” alt=”descrição” width=”largura” height=”altura”>
Uma das vantagens de se usar esses atributos é que o browser pode montar mais
rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas.
<img src=”bola.gif” width=50 height=50>
Align : Atributo de alinhamento.
<img src=”imagem” alt=”descrição” align=alinhamento>
Existem também atributos de alinhamento, que produzem os seguintes resultados:

Align=top : alinha o texto adjacente com o topo da imagem, embora com linhas compridas o
resultado não seja muito bom.
Align=middle : Alinha o texto adjacente com o meio da imagem, embora com linhas
compridas o resultado não seja muito bom.
Align=bottom : Alinha o texto com aparte de baixo da imagem (default).
13
Align=right : Alinha a imagem à direita, e tudo o que houver ao redor (texto, outras imagens)
a partir do topo da imagem.
Align=left : Alinha a imagem à esquerda, e tudo o que houver ao redor (texto, outras
imagens) a partir do topo da imagem.
Outros alinhamentos procuram posicionar as imagens com maior precisão com relação ao
texto circundante: toptext, absmiddle, absbottom.
Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:
<img align=left src=”bola.gif” alt=”imagem”><img align=right src=”bola.gif” alt=”imagem”>

... e se pode escrever à vontade entre as imagens!
Isso resulta em:
Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto

desse alinhamento, ou seja:
Suponhamos um texto mais ou menos curto, que desejamos colocar aqui, com a imagem
ilustrativa...
... mas gostaríamos que este trecho já estivesse abaixo da imagem! Por causa do
comprimento da primeira frase, não podemos usar top. Para conseguir isso seriam
necessários vários <br> consecutivos, inserindo linhas em branco; mesmo assim o resultado
final poderia ser bem pouco elegante. Surgiu, então, o atributo clear para <br>.
Com esse atributo, podemos por exemplo...
Ter um texto posicionado no ponto em que a margem direita fica livre, com
<br clear=right>
ou no ponto em que a margem esquerda fica livre, com
<br clear=left>
dessa maneira podemos controlar bem a posição dos textos.
Também se pode posicionar o texto no ponto em que ambas as margens estão livres.
Isso é conseguido com:
<br clear=all>
E, assim, vimos tudo sobre quebra de linhas depois de imagens.
Molduras de Imagem : Atributos de moldura. Definem o espaço – vertical e horizontal –

deixado entre as imagens e os textos circundantes.
<img src=”imagem” vspace=”espaço_vertical”>

<img src=”imagem” hspace=”espaço_horizontal”>
14
Imagem alternativa : é o efeito de sobrepor imagens, usando o atributo lowsrc:
<img lowsrc=”imagem1” src=”imagem2”>
Para conseguir o efeito, será necessário trabalhar com duas imagens:
A primeira (lowsrc=”imagem1”), que é carregada rapidamente na página. Ela deve estar em
um arquivo pequeno (por exemplo, uma imagem em preto e branco).
A segunda imagem a ser carregada (src=”imagem2”), é a que permanecerá na página. Deve
estar em um arquivo grande (por exemplo, uma imagem colorida).
As duas imagens devem ter as mesmas dimensões, significando que os atributos width e
height serão necessariamente utilizados.
O efeito pode ser realizado também com duas imagens coloridas: o importante é que a
primeira imagem tem que estar em um arquivo bem menor que o da segunda.
Links:
Para inserir um link em um documento, utilizamos a TAG <a>, da seguinte forma:
<a href=”arquivo_destino”>Link</a>
Onde:
Arquivo_destino é a URL do documento de destino.
Link é o texto ou a imagem que servirá de ligação hipertexto do documento sendo
apresentado para o documento de destino.
Caminhos para o documento de destino:
Caminho relativo : pode ser usado sempre que queremos fazer referência a um documento
que esteja no mesmo servidor do documento atual.
<a href=”diretório/pagina.html”>Exemplo de caminho relativo</a>
Se quisermos um link do documento atual para um outro que esteja em um diretório diferente
neste mesmo servidor, escrevemos:
<a href=”/português/ICMC/”>Instituto de Ciências Matemáticas e de Computação</a>
Para usar links com caminhos relativos é preciso, portanto, conhecer a estrutura do diretório
do servidor no qual estamos trabalhando.
Caminho absoluto : utilizamos quando queremos referenciar um documento que esteja em

outro servidor.
<a href=http://www.google.com.br/>Google</a>
Com a mesma sintaxe, é possível escrever links para qualquer servidor de informações da
Internet.
Ligações para trechos de documentos (âncoras) : Uma âncora é um ponto de referência

ou endereço que será acessado por um link. É usada para marcar o início de uma seção do
documento.
Se tivermos um título “Caminho Relativo”, por exemplo, no meio de uma página:
<a name=”nome”>Caminho Relativo</a> faz com que a âncora Caminho Relativo seja o
destino de um link. Se escrevermos:
Leia sobre <a href=”#nome”>caminhos relativos</a>.
Teremos uma ligação hipertexto para o título Caminho Relativo neste mesmo documento:
15
Leia sobre caminhos relativos.
Da mesma forma, construímos links para trechos determinados de outros documentos, desde
que saibamos quais trechos do documento destino estão marcados para ponto de chegada de
um link.
Por exemplo:
São Carlos é um <a href=”/português/Sao_Carlos/histoprog.html#polo>pólo de alta

tecnologia</a>.
Que produz um link para um parágrafo marcado no arquivo histoprog.html sobre a cidade de
São Carlos, no diretório /português/Sao_Carlos :
São Carlos é um pólo de alta tecnologia.
Para abrir links em uma nova janela : basta acrescentar o atributo target=”_blank” :
<a href=”URL” target=”_blank”>Clique Aqui</a>
Para padronizar a página para que todos os links abram em uma nova janela, basta
acrescentar na seção <head> o seguinte TAG:
<base target=”_blank”>
Para um link apontar para um e-mail : basta acrescentar mailto:e-mail :
<a href=mailto:jds@email.com.br “ target=_blank”>Clique Aqui</a>
Atalho do teclado : acrescente accesskey=”tecla que servirá de atalho”. Para acessar o

atalho de teclado no Windows é necessário que se use a tecla ALT:
<a href=”URL” target=”_blank” accesskey=”1”>Clique Aqui (Alt+1)</a>
Estabelecendo uma ordem para o teclado : acrescente tabindex=n, onde n é um número:
<a href=”URL” target=”_blank” accesskey=”x” tabindex=2>Clique aqui</a>
Usando uma imagem como link :
<a href=”URL”><img src=”imagem.jpg”></a>
o atributo border: quando um texto é marcado como um link, ele se apresenta sublinhado;
quando uma imagem é marcada como link, ganha uma borda que indica sua condição:
Porém, por questões de apresentação, nem sempre interessa termos essa borda ao redor da
imagem. Assim com o atributo border, podemos controlar esse detalhe.
Se quisermos uma borda maior (pode assumir qualquer valor):
<a href=”URL”><img src=”imagem.jpg” alt=”descrição” border=4></a>

16
Para uma imagem sem borda:
<a href=”URL”><img src=”imagem.jpg” alt=”descrição” border=0></a>
código:
<html>
<head>
<title>Imagem</title>
</head>
<body leftmargin=100 topmargin=100>
<basefont face=Times color=”#FF0000”>
<h2 align=left>Imagens</h2>
<hr size=20 color=”#FF0000” noshade><br>
<b><i>Teste:</i></b>
<img src=”imagem.jpg” alt=”DesenhoBonito” border=50 align=top>
</body>
</html>
Tabelas:
As tabelas são muito importantes para o designer de uma home-page. Com elas pode-se
fazer alinhamentos que dificilmente seriam possíveis com simples comandos.
A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais
profissional e o usuário possa navegar de forma mais eficiente, pois os objetos podem estar
melhor posicionados na home-page.
Elementos básicos de tabelas:
<table> . . . </table> delimita uma tabela. Um atributo básico é border, que indica a
apresentação da borda.
<table border=borda_em_pixels>
...
</table>
títulos, linhas e elementos:
<caption> . . . </caption> define o título da tabela

<tr> . . . </tr> delimita uma linha
<th> . . . </th> define um cabeçalho para colunas ou linhas em negrito (dentro de <tr>)
<td> . . . </td> delimita uma célula; alguns chamam de coluna (dentro de <tr>)
uma tabela simples:

<html>
<head>
<title>Criando Tabelas</title>
</head>
<body>
<center><font color=”#0000FF” size=6>TABELA</font></center>
<br>
<table border=1> 
<caption>Primeiro Exemplo</caption> 
<tr> 
<td>PRIMEIRA COLUNA </TD> 
17
<td>SEGUNDA COLUNA </TD>
<td>TERCEIRA COLUNA </TD>
</tr> 
<tr> 
<td> PRIMEIRA COLUNA</td>
<td>SEGUNDA COLUNA </td>
<td>TERCEIRA COLUNA </td>
</tr> 
</table> 
</body>
</html>
Outro exemplo:
<table border=4>
<caption>Segundo exemplo</caption> 
<tr><th>Coluna 1</th><th>Coluna 2</th></tr> 
<tr><td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr>
<tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr>
</table>
Atributo NOWRAP: Este atributo evita a quebra de linhas dentro de uma célula. O texto
inserido no campo não pode ser dividido em mais de uma linha. Deve ser adicionado dentro
do <td>:
<td nowrap>Texto sem quebra de linha : Atributo NOWRAP</td>
Atributos de largura e altura:

Para apresentar uma tabela ocupando determinado espaço disponível na linha, usamos os
atributos width e height. Esses atributos pode ser aplicados também a linhas e células.
podem ser definidos em porcentagem (do espaço disponível):
width=n% height=n%
ou em pixels:
width=n height=n
Exemplo 1: tabela ocupando 50% do espaço

disponível.
<table border=1 width=50% height=50%>
Exemplo 2: tabela ocupando 50% do espaço disponível, com uma coluna de 60% do espaço
disponível na tabela.
18
<table border=1 width=50%>
<tr> <td>janeiro</td><td width=60%>fevereiro</td><td>março</td>
</tr>
<tr> <td>abril</td><td width=60%>maio</td><td>junho</td>
</tr>
</table>
Tabelas sem borda : é só empregar a seguinte declaração.
<table border=0>
Alinhamentos em tabelas :
Alinhamentos simples: os alinhamentos padrão em tabelas são:
No sentido horizontal: alinhamento à esquerda
align=alinhamento_horizontal
no sentido vertical: alinhamento no centro da célula
valign=alinhamento_vertical
como funciona nas células:
<td align=left>LEFT</td>
<td align=center>CENTER</td>
<td align=right>RIGHT</td>
<td valign=top>TOP</td>
<td valign=middle>MIDDLE</td>
<td valign=bottom>BOTTOM</td>
ROWSPAN e COLSPAN : é possível englobar colunas e linhas através desses atributos,

permitindo que se modifique a disposição dos elementos na tabela. Colspan é usado para
colunas, e rowspan para linhas.
<table border=1>
<tr><th colspan=2>Colunas 1 e 2</th></tr>
<tr><td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr>
<tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr>
<tr><th rowspan=3>3 linhas</th><td>uma linha</td></tr>
<tr><td>duas linhas</td></tr>
<tr><td>tres linhas</td></tr>
</table>
19
Neste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas
(colspan=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (rowspan=3).
Atributos de espaçamento:
Dois atributos permitem o controle de espaçamento em tabelas:
Cellpadding – espaço entre o texto e as bordas da célula
Cellspacing – espaço entre células
Tabela simples Espaço entre o texto e as

bordas Espaço entre células
<table border=1> <table border=1 cellpadding=20> <table border=1 cellspacing=20>
Espaço entre texto e bordas, e espaço entre células

<table border=1 cellpadding=20 cellspacing=20>
Extensões de tabelas : (mostram efeitos diferentes entre um browser e outro)

Cor de fundo:
<table border=5 bgcolor=”#FFFF00”>
Cores de borda:
<table border=5 bgcolor=”#FFFF00” bordercolor=”#00FF00”>
<table border=5 bgcolor=”#FFFF00” bordercolorlight=”#E1FFD9” bordercolordark=”#0E8234”>
Imagem de fundo:
<table border=5 bordercolor=”#0000FF” background=”backgrnd.gif”>
Respectivamente:
Cor de Fundo Cores de borda Imagem de fundo
Essas extensões também podem ser aplicadas separadamente em cada célula da tabela!
Exemplo:
20
<table border=0 cellspacing=0 width=40% height=40%>
<tr>
<td bgcolor=”#00FFFF” align=center valign=middle>CIANO </td>
<td bgcolor=”#0000FF” align=center valign=middle><font color=”#FFFFFF”>AZUL</font></td>
<td bgcolor=”#00FFFF” align=center valign=middle>CIANO</td>
</tr>
<tr>
<td bgcolor=”#0000FF” align=center valign=middle>< font color=”#FFFFFF”>AZUL</font></td>
<td background=”backgrnd.gif” align=center valign=middle>IMAGEM</td>
<td background=”backgrnd.gif” align=center valign=middle>IMAGEM</td>
</tr>
</table>
resulta em:
Usando tabelas como molduras : um uso bastante interessante de tabelas com imagens;
basta iniciar uma tabela e definir um valor para border.
<table border=5 bordercolor=”#00FFFF”>

<tr>
<td background=”backgrnd.gif”><img src=”bola.gif” alt=”Moldura”></td>
</tr>
</table>
uma tabela também pode ter várias imagens em várias células:
<table border=5 bordercolor=”#0000FF” background=”backgrnd.gif”>

<tr>
<td><img src=”bola.gif” width=50 height=50></td>
</tr>
<tr>
</table>
Claro que deve-se ter bom senso ao usar esse artifício pois, como já foi visto, nem sempre
uma moldura (ou borda) em uma figura define um bom layout.
O atributo FRAME : serve para escolher quais as linhas externas (da borda) serão mostradas
na tabela. É usado dentro de <table>, e tem os atributos:
void : nenhuma linha externa (sem borda)
above : apenas a linha externa de cima
below : apenas a linha externa de baixo
lhs : apenas a linha vertical esquerda
rhs : apenas a linha vertical direita
hsides : apenas as linhas horizontais
vsides : apenas as linhas verticais
box : todas as linhas (a borda inteira)
21
<table border=5 frame=void>
O atributo RULES : serve para escolher as linhas internas que serão mostradas dentro da
tabela; é usado dentro da TAG <table> e tem alguns parâmetros:
none : nenhuma linha interna;
rows : para as linhas horizontais entre cada linha da tabela;
cols : para as linhas verticais entre cada coluna da tabela;
all : para mostrar todas as linhas entre cada coluna e linha na tabela (default).
Exemplos:
Tabela sem nenhuma linha interna:
<table border=5 rules=none bordercolor=”#FF0000”>
<tr>
<td width=50 height=50 align=center>none</td>
</tr>
<tr>
</tr>
</table>
Tabela só com as linhas horizontais:

<table border=5 rules=rows bordercolor=”#FF0000”>
<tr>
<td width=50 height=50 align=center>rows</td>
</tr>
<tr>
</tr>
</table>
Tabela só com as linhas verticais:

<table border=5 rules=cols bordercolor=”#FF0000”>
<tr>
<td width=50 height=50 align=center>cols</td>
22
</tr>
<tr>
</tr>
</table>
Tabela com todas as linhas internas (default):

<table border=5 rules=all bordercolor=”#FF0000”>
<tr>
<td width=50 height=50 align=center>all</td>
</tr>
<tr>
</tr>
</table>
exemplo de código:
<html>
<head>
<title>Tabela Especial</title>
</head>
<body bgcolor=beige text=mediumaquamarine>
<basefont face=Arial>
<br><br><br>
<p align=center>
<table border=5 width=50% height=50%
bordercolorlight=aquamarine bordercolordark=mediumaquamarine
bgcolor=honeydew cellspacing=5>
<tr><td colspan=4 align=center>cell</td>
</tr>
<tr><td>cell</td>
<td>cell</td>
<td rowspan=2 align=center valign=bottom>cell</td>
<td rowspan=3 align=right valign=top>cell</td>
</tr>
<tr><td>cell</td>
<td>cell</td>
</tr>
<tr><td colspan=2>cell</td>
<td>cell</td>
</tr>
<tr><td colspan=3>cell</td>
<td>cell</td>
</tr>
</table>
</p><br><br>
</body>
</html>
23
Tabelas podem ainda ser colocadas umas dentro das outras, como no código abaixo:
<html>
<head>
<title>Tabela dentro de tabela</title>
<style type="text/css">
table {border-collapse:collapse}
td {font-family:verdana; font-size:10px}
</style>
</head>
<body bgcolor=darkblue>
<table border="6" bgcolor=aliceblue bordercolorlight=skyblue bordercolordark=slateblue
width="100%" height="100%">
<tr>
<td align=center valign=middle>Tabela dentro
<table border="6" bgcolor=darkblue bordercolordark=skyblue bordercolorlight=slateblue
cellpadding=50>
<tr>
<td align=center><font color=white>Tabela dentro</font></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Formulários:
Um formulário é um modelo para a entrada de um conjunto de dados. O elemento <form>
delimita um formulário e contém uma seqüência de elementos de entrada e de formatação do
documento. Pode se ter múltiplos formulários em um único documento, mas os blocos <form>
e </form> não podem se sobrepor.
<form action=”URL_de_script” method=método> onde:
action especifica a URL do script ao qual serão enviados os dados do formulário. Essa URL
em geral aponta para um script CGI que irá receber e decodificar os resultados.
action=”/cgi-bin/post-query” para um script no seu servidor(deve-se procurar saber o servidor)

action=”http://sites.uol.com.br/cgi-bin/mailto.cgi” para um script no servidor UOL(neste caso)
method seleciona um método para acessar a URL de ação. Os métodos utilizados

atualmente são get e post. Ambos transferem dados do browser para o servidor, com uma
diferença básica:
method=”get” : os dados entrados fazem parte da URL associada à consulta enviada
para o servidor. Suporta até 128 caracteres.
method=”post” : os dados entrados fazem parte do corpo da mensagem enviada para
o servidor. Transfere grande quantidade de dados.
<form method=”post” action=”/cgi-bin/post-query/”>

Marcações de campos de entrada e HTML em geral
</form>
24
Observe que este formulário utiliza o método post e envia as informações digitadas para um
script local chamado post-query no diretório /cgi-bin do servidor. Cada marcação de entrada
em um formulário contém, ainda, uma opção name associada, de forma que o script saiba
como chamar cada valor digitado. Pode-se definir mais de um campo de entrada textual em
um formulário, mas cada um deve possuir um nome diferente.
Input : a TAG <input> tem um atributo type, ao qual atribuímos seis valores diferentes para
gerar seis tipos diferentes de entrada de dados.
Campo de dados texto : quando <input> não apresenta atributos, é assumido type=text
(default). É a forma mais simples de campo de entrada e permite a digitação de uma única
palavra ou linha de texto, possuindo a largura default de 20 caracteres.
<form method=”post” action=”URL”>

Nome:<input type=text name=nome>
</form>
ou apenas:

Nome:<input name=”nome”>
</form>
que produz o resultado:
Campo de dados senha : idênticos ao campo tipo text, mas que tem uma entrada na qual os
caracteres são escondidos por asteriscos.

Login:<input type=text name=”login”><br><br>
Senha:<input type=password name=”senha”>
</form>
Atributos de text e password:

value : especifica um valor default inicial para esse campo; se o usuário não preencher esse
campo, será adotado um valor padrão.
size : especifica o tamanho do espaço no display para o campo do formulário. O valor default
é 20.
maxlenght : é o número de caracteres aceitos em um campo de dados.
Nome:<input type=text name=”nome” value=”Seu Nome” size=10 maxlenght=15><br><br>

Senha:<input type=password name=”senha” value=”xpto” size=8 maxlenght=8>
Entrada oculta – hidden : além da marcação password com um valor value default, é
possível “esconder” informação passada dentro de blocos <form> com a opção hidden. Essa
informação é recebida pelo script de decodificação do servidor, mas não é diretamente exibida
ao usuário no formulário.

Você não pode visualizar nada aqui embaixo.
<input type=hidden name=”nome_oculto” value=”form1”>
25
</form>
onde:
value : através dessa opção, deve-se especificar o texto oculto a ser enviado ao script
processador do formulário.
Mesmo que o valor especificado em hidden não seja exibido no formulário, o usuário pode vê-
lo através da operação de visualização do código fonte do documento, da mesma forma como
no campo password.
Entrada de várias linhas de texto - <textarea>:

A marcação <textarea> não utiliza o formato convencional <input type=text> dos exemplos
anteriores. Uma marcação <textarea> delimita o seu início e a marcação </textarea> delimita
o seu fim.

<textarea cols=40 rows=5 name=”comentário”>
Deixe o seu comentário!
</textarea>
</form>
Onde:
rows : especifica o número de linhas da entrada textual
cols : especifica o número de colunas da entrada textual
texto default opcional : No caso, ‘Deixe o seu comentário’; se desejar que um texto seja
exibido no campo textual basta escrevê-lo entre as marcações de início e fim de <textarea>.
Menus com opções – select : Apresenta uma lista de valores atravéz do campo option.
Segue a mesma convenção de <textarea>; as opções do menu ficam entre a TAG de início
<select>, e a TAG do fim </select>.

<select name=”Sabor”>
<option>Abacaxi
<option>Flocos
<option>Morango
<option>Creme
<option>Chocolate
</select>
</form>

<select name=”Sabor” multiple size=2>
<option selected>Abacaxi
<option>Flocos
<option value=”fruta” selected>Morango
<option>Creme
<option >Chocolate
</select>
</form>
onde:
<option> especifica uma opção presente no menu
value especifica o valor da opção retornada ao servidor. Se não for definido, o nome da opção
é enviado ao servidor.
26
selected : por default, a primeira opção a ser exibida no menu. Estabelece uma opção de
menu a ser exibida inicialmente, quando não se deseja que seja a primeira opção.
size : número de linhas (opções de menu) serão mostradas na tela.
multiple : especifica que múltiplas opções podem ser selecionadas.
OBS : é necessário teclar simultaneamente a tecla control para selecionar múltiplos itens.
Botões
Múltipla Escolha – CHECKBOX : aqui retornamos ao formato ‘input type’.

<input type=”checkbox” name=”boletim” checked>
Sim, eu desejo receber o boletim de notícias <br>
<input type=”checkbox” name=”info” value=”option”>
Sim, eu gostaria de receber mais informações sobre...
</form>
Onde:
value : especifica o valor da opção enviado ao servidor. Se não for definido, o valor ‘on’ é
enviado ao script decodificador.
checked : define a opção selecionada por default.
Esse elemento funciona melhor para respostas sim/não ou on/off.
Escolha Única – RADIO BUTTONS : utilizam uma notação similar a de checkboxes, porém
apenas uma opção pode ser escolhida.
<dl>
<dd>Classe do Bilhete:<br>
<input type=”radio” name=”classe” value=”eco” checked>econômica<br>
<input type=”radio” name=”classe” value=”exe”>executiva<br>
<input type=”radio” name=”classe” value=”pri”>primeira classe<br><br>
<dd>Localização:<br>
<input type=”radio” name=”local” value=”frente”>área fumante<br>
<input type=”radio” name=”local” value=”tras” checked>área não fumante
</dl>
</form>
Onde:
value : especifica o valor da opção a ser enviado ao servidor. Se não for definido, um valor ‘on’
é enviado ao script decodificador.
checked : esta marcação especifica qual botão estará selecionado por default. É
recomendado que essa seleção seja feita.
27
É necessário, também que os botões tenham nomes (names) e valores (values) diferentes,
porque senão o servidor não vai saber qual botão foi selecionado, uma vez que o valor ‘on’
será retornado para cada um deles.
Botões de submissão e limpeza – SUBMIT e RESET : em vez do usuário corrigir cada
entrada, um botão reset pode ser utilizado para restaurar todos os campos a seus valores
default, como se nenhuma informação tivesse sido digitada.
O form precisa de uma opção para enviar toda a informação digitada para o servidor. O botão
submit transfere toda a informação para a URL especificada no elemento action.

Qual é o seu primeiro nome?
<input tupe=”text” name=”nome” value=”Seu Nome” size=10 maxlenght=15><br><br>
Escolha uma opção:<br>
<input type=”radio” nome=”civil” value=”married”>Casado(a)<br>
<input type=”radio” nome=”civil” value=”single” checked>Solteiro(a)<br><br>
<input type=”reset” value=”Limpa Campos”>
<input type=”submit”>
</form>
Onde:
value : especifica o texto a ser exibido no botão. Se não for especificado, aparecem textos
default (qual texto depende do browser).
name : se name for definido a um botão submit, o formulário irá transmitir o valor do conteúdo
do elemento value, permitindo que se tenha múltiplos botões submit em um formulário.
Normalmente, o script decodificador retorna um hiperdocumento após ele processar a
informação do formulário. Nem todos os clientes suportam múltiplos botões submit. É melhor
utilizar apenas um único botão submit para transmitir a informação digitada no formulário.
Frames
O ‘Frame Document’ é um arquivo onde se define a estrutura das janelas para o
hiperdocumento em HTML. No entanto frames são relativamente usados. Há os que adoram o
uso dos frames e, há os que abominam o seu uso alegando que estragam o layout da home-
page.
Neste tipo de documento, as marcações <body> e </body> são substituídos por <frameset> e
</frameset>.
Para se ter uma página com frames, deve-se ter três documentos, um que contém código do
frame (que carregará as outros dois) e outros dois que serão inseridos nas divisões criadas
pelo frame (tem que se ter pelo menos dois documentos a serem inseridos no frame mas, o
frame pode ter mais de duas divisões).
A estrutura mínima de um <frameset>, então:
<html>
<head>
<title> Exemplo de frame</title>
</head>
<frameset cols=20% , 80%>
<frame src=”framem.html”>
<frame src=”framep.html”>
</frameset>
</html>
É possível ter vários <frameset> intercalados, da mesma forma como é possível intercalar
listas ou tabelas em HTML. Cada uma dessas marcações - <frameset> e <frame> - aceita
extensões, valores e atributos, como veremos a seguir.
<frameset> : aceita os atributos cols e rows, referentes à divisões verticais (como colunas em
uma tabela), e horizontais (como linhas em uma tabela) entre janelas na tela. Internamente a
marcações <frameset> só poderão aparecer outras <frameset>, <frames> ou <noframes>.
Não podem ser utilizadas as marcações válidas entre marcações <body></body> nem
internamente a marcações <frameset>, nem antes dela, senão <frameset> será ignorada.
Atributos:
ROWS (<frameset rows=”valor,valor,valor...”>)

Define divisões horizontais entre janelas. Vem sempre acompanhado de valores associados,
que definem o quanto da tela cada frame vai ocupar.
Estes valores podem ser:
Numérico – pixel => (rows=”30,50”) : refere-se a quantos pixels o frame deve ocupar. A
desvantagem é que não é possível ter controle do valor total de pixels que o cliente do usuário
compreende.
Percentual => (rows=”25%,25%,50%”) deve-se sempre somar um valor de 100%.
Relativo => (rows=”2,*,*”) o primeiro frame vai ocupar dois terços da tela, e o segundo um
terço.
Para se dividir a tela do browser em três janelas horizontais, temos:
<html>
<head>
<title>Frame1</title>
</head>
<frameset rows="20%, 60%, 20%">
<frame src="pag1.html">
</frameset>
</html>
COLS (<frameset cols=”valor,valor,valor,...”>)

Funciona exatamente como a marcação anterior, no entanto, divide a tela em três janelas
verticais:
<html>
<head>
<title>Frame2</title>
</head>
<frameset cols="20%, 60%, 20%">
</frameset>
</html>
29
Para intercalar janelas horizontais e verticais, será necessário definir várias áreas <frameset>.
Para cada área delimitada como <frameset> poderão ser definidos números de linhas ou
colunas. Não é possível definir cols e rows para uma mesma área <frameset>.
<frameset> tem alguns atributos referentes à borda dos frames :
FRAMEBORDER=”no” : essa declaração retira completamente as bordas.

BORDER=”valor_em_pixels” : define a espessura das bordas dos frames. Os valores de ‘0’
a ‘4’ retiram completamente as bordas.
BORDERCOLOR=”#rrggbb” : define a cor da borda dos frames.
Exemplo: <frameset rows=”83%,17%” border=”10” bordercolor=”#00AA00”>
Atributos de <frame> : <frame> define cada janela contida em uma área <frameset>. Essa
TAG não necessita de uma finalização </frame>.
SRC : define a URL (endereço) que será exibida em cada frame.

NAME=“nome_da_janela” : é utilizado para associar um nome a uma janela. Deve ser usado
quando uma janela <frame> for o destino de um link em outro documento (normalmente é no
mesmo documento; um frame apontando para outro; tipo um índice abrindo várias URLs em
outras janelas). O nome da janela deve começar por caractere alfanumérico. Esse atributo é
opcional.
MARGINWIDTH=”valor” : controla as margens direita e esquerda de cada frame, ou seja, a
distância entre o conteúdo da página e as margens da janela. O valor associado será um valor
absoluto em pixels. O menor valor aceito será 1. Também é opcional.
MARGINHEIGHT=”valor” : funciona exatamente como o anterior, só que controla as
margens superior e inferior de cada frame.
SCROLLING=”yes,no,auto” : define se a janela deve possuir barra de rolagem ou não. Se
for definido como yes, a janela sempre terá uma barra de rolagem; se for definido como no,
nunca haverá a barra; e se for definido como auto (default) ,o browser aplicará a barra quando
for necessário.
NORESIZE : faz com que o usuário não consiga redimensionar o tamanho da janela,
arrastando a borda com o cursor. Também é opcional.
Um frame com todos os atributos seria escrito assim:
<frame src=”www.google.com.br” name=”home” marginwidth=”5” marginheight=”5”

scrolling=”no” noresize>
Usando o parâmetro TARGET : esse parâmetro é muito importante. Ele trabalha em

conjunto com name e permite que coloquemos um link em um frame, e o resultado, ou seja, a
página linkada, apareça em outro frame.
Para utilizar esse recurso:
1-Atribuir um name a cada frame (name=”valor”);
2-No documento onde será criado um link, que vai aparecer em outra janela, ao criar o link,
acrescentar o parâmetro target=”valor” à âncora, da seguinte forma:
<a href=”URL” target=”valor”>
Onde esse valor é idêntico àquele associado ao parâmetro name no frame document.
O frame document deverá ser escrito O documento que contém o link, será
assim: assim:
<html> <html>
<head> <head>
<title>Target</title></head> <title>Frame 2</title>
30
<frameset rows="80%,20%" </head>
bordercolor="#FF0000" border="5"> <body text=magenta>
<frame name="principal" src="pag1.html"> <basefont face=Arial>
<frame src="pag2.html"> Frame 2 <br>
</frameset> <a href="pag3.html" target="principal">Link</a>
</html> </body>
</html>
A página carregada é ‘pag3.html’
Noframes : essa marcação permite que se crie uma opção de navegação na página para
quem não possui um browser que entenda frames.
Essa marcação aparece dentro da estrutura <frameset>, e é sempre usada em pares
(<noframes>..conteúdo..</noframes>).
Quando o acesso for feito através de um navegador que entenda frames, o que estiver dentro
de <noframes> será ignorado.
Internamente a uma área <noframes> deverá ser usada a estrutura padrão de documentos
HTML (<head><title></title></head><body></body>, e todos os outros).
Exemplo:
<html>
<head>
<title>Uso do “noframes”</title>
</head>
<frameset cols=”30,*” bordercolor=”#000000”>
<noframes>
<body bgcolor=”#000000” text=”#FFFF00” link=”#FFFFFF” alink=”#00FF00”
vlink=”#00AA00”>
<hr size=”3” color=”#FFFF00”>
<p align=center>O seu navegador não suporta frames. Para acessar esta página você
deve utilizar a versão 2.0 (ou acima) do navegador
<a href=”http://home.netscape.com/comprod/mirror/index.htm”>
<b><i>Netscape Navigator</i></b></a>.
</p>
<hr size=”3” color=”#FFFF00”>
</body>
</noframes>
<frameset cols="10%,90%">
<frame name="menu2" src="pag1.html" scrolling=no noresize>
<frame name="principal" src="pag2.html" noresize>
</frameset>
<frame src="pag3.html" scrolling=no noresize>
</frameset>
</html>
Intercalando <frameset> - exemplos : para tornar mais claro como se constroem janelas
múltiplas e intercaladas – divisões horizontais e verticais – utilizando frames, seguem abaixo
dois exemplos.
31
Exemplo 1:
<html>
<head>
<title>Frames intercalados 1</title>
</head>
<frameset rows="30%, 70%">
<frameset cols="33%, 33%, 33%">
</frameset>
<frameset cols="50%, 50%">
</frameset>
</frameset>
</html>
Exemplo 2:
<html>
<head>
<title>Frames intercalados 2</title>
</head>
<frameset cols="25%, 75%">
</frameset>
</frameset>
</frameset>
</html>
Criando um frame InLine : se quisermos misturar texto, figuras e um frame em uma mesma
página, precisamos de um frame inline. Para isso utilizamos a TAG:
<iframe src=”nome_do_frame”>
Pode-se usar os atributos:

NAME : para identificar um que identifica qual frame está em uso
WIDTH e HEIGHT : para definir o espaço na página utilizado pelo frame
ALIGN (LEFT, RIGHT ou CENTER) : para alinhar o frame na página
Também podem ser usados os atributos da TAG <frame>; só é necessário lembrar de colocar
um </iframe> no final.
Exemplo:
<html>
<head><title>IFRAME</title></head>
32
<body bgcolor=”#000000” text=”#FFFFFF”>
<h1 align=center>Exemplo do comando IFRAME</h1>
<hr color=”#FFFFFF”>
<iframe width=90% height=70% src="pag4.html" align=center>
</iframe>
<hr color=”#FFFFFF”>
<center>Aqui continua a página normal ! </center>
</body>
</html>
Iframes em tabelas : pode-se trabalhar com links entre frames dentro de tabelas!
Exemplo:
<table border=5 width=760 height=300 bordercolor=”#FFFFFF”>
<tr>
<td width=110 height=300>frame
<iframe src="pagina1.html" width=100% height=100% scrolling="no" frameborder=0
name="cell1">
</iframe></td>
<td width=710 height=300>frame
<iframe src="pagina2.html” width=100% height=100% scrolling="auto" frameborder=0
name="cell2">
</iframe></td>
</tr>
</table>
O resultado é:
33
Como fazer links entre os frames em uma tabela:
Observando o exemplo acima, suponha que queremos fazer com que a frase ‘Primeira
Coluna da Tabela’ seja um link para uma ‘pagina3.html’, que aparecerá na célula maior
(‘Frame Principal), teremos assim:
<a href=”pagina3.html” target=”cell2”>Primeira Coluna da Tabela</a>
onde ‘cell2’ é o nome do frame maior que foi definido através do parâmetro ‘name’, na
definição (ver código acima). Lembre-se também que a definição desse link deve entrar no
código de ’pagina1.html’, e não na página da tabela.
Para melhorar o layout da tabela, experimente retirar a borda (border=0).
Tabelas são úteis para arrumar qualquer coisa: listas, imagens, formulários, textos, etc.
Limpando a tela : há basicamente dois efeitos possíveis para limpar a apresentação de

frames, e isso é feito com targets especiais:
target=”_top” limpa os frames, apresentando a próxima página em tela inteira.

target=”_blank” abre uma nova janela no navegador, sem frames, para apresentar a próxima
página.
Mapas
Client-Side Imagemap : os mapas sensíveis são rastreados pelo browser no momento em
que o usuário escolhe um ponto da imagem; dessa forma, o servidor já recebe uma requisição
de um documento, pois as coordenadas do ponto escolhido e o arquivo correspondente já
foram identificados pelo browser.
Sintaxe:
<map name=”nome”>
<area shape=”forma” href=”URL” coords=”x1,y1,x2,y2” alt=”valor”>
</map>
<img src=”imagem.extensão” usemap=”#nome” border=”0”>
Onde:
NAME : é a declaração do nome do mapa que será referenciado na inserção da imagem,
indicando que ela é um mapa.
SHAPE : define os formatos para as figuras clicáveis. Tem os seguintes parâmetros:
circ ou circle – declara um círculo na figura; os pontos indicam o centro e um ponto
de fronteira do círculo.
poly – um polígono; cada coordenada declarada é um vértice (8 coordenadas).
rect – um retângulo; as coordenadas declaradas são, respectivamente, do vértice
esquerdo superior e direito inferior.
default – indica um endereço padrão para quando o mouse for acionado em uma
área da figura além das previstas pelo autor.
HREF : página que será acessada quando uma área do mapa for clicada.
COORDS : coordenadas que definem os formatos na figura.
ALT : texto que aparecerá ao se passar o mouse sobre a área clicável da figura.
USEMAP : recebe o nome do mapa (definido em name). É declarado na TAG de inserção da
imagem, indicando que ela é um mapa.
Existe, ainda um atributo chamado NOREF, que indica que a área determinada não chama
arquivo nenhum. Serve para definir que qualquer área que não esteja dentro das ligadas a
uma URL não seja clicável. Deve ser usado dentro de <área> no lugar de HREF.
Exemplo:
34
<html>
<head>
<title>Exemplo de Mapa Clicável</title>
<base target="_blank">
</head>
<body bgcolor=”#000000” leftmargin=50 topmargin=50 text=”#0000FF”>
<map name="click">
<area shape="rect" coords="0,1,276,257" href="pag1.html" alt="link1">
<area shape=RECT coords="0,259,276,433" href="pag2.html" alt="link2">
</map>
<h3 align=center>Exemplo de Mapa Clicável</h3>
<hr size=3 color=”#0000FF”><br>
<center><img src="imagen.jpg" usemap="#click" border=0></center>
</body>
</html>
Ninguém calcula as coordenadas desses mapas na mão. Essas coordenadas são

encontradas através de programas de manipulação de imagens – Xview, LView, entre outros
(existem vários que são pequenos e freeware é só procurar em sites de busca, tipo Google,
por ‘free image maps’).
Server-Side Imagemap : método para a criação de mapas que usa a comunicação com o
servidor HTTP. Os servidores WWW tem um programa que lida com a relação entre
coordenadas de imagens e URL’s. No serividor NCSA, esse programa é o imagemap, no
CERN é o htimage. Escolhida a imagem que servirá de base de partida de diversos links para
outros documentos, é preciso gerar um arquivo relacionando coordenadas da imagem a estes
links. Como já foi dito, as coordenadas são encontradas através de programas de
manipulação de imagens.
Um arquivo .map (do servidor NCSA), tem um conteúdo semelhante a:

default /nada.html
rect http://www.google.com.br 15,8 135,9
circle http://www.yahoo.com.br 306,204 7
Um arquivo .conf (do servidor CERN), tem um conteúdo semelhante a:

default /nada.html
rect (15,8) (135,9) http://www.google.com.br
circ 306,204 7 http://www.yahoo.com.br
Ambos os arquivos significam a mesma coisa:
a região da figura, compreendida pelo retângulo (rect) de coordenadas (15,8) e (135,9),

funciona como um link para a URL http://www.google.com.br (hipoteticamente);
a região da figura compreendida pelo círculo (circ ou circle) de centro (306,204) e raio 7, é
um link para a URL http://www.yahoo.com.br (hipoteticamente);
se o mouse não for acionado em nenhuma dessas duas regiões previstas, o link será
dirigido para o arquivo default – nesse exemplo, o nada.html.
Quando o mapa estiver pronto, deve ser declarado da seguinte maneira, supondo que o nome
do arquivo seja clic.map:
<a href=”http://www.host.br/clic.map”><img src=”imagem.gif” ismap></a>
35
onde:
http://www.host.br/clic.map – é o endereço para o arquivo que contém as diretivas que
associam regiões da figura a referências WWW.
imagem.gif – é a figura que irá “funcionar “ como imagem clicável.
Como exemplo, temos um arquivo de nome mapa.map, cujo conteúdo é:
#Pagina da Graduacao
rect docs/grad.html 3,2 130,42
#Pagina do Mestrado
rect docs/mestr.html 133,3 230,44
#Pagina do Doutorado
rect docs/dout.html 234,3 34,45
e será relacionado a uma imagem qualquer da seguinte forma:
<a href=”mapa.map”><img src=”icones/cursos.jpeg” ismap border=0></a>
Inserindo Som
TAG <bgsound> - sem player disponível ao usuário

Esse comando carrega um arquivo de áudio como trilha sonora enquanto a página estiver
sendo visualizada. Quando a página é encerrada a execução do som também é encerrada.
<bgsound src=”nome_arquivo.extensão” loop=”n”>
Onde:
SRC : define o nome do arquivo de áudio a ser carregado. Suporta os seguintes formatos :
*.wav, *.midi, *.au, *,mp3.
LOOP : n define quantas vezes o arquivo de áudio será executado. Se n for igual a ‘1’ ou
‘infinite’, o arquivo será executado infinitamente durante a visita na página.
Esta TAG de som pode ser inserida em qualquer ponto da página, dentro de <body></body>.
É bom não inserir arquivos de áudio muito grandes para diminuir o tempo de acesso à página.
TAG <embed> - player visível ao usuário

Com esta TAG é possível ao usuário interagir no som disponível na página.
<embed src=”nome_arquivo.extensão” width=”120” height=”50” autostart=”false”

showstatusbar=”1” showdisplay=”1”>
Onde:
WIDTH e HEIGHT : largura e altura do player, respectivamente.
SRC : nome do arquivo a ser carregado. Suporta os formatos: *.wav, *.midi, *.au, *.mp3,
*.wma.
AUTOSTART : se true, o arquivo será iniciado automaticamente, se false, ficará parado.
SHOWSTATUSBAR : se 1, exibe o status do arquivo, se 0, oculta as informações.
SHOWDISPLAY : se 1, exibe informações sobre o arquivo, se 0, oculta as informações.
Esses recursos (<bgsound> e <embed>) não farão efeito algum se o navegador não estiver
configurado para executar arquivos de mídia.
Inserindo Vídeo:
36
Também utiliza a TAG <embed>. A inserção de vídeo depende bastante do tipo de arquivo de
vídeo usado. A formatação pode, por exemplo, inserir um arquivo Quick Time:
<embed src=”arquivo.mov”>
Uma formatação mais completa inclui a indicação do plug-in e controles da reprodução do

vídeo:
<embed src=”video.mov” pluginspace=”http://www.apple.com/quicktime/download”

loop=”false” controller=”true” autoplay=”false” width=”400” height=”150”>
A TAG <blink>
SÓ FUNCIONA NO NETSCAPE COMMUNICATOR!!

A TAG <blink> serve para definir textos que ficam piscando. É preciso ter cuidado ao utilizá-lo
pois se sua página já apresenta cores, desenhos, cabeçalhos, todos os efeitos que chamam a
atenção do usuário, o <blink> será ainda mais um fator chamativo, o que causa um efeito final
cansativo, confuso, e que pode deixar os usuários neuróticos. Evite usar o <blink>; e se usá-lo
aplique somente em pequenos detalhes (palavras ou flechinhas).
<blink>Texto Piscante</blink>
Texto Animado
SO FUNCIONA NO MICROSOFT INTERNET EXPLORER!!

A TAG <marquee> permite que um texto ou uma imagem possa correr pela tela. Também
deve ser usado com cautela.
<marquee> Texto ou Imagem </marquee>
Atributos:
ALIGN=”top,middle,bottom” : posição em relação ao browser.

BEHAVIOR=”scroll,slide,alternate” : controla o comportamento do texto.
BGCOLOR=”#rrggbb” : muda a cor de fundo.
DIRECTION=”left,right” : define a direção que o texto vai correr.
HEIGHT=”valor_em_pixels” : define a altura.
WIDTH=”valor_em_pixels” : define a largura.
HSPACE=”valor_em_pixels” : define as margens esquerda e direita.
VSPACE=”valor_em_pixels” : define as margens inferior e superior.
LOOP=”valor” : define quantas vezes o texto irá passar.
SCROLLAMOUNT=”valor” : controla a velocidade do texto, definindo o nº de pixels entre
cada redesenho do texto.
SCROLLDELAY=”valor” : controla a velocidade do texto ao definir os intervalos de
Redesenho do texto.
Exemplo:
<marquee align=”middle” behavior=”scroll” bgcolor=”#00FF00” direction=”right” loop=”5”>

CORRE TEXTO, CORRE!!
</marquee>
Inserindo comentários em sua página

Comentários são utilizados para descrever procedimentos utilizados na criação da página. O
texto de um comentário não é exibido pelo navegador. Alguns navegadores não reconhecem o
uso de TAGs dentro de comentários; se forem utilizados poderão aparecer na página.
37
São bastante úteis na hora da manutenção.
Sintaxe : 
Exemplo:
<html>
<head><title>Utilizando comentários</title>
</head>
<body>
Esta página contém diversos comentários



</body>
</html>
38

HTML Ler

Enviado por

Dados do documento

Descrição original:

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

HTML Ler

Enviado por

Direitos autorais:

Formatos disponíveis

1

HTML= Hyper Text Markup Language.

<html> TAG composta

<html>...</html> envolvem todas as seções de um documento (<head> e <body>).

<body bgcolor=”#rrggbb” text=”#rrggbb” link=”#rrggbb” alink=”#rrggbb” vlink=”#rrggbb”

Para deixar a imagem de fundo fixa, bgproperties:

<body background=”gato.jpg” bgproperties=”fixed”>

leftmargin : define a largura da margem esquerda. Assume qualquer valor em pixels.

Há seis níveis de cabeçalhos em HTML, de <h1> a <h6>.

<h1>Este é um cabeçalho de nível 1</h1>

Esses cabeçalhos são mostrados da seguinte forma:

cabeçalhos não podem ser aninhados, isto é:

Embora em alguns browsers esse aninhamento possa dar um resultado.

Esta frase está dividida <br> com uma quebra de linha.

Parágrafos: para separar blocos de texto, usamos o elemento <p>.

parágrafo1; <p> parágrafo 2.

Combinando parágrafos e quebras de linha, temos:

parágrafo 1; <br> linha 1 do parágrafo 1, <br> linha 2 do parágrafo1 .<p>

<p> também tem atributos de alinhamento:

<hr size=7> insere uma linha de largura 7 (pixels).

Fonte: permite a escolha da fonte para os textos. Usa o atributo face.

<font face=Times color=”#0000AA”>Fonte Times azul</font>

<font face=”Bookman Old Style” color=”#AA00AA”>Bookman Old Style</font>

<basefont size=3 color=red face=Arial,Times,Courier>

Algumas observações sobre <basefont>:

Formatação de textos e caracteres:

Blocos de texto: o HTML oferece as seguintes formatações de blocos de texto:

<pre> Uma linha aqui,

Uma linha aqui,

<blockquote> é usado para citações longas.

<blockquote>Texto com mais margem</blockquote>

<address> : Usado para identificar autorias de página. Geralmente apresentadas na parte

<cite> : Para títulos de livros, filmes e citações curtas:

Assisti <cite>Guerra Nas Estrelas</cite> um milhão de vezes!

<code> : Para indicar trechos de código de programa:

<code>for (x=0); cl &&(!feof(stdin)); x++));</code>

<dfn> : Indica a definição de uma palavra, em geral apresenta o texto em itálico:

<em> : Ênfase, também normalmente apresentado em itálico:

É preciso pesquisar <em>muito</em> para encontrar o termo exato.

<kbd> : Indica uma entrada via teclado:

O resultado do primeiro applet é: <samp>Hello, World!</samp>

<strong> : Forte ênfase, geralmente mostrado em negrito:

Antes de enviar um e-mail, <strong>confira o campo “Subject:”</strong>!

No campo Login, escreva <var>guest</var>.

<i> : Itálico. Em alguns casos, apenas caracteres inclinados.

<tt> : Tipo teletype, fonte de espaçamento fixo.

<tt>Texto de espaçamento fixo</tt>

<u> : Sublinhado. Deve ser usado com cuidado, pois

<strike> ou <s> : Texto riscado (tachado).

<small> : Fonte um pouco menor

<sub> : Frase em estilo índice (subscrito).

<sup> : Frase em estilo expoente (sobrescrito).

Termo a ser definido

Cada item também pode ter seu atributo específico:

<ol start=4 type=a>

Listas e “sub-listas”: As listas podem ser aninhadas.

ALT : Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no

<img src=”url_imagem” alt=”descrição_da_imagem”>

<img src=”imagem” alt=”descrição” width=”largura” height=”altura”>

<img src=”bola.gif” width=50 height=50>

Align : Atributo de alinhamento.

<img src=”imagem” alt=”descrição” align=alinhamento>