HTML: Conceitos Básicos#

Vamos começar lembrando os pontos principais da introdução:

um documento HTML é basicamente um texto com marcadores em cima;
esses marcadores atribuem significados a partes do texto;
o navegador de Internet transforma esses significados em formatações;
os marcadores NÃO atribuem formatações diretamente.

Vamos agora ver um exemplo maior. Comece abrindo o exercício abaixo:

Ao abrir o exercício você vai receber vários arquivos, mas você só precisa se preocupar com estes:

um arquivo HTML chamado exemplo.html;
uma pasta chamada img;
uma arquivo de imagem chamado exemplo.png.

Abra o arquivo HTML em dois programas diferentes: um editor de código e um navegador de Internet. Uma maneira de abrir o arquivo no navegador é clicar no nome do arquivo e arrastar para o navegador.

O arquivo HTML possui alguns erros. Ao longo deste handout nós vamos corrigir cada um deles para que todos os testes passem.

Parênteses: plataforma recomendada

O editor de código recomendado para esta disciplina é oVisual Studio Code e o navegador de Internet recomendado para esta disciplina é o Chrome. Ambos estão disponíveis para Windows, macOS e Linux: basta baixar e instalar.

Usar outro editor e/ou outro navegador não é proibido, mas se você fizer isso deve estar ciente das consequências abaixo.

O material da disciplina é baseado na plataforma recomendada. Adaptar esse material para outras plataformas é responsabilidade do aluno. A disciplina nem garante que essa adaptação é sempre possível.
Professores e auxiliares não garantem que o suporte a outras plataformas será tão eficaz e eficiente quanto o suporte à plataforma recomendada.
Dúvidas relacionadas à plataforma recomendada possuem prioridade maior que dúvidas relacionadas a outras plataformas.
Problemas causados pelo uso de outras plataformas não serão aceitos como argumento para justificar atraso ou aumentar nota.

Em outras palavras: se quiser ser "diferentão", deve estar preparado para consequências.

Fazendo uma modificação#

Ao abrir o arquivo HTML no editor, você vai notar um erro grotesco: a grafia da palavra "cenoura" está incorreta.

<h1>
    Bolo de Senoura
</h1>

Abrir no navegador é pior ainda: mais desagradável que uma grafia incorreta é uma grafia incorreta maior e em negrito!

Erro de grafia

Vamos resolver isso! Modifique o código, substituindo S por C.

<h1>
    Bolo de Cenoura
</h1>

Salve o código no editor e atualize o navegador pressionando F5 ou clicando na seta redonda à esquerda da barra de endereço.

Atualizar página

Se tudo der certo, você deve ver a modificação no navegador.

Exercise 1

Parênteses: erros comuns

Reparou que o navegador não mostrou a modificação até ser atualizado? Pois é, temos aqui um gancho para listar três erros muito comuns do desenvolvedor front-end inexperiente (e, para ser sincero, às vezes do desenvolvedor experiente também...):

esquecer de salvar o código no editor;
esquecer de atualizar o navegador;
abrir arquivos diferentes no editor e navegador.

Muitas vezes ficamos um tempão nos perguntando "por que a modificação não está funcionando" até descobrir que cometemos um desses três erros. Acontece! Vale a pena desenvolver o hábito de sempre considerá-los como a primeira possibilidade.

Tags e elementos#

Os marcadores que começam com < e terminam com > são chamados de tags. Quando uma tag começa apenas com o símbolo < seguido de uma palavra, ela é uma tag de abertura. Quando uma tag começa com os símbolos </ seguidos de uma palavra, ela é uma tag de fechamento. Em ambos os casos, a palavra é o nome da tag.

Alguns exemplos do código que você abriu no editor:

<h2> é uma tag de abertura com nome h2;
</h2> é uma tag de fechamento com nome h2;
<h3> é uma tag de abertura com nome h3;
</h3> é uma tag de fechamento com nome h3;
<ul> é uma tag de abertura com nome ul;
</ul> é uma tag de fechamento com nome ul;
<li> é uma tag de abertura com nome li;
</li> é uma tag de fechamento com nome li.

Tags de abertura e fechamento são parecidas com símbolos de "abre e fecha", como parênteses e colchetes: a parte do texto que estiver entre uma tag de abertura e sua tag de fechamento correspondente é considerada "dentro" dessas tags. Chamamos essa parte de conteúdo das tags.

Vamos ver um exemplo do código que você abriu no editor. Na linha 12

<h3>Massa</h3>

temos:

uma tag de abertura <h3>;
sua tag de fechamento correspondente </h3>;
o conteúdo dessas tags, ou seja, o texto Massa.

Esse trio formado por tag de abertura, tag de fechamento e conteúdo é chamado de elemento. Ou seja, um documento escrito em HTML é basicamente um conjunto de um ou mais elementos.

Exercise 2

Answer

Um elemento é formado pela tag de abertura, o conteúdo e a tag de fechamento correspondente.

Exercise 3

Vamos ver agora um exemplo mais complexo do mesmo código. No trecho

<ul>
    <li>1/2 xícara (chá) de óleo</li>
    <li>3 cenouras médias raladas</li>
    <li>4 ovos</li>
    <li>2 xícaras (chá) de açúcar</li>
    <li>2 e 1/2 xícaras (chá) de farinha de trigo</li>
    <li>1 colher (sopa) de fermento em pó</li>
</ul>

temos:

uma tag de abertura <ul>;
sua tag de fechamento correspondente </ul>.

e o conteúdo dessas tags, ou seja, o texto com marcações

<li>1/2 xícara (chá) de óleo</li>
<li>3 cenouras médias raladas</li>
<li>4 ovos</li>
<li>2 xícaras (chá) de açúcar</li>
<li>2 e 1/2 xícaras (chá) de farinha de trigo</li>
<li>1 colher (sopa) de fermento em pó</li>

Sim, o conteúdo de um elemento pode ter outros elementos. Ou seja, o significado que um código HTML dá a partes do texto também tem informações de hierarquia. Além de definir o que é, também define quem está dentro de quem.

Quando um elemento está dentro de outro, chamamos o externo de pai ou contêiner e chamamos o interno de filho. Elementos com o mesmo pai são chamados de irmãos.

Exercise 4

Considere o código abaixo:

<p>Lista de leitura:</p>
<ul>
    <li>O design do dia a dia</li>
    <li>Não me faça pensar</li>
</ul>

Qual das afirmações abaixo está incorreta?

Lista de leitura é o conteúdo de um parágrafo

<li>Não me faça pensar</li> é um elemento

O contêiner ul possui dois elementos filhos

O design do dia a dia é um contêiner

Answer

Um contêiner é um elemento (lembrando: um elemento é composto pelas tags de abertura e fechamento e o conteúdo) externo, ou seja, um elemento que possui outros elementos como seu conteúdo.

Parênteses: fechamento correspondente

Na seção acima, usamos várias vezes a expressão "tag de fechamento correspondente". Mas como o navegador sabe qual é a tag de fechamento correspondente a uma dada tag de abertura? Simples: é a mais próxima dentre as que vem depois e têm mesmo nome.

Por exemplo, no trecho

<h3>Cobertura</h3>
<ul>
    <li>1 colher (sopa) de manteiga</li>
    <li>3 colheres (sopa) de chocolate em pó</li>
    <li>1 xícara (chá) de açúcar</li>
    <li>1 xícara (chá) de leite</li>
</ul>

temos que:

o fechamento correspondente a <h3> só pode ser a única </h3>;
o fechamento correspondente a <ul> só pode ser a única </ul>;
o fechamento correspondente à primeira <li> é a primeira </li>, pois é a a mais próxima dentre as </li> que vem depois;
o fechamento correspondente à segunda <li> é a segunda </li>, pois é a a mais próxima dentre as </li> que vem depois;
o fechamento correspondente à terceira <li> é a terceira </li>, pois é a a mais próxima dentre as </li> que vem depois;
o fechamento correspondente à quarta <li> é a quarta </li>, pois é a a mais próxima dentre as </li> que vem depois.

Em outras palavras: os mesmos critérios de símbolos como parênteses e colchetes.

Atributos e self-closing tags#

Repare agora no trecho abaixo.

<figure>
    <img src="img/exemplo.png" alt="bolo de cenoura">
</figure>

Nesse trecho há uma tag com duas características diferentes:

tem outras coisas além do nome;
não tem tag de fechamento correspondente.

A primeira característica é um exemplo de atributo. Atributos são expressões que podemos escrever em uma tag de abertura para adicionar ou modificar propriedades do elemento. Geralmente, um atributo é escrito na forma CHAVE="VALOR", ou seja, uma string que representa a chave do atributo seguida do símbolo = e de uma string entre aspas duplas que representa o valor do atributo.

Repare que a escolha dos termos "chave" e "valor" não é coincidência: o conjunto de atributos é como um dicionário em Python.

{
    'src': 'img/exemplo.png',
    'alt': 'bolo de cenoura',
}

A segunda característica é uma particularidade de algumas tags. Essas tags, chamadas de self-closing, não têm fechamento porque representam coisas que não são texto, como por exemplo imagens e campos de digitação. Como elas não representam texto, não faz sentido ter fechamento porque não há nada para para escrever "dentro". Uma self-closing tag sozinha já é um elemento.

No caso do trecho, a tag img representa uma imagem. Como imagem não é texto, faz sentido que essa tag não tenha fechamento. Por outro lado, ela precisa do atributo src para saber qual é o arquivo dessa imagem. Também precisa do atributo alt para saber qual é a descrição que deve ser dada para pessoas com deficiência visual. Mencionamos isso na primeira aula, lembram?

Exercise 5

Exercise 6

Answer

A tag img é uma self-closing tag, portanto não precisa de uma tag de fechamento correspondente. O conteúdo do contêiner do item B é um texto Imagem: e uma imagem. Além disso, diferente do Python, as quebras de linha não são obrigatórias. Portanto podemos ter múltiplas tags na mesma linha. O item D não é válido porque o conteúdo dos elementos precisa ser completo. Assim, a tag li deveria ser fechada antes da tag ul.

Se você entendeu esses conceitos, podemos ver os elementos básicos do exemplo.