Post on 21-Jun-2019
Prof. Dr. Nikolaus Wulff
HTMLDie Web Auszeichnungssprache
Erstellung 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 zurück.
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
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, 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.
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
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 < 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>
<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):
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.
Prof. Dr. Nikolaus Wulff Informatik II 11
Lösung
<html> <head> <title>Hello World </title> </head> <body> <h1>Hello World</h1> </body></html>
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>
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.
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>
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.
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://nwulff@compuserve.com“>NWulff</A>
– eine lokale Datei: <A HREF=“file://c:/autoexec.bat“>Start-Datei</A>.
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...
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>
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>
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.
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 Höhe der Reihe 3 bzw. 4 erfolgt.
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>
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%
Prof. Dr. Nikolaus Wulff Informatik II 25
Beispiel
• Formatierung der Tabelle wie folgt:– 15%, 25%, 35%, *.
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>...
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>...
Prof. Dr. Nikolaus Wulff Informatik II 28
Beispiel: Verschachtelung
• Erzeugen zweier verschachtelter Tabellen:– <table bgcolor="red"> setzt den Farbhintergrund.
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>
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"
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.
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
Prof. Dr. Nikolaus Wulff Informatik II 33
Beispiel: Email Formular<FORM action=“mailto:nwulff@fh-muenster.de“ 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>
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
Prof. Dr. Nikolaus Wulff Informatik II 35
Antwort vom Mirror Servlet
• Das Mirror Servlet liefert den übergebenen Benutzernamen und das Passwort des Formulars:
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...
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
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).
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>
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">
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.
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>
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
Prof. Dr. Nikolaus Wulff Informatik II 44
Einheitliches Layout
Portal Kopfbereich
Inhalt:
Dokumente und Anwendungen
Logo &
Home-link
Der e-Workplace
Navigationstatisch
dynamisch
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...
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"
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>
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;}
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>
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.