Esta página tem o objetivo de ensinar as noções básicas da linguagem HTML, pois para fazer uma Home Page vacê pode usar programas que usam uma linguagem visual (como por exemplo, Front Page ou PageMill), ou seja, você faz a formatação de sua página sem precisar saber códigos.
O Que é HTML ?
HTML é a abreviatura de Hyper Text Markup Language, que pode ser traduzida como
Linguagem de Hipertexto Baseada em Códigos. Define um conjunto de estilos como cabeçalhos, parágrafos, listas e tabelas que compões uma página da W e serve para indicarmos formatações para textos, inserir imagens e ligações de hipertexto.
Tags ou Diretivas.
A linguagem HTML possui algumas regras de sintaxe que devemos seguir para obter o resultado desejado.
Todo documento HTML apresenta elementos entre parênteses angulares
| correspondente etiqueta de fechamento (<ETIQUETA> | </ETIQUETA>). Isto é |
| de texto, apenas inserem alguma coisa no documento | As etiquetas serão escritas em |
(<ELEMENTOS>), esses elementos são as etiquetas da linguagem HTML, que são os comandos de formatação da linguagem. As etiquetas, tags ou diretivas, tem sua nescessário porque as tags servem para definir a formatação de uma porção de texto, e assim marca-se onde começa e onde termina o texto com formatação especificada por ela. Alguns tags são chamados "vazios" ou unidirecionais, pois não marcam uma região maiúsculas apenas para facilitar a visualização, pois você pode misturar ou colocar tudo minúsculo que é igualmente aceito pelos Browsers.
Como Editar as Páginas em HTML.
As páginas desenvolvidas em HTML são arquivos simples e podem ser lidos e confeccionados em qualquer editor de texto (Microsoft Word, Word Pad, Edit do DOS, NotePad). Depois de editar os códigos e textos é só gravar o arquivo mudando a extenção (ex.: .txt) para .html ou .htm.
A diferença entre .htm e .html é que o .html é mais novo e são comandos melhores aceitos e .htm é como se iniciou o html mais não mudou praticamente nada. Tanto faz você salvar em qualquer uma das duas. Então, basicamente, os arquivos HTML possuem dois componentes:
1. O texto propriamente dito; 2. As tags que indicarão os elementos de página:
estrutura; formatação; vínculos a outras páginas.
Obs.: Para exibir o resultado do arquivo HTML não é nescessário estar conectado à rede, basta acessar um Browser (Internet Explorer, Netscape, etc) e utiliza-lo para abrir o arquivo.
Formatação de Textos
Em uma página HTML podem existir textos, imagens, itens multimídia e hipertexto. Para isso o documento HTML apresenta a seguinte estrutura:
<TITLE>Titulo do documento</TITLE>
| texto, imagem, links, etc |
Como o HTML não é uma linguagem de programação, você nunca será avisado de erros cometidos na edição do seu documento. Um simples esquecimento de uma barra pode mudar toda sua página.
Seções
<HTML> e </HTML>: Identifica o documento como sendo HTML.
<HEAD> e </HEAD>: É o cabechalho e contém as informações sobre o documento.
<TITLE> e </TITLE>:
Define um título que é mostrado no alto da janela do Browser. Todo documento W deve ter um título. Esse título é referenciado em busca pela rede, dando uma identidade ao documento, facilitando assim, a classificação em catalogos de busca.
Tudo que estiver na seção BODY será mostrado na janela do browser e, consequentemente, apresentado ao leitor. Esta seção pode conter cabeçalhos, parágrafor, listas, tabelas, imagens e links para outros documentos. Dentro da tag <BODY> podemos usar as seguintes opções que não são obrigatórias e caso não existam assumem o valor default:
BGCOLOR - especifica uma cor de fundo para a página; BACKGROUND - especifica a imagem (.gif ou .jpg) usada no fundo da tela; BGPROPERTIES = FIXED - fixa uma imagem no fundo da tela; TEXT - define uma cor para o texto; LINK - define uma cor para os links; VLINK - define uma cor para os links já visitados; ALINK - define uma cor para o link na hora que for ativado.
Por exemplo:
<BODY BACKGROUND=nome_imagem.extencao BGCOLOR=nome_cor TEXT=nome_cor LINK=nome_cor VLINK=nome_cor ALINK=nome_cor>
Ou então, podemos usar o código equivalente da cor em hexadecimal:
<BODY BACKGROUND=nome_imagem.extencao BGCOLOR=#codigo_cor TEXT=#codigo_cor LINK=#codigo_cor VLINK=#codigo_cor ALINK=#codigo_cor>
Não importa a seqüência dos atributos (BGCOLOR, LINK, VLINK...) e sempre se coloca um espaço entre os atributos.
Formatação de Textos
Podemos formatar o texto mudando a fonte do texto, a cor, colocando em itálico, negrito, sublinhado, fonte espaçada, subscrito, etc. Para todas elas são nescessário delimitar o início e o fim do texto a ser formatado.
<FONT COLOR=nome_cor> texto </FONT>: Muda a cor do texto que estiver entre as tags início e fim.
<FONT FACE=nome_letra> texto </FONT>: Muda o tipo de letra do texto que estiver entre as tags início e fim.
<FONT SIZE=tamanho> texto </FONT> ou <Hn> texto </Hn>:
Muda o tamanho da letra do texto que estiver entre as tags início e fim. O n da tag <Hn> pode variar de 1 (o maior) até 6 (o menor).
<B> texto </B>: Coloca o texto que estiver entre as tags início e fim em negrito.
<I> texto </I>: Coloca o texto que estiver entre as tags início e fim em itálico.
<T> texto </T>: Coloca o texto que estiver entre as tags início e fim com fonte monoespaçada.
Sublinha o texto que estiver entre as tags início e fim. (Não é aconselhavel colocar o texto sublinhado, pois os links já são sublinhados e pode confundir).
<SUP> texto </SUP>: Coloca o texto que estiver entre as tags início e fim em sobscrito.
<SUB> texto </SUB>: Coloca o texto que estiver entre as tags início e fim em subscrito.
<S> texto </S>: Taxa o texto que estiver entre as tags início e fim.
Ainda falando da disposição de texto na tela, se desejarmos mudar de linha não basta usar o ENTER como em um editor de textos, existem tags específicas para isso, além de outros recursos para alocar um texto na página. São eles:
<CENTER> texto </CENTER>: Centraliza o texto em relação à página.
<BR>: Quebra de linha, inicia o texto seguinte na linha logo abaixo.
Faz com que o texto não tenha quebras de linhas e crie uma barra de rolagem horizontal para poder ver o texto inteiro.
Coloca quebra de linhas no comando <NOBR>.a quebra de linha vai ser onde você colocou este comando.
<P>: Força o fim de um parágrafo, ou seja, pula uma linha antes de iniciar outro parágrafo.
