Pesquisa de site

Uma introdução suave ao HTML

Aprenda a linguagem de marcação da web.

Sinto-me confiante em afirmar que HTML é a linguagem de marcação mais usada de todos os tempos. Embora existam outras linguagens de marcação, incluindo nroff e groff, LaTeX e Markdown, nenhuma outra linguagem de marcação é tão difundida quanto a Hyper Text Markup Language. HTML é a linguagem de fato da Web. Implementada pela primeira vez em navegadores da web em 1994, a linguagem continua a evoluir. No entanto, os princípios básicos do HTML permanecem os mesmos.

Se você está apenas começando em HTML, gostaria de oferecer esta introdução suave ao aprendizado de HTML. Eu me concentro nos fundamentos do HTML para construir uma compreensão básica de como o HTML funciona. Você pode usar isso como ponto de partida para aprender mais sobre HTML.

Colete palavras para preencher um parágrafo

Vamos começar com uma compreensão básica de HTML e como aplicativos clientes, como navegadores da Web, exibem documentos HTML. Basicamente, o HTML coleta palavras em um arquivo e preenche um parágrafo. Isso significa que se você não adicionar instruções (chamadas de marcação) a um arquivo HTML e apenas deixá-lo como texto simples, um navegador da Web transformará todo esse texto em um único parágrafo.

Comece com este texto de exemplo, salvo em um arquivo de texto simples chamado index.html. Este é um parágrafo da antiga história da King's Toaster, uma fábula da Internet sobre como você pode construir uma torradeira a partir de um microcontrolador:

The engineer replied,

"Using a four-bit microcontroller, I would write a simple
program that reads the darkness knob and quantizes its
position to one of 16 shades of darkness, from snow white
to coal black.

The program would use that darkness level as the index to
a 16-element table of initial timer values.

Then it would turn on the heating elements and start the
timer with the initial value selected from the table.

At the end of the time delay, it would turn off the heat
and pop up the toast.

Come back next week, and I'll show you a working
prototype."

Você pode colocar esse arquivo em um servidor web e acessá-lo como faria com qualquer site, ou pode salvá-lo em seu disco local e abri-lo diretamente em um navegador web. Como você coloca o arquivo no navegador da web realmente não importa. Mas você deve nomear o arquivo com uma extensão .html, que os navegadores reconhecem por padrão como um arquivo HTML.

Neste caso, escrevi o arquivo em linhas separadas. Também adicionei algumas linhas em branco para demonstrar que o HTML não se importa com espaços em branco extras. Esse espaço extra pode ajudar os humanos a ler o código HTML, mas o navegador da web o trata apenas como um bloco por padrão. Visualizado em um navegador da web, este arquivo se parece com isto:

(Jim Hall, CC BY-SA 4.0)

Elementos embutidos e de bloco

No centro do HTML está o conceito de elementos inline e block. Você pode pensar nos elementos de bloco como sempre preenchendo um retângulo. Elementos embutidos seguem apenas o texto embutido.

O elemento básico do bloco é chamado de divisão e usa a tag <div>. O elemento embutido básico é o span, com a tag <span>. A maioria das tags HTML são algum tipo de elemento de bloco ou elemento embutido, então ajuda começar apenas com esses dois para entender como eles funcionam.

Adicione algumas tags <div> e <span> ao seu documento HTML para ver como são os elementos de bloco e inline:

<div>
The engineer replied,

"Using a four-bit microcontroller, I would write a simple
program that reads the darkness knob and quantizes its
position to one of 16 shades of darkness, from snow white
to coal black.

<span>
The program would use that darkness level as the index to
a 16-element table of initial timer values.
</span>

Then it would turn on the heating elements and start the
timer with the initial value selected from the table.

At the end of the time delay, it would turn off the heat
and pop up the toast.

Come back next week, and I'll show you a working
prototype."
</div>

Adicionei um elemento de bloco <div> ao redor de todo o parágrafo e um <span> ao redor de apenas uma frase. Observe que quando inicio um elemento HTML como <div> ou <span>, preciso fornecer sua tag de fechamento correspondente, como

e . A maioria dos elementos HTML são formados assim, com tags de abertura e fechamento.

O navegador da Web usa essas tags para exibir conteúdo HTML de uma determinada maneira, mas como <div> e <span> não definem nenhuma formatação especial por si só, você não consegue ver que alguma coisa mudou. Seu parágrafo de amostra parece o mesmo de antes:

(Jim Hall, CC BY-SA 4.0)

Você pode incluir estilo direto nessas tags com uma instrução de estilo, para poder ver como o bloco e os elementos inline se comportam. Para destacar os limites de cada elemento, vamos usar um fundo azul claro para o bloco <div> e um fundo rosa para o <span>:

<div style="background-color:lightblue">
The engineer replied,

"Using a four-bit microcontroller, I would write a simple
program that reads the darkness knob and quantizes its
position to one of 16 shades of darkness, from snow white
to coal black.

<span style="background-color:pink">
The program would use that darkness level as the index to
a 16-element table of initial timer values.
</span>

Then it would turn on the heating elements and start the
timer with the initial value selected from the table.

At the end of the time delay, it would turn off the heat
and pop up the toast.

Come back next week, and I'll show you a working
prototype."
</div>

Com essas alterações, todo o parágrafo fica com fundo azul claro. O elemento do bloco <div> é um retângulo, então o azul preenche até mesmo o espaço vazio após o término da última frase. Enquanto isso, a segunda frase tem fundo rosa. Este destaque segue a frase porque <span> é um elemento embutido.

(Jim Hall, CC BY-SA 4.0)

A maioria dos elementos HTML são em bloco ou embutidos. A única diferença é que esses outros elementos possuem alguns estilos padrão, dependendo de quais sejam. Por exemplo, <p> é um elemento de bloco que possui espaço extra acima e abaixo do bloco. As tags de título, <h1> até <h6>, também são elementos de bloco definidos em diferentes tamanhos de fonte e estilos de texto, como itálico e negrito. A tag <strong> é um elemento embutido que exibe texto em negrito. Da mesma forma, <em> também é um elemento embutido que define o texto em estilo itálico.

Finalizando uma página HTML

Alguns elementos HTML são necessários. Embora o arquivo HTML de amostra que você usou seja exibido corretamente em qualquer navegador da Web, ele não é tecnicamente uma página HTML correta. Existem alguns elementos que você precisa adicionar:

Todo documento HTML deve fornecer uma declaração de tipo de documento. Use a tag única na primeira linha do arquivo HTML para definir um documento HTML. O padrão HTML também espera que você envolva o texto do documento em dois elementos de bloco: <html> para definir a página inteira e <body> para definir o corpo do documento.

<!DOCTYPE html>
<html>
<body>
<div style="background-color:lightblue">
The engineer replied,
...
</div>
</body>
</html>

Documentos HTML também precisam de um bloco <head> antes do <body> que fornece meta informações sobre a página. A única meta informação necessária é o título do documento, definido pelo elemento <title>:

<!DOCTYPE html>
<html>
<head>
<title>The King's Toaster</title>
</head>
<body>
<div style="background-color:lightblue">
The engineer replied,

"Using a four-bit microcontroller, I would write a simple
program that reads the darkness knob and quantizes its
position to one of 16 shades of darkness, from snow white
to coal black.

<span style="background-color:pink">
The program would use that darkness level as the index to
a 16-element table of initial timer values.
</span>

Then it would turn on the heating elements and start the
timer with the initial value selected from the table.

At the end of the time delay, it would turn off the heat
and pop up the toast.

Come back next week, and I'll show you a working
prototype."
</div>
</body>
</html>

As tags de suporte como <html>, <head> e <body> não alteram a forma como a página HTML aparece em um navegador da web, mas são necessários para um documento HTML tecnicamente correto:

(Jim Hall, CC BY-SA 4.0)

Esta introdução suave ao HTML fornece apenas o essencial do HTML, mas agora que você entende os elementos de bloco e embutidos, você está no caminho certo para aprender como escrever documentos HTML usando outras tags HTML.

Artigos relacionados: