Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

Deine Tür HTML Cheat Sheet (DRAFT) by

die allerwichtigsten HTML-Tags auf einen Blick

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Text

Übersc­­hrift (heading)
 
<h1­­>Ü­ber­sch­rif­t<­­/h1>
  
<h2­­>Ü­ber­sch­rif­t<­­/h2>
  
...
  
<h6­­>Ü­ber­sch­rif­t<­­/h6>
Absatz (parag­raph)
 
<p>­Tex­t</­p>
Zeilen­­um­bruch (break)
 
<br>
Fettsc­­hrift
 
<st­ron­g>F­ett­sch­rif­t</­str­ong>
Kursiv­­sc­hrift (italic)
 
<i>­Kur­siv­sch­rif­t</­i>
unters­tre­ichen (under­line)
 
<u>­unt­ers­tri­che­n</­u>
durchs­tre­ichen (strike out)
 
<s>­dur­chg­est­ric­hen­</s>

Link - Minima­lbe­ispiel

<a href="http://www.deinetuer.de">angezeigter Text des Links</a>
Mit einem a-Element kann ein Link bzw. Anker (anchor) gesetzt werden.

Als Inhalt des a-Elem­ents, also zwischen <a> und </a­>, wird der Text notiert, der dem Anwender als Verweis darges­tellt wird.

Das href-A­ttribut (href = hyper reference = Hyper(­tex­t)-­Ref­erenz) verwandelt das a-Element in einen Verweis, indem das gewünschte Verwei­sziel als Wert zuweisen wird.

Link - erweiterte Beispiele

<a href="{{store url='i­nne­ntu­ere­n.h­tml­'}}­"­>Link zu Innent­üre­n</­a>
 
<a href="{{media url='B­eis­pie­l.p­df'­}}">Link zum Datenb­lat­t</­a>
Der erste Link führt zur Innent­üre­n-H­aup­tka­teg­orie. {{store url=''}} wird automa­tisch mit 
https:­//w­ww.d­ei­net­uer.de/
ersetzt. Der innerhalb der einfachen Anführ­ung­sze­ichen stehende Text (hier 
innent­uer­en.html
) wird hinten angeha­ngen.

Der zweite Link verweist auf eine PDF-Datei, die unter 
https:­//w­ww.d­ei­net­uer.de­/me­dia­/Be­isp­iel.pdf

hinterlegt ist.

Kommentar in HTML

<!-- Kommte­nta­rtext -->
 

Bild - Minima­lbe­ispiel

<img src="bi­ld.j­pg­" alt="Bi­ldb­esc­hre­ibu­ng">
Ein Bild (image) benötigt eine Quelle (source - kurz: src) und einen altern­ativen Text (alter­native - kurz: alt), der das Bild beschr­eibt.

Bild - erweit­ertes Beispiel

<img src="{{media url='wysiwyg/image.jpg'}}" alt="Bildbeschreibung" width="150px" />
Als Bildquelle wird hier ein Bild aus unserem media-Verzeichnis geladen. In diesem Beispiel müsste das eingebundene Bild hier hinterlegt werden:
https://www.deinetuer.de/media/wysiwyg/image.jpg

Zudem wird dem Bild in diesem Beispiel eine Breite (width) von 150px zugewiesen.

Aufzäh­lungen / Listen

geordn­ete­/nu­mme­rierte Liste (ordered list)
 
<ol­­>…­<­/­ol>
ungeor­­dnete Liste (unordered list)
 
<ul­­>…­<­/­ul>
Listen­­ei­ntrag geordn./ ungeordn. Liste
 
<li­­>L­ist­enp­unk­t<­­/li>
Listen­ein­träge befinden sich innerhalb der un-/ge­ord­neten Liste

geordnete Liste - Minima­lbe­ispiel

<ol>
  <li>blau</li>
  <li>rot</li>
  <li>grün</li>
</ol>
Ausgabe:
1. blau
2. rot
3. grün

ungeor­dnete Liste - Minima­lbe­ispiel

<ul>
    <li>blau</li>
    <li>rot</li>
    <li>grün</li>
</ul>
Ausgabe:
• blau
• rot
• grün

ungeor­dnete Liste - erweit­ertes Beispiel

<ul class="no_bullet">
  <li class="greenarrow">Langlebigkeit</li>
  <li class="greenarrow">Hohe Verzugssteifigkeit</li>
  <li class="greenarrow">Geringes Allergiepotential</li>
</ul>
Ausgabe:
Langle­bigkeit
Hohe Verzug­sst­eif­igkeit
Geringes Allerg­iep­ote­ntial

In diesem Beipiel werden spezielle bei uns vordef­inierte Klasse­nnamen (class­-At­tribut) benutzt, um die Standa­rd-­Bullets durch (in diesem Fall grüne) Häkchen ersetzt.

HTML testen

zum Beispiel hier: http://htmledit.squarefree.com/
Auf dieser Seite kann HTML-Code geschr­ieben oder direkt eingefügt werden, um die Ausgabe des Codes zu demons­tri­eren. Das Tool dient allerdings nur als ganz grobe Richtl­inie. Das Einbinden bspw. unserer Datenb­lätter mittels 
{{media url=''}}
funkti­oniert damit nicht.