O que é HTML e qual sua funcionalidade?

As páginas web (sejam sites, blogs ou landing pages) são ferramentas de divulgação de informação com as mais variadas finalidades: desde difundir conhecimento até gerar oportunidades de negócio. Seja qual for o intuito, todas elas têm em comum a linguagem com a qual são construídas: o HTML.

Como veremos, não se trata de uma linguagem de programação e é bastante simples de entender. Continue a leitura e veja como construir uma página web é mais fácil do que parece!

Confira os assuntos que vamos tratar neste post:

• O que é e para que serve o HTML?
• Quais são os principais elementos do HTML?
• Como é a estrutura básica de um documento do tipo?
• Como criar o seu primeiro código em HTML?
• Qual é a relação entre HTML, CSS e JavaScript?

 

O que é e para que serve o HTML?

HTML é a sigla em inglês para Hypertext Markup Language, que traduzimos para o português como linguagem de marcação de hipertexto.

Apesar dos nomes complicados, o HTML nada mais é que uma linguagem usada para criar páginas web por meio de marcadores (tags) e atributos, que definem como o conteúdo deve ser apresentado em um navegador web.

Mas você deve estar se perguntando: o que é um hipertexto? Esse conceito faz referência a um texto com blocos interconectados contendo palavras, imagens, sons, tabelas e outros elementos. Além disso, eles podem ter caminhos que apontam para outros hipertextos, caminhos esses conhecidos como hiperligações, hyperlinks ou apenas links.

A criação do HTML é atribuída a Tim Berners-Lee, o inventor da World Wide Web.

A ideia era criar um ambiente em que cientistas pudessem divulgar suas pesquisas para que seus colegas pudessem consultá-las com facilidade. Berners-Lee acabou criando o HTML como linguagem padrão para elaborar esses documentos.

Desde a sua implementação, no início dos anos 1990, o HTML passou por diversas melhorias e hoje é o alicerce de blogs, e-commerces, redes sociais e todo o tipo de página acessível de um navegador web.

Confira também estes conteúdos:
Entenda o que é CSS e quais as suas funções na internet
Captcha: saiba o que é e como colocá-lo no site do seu negócio
Wireframe: quais os tipos e as principais ferramentas de criação  

Quais são os principais elementos do HTML?

Agora que você já sabe o que é o HTML, vamos ver os principais marcadores que definem a função dos elementos que fazem parte da página.

Mas antes precisamos lembrar que essas tags são identificadas com um sinal de menor que (<), seguido pelo nome da tag e um sinal de maior que (>). A maior parte das tags precisa ser fechada, o que representamos com uma barra (/) entre o sinal “<“ e o nome da tag.

Tudo ficará mais claro com os exemplos a seguir.

Parágrafo (<p>)

A tag <p> deve ser aberta e fechada para definir um parágrafo.

<p>Este é um parágrafo em HTML.</p>

Cabeçalho (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)

As heading tags, ou tags de cabeçalho, ajudam a criar uma hierarquia entre as partes do texto, separando-o em seções. O <h1> é o cabeçalho de maior relevância, seguido pelo <h2>, <h3> e assim sucessivamente até o <h6>, de menor importância.

<h1>Título principal</h1>
<p>Parágrafo de introdução.</p>
<h2>1. Primeiro intertítulo</h2>
<p>Parágrafo da primeira seção.</p>
<p>Mais um parágrafo da primeira seção.</p>
<h2>2. Segundo intertítulo</h2>
<p>Parágrafo da segunda seção.</p>
<p>Mais um parágrafo da segunda seção.</p>
<h2>3. Terceiro intertítulo</h2>
<p>Parágrafo da terceira seção.</p>
<h3>3.1. Intertítulo dentro da terceira seção</h3>
<p>Parágrafo da seção 3.1.</p>
<h3>3.2. Mais um intertítulo dentro da terceira seção</h3>
<p>Parágrafo da seção 3.2.</p>

Imagem (<img>)

A tag de imagem não precisa ser fechada, já que o seu conteúdo é definido na própria tag com o atributo “src”.

<img src="https://rockcontent.com/br/wp-content/uploads/sites/2/2019/09/twitter-cards.png">

Âncora (<a>)

A tag de âncora define um link para outra página. O atributo “href” determina o destino desse link.

<a href="https://rockcontent.com/br/blog/arquitetura-da-informacao/">Arquitetura da Informação</a>

Lista ordenada (<ol>)

Uma ordered list, ou lista ordenada, é exibida com elementos numerados. Cada elemento deve ser marcado com a tag <li> (list item).

<ol>
	<li>SEO</li>
	<li>Links patrocinados</li>
	<li>Redes sociais</li>
</ol>

Lista não ordenada (<ul>)

A tag unordered list, ou lista não ordenada, mostra os elementos como bulletpoints.

<ul>
	<li>Automação de marketing</li>
	<li>Geração de leads</li>
	<li>E-mail marketing</li>
</ul>

Tabela (<table>)

A tag de tabela exibe informações no formato de linhas e colunas. Dentro da tag <table>, usamos as tags <tr> para representar as linhas, <th> para representar os cabeçalhos e <td> para representar cada célula.

<table>
	<tr>
    	<th>Nome</th>
    	<th>Sobrenome</th>
  	</tr>
	<tr>
  		<td>Jonah</td>
    	<td>Berger</td>
  	</tr>
  	<tr>
  		<td>Ann</td>
    	<td>Handley</td>
  	</tr>
  	<tr>
    	<td>Neil</td>
    	<td>Patel</td>
  	</tr>
</table>

Comentário (<!– –>)

Usamos esta tag para escrever algum comentário que ajude no entendimento do código. Tudo que estiver escrito entre os marcadores <!– e –> não será mostrado ao usuário.

<p>O HTML é fundamental para quem deseja criar um site na web.</p> <!-- Este é um parágrafo em HTML -->

 

Como é a estrutura básica de um documento do tipo?

Vimos diversos elementos, mas agora vamos saber como colocá-los dentro de um código HTML. Como qualquer padrão da web, é necessário seguir algumas regras para a construção desses códigos.

Começamos com a declaração <!DOCTYPE html>, para informar ao navegador web que o documento em questão é um HMTL.

Em seguida, abrimos a tag <html>, que precisaremos fechar no fim. Dentro dela, adicionamos <head>, que deverá conter os metadados (dados sobre dados) da página, como o título que vai aparecer na aba do navegador (<title>), chamadas para arquivos externos e outras meta tags cruciais para um trabalho de SEO.

É importante incluir a tag <meta charset=”utf-8″> para que o navegador exiba corretamente certos caracteres que utilizamos em português, como acentos e cedilha.

Por fim, abrimos a tag <body>, em que adicionamos a parte do documento HTML que contém os elementos visíveis para o usuário.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Minha primeira página</title>
	</head>
	<body>
		<h1>Minha primeira página</h1>
		<p>Meu primeiro parágrafo!</p>
	</body>
</html>

 

Como criar o seu primeiro código em HTML?

Para criar um código HTML, você só precisa de um editor de texto simples (o Bloco de Notas, por exemplo) e de um navegador web (Chrome, Opera, Firefox, Safari, etc.) para visualizar como vai ficar a sua página. Desenvolvedores profissionais usam editores de código mais especializados, mas podemos seguir inicialmente com um editor simples.

O primeiro passo é criar um novo arquivo e salvá-lo com a extensão .html. Para este tutorial, podemos dar o nome de index.html.

Depois, cole o código que mostramos na seção anterior com a estrutura básica de um HTML e salve o arquivo.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Minha primeira página</title>
	</head>
	<body>
		<h1>Minha primeira página</h1>
		<p>Meu primeiro parágrafo!</p>
	</body>
</html>

Agora é só abrir o arquivo no seu browser preferido e pronto, você acabou de criar o seu primeiro código HTML!

 

Qual é a relação entre HTML, CSS e JavaScript?

Entendemos que o HTML é a estrutura de uma página web, mas como formatar o estilo de seus elementos? Para configurarmos fontes, cores, alinhamento, enfim, a forma como os componentes HTML serão apresentados, utilizamos o CSS, sigla para Cascading Style Sheets, ou folhas de estilo em cascata.

Apesar de ser possível descrever os estilos dentro do próprio código HTML, é recomendável que o HTML faça uma chamada a um ou mais arquivos CSS individuais. Assim, o código fica mais organizado, já que isola a estrutura do estilo.

O CSS se baseia em seletores e declarações com propriedades e valores. Ou seja, escolhemos os elementos HTML aos quais queremos aplicar os estilos e declaramos quais serão as propriedades desses componentes.

Veja neste exemplo o seletor de parágrafo (p), com uma declaração que define a cor, a família da fonte e o tamanho da fonte.

p {
	color: white;
	font-family: verdana;
	font-size: 15px;
}

Existe ainda uma terceira camada para o desenvolvimento de páginas web, dedicada a criar comportamentos dinâmicos: o JavaScript. Essa, que de fato é uma linguagem de programação — não confundir com Java —, permite dar mais interatividade à página e melhorar a experiência do usuário.

Com ele, conseguimos escolher o que acontece quando o visitante clica em determinada parte da página, aperta determinada tecla, rola a página e muito mais. As aplicações são inúmeras e dependem basicamente da criatividade de quem está desenvolvendo.

Inclusive, o JavaScript é excelente para quem deseja aprender a programar, já que a sintaxe da linguagem é bastante fácil. Além disso, é possível fazer testes imediatos, visualizando o resultado do seu código diretamente no navegador web.

Percebeu como o HTML é mais simples do que aparenta? Então continue os seus estudos, porque apesar da simplicidade, esse é um assunto riquíssimo, com muitas outras tags e atributos que não caberiam em um só post.

Gostou do artigo? Então confira esta aplicação que pode ser útil para o seu dia a dia. Aprenda como criar a sua própria assinatura de e-mail em HTML!