O que é HTML, afinal de contas?

HTML ou HyperText Markup Language é uma linguagem de marcação,

utilizada para construir a camada visual de páginas web. Sua função é dar
um valor semântico e estruturar todo o conteúdo de um documento. Toda
vez que você abre o seu navegador e acessa algum site, o que você está
vendo na verdade é um punhado de código HTML interpretado pelo browser,
e convertido em formas, cores, gráficos e vídeos. Podemos dizer que o HTML
é a linguagem por detrás de um site, é o que define o conteúdo visualizado
na tela. Com HTML podemos definir o que é um conteúdo: parágrafos, listas,
links, imagens, vídeos, tabelas, colunas etc. Toda linguagem de programação
web interage com HTML, por esses motivos todo profissional que se preza
(redatores, designers, programadores etc.) conhece bem a sua sintaxe. Não é
exagero dizer que o HTML é a base de tudo, o ponto inicial da sua carreira
futura.

Ok, entendi que HTML é importante demais! Mas… como funciona?

Trabalhar com HTML é bem simples, como vocês verão nos próximos dias.
Essa linguagem de marcação baseia-se em etiquetas com valor semântica,
englobando trechos de conteúdo dotando-os de sentido e valor. Essas
etiquetas são chamadas <strong>tags</strong>. Uma tag nada mais é do
que um comando HTML com um ponto inicial (abertura) e um ponto final
(fechamento). Quando digitamos um texto no Word, por exemplo, para criar
um parágrafo, simplesmente apertamos a tecla ENTER. Em HTML não é tão
simples assim, é preciso especificar via código que queremos um parágrafo
em dado lugar; precisamos também dizer onde começa e onde termina esse
parágrafo. Veja abaixo como funciona:

<paragrafo>Conteúdo do parágrafo 1…</paragrafo>

Conteúdo fora do parágrafo…

Perceberam que um pedaço do texto está entre <paragrafo></paragrafo>?

Esse texto formará um parágrafo, enquanto todo o resto do conteúdo ficará
de fora. Tá, mas por que os símbolos <> e </>. É o seguinte: toda tag possui
a seguinte sintaxe – <nome_da_tag>… Conteúdo a ser etiquetado…
</nome_da_tag>, onde delimitamos um início para tag (<>) e um fim (</>).
Chamamos isso de tag de abertura e tag de fechamento. O HTML possui
dezenas de tags com nomes diferentes. A nomenclatura das tags é algo bem
fácil de lidar, pois os nomes sempre tem a ver com a funcionalidade do
comando. Por exemplo: <p></p>são tags de parágrafo; <table></table>
correspondem a tabelas; <form></form> corresponde a formulários, e por aí
vai.

Eu ouvi falar de um tal XHMTL… Que raios é isso? É HTML também?

No princípio era o caos… Desenvolver um site há uns 10 ou 15 anos era um

inferno. Não tínhamos padronização, folhas de estilo em cascata (vamos
estudar isso), cada navegador interpretava o mundo do seu jeito, são tempos
ruins que devemos esquecer. Naquele período não havia regulamentação e
padronização de desenvolvimento, e por conseqüência o próprio HTML era
meio zoneado. Usava-se HTML para tudo: marcação de conteúdo (sua
finalidade real), estilização, diagramação etc. E conforme a web foi
evoluindo, novas tecnologias surgiram e o HTML velho de guerra apresentou
uma série de limitações frente às novas necessidades. Por esse motivo
refizeram o HTML de acordo com o padrão XML, uma linguagem de marcação
rígida, compatível com qualquer sistema: surgiu então o XHTML (XML +
HTML). O novo formato apresentava a rigidez sintática do XML, assim como
sua compatibilidade, e a linguagem ganhava novos horizontes. XHTML então
é uma versão reformulado do velho HTML, dentro do padrão XML de
marcação. É uma melhoria. Outra vantagem a ser assinalada: marcações
XHTML são compatíveis com aplicações XML (usadas a torto e direito nos
sistemas web modernos).

Não se preocupem: aqui aprenderemos marcação XHTML, que é muito

parecido com o velho e bom HTML de guerra.

Ainda não estou satisfeito… Quais são as reais diferenças entre HTML e
XHTML?

Ok, caro estudante… Você tem que perguntar mesmo! O HTML por não ser
padronizado, admitia uma série de falhas e inconsistências. O XHTML é muito
rígido, e não deixa passar nenhum erro. Por esse motivo somos obrigados a
ter atenção com algumas regrinhas básicas:

Documentos em XHTML devem ser bem formatados

Os navegadores tentam resolver erros e inconsistências em páginas HTML, e
cada um faz alterações conforme sua lógica interna. Nem é preciso dizer que
isso não pode dar certo… Em XHTML não são permitidos erros de sintaxe,
tags sem fechamento, aninhamento inconsistente etc.

Tags devem ser escritas em letras minúsculas

XHTML é o que chamamos de linguagem case-sensitive, ou seja: diferencia

letras maiúsculas de minúsculas. Em uma linguagem case-sensitive “BRASIL”
é diferente de “brasil”, apesar da grafia ser a mesma, pois o tipo de caixa
(alta e baixa) varia. Todas as tags e atributos XHTML usam letras minúsculas,
em resumo: nada de escrever <P></P>…

As tags devem ser aninhadas corretamente

Uma coisa importante sobre o uso de tags em HTML: se você usa várias tags
aninhadas (uma dentro da outra) na sua marcação, é importante respeitar a
ordem de abertura e fechamento de tags – a primeira tag a ser aberta é a
última a ser fechada, a segunda tag é a penúltima e por aí vai…

OK – <p><strong>Texto</strong></p>

ERRADO – <p><strong>Texto</p></strong>

É obrigatório o uso de tags de fechamento

No HTML algumas tags como <p>, <br> e <li> dispensam o uso da tag de
fechamento. Legal, mas isso no HTML. O padrão XML (do qual o XHTML é
derivado) diz claramente: TODA TAG OBRIGATORIAMENTE DEVE SER
FECHADA. Como diz aquele comentarista esportivo: “a regra é clara”…
Existem algumas tags que não possuem par de fechamento, são o que
chamamos de elementos vazios. Esse tipo de elemento precisa ser fechado
na própria tag de abertura, e sua estrutura é a seguinte: <nome_da_tag />

Veja algumas tags que podem ser fechadas no comando de abertura:

<br /> – Força quebra de linha

<img /> – Insere uma imagem

<input /> – Coloca um campo de formulário (entrada de dados)

Tá… Você me convenceu: quando começamos a brincar com HTML?

Bom, chega de papo introdutório e vamos por a mão na massa. Todo mundo
aqui já entendeu o que são tags, como elas funcionam e para o que servem.
Para fechar esse post vamos conhecer as primeiras tags HTML, formando o
que chamamos de estrutura básica de uma página web. O
browser/navegador (Internet Explorer, Firefox, Opera, Safari etc.) é um
dispositivo que usamos para acessar a internet e navegar pela web a fora,
ele é capaz de interpretar código HTML, CSS, JavaScript, applets Java, XML e
mais algumas coisas. Os códigos são interpretados e juntos geram as páginas
web que visitamos. Mas precisamos ajudar o navegador a diferenciar código
HTML de CSS ou qualquer outra linguagem. Por isso temos tags específicas
para marcar cada tipo de código. Por exemplo, para criar uma página web
precisamos dizer ao browser qual é a linguagem usada, e se for um
documento HTML/XHTML iremos utilizar a tag <html></html>. Toda a página
deve ficar entre essas tags, e o navegador não irá considerar qualquer código
fora dessas etiquetas. A idéia é mais ou menos essa:

<html>

Aqui entra todo o conteúdo da página web…

</html>

Todo documento HTML é dividido em duas partes: cabeçalho e corpo. No

cabeçalho colocamos todas as informações referentes a página, mas que não
serão exibidas na tela do usuário; no corpo colocamos o site propriamente
dito, ou seja todo o conteúdo a ser visualizado no navegador do usuário. Essa
divisão entre cabeçalho e corpo é efetivada pelo uso das tags
<head></head> e <body></body>. Nossa página ficará da seguinte forma:

<html>

<head>

Aqui entram informações sobre o documento, mas que não serão

visualizadas pelo usuário

</head>

<body>

Aqui entra todo o conteúdo do documento, ou seja a página propriamente

dita…

</body>

</html>

O corpo da página é a parte mais fácil de compreender. Todos já perceberam

que os parágrafos, imagens, tabelas, listas, vídeos, formulários e qualquer
outro tipo de conteúdo do site, ficarão dentro das tags <body></body>. Mas
e o cabeçalho?

“Informações sobre o documento que não serão visualizadas pelo usuário” é

um tanto vago e abstrato para a maioria de vocês. Na verdade não adianta
me prolongar em explicações sobre o tipo de conteúdo do cabeçalho, pois
vocês precisam pegar alguma experiência primeiro. Só para exemplificar:
dentro do cabeçalho colocamos o título da página, aquele texto no topo do
seu navegador (na barra de títulos); meta-tags – informações gerais sobre o
documento como o autor, idioma, padrão de codificação, palavras-chave
(termos que indiquem do que trata o conteúdo, por muito tempo foram o
ponto alto da indexação de conteúdo no Google, sendo hoje ainda um fator
relevante) etc.; links para outros documentos (arquivos com programação
JavaScript, comandos de diagramação e estilização CSS etc.) etc. Prometo
que conforme você prosseguir em seus estudos, tudo isso fará mais sentido e
será mais fácil de entender.

Por enquanto vejamos como colocar um título no documento. Para inserir um

título em sua página web, basta adicionar dentro cabeçalho
(<head></head>) a tag TITLE (<title></title>). O conteúdo entre as tags
aparecerá na barra de títulos (barra azul no topo do navegador) do seu
browser. Veja como fica a nossa página:

1
2

<html>

<head>

<title>Minha primeira página web</title>

</head>

<body>

Conteúdo da minha primeira página web...

</body>

</html>

Para visualizar esse arquivo faça o seguinte: abra o bloco de notas; escreva a
estrutura HTML acima (sinta-se à vontade para fazer suas modificações
livremente); salve o arquivo com o nome minhaPrimeiraPagina, e ao invés da
extensão .txt, troque por .html (isso é undamental, pois se você não alterar a
extensão para .html, a página não será visualizada); agora dê um duplo
clique em cima do arquivo que você acabou de salvar e… voi lá, você está
visualizando sua primeira página HTML.

Bem pessoal, por hoje é só. No próximo post vamos conhecer novas tags, e
aprender a criar títulos, parágrafos, quebras de linha e a formatar texto
(negrito, itálico, sublinhado etc.). Até breve.

Forte abraço,

Diego.

PS: Já que o blog tem ajudado muita gente e tudo mais, eu me comprometi a
atualizá-lo diariamente (ou quase). Mas, como eu tenho uma produtora web
pra cuidar e dou aulas no SENAC, fica meio complicado encontrar tempo.
Então vamos oficializar: eu vou sempre postar os artigos e tutoriais à noite ou
de madrugada. Durante o dia não dá mesmo.