HTML H t M L H yper t ext M arkup L anguage. DAS GRUNDGERÜST EINER HTML-DATEI Tags Sprich: Tägs > Quelltext

HTMLHTMLHHyperttext MMarkup LLanguage

DAS GRUNDGERÜST EINER HTML-DAS GRUNDGERÜST EINER HTML-DATEIDATEI

TagsSprich: Tägs

>

Quelltext

1. Erstelle eine HTML-Datei „Persönliches“, die dich etwas näher beschreibt! (Beim Speichern auf die Endung *.html achten!)

2. Im Browserfenster sollte dann etwas über dich zu lesen sein.

3. Sonderzeichen müssen u.U. durch sogenannten Entitys (Zeichenfolgen) ersetzt werden:z.B. ä = ä ü = ü ö = ö ß = ßDie großen Umlaute so: Ä = &Auml„ = &Quot; & = & < = < > = > Leerzeichen = &#160 oder &nbsp

Gestalte eine erste Seite mit persönlichenInformationen. 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

HINTERGRUNDMUSIKHINTERGRUNDMUSIK

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

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. TabellenzellenJede einzelne Zelle einer Tabelle muss

extra definiert werden.<td>…..</td> (table data) …diese

Zellen erscheinen nebeneinander

<tr>….</tr> (table row) …Zeilen definieren

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“!

Tabellenattribute1.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.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“>)

Vorbemerkung:Alle Attribute zur Tabellenbreite, -höhe, -

farbe undAusrichtung gelten auch für die Zellen.

Statt <table Attribut =„Wert“> heißt es dann

<td Attribut=„Wert“>!!

2.1. Ausrichtung horizontal <align

=„left/center/right“>2.2. Ausrichtung vertikal

<valign = „top/middle/bottom“>

(oben/mittig/unten)

Erstellen Sie die html-Datei „table1.html“, die zufolgender 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

Aufgabe von Listen:Mit Listen können Textinhaltehierarchisch gegliedert werden. Dabei

gibt esTags für nummerierte Listen, Listen mitAufzählungszeichen und

Definitionslisten.

Tag: <ol>…</ol> jeder Listeneintrag wird

dabei in<li>…</li> eingebunden (ordered list nummerierte Liste)

<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:

type = Wert Werte: A… Nummerierung lautet A,B,C,…

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 1value = Zahl Bsp: <li value=50>… Liste geht hier mit Nr. 50 weiter

Schreiben Sie einen Quelltext, der das Bild im

Browser erzeugt!

Tag: <ul>…</ul> jeder Listeneintrag wird

dabei in <li>…</li> eingebunden (unordered list unnummerierte Liste)

<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:

type = ZeichenformZeichenform: circle…

Kreis als Zeichensquare…Rechteck als Zeichendisc …ausgefüllter Kreis

Schreiben Sie einen Quelltext, der das Bild im

Browser erzeugt!

Die Einträge von Definitionslisten bestehen ausden beiden Elementen Überschrift und Text. DerText wird relativ zur Überschrift nach rechtsgerückt.Tag: <dl> Listenanfang

<dt>…</dt)Überschrift<dd>…</dd> Erläuterung</dl> Listenende

Geben Sie folgenden Quelltext ein und sehen Siesich das Ergebnis im Browser an!<html> <head> <title> Definitionsliste </title> </head> <body> <dl> <dt> Begriff 1</dt> <dd> Definition des Begriffs 1</dd> <dl> <dt>Unterbegriff 1</dt> <dd> Definition des Unterbegriffs 1</dd> </dl> <dt> Begriff 2</dt> <dd> Definition des Begriffs 2</dd> </dl> </body> </html>

Schreiben Sie einen Quelltext, der das folgendeBild erzeugt:

Frames sind frei skalierbare Bereiche, die feste Inhalte, aber auch Links enthalten können, die die Anzeige in anderen Abschnitten der Seite beeinflussen.

<html> <head> <title>Horizontale Aufteilung</title> </head>

<Frameset RowsRows="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.

Bemerkung: Die Dateien oben.html und unten.html müssen noch geschrieben werden und im selben Ordner wie die Framedatei liegen!!!

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)

<html> <head> <title>Vertikale Aufteilung</title> </head>

<Frameset ColsCols="40%,60%"> Cols = Spalten

<Frame src="links.html"> <Frame src="rechts.html"></Frameset><Body>Dein Browser unterstützt keine Frames!</body>

</html>

Bemerkung: Die Dateien links.html und rechts.html müssen noch geschrieben werden und im selben Ordner wie die Framedatei liegen!!!

1. 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).

<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></Frameset><Body>Dein Browser unterstützt keine Frames!</body>

</html>

Vorarbeit: Zunächst überlegt man sich eine Grobeinteilung der Seite in Frames: z.B. Skizze

HauptensterVerweis

eMenüo.ä.

Überschrift/ Titel der Seite

Email Gästebuch LinksEmail Gästebuch Links

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> </Frameset> <Body> Dein Browser unterstützt keine Frames! </body> </html>

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!

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“> …

Documents

HTML H t M L H yper t ext M arkup L anguage. DAS GRUNDGERÜST EINER HTML-DATEI Tags Sprich: Tägs > Quelltext