Keine Angst, so mußt Du nicht enden, wenn Du die Sprache des Internets
lernen willst, denn sie ist einfacher als Du denkst. "html" (HyperText
Markup Language) bedeutet, daß ein Text mit Hilfe von Befehlen strukturiert
und mit anderen Elementen und Texten verknüpft wird. Da dies nur ein
Crashkurs ist, werden nicht alle Elemente von html besprochen.
Um einem Textabschnitt eine Struktur zuzuweisen, setzt man ihn zwischen zwei Anweisungen, sog. Tags, die diese Struktur festlegen. Tags werden in spitzen Klammern geschrieben. Der Tag, der am Ende steht, unterscheidet sich von dem am Anfang nur durch einen Schrägstrich. Tags sind hierarchisch gegliedert. Hier ein Beispiel:
<html>
Hallo <b><i>W</i>elt</b>
</html>
<html> sagt aus, daß es sich bei dem Dokument um ein html-Dokument handelt. Das html-Dokument befindet sich also zwischen den Tags <html> und </html>. Das ist die oberste Hierarchie für ein html-Dokument. Der Teil, der zwischen <b> und </b> steht, also "Welt", wird fett (b für bold) dargestellt. Das "W" von "Welt" erscheint im Browser zudem kursiv (i für italic). Das "W" von "Welt" ist also Teil eines html-Dokumentes, da es zwischen <html> und </html> steht, es wird zudem fett und kursiv dargestellt, da es sowohl zwischen <b> und </b> wie auch zwischen <i> und </i> steht (Falsch wäre z.B. ... <i><b>W</i>elt</b>...).
Nicht alle Tags benötigen ein Endtag. Der Tag <br> z.B. steht für einem Zeilenumbruch (break) und wird an der Stelle im Text plaziert, an dem eine neue Zeile begonnen werden soll (Zeilenumbrüche im Quelltext [das ist der Programmtext] werden vom Browser ignoriert). Genauso verhält es sich bei dem Tag <p>, der einen Absatz bewirkt. Im Zweifelsfall empfiehlt es sich jedoch, den Endtag mit anzugeben. Bei Tags wird nicht zwischen Groß- und Kleinschreibung unterschieden (<HTML> bedeutet z.B. das selbe wie <html>). Es gibt für html-Dokumente eine Grundstruktur, die in den meisten Fällen sinnvoll ist:
<html>
<head>
<title>Der Titel des Dokumentes</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<meta name="description" content="Beschreibungstext">
<meta name="author" content="Dein Name">
<meta name="keywords" content="Begriff 1, Begriff 2, Begriff 3,
und so weiter">
</head>
<body>
Hier kommt der Text und weitere Tags rein
</body>
</html>
Das <html> Dokument ist zweigeteilt in einen <head> (Kopf) und einen <body> (Körper). Im <head> stehen Informationen für den Browser (das Programm, das das Dokument später anzeigt, z.B. der Internet Explorer oder Netscape), im <body> das, was gezeigt werden soll.
Beginnen wir mit dem <head>. Zunächst gibst Du den <title> (Titel) Deiner Seite an. Darunter wird der Browser in einer <meta>-Zeile über den deutschen Schriftsatz informiert (damit klar ist wie ä, ö, ü und ß dargestellt werden sollen). In die nächste <meta>-Zeile kommt eine kurze Beschreibung dessen, was einen auf Deiner Seite erwartet (das ist wichtig für Suchmaschinen). Darunter Dein Name und darunter die zentralen Begriffe Deiner Seite (ebenfalls wichtig für Suchmaschinen).
Bestimmt ist Dir aufgefallen, daß die <meta>-Angaben nicht zwischen zwei Tags, sondern in den Tag selbst geschrieben wurden. Solche Angaben, die in den Tag geschrieben werden nennt man Attribute. Alle Attribute stehen in dem Anfangstag. Der zugehörige Endtag (so vorhanden) enthält keine Attribute.
Viele Tags haben Attribute, so zum Beispiel auch der <body>-Tag:
<body bgcolor="black" background="hintergrung.gif" text="silver"
link="yellow" vlink="yellow" alink="yellow">
Man kann sich auf einige Attribute vom <body>-Tag beschränken
oder gar keine angeben. Alles, was nicht angegeben wird, sucht sich der
jeweilige Browser selbst aus. "bgcolor" gibt die Hintergrundfarbe an, "text"
die Textfarbe, "link" die Farbe von Verknüpfungen zu anderen html-Dokumenten.
"vlink" gibt die Farbe an, mit der eine Verknüpfung angezeigt werden
soll, die schon benutzt wurde und "alink" die Farbe einer Verknüpfung,
die gerade benutzt wird (mehr dazu, wenn der Tag <a> besprochen wird).
16 Farben sind vordefiniert: aqua (Kobaltblau), black (Schwarz), blue (Blau),
fuchsia (Violett), gray (Grau), green (Dunkelgrün), lime (Grün),
maroon (Kastanienbraun), navy (Marineblau), olive (Olivgrün), purple
(Lila), red (Rot), silver (Silber), tea (Blaugrün), white (Weiß),
yellow (Gelb).
"background" verweist auf ein Bild, mit der der Hintergrund der Internetseite
parkettiert wird. Wichtige Bilddateien, die dazu benutzt werden sind gif
(für Grafiken) und jpg (für Fotos) Dateien (an der Endung zu
erkennen). Mehr zu Verweisen auf andere Dateien, wenn der Tag <a> erklärt wird.
Im <body>-Bereich steht der Text, der dargestellt werden soll. Zeilenumbrüche werden mit <br>, Absätze mit <p> realisiert. Auch die Anfangs verwendeten Tags <i> und <b> stehen zur Verfügung. Um einen nachfolgenden Absatz (incl. Bilder etc.) auszurichten, stellt der <p>-Tag das Attribut "align" zur Verfügung:
<p align="left"> richtet den Absatz linksbündig
<p align="center"> richtet den Absatz zentriert und
<p align="right"> richtet den Absatz rechtsbündig aus.
Um einen Bereich optisch abzutrennen, kann man mit <hr> eine horizontale Linie einfügen.
<h1>, <h2>, <h3>,... bis <h6> kennzeichnen Überschriften. Zwischen <h1> und </h1> steht die Hauptüberschrift, zwischen <h2> und </h2> die Unterüberschrift, zwischen <h3> und </h3> die Unterunterüberschrift usw..
Zitate werden zwischen <blockquote> und </blockquote> gesetzt und numerierte Aufzählungen zwischen <ol> und </ol>, wobei die einzelnen Stichpunkte zwischen <li> und </li> stehen. Soll die Aufzählung nicht numeriert werden, setzt man die <li>-Tags zwischen <ul> und </ul>.
<img src="bild.jpg" width="100" height="150" alt="das ist ein Bild"> sorgt dafür, daß der Browser an dieser Stelle das Bild "bild.jpg" zeigt. Das Attribut "src" gibt die Datei (mehr zu Verweisen auf Dateien, wenn der Tag <a> erklärt wird), "width" die Breite, "height" die Höhe (ohne % hinter der Zahl in Punkte [Pixel], mit % hinter der Zahl in % der Fenstergröße) und "alt" eine kurze Beschreibung des Bildes an. Nur das Attribut "src" ist zwingend erforderlich, die anderen Attribute sollten aber auch immer angegeben werden.
Zum Schluß noch der vielleicht wichtigste Tag, der ein html-Dokument überhaupt erst zu einem Hypertext macht. Der <a>-Tag (Anker) ermöglicht das Arbeiten mit Links (Verweisen).
Solche Links machen das Internet erst zu dem, was es ist. Mit dem <a>-Tag
kann alles mit allem verlinkt werden, so wie man das vom Surven im Internet
auch kennt: Man klickt auf einen Link und gerät irgendwo anders hin.
Der <a>-Tag benötigt immer ein Endtag und wenigstens ein Attribut.
Alles, was zwischen <a> und </a> steht (Text, Grafiken, etc.), ist
entweder ein Link, oder Ziel eines Links - ja nachdem, ob das Attribut
"href" oder "name" verwendet wird.
Die Farbe aller Links kann im <body>-Tag festgelegt werden. Das
Ziel eines Links kann eine markierte Stelle in dem selben Dokument, ein
anderes Dokument, eine markierte Stelle in einem anderen Dokument, irgendeine
Datei oder eine e-mail-Adresse sein. Um eine Stelle in einem html-Dokument
als Ziel zu markieren, weist man ihr einen Namen zu: <a name="Name">...</a>.
Für "Name" schreibt man den Namen, den diese Stelle haben soll. Anschließend
kann man einen Link auf diese Stelle setzen: <a href="#Name">...</a>.
Verweist man auf ein anderes html-Dokument in dem gleichen Ordner, trägt man
dessen Namen einfach nach dem Attribut ein (relative Adressierung): <a
href="andereDatei.htm">...</a>. Liegt die Datei im nächsthöheren
Ordner, schreibt man "../andereDatei.htm" bzw. "../../andereDatei.htm"
wenn die Datei zwei Ordner weiter oben liegt usw. und entsprechend verlinkt
man Dateien in Unterordnern mit "Unterordnername/andereDatei.htm" bzw.
"Unterordnername/Unterunterordnername/andereDatei.htm" usw.. Man kann auch
die komplette Internetadresse (URL) als Ziel eingeben (sog. absolute Adressierung),
z.B. "http://www.jesuslebt.de/seiten/darueber_reden/material/homepage/html.htm"
(die URL dieses Crashkurses). Schreibt man hinter diese relativen oder
absoluten Adressen noch #Name (vor dem "), so kann man in diesen Dokumenten
auch eine entsprechend markierte Stelle anspringen.
Das Ziel eines Links muß nicht unbedingt ein html-Dokument sein.
Kann ein Browser eine Datei nicht darstellen, bietet er an, diese zu speichern
(sog. Download). Man kann sogar eine e-mail-Adresse mit <a href="mailto:Adresse">...</a>
verlinken (statt Adresse wir die e-mail-Adresse eingetragen). Klickt man
nun auf den Link, kann man an die angegebene Adresse eine e-mail schreiben.
Mit dieser Auswahl an Befehlen lassen sich bereits hochwertige Internetseiten programmieren. Wer tiefer in html einsteigen möchte, sollte sich als nächstes mit den Tags <font>, <form>, <table> und <frameset> auseinandersetzen, sowie mit weiteren Attributen der bereits behandelten Tags und mit Cascading Style-Sheets. Der Anfänger sei jedoch gewarnt: Die schlechtesten Internetseiten entstehen dort, wo Tags falsch eingesetzt werden. Daher solltest Du, wenn Du noch wenig Erfahrung hast, Dich vorerst auf die hier behandelten Tags beschränken. Übung macht den Meister. Am besten Du fängst einfach mal an zu programmieren (den Quelltext in einem Editor [für Windows z.B. notepad] schreiben und mit der Endung .htm speichern) und schaust Dir anschließend an, was Dein Browser daraus macht. Doch vorsicht: Nicht alle Browser stellen Dein html-Dokument gleich dar. Einige tolerieren sogar kleinere Programmierfehler - andere nicht.
Fast alle Browser bieten die Möglichkeit, sich den Quelltext einer html-Seite anzusehen. Wenn Du z.B. einen Windows-PC hast und mit dem Internet Explorer surfst, kannst Du eine Seite mit der rechten Maustaste anklicken und auf "Quelltext anzeigen" klicken. Den Quelltext kannst Du dann direkt verändern und daran rumprobieren. Wenn Du ihn speicherst und dann mit dem Browser öffnest, siehst Du, was aus dem Programm geworden ist.
In diesem Sinne
Viel Spaß beim Probieren!
P.S.
Viele, z.T. auch kostenlose Programme nehmen einem die Programmierarbeit weitgehend ab. Zum Einen gibt es spezielle html-Editoren, die viele Befehle und Strukturen automatisieren, Fehler suchen, etc. zum Anderen gibt es wysiwyg-Editoren (z.B. Netscape Composer, FrontPage, GoLive, Fusion, ...), mit deren Hilfe man Internetseiten grafisch erstellen kann und immer "sieht" (daher der Name), was man gerade tut. So kann man den Computer einen Teil der Programmierarbeit übernehmen lassen...
