HTML


HTML Básico (se você preferir ler uma versão do texto abaixo em PDF, clique aqui)

HTML - HyperText Markup Language (Linguagem de Formatação de Hipertexto) - é uma codificação padrão para a formatação de páginas da Internet. Utilizando o HTML puro (que pode ser escrito no Bloco de Notas do Windows e depois salvo como "html" para ser lido no navegador) é possível escrever toda uma página para a web.

Os comandos ou instruções de formatação da linguagem HTML são relativamente simples, e embora praticamente ninguém mais construa páginas escrevendo o código (os programas de edição para a web, como o Dreamweaver ou o próprio Word geramno), seu conhecimento é util, pois utilizando os códigos de formatação é possível "incrementar" bastante sites e blogs. Sobretudo quando as ferramentas de edição dos construtores de postagens ou páginas web não possuem recursos relativos a alguns elementos e atributos que podem ser inseridos via codificação.

Além disso, às vezes, é bem mais fácil alterar a posição de elementos (textos, imagens etc.) por meio do "recortar/colar" do código. E a compreensão de uma página web como um suporte aberto a materiais de diferentes procedências - linkados no HTML - também é favorecida.

A linguagem HTML
O aspecto que singulariza a linguagem HTML é o uso de tags (também chamadas de etiquetas ou marcações) que são elementos entre os sinais < e > que indicam algum tipo de formatação. Geralmante as tags aparecem em duplas, uma de abertura e outra de fechamento, neste caso o sinal "/" acompanha a final, como no exemplo, abaixo:

<tag>exemplo<tag>

Ao mesmo tempo, vale notar que as tags podem possuir atributos, que correspondem a certos níveis da formatação que serão aplicados ao elemento (texto, imagem etc.) que estiver entre a tag de abertura e a de fechamento.

<tag atributo1="alguma_coisa" atributo2="outra_coisa">exemplo</tag>


A construção de uma página e as principais marcações

Algumas observações iniciais importantes: 1) ninguém decora TODAS as marcações - ter em mente as principais, como as de formatações de texto, imagens e links já é suficiente para muita coisa; 2) o mais interessante no estudo feito aqui é a compreensão da linguagem; 3) por isso mesmo, abaixo só são indicados algumas das muitas outras marcações existentes. De qualquer modo, ao fim dessa página, são sugeridos alguns sites com mais conteúdo sobre o tema, para quem desejar aprofundar-se e ter como material de consulta; e 4) o HTML não diferencia, na escritura das tags, o uso de letras maiúsculas ou minúsculas, então, tanto faz na construção de uma página ou edição de documento como se digita.

A estrutura básica de uma página HTML consiste no seguinte:

<html> - Indica que o documento é o de um arquivo HTML
<head><title>Título do documento (irá aparecer na barra superior do navegador)</title></head> 
Título do documento (irá aparecer na barra superior do<br /> navegador)
<body> - Inicia a página propriamente dita
Aqui estarão os textos...
imagens...
links...
enfim, todos os elementos da janela principal do navegador, vistos no "corpo" do texto.
</body>- Finaliza o corpo do texto
</html> - Fecha a construção da página


Formatações de texto

Cabe notar que existem dois tipo de formatação para textos e caracteres: a lógica e a física. A visualização tende a ser parecida, no entanto, a diferença é que a segunda opera com valores específicos (por exemplo, o tamanho do texto), enquanto a primeira utiliza instruções que serão interpretadas pelo navegador. Abaixo as principais formatações, respectivamente em formato lógico e físico.

negrito -<strong>texto</strong> ou <b>texto</b>
itálico - <em>texto</em> ou <i>texto</i>
tachado - <strike>texto</strike> ou <s>texto</s>

Agora, só formatação lógica:

tamanho maior <big>texto</big>
tamanho menor - <small>texto</small>
subscrito - <sub>texto</sub>
sobrescrito - <sup>texto</sup>
máquina de escrever - <tt>texto</tt>
sublinhado - <u>texto</u>


Cabeçalhos

Existem 6 níveis de cabeçalho, o primeiro é o maior e depois vai continuamente diminuindo.

<h1>

Cabeçalho 1

</h1>

<h2>

Cabeçalho 2

</h2>

<h3>

Cabeçalho 3

</h3>

<h4>

Cabeçalho 4

</h4>

<h5>
Cabeçalho 5
</h5>

<h6>
Cabeçalho 6
</h6>


Atributos de fonte

Alinhamento
<font align="center">Alinhamento central</font>

À direita
<font align="right">Alinhamento à direita</font>

À esquerda
<font align="left">Alinhamento à esquerda</font>

Cores de fonte
<font color="blue">Texto</font>
<font color="#7CCD7C">Texto</font> - cor em formato hexadecimal, ver tabela aqui.

Tipo da fonte, tamanho e combinação de atributos
<font face="times" size="large" color="green">Texto</font>

Texto animado
As tags <marquee></marquee> permitem fazer com que o texto que aparece na tela tenha um efeito de animação. Ela possui os seguintes atributos:
<marquee behavior=scroll>texto que aparecerá com animação</marquee>
<marquee behavior=slide direction=right>texto que aparecerá com animação</marquee> 
<marquee behavior=scroll direction=left>texto que aparecerá com animação</marquee>

Parágrafos, quebra de linha espaçada e linha horizontal
As tags <p> e </p> indicam um parágrafo que terá uma pequena distância do próximo.

Já a tag <br> (que não tem marcação de fechamento) indica uma linha em branco. E para adicionar uma linha horizontal, basta colocar a tag <hr>, cujo valor em pixels pode ser indicado, como nesse exemplo: <hr size="8">.


Hiperlinks

Os hiperlinks, ou simplesmente links, são feitos com a tag <a href="endereço para onde se vai">Link</a>. O caminho (endereço) pode ser relativo ou absoluto. No primeiro caso, quando ambos os arquivos (âncora, o do link, e do ponto de chegada) estão no mesmo servidor/diretório, basta colocar esse, por exemplo:
"/imagens/pagina_2.html".

Mas, se o ponto de chegada está em outro servidor, deve-se usar o caminho absoluto, ou seja, o endereço completo do link, como: "http://www.blogger.com".

É possível usar uma imagem como link (no caso de um botão, por exemplo), o que será visto a seguir.


Imagens

Quando se faz o upload de uma imagem para o Blogger, ele automaticamente cria a marcação de inserção da mesma, isto é, ele dá o endereço da qual ela será "puxada" para a página html em questão, conforme esta marcação: <img src="localização da imagem/imagem.extensão da mesma">. O atributo "src" é o que contém o endereço, e -- no caso de imagens de outras páginas que sejam inseridas num arquivo -- é nele que o endereço da mesma deve ser colocado. O Blogger também faz isso (a inserção do código), quando se informa que a imagem será colocada a partir de um endereço. A tag da imagem é outra que não possui fechamento.

Outros atributos da imagem são alt, title, width, height, border e align. Abaixo, numa marcação de imagem com múltiplos atributos explica-se o que cada um deles faz.

<img src="imagem" alt="indica um texto que será visto quando a imagem tiver algum problema e não aparecer" title="indica um texto que será visto quando o cursor for colocado sobre a imagem" width="largura da imagem em pixels" height="altura da imagem" align="alinhamento da imagem">


Exemplo com explicação de link em imagem

Abaixo três telas que exemplificam várias coisas faladas aqui, notando-se que as duas primeiras mostram o modo de edição em HTML do blog.

Quanto à inserção de link em imagem, ela é simples, basta colocar entre a imagem as tags do link, por exemplo: <a href="endereço para onde se vai"><img src="foto.jpg"></a>

Porém, deve-se notar que o Blogger já cria um ponto de chegada, que é para uma imagem com a imagem isolada. Assim, deve-se apagar o trecho que existe e colocar o novo endereço: "<a href=novo_endereço>".









Páginas com apostilas e material sobre HTML
Introdução ao HTML
Introdução à Linguagem HTML
Apostila de HTML
HTML para blogs