Este é um post para aquelas pessoas que estão começando a estudar web design e programação. O mais importante neste início é compreender de maneira clara os fundamentos da internet, pois eles serão a base de tudo o que virá pela frente. Entendê-los bem é fundamental para que possam se desenvolver e continuar aprendendo. Para começar vamos falar sobre o HTML, a linguagem predominante na web.
O que é o HTML?
HTML é um acrônimo que significa HyperText Markup Language (em português: Linguagem de Marcação de Hipertexto). Ou seja, o HTML é uma linguagem de marcação.
Como assim “marcação”?
Isso mesmo, marcação. O HTML é o responsável por “etiquetar” o conteúdo de uma página. Ela marca o que é um parágrafo, o que é uma imagem, o que é uma tabela, e assim por diante.
E como esses conteúdos são marcados?
O HTML usa tags para etiquetar os elementos (não é à toa que ‘tag’ significa ‘etiqueta’ em inglês). Uma tag HTML é sempre escrita começando com o sinal de menor (<) e terminando com o sinal de maior (>). Por exemplo, a tag que marca um parágrafo é a <p>. A que marca uma tabela é a <table>. E a que marca um título é a <h1>. Vamos à um exemplo prático:
<h1>Titulo de uma notícia qualquer</h1> <p>Primeiro parágrafo da notícia com as informações clássicas de onde, quando, quem, porque e como.</p>
Veja que usei a tag <h1> para marcar o meu título da seguinte forma: abri a tag, escrevendo <h1>, coloquei o conteúdo do título, e então fechei a tag escrevendo-a novamente com uma barra (/) logo depois do sinal (<). Assim eu mostro onde o meu título começa e onde ele termina. Logo abaixo do título vem um parágrafo que funciona exatamente da mesma forma: a tag é a aberta (<p>), coloco o conteúdo do parágrafo, e fecho a tag </p>. Dessa forma indico exatamente onde começam e terminam os meus elementos.
Ao escrever uma página inteira usamos muitas outras tags, além de escrever tags dentro de outras tags. Sim, tags dentro de outras tags. Veja:
<body> <h1>Título da página</h1> <p>Meu bom e velho parágrafo com um</p> </body>
Nesse exemplo, a primeira tag a ser aberta é a <body> (corpo da página), então colocamos um título <h1> e um parágrafo <p> e só depois fechamos a tag <body>. Ou seja, as tags <h1> e <p> estão ‘dentro’ da tag <body>.
Além de marcar o conteúdo, as tags também podem ter propriedades responsáveis por nos dar mais informações sobre aquele pedaço da página:
<form method=”post” id=”meuFormulario”></form>
No exemplo acima criamos um formulário usando a tag <form>. Dentro dela colocamos duas propriedades deste formulário: o método como as informações serão enviadas e o id do formulário.
HTML semântico
Muitas vezes você verá menções sobre a semântica aplicada ao HTML. Simplificando o conceito, podemos dizer que para escrever HTML semântico basta usar as tags certas para os conteúdos certos. Por exemplo, vamos supor que sua página terá uma lista dos 10 produtos mais vendidos. Existem tags específicas para isso: a tag de lista ordenada <ol> e a tag para cada item dentro da lista <li>. Então, use-as! Não faça com vários <p>’s, um abaixo do outro. Visualmente pode ficar ok, mas estará incorreto semanticamente.
HTML = conteúdo
O seu arquivo HTML deve conter todas as informações da página. Todos os dados e sua estrutura. Já a forma de cada um dos seus elementos deve ficar fora do HTML. Ou seja: cores, larguras, posicionamento, imagens de fundo, tipos de fonte, tudo isso não deve estar no HTML e sim no CSS, um arquivo responsável apenas por isso.
Claro que este foi um “resumo resumido” e é possível escrever mais 1000 posts como esse sobre HTML sem esgotar todas as suas características, história, evolução, etc. Mas já é um bom início para quem está começando agora a se interessar pelo assunto. Abraço.
