Web Technologien – HTML & CSSiss.uni-saarland.de/workspace/documents/wt_1_html_css.pdf · Univ.-Prof. Dr.-Ing. Wolfgang Maass 25.10.11 Slide 4 Organisation • Prüfungsmodalitäten:

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

Univ.-Prof. Dr.-Ing. Wolfgang Maass

25.10.11 Slide 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)


25.10.11 Slide 3

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 ([email protected]) und

Julian Eichhoff ([email protected]) •  Abgabe von Übungen ermöglicht das Sammeln von Bonuspunkten •  Übungsanmeldung per E-Mail mit Name und Matrikelnummer an

[email protected] •  Download einer Softwareumgebung für die Übungen unter

http://iss.uni-saarland.de/de/teaching/modules/wt/


25.10.11 Slide 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


25.10.11 Slide 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


25.10.11 Slide 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


25.10.11 Slide 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


25.10.11 Slide 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


25.10.11 Slide 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

<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>

mySite1.html


25.10.11 Slide 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

<!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, [email protected]</address> </footer> </body> </html>

mySite2.html


25.10.11 Slide 11


<!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, [email protected]</address> </footer> </body> </html>

mySite2.html


25.10.11 Slide 12

Besondere Regeln bei HTML

•  Kommentare die vom Browser nicht interpretiert werden sollen, werden mit  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:

•  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

< < lower than > > greater than & & Ampersand

<h1>Überschrift</h1>  <p>Zwei Leerstellen in folge: &nsbp;... und dann ein Zeilenumbruch. <br/> 5 < 10 <br/> Dies eine neue Zeile innerhalb des Absatzes mit Umlauten: ä, ö, ü </p>

mySite3.html


25.10.11 Slide 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 Such- maschinen 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

<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>

mySite4.html


25.10.11 Slide 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

<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>

mySite5.html


25.10.11 Slide 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> Zubereitung: <ol> <li>Vorbereitung <ol> <li>Zwiebeln schälen</li> <li>Gemüse putzen</li> </ol> </li> <li>[...]</li> </ol>

mySite6.html Zutaten: •  Zwiebeln •  Gemüse Zubereitung: 1. Vorbereitung

1. Zwiebeln schälen

2. Gemüse putzen


25.10.11 Slide 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

<figure> <figcaption>Martin und ich beim biken</figcaption> <img src="biken.png" width="335" height="448"/> </figure>

mySite7.html


25.10.11 Slide 17


<!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>

mySite2.html


25.10.11 Slide 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

Klicken Sie hier um zu <a href="http://www.google.de/" target="_blank“>Google</a> zu wechseln.

mySite8b.html

Klicken Sie hier um zur <a href="index.html"> Startseite</a> zu wechseln.

mySite8a.html


25.10.11 Slide 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:

•  Zur idealen Trennung zwischen Struktur/Inhalt und Erscheinungsbild sollte stets die erste Variante bevorzugt werden

Die Definitionen liegen in einer separaten CSS-Datei und werden im HTML-Dokument referenziert

<head><link rel="stylesheet" type="text/css" href="styles.css"/></head>

Die Definitionen werden direkt im <head> des HTML-Dokuments beschrieben

<head><style type="text/css">[...]</style></head>

Die Definitionen werden direkt in einem HTML-Element beschrieben <h1 style="[...]">Überschrift</h1>


25.10.11 Slide 20

HTML und CSS in Kombination

body { font-family: sans-serif; } h1 { color: red; font-size: 22px; } p { font-size: 16px; }

myStyles1.css

<!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, [email protected] </address></footer> </body></html>

mySite9.html


25.10.11 Slide 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 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 Slide 22

HTML und CSS in Kombination

<!DOCTYPE html> <html> <head> <style type="text/css"> @media screen { p { column-count: 3; } } @media handheld { p { column-count: 1; } } </style> <meta charset="utf-8"> <title>CSS @media Beispiel</title> </head> <body> <p>[...]</p> </body></html>

Columns.html

Achtung: Einige CSS3 Funktionen sind auch in

aktuellen Browsern noch nicht verfügbar


25.10.11 Slide 23

Selektive Stildefinitionen

CSS-Stildefinitionen können auf unterschiedliche Weise für bestimmte HTML-Elemente definiert werden:

Darüber hinaus sind auch Kombinationen der genannten Varianten möglich.

Selektor Ausgewählte Gruppe Beispiel

* Die Zuweisung gilt für alle HTML-Elemente im Dokument * { background-color: gray; }

Der Name des jeweiligen HTML-Elements

Die Zuweisung gilt für alle Elemente des jeweiligen Namens h1, h2 { font-style: italic; }

HTML-Elemente mit einem bestimmten Attributwert des Attributs „class“

Die Zuweisung gilt für alle HTML-Elemente die der jeweiligen Klasse angehören

.fett { font-weight: bold; }

Gezieltes HTML-Element mit einem bestimmten Attributwert des Attributs „id“

Die Zuweisung gilt nur für das einmalig vorkommende HTML-Element mit der jeweiligen ID

#navigation { border: 1px solid black; }


25.10.11 Slide 24

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/


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

Documents

Web Technologien – HTML & CSSiss.uni-saarland.de/workspace/documents/wt_1_html_css.pdf · Univ.-Prof. Dr.-Ing. Wolfgang Maass 25.10.11 Slide 4 Organisation • Prüfungsmodalitäten: