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:
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.
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>
<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>
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>".
Introdução ao HTML
Introdução à Linguagem HTML
Apostila de HTML
HTML para blogs
