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
<html>
<head>
<title>Título do site</title>
</head>
<body>Conteúdo do site</body>
</html>
3. Bloco de HTML
<html></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
<head></head> - delimitam o cabeçalho do documento.
5. Título do documento
<title></title> - 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
<body></body> - 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 <body> você conseguirá
especificar:
Imagem de fundo
<body background="imagem.gif"> - a imagem que você deseja
configurar como fundo de tela.
Cor de fundo
<body bgcolor="cor"> - a cor de fundo de tela.
Cor do texto padrão
<body text="cor"> - a cor padrão de todo o texto da página
Cor dos links
<body link="cor"> - determina a cor de todos os links da página.
Cor dos links visitados
<body vlink="cor"> - determina a cor de todos os links já
visitados na página.
Cor dos links ativos
<body alink="cor"> - determina a cor dos links ativos.
Por exemplo: <body background="imagem.gif" bgcolor="cor" text="cor"
link="cor" alink="cor" vlink="cor">contedo</body>
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:
<body bgcolor="yellow" text="black" link="blue" vlink="purple"
alink="green">conteúdo</body>
7. Tamanho da fonte
A maneira mais fácil de mudar o tamanho da fonte é utilizar as
tags:
<H1>texto tamanho H1</H1>
<H2>texto tamanho H2</H2>
<H3>texto tamanho H3</H3>
<H4>texto tamanho H4</H4>
<H5>texto tamanho H5</H5>
<H6>texto tamanho H6</H6>
O <H1> deixa a letra maior que o <H2>, 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:
<H1 align="left">texto alinhado à esquerda</H1>
<H2 align="right">texto alinhado à direita</H2>
<H3 align="center">texto alinhado ao centro</H3>
9. Negrito
<b></b> - tudo o que for escrito entre essas duas tags virá em
negrito
10. Itálico
<I></I> - tudo o que for escrito entre essas duas tags virá em
itálico
11. Sublinhado
<U></U> - tudo o que for escrito entre essas duas tags virá
sublinhado
12. Subscrito
<sub></sub> - essas tags rebaixam o texto. Por exemplo: H2O.
Ficaria: H2O.
13. Sobrescrito
<sup></sup> - essas tags elevam o texto. Exemplo: 400 m2. Seria:
400 m2.
14. Formatação de fonte
<font face="tipologia" size="tamanho" color="cor"></font> -
determina o tipo da fonte, o tamanho e a cor do texto que vier
escrito entre essas tags.
Por exemplo:
<font face="arial" size=6 color="red">O texto será escrito em
vermelho, com fonte arial e tamanho 6.</font>
OBS: O tamanho da fonte pode variar de 1 a 7, sendo 1 a menor
fonte, e 7, a maior.
15. Parágrafo
<P></P> - essas tags delimitam um parágrafo no texto. É
possível, neste caso, não fechar a tag <P>, ou seja, omitir o
</P>, sem prejudicar o resultado final.
16. Alinhamento de parágrafo
<P align="left">
<P align="right">
<P align="center">
17. Quebra de linha
<br> - 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
<div align="…"></div> - 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
<center></center> - outra maneira de centralizar o texto
20. Régua horizontal
<HR> - 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:
<hr size=8 align="center" width=75%>
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
<img> - é 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
<img src="nomedaimagem"> - especifica o endereço da imagem a ser
colocada na página. Normalmente, as imagens têm terminação .gif
ou .jpg.
Texto alternativo
<img alt="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
<img align="alinhamento"> - 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
<img border="tamanhodaborda"> - especifica o tamanho da borda,
em pixels. Os números têm de ser inteiros.
Altura em pixels
<img height="alturadaimagem"> - especifica a altura da imagem,
tanto em pixels como em porcentagem.
Largura em pixels
<img width="larguradaimagem"> - especifica a largura da imagem,
tanto em pixels como em porcentagem.
Espaçamento horizontal
<img hspace="espaçohorizontal"> - 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
<img vspace="espaçovertical"> - 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:
<img src="computador.gif" alt="Pentium 3" align="right" border=1
height=180 width=120 hspace=10 vspace=10> - a imagem estará
alinhada à direita, e toda vez que um usuário passar o cursor em
cima dela, aparecerá o texto "Pentium 3".