O HTML é dividido em três tags: <head>
, <body>
e <html>
(que cobre as
outras duas tags).
<html>
<head>
</head>
<body>
<!-- Seu site -->
</body>
</html>
Porém, iremos estudar a estrutura responsiva de um site, que fica dentro do
<body>
. Essa estrutura, se baseia em 3 partes:
- Header;
- Main;
- Footer.
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
O Header é responsável por ser a parte de navegação do site, pode conter informações do próprio site como logo, links, contatos etc. Também serve como introdução ao site.
Responsividade:
Logo|Space|NavItems
if NavItems > Space, thenLogo|Space|NavIcon
(just tailwind sm)- NavIcon button functionality
Logo|Space|NavIcon
if pressedLogo|Space|NavXIcon{V - Navitems}
opens down Navitems. if NavItems < SpaceLogo|Space|NavItems
(useSate and useEffect).
Ficar no topo:
- just
position: sticky
andtop: 0
.
O main é responsável por mostrar o conteúdo principal do site.
O footer é responsável pelo rodapé da página. Geralmente, ele contém informações como créditos, links para informações adicionais, dados de contato ou qualquer outra informação relacionada ao final da página.