- Construindo a estrutura básica do HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
</head>
<body>
</body>
</html>
- Adicionando conteúdo ao HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
</head>
<body>
<h1>Cabeçalho</h1>
<p>Um cabeçalho refere-se a um conjunto de informações localizadas na parte superior
de cada uma das páginas ou seções de um documento
(como nome do autor, título corrente, número da página etc.). </p>
</body>
</html>
- Trabalhando com meta tags e título
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
</head>
- Organizando conteúdo com tags HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projeto Pessoal</title>
</head>
<body>
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra mi eu quam suscipit, sed interdum ipsum semper.
Morbi auctor sem non tincidunt feugiat. Donec bibendum consequat risus, ac imperdiet nibh scelerisque at.
Morbi porta lectus felis.
Donec auctor dui non mauris placerat,
maximus finibus lorem tincidunt. Morbi augue nisi, sagittis vel nisi in, accumsan rutrum orci. Cras egestas risus odio,
at aliquet massa iaculis a. In dapibus at ante ut consequat. Aenean vel odio est. Nam vitae malesuada enim.</p>
</body>
</html>
- Adicionando imagens com acessibilidade
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projeto Pessoal</title>
</head>
<body>
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra mi eu quam suscipit, sed interdum ipsum semper.
Morbi auctor sem non tincidunt feugiat. Donec bibendum consequat risus, ac imperdiet nibh scelerisque at.
Morbi porta lectus felis.
Donec auctor dui non mauris placerat,
maximus finibus lorem tincidunt. Morbi augue nisi, sagittis vel nisi in, accumsan rutrum orci. Cras egestas risus odio,
at aliquet massa iaculis a. In dapibus at ante ut consequat. Aenean vel odio est. Nam vitae malesuada enim.</p>
<img src="gatinho_fofo.jpg" alt="imagem de um gato fofo">
</body>
</html>
- Listando Itens em HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projeto Pessoal</title>
</head>
<body>
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra mi eu quam suscipit, sed interdum ipsum semper.
Morbi auctor sem non tincidunt feugiat. Donec bibendum consequat risus, ac imperdiet nibh scelerisque at.
Morbi porta lectus felis.
Donec auctor dui non mauris placerat,
maximus finibus lorem tincidunt. Morbi augue nisi, sagittis vel nisi in, accumsan rutrum orci. Cras egestas risus odio,
at aliquet massa iaculis a. In dapibus at ante ut consequat. Aenean vel odio est. Nam vitae malesuada enim.</p>
<img src="gatinho_fofo.jpg" alt="imagem de um gato fofo">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Sit</li>
</ul>
</body>
</html>
- Explorando o impacto do DOCTYPE no HTML
o DOCTYPE influencia diretamente na forma como o navegador interpreta o HTML, afetando a consistência e compatibilidade da renderização da página
- Automatizando a atualização da página com Live Server
