Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Little Boxes – die HTML-Basics

Überschriften benutzen: h1, h2 & Co.

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Webseiten werden oft mehr überflogen als gelesen. Überschriften, Absätze, Hervorhebungen und Listen helfen, den Text zu strukturieren und aufzulockern. In diesem Video geht es um die Darstellung von Überschriften.

Transkript

Webseiten werden nach der Anzeige im Browserfenster meist nicht wirklich konzentriert Wort für Wort von links oben nach rechts unten gelesen, sondern der Besucher springt von einem Punkt zum anderen auf der Suche nach etwas, was ihn interessiert, was für ihn relevant ist. Und dieses Springen, das macht man auf Webseiten leichter, indem man kurze Absätze benutzt und Überschriften und Listen hier unten und andere farbliche Hervorhebungen, so dass man das Auge ein bisschen leitet. Das könnte für Sie interessant sein, so Textwüsten von mehreren zig-Zeilen Länge ohne Absatz, ohne Punkt und Komma, das macht man eher nicht. Überschriften spielen eine große Rolle. Und ich gehe hier jetzt in den Editor und zeige Ihnen, wie man Überschriften einbaut. Als Erstes kommt im Kopfbereich, hier im header, kommt die Hauptüberschrift h1. /h1 kommt automatisch und dann schreibe ich einfach Little Boxes da unten drunter. Das ist schon mal eine Überschrift. h1 heißt nicht die erste Überschrift, sondern eine Gliederung erster Ebene. HTML kennt insgesamt sechs verschiedene Gliederungsebenen von h1 bis h6. Und das wird dazu benutzt, den Inhalt zu gliedern. Ich gehe jetzt hier rüber, die Startseite index.html ist im Browser, ich lade neu und da ist die Überschrift. Knallgroß, aber im HTML h1 das sagt nichts darüber, wie die Überschrift aussehen soll. Das sollten Sie auch gar nicht versuchen. Wenn Ihnen das jetzt zu groß ist, üben Sie sich in Geduld. Gestaltet wird das mit CSS, versuchen Sie nicht jetzt hier h3 zu nehmen, bloß damit der Text kleiner wird. Das sollte man nicht tun. So, unterhalb dieser Überschrift, die rücke ich mal ein mit einem Tab-Stopp, kommt ein Absatz ganz schnell eben zwischendurch mit der class="slogan". Und den werden wir nennen Webseiten gestalten mit HTML und CSS. Grundlagen. So, einmal speichern, rüber in den Browser, neu laden. Da ist der Absatz unten drunter. Auch die Abstände hierzwischen, das ist Gestaltung per CSS, im Moment geht es nur darum, den Text zu strukturieren. Das ist ein Absatz, die lernen Sie auch noch genauer kennen. Und die class=slogan ist einfach nur ein Zusatz, den ich gegeben habe, weil das ein besonderer Absatz ist. slogan könnte auch Untertitel oder catchy Begriff oder irgendwie so was heißen, das können Sie sich selber ausdenken. Ich habe es hier slogan genannt. So, eine weitere Überschrift kommt in den main Bereich, in den Inhaltsbereich. Den Navigationsbereich überspringe ich erstmal. Und hier kommt jetzt h2 hin. h2 und der bezeichnet die Seite, das ist Startseite. So, speichern, Browser, neu laden, da ist Startseite. Auch wenn ich hier nichts darüber gesagt habe, wie es aussehen soll, dann macht der Browser doch von alleine hier schon ein bisschen was. Das liegt daran, dass der ein eingebautes Stylesheet hat und dann sagt: "Wenn der Autor nichts sagt, dann mache ich h1 so groß und h2 so groß". Das kann man später alles ändern. h2 bedeutet jetzt nicht, dass hier das die zweite Überschrift ist, sondern das ist die zweite Gliederungsebene. Ich zeige Ihnen das in der Praxis hier auf der Startseite einmal. Ich ruf die Web Developer- Symbolleiste auf und das Menü Kontur Eigene Elemente. Da habe ich hier schon mal eingetragen h1 und h2, das schreibt man einfach hin. Tab, Tab, h2 und klicke dann auf OK. Und dann sehen Sie, dann werden die auf der Seite hervorgehoben. Hier gibt es nur eine h1-Überschrift und alle anderen sind h2, weil die diegleiche Gliederungsebene haben. Das ist quasi ein Bereich darunter. h2, h2, h2, da gibt's also durchaus mehrere davon. So könnte es hier, wenn es'ne Sidebar gibt, zum Beispiel, die würde man auch wieder als h2 auszeichnen. So, noch ein Blick in den Editor. h1 haben wir, h2 haben wir. Das sind Überschriften. Auch wenn Sie früher im Deutschunterricht das Wort Gliederung nicht so sonderlich anziehend fanden, sollten Sie auf den Webseiten Überschriften einsetzen. Die geben einer Webseite Struktur und machen den Text leichter lesbar.

Little Boxes – die HTML-Basics

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 3 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!