Bildungsberatung für Erwachsene
BiBer Salzburg - Onlineinfos zu vielen Fragen der Aus- und Weiterbildung

Beratung zum Erfolg - kostenlos, persönlich, neutral . . . Terminvormerkung ( 0662 872677-22
 Erste Tipps für das Arbeiten mit HTML:

A) HTML ist keine Hexerei - einige wichtige Befehle

1.) Der notwendige Rahmen einer HTM-Datei:
<HTML><HEAD><TITLE> Hier kommt der Titel der Webseite, abgeschlossen mit </TITLE>
Mit den Zeichen <BODY> beginnt der eigentliche, also der sichtbare Inhalt der Webseite. Die Webseite wird beendet mit
</BODY></HTML>

2.) Schrift formatieren: Der Befehl heißt <font x>
x heißt: hierher gehören alle näheren Angaben zur Schrift.
Mit </font> wird der Befehl aufgehoben, dh., man kehrt damit zur früheren bzw. zur Standardschrift zurück.
Größe, Farbe und Schriftart können in einen Befehl verpackt werden, z.B.
<font size=2 face=arial color="#800000"> oder es kann auch nur ein Merkmal verändert werden.

2.1) Größe: <font size=1> kleinste Schrift
<font size=2> normale
<font size=3> etwas größer usw. bis
<font size=7> größte Schrift

2.2) Farbe: Standard ist immer schwarz. Für eine Änderung der Farbe ist ein sechsstelliger Code von Ziffern oder Buchstaben nötig, davor ein # und alles in ", z.B. <font COLOR="#800000"> heißt: braune Schrift
Einige weitere Farben: 000000 schwarz, ffffff weiß, ff0000 rot, ffff00 gelb,
00ff00 neongrün, 00ffff neonblau, 0000ff blau, ff00ff zyklame
Die Befehle werden kombiniert, z.B. <FONT COLOR="ff0000" size=2> = Schrift rot, Größe 2

2.3) Schriftart: Normschrift ohne irgendeine Angabe ist immer Times. Es gibt eine Reihe weiterer, international genormter Schriften, z.B. Arial. Der Befehl lautet dann z.B.: <FONT FACE="Arial" SIZE=7 COLOR="#800000">

2.4.) Absatz: <p> beginnt einen neuen Absatz. Absatzende: </p>
Absatz (paragraph) bedeutet bei HTML immer eine ganze Leerzeile.
Will man nur eine neue Zeile, heißt das Zeichen <br> und dieses Zeichen steht allein, dh. es braucht kein Schlusszeichen.

2.5) Ausrichtung: gehört zur Absatzformatierung, also zum <p>
Normalausrichtung immer links = <p align="left">
rechts: <p align="righft">
Mitte: <P ALIGN="CENTER">
Blocksatz: <P ALIGN="JUSTIFY">

3.) Grafik einfügen: Der Befehl heißt <img src="xx.yy">
Unter xx gehört der Dateiname, unter yy die Erweiterung, also der Dateityp .jpg oder .gif, also z.B. eule.jpg
Ausrichtung gilt für eine Grafik genauso wie für einen Absatz.
<img src="eule.jpg" align=center">
Übrigens: Eine Grafik darf fürs Web nicht zu groß sein. 4 bis 10 kB ist gut, 20-30 geht noch, darüber dauert das herunterladen der Grafik schon länger, d.h. wer die Seite anschaut und kein ganz schnelles Modem hat, muss warten, und das stört.

4.) Horizontale Trennlinie: der Befehl heißt einfach <hr>.
Auch hier kann man Größe und Farbe bestimmen. Standard ist ein schmaler grauer Strich.
<hr size=5 color=#f01000> ist ein 2 mm breiter roter Streifen.

5.) E-mail-Link: Ein Link beginnt immer mit <a href=
Der Befehl für Mail heißt "mailto:adresse@xx.at">
und danach muss etwas kommen, ein Wort, ein Symbol oder eine kleine Grafik, die mit dem Link verbunden wird.
Jeder Link muss mit </a> beendet werden, sonst wird alles, was noch kommt als Link behandelt.
Ein Maillink kann so aussehen:
<A HREF="mailto:biber@salzburg.at">biber@salzburg.at</A> d.h., die geschriebene Mailadresse biber@salzburg.at ist unterstrichen und durch eine andere Farbe, meist blau, als Link hervorgehoben.
Für den Besucher der Webseite genügt ein Klick darauf und es öffnet sich sein Mailprogramm und ein leeres Mailformular, in dem schon die Adresse eingesetzt ist. Er braucht nur noch den Text zu schreiben, und ab geht die Post.
Wenn man will, kann man Schrift und Farbe auch anders definieren als normal.
Beim Maillink unten ist die Schrift rot. Der vollständige Befehl lautet:
<A HREF="mailto:biber@salzburg.at"><FONT COLOR="#ff0000">biber@salzburg.at</A>

6.) Sonderzeichen: müssen als Code, "Entity" genannt, eingegeben werden. Z.B.: ä = &auml; und um das hier schreiben zu können, muss ich & als &amp; eingeben, weil der Befehl sonst automatisch in das Sonderzeichen umgesetzt wird.
4 Zeichen muessen als Entity eingegeben werden, weil sie eine Sonderbedeutung in HTML haben:
< = &lt;   > = &gt;   & = &amp;   " = &quot;
Auch ein zusätzlicher Abstand muss per Code eingegeben werden: &nbsp;.
Eine Liste der Entities in HTML gibt es online: www.uni-duesseldorf.de/~cappel/WebKurs/Entities.txt
Die Entity für das Euro-Zeichen € ist &euro;, % = &#37; § = &#167;
Zeichenliste mit &# . . ;
32 space     33 !     34 "     35 #     36 $     37 %     38 &     39 '     40 (     41 )     42 *     43 +     44 ,     45 -     46 .     47 /     58 :     59 ;     60 <
61 =     62 >     63 ?     64 @     91 [     92 \     93 ]     94 ^     95 _     96 `     123 {     124 |     125 }     126 ~     161 ¡     162 ¢     163 £     164 ¤     165 ¥
166 ¦     167 §     168 ¨     169 ©     170 ª     171 «     172 ¬     173 soft hyphen     174 ®     175 ¯     176 °     177 ±     178 ²     179 ³     180 ´     181 µ     182
183 ·     184 ¸     185 ¹     186 º     187 »     188 ¼     189 ½     190 ¾     191 ¿     192 À     193 Á     194 Â     195 Ã     196 Ä     197 Å     198 Æ     199 Ç

B) Weiterführende Infos und Links

Bedauerlicherweise hat sich um den HTML 4-Standard herum eine Unmenge an Formatierungsbefehlen, Tags genannt, gebildet, was dazu führen kann, daß verschiedene Browsertypen oder -versionen ein und dieselbe Seite verschieden darstellen. Es kann dann gut passieren, dass gewisse Abstände nicht stimmen, Bilder und Texte nicht korrekt positioniert auf der Seite erscheinen. Halten Sie sich nach Möglichkeit an den Standard, bzw. weisen Sie explizit auf den zu verwendenden Browser hin. Gut bewährt hat sich auch die Auflösung von 800 x 600 Punkten, hiermit können auch Benutzer mit Laptops bzw. 15-Zoll-Monitoren noch etwas anfangen.

Selbst wenn Sie später zur Erstellung Ihrer Website einen komfortablen HTML-Editor verwenden möchten, kann es nicht schaden, sich zumindest HTML-Grundkenntnisse anzueignen. Einen kostenlosen und äußerst empfehlenswerten HTML-Onlinekurs finden Sie bei www.akademie.de: Zum Erstellen von HTML-Dateien können Sie im Prinzip jeden Text-Editor verwenden (z.B. das Windows-Standardprogramm "Editor"). Auch mit den meisten Textverarbeitungsprogramme wie "Word" oder "Word Perfect" können mittlerweile HTML-Dokumente erstellt werden. Allerdings generieren diese Programme oft einen "unsauberen" HTML-Code, der später nur schwer weiterbearbeitet werden kann.
Empfehlenswert ist die Zuhilfenahme spezieller HTML-Editoren, mit denen HTML-Dateien schneller und komfortabler erstellt, modfiziert und verwaltet werden können.

Grundsätzlich kann man bei HTML-Editoren zwischen ASCII-Editoren und WYSIWYG-Editoren (WYSIWYG = What You See Is What You Get) unterscheiden. ASCII-Editoren sind gewöhnliche Texteditoren. Sie verfügen in der Regel über eine Buttonleiste und diverse Menübefehle, um die HTML-Tags in den Text einzufügen. Die Tags erscheinen sichtbar im Text.
WYSIWYG-Editoren bieten ebenfalls Buttonleisten und Menübefehle an, um das Setzen der HTML-Tags im Dialog zu unterstützen. Der Unterschied ist jedoch, dass die Tags nicht angezeigt werden (bzw. nur auf Wunsch). WYSIWYG hat den Vorteil, dass Sie das aktuelle Layout in der Form sehen können, wie es sich auf der Webseite auch dann darstellen würde.
Wichtig ist aber auch eine direkte Editiermöglichkeit im Quellcode, denn erfahrungsgemäß ist es zeitsparender, wenn kleine Änderungen direkt vorgenommen werden können.

Sowohl Netscape als auch Microsoft haben ihren Browsern kostenlose HTML-Editoren beigepackt (Netscape Composer und Microsoft Frontpage), mit denen auch Anfänger schnell zurechtkommen.

Der Profi und ambitionierte Laie kann auf eine Vielzahl von Programmen zurückgreifen. Die wichtigsten und besten HTML-Editoren haben wir in untenstehender Liste für Sie zusammengestellt. Die aufgeführten Programme können direkt von der Website der Softwarehersteller heruntergeladen werden und dürfen meist 30 Tage lang kostenlos getestet und benutzt werden. Falls Sie eines dieser (oft nicht preisgünstigen) Programme nach Ablauf dieser "Trial Period" weiterbenutzen wollen, müssen Sie dieses dann allerdings käuflich erwerben.

HTML-Editoren (Lizenzprodukte und Shareware)
HotMetal Pro Klassischer HTML-Editor mit WYSIWYG Webdesign
Namo Webeditor Günstiger WYSIWIG-Editor, der auch höchsten Ansprüchen genügt
Adobe GoLive Komplexes Tool zur professionelle Erstellung, Produktion und Verwaltung von Web-Sites
HotDog Professional Komfortabler HTML-Code-Editor, allerdings ohne WYSIWYG-Funktion
MacroMedia DreamWeaver Einer der bekanntesten HTML-Editoren mit einer Fülle von Features
Microsoft Frontpage Leistungsfähige Software für Webmanagement und -kreation
  bei ZDNet finden Sie eine Vielzahl weiterer HTML-Editoren, die für einen gewissen Zeitraum kostenlos ausprobiert werden können
Kostenlose HTML-Editoren (Freeware)
Netscape Composer Kostenloser HTML-Editor von Netscape
(Bestandteil des Netscape Communicators)
Frontpage "Light" Kostenloser HTML-Editor von Microsoft
(Bestandteil des Microsoft Internet Explorers)
AOL Press 2.0 von AOL Kostenloser HTML-Editor
Web Weaver EZ Kostenloser WYSIWYG-Editor
     Eine Liste mit weiteren kostenlosen HTML-Editoren finden Sie hier


Linkempfehlungen zum Thema HTML und Web-Editoren

Mail an BiBer: biber@salzburg.at
BiBer-ABC online: mehr als 200 Themen zur Auswahl
systematisch: www.biber.salzburg.at/biberabc.htm
alfabetisch: www.biber.salzburg.at/biberaz/htm
 BiBer Salzburg ist ein Projekt des Landesschulrates für Salzburg, gefördert aus Mitteln des österreichischen Bundesministeriums für Unterricht, Kunst und Kultur und des Europäischen Sozialfonds, durchgeführt vom Verein BiBer-F, A-5020 Salzburg, Imbergstr.2