Aprender um novo idioma leva tempo e disciplina.
Seja estudando italiano antes de sua viagem à Europa ou terminando um dever de casa de espanhol, há muito envolvido em ler, escrever e falar um idioma que você não usa regularmente.
O mesmo pode ser dito para aprender HTML para codificar um site. Embora você não precise necessariamente aprender a "falar" HTML para usá-lo, você precisará identificar componentes do HTML, o que eles significam e como aparecerão em uma página da web. Aprender HTML também é uma parte vital da construção de sites.
O que é HTML?
HTML significa linguagem de marcação de hipertexto. É a linguagem de marcação padrão para páginas da web que define a estrutura do conteúdo. Esses elementos são os blocos de construção de qualquer site.
O que é HTML?
HTML permite que os usuários criem e estruturem seções, cabeçalhos, links, parágrafos e mais em um site usando várias tags e elementos. Quase tudo o que você deseja criar em uma página da web pode ser feito usando um código HTML específico.
Embora você possa pensar que HTML é complicado, ou dizer "Esqueci um símbolo e tudo deu errado!", HTML é muito parecido com aprender um novo idioma. Mas uma vez que você pega o jeito, parecerá algo natural, e você estará criando páginas da web usando HTML em pouco tempo. Pronto para aprender mais? Continue lendo.
Quer aprender mais sobre Desenvolvedores Web? Explore os produtos de Desenvolvedores Web.
Como o HTML funciona?
Tenho 100% de certeza de que você já visualizou um site que usa código HTML. Como eu sei? Este artigo é composto por tags e elementos HTML no backend.
Este navegador não exibe as tags HTML reais, mas as usa para renderizar conteúdo específico na página para que os visitantes do site possam visualizá-lo. Normalmente, o site médio inclui várias páginas diferentes com código HTML, como a página inicial, a página sobre nós e a página de contato, cada uma com seus próprios documentos HTML exclusivos.
Elementos HTML
A anatomia de um elemento HTML consiste em uma tag de abertura, uma tag de fechamento e o conteúdo entre elas. Pense nesses elementos como blocos de construção para páginas HTML.
Essas tags são nomes de elementos que são cercados por colchetes angulares, neste caso <p>, que significa parágrafo.
A primeira tag é sua tag de abertura, a segunda é a tag de fechamento. Elas precisam ser escritas da mesma forma, exceto que a tag de fechamento terá uma barra antes do nome da tag. O conteúdo entre essas duas tags será exibido no formato de parágrafo no site.
Dica: Quer aprender a extrair dados com seu novo conhecimento de HTML? Confira nosso guia sobre Web Scraping agora! Você também pode conferir este guia completo sobre construção de sites.
Tags HTML comuns
Existem muitas tags HTML comuns que são usadas frequentemente na criação de uma página da web. Abaixo estão algumas das tags frequentemente usadas para construir uma página da web do início ao fim.
Tipo de documento
A declaração do tipo de documento ajuda os navegadores a exibir sua página da web corretamente. Ela aparecerá apenas uma vez, no topo da página.
Todos os documentos HTML começam com o código que declara o documento. Esta tag se parece com isto:
<!DOCTYPE html>
Isso pode parecer confuso, mas basicamente, basta colocar isso no topo do seu documento e continuar construindo.
Tag HTML
Como você pode ter adivinhado, esta tag é escrita como: <html>.
Este elemento envolve todo o conteúdo de toda a página, e você pode ouvi-lo ser referido como o elemento raiz. Esta tag estará abaixo da tag do documento e precisará ser fechada, usando </html>, no final da página da web.
Tag de título
Qual é o título da página que você está criando? Seja qual for, será envolvido no elemento <title> e estará próximo ao topo de suas tags.
<title>Título da Página</title>
Tag de corpo
O elemento <body> contém todo o conteúdo que você deseja mostrar aos visitantes de sua página da web. Isso inclui texto, imagens, vídeos, faixas de áudio reproduzíveis e mais. Também precisará ser fechado, usando </body>, no final da página da web.
Tag de cabeçalho
Isso é escrito como <h1> e define um cabeçalho maior na página. Você pode ter mais de uma tag de cabeçalho e cada elemento terá um número correspondente.
<h1>Este é um cabeçalho.</h1>
<h2>Este também é um cabeçalho.</h2>
Tag de parágrafo
A tag de parágrafo define qual texto será exibido como um parágrafo usando o elemento <p>.
<p>Este é um parágrafo sobre cães.</p>
<p>Este é outro parágrafo sobre cães.</p>
Listas
Usar a tag <ul> definirá qual texto será escrito como uma lista numerada <ol> ou uma lista com marcadores <li>.
Um exemplo de uma lista com marcadores seria:
<ul>
<li>Farinha</li>
<li>Açúcar</li>
<li>Manteiga</li>
</ul>
Usar este código faria o texto aparecer na página da web como:
- Farinha
- Açúcar
- Manteiga
Tag de idioma
O idioma do documento é definido pela tag "lang". Se sua página for exibida em inglês, a tag seria:
<html lang=”en”>
Neste caso, o en representa inglês. Outras tags de idioma populares são es para espanhol, fr para francês, it para italiano, he para hebraico e zh para chinês.
Precisa que sua página da web esteja em um idioma diferente? Confira esta lista de códigos de idioma HTML.
Imagens
O início do seu elemento de imagem começará com a tag <img>, mas há outros componentes que precisam ser incluídos.
Também haverá arquivo de origem (src), texto alternativo (alt) e tags de largura e altura. Se eu estiver usando uma foto dos Chicago Cubs que tem 600 pixels de largura e 450 pixels de altura, a tag de imagem ficaria assim:
<img src=”Chicago_Cubs.jpg” alt=”Chicago-Cubs” style=”width:600px;height:450px”>
Links
Há uma maneira específica de adicionar um link em seu texto usando HTML. Para fazer isso, use o elemento <a>, que é a abreviação de âncora.
Neste caso, digamos que meu texto âncora seja G2 Learning Hub.
<a>G2 Learning Hub</a>
Em seguida, dê ao elemento <a> um atributo href com aspas vazias:
<a href= “ “G2 Learning Hub</a>
Dica: Href significa referência de hipertexto.
Depois, preencha o valor deste atributo (entre as aspas) com o URL para o qual você irá linkar.
<a href= “https://learn.g2crowd.com/G2”>Learning Hub</a>
Dicionário HTML
- <!DOCTYPE html> Tipo de Documento
- <html> Tag HTML
- <title> Tag de Título
- <body> Tag de Corpo
- <H1> Tag de Cabeçalho
- <p> Tag de Parágrafo
- <ul> Tag de Lista
- <html lang="en"> Tag de Idioma Inglês
- <img> Tag de Imagem
- <a> Tag de Link de Âncora
Documento HTML básico
Se eu estivesse criando um documento HTML básico que contivesse todos os elementos e tags listados acima, ele se pareceria com isto:
<!DOCTYPE html>
<html>
<html lang=”en”>
<title>Título da Página</title>
<body>
<h1>Este é seu primeiro cabeçalho</h1>
<p>Este é um texto de parágrafo que se refere ao seu primeiro cabeçalho.</p>
<h2>Este é seu segundo cabeçalho</h2>
<p>Este é um texto de parágrafo que se refere ao seu segundo cabeçalho.</p>
<ul>
<li>Lista</li>
<li>Lista</li>
<li>Lista</li>
</ul>
<img src=”Image.jpg” alt=”Image-Alt-Text” style=”width:600px;height:450px”>
Clique no link <a href= “https://learn.g2crowd.com/G2”>aqui</a> para ser levado ao G2 Learning Hub.
</body>
</html>
Relacionado: Saiba mais sobre JavaScript e como você pode praticar suas habilidades!
Prós do HTML
Existem muitos benefícios em usar HTML para criar uma página da web. Alguns incluem:
- Linguagem de código amplamente usada com uma grande comunidade que a utiliza
- Funciona em todos os navegadores da web
- Usa uma marcação limpa e consistente
- Totalmente gratuito e de código aberto
Contras do HTML
Como todas as coisas que têm um pró, o HTML também tem alguns contras que você precisará considerar.
- Principalmente usado para páginas da web estáticas
- Todas as páginas da web precisam ser criadas separadamente, mesmo que usem os mesmos elementos e tags
- Se você estiver usando um navegador mais antigo, ele pode não renderizar tags recém-desenvolvidas
Arregace as mangas e comece a codificar
Seja você um especialista ou um iniciante na construção de um site, é provável que você use HTML para criar várias páginas da web. Mesmo que você possa se sentir hesitante em escrever código HTML no início, com o tempo parecerá algo natural, e você estará lendo e escrevendo linhas de código enquanto dorme.
Agora que você entende HTML, você pode estar interessado em aprender CSS e PHP. Ou confira estas dicas para codificar sites!
Mara Calvello
Mara Calvello is a Content and Communications Manager at G2. She received her Bachelor of Arts degree from Elmhurst College (now Elmhurst University). Mara writes content highlighting G2 newsroom events and customer marketing case studies, while also focusing on social media and communications for G2. She previously wrote content to support our G2 Tea newsletter, as well as categories on artificial intelligence, natural language understanding (NLU), AI code generation, synthetic data, and more. In her spare time, she's out exploring with her rescue dog Zeke or enjoying a good book.
