Grundkurs HTML; Autor: Dietrich Schäckermann

Ein kurze Einführung in HTML
die Programmiersprache für Internetseiten

@R09b: Ich habe den Fehler beim font-TAG gefunden
Nach "Arial" habe ich falsche Anführungszeichen gesetzt. Ist aber jetzt berichtigt. Sorry!

0. 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 beide Begriffe 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.“[1]

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 den Ordner „HOMEPAGE“ gehst und dort die Datei „index.htm“ doppelklickst.

8. Aufgabe Du siehst, der eingegebene Text erscheint im Browser, der Html-Code nicht.

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

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 SchließTAGs haben also immer denselben Namen, ein Slash (/) steht vorweg.

1. Die Seite gestalten zurück zum Inhaltsverzeichnis

Zunächst:

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

2. 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 Drück am Ende des Satzes Dies ist meine erste Seite 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. Der Absatz, den du in deiner Datei 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. <br /> (br steht für Englisch break.)

Mit diesem TAG erzeugst du einen Zeilenumbruch innerhalb eines Absatzes.

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

Speichern – aktualisieren – anschauen.

Du siehst, der Text wird 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>und</body.

Speichern – aktualisieren – anschauen.

Du kannst die Absätze noch weiter gestalten. Näheres findest du unter

5. Attribute und Parameter.

3. mit Linien zurück zum Inhaltsverzeichnis

Hier noch ein weiterer TAG, mit dem du deine Seite gestalten kannst. <hr>. Dieser Tag zieht eine Linie quer über die Seite. Wie du die Linie gestalten kannst, findest du unter
5. Attribute und Parameter.

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 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!

4. Textformate zurück zum Inhaltsverzeichnis

Teile des Textes innerhalb eines Absatzes formatierst du mit:

· <b></b> für fett

· <i></i> für kursiv

· <u></u> für unterstrichen

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. Genaueres dazu erfährst du unter dem Punkt „5. Attribute und Parameter“.

Attribute bekommen wiederum Parameter. Das können alle möglichen Angaben sein. Ein Attribut sieht dann so aus: attr=" "

Beispiel im font-TAG: <font face="Arial"></font>. Attribute und ihre Parameter schreibe ich in Zukunft immer grün.

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

· size="12"

· color="#000000" oder

· color=“red“

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 und aktualisieren!

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 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.

Die 16 Farbnamen: aqua, gray, navy, silver, black, olive, green, teal, blue, purple, lime, white, fuchsia, red, maron, yellow.
Manche Farbnamen lassen sich auch noch mit “light” kombinieren, z.B. „lightgreen“.

6. Listen zurück zum Inhaltsverzeichnis

7. Listen erstellen zurück zum Inhaltsverzeichnis

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

· Einführung

· Die Seite gestalten mit

· Bilder auf die Seite

· Listen

· Attribute und Parameter

· Links auf die Seite

· Die Seite gestalten mit Tabellen:

· Besondere Programmierungen

· Grafik als Link

· Referenz

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.

8. 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>

<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 unter

5. Attribute und Parameter

9. 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

10. Body: Attribute und Parameter 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 an Stelle von <body> folgendes ein: <body 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!

11. Absätze: Attribute und Parameter zurück zum Inhaltsverzeichnis

Bei allen Absatz-TAGs <p> </p> passt das Attribut align=““, das als Parameter center, right und left haben kann. Beispiel: <p align=“right“>Dieser Absatz steht rechtsbündig.</p>.

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: Absatzformate

12. Linie mit <hr> zurück zum Inhaltsverzeichnis

Hier die Attribute und Parameter für die Querlinie:

· width=““ (Länge der Linie in Prozent der seitenbreite. Z. B. „60%“.)

· size=““ (Dicke der Linie in Pixeln. Z. B. „5“.)

· align=““ (Ausrichtung. Voreingestellt ist zentriert, Sinn macht also nur „right“ und „left“.)

· color=““ (Farbe für die Linie, entweder als Farbname oder als Code mit Raute vorweg.)

· noshade (Ein Attribut ohne Parameter. Sollte nicht mehr verwendet werden. Es nimmt den Schatten der Linie weg. Ohne dieses Attribut wirkt die Linie nämlich wie „eingesunken“. Probier es aus: <hr>. Und nun noshade als Attribut hinzufügen.

Zurück zu Linie

13. Textformate: Attribute und Parameter zurück zum Inhaltsverzeichnis

Hier noch einmal die Attribute und Parameter für die Schriftgestaltung:

· face="“ (Schriftart)

· size="" (Schriftgröße)

· color="" (Farbname oder Zahlencode mit Raute vorweg)

Zurück zu: Textformate

14. Bilder: Attribute und Parameter zurück zum Inhaltsverzeichnis

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.

25. 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.

Zurück zu: Bilder

15. Listen: Attribute und Parameter zurück zum Inhaltsverzeichnis

TAG	Attribut	Parameter	Bedeutung
<ul></ul>	type=””	square	= Quadrat
		circle,	= Kreis
		disc	= Punkt
<ol></ol>	type=““	1	= Ziffern
		I, i	= röm. Ziffern
		A, a	= Buchstaben
	start=““	Z.B. 5	Beginn bei 5
<li>	value=““	Z.B. 3	Beginn bei 3

Zurück zu: Listen

16. Tabellen: Attribute und Parameter 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
<tr>	bgcolor=““	Farbname oder Raute + Farbcode	Hintergrundfarbe
	align=““	left, right, center	Ausrichtung
	valign=““	Top, middle, bottom	Höhenlage
<td>	bgcolor=““	Farbname oder Raute + Farbcode	Hintergrundfarbe
	align=““	left, right, center	Ausrichtung
	valign=““	Top, middle, bottom	Höhenlage

Zurück zu Tabellen

17. Links zurück zum Inhaltsverzeichnis

18. 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.

3. Links zu einer anderen Homepage im Internet (sog. externe Links) zurück zum Inhaltsverzeichnis

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.

26. 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.

27. 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.

28. 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 <body> 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.

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

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

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

Es gibt 3 Sorten von Links:

1. Links zu einer anderen Stelle auf derselben Seite.

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)

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 auf Seite 6 geklärt haben.

Damit dieser Link/Verweis 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 „/“ 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“.

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

30. Aufgabe Erstell in „BILDER“ eine Datei „bildergalerie.htm“.

31. Aufgabe Füg in die Datei ein Bild deiner Wahl mit den bekannten TAGs ein.
Denk daran: Dieses Bild muss im Ordner „BILDER“ liegen!

32. 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?

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

Es gibt 3 Sorten von Links:

1. Links zu einer anderen Stelle auf derselben Seite.

2. Links zu einer anderen Seite, die zur Homepage gehört.

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!

21. Tabellen zurück zum Inhaltsverzeichnis

22. Das Tabellen-Grundgerüst 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.

· Tabellen werden mit dem table-TAG umschlossen.

· Innerhalb dieses TAGs baut man zunächst eine Zeile auf („tr“ für table row):

· Innerhalb der Zeile setzt man Zellen ein („td“= table date).

<table>

<tr>

</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>

</tr>

<tr>

</tr>

</table>

Solange in den Zellen nichts steht, erscheinen sie auch nicht auf dem Bildschirm. Damit man die Gitterlinien der Tabelle erkennt, bekommt der table-TAG das Attribut „border“.

Der Parameter im border-Attribut bestimmt die Dicke der Linie in Pixeln.

<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>

33. 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 den TAG <tr>. Einzelne Zellen färbst du, wenn du das Attribut in den entsprechenden <td>-TAG einfügst.

Beispiel:

<tr>

<td>1. Zeile,1. Spalte</td>

<td>1. Zeile,2. Spalte </td>

</tr>

<td>2. Zeile,1. Spalte </td>

<td bgcolor="red">2. Zeile, 2. Spalte </td>

</tr>

</table>

34. Aufgabe Kopiere 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

23. Verschachtelte Tabellen zurück zum Inhaltsverzeichnis

Du kannst auch Tabellen in Tabellen erzeugen. Das kann z. B. nützlich sein bei einem Stundenplan. Hier das Beispiel, verkleinert, damit die Zeilen in eine reihe passen. :

<tr><td>Stundenplan für Klasse</td><td>R09a</td></tr>

<tr>

<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>

<table>

35. Aufgabe Kopiere die Tabelle in deine Seite und schau sie dir an.

Zurück zu verschachtelte Listen.

24. Seitentabelle zurück zum Inhaltsverzeichnis

So kannst du auch eine Tabelle für die ganze Seite einer Homepage setzen, in die dann, bei Bedarf, wiederum Tabellen eingebaut werden.

So ist es also geschickt, die Größe der Seite, die im Browser angezeigt werden soll, mit einer diese Seite umfassenden Tabelle zu gestalten.

Gehe ich davon aus, dass meine „Kunden“ mit einer Bildschirmauflösung von 800 X 600 Pixeln arbeiten (ist heute Mindeststandard!) setze ich die Höhe und Breite der Tabelle auf eben diese Wert.

Damit die Seite bei feinerer Auflösung des Bildschirms (z.B. 1024X768) schön mittig steht, setze ich als Attribut noch align=““ mit „center“ als Parameter. Das sieht so aus.

36. Aufgabe Ergänz deine Tabelle um die obigen Attribute, → speichern → aktualisieren.

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

· Nachteil: Ein User mit besserer Bildschirmauflösung hat auf seinem Bildschirm nur eine recht kleine Seite zur Ansicht.

· Nachteil: Du bist recht beschränkt in der Menge der Informationen, die auf eine Seite passen.

· Vorteil: Du kopierst für weitere Seiten deiner Homepage einfach die Seitentabelle und erzeugst so für alle Seiten das gleiche Aussehen = Layout.

· Vorteil: Du bist gezwungen, genau zu überlegen, wie viel Informationen auf deine Seite sollen. So wirkt sie nicht so überfrachtet.

· 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.

37. Aufgabe Setz auf deiner „index.htm“ direkt nach dem <body> ein:
<table border=“1“ align=“center“ width=“600px“><tr><td>
und am Ende der Seite vor </body>
</td></tr></table>.

Nun lassen wir noch den Rand bei der Tabelle weg, die die ganze Seite umfasst.

38. Aufgabe Setz in der seitenumfassenden Tabelle den border-Wert auf „0“.

25. 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
Jahrgang	Sommer	Winter	Sommer	Winter
2000	320	290	900	680
2007	280	320	1200	450

Schon ganz schön kompliziert, nicht?!

So sieht diese Tabelle in Html aus (verkleinert, damit’s in eine Reihe passt):

<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>

</table>

39. Aufgabe Kopier diese Tabelle in deine „index.htm“.

Noch sieht die Tabelle im Browser nicht genau so aus wie in Word. Du musst die Zellen noch zentriert stellen. Das kannst du mit align=“center“ in der Zeile (<tr>) erledigen.

40. Aufgabe Schreib in jedes <tr> ein align=“center“.

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

41. Aufgabe Schreib in den TAG <td> für die Jahreszahlen align=“right“.

Willst du die Kopfzeile als Überschriftenzeile farbig gestalten,

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

Wie du an den Jahreszahlen 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.

26. 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 <a>TAG.

Wenn du jetzt ein Bild zwischen <a></a> einsetzt, kommst du durch einen Klick auf das Bild zur verlinkten Seite.

43. 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 Seite ein.
Denke daran, dass das Bild im selben Ordner liegen muss wie deine Seite!

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.

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.

· <div></div> Steckt eine Bereich auf deiner Seite ab, dem du nun als Ganzes viele Attribute zuordnen kannst. Versuch es z. B. einmal mit align=““.

· <span></span Dasselbe gilt für diesen TAG.

· <form></form> umschließt ein Formular, mit dem der Besucher deiner Homepage dir Informationen zusenden kann. Du fragst 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 – nicht 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

Die TAGs und Attribute

TAGs Reihenfolge im Text	TAGs Reihenfolge alphabetisch	Attribute Reihenfolge im Text	Attribute Reihenfolge alpabetisch
<html>	<a>	face=""	face=""
<head>	<b>	size=""	align=""
<title>	<div>	color=""	bgcolor=""
<h1>	<font>	src=""	border=""
<b>	<form>	width=""	color=""
<i>	<h1>	align=""	face=""
<u>	<head>	noshade	height=""
<font>	<html>	face=""	href=""
<img>	<i>	type=""	name=""
<ul>	<img>	start=""	noshade
<li>	<li>	value=""	size=""
<table>	<span>	border=""	src=""
<tr>	<table>	bgcolor=""	start=""
<td>	<td>	width=""	type=""
<a>	<title>	valign=""	valign=""
<div>	<tr>	name=""	value=""
<span>	<u>	href=""	width=""
<form>	<ul>	height=""	width=""

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

[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:

http://elsdoerfer.name/htmlstudio

http://www.phase5.info/

Der „Elsdörfer“ heißt HTML-Studio und ist moderner.

@R09b: Ich habe den Fehler beim font-TAG gefunden Nach "Arial" habe ich falsche Anführungszeichen gesetzt. Ist aber jetzt berichtigt. Sorry!

@R09b: Ich habe den Fehler beim font-TAG gefunden
Nach "Arial" habe ich falsche Anführungszeichen gesetzt. Ist aber jetzt berichtigt. Sorry!