Skip to main content

Hypertext Markup Language (HTML) / Linguagem de Marcação de Hipertexto

TL;DR

HTML (Hypertext markup Language) é uma linguagem usada para criar páginas web. Algumas páginas podem ser escritas diretamente em HTML, enquanto outras podem usar construtores de páginas ou outras ferramentas para criar páginas web que também produzem saídas HTML, que por sua vez podem ser lidas pelos navegadores.

O que significa HTML?

HTML significa Hypertext Markup Language e é a linguagem usada para criar páginas da web. Ela usa markups para definir e estilizar elementos. Por exemplo, ele pode definir fontes, cores, posição, links, etc. Mesmo que a maioria dos construtores de websites não escrevam diretamente em HTML, as saídas finais que são lidas e interpretadas pelos navegadores web estão em formato HTML. É por isso que, ao clicar com o botão direito em qualquer página web e pressionar "view page source", a primeira linha de texto na janela resultante deve ser <!doctype html>.

Qual é a estrutura de uma página HTML?

Embora as estruturas possam variar, alguns dos elementos que você deve encontrar em qualquer HTML são os seguintes (com explicações em itálico). Verifique isso em qualquer página da web clicando com o botão direito do mouse em qualquer parte dela e clicando em "view page source":

<!DOCTYPE html> - isto mostra ao web browser que este é um ficheiro HTML que pode ler

<html lang="en"> - isto mostra a língua em que a página web está escrita

<head> - isto marca o início da seção da cabeça, onde são colocados os códigos gerais

<título>Título da página</title> - esta é uma meta tag que mostra o título da página, que mostra na aba do navegador

<meta name="description" content="..." /> - isto é usado para descrever o que é a página, para motores de busca

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=0" /> - este é um comando que diz como a página web deve ser exibida em vários tamanhos de tela

<meta name="robots" content="index,follow" /> - isto diz aos robots que rastejam a página que eles podem indexá-la e adicioná-la aos resultados do motor de busca

<link rel="stylesheet" type="text/css" href="/css/style/style.css"> - isto liga o HTML a um ficheiro CSS, onde é colocado um estilo mais detalhado para o texto

<script src="/js/random.js" type="text/javascript"></script> - isto liga-se a um ficheiro Javascript, utilizado para executar uma ação na página web

<link rel="canonical" href="https://yourpage.com"/> - se houver páginas com conteúdo similar ou se a página puder ser encontrada em mais de uma URL, isso mostra aos rastejadores qual URL deve ser levada em conta para fins de autoridade

</head> - isto fecha a seção da cabeça

<corpo> - isto abre a seção do corpo, onde o conteúdo real da página é colocado

<div class="container"> - isto abre uma seção chamada container, que normalmente define a moldura para algum conteúdo

<a href="https://yoursiteshomepage.com"><img class="navbar-brand-logo-normal" src="/images/logo.svg" alt="Visitor Analytics logo" height="52" width="180"></a> - esta é uma forma de colocar uma imagem de logótipo que se liga à sua página inicial

<div class="first-text"> Estas são as primeiras palavras a serem realmente exibidas no seu site</div> - algum texto que pode ser estilizado no arquivo CSS conectado

...

</ corpo>