Web Technologien HTML & CSS

Transkript

1 Web Technologien HTML & CSS Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics WS 2011/2012 Wednesdays, 8:00 10:00 a.m. Room HS 021, B4 1

2 Themen der Vorlesung 1. HTML, CSS 2. Javascript - Basiskonzepte 3. AJAX 4. LAMP Stack 5. MVC Pattern (am Bsp. eines PHP-Frameworks) 6. Klassische Datenbanken 7. NoSQL Datenbanken 8. XML/XQuery/XPath und XSLT 9. Lower-case Semantics 10. Echte Semantics 11. Reasoning mit OWL 12. Semantische Regelsysteme 13. Big Data - Grundlagen und Anbieter 14. Big Data - Anwendungen (am Bsp. Map/Reduce) Slide 2

3 Organisation Vorlesung: Mittwoch, 8:00 10:00 Uhr; Raum HS 021, Geb. B4 1 Vorlesungsfolien werden vor dem jeweiligen Termin freigeschalten unter Übung: Freitag, 10:00 12:00 Uhr; CIP1 8 Übungen in WS 11/12 (Termine siehe Kalender unter 1. Übung am 28. Oktober 2011 Betreuung: Andreas Filler (andreas.filler@iss.uni-saarland.de) und Julian Eichhoff (julian.eichhoff@iss.uni-saarland.de) Abgabe von Übungen ermöglicht das Sammeln von Bonuspunkten Übungsanmeldung per mit Name und Matrikelnummer an iss.webtechnologien@googl .com Download einer Softwareumgebung für die Übungen unter Slide 3

4 Organisation Prüfungsmodalitäten: Klausur, 120 min, 120 Punkte (davon 28 Punkte aus Übungen) Durch die pünktliche Abgabe und positive Bewertung der Übungen können 28 Punkte erreicht werden, die dann mit der Klausur verrechnet werden Die Übungen 1-4 werden mit jeweils maximal 3 Punkten bewertet; die Übungen 5-8 mit jeweils maximal 4 Punkten Slide 4

5 Geschichte des WWW Der Physiker Tim Berners-Lee schreibt im März 1989 ein Proposal für ein Projekt zum Wissensmanagement um die Teilchenbeschleuniger und Experimente am CERN dokumentieren zu können Im Rahmen des WorldWideWeb (WWW) Projektes soll ein System entwickelt werden, welches Hypertext mit dem damals bereits bestehenden Internet und den Heim-PCs verknüpft Mittels des ersten von ihm entwickelten Browser- Editors verfolgt er das Ziel das Web zu einem Kreativraum zu verwandeln: Man kann Informationen mit anderen teilen Man kann Informationen editieren Der erste Webserver, Browser und Editor Slide 5

6 HTML, die Sprache des Web HTML ist eine Markup-Sprache und keine Programmiersprache: Hypertext Markup Language HTML-Dokumente sind textcodiert und daher von Menschen und Computern gleichermaßen verarbeitbar Websites bestehen aus untereinander verlinkten HTML- Dokumenten HTML-Dokumente können......von einem Benutzer per Hand oder mittels Hilfssoftware erstellt sein und auf dem Server zu Abruf bereit liegen...beim Aufruf durch den Benutzer dynamisch auf dem Webserver erzeugt werden (à Vorlesung LAMP Stack) Über einen Browser können Websites von Webservern abrufen, sofern die Adresse (URL) bekannt ist Slide 6

7 W3C und WHATWG Seit 1994 hat das W3-Konsortium (W3C) die Standardisierung von Web-Standards übernommen Finanziert über Mitgliedbeiträgen von Firmen und Organisationen über 3-Jahres-Verträge, welche im Gegenzug Zugriff auf nichtöffentliche Dokumente und die Mitwirkungsmöglichkeit bei neuen Standards haben Entwicklung technischer Web-Standards in zyklischen, festgelegten Prozessen mit Review-Verfahren, z.b. HTML 4.01, CSS 2.0, XML 1.0 Zu viele Kompromisse bei der Standardisierung von HTML führte 2004 zur Gründung der Web Hypertext Application Technology Working Group (WHATWG), als Interessengruppe der Browserentwickler und als Zulieferer für in der Webpraxis relevanter Technologien an das W3C Slide 7

8 HTML5 Aktueller Standard für Websites Beruht maßgeblich auf der Unterstützungsarbeit durch die WHATWG zur Beilegung des Standard-Chaos um HTML 4.01 und XHTML 1.0 HTML5 liefert Technologien für moderne Websites des sog. Web 2.0, darunter beispielsweise: Asynchrone Datenübertragung im Hintergrund (à Vorlesung AJAX) Semantische Annotierung Offline-Speicherung Multimedia-Inhalte (3D-)Grafik und Effekte Formatierung mittels CSS3 Slide 8

9 Grundsätzliche Grammatik bei HTML HTML beschreibt nur den Inhalt und die Struktur eines Dokuments, das Erscheinungsbild wird mittels CSS beschrieben à Seit HTML5 wieder klare Trennung HTML-Dokumente bestehen aus umklammernden HTML-Tags zur Auszeichnung des Inhalts Es gibt auch Standalone Tags, welche man zur Einhaltung der Struktur klammern kann, aber nicht muss (à XHTML5 in Vorlesung XML) Tags können Attribute haben, welche den Tag im weitere Informationen erweitern Struktur und Layout werden vom Browser verarbeitet und der Inhalt dargestellt mysite1.html <h1>dies ist eine Überschrift </h1> <p lang="de">dies ist ein Absatz, welcher mehrere Zeilen umfassen kann.<br>und dies eine neue Zeile innerhalb des Absatzes. <br/>noch eine neue Zeile. </p> Slide 9

10 Grundstruktur eines HTML-Dokuments HTML-Tags werden zur Strukturierung verschachtelt Der Tag DOCTYPE ist in der ersten Zeile bei HTML5 zwingend Das komplette Dokument ist in den Tag html eingeschlossen Innerhalb des Tags head sind Meta-Informationen zum Dokument abgelegt Innerhalb des Tags body ist die komplette Struktur und der Inhalt des Dokumentes abgelegt mysite2.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>erstes HTML-Dokument</title> </head> <body> <h1>hallo!</h1> <p>dies ist mein erstes HTML- Dokument</p> <footer><address>jens Mustermann, </footer> </body> </html> Slide 10

11 Grundstruktur eines HTML-Dokuments mysite2.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>erstes HTML-Dokument</title> </head> <body> <h1>hallo!</h1> <p>dies ist mein erstes HTML- Dokument</p> <footer><address>jens Mustermann, </footer> </body> </html> Slide 11

12 Besondere Regeln bei HTML Kommentare die vom Browser nicht interpretiert werden sollen, werden mit <!-- Kommentar --> umklammert Leerbereiche (sog. Whitespaces) und Zeilenumbrüche werden vom Browser ignoriert, können aber durch bzw. <br/> erzwungen werden Bestimmte Zeichen sind für den Syntax reserviert, daher müssen diese ebenfalls im Text anders notiert werden: < < lower than > > greater than & & Ampersand Um sicher zu stellen, dass Umlaute und Sonderzeichen über den ASCII-Syntax hinaus korrekt kodiert werden, muss die Datei im selben Standard kodiert sein, wie es im DOCTYPE angegeben ist; der Standard ist hierbei UTF-8 mysite3.html <h1>überschrift</h1> <!-- nun folgt Text --> <p>zwei Leerstellen in folge: &nsbp;... und dann ein Zeilenumbruch. <br/> 5 < 10 <br/> Dies eine neue Zeile innerhalb des Absatzes mit Umlauten: ä, ö, ü </p> Slide 12

13 Der <head>-bereich Im Tag title kann der Titel der Website eingetragen werden, welcher im Browser angezeigt wird, meist als Grundlage für Lesezeichen dient und von Suchmaschine hervorgehoben wird Der Tag meta kann Beschreibung von Meta-Informationen für den Webserver, Browser und Suchmaschinen enthalten, bspw.: die Kodierungsmethode der Sonderzeichen im Dokument den Namen des Autors der Website eine Kurzbeschreibung der Website Informationen zum vorgeschlagenen Crawl-Verhalten der Suchmaschinen mysite4.html <head> <title>website von Jens M.</title> <meta charset="utf-8"/> <meta name="author" content="jens Mustermann"/> <meta name="description content="meine private Website über meine Hobbys."/> <meta name="robots" content="index, follow"/> </head> Slide 13

14 Überschriften und Absatze im <body> Über die Tags h1 bis h6, kann das Dokument mittels Überschriften strukturiert werden Absätze werden durch p (Paragraph) definiert und können mittels der Tags article und section optional semantisch annotiert werden Die Überschrift einer section kann innerhalb oder direkt über dem Tag section definiert werden Über die Tags footer, header, sowie nav können sichtbare Fußund Kopf-, sowie Navigationsbereiche einer Website deklariert werden mysite5.html <body> <article> <h1>mein Ausflug zum See</h1> <p>es war einmal [...]</p> </article> <h1>mein neues Saxophon</h1> <section> <p>wie ihr ja wisst habe ich [...]</p> <p>zum Ende will ich [...]</p> </section> <footer><p>geschrieben von Jens </p> </footer> </body> Slide 14

15 Listen im <body> Mittels der Tags ol (ordered list) und ul (unordered list) können Listen erstellt werden Jedes Element innerhalb einer Liste wird mittels des Tags li (list item) beschrieben Durch das Verschachteln von neuen ol oder li Tags innerhalb von Listenelementen können auch tiefer geschachtelte Listen erstellt werden < Zutaten: <ul> <li>zwiebeln</li> <li>gemüse</li> </ul> mysite6.html Zubereitung: <ol> <li>vorbereitung <ol> <li>zwiebeln schälen</li> <li>gemüse putzen</li> </ol> </li> <li>[...]</li> </ol> Zutaten: Zwiebeln Gemüse Zubereitung: 1. Vorbereitung 1. Zwiebeln schälen 2. Gemüse putzen Slide 15

16 Bilder/Grafiken im <body> Über den Tag img (Image) können Bilder/Grafiken in ein HTML-Dokument eingebunden werden. Das zwingende Attribut src (Source) gibt an, unter welcher relativen oder absoluten Adresse der Browser das Bild findet Optional kein mittels der Parameter alt, width und height ein Alternativtext und eine gewünschte Anzeigegröße angegeben werden Eingegliedert in einen Tag figure kann mittels figcaption das Bild/ die Grafik beschriftet werden mysite7.html <figure> <figcaption>martin und ich beim biken</figcaption> <img src="biken.png" width="335" height="448"/> </figure> Slide 16

17 Grundstruktur eines HTML-Dokuments mysite2.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>bilder in HTML</title> </head> <body> <h1>bildergalerie</h1> <figure> <figcaption>martin und ich beim biken</figcaption> <img src="biken.jpg" width="300" height="220"/> </figure> </body> </html> Slide 17

18 Verlinkungen im <body> Über den Befehl a (anchor) können Verknüpfungen auf andere Dokumente beschrieben werden Relative Links beziehen sich auf Dokumente auf dem gleichen Server Absolute Links verlinken auf Dokumente auf anderen Servern Der Inhalt innerhalb des geöffneten a Tags verlinkt auf das im Parameter href angegebene Ziel Über den optionalen Parameter target kann angegeben werden, in welchem Fenster das verlinkte Dokument gezeigt werden soll, z.b.: _blank für neues Fenster mysite8a.html Klicken Sie hier um zur <a href="index.html"> Startseite</a> zu wechseln. mysite8b.html Klicken Sie hier um zu <a href=" target="_blank >Google</a> zu wechseln. Slide 18

19 Cascading Style Sheets (CSS) Cascading Stylesheets (CSS) ermöglichen die Anpassung des optischen Erscheinungsbildes von HTML-Dokumenten im Browser CSS ist ebenfalls durch das W3C standardisiert, die aktuelle Version ist CSS3 Stildefinitionen können in drei Varianten auf ein HTML-Dokument angewendet werden: Die Definitionen liegen in einer separaten CSS- Datei und werden im HTML-Dokument referenziert Die Definitionen werden direkt im <head> des HTML-Dokuments beschrieben Die Definitionen werden direkt in einem HTML- Element beschrieben <head><link rel="stylesheet" type="text/css" href="styles.css"/></head> <head><style type="text/css">[...]</style></ head> <h1 style="[...]">überschrift</h1> Zur idealen Trennung zwischen Struktur/Inhalt und Erscheinungsbild sollte stets die erste Variante bevorzugt werden Slide 19

20 HTML und CSS in Kombination mystyles1.css body { font-family: sans-serif; } h1 { color: red; font-size: 22px; } p { font-size: 16px; } mysite9.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyles1.css"/> <meta charset="utf-8"> <title>erstes HTML-Dokument</title> </head> <body> <h1>hallo!</h1><p>dies ist mein erstes HTML-Dokument<//p> <footer><address>jens Mustermann, jens@mustermann.de </address></footer> </body></html> Slide 20

21 Vorteile des Einsatz von CSS Klare Trennung von Struktur/Inhalt und Erscheinungsbild ermöglicht das Management des Erscheinungsbildes einer Website unabhängig vom Inhalt CSS ermöglicht über den die gezielte Anwendung bestimmter Stildefinitionen für verschiedene Ausgabegeräte, bspw.: Screen für die Ausgabe auf Computerbildschirmen (Standard) Handheld für die Ausgabe auf Smartphones mit kleinen Displays Print für Ausgabe auf Druckern Braille für die Ausgabe mit Braille-Zeilen für blinde Website-Besucher In CSS3 kann bei aktuellen Browsern auch die Schriftart als Datei referenziert werden um eine 100% korrekte Wiedergabe der Website zu gewährleisten Slide 21

22 HTML und CSS in Kombination Columns.html <!DOCTYPE html> <html> <head> <style screen { p { column-count: 3; } handheld { p { column-count: 1; } } </style> <meta charset="utf-8"> Beispiel</ title> </head> <body> <p>[...]</p> </body></html> Achtung: Einige CSS3 Funktionen sind auch in aktuellen Browsern noch nicht verfügbar Slide 22

23 Selektive Stildefinitionen CSS-Stildefinitionen können auf unterschiedliche Weise für bestimmte HTML-Elemente definiert werden: Selektor Ausgewählte Gruppe Beispiel * Die Zuweisung gilt für alle HTML- Elemente im Dokument * { background-color: gray; } Der Name des jeweiligen HTML- Elements HTML-Elemente mit einem bestimmten Attributwert des Attributs class Gezieltes HTML-Element mit einem bestimmten Attributwert des Attributs id Die Zuweisung gilt für alle Elemente des jeweiligen Namens Die Zuweisung gilt für alle HTML- Elemente die der jeweiligen Klasse angehören Die Zuweisung gilt nur für das einmalig vorkommende HTML- Element mit der jeweiligen ID h1, h2 { font-style: italic; }.fett { font-weight: bold; } #navigation { border: 1px solid black; } Darüber hinaus sind auch Kombinationen der genannten Varianten möglich. Slide 23

24 Literatur Bücher: Stefan Münz, Clemens Gull HTML5 Handbuch ISBN-10: , ISBN-13: Online unter Web: Slide 24

25 Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Saarland University, Germany Univ.-Prof. Dr.-Ing. Wolfgang Maass