Apostila 1 — Curso HTML Básico

HTML BÁSICO

 

MÓDULO 1 – Conhecendo o HTML 

Aula 1 – O que é HTML e como funciona a Web

 

Quando acessamos um site pelo computador ou pelo celular, normalmente não pensamos em tudo o que acontece até que aquela página apareça na tela. Em poucos segundos, o navegador solicita informações a um servidor na internet, recebe diversos arquivos e interpreta seu conteúdo para exibir textos, imagens, vídeos e outros recursos. Entre esses arquivos, o mais importante é o documento HTML, responsável por organizar a estrutura da página. O navegador interpreta esse documento e transforma seu código em uma interface visual que pode ser utilizada pelo usuário.

HTML é a sigla para HyperText Markup Language, ou Linguagem de Marcação de Hipertexto. Apesar de muitas pessoas dizerem que estão "programando em HTML", ele não é uma linguagem de programação. Seu papel é estruturar o conteúdo de uma página, indicando quais partes são títulos, parágrafos, listas, imagens, tabelas, formulários e outros elementos. Em conjunto com o CSS, responsável pela aparência, e o JavaScript, que adiciona interatividade, o HTML forma a base do desenvolvimento web moderno.

A palavra "hipertexto" refere-se à capacidade de conectar documentos por meio de links. Esse conceito revolucionou a forma como navegamos pela internet, permitindo que uma página leve o usuário para outra com apenas um clique. Hoje, praticamente todos os sites utilizam essa característica para criar menus, referências, páginas internas e conteúdos relacionados, tornando a navegação muito mais dinâmica e intuitiva.

O HTML organiza as informações utilizando tags, que funcionam como marcadores capazes de identificar cada parte do conteúdo. Existem tags específicas para criar títulos, inserir parágrafos, adicionar imagens, construir listas, elaborar tabelas e desenvolver formulários. Dessa forma, o navegador consegue compreender o significado de cada elemento e apresentá-lo corretamente ao usuário. Quanto melhor organizada estiver essa estrutura, mais fácil será a manutenção do site e melhor será a experiência de navegação.

Outro conceito importante é a diferença entre estrutura e aparência. Imagine uma casa: primeiro é construída sua estrutura, com paredes, portas e janelas; somente depois são adicionados pintura, decoração e móveis. No desenvolvimento web acontece algo semelhante. O HTML representa a estrutura da página, enquanto o CSS define as cores, fontes e o layout visual. Já o JavaScript acrescenta recursos

interativos, como menus dinâmicos, animações e validação de formulários. Essa separação torna os projetos mais organizados e facilita futuras alterações.

Ao longo dos anos, o HTML passou por diversas atualizações até chegar ao HTML5, versão atualmente adotada como padrão para a criação de páginas na web. O HTML5 trouxe melhorias importantes, como novos elementos semânticos, maior compatibilidade entre navegadores e suporte mais eficiente para conteúdos multimídia, reduzindo a necessidade de tecnologias externas para incorporar vídeos e áudios. Além disso, sua estrutura foi simplificada, tornando o desenvolvimento mais acessível para iniciantes e mais eficiente para profissionais.

Aprender HTML representa o primeiro passo para quem deseja ingressar no universo do desenvolvimento web. Mesmo sendo uma linguagem relativamente simples, ela fornece a base necessária para compreender como os sites são construídos. Com esse conhecimento, torna-se muito mais fácil evoluir para o estudo de CSS, JavaScript e outras tecnologias utilizadas na criação de aplicações modernas. Dominar os conceitos fundamentais desde o início contribui para produzir páginas bem organizadas, acessíveis e preparadas para crescer conforme novos recursos forem sendo adicionados.

Referências bibliográficas

DEVMEDIA. HTML5: fundamentos para desenvolvimento web.

MDN WEB DOCS. HTML: Linguagem de Marcação de Hipertexto.

MDN WEB DOCS. Iniciando com HTML.

W3C BRASIL. Curso de HTML5 – Escritório Brasileiro do W3C.

SILVA, Maurício Samy. HTML5: A Linguagem de Marcação que Revolucionou a Web. Novatec.


Aula 2 – Estrutura básica de um documento HTML

 

Ao criar uma página na web, o primeiro passo é montar sua estrutura básica. Assim como uma casa precisa de fundação, paredes e telhado antes de receber a decoração, uma página HTML também precisa de uma organização mínima para que o navegador consiga interpretá-la corretamente. Essa estrutura é simples, mas extremamente importante, pois serve como base para qualquer site, desde uma página pessoal até grandes portais da internet.

Todo documento HTML começa com a declaração <!DOCTYPE html>. Embora ela não seja uma tag, sua função é informar ao navegador que o arquivo foi escrito seguindo o padrão HTML5. Essa instrução evita problemas de compatibilidade e garante que a página seja interpretada de acordo com os padrões atuais da web. Em seguida, aparece o elemento <html>, conhecido como elemento raiz, que envolve todo o conteúdo da página. É

nessa tag que também se recomenda informar o idioma principal do documento por meio do atributo lang, como lang="pt-BR". Essa prática melhora a acessibilidade, auxilia leitores de tela e favorece a indexação pelos mecanismos de busca.

Dentro do elemento <html> encontram-se duas partes principais: <head> e <body>. Apesar de trabalharem juntas, cada uma possui uma função específica. O <head> reúne informações destinadas ao navegador e aos mecanismos de busca, chamadas de metadados. Essas informações normalmente não aparecem para o visitante da página, mas são fundamentais para seu funcionamento. Já o <body> contém todo o conteúdo que será exibido ao usuário, como títulos, textos, imagens, tabelas, vídeos e formulários. Essa divisão torna o código mais organizado e facilita tanto o desenvolvimento quanto a manutenção do site.

Entre os elementos presentes no <head>, um dos mais importantes é a tag <meta charset="UTF-8">. Ela define a codificação de caracteres utilizada pela página, permitindo que acentos, cedilhas, símbolos e caracteres especiais sejam exibidos corretamente. Atualmente, o padrão UTF-8 é o mais recomendado, pois oferece suporte à maioria dos idiomas utilizados no mundo. A ausência dessa configuração pode provocar erros de exibição, comprometendo a leitura do conteúdo.

Outro elemento indispensável é a tag <title>, responsável por definir o título da página. Esse título aparece na aba do navegador, é utilizado quando o usuário adiciona a página aos favoritos e também pode ser exibido nos resultados dos mecanismos de pesquisa. Embora seja um elemento pequeno, ele contribui para a organização do site e para uma melhor identificação do conteúdo pelo usuário. Por isso, recomenda-se utilizar títulos claros, objetivos e relacionados ao tema da página.

O <body> é a área onde todo o conteúdo visível será construído. É nele que o desenvolvedor insere títulos, parágrafos, listas, imagens, links e diversos outros elementos que compõem uma página web. Nos próximos módulos do curso, praticamente todas as novas tags estudadas serão adicionadas dentro dessa seção. Compreender essa organização desde o início facilita o aprendizado e reduz erros comuns durante o desenvolvimento dos primeiros projetos.

Além da estrutura básica, é importante criar o hábito de manter o código organizado por meio da identação, que consiste em utilizar recuos para destacar a hierarquia entre os elementos. Embora a identação não altere o funcionamento da página, ela torna o

código organizado por meio da identação, que consiste em utilizar recuos para destacar a hierarquia entre os elementos. Embora a identação não altere o funcionamento da página, ela torna o código muito mais legível, facilita a identificação de erros e melhora o trabalho em equipe. Desenvolvedores experientes consideram essa prática um padrão essencial para produzir códigos claros e de fácil manutenção.

Aprender a estrutura básica de um documento HTML representa um dos passos mais importantes para quem está iniciando no desenvolvimento web. Uma página bem estruturada facilita a inclusão de novos recursos, melhora a compatibilidade entre navegadores e cria uma base sólida para o estudo de CSS e JavaScript. Ao dominar esses conceitos desde o começo, o estudante desenvolve boas práticas que acompanharão toda a sua evolução como desenvolvedor.

Referências bibliográficas

DEVMEDIA. HTML5: fundamentos para desenvolvimento web.

MDN WEB DOCS. HTML: Sintaxe básica de HTML.

MDN WEB DOCS. Metadados em HTML.

W3C BRASIL. Curso de HTML5 – Escritório Brasileiro do W3C.

SILVA, Maurício Samy. HTML5: A Linguagem de Marcação que Revolucionou a Web. Novatec.


Aula 3 – Primeiros elementos HTML

 

Depois de conhecer a estrutura básica de um documento HTML, chega o momento de inserir conteúdo na página. É nessa etapa que o desenvolvedor começa a transformar uma página em branco em um ambiente organizado e fácil de navegar. Os primeiros elementos estudados são responsáveis por estruturar textos, criar títulos e destacar informações importantes. Embora sejam simples, eles formam a base de praticamente todos os sites existentes na internet.

Os títulos são criados utilizando as tags <h1> até <h6>, cada uma representando um nível diferente de importância. O <h1> normalmente identifica o assunto principal da página, enquanto os demais níveis organizam subtítulos e seções secundárias. Essa hierarquia facilita a leitura para as pessoas e também ajuda navegadores, leitores de tela e mecanismos de busca a compreenderem a estrutura do conteúdo. Uma boa prática é utilizar os títulos em ordem lógica, evitando saltar níveis apenas por questões visuais. Caso seja necessário alterar o tamanho da fonte, essa personalização deve ser feita posteriormente com CSS, e não pela escolha inadequada da tag de título.

Os parágrafos são representados pela tag <p> e servem para organizar blocos de texto. Em vez de utilizar várias quebras de linha para separar informações, recomenda-se que cada

ideia seja escrita dentro de um parágrafo próprio. Essa organização melhora a experiência de leitura, torna o código mais limpo e facilita futuras alterações. Um texto bem dividido em parágrafos também favorece a compreensão do conteúdo por diferentes dispositivos e tecnologias assistivas.

Outro recurso bastante utilizado é a quebra de linha, realizada com a tag <br>. Ela deve ser empregada apenas quando realmente houver necessidade de manter uma mudança de linha dentro do mesmo parágrafo, como em endereços, poemas ou letras de músicas. Utilizar diversas quebras de linha para criar espaçamentos entre blocos de conteúdo não é considerado uma boa prática, pois esse tipo de ajuste pertence ao CSS. Separar corretamente estrutura e apresentação resulta em páginas mais organizadas e fáceis de manter.

Durante o desenvolvimento também é comum adicionar comentários ao código utilizando a sintaxe <!-- comentário -->. Os comentários não aparecem para o visitante da página, pois são ignorados pelo navegador. Eles servem para registrar observações, explicar trechos importantes ou facilitar o trabalho em equipe. Quando utilizados de forma equilibrada, tornam o código mais compreensível, especialmente em projetos maiores ou que serão mantidos por diferentes desenvolvedores.

Além da organização do texto, o HTML oferece elementos que permitem destacar determinadas palavras ou expressões. Entre os mais utilizados estão <strong>, que indica maior importância ao conteúdo, e <em>, empregado para dar ênfase a uma palavra ou expressão. Embora os navegadores normalmente exibam esses elementos em negrito e itálico, respectivamente, seu principal objetivo é transmitir significado ao conteúdo. Essa característica faz parte da chamada marcação semântica, que descreve o papel de cada elemento em vez de apenas definir sua aparência visual.

A semântica é um dos conceitos mais importantes do HTML moderno. Utilizar a tag correta para cada tipo de conteúdo permite que navegadores, mecanismos de busca e leitores de tela interpretem melhor a página. Por exemplo, um texto marcado como título realmente será reconhecido como um título, enquanto um parágrafo será identificado como um bloco de texto. Essa organização contribui para melhorar a acessibilidade, facilitar a navegação e tornar o código mais padronizado. Por esse motivo, recomenda-se sempre escolher os elementos de acordo com sua função, e não apenas pela aparência que produzem na tela.

Ao dominar esses primeiros elementos, o

esses primeiros elementos, o estudante passa a compreender como o HTML organiza as informações de uma página. Títulos, parágrafos, comentários, quebras de linha e elementos de destaque são recursos simples, mas indispensáveis para construir documentos claros, acessíveis e fáceis de manter. Esses conhecimentos servirão de base para a criação de páginas cada vez mais completas ao longo do curso.

Referências bibliográficas

DEVMEDIA. HTML5: fundamentos para desenvolvimento web.

MDN WEB DOCS. Fundamentos do texto em HTML.

MDN WEB DOCS. Sintaxe básica de HTML.

W3C BRASIL. Curso de HTML5 – Escritório Brasileiro do W3C.

SILVA, Maurício Samy. HTML5: A Linguagem de Marcação que Revolucionou a Web. Novatec.


Estudo de Caso – Módulo 1

Da curiosidade ao primeiro site: aprendendo com os erros

 

Lucas sempre teve interesse em tecnologia, mas nunca havia criado uma página na internet. Depois de assistir a alguns vídeos e ler materiais introdutórios sobre HTML, decidiu desenvolver uma página simples para apresentar seu currículo e divulgar seus projetos pessoais.

Empolgado, ele abriu um editor de texto e começou a escrever diretamente os conteúdos da página. Digitou seu nome, adicionou algumas informações sobre sua formação e inseriu uma lista com suas habilidades. Ao salvar o arquivo e abri-lo no navegador, percebeu que o resultado estava muito diferente do esperado: todo o texto aparecia praticamente em um único bloco, sem títulos bem definidos, sem organização e com aparência pouco profissional.

Ao revisar seu trabalho, Lucas descobriu que havia cometido alguns erros bastante comuns entre iniciantes. O primeiro deles foi não utilizar a estrutura básica de um documento HTML. O arquivo não possuía a declaração <!DOCTYPE html>, nem os elementos <html>, <head> e <body>. Como consequência, o navegador interpretou o conteúdo sem seguir a estrutura recomendada para um documento HTML5. Seguir a estrutura padrão é essencial para garantir compatibilidade entre navegadores e facilitar a manutenção do código.

Outro problema foi o uso inadequado dos títulos. Lucas utilizou apenas textos em letras maiúsculas para destacar seções importantes, acreditando que isso seria suficiente para indicar a organização da página. Depois de estudar melhor o HTML, percebeu que os títulos devem ser marcados com elementos específicos, como <h1>, <h2> e <h3>, respeitando uma hierarquia lógica. Além de melhorar a leitura, essa prática favorece a acessibilidade e ajuda mecanismos de busca

foi o uso inadequado dos títulos. Lucas utilizou apenas textos em letras maiúsculas para destacar seções importantes, acreditando que isso seria suficiente para indicar a organização da página. Depois de estudar melhor o HTML, percebeu que os títulos devem ser marcados com elementos específicos, como <h1>, <h2> e <h3>, respeitando uma hierarquia lógica. Além de melhorar a leitura, essa prática favorece a acessibilidade e ajuda mecanismos de busca a compreenderem o conteúdo da página.

Ele também utilizou diversas quebras de linha para separar os textos, em vez de organizar as informações em parágrafos. Isso tornou o código confuso e difícil de modificar. Ao aprender a utilizar corretamente a tag <p>, percebeu que cada ideia deveria estar em um parágrafo próprio, tornando tanto o código quanto a leitura muito mais claros.

Outro detalhe importante foi a ausência de comentários no código. Inicialmente, Lucas acreditava que comentários eram desnecessários em projetos pequenos. Entretanto, conforme a página começou a crescer, ficou mais difícil localizar determinadas partes do documento. Ao incluir comentários para identificar seções específicas, conseguiu navegar pelo código com mais facilidade durante as revisões.

Depois de reorganizar toda a página, Lucas adotou boas práticas de desenvolvimento. Criou a estrutura correta do documento, definiu o idioma da página, utilizou títulos em ordem hierárquica, separou o conteúdo em parágrafos e manteve uma identação consistente. O resultado foi uma página muito mais organizada, fácil de entender e preparada para receber novos recursos, como imagens, links e formulários.

Esse primeiro projeto mostrou que desenvolver páginas web não depende apenas de fazer o conteúdo aparecer no navegador. Utilizar corretamente os elementos HTML desde o início cria uma base sólida para projetos maiores, melhora a acessibilidade e facilita futuras manutenções.

Erros comuns observados

  • Iniciar o arquivo sem a estrutura básica do HTML5.
  • Não definir o idioma da página.
  • Utilizar texto em negrito ou letras maiúsculas no lugar das tags de título.
  • Separar conteúdos utilizando apenas várias quebras de linha.
  • Não organizar o conteúdo em parágrafos.
  • Escrever código sem identação ou organização.
  • Ignorar comentários quando eles podem facilitar a manutenção do projeto.

Como evitar esses erros

  • Sempre iniciar um novo projeto utilizando a estrutura padrão do HTML5.
  • Definir corretamente o
  • idioma da página (lang="pt-BR").
  • Utilizar títulos (<h1> a <h6>) respeitando sua hierarquia.
  • Organizar cada ideia em um parágrafo próprio.
  • Utilizar quebras de linha apenas quando realmente forem necessárias.
  • Manter o código identado e bem organizado.
  • Revisar a página no navegador e validar sua estrutura antes de continuar o desenvolvimento.
Voltar