Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
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
2
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
3
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
4
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
5
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
6
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
7
Aufbau einer HTML-Seite
Der Kopf (HEAD) <HEAD> </HEAD> Der Körper (BODY) <BODY> </BODY> Johannes M. L. Pasquay
8
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
9
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
10
S+W, Primär und Sekundärfarben
Johannes M. L. Pasquay
11
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
12
Kommentar (normal) Johannes M. L. Pasquay
13
Ü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
14
Überschrift (normal) Johannes M. L. Pasquay
15
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
16
Linie (normal) Johannes M. L. Pasquay
17
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
18
Text 1 (normal) Johannes M. L. Pasquay
19
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
20
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
21
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
22
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
23
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
24
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
25
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
26
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
27
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 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 -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- -Anwendung und der Surfer kann eine an den eingetragenen Adressaten abschicken. Meist wird die adresse des Seiteninhabers implementiert. Johannes M. L. Pasquay
28
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 -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- -Anwendung und der Surfer kann eine an den eingetragenen Adressaten abschicken. Meist wird die adresse des Seiteninhabers implementiert. Johannes M. L. Pasquay
29
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 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
30
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
31
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
32
2. Webseite (normal) Johannes M. L. Pasquay
33
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
34
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
Ähnliche Präsentationen
