HTML - Lab4Inf
Werbung
HTML Die Web Auszeichnungssprache Erstellung von statischen HTML Seiten Prof. Dr. Nikolaus Wulff Agenda Html • • • • HTTP und HTML Einfache HTML Seiten erstellen Tabellen, Layers und Frames Eingabe Formulare Prof. Dr. Nikolaus Wulff Informatik II 2 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 3 Standard HTML 1: get X.html Browser 3: 2: Datei lesen Web-Server X.html X.html + einfache Sprache (HTML) – nur statische Informationen & Verknüpfungen GET http://www.apache.org:80/documents/X.html Methode Protokoll Prof. Dr. Nikolaus Wulff Server DNS + Port symbolischer Pfad Dokument Informatik II 4 HTTP Request 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 6 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>: – <H2>HTML-Überschrift 2 </H2>: – HTML-Überschrift 1 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 7 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. Prof. Dr. Nikolaus Wulff Informatik II 8 Aufbau eines Dokuments • Ein HTML Dokument gliedert sich in zwei Teile, dem Kopf (Head) und dem eigentlichen Körper (Body): <HTML> <HEAD> <TITLE>Html Beispiel</TITLE> </HEAD> <BODY> <H1> Eine Html Beispiel Seite</H1> Hier kommt der Text der Seite ... </BODY> </HTML> Prof. Dr. Nikolaus Wulff Informatik II 9 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 10 Lösung <html> <head> <title>Hello World </title> </head> <body> <h1>Hello World</h1> </body> </html> Prof. Dr. Nikolaus Wulff Informatik II 11 Einige HTML Tags Type 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 Tabelleneintrag <TH> ...</TH> Tabellenreihe <TR> ... </TR> Ebene <DIV id=name> ... </DIV> Prof. Dr. Nikolaus Wulff <TD> ... </TD> Informatik II 12 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 13 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 14 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 15 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>. Prof. Dr. Nikolaus Wulff Informatik II 16 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 17 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 18 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. <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>2.3</td> <td>2.4</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> <td>3.4</td> </tr> </table> Prof. Dr. Nikolaus Wulff Informatik II 19 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 20 Beispiel • Ansicht einer 4x4 Tabelle mit Überschrift 1-4 Prof. Dr. Nikolaus Wulff Informatik II 21 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 22 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 23 Weitere Formatierungen • Die Attribute width und height steuern Höhe und Breite. • Es können relative oder absolute Größen angegeben relativ absolut 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="*" /> relativ 10% relativ 20% *: Rest d.h. 70% </colgroup> Prof. Dr. Nikolaus Wulff Informatik II 24 Beispiel • Formatierung der Tabelle wie folgt: – 15%, 25%, 35%, *. Prof. Dr. Nikolaus Wulff Informatik II 25 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 26 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 27 Beispiel: Verschachtelung • Erzeugen zweier verschachtelter Tabellen: – <table bgcolor="red"> setzt den Farbhintergrund. Prof. Dr. Nikolaus Wulff Informatik II 28 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 29 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 30 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 31 Eingabeelemente Type Button Tag CheckButton <input type=“button“ name=... value="..."> <button type=“button“ name=... value=... > <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> <input type=“hidden“ name=... value=... /> Verstecktes Feld Passwort Feld <input type=“password“ name=... value=... /> Die wichtigsten Formular Eingabefelder Prof. Dr. Nikolaus Wulff Informatik II 32 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> Prof. Dr. Nikolaus Wulff Informatik II 33 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 34 Antwort vom Mirror Servlet • Das Mirror Servlet liefert den übergebenen Benutzernamen und das Passwort des Formulars: Prof. Dr. Nikolaus Wulff Informatik II 35 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> Prof.... Dr. Nikolaus Wulff Unter den Schlüsseln „user“ und „password“ werden die Eingaben abgelegt und serverseitig ausgelesen... Informatik II 36 Falsche Parameter • Web-Anwendungen können sich nicht darauf verlassen, 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. http://server/mirror?user=nwulff&password=topsecret – ? 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. Prof. Dr. Nikolaus Wulff Informatik II 37 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 38 CSS und HTML • CSS Definitionen können im Kopfbereich einer Html Seite direkt deklariert werden <head> <title>CSS Include</title> <style type="text/css"> <!-h1 {font-family:Arial; font-size:32pt;color:blue;} //--> </style> </head> • oder in einer externen Datei, die im Kopfbereich referenziert wird. <head> <title>CSS Reference</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> Prof. Dr. Nikolaus Wulff Informatik II 39 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: Beispiel mit CSS Explizite Formatierung <style type="text/css"> <!-table.colorTable { background-color:#lightblue; } //--> </style> </head> ... <table class="colorTable"> Prof. Dr. Nikolaus Wulff Informatik II <table bgcolor="lightblue"> 40 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 41 Div & Span Beispiel <div class="colored"> Demonstration verschiedener Formatierungen mit Hilfe von CSS und dem <span class="highlight"> div</span>und <span class="highlight"> span</span> Tag. </div> Prof. Dr. Nikolaus Wulff Informatik II 42 Seitenlayout • Für Webseiten gibt es kein festes Layout, wie es bei Textverarbeitungsprogrammen üblich ist. • Das Layout muss mit den Gestaltungsmöglichkeiten von HTML künstlich erzwungen werden: – Layout mit Hilfe von Tabellen – Layout mit Hilfe von Frames – Layout mit Hilfe von CSS und Layern. Prof. Dr. Nikolaus Wulff Informatik II 43 Einheitliches Layout Logo & Portal Kopfbereich Home-link statisch Navigation Inhalt: dynamisch Der e-Workplace Dokumente und Anwendungen Prof. Dr. Nikolaus Wulff Informatik II 44 Portal Designstudie Orientierung ist Alles Willkommen im Bund2010 - Intranet Home | Bund | Kontakt | Einstellungen | Hilfe | Wo bin ich: Navigation Behörden Projekte Hierarchische Infos Navigation im Intranet Formulare Verträge Vorschriften Projekt News Go! Prof. Dr. Nikolaus Wulff Abmelden Dienste Works Bundestag CNN news Ipsem lorem retequiem latus gratis forticicum adventiris seculem. Lorventic marbot simplif forticicum lorentus practicum sempre isbit. Mehr... Top 1 Benutzer definierte Navigation mit eigenen Reitern Neues vom Tage als Beispiel Teaser. Mehr... Top 2 Neues vom Tage als Beispiel Teaser. Mehr... Presse Börse Online Suche Meta Funktionen Home > Portal > News Bund intern Flexibilität durch Suche Mustermann Benutzer definierte Inhalte und Anwendungen mittels Portlets FAZ aktuell: Minimiertes Portlet Erweitert... Informatik II Xxx aavs dddq qawv Ddfds esfgafd dfdsgfs Benutzer definierbares Seitenlayout 45 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 46 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 Formatierungen mit Hilfe von CSS. </p></td> </tr> <tr> <td>Standard: Times, 20pt.</td> <td><p class="standard"> Jeder Abschnitt erhält durch CSS Auszeichnung ein anderes Format für Schrift und Farben. </p></td> </tr> </table> </body> Prof. Dr. Nikolaus Wulff Informatik II 47 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. Informatik II 48 } Dr. Nikolaus Wulff 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> Prof. Dr. Nikolaus Wulff </HTML> Informatik II 49 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. Prof. Dr. Nikolaus Wulff Informatik II 50