O HyperText Markup Language (HTML) é a espinha dorsal da web, a linguagem fundamental para a criação de páginas da internet. Neste guia, vamos explorar as ferramentas essenciais para trabalhar com HTML, utilizando o inspetor de elementos, entendendo a estrutura básica, conhecendo as principais tags e atributos, e criando textos e listas ordenadas e não ordenadas. Este conteúdo está direcionado para aqueles que desejam uma compreensão prática do HTML.
Para desenvolver e testar código HTML, várias ferramentas podem ser utilizadas. Editores de texto como Visual Studio Code, Sublime Text ou até o bloco de notas são ótimos para escrever o código. Para visualizar e depurar, os navegadores modernos como Google Chrome, Firefox e Edge oferecem ferramentas de desenvolvimento robustas.
VoltarO inspetor de elementos é uma funcionalidade crucial disponível nos navegadores modernos. Ele permite visualizar e editar o código HTML e CSS diretamente no navegador, facilitando a identificação de problemas e a realização de ajustes rápidos. Para acessá-lo, basta clicar com o botão direito do mouse sobre um elemento da página e selecionar "Inspecionar" ou "Inspecionar Elemento".
VoltarUma página HTML é composta por uma estrutura básica que inclui doctype, tags <html>, <head> e <body>. Aqui está um exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minha Página HTML</title>
</head>
<body>
<h1>Bem-vindo ao HTML</h1>
<p>Este é um parágrafo de exemplo.</p>
</body>
</html>
Voltar
Tags são os blocos de construção do HTML. Elas delimitam o início e o fim de um elemento. A maioria das tags possui uma tag de abertura e uma de fechamento, como <p> para parágrafos:
<p>Este é um parágrafo.</p>
Existem também tags auto-fechantes, como a tag de imagem:
<img src="caminho/para/imagem.jpg" alt="Descrição da imagem" >
Atributos fornecem informações adicionais sobre os elementos. Eles são incluídos dentro da tag de abertura. Alguns atributos comuns são id, class, src e alt:
<a href="https://www.exemplo.com" target="_blank">Visite nosso site</a>
Visite nosso site
No exemplo acima, href define o destino do link e target="_blank" faz com que o link seja aberto em uma nova aba.
Para adicionar textos em HTML, utilizamos tags como <h1> a <h6> para cabeçalhos e <p> para parágrafos. Por exemplo:
<h1>*Este é um cabeçalho</h1>
<p>*Este é um parágrafo com um <strong>texto em negrito</strong> e um <em>texto em itálico</em>.</p>
*Este é um parágrafo com um texto em negrito e um texto em itálico.
VoltarListas são uma forma prática de organizar informações. As listas ordenadas (<ol>) são numeradas, enquanto as não ordenadas (<ul>) utilizam marcadores.
Exemplo de lista ordenada:
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>
Exemplo de lista não ordenada:
<ul>
<li>Item um</li>
<li>Item dois</li>
<li>Item três</li>
</ul>
Para se aprofundar no HTML, recomendo os seguintes recursos:
Voltar