Front-end Developer, musician, teacher and good-hearted boy ;)

Jul 9, 2016

Conhecendo o HTML

Quando começamos a aprender sobre front-end, a primeira tecnologia que devemos pensar é o HTML. Com o HTML nós damos significado ao nosso conteúdo, podemos inserir imagens, vídeos dentre outros tipos de conteúdo ao nosso site.

O que significa HTML

HTML é uma sigla para HyperText Markup Language. Traduzindo para o português seria algo como Linguagem de marcação para hipertexto.

Hipertexto é o termo que remete a um texto ao qual se agregam outros conjuntos de informação na forma de blocos de textos, palavras, imagens ou sons, cujo acesso se dá através de referências específicas, no meio digital denominadas hiperlinks, ou simplesmente links.
https://pt.wikipedia.org/wiki/Hipertexto

Basicamente, usaremos a linguagem HTML para marcar o conteúdo (Hipertexto).

Títulos

Temos 6 níveis de títulos no HTML, são marcados com as tags h1, h2, h3, h4, h5, h6. A letra H vem da palavra Heading que significa título.

Veja um exemplo com título e subtitulo:

<h1>Título</h1>
<h2>Subtitulo</h2>

Dependendo da complexidade do seu texto, você pode ter os 6 níveis em uma mesma página. Mas isso é bem difícil de acontecer (Nunca precisei).

Parágrafos

Para marcar parágrafos, usaremos a tag p. A letra P vem do inglês paragraph que claramente significa paragrafo.

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac  
 justo vitae leo molestie sollicitudin. Morbi tincidunt sodales  
 magna eget euismod.
</p>

Reparem que o parágrafo fica entre a tag de abertura e a tag de fechamento do parágrafo. Simples não?

Listas

Quando precisamos marcar listas simples no HTML usamos a tag ul, e para marcar os itens dessa lista usamos a tag li. A tag ul vem do inglês unordered list, que traduzindo para o português ficaria lista não ordenada.

Veja um exemplo:

<ul>
  <li>Primeiro item da lista</li>
  <li>Segundo item da lista</li>
  <li>Terceiro item da lista</li>
</ul>

Repare que temos algo diferente no html da lista, as tags li estão dentro da tag ul. Veremos mais disso no próximo exemplo.

Estrutura básica

Para terminar, faremos uma estrutura básica de HTML passo a passo.

<!DOCTYPE html>

A tag Doctype serve para definirmos qual é o tipo do documento que estamos trabalhando, no caso o html na sua ultima versão (html5). Nada pode estar antes dela, nenhuma letra, número, espaço ou linha .

Continuando com a nossa estrutura, teremos a tag html que será a tag pai de todas as outras tags.

<!DOCTYPE html>
<html>
  <!-- aqui vem nosso HTML -->
</html>

Nada de diferente até aqui, certo? Ia me esquecendo, a tag “diferentona” alí é um comentário, comentários servem para dar dicas para quem está lendo o código sobre o que aquele trecho se trata, e não será exibido na tela.

<!DOCTYPE html>
<html>
  <head>
    <!-- A cabeça do nosso html -->
  </head>
</html>

A tag head, é onde colocaremos informações sobre nosso documento, é o que chamamos de metadados. Essas informações serão usadas pelo navegador (chrome, firefox, opera etc.), motores de busca (google, yahoo, bing…), entre outros. Sabendo disso, podemos informar ao navegador qual é o título do nosso documento usando a tag title dentro da tag head.

<!DOCTYPE html>
<html>
  <head>
    <title>Título da nossa página</title>
  </head>
</html>

Mas não seria a tag h1? Não! Observe onde ficará o conteúdo da tag title:

Exemplo de onde ficará o conteúdo da tag title

Continuando com a nossa estrutura, teremos a tag body, já que temos a cabeça do nosso documento, por que não um corpo não é mesmo? No corpo do documento colocamos o conteúdo da nossa página. É nele que colocaremos as tags de títulos, parágrafos, listas etc.

<!DOCTYPE html>
<html>
  <head>
    <title>Título da nossa página</title>
  </head>
  <body>
    <h1>Título da nossa página</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia ratione ullam sapiente ipsa fuga? Aut quam, explicabo, magnam sed fugit repudiandae dolores sunt aspernatur, accusantium accusamus id iure animi eos.
    </p>
  </body>
</html>

Não podemos nos esquecer da meta tag que vai informar para o navegador qual é o conjunto de caracteres que estamos usando no nosso documento. Se não especificarmos, podemos encontrar a página linda desse jeitinho aqui:

Exemplo de texto usando a codificação Ocidental (Windows-1252)

Isso acontece pois o charset que está setado não reconhece os acentos que colocamos. Claro que não queremos ela desse jeito. A codificação padrão que abrange a maior quantidade de caracteres que precisamos é o utf-8. Como ela é uma informação sobre nosso documento, vamos colocar ela dentro da tag head.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Título da nossa página</title>
  </head>
  <body>
    <h1>Título da nossa página</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia ratione ullam sapiente ipsa fuga? Aut quam, explicabo, magnam sed fugit repudiandae dolores sunt aspernatur, accusantium accusamus id iure animi eos.
    </p>
  </body>
</html>

Temos algo diferente, são os atributos html. Repare que usamos a tag meta para especificar o charset que usaremos no documento. A tag meta serve para darmos mais informações ao documento. Para isso colocamos um atributo chamado charset com o valor utf-8. Atributos são formados por chave e valor, e podemos ter mais de um atributo em uma tag separando-os por espaço.

Exemplo:

<tag chave="valor" chave="valor"></tag>

Conclusão

Aprendemos um pouco sobre o html, tags, títulos, parágrafos e listas não ordenadas. Fizemos uma estrutura básica e descobrimos a importância do charset.

Por hoje é só pessoal! ;)