Tutorial HTML

Este é um brevetutorial sobre a linguagem HTML,
para você que quer criar home pages, mas não sabe o que elas comem :)

Introdução ao HTML

    O mundo começa ficar cada dia menor. A poucos anos atrás, quando falávamos em se comunicar com outro país, considerávamos um luxo, e não era para qualquer um. As dificuldades eram tantas que para se falar de uma capital pata outra, necessitávamos solicitar a uma telefonista para conectarmos nossa chamada.

    O mundo está pequeno. Hoje a globalização se torna uma realidade. Com uma simples ligação local, podemos nos conectar com o mundo. Através da Internet, a grande rede de computadores, isto tornou-se possível.

    Com a Internet surgiu muitos serviços facilitando a comunicação entre os seus usuários. Acessos a base de dados e a computadores remotos, correio eletrônico, transferência de arquivos e navegação na Word Wide Web (WWW).

    Para aqueles que navegam na Internet, estas coisas já fazem parte de sua vida. O propósito deste texto é ensinar aos internautas a linguagem HTML (Hyper Text Markup Language) para se criarem páginas web.

    O que é HTML? Trata-se de uma linguagem que possuem controles, marcas, imagens e escrita de textos que, ao serem lidos por um interpretador (browser), formam uma página de informação conhecida por Página Web.

    Atualmente existem diversos browsers. Os mais conhecidos são o Netscape e o Internet Explorer. Estes browsers estão evoluindo, permitindo cada dia mais recursos para as páginas Web's. Devido a este fato, torna-se importante identificar os recursos utilizados pelo HTML escrito para saber qual a versão do browser irá interpretar o que foi desenvolvido.

       1. Noções Básicas

    Quando escrevemos em HTML, colocamos algumas marcas indicando ações que o interpretador irá realizar. Estes controles
        são identificados através dos sinais < (menor que) para abrir o controle e > (maior que) para fechar. Para o HTML não existe
        diferença entre letra maiúscula e minúscula, ambos são aceitas.

        2. Criando sua primeira página

2.1. Exemplo de uma página

<html>
<head>
<title>Um exemplo simples</title>
</head>
<body>
<h1>Esta é a minha primeira página</h1>
Esta é a primeira página desenvolvida por mim. Este é o primeiro parágrafo.
<p>Este é o segundo parágrafo. Aqui podemos colocar palavras e, <b>negrito</b> ou então podemos colocar em <i>itálico</i>.<p>
<h2>Este é um título em segundo nível</h2>
Este é o final do exemplo<p>
</body>
</html>

2.2. Controles básicos

2.2.1. Título

Todo documento HTML deve ter um título. O título geralmente é utilizado para identificar o contexto do documento. Alguns browsers mostram o conteúdo do título no topo. Para identificar o título, utiliza-se <title>Título</title>

2.2.2. Cabeçalho

O HTML possui seis níveis de cabeçalhos, numerados de 1 a 6. O primeiro indica maior importância. Os cabeçalhos são mostrados de forma diferenciada do texto normal. A sintaxe deste controle é <Hn>Cabeçalho</Hn>, onde n é um número que especifica o nível do cabeçalho que vai de 1 a 6.

Não devemos confundir título com o primeiro cabeçalho. O título não aparece na página que estamos montando.

Exemplo:

<html>
<head>
<title>Um exemplo de cabeçalhos</title>
</head>
<body>
<h1>Cabeçalho 1.</h1>
<h2>Cabeçalho 2.</h2>
<h3>Cabeçalho 3.</h3>
<h4>Cabeçalho 4.</h4>
<h5>Cabeçalho 5.</h5>
<h6>Cabeçalho 6.</h6>
</body>
</html>

2.2.3. Parágrafo

O HTML, diferente dos editores de texto comuns não reconhecem os caracteres de quebra de páginas ou mudança de linha. Uma linha em branco em um texto HTML não é interpretada. Para iniciar um parágrafo, utiliza-se um controle <p>. Este controle não possui fechamento.

2.2.4. Quebra de linha

Muitas vezes queremos somente quebrar uma linha no texto do documento. Como o HTML não interpreta as quebras como editores de texto, torna-se necessário utilizar um controle, no caso o <br>.

2.2.5. Efeitos especiais e básicos

Muitas vezes queremos destacar palavras ou frases em nossos documentos. Para isso podemos utilizar alguns efeitos como negrito ou itálico. O controle para negrito é <b>texto</b> e para itálico é <i>texto</i>.

2.2.6. Caracteres de controle

Se em nosso documento for necessário escrever algum dos caracteres de controle, isto é, o sinal de maior que (>) ou de menor que (<) ou o símbolo (&), utilizamos um mecanismo de escape. Este caracteres poderiam ser representados colocando um & e seguido por códigos predeterminados

&lt - identifica <
&gt - identifica >
&amp - identifica &

Muitos outros caracteres poderão ser representados desta forma. Procure em livros de HTML, tabelas com estes caracteres.

Exemplo:

<html>
<head>
<title>Exemplo Simples</title>
<body>
<h1>Qualquer título</h1>
<b>Este é o primeiro parágrafo<p>
Este é o segundo parágrafo.<br>Caso eu queira somente quebrar a linha, eu utilizo o controle <i>&ltbr&gt</i>. <br>Observe que a linha foi quebrada onde existe o controle apropriado.</b><p>
<i>Observe também que, até o início deste texto foi utilizado o negrito<br>Já nesse, utilizando o itálico</i>
</body>
</html>

2.2.7 - Texto pré-formatado

Quando queremos mostrar um texto pré-formatado, como por exemplo, um relatório gerado por um computador ou mesmo uma poesia, utilizamos o controle <pre>texto formatado</pre>

Exemplo:

<html>
<head><title>Exemplo Simples</title></head>
<body>
<h1>Qualquer título</h1>
<pre>Seja bem vindo<br>Esta é um exemplo<br>Texto pré formatado<br>Por Cassiano R. S.</pre>
</body>
</html>

2.3 - Interligando documentos.

2.3.1 - Ligando outro documento

O HTML tem se destacado como uma linguagem poderosa, pela habilidade que possui de interligar-se com outros documentos. O controle utilizado é <a>, conhecido como "âncora". Para incluir uma âncora em nosso documento devemos seguir os seguintes passos:

a) iniciar a âncora com <a;
b) especificar o documento que será apontado com o parâmetro HREF="nome do arquivo" seguido pelo fechamento > (sinal de maior que);
c) coloque o texto que servirá de indicação do ligamento ao outro documento;
d) colocar o final da âncora</a>

2.3.2 - Ligando serviços

O controle âncora serve também para interligar outras páginas Web's ou outros serviços da Internet. Para utilizar este recurso basta definir a âncora e, no lugar do arquivo, colocar a URL (Uniform Resource Locators) especificando a localização do servidor que prestará o serviço. A sintaxe fica assim:

<a href="xxxx://servidor/caminho/nome_do_arquivo">Texto a ser ancorado</a>

onde xxxx será:

http - (para um arquivo em outro servidor www)
WAIS - (para um arquivo em outro servidor WAIS)
gopher - (para um arquivo em outro servidor Gopher)
file - (para um arquivo no sistema local ou servidor FTP)
news - (para um Usenet newsgroup)
telnet - (para uma conexão telnet)

2.3.3 - Ligando em lugares específicos do documento

Através da âncora também é possível fazer uma ligação em um lugar específico de um documento. Para fazer isso, cria-se uma âncora normalmente, sendo que após a indicação do nome do arquivo, coloca-se o sinal # seguido de uma palavra. Faz-se outra âncora no documento referenciado, no lugar desejado da seguinte forma:

<a name="palavra">Qualquer coisa</a>

2.4. Criando Listas

Algumas vezes, quando esta desenvolvendo seu documento HTML, você deseja criar uma espécie de lista de informação, ou dividir o texto em seções e itens. Para fazer isto, existem controles que permitiram criar listas numeradas ou não numeradas.

2.4.1 - Lista não numerada

Para fazer uma lista não numerada, utiliza-se do controle <ul> para inicial, <li> para indicar cada item, não é necessário terminar o item com </li> e termina a lista utilizando </ul>/ Na especificação dos itens, pode-se utilizar os controles de quebra <br>, parágrafos <p> e outros.

Exemplo:

<ul>
<li>Primeiro Item
<li>Segundo Item
<li>Terceiro Item
</ul>

2.4.2 - Lista numerada

Para se fazer uma lista numerada, semelhante a lista não numerada, utiliza-se do controle <ol> para iniciar, <li> para colocar um item e </ol> para finalizar.

2.4.3 - Listas de definição

Quando queremos fazer em nosso documento uma lista de termo com suas descrição, utilizamos <dl> para indicar o início da lista, <dt> para indicar o termo e <dd> para descrição, termina a lista com </dl>

2.5 - Inserindo Imagens

Um dos grandes recursos que o HTML permite é a possibilidade de utilizar imagens. As imagens devem ser, preferencialmente nos formatos '.gif' ou '.jpg'. Para incluir uma figura em um documento, utiliza-se a notação:

<img src="caminho/arquivo">

2.5.1 - Alinhando imagens

As imagens podem ser alinhadas com relação à página (Left e Right) e em relação ao texto (Bottom, Middle, Top). Para isso utiliza-se:

<img align="bottom" src="caminho/arquivo.gif">

2.5.2 - Imagens com link

Uma imagem pode, em conjunto com uma âncora, servir como uma chamada de ligação. Para este caso, utiliza-se:

<a href="./doc1.html"><img src="imagem.jpg"></a>

2.6. - Como criar frames

Muitas homepages que existem na web, dividem a tela em duas ou mais vezes e em cada uma se carrega uma página diferente. Isto se chama frame e é muito simples de se fazer. Para isso, você precisará de no mínimo 3 arquivos htmls, um de início e os dois (ou mais) que irão carregar nas divisões criadas pelo frame. No html de inicio (o mostado abaixo), não se utiliza os tags <body> e </body>

Exemplo do HTML inicial.

<html>
<head><title>Testando</title></head>
<frameset ROWS=50,*>
<frame name="menu" src="menu.htm">
<frame name="corpo" src="corpo.htm">
</frameset>
</html>

Isto fará com que a tela seja dividida em duas partes, em uma parte será carregada o arquivo menu.htm e na outra o aquivo corpo.htm.

Caso deseje dividir a tela na horizontal, utilize o parâmetro ROWS, caso deseje dividir na vertical, utilize o parâmetro COLS.