HTML
| HTML-Befehle |
Beschreibung |
|---|---|
| <!DOCTYPE html> | HTML5-Doctype, erste Zeile der HTML-Datei |
| <html lang="de"> | Umschließt den kompletten Inhalt und es wird im Inhalt als Sprache Deutsch verwendet |
| <head> | Head-Bereich, der Metainformationen über die Webseite enthält (werden nicht im Browserfenster angezeigt) |
| <meta charset="UTF-8" /> | Verwendete Codierung - mit UTF-8 können Sonderzeichen direkt genutzt werden (im Deutschen z.B. Umlaute öäü) |
| <title>HTML5-Grundgerüst</title> | Wichtig! Titel der Seite - hat mehrere wichtige Funktionen:
(engl. title=Titel) |
| </head> | |
| <body> | Umschließt den Inhalt, der im Browserfenster angezeigt wird |
| INHALT | Hier kommen nun der Inhalt (und alle weiteren HTML-Befehle, die den Inhalt strukturieren) |
| </body> | |
| </html> | Ende der HTML-Seite |
| Bereiche einteilen über HTML5 |
|
|---|---|
| HTML5-Befehle |
Beschreibung |
| <header> | Bereich für Kopf (nicht verwechseln mit <head>!) |
| <nav> | Bereich Navigation (Steuerung) |
| <section> | Gruppiert Elemente |
| <article> | Bereich für Inhalt |
| <aside> | Bereich für Zusatzinformationen zum Inhalt |
| <footer> | Bereich für Fuß |
| Text strukturieren |
|
|---|---|
| HTML-Befehle |
Beschreibung |
| <h1> … </h1> |
Hauptüberschrift - wichtig, sollte 1 mal auf jeder einzelnen Seite kommen (engl. h = headline = Überschrift) |
| <h2> … </h2> bis <h6> … </h6> |
Unterüberschriften - sollten in der logischen Reihenfolge verwendet werden. Nach <h2> kommt <h3> |
| <p> … </p> |
Absatz - nach dem Absatz wird automatisch Platz gehalten (engl. p = paragraph = Absatz) |
| <br /> |
erzwungener Zeilenumbruch (Zeilenende) (engl. br = break = Umbruch) |
| <hr /> |
Trennlinie - soll 2 unterschiedliche Inhalte trennen (engl. hr = horizontal ruler = horizontale Linie) |
| Textstellen hervorheben |
|
|---|---|
| HTML-Befehle (HTML-TAG) |
Beschreibung |
| <b> … </b> |
Schrift wird fett angezeigt (engl. b = bold = fett) |
| <strong> … </strong> |
wichtiger Bereich, Schrift wird fett angezeigt (engl. strong = kräftig, überzeugend) |
| <i> … </i> |
Schrift wird kursiv angezeigt (engl. i = italic = kursiv, schräg) |
| <em> … </em> |
hervorgehobener Bereich, Schrift wird kursiv dargestellt (engl. em = emphasis = betont, Hervorhebung) |
| <sup> … </sup> |
hochgestellte Schrift, z.B. Fußnote2 (engl. sup = superscript, zu Deutsch hochstellen) |
| <sub> … </sub> |
tiefgestellte Schrift, z.B. H2O (engl. sub = subscript, zu Deutsch tiefstellen) |
| <del> … </del> |
durchstrichener Text, sprich Inhalt gilt nicht mehr (engl. del = deleted = gelöscht) |
| <ins> … </ins> |
neuer Inhalt im Text (gut um Änderungen hervorzuheben) (engl. ins = inserted = neu eingefügt) |
| <small> … </small> |
für das "Kleingedruckte" im Text (engl. small = klein) |
| Links, Verweise |
|
|---|---|
| HTML-Befehle (HTML-TAG) |
Beschreibung |
| <a href="URL">BESCHREIBUNG</a> |
für interne & externe Linkes. "Beschreibung" wird später im Browser als Link (blau unterstrichen) angezeigt und kann angeklickt werden. Die URL innerhalb des Attributs href wird aufgerufen (engl. a = anchor = Anker) (engl. href = hyper reference = Hypertext-Referenz) |
| <a href="index.htm">STARTSEITE</a> |
interner Link |
| <a href="http://www.uxl.de/"> … |
externer Link |
| <a href="http://www.uxl.de/" target="_blank"> … |
neues (leeres) Browserfenster wird beim Anklicken geöffnet (engl. target = Ziel, blank = leer) |
| <a href="#xy"> … |
Sprungmarke (wird durch # gekennzeichnet) zu einem bestimmten Punkt, hier "xy". Der Punkt muss über das Attribut id definiert sein |
| <a href="mailto:axl@uxl.de">axl@uxl.de</a> |
So kann eine E-Mail-Adresse eingegeben werden. Durch Anklicken öffnet sich ein E-Mail-Programm (sofern installiert) und die E-Mail-Adresse ist bereits eingegeben. (e: mailto = maile nach) |
| Aufzählungen |
|
|---|---|
| HTML-Befehle (HTML-TAG) |
Beschreibung |
| <li>AUFZÄHLUNGSPUNKT</li> |
Bei allen Aufzählungen (nächste 2 Punkte) müssen die Einzelpunkte durch diesen Tag gekennzeichnet sein. (engl. li = list item = Listeneintrag ) |
| <ul> … </ul> |
Art der Auflistung. Umschließt alle einzelnen <li> Wird für Aufbau der Seitennavigation benötigt und andere Aufzählungen (engl. ul = unordered list = unsortierte Liste) |
| <ol> … </ol> |
Art der Auflistung. Umschließt alle einzelnen <li> Die einzelnen Listenpunkte bekommen dann entsprechende Nummerierung 1., 2., 3. usw. (engl. ol = ordered list = nummerierte Liste) |
| Bereiche definieren |
|
|---|---|
| HTML-Befehle (HTML-TAG) |
Beschreibung |
| <div id="NAME">BEREICH</div> |
Über DIV wird ein Bereich im HTML definiert. Diesen Bereich kann man über CSS dann das Design "überstülpen". Angesprochen wird der Bereich über seinen ID-Namen. Bei DIV handelt es sich um ein Blockelement - das Blockelement nutzt die komplette Bildschirmbreite. (engl. div = division = Bereich, Gruppierung von Elementen) |
| <div class="NAME">BEREICH</div> |
Der DIV-Bereich kann auch per CSS über seinen Klassen-Namen angesprochen werden. (engl. class = Klasse) |
| <span id="NAME">BEREICH</span> |
Mit SPAN können Textstellen markiert werden und diese dann über CSS mit Design versehen werden. Das SPAN-Element ist ein Inline-Element, was den Unterschied zum DIV-Element ausmacht. (engl. span = Abgrenzung, Bereich) |
| <span class="NAME">BEREICH</span> |
Kann über den Klassennamen und CSS mit Design versehen werden. |
| Kommentieren, Auskommentieren |
|
|---|---|
| HTML-Befehle (HTML-TAG) |
Beschreibung |
| <!-- KOMMENTAR --> <!-- QUELLCODE ohne Wirkung --> |
Über diese Anweisung können Kommentare im HTML-Code gemacht werden bzw. Teile des HTML-Codes auskommentiert werden. Somit sind diese Teile für einen Browser nicht existent. Das ist z.B. gut zum Testen von HTML-Befehlen. |
| Farben in HTML |
|
|---|---|
| HTML-Befehle (HTML-TAG) |
Beschreibung |
| - | Farben werden über CSS genutzt! Früher wurden auch mit Attributen bei HTML-TAGs Farben festgelegt, was aber im Sinne der Trennung von Inhalt und Design heutzutage keinen Sinn mehr macht! Daher gehören Farben (Design) in den CSS-Bereich (zur Übersicht von CSS-Anweisungen)! |