Wichtige HTML - Befehle

Öffne hier das Fenster zum Ausprobieren: >>

rechte Maustaste - In neuem Fenster öffnen
Verkleinere das Übungsfenster und probiere darin die hier enthaltenen Befehle aus.

Grundgerüst

<html> 
<head>
<title>Der Titel in der Titelleiste</title>
</head>
<body>
Hier steht der Text der Seite
</body>
</html>

Absätze

Textabsatz:

<p> Das ist ein Absatz </p>

linksbündig, rechtsbündig, zentriert, als Blocksatz ausgerichtet

<p align="left;right;center;justify">Text</p>

Bereiche definieren:

<div align="left;right;center;justify">mehrere Bereiche</div>

Zeilenumbruch (Einzeltag)

<br>

Überschriften:

<h(1-6)>Überschrift</h(1-6)>

<h(1-6) align="left;........">Überschrift</h (1-6)>

Textformatierung

Phy. Formatierung:

<b>fett formatiert</b> 

<i>kursiv formatiet</i>

<u>unterstrichen</u>

<strike>durchgestrichen</strike> 

<tt>Schreibmaschieneneffect</tt>

<big>vergrößerter Teil</big>

<small>verkleinerter Text</small>

<sup>hochgestellter Text</sup>

<sub>tiefgestellter Text</sub>

Logische Formatierung:

<acronym>für Abkürzungen</acronym>

<cite>für Zitate</cite>

<code>für Quellcode</code>

<dfn>für Definitionen</dfn>

<em>für eine Betonung</em>

<kbd>für Tastatureingaben</kbd>

<samp>für Beispiele</samp>

<strong>für starke Betonung</strong>

<var>für Variablen</var>

Schriftformatierung

Schriftgröße:

<font size="1;2;3;4;5;6;7">Text</font>

Schriftart:

<font face="Name der Schriftart">Text</font>

Schriftfarbe:

<font color="#123456">Text</font>

Kombination:

<font size="1" face="arial" color="engl. Farbname">Text</font>

Zusätzliche Formatierung
Trennlienien:

<hr>

Listen
Aufzählungen:

<ul type="disc;square;circle"><li>Eintrag</li></ul>

Nummerierung:

<ol type="1;a;A;i;I"><li>Eintrag</li></ol>

Definition:

<dl><dt>Ausdruck</dt><dd>Beschreibung</dd></dl>

Kompakte Liste:

<ol compact>
<ul compact>
<dl compact>

Grafiken
Grafiken einbinden:

<img src="gesicht.png">

Breite und Höhe:

<img src="gesicht.png" width="?" height="?">

Alternativer Text:

<img src="gesicht1.png" alt="Text">

Grafik umranden:

<img src="gesicht.png" border="?">

Beschriftung:

<img src="gesicht.png" align="top;middle;bottom">Text

Text um Grafik:

<img src="gesicht.png" align="right;left">Text

Abstand zur Grafik:

<img src="gesicht.png" vspace="?" hspace="?">Text

Hyperlinks
Hyperlink setzen:

<a href="www.mrge.de">Verweistext</a>

E-Mail Hyperlink:

<a href="mailto:email@adresse.de">Verweistext</a>

Grafik als Hyperlink':

<a href="www.mrge.de"><img src="gesicht.png"></a>

Tabellen

Grundaufbau:

<table>
<tr>
<td>Zelleninhalt</td>
<td>Zelleninhalt</td>
</tr>
</table>

Tabellenbreite:

<table width="?">

Spaltenbreite:

<tr width="?">
<td width="?">Zelleninhalt</td>
<th width="?">Zelleninhalt</th>

Tabelleninhalt

<table>
<caption align="top;bottom;left;right">Text</caption>
<tr>
<td>Zelleninhalt</td>
<td>Zelleninhalt</td>
</tr>
</table>

Tabellenrahmen:

<table border="?">

Tabellenausrichtung:

<table align="left;right;center">

Zellen horizontal:

<tr align="left;right;center">
<th align="left;right;center">Zelleninhalt</th>
<td align="left;right;center">Zelleninhalt</td>

Zellen vertikal:

<tr valign="top;middle;bottom">
<td valign="top;middle;bottom">Zelleninhalt</td>
<th valign="top;middle;bottom">Zelleninhalt</th>

Spalten verbinden:

<th colspan="?">Zellinhalt</th>
<td colspan="?">Zellinhalt</td>

Zeilen verbinden:

<th rowspan="?">Zellinhalt</th>
<td rowspan="?">Zellinhalt</td>

Zellabstand:

<table cellspacing="?">

Abstand Zellinhalts:

<tabel cellpadding="?">

Zellrahmen:

<table frame="void;box;above;below;hsides;vsides;lhs;rhs">

Tabellenlinien:

<table rules="none;groups;rows;cols;all">

Rahmenfarbe:

<table bordercolor="#123456" bordercolor(light)(dark)="#123456">

Hintergrundfarbe:

<table bgcolor="#123456">
<tr bgcolor="#123456">
<td bgcolor="#123456">Zelleninhalt</td>
<th bgcolor="#123456">Zelleninhalt</th>

Hintergrundbild:

<table background="URL">
<tr background="URL">
<td background="URL">Zellinhalt</td>
<th background="URL">Zellinhalt</th>

Formulare
Grundaufbau:

<form action=""mailto:E-Mail">mailto:E-Mail" method="post;get" enctype="text;plain">
<!--Inhalt des Formulars-->
</form>

Einzeiliges Feld:

<input type="text" name="Name" size="?" maxlenght="?">

Passwortfeld:

<input type="password" name="Name">

Mehrzeiliges Feld:

<textarea name="Name" rows="?" cols="?"></textarea>

Auswahlliste:

<select name="Name" size="?" multiple>
<option value="Wert" selected>1. Listeneintrag</option>
<option value="Wert">2. Listeneintrag</option>
</select>

Kontrollkästchen:

<input type="checkbox" name="Name" value="Wert" checked>
<input type="checkbox" name="Name" value="Wert">

Optionsfeld:

<input type="radio" name="Name" value="Wert" checked>
<input type="radio" name="Name" value="Wert">

Versteckte Felder:

<input type="hidden" name="Name" value="Wert">

Schaltflächen:

<input type="submit" value="Beschriftung">
<input type="reset" value="Beschriftung">

Grafik als Fläche.

<input type="image" name="Name" src="URL">