HTML div: Crie e Estilize Elementos para Web Design

Introdução

Neste laboratório, os participantes explorarão os conceitos fundamentais da criação e estilização de elementos <div> em HTML, com foco na compreensão de seu propósito, estrutura e versatilidade no design de páginas web. O laboratório guia os aprendizes por uma jornada abrangente do uso de elementos div, começando com a criação básica e progredindo para técnicas avançadas de estilização.

Os participantes aprenderão como os elementos div servem como contêineres essenciais para organizar e agrupar conteúdo web, descobrindo suas características de nível de bloco e praticando técnicas para personalizar tamanhos, posicionamento e aparência visual. Ao trabalhar com exemplos práticos e exercícios práticos, os alunos adquirirão habilidades práticas no uso de elementos div para criar layouts de páginas web lógicos e bem estruturados que aprimoram tanto o design quanto a funcionalidade.

Entenda o Propósito dos Elementos Div

Nesta etapa, você aprenderá sobre o propósito fundamental dos elementos <div> em HTML e como eles são usados para estruturar e organizar o conteúdo de uma página web.

Um elemento <div> (divisão) é um contêiner usado para agrupar e organizar outros elementos HTML. É um elemento versátil de nível de bloco que ajuda os desenvolvedores a criar seções lógicas e aplicar estilos a grupos de conteúdo. Pense em um <div> como uma caixa que pode conter outros elementos e ajudar a estruturar o layout da sua página web.

Vamos criar um arquivo HTML simples para demonstrar o uso básico de elementos <div>. Abra o WebIDE e crie um novo arquivo chamado div-example.html no diretório ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Element Example</title>
  </head>
  <body>
    <div>
      <h1>Welcome to My Website</h1>
      <p>This is a paragraph inside a div element.</p>
    </div>

    <div>
      <h2>About Section</h2>
      <p>Here's some information about our project.</p>
    </div>
  </body>
</html>

Neste exemplo, usamos dois elementos <div> para criar seções separadas na página. Cada <div> contém um título e um parágrafo, demonstrando como as divs podem agrupar conteúdo relacionado.

Características chave dos elementos <div>:

São elementos de nível de bloco (block-level elements), o que significa que geralmente começam em uma nova linha
Podem conter outros elementos HTML
São frequentemente usados para fins de layout e estilização
Não têm representação visual inerente sem CSS

Exemplo de saída quando visualizado em um navegador web:

Crie uma Div Básica com Conteúdo de Texto

Nesta etapa, você aprenderá como criar um elemento div e adicionar conteúdo de texto a ele. Com base na etapa anterior, exploraremos como adicionar texto significativo dentro dos elementos div.

Abra o WebIDE e modifique o arquivo div-example.html no diretório ~/project para incluir conteúdo de texto mais detalhado:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Text Content Example</title>
  </head>
  <body>
    <div>
      <h1>Welcome to Our Learning Platform</h1>
      <p>This div contains an introduction to our website.</p>
      <p>We provide interactive learning experiences for web development.</p>
    </div>

    <div>
      <h2>Course Highlights</h2>
      <p>Our courses cover various web technologies:</p>
      <ul>
        <li>HTML Fundamentals</li>
        <li>CSS Styling</li>
        <li>JavaScript Interactivity</li>
      </ul>
    </div>
  </body>
</html>

Neste exemplo, demonstramos várias maneiras de adicionar conteúdo de texto aos elementos div:

Usando tags de cabeçalho (<h1>, <h2>)
Adicionando parágrafos com tags <p>
Incluindo uma lista não ordenada com tags <ul> e <li>

Cada div pode conter vários tipos de texto e elementos HTML. Essa flexibilidade permite que você crie conteúdo estruturado e organizado em sua página web.

A saída de exemplo quando visualizada em um navegador web seria semelhante a:

Adicione Cor de Fundo ao Elemento Div

Nesta etapa, você aprenderá como adicionar cores de fundo aos elementos div usando estilos CSS inline. As cores de fundo ajudam a criar separação visual e a aprimorar o design da sua página web.

Abra o arquivo div-example.html no diretório ~/project e modifique-o para incluir cores de fundo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Background Color Example</title>
    <style>
      .intro-section {
        background-color: #f0f0f0;
        padding: 15px;
      }

      .courses-section {
        background-color: #e6f2ff;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <div class="intro-section">
      <h1>Welcome to Our Learning Platform</h1>
      <p>This section has a light gray background.</p>
      <p>Background colors help create visual hierarchy.</p>
    </div>

    <div class="courses-section">
      <h2>Course Highlights</h2>
      <p>This section has a light blue background.</p>
      <ul>
        <li>HTML Fundamentals</li>
        <li>CSS Styling</li>
        <li>JavaScript Interactivity</li>
      </ul>
    </div>
  </body>
</html>

Neste exemplo, demonstramos duas maneiras de adicionar cores de fundo:

Usando a tag CSS inline style na seção <head>
Criando classes CSS com cores de fundo específicas
Adicionando padding para criar algum espaço dentro da div

Pontos chave sobre cores de fundo:

Use códigos de cores hexadecimais (por exemplo, #f0f0f0)
Você pode usar nomes de cores ou valores RGB
A propriedade background-color define o fundo
padding adiciona espaço dentro da div

Exemplo de saída visual:

Explore as Características de Nível de Bloco do Elemento Div

Nesta etapa, você aprenderá sobre as características de nível de bloco dos elementos div e como eles se comportam no layout da página web. Os elementos div são únicos em sua capacidade de criar seções de conteúdo distintas que iniciam automaticamente em uma nova linha.

Crie um novo arquivo chamado block-level-example.html no diretório ~/project com o seguinte conteúdo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Block-Level Characteristics</title>
    <style>
      .block-example {
        border: 2px solid blue;
        margin: 10px 0;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="block-example">
      <h2>First Div Block</h2>
      <p>
        This is the first div element. Notice how it takes up the full width of
        its container.
      </p>
    </div>

    <div class="block-example">
      <h2>Second Div Block</h2>
      <p>
        This div starts on a new line, even though the previous div is right
        above it.
      </p>
    </div>

    <p>
      This is a paragraph outside the divs to show the block-level behavior.
    </p>
  </body>
</html>

Principais características de nível de bloco dos elementos div:

Eles sempre começam em uma nova linha
Eles ocupam toda a largura de seu contêiner pai
Eles criam um "bloco" de conteúdo que pode ser facilmente estilizado e posicionado

Para demonstrar a natureza de nível de bloco, adicionamos:

Uma borda azul para visualizar os limites de cada div
Margem e preenchimento para mostrar o espaçamento
Várias divs para ilustrar como elas se empilham verticalmente

A saída visual de exemplo seria semelhante a:

Personalize Tamanhos e Posicionamento de Div

Nesta etapa, você aprenderá como personalizar o tamanho e o posicionamento de elementos div usando propriedades CSS. Isso ajudará você a criar layouts web mais complexos e visualmente atraentes.

Crie um novo arquivo chamado div-sizing-example.html no diretório ~/project com o seguinte conteúdo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Div Sizing and Positioning</title>
    <style>
      .container {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
      }

      .box {
        width: 300px;
        height: 200px;
        background-color: #f0f0f0;
        margin: 20px;
        padding: 15px;
        border: 2px solid #333;
      }

      .inline-boxes {
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Div Sizing and Positioning Example</h1>

      <div class="box">
        <h2>Fixed Size Div</h2>
        <p>This div has a fixed width of 300px and height of 200px.</p>
      </div>

      <div class="inline-boxes">
        <div class="box">
          <h2>Inline Box 1</h2>
          <p>Flexbox allows divs to sit side by side.</p>
        </div>
        <div class="box">
          <h2>Inline Box 2</h2>
          <p>Divs can be easily positioned horizontally.</p>
        </div>
      </div>
    </div>
  </body>
</html>

Principais propriedades CSS para personalizar tamanhos e posicionamento de div:

width e height: Controlam o tamanho da div
margin: Adiciona espaço ao redor da div
padding: Adiciona espaço dentro da div
display: flex: Cria layouts flexíveis
max-width: Limita a largura máxima de uma div
margin: 0 auto: Centraliza uma div horizontalmente

A saída visual de exemplo seria semelhante a:

Resumo

Neste laboratório, os participantes exploraram o uso fundamental e a estilização de elementos <div> em HTML, com foco na compreensão de seu papel na estrutura e organização de páginas web. O laboratório guiou os alunos na criação de contêineres div básicos, na adição de conteúdo de texto, na aplicação de cores de fundo e no exame das características de nível de bloco desses versáteis elementos HTML.

Os participantes aprenderam como as divs servem como contêineres flexíveis para agrupar conteúdo relacionado, podem ser usadas para criar seções lógicas dentro de uma página web e fornecem uma base para layout e estilização. Ao praticar exemplos práticos, os alunos adquiriram habilidades práticas no uso de elementos div para estruturar o conteúdo web e aplicar propriedades CSS básicas, aprimorando sua compreensão da composição e das técnicas de design de páginas HTML.

Criar e Estilizar Elementos div em HTML