Back to the very first page/zurück zur allerersten Seite

HTML-Grundlagen


Startseite
Homepage-Bastler
        
Grundlagen HTML Grafiken einfügen Tabellen Linksammlung
Javaspielereien I Javaspielereien II schwebende
Navigationsleiste
Frames Formulare
Beispielseite I Beispielseite II Beispielseite III Beispielseite IV Frame Beispielseite
Hintergründe Buttons Cliparts    

Wer gerne eine eigene Seite im Internet haben möchte, kommt an HTML-Kenntnissen kaum vorbei. Man kann es sich selbst beibringen bzw. sich im Internet über HTML informieren oder einen Kursus in der Volkshochschule besuchen.

Ich werde hier einmal versuchen, eine kurze Einführung zu geben, die jedoch keinen Anspruch auf Vollständigkeit erheben kann sondern einfach einen schnellen Einstieg ermöglichen soll.

Jede Internetseite besteht aus einer Aneinanderreihung von HTML-Befehlen. Jeder HTML-Befehl wird mit spitzen Klammern umschlossen. Diese Befehle nennen sich Tags [sprich: täggs] und sehen zum Beispiel so aus: <b>.

Zu jedem Anfangs-Tag gehört immer ein Ende-Tag, der sich fast immer nur durch einen Querstrich vom Anfangs-Tag unterscheidet: </b>. Zwischen dem Anfangs- und dem Ende-Tag steht der Text, der auf der Internetseite erscheinen soll. (Übrigens hätte der eben angeführte b-Tag den dazwischenliegenden Text fett gedruckt)

Am besten verstehen Sie, wovon ich rede, wenn Sie sich einmal den Quelltext einer Internetseite ansehen. Dazu suchen Sie eine beliebige Seite heraus, klicken mit der rechten Maustatste auf eine leere Stelle der Seite (wo weder Text noch ein Bild steht) und wählen dann aus dem sich öffnenden Kontextmenü den Punkt "Quelltext anzeigen". Im nun erscheinenden Quelltext sollten Sie dann eine Vielzahl von Befehlen/Tags wiedererkennen, die in den folgenden Abschnitten hier erklärt werden.

Jede Internetseite ist nach folgendem Schema aufgebaut:
< !doctype html public "-//w3c//dtd html 4.0Transitional//en">
<html>  
Hier wird dem Browser gesagt, welche HTML-Version er zu lesen bekommt und außerdem mitgeteilt, dass jetzt eine HTML-Seite folgt. Diese Angaben sind nur im Quelltext und nicht im Browser auf der Internetseite zu sehen.
<head> Nach diesem Befehl stehen die Angaben für die Suchroboter, der Namen des Autors, der Titel der Seite ... usw. - zum Beispiel in der Form:

<title> HTML Grundlagen - von C. Fischer</title>
<meta name="author" content="C. Fischer">
<meta name="keywords" content="Tipps für HTML-Seiten und Javascript Spielereien, Grundlagen, Tabellen in HTML">

Diese Angaben sind nur im Quelltext und nicht im Browser auf der Internetseite zu sehen.
</head> Dies ist das Ende des "unsichtbaren" Teils, der nur im Quelltext und nicht im Browser erscheint.
<body> Innerhalb des Body-Anfangstags können Sie die Hintergrundfarbe Ihrer Internetseite bestimmen. Geben Sie dazu den Farbcode ein, was folgendermaßen aussehen kann: <body bgcolor="#FF0000"> (hier wird der Hintergrund rot).

Nach diesem Befehl kommt nun der Text und die Bilder, die von Besuchern der Internetseite gesehen werden sollen.
</body> Ende des "sichtbaren" Teils
</html> Ende des HTML-Dokuments


Und nun einige grundlegende Tags. Genaueres finden Sie in Stefan Münz's Publikation SelfHTML.

<font size="1">

Schriftgröße

  • Mit diesem Befehl erzwinge ich die Schriftgröße eins, was sehr klein ist. Wenn nichts eingestellt ist, wird automatisch Schriftgröße 3 genommen.
  • Überschriften kann man in Größe 5, Größe 6 oder Größe 7 programmieren.

Beendet wird diser Tag mit </font>
<font color="#FF0000">

Schriftfarbe

  • Hier wird die Farbe der Buchstaben eingestellt. Dies geschieht mit einem 6-stelligen Code und der Raute davor.

Beendet wird dieser Tag mit </font>
<font face="arial">

Schriftart

  • Hier wird die Schriftart bestimmt, was aber nicht immer sinnvoll ist. Normalerweise wird die Schriftart benutzt, die der jeweilige Benutzer in seinem Browser eingestellt hat. Dazu ist keine Angabe mit dem Befehl font size=... notwendig. Ich lasse dann die ganze Zeile einfach weg.
  • Wenn ich hier jedoch eine Angabe zur Schriftart mache, zwinge ich den Benutzer, sich meine Schriftart anzusehen, vorausgesetzt, er hat sie auf seinem Computer. Bei Arial und Times New Roman ist das wahrscheinlich. Bei anderen exotischen Schriftarten eher unwahrscheinlich. In diesem Fall nimmt der PC einfach die nächstbeste Schrift - und das kann zu schlechten Ergebnisen führen.
  • Außerdem nimmt eine Angabe der Schriftart auch Speicherplatz weg und verlängert damit die Ladezeit von Internetseiten.

Beendet wird dieser Tag mit </font>
Achtung: zu jedem Anfangs-Tag gehört immr ein Ende-Tag. Unter Umständen können dann plötzlich mehrere </font> hintereinander stehen, wenn ich die Farbe, Größe und Schriftart bestimmt habe.
<h1>

Überschrift

  • Dies ist eine einfachere Version, um zu einer großen Überschrift zu kommen.

    h1

    ist ganz groß.

    h2

    h3

    usw. entsprechend kleiner. Nach jedem h1, h2 ... Befehl wird automatisch eine neue Zeile begonnen.

Beendet wird diser Tag mit </h1>
<br>

Zeilenende

  • Hier wird das Zeilenende eingegeben, das heißt, dass danach mit einer neuen Zeile begonnen wird. Dabei ist es unerheblich wieviele Leerzeilen ich im Quelltext mit Hilfe der Enter-Taste eingebe. Leerzeilen im Quelltext werden auf der Internetseite nicht dargestellt.

Ein Ende-Tag ist bei dem br-Befehl nicht notwendig.
&nbsp;

Leerzeichen

  • Hier wird ein Leerzeichen angezeigt. Mehrere dieser Befehle hintereinander (immer mit Leerzeichen getrennt) ergeben mehrere Leerzeichen auf der Internetseite.

Ein Ende-Tag ist bei diesem Befehl nicht notwendig.
<b>

Fettdruck

  • Text wird fett gedruckt (geht nicht in Kombination mit h1, h2 ...)

Beendet wird diser Tag mit </b>
<i>

Kursivdruck

  • Text wird kursiv gedruckt.

Beendet wird diser Tag mit </i>
<u>

Unterstreichung

  • Text wird unterstrichen gedruckt, wobei man dieses möglichst sparsam verwenden sollte, denn unterstrichene Wörter signalisieren dem Benutzer eigentlich immer, dass dahinter ein Hyper-Link stecken sollte.

Beendet wird diser Tag mit </u>
<a href="dateiname.htm">

Hyper-Link / Verweis

  • Der Text, der nun folgt, wird als Hyper-Link dargestellt. das heißt, wer darauf klickt, wird zur angegeben Seite weitergeleitet.
  • Wichtig: wenn die Seite Teil des eigenen Web-Auftritts ist, reicht die Angabe des Dateinamens mit der Endung htm oder html. Wenn der Verweis zu einer fremden Seite im weltweiten Internet gehen soll, so ist die vollständige URL notwendig, zum Beispiel http://www.vhs-goslar.de.
  • Der Text, der zwischen dem Anfangs- und Ende-Tag steht, wird automatisch unterstrichen und andersfarbig dargestellt. Auch hier sind Änderungen der Farbe, Schriftart und der Unterstreichung möglich, worauf ich jedoch an dieser Stelle nicht eingehen werde.

Beendet wird dieser Tag mit </a>




zurück zum Seitenanfang


zurück zur Ausgangsseite Homepage-Erstellung


Zurück zur ersten Seite Zurück zum Inhaltsverzeichnis Zum Übersichtsplan/to Sitemap