Inhalt   Seitemap

Wie erstelle ich HTML-Seiten - Homepage Klaus Anders

Inhaltsverzeichnis

  • 1) Einleitung
  • 2) Meine erste HTML-Seite
  • 3) Formatierungen
  • 4) Links hinzufuegen
  • 5) Grafik einfuegen
  • 6) Weitere Formatierungen
  • 7) Weitere Tags


    • Gruppenuebersicht

    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 gebraeuchlichsten: 

    ä = &auml;   Ä = &Auml;   & = &amp; 
ö = &ouml;   Ö = &Ouml;   ß = &szlig;
ü = &uuml;   Ü = &Uuml;   " = &quot;
> = &gt;     < = &lt;
€ = &euro;   Leerzeichen = &nbsp;
    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




    Gruppenuebersicht

    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.



    Gruppenuebersicht

    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



    Gruppenuebersicht

    4) Links hinzufuegen

    Um einen Link auf eine andere Internet-Seite zu erzeugen, wird der A-Tag verwendet. 
    
<BODY>
<A HREF="http://www.anders.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.
    Anstelle von anders@e2h.de kann jede beliebige eMail-Adresse eingefuegt werden.
    Anstelle von TEXT kann man eine Beschreibung des Links machen.

    Mit der Kennung http werden Internet-Adressen gekennzeichnet.
    Mit der Kennung mailto werden eMail-Adressen gekennzeichnet. 

    
<BODY>  
<A HREF="http://www.anders.e2h.de"> Link zu meiner Homepage </A>
<P>
<A HREF="homepg.htm"> Link zu HTML fuer Anfaenger </A>
</BODY>
    Ergebniss ansehen



    Gruppenuebersicht

    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.
    Um Bilder einzufuegen wird der IMG-Tag verwendet. 
    
<BODY>
<IMG SRC="auge.gif">  Bild in die Homepage einfuegen
</BODY>

    
<BODY>
<IMG SRC="auge.gif">
</BODY>
    Ergebniss ansehen



    Gruppenuebersicht

    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




    Gruppenuebersicht

    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

    Zur Inhaltsseite

    - Zum Anfang dieser Seite -

    meine eMail-Adresse: Klaus Anders