As páginas web (como sites, blogs ou landing pages) são excelentes ferramentas para difundir informações com vários propósitos, incluindo fornecer informações e criar oportunidades de negócios. Seja qual for o objetivo, todas elas têm uma coisa em comum: a linguagem de codificação HTML.

Como veremos, não é uma linguagem de programação e é fácil de entender. Continue lendo e descubra que criar uma página web não é tão difícil do que parece!

Verifique os assuntos que abordaremos neste artigo:

• O que é HTML? Uma explicação simples e completa
• 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 é HTML? Uma explicação simples e completa

Traduz-se a sigla em inglês (HTML) Hypertext Markup Language para o português como linguagem de marcação de hipertexto.T

O HTML serve para criar páginas web por meio do uso de marcadores (tags) e atributos, os quais determinam a apresentação do conteúdo em um navegador web.

Antes de explorarmos as possibilidades do HTML, vamos esclarecer um conceito fundamental: o hipertexto. Essa ideia se refere a um texto que construímos com blocos interligados, incluindo palavras, imagens, sons, tabelas e outros elementos. Esses blocos podem conter rotas que direcionam para outros hipertextos; chamamos essas rotas de hiperligações, hiperlinks ou simplesmente links.

Tim Berners-Lee, o inventor da World Wide Web, criou o HTML.

A ideia era criar um ambiente em que os cientistas pudessem divulgar seus trabalhos e permitir que seus colegas os analisassem. Apesar dos desafios iniciais, Berners-Lee conseguiu estabelecer o HTML como linguagem padrão para a criação desses documentos.

O HTML evoluiu muito desde os anos 1990 e agora é fundamental para blogs, e-commerces, redes sociais e todas as páginas que visualizamos em um navegador web.

Quais são os principais elementos do HTML?

Agora que você entende o que é o HTML, vamos examinar os marcadores principais que determinam as funções dos elementos que compõem uma página.

Para começar, é importante lembrar que as tags são marcadas com um sinal de menor que (<), que é seguido pelo nome da tag e um sinal de maior que (>). A maioria das tags precisa ser fechada, o que é feito colocando uma barra (/) entre o sinal “<” e o nome da tag.

Os exemplos a seguir tornarão tudo mais claro.

Parágrafo (<p>)

Para definir um parágrafo, abrimos e fechamos a tag.

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

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

As tags de cabeçalho ou heading tags ajudam a organizar os segmentos do texto. A hierarquia dos cabeçalhos segue uma ordem decrescente de importância, iniciando pelo cabeçalho principal e terminando nos cabeçalhos de menor nível.

<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>)

Como o conteúdo da imagem é especificado pelo atributo “src”, a tag <img> é autofechada.

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

Âncora (<a>)

Uma tag de âncora conecta uma pessoa a uma página diferente. O destino desse link é determinado pelo atributo “href”.

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

Lista ordenada (<ol>)

Uma ordered list, ou lista ordenada, mostra elementos numerados. Devemos usar a tag <li> para marcar todos os elementos.

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

Lista não ordenada (<ul>)

A tag unordered list, também conhecida como 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 informação exibida na tag de tabela é apresentada em formato de linhas e colunas. Usamos as tags para representar linhas, para representar cabeçalhos e para representar cada célula dentro da tag .

<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 comentários que ajudarão você a entender o código. O usuário não verá nada entre os marcadores .

<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?

Agora que vimos vários elementos, vamos aprender a colocá-los dentro de um código HTML. A construção desses códigos deve seguir certas regras, como todos os padrões da web.

Começamos com a afirmação. Um método para informar ao navegador web que o documento em questão é um HMTL é usar o “DOCTYPE html”.

Em seguida, abrimos a tag <html>. Não esqueça de fechar a tag no final. Dentro dela, adicionamos <head>, que deve conter os metadados da página, ou dados sobre dados, como o título da aba do navegador (<title>), chamadas para arquivos externos e outras meta tags importantes para o trabalho de SEO.

Para que os caracteres que usamos em português, como acentos e cedilha, sejam mostrados corretamente no navegador, é fundamental incluir a tag <meta charset=”utf-8″>.

Finalmente, abrimos a tag <body> e inserimos a seção do documento HTML que contém os elementos que o usuário pode ver.

<!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 começar a projetar a aparência da sua página, inicialmente, você só precisa de um editor de texto básico (como o Bloco de Notas) e de um navegador web. Com o tempo, ao se tornar um desenvolvedor profissional, você terá acesso a editores de código mais avançados.

Para começar, você deve criar um novo arquivo e salvá-lo com a extensão.html. Podemos nomear este tutorial como index.html.

Depois disso, 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?

Após definirmos a estrutura com HTML, utilizamos o CSS para estilizar os elementos, configurando fontes, cores e outros aspectos visuais.

Apesar da possibilidade de descrever os estilos dentro do próprio código HTML, é aconselhável que o HTML use pelo menos um arquivo CSS. Ao separar a estrutura do estilo, o código fica mais organizado.

O CSS é baseado em declarações e seletores com propriedades e valores. Inicialmente, escolhemos os elementos HTML que desejamos estilizar. A seguir, detalharemos as propriedades de cada elemento.

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;
}

O JavaScript é uma terceira camada do desenvolvimento de páginas web que se concentra na criação de comportamentos dinâmicos. Essa linguagem de programação — não confundir com Java — permite uma experiência do usuário melhor e uma página mais interativa.

Com ele, podemos escolher o que acontece quando um visitante clica em uma seção específica da página, aperta uma tecla específica, rola a página e fazer outras coisas. As aplicações são extremamente variadas e dependem em grande parte da criatividade do desenvolvedor.

Devido à sua sintaxe simples, o JavaScript é uma excelente opção para iniciantes em programação. Uma vantagem adicional é a possibilidade de visualizar o resultado do seu código diretamente no navegador, permitindo testes rápidos.

Já percebeu que o HTML é simples de entender? A partir daqui, você pode explorar um leque maior de tags e recursos.

Gostou do artigo? Tenho aqui uma dica: uma aplicação que pode agregar muito valor ao seu dia a dia: 11 passos fundamentais para aumentar a velocidade do seu site.