---
title: 'Adicionar conteúdo ao seu site'
summary: 'Aprenda a adicionar conteúdo como títulos, links, imagens e listas a uma página usando tags HTML.'
permalink: 'adicionar-conteudo-ao-seu-site/'
originalPath: /add-content-to-your-website/
tags: chapter
layout: 'chapter.njk'
---

# Adicionar conteúdo ao seu site

Primeiro, dá um tapinha nas próprias costas: você já tem um site caseiro no ar! Agora é hora de deixá-lo mais interessante.

{% aside 'Quem usa Windows' %}
Se você está tentando abrir o arquivo `index.html` no Bloco de Notas, mas não o vê na pasta do site ao usar _File > Open_, encontre o menu _Text Documents_ no canto inferior direito da janela Abrir e mude para _All Files_.
{% endaside %}

## Adicione um título

Vamos dar um nome a ele! Depende do tipo de site que você está fazendo, mas o meu vai ser uma página pessoal. Todo mundo tem perfil em rede social, mas esses perfis são sem graça e parecidos demais. A gente merece _mais_. E nossa velha amiga, a homepage pessoal, é um lugar perfeito para começar.

```plaintext
Blake's Homepage

My name is Blake. I enjoy making websites and teaching others to do the same.
```

Legal! Vamos ver no navegador.

![Uma página simples. A única linha de texto na página diz: "Blake's Homepage My name is Blake. I enjoy making websites and teaching others to do the same."](/assets/img/add-content-1.webp)

Bem, não era isso que a gente queria. O navegador espremeu o texto numa linha só. Ué?!

Está faltando a _marcação_ do Hypertext _Markup_ Language. (Marcação, ou markup, é o código que diz ao navegador o que cada pedaço do texto é.) Precisamos dizer ao navegador que o nome do site deve ser um título. Em HTML, você pode ter até seis níveis de títulos. Vamos definir o nome do site como o título mais importante, um _título de nível 1_, ou `<h1>`.

O que é esse código estranho em forma de pílula que eu acabei de escrever? É chamado de tag HTML. (Uma tag é um pedaço de código que envolve partes da página para dizer ao navegador o que elas são.) Vamos fazer isso agora.

```html
<h1>Blake's Homepage</h1>

<p>
  My name is Blake. I enjoy making websites and teaching others to do the same.
</p>
```

Aqui, separamos os dois elementos da nossa página e envolvemos cada um em tags. Estamos dizendo que o nome do site deve ser um título de nível 1, e que o primeiro parágrafo deve ser, bem, um _parágrafo_ — é o que o `p` significa.

Repare que um par de tags tem uma tag de _abertura_ e uma tag de _fechamento_. A tag de fechamento é idêntica à de abertura, só que começa com uma barra, `/`.

Agora salve o arquivo e recarregue o navegador. Esse costuma ser o ritmo de criar um site: você muda um pouco de código, salva e aperta recarregar no navegador. Depois, sinta o poder correndo nas veias enquanto você cria um site do nada!

![Um navegador mostra uma página simples, com um título grande e em negrito: "Blake's Homepage." O conteúdo diz: "My name is Blake. I enjoy making websites and teaching others to do the same."](/assets/img/add-content-2.webp)

Uau, bem melhor! Vamos continuar adicionando mais conteúdo.

## Links para outros sites

Você já se perguntou por que se chama _the web_? Tipo, o que isso significa? O ingrediente especial que faz dela uma teia é o _hiperlink_, ou, como a gente costuma chamar, um _link_. Sabe, aquele texto muitas vezes azul, muitas vezes sublinhado, que você clica para pular para outra página, outro site, uma imagem, um vídeo de gato, qualquer coisa!

Isso é possível graças ao elemento _anchor_, ou “tag A”, como é conhecido. Fica assim:

```html
<a>This will go somewhere eventually</a>
```

Tudo que está dentro das tags `<a>` vira clicável. Mas para onde o link nos leva? Por enquanto, para lugar nenhum. Precisamos indicar um destino. Fazemos isso dando à `<a>` um _atributo_ chamado `href`. É a _hypertext reference_ — o lugar para onde você quer ir quando clica no link.

```html
<a href="https://www.wikipedia.org/">Go to Wikipedia</a>
```

Vamos adicionar um link ao nosso site — escolha um dos seus sites favoritos, ou algo divertido e interessante.

```html
<h1>Blake's Homepage</h1>

<p>
  My name is Blake. I enjoy making websites and teaching others to do the same.
</p>

<p>
  Check out these cool web games at <a href="https://neal.fun/">Neal.fun</a>!
</p>
```

Salve e recarregue!

![Captura de tela de um navegador mostrando "Blake's Homepage." O texto diz: "My name is Blake. I enjoy making websites and teaching others to do the same. Check out these cool web games at Neal.fun!" A página tem um visual simples, com texto preto em fundo branco, e inclui um link.](/assets/img/add-content-3.webp)

Com a ajuda da humilde tag `<a>`, o seu site vira parte da web viva, que respira. Existem mais de cem tags HTML, mas você não precisa decorá-las para fazer um site. Dá para fazer muito com pouca coisa. Vamos ver mais algumas tags que já te colocam no caminho.

## Listas de coisas

Fãs de lista, este conjunto de tags é para vocês. Vamos usar o elemento _unordered list_, `<ul>`, para adicionar uma lista com marcadores. O `<ul>` define a lista, e a tag _list item_, `<li>`, define cada item. Assim:

```html
<ul>
  <li>The first thing</li>
  <li>Another thing</li>
  <li>And lastly, this thing</li>
</ul>
```

O código acima vira uma lista com marcadores, deste jeito:

- The first thing
- Another thing
- And lastly, this thing

Se você quiser uma lista numerada, troque `<ul>` por `<ol>` (de _ordered list_). Só isso! Você vai criar uma lista numerada.

1. The first thing
2. Another thing
3. And lastly, this thing

Vamos adicionar uma lista ao nosso site. Aqui está o site inteiro até agora:

```html
<h1>Blake's Homepage</h1>

<p>
  My name is Blake. I enjoy making websites and teaching others to do the same.
</p>

<p>
  Check out these cool web games at <a href="https://neal.fun/">Neal.fun</a>!
</p>

<h2>Favorite board games</h2>

<ul>
  <li>Dungeons & Dragons</li>
  <li>Risk</li>
  <li>Pandemic</li>
</ul>

<h2>How to make a website</h2>

<ol>
  <li>Create an HTML file</li>
  <li>Write some HTML in it</li>
  <li>Open it with your web browser</li>
</ol>
```

Olha só, isso está começando, aos poucos, a parecer um site de verdade!

![Uma página da web intitulada "Blake's Homepage" é exibida. Ela inclui seções sobre jogos de tabuleiro favoritos (Dungeons & Dragons, Risk, Pandemic) e instruções de como fazer um site: 1. Create an HTML file, 2. Write some HTML in it, 3. Open it with a web browser.](/assets/img/add-content-4.webp)

Você vai notar que eu escorreguei uma tag nova ali sem avisar. É um _título de nível 2_, ou tag `<h2>`. Títulos dão estrutura à página e facilitam para os visitantes acharem o que querem.

Há outra diferença sutil entre as tags que temos usado. Algumas, como a tag `<a>`, são _elementos em linha_ (inline): elas não começam uma linha nova e ocupam só a largura necessária. Outras tags — como `<h1>`, `<ul>` e `<p>` — são conhecidas como _elementos de bloco_ (block). Um elemento de bloco começa numa linha nova e ocupa a largura inteira do recipiente.

Até agora temos um monte de palavras. Mas você sabe o que vale por mil delas?

## Adicione imagens ao seu site

Vamos colocar uma imagem legal no nosso site. Pode ser tentador ir no Google Imagens e pegar a primeira coisa que aparecer. Não é o caminho. Você precisa ter os direitos certos para usar a imagem. Há muitos lugares na web para achar imagens (procure imagens com licença Creative Commons). Para simplificar, vamos usar o site popular de imagens grátis [Unsplash](https://unsplash.com).

Eu achei uma imagem legal do espaço. Baixei a versão pequena e renomeei para `space.jpg`, para ficar mais fácil de citar. Ache uma imagem que você goste e solte na pasta, ao lado do seu `index.html`.

Você pode adicioná-la à página usando a _tag de imagem_, ou `<img>`. Diferente das tags que vimos até agora, a tag `<img>` é _auto-fechável_. Isso significa que não existe tag de fechamento. Fica assim:

```html
<img src="space.jpg" alt="Photograph of space with stars and stardust.">
```

Assim como a tag `<a>`, a tag `<img>` usa atributos para dar mais informação sobre como você quer usá-la.

Use o atributo `src` para dizer à tag de imagem a _fonte_ (source) da sua imagem, ou seja, onde ela está. Neste exemplo, estamos dizendo que a imagem está na mesma pasta que a nossa página `index.html` (e não numa subpasta) e que o nome do arquivo é `space.jpg`.

Também precisamos descrever a imagem, caso algum visitante do nosso site não consiga vê-la. Isso pode acontecer por vários motivos — talvez a pessoa seja cega e use um leitor de tela para acessar sites. Ou talvez um problema faça a imagem não carregar. Se isso acontecer, o nosso texto _alternativo_, ou texto `alt`, aparece no lugar.

Vamos salvar e atualizar o navegador.

![Captura de tela de "Blake's Homepage" com uma imagem de uma galáxia estrelada. O texto diz que Blake gosta de fazer sites e ensinar outras pessoas a fazer o mesmo. Abaixo, há seções de jogos de tabuleiro favoritos e um guia de como fazer um site.](/assets/img/add-content-5.webp)

Eu redimensionei a janela para a página inteira caber na captura. Mas se você estiver vendo uma barra de rolagem, está tudo bem!

Dependendo da sua imagem, você pode querer deixá-la menor ou maior. Dá para usar os atributos `width` e/ou `height` para isso. Se você indicar _só_ a largura ou _só_ a altura, o navegador mantém a _proporção_ da imagem — ela não estica nem amassa. Para definir largura ou altura, você informa um número, que representa uma quantidade de pixels.

```html
<img src="space.jpg" alt="Photograph of space with stars and stardust." width="300">
```

Se definirmos o `width` como `300`, fica assim:

![Captura de tela de "Blake's Homepage" com uma imagem de uma galáxia estrelada. A imagem está bem menor do que na captura anterior. O texto diz que Blake gosta de fazer sites e ensinar outras pessoas a fazer o mesmo. Abaixo, há seções de jogos de tabuleiro favoritos e um guia de como fazer um site.](/assets/img/add-content-8.webp)

## Adicione notas ao seu código

Às vezes você quer colocar notas no código — texto que não aparece na página, mas continua visível no código. Você pode fazer isso para organizar um documento, deixar recados (como tarefas) para o você do futuro, ou até esconder um trecho em andamento que ainda não deve aparecer.

Por exemplo, eu poderia deixar um recado para voltar depois e atualizar meus jogos de tabuleiro favoritos.

```html
<h2>Favorite board games</h2>

<!-- Todo: after playing some new games,
see if any deserve to make this list. -->

<ul>
  <li>Dungeons & Dragons</li>
  <li>Risk</li>
  <li>Pandemic</li>
</ul>
```

O navegador ignora tudo que está entre `<!--` e `-->` e não mostra isso na página. Esse tipo de texto se chama _comentário_. Comentários são um jeito legal de anotar o código, porque só aparecem no código — não na página pronta.

Aqui vai outro exemplo, em que eu envolvi várias tags HTML dentro de um comentário. Nada do comentário aparece na página — só no código-fonte.

```html
<!--
Work in progress. When I finalize this list, I'll remove the comment markers.

<h2>Favorite board games</h2>

<ul>
    <li>Dungeons & Dragons</li>
    <li>Risk</li>
    <li>Pandemic</li>
</ul>
-->
```

**O seu código HTML é público, inclusive os comentários.** Qualquer pessoa pode ver o código-fonte do seu site, então não coloque nada secreto ou sensível dentro de comentários. Para ver o código-fonte de uma página, você pode usar um atalho do teclado ou achar a opção no menu do navegador. Varia de navegador para navegador. Veja esta [referência no Lifewire](https://perma.cc/3WP3-R9XL).

## Dê ao seu site uma cabeça e um corpo

Eu não fui totalmente honesto com você até agora. A gente tomou um atalho. Temos escrito _só_ o que o navegador mostra no arquivo `index.html`. Mas todo site tem uma seção invisível. E agora o seu precisa dela.

Lembra que a gente envolve a maioria dos elementos em tags? Na verdade, precisamos envolver a página inteira na tag `<html>`. Uma página HTML ainda se divide numa seção invisível `<head>`, com informações sobre o seu site, e no `<body>`, onde vai todo o seu conteúdo.

```html
<html>
  <head>
    <!-- info about your site goes here -->
  </head>

  <body>
    <!-- stuff you want to show up on your page goes here -->
  </body>
</html>
```

Para deixar nosso documento HTML oficial, vamos adicionar uma linha `doctype` bem no começo. O doctype existe principalmente por razões históricas, mas ele diz ao navegador: “Oi, eu sou um documento HTML, então por favor me mostre do jeito certo!” Pode copiar e colar essa linha e seguir em frente — não sinta que precisa decorar cada detalhe.

```html
<!doctype html>
<html>
  <head>
    ...
  </head>

  <body>
    ...
  </body>
</html>
```

Por enquanto, vamos incluir duas coisas no `<head>`: uma tag title e uma tag meta.

```html
<head>
  <meta charset="utf-8">
  <title>Blake's Homepage</title>
</head>
```

A tag `<title>` controla o texto que aparece na aba do navegador e o nome do seu site quando ele surge nos resultados de busca. Legal!

Podemos usar a tag `<meta>` várias vezes para dar ao navegador informações extras sobre a página. Neste caso, estamos dizendo qual _conjunto de caracteres_ usar. O que você precisa saber: texto UTF-8 significa que símbolos especiais, como emojis, aparecem como se espera. Vamos incluir isso primeiro, antes de qualquer outro elemento de texto, para garantir que todo o nosso texto apareça direito.

{% aside 'Observação' %}
Se tantas tags extras estiverem te confundindo, saiba que você pode copiar e colar esta estrutura inicial. Assim você não precisa lembrar de tudo agora!
{% endaside %}

Aqui está o arquivo `index.html` inteiro, para consulta:

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Blake's Homepage</title>
  </head>

  <body>
    <h1>Blake's Homepage</h1>

    <img src="space.jpg" alt="Photograph of space with stars and stardust.">

    <p>
      My name is Blake. I enjoy making websites and teaching others to do the same.
    </p>

    <p>
      Check out these cool web games at
      <a href="https://neal.fun/">Neal.fun</a>!
    </p>

    <h2>Favorite board games</h2>

    <ul>
      <li>Dungeons & Dragons</li>
      <li>Risk</li>
      <li>Pandemic</li>
    </ul>

    <h2>How to make a website</h2>

    <ol>
      <li>Create an HTML file</li>
      <li>Write some HTML in it</li>
      <li>Open it with your web browser</li>
    </ol>
  </body>
</html>
```

## Atualize o seu site no ar

Essas mudanças estão ficando bem legais. Vamos publicar esta página para o mundo. Vá ao [painel do seu Neocities](https://neocities.org/dashboard). Você vai ver os arquivos iniciais mais o arquivo `index.html` que você enviou no capítulo 1 deste livro. Para deixar um pouco mais limpo, eu estou mudando para a visualização em lista e apagando a imagem PNG e o arquivo CSS que estavam lá no começo.

![Captura de tela de um painel do Neocities. O cabeçalho diz "My Cool Website", com o endereço "blakewatson.neocities.org" embaixo. Mostra detalhes de uso de arquivos e lista dois arquivos, "index.html" e "not_found.html", com opções para editar ou apagar.](/assets/img/add-content-6.webp)

Agora clique no botão _Upload_ ou simplesmente arraste seus arquivos atualizados (a página index e a imagem) para a lista de arquivos.

Feito isso, clique no link do seu site no topo do painel. Esse é o seu site NO AR, recém-atualizado, feito do zero por você. Que demais!

![Captura de tela de um navegador visitando "Blake's Homepage" (o mesmo site de antes). O endereço é blakewatson.neocities.org. A página tem seções sobre jogos de tabuleiro favoritos, incluindo Dungeons & Dragons, Risk e Pandemic, e instruções de como fazer um site.](/assets/img/add-content-7.webp)

## A seguir

No próximo capítulo, vamos fazer um intervalo breve e pegar um editor de texto feito para escrever HTML.