Dia 7: Programação Web – HTML e CSS

O que é HTML?

HTML (HyperText Markup Language) é a linguagem de marcação usada para criar a estrutura básica de uma página web. Ele define o conteúdo e a organização da página, como títulos, parágrafos, imagens e links.

O HTML usa tags para organizar o conteúdo. Cada tag tem uma função específica, como criar um parágrafo, um título, uma lista ou uma imagem. As tags geralmente vêm em pares: uma tag de abertura e uma tag de fechamento.

1. Estrutura Básica de um Documento HTML

A estrutura básica de um arquivo HTML contém as seguintes partes:

htmlCopiar código<!DOCTYPE html>
<html>
  <head>
    <title>Título da Página</title>
  </head>
  <body>
    <h1>Bem-vindo ao meu site</h1>
    <p>Este é um parágrafo de texto.</p>
  </body>
</html>

Vamos entender cada parte:

  • <!DOCTYPE html>: Declara que estamos usando HTML5, a versão mais recente do HTML.
  • <html>: É a tag que engloba todo o conteúdo da página.
  • <head>: Contém informações sobre a página, como o título (que aparece na aba do navegador) e metadados.
  • <title>: Define o título que aparece na aba do navegador.
  • <body>: Contém todo o conteúdo visível da página, como texto, imagens e links.
  • <h1>: Cria um título de nível 1 (o maior e mais importante).
  • <p>: Cria um parágrafo de texto.

2. Principais Tags do HTML

Aqui estão algumas das tags mais usadas no HTML:

2.1. Títulos (Headings)

Os títulos são definidos pelas tags <h1> até <h6>, sendo <h1> o mais importante e <h6> o menor.

  • Exemplo prático:htmlCopiar código<h1>Este é um Título Grande</h1> <h3>Este é um Título Menor</h3>

2.2. Parágrafos

Os parágrafos são definidos com a tag <p>.

  • Exemplo prático:htmlCopiar código<p>Este é um parágrafo com texto simples.</p>

2.3. Imagens

Para inserir imagens, usamos a tag <img>. Ela não tem uma tag de fechamento e exige um atributo src, que indica o caminho da imagem.

  • Exemplo prático:htmlCopiar código<img src="imagem.jpg" alt="Descrição da imagem">

Aqui, src indica o caminho da imagem, e alt é o texto alternativo que aparece caso a imagem não carregue.

2.4. Links

Links são criados com a tag <a>, e o atributo href define o destino do link.

  • Exemplo prático:htmlCopiar código<a href="https://www.exemplo.com">Visite o site</a>

Aqui, o texto “Visite o site” será um link que levará o usuário para o endereço fornecido.

2.5. Listas

Você pode criar listas ordenadas ou não ordenadas com as tags <ol> (lista ordenada) e <ul> (lista não ordenada), e usar <li> para cada item.

  • Exemplo prático:htmlCopiar código<ul> <li>Item 1</li> <li>Item 2</li> </ul>

Isso cria uma lista com marcadores. Se você usar <ol>, os itens serão numerados.

O que é CSS?

CSS (Cascading Style Sheets) é o responsável por definir a aparência e o estilo da sua página HTML. Enquanto o HTML estrutura o conteúdo, o CSS é usado para aplicar cores, tamanhos, fontes e layouts.

3. Como o CSS Funciona

O CSS pode ser aplicado de três formas:

  • CSS Inline: Dentro da própria tag HTML.
  • CSS Interno: Dentro da tag <style> no arquivo HTML.
  • CSS Externo: Em um arquivo separado com extensão .css, vinculado ao arquivo HTML.

3.1. Sintaxe do CSS

O CSS segue o formato:

cssCopiar códigoseletor {
  propriedade: valor;
}
  • Seletor: Indica o elemento HTML que você quer estilizar (como h1, p, etc.).
  • Propriedade: O que você quer mudar (cor, tamanho, etc.).
  • Valor: O valor que você quer atribuir à propriedade.

3.2. Exemplo Básico de CSS

Aqui está um exemplo básico de como aplicar CSS a um documento HTML:

htmlCopiar código<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }
      h1 {
        color: blue;
        font-size: 40px;
      }
      p {
        font-family: Arial, sans-serif;
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>Bem-vindo ao meu site</h1>
    <p>Este é um parágrafo de exemplo.</p>
  </body>
</html>

Neste exemplo:

  • A cor de fundo da página será lightblue.
  • O título h1 será azul e terá tamanho de fonte 40px.
  • Os parágrafos terão a fonte Arial e serão verdes.

4. CSS Externo

É uma boa prática usar arquivos CSS externos para manter o código HTML limpo e organizado. O CSS externo é salvo em um arquivo .css, e o HTML faz referência a ele usando a tag <link> no <head>.

Exemplo de CSS Externo:

  1. Crie um arquivo chamado estilos.css:
cssCopiar códigobody {
  background-color: lightblue;
}
h1 {
  color: blue;
  font-size: 40px;
}
p {
  font-family: Arial, sans-serif;
  color: green;
}
  1. No arquivo HTML, você linka o CSS externo assim:
htmlCopiar código<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <h1>Bem-vindo ao meu site</h1>
    <p>Este é um parágrafo de exemplo.</p>
  </body>
</html>

5. Prática: Criando sua Primeira Página Web Completa

Agora que você conhece os conceitos básicos de HTML e CSS, vamos criar uma página simples para praticar.

Passos:

  1. Crie o HTML básico:htmlCopiar código<!DOCTYPE html> <html> <head> <title>Minha Primeira Página</title> </head> <body> <h1>Olá, Mundo!</h1> <p>Esta é minha primeira página web.</p> <img src="imagem.jpg" alt="Uma bela imagem"> <a href="https://www.exemplo.com">Visite este link</a> </body> </html>
  2. Crie um arquivo CSS para estilizar:cssCopiar códigobody { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: #333; } p { color: #555; font-size: 18px; }
  3. Vincule o CSS ao HTML:htmlCopiar código<link rel="stylesheet" href="estilos.css">

Resumo Final

  • HTML define a estrutura da página web usando tags.
  • CSS estiliza a página, definindo cores, fontes, tamanhos e layout.
  • Praticar a criação de páginas simples vai te ajudar a dominar esses conceitos e permitir que você crie sites dinâmicos e visualmente agradáveis.