Neste post vamos aprender um pouco das muitas tag que tem HTML.
É um passo a passo para principiantes para poder replicar este site.
Para isso vamos a usar fronteditor, que é uma interface de desenvolvimento online e o curioso dela que foi desenvolvida por um Brasileiro muito querido, o Mayk Brito educator da Rocketseat.
Pronto para iniciar
Passo 1: Abrir um explorador de internet e digitar o endereço
Passo 2: Digitar código HTML na parte esquerda da interface
Aparecerá uma interface como está, dividida em dois, a parte esquerda é para escrever o código e a direita é nossa página web.
Passo 3: No lado esquerdo digite um signo de exclamação !
Isso ajudara a Emmet (Emmet abbreviation é uma inteligência artificial, que escrevera a estrutura básica de HTML5 para nós)
Como a tecla tag, selecciona !, ou usa o mouse para clicar sobre ele
Agora temos a estrutura básica de nosso HTML
E pouco a pouco podemos dar forma para criar um site como este, genial né?
Passo 4: Vamos a limpar nosso código (apagamos o que não precisamos)
As tag meta podemos apagar
Modificamos a linguagem a pt-BR
<html lang="pt-BR">
E modificamos o título da página para Link de perfil
<title>Link de perfil</title>
Passo 5: Vamos a pensar no corpo
Observe bem a página que queremos recrear
Concorda, que precisamos de uma elementos "tag" para:
- O texto principal <h1>
- A foto <img>
- O texto de cada elemento da lista <span> e uma lista não ordenada <ul> que contenga estos textos
- E os ícones para apresentar uma imagem de cada link
Bora codar
Passo 6: Usa um <div> para encerrar o código, quando desejar aplicar o CSS será mais fácil identificar esse bloco de código de dar a estilização nomeando ele por uma classe ou um id.
Tag que abre deve fechar </div>
Assim
<div> </div>
Pressiona enter para colocar o bloco de código dentro dele
<div>
</div>
Retomamos os elementos definidos no passo 5
- O texto principal <h1>
- A foto <img>
- O texto de cada elemento da lista <span> e uma lista não ordenada <ul> que contenga estos textos
- E os ícones para apresentar uma imagem de cada link
Passo 7: Use a tag <h1> e escrever dentro o texto desejado, lembra fechar a tag </h1>
<h1>Links | Nadi Duno </h1>
Podes usar os teus dados para seguir a construção da página web.
Observa que ao lado direito vai refletir o que estás codando, boa né
Passo 8: Use a tag <img> e coloca o url da foto, a tag img fecha em si mesma <img />
A tag img tem atributos como src e alt.
src: é para colocar o caminho ou rota da imagem, pode ser local ou por url.
alt: é o texto alternativo (serve para a acessibilidade, leitores de tela para pessoas com deficiência visual e para descrever a imagem em caso de que não seja carregada)
<img src="" alt=""/>
Para a rota, usaremos a foto de nosso perfil de github, procura em tue github teu perfil e agrega ao final ".png"
https://github.com/nadiduno
Assim
https://github.com/nadiduno.png
Para a descripção, observa tua foto e descreve, se vem explícito já que ajuda no tema da acessibilidade, em caso de não querer descrever recomendo deixar o alt em branco ;) vale
<img src=" https://github.com/nadiduno.png " alt="Foto de uma menina parda, com cabelo preso, camisa branca, jaqueta preta, com um fundo amarelo" />
Passo 9: Use a tag <ul> para listar os link, lembra fechar a tag </ul>
<ul>
</ul>
Para cada elemento da lista usa a tag <li>
Assim
<li>Elemento</li>
Bora a construir nossa lista, podes ver a imagem de referência do nosso site a construímos junt@s.
<ul>
<li>LinkedIn</li>
</ul>
Temos nosso o primer elemento 😎 wiiiiiii
Porém o elemento deve ser um link, então devemos usar uma tag <a>
Vamos para o passo 9 agora
Passo 9: Use a tag <a> para referenciar uma URL da web, lembra fechar a tag </a>
A tag a tem atributos como href e target.
href: é para colocar a URL de sua preferência
target: indica se a página vai abrir na mesma aba ou em outra, vamos da indicaram que abra em outra aba com _blank<a href="" target="">
Para a href, usaremos nossa URL de linkedin
https://www.linkedin.com/in/nadiduno
e para target, _blank
Assim
<a href="https://www.linkedin.com/in/nadiduno" target="_blank">
Para escrever dentro do <li> quebramos a linha e damos enter no teclado
<li>
LinkedIn
</li>
Arriba da palavra LinkedIn agregamos nossa tag a que já temos, assim
<li>
<a href="https://www.linkedin.com/in/nadiduno" target="_blank">
LinkedIn
</li>
Agora sim temos uma lista com um link, pode dar clic
Observa que abre em uma nova aba nosso linkedIn
Passo 10: Usa um ícone para acompanhar o texto do link
Eu recomendo usar uma biblioteca de ícones e importar em nosso código é só fazer as importações.
Deixo aqui o código que trouxe da web
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
E devemos colocar no header, em cima do title, pressione enter para quebrar a linha
<head>
<title>Link de perfil</title>
</head>
Agora colocamos o link
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Link de perfil</title>
</head>
Agora, vamos na tag <li>
e agregamos uma tag <span> para envolver o texto e poder aplicar uma classe com o nome do ícone
Assim
<span class="fa fa-linkedin"> Linkedin</span>
Ficando nosso código do <li>
<li>
<a href="https://www.linkedin.com/in/nadiduno" target="_blank">
<span class="fa fa-linkedin"> Linkedin</span>
</li>
Passo 11: Usa o código do <li> de Linkedin e repite para agregar GitHub
E modifica onde está linkedin por github, também o URL
https://github.com/nadiduno
Assim
<li>
<a href="https://github.com/nadiduno" target="_blank">
<span class="fa fa-github"> GitHub</span>
</li>
O código da lista até agora esta asssim, com 2 elementos na lista (LinKedin e GitHub)
<ul>
<li>
<a href="https://www.linkedin.com/in/nadiduno" target="_blank">
<span class="fa fa-linkedin"> Linkedin</span>
</li>
<li>
<a href="https://github.com/nadiduno" target="_blank">
<span class="fa fa-github"> GitHub</span>
</li>
</ul>
Passo 12: Coloca 1 novo elemento (youtube ou instagram)
Passo 13: Copia o CSS na aba de CSS.
Vou deixar um link do CSS para você só copiar, se deseja aprender detalhadamente o CSS aplicado aqui, deixe aqui um comentário aqui.
Nenhum comentário:
Postar um comentário