Ihr Partner für Ihr Design
© 2001		  
 

Lokale Links:
Design
Corporate-Image
Präsentation
Webdesign
Webhosting
Kontakt
E-mail
Startseite

 

HTML Formatierungen


Textformatierungen
Überschriften
Textabsätze
Zeilenumbruch erzwingen
Zeilenumbruch verhindern
Kommentar einfügen
Einrücken (Zitat)
Präformatierter Text
Physische Textausrichtung
Lauftext
Mehrspaltiger Textfluss
 
Listen und Aufzählungen
Listen mit ol, li
Listen mit type="a"
Listen mit ol type="I"
Listen mit ol-Nummerierung beeinflusst
Listen mit ol-Nummerierung beeinflusst
Aufzählungslisten
Aufzählungslisten mit "circle"
Definitionslisten
 
Trennlinien
Trennlinien
Trennlinien gestalten
 
Tabellen
Aufbau einer Tabelle
Aussenrahmen, Gitternetzlinien, Zellenabstand
Spalten vordefinieren
Tabellentitel
Regeln für den Aussenrahmen
Regeln für die Gitternetzlinien
Breite und Höhe
Horizontale und Vertikale Ausrichtung
Zellen verbinden
 
Verweise, Grafiken
Verweise
Bilder einfügen
Abstand zwischen Grafik und Umgebung
Alternativtext anbieten
Bilder als Verweise

























Textformatierungen


Überschriften

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5
Überschrift 6
 <h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>
 

zurück

Textabsätze

Absatz 1

Absatz 2

 <p>Absatz 1</p>
<p>Absatz 2</p>
 

zurück

Zeilenumbruch erzwingen
Text 1. Zeile
Text 2. Zeile 		Text 1. Zeile<br>Text 2. Zeile
 

zurück

Zeilenumbruch verhindern
Text <nobr>Text</nobr>
 

zurück

Kommentar einfügen
Text Text Text <!-- Dies ist ein Kommentar --> Text
Damit kann im HTML Code ein Kommentar eingefügt werden, der im Browser nicht angezeigt wird.

zurück

Einrücken (Zitat)
Dieser Text steht einfach so da.
Dieser Text steht zwischen einem "Blockquote"-Tag.
Dieser Text steht einfach so da.
<blockquote>
Dieser Text steht zwischen einem "Blockquote"-Tag.
</blockquote>
Steht ein Text zwischen einem Blockquote Tag wird dieser sowohl links wie auch rechts eingerückt.

zurück

Präformatierter Text
Dieser Text steht einfach so da. 
Dieser Text steht zwischen einem "pre"-Tag.
Dieser Text steht einfach so da.
<pre>
Dieser Text steht zwischen einem "pre"-Tag.
</pre>
 

zurück

Physische Textausrichtung
normal - fett
normal - kursiv
normal - diktengleich
normal - unterstrichen
normal - durchgestrichen
normal - grösser
normal - kleiner
normal - hochgestellt
normal - tiefgestellt
normal - durchgestrichen
normal - blinkend 		normal - <b>fett</b>
normal - <i>kursiv</i>
normal - <tt>diktengleich</tt>
normal - <u>unterstrichen</u>
normal - <strike>durchgestrichen</strike>
normal - <big>grösser</big>
normal - <small>kleiner</small>
normal - <sup>hochgestellt</sup>
normal - <sub>tiefgestellt</sub>
normal - <s>durchgestrichen</s>
normal - <blink>blinkend</blink>
Wie wir an diesen Beispielen schön sehen interpretiert nicht jeder Browser die Tags gleich...

zurück

Lauftexte
Dies ist der Laufschrifttext <marquee>
Dies ist der Laufschrifttext
</marquee>
Schön, aber funktioniert nur mit MIE ab 3.0

zurück

Mehrspaltiger Textfluss
Hier steht viel Text der in diesen zwei Spalten überhaupt zeigt, was dieser Tag eigentlich bewirkt. Aber liebe MS-Freunde nicht weinen... Dieser funktioniert nur mit Netscape ab Version 3.0 <multicol cols="2" width="50" gutter="10">
Hier steht viel Text der in diesen zwei Spalten überhaupt zeigt, was dieser Tag eigentlich bewirkt. Aber liebe MS-Freunde nicht weinen... Dieser funktioniert nur mit Netscape ab Version 3.0
</multicol>
cols=Anzahl Spalten; width=Breite in Pixel; gutter=Abstand zwischen den Spalten
Funktioniert nur mit Netscape Navigator.

zurück


























Listen und Aufzählungen

zurück

Listen mit ol, li
  1. Listeneintrag 1
  2. Listeneintrag 2
  3. Listeneintrag 3
  4. Listeneintrag 4
 <ol>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
<li>Listeneintrag 3</li>
<li>Listeneintrag 4</li>
</ol>
 

zurück

Listen mit ol type="a"
  1. Listeneintrag 1
  2. Listeneintrag 2
  3. Listeneintrag 3
  4. Listeneintrag 4
 <ol type="a">
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
<li>Listeneintrag 3</li>
<li>Listeneintrag 4</li>
</ol>
Dabei kann Type="a"oder "A" eingegeben werden.

zurück

Listen mit ol type="I"
  1. Listeneintrag 1
  2. Listeneintrag 2
  3. Listeneintrag 3
  4. Listeneintrag 4
 <ol type="I">
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
<li>Listeneintrag 3</li>
<li>Listeneintrag 4</li>
</ol>
Dabei kann Type="I"oder "i" eingegeben werden.

zurück

Listen mit ol - Nummerierung beeinflusst
  1. Listeneintrag 1
  2. Listeneintrag 2
  3. Listeneintrag 3
  4. Listeneintrag 4
 <ol start="5">
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
<li>Listeneintrag 3</li>
<li>Listeneintrag 4</li>
</ol>
 

zurück

Listen mit ol - Nummerierung beeinflusst
  1. Listeneintrag 1
  2. Listeneintrag 2
  3. Listeneintrag 3
  4. Listeneintrag 4
 <ol>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
<li value="6">Listeneintrag 3</li>
<li>Listeneintrag 4</li>
</ol>
 

zurück

Aufzählungslisten
  • Listeneintrag 1
  • Listeneintrag 2
  • Listeneintrag 3
  • Listeneintrag 4
 <ul>
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
<li>Listeneintrag 3</li>
<li>Listeneintrag 4</li>
</ul>
 

zurück

Aufzählungslisten mit type="circle"
  • Listeneintrag 1
  • Listeneintrag 2
  • Listeneintrag 3
  • Listeneintrag 4
 <ul type="circle">
<li>Listeneintrag 1</li>
<li>Listeneintrag 2</li>
<li>Listeneintrag 3</li>
<li>Listeneintrag 4</li>
</ul>
Erlaubt ist type="circle", "square" oder "disc"

zurück

Definitionslisten
Zu definiernder Ausdruck
Definition des Ausdrucks
Haus
Vier Wände mit Dach
 <dl>
<dt>Zu definierender Ausdruck</dt>
<dd>Definition des Ausdrucks</dd>
<dt>Haus</dt>
<dd>Vier Wände mit Dach</dd>
</dl>
 

zurück



























Trennlinien


Trennlinien
Text davor
Text danach 		Text davor
<hr>
Text danach
 

zurück

Trennlinien gestalten
Text davor
Text danach 		Text davor
<hr width="250" size="10" align="center">
Text danach
Dabei wird "width" und "size" in Pixeln angegeben. Bei "align" ist left, center, right erlaubt.

zurück

Trennlinien gestalten
Text davor
Text danach 		Text davor
<hr color="#FF0000">
Text danach
 

zurück

Trennlinien gestalten
Text davor
Text mitte
Text danach 		Text davor
<hr size="10" noshade>
Text mitte
<hr size="10">
Text danach
Mit "noshade" wird kein Schatten angezeigt.

zurück


























Tabellen


Aufbau einer Tabelle



1 2
3 4
<table border="2">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
"border=2" gibt die Rahmenstärke der Tabelle an. "tr" öffnet eine Zeile. "td" ist jeweils eine Zelle.

zurück

Aussenrahmen, Gitternetzlinien und Zellenabstand



1 2
3 4
<table border="2" cellspacing="5" cellpadding="5">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
"cellspacing=5" gibt die Dicke der Gitternetzlinie an; "cellpadding=5" den Abstand von Zellenrand zum Zelleninhalt. Beides in Pixel

zurück

Spalten vordefinieren






1 2 3
4 5 6
<table border="2">
<colgroup>
<col>
<col width="50" span="2">
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Mit "colgroup" können die Spalten definiert werden. Das erste "col" hat keine Formatierung, weshalb 1, 4 wie im Beispiel vorher angezeigt werden. Mit dem zweiten "col" werden "width=50", also die Spaltenbreite in Pixel und "span=2", über wieviele Spalten diese Formatierung gelten soll.

zurück

Tabellentitel



Hier steht der Titel.
Hier der normale Text
<table border="2">
<tr>
<th>Hier steht der Titel.</th>
</tr>
<tr>
<td>Hier der normale Text</td>
</tr>
</table>
In einem "th" Tag wird die Schrift fett und zentriert dargestellt.

zurück

Regeln für den Aussenrahmen



1 2 3
4 5 6
<table border="2" frame="void">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Erlaubt ist frame= void (kein), box (rundum), above (nur oben), below (nur unten), hsides (nur oben und unten), vsides (nur links und rechts), lhs (nur links) und rhs (nur rechts).

zurück

Regeln für die Gitternetzlinien



1 2
3 4
5 6
<table border="2" rules="rows" frame="none">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
Erlaubt ist rules= none (kein), rows (nur zwischen den Zeilen), cols (nur zwischen den Spalten), all (überall wie voreingestellt).

zurück

Breite und Höhe



1 2
3 4
<table border="2" width="50%" height="50%">
<tr height="66%">
<td weight="66%">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Mit weight wird die Breite, mit height die Höhe der Tabelle und der einzelnen Zellen definiert.

zurück

Horizontale und Vertikale Ausrichtung



1 2
3 4
<table border="2" width="50%" height="50%">
<tr height="66%">
<td weight="66%" align="center">1</td>
<td align="right" valign="top">2</td>
</tr>
<tr>
<td align="center" valign="bottom">3</td>
<td align="left" valign="top">4</td>
</tr>
</table>
Mit align wird die horizontale Ausrichtung festgelegt. Erlaubt sind left, center, right, justify.
Mit valign wird die vertikale Ausrichtung festgelegt. Erlaubt sind top, middle, bottom.

zurück

Zellen verbinden



1
2 3
4
<table border="2">
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
Wie im Beispiel ersichtlich macht er mit colspan eine Zelle über zwei Spalten. Mit rowspan eine Zelle über zwei Zeilen.

zurück


























Verweise / Grafiken


Verweise
Link zu www.pcpuk.com


Link zu info@pcpuk.com 		<a href="http://www.pcpuk.com">
Link zu www.pcpuk.com
</a>
<a href="mailto:info@pcpuk.com">
Link zu info@pcpuk.com
</a>
Ein Verweis kann sein:
Anker in der gleichen Datei (#Ankername)
Andere Datei im gleichen Verzeichnis (dateiname.html)
Andere Datei in anderem Verzeichnis (../verzeichnis/dateiname.html)
WWW-Adresse (http://www.pcpuk.com)
Ftp-Adresse (ftp://ftp.pcpuk.com)
E-Mail Adresse (mailto:info@pcpuk.com)

zurück

Bilder einfügen
Text Text
Text <img src="images/logo.gif" width="72" height="72"> Text
Nur *.gif und *.jpg Grafiken einbinden. Mit width und height wird die Breite und Höhe definiert.

zurück

Abstand zwischen Grafik und Umgebung
Text Text
Text <img src="../images/logo.gif" vspace="72" hspace="72" align="middle"> Text
Mit vspace und hspace wird der Abstand Vertikal und Horizontal eingegeben. align gibt an wie der Text zur Grafik stehen soll. Erlaubt sind top, middle, bottom, left, right.

zurück

Alternativtext anbieten
Logo
<img src="../images/logo3.gif" width="72" height="72" alt="Logo">
Wird ein Bild nicht geladen (weil nicht vorhanden wie in diesem Beispiel) oder will der Benutzer keine Bilder angezeigt, so erscheint der Alternativtext im Bild.

zurück

Bilder als Verweis
<a href="http://www.feuerwehr.sh">
<img src="../images/logo.gif" width="72" height="72" border="3">
</a>
Mit border wird die Rahmenstärke um das Bild definiert. Dies kann auch "border=0" sein, damit keine Linie sichtbar ist.

zurück















© by christoph@schuele.org, 2000

 


Webdesign:
HTML-Tags
Websichere Farben

Externe Links:
HTML Hilfe
PHP Hilfe
ASP Hilfe

Web-Referenzen:
zungen.ch
wein.ch
wemo.ch
foto-dubler.ch
treuhand-maurer.ch