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

Usando Ferramentas de Desenvolvedor para Inspeção e Depuração de HTML

Ferramentas de Desenvolvedor

As ferramentas de desenvolvedor nos navegadores web são um conjunto de ferramentas integradas que permitem aos desenvolvedores inspecionar e depurar códigos HTML, CSS e JavaScript. Essas ferramentas podem ser acessadas pressionando F12 ou clicando com o botão direito em uma página da web e selecionando "Inspecionar".

Por exemplo, vamos examinar a página google.com. Ao pressionar F12, você pode acessar a seguinte visualização:

No lado esquerdo, está a guia Elements. Ela exibe a estrutura do documento HTML. Ao clicar em qualquer elemento, você visualiza os estilos desse elemento no lado direito - guia Styles. Ao passar o mouse sobre qualquer elemento, ele será destacado na página web.

Para observar seu funcionamento, consulte a breve gravação fornecida abaixo:

Além de inspecionar elementos, as ferramentas de desenvolvedor permitem modificar HTML e CSS. As alterações realizadas são refletidas instantaneamente na página, mas não são salvas permanentemente no código-fonte. Esse recurso é útil para testar e experimentar marcações e estilos.

Estilo de Código

Estilo de código em HTML refere-se aos princípios e diretrizes estabelecidos para estruturar e formatar o código HTML, visando melhorar a legibilidade, a manutenção e a uniformidade. Embora o HTML não imponha regras rígidas de estilo de código, seguir práticas consistentes pode aprimorar significativamente a compreensão do código e facilitar tarefas de desenvolvimento. Ao adotar convenções padronizadas, desenvolvedores garantem que seu código HTML seja mais fácil de entender e manipular.

Exemplo: HTML Bem Formatado

A seguir, um exemplo de código HTML bem estruturado e legível, baseado em práticas padrão de estilo de código:

index.html

Nota

Se você tem interesse em melhores práticas de estilização de código, recomenda-se visitar a seguinte fonte: Code Guide by @mdo.

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 3. Capítulo 6