Kapitel 16: HTML/XHTML I

Transkript

1 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 16-2 Kapitel 16: HTML/XHTML I Literatur: Erik Wilde: World Wide Web Technische Grundlagen. Springer, 1999, ISBN , 641 Seiten. Rainer Klute: Das World Wide Web. Addison-Wesley, 1996, ISBN: X. Dave Raggett, W3C: HTML 3.2 Reference Specification. [ Dave Raggett, Arnaud Le Hors, Ian Jacobs (Eds.): HTML 4.01 Specification. W3C, Dec 24, [ User s Guide to ISO/IEC 15445:2000 HyperText Markup Language (HTML) [ XHTML [tm] 1.0: The Extensible HyperText Markup Language. W3C, Jan 26, [ Stefan Münz: HTML-Dateien selbst erstellen SELFHTML. [ [ Inhalt 1. Einführung, HTML Rahmen, HTML Kopf 2. Text, Schriftarten (Inline-Elemente) 3. Textstruktur (Block-Elemente) 4. Hyperlinks, Bilder 5. Tabellen 6. Frames 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 16-4 Was ist HTML (1) Was ist HTML (2) HTML steht für Hypertext Markup Language HTML ist die Sprache des Web: WWW-Browser (Internet Explorer, Firefox, Opera etc.) zeigen Dateien an, die in der HTML- Syntax verfaßt sind. Diese Dateien können dann eventuell Programme in Javascript oder anderen Programmiersprachen enthalten. Der Rahmen ist aber immer HTML. Man kann HTML mit normalen ASCII Texteditoren erstellen, die keine Formatierungen beinhalten (z. B. Wordpad mit Einstellung Dateityp Textdokument). Es gibt aber auch spezielle WYSIWYG Editoren für HTML, die das Dokument so anzeigen, wie es in einem Browser formatiert würde. Übersicht über HTML-Editoren: Guter HTML-Editor: Phase5 unter oder auf der Übungsseite

2 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 16-6 Was ist HTML? (3) HTML ist eine Anwendung der Standard Generalized Markup Language (SGML). Es gelten also die allgemeinen Syntax-Regeln von SGML, zusammen mit den Element-, Attribut- und Entity-Definitionen der HTML DTD. HTML 4.01 definiert 91 Element-Typen, davon sind aber 10 nur noch aus Kompatibilitätsgründen mit früheren Versionen enthalten und sollen nicht mehr verwendet werden. SGML, DTD Bereits seit 1986 gibt es die als ISO 8879 standardisierte Meta-Sprache SGML (Standard Generalized Markup Language = standardisierte verallgemeinerte Auszeichnungssprache). Diese Meta-Sprache erlaubt das Definieren von Auszeichnungssprachen mit Hilfe so genannter DTDs (Document Type Definitions). In den DTDs wird festgelegt, welche Elemente eine Auszeichnungssprache hat, welche zugehörigen Attribute, sowie Regeln, welche Elemente innerhalb welcher anderen Elemente vorkommen können usw. 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 16-8 XML, HTML (1) Man entschloss sich dazu, eine reduziertere Variante von SGML zu etablieren, und zwar unter dem Namen XML (Extensible Markup Language = erweiterbare Auszeichnungssprache). XML erlaubt ebenso wie SGML das Definieren von Auszeichnungssprachen mit Hilfe von DTDs. HTML, das Anfang der 90er-Jahre entstand, wurde mit Hilfe von SGML definiert. XML, HTML (2) Im Zuge von XML und seiner wachsenden Bedeutung für immer mehr Dateiformate, die auch im Web ihren Einsatz finden, entstand der Wunsch, auch HTML mit Hilfe von XML zu definieren anstatt wie bisher mit SGML. Bis einschlielich HTML 4.x ist das auch heute noch der Fall.

3 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I HTML, XHTML Damit kein Versionenwirrwarr entsteht, entschloss man sich dazu, dieses neue, XML-basierte HTML mit einem neuen Namen und eigener Versionenkontrolle auszustatten. Heraus kam dabei XHTML (Extensible HyperText Markup Language = erweiterbare Hypertext-Auszeichnungssprache). Übersicht XHTML ist also XML-gerechtes HTML. Zusammenfassend: XHTML ist strenger definiert. 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I W3C (World Wide Web Consortium)(1) Gremium zur Standardisierung der das World Wide Web betreffenden Techniken Es wurde 1994 gegründet. Gründer und Vorsitzender des W3C ist Tim Berners-Lee, der auch als der Erfinder des World Wide Web bekannt ist. Das Deutsch-Österreichische Büro hat seit dem 15. April 2009 seinen Sitz an der Fachhochschule Potsdam Man kann eigene Webseiten durch das W3C validieren lassen (Einhaltung der Standards). Webseite dazu z.b.: W3C (World Wide Web Consortium)(2) Warum Validierung? Die fundamentalen Web - Technologien sollen kompatibel zueinander sein. Man soll mit jeder beliebigen Hard- und Software, die eingesetzt wird, auf das Web zugreifen können. Durch das Veröffentlichen von offenen Standards für Web-Sprachen und -Protokolle versucht das W3C, eine Marktfragmentierung - und damit eine Fragmentierung des Web - zu vermeiden. Das W3C bezeichnet dieses Ziel als Web Interoperabilität.

4 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Versionen von HTML (1) HTML 2.0 ist die offizielle Norm, die diejenigen Grundfunktionien von HTML definiert, die von allen (auch den älteren) Web-Browsern sinnvoll dargestellt werden. HTML 3.2 war lange der De-facto-Standard, der diejenigen HTML-Elemente umfate, die von fast allen Browser-Versionen (ab 1996/97) weitgehend unterstützt wurden. HTML 4.0 ist der heutige Standard, der von neueren Browser-Versionen (ab 1997/98) zumindest teilweise unterstützt wird. Versionen von HTML (2) HTML 5 ist ein neuer Vorschlag des W3C-Konsortiums. Mit HTML 5 wird die Sprache grundlegend überarbeitet und erweitert: Zweidimensionale Graphiken zeichnen bessere Einbettung von Video- und Audioinhalten, für die bislang zusätzliche Plugins (z. B. Adobe Flash) eingesetzt werden müssen. zahlreiche neue Elemente HTML 5 soll voraussichtlich ab 2014 HTML 4.01, XHTML 1.0 und DOM (Document Object Model) ersetzen. 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Doctypes(1) Mit der Dokumenttyp-Deklaration (Doctype) beginnt jedes HTML-Dokument und auch jedes XHTML- Dokument. Doctype nimmt Bezug auf die DTD (Dokumenttyp- Definition) und Sprachversion, die in der Datei verwendet wird und an die man sich halten muss. Ein strenger Parser kann die Anzeige der Datei z.b. im Browser verhindern, wenn die Datei syntaktische Fehler enthält. Doctypes(2) Maßgeblich dafür, was ein syntaktischer Fehler ist, ist die DTD, auf die man mit der Dokumenttyp- Deklaration Bezug nimmt. HTML-Variante: <!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN XHTML-Variante: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN

5 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Doctypes(3) Der einfachste gültige Doctype: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN > <!DOCTYPE HTML PUBLIC nennt den Typ -//W3C nennt den Herausgeber mit dem Hinweis, dass dieser ISO-zertifiziert ist +// oder nicht -// //DTD HTML 4.01 Transitional bezeichnet die Sprache (HTML oder XHTML) //EN > ist die Sprache der DTD, momentan immer englisch, hat nichts mit der Sprache der Web-Seite zu tun Doctypes(4) Optional kann noch ein Verweis zum verwendeten Doctype angegeben werden: > nun kann der Browser immer auf die entsprechende DTD zurückgreifen. TRANSITIONAL bezeichnet eine Spezifikation vom HTML außer TRANSITIONAL kann noch STRICT oder FRAMESET verwendet werden. 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Beispiele für verschiedene Versionen Dokumenttyp-Deklaration für HTML 2.0: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> Dokumenttyp-Deklaration für HTML 3.2: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> Dokumenttyp-Deklaration für HTML 4.01 Transitional mit Verweis: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " HTML Beispiel <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>mein erstes HTML-Dokument</title> </head> <body> <h1>gruß</h1> <p>hallo Freunde!</p> </body> </html>

6 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I XHTML Beispiel <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>mein erstes XHTML Dokument</title> </head> <body> <h1>gruß</h1> <p>hallo Freunde!</p> </body> </html> Das HTML-Element Jedes HTML-Dokument hat ein Element vom Typ HTML als Wurzelelement. D.h. HTML-Dokumente sind immer durch <HTML>... </HTML> geklammert, allerdings sind beide Tags optional. 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I HEAD (1) Das HEAD-Element enthält Informationen über das Dokument, wie Titel, Meta-Daten für Suchmaschinen, typisierte Links auf andere Dokumente, Style Sheets, Programmcode. Die Daten im HEAD-Element erscheinen nicht im eigentlichen Dokumentfenster. im HEAD-Element ist ein TITLE-Element notwenig. Außerdem sind im HEAD-Element die Element-Typen SCRIPT, STYLE, META, LINK, OBJECT erlaubt. TITLE Das HEAD-Element muß genau ein TITLE-Element enthalten. Innerhalb des TITLE-Elementes ist nur reiner Text erlaubt. Der Text des TITLE-Elementes erscheint im oberen (meist blauen) Querbalken des Browsers. Suchmaschinen zeigen normalerweise den Dokument- Titel im Suchergebnis an.

7 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I META BODY (1) Das Element META enthält Meta-Daten über das Dokument, insbesondere Informationen für Suchmaschinen. Z.B. sollte man Schlüsselworte für die Eintragung in Suchmaschinen so definieren: <META name="keywords" content="html, halle, vorlesung"> Das Attribut content ist im Meta-Element notwendig, außerdem muß eines der beiden Attribute name oder http-equiv verwendet werden. Das BODY-Element enthält den eigentlichen Text des Dokumentes. Inhalt von BODY sind alle Elemente (Inlineelemente und Blockelemente), z.b. Paragraphen (P) und Überschriften (H1, H2,...). Innerhalb der Paragraphen, Überschriften, u.s.w. findet sich dann der eigentliche Text (also inline Inhalt). Der Text soll jetzt blockweise in Paragraphen etc. eingeschlossen werden. 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I BODY (2) Man kann in Attributen des BODY-Elementes verschiedene Farben setzen: bgcolor, text, link, vlink, alink. Außerdem kann man in background die URL eines Hintergrundbildes/musters angeben. Man kann entweder Farbnamen verwenden (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow) oder die RGB-Werte hexadezimal angeben: #RRGGBB. Besser ist jedoch, wenn man Eigenschaften wie Farben in Stylesheets definiert. BODY (3) Beispiel für ein BODY-Element: <body text="#0070a5" bgcolor="#ffffff" link="#00324a" alink="#9fe0ff" vlink="#a0a0a0" background="../background.gif">

8 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Inhalt Text, Entity-Referenzen (1) 1. Einführung, HTML Rahmen, HTML Kopf 2. Text, Schriftarten (Inline-Elemente) 3. Textstruktur (Block-Elemente) 4. Hyperlinks, Bilder 5. Tabellen 6. Frames Normaler Text kann direkt eingeben werden. Falls der Editor keine Umlaute mit ISO Latin 1 Codes (ISO ) beherrscht, können sie als Zeichenreferenzen oder mit Entity-Referenzen eingegeben werden: ä für ä (a-umlaut), Ä für Ä, ö für ö (o-umlaut), Ö für Ö, ü für ü (u-umlaut), Ü für Ü, ß für ß (s-z-ligatur). 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Text, Zeilenumbrüche (1) Text, Entity-Referenzen (2) Weil die Zeichen <, >, und & eine spezielle Bedeutung haben, können sie im Text nicht direkt eingeben werden. Für sie sind auch Entities definiert: < für < und > für > & für & Der Browser wählt normalerweise die Zeilenumbrüche selbst, da der HTML Autor nicht weiß, wie breit das Fenster des Browsers ist, welchen Zeichensatz der Benutzer gewählt hat. Ein Browser schreibt normalerweise so lange Worte in die aktuelle Zeile, bis das nächste Wort nicht mehr hineinpaßt. Dann beginnt er eine neue Zeile. Daher ist kein horizontaler Scrollbar erforderlich. Eine beliebige Folge von Leerzeichen, TAB-Zeichen, Form Feeds, Zeilenumbrüchen wird wie ein einzelnes Leerzeichen behandelt.

9 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Text, Zeilenumbrüche (2) Man kann das Leerzeichen zwischen zwei Worten durch ( no-break space ) ersetzen. Dann findet zwischen diesen beiden Worten kein Zeilenumbruch statt. Es wird aber ein Leerzeichen gesetzt. Beispiel: Z.B. ist nach einem Abkürzungspunkt ein Zeilenumbruch schlecht. Auch bei: 7 kg, Aufgabe 3, A. Herrmann. BR Zeilenumbruch Man kann Zeilenumbrüche mit dem Element BR erzwingen ( forced line break ): Erste Zeile.<BR> Zweite Zeile. BR zählt zu den Inline-Elementen, kann also überall dort stehen, wo normaler Text erlaubt ist. 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I PRE Vorformatierter Text Mit <PRE>...</PRE> ( Preformatted Text ) kann man Text einschließen, der mit den vorgegeben Zeilenumbrüchen angezeigt wird. Sonst müßte man alle Leerzeichen in umwandeln und <BR> an jedem Zeilenende verwenden. Außerdem werden auch mehrere Leerzeichen hintereinander beachtet, die normalerweise zu einem Leerzeichen verschmolzen werden. Auszeichnung von Worten Innerhalb eines Textes können Worte oder Phrasen markiert werden, z.b. als Programmcode, als definierendes Vorkommen eines Wortes, als hervorgehoben/betont etc. Normalerweise stellen Browser so markierte Worte/Phrasen in einem anderen Zeichensatz dar (z.b. fett oder kursiv). EM: Betonung (z.b. kursiv). STRONG: Starke Betonung (z.b. fett).

10 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Zeichensatz-Angaben Man kann auch explizit Zeichensätze verlangen (physische Zeichensatzangaben). TT: Teletype (Zeichen haben feste Breite). I: kursiv. B: fett. BIG: grosse Schrift. SMALL: kleine Schrift. Zeichensatz-Angaben (7) Ab HTML 3.2 gibt es ein Element FONT mit den Attributen size: Größe zwischen 1 und 7, auch relativ, z.b. +1. color: Farbe, z.b. #FF0000 oder red für rot. U: Unterstrichener Text. S, STRIKE: Durchgestrichener Text. 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Inhalt SUP, SUB: Exponenten und Indizees Mit dem Element SUB ( subscript ) markiert man Indizees, entsprechend gibt SUP ( superscript ) Exponenten: x₂ liefert x 2. x² liefert x Einführung, HTML Rahmen, HTML Kopf 2. Text, Schriftarten (Inline-Elemente) 3. Textstruktur (Block-Elemente) 4. Hyperlinks, Bilder 5. Tabellen 6. Frames

11 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I P Paragraphen Paragraphen (Absätze) enthalten den normalen Text des Dokumentes. Es gibt aber auch andere Container für Text, zum Beispiel das Element LI (List Item, Punkt in einer Liste). Das Start-Tag ist also zwingend, aber nicht das End-Tag. Innerhalb des P-Tags kann eine (möglicherweise leere) Folge von Textstücken und Inline-Elementen stehen (z.b. TT, A,...). P selbst ist ein blockweises Element. H1,..., H6: Überschriften (1) Überschriften verschiedener Stufen werden mit den Elementen H1 bis H6 markiert. Z.B. sind H1 Kapitel-Überschriften, H2 Überschriften von Abschnitten innerhalb von Kapiteln, H3 Überschriften von Unterabschnitten, etc. Überschriften sind Block-Elemente, sie dürfen also z.b. nicht innerhalb von Paragraphen stehen. Das ist kein Problem, da das End-Tag von Paragraphen optional ist. Wenn der HTML-Parser ein z.b. H1 sieht, schließt er den vorangegangenen Paragraphen automatisch. 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I H1,..., H6: Überschriften (2) HR: Trennlinien <H1>Erstes Kapitel</H1> <P>Einleitung des ersten Kapitels <H2>Erster Abschnitt des ersten Kapitels</H2> <P>... <P>... <H2>Zweiter Abschnitt des ersten Kapitels</H2> <P>... <H1>Zweites Kapitel</H1> <H2>Erster Abschnitt des zweiten Kapitels</H2> <P>... HR ( horizontal rule ) kann man verwenden, um horizontale Trennlinien zwischen Textteilen zu ziehen. Beispiel: <P> <HR> <H2>Überschrift</H2> <HR> Überschrift

12 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I UL, OL: Listen (1) UL, OL: Listen (1) In HTML gibt es (Beispiel ungeordnete Liste): Ungeordnete Listen (UL) Geordnete Listen (OL) Quelltext dazu: In HTML gibt es (Beispiel ungeordnete Liste): <UL> <LI>Ungeordnete Listen (UL)</LI> <LI>Geordnete Listen (OL) </LI> </UL> In HTML gibt es (Beispiel geordnete Liste): 1. Ungeordnete Listen (UL) 2. Geordnete Listen (OL) Quelltext dazu: In HTML gibt es (Beispiel geordnete Liste): <OL> <LI>Ungeordnete Listen (UL)</LI> <LI>Geordnete Listen (OL) </LI> </OL> 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I UL, OL: Listen (2) DIV - Container (1) UL und OL sind Block-Elemente. Start- und End-Tag sind notwendig. Bei LI ist nur das Start-Tag notwendig, das End- Tag kann entfallen. Weil auch Block-Elemente innerhalb von LI erlaubt sind, können Listen geschachtelt werden. Normalerweise werden die Listen-Elemente etwas eingerückt dargestellt. DIV ( Division ) ist wie SPAN ein Container-Element ohne eigene Semantik. Beide werden vor allem in Stylesheets verwendet. Vor und nach einem DIV-Element gibt es einen Zeilenumbruch, bei SPAN (ohne Stylesheet) dagegen nicht. Man kann mit DIV/SPAN einen Teil des Textes markieren, z.b. um ihn in Stylesheets zu referenzieren.

13 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I DIV - Container (2) Beispiel: <DIV class="telefon"> <SPAN class="name">herrmann</span>: <SPAN class="nr"> </span> </DIV> <DIV class="telefon"> <SPAN class="name">goldberg</span>: <SPAN class="nr"> </span> </DIV> Zusammenf. Block-Elemente Es gibt folgende Block-Elemente Paragraphen: P. Überschriften: H1, H2, H3, H4, H5, H6. Listen: UL, OL, DL. Vorformatierten Text: PRE. Zitate: BLOCKQUOTE. Trennlinien: HR. Sonstige: DIV, NOSCRIPT, FORM, TABLE, FIELDSET. 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Inhalt 1. Einführung, HTML Rahmen, HTML Kopf 2. Text, Schriftarten (Inline-Elemente) 3. Textstruktur (Block-Elemente) 4. Hyperlinks, Bilder 5. Tabellen A: Hypertext-Links (1) Ein Link hat zwei Enden, die Anker genannt werden. Mit dem Element A und dem Attribut href kann man einen Quell-Anker (Verweis) in einen Text einfügen: Siehe auch <A href=" 6. Frames

14 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I A: Hypertext-Links (2) Der Ziel-Anker kann ein beliebiges Dokument im WWW sein. Es muß nicht notwendigerweise im HTML- Format vorliegen (z.b. auch Bilder, Programme, PS/PDF-Dateien). Ist das Ziel des Verweises ein HTML-Dokument, so kann man nicht nur auf das Dokument als Ganzes verweisen, sondern auch auf einen Ziel-Anker im Inneren (siehe unten). A: Hypertext-Links (3) Hypertext-Links (Quell-Anker) werden vom Browser im Text normalerweise farbig und unterstrichen dargestellt. Bewegt der Benutzer den Mauszeiger auf einen solchen Link, zeigen Browser normalerweise die im href-attribut spezifizierte URL in der Fußzeile an. Außerdem ändert sich häufig die Form des Mauszeigers. Mit der Angabe: target= blank kann für den Inhalt des Verweises ein neues Fenster geöffnet werden. 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I A: Hypertext-Links (4) Was beim Anklicken ( Aktivieren ) des Links passiert, hängt von der URL, dem Medientyp des Zieldokumentes, und von der Konfiguration des Browsers ab: HTML-Dokumente, ASCII-Dateien, Bilder, etc. werden normalerweise in das gleiche Browser-Fenster geladen. Man kann den Browser so konfigurieren, daß er für bestimmte Medientypen Hilfsprogramme aufruft, die das Dokument anzeigen (z.b. Acrobat- Reader für.pdf). A: Hypertext-Links (5) Reaktionen auf Link-Aktivierung, Forts.: Bei URLs vom Typ mailto: wird ein Mail-Programm aufgerufen (besserer Stil: -Adresse als Link- Text): <A href="mailto:herrmann@informatik.uni-halle.de"> A. Herrmann</A> Wenn man target="_blank" angibt, wird das Dokument in einem neuen Fenster angezeigt (s.u.): <A href=" target="_blank" >World Wide Web Consortium</A>

15 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I A: Hypertext-Links (6) Reaktionen auf Link-Aktivierung, Forts.: Kennt der Browser den Medientyp nicht, so bietet er an, die Daten als Datei abzuspeichern ( Download ). Ein Link kann auch unter einem Bild liegen (Image- Maps) Es kann auch ein telnet-fenster geöffnet werden (mit telnet: URLs), ein News-Reader (news:, nntp:), etc. A: Verweis-Ziele Ein Ziel-Anker wird mit dem Element A und dem Attribut name markiert: <H1><A name="dns">2. Domain Name System</A><H1> Quell-Anker (Verweise) werden im Text des Browsers meist farbig und unterstrichen dargestellt, Ziel- Anker sind in der Ausgabe nicht sichtbar. Um auf die markierte Stelle zu verweisen, fügt man der Dokument-URL einen Fragment Identifier an (nach # ): Siehe <A href=" 2</A>. oder <A href="#dns">kapitel 2</A> 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I IMG: Bilder (1) Mit dem Element-Typ IMG ( image ) können Bilder in eine HTML-Seite eingebettet werden. Die Bilder sind nicht selbst in HTML spezifiziert, sondern in Formaten wie GIF, JPEG, PNG. Die Bilddaten stehen in eigenen Dateien (eine pro Bild). Die HTML-Datei enthält nur die URLs dieser Dateien. Der Browser lädt die in IMG-Elementen referenzierten Bild-Dateien automatisch. IMG: Bilder (2) IMG-Elemente sind leer und enthalten die URL der Bild-Datei in dem Attribut src. Das Attribut alt enthält einen kurzen Text, der angezeigt wird, falls das Bild selbst nicht angezeigt werden kann: Beispiel: <IMG src="institut.jpg" alt="institutsgebäude" width="256" height="192"> Oft wird einem Bild ein Verweis auf eine Version in höherer Auflösung hinterlegt: <A href="gross.jpg"><img src="klein.jpg"...></a>

16 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Zusammenfassung zu Links Inhalt Verweise auf andere Dokumente im WWW gibt es bei folgenden Elementen: A, AREA, LINK, BASE: href IMG: src, longdesc, (usemap) FORM: action INPUT: src, (usemap) HEAD: profile SCRIPT: src, (for) 1. Einführung, HTML Rahmen, HTML Kopf 2. Text, Schriftarten (Inline-Elemente) 3. Textstruktur (Block-Elemente) 4. Hyperlinks, Bilder 5. Tabellen 6. Frames 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Allgemeines Tabellen dienen dazu, Daten in Form von Zeilen und Spalten zu präsentieren: Version Veröffentlicht am: HTML HTML HTML Ohne Tabellen wäre eine mehrspaltige Ausgabe nur mit einem Zeichensatz fester Breite (TT) zu realisieren. Einfache Tabellen (1) Tabellen werden in das Element TABLE eingeschlossen. Der Inhalt von TABLE eine Folge von TR-Elementen ( table row ), also Tabellenzeilen. Innerhalb jeder Tabellenzeile steht eine Folge von TD-Elementen ( table data cell ). Jedes TD-Element beschreibt einen Tabellen-Eintrag. Im Tabellenkopf wird TH verwendet.

17 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Einfache Tabellen (2) Beispiel: <TABLE> <TR><TH>Vorlesung <TH>Dozent <TH>Zeit <TR><TD>DB-I <TD>Brass <TD>Di <TR><TD>ASQ <TD>Herrmann <TD>Mi </TABLE> Diese Tabelle wird folgendermaßen dargestellt: Vorlesung Dozent Zeit DBI Brass Di ASQ Herrmann Mi Einfache Tabellen (3) Man kann mit dem Attribut border Trennlinien verlangen und die Breite setzen: <TABLE border=3> Ein Kasten erscheint nur für nicht-leere Tabellen- Einträge (evtl. ). 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Einfache Tabellen (4) Mit dem Attribut cellspacing kann man den Leerplatz zwischen den Kästen setzen, mit dem Attribut cellpadding den Leerplatz innerhalb des Kästchens bis zu den Daten: <TABLE border=1 cellspacing=5 cellpadding=3> 5 3 DB-I 3 5 Einfache Tabellen (5) Die Ausrichtung der Daten kann man mit folgenden Attributen wählen: align: Horizontale Ausrichtung (left, center, right) left center right valign: Vertikale Ausrichtung (top, middle, bottom) top middle bottom Diese Attribute können in (TD bzw. TH) festgelegt werden, oder auch in (TR), dann gelten sie für alle Einträge in dieser Zeile.

18 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Einfache Tabellen (6) Der Browser berechnet die nötige Breite der Spalten automatisch. Im einfachsten Fall (die errechneten Spaltenbreiten sind zusammen nicht breiter als das Browserfenster) ist die Breite einer Spalte die maximale Breite ihrer Tabelleneinträge. Dozent Herrmann Brass Einfache Tabellen (7) Ansonsten führt der Browser auch Zeilenumbrüche in den Tabellen-Einträgen durch. Man kann die Breite einer Tabelle mit dem Attribut width setzen: <TABLE width="70%" border=1> 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Einfache Tabellen (8) Einfache Tabellen (9) Im Innern eines Tabellen-Eintrags (TD, TH) sind Text, Inline-Elemente, und Block-Elemente möglich,und man kann also z.b. mit BR explizit einen Zeilenumbruch verlangen, oder mit P, UL, etc. strukturierten Text eingeben. Insbesondere ist es auch möglich, Tabellen zu schachteln. Auch Bilder sind innerhalb von Tabellen erlaubt. In HTML 4.01 transitional haben TABLE, TR, TD, TH noch ein Attribut bgcolor zum Setzen der Hintergrundfarbe. Manchmal müssen sich einzelne Tabelleneinträge über mehr als eine Tabellenzeile/Tabellenspalte erstrecken.

19 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Einfache Tabellen (10) Dazu haben TD und TH die Attribute colspan und rowspan, mit denen man die Anzahl der überdeckten Spalten und Zeilen des Tabellengitters wählen kann. Spalte 1 Spalte 2 Spalte3 Großer Eintrag Eintrag (1,3) 2Zeilen 2Spalten Eintrag (2,3) Eintrag (3,1) Eintrag(3,2) Eintrag (3,3) Einfache Tabellen (11) Überdeckte Tabellen-Einträge werden nicht extra angegeben. Die obige Tabelle hat folgende Struktur: <TABLE> <TR><TH>Spalte 1 <TH>Spalte 2 <TH>Spalte 3 <TR><TD rowspan=2 colspan=2>... <TD>(1,3) <TR><TD>(2,3) <TR><TD>(3,1) <TD>(3,2) <TD>(3,3) </TABLE> Zum Beispiel enthält das dritte TR-Element nur <TD>(2,3) weil die ersten beiden Spalten schon durch das vergrößerte Element der darüberliegenden Zeile abgedeckt sind. 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Einfache Tabellen (12) Inhalt Tabellenüberschrift mit dem Element CAPTION <TABLE> <CAPTION>Tabelle 3: Beispiel für colspan/rowspan</caption> <TR>... In CAPTION kann nur Text sein. Wenn es vorkommt, muß es das erste Element innerhalb von TABLE sein (vor den TR-Elementen). Der CAPTION-Text wird oberhalb der Tabelle angezeigt. 1. Einführung, HTML Rahmen, HTML Kopf 2. Text, Schriftarten (Inline-Elemente) 3. Textstruktur (Block-Elemente) 4. Hyperlinks, Bilder 5. Tabellen 6. Frames

20 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Allgemeines (1) Frames dienen dazu, das Fenster des Browsers in mehrere Unterfenster aufzuteilen. In jedem dieser Unterfenster (Frames) kann man ein eigenes HTML-Dokument anzeigen. Typische Anwendung: Banner Inhalt Dokument Allgemeines (2) Im Beispiel zeigt der Browser gleichzeitig vier Dateien an: die Hauptdatei, die die Aufteilung des Fensters bestimmt, und jeweils eine Datei für Banner, Inhalt, und Dokument. Die Hauptdatei enthält das Element FRAMESET anstelle von BODY. 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Frame Definition (3) Frame Definition (4) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <HTML> <HEAD><TITLE>Beispiel für Frames</TITLE></HEAD> <FRAMESET rows="70,*"> <FRAME src="f_banner.gif"> <FRAMESET cols="20%,80%"> <FRAME src="f_toc.html"> <FRAME src="f_doc1.html" name="doc"> </FRAMESET> <NOFRAMES><P>Ihr Browser versteht keine Frames.</NOFRAMES> </FRAMESET> </HTML> Mit scrolling=no können Scrollbars ausgeschaltet werden, mit scrolling=yes können sie fest eingeschaltet werden. Trennlinien zwischen den Frames können mit frameborder=0 ausgeschaltet werden. Mit marginwidth und marginheight kann man horizontalen (links, rechts) bzw. vertikalen (oben, unten) Leerplatz zwischen den Framegrenzen und dem Inhalt verlangen.

21 16. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I Veränderung von Frame-Inhalten (1) Man kann bei den Elementen A, BASE LINK, AREA, FORM angeben, in welchem Frame das referenzierte Dokument geöffnet wird, falls dieser Verweis aktiviert (angeklickt) wird. Dazu dient das Attribut target in diesen Elementen. Es enthält den Namen des Ziel-Frames. Der Name wird im FRAME-Element mit dem Attribute name definiert. Veränderung von Frame-Inhalten (2) Gibt es einen Frame dieses Namens, so wird das Dokument in diesem Frame geöffnet. Gibt es keinen solchen Frame, so wird ein neues Fenster geöffnet, und dem Fenster dieser Frame- Name zugewiesen. Es gibt außerdem die speziellen Frame-Namen _blank: eröffnet immer ein neues Fenster, _self: dieser Frame, _parent: direkt übergeordnetes Frameset, löscht Frames. _top: Hauptfenster, löscht alle Frames.