HTML: Introdução#

O significado de "código-fonte" aqui é o mesmo que em programação Python: um arquivo (ou conjunto de arquivos) que o desenvolvedor precisa escrever para construir o produto, mas que o usuário desse produto não precisa ler. Aliás, nem precisa saber que existe.

A diferença é que produtos escritos em Python são programas, algo feito para o computador rodar, enquanto produtos escritos em HTML são documentos, algo feito para o computador mostrar.

Isso significa que o modo de pensar muda totalmente de uma linguagem para outra. Enquanto em Python temos "ordens", por exemplo "imprima o texto 'Hello World'",

print('Hello World')

em HTML temos um texto e "marcadores" em cima desse texto, indicando que certas partes dele possuem significados particulares. Por exemplo, o código HTML

<h1>
    Introdução a HTML
</h1>
<p>
    Agora que já desenvolvemos alguns protótipos de
    baixa fidelidade, vamos usar a <em>linguagem HTML</em>
    para começar a transformar o conjunto de fluxos
    de tela em <em>protótipos digitais</em>.
</p>

é o texto

Introdução a HTML

Agora que já desenvolvemos alguns protótipos de
baixa fidelidade, vamos usar a linguagem HTML
para começar a transformar o conjunto de fluxos
de tela em protótipos digitais.

com os marcadores <h1>, </h1>, <p>, </p>, <em>, </em> em cima, indicando:

• "o que está entre <h1> e </h1> é título;"
• "o que está entre <p> e </p> é parágrafo;"
• "o que está entre <em> e </em> tem ênfase."

Abra um editor de texto, copie e cole o exemplo de código HTML acima e salve como um arquivo chamado exemplo.html. Depois de salvar, abra o mesmo arquivo em seu navegador de internet.

O navegador Chrome mostra esse arquivo como abaixo.

Repare que o texto "Introdução a HTML", que está entre <h1> e </h1>, ficou maior e em negrito, enquanto os textos "linguagem HTML" e "protótipos digitais", que estão entre <em> e </em>, ficaram em itálico. O navegador reconheceu os marcadores e aplicou regras de formatação:

• títulos são maiores e em negrito;
• ênfases são em itálico.

Este é um bom momento para enfatizar um ponto muito importante: essas regras de formatação são do Chrome e não do HTML. Ou seja:

• os marcadores <h1> e </h1> indicam apenas que algo é título, enquanto o navegador é quem estabelece que títulos são maiores e em negrito;
• os marcadores <em> e </em> indicam apenas que algo tem ênfase, enquanto o navegador é quem estabelece que ênfases são em itálico.

E, de fato, esse é o jeito certo de fazer as coisas! No desenvolvimento front-end moderno, um código HTML não tem regras de formatação. O propósito desse código é apenas dar significados a partes do texto. Transformar esses significados em formatações é papel do navegador.

Eu não consigo enfatizar o suficiente o quanto esse ponto é importante. É, talvez, o ponto de desenvolvimento front-end mais importante da disciplina: quando você escreve código HTML, deve pensar sempre em semântica e nunca em visual. Se você está escrevendo HTML pensando "esta parte é maior e em negrito" ou "esta parte é em itálico", você está fazendo errado. Você deve pensar apenas "esta parte é o título" ou "esta parte tem ênfase".

Se você gosta de pensar em visual, não se preocupe: vamos ver nos handouts futuros como mudar as regras de formatação do navegador. Por enquanto, peço que tenha paciência e entenda que código HTML não é lugar para fazer isso.

Se você entendeu o ponto, podemos começar a ver os conceitos básicos.