HTLM Tutorial mit XMI Exkurs

Transkript

1 HTLM Tutorial mit XMI Exkurs Original

2 Alle Beispiele sind mit eclipse version indigo 3.7 erstellt und getestet worden. Die Lizensbestimmungen von eclipse werden durch dieses Buch nicht in Frage gestellt. Kopie und Verwendung von Quellcode und Text geschieht auf eigene Gefahr. Jede Gewährleistung wird ausgeschlossen. Fehler in den Quellcodes und in den Texten können nicht ausgeschlossen werden. Für die Richtigkeit besteht keinerlei Gewähr. Copyright 2013, thamwo [2]

3 Inhalt Grundlagen von HTML... 5 Ursprung... 5 Elemente und Tags... 5 Attribute... 5 Erste Website... 5 Simples HTML Dokument (Website)... 6 Standard Website... 7 Weitere Tags... 7 Steuerungsformate... 7 Listen... 7 Kommentare... 8 Verschachtelung... 8 Tabellen... 8 Tabellenattribute... 9 Colspan und Rowspan... 9 Anker und Reference... 9 Verlinkung Linktypen Bilder Strukturierte Website Struktur Elemente Website Template Validierung Erweiterte Website CSS - Cascading Style Sheet Zentrales Layout Blöcke und Unterblöcke (div, span) Aufruf von Metadateien Formulare Eigene Homepage Exkurs XMI [3]

4 XMI - XML Metadata Interchange XML - Extensible Markup Language XSLT - Extensible Stylesheet Language Transformations [4]

5 Grundlagen von HTML Ursprung HTML wurde 1990 von Tim Berners-Lee eingeführt, um den Austausch von Daten in Computernetzen zu vereinfachen. Schnell hat sich HTML als Grundlage für sämtliche Browser entwickelt und man kann damit behaupten, dass HTML das Internet erst möglich machte. HTML ist die Abkürzung für Hyper Text Markup Language. Es ist eine Sprache um die Darstellung von Texten zu definieren. Im Laufe der Zeit sind etliche Versionen definiert worden. Außerdem interpretiert jeder Browser HTML auf eine jeweils ein wenig andere Art und Weise, wodurch ein Text je nach Browser unterschiedlich dargestellt wird. Eine wichtige Variante von HTML ist XHTML, wobei das X für Extensible steht. Eine Unterscheidung dieser beiden Varianten ist normalerweise nicht erforderlich, da alle gängigen Browser beide Varianten beherrschen. Daher wird auch hier nicht unterschieden. Elemente und Tags Ein Element besteht aus einem Starttag, einem optionalen Text und einem Endtag. Ein Tag besteht aus <, einem Label und >. Starttag und Endtag unterscheiden sich durch /. Somit sieht ein Elemnent wie folgt aus: <tag>optionaler Text</tag> Fällt der optionale Tag weg, so können Starttag und Endtag auch zusammengefasst werden und es ergibt sich folgende Kurzschreibweise: <tag /> = <tag></tag> Eine hierarchische Verschachtelung ist durchaus möglich und, wie im Kapitel Dokumentenstruktur aufgezeigt, auch normalerweise der Fall. Attribute Einem Element können noch Attribute zugeteilt werden. Damit können einem Tag zusätzliche Eigenschaften bzw. vorhandene Eigenschaften verändert werden. Die Attribute stehen direkt hinter dem Starttag und bestehen aus Attributname und Wert in Hochkommata. Die Anzahl der Attribute ist beliebig. <tag attr1= val1 attrn= valn >optionaler Text</tag> Achtung: Bei Verwendung der falschen Hochkommata funktioniert es nicht!!! Erste Website Paragraph und Überschrift Die beiden wichtigsten Tags definieren Überschriften und Textparagraphen. Durch den Tag erkennt der Browser wie er den Text darstellen soll. Eine Überschrift ist also für den Browser kein Element für [5]

6 eine Gliederung, sondern lediglich eine Vorgabe wie der Überschriftentext dargestellt werden soll. Gleiches gilt für einen Textparagraphen. Die Definition eines Paragraphen sieht wie folgt aus: <p>optionaler Text</p> Für Überschriften sind Ebenen definiert. Daher gibt es die Tags h1 bis h6. Dabei ist h1 die größte Schriftart. <h1>hauptüberschrift</h1> <h2>untertüberschrift</h2> Simples HTML Dokument (Website) Eine simple Form eines HTML Dokuments kann wie folgt ausehen: <h1>lektion 1</h1> <h2>grundlagen</h2> <p>als Grundlage dienen Überschriften und Paragraphen</p> <h2>beispiel</h2> <p>dies ist Absatz 1</p> <p>und dies 2</p> Im Browser ergibt sich folgendes Bild: Lektion 1 Grundlagen Als Grundlage dienen Überschriften und Paragraphen Beispiel Dies ist Absatz 1 und dies 2 [6]

7 Standard Website Weitere Tags Zeichenformate Typische Formatierungen für Zeichen sind fett, kursiv, klein oder groß und Weitere. Dafür gibt es jeweils ein Tag: Fett: <b>dieser Text ist fett</b> Analog gilt folgende Tabelle Format Fett (bold) Kursiv (italic) Klein (small) Groß (big) Tag b i small big Weitere Formate findet man im Standard bzw. leicht im Internet. Steuerungsformate Häufig werden Steuerungen, wie nächste Zeile oder Leerzeichen benötigt. Dabei gibt es Steuerungen in Form von Elementen und von Sondertexten. Für diese Form von Elementen wird meist die Kurzschreibweise für Elemente verwendet. Ein Sondertext ist Bestandteil des optionalen Textes eines Elements. Element: Sondertext: Zeilensprung:<br />(break) Horizontale Linie:<hr />(horizontal rule) Leerzeichen: (non breaking space) Umlaut ä: ä Listen Es gibt zwei Typen von Listen, die ordered und die unordered Liste. Diese Typen unterscheiden sich in der Darstellung, dass Listenelemente der ordered Liste nummeriert dargestellt werden, während unordered Listen ohne Nummer dargestellt werden. Die Listenelemente selbst sind in beiden Fällen gleich. Listenelement: [7]

8 <li>optionaler Text</li> Ordered: <ol> Listenlement Listenlement <ol> Unordered: <ul> Listenlement Listenlement <ul> Kommentare Es können auch Kommentare eingefügt werden, also Zeilen, die im Browser nicht angezeigt werden. <! optionaler Text --> Der Kommentar beginnt mit <! und endet mit -->. Verschachtelung Elemente können ineinander verschachtelt werden. Dabei muss darauf geachtet werden, dass das zuerst begonnene Element zuletzt beendet wird: Richtig: <b> <i> optionaler Text </i></b> Falsch: <b> <i> optionaler Text </b></i> Tabellen Einfache Tabelle Für die Definition einer Tabelle benötigt man drei Tags, table für Tabellenanfang und Tabellenende, tr für eine Tabellenzeile (row) und td, für eine Tabellenzelle Tabellenzelle <td>optionale Text</td> Und die vollständige Tabelle: [8]

9 <table> <tr> Tabellenzelle Tabellenzelle </tr> </table> Tabellenattribute Um die Zellen einer Tabelle mit einem Rahmen zu versehen, wird das Attribut border verwendet. Der Wert gibt die Dicke des Rahmens an <table border= 1 > Durch width wird die Breite der Tabelle relativ zum Bildschirm angegeben: <table width= 30% > Weitere wichtige Attribute sind: align, valign Colspan und Rowspan Soll eine Zelle über mehrere Zellen gemerged werden geschieht dies mit colspan oder rowspan, je nachdem ob der Merge horizontal oder vertical erfolgen soll. <table border= 1 > </table> <tr> <td rowspan= 2 >Zelle 0/0</td> <td>zelle 0/1</td> </tr> <tr> <td>zelle 1/1</td> </tr> Anker und Reference Um einen Link auf eine andere Website zu implementieren wird das Tag für Anker (anchor) verwendet. Zu dem Tag gehört noch ein sogenanntes Attribut href, was für Hypertext Reference steht. Durch dieses Attribut kann die URL einer Website angegeben werden. <a href= page.htm >optionaler Text</a> Hier ist ein relativer Pfad verwendet worden. Natürlich sind auch absolute Pfage, wie möglich. [9]

10 Verlinkung Durch die Vergabe einer id kann ein Element markiert werden, welches dann in einer Reference als Link verwendet werden kann. <p id= String > optionaler Text</p> Soll nun hierin verlinkt werden, so muss die entsprechende id um # erweitert werden. Es ergibt sich also: <a href= #String >optionaler Text</a> Linktypen Links können in verschiedenen Zuständen sein. Häufig sieht man, dass ein besuchter Link in einer anderen Farbe dargestellt wird. Die verschieden Typen sind: link: allgemeine Bezeichnung hover: der Cursor befindet sich auf dem Link active: Iinitailzustand des Links visited: besuchter Link Wie die Darstellung dieser Zustände verändert werden kann wird im Kapitel Layout gezeigt. Bilder Image Element Zum Einbinden eines Bildes wird das Tag img verwendet. Ein erforderliches Attribut ist src, wodurch der Pfad zum Bild angegeben wird. Dieser Pfad kann relativ zur Website sein, kann aber auch eine absolute URL sein. Das Image Element wird in der Kurzschreibweise angegeben: <img src= images/logo.png /> Als Bildformate sind folgende Typen erlaubt: png, gif, jpeg Bildattribute Ein besonders wichtiges Bildattribut ist title. Der durch dieses Attribut definierte Text wird als Tooltip angezeigt, dass heißt, wenn die Maus sich über dem Bild befindet: Title= Tooltip Text Weiter Attribute sind: alt, width, Height [10]

11 Strukturierte Website Struktur Elemente W3C (World Wide Web Consortium) Ist die Organisation, welche unter anderen Funktionen die Standardisierung vorantreibt. DTD (Document Type Declaration) Um den Browser zu informieren, welche HTML Version verwendet werden soll, wird eine DTD dem HTML Dokument vorangestellt: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" html Tag " Durch die Attribute : xmlns und lang wird die Variante und die Sprache angegeben. <html xmlns=" lang="de"></html> head Tag Allgemeine Defnitionen kann man im head Element einbringen. Insbesondere gehört in diesen Bereich des Dokuments der Titel der Website. Dies geschieht durch das title Element. Dieser wird oben im Browser angezeigt. Ist der Titel nicht definiert, so wird im Browser stattdessen die URL angezeigt: <head> <title>titel</title> </head> body Tag Die Website wird im body definiert. In diesem Bereich des HTML Dokuments sind die Inhalte der Website zu definieren: <body> <p>optionaler text</p> </body> Website Template Ein Standarddokument sollte damit wie folgt aufgebaut sein: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="de"> <head> <title>titel</title> </head> [11]

12 <body> <p> optionaler text</p> </body> </html> Validierung Ob das HTML Dokument fehlerfrei ist, kann im Internet auf folgender Seite geprüft werden: validator.w3.org [12]

13 Erweiterte Website CSS - Cascading Style Sheet Style Das Layout wird über das Attribut style angegeben. So kann die Hintergrundfarbe wie folgt bestimmt werden: <body style="background-color: red;"> Weitere Werte sind: font-size, font-family, color Zentrales Layout Eine sehr übersichttliche Form das Layout zu definieren ist, dies zentral im Bereich head durchzuführen. Hier ein Beispiel für diese Vorgehensweise: <html> <head> <title>eine Website</title> <style type="text/css"> h1 {font-size: 20px; font-family: arial;} p {font-size: 12px; font-family: courier;} </style> </head> <body> <h1>lektion 1</h1> <p>dies ist ein Absatz</p> </body> </html> Blöcke und Unterblöcke (div, span) Manchmal macht es Sinn ein HTML Dokument in Blöcke zu unterteilen. Zum Beispiel sollen mehrere Paragraphen hintereinander kursiv dargestellt werden. Dafür gibt es Container, die durch das Tag div bezeichnet werden: <div>elemente</div> Umgekehrt kann in einem Element, z.b. einem Paragraphen, ein Unterbereich durch span definiert werden: <p><span>optionaler Text</ span >optionaler Text</p> [13]

14 Durch Attribute können diese Blöcke mit einer id oder einem name verbunden werden und/oder einem style zugeordnet werden. Aufruf von Metadateien Klang- und Videodateien werden durch das Tag embed aufgerufen. Der Dateiname wird über das Attribut src mitgeteilt: <embed src= song.mp3 /> Veraltet und nicht von allen Browsern unterstützt ist bgsound, welches analog verwendet werden konnte. Typische Formate, die von embed unterstützt werden, sind: Mp3, avi, wav Formulare Durch HTML können nicht nur Texte dargestellt werden, es können auch Eingaben gemacht werden. Dies geschieht über Formulare. Das Tag dafür lautet form. Das Attribut action definiert, ob die Eingabe per mail versendet wird, oder durch ein CGI-Script (z.b. perl) ausgewertet wird. Für das Eingabeformat wird das Tag input mit dem Attribut type verwendet. <form action= script.php > <input type= text /> <input type= submit value= OK /> </form> Frames Es ist auch möglich im Browser mehrere Seiten gleichzeitig anzuzeigen. Dies geschieht mit Frames: <frameset cols= 200,* > <frame src= page1.htm /> <frame src= page2.htm /> </frameset> Eigene Homepage Für die Erstellung einer eigenen Homepage bieten sich zwei Wege an: 1. Provider für kostenlose Hompages 2. Freehoster Die ersteren bieten nicht nur kostenlosen Webspace an, sondern auch gleich einen Werkzeugkasten für die Erstellung eigener Homepages. Kenntnisse über HTML sind hier nicht unbedingt erforderlich. Ein Beispiel für einen derartigen Provider ist jimdo. [14]

15 Freehoster bieten lediglich den kostenlosen Webspace an. Die HTML Dokumente müssen selbst erstellt werden und dann in den Webspace eingebracht werden. Ein Beispiel hierfür ist bplaced. [15]

16 Exkurs XMI XMI - XML Metadata Interchange XML Metadata Interchange (XMI) standardisiert den Austausch von Daten auf Modellebene. Dafür werden vier Ebenen definiert: M0-Ebene - Konkret, wie Objekte in objektorientierten Sprachen M1-Ebene - Modelle, wie Klassen in objektorientierten Sprachen M2-Ebene - Meta-Modelle, wie UML 2.0 M3-Ebene - Meta-Meta-Modelle: Definition der UML 2.0 XML - Extensible Markup Language Ist eine Sprache, um Daten definiert in einer Datei abzulegen. Das Format ist der Sprache HTML sehr ähnlich. Allerdings ist XML allgemeingültiger. Man kann sagen, dass XML die Definitionssprache für HTML ist. Somit könnte man sagen: M0: Website M1: HTML-Dokument M2: XML Dokument M3: XMI Hier ein Beispiel für eine XML-Datei: <?xml version="1.0" encoding="iso "?> <?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?> <! Filename: table.xml --> <table> <cell> <s0>zelle 0/0</s0> <s1>zelle 0/1</s1> </cell> <cell> <s0>zelle 1/0</s0> <s1>zelle 1/1</s1> </cell> </table> [16]

17 XSLT - Extensible Stylesheet Language Transformations XSLT wird verwendet, um XML Dokumente in eine andere Sprache, wie HTML, umzuwandeln. Dafür wird in einem xsl-file definiert, wie die Übersetzung durchgeführt werden soll. Hier ein kleines Beispiel: <?xml version="1.0" encoding="iso "?> <!-- Filename: table.xsl --> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <body> <table border="1"> <tr bgcolor=green; <th>spalte 0</th> <th>spalte 1</th> </tr> <xsl:for-each select="table/cell"> <tr> <td><xsl:value-of select="s0"/></td> <td><xsl:value-of select="s1"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> Dadurch wird aus dem XML Beispiel von oben, die folgende HTML Datei: <html> <body> <table border="1"> <tr bgcolor=green;> <th>spalte 0</th> [17]

18 <th>spalte 1</th> </tr> <tr> <td>zelle 0/0</td> <td>zelle 0/1</td> </tr> <tr> <td>zelle 1/0</td> <td>zelle 1/1</td> </tr> </table> </body> </html> [18]

19 Die erste Website Keine Angst vor HTML HTML Kenntnisse sind für jede Website nützlich, wenn nicht unverzichtbar. Natürlich reicht es in vielen Fällen aus einen geeigneten Werkzeugkasten oder HTML Editor zu verwenden. Ist es aber erforderlich immer wieder an der Seite zu arbeiten, dann wird bald der Moment kommen, wo es einfach sinnvoll wird zu verstehen was man tut. HTML ist so simpel und einfach zu erlernen, dass niemand davor Scheu haben braucht sich damit zu beschäftigen. Auch aus diesem Grund ist dieses Tutorial zu kurz: Es gibt einfach nicht mehr darüber zu sagen! [19]