Exemplo HTML 2

 

 Tutorial HTML em Português

by Artur Ferreira

Em Construção


Neste Tutorial você vai encontrar tudo que precisa saber para fazer uma ótima homepage. Isto é, supondo que você tenha pelo menos uma boa noção de como funciona a Internet, principalmente "o" ou "a" WWW; e também tenha a noção básica do que é uma homepage e o que é um browser. E, claro, que você tenha acesso a WWW.


Índice

  1. O Que É...
  2. Iniciação a Documentos em HTML
  3. Quebras de Linha
  4. Cabeçalhos
  5. Formatações Especiais de Texto e Caracteres
  6. Sequências de Escape ou Caracteres Especiais
  7. Comandos Internos


1. O Que É...


WWW?
World Wide Web, ou apenas Web. Em português seria algo como "A Extensa Teia Mundial".
SGML?
Standard Generalized Markup Language - Linguagem de Formatação Generalizada Padrão. É o padrão para as linguagens de formatação.
DTD?
Document Type Definition - Definição de Tipo de Documento. é uma linguagem de formatação específica, escrita usando SGML.
HyTime?
Hypermedia/Time-based Document Structuring Language - Linguagem Estruturada de Documentos de Hipermídia ou Baseada em Tempo.
HTML?
Hypertext Markup Language - Linguagem de Formatação de Hipertexto. HTML é uma coleção de estilos (indicados por etiquetas de formatação) que definem os vários componentes de um documento WWW. HTML é um SGML DTD, é uma fusão dos padrões SGML e HyTime.
Browser?
Software que reconhece os estilos da linguagem HTML, formatando um documento HTML para ser exibido como um documento da Web.
URL?
Uniform Resource Locator - Localizador Uniforme de Recurso. É a localização (endereço) dos arquivos. Veja mais sobre URL na seção 2 deste tutorial, no tópico Endereços WWW (URLs).
HTTP?
Hipertext Transfer Protocol - Protocolo de Transferência de Hipertexto. É o recurso usado para transmitir um documento HTML dentro da WWW.
Tags?
Tags em português significa Etiquetas. São os comandos usados numa página HTML. Cada comando HTML é uma etiqueta ou tag.



2. Iniciação a Documentos em HTML


Introdução

Documentos HTML são em geral arquivos de texto, que podem ser feitos em um editor de texto qualquer ou em programas específicos para editar páginas HTML (HotDog, W3e, HTML Assistant, HotMetal, etc...). Alguns desses programas permitem que você edite o documento do mesmo modo que ele vai aparecer na tela -- movendo imagens, formatando textos, mudando cores, etc --, é o caso do Netscape Editor, que acompanha a versão Gold 2.0 do Netscape Navigator, mas a desvantagem desses editores é que os documentos produzidos neles podem conter etiquetas (tags) que não serão reconhecidas por alguns browsers.


Endereços WWW (URLs)

O endereço ou URL de uma página web tem basicamente o seguinte formato:

http://domínio_ou_servidor[:porta]/caminho/Nome_da_Página.Extensão

onde:

  • http:// tem que estar sempre presente, pois http determina o protocolo ou recurso que é usado para a transferência de páginas web;
  • domínio_ou_servidor é o host name ou nome do servidor WWW que contém a página que desejamos acessar;
  • porta é o número da porta de acesso ao servidor, este número é freqüentemente omitido;
  • caminho é o diretório onde se encontra a homepage dentro do servidor;
  • e finalmente Nome_da_Página.Extensão é o que diz: o nome da homepage, onde a extensão pode ser htm ou html;

Nota: alguns dos itens acima podem ser omitidos, como porta que é freqüentemente omitido; caminho pode ser omitido quando a homepage estiver no diretório "raiz" -- não o diretório raiz do computador (servidor), mas o diretório raiz de WWW -- do servidor; o nome do arquivo HTML pode ser omitido se esse arquivo for index.html.

Exemplos:

  • O endereço da homepage do Departamento de Ciência da Computação da UFAL, onde está localizado o servidor desta homepage é:
    http://www.dcc.ufal.br Mas o nome do arquivo HTML desta homepage é index.html.

  • O endereço da minha homepage é:
    http://www.dcc.ufal.br/~arfm Isto significa que a minha home page encontra-se no servidor www.dcc.ufal.br, no diretório ~arfm -- que na verdade é arfm/PublicHtml, por questões nas quais não iremos nos aprofundar --, e o nome do arquivo HTML da minha homepage é index.html.

  • O endereço do arquivo HTML deste tutorial é:
    http://www.dcc.ufal.br/~arfm/HtmlGuide/GuiaHtml.htm onde GuiaHtml.htm é o nome do arquivo, que se encontra no diretório ~arfm/HtmlGuide do servidor WWW www.dcc.ufal.br do DCC-UFAL.


Documento HTML Básico

Um documento em HTML deve ter a seguinte estrutura:

<HTML>
<Head>
<Title> Título da Página </Title>
{Comentários ou outros comandos pouco usados no momento}
</Head>
<Body>
.
.
.
Lista de Comandos (Etiquetas) de formatação
.
.
.
</Body>
</HTML>

Observações:

  1. As etiquetas HTML devem estar sempre dentro dos parênteses angulares < (sinal menor que) e > (sinal maior que).
  2. O campo de atuação das etiquetas (texto que vai ser formatado por elas, etc...) deve estar entre os comandos que indicam o início e o fim da atuação da etiqueta. O comando de in´cio é formado pelo nome da etiqueta entre os parênteses angulares (< e >) e o comando que indica o fim da etiqueta, o qual irei chamar no decorrer deste texto de comando de fechamento, é formado do mesmo modo que o de início, apenas acrescentando uma barra antes do nome da etiqueta.
    Exemplo:
    <Title>Comando de ínicio e Comando de fechamento</Title>
    No exemplo acima, a etiqueta Title vai atuar na frase Comando de ínicio e Comando de fechamento, dando a esta frase a condição de título da homepage.
  3. Algumas etiquetas não exigem comando de fechamento, tais como as etiquetas BR, P, Img, etc..., pois elas não vão atuar sobre um determinado objeto (texto, etc...) na tela.
  4. As etiquetas HTML não são sensíveis à caixa, isto é, tanto faz digitar o nome das etiquetas em letras maiúsculas ou minúsculas.
    Exemplo:
    <Html>, <HTML>, <html> e <hTmL> vão obter o mesmo resultado.
    As exceções para esta obsesvações são as sequências de escape ou de formatação de caracteres especiais, como letras acentuadas e outros.
  5. Se você está achando complicado entender esse monte de comandos (BR, P, Img, etc..) e outras palavras ou sentenças, tais como sequências de escape, não se apavore, você verá tudo mais detalhado no decorrer do texto.


Etiquetas Básicas

Como toda boa linguagem -- seja de programação, ou de formatação como o HTML --, o HTML também tem seus comandos Básicos que devem estar inseridos em toda página web. Apesar de alguns poderem ser omitidos (HTML, Head, Title), eles são essenciais para um entendimento melhor da estrutura da homepage. Eles são:

  •  
     
    HTML
    Serve para identificar ou diferenciar o documento dos demais, como um documento HTML, esta etiqueta deve estar na primeira e na última linhas do documento, nesta última com a barra (/) precedendo o nome HTML, para indicar o fim do documento.
  •  
     
    Head
    É a "cabeça" do documento. Esta etiqueta irá conter o título, e poderá conter informações e/ou comentários sobre o documento, estes não irão aparecer na tela com exceção do título.
  •  
     
    Title
    Esta etiqueta é, apesar de poder ser omitida, quase essencial, pois ela define o título do documento, e serve para identificar "de cara" de quem ou do que é ou do que se trata a homepage. O texto sobre o qual esta etiqueta vai atuar, vai geralmente aparecer no topo da janela do browser, ao lado do ícone e/ou do nome do browser. Esta etiqueta deve estar inserida dentro da etiqueta Head, como mostrado no exemplo do Documento Básico.
    O título de uma homepage deve conter poucas palavras, sem acentos ou caracteres extras -- pois podem não ser reconhecidos em alguns browsers --, e tem que ser sugestivo, ou seja, deve dar uma noção básica do que se trata a homepage.
  •  
     
    Body
    É o corpo de texto do documento. O que estiver dentro desta etiqueta é o que vai aparecer na sua homepage. É o que será mostrado na tela principal de seu browser. Esta etiqueta poderá conter diversas formatações de texto, imagens, cabeçalhos, listas, tabelas, links, etc.


Texto Normal

O texto normal é o texto padrão (default), o texto que vai aparecer sem nenhuma formatação especial (negrito, itálico, etc...) na tela, ou seja, será exibido com fonte e tamanho padrõs do browser que estiver lendo a homepage. Este texto e´ o que estiver dentro da etiqueta Body, sem ter nenhuma outra etiqueta atuando sobre ele. O HTML não vai reconhecer as quebras de linha que você usar no texto normal, ele o exibirá como um texto corrido, e o justificará de acordo com o tamanho da janela do seu browser (veja o exemplo a seguir). Mais adiante iremos ver como inserir quebras de linhas e parágrafos no seu texto.

     Veja um exemplo de uma homepage simples, 

     apenas com título e texto normal:
<HTML>



    <Head>

        <Title>Homepage Simples</Title>

    </Head>



    <Body>

        Exemplo de uma homepage simples, usando apenas

        texto normal.

	O HTML justifica o seu texto de acordo com o tamanho da 

	janela do seu browser.

    </Body>	



</HTML>

Que será exibida assim:


Exemplo de uma homepage simples, usando apenas texto normal. O HTML justifica o seu texto de acordo com o tamanho da janela do seu browser.

Com o título Homepage Simples no topo da janela do browser.
Clique aqui para ver esta homepage-exemplo no seu browser.

3. Quebras de Linha


Você notou no exemplo da seção anterior que, mesmo digitando o texto em linhas diferentes, o texto foi mostrado na mesma linha, mudando de linha apenas quando o texto não coube mais na tela. Isto significa que o HTML não é sensível às quebras de linha do seu editor (de texto ou de HTML). Para iserirmos uma quebra de linha em um texto HTML, temos três opções de etiquetas: P, BR e a etiqueta PRE, que é a etiqueta de texto preformatado, a qual iremos ver mais adiante na seção 5.
As etiquetas P e BR servem para mudar a linha do texto e para inserirem linhas em branco no texto. A diferença entre as duas é a seguinte:

BR
A etiqueta BR é usada quando queremos mudar para a linha logo abaixo, ou quando queremos inserir uma linha em branco no texto.
P
A etiqueta P é usada quando queremos mudar da linha atual para outra linha ou parágrafo e queremos deixar uma linha em branco entre eles, ou para inserirmos duas linhas em branco no texto.

Veja o exemplo:

<HTML>



    <Head>

        <Title>Exemplo de Quebras de Linhas</Title>

    </Head>



    <Body>

        Exemplo de uma homepage simples, usando apenas

        texto normal e quebras de linha.<br>

	Este e um paragrafo usando BR ...<p>

	E este e um paragrafo usando P.<br>

	<br>

	Acima temos uma linha em branco usando BR ...<br>

	<p>

	Acima temos uma linha em branco usando P.

    </Body>	



</HTML>

Que será exibida assim:


Exemplo de uma homepage simples, usando apenas texto normal e quebras de linha.
Este e um paragrafo usando BR ...

E este e um paragrafo usando P.

Acima temos uma linha em branco usando BR ...

Acima temos uma linha em branco usando P.

Nota: Como você pôde observar, as etiquetas P e BR não necessitam de comando de fechamento. O uso delas já constituem o ato de quebra de linhas, sem exigir um campo para atuar.


4. Cabeçalhos


Cabeçalhos são textos especialmente formatados em HTML, eles são usados geralmente como títulos de homepage e de seções de uma homepage. Os cabeçalhos são mostrados em negrito e com uma fonte mais larga do que o normal. Sua sintaxe é:

<Hx>Texto</Hx>

Com x variando de 1 a 6, indicando a variação do tamanho do cabeçalho, sendo H1 o maior deles.

Exemplo:

<H1>Tutorial HTML em Portugues</H1>

Este é o título que é exibido no início desta homepage, logo abaixo da figura.


5. Formatações Especiais de Texto e Caracteres


Aprenderemos agora a usar outros tipos de formatações para texto e caracteres. Todas as etiquetas apresentadas a seguir possuem comando de fechamento e devem ser usadas dentro do corpo de texto, ou seja, entre as etiquetas <Body> e </Body>.

Textos

  •  
     
    Pre
    É o texto preformatado. O texto sobre o qual esta etiqueta vai atuar, será exibido do mesmo modo com foi digitado, ou seja, serão levados em conta os espaços em branco e as quebras de linhas e parágrafos. A fonte usada neste tipo de texto, às vezes é diferente do texto normal.
    Exemplo: 
    <pre>Este texto vai ser exibido como foi escrito...
Com parágrafo...
       Espaços em branco...

E linha em branco.</pre>

    Que será exibido assim:

    Este texto vai ser exibido como foi escrito...
Com parágrafo...
       Espaços em branco...

E linha em branco.


  •  
     
    Blockquote
    É usada para inserir citações em um bloco separado na tela.
    Exemplo:
    <blockquote>Este é um exemplo de Blockquote.<br>
Esta etiqueta serve para citações em um bloco separado no
texto da tela. O texto que será exibido na sua homepage.</blockquote>

    Que será exibido assim:

    Este é um exemplo de Blockquote.
    Esta etiqueta serve para citações em um bloco separado no texto da tela. O texto que será exibido na sua homepage.


  •  
     
    Address
    É geralmente usada no fim do documento para indicar o autor da homepage e modo dwe contato (endereço, e-mail, homepage, telefone, etc...) com o autor. O texto no qual esta etiqueta atua é geralmente exibido em itálico.
    Exemplo:
    <address>by Artur Ferreira - DCC/UFAL<br>
arfm@dcc.ufal.br   -   http://www.dcc.ufal.br/~arfm</address>

    Que será exibido assim:

    by Artur Ferreira - DCC/UFAL
    arfm@dcc.ufal.br - http://www.dcc.ufal.br/~arfm


  •  
     
    Font
    Esta etiqueta permite que você adicione algumas propriedades ao texto normal. Tais propriedades são definidas dentro dos parênteses angulares (< e >) desta mesma etiqueta. Estas propriedades são: alinhamento (align), tamanho da fonte (size), cor da fonte (color). Você aprenderá mais sobre esta etiqueta e sobre estas propriedades na seção Comandos Internos.
    Exemplo:
    <font size=3 color="#8833BB">Exemplo de font 1</font> <br>
<font size=5 color="#CC22FF">Exemplo de font 2</font>

    Que será exibido assim:

    Exemplo de font 1
    Exemplo de font 2

  •  
     
    Center
    Esta etiqueta permite que você centralize um texto na página.
    Exemplo:
    <H4>Texto centralizado<H4>

    Que será exibido assim:

    Texto centralizado



Caracteres

Existem várias etiquetas de formatação especial de caracteres. Elas podem atuar em frases, palavras, ou até mesmo em um único caractere. Essas etiquetas estão divididas em dois tipos de estilos: os lógicos e os físicos.

Estilos Lógicos

  •  
     
    DFN
    Vem de definition. É usada para especificar uma sentença que está sendo ou vai ser definida. Geralmente mostrada em Itálico ou com uma fonte diferente da padrão.
    Exemplo: <DFN>Definition</DFN> significa definição.
    Resultado: Definition significa definição.
  •  
     
    Cite
    Usada para citações de títulos de livros, filmes e outras coisas. Geralmente mostrada em itálico.
    Exemplo: <Cite>Tutorial HTML em Português</Cite> é o título desta homepage.
    Resultado: Tutorial HTML em Português é o título desta homepage.
  •  
     
    Strong
    Como a tradução do próprio nome indica, é usada para dar uma aparência mais "forte" à sentença na qual ela vai atuar. Geralmente mostrada em negrito.
    Exemplo: Palavra <Strong>Forte</Strong>
    Resultado: Palavra Forte
  •  
     
    EM
    Vem da palavra emphasis (ênfase). É usada para dar ênfase à sentença na qual ela vai atuar. Geralmente mostrada em itálico.
    Exemplo: <EM>Ênfase</EM> na palavra
    Resultado: Ênfase na palavra
  •  
     
    Code
    É usada geralmente para exibir sentenças tais como partes de um código ou mensagens de computador, partes da fonte de um arquivo, por exemplo, comandos de um arquivo HTML como os exemplos desta seção, etc. Normalmente mostrada em uma fonte padrão de tamanho fixo, parecida com uma fonte padrão de um computador.
    Exemplo: <Code>Error: Can't read file.</Code>
    Resultado: Error: Can't read file.
  •  
     
    Samp
    É semelhante a Code, e pode ser usada para os mesmos fins.
    Exemplo: <Samp>Erro: arquivo danificado.</Samp>
    Resultado: Erro: arquivo danificado.
  •  
     
    Var
    É usada para especificar uma variável no documento. Geralmente mostrado em itálico com uma fonte diferente da padrão.
    Exemplo: H<Var>y</Var> determina um cabeçalho, onde <Var>y</Var> pode variar de 1 a 6.
    Resultado: Hy determina um cabeçalho, onde y pode variar de 1 a 6.
  •  
     
    Kbd
    Para indicar uma entrada via teclado a partir do usuário. Geralmente mostrada em itálico, ou com uma fonte semelhante a de code.
    Exemplo: <kbd>Senha</kbd> de acesso...
    Resultado: Senha de acesso...

Estilos Físicos

  •  
     
    B
    Exibe uma sentença em negrito.
    Exemplo: Sentença em <B>negrito</B>
    Resultado: Sentença em negrito
  •  
     
    I
    Exibe uma sentença em itálico.
    Exemplo: Sentença em <i>itálico</i>
    Resultado: Sentença em itálico
  •  
     
    TT
    Exibe uma sentença com uma fonte semelhante a de uma máquina de escrever.
    Exemplo: Sentença semelhante a uma <tt>máquina de datilografar</tt>
    Resultado: Sentença semelhante a uma máquina de datilografar


Nota: As etiquetas de texto devem ser usadas separadamente, sendo que as etiquetas de formatação de caracteres podem ser usadas dentro do campo de atuação de outras etiquetas. Por exemplo:

<blockquote>Exibição em <b>negrito</b>, <i>itálico e <strong>itálico forte</strong></i></blockquote>

Que será exibido assim:

Exibição em negrito, itálico e itálico forte



6. Sequências de Escape ou Caracteres Especiais


As sequências de escape são usadas para exibir caracteres acentuados, cedilha e outros caracteres que são usados nas etiquetas HTML, por isso necessitam de um código espacial; são eles: &, <, > e ".
As sequências de escape para esses caracteres são:

  • & -> &amp;
  • < -> &lt;
  • > -> &gt;
  • " -> &quot;

As Sequências de escape para acentuação de caracteres têm a seguinte sintaxe:

&Lcode

onde L é a letra que vai ser acentuada e code é o código do acento. Os acentos têm os seguintes códigos:

  • acute -> acento agudo (')
  • grave -> acento grave ou crase (`)
  • circ -> acento circunflexo (^)
  • tilde -> til (~)
  • uml -> trema (¨)
  • cedil -> cedilha

Principais sequências de escape usadas na Língua Portuguesa:

  • á -> &aacute;
  • à -> &agrave;
  • â -> &acirc;
  • ã -> &atilde;
  • é -> &eacute;
  • ê -> &ecirc;
  • í -> &iacute;
  • ó -> &oacute;
  • õ -> &otilde;
  • ô -> &ocirc;
  • ú -> &uacute;
  • ü -> &uuml;
  • ç -> &ccedil;

Notas:

  1. As sequências de escape são sensíveis à caixa, elas devem ser digitadas com letras minúsculas, usando letras maiúsculas quando quiser acentuar uma destas. Por exemplo:
    Á -> &Aacute;
    Õ -> &Otilde;
    Ç -> &Ccedil;
  2. O Padrão para caracteres especiais e acentuação gráfica em hipertexto pode ser encontrado no seu site próprio: Padrão ISO Latim 1 ou ISO 8859-1. Lá você encontrará, além desses caracteres aqui citados, vários outros caracteres úteis com seus respectivos códigos, tais como: §, ®, º, ª, etc.


  3. As sequências de escape também podem ser usadas com uma sintaxe diferente, que lembra a de definição de um caractere por código ASCII em linguagens de programação como C e Pascal. É seguinte:
    &#code
    Onde code é uma sentença de números que define o código do caractere. Exemplos:

    § » &#167;
    ® » &#174;
    º » &#186;
    ª » &#170;


7. Comandos Internos

Estou chamando esta seção de Comandos Internos mais por não achar um nome melhor para ela do que por ter realmente algo a ver com o seu conteúdo. Na verdade estou chamando estes comandos de internos porque eles não são etiquetas, mas fazem parte, ou seja, estão inseridos nelas. Entenderemos melhor com suas respectivas definições e exemplos.

  • align - este comando determina como será alinhado o texto de acordo com a página ou imagem. Este comando não funciona com a etiqueta font. O alinhamento na página será definido de três maneiras:
    • align=center - centraliza o texto na tela.
    • align=left - alinha o texto à esquerda; este é o padrão (default) e pode ser omitido.
    • align=right - alinha o texto à direita.

    Exemplos:

<H5 align=center>
<H5 align=right>
<H5 align=left>
  • color - este comando determina a cor da fonte do texto, ele deve ser usado com a etiqueta font. Se quiser mudar a cor de um campo de atuação de uma outra etiqueta que não seja a font, deve-se usar esta etiqueta dentro dos comandos de início e fechamento da etiqueta font.
  • size - este comando determina o tamanho da fonte de um texto com a etiqueta font. Se quiser mudar o tamanho de um campo de atuação de uma outra etiqueta que não seja a font -com exceção dos cabeçalhos-, deve-se usar esta etiqueta dentro dos comandos de início e fechamento da etiqueta font.
    Exemplos:

<font color="#FF0066">
<font size=4>
<font size=3 color="#009911">




Restante em construção...


Esta pagina e' de autoria completa de

Artur Ferreira. DCC-UFAL. Maceió-AL.

para contata-lo use os enderecos a seguir

por E-Mail arfm@dcc.ufal.br
Na home page http://www.dcc.ufal.br/~arfm

Esta página é mantida por Andres Segal qualquer dúvida basta entrar em contato comigo.