HTML5 Tutorial



In unserem HTML5 Tutorial lernen Sie HTML5 Schritt f√ľr Schritt kennen und erstellen sich dabei eine eigene Webseite. Und das beste: die erstellte Webseite ist ergonomisch von der Bedienung, passt sich an das Ausgabeger√§t an (responsive, d.h. gute Darstellung auf Smartphone, Tablet und Desktop) und bietet eine gute Optik beim Ausdruck.

In unserem HTML5-Crashkurs wollen wir Ihnen die wichtigsten Dinge rund um die Erstellung einer responsiven Webseite kurz und knapp erklären.

Hier der Quellcode einer ganz einfachen Webseite:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Meine erste Homepage</title>
</head>
<body>
Meine erste Homepage
</body>
</html>

Woraus besteht diese Webseite? Nachfolgend erklären wir die einzelnen Elemente:

< und > kennzeichnen sogenannte Tags. Tags sind Steuerbefehle, die den Browser anweisen, was passieren und angezeigt werden soll. Beginn und Ende werden wie folgt dargestellt: <html> ist der Beginn eines Steuerbefehles und </html> ist das Ende eines Steuerbefehles.

Bedeutung der Elemente in der verwendeten Reihenfolge:

  • <!DOCTYPE html> – Dokumenttyp-Deklaration
  • <html> & </html> – Beginn und Ende der HTML-Datei.
  • <html lang=“de„> – mit der Erg√§nzung des Attributs Language lang und dem Wert de wird mitgeteilt, dass die Webseite in der Sprache Deutsch verfasst ist.
  • <head> & </head> – Beginn und Ende des Kopfteils (Head-Bereich)
  • <meta charset=“utf-8„> – verwendeter Zeichensatz – in diesem Fall 8-Bit Universal Character Set (weltweiter Standard-Zeichensatz, wird laut Wikipedia von √ľber 80% der Webseiten weltweit verwandt)
  • <title>Meine erste Homepage</title> – der Title der Webseite – hier „Meine erste Homepage“
  • <body> & </body> – Beginn und Ende des K√∂rpers (Body) – alles was zwischen den beiden Body-Tags steht kann von einem Browser auf dem Bildschirm ausgegeben werden. In diesem Fall nur die 3 Worte Meine erste Homepage

Die einzelnen Bereiche f√ľllen wir jetzt mit Inhalten.

Wir arbeiten uns von oben nach unten durch den Quelltext Bereich f√ľr Bereich durch.

Erweiterung des Kopfbereichs

Der Kopfbereich wird nun um einige n√ľtzliche Angaben erweitert:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Meine erste Homepage</title>
<meta name="description" content="Dies ist eine Webseitenvorlage basierend auf HTML5">
<meta name="keywords" content="Meine, erste, HTML5, Homepage">
<meta name="robots" content="index, follow">
<meta name="author" content="Hans Mustermann, Musterstraße 1, 00000 Musterstadt">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" media="(max-width: 640px)" href="html5_stylesheet_mobile.css">
<link rel="stylesheet" media="(min-width: 640px)" href="html5_stylesheet.css">
<link rel="stylesheet" media="print" href="print.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
Meine erste Homepage
</body>
</html>

Hier die Erklärung, was die erweiterten Head-Angaben bedeuten:

  • <meta name=“description content=“Dies ist eine Webseitenvorlage basierend auf HTML5„>– Eine Inhaltsbeschreibung passend zur Webseite
  • <meta name=“keywords“ content=“Meine, erste, HTML5, Homepage„>– Schl√ľsselw√∂rter passend zur Webseite
  • <meta name=“robots content=“index, follow„>– ein Anweisung an Suchmaschinen (Robots) – in diesem Fall sollen die Suchmaschinen den Links auf der Seite folgen
  • <meta name=“author content=“Hans Mustermann, Musterstra√üe 1, 00000 Musterstadt„>– Name des Autors
  • <link rel=“shortcut icon href=“favicon.ico„>– Link zu einem Favicon
  • <link rel=“stylesheet media=“(max-width: 640px) href=“html5_stylesheet_mobile.css„>– das Stylesheet f√ľr die Ansicht bei maximal 640 Pixel Bildschirmbreite (also kleine Bildschirme wie auf einem Smartphone zu finden)
  • <link rel=“stylesheet media=“(min-width: 640px) href=“html5_stylesheet.css„>– das Stylesheet f√ľr die Ansicht bei mindestens 640 Pixel Bildschirmbreite (Tablets, PCs und andere Ger√§te mit gr√∂√üeren Bildschirmen).
  • <link rel=“stylesheet media=“print href=“print.css„> – das Stylesheet f√ľr die Druckausgabe
  • <meta name=“viewport content=“width=device-width, initial-scale=1.0„>– diese Anweisung ist wichtig, damit die Webseite auf Smartphones exakt so breit dargestellt werden, wie die Bildschirmbreite des jeweiligen Ger√§tes ist. Damit werden l√§stige horizontale Scrollbalken auf dem Smartphone verhindert.

Der Body-Bereich wird mit Inhalten und Struktur gef√ľllt

Der sichtbare Inhalt wird zwischen dem öffnenden und dem schließenden Body-Tag dargestellt.

Wir bauen nun Bereiche in den Body-Bereich ein, die der Webseite eine √ľbersichtliche Struktur nach folgendem Schaubild geben:

Webseitenstruktur

Der header steht √ľber dem Inhalt und ist z.B. ideal f√ľr das Logo der Webseite. Idealerweise ist der header auf allen Webseiten identisch. Das gleiche gilt f√ľr den footer, der als Fu√übereich unter dem Inhalt steht.

Wir brauchen nun den hilfscontainer um darin die Navigation (nav) und den Artikel (article) als ein b√ľndiges Element zwischen header und footer zu platzieren. Die Navigation (nav) geh√∂rt dabei in das aside-Element, das neben dem Hauptinhalt zu platzieren ist. Der Hauptinhalt wird durch den Tag main dargestellt – im Hauptinhalt befindet sich der Artikel (article) und somit der relevante Inhalt der Seite.

Ganz schön kompliziert, oder? Hier der dazu passende Quelltext:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Meine erste Homepage</title>
<meta name="description" content="Dies ist eine Webseitenvorlage basierend auf HTML5">
<meta name="keywords" content="Meine, erste, HTML5, Homepage">
<meta name="robots" content="index, follow">
<meta name="author" content="Hans Mustermann, Musterstraße 1, 00000 Musterstadt">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" media="(max-width: 640px)" href="html5_stylesheet_mobile.css">
<link rel="stylesheet" media="(min-width: 640px)" href="html5_stylesheet.css">
<link rel="stylesheet" media="print" href="print.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<header>Meine erste HTML5-Homepage</header>
<div id="hilfscontainer">
<aside>
<nav>
<ul>
<li><a href="index.php">Startseite</a></li>
<li><a href="rubrik1.php">Rubrik 1</a></li>
<li><a href="rubrik2.php">Rubrik 2</a></li>
<li><a href="rubrik3.php">Rubrik 3</a></li>
<li><a href="rubrik4.php">Rubrik 4</a></li>
<li><a href="impressum_und_kontakt.php">Impressum und Kontakt</a></li>
</ul>
</nav>
</aside>
<main>
<article>
<h1>√úberschrift Startseite</h1>
<figure><img src="dummy-600x370-Rope.jpg" width="600" height="370" alt="Dummy-Image">
<figcaption>Hier steht eine Bildunterschrift</figcaption></figure>
<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, eines gro√üen Sprachozeans. 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. Nicht einmal von der allm√§chtigen Interpunktion werden die Blindtexte beherrscht ‚Äď ein geradezu unorthographisches Leben. Eines Tages aber beschlo√ü eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der gro√üe Oxmox riet ihr davon ab, da es dort wimmele von b√∂sen Kommata, wilden Fragezeichen und hinterh√§ltigen Semikoli, doch das Blindtextchen lie√ü sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den G√ľrtel und machte sich auf den Weg. Als es die ersten H√ľgel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zur√ľck auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Stra√üe, der Zeilengasse.</p>
<p>Wehm√ľtig lief ihm eine rhetorische Frage √ľber die Wange, dann setzte es seinen Weg fort. 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. 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. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch. 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, eines gro√üen Sprachozeans. 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>
<p>Nicht einmal von der allm√§chtigen Interpunktion werden die Blindtexte beherrscht ‚Äď ein geradezu unorthographisches Leben. Eines Tages aber beschlo√ü eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der gro√üe Oxmox riet ihr davon ab, da es dort wimmele von b√∂sen Kommata, wilden Fragezeichen und hinterh√§ltigen Semikoli, doch das Blindtextchen lie√ü sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den G√ľrtel und machte sich auf den Weg. Als es die ersten H√ľgel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zur√ľck auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Stra√üe, der Zeilengasse. Wehm√ľtig lief ihm eine rhetorische Frage √ľber die Wange, dann setzte es seinen Weg fort. 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. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch. 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, eines gro√üen Sprachozeans. 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. Nicht einmal von der allm√§chtigen Interpunktion werden die Blindtexte beherrscht ‚Äď ein geradezu unorthographisches Leben. Eines Tages aber beschlo√ü eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der gro√üe Oxmox riet ihr davon ab, da es dort wimmele von b√∂sen Kommata, wilden Fragezeichen und hinterh√§ltigen Semikoli, doch das Blindtextchen lie√ü sich nicht beirren.</p>
<p>Es packte seine sieben Versalien, schob sich sein Initial in den G√ľrtel und machte sich auf den Weg. Als es die ersten H√ľgel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zur√ľck auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Stra√üe, der Zeilengasse. Wehm√ľtig lief ihm eine rhetorische Frage √ľber die Wange, dann setzte es seinen Weg fort. 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. 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. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch. 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, eines gro√üen Sprachozeans. 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. Nicht einmal von der allm√§chtigen Interpunktion werden die Blindtexte beherrscht ‚Äď ein geradezu unorthographisches Leben. Eines Tages aber beschlo√ü eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der gro√üe Oxmox riet ihr davon ab, da es dort wimmele von b√∂sen Kommata, wilden Fragezeichen und hinterh√§ltigen Semikoli, doch das Blindtextchen lie√ü sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den G√ľrtel und machte sich auf den Weg. Als es die ersten H√ľgel des Kursivgebirges erklommen hatte, warf es einen</p>
</article>
</main>
</div>
<footer>&copy; Max Mustermann</footer>
</body>

</html>

Hier die Erklärung der neuen Elemente im Body-Bereich:

  • <header>Meine erste HTML5-Homepage</header>¬†– der Tag¬†<header>¬†√∂ffnet den Kopf des sichtbaren Inhalts im Body-Bereich. Im Header steht der Text¬†Meine erste HTML5-Homepage. Anschlie√üend wird der header mit dem Tag¬†</header>¬†wieder geschlossen.
  • <div¬†id=“hilfscontainer“>¬†– der Hilfscontainer hat die Aufgabe, den zentralen Inhalt auf eine Breite von 1.024 Pixel zu begrenzen. Damit ist auf sehr gro√üen Bildschirmen die Webseite mittig positioniert und gut lesbar. Dieser Hilfscontainer wird mit¬†</div>¬†√ľber dem Footer wieder geschlossen (gelb gef√§rbter Bereich). Im Hilfscontainer sind die 2 Bereiche¬†<aside>¬†und¬†<main>¬†enthalten.
  • Der Bereich¬†<aside>¬†enth√§lt die Navigation¬†<nav>
  • Die Navigation enth√§lt eine Liste¬†<ul>, die einzelnen Listenpunkte¬†<li>¬†mit den Links zu den einzelnen Rubriken z.B. zur Rubrik 1:¬†<a¬†href=“rubrik1.php“>Rubrik 1</a>
  • Der Bereich¬†<main>¬†enth√§lt den Hauptinhalt (Artikel)¬†<article>¬†– wie gewohnt wird der Artikel mit¬†</article>¬†und der Bereich¬†main¬†mit¬†</main>¬†geschlossen.
  • <h1>√úberschrift Startseite</h1>¬†– der Tag¬†<h1>¬†steht f√ľr eine √úberschrift der 1. Kategorie. Suchmaschinen werten eine √úberschrift der 1. Kategorie sehr hoch – von daher sollte diese nur 1x pro HTML-Seite vorkommen und m√∂glichst aussagekr√§ftig sein sowie zum Inhalt passen.
  • <figure><img¬†src=“dummy-600×370-Rope.jpg“¬†width=“600″¬†height=“370″¬†alt=“Dummy-Image“><figcaption>Hier steht eine Bildunterschrift</figcaption></figure>¬†– mit dem Tag¬†<figure>¬†werden u.a. Fotos ausgezeichet. Der Tag¬†<figcaption>¬†steht in HTML 5f√ľr eine Bildunterschrift. Mit¬†img¬†wird ein Bild eingebunden,¬†src=“dummy-600×370-Rope.jpg“¬†zeigt den Speicherort des Bildes und den Dateinamen,¬†width=“600″¬†height=“370″¬†stehen f√ľr die Abmessungen des Bildes und¬†alt=“Dummy-Image“¬†steht f√ľr den Alternativtext des Bildes.
  • <p>¬†– der Tag¬†<p>¬†√∂ffnet einen Absatz und enth√§lt den eigentlichen Inhaltstext. Wie gewohnt wird der Absatz mit¬†</p>¬†geschlossen.
  • <footer>&copy; Max Mustermann</footer>¬†– der Tag¬†<footer>¬†√∂ffnet den Fuss des sichtbaren Inhalts im Body-Bereich. Im Fuss steht der Text¬†¬© Max Mustermann. Anschlie√üend wird der header mit dem Tag¬†</footer>¬†wieder geschlossen.

Die Links in der Navigation (z.B. rubrik1.php) sind beispielhaft f√ľr weitere Seiten der Homepage zu sehen.

Hier noch die Inhalte der Stylesheet-Dateien:

Datei: html5_stylesheet.css

@charset "utf-8";
/* CSS Document */

body {background-color:#ffffff;
	color:#000000;
	font-family:Verdana, Geneva, sans-serif;
	margin:0px;}
	
body a {color:#0066ff;}

header {background-color:#63adff;
	color: #ffffff;
	font-size: xx-large;
	font-style:italic;
	font-weight:bolder;
	padding: 10px;
	text-align:center;}
	
#hilfscontainer {margin:0px auto;
	 max-width:1024px;}

aside {float:left;
	text-align:center;
	width:25%;}

nav {margin:10px;
	padding-bottom:20px;
	padding-left:5px;
	padding-right:5px;
	padding-top:10px;
	text-align:center;}

main {background-color:#ffffff;
	color: #000000;
	float:left;
	width:75%;}
	
main h1 {font-size: xx-large;
 	margin-bottom: 10px;
	margin-top: 0px;}		

article {border: 1px solid grey;
	border-radius:10px;
	margin:20px;
	padding-bottom:10px;
	padding-left:20px;
	padding-right:20px;
	padding-top:10px;}

footer {background-color:#63adff;
	clear:left;
	color:#ffffff;
	font-size:large;
	font-style:italic;
	font-weight:bolder;
	padding-bottom:10px;
	padding-top:10px;
	text-align:center;
	width: 100%;}

img {max-width:100%; height:auto; }

ul {margin:0; 
    padding:0;
    width:100%;
    list-style-type:none;
	font-size:large;
}

ul li a {text-decoration:none;
    color:#ffffff; 
    padding:10.5px 11px;
	margin-bottom:10px;
    background-color:#63adff;
    display:block;
	border-radius:10px;
}

ul li a:visited {color:#ffffff;}
 
ul li a:hover, ul li .current {color:black;
    background-color:yellow;}
	

Datei html5_stylesheet_mobile.css

@charset "utf-8";
/* CSS Document */

body {background-color:#ffffff;
	color:#000000;
	font-family:Verdana, Geneva, sans-serif;
	margin:0px;}
	
body a {color:#0066ff;}

header {background-color:#63adff;
	color: #ffffff;
	font-size: xx-large;
	font-style:italic;
	font-weight:bolder;
	padding: 10px;
	text-align:center;}
	
#hilfscontainer{width: 100%;}

aside {text-align:center;
	width:100%;}

nav {margin:10px;
	padding-bottom:20px;
	padding-left:5px;
	padding-right:5px;
	padding-top:10px;
	text-align:center;}

main {background-color:#ffffff;
	color: #000000;
	width:100%;}
	
main h1 {font-size: xx-large;
 	margin-bottom: 10px;
	margin-top: 0px;}		

article {border: 1px solid grey;
	border-radius:10px;
	margin:20px;
	padding-bottom:10px;
	padding-left:20px;
	padding-right:20px;
	padding-top:10px;}

footer {background-color:#63adff;
	color:#ffffff;
	font-size:large;
	font-style:italic;
	font-weight:bolder;
	padding-bottom:10px;
	padding-top:10px;
	text-align:center;
	width: 100%;}

img {max-width:100%; height:auto; }

ul {margin:0; 
    padding:0;
    width:100%;
    list-style-type:none;
	font-size:large;
}

ul li a {
    text-decoration:none;
    color:white; 
    padding:10.5px 11px;
	margin-bottom:10px;
    background-color:#63adff;
    display:block;
	border-radius:10px;
}
 
ul li a:visited {color: white;}
 
ul li a:hover, ul li .current {color: black;
    background-color: yellow;}
	

Datei print.css

@charset "utf-8";
/* CSS Document */

body {background-color:#ffffff;
	color:#000000;
	font-family:Verdana, Geneva, sans-serif;
	}
	
body a {color:#000000;}

header {color:#000000;}
	
#hilfscontainer {width: 100%;}

aside {display:none;}

nav {display:none;}

main {background-color:#ffffff;
	color: #000000;
	width:100%;}
	
main h1 {font-size: xx-large;
 	margin-bottom: 10px;
	margin-top: 0px;}		

article {margin:20px;
	padding-bottom:10px;
	padding-left:20px;
	padding-right:20px;
	padding-top:10px;
	border:0px;}

footer {display:none;}

img {max-width:100%; height:auto;}

Fehler melden Sie haben einen Fehler auf meine-erste-homepage.com gefunden? Informieren Sie uns, damit wir den Fehler beheben können!

Neue Seite melden Sie haben ein neues Webmastertool f√ľr uns? Hier k√∂nnen Sie die f√ľr Webmaster n√ľtzliche Webseite bei uns anmelden!
Erstellt mit ❤ Liebe und WordPress