Dicas para blog - Aline Star☆

14 de março de 2009

Dicas para blog

 Tutorial de HTML



01. O que é HTML?


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.

02. Estrutura básica de um documento
HTML

Uma página, de qualquer tipo, e para qualquer
objetivo, deve ter pelo menos a seguinte estrutura de comandos
HTML:

<html>
<head>
<title>
Título do
site</title>
</head>
<body>
Conteúdo
do site</body>
</html>



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

b) Cabeçalho do
documento

<head></head> - delimitam o cabeçalho do
documento.

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

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

Cada tag é
composto de 2 símbolos especiais: o sinal "<" denominado "menor que", e o
sinal ">" denominado "maior que". No meio desses símbolos especiais vem o
comando propriamente dito, sempre uma palavra na língua inglesa, como body
(corpo). Não importa se tais comandos são digitados em maiúsculas ou minúsculas,
porém o ideal, e também um padrão de fato, é se utilizar apenas de comandos em
minúsculas.

Um cuidado importante com estes, e
na verdade com quase todos os demais tags, é que eles sempre andam aos pares.
Para cada tag de abertura (ex: <head>) deve existir um outro tag de
fechamento (ex: </head>). E este tag de fechamento é idêntico ao de
abertura, apenas com a adição de uma barra logo após o sinal de "menor que".


03. Imagem de fundo

<body background="imagem.gif"> - a imagem
que você deseja configurar como fundo de tela.

04. Cor de
fundo

<body bgcolor="cor"> - a cor de fundo de
tela.

05. Cor do texto padrão

<body text="cor"> - a cor padrão de todo o
texto da página.

06. Links


a) Cor dos links
<body link="cor"> -
determina a cor de todos os links da página.

b) Cor dos links
visitados
<body vlink="cor"> - determina a cor de todos os links já
visitados na página.

c) 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>

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

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

a) Negrito
<b></b> - tudo o que for
escrito entre essas duas tags virá em negrito.

b) Itálico


<I></I> - tudo o que for escrito entre essas duas tags virá em
itálico.

c) Sublinhado
<U></U> - tudo o que for escrito
entre essas duas tags virá sublinhado.

d) Subscrito

<sub></sub> - essas tags rebaixam o texto. Por exemplo: H2O.
Ficaria: H2O.

e) Sobrescrito
<sup></sup> - essas tags
elevam o texto. Exemplo: 400 m2. Seria: 400 m2.


f) Centralização de texto

<center></center> - outra maneira de centralizar o texto

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

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

a) Alinhamento de
parágrafo
<P align="left">
<P align="right">
<P
align="center">

11. Quebra de linha

<br> - quebra linha. Mas, ao contrário do
parágrafo, não é deixada uma linha em branco antes da próxima.



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

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

14. Imagem


<img> - é a tag necessária para se colocar
uma imagem na página. A tag <img> pode vir acompanhada de diversos
parâmetros:
a) 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.

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

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

d) Borda da
imagem
<img border="tamanhodaborda"> - especifica o tamanho da borda,
em pixels. Os números têm de ser inteiros.

e) Altura em pixels
<img
height="alturadaimagem"> - especifica a altura da imagem, tanto em pixels
como em porcentagem.

f) Largura em pixels
<img
width="larguradaimagem"> - especifica a largura da imagem, tanto em pixels
como em porcentagem.

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

h)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".

15. Hipertexto



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

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

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

d) Link para e-mail
<a href=mailto:

username@provedor.com.br
username@provedor.com.br username@provedor.com.br username@provedor.com.br username@provedor.com.br

Este endereço de
e-mail está protegido contra spam bots, pelo que o JavaScript terá de estar
activado para que possa visualizar o endereço de email


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

16. Tabelas

Inicie uma tabela com: <table
border="largura_da_borda">.
Após isso selecione os campos usando:
<tr><td>Campo1</td><td>Campo2</td> e assim
seguidamente.
Quando acabar de selecionar os campos, finalize os campos com:

</tr>
Depois é só adicionar os items usando:
<tr><td>Item1</td><td>Item2</td></tr> e
depois criando uma nova lista de itens com:
<tr><td>Item1</td><td>Item2</td></tr>
Finalize
a tabela com: </table>


17. Música de Fundo

Para por uma música de fundo adicione o seguinte comando:
<embed src="arquivo.ext" autostart="true"
loop="numero_de_vezes_que_vai_tocar">.






3 comentários: