Post on 06-Apr-2015
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: Ä = Ä„ = &Quot; & = & < = < > = > Leerzeichen =   oder  
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“> …