HTML5 Tutorial


Jimdo kostenlose Webseite

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=“keywordscontent=“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 des Body-Bereichs (wir haben f├╝r eine bessere Verst├Ąndlichkeit die Bereiche farblich passend zum obigen Schaubild dargestellt):

<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-600×370-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>


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.

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;}

Alfahosting - Homepage-Baukasten

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