Apresentação e Conceitos sobre a linguagem HTML
HTML (Hypertext Markup Language) é uma linguagem de marcação usada para
estruturar o conteúdo de páginas web. Ele consiste em uma série de elementos, cada um
com um propósito específico, interpretados pelos navegadores para exibir o conteúdo da
página.
Principais Tags
As tags HTML são elementos usados para estruturar e formatar o conteúdo de uma
página. Algumas das principais tags incluem <html>, <head>, <body>, <p>, <h1> a <h6>,
<img>, <a>, <ul>, <ol>, <li>, <table>, <tr>, <td>, entre outras.
Estruturação da linguagem e exemplos iniciais
A estrutura básica de um documento HTML inclui as tags <html>, <head>, e <body>. O
conteúdo visível da página é colocado na tag <body>.
Exemplo de estrutura HTML básica:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título da Página</title>
</head>
<body>
<h1>Meu Primeiro Site</h1>
<p>Este é um parágrafo de exemplo.</p>
</body>
</html>
Organização e Estruturação mínimas de sites
A organização mínima de um site geralmente envolve a criação de diferentes páginas
HTML, cada uma contendo elementos comuns, como cabeçalho, menu e rodapé.
Exemplo de estrutura de um site com múltiplas páginas:
index.html: Página inicial
sobre.html: Página "Sobre nós"
contato.html: Página de contato
estilos.css: Arquivo CSS para estilização
Exemplos e Atividades práticas
Atividades práticas envolvem criar documentos HTML que exibam diferentes tipos de
conteúdo, como texto, imagens, links e listas, e entender como a estruturação afeta a
aparência da página.
Sintaxe dos elementos HTML
Os elementos HTML têm uma sintaxe básica: uma tag de abertura, opcionalmente
conteúdo e uma tag de fechamento. Alguns elementos, como imagens, podem ser vazios
e não precisam de uma tag de fechamento.
Exemplo de sintaxe de um elemento normal:
<p>Este é um parágrafo de exemplo.</p>
Elementos Vazios
Elementos vazios não têm conteúdo interno e são fechados em uma única tag.
Exemplo de elemento vazio:
<img src="imagem.jpg" alt="Descrição da imagem">
Atributos dos elementos HTML
Atributos fornecem informações adicionais sobre elementos HTML e geralmente são
especificados dentro da tag de abertura.
Exemplo de atributo em uma tag HTML:
<a href="https://www.example.com">Link para o exemplo</a>
Comandos HTML
Comandos HTML são usados para definir a estrutura e o comportamento de elementos
HTML. Por exemplo, <p> é usado para parágrafos, <a> para links e <img> para imagens.
Elementos <p>, <br>, <h1> a <h6>
<p>: Define um parágrafo de texto.
<br>: Insere uma quebra de linha.
<h1> a <h6>: Define títulos de diferentes níveis de importância, sendo <h1> o mais
importante e <h6> o menos.
Inserindo Figuras na página (imagens locais e entrega via CDN)
Para inserir imagens em uma página HTML, você pode usar a tag <img>, especificando o
atributo src com o caminho da imagem local ou a URL da imagem no CDN.
Exemplo de inserção de imagem local:
<img src="imagem.jpg" alt="Descrição da imagem">
Exemplo de inserção de imagem via CDN:
<img src="https://example.com/imagem.jpg" alt="Descrição da imagem">
Inserindo Links para outras páginas e URLs
Para inserir links em uma página HTML, você pode usar a tag <a>, especificando o
atributo href com o URL da página ou recurso externo.
Exemplo de inserção de link para outra página:
<a href="outra_pagina.html">Link para outra página</a>
Exemplo de inserção de link para URL externa:
<a href="https://www.example.com">Link para o exemplo</a>
Manipulando Listas
HTML oferece três tipos principais de listas: ordenadas, não-ordenadas e de definições.
Exemplo de lista ordenada:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Exemplo de lista não-ordenada:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Exemplo de lista de definições:
<dl>
<dt>Termo 1</dt>
<dd>Definição 1</dd>
<dt>Termo 2</dt>
<dd>Definição 2</dd>
</dl>
Manipulando Tabelas
Tabelas em HTML são criadas usando as tags <table>, <tr> e <td> para definir linhas e
células.
Exemplo de tabela HTML:
<table border="1">
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>João</td>
<td>30</td>
</tr>
<tr>
<td>Maria</td>
<td>25</td>
</tr>
</table>
Criando Formulários em Páginas Web
Formulários em HTML são criados usando a tag <form> e elementos de entrada como
<input>, <select>, <textarea>, etc. O CSS pode ser usado para estilizar esses elementos e
melhorar sua aparência.
Exemplo de formulário HTML:
<form action="/submit" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Enviar">
</form>
Descrever a função e a importância do CSS para as páginas web
CSS (Cascading Style Sheets) é essencial para as páginas web, pois separa o conteúdo
estrutural (HTML) da apresentação visual (estilo). Isso permite uma maior flexibilidade e
controle sobre o layout e o design de uma página. A importância do CSS reside na sua
capacidade de criar layouts responsivos, melhorar a acessibilidade, facilitar a manutenção
do código e fornecer uma experiência de usuário mais agradável.
Apresentar a sintaxe e as possibilidades de criação com CSS aplicado ao
layout
A sintaxe básica do CSS envolve selecionar elementos HTML e aplicar estilos a eles. Os
estilos podem incluir propriedades como cor, fonte, tamanho, margem, preenchimento,
etc. As possibilidades de criação com CSS são praticamente ilimitadas, permitindo criar
layouts complexos, animações, efeitos visuais e muito mais.
Exemplo de regra CSS básica:
/* Seletor */
h1 {
/* Propriedade: valor */
color: blue;
font-size: 24px;
Criar páginas HTML estilizadas com CSS
Para criar páginas HTML estilizadas com CSS, basta vincular um arquivo CSS externo ao
documento HTML usando a tag <link> no <head> do documento. Dentro do arquivo CSS,
você pode definir estilos para diferentes elementos HTML usando seletores.
Exemplo de vinculação de arquivo CSS externo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título da Página</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Meu Primeiro Site</h1>
<p>Este é um parágrafo de exemplo.</p>
</body>
</html>
Estilização com CSS
Utilizando a linguagem CSS para estilizar páginas em HTML
Ao utilizar CSS para estilizar páginas HTML, é possível criar uma aparência visualmente
atraente e coesa para todo o site. Isso pode incluir a definição de cores, fontes,
espaçamentos, layouts e outros aspectos visuais para garantir uma experiência do usuário
consistente e agradável.
Mais exemplos de estilização com CSS
Além dos exemplos anteriores, aqui estão mais alguns exemplos de estilização com CSS:
Estilização de parágrafos:
p{
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
Estilização de links:
css
a{
text-decoration: none;
color: #007bff;
a:hover {
text-decoration: underline;
}
Estilização de botões:
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
.button:hover {
background-color: #0056b3;
Layouts responsivos com media queries:
@media screen and (max-width: 600px) {
/* Estilos para telas menores que 600px de largura */
body {
font-size: 14px;
