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 [12.11.2015 (16:01)] – [HTML Spickzettel] 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 19: Zeile 24:
 |''<p></p>''|Textabsätze| |''<p></p>''|Textabsätze|
 |''<h1></h1>'' bis\\ ''<h6></h6>''|Überschriften in sechs Abstufungen, ''h1'' ist die Hauptüberschrift in einem HTML-Dokument| |''<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|
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>
  
 ===== Grundlegender Aufbau eines HTML-Dokuments ===== ===== Grundlegender Aufbau eines HTML-Dokuments =====
 <code html5> <code html5>
-<!DOCTYPE html>+<!doctype html>
 <html> <html>
   <head>   <head>
     <meta charset="UTF-8">     <meta charset="UTF-8">
     <title>Seitentitel</title>     <title>Seitentitel</title>
 +    <link rel="stylesheet" href="meinestile.css">
   </head>   </head>
   <body>   <body>
Zeile 76: Zeile 88:
 </code> </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. +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. 
fortbildungen/webdesign-lernen/html-spickzettel.1447340491.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki