1. O que é HTML e como posso utilizá-lo?
Hypertext Markup Language (HTML - linguagem de marcação de hipertexto) é a linguagem utilizada na produção de páginas na Internet. O HTML permite a criação de documentos que podem ser lidos em qualquer tipo de computador e transmitidos pela Internet até por correio eletrônico. Para escrever documentos HTML não é necessário mais do que um editor de texto simples e conhecimentos dos códigos que compõem a linguagem. Os códigos, conhecidos como "tags", servem para indicar a função de cada elemento da página na rede.
2. Estrutura básica de um documento HTML
Título do site
Conteúdo do site
3. Bloco de HTML
- indicam o início e o fim de um documento. Para que o computador reconheça que você está escrevendo um documento em HTML, todo o seu conteúdo deverá ser colocado no meio destas duas tags.
4. Cabeçalho do documento
- delimitam o cabeçalho do documento.
5. Título do documento
- entre estas duas tags, você deve escrever o título do site, que deve aparecer na barra no topo da tela de seu navegador.
6. Corpo do documento
- estas duas tags delimitam todo o conteúdo do site. É aí que aparecerão os textos, as imagens, o fundo de tela, entre outras coisas. Dentro da tag você conseguirá especificar:
Imagem de fundo
- a imagem que você deseja configurar como fundo de tela.
Cor de fundo
- a cor de fundo de tela.
Cor do texto padrão - a cor padrão de todo o texto da página.
Cor dos links - determina a cor de todos os links da página.
Cor dos links visitados - determina a cor de todos os links já visitados na página.
Cor dos links ativos - determina a cor dos links ativos.
Por exemplo: conteúdo
O exemplo seguinte determina que a cor de fundo do site será amarela, o texto será preto, os links ainda não visitados serão azuis, os links já visitados serão roxos, e os links ativos serão verdes:
conteúdo
7. Tamanho da fonte
A maneira mais fácil de mudar o tamanho da fonte é utilizar as tags:
texto tamanho H1
texto tamanho H2
texto tamanho H3
texto tamanho H4
texto tamanho H5
texto tamanho H6
O
deixa a letra maior que o , e assim por diante.
8. Alinhamento do texto
O parâmetro que deve ser utilizado é o ALIGN, seguido de:
LEFT - se você quiser que o texto fique alinhado à esquerda.
RIGHT - se você quiser que o texto fique alinhado à direita.
CENTER - se você quiser que o texto fique alinhado ao centro.
Por exemplo:
texto alinhado à esquerda
texto alinhado à direita
texto alinhado ao centro
9. Negrito
[b][/b] - tudo o que for escrito entre essas duas tags virá em negrito
10. Itálico
- tudo o que for escrito entre essas duas tags virá em itálico
11. Sublinhado
- tudo o que for escrito entre essas duas tags virá sublinhado
12. Subscrito
- essas tags rebaixam o texto. Por exemplo: H2O. Ficaria: H2O.
13. Sobrescrito
- essas tags elevam o texto. Exemplo: 400 m2. Seria: 400 m2.
14. Formatação de fonte
- determina o tipo da fonte, o tamanho e a cor do texto que vier escrito entre essas tags.
Por exemplo:
O texto será escrito em vermelho, com fonte arial e tamanho 6.
OBS: O tamanho da fonte pode variar de 1 a 7, sendo 1 a menor fonte, e 7, a maior.
15. Parágrafo
- essas tags delimitam um parágrafo no texto. É possível, neste caso, não fechar a tag
, ou seja, omitir o
, sem prejudicar o resultado final.
16. Alinhamento de parágrafo
17. Quebra de linha
- quebra linha. Mas, ao contrário do parágrafo, não é deixada uma linha em branco antes da próxima.
18. Alinhamento de bloco de texto
- configura o alinhamento de um bloco todo de texto. O alinhamento pode ser à esquerda (left), à direita (right) e ao centro (center).
19. Centralização de texto
- outra maneira de centralizar o texto
20. Régua horizontal
- parâmetro utilizado para colocar linhas horizontais em uma página. Você pode determinar a altura, a largura e o alinhamento da linha.
Por exemplo:
Size - configura a espessura da linha
Width - configura a largura da linha (pode ser em porcentagem ou em pixels)
Align - determina o posicionamento da linha
21. Imagem
![]()
- é a tag necessária para se colocar uma imagem na página. A tag <img> pode vir acompanhada de diversos parâmetros:
Localização da imagem

- especifica o endereço da imagem a ser colocada na página. Normalmente, as imagens têm terminação .gif ou .jpg.
Texto alternativo
![textoalternativo]()
- o texto acompanhado do alt aparecerá quando o usuário passar o cursor em cima da imagem. É uma legenda alternativa para a imagem.
Alinhamento de imagem
![]()
- alinha a imagem à esquerda (left), direita (right), ao centro (middle), no topo da página (top) ou no pé da página (bottom).
Borda da imagem
![]()
- especifica o tamanho da borda, em pixels. Os números têm de ser inteiros.
Altura em pixels
![]()
- especifica a altura da imagem, tanto em pixels como em porcentagem.
Largura em pixels
![]()
- especifica a largura da imagem, tanto em pixels como em porcentagem.
Espaçamento horizontal
![]()
- especifica um espaço em branco a ser deixado entre as bordas esquerda e direita da imagem, em pixels. Ou seja, os textos que forem escritos ao redor da imagem não ficarão grudados nela.
Espaçamento vertical
![]()
- especifica um espaço em branco a ser deixado entre o topo e o pé da imagem, em pixels. Ou seja, os textos que forem escritos ao redor da imagem não ficarão grudados nela.
Por exemplo:

- a imagem estará alinhada à direita, e toda vez que um usuário passar o cursor em cima dela, aparecerá o texto "Pentium 3".
22. Hipertexto
Referência de hipertexto
Aqui vai o nome ou o endereço da página para a qual você está apontando o link - estas tags criam links para outras páginas da Internet.
Por exempo: para colocar um link do Brasil Online na sua página, escreva:
Brasil Online.
Um visitante na sua página que clicar sobre o link Brasil Online será levado à página principal do site.
Referência de hipertexto com imagem

- neste caso, em vez de colocar o link em um texto, você estará colocando o link em uma imagem.
Links na mesma página (âncora)
- este atributo permite que você crie links internos na mesma página. Por exemplo:
Saiba mais sobre o meu site
.
.
.
O meu site
No exemplo acima, "Saiba mais sobre o meu site" está vinculado à região chamada "O meu site", ou seja, quando um usuário clicar sobre "Saiba mais sobre o meu site", vai ser levado para a região, na mesma página, chamada "Meu site". O caracter "#" indica que se trata de um link em uma mesma página.
Link para e-mail
Mande-me um e-mail - Essas tags permitem que os visitantes mandem e-mail para o autor do site, ao clicar no endereço.
Dúvidas, postem no fórum.