Benutzer-Werkzeuge

Webseiten-Werkzeuge


fortbildungen:webdesign-lernen:html-spickzettel

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
fortbildungen:webdesign-lernen:html-spickzettel [18.11.2015 (11:41)] – [Grundlegender Aufbau eines HTML-Dokuments] retemirabilefortbildungen:webdesign-lernen:html-spickzettel [21.07.2021 (09:52)] (aktuell) – [Verwendungsbeispiel für Listen] retemirabile
Zeile 1: Zeile 1:
-====== HTML Spickzettel ======+====== HTML Einführung und Spickzettel ======
  
   * **HTML** bedeutet „Hypertext Markup Language”   * **HTML** bedeutet „Hypertext Markup Language”
Zeile 6: Zeile 6:
  
   * Es gibt verschiedene HTML-Versionen. In diesem Spickzettel wird immer die derzeit aktuelle Version **HTML5** erklärt (Stand 10/2015).    * 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 ===== ===== Aufbau eines HTML-Elements =====
  
 [{{:fortbildungen:webdesign-lernen:tag-attribut-wert.gif?nolink|Beachte bei Attributen das Gleichheitszeichen und die geraden Anführungszeichen}}] [{{: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''. (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. 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|}}   * 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|}}
  
Zeile 21: Zeile 26:
 |''<strong></strong>''|Der umschlossene Text soll //stark// hervorgehoben werden und 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 soll hervorgehoben werden //(emphasize)// und 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|
Zeile 40: Zeile 45:
   <li>Listenpunkt 2</li>   <li>Listenpunkt 2</li>
 </ul> </ul>
 +
 +
 +<ol>
 +  <li>Listenpunkt 1</li>
 +  <li>Listenpunkt 2</li>
 +</ol>
 </code> </code>
  
fortbildungen/webdesign-lernen/html-spickzettel.1447843290.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki