Apostila de HTML

2.
Marcadores HTML
Neste capítulo apresentaremos uma relação dos marcadores HTML, exceto dos
marcadores relacionados com âncoras, imagens, applets, tabelas, frames e formulários,
que serão abordados em capítulos posteriores.
Algumas regras simples serão usadas para tornar a sintaxe clara. Junto com a marcador
serão exibidos seus possíveis atributos, sendo que o marcador e os atributos obrigatórios
aparecerão em negrito. Serão exibidos também os possíveis valores dos atributos e,
onde existir, o valor default será indicado em itálico. O sinal "|" será usado para
identificar atributos ou valores mutuamente exclusivos e colchetes serão usados para
denotar opcionalidade.
O valor de um atributo só precisa ser colocado entre aspas se ele contém espaços em
branco. A seguinte notação será usada para especificar os possíveis valores de um atributo:
n (em
um número inteiro
itálico):
p% (em
um valor percentual inteiro
itálico):
URL: um endereço. URLs serão melhor explicados no capítulo seguinte
string: uma cadeia de caracteres
#RRGGBB: o código de uma cor no padrão RGB onde RR, GG e BB são números
hexadecimais (variando de 00 a FF) que representam a intensidade das
cores fundamentais, vermelho, verde e azul, respectivamente
2.1 Marcadores para definir a estrutura de um arquivo

HTML
A estrutura padrão de um arquivo HTML é:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Os marcadores <html>, <head> e <body> não devem ser omitidos, pois embora
alguns browsers (como o Netscape Navigator, por exemplo) possam entender um
documentos sem eles, outros browsers exigem que eles estejam especificados.
<html version=string></html>
Serve para informar ao browser que o arquivo contém código HTML e, opcionalmente,
qual a versão através do atributo version. O marcador <html> deve aparecer na
primeira linha do arquivo e </html> na última linha.
<head></head>
Identifica a primeira parte do arquivo, que pode conter os marcadores <title>,

<isindex>, <base>, <script>, <style>, <meta> e <link>.
<body background=URL bgcolor=#RRGGBB text=#RRGGBB link=#RRGGBB

vlink=#RRGGBB alink=#RRGGBB></body>
Delimita o corpo principal da página. Junto com o marcador <body> podem ser usados
os atributos background para definir uma imagem que aparecerá repetidas vezes de
modo a formar um pano de fundo para o documento, bgcolor para definir a cor de
fundo do documento (normalmente cinza), text para definir a cor do texto
(normalmente preta), link para definir a cor dos links não visitados (normalmente
azul), vlink para definir a cor dos links já visitados (normalmente violeta) e alink para
definir a cor dos links ativos, ou seja, no momento em que são selecionados
(normalmente vermelha).
É possivel também especificar as cores usando os termos aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, e yellow, mas
cuidado, pois isto pode não funcionar em todos os browsers. Eis um exemplo:
<body background=piscina.gif text=#00ff00 vlink=yellow>
2.2 Marcadores do HEAD
<title></title>
É usado para definir o título do documento, que vai ser exibido em algum lugar
(geralmente no topo) da janela do browser. Evite usar acentuação dentro do
<title> pois é o gerenciador de janelas (windows manager) quem interpreta o
<title> e não o browser, e muitas vezes o gerenciador de janelas não suporta
caracteres acentuados. O título deve ser o mais explicativo possível, no entanto
deve ser compacto (no máximo uma linha).
<isindex prompt=string>
Antes dos formulários serem definidos, este marcador foi projetado para
permitir que o usuário pudesse enviar uma string para o servidor o qual se
encarregaria de processar esta string. O atributo prompt serve para especificar
um texto alternativo para a caixa de diálogo, cujo texto default é "This is a
searchable index. Enter search keywords:". Atualmente nao há utilidade para
este marcador.
<base href=URL target=string>
Serve para definir o localização correta da página. Normalmente o browser já

conhece esta localização, no entanto em certos casos onde pode haver dubiedade
(por exemplo, quando se utiliza links simbólicos do Unix) este marcador definirá
a localização real da página, a qual será usada para resolver os endereços
relativos contidos na própria página. O atributo target define a janela onde os
links contidos na página serão exibidos e tem como default o valor _self,
significando a mesma janela que contém o link. A utilização deste atributo ficará
mais clara no capítulo 6 onde será mostrado como criar um documento com
várias janelas.
<script language=string></script>
Usando este marcador pode-se enviar scripts (pequenos programas) que deverão
ser executados pelo browser. Os scripts devem ser colocados dentro de um
comentário. O atributo language serve para especificar qual a linguagem na
qual o script foi escrito. Aqui temos uma exemplo (que está incompleto portanto
não funciona):
<script language="JavaScript">

</script>
<style type=string></style>
O marcador style existe para garantir compatibilidade com futuras versões da

HTML, que vão suportar estilos de página. Este marcador deve conter um estilo
de página válido (normalmente colocado dentro de um comentário). O atributo
type indica a linguagem em que o estilo foi descrito.
<meta http-equiv=string name=string content=string>
O marcador meta serve para definir meta-informação, ou seja, informação sobre

a informação. Quando um browser requisita uma página, o servidor envia um
header junto com a página. O valor do atributo http-equiv junto com o valor
do atributo content serão usados pelo servidor como parte do header a ser
enviardo junto documento para o browser. Para fazer com que o servidor inclua
no header a linha "Reply-to: anonymous@ime.usp.br" toda vez que um
determinado documento for requisitado, devemos incluir neste documento a
linha:
<meta http-equiv="Reply-to" content="anonymous@ime.usp.br">

A meta-informação enviada no header pode ser uma instrução para o browser
executar uma determinada operação. Por exemplo:
<meta http-equiv=refresh content="5; URL=pagina2.html">
Transmite a meta-informação que após 5 segundos o browser deve requisitar e
exibir o documento pagina2.html. Mais um exemplo:
<meta http-equiv=pragma content=no-cache>
Esta meta-informação serve para instruir o browser a não armazenar a página no
cache (é claro que nem todos os browsers entendem estas meta-informações).
O atributo name serve para definir meta-informação que não será enviada como
parte do header. As formas mais comuns de utilização do marcador meta junto
com o atributo name são:
<meta name=generator content="um programa qualquer">

<meta name=author content="nome do autor da página"> 7
<meta name=keywords content="palavras-chave">
<meta name=description content="descrição da página">
Estas informações podem ser aproveitadas por certos programas, em especial

por ferramentas de busca como o Alta Vista e o Infoseek.
<link rel=string|rev=string href=URL title=string>

link é usado para definir relacionamento entre documentos. É possível relacionar
o documento que contém o marcador link com o documento especificado na
atributo href usando-se o atributo rel, ou o contrário usando-se o atributo rev. Os
atributos rel e rev podem assumir os valores:
stylesheet Indica o arquivo que contém o estilo para o documento

made o criador do documento
home a página inicial em relação à página
toc a tabela do conteúdo da página
index o índice da página
glossary o glossário da página
copyright a página que contém informações de copyright do documento corrente
up a página logicamente acima do documento corrente
next a página posterior
previous a página anterior
help a página de help
O atributo title pode ser utilizado para sugerir um título para o URL
refenciado. Apesar da sua utilidade, muitos6browsers não suportam este
marcador.
2.3 Marcadores do BODY
2.3.1 Cabeçalhos (Headers)
Cabeçalhos podem ser usados em qualquer parte do BODY para dar destaque
maior ou menor a algum termo do texto. Existem 6 tamanhos de cabeçalhos e
eles são usados da seguinte forma:
<h1 align=left|center|right></h1>
Cabeçalho H1
Cabeçalho H2
Cabeçalho H3
Cabeçalho H4
Cabeçalho H5
Cabeçalho H6
O atributo align especifica o alinhamento do texto.
2.3.2 Estilos físicos de caracteres
Estilo Marcador Exemplo

Itálico <i></i> Caracteres em itálico
Negrito (Bold) <b></b> Caracteres em negrito
Teletipo (Fixed) <tt> </tt> Caracteres de tamanho fixo
Este exemplo é difícil ver no
Letra Piscando (Blink) <blink></blink>
papel !
Letra Riscada (Strike) <strike></strike>
Sublinhado (Underline) <u></u>
Grande (Big) <big></big> Caracteres grandes

Pequeno (Small) <small></small> Caracteres pequenos
Subscrito (Subscript) <sub></sub> H2O

Sobrescrito <sup></sup> E=mc2
(Superscript)
Para a maioria dos browsers, todos estes estilos podem ser combinados, por
exemplo:
<tt><b><i>Mistura de Estilos</i></b></tt>
resultando em: Mistura de Estilos
2.3.3 Estilos lógicos de caracteres
Estilo Marcador Exemplo

Variável (VAR) <var></var>
Enfatizado (EM) <em></em> Caracteres nestes estilos

Citações curtas normalmente aparecem em itálico
<cite></cite>
(CITE)
Fragmentos de <code></code>
código (CODE)
Caracteres nestes estilos
Entrada via teclado <kbd></kbd> normalmente aparecem em
(KBD) tamanho fixo
Saída via monitor <samp></samp>
(SAMP)
Definição de termos <dfn></dfn> Caracteres em DFN
(DFN)
Fortemente
enfatizado <strong></strong> Caracteres em STRONG
(STRONG)
Estes estilos também podem ser combinados, na maioria dos browsers, por
exemplo:
<cite><strong>Itálico e negrito</strong></cite>
resultando em: Itálico e negrito
Uma pergunta pode ter surgido: Se os estilos físicos e os estilos lógicos

produzem o mesmo resultado, por que existem os dois ? Bem, os estilos lógicos
não definem um tipo específico de letra (24-point Times centered, por exemplo),
mas sim uma característica. Por exemplo, o estilo STRONG é interpretado pela
maioria dos browsers como negrito, no entanto, apenas mudando a configuração
do browser, é possível definir que os caracteres neste estilo devem ser
apresentado na cor vermelha, por exemplo. Dessa forma os estilos lógicos
permitem uma maior flexibilidade.
2.3.4 Listas
Lista não ordenada (Unordered List)
<ul type=disc|square|circle compact></ul>
Este marcador serve para criar uma lista não ordenada, estabelecendo um recuo
para a direita e inserindo um símbolo no início de cada item da lista. Este
símbolo pode ser um círculo preenchido (disc), um quadrado (square) ou um
círculo vazado (circle) e é definido pelo atributo type. O atributo compact serve
para que a lista seja exibida de uma forma mais compacta. Os marcadores
<dir></dir> e <menu></menu> têm efeito semelhante ao marcador ul, com a
diferença que não admitem o atributo type nem o atributo compact. Para definir
um item de uma lista não ordenada usa-se o marcador li com a seguinte sintaxe:
<li type=disc|square|circle>[</li>]
Para criar a lista:

 Exemplo de lista não ordenada
 com um quadrado
 antes dos últimos dois itens
É necessário usar o seguinte código:
<ul>
<li> Exemplo de lista não ordenada
<li type=square> com um quadrado
<li> antes dos últimos dois itens
</ul>
Lista ordenada (Ordered List):
<ol type=1|a|A|i|I start=n compact></ol>
O marcador ol cria uma lista ordenada. Através do atributo start é possível

definir o valor inicial do contador que por default é 1. O atributo type pode
assumir os seguintes valores 1 (default), a (letras minúsculas), A (letras
maiúsculas), i (algarismos romanos minúsculos) e I (algarismos romanos
maiúsculos). O marcador li serve para definir itens da lista e tem sintaxe um
pouco diferente em lista ordenadas:
<li type=1|a|A|i|I value=n>[</li>]
A atributo value serve para redefinir a numeração da lista. Note o exemplo e

como ele foi gerado:
a. Exemplo de lista ordenada
V. com letra na primeira linha e

VI. algarismos romanos nas demais e um salto na numeração
<ol type=a>
<li> Exemplo de lista ordenada
<li type=I value=5> com letra na primeira linha e
<li> algarismos romanos nas demais e um salto na numeração
</ol>
Lista de definições (Definition List):
<dl compact></dl>
Neste tipo de lista cada item é composto de um termo e sua definição. O termo é
definido usando o marcador <dt>[</dt>] e a definição usando <dd>[</dd>].
Veja um exemplo:
IME-USP
O Instituto de Matemática e Estatística da Universidade de São Paulo (USP),
oferece cursos de graduação e pós-graduação em matemática, estatística e
computação.
CEC
O Centro de Ensino de Computação do IME-USP oferece diversos cursos de
extensão na área de informática, em especial Computação Instrumental,
Editoração Avançada, Introdução ao Uso da Rede Internet e HTML Avançado.
Para produzir o texto acima usaríamos o seguinte código:
<dl>
<dt>IME-USP
<dd>O Instituto de Matemática e Estatística da
Universidade
de São Paulo (USP), oferece cursos de graduação e pós-
graduação
em matemática, estatística e computação.
<dt>CEC
<dd>O Centro de Ensino de Computação do IME-USP oferece
diversos cursos de extensão na área de informática, em
especial
Computação Instrumental, Editoração Avançada, Introdução
ao Uso
da Rede Internet e HTML Avançado.
</dl>
O atributo compact pode ser utilizado junto com o marcador <dl> para
especificar que o termo e sua definição devem aparecer na mesma linha, se
possível. Por exemplo:
<dl compact>
<dt>dir
<dd>mostra o conteúdo do diretório corrente
<dt>dir /p
<dd>mostra o conteúdo do diretório corrente, tela por tela
</dl>
produz:
dir
mostra o conteúdo do diretório corrente
dir /p
mostra o conteúdo do diretório corrente, tela por tela
Pode-se usar o marcador dd para obter um recuo para a direita no início da linha
mesmo fora de uma lista de definição, mas não é garantido que isto sempre
funcione. Finalmente, é possível combinar listas ordenadas, não ordenadas e
listas de definição criando listas dentro de listas como no exemplo:
 Região Sudeste
1. Espírito Santo
2. Minas Gerais
3. Rio de Janeiro
4. São Paulo
 Campinas
 São Paulo
 Região Sul
1. Paraná
2. Santa Catarina
Florianópolis
Capital do estado de Santa Catarina, famosa por suas praias
Blumenau
Cidade fundada por colonos alemães onde anualmente acontece a Oktoberfest
3. Rio Grande do Sul
Estas listas encadeadas foram criadas com as seguintes linhas de código:

<ul>
<li>Região Sudeste
<ol>
<li>Espírito Santo
<li>Minas Gerais
<li>Rio de Janeiro
<li>São Paulo
<ul>
<li>Campinas
<li>São Paulo
</ul>
</ol>
<li>Região Sul
<ol>
<li>Paraná
<li>Santa Catarina
<dl>
<dt>Florianópolis
<dd>Capital do estado de Santa Catarina, famosa por
suas praias
<dt>Blumenau
<dd>Cidade fundada por colonos alemães onde
anualmente acontece a
<i>Oktoberfest</i>
</dl>
<li>Rio Grande do Sul
</ol>
</ul>
Obs: A indentação não é obrigatória, e foi utilizada simplesmente para deixar o
código mais fácil de entender.
2.3.5 Formatando o texto
Ao exibir um documento escrito em HTML, os espaços entre as palavras são

considerados como um único espaço, e as linhas em branco entre uma linha e
outra são ignoradas. Por isso geralmente é preciso incluir marcadores de quebra
de linha, quebra de parágrafo ou de texto pré-formatado como os que seguem.
<br clear=left|all|right|none>
Este marcador insere uma quebra de linha. O atributo clear é útil quando tem-
se uma imagem alinhada à esquerda ou à direita e se quer pular para a próxima
linha com a margem esquerda, ou direita, ou ambas, não ocupadas pela imagem.
<p align=left|center|right>[</p>]
Este marcador serve para definir um parágrafo e o atributo align define seu
alinhamento. O seguinte código:
<p align=center><i>Este parágrafo deve estar

centralizado.</i>
<p align=right><i>Agora deve estar alinhado à direita.</i>
<p><i>E este deve estar alinhado à esquerda.</i>
Produz este resultado:
Este parágrafo deve estar centralizado.
Agora deve estar alinhado à direita.
E este deve estar alinhado à esquerda.
<pre width=n></pre>
Usa-se pre para incluir textos pré-formatados. O atributo width define uma
largura desejável para o texto, de forma que o browser pode escolher um
tamanho de letra que permite ao texto ter largura não superior à da janela do
browser. Infelizmente a maioria dos browsers não reconhece este atributo.
Normalmente a apresentação de um texto pré-formatado é inferior a de um texto

formatado pelos marcadores HTML, pois neste último caso a quebra de linha é
feita pelo próprio browser, levando em conta o tamanho da janela onde a página
está sendo exibida. Em um texto pré-formatado é possível que a parte direita do
texto extrapole a largura da janela, forçando o usuário a aumentar a janela, o que
nem sempre é possível ou desejável, ou então obrigando o usuário a usar a barra
de rolagem horizontal.
Exemplo de texto pré-formatado:
"Este é um texto
pré-formatado."
<plaintext>
Deste marcador em diante tudo será interpretado como texto puro (mesmo o que
estiver entre < >). Um marcador similar é o <xmp></xmp>, que tem a vantagem
de se poder determinar a parte do código que será interpretada como texto puro.
<blockquote></blockquote>
Com este marcador é possivel destacar uma citação longa (de várias linhas) na
tela. A maioria dos browsers formatam as margens da citação de forma a
destacá-la do texto em volta. Por exemplo:
LEI DA DEMONSTRAÇÃO DE SISTEMAS
"A eficiência de um sistema, previamente testado, na hora de sua

demonstração, é inversamente proporcional ao número e à importância
das pessoas que observam seu funcionamento."
(Corolário da Lei de Murphy)
É obtido com o seguinte código:

<blockquote>LEI DA DEMONSTRAÇÃO DE SISTEMAS
<p>"A eficiência de um sistema, <i>previamente testado</i>,
na hora de sua demonstração, é inversamente proporcional ao
número e à importância das pessoas que observam seu
funcionamento."
<p align=right>(Corolário de Lei de <i>Murphy</i>)
</blockquote>
<address></address>
Geralmente é usado para especificar o autor de um documento, a forma de

contactar o autor e a data da última revisão. Usualmente é um dos últimos itens
de uma página. A maioria dos browsers exibem o texto delimitado por este
marcador em itálico. O exemplo:
HTML: Como Criar Páginas na WWW / glauber@ime.usp.br / Última revisão:

20set1996
Foi obtido com o código:
<address>
HTML: Como Criar Páginas na WWW / glauber@ime.usp.br /
Última revisão: 20set1996
</address>
<center></center>
Este marcador serve para definir alinhamento centralizado. O marcador mais

geral para este propósito (porém menos difundido) é:
<div align=left|center|right></div>
Através deste marcador podemos criar uma divisão na página onde o

alinhamento derá definido pelo atributo align.
<hr align=left|center|right noshade size=n width=n|p%>
Serve para inserir uma linha horizontal. O atributo size define a altura da linha
(em pixels), width a largura (em pixels ou como um percentual da janela do
browser)), align o alinhamento e noshade define linha sólida (sem sombra).
Um exemplo:
<hr size=8 width=50% noshade align=right>

Cria uma linha com 8 pixels de altura, com largura igual a 50% do tamanho da
janela, alinhada à direita, sem sombra, como a seguinte:
<font size=n color=#RRGGBB face=string></font>
Este marcador junto com os atributos size, color e face serve para definir o
tamanho, a cor e o tipo dos caracteres. O tamanho pode ser definido em termos
absolutos usando um número inteiro entre 1 (menor caractere) e 7 (maior
caractere), ou em termos relativos, usando-se um número inteiro precedido do
sinal "+" ou do sinal "-". Por exemplo, <font size=+1> significa aumentar o
tamanho dos caracteres para o tamanho imediatamente maior do que o tamanho
usado até então. Mais um exemplo:
Brasil França (claro que a cor verde não dá pra ver no papel !)
Obtido com: <font size=7 color=green face=helvetica>Brasil</font>

França
O atributo face deve conter o nome de um conjunto de caracteres. Alguns

conjuntos de caracteres comuns (conhecidos pelo Netscape Navigator 3.0) são:
courier, fixed, helvetica, lucida, menu, terminal, times e utopia.
Finalmente, para inserir comentários em HTML usa-se uma exclamação após o

sinal <, como no exemplo:
<! este texto não aparecerá na página >

Para prover legibilidade e facilitar a manutenção da página, é importante inserir
comentários no código, da mesma forma que se faz com um programa fonte em
uma linguagem qualquer.

Apostila de HTML

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

Apostila de HTML

Enviado por

Direitos autorais:

Formatos disponíveis

2.

2.1 Marcadores para definir a estrutura de um arquivo

Identifica a primeira parte do arquivo, que pode conter os marcadores <title>,

<body background=URL bgcolor=#RRGGBB text=#RRGGBB link=#RRGGBB

<body background=piscina.gif text=#00ff00 vlink=yellow>

2.2 Marcadores do HEAD

<base href=URL target=string>

Serve para definir o localização correta da página. Normalmente o browser já

<!-- Iniciando Aplicativo Java

O marcador style existe para garantir compatibilidade com futuras versões da

<meta http-equiv=string name=string content=string>

O marcador meta serve para definir meta-informação, ou seja, informação sobre

<meta http-equiv="Reply-to" content="anonymous@ime.usp.br">

<meta name=generator content="um programa qualquer">

Estas informações podem ser aproveitadas por certos programas, em especial

<link rel=string|rev=string href=URL title=string>

stylesheet Indica o arquivo que contém o estilo para o documento

2.3 Marcadores do BODY

2.3.1 Cabeçalhos (Headers)

O atributo align especifica o alinhamento do texto.

2.3.2 Estilos físicos de caracteres

Estilo Marcador Exemplo

Grande (Big) <big></big> Caracteres grandes

Subscrito (Subscript) <sub></sub> H2O

resultando em: Mistura de Estilos

2.3.3 Estilos lógicos de caracteres

Estilo Marcador Exemplo

Enfatizado (EM) <em></em> Caracteres nestes estilos

resultando em: Itálico e negrito

Uma pergunta pode ter surgido: Se os estilos físicos e os estilos lógicos

Lista não ordenada (Unordered List)

<ul type=disc|square|circle compact></ul>

Para criar a lista:

É necessário usar o seguinte código:

Lista ordenada (Ordered List):

<ol type=1|a|A|i|I start=n compact></ol>

O marcador ol cria uma lista ordenada. Através do atributo start é possível

<li type=1|a|A|i|I value=n>[</li>]

A atributo value serve para redefinir a numeração da lista. Note o exemplo e

a. Exemplo de lista ordenada

V. com letra na primeira linha e

Lista de definições (Definition List):

Estas listas encadeadas foram criadas com as seguintes linhas de código:

2.3.5 Formatando o texto

Ao exibir um documento escrito em HTML, os espaços entre as palavras são

<p align=center><i>Este parágrafo deve estar

Agora deve estar alinhado à direita.

E este deve estar alinhado à esquerda.

Normalmente a apresentação de um texto pré-formatado é inferior a de um texto

LEI DA DEMONSTRAÇÃO DE SISTEMAS

"A eficiência de um sistema, previamente testado, na hora de sua

(Corolário da Lei de Murphy)

É obtido com o seguinte código:

Geralmente é usado para especificar o autor de um documento, a forma de

HTML: Como Criar Páginas na WWW / glauber@ime.usp.br / Última revisão:

Foi obtido com o código:

Este marcador serve para definir alinhamento centralizado. O marcador mais

Através deste marcador podemos criar uma divisão na página onde o

<hr align=left|center|right noshade size=n width=n|p%>

<hr size=8 width=50% noshade align=right>

<font size=n color=#RRGGBB face=string></font>

Obtido com: <font size=7 color=green face=helvetica>Brasil</font>

O atributo face deve conter o nome de um conjunto de caracteres. Alguns