Befehle (tags): Was wird dargestellt
HTML – die Sprache von Internetseiten – sollte man kennen, wenn man Internetseiten codieren will.
Der HTML-Code besteht aus einer Aneinanderreihung von Befehlen. Um dem Browser mitzuteilen, dass es sich um einen HTML-Befehl handelt, muss dieser in eckige Klammern < > gesetzt werden. Ein typischer HTML-Befehl besteht aus einem Startwort, z. B. <FONT> für Textstart, dem darzustellenden Inhalt, z. B. „Dies ist ein Text“ und der Endemarke, z.B. </FONT>.
Insgesamt also: <FONT>Dies ist ein Text.</FONT>
So steht am Anfang jeder Datei <HTML> und am Ende jeder Datei </HTML>.
Die Befehle können gross oder klein geschrieben werden. Der HTML-Code wirkt lesbarer und übersichtlicher, wenn die Befehlswörter einheitlich geschrieben werden.
Aufbau einer Seite
<HTML>
<HEAD>
<TITLE>Eine leere blaue Seite mit weisser Schrift</TITLE>
</HEAD>
<BODY bgcolor=“blue“ text=“white“>
<!– Hier kommt die eigentliche Gestaltung der Seite hin. –>
</BODY>
</HTML>
HTML-Befehle werden normalerweise geschachtelt.
<HEAD>
<TITLE> Eine leere blaue Seite</TITLE>
</HEAD>
Eigenschaften (attributes) und Werte (Values)
Für viele der HTML-Befehle gibt es zusätzliche Eigenschaften, wie zum Beispiel Breite (=width), Höhe (=height), Farbe (=color), Schriftart (=face), Schriftgrösse (=size) etc. Diese Eigenschaften werden innerhalb der eckigen Klammern zu dem Befehlswort dazu geschrieben. Die Eigenschaften müssen in der Regel durch Werte spezifiziert werden:
Die Ausprägung der Eigenschaften wird durch Werte ausgedrückt, die aus Zahlen oder aus Wörtern bestehen können. Diese werden an die Eigenschaft mit einem Gleichheitszeichen angehängt und stehen in Anführungsstrichen.
Beispiele:
<IMG width=“200″ height=“150″>
Das Bild ist dann 200 Pixel breit und 150 Pixel hoch.
<FONT color=“white“ face=“Arial“ size=“2″>
Die Schriftfarbe ist weiss, die Schriftart Arial in der Grösse 2.
Bemerkungen: HTML ist zwar eine sehr einfache Sprache, aber wie bei jeder Programmierung gilt: Jeder Tippfehler führt zu einem unverständlichen Befehl!
Am Anfang ist besonders darauf zu achten, dass die eckigen Klammern richtig geöffnet und geschlossen werden, dass ein Leerzeichen zwischen den Befehlen und ihren Eigenschaften steht und dass keine Leerzeichen zwischen den Eigenschaften, den Gleichheitszeichen und den Werten stehen. Manchmal kann auf die Anführungszeichen bei den Werten verzichtet werden, manchmal nicht; besser ist es, immer welche zu setzen, denn falsch ist es nie.
Die Farbe
Hexadezimalcode:
Bevor Farbe auf die Seite kommt, gilt es, den Hexadezimalcode für die Darstellung der Farben im Internet zu erklären.
Alle Farben auf HTML-Seiten sind Bildschirmfarben, also im Farbraum RGB angesiedelt. Die Lichtfarben Rot, Grün und Blau mischen sich in ihrer vollen Intensität zu weiss, in ihrer geringsten Intensität (kein Licht) zu schwarz.
Theorie: Von einem Bildschirm können maximal 256 mal 256 mal 256 Farben, also 16.7 Millionen Farben dargestellt werden. Die Farbe Rot kann also mit Werten von 0 bis 255 eingesetzt werden, ebenso Grün und Blau und alle Kombinationen dieser drei Grundfarben. Die Computer funktionieren aber nicht dezimal (Basis 10), sondern nur binär (Basis 2) oder eben hexadezimal (Basis 16).
Für unser Zahlensystem auf der Basis 10 benötigen wir 10 Ziffern,
nämlich 0 1 2 3 4 5 6 7 8 9.
Für das Hexadezimalsystem benötigen wir 16 Ziffern,
nämlich 0 1 2 3 4 5 6 7 8 9 a (=10) b (=11) c (=12) d (=13) e (=14) f (=15).
Farben werden in Internetseiten wie folgt dargestellt:
#RRGGBB (R: rot, G: grün, B: blau)
angewendet z.B. color=“#RRGGBB“
#FFFFFF weiss (alle Farben voll aufgedreht)
#000000 schwarz (alle Farben ganz zurückgenommen)
#FF0000 rot
#00FF00 grün
#0000FF blau
#FFFF00 gelb
#808080 grau (von jeder Farbe gleich viel)
Webfarben
Da 16.7 Millionen Farben einfach zu viel sind und nicht alle wirklich präzis dargestellt werden können, gibt es Tabellen mit den üblich verwendeten Farben.
Alle Grundbefehle auf einen Blick
Textabsatz: <p>Text</p>
Zeilenumbruch: <br>
Einer der wenigen HTML-Befehle ohne Endetag.
Zentrieren: <center>zentriertes Objekt</center>
Überschriften:
<h1>grösste Überschrift</h1>
<h2>zweitgrösste Überschrift</h2>
….
<h6>kleinste Überschrift</h6>
Textformatierung
<b>fett </b>
<i>kursiv </i>
<u>unterstrichen</u>
<strike>durchgestrichen</strike>
<sup>hochgestellter Text</sup>
<sub>tiefgestellter Text</sub>
Schriftformatierung durch den Font-Tag
<font face=“Arial“ color=“#00FF00″ size=“5″>
size kann die Werte von 1-7 annehmen. (Schriftgrösse)
Schriftart:
face kann jede auf einem Computer installierte Schriftart sein.
Beachte: die Schriftart kann im Internet nur dann dargestellt werden, wenn der Leser der Seite auch diese Schriftart auf dem Computer installiert hat. Es empfiehlt sich, die häufen Schriftarten zu verwenden.
Schriftfarbe:
<font color=“#123456″>Text</font>
Kombination:
<font size=“1″ face=“arial“ color=“#123456″>Text</font>
Beachte, dass der Endtag nur aus font besteht und die Eigenschaften und Werte nicht mehr wiederholt.
Tabellen
Hier ein Beispiel einer Tabelle mit zwei Reihen und drei Spalten.
<table width=“50%“ border=“1″ cellspacing=“0″ cellpadding=“4″>
<tr>
<td >REIHE1 SPALTE1</td>
<td >REIHE1SPALTE2</td>
</tr>
<tr>
<td >REIHE2 SPALTE1</td>
<td >REIHE2 SPALTE2</td>
</tr>
</table>
Bemerkungen:
with=“50%“ gibt an, wie breit die Tabelle sein soll.
cellspacing=“0“ gibt den Abstand der Zellen untereinander in Pixeln an
Adressierung, Pfade
Werden in einem Projekt Bilder oder andere Dateien eingefügt, muss die Adresse korrekt angegeben werden.
Eine Ordnerstruktur für eine Internetseite könnte folgenderweise aufgebaut sein:
Wenn sich eine Datei im Stammordner befindet
Ein Pfad ist der Weg zum Beispiel von der Datei einer Seite zu der Datei eines Bildes auf dieser Seite oder von der Datei einer Seite zu einer anderen Seite (auch Link genannt).
Liegen alle Seiten- und Bilddateien eines Projekts in einem Ordner (Verzeichnis), besteht der Pfad nur aus dem jeweiligen Dateinamen. Das wird auch flache Struktur genannt.
Ist die Struktur des Projekts umfangreicher und verschachtelt, muss der Weg von der Datei der Seite zu der Bild- bzw. Seitendatei angegeben werden. Dabei steht „../“ für „gehe aus diesem Ordner raus“ und „ordnername/“ steht für „gehe in diesen Ordner rein“. Diese Art Pfade anzulegen heisst relativ, weil sie sich auf die Relation der Datei zu den Dateien in Ordnern in ihrer Umgebung bezieht.
Im „stammordner“ befindet sich die Datei index.html
Im Ordner „bilder“ befinde sich die Datei „bild1.jpg“
Im Ordner „downloads“ befinde sich die Datei „agb.pdf“
Im Ordner „texte“ befinde sich die Datei „text1.html“
Im Ordner „weitere_texte“ befinde sich die Datei „literatur.html“
Wenn auf der Seite index.html im Stammordner ein Link auf die Seite „text1.html“ gesetzt werden soll, muss folgender Pfad angegeben werden:
texte/text1.html (gehe in den Ordner „texte“ und öffne die Datei text1.html)
Wenn auf der Seite text1.html ein Link auf die Seite „literatur.html“ gesetzt werden soll, muss man zuerst aus dem Ordner texte gehen und dann in den Ordner „weitere_texte“ gehen:
../weitere_texte/literatur.html
Hyperlinks
Ziel definieren:
<A href=“seite2.htm“>gehe zu Seite 2 </A>
Hyperlink setzen im Internet: <a href=“http://www.dieseite.ch“>Verweistext</a>
E-Mail Hyperlink: <a href=“mailto:E-Mail Adresse“>Verweistext</a>
Bilder einfügen
Der Image-tag alleine bewirkt überhaupt nichts. Es muss immer eine Bildquelle (source) mit korrektem Pfad angegeben werden, damit das Bild oder die Grafik dargestellt werden kann. Es gibt keine Endemarke.
<IMG src=“…“>
<IMG src=“…“ border=“…“ width=“…“ height=“…“ alt=“…“ align=“…“>
Gliederung <HR> Horizontale Linie (ohne Endtag)
Aufzählungen: <ul ><li>Eintrag</li></ul>
Nummerierung: <ol><li>Eintrag</li></ol>