Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- fortbildungen:webdesign-lernen:html-spickzettel [30.09.2015 (09:20)] – [Aufbau eines HTML-Elements] retemirabile
+++ fortbildungen:webdesign-lernen:html-spickzettel [01.09.2025 (10:04)] (aktuell) – Externe Bearbeitung 127.0.0.1
@@ Zeile 1: / Zeile 1: @@
-====== HTML Spickzettel ======
+====== HTML Einführung und Spickzettel ======
-**HTML:** „Hypertext Markup Language”
+  * **HTML** bedeutet „Hypertext Markup Language”
-HTML ist eine Sprache, mit der man Textbausteine auszeichnet (engl.: to mark up), um ihnen verschiedene Funktionen zu geben. HTML benutzt dazu sog. „Tags“. Die Links in HTML-Dokumenten verbinden verschiedene Text zu Hypertexten. Text mit HTML-Tags heißt „Markup“.
+  * HTML ist eine Sprache, mit der man Textbausteine auszeichnet, um ihnen verschiedene Funktionen zu geben (engl.: //to mark up// = auszeichnen). Text mit HTML-Tags heißt „Markup“. HTML benutzt dazu sog. „Tags“ (engl.: //tag// = Schildchen, Etikett). Die Links in HTML-Dokumenten verbinden verschiedene Texte zu //Hypertexten//.
+  * Es gibt verschiedene HTML-Versionen. In diesem Spickzettel wird immer die derzeit aktuelle Version **HTML5** erklärt (Stand 10/2015).
+===== Erklärvideo: HTML =====
+{{youtube>oXD_TDg2tEk?640x360}}
 ===== Aufbau eines HTML-Elements =====
 [{{:fortbildungen:webdesign-lernen:tag-attribut-wert.gif?nolink|Beachte bei Attributen das Gleichheitszeichen und die geraden Anführungszeichen}}]
-  * Ein HTML-Element bestehet aus Start-Tag (engl.: //tag// = Schildchen, Anhängsel) und Schluss-Tag; einige Elemente sind eine Außname und bestehen nur aus einem Tag, z.B. ''img''. (siebe Tabelle unten).
+  * Ein HTML-Element besteht aus Start-Tag und Schluss-Tag sowie dem darin enthaltenen Text. Einige Elemente sind eine Ausnahme und bestehen nur aus einem Tag, z.B. ''img''. (siehe Tabelle unten).
-  * Tags können verschachtelt werden: {{:fortbildungen:webdesign-lernen:nested-tags.gif?nolink|}}
+  * Tags können verschachtelt werden. Dabei ist zu beachten, dass das zuletzt geöffnete Tag als Erstes wieder geschlossen werden muss, wie es im folgenden Beispiel zu sehen ist. {{:fortbildungen:webdesign-lernen:nested-tags.gif?nolink|}}
 ===== Häufig benutzte HTML-Elemente =====
+|<100% 30% >|
+^Element^Erklärung^
 |''<p></p>''|Textabsätze|
 |''<h1></h1>'' bis\\ ''<h6></h6>''|Überschriften in sechs Abstufungen, ''h1'' ist die Hauptüberschrift in einem HTML-Dokument|
-|''<strong></strong>''|Der umschlossene Text wird in der Regel fett dargestellt|
+|''<strong></strong>''|Der umschlossene Text soll //stark// hervorgehoben werden und wird in der Regel fett dargestellt|
-|''<em></em>''|Der umschlossene Text wird in der Regel kursiv dargestellt|
+|''<em></em>''|Der umschlossene Text soll hervorgehoben werden //(emphasize)// und wird in der Regel kursiv dargestellt|
-|''<ul></ul>''|Liste mit Punkten als Aufzählungszeichen|
+|''<ul></ul>''|Liste mit Punkten als Aufzählungszeichen – kann nur in Verbindung mit ''<li>''-Elementen verwendet werden (siehe Verwendungsbeispiel unten) |
-|''<ol></ol>''|Nummerierte Liste|
+|''<ol></ol>''|Nummerierte Liste – kann nur in Verbindung mit ''<li>''-Elementen verwendet werden (siehe Verwendungsbeispiel unten) |
-|''<li></li>''|Einzelnes Listenelement, siehe Verwendungsbeispiel unten|
+|''<li></li>''|Einzelnes Listenelement – kann nur in Verbindung mit dem ''<ol>''- oder ''<ul>''-Element verwendet werden (siehe Verwendungsbeispiel unten) |
-|''<a href="datei.html"></a>''|Fügt einen Link ein, das Attribut ''href'' (Hyperreference) muss vorhanden sein|
+|''<a href=%%"%%datei.html%%"%%></a>''|Fügt einen Link ein, das Attribut ''href'' //(Hyperreference)// muss vorhanden sein|
-|''<img src="bild.jpg">''|Fügt ein Bild in das HTML-Dokument ein, das Attribut ''src'' (source, Quelle) muss vorhanden sein|
+|''<img src=%%"%%bild.jpg%%"%%>''|Fügt ein Bild in das HTML-Dokument ein, das Attribut ''src'' (//source//, Quelle) muss vorhanden sein|
-|''<div></div>''|Fasst Markup zu Bereichen zusammen, wird benutzt, um Teile des Markups zusammen zu fassen|
 |''<section></section>''|Gliedert das HTML-Dokument in //inhaltliche// Abschnitte|
-|''<nav></nav>''|Fasst Navigationslinks zusammen|
+|''<article></article>''|Enthält einen thematisch zusammenhängenden Text|
+|''<aside></aside>''|Enthält Inhalte, die mit den umgebenden Inhalten in einem Zusammenhang stehen, aber nicht direkt dazu gehören, z.B. ergänzende Links zu einem Text, eine Seitenleiste mit weiterführenden Artikeln, Werbeanzeigen zum Text etc.|
+|''<header></header>''|Enthält einführende und zur Orientierung dienende Elemente für die ganze Seite oder einen Seitenabschnitt|
+|''<footer></footer>''|Enthält ergänzende Elemente, die zu einem vorangehenden Element gehören, z.B. Schlagworte, Kategorisierung, Fußnoten, Veröffentlichungsdatum etc. |
+|''%%<div></div>%%'' |Wird benutzt, um Teile des Markups zusammen zu fassen, wenn diese Teile //keinen inhaltlichen Zusammenhang// haben (z.B. zur //visuellen// Gestaltung)|
 ==== Verwendungsbeispiel für Listen ====
@@ Zeile 33: / Zeile 45: @@
   <li>Listenpunkt 2</li>
 </ul>
+<ol>
+  <li>Listenpunkt 1</li>
+  <li>Listenpunkt 2</li>
+</ol>
 </code>
 ===== Grundlegender Aufbau eines HTML-Dokuments =====
 <code html5>
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="UTF-8">
     <title>Seitentitel</title>
+    <link rel="stylesheet" href="meinestile.css">
   </head>
   <body>
-    <h1>Hauptüberschrift</h1>
+  <!-- Hier stehen weitere HTML-Elemente, die dem jeweiligen
-    <p>Textabsatz</p>
+       Inhalt entsprechen. Beispiele sind in der Abbildung
+       unten zu sehen -->
   </body>
 </html>
 </code>
+{{:fortbildungen:webdesign-lernen:html-datei-struktur.png?nolink&600|}}
   * Wichtig ist der Aufbau aus ''<head></head>'' und ''<body></body>'' sowie der Titel des Dokuments: ''<title></title>''
@@ Zeile 56: / Zeile 81: @@
 <code html5>
-<meta charset="UTF-8">
+<meta charset="UTF-8">                                  <!-- MUSS VORHANDEN SEIN, legt fest, nach welchem Standard die verwendeten Zeichen dargestellt werden sollen -->
-<meta name="description" content="Webdesign Tutorial">
-<meta name="keywords" content="HTML,CSS,Design">
+<meta name="description" content="Webdesign Tutorial">  <!-- Gibt eine Kurzbeschreibung der Inhalte, z.B. für Suchergebnisse -->
-<meta name="author" content="Andreas Kalt">
+<meta name="keywords" content="HTML,CSS,Design">        <!-- Liefert den Inhalt in Stichworten, z.B. für Suchmaschinen -->
+<meta name="author" content="Andreas Kalt">             <!-- Gibt den Autor einer Seite an -->
 </code>
+==== Kommentare ====
+Mit ''%%<!-- -->%%'' kann man im HTML Dokument Kommentare einfügen, die vom Browser nicht angezeigt werden. Das ist z.B. nützlich um anderen Bearbeitern oder sich selbst zu einem späteren Zeitpunkt zu erklären, warum man die betreffende Stelle so und nicht anders gestaltet hat.