Página em HTML: Guia Completo para Iniciantes

HTML é uma linguagem de marcação que utiliza tags para criar uma página web. Neste guia, você aprenderá a criar uma página HTML básica e entenderá a importância de cada tag.

Página Inicial

Um exemplo de página salva no formato HTML é a página index.html, que é a primeira página que o servidor procura quando acessamos um endereço. Por exemplo, ao acessar adramm.com.br, o servidor busca a página index.html. Se não for especificada, ele exibe os arquivos da pasta.

Tags para Criar uma Página Web

Para iniciar nosso exemplo, vamos definir algumas tags básicas para elaborar uma página:Para iniciar nosso exemplo, vamos definir algumas para elaborar uma página:

<!DOCTYPE html>: Define o documento como HTML.
<html>: Delimita o conteúdo da página.
<head>: Cabeçalho de metadados da página; configurações usadas pelo navegador.
<title>: Título da página apresentado na aba do navegador.
<meta>: Define atributos como o mapa de caracteres. Exemplo: <meta charset=“utf-8”>.
<link rel=“”>: Utilizado em CSS.
<body>: Corpo da página, o que o navegador irá exibir para o usuário.
<h1>: Tag utilizada para destacar texto. Existem tags de h1 até h6.
<nav>: Tag semântica para navegação.
<div>: Utilizada para dividir ou separar a página. Pode usar atributos como class no CSS.
<br>: Utilizado para pular uma linha.
<form>: Utilizado para formulários.
<label>: Define o texto ao lado do campo de entrada de texto.
<input type=“text” name=“nome”>: Campo de entrada de texto.
<input type=“submit” value=“Salvar”>: Botão de envio.
<input type=“text” name=“nome” required>: Campo obrigatório.
<table>: Tabela.
<thead>: Cabeçalho da tabela.
<th>: Nome da coluna.
<tbody>: Corpo da tabela.
<tr>: Linha da tabela.
<td>: Coluna da tabela.
<p>: Parágrafo.

Programas para Criação de PáginasProgramas para criação de uma página

Editores de texto podem ser utilizados para a criação de páginas ou programas que auxiliam no desenvolvimento:

Bloco de Notas: Versão mais básica.
NotePad++: Gratuito e eficiente.
Sublime Text: Gratuito e possui autocomplete

Dicas

Elabore a página com o editor e visualize no navegador de sua preferência (Google Chrome, Mozilla).
Ao alterar a página, acione F5 ou o ícone de recarregar página.
Feche as tags corretamente, mas se não for fechado, o navegador poderá fazer isso.
Acionando F12, temos acesso à ferramenta de desenvolvedor.
Defina a estrutura da página em HTML e depois formate em CSS.
Para dicas de cores do CSS, acesse: Color Hex.
O box model define as dimensões de um elemento, com acesso à visualização das dimensões de home, padding, border e margin.

Palavras-chave

#HTML #tagsHTML #criarpáginaweb #indexhtml #programasparaHTML #dicasHTML #CSS #boxmodel

Aviso importante: Este post foi gerado com o auxílio da inteligência artificial GPT-4, por meio do Copilot. 🤖✨

Siga-nos e curta a página:

ADRAMM