Primeiro site

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

A Biblioteca da Ribeira ganha agora uma página mínima: título, um parágrafo e a fachada desenhada. O acervo ainda é fictício. Lina Bezerra ainda não aparece como coordenação; isso vem nos capítulos de texto.

Trabalhe em 02-primeiro-site. Leia o index.html, copie se precisar, mude uma coisa (por exemplo Recife por Olinda), preveja, recarregue e confira.

O arquivo mora no disco. O navegador desenha a página. 127.0.0.1 testa como a Web, nesta máquina. Publicar é outro ato. Este exemplo não deve ir ao ar com dados reais.

O que você vai aprender

• Montar um HTML mínimo com DOCTYPE, html, head e body.
• Usar a tag img e o atributo alt.
• Ligar o arquivo da imagem pelo caminho certo.
• Distinguir página no disco, teste local e publicação.
• Recarregar depois de uma mudança só.

O esqueleto da página

Todo documento deste volume começa avisando que é HTML e qual é o idioma.

lang="pt-BR" ajuda o navegador e as tecnologias assistivas. charset="utf-8" preserva acentos. O viewport evita que o celular trate a página como um cartaz minúsculo.

O head guarda o que a pessoa não lê como conteúdo: título da aba, charset, viewport. O body guarda o que aparece na janela.

Título, parágrafo e imagem

A tag h1 é o título principal da página. A tag p é um parágrafo. A tag img coloca uma imagem. img não tem tag de fechamento.

O atributo src diz o arquivo. O atributo alt descreve a imagem para quem não a vê. Se a imagem for só enfeite, o alt pode ficar vazio; a fachada da biblioteca não é enfeite.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Biblioteca da Ribeira</title>
  </head>
  <body>
    <h1>Biblioteca da Ribeira</h1>
    <img src="ribeira-fachada.png" width="600" alt="Desenho da fachada fictícia da biblioteca no bairro da Ribeira">
    <p>Acervo comunitário no bairro da Ribeira, Recife. Empréstimo de livros, hora do conto e um café de caneca esmaltada.</p>
    <p>Este arquivo ainda mora só no seu disco.</p>
  </body>
</html>

Mude “Recife” para “Olinda”. Salve. Recarregue. Só o texto deve mudar.

O caminho da imagem

src="ribeira-fachada.png" procura o arquivo na mesma pasta que o HTML. Se a imagem estiver em outra pasta, o caminho precisa apontar para lá.

Erro comum: escrever imagens/ribeira-fachada.png quando o PNG está ao lado do index.html. O navegador pede um arquivo que não existe e a figura some. Fica um ícone quebrado; o alt ainda deve fazer sentido.

Disco, navegador e 127.0.0.1

Abrir o arquivo pelo Explorador mostra file://. A imagem só aparece se o caminho relativo estiver certo em relação àquele arquivo.

Servir a pasta curso em 127.0.0.1 usa HTTP local. O endereço vira algo como http://127.0.0.1:8765/exemplos/02-primeiro-site/. A imagem continua no disco; o servidor é que a entrega.

Publicação copiaria esses arquivos para um servidor público. Aí qualquer pessoa poderia abrir. Não publique este exercício com nomes reais.

Uma mudança por vez

O ciclo deste capítulo: ler o HTML → copiar se ainda não tiver → mudar uma frase → prever o recarregamento → conferir.

Se mudar o src e o texto ao mesmo tempo, você não saberá qual alteração quebrou a figura.

O width="600" é um palpite de tamanho. Depois o CSS controla melhor. Por enquanto, o HTML já mostra o acervo.

O que ainda não é o site completo

Não há menu, nem várias páginas, nem CSS próprio. Isso é proposital. A Biblioteca da Ribeira começa visível. O resto se constrói nos capítulos seguintes.

Se a fachada não aparecer, volte ao nome do PNG e à pasta. Não avance para padrões da Web com a imagem quebrada: o erro se arrasta.

Você avança se a fachada aparece, o alt descreve a imagem e você sabe que a página ainda não está publicada.

Atividades

1. O que o atributo alt faz quando a imagem não carrega?
2. Por que src="ribeira-fachada.png" funciona neste exemplo e src="imagens/ribeira-fachada.png" pode falhar?
3. Abrir o index.html pelo disco publica a Biblioteca da Ribeira na internet?

Respostas comentadas

1. O navegador (e o leitor de tela) usam o texto do alt no lugar da figura. Por isso a descrição precisa ser útil, não um nome de arquivo.
2. Neste exemplo o PNG está na mesma pasta do HTML. A pasta imagens/ seria outro lugar. Caminho errado = pedido que o servidor ou o disco não acha.
3. Não. Disco e 127.0.0.1 são locais. Publicar exige copiar os arquivos para um servidor que outras pessoas alcançam.

O arquivo completo

Referência do exemplo 02-primeiro-site, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>

<html lang="pt-BR">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Biblioteca da Ribeira</title>
<style>
/* Apoio de leitura, teclado e tela estreita. */
img{max-width:100%;height:auto} html {overflow-wrap:anywhere} main {min-width:0} input,textarea,select,canvas {max-width:100%;box-sizing:border-box} fieldset {min-width:0}
pre {max-width:100%;overflow:auto} :focus-visible {outline:3px solid #0f3d3e;outline-offset:3px}
.skip {position:absolute;top:-5rem;left:1rem;background:#0f3d3e;color:white;padding:.5rem;z-index:9}.skip:focus {top:.5rem}
table {max-width:100%} td,th {overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
</style></head>
<body><a class="skip" href="#conteudo">Pular para o conteúdo</a><main id="conteudo" tabindex="-1">
<h1>Biblioteca da Ribeira</h1>
<img alt="Desenho da fachada fictícia da biblioteca no bairro da Ribeira" src="ribeira-fachada.png" width="600"/>
<p>Acervo comunitário no bairro da Ribeira, Recife. Empréstimo de livros, hora do conto e um café de caneca esmaltada.</p>
<p>Este arquivo ainda mora só no seu disco.</p>
</main></body>
</html>