Schulinterne Lehrerfortbildung. HTML Einführung. Staatliche Realschule Bessenbach

Transkript

1 Schulinterne Lehrerfortbildung HTML Einführung Staatliche Realschule Bessenbach (cc) Martin Römpp 2010

2 Grundsätzliches Eine ausführliche Dokumentation aller in diesem Skript angegebenen Funktionen kann im Projekt SELFHTML von Stefan Münz unter abgerufen werden. Hinweise auf diese weiter führende Dokumentation werden auf diese Art gekennzeichnet. Diese Fortbildung soll Ihnen den Einstieg in die Webseiten-Programmierung mit HTML erleichtern. Sie erleichtern sich selbst die Arbeit, wenn Sie neben dem Editor für die Programmierung (z.b. Notepad oder Phase5 ) immer auch ein Browser-Fenster für die o.a. Quelle offen halten. Dieses Dokument wurde unter folgender Lizenz publiziert: Creative Commons Namensnennung-Keine kommerzielle Nutzung-Weitergabe unter gleichen Bedingungen 3.0 Deutschland ( und kann unter der Adresse fortbildung.rs-bessenbach.de abgerufen werden. HTML, eine Seitenbeschreibungssprache HTML (Version 4.0) ist momentan die Standard- Programmiersprache, mit der Web-Seiten erstellt werden (HTML: hypertext markup langugage). Dabei wird jedoch nur beschrieben, in welcher Formatierung, an welchem Platz, in welcher Ordnung der Inhalt der Seite im Browser des Benutzers Funktionsweise eines Web-Servers (httpd, Browser, Port) erscheinen soll. HTML-Dateien sind als Klartext-Dateien lesbar und unabhängig vom verwendeten Betriebssystem. Was sich hinter dem mehr oder weniger stumpfsinningen Surfen im Internet verbirgt: Jeder Benutzer verwendet eine Programm, den Internet-Browser (z.b. Mozilla Firefox, Netscape Navigator, MS Internet Explorer, Safari, Epiphany, Opera, ) um Internet-Seiten anzuzeigen. Dabei gibt der Benutzer eine Internet-Adresse in die Adresszeile ein, z.b. ein. Zu dieser Internet-Adresse (rs-bessenbach.de) baut der Computer des Benutzers eine Verbindung auf und fragt nach der angeforderten Seite (/index.htm). Ist kein Seitenname angegeben worden, wird automatisch die Seite index.htm oder index.html gesucht. Der entfernte Computer (rs-bessenbach.de) leitet diese Anfrage intern an seinen Webserver ( weiter, der die gespeicherten HTML-Seiten verwaltet. Der Webserver findet die angegebene Seite und schickt diese mit dem Protokoll ( Sprache ) http an den Computer des Benutzers zurück. Dort liest der Browser des Benutzers den empfangenen HTML-Quellcode, interpretiert ihn ( Welche Anweisungen sind enthalten? ) und zeigt das Ergebnis im Browserfenster an. Ein Webserver macht also (aus Benutzersicht) nichts anderes, als HTML-Daten fürs Anzeigen im Browser eines Benutzers zu verschicken. Aufbau und Pflege von Internet-Präsenzen (FTP, SQL, CMS) Mit dem Protokoll http werden definitionsgemäß nur Anfragen zum Webserver und HTML-Daten vom Webserver verschickt. Es kann also nicht verwendet werden, um auf dem Webserver neue Daten abzulegen oder bestehende Daten zu verändern. Mit dem ftp-protokoll (FTP: file transfer protocol) können Dateien (welcher Art auch immer) auf andere Server übertragen werden. Der klassische Weg um Daten einer Internet-Präsenz zu aktualisieren ist, 2/14 (cc) Martin Römpp, 2010

3 die neuen/ geänderten HTML-Daten auf dem eigenen Rechner zu erstellen/ zu ändern und diese in einem zweiten Schritt dann auf den Webserver per ftp zu übertragen. Der Umfang von Informationen, die im Internet publiziert werden, ist enorm gestiegen. Um die Pflege jedoch nicht allzu langwierig und vor allem nicht noch komplexer zu gestalten, wurden Auswege gesucht. Viele präsentierte Informationen sind eigentlich nicht als HTML-Datei auf dem Werbserver gespeichert; sie werden vielmehr beim Abruf durch den Benutzer z.b. aus einer Datenbank-Abfrage erzeugt. Umfangreiche Web-Auftritte, bei denen sehr viele Informationen von sehr vielen Beteiligten (meist ohne größere Vorkenntnisse) zur Verfügung gestellt werden und aktualisiert werden müssen, basieren heute nahezu immer auf einem CMS (content management system). Dabei geben Benutzer lediglich Text- und Bildinformationen in Formularfelder ein, die per Knopfdruck dann in einer Datenbank abgelegt werden. Greift ein Benutzer auf Inhalte solcher Web- Seiten zu, werden die betr. Seiteninformationen aus einer Datenbank gelesen und in HTML-Code umgewandelt, der dann dem Browser des Abrufenden zur Verfügung gestellt wird. Abgrenzung zu verwandten Themen (z.b. PHP, XML, DHTML, CGI, Java, JavaScript, Flash, ActiveX,) Eine Datenbankabfrage wie auch viele einfachere Funktionen lassen sich mit einer reinen Seitenbeschreibungssprache wie HTML nicht durchführen. Dazu müssen andere Programmiersprachen verwendet werden, dem Webserver zur Verfügung gestellt werden. Wohl fast jedem bekannt sind ActiveX-Controls (von Microsoft), Java und JavaScript- insbesondere durch die Problematik, dass durch in HTML-Seiten eingebettete kleine Programme auch unerwünschte Aktionen auf dem eigenen Rechner ausgeführt werden können. Anders als diese können PHP- und CGI-Programme nur auf dem Webserver selbst ausgeführt werden. Sie stellen keine Gefährdung für den Computer des Benutzers dar und geben ihren Programmcode dem Benutzer nicht preis- die Programme erzeugen als Ausgabe auf dem Webserver HTML-Dateien, die dann dem Browser des Benutzers geschickt werden. Meist merkt ein erst Benutzer gar nicht, dass abgerufene Inhalte nicht aus statischen HTML-Daten bestehen. Im Rahmen dieser Fortbildung wird lediglich auf HTML selbst eingegangen. Jegliche Möglichkeit zur Interaktion von Benutzer und Webserver ist auf das Abrufen der auf dem Webserver bereit liegenden HTML-Seiten beschränkt. Einführung Wie oben bereits beschrieben legen Sie sich am besten gleich ein Lesezeichen (Internet Explorer: Favorit) für die Seite in Ihrem Browser ab. Seitenanalyse: Verwirrend- aber nur auf den ersten Blick! Öffnen Sie die Seite in Ihrem Browser. Klicken Sie nun auf eine freie Stelle (keine Grafik) im angezeigten Dokument mit der rechten Maustaste und wählen Sie SEITENQUELLTEXT ANZEIGEN (Mozilla Firefox) bzw. QUELLTEXT ANZEIGEN (MS Internet Explorer) aus dem Kontextmenü. Versuchen Sie, eine Struktur in dem scheinbaren Durcheinander zu finden. 3/14 (cc) Martin Römpp, 2010

4 HTML-Syntax (Tags und Container, Syntaxfehler!) (Lassen wir für die folgenden Betrachtungen diese Angabe in der ersten Zeile ausser Acht: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">) Tatsächlich beginnt jede HTML-Seite mit <html> und endet mit </html>. Dies ist das Erkennungsmerkmal für den Browser, dass es sich bei dem eingeschlossenen Inhalt um HTML-Code handelt. <html> wird als Tag bezeichnet. Meistens bilden zwei Tags einen Container; dieser gibt Informationen über die im Container enthaltenen Daten an. Ein Container endet mit dem gleichen Tag, mit dem er eingeleitet wurde, nur wird dem Namen ein Schrägstrich / vorangestellt. Kann ein Tag vom Browser nicht interpretiert werden (z.b. weil er falsch geschrieben wurde), wird er samt seines Inhalts vom Browser ignoriert. Ansonsten wird jeglicher Text, der in/ zwischen Tags steht, als Text im Browser angezeigt. Grundstruktur von HTML-Dateien (<html>, <head>, <title> und <body>) Die Grundstruktur von HTML-Dateien kann mit vier Containern beschrieben werden. Neben dem bereits bekannten <html>- Container ist jedes HTML-Dokument in einen Dokumentenkopf (Container: <head> </head>) und in das eigentliche Dokument (Container: <body> </body>) untergliedert. Innerhalb des Dokumentenkopfs umschließt der Container <title> </title> die Informationen, die als Fenstertitel im Browser angezeigt werden. de.selfhtml.org > HTML/ XHTML > Allgemeine Regeln für HTML > Grundgerüst einer HTML-Datei Hello World in 2 Minuten mit dem Editor (notepad.exe) Sie werden nun ihre erste HTML-Datei mit einfachsten Hilfsmitteln erstellen. Starten Sie dazu den Editor (notepad.exe) mit START PROGRAMME ZUBEHÖR EDITOR. Bauen Sie nun das Grundgerüst ihrer HTML-Seite mit den vier bekannten Containern. nb: Es erleichtert die (eigene) Übersicht ungemein, wenn eine Einrückung ineinander geschachtelter Container vorgenommen wird. Für die Darstellung im Browser macht dies allerdings keinen Unterschied. <html> <head> <title> Meine erste HTML-Seite </title> </head> <body> Hier steht der Text meiner ersten HTML-Seite. Hallo Welt, ich bin im Internet angekommen! :-) </body> </html> 4/14 (cc) Martin Römpp, 2010

5 Speichern Sie diese Datei unter dem Namen hallo.htm ab, wählen Sie jedoch vorher im Feld DATEITYP Alle Dateien aus. Herzlichen Glückwunsch. Sie haben nun Ihre erste HTML-Seite erstellt. Wenn Sie ihren Browser öffnen und dort über das Menü DATEI DATEI ÖFFNEN (Mozilla Firefox) bzw. DATEI ÖFFNEN (MS Internet Explorer) die von Ihnen gespeicherte Datei aufrufen, können Sie die Früchte Ihrer Arbeit betrachten. Einfache HTML-Seitengestaltung Zeilenumbrüche Zu beachten ist, dass in obigem Beispiel der Zeilenumbruch zwischen dem ersten und dem zweiten Satz nicht interpretiert wird. Ein einfacher Zeilenumbruch an einer bestimmten Stelle im Text wird mit dem Tag <br> erzeugt. Soll ein neuer Absatz begonnen werden (1 Zeile Abstand), so kann der Tag <p> geschrieben werden. Geschickter ist es allerdings, den gesamten Absatz in einen Container <p> </p> zu packen. Also: <body> <p>hier steht der Text meiner ersten HTML-Seite.</p> <p>hallo Welt, ich bin im Internet angekommen! :-) </p> </body> de.selfhtml.org > HTML/ XHTML > Elemente zur Textstrukturierung > Zeilenumbruch Text formatieren mit Überschriften-Formatvorlagen (<H1> etc.) Individuelle Textformatierung Eine individuelle Formatierung von Text ist mit dem Container <font> </font> möglich. Über die Attribute size (Schriftgröße), color (Schriftarbe) und face (Schriftart) kann dem im Container eingeschlossenen Text eine individuelle Formatierung der Schrift zugewiesen werden. <body> <p>hier steht der Text meiner <font size= 12 color= red >ersten HTML-Seite. </font> </p> <p>hallo Welt, ich bin im Internet angekommen! :-) </p> </body> 5/14 (cc) Martin Römpp, 2010

6 Der den Attributen zugewiesene Wert wird- wie auch in obigem Beispiel- immer in Anführungszeichen angegeben. Allgemeines Muster: <IrgendeinTag Attribut= Wert > Beachten Sie dabei aber, dass sich die Änderung von auf dieser Art formatiertem Text sehr umständlich gestaltet. Besser ist es, verschiedene Formatvorlagen (Stylesheets) zu definieren, die dann einzelnen Abschnitten mit dem Container <div> </div> und entsprechenden Attributen zugewiesen werden. Mehr dazu im Abschnitt CSS. de.selfhtml.org > HTML/ XHTML > Elemente zur Textstrukturierung > Ältere Elemente zur Schriftformatierung Hyperlinks Der eigentliche Erfolg von in HTML geschriebenen Dokumenten war, dass diese auf einfachste Weise miteinander verknüpft werden können. Der Container <a>.. </a> ermöglicht dies. Wichtige Attribute: href= druck/druckversion.html um das HTML-Dokument druckversion.html im Unterordner druck zu öffnen; href= als Hypertext-Referenz auf eine andere HTML-Seite im Internet; href= für einen -Link. name= textmarke3 um an dieser Stelle im Dokument eine Textmarke namens textmarke3 zu setzen. (Diese kann später mit <a href= seite123.htm#textmarke3 > angesprungen werden.) Im Folgenden fügen wir in unser HTML-Dokument hallo.htm einen Verweis auf unsere -Adresse ein. <a href= > an Bill Gates</a> Dann speichern wir diese Datei unter dem Namen hallo2.htm ab. Da wir nun über zwei HTML-Dateien verfügen, können wir sogleich Verknüpfungen auf die jeweils andere HTML-Datei einfügen. In hallo.htm fügen wir ein (Anschließend Speichern nicht vergessen!): <a href= hallo2.htm >Klick mich für Hallo2.htm</a> In hallo2.htm fügen wir ein (Anschließend Speichern nicht vergessen!): <a href= hallo.htm >Klick mich für Hallo.htm</a> 6/14 (cc) Martin Römpp, 2010

7 Jetzt das im Browser geöffnete betrachten Nachdem die F5-Taste bzw. ANSICHT AKTUALISIEREN im Menü aufgerufen wurde, werden die gespeicherten HTML-Daten auch korrekt angezeigt. Es müsste nun möglich sein, zwischen beiden HTML-Dateien hin- und herzuklicken. de.selfhtml.org > HTML/ XHTML > Verweise (Links) Phase 5 Einführung und Überblick Nachdem die ersten Gehversuche mit einem primitiven Editor funktioniert haben, verwenden wir im Folgenden ein Programm, das nicht wirklich etwas anderes als der Editor macht, jedoch in der Erstellung (umfangreicher) HTML-Projekte einiges an Erleichterungen zu bieten hat. Dieses Programm ist zum nichtkommerziellen Gebrauch (daher auch für uns ) kostenlos im Internet beziehbar unter Der Programmaufruf erfolgt über Start PROGRAMME PHASE 5 HTML-EDITOR EDITOR PHASE 5. Zunächst legen wir mit Projekt Neues Projekt den Pfad zu unseren HTML-Dateien fest. Nennen wir unser Projekt HTML-FB. Hier muss lediglich im Register Lokale Verzeichnisse im Feld Stammordner für Ihre Homepage-Dateien der Ablageort der bereits erstellten Dateien hallo.htm und hallo2.htm durch Anklicken eingetragen werden. Sobald diese Einstellungen getroffen sind, fällt sofort auf, dass die HTML-Tags farbig hervorgehoben sind ( syntax highlighting ). 7/14 (cc) Martin Römpp, 2010

8 Ebenso ist jede Zeile mit einer Zeilennummer versehen. Beachten Sie jedoch, dass die Zeilennummern nicht tatsächlich im HTML-Quellcode stehen. Wer sich davon überzeugen möchte, öffnet die Dateien nochmals mit dem Editor (notepad.exe). Viele nette Features, die dem HTML-Programmierer das Leben erleichtern. Zwei davon seien vorab erwähnt: 1. Wenn Sie einen Container öffnen (d.h. den Anfangs-Tag schreiben), wird der zweite Tag automatisch ergänzt. 2. (Deutsche) Umlaute werden automatisch in die entsprechenden HTML-Äquivalente konvertiert. (Aus ä wird ä, aus ö wird ö, aus ü wird ü, aus Ä wird Ä kapiert? Achja: aus ß wird ß.) 3. Alle geöffneten HTML-Dateien sind als Dateireiter im Hintergrund schnell anwählbar; mit STRG + TAB kann schnell zwischen den Dateien umgeschaltet werden. 4. Die Pipette rechts oben in der Symbolleiste Aber zu Farben kommen wir später. de.selfhtml.org > HTML/ XHTML > Allgemeine Regeln für HTML > Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen Erweiterte HTML-Seitengestaltung Metainformationen In den im <head>-abschnitt des HTML-Dokuments kann z.b. Information über den Autor der Seite notiert werden. Aber auch andere Informationen, die hauptsächlich für Suchmaschinen interessant sind, werden hier angegeben. <meta name="description" content="hilft beim Zu-/ Einordnen"> <meta name="author" content="jake & Elwood"> <meta name="keywords" content="jake, Elwood, Blues Brothers"> de.selfhtml.org > HTML/ XHTML > HTML-Kopfdaten > Meta-Angaben zum Inhalt 8/14 (cc) Martin Römpp, 2010

9 Farbgestaltung Im HTML-Code können die folgenden 16 Grundfarben über ihren Farbnamen angesprochen werden. black (#000000), gray (#808080), maroon (#800000), red (#FF0000), green (#008000), lime (#00FF00), olive (#808000), yellow (#FFFF00), navy (#000080), blue (#0000FF), purple (#800080), fuchsia (#FF00FF), teal (#008080), aqua (#00FFFF), silver (#C0C0C0) und white (#FFFFFF). de.selfhtml.org > HTML/ XHTML >Allgemeine Regeln für HTML > Farben definieren in HTML > Farbnamen für die 16 Grundfarben: In Klammern ist jeweils der RGB-Farbwert in hexadezimaler Schreibweise angegeben. In dieser Form können die im Web als Quasi-Standard verwendeten 216 Standardfarben angegeben werden (s. Anzeigebeispiel bei SELFHTML). de.selfhtml.org > HTML/ XHTML >Allgemeine Regeln für HTML > Farben definieren in HTML > Netscape-Farbpalette (216 Farben): Beispiele Hintergrundfarbe, Textfarbe, Linkfarbe(n) des <body>-abschnitts: <body bgcolor="#663333" text="#ffcc99" link="#ff9966" vlink="#ff9900" alink="#ffffff"> Schriftfarbe im <font>-container: <font color= red >Dies erscheint jetzt in roter Schrift!</font> Listen und Aufzählungen Eine einfache, unsortierte Liste wird in HTML mit dem Container <ul>... </ul> generiert. Jedes aufgezählte Element ist wiederum in einen <li> </li>-container gepackt. <ul> <li>äpfel</li> <li>birnen</li> <li>trauben</li> </ul> 9/14 (cc) Martin Römpp, 2010

10 Analog dazu verhält es sich mit Numerierungen (ordered list): <ol> <li>stoffverteilungsplan</li> <li>unterrichtssequenz</li> <li>unterrichtsstunde</li> </ol> de.selfhtml.org > HTML/ XHTML > Elemente zur Textstrukturierung > Listen Einbinden von Grafiken Mit den größten Reiz macht die Möglichkeit aus, digitale Skizzen und Bilder in HTML-Seiten einzubetten. Im HTML-Code muss lediglich angegeben werden, wo im Dateisystem des Webservers die betr. Grafik zu finden ist. <img src= meinlogo.gif alt= Mein Logo width= 200 height= 150 > Dieses Beispiel bettet an der aktuellen Stelle im HTML-Code eine Grafikdatei im gleichen Verzeichnis mit dem Dateinamen meinlogo.gif ein. Die Grafik wird auf eine Breite von 200 Pixeln und eine Höhe von 150 Pixeln angepasst. Wir die Grafik nicht angezeigt, wird an Stelle dessen der Text Mein Logo angezeigt. Auch eine Angabe in Prozent (in Relation zur Bildschirmgröße) ist möglich. de.selfhtml.org > HTML/ XHTML > Grafiken > Grafiken einbinden Es ist generell zu Empfehlen, die zu verwendenden Grafiken vor Einbinden in den HTML-Code auf die benötigte Größe zu reduzieren. Das bezieht sich sowohl auf die Bildmaße, wie auch auf Farbtiefe und Auflösung des Bildes. Für die Darstellung auf dem Bildschirm sind 72 dpi ausreichend. Alle Verweise zu Dateien- sowohl in Verknüpfungen, als auch in der Angabe einer Bilddatei- sind relativ zum Ablageort der HTML-Datei. Befinden sich die Dateien alle im gleichen Verzeichnis, muss außer dem Dateinamen nichts weiter angegeben werden. Befindet sich die Grafik z.b. im Unterverzeichnis Bilder muss die obige Angabe lauten: <img src= Bilder/meinlogo.gif alt= Mein Logo width= 200 height=150 > Absolute Dateipfade wie in z.b. in Windows gebräuchlich haben hier keine Funktion. Erstens muss der Pfad auf dem Webserver angegeben/ angepasst werden. Zum Zweiten ist in der Notationsweise des Dateipfads nur der normale Schrägstrich / erlaubt, nicht hingegen der Backslash \!! de.selfhtml.org > HTML/ XHTML > Allgemeine Regeln für HTML > Referenzieren in HTML 10/14 (cc) Martin Römpp, 2010

11 Tabellen Tabellen werden in HTML zeilenweise notiert. Dabei werden innerhalb jeder Zeile die Inhalte der Spalten notiert. Zeile 1 Spalte 1: Montag, Zeile 1 Spalte 2: Dienstag, Zeile 1 Spalte 3: Mittwoch, Zeile 2 Spalte 1: Vormittag, Zeile 2 Spalte 2: Nachmittag Zeile 2 Spalte 3: Nachtschicht Team 1 Team 2 Team 3 Montag Dienstag Mittwoch Vormittag Nachmittag Nachtschicht In der HTML-Syntax sieht das folgendermaßen aus: <table border="1"> <tr> <th>team 1</th> <th>team 2</th> <th>team 3</th> </tr> <tr> <td>montag</td> <td>dienstag</td> <td>mittwoch</td> </tr> <tr> <td>vormittag</td> <td>nachmittag</td> <td>nachtschicht</td> </tr> </table> Das Attribut border steuert die Anzeige von Gitternetzlinien (0 = keine Linien). de.selfhtml.org > HTML/ XHTML > Tabellen Erstellen von Formularfeldern Bedenken Sie, dass jegliche Interaktion zwischen Benutzereingaben (in Formularfeldern) und Aktionen des Webservers ohne Einsatz einer Programmiersprache auf dem Webserver/ im HTML-Code eingebettet funktionslos bleibt. Es werden folgende Formularelemente unterschieden: Auswahlknöpfe (radio buttons), Checkboxen, Dropdown-Listen und Text-Formularfelder. Schaltflächen erzeugen entweder das Löschen/ Zurücksetzen des Formularinhalts oder übergeben den Formularinhalt an ein Programm. Alle Formularelemente müssen im Container <form> </form> eingeschlossen sein. 11/14 (cc) Martin Römpp, 2010

12 <form action= nachricht.php > <p>wählen Sie Ihren Wunschlieferanten:</p> <select name="top5" size="3"> <option value= h >Heino</option> <option value= mj >Michael Jackson</option> <option value= tw >Tom Waits</option> <option value= nh >Nina Hagen</option> <option value= mr >Marianne Rosenberg</option> </select> <p>geben Sie Ihre Zahlungsweise an:</p> <p> <input type="radio" name="zahlmethode" value="mastercard"> Mastercard<br> <input type="radio" name="zahlmethode" value="visa"> Visa<br> <input type="radio" name="zahlmethode" value="americanexpress"> American Express </p> <p>kreuzen Sie die gewünschten Zutaten an:</p> <p> <input type="checkbox" name="zutat" value="salami"> Salami<br> <input type="checkbox" name="zutat" value="pilze"> Pilze<br> <input type="checkbox" name="zutat" value="sardellen"> Sardellen </p> <input type="submit" value=" Absenden "> <input type="reset" value=" Abbrechen"> </form> Das Ergebnis der Auswahl(en) auf der HTML-Seite wird bei Klicken auf die Schaltfläche Absenden an das PHP-Skript nachricht.php, das sich im gleichen Verzeichnis auf dem Webserver befindet, übermittelt. de.selfhtml.org > HTML/ XHTML > Formulare 12/14 (cc) Martin Römpp, 2010

13 Frames Mit Hilfe von Frames kann der HTML-Programmierer die im Browser angezeigte Oberfläche ( frameset ) in mehrere Teile unterteilen, die als separare HTML-Dateien ( frames ) existieren. Wie hier angedeutet, kann mit Frames die Verwaltung eines Web-Auftritts vereinfacht werden, in dem z.b. Elemente der Primärnavigation nur im unteren Frame zu finden sind; alle Elemente der Sekundärnavigation sind z.b. im linken Frame untergebracht und der eigentliche Inhalt wird im rechten Frame angezeigt. Im folgenden die Definition eines Framesets: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html> <head> <title>beschreibung des Frameset-Inhalts</title> </head> <frameset rows="100,*,60"> <frame src= kopf.htm name= kopf > <frame src= inhalt.htm name= inhalt > <frame src= fuss.htm name= fuss > <noframes> <body> <h1>alternativ-inhalt</h1> <p>wird angezeigt, wenn der Browser keine Frames darstellen kann.</p> <p>mindest-inhalt sollten eine Kurzbeschreibung und eine Sitemap sein.</p> </body> </noframes> </frameset> </html> Es wird also hauptsächlich festgelegt, dass eine HTML-Datei namens kopf.htm in den oberen 100 Pixeln der Bildschirmhöhe angezeigt werden sollen; von unten sollen 60 Pixel für die Fußzeile reserviert werden, die in der Datei fuss.htm zu finden ist. Der eigentliche Inhalt kann in die Datei inhalt.htm geschrieben werden. de.selfhtml.org > HTML/ XHTML > Frames 13/14 (cc) Martin Römpp, 2010

14 Formatvorlagen Cascading Style Sheets (CSS) In der Regel sollte versucht werden, Inhalt und Formatierung voneinander zu trennen. Dies wird durch das Verwenden von Formatvorlagen (Stylesheets) erreicht, die analog zu den aus der Textverarbeitung verwendeten Vorlagen funktionieren. Gehen wir von folgendem Textbeispiel aus: Zunächst wird im <head>-bereich des HTML-Dokuments die externe Formatvorlage eingebunden: <link rel="stylesheet" type="text/css" href="formatvorlage.css"> Damit ist die Verknüpfung zu einer externen Formatvorlage hergestellt. In der Formatvorlage (formatvorlage.css) stehen z.b. folgende Definitionen: p.titel {font-size:12pt;color:green;font-weight:bold;fontfamily:arial;} p.zitat {font-size:8pt;font-color:black;font-family:arial;} Die hier angegebenen Formatierungsanweisungen sind als Klassen des <p>-objekt definiert. Im HTML-Dokument werden diese wie folgt referenziert: <p class="zitat">hier steht der Text meiner zweiten HTML- Seite.</p> <p class="titel"> Hallo Welt, ich bin im Internet angekommen! :-)</p> Ergebnis: Durch das festlegen zentraler Formatvorgaben (d.h. in nur einer/ nur in wenigen CSS-Dateien), können Änderungen im gesamten Internet-Auftritt im Handumdrehen vorgenommen werden. Voraussetzung: Alle HTML-Seiten beziehen sich auf die zentralen Formatvorlagen. de.selfhtml.org > Stylesheets (CSS) Mit Hilfe von Stylesheets können (fast unbegrenzte!) Formatierungsmöglichkeiten vorgenommen werden, die in reinem HTML nicht möglich sind. 14/14 (cc) Martin Römpp, 2010