Selber HTML-Dasteien schreiben

started 13.06.1997 - updated 01.01.1999

Selber basteln oder nix verstehen?

Es gibt verschiedene Möglichkeiten, HTML-Dokumente zu erzeugen.

Sie können sich Programme, Makros und Patches aus dem WWW herunterladen, die es Ihnen automatisch besorgen.
Sie können aber auch einen bestehenden ASCII- oder ANSI-Text in Ihren Lieblings-Editor laden und die HTML-Tags von Hand hineinbasteln.

Daß ich die letzte Methode bevorzuge, ist klar, denn so können Sie nicht nur HTMLs erzeugen, sondern auch lernen, was die Dinger im Innersten zusammenhält, auftretende Fehler bewerten und sie ggf. reparieren.

0. Grundzüge einer HTML-Datei

0.1 Umlaute

Wenn Sie sich z.B. diese Datei hier mit einem Souce Viewer ansehen (z.B. View_Source oder Ansicht_Queltext), erkennen Sie, daß sie nur aus ASCII- bzw. ANSI-Text und einigen merkwürdigen Befehlen in spitzen Klammern besteht. Außerdem sind die deutschen Umlaute ä, ö, ü, Ä, Ö, Ü und ß durch die Sonderzeichen

 &auml;, &ouml;, &uuml;, &Auml;,

&Ouml;, &Uuml; und &szlig;

ersetzt worden. Das ist ja nun üblicherweise mit dem "Replace"-Befehl kein Problem. Eine komplette Liste der HTML-Sonderzeichen finden Sie in Umlauts.htm.

0.2 Tags

Ferner sind zwei Arten Tags dazugekommen. Tags sind Befehle in spitzen Klammern.
Da gibt es die Sorte, die nur einmal gesetzt werden, wie

<br> (branch) für einfachen Zeilenumbruch;
<p> für 1,5fachen bis 2fachen Zeilenumbruch (je nach Browser) oder
<hr> für eine horizontale Linie.

Und dann gibt es die Sorte, die Textteile einklammert:


  <TAG>

    Blablabla blah...

  </TAG>

wobei das / vor dem TAG den TAG wieder ausschaltet.

0.3 Skelett

Eine komplette HTML-Datei, bestehend aus Kopf und Körper, sieht demzufolge so aus:


  <html>

  <head>

     Kopftext

  </head>

  <body>

     Körpertext

  </body>

  </html>

In den Kopftext kommen Angaben zur Dokumentverwaltung, z.B:


  <title>  Dies ist ein Titel  </title>

Der Titel wird oben im Browserfenster angezeigt.

 

<meta name="description" content="Selber html-dateien schreiben">

Diese Beschreibung wird von Suchmaschinen angezeigt, die Ihr Dokument gespeichert haben.


<meta name="keywords" content="selber html dateien beginner howto write html files sachverstand2">

Diese Stichworte werden von den Suchmaschinen gespeichert. Wenn jetzt jemand nach Dateien mit den Merkmalen "howto write html files" fragt, dürfte diese Datei hier angezeigt werden.

In den Körper kommt das, was Sie zu sagen haben.

1.0 Hervorhebungen

Wichtige Worte können Sie durch <b> </b> (bold=fett) und <i> </i> (italic=kursiv) hervorheben.

Die Schriftart ändern Sie mit <font face="meinelieblingsschrift"> </font>.

Die Schriftgröße dürfen Sie mit <font size=+2> </font> ändern. (Erlaubte Werte sind -4, -3, -2, -1, 0, 1 und 2.)

Schreibmaschinenschrift erreichen Sie über <tt> </tt>.

Formatierten Text (d.h. DOS-Text mit Umbrüchen) stellen Sie zwischen <pre> und </pre> in den Text.

Sie dürfen die Attribute auch schachteln. Seien Sie trotzdem sparsam, schon allein an diesem Satz sehen Sie, wie schlecht ein überformatierter Text zu lesen ist.

Ganze Absätze zentrieren Sie durch

<center> Dies ist ein zentrierter Absatz </center>.

Um Ihren Text anspruchsvoller zu gestalten, können Sie Verweise (auch: Links oder Hyperlinks), Tabellen , Bilder und sonstige Dateien einbinden und Listen anlegen.

2. Links

Ein Link hat die folgende allgemeine Form:

  <a href="Verzeichnis/Datei#Anker"> Hier klicken </a>

Im Browser erscheint dann Hier klicken, und wenn Sie mit der Maus draufgehen, erscheint in der Statuszeile der Link.

Wenn die Datei im selben Verzeichnis steht, können Sie die Verzeichnisangabe weglassen.

Wenn Sie keine Anker mögen, lassen Sie <#Anker> weg.

Ein Link auf die Datei <index.htm>, die im selben Verzeichnis steht, heißt z.B.:
<a href="index.htm"> Zur Homepage </a>

Ein Link auf die Datei <d:\texte\txt\readme.txt> wird in der Datei <d:\texte\htm\beispie.htm > so angegeben:


  <a href="../txt/readme.txt"> Readme.txt </a>

Hierbei steht <..> für "ein Verzeichnis abwärts". HTML akzeptiert nur den Slash / und nicht den Backslash \ in Verzeichnisangaben.

Ein Anker sieht folgendermaßen aus:
<a name="Ankername"> </a>

Und der Link auf diesen Anker heißt:
<a href="#Ankername"> Zu Ankername </a>

3. Tabellen

Dies ergibt eine Tabelle mit 2 Spalten und 2 Zeilen:

<table>

  <tr>

    <td> Zelle1 </td>

    <td> Zelle2 </td>

  </tr>

  <tr>

    <td> Zelle3 </td>

    <td> Zelle4 </td>

  </tr>

</table>

<tr> startet eine table row, also eine Tabellenzeile. <td> startet eine Zelle.

Die Browser passen die Größe automatisch an den Bildschirm an. Wenn Ihre Tabelle nur 300 Pixel breit sein soll, schreiben Sie:
<table width=300>
Wenn sie nur 40% der Bildschirmbreite einnehmen soll, schreiben Sie:
<table width=40%>
Wenn Sie einen Tabellenrahmen von 7 Pixel Breite haben wollen:
<table border=7>
Wenn der Abstand des Zelleninhaltes vom Zellenrand 20 Pixel sein soll, schreiben Sie:
<table cellpadding=20>

<table width=80% border=7 cellpadding=20>

3 Bilder und sonstige eingebundene Dateien

Alle Browser zeigen GIF-Bilder an (außer das automatische Laden von Bildern ist abgestellt). Der Befehl

<img src="gif/Bildchen.gif">

zeigt im Browser das Bild <Bildchen.gif>, das sich ein Verzeichnis höher als die aufrufende HTML-Datei befindet.

Der Befehl


<a href="#anker1"> 

      <img src="bildchen.gif" 

           alt="Ich bin ein Link"

           width=200

           height=30%

           border=0

           align=right> 

</a>

erzeugt ein Bildchen,

das gleichzeitig ein Link auf anker1 ist;
das "bildchen.gif" heißt;
das bei Nur-Text-Browsern immerhin "Ich bin ein Link" ausgibt;
das, egal wie breit es ist, 200 Pixel breit dargestellt wird;
das, egal wie hoch es ist, 30% der Browserfensterhöhe einnimmt;
das keinen Rahmen hat;
das rechts angeordnet wird und der Text drumherumfließt.

4 Listen

Mit <ul> bis </ul> definieren Sie eine unnumbered list (unnumerierte Liste).
Mit <ol> bis </ol> definieren Sie eine ordered list (numerierte Liste).
Dazwische kommen die einzelnen Listenitems. Den Anfang von jedem Item markieren Sie mit <li>. Sie brauchen am Ende des Items kein <br> zu setzen.
Falls Sie einen <br> in den Item setzen, wird die Liste gewissermaßen angehalten.

Beispiel:


<ul>

    <li> Dies ist der erste Eintrag in einer unnumerierten Liste

    <li> der zweite Eintrag.

    <ol> 

        <li> Dies ist der erste Eintrag in einer von 1 bis n durchnumerierten Liste.

        <li> Das Ineinanderschachteln ("Nesting") von Listen <br>

            ist ausdrücklich erlaubt.

    </ol>

    <li> Dritter Eintrag der unnumerierten Liste. 

</ul>

2. Schreiben

So, das war's im wesentlichen. Sie können jetzt:

ganz allein eine HTML-Datei in jedem ASCII- oder ANSI-Editor schreiben;
eine bestehende HTML-Datei im Editor lesen und sich dabei vorstellen, wie sie im Browser aussieht;
sich 2 Word-Makros schreiben: eins, das Ihre .doc-Dateien in HTML wandelt und eins, das den Prozeß umkehrt;
(Lassen Sie das! Holen Sie sich diese Dateien lieber aus dem WWW. Ich war allerdings zu faul, sie zu suchen...)
eine HTML-Referenz lesen und die dort beschriebenen Befehle in Ihre Dokumente einbauen;
(Lassen Sie das! Ich war ebenfalls zu faul, diese zu suchen.
1. Mein Minibrowser (Dida von Godfrey Ko; gerade schnell genug für meinen 486dx) stellt forms, maps und den ganzen anderen Mist nicht dar.
2. Ich brauche ihn ja auch nicht. Generell finde ich, Gute Seiten enthalten mehr Text als Tags.
3. Die verschiedenen Browser sind schon inkompatibel genug. Schreiben Sie so, daß es jeder Mensch und jeder Browser versteht.
Ihre eigenen, aussagekräftigen Seiten nach dem Studium von einigen schlichten, eleganten Seiten entwerfen.

Erleichtern Sie sich und anderen die Surferei, und ersparen Sie unnütze Warterei, indem Sie

jedem Dokument einen unverwechselbaren Kopf geben:
- mit einem Link zur Homepage, der auch Ihr CI-Symbol sein darf;
- mit einer klaren Überschrift;
- mit einem genauso klaren Titel;
- mit einem tabellenförmigen, ankerbehafteten Inhaltsverzeichnis;
Grafiken nur dort einbinden, wo diese zum Verständnis notwendig sind;
Den Text durch Tabellen, Einrückungen, Hervorhebungen und erläuterte Links auflockern und übersichtlich machen;
auf zeitraubende Mätzchen verzichten;
Ihre Seiten so aufräumen, daß zusammensteht, was zusammengehört;
nur Sachen schreiben, die Sie auch Ihrem Erzfeind ins Gesicht sagen würden.

Viel Spaß im Web!

This page hosted by Get your own Free Home Page