Kapitel 4 HTML. Hypertext Markup Language

Transkript

1 Kapitel 4 HTML Hypertext Markup Language 1

2 Kapitel 4 HTML 1. World Wide Web (WWW) 2. HTML-Dokumente 3. HTML-Tags 4. Sonderzeichen 5. Farben 6. Hyperlinks 7. Bilder 8. Dynamische HTML-Dokumente 2

3 1. World Wide Web (WWW) World Wide Web (WWW): Das WWW ist ein über das Internet abrufbares und einfach zu bedienendes Informationssystem. Die Daten liegen verstreut auf unzähligen Rechnern in der Welt, die untereinander über das Internet vernetzt sind. Es wurde 1989 am CERN in Genf entwickelt und 1991 zur allgemeinen Benutzung freigegeben. Das WWW ist nicht mit dem Internet selbst gleichzusetzen. Es nutzt das Internet wie andere Internet-Dienste auch, zum Beispiel oder FTP. Das Abrufen der Information erfolgt nach dem Client-Server-Konzept: Der Webserver hält Information in Form von HTML-Dokumenten bereit, bearbeitet die Anfragen des Webclients und schickt ihm die Information in Form von HTLM-Dokumenten zu. Der Webclient ist der Webbrowser (ein Softwareprogramm wie Firefox, Opera, Mozilla, Internet Explorer). Er sendet über das Internet Anforderungen an den Webserver, nimmt dessen Antwort entgegen und stellt die empfangenen HTML-Anweisungen grafisch am lokalen Rechner dar. 3

4 1. World Wide Web (WWW) Client-Server Kommunikation 4

5 1. World Wide Web (WWW) Das WWW basiert auf drei Grundkomponenten: 1. HTML - Die Layoutsprache für vernetzte WWW-Dokumente: HTML wurde speziell für das WWW entwickelt. Das besondere an HTML sind die sog. Hyperlinks, also Verweise zu anderen Dokumenten, die sich auf beliebigen Rechnern befinden und die man sich mit einem Mausklick auf einen solchen Link auf dem eigenen Rechner anzeigen lassen kann. 2. HTTP - Das Kommunikationsprotokoll: Das Hypertext Transfer Protocol definiert, wie Webserver und Webbrowser über das Netzwerk miteinander kommunizieren. Es basiert auf dem Transportprotokoll TCP/IP, welches den Datenaustausch im Internet regelt. HTTPS - HTTP Secure ist ein Weiterentwicklung von HTTP, bei dem der Datentransfer verschlüsselt stattfindet, um z. B. Passwörter zu übertragen. 3. URL - Die einheitliche Adressierung im Internet: Eine URL (Uniform Resource Locator) stellt die Adresse einer beliebigen Ressource im Internet dar. Sie setzt sich aus einem protokollspezifischen und einem allgemeinen Teil zusammen: protokoll://www-server.domain.topleveldomain/homepage-verzeichnis/datei 5

7 HTML-Dokumente: 2. HTML-Dokumente Ein HTML-Dokument ist eine einfache Textdatei. HTML-Befehle ( HTML-Tags ) kennzeichnen bestimmte Stellen im Text und sorgen für die Gliederung bzw. Formatierung des Dokuments. HTML-Tags bestehen fast immer aus einem Start-Tag und einem End-Tag: <tagname>..text..</tagname> Ausnahme z. B.: <br> kennzeichnet einen Zeilenumbruch (ohne </br>) Bei Tags wird nicht zwischen Groß- und Kleinschreibung unterschieden: <HTML> <html> <Html> Dateien, die HTML-Anweisungen enthalten, können mit einem normalen Text-Editor erstellt werden. Der Dateiname muss die Endung.htm oder.html enthalten, damit die HTML-Datei vom Browser als HTML-Dokument erkannt und grafisch dargestellt wird. 7

8 2. HTML-Dokumente Struktur des HTML-Dokuments: Einige Tags sind in jedem Dokument von Notwendigkeit, da sie die entsprechenden Abschnitte (Kopf und Inhalt) kennzeichnen. Das Tag <html>.</html> umrahmt das ganze HTML-Dokument. Das Tag <head> </head> markiert den Dokumentenkopf. Dieser enthält Anweisungen, die für das gesamte Dokument gelten, z.b. den Dokumententitel, der mit <title> </title> angegeben wird und in der obersten Leiste des Browserfensters erscheint. Das Tag <body> </body> umrahmt den eigentlichen Inhalt des Dokuments. Darstellung von normalem Text im Webbrowser: HTML-Anzeigen haben keine feste Zeilenbreite, d.h. der Browser bestimmt selbst, wie lang eine Zeile sein darf und bricht den Text um. Dabei wird der Text an die Breite des Browserfensters angepasst. In der HTML-Datei angegebene Leerzeilen, Leerzeichen und Zeilenumbrüche, die nicht extra markiert sind, werden vom Browser ignoriert; sie werden jeweils vom Browser durch ein Leerzeichen ersetzt. 8

9 2. HTML-Dokumente Jede HTML-Datei besitzt folgenden Aufbau: <html> <head>. <title> </title> </head> <body>. </body> </html> html-tag: Leitet das HTML-Dokument ein und schließt es wieder ab. head-tag: Enthält allgemeine Angaben zur HTML-Datei, z.b. Adressbasis (Arbeitsverzeichnis), Autor, Stylesheets, JavaScript etc. title-tag: Inhalt wird oberster Leiste des Browsers angezeigt, wird für Lesezeichen verwendet und von Suchmaschinen registriert. body-tag: Textkörper - enthält die Information, die im Browserfenster dargestellt wird. Beachte: Verschachtelung von Tags title ist in head enthalten und head in html. 9

10 2. HTML-Dokumente Ein einfaches HTML-Dokument: 10

12 3. HTML-Tags Häufig verwendete HTML-Tags: Überschrift Heading: <hx>... </hx> x=1...6 Wirkung: Hervorhebung, andere Größe Tags können Attribute enthalten, welche die Standardeigenschaften der Tags ändern. Die Attribute stehen im Starttag und bestehen aus einem Namen und einem Wert. Der Wert eines Attributs steht zwischen Anführungszeichen: <h1 align="center"> auch möglich: right, left Absatz Paragraph: <p>... </p> Wirkung: Neuen Absatz beginnen, Zeilenumbruch und etwas Abstand zum vorherigen Text einfügen. Zeilenumbruch Break: <br> Wirkung: Zeilenumbruch, d. h. neue Zeile beginnen kein Endetag! Kommentar: <! > Wirkung: Wird nicht dargestellt, dient als Kommentar oder zum Ausblenden. 12

13 3. HTML-Tags Schriftgröße, Schriftart: Schriftgröße: Es gibt 7 verschiedene Schriftgrößen, wobei 3 die Standardgröße ist. Es gibt zwei Möglichkeiten die Schriftgröße mit dem Attribut size festzulegen: Absolut: <font size="x">... </font> x= Relativ zur aktuellen Schriftgröße: Beispiel: <font size="+/-x">... </font> x= <font size="+3">hm</font> Schriftarten wie Arial, Helvetica etc. werden mit dem Attribut face definiert. <ul> <li><font face="arial">arial</font></li> <li><font face="times New Roman">Times New Roman</font></li> <li><font face="courier">courier</font></li> </ul> 13

14 3. HTML-Tags HTML-Tags für Texthervorhebungen: (jeweils mit Start- und Ende-Tag zu verwenden!) DarstellungsorientierteTags: <b> <u> <i> <tt> <sup> <sub> fettgedruckt (bold) möglichst nicht verwenden (underlined) Schrägschrift (italics) nicht proportionaler Zeichensatz ( Hallo statt Hallo ) hochgestellt tiefgestellt Inhaltsorientierte Tags werden je nach Browser unterschiedlich interpretiert: <em> meist als Schrägschrift ( emphasized ) <strong> stärker als emphasized, meist fett <code> als Programmcode darstellen, nicht proportionalen Zeichensatz verwenden <cite> nachfolgenden Text als Zitat darstellen <abbr> als Abkürzung darstellen ( abbreviation ) 14

15 3. HTML-Tags Aufzählungen (Listen): Einfache Aufzählung (engl. unordered list ): <ul> <li> </li> <li>.</li> <ul>: <li>: Tag, in das die gesamte Aufzählung einzubetten ist. Tag zum Einfügen neuer Aufzählungspunkte. </ul> Nummerierte Aufzählung (engl. ordered list ): <ol> </ol> <li> </li> <li>.</li> <ol>: <li>: Tag, das die nummerierte Aufzählung umrahmt. (Mit dem Attribut start kann der Beginn der Nummerierung festgelegt werden.) Tag zum Einfügen neuer Aufzählungspunkte. 15

16 3. HTML-Tags 16

17 3. HTML-Tags <table border="4"> <tr> <th>i</th> <th>quadrat</th> <th>3. Potenz</th> </tr> <tr align="center"> <td>1</td> <td>1</td> <td>1</td> </tr> <tr align="center"> <td>2</td> <td>4</td> <td>8</td> </tr>... </table> Tabellen: Eine HTML-Tabelle ist zeilenweise aufgebaut. Die Zellen der ersten Zeile können als Tabellenkopf speziell gekennzeichnet werden: <table> </table> - Gesamte Tabelle <tr> </tr> - Tabellenzeile (table row) <th> </th> - Tabellenkopf-Zellen (table header) <td> </td> - Normale Zellen (table data) 17

18 3. HTML-Tags Weitere HTML-Tags: SELFHTML HTML Dateien selbst erstellen von Stefan Münz MSDN Library von Microsoft Mit der Suchfunktion nach der Seite DHTML Objects suchen... 18

20 Sonderzeichen: 4. Sonderzeichen Die folgenden Sonderzeichen <, >, ", & haben in einer HTML-Datei eine spezielle Bedeutung. Sollen diese Zeichen im Text verwendet werden, müssen sie speziell markiert werden: & leitet ein Sonderzeichen ein und ; schließt es ab: < < > > & & " " non breaking space Leerzeichen Länderspezifische Zeichen: ä ä Ä Ä ö ö Ö Ö ü ü Ü Ü ß ß 20

22 Farben: 5. Farben Farben können in HTML-Dokumenten auf zwei verschiedene Arten angegeben werden: als Farbname (red, yellow, green usw.) oder als 6-stellige Hexadezimalzahl, die den sog. RGB-Wert festlegt. RGB-Farbschema: Jede Farbe ergibt sich aus einer Mischung der drei Grundfarben Rot, Grün und Blau. Zur Codierung eines Farbwertes wird ein 24-Bit Wert verwendet, in dem jede dieser drei Grundfarben durch einen 8-Bit Wert repräsentiert wird. Jede dieser Grundfarben steuert somit einen Farbanteil zwischen 0 und 100% (entspricht den Werten 0 und 255) zur Mischfarbe bei. RGB-Wert: #rrggbb - 6 Hexadezimalziffern für 24 Bit Je zwei Hexadezimalziffern geben den Beitrag einer Grundfarbe zur Mischfarbe im Bereich von 0 bis 255 (entspricht 00 bis ff im Hexadezimalsystem) an. 22

23 5. Farben Farben werden auf eine von 2 Arten angegeben : Standardisierte Farbnamen: leicht lesbar, aber nur 16 Farbnamen sind definiert RGB-Farbwert hexadezimal: zum Beispiel: #CCFFFF #0C37F3 rot grün blau 23

24 5. Farben Verwendung von Farben: Farbeinstellungen, die das ganze Dokument betreffen, werden durch entsprechende Attribute im body-tag definiert. Attribute: bgcolor text link vlink Hintergrundfarbe (Background Color) Farbe für den Text Farbe nicht besuchter Links Farbe bereits besuchter (angeklickter) Links Beispiele: <body bgcolor="#0000ff"> <body text="red"> <body text="red" link="#0000ff"> blauer Hintergrund Text rot Text rot, Links blau Farbeinstellungen, die nur einen bestimmten Bereich betreffen, werden über das color-attribut des font-tags definiert: <font color="green">informatik</font> Informatik 24

26 6. Hyperlinks Hyperlinks sind Verlinkungen auf Stellen im gleichen Dokument, auf Dateien auf dem eigenen Rechner und auf Dateien im Internet. Beachte: Die Datei index.html im obigen Bsp. gibt es mehrmals auf 26

27 Hyperlinks ins Web: <a> href "URL" 6. Hyperlinks <a href="url">text</a> <a href=" München</a> Anker-Tag ( anchor ) hypertext reference legt das Verweisziel fest. Gibt den Ort an, an dem sich die Datei befindet, die nach einem Mausklick auf den Link geladen wird. Definiert das verwendete Übertragungsprotokoll. Der von den Anker-Tags eingeschlossene Bereich wird als aktives Element in der Regel unterstrichen dargestellt. Dies kann ein normaler Text, eine Überschrift, ein Element einer Tabelle oder auch ein Bild sein. <a href=" Überschrift als Link... 27

28 6. Hyperlinks URL (Uniform Resource Locator): protocol://host.domainname/pfad/dateiname protocol: Vorschrift, wie die Datei übertragen wird host.domain: Name des Webservers (meist www ).Name des Netzwerks pfad: Pfadname - Verzeichnis, in dem sich die Datei befindet dateiname: Dateiname des Dokuments URLs zu Dateien auf anderen Rechnern: URLs zu Dateien auf dem lokalen Rechner (Windows): file://localhost/c:/temp/demo.html file:///c:/temp/demo.html Beachte: protocol://host.domainname pfad/dateiname Groß-/Kleinschreibung wird ignoriert Groß-/Kleinschreibung kann relevant sein (abhängig vom Betriebssystem, vom Webserver, von den Einstellungen des Webservers ) 28

29 Unterscheidung: Absoluter Link: 6. Hyperlinks In der URL wird der Webserver angegeben und der absolute Pfadname einer Datei und optional eine Stelle im Dokument. Fehlt der Dateiname, so wird die sog. Homepage geladen (Standardseite, oft mit dem Namen index.html). <a href=" <a href=" München</a> Relativer Link: In der URL wird der Webserver nicht angegeben, d. h. die Datei befindet sich auf demselben Webserver wie die Datei, die den Link enthält. Die Lage der zu öffnenden Datei wird relativ zum aktuellen Dokument angegeben (wie bei relativen Pfadangaben in der DOS-Box). <a href="informatik/praktikum.htm >Folien zum Praktikum</a> 29

30 6. Hyperlinks Relative Verlinkung von mehreren Dokumenten: index.html kap info1.html img kap1.html kap2.html bild1.jpg bild2.jpg Im Hyperlink wird nur angegeben, wie man von einer Ausgangsdatei zur Zieldatei kommt. Die allgemeine Form der relative Pfadangabe lautet: <a href="pfad/dateiname"> </a> Beispiele: <a href="info1.html"> <a href="kap/kap1.htm"> <a href="kap/kap2.html"> <a href="../info1.html"> <a href="kap2.html"> könnten z. B. in der Datei index.html verwendet werden Vorteile der relativen Verlinkung: Großes Dokument in mehrere kleinere zerlegen, die schneller geladen werden. Alle Dateien können zusammen verschoben werden, ohne dass die Verlinkung geändert werden muss (z. B. vom lokalen Rechner auf Webserver kopieren). 30

31 6. Hyperlinks 31

33 7. Bilder Bilder: Bilder werden durch einen Link auf eine Bilddatei in ein HTML-Dokument eingebunden. HTML unterstützt die Bildformate: GIF.gif Graphics Interchange Format, 256 Farben, hohe Kompressionsrate, Animation möglich. JPEG.jpg Joint Photographic Expert Group, bis zu 16,7 Mio..jpeg Farben, geeignet für hochauflösende Grafik, komprimiert mit Verlust. PNG.png Portable Network Graphic Format (neuer Standard des W3C), verlustfreie Kompression, 16.7 Mio. Farben, keine Animation. Je höher der Kompressionsfaktor, desto schlechter die Bildqualität, je geringer der Faktor, desto größer die Datei (lange Ladezeit!). Alle Formate sind pixelorientiert (keine Vektorgrafik). Einbinden von Bildern: <img src="pfad" alt="beschreibung"> Rel. Pfandangabe: <img src="img/bild.gif" alt="nur ein Test"> Bild als Link: <a href="siegel.gif"><img src="siegel.gif"></a> 33

35 8. Dynamische HTML-Dokumente Dynamische HTML-Dokumente: HTML bietet umfassende Möglichkeiten Internetseiten interaktiv zu gestalten. Es ist zum Beispiel möglich, kleine Programme oder Applets in die HTML-Seite einzubetten: JavaScript: HTML-Dokument kann JavaScript-Programmteile enthalten. Diese können überall im Dokument eingebaut sein, üblicherweise im Kopf-Bereich. Das Skript wird nicht kompiliert, sondern von einem Interpreter innerhalb des Browsers ausgeführt. Mit <script>.</script> wird der JavaScript-Code vom HTML-Code getrennt. Es gelten strenge Sicherheitseinschränkungen, da das Skript auf dem Rechner des Betrachters (Client) abläuft. JavaScript wird oft im Zusammenhang mit Formularen in der HTML-Seite eingesetzt. Zum Beispiel zur Eingabeüberprüfung oder für einfache Berechnungen. 35

36 8. Dynamische HTML-Dokumente (JavaScript, Beispiel) 36

37 8. Dynamische HTML-Dokumente PHP (PHP Hypertext Preprocessor): Skriptsprache, die auf dem Server ausgeführt wird. Auf dem Webserver muss ein PHP-Prozessor installiert sein. Alles was im Klammerpaar <?php?> eingeschlossen ist, wird als PHP- Kommando aufgefasst, interpretiert und ausgeführt. Das Ergebnis wird an der gleichen Stelle im HTML-Dokument als Textstring eingesetzt. HTML-Dokument mit PHP-Kommandos bekommt die Endung:.php ASP (Active Server Pages): Alternative Skriptsprache zu PHP der Firma Microsoft. Serverseitige Ausführung des Skripts auf Webservern der Firma Microsoft (Microsoft Internet Information Server, IIS). Skriptcode befindet sich zwischen: <% %> Das HTML-Dokument trägt die Endung:.asp 37

38 8. Dynamische HTML-Dokumente PHP-Ausführung auf dem Webserver: Die HTML-Datei mit Endung.php enthält php-anweisungen, die vom Webserver bearbeitet werden. Daraus wird eine HTML-Seite erzeugt, die dann zum Client geschickt wird. 38

39 PHP-Processor 8. Dynamische HTML-Dokumente k310.php Antwort an Client <html> <head> <title>php Beispiel</title> </head> <body> <h2>datum und Uhrzeit</h2> <p>heute ist der <?php echo date("d:m:y");?>. <p>es ist jetzt <?php echo date("h:m:s");?> Uhr. </body> </html> <html> <head> <title>php Beispiel</title> </head> <body> <h2>datum und Uhrzeit</h2> <p>heute ist der 05:11:2006. <p>es ist jetzt 14:11:54 Uhr. </body> </html> Die Datei k310.php liegt auf einem Webserver. Die php-befehle werden ausgeführt. Nur die erzeugte HTML- Datei wird zum Browser geschickt! 39

40 8. Dynamische HTML-Dokumente Java-Applets: Applets sind Java-Programme, die aus HTML-Seiten aufgerufen werden können. Der Browser muss über eine sog. virtuelle Maschine verfügen, d. h. eine Software, die Java-Code ausführen kann. Ein Applet läuft auf dem Client-Rechner als eigenständiger Task ab. (Es gelten strenge Sicherheitseinschränkungen!). Einbindung mit: <applet>.</applet> Beispiel: <applet code="hallowelt.class" width="300" height="200"> Java-fähige Browser zeigen hier ein Applet! </applet> 40