Als ich den HTMLKurs begann, habe ich am Anfang absichtlich darauf verzichtet etwas über die Grundstruktur eines HTMLDokumentes zu schreiben. Das kam daher, weil mein Texteditor den ich benutzte, zum Erstellen von solchen Seiten eine Fuktion besaß die dieses Grundgerüst von selbst erstellte. Ich braucte praktisch nur den Titel, Namen des Authors und Stichwörter für die METATags einzugeben, und den Rest machte dann mein Editor selbstständig.
Wer das auch so haben will der sollte folgene Editoren verwenden:
AMIGA:
PC:
Alle diese Editoren sind kostenlos erhältlich und uneingeschränkt
nutzbar!
Wer nun aber keinen dieser Editoren hat kann sich natülrlich auch selbst
die Arbeit machen und soein Grundgerüst in einen stinknormalen Texteditor
eintippen.
Das Grundgerüst sieht dabei so aus:
<html>
<head>
<title>Titel der Datei</title>
</head>
<body>
Inhalt der Datei
</body>
</html>
Wichtiger Hinweis!!!
Alles was nachher im Browserfenster angezeigt werden soll muss zwischen <body> und </body> stehen! |
Alles was zwischen <title> und </title> steht wird in der Regel in der Titelzeile des Webbrowsers angezeigt. Im HEADTag könen aber auch noch andere Informationen stehen, diese nennt man METATags. Sie enthalten Informationen über den Inhalt des Dokuments, welche für Suchmaschinen von Bedeutung sind, den Namen des Authors oder mit welchem Editor das Dokument verfasst wurde, sowie das Datum der letzten Aktualisierung.
Name des Authors:Beschreibung des Inhalts<meta name="author" content="Name">
Sclüsselwörter für Suchmashinen<meta name="description" content="Text">
<meta name="keywords" content="Wort, Wort, Wort">
Zeitpunkt der Veröffentlichung
<meta name="date" content="1998-04-30T08:49:37+00:00">
Als HTML entwickelt wurde, war es immer nur möglich eine Seite im Browser anzuzeigen. Die ersten Browser konnten auch keine Grafik anzeigen, und somit war das auch nicht weiter das Problem. Als dann aber Grafik mit ins Spiel kam, wollte man gestalterisch natürlich seine Dokumente schön präsentieren, was aber schwierig war, da man nun Wollte man ein durchgängiges Design auf seiner Internetseite haben in jedem HTML-Dokument sein Grunddesign jedes Mal neu einbinden musste, was die Ladezeiten nicht unbedingt verkürzte und den Nachteil hatte, dass wenn der Text größer war als der Bildschirm dies ermöglichte, das ganze Dokument gescrollt werden musste und somit z.B. die schön gestaltete Überschrift oder das aufwendige Design nicht mehr zu sehen war.
Um das zu ändern, entwickelte man das Frameset, welches wieder viele neue Möglichkeiten bereitstellte. Hier möchte ich nun ansetzen und erklären wie man Frames in HTML einbaut. Zuerst einmal muss man sagen das ein Frameset in der Regel immer nur 2 Frames enthält. Man kan diese horizontal oder Vertikal aufteilen und mit weiteren Framesets verschachteln und erweitern. Bei der COMA handelt es sich um ganze 5 Frames!
Um beim Erstellen eines Framesets auch den Überblick zu behalten, sollte man sich zuerst Gedanken machen wie man sich das Browserfenster aufteilen will. Man zeichnet sich dazu am besten erst mal eine Skizze der ganzen Webseite, so wie sie später mal aussehen soll. Danach teilt man sich die Seite in verschiedene Felder (Frames) auf. Man sollte jedem eigenen Feld (Frame) dann einen Namen geben der dafür sinnvoll erscheint (nav=Navigationsleiste, main=Hauptframe u.s.w.), nun können wir beginnen.
Aufbau eines einfachen Framesets
<frameset rows|cols="x,*">
<frame src="URL" name="Framename"> ; erstes Frame
<frame src="URL" name="Framename"> ; zweites Frame
</frameset>
![]() |
Hinweis!!!
rows Steht für Zeilenweise (horizontale Trennung der Frames)
|
---|
Aufbau eines komplexen Framesets
<frameset rows|cols="x,*"> <frame src="URL" name="Framename"> ; erstes Frameoder
<Frameset rows|cols="x,*">
<frame src="URL" name="Framename"> ; zweites Frame
<frame src="URL" name="Framename"> ; drittes Frame
</Frameset>
</frameset>
<frameset rows|cols="x,*">
<frame src="URL" name="Framename"> ; erstes Frame
<Frameset rows|cols="x,*">
<frame src="URL" name="Framename"> ; zweites Frame
<Frameset rows|cols="x,*">
<frame src="URL" name="Framename"> ; drittes Frame
<frame src="URL" name="Framename"> ; viertes Frame
</frameset>
</frameset>
</frameset>
|
Wichtiger Hinweis!!!
|
---|
Wie man sich nun ein fünftes oder gar sechtes Frame einbaut, kann man sich an Hand der Beispiele sicherlich schon denken.
Was ist nun aber mit denen die keine Frames darstellen können? Sehen die dann von meiner Webseite überhaupt was??? Die Antwort ist Nein. Es sei denn sie denken auch an diese Leute bei der Gestaltung ihrer Webseite. Man sollte den unwissenden Besucher zumindest davon informieren, dass er sich nun endlich einen framefähigen Browser zulegen soll. Für diesen Zweck schreibt man einfach im <Body>Einen Hinweis! ;-)</Body>
Das könnte dann ungefähr so aussehen:
Grundgerüst mit Frameset und Hinweis für nicht framefähige Webbrowser.<html>
<head>
<title>Meine Hompage</title>
<frameset cols="150,*">
<frame src="links.html" name="links"> ; erstes Frame
<Frameset rows="70,*">
<frame src="navigation.html" name="nav"> ; zweites Frame
<Frameset cols="*,60">
<frame src="hauptseite.html" name="main"> ; drittes Frame
<frame src="navigation2.html" name="nav_rechts"> ; viertes Frame
</frameset>
</frameset>
</frameset>
</head>
<body>
<h1>Diese Internetseite benötigt einen framefähigen Browser!</h1>
</body>
</html>
Und wem das Ganze noch nicht kompliziert genug ist, der darf noch bestimmen ob die jeweiligen Frames Scrollbalken haben dürfen oder nicht und ob die Frames Rahmen haben sollen oder eben nicht.
Diese befehle stehen in den FramesetTags oder in den FrameTags.
Sie lauten wiefolgt:
Scrollbalken
immer an:
scrolling=yes
immer aus:
scrolling=no
Je nach dem, ob der Text in den Bildschirm passt oder nicht:
scrolling=auto
<frame src="URL" name="Name" scrolling=yes|no|auto>
Framerahmen
frameborder=x
<frame src="URL" name="Name" frameborder=x>
x = Zahlenwert in Pixeln für die Dicke des Rahmens
<frameset ... border=x frameborder=x framespacing=x>
Framenamen
Kommen wir nun zu en Framenamen die wir janun an jedes Frame vergeben haben. Dadurch dass jedes Frame anders heißt, ist es nun für uns als HTMLProgrammierer einfacher diese auseinander zu halten. Haben wir nämlich ineinem Frame einen Link für ein anderes Dokument, können wir nun bestimm in welchem Frame dieses angezeigt werde soll. Das macht sich besoders bei Navigierungsleisten recht gut. Soein Link muss dann in etwa so aussehen:
<a href="dokument.html" target="main">Dokument1</a>Hier erscheit nun das "dokument.html" im Frame mit dem Namen "main".
![]() |
Soll die aufgerufene HTML-Datei aber im selben Frame erscheinen, so ist die Angabe des Targets (Ziel) nicht nötig. Wenn man allerdings eine andere Internetseite, z.B. "www.yahoo.de" verlinken will, sollte man darauf achten dass man als Target="_top" oder Target="_blank" benutzt, da sonst ein unschöner Schaufenstereffekt entsteht und die fremde Webseite als Unterseite im Frame angezeigt wird. |
Hier nochmal die Erklärung der möglichen Targets:
TIPP: | Bevor man sich eine Seite mit Frames aufbaut sollte man sich auf alle Fälle vorher eine Skizze von der zu erstellenden Internetseite anfertigen. Damit behält man später besser den Überblick. |
Sonderzeichen in HTML
Sicher weiß jeder dass jedes Land einen eigenen Tastaturcode besitzt und dass es z.B. bei einem Computer in America kein ä, ö ü und ß vorkommt. Da wir hier aber Dokumente schreiben die u.U. auch in Amerika oder einem anderen Land irgendwo auf der Welt aufgerufen werden können, müssen wir uns nun Gedanken machen wie diese besonderen Zeichen eingegeben werden sollen. HTML-Dokumente liegen ja nun im ASCII Textformat vor und der ASCII-Code ist weltweit standardisiert. Der ASCII-Code enthält dafür 128 Zeichen die in jedem Land gleich sind. Es handelt sich hierbei um die am häufigsten benutzten Zeichen. Dazu zählen z.B. alle 26 Buchstaben des Alphabets in großer und kleiner Ausführung, die Zahlen 0-9, einige weltweit gebräüchliche Sonderzeichen und Steuerzeichen (Return, Zeilenumbruch, Tabulator u.s.w.)
Jeder Zeichensatz kann aber bis zu 256 Zeichen umfassen. Das heißt also dass die Zeichen 129-256 für jedes Land unterschiedlich sind. Natürlich kommen in diesen 128 Zeichen auch ä, ö, ü und ß vor, aber in jedem Ländercode haben diese Zeichen eine andere Adresse innerhalb dieses erweiterten ASCII-Codes. Um nun aber trotzdem die entsprechenden Sonderzeichen anzeigen lassen zu können, bedient man sich im HTML einer einfachen wie auch genialen methode. Man gibt einfach eine Beschreibung des Zeichens mit Hilfe der weltweit standardisierten ersten 128 Zeichen des ASCII-Codes und schwuppdiewupp hat man z.B. ein großes Ä auf einem amerikanischen Computer. :-)
Einige der wichtigsten Zeichen möchte ich hier kurz vorstellen.
Zeichen | HTML-Code | Beschreibung | ||||
---|---|---|---|---|---|---|
![]() |
||||||
ä | ![]() |
ä | ![]() |
a-Umlaut | ||
Ä | Ä | A-Umlaut | ||||
ö | ö | o-Umlaut | ||||
Ö | Ö | O-Umlaut | ||||
ü | ü | u-Umlaut | ||||
Ü | Ü | U-Umlaut | ||||
ß | ß | sz-Ligatur | ||||
® | ® | Registriert | ||||
© | © | Copyright | ||||
| ™ | Trademark | ||||
£ | £ | Pfund | ||||
¥ | ¥ | Yen | ||||
€ | € | Euro | ||||
|
&lquo; | Anführungszeichen links oben | ||||
|
&rquo; | Anführungszeichen rechts oben | ||||
|
„ | Anführungszeichen unten | ||||
|
‰ | Promille | ||||
° | ° | deutsches Grad | ||||
¼ | ¼ | ein Viertel | ||||
½ | ½ | ein Halb | ||||
¾ | ¾ | drei Viertel | ||||
• | • | Bullet | ||||
| erzwungenes Leerzeichen (non breakable Space) | |||||
< |
<
|
spitze Klammer links
|
||||
> | > | spitze Klammer rechts | ||||
& | & | Und-Symbol | ||||
" | " | Zollzeichen (einfaches Anführungszeichen) |
Man, ich dachte nicht dass das Thema so umfangreich wäre. Es fehlt noch Einiges an mehr oder weniger wichtigen Erläuterungen zu den Framesets. Diese werde ich allerdings erst in den nächsten Kurs unterbringen. Mit dem was heute dabei war kann man schon ne ganze Menge anstellen. Das solls erst Mal wieder gewesen sein. Viel Spaß beim Ausprobieren!
Bis zum nächsten Mal, euer Mani!