HTML básico: Introdução ao HTML

por **Kaique Luan** Seg Dez 06, 2010 10:35 am

Autor/fonte: Orbita Starmedia

HTML básico: Introdução ao HTML

Todo documento HTML é composto de Tags. Este é o nome dados aos comandos HTML. Você deve começar sua página com a tag <HTML>, na primeira linha do código, e terminar com </HTML> na última linha do documento. Perceba que a barra "/" sinaliza o fechamento da tag. Este fechamento é necessário para que ela possa ser interpretada pelo navegador. A estrutura das tags é formada por:

. <xxx> - Este é o inicio da tag;
. </xxx> - Este é o fechamento da tag para que ela possa funcionar.

Obs.: xxx é apenas uma representação de uma tag, não é uma tag HTML. Algumas tags não necessitam do fechamento. Neste caso você será avisado.

Entre o início da tag e o seu fechamento ficam os textos, parâmetros, atributos e até outras tags que vão formando a sua página. Se você não fechar corretamente as tags, a página não irá ser mostrada direito ou nem mesmo irá aparecer.

Após iniciar o documento com a tag <HTML> você deve incluir o cabeçalho que é feito com as tags <HEAD> </HEAD>. E também um título usando o par <TITLE> ... </TITLE>. Geralmente, o título não é mostrado na página, porém os navegadores o utilizam para entitular a janela de visualização. Coloque um título bem claro e explicativo para seus documentos.

A tag <BODY>

O "corpo" do documento deve ser demarcado pelo par <BODY> ... </BODY>. Nesta parte do documento serão colocados todos os comandos para apresentação de uma página HTML. Entre as tags <BODY> e </BODY> é que você vai colocar todos os códigos para sua página.

Um documento simples seria digitado da seguinte maneira:

<HTML>
<HEAD>
<TITLE> Meu documento HTML </TITLE>
</HEAD>
<BODY>
Aqui você coloca os comandos em HTML.
</BODY>
</HTML>

Os espaços em branco são ignorados quando o navegador "lê" o código. Assim o código acima poderia ser escrito da seguinte forma:

<HTML><HEAD><TITLE> Meu documento HTML </TITLE></HEAD><BODY>Aqui você coloca os comandos em HTML.</BODY></HTML>

A vantagem é que isto economiza espaço em disco, mas é uma maneira muito confusa e relaxada de programar. Acostume-se a organizar seus programas para poder entendê-los posteriormente.

Atributos do <BODY>

Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (papel de parede da página):

<BODY BGCOLOR="cor" TEXT="cor" LINK="cor" ALINK="cor" VLINK="cor" BACKGROUND="imagem que vai aparecer">

Onde:

. BGCOLOR: Cor de fundo (padrão: cinza ou branco);
. TEXT: Cor dos textos da página (padrão: preto);
. LINK: Cor dos links (padrão: azul);
. ALINK: Cor dos links, quando acionados (padrão: vermelho);
. VLINK: Cor dos links, depois de visitados (padrão: azul escuro ou roxo);
. BACKGROUND: Imagem de fundo. Saiba como colocar uma imagem de fundo clicando aqui.

Em "cor", você pode colocar os valores de cores em inglês como:

. Preto = black;
. Branco = white;
. Azul = blue;
. Amarelo = yellow;
. Vermelho = red.

Você também pode usar o valor hexadecimal de cores ou "RRGGBB", que é a forma mais comum de definir cores usadas na Internet.. Com isso você pode colocar em sua página outras cores diferentes, como um azul-claro. Para isso você deve ter o código das cores, e no lugar de escrever o nome da cor em inglês, você coloca o valor da cor.

Algumas cores disponíveis RRGGBB (hexadecimal):

. Preto - #000000;
. Branco - #FFFFFF;
. Vermelho - #FF0000;
. Verde - #00FF00;
. Azul - #0000FF;
. Rosa - #FF00FF;
. Amarelo - #FFFF00.

HTML básico: Incluindo textos

Agora que você já aprendeu como é o arquivo HTML básico , pode começar a ver tags. Elas ficam após o comando <BODY> , no meio do seu texto. Após <BODY> você já pode começar a escrever o que quiser. Há duas formas de formatar o seu texto:

Tags de título <H> - "Headings"

Com elas você pode apenas definir o tamanho das letras, mas não o tipo de fontes. Veja agora como ficam as tags "headings" para cabeçalhos que vão do tamanho 1 até 6:

<H1> Este é o primeiro nível </H1>
<H2> Este é o segundo nível </H2>
<H3> Este é o terceiro nível </H3>
<H4> Este é o quarto nível </H4>
<H5> Este é o quinto nível </H5>
<H6> Este é o sexto nível </H6>

Tag <FONT>

Você pode também usar as tags de fonte no lugar das tags de "headings". Este tipo de tag é a mais usada, pois você pode definir mais facilmente o tamanho do texto e fonte que você deseja, e personalizar ainda mais a sua página. A tag é <FONT>, e dentro dela você pode definir vários parâmetros, como cor, tamanho e tipo de letra. Veja agora como usar as tags de fontes:

Atributo FACE

Uma evolução que permite a escolha da fonte (tipo de letra) para os textos, a tag é feita assim:

<FONT FACE=fonte_da_letra>Texto</FONT>

Exemplos:

<FONT FACE=Times>Fonte Times New Roman </FONT>
<FONT FACE=Arial>Fonte Arial </FONT>
<FONT FACE=Courier>Fonte Courier New </FONT>

Atributo COLOR e SIZE

Atributos cor e tamanho:

<font size="3"> A palavra terá o tamanho 3</font>
<font color="red"> A palavra terá a cor vermelha </font>

Podemos também combinar as tags acima:

<font face="Arial" size="2" color="red">Palavra com tamanho 3 e em vermelho </font>

HTML básico: Formatando textos

Você pode formatar o texto, colocando-o em negrito, itálico, sublinhado e centralizado. Assim:

Tags <B> , <U> , <I> e <CENTER>

. <B> Texto </B> - Texto fica em Negrito;
. <U> Texto </U> - Texto Sublinhado;
. <I> Texto </I> - Texto em Itálico;
. <CENTER> Texto </CENTER> Texto centralizado.

Os códigos também podem ser escritos uns sobre os outros, acumulando seus efeitos, como por exemplo:

<CENTER><B><U>Teste 1</U> <I>e</I> Teste 2</B></CENTER>

Bom e isso ai pessoal a medida que os menbros forem gostando do assunto eu vou colocando mais topicos , pois num vou ficar aqui colocando varios e varios assuntos se ninguem se interessa né ?
Webtutoriais:36F5EEC6
Botão:
HTML básico: Introdução ao HTML 2dmbac8