Einführung in HTML. Ich bin der Seiteninhalt

Größe: px

Ab Seite anzeigen:

Download "Einführung in HTML. Ich bin der Seiteninhalt"

Kilian Burgstaller
vor 7 Jahren
Abrufe

1 Einführung in HTML 1 Grundstruktur einer HTML-Seite HTML-Dateien sind reine Text-Dateien, dh sie können in einem beliebigen Editor geschrieben werden und müssen lediglich mit der Endung html versehen werden Jede HTML-Datei besitzt eine feste Struktur: <html> <head> <title>ich bin die Titelleiste</title> </head> <body> </body> Ich bin der Seiteninhalt </html> Die Befehle in HTML werden als Tags bezeichnet In der Regel benötigt man einen Anfangs-Tag (<tag>) und einen End-Tag (</tag>), manche Befehle können aber auch einfach (<tag>) verwendet werden Jede HTML-Datei beginnt mit <html> und endet mit </html> und besteht aus einem Kopf-Teil (<head> </head>) und einem Körper-Teil (<body> </body>) Im Kopf-Teil befinden sich Informationen über das Dokument, wie zb die Titelzeile, die im oberen Fensterbalken angezeigt wird Im Körper-Teil steht der eigentliche Inhalt des Dokuments Innerhalb eines Tags können weitere Angaben (Attribute) stehen So stellt man mit bgcolor= die Hintergrundfarbe und mit text= die Textfarbe ein <body bgcolor= red text= green > Anstelle der Farbnamen kann auch der entsprechende RGB-Code angegeben werden Dabei wird eine Farbe durch ihre Anteile an den drei Grundfarben Rot, Grün und Blau definiert black red green blue white # #FF0000 #00FF00 #FF0000 #FFFFFF 1

2 2 Einfache Gestaltungsmöglichkeiten Mit <font></font> definiert man einen Bereich für Schriftformatierung Als Attribute stehen zb Schriftgröße (size) und Schriftfarbe (color) zur Verfügung Der Wert der Schriftgröße kann absolut ( 1, 2, 7) oder relativ (-3, -2, +3) angegeben werden <font size= +3 color= blue >Hallo</font> Daneben gibt es eine Vielzahl weiterer Möglichkeiten zur Textauszeichnung, die auch miteinander kombiniert werden können <b> <i> <sup> <sub> fettgedruckt kursiv hochgestellt tiefgestellt <b><i>ich bin fett und kursiv</i></b> Um einen Zeilenumbruch zu erzwingen, verwendet man den <br>-tag Dieser steht immer allein, dh man benötigt keinen Endtag Zeile<br>neue Zeile Mit dem <p>-tag (p = paragraph = Absatz) leitet man einen Textabsatz ein und mit </p> beendet man diesen <p>1 Absatz</p> <p>2 Absatz</p> In HTML stehen 6 Überschriftenebenen zur Verfügung: 1 ist die oberste, 6 ist die niedrigste Ebene <h1>überschrift Ebene 1</h1> <h2>überschrift Ebene 2</h2> <h6>überschrift Ebene 6</h6> Absätze und Überschriften können Attribute zur Textausrichtung (align) enthalten: align = left right center justify linksbündig rechtsbündig zentriert Blocksatz <h1 align=center>überschrift</h1> <p align=right>text</p> 2

3 3 Einbinden von Bildern Zum Einbinden von Bildern in HTML-Seiten, verwendet man den <img> -Tag Geeignete Grafikformate sind PNG, GIF und JPEG Mit dem src-attribut wählt man die gewünschte Bilddatei und mit dem alt-attribut kann man einen Alternativtext angeben, für den Fall, dass die Grafik nicht angezeigt werden kann <img src= sonnejpg alt= Sonne > Befindet sich die Bilddatei in einem anderen Verzeichnis als die HTML-Datei, so muss der entsprechende Pfad angegeben werden, <img src= /bilder/sonnejpg alt= Sonne > 4 Hypertextelemente Das Besondere an HTML-Texten sind Verweise (links), über die man andere Elemente erreichen kann Man setzt Verweise mit dem <a>-tag (a = anchor = Anker) und gibt das Verweisziel mit dem href-attribut an Das Ziel kann eine Textstelle im selben HTML-Dokument oder aber auch eine beliebige andere Datei aus dem Internet sein Zwischen Anfangs- und End-Tag steht der Text, auf den man Klicken muss, um das Ziel zu erreichen <a href= seite2html >Nächste Seite</a> <a href= >Uni Bayreuth</a> An der Stelle des Textes kann auch ein anklickbares Bild stehen <a href= wwwsternde ><img src= sternjpg ></a> Für einen Sprung innerhalb eines Dokuments muss man an der Zielstelle einen Anker definieren Dieser wird genau wie ein Verweis mit Hilfe des <a>-tags erzeugt, enthält aber statt des Attributs href ein Attribut name zum Festlegen des (beliebigen) Ankernamens Der Verweis zu diesem Anker beginnt mit einem # -Zeichen gefolgt vom Namen des Ankers <a href= #ankername >Zu Plan A</a> <a name= ankername >Plan A</a> 3

4 5 Der hover-effekt Austauschen von Bildern Beim Überfahren einer Textstelle mit der Maus soll ein Bild ausgetauscht werden Um auf ein Bild zugreifen zu können, muss es mit einem Namen versehen werden <img src= bild1png name= xxx > Die gewünschte Textstelle wird als Link gestaltet und mit JavaScript-Befehlen versehen: <A HREF="javascript://" onmouseover="javascript:windowdocumentxxxsrc='bild2png';" onmouseout="javascript:windowdocumentxxxsrc='bild1png';"> Textstelle</A> Der Aufruf HREF="javascript: //" bewirkt, dass beim Anklicken des Textes nichts geschieht Der Javascript-Aufruf // steht dabei für einen leeren Kommentar Beim Überfahren der Textstelle wird der Befehl hinter onmouseover ausgeführt Im Beispiel wird die vorherige Bildquelle ersetzt durch bild2png Der Javascipt-Aufruf enthält den HTML-Namen (xxx) und den Datei-Namen des gewünschten Bildes (bild2png) Verlässt die Maus die Textstelle, so wird der Befehl hinter onmouseout ausgeführt und es wird wieder die ursprüngliche Datei bild1png angezeigt 4

5 6 Tabellen Neben der Darstellung von Daten, werden Tabellen in HTML meist als Gestaltungsmittel für Seitenlayouts verwendet Texte und Grafiken können in einer Tabelle genauer angeordnet werden Folgende Tags werden für das Grundgerüst einer Tabelle benötigt: Tabelle Tabellenzeile Kopf-Datenzelle Datenzelle <table></table> <th></th> <td></td> Aufbau einer Tabelle: <table> </table> Attribute im table-tag: Ausrichtung (align) <th>überschrift Spalte 1</th> <th>überschrift Spalte 2</th> <td>datenzelle in Spalte 1</td> <td>datenzelle in Spalte 2</td> align = left right center justify linksbündig rechtsbündig zentriert Blocksatz <table align=center> Breite und Höhe der Tabelle (height, width) Möglich ist die Angabe von Pixeln oder von Prozentwerten <table height=200 width=90%> Achtung: Tabellen können nicht beliebig verkleinert werden Der Browser nimmt sich auf alle Fälle so viel Platz, wie benötigt wird, um den Inhalt der Tabelle korrekt anzuzeigen border cellspacing cellpadding Rahmen bzw Gitternetzlinien Stärke der Gitternetzlinien Abstand des Textes zum Zellenrand <table border=1 cellspacing=10 cellpadding=3> Attribute für einzelne Zeilen bzw Zellen: 5

6 horizontale Ausrichtung des Zelleninhaltes (align) align = left right center justify linksbündig rechtsbündig zentriert Blocksatz vertikale Ausrichtung des Zelleninhaltes (valign) valign = top middle bottom oben zentriert unten Erfolgt der Eintrag im tr-tag, so bestimmt dies die Ausrichtung der gesamten Zeile <tr valign=middle height=100> <td width=20% align=right>text 1</th> <td width=80% align=center>text 2</th> Zum Verbinden von Zellen dienen die Attribute rowspan und colspan <table> <td colspan=2>zelle 1</td> <td>zelle 2</td> <td>zelle 3</td> </table> Zelle 1 Zelle 2 Zelle 3 <table> <td rowspan=2>zelle 1</td> <td>zelle 2</td> <td>zelle 3</td> </table> Zelle 1 Zelle 2 Zelle 3 Diese Befehle können auch kombiniert werden Zusammen mit Verschachteln von Tabellen (Tabellen in Tabellenzellen) kann man nun fast beliebig komplexe Strukturen erstellen Mit bgcolor können Tabellen (bzw Zeilen oder Zellen) auch mit Hintergrundfarben versehen werden <table bgcolor="red"> <tr bgcolor="green"> <td bgcolor="blue"> 6

7 7 Einbinden einer GEONExT-Konstruktion in eine HTML-Seite Exportiert man unter GEONExT eine Konstruktion ins HTML-Format, so wird automatisch eine HTML-Datei erzeugt Die für GEONExT wichtigen Einträge befinden sich dabei innerhalb des <applet>-tags  <applet id="xxx" code="geonextgeonextclass" codebase="/" archive="geonextjar" width="400" height="380" <param name="geonext" value="file:dreieckgxt"> </applet>  Die für GEONExT notwendigen Daten befinden sich in der Datei "geonextjar" Der Eintrag codebase= verweist auf das Verzeichnis, in dem diese Datei zu finden ist Befindet sie sich im selben Verzeichnis wie die HTML-Seite, so lautet der Eintrag codebase="/" Die Größe der GEONExT-Konstruktion in der HTML-Seite wird durch die Werte für Breite und Höhe (height, width) festgelegt Beim Exportieren in eine HTML-Seite gibt es zwei Möglichkeiten: Standardmäßig wird der Quelltext der Konstruktion in die HTML-Seite geschrieben; dh es entsteht lediglich eine Datei Wählt man "Externe gxt-datei", so werden die Zeichenflächen in einer separaten gxt-datei gespeichert Diese kann anschließend in GEONExT geöffnet, weiterbearbeitet und wieder abgespeichert werden, ohne die HTML-Seite ändern zu müssen Die Einbindung der gxt-datei erfolgt im <applet>-tag Beispiel: <param name="geonext" value="file:dreieckgxt"> Weitere Informationen zu HTML findet man unter 7

Ähnliche Dokumente

Die Programmiersprache des Webs. HTML HyperText Markup Language Hypertext - Auszeichnungssprache

Was ist HTML? Die Programmiersprache des Webs HTML HyperText Markup Language Hypertext - Auszeichnungssprache Dateiname Man muss Groß/Kleinschreibung beachten Leerzeichen ist nicht erlaubt Umlaute wie