 | Easy to handle |
| Startseite | Sitemap | E-Mail |
|---|
|
                    |
Inhaltsverzeichnis
|
1) Einleitung
HTML (HyperText Markup Language) ist ein einfacher ASCII-Text und kann mit einem beliebigen Text-Editor geschrieben werden.Abschnittsformatierungen (sogenannte Tags) werden in spitzen Klammern eingeschlossen. Sie dienen dazu einen Text ein anderes aussehen zu geben. Die Formatierung endet dort, wo die Kennung mit </ angegeben wird. Z.B. <B></B>: Der Text zwischen <B> und </B> wird in diesem Beispiel FETT geschrieben.
Neben Formatierungs-Tags gibt es auch die sogenannten Hyper-Links (URL - Uniform Ressource Locator). Sie dienen dazu um auf andere HTML-Seiten zu verweisen.
Bei erstellen von HTML-Seiten sollte darauf geachtet werden, dass keine Umlaute verwendet werden, da diese in anderen Laendern nicht dargestellt werden koennen. Statt dessen hat man die Moeglichkeit Symbolkürzel anzugeben. Hier ein paar der gebräuchlichsten:
ä = ä Ä = Ä & = & ö = ö Ö = Ö ß = ß ü = ü Ü = Ü " = " > = > < = < € = € Leerzeichen = ° = °Weitere Zeichen unter http://de.selfhtml.org/html/referenz/zeichen.htm
Die folgenden Tags duerfen in keinem HTML-Dokument fehlen:
<HTML> = Beginn eines HTML-Dokuments <HEAD> = Beginn des Kopfbereiches <TITLE> </TITLE> = Definition eines Titels (zu finden im Browser-Kopf) </HEAD> = Ende des Kopfbereiches <BODY> = Beginn des Hauptteils </BODY> = Ende des Hauptteils </HTML> = Ende eines HTML-Dokuments
2) Meine erste HTML-Seite
Mit diesen Zeilen haben Sie bereits eine kleine HTML-Seite erzeugt.<HTML> <HEAD> <TITLE> Meine erste HTML-Seite </TITLE> </HEAD> <BODY> Hier kann ein beliebiger Text stehen. </BODY> </HTML>Ergebniss ansehen
In den nachfolgenden Beispielen wird zur Vereinfachung
und um die Uebersichtlichkeit zu Gewaehrleisten nur noch
der BODY-Abschnitt erlaeutert.
3) Formatierungen
Bei HTML werden aufeinanderfolgende Leerzeichen und Zeilenvorschuebe ignoriert.<BODY> Dieser Text steht in der ersten Zeile. Und dieser in der zweiten. Von hier bis hier stehen 10 Leerzeichen. </BODY>Ergebniss ansehen
Um dennoch Zeilenumbrueche erzeugen zu koennen, werden die nachfolgenden Tags verwenden:
<P> Der P-Tag erzeugt einen Absatzwechsel
<BR> Der BR-Tab erzeugt einen Zeilenumbruch
<PRE></PRE> Der PRE-Tag schaltet in eine Monospace-Schrift
(Nichtproportionalschrift) um
<BODY>
Nachfolgend beginnt ein neuer Abschnitt.
<P>
Nun folgt ein Zeilenwechsel <BR> Inhalt der 3. Zeile <P>
<PRE>
Dieser Text wird in einer Monospace-Schrift dargestellt
Z.B.: - um einfache Tabellen zu erzeugen oder
- Auflistungen darzustellen
</PRE>
</BODY>
Ergebniss ansehen
4) Links hinzufuegen
Um einen Link auf eine andere Internet-Seite zu erzeugen, wird der A-Tag verwendet.<BODY> <A HREF="http://www.e2h.de"> TEXT </A> Link zu einer anderen Internetseite <A HREF="mailto:anders@e2h.de"> TEXT </A> Link zu einer eMail-Adresse </BODY>Anstelle von www.anders.e2h.de kann jede beliebige Internet-Adresse eingefuegt werden.
Mit der Kennung http werden Internet-Adressen gekennzeichnet.
Mit der Kennung mailto werden eMail-Adressen gekennzeichnet.
<BODY> <A HREF="http://www.e2h.de"> Link zu meiner Homepage </A> <P> <A HREF="homepg.htm"> Link zu HTML fuer Anfaenger </A> </BODY>Ergebniss ansehen
5) Grafik einfuegen
Bilder koennen im Interlaced-GIF-Format und dem JPEG-Format eingefuegt werden. Bilder im JPEG-Format sind reine Bilder, waehrend Bilder im GIF-Format auch beweglicher Bilder sein koennen.<BODY> <IMG SRC="auge.gif"> Bild in die Homepage einfuegen </BODY>
<BODY> <IMG SRC="auge.gif"> </BODY>Ergebniss ansehen
6) Weitere Formatierungen
Die folgende Formatierungsmoeglichkeiten koennen bei der Darstellung eines Textes sehr hilfreich sein.<BODY> <B></B> Text in Fettschrift <I></I> Text in Kursivschrift <U></U> Text unterstrichen <H1></H1> Ueberschriftsformatierung Fett, ganz groesse Schrift <H2></H2> Ueberschriftsformatierung Fett, groesse Schrift <H3></H3> Ueberschriftsformatierung Fett, groessere Schrift <H4></H4> Ueberschriftsformatierung Fett, normale Schrift <H5></H5> Ueberschriftsformatierung Fett, kleinere Schrift <H6></H6> Ueberschriftsformatierung Fett, kleine Schrift <FONT SIZE=5></FONT> Schriftgroesse 5 (Werte von 1-7 zulaessig) <FONT COLOR="ff0000"></FONT> Schriftfarbe rot </BODY>
<BODY> <B> Dieser Text ist in Fettschrift </B> <P> <I> Dieser Text ist in Kursivschrift </I> <P> <U> Dieser Text ist unterstrichen </U> <P> <H1> Ueberschrift H1 </H1> <P> <H2> Ueberschrift H2 </H2> <P> <H3> Ueberschrift H3 </H3> <P> <H4> Ueberschrift H4 </H4> <P> <H5> Ueberschrift H5 </H5> <P> <H6> Ueberschrift H6 </H6> <P> <FONT SIZE=5> Dieser Text ist in der Schriftgroesse 5 </FONT> <P> <FONT COLOR="ff0000"> Dieser Text wird in rot dargestellt </FONT> <P> </BODY>Ergebniss ansehen
Hier noch eine Farbtabelle der wichtigsten Farben:
#0000ff = Blau #add8e6 = Hellblau #00008b = Dunkelblau #000000 = Schwarz #a9a9a9 = Hellgrau #808080 = Grau #008000 = Gruen #90ee90 = Hellgruen #006400 = Dunkelgruen #ff0000 = Rot #f08080 = Hellrot #8b0000 = Dunkelrot #ffffff = Weiss #fffafa = Schneeweis #fffaf0 = Dunkelweis #ffff00 = Gelb #ffffe0 = Hellgelb #fffacd = Dunkelgelb #ffa500 = Orange #ffb6c1 = Hellorange #ff8c00 = Dunkelorange #00ffff = Zyanblau #c0c0c0 = Silber #ee82ee = Violett
7) Weitere Tags
<BODY> <HR> Horizontale Trennlinie <CENTER></CENTER> Text mittig ausrichten </BODY>
<BODY> <HR> <CENTER> Dieser Text ist zentriert </CENTER> <HR> </BODY>Ergebniss ansehen