Anzeige
Tutorialbeschreibung

HTML5: Erstellung eines Grundgerüsts mit HTML5 / CSS3

HTML5: Erstellung eines Grundgerüsts mit HTML5 / CSS3

In diesem Tutorial möchte ich den HTML5-Anfängern unter euch zeigen, wie man eine einfache HTML5-Seite mit den neuen Tags Header, Nav, Section, Article, Aside und Footer und CSS3 erstellt. Ich möchte dabei Schritt für Schritt zeigen, wie man die einzelnen Bestandteile der Seite aufbaut. Für dieses Tutorial sind Kenntnisse in HTML4 und CSS2 erforderlich, damit ihr die einzelnen Schritte nachvollziehen könnt. Das Endergebnis kann auch als Arbeitsdatei heruntergeladen werden.


Schritt 1: Die Grundüberlegung

Bevor wir uns auf die Arbeit stürzen, müssen wir uns erst einmal überlegen, wie unsere Seite aussehen soll. Ich habe mich hierbei für einen einfachen Aufbau entschieden: Oben befinden sich der Header und die Navigation, welche links ausgerichtet ist. Anschließend kommt direkt der Content-Bereich mit einer Sidebar. Zu guter Letzt haben wir den Footer.

Das Ganze "skizziert" sieht folgendermaßen aus:

Bilder



 

Schritt 2: Aufbau des HTML5-Gerüsts

Da wir nun wissen, wie unsere Webseite aussehen soll, können wir uns um die Umsetzung unserer Seite kümmern. Wir beginnen zunächst einmal mit dem reinen HTML-Code. Dazu öffnen wir Dreamweaver (oder einen beliebigen Editor) und erstellen erst mal ein einfaches HTML5-Dokument mit einfachem Grundaufbau:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML 5 &Uuml;bung</title>
<style>

</style>
</head>

<body>
 
</body>
</html>



Unser Augenmerk liegt dabei zunächst einmal auf dem Body-Bereich. Dort erstellen wir ein Div mit der Klasse "container":

<div class="container">

 </div>


Innerhalb dieses DIVs kommen nun der Header, die Navigation, der Section-Bereich, die Sidebar und der Footer.

 
Der Aufbau sieht dabei folgendermaßen aus:
<div class="container">
  <header>
   <h1>
   Meine Seite
   </h1>
   <nav>
   <ul>
   <li><a href="">Home</a></li>
   <li><a href="">About</a></li>
   <li><a href="">Portolio</a></li>
   <li><a href="">Impressum</a></li>
   </ul>
   </nav>
  </header>
  <div style="overflow:hidden;">
  <section>
   <article>
    <h2>Meine &Uuml;berschrift</h2>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</article>
  </section>
  <aside>
   <h2>Meine Sidebar</h2>
   Hier gibt es klitzekleine Infos, die den Leser informieren sollen.</aside>
  <div style="height: 20px; clear:both;"></div>
  </div>
  <footer>
  &copy; Meine-Seite.de
  </footer>
 </div>


Zur Erklärung: Der Header enthält eine große Schrift als "Logo" und die Navigation, welche in einer List aufgeführt ist. Anschließend fängt der Content-Bereich an, wobei der Section- und Aside-Bereich gemeinsam von einem DIV umrahmt mit der Style-Eigenschaft "overflow: hidden;" enthält, denn wir wollen den Content- und Sidebar-Bereich durch Linien trennen, die nicht über diesen Bereich laufen sollen. Im Section-/Article-Bereich haben wir einen Text mit einer Überschrift. Im Bereich Aside genauso. Es folgt ein DIV mit der Style-Eigenschaft "height: 20px; clear:both;". Die 20 Pixel Höhe sollen später verhindern, dass die Texte den oberen Rand des Footers berühren, während das clear:both; das Floaten beenden soll.

 
Wir speichern das Ganze und schauen uns unser Zwischenergebnis an, welches erst mal nicht besonders ausschaut.

Bilder



 

Schritt 3: Grundlegende Formatierungen mit CSS

Unsere Seite sieht natürlich alles andere als schön aus, da wir zunächst den reinen HTML-Aufbau haben. Um dem Ganzen eine Gestalt und eine Struktur zu geben, werden wir jetzt mit CSS zu Werke gehen. Wir gehen wieder zurück zu unserem Editor und geben im Head-Bereich erst mal die notwendigen Style-Tags ein und sorgen dafür, dass unsere HTML5-Elemente als Block-Elemente dargestellt werden. Außerdem wollen wir jeglichen Freiraum mit margin:0; und padding:0; zunächst einmal beseitigen.

Das Ganze sieht in etwa so aus:

<style>
<!--
* { margin: 0; padding: 0;}

header, nav, section, article, aside, footer {

display: block;

}

-->
</style>


Anmerkung: mit dem Stern sprechen wir alle HTML-Tags bzw. HTML-Elemente an.

Unter unserer Block-Anweisung beginnen wir eine neue Zeile für den Body. Als Schrift verwenden wir die "Trebuchet MS" mit einer Größe von 14px und einem dunklen Grau als Schriftfarbe. Die Höhe beträgt hierbei 100%, welche wichtig für die spätere Overflow-Anweisung ist.

Unsere Body-Anweisung sieht dann wie folgt aus:

body {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
height:100%;

}


 
Wir speichern wieder unser Dokument (Strg+S oder cmd+S) und schauen uns das Ganze noch mal im Browser an:

Bilder



 

Schritt 4: Ausrichtung der Seite & Formatierung des Headers

Natürlich sieht das Ganze nun etwas unschön aus, da wir durch den Margin- und Padding-Befehl alles zusammengequetscht haben. So können wir aber selbst entscheiden, welchen Abstand unsere Elemente haben sollen und können unsere Seite entsprechend flexibel gestalten.

Bevor wir unseren Header gestalten, müssen wir uns kurz noch um den Container kümmern, den wir am Anfang unserer Seite gesetzt haben. Um ihn mittig zu platzieren, verwenden wir "margin": auto;". Unsere Seite soll eine Breite von 800 Pixel haben (width: 800px;) und von oben und unten etwas Freiraum bekommen. Das erledigen wir mit "padding: 20px 0;". Anschließend erhält der Container eine Höhe von 1%. Das Ganze kommt unter den Formatierungen für den Body-Bereich.

Unser Container hat somit folgende Eigenschaften:

.container {

margin: auto;
width: 800px;
padding: 20px 0;
height: 1%;

}


Kommen wir nun zu unserem Header! Dieser soll ein helles Blau bekommen (background-color: #3E94D1;) und in den Genuss der Border-Radius-Funktion in CSS3 kommen. Dazu runden wir die Kanten oben links und oben rechts mit "border-top-left-radius: 6px;" und "border-top-right-radius: 6px;" ab.

Unser Header hat somit folgende Eigenschaften

header {

background-color: #3E94D1;
border-top-left-radius: 6px;
border-top-right-radius: 6px;

}


Die Schrift des Logos ist natürlich etwas zu dunkel für unseren blauen Header. Deswegen ändern wir die Schriftfarbe auf Weiß (color: white;).

 
Damit das Logo nicht zu sehr an den Rand des Headers geht, geben wir ihm mit "padding: 15px 20px;" von oben und unten etwas Freiraum und verschieben es zugleich etwas nach rechts. Damit es auch etwas spezieller ausschaut, stellen wir die Schrift in Großbuchstaben dar. Dies tun wir mit "text-transform: uppercase;". So müssen wir nicht alles noch mal in Großbuchstaben eintippen.

Der CSS-Code für die Header-Schrift sieht jetzt folgendermaßen aus:

header h1{

color: white;
padding: 15px 20px;
text-transform: uppercase;

}


Wir speichern das Ganze wieder und schauen in unserem Browser das Zwischenergebnis an:

Bilder



 

Schritt 5: Gestaltung der Navigation

Unser Header ist nun schon mal fast fertig ... aber nur fast! Denn innerhalb des Headers befindet sich die Navigation, die durch ihre Listenpunkte und ihre Anordnung etwas deplaziert wirkt. Die wollen wir ändern und geben unserem Nav-Tag im Style-Bereich folgende Eigenschaften:

nav {

padding: 0 15px;

}


Jetzt haben wir unserer Navigation links und auch rechts etwas Freiraum gegeben. Am Ende dieses Schrittes soll daraus auch eine horizontale Navigation werden, welche (je nach Größe) von links auch von rechts Freiraum hat. Im Falle meines Beispiels hätte ich sie auch nur von links aus verschieben können. Das tut dem Ganzen aber keinen Abbruch.

Kommen wir zum UL-Element. Über dieses können wir die Listenpunkte entfernen und die Schrift festlegen. Die Listenpunkte entfernen wir mit "list-style: none;". Der Schrift geben wir eine Größe von 16 Pixel (font-size: 16px;) und stellen die Menüpunkte in Großbuchstaben dar (text-transform: uppercase;).

Damit hätten wir schon mal folgenden Code:
<span>nav ul{

list-style: none;
font-size: 16px;
text-transform: uppercase;

}</span>


Natürlich ist unsere Navigation noch vertikal. Um dem entgegenzuwirken, knüpfen wir uns jetzt das LI-Element vor und stellen mit "display: inline;" sicher, dass die Navigation horizontal ist und die Menüpunkte somit nebeneinander stehen. Mithilfe von "margin: 0;" und "padding: 0;" sorge ich dafür, dass die LI-Elemente weder verschoben werden noch einen Freiraum haben. Dafür soll gleich das A-Element herhalten.

 
Doch bevor ich dazu komme, schauen wir uns die Eigenschaften unseres LI-Elementes an:
<span>nav ul li{

display: inline;
margin: 0;
        padding: 0;

}</span>


Unser A-Element wird jetzt Opfer unserer CSS-Anweisungen. Wir geben ihm einen Freiraum von 6 Pixel links und rechts mit "padding: 0 6px;" und eine dunkelblaue Hintergrundfarbe (background-color: #03406A;). Als Schriftfarbe nehmen wir ein helleres Blau (color: #09F;) und sorgen damit dafür, dass unsere Menüpunkte nicht untergehen. Mit "display: inline;" sorgen wir dafür, dass die Element nebeneinander gereiht sind. Damit die Texte nicht mehr unterstrichen sind, verwenden wir den Befehl "text-decoration: none;". Wir wollen natürlich unserer Navigation ein bisschen "Pepp" geben und runden die Kanten oben links und oben rechts wieder mit "border-top-left-radius: 6px;" bzw. "border-top-right-radius: 6px;" ab. Damit sind Grafiken mit Photoshop und CSS-Notlösungen nun Vergangenheit!

Wir haben hier nun einiges geschafft. Unser Code sieht folgendermaßen aus:
<span>nav ul li a{

padding: 0 6px;
background-color: #03406A;
color: #09F;
display: inline;
text-decoration: none;
border-top-left-radius: 6px;
border-top-right-radius: 6px;

}</span>


Wir sind allerdings noch nicht ganz fertig. Natürlich soll ein Menü-Punkt beim Drüberfahren mit der Maus auch reagieren. Dies tun wir mit folgendem Code:
<span>nav ul li.active a,
nav ul li a:hover
{

background-color: white;
color: #09F;
}</span>


Ich habe mich hierbei für einen weißen Hintergrund entschieden. Die Schriftfarbe habe ich so gelassen.

Damit können wir unser Dokument noch mal zwischenspeichern und es wieder betrachten:

Bilder



 

Schritt 6: Section und Article - wir kommen!

Die Navigation ist fertig und sieht doch schon mal ganz interessant aus! Doch wir haben noch etwas Arbeit vor uns. Das Section- und Article-Element warten darauf, ihre Stylesheets zu bekommen. Lassen wir sie nicht lange warten.

Beginnen wir mit dem Section-Bereich. Dieser soll eine Weite von 470 Pixel (width: 470px;) bekommen und nach links ausgerichtet werden (float:left;), damit die Sidebar auch Platz neben dem Haupt-Content-Bereich findet. Wir geben dem Section-Bereich einen linken und rechten Rand mit grauer Farbe und einer Strichstärke von einem Pixel (border-right: solid 1px #CCC; und border-left: solid 1px #CCC;). Nun wird es etwas tricky! Wir wollen nämlich erreichen, dass Section und Sidebar unabhängig von der Menge des Inhalts immer bis zum Footer heranreichen und keine Lücke dazwischenkommt. Das erreichen wir mit "padding-bottom: 10000px;" und "margin-bottom: -10000px;". Daher auch das DIV mit "overflow: hidden;", da die Linien ansonsten über den Section-Bereich hinausgehen würden, was etwas unvorteilhaft aussehen würde.

Lange Rede, kurzer Sinn. Hier ist der CSS-Code für die Section:
<span>section {

width: 470px;
float: left;
border-right: solid 1px #CCC;
border-left: solid 1px #CCC;
padding-bottom:10000px;
        margin-bottom:-10000px; 


}</span>


Zu jeder Section (Kategorie) gehören natürlich auch entsprechende Artikel, die einer Section zugeordnet werden. Wir haben am Anfang des Tutorials bereits innerhalb des Section-Bereiches ein Article-Element gesetzt. Dieses wollen wir nun etwas anpassen, damit der Text nicht mit dem Rand in Berührung kommt. Wir wollen auch, dass die Überschrift einen gesunden Abstand zum Hauptext und dem Header hat. Dies alles zusammen erreichen wir mit folgendem Code:
<span>article {

    padding: 15px 15px 5px 20px;
}

article h2 {

padding-top: 10px;
padding-bottom: 20px;

}</span>


Durch die Padding-Anweisungen berührt der Text die Ränder nicht mehr und die Überschrift hat nun oben und unten einen gesunden Abstand.

Damit können wir wieder speichern und uns folgendes Zwischenergebnis anschauen:

Bilder



 

Schritt 7: Aside und Footer - das fehlende Zünglein an der Waage

Wir sind nun ein ganzes Stück weitergekommen. Was uns noch fehlt, sind die CSS-Formatierungen für unser Aside- und Footer-Element. Diese Hürde schaffen wir auch noch!

Gehen wir nun erst mal auf das Aside-Element ein. Es soll natürlich kleiner als der Section-Bereich sein. Geben wir dem Ganzen eine Weite von 297 Pixeln (width: 297px;) und gleichzeitig auch den fehlenden rechten Rand unserer HTML5-Seite mit "border-right: solid 1px #CCC;". Auch für dieses Element verwenden wir "float: left;" und auch hier werden wir den Margin-Padding-Trick von vorhin anwenden und sorgen mit "padding-bottom: 10000px;" und "margin-bottom: -10000px;" dafür, dass unsere Linie nicht über den Content-Bereich hinausgeht und dem Footer also nicht in die Quere kommt.

Somit hätten wir schon auf die Schnelle folgenden Code für das Aside-Element:
<span>aside {

width: 297px;
border-right: solid 1px #CCC;
float: left;
padding: 15px 15px 15px 15px;
padding-bottom:10000px;
        margin-bottom:-10000px; 

}</span>


Wenn wir schon dabei sind, können wir auch der Überschrift wieder den nötigen Abstand zwischen Header bzw. Text geben. Dies tun wir mit folgendem Code:
<span>aside h2 {

padding-top: 10px;
padding-bottom: 20px;

}</span>


 
Damit wäre der Aside-Bereich geschafft und können uns zu guter Letzt dem Footer widmen.

Im Footer-Bereich soll der Float-Befehl unterbrochen werden. Dies tun wir mit "clear: both;". Unser Copyright-Text soll natürlich mittig sitzen. Entsprechend setzen wir ihn mit "text-align: center;" in die Mitte. Damit die Schrift nicht ganz so gequetscht wird, geben wir ihr den nötigen Freiraum von oben und unten mit "padding: 7px 0;". Damit sie auch gut erkennbar ist, ändern wir die Schriftfarbe auf Weiß (color: white;).

Der Hintergrund soll entsprechend im Kontrast zur weißen Schrift stehen. Daher nehmen wir für den Hintergrund im Footer ein dunkles Blau (background-color: #24577B;). Unser Footer soll aber natürlich auch abgerundete Kanten wie der Header und die Navigation bekommen. Doch diesmal sind die unteren Ecken an der Reihe. Mit "border-bottom-left-radius: 6px;" und "border-bottom-right-radius: 6px;" geben wir unseren Ecken die gewissen "Rundungen", die sie brauchen.

Damit hätten wir auch den Footer geschafft, welcher folgende Styleinformationen besitzt:
<span>footer {

clear: both;
text-align: center;
padding: 7px 0;
color: white;
background-color: #24577B;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;

}</span>


 
Unser Grundgerüst ist nun fertig! Speichern wir das Ganze und schauen uns stolz unser Werk an:

Bilder



Das sieht doch schon mal gar nicht schlecht aus. Doch wie wir sehen, ist das Design doch ein wenig klein geraten, oder? Auch dieses Problem ist einfach gelöst, denn dieses Design ist nun absichtlich so aufgebaut, weil es darauf wartet, mit Text gefüllt zu werden, um zu sehen, ob der Section- bzw. der Aside-Bereich mitzieht.

Wir nehmen also entweder den Section-Article-Bereich oder den Aside-Bereich und füllen diesen mit etwas Text. Dazu eignen sich Blindtexte am besten. Nehmen wir doch mal einen Text aus http://www.blindtextgenerator.de/ und markieren diesen, kopieren ihn und fügen ihn entweder im Article- oder Aside-Bereich ein.

 
Wenn alles gut gelaufen ist, müsste unser Endergebnis nun folgendermaßen ausschauen:

Bilder



Ich habe den Artikel-Bereich mit Text gefüllt und die Sidebar zieht mit. Wir haben es geschafft und ein Grundgerüst mit HTML5 und CSS3 aufgebaut!

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Lona
  • 20.10.2015 - 18:50

sehr gut erklärt,ich hoffe ich jkomme damit zurecht

Portrait von PrincessBubblegum
Portrait von sendi
  • 02.05.2014 - 06:33

gut erklärt, vielen Dank

Portrait von Profice
  • 22.04.2014 - 10:44

Erstmal großes Lob für dieses Tutorial. Einfach Spitze für Anfänger.

Eine Frage wegen Unternavigation...

Im Html-Code trag ich folgendes ein...


<ul>
<li><a href="index">Home</a></li>
<li><a href="Biografie">Biografie</a></li>
<li><a href="Die Band">Die Band</a></li>
<li><a href="">Galerie</a></li>
<ul>
<li><a href="">2014</a></li>
<li><a href="">2013</a></li>
</ul>
<li><a href="Termine">Termine</a></li>
<li><a href="Gästebuch">Gästebuch</a></li>
</ul>


Was muss ich jetzt noch im CSS eintragen, damit mir das Untermenü angezeigt wird und auch nur wenn ich mit der Maus drüberfahre?

Wenn z.B. die Seite Galerie aktiv ist... was muss ich in CSS eintragen, damit die Hintergrundfarbe bleibt, die erscheint, wenn ich mit der Maus drüberfahre?

Vielen Dank nochmal.

Portrait von Stavros
  • 22.04.2014 - 11:48

Hallo,

um ein Untermenü zu realisieren, gibst du im CSS-Bereich unter den Linkdefinitionen folgenden CSS-Code ein:

nav li ul {position:absolute; display:none; background:hier gewünschten Hexadezimalwert eintragen; z-index:100; top: hier mit den Werten etwas rumspielen; left:0; text-align:left;}
nav li:hover ul {display:block;}
nav li ul li {padding:0; width: 100%; white-space: nowrap;}
nav li ul li a {display:block; padding:3px 10px 3px 10px;}
nav li ul li a:hover {background:auch hier den gewünschen Hexadezimalwert eintragen; color:gewünschte Textfarbe eintragen;}

Bei Background, Color, Top und Padding am besten mit den Werten herumspielen bis es dann passt. Ich habe daher auch keine Werte da eingegeben.


Beste Grüße
Stavros

Portrait von Profice
  • 24.04.2014 - 08:32

That's it. Vielen Dank :)

Portrait von silverburst
  • 17.04.2014 - 19:18

Vielen Dank für das Tutorial. Ich denke, bei mehreren Seiten macht es dann Sinn, das CSS auszulagern, also in eine externe Datei zu packen, oder?

Portrait von Stavros
  • 17.04.2014 - 21:52

Klar, in dem Fall ist es sinnvoller. Im Falle des Tutorials habe ich die CSS-Formatierung in die HTML- Datei gepackt, damit das Ganze nachvollziehbarer ist.

Portrait von Lona
  • 15.02.2014 - 17:59

Meine Frage bezog sich auf Span in der css datei

Portrait von Stavros
  • 15.02.2014 - 20:38

Der Span-Tag hat da eigentlich nichts verloren. Ich weiß eigentlich nicht, wie er dahinkommt, aber er ist definitiv kein Teil vom CSS-Code.

Viele Grüße

Portrait von ML_Vienna
  • 11.10.2013 - 10:36

danke, kurz und verständlich erklärt!

Portrait von gul_men
  • 06.10.2013 - 11:21

danke, es ist hilfreich....

Portrait von Virtuajockey23
  • 11.07.2013 - 12:53

Super Tutorial.... Super erklärt...

Portrait von MrJimiHancock
Portrait von glowie
  • 19.06.2013 - 21:34

sehr gutes Tutorial!

Portrait von ArishaK
  • 15.06.2013 - 14:08

Ich hatte mir das Tutorial runtergeladen, weil ich wissen wollte was so viel anders an HTML5 ist (es schwärmen ja so viel darüber ;) ) So wirklich informativ, für mich, war es nicht. Aber es ist sehr gut geschrieben. Anfänger in diesem Gebiet, kann ich dieses Tutorial sehr empfehlen. Da mir der Aufbau der Seite gefällt, werd ich es dennoch mal nachbauen ;)

Portrait von Stavros
  • 15.06.2013 - 14:43

Dieses Tutorial ist auch weniger dafür gedacht, alles in HTML5 zu erklären. Dafür gibt es andere zahlreiche Tutorials. In diesem Tutorial geht es hauptsächlich darum, den grundlegenden Aufbau eines HTML5 Dokuments nachzuvollziehen und ein entsprechendes Dokument mal nachzubauen. Es soll keine komplette HTML5 Referenz ersetzen.

Portrait von Eiswind
  • 23.05.2013 - 07:03

Nett geschrieben, wusste einige kleinigkeiten noch nicht. Danke.

Portrait von vikiviki1
  • 14.05.2013 - 09:30

gut erklärtes Tutorial.
danke

Portrait von mustografie
  • 21.04.2013 - 09:30

vielen lieben dank, sehr viel neue tricks gelernt

x
×
×