Olá, futuros desenvolvedores web! Hoje, vamos embarcar em uma jornada emocionante pelo universo do HTML. Mas antes de mergulharmos no código, vamos entender o que é HTML.

O que é HTML?

HTML, ou HyperText Markup Language, é a espinha dorsal de quase todos os sites que você visita. É como o esqueleto de um site, dando estrutura e forma a tudo que você vê na web.

Mas o que significa “HyperText Markup Language”? Vamos dividir isso:

• HyperText: Isso se refere à maneira como as páginas da web estão conectadas entre si através de links. Esses links são o “hyper” em HTML, permitindo que você clique e navegue para uma nova página.
• Markup Language: “Markup” se refere ao código que usamos para estruturar nossa página. Ele diz ao navegador como exibir o conteúdo na página, seja texto, imagens, vídeos ou algo mais.

Então, em resumo, HTML é a linguagem que usamos para estruturar e linkar conteúdo na web. Incrível, não é?

O que vamos aprender?

• HTML5: Vamos entender que o HTML5 não é apenas uma linguagem para criação e publicação de documentos para web, mas a chave para abrir um universo de possibilidades na web.
• Recursos do HTML5: Vamos explorar os vários recursos disponíveis com a nova versão do HTML. Prepare-se para se surpreender!
• Construção de um Formulário: Vamos compreender alguns itens que serão de extrema importância para iniciarmos a construção de um formulário. Isso será um grande passo em sua jornada como desenvolvedor web.

Introdução: A Evolução do HTML

Prepare-se para uma viagem no tempo! Vamos voltar ao lançamento do HTML 4.01 e ver como o HTML5 trouxe um avanço significativo.

O HTML5 não é apenas uma atualização do HTML 4.01, é uma revolução! Ele incorporou muitas validações e programações que antes precisávamos fazer usando uma linguagem de programação separada. Isso significa que o HTML5 nos permite fazer mais com menos código.

Nesta unidade, vamos explorar esses novos recursos do HTML5. Vamos descobrir quais elementos foram adicionados e como eles podem facilitar nossas vidas como desenvolvedores web. Então, aperte os cintos, porque esta viagem está prestes a começar!

Mergulhando no Ambiente Cliente/Servidor

Vamos desvendar os mistérios do ambiente cliente/servidor, um conceito fundamental para a web. A Figura 1 ilustra esse ambiente de uma forma simples e clara.

Figura 1: O Palco da Web

Imagine a web como um grande palco. No lado esquerdo, temos o “Cliente” – o seu computador. No meio, a “Conexão” – a ponte que liga o cliente ao servidor, representada por uma nuvem. E no lado direito, temos o “Servidor” – onde todos os dados são armazenados e as mágicas acontecem.

O que precisamos saber?

• Cliente: Aqui é onde a mágica é vista. Usamos HTML, CSS, Javascript e XML para criar e estilizar o conteúdo que você vê em seu navegador.
• Servidor: Aqui é onde a mágica acontece. O servidor é onde armazenamos nosso banco de dados e onde rodamos nossos scripts de servidor, como JSP e ASP.NET.

Desvendando o HTML

A World Wide Web (Web) é como uma vasta biblioteca digital, repleta de recursos e serviços de informação. Mas como esses recursos são organizados e acessados? A resposta está em três mecanismos fundamentais que tornam a Web acessível para todos nós:

• Esquema Uniforme de Atribuição de Nomes: Imagine tentar encontrar um livro em uma biblioteca sem um sistema de catalogação. Seria quase impossível, certo? Na Web, usamos URIs (Uniform Resource Identifiers) para localizar recursos. É como o sistema de catalogação da biblioteca, mas para a Web.
• Protocolos: Agora que sabemos onde está nosso livro (ou recurso), como o acessamos? É aqui que entram os protocolos, como o HTTP (Hypertext Transfer Protocol). Eles são como as regras que seguimos para acessar e interagir com os recursos na Web.
• Hipertexto: Finalmente, temos o HTML (Hypertext Markup Language), que torna a navegação pela Web mais fácil. É como se cada livro em nossa biblioteca tivesse um índice detalhado e links para outros livros relevantes, permitindo que você pule de um recurso para outro com facilidade.

Esses três mecanismos estão intrinsecamente ligados, trabalhando juntos para tornar a Web o recurso incrível que é hoje.

Desvendando os URIs

Imagine a Web como uma cidade gigante, onde cada site é um prédio. Cada prédio tem um endereço único, certo? Na Web, esse endereço é conhecido como URI (Identificador de Recursos Universal).

Entendendo os URIs

Os URIs são como os endereços dos prédios em nossa cidade da Web. Eles são geralmente compostos por três partes:

• Esquema de nomeação: É o mecanismo usado para acessar o recurso, como o “http” em um endereço web.
• Nome da máquina de hospedagem: É onde o recurso está hospedado, como “www.w3.org”.
• Nome do recurso: É o caminho específico para o recurso na máquina de hospedagem.

Exemplos de URIs

• Página de relatórios técnicos da W3C: http://www.w3.org/TR/
• URI de uma caixa postal: mailto:suporte@comodesenvolver.com.br
• Identificadores de fragmentos: http://somesite.com/html/top.html#section_2

URIs no HTML

No HTML, os URIs são usados para uma variedade de tarefas:

• Ligar a outro documento ou recurso: Isso é feito com os elementos A e LINK.
• Ligar a uma folha de estilo ou script: Isso é feito com os elementos LINK e SCRIPT.
• Incluir uma imagem, objeto ou applet em uma página: Isso é feito com os elementos IMG, OBJECT, APPLET e INPUT.
• Criar um mapa de imagens: Isso é feito com os elementos MAP e AREA.
• Submeter um formulário: Isso é feito com o elemento FORM.
• Criar um documento com molduras: Isso é feito com os elementos FRAME e IFRAME.
• Citar uma referência externa: Isso é feito com os elementos Q, BLOCKQUOTE, INS e DEL.
• Fazer referências a convenções de metadados que descrevem um documento: Isso é feito com o elemento HEAD.

Conhecendo a W3C

A World Wide Web Consortium (W3C) é como o “prefeito” da cidade da Web. Ela é responsável por estabelecer os padrões de desenvolvimento para a internet. Graças a esses padrões, podemos classificar os sites não apenas pelo visual, mas também pela sua capacidade de atender a esses padrões técnicos.

A Linguagem Universal da Web

Para publicar informações que possam ser acessadas globalmente, precisamos de uma linguagem universal, uma espécie de “língua mãe” da publicação que possa ser compreendida por todos os computadores. Essa linguagem é o HTML (Hyper Text Markup Language).

O Poder do HTML

O HTML é como a caneta e o papel do autor na Web. Ele permite:

• Publicar documentos online: Com o HTML, você pode criar documentos online contendo cabeçalhos, texto, quadros e tabelas, listas, fotos e muito mais.
• Recuperar ou retirar informações online: O HTML permite criar ligações de hipertexto, que são como portais que você pode abrir com um clique de um botão para acessar novas informações.
• Criar formulários: Com o HTML, você pode criar formulários para realizar transações com serviços remotos, buscar informações, fazer reservas, encomendar produtos e muito mais.

A Evolução do HTML: Das Versões Antigas para o HTML5

O HTML tem uma longa história, com várias versões marcando diferentes etapas de sua evolução. A versão que realmente mudou o jogo foi o HTML 4.01, publicado como uma recomendação do W3C em 1999.

Mas a verdadeira revolução veio com o HTML5. Iniciado em 2008 e ainda em desenvolvimento, o HTML5 trouxe uma série de novos recursos e capacidades para a linguagem HTML.

Figura 2: O Logo do HTML5

A figura 2 mostra o logo do HTML5, um símbolo da revolução que esta versão trouxe para a web.

Desafios da Compatibilidade

No entanto, nem tudo são flores. Muitos comandos do HTML5 (e do CSS3, que veremos mais adiante) não são compatíveis com todos os navegadores. Isso significa que uma página que funciona perfeitamente no Chrome pode não funcionar tão bem no Internet Explorer ou no Firefox.

Além disso, temos que considerar a variedade de dispositivos e sistemas diferentes que usamos para acessar a web hoje em dia. Nem todos os dispositivos são capazes de rodar os códigos mais recentes, então é importante ter isso em mente ao desenvolver páginas HTML.

Conhecendo os Motores de Renderização

Imagine que você é um pintor e a Web é a sua tela. Os motores de renderização são como as suas ferramentas de pintura – eles são os mecanismos que os navegadores usam para transformar o código das páginas web em belas obras de arte digitais.

Os Principais Motores de Renderização

Existem vários motores de renderização, cada um com suas próprias características e peculiaridades. Os principais motores dos navegadores mais populares são:

• Webkit: Este é o motor usado pelos navegadores Safari e Chrome. Ele é conhecido por ser o mais compatível com o HTML5.
• Gecko: Este é o motor que dá vida ao Firefox.
• Trident: Este é o motor por trás do Internet Explorer.

A Importância da Compatibilidade

Ao desenvolver páginas web, é importante garantir que nossos códigos sejam compatíveis com esses motores de renderização. Isso nos permite alcançar o maior número possível de usuários, independentemente do navegador que eles estejam usando.

Dominando as Tags HTML

As tags HTML são como os tijolos que usamos para construir uma página web. Elas definem a estrutura e o layout de uma página web e são colocadas entre os sinais de menor e maior (< >).

Entendendo as Tags HTML

As tags HTML geralmente vêm em pares, como <b> e </b>. A primeira tag do par é chamada de tag de abertura e a segunda tag é a tag de fechamento.

Regras das Tags HTML

• Estrutura das Tags: As tags HTML são comandos que aparecem entre colchetes angulares (<>).
• Sensibilidade ao Caso: As tags HTML não diferenciam maiúsculas de minúsculas.
• Pares de Tags: A maioria das tags HTML vem em pares.

Exemplo de Uso das Tags HTML

Aqui está um exemplo de como as tags HTML são usadas para criar uma página web:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta htp-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento Sem Título</title>
</head>
<body>
	<h1>Meu primeiro cabeçalho</h1>
	<p>Meu primeiro parágrafo</p>
</body>
</html>

• O texto entre <html> e </html> descreve a página web.
• O texto entre <body> e </body> é a informação visível na página.
• O texto entre <h1> e </h1> é exibido como cabeçalho.
• O texto entre <p> e </p> é exibido como parágrafo.

Entendendo o Document Type

O elemento <!DOCTYPE> é como um passaporte para o seu código HTML. Ele especifica o tipo de documento (DTD), informando ao navegador como interpretar o seu código.

Tipos de Documentos

Existem vários tipos de documentos que você pode especificar com o <!DOCTYPE>. Aqui estão alguns dos mais comuns:

• HTML 4.01 Strict DTD: Este tipo adere aos padrões do CSS e HTML 4.01. É como dizer ao navegador: “Vou seguir as regras à risca”.
• HTML 4.01 Transitional DTD: Este tipo adere aos padrões do HTML 4.01, incluindo elementos e atributos HTML depreciados. É como dizer ao navegador: “Estou em transição, então posso não seguir todas as regras”.
• HTML 4.01 Frameset DTD: Este tipo adere aos padrões do HTML 4.01, incluindo elementos e atributos HTML depreciados e frames. É como dizer ao navegador: “Vou usar frames”.

A Importância do DOCTYPE

O DOCTYPE é crucial porque cada navegador tem sua própria maneira de renderizar o HTML. Ao especificar o DOCTYPE, você está dizendo ao navegador exatamente como ele deve interpretar o seu código.

A Estrutura Principal de um Documento HTML

O elemento <html> é como a fundação de uma casa – é o elemento principal de um documento HTML. Ele contém outros elementos importantes, como:

• <head>: Este é o “cérebro” do seu documento HTML. Ele contém metadados e links para folhas de estilo e scripts.
• <title>: Este é o “nome” do seu documento. Ele fornece o título que aparece na guia do navegador.
• <body>: Este é o “corpo” do seu documento. Ele contém todo o conteúdo visível da sua página web.

Atributos Comuns do Elemento <body>

O elemento <body> pode ter vários atributos. Aqui estão alguns dos mais comuns:

• BGCOLOR: Define a cor de fundo da página.
• BACKGROUND: Permite especificar um arquivo gráfico para usar como imagem de fundo.
• LINK: Permite especificar a cor dos hiperlinks de texto não visitados.
• VLINK: Permite especificar a cor dos hiperlinks de texto visitados.
• ALINK: Permite especificar a cor dos hiperlinks enquanto os usuários clicam neles.

Agora que entendemos a estrutura básica de um documento HTML, vamos explorar alguns elementos HTML mais específicos.

Criando Links com HTML

A tag <a> é como uma ponte no mundo do HTML. Ela define um hiperlink, que é usado para conectar uma página a outra.

O atributo mais importante da tag <a> é o href, que é como o endereço da ponte. Ele indica para onde o link vai levar.

Exemplo de Uso da Tag <a>

Aqui está um exemplo de como você pode usar a tag <a> para criar um link:

<a href="https://www.seusite.com.br">Visite o nosso site!</a>

Neste exemplo, “Visite o nosso site!” é o texto que será exibido como link na página. Quando alguém clicar neste link, será levado para “https://www.seusite.com.br”.

Construindo Tabelas com HTML

A tag <table> é como o esqueleto de uma tabela no HTML. Ela define a estrutura básica da tabela.

Dentro de uma tabela, usamos a tag <tr> para criar linhas e a tag <td> para criar células.

Exemplo de Criação de Tabela em HTML

Aqui está um exemplo de como você pode usar essas tags para criar uma tabela:

<table border="1">
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>

Neste exemplo, criamos uma tabela com duas linhas e duas células em cada linha.

Construindo Listas com HTML

As listas são uma parte fundamental de qualquer página web, e o HTML nos fornece várias tags para criar diferentes tipos de listas:

• <ul>: Esta tag é usada para criar uma lista não ordenada, onde a ordem dos itens não importa.
• <ol>: Esta tag é usada para criar uma lista ordenada, onde a ordem dos itens é importante.
• <li>: Esta tag é usada para criar um item de lista, seja em uma lista ordenada ou não ordenada.

Exemplo de Criação de Listas em HTML

Aqui está um exemplo de como você pode usar essas tags para criar listas:

<!-- Lista não ordenada -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Lista ordenada -->
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Neste exemplo, criamos uma lista não ordenada e uma lista ordenada, cada uma com três itens.

Construindo Campos de Texto com HTML

A tag <input> é como uma caixa de entrada no mundo do HTML. Ela especifica um campo onde o usuário pode inserir dados. Os campos <input> são geralmente usados dentro de um elemento <form>.

Um campo de entrada pode assumir várias formas, dependendo do atributo type que você escolher.

Exemplo de Uso da Tag <input>

Aqui está um exemplo de como você pode usar a tag <input> para criar diferentes tipos de campos de entrada:

<form>
  <!-- Campo de texto -->
  <input type="text" placeholder="Texto">

  <!-- Campo de senha -->
  <input type="password" placeholder="Senha">

  <!-- Campo de e-mail -->
  <input type="email" placeholder="Email">

  <!-- Campo numérico -->
  <input type="number" placeholder="Número">

  <!-- Botão de rádio -->
  <input type="radio" name="opcao"> Opção 1
  <input type="radio" name="opcao"> Opção 2

  <!-- Caixa de seleção -->
  <input type="checkbox"> Marque-me

  <!-- Botão de envio -->
  <input type="submit" value="Enviar">
</form>

Neste exemplo, criamos vários tipos de campos de entrada, incluindo campos de texto, senha, e-mail, número, botões de rádio, caixas de seleção e um botão de envio.

Usando Caracteres Especiais em HTML

Caracteres especiais são aqueles que têm um significado especial em HTML, como <, > e &. Para usá-los em nossas páginas web, precisamos de uma forma de escapar de seu significado e mostrar seu valor literal. É aí que entram as sequências de escape.

O que são Sequências de Escape?

As sequências de escape são como códigos secretos que usamos para representar caracteres especiais em HTML. Elas são formadas por três partes: um & inicial, um número ou nome correspondente ao caractere desejado, e um ; final.

Por exemplo, para representar o caractere < em HTML, usamos a sequência de escape <.

Quais são as Sequências de Escape mais Comuns?

Existem muitas sequências de escape, mas aqui estão algumas das mais comuns:

• Quadro 1: Sequências de Escape para Caracteres ASCII

• Quadro 2: Sequências de Escape para Caracteres ISO Latin1

Como Usar as Sequências de Escape?

As sequências de escape são sensíveis à caixa, ou seja, á é diferente de Á. Os editores de HTML geralmente fazem essa tradução automaticamente, mas é bom saber como usá-las manualmente.

Alguns editores, no entanto, mantêm a acentuação, sem usar as sequências de escape. Nesse caso, é preciso informar ao navegador qual é o esquema de codificação usado, escrevendo:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">

Isso diz ao navegador que o documento está codificado em ISO Latin1, que é o padrão para os caracteres usados em português.

Explorando Alguns Elementos Novos do HTML

O HTML5 trouxe muitos elementos novos para a linguagem HTML, que nos permitem criar páginas web mais semânticas e acessíveis. Alguns desses elementos é o <section>, <article>, <aside>, <footer> e o <figure>.

O que é o Elemento <section>?

O elemento <section> é como uma caixa que agrupa conteúdos relacionados em um documento ou aplicação web. Ele pode ser usado em conjunto com os elementos <h1>, <h2>, <h3>, <h4>, <h5> e <h6> para indicar a estrutura do documento.

Exemplo de Uso do Elemento <section>

Aqui está um exemplo de como você pode usar o elemento <section> para criar uma página web com três seções: uma introdução, um conteúdo principal e uma conclusão.

<section>
  <h1>Introdução</h1>
  <p>Esta é uma página web que usa o elemento "section" para organizar o conteúdo.</p>
</section>

<section>
  <h2>Conteúdo Principal</h2>
  <p>Aqui você pode colocar o conteúdo principal da sua página web, como textos, imagens, vídeos, etc.</p>
</section>

<section>
  <h3>Conclusão</h3>
  <p>Esta é a última seção da página web, onde você pode colocar um resumo, uma chamada para ação, ou qualquer outra informação relevante.</p>
</section>

O que é o Elemento <article>?

O elemento <article> é como uma caixa que contém um conteúdo independente e autocontido, como um blog ou artigo de jornal. Ele pode ser usado para agrupar elementos relacionados que formam uma única unidade de informação. Por exemplo, um post de blog pode ter um título, um autor, um texto, uma imagem e um comentário, todos dentro de um elemento <article>.

Exemplo de Uso do Elemento <article>

Aqui está um exemplo de como você pode usar o elemento <article> para criar um post de blog:

<article>
  <h1>Título do Post</h1>
  <p>Autor: Fulano de Tal</p>
  <p>Data: 01/01/2025</p>
  <img src="imagem.jpg" alt="Imagem do Post">
  <p>Texto do Post</p>
  <p>Comentário: Belo post!</p>
</article>

Neste exemplo, criamos um elemento <article> que contém um título, um autor, uma data, uma imagem, um texto e um comentário, todos relacionados ao mesmo post de blog.

O que é o Elemento <aside>?

O elemento <aside> é como uma caixa lateral que contém uma parte do conteúdo que é pouco relacionada com o resto da página. Ele pode ser usado para inserir informações complementares, notas, dicas, anúncios, etc.

Exemplo de Uso do Elemento <aside>

Aqui está um exemplo de como você pode usar o elemento <aside> para criar uma nota lateral em uma página web:

<article>
  <h1>Título do Artigo</h1>
  <p>Texto do Artigo</p>
  <aside>
    <h2>Nota Lateral</h2>
    <p>Texto da Nota Lateral</p>
  </aside>
</article>

Neste exemplo, criamos um elemento <article> que contém um título, um texto e um elemento <aside> que contém uma nota lateral.

O que é o Elemento <footer>?

O elemento <footer> é como uma caixa que contém o rodapé de uma seção. Ele pode conter informações sobre o autor, direitos autorais, links, etc.

Exemplo de Uso do Elemento <footer>

Aqui está um exemplo de como você pode usar o elemento <footer> para criar um rodapé para uma página web:

<footer>
  <p>Autor: Fulano de Tal</p>
  <p>Direitos Autorais: © 2025 Todos os Direitos Reservados</p>
  <p>Contato: <a href="mailto:fulano@seusite.com.br">fulano@seusite.com.br</a></p>
</footer>

Neste exemplo, criamos um elemento <footer> que contém o nome do autor, os direitos autorais e o contato do autor.

O que é o Elemento <figure>?

O elemento <figure> é como uma moldura que contém uma parte do conteúdo de fluxo autossuficiente. Ele serve para agrupar uma seção de conteúdo independente, como um vídeo ou uma imagem, que pode ser referenciada por um texto.

Exemplo de Uso do Elemento <figure>

Aqui está um exemplo de como você pode usar o elemento <figure> para criar uma imagem com uma legenda:

<figure>
  <img src="gato.jpg" alt="Um gato preto e branco">
  <figcaption>Figura 1: Um gato preto e branco</figcaption>
</figure>

Neste exemplo, criamos um elemento <figure> que contém um elemento <img> com a imagem de um gato e um elemento <figcaption> com a legenda da imagem.

Conclusão

Aqui está um resumo dos principais pontos que abordamos:

• HTML é a linguagem de marcação que usamos para criar páginas web. Ela define a estrutura e o layout de uma página web usando tags.
• Tags são comandos que aparecem entre colchetes angulares (<>). Elas geralmente vêm em pares, com uma tag de abertura e uma tag de fechamento. Algumas tags podem ter atributos, que são informações adicionais que modificam o comportamento ou a aparência da tag.
• Elementos são as partes do conteúdo que são definidas pelas tags. Eles podem ser aninhados, ou seja, colocados dentro de outros elementos, para criar uma hierarquia de elementos.
• Document Type é o elemento que especifica o tipo de documento HTML que estamos usando. Ele deve ser colocado no início do documento e informar ao navegador como interpretar o código HTML.
• HTML5 é a versão mais recente do HTML, que trouxe muitos elementos novos e recursos para a linguagem. Alguns desses elementos são: <section>, <article>, <aside>, <figure>, <footer>, etc. Esses elementos nos permitem criar páginas web mais semânticas e acessíveis.
• Caracteres especiais são aqueles que têm um significado especial em HTML, como <, > e &. Para usá-los em nossas páginas web, precisamos usar sequências de escape, que são códigos que começam com & e terminam com ;. Esses códigos representam o valor literal dos caracteres especiais.

Espero que você tenha gostado de aprender sobre os conceitos do HTML comigo. Foi um prazer te ensinar sobre essa linguagem. Parabéns por ter concluído essa disciplina! Você está pronto para criar suas próprias páginas web com HTML! 🎉