Kaninchenzucht.De
Startseite
 
Weiterblättern
 
Internetinfo
 
Kontakt
 
HTML-Grundwissen

Was man wisen sollte, aber nicht muss:
Eine kurze Einführung in HTML

Eine Homepage besteht aus mehreren Textdateien, die in einem fürs Internet geeigneten Format vorliegen müssen, das den Aufbau der Seite in einer Art Programmiersprache beschreibt, die man als HTML bezeichnet.

Von einem normalen Text unterscheidet sich eine HTML-Seite dadurch, dass sie Markierungen (sog. "tags") enthält, die dem Browser sagen, wie er einen bestimmten Textabschnitt darstellen soll (etwa fett oder schräggestellt), wo er Bilder einfügen soll und auf welche anderen Internetseiten er verweisen soll. Diese Markierungen sind als solche nur in einem Textprogramm sichtbar, vom Browser werden sie nicht angezeigt, sondern direkt ausgeführt, indem etwa der Text fett dargestellt wird.

Die Markierungen werden zur Unterscheidung vom eigentlichen Text in spitze Klammern gesetzt: <markierung>.

Sie bestehen jeweils aus einer <anfangsmarkierung> und einer </endmarkierung>. Letztere trägt einen Schrägstrich nach der offenen Spitzklammer.

Die Markierung gilt jeweils für den zwischen Anfangs- und Endmarkierung stehenden Text.

Beispiel:

Im Texteditor:

Dies ist ein <b>sehr dickes</b> Buch.

ergibt im Browser:

Dies ist ein sehr dickes Buch.
Die Worte zwischen <b> und </b> werden also im Browser fett (engl. bold) dargestellt.

 

 

Jede HTML-Seite hat einen festgelegten Aufbau und besteht mindestens aus folgenden Befehlspaaren:

<html>
   <head>
      <title> Unsere Homepage </title>
   </head>
   <body>
      Hier steht der Text der Homepage.
   </body>
</html>

Der erste Befehl jeder Seite lautet <html> und ist unverzichtbar, damit die Datei von allen Browsern als HTML-Dokument erkannt wird. Die zugehörige Endmarkierung lautet </html> und steht ganz am Schluss der Seite.

An zweiter Stelle steht der "Kopf"-Bereich der Seite zwischen den Markierungen <head> und </head>. Die hierin eingeschlossenen Befehle sind im später angezeigten Dokument nicht sichtbar, sondern haben nur interne Bedeutung.

Im Kopfbereich steht auch der Titel der Homepage, der von den Befehlen <title> und </title> umgeben ist.
Der Titel ist aus 3 Gründen wichtig:

  1. Er erscheint in der Titelzeile des Browserfensters
    2. .
  2. Er wird als Lesezeichen-Titel verwendet.
  3. Er wird in Suchmaschinen als Eintragstitel verwendet.
    Man sollte daher eine sinnvolle Titelzeile wählen und nicht etwa "Unsere Homepage".

Ebenfalls im Kopfbereich kann folgende Befehlszeile zur Angabe von kaninchenrelevanten Schlagworten verwendet werden:

<meta name="keywords" content="Kaninchen,Kaninchenzucht,Kleintiere,Vereine">

Viele Suchmaschinen durchforsten nämlich automatisch das Netz und indizieren eine gefundene Seite nach den Informationen des obigen Meta-Tags. Finden sie aber diesen nicht vor, erfolgt die Indizierung einfach anhand der ersten Wörter einer Seite, was zumeist wenig vorteilhaft ist. Nicht alle Suchmaschinen werten zwar diese Meta-Informationen aus, sie sollten aber sicherheitshalber vorhanden sein.

Im Anschluss an den Kopfbereich folgt der Body, also Textkörper, innerhalb des Befehlspaares <body> und </body>. Die Anfangs-Body-Markierung kann noch erweitert werden durch Angabe der Hintergrund- und Textfarbe, sowie der Farbe für Links und besuchte Links :

<body bgcolor="#FFFFFF" text="#000000" link="#00FF00" vlink="#999999">
Die ersten beiden Ziffern nach dem Doppelkreuz geben den Rotanteil als Hexadezimalzahl an, die mittleren beiden den Grünanteil und die letzen beiden den Blauanteil. Für jeden Anteil kann man einen der folgenden Doppelwerte einsetzen: 00,33,66,99,CC,FF. Der Seitenhintergrund ist in dem Beispiel also weiß, der Text ist schwarz, die Links grün und die bereits angeklickten Verweise dunkelgrau. Statt einer Hintergrundfarbe mit Hilfe der bgcolor-Anweisung kann auch ein Hintergrundbild mit Hilfe der Anweisung background="muster.jpg" benutzt werden.

Alles, was sich zwischen den beiden Body-Tags befindet, wird im Browserfenster dargestellt und ist der eigentliche Inhalt der Homepage.

 

 

Wenn Sie in Ihrem Homepage-Text einen neuen Absatz beginnen möchten, reicht es in HTML nicht, auf die Return-Taste (Eingabetaste) zu drücken, sondern man muss ausdrücklich die Markierung <br> einfügen (keine Endmarkierung nötig).

Beispiel:

Im Texteditor:

Dies ist ein Kaninchen.<br>Das ist ein Hase.
Jenes ist ein Hamster.

ergibt im Browser:

Dies ist ein Kaninchen.
Das ist ein Hase. Jenes ist ein Hamster.

Für einen Absatz mit zusätzlicher Leerzeile fügt man <p> ein.

Beispiel:

Im Texteditor:

Dies ist ein Kaninchen.<p>Das ist ein Hase.

ergibt im Browser:

Dies ist ein Kaninchen.

Das ist ein Hase.

Im Browser gibt es weder einen festen Blocksatz noch eine automatische Worttrennung, sondern der Text nimmt normalerweise die jeweilige Breite des Fensters ein und wird stets am Fensterrand umgebrochen und in der nächsten Zeile fortgesetzt. Wenn man nicht möchte, dass dabei zwei zusammengehörige Wörter auseinandergerissen werden, muss man statt eines normalen Leerzeichens folgenden Befehl dazwischensetzen:&nbsp;
Dies nennt sich "Non breaking space" (nicht umbrechendes Leerzeichen) und ist hilfreich bei Ausdrücken wie "3&nbsp;Uhr", welches im Browser "3 Uhr" ergibt, ohne das jemals ein Zeilenumbruch zwischen "3" und "Uhr" geraten kann.

Falls man mehrere Leerzeichen nacheinander schreibt, so werden diese im Browser ignoriert und nur ein einziges dargestellt. Nur das spezielle nicht umbrechende Leerzeichen (&nbsp;) wird nicht weggekürzt und kann daher mehrfach nacheinander eingegeben werden.

 

 

Zur Textgestaltung sind folgende Markierungen hilfreich:

<b> fett </b>

<i> kursiv, schräg </i>

<h1> größte Überschrift </h1>

<h2>große Überschrift </h2>

<h3> normalgroße Überschrift </h3>

<h4> bis <h6>: weitere Überschriften in abnehmender Größe. Nach jeder Überschrift wird automatisch ein Absatz eingefügt.

<big> grosse Schrift </big>

<small> kleine Schrift </small>

<center> zentrierter Text (oder Grafik) </center>

<blockquote> eingerückter Text </blockquote>

<font color="red"> bunter Textabschnitt durch Farbbezeichnung </font>
(Andere Farbbezeichnungen sind: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow)

<font color="#FF0000"> bunter Text in hexadezimalen R-G-B-Werten (siehe oben) </font>

 

 

Eine Liste erstellt man, indem man vor jeden Listeneintrag die Markierung <li> setzt und die Gesamtheit aller Listeneinträge mit den Makrierungen <ol> und </ol> umgibt:

Beispiel:

Im Texteditor:

<ol>
<li>Hermelin
<li>Farbenzwerg
<li>Rexzwerg
</ol>

ergibt im Browser:

  1. Hermelin
  2. Farbenzwerg
  3. Rexzwerg
Benutzt man statt <ol> und </ol> die Markierungen <ul> und </ul> erscheinen statt der Zahlen nur runde Aufzählungszeichen.

 

 

Die Bilder auf einer Internetseite sind unabhängige, einzelne Grafikdateien, die erst im Browser in den Text eingeblendet werden, wenn man im HTML-Code folgendem Befehl einfügt (ohne Endmarkierung):

<img src="testbild.jpg" width="200" height="140" border="0" alt="Nur ein Testbild">

Hinter "src=" steht der Name der Bilddatei oder deren Internetadresse, wenn sich das Bild nicht auf dem eigenen Homepagespeicherplatz befindet.

"width" gibt die Breite und "height" die Höhe des Bildes an. Hier sollte man die korrekten Werte angeben, die sich mit einem Grafikprogramm ermitteln lassen. Gibt man falsche Werte an, wird das Bild in anderen Abmessungen dargestellt, was zahlreiche Nachteile hat. Lässt man die Höhen- und Breitenangabe ganz weg, wird das Bild korrekt dargestellt, aber der Seitenaufbau verzögert sich.

Mit "border=0" verhindert man, dass ein rechteckiger Rand (Border) um das Bild dargestellt wird.
Der Text nach "alt=" wird angezeigt, wenn jemand in seinem Browser die Grafikdarstellung ausgeschaltet hat oder man den Mauszeiger über dem Bild ruhen lässt.

 

 

Einen Link (Verweis), der per Mausklick auf eine andere Seite führt, gibt man folgendermaßen ein:

<a href="linkadresse" target="hauptrahmen">Hier steht der Linktext.</a>

Hinter "href=" gibt man als Linkadresse entweder den Dateinamen einer Seite der eigenen Homepage an, oder aber die vollständige mit "http://"; beginnende Internetadresse einer Seite, die nicht zur eigenen Homepage gehört.

Hinter "target=" wird angegeben, wo die neu aufgerufene Seite angezeigt werden soll. Hier kann entweder der Name eines bestimmten Bildschirmteilbereiches (eines sogenannten Frames oder Rahmens) angegeben werden oder aber das Wort "_top" (mit Unterstrich), wenn die neue Seite das gesamte Fenster einnehmen soll, bzw. "_blank", wenn sie in einem eigenen Fenster geöffnet werden soll.

Der Verweis-Text, der später unterstrichen im Browser erscheint, steht zwischen <a href="" target=""> und </a>

Ein spezieller Link ermöglicht das Versenden einer E-Mail bei Mausklick auf den Verweis:

<a href="mailto:emailadresse"> Schreiben Sie uns. </a>
Statt "emailadresse" ist hier die tatsächliche E-Mailadresse des Vereines einzutragen.

 

 

Ein wichtiges Element zur Seitengestaltung in HTML sind Tabellen. Diese benutzt man nicht nur zur Anzeige von Schauergebnissen oder Mitgliedslisten, sondern man sollte den gesamten Text samt Bilder einer Seite in Tabellen setzen. Auf diese Weise kann man Textbereiche farbig unterlegen und die Anordnung von Text und Grafik genauer festlegen. Auch mehrspaltiger Text und breite Seitenränder sind so möglich.

Der Grundaufbau einer Tabelle ist folgender:

<table border="1">
   <tr>
      <td>Zelle 1 von Reihe 1</td>
      <td>Zelle 2 von Reihe 1</td>
   </tr>
   <tr>
      <td>Zelle 1 von Reihe 2</td>
      <td>Zelle 2 von Reihe 2</td>
   </tr>
</table>
Dies entspricht folgender Browser-Anzeige:
Zelle 1 von Reihe 1Zelle 2 von Reihe 1
Zelle 1 von Reihe 2Zelle 2 von Reihe 2
Zwischen <td> und </td> steht also der Inhalt einer Tabellenzelle und zwischen <tr> und </tr> alle Zellen, die zu einer Reihe gehören. Die Markierungen <table> und </table> wiederum schließen die gesamte Tabelle ein.

 

Die Anfangsmarkierung <table> kann noch durch einige Angaben erweitert werden:

<table border="0" cellspacing="2" cellpadding="4" width="99%">

Mit "border=0" schaltet man den sichtbaren Tabellenrand aus.

"cellspacing=" gibt den Abstand zwischen den Zellen an.

"cellpadding=" gibt an, wieviel Platz in jeder Zelle um den Text herum gelassen wird.

"width=" gibt an, wie breit die Tabelle sein soll, entweder als absolute Angabe oder als Prozentwert im Verhältnis zur Fensterbreite.

 

Die Markierung <td> der Tabellenzelle kann durch folgende Angaben ergänzt werden:

<td bgcolor="#CCCCCC" align="center" rowspan="2">

Mit "bgcolor=" kann man jeder Tabellenzelle eine Hintergrundfarbe zuweisen.

Die Angabe hinter "align=" bestimmt, ob der Text zentriert (center) oder linksbündig (left) oder rechtsbündig (right) angeordnet sein soll.

Mit "rowspan=" gibt man an, ob die Zelle über mehrere Tabellenreihen hinweg reichen soll.

Entsprechend kann man mit "colspan=" angeben, dass eine Zelle so breit wie mehrere andere Zellen sein soll.

 

Statt der Markierungen <td> und </td> kann man für Tabellenüberschriften auch <th> und </th> benutzen, wodurch der enthaltene Text fett dargestellt wird.

 
Weiter gehende Informationen
Ein online abrufbares Lehrbuch rund um HTML und das Internet ist Self-HTML von Stefan Münz.

[Impressum]   Freitag, 27.Januar 2006   [Kontakt]
Unsere Linksammlungen sind als Datenbankwerk urheberrechtlich geschützt.

Kaninchenzucht.De

Vereine

Züchter

Halter

Weltweit
 

Rassen

Wissen

Markt

Kinder