HTML Blog Lab
Loading...
</> HTML Blog Lab
Webdesign-Studio 01 von 04
Presenter mode

HTML BLOG LAB · 01

Erstellen Sie eine Blog-Seite mit HTML.

HTML gibt jeder Idee ein Zuhause. Heute verwandeln wir eine Blog-Idee in eine klare, einladende Seite – ein bedeutungsvolles Element nach dem anderen.

✦

Jeder kann beitragen: skizzieren, sprechen, tippen, zeigen, eine Frage stellen oder sich zusammenschließen.

01PlanenWählen Sie aus, was die Leser zuerst benötigen.
02BauenNutzen Sie Tags, um die Seite zu gestalten.
03FürsorgeMachen Sie sie für mehr Menschen zugänglich.
HTML
+
IDEAS

Eine Seite ist ein Gespräch mit einem Leser.

SCHRITT 1 · STRUKTUR

Beginnen Sie mit dem Skelett.

HTML-Tags beschreiben die Funktion jedes Teils. Ein semantisches Skelett hilft Browsern, Screenreadern und Mitschülern, Ihre Seite zu verstehen.

Versuchen Sie diesZeigen Sie auf jeden Tag und sagen Sie, wofür er zuständig ist.
<header><nav><main><article><footer>
blog.htmlHTML
<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>Feldnotizen</h1>
      <nav>Über uns · Archiv</nav>
    </header>
    <main>
      <article>
        <h2>Was macht eine gute Seite aus?</h2>
      </article>
    </main>
  </body>
</html>
Bedeutungsvolle Tags machen die Navigation auf der Seite einfacher.

SCHRITT 2 · INHALT

Geben Sie der Seite eine Stimme.

Tags halten den Inhalt, aber Menschen bringen die Perspektive ein. Fügen Sie einen Titel, einen nützlichen Link und ein Bild mit Worten hinzu, die die Geschichte erzählen.

✓Ein Titel, der Erwartungen weckt
✓Ein Absatz mit einer klaren Idee
✓Ein Link, der angibt, wohin er führt
Pair-PromptLesen Sie Ihre Überschrift laut vor. Lädt sie jemanden ein?
our-blog.local / journal•••

EIN GEMEINSAMES TAGEBUCH

Wie fühlt sich eine gute
Webseite an?

Eine Sammlung kleiner Beobachtungen, aus unserem Studio für das deine.

Den Eintrag lesen↗

SCHRITT 3 · SORGFALT & ZUGÄNGLICHKEIT

Platz schaffen für alle.

Bei gutem HTML geht es nicht nur um die richtige Optik. Es gibt mehr Menschen eine faire Chance, zu lesen, zu verstehen und an der Konversation teilzunehmen.

AaÜberschriftenSchaffen Sie einen klaren Pfad.
↗LinksBeschreiben Sie das Ziel.
▧BilderFügen Sie hilfreiche Alternativtexte hinzu.
Sie sind dranSkizzieren Sie einen Blog-Abschnitt und wählen Sie dann das HTML-Tag aus, das ihm einen Platz gibt.
Ich bemerke…
Ich frage mich…
Ich kann versuchen…
←Zurück
Weiter→