www.olten24.ch - Aktuelles aus der Region

| Internetlexikon, Einführung Html

Eine kurze Einführung in HTML

1. Einleitung

Was ist HTML? HTML ist die Abkürzung für Hyper Text Markup Language. Weiter möchten wir nicht in die Theorie vorstoßen. HTML als Programmiersprache zu bezeichnen wäre falsch. Es handelt sich viel eher um eine Layoutsprache, das heißt, sie definiert das Aussehen einer Seite.

2. Die zweite Einleitung

Grundsätzlich sind HTML Dokumente (Datei Erweiterung entweder .htm oder .html) Textfiles, deshalb kann sie auch jeder sehr leicht im primtivsten Text Editor erstellen. Innerhalb dieser Dokumente kann man nun zwei unterschiedliche Element-Gruppen erkennen. Zum Einen könnte man den ganz normalen Text, wie er z.B. auf dieser Seite steht, auch aus dem HTML File herauslesen. Zum Anderen die sogenannten "Tags" (sprich: Tägs). Was ist aber ein "Tag"? Nun, als Tags bezeichnet man die Befehle, die den Browser (das ist z.B. Netscape Navigator) dazu veranlassen, das Text anders dargestellt wird (z.B. fett und gross). Tags erkennt man daran, daß sie mit offenen eckigen Klammer < beginnen und einer geschlossenen eckigen Klammer > enden. Da ein Tag allerdings meistens nicht für ein gesamtes Dokument gilt, muß der Bereich des Textes, auf den man Einfluß nehmen will, begrenzt werden. Das geschieht durch Eröffnungs- bzw. Endtags. Die beiden unterscheiden sich nur durch einen einzigen Schrägstrich/, der aber kann entscheidend sein, und wenn er fehlt, verwirrt das einen Browser ziemlich oft.

Wir wiederholen:
Ein Beispiel für einen Eröffnungstag:	<H2>
Ein Beispiel für einen Endtag:	</H2>

So viel zu Beginn, gleich geht's weiter!

3. Die erweiterte Grundstruktur eines HTML Dokuments

Da Computer nicht wirklich intelligent sind, müssen innerhalb eines HTML Dokuments einige Regeln befolgt werden. Um den gesamten Inhalt schlingt sich der <HTML>....</HTML> Tag. Erst dadurch erkennt der Browser, daß es sich um ein HTML Dokument handelt. Innerhalb dieses <HTML> Tags muß zuerst der <HEAD>....</HEAD> Tag folgen. In ihm sollten Information enthalten sein, auf die ich später eingehen werde. Dann folgt der <BODY>....</BODY> Tag. Dieser enthält alle sichtbaren Informationen (und auch noch ein paar andere).

Wir wiederholen die Grundstruktur eines HTML Dokuments:

4. Der <HEAD>...</HEAD> Tag

Also, der <Head>...</Head> Tag beinhaltet normalerweise nur einen einzigen weiteren Tag, nämlich den <TITLE>...</TITLE> Tag. Dessen Inhalt wiederum gib an, was ganz oben am Fensterrand als Bezeichnung für die Seite steht. Im Falle dieses Dokuments ist das daher: <TITLE>Olten Online - Einführung in HTML</TITLE>

5. Der <BODY>...</BODY> Tag

Hier beginnt nun die weite, weite Welt von HTML, total logisch und trotzdem manchmal schwierig zu durchschauen. Der Inhalt des <BODY>...</BODY> Tags ist verantwortlich für den gesamten Inhalt einer WWW Seite. Hier kann man Texte in den unterschiedlichsten Variationen, Bilder, Tables (darauf wird vielleicht noch viel, viel später eingegangen), Töne und natürlich die wesentlichen Links einfügen. Ein Link ist ein Art Wegweiser (im Browser meistens blau und unterstrichen) durch den man (durch draufdrücken) zu einem anderen Ort im Internet gebracht wird. Doch beginnen wir erst mal einfach:

5a) Einfache Tags

Wenn man innerhalb des <BODY>...</BODY> Tags einen schlichten Satz (z.B.: Olten Online) setzt, dann würde im Browser in normaler Größe, weder dick noch schiefgestellt in der linken oberen Ecke Ich bin Hans stehen. Die folgenden einfachen Tags verändern das Aussehen des Satzes:

Tag	So würde es aussehen:
<b>Olten Online</b>	Olten Online
<i>Olten Online</i>	Olten Online
<h1>Olten Online</h1>	Olten Online
<h1> steht für "Heading 1", was wiederum die Bezeichnung für eine sehr dicke große Überschrift ist. Es gibt diesen Tag allerdings auch mit den Zahlen 2-6; je größer die Zahl, desto kleiner die Überschrift.
Jetzt noch einmal zur Wiederholung ein kleines Beispieldokument
<html> <head><title>Olten Online</title></head> <body><h2>Herzlich Willkommen!</h2><br> Wir hoffen, <b>Sie</b> haben recht viel Spass an unserer <i>Homepage.</i> </body> </html>	Herzlich Willkommen! Wir hoffen, Sie haben recht viel Spass an unserer Homepage.

Na, das ist doch schon was! Den schlauen Füchsen und Füchsinnen unter Euch sind natürlich zwei Neuigkeiten aufgefallen:

Die Tags sind klein geschrieben!!!??? Richtig, denn das ist dem Browser wurscht.
Da hat sich ein neuer Tag eingeschlichen!!!??? Auch richtig, ein recht wichtiger sogar, nämlich  . Ist Dir noch was aufgefallen? Dieser Tag ist nicht zweiteilig (zumindest nicht notwendigerweise), er braucht keinen Endtag.

Wie auch immer, der   Tag leitet eine neue Zeile ein. Und jetzt aufgepaßt! Wichtig! Wenn Du innerhalb eines HTML Dokuments einen langen Text stehen hast, in dem kein Tag vorkommt, dann füllt der Browser jede Zeile voll und hüpft dann in die nächste Zeile. Durch den Tag kannst Du ihn dazu vorzeitig zwingen. Auch wenn im HTML Dokument jedes Wort Deines Textes in einer neuen Zeile stünde, würde der Browser die Zeile vollfüllen, denn das ist seine Pflicht, und er läßt sich nur durch den Tag davon abhalten. Es geht zwar auch schöner, aber wenn Du den Tag zweimal hintereinander stellst, kriegst Du eine Leerzeile.

Was mir in diesem Zusammenhang auch noch wichtig erscheint: Der Browser akzeptiert zwischen zwei Wörtern höchstens einen Abstand. Das heißt, wenn Du ein Wort in Dein Dokument eintippst, dann zehn Mal auf die Space Taste hämmerst und dann noch ein Wort eintippst, so wird das Ganze im Browser trotzdem nur einen einzigen, ganz normalen Abstand haben. Weil wir gerade so bei den Abständen sind, einen Abstand mit einem Strich (auch Querbalken genannt), erreichst Du mit dem <HR> Tag. Wir machen jetzt einmal so einen Strich, dann geht's weiter mit komplizierteren HTML Tags.

5b) Kompliziertere Tags Nun wollen wir einmal ein Bild einfügen, und jetzt wird's ein bißchen schwieriger, denn unsere Tags bekommen so eine Art Erweiterung. Wir erklären nun anhand eines Beispiels die genaue Funktion: <IMG SRC="oltenbanner.gif"> Diesen Tag könnte man so wie er hier steht in ein Dokument einfügen. IMG ist die Abkürzung für Image und kennzeichnet ein Bild. SRC ist die Abkürzung für Source. Innerhalb der Anführungszeichen wird der Name (also die Quelle = Source) des Grafik-Files angeführt (in diesem Fall oltenbanner.gif). Wie auch schon und <HR> ist der <IMG> Tag einteilig. Das Bild vom Oltener Wappen muss jetzt nur noch im selben Verzeichnis wie auch das Dokument sein, und schon sieht man es im Browser. Um mit den Erweiterungen noch mehr Verwirrung zu stiften, erwähnen wir gleich jetzt die align="..." Erweiterung. Auch sie möchte ich anhand des etwas modifizierten Beispiels vorstellen: <IMG SRC="oltenbanner.gif" align="right"> Wenn mann jetzt das Beispiel betrachtet, kann man erkennen, das es nur "erweitert" wurde, nämlich um align="right". Diese Erweiterung veranlaßt den Browser, das Bild nicht am linken Rand, sondern am rechten darzustellen. Die align="..." Erweiterung wird auch von einigen anderen Tags aktzeptiert, und Probieren geht bekanntlich über studieren! (Du kannst auch nichts falsch machen, denn tust Du's doch, übersieht es der Browser, glaub mir!).

6. Links

So, jetzt wollen wir einmal einen heiss ersehnten Link einbauen. Noch einmal zur Wiederholung, ein Link kann ein Wort, ein Satz, ein Buchstabe oder ein Bild sein, der <A>...</A> Tag (eine Abkürzung für Anchor) ist vielfältig anwendbar. Wir wollen unsere liebe Oltner Home Page nicht vergessen, und eben diese wünscht sich, daß von seiner Seite ein Link zu einer Seite mit Informationen über das Internet geht. Der <A>...</A> Tag umschließt also den Namen Internetlexikons. Freilich müssen wir auch irgendwo die Zielseite unterbringen , wir nennen sie der Einfachheit halber internetlexikon.htm. Das Ziel wird durch die Tag-Erweiterung HREF="..." definiert. So, unser Beispiel sieht also folgendermaßen aus: zur Hauptseite des <A HREF="internetlexikon.htm">Internetlexikons</A> Im Browser sieht das dann so aus: zur Hauptseite des Intenetlexikons So, wir denken, das ist gar nicht so schwer, also können wir gleich ein paar Worte zu der Adressierung der Zielseite verlieren. In unserem Beispiel sind wir davon ausgegangen, daß sich die Datei internetlexikon.htm im selben Verzeichnis befindet wie auch die Datei, aus der der Link herausführt. Wichtig!: Wenn ein Link auf eine Datei im selben Verzeichnis verweist, so darf auf keinen Fall http:// davorstehen. Verweist der Link allerdings ganz woanders hin, sagen wir mal zum Website von Heutronic AG, so muß der Link lauten (Und hier ist http:// davor wichtig!):

Zur Home-Page von der <A HREF="http://www.heutronic.ch">HEUTRONIC</A> Im Browser sieht das dann so aus: Zur Home-Page der HEUTRONIC Will man ein Bild als Link benutzen, umschlingt man mit <A>...</A> ganz einfach den <IMG> Tag: <A HREF="http://www.heutronic.ch"><IMG SRC="logo.gif"></A>

Hier eine kleine Übersicht über den <IMG> bzw. den <A> Tag
Tag	mögliche Erweiterungen	Erklärung
<IMG>	SRC="..."	Anstelle der ... setzt man den Pfad und Namen des Grafikfiles ( .gif und . jpg werden normalerweise von allen Browsern unterstützt)
	ALIGN="..."	Anstelle der ... setzt man left, middle, right, top, bottom, etc.. Dadurch wird die Position des Bildes geändert.
	BORDER="..."	Anstelle der ... setzt man eine Zahl zwischen 0 und 6. Mit dieser Erweiterung kann man Bildern einen Rahmen geben, 0 ist keiner, 6 ist ein sehr dicker Rahmen.
<A>...</A>	HREF="..."	Anstelle der ... setzt man das Ziel (eine Datei oder eine ganze URL)
	NAME="..."	Diese Erweiterung wird anstelle der HREF Erweiterung benutzt. Dadurch wird aus einem Link ein Ziel FÜR einen Link innerhalb eines Dokuments.

kpic

Olten Online

Herzlich Willkommen!