[Tutorial]Aprendendo HTML básico

(Desabilite a função de HTML do post/mensagem)

Fonte:

Spoiler:

HTML não é muito difícil de se aprender, como algumas pessoas acham. Qualquer um pode aprender a construir um website.

Aqui apresentarei as informações básicas pra se construir um website a partir do zero e isso não requer nenhum conhecimento de programação avançado.

Assim como qualquer matéria, você precisa se empenhar, treinar e aprender as lições passadas no tópico. Sugiro que estude somente duas ou três lições por dia e pratique bastante tudo o que você aprendeu em cada lição. De preferência, separe/crie uma pasta apropriada apenas pra guardar os documentos html das aulas.

Construir um website é bem divertido! Então, mãos no teclado!



Tudo o que precisa, você já tem em sua disposição no seu PC.

Você está usando um deles, neste exato momento. Ele é o seu navegador/browser. Navegador é um programa que permite visualizar e navegar por páginas na Internet. Não importa qual navegador você utiliza. O mais comum é o Microsoft Internet Explorer, aka IE. Mais existem muitos outros, tais como, Google Chrome, Opera e Mozilla Firefox. A escolha de usar determinado navegador varia de pessoa a pessoa.

(Eu ainda não largo do meu IE8)

Se você já usou algum programa como Microsoft FrontPage, Macromedia Dreamweaver ou Microsoft Word, saiba que eles podem criar websites. No entanto, não vai poder usar nenhum destes programas, porque eles não serão muito úteis na hora de fazer a codificação do seu website.

Pra começar, use o mais simples dos editores de textos. Se você tem instalado o Windows, poderá usar o Notepad, que normalmente pode ser encontrado no menu Programs e Accessories (Programas » Acessórios):

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Se você não tem o Windows, use um editor de texto similar. Por exemplo, Pico (Linux) ou Simple Text (Mac).

O Notepad é um editor de texto básico e simples, mas excelente para codificação, já que ele não interfere no que você está digitando. Com ele o controle é todo seu. O problema em usar programas que criam o website para você, é de que eles vêm com uma série de funções pré-instaladas para você escolher. Tudo deverá ser projetado para se encaixar nestas funções padrão. Assim, muitas vezes não é possível criar exatamente aquilo que você planejou. Ou, os programas inserem modificações no código que você cria. Usando o Notepad ou qualquer editor de textos simples você é o único responsável pelo acertos e pelos erros do seu código.

Um navegador e o Notepad (ou editor similar) é tudo o que você precisa para acompanhar este tutorial e construir seu website.



Você não precisa estar conectado à Internet - para ler ou para construir seus websites.

Se você quiser, desconete-se enquanto lê este tutorial, você poderá imprimir ou simplesmente desconectar-se da Internet enquanto lê o conteúdo da tela. Você pode construir seu website no HD do seu PC e fazer o upload depois.



O HTML foi inventado em 1990 por um cientista chamado Tim Berners-Lee. A finalidade inicial era o acesso e a troca de informações e de documentação de pesquisas, entre cientistas de diferentes universidades. Ao inventar o HTML, ele lançou as fundações da Internet, tal como a conhecemos atualmente.

HTML é uma linguagem que possibilita apresentar informações (documentação de pesquisas científicas) na Internet. Aquilo que você vê quando abre uma página na Internet é a interpretação que seu navegador faz do HTML. Para visualizar o código HTML de uma página use o menu "View" (Ver) no topo do seu navegador e escolha a opção "Source" (Código fonte).

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Para quem não conhece, o código HTML pode parecer complicado, mas lendo o tutorial, você poderá entender melhor como ela funciona.

Se você quer construir websites, terá que conhecer HTML. Mesmo que você use um programa para criar seu website tal como o Dreamweaver, um conhecimento básico de HTML será necessário para tornar as coisas mais simples e para criar um website de melhor qualidade. A boa notícia é que HTML é fácil de aprender e de usar. A partir das duas próximas lições você já terá aprendido como construir seu primeiro website.



HTML é a abreviatura de "HyperText Mark-up Language" - e isto é tudo o que você precisa saber, por enquanto. Contudo, vamos detalhar isto.

• Hyper: É o oposto de linear. Os programas de computadores de antigamente, rodavam linearmente: quando o programa executava uma ação tinha que esperar a próxima linha de comando para executar a próxima ação e assim por diante de linha em linha. Com HTML as coisas são diferentes - você pode ir de onde estiver para onde quiser. Ou seja, não é necessário que você tenha visitado o site X antes de visitar o Fórum ou site Y.
  
• Text: É texto e não há mais nada a acresentar.
  
• Mark-up: Significa marcação e é o texto que você escreve. Você cria a marcação da mesma forma que escreve em um editor seus cabeçalhos, marcadores, negrito, etc.
  
• Language: Significa linguagem e é exatamente o que HTML é, uma linguagem. A linguagem HTML usa muitas palavras do inglês.
  

Neste tutorial você aprenderá XHTML (Extensible HyperText Mark-up Language) que é a forma mais estruturada de escrever HTML.

Agora que você já sabe o que é HTML (e XHTML) vamos começar as aplicações.



Você já está em condições de aprender a chave do HTML: as tags.

Tags são comandos usados para informar ao navegador como deve ser apresentado as informações, imagem ou texto.

Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">".

Genéricamente falando, existem dois tipos de tags - tags de abertura <comando> e tags de fechamento </comando>. A diferença entre elas é que na tag de fechamento existe um barra "/".

Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag.

Mas, como toda regra tem sua exceção, no HTML existem algumas tags onde a abertura e o fechamento se dá na mesma tag. Tais tags contém comandos que não necessitam de um conteúdo para serem processados, isto é, são tags de comandos isolados, por exemplo, um pulo de linha é conseguido com a tag <br>.

HTML é tag - e nada mais do que tags. Aprender HTML é aprender como usar as diferentes tags.

Exemplos de tags:

1. Usando-se a tag <b></b> informa ao navegador que todo o texto colocado entre <b> e </b> deve ser mostrado em negrito. O "b" deste comando, é uma abreviação de "bold", que do inglês significa negrito.

Código:

<b>Este texto estará em negrito.</b>

e fica assim:
Este texto estará em negrito.

2. As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que trata-se de um cabeçalho ("h" vem de heading, cabeçalho em inglês), sendo <h1> o cabeçalho de primeiro nível e aquele apresentado com o maior tamanho de texto, <h2> o cabeçalho de segundo nível e aquele apresentado com tamanho de texto um pouco menor e <h6> o cabeçalho de sexto nível e aquele apresentado com o menor tamanho de texto.

Exemplo 2:

Código:

<h1>Este é um título</h1>
<h2>Este é um sub-título</h2>

Este será o resultado obtido:

<h1>Este é um título</h1>
<h2>Este é um sub-título</h2>


A maioria dos navegadores é indiferente se você usa maiúscula, minúscula ou mesmo uma mistura delas, porque elas normalmente tem o mesmo efeito. Porém, a maneira correta é usar sempre as letras minúsculas. Então, crie o hábito de escrever suas tags com minúsculas.

Resumindo a Lição...

HTML são documentos escritos com tags. Estes documentos, por sua vez, compõem um Webpage. Todas as informações e sites que você encontra na Web, são as representações de diferentes documentos HTML.



Depois das lições teóricas, você está pronto pra criar o seu primeiro website a partir do zero.

Na lição 1 vimos o que é necessário para construir um website: um navegador e o Notepad (ou um editor de texto similar).
Como você está lendo este tutorial do fórum agora, provavelmente está com seu navegador aberto. Abra outra janela do seu navegador, pra que você tenha duas janelas na tela, uma para ler este tutorial e outra para visualizar o website que você vai construir.

Abra também o Notepad ( Iniciar » Programas » Acessórios):

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]



Pra criar um website, você precisa de uma estrutura básica. Neste exemplo você vai ter uma página com este título: "WEE! Esta é a minha primeira página web!".

HTML é simples e lógico. O navegador lê HTML de modo idêntico ao que você lê um texto qualquer, de cima para baixo e da esquerda para a direita.

A primeira coisa a fazer é dizer ao navegador que você vai "falar" com ele na linguagem HTML. Isto é feito com a tag <html>. Então, antes de mais nada digite <html> na primeira linha do documento, no Notepad.

Como sabemos das lições anteriores, <html> é uma tag de abertura e deve ser fechada com a tag de fechamento quando você acabar de digitar seu documento HTML. Para termos certeza que não iremos esquecer de fechar a tag HTML, faça isso agora mesmo, digitando </html> localizada a algumas linhas abaixo, assim você irá escrever seu documento entre as tags digitadas <html> e </html>.

A próxima coisa que o documento precisa é um head (cabeça), que fornece informações sobre o documento e um body (corpo), que abriga o conteúdo do documento. Como HTML não seria nada se não fosse lógico, a cabeça (<head> e </head>) fica em cima do corpo (<body> e </body>).

Seu documento agora está como mostrado abaixo:

Código:

<html>
  <head>
  </head>
  <body>
  </body>
</html>

Note como está estruturado o código em linhas diferentes (usar a tecla Enter para pular para próxima linha) e também a indentação (recuos) do código (usar a tecla Tab para indentar). A príncipio não faz qualquer diferença a maneira como você estrutura (linhas e recuos na digitação) seu documento HTML. Mas um código bem estruturado é mais fácil de ler e entender, sugerimos que formule uma estrutura clara e nítida para seu HTML, usando linhas e indentação (recuos), como mostrado no exemplo acima.

Se o seu documento está como o mostrado acima, você construiu sua primeira página web. Isto que você fez será um template base para seus futuros documentos HTML.

Até aqui, já conseguimos estruturar a página. Agora, falta colocar o conteúdo no seu website. O documento HTML é composto de duas partes: um head e um body. Na seção "head" você escreve informações sobre a página e na seção "body" você coloca as informações que constituem a página.

Por exemplo, para dar um título ao documento (este que aparece no topo da barra do navegador), você deverá usar a seção head. A tag para acresentar um título é <title>:

Código:

<title>Minha primeira página web</title>

Note que o título não aparece na página propriamente dita. Tudo o que você quer que apareça na página é conteúdo e deverá ser colocado entre as tags body.

Conforme combinamos, queremos uma página dizendo: "WEE! Esta é a minha primeira página da web!". Este é o texto que queremos comunicar e ele deverá ser colocado na seção body. Então digite na seção body o seguinte:

Código:

<p>Hurrah! Esta é a minha primeira página web.</p>

(A letra p na tag <p> é a abreviatura para paragraph (parágrafo) que é exatamente o que o texto é - um texto parágrafo.)

Seu documento HTML agora está como mostrado a seguir:

Código:

<html>
  <head>
  <title>Minha primeira página web</title>
  </head>
  <body>
  <p>WEE! Esta é a minha primeira página web.</p>
  </body>
</html>

Pronto! Você acaba de construir seu primeiro website!

Agora basta que você salve seu trabalho no HD e depois visualize no navegador:

1. No Notepad vá ao menu "Arquivo" no topo da janela e escolha a opção "Salvar como...".
   
2. Escolha "Todos os arquivos" no box "Salvar como tipo". Isto é muito importante - caso você não faça isto, o arquivo será salvo como texto e não como documento HTML.
   
3. Salve seu documento com o nome "page1.htm" (a extensão ".htm" indica que se trata de um documento HTML. A extensão ".html" dá o mesmo resultado. Eu sempre uso ".htm", mas você pode escolher a que você preferir .htm ou .html). Você pode salvar o documento onde você quiser no seu HD - esteja certo de salvar em um lugar que depois você possa achar com facilidade.
   
   [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
   
   Agora vá ao seu navegador:
   
   
4. No menu existente no topo do navegador vá em "Arquivo" e escolha a opção "Abrir".
   
5. Clique em "Procurar" no box que aparece.
   
6. Localize o seu documento HTML e clique em "Abrir".

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Você deverá ver no seu navegador: "WEE! Esta é a minha primeira página web!". Meus parabéns!

Se você quer que o mundo todo veja sua página, vá direto para a Lição e aprenda como fazer upload da sua página para a Internet. Senão, tenha paciência e continue lendo. A brincadeira apenas começou.



Comece sempre com o template básico que construímos na lição anterior:

Código:

<html>
  <head>
  <title>Título da sua página</title>
  </head>
  <body>
  </body>
</html>

Coloque sempre o título do seu documento na seção head: <title>Título da sua página</title>. Ver na figura abaixo como o título aparece no topo superior esquerdo do navegador:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

O título é muito importante porque é usado pelos mecanismos de busca (tais como o Google) para indexar seu website como mostrado a seguir para o site CSS para Web Design:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Na seção body você escreve o conteúdo da sua página. Você já viu alguns exemplos de tags:

Código:

<p>É usado para parágrafos.</p>
<b>Torna o texto negrito.</b>
<h1>Cabeçalho</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>

Lembre-se, pra aprender HTML, você deve treinar. Não se preocupe, você não vai destruir seu computador e nem a Internet. Faça seus experimentos e testes - esta é a melhor maneira de ganhar experiência.

Crie algumas páginas. Por exemplo, construa uma página com um título, um cabeçalho, algum texto, um subtítulo e mais algum texto. Não há nada contra fazer uma consulta no tutorial para construir as páginas, ou seja, a "cola" é permitida. Porém, mais a frente, tente criar sem consultar - "cola" não permitida.



Agora, vamos rever o que você conseguiu fazer na última lição:

Código:

<html>
  <head>
  <title>Meu website</title>
  </head>
  <body>
  <h1>Um cabeçalho</h1>
  <p>texto, texto texto, texto</p>

  <h2>Subtítulo</h2>
  <p>texto, texto texto, texto</p>
  </body>
</html>

Pra dificultar um pouco mais a tarefa, vamos aprender mais oito tags nesta lição.

Pra obter o itálico - letras inclinadas, "i" deriva da palavra italic. - use a tag <i>.
Exemplo 1:

Código:

<i>Este texto deve ser itálico.</i>

Pra fazer o seu texto ficar com letras pequenas use a tag <small>:
Exemplo 2:

Código:

<small>Este texto deve ser com letras em tamanho small.</small>

Como foi citado anteriormente, existem tags que são abertas e fechadas em uma única tag. Estas tags são comandos isolados. Ou seja, não contém nenhum texto dentro delas para poder funcionar. Um exemplo é a tag <br /> que serve para criar uma quebra de linha:
Exemplo 3:

Código:

Um texto<br /> e mais texto em nova linha

Note que a tag é escrita como se fosse uma mistura de tag de abertura e de fechamento com uma barra "/" no final: <br />. A princípio, pode-se obter o mesmo efeito escrevendo <br></br> (sem conteúdo), mas não tem necessidade pra se fazer isso...

Outra tag de comando é <hr /> que serve para definir uma linha horizontal (hr vem de horizontal rule - régua horizontal ):
Exemplo 4:

Código:

<hr />

Esta tag se chama tag de lista desordenada:
Uma lista desordenada tem marcadores e começa com a tag <ul> (abreviação de unordered list). A tag <li> (abreviação de List Item, ou item da lista) é usada antes de cada item da lista. A tag de fechamento </ul> encerra a lista.
Exemplo 5:

Código:

<ul>
  <li>Um item de lista</li>
  <li>Outro item de lista</li>
</ul>

Esta tag se chama tag de lista ordenada:
Uma lista ordenada é uma lista de itens em uma ordem lógica numérica. Use as tags <ol> (abreviação de ordered list) e </ol> para começar e terminar este tipo de lista. A tag <li> também é usada na frente de cada item.
Exemplo 6:

Código:

<ol>
  <li>Primeiro item da lista</li>
  <li>Segundo item da lista</li>
</ol>

Esta tag faz uma pequena indentação no texto selecionado.
Exemplo 7:

Código:

<blockquote>Texto com uma pequena indentação.</blockquote>


A tag <u>, dará um efeito de sublinhado no texto. É bom pra destacar algo no texto.
Exemplo 8:

Código:

<u>Texto sublinhado.</u>

Reunindo várias tags

Se quiser, você poderá usar quantas tags desejar, se aninhar elas de forma conveniente. Veja neste exemplo:

Exemplo 8: Para escrever um texto em negrito e itálico faça como mostrado a seguir:

Código:

<b><i>Texto em negrito e itálico.</i></b>

E não assim:

Código:

<b><i>Texto em negrito e itálico.</b></i>

Observe, que no primeiro exemplo, a primeira tag de abertura <b> corresponde a última tag de fechamento </b>, e o aninhamento está certo. Isto evita confusão para quem escreve o código e para o navegador que lê o código.

Por enquanto, terminamos aqui. Incentivo a fazer seus próprios experimentos, construindo algumas páginas com estas sete tags:

Código:

<i>Itálico</i>
<u>Sublinhado.</u>
<small>Texto tamanho small</small>
<br /> Pula linha
<hr /> Linha Horizontal
<blockquote>Texto com Indentação</blockquote>
<ul>Lista</ul>
<ol>Lista ordenada</ol>
<li>Item de lista</li>

Lição 7: Inserindo Atributos

As tags são comandos para o navegador. Em algumas tags, você pode adicionar instruções adicionais de comando. Isto acontece graças aos atributos.
Exemplo 1:

Código:

<h2 style="background-color:#ff0000">Eu amo HTML S2</h2>

Os atributos são escritos dentro da tag, seguidos por um sinal de igual e (entre aspas) as informações do atributo.

Existem vários atributos, o primeiro que você aprenderá é o atributo style. Com o atributo style você pode adicionar estilização e layout ao seu website. Uma cor de fundo, per example:
Exemplo 2:

Código:

<html>
  <head>
  <title>Página vermelha</title>
  </head>
  <body style="background-color:#ff0000">
  </body>
</html>

O código acima renderiza uma página com um fundo de cor vermelha. Experimente construir esta página.

Pra mandarmos a informação sobre a cor que desejamos nós podemos usar um código que represente a cor vermelha. Este código é pertecente ao sistema dos números hexadecimais (HEX).
Cada cor é representada por um número hexadecimal. Veja os exemplos abaixo:
Branco: #ffffff
Preto: #000000
Vermelho: #ff0000
Azul: #0000ff
Verde: #00ff00
Amarelo: #ffff00

Aqui tem uma referência de uma carta com as 216 cores mais usadas na web.

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Para algumas cores, você também pode usar o nome das cores em inglês (white, black, red, blue, green e yellow - branco, preto, vermelho, azul, verde, amarelo).
Exemplo 3:

Código:

<body style="background-color: red;">

Em um outro tópico (de minha autoria), tem mais explicações sobre as cores.

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] (Leia também, todo o contexto dentro do quote deste tópico)



Repare que algumas tags e atributos usam termos do Inglês dos EUA. É muito importante que você use os termos corretamente - se você mudar uma letra que seja, o navegador não irá entender seu código. É importante também, que você não se esqueça de fechar as aspas nas informações do atributo.

Os atributos são aplicáveis em grande parte das tags. Você normalmente usará atributos com mais freqüência em algumas tags (tais como a tag body) e raramente usará em outras (como a tag br que é um comando para pular de linha e não precisa de nenhuma informação adicional).
Existem uma diversidade grande de atributos. Alguns deles são empregados em tags específicas enquanto outros são praticamente universais. E o contrário também é válido: algumas tags podem conter apenas um determinado tipo de atributo, enquanto outras podem conter vários tipos de atributos.

Embora seja um pouco complicado, você vai acabar entendendo a funcionalidade de cada atributo e das diversas formas de sua aplicação.

Constituições das Tags

Assim, uma tag poderá ser constituida de um elemento (o "p" da tag <p>), ou por um elemento e um ou mais atributos associados a este elemento (por exemplo, <p style="background-color:#ff0000;">).

Lição 8: Links

Na lição anterior, você aprendeu que os tipos de informações contidas nos comandos se chamam elementos ("p" em <p>) e atributos dos elementos ("style" em: <p style="background-color:#ff0000;">). Desta vez, vamos ensinar a construir links entre páginas.

Para construir um link você precisa de uma tag.
Com ela você pode vincular outras páginas na web, documentos dentro do seu PC ou então, num servidor de rede. A seguir um exemplo de link para o site HTML.net:

Exemplo 1:

Código:

<a href="http://www.html.net/">Aqui um link para HTML.net</a>

O elemento "a" refere-se a "anchor" - âncora . O atributo "href" é abreviação para "hypertext reference" (referência a hypertexto) e especifica o destino do link - que normalmente é um endereço na Internet ou um arquivo.

No exemplo acima o atributo href tem o valor "http://www.html.net", que é o endereço completo do site HTML.net e é chamado de URL (Uniform Resource Locator). Notar que "http://" deve sempre ser incluido nas URLs. A frase "Aqui um link para HTML.net" é o texto mostrado no navegador como um link. Lembre-se de fechar a tag com um </a>.

Se você quer construir links entre páginas de um mesmo website você não precisa escrever o endereço completo de cada página (URL). Por exemplo, se você tem duas páginas (vamos chamá-las de pagina1.htm e pagina2.htm) e salvou as duas em um mesmo diretório, você constrói um link de uma para a outra usando somente o nome do arquivo no link. Nestas condições, um link da página1.htm para a pagina2.htm é como mostrado abaixo:

Exemplo 2:

Código:

<a href="page2.htm">Aqui um link para a pagina 2</a>

Se a pagina2 for colocada em um subdiretório (chamado de "subdiretorio", sem o acento agudo), o link será assim:

Exemplo 3:

Código:

<a href="subdiretorio/pagina2.htm">Aqui um link para a pagina 2</a>

Por outro lado, se deseja colocar um link da pagina2 no "subdiretorio" para a pagina1, faça assim:

Exemplo 4:
<a href="../pagina1.htm">Aqui um link para a pagina 1</a>

Este "../" vai informar que o arquivo está na pasta um nível acima da pasta "subdiretorio". Seguindo o mesmo princípio, você pode apontar para dois (ou mais) níveis acima, escrevendo "../../".

Você também poderá usar sempre o endereço completo do arquivo (URL).

Criando Links Dentro da Mesma Página

Você pode criar links internos, dentro da própria página. Existem duas formas de se fazer isso:

1º) Se for usar um link pra direcionar numa tabela ou índice com links específica. Você precisa usar o atributo "id" e o símbolo "#" (cerquilha).

Use o atributo "id" para marcar o elemento que é o destino do link. Por exemplo:

Código:

<h1 id="heading1">Cabeçalho 1</h1>

Você agora pode criar um link que direcione pro elemento, usando o símbolo "#" no atributo do link. O símbolo "#" informa ao navegador para ficar na mesma página que está.
O símbolo "#" deve ser seguido pelo valor atribuído a "id" para onde o link irá. Por exemplo:

<a href="#heading1">Link para o cabeçalho 1</a>

2º) Se você for usar um link pra direcionar uma palavra importante no texto, você usará o atributo "name" pra destacar uma parte do texto. Veja a seguir:

Código:

<a name="palavra">WINNER!</a>

Agora vamos criar o link pra que a página se direcione até onde está a palavra em destaque:

Código:

<a href="#palavra">Clique aqui!</a>

Exemplo 5:

Código:

<html>
  <head>
  <title>Testes com links</title>
  </head>
  <body>
  <p><a href="http://www.html.net/">Aqui um link para HTML.net</a><br />
  <a href="TUH_PAGE1.htm">Aqui um link para a página 1</a><br />
  <a href="#lista1">Redirect link para Lista de frutas</a><br />
  <a href="#abacaxi">Redirect link para o item Abacaxi</a><br />
  <a href="#heading2">Redirect link pro Cabeçalho 2</a></p>

    <h1 id="lista1">Lista de Frutas</h1>
    <p>
<ul>
  <li>Uva;
  <li>Pêra;
  <li>Maçã;
  <li>Kiwi;
  <li>Banana;
  <li>Laranja;
  <li><a name="abacaxi">Abacaxi.</a>
</ul></p>

    <h1 id="heading2">Cabeçalho 2</h1>
   <p>Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto<br />
   Texto texto texto texto</p>
  </body>
</html>

Nota: O nome de um atributo "id"/"name" deve começar sempre com uma letra.

Criando um Link pro Endereço de E-mail

Você também pode criar link para inserir um endereço de e-mail. O método é semelhante ao dos links para as páginas dentro dos diretórios.

Exemplo 6:

Código:

<a href="mailto:nobody@html.net">Enviar e-mail para nobody em HTML.net</a>

Coomo deu pra perceber, ao invés do endereço do diretório, você escreve "mailto:", seguido pelo endereço de e-mail desejado. Quando o link é clicado o programa de e-mail padrão do usuário é aberto com o endereço do link já digitado na linha para destinatário. Mas, atenção, isto só irá funcionar se o usuário tiver um programa de e-mail instalado. Faça uma experiência com este tipo de link clicando no exemplo acima.

Atributos Extras

Para criar links você sempre usa o atributo href. Agora, adicionaremos um title (título) para seu link:

Exemplo 7:

Código:

<a href="http://www.html.net/" title="Visite HTML.net e aprenda HTML">HTML.net</a>

Este "title" é usado para fornecer uma breve descrição do link. Basta deixar o curso sobre o link, pra que o texto "Visite o site HTML.net e aprenda HTML" apareça na webpage.

---

PS: Logo, logo, trarei a segunda parte.

Divirtam-se! Esta é a segunda e última parte do tuto de HTML básico.

---

Lição 9: Imagens

Você deve dizer pro navegador que quer inserir uma imagem (img) e depois informa onde a imagem esta localizada (src, abreviatura para "source" - local de armazenagem).

Pra isso, se usa esta tag: <img src="tim.jpg">.

Você verá a página assim:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Repare que esta tag é um comando isolado, isto é, uma só tag de abertuta e fechamento. Semelhante a tag <br /> ("br"= break), que não precisa de um texto inserido nela. O "tim.jpg" é o nome do arquivo da imagem que você vai inserir na página. O ".jpg" é a extensão do tipo de imagem. Tal como a extensão ".htm" para arquivos de documentos HTML, ".jpg" informa ao navegador que o arquivo é uma imagem.
Existem três tipos de imagens que você pode inserir na sua página:

1. GIF (Graphics Interchange Format)
2. JPG / JPEG (Joint Photographic Experts Group)
3. PNG (Portable Network Graphics)

Em geral, as imagens GIF são melhores para gráficos e desenhos e imagens JPEG são melhores para fotografia. Existem duas razões para isto: primeiro, imagens GIF são constituidas por 256 cores, e imagens JPEG por milhões de cores; segundo, imagens GIF são melhores otimizadas para imagens simples ao passo que imagens JPEG são melhores otimizadas para imagens complexas. Quanto melhor a compressão tanto menor o tamanho do arquivo e tanto mais rápido a página é carregada no navegador. Provavelmente você sabe que páginas "pesadas" são frustantes para o usuário.

Os formatos GIF e JPEG tem sido os mais empregados, mas ultimamente, o formato PNG tem se tornado cada vez mais popular (notadamente em detrimento do formato GIF). O formato PNG é melhor que os outros dois formatos: milhões de cores e efetiva compressão.



A criação de websites é ligada ao uso criativo de imagens. Para que você possa criar suas próprias imagens, você precisa de um programa de edição de imagens. Esta ferramenta é essencial, pra atrair a atenção dos visitantes.

Infelizmente, nenhum editor de imagem vem instalado junto com o Windows ou qualquer outro sistema operacional. Você deve adquirir o Paint Shop Pro, PhotoShop ou Macromedia Fireworks, que são excelentes sugestões. Contudo, não há necessidade de comprar um programa caro para acompanhar este tutorial. Por enquanto, você poderá fazer o download do Irfan View que é freeware, isto é, não custa nada.
Ou você pode fazer download de imagens existentes na web. Mas, se seguir esta opção, tome cuidado para não violar os direitos autorais de terceiros.
Agora, ensinarei a fazer downloads de uma imagem dentro da Internet:

1. Clique com o botão direito do mouse na imagem da Internet.
2. No menu que aparece escolha a opção "Salvar imagem como...".
3. Na janela que se abre, escolha o lugar no seu computador para salvar e clique "Salvar".

Faça este teste com a imagem abaixo e salve no seu computador no mesmo local onde está localizado seus outros documentos HTML. O arquivo foi salvo no formato PNG: logo.png:

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Agora, transfira a imagem até a pasta onde você guarda as suas páginas de HTML.
Ex:

Código:

<img src="logo.png" />

Tente criar uma webpage e faça esta tag. Ela fará a imagem aparecer na sua página!

Além de inserir as imagens dentro da própria pasta da sua página, você poderá colocar as imagens que ficam guardadas em outros diretórios ou até mesmo em outros websites:

Exemplo 2:

Código:

<img src="images/logo.png">

Exemplo 3:

Código:

<img src="http://www.html.net/logo.png">

As imagens também poderão ter links incorporados nelas. Veja este exemplo:

Exemplo 4:

Código:

<a href="http://www.html.net">
<img src="logo.png"></a>

Atributos Extras

Você sempre usará o atributo "src", pra mandar pro navegador a localização da imagem. Alguns outros atributos são bem úteis ao inserir imagens em sua página.

O atributo "alt" é usado para fornecer uma descrição textual da imagem:

Exemplo 5:
<img src="logo.gif" alt="logotipo do HTML.net">
<img src="tim.jpg" alt="Tim Berners-Lee">

Alguns navegadores mostram uma caixa pop-up com o conteúdo do atributo "alt" quando o usuário passa o mouse sobre a imagem. O atributo "title" terá os mesmos efeitos:

Exemplo 6:
<img src="logo.gif" title="Aprenda HTML no site HTML.net">

Deixe o ponteiro sobre a imagem, (sem clicar) e então, aparecerá uma caixa pop-up com o texto "Aprenda HTML no site HTML.net".


Você também poderá usar os atributos "width" e "height": <img src="logo.png" width="141" height="32">.

Os atributos "width" e "height" são usados pra definir respectivamente, a largura e a altura. O valor adotado para estas medidas é o pixel.
Pixel, por sua vez, é a unidade de medida de resolução da tela. (As resoluções de tela mais usadas são de 800x600 e 1024x768 pixels).

O pixel é uma unidade relativa que depende da resolução da tela. Usuários com grande resolução de tela terão 25 pixels em 1 centímetro de tela enquanto aqueles com baixa resolução de tela terão os mesmos 25 pixels em 1,5 cm de tela.

Se não forem definidos os valores para "width" e "height", a imagem será inserida com seu tamanho real.

Exemplo 8:
<img src="logo.gif" width="32" height="32">

Você não vai poder diminuir o tempo de descarga da imagem, por mais que você diminua o tamanho da imagem com o uso destes atributos.
Se você precisa diminuir o "peso" da imagem use um editor de imagens para torná-las mais leves e mais rápidas.

É sempre bom definir os atributos "width" e "height" para suas imagens, pois permite ao navegador, saber com antecedência como será o layout da página.



Tabelas são usadas para apresentar "dados tabulares" , isto é, informação que deva ser apresentada em linhas e colunas.
Criar tabelas em HTML pode parecer complicado, mas se você prestar mais atenção, você verá como tudo segue uma lógica.

Exemplo 1:

Código:

<table>
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>


Este é um código HTML um pouco mais complexo do que os demais. Vamos analisá-lo e explicar as suas diferentes tags:

Numa tabela, apresentamos 3 tags básicas

<table> Ela começa e termina uma tabela.
<tr> significa "table row" - linha de tabela - começa e termina e uma linha horizontal da tabela.
<td> significa "table data" - dados da tabela. Ela começa e termina cada célula contida nas linhas da tabela.

Dissertando: a tabela do exemplo 1 começa com <table>, segue-se uma <tr>, que indica o início de uma nova linha. Duas células são inseridas na linha: <td>Célula 1</td> e <td>Célula 2</td>.
A linha termina com </tr> e uma nova linha <tr> começa imediatamente a seguir. Esta linha também contém duas células. A tabela termina com </table>.

Para esclarecer: linhas são horizontais e colunas são verticais, ambas contendo células:

Célula 1	Célula 2
Célula 3	Célula 4

As células 1 e 2 formam uma linha. Já as células 1 e 3 formam uma coluna.

No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um número ilimitado de linhas e colunas.

Exemplo 2:

Código:

<table>
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
  <tr>
    <td>Célula 5</td>
    <td>Célula 6</td>
    <td>Célula 7</td>
    <td>Célula 8</td>
  </tr>
  <tr>
    <td>Célula 9</td>
    <td>Célula 10</td>
    <td>Célula 11</td>
    <td>Célula 12</td>
  </tr>
</table>

Será renderizado no navegador assim:

Célula 1	Célula 2	Célula 3	Célula 4
Célula 5	Célula 6	Célula 7	Célula 8
Célula 9	Célula 10	Célula 11	Célula 12

O atributo "border" é usado para definir a espessura de uma borda em volta da tabela:

Exemplo 3:

Código:

<table border="1">
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>

Será renderizado no navegador assim:

Célula 1	Célula 2
Célula 3	Célula 4

A espessura da borda é especificada em pixels.

Lembra-se do atributo "width" (largura), da última lição? Ela poderá ser usada tanto na forma de pontos em pixel como em percentagem da tela:

Exemplo 4:

Código:

<table border="1" width="30%">
<table border="1" width="275">

Nos exemplos acima, temos uma tabela renderizada com largura igual a 30% da largura da tela e a segunda com 275 pixels. Experimente usar cada uma na sua página.

Usando os atributos "align" e "valign", você definirá o alinamento do conteúdo da tabela.

• align: define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma célula. Por exemplo, left, center ou right (à esquerda, no centro ou à direita).
  
• valign: define o alinhamento vertical do conteúdo de uma célula. Por exemplo, top, middle ou bottom (em cima, no meio ou em baixo).

Exemplo 5:

Código:

<td align="right" valign="top">Célula 1</td>

Você pode inserir qualquer coisa em uma tabela: texto, links e imagens... MAS, lembre-se de que as tabelas devem apresentar dados tabulares (isto é, dados que devem ser apresentados em linhas e colunas).
Nos primórdios da Internet, as tabelas eram usadas como ferramenta para construir layout. Se você quer controlar a apresentação de textos e imagens, existe uma maneira bem mais racional (o CSS).

Agora, coloque em prática o que aprendemos aqui e crie várias tabelas de diferentes tamanhos, usando diferentes atributos e conteúdos. Isto irá ocupar você por horas.



Como dá pra desconfiar, você terá de trabalhar com tabelas de novo... Pode ser difícil aprender a usá-las, mas depois de se especializar nelas, nada do que verá em HTML vai lhe assustar.



Os atributos "colspan" e "rowspan" são usados para criar tabelas únicas.

"Colspan" é a abreviação para "column span". O "Colspan" é usada na tag <td> para indicar quantas colunas estarão contidas em uma célula.

Exemplo 1:

Código:

<table border="1">
  <tr>
    <td colspan="3">Célula 1</td>
  </tr>
  <tr>
    <td>Célula 2</td>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>

Definindo colspan em "3", a célula na primeira linha conterá três colunas.

Exemplo 2:

Código:

<table border="1">
  <tr>
    <td colspan="2">Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
    <td>Célula 5</td>
  </tr>
</table>

O "rowspan" especifica quantas linhas estarão contidas em uma célula:

Exemplo 3:

Código:

<table border="1">
  <tr>
    <td rowspan="3">Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
  </tr>
  <tr>
    <td>Célula 4</td>
  </tr>
</table>

No exemplo acima rowspan é definido em "3" na Célula 1. Isto especifica que uma célula deve conter 3 linhas.

É fácil se perder numa tabela deste tipo. Uma dica é desenhar a tabela numa folha de papel, antes de começar a codificação HTML.

Vá em frente e crie algumas tabelas com uso de "colspan" e "rowspan".



Nesta lição, vou explicar como se cria frames em suas páginas da web. Antes de mais nada, separe uma pasta apenas com seus documentos de htm.

Os frames (quadros) são relativamente usadas na web. Há pessoas que gostam de usar frames e há outras que abominam o uso delas, pois acham que estragam o layout da home-page.

Os frames têm praticamente o mesmo procedimento da confecção de um arquivo de htm simples, apenas trocando o elemento <body> pela <frameset>.

Pra se obter uma home-page com frames, deveremos ter três arquivos de htm, uma com o código do <frameset> e outras duas paginas simples de htm.
Aqui, segue-se um exemplo de como fazer uma página com o <frameset>:
Exemplo 1:

Código:

<html>
  <head>
  <title>Exemplo de Frames com colunas</title>
  </head>
  <frameset cols="20%, 80%">
  <frame src="FRAME1.htm">
  <frame src="FRAME2.htm">
  </frameset>
</html>

No exemplo acima, inserimos o atributo "cols" dentro do elemento <frameset>. Com este atributo, dividiremos a tela do navegador em duas partes, uma com 20% e a outra com 80% da resolução de tela.
Já na linha <frame src="FRAME1.htm">, dá pra notar que o uso do atributo
"src" (source), chama a páginas que ocupará as colunas do frame acima.


Tente também, usar uma página da Internet que já exista e coloque-a no arquivo com frames.
Exemplo 2:

Código:

<html>
  <head>
  <title>Exemplo de Frames com colunas</title>
  </head>
  <frameset cols="20%, 80%">
  <frame src="FRAME1.htm">
  <frame src="http://www.moogle.finalfantasy.com.br">
  </frameset>
</html>

Você verá que pode criar um frame com páginas dentro do seu diretório, como páginas que estão na Internet.
(Lembre-se de que as páginas da Internet requerem que você esteja conectado, já as páginas dentro do seu diretório, não)


Agora que você já tem uma página com frames, faça um teste. Crie uma página com frames e então, crie mais outras duas páginas (ou use as que você já tem aí guardado na pasta). Relembrando que, ao usar o "frame src", você deve colocar o nome correto das suas páginas, ou você não conseguirá chamar as páginas dentro do arquivo com os frames.
Exemplo 3:

Código:

<frame src="nomedapágina.htm">

Além de poder dividir o navegador em colunas com o atributo "cols", você poderá dividir em linhas, com o uso do atributo "rows" ou usar ambos os atributos.
Exemplo 4:

Código:

<html>
  <head>
  <title>Exemplo de Frame com linhas</title>
  </head>
  <frameset rows="50%, 50%">
  <frame src="FRAME1.htm">
  <frame src="FRAME2.htm">
  </frameset>
</html>

Exemplo 5:

Código:

<html>
  <head>
  <title>Exemplo de Frame com 2 linhas e 2 colunas</title>
  </head>
  <frameset rows="50%, 50%" cols="50%, 50%">
  <frame src="TUH_PAGE3.htm">
  <frame src="TUH_PAGE3.htm">
  <frame src="TUH_PAGE3.htm">
  <frame src="TUH_PAGE3.htm">
  </frameset>
</html>

Nesta lição, dei alguns exemplos do uso de frames, assim como os atributos "src", "cols" e "rows". Nada de tão complicado de se aprender. Mas, ainda existem outros atributos pras frames, então se quiser, procure e leia mais sobre frames e faça seus testes. Na próxima lição, você será apresentado à uma das tags mais usadas pra se construir websites, as CSS.



Já que você se familiarizou com diversos elementos e atributos, já está na hora de conhecer um pouco sobre o CSS.

CSS provém do termo Cascading Style Sheets (CSS) - Folhas de Estilo em Cascata. Com ela você poderá dar mais um charme no layout da sua página.

Com o uso do CSS e do HTML, você dará um novo aspecto do site. Enquanto o HTML cuida do trabalho bruto (conteúdo) o CSS dará um toque de elegância.

Como foi revelado algumas lições atrás, o CSS é adicionado com o uso do atributo "style". Por exemplo, você poderá definir o tipo e o tamanho da fonte em um parágrafo:

Exemplo 1:

Código:

<p style="font-size:20px;">Este parágrafo em tamanho de fonte igual a 20px</p>
<p style="font-family:courier;">Este parágrafo em fonte Courier</p>
<p style="font-size:20px; font-family:courier">Este parágrafo em fonte Courier e tamanho 20px</p>

No exemplo acima, usamos o atributo "style" para definir o tipo de fonte usado (com a propriedade font-family) e o tamanho da fonte (com a propriedade font-size).
Repare que, no último parágrafo do exemplo, definimos tanto o tipo como o tamanho da fonte separados por um ponto e vírgula (;).

Uma das funcionalidades mais inteligentes das CSS é a de controlar o layout de um arquivo central. Em vez de usar o atributo "style" em cada tag, você poderá informar como deve ser o layout de todos os textos em uma página:

Exemplo 2:

Código:

<html>
  <head>
  <title>Minha primeira página CSS</title>   

  <style type="text/css">
     h1 {font-size: 30px; font-family: arial}
     h2 {font-size: 15px; font-family: courier}
     p {font-size: 8px; font-family: times new roman}
  </style>
  </head>
  <body>
  <h1>Minha primeira página CSS</h1>
  <h2>Bem vindo à minha primeira página CSS</h2>
  <p>Aqui você verá como funciona CSS</p>
  </body>
</html>

Ver exemplo

No exemplo acima, inserimos as CSS na seção head do documento, assim ela se aplica à página inteira. Para fazer isto use a tag <style type="text/css">, que informa ao navegador que você está digitando CSS.

No exemplo, todos os cabeçalhos da página serão em fonte Arial e tamanho 30px. Todos os subtítulos serão em fonte Courier tamanho 15. E, todos os textos dos parágrafos serão em fonte Times New Roman tamanho 8.

Uma outra alternativa é de digitar as CSS em um documento separado. Com as CSS separada em um documento, você pode gerenciar o layout de muitas páginas ao mesmo tempo. Dessa forma, você pode mudar de uma só vez, o tipo ou o tamanho da fonte de todo o site, quer ele tenha centenas ou milhares de páginas. Não vou aprofundar muito esta lição, mas já da pra se ter uma boa base.


Além de definir tipos e tamanhos de fontes, as CSS podem adicionar cores e fundos. Aqui temos alguns exemplos:

Código:

<p style="color:green;">Texto verde</p>

<h1 style="background-color: blue;">Cabeçalho com fundo azul</h1>

<body style="background-image: url('http://www.html.net/logo.png');">

Insira estes códigos em algumas das suas páginas - experimente as duas formas de inserir, tanto como mostrado acima como colocando as CSS na seção "head" do documento.


As CSS podem ser usadas pra controlar a configuração e a apresentação da página (margens, flutuações, alinhamentos, larguras, alturas, etc.). Controlando os diferentes elementos com CSS você será capaz de criar layouts elegantes e precisos.

Exemplo 3:

Código:

<p style="padding:25px;border:1px solid red;">Eu amo CSS</p>

Com a propriedade "float", um elemento poderá "flutuar" à esquerda ou à direita. O exemplo seguinte ilustra este princípio:

Exemplo 4:

Código:

<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
   sed diam nonummy nibh euismod tincidunt ut laoreet dolore
   magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
   quis nostrud exerci tation ullamcorper suscipit
   lobortis nisl ut aliquip ex ea commodo consequat...</p>

Neste exemplo, a imagem flutua à esquerda e o outro elemento (o texto) preenche o espaço à direita da imagem.

Com a propriedade "position", você pode posicionar um elemento em qualquer lugar da página, com precisão:

Exemplo 5:

Código:

<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />

Ver exemplo

Neste outro exemplo, a imagem foi posicionada a 50 pixels da borda inferior e a 10 pixels da borda direita do navegador. Você pode colocar o elemento em qualquer lugar na página. Experimente.

Aprender CSS só exige um pouco mais de esforço e tempo. Aqui dei apenas uma apresentação pequena das CSS.

Enquanto isso, concentre-se no HTML, e passe para a próxima lição onde você aprenderá a publicar seu website na Internet para que o mundo todo o veja!



Até agora, só você conseguiu visualizar suas páginas. Agora é a hora de divulgar. Para publicar seu trabalho na Internet, você precisa de espaço em um servidor e um programa FTP gratuito.

Se você costuma acessar a Internet, provavelmente já encontrou vários serviços gratuitos de hospedagem de sites. Seu endereço será algo parecido com "http://home.servidor.com/~nomedousuario". Você têm que ativar o serviço. Informe-se como fazer isto na documentação fornecida pelo serviço de hospedagem.

Outra opção é obter um espaço gratuito de um servidor na Internet. Isto é semelhante a criar uma conta de e-mail, você pode registrar-se gratuitamente para obter um espaço num servidor. Existem várias companhias que oferecem este serviço gratuito - entre elas a Angelfire (clique em "Sign Up" e escolha membro gratuito - ou faça uma busca no Google para encontrar um serviço gratuito com registro em português).

Para acessar o servidor você precisa conhecer o "Nome do seu servidor" (Por exemplo, [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] e ter um nome de usuário e senha.

Para acessar e publicar as páginas neste servidor, você precisa de um programa FTP . Este não é um programa que vêm instalado em seu PC,
mas pode-se arrumar um pra download. Existem vários programas FTP, um dos melhores é o FileZilla, e é gratuito. Pra obter o FileZilla vá pra: filezilla.sourceforge.net/ .



Aqui, temos um exemplo de como fazer upload usando o servidor Angelfire e o programa FileZilla. Este procedimento é similar a qualquer outro programa FTP .

Conecte-se à Internet e abra o programa FTP . Insira "Host Name" ("[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] no "Address"), nome do usuário (em "User") e senha (em "Password"), clique "Connect". Você terá acesso ao servidor.
Em um lado da janela do programa você verá os diretórios e arquivos do seu computador ("Local Site"), e no outro o do servidor ("Remote Site"):

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Ache os seus documentos HTML e imagens a serem publicadas (no "Local site") e transfira para o servidor ("Remote site") simplesmente dando um clique duplo nos arquivos. Agora, qualquer pessoa poderá ver o seu site!

Dê a uma das páginas o nome de "index.htm" (ou "index.html") e ela será a página de entrada no site.

Você poderá pensar em comprar um domínio (espaço no servidor) só para você ([Tens de ter uma conta e sessão iniciada para poderes visualizar este link] e assim ter uma webpage mais curta e fácil de guardar que os fornecidos por um serviço gratuito da Internet. Na Internet existem muitas empresas que vendem domínios. Faça uma busca do Google.



Nesta lição você aprenderá mais alguns conceitos teóricos do HTML.

O HTML pode ser escrito de várias maneiras. O navegador está apto a ler HTML escrito de várias formas. Pode-se considerar que o HTML têm muitos dialetos. Esta é a razão do porquê que alguns websites são apresentados de formas diversas em diferentes navegadores.

Desde o aparecimento da Internet tem sido feitas várias tentativas para se normatizar o HTML notadamente através do World Wide Web Consortium (W3C) fundado por Tim Berners-Lee.

Atualmente, as normas HTML estão na sua versão 4.01 e no XHTML. Então, quando você codifica HTML de acordo com as normas do W3C, você está construindo um website para ser visualizado em todos os navegadores. E felizmente, tudo o que você aprendeu neste tutorial, está de acordo com a mais nova versão do HTML, que é o XHTML.

Devido a existência de diferentes tipos de HTML, você precisa informar ao navegador qual é o "dialeto" do HTML que você está falando (e no seu caso você aprendeu XHTML). Para informar ao navegador, você usa o Document Type Definition. O Document Type Definition deve ser escrito sempre no topo do documento:

Exemplo 1:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">

<head>
<title>Título</title>
</head>

<body>
<p>texto texto</p>
</body>

</html>

Além do Document Type Definition (escrito na primeira linha no exemplo acima), que informa ao navegador que você está codificando XHTML, você precisa ainda adicionar informação extra na tag html, usando os atributos "xmlns" e "lang".

O "xmlns" é abreviação de "XML-Name-Space" e deve ter sempre o valor [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] . Isto é tudo o que você precisa saber. Se você tem o hábito ou gosta de se aprofundar e conhecer coisas complicadas poderá ler mais sobre namespaces no site do W3C.

No atributo "lang", você específica em que língua (aqui trata-se de linguagem humana) o documento é escrito. As abreviaturas para as línguas existentes no mundo todo, estão nas ISO 639 Standard. No exemplo acima, a língua definida no atributo é o português do Brasil ("pt-br").

Uma DTD informará ao navegador como deve ser lido e renderizado o HTML. Use o exemplo mostrado, como um template para todos os seus futuros documentos HTML. O DTD é importante também para a validação da página.



Insira o DTD nas suas páginas e poderá verificar erros no seu HTML, usando o [url=validator.w3.org]validador gratuito do W3C[/url].

Para testar o validador faça o seguinte: crie uma página e publique na Internet. A seguir entre em validator.w3.org e lá digite o endereço (a URL) da sua página, depois clique no botão validar. Se seu HTML estiver correcto, vai aparecer uma mensagem de congratulações. Se não estiver, será apresentada uma lista de erros informando o que está errado e onde. Cometa alguns erros propositais no seu código para verificar o que acontece.

O validador não é útil somente no encontro de erros. Alguns navegadores tentam interpretar os erros cometidos e consertar o código, mostrando a página correctamente. Já outros, não aceitam o erro e apresentam a página arruinada ou nem a apresentam. O validador ajuda você a encontrar os erros que você não tenha percebido à primeira vista.

Sempre valide suas páginas, para ter certeza que elas serão mostradas corretamente em todos os navegadores.



Esta é a última lição. Você aprendeu muita coisa e já poderá construir o seu website. No entanto, aqui é ensinado o básico do HTML e ainda há muito o que se aprender. Continue a estudar e se aprofundar no assunto.

Aqui temos umas dicas úteis:

Para começar, aconselhamos a escrever seus documentos HTML de forma ordenada e estruturada. Assim fazendo você estará não só mostrando aos outros que possui uma base sólida de conhecimento, mas também estará facilitando a leitura, interpretação e manutenção do código.

Siga as normas e valide seu código. Mas, não faça disto uma fonte de stress. Escreva um XHTML claro, use o DTD e valide suas páginas no validator.w3c.org.
Coloque conteúdos nas suas páginas. Lembre-se que HTML é apenas a ferramenta que possibilita apresentar informação na Internet, assim é necessário que haja a informação a ser apresentada ou seja, o conteúdo. Páginas lindas e bem desenhadas são ótimas, mas as pessoas buscam informação na Internet.

Evite encher suas páginas com imagens pesadas e outros enfeitos que você encontra na Internet. Isto faz com que suas páginas demorem a carregar e é frustante para o usuário. Páginas que demoram mais de 20 segundos para carregar podem perder até 50% dos seus visitantes.

Lembre-se de cadastrar seu site nos sites de busca, de modo a que outras pessoas, além da sua família, possam encontrá-las e visitá-las. Na página de entrada dos sites para cadastro em mecanismos de busca você encontrará um link para adicionar seu site (O mais importante é o Google mas, existem outros tais como, DMOZ, Yahoo, AltaVista, AlltheWeb e Lycos).

Neste tutorial você aprendeu a usar o Notepad, que é um simples e fácil editor de textos, porém você pode pensar em usar um editor mais sofisticado com mais possibilidades e ferramentas. Você encontra uma listagem e sumário de diferentes editores em Download.com.



Antes de mais nada, é importante que você continue a trabalhar e experimentar o que aprendeu neste tutorial. Quando encontrar algum site que contenha uma coisa que você ache interessante, estude o código do site. No seu navegador vá ao menu "View" - "Ver" e escolha "Source" - "Código Fonte" para ver o código do site.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Procure ler artigos e tutoriais HTML. Existem muitos sites com ótimos conteúdos sobre HTML.

Leia e faça perguntas em listas de discussão e fóruns na Internet. Um ótimo lugar é o fórum XHTML do iMasters onde você sempre encontra alguém disposto a ajudar.

E para terminar - assim que você se achar pronto - continue e aprenda CSS no nosso Tutorial CSS.

Só nos resta desejar a você que passe horas agradáveis ao lado do seu novo amigo, o HTML.

^°~FIN~^°