HTML Introdução

Sintaxes do HTML

Sintaxe com a qual se trabalha na linguagem HTML.

Um documento HTML deve estar delimitado pela etiqueta <html> e </html>. Dentro deste documento, podemos ainda distinguir duas partes principais:

O cabeçalho, delimitado por <head> e </head> onde colocaremos etiquetas de índole informativo como por exemplo o título de nossa página.

O corpo, delimitado pelas etiquetas <body> e </body>, que será onde colocaremos nosso texto e imagens delimitados por sua vez por outras etiquetas como as que vimos anteriormente.

O HTML é uma linguagem que baseia sua sintaxe num elemento de base que chamamos etiqueta (tag). A etiqueta apresenta frequentemente duas partes:

Uma abertura de forma geral <etiqueta>
Um fecho do tipo </etiqueta>

Tudo que estiver incluído no interior desta etiqueta sofrerá as modificações que caracteristicas desta etiqueta. Como por exemplo:

As etiquetas <b> e </b> definem um texto em negrito. Se no documento HTML escrevemos uma frase com o seguinte código:

<b>Isto está em negrito</b>

O resultado será:

Isto está em negrito

As etiquetas <p> e </p> definem um parágrafo. Se no documento HTML escrevemos: <p>Olá, estamos no parágrafo 1</p>
<p>Agora mudamos de parágrafo</p>

O resultado seria:

Olá, estamos no parágrafo 1

Agora mudamos de parágrafo

Partes de um documento HTML

O resultado é um documento com a seguinte estrutura:

<html>

<head>

Etiquetas e conteúdos do cabeçalho

Dados que não aparecem em nossa página mas que são importantes : Título, palavras-chaves, designação

</head>

<body>

Etiquetas e conteúdo do corpo

Parte do documento que será mostrada pelo navegador: Textos e imagens

</body>

</html>

As maiúsculas ou minúsculas são indiferentes ao escrever as etiquetas

As etiquetas podem ser escritas com qualquer tipo de combinação entre maiúsculas e minúsculas. Ou seja, <HTML> ou <HtMl> são a mesma etiqueta. Entretanto, é aconselhável utilizar minúscula já que outras tecnologias que se podem integrar no HTML (XML por exemplo) não são tão permissivas.

Edição de documentos HTML

Os documentos em HTML são como arquivos de texto comuns. Para facilitar a produção de documentos, existem editores HTML específicos:

Editores de texto fonte: inserem automaticamente as etiquetas, orientando a inserção de atributos e marcações.
Editores WYSIWYG: oferecem ambiente de edição com um "esboço" resultado final das marcações.

Estrutura básica de um documento

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

 <body>
   textos,
   imagens,
   links,
   ...
 </body>

 </html>

<html>: define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML.
<head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto.
<body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir propriedades comuns a toda a página, como cor de fundo, margens, e outras formatações.

<HEADER> Cabeçalho

Esta área não é visivel para o utilizador quando navega na Internet, permite no entanto definir um conjunto de caracteristicas da página. Sendo o título <title>a mais importante.

<title>: define o título da página, que é exibido na barra de título dos Browsers.
<style>: define formatação do documento, os estilos podem estar no CSS.
<meta>: define propriedades da página, como codificação de caracteres, descrição da página, autor, etc. São meta informações sobre documento.

<BODY> CORPO

Dentro do corpo podemos encontrar outras várias etiquetas, como por exemplo:

<h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos.
<p>: novo parágrafo.
<br>: quebra de linha.
<table>: cria uma tabela (linhas são criadas com <TR> e novas células com <TD>. Já os cabeçalhos de coluna são criados com a etiqueta <TH>.)
<div>: determina uma divisão na página a qual pode possuir variadas formatações.
<font>: forma um texto (fonte, cor e tamanho) de um trecho do texto.
<b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, respectivamente.
<img>: imagem.
<a>: hiper-ligação para um um outro local, seja uma página ou outro serviço.
<textarea>: caixa de texto (com mais de uma linha);
<acronym>: acrónimo (sigla)
<cite>: citação
<adress>: endereço

Editores de HTML

Existem muitos editores de HTML, uns apresentam vantagens e desvantagens em relação a outros.

Dentro dos Open Source destacam-se:

HTML KIT - Destaca-se por ter centenas de de add-on.

NVU - Um editor muito fácil de trabalhar

E os mais conhecidos mas não grátis

Frontpage - Distribuído com o OFFICE descontinuado e substituído pelo Microsoft Office SharePoint Designer 2007 e Microsoft Expression.

Dreamweaver - Do agrado de muitos webmasters.

Estes dois últimos embora produzam páginas com um elevado grau de profissionalismo, não respeitam todas as normas implementadas pelo World Wide Web Consortium.

Existem muitos outros editores, uns mais do agrado individual de cada um, uns mais fáceis de utilizar para determinada função do que outros.

Um documento html pode ser produzido por um editor de texto normal (notepad, text editor, x-editor...) desde que contenha as etiquetas que permitem aos browsers intrepretar o html nele inscrito.