Se você está iniciando no mundo da programação web e deseja aprender a criar páginas HTML e saber como elas funcionam, então siga esse artigo até o final, pois estarei ensinando o passo a passo do funcionamento e criação de uma página HTML.
Nesse artigo vamos usar apenas o HTML puro, sem CSS e javascript. O objetivo desse artigo é de ajudar iniciantes a compreenderem o uso das tags HTML. Depois que você conhecer toda estrutura de uma página web e todas as tags HTML mais utilizadas, então você estará pronto para a aprender CSS e usá-lo em suas páginas.
Uma página web é toda escrita a mão, assim como escrevi esse artigo. Para criarmos uma página web usamos tags que são interpretadas pelos navegadores web. Cada tag determina um tipo de conteúdo e seu comportamento. Uma tag HTML começa com < e termina com >. Há várias tags a serem usadas na construção de uma página HTML. Algumas delas são: <html>, <head>, <body>, <div>, <img>, <a>, <li>, <p>, <span>, <ul>, <input>, <select> e <button>…
Um arquivo HTML, ou página HTML, é nada mais do que um arquivo de texto que determina a estrutura e posição dos conteúdos de um site. O navegador web desenha a página de acordo com a marcação de conteúdo utilizada. O HTML nada mais é do que tags de marcação, as quais determinam o tipo de conteúdo e sua estrutura.
Além das tags HTML serem usadas pelos navegadores web para desenharem a página, as tags também servem para os motores de buscas localizarem o conteúdo ideal a ser indexado. Por esse motivo, para aprimorarmos a posição de nosso site nos motores de buscas (como google, bing, duckduckgo…) devemos sempre usar as tags corretas para marcação dos conteúdos. Por exemplo, muitas pessoas usam as tags <div></div> para marcação de textos, enquanto o correto é o uso da tag <p></p>.
Uma página HTML é dividida em duas partes. A primeira parte é o cabeçalho da página. O cabeçalho é definido entre as tags <head></head>. No cabeçalho são colocadas as informações que devem ser carregadas antes da exibição completa da página. Nesta seção definimos o título da página, fazemos o carregamento de arquivos css e javascript, e também definimos algumas variáveis para descrever o conteúdo da página, como o idioma, nome do autor, descrição do site, palavras chaves e etc.
Na segunda parte fica o corpo da página, conhecido também como conteúdo. O corpo da página fica entre as tags <body></body>. É nessa seção que desenhamos toda estrutura do site e colocamos todo conteúdo a ser exibido na página. Todo conteúdo visível do site fica entre as tags <body></body>.
Estrutura do cabeçalho da página
O cabeçalho de uma página requer no mínimo o título da página. O título da página é exibido na aba do navegador web. Usamos o título para descrever qual página do site o usuário está acessando. O título é importante para os usuários alternarem rapidamente entre as abas do navegador web.
O título de uma página também é muito utilizado por motores de buscas, como google e bing. Quando pesquisamos por algo em um site de buscas, o título da página e a descrição é o que aparece nos resultados, portanto, colocar um título correto em suas páginas irá fazer com que os usuários saibam do que se trata a página antes mesmo de acessá-la. Páginas sem títulos podem perder posição em sites de buscas.
Agora vamos começar a criar nossa página web. Para isso crie um arquivo chamado pagina.html e coloque o conteúdo seguinte. Vamos editar esse arquivo no decorrer do artigo.
<!doctype html>
<head>
<title>Página de receitas caseiras</title>
</head>
</html>Acima temos a estrutura básica de um cabeçalho. Primeiramente abrimos a tag <html> para informamos ao navegador web e motores de buscas que esse arquivo é um documento HTML. Dessa forma os navegadores web e motores de buscas vão interpretar o conteúdo desse arquivo como uma página web.
Na segunda linha abrimos a tag head. No HTML é sempre necessário abrir e fechar tags. Entre as tags podemos também colocar outras tags. A tag de fechamento tem sempre uma barra antes do nome da tag.
Na terceira linha abrimos a tag de marcação do título da página. E entre a tag colocamos a descrição do que se trata o conteúdo da página. E por último, na quarta e quinta linha fechamos as tags html e head.
Na seção head podemos carregar arquivos de estilos e códigos javascript:
<!doctype html>
<head>
<title>Página de receitas caseiras</title>
<link href="/css/estilo.css" rel="stylesheet" />
<script src="/scripts/validacao.js" ></script>
</head>
</html>Como pode ver acima, a tag <link> não foi fechada com a tag </link>. Isso acontece com algumas tags as quais não possuem conteúdo. Por exemplo, a tag <link> não possui conteúdo interno, portanto não se deve colocar nada entre ela, e por esse motivo não há necessidade de fechar a tag com </link>. Para fechar esse tipo de tag (sem conteúdo interno) colocamos apenas uma barra no final da tag.
Uso errado da tag <link>:
<link>não se coloca nada entre a tag link</link>Uso correto da tag link:
<link href="..." rel="stylesheet" />Outras tags como <img> e <input> também seguem o mesmo exemplo da tag <link>: Usa-se apenas uma barra no final da tag para fechá-la.
Se uma tag não for fechada ela irá causar problemas no desenho da página, como quebrar a estrutura da página e causar falhas na interpretação de outras tags.
Estrutura do corpo da página
A estrututa padrão de uma página web, determinada pelo padrão HTML5, consiste em ter um cabeçalho, uma seção de conteúdo e um rodapé. Estas três seções são fundamentais em uma página web, e cada uma delas são utilizadas para conteúdos específicos. Essa é a estrutura padrão recomendada para uma página web, porém aqui você é quem determina qual estrutura o seu site possuirá. Entre as tags <body></body> você está livre para decidir como será sua página.
O cabeçalho
Geralmente no cabeçalho de um site é de costume colocar o nome do site, a logomarca e um menu de navegação. É recomendado definir o cabeçalho de um site usando as tags <header></header> ou <section></section>, sendo a primeira mais recomendada. Como dito anteriormente, isso ajuda os navegadores e motores de buscas a compreenderem onde estão cada tipo de seção de conteúdo do site.
Só lembrando que esse cabeçalho aqui não tem nada a ver com o cabeçalho head que vimos anteriormente. Agora nós estamos falando da estrutura do site, e não da estrutura de uma página HTML.
<!doctype html>
<head>
<title>Página de receitas caseiras</title>
</head>
<body>
<header>
<img src="logomarca.png" />
<h1>nome do site</h1>
<nav>
<a href="inicio.html">Início</a>
<a href="artigos.html">Artigos</a>
<a href="contato.html">Contato</a>
</nav>
</header>
</body>
</html>No conteúdo acima, dentro do corpo da página, entre as tags <body></body>, definimos o cabeçalho do site usando as tags <header></header>. Dentro do cabeçalho colocamos uma imagem usando a tag <img>; colocamos também um título usando as tags <h1></h1>; e um menu usando as tags <nav></nav>.
Essa é a estrutura mais utilizada na seção header de uma página web. A estrutura de cada seção vai depender da necessidade de apresentação do seu conteúdo para os visitantes do seu site. Na seção header poderíamos colocar também um campo de texto para buscas no site, caso fosse necessário.
Seção de conteúdo
Na seção de conteúdo colocamos todo conteúdo da página, como imagens, artigos, listas, vídeos e toda informação que desejamos exibir aos nossos visitantes. A estrutura básica e mais utilizada nessa seção é ter uma área de conteúdo ao lado de uma barra de navegação lateral. É recomendado utilizar as tags <section></section> para definir a área de conteúdo. Para a barra de navegação lateral o recomendado é o uso das tags <aside></aside>. Essas recomendações são uma tentativa de padronizar as páginas web, porém muitos desenvolvedores preferem usar as tags <div></div> em toda estrutura do site.
Continuando a criação da nossa página web, vamos agora definir uma seção de conteúdo com uma barra lateral.
<!doctype html>
<head>
<title>Página de receitas caseiras</title>
</head>
<body>
<header>
<img src="logomarca.png" />
<h1>nome do site</h1>
<nav>
<a href="inicio.html">Início</a>
<a href="artigos.html">Artigos</a>
<a href="contato.html">Contato</a>
</nav>
</header>
<section>
<article>
<h2>Como criar páginas HTML</h2>
<p>Publicado em 15 de Abril de 2024</p>
<p>Nesse artigo você irá aprender do zero
a criar suas primeiras páginas html sem
muito esforços. Basta seguir o passo a passo
desse tutorial para aprender como criar páginas html.
</p>
</article>
</section>
<aside>
<h3>Sobre mim</h3>
<p>Sou um autodidata apaixonado por programação.</p>
<h3>Redes sociais</h3>
<a href="...">Facebook</a>
<a href="...">Instagram</a>
</aside>
</body>
</html>Aqui definimos a área de exibição dos artigos de nosso site e também a área de exibição de outros conteúdos do site, como informações sobre o autor e links das redes sociais do site.
A área de conteúdo, a qual é muito comum ficar ao centro da página ou ao lado esquerdo, é onde mostramos o conteúdo dos artigos do site, caso seja um site de artigos, isto é, um blog. Já a barra lateral, definida com as tags <aside></aside>, é onde colocamos anúncios, links e menus de navegação secundários. Essa é uma área geralmente usada para chamar atenção do usuário para outras páginas do site.
Entre a nossa área de contéudo, definida com <section></section>, colocamos um artigo, usando as tags <article></article>. Essa é a tag recomendada para conteúdos de artigos, porém o mais comum é usar div mesmo.
A seção de conteúdo geralmente é dinâmica, e os dados são carregados do banco de dados de acordo com a solicitação dos visitantes. Podemos listar vários artigos numa página, dentro da seção de conteúdo. O importante aqui, que eu quero que você entenda com esse artigo, é como funciona uma página web e sua estrutura. Aprendendo isso você terá o conhecimento necessário para começar a utilizar as tags HTML para criação de páginas web. Por enquanto não se preocupe com os nomes das tags. Foque na estrutura da página e sua organização.
Rodapé da página
O rodapé é uma seção de conteúdo usada geralmente para informações adicionais sobre o site. Nessa seção é de costume colocar informações referentes a direitos autorais, termos de uso, política de privacidade, dados de contato, links de redes sociais e páginas externas, Essa seção é a última a ser visualizada por um visitante, pois ela fica na parte final da página web. Por esse motivo coloca-se nessa seção informações não muito interessantes para os visitantes do site.
A seção de rodapé é definida com as tags <footer></footer>. Podemos colocar o que quisermos nessa seção, porém devemos levar em consideração como os motores de busca tratam os dados dessa seção. Geralmente é uma seção usada mais para informações jurídicas e menus de navegação, então evite colocar nessa seção os conteúdos que são importantes para os visitantes, pois eles podem sair da sua página antes mesmo de chegar ao final dela (o rodapé).
Definindo a seção rodapé:
<!doctype html>
<head>
<title>Página de receitas caseiras</title>
</head>
<body>
<header>
<img src="logomarca.png" />
<h1>nome do site</h1>
<nav>
<a href="inicio.html">Início</a>
<a href="artigos.html">Artigos</a>
<a href="contato.html">Contato</a>
</nav>
</header>
<section>
<article>
<h2>Como criar páginas HTML</h2>
<p>Publicado em 15 de Abril de 2024</p>
<p>Nesse artigo você irá aprender do zero
a criar suas primeiras páginas html sem
muito esforços. Basta seguir o passo a passo
desse tutorial para aprender como criar páginas html.
</p>
</article>
</section>
<aside>
<h3>Sobre mim</h3>
<p>Sou um autodidata apaixonado por programação.</p>
<h3>Redes sociais</h3>
<a href="...">Facebook</a>
<a href="...">Instagram</a>
</aside>
<footer>
<p> copyright © 2024 - Todos os direitos reservados</p>
<a href="politica.html">política de privacidade</a>
<a href="termos.html"termos de uso</a>
<a href="cookies.html">política de cookies</a>
</footer>
</body>
</html>Considerações finais
Como vimos nesse artigo, uma página HTML tem que seguir uma estrutura padrão para que os navegadores web e motores de buscas possam conseguir interpretá-la da forma correta. Vimos também que uma página é normalmente divídida em seções que agrupam dados que são classificados por sua importância para os visitantes. Na seção header vimos que a importância ali é mostrar para os visitantes o nome do site e um menu de navegação com as principais páginas do site. Na seção de conteúdo vimos que a importância ali é mostrar o conteúdo que o visitante está buscando e, dar a ele uma opção de escolher um novo conteúdo através de links da barra de navegação lateral. Já na seção de rodapé vimos que os dados ali colocados são de pouco interesse dos visitantes, e por isso devemos evitar colocar informações importantes nessa seção.
Com esse artigo você acabou de aprender a criar sua primeira página da web. Agora você tem o conhecimento necessário para criar qualquer tipo de página HTML.
Observação: Se você abrir essa página (que criamos) no seu navegador web, ela não apresentará estrutura visual alguma, pois não aplicamos estilos CSS na página. Apenas criamos a estrutura oculta do conteúdo. A estrutura visual é criada com CSS. Através de código CSS podemos posicionar as seções em qualquer lugar da página.
Conhecendo algumas tags html
TAG: <p>
Essa tag define um parágrafo. Ela é usada para exibição textos legíveis.
<p>Escreva aqui todo texto do seu parágrapho.</p>TAGS: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> e <h7>
Usada para títulos em geral. Títulos de artigos, seções e etc. A tag h1 define o maior título, e a tag h7 define o menor título.
<h1>Título principal</h1>
<h2>Título secundário</h2>
<h3>Subtítulo</h3>TAGS: <ul>, <ol> e <li>
Usadas para criar uma lista de items. Um item da lista é definido com a tag <li>.
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>TAG: <input>
Define um campo de texto com tipos variados. O tipo define entrada de conteúdo para datas, textos, números e senhas. Use a propriedade name para definir o nome do campo, e a propriedade value para definir um valor inicial.
<input type="date" name="data" value=""/>
<input type="text" name="nome" value=""/>
<input type="number" name="telefone" value=""/>
<input type="password" name="senha" value=""/>TAGS: <select> e <option>
Cria uma caixa com uma lista de itens selecionáveis. Na tag select a propriedade name define o nome do campo. Nas tag option a propriedade value define o valor do item selecionado.
<select name="lista-de-paises">
<option value="brasil">Brasil</option>
<option value="inglaterra">Inglaterra</option>
<option value="russia">Russia</option>
</select>TAG: <a>
Cria uma ligação para uma seção da página ou para outra página web. O endereço do site ou página devem ser colocados na propriedade href. Para criar uma ligação para uma seção da mesma página devemos usar o carácter #.
<a href="facebook.com">clique aqui para entrar no facebook</a>
<a href="/">página home</a>
<a href="contato.php">Entrar em contato</a>
<a href="#footer">ir para o rodapé</a>TAG: <img>
Carrega uma imagem na página. A propriedade src define o local da imagem. É possível usar as propriedades height e width para definir a altura e largura da imagem.
<img src="https://site.com/imagem.png">
<img src="https://site.com/imagem.jpg" width="480" height="320">TAG: <button>
Essa tag define um botão. A tag <input> também pode ser usada como botão, mas essa sua utilidade entrou em desuso depois da chegada da tag <button>. Um botão é usado para executar uma ação após ser clicado. Use a propriedade type para definir o tipo do botão. O tipo submit envia um formulário. O tipo reset limpa um formulário.
<button>Salvar</button>
<input type="button" value="Salvar />
<input type="reset" value="Limpar />
<button type="submit">Cadastrar</button>
<input type="submit" value="Cadastrar />Prossiga para o artigo Tutorial básico de css para iniciantes para dar continuidade ao aprendizado sobre como criar páginas da web.
