HTML-Kursus fuer Anfaenger von Software-Help

Transcription

HTML-Kursus fuer Anfaenger von Software-Help - Einleitung
file:///E:/HTML/Kursus_HTML/lernen1.htm
Einleitung
Dies ist ein HTML-Grundkursus für Anfänger. Ich werde keine lange Einleitung schreiben, sondern
gleich loslegen, denn Du willst ja nicht den ganzen Sermon lesen, der sonst in Büchern so steht,
sondern einfach nur wissen wie's geht, oder?
Allerdings mußt Du zwei Dinge wissen:
1. Du brauchst natürlich einen Browser, der Deine Seiten anzeigt.
2. Du brauchst einen Text-Editor, in dem Du die Texte schreiben kannst.
1. Browser:
Es spielt keine Rolle, ob Du den Internet Explorer von Microsoft oder den Netscape Navigator
benutzt. Außerdem gibt es natürlich noch diverse andere Browser. Diese beiden sind aber am
verbreitesten. Mit beiden solltest Du Deine Seiten testen, damit Du weißt, wie sie Deine Texte
darstellen, denn da gibt es Unterschiede - nicht gravierend, aber z.B. stellt Netscape die Schriften
kleiner dar als der Internet Explorer. Auch Tabellen und Formulare sehen anders aus. Wenn Du
erst am Anfang stehst und nur den Internet Explorer hast, reicht das aber auf jeden Fall aus.
2. Text-Editor:
Am Anfang reicht es aus, wenn Du den Windows-Editor nimmst (wird mit Windows geliefert und ist
unter Programme/Zubehör) zu finden. Zu Beginn ist das gar nicht so schlecht, weil Du viel tippen
mußt und Dir dadurch sehr viel besser die Sachen einprägst. Später jedoch solltest Du Dir einen
Editor besorgen. Es gibt viele unterschiedliche kostenlos im Internet. Mir persönlich gefällt am
besten der als Freeware angebotene von Ulli Meybohm.
Hier kannst Du ihn downloaden: HTML-Editor
¶
Allerdings werde ich hier nicht erklären, wie man damit arbeitet. Da das sehr einfach ist, kannst Du
Dir die Grundlagen sehr schnell selbst beibringen.
HTML zu verstehen ist relativ einfach, vor allem wenn Du ein wenig englisch kannst.
Ich werde überall Beispiele schreiben. Wenn Du wirklich lernen willst, solltest Du Dir die Mühe
machen und alles wirklich abschreiben (nicht einfach kopieren und in den Editor einfügen). Später
willst Du doch eigene Sachen schreiben und dann ist es furchtbar lästig, alles immer wieder
irgendwo nachzulesen, weil Du Dich nicht mehr erinnerst.
So, das soll nun für die Einleitung reichen. Jetzt geht's los mit der 1. Lektion!
1. Lektion
HTML-Kursus fuer Anfaenger von Software-Help - Lektion1 Aufb...
file:///E:/HTML/Kursus_HTML/LEKTION1.HTM
Der Aufbau einer HTML-Seite
Lege Dir zunächst einmal einen Ordner in Deinem Windows-Verzeichnis an (z.B. HTML oder
ähnlich) wo Du Deine eigenen Seiten abspeichern wirst. Ob Du die Seite mit der Dateiendung
"htm" oder "html" speicherst, ist Dir überlassen. Dos-basierte Computer können sowieso nur 3
Stellen für die Dateiendung lesen und ignorieren das vierte "l" einfach.
Zu Beginn mußt Du wissen, was ein "TAG" ist. Einen Tag nennt man alles, was in eckigen
Klammern <> als Anweisung für den Browser steht, z.B. <html>.
Jede HTML-Seite beginnt mit
<html> Dies ist ein öffnendes Tag.
und endet mit
</html> Dies ist ein schließendes Tag (das Du niemals vergessen solltest, weil der Browser
sonst nichts darstellt).
Zwischen diesen beiden Tags wird dann die ganze HTML-Seite aufgebaut.
Jede HTML-Seite hat einen Kopf (HEAD), einen Namen (TITLE) und einen Körper (BODY).
Es spielt keine Rolle, ob Du die Tags in Groß- oder Kleinbuchstaben schreibst. Aber Du solltest
Dir angewöhnen, alles entweder groß oder alles klein zu schreiben.
Zwischen die HTML-Tags schreibst Du folgende öffnende und schließende Tags:
<html>
<head>
<title> </title> Achte darauf, dass das Title-Tag hier gleich wieder geschlossen wird
</head>
<body>
</body>
</html>
TITLE ist Teil des HEAD-Bereiches. Ebenfalls wirst Du später lernen Stylesheets (CSS) zu
benutzen und wenn Du JavaScript schreiben willst (dafür werde ich einen gesonderten Kursus
machen), gehört dies auch in den HEAD-Teil (meistens jedenfalls, es gibt natürlich
Ausnahmen). Außerdem werden wir zum Schluß META-Tags schreiben. Auch diese gehören in
den HEAD-Teil.
Damit Deine Seite einen Namen hat (das ist Dir ja sicher schon bei anderen Seiten aufgefallen),
der ganz oben in der blauben Browser-Leiste angezeigt wird, schreibst Du eine Titel-Zeile:
<title>Deine Internetseite (z.B. Homepage von Hansi Mueller oder ähnlich)</title>
1 von 2
29.06.05 09:37
HTML-Kursus fuer Anfaenger von Software-Help - Lektion1 Aufb...
Im BODY-Bereich schreibst Du jetzt alles, was Du auf Deiner Seite darstellen willst. Das sieht in
einem Beispiel dann in etwa so aus:
<html>
<head>
<title>Meine Homepage</title>
</head>
<body>
Dies ist die Homepage von Hansi Mueller aus Deutschland!
</body>
</html>
Jetzt speicherst Du die Seite z.B. unter dem Namen "index.htm". Die Index-Seite ist immer die
erste Seite, nach der der Browser sucht, wenn die Webseite aufgerufen wird.
Damit Du Dir die Seite jetzt im Browser ansehen kannst, öffnest Du ihn und gehst über das
Menue
Datei/Seite öffnen/Durchsuchen/Datei markieren/öffnen.
Die Schrift sieht in Deinem Browser anders aus als bei mir?
Natürlich - der Browser stellt die Schrift, wenn nichts anderes angegeben ist, so dar, wie die
Browsereinstellung bei Dir das vorsieht. Hast Du in den Einstellungen z.B. die Schrift "Times
New Roman" (was Standard ist) eingestellt, siehst Du die. Auf meiner Seite habe ich eine
Anweisung geschrieben, damit der Browser den Text in "Arial" darstellt - und das ist der
Unterschied. Wie man das macht, lernst Du in der nächsten Lektion.
2. Lektion
2 von 2
29.06.05 09:37
HTML-Kursus fuer Anfaenger von Software-Help - Schriftart, Schri...
Schriftart, Schriftgröße, Schriftfarbe, Hintergrundfarbe
Vor Deinem Text bestimmst Du mit folgender Anweisung
1. die Schriftart:
<font face="Arial">
2. die Schriftgröße:
<font size="5">
3. die Schriftfarbe:
<font color="red">
Am Ende mußt Du dann wieder die Anweisung aufheben mit
</font>
Du kannst alle Anweisungen zusammenfassen in einem Tag:
<font face="Arial" size="5" color="red"> Ein Versuch! </font>
Das sieht im Ergebnis dann so aus:
Ein Versuch!
Die normale Schriftgröße ist die Größe "3". Die brauchst Du also nicht extra anzugeben. Du kannst,
wenn Du eine größere Schrift als "3" haben willst z.B. size="+1" angeben. Das bedeutet
Schriftgröße 3 + 1 = 4. Für eine kleinere Schrift als "3" kannst Du size="-1" schreiben. Die
Bedeutung ist klar (3 - 1 = 2). Ob Du das jetzt so schreibst oder gleich die gewünschte Größe
angibst, bleibt Dir überlassen. Die Schriftfarbe ist standardmäßig schwarz. Du brauchst das also
nicht extra anzugeben. Die Schriftart wählt (wie schon gesagt) der Browser gemäß seinen
Einstellungen. Willst Du die Schriftart Deiner Seite festlegen, mußt Du das mit der Anweisung wie
oben beschrieben angeben.
Es gibt für Überschriften eine Anweisung:
<H1> bis <H6>
Aber Vorsicht! Nicht jeder Browser stellt das auch dar. Deswegen solltest Du lieber die
entsprechende Größenanweisung für die Überschrift wie oben beschrieben gesondert festlegen.
Du möchtest eigentlich eine andere Hintergrundfarbe für Deine Seite? Das ist kein Problem. Wenn
Du aber eine dunkle Hintergrundfarbe verwendest, mußt Du darauf achten, daß die Schriftfarbe
weiß ist (oder zumindest eine helle Farbe nehmen) - aber nimm bloß keine rote Schrift auf blauem
Hintergrund - das kann nämlich keiner richtig lesen und Deine Seite wird nicht sehr viele Liebhaber
finden. Und wie macht man das nun?
Bereits im BODY-Tag schreibst Du, welche Hintergrundfarbe und welche Schriftfarbe angezeigt
werden sollen. Beispiel:
HTML-Kursus fuer Anfaenger von Software-Help - Schriftart, Schri...
<body bgcolor="#FF0000" text="#FFFFFF">
Im BODY-Tag mußt Du also nicht "font color" sondern "text" für die Schriftfarbe schreiben. Die
Farben werden mit Hexadezimalzahlen und einer Raute (#) davor angegeben. Zu den
unterschiedlichen Zahlen findest Du eine Darstellung unter EXTRAS/Farben.
Im BODY-Tag kannst Du auch die Farben für die Verweise (Links) angeben, damit diese zur
Hintergrundfarbe und zum Text passen. Beispiel:
<body bgcolor="#FF0000" text="#FFFFFF" link="#FFFFFF" vlink="#0000BF"
alink="#FFDF00">
Wobei "link" der normale, noch nicht angeklickte Link ist, "vlink" ist der bereits besuchte Link und
"alink" zeigt die angegebene Farbe, wenn der Link gerade angeklickt wird. Machst Du hierzu keine
Angaben nimmt der Browser die Farben, die in den Browser-Einstellungen angegeben sind.
In der nächsten Lektion geht es um die Formatierung und Absätze.
3. Lektion
HTML-Kursus fuer Anfaenger von Software-Help - Formatierung ...
Formatierung und Absätze
Wenn Du im Editor Text schreibst, dann wird ein Leerzeichen innerhalb eines Textblocks sehr wohl
vom Browser dargestellt. Möchtest Du aber ein zusätzliches Leerzeichen (also 2 oder 3 statt nur
einem) irgendwo einbauen, dann geht das nicht einfach mit der Leertaste, sondern Du mußt ein
sogenanntes Entitiy (benanntes Zeichen) schreiben. Das sieht so aus:
 
Das gleiche gilt für die deutschen Umlaute, das "ß" und Sonderzeichen wie Klammern usw. Hier
eine Aufstellung, die aber nur einen kleinen Überblick geben soll und nicht vollständig ist:
ä für das "ä"
Ä für das "Ä"
ö für das "ö"
Ö für das "Ö"
ü für das "ü"
Ü für das "Ü"
ß für das "ß"
Eine umfangreichere Liste findest Du unter EXTRAS/Sonderzeichen.
Eine Zeilenschaltung, die Du im Editor über die Tastatur eingibst, ignoriert der Browser. Es wird
also alles wie sogenannter "Fließtext" behandelt. Einen kompletten Absatz bindest Du in folgende
Tags ein:
<p> </p>
Eine Zeilenschaltung erreichst Du mit folgendem Tag (das übrigens kein schließendes Tag hat!)
am Ende des Textes:
<br>
Textpassagen, Bilder und Tabellen kann man auf der Seite zentriert ausrichten indem man die
Objekte in die folgenden Tags einbettet:
<center> </center>
Möchtest Du innerhalb Deines Textes ein oder mehrere Wörter fett darstellen, erreichst Du das,
indem Du das bzw. die Wörter in foldende Tags einbindest:
<b> </b>
Willst Du einen Text kursiv darstellen, benutzt Du folgende Tags:
<i> </i>
Wie Du in meinem Text gesehen hast, kann man auch mehrere Tags zusammen benutzen z.B.
fett und kursiv. Dabei mußt Du dann darauf achten, daß das zuletzt angegebene öffnende Tag als
erstes wieder geschlossen wird. Also z.B. so:
<b><i> fett und kursiv </i></b>
Hier ein zusammenfassendes Beispiel für das, was bisher in den Lektionen geschrieben wurde:
<html>
<head>
<titel>Meine Homepage</titel>
</head>
<body>
<font face="Arial" size="5" color="red"> Dies ist die Homepage von Hansi Mueller aus
Deutschland! </font><br><br>
<p> Hier steht jetzt normaler Text ohne Angabe der Schriftart, Schriftfarbe und Schriftgröße. <br>
Also stellt der Browser das gemäß seinen Einstellungen dar. <br>
<font face="Arial" size="3" color="blue"> Hier steht jetzt formatierter Text. </font> Mit
verschiedenen Formatierungen kann man den Text aber "verschönern". Hier steht jetzt normaler Text. Mit
verschiedenen Formatierungen. Hier steht jetzt normaler Text. Mit verschiedenen Formatierungen. <i> Hier
steht jetzt kursiver Text. </i> Mit verschiedenen Formatierungen. </p>
<p> Hier steht jetzt normaler Text. Mit verschiedenen Formatierungen. Hier steht jetzt normaler Text. Mit
verschiedenen Formatierungen. <b> Hier steht jetzt fetter Text. </b> Mit verschiedenen Formatierungen.
Hier steht jetzt normaler Text. </p>
</body>
</html>
Bei Verwendung des Absatzzeichens <p> </p> brauchst Du keine Zeilenschaltung <br> .
Und so sieht das Beispiel später im Browser aus:
Dies ist die Homepage von Hansi Mueller aus Deutschland!
Hier steht jetzt normaler Text ohne Angabe der Schriftart, Schriftfarbe und Schriftgröße.
Also stellt der Browser das gemäß seinen Einstellungen dar.
Hier steht jetzt formatierter Text. Mit verschiedenen Formatierungen kann man den Text aber
"verschönern". Hier steht jetzt normaler Text. Mit verschiedenen Formatierungen. Hier steht jetzt normaler
Text. Mit verschiedenen Formatierungen. Hier steht jetzt kursiver Text. Mit verschiedenen
Formatierungen.
Hier steht jetzt normaler Text. Mit verschiedenen Formatierungen. Hier steht jetzt normaler Text. Mit
verschiedenen Formatierungen. Hier steht jetzt fetter Text. Mit verschiedenen Formatierungen. Hier
steht jetzt normaler Text.
Standardmäßig wird alles im Browser an der linken Seite ausgerichtet. Du kannst aber mit
verschiedenen Anweisungen den Text auch zentriert oder rechts ausgerichtet darstellen. Das sieht
dann so aus:
Dieser Text ist links ausgerichtet.
Dieser Text ist zentriert ausgerichtet.
Dieser Text ist rechts ausgerichtet.
Die Anweisung wird in einem beliebigen Tag geschrieben z.B.:
<p align="left"> Text </p> oder
<p align="center"> Text </p> oder
<p align="right"> Text </p>
Dann gibt es noch das Tag <pre> </pre>
Manchmal ist es wichtig, Texte in diktengleicher Schrift (d.h. wie mit der Schreibmaschine
geschrieben) darzustellen. Damit werden z.B. Einrückungen so wiedergegeben, wie sie
eingegeben wurden. Ein Beispiel:
++++++++
Die einzelnen Währungen werden wie folgt in EURO umgerechnet:
eigene Währung
EURO
----------------D-Mark
1,00
1,95583
Franz.Franc
1,00
6,55957
++++++++
Alle Buchstaben, Zeichen, Zahlen und Tabulatorsprünge wurden wie auf der Schreibmaschine
eingegeben, ohne jede Formatierungsanweisung. Der ganze Text steht lediglich zwischen diesen
beiden Tags <pre> </pre>.
Es gibt noch weitere Tags für die Formatierung. Nicht alle sind wirklich sinnvoll, z.B. unerstrichener
Text (man verwechselt das dann leicht mit einem Link und sollte daher nach Möglichkeit nicht
eingesetzt werden). Text hoch- oder tiefstellen (was manchmal vorkommt) einzelne Buchstaben
oder Worte in einem längeren Text größer oder kleiner darstellen, diktengleichen Text (siehe oben).
Hier zeige ich ohne Beispiel nur wie die Tags geschrieben werden; ausprobieren kannst Du das
dann sehr leicht selber:
<tt> </tt>.
diktengleichen Text
<u> </u>.
unterstrichener Text
<strike> </strike>.
durchgestrichener Text
<big> </big>.
größer als der übrige Text
<small> </small>.
kleiner als der übrige Text
<sup> </sup>.
hochgestellter Text
<sub> </sub>.
tiefgestellter Text
Du kannst einzelne Textblöcke durch Linien optisch voneinander trennen, indem Du folgenden Tag
benutzt:
<hr>
Das sieht dann so aus:
Die Breite (Länge) der Linie kannst Du mit der Angabe "width" bestimmen. Ebenfalls kannst Du die
Linie zentriert oder rechts ausrichten. Beispiel:
<hr width=350 align="center">
Ergebnis:
In der nächsten Lektion geht es um die Darstellung von Aufzählungen, also Listen.
4. Lektion
HTML-Kursus fuer Anfaenger von Software-Help - Aufzaehlung u...
Aufzählungen / Listen
Es gibt unterschiedliche Arten von Listen:
Numerierte Listen
Aufzählungslisten (Bullet-Listen)
Definitionslisten
Fangen wir vorne an:
Numerierte Listen
Bei numerierten Listen werden alle Einträge automatisch durchnumeriert.
Man beginnt eine solche Liste mit dem Tag
<ol>
Das heißt "ordered list" = numerierte Liste. Die einzelnen Einträge in die Liste schreibt man jeweils
zwischen die Tags
<li> </li>
Die gesamte Liste wird dann mit
</ol>
beendet. Ein Beispiel:
<ol>
<li> Erdbeereis </li>
<li> Schokoladeneis </li>
<li> Vanilleeis </li>
</ol>
Das Ergebnis:
1. Erdbeereis
2. Schokoladeneis
3. Vanilleeis
Die Listeneinträge können statt mit 1., 2. usw. auch mit Buchstaben (z.B. a., b., c. usw.)
durchnumeriert werden oder mit römischen Ziffern (I., II., III. usw.). Dann wird im öffnenden "ol"-Tag
beispielsweise type=a oder type=I angegeben. Beispiele:
<ol type=a>
</ol>
Das Ergebnis:
a. Erdbeereis
b. Schokoladeneis
c. Vanilleeis
<ol type=I>
</ol>
Das Ergebnis:
I. Erdbeereis
II. Schokoladeneis
III. Vanilleeis
Diese Listen können auch verschachtelt werden. Das sieht dann so aus:
<ol type=I>
<ol type=a>
<li> Schokoladensoße </li>
<li> Himbeersoße </li>
</ol>
</ol>
Das Ergebnis:
I. Erdbeereis
a. Schokoladensoße
b. Himbeersoße
II. Schokoladeneis
III. Vanilleeis
Aufzählungslisten (Bullet-Listen)
Bei Aufzählungslisten wird keine Numerierung vorgenommen, sondern es werden die einzelnen
Listenpunkte z.B. mit einem Punkt dargestellt. Statt mit "ol" beginnt man die Liste mit "ul", was
"unordered list" = unsortierte Liste heißt. Beispiel:
<ul>
<li> Volkswagen </li>
<li> Opel </li>
<li> Porsche </li>
</ul>
Das Ergebnis:
Volkswagen
Opel
Porsche
Die Aufzählungszeichen kann man aus 3 Zeichen auswählen. Es sind entweder "circle" oder
"spuare" oder "disc" (wobei "disc" die Voreinstellung - also der Punkt ist und nicht extra angegeben
werden muß). Wie die Zeichen dargestellt werden, entscheidet der Browser. Es kann hier also
Unterschiede geben, auf die man keinen Einfluß hat, da man ja nicht weiß, mit welchem Browser
der User arbeitet. Hier drei Beispiele:
<ul type=circle>
<li> Opel </li>
<li> Porsche </li>
</ul>
Das Ergebnis:
Volkswagen
Opel
Porsche
<ul type=square>
<li> Opel </li>
<li> Porsche </li>
</ul>
Das Ergebnis:
Volkswagen
Opel
Porsche
<ul type=disc>
<li> Opel </li>
<li> Porsche </li>
</ul>
Das Ergebnis:
Volkswagen
Opel
Porsche
Definitionslisten
Definitionslisten könnte man z.B. für eine Inhaltsübersicht benutzen oder für Glossare. Ein Beispiel
wird das besser verständlich machen:
<dl>
<dt> 1. Lektion </dt>
<dd> Allgemeines über HTML </dd>
<dd> Schriftart, Schriftgröße, Schriftfarbe, Hintergrundfarbe </dd>
<dd> Formatierung und Absätze </dd>
</dl>
Das Ergebnis:
1. Lektion
Allgemeines über HTML
2. Lektion
Schriftart, Schriftgröße, Schriftfarbe, Hintergrundfarbe
3. Lektion
Formatierung und Absätze
In der nächsten Lektion geht es um Tabellen.
5. Lektion
HTML-Kursus fuer Anfaenger von Software-Help - Tabellen
Tabellen
Die einfachste und schönste Art, die Webseite zu gestalten, ist meiner Meinung nach die Arbeit mit
Tabellen. Wenn Du schon einmal mit einer Tabellenkalkulation gearbeitet hast, kennst Du Dich mit
Zellen usw. gut aus. Wenn nicht, wirst Du es hier schnell lernen.
Eine Tabelle beginnt mit dem Tag <table> und endet mit dem Tag </table>.
Dazwischen werden die einzelnen Tabellenzeilen mit den Tags <tr> und </tr> bestimmt.
Die Tabellenspalten (die die Daten enthalten) werden mit den Tags <td> und </td> festgelegt.
Du mußt nach dem TABLE-Tag immer mit einer Tabellenzeile <tr> beginnen. Dann bestimmst
Du mit <td> die Tabellen-Spalten. Hier ein kleines Beispiel einer Tabelle mit 2 Tabellenzeilen und 2
Tabellenspalten:
<table border=1>
<tr>
<td> Dies ist die 1. Spalte in der 1. Zeile </td>
<td> und dies die 2. Spalte in der 1. Zeile </td>
</tr>
<tr>
<td> Die 1. Spalte in der 2. Zeile </td>
<td> Die 2. Spalte in der 2. Zeile </td>
</tr>
</table>
Dies ist die 1. Spalte in der 1. Zeile und dies die 2. Spalte in der 1. Zeile
Die 1. Spalte in der 2. Zeile
Die 2. Spalte in der 2. Zeile
Damit die Tabelle einen Rahmen hat, habe ich (wie Du oben sehen kannst) im TABLE-Tag die
Anweisung "border=1" geschrieben. "border=0" würde keinen Rahmen anzeigen. Manchmal will
man Bilder und Text innerhalb einer Tabelle plazieren, weil man das dann sehr einfach ausrichten
kann; aber der Rahmen würde stören, also läßt man ihn weg. Du kannst allerdings auch Texte sehr
stark hervorheben, indem Du einen sehr starken Rahmen für die Tabelle wählst; z.B.:
Dies ist wahnsinnig interessanter
Text und sollte von allen unbedingt
verinnerlicht werden!!! Aber nur,
wenn man gar nichts besseres zu
tun hat. Denn es ist schwierig,
sinnvolle Beispiele zu finden. Also
nicht meckern!!!
Nun wie habe ich das gemacht? Es ist ganz einfach, denn die Anweisungen kennst Du schon:
<table border=8 width="250px" align=center>
<tr>
<td> Dies ist wahnsinnig interessanter Text und sollte von allen unbedingt verinnerlicht werden!!!
Aber nur, wenn man gar nichts besseres zu tun hat. Denn es ist schwierig, sinnvolle Beispiele zu
finden. Also nicht meckern!!! </td>
</tr>
</table>
Alle Anweisungen für Breite, Höhe, Ausrichtung und die Hintergrundfarbe kannst Du direkt in das
einzelne Tag schreiben. Im TABLE-Tag gilt die Anweisung für die ganze Tabelle; im TR-Tag für die
ganze Zeile und im TD-Tag nur für die jeweilige Zelle. Weitere Formatierungsanweisungen sind
z.B. "CELLSPACING" (Abstand zwischen den einzelnen Zellen) und "CELLPADDING" (Abstand
des Zellinhaltes - also des Textes - zum Zellenrand). Außerdem kannst Du die Hintergrundfarbe mit
"BGCOLOR" und die Rahmenfarbe mit "BORDERCOLOR" festlegen. Ein Beispiel:
<table border=8 width="250px" align="center" bgcolor="#00AFFF" bordercolor="#003080"
cellspacing=8 cellpadding=8>
<tr>
<td> Dies ist wahnsinnig interessanter Text und sollte von allen unbedingt verinnerlicht werden!!!
Aber nur, wenn man gar nichts besseres zu tun hat. Denn es ist schwierig, sinnvolle Beispiele zu
finden. Also nicht meckern!!! </td>
</tr>
</table>
Dies ist wahnsinnig
interessanter Text und sollte
von allen unbedingt
verinnerlicht werden!!! Aber
nur, wenn man gar nichts
besseres zu tun hat. Denn es
ist schwierig, sinnvolle
Beispiele zu finden. Also nicht
meckern!!!
Die Texte innerhalb einer Zelle kannst Du mit der Anweisung ALIGN für die horizontale und VALIGN
für die vertikale Ausrichtung festlegen. Aber auch hier mögen nicht alle Netscape-Versionen die
VALIGN-Anweisung ausführen. Der neue Netscape-Browser Version 6.x erwartet übrigens die
Angabe in Anführungsstrichen, z.B. ALIGN="center" (ohne Anführungsstriche ignoriert dieser
Browser ALIGN und VALIGN völlig) während die älteren Browser-Versionen die Angabe auch ohne
Anführungsstriche umsetzen. Hier ein Beispiel, das auf fast allen Browsern funktioniert:
<table border=1>
<tr>
<td align="left" valign="top" height="80px" width="150px"> Text left und top </td>
<td align="center" valign="bottom" height="80px" width="150px"> Text center und
bottom </td>
</tr>
<tr>
<td align="right" valign="middle" height="80px" width="150px"> Text right und middle </td>
<td align="center" valign="middle" height="80px" width="150px"> Text center und
middle </td>
</tr>
</table>
Text left und top
Text center und bottom
Text right und middle
Text center und middle
Wie Du siehst, habe ich im jeweiligen TD-Tag die Anweisungen untergebracht, die für die jeweilige
Zelle Geltung haben, also auch die Höhe und Breite. Einige Browser akzeptieren es nicht, wenn bei
Breite und Höhe die Angabe "px" fehlt, denn um Pixel handelt es sich hier. Eigentlich müßte es also
richtig so wie oben geschrieben werden. Du könntest die Angabe nämlich auch in Prozent
vorgeben, also z.B. width="20%". Du kannst im TABLE-Tag bereits die prozentuale Größe der
Tabelle angeben, z.B. width="80%" - was bedeutet, daß die Tabelle 80 % der Bildschirmbreite
einnimmt. Hast Du die einzelne Zelle bei TD mit width="20%" angegeben, bedeutet dies, daß die
Spalte genau 20% dieser 80 %-breiten Tabelle ausmacht.
Warum macht man das? Da man nicht weiß, welche Bildschirmauflösung der User hat, kann man
mit der Prozentangabe die Tabelle sehr variabel gestalten, d.h. sie paßt sich in der Breite an und
muß nicht gescrollt werden, falls sie in der Breite nicht ganz auf den Bildschirm passen würde (was
bei der Pixel-Angabe leicht passieren kann). Wenn die Tabellenbreite mit 80% festgelegt wird, sieht
es besser aus, wenn die Tabelle zentriert auf der Seite dargestellt wird. Das machst Du mit der
Angabe ALIGN="center". Auch diese Angabe steht dann im TABLE-Tag. Hier ein Beispiel:
<table border=1 width="70%" align="center">
<tr>
<td width="15%" height="100px" valign="top"> 1. Zelle </td>
<td width="85%" height="100px" align="center" valign="middle"> 2. Zelle </td>
</tr>
</table>
1. Zelle
2. Zelle
Du kannst in einer Tabelle mehrere Zellen miteinander verbinden. Mit COLSPAN=2 gibst Du z.B.
an, daß 2 Tabellenspalten (horizontal) zu einer zusammengefaßt werden sollen. Mit ROWSPAN=2
gibst Du an, daß zwei Tabellenzeilen in derselben Spalte (vertikal) zusammengefaßt werden. Hier
ein Beispiel:
Horizontal verbinden mit COLSPAN
<tr>
<td colspan=2 align="center" valign="middle"> Montag </td>
</tr>
<tr>
<td width="50%" align="center" valign="middle"> Morgens Einkaufen </td>
<td width="50%" align="center" valign="middle"> Susi anrufen </td>
</tr>
<tr>
<td colspan=2 align="center" valign="middle"> Dienstag </td>
</tr>
<tr>
<td width="50%" align="center" valign="middle"> Morgens Ausschlafen </td>
<td width="50%" align="center" valign="middle"> Abends in die Disco </td>
</tr>
</table>
Das Ergebnis:
Montag
Morgens
Einkaufen
Susi anrufen
Dienstag
Morgens
ausschlafen
Abends in die
Disco
Vertikal verbinden mit ROWSPAN
<tr>
<td rowspan=2> Montag </td>
<td> Morgens Einkaufen </td>
</tr>
<tr>
<td> Susi anrufen </td>
</tr>
<tr>
<td rowspan=2> Dienstag </td>
<td> Morgens Ausschlafen </td>
</tr>
<tr>
<td> Abends in die Disco </td>
</tr>
</table>
Das Ergebnis:
Montag
Dienstag
Morgens Einkaufen
Susi anrufen
Morgens ausschlafen
Abends in die Disco
Das war schon eine ganze Menge für Anfänger und sicher nicht leicht zu verdauen. Es gibt weitere
Möglichkeiten, Tabellen aufzubauen und zu formatieren. Nicht für alles kann ich hier Beispiele zum
Nacharbeiten vorgeben. Probier das einfach selbst mal aus. Es ist ganz einfach.
Es gibt darüber hinaus noch folgende Möglichkeiten:
Eine Überschrift mit dem Tag CAPTION festlegen:
<CAPTION> Überschrift für die Tabelle </CAPTION>
Wenn Du Text neben einer Tabelle (also außerhalb) an der Tabelle ausrichten willst, kannst Du den
Abstand des Textes zum Rand mit HSPACE und VSPACE in Pixeln angeben, damit der Text nicht
so dicht an den Rahmen der Tabelle gesetzt wird. HSPACE = horizontaler Abstand und VSPACE =
vertikaler Abstand. Diese Angabe gehört wie alle anderen direkt in das TABLE-Tag:
<table hspace="5px" vspace="5px"> Abstand des Textes zum Zellenrand </table>
Du kannst z.B. im TABLE-Tag festlegen, wo Du Rahmenlinien haben willst und wo nicht. Da gibt es
folgende Möglichkeiten:
FRAME=ABOVE
FRAME=BELOW
FRAME=BORDER
FRAME=BOX
FRAME=HSIDES
FRAME=LHS
FRAME=RHS
FRAME=VOID
FRAME=VSIDES
Rahmen über den Zellen
Rahmen unter den Zellen
Rahmen um die Zellen herum
wie BORDER
Alle horizontalen Rahmen
Rahmen links von den Zellen
Rahmen rechts von den Zellen
keine Rahmen
Alle vertikalen Rahmen
Du kannst den Geltungsbereich mit dem Attribut RULES festlegen, z.B.:
RULES=ALL
RULES=COLS
RULES=GROUPS
RULES=NONE
RULES=ROWS
Linien zwischen
Linien zwischen
Linien zwischen
keine Linien
Linien zwischen
Spalten und Zeilen
Spalten
Gruppen
Zeilen
Dann gibt es die Möglichkeit mit COLGROUP, SPAN und COL ganze Gruppen von Spalten
festzulegen und zu formatieren. Dazu gehört, daß man mit THEAD einen Tabellenkopf und mit
TBODY einen Tabellenkörper festlegt. Zur besseren Unterscheidung nimmt man innerhalb des
Tabellenkopfes statt des TD-Tags das TH-Tag. Das TH-Tag hat die gleiche Bedeutung wie TD wird
aber gerne für Spaltenüberschriften benutzt. Wenn Du später mit CSS arbeitest, wirst Du sehen,
daß man damit andere Formatierungen vornehmen kann. Das erleichtert die ganze Schreibarbeit
wesentlich. Dies ist aber schon sehr komplex und für Anfänger nicht leicht verständlich. Dennoch
werde ich hier ein Beispiel geben, falls Du später mal in die Verlegenheit kommen solltest und eine
sehr umfangreiche Tabelle benutzen mußt.
<table border=1 cellspacing=2 cellpadding=4 frames="box" rules="groups"
bordercolor="#0000FF" bgcolor="#FFFFFF" align="center" width="90%">
<caption>Benutzte Browser</caption>
<colgroup span=1 align="center"></colgroup>
<colgroup span=5 width="20%" align="center"></colgroup>
<thead>
<tr bgcolor="#00AFFF">
<th align="center"> </th>
<th align="center">IE 5.0</th>
<th align="center">IE 5.5</th>
<th align="center">NS 4.7</th>
<th align="center">NS 6.0</th>
<th align="center">Opera</th>
<th align="center">Andere</th>
</tr>
</thead>
<tbody>
<tr>
<td nowrap bgcolor="#C0C0C0" align="left">privat</td>
<td align="center">12 %</td>
</tr>
<tr>
<td nowrap bgcolor="#C0C0C0" align="left">beruflich</td>
</tr>
</tbody>
</table>
Das Ergebnis:
Benutzte Browser
IE 5.0
IE 5.5
NS 4.7
NS 6.0
Opera
Andere
privat
12 %
42 %
18 %
5%
13 %
10 %
beruflich
26 %
32 %
14 %
8%
15 %
5%
Während der Netscape die Anweisung für FRAMES und RULES im TABLE-Tag ignoriert und alle
Rahmenlinien anzeigt, zeigt der Internet Explorer die Rahmen teilweise an und teilweise nicht. Die
oben benutzte Anweisung NOWRAP soll dafür sorgen, daß der Inhalt der Zelle nicht umgebrochen
wird. Ist die Spaltenbreite aber fest vorgegeben, wird sich die Breite der Spalte nicht verändern und
trotz NOWRAP wird der Text, weil er nicht in die Spalte passt, umgebrochen. CELLSPACING und
CELLPADDING regulieren den Abstand zum Rand zwischen den Spalten.
Zum Schluß noch ein Hinweis. Wenn Du einmal die Seite verlängern willst, damit das Textende
nicht direkt am unteren Browserrand endet, kannst Du eine sogenannte "blinde" Tabelle
verwenden. Dafür schreibst Du einfach das Tabellengerüst mit <TABLE> und dann das
schließenden Tag </TABLE>. Die Höhe dieser Tabelle legst Du dann im TABLE-Tag mit
height="10px" (oder wieviel Platz Du brauchst) fest und natürlich muß im TABLE-Tag border=0
stehen, damit kein Rahmen angezeigt wird.
Dies war eine sehr ausführliche Behandlung von Tabellen. Ich erhebe aber nicht den Anspruch auf
Vollständigkeit. Mit den hier gemachten Angaben kannst Du aber so ziemlich alles machen, was
man mit Tabellen so anstellen kann. Bei der Einbindung von Bildern können Tabellen ebenfalls sehr
hilfreich sein. Das werde ich Dir, wenn es um "Images" geht, noch zeigen.
In der nächsten Lektion geht es um Verweise (Links).
6. Lektion
HTML-Kursus fuer Anfaenger von Software-Help - Verweise / Links
Verweise (Links)
Wie Du in den vorangegangenen Lektionen gesehen hast, war am Schluß immer ein Verweis auf
die nächste Lektion. Du konntest diesen "Link" anklicken und die nächste Lektion wurde aufgerufen.
Dies war ein Verweis auf eine Webseite, die auf dem eigenen Webserver im gleichen Verzeichnis
liegt. Ein Verweisziel wird auch Anker genannt. Der Verweis wird wie folgt geschrieben:
<a href="lektion2.htm"> 2. Lektion </a>
Der Link erscheint dann auf der Webseite in einer anderen Farbe (wie Du die festlegst, habe ich ja
schon geschrieben) und er ist unterstrichen.
Liegt die Datei in einem anderen Verzeichnis, aber auf dem eigenen Webserver, muß der Pfad mit
angegeben werden:
Hierbei mußt Du Dir die Baumstruktur von Windows vorstellen, z.B.:
--Eigene Dateien
HTML (1. Verzeichnis)
Bilder (2. Verzeichnis)
Downloads (3. Verzeichnis)
NEWS (4. Verzeichnis)
ARCHIVE (5. Verzeichnis)
Wenn Du also einen Link auf das Verzeichnis Archive setzen willst, das unterhalb von HTML liegt,
mußt Du den Pfad wie folgt schreiben:
<a href="ARCHIVE/artikel299.htm"> Artikel 2 aus 1999 </a>
Willst Du dann einen Link zurück zu den HTML-Seiten angeben, die höher liegen als die ARCHIVE,
müßte der Link wie folgt geschrieben werden:
<a href="../HTML/lektion2.htm"> 2. Lektion </a>
Das heißt, für Vorwärtssprünge gibst Du den Namen des Verzeichnisses, Schrägstrich und den
Namen der Datei an. Für Rücksprünge im Verzeichnisbaum wird mit ../ zum höheren
Hauptverzeichnis gesprungen und von dort wieder zum Verzeichnis, daß die Datei enthält. Das ist
zu Anfang nicht ganz leicht zu verstehen. Am besten probierst Du es einmal auf Deinem eigenen
PC mit verschiedenen Verzeichnissen aus.
Ein Verweis auf eine fremde Webseite wird wie folgt geschrieben:
<a href="http://www.selfhtml.teamone.de/"> Die Webseite für das Nachschlagewerk
"SELFHTML" von Stefan Münz </a>
Wichtig hierbei ist, daß Du die komplette Internetadresse angibst (also auch http://), sonst
funktioniert Dein Link nicht.
Wenn Du einen sehr langen Text mit mehreren Überschriften hast, kannst Du einen Verweis direkt
auf diese Überschrift setzen. Klickt der User diesen Link an, springt man im Text direkt auf diesen
Punkt. Jeder einzelne, anzuspringende Punkt bekommt einen Namen. Diesen Namen benutzt Du
dann als "Anker". Ein solcher Verweis sieht so aus:
<a href="#Ueberschrift 1"> Ueberschrift zum Artikel des Jahres </a>
Dieser Verweis könnte am Anfang des umfangreichen Artikels stehen. Im Text selbst schreibst Du
dann direkt vor den anzuspringenden Punkt die "Sprungmarke". Angenommen der Text beginnt mit
der Überschrift "Ueberschrift zum Artikel des Jahres" und dorthin willst Du springen:
<a name="Ueberschrift 1"></a>
Ueberschrift zum Artikel des Jahres
Liegt der Punkt, den Du anspringen willst, in einer anderen Datei, sieht der Verweis so aus:
<a href="AndereDatei.htm#Ueberschrift 1"> Ueberschrift zum Artikel des Jahres </a>
Liegt der Punkt, den Du anspringen willst, nicht nur in einer anderen Datei, sondern auch in einem
anderen Verzeichnis, mußt Du den Verweis so schreiben:
<a href="Verzeichnis/AndereDatei.htm#Ueberschrift 1"> Ueberschrift zum Artikel des
Jahres </a>
Natürlich ist diese Liste nicht vollständig. Es gibt FTP-Server, die sprichst Du nicht mit http://,
sondern mit ftp:// an. Es gibt unterschiedliche Adressen für Telnet, Newsgroups und Gopher. Da
dies ein Anfängerkursus ist, werde ich darauf nicht näher eingehen. Wenn Du eine Adresse hast,
dann schau in die URL-Leiste Deines Browsers - dort steht die ganze Adresse - und die fügst Du
dann in Deinen Link ein.
Ein sehr wichtiger Verweis ist der E-Mail-Verweis. Wenn Du diesen in Deine Webseite einbaust,
wird beim User sein E-Mail-Programm gestartet und er kann Dir direkt eine E-Mail schreiben:
<a href="mailto:[email protected]"> E-Mail an [email protected] </a>
Du kannst auch direkt einen Betreff (subject) angeben, der dann automatisch in die E-Mail eingefügt
wird:
<a href="mailto:[email protected]?subject=Dein HTML-Kursus"> E-Mail an
[email protected] </a>
E-Mail an [email protected]
Natürlich möchtest Du irgendwann auch Dateien oder Bilder zum Download anbieten. Es spielt
keine Rolle, ob das eine Word-Datei, eine Excel-Datei, eine PDF-Datei, eine ZIP-Datei oder ein Bild
ist. Du schreibst einfach die Datei in den HREF-Teil:
<a href="Uebersicht.zip"> ZIP-Datei zum Downloaden</a>
<a href="Uebersicht.pdf"> PDF-Datei zum Downloaden</a>
<a href="MeinBild.jpg"> Mein Bild zum Downloaden</a>
Voraussetzung für diese Schreibweise ist, daß die Datei im selben Verzeichnis liegt wie Deine
HTML-Datei. Liegt sie z.B. in einem Verzeichnis "Download" mußt Du die gesamte Internetadresse,
das Verzeichnis und die Datei angeben:
<a href="http://www.DeineAdresse.de/Download/Uebersicht.zip"> ZIP-Datei zum
Downloaden</a>
In der nächsten Lektion kannst Du alles über Bilder / Grafiken (Images) lernen.
7. Lektion
HTML-Kursus fuer Anfaenger von Software-Help - Bilder / Grafiken...
Bilder / Grafiken (Images)
Bilder haben im Internet meistens die Dateiendung "jpg" und Grafiken normalerweise "gif", wobei
natürlich auch Bilder ein "gif" sein können und umgekehrt. Welches ist nun das "bessere" Format?
Da dies ein HTML-Kursus ist, werde ich nicht ausführlich auf Bildbearbeitung eingehen. Mit einem
Bildbearbeitungsprogramm wie z.B. Adobe Photoshop (sehr teuer - aber das beste
Grafikprogramm) oder Fireworks von Macromedia (nicht schlecht, wenn Du nur Bilder bearbeiten
und keine umfangreichen Grafiken selbst erstellen willst) kannst Du die Größe Deines Bildes
(gleich ob eingescannte Fotos oder Grafiken) verändern.
Ein normales Foto im Postkartenformat (10 x 15 cm) bei einer Auflösung von 75 Pixel/Inch als
Bitmap hat eine Dateigröße von 387 KB. Gespeichert als GIF mit 256 Farben (das Maximale, was
GIF darstellen kann) ergibt = 78 KB, mit 128 Farben = 61 KB (wobei die Qualität allerdings bei
Verringerung der Farben sehr viel schlechter wird).
Wird das Foto als JPG mit 80 % Qualität gespeichert, ergibt sich eine Dateigröße von 75 KB, mit
70 % = 55 KB, mit 60 % = 43 KB. Was die Dateigröße anbelangt, ist JPG also für Fotos die
bessere Wahl, da auch bei 60 % noch eine recht gute Qualität erreicht werden kann. Für Grafiken,
die überwiegend aus Strichen und Symbolen bestehen und die möglichst scharf dargestellt werden
sollen, ist GIF das bessere Format. GIF hat zudem gegenüber JPG den Vorteil, daß Teile (z.B. der
Hintergrund) transparent dargestellt werden können, was mit JPG nicht geht. Dafür kann man mit
JPG Farbverläufe sauber darstellen, was wiederum mit GIF nicht geht.
Wofür auch immer Du Dich letztendlich entscheidest, die Dateigröße bestimmt den Ladevorgang.
Es wird bei den Grafikprogrammen angezeigt, wie lange die Ladezeit bei einem Modem, das mit
28,8 KBit/sec. arbeitet, ist. Wenn der User minutenlang auf die Darstellung eines Bildes warten
muß, klickt er wahrscheinlich nach spätestens 1 Minute weg und Dein Bild wird sich niemand
ansehen (was Du ja auch nicht willst). Es ist also die Dateigröße genauso, wenn nicht sogar
wichtiger (das ist Geschmackssache) als die Qualität.
Es gibt noch weitere Grafikformate, die aber nicht von allen Browsern dargestellt werden (z.B.
PNG). Deswegen werde ich hier auch nicht weiter darauf eingehen. Dies soll als Einführung
reichen.
In der vorangegangenen Lektion hast Du ein Ordner-Symbol gesehen. Dieses kleine Bild habe ich
mit folgender Anweisung in die Seite eingebaut:
<img src="ordner.gif" width="29" height="24" border="0" alt="Ein Ordnerbild">
Das Ergebnis:
Das IMG-Tag hat kein schließendes Tag.
Den Dateinamen setzt Du in Anführungsstriche hinter src=. Die Breite und Höhe muß genau den
Bildmaßen entsprechen. Veränderst Du diese Werte, wird das Bild verzerrt. Border ist = 0, weil ich
keinen Rahmen um das Bild herum haben möchte. Willst Du einen Rahmen, mußt Du (wie bei den
Tabellen) den Wert auf 1 oder höher setzen. bei alt= gibst Du in Anführungsstrichen einen
passenden, beschreibenden Text ein, der angezeigt wird, wenn das Bild nicht geladen wird oder
auch bereits bei größeren Bildern bis das Bild geladen wird.
Liegt das Bild in einem anderen Verzeichnis mußt Du bei src= natürlich (wie schon in den
vorangegangenen Lektionen beschrieben) den Pfad mit angeben, z.B.:
<img src="bilder/ordner.gif" width="29" height="24" border="0" alt="Ein Ordnerbild">
Wenn Du später mit JavaScript arbeitest, kann es wichtig sein, daß das Bild einen Namen hat, mit
dem es angesprochen werden kann; z.B.
<img src="ordner.gif" width="29" height="24" border="0" alt="Ein Ordnerbild"
name="ordnerbild">
Soll neben dem Bild Text stehen, kannst Du diesen Text mit der schon bekannten Anweisung
ALIGN ausrichten:
Ausrichtung mit align="top":
Diese Grafik wurde mit dem Programm FLASH4 erstellt.
Ausrichtung mit align="middle":
Ausrichtung mit align="bottom":
Nur der Text, der neben dem Bild noch in eine Zeile paßt, wird neben dem Bild dargestellt. Ist der
Text länger, wird der Text unterhalb des Bildes weitergeschrieben.
Wenn Du mehrere Zeilen Text hast und einen Teil davon unter dem Bild weitergeschrieben haben
willst, kannst Du das mit der Anweisung <br clear=all> erzwingen:
<img src="grafik1_kl_b.gif" width="139" height="99" border="0" alt="Eine Grafik"
name="Grafik 1">Diese Grafik wurde mit dem Programm FLASH4 erstellt.<br clear=all>Flash4
ist ein Softwareprodukt von Macromedia.
Flash4 ist ein Softwareprodukt von Macromedia.
Den Abstand zwischen Grafik und Bildschirmrand sowie Grafik und Text bestimmst Du mit
HSPACE und VSPACE:
<img src="grafik1_kl_b.gif" width="139" height="99" border="0" alt="Eine Grafik"
name="Grafik 1" hspace=30 vspace=30>Dieselbe Grafik.<br clear=all>Flash4 von Macromedia
Dieselbe Grafik.
Flash4 von Macromedia
Nun das ist eigentlich nicht so ganz das, was Du willst? Die Grafik sollte auch weiterhin links am
Rand stehen? Jetzt kommt die Tabelle ins Spiel. Mit Tabellen kannst Du auch hier bessere
Ergebnisse erzielen:
<table border=0>
<tr>
<td> <img src="grafik_kl_b.gif" width="139" height="99" border="0" alt="Eine Grafik">
</td>
<td width="30px"> Ein Leerzeichen </td>
<td valign="middle">
Hier in der 3. Tabellenspalte steht jetzt der Text, den ich separat ausrichten kann, ohne die Grafik
ebenfalls mit anzusprechen.
</td>
</tr>
</table>
Hier in der 3. Tabellenspalte steht jetzt der Text, den ich separat
ausrichten kann, ohne die Grafik ebenfalls mit anzusprechen.
Die Tabelle hat in diesem Fall 3 Spalten und 1 Zeile. In die erste Spalte setze ich das Bild, in der 2.
Spalte gebe ich nur ein Leerzeichen ein und lasse ansonsten die Spalte leer. Sie dient nur zur
pixelgenauen Ausrichtung des Textes (der in der 3. Spalte steht) zur Grafik. Den Rahmen habe ich
im TABLE-Tag mit 0 angegeben, weil die Tabelle gar nicht sichtbar sein soll.
Jetzt kann ich natürlich die Tabelle selbst z.B. zentriert zur Seite ausrichten. Ich kann die Grafik
innerhalb der 1. Tabellenspalte ausrichten und völlig separat den Text. Damit habe ich wesentlich
mehr Gestaltungsspielraum, als wenn ich keine Tabelle benutzen würde - und ein bißchen
Mehrarbeit lohnt sich in diesem Fall wirklich.
Du kannst Grafiken für Verweise (z.B. als Button) benutzen. Hier ein Beispiel:
<a href= "http://www.comproweb.de/" style="text-decoration:none"> <img src="ALPHA.GIF"
width="48" height="48" border="0" alt="Link auf ComProWeb" align="middle" hspace=10 > </a>
Die Webseite von ComProWeb
Das Ergebnis:
Die Webseite von ComProWeb
Wie Du siehst, ist der Text neben dem Bild kein Link - wenn Du aber mit der Maus über das Bild
rollst, wird der Cursor zur Hand (was immer einen Link anzeigt) und der Hinweistext wird
angezeigt. Hier habe ich ein animiertes GIF benutzt. Es spielt also keine Rolle, ob Du ein einfaches
Bild oder ein animiertes Gif nimmst. Animierte Gifs kannst Du selber herstellen (es gibt eine ganze
Reihe von Programmen, mit denen man das machen kann). Im Internet werden allerdings auch
kostenlos sehr viele animierte Gifs zum Downloaden angeboten.
Ich greife jetzt mal ein bißchen vor, indem ich Euch einen kleinen Trick schon hier verrate.
Grundsätzlich kannst Du, wenn Du ein Bild als Verweis benutzt, den Rahmen (der ja bei Links
grundsätzlich um ein Bild herum angezeigt wird oder beim Text die Unterstreichung) verhindern,
indem Du diesen Text
style="text-decoration:none"
im Verweis-Tag (wie Du das in meinem Beispiel oben auch sehen kannst) schreibst. Dies ist eine
Anweisung, die man bei CSS (Cascading Style-Sheets) verwendet.
Wenn Du mit einem Grafikprogramm (z.B. Fireworks, Flash oder Photoshop) selber Buttons
machst, so sind diese natürlich als "gif" oder "jpg" gespeichert und werden ohne Text daneben
dargestellt. Ein Beispiel ohne Funktion:
Wichtig ist, daß Du das IMG-Tag direkt zwischen den Tags <a href... > und </a> schreibst.
Natürlich kannst Du auf Deiner Webseite auch ein Hintergrundbild verwenden. Hierbei mußt Du
allerdings sehr darauf achten, daß das Hintergrundbild nicht zu stark ist und zum Text paßt, denn
den soll man ja auch lesen können. Es gibt sehr viele Hintergrundbilder im Internet zum
Downloaden. Meistens werden sie als sogenannte "Kachel" angeboten. Du kannst aber auch jedes
beliebige andere Bild nehmen. Die Anweisung zum Einbinden des Bildes wird im BODY-Tag
geschrieben, dann gilt das als Hintergrund für die ganze Seite. Man kann die Anweisung aber auch
auf eine Tabelle beschränken, dann kommt die Anweisung in das TABLE-Tag. Und so lautet die
Anweisung, vorausgesetzt, das Bild liegt im gleichen Verzeichnis:
<body background="bild.gif">
Beispiel für eine Tabelle mit Hintergrundbild:
<center>
<table width="100px" height="100px" align="center" valign="middle"
background="kachel.gif">
<tr>
<td><font color="#FFFFFF" size="3"><b>Ein Hintergrundbild</b></td>
</tr>
</table>
</center>
Das Ergebnis:
Ein
Hintergrundbild
Dann gibt es sogenannte Verweis-sensitive Grafiken, auch Image-Maps genannt. Du hast so etwas
vielleicht schon einmal auf anderen Webseiten gesehen, wenn z.B. eine Landkarte dargestellt wird
und Du auf eine Stadt (oder einen Bereich) klicken kannst. Zu einem Text (oder einer separaten
Webseite) bezüglich dieser Stadt wird dann gesprungen. Sehr einfach läßt sich das mit einem
entsprechenden Programm herstellen. Aber ich möchte Dir hier wenigstens die Grundlagen
vermitteln.
Sehr einfach ausgedrückt, wird auf die Grafik ein unsichtbares Rechteck, ein Kreis oder ein
Polygon gelegt, die dann als "Verweis-Fläche" (also anklickbare Fläche) dienen, ähnlich einem
Anker für ein Bild. Es ist nicht ganz einfach, das zu verstehen, weil hier mit Koordinaten gearbeitet
wird. Um das zu erklären muß ich etwas weiter ausholen.
Die Bildschirm-Horizontale wird mit X und die Bildschirm-Vertikale mit Y bezeichnet. Die oberste
linke Ecke des Bildschirms ist X=0 und Y=0, beginnt also mit 0. Davon weiter nach rechts oder
unten gehend erhöht sich dieser Wert um jeweils 1 Pixel bis zur unteren rechten Ecke z.B. X=800
und Y=600 (bei einer Bildschirmauflösung von 800x600). Bei einer Grafik ist das genauso, nur sind
die Endpunkte wahrscheinlich nicht 800 x 600 Pixel, sondern viel weniger (je nach der Größe, ist ja
klar, oder?). Wenn Du eine Grafik mit Image-Maps belegen willst muß Du die entsprechenden
Koordinaten festlegen. Das heißt, daß die Koordinaten mit der oberen X-Position, der oberen
Y-Position, dann die untere X-Position und die untere Y-Position angegeben werden. Also z.B. X=1,
Y=1, X=50, Y=50, wobei die Buchstaben X und Y nicht mitgeschrieben werden (dient hier nur
Deinem besseren Verständnis).
Benannt werden die Maps entweder mit shape=rect (Rechteck), mit shape=circle (Kreis) oder
shape=polygon (beliebiges Vieleck). Wenn Du rechteckige Maps benutzen willst, würde das
ungefähr so aussehen:
<map name="Testfuermaps">
<area shape=rect coords="1,1.50,50" href="datei.htm">
<area shape=rect coords="51,51.100,100" href="datei.htm">
</map>
<img src="rechtecke.gif" usemap="#Testfuermaps" border=0>
Du beginnst also mit dem MAP-Tag und gibst der "MAP" einen Namen. Dann kommt das
AREA-Tag (das kein schließendes Tag hat). In diesem Tag legst Du dann fest, welche Form Du
nehmen willst und mit coords dann die oben erwähnten Koordinaten durch Kommata getrennt.
Dann href und die Datei, zu der gesprungen werden soll (kann auch ein Punkt innerhalb derselben
Webseite sein - z.B. href=#name - siehe auch Lektion 6). Danach das schließende MAP-Tag.
Dann die Grafik, für die diese Image-Maps gelten. Innerhalb des IMG-Tags muß der Name der MAP
wieder angegeben werden. Du verbindest sozusagen die MAP mit dem Image. Alles klar, oder?
Wesentlich komplizierter wird es, wenn Du mit einem Kreis oder Polygon arbeitest.
Bei einem Kreis (shape=circle) legst Du folgende Koordinaten fest: x = Mittelpunkt des Kreises
(Pixel von links gerechnet angeben), y = Mittelpunkt des Kreises (Pixel von oben gerechnet
angeben), r = Radius des Kreises in Pixel.
Beim Polygon (shape=polygon) mußt Du jede Ecke eingeben, wobei Du links oben beginnst und
nacheinander die x und y Koordinaten der jeweiligen Ecke angeben mußt.
Wie schon gesagt, es gibt hervorragende Programme, mit denen Du das ganz einfach
bewerkstelligen kannst - z.B. Fireworks von Macromedia oder das Freeware-Programm Fast
Image-Map von CL-Soft (http://www.cl-soft.de/fim_indx.htm).
In der nächsten Lektion zeige ich Dir, wie man die Webseite in verschiedene Bereiche (FRAMES)
aufteilt.
8. Lektion
HTML-Kursus fuer Anfaenger von Software-Help - Frames
Frames
Es gibt verschiedene Möglichkeiten, eine Webseite zu gestalten. Auf jeden Fall sind aber auf jeder
Webseite mehrere Bereiche. Zumeist das Firmenlogo, die Navigation und der jeweilige Inhalt. Man
kann das auf nur einer Webseite machen, dann baut sich die Seite jedesmal wieder neu auf.
Früher konnte man das nicht anders bewerkstelligen, weil die meisten Browser keine Frames
darstellen konnten. Es gibt sicher auch heute noch User, die so einen alten Browser benutzen, weil
er ihnen ans Herz gewachsen ist. Mir geht das mit einigen Softwareprodukten auch so, die neueren
Versionen gefallen mir nicht, also arbeite ich weiter mit der älteren. Bei den Browsern ab der
Version 3 kann man allerdings davon ausgehen, daß sie Frames darstellen können. Weil das
meiner Meinung nach die schönere Lösung ist, da die Navigation ein fester Bestandteil der Seite ist
und nur die Inhaltsseiten sich ändern, zeige ich Dir an einigen Beispielen, wie man das macht.
Die erste Überlegung, die Du anstellen mußt ist die, ob die Navigation auf der Seite links, rechts,
oben oder unten stehen soll. Die zweite, ob Du einen Frame fest für das Logo vorsehen willst
(dieser Frame wird später nicht gescrollt). Die erste zu ladende Seite wird übrigens immer
index.htm oder default.htm genannt, weil die Browser automatisch nach einer solchen Datei
suchen, wenn Deine Webseite aufgerufen wird. Sie enthält lediglich die Aufteilung für die Frames.
Diese Frame-Seite hat keinen BODY-Tag!
Es sei denn, Du willst auch die älteren Browser berücksichtigen, die keine Frames darstellen
können. Dann müßte für jede Seite im BODY-Tag mit <a href...></a> ein eigener Verweis
geschrieben werden. Browser, die keine Frames darstellen können, würden dann diese Verweise
anzeigen; die anderen Browser stellen das nicht dar. In meinem Beispiel gehe ich darauf nicht
näher ein.
<html>
<head>
<title> </title>
</head>
Hier werden jetzt die Frames vereinbart
</html>
Nehmen wir ein einfaches Beispiel für 2 Frames. Die linke Seite soll die Navigation aufnehmen und
die rechte Seite den Inhalt. Dann schreibst Du folgendes:
<html>
<head>
<title> </title>
</head>
<frameset cols="25%,*" frameborder=0 framespacing=0 border=0>
<frame src="navigation.htm" name="links">
<frame src="inhalt.htm" name="rechts">
</frameset>
</html>
Es ist eigentlich ganz einfach. In das öffnende FRAMESET-Tag schreibst Du, ob Du die Seite in
Reihen = rows oder Spalten = cols aufteilen willst. Danach gibst Du an, wie breit die erste Spalte
bzw. Reihe sein soll. Am besten arbeitest Du mit Prozent und nicht mit Pixelangaben. Das obige
Beispiel zeigt also, daß die erste Spalte eine Breite von 25 % des gesamten Bildschirms ausfüllen
soll. Für Rechenkünstler - bei einer Bildschirmbreite von 800 Pixel ergeben 25 % = 200 Pixel. Du
könntest also auch cols="200px" eingeben. Warum Prozent? Weil es ja User gibt, die eine höhere
oder auch geringere Bildschirmauflösung haben (und Du weißt nicht welche). Machst Du die
Angabe in Prozent, passen sich die Frames der Bildschirmgröße an.
Nach dem Prozentzeichen setzt Du ein Komma und dann ein Sternchen. Das Sternchen besagt
einfach = den verbleibenden Rest (also in diesem Fall 75% des Bildschirms).
Du kannst natürlich Deinen Frames Linien verpassen, dann sieht der User am Bildschirm die
Aufteilung (ob Du das schön findest, ist Geschmacksache). Ich persönlich finde es schöner, wenn
die Frames gar nicht sichtbar sind, also habe ich bei BORDER und auch bei FRAMEBORDER "0"
eingegeben. FRAMESPACING zeigt, wenn Du willst, Abstand zwischen den FRAMES an, sonst ist
der Wert "0". BORDER=0 ist die Anweisung für Netscape-Browser und FRAMEBORDER sowie
FRAMSPACING sind die Angaben für den Internet Explorer. Man muß also konsequent alle 3
Angaben machen, wenn man will, daß die Seite in beiden Browsern (und auch in anderen) gleich
angezeigt wird.
Danach wird mit src= festgelegt, welche Seite in dem jeweiligen Frame angezeigt werden soll.
Außerdem muß jeder Frame einen eigenen Namen bekommen. Wenn Du später in der Navigation
einen Link anklickst, willst Du, daß die dazugehörige Seite im rechten Frame dargestellt wird. Ein
solcher Navigations-Link könnte z.B. so aussehen:
<a href="inhalt.htm" target="rechts"> Inhalt</a>
Mit target="name des Frames" bestimmst Du also, wo die Seite angezeigt werden soll. Du willst
sie ja nicht im Frame mit der Navigation haben.
Da Du 2 Frames hast, mußt Du natürlich auch die Seite für den 2. Frame (hier "rechts") angeben.
Danach kommt dann das schließende FRAMESET-Tag. Eine kleine Grafik soll Dir einmal zeigen,
wie die Frames auf der Seite aussehen würden:
Wenn Du Deine Navigation oben auf der Seite darstellen willst änderst Du einfach die Angabe
"cols" in "rows" und die Namen in "oben" und "unten". Willst Du die Navigation unten darstellen,
änderst Du die Angaben auf rows="*,25%". Also erst das Sternchen und dann die Prozentangabe.
Etwas komplizierter wird es, wenn Du 3 Frames auf Deiner Seite haben willst. Du mußt die
Angaben dann verschachteln. Ein Beispiel für eine Frameseite mit 3 Frames, wobei der linke
Frame wieder die Navigation aufnehmen soll. Dann willst Du aber auch einen Frame für das Logo
haben. Es gibt 2 Möglichkeiten, Entweder teilst Du die Seite zuerst in 2 Spalten und teilst dann
wiederum die rechte Spalte in 2 Reihen (rows) oder Du nimmst als Anfang 2 Reihen und teilst die
untere Reihe dann wieder in 2 Spalten. Für welche Version Du Dich entscheidest spielt keine Rolle.
Nehmen wir folgendes Beispiel: Zuerst wird die Seite in 2 Spalten aufgeteilt, genau wie oben
beschrieben. Danach teilst Du aber die 2. (die rechte) Seite noch einmal und mußt jetzt "rows" für
Reihen angeben.
<html>
<head>
<titel> </titel>
</head>
<frameset cols="25%,*" frameborder=0 framespacing=0 border=0>
<frame src="navigation.htm" name="links">
<frameset rows="10%,*" frameborder=0 framespacing=0 border=0>
<frame src="logo.htm" name="oben">
<frame src="inhalt.htm" name="unten">
</frameset>
</frameset>
</html>
Eine Grafik dazu:
Wenn Du 3 nebeneinander oder übereinander liegende Frames machen willst, machst Du bei cols
oder rows folgende Angabe cols="25%,*,25%". Der linke Frame hat 25 % und der rechte auch; der
in der Mitte die restliche Fläche (in diesem Beispiel also 50 %).
Noch ein Hinweis zu der Anweisung target. Normalerweise zeigst Du Deine Seiten in dem dafür
vorgesehenen Frame an. Es kann aber bei einigen Seiten von Vorteil sein, wenn man sie in einem
eigenen Fenster anzeigt. In diesem Fall müßte die TARGET-Anweisung in Deinem Link
target="_blank" heißen. Willst Du Deine komplette Seite (also die index.htm) durch eine neue
ersetzen, schreibst Du target="_top" (soll heißen: Datei wird im gesamten Anzeigefenster
angezeigt) oder target="_parent" (Datei wird in dem Zustand des Anzeigefensters angezeigt, der
vor dem Start des Frame-Sets aktuell war).
Ich hoffe, daß die Beschreibung einfach genug war und Du jetzt fleißig übst, um die für Dich beste
Variante herauszufinden.
In der nächsten Lektion geht es um Formulare.
9. Lektion
HTML-Kursus fuer Anfaenger von Software-Help - Formulare
Formulare
Auf fast jeder Website gibt es heute ein Formular, mit dem man den Betreibern der Seite eine
Nachricht schicken kann. Das willst Du natürlich auch machen. Es ist gar nicht so schwer, wie es
vielleicht aussieht. Natürlich sind einige Dinge zu beachten.
Alle Formularelemente müssen innerhalb der beiden FORM-Tags stehen:
<form>
</form>
In das öffnende FORM-Tag wird die E-Mail-Adresse geschrieben (action), die Methode (method),
mit der das Formular übermittelt werden soll und der Hinweis, wie der Text zu formatieren ist
(enctype). Außerdem bekommt das Formaular einen Namen (name).
<form action="mailto:[email protected]" method="post" enctype="text/plain"
name="formular">
Nicht alle Browser verschicken allerdings die Formulare mit dieser Anweisung (an die
Email-Adresse). Gerade Netscape z.B. schafft hier immer wieder Irritationen, weil eine Version
macht es - eine andere nicht (ausprobieren ist der einzige Weg, es herauszufinden). Nur beim
Internet Explorer kann man sicher sein, daß das Formular mit dieser Anweisung weitergeleitet wird.
Stell Dir vor, die User schicken Dir eine Nachricht und warten auf Antwort, die nie kommt, weil Du
die Nachricht ja gar nicht erhalten hast. Nicht die feine Art, oder? Um dieses Problem nicht zu
haben, sind 2 Dinge wichtig.
1. Du hast bei Deinem Provider ein eigenes CGI-BIN Verzeichnis (das mußt Du bei Deinem
Provider erfragen) und
2. in diesem Verzeichnis hast Du ein Perl-Script liegen, daß die eingehenden E-Mails auswertet
(das mußt Du selbst schreiben oder Dir von netten Leuten, die solche Programme kostenlos
im Internet zur Verfügung stellen, downloaden).
Wenn Du kein eigenes CGI-BIN Verzeichnis hast, frage Deinen Provider, ob er für solche Kunden
ein Mailprogramm auf seinem Server zur Verfügung stellt. Bei Strato ist das z.B. der Fall (ich bin
Kunde bei Strato und benutze dieses fertige Mailprogramm) - andere Provider machen das sicher
auch so. Am Ende dieser Lektion werde ich ein Beispiel dafür geben, wie die Einträge im
FORM-Tag dann aussehen müssen und was Du darüber hinaus beachten mußt. Jetzt aber erst
einmal eine Übersicht, wie die einzelnen Formular-Elemente in die HTML-Seite eingebunden
werden:
Einzeilige Eingabefelder:
<input type="Text" name="name" value="" size="30" maxlength="30">
Beispiel:
Dieses Tag hat kein schließendes Tag. Jedes Feld muß einen eigenen Namen haben. Mit "value"
kannst Du einen Wert vorbelegen (was z.B. beim Betreff-Feld eine gute Möglichkeit ist). Mit "size"
bestimmst Du die Breite des Feldes, wie es auf der Seite angezeigt werden soll. Mit "maxlength"
legst Du fest, wie viele Zeichen maximal in das Feld eingegeben werden können. Nicht mit allen
Netscape-Versionen funktioniert das einwandfrei. Außerdem wird die Breite der Felder anders
angezeigt. Wenn Du glaubst, daß Dein Formular toll aussieht - hast es aber nur im Internet
Explorer getestet - dann empfehle ich dringend, Dir das auch im Netscape anzusehen.
Eingabefelder für Passwörter:
<input type="password" name="passwd" value="" size="10" maxlength="10">
Beispiel:
Bei der Eingabe werden nur Sternchen angezeigt, so daß andere, die Dir über die Schulter gucken,
nicht sehen können, welches Passwort Du eingibst. Allerdings ist das auch die einzige Sicherheit,
denn bei der Übertragung wird das Passwort im Klartext weitergereicht. Solltest Du also z.B. eine
Seite mit Passwort schützen wollen, so frage Deinen Provider. Er hat bestimmt ein
entsprechendes Programm für Dich, das Du verwenden kannst.
Mehrzeilige Eingabefelder:
<textarea name="mitteilung" cols="30" rows="5"> </textarea>
Beispiel:
Das TEXTAREA-Tag hat ein schließendes Tag!
Mit "cols" wird die Breite (heißt eigentlich "Spalten") festgelegt und mit "rows" die Höhe des Feldes.
Der Text ist sogenannter "Fließtext", der Zeilenumbruch erfolgt automatisch. Man kann einen
Zeilenumbruch allerdings auch erzwingen. Hierfür gibt es die Anweisung "wrap=virtual" oder
wrap="physical". Bei "virtual" wird das Zeichen für den Zeilenumbruch beim Versenden nicht mit
übertragen; bei "physical" wird das mit übertragen (was meiner Meinung nach in einer E-Mail nicht
so gut ist, denn erstens kostet das Übertragungszeit - wenn auch nur wenig - und zweitens
bauscht es den Text in der E-Mail unnötig auf; aber auch das ist Geschmackssache.). In das
TEXTAREA-Tag schreibst Du das z.B. so hinein:
<textarea name="mitteilung" cols="30" rows="5" wrap="virtual"> </textarea>
Checkboxen:
<input type="Checkbox" name="autozubehoer" value="gps"> GPS
<input type="Checkbox" name="autozubehoer" value="abs"> ABS
<input type="Checkbox" name="autozubehoer" value="klima"> Klimaanlage
Beispiel:
c GPS
d
e
f
g
c ABS
d
e
f
g
c Klimaanalage
d
e
f
g
Stell Dir vor, Du verkaufst Autos und der User kann aus verschiedenen Zubehörteilen eines oder
mehrere auswählen. Für Mehrfachauswahl nimmst Du also Checkboxen. Der Name ist für alle
Checkboxen gleich, da es sich hier um eine Gruppe handelt. Bei "value" schreibst Du den Namen
des Zubehörteils. Dieser wird bei der Übertragung mit angegeben, so daß Du genau weißt, welches
Zubehörteil bestellt wird. Hinter dem Tag mußt Du diesen Namen noch einmal als Text
wiederholen, denn den Eintrag von "value" sieht der User nicht.
Radiobuttons:
<input type="Radio" name="browser" checked value="IE50"> IE 5.0
<input type="Radio" name="browser" value="IE55"> IE 5.5
<input type="Radio" name="browser" value="NS47"> NS 4.7
<input type="Radio" name="browser" value="NS61"> NS 6.1
Beispiel:
i IE 5.0
j
k
l
m
n
j IE 5.5
k
l
m
n
j NS 4.7
k
l
m
n
j NS 6.1
k
l
m
n
Bei den Radiobuttons kann immer nur einer ausgewählt werden. Auch hier haben alle Felder den
gleichen Namen (hier "browser") und bei "value" steht der entsprechende Wert, der auszuwählen
ist. Bei einem bestimmten Wert kann man eine Vorbelegung mit "checked" vor dem Attribut "value"
vornehmen, wenn man meint, daß die meisten User wohl diesen Wert auswählen würden.
Auswahllisten:
<select name="wohnort" size="3">
<option value="hh"> Hamburg </option>
<option value="b"> Berlin </option>
<option value="m"> München </option>
<option value="k"> Köln </option>
</select>
Beispiel:
Hamburg
Berlin
München
Köln
Auch hier wird ein entsprechender Name vergeben, der beschreibt, was die Auswahlliste enthält.
Bei "size" wird angegeben, wie viele Zeilen (in diesem Fall Orte) im Fenster angezeigt werden. Sind
mehr Punkte, als die Größe angibt, enthalten, wird ein Scrollbalken angezeigt. Gibt man die Größe
mit "1" an, erhält man nur einen Punkt angezeigt und hat eine sogenannte Drop-Down-Liste, d.h.
daß beim Aufklappen alle vorhandenen Einträge angezeigt werden - ohne Scrollbalken. Mit "value"
kann man einen Wert angeben, der den Eintrag kurz beschreibt, was aber nicht zwingend
erforderlich ist, da der in der Liste markierte Eintrag als Wert übermittelt wird (der Wert von "value"
wird dann statt des selektierten Textes übertragen).
Du kannst in der Auswahlliste auch eine Mehrfachauswahl möglich machen, dann mußt Du im
öffnenden SELECT-Tag "multiple" mit angeben, also z.B. so:
<select name="wohnort" size="3" multiple>
Ich gehe davon aus, daß Du weißt, wie man mehrfache Auswahlen trifft, oder? Wenn Du glaubst,
daß der User das nicht weiß, mußt Du im Text (am besten vor der Auswahlliste darauf hinweisen z.B. "Mehrfachauswahl durch Drücken der <STRG>-Taste möglich"). Willst Du auch hier eine
Vorausbelegung eines der Einträge machen (was eigentlich nicht sehr sinnvoll ist), kannst Du das,
indem Du im entsprechenden OPTION-Tag die Anweisung "selected" schreibst.
Natürlich mußt Du nun noch einen Button in Dein Formular einbinden, auf den der User klickt, um
das Formular abzuschicken und einen Button, um die Einträge wieder löschen zu können.
Sendebutton:
<input type="Submit" name="senden" value="Senden">
Beispiel:
Senden
Bitte hier nicht klicken, da keine Funktion!
Lösch-Button:
<input type="reset" name="loeschen" value="Löschen">
Beispiel:
Löschen
Bitte hier nicht klicken, da keine Funktion!
Das Beispiel erklärt sich eigentlich selbst. Der Button bekommt einen Namen und bei "value" legst
Du fest, wie der Button beschriftet werden soll. Das ist eigentlich schon alles.
Alle vorgenannten Formular-Elemente gehören zwischen die FORM-Tags, sonst funktioniert das
nicht. Damit der beschreibende Text und die Formular-Elemente sauber ausgerichtet werden,
kannst Du das Formular in einer Tabelle unterbringen. Dabei mußt Du allerdings darauf achten,
daß die FORM-Tags außerhalb der Tabelle liegen (also davor und danach) - einige Browser werten
einen Verweis, der in einer Tabelle liegt, nicht aus und es wird keine Weiterleitung der
E-Mail-Nachricht geben. Um das Ganze zusammenzufassen, hier ein kleines Beispiel-Formular:
<form action="mailto:[email protected]" method="post" enctype="text/plain"
name="formular">
<table border=0 width="70%">
<tr>
<td>Name:</td>
<td><input type="Text" name="realname" value="" size="34" maxlength="30"></td>
</tr>
<tr>
<td>Vorname:</td>
<td><input type="Text" name="vorname" value="" size="34" maxlength="30"></td>
</tr>
<tr>
<td>weiblich:</td> <td><input type="Radio" name="geschlecht" value="w"></td>
</tr>
<tr>
<td>männlich:</td> <td><input type="Radio" name="geschlecht" value="m"></td>
</tr>
<tr>
<td>E-Mail:</td>
<td><input type="Text" name="email" value="" size="34" maxlength="30"></td>
</tr>
<tr>
<td>Betreff:</td>
<td><input type="Text" name="subject" value="Internet-Formular Kursus HTML"
size="34" maxlength="30"></td>
</tr>
<tr>
<td valign="top">Mitteilung:</td>
<td><textarea name="mitteilung" cols="29" rows="3"></textarea></td>
</tr>
</table>
<table border=0 width="70%">
<tr>
<td width="150"> </td>
<td align="left"><input type="Submit" name="senden" value="Senden">
<input type="reset" name="loeschen" value="Löschen"></td>
</tr>
</table>
</form>
Name:
Vorname:
weiblich:
männlich:
E-Mail:
j
k
l
m
n
j
k
l
m
n
Betreff:
Mitteilung:
Internet-Formular Kursus HTML
Senden
Löschen
Zu Beginn dieser Lektion hatte ich geschrieben, daß ich näher darauf eingehen würde, wie man ein
Formular an ein Mailprogramm verschickt. Das möchte ich jetzt machen. Als Beispiel habe ich das
Mailprogramm von Strato (meinem Provider) genommen, das ich für alle Formulare auf meiner
Website benutze. Aber bitte denke daran, wenn Du ein anderes Mailprogramm benutzt, ist der
Name des Mailprogramms evtl. ein anderer und können die Felder, die das Mailprogramm
auswertet, anders benannt sein.
Bei meinem Beispiel sehen die Einträge im FORM-Tag wie folgt aus:
<form action="/cgi-bin/mailmanager.pl" method=post enctype="text/plain"
name="formular">
Außerdem mußt Du direkt unter das öffnende FORM-Tag folgende Tags schreiben:
<a href="/cgi-bin/[email protected]+http://www.software-help.de"></a>
<input type=hidden name="recipient" value="[email protected]">
<input type=hidden name="subject" value="Internet-Formular Kursus HTML">
<input type=hidden name="print_config" value="email,subject,realname">
<input type=hidden name="sort" value="order:subject,vorname,realname,email,mitteilung">
Hier die Erklärungen dazu:
Nach dem FORM-Tag setzt Du einen Verweis auf das Mailprogramm, dann ein Pluszeichen, dann
Deine E-Mail-Adresse, dann ein Pluszeichen, dann Deine komplette Domäne. Nur so stellst Du
sicher, daß das Formular einwandfrei übermittelt wird.
Das Mailprogramm erhält danach über die "HIDDEN"-Felder die für das Mailprogramm wichtigen
Mitteilungen. Hidden heißt "nicht sichtbar" oder auch "versteckt". Der User sieht diese Felder nicht.
Recipient ist der Empfänger der Mail (in diesem Fall also ich), subject ist der Betreff, den ich hier
mit "Internet-Formular Kursus HTML" vorbelegt habe. Print_config sind die Felder, die auch in
Deinem Formular enthalten sein müssen (also die E-Mail-Adresse des Users, der dieses Formular
ausfüllt; den Betreff (der vorbelegt ist) und realname steht hier für den Nachnamen. Zum Schluß
gebe ich mit dem hidden-Feld "sort" noch an, in welcher Reihenfolge die Felder aus dem
Kontakt-Formular in der E-Mail aufgelistet werden sollen. Bei SORT müssen alle Felder, die im
Formular vorkommen, angegeben werden, damit sie in der E-Mail übertragen werden (es ist also
nicht nur für die Reihenfolge wichtig).
Diese Angaben beziehen sich auf das Mailprogramm von Strato. Hast Du ein anderes
Mailprogramm, dann mußt Du natürlich die dort enthaltenen Angaben verwenden.
Wenn Du ein eigenes cgi-bin-Verzeichnis hast, mußt Du natürlich Dein eigenes Mailprogramm dort
einbinden. Ein sehr gutes Mailprogramm kannst Du hier downloaden:
AllForm von XWolf
¶
Die wichtigsten Formular-Elemente hast Du jetzt kennengelernt. Ich hoffe, es war einigermaßen
verständlich erklärt.
In der nächsten Lektion geht es um Musik und Videos.
10. Lektion
HTML-Kursus fuer Anfaenger von Software-Help - Musik und Videos
file:///E:/HTML/Kursus_HTML/lektion10.htm
Musik und Videos
Um Musikstücke von der CD zu MP3- oder WAV-Files zu konvertieren, brauchst Du ein Programm.
Sehr gut geeignet ist meiner Meinung nach das Freeware-Programm CDex. Du kannst Dir das
Programm bei www.surf.to/cdex
CDex
herunterladen. Ein Musikstück, daß umgewandelt wurde, kann sehr leicht 10 MB und mehr groß
sein. Also erstellt man normalerweise kleinere Trailer, die dann so um die 50 Sekunden laufen und
eine Dateigröße von ca. 600 KB haben. Um kleinere Trailer von einem Musikstück herzustellen,
kann man das Programm Cool Edit Pro sehr gut verwenden. Du bekommst es bei
www.syntrillium.com
Cool Edit Pro.
Wie Du mit diesen Programmen arbeitest, mußt Du schon selbst herausfinden. Es ist nicht sehr
schwer. Ich will Dir hier nur zeigen, wie diese Musikstücke in die Seite eingebaut werden.
Du erstellst einfach einen Verweis auf die Datei (in Lektion Nr. 6 wurde das bereits behandelt) und vorausgesetzt, der User hat einen Player (z.B. Realplayer, Winamp oder ähnlich) auf seinem
Computer installiert - der Player wird geöffnet und das Musikstück fängt sofort nach anklicken an zu
spielen. Aus Lizenz- und rechtlichen Gründen werde ich keine direkten Beispiele zum ansehen
bzw. anhören hier bringen. Also nur ein Hinweis, wie das gemacht wird.
Die Einbindung in die Webseite erfolgt so:
<a href="gil4.wav">Musikstück von GIL</a>
Man kann natürlich seiner Seite auch eine Hintergrundmusik verpassen. Ob das beim User
ankommt, wenn er gleich beim Öffnen der Seite mit Deiner Musik Bekanntschaft macht, sei
dahingestellt. Bedenke, nicht jeder hat den gleichen Musikgeschmack. Die Entscheidung mußt Du
selber treffen. Hier die Möglichkeit, wie das gemacht werden kann:
Für den Internet Explorer muß das im HEAD-Teil der Seite angegeben werden (loop=infinite spielt
das Musikstück unendlich):
<head>
<bgsound src="datei.wav" loop=infinite>
</head>
Für Netscape muß das im BODY angegeben werden (mit folgenden Attributen: hidden="true" sowie
height=0 und width=0 legen fest, daß der Player nicht angezeigt wird, autostart="true" besagt, daß
das Musikstück sofort beim Öffnen der Seite automatisch anfängt zu spielen und loop="true", daß
das Musikstück unendlich spielt):
<body>
<embed src="datei.wav" hidden="true" height=0 width=0 autostart="true"
loop="true"></embed>
HTML-Kursus fuer Anfaenger von Software-Help - Musik und Videos
Anders verhält es sich mit Videos. Auch diese müssen wegen der Dateigröße bearbeitet werden,
bevor Du Trailer in das Internet stellen kannst. Du mußt ein wenig im Internet surfen. Dort findest
Du eine ganze Reihe von Programmen, die zum Bearbeiten von Videos geeignet sind (sehr gut ist
natürlich Premiere von Adobe - aber auch recht teuer).
Die Darstellung im Internet funktioniert nur, wenn ein Link per "pluginspace" auf einen Player
gesetzt wird. Man kann also nicht einfach einen Verweis auf das Video setzen, wie beim
Musikstück. Außerdem erfolgt die Einbindung in die Webseite mit dem EMBED-Tag. Man setzt das
Ganze am besten in eine Tabelle, damit der Player genau an der gewünschten Stelle angezeigt
wird.
<table cellpadding=0 cellspacing=0 border=0 width=449>
<tr valign=top>
<td width=240 align=center>
<embed src="http://www.DeineDomaene.de/DeinVerzeichnis/DeineDatei.mov"
autoplay="false" target=myself bgcolor=#000000 border=0 resizable=no width=240
height=195 pluginspage="http://www.apple.com/quicktime/download/index.html"
controller=TRUE></embed>
</td></tr>
</table>
Bei "embed src=" muß der genaue Pfad zu Deiner Internetseite (also Domäne, Verzeichnis und
Dateiname) angegeben werden. Mit "autoplay" legst Du fest, ob das Video sofort beim Anzeigen
der Webseite abgespielt werden soll (true) oder nicht (false). False ist sicher die bessere Wahl. Mit
"resizable" legst Du fest, ob das "Fenster", in dem der Quicktime-Player angezeigt wird, vergrößert
werden kann "yes" oder nicht "no". Höhe und Breite brauche ich wohl nicht zu erklären. Dann
kommt die komplette Internetadresse, wo das Plugin geladen werden kann und zum Schluß gibst
Du noch an, ob beim Player die Control-Paneele (also Buttons für Start, Stop usw.) mit angezeigt
werden.
Das war für Musik und Videos schon alles.
In der nächsten Lektion geht es um META-Tags und das Veröffentlichen der Website.
11. Lektion
HTML-Kursus fuer Anfaenger von Software-Help - METS-Tags u...
META-Tags und Veröffentlichen der Website
Wozu sind die META-Tags gut? Sie enthalten nützliche Angaben für die Suchmaschinen und
erleichtern ihnen die Arbeit. Damit Deine Seite gefunden und aufgelistet wird, wenn ein User nach
bestimmten Kriterien sucht, solltest Du einige der folgenden META-Tags verwenden:
META-Tag "KEYWORDS" - ein Beispiel:
<META NAME="KEYWORDS" CONTENT="Computer, Hardware, Software">
Den Namen "KEYWORDS" solltest Du nicht verändern, denn der ist ein feststehender "Begriff"
(sehr einfach ausgedrückt). Unter CONTENT gibst Du in Stichworten an, was Deine Seite enthält
bzw. was Du anbietest. Willst Du, daß Deine Seite bei Usern angezeigt wird, die Beiträge z.B. zum
Thema "Hardrock" suchen, müßte also unter CONTENT das Wort "Hardrock" stehen. Wobei Du
Dir schon die Mühe machen solltest, auf jeder Seite nur das Wort unter CONTENT zu schreiben,
das auch wirklich auf der Seite erscheint. Wenn Du mehrere unterschiedliche Seiten hast und alle
Themen auf jeder Seite schreibst, entsteht das, was Du ja sicher auch schon bei der Suche
gesehen hast: Beim Anzeigen nach einem einzigen Suchbegriff erscheinen 6, 7, 8 oder mehr
Seiten des gleichen Anbieters untereinander. Wenn Du die META-Tags nur auf Deiner ersten, der
Index-Seite unterbringst, kannst Du natürlich alle CONTENT-Worte hier schreiben und Deine
Index-Seite ist die einzige, die immer aufgelistet wird. Willst Du den User aber auf eine bestimmte
Seite lenken, gibst Du eben nur den für diese Seite gültigen Inhalt an.
META-Tag "DESCRIPTION" - ein Beispiel:
<META NAME="DESCRIPTION" CONTENT="Schnelle Hilfe bei Problemen mit Computern,
Hardware und Software leisten wir per E-Mail">
Das META-Tag "DESCRIPTION" erlaubt eine Beschreibung zum Inhalt Deiner Seite. Diese
Beschreibung sollte allerdings nicht zu lang sein, denn mehr als 3 Zeilen zeigen die
Suchmaschinen in ihrer Auflistung meistens nicht an.
META-Tag "AUTHOR" - ein Beispiel:
<META NAME="AUTHOR" CONTENT="Brigitte Fraszczak">
Das META-Tag "AUTHOR" braucht wohl keine Erklärung. Wenn Du die Seite geschrieben hast,
gehört Dein Name hier hin.
META-Tag "PUBLISHER" - ein Beispiel:
<META NAME="PUBLISHER" CONTENT="Brigitte Fraszczak">
Der "PUBLISHER" ist der Veröffentlicher der Seite. Author und Publisher können, müssen aber
nicht identisch sein. Wenn Du die Seite für jemand anderen machst, dann bist Du der Author und
der andere der Publisher.
META-Tag "COPYRIGHT" - ein Beispiel:
<META NAME="COPYRIGHT" CONTENT="Brigitte Fraszczak">
Auch dieses META-Tag muß ich nicht erklären. Ob es sinnvoll ist, sei dahingestellt. Für die
Veröffentlichung in einer Suchmaschine ist es nicht von Belang - aber es zeigt gleich zu Beginn
Deiner Seite, wenn jemand sich den Quelltext Deiner Seite ansieht, wem der Inhalt gehört.
META-Tag "LANGUAGE" - ein Beispiel:
<META NAME="language" CONTENT="de">
Dieses Tag muß ich auch nicht erklären.
Die drei nächsten Tags werde ich auch nicht weiter erklären, sie beziehen sich auf die
Veröffentlichung. Sie erlauben in dieser Form (all) allen Suchmaschinen, alles (Inhalte) allen zur
Verfügung zu stellen. Einschränkungen (falls Du sie wünscht) müßtest Du dann unter CONTENT
eingeben.
<META NAME="AUDIENCE" CONTENT="ALL">
<META NAME="DISTRIBUTION" CONTENT="ALL">
<META NAME="ROBOTS" CONTENT="ALL">
META-Tag "HTTP-EQUIV" - ein Beispiel:
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=iso-8859-1">
Das Tag "HTTP-EQUIV" bietet mehrere Möglichkeiten. So kannst Du angeben, welchen
Zeichensatz Du in der HTML-Datei verwendest. Hierzu benutzt Du das "Equivalent"
CONTENT-TYPE. Weitere Möglichkeiten sind die Equivalente:
<META HTTP-EQUIV="PICS-Label" CONTENT="">
PICS-Label benutzt man um Inhalte als jugendfrei zu kennzeichnen. Nähere Angaben solltest Du
bei www.w3.org/PICS nachlesen, denn Du brauchst dafür ein PICS-Zertifikat.
<META HTTP-EQUIV="EXPIRES" content="0">
Mit dieser Angabe erzwingst Du, daß der Browser immer die neuesten Inhalte vom Server holt und
nicht aus dem Cache. Sehr mit Vorsicht zu genießen, wenn der Ladevorgang sehr lange dauert.
Unter CONTENT kannst Du auch Datum und Zeit angeben. Bis zu der angegebenen Zeit bzw. des
Datums holt der Browser die Inhalte aus dem Cache, danach vom Proxy-Server.
<META HTTP-EQUIV="REFRESH" content="3;
URL=http://www.DeineDomäne.de/DeinVerzeichnis/DeineDatei.htm">
Mit REFRESH und Angabe der URL bestimmst Du eine automatische Weiterleitung nach (wie hier
angegeben) 3 Sekunden auf die angegebene Domäne bzw. Webseite. Sehr gut geeignet, wenn Du
z.B. eine Begrüßungsseite (mit Animation) ohne jeden Link hast und dann zur eigentlichen
FRAME-Seite weiterleiten willst.
Dies war nur ein Überblick über die gebräuchlichsten META-Tags. Willst Du mehr darüber wissen,
informiere Dich am besten bei www.w3.org (das Gremium, das die Standards für das Internet
festlegt).
Jetzt hast Du Deine Seiten endlich fertig und willst sie natürlich auch im Internet präsentieren. Für
alle, die das noch nicht wissen: Du brauchst natürlich eine eigene Domäne (www.DeinName.de),
Du brauchst einen Provider (z.B. Strato, Freenet oder ähnlich), der Deine Seiten auf seinem
Proxy-Server veröffentlicht. Du brauchst einen FTP-Zugang (Dein Provider sagt Dir, wie Du per
FTP auf seinen Server kommst). Du brauchst ein FTP-Programm, mit dem Du Deine Seiten auf
den Server übertragen kannst. Am besten hierfür ist meiner Meinung nach WS-FTP PRO geeignet.
Du bekommst es bei
ipswitch.com
Mit diesem Programm kannst Du ganz einfach (wie im Windows-Explorer von einem Verzeichnis
zum anderen) Deine Seiten zum Proxy-Server des Providers rüberkopieren.
Hiermit ist der Kursus HTML-Grundlagen abgeschlossen. Ich hoffe, Du bist jetzt ein richtiger
HTML-Crack.
Der nächste Kursus befaßt sich mit CSS (Cascading Style Sheets). Damit kannst Du Deine Seiten
noch besser und einfacher gestalten. Wer mit HTML arbeitet, sollte auch mit CSS arbeiten. Ein
weiterer Kursus danach wird sich mit JavaScript befassen. Auch das ist sehr wichtig, wenn Du
wirklich gute und dynamische Webseiten machen willst.
file:///E:/HTML/Kursus_HTML/ANHANG1.HTM
- Sonderzeichen Zeichen
Beschreibung
¡
Erzwungenes
Leerzeichen
umgekehrtes
Ausrufezeichen
Name in HTML
Unicode in
HTML
 
 
¡
¡
¢
£
¤
¥
¦
§
¨
©
ª
Cent-Zeichen
¢
¢
Pfund-Zeichen
£
£
¤
¤
¥
¥
¦
¦
§
§
¨
¨
Copyright-Zeichen
©
©
Ordinal-Zeichen weiblich
ª
ª
«
angewinkelte
Anf.zeichen links
«
«
¬
Verneinungs-Zeichen
¬
¬
kurzer Trennstrich


Registriermarke-Zeichen
®
®
¯
¯
°
°
±
±
Hoch-2-Zeichen
²
²
Hoch-3-Zeichen
³
³
Acute-Zeichen
´
´
Mikro-Zeichen
µ
µ
¶
¶
·
·
®
¯
°
±
²
³
´
µ
¶
Währungs-Zeichen
Yen-Zeichen
durchbrochener Strich
Paragraph-Zeichen
Pünktchen oben
Überstrich
Grad-Zeichen
Plusminus-Zeichen
Absatz-Zeichen
Mittelpunkt
¸
¹
Häkchen unten
¸
¸
Hoch-1-Zeichen
¹
¹
º
Ordinal-Zeichen
männlich
angewinkelte
Anf.zeichen rechts
º
º
»
»
ein Viertel
¼
¼
ein Halb
½
½
drei Viertel
¾
¾
»
¼
½
¾
¿
umgekehrtes
Fragezeichen
¿
¿
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
A mit Accent grave
À
À
A mit Accent acute
Á
Á
Â
Â
Ã
Ã
A Umlaut
Ä
Ä
A mit Ring
Å
Å
A mit legiertem E
Æ
Æ
C mit Häkchen
Ç
Ç
E mit Accent grave
È
È
E mit Accent acute
É
É
Ê
Ê
Ë
Ë
I mit Accent grave
Ì
Ì
I mit Accent acute
Í
Í
Î
Î
Ï
Ï
Ð
Ð
N mit Tilde
Ñ
Ñ
O mit Accent grave
Ò
Ò
O mit Accent acute
Ó
Ó
Ô
Ô
Õ
Õ
Ö
Ö
×
×
O mit Schrägstrich
Ø
Ø
U mit Accent grave
Ù
Ù
U mit Accent acute
Ú
Ú
Û
Û
Ü
Ü
Y mit Accent acute
Ý
Ý
THORN (isländisch)
Þ
Þ
scharfes S
ß
ß
a mit Accent grave
à
à
a mit Accent acute
á
á
â
â
ã
ã
A mit Circumflex
A mit Tilde
E mit Circumflex
E Umlaut
I mit Circumflex
I Umlaut
Eth (isländisch)
O mit Circumflex
O mit Tilde
O Umlaut
Mal-Zeichen
U mit Circumflex
U Umlaut
a mit Circumflex
a mit Tilde
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ
a Umlaut
ä
ä
a mit Ring
å
å
a mit legiertem e
æ
æ
c mit Häkchen
ç
ç
e mit Accent grave
è
è
e mit Accent acute
é
é
ê
ê
ë
ë
i mit Accent grave
ì
ì
i mit Accent acute
í
í
î
î
ï
ï
ð
ð
n mit Tilde
ñ
ñ
o mit Accent grave
ò
ò
o mit Accent acute
ó
ó
ô
ô
õ
õ
ö
ö
Divisions-Zeichen
÷
÷
o mit Schrägstrich
ø
ø
u mit Accent grave
ù
ù
u mit Accent acute
ú
ú
û
û
ü
ü
y mit Accent acute
ý
ý
thorn (isländisch)
þ
þ
ÿ
ÿ
e mit Circumflex
e Umlaut
i mit Circumflex
i Umlaut
eth (isländisch)
o mit Circumflex
o mit Tilde
o Umlaut
u mit Circumflex
u Umlaut
y Umlaut
- Farben -

HTML-Kursus fuer Anfaenger von Software-Help

Transcription

Similar documents

Kateřina Kaločová Die Entwicklung der Fertigkeit Lesen im

Maximilian Benz: Auspicia, Prima, Cursus. Versuch einer

UNIX-Pool Einführung - Institut für Mathematik

Einführung in LATEX

Word2000 Basis

KV Betriebssysteme

Carl von Ossietzky Universität Oldenburg Master of

Itancia référence les solutions logicielles TWS d`Algoria

Lesen und Schreiben von Daten