HTML lernen

Mit diesem Kurs haben Sie die Möglichkeit, HTML zu lernen. Dieser Kurs ist sehr kompakt gehalten, da einige veraltete, sowie überflüssige Tags gezielt ausgelassen wurden. Nach dem erlernen können Sie Webseiten erstellen, die einwandfrei dargestellt werden, unabhängig vom Broswer und dem Land, aus dem der Besucher die Seite aufruft. Hier eine Liste, die Sie schnell zu den einzelnen Themen navigiert:

Allgemeine Regeln Head-Bereich Inline-Elemente Verweise Grafiken

Formulare Block-Elemente Listen Tabellen Sonstige Tags

CSS Auflistung Tipps und Tricks Weitere Themen

Allgemeine Regeln

Als Programm empfiehlt sich der Editor, der bei Vista unter Alle Programme - Zubehör - Editor verfügbar ist. Sie speichern das fertige Dokument mit der Endung .htm ab. Auf dieser Weise können Sie auch .css-Dateien erstellen. Dem Browser ist es dabei egal, ob Sie alles auf einer Reihe schreiben oder es übersichtlich ordnen.

Nach der !doctype-Definition folgt der html-Tag, der das eigentliche HTML-Dokument einleitet, zusammen mit einem End-Tag, der den letzten Tag im gesammten Dokument darstellt. Zwischen diesen Tags befindet sich der head-Tag, der den Kopfbereich darstellt, sowie der body-Tag, der den eigentlichen Körper darstellt, der auch im Brwoser später angezeigt wird. Der ganze Aufbau sieht somit also so aus:

Wenn Sie mit einem Tag beginnen, so muss er auch als letztes geschlossen werden:

Neben dem Leerzeichen und den Zeichen a-z, A-Z, 0-9 dürfen folgende Zeichen benutzt werden:

Diese Zeichen dienen nur der Formatierung des Textes: < > &. Um sie auch im Browser anzuzeigen, müssen sie, wie auch die Umlaute, maskiert werden. Das Zeichen ä wird dann durch &#228; erstzt. Nur in seltenen Fällen muss auch das Zeichen " maskiert werden:

ä

ä

ö

ö

ü

ü

Ä

Ä

Ö

Ö

Ü

Ü

ß

ß

€

€

µ

µ

&

&

§

§

¶

¶

©

©

®

®

™

™

°

°

α

α

β

β

Δ

Δ

ε

ε

η

η

λ

λ

μ

μ

Ω

Ω

„

„

“

“

‘

‘

"

"

«

«

»

»

<

&#60;

>

&#62;

•

&#149;

‰

&#137;

ø

&#248;

Ø

&#216;

¤

&#164;

¢

&#162;

£

&#163;

¥

&#165;

×

&#215;

÷

&#247;

¹

&#185;

²

&#178;

³

&#179;

¼

&#188;

½

&#189;

¾

&#190;

Head-Bereich

Alle Angaben, die in diesem Kapitel erklärt werden, werden im Head-Bereich notiert. Die Reihenfolge der einzelnen Angaben ist dabei egal. Wichtig ist nur, dass sie sich zwischen head und /head befinden. Der Titel ist die wichtigste und einzige Angabe, die in der Browserleiste oben und auch bei den Sucherergebnissen als erstes angezeigt wird.

Meta-Angaben sind später auf einer Webseite selber nicht ersichtlich. Sie sind im Quellcode einer Webseite notiert und dienen in erster Linie als Information für Suchmaschinen. Pflicht sind Meta-Angaben jedoch nicht. Sie bestehen aus einer Eigenschaft (author) und einem Wert (Klaus Weiss) wie in dem Beispiel, gefolgt von einer Liste mit weiteren Eigenschaften und passenden Beispielen dazu.

Angabe	name	content
Autor	author	Klaus Weiss
Verlag	publisher	Klaus Weiss AG
Kopierrecht	copyright	Klaus Weiss
Eigentümer	owner	Klaus Weiss
Beschreibung	description	Webseite, die über ein bestimmtes Thema handelt.
Thema	page-topic
Typ	page-type
Schlüsselwörter	keywords	Auto, Thema, Tipps und Tricks, ...
Sucheinstellung	robots
Besuche	revisit
Datum	data	2006-06-15 (Jahr-Monat-Tag. Reihenfolge sollte eingehalten werden.)
<meta name="author" content="Klaus Weiss" />

Die Eigenschaft http-equiv war ursprünglich dazu dar, dass Web-Server die Datei vorher ausliesten und dann erst an den Browser übermittelten. So konnte z.B. angezeigt werden, wie alt eine Webseite ist. Solche Meta-Angaben funktionieren auch heute noch problemlos, allerdings übernimmt mittlerweile das Auslesen der Browser selber.

Angabe	name	content
Zeichencodierung	content-type	text/html; charset=utf-8
Sprache	content-language	de - Deutsch.
Cookies	set-cookie	Cookies setzen.
Cache	cache-control	no-cache - Anweisung für Browser: immer von Originalseite laden.
Proxy-Server	pragma	no-cache - Für Proxy-Agenten: nicht auf Proxy-Server speichern.
<meta http-equiv="expires" content="Sat, 01 Dec 2001 00:00:00 GMT" />

Link-Tags bestehen immer aus dem Tag link und den Attributen rel, title, href.

Angabe	rel	Beispielwert
Favicon	shortcut icon
Autor	author
Copyright	copyright
erste Seite	first
letzte Seite	last
Kapitelseite	up
Startseite	top
Hilfe	help
Lesezeichen	bookmark
Stylesheet	stylesheet
Alternativ	alternate
Alternativer Style	alternate styleshee
<link rel="shortcut icon" type="image/x-icon" href="http://www.adresse.de/" />

Inline-Elemente

Bei Inline-Elementen beginnt kein neuer Absatz, sondern der Text wird in der gleichen Zeile vorgesetzt. Bei logischen Tags bestimmt letztenendes der Browser wie der mit ihnen markierte Text angezeigt wird. So müssen em und strong nicht kursiv bzw. fett dargestellt werden, sondern können je nach Browsereinstellung anders angezeigt werden.

<i> Text </i>	kursiv
<em> Text </em>
<var> Text </var>
<b> Text </b>	fett
<strong> Text </strong>
<del> Text </del>	durchgestrichen
<ins> Text </ins>	unterstrichen
<sup> Text </sup>	hochgestellt
<sub> Text </sub>	tiefgestellt
<small> Text </small>	klein
<span> Text </span>	normal

Verweise

Links bestehen mindestens aus dem Tag a sowie einer URL. Mit target="_blank" eröffnet sich der Link in einem neuen Fenster.

Text	<a href="h.htm" target="_blank">Text</a>

Es ist auch möglich, auf einem bestimmten Punkt innerhalb einer Seite zu verlinken, indem Sie an Anker setzen, wie im Beispiel. Schauhen Sie sich zudem oben die URL an.

von hier	<a href="#15">von hier</a>
nach hier	<a name="15">nach hier</a>

Mit mailto: können in Links auch E-Mail-Adressen angegeben werden. Damit sie schon ausgefühlt sind, muss an den Enden nur eine kleine Angabe gemacht werden.

Text	<a href="mailto:x@x.de">Text</a>

Grafiken, Überschriften oder Blockelemente können Linkform haben. Dazu wird das gesammte Element zwischen den Link-Tags gesetzt.

	Titel	Text
<a ...><img src="h.jpg" /></a>	<a ...><h1>Titel</h1></a>	<a ...><div>Text</div><a>

Grafiken

Grafiken werden mindestens mit dem Tag img sowie einer URL eingebunden. Weitere Attribute können hinzugefügt werden. Der Alternativtest erscheint, wenn das Bild nicht geladen wurde. Der Titel erscheint, wenn man mit der Maus über das Bild fährt.

<img src="bild.jpg" alt="Text" title="Name" />

Formulare

Formulare bestehen mindestens aus dem Tag form und einer URL, an der die eingegebenen Daten geschickt werden. Für Forenformulare wird method="post" angegeben und kann für Suchfelder, um die Webseite nach was bestimmten zu durchsuchen, weg gelassen werden. enctype="multipart/form-data" ist nur dann nötig, wenn das Formular einen Uploadknopf enthält. Alle zur Formulargestaltung nötigen Elemente werden zwischen den form-Tags gesetzt.

Die folgenden Elemente werden mit input gesetzt. Elemente, die zusammen gehören, sollten den gleichen Namen erhalten. Bei Radio und Checkboxen ist value für das auszuwertende Skript wichtig. Textfelder können damit vorbelegt werden und auch die Beschriftung der Köpfe lässt sich damit selber bestimmen. maxlength bestimmt die maximale Zeichenlänge bei Textfeldern.

<input name="name" value="name" maxlength="5" />
	type="radio"	Einfachauswahl
	type="checkbox"	Mehrfachauswahl
	type="text"	Einzeiliges Textfeld
	type="password"	Passwortfeld
	type="submit"	Abschicken
	type="reset"	Abbrechen
	type="file"	Uploadknopf

Der Tag textarea dient für mehrzeilige Textfelder. Wichtig ist das Attribut name, mit dem Sie dem Textfeld einen Namen geben.

<textarea name="name"></textarea>

Der Tag select dient für Auswahllisten. Wichtig ist das Attribut name, mit dem Sie dem Textfeld einen Namen geben. Die einzelnen Punkte werden mit dem Tag option gemacht.

Nr. 1Nr. 2Nr. 3	size="3"	Mit size bestimmen Sie die Anzahl der Auswahlmöglichkeiten. Wird 1 gewählt, entsteht eine Dropdown-Auswahl.
Nr. 1Nr. 2Nr. 3	size="1"
Nr. 1Nr. 2Nr. 3	multiple="multiple"	Mehrfachauswahl (Strg gedrückt halten).

Block-Elemente

<h1> ... </h1> ... <h6> ... </h6>	Überschriften - h1 (grösste) bis h6 (kleinste).
<p> ... </p>	Absatz - muss nur alle zwei Absätze eingesetzt werden.
<div> ... </div>	Allgemeines Block-Element.

Listen

Es gibt zwei Listentypen: ul (unsortiert) und ol (sortiert). li ist dabei der Listeneintrag. Das erste Beispiel zeigt eine unsortierte Liste, das zweite eine sortierte, das dritte eine verschachtelte.

<ul> <li>Punkt A</li> <li>Punkt B</li> <li>Punkt C</li> </ul>	<ol> <li>Punkt A</li> <li>Punkt B</li> <li>Punkt C</li> </ol>	<ol> <li>Punkt A</li> <li>Punkt B   <ul>   <li>Punkt B.1</li>   <li>Punkt B.2</li>   </ul></li> <li>Punkt C</li> </ol>
Punkt A Punkt B Punkt C	Punkt A Punkt B Punkt C	Punkt A Punkt B Punkt B.1 Punkt B.2 Punkt C

Für Glossare werden vorallem Defintionslisten benötigt. Mit dl starten Sie eine Definitionsliste, mit dt setzen Sie ein Thema und dd ist dabei der Eintrag.

<dl> <dt>Punkt A</dt>   <dd>Punkt A.1</dd>   <dd>Punkt A.2</dd> <dt>Punkt B</dt>   <dd>Punkt B.1</dd> </dl>

Punkt A Punkt A.1 Punkt A.2 Punkt B Punkt B.1

Tabellen

Eine Tabelle besteht aus den Tags table (Tabelle), tr (Reihe) und td (Spalte). Sie können mehrere Reihen oder Spalten überspringen, indem Sie colspan (Reihen) und rowspan (Spalten) im Tag td angeben und so eine Überschrift setzen.

<table> <tr> <td>A.1</td> <td>A.2</td> </tr> <tr> <td>B.1</td> <td>B.2</td> </tr> </table>

<table> <tr> <td colspan="3" >1./2./3.</td> </tr> <tr> <td rowspan="2" >A/B</td> <td>A.1</td> <td>A.2</td> </tr> <tr> <td>B.1</td> <td>B.2</td> </tr> </table>

A.1 A.2 B.1 B.2

1./2./3. A/B A.1 A.2 B.1 B.2

Sonstige Tags

<br />	Umbruch
<nobr> ... </nobr>	Zusammenhalt
<hr />	Horizontallinie

CSS

Es gibt drei Möglichkeiten, CSS in einem HTML-Document einzubinden. Bei der ersten Möglichkeit wird der Code direkt im Tag eingebunden, bei der zweiten im Head-Bereich und bei der dritten wird eine .css-Datei ausgelagert. Im Head-Bereich ist dann nur noch ein Link zur Datei angegeben.

Mit !important können wichtige Stellen makiert werden.

Auflistung

Nun folgt eine Auflistung aller CSS-Eigenschaften. Im Prinzip lassen sich alle Eigenschaften auf allen Tags anwenden. Listeneigenschaften sind bei Tabellen zwar fehl am Platz, richten jedoch keinen Schaden an.

Schriftformatierung
Art	font-family:	arial; times; verdana; ...
Stil	font-style:	normal; oblique; italic;
Stärke	font-weight:	normal; bolder; bold; lighter;
Variante	font-variant:	normal; small-caps;
Grösse	font-size:	5px;
Farbe	color:	#fff;
Textgestaltung
Art	text-transform:	none; uppercase; lowercase; capitalize;
Gestaltung	text-decoration:	none; overline; line-through; underline;
Ausrichtung	text-align:	right; center; left; justify;
Einrückung	text-indent:	5px;
Zeichenabstand	letter-spacing:	5px;
Wortabstand	word-spacing:	5px;
Zeilenhöhe	line-height:	5px;
Vertikalausrichtung	vertical-align:	top; middle; bottom;
Listendarstellung
Darstellung	list-style:	Position: inside; outside; Bullet: none; disc; circle; square; Bullet-Grafik: url(p/o.png); Nummerierung: decimal; (1. 2. 3.) lower-alpha; (a. b. c.) upper-alpha; (A. B. C.) lower-roman; (i. ii. iii.) upper-roman; (I. II. III.)
Tabellengestaltung
Breite	table-layout:	auto; fixed;
Rahmenmodell	border-collapse:	separate; collapse;
Rahmenabstand	border-spacing:	5px
Allgemeine Gestaltung
Hintergrund	background:	Farbe: #fff; Bild: none; url(p/0.png); Position: right; center; left; top; bottom; Kachel: repeat; repeat-x; repeat-y; no-repeat; Fixierung: scroll; fixed;
Seitenrand	margin: margin-left: margin-right: margin-top: margin-bottom:	auto; 5px;
Rahmenlinie	border: border-left: border-right: border-top: border-bottom:	Stärke: 5px; Farbe: #fff; Rahmen: solid; double; dotted; dashed; groove; ridge; inset; outset;
Innenabstand	padding: padding-left: padding-right: padding-top: padding-bottom:	5px;
Breite / Höhe	width: height:	auto; 5px;

Tipps und Tricks

Viele Pixel-Angaben, die hier dargestellt werden, wie zum Beispiel width:100px;, lassen sich auch als Prozent angeben wie zum Beispiel width:50%;. Dabei ist die Grösse dann relativ und verändert sich, wenn die Grösse des Fensters verändert wird. Hier eine Liste mit weiteren Möglichkeiten:

px	Pixel	pt	Punkt (1pt = 1/72in)	%	bezogen auf Fenstergrösse
cm	Zentimeter	pc	Pica (1pc = 12pt)	em	bezogen auf Schriftgrösse
mm	Millimeter	in	Inch (1in = 2.54cm)	ex	bezogen auf Kleinbuchstaben x

Farbangaben bestehen immer aus einem Gatter # und einem hexadezimalem Code. Die ersten beider Stellen bilden die rote Farbe, die zweiten beiden die grüne und die letzten beiden die blaue Farbe.

Es gibt mehrere Rahmenarten, die in diesen Beispielen alle mit einer Stärke von 4px aufgeführt werden.

solid

double

dotted

dashed

groove

ridge

inset

outset

Weitere Themen

Verschiedensten Schriftarten
SVG-Grafiken erstellen

Text- und Bildmaterial: © jensschlau.com

Startseite Impressum Autor