HTML-Schnellbesoldung: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) (→Schritt 3: Etwas Text) |
Admin (Diskussion | Beiträge) (→Schritt 4: ein paar Links) |
||
| Zeile 156: | Zeile 156: | ||
Dazu schreiben wir weiter an unserem Text (es beginnt ein neuer Absatz): | Dazu schreiben wir weiter an unserem Text (es beginnt ein neuer Absatz): | ||
| − | + | <pre> | |
<P> | <P> | ||
Meine Lieblingsseite<BR> | Meine Lieblingsseite<BR> | ||
HTML-Schnellbesohlung<BR> | HTML-Schnellbesohlung<BR> | ||
| − | + | </pre> | |
Damit der Browser darüber informiert ist, welche Seiten er holen soll, wenn jemand diesen Links folgen möchte, schreiben wir allgemein: | Damit der Browser darüber informiert ist, welche Seiten er holen soll, wenn jemand diesen Links folgen möchte, schreiben wir allgemein: | ||
| − | + | <pre> <A HREF="Protokoll://Adresse zur Seite"> </A></pre> | |
| Zeile 170: | Zeile 170: | ||
Absolut adressieren wollen wir unsere Lieblingsseite, nämlich den Server der boerde.de mit http: als Protokoll und //www.boerde.de als Adresse. Dazu ergänzen wir die Zeile: | Absolut adressieren wollen wir unsere Lieblingsseite, nämlich den Server der boerde.de mit http: als Protokoll und //www.boerde.de als Adresse. Dazu ergänzen wir die Zeile: | ||
| − | + | <pre> <A HREF="http://www.boerde.de"> Meine Lieblingsseite </A><BR></pre> | |
Der andere Link soll auf diese Seite verweisen, die mit unserem Beispiel im gleichen Verzeichnis liegt. Dazu braucht man nur den Namen der Datei anzugeben. | Der andere Link soll auf diese Seite verweisen, die mit unserem Beispiel im gleichen Verzeichnis liegt. Dazu braucht man nur den Namen der Datei anzugeben. | ||
| − | + | <pre> <A HREF="html_schritt.shtml"> HTML-Schnellbesohlung </A><BR></pre> | |
| Zeile 181: | Zeile 181: | ||
Damit hat unser Quelltext nun folgendes Aussehen: | Damit hat unser Quelltext nun folgendes Aussehen: | ||
| + | <pre> | ||
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| Zeile 197: | Zeile 198: | ||
</BODY> | </BODY> | ||
</HTML> | </HTML> | ||
| − | + | </pre> | |
=== Schritt 5: Bilder und Attribute === | === Schritt 5: Bilder und Attribute === | ||
Version vom 21. Mai 2012, 10:08 Uhr
Inhaltsverzeichnis
HTML-Schnellbesohlung
Erste Schritte zur eigenen Homepage
WWW-Seiten, so wie auch die Homepage, werden in einer Seitenbeschreibungssprache namens HTML (hypertext markup language) kodiert. Das Erstellen der eigenen Seiten ist aber wesentlich einfacher als es sich der eine oder andere vielleicht vorstellen mag.
Was brauche ich, um meine eigene Hompage zu erstellen?
Zunächst ist nichts weiter erforderlich, als ein Texteditor, ein Webbrowser und ein wenig Zeit.
Später kann man sich ja in einigen Archiven nach HTML-Editoren umsehen, um für sich einen passenden auszuwählen, aber am Anfang tut es auch z.B. der Editor von DOS. Manche Leute schwören auf diese Methode und kommen damit auch gut zurecht.
Alternativ kann man auch mit einigen Textverarbeitungen HTML-Seiten erstellen, was immer mehr zum Standard wird, oder auch mit beispielsweise dem Netscape Composer, welcher Bestandteil des Communicator-Paketes ist. Das spart eine Menge an Arbeit und Zeit. Dessen ungeachtet sollte man denoch einige Grundregeln der HTML-Kodierung kennen, welche hier ansatzweise erläutert werden sollen.
Also, man startet den Editor und legt eine leere Datei mit dem Namen "welcome.html" (DOS- und Windows3.x-User verwenden die Dateierweiterung .htm anstelle von .html).
Und schon kann es mit der ersten eigenen Homepage losgehen:
Schritt 1: Das Grundgerüst
Zu allererst gibt man folgende Zeilen ein:
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
Das bedeutet im Einzelnen: HTML-Dateien bestehen aus Kopf (<HEAD> ...</HEAD>) und Körper mit dem Inhalt (<BODY> ... </BODY>), die beide von HTML als Anfang und Ende der Datei eingeschlossen werden (<HTML> ... </HTML>);
<HTML> ... </HTML>
stellen sozusagen Anfang und Ende der Datei dar. Wichtig: HTML-Befehle (richtiger werden sie Tags genannt) werden immer von "<" und ">" eingeschlossen, um auch vom Browser ordendlich interpretiert werden zu können. Abschliessende Tags werden von spitzen Klammern und einem Schrägstrich (</ TAG >) eingeschlossen.
<HEAD> </HEAD>
schliessen den Kopf der HTML-Datei ein.
Im Kopf können zusätzliche Informationen untergebracht werden, von denen die Wichtigste der Titel ist.
Der Titel der HTML-Datei wird beispielsweise in der Titelzeile des Browsers angezeigt und auch beim Setzen von Lesezeichen auf die Datei verwendet.
Also fügen wir zwischen den HEAD-Tags folgendes ein:
<HEAD> <TITLE> Meine erste Homepage </TITLE> </HEAD>
Zwischen
<BODY> </BODY>
ist nun der Bereich, der die eigendlichen, darzustellenden Informationen im Browserfenster enthält.
Damit haben wir das Grundgerüst einer jeden HTML-Datei erstellt:
<HTML> <HEAD> <TITLE> Titel der Seite </TITLE> </HEAD> <BODY> ... darzustellender Inhalt </BODY> </HTML>
Schritt 2: Eine Überschrift
Zwischen den beiden BODY-Tags (Groß- und Kleinschreibung ist bei den Tags eigendlich egal) fügen wir nun folgendes ein:
Meine erste Homepage - Willkommen!
Nachdem wir das abgespeichert haben, können wir uns unsere erste Homepage mit dem Webbrowser ansehen.
Und tatsächlich wird da "Meine erste Homepage - Willkommen!" stehen, aber etwas zu klein für eine Überschrift!
Damit der Browser weiß, das es sich hierbei um die Überschrift handeln soll und er diese auch entsprechend darstellt, müssen wir ihm das noch mitteilen. Dazu gibt es natürlich einen entsprechenden HTML-Tag, der da lautet:
...
Alles, was nun dazwischen steht, wird als Überschrift dargestellt. Also schliessen wir unseren Text zwischen diesen zwei Tags ein.
Als nächstes wollen wir unter unsere Überschrift eine Linie ziehen, damit sie sich gut von dem Rest der Seite unterscheidet. Dazu benutzen wir den Tag
Dieser Tag benötigt keinen End-Tag, da einfach nur eine Linie gezogen wird, wir also nicht festlegen müssen, wo diese endet.
Unsere HTML-Datei sieht dann so aus:
<HTML> <HEAD> <TITLE> Meine erste Homepage </TITLE> </HEAD> <BODY>
Meine erste Homepage - Willkommen!
</BODY> </HTML>
Schritt 3: Etwas Text
In der Zeile nach dem Tag für die Linie fügen wir nun folgendes ein:
Mein Name ist Fritzchen Kohlrabi. Das hier ist meine Homepage und ich habe einige interessante Links für euch gesammelt.
Drei Dinge sind nun zu bemängeln:
- 1. kann (muß aber nicht) es sein, daß das "ü" nicht als solches dargestellt wird, was daran liegt, das der Browser dies nicht als solches erkennt. Deshalb sollten Umlaute und andere Sonderzeichen in einer HTML-gemässen Form angegeben werden. Für das "ü" lautet die Kodierung: &uuml;Zwar sieht die HTML-Spezifikation vor, daß alle Zeichen des Zeichensatzes ISO 8859-1 dargestellt werden sollten, ist dies aber nicht bei allen Browsern der Fall; wer also möchte, das alle seinen Text richtig lesen können, der sollte nach wie vor die Kodierung für Sonderzeichen beibehalten. Eine Übersicht der wichtigsten findet sich deshalb am Ende dieser Seite.
- 2. Obwohl wir einen Zeilenumbruch nach dem ersten Punkt gemacht haben, wird der zweite Satz einfach in der selben Zeile fortgesetzt. Wir müssen unserem Browser also mitteilen, wo eine Zeile zu Ende sein soll, weil es sonst entsprechend der Fensterbreite eine Umbruch einfügt. Dazu benutzt man den Tag
<BR>
- 3. ist zwischen Linie und Text zuwenig Platz: Eine Leerzeile wäre angebracht. Dies erreicht man, indem man einen neuen Absatz beginnt. Dieser wird als Leerzeile und Beginn des Textes in einer neuen Zeile dargestellt. Der dazugehörige Tag lautet:
<P>
...
</P> (Der abschliessende Tag kann aber auch weggelassen werden, was dem allgemeinen Gebrauch entspricht.)
Ändern wir unsere Datei entspechend dem Vorgenannten ab, sieht sie nun wie folgt aus:
<HTML>
<HEAD>
<TITLE> Meine erste Homepage </TITLE>
</HEAD>
<BODY>
<H1>Meine erste Homepage - Willkommen!</H1>
<HR>
<P>
Mein Name ist Fritzchen Kohlrabi.<BR> Das hier ist meine Homepage und ich habe einige interessante Links f&uuml;r euch gesammelt.<BR>
</BODY>
</HTML>
Schritt 4: ein paar Links
Nunfolgend machen wir unsere Seite zu dem, was das WWW ausmacht: Wir fügen Links ein, um dem Namen Hypertext gerecht zu werden. Dazu schreiben wir weiter an unserem Text (es beginnt ein neuer Absatz):
<P>
Meine Lieblingsseite<BR>
HTML-Schnellbesohlung<BR>
Damit der Browser darüber informiert ist, welche Seiten er holen soll, wenn jemand diesen Links folgen möchte, schreiben wir allgemein:
<A HREF="Protokoll://Adresse zur Seite"> </A>
Zu unterscheiden ist hier zwischen relativen, also im selben Verzeichnis oder doch zumindest im selben Verzeichniszweig liegenden Zielseiten und absoluten Links auf andere Server oder Verzeichniszweige.
Absolut adressieren wollen wir unsere Lieblingsseite, nämlich den Server der boerde.de mit http: als Protokoll und //www.boerde.de als Adresse. Dazu ergänzen wir die Zeile:
<A HREF="http://www.boerde.de"> Meine Lieblingsseite </A><BR>
Der andere Link soll auf diese Seite verweisen, die mit unserem Beispiel im gleichen Verzeichnis liegt. Dazu braucht man nur den Namen der Datei anzugeben.
<A HREF="html_schritt.shtml"> HTML-Schnellbesohlung </A><BR>
(Eine Bemerkung am Rande: Diese Datei hier trägt die Endung .shtml, weil bestimmte Server-Prozesse ausgeführt werden sollen. Dies wird auf einer der nächsten Seiten genauer erlätert werden.)
Damit hat unser Quelltext nun folgendes Aussehen:
<HTML>
<HEAD>
<TITLE> Meine erste Homepage </TITLE>
</HEAD>
<BODY>
<H1>Meine erste Homepage - Willkommen!</H1>
<HR>
<P>
Mein Name ist Fritzchen Kohlrabi.<BR>
Das hier ist meine Homepage und ich habe einige interessante Links f&uuml;r euch gesammelt.
<P>
<A HREF="http://www.boerde.de"> Meine Lieblingsseite </A><BR>
<A HREF="html_schritt.shtml"> HTML-Schnellbesohlung </A>
</BODY>
</HTML>
Schritt 5: Bilder und Attribute
Zu guterletzt wollen wir dem Besucher unserer Seite die Möglichkeit geben, uns eine Mail zu schicken. Damit dieses auch besonderst auffällt, soll ein kleines Bildchen darauf hinweisen. Bilder werden wie folgt eingebunden:
<IMG SCR="Adresse/Pfad zum Bild/Bildname">
Unser Bild soll bmail.gif heisen, hat die Abmaße 32x32 Pixel und da es im gleichen Verzeichnis liegt, relativ adressiert werden. Um grafischen Browsern die Arbeit zu erleichtern, ist es empfehlenswert, die Bildabmaße im Imagine-Tag mit anzugeben. Dies geschieht über sogenannte Attribute, die dem Tag beigeordnet werden:
<IMG SRC="bmail.gif" WIDTH="32" HIGHT="32" ALT="Mail-Bild">
Width und Hight dürften weitestgehend selbsterklärend sein. ALT ist eine alternative Angabe, falls das Bild nicht vorhanden sein sollte oder der Mauszeiger sich über dem Bild befindet. Nicht-grafische Browser nutzen dies beispielsweise, um diesen Text anstelle des Bildes einzufügen.
Bliebe nun noch der Link auf unsere Mailadresse:
<A HREF="mailto:fritzchen@boerde.de"> Meine Mailadresse </A>
Endgültig sieht unsere Beispielhomepage im Quelltext dann so aus:
<HTML> <HEAD> <TITLE> Meine erste Homepage </TITLE> </HEAD> <BODY>
Meine erste Homepage - Willkommen!
Mein Name ist Fritzchen Kohlrabi.
Das hier ist meine Homepage und ich habe einige interessante Links f&uuml;r euch gesammelt.
<P>
<A HREF="http://www.boerde.de"> Meine Lieblingsseite
</A>
<A HREF="html_schritt.shtml"> HTML-Schnellbesohlung </A>
<P>
<IMG SRC="bmail.gif" WIDTH="32" HIGHT="32" ALT="Mail-Bild">
<A HREF="mailto:fritzchen@boerde.de"> Meine Mailadresse</A>
</BODY>
</HTML>
nächste Schritte:
Soweit unsere kleine Einführung in das Erstellen von HTML-Dokumenten. Natürlich ist es hier nicht möglich, umfassend alle Tags zu erwähnen, dazu gibt es genügend umfassendere Publikationen. Einige im Web erreichbare finden sich auf der Link-Seite zu diesem Thema.
Wer also Interesse an der Gestaltung seiner Seiten gefunden hat, dem sollte dies hier nur als kleine Anregung dienen.
Abschliessend gibt es noch eine Übersicht der wichtigsten Tags sowie der Sonderzeichen.
tgl 1996
