Autor: Mariana Costa | Publicado: 2013-01-20T18:45:00-08:00

Introdução ao HTML&nbsp;Todo documento HTML é composto de Tags. Este é o nome dados aos comandos HTML. Você deve começar sua página com a tag , na primeira linha do código, e terminar com  na última linha do documento. Perceba que a barra "/" sinaliza o fechamento da tag. Este fechamento é&nbsp;necessário&nbsp;para que ela possa ser interpretada pelo navegador. A estrutura das tags é formada por:&nbsp;: Este é o inicio da tag;*
: Este é o fechamento da tag para que ela possa funcionar.**&nbsp;* 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.&nbsp;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.&nbsp;Após iniciar o documento com a tag  você deve incluir o cabeçalho que é feito com as tags  . E também um título usando o par  ... . 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.&nbsp;- A tag &nbsp;O "corpo" do documento deve ser demarcado pelo par  ... . Nesta parte do documento serão colocados todos os comandos para apresentação de uma página HTML. Entre as tags  e  é que você vai colocar todos os códigos para sua página.&nbsp;Um documento simples seria digitado da seguinte maneira:&nbsp; Meu documento HTML Aqui você coloca os comandos em HTML.Os espaços em branco são ignorados quando o&nbsp;navegador&nbsp;"lê" o código. Assim o código acima poderia ser escrito da seguinte forma:&nbsp; Meu documento HTML Aqui você coloca os comandos em HTML.&nbsp;A&nbsp;vantagem&nbsp;é 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.&nbsp;- Atributos do &nbsp;Através de atributos de , podemos definir cores para os textos, links e para o fundo das páginas, bem como uma&nbsp;imagem&nbsp;de fundo (papel de parede da página):&nbsp;&nbsp;Onde:&nbsp;- BGCOLOR&nbsp;Cor de fundo (padrão: cinza ou branco)&nbsp;- TEXT&nbsp;Cor dos textos da página (padrão: preto)&nbsp;- LINK&nbsp;Cor dos links (padrão: azul)&nbsp;- ALINK&nbsp;Cor dos links, quando acionados (padrão: vermelho)&nbsp;- VLINK&nbsp;Cor dos links, depois de visitados (padrão: azul escuro ou roxo)&nbsp;- BACKGROUNDImagem de fundo. Saiba como colocar uma imagem de fundo clicando aqui.&nbsp;Em "cor", você pode colocar os valores de cores em inglês como:&nbsp;Preto = blackBranco = whiteAzul = blueAmarelo = yellowVermelho = redVocê também pode usar o valor hexadecimal de cores ou "RRGGBB", que é a forma mais comum de definir cores usadas na&nbsp;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&nbsp;Algumas cores disponíveis RRGGBB (hexadecimal):&nbsp;Cor - Código HTMLPRETO - #000000BRANCO - #FFFFFFVERMELHO - #FF0000VERDE - #00FF00AZUL - #0000FFROSA - #FF00FFAMARELO - #FFFF00Agora que você já aprendeu como é o arquivo HTML básico , pode começar a ver tags. Elas ficam após o comando  , no meio do seu texto. Após  você já pode começar a escrever o que quiser. Há duas formas de formatar o seu texto:- Tags de título  - "Headings"&nbsp;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.&nbsp;
 Este é o primeiro nível 

 Este é o segundo nível 

 Este é o terceiro nível 

 Este é o quarto nível 
&nbsp;
 Este é o quinto nível 
&nbsp;
 Este é o sexto nível 
Este é o primeiro nívelEste é o segundo nível&nbsp;Este é o terceiro nível&nbsp;Este é o quarto nível&nbsp;Este é o quinto nível&nbsp;Este é o sexto nível&nbsp;- Tag &nbsp;- 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 é , 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:&nbsp;- Atributo FACE&nbsp;- FACE:&nbsp;Uma evolução que permite a escolha da fonte (tipo de letra) para os textos, a tag é feita assim:TextoExemplo:Fonte Times New Roman Fonte Times New RomanFonte Arial Fonte ArialFonte Courier New Fonte Courier New- Atributo COLOR e SIZE&nbsp;- COLOR e SIZE:&nbsp;Atributos cor e tamanho: A palavra terá o tamanho 3&nbsp;A palavra terá o tamanho 3 A palavra terá a cor vermelha &nbsp;A palavra terá a cor vermelha.Podemos também combinar as tags acima:Palavra com tamanho 3 e em vermelho &nbsp;O resultado final será:Palavra com tamanho 3 e em vermelho&nbsp;Formatando textos&nbsp;Você pode formatar o texto, colocando-o em negrito, itálico, sublinhado e centralizado. Assim:- Tags  ,  ,  e 
&nbsp;
 Texto  - Texto fica em Negrito.&nbsp; Texto  - Texto Sublinhado.&nbsp; Texto  - Texto em Itálico.&nbsp;
 Texto 
Texto centralizado.&nbsp;Os códigos também podem ser escritos uns sobre os outros, acumulando seus efeitos, como por exemplo:&nbsp;
Teste 1 e Teste 2
O resultado é:&nbsp;Teste 1 e Teste 2Parágrafos&nbsp;- Tag  - Parágrafos:&nbsp;Em HTML são necessários comandos para definir parágrafos. Não basta você simplesmente pressionar "ENTER" para que a linha vá para baixo, como em editores de texto comuns. Você terá que colocar uma tag para um parágrafo ou para uma linha nova.Para fazer um parágrafo novo, basta colocar a tag . Por exemplo, escreva no editor o seguinte, deste jeito:&nbsp;Parágrafo 1Parágrafo 2.O resultado será este:Parágrafo 1Parágrafo 2- Tag  - Linhas&nbsp;Como você pode ver, o navegador mesmo faz um parágrafo novo cada vez que você coloca esta tag. Caso você queira simplesmente mudar de linha, ao invés de mudar de parágrafo, coloque a tag . Por exemplo, escreva:Parágrafo 1Linha 1Parágrafo 2Linha 2.&nbsp;O resultado será este:Parágrafo 1Linha 1Parágrafo 2Linha 2