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 8Grundsä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 9Grundstruktur 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 10Grundstruktur 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 11Besondere 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 12Der -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 14Listen 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 15Bilder/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 16Grundstruktur eines HTML-Dokuments
mySite2.html
Bilder in HTML
Bildergalerie
Martin und ich beim
biken
25.10.11 Univ.-Prof. Dr.-Ing. Wolfgang Maass Slide 17Verlinkungen 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 ZielCascading 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 19HTML 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 20Vorteile 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 21HTML 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 22Selektive 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 23Literatur 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
