Hypertext Markup Language (HTML)

Transkript

1 Hypertext Markup Language (HTML) 1. Einleitung HTML steht für Hypertext Markup Language. HTML ist keine Programmiersprache. Programmierung im Web erfordert zusätliche Hilfmittel. HTML besteht aus sogenannten Tags, die in ein Dokument eingefügt werden und dieses strukturieren. Tags stehen in spitzen Klammern und treten in der Regel paarweise auf. 2. Die Grundstruktur einer HTML-Datei <!DOCTYPE html> <html> <head> <title>hier steht die Titelzeile</title> </head> <body> Hier steht der Quelltext des darzustellenden Dokuments... </body> </html> Ein vollständiges HTML-Dokument ist umschlossen von einem <html>-element, in dem neben dem sichtbaren Teil des Dokumentes dem <body> ein Teil mit sogenannten Metainformationen steckt dem <head>. Das <title>-tag entdecken Sie in der Titelleiste des Browsers wieder. 3. Die Dokumenttyp-Deklaration (DTD) Damit Browser wissen, mit welcher HTML-Version sie es zu tun haben, sollte jedes HTML- Dokument mit einer Deklaration des Dokumenttyps beginnen. Im aktuellen HTML5 besteht diese Deklaration aus folgendem Eintrag: <!DOCTYPE html> 1

2 Aufgabe 1 Tippen Sie folgenden Code in einen Texteditor Ihrer Wahl ein und speichern Sie ihn mit der Dateiendung.html ab. Öffnen Sie anschliessend diese Datei mit einem Browser. <!DOCTYPE html> <html> <head> <title>mein erstes HTML-Dokument</title> </head> <body> Hier steht der eigentliche Inhalt der Seite. Das hier ist Fliesstext, und zwar auch dann, wenn der Umbruch hier anders ist. Die Breite beim Anzeigen hängt von der Breite des Browser-Fensters ab. </body> </html> 4. Tags zur einfachen Textgestaltung Tag <b>...</b> <i>...</i> <tt>...</tt> <sup>...</sup> <sub>...</sub> <pre>...</pre> <br> Wirkung Formatierung von... in einer fetten Schriftart. Formatiert... in kursiver Schrift.... wird in einer Nichtproportionalschrift dargestellt.... wird hochgestellt.... wird tiefgestellt. Darstellung von... im ursprünglich vorformatierten Stil. Zeilenschaltung erzwingen. Aufgabe 2 Erstellen Sie eine Kopie des HTML-Grundgerüstes aus Aufgabe 1 und ändern Sie den Body-Eintrag derart ab, dass er wie folgt (ohne den Rahmen) in Erscheinung tritt: Das ist Kursivtext und das hier ist fetter Kursivtext. Pythagoras meinte: a 2 + b 2 = c 2 Der Chemiker antwortet mit: H 2 SO 4 5. Tags zur Dokumentengliederung Tag Wirkung <p>...</p> Stellt... als Absatz dar. <h1>...</h1>... ist eine Überschrift der Hierarchie 1. <h6>...</h6>... ist eine Überschrift der Hierarchie 6. <hr> Unterbricht den Textfluss und fügt eine horizontale Linie ein. 2

3 Beispiel 1 HTML-Code: <h1>1 Einleitung</h1> <h2>1.1 Was ist Scrum?</h2> <p>kein Wundermittel, sondern harte Arbeit</p> <h2>1.2 Warum Scrum?</h2> <h3>1.2.1 Probleme frühzeitig erkennen, Handlungsspielraum sichern</h3> Aufgabe 3 Ändern Sie den obigen Body-Eintrag nun derart ab, dass er wie folgt aussieht: 6. Links (I) Anklickbare Links erzeugt man wie folgt: HTML-Code: Hier gehts zur <a href=" Kantonsschule Schaffhausen</a> Das href-attribut gibt das Ziel des Links an. 3

4 Wie bei allen Attributen folgt der Wert hinter einem Gleichheitszeichen in einfachen oder doppelten Anführungszeichen. Der Wert bezeichnet eine komplette URL. 6. Links (II) Bei absoluten Links geben Sie den vollständigen Pfad und den Dateinamen der Zielseite an: <a href=" Im Gegensatz zu den absoluten Links gibt es auch sogenannte relative Links, bei denen das fehlt: <a href="seite2.html">nächste Seite</a> <a href="/">zur Startseite</a> <a href="../galerie.html">bilder</a> Aufgabe 4 Erzeugen Sie zwei HTML Dokumente mit den Namen seite1.html seite2.html und verlinken Sie diese gegenseitig, so dass sie gegenseitig aufgerufen werden können. Etwa so: 7. Bilder Mit dem Image-Tag können Sie HTML-Dokumente bebildern. Beispiel: <img src="html5-logo.png" alt="html5-logo" width="50"> Das src-attribut bezeichnet die Quelle der Bilddatei. Gängige Bildformate: jpg, gif und png. alt steht für einen Alternativtext. Die Angaben zu Breite (width) und/oder Höhe (height) sind optional. 4

5 Aufgabe 5 1. Erstellen Sie eine HTML-Seite mit mehreren Bildern. 2. Verwenden Sie zum Ausrichten der Bilder die Informationen dieser Webseite: 8. Listen (I) Die einfachste Art, Daten zu strukturieren, ist eine Liste. In HTML sieht das so aus: <ul> <li>basmati-reis</li> <li>fisch-filet</li> <li>halbgefrorene Waldbeeren</li> </ul> Browser-Darstellung Der Browser macht aus dem HTML-Code eine Aufzählungsliste (<ul> steht für unordered list) mit einem Aufzählungszeichen vor jedem Listeneintrag (<li> steht für list item). 8. Listen (II) Als Alternative bietet HTML die ordered list an, bei der anstelle des <ul> ein <ol> tritt. Der Browser nummeriert dann alle Einträge. Listen liegen auf der gleichen Ebene wie Absätze; ein Listeneintrag darf auch eine (ungeordnete) Unterliste enthalten: HTML-Code: <ol> <li>kapitel</li> <li>kapitel <ol type="a"> <li>unterkapitel</li> <li>unterkapitel</li> </ol> </li> <li>kapitel</li> </ol> 5

6 9. Tabellen (I) Etwas komplexer als Listen sind Tabellen. Beispiel: <table border="1"> <tr> <th>umsatz [in Fr.]</th> <th>2010</th><th>2011</th><th>2012</th> </tr> <tr> <td>pc</td><td> </td><td> </td><td> </td> </tr> <tr> <td>tv</td><td> </td><td> </td><td> </td> </tr> </table> 9. Tabellen (II) Das <table>-tag liegt auf der gleichen Ebene wie Absätze oder Listen. Die Zeilen heissen <tr> (engl. table row), die einzelnen Zellen <td> (engl. table data). Alternativ zu normalen Zellen können Sie die Spaltenbeschriftungen in <th> (engl. table header) setzen; im Browser erscheinen diese dann fettgedruckt. Sie müssen für alle Zeilen gleich viele Zellen definieren, da sich sonst der Browser etwas einfallen lassen muss, wie er die Tabelle darstellen soll. Ausnahme: Sie können m Zellen horizontal mit dem Attribut rowspan="m" oder n Zellen vertikal mit dem dem Attribut colspan="n" zusammenfassen. 10. Formulare (I) Über Formulare können die Benutzer Eingaben machen, die von einer Programmiersprache wie PHP oder Javascript verarbeitet werden können. Ohne zusätzliche Programme handelt es sich bei den folgenden Formular-Beispielen vorläufig nur um Attrappen. HTML-Code: <form action="kundeneingabe.php" method="post"> <input type="text" name="eingabe"> <input type="submit" name="senden" value="absenden"> </form> 6

7 10. Formulare (II) Das <form>-tag fasst die Formularelemente zusammen, kann aber auch Absätze, Listen, Tabellen, usw. enthalten. Die meisten Formularelemente heissen <input>, das type-attribut regelt die Details: So besteht das Formular der letzten Seite aus einem einzeiligen Texteingabefeld und aus einem mit Absenden beschrifteten Button. Klickt der Benutzer den Button an, so übergibt der Browser die Eingaben (dazu zählt auch der value des Buttons) zusammen mit dem jeweiligen Feldnamen (name="...") an die im action-attribut des <form>-elements angegebene Adresse (Datei). Mit dem id- oder name-attribut können wir Formularen und Formularelementen eine eindeutige Bezeichnung zuweisen. Dies ist nötig, wenn wir später mit Skriptsprachen wie PHP oder JavaScript auf diese Elemente zugreifen wollen. 10. Formulare (III) Die Zieladresse eines Formulars ist üblicherweise ein Server-Skript (hier: kundeneingabe.php), das die Eingaben verarbeitet bzw. speichert. Für die Übertragung der Formularwerte stehen zwei Methoden zur Auswahl: POST oder GET. Bei der POST-Methode werden die übertragenen Daten vordergründig unsichtbar übertragen. Diese Methode eignet sich auch zur Übertragung von grossen Datenmengen. Bei der GET-Methode werden die Daten in der Form?Eingabe=...&Submit=Absenden an die URL im Browserfenster angehängt. GET lässt je nach Browser nur wenige hundert oder tausend Zeichen zu. 10. Formulare (IV) Für mehrzeilige Eingaben empfiehlt sich das <textarea>-element: Ihr Kommentar:<br> <textarea name="kommentar" cols="50" rows="5">...</textarea> Der vorgegebene Feldwert steht nicht im value-attribut sondern im Inhalt des Elements. 7

8 Die Grösse des Felds bemisst sich durch die Zeilenlänge (engl. cols) und der Zeilenanzahl (engl. rows). 10. Formulare (V) Checkboxen: <form> Welche Haustiere haben Sie?<br> <input type="checkbox" name="pet" value="turtle">schildkröte<br> <input type="checkbox" name="pet" value="rabbit">kaninchen<br> <input type="checkbox" name="pet" value="bird">vogel<br> <input type="checkbox" name="pet" value="dog">hund<br> </form> 10. Formulare (VI) Radio-Buttons: <form> Anrede:<br> <input type="radio" name="geschlecht" value="female">frau<br> <input type="radio" name="geschlecht" value="male">herr<br> </form> 10. Formulare (VII) Definition von Auswahlmenüs mit <select> und <option>: <form> <select name="browser"> <option value="firefox">firefox</option> <option value="ie">internet Explorer</option> <option value="opera" selected="selected">opera</option> </select> </form> 8

9 Beim Klick auf ein Pfeilsymbol erscheinen alle Optionen. Voreingestellt ist der erste Eintrag. Dieser kann durch das Attribut selected="selected" überschrieben werden. Als Wert überträgt der Browser den Wert von value an die im <form>-tag genannte Zieladresse. 11. Sonderzeichen In HTML4 wird das Umlaut-Problem mit benannten Zeichen, die zwischen einem Ampersand (&) und einem Strichpunkt stehen (z. B. ä für ä ) gelöst. Praktisch sind diese Entities bei Zeichen, die nicht auf einer Standardtastatur liegen, etwa ein Gedankenstrich ( für ) oder ein bedingter Trennstrich ( " ), der einen optionalen Zeilenumbruch innerhalb langer Wörter ermöglicht. Siehe auch: Block- und Inline Elememte HTML-Elemente lassen sich in Block- und Inline-Elemente unterscheiden. Ein Inline-Element beginnt nicht unbedingt auf einer neuen Zeile und beanprucht nur so viel Breite wie nötig. Beispiele für Inline-Elemente sind <a>, <img> oder <span>. Block-Elemente erzeugen einen neuen Absatz im Textfluss. Beispiele für Block- Elemente sind das <h1> oder das <p>-tag. Block-Elemente können weitere Block-Elemente oder Inline-Elemente enthalten. Es gibt aber Ausnahmen. 12. Quellen Werner Durandi: Kurzeinführung in HTML, 1999 Christian Heise et al. (Hrsg.): C t kompakt Programmieren, S , Heise Zeitschriften- Verlag GmbH & Co. KG, Hannover, Feb Chuck Musciano und Bill Kennedy: HTML & XHTML, O Reilly, Köln,