Laboratório de Blog HTML
Loading...
</> HTML Blog Lab
Estúdio de web design 01 de 04
Presenter mode

LAB DE BLOG HTML · 01

Construa uma página de blog com HTML.

O HTML dá a cada ideia um lar. Hoje, transformaremos a ideia de um blog em uma página clara e acolhedora — um elemento significativo por vez.

✦

Todos podem contribuir: esboçar, falar, digitar, apontar, fazer uma pergunta ou trabalhar em dupla.

01PlanejarEscolha o que os leitores precisam primeiro.
02ConstruirUse tags para moldar a página.
03CuidarTorná-la utilizável para mais pessoas.
HTML
+
IDEAS

Uma página é uma conversa com o leitor.

PASSO 1 · ESTRUTURA

Comece com o esqueleto.

As tags HTML descrevem a função de cada parte. Um esqueleto semântico ajuda navegadores, leitores de tela e colegas de classe a entenderem sua página.

Tente istoAponte para cada tag e diga pelo que ela é responsável.
<header><nav><main><article><footer>
blog.htmlHTML
<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>Notas de Campo</h1>
      <nav>Sobre · Arquivo</nav>
    </header>
    <main>
      <article>
        <h2>O que faz uma página ser boa?</h2>
      </article>
    </main>
  </body>
</html>
Tags significativas tornam a página mais fácil de navegar.

PASSO 2 · CONTEÚDO

Dê à página uma voz.

As tags contêm o conteúdo, mas as pessoas trazem o ponto de vista. Adicione um título, um link útil e uma imagem com palavras que contem a história.

✓Um título que defina expectativas
✓Um parágrafo com uma ideia clara
✓Um link que diga para onde ele leva
Dica de duplaLeia seu título em voz alta. Ele convida alguém a entrar?
our-blog.local / journal•••

UM DIÁRIO COMPARTILHADO

Qual é a sensação de
uma boa página da web?

Uma coleção de pequenas observações, do nosso estúdio para o seu.

Leia a entrada↗

PASSO 3 · CUIDADO E ACESSO

Abram espaço para todos.

Um bom HTML não serve apenas para ter a aparência correta. Ele oferece a mais pessoas uma chance justa de ler, compreender e participar da conversa.

AaTítulosCrie um caminho claro.
↗LinksDescreva o destino.
▧ImagensAdicione texto alternativo útil.
Sua vezEsboce uma seção do blog e, em seguida, escolha a tag HTML que lhe dará um lugar.
Eu noto…
Eu me pergunto…
Eu posso tentar…
←Voltar
Próximo→