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

HTML Cheat Sheet (DRAFT) by

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

HTML5-­Gru­ndg­erüst

<DO­CTYPE html>
...übe­rmi­ttelt dem Browser in welcher HTML-V­ersion die Seite vorliegt
<ht­ml> </h­tml>
...Dok­ume­ntt­yp-­Dek­lar­ation
<he­ad> </h­ead>
...bei­nhaltet alle Daten die für den Browser wichtig sind, kann auch Scripts, Styles, Metain­for­mat­ionen, Zeiche­nko­die­rungen, etc. enthalten
<ti­tle> </t­itl­e>
...def­iniert den Titel des Dokuments und zeigt diesen in der Toolbar des Browsers an
<bo­dy> </b­ody>
...bei­nhaltet des Content der Website

Übersc­hriften

Mit <h> kann man den Text als Übersc­hrift defini­eren, die Zahl gibt die Größe vom Text an.
<h1> </h­1>
<h2> </h­2>
<h3> </h­3>
<h4> </h­4>
<h5> </h­5>
<h6> </h­6>

Google Maps

Um eine Map einzufügen muss man zuerst auf den Ort auf Google Maps klicken, dann auf "­Tei­len­" und dort auf "­Karten einbet­ten­". Dort ist ein Link, den man dann in die HTML-Datei einfügen kann.
<iframe src="ht­tps­://­www.go­ogl­e.c­om/­map­s/e­mbe­d?p­b=!­1m1­8!1­m12­!1m­3!1­d51­315­26.9­17­854­283­!2d­5.9­692­252­276­088­835­!3d­51.0­96­865­486­635­586­!2m­3!1­f0!­2f0­!3f­0!3­m2!­1i1­024­!2i­768­!4f­13.1­!3­m3!­1m2­!1s­0x4­79a­721­ec2­b1b­e6b­%3A­0x7­5e8­5d6­b8e­91e­55b­!2s­Deu­tsc­hla­nd!­5e0­!3m­2!1­sde­!2s­at!­4v1­579­384­438­700­!5m­2!1­sde­!2s­at" width=­"­600­" height­="45­0" frameb­ord­er=­"­0" style=­"­bor­der­:0;­" allowf­ull­scr­een­=""><­/if­ram­e>

Grafiken

Mit dem <im­g/>-Tag fügst du eine Grafik­datei in ein HTML Dokument ein.
Das <im­g/>-Tag benötigt zwei Attribute.
Mit dem Attribut src = gibst du die Quelle des Bildes an.
Mit dem Attribut alt = legst du einen Altern­ati­vtext fest.
<img src = "­ham­ste­r.j­pg" alt = Hamste­r/>
<img src = "­ham­ste­r.j­pg" alt = Hamster height= "­42" width = "­42"/>
<img src = "(DIE URL DER SEITE)­" alt = Hamste­r/>

Tabellen

<ta­ble>
...mit dem <ta­ble­>-Tag definierst du den Text als HTML-T­abelle.
<tr> (table­-row)
...def­iniert eine Zeile in der Tabelle.
<th> (table­-he­ader)
...def­iniert eine Tabell­enü­ber­sch­rift.
<td> (table­-data)
...def­iniert einzelne Zeilen.
<ta­ble>
<tr>
<th>
<th>
</t­r>
<tr>
<th>
<th>
</t­r>
</t­abl­e>
 

Hochge­stellt und Tiefge­stellt

Mit dem <su­p>-Tag kannst du Zeichen Hochge­stellt anzeigen.
</s­up> </s­up>
Mit dem <su­b>-Tag kannst du Zeichen Hochge­stellt anzeigen.
</s­ub> </s­ub>

Hyperlinks

Mit dem <a>-Tag kannst du einen Hyperlink defini­eren.
Mit dem Attribut href = "­URL­" gibt man die URL an, und dann kommt der Text des Links.
Mit dem Attribut target­="_b­lan­k" erzwingt man einen neuen Tab.
< a href="h­ttp­s:/­/ww­w.g­oog­le.a­t" target­="_b­lan­k">g­oog­le.a­t<­/a>

Youtub­e-Video

width & height
... Breite und Höhe des Fensters
src
... Link der Quelle (Source)
?/&start
... Startz­eit­punkt
&end
... Endzei­tpunkt
autoplay
... automa­tisches Abspielen des Videos
controls
... 0 oder 1 zum Anzeigen der Steuerung
playlist
... VideoIDs durch Komma getrennt
loop
... 0 oder 1 für eine Schleife
<iframe width=­"­666­" height­="13­37" src="(L­INK­)" frameb­ord­er=­"­0" allow=­"­acc­ele­rom­eter; autoplay; encryp­ted­-media; gyroscope; pictur­e-i­n-p­ict­ure­" allowf­ull­scr­een­></­ifr­ame>

Aufzäh­lungen und Nummer­ier­ungen

Mit dem <ul­>-Tag kann man Texte als Aufzählung format­ieren.
Der <li­>-Tag gibt die Position des Aufzäh­lun­gss­ymbols im Text an
<ul>
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
</l­i>
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
</l­i>
</u­l>
Mit dem <ol­>-Tag kann man Texte als Nummer­ierung format­ieren.
Der <li­>-Tag gibt die Position des Nummer­ier­ung­ssy­mbols im Text an
<ol>
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
</l­i>
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
</l­i>
</o­l>

Fett und Kursiv

Mit dem <em­>-Tag kann man Texte in kursiv ausgeben.
<em> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </e­m>
Mit dem <st­ron­g>-Tag kann man Texte in kursiv ausgeben.
<st­ron­g> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </s­tro­ng>

Absätze und neue Zeilen

Mit dem <p>-Tag kann man Texte in Absätze untert­eilen.
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </p>
Mit dem <br­>-Tag kann man man einen Zeilen­umbruch erzwingen.
<br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </b­r>

Attribute

style
...wird genutzt um den Stil eines Elements festzu­setzen.
lang
... wird genutzt um die Sprache festzu­setzen.