GD Star Rating
loading...

Benötigte Kenntnisse: mittel

In diesem Tutorial werden wir Schritt für Schritt eine hübsche moderne responsive HTML5-Webseite erstellen. Ich habe versucht so viele Features wie möglich in das Tutorial zu integrieren. Wir werden uns mit einem jQuery Slider, CSS3-Transitions und CSS3-Animationen, CSS Media-Queries und noch einigem mehr beschäftigen. Der erste Teil des Tutorials wird Dir zeigen wie man die grundlegende HTML-Struktur aufbaut und welche Skripts für eine browserunabhängige Darstellung der Webseite benötigt werden. Im zweiten Teil werde ich Dir dann zeigen wie man die Seite mithilfe von CSS3-Features gestaltet, um dann am Ende diese umwerfende HTML5 Cross-Browser-Webseite zu erstellen.

Lingulo HTML5 CSS3 Tutorial

Vorschau

HTML5 responsive Webseite

Download

HTML5 Webseite als Zip-Datei7kB



Bitte beachte, dass dieses Tutorial für Leute gemacht ist, die bereits über einen gewissen Kenntnisstand verfügen. Einige Teile des Tutorials werden nicht im Detail beschrieben, da ich davon ausgehe, dass Du z.B. weißt wie man eine CSS-Datei einbindet oder ähnliches. Falls Dir etwas unklar ist oder Du Fragen hast, schreibe diese bitte als Kommentar unter diesen Beitrag und ich werde versuchen, sie so gut wie möglich zu beantworten.

Struktur der HTML5-Webseite

Zuallererst lass uns einmal einen Blick auf die grundlegende Struktur der Webseite werfen. Klicke auf das kleine Bild rechts, um zu sehen wie unsere Webseite aufgebaut ist. Ich empfehle Dir, immer erst einmal ein Layout zu zeichnen bevor Du anfängst zu programmieren, da es die Arbeit wesentlich erleichtert, wenn Du einen Überblick darüber hast wie Deine Seite aufgebaut sein soll.

Erstellen des head-Bereichs – Doctype und Meta Tags

Lass uns anfangen, indem wir den HTML5 Doctype definieren und unseren head-Bereich mit den benötigten CSS- und Javascript-/jQuery-Dateien erstellen. Die Doctype-Deklaration ist in HTML5-Dokumenten erfreulicherweise einfacher als in früheren Versionen und lässt sich leichter merken.

<!DOCTYPE HTML>

In unserem head-Bereich setzen wir nun den Zeichensatz auf UTF-8, was in HTML5 ebenfalls einfacher geht als in vorherigen HTML-Versionen.

<meta charset="UTF-8">

Da wir ein responsive Design erstellen möchten, das auf allen Geräten und mit allen Bildschirmauflösungen gut aussieht, müssen wir das viewport Meta Tag hinzufügen, das festlegt wie die Webseite auf einem Gerät dargestellt werden soll. Wir setzen die width (Breite) auf device-width (Gerätebreite) und die initial scale (Anfangs-Zoom) auf 1.0. Dadurch wird die Breite des Darstellungsbereichs auf die Breite des Geräts gesetzt und die Webseite 1:1 angezeigt. Ein Bild mit einer Breite von 350px auf einem Bildschirm mit einer Breite von 350px würde also die gesamte Breite einnehmen.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Bitte beachte, dass es verschiedene Meinungen dazu gibt, ob initial-scale und width=device-width genutzt werden sollten. Einige Webentwickler sagen, dass auf initial-scale verzichtet werden sollte, da es in iOS zu einer fehlerhaften Darstellung führen kann. Beim Rotieren des Gerätes wird die Webseite in manchen Fällen über die Breite des Gerätes hinaus skaliert. Die Folge ist, dass der Benutzer manuell herauszoomen muss. Um dieses Problem zu beheben, gibt es verschiedene Scripts, die beim Rotieren des Gerätes das manuelle Zoomen deaktivieren und dadurch den Fehler beheben (hier eines dieser Scripts). Es gibt wohl auch Fälle, in denen schon das Entfernen der Eigenschaft initial-scale ausreicht, um den Fehler zu beheben.

Auf der anderen Seite gibt es einige Webentwickler, die genau das Gegenteil sagen. Raphael Goetter zum Beispiel schrieb in seinem Artikel:

initial-scale=1.0 fits the viewport to the dimensions of the device (device-width and device-height values), which is a good idea because the size of the viewport fits the dimensions of the device regardless of its orientation.

width=device-width size the viewport to always corresponds to the (fixed value) width of the device, and thus is distorted in landscape orientation because que right value should be “device-height” not “device-width” in landscape (and it’s worse on iPhone5 whose device-height value is 568px, compared to its 320px device-width).

Therefore, I would rather recommend to use initial-scale alone, not associated width=device-width. Because the combination of the two is problematic, and moreover I think than even only width=device-width is problematic.

Abschließend lässt sich zu diesem Thema wohl keine allgemeingültige Lösung finden. Ich würde zuallererst einmal versuchen, ob Probleme bei der Benutzung von sowohl initial-scale als auch device-width auftreten. Wenn es dabei zu Problemen in iOS kommt, versuche eine der beiden Eigenschaften zu entfernen und die Seite dann in allen Geräten zu testen (Android und iOS). Sollte es dann immernoch zu Problemen kommen, verwende das oben genannte Script.

Erstellen des head-Bereichs – CSS-Dateien

Wir werden für unsere Webseite vier verschiedene CSS-Dateien verwenden. Das erste Stylesheet heißt reset.css und setzt das Styling aller HTML-Elemente zurück, so dass wir frei gestalten können, ohne uns Gedanken um Unterschiede in verschiedenen Browsern Gedanken machen zu müssen. Für dieses Tutorial habe ich Eric Meyers “Reset CSS” 2.0 benutzt, das Du hier herunterladen kannst.

Das zweite Stylesheet heißt style.css und enthält unser gesamtes Styling. Wenn Du möchtest, kannst Du diese CSS-Datei auch in zwei Stylesheets aufteilen und so das grundlegende Layout vom Rest des Stylesheets trennen.

Wenn Du Dir die Vorschau der Webseite anguckst und auf eines der kleinen Bilder im Hauptinhalts-Bereich klickst, wirst Du sehen, dass sich das Bild in einer größeren Version über der gesamten Seite öffnet. Das Skript, das wir hierfür verwenden, heißt Lightbox2 und ist eine einfache Möglichkeit, Bilder über der aktuellen Seite anzeigen zu lassen. Für dieses Tutorial musst Du Lightbox2 herunterladen und die CSS-Datei „lightbox.css“ einbinden.

Das letzte Stylesheet (Google WebFonts) ermöglicht uns die Benutzung der Schriftarten Open Sans und Baumans. Um Schriften zu finden und sie in Dein Projekt einzubiden, besuche Google Web Fonts.

Bitte beachte, dass die Anzahl an HTTP-Requests sich vergrößert, je mehr CSS-Dateien Du in Deine Webseite einbindest und dies zu längeren Ladezeiten führen kann. Für die Live-Version Deiner Webseite solltest Du alle CSS- und Javascript-Dateien in jeweils eine Datei zusammenfügen. Das Problem dabei ist allerdings, dass die Übersichtlichkeit sehr stark darunter leiden und Dir die zukünfitge Arbeit mit den CSS- und JS-Dateien erschweren wird. Wenn Du Dir sicher bist, dass Du die Dateien in Zukunft nicht mehr verändern wirst, macht es Sinn die Dateien manuell zusammenzufügen. Möchtest Du allerdings auch in Zukunft noch Änderungen vornehmen, empfehle ich Dir das Skript Minify.js zu verwenden, das automatisch alle Deine CSS- und JS-Dateien zusammenfügt, sie minimiert und sie serverseitig cachet.

Erstellen des head-Bereichs – Javascript- / jQuery-Dateien

Jetzt da wir alle CSS-Dateien eingebunden haben, lass uns die benötigten Skripts hinzufügen. Da wir HTML5- und CSS3-Features in unserer Webseite nutzen, benötigen wir einige Skripts, die die Benutzung in allen Browsern ermöglichen. Das erste Skript, das wir benutzen werden, ist Modernizr.js, eine Feature-Erkennungs-Bibliothek für HTML5 und CSS3. Mithilfe dieses Skripts lässt sich auf einfache Weise feststellen, ob ein Browser ein bestimmtes Feature unterstützt oder nicht. Außerdem beinhaltet das Skript auch gleich html5shiv, das die Benutzung von HTML5-Elementen im Internet Explorer ermöglicht. Um Modernizr.js herunterzuladen, klicke hier und achte darauf, dass „html5shiv“ und „Modernizr.load“ ausgewählt sind.

Das zweite Skript, das wir benötigen, ist Respond.js, das responsive Design im Internet Explorer und in anderen Browsern, die keine CSS Media Queries unterstützen, ermöglicht. Klick hier, um es von GitHub herunterzuladen.

Um z.B. lightbox.js nutzen zu können, benötigen wir ebenfalls die jQuery-Bibliothek. Am besten nutzt Du eine externe jQuery-Version von Google und bietest eine lokale jQuery-Datei an, falls die externe nicht geladen werden kann.

Für Lightbox2 müssen wir die Datei lightbox.js einbinden, die sich im Ordner „js“ des Lightbox-Ordners befindet.

Wir werden in diesem Tutorial einige CSS3-Features nutzen, die es erfordern, unterschiedliche Prefixe für die browserunabhängige Darstellung von Eigenschaften zu verwenden. Um nicht bei jeder Eigenschaft manuell alle Prefixe angeben zu müssen, werden wir das Skript Prefix Free nutzen, das automatisch alle benötigten Prefixe erstellt. So reicht es dann, die prefixfreien CSS-Eigenschaften anzugeben. Du kannst das Skript von hier herunterladen.

Das letzte Skript, das wir benötigen, ist der responsive Image-Slider SlideJS. Du kannst das Plug-In vonhier and herunterladen und musst dann die Datei „jquery.slides.min.js“ einbinden.

Dein Code sollte jetzt so aussehen. Im Laufe des Tutorials werden wir den head-Bereich noch mit weiterem Code ergänzen.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>HTML5 responsive website tutorial</title>
<link rel="stylesheet" href="reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link href="lightbox/css/lightbox.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet' type='text/css'/>
<script src="js/modernizr.js"></script>
<script src="js/respond.min.js"></script>

<!-- include extern jQuery file but fall back to local file if extern one fails to load !-->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text\/javascript" src="js\/1.7.2.jquery.min"><\/script>')</script>

<script src="lightbox/js/lightbox.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/jquery.slides.min.js"></script></head>

Erstellen des body-Bereichs – Einführung

HTML5 bietet einige neue Elemente, die uns dabei helfen strukturiertere und zugänglichere Webseiten zu erstellen. Einer der Hauptvorteile von HTML5 ist die Möglichkeit, Deine Webseite zu strukturieren und Screenreadern oder Suchmaschinen einen besseren Überblick zu bieten, was genau sich auf der Seite befindet. Dadurch können diese sich genau die Teile heraussuchen, die für sie interessant sind.

Bevor wir mit dem Codieren beginnen, lass uns erst einmal die wichtigsten neuen Sektions-Elemente in HTML5 betrachten.

Das neue section-Element definiert einen Teil der Webseite mit zusammenhängendem Inhalt. Es sollte nicht als allgemeiner Container oder als reines Gestaltungselement verwendet werden. In diesem Fall sollte man eher auf das gute alte div zurückgreifen.

Ein article definiert einen unabhängingen Inhaltsbereich, der auch für sich allein stehend noch Sinn ergeben müsste.

Ein header-Element definiert einen Header für ein Dokument oder eine Sektion.

Ein footer wird verwendet, um den Footer eines Dokuments oder einer Sektion zu definieren.

Ein nav definiert eine Menge von Navigationslinks, die die Hauptnavigation der Webseite sein sollten.

Ein aside definiert eine Sektion mit zweitrangigem Inhalt. Wird ein aside innerhalb eines article platziert, so sollte der Inhalt sich auf diesen speziellen Artikel beziehen. Steht das aside jedoch außerhalb eines article, sollte der Inhalt sich auf die Seite als Ganzes beziehen.

Jedes Sektions-Element in HTML5 sollte in fast allen Fällen eine Überschrift enthalten. Durch das Definieren von Überschriften für jede Sektion erstellen wir eine neue Sektion in der HTML5 Outline. Dies ist deshalb so wichtig, weil eine korrekte Outline nicht nur die Barrierefreiheit verbessert, sondern auch für SEO von Bedeutung ist. Um eine korrekte Outline zu erstellen, kannst Du das Outliner Tool verwenden. Solltest Du in Deiner Outline ein „Untitled Section“ für eine Sektion sehen, so hast Du für die Sektion keine Überschrift definiert. Für weitere Informationen bezüglich der Dokumentengliederung lest Euch bitte Derek Johnsons Artikel durch.

Wenn Du Dir die Webseite anguckst, die wir in diesem Tutorial erstellen wollen, wirst Du Dich vermutlich fragen: „Wieso sehe ich keine Überschriften für den Header, die Navigation, den Footer oder einige der Sections, obwohl gerade eben gesagt wurde, dass jede Sektion eine Überschrift benötigt?“. Es macht natürlich nicht immer Sinn, eine Überschrift für jede Sektion anzeigen zu lassen.

Wir müssen jedoch Überschriften für jede Sektion definieren, um eine korrekte HTML5 Outline zu erhalten. Überhaupt keine Sektionen zu verwenden würde den kompletten Nutzen eines HTML5 strukturierten Dokuments zerstören.

Eine Lösung ist es, die Überschriften für jede Sektion in Dein HTML5-Dokument einzufügen und diese dann mittels CSS zu verstecken. Beachte aber, dass Du dies nicht mittels display:none machen solltest, da dadurch das Element auch aus der Outline verschwinden würde. Besser ist es die CSS-Eigenschaft clip zu verwenden. Dies ist auch der beste Weg, um nicht von Suchmaschinen fürs Verstecken von Inhalten bestraft zu werden. Wenn Du mehr darüber lesen willst, lies Dir einmal diese Antwort durch.

Erstellen des body-Bereichs – Programmieren der Webseitenstruktur

Jetzt können wir anfangen, die HTML5-Elemente anhand unseres Layout-Überblicks (klicke hier, um den Layout-Überblick in einem neuen Tab zu öffnen, so dass Du zwischen den Tabs hin und her wechseln kannst während Du programmierst) zu erstellen.

Die erste Sektion, die wir benötigen, ist der Header. Er wird unsere Naviagtion und unser Logo beinhalten. In den header setzen wir die Hauptüberschrift h1 und einen Paragraphen. Die Hauptüberschrift könnte z.B. der Name Deiner Webseite oder ein Logo sein, der Paragraph ein Motto oder Satz, der Deine Webseite beschreibt. Abhänging davon, ob die Unterüberschrift wichtige Schlüsselwörter enthält oder für die Navigation der Seite von Bedeutung ist, könnte man hier auch eine h2 verwenden.

Zusätzlich zu der Überschrift und dem Paragraphen fügen wir auch unsere Navigation in den header ein. In das nav-Element fügen wir eine ungeordnete Liste ul mit allen Navigationslinks als Listenelemente li ein. Dein Code für den header sollte jetzt so aussehen.

<header>
<h1>Lingulo HTML5</h1>
<p>A responsive website tutorial</p>
<nav>
<ul>
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Porfolio</a></li>
<li><a href="javascript:void(0)">About</a></li>
<li><a href="javascript:void(0)">Contact</a></li>
</ul>
</nav>
</header>

Auf dem Bild mit dem Layout-Überblick lässt sich erkennen, dass der nächste Bereich unterhalb des Headers „Slider-Images“ heißt. Wenn Du Dir die Vorschau der Webseite anschaust, siehst Du, dass an dieser Stelle ein großer jQuery Image-Slider seinen Platz finden wird, der alle 6 Sekunden sein Bild wechselt. Es gibt eine Vielzahl von unterschiedlichen jQuery Sliders, aber wir werden in diesem Tutorial das responsive Slideshow-Plug-In SlideJS nutzen, das Du Dir jetzt am besten herunterlädst.

Wie Du in den Beispieldateien von SlideJS sehen kannst, benötigt der Slider ein div mit der ID „slides“, das die Bilder enthält, die Du anzeigen lassen möchtest. Da wir ja kleine Inhalts-Boxen auf den Bildern hinzufügen möchten, legen wir um die div „slides“ eine neue section mit der Klasse „container“ und fügen den Inhalt für jede der Inhaltsboxen in einen eigenständigen article mit den IDs „slider_content1“, „slider_content2“, „slider_content3″… Wir verwenden an dieser Stelle IDs anstatt von Klassen, da wir später mit jQuery jeden article ansprechen und sicher sein möchten, dass diese jeweils nur einmal auf der Seite vorkommen. Wir nutzen für die ersten drei Sektionen articles und dann eine einfache div für die Slides, weil die articles unseren unabhängigen Inhalt enthalten, während die div nur unsere drei Slider-Bilder enthält und hauptsächlich zur Gestaltung der Seite genutzt wird. Wenn Du lizenzfreie kostenlose Bilder für Dein Projekt suchst, kannst Du meine Bilder-Suchmaschine Open-Image.net nutzen.

<section class="container">
<h2 class="hidden">Lorem Ipsum</h2>
<article id="slider_content1"></article>
<article id="slider_content2"></article>
<article id="slider_content3"></article>
<div id="slides">
<img src="img/slide1.jpg" alt="Some alt text">
<img src="img/slide2.jpg" alt="Some alt text">
<img src="img/slide3.jpg" alt="Some alt text">
</div>
</section>

Als nächstes fügen wir den Inhalt in „slider_content1“, „slider_content2“ usw. ein. „slider_content1“ enthält den Inhalt, der angezeigt werden soll, wenn das Bild „slide1.jpg“ zu sehen ist, „slider_content2“ für „slide2.jpg“ und so weiter. In diese articles fügen wir jetzt eine Überschrift, einen Teaser und einen „Mehr lesen“-Link, dem Du die Klasse „button“ zuweist, ein. Beachte, dass wir auch eine Überschrift mit der Klasse „hidden“ in die Sektion einfügen, da wir eine korrekte HTML5 Outline erstellen wollen. Wenn Du Probleme dabei hast zu entscheiden, welche Überschrift Du am besten nutzen sollst: ich empfehle Dir, Überschriften mit dem Rang zu verwenden, der zu der Verschachtelung der aktuellen Sektion gehört. Wenn Du mehr über die korrekte Verwendung von Überschriften in Sektionen wissen möchtest, lies Dir bitte diesen Artikel (englisch) durch. Dein gesamter Code für den Slider sollte jetzt so aussehen (ich habe in die Überschrift und Paragraphen Blindtext eingefügt).

<section class="container">
<h2 class="hidden">Lorem Ipsum</h2>
<article id="slider_content1">
<h3>Lorem ipsum dolor?</h3>
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik.</p>
<a class="button" href="some_page.html">Mehr lesen</a>
</article>
<article id="slider_content2">
<h3>Nulla consequat</h3>
<p>Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>
<a class="button" href="some_page.html">Mehr lesen</a>
</article>
<article id="slider_content3">
<h3>Lorem ipsum</h3>
<p>Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben.</p>
<a class="button" href="some_page.html">Mehr lesen</a>
</article>
<div id="slides">
<img src="img/slide1.jpg" alt="Some alt text">
<img src="img/slide2.jpg" alt="Some alt text">
<img src="img/slide3.jpg" alt="Some alt text">
</div>
</section>

Nachdem wir nun die HTML-Struktur des Image-Sliders fertiggestellt haben, kommen wir jetzt zum nächsten Element auf unserer Layout-Übersicht, dem Spacer. Ich habe es Spacer genannt, obwohl es im eigentlichen Sinne kein wirklicher Spacer ist, sondern ein Bereich zwischen Slider und Hauptinhalt mit einer Frage und einem Suchformular. Für den Spacer nutzen wir eine section mit der ID „spacer“. Warum wir für alle sections auf dieser Webseite IDs anstelle von Klassen verwenden? Wir möchten später in der Lage sein, direkt auf einen bestimmten Bereich der Webseite zu verlinken (http://www.lingulo.com/tutorial-content/html5/#spacer zum Beispiel scrollt die Seite soweit herunter, dass der Spacer am oberen Bildschirmrand ist). In den Spacer packen wir jetzt einen neuen Paragraphen und ein div mit der Klasse „search“, die unser Suchformular enthält.

<section id="spacer">
<h2 class="hidden">Dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit?</p>
<div class="search">
<form action="#">
<input type="text" name="sitesearch" value="Enter a word..."/>
<input type="submit" name="start_search" class="button" value="Search"/>
</form>
</div>
</section>

Du schlägst Dich wacker, wir haben jetzt schon fast die Hälfte des gesamten HTML5-Codes, den wir benötigen. Guck Dir noch einmal die Layout-Übersicht an. Wie Du siehst kommen von jetzt an fast nur noch articles in mehreren Containern.

Lass uns mit der nächsten section anfangen, die drei articles mit jeweils einer Überschrift und einem Icon daneben enthält. Die Icons, die ich in diesem Tutorial verwendet habe, stammen von Visualpharm und können hier gefunden werden. Füge außerdem noch eine Überschrift h3 und einen Paragraph p mit etwas Text in die articles. Das br class=“clear“, das Du im Code siehst, nutzen wir, um später die Floatierung der drei articles mit CSS aufzuheben (dazu mehr im zweiten Teil des Tutorials).

<section id="boxcontent">
<h2 class="hidden">Adipiscing</h2>
<article>
<img src="img/some_icon.png" alt="alt text"/>
<h3>Lorem ipsum</h3>
<p>
Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen.</p>
</article>
<article>
<img src="img/some_icon.png" alt="alt text"/>
<h3>Consectetuer</h3>
<p>
Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen...</p>
</article>
<article>
<img src="img/some_icon.png" alt="alt text"/>
<h3>Dolor sit amet</h3>
<p>
Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.</p>
</article>
<br class="clear"/>
</section>

Jetzt geht es an die nächste section, in die wir wieder eine Überschrift h2 sowie vier articles einfügen. In die articles setzen wir eine unsichtbare Überschrift h3 und ein neues HTML5-Element mit dem Namen figure. Das figure-Element wird in Verbindung mit dem figcaption-Element genutzt, um Bilder, Diagramme oder ähnliches logisch auszuzeichnen und sollte auch für sich allein gestellt den ursprünglichen Informationsgehalt beibehalten. Erstelle ein figure-Element und füge ein Bild und eine figcaption hinzu.

Wenn Du mit der Maus über die kleinen Bilder in der Webseiten-Vorschau fährst, wirst Du sehen, dass sie dunkler werden und eine Lupe erscheint. Beim Klick öffnet sich eine große Version des Bildes über der ganzen Webseite. Wir haben ja bereits das Lightbox2-Skript in unseren head-Bereich eingebunden. Um Lightbox2 jetzt für die Bilder zu aktivieren, fügen wir einen Anchor a um unsere Bilder herum ein und geben ihm das Attribut rel=“lightbox“. Das href-Attribut des Anchors sollte auf die größere Version des Bildes weisen.

Der Effekt mit der Lupe beim Mouseover ist komplett mit CSS3-Features realisiert. Um den halb transparenten dunklen Hintergrund zu erstellen, fügen wir ein span-Element in den Anchor ein. Im zweiten Teil des Tutorials werden wir uns dann um das Styling des span-Elements kümmern, um es unsichtbar zu machen und nur bei Mouseover anzeigen zu lassen.

Dein Code für die section „four_columns“ sollte jetzt so aussehen.

<section id="four_columns">
<h2>
Lorem ipsum</h2>
<article class="img-item">
<h3 class="hidden">Dolor sit amet</h3>
<figure>
<a href="img/example-slide-1.jpg" rel="lightbox" title="Some Title">
<span class="thumb-screen"></span>
<img src="img/example-slide-1sml.jpg" alt="Some alt text"/>
</a>
<figcaption>
<strong>
Photo by: Some Name</strong>
Als es die ersten Hügel des Kursivgebirges erklommen hatte
</figcaption>
</figure>
</article>
<article class="img-item">
<h3 class="hidden">Sit Amet</h3>
<figure>
<a href="img/example-slide-2.jpg" rel="lightbox" title="Some Title">
<span class="thumb-screen"></span>
<img src="img/example-slide-2sml.jpg" alt="Some alt text"/>
</a>
<figcaption>
<strong>
Photo by: Some Name</strong>
warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen
</figcaption>
</figure>
</article>
<article class="img-item">
<h3 class="hidden">Dolor Sit</h3>
<figure>
<a href="img/example-slide-3.jpg" rel="lightbox" title="Some Title">
<span class="thumb-screen"></span>
<img src="img/example-slide-3sml.jpg" alt="Some alt text"/>
</a>
<figcaption>
<strong>
Photo by: Some Name</strong>
die Headline von Alphabetdorf und die Subline seiner eigenen Straße.
</figcaption>
</figure>
</article>
<article class="img-item">
<h3 class="hidden">Lorem Ipsum</h3>
<figure>
<a href="img/example-slide-4.jpg" rel="lightbox" title="Some Title">
<span class="thumb-screen"></span>
<img src="img/example-slide-4sml.jpg" alt="Some alt text"/>
</a>
<figcaption>
<strong>
Photo by: Some Name</strong>
Wehmütig lief ihm eine rhetorische Frage über die Wange.
</figcaption>
</figure>
</article>
<br class="clear"/>
</section>

Als nächstes benötigen wir eine weitere section mit einer unsichtbaren Überschrift, einem article und einer weiteren section. Die zweite section beinhaltet ebenso eine Überschrift, die wir später mit CSS verstecken werden und zwei articles mit jeweils einer unsichtbaren Überschrift. Gib der section eine ID, z.B. „text_columns“ und jeder der zwei Spalten eine Klasse, z.B. „column1“ und „column2“. Natürlich könnten wir mit CSS auch ohne Klassen auf den article und die section zugreifen. Ich finde es jedoch übersichtlicher und vor allem leichter wartbar, in so einem Fall Klassen zu verwenden. Sollte sich nämlich einmal etwas am HTML-Code ändern, z.B. ein article in ein div umgeschrieben werden, so muss bei der Benutzung von Klassen nichts an der CSS-Datei geändert werden. In „column1“ fügst Du eine Überschrift h3 und einen Paragraphen p mit etwas Text ein. In „column2“ fügen wir nun zwei articles oder divs ein, je nachdem ob der Inhalt von Relevanz ist und unabhängig für sich stehen könnte oder nicht. In jede dieser Wrapper fügst Du nun einen Paragraphen für den Text und ein Bild ein, das wir später im zweiten Teil des Tutorials animieren werden.

<section id="text_columns">
<h2 class="hidden">Blindtext</h2>
<article class="column1">
<h3>
Dolor sit amet</h3>
<p>Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</p>
<p>Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten.</p>
</article>
<section class="column2">
<h3 class="hidden">Lorem Impsum</h3>
<article class="row">
<h4 class="hidden">Dolor sit</h4>
<img src="img/icon.png" width="80" class="rocket" alt="Some alt text"/>
<p>Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.</p>
</article>
<article class="row">
<h4 class="hidden">Ipsum</h4>
<img src="img/icon.png" width="80" class="clock" alt="Some alt text"/>
<p>Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht.</p>
</article>
</section>
</section>

Wir haben jetzt bereits den Footer unserer Webseite erreicht. Wir fügen hier erneut eine unsichtbare Überschrift ein sowie eine section mit drei articles für die drei Spalten im oberen Teil des Footers. Außerdem setzen wir noch einen weitere section mit der ID „copyright“ hinein, die wir im zweiten Teil des Tutorials am unteren Rand des Footers positionieren werden. In die „copyright“-section fügst Du ein div mit der Klasse „wrapper“ ein, das wir benutzen, um den Inhalt zu zentrieren und eine Maximal-Breite zu definieren (wir werden darauf im zweiten Teil des Tutorials noch detaillierter eingehen). Der Grund, warum wir an dieser Stelle ein div anstelle eines article verwenden ist der, dass wir ja lediglich einen Container fürs korrekte Positionieren (also reines Styling) benötigen und dieser keinen wirklich relevanten oder unabhängigen Inhalt enthält. In das „wrapper“-div fügen wir einen Copyrighthinweis als Text und ein weiteres div mit der Klasse „social“ hinzu, das unsere Links zu den sozialen Netzwerken enthält.

Die section, die wir zuvor bereits erstellt hatten, enthält drei articles mit der Klasse „column“. Zum zweiten und dritten article müssen wir noch eine weitere Klasse hinzufügen, so dass wir später jeden article einzeln mit CSS ansprechen können. Gib dem zweiten article die Klasse „midlist“ und dem dritten die Klasse „rightlist“. Um eine zweite Klasse hinzuzufügen, setze ein Leerzeichen hinter „column“ und schreibe dann die zweite Klasse dahinter (<article class=“column midlist“>). In die articles müssen wir nun etwas Inhalt einfügen, in den ersten eine Überschrift und einen Text. In den mittleren und rechten article setzen wir eine Überschrift und eine ungeordnete Liste mit einem Link in jedem Listenelement . Jeder Link sollte ein img– und ein span-Element enthalten, das den Text enthält, den wir darstellen möchten. Wir nutzen hier ein span, damit wir später in der Lage sind, den Text an jede beliebige Stelle zu positionieren und ihn als ein Block-Element darzustellen (dazu später mehr).

<footer>
<h2 class="hidden">Our footer</h2>
<section id="copyright">
<h3 class="hidden">Copyright notice</h3>
<div class="wrapper">
<div class="social">
<a href="javascript:void(0)"><img src="img/Social-Networks-Google-plus-icon.png" alt="google plus" width="25"/></a>
<a href="javascript:void(0)"><img src="img/Logos-Tumblr-icon.png" alt="tumblr" width="25"/></a>
<a href="javascript:void(0)"><img src="img/Logos-Youtube-icon.png" alt="youtube" width="25"/></a>
<a href="javascript:void(0)"><img src="img/Social-Networks-Bebo-icon.png" alt="bebo" width="25"/></a>
<a href="javascript:void(0)"><img src="img/Social-Networks-Xing-icon.png" alt="xing" width="25"/></a>
</div>
&copy; Copyright 2012 by <a href="http://www.lingulo.com">Lingulo</a>. All Rights Reserved.
</div>
</section>
<section class="wrapper">
<h3 class="hidden">Footer content</h3>
<article class="column">
<h4>Lorem ipsum</h4>
Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein.
</article>
<article class="column midlist">
<h4>Consectetuer</h4>
<ul>
<li><a href="javascript:void(0)">Die Copy warnte das Blindtextchen</a></li>
<li><a href="javascript:void(0)">Unterwegs traf es eine Copy</a></li>
<li><a href="javascript:void(0)">Doch alles Gutzureden konnte</a></li>
<li><a href="javascript:void(0)">Als es die ersten Hügel</a></li>
</ul>
</article>
<article class="column rightlist">
<h4>Dolor sit amet</h4>
<ul>
<li><a href="javascript:void(0)"><img src="img/example-slide-1sml.jpg" width="80" alt="some alt text"/><span>Unterwegs traf es eine Copy. Die Copy warnte.</span></a></li>
<li><a href="javascript:void(0)"><img src="img/example-slide-2sml.jpg" width="80" alt="some alt text"/><span>Doch alles Gutzureden konnte es nicht.</span></a></li>
<li><a href="javascript:void(0)"><img src="img/example-slide-3sml.jpg" width="80" alt="some alt text"/><span>Und es dann in ihre Agentur schleppten.</span></a></li>
</ul>
</article>
</section>
</footer>

Das ist bereits alles! Schließe das body-Tag und das html-Tag und wir sind fertig mit der grundlegenden Struktur der Webseite. Um Dir jetzt einmal den gesamten HTML-Code anzuschauen, klicke bitte hier.

Im zweiten Teil des Tutorials werden wir unsere Webseite stylen, um sie so aussehen zu lassen wie in der Vorschau. Wir werden außerdem noch weiteren HTML-Code hinzufügen, wenn es ans responsive Design geht.

Ich hoffe, der erste Teil des Tutorials hat Euch gefallen, über Kommentare und Verbesserungsvorschläge würde ich mich freuen. Um mit dem zweiten (und auch letzten) Teil des Tutorials fortzufahren, klicke bitte hier.

Wie man eine HTML5 Webseite aufbaut - Teil 1, 7.0 out of 10 based on 4 ratings