HTML ist die Basis für Webseiten. Jede Webseite im Word Wide Web ist mit HTML geschrieben. Wenn eine andere Technologie zum Zug kommt, ist trotzdem zumindest ein bisschen HTML als Basis vorhanden.
HTML wird als Text geschrieben, HTML-Dateien sind Textdateien mit der Dateiendung .html oder .htm
HTML steht für Hypertext Markup Language.
Hypertext weisst darauf hin, dass dieser Text eine neue Ordnung hat, nicht mehr linear von vorne im Buch nach hinten, sondern durch Links verknüpft kann man die Textteile in beliebiger Reihenfolge lesen.
Markup, weil mit HTML Textstücke nach ihrer Logik ausgezeichnet ("markiert") werden. Die Markierung geschieht über ein Tag am Anfang und am Ende des Bereiches. Zum Beispiel wird ein Abschnitt (Paragraph) wie folgt ausgezeichnet: <p>Abschnitt mit Text</p>
HTML ordnet einen Text nach seiner inneren Logik. HTML ist nicht für die Gestaltung, das Layout oder die Animation von Webseiten zuständig, dafür gibt weitere Techniken.
CSS ist die Sprache die zum Stylen eines HTML-Dokumentes verwendet wird.
Mit Javascript kann das Verhalten einer Webseite verändert werden.
Alle diese Techniken bauen aufeinander auf.
Die HTML Sprachsuppe entschlüsselt
Wenn du dich mit HTML auseinandersetzt, triffst du sehr schnell auf neue und möglicherweise auch verwirrende Sprachkonstrukte. Du kannst beruhigt sein: Diese anfängliche «Wand vor dem Kopf» senkt sich mit ein bisschen Praxis und Sicherheit sehr schnell und du wirst erkennen, dass die Sprache HTML aus nur wenigen Elementen besteht. 3 Begriffe musst du dir aber bereits schon zum Anfang gut merken: Elemente, den englischen Ausdruck «Tags» (Markierer) sowie Attribute.
Tags
Sobald wir Elemente mit einem kleiner und grösser Zeichen – die sog. spitzen Klammern – auszeichnen oder umschliessen, erstellen wir ein Tag. Tags kommen in der Regel immer paarweise vor, d.h. mit einem öffnenden und schliessenden Tag.
Ein öffnendes Tag wird opening tag genannt, ein schliessendes Tag entsprechend closing tag.
Ein opening tag markiert den Anfang oder Start eines Elements. Es besteht aus dem Kleiner-Zeichen, dem Elementnamen oder -bezeichner und endet mit dem Grösser-Zeichen. Zum Beispiel: <div>
Ein closing tag markiert den Schluss/das Ende eines Elements. Es besteht aus einem Kleiner-Zeichen, einem Forward-Slash, dem Elementnamen und endet mit dem Grösser-Zeichen. Zum Beispiel: </div>
Der Inhalt (sei es Text, Bild, Video etc.) der zwischen die opening und closing tags eingeschlossen ist, ist wie nicht anders erwartet der Inhalt dieses Elements. Ein Hyperlink/Anker (engl. anchor) besteht also zum Beispiel aus dem öffnenden <a>tag und dem schliessenden </a> tag. Alles was zwischen diesen beiden tags steht ist der Inhalt dieses Hyperlinks/anchor-tags. <a>weitere Informationen</a>
Elemente
Ein Element besteht aus einem opening tag, dem Text dazwischen und dem closing tag. Damit bezeichnet ein Element (ein Titelelement, ein Untertitel-Element, ein Abschnitt-Element) sowohl die Struktur als auch den Inhalt eines Objekts auf einer Seite.
Attribute
Attribute sind Eigenschaften (engl. properties) welche zusätzliche Informationen zu einem Element liefern. Am häufigsten verwendet wird:
das id Attribut, welches ein Element genau definiert und entsprechend nur einmal pro Seite verwendet werden darf
das class Attribut,welches ein Element klassifiziert
das src Attribut (source = Quelle), welches den Speicherort des einzubettenden Inhalts angibt
das href Attribut, welches die Hyperlink Referenz auf eine verlinkte Ressource definiert, also die Seite oder den Ort an den ich beim Klick auf den Link springen möchte
Attribute werden immer und ausschliesslich im opening tag angegeben, jeweils durch einen Leerschlag getrennt nach dem Elementnamen. In der Regel bestehen Attribute jeweils aus einem name und einem value, also einem Namen sowie einem Wert. Geschrieben/Formatiert werden diese Attribute mit dem Attributnamen, gefolgt von einem Gleichheitszeichen (=) in direktem Anschluss sowie dem in Anführungszeichen eingeschlossen Wert. Ein Hyperlink mit einem Verweis auf eine andere Website sieht also mit dem entsprechenden href-Attribute folgendermassen aus: <a href="http://www.apple.com/">Die Apple Homepage</a>
