HTML Die Web Auszeichnungssprache - ?· Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das…

  • View
    213

  • Download
    0

Embed Size (px)

Transcript

  • Prof. Dr. Nikolaus Wulff

    HTMLDie Web AuszeichnungsspracheErstellung von statischen HTML Seiten

  • Prof. Dr. Nikolaus Wulff Informatik II 2

    Agenda Html

    HTTP und HTML Einfache HTML Seiten erstellen Tabellen, Layers und Frames Eingabe Formulare

  • Prof. Dr. Nikolaus Wulff Informatik II 3

    HTTP und HTML

    Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose Kommunikation, die auf TCP/IP basiert.

    Die ausgetauschten Nachrichten sind mit der HyperText Markup Language (HTML) formatiert.

    Ein Browser fordert mittels der HTTP GET Methode ein Dokument vom Webserver an, dieser schickt es dann an den Client zurck.

  • Prof. Dr. Nikolaus Wulff Informatik II 4

    Standard HTML

    Browser Web-Server X.html

    1: get X.html 2: Datei lesen

    X.html3:

    + einfache Sprache (HTML) nur statische Informationen & Verknpfungen

    GET http://www.apache.org:80/documents/X.html

    Methode Protokoll Server DNS + Port symbolischer Pfad Dokument

  • HTTP Request

  • Prof. Dr. Nikolaus Wulff Informatik II 6

    HTML Die HyperText Markup Language ist eine vom W3

    Konsortium standardisierte Auszeichnungssprache, die mit Hilfe von SGML (Standard Generalized Markup Language) definiert wurde.

    Sie hat die Aufgabe bestimmte logische Bestandteile eines Dokumentes, wie z.B. berschriften, Textabstze, Tabellen, Listen etc., zu beschreiben.

    Die Auszeichnung geschieht mittels spezieller Befehle, den sogenannten (Markup) Tags. Markup-Tags sind nicht case sensitiv.

    Web-Browser interpretieren/parsen diese Tags und stellen entsprechend den Inhalt des Dokuments dar.

    Modernes XHTML gengt den XML Anforderungen.

  • Prof. Dr. Nikolaus Wulff Informatik II 7

    HTML Die Tags werden durch spitze Klammern markiert und

    kommen fast immer paarweise als einleitender und abschlieender Tag vor. Beispiel: Kennzeichnung einer berschrift der Gre 1 und 2:

    HTML-berschrift 1 : HTML-berschrift 1 HTML-berschrift 2 : HTML-berschrift 2

    Standard Formatierungsbefehle fr Fett- oder Kursivdruck werden durch die Tags und markiert. Unterstrichenen Text liefert das Tag .

    Tags knnen ineinander verschachtelt werden:HTML HTML-berschrift 1 Ansicht HTML-berschrift 1

  • Prof. Dr. Nikolaus Wulff Informatik II 8

    HTML Steuer/Sonderzeichen Viele Zeichen drfen im HTML Dokument nicht

    vorkommen, da diese dann flschlich als HTML Anweisungen vom Browser interpretiert werden: < und > dienen als Markup-Begrenzer, um sie im Text zu

    verwenden werden sie als < und > geschrieben. & ist Steuerzeichen, zur Darstellung & verwenden. Deutsche Umlaute werden im Text geschrieben als

    = und = = und = etc.

    Eine sehr gute Hilfe und bersicht mit vielen Tips und Tricks bietet das Tutorial SelfHtml, das im Internet (http://de.selfhtml.org) zu finden ist.

  • Prof. Dr. Nikolaus Wulff Informatik II 9

    Aufbau eines Dokuments

    Html Beispiel Eine Html Beispiel SeiteHier kommt der Text der Seite ...

    Ein HTML Dokument gliedert sich in zwei Teile, dem Kopf (Head) und dem eigentlichen Krper (Body):

  • Prof. Dr. Nikolaus Wulff Informatik II 10

    Beispiel "Hello World" per HTML Seite.

    Erzeugen einer neuen Html-Seite HelloWorld.html Verwenden der Tags

    , , , und

    Leerzeichen und Zeilenumbrche werden vom Web-Browser ignoriert. Entscheidend ist das Layout per Markup-Tags.

    Lokaler Test der Seite in einem Web-Browser. Deployment in einem Web-Container, z. B. dem

    Apache-Server oder den Internet Information Server (IIS) von Microsoft.

  • Prof. Dr. Nikolaus Wulff Informatik II 11

    Lsung

    Hello World Hello World

  • Prof. Dr. Nikolaus Wulff Informatik II 12

    Einige HTML TagsType Tag

    Verweis gehe zu berschrift ..., ..., .... ...Zeilenumbruch
    Horiz. Linie Liste ... , ..., ...Listeintrag ... , ......

    Tabelle ...

    Tabellen-berschrift

    ...

    Tabellen-eintrag

    ...

    Tabellenreihe ...

    Ebene ...

  • Prof. Dr. Nikolaus Wulff Informatik II 13

    Beispiel: Listen Erproben Sie die Erstellung einer Liste.

    Erzeugen Sie eine neue HtmlSeite Liste.html Erstellen Sie wieder eine Standardseite mit Head

    und Body. Verwenden Sie die Tags

    ,, fr Standardlisten und ,, fr Definitionslisten Trennen Sie die Listen mit dem Tag

    Testen Sie die Seite mit dem Web-Browser.

  • Prof. Dr. Nikolaus Wulff Informatik II 14

    LsungLists List 1 Item 1 Item 2 Definitions List 3 Def 1 Definition 1 Def 2 Definition 2

  • Prof. Dr. Nikolaus Wulff Informatik II 15

    HTML Verweise Eine der wichtigsten Eigenschaften von HTML ist es

    Verweise (Hyperlinks) innerhalb eines Dokumentes zu definieren. Diese knnen zu anderen Stellen im Dokument fhren oder aber auch zu Seiten irgendwo im World Wide Web. Das Schema ist im Prinzip immer gleich Verweistext.

    Anstatt eines Verweistextes kann auch eine Grafik eingebunden werden:

    . Die Abkrzungen A und HREF stehen fr Anchor

    und Hypertextreferenz.

  • Prof. Dr. Nikolaus Wulff Informatik II 16

    HTML Verweise (II) Das Verweisziel kann fast alles sein:

    eine Stelle innerhalb der gleichen HTML-Datei: Kapitel 1.

    eine andere (HTML)-Datei im gleichen Projekt (Ordner): Andere Datei.

    eine absolute WWW-Adresse: Sun Java Page.

    eine FTP-, Gopher-, Telnet-, oder Newsgroup-Adresse eine Email-Adresse:

    NWulff eine lokale Datei:

    Start-Datei.

  • Prof. Dr. Nikolaus Wulff Informatik II 17

    Beispiel: Index.html Erstellen einer Index Seite.

    Erzeugen der Html-Seite Index.html Schema wieder mit Head und Body. Verweisen von dieser Seite aus auf die bereits

    fertiggestellten Seiten HelloWorld und List.html Verwenden einer Liste fr den Index Verwenden des Tag fr die Links

    Testen Sie die Seite mit Web-Browser Analog lsst sich so die komplette (statische)

    Struktur einer Web-Site durch verlinkten innerhalb der Index.html abbilden...

  • Prof. Dr. Nikolaus Wulff Informatik II 18

    Lsung

    HtmlSchulung InhaltHtmlSchulung Index HelloWorld List Beispiel

  • Prof. Dr. Nikolaus Wulff Informatik II 19

    Tabellen Das Tag leitet Tabellen ein. Die einzelnen Zeilen werden durch markiert, die Spalten / Daten durch gekennzeichnet. Fr die Spaltenberschriften wird verwendet.

    1 2 3 4

    1.1

    2.1

    3.1

    1.2

    2.2

    3.2

    1.3

    2.3

    3.3

    1.4

    2.4

    3.4

  • Prof. Dr. Nikolaus Wulff Informatik II 20

    Attribute Fast alle Html Elemente /Tags knnen mit

    Attributen versehen werden. Bei der Tabelle ist dies das Attribut border=0|1, das den Rahmen der Tabelle an- oder ausschaltet.

    Weitere Attribute sind valing und halign, die in den tr und td Elementen die horizontale und vertikale Ausrichtung steuern. Werte sind hier top, left, center, right, ...

    Zeilen und Zellen lassen sich mit den Attributen colspan und rowspan verbinden. Formatierung wird inzwischen meistens per Cascading

    Style Sheets (CSS) durchgefhrt.

  • Prof. Dr. Nikolaus Wulff Informatik II 21

    Beispiel Ansicht einer 4x4 Tabelle mit berschrift 1-4

  • Prof. Dr. Nikolaus Wulff Informatik II 22

    Beispiel: Zellen verbinden Erweiterung der Tabelle wie folgt:

    Verbinden der Zellen 2.3 und 2.4 Verbinden der Zellen 3.1 und 4.1, so dass die Ausgabe in Hhe der Reihe 3 bzw. 4 erfolgt.

  • Prof. Dr. Nikolaus Wulff Informatik II 23

    Lsung ...

    1 2 3 4 1.11.21.31.4

    2.12.22.3 - 2.4

    3.1 - 4.1

    3.23.33.44.24.34.4

  • Prof. Dr. Nikolaus Wulff Informatik II 24

    Weitere Formatierungen Die Attribute width und height steuern Hhe und Breite. Es knnen relative oder absolute Gren angegeben

    werden:

    Die Gren der einzelnen Spalten knnen mit einer einschlieenden colgroup vordefiniert werden.

    relativ absolut

    relativ 10%relativ 20%*: Rest d.h. 70%

  • Prof. Dr. Nikolaus Wulff Informatik II 25

    Beispiel Formatierung der Tabelle wie folgt:

    15%, 25%, 35%, *.

  • Prof. Dr. Nikolaus Wulff Informatik II 26

    Lsung... 15% 25% 35% * 1.11.21.31.4...

  • Prof. Dr. Nikolaus Wulff Informatik II 27

    Layout per Verschachtelung Sowohl Tabellen als auch Listen lassen sich

    ineinander verschachteln:...HtmlSchulung Index HelloWorld List Beispiel Tabellen Tabellen Beispiel Zellen verbinden Breiten definieren ... ...

  • Prof. Dr. Nikolaus Wulff Informatik II 28

    Beispiel: Verschachtelung Erzeugen zweier verschachtelter Tabellen:

    setzt den Farbhintergrund.

  • Prof. Dr. Nikolaus Wulff Informatik II 29

    Lsung

    1 2 3 4 1.11.21.31.42.12.2 ABC DEF GHI 3.13.24.14.24.34.4

  • Prof. Dr. Nikolaus Wulff Informatik II 30

    HTML Formulare HTML Forms bilden eine komfortable Mglichkeit

    Eingaben innerhalb einer HTML Seite zu gestalten. Die einzelnen Eingabeelemente und Buttons werden

    innerhalb eines ... Tags eingesetzt und dann mittels eines action=Methode Attribut an den Webserver bermittelt => MVC fr Web-Abwendungen.

    Mittels sogenannter EventHandler kann innerhalb eines JavaScripts auf der Client Seite das Formular vorher ausgewertet werden. =>Eingabevalidierung

    Als Beispiel werden Formulardaten fr Testzwecke an eine serverseitige Komponente geschickt, die die Eingabedaten als Tabelle aufbereitet an den Client