HTML – Eine “Formelsammlung” für Dich

html_formelsammlung

In dem heutigen Tutorial dreht sich alles um HTML. Ich werde Dir die wichtigsten HTML-Befehle auflisten, erklären und natürlich Beispiele dazu geben! Ich hoffe natürlich, dass Dir das ganze danach ein wenig einfacher fällt.

HTML – Was ist das?

HTML ist eine Programmiersprache um verschiedene Elemente in einem Brwoser (z.B. Firefox oder Internet Explorer) zu erstellen und zu strukturieren. Die Sprache wurde von Tim Berners-Lee, einem früheren Arbeiter des Kernforschungzentrums CERN ins Leben gerufen. Von da an wurde sie immer wieder “verbessert” und weiterentwickelt. Übrigens, das Kürzel HTML steht für HyperText Markup Language.

Allgemeine HTML-Befehle

<html> ... </html>
umfasst den komplette HTML-Code eines Dokuments. Durch diesen Befehl erschaffst Du sozusagen eine “Einleitung” und sagst dem Browser, dass Du jetzt HTML-Code verwendest, den er umsetzten soll.
<head> ... </head>
umfasst die Kopfzeile deines HTML-Dokuments. In ihr stehen alle wichtigen Informationen, die Dein Dokument definieren. Alles was von diesem Befehl umfasst wird, ist im Browser nicht zu sehen. Ein gutes Beispiel dafür ist zum Beispiel ein Verweis auf ein externes Stylesheet.
<title> ... </title>
steht innerhalb des <head>-Tags und verleiht der Internetseite im Browser einen eigenen Titel. Dieser Titel wird aber nicht nur in der Registerkarte deines Browsers angezeigt, sondern dient auch als Bezeichnung für Lesezeichen und Eintragungen bei Suchmaschinen!
<body> ... </body>
umfasst den Hauptteil Deines HTML-Dokuments. Zwischen den <body>-Tags stehen alle Befehle, die auch im Browser sichtbar sind und die Form Deiner Internetseite bestimmen.

HTML-Befehle für die Schrift – allgemein

<p> ... </p>
erzeigt einen Text-Absatz im Browser.
<h1> ... </h1>
...
<h6> ... </h6>
wird für Überschriften benutzt. Der <h1>-Tag stellt die größte, der <h6>-Tag die kleinste Überschrift da. Die Schriftgrößen werden bei den <h2>, <h3>, <h4> und <h5>-Tags schrittweise kleiner.
<small> ... </small>
macht den betroffenen Textabsatz um einen Schriftgrad kleiner (z.B. aus 14px werden 13px).
<big> ... </big>
macht den betroffenen Textabsatz um einen Schriftgrad größer (z.B. aus 14px werden 15px).
<p align="left"> ... </p>
<p align="right"> ... </p>
<p align="center"> ... </p>
<p align="justify"> ... </p>
left: sorgt dafür, dass der betroffene Textabsatz linksbündig ausgerichtet wird.
right: sorgt dafür, dass der betroffene Textabsatz rechtsbündig ausgerichtet wird.
center: sorgt dafür, dass der betroffene Textabsatz zentriert wird.
justify: sorgt dafür, dass der betroffene Textabsatz im Blocksatz geschrieben wird. Um ein schönes Schriftbild zu erhalten, ist es empfehlenswert, hier die Wörter sauber zu trennen!
<br />
erstellt einen Zeilenumbruch und beginnt mit einem neuen Textabsatz.
<blockquote> ... </blockqoute>
wird benutzt, um Zitate im Browser wiederzugeben. Diese Textstelle kann besonders formatiert werden, um das Zitat in den Vordergrund zu rücken!

HTML-Befehle für die Schrift – erweitert

<b> ... </b>
sorgt dafür, das die Schrift fett gedruckt wird.
<i> ... </i>
macht aus einem normalen Text eine kursiv gedruckten Text.
<u> ... </u>
unterstreicht den betroffenen Text.
<sup> ... </sup>
schreibt die betroffenen Wörter als Hochzahl (z.B. in der Mathematik als Exponente bei der Potenzrechnung).
<sub> ... </sub>
stellt die betroffenen Wörter tief (z.B. in der Chemie bei Stoffen wie H2O).
<tt> ... </tt>
verwandelt den Stil der betroffenen Wörter in Schreibmaschinenstil, das bedeutet Schrift mit gleichen Abständen.

HTML-Befehle für Verlinkungen

<a href="abc"> xyz </a>
erzeugt eine Verlinkung zu abc, die man durch einen Klick auf xyz erreicht.
<a href="abc" target="_blank"> xyz </a>
erzeugt eine Verlinkung zu abc, die man durch einen Klick auf xyz erreicht. Achtung: Die Verlinkung wird in einem neuen Browserfenster geöffnet!
<a href="#abc"> ÜBERSCHRIFT </a>
+
<a name="abc"> nach oben </a>
werden benutzt, um Anker innerhalb eines HTML-Dokuments zu erstellen. Der Link, der zu der Stelle im Dokument führen soll, wird mit dem name-Attribut definiert. Die Stelle, zu der gesprungen werden soll, wird mit dem href-Attribut definiert. Dabei muss immer eine # vor dem Namen stehen.
<a href="mailto:max@mustermann.de"> ... </a>
erzeugt eine Verlinkung, die ein E-Mail-Programm auf dem Computer des Benutzers startet. Die verlinkte E-Mail-Adresse steht dann schon im Empfänger-Feld!

HTML-Befehle für Tabellen

<table> ... </table>
kündigt dem Browser an, dass nun eine Tabelle beginnt.
<tr> ... </tr>
erstellt eine neue Tabellenzeile.
<td> ... </td>
erstellt eine neue Tabellenspalte.
<table>
  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
</table>
erzeugt als eine Tabelle mit 4 Zellen (2 Zeilen á 2 Spalten)!
<td colspan=x> ... </td>
verbindet x Zellen innerhalb einer Zeile miteinander.
<td rowspan=x> ... </td>
verbindet x Zellen innerhalb einer Spalte miteinander.

HTML-Befehle für Listen und Aufzählungen

<ul> ... </ul>
kündigt dem Browser an, dass nun eine ungeordnete Liste beginnt. Diese hat als Aufzählungssymbole Spiegelstriche oder Kreise.
<li> ... </li>
steht innerhalb einer Liste oder Aufzählung und erzeugt einen Spiegelpunkt/ Aufzählungspunkt.
<ol> ... </ol>
kündigt dem Browser an, dass nun eine Aufzählung (= geordnete Liste) beginnt. Diese Liste wird standardmäßig mit Zahlen durchnummeriert.

Ich hoffe, dass Dir diese Auflistung von HTML-Befehlen ein wenig hilft und Du nun ein wenig besser weißt, wofür die ganzen Befehle stehen und was sie auslösen. Falls Du noch Fragen hast, oder möchtest, dass ich dieser “Formelsammlung” noch etwas hinzufüge, dann schreibe mir doch bitte einen Kommentar!

15 Responses to “HTML – Eine “Formelsammlung” für Dich”


Leave a Reply