Exemplos de Código HTML para Criar Páginas da Web no Bloco de Notas
Introdução ao HTML e Editores de Texto
HTML (Linguagem de Marcação de Hipertexto) é a linguagem de marcação principal usada para criar páginas da web. Ela é utilizada para estruturar o conteúdo em uma página da web e definir seus elementos, como títulos, parágrafos, imagens e links. Você pode usar qualquer editor de texto para escrever código HTML, incluindo o aplicativo padrão Bloco de Notas no Windows.
O HTML é a base do desenvolvimento web, e compreendê-lo é essencial para criar páginas web estáticas. Ao contrário de outras linguagens de programação, o HTML não requer compilação ou ferramentas complexas de desenvolvimento. Tudo o que você precisa é de um simples editor de texto e um navegador da web para visualizar os resultados.
Criando Sua Primeira Página HTML no Bloco de Notas
Vamos começar criando uma página HTML simples. Abra o Bloco de Notas e insira o seguinte código:
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página da Web</title>
</head>
<body>
<h1>Bem-vindo à Minha Primeira Página da Web!</h1>
<p>Este é meu primeiro parágrafo de texto na página da web.</p>
</body>
</html>Esse código cria uma estrutura básica para um documento HTML. Vamos detalhar um pouco mais.
Tags Básicas de HTML e Seus Usos
DOCTYPE e Elemento Raiz
<!DOCTYPE html>
<html><!DOCTYPE html> informa ao navegador que o documento está escrito em HTML5. A tag <html> é o elemento raiz que contém todo o conteúdo da página.
Cabeçalho do Documento
<head>
<title>Minha Primeira Página da Web</title>
</head>A tag <head> contém metadados sobre o documento, como seu título, que é exibido na aba do navegador. A tag <title> define o título da página.
Corpo do Documento
<body>
<h1>Bem-vindo à Minha Primeira Página da Web!</h1>
<p>Este é meu primeiro parágrafo de texto na página da web.</p>
</body>A tag <body> contém todo o conteúdo visível da página da web. A tag <h1> é usada para títulos de nível superior e a tag <p> é utilizada para parágrafos de texto.
Adicionando Estilos e Formatando Texto
Para tornar sua página mais visualmente atraente, você pode adicionar estilos usando CSS (Cascading Style Sheets). Vamos adicionar alguns estilos à nossa página:
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página da Web</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Bem-vindo à Minha Primeira Página da Web!</h1>
<p>Este é meu primeiro parágrafo de texto na página da web.</p>
</body>
</html>Neste exemplo, adicionamos uma tag <style> dentro da tag <head> para definir estilos para os elementos na página. Alteramos a fonte, a cor de fundo e as cores do texto.
Salvando e Visualizando a Página HTML em um Navegador
Agora que nosso código HTML está pronto, vamos salvá-lo e abri-lo em um navegador:
- No Bloco de Notas, escolha "Arquivo" -> "Salvar Como...".
- No campo "Nome do arquivo", digite
index.htmle selecione "Todos os Arquivos" no campo "Salvar como tipo". - Clique em "Salvar".
Agora abra o arquivo salvo index.html em qualquer navegador da web (por exemplo, Google Chrome, Firefox ou Edge). Você verá sua primeira página da web com o título e o texto do parágrafo.
Adicionando Imagens e Links
Para tornar sua página da web mais interessante, você pode adicionar imagens e links. Vamos ver como fazer isso.
Adicionando uma Imagem
Para adicionar uma imagem, use a tag <img>. Aqui está um exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página da Web</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Bem-vindo à Minha Primeira Página da Web!</h1>
<p>Este é meu primeiro parágrafo de texto na página da web.</p>
<img src="exemplo.jpg" alt="Imagem de Exemplo">
</body>
</html>Neste exemplo, adicionamos uma tag <img>, que referencia o arquivo de imagem exemplo.jpg. O atributo alt fornece um texto alternativo que será exibido caso a imagem não consiga ser carregada.
Adicionando um Link
Para adicionar um link, use a tag <a>. Aqui está um exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página da Web</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Bem-vindo à Minha Primeira Página da Web!</h1>
<p>Este é meu primeiro parágrafo de texto na página da web.</p>
<a href="https://www.exemplo.com">Visite Meu Site Favorito</a>
</body>
</html>Neste exemplo, adicionamos uma tag <a>, que cria um link para a URL especificada. O texto dentro da tag <a> será exibido como um link clicável.
Trabalhando com Tabelas e Listas
Tabelas e listas são elementos importantes para organizar informações em uma página da web. Vamos ver como usá-las.
Criando uma Tabela
Para criar uma tabela, use a tag <table>. Aqui está um exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página da Web</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Bem-vindo à Minha Primeira Página da Web!</h1>
<p>Este é meu primeiro parágrafo de texto na página da web.</p>
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
</body>
</html>Neste exemplo, criamos uma tabela com duas colunas e duas linhas de dados. As tags <th> são usadas para cabeçalhos de coluna, enquanto as tags <td> são usadas para células de dados.
Criando uma Lista
Para criar uma lista, use a tag <ul> para listas não ordenadas e <ol> para listas ordenadas. Aqui está um exemplo de uma lista não ordenada:
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página da Web</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Bem-vindo à Minha Primeira Página da Web!</h1>
<p>Este é meu primeiro parágrafo de texto na página da web.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>Neste exemplo, criamos uma lista não ordenada com três itens. As tags <li> são usadas para cada item da lista.
Conclusão
Parabéns! Você criou sua primeira página da web usando HTML e o Bloco de Notas. Neste artigo, abordamos as tags básicas de HTML, adicionamos estilos e aprendemos como salvar e visualizar documentos HTML em um navegador. Também aprendemos como adicionar imagens, links, tabelas e listas. Continue experimentando e aprendendo HTML para criar páginas da web mais complexas e bonitas. 😉