Desenvolvimento.

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="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". 


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 Brasil Online na sua página, escreva: <a href=http://www.bol.com.br>Brasil Online</a>
. 
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 
<a href=http://www.bol.com.br><img src="bol.gif border=0 alt="BOL"></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.