02 ‐ HTML - sabrinabm94/javascript GitHub Wiki
No mundo da criação de páginas web, o HTML desempenha um papel fundamental como a base estrutural que dá forma ao conteúdo. Neste segundo capítulo, vamos explorar os conceitos essenciais do HTML e entender por que ele é tão importante no desenvolvimento web moderno.
HTML, abreviação de HyperText Markup Language (Linguagem de Marcação de Hipertexto), é a linguagem padrão para criação e estruturação de conteúdo em páginas web. Ele define os elementos que compõem uma página, como cabeçalhos, parágrafos, links, imagens e muito mais.
No HTML, utilizamos uma variedade de tags para definir e formatar o conteúdo de uma página web. Algumas das tags mais comuns incluem:
-
<div>: Utilizada para agrupar elementos e aplicar estilos. -
<p>: Define um parágrafo de texto. -
<a>: Cria links para outras páginas ou recursos. -
<img>: Exibe imagens na página. -
<ul>e<ol>: Criam listas não ordenadas e ordenadas, respectivamente.
Veja um exemplo básico de código HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de arquivo HTML</title>
</head>
<body>
<div id="content">
<h1>Título da Página</h1>
<p>Este é um parágrafo de exemplo.</p>
<a href="https://exemplo.com" target="_self" aria-label="Link para exemplo">Link para Exemplo</a>
<img src="imagem.jpg" alt="Imagem de Exemplo">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ol>
</div>
</body>
</html>Cada uma dessas tags desempenha um papel importante na estruturação e formatação do conteúdo de uma página web.
O HTML desempenha um papel vital na interação com o JavaScript, permitindo a incorporação e execução de scripts nos navegadores da web. A integração entre HTML e JavaScript possibilita a criação de experiências dinâmicas e interativas na web.
Veja um exemplo simplificado de como o JavaScript pode ser integrado a uma página HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de arquivo HTML</title>
</head>
<body>
<h1 style="color:red;">Título de exemplo em arquivo HTML</h1>
</body>
</html>Neste exemplo, um título <h1> é estilizado com a cor vermelha. Essa integração permite que os desenvolvedores criem experiências mais dinâmicas e envolventes para os usuários.
Ao explorar a aba Elements das ferramentas de desenvolvedor do navegador, é possível visualizar a estrutura do HTML que criamos no arquivo, além da versão apresentada pelo navegador.
O HTML fornece a estrutura necessária para a incorporação e execução de scripts JavaScript nos navegadores da web. Essa interação é fundamental para criar experiências interativas e dinâmicas na web, permitindo aos desenvolvedores modificar o conteúdo, responder a eventos do usuário e atualizar o conteúdo em tempo real.
No próximo capítulo, vamos explorar as ferramentas essenciais para os desenvolvedores, incluindo IDEs (Integrated Development Environments) e as DevTools dos navegadores. Essas ferramentas são fundamentais para facilitar o desenvolvimento, depuração e teste de aplicações web.