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:
- 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;
}
- 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:
- 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> - Crie um arquivo CSS para estilizar:cssCopiar código
body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: #333; } p { color: #555; font-size: 18px; } - 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.
Portuguese 
English