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

O Papel do Head do Documento

O cabeçalho do documento pode incluir meta tags, muitas das quais não são visíveis para o usuário na janela do navegador. Portanto, nos próximos exemplos, você não verá nenhum conteúdo visível. Essas tags armazenam informações de metadados sobre a página.

Título da Página

O texto dentro da tag <title> é exibido na aba do navegador. O título deve ser uma descrição concisa da página e conter no máximo 60 caracteres.

index.html

Com a ajuda deste código, é possível obter essa aparência no site. Na aba do navegador, será exibido exatamente o texto contido na tag <title> (moldura branca na imagem).

Metadados

A tag <meta> contém informações para navegadores e mecanismos de busca: codificação do documento, comunicação de dados e muito mais. As tags meta podem possuir diversos atributos, pois cada uma transmite informações diferentes. O mais importante é a codificação da página, que auxilia o navegador a exibir o texto corretamente. Caso a codificação não seja informada, o navegador pode apresentar mojibake em vez dos caracteres.

index.html

Significado dos Atributos da Tag meta

name: nome de uma propriedade pode ser qualquer palavra ou frase, mas os navegadores geralmente esperam um valor que possam reconhecer e usar para executar uma ação. Um exemplo seria <meta name="author" content="name"> para indicar o autor da página;
content: especifica o valor da propriedade. Um exemplo seria <meta name="language" content="english"> para especificar o idioma do texto da página;
http-equiv: significa equivalente HTTP, e é usado para simular cabeçalhos de resposta HTTP. Isso é raro de ver. Um exemplo seria <meta http-equiv="refresh" content="30"> para indicar ao navegador que atualize a página a cada 30 minutos.

Meta Tags Básicas para Melhoria de SEO

<meta name="description"/>: especifica uma breve descrição da página web;
<meta name="author" />: especifica o autor da página web;
<meta name="language"/>: especifica o idioma da página web;
<meta name="robots"/>: informa aos mecanismos de busca como rastrear ou indexar a página web;
<meta name="googlebot" content="notranslate"/>: informa ao Google para não oferecer traduções automáticas da página web;
<meta name="copyright" content="Copyright 2024"/>: especifica o direito autoral da página web.