Vorlesung Internet-Medien - HTML CSS Formulare JavaScript - E-Learning-Plattform der ...

Vorlesung Internet-Medien
                       Teil II

    HTML
    Formulare
    CSS
    JavaScript

01.05.2020             Prof. Dr. K. Mehner-Heindl   1

Interaktive Webseiten
Entstehungsgeschichte (1)
    Internet seit 1969
            Vernetzung US-amerikanischer Universitäten/Institute
            Vorläufer seit ca. 1962 (Licklider et al.)
    Netzwerk von Großrechnern „ARPANET“
     (Advanced Research Projects Agency* Network)
            Noch 1971 überwiegend Email
            Ca. 1973 TCP/IP (Cerf et al.)
    Verschiedene Protokolle
            telnet, ftp, email, http, …
     (*ARPA 1985-1972, 1993-1996
     Defense ARPA, seit 1996 und 1972-1993)

01.05.2020                         Prof. Dr. K. Mehner-Heindl       2

Interaktive Webseiten
Entstehungsgeschichte (2)
    Ted Nelson, USA,1965
    „Einfache Benutzeroberflächen,
     um Computer für normale
     Menschen zugängig zu machen“
            Projekt Xanadu: Definition Hypertext
            Rechtemanagement, Mikropayment
            Bidirektionale Hyperlinks
            sehr komplex, nie fertig realisiert

01.05.2020                     Prof. Dr. K. Mehner-Heindl   3

Interaktive Webseiten
Entstehungsgeschichte (3)
    Tim Berners-Lee, CERN Genf,
     März 1989
    „Datenaustausch und Verknüpfung
     in der Forschergemeinde“
            erste Webseite (siehe info.cern.ch)
            Hypertext, später http, HTML,
             URL-Vorläufer
            WWW, Suchmaschine, Server, Browser, Editor
    Vorsitzender und Gründer World Wide Web
     Consortium (W3C, 1994)
    Professor MIT und Oxford

01.05.2020                     Prof. Dr. K. Mehner-Heindl   4

Interaktive Webseiten
Entstehungsgeschichte (4)
    Markups wurden früher als Hinweise für den
     Druckvorgang verwendet
    HTML zur statischen Webseitenerzeugung
            Ergänzt um CSS für Layoutbeschreibung
            HTML enthält Formulare
            Ergänzt um JavaScript für Interaktivität
    aktuell HTML5 und CSS3

01.05.2020                     Prof. Dr. K. Mehner-Heindl   5

Auszeichnungssprache HTML
    Hypertext Markup Language für Erstellung von Webseiten
    Ein HTML-Dokument
      Erzeugt Webseite mit formatierter Schrift, Bildern, Videos, Links

      Enthält sogenannten Quelltext mit:
                Auszeichnungen (Tags) zur Festlegung der Darstellung der Inhalte
                 und Texte
                Textbausteine in natürlicher Sprache
                Namen od. Adressen von Textdateien, Bilddateien, Webseiten
    Grammatik von HTML legt fest
      Reservierte Zeichen für die Tags etc. , &

      Menge von Tags,  und 

      Tag-Attribute

      Tag-Struktur innerhalb Webseite ist Schachtelung oder Folge
      Fließtext und Behandlung von Sonderzeichen

01.05.2020                             Prof. Dr. K. Mehner-Heindl                   6

Beispiele Hyperlinks/Formulare

01.05.2020           Prof. Dr. K. Mehner-Heindl   7

Wie arbeitet man mit HTML?

    Es ist immer nötig, den Quelltext zu erzeugen
            WYSIWYG = What you see is what you get
              Grafische Oberfläche, Menüs, Drag&Drop
              Automatische Erzeugung des Quelltextes
              Manchmal nicht ausreichend
            Syntaxgesteuerte Editoren
                Textbasiert, mit Syntax-Highlighting und –prüfung
    Simultane Nutzung beider Paradigmen
            Sogenannter Single-Source-Betrieb
            Ein Quelltext, zwei Ansichten/Änderungsmöglichkeiten
            Nachteil: erzeugter Quelltext nicht gut lesbar/änderbar

01.05.2020                            Prof. Dr. K. Mehner-Heindl     8

Logische Struktur und
Layoutregeln …
1. Logische Struktur eines Dokumentes
            Kapitel, Überschrift, Abschnitt, Aufzählung, Abbildung,
             Hervorhebung, …
2. wird umgesetzt in
            Stil (Layoutregeln)
3. Layoutstruktur (physische Darstellung)
            (Seite,) Textblock, Zeile, Schriftart/-schnitt/-grad,
             Ausrichtung, Farbe, …

Separierung von logischer Beschreibung eines
 Dokumentes und Stil-Beschreibung
01.05.2020                           Prof. Dr. K. Mehner-Heindl        9

… im World Wide Web

1. Logische Struktur eines Dokumentes und
            HTML-Quelltext
2. Stile
            Default
            Cascading Style Sheets (CSS)
            (Browser-spezifische Umsetzung)
3. werden vom Web-Browser dargestellt

    HTML5
            Vorgänger: 1.0, 2.0, 3.2, 4, XHTML 1.0, 1.1

01.05.2020                         Prof. Dr. K. Mehner-Heindl   10

Veranschaulichung des
    Separation of Concern
Logische Struktur           Stil                                  Physische Darstellung
                            fett,
z.B. Überschrift   2fach vergrößert,                     Überschrift
                            0.67facher Abstand
z.B. betont        kursiv                                betont
…                           …                                     …
=>                          =>                                    =>
Reines HTML                 Default oder CSS                      Darstellung im Browser

    01.05.2020                       Prof. Dr. K. Mehner-Heindl                            11

HTML5 Struktur einer Web-Seite
    
                    Nicht Case-sensitiv
                    Formal nicht erforderlich
                    Kein HTML-Tag
                    Beeinflusst das Verhalten der Browser
                    Keine Angabe der HTML Version
    
                    Angabe der Sprache empfohlen
                    Wird von Suchmaschinen genutzt
     … 
                    Vorspann (Kopfteil, engl. Header),
                     auf das gesamte Dokument bezogen
     … 
                    Dokumentkörper
    …

    01.05.2020                         Prof. Dr. K. Mehner-Heindl   12

HTML5 Tags

    Tags (Auszeichnungen) definieren Elemente
     einer Web-Seite und stehen in spitzen
     Klammern
            Anfangs- (< … >) und Ende-Tag ()
            Kleinbuchstaben empfohlen
            mit benannten Attributen und Wertzuweisung
             durch ="…",
            immer korrekt geschachtelt, z.B. Grundstruktur
             einer Web-Seite

01.05.2020                     Prof. Dr. K. Mehner-Heindl     13

Elementare Tags im Head

    Titel:                             … 
            erscheint in Kopfleiste des Fensters und bei Bookmarks
            In der Regel verpflichtend
    Zeichensatz:                       
            Singulärer Tag mit Schrägstrich innerhalb der Klammern
            UTF-8 Kodierung von Unicode-Zeichen (umfasst ASCII)
            1 bis 4 Byte lang
    Beschreibung der Inhalte:
     
            Singulärer Tag
            Festgelegter Wert für name, freiwählbare Angaben für content

01.05.2020                          Prof. Dr. K. Mehner-Heindl              14

Gesamter Head
                                   Korrekte Anführungszeichen
                    (Unicode Quotation Mark 0022)
  
       Ihr Seitentitel
       
             Überall dort, wo ein oder mehr Leerzeichen
  …          oder ein Zeilenwechsel stehen, können
                  beliebig viele Leerzeichen/ Tabstopps/
                  Zeilenwechsel stehen, mindestens eins davon.
(Anmerkung: So wird der Head für die Klausur auswendig gelernt.)

01.05.2020                 Prof. Dr. K. Mehner-Heindl              15

Erinnerung: Universal Character Set
Transformation Format UTF-8
    Im Unicode werden weltweit verwendete
     Zeichen in eine feste Reihenfolge gebracht.
            Die lateinischen Buchstaben befinden sich unter den ersten 128 Zeichen
             (wie im ASCII-Code). Die Umlaute finden sich erst ab der Stelle 196.

    In der Kodierung UTF-8 wird jede Position mit
     maximal 4 Byte kodiert (theoretisch sind 8 Bytes
     für über 4 Billionen Zeichen möglich)
            Die ersten 128 Zeichen werden durch 1 Byte (= 8 Bit) kodiert. Die Umlaute
             der deutschen Sprache benötigen 2 Byte.

    Wir verwenden UTF-8 im Editor und stellen
     UTF-8 im HTML-head ein, damit Umlaute
     korrekt dargestellt werden!

01.05.2020                               Prof. Dr. K. Mehner-Heindl                      16

Praktische Übungen

            Editor
                z.B. Notepad++, https://notepad-plus-plus.org/
                Kein Editor der rtf, doc, odt erzeugt
                JSFiddle, https://jsfiddle.net/
            Webbrowser
                Firefox, Chrome, Internet Explorer, Safari,…
            Umgang mit Datei-Explorer/Browser wird
             vorausgesetzt

01.05.2020                      Prof. Dr. K. Mehner-Heindl        17

Praktische Übung: In
Notepad++Kodierung prüfen

01.05.2020   Prof. Dr. K. Mehner-Heindl   18

Praktische Übung: In
Notepad++ HTML speichern

01.05.2020   Prof. Dr. K. Mehner-Heindl   19

Praktische Übung: 1. Aufgabe
1.     Erzeugen Sie mit einem Editor eine Datei mit Endung .html .
      a)     Wenn Sie einen Editor starten, zeigt er eine neue Datei an. Prüfen Sie
             zunächst das Encoding und ändern Sie es ggf. .
             Dies muss vor dem ersten Tippen und Speichern erfolgen!
             (Sie können diesen Schritt auch erstmal auslassen.)
      b)     Wählen Sie dann „Speichern unter“, um den Namen und die Endung
             der Datei zu ändern! Wählen Sie einen passenden Ordner, zeigen Sie
             *.* an und tippen Sie Dateinamen.html (ohne Umlaute, Leerzeichen,
             Sonderzeichen)
2.     Tippen Sie die Struktur der Webseite und den Head ab.
3.     Farbliche Vorhebungen erscheinen. Speichern Sie die Datei.
4.     Öffnen Sie den (Windows) Datei-Explorer. Gehen Sie zur Datei.
5.     Öffnen Sie Datei von dort mit einem Webbrowser (Edge, Safari).
       Die Webseite sollte leer sein, aber der Reiter ist beschriftet.

01.05.2020                                      Prof. Dr. K. Mehner-Heindl        20

Praktische Übung: 1. Aufgabe -
Lösung

01.05.2020          Prof. Dr. K. Mehner-Heindl   21

Elementare Tags im Body (1)

    Überschriften (engl. Heading)
      … , …  … 
            in 6 Hierarchiestufen

    Absätze (engl. Paragraph)
      … 

01.05.2020                           Prof. Dr. K. Mehner-Heindl   22

Elementare Tags im Body (2)

    nummerierte Listen (engl. ordered)
      … 

    Aufzählungslisten (engl. unordered)
      … 

    Listeneinträge (engl. list item)
      … 
            auch notwendig für geschachtelte Liste
            kein Text zwischen  oder  und jedem 
            ,  nicht innerhalb von  erlaubt
            mit CSS kann man Aussehen von Listen ändern
01.05.2020                        Prof. Dr. K. Mehner-Heindl    23

Logische Textauszeichnung, Sonderzeichen

    Tags zur logischen Textauszeichung beschreiben die logische
     Verwendung des eingeschlossenen Textelements, nur innerhalb
     von Paragraphen, Überschriften, Listeneinträgen etc. erlaubt
      … 
      … 

    Umsetzung in physische Darstellung durch Browser/CSS
     Betonung wird oft kursiv dargestellt
     Starke Betonung wird oft fett dargestellt

    Reservierte Zeichen sind Sonderzeichen:
     < > &   …

01.05.2020                     Prof. Dr. K. Mehner-Heindl           24

Seitenumbruch

    Zeilenumbruch, nur innerhalb von  etc. erlaubt
     
    horizontale Linien, nur außerhalb von  erlaubt
     
    generisches Blockelement
      … 
    generisches Inline-Element
      … 

01.05.2020                Prof. Dr. K. Mehner-Heindl     25

Kommentare

    Kommentare
     
      zeilenweise, Mehrzeilenkommentare

      Erläuterungen, die vom Browser ignoriert werden

01.05.2020                Prof. Dr. K. Mehner-Heindl     26

Praktische Übung: 2. Aufgabe
1.      Erstellen Sie eine Webseite unter Verwendung der
        bisherigen Tags und Sonderzeichen.

2.      Erstellen Sie dabei eine Liste als Unterliste einer anderen
        Liste. (Die Lösung hierzu gibt es erst, wenn Sie
        verschiedene Varianten probiert haben.)
        Beispiel:

01.05.2020                    Prof. Dr. K. Mehner-Heindl          27

Praktische Übung: 2. Aufgabe – Lösung zu 1. (1)

01.05.2020         Prof. Dr. K. Mehner-Heindl     28

Praktische Übung: 2. Aufgabe – Lösung zu 1. (2)

01.05.2020          Prof. Dr. K. Mehner-Heindl    29

Universalattribute
    Im Head haben Sie bereits spezielle Attribute und deren Aufbau
     benutzt, Attribute werden niemals durch Komma getrennt!
     lang="…" charset="…" name="…" content="…"

    mit jedem Tag verwendbar

            id="…"
             eindeutiger Identifikator für Element, z.B. als Sprungziel innerhalb
             einer Webseite

            title="…"
             Beschriftung für Element, sichtbar bei Maus-Hover als Tooltip

            style="…"
             Stilangaben für Element (für CSS3) (nicht klausurrelevant)

01.05.2020                            Prof. Dr. K. Mehner-Heindl               31

Verweise (Links)

    Web
            = Informationseinheiten + Verweise
            = „Hypertext“

    Verweis = Anker + Ziel
      … 
            umschließt Anker (Text, Bild, …) für Ursprung
            Attribut href="Ziel-URL" legt Ziel fest

01.05.2020                     Prof. Dr. K. Mehner-Heindl    32

Lokales Ziel eines Verweises

    absoluter Pfadname
            Zugriffspfad durch die gesamte Verzeichnishierarchie,
             beginnt immer mit /
            z.B. href="/d|/htmlFiles/index.htm"
             (/assets/images/logo.gif)

    relativer Pfadname
            bezieht sich auf das Verzeichnis, in dem das verweisende
             HTML-Dokument steht
            z.B. href="info.html"
             (hires/company.gif, ../../main/main.html)
            portabel!

01.05.2020                        Prof. Dr. K. Mehner-Heindl            33

Entferntes Ziel eines Verweises

    vollständige URL (Uniform Resource Locator)
     Protokoll://Rechnername/Pfad

            verschiedene Dienste (Protokolle)
            verschiedene Dokumenttypen (Dateiendungen)
            z.B. href="http://www.fh-offenburg.de/
             mi/mi.html"
            Sonderzeichen in URLs
                durch %ASCII-Code etwa %20 ( ), %3f (?), %2f (/)
                z.B. href="http://my.sys.de/
                 bad%20name%3f.html"

01.05.2020                          Prof. Dr. K. Mehner-Heindl      34

Verweisziel

    ist Element in einer Seite
            durch Verwendung der id des Elementes nach #
            z.B. href="mi.html#People"
            Case-sensitiv
            Verweisziel erscheint oben im Browser

01.05.2020                       Prof. Dr. K. Mehner-Heindl   35

Bilder
     Inline Images, d.h. nur innerhalb von Paragraphen,
      Überschriften etc. erlaubt
            Die Pixelzahl wird ohne Einheit angegeben
            Die Bildquelle ist ein lokaler/absoluter Pfad oder eine URL
     
     als Ursprung eines Verweises
             Bekannt als „Image Links“, „Clickable Images“
             durch Schachteln in Anchor-Tag

     Images als Verweisziel
             href mit lokaler Bilddatei oder URL für Bilddatei
01.05.2020                              Prof. Dr. K. Mehner-Heindl         36

Praktische Übung: 3. Aufgabe
1.      Erstellen Sie eine Webseite mit
                einem Bild (im selben Verzeichnis abspeichern)
                einem Hyperlink (z.B. auf die Hochschule)
                einem Text, der eingeblendet wird, wenn die Maus eine
                 Überschrift berührt.
2.      Ergänzen Sie einen Hyperlink, mit dem Sie
        an eine bestimmte Position der Seite
        springen (Attribut id)
3.      Verwenden Sie das Bild als Hyperlink

01.05.2020                       Prof. Dr. K. Mehner-Heindl          37

Praktische Übung: 3. Aufgabe - Lösung
(noch ohne Bild als Hyperlink…die Lösung steht weiter hinten im Skript)

                                                                 Wenn sich die Maus über
                                                                 der freie Fläche befindet,
                                                                    erscheint ein Text.

01.05.2020                          Prof. Dr. K. Mehner-Heindl                                38

Praktische Übung: 3. Aufgabe - Lösung

01.05.2020     Prof. Dr. K. Mehner-Heindl   39

Überprüfen von HTML-
Quelltexten
    W3C-Validator auf validator.w3.org
            Per File Upload
    Syntax-Überprüfung des DOCTYPE der Seite
    Falls Fehler vorhanden sind, schrittweise
     abarbeiten, denn oft verschwinden dann
     Folgefehler
    Hinweis: Der Validator bewertet auch HTML5-
     Seiten als richtig, in denen die Syntax nicht
     falsch, aber unvollständig ist. In der Klausur wird
     nur die vollständige Syntax als richtig bewertet.

01.05.2020                     Prof. Dr. K. Mehner-Heindl   40

Syntax-Übersicht
    Singuläre inhaltsleere Tags:
     
    Hyperlink:
     Ankertext

    Image als Hyperlink (auf ein lokales Image):
     
01.05.2020                                   Prof. Dr. K. Mehner-Heindl
                                                                          41

Architektur von Webanwendungen

   Minimale Bestandteile:
        Webbrowser auf einem Client-Rechner
        Webserver auf einem Internet-Server
        Verwendung des Hypertext-Transfer-Protocols (http)
        Statische Webseiten liegen auf dem Internet-Server

                     request (URL)                                Datenbankabfrage
    Browser
                     response (HTML)               Web-              Datensätze
                                                   server
    Client-Rechner
                                                                           Datenbank-Server
                                              Internet-Server
   Optional Generierung einer Webseite durch Skript oder
    Programm
   Optional Verbindung mit Datenbank und Anwendungen
01.05.2020                           Prof. Dr. K. Mehner-Heindl                         42

Hypertext Transfer Protocol
(Standard des WWW Consortium)

    Besteht aus den Nachrichten Request und Response
    Unterstützt von Webbrowser und Webserver
    Zustandslos, daher Cookies
    Nicht verschlüsselt

                              HTTP-Header
                         (Kodierung, Inhaltstyp,…)
                             Message-Body
             Web-               (Nutzdaten)
             browser                                               Webserver
                            Request-Nachricht

                            Response-Nachricht
                            Statusinformationen
         „Client“        Nutzdaten (HTML, CSS, …)                         „Server“

01.05.2020
                                             Prof. Dr. K. Mehner-Heindl              43

HTTP: Webseite anfordern

Request
 GET /mi/index.hmtl
 HTTP/1.1
 Host: hs-offenburg.de

                         Response

                         HTTP/1.1 200 OK
                         Date: …
                         Last-Modified: …
                         Content-Type: charset/UTF-8; …
                         Content-Length: …

Formulare in HTML
    Dateneingabe des Benutzers
      … 
            Attribute:
             method="post" (get) action="Skript-URL"

    UI-Elemente
     
      Attribute type="text" (password, radio,
       checkbox, submit, reset, button, file),
       name="Elementname", value="Wert",
       size="Breite", checked="checked"

01.05.2020                   Prof. Dr. K. Mehner-Heindl   45

Formulare (2)
         … 
         Attribute:
          name="Elementname"
          (name[]für Mehrfach-Auswahl-Listen)
          multiple ="multiple" size="sichtbare
          Einträge"
         … 
         Attribute value="Wert" selected="selected"

         … 
         Attribute name="Elementname" rows="1" (2,…)

          cols="1" (2,…)

01.05.2020                Prof. Dr. K. Mehner-Heindl    46

Übertragung mit get oder post

    
            Übertragung der Daten mit der URL
             http://www.seite.de?eintrag1=value1&text1=Das+ist+Text.&...
            für Benutzereingaben, um nachfolgende Seite auszuwählen, z.B.
             Zugverbindungsanfrage
            nicht beliebig lang
    
            Übertragung der name-value Paare am Ende der Nachricht,
             im sogenannten Message-Body
            falls URL sonst zu lang wird, oder
            für Benutzereingaben, die Zustand in einer Datenbank verändern,
             z.B. Buchung

01.05.2020                          Prof. Dr. K. Mehner-Heindl            47

HTTP Beispiele

 GET /php/post-query.php?studium=mwplus&semester=1
 HTTP/1.1
 Host: info.mi.hs-offenburg.de

 POST /php/post-query.php HTTP/1.1
 Host: info.mi.hs-offenburg.de
 Content-Length: 24
 studium=mwplus&semester=1

                       HTTP/1.1 200 OK
                       Date: …
                       Last-Modified: …
                       Content-Type: charset/UTF-8; …
                       Content-Length: 100
                       Herzlich Willkommen zum 1. Sem. MW+

01.05.2020
                                       Prof. Dr. K. Mehner-Heindl   48

Praktische Übung: 4. Aufgabe
Erstellen Sie folgende Webseite
(es handelt sich um ein Formular)!

Verwenden Sie folgende URL
als Wert für das Attribut
action=“http://info.mi.hs-
offenburg.de/formGetPost.php“

Sie können die Antwort nur
im VPN der HSO testen
(VPN Cisco Client installieren).

01.05.2020                           Prof. Dr. K. Mehner-Heindl   49

Praktische Übung: 4. Aufgabe - Lösung

01.05.2020      Prof. Dr. K. Mehner-Heindl   50

Praktische Übung: 4. Aufgabe - Lösung
HTML-Ausgabe des php-Skripts, das bei „bestellen“ mit den Name-Value-
Paaren aus den Formularfeldern aufgerufen wird:

01.05.2020                      Prof. Dr. K. Mehner-Heindl              51

Gestaltungshinweise zu Formularen

    Pro Zeile 1 Eingabefeld
            Ausnahme Radiobutton
            Empfohlen: Beschriftung oberhalb
            Keine Vorauswahl für Zustimmung zu AGB!
    Wenige Elemente, sonst 2 Formulare

    Sinnvolle Variablennamen und Wertenamen
    Passwort mit post übertragen (und verschlüsseln!)

    Nach Submit-Button Benutzer-Feedback
    Mit JavaScript Eingaben prüfen
    Mit sinnvollen Eingaben testen

01.05.2020                       Prof. Dr. K. Mehner-Heindl   52

Zusammenfassung Formulare

    Einfache interaktive Webseiten
            Standardverhalten
            Standardgestaltung

    Funktion von Formularen
            Eingabe der Daten auf der Client-Seite
            Übertragen der Daten zum Skript auf einem Server
            Nicht abgedeckt:
                Server muss Formulardaten verarbeiten
                Server muss Feedback-Seite für Client erzeugen

01.05.2020                           Prof. Dr. K. Mehner-Heindl   53