Die Hobbyseiten von Herbert Zellhuber

Ein paar Tipps und Hinweise zur HTML-Programmierung

von Herbert Zellhuber

Im Jahr 2002 machte ich einem HTML-Kurs bei der Volkshochschule Peißenberg. Sicher ist so ein Kurs das Beste, sich Grundkenntnisse in der HTML-Programmierung anzueignen. Hier möchte ich zeigen, was für eine einfach aufgebaute Webseite nötig ist.

Als erstes benötigt man das Grundgerüst. Die Dünnschrift (Courier New) zeigt jeweils den Text, wie er als Quelltext im Editor erscheint.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body></body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Die in eckigen Klammern geschriebenen Befehle werden als "Tag" bezeichnet. Mit diesem Tag wird die verwendete HTML-Version angegeben.

<html> = HTML Anfang

<head> = Kopfdaten Anfang

Zwischen den Tags <title> und </title> wird der Titel der Webseite eingetragen. Dieser Text erscheint dann in der obersten Zeile des Browserfensters. Speichert man die Seite ab, so trägt die Datei diesen Namen. Diese Seite habe ich beispielsweise mit "Die Hobbyseiten von Herbert Zellhuber - HTML" bezeichnet. Empfehlenswert ist es, jeder Seite einen anderen Namen zu geben, so heißt z.B. meine Seite mit der Drehbank "Die Hobbyseiten von Herbert Zellhuber - Drehbank". So kann jemand, der meine Seite auf seinem Rechner abspeichert hat, diese leichter wieder finden.

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> = Angabe zum Zeichencode

</head> = Kopfdaten Ende

Zwischen den Tags <body> und </body> folgt der Textkörper. Das ist der Inhalt, der dann im Webbrowser angezeigt wird.

</html> = HTML Ende

Textstruktur:

Die Schriftfarbe ist auf allen meinen Seiten schwarz und der Bildhintergrund weiß, deshalb erweitere ich dem Tag <body> mit <body bgcolor="white" text="black">.

Als weiteres will ich die Schriftart Arial angezeigt haben, deshalb sind die Tags <font face="arial"> und </font> eingebaut. Macht man zu Schriftart und Hintergrund keine Angaben, wird die Grundeinstellung des Computers verwendet.

Zwischen den Tags <h2> und </h2> wird die Überschrift eingefügt. Es stehen mehrere Schriftgrößen zur Verfügung, wie <h1><h2><h3><h4>. Soll die Überschrift zentriert angeordnet sein, so lautet der Tag <h2 align="center">.

Mit dem Tag <br> erreicht man einen Zeilenumbruch und mit <br><br> entsteht ein Absatz. Auch im Quelltext sollte man eine übersichtliche Struktur anlegen, um Textpassagen leicht finden zu können. So ist es durchaus sinnvoll, nach einem <br> einen Zeilenumbruch durchzuführen. Im Quelltext werden ja ein Absatz, Tabulator und Mehrfach-Leerzeichen im Browser nur als einzelnes Leerzeichen angezeigt.

Um Textabschnitte hervorzuheben, kann man zwischen den Tags <b></b> eine Fettschrift formatieren. Bei <i></i> Kursivschrift und bei <u></u> ist der Text unterstrichen. Der Text kann auch farbig dargestellt werden. Zwischen den beiden Tags <font color="red" und ></font> erscheint der Text im Browser dann eben rot. Wird zwischen den Anführungsstrichen green oder blue eingetragen, so ist die Schrift eben grün oder blau. Mit <small></small> wird eine Kleinschrift erreicht.

Um ein Bild einzufügen, verwendet man den Tag <img src="bild1.jpg">. Die Bilddatei heißt in diesem Fall bild1.jpg und wird zwischen den Anführungsstrichen eingesetzt. Für Bilddateien verwende ich grundsätzlich nur Kleinbuchstaben von a bis z und Zahlen 0 bis 9 (kein ä, ö, ü, ß oder sonstige Zeichen).

Es können noch weitere Angaben zum Bild gemacht werden, hier ein Beispiel: <img src="bild1.jpg" border="1" width="450" height="253"> Dabei bedeutet border="1" dass ein Rahmen mit einem Pixel um das Bild gezogen wird. Mit width="450" wird die Breite des Bildes mit 450 Pixel festgelegt und mit height="253" die Höhe von 253 Pixel. Die Zahlenwerte werden wieder zwischen die Anführungsstriche geschrieben. Sollte der Text unterhalb des Bildes weitergehen, ist ein <br> zu setzen. Gelegentlich kann es vom Textaufbau angebracht sein, den Bildtext rechts oben am Bild anzuordnen. Dann steht im Quelltext: <img src="bild1.jpg" border="1" align="left" width="450" height="253"> Es kommt also noch align="left" hinzu. Am Ende vom Bildtext wird der Tag <br clear="all"> eingefügt. Der folgende Text geht dann unterhalb des Bildes weiter.

Gelegentlich wird eine Aufzählungsliste gebraucht. Steht im Quelltext
<ul>
<li>erster Punkt</li>
<li>zweiter Punkt</li>
<li>dritter Punkt</li>
</ul>
so stellt es der Browser so dar:

erster Punkt
zweiter Punkt
dritter Punkt

Auch Tabellen braucht man gelegentlich. Steht im Quelltext
<table border="1">
<th>Spalte1</th><th>Spalte2</th>
<tr><td>Daten1</td><td>Daten2</td></tr>
</table>
so stellt es der Browser so dar:

Spalte1	Spalte2
Daten1	Daten2

Wenn ich auf eine meiner anderen Seite gelangen will, so wird im Quelltext ein Hyperlink angelegt: <a href="index.htm">hier</a> Zwischen den Anführungsstrichen trägt man die Datei ein, zu der man gelangen soll - immer mit .htm als Endung. Für die Bezeichnung dieser Dateien gilt dasselbe wie bei den Bildern: Es werden grundsätzlich nur Kleinbuchstaben von a bis z und Zahlen 0 bis 9 (kein ä, ö, ü, ß oder sonstige Zeichen) verwendet. Der Eintrag hier (natürlich kann man beliebigen Text verwenden) wird im Browser als hier angezeigt (mit einem Maustastenklick gelangen Sie in diesem Fall auf meine Startseite).

Will man zu einer fremden Webseite einen Link legen, so gibt man im Quelltext folgendes an: <a href="http://www.asterix.de">www.asterix.de</a> (natürlich kann man statt www.asterix.de jede beliebige Seite eingeben).

Gelegentlich benötige ich Sonderzeichen, das sind die wichtigsten:
€    €
¢    ¢
©    ©    Copyright
ø    ø    Durchmesser
×    ×    Beispiel: M 42×1
¼    ¼
½    ½
¾    ¾
²    ²    Beispiel: m²
³    ³    Beispiel: cm³
»    »
«    «     Beispiel: »Text in angewinkelten Anführungszeichen«
     geschütztes Leerzeichen    Beispiel: 376 mm bei 376 mm wird der Zwischenraum zwar angezeigt, kann aber bei einem Zeilenumbruch nicht getrennt werden.
<    <
>    >
&    &
"    "     Gerade auf dieser Seite werden öfter die Zeichen < > & " verwendet, die Sonderfunktionen im Quelltext besitzen.

Beim Schreiben von Text kann der Tag  ganz interessant sein. Der Text zwischen den beiden Bindestrichen wird nämlich im Browser nicht angezeigt. Man kann Kommentare oder auch ganze Textpassagen einfügen. Es kommt vor, dass man Text schon gelöscht hat, aber diesen nun doch wieder brauchen könnte. 

Bei dem Tag <nobr></nobr> erfolgt kein Umbruch. Ich nehme es für meine Seite allerdings nur für Bilder, die in einer Reihe angeordnet sein müssen.

Mit <hr> wird ein Strich gezogen:

Zur Vertiefung kaufte ich mir das HTML-Handbuch mit über 1200 Seiten. Es gibt natürlich noch viel weitere Formatierungen. Ich habe hier nur diese gezeigt, die ich auch auf meinen Seiten verwende.

Hier zeige ich noch ein Beispiel einer Webseite wie sie als Quelltext im Editor steht und wie sie dann im Browser angezeigt wird.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Die Hobbyseiten von Herbert Zellhuber - HTML</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body bgcolor="white" text="black">
<font face="arial">

<h2 align="center">Eine eigene Webseite zu erstellen ist gar nicht so schwer.</h2>
<h3 align="center">von Herbert Zellhuber</h3>

Wie bei jeder Veröffentlichung sollte auch der Name des Autors genannt werdenen. Schließlich will der Leser wissen, wer den Bericht geschrieben hat. Es braucht nicht extra erwähnt zu werden, dass man seine Aufsätze möglichst verständlich schreibt und auch auf die Rechtschreibregeln achtet. Mit dem Computer hat man ein effektives Werkzeug, um Rechtschreibfehler aufzuspüren. Benützt man die Rechtschreibprüfung, so kann man falsch geschriebene Wörter leicht finden.<br><br>

Gelegentlich wird man Textabschnitte hervorheben wollen, das kann mit <b>Fettschrift</b>, <i>kursiv</i> oder <u>unterstreichen</u> geschehen. Auch Farben mit Kombinationen sind möglich: <font color="red"><b>dickes rot</b></font>, <font color="blue"><i>kursives blau</i></font> und <font color="green"><u>unterstrichenes grün</u></font> zum Beispiel. Zu bunt sollte man das Ganze allerdings nicht treiben, das kann störend wirken.<br><br>

Für seine Webseite wird man auch Bilder verwenden. Natürlich ist auf eine gewisse Qualität zu achten. Dazu gehört, dass die Bilder nicht nur genügend scharf sind, auch nicht zu hell oder dunkel sollten sie sein. Gelegentlich sieht man auf Webseiten Bilder in Briefmarkengröße, wo man kaum etwas erkennt. Aber auch sehr große Bilder mit langen Ladezeiten sind für den Besucher lästig (es gibt noch genug Leute mit Modem). Man sollte für seine Bilder also immer das richtige Größenverhältnis finden.<br><br>

<div align="center"><img src="bild3.jpg" border="1" width="420" height="236"><br>
Das Bild ist in der Mitte, die Bildunterschrift ist dabei ebenfalls zentriert.</div><br>

<img src="bild2.jpg" border="1" width="420" height="236"><br>
Bei diesem Bild ist die Bildunterschrift unterhalb angeordnet. Das geht auch. Wie man es macht, ist Geschmacksache.<br><br>

<a href="bild1gr.htm">
<img src="bild1.jpg" border="2" align="left" width="420" height="236"></a>Hier ein Bild, bei dem die Bildunterschrift rechts verläuft. Ein Klick aufs Bild und es erscheint auf einer extra Seite vergrößert.<br clear="all"><br>

Wenn man also ein paar Regeln beachtet, ist die Programmierung einer Webseite gar nicht so schwierig. Meistens werden es eh nur Text und Bilder sein, gelegentlich Hyperlinks, eher selten sind Auflistungen und Tabellen. Ich hatte auf meiner Webseite vor etlicher Zeit auch mal Frames verwendet. Ich stellte aber fest, dass dies unnötig kompliziert ist und stellte bald wieder auf möglichst einfach aufgebaute Seiten um. Das hat sich mittlerweile auch über die Jahre bestens bewährt.<br><br><br>

<a href="index.htm">zur Startseite</a>

</font>
</body>
</html>

Eine eigene Webseite zu erstellen ist gar nicht so schwer.

von Herbert Zellhuber

Wie bei jeder Veröffentlichung sollte auch der Name des Autors genannt werdenen. Schließlich will der Leser wissen, wer den Bericht geschrieben hat. Es braucht nicht extra erwähnt zu werden, dass man seine Aufsätze möglichst verständlich schreibt und auch auf die Rechtschreibregeln achtet. Mit dem Computer hat man ein effektives Werkzeug, um Rechtschreibfehler aufzuspüren. Benützt man die Rechtschreibprüfung, so kann man falsch geschriebene Wörter leicht finden.

Gelegentlich wird man Textabschnitte hervorheben wollen, das kann mit Fettschrift, kursiv oder unterstreichen geschehen. Auch Farben mit Kombinationen sind möglich: dickes rot, kursives blau und unterstrichenes grün zum Beispiel. Zu bunt sollte man das Ganze allerdings nicht treiben, das kann störend wirken.

Für seine Webseite wird man auch Bilder verwenden. Natürlich ist auf eine gewisse Qualität zu achten. Dazu gehört, dass die Bilder nicht nur genügend scharf sind, auch nicht zu hell oder dunkel sollten sie sein. Gelegentlich sieht man auf Webseiten Bilder in Briefmarkengröße, wo man kaum etwas erkennt. Aber auch sehr große Bilder mit langen Ladezeiten sind für den Besucher lästig (es gibt noch genug Leute mit Modem). Man sollte für seine Bilder also immer das richtige Größenverhältnis finden.

Das Bild ist in der Mitte, die Bildunterschrift ist dabei ebenfalls zentriert.

Bei diesem Bild ist die Bildunterschrift unterhalb angeordnet. Das geht auch. Wie man es macht, ist Geschmacksache.

Hier ein Bild, bei dem die Bildunterschrift rechts verläuft. Ein Klick aufs Bild und es erscheint auf einer extra Seite vergrößert.

Wenn man also ein paar Regeln beachtet, ist die Programmierung einer Webseite gar nicht so schwierig. Meistens werden es eh nur Text und Bilder sein, gelegentlich Hyperlinks, eher selten sind Auflistungen und Tabellen. Ich hatte auf meiner Webseite vor etlicher Zeit auch mal Frames verwendet. Ich stellte aber fest, dass dies unnötig kompliziert ist und stellte bald wieder auf möglichst einfach aufgebaute Seiten um. Das hat sich mittlerweile auch über die Jahre bestens bewährt.

zur Startseite