Web Technologien - HTML & CSS - Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
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
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) 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 2
Organisation • Vorlesung: • Mittwoch, 8:00 – 10:00 Uhr; Raum HS 021, Geb. B4 1 • Vorlesungsfolien werden vor dem jeweiligen Termin freigeschalten unter http://iss.uni-saarland.de/de/teaching/modules/wt/ • Übung: • Freitag, 10:00 – 12:00 Uhr; CIP1 • 8 Übungen in WS 11/12 (Termine siehe Kalender unter http://iss.uni-saarland.de/de/teaching/modules/wt/) • 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 E-Mail mit Name und Matrikelnummer an iss.webtechnologien@googlemail.com • Download einer Softwareumgebung für die Übungen unter http://iss.uni-saarland.de/de/teaching/modules/wt/ 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 3
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 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 4
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 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 5
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 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 6
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 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 7
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 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 8
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 mySite1.html zur Einhaltung der Struktur klammern kann, Dies ist eine Überschrift aber nicht muss (à XHTML5 in Vorlesung XML) Dies ist ein • Tags können Attribute haben, welche den Absatz, welcher mehrere Tag im weitere Informationen erweitern Zeilen umfassen • Struktur und Layout werden vom Browser kann.Und dies eine neue verarbeitet und der Inhalt dargestellt Zeile innerhalb des Absatzes. Noch eine neue Zeile. 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 9
Grundstruktur eines HTML-Dokuments • HTML-Tags werden zur mySite2.html Strukturierung verschachtelt • Der Tag „DOCTYPE“ ist in der ersten Zeile bei HTML5 zwingend Erstes HTML-Dokument • Das komplette Dokument ist in den Tag „html“ eingeschlossen Hallo! • Innerhalb des Tags „head“ sind Dies ist mein erstes HTML- Meta-Informationen zum Dokument Dokument abgelegt Jens Mustermann, jens@mustermann.de • Innerhalb des Tags „body“ ist die komplette Struktur und der Inhalt des Dokumentes abgelegt 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 10
Grundstruktur eines HTML-Dokuments mySite2.html Erstes HTML-Dokument Hallo! Dies ist mein erstes HTML- Dokument Jens Mustermann, jens@mustermann.de 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 11
Besondere Regeln bei HTML mySite3.html • Kommentare die vom Browser nicht interpretiert werden sollen, Überschrift werden mit umklammert • Leerbereiche (sog. Whitespaces) und Zeilenumbrüche werden vom Browser ignoriert, können aber durch bzw. erzwungen werden Zwei Leerstellen in • Bestimmte Zeichen sind für den Syntax reserviert, daher folge: &nsbp;... müssen diese ebenfalls im Text anders notiert werden: und dann ein Zeilenumbruch. < < lower than > > greater than 5 < 10 & & Ampersand Dies eine neue Zeile • Um sicher zu stellen, dass Umlaute und Sonderzeichen über innerhalb des den ASCII-Syntax hinaus korrekt kodiert werden, muss die Absatzes mit Datei im selben Standard kodiert sein, wie es im DOCTYPE Umlauten: ä, ö, ü angegeben ist; der Standard ist hierbei UTF-8 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 12
Der -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 mySite4.html von Meta-Informationen für den Website von Jens M. Webserver, Browser und Such- maschinen enthalten, bspw.: im Dokument
Überschriften und Absatze im • Über die Tags „h1“ bis „h6“, kann mySite5.html das Dokument mittels Überschriften strukturiert werden • Absätze werden durch Mein Ausflug zum See „p“ (Paragraph) definiert und können Es war einmal [...] mittels der Tags „article“ und „section“ optional semantisch annotiert werden Mein neues Saxophon • Die Überschrift einer „section“ kann Wie ihr ja wisst habe ich [...] innerhalb oder direkt über dem Tag Zum Ende will ich [...] „section“ definiert werden • Über die Tags „footer“, „header“, sowie „nav“ können sichtbare Fuß- Geschrieben von Jens und Kopf-, sowie Navigationsbereiche einer Website deklariert werden 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 14
Listen im < mySite6.html • Mittels der Tags Zutaten: Zutaten: „ol“ (ordered list) und „ul“ (unordered list) können Zwiebeln • Zwiebeln Listen erstellt werden Gemüse • Gemüse • Jedes Element innerhalb einer Liste wird mittels des Zubereitung: Tags „li“ (list item) Zubereitung: beschrieben Vorbereitung 1. Vorbereitung • Durch das Verschachteln von neuen „ol“ oder „li“ Zwiebeln schälen 1. Zwiebeln Tags innerhalb von Gemüse putzen schälen Listenelementen können 2. Gemüse putzen auch tiefer geschachtelte Listen erstellt werden [...] 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 15
Bilder/Grafiken im • Ü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 mySite7.html Alternativtext und eine gewünschte Martin und ich Anzeigegröße angegeben werden beim biken • Eingegliedert in einen Tag „figure“ kann mittels „figcaption“ das Bild/ die Grafik beschriftet werden 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 16
Grundstruktur eines HTML-Dokuments mySite2.html Bilder in HTML Bildergalerie Martin und ich beim biken 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 17
Verlinkungen im mySite8a.html • Über den Befehl „a“ (anchor) können Klicken Sie hier um zur Verknüpfungen auf andere Dokumente beschrieben werden Startseite zu wechseln. • 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“ mySite8b.html Tags verlinkt auf das im Parameter „href“ Klicken Sie hier um zu angegebene Ziel
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- Die Definitionen werden direkt im des [...] Die Definitionen werden direkt in einem HTML- Überschrift Element beschrieben • Zur idealen Trennung zwischen Struktur/Inhalt und Erscheinungsbild sollte stets die erste Variante bevorzugt werden 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 19
HTML und CSS in Kombination myStyles1.css body { font-family: sans-serif; } h1 { color: red; font-size: 22px; } p { font-size: 16px; } mySite9.html Erstes HTML-Dokument Hallo!Dies ist mein erstes HTML-Dokument Jens Mustermann, jens@mustermann.de 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 20
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 Parameter @media 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 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 21
HTML und CSS in Kombination Columns.html @media screen { p { column-count: 3; } } @media handheld { p { column-count: 1; } } CSS @media Beispiel Achtung: Einige CSS3 Funktionen sind auch in [...] aktuellen Browsern noch nicht verfügbar 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 22
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- * * { background-color: gray; } Elemente im Dokument Der Name des jeweiligen HTML- Die Zuweisung gilt für alle Elemente h1, h2 { font-style: italic; } Elements des jeweiligen Namens HTML-Elemente mit einem Die Zuweisung gilt für alle HTML- bestimmten Attributwert des Elemente die der jeweiligen Klasse .fett { font-weight: bold; } Attributs „class“ angehören Gezieltes HTML-Element mit einem Die Zuweisung gilt nur für das #navigation bestimmten Attributwert des einmalig vorkommende HTML- { border: 1px solid black; } Attributs „id“ Element mit der jeweiligen ID Darüber hinaus sind auch Kombinationen der genannten Varianten möglich. 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 23
Literatur Bücher: • Stefan Münz, Clemens Gull HTML5 Handbuch ISBN-10: 3645600795, ISBN-13: 978-3645600798 Online unter http://webkompetenz.wikidot.com/docs:html-handbuch Web: • http://info.cern.ch/ • http://www.w3.org/ • http://www.whatwg.org/ • http://www.w3.org/TR/html5/ • http://www.selfhtml.org/ 25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 24
Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Saarland University, Germany Univ.-Prof. Dr.-Ing. Wolfgang Maass
Sie können auch lesen