Hyper Text Markup Language
Textbeschreibungssprache für Internetseiten

   

HTML ist die "Sprache", die dem WWW als heute wohl wichtigstem Dienst im Internet zum Durchbruch verholfen hat, weil man hier so schön von Link (Querverweis) zu Link klicken kann, statt lange Befehle einzugeben, und weil all das auch noch mit Farben, Bildern, Sounds und sogar Videos garniert ist. Wer selbst etwas im Internet präsentieren will oder auch nur html-Dateien speichert oder verändert, sollte ein wenig über diese Sprache von Webseiten wissen.

 

1          Grundstruktur eines HTML Dokuments:

 

<HTML> Dokumententyp

<HEAD> Dokumentkopf

<TITLE>Titelleistentext</TITLE>

</HEAD> Ende des Dokumentenkopfes

<BODY> Hauptteil

</BODY> Ende des Hauptteils

</HTML> Ende des HTML-Dokuments


Im HEAD-Teil werden JavaScripts und StyleSheets definiert.

Das eigentliche Dokument, d.h. Texte, Bilder usw., befindet sich im BODY-Teil.



2          Formatierung

2.1             Absatz- und Zeichenformate

Es gibt verschiedene Möglichkeiten, um einen Text anders aussehen zu lassen, d.h. ihn zu formatieren.

Setzt man einen Text zwischen folgende Tags(Befehle) erscheint er:

     <I>HelloWorld!</I>                                             Hello World!            kursiv

     <B>Hello World!</B>                                         Hello World!          fett

     <U>Hello World!</U>                                        Hello World!            unterstrichen

HTML kennt 7 Schriftgrößen.  Sie werden mit dem Tag <Font Size=1> ... <Font Size=7> gesetzt. Hier braucht man wieder einen End-Tag.

<Font Size="1">Schriftgröße 1</Font>
<Font Size="2">Schriftgröße 2</Font>
    usw. ...

Man kann Absätze mit dem P (Paragraph)-Tag linksbündig, rechtsbündig und mittig und im Blocksatz formatieren.

<P align="left">Das landet links</P>

<P align="center">Das landet in der Mitte</P>

<P align="right">Das landet rechts</P>

<P align="justify">Das hier wird (erkennbar besonders wenn es mehrzeilig ist) im Blocksatz abgebildet</P>


HTML kennt 6 verschieden große Überschriften. Sie werden mit den Tags <H1> ... <H6> bezeichnet.

<H1> Ueberschrift H1 </H1>
<H2> Ueberschrift H2 </H2>
<H3> Ueberschrift H3 </H3>        usw.  ...

2.2       Textfarbe:

 

     <FONT COLOR="Farbwert">HelloWorld!</FONT>

Werte:
#00FFFF Aqua #000000 Black
#0000FF Blue #FF00FF Fuchsia
#808080 Grey #008000 Green
#00FF00 Lime #800000 Maroon
#000080 Navy #808000 Olive
#800080 Purple #FF0000 Red
#C0C0C0 Silver #008080 Teal
#FFFFFF White #FFFF00 Yellow

3.      Bilder und Hintergrund

 

Tag:   <IMG SRC=" *.gif/*.jpg">

 

Erklärung:

IMG = Image (Bild); SRC= Source (Quelle);

Gängige Bildformate im Internet sind JPG und GIF.  BMP-Grafiken werden zwar von Internet Explorer unterstützt, sind aber wegen ihrer Größe ungeeignet.

In den SRC-Tag schreibt man den Dateinamen.  Ein Bild das bild.jpg heißt, wird folgendermaßen eingefügt:

 

<IMG SRC="bild.jpg">

 

Dieser Tag wird NICHT beendet.

 

3.1       Hintergrundfarben und -bilder

Diese werden wie Link-Farben ebenfalls im BODY-Tag definiert.

3.1.1   Hintergrundfarben

<BODY BGCOLOR="fw" >

wobei für fw wieder der gewünschte Farbwert eingesetzt werden muss.

 

3.1.2   Hintergrundbilder

<BODY BACKGROUND="bild.jpg">

wobei in den BACKGROUND-Tag die Dateinamen der Bilder in "..." eingetragen werden. Hier sind ebenfalls JPG und GIF-Dateien erlaubt.

   

4       Links (Verknüpfungen zu anderen Dokumenten bzw. anderen Stellen im gleichen Dokument)

 

Tag:  <A HREF="seitel.htm">Verknüpfungsname</A>

 

Erklärung:

Dieser Tag kommt nur im BODY-Teil vor.   Seitel.htm ist der Dateiname des Dokuments, auf den die Verknüpfung verweisen soll.  Verknüpfungsname ist der Text, der im Browser als Link erscheint.     (Standardfarbe:         Blau  #0000FF)

 

4.1       Farben des Verknüpfungstextes und der Standardschrift ändern:

<BODY LINK="fw" ALINK="fw" VLINK="fw" TEXT="fw">

Erklärung:

Für fw entsprechenden Farbwert einsetzen!

LINK Farbe des Links bei Erstbenutzung

ALINK (ActiveLink) Farbe des Link-Textes während die Maustaste gedrückt ist.
VLINK (VisitedLink) Farbe eines bereits benutzten Links

TEXT Farbe des Standardtextes

 

4.2       Bilder als Links

 

<A HREF="seitel.htm"><IMG SRC='bild.jpg'></A>

 

Erklärung:

Der A (Anchor=Anker)-Tag umschließt den IMG-Tag.

Das eingefügte Bild ersetzt den Verknüpfungstext.

   

5.         Sonstiges

 

5.1       Zeilenumbruch <BR> muss nicht beendet werden

 

5.2       Leerzeile  <P>  oder  <BR>   <BR>  muss nicht beendet werden

 

5.3       Trennlinie  <HR>  muss nicht beendet werden

 

5.4       Umlaute, ß

HTML kann Umlaute nur kompliziert darstellen.


Beispiel: Ä =>&Auml; (- uml; steht für Umlaut)
ü => &uuml;
ß => &szlig;





nach ergänzten Projekttagunterlagen von Jonas Mauer, K12


Zurück