Webseiten Quick'n easy
<h1>eine große Überschrift</h1>
Hier steht ein Blindtext, der einfach nur Text sein darf.
Hier steht ein Blindtext, der einfach nur Text sein darf.
Hier steht ein Blindtext, der einfach nur Text sein darf.
Wir haben also zwei h1 in spitzen Klammern. Diese Kombination -
etwas in zwei spitzen Klammern: <irgend etwas> - nennt
man Tag. Unsere zwei Tags hier: <h1> und </h1> zeigen an, daß
alles, was zwischen den beiden steht, als Überschrift angezeigt
werden soll (h kommt vom englischen Heading).
Die beiden Tags
haben spezielle Namen: das erste
nennt man das Begin- oder Start-Tag, das zweite das End-Tag.
Start- und End-Tags unterscheiden sich darin, daß im End-Tag ein
Schrägstrich (/) vor dem Namen des Tags steht.
Unser Beispieltag hat also den Namen
h1. Vor dem h1 im hinteren Tag steht ein / und markiert so das
Ende unserer Überschrift: <h1> </h1>
Alles, was zwischen den beiden Tags steht, wird damit in der
Struktur des Dokumentes als Überschrift markiert. In unserem Fall
ist das der Text: "eine große Überschrift".
Um Farbe und besonderes Aussehen, sowie Ränder und Absätze kümmert
man sich später, als Erstes muss die Struktur unseres Dokumentes
stehen.
Der Anfang
Wir fangen einfach und unspektakulär an und steigern uns
später. Zuerst
sehen wir uns ein HTML-Dokument an, danach sehen wir uns Schritt
für Schritt an, wie man
dieses erstellen kann. Unser erstes Dokument (zugegeben, noch etwas
nackt, aber das ändern wir schnell):
<html>
<head>
<title>Mein erstes Dokument</title>
</head>
<body>
<h2>Meine Seite</h2>
Ich begrüße Sie auf meiner Webseite.
<p>
Als erstes möchte ich mich vorstellen:
</p>
Mein Name ist ...<br>
ich bin ....<br>
</body>
</html>
In einem einfachen HTML-Dokument finden wir als erstes ein
<html> und als letztes ein </html>. Diese zeigen an: Hier
beginnt mein
HTML-Dokument - hier endet es. Alles dazwischen soll unser
Webbrowser als Webseite betrachten.
Weiterhin finden wir einen Bereich, der mit <head> und </head>
markiert ist. Hier werden Zusatzinformationen zum Dokument
eingetragen, wie zum Beispiel ein Titel.
Der Titel ist der Text, den
man im Rahmen eines Fensters findet. Auf unserem Bild oben links im
blauen Rahmen vom Webbrowser-Fenster. Markiert wird er mit den Tags:
<title> und </title>. Vorsicht Falle! Es heißt tatsächlich
title! Das Tag kommt ausschließlich im Kopf-Bereich unseres
Dokumentes vor (also zwischen <head> und </head>), niemals an
anderen Stellen.
Informationen im HEAD-Bereich (also alles, was zwischen <head>
und</head> steht) werden auf der Webseite selbst nicht
direkt dargestellt und angezeigt.
Alles, was zwischen <body> und </body> steht, wird von
unserem Webbrowser angezeigt. Wir sehen also, daß wir bei einem
HTML-Dokument nur sagen, welche Funktion ein bestimmter Text hat.
Für die Darstellung ist dann der Webbrowser zuständig. Der muß
wissen, wie er eine Überschrift darstellt.
Im Bild rechts sieht man den Quelltext der Webseite. Der
Kopfbereich wurde grau eingefärbt, der Body (das, was letztendlich
den darstellbaren Inhalt enthält) rot.
Step by Step zur ersten Seite
als erstes schaffen wir uns eine kontrollierte Übungs- und
Lernumgebung.
Wir benötigen:
1. Einen Webbrowser (z.B. Firefox, InternetExplorer...).
2. Ein möglichst einfaches Text Programm, welches uns erlaubt ganz
simplen Text abzuspeichern, z.B.
vi, emacs, WordPad. Empfehlung für KDE-Benutzer (Linux): Kate.
HTML-Editoren, die einem den HTML-Code anzeigen, sind ebenfalls geeignet.
In der Vergangenheit oft nicht geeignet
waren: Microsoft Word, Frontpage. Hier gab es immer wieder Probleme
bei der korrekten Anzeige und Speicherung der Dokumente (Pfad und
Dateinamen).
Auch OpenOffice sollten nur geübtere Anwender nutzen,
da auch hier ohne weiteres Zutun kein HTML-Code angezeigt wird,
sondern die fertig gelayoutete Seite - und das ist eigentlich genau
das, was wir lernen wollen...
Wir öffnen als erstes unseren Texteditor und schreiben hier
unsere Webseite. Im Office-Paket wurde in diesem Schritt
einfach ein leeres Textdokument angefordert und der besseren
Lesbarkeit halber die Schriftart auf eine Courir-Schrift
gestellt.
Als nächstes speichern wir unser Dokument als Text. Bitte merken
wo und unter welchem Namen!
Der Name des Dokumentes sollte nur aus Buchstaben, Zahlen,
Unterstrichen und Bindestrichen bestehen (Keine Leerzeichen,
keine Sonderzeichen!) und die Endung .html haben.
Die Benutzer von Officepaketen achten hierbei bitte auf Folgende Punkte:
Das Dokument explizit als Text-Dokument speichern.
Die automatische Namenserweiterung ausschalten. Den kompletten Namen
mit .html am Ende angeben.
Um jetzt unsere Arbeit zu kontrollieren, öffnen wir die
abgespeicherte .html-Datei im Webbrowser. Wer seine Datei auf
dem Desktop abgelegt hat, kann dies meist durch Doppelklick
erreichen. Ansonsten findet man die entsprechende Funktion
im Webbrowser unter 'Datei' -> 'File öffnen'. Datei auswählen und
anzeigen lassen.
Das Ergebnis sollte jetzt etwa so aussehen:
*GRATULATION* Sie haben Ihre erste eigene Webseite erstellt!
Überschriften
Im Folgenden schauen wir uns eine ganze Reihe viel verwendeter
Tags an. Probieren Sie die Beispiele am Besten immer gleich mit
aus!
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>
Wir beginnen mit einer Überschrift. Diese heißt h2. Unsere
Browser kennen 6 Überschriftsgrößen: h1 bis h6, wobei h1 die
größte Überschrift ist und h6 die kleinste. Wie die Überschrift
genau aussehen soll, überlassen wir vorerst dem Webbrowser.
Alles, was zwischen <hx> und </hx> steht, wird vom
Webbrowser als Überschrift betrachtet und entsprechend
angezeigt.
Zeilenumbrüche, Absätze und Textblöcke
Unser Webbrowser schreibt so lange, bis die Zeile in
seinem Fenster voll ist und bricht nach Bedarf um. Deswegen
benötigen wir Tags um Text einfach in Absätze zu
unterteilen, allgemein zu gruppieren und einfache Zeilenumbrüche
anzuzeigen.
Einen einfachen Zeilenumbruch zeigen wir mit einem <br> an. Das
<br> ist eines der wenigen Tags, die ein Begin- aber kein End-Tag
haben.
Als nächstes haben wir Absätze. Diese werden mit einem <p>
angezeigt. Die meisten Browser starten neue Absätze mit einer
Leerzeile, also einen kleinen Abstand zum Text davor.
Das End-Tag ist
optional. Dies bedeutet, daß das End-Tag existiert und verwendet
werden darf, aber nicht verwendet werden muß.
Allerdings ist mit Blick auf aktuelle Entwicklungen die Verwendung
des End-Tags sehr zu empfehlen. Gewöhnen Sie sich das End-Tag am
besten gleich an, das wird Ihnen später - schon im nächsten Kapitel
- viele Nerven ersparen.
Manchmal ist es hilfreich, einen Text gruppieren zu können. Hirfür
bietet sich in vielen Fällen das Tag <div> an. Das End-Tag ist
verpflichtend.
Etwas Besonderes sei hier noch erwähnt: das <pre>-Tag. Alles, was
zwischen <pre> und </pre> steht, wird genau so dargestellt,
wie es im HTML-Dokument hinterlegt wurde. Dies trifft
Zeilenumbrüche und Leerzeilen. Ganz paktisch ist <pre> wenn man
etwas Abstand benötigt.
<html>
<head>
<title>Zeilenumbrüche und Absätze</title>
</head>
<body>
Wer reitet so späht<br>
Durch Nacht und Wind?<br>
Es ist der Vater<br>
Mit seinem Kind.
<p>
Hier beginnt ein neuer Absatz.<br>
Innerhalb dieses Absatzes darf man gerne
auch Zeilenumbrüche und andere
Tags verwenden.
</p>
<div align="right">
Und hier haben wir eine Gruppierung mit
<div>.<br>
Damit man auch etwas davon hat, ist der
Text rechtsbündig.
</div>
<pre>
Spielerei mit <pre>
* +-----+-------+-------+
*** |Feld | Wert1 | Wert2 |
***** * +-----+-------+-------+
* *** | 1 | 2.00| 3.00|
*** ***** +-----+-------+-------+
***** ******* | 2 | 4.00| 5.00|
******* ********* +-----+-------+-------+
* *********** | 3 | 6.00| 7.00|
* ** +-----+-------+-------+
**
**
</pre>
</body>
</html>
Bei genauerem Hinsehen fallen im Code folgende Textfragmente
auf: < und >.
Da einige Zeichen, wie zum Beispiel
das < bereits für Tags vergeben sind, muß man sich etwas
einfallen lassen, wenn man diese Zeichen verwenden möchte. Also
wurde eine Umschreibung erfunden. Man schreibt zwischen
& und ; eine Bezeichnung dessen, was man anzeigen möchte. z.B.
ü für u-Umlaut
Diese Umschreibung gibt es fuer alle Zeichen, verwendet wird sie
aber nur für wenige Sonderzeichen.
Die beliebtesten Sonderzeichen sind die Umschreibungen für <,
> und die Umlaute. Manchmal sieht man im Web Texte, in denen
anstelle der Umlaute Fragezeichen oder andere Sonderzeichen, wie
z.B. f|r stehen. Diese kommen von Inkompatibiläten von
Tastatur-Zeichensätzen. Um diese zu vermeiden verwenden viele
Autoren von vorn herein Umschreibungen.
<html>
<head>
<title>Sonderzeichen</title>
</head>
<body>
<pre>
< - < (von: less than, kleiner als)
> - > (von: greater than, größer als)
Ä - Ä
ä - ä
Ö - Ö
ö - ö
Ü - Ü
ü - ü
ß - ß
© - © (Copyrigh Zeichen)
& - &
</pre>
</body>
</html>
Bilder anzeigen
Wenn wir jetzt lernen, wie man Bilder anzeigt, werden wir auch
gleich einen weiteren Aspekt von Tags kennen lernen: Tags können
mehrere sogenannte Attribute enthalten. Diese sind in der Form:
name="Wert".
Welche Attribute für ein Tag zugelassen sind, kann
man im Standard beim W3-Consortium (siehe Literaturhinweis)
nachlesen. Wir werden hier die gängigsten
verwenden, es gibt aber noch eine ganze Reihe weiterer Attribute.
Attribute enthalten zusätzliche
Angaben zum Tag.
Manchmal sind es Angaben, die die Anzeige
betreffen, wie im Beispiel oben das <div align="right">,
welches den Webbrowser angewiesen hat, den Text rechtsbündig
auszugeben, manchmal sind es Zusatzhinweise wo zusätzliche
Informationen zu finden sind wie wir sie gleich bei den Bildern
haben werden.
Unser Tag, um dem Webbrowser zu sagen, daß er jetzt ein
Bild anzeigen soll heißt: <img>.
Auch dieses Tag gehört zu
den Ausnahmen, die kein End-Tag haben. Jetzt sagt man dem Browser
noch, woher er das Bild nehmen soll, welches er anzeigen soll.
Dies geschieht mit dem Attribut src. Der Einfachheit halber legen
wir unser Bild ins gleiche Verzeichnis wie unsere Webseite.
<img src="bild.gif" alt="Mein Bild">
Leider können unsere Browser nicht alle Typen von Bildern
anzeigen. Browser können in der Regel folgende Bild-Typen
anzeigen: GIF, JPG und PNG.
<html>
<head>
<title>Mein erstes Dokument</title>
</head>
<body>
<h2>Meine Seite</h2>
<img src="meinbild.gif"
alt="Mein Bild"
border="0"
width="200"
align="right">
Ich begrüße Sie auf meiner Webseite.
<p>
Als erstes möchte ich mich vorstellen:
</p>
Mein Name ist ...<br>
ich bin ....<br>
</body>
</html>
Wir verwenden das HTML-Dokument vom Anfang
dieses Kapitels und erweitern es um ein img-Tag (Image-Tag).
Innerhalb der spitzen Klammer vom Start-Tag finden wir eine ganze
Reihe Attribute.
src gibt an, wo der Webbrowser das Bild findet. Hier kann man eine
komplette Adresse (URL) angeben, oder - wenn das Bild im gleichen
Verzeichnis liegt, wie das HTML-Dokument - einfach den Bildnamen.
Die verschiedenen Möglichkeiten andere Dokumente anzugeben,
werden wir im Kapitel über relative und absolute Links
ausgiebiger betrachten (Kapitel 4).
alt - hier kann man einen alternativen Test angeben. Dieser wird
dargestellt, wenn der Webbrowser das Bild nicht anzeigen kann.
Viele Webbrowser zeigen diesen Text auch in einem kleinen gelben
Popup-Fenster an, wenn man mit der Maus
über dem Bild steht.
border - Mit border gibt man an, ob ein Bild einen Rahmen bekommen
soll und wenn ja, wie viele Pixel dieser Rahmen haben darf.
width und height dienen dem Webbrowser als Positionierungshilfe.
Hier gibt man an, wie groß das Bild sein soll (in Pixeln). Gibt
man falsche Werte an, z.B. zu kleine, wird das Bild den
angegebenen Werten angepasst, also vergrößert, verkleinert,
verkürzt, gestaucht. Gibt man nur einen Wert an, passt der Browser
den anderen Wert selbständig an.
align gibt an, wie der folgende Text zum Bild positioniert wird.
Bei left steht das Bild links und wird rechts vom Text umflossen,
bei right steht es rechts. Gibt man nichts an, nimmt der
Webbrowser seine Grundeinstellung.
Auf Fremde Seiten verlinken
Ein Link ist ein anklickbarer Bereich im Webbrowser. Wenn man ihn
anklickt, bekommt man eine neue Webseite angezeigt. Solche
anklickbaren Bereiche können Texte und Bilder sein.
Das folgende Beispiel zeigt einen Link auf die Webseiten der
Tagesschau.
<a href="http://www.tagesschau.de/">
Zur Tagesschau
</a>
Das, was zwischen <a> und </a> steht, wird später
im Webbrowser anklickbar sein. In unserem Beispiel oben ist es
der Text: 'zur Tagesschau'.
Zwischen <a> und </a> können alle HTML-Kontruktionen,
die wir auch sonst im Body-Bereich unseres Dokumentes verwenden dürfen,
stehen.Oder anders gesagt: wir können alle Tags zwischen
<a> und </a> verwenden, die wir auch sonst in unseren
Dokumenten verwenden.
<a href="http://www.tagesschau.de/">
<pre>
*
**
***
****
***** ZUR TAGESSCHAU
****
***
**
*
</pre>
</a>
Im Attribut href steht eine Internetadresse, nämlich die Adresse der
Seite, die angezeigt werden soll.
Wie man noch auf andere Seiten verlinkt, betrachten wir im Kapitel
URI, URL und Anchor.
Die Reihenfolge beim Öffnen und Schließen von Tags
Tags dürfen (in gewissen Grenzen) in beliebiger Reihenfolge
geöffnet werden.
Geschlossen werden sie immer in umgekehrter Reihenfolge.
<b><i>Fette Schrägschrift</i></b>
Es hat sich bewährt das End-Tag immer gleich mit
hinzuschreiben und dazwischen weiter zu arbeiten - sonst vergisst
man es oft.
W3Consortium
Standards zu Webprotokollen und -Sprachen
Erste kleine Schritte - interaktive Übung
Ändern Sie im unten angegebenen Beispiel die Überschrift in eine
kleinere Überschrift (z.B. h4).
Erweitern Sie die Angaben zu Ihrer Person.
<html>
<head>
<title>Uebung 1</title>
</head>
<body>
Sie wollen etwas Suchen - oder doch lieber Finden?
</body>
</html>
<html>
<head>
<title>Uebung 1</title>
</head>
<body>
<h2>Meine Übung</h2>
Sie wollen etwas Suchen - oder doch lieber Finden?
</body>
</html>
<html>
<head>
<title>Uebung 1</title>
</head>
<body>
<h2>Meine Übung</h2>
Sie wollen etwas
<a href="http://www.google.de">Suchen</a>
- oder doch lieber Finden?
</body>
</html>
Erste Seite im Eigenbau
Erstellen Sie eine kleine Vorstellung Ihrer Person.
Machen Sie sich eine kleine Skizze, wie Ihre Seite aussehen könnte. Nur
keine Hemmungen, Papier ist geduldig ;-)
Legen Sie sich ein vorbereitetes Bild in Ihr Arbeitsverzeichnis. Zum
üben reicht auch der Schnappschuss vom letzten Sommer.
Legen Sie sich ein Grundgerüst einer Webseite an. Title im
Kopfbereich nicht vergessen auszufüllen!
Auch hier wieder die Empfehlung:
verwenden Sie ein möglichst einfaches Programm zum schreiben (z.B.
NotePad oder vi). Word ist ungeeignet, wenn man nicht genau weiss,
wo man Zusatzangaben machen muß.
Für Benutzer von Office-Paketen: im Kapitel Tipps und
Tricks sind einige Hinweise, wie man das Schreibprogram dazu bringen
kann, doch das zu tun, was man will.
Setzen Sie Schritt für Schritt Ihre Idee um. Beim abspeichern
darauf achten, daß das Programm als Text abspeichert! Sonst kann
es der Webbrowser nicht lesen.
öffnen eines Editors und die immer wieder verwendeten
Grundkonstrukturen einer Webseite eingeben. (später erstellt man
sich eine Vorlage, die man einfach in das neue Dokument kopiert
und fertig ausfüllt)
Abspeichern. (Merken, wohin man die Datei
abgespeichert hat)
Webbrowser starten und Datei dort als File öffnen.
Etwas mehr Text eingeben, abspeichern und im Webbrowser
kontrollieren.
Das ganze wiederholen, bis man fertig ist und das Ergebnis
etwa so aussieht wie auf der eigenen Skizze.
Clickable Image
Lassen Sie auf Ihrer Webseite ein anklickbares Bild erscheinen! Wenn
man auf Ihr Bild klickt, soll man zu google (http://www.google.de)
weitergeleitet werden.
Legen Sie sich ein vorbereitetes Bild in Ihr Arbeitsverzeichnis.
Verwenden Sie ein bestehendes HTML-Dokument oder erstellen Sie
sich eine neue Seite.
So - oder so ähnlich sollte Ihr HTML an der Stelle aussehen,
an der Sie das Bild und den Link angeben:
<a href="http://www.google.de"><img
src="meinbild.jpg"></a>
Bilder und das Attribut align
Im align-Attribut des img-Tags kann man zwischen fünf
verschiedenen Möglichkeiten wählen (siehe unten). Probieren Sie alle
fünf Möglichkeiten doch einmal aus!
<img src="testbild.gif" alt="kleiner Test"
align = "bottom|middle|top|left|right"
border="1">
um ein align="left" oder align="right" vorzeitig zu beenden,
gibt es <br clear="all"> (beendet alle align-Angaben), <br clear="left">
und <br clear="right">
Erstellen Sie sich ein kleines Testbild mit ca 50x50 Pixeln
und verwenden Sie dieses.
Das Attribut border kann man verwenden
um sich anzeigen zu lassen, wo der wirkliche Rand des Bildes
liegt - sofern dies nicht schon durch den Bildinhalt vorgegeben ist.
<html>
<head><title>Bilder</title></head>
<body>
<img src="testbild.gif" alt="test1" border="1">
und etwas Text um zu sehen <br> was passiert.
<br clear="all">
<img src="testbild.gif" alt="test1" align="bottom" border="1">
und etwas Text um zu sehen <br> was passiert.
<br clear="all">
<img src="testbild.gif" alt="test1" align="middle" border="1">
und etwas Text um zu sehen <br> was passiert.
<br clear="all">
<img src="testbild.gif" alt="test1" align="top" border="1">
und etwas Text um zu sehen <br> was passiert.
<br clear="all">
<img src="testbild.gif" alt="test1" align="left" border="1">
und etwas Text um zu sehen <br> was passiert.
<br clear="all">
<img src="testbild.gif" alt="test1" align="right" border="1">
und etwas Text um zu sehen <br> was passiert.
<br clear="all">
</body></html>
Sie sehen den Unterschied?
Im ersten Versuch haben wir das, was ein Webbrowser meistens
tut, wenn man nichts angibt.
Dies ist zufällig genau das gleiche Ergebnis, wie bei der
Verwendung von align="bottom".
align="middle" läßt die erste Zeile in der Mitte des Bildes
stehen und alle weiteren Zeilen stehen darunter.
align="top" macht das Gleiche, nur steht die Zeile oben am Kopf
des Bildes.
align="left" und align="right" lassen den Text rechts, bzw.
links um das Bild herum fließen.