Ir para conteúdo

Condi Sapo Pediu... Eu Vo Fazer...

Cocadinha

Por Cocadinha
em Programação Web

 Share

Posts Recomendados

Cocadinha

Cocadinha 0

Postado
Postado

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

 

 

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 UOL na sua página, escreva: <a href=http://www.uol.com.br>UOL</a>.

Um visitante na sua página que clicar sobre o link UOL será levado à página principal do site.

 

2. Referência de hipertexto com imagem

<a href=http://www.uol.com.br><img src="uol.gif border=0 alt="UOL"></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.

 

Créditos ByUol

Link para o comentário
Compartilhar em outros sites
  • 3 weeks later...
  • 7 months later...
 Share
Ir para a lista de tópicos
×
×
  • Criar Novo...