Programação web

Programação web: HTML e CSS

A Programação Web: HTML e CSS refere-se ao conjunto de tecnologias fundamentais utilizadas para criar e estilizar páginas de internet. O HTML (HyperText Markup Language) serve para estruturar o conteúdo, enquanto o CSS (Cascading Style Sheets) é responsável pela apresentação visual.

O domínio dessas duas linguagens é a base para qualquer profissional que deseja atuar com desenvolvimento front-end, ou seja, a parte do site com a qual o usuário interage diretamente. Elas são a porta de entrada para a criação de interfaces digitais visualmente agradáveis e funcionalmente organizadas.

Compreender a interplay entre HTML e CSS é crucial para construir websites desde os mais simples até os mais complexos, sendo um conhecimento frequentemente abordado em cursos técnicos e vestibulares de tecnologia.

Características do HTML e CSS

As principais características que definem as linguagens HTML e CSS são:

• HTML (HyperText Markup Language): Linguagem de marcação para definir a estrutura e o conteúdo da página.
• CSS (Cascading Style Sheets): Linguagem de estilo para descrever a apresentação visual de um documento HTML.
• Interoperabilidade: HTML e CSS trabalham em conjunto para formar a interface de usuário de quase todos os websites.
• Padrões Abertos: Ambas são especificações abertas, desenvolvidas e mantidas pelo W3C (World Wide Web Consortium).
• Independência de Plataforma: O código criado funciona na maioria dos navegadores e sistemas operacionais.
• Acessibilidade: Permitem a criação de conteúdo web acessível para pessoas com deficiência, se bem aplicadas.

Estrutura de uma Página Web

A estrutura básica de uma página web é composta por elementos HTML organizados hierarquicamente, que são posteriormente estilizados pelo CSS.

• <!DOCTYPE html>: Declaração que define o tipo de documento como HTML5.
• <html lang=”pt-BR”>: Elemento raiz da página, que engloba todo o conteúdo e define o idioma.
• <head>: Contém metadados sobre a página, como título, links para CSS e scripts, e configurações de caracteres.
• <body>: Contém todo o conteúdo visível da página, como textos, imagens, vídeos e formulários.

Elementos HTML Fundamentais

Os elementos HTML são os “blocos de construção” para estruturar o conteúdo de uma página web.

Títulos e Parágrafos

Usados para organizar o texto e definir a hierarquia das informações.

Exemplo:

<h1>Título Principal da Página</h1>
<h2>Subtítulo de uma Seção</h2>
<p>Este é um parágrafo de texto que contém informações relevantes sobre o assunto.</p>
<p>Aqui está outro parágrafo, detalhando mais um pouco o conteúdo.</p>

Listas

Permitem organizar itens de forma ordenada (numerada) ou não ordenada (com marcadores).

Exemplo:

<ul>
<li>Item da lista não ordenada 1</li>
<li>Item da lista não ordenada 2</li>
</ul>

<ol>
<li>Primeiro item da lista ordenada</li>
<li>Segundo item da lista ordenada</li>
</ol>

Links e Imagens

Essenciais para navegação e inclusão de mídias visuais.

Exemplo:

<a href=”https://www.exemplo.com.br” target=”_blank”>Visitar Exemplo</a>
<img src=”caminho/para/imagem.jpg” alt=”Descrição da imagem” width=”300″ height=”200″>

Sintaxe do CSS e Seletores

O CSS utiliza seletores para mirar elementos HTML e aplicar estilos.

Seletores Básicos

Os seletores mais comuns são por tipo de elemento, classe e ID.

Exemplo:

/* Seletor de Tipo (elemento) */
p {
font-family: Arial, sans-serif;
color: #333;
}

/* Seletor de Classe */
.destaque {
background-color: yellow;
font-weight: bold;
}

/* Seletor de ID */
#cabecalho {
background-color: navy;
color: white;
padding: 20px;
}

Propriedades e Valores

Cada declaração CSS é composta por uma propriedade (o que estilizar) e um valor (como estilizar).

A propriedade color define a cor do texto, e o valor #333 especifica um tom de cinza escuro. Já font-size altera o tamanho da fonte, e 16px define esse tamanho em pixels.

Como HTML e CSS Trabalham Juntos

A integração entre HTML e CSS é fundamental para a criação de qualquer página web. O HTML fornece o esqueleto e o conteúdo, enquanto o CSS adiciona a “pele” e a beleza visual.

Inserindo CSS no HTML

Existem três maneiras principais de incluir CSS em um documento HTML:

1. Inline: Estilos aplicados diretamente no atributo style de um elemento HTML.

<p style=”color: blue; font-size: 18px;”>Texto azul e maior.</p>

1. Interno: Estilos definidos dentro da tag <style> no cabeçalho (<head>) do documento HTML.

<head>
<style>
h1 {
text-align: center;
color: green;
}
</style>
</head>

1. Externo: Estilos definidos em um arquivo .css separado e vinculado ao HTML via a tag <link> no cabeçalho. Esta é a maneira mais recomendada para projetos maiores e organizados.

<head>
<link rel=”stylesheet” href=”style.css”>
</head>

Exemplos Práticos

Para ilustrar a combinação de HTML e CSS, considere o seguinte exemplo de uma seção sobre “Formação Técnica”.

<!– index.html –>
<!DOCTYPE html>
<html lang=”pt-BR”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Formação Técnica em TI</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<header id=”cabecalho”>
<h1>Minha Jornada em TI</h1>
</header>

<main>
<section class=”conteudo-principal”>
<h2>Desenvolvimento Web</h2>
<p>Aprender <strong>HTML</strong> e <strong>CSS</strong> é o primeiro passo para construir qualquer interface web.</p>
<ul>
<li>Estruturar o conteúdo com HTML.</li>
<li>Estilizar elementos com CSS.</li>
<li>Criar páginas responsivas para diferentes dispositivos.</li>
</ul>
<a href=”#” class=”btn-saiba-mais”>Saiba Mais</a>
</section>

<section class=”galeria”>
<h3>Projetos Recentes</h3>
<div class=”projeto-item”>
<img src=”https://via.placeholder.com/150″ alt=”Projeto 1″>
<p>Website Institucional</p>
</div>
<div class=”projeto-item”>
<img src=”https://via.placeholder.com/150″ alt=”Projeto 2″>
<p>Loja Virtual Simplificada</p>
</div>
</section>
</main>

<footer>
<p>&copy; 2023 – Formação TI</p>
</footer>
</body>
</html>

/* styles.css */
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}

#cabecalho {
background-color: #0056b3;
color: white;
padding: 20px 0;
text-align: center;
}

#cabecalho h1 {
margin: 0;
}

main {
padding: 20px;
max-width: 960px;
margin: 20px auto;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

.conteudo-principal h2 {
color: #007bff;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
margin-top: 0;
}

.conteudo-principal ul {
list-style-type: square;
margin-left: 20px;
}

.btn-saiba-mais {
display: inline-block;
background-color: #28a745;
color: white;
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
margin-top: 15px;
}

.btn-saiba-mais:hover {
background-color: #218838;
}

.galeria {
margin-top: 30px;
border-top: 1px dashed #ccc;
padding-top: 20px;
}

.galeria h3 {
text-align: center;
color: #666;
}

.projeto-item {
display: inline-block;
margin: 10px;
text-align: center;
width: 150px;
vertical-align: top;
}

.projeto-item img {
border-radius: 5px;
border: 1px solid #ddd;
}

footer {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
margin-top: 30px;
}

No exemplo acima, o index.html define a estrutura do site, com cabeçalho, conteúdo principal, galeria e rodapé, usando tags como <h1>, <p>, <ul>, <section> e <img>. O styles.css por sua vez, aplica cores, tamanhos de fonte, alinhamentos e espaçamentos, transformando o conteúdo estrutural em uma página visualmente organizada e agradável.

Exercícios com Gabarito

1. (ENEM-2022)

Um desenvolvedor web precisa criar uma página que exiba uma lista de cursos e cada curso deve ter um link para uma descrição detalhada em outra página. Qual a combinação correta de tags HTML para essa finalidade?

• a) <list>, <link>
• b) <ul>, <a>
• c) <ol>, <src>
• d) <nav>, <go>
• e) <p>, <img>

Resposta: Alternativa b: A tag <ul> (lista não ordenada) é ideal para listar itens, e a tag <a> (âncora) é utilizada para criar links para outras páginas.

2. (Vestibular de Tecnologia-2023)

Considere o seguinte trecho de código CSS:

h1 {
color: red;
font-size: 24px;
}
.destaque {
color: blue;
}

Se um elemento <h1> tiver a classe destaque aplicada (<h1 class="destaque">Título</h1>), qual será a cor do texto “Título”?

• a) Preto
• b) Vermelho
• c) Azul
• d) Verde
• e) Amarelo

Resposta: Alternativa c: A cor será azul. No CSS, seletores de classe (.destaque) geralmente têm uma especificidade maior do que seletores de elemento (h1) quando aplicados ao mesmo elemento, sobrescrevendo a propriedade color definida para h1.