Du bist hier: Homepage von Dietrich Schäckermann, Homepage-Gestaltung: Grundkurs HTML

Home

Mail

Diese Seite drucken

Ein kurze Einführung in HTML

die Programmiersprache für Internetseiten

0. Inhaltsverzeichnis

1. Das Grundgerüst

2. Die Seite gestalten...

2.1 ...mit Absatzformaten

2.2 ...mit Linien

3. Textformate

4. Bilder auf die Seite!

5. Listen

5.1 Listen erstellen

5.2. Verschachtelte Listen

6. Attribute und Parameter ...

6.1 ... im Body-TAG

6.2 ... im p-TAG

6.3 ... im hr-TAG (Linie)

6.4 ... im font-Tag

6.5 ...im img-TAG

6.6 ... in Listen

6.7 ... in Tabellen

7. Links

7.1 Links innerhalb der Seite

7.2 Links zu einer anderen Seite der Homepage

7.3 Links zu einer anderen Homepage im Internet

8. Tabellen

8.1 Das Tabellen-Grundgerüst

8.2 Verschachtelte Tabellen

8.3 Seitentabelle

8.4 Komplexe Tabellen gestalten

9. Grafik als Link "Knöpfe"

10. weitere TAGs

11. Referenz

size=3 width="100%" align=center>

1. Das Grundgerüst         zurück zum Inhaltsverzeichnis

Dies ist das Grundgerüst einer HTML-Seite, die im Browser betrachtet werden kann.

<Html>

            <head>

                        <title>

                        </title>

            </head>

            <body>

            </body>

</Html>

"Spielregeln" für diesen Grundkurs:

1. Html-Code schreibe ich immer blau. Er steht immer in Spitzklammern.

2. Text, den du einfügen sollst und der dann im Browser zu lesen ist, schreibe ich immer kursiv.

3. Html-Befehle heißen in der Fachsprache TAGs. Ich benutze Befehl und TAG parallel.

Von Html-Code spreche ich, wenn ich alle oder mehrere TAGs meine.

Du benötigst einen einfachen Text-Editor. In Windows XP ist das z. B. der "Editor" oder "Wordpad",
in anderen Windows-Versionen "Notepad."(Siehe Fußnote 1) ganz unten)
Ich arbeite bei dieser Einführung mit dem Windows-Programm "Editor".

1. Aufgabe Leg auf dem Desktop oder wo du magst einen Ordner "HOMEPAGE" an.
(Ich schreibe hier Ordner immer in Großbuchstaben, Dateinamen vollständig in Kleinbuchstaben. In Html ist das zwar noch egal, in anderen Programmiersprachen später aber nicht mehr.)

2. Aufgabe Öffne den Editor. (Siehe oben)

3. Aufgabe Speichere die leere Seite als Datei in "HOMEPAGE" unter dem Dateiname "index.htm". In den einfachen Texteditoren musst du die Endung "htm" selbst eingeben, denn sonst heißt die Endung "txt" und kann vom Browser nicht gelesen werden.

4. Aufgabe Kopiere die Grundstruktur von dieser Seite hier (oben, blau!) und füge sie in "index.htm" ein.

5. Aufgabe Füge zwischen <body></body> Dies ist meine erste Seite ein.

6. Aufgabe Speichere die Datei (geht am schnellsten mit [Strg/s]).

7. Aufgabe Öffne sie im Browser. Das geht am einfachsten, wenn du in deinen Ordner "HOMEPAGE" gehst
            und dort die Datei "index.htm" doppelklickst.
            Du siehst, der eingegebene Text erscheint im Browser, der Html-Code nicht.

8. Aufgabe Füge nun im Editor zwischen <title></title> deinen Namen ein.

9. Aufgabe Speichern - im Browser aktualisieren mit oder - anschauen.

Dein Name steht nun oben im blauen Rand des Browsers.

Information: Html-TAGs sind - fast - immer nach dem Zwiebelprinzip aufgebaut, d. h. es gibt einen ÖffnungsTAG z. B. <title>, der so lange gilt, bis er mit dem SchließTAG, hier also </title> abgeschlossen wird.

Ich nenne dies Zwiebelprinzip, weil die beiden TAG-Teile etwas wie Zwiebelschalen umschießen.

Information: Öffnungs- und SchließTAGs haben also immer denselben Namen, beim SchließTAG steht ein Slash (/) vorweg.

Und noch eine:
Information Es lohnt sich, erklärenden Text als Kommentar in die Programmierung einzugeben.
Dieser Kommentar soll natürlich nicht im Browser erscheinen, sondern nur für den Programmierer sichtbar sein. Du kannst dies erreichten, wenn du deinen Kommentar in folgende Zeichen einkleidest.
<!-- Kommentartext -->
In "richtigen" HTML-Editoren1)gibt es meist einen Menüpunkt "Kommentar" oder eine entsprechende Tastenkombination. In den Editoren, mit denen ich arbeite (siehe unten bei 1)), ist das die Tastenkombination [strg/#].

Nun aber geht's richtig los!

 

2. Die Seite gestalten...        zurück zum Inhaltsverzeichnis

Zunächst:

Alles, was du in Zukunft kopieren und einfügen sollst, kommt zwischen <body> </body>.

2.1 ...mit Absatzformaten     zurück zum Inhaltsverzeichnis

Um Text auf der Seite ordentlich aufzubauen, gibt es den TAG <p> </p> (p steht für Paragraph,dem englischen Ausdruck für Absatz.)
Er umschließt einen Absatz und darf nicht vergessen werden!

Vor und nach einem solchen Absatz machen die Browser größere Zeilenabstände.

10. Aufgabe Füge zwischen <body> und </body> den Satz Dies ist meine erste Seite und drück am Ende des Satzes die Enter-Taste.
Schreibe in die neue Zeile Ich lerne Programmieren.

11. Aufgabe Speichern – im Browser aktualisieren - anschauen.

Du siehst, beide Sätze stehen hintereinander, obwohl du die Enter-Taste gedrückt hast.
Der Absatz, den du in deinen Code eingefügt hast, wird vom Browser nicht „verstanden“.

12. Aufgabe. Nun „umklammere“ jeden Satz mit dem P-TAG. (Achte auf die genaue Schreibweise!)
Also:           <p>Dies ist meine erste Seite</p>
                    <p>Ich lerne Programmieren.</p>

Speichern – im Browser aktualisieren – anschauen.

Du siehst, die beiden Sätze stehen untereinander mit ziemlich großem Abstand.

Nun müssen wir schon gleich einen TAG kennen lernen, der keinen Schließ-TAG hat.
Der sieht so aus: <br /> (br steht für Englisch break.)

Mit diesem TAG erzeugst du einen Zeilenumbruch innerhalb eines Absatzes.
Leerzeichen + Slash hinter br sagt dem Browser, dass kein Schließ-TAG folgt.

13. Aufgabe Füg irgendwo in eine der beiden Textzeilen <br /> ein.

Speichern – aktualisieren – anschauen.

Du siehst, der Text wird in eine neue Zeile umgebrochen, es entstehen aber keine größeren Zeilenabstände.

Die Erfinder von Html haben es uns leicht gemacht. Sie haben Überschriften-TAGs entwickelt.
Sie heißen:
<h1><</h1> bis <h6></h6>.
(„h“ steht für Englisch „headline“)

Jeder diese TAGs formatiert den Text ein wenig anders.

<h1>Überschrift 1</h1>

<h2>Überschrift 2</h2>

<h3>Überschrift 3</h3>

<h4>Überschrift 4</h4>

<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>

14. Aufgabe Kopier die obigen Zeilen von <h1> bis </h6> in deine Datei zwischen <body> </body>.

Speichern – aktualisieren – anschauen.

Du kannst die Absätze noch weiter gestalten. Näheres findest du unter 6. Attribute und Parameter ... im p-Tag.

2.2 ...mit Linien                 zurück zum Inhaltsverzeichnis

Hier noch ein weiterer TAG, auch ohne Schließ-TAG, mit dem du deine Seite gestalten kannst. <hr />. Dieser Tag zieht eine Linie quer über die Seite.

Wie du die Linie weiter gestalten kannst, findest du unter 6. Attribute und Parameter ... im hr-TAG.

Information: Leider ist es sehr kompliziert, eine Seite in Html so zu programmieren, dass sie bei allen Bildschirmauflösungen und in allen Browsern gleich aussieht.

Wenn du längeren Text in deine Datei eingibst (sinnlosen Text findest du hier!) und dann die Größe des Browserfensters änderst, wird der Text am rechten Rand immer anders umgebrochen. Das hat aber auch den Vorteil, dass immer alles zu lesen ist, ohne dass du scrollen musst. Anders gesehen: Seiten, bei denen du nach rechts oder links scrollen musst, sind mit viel Mühe "gestylt", damit sie immer gleich aussehen.

Hier stoßen wir auf ein grundsätzliches Problem: Als Programmierer musst du immer einen Kompromiss schließen zwischen effektvoller Gestaltung und leichter Lesbarkeit. Allerdings ist dies nur ein scheinbarer Kompromiss, denn bei guter Gestaltung sollte die Seite auch optimal lesbar sein. Dies erreichst du, wenn du dich nach dem Prinzip richtest:

Weniger ist mehr!

3. Textformate                  zurück zum Inhaltsverzeichnis

Teile des Textes innerhalb eines Absatzes formatierst du mit:

Eine andere Schriftart als die vorgegebene formatierst du mit dem font-TAG
<font> </font>.
Allerdings funktioniert dieser TAG nur, wenn du ihm sagst, welche Schrift du benutzen willst. Das ist wohl logisch, nicht wahr?!

Du musst innerhalb des font-TAGs also eine weitere Information geben! Eigentlich können alle TAGs solche Zusatzinformationen bekommen. Sie heißen Attribute (Merken!).
Genaueres dazu erfährst du unter dem Punkt 6. Attribute und Parameter.

Ein Attribut sieht dann so aus: attr=" "

Attribute bekommen wiederum Parameter (Merken!). Das können alle möglichen Angaben sein.

Beispiel für den font-TAG: <font face="Arial">Hier steht Text in "Arial"</font>.

Attribute und ihre Parameter schreibe ich in Zukunft immer grün.

Attribute für Schriftgröße und -farbe sind:

 

15. Aufgabe Setz in deiner Datei (index.htm) die Zeile "Dies ist meine erste Seite" in den Font Arial mit der Schriftgröße 8 und der Farbe "red".

Speichern - aktualisieren - anschauen!

Du siehst: Die Schriftgröße "8" ist sehr groß. Die Größen entsprechen also nicht den Größenangaben in Word.

Information Für "red" kannst du auch schreiben "#ff0000". Die Buchstaben und Ziffern stehen für jeweils 16 Möglichkeiten, den Ziffern von 0 bis 9 und den Buchstaben von a bis f (für die Zahlen 10 bis 16). So ergeben sich ~16 Mill. Farbnuancen! Du kannst sie ja mal alle durchspielen!

Der "Doppelpack" am Anfang (= ff= steht für rot, "00" steht für schwarz oder "kein Farbwert", so dass aus "#ff0000" reines Rot wird.
Die mittleren beiden Ziffern stehen für Grün, die letzten beiden für Blau.
Die Hauptfarben kannst du auch durch ein - englisches - Wort angeben, wie oben für rot = "red".

Die 16 Farbnamen:

 

Manche Farbnamen lassen sich auch noch mit "light" kombinieren, z.B. "light#00ff00".

4. Bilder auf die Seite!                  zurück zum Inhaltsverzeichnis

Um Bilder in die Seite einzubauen, gibt es einen weiteren TAG. Der heißt <img>.
Auch dieser TAG hat keinen SchließTAG!

Dieser TAG bekommt auch Attribute und Parameter, damit der Browser weiß, welches Bild er laden soll.
Der vollständige TAG heißt also: <img src="(Name des Bildes mit seiner Kennung, z. B. jpg oder gif)">

16. Aufgabe Kopier ein Bild in den Ordner "HOMEPAGE".
Achtung: Das Bild wird nur sichtbar, wenn es im selben Ordner liegt wie deine Index-Seite.

17. Aufgabe Füg obigen img-TAG in deine Datei.

18. Aufgabe Schreib zwischen die Anführungszeichen an Stelle der Klammer den Dateinamen deines Bildes( die runden Klammern weglassen!).

Speichern - aktualisieren - im Browser anschauen.
(Ab jetzt lasse ich diesen blöden Spruch weg!)

Du siehst, das Bild ist nun in deine Datei eingebaut.

Hast du ein großes Bild gewählt, "haut" es dir unter Umständen die ganze Seite kaputt. Wie du das Bild klein zwingst, zeige ich dir unter 6. Attribute und Parameter ... im img-TAG.

5. Listen                 zurück zum Inhaltsverzeichnis

5.1. Listen erstellen          zurück zum Inhaltsverzeichnis

Dies ist eine typische Liste, die du mit Html erstellen (und auch variieren!) kannst.

Um eine Liste zu erstellen, musst du zunächst dem Browser sagen: "Jetzt kommt eine Liste".
Dazu benutzt du den TAG <ul> </ul>

Dann setzt du in diesen TAG den TAG <li> </li> für den einzelnen Listenpunkt.
Da du ja immer mehrere Punkte untereinander hast, musst du immer wieder <li></li> einsetzten.

Das Ganze sieht dann für drei Listenpunkte so aus (Ich habe die Liste gleich mit Tabs übersichtlicher gemacht.):

<ul>
                    <li>Text, der hinter dem Listenpunkt steht. </li>
                    <li>Text, der hinter dem Listenpunkt steht. </li>
                    <li>Text, der hinter dem Listenpunkt steht. </li>
</ul>

19. Aufgabe Kopiere diese Liste in deine Seite und schau sie dir im Browser an.

20. Aufgabe Nun ändere in deiner Datei <ul> </ul> in <ol> </ol> -

Du siehst, aus den runden Punkten sind Zahlen geworden.

5.2. Verschachtelte Listen           zurück zum Inhaltsverzeichnis

Man kann auch Listen innerhalb von Listen erzeugen.
Dazu setzt man innerhalb von <li> </li> einen weiteren ol- oder ul-TAG. Und dann wieder <li> </li>.

Beispiel zum Kopieren:

<ul>
                    <li>Text 1</li>
                    <li>Text 2 </li>
                    <li>
                    <ul>
                                <li> Eingerückter Text</li>
                    </ul>
                    </li>
</ul>

Diese Verschachtelung wirst du später beim Anlegen von Tabellen wieder finden.

Um weitere Listenformen zu erzeugen, brauchen wir wieder Attribute. Dies findest du im nächsten Kapitel, geneuer gesagt unter 6. Attribute und Parameter ... in Listen

6. Attribute und Parameter ...                 zurück zum Inhaltsverzeichnis

Wie gesagt, können alle TAGs Attribute mit Parametern bekommen.

Wenn du mit einem guten Html-Editor arbeitest, öffnet sich ein Fenster mit den passenden Attributen, wenn du hinter den Namen des TAGs ein Leerzeichen eingibst (, also vor der schließenden Spitzklammer!).

Information Im Internet gibt es sehr viele Seiten, die die Html-TAGs, die Attribute und die Parameter auflisten.
Solche Seiten nennt man Referenzen. Eine schöne Referenz findest du hier:
http://www.barrierefreies-webdesign.de/referenz/Html-elemente.html

6.1 ... im body-TAG         zurück zum Inhaltsverzeichnis

Das Attribut bgcolor="" setzt du sinnvoller Weise in den body-TAG, denn es färbt den Hintergrund (background) der Seite ein.

21. Aufgabe Füge in deine Seite in den body-TAG nach dem Wort "body" ein Leerzeichen und dann bgcolor="#dddddd" ein.

Du siehst, deine Seite hat einen hellen Grauschleier bekommen. So sieht sie erstens schicker aus (finde ich jedenfalls) und zweitens lässt sich Schrift so ermüdungsfreier lesen. (Das ist bewiesen!).

22. Aufgabe Probiere es aus!

6.2. ... im p-TAG               zurück zum Inhaltsverzeichnis

Bei allen p-TAGs

passt das Attribut align="", das als Parameter center/right/left haben kann.
Beispiel: <p align="right">
Dieser Absatz steht rechtsbündig.

.

23. Aufgabe Füg folgende Zeile in deine Datei ein und schau dir das Ergebnis im Browser an:
<p align="center"> Dieser Text steht zentriert</p>

24. Aufgabe Änder "center" in "right" und schau erneut (Speichern und aktualisieren nicht vergessen!)

Du siehst, das Attribut align="" steuert über seinen Parameter die Ausrichtung des Textes.

Zurück zu: 2.1 Absatzformate

6.3 ... im hr-TAG (Linie)              zurück zum Inhaltsverzeichnis

Hier die Attribute und Parameter für die Querlinie:

25. Aufgabe Probier alle Attribute mit verschiedenen Parametern aus.

Zurück zu: 6. 3 Linie

6.4 ... im font-Tag      zurück zum Inhaltsverzeichnis

Hier noch einmal die Attribute und Parameter für die Schriftgestaltung mit <font> </font>:

face="" (Schriftart)
size="" (Schriftgröße)
color="" (Farbname oder Zahlencode mit Raute vorweg)

Zurück zu: Textformate

6.5 ... im img-TAG            zurück zum Inhaltsverzeichnis

Der img-TAG benötigt immer das src Attribut src="", weil der Browser den Hinweis braucht, wo das Bild zu finden ist.
Hier lohnt es sich einigen genauere Überlegungen zum Aufbau deiner Homepage anzustellen.

Wenn du mehrere Dateien und mehrere Bilder in deiner Homepage verbinden willst, dann solltest du diese in getrennten Ordner "verwalten". Dann musst du natürlich dem Browser sagen, wo die verlinkte Datei oder das verlinkte Bild "steckt".
Bleiben wir beim Bild:
Wenn du von dem "Grund-Ordner" deiner Homepage, dem Ordner, wo deine "index.htm" liegt, in einen Unterordner, sagen wir "BILDER" verlinken willst, sieht der Link für das Bild "foto1.jpg" so aus:
<img src="BILDER/foto1.jpg">

Hast du von einer Datei, die im Unter-Ordner "AKTUELLES" liegt, auf ein Bild verlinkt, sagen wir "foto2.jpg",
so musst du zunächst mit "../" in den höheren Ordner wechseln, um dann in der Unter-Ordner "BILDER" zu gehen.
<img src="../BILDER/foto2.jpg">

Das gleiche gilt übrigens für die Verlinkung von Dateien mit <a href="">

Näheres dazu findest du unter 7. Links.

Für das Einstellen der Größe von Bildern benötigt man die Attribute height="" und width="". Sie stellen die Höhe und Breite des Bildes ein. Du machst die Angaben in "px" (Pixel).
Eine ordentliche Darstellung von Bildern erreichst du in der Regel mit height- und width-Werten von 100 bis 200px.

26. Aufgabe Stell die Größe deines Bildes mit dem Attribut height="200px" ein.

Du siehst, das Bild verändert seine Größe (wenn du nicht zufällig ein Bild mit einer Höhe von 200 Pixeln ausgewählt hattest!). In der Regel brauchst du nur eine Angabe, entweder height oder width, da sich das Bild in der jeweiligen anderen Größe anpasst.
Wenn du beide Attribute angibst, kannst du das Bild verzerren. Das macht allerdings nur in den wenigsten Situationen einen Sinn.

Zurück zu: Bilder

6.6 ... in Listen                   zurück zum Inhaltsverzeichnis

TAG

Attribut

Parameter

Bedeutung

<ul> </ul>

type=""

square

Quadrat

circle

Kreis

disc

Punkt

<ol> </ol>

type=""

Z.B. 1

Ziffern

I, i

röm. Ziffern

A, a

Buchstaben

start=""

Z.B. 5

Beginnt Zählung bei 5

<li> </li>

value=""

Z.B. 3

Beginnt Zählung bei 3

27. Aufgabe Kopier diese Liste in deinen HTML-Code und gestalte sie mit den passenden Attributen und Parametern. Hilfe: Denke an <li>!

  1. Sachbücher
  2. Belletristik
  3. Zeistchriften
  4. Lexika
  5. Wörterbücher

Zurück zu: Listen

6.7 ...in Tabellen                zurück zum Inhaltsverzeichnis

TAG

Attribut

Parameter

Bedeutung

<table>

border=""

z.B. 5

Dicke der Rahmen

bgcolor=""

Farbname oder Raute + Farbcode

Hintergrundfarbe

width=""

Zahl In Prozent oder Pixeln

Breite auf der Seite

height=""

Zahl In Prozent oder Pixeln

Höhe auf der Seite

<tr>

bgcolor=""

Farbname oder Raute + Farbcode

Hintergrundfarbe

align=""

left, right, center

Ausrichtung horizontal

valign=""

top, middle, bottom

Ausrichtung vertikal

height=""

Zahl In Prozent oder Pixeln

Höhe der Zeile

<td>

bgcolor=""

Farbname oder Raute + Farbcode

Hintergrundfarbe

align=""

left, right, center

Ausrichtung horizontal

valign=""

top, middle, bottom

Ausrichtung vertikal

width=""

Zahl In Prozent oder Pixeln

Breite der Spalte

 

Zurück zu Tabellen

 

7. Links                  zurück zum Inhaltsverzeichnis

"Link" heißt "Bindeglied" oder auch "Verbindung/Verknüpfung".

Wenn man mit der Maus auf einen Link klickt, wechselt die Bildschirm-Ansicht zu der Stelle, mit der der Link verknüpft ist. So funktioniert auch auf dieser Seite die Verbindung zwischen Inhaltsverzeichnis am Anfang und den einzelnen Kapiteln.
Links waren ursprünglich, als das Internet noch fast nur aus Text bestand, blau geschrieben und unterstrichen.
Heute findet man allerdings diese Form kaum noch. Entweder sind diese Verknüpfungen andersfarbig gestaltet, wie auf diesen Seiten, oder hinter einem Bild o. ä. "versteckt".

7.1 Links innerhalb der Seite                   zurück zum Inhaltsverzeichnis

Es gibt 3 Sorten von Links:

1. Links zu einer anderen Stelle auf derselben Seite. (Folgt als Nächstes)
2. Links zu einer anderen Seite, die zur Homepage gehört. Klick, um dorthin zu gehen.
3. Links zu einer anderen Homepage im Internet (sog. externe Links) Klick, um dorthin zu gehen.

Bei kleineren Homepages lohnt es sich nicht, mehrere Dateien herzustellen und miteinander zu verlinken. So besteht eine derartige Homepage nur aus einer Datei, die allerdings meist nicht vollständig im Browser angezeigt werden kann. Man muss also scrollen.

Will man dem User behilflich sein (so wie ich mit dem Inhaltsverzeichnis dieser Broschüre), legt man zu Anfang der Seite ein kleines Inhaltsverzeichnis an und verlinkt/verweist von dort zu Textstellen weiter unten auf der Seite.
So entfällt das Scrollen.

Das geht so:

Zunächst einmal legst du die Stelle fest, wohin gesprungen werden soll. Diese Stelle heißt Textmarke, Sprungmarke oder Anker. Im Englischen Anchor.

28. Aufgabe Füg in deine Datei viele p-TAGs vor </body> ein. Du musst einen Buchstaben zwischen <p> und </p> setzen, damit der Browser den Absatz erkennt. Wenn du die Seite im Browser anschaust, sollte rechts ein Scrollbalken erscheinen. Wenn nicht, hast du noch nicht genug Absätze eingefügt.

29. Aufgabe Füg nun in einen der letzten Absätze zwischen <p> und </p> folgenden TAG ein:
<a name="Anker"> Sprungziel </a>. Für "Anker" kannst du jedes beliebige Wort verwenden. Es ist sinnvoll, ein Wort, das von <a> </a> umschlossen ist, zu benutzen (hier "Sprungziel"). Das Anker-Wort darf allerdings keine Umlaute oder "ß" enthalten. Du kannst die Sprungziele natürlich auch einfach durchnummerieren.

30. Aufgabe Nun der eigentliche Link. Wie gesagt, hast du oben auf der Seite ein Inhaltsverzeichnis. Um jeden Punkt des Inhaltsverzeichnisses setzt du auch den a-TAG. Also:
<a href="#Anker"> 1. Punkt des Inhaltsverzeichnisses</a> (Kopieren und oben auf deiner index.htm gleich nach dem body-TAG einfügen!)

Du siehst: Jetzt bekommt der a-TAG ein anderes Attribut: href="". Dieses Attribut bedeutet "Hyperlink-Referenz".

Als "Hyperlink" bezeichnet man diese Technik: eben zwei Textstellen so zu verknüpfen. Heute sagt man einfach "Link" und "verlinkt".

Der Parameter bezieht sich auf ein Sprungziel / den Anker auf derselben Seite. Damit der Browser das erkennt, bekommt der Parameter eine Raute (#) vorweg.

Nun klick einfach auf den Link. Die Seite wird nach unten gescrollt und dein Anker ist oben oder ziemlich weit oben auf dem Bildschirm.

Der Hyperlink oder einfach Link erscheint in der Regel in blauer Schrift und ist unterstrichen. Wenn du ihn angeklickt hast, ändert er seine Farbe.

7.2 Links zu einer anderen Seite der Homepage           zurück zum Inhaltsverzeichnis

Und nochmall: Es gibt 3 Sorten von Links:

1. Links zu einer anderen Stelle auf derselben Seite. Klick, um dorthin zu gehen.
2. Links zu einer anderen Seite, die zur Homepage gehört. (Folgt als Nächstes)
3. Links zu einer anderen Homepage im Internet (sog. externe Links) Klick, um dorthin zu gehen.

Häufig stellt man mehrere Dateien zu einer Homepage zusammen. In Homepage-Programmen wird das oft "Projekt" genannt.

Um auf eine andere Datei zu verweisen/verlinken, benötigen wir den a-TAG mit dem Attribut "href".

ein Link/Verweis auf die Datei "seite2.htm" einer Homepage könnte also so aussehen:

<a href="seite2.htm">Zur 2. Seite</a>

Du kannst also sowohl einen anderen Dateinamen wählen als auch den Text zwischen <a> </a> frei wählen, wie wir schon geklärt haben.

Damit dieser Link funktioniert, müssen beide Dateien im gleichen Verzeichnis/Ordner liegen!

Bei größeren "Projekten" legt man aber oft Unterordner an. So findet man oft den Ordner "BILDER", oder einzelne Themenbereiche werden abgeteilt.
Sollte dies der Fall bei dir sein, musst du in die href-Angabe den Pfad mit angeben. Also z. B.

<a href="BILDER/bildergalerie.htm">Zur Bildergalerie</a>

Beachte:

1. Die Ordner- und die Dateinamen müssen richtig geschrieben sein. Groß- und Kleinbuchstaben werden unterschieden.

2. Der von Windows bekannt Backslash "\" wird im Internet grundsätzlich durch "/" (=Slash) ersetzt!

Willst du von der Seite "bildergalerie.htm" z. B. wieder zur Indexseite "index.htm" zurück, musst du ja aus "BILDER" wieder heraus!
Um also wieder eine Stufe höher in den Verzeichnissen/Ordnern zu gehen, fügst du "../" (zwei Punkte und ein Slash) ein. Auf der Bildergalerie-Seite müsste also folgender Link stehen:

<a href="../index.htm">Zur Startseite</a>

Willst du "um die Ecke", sieht es so aus:

<a href="../STADTPLAN/stadtplan.htm">Zum Stadtplan meiner Heimatstadt</a>

Hier gehst du also aus dem Unterverzeichnis/-ordner heraus, eine Ebene höher (../) und dann wieder eine Stufe runter in den Ordner "STADTPLAN".

31. Aufgabe Bau eine Ordnerhierarchie (Hierarchie bedeutet hier: Ober- und Unterordner), wie das Bild zeigt. Ordnerhierarchie

32. Aufgabe Erstell in "BILDER" eine Datei "bildergalerie.htm".

33. Aufgabe Füg in die Datei ein Bild deiner Wahl mit den bekannten TAGs ein.

Denk daran: Dieses Bild muss im Ordner "BILDER" liegen!

34. Aufgabe Erstell in "STADTPLAN" eine Datei "stadtplan.htm, in die du als Bild einen Stadtplan aus dem Internet mit den bekannten TAGs einbindest."

Denk daran: Das Bild des Stadtplans muss im Ordner "STADTPLAN" liegen!

Du kannst die a-TAGs selbst schreiben (das übt!) oder von dieser Seite (oben) kopieren.

Na, klappen die Links?

7.3 Links zu einer anderen Homepage im Internet                   zurück zum Inhaltsverzeichnis

Und nochmal: Es gibt 3 Sorten von Links:

1. Links zu einer anderen Stelle auf derselben Seite. Klick, um dorthin zu gehen.
2. Links zu einer anderen Seite, die zur Homepage gehört. Klick, um dorthin zu gehen.
3. Links zu einer anderen Homepage im Internet (sog. externe Links) (Folgt als Nächstes)

Auch hier benutzen wir wieder den a-TAG. Als Parameter für "href" tragen wir allerdings die gesamte Adresse der Internet-Seite ein, auf die wir verweisen/verlinken. Das sieht dann z. B. so aus:

< a href="dietrich-schaeckermann.de " >Zur Homepage des Autors</a>

Willst du auf eine E-Mail-Adresse verweisen, schreibst du mailto: und dann direkt daran - ohne Leerzeichen! - die E-Mail-Adresse. Das sieht dann z. B. so aus:

<a href="mailto:mail@dietrich-schaeckermann.de ">E-Mail an den Autor</a>

Information Nun noch etwas zu externen Links:

Jeder Homepage-Betreiber ist - natürlich - verantwortlich für die Richtigkeit und Rechtlichkeit seiner Homepage. Du darfst dort also nichts hineinbringen, was gegen die Gesetze verstößt, also z. B. keine Gewaltdarstellung, weder in Wort- noch in Bilderform! Du bist aber auch verantwortlich für die Homepages, auf die du verlinkst/verweist! Da du aber nicht ständig kontrollieren kannst, ob nicht jemand auf seiner Homepage, auf die du verweist/verlinkst, etwas Ungesetzliches veröffentlicht,

sei mit externen Links extrem vorsichtig!

Du wärest nicht der Erste, der zur Rechenschaft gezogen wird. Auch wenn du auf Seiten/Homepages von Firmen verweist, kann dir das bei Androhung einer Strafe verboten werden. Schon dieses Verbotsschreiben - eine so genannte Abmahnung - kann viele Geld kosten. Es gibt Anwälte, die mit solchen Abmahnungen ihr Geld verdienen!

8. Tabellen             zurück zum Inhaltsverzeichnis

Homepages sehen leider immer wieder unterschiedlich aus, je nachdem, in welchem Browser sie geladen werden. Um dem ein wenig abzuhelfen, bedienen sich viele Homepage-Hersteller einer Tabelle. Da passt sich die Tabelle, jedenfalls in der Breite, wenn man wil der jeweiligen Bildschirmbreite an.
Innerhalb der Tabelle behalten dann die Spalten - im Verhältnis zueinander (Prozentangaben!) - ihre Breite.

da die Tabellen auch unsichtbar sein können, merkt der Betrachter der seite gar nicht, das mit einer Tabelle gearbeite worden ist.
Außerdem kann man Tabellen innerhalb einer Tabelle(nzelle) gestalten.

8.1 Das Tabellen-Grundgerüst                zurück zum Inhaltsverzeichnis

- Tabellen werden mit dem table-TAG <table> </table> umschlossen.
- Innerhalb dieses TAGs baut man zunächst eine Zeile mit <tr> </tr> auf ("tr" für table row):
- Innerhalb der Zeile setzt man Zellen mit <td> </td> ein ("td"= table date).

Hier ein Beispiel:

<table>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

Setzt man eine 2. Zeile, muss man dort die Zellenanzahl aus der 1. Zeile wiederholen.
Da das Ganze sehr schnell unübersichtlich wird, sollte man mit Einrückungen arbeiten.

<table>
            <tr>
                        <td> </td>
                        <td> </td>
            </tr>
            <tr>
                        <td> </td>
                        <td> </td>
            </tr>
</table>

Solange in den Zellen nichts steht, erscheinen sie auch nicht auf dem Bildschirm. Deshalb fügt man in die Zellen ein Zeichen ein, wenn man die zelle sichtbar machen will. Willst du keine sichtbaren Zeichen, füg die Zeichenfolge & n b s p ; (ohne Leerzeichen!) ein.
In Programmen für HTML-Codierung1) Hier zwei kostenlose drückt man dazu in der Regel einfach die Tastenkombination [Strg/Leetaste].

Damit man die Gitterlinien der Tabelle erkennt, bekommt der table-TAG das Attribut border="".
Als Parameter setzt du eine Zahl, die die Breite des Randes in Pixeln beschreibt. Für einen Ein-Pixel-Rand genügt das Attribut ohne Parameter.

<table border="">
<tr>
<td>1. Zeile,1. Spalte</td>
<td>1. Zeile,2. Spalte</td>
</tr>
<tr>
<td>2. Zeile,1. Spalte</td>
<td>2. Zeile,2. Spalte</td>
</tr>
</table>

35. Aufgabe Kopier oben stehende Tabelle in deine Datei "index.htm" und schau sie dir im Browser an.

- Wenn du die ganze Tabelle ein wenig einfärben willst, um sie von der Seite abzuheben, füge in den TAG <table> das Attribut bgcolor="" mit einem Farbwert (z. B. "#eeeeee") ein.
- Um einzelne Zeilen einzufärben, z. B. die Zeilenköpfe, füge dasselbe Attribut in <tr>.
- Einzelne Zellen färbst du, wenn du das Attribut in den entsprechenden <td>-TAG einfügst.

Beispiel:

1. Zeile,1. Spalte

1. Zeile,2. Spalte

2. Zeile,1. Spalte

2. Zeile, 2. Spalte

Und hier der HTML-Code:

<table border="1" bgcolor="#aaaaaa">
<tr>
<td>1. Zeile,1. Spalte</td>
<td>1. Zeile,2. Spalte </td>
</tr>
<tr bgcolor="light#00ff00">
<td>2. Zeile,1. Spalte </td>
<td bgcolor="red">2. Zeile, 2. Spalte </td>
</tr>
</table>

36. Aufgabe Kopier den Code an Stelle der alten Tabelle in deine Seite und schau dir meine Farbgebung an.
Nun änder nach und nach die Farbwerte um, damit du siehst, wo sich was ändert.

Weitere Attribute und ihre Parameter findest du unter: Tabellen: Attribute und Parameter ... in Tabellen

8.2. Verschachtelte Tabellen                   zurück zum Inhaltsverzeichnis

Du kannst auch Tabellen in Tabellen erzeugen. Das kann z. B. nützlich sein bei einem Stundenplan auf deiner Homepage.

Hier das Beispiel:

Stundenplan für Klasse R09a

Stunde

Montag

Dienstag

Mittwoch

Donnerstag

Freitag

1.

Mathe

Deutsch

Englisch

Physik

Chemie

Gültig bis (Datum)

Und hier der Code dazu:

<tableborder>
<tr>
<td>Stundenplan für Klasse R 09a</td>
</tr>
<tr>
<td>
<tableborder>
<tr>
<td>Stunde</td>
<td>Montag</td>
<td>Dienstag</td>
<td>Mittwoch</td>
<td>Donnerstag</td>
<td>Freitag</td>
</tr>
<tr>
<td>1.</td>
<td>Mathe</td>
<td>Deutsch</td>
<td>Englisch</td>
<td>Physik</td>
<td>Chemie</td>
</tr>
</table>
<tr>
<td>
(Gültig bis (Datum)</td>
</tr>
</table>

37. Aufgabe Kopier den Code der Tabelle in deine Seite und schau sie dir an.

38. Aufgabe Gib dem Stundenplan in seinem! table-TAG mit dem Attribut <bgcolor="#dddddd"> einen grauen Hintergrund.

39. Aufgabe Versuch nun, eine 2. Stunde in den Stundenplan einzubauen.

Zurück zu verschachtelte Listen.

8.3 Seitentabelle               zurück zum Inhaltsverzeichnis

Wie oben unter 8. Tabellen schon gesagt, lassen sich Seiten einer Homepage recht ordentlich mit einer sogenannten Seitentabelle für alle Browser gestalten. Diese Tabelle sollte für den User unsichtbar sein. In diese Seitentabelle kannst du dann, bei Bedarf, wiederum Tabellen eingebauen.

Seitentabellen haben außerdem den Vorteil, dass man so alle Seiten einer Homepage im Layout gleich oder ähnlich aussehen lassen kann. Man kopiert dafür das Grundgerüst der Tabelle jeweils in die neue Seitendatei.

Viele Seiten sind heute - oft eben mit einer Seitentabelle - im Layout ähnlich. Man hat:

  1. eine Kopfzeile,
  2. eine Zeile, die den Hauptteil der Informationen enthält,
  3. eine Fußzeile.

Üblicherweise sie die drei Zeilen in drei Spalten eingeteilt:

  1. eine schmale Spalte links, die die Links zu den Folgeseiten enthält,
  2. die Hauptspalte, die die eigentlichen Informationen der Seite enthält.
  3. eine rechte schmalere Stalte, in der z. B. Werbung, Diashows oder ähnliches ablaufen.

So könnte die Seitentabelle für deine Homepage aussehen:

Logo oder
Bild von dir

Titel deiner Homepage

Aktuelles

Links zu
weiteren
Seiten

Hauptseite deiner Homepage

Neuestes
vom Fußball

Diese Seite wurde --- mal besucht.

Externer Link
z.B. zum Wetter
an deinem Heimatort

Ich habe die Ansicht verkleinert und der Tabelle einen Rahmen gegeben, damit du das Layout besser durchschaust.
Die Zeilen-Umbrüche in den Zellen habe ich einfach mit <br> erzeugt.
Schwierig bei der Sache ist vor allem, dass die Angaben für die Breiten der Spalten "gesprengt" werden, wenn du etwas in die Zelle einfügst, dass größer ist als die Breitenangabe. Wenn du z. B. für die Breite der 1. Spalte 10% angegeben hast, die Gesamtbreite deiner Tabelle (und damit Seite!) auf 1024px gesetzt hast, darf dein Bild, das du dort von dir einsetzt, nur 102px (= 10% von 1024px) breit sein. Sonst verschiebt sich alles!

Leider gibt es heute bei den Bildschirmen verschiedenste Auflösungen. Am häufigsten finde man allerdings 1024 Pixel Breite.
Willst du deine Homepage optimal an diese Breite anpassen, solltest du diesen Wert als Parameter in das width-Attribut eintragen.

Damit die Seite bei anderen Auflösungen schön mitttig steht, empfiehlt es sich, das align-Attribut auf "center" zu stellen.

Wenn du dich auf diese Seitengröße beschränkst, hat das Vor- und Nachteile.

  1. Vorteil: Du kopierst für weitere Seiten deiner Homepage einfach die Seitentabelle und erzeugst so für alle Seiten das gleiche Aussehen = Layout.
  2. Vorteil: Du bist gezwungen, genau zu überlegen, wie viel Informationen auf deine Seite sollen. So wirkt sie nicht so überfrachtet.
  3. Vorteil: Wenn du dich nach unten hin auch beschränkst, fallen die Scollbalken weg und der User braucht auch kein Scrollrad. Das ist für die Übersichtlichkeit wichtig. So hat der User nicht immer das Gefühl, irgendetwas auf der Seite übersehen zu haben.

40. Aufgabe Setz in der Seiten-Tabelle den border-Parameter auf "0".

41. Aufgabe Spiel ein bisschen mit verschiednenen Attributen in der Seiten-Tabelle. Du kannst z. B. auch den Spalten verschiedene Farben mit dem bgcolor-Attribut zuweisen, damit sich die Aufgaben der Spalten deutlicher voneinander abheben.l

42. Aufgabe Füge in die "Hauptzelle" (= 2. Spalte/2.Zeile) eine weitere kleine Tabelle ein oder kopiere den Stundenplan dort hinein. So kannst du die Wirkung der Seiten-Tabelle gut abschätzen.

8.4 Komplexe Tabellen gestalten            zurück zum Inhaltsverzeichnis

Nun wieder zurück zu den Tabellen innerhalb einer Seite.

Manchmal möchte man sie komplexer gestalten, d. h. in einer Zeile sollen mehrere Spalten zusammengefasst werden, oder in einer Spalte mehrere Zeilen.

Hier ein Beispiel:

Jahrgang

Niederschläge

Sonnenscheindauer

Sommer

Winter

Sommer

Winter

2000

320

290

900

680

2007

280

320

1200

450

So sieht diese Tabelle in Html aus:

<table border="1">

<tr>
<td rowspan="2">Jahrgang</td>
<td colspan="2">Niederschläge</td>
<td colspan="2">Sonnenscheindauer</td>
</tr>

<tr>
<td>Sommer</td>
<td>Winter</td>
<td>Sommer</td>
<td>Winter</td>
</tr>

<tr>
<td>2000</td>
<td>320</td>
<td>290</td>
<td>900</td>
<td>680</td>
</tr>

<tr>
<td>2007</td>
<td>280</td>
<td>320</td>
<td>1200</td>
<td>450</td>
</tr>

</table>

43. Aufgabe Kopier diese Tabelle in deine "index.htm".

Nun musst du die Zellen noch zentriert stellen. Das kannst du mit align="center" in der Zeile (<tr>) erledigen.

44. Aufgabe Schreib in jedes <tr> ein align="center".

Willst du nur einzelne Zellen anders ausrichten, steht das align="" im td-TAG.

45. Aufgabe Schreib in den TAG <tr> für die Jahreszahlen align="right".

Willst du die Kopfzeile als Überschriftenzeile farbig gestalten?

46. Aufgabe Schreib in den tr-TAG bgcolor="" und dort hinein einen Farbwert (z. B. #dddddd).

Wie du an der Zelle mit de Wort "Jahrgang" sehen kannst, stellt Html den Zelleninhalt immer mittig zwischen die obere und untere Begrenzung. Das ist anders als in z. B. Word, wo die Inhalte immer am oberen Rand "kleben", wenn man es nicht besonders formatiert.

Willst du nun die Zelleninhalte nach oben oder nach unten setzen, benutze das Attribut valign="" mit den möglichen Parametern "top, middle, bottom".

Information Tabellen sind also sehr vielseitig, aber auch entsprechend kompliziert zu programmieren.
Besonders komplex wird es, wenn man Tabellen ineinander schachtelt.

Information Spätestens hier lohnt es sich, erklärenden Text als Kommentar in die Programmierung einzugeben.
Dieser Kommentar soll natürlich nicht im Browser erscheinen, sondern nur für den Programmierer sichtbar sein. Du kannst dies erreichten, wenn du deinen Kommentar in folgende Zeichen einkleidest.
<!-- Kommentartext -->
In "richtigen" HTML-Editoren1)gibt es meist einen Menüpunkt "Kommentar" oder eine entsprechende Tastenkombination. In den Editoren, mit denen ich arbeite (siehe unten bei 1)), ist das die Tastenkombination [strg/#].

9. Grafik als Link "Knöpfe"                    zurück zum Inhaltsverzeichnis

Auf modernen Homepages findest du in der Regel kaum noch einfache Links, also Textzeilen, die - blaue Schrift und unterstrichen - auf eine andere Seite verlinken.

Du weißt, um auf eine andere Seite (z. B.) zu verlinken/verweisen, benutzt man den TAG <a> </a>.
Wenn du jetzt ein Bild zwischen <a> </a> einsetzt, kommst du durch einen Klick auf das Bild zur verlinkten Seite.

47. Aufgabe Füge den Code:
<a href="irgendeineSeite.htm" > <img src="(Name des Bildes mit seiner Kennung, z. B. jpg oder gif)" ></a> in deine index-Seite ein.

Denke daran, dass die Seite und das Bild im selben Ordner liegen müssen wie deine index-Seite, oder du baust entsprechende Pfade in href="" beziehungsweise src="" ein.

Verwendest du größere Bilder, lassen sich sogar Teile davon Verlinken. Das ist besonders dann interessant, wenn du Teile einer grafischen Übersicht, z. B. einer Mindmap, mit Seiten verlinken willst. Das zu erklären, würde aber diese kleine Einführung, und das soll sie bleiben, überfordern.

10. Weitere TAGs            zurück zum Inhaltsverzeichnis

Damit sind wir am Ende angekommen, denn diese Seiten sollen ja nur eine Einführung in Html geben. Es gibt noch drei wichtige TAGs, die aber über eine Einführung hinausgehen.

Mit <form> </form> fragst du also den User nach bestimmten Informationen und der User gibt dir Antwort. Dies geschieht oft als E-Mail.
Da so auf der Seite deine E-Mail-Adresse steht, musst du dich nicht wundern, wenn du bald viel Spam-Mails bekommst, denn die "Spammer" haben Programme, die automatisch E-Mail-Adressen aus Homepages auslesen. Also habe ich mich entschlossen, den Form-Tag gar nicht erst zu beschreiben. Wenn du deine E-Mail Adresse auf deiner Seite anzeigen willst, solltest du das in Form eines Bildes tun: Informationen in Bildern können selbst die besten Programme - noch - nur sehr bedingt auslesen. Zu dem Form-TAG gibt es noch eine Fülle von weiteren TAGs, die ich aber hier auch nicht weiter erläutern will.

 

Ende

11. Referenz zurück zum Inhaltsverzeichnis

Folgende TAGs und ihre Attribute wurden verwendet:
(Ein Klick auf den TAG / das Attribut führt zur ersten Erwähnung im Text)

 

TAGs

Attribute

Reihenfolge
wie im Text

alphabetisch

Reihenfolge
wie im Text

alphabetisch

<Html>

<a>

face=""

align=""

<head>

<b>

size=""

bgcolor=""

<title>

<body>

color=""

border=""

<body>

<br />

src=""

color=""

<p>

<div>

bgcolor=""

face=""

<h1>

<font>

align=""

height=""

<br />

<form>

width=""

href=""

<hr />

<h1>

noshade

name=""

<b>

<head>

height=""

noshade

<i>

<hr />

type=""

size=""

<u>

<Html>

start=""

src=""

<font>

<i>

value=""

start=""

<img>

<img>

valign=""

type=""

<ul>

<li>

border=""

valign=""

<li>

<p>

name=""

value=""

<a>

<span>

href=""

width=""

<table>

<table>

 

 

<tr>

<td>

 

 

<td>

<title>

 

 

<div>

<tr>

 

 

<span>

<u>

 

 

<form>

<ul>

 

 

Ein Link zu einer Referenz im Internet, sortiert nach Funktionen:
http://brauchbar.de/Html-4-referenz/tags-by-function

Probiere es aus!
Du weißt doch:
Es geschieht nichts Gutes, es sei denn: Man tut es!

1)Wenn du komfortabler arbeiten willst, solltest du dies mit einem HTML-Editor tun.
Hier die Adressen, wo du gute HTML-Text-Editoren kostenlos herunterladen kannst:
elsdoerfer.name/Htmlstudio
http://www.ftp-uploader.de/ftp-download.php. Hier musst du auf der Seite weiter nach unten scrollen.

Stand: 21.03.2013 © by Dietrich Schäckermann
Alle Texte sowie der Quellcode dürfen für private und schulische Zwecke unter Angabe des Copyrights kopiert und - auch verändert - benutzt werden.