Guia de Iniciacao ao HTML

Esta e' uma cartilha para elaboracao de documentos em HTML, a linguagem de marcacao usada no World Wide Web (Rede Mundial).

Conteúdo:

• Significado das siglas
• Documento HTML minimo
  • Titulos
  • Cabecalhos
  • Paragrafos
• Ligacao com outros documentos
  • Recurso Uniforme de Localizacao (URL)
  • Ancora: outros documentos
  • Ancora: dentro do documento
• Etiquetas de Marcacao Adicional
• Listas
  • Listas nao-numeradas
  • Listas numeradas
  • Listas descritivas
  • Listas ordenadas
• Texto preformatado
• Quotas extendidas
• Enderecos
• Caracter de formatacao

WWW

World Wide Web (Rede Mundial, ou Web (Teia), ou W3).

SGML

Standard Generalized Markup Language (Norma Padrao para Linguagem de Marcacao) e' uma norma para descrever a linguagem de marcacao.

DTD

Document Type Definition (Definicao de Tipo de Documento) este e' uma linguagem de marcacao especifica, quando se usa SGML.

HTML

HyperTex Markup Language (Linguagem de Marcacao Hypertexto HTML) e' uma DTD SGML. Em termos praticos HTML e' uma colecao de estilos (indicados para etiquetas de marcacao) que define os varios componentes de um documento Word Wide Web.

 

Os documentos HTML estao em formato texto padrao (conhecido como ASCII) e podem ser criados usando-se qualquer editor de texto (e.x.: Emacs ou VI , em maquinas UNIX). Dois browsers do Web; (o tkWWW para maquinas do Sistema X Window e o browser Web do CERN para computadores Ne XT), que incluem editores HTML rudimentares em ambiente WYSIWYG. Voce pode fazer uma primeira tentativa com estes editores antes de explorar os detalhes do HTML.

Vode pode ver de antemao um documento em desenvolvimento com Mosaic da NCSA (e alguns outros browsers do Web). Abre-se com o comando Open Local no menu File. Depois que voce editar o arquivo fonte HTML, grave as alteracoes. Retorne ao Mosaic de NCSA e rechame o documento. As mudancas sao vistas na tela.

Exemplo - 1:

<TITLE> Este e' um exemplo de um simples HTML</TITLE>
<H1>Este e' um cabecalho de nivel-1</H1>
Bem vindo ao mundo de HTML,
este e' um paragrafo. <P>
E este e' um outro paragrafo.

O HTML usa etiquetas de marcacao para dizer ao browser Web, como deve mostrar o texto no video (display).
No exemplo acima:
a etiqueta <TITLE>
especifica o inicio de titulo de documento
a etiqueta </TITLE>
especifica o fim de titulo de documento
a etiqueta <H1>
especifica o inicio de cabecalho nivel-1
a etiqueta </H1>
especifica o fim de cabecalho nivel-1
etiqueta <P>
marca fim de paragrafo de documento

Para visualisar o resultado da versão formatada, no exemplo acima.

As etiquetas HTML consistem dos sinais: menor que (<) seguido de algum texto, e para fechar o sinal matematico - maior que (> ). Sao chamados diretivas.

As etiquetas de marcacao, em geral, são pares: <H1> e </H1> .

O delimitador final de etiqueta e' quase igual ao seu inicio, exceto pela presenca de uma barra / antes do seu simbolo.

Assim, no exemplo acima, a etiqueta <H1>
diz ao browser Web (Teia) para comecar a escrever um cabecalho de primeiro nivel, ou nivel-1
e, a etiqueta </H1>
diz ao browser que o cabecalho acabou.

No entanto, uma primeira excessao `a regra e' a etiqueta<P> . Esta etiqueta dispensa o seu par </P> , para fim de paragrafo.

Nota de Instrução - 1:

• Voce só precisa criar, no computador da rede INTERNET, um arquivo (texto) identico ao exemplo, acima, e salvar com extensao .htm
  Por exemplo, teste.htm
  Em seguida, digite o comando: lynx teste.htm
  
• O computador que voce usar, deve conter a ferramenta lynx ou netscape ou mosaic ou outro browser Web.

A linguagem HTML e' muito flexivel: <title> e' equivalente a <TITLE> ou <TiTLe> .

Nem todas etiquetas sao suportadas por todos browsers Web. Se um determinado (browser) nao reconhece uma etiqueta, ele a desconsidera.

Cada documento HTML deve ter um titulo. Um titulo e' geralmente mostrado separadamente do documento e se usa principalmente para identificacao do documento em outros contextos. Uma pesquisa WAIS , seleciona cerca de meia dezena de palavras que definem um certo documento.

No Mosaic da NCSA, o campo Titulo de Documento esta' no topo da tela, logo abaixo da barra de menus.

A diretiva para a etiqueta titulo e' <TITLE>. O titulo geralmente aparece na primeira linha do documento.

O HTML tem seis niveis de cabecalhos, numerados de 1 a 6, sendo o 1 o mais destacado. Os cabecalhos podem ser mostrados em diferentes fontes e estilos (negrito, normal, etc.). O primeiro cabecalho de um documento deve ser etiquetado com <H1> . A sintaxe para etiqueta de cabecalho e':

<Hy> Texto do cabecalho</Hy>

onde y e' um numero entre 1 e 6 que especifica o nivel do cabecalho. Por exemplo, a codificacao para o item "Cabecalhos" acima, e':

<H3>Cabecalhos</H3>

Titulo versus primeiro cabecalho:

Em muitos documentos (inclusive este) o primeiro cabecalho e' identico ao titulo. Para documentos multi-partes, o texto de primeiro cabecalho deve dar ao leitor a ideia de que a informacao esta relacionada (e.x., um titulo de capitulo), contudo a etiqueta de titulo deve identificar o documento em seu contexto mais amplo (e.x., incluindo ambos; o titulo do livro e o nome do capitulo.

Diferentemente dos documentos da maioria dos processadores de texto, retorno de carro (carriage return ou Enter) em arquivos HTML nada significam. Troca de letras pode ocorrer em algum ponto de seu arquivo-fonte e varios espacos podem ser comprimidos em um unico espaco, exceto na etiqueta <TITLE>. Espacos que precedem uma etiqueta <P> ou <Hy> sao ignorados. Note-se que no exemplo mais simples, anteriormente apresentado, o primeiro paragrafo esta' codificado, da seguinte maneira:

    Bem Vindo ao HTML.
    Este e' o primeiro paragrafo.<P>

No arquivo fonte ha uma quebra de linha entre as frases. Um browser Web ignora esta quebra de linha e inicia um novo paragrafo so' quando encontra a etiqueta de marcacao de paragrafo.

Importante:

Voce deve separar paragrafos com <P>

O browser ignora quaisquer identacoes ou linhas em branco no texto fonte. O HTML se baseia somente nas etiquetas para instrucoes de codificacao de formato, e sem as etiquetas <P> o documento se transforma num grande paragrafo. A excessao e' o texto etiquetado como preformatado (preformatted), que sera explicado mais a frente. No exemplo que segue, de texto preformatado, as etiquetas sao as mesmas que no exemplo anterior, mas o resultado e' outro.

<TITLE>O mais simples exemplo de HTML</TITLE> <H1>Este
e' o nivel-1
de cabecalho</H1>Bem Vindo ao mundo de HTML. Este e'
um
paragrafo.<P> E este e'um outro.<P>

Atencao: Para se visualizar melhor a estrutura de um arquivo HTML, os cabecalhos devem estar separados e, em linhas diferentes, e os paragrafos devem vir no inicio de linhas em branco, e apos a etiqueta do paragrafo anterior.

O principal recurso de linguagem HTML vem de sua habilidade em interligar -linking- partes de textos (e tambem imagens) `a outros documentos. O browser coloca esses textos em video reverso, comumente em cores e/ou sublinhados para indicar que eles sao ligacoes hipertexto. Essa ligacoes sao chamadas (hyperlinks ou simplemente links ligacoes.

No Mosaic da NCSA, as ligacoes hypertexto estao em cores e sao assumidas por default. Mas e' possivel modifica-las no menu Opcoes.

Uma etiqueta HTML relacionada a hypertexto e' <A>, representada no Mosaic da NCSA, por uma ancora.
Para incluir uma ancora no seu documento:

1. Inicie uma ancora com a etiqueta <A (ha um espaco depois do A inicial de etiqueta.)
2. Especifique o documento que se deseja -linkar- com o parametro HREF="filename.htm", seguido pelo fechamento com >
3. Em seguida, entre o texto -ou palavra- que servira como ligacao hypertexto no documento corrente.
4. Entre com a etiqueta final de ancora </A>

Eis aqui, uma codificacao em HTML hypertexto:

  <A href="MaineStats.htm">Maine</A>

Esta entrada torna a palavra Maine uma ligacao hypertexto -hyperlink- ao documento MaineStats.htm.

O World Wide Web (Rede Mundial) usa o Recurso Uniforme para Localizacao (Uniform Resource Locators URL), para especificar o local de armazenamento fisico de arquivos, em outros servidores. Um URL utiliza o mesmo tipo de recurso usado para se ter acesso ao endereco de um servidor (como o gopher WAIS, por exemplo), e tambem, para localizar um arquivo. A sintaxe e':

scheme://host.domain[:port]
/path/filename

onde scheme e' um dos seguintes atributos:

file

um arquivo no seu sistema local, ou num servidor FTP anonimo.

http

um arquivo em um servidor World Wide Web.

gopher

um arquivo em um servidor Gopher.

WAIS

um arquivo em um servidor WAIS.

news

um grupo de discussao Usenet.

telnet

uma conexao a um servico Telnet

O numero de porta (:port) pode geralmente ser omitido numa ligacao URL.

Observacao: Para exemplificar melhor um URL, caso se queira incluir uma ligacao desta cartilha versao em ingles a um outro documento que esteja sendo montado, se usaria a sintaxe:

    <A
HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">
NCSA's HTML Primer</A>

Esta sintaxe de linguagem HTML (URL), incluida aqui, torna a frase: NCSA's HTML Primer uma hiperligacao -hyperlink- deste manual, `a versao inglesa. Isto vale para qualquer outro documento corrente, no qual o texto preformatado, acima, esteja declarado. Para mais informacoes sobre URLs, clique a palavra Addressing
Trata-se da seguinte referencia:

• Tipo de arquivo:
  • http (protocolo hipertexto)
• Servidor (maquina):
  • info.cern.ch
• Diretorio/subdiretorios:
  • /hypertext/WWW/Addressing
• Nome de arquivo:
  • Addressing.htm
• Hiperlink:
  • Addressing

Documento escrito pelo CERN, para informacoes adicionais sobre URLs.

A Beginner's Guide para URLs, localizado no Mosaic de NCSA, no menu Help.

Pode-se usar ancoras tambem para integrar uma seccao especifica num documento. Por exemplo, supondo-se que voce esta elaborando um documento, chamado de A. E, que voce pretende liga-lo a uma determinada secao de texto de um documento B, chamado documentB.htm. Entao, e' preciso dar um nome `a ancora para o arquivo-documento B, que pode ser "ChamandoDocB". E, a sintaxe seria:

<A NAME= "documentB">ChamandoDocB</A>

Quando voce cria ligacoes para secoes no documento A, deve incluir o nome de arquivo (filename), precedido pelo sinal jogo da velha (#) e, a palavra de ligacao - ancora para o documento B. A sintaxe e':

    Esta e' uma  <A  HREF="documentB.htm#documentB">ligacao</A>
para  o documento B.

Agora, se voce clicar sobre a palavra ligacao no documento A, faz com que apareca no monitor o texto contido no documento B, denominado "documentoB.htm".

Para este tipo de ligacao, a tecnica e' quase igual a anterior, apenas se omite o nome de arquivo (filename).

O que se viu ate aqui e' suficiente para elaborar um documento HTML simples. Para documentos HTML mais complexos, existem etiquetas para diferentes tipos de listas, de secoes preformatadas, quotas extendidas, caracteres de formatacao e outros recursos.

HTML suporta listas nao-numeradas, numeradas e descritivas (ou de descricao). Os itens da lista nao requerem nenhuma etiqueta de separacao de paragrafo. As etiquetas para os itens de lista, finalizam cada item da lista.

• Inicie com uma etiqueta de abertura de lista: <ul>
• Entre com a etiqueta de lista para um item individual: <li> Nao e' necessario fechar com : </li>
• Finalize a lista com a etiqueta de fechamento de lista nao numerada: </ul>

A seguir, um exemplo de lista nao-numerada, com dois itens:

  <UL>
  <LI> macas
  <LI> bananas
  </UL>

O resultado e':

• macas
• bananas

Note-se que diferentes viewers mostram uma lista nao-numerada de forma diferente. Uns usam ponteiros, pequenos circulos, asteriscos ou travessao para apontar os itens.

Uma lista numerada (tambem chamada lista ordenada) utiliza a etiqueta <ol> para iniciar a sequencia de itens da lista. Utiliza igualmente a etiqueta: <li> para iniciar os itens da lista. Para finalizar utiliza a etiqueta: </ol> Por exemplo:

  <OL>
  <LI>  laranjas
  <LI>  pessegos
  <LI>  uvas
  </OL>

O resultado e':

1. laranjas
2. pessegos
3. uvas

Uma lista de descricao usualmente consiste em alternar um descricao do titulo (abreviado como dt) e Um descricao descricao (abreviado como dd). A descricao geralmente inicia em uma nova linha, porque o viewer deixa toda linha para o conteudo da descricao do titulo dt

Segue um exemplo de linguagem HTML, de listas descritivas:

  <DL>
  <DT>
National Center for Supercomputing Applications
  <DD>
Se localiza no campus da Universidade de Illinois, em Urbana-Champaign. NCSA e' uma das
quatro instituicoes-membro, no Nacional Metacenter for Computational Science and Engineering.
  <DT>
 Cornell Theory Center
  <DD>
O CTC se localiza no campus da Cornell University, in Ithaca, New York. CTC e' outra instituicao-membro do 
Nacional Metacenter for Computational Science and Engineering.
</DL>

O resultado se parece com:

National Center for Supercomputing Applications

Se localiza no campus da Universidade de Illinois, em Urbana-Champaign. NCSA e' uma das quatro instituicoes-membro, no Nacional Metacenter for Computational Science and Engineering.

Cornell Theory Center

O CTC se localiza no campus da Cornell University, in Ithaca, New York. CTC e' outra instituicao-membro do Nacional Metacenter for Computational Science and Engineering.

As entradas com etiquetas <DT> and <DD> podem conter:

* multiplos paragrafos (separados por etiquetas de paragrafo),

* listas, ou

*outra informacao da descricao.

As listas podem ser aleatoriamente ordenadas. Um item da lista pode ele proprio conter listas. Pode ter tambem varios paragrafos, cada um deles conter listas ordenadas, em um unico item da lista, e assim sucessivamente.

E' bom lembrar que o display de uma lista nao-numerada, varia com o viewer. Certos browsers podem nao permitir niveis sucessivos de identacao, ou modificar as marcas usadas para cada nivel.

O Mosaic da NCSA faz identacao de segundo nivel na lista seguinte e troca o ponteiro de uma marca para uma pequena janela.

Um exemplo de listas ordenadas:

  <UL>
  <LI>Alguns Estados de New England:
    <UL>
    <LI>Vermont
    <LI>New Hampshire
    </UL>
  <li>Um Estado de Midwestern:
    <UL>
    <LI> Michigan
    </UL>
  </UL>

A lista ordenada se apresenta, assim:

• Alguns Estados de New England:
  • Vermont
  • New Hampshire
• Um Estado de Midwestern:
  • Michigan

Usa-se a etiqueta <PRE>(iniciais de PREformatted) para gerar texto com fontes de tamanho fixo, espacos em branco, nova linhas, e tabulacoes importantes. E' muito util para listagens de programas predefinidos. Por exemplo, as linhas seguintes estao neste arquivo-fonte:

<PRE>
  #!/bin/csh
  cd $SCR
  cfs get mysrc.f:mycfsdir/mysrc.f
  cfs get myinfile:mycfsdir/myinfile
  fc -02 -o mya.out mysrc.f
  mya.out
  cfs save myoutfile:mycfsdir/myoutfile
  rm *
</PRE>

Mostrado como:

  #!/bin/csh
  cd $SCR
  cfs get mysrc.f:mycfsdir/mysrc.f
  cfs get myinfile:mycfsdir/myinfile
  fc -02 -o mya.out mysrc.f
  mya.out
  cfs save myoutfile:mycfsdir/myoutfile
  rm *

Referencias Hipertexto (e outras etiquetas HTML) podem ser usadas dentro de secoes <pre>.

Usa-se as etiquetas <blockquote> e </blockquote> para incluir um bloco de notas, em destaque na tela.

Por exemplo:

  <blockquote>
  Let us not wallow in the valley of despair. I say to you,
my
friends, we have the difficulties of today and tomorrow.
<P>
I still have a dream. It is a dream deeply rooted in the American dream.
<P>
I have a dream that one day this nation will rise up and live out the true meaning of its 
creed. We hold these truths to be self-evident thar all men are created equal. <P>
  </blockquote>

O resultado e':

Let us not wallow in the valley of despair. I say to you, my friends, we have the difficulties of today and tomorrow.

I still have a dream. It is a dream deeply rooted in the American dream.

I have a dream that one day this nation will rise up and live out the true meaning of its creed. We hold these truths to be self-evident thar all men are created equal.

A etiqueta <ADDRESS> e usada geralmente dentro de um documento HTML para especificar o autor de um documento e, possibilitar contatos entre o autor e os consulentes do documento, por meio de seu "e-mail", por exemplo. Em geral, vem no ltimo paragrafo do arquivo-documento, e numa nova linha justificada `a esquerda

Por exemplo, a ultima parte deste arquivo HTML, na sua versao ingles, e':

  <ADDRESS>
  A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu
  </ADDRESS>

O resultado e':

Palavras sozinhas, ou frases podem ser codificadas com estilos especiais. Logical sao estilos configurados pelo proprio viewer do consulente. Por exemplo, <CITE> pode ser configurado como italico pelo viewer. Cada vez que se entrar com a etiqueta <CITE> o viewer automticamente mostra o texto em italico.

O estilo physical e' aquele que voce determina , e o viewer mostra de acordo com o que foi codificado. Por exemplo, <I> diz ao viewer para mostrar o texto em italico.

Para documentos HTML-codificados, deve-se usar estilos logicos, sempre que possivel.

• Italico
  • <I>texto=HTML</i> poe o texto em italico (HTML).
  • <em>texto=alguns</em>, tambem poe texto italico, (somente alguns viewers).
  • <cite>texto</cite> e' usado para citacoes de livros, manuais, nomes,secoes (Guia de Iniciacao ao HTML )
  • <var>texto</var> indica uma variavel (filename)
• Bold (Negrito)
  • <b>texto=Importante</b> poe texto em negrito (Importante)
  • <strong>texto=Notas:</strong> tambem destaca o texto (Notas:)
• conjunto de caracteres de tamanho fixo.
  • <tt>texto</tt> poe texto em um conjunto de caracteres de tamanho fixo. (1 SU = 1 CPU hour)
  • <code>texto</code> tambem poe texto em um conjunto de caracteres de tamanho fixo. (1 SU = 1 CPU hour)
  • <samp>texto</samp> e' um formato para mostras de textos, (-la)
  • <kbd>texto</kbd> mostra os nomes das teclas no teclado ( HELP)
• Outros (a etiqueta seguinte, frequentemente, nao e' vista no Mosaic da NCSA)
  • <dfn>texto</dfn> mostra uma definicao em italico

Título: Guia de Iniciacao ao HTML.
Tradução e Adaptação: José de Albuquerque Moreira
Data de Atualização: 22-09-95

Instituição de Trabalho:
Universidade de Brasília - UnB
Faculdade de Estudos Sociais Aplicados
Departamento de Ciências da Informação

E-mail:
moreira@guarany.cpd.unb.br
moreira@ipe.mat.unb.br
moreira@solids.iccmp.br

Endereço p/ Correspondência:
Caixa Postal 4301
70919-970 - Brasília-DF - BRASIL

Titulo Original: "A Beginner's Guide to HTML"/NCSA/pubs@ncsa.uiuc.edu.
Direitos Autorais de Tradução Reservados.

Comentários, sugestões e outras informações, e-mail para: moreira@guarany.cpd.unb.br

Esta pagina NAO E' DE MINHA AUTORIA