HTML Blog Lab
Loading...
</> HTML Blog Lab
Studio projektowania stron WWW 01 z 04
Presenter mode

LAB HTML BLOG · 01

Zbuduj stronę bloga za pomocą HTML.

HTML daje każdemu pomysłowi dom. Dziś zamienimy pomysł na bloga w przejrzystą, przyjazną stronę — element po elemencie.

✦

Każdy może wnieść swój wkład: szkicować, rozmawiać, pisać, wskazywać, zadawać pytania lub pracować w parach.

01PlanujWybierz to, czego czytelnicy potrzebują najpierw.
02BudujUżyj tagów, aby nadać kształt stronie.
03DbajSpraw, by była dostępna dla większej liczby osób.
HTML
+
IDEAS

Strona to rozmowa z czytelnikiem.

KROK 1 · STRUKTURA

Zacznij od szkielet.

Tagi HTML opisują funkcję każdej części. Semantyczny szkielet pomaga przeglądarkom, czytnikom ekranu i kolegom z klasy zrozumieć Twoją stronę.

Spróbuj tegoWskaż każdy tag i powiedz, za co jest odpowiedzialny.
<header><nav><main><article><footer>
blog.htmlHTML
<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>Notatki z terenu</h1>
      <nav>O mnie · Archiwum</nav>
    </header>
    <main>
      <article>
        <h2>Co sprawia, że strona jest dobra?</h2>
      </article>
    </main>
  </body>
</html>
Znaczące tagi ułatwiają nawigację po stronie.

KROK 2 · TREŚĆ

Nadaj stronie swój głos.

Tagi przechowują treść, ale to ludzie wnoszą punkt widzenia. Dodaj tytuł, przydatny link i obraz z opisem, który opowiada historię.

✓Tytuł, który określa oczekiwania
✓Akapit z jedną jasną myślą
✓Link, który mówi, dokąd prowadzi
Wskazówka dla paryPrzeczytaj nagłówek na głos. Czy zachęca kogoś do wejścia?
our-blog.local / journal•••

WSPÓLNY DZIENNIK

Jak wygląda
dobra strona internetowa?

Kolekcja małych obserwacji, z naszego studia do Waszego.

Przeczytaj wpis↗

KROK 3 · TROBKA I DOSTĘPNOŚĆ

Zrób miejsce dla wszyscy.

Dobry HTML to nie tylko odpowiedni wygląd. Daje on większej liczbie osób sprawiedliwą szansę na przeczytanie, zrozumienie i dołączenie do rozmowy.

AaNagłówkiStwórz jasną ścieżkę.
↗LinkiOpisz cel.
▧ObrazyDodaj pomocny tekst alternatywny.
Twoja kolejZaszkicuj jedną sekcję bloga, a następnie wybierz tag HTML, który będzie dla niej odpowiednim miejscem.
Zauważam…
Zastanawiam się…
Mogę spróbować…
←Wstecz
Dalej→