P. 1
MMT Webprogrammierung 1 Im Winter Semester 2010

MMT Webprogrammierung 1 Im Winter Semester 2010

|Views: 308|Likes:
Published by Brigitte Jellinek
Ein Einstieg in die Webprogramierung für künftige ProgrammiererInnen.
So verwendet im 1.Semester des Studiengangs http://multimediatechnology.at an der FH Salzburg.
Ein Einstieg in die Webprogramierung für künftige ProgrammiererInnen.
So verwendet im 1.Semester des Studiengangs http://multimediatechnology.at an der FH Salzburg.

More info:

Published by: Brigitte Jellinek on Jan 23, 2011
Copyright:Attribution Non-commercial Share Alike

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

11/13/2011

pdf

text

original

Sections

  • 1. Web Basics
  • 1.2 Kurze Geschichte des World Wide Web
  • 1.3 Drei Standards definieren das Web
  • 1.3.2 URL
  • 1.3.3 HTTP
  • 1.4 HTML Basics
  • 1.4.1 Sonderzeichen
  • 1.4.2 HTML-Tags
  • 1.4.3 Whitespace
  • 1.4.4 Attribute
  • 1.4.5 Kompatibilität
  • 1.4.6 Text formatieren
  • 1.4.7 Bilder
  • 1.4.8 Links
  • 1.4.9 Gesamt-Struktur einer Webseite
  • 1.4.10 Listen
  • 1.4.11 Tabellen
  • 1.5 Upload und Tools
  • 1.5.1 Validator
  • 1.5.2 Upload
  • 2. CSS Basics
  • 2.1 Kurzvorstellung von Stylesheets
  • 2.1.1 Schriftart
  • 2.1.2 Schriftgröße
  • 2.1.3 Absätze
  • 2.1.4 CSS erforschen mit Firebug
  • 2.2 Geschichte der Cascading Style Sheets
  • 2.2.1 Stylesheet Syntax
  • 2.2.2 Klassen, IDs, SPANs und DIVs
  • 2.2.3 Maßeinheiten in Stylesheets
  • 2.3 Graceful Degradation
  • 3. CSS für Layout und Interaktion + URLs
  • 3.2 Rahmenbedingungen für Layout
  • 3.2.1 Auflösung
  • 3.2.2 Brutto-Fläche vs. Netto-Fläche
  • 3.2.3 Entwurf für mehrere Auflösungen
  • 3.2.4 Bilder
  • 3.2.5 Schriftgröße
  • 3.3 CSS für Layout
  • 3.3.1 Width und Auto
  • 3.3.2 Float
  • 3.3.3 Absolute Positionierung
  • 3.4 Navigationsmenü mit CSS
  • 3.4.1 Navigationsmenü wiederverwerten mit PHP
  • 3.4.2 :hover und :focus
  • 3.4.3 Dropdown Menü mit Hover
  • 3.5 CSS Selektoren
  • 3.6 URLs
  • 3.6.1 Absolute und relative URLs
  • 3.6.2 Konfiguration des Webservers und URLs
  • 3.6.3 Pragmatische Tipps zu Dateienamen und URLs
  • 4. Formulare, erstes Javascript
  • 4.2 Formulare
  • 4.2.1 Eingabefelder
  • 4.2.2 Interaktionsmöglichkeiten
  • 4.3 Daten absenden
  • 4.3.1 Daten an E-Mail senden
  • 4.3.2 Daten senden mit Methode GET
  • 4.3.3 URL als Programm-Schnittstelle
  • 4.4 Formular und PHP
  • 4.5 Formular und Javascript
  • 4.5.1 Javascript Einbetten
  • 4.5.2 Popup-Fenster
  • 4.5.3 Formulare
  • 4.5.4 document.write
  • 4.5.5 Ereignisse und Ereignisgesteuerte Programmierung
  • 4.5.6 Formular prüfen
  • 5. Javascript und DOM
  • 5.2 Hintergründe
  • 5.2.1 Javascript und Java
  • 5.2.2 Geschichte von Javascript
  • 5.2.3 Document Object Model
  • 5.3 Basic Javascript
  • 5.3.1 Einbindung von Javascript
  • 5.3.2 Syntax von Javascript
  • 5.3.3 DOM Beispiel
  • 6. jQuery
  • 6.2 Besondere Javascript-Schreibwesen in jQuery
  • 6.2.1 Mein Name ist Dollar
  • 6.2.2 Chaining – eine Kette von Methodenaufrufen
  • 6.2.3 Funktionen als first-class citizens11
  • 6.2.4 Anonyme Funktionen
  • 6.3 Selektieren und Manipulieren mit jQuery
  • 6.4 Interaktion mit jQuery

Web Programmierung 1

Ein Skriptum zu den gleichnamigen Lehrveranstaltungen im 1. Semester von MultiMediaTechnolgy

Version für das Wintersemester 2010/11, engültige Version vom 9.Dezember 2010

Überblick
1. 2. 3. 4. 5. 6. 7. Web Basics CSS Basics CSS für Layout und Interaktion + URLs Formulare, erstes Javascript Javascript und DOM jQuery Anhänge 6 28 41 67 83 94 102

MMT Webprogrammierung 1

2

Ziele
Diese Lehrveranstaltung hat mehrere unabhängige Ziele. Am Ende des 1.Semesters können Sie sagen: • Ich kann Webseiten erstellen, und habe auch schon eine kleine Web-Site vollständig umgesetzt. • Ich verstehe wie das Web funktioniert, kann HTML5, CSS3, Javascript und PHP Code lesen, Fehler suchen und neue Entwicklungen einordnen. Ich kenne die Problemstellung der Browserkompatiblität. • Ich kenne die Arbeitsteilung in einem Web-Projekt und kann meinen (technischen) Teil beitragen. • Ich kann die Qualität einer Webseite beurteilen. Ich kenne verschiedene Qualitäts-Kriterien und kann sie gegeneinander abwägen. • In meiner Homepge zeige ich mehrere kleine Web-Projekte.

Diese Lehrveranstaltung führt im 2.Semester mehrere Themen, die im ersten Semester noch separat behandelt wurden zusammen: Datenbanken, UNIX, Webprogrammierung mit HTML, CSS, Javascript werden zusammen mit der Programmiersprachen PHP eingesetzt um Web-Applikationen zu bauen. Am Ende des zweiten Semesters können Sie sagen: • Ich kann Webapplikationen erstellen, und habe auch schon eine kleine Applikation inklusive Datenbank vollständig umgesetzt. • Ich kenne die Arbeitsteilung in einem Web-Projekt und kann meinen (technischen) Teil mit Javascript, PHP und MySQL beitragen. • Ich kann Qualitätsansprüche an eine Webapplikation: Ich kenne die REST-Prinzip, ich kenne Sicherheitsprobleme und Lösungsansätze, ich kann AJAX einsetzen. • In meinem Blog zeige ich mehrere Artikel über Aspekte einer Web-Applikation.

MMT Webprogrammierung 1

3

Inhaltsverzeichnis
1. 1.2 1.3 1.3.2 1.3.3 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.6 1.4.7 1.4.8 1.4.9 Web Basics Kurze Geschichte des World Wide Web Drei Standards definieren das Web URL HTTP HTML Basics Sonderzeichen HTML-Tags Whitespace Attribute Kompatibilität Text formatieren Bilder Links Gesamt-Struktur einer Webseite 6 7 11 14 14 16 16 17 17 17 18 19 21 22 22 23 23 24 24 25 28 29 29 30 30 30 31 32 33 35 38 41 42 42 43 44 47 49 50

1.4.10 Listen 1.4.11 Tabellen 1.5 1.5.1 1.5.2 2. 2.1 2.1.1 2.1.2 2.1.3 2.1.4 2.2 2.2.1 2.2.2 2.2.3 2.3 3. 3.2 3.2.1 3.2.2 3.2.3 3.2.4 3.2.5 3.3 Upload und Tools Validator Upload CSS Basics Kurzvorstellung von Stylesheets Schriftart Schriftgröße Absätze CSS erforschen mit Firebug Geschichte der Cascading Style Sheets Stylesheet Syntax Klassen, IDs, SPANs und DIVs Maßeinheiten in Stylesheets Graceful Degradation CSS für Layout und Interaktion + URLs Rahmenbedingungen für Layout Auflösung Brutto-Fläche vs. Netto-Fläche Entwurf für mehrere Auflösungen Bilder Schriftgröße CSS für Layout

5.3 4.2 4.3 5.3.1 3.2 4.6.5.6 5.2 Width und Auto Float Absolute Positionierung Navigationsmenü mit CSS Navigationsmenü wiederverwerten mit PHP :hover und :focus Dropdown Menü mit Hover CSS Selektoren URLs Absolute und relative URLs Konfiguration des Webservers und URLs Pragmatische Tipps zu Dateienamen und URLs Formulare.MMT Webprogrammierung 1 3.2.5.5 4.3 4. 6.2 5.4 4.2 5.4.2 3.3.3.1 3.2 3.3.write Ereignisse und Ereignisgesteuerte Programmierung Formular prüfen Javascript und DOM Hintergründe Javascript und Java Geschichte von Javascript Document Object Model Basic Javascript Einbindung von Javascript Syntax von Javascript DOM Beispiel jQuery Besondere Javascript-Schreibwesen in jQuery Mein Name ist Dollar Chaining – eine Kette von Methodenaufrufen 4 51 52 53 54 55 56 58 59 62 62 63 66 67 67 68 71 72 72 73 74 75 76 76 77 77 77 79 81 83 84 84 85 86 86 87 89 93 94 96 96 96 .2.2.3 3.6 3.2.2 5. 4.5.3.5 3.4 4.2 6.1 4. 5.5 4.1 6.4 3.3.2 3.3.1 5.3.4. erstes Javascript Formulare Eingabefelder Interaktionsmöglichkeiten Daten absenden Daten an E-Mail senden Daten senden mit Methode GET URL als Programm-Schnittstelle Formular und PHP Formular und Javascript Javascript Einbetten Popup-Fenster Formulare document.2 4.3 5.3 3.2 4.3.6.2.6.5.3 6.1 4.4.1 4.1 5.5.3 4.2.1 3.3 4.2.

1 7.4 6.3 6.3 6.2.2.5 7.4 6.MMT Webprogrammierung 1 6.2 Funktionen als first-class citizens Anonyme Funktionen Selektieren und Manipulieren mit jQuery Interaktion mit jQuery Formulardaten Prüfen mit jQuery Anhänge Quellenverzeichnis Stichwortverzeichnis 5 97 98 98 99 100 102 102 104 . 7.

handelt die Ursprünge des Web. Wie eine HTTP Anfrage funktioniert Wie ein Dokument im HTML 5 aufgebaut ist Die HTML-Tags für Überschriften.MMT Webprogrammierung 1 6 1. URL und HTML zusammenspielen und das Web definieren. iphone. Links. wer die Standards des Webs definiert Wie die drei Standards HTTP. einen vorgegebenen Text in HTML 5 umwandeln • Die Korrektheit des HTML 5 Codes mit dem Validator des World Wide Web Consortium überprüfen • • Fehler in einem HTML 5 Dokument ausbessern. Web Basics Der erste Termin der Lehrveranstaltung klärt organisatorische Fragen. Bilder Welche Methoden des Uploads es gibt Was Sie können sollten • Ein einfaches Dokument im HTML 5 erstellen. ipad) „exotische“ Webbrowser: − − Lynx Opera Mobile (nur auf Handys) . stellt wichtige Fachbegriffe vor und gibt einen Einstieg in HTML Was Sie wissen sollten • • • • • • Wer das World Wide Web erfunden hat. Absätze. bis es valide ist Dokumente auf einen Webserver hochladen Tools die Sie in diesem Kapitel installieren und ausprobiert sollten • Desktop Webbrowser: − − − − • Firefox Microsoft Internet Explorer (msie) Opera Safari (nur auf Mac.

http://validator. … 7 Firefox AddOn FireFTP Firefox AddOn Web Developers Toolbar Secure File Transfer Client Weitere Informationsquellen • • • Selfhtml. for your information .selfhtml. wie folgendes „fact sheet“ aus der Zeit dokumentiert: Date: Fri. 1991 als EDV-Mitarbeiter am CERN in der Schweiz entwickelt. http://de. meist im Textmodus ohne grafische Oberfläche. Neben E-Mail und FTP wurden USEnet Newsgroups – ähnlich den heutigen Diskussionsforen – als wichtigste Form des Datenaustausches verwendet. Stockholm / E \ 256 Kbps / \ 512 Kbps / \ / \ London E E Amsterdam | | | 512 Kbps | | | | | | 256 Kbps | | | France (Montpellier) E-----------------E CERN 256 Kbps Intercontinental links to the United States are provided from London.org/ HTML Validator des WWW-Consortiums.. gebürtiger Engländer und studierter Physiker. Amsterdam. 1990. Ihrer Spielkonsole. 20 Mar 1992 13:50:09 From: dekker@rare.. Zu dieser Zeit – Anfang der 90er Jahre – war das Internet ein rein akademisches Projekt mit sehr geringen Bandbreiten. hat es in den Jahren 1989. Stockholm and Geneva.MMT Webprogrammierung 1 − • • • Webbrowser Ihres Handys. .w3c..org/ Website des WWW-Consortiums. Nicht so das World Wide Web: es geht auf eine einzelne Person zurück.w3.nl (Marieke G.org/ 1. Ebone will operate a core backbone between London. Geneva. The European links operate initially at speeds between 256 and 512 kilobits per second. Dekker) Subject: ebone fact sheet. and France (Montpellier).2 Kurze Geschichte des World Wide Web Viele moderne Erfindungen sind das Ergebnis von Teamarbeit und langen Planungsprozessen. http://www. Stockholm. Tim Berners-Lee.

Dieser Browser ist gemeinsam mit dem Betriebssystem NeXT verschwunden.com/photos/brettpatterson/4808671776/. Der Line Mode Browser funktionierte auch ohne Grafik. Links konnten mit Nummern aufgerufen werden.flickr. Tim Berners-Lee. Verlieren Sie dabei nicht aus den Augen. die erste Webseite des CERN im Line mode browser Berners-Lee definierte als Eckpunkte die technischen Standards des Web (siehe nächstes Kapitel) und programmierte – gemeinsam mit KollegInnen – die erste Software. . der die damalige Homepage des CERN anzeigt. In Abbildung 1 ist links Tim Berners-Lee mit dem ersten grafischen Webbrowser abgebildet. rechts http://www. In dieser Lehrveranstaltung werden wir uns hauptsächlich mit der Technik des Web beschäftigen. Das Web ist heute überall: Abbildung 2: das Web ist überall: vom ältesten zum neusten Gerät1 1 Bildquellen (alle unter cc): links http://www. wie wichtig das Web ist. Rechts ist ein Screenshot des Line Mode Browsers zu sehen.flickr.com/photos/larskflem/95757299.MMT Webprogrammierung 1 8 Abbildung 1: Der erste grafische Webbrowser. und wie sehr es unsere Gesellschaft schon verändert hat.

Jahrhundert war nur der Auslöser. Was kommt nach Streetview? 2 Bildquellen (alle unter cc): inks http://www.com/photos/sheepguardingllama/2834764584/ . politisches Pamphlet. und 1..schaffte nur die Voraussetzung für weitere Erfindungen und große gesellschaftliche Veränderungen: Massenhafte Verbreitung der Bibel.com/photos/pieter-bidia/2925661885/. Heute ist eine Reise ohne diese Karten kaum noch vorstellbar. rechts http://www.MMT Webprogrammierung 1 9 Abbildung 3: das Web ist überall: in Bildung und Arbeit. Die Erfindung der maschinellen Massen-Produktion von Büchern durch Johannes Gutenberg im 15.. 3.flickr. Die Erfindung des Web um 1990 herum ist wahrscheinlich eine ähnlich fruchtbare Erfindung. Welt2 Und das Web ist noch nicht "fertig erfunden". Reformation. wir sind mittendrin: 1993 2010 Die interaktive Landkarte war eine sehr frühe An– wendung des Web. . Die gesellschaftlichen Auswirkungen können wir noch nicht absehen. . die die Voraussetzung für viele Folge-Erfindungen schafft. Revolution.flickr. wissenschaftliche Publikation.

2002 2010 Im Jahr 2000 war eine Enzyklopädie noch das teuer Bezahlte Werk von wenigen ExpertInnen. Es hat den Buchmarkt weltweit verändert. sondern auch unsere Vorstellung wie Wissen gesammelt werden kann völlig verändert.das wurde erst im 21.MMT Webprogrammierung 1 10 1995 2010 Bücher über das Web zu verkaufen erscheint im Nachhinein als ganz einfache Idee. um dann mit diesen FreundInnen kurze "Statusmeldungen" auszutausche . Wie geht es weiter? . Die Erfindung der Wikipedia hat nicht nur den Markt für Enzyklopädien zerstört. 2004 2010 Dass ich am Web speichern kann wer meine FreundInnen sind. und wird es weitet tun.Jahrhundert erfunden.

txt • HTTP (Hypertext Transfer Protocol) nach RFC 2616 .w3. Dabei sind alle beteiligten Computer gleichberechtigt. leitet E-Mail weiter (an den Server der EmpfängerIn) FTP-Server – speichert Dateien E-Mail FTP Eine Alternative zu Client/Server ist Peer-zu-Peer.http://www.org/standards/techs/html Die entsprechenden Dokumente finden Sie unter den oben angebenen URLs am Webserver des World Wide Web Consortiums. Das World Wide Web ist also ein verteiltes (Client/Server) Informationssystem.http://www. es gibt keine verschiedenen Rollen. also der Computer der den Dienst in Anspruch nimmt. zeigt sie an.org/Protocols/rfc2616/rfc2616.w3.MMT Webprogrammierung 1 11 1. das durch folgende drei Standards in der jeweils aktuellen Form definiert wird: • URL (Uniform Resource Locators) nach RFC 1738 .org/Addressing/rfc1738.w3. . Nach diesem Prinzip funktionieren Web.3 Drei Standards definieren das Web Für diese Lehrveranstaltung ist eine technische Sicht auf das World Wide Web die relevante. Nach diesem Prinzip funktionieren Datei-Tauschbörsen. E-Mail. ein Client ist der „Kunde“. http://www. FTP: Client Web Webbrowser – lädt Webseiten vom Sever und zeigt sie am Bildschirm an E-Mail Programm – lädt E-Mails vom Server. kann neue E-Mails an einen Server schicken der sie zustellt.html • (X)HTML (Hypertext Markup Language) Hier befinden wir uns gerade im Übergang von XHTML auf HTML 5. … FTP-Client – lädt Dateien von einem Server runter oder auf einen Server rauf Server Webserver – liefert auf Anfrage die gespeicherten Webseiten Mailserver – speichert E-Mail in verschiedenen Postfächern. Rund um diese drei Standards ordnen sich weitere wichtige Begriffe an: Client/Server Das Client/Server Prinzip ist ein allgemeines Prinzip wie Dienste in einem Computernetzwerk aufgebaut sein können: Ein Server ist ein Computer der einen bestimmten Dienst anbietet. Noch gibt es keinen endgültigen Standard von HTML 5.

Abbildung 5 zeigt den Browser lynx. Opera(2004) und Mozilla(2004) Alle eben erwähnten Browser haben gemeinsam. Mit diesem Webbrowser und diesem Ausgabegerät können Blinde im Web surfen. die im Jahre 2004 verwendet wurden. dass sie auf einem typischen „BüroComputer“ eingesetzt werden. Abbildung 4: Webbrowser: Mosaic (1993). Daneben sehen Sie eine „Braille Ausgabezeile“. es ist also der Client zum World Wide Web. oder kurz Browser. Es gibt aber auch „exotischere“ Browser. Abbildung 4 zeigt drei davon: den Browser „Mosaic“. der im Jahre 1993 als zweiter Webbrowser mit grafischer Oberflächen stark zur Verbreitung des World Wide Web beigetragen hat. Es gibt sehr viele verschiedene Webbrowser. einem Computer mit grafischer Oberfläche und einem Farb-Monitor. der nur Text darstellt.MMT Webprogrammierung 1 12 Webbrowser Ein Webbrowser. das eine Zeile Text in eine Zeile Blindenschrift übersetzt. aber keine Bilder. und die Browser Opera und Mozilla in den Versionen. Abbildung 5: Text-Only Browser lynx und Braille Ausgabegerät Abbildung 6 zeigt Browser auf verschiedenen mobilen Geräten: . ist ein Programm. ein Gerät. das bei Eingabe einer URL über HTTP eine HTML-Webseite laden und anzeigen kann.

dann erscheint ein Scrollbalken mit dem man den Rest der Seite erreichen kann. 2010 Webseite Die Dokumente. . Abbildung 7: Ein Browser zeigt eine lange Webseite an Website Als Webseite wird also ein Dokument bezeichnet. wie in Abbildung 7 gezeigt. die zusammen gehören und untereinander verlinkt sind.MMT Webprogrammierung 1 13 Abbildung 6: Browser auf mobilen Geräten: Handys und iPad. Ist die Seite zu groß / zu lang für das Browser-Fenster. Eine Webseite ist – technisch gesehen – ein Dokument im HTML-Format. Achtung: es gibt kein Wort Webside. Eine Website besteht aus mehreren Webseiten auf einer gemeinsamen Domain. Verwechseln Sie diesen Begriff nicht mit dem englischen Wort Website. die im Webbrowser dargestellt werden nennt man Webseiten. Eine Webseite kann – im Gegensatz zu einer Seite in einem Buch – beliebig lang sein.

2 URL Eine URL ist die Adresse eines Dokuments am Web oder in einem anderen Online-Informationssystem. ein Beispiel mit einem anderen Übertragungsprotokoll: mailto:brigitte. Ein Beispiel: http://kurse.horus. Alle Aktivität wird vom Client (=Browser)initiiert.at/2006-ss/www-mm/index.at:8080/2006-ss/www-mm/index.horus. das immer TCP3-Verbindungen verwendet.3 HTTP Das Hypertext Transfer Protocol ist ein relativ simples Protokoll. In der einfachsten Form sieht HTTP so aus (hier wieder am Beispiel der URL http://kurse.at 8080 /2006-ss/www-mm/index.html Literatur Im Zusammenhang mit Web-Formularen werden wir oft mit URLs zu tun haben die Parameter enthalten: http://www.3. Wenn keiner angegeben ist: Port 80 Wird vom Webserver interpretiert.html#literatur Diese URL zerfällt in 4 Teile: http Übertragungsprotokoll Domain Name (oder IP-Adresse) des Webservers Port am Server.html#literatur): 3 Mehr über TCP lernen Sie in der Lehrveranstaltung „Multimedia-Netzwerke“ im 3.jellinek@fh-salzburg.3. HTTP-URLs sind nicht die einzigen URLs.horus. meist eine Pfad-Angabe Textmarke innerhalb des Dokuments – wird vom Browser interpretiert wenn das Dokument dargestellt wird kurse.MMT Webprogrammierung 1 14 1.at 1.Semester .google.com/search?q=schokolade&ie=utf-8&oe=utf-8 Mit den Zeichen ? & = werden hier Parameter an die URL angefügt.ac.

html HTTP/1. Der Browser beendet die TCP-Verbindung Die nächste Anfrage des Clients kann sich an einen anderen Server.80.0\n\n“ 5. mit Proxies.80. Port 80 auf 4.109.html.at).212) 3. Der Browser analysiert die URL und ermittelt daraus den Domain Namen des Webservers (kurse. Keiner der beiden (Client und Server) muß speichern mit wem er gerade Daten ausgetauscht hat. B. die der Server beantwortet. Meistens interpretiert er sie als Aufforderung.horus. „200 OK\n\n“. Die nächste Anfrage. oder ein Link wird im Browser angeklickt 2. kann vom selben Client kommen. Der Browser nimmt das Dokument in Empfang und stellt es geeignet dar 8. Eine URL wird in den Browser eingetippt. Er sendet eine http-Anfrage: „GET /2006-ss/www-mm/index.109. Caching und Keep-Alive wird es komplizierter. löst diese über DNS zur IP-Adresse auf (193. Der Webserver schickt die http-Antwort an den Browser.212. gefolgt vom Inhalt der Datei index. oder von einem anderen Client. . Der Browser baut eine TCP-Verbindung zu 193. Der Browser scrollt das Dokument bis zur Textmarke literatur 9. Das ist nur die einfachste Version des Protokolls. um die nächste Anfrage durchführen/beantworten zu können. eine bestimmte Datei von der Platte zu lesen 6. 7. Das Protokoll ist also stateless. diese besteht aus einem Statuscode. z. Dadurch ist es sehr einfach einen Server zu programmieren. oder wieder an denselben Server richten.MMT Webprogrammierung 1 15 1. Der Webserver nimmt die Anfrage entgegen und analysiert sie.

Abbildung 8: Auswahl des Charactersets beim Speichern mit dem Windows Notepad / Editor 1.4.xhtml. Sie haben die From &entityname. Folgende Character Entities können Sie vermeiden.4 HTML Basics In der Übung werden wir HTML 5 (und teilweise XHTML Version 1. Die Version 5. &gt. oder . Im Unterschied zu HTML ist XHTML strenger in der Schreibweise.MMT Webprogrammierung 1 16 1. in einem Jahr werden Sie es sicher anwenden. Aber es ist weit genug entwickelt um es zu lernen. Alle Details können Sie am HTML-Schwindlzettl oder bei selfhtml nachschlagen. . die wir verwenden. ist noch nicht als Standard ausdefiniert. Am Web finden Sie sowohl Tutorials zu HTML als auch zu XHTML – lassen Sie sich davon nicht verwirren! (X)HTML-Dateien (Hyper Text Markup Language) bestehen aus reinem Text. ergänzt um die in westeuropäischen Sprachen nötigen Zeichen wie üöä ÜÖÄ ß é ñ . Das X von XHTML steht für die Kompatibilität mit XML. Die Dateien haben dabei weiterhin die Endung .1 Sonderzeichen Sonderzeichen in HTML nennt man „character entities“. Folgende Character Entities müssen Sie verwenden: Gewünschtes Zeichen < > & Character Entity &lt. In den letzten 10 Jahren wurde auch XHTML neben HTML verwendet. Abbildung 8 zeigt wie dieses Format im Windows Notpad / Editor gesetzt wird: ISO 8859-1 wird hier als ANSI bezeichnet.xhtm.htm oder .html haben. und noch nicht von allen Browsern umgesetzt. Formulare) werden Sie bald auswendig können. indem Sie das Zeichen selbst im Code verwenden: 4 Das ist der ASCII-Zeichensatz. Die wichtigsten HTML-Tags (Links. in unserem Falle entweder aus Text im Format ISO 8859-1 (Latin-1)4 oder im Format utf-8. Bilder. HTML hat sich in den ca.0 transitional) verwendet. 20 Jahren seines Bestehens weit entwickelt. Tabellen. &amp.

bei HTML ist die Groß. Die wichtigsten Attribute von <img /> sind src (von Source = Quelle) und alt (Alternative Darstellung).4. . Tags sind zwischen spitzen Klammern eingeschlossen. da der Browser einen automatischen Zeilenumbruch durchführt.oder Kleinschreibung egal.MMT Webprogrammierung 1 Gewünschtes Zeichen Ä Ä ß Character Entity &Auml. (gar kein Leerzeichen oder ein Leerzeichen macht schon einen Unterschied) Die folgenden beiden Dokumente sind also äquivalent: <p>Halli Hallo</p> <p> Halli Hallo </p> Nur die Tags beeinflussen die Darstellung der Webseite. 2. 1. Ein Beispiel ist der Tag <img /> der ein Bild in die Seite einfügt (Englisch: Image).4.das sind mehrere Leerzeichen. Zu (fast) jedem "Anfangs-Tag" gibt es einen "End-Tag". B. 17 1.4. Die wichtigsten Tags werden weiter unten vorgestellt.4 Attribute Manche Tags können Attribute enthalten. Z. Sie müssen den Tag <br /> verwenden um einen Zeilenumbruch auf der Webseite zu erzeugen – dies ist aber nur selten sinnvoll. <p>hier der Absatz</p>.2 HTML-Tags Die gewünschte Formatierung des Textes wird mit HTML-Tags angegeben 1. &szlig. 1. Ob Sie also in Ihrer HTML-Datei ein Leerzeichen oder 7 Leerzeilen einfügen macht keinen Unterschied. Tabulatoren und Zeilenumbrüche hintereinander – wird vom Browser völlig ignoriert. 3. der sich nur durch den Schrägstrich vom Anfangs-Tag unterscheidet. (in XHTML) müssen "alleinstehende" Tags mit einem Schrägstrich am Ende geschrieben werden: <br /> In XHTML werden Tags immer klein geschrieben.3 Whitespace Sogenannter "whitespace" . &auml.

welche Versionen der Browser diesen Tag darstellen und wie viel Prozent Ihres Zielpublikums schon eine passende Browser-Version benutzen. (in HTML gab es eine Ausnahme für Werte die keine Leerzeichen enthalten (wie z. Frontpage.MMT Webprogrammierung 1 <img src="neu. Microsoft Internet Explorer. sollten Sie sich darüber klar sein. blo" /> alt="Das ist Neu!" Das Attribut bli.5 Kompatibilität Jeder Browser (egal ob Firefox. B. .gif" alt="Das ist neu!" /> 18 Es ist egal. Opera. Zahlen).gif" /> oder <img src="neu. B.gif" width=50 height="15" /> ACHTUNG: ein häufiger Fehler ist es. GoLive. ) kann jedes HTMLDokument bearbeitet werden. In älteren Browsern wird der Tag <jump> ignoriert: Code <p>Dies ist meine erste <jump>supercoole</jump> Webseite!!!! </p> Ein älterer Browser interpretiert das als: <p>Dies ist meine erste supercoole Webseite!!!!</p> Bevor Sie also einen neuen Tag einsetzen. wird wie andere unbekannte Attribute einfach ignoriert. welches nicht zu HTML gehört. in welcher Reihenfolge Sie die Attribute schreiben: <img alt="Das ist neu!" src="neu. das zweite Anführungszeichen zu vergessen: <img alt="Das ist neu!" src="neu.4. sind zu ignorieren – es gibt keine Fehlermeldungen! Wenn das W3C in HTML Version 21 beispielsweise den neuen Tag <jump> (hüpfenden Text) einführen würde. ) kann jedes HTML-Dokument darstellen. dass auch mit älteren Browsern der gesamte Inhalt lesbar ist. .gif /> 1. .. . Mit jedem Editor (egal ob Dreamweaver.gif" bli="bla. . die z. ein Browser nicht erkennt. Meist können Sie eine Seite so gestalten. diese konnten auch ohne Anführungszeichen geschrieben werden. Der Text würde jedoch nur in den neuesten Versionen der Browser (die schon die Version 21 kennen) hüpfend dargestellt. können Sie diesen Tag auf Ihrer Webseite verwenden. bei XHTML ist das verboten) <img alt="Das ist Neu!" src="neu. Neue Tags.. also kein Browser kennt. Der Wert eines Attributes muß in Anführungszeichen geschrieben werden.

Diese Herangehensweise an Neuerungen nennt man „graceful degradation“ – davon werden Sie noch viel hören. und wird es hoffentlich nie geben. nicht blockbildende Tags tun das nicht.MMT Webprogrammierung 1 Schlecht <p>Zu den hüpfenden Terminen sind noch Plätze im Kurs frei: </p> <ul> <li><jump>Montag</jump> <li>Dienstag <ul> 19 Besser: <p>Zu den markierten Terminen sind noch Plätze im Kurs frei</p> <ul> <li><jump>Montag *</jump> <li>Dienstag <li> Auf älteren Browsern geht die wichtigste Information verloren! Auf allen Browsern ist erkennbar zu welchen Terminen noch Plätze frei sind. . Blockbildende Tags beanspruchen immer einen rechteckigen Bereich bei der Ausgabe. Abbildung 9: Darstellung von blockbildenden und nicht-blockbildenden Tags Der em-Tag ist nicht-blockbildend und wird im zweiten Absatz auf zwei Zeilen umgebrochen.4. Hinweis: Der <jump>–Tag ist ein Scherz. den gibt es nicht wirklich.6 Text formatieren Wir unterscheiden zwischen HTML-Tags die Blöcke definieren. 1. und solchen die das nicht tun.

und sollte möglichst nicht mehr verwendet werden. Text text text.. Text und text text.. Links Weitere Tags zur Strukturierung der Seite Block-Zitat (eingerückt) <blockquote>Alle meine Entchen schwimmen auf dem See</blockquote> Format für kleinere Text-Abschnitte Diese müssen Sie innerhalb eines Blocks verwenden.. Text und text text. text text...">Text text text. </aside> Zentrierter Text Haupt-Überschrift (1.html">Home</a> . Das sind eigentlich „altmodische Tags“. text text. text text. </header> <footer> . text text..">Text</span> <span style="color:red. text text.">rot</span> . Sehr stark betonter Text (meist fett) Betonter Text (meist kursiv) Eine <strong>wichtige</strong> Sache und eine <em>interessante</em> Sache Physische Elemente geben die genaue Darstellung vor. Diese Formate werden unterschieden in logische und physische Elemente.. text text. Ebene) Unter-Überschrift (2. Die logischen geben die genaue Darstellung nicht vor.. Text text text. </p> <p style="text-align:center. </nav> <header> . Ebene) Unter-Überschrift (3. Ebene) Bereich mit Navigations-Menü. text text.. die Text-Blöcke definieren: Normaler Fließ-Text <p>Text text text. (Sie werden ihn aber in „alten“ Dokumenten noch finden): Fettgedruckter Text Kursiver Text Text in einer bestimmten Schriftart Text in einer bestimmen Farbe Eine <b>fette</b> Sache und eine <i>schräge</i> Sache <font face="Arial">Text</font> <font color="red">rot</font> Hier die moderne Schreibweise mit Stylesheets: Text in einer bestimmten Schriftart Text in einer bestimmen Farbe <span style="font-family:Arial.MMT Webprogrammierung 1 20 Formate. Text text text. </p> <h1>Überschriftstext</h1> <h2>Überschriftstext</h2> <h3>Überschriftstext</h3> <nav> <a href="index. </footer> <aside> .. Text text text. text text.. besonders der font-Tag wurde durch Stylesheets vollständig ersetzt..

gif" alt="" /> Für Blinde. Browser die keine Bilder darstellen können. Suchmaschinen.gif" alt="neu" /> <img width=10 height=5 src="neu.at/intl/de_at/images/logo. Mit dem AddOn „Web Developer“ kann man testen wie die Seite mit ALT statt Bildern aussieht.gif" atl="Google" /> <img src="neu. u. Als Attribut src im img-Tag können Sie eine absolute oder relative URL angeben: Bild (URL absolut) Bild (URL relativ) Bild mit Ersatztext Bild mit Größenangabe Bild nach links (Text fließt rechts vorbei) Bild ohne Alternativtext (nur Dekoration) <img src="http://www.w.google.7 Bilder Bilder werden in separaten Dateien gespeichert.gif" style="float:left.gif" alt="neu" /> <img src="neu. Abbildung 10 zeigt die Verwendung dieses Features am Beispiel eines Wetterberichts. Abbildung 10: Wetterbericht mit Bildern und ohne Bilder (nur ALT-Texte) Als Datenformate für <img>-Bilder werden nur Pixel-Formate von vielen Browsern unterstützt: ." alt="neu" /> <img src="zierleiste.MMT Webprogrammierung 1 21 1.gif" /> <img src="neu. in der HTML-Datei erfolgt nur ein Verweis auf die Bilddatei. gibt man für jedes Bild einen Alternativtext (Attribut alt) an.s.4.

com">zu CNN</a> <a href="seite2. jpg Millionen von Farben. Mit dem svg-Tag kann man Vektorbilder direkt in die Seite einbetten. Photos. „animiertes Gif“ enthält mehrere Bilder. Besonders geeignet für Bilder mit klaren Kanten. in dem das Bild nichts an Qualität verliert. diese wird aber von MSIE erst ab MSIE 7 unterstützt. und die Dateigröße möglichst gering ist. aus DOCTYPE. 1. die der Reihe nach angezeigt werden (Daumenkino). html.gif" alt="zur Seite 2" /></a> 1. B.4.cc">Mail</a> <a href="seite2. keine Transparenz. Ideal wäre. Logos. png Nachfolge-Format für gif.MMT Webprogrammierung 1 22 gif Palette von 255 Farben + 1 Transparenz-Farbe (kein Alpha). head und body. wenigen Farben.4. Besonders geeignet für Bilder mit Farbverläufen. Zwei weitere Arten Bilder einzubauen werden wir später genauer betrachten: Mit dem canvas-Tag und Javascript kann man (Pixel-)Bilder zeichnen. Tabelle 1: Bildformate im Vergleich Es kann jedes Bild in allen drei Formaten gespeichert werden.htm"><img src="mehr. Alpha-Transparenz. Comics.htm">mehr</a> <a href="mailto:aa@bb. B. variable Kompression. z. einfärbigen Flächen. das Format auszuwählen.9 Gesamt-Struktur einer Webseite Eine (X)HTML Seite hat ein Grundgerüst.8 Links Als Attribut href des Linkskönnen Sie eine absolute oder relative URL angeben: Link zu Webseite (absolute URL) Link zu Webseite im selben Ordner (relative URL) Link zu E-Mail Adresse Bild als Link <a href="http://cnn. Hier am Beispiel von HTML5: . z.

</body> </html> Achtung: es kann nur einen head und einen body geben.MMT Webprogrammierung 1 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Eine Webseite</title> </head> <body> Hier die Tags.10 Listen Listen werden mit zwei verschachtelten Tags gebaut: der li-Tag für den einzelnen Listen-Punkt. und der ol.4.11 Tabellen Um eine Tabelle zu erzeugen müssen Sie die Tags <table>. charset=utf-8" /> <title>Eine Webseite</title> </head> <body> Hier die Tags.org/TR/xhtml1/DTD/xhtml1-transitional. keine Wiederholungen! 1. .org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html. <tr> und <td> richtig ineinander verschachteln.4.oder ul-Tag für die gesamte Liste.0 Transitional//EN" "http://www. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. Der meta-Tag für die Auswahl des Charactersets ist ebenfalls komplizierter.w3. die Sie schon kennen </body> </html> 23 Bei XHTML ist der DOCTYPE sehr viel komplizierter.dtd"> <html xmlns="http://www.w3. <ul> <li>punkti</li> <li>punkti</li> </ul> <ol> <li>eins</li> <li>zwei</li> <li>drei</li> </ol> 1. die Sie schon kennen.

was kaputten Code betrifft. von oben nach unten durcharbeiten und reparieren.1 Validator Um Fehler im HTML-Code zu finden reicht ein Webbrowser nicht aus.w3. http://validator.5. Mit etwas Glück repariert man das erste Problem und viele Folge-Fehler fallen damit auch weg. 1.org/ Abbildung 11: Der HTML-Validator des World Wide Web Consortiums Die Fehlermeldungen des Validators muss man sorgfältig lesen.MMT Webprogrammierung 1 <table border="1"> <tr> <td>Freitag</td> <td>Samstag</td> <td>Sonntag</td> </tr> <tr> <td>lernen</td> <td>lernen</td> <td>lange schlafen</td> </tr> </table> 24 HTML-Tabellen wurden früher in Webseiten für das Layout der Seite verwendet. Eine strenge Prüfung des HTML-Codes macht der Validator des W3C: . aber damit ist die Arbeit noch lange nicht vorbei. diese Tabellenlayouts sind noch auf älteren Webseiten zu finden. Moderne Webseiten werden mit CSS-Layouts gestaltet (Siehe Kapitel 3.5 Upload und Tools Der HTML-Code ist fertig. ). . Wie oben beschrieben sind Webbrowser sehr tolerant. 1.

ac.at.multimediatechnology.multimediatechnology. Um die Daten vom eigenen Computer auf den Webserver zu laden gibt es verschiedene Methoden. die wichtigsten sind FTP. SFTP.fh-salzburg. 1.at/~fhs666/ Der Server multimediatechnology. in welchen Ordner Sie die Daten speichern.at und multimediatechnology.B. Das Bestellformular finden Sie unter https://multimediatechnology.at FH Username + Passwort htdocs/ http://www. Der Server www. Usernamen.at ist auch unter den Namen multimediaart. Wählen Sie eine URL für die Sie sich auch in 2 Jahren nicht schämen.fh-salzburg. In der FH stehen Ihnen zwei Webserver zur Verfügung: auf www. Wenn Sie auf diesem Server Webspace haben möchten müssen Sie zuerst entscheiden welche URL Sie haben möchten und den Webspace dann Bestellen.users. z.at bekannt.2 Upload Die fertige Webseite muss auf einem Webserver veröffentlicht werden. können Sie selbst installieren: • Secure File Transfer Client: nur für SFTP .at/home/wunschdomain. WebDAV. Passwort.users.5.at FH Username + Passwort public_html/ eigene Subdomain.at und mediacube.ac. Für die Webserver der FH kann nur SFTP verwendet werden. unter welcher URL die Daten im Web sichtbar sind. Er wird nur von MMA+MMT verwendet.MMT Webprogrammierung 1 25 Abbildung 12: Fehlermeldung des Validators Die Fehlermeldung in Abbildung 12 geht auf einen Tippfehler zurück: der schließende Tag wurde falsch geschreiben.at bestellen.fh-salzburg. http://ichbinich.users.users wird von allen Studiengängen verwendet: Upload-Methode Name des SFTP-Servers Username + Passwort Ordner bei Upload URL SFTP www. bzw. Wenn Ihr Spitzname z.php Upload-Methode Name des SFTP-Servers Username + Passwort Ordner bei Upload URL SFTP multimediatechnology.ac.at/ Folgende Programme zum Upload sind in den FH-Labors installiert.B. "Doofie" ist sollten Sie trotzdem nicht doofi. Bei jeder Upload-Methode brauchen Sie folgende Informationen: den Namen des Servers.

Dann funktionieren die relativen Links nicht mehr. was Sie nicht tun sollten: die Datei mit Drag-and-Drop in den falschen Ordner am Webserver hinaufladen. Dreamweaver beachtet. Abbildung 14: Upload mit Dreamweaver in den falschen Ordner . dass die Ordnerstruktur und die relative Position der Dateien beibehalten wird.MMT Webprogrammierung 1 • • FireFox: AddOn von Firefox. Abbildung 13: Site-Fenster von Dreamweaver – Upload einer Datei automatisch in den richtigen Ordner Abbildung 14 zeigt. freie Software. dass die Datei lokal im Ordner html-ue1 liegt. nur dann funktionieren die relativen Links! Dreamweaver und FireFTP bieten Hilfe beim Erhalt der Struktur. und lädt Sie in den entsprechenden Ordner am Webserver hoch. können Sie selbst installieren Dreamweaver: Upload ist nach der Definition einer „Site“ möglich 26 Achten Sie beim Upload darauf. In Abbildung 13 wurde recht (am lokalen Computer) eine Datei ausgewählt und dann der Button „Datei bereitstellen“ gedrückt.

wie in Abbildung 15 gezeigt. Abbildung 15: Bearbeiten der FTP-Information in Dreamweaver Die anderen erwähnten Programme funktionieren sehr ähnlich. .MMT Webprogrammierung 1 Bevor Sie FTP im Dreamweaver Site-Fenster benutzen können müssen Sie (Unter SITE TEN 27 SITES VERWAL- BEARBEITEN ERWEITERT REMOTE-INFORMATIONEN) die richtige Konfiguration eintragen.

findmebyip. Welche Schreibweisen und Maßeinheiten es in CSS für Farben. Addison-Wesley. CSS Basics Was Sie wissen sollten • Wie HTML und CSS zusammen hängen.com/litmus/ Tools • Firefox AddOn ColorZilla .MMT Webprogrammierung 1 28 2. Absatz.Dan (2007): Bulletproof Webdesign.Eric A. Rahmen. ISBN 3827326230. Überblick über CSS3 + Browser. http://www. Wie CSS Selektoren aufgebaut sind. Fehler in einem CSS-Dokument ausbessern bis es valide ist Weitere Informationsquellen • • CSS Zen Garden. ISBN 3827324793. (2006): Eric Meyer's CSS. das zu dieser Darstellung führt • Mit Hilfe von Firebug oder durch Lesen des Codes herausfinden welche CSS-Regeln zu einer bestimmten Darstellung in einer (fremden) Webseite führen • Die Korrektheit des CSS-Codes mit dem CSS-Validator des World Wide Web Consortium überprüfen. • Welche Möglichkeiten zur Darstellung von Schrift. München. http://csszengarden. München. Addison-Wesley. Hintergrundfarbe und Hintergrundbilder CSS ungefähr bietet. • Wie das CSS Box Model funktioniert. URLs und Größenangaben gibt. Bei Vorgabe einer bestimmten visuellen Darstellung und eines HTML-Dokuments ein geeignetes Stylesheet erstellen. • • MEYER. Wie Sie die genaue Schreibweise der dafür notwendigen CSS-Deklarationen nachschlagen können Was Sie können sollten • Ein einfaches Stylesheet für ein HTML-Dokument erstellen. wie der Zusammenhang zwischen margin. border und padding ist.com/ CEDERHOLM.

aber das ist mehr ein Thema für MMA). font-family: Calibri. Es empfiehlt sich am Ende einer Schriftliste ein solches Kürzel als Standardwert „wenn alle Stricke reißen“ anzugeben. h1 und h2 vorgenommen. Das Stylesheet definiert für die einzelnen HTML-Tags wie sie dargestellt werden sollen. </style> Listing 1: Hintergrundfarbe. verwendet er. p { 3. p. h1 { font-size: 24px. Arial. wie "Trebuchet MS" in Zeile 6.h2 { 7.1 Kurzvorstellung von Stylesheets Die einfachste Art die visuelle Darstellung einer Webseite zu definieren ist die Einbettung eines Stylsheets. 2. 4. Achtung: Welche Schriften auf dem Endgerät zur Verfügung stehen ist nicht bekannt. Helvetica. Schriftfamilie. deswegen kann man mehrere Schriften angegeben. body { background-color: green. sans-serif. Die Syntax von Stylesheets ist völig anders als die von HTML.1. Diese Liste wird vom Browser von links nach rechts abgearbeitet. 8.1 Schriftart Zuerst werden wir die Schriften im Dokument festlegen. 5. Das letzte Wort in Zeile 7 „sans-serif“ ist ein CSS-Kürzel für „irgendeine serifenlose Schrift“. dabei sind folgende Werte möglich: sans-serif serif cursive fantasy monospace. (Man kann Schritfen auch verlinke . h1. } 9. } 10. Verdana. In Zeile 3 Vergleichen Sie Zeile 3 mit Zeile 7: Schriftnamen die ein Leerzeichen enthalten müssen in Anführungszeichen gesetzt werden. . <style type="text/css"> 2.MMT Webprogrammierung 1 29 2. } 11. } 12. h2 { font-size: 20px. Arial. sans-serif. In Zeile 2 bis 5 werden zwei Anweisungen für Fließtext gegeben (HTML-Tag <p>): die Schriftfamilie in Zeile 3 und die Schriftgröße in Zeile 4. font-size: 13px. } 6. An Hand dieses Beispieles werden nun die ersten Stylesheet-Befehle erklärt.die erste Schrift die er findet. Schriftgröße mit CSS festlegen font-family: "Trebuchet MS". In Listing 1 werden Formatierungen für die Tags body. der gezeigte <style>Tag wird im Head des HTML-Dokument eingebunden: 1.

B.da die Browser keine Silbentren- nung durchführen. Beim Lesen und Verstehen von CSS hilft das Firefox Add-On „Firebug“.1. den Sie mit text-indent festlegen.3 Absätze Wie immer in HTML erfolgt der Zeilenumbruch automatisch. Mit CSS können Sie verschiedene Aspekte des Absatz-Layoutes steuern. Blocksatz wird aber am Web wenig verwendet.4 CSS erforschen mit Firebug Sie haben nun einen kurzen Einblick in die Schreibweise und die Möglichkeiten von Stylesheets. Die Zeilenhöhe wird mit line-height festgelegt. Genug um Stylesheets von Webseiten zu lesen um neue Möglichkeiten kennen zu lernen. einige davon sind in Abbildung 16 gezeigt: Abbildung 16: Absatz mit CSS Formatanweisungen: text-indent und line-height Mit text-align können Sie die Ausrichtung des Texts im Absatz festlegen: left.h. Diese Maßeinheit macht bei der Darstellung am Screen. 2.2 Schriftgröße Die Schriftgrößen-Angabe in Zeile 4 verwendet Pixel als Maßeinheit. Dadurch entstehen bei den meisten Texten häßliche Löcher im Blocksatz.MMT Webprogrammierung 1 30 2. Die erste Zeile des Absatzes kann einen separaten Einzug haben. besonders in Kombination mit Bildern Sinn.1.1. center oder justify (Blocksatz). 1. Hier ist es sinnvoll für längere Texte einen etwas erhöhten Wert festzulegen (z. right.5em – d.5 mal die Breite des Buchstaben M in dieser Schrift) da die Standard-Darstellung der Browser etwas zu eng ist um gut lesbar zu sein. Rechtsklick + „Element untersuchen“ Zeigt die für diesen HTMLTag geltenden CSSAnweisungen Zeigt HTMLCode des Elements Abbildung 17: Firefox Add-On Firebug . 2.1.

<html><body> <h1><font face="Arial" color="blue">Das Studium</font></h1> <p><font size="+1">S</font>tudienziel ist es. } Mit der Trennung von Stylesheet und HTML wurde HTML wieder einfacher und übersichtlicher. seit den frühen 2000ern ist die Unterstützung in den gängigen Browsern vorhanden. So sieht nun eine HTMLSeite mit separatem Stylesheet aus: Die html-Datei <html><head> <link rel="stylesheet" type="text/css" href="fh. Besonders das nachträgliche Verändern der Gestaltung wurde vereinfacht.keine Schriftart oder Schriftgröße.</p> <p><font size="+1">P</font>rojekte und Praxissemster stellen schon während des Studiums die Verbindung.css"> </head><body> <h1>Das Studium</h1> <p>Studienziel ist es. das Format für die Stylesheets war aber noch nicht definiert. Erst ab ab 1995 wurde endlich an den Standards für Stylesheets gearbeitet. breit gefächerte technische und kreative Kompetenzen.2 Geschichte der Cascading Style Sheets Von Anfang an sollte eine HTML-Datei keine Information darüber enthalten. breit gefächerte technische und wirtschaftliche Kompetenzen... color: blue. wie der Text dargestellt werden soll . Im Jahre 1993 sah eine typische Webseite so aus <html><body> <h1>Das Studium</h1> <p>Studienziel ist es.. css h1 { font-family: Arial..</p> </body></html> Durch das Hinzufügen der Tags für Formatierung wurde der HTML-Code komplizierter und unübersichtlicher. Wichtige Argumente für den Einsatz von Stylesheets sind: • • Zusätzliche Gestaltungsmöglichkeiten Einheitliche Gestaltung von mehreren Webseiten .. breit gefächerte technische und kreative Kompetenzen. } p:first-letter { font-size: large. Andere Browser übernahmen diese Tags von Netscape.. die die Darstellung der Webseite festlegen. </body></html> Da es keine Stylesheets gab „erfand“ Netscape ab 1994 zusätzliche HTML-Tags. Die Formatierungs-Information sollte in sogenannten „Stylesheets“ gespeichert werden. HTML sollte nur strukturelle Information enthalten („das ist eine Überschrift“ aber nicht „Helvetica 24pt“). </body></html> Die Datei fh...MMT Webprogrammierung 1 31 2.

• Um ein Stylesheet zu erstellen. wissen.h2 { font-family: Arial. dass h1. 2. i. • Damit das Stylesheet wirkt. font. die richtigen HTML-Tags verwenden. (siehe h1. die das HTML-Dokument erstellt. muss die DesignerIn die HTML-Tags kennen. } p { text-align: justify. diese werden ignoriert. B. Helvetica. In diesem Falle werden für alle Elemente die selben Style Angaben definiert. sans-serif.1 Stylesheet Syntax Beispiel h1. } Selektor Rule Deklaration Deklaration Eine Stylesheet-Regel („Rule“) besteht aus einem Selektor gefolgt von einer geschwungenen Klammer die eine oder mehrere Deklarationen enthalten kann. Dazu müssen Sie in jede HTMLDatei die CSS Datei mittels folgender Anweisung einbinden: .h2 in obigem Beispiel). wenn Sie für jede Webseite dieselbe CSS Datei verwenden. z. h3 für die Überschriften stehen. die schon in der HTML-Datei vorhanden sind. background-color: white. Dies können Sie erreichen. Überschriften wirklich mit h1. h3 formatieren. Es können keine neuen Elemente eingefügt werden. h2. muss die RedakteurIn. und nicht mit b. z. Style für mehrere Seiten Die Seiten einer gesamten Website haben meist ein einheitliches Aussehen. Sie können beliebig Zeilenumbrüche einfügen.2. h2. B. color: lightblue. } body { margin-left: 150px. Der einfachste Selektor besteht aus dem Namen eines einzelnen HTML-Tags. Sie können auch mehrere Elemente durch ein Komma trennen.MMT Webprogrammierung 1 • 32 Arbeitsteilung zwischen DesignerInnen (die CSS erstellen) und RedakteuerInnen (die Inhalte erstellen) Aber Achtung: CSS ist nicht die Lösung jedes Problems: • Mit Stylesheets können Sie nur Elemente verändern.

css" /> 33 Diese Zeile sollte innerhalb des head Bereiches der HTML-Datei stehen (da sonst die Darstellung der Seite verzögert werden kann5). IDs. betrifft das alle p-Tags in der Webseite. müssen Sie innerhalb des Tags das Attribut style verwenden. können Sie die Style-Angaben direkt in die HTML-Datei schreiben.definieren: 5 Siehe Souders.">Rote. wenn die verschiedenen Style-Deklarationen sich widersprechen? Die Angaben bei einem einzelnen Tag haben immer Vorrang.“ 2. mysyle.css könnte etwa so aussehen wie im vorigen Beispiel. Steve (2007) High Performance Web Sites.h2 { font-family: Arial. danach folgen die lokalen Angabe im head Bereich und erst zum Schluß die externe Datei. Helvetica. O'Reilly. <h1 style="color:red.sogenannte "Klassen" . zentrierte Überschrift</h1> Gültigkeitsbereich einer Style Angabe Sie können innerhalb einer HTML-Datei sowohl eine externe Style Sheet Datei verwenden (eingebunden durch eine entsprechende Anweisung im head Bereich) als auch eine lokale Definition im head Bereich angeben. Was passiert nun. als auch spezielle Angaben für einzelne Tags erstellen. Um einen style für einen einzelnen Tag zu definieren.MMT Webprogrammierung 1 <link rel="stylesheet" href="mystyle. color: lightblue } </style> Style für einen Tag Style Angaben können auch direkt in einen einzelnen HTML-Tag geschrieben werden. „Je näher beim Tag desto stärker wirkt es.2. ISBN 9780596529307 . SPANs und DIVs Wenn Sie mit den Style-Angaben den p-Tag umformatieren.2 Klassen. <style> h1. Zu diesem Zweck können Sie sich im Stylesheet noch weitere Formatvorlagen . Style für eine Seite Wenn Sie einen Style nur auf einer einzigen Webseite verwenden. Oft möchten Sie aber ein oder zwei Absätze anders formatieren als die anderen Absätze. text-align:center. In diesem Fall gilt die Angabe nur für diesen ganz speziellen Tag. und zwar innerhalb des head Bereiches. sans-serif.

} /* nur der Tag mit der id #impressum */ p#impressum { background-color:#ddd. } /* == nur der p-Tag mit der id #impressum */ b#impressum { background-color:#ddd.wichtig { color: red. <p>Es gibt hier ganz <span class="wichtig">besonders interessante</span> Meldungen. } /* alle Tags mit der Klasse wichtig */ p. <div> ist ein blockbildender Tag. ohne dass ein passender Tag vorhanden ist. die beide selber kaum Eigenschaft aufweisen.MMT Webprogrammierung 1 .wichtig { color: yellow. Hier können Sie die beiden Tags <span> und <div> verwenden. Jedem normalen HTML-Tag können Sie nun diese Klasse zuweisen.</p> Die Worte „besonders interessante“ erscheinen rot. <p>Eine <b class="wichtig">ganz wichtige</b> Meldung</p> <p class="wichtig">Ein ganz wichtiger Absatz</p> <p>Ein ganz normaler Absatz</p> Zur „normalen“ Wirkung des HTML-Tags kommt nun die Formatierung durch die Klasse hinzu: der Text „ganz wichtige“ und „Ein ganz wichtiger Absatz“ ist in diesem Beispiel also rot. vor dem Klassennamen steht immer ein Punkt. } /* nur der Tag b mit der Klasse wichtig */ #impressum { background-color:#ddd. Zur eindeutigen Kennzeichnung von Tags wird das Attribut id verwendet: <p>Eine <b class="wichtig">ganz wichtige</b> Meldung</p> <p class="wichtig">Ein ganz wichtiger Absatz</p> <p id="impressum">Das einzige Impressum dieser Seite</p> Auf diese eindeutigen IDs kann in CSS mit der Raute referenziert werden: #impressum { background-color: #DDD. <span> eignet sich für die Verwendung in Fließtext. dass Sie einem Bereich eine bestimmte Klasse zuweisen möchten. Ein Tag kann mehrere Klassen erhalten.wichtig { font-size: 20px. } 34 Diesen Klassen können Sie eigene Namen geben (hier „wichtig“). diese werden durch Leerzeichen getrennt im class-Attribut angeführt. } Sowohl Klassen als auch IDs können mit Tags kombiniert werden um einen komplexen Selektor zu bilden. aber das macht nur bei Klassen wirklich Sinn: . Eine Klasse kann also mehrmals in einem Dokument verwendet werden. Klassen und IDs in dieser Schreibweise an: Es wird öfter vorkommen. } /* nix! */ Die Firefox-Erweiterung Firebug zeigt Tags.wichtig { color: red. . Dies geschieht mit dem Attribut class. } /* nur der Tag p mit der Klasse wichtig */ b.

p. grün.…) oder mit der Angabe von rot-.gif) oder url(relativ/ bild. Tool-Tipp: Mit dem Firefox AddOn Colorzilla kann man die Farben einer Webseite auslesen und in verschiedenen Schreibweisen kopieren: Abbildung 18: Colorzilla Pipette zum auslesen einer Farbe und Colorzilla Menü zum kopieren des Codes Wird in einem Stylesheet auf eine URL verwiesen (z.und Größen-Angaben gibt es mehrere Maßeinheiten: px (Pixel) . blockquote.B. hexadezimal #10F oder zweistellig hexadezimal #1000FF.com/bild. Farbangaben können auf mehrer Arten erfolgen: mit einigen Farbwörtern (red. Einige davon sind relativ (em = relativ zur Schriftgröße. cm (Zentimeter).und Außenabstand. h1. Die absoluten Angaben kann man derzeit nur bei der Ausgabe auf Papier sinnvoll verwenden.0.2. green. % (Prozent). B. Innen. Klassisches Box Model Jeder blockbildende Tag (z.gif) zum Einsatz. Diese werden mit den Deklarationen border. …) hat einen Rahmen. ex (Höhe des Buchstaben X). h2. div. em (=Breite des Buchstaben M) . Ein Hintergrundbild und/oder eine Hintergrundfarbe des Tags reicht immer bis zum Rahmen. auf die URL eines Hintergrundbildes).3 Maßeinheiten in Stylesheets Für Längen.255). padding und margin festgelegt. in (Inch). px = relativ zur Pixel-Größe am aktuellen Ausgabemedium). andere absolut (Centimeter. Inch).und blau-Anteil (jeweils werte von 0 bis 255) in verschiedenen Schreibweisen: Dezimal rgb(16. .MMT Webprogrammierung 1 35 2. aber nicht darüber hinaus. Achtung: die relative URL bezieht sich auf das Stylesheet (nicht die HTML-Datei in der es verwendet wird). dann kommt die Schreibweise url(http://absolute.

MMT Webprogrammierung 1 36 Abbildung 19: Darstellung des Box Models von hicksdesign.uk Die Ausdehnung von margin. padding in Firebug Dabei wird direkt in der Webseite der Außenabstand (margin) gelb und der Innenabstand (padding) dunkelviolett hinterlegt. Die Standard-Darstellung von Absätzen erklärt sich über den margin-top und margin-bottom des <p>Tags: . Abbildung 20: margin. padding und border kann man besonders gut mit der FirefoxErweiterung Firebug erforschen wie in Abbildung 20 gezeigt. border.co.

die Hintergrundfarbe mit background-color gesetzt. das Hintergrundbild zu auffällig: Der Text „wurde schon besucht“ in der letzten Zeile ist kaum noch lesbar. bis es die ganze Fläche des Tags ausfüllt (background-repeat). Jeder Tag kann mittels CSS ein Hintergrundbild erhalten (background-image). Links formatieren Der <a>-Tag wird in HTML für zwei sehr unterschiedliche Dinge verwendet: zum Setzen von Links und zum Setzen von Textmarken (auch ‚Anker’ genannt): . Abbildung 22: Beispiel für ein Hintergrundbild in einer Webseite Bitte beachten Sie: Der Inhalt der Seite sollte trotz Hintergrundbild immer noch lesbar sein! Im Beispiel in Abbildung 22 ist eine Linkfarbe zu hell bzw. Hintergrundbilder Die Farbe des Textes wird mit color.MMT Webprogrammierung 1 37 Abbildung 21: Standard-Darstellung von Absätzen (<p>) im Browser Farben. Abbildung 22 wurde ein Bild mit drei Zahnrädern als Hintergrundbild verwendet. Hintergrundfarben. Das Bild wird einfach dargestellt oder „gekachelt“ –horizontal und vertikal so oft wiederholt. durch die Wiederholung werden sieben Zahnräder angezeigt. png) dienen. jpg. Als „Hintergrundbild“ in einer Webseite kann jedes Bild in einem Web-geeigneten Dateiformat (gif.

MMT Webprogrammierung 1 <h1><a name="unis"></a>Universitäten</h1> <a href="http://www. interaktiv. 9px. 2. “ Das dahinter stehende Prinzip lautet: für die verschiedenen Ausgabemedien sollen nicht verschiedene Versionen einer Webseite erstellt werden. praktisch sein.at/">Uni Salzburg</a> 38 Textmarken sind normalerweise unsichtbar. center right. dann soll die Website immer noch lesbar und benutzbar bleiben. a:visited { text-decoration: none. sondern alle Ausgabemedien werden mit einem Dokument bedient. dann soll die Website besonders schön. Links sind normalerweise blau oder violett und unterstrichen. Der Browser unterscheidet dabei zwischen Links die schon einmal besucht wurden (visited) und neuen Links. Um die Darstellung von Links zu verändern muss man in CSS :link oder :visited als Selektoren verwenden. a:link. CSS unterstützt. a:visited { background-image: background-position: background-repeat: padding-right: } url(icon-link. er bedeutet ungefähr: „funktioniert auch ohne … gut. Schlechtes Beispiel: Bild als Überschrift Als Überschrift einer Seite soll nicht blos ein Text sondern eine komplexe Grafik angezeigt werden: . } a:link {color:blue} a:visited {color:#FF00FF } Im folgenden Beispiel werden die Links mit einem Icon markiert: a:link.gif). no-repeat.3 Graceful Degradation Der englische Begriff ‚graceful degradation’ hat noch keine adequate deutsche Übersetzung. Wenn der Browser Javascript.uni-salzburg. Flash. Wenn der Browser etwas nicht unterstützt.

overflow:hidden. ohne Eingriff in den HTMLCode.png" /> 39 Das sieht zwar wie eine Überschrift aus – wenn das Bild geladen wird – die Information ist aber für eine Suchmaschine oder ein Braille-Ausgabegerät nicht lesbar. } </style> <h1 id="bildStattText">MultiMediaTechnology</h1> Das Bild kann ausgetauscht werden indem man das Stylesheet ändert. background: url(mmtlogo-400.MMT Webprogrammierung 1 <img src="mmtlogo-400. Schlechtes Beispiel: Navigationsmenü mit Bildern Ein Navigationsmenü wird mit Tabellen und Bildern aufgebaut: .png). Browser ohne CSS und Suchmaschinen verwenden einfach den Text: <style> h1#bildStattText { /* schiebt den "echten text" extrem weit nach links */ text-indent:-10000px. width:400px. Gutes Beispiel: Image Replacement Der Text wird normal im HTML-Code eingegeben. Für diese wäre folgender Code optimal: <h1>MultiMediaTechnology</h1> Mit Image Replacement kann man die optimale Darstellung für Suchmaschinen und Braille Ausgabegeräte mit der optimalen Darstellung als Bild kombinieren. Es wird aber auch ein Bild in der richtigen Schriftart erstellt. /* hoehe und breite der grafik angeben! */ height:140px. Bei CSS-fähigen Browsern wird der Text versteckt und das Bild angezeigt.

MMT Webprogrammierung 1 <table cellspacing="1"> <tr> <td><a href="home.gif" /></a></td> <td><a href="contact.gif" /></a></td> <td><a href="portfotdo. <ul> <li><a <li><a <li><a <li><a </ul> href="home.html"><img src="2.html"><img src="4.html">news</a></li> href="portfolio.html">portfolio</a></li> href="contact.gif" /></a></td> </tr> </table> 40 Wieder gilt: die Information ist für eine Suchmaschine oder ein Braille Ausgabegerät nicht lesbar.) lernen Sie eine Methode kennen wie Sie aus dieser Liste ein Menü machen.html">home</a></li> href="news.html">contact</a></li> Im nächsten Kapitel (Fehler! Verweisquelle konnte nicht gefunden werden. .html"><img src="3. auf Seite Fehler! Textmarke nicht definiert.html"><img src="1. Für diese Ausgabemedien wären Links mit normalen Texten besser.gif" /></a></td> <td><a href="news.

.findmebyip.MMT Webprogrammierung 1 41 3. Mittels CSS aus einer Liste von Links ein Navigations-Menü oder ein Dropdown-Menü machen.html und index. In: A List Apart. und im Browser der Quellcode nie sichtbar wird.com/litmus MARCOTTE. • Mit PHP includes ein Navigationsmenü in mehreren Webseiten verwenden. ISBN 3827324793. Addison-Wesley.Eric A. CSS für Layout und Interaktion + URLs Was Sie wissen sollten • Wie verschiedene Ausgabegeräte und verschiedene Bildschirmgrößen die Darstellung von Webseiten beeinflussen und die Gestaltung von Webseiten schwierig machen. München. Ethan (2010): Responsive Webdesign. Float. welche Bedeutung index.com/ CEDERHOLM. ISBN 3827326230. München. Addison-Wesley. (2006): Eric Meyer's CSS. und media queries funktionieren. • MEYER. Was Sie können sollten • • • An einem bestehen CSS-Layout Veränderungen vornehmen. Das PHP am Server ausgeführt wird.php meist am Webserver haben. so dass bei wesentlich kleineren oder größeren Ausgabegeräten noch sinnvoll dargestellt werden kann.alistapart. http://csszengarden. http://www. • Ein statisches Layout mit mediaqueries so erweitern. • • • Wie absolute Positionierung. Mittels CSS zwei oder drei Spalten nebeneinander positionieren.Dan (2007): Bulletproof Webdesign.com/articles/responsive-web-design/ • • CSS Zen Garden. Weitere Informationsquellen • • Browser-Untersützung für HTML5 und CSS: http://www. Wie relative und absolute URLs funktionieren.

Abbildung 23 zeigt einige derzeit (2010) mögliche Bildschirm-Auflösungen. Abbildung 23: einige mögliche Bildschirmauflösungen und Seitenverhältnisse 2010.MMT Webprogrammierung 1 42 3.2 Rahmenbedingungen für Layout Wie in Kapitel 1 beschrieben gibt es viele verschiedene Ausgabegeräte für Webseiten. basierend auf http://en. dass Browser ohne Javascript ganz aus der Messung herausfallen. Für die Gestaltung des Layouts von Webseiten spielt dabei die Bildschirmgröße bzw. wie viel Platz im Browserfenster zur Verfügung steht? Die Antwort lautet: ich weiß es nicht. mit der man die Größe des Browserfensters messen kann – das Ergebnis der Messung ist natürlich dadurch verfälscht.2.1 Auflösung Zuerst stellt sich die Frage: woher weiß ich.org/wiki/Image:Vector_Video_Standards2. steht bei der höchsten Auflösung also (mehr als) die neunfache Fläche zur Verfügung! . die Auflösung eine wichtige Rolle. und es gibt keine zuverlässige Methode. mit der man diese Information in jedem Fall herausfinden kann. Es gibt eine Meßmethode mit Hilfe der Programmiersprache Javascript. 3. wie hoch die Auflösung am Computer meiner LeserIn ist? Woher weiß ich. Da Breite und Höhe (mehr als) verdreifacht sind. Diese Beschränkung sollten Sie bei den folgenden Überlegungen immer beachten.wikipedia.svg Vergleichen Sie die höchsten hier dargestellte Auflösungen mit der geringsten Auflösungen.

um den „netto“ verbleibenden Raum für die Gestaltung der Webseite zu erhalten. Abbildung 25 zeigt diese Problematik am Beispiel von Firefox.org von 2000 bis 2010. .2.MMT Webprogrammierung 1 43 Achtung. Achtung: Auf Grund des Messverfahrens werden hier wahrscheinlich nur Desktops erfaßt.4 in 4. Symbolleisten. Netto-Fläche Von diesen „Brutto-Angaben“ über die Größe der zur Verfügung stehenden Fläche sind nun noch der Platz für den Fensterrahmen des Browsers. und eventuell eingeblendete Favoritenleisten abzuziehen. aber eine höhere Pixeldichte: Gerät Pixel 1280 × 1024 1440 × 900 480 × 272 480 × 320 960 × 640 600 × 800 800 × 480 Diagonale Inch 19 in 15. nicht mobile Geräte.5 in 3. 13“ Laptop. mobiles Endgerät) ist bei gleicher Pixel-Auflösung sehr unterschiedlich! Mobile Geräte haben eine geringe Auflösung.w3schools.5 in 6 in 3. für Scrollbalken.7 in Pixel per Inch 86 ppi 110 ppi 128 ppi 163 ppi 326 ppi 167 ppi 254 ppi Alter PC Macbook Pro Sony PSP Apple IPhone3 Apple IPhone4 Amazon Kindle Android Nexus One Abbildung 24 zeigt Statistiken über die Bildschirmauflösung von w3schools.com/browsers/browsers_display. In diesem Zeitraum hat sich die Mehrheit langsam von 800x600 (bis 2003) auf 1024x768 (bis 2008) und schließlich auf höhre Auflösungen verschoben.2 Brutto-Fläche vs.asp 3. diese Angaben sind in Pixel – die reale Größe des Ausgabegerätes (24“ Desktop. http://www.3 in 3. Abbildung 24: Statistik über die Bildschirmauflösung.

at 3. Manchmal in Kombination mit der Beschriftung „best viewed at 1600x1200“ 2) Ignorieren dass es viele Bildschirmauflösungen gibt. Bei 1050 Pixel Breite waren es nur noch 20%. Abbildung 26: „Netto“-Breite von Browser-Fenstern.MMT Webprogrammierung 1 44 Auflösung 1280 x 800 Fenstergröße 1280 x 780 Platz für die Webseite: 1264 x 595 Platz für die Webseite: 913 x 578 Abbildung 25: Platzbedarf von Browser-Elementen: firefox ohne Sidebar. „best viewed“ ist eine Zumutung für alle LeserInnen auf ‚unpassenden’ Ausgabegeräten. Dazu ein strenges Urteil: 1) ist völlig inadäquat für das Medium Web. Internet Explorer mit Favoriten Abbildung 26 zeigt eine Statistik über die „Netto-Größen“ von Browser-Fenstern aus dem Jahre 2006. Stellen Sie sich vor. die den gleichen Inhalt für verschiedene Auflösungen unterschiedlich darstellen.3 Entwurf für mehrere Auflösungen Wie gehen WebdesignerInnen mit den verschiedenen Auflösungen um? Ein paar Varianten: 1) Ignorieren und für die eigene Bildschirmauflösung entwerfen. 70% der Browser vollständig angezeigt werden. Was würden sich wohl RollstuhlfahrerInnen oder Leute mit Kinderwagen dazu denken? . und für das Minimum entwerfen.2.horus. 2005-2006. Laut dieser Statistik konnte eine Webseite mit Breite 950 Pixel auf ca. und dann ein Schild daneben gestellt „FH nur benutzbar für Leute die Treppen steigen können“. der Architekt der FH hätte eine Treppe zum Eingang zum Foyer eingeplant. Quelle: webwelt. 3) Ein Entwurf der für mehrere Auflösungen funktioniert 4) Zwei oder drei Entwürfe.

ignoriert aber die gestalterische Herausforderung des Mediums. 3) + 4) Nur das verdient wirklich die Bezeichnung „Webdesign“.MMT Webprogrammierung 1 45 2) Zeigt schon ein Minimum an Wissen über das Web. Weil soch ein Entwurf auf einem Bildschirm mit hoher Auflösung sehr klein auf einer großen leeren Fläche erscheint wird es spöttisch out“ genannt. Content und ZusatzContent voll sichtbar. Ein Beispiel für Variante 3 : Darstellung der Seite bei einer Auflösung von 800x600: Navigation (linke Spalte) und Content ist sichtbar. Darstellung der Seite bei einer Auflösung von 1024x768 Navigation. . Eine Spalte rechts mit untergeordnetem Content ist nur durch Scrollen nach rechts erreichbar.

Dieses Beispiel ist „linksbündig“. Der „leere“ Teil der Webseite wird durch das Hintergrundbild interessant gestaltet. Der „leere“ Teil der Webseite wird durch das Hintergrundbild interessant gestaltet.MMT Webprogrammierung 1 46 Darstellung der Seite bei einer Auflösung von 1280 x 1024 Navigation. Die aktuelle Webseite der FH ist bei höheren Auflösungen zentriert: Abbildung 27: Aktuelle Homepage der FH Salzburg (November 2009) Dieser Effekt wird mit einer fixen Breite und einem Margin von „auto“ links und rechts erzielt: . aber horizontal zeigt es auch bei dieser Auflösung neue Details. Content und ZusatzContent voll sichtbar. Darstellung der Seite bei einer Auflösung von 1600x1200. Das Hintergrundbild wiederholt sich zwar vertikal. Content und ZusatzContent voll sichtbar. Navigation.

600 px Breite 800 px Breite 1280 px Breite 3. Dafür sind mediaqueries in CSS3 notwendig. } 47 Variante 4) ist 2010 erst in einigen Browsern möglich.2.MMT Webprogrammierung 1 div#wrap { width: 76em. vom Browser (Firefox) in 3 Stufen vergrößert dargestellt .4 Bilder Bilder waren lange Zeit ein Grund. gif) sind eigentlich für die Darstellung bei einer bestimmten Größe gedacht. Das ist im Jahr 2010 anders.1. Die Vergrößerte Darstellung von Pixel-Bildern liefert keine guten Ergebnisse: Abbildung 28: Ausschnitte aus einem Pixel Bild. warum das Layout von Webseiten nicht flexibel war: weil die Bilder nur für die Darstellung bei einer bestimmten Größe geeigenet waren.2. margin: 0 auto. Pixel Als Bildformate für <img> Tags in Webseiten werden nur Pixel-Formate von vielen Browsern unterstützt (siehe auch Kapitel 2. Seite 21). Diese Formate (jpg. png.

1" baseProfile="full" width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 300 300"> <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255.html#PreserveAspectRatioAttribute#ExamplePreserveAspectRatio .dtd"> <svg xmlns="http://www.1/DTD/svg11. Die Einbindung erfolgt mit dem Object-Tag: <object type="image/svg+xml" data="circle.svg"></object> SVG-Dateien kann man im Code schreiben oder mit Inkscape.0).org/2000/svg" version="1.org/Graphics/SVG/1.org/TR/SVG/coords. stop-opacity:1"/> </linearGradient> <circle id="myCircle" cx="50%" cy="50%" r="100" fill="url(#orange_red)" /> </svg> Das Attribut preserveAspectRatio6 im svg-Tag bestimmt wie das Bild auf verschiedenen Größen dargestellt werden soll.0). stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255.MMT Webprogrammierung 1 48 Aktuelle Browser sind aber sehr gut bei der verkleinerten Darstellung von Pixel-Bildern.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0.w3. Adobe Illustrator oder anderen VektorProgrammen erstellen. SVG-Bilder können in beliebiger Größe verwendet werden.w3.1//EN" "http://www. 6 http://www. <?xml version="1. Es wird im Herbst 2010 von allen Browsern ausser Internet Explorer untestützt.w3.255. Abbildung 29: Pixel Bild wird vom Browser (Firefox) in 3 Stufen verkleinert dargestellt Vektor Mit dem Format SVG steht auch ein vektor-basiertes Bildformat für das Web zur Verfügung.

. oder nur der Text wird verändern. in Firefox mit der Tastenkombination STRG + oder STRG – Je nach Schriftgröße und zur Verfügung stehendem Platz im Browser-Fenster wird der Browser die Absätze geeignet in Zeilen umbrechen. Abbildung 31 zeigt das entsprechnde Menü in Firefox. Abbildung 30:Darstellung von Text bei verschiedenen Fensterbreiten und Schriftgrößen Beim Vergrößern und Verkleinern der Schriftgröße verwenden die Browser zwei verschiedene Methoden: entweder die Bilder werden mit der Schrift vergrößert und verkleinert. Das „letzte Wort“ hat hier die LeserIn. Ohne Javascript ist er nur eine leere Leinwand. die Bilder aber bleiben gleich. auf die mit Javascript in 2D oder 3D gezeichnet werden kann. die die Schrift größer oder kleiner stellen kann. wie in Abbildung 30 gezeigt. Häufiger ist die erste Variante (Default-Einstellung der meisten Browser). und wird deswegen hier noch nicht behandelt.B.5 Schriftgröße Die Schriftgröße im Browser unterliegt nur bedingte der Kontrolle durch HTML und CSS Code.2. z.MMT Webprogrammierung 1 49 Canvas Der canvas-Tag bietet eine Leinwand. Der letzte Punkt des Menüs „Nur Text zoomen“ kann aktiviert oder deaktiviert werden. 3. in MSIE unter Ansicht Schriftgrad.

} Bei der Darstellung im Browser kann der nicht-blockbildender Tag em dabei auf mehrere Zeilen verteilt werden und nimmt dann mehrere rechteckige Bereiche ein. 3. je nach Sprache von links nach rechts oder von rechts nach links.3 CSS für Layout Die Darstellung einer HTML-Seite durch den Browser erfolgt von oben nach unten.6 schon erläutert). . Wenn Sie das Bild wie in Abbildung 33 mitten in einen Absatz hinein setzen. Dies ist eine besondere Herausforderung für das Design der Seite. und nicht etwa frei auf der Webseite positioniert.4. } em { background-color:#FFFF66. ergibt das meist ein sehr hässliches Layout. In Abbildung 32 wurden <p> und <em>-Tags verwendet und mit folgendem Stylesheet formatiert: p { background-color:#CCCCCC. verändern sich damit die Proportionen und das Layout der Seite. der blockbildende Tag p wird immer als ein Rechteck dargestellt: Abbildung 32: Darstellung von blockbildenden und nicht-blockbildenden Tags Ein Bild wird dabei wie ein Wort im Text behandelt.MMT Webprogrammierung 1 50 Abbildung 31: Menü zum Verändern der Schriftgröße in Firefox Wenn die Textgröße unabhängig von der Bildgröße verändert wird. Dabei wird zwischen blockbildenden Tags und nichtblockbildenden Tags unterschieden (wie in Kapitel 1.

MMT Webprogrammierung 1 51 Abbildung 33: Bild mitten im Absatz Browser können keine Wörter trennen und umbrechen.0 URLs nicht umbricht. der lange Wörter enthält. Mit width kann eine Andere Breite eines Blocks definiert werden: div#main { width:500px.3. der den zur Verfügung stehenden Platz automatisch gleichmäßig verteilt. . In Abbildung 34 können Sie sehen. } Die Werte von padding. in MSIE 7. Verschiedene Browser verhalten sich hier unterschiedlich. border. padding: 10px.0 3. margin müssen Sie dazu addieren um den Gesamt-Platzbedarf zu errechnen: { width: 200px. ein langes „Wort“ kann die Breite eines Elemets überschreiten. margin: 32px 0px } Gesamtbreite = 0px + 10px + 10px + 200px + 10px + 10px + 0px = 240px Abbildung 35: width im Box-Model Um einen Inhalt zu zentrieren kann margin mit Wert auto verwendet werden.1 Width und Auto Normalerweise nimmt ein Block die maximal zur Verfügung stehende Breite ein. Firefox 3. Abbildung 34: Darstellung eines Absatzes mit Rahmen und fixer Breite. dass Microsoft Internet Explorer 7. border-width: 10px.0 hingegen kann URLs umbrechen.

MMT Webprogrammierung 1
div#main { width:500px; margin-left: auto; margin-right: auto; }

52

3.3.2

Float
Eine Möglichkeit aus der normalen Reihenfolge der Darstellung auszubrechen bietet die Deklaration
float mit den Werten left und right. Damit wird ein Element nach links bzw. rechts gesetzt, der

Rest des Inhalts „rutscht nach oben“ und wird neben das Element gesetzt („umfließt das Element“). In Abbildung 4 sind drei Absätze zu sehen die jeweils als erstes ein Bild enthalten. Im ersten Absatz ist die Darstellung ganz normal – das Bild wird wie ein Wort im Text behandelt. Im zweiten Absatz „floated“ das Bild nach rechts, der Text rutscht links davon nach oben. Im dritten Absatz „floated“ das Bild nach links, der Text rutscht rechts davon nach oben.

Abbildung 36: Bilder mit float

Bei Bildern funktioniert float besonders einfach, weil das Bild schon eine fixe Breite hat. Wird ein anderer HTML-Tag mit float versehen muß man auch die Breite des Tags setzen um einen sichtbaren Effekt zu erzielen. In Abbildung 37 soll der zweite Absatz nach rechts gehen. Er hat die ID edvard.

p { margin: 0px; } #slim { float:right; width:33%; }

Abbildung 37: Ein Absatz mit float

MMT Webprogrammierung 1

53

Wenn viele Elemente mit float positioniert werden die die gleiche Höhe haben entsteht ein besonders flexibles Layout: in Fehler! Verweisquelle konnte nicht gefunden werden. werden je nach zur Verfügung stehendem Platz drei oder vier Bilder nebeneinander dargestellt:

Abbildung 38: Zwei Darstellungen der Bildergalerie mit float

3.3.3

Absolute Positionierung
Mit der Deklaration position:absolute wird ein Tag aus der normalen Darstellung herausgenommen und über dem restlichen Inhalt der Seite platziert. Mit top und left kann die linke obere Ecke des Elements positioniert werden.
#navi { position: absolute; width: 80px; top: 0px; left: 0px; }

In Kombination mit einem Inhalt mit margin-left ergibt das folgendes Layout:

margin-left von Inhalt

Abbildung 39: Kombination von absoluter Positionierung und margin-left

Die Koordinaten (top und left) beziehen sich normalerweise auf die linke obere Ecke des Browserfenster. Man kann auch bottom und right) verwenden, dann wird der rechte Rand des Elements be-

MMT Webprogrammierung 1

54

züglich des Rechten Randes des Browserfensters positioniert, bzw. der utnere Rand mit dem unteren Rand. Ein Tag mit position:absolute oder position:relative bildet für seine untergeordneten Tags ein neues Koordinationsystem. In folgendem Code definiert das main-div ein neues Koordinatensystem, das navi-div ist also in der linken oberen Ecke des main-div und nicht in der linken oberen Ecke des Browser-Fensters positioniert.
<div id="main"> <div id="content"> <h1>Inhalt</h1> <p>Hier ist der Inhalt[. . . ]</p> </div> <div id="navi"> [. . . ] </div> </div> #main { border: 1px red solid; position:relative; width: 700px; margin: 0px auto; } #content { margin-left: 120px; background-color: #ddd; } #navi { position: absolute; width: 80px; top:0px; left:0px; }

3.4

Navigationsmenü mit CSS
Wenn man mit CSS ein Navigationsmenü gestaltet dann sollte man von einem HTML-Code ausgehen der auch ohne CSS gut benutzbar bleibt ( „graceful degradation“). Der Ausgangspunkt für ein Navigationsmenü ist eine Liste mit Links:
<div class="navi"> <h3 class="unsichtbar">Seitenauswahl</h3> <ul> <li><a href="index.html">home</a></li> <li><a href="ort.html">ort</a></li> <li><a href="typografie/">typografie</a></li> <li><a href="bestellung/">bestellung</a></li> </ul> </div>

Ohne CSS wird die Liste ganz normal dargestellt. Mit CSS kann man daraus ein vertikales Menü machen, dazu wird mit list-style-type:none der Listenpunkt zu einem normalen Tag.

dazu muß nur ein float eingefügt und der margin anders gesetzt werden: div. } div. font-weight: bold. } 3.navi li { list-style-type:none. muss man wiederum alle Seiten editieren.navi li a:link { text-decoration: none. } 55 Mit Hilfe von Float kann man das Menü auch horizontal darstellen. Deswegen bietet es sich an bei dieser Geleg enheit von einfachem HTML auf PHP umzusteigen.2em.} div.navi li a:link { text-decoration: none.php erhalten. Dazu könnte man den Code in alle HTML-Dateien kopieren.1 Navigationsmenü wiederverwerten mit PHP Das Navigationsmenü sollte natürlich in allen Seiten der Site gleich vorhanden sein. PHP istg eine Programmiersprache am Webserver mit der wir uns im Sommersemester intensiv beschäftigen werden. margin-bottom:1px. width:6em.navi li { float:left. background:#6C6. Dazu müssen Alle HTML-Dateien die Endung . background:#6C6. } div. im Navigationsmenü sieht das dann so aus: . list-style-type:none. Wenn man dann eine neue Seite einfügen will.MMT Webprogrammierung 1 . margin-right:1px. color: black. padding: 0. font-weight: bold.unsichtbar {display:none.4.2em. padding: 0. color: black. width:6em.

der Link bleibt gleich.php. Abbildung 40: Original PHP-Datei am Server und Quelltext-Ansicht im Webbrowser Damit ist nun das Einfügen einer neuen Seite ganz einfach: nur die Datei navi.2 :hover und :focus Mit dem Selektor :hover wird eine CSS-Regel nur angewandt wenn die Maus über dem Tag ist. z.B.) .php muss editiert werden. Der Client erhält das vollständige HTML-Dokument inklusive Navigation.MMT Webprogrammierung 1 <div id="navi"> <h3 class="unsichtbar">Seitenauswahl</h3> <ul> <li><a href="index.4.php">ort</a></li> <li><a href="typografie/">typografie</a></li> <li><a href="bestellung/">bestellung</a></li> </ul> </div> 56 Links die auf Ordner verweisen sind hier besonders praktisch: Sie ersetzen die Datei index. 3.php" ?> <h1>News</h1> Achtung: Das Einfügen der inkuldierten Datei erfolgt auf dem Server.php">home</a></li> <li><a href="ort. navi. und merkt von der Inkludierung nichts. In den einzelnen Seiten wird das Menü dann mit include eingebunden: <body> <?php include "navi.php. Mit ANSICHT TENQUELLTEXT ANZEIGEN SEI- kann man den PHP-Code nicht sehen.html durch index. (:focus hat eine ähnliche Bedeutung bei der Steuerung mit der Tastatur. Das Navigationsmenü wird nun in einer separaten Datei gespeichert.

Falls viele kleine Icons verwendet werden. overflow:hidden.MMT Webprogrammierung 1 div { background-color: #ddd.png). } Beim Laden des zweiten Hintergrundbildes kann es dabei zu einer Verzögerung kommen. } div:hover { background-image: url(button-down. background-image: url(pix/rolloverButton. width:240px. } div:hover { background-color: red. } 57 Mit Hilfe von Hintergrundbildern kann man so zum Beispiel einen kitschigen 3d-Button darstellen.gif). der beim hovern „hineingedrückt“ wird. Um das zu verhindern kann man die beiden Hintergrundbilder in einer Bilddatei speichern und nur den Bildausschnitt wechseln: /* css */ div { height:115px. div { background-image: url(button-up. Abbildung 41: CSS Sprites von Yahoo . } div:hover { background-position: 0 -120px.png). } Eine extreme Anwendung dieses Prinzips nennt man CSS-Sprites: dabei werden möglichst viele Bilder in einer Bild-Datei zusammengefaßt. kann das die Darstellung der Webseite erheblich beschleunigen.

php?page=2">Michel Jackson immer noch tot</a></li> <li><a href="news.php?page=1">Michel Jackson tot</a></li> <li><a href="news. } 58 3.php">Home</a></li> <li><a href="news.yimg.icon{ background-position:5px -197px.icon{ padding-left:31px..MMT Webprogrammierung 1 So könnte der CSS Code aussehen7: . background-position:2px -497px.icon{ display:block. siehe Kapitel 2.4. Mit CSS soll ein Dropdown-Menü dargestellt werden (Prinzip „Graceful Degradation“. padding:8px 0 9px 40px. ohne und mit CSS 7 von http://www.php?page=4">Tot von Michael Jackson bestätigt</a></li> </ul> </li> . das ist aber in CSS nicht umsetzbar.. Für die wäre die verwendung eines „Klicks“ statt des „Hovers“ notwenidg.php?page=3">Ist Michael Jackson wirklich tot?</a></li> <li><a href="news.com/pa-icons2. } #music . Der HTML-Code besteht aus zwei ineinandergeschachtelten Listen: <ul id="navmenu"> <li><a href="home.3 Dropdown Menü mit Hover Das folgende Menü mit Subemenüs funktionert auf Touch-Geräten nicht.websiteoptimization.php">News</a> <ul> <li><a href="news.3 auf Seite 38) Abbildung 42: Menü mit Submenü. } #messenger . background:url(http://us.com/speed/tweak/css-sprites/ .gif) 5px 3px no-repeat.i1. </ul> Die Darstellung ohne CSS ist also eine einfache Liste.

falls es innerhalb eines li:hover ist. Mit dieser Vorstellung ergeben sich neue Fachwörter: Die Tags werden als Elemente bezeichnet. Mit der zusätzlichen Deklaration display:none werden die Unter-Menüs versteckt.. } 59 Die Unter-Menüs werden dann absolut positioniert (immer unterhalb Ihres eltern-Tags): ul#navmenu ul { position: absolute. top: 24px. <html> <body> <p>Navigation</p> <h1>Überschrift</h1> <div class="intro"> <h2>Dies und Das</h2> <ol> <li><a href="#bla">erster Link</a></li> <li><a href="#bla">zweiter Link</a></li> </ol> </div> .5 auf Seite 59) verwendet: ul wird selektiert. } Achtung: hier wird der descendant selector (siehe Kapitel 3. So ist in folgendem Beispiel das erste li-Element innerhalb des ol-Elements. left: -2px. Nachkommen. Für die Beziehungen zwischen Nodes werden die Begriffe Eltern.. 3.5 CSS Selektoren Das Document Object Model (DOM) ist ein allgemeines Modell wie ein Dokument (die Webseite oder auch ein XML. Das li Element enthält wiederum ein a Element. Kind.Dokument) als Baum (im mathematische Sinne) angesehen werden kann. Elemente und Tags undwerden als Nodes oder Knoten bezeichnet. das innerhalb eines ul#navmenu ist. Wenn die Maus über einen HauptMenüpunkt bewegt wird soll das entsprechende Untermenü sichtbar werden: ul#navmenu li:hover ul { display: block. . und dieses einen Text „erster Link“. /* display: none */ } Damit sind die Unter-Menüs richtig positioniert und alle gleichzeitig sichtbar.MMT Webprogrammierung 1 Die wichtigen neuen Bestandteile dieses Menüs: Jeder li-Tag im Hauptmenü definiert ein neues Koordinatensystem ul#navmenu > li { position: relative. z-index: 1000.

dessen CLASS gleich „mwarning“ ist. oder deren Ziel bereits besucht wurde (:visited). bei dem der Wert des Attributs mit dem geforderten String beginnt. F. sowie jedem G-Element überein. nicht in XML) Stimmt mit jedem E-Element überein.2 haben Sie CSS Selektoren für Klassen und IDs kennen gelernt. dessen ID gleich „myid“ ist. also z. 60 In Kapitel 2.at/index.warning E#myid Mit CSS3 kommen u. dem unmittelbar ein Element E vorausgeht. In der CSS 2. E.html#q1. Stimmt während bestimmter Benutzeraktionen überein. . „Überschrift“ ist das erste Kind von h1.1 Spezifikation werden u.MMT Webprogrammierung 1 Vorfahren verwedent: h1 ist ein Kind von body. Stimmt mit Links überein. <E>bla <div> <F>hier</F> </div> </E>.w3.2.a.edition-w3c. Damit haben wir das Vokabular um auch kompliziertere CSS-Selektoren zu verstehen.B.B. „Überschrift“ ist damit ein Nachkomme von body. dessen ID mit dem Anker in der URL übereinstimmt. sowie jedem F-. folgende Schreibweisen für Selektoren beschrieben8: Name Muster Beschreibung Stimmt mit jedem Element überein. Stimmt mit jedem F-Element überein. Stimmt mit allen F-Elementen überein. also <E>dies</E> <F>das</F> (Nur in HTML. Beschreibung zitiert nach der Übersetzung http://www. also z.html. Stimmt mit jedem E-Element überein Stimmt mit jedem E-.de/TR/1998/REC-CSS2-19980512/kap05.a. die Kindelemente eines Elements E sind. Universal selec* tor Type selectors Grouping Descendant selectors Child selectors E E. das ein Nachfahre eines EElements ist.org/TR/CSS2/selector. <E>bla <span>bla</span> <F>hier</F> </E>. Stimmt mit jedem E-Element überein. deren Ziel noch nicht besucht wurde (:link). folgende Selektoren dazu: Name Muster / Beispiel Beschreibung Stimmt mit jedem Element überein.B. G E F E > F The link pseudo. Z. F und G könnten auch komplexere Selektoren sein! Stimmt mit jedem F-Element überein. Stimmt mit dem Element überein. bei URL http://at.:link :visited classes The dynamic :hover pseudo-classes :focus :active Adjacent selecE + F tors Class selectors ID selectors E.html#kontakt stimmt :target mit <div id="kontakt"> überein Attribute Selector: E[attr^="string"] a[href^="mailto:"] Begins with The Target pseudo-class :target 8 Gekürzt! Originaltext siehe auch http://www.

Zählt die Elemente dieses Typs. …. Im Beispiel also die geraden / ungeraden Bilder.MMT Webprogrammierung 1 The UI element states pseudoclasses 61 :enabled :disabled :checked Diese Selektoren beziehen sich auf mögliche Zustände von Eingabefeldern – die werden aber erst im nächsten Kapitel erklärt. stimmt mit dem Element überein wenn die Zahl bestimmte Bedingungen erfüllt: erstes Geschwister.. immer <html> Zählt die Geschwister des Elements. was nicht explizit drinnen ist: Obwohl im Abstz der erste Buchstabe nicht extra in einen Tag eingeschlossen ist kann man ihn mit p::first-letter auswählen. Root pseudo-class :root :first-child :nth-child(13) :nth-child(odd) :nth-child(even) :nth-child(3n+1) :last-child img:nth-of-type(odd) { float: right. } :empty :nth-child() pseudo-class :nth-of-type() pseudo-class Empty pseudoclass E::first-letter E::first-line Pseudo-Element p::first-letter . Stimmt mit der Wurzel des DOM überein. Element ist ganz leer – enthält weder Kinder-Knoten noch Text. gerade Zahl. Achtung: mit diesem Pseudo-Element kann man etwas aus HTML herausholen. } img:nth-of-type(even) { float: left. ungerade Zahl. 13. n)… letztes. …. die bis zu dieser Stelle in der DOM vorkamen.(auch Moduleo 3. 4.

at/2008/09/22/weg. etc.at/pix/weg-zur-saline.at/pix/weg-zur-saline.jpg = http://mediacube.at/pix/weg. auch die Pfadangaben von DOS/Windows und von CD-ROMs funktionieren ähnlich. (Die „absolute“ und „relative“ Schreibweise wurde von den Pfadangaben im UNIX-Dateisystem übernommen.html + /pix/weg-zur-saline. externe Javascript-Dateien.6.at/pix/weg-zur-saline.html + /pix/weg-zur-saline. 3. in der Datei http://mediacube.jpg und http://mediacube.at/pix/weg. http://mediacube.at/2008/09/22/weg.3.6 URLs In Kapitel 1. Nun geht es um die Handhabung von URLs innerhalb von HTML und CSS.jpg Mit einer anderen Ausgangs-URL ist das Ergebnis natürlich anders: http://multimediatechnology.2 wurden URLs und Ihre Bestandteile kurz vorgestellt.jpg = http://mediacube.at/2008/09/22/weg-zur-saline.jpg = http://multimediatechnology.) Nehmen wir an.jpg /pix/weg-zur-saline.at/pix/weg-zur-saline. beim Verweis auf externe Stylesheets.MMT Webprogrammierung 1 62 3.jpg = http://multimediatechnology.at/pix/weg.html + weg-zur-saline.jpg und: http://multimediatechnology.html + weg-zur-saline.html seien folgende drei URLs enthalten: absolut beginnt mit Protokoll relativ zum Webserver beginnt mit / relativ zur Datei http://mediacube. An all diesen Stellen können Sie URLs in den hier beschriebenen Schreibweisen verwenden.1 Absolute und relative URLs URLs werden in CSS und HTML an vielen Stellen verwendet: bei Links und Bilder.jpg weg-zur-saline.jpg Bei den relativen URLs muss man die URL des enthaltenden Dokuments und die relative URLs zusammen—addieren. um zu einer absoluten URL zu kommen.jpg .

/mmt-auf-facebook.html = 63 http://multimediatechnology.html Zwei Punkte als Ordnernamen bedeuten dabei: „raus aus dem aktuellen Ordner“: http://multimediatechnology.at/2008/07/31/mmt-auf-facebook. und sind völlig unabhängig davon. 17 verweisen. 3./.at/2008/04/17/rattenscharfes-computergame.html + .at/2008/04/17/rattenscharfs-computergame.html Mit dieser Schreibweise kann man auch Unsinn machen: http://multimediatechnology. Betriebssystem des Webservers Die Webserver der FH sind ausnahmslos UNIX-Server.JPG funktioniert unter Windows oder MacOS auch. sind also „case-sensitive“.. auf jeden Fall im nächsten Semester in „Webprogrammierung 2“. Liegt die Datei aber dann am (UNIX-)Webserver.. dort sind die Dateisysteme „case-insensitive“./04/17/rattenscharfes-computergame. Ein Link auf die Datei bild. werden aber anders konfiguriert.2 Konfiguration des Webservers und URLs Die Konfiguration des Webservers wird hier am Beispiel von Apache gezeigt.at/showcase-2008. sondern eine Datenbanksuche nach „2008-04-17“ nach sich ziehen – das ist Sache des Servers.und Ordnernamen zwischen Groß.html = http://multimediatechnology.B die letzten URL „in Wirklichkeit“ gar nicht auf Ordner mit Namen 2008.html + 2008/07/31/mmt-auf-facebook.MMT Webprogrammierung 1 Relativen URLs können selbst wieder Ordnernamen enthalten: http://multimediatechnology. so funktioniert der Link nicht mehr! bild.at/2008/04/17/rattenscharfes-computergame.jpg geschreiben wird./05/. So könnte z.. sie ist hier nur zur Information angeführt. Die UNIX-Dateisysteme unterscheiden bei Datei.JPG sind zwei unterschiedliche Dateien! .. Andere Webserver (z.at/2008/07/31/mmt-auf-facebook.und Kleinschreibung. wenn er bild. wie der Webserver die URL interpretiert.html All diese Berechnungen finden im Webbrowser statt. Der Rechner auf dem Sie die Webseiten erstellen läuft wahrscheinlich unter Windows oder MacOS. Die Apache-Konfiguration müssen Sie noch nicht anwenden können.6. 04.jpg und bild.html + .B: Internet Information Server von Microsoft) verfügen auch über diese Fähigkeiten../. Eventuell können Sie im Fach „Operations & IT“ diese Information in diesem Semester anwenden.html = http://multimediatechnology.

html.at/index.at/ </VirtualHost> Standard-Dokument Endet eine URL auf einen Schrägstrich.html existiert. wenn eine URL auf einen Ordner verweist.htm verwendet! Was passiert wenn keine Datei mit dem richtigen Namen vorhanden ist? Die zwei Möglichkeiten sehen Sie in Abbildung 43: entweder eine Auflistung der Dateien im Ordner oder eine Fehlermeldung. Auf allen Webservern der FH ist dies die Datei index. der als Ausgangspunkt für den Webspace dient.at/pix/weg-zur-saline.at> DocumentRoot /var/www/virthosts/mediacube.at/ URL Dateisystem http://mediacube. und in diesem Ordner eine Datei mit Namen index. Für den Webserver mediacube. dann wird diese Datei geliefert.at/pix/index.jpg Die Apache-Konfiguration dazu sieht so aus: <VirtualHost mediacube.h. nicht auf eine spezielle Datei.html Achtung: die Konfiguration ist am Internet Information Server normalerweise anders. dort wir die Datei default.html http://mediacube. URL Dateisystem URL Dateisystem http://mediacube.at/ /var/www/virthosts/mediacube. d.MMT Webprogrammierung 1 64 Webspace und Ordner Im einfachsten Fall wird im Webserver ein Ordner spezifiziert. Für diesen Fall kann im Webserver ein Standard-Dokument definiert werden. dann verweist sie eigentlich auf einen ganzen Ordner.at/pix/ /var/www/virthosts/mediacube.jpg /var/www/virthosts/mediacube.html Die Apache-Konfigurationsanweisung dazu lautet DirectoryIndex index.at/pix/weg-zur-saline.at ist dies der Ordner /var/www/virthosts/mediacube. .

Z.users.fh-salzburg.at/~fhs111111/test + .at/~fhs303030/test.html /home/store/fhs303030/htdocs/test. könnte eine Studentin den Username fhs303030 habe und das Home-Verzeichnis /home/store/fhs303030/.ac.fh-salzburg.B..users.fh-salzburg.ac. Ihr Webspace ist im Unter-Ordner htdocs: URL Dateisystem URL Dateisystem http://www.html Beachten Sie: für das Formulieren von relativen URLs sind nur die URLs relevant.fh-salzburg.fh-salzburg. Dieser Webspace befindet sich innerhalb des Home-Verzeichnisses des jeweiligen Accounts.ac.ac.html http://www. nicht die Position der Dokumente im Dateisystem! Der Ordnername htdocs wird also nie in einer URL vorkommen.html): Auflistung oder Fehlermeldung Die entsprechenden Apache-Konfigurationsanweisung dazu sind: Options +Indexes Options -Indexes Automatischer Webspace für Alle Am Webserver www. Der Link von einem User-Webspace zum nächsten funktioniert also so: http://www.html http://www.users.at/~fhs303030/test.MMT Webprogrammierung 1 65 Abbildung 43: Zugriff auf einen Ordner ohne Standard-Dokument (index.users.at/~fhs111111/test + /~fhs111111/test = Die Apache Konfigurationsanweisung lautet: UserDir htdocs .ac.at/~fhs303030/test.ac.fh-salzburg.html /home/store/fhs111111/htdocs/test.html http://www.users.users.users existiert für jeden Account automatisch ein Webspace.at/~fhs111111/test./~fhs111111/test = Oder relative zum Webserver: http://www.

MMT Webprogrammierung 1

66

3.6.3

Pragmatische Tipps zu Dateienamen und URLs
Groß- und Kleinschreibung
Hintergrund: Webserver läuft auf UNIX, dort sind Dateinamen case-sensitive. Tipp: ich schreibe alle Ordner- und Dateinamen sowie alle URLs immer durchgängig klein.

Leerzeichen
Hintergrund: Leerzeichen in URLs müssen als %20 geschrieben werden. Tipp: ich verwende keine Leerzeichen in Ordner- und Dateinamen meiner Web-Projekte.

Umlaute
Hintergrund: URLs sind global sichtbar. Eine URL, die ich erschaffe, muss vielleicht einmal auf einer Tastatur eingetippt werden, die keine deutschen Umlaute hat. Tipp: ich vermeide Umlaute in Ordner- und Dateinamen meiner Web-Projekte und beschränke mich auf den englischen Zeichensatz.

Ordnerstruktur
Hintergrund: Nicht nur der Code meiner Webseiten ist für das Funktionieren der Seiten wichtig, sondern auch die Dateinamen und Ordnernamen, bzw. die Ordnerstruktur. Liegt eine Datei im falschen Ordner wird sie nicht mehr gefunden. Tipp: ich überlege mir die Ordnerstruktur meines Webspaces sorgfältig. Wenn ich auf mehreren Rechnern entwickle, dann baue ich auf jedem dieser Rechner die Ordnerstruktur wieder auf. Ich nutze Dreamweaver für den Upload und Download, weil er die Ordnerstruktur „mitdenkt“.

MMT Webprogrammierung 1

67

4.

Formulare, erstes Javascript
Was Sie wissen sollten
• • Wie Web-Formulare mit URLs zusammen hängen Welche HTML-Tags ein Formular und seine Eingabeelemente definieren

Was Sie können sollten
• • Ein Web-Formular erstellen Ein alternatives Web-Formular für ein bestehendes Formular / Programm definieren

Weitere Informationsquellen
• • • Formulare. In: Selfhtml. http://de.selfhtml.org/html/formulare/ HTML Forms and Input. In: W3 Schools. http://www.w3schools.com/html/html_forms.asp Newhouse(2001): Practical CSS Layout Tips, Tricks, & Techniques. In: A List Apart. http://www.alistapart.com/stories/practicalcss/

Vertiefungsmöglichkeiten
• Ein alternatives Web-Formular für ein bestehendes Formular / Programm definieren

4.2

Formulare
Mit Ihren bisherigen Kenntnissen können Sie schon Webseiten mit einfachen InteraktionsMöglichkeiten gestalten: mit Links ermöglichen Sie der LeserIn die Navigation durch das Web. Formulare ermöglichen mehr Interaktion – aber immer noch in einem sehr strengen, sehr strukturierten Rahmen. Abbildung 44 zeigt zwei typische Anwendungsgebiete für Web-Formulare: das Eingabeformular der Suchmaschine Google und ein Bestellformular.

MMT Webprogrammierung 1

68

Abbildung 44 Formulare in Webseiten

Mit den HTML-Tags <form>, <input />, <textarea>, <option>, <select> werden Formulare aufgebaut. Hier ein einfaches Beispiel:

Der <form>-Tag ist „unsichtbar“ und dient nur dazu, die anderen Eingabefelder zu bündeln. Im
action-Attribut des <form>-tag wird angegeben, an welche URL die Daten zur Verarbeitung geschickt

werden. Im Browser sieht das oben gezeigte Formular so aus:

Abbildung 45: Darstellung eines Web-Formulars im Browser

4.2.1

Eingabefelder
Innerhalb des <form>-Tag bauen Sie das Formular aus verschiedenen Eingabeelementen und den „normalen“ HTML-Tags auf. Tabelle 2 zeigt die verschiedenen Arten von Text-Eingabefeldern.

die in Tabelle 4 gezeigt werden.MMT Webprogrammierung 1 Textfeld: <input type="text" name="meintextfeld" value="text eingeben"> <input type="password" name="meinpasswort"> <textarea name="zitat"> In a hole in the ground there lived a Hobbit.Auswahl <select name="size3"> <option>---Bitte Auswählen---</option> <option>XL</option> <option>L</option> <option>M</option> <option>S</option> </select> Liste <select name="html" size="4" multiple="multiple"> <option>im Code</option> <option>Dreamweaver</option> <option>GoLive</option> <option>Frontpage</option> </select> Tabelle 4: Eingabeelemente für Fragen mit mehreren Antworten . </textarea> Tabelle 2: Text-Eingabefelder 69 Passwort-Feld: mehrzeiliges Textfeld Für einzelne Fragen die mit Ja oder Nein zu beantworten sind wird das Eingabe-Element „checkbox“ verwendet. bei denen eine von mehreren vorgegebenen Antworten möglich sein soll gibt es verschiedene Eingabeelemente. siehe Tabelle 3. Radiobuttons <input <input <input <input type="radio" type="radio" type="radio" type="radio" name="size" name="size" name="size" name="size" value="XL"> XL value="L"> L value="M"> M value="S" checked> S Menü <select name="size2"> <option>XL</option> <option selected>L</option> <option>M</option> <option>S</option> </select> Menü mit „leer“. <input type="checkbox" name="rauch"> Raucher Tabelle 3: Checkbox für Ja-/Nein-Fragen Für Fragen.

der Wert ist unter- 70 unterschiedlich (im Code: Attribut name ist gleich. Warum? Denken Sie an Ihre eigene Erfahrung mit Web-Formularen zurück: Wie oft haben Sie auf einen Zurücksetzen Button gedrückt und dann gedacht „super. kann man in diesem Feld auf ENTER drücken um das Formular zu senden. Jedes Formular braucht einen Absende-Button wie in Tabelle 5 gezeigt. jetzt muss ich alles noch mal tippen. Wenn das Formular ein Bild-feld enthält (siehe unten) veranlasst ein Klick auf das Bild das Einsenden. die zu einer Frage gehören.ck mich!"> Tabelle 5: Eingabefelder Absenden und Zurücksetzen Neben dem Absende-Button gibt es noch andere Methoden wie ein Formular „abgesendet“ werden kann: Falls das Formular nur ein einziges Text-Eingabefeld hat. für Javascript-Programme <input type="button" value="Extrafenster" onclick=".students"> Button ohne Auftrag."> Bildfeld. Absende-Button <input type="submit" value="dr&uuml..“ Tabelle 6 zeigt noch mehr Eingabefelder.gif"> Visuelle Zusammenfassung mehrer Felder: fieldset + legend <fieldset> <legend>Kreditkarte</legend> <input name="nr" /><br> <input type="radio" name="kk" value="Master" /> Master <input type="radio" name="kk" . Für alle Eingabefelder gibt: falls auch "keine Antwort" möglich sein soll müssen Sie dafür eine eigene Option einbauen. value unterschiedlich). und wie oft haben Sie auf einen Zurücksetzen Button gedrückt und dann gedacht „Mist.MMT Webprogrammierung 1 Radiobuttons. Zurücksetzen? Nein Danke! Zurücksetzen-Button <input type="reset" value="Zur&uuml. müssen den selben Namen tragen. Nur bei einer Liste besteht die Möglichkeit mehrere Antworten auszuwählen. das war ja gar nicht der Einsende-Button. genau das wollte ich“.cksetzen"> Den Zurücksetzen Button sollten Sie nur sehr selten einsetzen.. <input type="image" name="position" src="austria. liefert angeklickte x+y Koordinaten. die eher selten gebraucht werden. Unsichtbares = Verstecktes Feld <input type="hidden" name="webseite" value="www. alles gelöscht.

Durch das Einfügen einer „Leer“-Option in die Menüs wird diese Einschränkung aufgehoben. Radiobuttons.2. 4. Version 1: Ein Menü ermöglicht die Auswahl aus vorgegebenen Elementen. Es ist aber nicht möglich ein Einzel. Wählen Sie ein Bild aus: <input type="file" name="bilddatei"> Tabelle 6: selten verwendete Eingabefelder Aus diesen Eingabeelementen ist jedes Web-Formular aufgebaut. funktioniert nur wenn die Formular-Daten mit Methode POST und speziellem enctype an den Webserver geschickt werden. Im Folgenden sehen Sie eine Reihe von Entwürfen eines Reservierungs-Formulars für ein Hotel. Mit diesem Formular kann man nur ein. Wenn Sie beim Entwurf des Formulars eine Möglichkeit vergessen.2 Interaktionsmöglichkeiten Bei der Verwendung von Checkboxen. Die „Mindestbestellmenge“ für jede Sorte ist jeweils eine Kiste. Eine besonders häufige Auslassung zeigt Tabelle 7. siehe Kapitel Fehler! Verweisquelle konnte nicht gefunden werden. welche Möglichkeiten die LeserIn hat. . Tabelle 7: Entwürfe für ein Getränke-Bestell-Formular Der linke Entwurf in Tabelle 7 läßt keine Bestellung nur einer Sorte Bier zu. sondern im Entwurf der Interaktionsmöglichkeiten.MMT Webprogrammierung 1 value="Visa" /> Visa <br> </fieldset> 71 Datei-Upload.plus ein Doppel-Zimmer zu reservieren. Version 2: Ein Text-Eingabefeld ermöglicht hier die Eingabe der Anzahl der Zimmer. Deswegen ist hier besondere Sorgfalt geboten. Menüs und Listen geben Sie genau vor. nicht aber zwei oder mehr Zimmer reservieren. Die Problematik der Formulare liegt nicht in der Kenntnis der Eingabefelder. kann die LeserIn nichts mehr daran ändern. auf Seite 6.

72 Version 4: Durch ein zusätzliches Textfeld können alle weiteren Probleme abgefangen werden Abbildung 46 Entwürfe für ein Zimmer-Reservierungs-Formular Achtung: wenn Sie zu viele Eingabemöglichkeiten bieten entsteht Redundanz . bleibt als Alternative. 1 Stück 4-Käse. Abbildung 47: Redundanz im Formular In Abbildung 47 im linken Formular wird die Anzahl der bestellten Pizzas auf zwei Arten festgelegt: durch eine Checkbox und eine Text-Eingabe. Im rechten Formular wird diese Redundanz vermieden.3. Null Stück Margaritha bzw. 4. Aber es ist auch möglich eine in sich Widersprüchliche Bestellung abzugeben: Ja.php"> 4. In der obersten Zeile stimmen diese beiden Eingabefelder in Ihrer Aussage überein: Ja.1 Daten an E-Mail senden Wenn Sie kein Möglichkeit haben. Neine.MMT Webprogrammierung 1 Version 3: Diese Version ermöglicht die Reservierung von beliebigen vielen Zimmern in allen Kombinationen. die Daten direkt per E-Mail zu senden. Diese action wird direkt im <form>-Tag angegeben.dann können Sie die Bedeutung der Eingabe nicht mehr eindeutig erkennen. am Webserver zu programmieren. So sieht der entsprechende HTML-Code des Formulars aus: . wenn Sie ein Formular ausfüllen und auf den Absende-Button drücken? Meist werden Sie an den Webserver zur weiteren Verarbeitung geschickt.3 Daten absenden Was passiert. 1 Stück Carbonara. <form action="http://multimediatechnology.at/~fhs666/pizza/bestellung.

Abbildung 48: Formular per E-Mail oder über den Webserver senden 4. Das ist auf vielen Computern am Internet nicht der Fall. In Abbildung 49 sehen Sie ein (leicht vereinfachtes) Bestellformular für Flugzeuge das die Methode GET verwendet. baut der Browser aus der action und den Namen und Werten der einzelnen Eingabefelder eine URL zusammen. Dabei gibt es zwei Methoden: GET und POST.3. .MMT Webprogrammierung 1 <form action="mailto:ich@priv.2 Daten senden mit Methode GET Wird im Form-Tag als Action eine URL mit http angegeben dann werden die Daten an den Webserver gesendet. die dann aufgerufen wird wie in Abbildung 50 gezeigt. Das E-Mail Programm muß richtig konfiguriert sein. sondern auch das E-Mail Programm. oft werden die Daten also nicht erfolgreich versandt sondern gehen verloren. GET ist die einfachere. Abbildung 49: Formular mit Methode GET Wenn die UserIn auf „Bestellung absenden“ drückt.at" method="POST" enctype="text/plain"> 73 Achtung: diese Art die Daten zu senden ist sehr fehleranfällig: hierfür muß am Client-Computer nicht nur der Browser funktionieren.

bei allen anderen Zeichen wird ein % gefolgt von der Hexadezimaldarstellung des ASCII-Code gesetzt (siehe rfc 2396). ? (einem Fragezeichen ) 3. um eine GET-Anfrage zu erzeugen.3.com/search?q=Schokolade Sie können diese URL einfach direkt in den Browser eintippen. Zeilenumbrüche. ohne das Eingabeformular von Google zu verwenden. Sie können diese URL in den Lesezeichen/Favoriten Ihres Browsers speichern oder in einem Link verwenden: . Eingegebener / angeklickter Wert Falls dabei Sonderzeichen vorkommen (z. Wenn Sie z.Eingabe Die URL wird zusammengestellt aus: 1. getrennt durch & (kaufmännisches Und): a. = (Gleich Zeichen) c. für alle Eingabefelder. der Action (aus dem form-Tag) 2. 4.php?anzahl=4&adresse=Jakob+Haringer+Str.MMT Webprogrammierung 1 74 Abbildung 50: URL einer GET-Anfrage Die komplette URL lautet im Beispiel: http://localhost/php/test.1%0D%0A5020+Salzburg action 1. dass die Anfrage mit dem Suchwort „Schokolade“ so aussieht: http://www.google. kaufmännisches Und) werden diese wie folgt encodiert: Statt Leerzeichen wird ein + oder %20 gesetzt. Fragezeichen.3 URL als Programm-Schnittstelle Das Webformular ist nicht notwendig. Umlaute. Diese Codierung nennt man URL-Encoding. Leerzeichen.Eingabe 2.B.B. Name des Eingabefeldes b. das EingabeFormular von Google analysieren werden Sie herausfinden.

B.4 Formular und PHP Die Daten aus einem Web-Formular werden vom PHP-Interpreter verarbeitet.000. durch die Suchfelder. dass die UserInnen nicht nur die Web-Formulare verwenden. sondern auch URLs konstruieren und aufrufen. wird der Airbus recht günstig (für die KundIn) verkauft. Um die Bestellung aus dem Formular in Abbildung 49 (Seite 73) zu verarbeiten.000 DM <input type="hidden" name="preis" value="1000000"> <input type="submit" value="Bestellung absenden"> </form> Das gibt der KundIn die Chance ein „Gegenangebot“ zu senden (als „pricing attack“ bekannt): http://happyshop. Merke: Alle Eingaben die eine Web-Applikation erhält sind mit extremer Skepsis zu betrachten! 4.com/order. die URL-Codierung aufgelöst und die Daten dann in mehreren superglobalen Arrays zur Verfügung gestellt: $_GET Dieses Array enthält die Parameter einer GET-Anfrage.php einfach den Preis aus der URL übernimmt und auf die Rechnung schreibt.google.1&preis=10 Wenn nun das Programm order. die in den Browsern eingebaut sind: Abbildung 51: Suchfeld von Firefox Wenn Sie eine Web-Applikation erstellen müssen Sie auch darauf gefasst sein.php?anzahl=4&adresse=Urstein+Süd+. die den Preis der Waren als verstecktes Eingabefeld im Formular speicherten: Airbus Bestell-Formular <form action="order.MMT Webprogrammierung 1 <a href="http://www. könnte folgendes Programm verwendet werden: .com/search?q=schokolade">Suche nach Schokolade</a> 75 Gerade bei Suchmaschinen wird diese Möglichkeit oft genutzt: z. Die URL (und nicht das Formular) ist also eine öffentliche Schnittstelle zu Ihrem Programm! Ein lehrreiches Beispiel aus der Frühzeit des Web: es gab einst Webshops.php" method="GET"> Anzahl: <input name="anzahl"> <br> Adresse: <textarea name="adresse"></textarea><br> Preis: 1.

echo("<p>Ihre Bestellung über $anzahl Flugzeuge ist eingelangt</p>").MMT Webprogrammierung 1 <?php $anzahl = $_GET['anzahl']. $adresse = $_GET['adresse'].at". nur mit Firebug könnte man die Variablen auslesen wie in Abbildung 52 gezeigt. a = r * r * pi. pi = 3. // To: "Bestellung von $anzahl Flugzeugen". // Subject: "Lieferung von $anzahl Flugzeugen an Adresse $adresse" ). In dieser minimalen Version des Bestellprogramms senden wir die Daten einfach vom Server per E-Mail weiter: mail( "ich@fh-salzburg.141. </script> Ohne Output merkt man aber gar nichts davon.ac. <h1>Hallo Welt</h1> <script> var pi. 4.r. Die Details von Javascript werden in den nächsten Kaptieln. hier geht es nur um ein erstes Kennenlernen. ?> 76 Dabei wird aber die Eingabe noch gar nicht geprüft.5 Formular und Javascript Am Beispiel eines Formular werden wir nun einfaches Javascript kennen lernen. 4.1 Javascript Einbetten Javascript kann innerhalb des <script>-Tags irgendwo in den HTML-Code eingefügt werden.5. // Text der E-Mail Im Sommersemester lernen Sie mehr über PHP. echo("<p>Die Flugzeuge werden binnen 1 Monat an $adresse geliefert</p>"). Abbildung 52: Mit firebug den Wert einzelnen Javascript-Variablen auslesen . r = 2.a.

Die letzten beiden Zeilen in der Konsole zeigen. aber Sie können mit Javascript nicht wirklich Dateien löschen. dass es auch umgekehrt funktioniert: man kann auch Werte ins Eingabefeld hineinschreiben. document. Keine Angabe löscht alles").test. .2 Popup-Fenster Mit den Befehlen alert. wenn man noch den Namen eines Eingabefeldes anfügt kann man das Eingabefeld innerhalb des Formulares ansprechen (z.value. der neue Werte wird sofort im Browser angezeigt. document.write() kann Text/Code in den HTML-Code eingefügt werden. 4. 4.write Mit dem Befehl document. </script> Achtung: So können Sie zwar bei gutgläubigen Menschen Herzinfarkte auslösen.4 document.MMT Webprogrammierung 1 77 4.in).in.5.test.B. hier z.5. confirm und prompt können Sie kleine Popup-Fenster öffnen: <script type="text/javascript"> alert("peng.3 Formulare Mit der Konsole von Firebug können Sie auch Formulare genauer untersuchen: <form name="test"> <input value="0" size="10" name="in" > <input value="0" size="10" name="out"> </form> Abbildung 53: Mit Firebug Formulare und Eingabefelder auslesen Mit document.5.B. du bist tot!"). Jedes eingabefeld bietet mit value den aktuell eingegeben Wert (als String) an. var antwort = prompt("welche Daten sollen gelöscht werden. var ja_nein = confirm("sollen die daten nicht gelöscht werden?").test kann man also das gesamte Formular (mit dem Namen „test“ ) ansprechen.

write("<p>Hallo Javscript</p>"). while(i <= 50) { document. <form> <select name="Anzahl" id="Anzahl"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> </select> <input type="submit"> </form> Ich ersetze also die option-Tags durch eine Schleife in Javascript: <form> <select name="Anzahl" id="Anzahl"> <script language="javascript"> var i=0. </script> <p>Hallo HTML</p> 78 Der Browser interpretiert das Javascript und fügt das Ergebnis zu einem HTML-Dokument zusammen.MMT Webprogrammierung 1 <h1>Hallo Welt</h1> <script> document. } </script> </select> <input type="submit"> </form> Mit Ansicht -> Quelltext sieht man den Javascript-Code.write("<option>" + i + "</option>"). In Firebug sieht man das Ergebnis: . es wird nie abgespeichert! Mit Firebug kann man es aber sehen: <h1>Hallo Welt</h1> <p>Hallo Javscript</p> <p>Hallo HTML</p> Ein sinnvolles Anwendungsbeispiel dieses Befehls: Ich will ein Dropdown-Menü mit vielen Einträen. bin aber zu faul um alle <option>-Tags einzutippen. Achtung: Dieses resultierende HTML-Dokument existiert nur im Haupt-Speicher des einen Computers auf dem der Browser gerade läuft. i++.

MMT Webprogrammierung 1 79 4. Für grafische Benutzerschnittstellen hat sich ein besonderer Programmierstil entwickelt: die ereignisgesteuerte Programmierung. die die BenutzerIn setzt bestimmte Programmteile aus. in Visual Basic. Abbildung 54: Bestellformular für Bücher mit Berechnung Wenn in ein Anzahl-Feld ein neuer Wert eingegeben wird soll dieser mit dem Preis multipliziert werden und in das entsprechende Feld geschrieben werden. Betrachten wir zuerst diesen Schritt alleine an einem vereinfachten Formular mit einem Eingabe.“ gibt es ein passendes Event in HTML/Javascript: onchange. zum Einsatz.5 Ereignisse und Ereignisgesteuerte Programmierung Javascript ist eine Programmiersprache für die Gestaltung von Benutzerschnittstellen..w.und einem Ausgabe-Feld: <form name="test"> <input value="0" size="10" name="in"> <input value="0" size="10" name="out"> </form> Für die Formulierung „Wenn in das Feld in ein neuer Wert eingegeben wird. u.5.s. Die wird als Attribut in den HTML-Code des Eingabefeldes geschrieben: . Dieser Stil kommt auch in Actionscript (in Flash).: • • • • Klicken auf einen Link Eintippen in ein Textfeld Anklicken einer Checkbox Absenden eines Formulares Ein Beispiel für ereignisgesteuerte Programmierung mit einem Web-Formular: Das Bestellformular für Bücher in Abbildung 54 soll automatisch den Gesamtpreis berechnen.. dann. Im Webbrowser sind solche Ereignisse z. Dabei lösen Ereignis.B.

aber nicht deklariert.test.test.value + document. In Javascript werden die Datentypen int.value + document.htm .out5.selfhtml.value = document.in.out3. Z. // schreibt das Ergebnis ins Feld „gesamtout“ { document. Das Programm enthält noch einen – ganz typischen – Javascript-Bug. char.out1.test.out4.test.test. Es kann in einer Variable einmal ein String und einmal eine Zahl gespeichert sein: 9 http://de."> <input value="0" size="10" name="out"> </form> Nun wäre es natürlich unpraktisch in das onchange-Attribut ein längeres Javascript-Programm zu schreiben. die dann nur noch aufgerufen werden. zwar unterschieden.gesamtout. on-Attributen für HTML-Tags finden Sie z.value.org/javascript/sprache/eventhandler.out6.value + document. float.test.B: in selfhtml9. Dafür kann man in Javascript Funktionen definieren. um die Gesamtsumme im Bestellformular zu berechnen ist eine Funktion praktisch: <head> <script language="javascript"> function gesamt() // Addiert die Preise der einzelnen Bücher zur einer Gesamtout.test.value + document.value + document.out2. In das Attribut kann nun Javascript-Code eingefügt werden der die richtige Berechnung vornimmt und das Ergebnis in das richtige Element schreibt: <form name="test"> <input value="0" size="10" name="in" onchange="document.out.test.test. } </script> </head> <body> Achtung: enthält noch einen Bug! Bei den einzelnen Berechnungen für die einzelnen Bücher wird jeweils zum Schluss gesamt() aufgerufen.MMT Webprogrammierung 1 <form name="test"> <input value="0" size="10" name="in" onchange="hier Javascript"> <input value="0" size="10" name="out"> </form> 80 Eine Liste von Events bzw.value * 100.value = document.B.

Abbildung 55: Falsche Berechnung in Javascript: Konkatenation statt Addition Bei der Multiplikation mit * tritt dieses Problem nicht auf. a = "zehn". da der Stern keine zweite Bedeutung hat.write(a + 20). 4. sondern führt nur eine Aneinanderfügung der Zahlen als Text durch wie in Abbildung 55 gezeigt: aus 100 + 200 + 0 + 0 + 0 + 0 wird 1002000000. document. document. document. . Mit der Funktion parseInt() können Sie einen String in eine Integer-Zahl verwandeln bevor Sie die Addition durchführen. 81 Hier der Output des Programms: wie viel ist 10 plus 20? 30 wie viel ist 10 plus 20? zehn20 wie viel ist 10 plus 20? 1020 Der + Operator verhält sich also je nach Datentype des ersten Arguments verschieden: steht links des Plus-Zeichens eine Zahl.c. und das Einsenden des Formulares verhindern falls dem nicht so ist. Deswegen berechnet die gesamtFunktion nie eine Summe. dann erfolgt eine Addition. a = 10.5.write(a + 20).6 Formular prüfen Mit Javascript kann man schon vor dem Absenden des Formulares prüfen ob wichtige Daten eingegeben wurden.b. document. Steht links des Plus-Zeichens ein String.write("<br />wie viel ist 10 plus 20? ").write("<br />wie viel ist 10 plus 20? "). a = "10". document. ein Aneinanderfügen von Text.MMT Webprogrammierung 1 var a.write("<br />wie viel ist 10 plus 20? "). Eingabefelder in Web-Formularen liefern immer einen String. dann erfolgt eine String-Konkatenation. document.write(a + 20).

pizzaformular.liefername.at/html/form/echo. ok = false. return wert. } if ( document.cgi" onsubmit = "wert=formularok().at/html/form/echo."> Empfänger: <input type="text" name="liefername" id="liefername" /> <br /> Adresse: <input type="text" name="adresse" id="adresse" /> in 5020 Salzburg<br /> Telefon/Handy: <input type="text" name="tel" id="tel" /> in 5020 Salzburg<br /> <input name="" type="submit" /> </form> .value == "" ) { fehler += "Sie müssen eine Lieferadresse angeben\n".cgi" onsubmit= "wert=formularok(). return wert. } // weitere Überprüfungen if ( ok ) { return true. fehler. fehler = "". ok = true.adresse.value == "" ) { fehler += "Sie müssen den Empfänger angeben\n".MMT Webprogrammierung 1 Dafür gibt es das Event „onsubmit“ im form-Tag. Entsprechend kann man eine Funktion schreiben: <script> function formularok() { var ok. } else { alert("Das Formular ist nicht ok:\n" return false. ok = false. <form name="pizzaformular" action="http://webwelt.horus. <form name = "pizzaformular" action = "http://webwelt. } } </script> </head> <body> + fehler )."> 82 Die Besonderheit dieses Events: wenn am Ende des Events ein falscher-Wert zurückgegeben wird verhindert der Browser das Senden der Formulardaten. if ( document.pizzaformular.horus.

aber trotzdem die einzige Chance ist. O'Reilly Media. ISBN 3897214911. FLANAGAN.Douglas (2008): JavaScript: The Good Parts.MMT Webprogrammierung 1 83 5. Schritt für Schritt zum Programmierprofi. • • CROCKFORD. .com/ • • MORRISON. Javascript und DOM Was Sie wissen sollten • Was der Unterschied zwischen Javascript und Java ist.. O'Reilly. Weitere Informationsquellen • Kapitel „Javascript Basics“ – Overview bis Functions in MURPHEY. ISBN 0596517742. O'Reilly.Ralph (2003): JavaScript in 21 Tagen . Was Sie können sollten • Mit den DOM-Befehlen alle Elemente in eine Webseite manipulieren. Welche Sprache für eine bestimmte Problemstellung passend ist. ISBN 0596527748. Rebecca(2010): jQuery Fundamentals. Webseiten interaktiver zu machen.David (2007): JavaScript: Das umfassende Referenzwerk. STEYER. Dass Javascript Kompatiblitätsprobleme hat.Michael (2008): Head First JavaScript (Head First). . • Dass Javascript eine Programmiersprache im Web-Browser ist. http://jqfundamentals.

Probleme werden erst zur Laufzeit erkannt Java Sun / Gosling Kompilierte Sprache Datentypen und Klassen werden streng unterschieden und zur Compilezeit geprüft Überall (Chipkarten. Mit Javascript können Webseiten auch „offline“ – also ohne Verbindung zum Internet und dem Webserver – im Browser weiterarbieten.2. in den letzten Projekte . im Handy) Alle. auch Großprojekte mit vielen Verwendung Im Webbrowser. Javascript wird in einigen Programmen als Makro-Sprache verwendet. z. den man mit Javascript programmieren kann. Die beiden zu verwechseln ist recht peinlich. Unter dem Namen Actionscript wird eine Variante von Javascript in Flash verwendet. in Illustrator und Indesign Früher nur winzige Projekte (z.B: Animatis-Effekt). Neben der Verwendung für kleine Effekte im Browser hat Javascript noch weitere wichtige Anwendungsgebiete: • • • • • • Als „AJAX“ zum Nachladen von Daten macht das Web viel interaktiver und angenehmer in der Benutzung. Javascript Wer hat’s erfunden? Netscape / Brendan Eich Interpretiert Sprache Typbindung Wenige Datentypen. für Spiele. seit 2003 in Indesign und Illustrator. Die No-SQL Datenbank CouchDB verwendet Javascript als Abfragesprache.2 Hintergründe Javascript ist eine Programmiersprache die in HTML eingebettet und vom Browser interpretiert wird. 5. Er wird besonders für realtime-applikationen im Web eingesetzt.B. am Webserver. am Server. Im Browser ist der Wirkungsbereich von Javascript auf das Fenster und das aktuelle Dokument beschränkt – es kann nicht die Festplatte löschen oder Excel starten.B.1 Javascript und Java Es gibt noch eine zweite Programmiersprache mit sehr ähnlichem Namen: Java. Die Verwechslung ist übrigens beabsichtigt: Im Jahr 1995 gab es einen großen Hype rund um Java. im Browser. in Flash. Netscape wollte davon profitieren und nannte die neue Skriptsprache im Browser „Javascript“. z. Der Server Node JS ist ein (Web)Server.MMT Webprogrammierung 1 84 5.

Seit 2005 wir unter dem Schlagwort AJAX Javascript eng mit der serverseitigen Webapplikation verzahnt: AJAX steht für asynchrones Nachladen von Teilen der Webseite über Javascript.2. und kann die Applikation auch benutzen wenn keine Internetverbindung (mehr) besteht. Mit dem ECMA-Standard 262 wurde die Syntax fixiert. Libraries wie Prototype oder jQuery ebenen die letzten Unterschide noch aus. Es war eines der Schlachtfelder im Browser-War: Microsoft und Netscape versuchten durch verschiedene Javascript-Implementierungen die Position des eigenen Browsers zu verbessern und Webseiten im gegnerischen Browser unbrauchbar zu machen. Seit ca. 2008 sind offline-fähige Javascript-Applikationen möglich: Der Browser speichert alle notwendigen Teil der Website permanent ab. Mit dem „Document Object Model“ (DOM) wurde der Zugriff auf die Webseite vereinheitlicht. Erst nachträglich gab es (partielle) Einigung auf Standards. und dann von verschiedenen Herstellern weiterentwickelt. Lange Zeit waren kleine Javascript-Programme eine relative unabhängige Ergänzung für WebApplikationen.MMT Webprogrammierung 1 Jahren: JS als wichtiger Teil einer Webappliaktion wie Facebook. Dies Applikationen haben z. Gmail. Ein Beispiel dafür wäre ein Javascript-Kalender der die Eingabe eines Datums in ein Eingabefeld erleichtert.2 Geschichte von Javascript Javascript wurde ursprünglich bei Netscape von Brendan Eich erfunden. Keine Internetverbindung Abbildung 56: Offline Applikation everytimezone.com . ProgrammiererInnen Auch Web-DesignerInnen Objektorientierung Objekte und Prototypen „Mannjahren“ 85 Nur InformatikerInnen Objekte und Klassen 5. etc.B: auf dem iPad eine große Bedeutung.

0.2.Dokument) von einer objektorientierten Skriptsprache aus manipuliert werden kann. B. Das DOM einer Webseite kann man sich als Baum vorstellen. B. Am 1. B. <html> <body> <p>Navigation</p> <h1>Überschrift</h1> <div class="intro"> <h2>Dies und Das</h2> <ol> <li><a href="#bla">erster Link</a></li> <li><a href="#bla">zweiter Link</a></li> </ol> </div> . der <li>-Tag enthält wiederum einen <a>-Tag.. Oktober 1998 wurde das DOM eine offizielle W3-Empfehlung (recommendation) in der Version 1. Sie kennen diese Idee schon von CSS und den CSS-Selektoren.MMT Webprogrammierung 1 86 5.. Mögliche Veränderungen wären: • Mache ein beliebiges Element des DOM unsichtbar (z. die ganze Liste) • Ändere den Style eines beliebigen Elements (z. In folgendem Beispiel ist der markierte <li>-Tag innerhalb des <ol>-Tags. drei zusätzliche Listenpunkte) 5. Wenn man mit Javascript irgendeinen Teil der Webseite verändern will verändert man diesen Baum.3 Document Object Model Das Document Object Model (DOM) ist ein allgemeines Modell wie ein Dokument (die Webseite oder auch ein XML. die Schriftart der Überschrift) • Füge neue Elemente ein (z. ähnlich der Ordnerstruktur im Dateisystem.3 Basic Javascript Ein vollständiges Beispiel für eine Webseite mit Javascript-Programm: .

Das Programm wird dann beim Aufbau der Seite ausgeführt: . b. Deswegen klären wir erst einmal wie Javascript eingebunden wird. müssen Sie mindestens den bestehenden Javascript-Code erkennen können.MMT Webprogrammierung 1 <head> <script> function setcolor( c ) { b = document. Mit dem <script>Tag im Head des Dokuments wird die externe Javascript-Datei eingebunden: <script src="jquery.js. dann darf er keinen Inhalt zwischen <script> und </script> enthalten. diese haben traditionell die Endung .3.getElementById('farbfeld'). Wenn Sie also eine bestehende Website warten oder verändern sollen.backgroundColor = c } </script> <body id="farbfeld"> <h1>Farbwahl</h1> <form> <input type="button" value="Rot" onclick="setcolor('red')" /> <input type="button" value="Grün" onclick="setcolor('#0F0')" /> <input type="button" value="Blau" onclick="setcolor('blue')" /> </form> </body> 87 In dieser Webseite ist an den vier markierten Stellen Javascript zu finden. 5.1 Einbindung von Javascript Externe Javascript-Datei Man kann Javascript-Programme in eigenen Dateien speichern.style. Achtung: die Schreibweise ohne Ende-Tag: <script src=“jquery“ /> funktionert nicht! Der <script>-Tag Javascript-Programme können im HTML-Code mit dem <script>-Tag eingebettet werden. um ihn nicht zu beschädigen — auch wenn Sie selbst nicht programmieren wollen. Wir werden später eine Javascript-Library namens jQuery verwendet. Wie Sie sehen ist Javascript sehr eng mit HTML und CSS verzahnt.js" type="text/javascript"></script> Wird der <script>-Tag auf diese Weise (mit dem Attribut src) verwendet.

wurde durch das DOM größteteils ersetzt. bei einem Link: <a href="javascript:location='http://www.Schreibweise ist in HTML-Seiten nicht sehr sinnvoll. Seite 79) Ein paar typische Events mit ihren typischen HTML-Tags: <body onload=". nachdem die ganze Seite geladen + fertig dargestellt ist .write("<br>in " + i + " Millisekunden"). z. da sie für Browser ohne Javascript-Fähigkeit die Links unbrauchbar macht. dass sie nicht gleich beim Laden der Seite starten. Hier eine Version die dem Prinzip der „graceful degradation“ entspricht. Der Befehl document..google.5. i--. } </script> <p><strong>Peng!</strong> 88 Dieses Programm ist übrigens ein gutes Beispiel für ein veraltetes Javascript-Programm.at" onclick="ok=confirm('go?').z. je nach Antwort wird der Link entweder aufgerufen oder nicht.">google</a> Ohne Javascript ist es ein ganz normaler Link zu google. return ok.write verwenden . B. Sie funktioniert mit und ohne Javascript sinnvoll: <a href="http://www.5. Nur sehr wenige Leute müssen bei sehr wenigen Gelegenheiten noch document.. Das funktioniert gleich wie beim onsubmit-Attribut des form-Tags: Wenn der Event-Handler false zurückgibt wird das Event unterbrochen. Javascript in einer URL Als URL kann man auch ein kleines Javascript-Programm angeben. while (i>0) { document.at/'">zu Google nur mit Javascript</a> Die “Javascript-in-einer-URL”.MMT Webprogrammierung 1 <h1>Selbstzerstörung</h1> <script> i=10. Mit Javascript erscheint ein Dialog. die AutorInnen der Javascript-Libaries wie John Resig von jQuery."> Das Programm wird ausgeführt.google. der hier für die Ausgabe verwendet wird. sondern erst wenn gewisse Ereignisse (Events) eintreten (siehe Kapitel 4.Attribute Meist werden Javascript-Programme so geschrieben.B.write(). Die onevent .

PHP): Anweisung wird mit einem Strichpunkt (Semikolon) getrennt. dass ein Objekt nicht nur eine Variable ist. Das Programm muß true oder false zurückgeben um anzuzeigen ob die normale Funktion des Buttons wirklich ausgeführt werden soll.. Javascript ist eine objektorientierte Programmiersprache.. und eine ausführliche Auflistung welcher HTML-Tag mit welchem Event kombiniert werden kann. sondern zusätzlich auch noch Funktionen existieren können. Falls der Javascript-Code false zurückgibt wird der Link aber nicht aktiviert! Das Programm wird ausgeführt wenn der Inhalt des Eingabefeldes verändert wurde <input type="button" onclick=".. Dieses Dokument hat einige Eigenschaften (Variablen) und einige Methoden (Funktionen): 10 http://de."> <input onchange="..selfhtml."> Eine ausführliche Liste der Events.MMT Webprogrammierung 1 <a href=". in selfhtml10..B. C++. finden Sie z. Blöcke werden mit geschwungenen Klammern gebildet. Java.." onclick=". Es repräsentiert die aktuell geladene Webseite.. die Daten speichert. Was bedeutet objektorientierung? Die Grundidee ist. Falls der Javascript-Code false zurückgibt werden die Daten aber nicht versandt! Das Programm wird ausgeführt wenn der Link angeklickt wird.htm .. (Achtung: funktioniert nicht auf Touch-Devices – so wie :hover) Das Programm wird ausgeführt wenn auf den Button geklickt wird. aber bevor die Daten wirklich gesendet werden." onmouseover="..."> <a href=". Perl...2 Syntax von Javascript Javascript hat eine ähnliche Schreibweise wie die Sprachen aus der C-Familie (C..org/javascript/sprache/eventhandler. die zu diesem Objekt gehören."> 89 Das Programm wird ausgeführt wenn die Maus über den Link bewegt wird (auch: onmouseout). 5."> <form onsubmit="..3. Das Programm wird ausgeführt wenn der Einsende-Knopf des Formulars betätigt wird. Zum Beispiel das Objekt document ist in Javascript im Browser immer vorhanden.

alert("meine URL ist " + document. nicht nur Objekte.location). mit dem Befehl console. Auch die folgenden Beispiele können Sie direkt in Firebug in der Console ausprobieren wie in Abbildung 58 gezeigt: Wenn Sie einen Ausdruck eintippen wird er ausgewertet. wird sie vom Interpreter angelegt. Abbildung 57: Javascript-Beispiel in FireBug auf der Website http://everytimezone. In Javascript ist die Deklaration nicht nötig. Wenn eine Variable zum ersten Mal im Programm erwähnt wird.location // diese Eigenschaft speichert die aktuelle URL document. Eigenschaften und Methoden.location = "http://io9. // wenn man einen neuen Wert in location speichert surft der Browser hin document. Objekte enthalten – der Interpreter trennt Variablen nicht nach verschiedenen Datentypen: . Strings. Es gibt in Javascript aber auch „normale“ Variablen und Funktionen.com/ In andere Programmiersprachen müssen Variablen deklariert werden (ein Datentyp für die Variable wird festgelegt) und initialisiert werden (ein erster Wert wird in die Variable gespeichert). Folgendes Beispiel verwendet die Methode getElementById des document-Objekts um ein bestimmtes DIV in der Webseite auszuwählen.com". // die Methode alert zeigt ein Popup-Fenster an 90 document. Abbildung 58: Javascript Console in Firebug Variablen in Javascript können Zahlen.log( … ) können Sie direkt auf die Console schreiben.alert("hi").MMT Webprogrammierung 1 // document. Arrays.

true). // gibt “Das Shirt ist rot” Eine Besonderheit von Javascript die sie nicht in anderen Programmiersprachen finden werden ist. var i. c = {"farbe" : "rot".length ) { t += "Index = " + i + ". i++. 2. this. Wert = " + b[i] + "\n". "beschriftung": "int pi == 3". b. die aktuelle Länge des Arrays kann aus der Eigenschaft .verkauft = v.t. "ein text".141. … Aber eigentlich sind Arrays schon Objekte. Objekte Für das Erzeugen von Objekten gibt es zwei Schreibweisen: die JSON-Schreibweise mit geschwungenen Klammern eignet sich gut für einmalige Objekte. true). dass Eigenschaften eines Objekts nicht nur über die Punkt-Schreibweise.farbe = f. Boolean. Die Größe des Arrays ist nicht beschränkt. b = new Array("eins". // typeof(b) == "object" // JSON-Schreibweise // Objekt-Schreibweise Die Werte im Array können verschiedene Daten haben (String. var c. Number. while( i < b.). 3. i = 0. v ) { this. t = "Das Array:\n".. } c = new Shirt("rot". true. alert("Das Shirt ist " + c. 2.141. } alert(t). Für das Erzeugen des Arrays gibt es zwei Schreibweisen var b. function Shirt( f.beschriftung = b. this.. "verkauft": true}. "int pi == 3". b[1]. true].length ausgelesen werden. Will man mehrere Objekte mit denselben Eigenschaften erzeugen. undefined.MMT Webprogrammierung 1 a a a a a = = = = = 10. 3. // typeof(a) == "number" // typeof(a) == "number" // typeof(a) == "string" // typeof(a) == "boolean" // typeof(a) == "undefined" 91 Arrays Arrays in Javascript können wie in C mit eckigen Klammern und Integer-Index ausgelesen werden: b[0].141. dann ist eine Instanziierungs-Funktion besser geeignet. b = ["eins". sondern auch über eckige Klammern – also wie ein Array – angesprochen werden können: . 3..farbe ).

MMT Webprogrammierung 1 alert("Das Shirt ist " + c. alert("Die Beschriftung lautet " + c[e] ). Mit dieser Schreibweise und der for-Schleife kann man über alle Eigenschaften eines Objektes iterieren: var i. alert("Das Shirt ist " + c["farbe"] ). } alert(t). i++. 92 In den eckigen Klammern steht nun ein String.t. for( i in c ) { t += "Eigenschaft = " + i + ".farbe ). Dieser könnte auch in einer Variable gespeichert sein: e = "beschriftung". t = "Das Array:\n". Wert = " + c[i] + "\n". .

getElementsByTagName() document.MMT Webprogrammierung 1 93 5.appendChild() node. Methoden.lastChild node. textContent funktioniert auch bei Nodes die noch weitere verschachtelte Tags enthalten und extrahiert immer den gesamten Text aus allen “Blättern” des DOM-Baums. d.3.setAttribute() node.childNodes (liefert Array von Nodes) node. "display:none"). "display:none").setAttribute("style". .nextSibling node.data node.getElementById("person_25“).firstChild.getElementById("v_25").removeChild() node.replaceChild() Was fehlt: es gib leider keine Methode getElementByClassName. Diese beiden Zeilen könnten auch zu einer kombiniert werden: document.3 DOM Beispiel Die wichstigsten Befehle zur Manipulation des DOM finden Sie in selfhtml unter „document“ und „node“. Der Wert des Attributes ist ein einfacher String.data.getElementsByTagName() node. <span id="v_25" class="vorname">Benjamin</span> Das erste und einzige Kind des Span ist ein Text-Node: vn = document. oder – etwas kürzer – über die Eigenschaft textContent: vn = document.hasChildNodes() node. Achtung: Falls der Tag schon ein Style-Attribute hatte wurde dieses überschrieben. Ein Node ist ein Knoten DOM-Baum.insertBefore() node.getElementById() node.createElement() node.removeAttribute() node. Eigenschaften für die DOM: document.getElementById("v_25"). entspricht also einem HTML-Tag oder einem Stück Text.cloneNode() node. Hier eine Liste der wichtigen Objekte.firstChild node. Den eigentlichen Text der HTML-Seite kann man als data eines Text-Nodes auslesen.getAttribute() node. Die Attribute des HTML-Tags sind über getAttribute / setAttribute / … zugänglich und manipulierbar.textContent.getElementById() document.attributes node.setAttribute("style". Ein simples Beispiel: ein bestimmter Tag wird über die ID ausgewählt und sein Style-Attribut gesetzt: d = document.getElementById("person_25“).previousSibling node.parentNode (liefert 1 Node) node.

org/ YUI (von Yahoo) http://developer.yahoo.und einblenden Mit jQuery dynamische Formulare gestalten Weitere Informationsquellen • http://jquery.com Vertiefungsmöglichkeiten Erforschen Sie die Dokumentation und die Tutorials von jquery.com/yui/ . wie man so eine anonyme Funktion definiert und verwendet Was Sie können sollten • • Mit jQuery Teile einer Webseite aus. f = c.prototypejs. Für Fortgeschrittene Alternativ: befassen Sie sich stattdessen mit einer der anderen Libraries: o o o o o Prototype http://www.net/ Dojo http://dojotoolkit. was der Unterschied ist zwischen f = c().org/ + Scriptaculous http://script. warum man es anstrebt. • Dass Javascript-Funktionen ohne Namen definiert werden können.aculo. jQuery Was Sie wissen sollten • Was „unobstrusive Javascript“ / „graceful degradation“ / „progressive enhancement“ bedeutet. wie man es erreicht • Dass Javascript-Funktionen in Variablen gespeichert werden können.us/ Ext Mootools http://mootools.MMT Webprogrammierung 1 94 6.

und fügt dann Javascript hinzu (ohne die Verwendbarkeit ohne Javscript zu zerstören). 95 Abbildung 59: Die Rolle von Content. Menschen mit veralteten Browsern oder exotischen Ausgabegeräte. Um zu testen. Abbildung 60: Javascript deaktivieren mit QuickJava in Firefox Bei der Verwendung von jQuery bleibt der HTML-Code „javascript-frei“: jQuery wird nur an einer Stelle. ob das wirkliche funktioniert kann man ganz einfach mit dem Firefox-AddOn QuickJava testen. Flash. Wie in Abbildung 60 gezeigt kann Javascript mit einem Klick deaktiviert werden. und bezieht sich nicht nur auf Javascript. Dieses Prinzip wird auch „progressive enhancement“ oder „unobstrusive javascript“ genannt. Der Inhalt (Content) der Webseite bleibt auch ohne Javascript zugänglich.B. sondern auch auf andere „Zusatz-Technologien“ wie z. im Head des Dokuments eingebaut: . Auch für Suchmaschinen wie Google oder andere Programme die die Information aus den Webseiten weiter verarbeiten ist dieses Prinzip hilfreich.MMT Webprogrammierung 1 Die Library jQuery unterstützt das Prinzip der „graceful degradation“ – auch ohne Javascript sind Webseiten mit jQuery immer noch gut verwendbar. Darstellung und Programmierung (Unobstrusive Javascript) Von dieser Herangehensweise profitieren nicht nur Blinde. Die Idee ist dabei immer die Gleich: man baut die Webseite zuerst ohne Javascript.

jquery.2. 6.2 Besondere Javascript-Schreibwesen in jQuery jQuery Code ist auf den ersten Blick nicht einfach lesbar. 6.com steht nicht nur ein Server.MMT Webprogrammierung 1 <script type = "text/javscript" src = "http://code.com/jquery-latest.php".jquery.ready(function(){ // Javascript code here }). no onclick or onload or . das Argument ist das document-Objekt: $(document) Das Objekt mit dem Namen $ hat eine Methode get.. Diese wird mit zwei Argumenten aufgerufen: $. Funktionsnamen) verwendet werden. das Argument ist ein String: $("a") Eine Funktion mit dem Namen $ wird mit einem Argument aufgerufen.get("backend. In folgendem Code sind o1.js"></script> <script> $(document). --> </body> 96 Die URL http://code.2 Chaining – eine Kette von Methodenaufrufen Die meisten jQuery-Methoden geben wieder ein jQuery-Objekt zurück. o2. Nur wenn man offline Entwickeln will muss man die Library wirklich herunterladen.plain html here.jquery. Jedes jQuery-Objekt bietet die Methoden addClass und append an.2. callback) 6. o3 jeweils jQuery-Objekte.. jQuery nutzt diese Besondernheit von Javascript aus und definiert eine Funktion und ein Objekt mit dem Dollarzeichen als Namen. Wenn man ein paar Grundprinzipien verstanden hat profitiert man aber von den ungewohnten Schreibweisen: der Code bleibt relativ kurz. . </script> </head> <body> <!-.com/jquery-latest. sondern der Amazon Simple Storage Services (s3).1 Mein Name ist Dollar In Javascript kann das Dollar-Zeichen in Bezeichnen (Variablennamen. Hier eine kleine Lese-Schule: Eine Funktion mit dem Namen $ wird mit einem Argument aufgerufen.js kann man für alle Webseiten die online sind verwenden: hinter code.

append(":").append(":"). haben eine Identität auch wenn sie keinen Namen haben. Betrachten wir eine ganz normale Funktion: function create_gold() { // Details nicht so wichtig return gold.org/wiki/First-class_citizen .MMT Webprogrammierung 1 o1 = $('h1').addClass("gag"). dann braucht man sie auch nicht in einer Variable zu speichern. sondern in der Variable f gespeichert: f = create_gold. 6.3 Funktionen als first-class citizens11 In Javascript können Funktionen zur Laufzeit erzeugt werden.append(":").wikipedia. in Variablen gespeichert werden. Nun kann die Funktion auch unter dem neuen Namen f aufgerufen werden: 11 http://en. o2. } Sie kennen schon die Schreibweise für den Aufruf der Funktion: auch wenn die Funktion keine Argumente hat werden auf jeden Fall die runden Klammern geschrieben: gold1 = create_gold(). Dabei kann man auch Zeilenumbrüche verwenden. o3 = o2. 97 Wenn man die “Zwischen-Objekte” o1. ähnliche Scheibweise ohne die runden Klammern. folgender Code hat genau die gleiche Wirkung: $('h1') . Eine alternative Schreibweise ist dann: $('h1'). Dabei wird die Funktion nicht aufgerufen. o2 = o1.addClass("gag").addClass("gag") .2. In Javascript gibt es eine zweite. o3 nicht wirklich noch einmal verwenden will.

die Funktion wird sofort in der Variable f gespeichert: f = function() { alert("ich habe keinen namen"). Da der Name „nach_dem_laden“ nur einmal verwendet wird. dass Sie einen normalen Funktionsnamen haben. Ein Beispiel ist die ready-Funktion: Die Funktion ready() von jQuery verlangt ein Argument: eine Funktion. f(). Bei der Verwendung von jQuery werden oft Funktionen ohne Namen verwendet. 98 6.ready(nach_dem_laden).ready( function(){ // Your code here }). Die beiden Funktionen können nur auf die gleiche Weise aufgerufen werden: hase(). ist er eigentlich nicht nötig.2. }. Sie können die drei Zeilen einfach mit copy-und-paste in eine Webseite übertragen und Ihren eigenen Code dann einfügen. Stattdessen verwendet man eine anonyme Funktion: $(document).4 Anonyme Funktionen Da Funktionen in Variablen gespeichert werden können. die aufgerufen werden soll wenn die Webseite vollständig geladen ist: function nach_dem_laden () { // Your code here } $(document).MMT Webprogrammierung 1 gold2 = f().-) 6. ist es nicht unbedingt nötig. Die folgende Funktion hat den Funktionsnamen hase: function hase() { alert ("mein name ist hase").3 Selektieren und Manipulieren mit jQuery jQuery verwendet die Schreibweise der CSS-Selektoren um Nodes des DOM auszuwählen: . Zur Beruhigung: auch wenn Sie die Schreibweise nicht ganz durchschauen können Sie jQuery erfolgreich verwenden. (Wahrscheinlich arbeiten die Meisten so . } Alternativ eine Schreibweise ohne Namen.

prepend("Titel:"). die es in CSS (noch) nicht gibt: $("tr:even") $("p:contains('Warnung')") $(":checkbox") /* Alle geraden Zeilen der Tabelle */ /* Absätze die die Zeichenkette Warnung enthalten */ /* Alle input-Tags vom typ checkbox */ Die Selektion allein verändert die Webseite noch nicht.addClass("wichtig").extra"). $("h1").4 Interaktion mit jQuery jQuery bietet für die verschiedenen Events eigene Methoden an.click(function() { alert("ein h1 wurde geklickt"). Dazu ein vollständiges Beispiel: zu mehreren Überschriften gibt es Text. /* alle A-Tags erhalten die Klasse wichtig */ /* in Überschriften h1 wird ein Doppelpunkt angefügt */ /* --||-. die aufgerufen werden soll wenn das Event feuert. Hier kommen meist anonyme Funktionen zum Einsatz: $("h1"). der bei Klick auf die Überschrift versteckt bzw. /* versteckt den angeklickten h1 tag */ }).wird vorne ‚titel:’ eingefügt */ /* alle p-tags mit klasse extra werden versteckt */ 6.hide(). angezeigt werden soll: 12 http://docs.com/Selectors .click(function() { $(this).extra") /* alle A-Tags */ /* alle Überschriften h1 */ /* alle p-tags mit klasse extra */ 99 jQuery definiert noch ein paar zusätzliche Selektoren12. als Argument wird eine Funktion übergeben. Innerhalb der Funktion steht die Variable this zu Verfügung um den angeklickten Tag zu erhalten: $("h1"). $("h1"). Diese können direkt an die Selektions-Funktion geschreiben werden: die Selektions-Funktion gibt ein Objekt mit entsprechenden Methoden zurück: $("a").jquery. $("p.append(":").MMT Webprogrammierung 1 $("a") $("h1") $("p. }). Dafür bietet jQuery eine Reihe von Manipulations-Funktionen an.hide().

}).hide().5.6 (Seite 81) haben Sie gelernt wie Sie mit Javascript die Daten eines Webformulars prüfen können bevor das Formular abgesendet wird.toggle().com/jquery-latest.ready(function(){ $(".jquery.MMT Webprogrammierung 1 <h2 class="more">Vertiefendes Studium</h2> <div class="extra"> <p>Das Schwerpunktstudium Vertiefung ermöglicht den Erwerb hoch spezialisierter Qualifikationen in einer gestalterischen Fachdisziplin. Mit jQuery können wir dieses Programm noch verfeinern: Jeweils beim betroffenen Eingabefeld wird direkt eine Fehlermeldung angezeigt: . hier nach dem nächsten Tag mit der Klasse extra.js"></script> <script> $(document).</p> </div> Dazu das vollständige Javascript-Programm mit jQuery: <script type="text/javascript" src="http://code. der zwishcen sichtbar und unsichtbar hin und her schlatet (mit display:none) 6.more"). Auf den gefundenen Tag wird der befehl toggle() angewandt. $(". </p></div> 100 <h2 class="more">Steuerung</h2> <div class="extra"> <p>Das Schwerpunktstudium Steuerung zielt auf die Ausbildung von Führungskräften der Kreativwirtschaft. }). </script> this ist innerhalb der Funktion der angeklickte Tag. Mit dem jQuery-Befehl next() wird nach dem nächsten Tag im HTML-Code gesucht.extra").click(function(){ $(this).next(".extra").5 Formulardaten Prüfen mit jQuery In Kapitel 4.

MMT Webprogrammierung 1 <script src="jquery-1. var $i = null.after('<span class="error">Lieferadresse angeben</span>'). }). }). if($i. $i = $("input[name=liefername]").2.remove(). ok = false. </script> </head> <body> <form action = "bestell.js"></script> <script> $(document).php"> <label>Empfänger: <input type="text" name="liefername"> </label> <label>Adresse: <input type="text" name="adresse"> </label> <label>Telefon/Handy: <input type="text" name="tel"> </label> <input name="" type="submit"> </form> 101 .3. ok = false.ready(function(){ $("form").error").after('<span class="error">den Empfänger angeben</span>'). } return ok.min.submit(function(){ var ok = true.val() == "") { $i. } $i = $("input[name=adresse]"). if($i.val() == "") { $i. $("span.

Addison-Wesley.org MÜNZ. CEDERHOLM. ISBN 3772366546.w3.Stefan / NEFZGER.org/Protocols/rfc2616/rfc2616.Wolfgang (2005): HTML Handbuch.org/wiki/Webdesign Freeman.1 Anhänge Quellenverzeichnis Web + HTTP HTTP 1. ZELDMAN. http://de. Stefan: Selfhtml.w3c. . Franzis.selfhtml. O'Reilly. Markt+Technik-Verlag.http://www. ISBN 978-3827242242 Münz. ISBN 382732629X.1: RFC 2616 . Molly: CSS Zen Garden. Peter (2007): Little Boxes.com/ Müller. Studienausgabe.html HTML + CSS Homepage des WWW-Consortiums. Addison-Wesley.wikibooks. http://de. München. http://validator. ISBN 3827327326. ISBN 978-3897214538 Shea. Dave/ Holzschlag. Elisabeth (2006): HTML mit CSS & XHTML von Kopf bis Fuß. http://csszengarden.w3.Jeffrey (2008): Webdesign mit Webstandards: Grenzenlos kompatibel. Brigitte (2006): Handbuch Webdesign. Ausgabe): Absolut flexibel und für alles gewappnet mit CSS und XHTML. Wikibook. 7. http://www.org/ Jellinek.Dan (2007): Bulletproof Webdesign (2. München.MMT Webprogrammierung 1 102 7.org/ HTML Validator des WWW-Consortiums.

Ralph (2003): JavaScript in 21 Tagen . Welling. O'Reilly Media.php. Stephan (2007): PHP Design Patterns. 2.net Templating-System Smarty für PHP. O'Reilly. Markt+Technik.PHP Extension and Application Repository. ISBN 978-3897214736 Schmidt. ISBN 3897214032. O'Reilly. Rasmus (2006): Programmieren mit PHP.MMT Webprogrammierung 1 103 PHP PHP Homepage mit Dokumentation in verschiedenen Sprachen: http://php. München: Addison-Wesley. POWERS. ISBN 059600656X.Michael (2008): Head First JavaScript (Head First). http://jquery. . ISBN 3897214911. FLANAGAN. ISBN 0596529368. . O'Reilly Media. jQuery Library.David (2007): JavaScript: Das umfassende Referenzwerk.com/ . Auflage.net KERSKEN.php.net/ PEAR .Douglas (2008): JavaScript: The Good Parts. O'Reilly. O'Reilly Media. http://pear. http://smarty. .Chris (2005): Essential PHP Security. ISBN 978-3897214422. SHIFLETT. ISBN 3827265088.Sascha (2005): Praktischer Einstieg in MySQL mit PHP. . Lerdorf. CROCKFORD. Schritt für Schritt zum Programmierprofi. O'Reilly Vlg GmbH & Co.Shelley (2007): Adding Ajax. STEYER. ISBN 978-3827321695. O'Reilly Media. ISBN 0596527748. Luke (2004): MySQL-Tutorial. Javascript + AJAX MORRISON. ISBN 0596517742.

37 30 70 72 35. 21 21 37 97 63 91 42 35 51 29. 90 87 64 34 22 85 96 26 69 85 . 38.htm Deklaration die externe Javascript-Datei DirectoryIndex div Doctype Document Object Model Dollar Dreamweaver Dropdown-Liste Eich Eigenschaft eine Javascript-Objekts 91 53 35 17 12 12 8 12 12 12 12 70 29 63 7 16 69 34 11 24 35 77 90 29 50 57 71 64 32. 39 57 70 42 22 35 79 96 65 81 22. 62 53 53 35 72 68 81 77 17.MMT Webprogrammierung 1 104 7. 21. 37 37 37 7 bottom Box Model br Braille Browser Line Mode lynx Mosaic Mozilla Opera Button Cascading Stylsheet case-sensitive CERN character entities Checkbox class Client Code Colorzilla confirm console CSS CSS Layout CSS-Sprites Datei-Upload default.2 Stichwortverzeichnis $ ~ + a Absatz Absende-Button absenden absolut absolute Absolute Positionierung Abstand action Action Addition alert alt Alternativtext Anker Anonyme Funktion Apache Array Auflösung Außenabstand auto background-color background-image background-repeat Bandbreite Benutzerschnittstelle Programmierung Berners-Lee Tim Bestellformular Bild Bildausschnitt Bildfeld Bildschirmgröße body border 7 67 17.

34. 78. 14 14 34 17 35 64 90 35 68 91 67 95 88 22 30 37 33 18 81 53 42 50 24 65 53 70 91 23 8 30 33 38 22 26 23 69 54 90 12 35 . 90 26 95 26 97 55 52 29 29 92 68 67 86 68 67 35 11 79 79 35 35 37 70 30. 76. 25 80 97 37 73 22 19.MMT Webprogrammierung 1 einfügen Eingabefeld Eingabeformular em E-Mail Ereignis Event ex Farb Farbe fieldset Firebug Firefox AddOn Colorzilla Firebug FireFTP QuickJava FireFTP first-class citizen float Float font-family font-size for form Formular Formulare und Javascript FTP Funktion as first-class citizens gekachelt GET gif graceful degradation Graceful Degradation head Hintergrundbild hover href HTML 77 11. 90 HTTP Hypertext Transfer Protocol id img Inch index. 36. 38 11 35 30. 36. 34. 76. 78. 95 38 22 37 56 22.html Initialisierung Innenabstand input Instanziierung Interaktion javascript unobstrusive Javascript in einer URL jpg justify Kachel Klasse Kompatibilität Konkatenation Koordinaten Layout mit CSS mit Tabellen Leerzeichen left legend length li Line Mode Browsers line-height link CSS-Selektor Link relativ Liste Liste (Eingabefeld) list-style-type log lynx margin 105 11.

98 72 29 11 25 75 34 57 17.MMT Webprogrammierung 1 Maßeinheiten Menü Mosaic Mozilla name Name des Eingabefeldes Navigation Navigationsmenü Node Objekt ol onchange onsubmit Opera option Ordnerstruktur padding Parameter parseInt Passwort-Feld Peer-zu-Peer PHP Pixel png position Positionierung absolut float pricing attack progressive enhancement prompt Prozent Prüfung Formulardaten von HTML Code Pulldown-Liste QuickJava Radiobutton Rahmen Redundanz 81 24 69 95 69. 74 81 69 11 55 30 22 53 35 69 12 12 38 rel relativ relativer Link repeat right Rule Schleife Schnittstelle Schrift Schriftgröße script Scrollen Secure File Transfer Client Security Seite select Selektor senden serifenlos Server SFTP Sicherheit span Sprites src Standard-Dokument stateless String-Konkatenation style Attribut Tag 33 Stylsheet Tabelle table Tag TCP td text-align textarea Textbereich Textfeld 106 33 35. 21 64 15 81 33 29 23 23 17 14 23 30 68 69 69 . 60. 70 35 72 53 52 75 95 77 35 74 39 54 93 91 23 79 82 12 68 26 35 14. 62 26 37 53 32 92 75 29 30 87 13 25 75 13 68 32.

14 24 77 Version HTML Verstecktes Feld visited Webbrowser WebDAV Webseite Webserver Website whitespace width XHTML XML Zeilenumbruch Zentimeter zentrieren Zurücksetzen-Button zustandslos 107 16 70 38 Siehe Browser 25 13 11.MMT Webprogrammierung 1 text-indent Textmarke th this toggle top tr Trennung von Struktur und Darstellung Überschrift ul Umlaut unobstrusive javascript unsichtbar Unsichtbares Feld Upload url URL Validator value 30 37 23 99 100 53 23 31 38 23 66 95 86 70 25 35 11. 63 13 17 51 11 16 17 35 51 70 15 .

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->