HTML não é uma linguagem de programação; é uma linguagem de marcação, usada para definir a estrutura de um conteúdo. HTML consiste de uma série de elementos, que usamos para delimitar ou agrupar diferentes partes do conteúdo para que ele apareça de determinada maneira. As tags anexas podem transformar uma palavra ou imagem num hiperlink, podemos colocar palavras em itálico, aumentar ou diminuir a fonte e assim por diante.
Nessa etapa aprendi os fundamentos essenciais para o desenvolvimento web. Comecei instalando o
Visual Studio Code (VSC), um editor de código ideal para escrever e organizar arquivos HTML,
CSS e JavaScript. Também explorei o uso das ferramentas do navegador,
como o inspetor de elementos e o console, recursos essenciais para depurar, testar e entender a estrutura das páginas.
A estrutura básica de um documento HTML começa com a declaração <!DOCTYPE html>,
seguida pelas tags <html>, <head> e <body>. Dentro do
<head>, inserimos metadados como <title>,
<meta charset="UTF-8"> e links para arquivos externos. Já o <body>
abriga todo o conteúdo visível da página. O elemento <main> define o conteúdo principal dentro do <body> e deve ser único na página não sendo incluídas secções da página comuns a todo o site como por exemplo informações de copyright, logotipo e campos de busca.
<p>, <h1>, <img> e
outras —
exibem diretamente conteúdo na página.<p> - serve para criar um parágrafo de texto. É uma das tags mais básicas do HTML.<abbr> - representa uma abreviação ou sigla, e você pode usar o atributo title para mostrar o
significado ao passar o mouse ajudando na acessibilidade e clareza do conteúdo. Exemplo: ONU<font> - essa é uma tag obsoleta usada para definir cor, tipo e tamanho da fonte. Atualmente,
usamos o CSS para isso. Exemplo: Texto azul em Arial
Exemplo do código obsoleto no texto HTML:
<font color="blue" size="4" face="Arial">Texto azul em Arial</font>Exemplo com CSS inline:
<p style="color: blue; font-size: 18px; font-family: Arial;">Texto azul em Arial</p><del> - marca um texto como excluído, ideal para mostrar edições ou alterações. Ele aparece com
um risco no meio da palavra. Exemplo: Este produto <mark> - destaca um trecho do texto, como se estivessemos passando um marca-texto amarelo por
cima da palavra. É bastante útil quando queremos destacar uma palavra ou frase específica em meio ao conteúdo. Por padrão aparece com a cor amarela.
Exemplo: Estudei muito para a prova e fui aprovado com nota máxima!
<header>, <main>,
<section>, <article>, <footer> - ajudam a estruturar o
conteúdo e tornam o HTML mais acessível e otimizado para SEO.
src em <img src="imagem.jpg"> - define a fonte da imagem.alt - fornece uma descrição da imagem para os leitores de tela.target="_blank" - faz com que um link seja aberto em uma nova aba.id e class - permitem aplicar estilos via CSS ou manipulação com JavaScript.Exemplo de uma estrutura HTML:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Estrutura HTML5</title>
</head>
<body>
<header>
<!-- Cabeçalho do site -->
<img src="imagem.jpg">
</header>
<main> <!-- Conteúdo principal e tags -->
<section>
<div>
<h1> <!-- h1 é o principal; h2, h3, h4, h5, h6 são subtítulos --></h1>
<p>Meu primeiro paragráfo.</p>
<p>Estou aprendendo muito com o curso!</p>
<h2>Estruturando o HTML.</h2>
<p>Construindo um site.</p>
</div>
</section>
</main>
<footer>
<!-- Rodapé do site -->
</footer>
</body>
</html>
Formulários são partes muito importantes na Web — proporcionam muitas das funcionalidades que precisamos para interagir em páginas web. São utilizados para registrar-se, conectar-se, enviar comentários, comprar produtos e muito mais.
Nesse módulo aprendi em como criar formulários com <form> e campos como
<input>, <textarea>, <select>, checkbox,
radio e botões <button>.
<input>: campo de entrada que pode ser texto, número, email, senha etc., dependendo do atributo
type.<textarea>: campo para mensagens mais longas, como comentários ou descrições podendo ser ajustado em linhas e colunas.<select>: cria um menu suspenso com várias opções definidas por <option>.
<button>: usado para enviar, limpar ou executar ações — type="submit",
type="reset" ou type="button".(Voce pode interagir e testá-los!)
Esse módulo me ensinou a organizar o conteúdo de uma página com <div>,
<span>, <fieldset> e adicionar cores, iframes e elementos externos com
<embed>.
<div>: usada para agrupar blocos de elementos. Não tem significado semântico, mas é muito útil para organização e aplicação de estilos com CSS. <div class="container"> ... </div> <span>: parecida com a <div>, mas usada para agrupamentos em linha, geralmente dentro de textos.
<p>Olá, <span class="destaque">mundo!</span></p><fieldset>: agrupa campos relacionados de um formulário, criando uma borda visual. <fieldset><legend>Dados Pessoais</legend>...</fieldset> style diretamente no HTML, mas também podemos aplicar classes CSS, criando um arquivo (style.css) no próprio VSC.<p style="color: blue;">Texto azul</p><iframe>: permite inserir conteúdos externos, como vídeos do YouTube ou mapas. <iframe src="https://www.dio.me/" width="400"></iframe> <embed>: insere conteúdos multimídia ou interativos, como PDFs, animações ou outros arquivos.
<embed src="documento.pdf" type="application/pdf" width="400" height="300">