Hypertext Markup Language HTML
Das Grundgerüst einer HTML-Datei Tags Sprich: Tägs > Quelltext
Aufgabe: Erstelle eine HTML-Datei „Persönliches“, die dich etwas näher beschreibt! (Beim Speichern auf die Endung *.html achten!) Im Browserfenster sollte dann etwas über dich zu lesen sein. Sonderzeichen müssen u.U. durch sogenannten Entitys (Zeichenfolgen) ersetzt werden:z.B. ä = ä ü = ü ö = ö ß = ßDie großen Umlaute so: Ä = Ä„ = &Quot; & = & < = < > = > Leerzeichen =   oder  
Tags zur Textformatierung
Aufgabe: Gestalte eine erste Seite mit persönlichen Informationen. Benenne sie index.html! Weitere Gestaltungstags sind: <body bgcolor=„Farbe“> Hintergrundfarbe < img src=„bild.jpeg“> Bild einfügen…hier ist es gut, wenn das Bild im selben Ordner ist <background=„bild.jpeg“> Hintergrundbild
<border=„3“> Rahmen um Grafiken (Wert 0 ergibt keinen Rahmen) <hr size=„4“ width= 80%> horizontale Linie der „Dicke“ 4 und 80% des Browserfensters <br> Zeilenumbruch <p> Leerzeile www.tomheller.de/html-farben.html Farbcode
Hintergrundmusik TAG: erscheint im Head !!!(hinter <title>) <bgsound src=„background.mid“ loop=„infinite“> Hinweise: - die Dateien sollten die Endungen *.*mid, *.*wav oder *.*au haben und, wenn so wie im Bsp. verwendet, im selben Ordner wie alle anderen Dateien sein - das Attribut loop steht für Wiederholungen, der Wert infinite dabei für Endloswiederholungen, sonst einfach Anzahl der Wiederholungen eintragen
Tabellen 1. Teil 1. Tabellen …dienen u.a. zur übersichtlichen Anordnung von Grafiken, Text etc. <table>…..</table> ist der Tag für eine unsichtbare Tabelle <table border=“Wert”>…..</table> für eine Tabelle mit Rahmen
2. Tabellenzellen Jede einzelne Zelle einer Tabelle muss extra definiert werden. <td>…..</td> (table data) …diese Zellen erscheinen nebeneinander <tr>….</tr> (table row) …Zeilen definieren
Beispiel in den body <table border=“2“> <tr> <td>Zelle 1</td> <td>Zelle 2</td> </tr> </table> Testen Sie den kurzen Tabellenquelltext in einer html-Datei mit dem Namen „table1.html“!
Tabellen 2. Teil Tabellenattribute 1.1. TABELLENBREITE … das Attribut width legt die Breite der Tabelle relativ(in%) der absolut(in Pixeln) fest HINWEIS: die relative Angabe bezieht sich immer auf das aktuelle Browserfenster ohne das Attribut wird die Größe dem Inhalt angepasst
1.2. TABELLENHÖHE … das Attribut height legt die Höhe der Tabelle relativ(in%) der absolut(in Pixeln) fest HINWEIS: die relative Angabe bezieht sich immer auf das aktuelle Browserfenster ohne das Attribut wird die Größe dem Inhalt angepasst
1.3. AUSRICHTUNG … <table align =„Wert“> Wert= left/center/right 1.4. TEXTABSTAND VOM ZELLENRAND … das Attribut cellpadding=„3“ legt den Abstand des Textes vom Zellenrand fest (Verwendung: <table cellpadding=„3“>)
1.6. RAHMEN-& HINTERGRUNDFARBE 1.5. ZELLENABSTAND … das Attribut cellspacing=„3“ legt den Abstand zwischen den Zellen fest (Verwendung: <table cellspacing=„3“>) 1.6. RAHMEN-& HINTERGRUNDFARBE … das Attribut bordercolor=„Farbe“ ist für die Rahmenfarbe und bgcolor=„Farbe“ für den Hintergrund verantwortlich (Verwendung: <table border=„3“ bordercolor=„red“ oder auch <td bgcolor=„blue“>)
2. Tabellenzellen Vorbemerkung: Alle Attribute zur Tabellenbreite, -höhe, -farbe und Ausrichtung gelten auch für die Zellen. Statt <table Attribut =„Wert“> heißt es dann <td Attribut=„Wert“>!!
Ausrichtung 2.1. Ausrichtung horizontal <align =„left/center/right“> 2.2. Ausrichtung vertikal <valign = „top/middle/bottom“> (oben/mittig/unten)
Aufgabe: Erstellen Sie die html-Datei „table1.html“, die zu folgender Tabelle führt! Hinweise: *Hintergrund „Rotton“, Rahmen blau *Rahmenstärke 5 *erste Zeile Text fett, kursiv und oberen Rand *zweite Zeile alles in der vertikalen Mitte *dritte Zeile alles am unteren Rand der Zelle
5. Listen Aufgabe von Listen: Mit Listen können Textinhalte hierarchisch gegliedert werden. Dabei gibt es Tags für nummerierte Listen, Listen mit Aufzählungszeichen und Definitionslisten.
5.1. Listen mit Nummerierung Tag: <ol>…</ol> jeder Listeneintrag wird dabei in <li>…</li> eingebunden (ordered list nummerierte Liste)
Beispiel: <html> <head> <title> Liste mit Nummerierung </title> </head> <body> <ol> <li> Listeneintrag 1</li> <li> Listeneintrag 2</li> <li> Listeneintrag 3</li> </ol> </body> </html> Verwendung:
Attribute type = Wert Werte: A… Nummerierung lautet A,B,C,… I… Nummerierung lautet I,II,III,… i… Nummerierung lautet i,ii,iii,… Standard… Zahlenformat (ohne type) start = Zahl Bsp: <ol start =7>… Liste beginnt mit 7 statt mit 1 value = Zahl Bsp: <li value=50>… Liste geht hier mit Nr. 50 weiter
Aufgabe: Schreiben Sie einen Quelltext, der das Bild im Browser erzeugt!
5.2 Liste mit Aufzählungszeichen Tag: <ul>…</ul> jeder Listeneintrag wird dabei in <li>…</li> eingebunden (unordered list unnummerierte Liste)
Beispiel: <html> <head> <title> Liste mit Aufzählung </title> </head> <body> <ul> <li> Punkt 1</li> <li> Punkt 2</li> <li> Punkt 3</li> </ul> </body> </html> Verwendung:
Attribute: type = Zeichenform Zeichenform: circle… Kreis als Zeichen square… Rechteck als Zeichen disc … ausgefüllter Kreis
Aufgabe: Schreiben Sie einen Quelltext, der das Bild im Browser erzeugt!
5.3 Definitionslisten Die Einträge von Definitionslisten bestehen aus den beiden Elementen Überschrift und Text. Der Text wird relativ zur Überschrift nach rechts gerückt. Tag: <dl> Listenanfang <dt>…</dt) Überschrift <dd>…</dd> Erläuterung </dl> Listenende
Übung: Geben Sie folgenden Quelltext ein und sehen Sie sich das Ergebnis im Browser an! <html> <head> <title> Definitionsliste </title> </head> <body> <dl> <dt> Begriff 1</dt> <dd> Definition des Begriffs 1</dd> <dt>Unterbegriff 1</dt> <dd> Definition des Unterbegriffs 1</dd> </dl> <dt> Begriff 2</dt> <dd> Definition des Begriffs 2</dd> </dl> </body> </html>
Aufgabe: Schreiben Sie einen Quelltext, der das folgende Bild erzeugt:
6. Frames Frames sind frei skalierbare Bereiche, die feste Inhalte, aber auch Links enthalten können, die die Anzeige in anderen Abschnitten der Seite beeinflussen.
Beispiel für eine Seite mit Frames
6.1. Horizontale Aufteilung Bemerkung: Die Dateien oben.html und unten.html müssen noch geschrieben werden und im selben Ordner wie die Framedatei liegen!!! <html> <head> <title>Horizontale Aufteilung</title> </head> <Frameset Rows="30%,70%"> Rows = Reihen <Frame src="oben.html"> <Frame src="unten.html"> </Frameset> <Body> Dein Browser unterstützt keine Frames! </body> </html> Die beiden Frames bilden ein Frameset, das den Body ersetzt.
…es sind auch Absolutangaben möglich, aber Achtung!!!(besser nicht) Man kann auch mehr als 2 Reihen (ROWS) erzeugen mit einer sog. WILDCARD <Frameset Rows =10%,*,60%> …es sind auch Absolutangaben möglich, aber Achtung!!!(besser nicht)
6.2. Vertikale Aufteilung <html> <head> Bemerkung: Die Dateien links.html und rechts.html müssen noch geschrieben werden und im selben Ordner wie die Framedatei liegen!!! <html> <head> <title>Vertikale Aufteilung</title> </head> <Frameset Cols="40%,60%"> Cols = Spalten <Frame src="links.html"> <Frame src="rechts.html"> </Frameset> <Body> Dein Browser unterstützt keine Frames! </body> </html>
Übung: Erzeuge ein Frameset, der das Browserfenster in 3 horizontale Bereiche unterteilt. Der zweite soll 55%, der dritte 15% des Anzeigebereiches verwenden. Erstelle jeweils für die Bereiche entsprechende Beispieltexte und wähle geeignete Namen für die html-Dateien. 2. Schreibe dann die Datei für eine vertikale Aufteilung in 25% (erster Frame), 25%(zweiter Frame) und Rest des Fensters(dritter Frame).
6.3. Verschachtelte Aufteilung
Lösung: <html> <head> <title>Vertikale Aufteilung</title> </head> <Frameset Cols="35%,65%"> <Frame src="links.html"> <Frameset Rows="30%,70%"> <Frame src="oben.html"> <Frame src="unten.html"> </Frameset> <Body> Dein Browser unterstützt keine Frames! </body> </html> Lösung:
6.4. Verweise zu einem Frame Vorarbeit: Zunächst überlegt man sich eine Grobeinteilung der Seite in Frames: z.B. Skizze Verweise Menü o.ä. Überschrift/ Titel der Seite Hauptenster Email Gästebuch Links
Wir teilen die Seite also in vier Bereiche ein Wir teilen die Seite also in vier Bereiche ein. Dabei nutzen wir die Theorie der vertikalen Aufteilung in zwei Frames, wobei der rechte Teil in drei horizontale Bereiche geschachtelt wird. Ein Quelltext könnte so aussehen:
<html> <head> <title>Vertikale Aufteilung</title> </head> <Frameset Cols="15%,85%" border=0> <Frame src="verweise.html" NAME="links"> <Frameset Rows="10%,80%,10%"> <Frame src="oben.html" NAME="oben"> <Frame src="haupt.html" NAME="mitte"> <Frame src="unten.html" NAME="unten"> </Frameset> <Body> Dein Browser unterstützt keine Frames! </body> </html>
Organisieren der Dateien Alle Dateien, auf die ein Verweis im o.g. Frameset existiert, sollten im selben Ordner liegen und müssen noch alle geschrieben oder überarbeitet werden. Es sollten links die Links stehen, in der Mitte eure Vorstellung, oben sollte der Willkommenstext stehen und unten habt ihr freie Wahl für die Gestaltung. Überarbeitet die bisher geschriebenen Dateien so, dass statt der Tabelle die Frames auf der Startseite sind!
Zielverweise: Bei der Arbeit mit Frames ist es notwendig, anzugeben, wo die Inhalte der Seiten, die verlinkt wurden, angezeigt werden sollen. Bei uns ist es die Mitte, d.h. das größte aller Framefenster, deshalb muss hinter jedem Link das Zielfenster wie folgt stehen: z.B. <a href=„stundenplan.html“ TARGET=„mitte“> …