Layout

Lektion 1 - Vorverständigung

 

1.1 HTML?

HTML, oder Hypertext Markup Language, ist eine Skriptsprache, die von Browsern wie dem Internet Explorer, Fire Fox oder Opera in eine Webseite übersetzt wird. Was du hier gerade vor dir siehst, ist die fertige Webseite, doch was steckt eigentlich dahinter? Oben in deinem Browser findest du einige Menüpunkte. Gehe dort auf Ansicht und wähle Quelltext aus. Was du dort siehst, ist ein Gemisch aus HTML, CSS und Javascript. Wir werden uns hier in diesem Kurs mit HTML auseinandersetzten und lernen, wie man seinem Browser mitteilen kann, z. B. Text, Bilder oder Tabellen auszugeben.

 

1.2 Grundgerüst

Eine Skriptsprache besteht aus reinem Text; Bilder oder Tabellen wirst du niemals im Quelltext vorfinden, sie auszugeben ist allein Sache des Browsers. Was du dafür tun musst, ist viel Tippen. Damit dein Browser weiß, dass er es hier mit HTML zu tun hat, gibt es ein Grundgerüst, das auf jeder einzelnen HTML Seite zu finden ist. Sehen wir uns das einmal genauer an:

<html>
    <head>
        <title>
Meine Webseite</title>
    </head>
    <body>

    </body>
</html>

 

1.2.1 Tags

Bestimmt hast du eben im Quelltext bereits die vielen spitzen Klammern < und > bemerkt. Sie teilen dem Browser mit, wann eine bestimmte Anweisung auszuführen ist, und meistens auch, wann sie beendet werden soll. Diese Befehle an den Browser werden Tags (ausgesprochen: "das Täg") genannt. Jeder Codeabschnitt wird mit einem öffnenden Tag eingeleitet, wie die ganze Seite z. B. mit <HTML>. Hier beginnt die Anweisung an den Browser, dass eine HTML Seite beginnt. Diese Anweisung betrifft die ganze Seite mit all ihrem Quelltext, deshalb steht das schließende HTML-Tag auch ganz am Ende der Seite. (Fast) Jede einleitende Anweisung, wie hier <HTML>, wird mit der gleichen Anweisung inklusive eines Schrägstriches </HTML> beendet. So teilst du dem Browser mit "Hier fängt etwas an" und "Hier hört es wieder auf". Schau dir zum Beispiel nun das Title-Tag an, das dem Browser mitteilt, wie die Webseite heißt. Hier beginnt der Name der Webseite (<TITLE>) und hier hört er auf (</TITLE>).

1.2.2 Sprache

Wir du sehen kannst, sind alle Anweisung in englisch. Das ist die Sprache, in der HTML geschrieben ist; Englischkenntnisse sind daher von Vorteil. HTML steht für Hypertext Markup Language, was etwa Hypertext Auszeichnungsssprache bedeutet, Head ist der Kopf, Body der Körper und Title der Titel.

1.2.3 Die Tags des Grundgerüsts im einzelnen

<HTML> </HTML> leitet, wie gesagt, zu Anfang den HTML Quelltext ein und beendet ihn in der letzten Zeile wieder.

<HEAD> </HEAD> teilt dem Browser mit, hier beginnt der Kopf der Webseite und hier endet er. Im Kopfbereich des Quelltext (Header gennant) werden Einstellungen festgelegt, die noch vor dem Anzeigen der Seite geladen und übersetzt werden. Im Header steht nichts, was auf der eigentlichen Webseite erscheinen soll. Hier kämen z.B. Javascript Befehle oder CSS rein.

<TITLE> </TITLE> ist auch ein Befehl, der in den Header gehört. Innerhalb der Tags steht der Name der Webseite, der oben im Browserfenster als Bezeichnung des Browserfensters angezeigt wird. Schaust du hier einmal in die linke obere Ecke, siehst du, dass Telien den Titel 'TELIEN onlinegaming' hat.

<BODY> </BODY> schließt den Code ein, der vom Browser in die eigentliche Webseite übersetzt wird, sobald der Header geladen wurde. Man nennt diesen Abschnitt des Quelltextes Body.

 

1.3 Farben

Wie bekommt man durch einen reinen Quelltext die bunten Farben auf die Webseite? Bei manchen Farben ist das ganz einfach, indem du die Namen der Farben einfach ausschreibst, wie z.B. red, blue oder black. Dein Browser weiß dann, was damit zu tun ist. Die Anzahl der vordefinierten Farben, die man ausschreiben kann, ist allerdings begrenzt. Deshalb gibt es die sogenannten Hexadezimal Werte, mit denen du alle Farben, die es gibt, auslesen lassen kannst. Jeder dieser Werte besteht aus 6 Zeichen (Zahlen und Buchstaben), denen das Rautezeichen vorangeht. Die Farbe Rot ist z. B. als Hexadezimal Wert #FF0000, Schwarz #000000 oder Türkis #009999. Welcher Wert für welche Farbe steht, kannst du Tabellen entnehmen, wie etwa hier.

 

1.4 Eigenschaften

Eine Farbe ist eine Eigenschaft, genauso wie groß, kursiv oder zentriert. Vielen Tags werden solche Eigeneschaften mitgegeben, um dem Browser zu sagen, wie die eingeschlossenen Anweisungen angezeigt, d. h. formatiert werden sollen. Im Body-Tag stehen die Eigenschaften, die die ganze Seite betreffen, weil in <BODY> und </BODY>, wie oben beschrieben, alles eingeschlossen ist, was der Browser als Webseite übersetzt. Hier hinein gehören z. B. die Eigenschaften Textfarbe, Hintergrundfarbe oder Linkfarbe. Dies sieht folgendermaßen aus.

<body text="#000000" bgcolor="#FFFFFF" link="#0000FF">

Innerhalb des Tags stehen hier nun einige Eigenschaften der Webseite. Eine Eigenschaft wird immer auf die gleiche Weise zugewiesen:

text="#000000"

Es gibt vieles, das formatiert werden kann, und wir werden einiges davon kennenlernen. Was formatiert werden soll, muss dem Browser anhand eines Schlüsselwortes mitgegeben werden. Hier ist es text, was für die Schriftfarbe steht. Der Schriftfarbe wird nun eine Eigenschaft zugewiesen, was mit einem Gleichheitszeichen passiert, wie du es aus der Mathematik kennst. Die Eigenschaften, hier eine Farbe, sind immer in Anführungszeichen eingebettet, so erkennt der Browser, wo die Eigenschaft anfängt und wo sie aufhört. text="#000000" bedeutet also: Die Schriftfarbe (text) ist schwarz (#000000).
Das gleiche passiert mit der Hintergrundfarbe der Seite mit dem Schlüsselwort bgcolor, was eine Abkürzung für backgroundcolor ist und übersetzt Hintergrundfarbe heißt. Zuletzt weisen wir der Linkfarbe noch eine Eigenschaft zu. link ist das Schlüsselwort für die Farbe der Links auf der Seite.

1.4.1 Was sind Links?

Mit Links (engl.: to link = verbinden, vernetzen) verbindet man die einzelnen Seiten einer Webseite untereinander (sog. Hyperlinks) oder verweist über die eigene Webseite auf andere Webseiten. Links siehst du hier überall, sie befinden sich links und rechts vom Kurs in den Boxen.

Und weil Links so wichtig sind, kommen ihnen noch mehr Eigenschaften als die einfache Linkfarbe zu.

Schlüsselwort

link
vlink
alink

Bedeutung

Farbe der Links
Farbe besuchter Links
Farbe aktiver Links

Sobald man auf einen Link geklickt hat, wird er zum bereits besuchten Link. Das v steht für visited, also besucht. Wurde ein Link noch nicht besucht, wird er in der Farbe des Links link angezeigt, nach Klicken in der Farbe des besuchten Links, also vlink. alink steht für active link, also aktive Links. Ein Link wird aktiv, sobald man da drauf klickt. Öffnet sich die Seite nicht auf der gleichen Seite, auf der der Link geklickt wurde, erscheint der Link in der alink Farbe.

 

1.5 Format

Nun, nachdem du diesen Kurs sicher aufmerksam in deinem Editor verfolgt und mitgetippt hast, speicher deine Seite ab. Das Format einer HTML Seite ist *.html. Wenn man eine Webseite über eine URL aufruft, sucht der Browser im Hauptverzeichnis des Servers automatisch die Seite index.html. Deine Startseite der Webseite muss daher immer index.html heißen. Unterseiten kannst du hingegen nennen, wie du willst. Allerdings sind Sonderlaute und Umlaute, wie ä, ö, ü und ß, nicht erlaubt. Außerdem unterscheidet der Browser zwischen Groß- und Kleinschreibung. Die Seite Uebermich.html ist also eine andere als die Seite uebermich.html.
Beim Windows Editor gehst du folgendermaßen vor: Gehe auf Datei - Speichern unter... Unter Dateityp wählst du "Alle Dateien" aus, damit der Editor deinen HTML Code nicht als *.txt Datei speichert. Nun schreibe als Dateiname index.html und speichere die Seite in einen Ordner, den du wiederfindest.


hr

1.6 Übungen

1.6.1 Beantworte die Fragen in eigenen Worten:

  • Was sind Tags und wie sind sie aufgebaut?
  • Worin unterscheiden sich Header und Body?
  • Was heißt "etwas formatieren"?

1.6.2 Füge dem Body-Tag die Eigenschaften 'Farbe von besuchten Links' und 'Farbe von aktiven Links' hinzu. Wähle Farben aus der Tabelle der Hexadezimal Werte.

« zurück Inhalt | Fragen       Kurs weiter »
Layout