16 de março de 2009

Dicas de html, para quem está começando a blogar

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.

A linguagem HTML é composta por comandos que indicam ao navegador (browser) de como devem ser lidos os textos, por isso para cada arquivo que se inicia, um TAG deve indicar as intruções para o navegador. Esclarecendo, os TAGS são comandos que informam ao navegador determinada ação que ele deve executar, como comparação, é como se fossem os comandos Arquivos, Editar e Formatar etc.; do Word.

Todo documento HTML é composto de Tags. Este é o nome dados aos comandos HTML. Você deve começar sua página com a tag <HTML>, na primeira linha do código, e terminar com </HTML> na última linha do documento. Perceba que a barra "/" sinaliza o fechamento da tag. Este fechamento é necessário para que ela possa ser interpretada pelo navegador. A estrutura das tags é formada por:

<xxx>: Este é o inicio da tag;*
</xxx>: Este é o fechamento da tag para que ela possa funcionar.**

* xxx é apenas uma representação de uma tag, não é uma tag HTML.
** Algumas tags não necessitam do fechamento. Neste caso você será avisado.

2. Formatando texto

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.

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>

CENTRALIZAÇÃO DE TEXTO:
<center></center> - outra maneira de centralizar o texto

TEXTO EM NEGRITO
Digite <b> para abrir o código.
E o seu texto em seguida.
Feche com o </b>
Desta forma, <b>seu texto</b> ficará assim.

<b>texto</b> - tudo o que for escrito entre essas duas tags virá em negrito
TEXTO EM ITÁLICO
Digite <i> para abrir o código.
O seu texto em seguida.
E feche com o </i>
Assim, o <i>seu texto</i> ficará desta forma.

<I>texto</I> - tudo o que for escrito entre essas duas tags virá em itálico
SUBLINHADO
<u> primeiro.
O texto em seguida.
</u> pra fechar.
<u> Viu como é simples? </u>
Pronto, seu texto ficará assim: Viu como é simples?

<U> texto </U> - tudo o que for escrito entre essas duas tags virá sublinhado

SUBSCRITO
<sub> texto </sub> - essas tags rebaixam o texto. Por exemplo: H2O. Ficaria: H2O.
SOBRESCRITO
<sup> texto </sup> - essas tags elevam o texto. Exemplo: 400 m2. Seria: 400 m2.

TEXTO RISCADO
<s> Texto riscado </s>
Cuidado para não confundir esse "s" com o "u". Lembre-se que "U", vem da palavra inglesa "Underline", o mesmo que "sublinhar".

ATENÇÃO:

Você pode formatar o texto, colocando-o em negrito, itálico, sublinhado e centralizado. Os códigos podem ser escritos uns sobre os outros, acumulando seus efeitos, como por exemplo:
<CENTER><B><U>Teste 1</U></B></CENTER>
O resultado é:

Teste 1

QUEBRA DE LINHA

<br> - quebra linha, isto é, pula para a linha de baixo. Ao contrário do parágrafo, não é deixada uma linha em branco antes da próxima.

<p> Muda a linha e deixa uma em branco.

Quer ver como funciona? Dê uma olhada nos códigos a seguir:

<p>Um dia, uma pequena abertura apareceu num casulo; um homem sentou e observou a borboleta por várias horas, enquanto ela se esforçava para fazer com que seu corpo passasse através daquele pequeno buraco.<br> Então, pareceu que ela havia parado de fazer qualquer progresso. <br> Parecia que ela tinha ido o mais longe que podia e não conseguia ir mais.</p>
<p>O homem decidiu ajudar a borboleta: ele pegou uma tesoura e cortou o restante do casulo.<br> A borboleta então saiu facilmente.<p>

Quando você for ler, o texto ficará assim:

Um dia, uma pequena abertura apareceu num casulo; um homem sentou e observou a borboleta por várias horas, enquanto ela se esforçava para fazer com que seu corpo passasse através daquele pequeno buraco.
Então, pareceu que ela havia parado de fazer qualquer progresso.
Parecia que ela tinha ido o mais longe que podia e não conseguia ir mais.

O homem decidiu ajudar a borboleta: ele pegou uma tesoura e cortou o restante do casulo.
A borboleta então saiu facilmente.

3. Formatando fonte

FORMATAÇÃO DE FONTE:

Tag <FONT>
- Este tipo de tag é a mais usada, pois você pode definir facilmente o tamanho do texto e fonte que você deseja, e personalizar ainda mais a sua página. A tag é <FONT>, e dentro dela você pode definir vários parâmetros, como cor, tamanho e tipo de letra. Veja agora como usar as tags de fontes:
- Atributo FACE
- FACE: Uma evolução que permite a escolha da fonte (tipo de letra) para os textos, a tag é feita assim:
<FONT FACE=fonte_da_letra>Texto</FONT>
Exemplo:
<FONT FACE=Times>Fonte Times New Roman </FONT>
Fonte Times New Roman
<FONT FACE=Arial>Fonte Arial </FONT>
Fonte Arial
<FONT FACE=Courier>Fonte Courier New </FONT>
Fonte Courier New
- Atributo COLOR e SIZE
- COLOR e SIZE:
Atributos cor e tamanho:
<font size="3"> A palavra terá o tamanho 3</font>
A palavra terá o tamanho 3
<font color="red"> A palavra terá a cor vermelha </font>
A palavra terá a cor vermelha.
Podemos também combinar as tags acima:
<font face="Arial" size="2" color="red">Palavra com tamanho 3 e em vermelho </font>
O resultado final será:
Palavra com tamanho 3 e em vermelho
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.

CORES NO TEXTO
Que tal mudar as cores da fonte em alguns textos? Pra dar destaque, para deixar mais bonito, enfim. Onde usar é uma opção sua.
Mas vamos lhe ensinar como.
<FONT COLOR = "#FF0000">Um texto vermelho. </FONT>
Resultado: um texto vermelho.
<FONT COLOR = "#0000FF"> Texto azul </FONT>.
Você pode substituir as cores, trocando o código "#0000FF" (azul) pelo "#FF0000" (vermelho), por exemplo. Estes são os códigos mais comuns, mas você encontra vários na internet:

4. CÓDIGO DE CORES:

Azul =“#0000ff#”

Verde =“#008000#”

Amarelo =“#ffff00 #”

Vermelho =“#ff0000#”

Rosa =“#ff00ff#”

Branco =“#ffffff#”

Preto =“#000000#”

5. PARÁGRAFOS:

- Tag <P> - Parágrafos:
Em HTML são necessários comandos para definir parágrafos. Não basta você simplesmente pressionar "ENTER" para que a linha vá para baixo, como em editores de texto comuns. Você terá que colocar uma tag para um parágrafo ou para uma linha nova.
Para fazer um parágrafo novo, basta colocar a tag <P>, deste jeito:
Parágrafo 1<P>Parágrafo 2.
O resultado será este:

Parágrafo 1
Parágrafo 2

- Tag <BR> - Linhas
Como você pode ver, o navegador mesmo faz um parágrafo novo cada vez que você coloca esta tag. Caso você queira simplesmente mudar de linha, ao invés de mudar de parágrafo, coloque a tag <BR>. Por exemplo, escreva:
Parágrafo 1<BR>Linha 1<P>Parágrafo 2<BR>Linha 2.
O resultado será este:

Parágrafo 1
Linha 1
Parágrafo 2
Linha 2

<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.
ALINHAMENTO DE PARÁGRAFO: Os parágrafos também podem ter atributos para o alinhamento dos textos. Basta apenas incluir depois do "P" o parâmetro "align=tipo de alinhamento". Os atributos são:

<P align="left">
<P align="right">
<P align="center">

- Left: Alinhamento à esquerda
- Rigth: Alinhamento à direita
- Center: Centralizado
- Justify: Texto justificado (Só funciona em navegadores versão 4 ou superior)
Para incluir um destes atributos é simples. Veja os exemplos:

<p align="left">Texto alinhado à esquerda</p>

<p align="right">Texto alinhado à direita</p>

<p align="center">Texto centralizado</p>

<p align="justify">Texto justificado</p>

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

6. 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
<img height="alturadaimagem"> - especifica a altura da imagem, tanto em pixels como em porcentagem.
LARGURA
<img width="larguradaimagem"> - especifica a largura da imagem, tanto em pixels como em porcentagem.

TAMANHO DA IMAGEM
Imagem no tamanho original:
<img src= "http://ajudinhainformatica.blogspot.com/" alt= "Texto aqui">

Imagem ampliada:
<img src= "http://ajudinhainformatica.blogspot.com/" width= "226" height="170" alt= "Coloca qualquer coisa aqui, amigão">
Imagem reduzida
<img src= "http://ajudinhainformatica.blogspot.com/" width= "82" height="62" alt= "Ah, o comando ALT. Tão simples!">
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".

INSERINDO IMAGENS NO SEU BLOG
Esta dica foi criada para lhe dar uma noção de como é o procedimento.
<img src="http://ajudinhainformatica.blogspot.com/">
Prontinho. É só trocar o http://ajudinhainformatica.blogspot.com/pelo endereço da imagem que você deseja utilizar.
Esse código pode ser usado tanto nos posts quanto no template do site.

E que tal colocar um texto nesta imagem? Funciona assim: Quando alguém colocar a seta do mouse em cima da figura, aparecerá um texto sobre ela.
Vamos ensinar como fazer e depois mostrar o resultado.
<img src="http://site.com.br/imagem.gif" alt="Seu texto aqui">

ALINHAMENTO
Para colocar o texto ao lado da imagem.
<img src="http://ajudinhainformatica.blogspot.com/" alt="Tanto faz" align="top">Texto
ao lado.
Texto ao lado, na parte central.
<img src="http://ajudinhainformatica.blogspot.com/" alt="Tanto faz" align="middle" >Texto
no meio.
Texto ao lado da imagem, embaixo.
<img src="http://ajudinhainformatica.blogspot.com/" alt="Tanto faz" align="bottom" > Texto
em baixo
Imagem alinhada à esquerda do texto.
<img src="http://ajudinhainformatica.blogspot.com/" alt="Tanto faz" align="left" > Imagem alinhada a esquerda do texto.

Quando se usa o parametro ALIGN=LEFT, pode-se ter mais de uma linha de texto ao lado da imagem, o que não acontece com
ALIGN=TOP ou MIDDLE
Imagem alinhada à direita.
<img src="http://ajudinhainformatica.blogspot.com/" alt="Tanto faz"> Imagem alinhada à direita do texto. Quando se usa o parametro ALIGN=RIGHT, pode-se ter mais de uma linha de texto ao lado da imagem, o que não acontece com
ALIGN=TOP ou MIDDLE

7. 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 Ajudinha Informatica na sua página, escreva:

<a href=http://ajudinhainformatica.blogspot.com/>Ajudinha informatica</a>

Um visitante na sua página que clicar sobre o link Ajudinha Informatica será levado à página principal do site.
REFERÊNCIA DE HIPERTEXTO COM IMAGEM :

<a href=http://ajudinhainformatica.blogspot.com/><img src="http://ajudinhainformatica.blogspot.com/"></a>

- neste caso, em vez de colocar o link em um texto, você estará colocando o link em uma imagem.
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.

ABRIR LINK EM NOVA JANELA:

<a href="http://ajudinhainformatica.blogspot.com/" target="_blank">nome do link</a>

Para fazer com que os sites que você linka abram em outra janela, basta acrescentar o target="_blank" depois do endereço.

8.Comentários

<!-- Comentários --> - Quando se quer incluir um comentário no código HTML sem que ele apareça na página, usa-se esta tag. O browser a ignora e a sua utilidade consiste na facilidade de localizar partes específicas do código.


Comentários
0 Comentários

Nenhum comentário:

Postar um comentário

Gostou desta dica? Divulgue para seus amigos. Envie suas sugestões. Nos envie informações para melhorar ou ampliar esta dica. Esperamos sua participação.