HTML-Grundlagen

Grundlagen
Dokument
Text
Tabellen
Grafiken
Frames
Formulare
 

HTML-Dynamisch

Seitengestaltung
CSS

Text

1. Schrift

1.1 Schriftstile

Mittels verschiedener Formate in Containern können Texte formatiert werden. Auf den Text innerhalb des Containers wird die Formatierung angewendet.

Befehl Änderung Ansicht
<b> Text </b> für fett blabla
<i> Text </i> für kursiv blabla
<u> Text </u> für unterstrichen blabla
<s> Text </s> für durchgestrichen blabla
<big> Text </big> für größere Schrift blabla
<small> Text </small> für kleinere Buchstaben blabla
<sub> Text </sub> für tiefgestellte Schrift blablabla
<sup> Text </sup> für hochgestellte Schrift blablabla

<big> Text </big> Ergebnis: blabla

Diese Container werden nicht in allen Browsern dargestellt oder führen dort zu Veränderungen des Schriftbildes. Die letzten vier Container z.B. <big>....</big> werden nur vom Internet-Explorer dargestellt. (Vieles ist browserspezifisch, vergleiche dazu: Stefan Münz SelfHTML.)

1.2 Schriftgrößen

Neben dem Schriftstil kann auch die Schriftgröße verändert werden. Der Text innerhalb des Containers FONT wird mit dem Parameter SIZE um eine entsprechende Stufe vergrößert oder verkleinert. Gültige Werte für den Parameter SIZE gehen von -2 bis +4.

Befehl Änderung Ansicht
<font size=+1> Text </font> für +1 blabla
<font size=+2> Text </font> für +2 blabla
<font size=+3> Text </font> für +3 blabla
<font size=+4> Text </font> für +4 blabla
<font size=-1> Text </font> für -1 blabla
<font size=-2> Text </font> für -2 blabla

1.3 Schriftfarben

Mit dem Parameter COLOR können innerhalb des Font-Containers auch die Farben von Textabschnitten geändert werden. Die Codes für die Farben entsprechen dem Hexadezimal-Code, wie für den Seitenhintergrund bzw. in der kleinen Farbpalette.

Befehl Änderung Ansicht
<font color="#FF0000"> Text </font> für rote Schrift blabla

1.4 Schriftart

Mit dem Parameter FACE läßt sich die Schriftart verändern. Entgegen den Voreinstellungen im Browser wird dann die gewählte Schriftart angezeigt.

Befehl Änderung Ansicht
<font face="arial"> Text </font> für Arial blabla

Standardschriften ohne Serifen sind Arial für Windows-Rechner, Helvetica für Mac-Rechner und sans-serif für Unix-Rechner. Da alle 3 zu berücksichtigen sind, sollte am besten folgendes angegeben werden:

Befehl Änderung Ansicht
<font face="Arial, Helvetica, sans-serif"> Text </font>   blabla

Standardschriften mit Serifen sind Times New Roman für Windows-Rechner, Times für Mac-Rechner und serif für Unix-Rechner. Da alle 3 zu berücksichtigen sind, sollte am besten folgendes angegeben werden:

Befehl Änderung Ansicht
<font face="Times New Roman, Times, serif"> Text </font>   blabla

Schriften mit fester Buchstabenbreite für alle Buchstaben sind: Courier New, Courier und mono.

Befehl Änderung Ansicht
<font face="Courier New, Courier, serif"> Text </font>   blabla

Eine spezielle Schrift für das Web ist Verdana. Sie findet zwar immer größere Verbreitung, sollte aber nicht als alleinge Schrift verwendet werden.

1.5 Überschriften

In HTML stehen sechs verschiedene Formate h1-h6 für eine Überschrift zur Verfügung:

<h1>bla</h1>

Da hier mit Cascading Style-Sheet gearbeitet wird, bitte schauen Sie sich die reinen HTMLÜberschriften hier an.

 

1.6 Sonstige Schriftformatierungen


Neben den bereits oben erwähnten Formaten gibt es in HTML noch weitere Formate. Sie bewirken meist keine besondere Änderung in der Anzeige. Die Darstellung kann je nach Browser auch hier sehr unterschiedlich sein. Sie dienen hauptsächlich zur Identifikation und Auffindung von Textteilen im Quellcode. Die folgende Liste zeigt einige dieser Formate.

Befehl Änderung Ansicht
<em> Text </em> für Hervorhebung blabla
<strong> Text </strong> für Starke Hervorhebung blabla
<cite> Text </cite> Zitate blabla
<q> Text </q> Kurze Zitate blabla
<person> Text </person> Namen von Personen blabla
<tt> Text </tt> Nicht porportionaler Text blabla
<samp> Text </samp> Beispieltexte blabla

2. Absätze

2.1 Absatz

Der Standardabsatz wird durch den Container P erzeugt. Über und unter ihm wird jeweils automatisch ein Abstand eingefügt.

<p>Text</p>

Blabla blablabla blabla bla bla.

Blabla blablabla blabla bla bla.

Zeilenumbruch

Mit dem BR-Tag wird ein einfacher Zeilenumbruch erzeugt. Für den BR-Tag gibt es den Parameter CLEAR, der das Umfließen einer freien Grafik regelt. Mit ihm kann man den Beginn der nächsten Zeile verschieben.

2.2 Ausrichtung

HTML erlaubt es, die Absätze auszurichten. Dazu dient der Parameter ALIGN im P Container.

<p align="left">Text</p>

Dieser Absatz ist am am linken Rand ausgerichtet.

<p align="right">Text</p>

Ein rechts in der Zelle ausgerichteter Absatz.

<p align="center">Text</p>

Mit diesem Befehl wird der ganze Absatz zentriert ausgerichtet.

<blockquote>Text </blockquote>

Dieser Satz wird mit dem HTML-Befehl BLOCKQUOTE eingerückt ausgerichtet und dadurch hervorgehoben.


3. Links

Links (Verknüpfungen) ermöglichen es, von einer bestimmten, definierten Stelle eines HTML-Dokumentes auf eine andere Seite bzw. eine bestimmte Stelle einer anderen HTML-Seite zu springen. Mit dem ANCHOR-Container <a> </a> wird ein beliebiger Textteil (meist ein Wort, kann aber auch ein Buchstabe oder ein Bild sein) auf HTML-Seiten als Bestandteil einer Verknüpfung definiert. Zusätzlich wird im ANCHOR-Tag mit dem Parameter HREF der Pfad des verknüpften Dokuments (DAS Sprungziel) angegeben. In diesem Beispiel liegt das verknüpfte Dokument im gleichen Ordner wie das Dokument mit dem Link.

<a href="Dokument2.htm"> Text </a>           Link

Falls das Dokument in einem anderen Ordner liegt, muß der Pfad entsprechend angepaßt werden.

<a href="Ordner1/Unterordner/Dokument2.htm"> Text </a>

Natürlich können auch Internetadressen als Link eingefügt werden:

<a href="http://www.nature-flash.de"> Text </a>           Nature-Fash

4. Sprungmarken

Auch innerhalb einer Seite können Verknüpfungen bestehen. Dazu wird ein Absprungort und ein Sprungziel benötigt. Das Sprungziel (der Anker) wird über den ANCHOR-Container mit dem Parameter NAME definiert. Der Wert des Parameters NAME ist eine beliebig festgelegte Benennung der Verknüpfung, die sich in der gleichen Schreibweise im definierten Sprungziel wiederfinden muß. Sie dient nur zur Identifikation der zusammengehörenden Links und Sprungziele, da ein Dokument oft mehrere Links enthält. Der im Befehlscontainer des Sprungzieles eingeschlossene Text wird in keiner Weise seiner Formatierung verändert.

Das Sprungziel:
<a name="Nummer1"> Text </a>


Das Sprungziel ist natürlich immer dort, wohin gesprungen werden soll. Kurz, dort soll der Nutzer landen nachdem er gesprungen ist (einen Link angeklickt hat). Der Ausdruck innerhalb der Anführungszeichen ist die Bezeichnung des Ankers, welche der Seitenangabe des Links mit einem # anzuhänegen ist (s.u.).


Der Absprungort wird ebenfalls über einen ANCHOR-Container (Parameter HREF) festgelegt, mit dem # nach der Seitenangabe wird der entsprechende Zielort auf der Seite angegeben, der dort natürlich auch definiert sein muss (s.o.):
<a href="Dokument1.htm#Nummer1"> Text </a>

Derr Nutzer geht hier einem Link nach. Der Absprungort kann ein Textlink sein oder eine verlinkte Grafik. Bei einer Grafik sieht der HTML-Code so aus:

<a href="Dokument1.htm#Nummer1"> <img src="bild1.gif"> </a>


Erfolgt der Sprung auf dieselbe Seite, kann die Seitenangabe wegfallen:

<a href="#Nummer1"> Text </a> Sprung an den Anfang der Seite

Der Zusatz target gibt an, in welchen Frame die neue Seite bei einem Frameset geladen werden soll. Im folgenden Beispiel ist Frame2 der dem Frame im Frameset zugewiesene Name, der das Sprungziel enthalten soll.
<a href="Dokument2.htm" target="frame2"> Text </a>

Zusätzlich können über den Zusatz target="blank" innerhalb eines Frames oder auch auf einer normalen Seite für die aufgerufene Seite ein eigenes Browser-Fenster aufgerufen werden.

Auch ein Sprung auf eine Seite im Internet ist möglich:
<a href="http://www.vhs.de" target="frame2"> Text </a>

5. Email

Als Sprungziel kann auch eine Email-Adresse angegeben werden:

<a href="mailto:e.mustermensch@xxxxx.com"> Text </a> Email

Auf diese Weise werden Email-Adressen in HTML-Seiten integriert.

Impressum

© Nature-Flash 2002