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.

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.

Blake's Homepage

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

Legal! Vamos ver no navegador.

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.

<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!

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:

<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.

<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.

<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!

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:

<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:

<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!

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.

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:

<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.

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.

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

Se definirmos o width como 300, fica assim:

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.

<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.

<!--
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.

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>
  <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.

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

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

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

<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.

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

<!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. 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.

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!

A seguir

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