HTML 5 e CSS 3

(solid, dotted, dashed, etc.).

Exemplo:

div {

  border: 2px solid black;

}

É possível também personalizar apenas lados específicos (border-top, border-left, etc.) e utilizar border-radius para bordas arredondadas.

3.4 margin

A propriedade margin determina o espaço externo do elemento, afastando-o dos elementos vizinhos. Assim como padding, pode ser especificada para todos os lados ou individualmente.

Exemplo:

div {

  margin: 30px;

}

Para centralizar um elemento horizontalmente dentro de seu contêiner pai, pode-se usar:

div {

  margin: 0 auto;

}

Margens também podem colapsar entre elementos verticais consecutivos, um comportamento conhecido como colapso de margens.

4. Comportamento de elementos block e inline

A aplicação correta do Box Model também depende do tipo de caixa que o elemento gera: block ou inline.

4.1 Elementos do tipo block

Elementos block (em bloco) ocupam toda a largura disponível de seu contêiner pai, iniciando uma nova linha automaticamente. Aceitam todas as propriedades do Box Model, inclusive width, height, margin e padding.

Exemplos: <div>, <p>, <h1> a <h6>, <section>, <article>

Comportamento:

div {

  width: 400px;

  margin: 20px;

  padding: 10px;

}

4.2 Elementos do tipo inline

Elementos inline (em linha) não iniciam uma nova linha e ocupam apenas o espaço necessário ao seu conteúdo. Não respeitam width e height, mas aceitam padding e margin apenas horizontalmente.

Exemplos: <span>, <a>, <strong>, <em>

Comportamento:

span {

  padding: 5px;

  margin-right: 10px;

}

4.3 Alterando o display padrão

Com a propriedade display, é possível alterar o comportamento padrão de um elemento:

a {

  display: block;

}

Esse recurso é útil para personalizar layouts e permitir que elementos inline se comportem como blocos ou vice-versa.

5. Considerações finais

Compreender o Box Model é indispensável para quem deseja dominar o layout de páginas web com CSS. Ao entender como funcionam as propriedades width, height, padding, border e margin, e como elas interagem com o tipo de caixa do elemento (block ou inline), o desenvolvedor passa a ter controle total sobre o espaçamento, alinhamento e posicionamento dos elementos na interface.

Esse conhecimento é a base para temas mais avançados como flexbox, grid layout, responsividade e design adaptativo, todos construídos sobre os fundamentos do modelo de caixa. Portanto, o domínio do Box Model é o primeiro passo essencial para construir layouts profissionais, consistentes e eficientes.

Referências Bibliográficas

• DUCKETT, Jon. HTML and CSS: Design and Build

• Websites. Wiley, 2011.
• FREEMAN, Elisabeth; ROBSON, Eric. Use a Cabeça! HTML e CSS. Alta Books, 2015.
• MDN Web Docs – Mozilla Developer Network. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/CSS/box_model
• W3Schools. CSS Box Model. Disponível em: https://www.w3schools.com/css/css_boxmodel.asp
• CASTRO, Elizabeth; HYSLOP, Bruce. HTML5 e CSS3: Guia Prático e Visual. Alta Books, 2013.

Organização e Estrutura com <div> e Classes em CSS

1. Introdução

A organização visual e estrutural de páginas web depende da capacidade de dividir o conteúdo em blocos lógicos e manipuláveis. No HTML, a tag <div> (abreviação de division) é amplamente utilizada para essa finalidade, pois permite agrupar outros elementos em blocos sem significado semântico próprio, servindo como base para aplicação de estilos com CSS.

Além da <div>, o uso de classes e IDs permite identificar, selecionar e estilizar elementos de forma precisa e eficiente. Combinados com propriedades de posicionamento como display, position e float, esses recursos tornam possível a construção de layouts responsivos e bem estruturados.

2. Uso da <div> para layout

A tag <div> é um contêiner genérico usado para agrupar conteúdo e estruturar partes da página. Ela não possui significado semântico, mas é extremamente útil como recipiente para aplicar estilos ou lógica com CSS e JavaScript.

Exemplo de estrutura com <div>:

<div class="cabecalho">...</div>

<div class="conteudo">...</div>

<div class="rodape">...</div>

Essa estrutura é comum em páginas web, onde cada <div> representa uma seção da interface. O uso da <div> é recomendado quando não há um elemento semântico mais apropriado (como <header>, <main>, <footer>), especialmente em versões antigas do HTML.

Vantagens do uso da <div>:

• Cria blocos independentes de layout.
• Facilita a aplicação de estilos personalizados.
• Permite controle preciso sobre posicionamento e dimensões.

3. Criação de seções com class e id

Para aplicar estilos com CSS, é necessário identificar os elementos no HTML. Isso é feito por meio dos atributos class e id.

3.1 class

O atributo class pode ser atribuído a múltiplos elementos e é usado para aplicar estilos comuns. No CSS, é selecionado com um ponto (.).

HTML:

<div class="bloco">Texto A</div>

<div class="bloco">Texto B</div>

CSS:

.bloco {

  background-color: lightgray;

  padding: 10px;

}

3.2 id

O atributo id identifica unicamente um elemento em toda a página. No CSS, é referenciado com uma cerquilha (#).

HTML:

<div id="menu">Menu principal</div>

CSS:

#menu {

background-color: navy;

  color: white;

}

O uso combinado de div, class e id é fundamental para criar uma estrutura HTML clara e um CSS organizado, permitindo a construção de layouts reutilizáveis, escaláveis e de fácil manutenção.

4. Posicionamento com display, position e float

4.1 display

A propriedade display define como um elemento deve se comportar visualmente em relação ao fluxo da página. Os valores mais comuns são:

• block: o elemento ocupa toda a largura disponível e inicia uma nova linha.
• inline: o elemento ocupa apenas o espaço necessário, sem quebra de linha.
• inline-block: combina características dos dois anteriores.
• none: oculta o elemento da página.

Exemplo:

.menu-item {

  display: inline-block;

  margin-right: 15px;

}

O display também é fundamental para técnicas modernas de layout, como flex e grid, mas seu uso básico já permite controle significativo sobre o comportamento dos elementos.

4.2 position

A propriedade position define como o navegador deve posicionar o elemento em relação a outros:

• static (padrão): segue o fluxo normal da página.
• relative: permite mover o elemento com top, left, right, bottom, mantendo seu espaço reservado.
• absolute: posiciona o elemento em relação ao ancestral mais próximo com position: relative.
• fixed: fixa o elemento em relação à janela do navegador.
• sticky: alterna entre relative e fixed dependendo da rolagem.

Exemplo:

.balao {

  position: absolute;

  top: 10px;

  right: 20px;

}

4.3 float

A propriedade float foi amplamente utilizada para layout antes do surgimento do Flexbox. Ela permite que um elemento "flutue" à esquerda ou direita do contêiner, fazendo com que o conteúdo restante flua ao redor.

Exemplo:

.imagem {

  float: left;

  margin-right: 20px;

}

O uso de float exige atenção ao esvaziamento de fluxo com clear: both ou técnicas como clearfix, pois pode causar sobreposição de elementos se mal utilizado.

5. Considerações finais

A construção de páginas web organizadas e visualmente equilibradas depende do uso consciente de elementos estruturais como a <div>, combinados com identificadores (class e id) e propriedades de layout como display, position e float. Esses recursos possibilitam dividir o conteúdo em blocos, aplicar estilos distintos e definir como cada parte da página se comporta no layout geral.

O domínio desses fundamentos é essencial para a criação de sites profissionais, e serve de base para abordagens mais modernas, como Flexbox, Grid Layout e frameworks CSS. Um bom projeto começa com estruturação lógica, clara e semântica — mesmo

quando se utiliza elementos genéricos como a <div>.

Referências Bibliográficas

• DUCKETT, Jon. HTML and CSS: Design and Build Websites. Wiley, 2011.
• FREEMAN, Elisabeth; ROBSON, Eric. Use a Cabeça! HTML e CSS. Alta Books, 2015.
• CASTRO, Elizabeth; HYSLOP, Bruce. HTML5 e CSS3: Guia Prático e Visual. Alta Books, 2013.
• MDN Web Docs – Mozilla Developer Network. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/CSS
• W3Schools. CSS Layout Tutorial. Disponível em: https://www.w3schools.com/css/css_box.asp

Projeto Prático: Página Pessoal Simples com HTML e CSS

1. Introdução

O aprendizado de HTML e CSS é consolidado com a prática. Criar uma página pessoal simples é uma das atividades mais eficazes para aplicar os conhecimentos fundamentais da web. Neste projeto, o objetivo é estruturar uma página que contenha informações básicas sobre uma pessoa, incluindo nome, biografia, hobbies, redes sociais e uma foto, com o uso de HTML para marcação e CSS externo para estilização.

A proposta é desenvolver um site de uma única página, que simula uma apresentação pessoal online — formato cada vez mais comum em portfólios, currículos digitais e perfis profissionais.

2. Estrutura da Página com HTML

A estrutura básica do HTML serve como esqueleto para o conteúdo. O primeiro passo é criar um documento .html com os elementos principais: cabeçalho, conteúdo e rodapé.

2.1 Elementos essenciais

A seguir, um exemplo de estrutura inicial:

<!DOCTYPE html>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8">

  <title>Meu Perfil Pessoal</title>

  <link rel="stylesheet" href="estilos.css">

</head>

<body>

  <header>

    <h1>João da Silva</h1>

    <p>Desenvolvedor Front-End | Estudante de Tecnologia</p>

  </header>

  <section class="foto">

    <img src="foto.jpg" alt="Foto de João da Silva">

  </section>

  <section class="biografia">

    <h2>Sobre Mim</h2>

    <p>Sou apaixonado por tecnologia, estudo programação e busco oportunidades para aplicar meus conhecimentos em projetos reais.</p>

  </section>

  <section class="hobbies">

    <h2>Meus Hobbies</h2>

    <ul>

      <li>Leitura</li>

      <li>Jogos eletrônicos</li>

      <li>Ciclismo</li>

    </ul>

  </section>

  <section class="contato">

    <h2>Redes Sociais</h2>

    <ul>

      <li><a href="https://github.com/joaosilva" target="_blank">GitHub</a></li>

      <li><a href="https://linkedin.com/in/joaosilva" target="_blank">LinkedIn</a></li>

    </ul>

  </section>

  <footer>

    <p>© 2025 João da Silva. Todos os direitos reservados.</p>

  </footer>

</body>

</html>

Nesse exemplo, utilizam-se

tags semânticas como <header>, <section> e <footer>, que melhoram a organização do código e a acessibilidade da página.

3. Inclusão de imagem, links e listas

3.1 Imagem

A imagem é adicionada com a tag <img>, que exige pelo menos dois atributos:

• src: define o caminho do arquivo de imagem.
• alt: descreve o conteúdo da imagem para leitores de tela e casos de falha no carregamento.

<img src="foto.jpg" alt="Minha foto de perfil">

A imagem pode estar localizada na mesma pasta do arquivo HTML ou em um subdiretório (ex: imagens/foto.jpg).

3.2 Links

Os links são definidos com a tag <a>, sendo que o atributo href especifica o destino, e target="_blank" faz o link abrir em nova aba.

<a href="https://linkedin.com/in/joaosilva" target="_blank">LinkedIn</a>

Os links podem ser externos (outros sites) ou internos (outras páginas do mesmo site).

3.3 Listas

Listas são úteis para organizar informações em tópicos, como hobbies ou redes sociais. Usa-se <ul> para listas não ordenadas e <li> para os itens:

<ul>

  <li>Leitura</li>

  <li>Esportes</li>

</ul>

Esse formato torna a informação mais legível e visualmente estruturada.

4. Estilização com CSS Externo

O uso de um arquivo CSS externo separa a lógica de estilo da estrutura HTML, facilitando a manutenção e promovendo o reuso dos estilos.

4.1 Criando o arquivo .css

Crie um arquivo chamado estilos.css e salve-o na mesma pasta do HTML. No <head> da página HTML, vincule o CSS com:

<link rel="stylesheet" href="estilos.css">

4.2 Exemplo de estilização

body {

  font-family: Arial, sans-serif;

  background-color: #f2f2f2;

  margin: 0;

  padding: 0;

}

header {

  background-color: #333;

  color: white;

  text-align: center;

  padding: 20px;

}

.foto img {

  display: block;

  margin: 20px auto;

  width: 150px;

  border-radius: 50%;

}

section {

  margin: 20px;

  padding: 10px;

  background-color: white;

  border-radius: 8px;

}

a {

  color: #0066cc;

  text-decoration: none;

}

a:hover {

  text-decoration: underline;

}

footer {

  text-align: center;

  padding: 10px;

  font-size: 12px;

  background-color: #ccc;

}

Com essas regras, a página recebe uma aparência limpa, com uma paleta neutra, imagem centralizada, elementos destacados em seções e um rodapé discreto.

5. Considerações finais

Criar uma página pessoal simples com HTML e CSS é um excelente exercício para consolidar os fundamentos do desenvolvimento web. Ao estruturar o conteúdo com HTML semântico e aplicar estilos com um CSS externo, o desenvolvedor iniciante compreende na prática conceitos como separação de responsabilidades, hierarquia de

elementos, aplicação de imagens, listas e links, além de boas práticas de formatação visual.

Esse tipo de projeto pode ser facilmente expandido com o uso de formulários, animações, layout responsivo e integração com redes sociais. É também uma ótima base para um portfólio pessoal ou currículo digital.

Referências Bibliográficas

• DUCKETT, Jon. HTML and CSS: Design and Build Websites. Wiley, 2011.
• FREEMAN, Elisabeth; ROBSON, Eric. Use a Cabeça! HTML e CSS. Alta Books, 2015.
• CASTRO, Elizabeth; HYSLOP, Bruce. HTML5 e CSS3: Guia Prático e Visual. Alta Books, 2013.
• MDN Web Docs – Mozilla Developer Network. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web
• W3Schools. HTML and CSS Tutorial. Disponível em: https://www.w3schools.com