Conteúdo do Curso

HTML Definitivo

1. Compreendendo o Desenvolvimento Web

Bem-vindo ao HTML e Desenvolvimento Web O Que É a Internet?Como a Internet Funciona?Compreendendo Como os Sites Funcionam Explicação Sobre Desenvolvimento Frontend e Backend

2. Tags e Atributos HTML

Compreensão das Tags HTML Trabalhando com Atributos HTML Compreensão de Tags Pareadas e Únicas em HTML Marcação e Formatação de Texto em HTML Desafio: Crie o Parágrafo da Sua Primeira Página Web Desafio: Construir uma Página Web de Apresentação Pessoal Desafio: Criar uma Página Web de Exibição de Filmes Usando Links e Botões em HTML Desafio: Criar Links para Sites Populares Validando Seu Código HTML para Melhores Práticas

3. Estrutura do Documento HTML

Os Segredos por Trás de Páginas Web Bem Estruturadas Compreensão da Estrutura do Documento HTML O Papel do Head do Documento Gerenciamento do Fluxo e Layout do Documento Desafio: Estruturar Corretamente um Documento HTML Usando Ferramentas de Desenvolvedor para Inspeção e Depuração de HTML

4. Trabalhando com Mídia e Tabelas

Adicionando Imagens em HTML Desafio: Trabalhar com Imagens Trabalhando com Imagens Clicáveis, Legendas e Otimização Compreendendo Gráficos Vetoriais e Rasterizados Incorporação de Áudio e Vídeo para Conteúdo Multimídia Avançado Desafio: Incorporar Áudio e Vídeo em HTML Criando e Estruturando Tabelas em HTML Desafio: Criar uma Tabela HTML Funcional

5. Formulários HTML e Entrada do Usuário

Introdução aos Formulários HTML Fundamentos da Criação de Formulários em HTML Usando Rótulos para Melhor Acessibilidade de Formulários Aperfeiçoando Formulários com Atributos de Entrada Explorando Diferentes Tipos de Entrada em HTML Desafio: Criar Formulário com Campos e Rótulos Trabalhando com o Elemento Textarea para Entrada Multilinha Usando o Elemento Select para Menus Suspensos Usando o Elemento Datalist para Sugestões de Entrada Predefinidas Agrupamento de Elementos de Formulário para Melhor Estrutura

Compreensão de Tags Pareadas e Únicas em HTML

No HTML, existem tanto tags em pares quanto tags únicas (também conhecidas como tags autossuficientes ou elementos vazios). Cada tipo possui um propósito específico e desempenha uma função distinta.

Tags em Pares

Tags em pares consistem em uma tag de abertura e uma de fechamento. Elas podem envolver o conteúdo e agrupar itens para alterar algumas propriedades ou reunir elementos por significado.

Sintaxe:

html

Veja um exemplo real de uso de tags em pares:

index.html

Neste exemplo:

<section>...</section>: agrupa conteúdos relacionados;
<h1>...</h1>: adiciona um título para a seção;
<p>...</p>: contém um parágrafo explicando que a maioria das tags HTML são usadas em pares.

Tags Simples

Tags simples consistem apenas em uma tag de abertura, sem tag de fechamento. São utilizadas quando a tag não requer conteúdo ou quando todo o conteúdo e comportamento são definidos por meio de atributos.

Sintaxe:

html

Aqui está um exemplo real de uso de tags simples:

index.html

Este código inclui dois elementos:

<input />: cria um campo de entrada de texto. O atributo placeholder=" name" exibe uma dica dentro da caixa;
<img />: exibe uma imagem de frutas.
- alt="Fruits": texto exibido caso a imagem não seja carregada;
- width e height: definem as dimensões da imagem;
- src: especifica a URL da imagem.

Aninhamento de Tags

Ao aninhar tags, seguir a ordem hierárquica é essencial, semelhante a bonecas russas. Cada tag aninhada deve ser devidamente incluída dentro de sua tag pai, respeitando as regras da sintaxe HTML.

Veja um exemplo de tags aninhadas:

html

Considere o próximo exemplo válido:

index.html

Este código exibe um parágrafo com um link e texto em destaque:

<p>...</p>: envolve todo o parágrafo;
<a href="https://privacy.com">...</a>: cria um link clicável para a Política de Privacidade;
<strong>...</strong>: deixa a palavra "website" em negrito para destacá-la.

Resumindo

HTML é composto por tags pareadas e simples, cada uma com finalidades diferentes. Tags pareadas possuem uma tag de abertura e uma de fechamento para envolver o conteúdo, enquanto tags simples são autocontidas. Aninhar corretamente as tags e seguir a hierarquia adequada são essenciais para uma estrutura HTML bem formada.

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 3