By Giovanni Francesco Guarnieri
Do desenho para o HTML
A transição de um layout para o HTML é um dos primeiros passos para a criação de um site. Neste processo, é importante entender a estrutura do layout e como ele pode ser interpretado em HTML.
Nesse momento não nos preocupamos com a estilização da página, mas sim com a estruturação do conteúdo. A estruturação precisa envolver as melhores Tags HTML para cada tipo de conteúdo. Melhorando a semântica e acessibilidade do site.
É normal que que um outro desenvolvedor ou designer possa interpretar o layout de forma diferente. Desde que a estruturação do conteúdo seja feita de forma correta, a estilização pode ser feita de diversas formas.
Neste exemplo, temos um layout de uma página de exemplo. O layout foi desenhado no Figma e agora será interpretado em HTML.
Figma é uma ferramenta de design de interface do usuário baseada na Web. Ele oferece uma interface gráfica do usuário, edição de vetores, prototipagem e ferramentas de colaboração.
SaaSDesign - Figma Website Template - Landing Page (Free)Header da Página
Como o desenvolvedor pode interpretar o layout do header da página em HTML?
<header>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
<span class="logo">
Landing
</span>
<button class="btn-primary">
Buy Now
</button>
</header>
Section 1 - Main
Antes do código, podemos dividir a página em seções. Cada agrupamento pode ser representada por uma div. Um código bem dividido pode ser mais fácil de ser estilizado e mantido. Além disso, a divisão em seções pode facilitar a interpretação do layout.
Como o desenvolvedor pode interpretar o layout do main da página em HTML?
<main>
<section>
<div class="description">
<h1>Introduce Your Product Quickly & Effectively</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
</p>
<p>
mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</p>
<div class="buttons-area">
<button class="btn-primary">Purchase UI Kit</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
<div class="image-area">
<img src="#" alt="Imagem chamativa">
</div>
</section>
</main>
Section 2 - Main
Como essa parte também faz parte da main, essa section seria adicionada dentro da main já criada no código anterior
Como o desenvolvedor pode interpretar o layout do main da página em HTML?
<section>
<div class="description">
<h1>Light, Fast & Powerful</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
</p>
<p>
mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</p>
<div class="items">
<div class="item">
<img src="#" alt="Imagem da opção">
<h2>Title Goes Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
</div>
<div class="item">
<img src="#" alt="Imagem da opção">
<h2>Title Goes Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
</div>
</div>
</div>
<div class="image-area">
<img src="#" alt="Imagem chamativa">
</div>
</section>
Footer
Como o desenvolvedor pode interpretar o layout do footer da página em HTML?
<footer>
<div class="top-content">
<span>
© 2024 Yourcompany
</span>
<span class="logo">
Landing
</span>
<button class="btn-primary">
Purchase now
</button>
</div>
<div class="bottom-content">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<nav>
<ul>
<li><a href="#"><img src="#" alt="Facebook"></a></li>
<li><a href="#"><img src="#" alt="LinkedIn"></a></li>
<li><a href="#"><img src="#" alt="Twitter"></a></li>
<li><a href="#"><img src="#" alt="Youtube"></a></li>
<li><a href="#"><img src="#" alt="Instagram"></a></li>
</ul>
</nav>
</div>
</footer>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Página de exemplo</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
<span class="logo">
Landing
</span>
<button class="btn-primary">
Buy Now
</button>
</header>
<main>
<section>
<div class="description">
<h1>Introduce Your Product Quickly & Effectively</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
</p>
<p>
mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</p>
<div class="buttons-area">
<button class="btn-primary">Purchase UI Kit</button>
<button class="btn-secondary">Learn More</button>
</div>
</div>
<div class="image-area">
<img src="#" alt="Imagem chamativa">
</div>
</section>
<section>
<div class="description">
<h1>Light, Fast & Powerful</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
</p>
<p>
mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</p>
<div class="items">
<div class="item">
<img src="#" alt="Imagem da opção">
<h2>Title Goes Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
</div>
<div class="item">
<img src="#" alt="Imagem da opção">
<h2>Title Goes Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
</div>
</div>
</div>
<div class="image-area">
<img src="#" alt="Imagem chamativa">
</div>
</section>
</main>
<footer>
<div class="top-content">
<span>
© 2024 Yourcompany
</span>
<span class="logo">
Landing
</span>
<button class="btn-primary">
Purchase now
</button>
</div>
<div class="bottom-content">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<nav>
<ul>
<li><a href="#"><img src="#" alt="Facebook"></a></li>
<li><a href="#"><img src="#" alt="LinkedIn"></a></li>
<li><a href="#"><img src="#" alt="Twitter"></a></li>
<li><a href="#"><img src="#" alt="Youtube"></a></li>
<li><a href="#"><img src="#" alt="Instagram"></a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>
❕🗒️ Atividade de Fixação - 1
Propor a estrutura HTML da seguinte seção:
❕🗒️ Atividade de Fixação - 2
Propor a estrutura HTML da seguinte página: