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 >