HTML5 für Webdesigner

Beispiel-Skizze, Teil 2: Der Kopfbereich <header> mit dem Logo

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Film erstellen Sie den Kopfbereich mit dem Element header und binden das Logo ein.

Transkript

Bei der Skizze der video2brain-Startseite mit den neuen Layoutbereichen ist der Head-Bereich bereits fertig, der Seitentitel ist da und die Seitenbeschreibung. Im Browser sieht das bis jetzt noch nicht sonderlich nach der Startseite von video2brain aus, aber hier oben prangt schon mal der Seitentitel. Weiter geht es jetzt mit dem ersten neuen Layoutbereich und zwar wird das der Header. Hier der Kopfbereich, bei dem wir die Hauptüberschriften, Untertitel haben sowie einen Navigationsbereich in unserer vorbereiteten Seite. Einmal ganz kurz die Startseite noch anschauen. Da sehen Sie schon: Da oben ist das Logo, dann haben wir zwei Navigationsbereiche, hier ist der Metabereich und darunter die Sitenavigation. D.h. wir müssen da ein klein bisschen umbauen. Als erstes benötigen wir das Logo. Einfachste Art und Weise zum Nachbauen ist hier: "Bild speichern unter" und dann im Unterordner Grafiken speichern. Das habe ich hier schon einmal vorbereitet. Hier ist der Ordner Grafiken, hier ist das Logo. Hier sehen Sie auch schon noch weitere Grafiken, die wir später benötigen, bei der Gestaltung. Im Augenblick ist es Logo, das zählt als Inhalt, das benötigen wir. Ich hole mir den Dateinamen einmal in die Zwischenablage mit Strg+C und achte hier auch gleich auf die Abmessungen: 169 x 45. Auch in die mentale Zwischenablage legen oder gleich nochmal gucken, wenn wir es bis dahin vergessen haben. Los geht es. Den Untertitel benötigen wir nicht, weil der ist gleich im Logo mit eingearbeitet. Statt des Textes hier soll hier eine Grafik eingebaut werden. Grafiken gehen nach wie vor mit "img". Die Grafik liegt im Unterordner Grafiken und hat diesen schönen, langen Dateinamen, "v2blogolinda_en.png". Die Breite war 169 Pixel und die Höhe, height, ist gleich 45. Dann brauchen wir noch einen alternativen Text. Der entspricht dem textlichen Inhalt des Logos: "Linda.com brand". Das ist der alternative Text, d.h. der wird angezeigt, wenn das Logo nicht angezeigt wird. Man schreibt hier also nicht hin: "Logo video2brain" sondern den textlichen Inhalt des Logos. Im Browser sieht das im Moment so aus: Hier ist das Logo, die Schrift ist weiß. Auf weißem Hintergrund ist das im Moment noch nicht so toll zu lesen. Wenn wir es verziehen, können Sie es ansehen. Die Schattierung ist schon da. Wenn der Kopfbereich später einen schwarzen Hintergrund kriegt, dann kann man das ganz gut lesen. Der alternative Text würde hier statt der Grafik erscheinen. Da würde dann also stehen: "video2brainLinda.com brand." Soweit ist der erste Teil des Kopfbereiches bereits fertig. Gleich geht es weiter, mit den Navigationsbereichen. Das Logo sitzt drin. Jetzt fehlen im Kopfbereich noch diese beiden Navigationsbereiche.

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!