Dominando Div HTML e Estilização CSS: Guia Completo

Introdução

Neste laboratório, você aprenderá como usar a tag HTML <div> para dividir uma página web em diferentes seções ou partes. Você também aprenderá como aplicar CSS aos elementos que são agrupados usando a tag <div>.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Criando a Estrutura da Página Web

Abra o arquivo index.html no seu editor de texto.

Primeiro, crie a estrutura básica do arquivo HTML adicionando a declaração doctype, as tags <html>, <head> e <body>.

<!doctype html>
<html>
  <head>
    <title>Minha Página Web</title>
  </head>
  <body></body>
</html>

Adicionando o Cabeçalho

Nesta etapa, adicionaremos a seção de cabeçalho à página web usando a tag <div>.

Dentro da tag <body>, adicione uma tag <div> com o nome de classe "header".

<div class="header"></div>

Adicione algum conteúdo dentro da tag <div> para representar a seção de cabeçalho. Por exemplo:

<div class="header">
  <h1>Bem-vindo ao meu site</h1>
</div>

Adicionando as Seções da Barra Lateral e Conteúdo Principal

Em seguida, adicionaremos as seções de barra lateral e conteúdo principal à página web usando a tag <div>.

Dentro da tag <body>, adicione outra tag <div> com o nome de classe "container".

<div class="container"></div>

Dentro da tag <div> "container", adicione mais duas tags <div> – uma para a barra lateral e outra para o conteúdo principal. Dê a elas os nomes de classe "sidebar" e "main-content", respectivamente.

<div class="container">
  <div class="sidebar">
    <!-- adicionar conteúdo da barra lateral -->
  </div>
  <div class="main-content">
    <!-- adicionar conteúdo principal aqui -->
  </div>
</div>

Adicione conteúdo dentro das tags <div> para representar as seções de barra lateral e conteúdo principal. Por exemplo:

<div class="container">
  <div class="sidebar">
    <h2>Sobre Mim</h2>
    <p>Olá, meu nome é John e sou desenvolvedor web.</p>
  </div>
  <div class="main-content">
    <h2>Meu Último Projeto</h2>
    <p>Confira meu último projeto web!</p>
  </div>
</div>

Adicionando o Rodapé

Finalmente, adicionaremos a seção de rodapé à página web usando a tag <div>.

Dentro da tag <body>, adicione outra tag <div> com o nome de classe "footer".

<div class="footer"></div>

Adicione algum conteúdo dentro da tag <div> para representar a seção de rodapé. Por exemplo:

<div class="footer">
  <p>&copy; 2021 Meu Site. Todos os direitos reservados.</p>
</div>

Estilizando a Página Web

Agora que criamos a estrutura básica da página web usando a tag <div>, podemos aplicar estilos CSS para deixar a página com uma aparência melhor.

Abra o arquivo style.css no seu editor de texto, ou crie um novo arquivo chamado style.css e vincule-o ao arquivo index.html usando a tag <link> dentro da seção <head>.

<!doctype html>
<html>
  <head>
    <title>Minha Página Web</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body></body>
</html>

No arquivo style.css, adicione os seguintes estilos aos diferentes nomes de classe que usamos anteriormente:

/* Estilos do cabeçalho */
.header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

/* Estilos do container */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* Estilos da barra lateral */
.sidebar {
  width: 30%;
  padding: 10px;
  background-color: #f2f2f2;
}

/* Estilos do conteúdo principal */
.main-content {
  width: 65%;
  padding: 10px;
  background-color: #fff;
}

/* Estilos do rodapé */
.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

Visualizando a Página Web

Agora que criamos a estrutura da página web e aplicamos estilos CSS usando a tag <div>, vamos visualizar a página web em um navegador.

Salve os arquivos index.html e style.css.
Abra o arquivo index.html em um navegador para ver a página web.

Você deve ver uma página web com um cabeçalho, barra lateral, conteúdo principal e seção de rodapé, todos bem estilizados usando CSS.

Resumo

Neste laboratório, você aprendeu como usar a tag HTML <div> para dividir uma página web em diferentes seções ou partes. Você também aprendeu como aplicar estilos CSS às diferentes seções usando os nomes de classe atribuídos a elas. Com essas técnicas, você pode criar páginas web mais complexas e visualmente atraentes.

Tag Div HTML e Estilização CSS