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">

    <!-- Iniciando Aplicativo Java

    function scrollit_r2l(seed)
    {
        if (seed > 100) {
            seed--;
            var cmd="scrollit_r2l(" + seed + ")";
            timerTwo=window.setTimeout(cmd,50);
            }
    }

    // -- Fim do codigo Java -------------- -->

     </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">

<meta http-equiv=refresh content="5; URL=pagina2.html">

<meta http-equiv=pragma content=no-cache>

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)

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
Letra Piscando (Blink)	<blink></blink>	Este exemplo é difícil ver no 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 (Superscript)	<sup></sup>	E=mc2

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

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

<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:

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:

1. Exemplo de lista ordenada
5. com letra na primeira linha e
6. algarismos romanos nas demais e um salto na numeração

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.

    <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>

    <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

    <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>

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>

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)

     <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:

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>

<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 >