HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und...

50
Prof. Dr. Nikolaus Wulff HTML Die Web Auszeichnungssprache Erstellung von statischen HTML Seiten

Transcript of HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und...

Page 1: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff

HTMLDie Web Auszeichnungssprache

Erstellung von statischen HTML Seiten

Page 2: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 2

Agenda Html

• HTTP und HTML

• Einfache HTML Seiten erstellen

• Tabellen, Layers und Frames

• Eingabe Formulare

Page 3: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

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 zurück.

Page 4: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 4

Standard HTML

Browser Web-ServerX.html

1: get X.html 2: Datei lesen

X.html3:

+ einfache Sprache (HTML)– nur statische Informationen & Verknüpfungen

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

Methode Protokoll Server DNS + Port symbolischer Pfad Dokument

Page 5: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

HTTP Request

Page 6: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

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, Textabsätze, 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“ genügt den XML Anforderungen.

Page 7: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 7

HTML

• Die Tags werden durch spitze Klammern markiert und kommen fast immer paarweise als einleitender und abschließender Tag vor. Beispiel: Kennzeichnung einer Überschrift der Größe 1 und 2:

– <H1>HTML-Überschrift 1 </H1>: HTML-Überschrift 1

– <H2>HTML-Überschrift 2 </H2>: HTML-Überschrift 2

• Standard Formatierungsbefehle für Fett- oder Kursivdruck werden durch die Tags <B> und <I> markiert. Unterstrichenen Text liefert das Tag <U> .

• Tags können ineinander verschachtelt werden:

HTML <H1><I>HTML</I>-Über<U>schrift</U> 1 </H1>

Ansicht HTML-Überschrift 1

Page 8: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 8

HTML Steuer/Sonderzeichen• Viele Zeichen dürfen im HTML Dokument nicht

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

verwenden werden sie als &lt; und &gt; geschrieben.

– & ist Steuerzeichen, zur Darstellung &amp; verwenden.

– Deutsche Umlaute werden im Text geschrieben als• ä = &auml; und Ä = &Auml;

• ö = &ouml; und Ö = &Ouml; 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.

Page 9: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 9

Aufbau eines Dokuments

<HTML>

<HEAD>

<TITLE>Html Beispiel</TITLE>

</HEAD>

<BODY>

<H1> Eine Html Beispiel Seite</H1>

Hier kommt der Text der Seite ...

</BODY>

</HTML>

• Ein HTML Dokument gliedert sich in zwei Teile, dem Kopf (Head) und dem eigentlichen Körper (Body):

Page 10: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 10

Beispiel

• "Hello World" per HTML Seite.– Erzeugen einer neuen Html-Seite »HelloWorld.html«

• Verwenden der Tags– <html>, <head>, <title>,<body> und <h1>

• Leerzeichen und Zeilenumbrüche 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.

Page 11: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 11

Lösung

<html> <head> <title>Hello World </title> </head> <body> <h1>Hello World</h1> </body></html>

Page 12: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 12

Einige HTML TagsType Tag

Verweis <A href=URL>gehe zu </A>

Überschrift <H1>...</H1>, <H2>...</H2>, .... <H6>...</H6>

Zeilenumbruch <BR>

Horiz. Linie <HR>

Liste <OL> ... </OL>, <UL> ...</UL>, <DL>...</DL>

Listeintrag <LI> ... </LI>, <DT>...</DT><DD>...</DD>

Tabelle <TABLE border=1> ... </TABLE>

Tabellen-überschrift

<TH> ...</TH>

Tabellen-eintrag

<TD> ... </TD>

Tabellenreihe <TR> ... </TR>

Ebene <DIV id=name> ... </DIV>

Page 13: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

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– <ol>,<ul>,<li> für Standardlisten und

– <dl>,<dt>, <dd> für Definitionslisten

– Trennen Sie die Listen mit dem <hr/> Tag

• Testen Sie die Seite mit dem Web-Browser.

Page 14: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 14

Lösung<html><head><title>Lists</title></head><body> <h1>List 1</h1> <ul> <li> Item 1 </li> <li> Item 2 </li> </ul><hr/> <h1>Definitions List 3</h1> <dl> <dt> Def 1 </dt><dd> Definition 1 </dd> <dt> Def 2 </dt><dd> Definition 2 </dd> </dl></body></html>

Page 15: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

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 können zu anderen Stellen im Dokument führen oder aber auch zu Seiten irgendwo im World Wide Web. Das Schema ist im Prinzip immer gleich <a href=“Verweisziel“>Verweistext</a>.

• Anstatt eines Verweistextes kann auch eine Grafik eingebunden werden:

<a href=“Verweisziel“><img src=“grafic.gif“/></a>.

• Die Abkürzungen »A« und »HREF« stehen für Anchor und Hypertextreferenz.

Page 16: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 16

HTML Verweise (II)

• Das Verweisziel kann fast alles sein: – eine Stelle innerhalb der gleichen HTML-Datei:

<A HREF=“#chap_1“>Kapitel 1</A>.

– eine andere (HTML)-Datei im gleichen Projekt (Ordner): <A HREF=“another.txt“>Andere Datei</A>.

– eine absolute WWW-Adresse: <A HREF=“http://java.sun.com“>Sun Java Page</A>.

– eine FTP-, Gopher-, Telnet-, oder Newsgroup-Adresse

– eine Email-Adresse:<A HREF=“mailto://[email protected]“>NWulff</A>

– eine lokale Datei: <A HREF=“file://c:/autoexec.bat“>Start-Datei</A>.

Page 17: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

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 für den Index

– Verwenden des <a href=...> Tag für die Links

• Testen Sie die Seite mit Web-Browser

• Analog lässt sich so die komplette (statische) Struktur einer Web-Site durch verlinkten innerhalb der Index.html abbilden...

Page 18: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 18

Lösung

<html><head><title>HtmlSchulung Inhalt</title></head><body><h1>HtmlSchulung Index</h1><ol><li> <a href="HelloWorld.html">HelloWorld</a></li><li> <a href="List.html">List Beispiel</a></li></ol></body></html>

Page 19: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 19

Tabellen

• Das <table> Tag leitet Tabellen ein.

• Die einzelnen Zeilen werden durch <tr> markiert,

• die Spalten / Daten durch <td> gekennzeichnet.

• Für die Spaltenüberschriften wird <th> verwendet.

<tr>

<tr>

<tr>

<tr>

</tr>

</tr>

</tr>

</tr>

<th> 1 </th> <th> 2 </th> <th> 3 </th> <th> 4 </th>

<td>1.1</td>

<td>2.1</td>

<td>3.1</td>

<td>1.2</td>

<td>2.2</td>

<td>3.2</td>

<td>1.3</td>

<td>2.3</td>

<td>3.3</td>

<td>1.4</td>

<td>2.4</td>

<td>3.4</td>

<table border='1'>

</table>

Page 20: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 20

Attribute

• Fast alle Html Elemente /Tags können 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) durchgeführt.

Page 21: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 21

Beispiel

• Ansicht einer 4x4 Tabelle mit Überschrift 1-4

Page 22: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

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 Höhe der Reihe 3 bzw. 4 erfolgt.

Page 23: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 23

Lösung ...<center><table border='1'>

<tr><th> 1 </th><th> 2 </th><th> 3 </th><th> 4 </th></tr><tr><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td></tr>

<tr><td>2.1</td><td>2.2</td><td colspan='2'>2.3 - 2.4</td></tr>

<tr><td rowspan='2' valign='bottom'>3.1 - 4.1</td>

<td>3.2</td><td>3.3</td><td>3.4</td></tr><tr><td>4.2</td><td>4.3</td><td>4.4</td></tr>

</table></center>

Page 24: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 24

Weitere Formatierungen

• Die Attribute width und height steuern Höhe und Breite.

• Es können relative oder absolute Größen angegeben werden:– <table width="100%" height="200">

• Die Größen der einzelnen Spalten können mit einer einschließenden colgroup vordefiniert werden.

<colgroup>

<col width="10%"/>

<col width="20%"/>

<col width="*" />

</colgroup>

relativ absolut

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

Page 25: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 25

Beispiel

• Formatierung der Tabelle wie folgt:– 15%, 25%, 35%, *.

Page 26: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 26

Lösung...<body><center><table border='1' width="100%" height="100%"><colgroup><col width="15%"><col width="25%"><col width="35%"><col width="*"></colgroup><tr><th> 15% </th><th> 25% </th><th> 35% </th><th> * </th></tr><tr><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td></tr>...

Page 27: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 27

Layout per Verschachtelung

• Sowohl Tabellen als auch Listen lassen sich ineinander verschachteln:

...<h1>HtmlSchulung Index</h1><ol><li> <a href="HelloWorld.html">HelloWorld</a></li><li> <a href="List.html">List Beispiel</a></li><li> Tabellen <ul> <li> <a href="Table.html">Tabellen Beispiel</a></li> <li> <a href="Table2.html">Zellen verbinden</a></li> <li> <a href="Table3.html">Breiten definieren</a></li> </ul> </li>... </ol>...

Page 28: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 28

Beispiel: Verschachtelung

• Erzeugen zweier verschachtelter Tabellen:– <table bgcolor="red"> setzt den Farbhintergrund.

Page 29: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 29

Lösung<table border='1' width="100%" height="100%">

<tr><th> 1 </th><th> 2 </th><th> 3 </th><th> 4 </th></tr><tr><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td></tr><tr><td>2.1</td><td>2.2</td><td rowspan="2" colspan="2" align="center" valign="center"> <table border='1' bgcolor="red" width="90%" height="90%"> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>D</td><td>E</td><td>F</td></tr> <tr><td>G</td><td>H</td><td>I</td></tr> </table></td></tr><tr><td>3.1</td><td>3.2</td></tr><tr><td>4.1</td><td>4.2</td><td>4.3</td><td>4.4</td></tr></table>

Page 30: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 30

HTML Formulare

• HTML Forms bilden eine komfortable Möglichkeit Eingaben innerhalb einer HTML Seite zu gestalten.

• Die einzelnen Eingabeelemente und Buttons werden innerhalb eines <FORM> ... </FORM> Tags eingesetzt und dann mittels eines action=„Methode“ Attribut an den Webserver übermittelt => MVC für Web-Abwendungen.

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

• Als Beispiel werden Formulardaten für Testzwecke an eine serverseitige Komponente geschickt, die die Eingabedaten als Tabelle aufbereitet an den Client zurückschickt.

• Das Servlet hat den Namen "mirror" => action="mirror"

Page 31: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 31

HTML - Controlls• HTML Formulare bieten die wichtigsten Kontrollelemente:

– Buttons• Image-, Radio-

• Submit- und Reset-Buttons

• sowie Checkbuttons

– Textfelder• Passwortfelder

• versteckte Felder

– Listboxen

• Java ähnliche „Layout-Manager“ lassen sich mittels Tabellen und ähnlichen Formatierungsmöglichkeiten erstellen.

Page 32: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 32

EingabeelementeType Tag

Button <input type=“button“ name=... value="..."><button type=“button“ name=... value=... >

CheckButton <input type=checkbox name=... value="...">

RadioButton <input type=radio name=... value="...">

Textfield <input type=text name=... size=30 value="">

Textarea <textarea name=... rows=10 cols=50 > ...</textarea>

Choice <select name=... size=1><option> Option1<option> ....</select>

VerstecktesFeld

<input type=“hidden“ name=... value=... />

Passwort Feld <input type=“password“ name=... value=... />

Die wichtigsten Formular Eingabefelder

Page 33: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 33

Beispiel: Email Formular<FORM action=“mailto:[email protected]“ method=post>Ihr Name: <INPUT type=text size=20 name= “user“ />Ihre Meinung: <TEXTAREA name= “meinung“ rows=20 cols=20>

</TEXTAREA> <INPUT type=submit /><INPUT type=reset />

</FORM>

Page 34: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 34

Beispiel: Logon Dialog

• Entwickelung eines Logon Dialog.– <form action="mirror" method="post">

– Abgefragt werden Benutzer (name=user) und Passwort (name=password).

– Es gibt einen Submit und einen Reset Button

topsecret

Page 35: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 35

Antwort vom Mirror Servlet

• Das Mirror Servlet liefert den übergebenen Benutzernamen und das Passwort des Formulars:

Page 36: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 36

Lösung ...<center><table border="0" bgcolor="#cfcfcf" cellpadding="5">

<form action="mirror" method="post"><tr> <td> Name: </td> <td> <input type="text" name="user" /></td></tr><tr> <td> Password: </td> <td> <input type="password" name="password" /></td></tr><tr> <td> <input type="submit"/></td> <td> <input type="reset" /></td></tr> </form>

</table></center>...

Unter den Schlüsseln „user“ und „password“ werden die Eingabenabgelegt und serverseitig ausgelesen...

Page 37: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 37

Falsche Parameter• Web-Anwendungen können sich nicht darauf ver-

lassen, dass die Daten vom Formular kommen.

• Die (Key,Value)-Paare können auch direkt in der Kommandozeile des Web-Browsers (oder einem Socket) angegeben werden per ? und & Operator.

– ? kennzeichnet das erste Argument, & trennt beliebig viele weitere (Key,value)-Paare.

• D.h. client-seitige Validierung, z. B. per JavaScript kann umgangen werden und reicht nicht aus, Benutzereingaben können immer vorgetäuscht sein.

http://server/mirror?user=nwulff&password=topsecret

Page 38: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 38

Cascading Style Sheets

• Die Formatierung der einzelnen Elemente einer Html Seite kann explizit mittels spezieller Attribute vorgenommen werden. Beispiele sind Farbe, Font, Höhe und Breite etc.

• Dies bedingt jedoch einen erheblichen manuellen Anpassungsaufwand wenn das gesamte Design eines Webauftritts geändert werden soll.

• Einfacher ist die Formatierung getrennt vom Inhalt der Html Seiten zu halten. Hierzu dienen Cascading Style Sheets (CSS).

Page 39: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 39

CSS und HTML

• CSS Definitionen können im Kopfbereich einer Html Seite direkt deklariert werden

• oder in einer externen Datei, die im Kopfbereich referenziert wird.

<head> <title>CSS Include</title> <style type="text/css"> <!-- h1 {font-family:Arial; font-size:32pt;color:blue;} //--> </style></head>

<head> <title>CSS Reference</title> <link rel="stylesheet" type="text/css" href="mystyle.css"></head>

Page 40: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 40

Einheitliches Format• Statt der Formatierung im jeweiligen Element

wird dann ein einheitliches Format für alle Elemente des selben Typs vereinbart. Der Typ wird im Element als class="typname" kenntlich gemacht:

<table bgcolor="lightblue">

<style type="text/css"><!--table.colorTable { background-color:#lightblue; }//--></style></head>...

Beispiel mit CSS Explizite Formatierung

<table class="colorTable">

Page 41: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 41

Abschnitte und Blöcke

• Textabschnitte (Paragraph) lassen sich mit dem <p> Tag eingrenzen und gezielt mit CSS formatieren.

• Ein Textabschnitt beginnt immer eine neue Zeile.

• Allgemein kann eine Html Seite mit den <div> und <span> Tags in logische Blöcke gegliedert werden.– <div> beginnt ähnlich wie <p> eine neue Zeile

– <span> dient lediglich zur Formatierung mit CSS.

Page 42: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 42

Div & Span Beispiel

<div class="colored">Demonstration verschiedener Formatierungen mit Hilfe vonCSS und dem <span class="highlight">div</span>und <span class="highlight">span</span> Tag. </div>

Page 43: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 43

• Für Webseiten gibt es kein festes Layout, wie es bei Textverarbeitungsprogrammen üblich ist.

• Das Layout muss mit den Gestaltungsmöglich-keiten von HTML künstlich erzwungen werden:

– Layout mit Hilfe von Tabellen

– Layout mit Hilfe von Frames

– Layout mit Hilfe von CSS und Layern.

Seitenlayout

Page 44: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 44

Einheitliches Layout

Portal Kopfbereich

Inhalt:

Dokumente und Anwendungen

Logo &

Home-link

Der e-Workplace

Navigationstatisch

dynamisch

Page 45: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 45

Portal DesignstudieWillkommen im Bund2010 - Intranet

Navigation

Bundestag

Ipsem lorem retequiem latus gratis forticicum adventiris seculem. Lorventic marbot simplif forticicum lorentus practicum sempre isbit.

Mehr...

Projekt WorksDienste

CNN news

Top 1Neues vom Tage als Beispiel Teaser. Mehr...

FAZ aktuell:Xxx aavs dddq qawvDdfds esfgafd dfdsgfsSuche

NewsNews

Mustermann

Abmelden

Wo bin ich: Home > Portal > News

Hierarchische Navigation im Intranet

Flexibilität durch Suche

Benutzer definierte Inhalte und

Anwendungen mittels Portlets

Benutzer definierte Navigation mit

eigenen Reitern

Orientierung ist Alles

Benutzer definierbares Seitenlayout

Home | Bund | Kontakt | Einstellungen | Hilfe |Meta Funktionen

Börse Online

PresseBund intern

Minimiertes Portlet

Top 2Neues vom Tage als Beispiel Teaser. Mehr...

BehördenProjekteInfosFormulareVerträgeVorschriften

Go! Erweitert...

Page 46: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 46

Beispiel: Site-Layout

• Erstellen einer CSS formatierten Seite:– Layout mit einer Tabelle

– Format mit CSS Definition im Headbereich.• Verwendet werden zwei Paragraphs "abstract" und "standard"

Page 47: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 47

Lösung<body><h1 style="color:blue">Formatierung und Layout</h1><table class="layout" border="1"><tr> <td>Abstract: Arial, 16pt.</td><td><p class="abstract">Diese Seite demonstriert verschiedene Formatierungenmit Hilfe von CSS. </p></td></tr><tr> <td>Standard: Times, 20pt.</td><td><p class="standard">Jeder Abschnitt erhält durch CSS Auszeichnung einanderes Format für Schrift und Farben.</p></td> </tr></table></body>

Page 48: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 48

Lösung CSS Definition<style type="text/css"><!--table.layout { background-color:#ccffcc; }p.abstract {font-family:Arial,sans-serif; font-size:16pt; font-weight:normal; color: black;background-color:#cccccc;border-left-style:solid;border-left-width:4pt;border-left-color:#00ffff;padding-left:10pt;}p.standard {font-family:Times,serif; font-size:20pt; font-weight:normal; color: blue;background-color:#ccccff;border-left-style:solid;border-left-color:red;padding:0.7cm;}

Page 49: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 49

Frames<HTML><HEAD><TITLE>Frame Demo</TITLE></HEAD>

<FRAMESET rows="60,*,50">

<FRAME name="HEADER" src="FrameHeader.html"

scrolling="no">

<FRAME name="BODY" src="FrameBody.html" scrolling="auto">

<FRAME name="FOOTER“ src="FrameFooter.html" scrolling="no">

</FRAMESET></HTML>

Page 50: HTML Die Web Auszeichnungssprache - Lab4Inf · Prof. Dr. Nikolaus Wulff Informatik II 3 HTTP und HTML • Das HyperText TransferProtokoll (HTTP) beschreibt eine einfache verbindungslose

Prof. Dr. Nikolaus Wulff Informatik II 50

Zusammenfassung• TCP/IP und die Protokolle sind relativ kompliziert,

das Erstellen einer eigenen Web-Site per HTML ist hingegen ein „Kinderspiel“.

• Erst durch das Zusammenspiel von HTTP und HTML war das rasante Anwachsen des Internets möglich.

• Mittels HTML-Seiten als View und entsprechenden Server Technologien wie .Net oder J2EE lassen sich leistungstarke MVC Architekturen für das Internet entwickeln.