Tutorials HTML5

Alle Tutorial können zur privaten Nutzung kopiert bzw. benutzt werden. Bei kommerzieller Nutzung MUSS ein Hinweis zu kanedesign.de vermerkt werden!

Was ist HTML5 - Hypertext Markup Language

HTML5 ist die fünfte Fassung der Hypertext Markup Language (engl. für Hypertext-Auszeichnungssprache), einer Computersprache zur Auszeichnung und Vernetzung von Texten und anderen Inhalten elektronischer Dokumente, vorwiegend im World Wide Web.Das World Wide Web Consortium (W3C) hat am 28. Oktober 2014 die fertige HTML5-Spezifikation („W3C Recommendation“) vorgelegt. HTML5 wird damit als Nachfolger von HTML4 die Kernsprache („core language“) des Webs. Sie ersetzt die Standards HTML 4.01, XHTML 1.0 und DOM HTML Level 2. Sie bietet neue Funktionen wie Video, Audio, lokalen Speicher und dynamische 2D- und 3D-Grafiken, die von HTML4 nicht direkt unterstützt wurden und sich ohne HTML5 nur mit zusätzlichen Plugins (z. B. Adobe Flash) umsetzen ließen. Zukunftsweisend sind weiterhin neue Elemente, die eine verbesserte semantische Struktur ermöglichen.

Quelle: wikipedia.org

Markup Validation Service

Um zu Prüfen, ob der Code fehlerfrei läuft, kann man ihn über einen Service Prüfen lassen. Hierfür den kompletten HTML Code kopieren und auf folgender Seite in das Feld einfügen

CSS Validator: Markup Validation Service

22.01.2017 // Zurück Button erstellennext

Oft will man einfach eine Seite zurück. Wie man einen solchen Button erstellt, das zeige ich hier.
Folgender Quelltext wird an die Stelle geschrieben, an der sich der Button befinden soll:

<input type="button" value="zurück" onClick="history.go(-1);return true;">

Wie man diesen Button in CSS noch verschönern kann, zeige ich in einem meiner anderen Tutorials.

21.01.2017 // Quellcode auf HTML Seite darstellennext

Um Quellcode in einer HTML Seite darzustellen, muss man auf ein paar wenige Dinge achten.
Zunächst müssen im Quellcode alle HTML spezifischen Zeichen durch Entities ersetzt werden.

das Zeichen < durch die Zeichenfolge &lt;,
das Zeichen > durch die Zeichenfolge &gt;,
das Zeichen & durch die Zeichenfolge &amp;,
das Zeichen " durch die Zeichenfolge &quot;.

Den Code selbst schreibt man dann in <code>.

Hier ein Besipiel:

<code>
<h1>Beispiel</h1>
</code>

20.01.2017 // HTML Grundgerüstend

Jede HTML Seite besteht aus einem Grundgerüst. Die hier dargestellte Variante ist etwas umfassender, denn weniger ist normalerweise zu wenig!
Der Aufbau ist jedoch immer gleich. Begonnen wird mit Öffnen des HTML Tags (<html>) und dem Bekanntgeben des Dokumententyps, dann die Sprache, gefolgt vom Öffnen des Header Tags (<head>). Nun folgt die Textdarstellung, die Metatag Informationen, der Seitentitel und das Einbinden der CSS und JavaScript Datei. Jetzt wird der Header geschlossen (</head>)
Der Body wird nun geöffnet (<body>) um die Inhalte der Website darzustellen. Am Ende wird der Body (</body>) und der komplette HTML Tag geschlossen (</html>).

// Dokumententyp
<!doctype html>
// Sprache der Website
<html lang="de">
<head>
// Textdarstellung
<meta charset="utf-8">
// Meta Informationen
// ViewPort
<meta name="viewport" content="width=device-width, initial-scale=1">
// Seiteninformationen
<meta name="description" content="Ihr Slogan">
<meta name="keywords" content="Ihre Schlagwörter zur Website">
<meta name="robots" content="noindex,nofollow">
<meta name="author" content="Name des Authors">
<meta name="date" content="Letzte Aktualisierung der HTML Seite">
// Seitentitel
<title>Ihr Website Titel</title>
// Hier wird die CSS Datei eingebunden
<link rel="stylesheet" type="text/css" href="Ihr Dateiname.css" />
// Hier wird die JavaScript Datei eingebunden
<script type="text/javascript" src="Ihr Dateiname.js"></script>
// Ältere Browser die HTML5 Befehle wie footer etc. beibringen über ein externes Script
<!--[if IE]>
<script scr="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
// In diesem Bereich wird der Inhalt der Website dargestellt, also zwichen <body>und</body>
// Hier können mehrer Bereiche Plaz finden wie: header, nav, article und footer
</body>
</html>

Natürlich kann ein Grundgerüst noch bedeutend umfassender ausgearbeitet werden, aber das ist je nach Anwendung und Nutzung anzupassen.