Web Technologien - HTML & CSS - Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics

Die Seite wird erstellt Stefan Preuß
 
WEITER LESEN
Web Technologien - HTML & CSS - Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics
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
Web Technologien - HTML & CSS - Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics
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
Web Technologien - HTML & CSS - Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics
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
Web Technologien - HTML & CSS - Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics
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
Web Technologien - HTML & CSS - Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics
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
Web Technologien - HTML & CSS - Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics
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
Web Technologien - HTML & CSS - Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics
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
Web Technologien - HTML & CSS - Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics
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