HTML: Códigos, cores etc.
Saber ou ao menos ter noções em HTML passou a ser quase que obrigatório
para quem convive com o ambiente web. De editores e escritores que publicam
seus trabalhos na web a donos de pequenos blogs, a linguagem HTML é o
básico que se deve saber, o mínimo a se aprender mesmo que não
queira conviver com linguagens eletrônicas. O HTML é tão
básico que provavelmente os maiores sites que você conhece o utilizam
em suas estruturas básicas juntamente com outras linguagens.
HTML siginifica: Hypertext Markup Language ou linguagem de marcação
de hipertexto. Os códigos desta linguagem são conhecidos como
tags. Vejamos então alguns destes códigos:
A estrutura de um site:
A. Estrutura básica de um site é composta pela “head” o titulo ou nome do site e seu corpo “body”, onde são inseridos os textos etc. Reparem que sempre que estou utilizando o html eu indico para o navegador com a tag <html>, reparem também que sempre que abro uma tag <body> por exemplo, eu tenho que indicar seu fechamento depois </body>.
Veja o código:
<html>
<head>
<title>Título do site</title>
</head>
<body>Conteúdo do site</body>
</html>
----------------------------------------------
A Imagem de fundo, o background do site. Você deve indicar o nome e tipo da imagem de seu background para que esta informação possa ser lida pelo navegador.
<body background="imagem.gif">
.
----------------------------------------------
Cor de fundo:
<body bgcolor="cor">
----------------------------------------------
Cor do texto:
<body text="cor">
----------------------------------------------
Cor dos links:
<body link="cor">
-----------------------------------------------
Cor dos links visitados:
<body vlink="cor">
-----------------------------------------------
Cor dos links ativos:
<body alink="cor">
-----------------------------------------------
Resultado:
<html>
<head>
<title>Título do site</title>
</head>
<body><body background="imagem.gif" bgcolor="cor"
text="cor" link="cor" alink="cor" vlink="cor">conteúdo
do site</body>
</html>
As imagens:
<img> esta é a tag que indica, coloca a imagem na página,
vejamos algumas variações:
Quanto a localização da imagem:
<img src="nomedaimagem">
-----------------------------------------------
Texto on-mouse:
<img alt="texto">
O texto aparecerá quando o usuário passar o mouse pela imagem.
-----------------------------------------------
Alinhamento de imagem:
<img align="alinhamento">
Pode ser a 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">
Tamanho da borda em pixels.
-----------------------------------------------
Altura em pixels ou porcentagem:
<img height="alturadaimagem">
-----------------------------------------------
Largura em pixels ou porcentagem:
<img width="larguradaimagem">
-----------------------------------------------
Espaçamento horizontal :
<img hspace="espaçohorizontal">
Espaço a ser deixado entre as bordas da imagem, em pixels. Textos ou outras imagens não ficarão juntos da imagem.
-----------------------------------------------
Espaçamento vertical:
<img vspace="espaçovertical">
-----------------------------------------------
Exemplo, resultado:
<img src="menina.gif" alt="menina bonita" align="right"
border=3 height=560 width=420 hspace=10 vspace=10>
Links e hipertexto:
Criando links:
<a href="http://exemplo.htm">Hiper texto</a>
Outro exemplo:
<a href=http://www.rg9.org>Rg9.org</a>
-----------------------------------------------
Para que o link seja aberto em outra página:
<a href=”http://www.rg9.org” target=”exemplo.html”>Rg9.org</a>
-----------------------------------------------
.
Fazendo o link com imagens:
<a href=http://www.rg9.org><img src="bol.gif border=0 alt="imagem.gif"></a>
-----------------------------------------------
Links na mesma página, âncoras:
<a href="#explicação">Saiba mais sobre Rg9.org</a>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<a name="explicação">Rg9.org é um portal
destinado a...</a>
-----------------------------------------------
Link de e-mail:
<a href=mailto:exemplo@exemplo.com.br>Contato, e-mail</a>
Editando textos em html:
O texto e as fontes em html:
<H1>texto</H1>
<H2>texto</H2>
<H3>texto</H3>
<H4>texto</H4>
<H5>texto</H5>
<H6>texto</H6>
O <H1> marca um texto (fonte) maior do que o <H2> e assim por diante.
-----------------------------------------------
O alinhamento do texto:
<H1 align="left">texto alinhado à esquerda</H1>
<H2 align="right">texto alinhado à direita</H2>
<H3 align="center">texto alinhado ao centro</H3>
-----------------------------------------------
Negrito:
[b]texto[/b]
- tudo o que for escrito entre essas duas tags virá em negrito
-----------------------------------------------
Itálico:
<I>texto</I>
-----------------------------------------------
Sublinhado:
<U>texto</U>
-----------------------------------------------
Subscrito:
<sub>texto</sub>
-----------------------------------------------
Sobrescrito:
<sup>texto</sup>
-----------------------------------------------
Formatação de fonte:
<font face="exemplo_arial" size="tamanho" color="cor"></font>
-----------------------------------------------
Parágrafo:
<P>texto</P>
-----------------------------------------------
Alinhamento de parágrafo:
<P align="left">
<P align="right">
<P align="center">
-----------------------------------------------
Quebra de linha:
<br>
-----------------------------------------------
Alinhamento de bloco de texto:
<div align="left"></div>
<div align="right"></div>
<div align="center"></div>
-----------------------------------------------
Centralização de texto ou imagem:
<center>texto ou imagem</center>
-----------------------------------------------
Régua horizontal
<HR>
Ex:
<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
-----------------------------------------------
Tabela de cores Web Safe:
Tabela de cores seguras para web. Html cores, códigos das cores. Código das cores para web, html.
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
| » Dennys | |||||
| |||||