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">conteúdo</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="#000000">O texto será escrito em
preto,
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".
22. Hipertexto
- Referência de hipertexto
<a href="http://endereçodapágina.htm">Aqui
vai o nome ou o endereço da página para a qual
você está apontando o link</a> - estas tags
criam links para outras páginas da Internet.
Por exempo: para colocar um link do
Site na sua página, escreva: <a href=http://www.Site.com.br>Site</a>.
Um visitante na sua página que clicar sobre o
link
Site será
levado à página principal do site.
- Referência de hipertexto com imagem
<a href=http://www.site.com.br><img src="site.gif
border=0 alt="Site"></a> - 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)
<a
name=região> - este atributo permite que você
crie links internos na mesma página. Por
exemplo:
<a href="#explicação">Saiba mais
sobre o meu site</a>
.
.
.
<a name="explicação">O
meu site</a>
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
<a href=mailto:username@provedor.com.br>Mande-me
um e-mail</a> - Essas tags permitem que os
visitantes mandem e-mail para o autor do site,
ao clicar no endereço.
|