HTML kreist die Inhalte ein

Eine HTML-Datei ist von einer Text-Datei kaum zu unterscheiden. Eine CSS-Datei auch nicht. ;)

In der HTML-Datei kreisen HTML-Tags Informations-Schnipsel ein, und bestimmen so, wie diese dargestellt werden sollen.

Das gilt für Absätze über Links (auf andere Seiten, das Ganze nennt man Hypertext) oder Bilder mit ihrem img-Tag bis hin zum Klotz zur Verzierung, das ist hier alles möglich.

Ein Tag sieht übrigens so aus: <TAG>. Die Sachen zwischen den spitzen Klammern bestimmen, wie das Tag "heißt", also wie es im Lesegerät des Nutzers dargestellt wird.

Wenn Du bestimmen willst, wie Tags aussehen sollen:

CSS sagt das Format an

Wenn Du HTML aufhübschen/dessen Erscheinungsbild abändern möchtest, ist die Layout-Sprache Cascading Style Sheets (CSS) Dein Freund.

Profis bewahren diese CSS-Anweisungen in einer eigenen Datei (oder mehreren) auf, die im HTML-Header referenziert (eingetragen) werden.

Sieh Dir an, wie wir das hier machen; drücke jetzt <strg>-U und suche im <HEAD> nach einem <link>-Tag mit einer CSS-Referenzierung.

Dabei kannst Du Dir gleich ansehen, was dort darüberhinaus Ambach ist: guck Dir die verschiedenen Tags im Head an.

Vielleicht willst Du Dir das Style-Sheet für diese Seite mal durchlesen (Obacht: laang!), nur zu, klicke in der Quell-Ansicht auf den Link auf das Style-Sheet.

Grundsätzliches

Eine HTML-Datei teilt sich in zwei Teile, die beide von einem <HTML>-Tag eingeschlossen werden:

Beachte, dass beide Tags nicht nur auf-, sondern auch zugehen, sie schließen somit Bereiche ein, die das Lesegerät der Nutzer unterschiedlich interpretiert.

Wenn Du HTML lernen willst, musst Du zuerst noch zwei Sachen wissen:

offen vs geschlossen

HTML ist ein Kind von XML. HTMLs Aufgabe ist die Textauszeichnung (Einkreisung) für ein Lesegerät (den Brauser des Nutzers, der das lesen soll).

Tags lassen sich in zwei Klassen aufteilen:

Offene Tags

Die bringen meist non-text-Elemente auf die Seite, zum Beispiel <br> für einen Umbruch oder <img> für ein Bild.

Geschlossene Tags

Können Text einschließen und haben daher ein öffnendes und ein schliessendes Tag. Wie zum Beispiel <p>Text</p> oder <textarea>Text</textarea> oder <section>Text</section>.

Merke:

Ob ein HTML-Tag offen oder geschlossen ist, kann man nicht ändern, weil es in der Spezifikation so festgelegt ist. Das muss man wissen/lernen. selfhtml hilft Dir dabei.

block vs inline

Je nach Vorkommen verhalten sich Tags (relativ zum Text-Fluss) entweder block, dh sie beanspruchen den ganzen Platz bis hin zum Viewport-(dh Fenster-)Rand in der Horizontalen.

Oder sie sind inline, dh man erwartet sie innerhalb eines Textblocks, wo einzelne Zeichen/Worte gegen des Rest des Blocks ausgezeichnet werden sollen.

Dies sind alles Standard-Verhaltensweisen und als solche Gegenstand der Änderung/Überformatierung durch den Autor, also Dich, im CSS.

Merke:

block- vs inline-Verhalten kann man durch Formatierung in CSS ändern. Der relevante CSS-Befehl heisst display, die Werte zB block vs inline.

Geh hin und lerne es

Und jetzt schnapp Dir ein Projekt bzw baue eine HTML-Seite mit HTML Tags.

Wenn Du es Dir erst ansehen möchtest, nur zu. Drücke <strg>-U und guck Dir an, wie wir es hier gemacht haben. Dass das HTML aus unserer HTML-Schmiede automatisch erstellt wurde, braucht Dich nicht zu stören.

Beachte bzw lies dazu:

Am besten legst Du Dir zum HTML schreiben einen Texteditor (wir empfehlen Dir den Flaschengeist geany als Editor) neben einen Brauser, wo Du Dir die Ergebnisse Deiner Mühen mit der Adresse file://<Pfad zur Datei> angucken kannst. Brauchst also keinen eigenen Webserver dafür, Datei reicht.

Schreibe also in die Textdatei, speichere diese und wechsle dann den Focus auf den Brauser und lade die Seite neu, um zu sehen, was Du geändert bzw ergänzt hast.

HTML-Cheat-Sheet hier