Scribd
Carregar
22 visualizações5 páginas

Capítulo 2 - HTML

O capítulo introduz HTML como a linguagem padrão para criar páginas web, detalhando sua estrutura básica e elementos semânticos. Ele aborda a criação de formulários, listas, tabelas, e a inserção de multimídia, além de boas práticas para acessibilidade e SEO. O uso de meta tags é destacado como essencial para otimização em motores de busca.

Enviado por

rsbernini0
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
22 visualizações5 páginas

Capítulo 2 - HTML

O capítulo introduz HTML como a linguagem padrão para criar páginas web, detalhando sua estrutura básica e elementos semânticos. Ele aborda a criação de formulários, listas, tabelas, e a inserção de multimídia, além de boas práticas para acessibilidade e SEO. O uso de meta tags é destacado como essencial para otimização em motores de busca.

Enviado por

rsbernini0
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 5

Capítulo 2 - HTML

Capítulo 2: HTML
Introdução ao HTML

O que é HTML?
HTML (HyperText Markup Language) é a linguagem padrão para criar e projetar páginas na
web. Ele usa uma série de elementos para descrever a estrutura e o conteúdo de uma
página web.

Estrutura Básica de um Documento HTML


Um documento HTML básico tem a seguinte estrutura:

<!DOCTYPE html>
<html lang="pt-BR">
<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>Olá, Mundo!</h1>
<p>Este é um parágrafo de exemplo.</p>
</body>
</html>

Elementos e Tags
Tags Semânticas
As tags semânticas ajudam a descrever melhor o conteúdo e melhoram a acessibilidade e o
SEO.

<header>
<h1>Cabeçalho da Página</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<section>
<h2>Seção Principal</h2>
<p>Conteúdo da seção principal.</p>
</section>
<article>
<h2>Artigo</h2>
<p>Conteúdo do artigo.</p>
</article>
<footer>
<p>Rodapé da página.</p>
</footer>

Formulários e Inputs
Formulários são usados para coletar dados dos usuários.

<form action="/submit" method="post">


<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<input type="submit" value="Enviar">


</form>

Listas e Tabelas
Listas e tabelas são usadas para organizar dados.

Listas:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>

Tabelas:

<table>
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rafael</td>
<td>30</td>
</tr>
<tr>
<td>Ana</td>
<td>25</td>
</tr>
</tbody>
</table>

Multimídia
Inserção de Imagens, Áudios e Vídeos
HTML permite a inserção de mídias como imagens, áudios e vídeos.

Imagens:

<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">

Áudios:

<audio controls>
<source src="caminho/para/audio.mp3" type="audio/mpeg">
Seu navegador não suporta o elemento de áudio.
</audio>

Vídeos:

<video width="320" height="240" controls>


<source src="caminho/para/video.mp4" type="video/mp4">
Seu navegador não suporta o elemento de vídeo.
</video>

Formulários

Criação de Formulários com Diferentes Tipos de Inputs


Formulários podem conter vários tipos de inputs para coletar diferentes tipos de dados.

<form action="/submit" method="post">


<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<label for="email">Email:</label>
<input type="email" id="email" name="email">

<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha">

<label for="data">Data de Nascimento:</label>


<input type="date" id="data" name="data">

<label for="genero">Gênero:</label>
<select id="genero" name="genero">
<option value="masculino">Masculino</option>
<option value="feminino">Feminino</option>
<option value="outro">Outro</option>
</select>

<input type="submit" value="Enviar">


</form>

Atributos e Validação de Formulários


HTML5 introduziu vários atributos para validação de formulários.

<form action="/submit" method="post">


<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha" minlength="6" required>

<input type="submit" value="Enviar">


</form>

Boas Práticas
Acessibilidade e SEO
Boas práticas de HTML incluem garantir que o conteúdo seja acessível e otimizado para
motores de busca.

Acessibilidade:
Use tags semânticas.
Adicione atributos alt às imagens.
Use aria-* atributos para melhorar a acessibilidade.
<img src="caminho/para/imagem.jpg" alt="Descrição da imagem" aria-
label="Descrição detalhada">

SEO:
Use meta tags para descrever o conteúdo da página.
Use tags de cabeçalho ( <h1> , <h2> , etc.) para estruturar o conteúdo.

<head>
<meta name="description" content="Descrição da página para motores de
busca">
<meta name="keywords" content="palavras-chave, separadas, por, vírgula">
</head>

Uso de Meta Tags


Meta tags fornecem informações sobre a página que não são exibidas para o usuário, mas
são úteis para navegadores e motores de busca.

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descrição da página">
<meta name="author" content="Nome do Autor">
<title>Título da Página</title>
</head>

Este é um resumo abrangente do capítulo sobre HTML. Se precisar de mais detalhes sobre
algum tópico específico ou tiver alguma dúvida, sinta-se à vontade para perguntar!

Você também pode gostar