Aprenda HTML criando seu linktree

Vou tentar ensinar aqui como criar e colocar no ar o seu site mesmo se você não tem noção de como fazer nada disso.

Esse post é uma introdução do tipo que ajuda a fazer alguma coisa nova do zero até terminar. Não do tipo que ensina tudo sobre o assunto.

A intenção é causar aquele sentimento bom de quando conseguimos fazer algo que parecia complicado, que conhecemos e sabemos que que nos impulsiona e dá vontade de aprender mais. Espero que funcione. Ele foi escrito para quebrar o gelo em relação ao desenvolvimento web. Usei o exemplo da árvore de links por ser algo bem simples e que muitas pessoas usam.

Tem coisas que ensino aqui que poderiam ser feitas de outra forma, de um jeito mais moderno de acordo com o que o CSS3 oferece, mas eu quis usar as opções mais simples nesse tutorial.

De que é feita uma página web?

Uma página web é basicamente um arquivo de texto com sufixo .html. HTML(HyperText Markup Language) que significa Linguagem de Marcação de Hipertexto. É uma linguagem usada para construir páginas web. Ela marca a estrutura da página e o que é cada elemento.

Então pra começar, vamos criar uma pasta e dar qualquer nome a ela. Vou usar aqui “Meus links” e dentro dela criar um arquivo de bloco de notas e renomear para index.html.

Vou clicar nesse arquivo e mandar abrir com o bloco de notas, mas poderia ser outro editor de texto.

E vamos escrever os links que queremos:

twitter.com instagram.com telegram.com

Agora, se você salvar e abrir no navegador vai ver que criou uma página web. É basicamente isso. Mas na verdade o link aparece como texto e não funciona. Vamos resolver isso.

A estrutura de um arquivo HTML

Para uma página web funcionar do jeito certo precisamos dizer, no início do texto, que ela é uma página web e precisamos seguir sua estrutura. A estrutura básica é composta da seguinte estrutura:

<!DOCTYPE html> <!-- Diz ao navegador o formato do documento -->
<html> <!-- Abre a página html -->
<head> <!-- Onde vão algumas diretrizes da página. Essa parte não é vista na página.-->
	<title> </title><!-- Título da página -->
</head> <!-- Fecha o formato html -->
<body> <!-- Onde vai a estrutura da página que você vê na tela -->
</body> <!-- Fecha o body -->
</html> <!-- Fecha a página html -->

A tag <head> é a cabeça da página. O conteúdo dela não aparece na tela, mas é lido pelo navegador e buscadores. Nela está definido metadados como qual o título, descrição e idioma da página, dados para SEO, além de folha de estilos e comportamentos. Na nossa página vamos escrever umas coisas dentro da tag <head> e vai ficar assim:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<title>Título</title>
	<meta name="description" content="Aqui vai um descrição curta e impactante!" />
	<meta charset="utf-8">
	<meta http-equiv="content-language" content="pt-br" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>

Essas tags <meta> são importantes para garantir algumas características necessárias para o site funcionar melhor, ser exibido melhor.

<meta name="TIPO" content="CONTEÚDO" />
<meta charset="TIPO-DE-TEXTO">
<meta http-equiv="TIPO" content="IDIOMA" />

Vamos ver cada uma por curiosidade, mas não precisa se preocupar com elas. <meta name="description" content="Aqui vai um descrição curta e impactante!" /> contém a descrição da página, o assunto principal. <meta charset="utf-8"> indica o tipo de caracter usado. <meta http-equiv="content-language" content="pt-br" /> indica o idioma usado na página e é importante para leitores em voz. E por fim, <meta name="viewport" content="width=device-width, initial-scale=1"> diz ao navegador como visualizar a página. Sem isso ela seria exibida muito pequena em dispositivos portáteis e talvez não desse pra ler nada. A tão falada responsividade. Na sua página só precisa alterar o título e a descrição.

Body

Lembra que eu falei que HTML é uma linguagem de marcação, que marca o que é e a ordem de cada coisa numa página?

É aqui no <body> que isso vai acontecer.

Vamos começar criando uma <div>, que é como uma caixa onde vamos agrupar nosso conteúdo. E dentro dela vamos colocar uma foto, uma título e os links que queremos.

<div>
	
</div>
Como inserir imagem

Para inserir a imagem usamos a tag <img src="">. Dentro das aspas vamos escrever o caminho para a imagem e qual imagem vamos usar.

No nosso caso vamos colocar uma imagem dentro da pasta que criamos, onde está o nosso arquivo. Então nosso caminho vai ficar assim:

<img src="foto.jpg">.  
E o título?

As tags de título variam de <h1>, <h2>, <h3>, <h4>, <h5> e <h6> e significam a importância do título na página. Vamos usar a <h1>.

<h1>Título</h1>
Finalmente a lista!

Listas são chamadas pela tag <ul>, que significa unordered list. E dentro dela cada item pela tag <li>, list item. Assim:

<ul> 
	<li></li> 
	<li></li> 
	<li></li>
</ul>

Vamos agora colocar nosso links.

Para criar um link precisamos usar a tag <a>, que reprensenta links, da seguinte forma.

<a href=”LINK-DO-SITE”>NOME-DO-SITE</a>
<a href="https://twitter.com">Twitter</a>

Cada link vai dentro de um item da lista. Assim:

<li><a href="https://twitter.com">Twitter</a></li>

Vamos juntar div, img, ul, li e a

<div>
	<img src="foto.jpg"> <!-- tag usada para inserir imagem -->
	<h1>Título</h1> <!-- Essa tag vai de 1 a 6 de acordo com a importância do título na página -->
	<ul> <!-- Para abrir a lista usamos essa tag chamada ul(unordered list) -->
		<li><a href=""></a></li> <!-- Item da lista com link dentro -->
		<li><a href=""></a></li> 
		<li><a href=""></a></li>
	</ul>
</div>

Vamos escrever todos os links, salvar e ver como ficou visualizada num desktop.

aprender-html
num desktop

E por curiosidade como ficaria num celular sem e com <meta name="viewport" content="width=device-width, initial-scale=1">.

sem-inicial-scale
sem-inicial-scale

com-inicial-scale
com-inicial-scale

E o código inteiro até agora:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<title>Título</title>
	<meta name="description" content="Aqui vai um descrição curta e impactante!" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="content-language" content="pt-br, en-US" />
</head>
<body>
<div>
	<img src="joel-wyncott-unsplash.jpg"> 
	<h1>Título</h1> 
	<ul> 
		<li><a href="https://telegram.com">Telegram</a></li> 
		<li><a href="https://instagram.com">Instagram</a></li> 
		<li><a href="https://twitter.com">Twitter</a></li>
	</ul>
</div>
</body>
</html>

Mas não pode ficar com essa aparência! E agora?

Agora vem o CSS

CSS é uma linguagem de estilo (HTML é de marcação, lembra?) e significa Cascading Style Sheets ou em português Folhas de Estilo em Cascata. Ele é o responsavel pela aparência de uma página web.

Ele ser em cascata significa que as mudanças que acrescentamos podem se sobrepor uma sobre a outra.

Para aplicar o CSS vamos criar uma tag <style type="text/css"></style> dentro da nossa tag <head>. E dentro dela vamos começar estilizando o nosso <body>.

O body

Vamos pensar o que queremos no nosso body antes: uma margem para que a nossa foto não fique colada na margem, uma cor de fundo, uma letra maior, mudar o tipo de letra para sans serif(sem aqueles tracinhos nas pontas). Podemos fazer assim:

<style type="text/css">
	body{
		margin: 20px; /* a distância empixels que queremos */
		background: #dbdbdb; /* a cor do fundo */
		font-size: 20px; /* o tamanho da letra */
		font-family: 'Fira Sans', sans-serif; /* a fonte e o tipo de fonte */
		font-weight: bold; /* e vamos deixar a fonte tipo negrito também */
	}	
</style>

Site para escolher cor:
html-color-codes.info
Site para escolher paleta de cores:
colorhunt
Se quiser saber mais sobre tipografia:
neilpatel.com/br/blog/tipografia/

A div que guarda tudo isso

Para alterar a aparência da div vamos adicionar uma classe a ela assim <div class="main"></div>. E vamos chamar essa classe no nosso estilo escrevendo o nome da classe precedido por ponto .main{}.

.main{			
	margin-top:50px; /*margem do topo*/
	margin-right: auto; /*margem direita*/
	margin-bottom: 50px; /*margem de baixo*/
	margin-left: auto; /*margem esquerda*/
	text-align: center; /*alinhamento do texto*/
}

Também podemos abreviar assim, escrevendo as margens em sentido horário começando pelo topo:

.main{		
	margin: 50px auto 50px auto;
	text-align: center;
}

Para ver se está como queremos podemos adicionar uma borda temporariamente.

.main{
	border: 1px solid red;	/* borda com espessura, tipo de borda, e cor da borda*/	
	margin: 50px auto 50px auto;
	text-align: center;
	}

Agora vemos que nossa div está quase da largura total tanto no desktop quanto em celular. Mas não queremos ela tão larga no desktop. Então vamos alterar a largura de acordo com a largura da tela. Para isso vamos usar uma media query. Media query adiciona uma condição sob a qual um bloco de estilo css será aplicado. Vamos diminuir um pouco pra deixar uma largura fixa de 700px.

@media only screen and (min-width: 800px) { 
	.main{width: 700px;}	
}  

Ela diz ao navegador que quando a largura da tela for maior que 800px, a div com a classe main será de 700px.

Vamos ver:

Na tela do desktop está legal mas no celular a imagem fica ultrapassando a largura da tela.

desktop
no desktop

celular
no celular

A imagem

A imagem nós vamos reduzir e deixar circular.

img{
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 50%;
}

Onde width é largura e height a altura. object-fit serve para não deformar a imagem, já que vamos alterar a altura e largura para tamanhos não proporcionais ao da imagem original. border-radius é o raio da borda, que aqui usamos para “cortar” as quinas da imagem.

Título

No título vamos só dar uma corzinha:

h1{
		color: #d2691e;
	}  

Vamos ver:

celular
no celular

Agora acho que já está legal e podemos remover a borda e seguir para a lista.

Lista

Na <ul> vamos retirar as bolinhas (list-style-type) e vamos remover o espaçamento da esquerda.

ul{
	padding: 0; /* retiramos a margem a direita da lista */
	list-style: none; /* aqui retiramos a bolinha */
}

Item da lista

Na lista vamos adicionar uma margem para não ficarem coladas umas nas outras.

li{
	margin: 16px 0;
}

Aqui vamos dar um estilo para deixar parecido com um <button> largo. Vamos começar assim:

a {
	display: flex;
	justify-content: center;
	cursor: pointer;
	background: #0c0c0c;
	width: 100%;
	padding: 10px 0;
	border: 2px solid transparent; 
	color: #dbdbdb;
	letter-spacing: 3px;
	word-spacing: 5px;
	text-decoration: none;
}

Vamos explicar: display:flex; aqui faz a tag <a> ocupar toda a largura, justify-content: center; centraliza o texto, cursor:pointer; faz aparecer aquela mãozinha quando põe o mouse sobre o botão. A borda transparente é pra depois usarmos cor nela no hover. text-decoration: none; tira o sublinhado.

Adicionamos as outras propriedades para ficar bonito mesmo. letter-spacing é o espaçamento entre letras e word-spacing entre palavras. Deixam a leitura bem melhor.

Só mais um efeitinho

Está bem legal. Mas é bom sempre a página dar um feedback ao usuário. Como? Quando você colocar o mouse sobre o botão ele deve mudar a aparência.

button:hover{
	background: #9b5900;
	border: 2px solid #0c0c0c;
	transition: all 300ms ease-in-out;
}

Bônus: Emojis

Emojis estão em alta, são muito aceitos e ajudam a expressar sentimentos e personalidade. Além de que são fofos e legais.

Vamos adicionar uma tag <span> dentro da tag título. Uma para cada emoji. Assim:

<h1><span>🤍</span> Título <span>🤍</span></h1>

E vamos estilizar nossa tag assim:

.emoji{
	font-size: 16px;
	padding: 0 20px;
}

e o HTML:

	<h1><span class="emoji">🤍</span> Título <span class="emoji">🤍</span></h1> 

O resultado do nosso trabalho com o hover ativo:

desktop
no desktop

celular
no celular

Colocando a página online

Para colocar o site no ar precisamos hospedá-lo em um servidor. O que eu uso, gosto e recomendo é o Netlify.

Clique em https://app.netlify.com/signup e se cadastre com seu e-mail.

Depois que confirmar seu e-mail será direcionado para o site de volta e vai ver uma tela com uma mensagem sobre alguns pontos fortes do Netlify. Pode fechar essa janelinha e vai ver o seguinte:

Nesse ponto o site está assim:

Agora vamos enviá-lo para o Netlify. Você vai arrastar essa pasta para dentro desse retângulo. Como na imagem.

E quando ele terminar, leva uns 2 segundos, vai abrir essa janela:

Repara lá no canto esquerdo o nome que ficou. O Netlify cria o site com um nome aleatório, alguns são engraçados até, mas não dá pra usar assim. Vamos clicar em “Domain settings” abaixo do nome do site para trocar pra um nome melhor.


E o site no ar!


Veja como ficou o meu aqui.

O que achou desse post? Ele te ajudou? Compartilha? Me conta?
Se encontrar algum erro me avisa? :)