HTML HyperText Markup Language Die Programmiersprache des WWW Keine eigentliche Programmiersprache, sondern eher ´Seitenbeschreibungssprache´ systemübergreifend, plattformunabhängig (im Idealfall) HTML-Text sieht auf allen Rechnern/Rechnersystemen nahezu gleich aus Hypertext kann an beliebigen Stellen auf andere Informationen verweisen (z.B. tiefer gehende Zusatzinformationen, Fremd-worterklärungen, Index...), im Gegensatz zu einem Buch, bei dem man hinten nachschlagen muss Johannes M. L. Pasquay
Werkzeuge Die Werkzeuge zum Erstellen einer Web-Seite Ein einfacher (ASCI-)Texteditor, z.B. WordPad, MS Word Ein HTML-Editor, z.B. Home-Site (Shareware), Arachnophilia (Shareware), Hot Metal Pro, oder Frontpage, Phase V Und zum Betrachten der Seiten: Einen Browser, z.B. Netscape Navigator, MS Internet Explorer, Mosaic,Opera Johannes M. L. Pasquay
Syntax von HTML Die Befehle in HTML – die Tags ... werden immer von spitzen Klammern eingeschlossen, also < und > (Tags) Es gibt offene Tags, die einzeln stehen, z.B. <BR> ... und es gibt geschlossene Tags, die immer als Paar auftreten, mit einem Anfangs-Tag und einem Ende-Tag, z.B. <B> und </B> Ende-Tags sind also immer durch einen Schrägstrich ( / ) gekennzeichnet Johannes M. L. Pasquay
Syntax von HTML Tags können ineinander verschachtelt sein, dürfen sich aber nicht überschneiden: Richtig: <B> <I> .... </I> </B> Falsch: <B> <I> .... </B> </I> Johannes M. L. Pasquay
Tags <HTML> </HTML> schließen ein Dokument ein <HEAD> </HEAD> der Dokumenten-Kopf <TITEL> </TITEL> der Dokumenten-Titel <BODY> </BODY> der Hauptteil <BR> Zeilenumbruch <P> </P> Absatz <H1...6> </H> verschiedene Überschriften <B> </B> Fettschrift <I> </I> Kursivschrift <U> </U> unterstrichen Johannes M. L. Pasquay
weitere Tags <FONT ...> </FONT> Schriftart, -größe Linien <IMG SRC= ... > Grafik einfügen <A HREF= ... > </A> Link (Verweis) einfügen <!-- --> Kommentar einfügen <CENTER> </CENTER> Zentrier-Anweisung <TABLE> </TABLE> umschließt eine Tabelle <TR> erzeugt eine Tabellenzeile <TD> erzeugt eine Tabellenzelle Johannes M. L. Pasquay
Aufbau einer HTML-Seite Der Kopf (HEAD) <HEAD> </HEAD> Der Körper (BODY) <BODY> </BODY> Johannes M. L. Pasquay
Inhalt einer Frontpageseite <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>HTML-Crash-Kurs</title> </head> <body bgcolor="#0000FF"> </body> </html> der Kopf Beschreibung, die auf eine HTML-Seite der Version 4.0 hinweist. Der Seiten-Titel Mit den Tags <HTML> und </HTML> wird die Seite „eingerahmt“. gibt die Hintergrundfarbe an der Körper Johannes M. L. Pasquay
hexadezimale Ziffern für Farbwerte 0 (entspricht dezimal 0) 1 (entspricht dezimal 1) 2 (entspricht dezimal 2) 3 (entspricht dezimal 3) 4 (entspricht dezimal 4) 5 (entspricht dezimal 5) 6 (entspricht dezimal 6) 7 (entspricht dezimal 7) 8 (entspricht dezimal 8) 9 (entspricht dezimal 9) A (entspricht dezimal 10) B (entspricht dezimal 11) C (entspricht dezimal 12) D (entspricht dezimal 13) E (entspricht dezimal 14) F (entspricht dezimal 15) <body bgcolor="#0000FF"> Eine hexadezimale Ziffer kann also 16 Zustände haben Für jeden Farbwert (Rot oder Grün oder Blau) stehen 2 Ziffern zur Verfügung Das macht 16 x 16 (= 256) mögliche Zustände pro Farbwert 256 hoch 3 ergibt folglich 16,7 Mio. Farben Johannes M. L. Pasquay
S+W, Primär und Sekundärfarben Johannes M. L. Pasquay
Kommentar (html) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>HTML-Crash-Kurs</title> </head> <!-- Das ist ein Kommentar, er wird auf der Seite nicht mit angezeigt. --> <body bgcolor="#0000FF„ TEXT="#000000" LINK="#800000" VLINK="#800080"> </body> </html> Kommentar Hintergrundfarbe Textfarbe Farbe der Links, der Verweise. Johannes M. L. Pasquay
Kommentar (normal) Johannes M. L. Pasquay
Überschrift (html) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>HTML-Crash-Kurs</title> </head> <!-- Das ist ein Kommentar, er wird auf der Seite nicht mit angezeigt. --> <body bgcolor="#0000FF„ TEXT="#000000" LINK="#800000" VLINK="#800080"> <H1> <B> <CENTER>Unsere erste Web-Seite</CENTER> </B> </H1> </body> </html> Johannes M. L. Pasquay
Überschrift (normal) Johannes M. L. Pasquay
Linie (html) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>HTML-Crash-Kurs</title> </head> <!-- Das ist ein Kommentar, er wird auf der Seite nicht mit angezeigt. --> <body bgcolor="#0000FF„ TEXT="#000000" LINK="#800000" VLINK="#800080"> <H1> <B> <CENTER>Unsere erste Web-Seite</CENTER> </B> </H1> <HR WIDTH="95%" ALIGN=CENTER> <BR> </body> </html> Johannes M. L. Pasquay
Linie (normal) Johannes M. L. Pasquay
Text 1 (html) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>HTML-Crash-Kurs</title> </head> <!-- Das ist ein Kommentar, er wird auf der Seite nicht mit angezeigt. --> <body bgcolor="#0000FF„ TEXT="#000000" LINK="#800000" VLINK="#800080"> <H1> <B> <CENTER>Unsere erste Web-Seite</CENTER> </B> </H1> <HR WIDTH="95%" ALIGN=CENTER> <BR> <CENTER> Willkommen auf der Test-Web-Seite des HTML-Crash-Kurses. In HTML zu programmieren ist ganz einfach. Das werdet Ihr gleich sehen.</CENTER> </body> </html> Johannes M. L. Pasquay
Text 1 (normal) Johannes M. L. Pasquay
Text 2 (html) <!-- Das ist ein Kommentar, er wird auf der Seite nicht mit angezeigt. --> <body bgcolor="#0000FF„ TEXT="#000000" LINK="#800000" VLINK="#800080"> <H1> <B> <CENTER>Unsere erste Web-Seite</CENTER> </B> </H1> <HR WIDTH="95%" ALIGN=CENTER> <BR> <CENTER> Willkommen auf der Test-Web-Seite des HTML-Crash-Kurses. In HTML zu programmieren ist ganz einfach. Das werdet Ihr gleich sehen.</CENTER> <P>Dieser Absatz ist linksbuendig ausgerichtet.<B> Der Text ist fett. </B></P> <P ALIGN=CENTER>Was diesen Absatz ziert: Er ist zentriert. <I> Der Text ist kursiv </I></P> <P ALIGN=RIGHT>Dieser Absatz, oh wie schoen, ist am rechten Rand zu sehn.<U> Der Text ist unterstrichen. </U></P> </body> </html> Absätze stehen zwischen <P> und </P>. Vor und nach jedem Absatz wird automatisch eine Leerzeile eingefügt (ist meiner Meinung nach Platzverschwendung). „ALIGN“ bestimmt die Ausrichtung des Absatzes. Also mittig, links-, oder rechtsbündig. Johannes M. L. Pasquay
Text 2 (normal) Absätze stehen zwischen <P> und </P>. Vor und nach jedem Absatz wird automatisch eine Leerzeile eingefügt (ist meiner Meinung nach Platzverschwendung). „ALIGN“ bestimmt die Ausrichtung des Absatzes. Also mittig, links-, oder rechtsbündig. Johannes M. L. Pasquay
Bild (html) <!-- Das ist ein Kommentar, er wird auf der Seite nicht mit angezeigt. --> <body bgcolor="#0000FF„ TEXT="#000000" LINK="#800000" VLINK="#800080"> <H1> <B> <CENTER>Unsere erste Web-Seite</CENTER> </B> </H1> <HR WIDTH="95%" ALIGN=CENTER> <BR> <CENTER> Willkommen auf der Test-Web-Seite des HTML-Crash-Kurses. In HTML zu programmieren ist ganz einfach. Das werdet Ihr gleich sehen.</CENTER> <P ALIGN=CENTER>Was diesen Absatz ziert: Er ist zentriert. <I> Der Text ist kursiv </I></P> <P ALIGN=RIGHT>Dieser Absatz, oh wie schoen, ist am rechten Rand zu sehn.<U> Der Text ist unterstrichen. </U></P> <CENTER><IMG SRC="Bild1.gif" WIDTH="200" ALT="Das ist ein Bild"> </CENTER> </body> </html> Jetzt haben wir ein Bild eingefügt. IMG=Bild, SRC=Source(Quelle), danach folgt (in Anführungszeichen!), der vollständige Name des Bildes. Liegt das Bild nicht im gleichen Ordner, wie die HTML-Seite, muß der Pfad zum Bild (wie in UNIX) angegeben werden. Also z.B.: SRC=“../Bilder/Bild1.gif“ Die Breite (WIDTH) und Höhe (HEIGHT) des Bildes werden in Pixeln angegeben (kann auch event. auch weggelassen werden). ALT kommt von Alternate, darein kommt eine Kurzbeschreibung des Bildes, falls ein Browser keine Bilder anzeigt. Der Surfer weiß dann wenigstens, was dort hin sollte. Johannes M. L. Pasquay
Bild (normal) Jetzt haben wir ein Bild eingefügt. IMG=Bild, SRC=Source(Quelle), danach folgt (in Anführungszeichen!), der vollständige Name des Bildes. Liegt das Bild nicht im gleichen Ordner, wie die HTML-Seite, muß der Pfad zum Bild (wie in UNIX) angegeben werden. Also z.B.: SRC=“../Bilder/Bild1.gif“ Die Breite (WIDTH) und Höhe (HEIGHT) des Bildes werden in Pixeln angegeben (kann auch event. auch weggelassen werden). ALT kommt von Alternate, darein kommt eine Kurzbeschreibung des Bildes, falls ein Browser keine Bilder anzeigt. Der Surfer weiß dann wenigstens, was dort hin sollte. Johannes M. L. Pasquay
Bildunterschrift (html) <!-- Das ist ein Kommentar, er wird auf der Seite nicht mit angezeigt. --> <body bgcolor="#0000FF„ TEXT="#000000" LINK="#800000" VLINK="#800080"> <H1> <B> <CENTER>Unsere erste Web-Seite</CENTER> </B> </H1> <HR WIDTH="95%" ALIGN=CENTER> <BR> <CENTER> Willkommen auf der Test-Web-Seite des HTML-Crash-Kurses. In HTML zu programmieren ist ganz einfach. Das werdet Ihr gleich sehen.</CENTER> <P ALIGN=CENTER>Was diesen Absatz ziert: Er ist zentriert. <I> Der Text ist kursiv </I></P> <P ALIGN=RIGHT>Dieser Absatz, oh wie schoen, ist am rechten Rand zu sehn.<U> Der Text ist unterstrichen. </U></P> <CENTER><IMG SRC="Bild1.gif" WIDTH="200" ALT="Das ist ein Bild"> </CENTER> <CENTER><B>Ein Bild - wie nett.</B></CENTER> </body> </html> Die Bildunterschrift, natürlich zentriert, wie das Bild auch. <BR> steht für line break, also Zeilenumbruch. Damit wird eine neue Zeile erzeugt. Ich benutze dieses Tag viel häufiger als das <P> </P> für einen Absatz. Es ist halt ein Tag weniger! Johannes M. L. Pasquay
Bildunterschrift (normal) Die Bildunterschrift, natürlich zentriert, wie das Bild auch. <BR> steht für line break, also Zeilenumbruch. Damit wird eine neue Zeile erzeugt. Ich benutze dieses Tag viel häufiger als das <P> </P> für einen Absatz. Es ist halt ein Tag weniger! Johannes M. L. Pasquay
Link (html) <CENTER> Willkommen auf der Test-Web-Seite des HTML-Crash-Kurses. In HTML zu programmieren ist ganz einfach. Das werdet Ihr gleich sehen.</CENTER> <P ALIGN=CENTER>Was diesen Absatz ziert: Er ist zentriert. <I> Der Text ist kursiv </I></P> <P ALIGN=RIGHT>Dieser Absatz, oh wie schoen, ist am rechten Rand zu sehn.<U> Der Text ist unterstrichen. </U></P> <CENTER><IMG SRC="Bild1.gif" WIDTH="200" ALT="Das ist ein Bild"> </CENTER> <BR> <CENTER><B>Ein Bild - wie nett.</B></CENTER> Nun wollen wir aber mal nicht vergessen, warum HTML Hyper Text Markup Language heisst: wegen der <I>Verweise</I>, den <I>LINKS</I>. Unser erster Link verweist auf <A HREF="2.Web.htm">eine Seite von mir</A> </body> </html> <i> steht für „italic“, also „kursiv“. Ein Link wird mit dem Anker-Tag (anchor) erzeugt: <A ...> ...</A>. Das Attribut HREF verweist auf das Ziel, eine andere Seite. Liegt diese Seite im gleichen Ordner, wird nur ihr vollständiger Name angegeben (hier: 2.Web.htm). Ansonsten gilt zur Pfandangabe das gleiche, wie beim Einfügen eines Bildes. Liegt diese andere Seite aber gar auf einem anderen Server, so wird die WWW-Adresse komplett eingetragen. Der Text zwischen dem Anfangs- und dem Ende Text wird vom Browser andersfarbig, meist blau, dargestellt und sollte so gewählt werden, dass der Betrachter etwa erkennen kann, wohin der Link führt. Johannes M. L. Pasquay
Link (normal) <i> steht für „italic“, also „kursiv“. Ein Link wird mit dem Anker-Tag (anchor) erzeugt: <A ...> ...</A>. Das Attribut HREF verweist auf das Ziel, eine andere Seite. Liegt diese Seite im gleichen Ordner, wird nur ihr vollständiger Name angegeben (hier: 2.Web.htm). Ansonsten gilt zur Pfandangabe das gleiche, wie beim Einfügen eines Bildes. Liegt diese andere Seite aber gar auf einem anderen Server, so wird die WWW-Adresse komplett eingetragen. Der Text zwischen dem Anfangs- und dem Ende Text wird vom Browser andersfarbig, meist blau, dargestellt und sollte so gewählt werden, dass der Betrachter etwa erkennen kann, wohin der Link führt. Johannes M. L. Pasquay
E-Mail (html) Und hier? Hier kann man mir eine <CENTER> Willkommen auf der Test-Web-Seite des HTML-Crash-Kurses. In HTML zu programmieren ist ganz einfach. Das werdet Ihr gleich sehen.</CENTER> <P ALIGN=CENTER>Was diesen Absatz ziert: Er ist zentriert. <I> Der Text ist kursiv </I></P> <P ALIGN=RIGHT>Dieser Absatz, oh wie schoen, ist am rechten Rand zu sehn.<U> Der Text ist unterstrichen. </U></P> <CENTER><IMG SRC="Bild1.gif" WIDTH="200" ALT="Das ist ein Bild"> </CENTER> <BR> <CENTER><B>Ein Bild - wie nett.</B></CENTER> Nun wollen wir aber mal nicht vergessen, warum HTML Hyper Text Markup Language heisst: wegen der <I>Verweise</I>, den <I>LINKS</I>. Unser erster Link verweist auf <A HREF="2.Web.htm">eine Seite von mir</A> Und hier? Hier kann man mir eine <A HREF="mailto:johannes.pasquay@pascom.de">elektronische Post</A> schicken! </body> </html> Ein besonderer Link: Die mailto-Anweisung. Der Aufbau ist genauso wie beim Link auf eine HTML-Seite. Nur steht an Stelle der Seitenadresse das mailto: und eine Email-Adresse. Klickt der Betrachter der Seite nun auf den (andersfarbig dargestellten) Text, der im Quelltext zwischen <A...> und </A> steht, öffnet sich ein Fenster der Standart-Email-Anwendung und der Surfer kann eine Email an den eingetragenen Adressaten abschicken. Meist wird die Emailadresse des Seiteninhabers implementiert. Johannes M. L. Pasquay
E-Mail (normal) Ein besonderer Link: Die mailto-Anweisung. Der Aufbau ist genauso wie beim Link auf eine HTML-Seite. Nur steht an Stelle der Seitenadresse das mailto: und eine Email-Adresse. Klickt der Betrachter der Seite nun auf den (andersfarbig dargestellten) Text, der im Quelltext zwischen <A...> und </A> steht, öffnet sich ein Fenster der Standart-Email-Anwendung und der Surfer kann eine Email an den eingetragenen Adressaten abschicken. Meist wird die Emailadresse des Seiteninhabers implementiert. Johannes M. L. Pasquay
Schriftattribute (html) <CENTER> Willkommen auf der Test-Web-Seite des HTML-Crash-Kurses. In HTML zu programmieren ist ganz einfach. Das werdet Ihr gleich sehen.</CENTER> <P ALIGN=CENTER>Was diesen Absatz ziert: Er ist zentriert. <I> Der Text ist kursiv </I></P> <P ALIGN=RIGHT>Dieser Absatz, oh wie schoen, ist am rechten Rand zu sehn.<U> Der Text ist unterstrichen. </U></P> <CENTER><IMG SRC="Bild1.gif" WIDTH="200" ALT="Das ist ein Bild"> </CENTER> <BR> <CENTER><B>Ein Bild - wie nett.</B></CENTER> Nun wollen wir aber mal nicht vergessen, warum HTML Hyper Text Markup Language heisst: wegen der <I>Verweise</I>, den <I>LINKS</I>. Unser erster Link verweist auf <A HREF="2.Web.htm">eine Seite von mir</A> Und hier? Hier kann man mir eine <A HREF="mailto:johannes.pasquay@pascom.de">elektronische Post</A> schicken! <FONT SIZE="+2"><B>NA? War das etwa schwer?</B></FONT> </body> </html> Mit den Tags <FONT ...> </FONT> kann der dazwischenliegende Text noch besonders formatiert werden. Dafür stehen verschiedene Attribute zur Verfügung. Z.B. SIZE für Textgröße (-7 bis +7, experimentieren!), COLOUR für die Schriftfarbe (hexadezimaler Farbcode), oder FACE für Schriftart (z.B. Arial, Courier, Helvetica. Aber Vorsicht, nicht jede Schriftart ist auf jedem Rechner vorhanden und der Browser kann nur die Schriften darstellen, die auch auf dem Rechner liegen!) Ohne Angaben wird als Standart Times New Roman in schwarz und der Größe 12 Punkt dargestellt. Johannes M. L. Pasquay
Schriftattribute (normal) Mit den Tags <FONT ...> </FONT> kann der dazwischenliegende Text noch besonders formatiert werden. Dafür stehen verschiedene Attribute zur Verfügung. Z.B. SIZE für Textgröße (-7 bis +7, experimentieren!), COLOUR für die Schriftfarbe (hexadezimaler Farbcode), oder FACE für Schriftart (z.B. Arial, Courier, Helvetica. Aber Vorsicht, nicht jede Schriftart ist auf jedem Rechner vorhanden und der Browser kann nur die Schriften darstellen, die auch auf dem Rechner liegen!) Ohne Angaben wird als Standart Times New Roman in schwarz und der Größe 12 Punkt dargestellt. Johannes M. L. Pasquay
2. Webseite (html) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>HTML-Crash-Kurs</title> </head> <BODY BGCOLOR="#00ffff" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000"> <H1> <B> <CENTER>Unsere zweite Web-Seite</CENTER> </B> </H1> <HR WIDTH="95%" ALIGN=CENTER> <BR> <A HREF="1.Web.htm">Zurück zur 1. Webseite</A>. </body> </html> Johannes M. L. Pasquay
2. Webseite (normal) Johannes M. L. Pasquay
Tabelle (html) <CENTER><TABLE BORDER="1"></CENTER> <BODY BGCOLOR="#00ffff" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000"> <H1> <B> <CENTER>Unsere zweite Web-Seite</CENTER> </B> </H1> <HR WIDTH="95%" ALIGN=CENTER> <BR> <A HREF="1.Web.htm">Zurück zur 1. Webseite</A>. <CENTER><TABLE BORDER="1"></CENTER> <TR> <TD WIDTH="200"><STRONG>Überschrift 1</STRONG></TD> <TD><STRONG>Überschrift 2</STRONG></TD> </TR> <TD WIDTH="200">Text 1</TD> <TD>Text 2</TD> </TABLE> </body> </html> mit dem Tag <TABLE> und schließt ab mit dem Tag </TABLE>. Damit man die einzelnen Zellen auch sieht benötigt man einen Rahmen, den man mit dem Tag <TABLE BORDER="1"> erzeugt. Eine Zeile erstellt man, in dem man den Tag <TR> verwendet Um eine Zelle genauer zu definieren, verwendet man den Tag <TD>. Mit ihm kann man auch die Zellengröße und Farbe bestimmen. Hiermit wird eine Zelle auf die Größe 200 Pixel gedehnt: <TD WIDTH=200>. Für jede Zelle muss diese Angabe wiederholt werden! Ansonsten wird die Breite so festgelegt, dass der Text hineinpasst. Johannes M. L. Pasquay
Tabelle (normal) mit dem Tag <TABLE> und schließt ab mit dem Tag </TABLE>. Damit man die einzelnen Zellen auch sieht benötigt man einen Rahmen, den man mit dem Tag <TABLE BORDER="1"> erzeugt. Eine Zeile erstellt man, in dem man den Tag <TR> verwendet Um eine Zelle genauer zu definieren, verwendet man den Tag <TD>. Mit ihm kann man auch die Zellengröße und Farbe bestimmen. Hiermit wird eine Zelle auf die Größe 200 Pixel gedehnt: <TD WIDTH=200>. Für jede Zelle muss diese Angabe wiederholt werden! Ansonsten wird die Breite so festgelegt, dass der Text hineinpasst. Johannes M. L. Pasquay