Style und Inhalt einer Präsenz mit HTML und CSS definieren

Mit den Seitenbeschreibungssprachen Hyper Text Markup Language (HTML) und Cascadian Style Sheets (CSS) kann bestimmt werden, wie die zukünftige Website aussehen soll. Anfänger können beide Sprachen Schritt für Schritt lernen und so den Inhalt der Internetpräsenz selbst bestimmen; und dies auf einem sehr hohen Niveau. Beide Sprachen kooperieren mit dem Internetbrowser, der im letzten Schritt bestimmt, wie die Site aussehen wird.

Hyper Text Markup Language
HTML fängt mit einem gewissen Grundgerüst an. Jedes Gerüst beginnt mit dem Befehl und endet mit . Dies zeigt dem Dokument, dass es sich um einem HTML-Tag handelt. Der Head-Bereich wird über und bestimmt; in der Regel definiert man hier die Überschrift der Seite. Das Wichtigste ist der Body-Abschnitt; in diesem findet sich der Hauptteil wieder. Abgeschlossen wird mit . Im Gesamten sieht das dann so aus:

.

Textprogrammierung
Bei HTML gibt es diverse Möglichkeiten zu bestimmen, wie der Text auf der Site aussehen und erscheinen soll.
Die wichtigsten Befehle sind hier für fett und für kursiv. Ein Zeilenumbruch wird über
definiert.
Sonderzeichen sollten durch diverse Codes ersetzt werden, damit jeder User auf der ganzen Welt den Text problemlos lesen kann. In Amerika kennt man keine Umlaute; demnach kann einem amerikanischen Benutzer auch kein Umlaut angezeigt werden. Der Code für “ä” wäre ä.

Links
Einen Link zu externen Seiten setzt man bei HTML über Linktext .
Natürlich können auch Links zu einer Mail-Adresse gesetzt werden. Dies geschieht über den Befehl Hier geht die Mail hin .

Etwas bunter und kreativer wird es mit den Cascadian Style Sheets. Diese Sprache bestimmt das Layout der Seite.

Grundlagen
CSS-Befehle kommen immer in den -Bereich des HTML Grundgerüstes. Definiert wird dies über

.

Der Stil für ein Tag wird immer in einem gleichbleibenden Muster für die einzelnen Elemente definiert. Das zu definierende Element steht zu Anfang, die Befehle folgen in einer geschweiften Klammer. Man kann auch mehrere Befehle miteinander gruppieren und erspart sich so lästige Doppeltausführungen.

Schriftlayout
Den Stil der Schrift definiert man für die verschiedenen Elemente in CSS. Jede Definition wie zum Beispiel Farbe oder Schriftart hat ihren eigenen Befehl. Die Farbe definiert man über color:, die Schriftart über font-family:. Schriftgrößen werden über font-size: bestimmt. Ein Beispiel für die Definition einer Überschrift:

h1 { color: red; font-family: Verdana; font-size: 15pt; }

Dieser Befehl gibt der Schrift die Farbe Rot. Es wird die Schriftart Verdana in einer Größe von 15 Punkt gewählt. Über font-weight: bold kann man die Schrift als Fett definieren. Farben lassen sich auch als RGB-Wert mit Hexadezimalzahlen bestimmen. Passende Tabellen findet man massenweise im Internet.

Hintergrund
Beim Hintergrund kann man wählen, ob dieser eine einfache Farbe oder ein Bild enthalten soll. Ein einfacher, farbiger Hintergrund wird über background-color bestimmt. Danach folgt die Farbe. Ein Beispiel:

{ background-color: yellow; }. Der Hintergrund der Seite ist nun gelb.

Das Einsetzen eines Hintergrundbildes ist genauso simpel. Allerdings sollte beachtet werden, dass es Hintergrundbild immer kachelt, wenn es nicht mit der Seite abschließt. Dies kann zu unerwünschten Effekten führen. Ein Beispiel für ein Hintergrundbild:

{ background-image: URL (”Bild.jpg”); }.

Comments are closed.