HTML
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 Markup Language
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
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
Einen Browser, z.B. Netscape Navigator, MS Internet Explorer, Mosaic,Opera
Die Werkzeuge zum Erstellen einer Web-Seite
Johannes M. L. Pasquay
Und zum Betrachten der Seiten:
Syntax von HTML
... 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>
Die Befehle in HTML – die Tags
Ende-Tags sind also immer durch einen Schrägstrich ( / ) gekennzeichnet
Johannes M. L. Pasquay
Syntax von HTML
Richtig: <B> <I> .... </I> </B>
Falsch: <B> <I> .... </B> </I>
Tags können ineinander verschachtelt sein, dürfen sich aber nicht überschneiden:
Johannes M. L. Pasquay
Tags
<HTML> </HTML> schließen ein Dokument ein
Johannes M. L. Pasquay
<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
weitere Tags
<FONT ...> </FONT> Schriftart, -größe
Johannes M. L. Pasquay
<HR> 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
Aufbau einer HTML-Seite
Der Kopf
(HEAD)
Der Körper
(BODY)
Johannes M. L. Pasquay
<HEAD> </HEAD>
<BODY> </BODY>
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>
Johannes M. L. Pasquay
Beschreibung, die auf eine HTML-Seite der Version 4.0 hinweist.
Der Seiten-Titel
der Kopf
der Körper
Mit den Tags <HTML> und </HTML> wird die Seite „eingerahmt“.
gibt die Hintergrundfarbe an
hexadezimale Ziffern für Farbwerte
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
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)
256 hoch 3 ergibt folglich 16,7 Mio. Farben
Johannes M. L. Pasquay
<body bgcolor="#0000FF">
S+W, Primär und Sekundärfarben
Johannes M. L. Pasquay
Kommentar (html)
Johannes M. L. Pasquay
<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
Textfarbe Farbe der Links, der Verweise.Hintergrundfarbe
Kommentar (normal)
Johannes M. L. Pasquay
Überschrift (html)
Johannes M. L. Pasquay
<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>
Überschrift (normal)
Johannes M. L. Pasquay
Linie (html)
Johannes M. L. Pasquay
<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>
Linie (normal)
Johannes M. L. Pasquay
Text 1 (html)
Johannes M. L. Pasquay
<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>
Text 1 (normal)
Johannes M. L. Pasquay
Text 2 (html)
Johannes M. L. Pasquay
<!-- 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>
Text 2 (normal)
Johannes M. L. Pasquay
Bild (html)
Johannes M. L. Pasquay
<!-- 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>
Bild (normal)
Johannes M. L. Pasquay
Bildunterschrift (html)
Johannes M. L. Pasquay
<!-- 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>
<BR>
<CENTER><B>Ein Bild - wie nett.</B></CENTER> </body>
</html>
Bildunterschrift (normal)
Johannes M. L. Pasquay
Link (html)
Johannes M. L. Pasquay
<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>
<BR>
Nun wollen wir aber mal nicht vergessen, warum HTML Hyper Text Markup Language heisst: wegen der <I>Verweise</I>, den <I>LINKS</I>.
<BR>
Unser erster Link verweist auf <A HREF="2.Web.htm">eine Seite von mir</A></body>
</html>
Link (normal)
Johannes M. L. Pasquay
E-Mail (html)
Johannes M. L. Pasquay
<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>
<BR>
Nun wollen wir aber mal nicht vergessen, warum HTML Hyper Text Markup Language heisst: wegen der <I>Verweise</I>, den <I>LINKS</I>.
<BR>
Unser erster Link verweist auf <A HREF="2.Web.htm">eine Seite von mir</A>
<BR>
Und hier? Hier kann man mir eine
<A HREF="mailto:[email protected]">elektronische Post</A> schicken!</body>
</html>
E-Mail (normal)
Johannes M. L. Pasquay
Schriftattribute (html)
Johannes M. L. Pasquay
<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>
<BR>
Nun wollen wir aber mal nicht vergessen, warum HTML Hyper Text Markup Language heisst: wegen der <I>Verweise</I>, den <I>LINKS</I>.
<BR>
Unser erster Link verweist auf <A HREF="2.Web.htm">eine Seite von mir</A> <BR>
Und hier? Hier kann man mir eine <A HREF="mailto:[email protected]">elektronische Post</A> schicken!
<BR>
<FONT SIZE="+2"><B>NA? War das etwa schwer?</B></FONT> </body>
</html>
Schriftattribute (normal)
Johannes M. L. Pasquay
2. Webseite (html)
Johannes M. L. Pasquay
<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>
<BR>
<A HREF="1.Web.htm">Zurück zur 1. Webseite</A>.
<BR>
</body>
</html>
2. Webseite (normal)
Johannes M. L. Pasquay
Tabelle (html)
Johannes M. L. Pasquay
<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>
<BR>
<A HREF="1.Web.htm">Zurück zur 1. Webseite</A>.
<BR>
<CENTER><TABLE BORDER="1"></CENTER>
<TR>
<TD WIDTH="200"><STRONG>Überschrift 1</STRONG></TD>
<TD><STRONG>Überschrift 2</STRONG></TD>
</TR>
<TR>
<TD WIDTH="200">Text 1</TD>
<TD>Text 2</TD>
</TR>
</TABLE> </body>
</html>
Tabelle (normal)
Johannes M. L. Pasquay