====== HTML Einführung und Spickzettel ====== * **HTML** bedeutet „Hypertext Markup Language” * 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 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. 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^ |''
''|Textabsätze| |'''' bis\\ ''''|Überschriften in sechs Abstufungen, ''h1'' ist die Hauptüberschrift in einem HTML-Dokument| |''''|Der umschlossene Text soll //stark// hervorgehoben werden und wird in der Regel fett dargestellt| |''''|Der umschlossene Text soll hervorgehoben werden //(emphasize)// und wird in der Regel kursiv dargestellt| |''
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 1
- Listenpunkt 2
===== Grundlegender Aufbau eines HTML-Dokuments =====
Seitentitel
{{:fortbildungen:webdesign-lernen:html-datei-struktur.png?nolink&600|}}
* Wichtig ist der Aufbau aus '''' und '''' sowie der Titel des Dokuments: ''
==== 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.