Apostila de HTML



Usei + no lugar de < e - no lugar de > então ñ se esqueça de trocar!

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:
1. Imagem de fundo
+body background="imagem.gif"- / a imagem que você deseja configurar como fundo de tela.

2. Cor de fundo
+body bgcolor="cor"- / a cor de fundo de tela.

3. Cor do texto padrão +body text="cor"- / a cor padrão de todo o texto da página.

4. Cor dos links +body link="cor"- / determina a cor de todos os links da página.

5. Cor dos links visitados +body vlink="cor"- / determina a cor de todos os links já visitados na página.

6. Cor dos links ativos +body alink="cor"- / determina a cor dos links ativos.

7. 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:

1. 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.

2. 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.

3. 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).

4. Borda da imagem
+img border="tamanhodaborda"- / especifica o tamanho da borda, em pixels. Os números têm de ser inteiros.

5. Altura em pixels
+img height="alturadaimagem"- / especifica a altura da imagem, tanto em pixels como em porcentagem.

6. Largura em pixels
+img width="larguradaimagem"- / especifica a largura da imagem, tanto em pixels como em porcentagem.

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

8. 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.

9. 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
1. 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.

2. 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.

3. 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.

4. 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.