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.

HTML5 für Webdesigner

Der Kopfbereich zwischen <header> und </header>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Für Kopfbereiche kommt in HTML5 das Element header, zu Einsatz, über das dieser Film mehr zu erzählen weiß.

Transkript

In diesem Film möchte ich ihnen das Element Header vorstellen, das hier für Kopfbereiche eingesetzt wird. Ich klicke hier beim HTML-Doctor auf den Kopfbereich, "Element untersuchen". Und dann sehen wir hier direkt schon "Header=Banner" und "/Header". Und oben wird markiert, das ist der Kopfbereich der Seite. Und hier beim Doctor gibt es natürlich auch einen Element-Index, wo wir auf "H" wie Header klicken. So, hier ist der Head, also oben der Vorspann der Seite, und hier kommt der Header. Hier gibt es immer sehr schön einen Code-Snippet, ein Schnipsel zum Kopieren und eine Prognose des Doctoren, einen Artikel über das Header-Element, so tief wollen wir aber da im Moment gar nicht einsteigen. Hier steht zunächst einmal "represents the header of a document or a section of a document". D.h., einen header gibt es nicht nur für die Seite, für das Dokument, sondern auch für Abschnitte auf einer Seite. Also es kann durchaus mehrere geben. "The header element is typically used to group a set of age 1 to age 6 elements to mark up a page's title and subtitle or tagline." Also oben auf der Seite gibt es ein H1 oder ein anderes Überschriften-Element und darunter so einen Slogan, einen Untertitel, ein Tag-Line und Header -- dürfen andere Dinge enthalten, außer den Überschriften und den Unterüberschriften. Da können Navigationselemente, andere einleitende Inhalte und sonstige Dinge drin auftauchen. So, ich wechsle einmal rüber in den Editor, markiere hier den bereits vorhandenen Absatz und schmeiße den raus und füge hier mal einen Header ein. Und ein paar Zeilen tiefer gibt es den schließenden "/header". Hier kommt dann eine Überschrift rein, H1, fangen wir mit an, denn es gibt keinen Grund, hier nicht mit H1 anzufangen. Und der Haupttitel, die Hauptüberschrift für diese Seite soll schlicht und einfach sein "HTML5 für Webdesigner/h1". So, speichern, einmal rüber in den Firefox und neu laden zum Kucken. Und Sie sehen "HTML5 für Webdesigner" Wenn ich hier jetzt mit Firebug oder mit dem eingebauten, nehmen wir den mal hier zum Untersuchen, anschauen, dann sehen Sie hier den Header. Oben wird er markiert, hier ist das H1 drin, und viel mehr gibt es hier noch nicht. So, zurück in den Editor. Was hier noch fehlt, wenn wir nur eine Überschrift haben, dann brauchen wir das Header-Element drumrum nicht, denn es dient eigentlich ja zum Gruppieren. Sie können das in CSS später natürlich auch zum Gestalten benutzten. Wir brauchen im Moment keine Klasse, keine ID, weil Header eindeutig ist, bis jetzt jedenfalls hier. So class, ich nenne es mal "subtitle tagline Untertitel". Wie immer, die Klassennamen sind nicht reserviert, und es gibt hier immer noch kein Element, was wirklich für Untertitel geeignet ist. Also es gibt keinen Element-Subtitle, auch in HTML5 noch nicht. Das wird heiß diskutiert. Mal sehen, was sich da in den nächsten Wochen und Monaten tun wird. Ich schreibe einfach mal drunter, "Neue Elemente in HTML5". So, das ist der Untertitel, hier ist der Header-Bereich, den können wir ganz einfach ansprechen später im CSS und können Header-Leerstelle H1 z.B. sagen und wissen dann genau, welcher Bereich getroffen ist. Ich gehe rüber in das Dokument und lade neu. Und hier sehen Sie, "Neue Elemente in HTML5". Wieder einmal untersuchen, da is alles drin. Gestaltet wird im Moment nicht, denn es geht ja hauptsächlich um HTML. Soweit ein Header-Bereich. Ganz kurz zusammengefasst kann man sagen "header Kopfbereich/header" und zeichne den Kopfbereich der Seite aus. Ein Header enthält eine Überschrift, einleitende Inhalte und eventuell später Navigationshilfen, und es kann durchaus mehrere Kopfbereiche auf einer Seite geben für Abschnitte, für Artikel usw. und so fort.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 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!