HTML5 & CSS3

Basic HTML 5 Page

Basic HTML5 Page

Da man sich nicht immer nur mit einzelnen Elementen befassen kann folgt nun ein Beispiel für eine einfache HTML5 Website. Dieses Beispiel nutzt mehrere Container (id="_conatiner") und bekommt einen Responsiv Stylesheet. Der Vorteil der Container liegt darin das HTML5 Attribute praktikabler mehrfach definiert werden können.

=> page_container - Enthält abschließend die ganze Website
=> header_nav_container - Enthält den Header und die Navigation
=> content_container - Enthält sowol den Main- als auch den Sidecontent
=> footer_container - Enthält den Footer der Website

=> main_header - Der Mainheader der Website
=> main_header h1 - Definiert den H1 Titel innerhalb des Headers
=> nav - Definiert die Navigation im Allgemeinem
=> mobile - Entscheidet je nach Endgerät wie die Navigation eingeblendet wird.
=> clear - Sorgt dafür das die Container sich nicht überlagern.

Die Verwednung mehrerer Container soll dafür sorgen, das wenn mehrere Klassen verwendet werden diese sich nicht Außerhalb des vorgesehenen Bereiches bewegen können.

HTML Code

CSS Code

Der Stylesheet wird in 4 Parts unterteilt: "Main, Desktop, Mobil & Print", die Anpassung erfolgt mit "media queries". Der CSS Code ist kommentiert um etwas Platz auf der Seite zu sparen und kann direkt im head-Bereich des HTML Codes untergebracht werden. Besser ist es jedoch diesen in einem externen .css-File unterzubringen.

Nach dem nun die allgemeinen Eltemente für alle Ausgaben und Screens definiert sind, werden nun die Elemente für Desktops und mobile Endgeräte definiert.

Als letztes wird der Printsheet definiert, welcher bis auf den Content (article) alle weiteren Klassen ausblendet.

Ein paar Gedanken

Die Erläuterungen sind so kurz und knapp wie Möglich gehalten und da bereits in mehreren Tutorials ein "Responsiv Menu" erklärt wurde, war dies hier nicht noch einmal nötig. Der Stylesheet ist sehr Minimalistisch und Einfach gehalten, dafür lässt er sich leicht und einfach erweitern. Der Stylesheet selbst ist so erstellt das er in vielen Browsern korrekt angezeigt werden kann und sich direkt an die Displaygröße des Besuchers anpasst.

Demo

Last modified: May 27 2019 20:30:34.

Diese Website verwendet Cookies. Datenschutzrichtlinien