html 4.x

Hypertext Markup Language, eine Auszeichnungssprache zur Formatierung von Webseiteninhalten.

Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>title</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 0.18" />
</head>
<body>
	
</body>
</html>

Text

Überschrift

<h1>Überschrift</h1>
<h2>Überschrift</h2>
...
<h5>Überschrift</h5>

Textabsatz

Ein Textabsatz wird in einem Container eingeschlossen.

<p>ein html Textabsatz<br />
mit einem Zeilenumbruch.</p>

Fett

Mit können Textpassagen Fett hervorgehoben werden (veraltet).

<!-- veraltet -->
<p>....kann man Textpassagen <strong>Fett</strong> hervorheben.</p>

Kursiv

Das Element stellt den eingeschlossenen Text kursiv dar (veraltet).

<!-- veraltet -->
<p>....stellt den eingeschlossenen <em>Text kursiv</em> dar.</p>

Underline

Das Element stellt den Text unterstrichen dar (veraltet).

<!-- veraltet -->
<p>....stellt den <u>Text unterstrichen</u> dar.</p>

Zitate

blockquote

Mit dem <blockquote></blockquote> Element lassen sich Zitate einrücken.

<p>Ein normaler Textabsatz</p>
<blockquote>
<p>
Mit dem blockquote Element kann man Zitate<br />
Optisch durch Einrückung hervorheben. Dieses Element wird<br />
verwendet wenn ein Zitat mehrere Zeilen oder aus mehreren Sätzen besteht.<br />
Für kürzere Zitate stehen das q- und cite- Element zur Verfügung.<br />
Formatiert wird mit css.
</p>
</blockquote>

_{Ausgabe im Browser:}

q

Das <q></q> Element wird immer dann benutzt, wenn der zitierte Text im Textfluss (inline). Im Gegensatz zum <blockquote></blockquote> Element werden beim <q></q> Element automatisch Anführungszeichen eingefügt.

Dies ist ein Text, in dem <q>ein kurzes Zitat</q> eingefügt ist.<br />
<p class="quot">
Im html code werden die Anführungszeichen in Westeuropäische eingebaut.<br />
Dies ist ein Text, in dem <em>&bdquo;ein kurzes Zitat&ldquo;</em> eingefügt ist.
</p>

_{Ausgabe im Browser:}

cite

Bei cite unterscheiden sich das cite-Attribut und das cite-Element.

cite-Attribut:

<blockquote cite=http://www.xyz.com>
<p>
Man kann mit ihnen z.B. Weblinks oder Isbn Nummern ausweisen.<br />
danach sollte man das cite-Attribut mit css sichtbar machen.
</p>
</blockquote>

# CSS-Code:
blockquote:after {
        content: "URL: " attr(cite) ; /* Macht das cite-Attribut im html-code sichtbar */
        margin-left: 10px;
        font-style: oblique;
}

_{Ausgabe im Browser:}

cite-Element
Das cite-Element ist dem <q> Element ähnlich. Sein Inhalt wird kursiv dargestellt, allerdings werden keine Anführungszeichen eingefügt.

<blockquote>
<p>
Sinnfoll nutzt man dieses Element um auf eine Webseite <cite><a href=http://www.xyz.net title="Quellhinweis">xyz.de</a></cite><br />
als Quellhinweis zu platzieren. Die untere Url. kommt vom css Attribut des oberen Beispiels.
</p>
</blockquote>

_{Ausgabe im Browser:}

Verschiedene „target“ Attribute öffnen Links auf verschiedene Weise:

Ohne Angaben - Link wird im gleichen fenster geöffnet.
target=„_blank“ - Link öffnet in neuem Fenster.
target=„_self“ - öffnet im Aktuellem Fenster bei Frames.
target=„_parent“ - öffnet in übergeordneten Frame.
target=„_top“ - öffnet im gesamten Browserfenster bei Frames.

Externe Links

Externe Links mit dem Attribut target=„_blank“ in einem neuen Tab öffnen.

<a href="pfad/datei.html" target="_blank">Linkname</a>

Interne Verweise

Interne Verweise werden mit einer id ausgezeichnet.

        ...
	<ul>
		<li><a href="#abs1">Link zum Absatz 1</a></li>
		<li><a href="#abs2">Link zum Absatz 2</a></li>
	</ul>
        ...
        ...
        <h4 id="abs1">Absatz 1</h4>
        ...
        <h4 id="abs2">Absatz 2</h4>
        ...

Grafiken als Links

<a href="#top"><img src="pics/top.png" alt="nach oben" title="zum Seitenanfang" /></a>

Verlinkte E-Mail Adressen

<a title="E-Mail Senden" href="mailto:sos@web.de">E-Mail</a>

Diese Methode der Mailverlinkung ist nicht zu empfehlen.

Textlinks

<p>
Willkommen auf der Sonar - Studio Webseite.<br />
Hier finden Sie Infos zum <a href="betrieb.htm">Betrieb</a>,<br />
Die Linkseite finden Sie <a href="links.htm">hier</a> und ein<br />
<a href="forum.htm">Entwicklerforum</a> steht für Fragen bereit.
</p>
<p>
Sie erreichen uns über unser<a href="kontaktforular.htm">Kontaktformular</a>.
</p>

Ungeordnete Listen <ul>

Im CSS Teil kann man Aufzählungszeichen definieren. Mit der Eigenschaft list-style-type ist es möglich, verschiedene Aufzählungszeichen zu wählen. Mit list-style-image kann man auch eine Grafik als Listensymbol wählen. _{(siehe CSS)}

<ul>
	<li>100g Mehl</li>
	<li>50g Zucker</li>
	<li>3 Eier</li>
</ul>

_{Ausgabe im Browser:}

<ul style="list-style-image: url(pics/gtk-about.png);"><h5>Aufzählungszeichen für css ul</h5>
	<li>disc (Gefüllter Kreis)</li>
	<li>circle (Kreis ohne Füllung)</li>
	<li>square (Quadrat)</li>
	<li>none (kein Aufzählungszeichen)</li>
</ul>

_{Ausgabe im Browser:}

Verschachtelte Listen:

<ul>
	<li>100g Mehl</li>
	<li>50g Zucker
		<ul>
			<li>30g weißer Zucker</li>
			<li>20g brauner Zucker</li>
		</ul>
	</li>
	<li>3 Eier</li>
</ul>

_{Ausgabe im Browser:}

Geordnete Listen <ol>

Sind wie <ul</ul> Elemente, nur werden sie durchnummeriert.

<ol>
	<li>Eintrag 1</li>
	<li>Eintrag 2</li>
	<li>Eintrag 3</li>
</ol>

_{Ausgabe im Browser:}

Aufzählungszeichen für CSS <ol>:

decimal ⇒ (Standardwert)
lower-roman ⇒ (kleine römische Zahlen: i, ii, iii …)
upper-roman ⇒ (große römische Zahlen)
decimal-leading-zero ⇒ (mit führender Null: 01., 02., 06. …)
lower-greek ⇒ (griechisch: alpha, beta …)
lower-latin ⇒ (alphanumerisch klein: a., b., c. …)
upper-latin ⇒ (alphanumerisch groß)
armenian ⇒ (armenische Aufzählung)
georgian ⇒ (georgische Aufzählung)

Beispiel für verschachtelete geordnete Liste

<ol>
	<li>Einführung
		<ol>
			<li>Geschichte</li>
			<li>Stand Heute</li>
		</ol>
	</li>
	<li>So gehts weiter</li>
</ol>

_{Ausgabe im Browser:}

Definitionsliste <dl>

Die Definitiosliste „dl“ besteht aus zwei Teilen, einem „Definitionsterm = <dt></dt>“ und einer Beschreibung „Definitions Description = <dd></dd>“.

<dl>
	<dt>Begriff bzw. Definitionsterm</dt>
	<dd>Beschreibung oder Definitions Description</dd>
</dl>

_{Ausgabe im Browser:}

Geordnete und Definitionslisten kombiniert

Das „li“ Element wird lediglich zur Nummerierung der Arbeitsschritte genutzt. Die Arbeitsschritte selbst sind im <dt> der <dl> enthalten. Bei Arbeitsschritten, die zusätzlich erklärt werden, eignet sich z.B. die Kombination von <ol> und <dl>.

<ol>
	<li>
		<dl>
			<dt>100g Mehl</dt>
			<dd>Das Mehl in eine Schüssel geben</dd>
		</dl>
	</li>
	<li>
		<dl>
			<dt>50g Zucker</dt>
			<dd>Den Zucker mit dem Mehl vermengen</dd>
		</dl>
	</li>
	<li>
		<dl>
			<dt>3 Eier</dt>
			<dd>Eier hinzugeben und verrühren</dd>
		</dl>
	</li>
</ol>

_{Ausgabe im Browser:}

Bildbeschriftungen mit Definitionslisten

Definitionslisten eignen sich gut um Bilder zu beschriften oder Bildlegenden anzulegen. So lassen sich z.B. mit Hilfe von CSS, Galerien aufbauen.

<dl>
	<dt><img src="pics/gnome1.jpg" /></dt>
	<dd>Foto Quelle: &copy;nowhere</dd>
</dl>

_{Ausgabe im Browser:}

Ein Beisiel mit mehreren Bildern:

<dl>
	<dt><img src="pics/gnome1.jpg" /></dt>
	<dd>Beschreibung Bild 1 <small>&copy;nowhere</small></dd>
</dl>
<dl>
	<dt><img src="pics/gnome2.png" /></dt>
	<dd>Beschreibung Bild 2 <small>&copy;nowhere</small></dd>
</dl>
<dl>
	<dt><img src="pics/gnome3.png" /></dt>
	<dd>Beschreibung Bild 3 <small>&copy;nowhere</small></dd>
</dl>
<dl>
	<dt><img src="pics/gnome4.png" /></dt>
	<dd>Beschreibung Bild 4 <small>&copy;nohere</small></dd>
</dl>

Navigationsmenüs mit Listen

Ein mit Listen erstelltes Navigationsmenü bietet viele Gestaltungsmöglichkeiten mit CSS.

<ul>
	<li><a href="xyz.html" title="wichtig für Barrierefreiheit">XYZ</a></li>
	<li><a href="yxz.html" title="...">Weiter</a></li>
	<li><a href="yzx.html" title="...">Galerie</a></li>
	<li><a href="xzy.html" title="...">Kontakt</a></li>
</ul>

_{Ausgabe im Browser:}

Beispiel für ein Listenmenü formatiert mit CSS:

	<ul>
		<li><a href="xyz.html" title="wichtig für Barrierefreiheit">XYZ</a></li>
		<li><a href="yxz.html" title="wichtig für Barrierefreiheit">Weiter</a></li>
		<li><a href="yzx.html" title="wichtig für Barrierefreiheit">Galerie</a></li>
		<li><a href="xzy.html" title="wichtig für Barrierefreiheit">Kontakt</a></li>
	</ul>
	<p>Dies kann in css auch mit display: Block; und float: left; erreicht werden.</p>

css Code:

#navigation {
	border: 1px solid #000000;
}
#navigation ul {
	list-style-type: none;
}
#navigation ul li {
	display: inline;
}

_{Ausgabe im Browser:}

Die Grundelemente einer Tabelle mit table, tr, th, td

<table border="1px solid #000000">
	<tr>
		<th>Überschrift 1</th>
		<th>Überschrift 2</th>
		<th>Überschrift 3</th>
	</tr>
	<tr>
		<td>Daten 1.1</td>
		<td>Daten 1.2</td>
		<td>Daten 1.3</td>
	</tr>
	<tr>
		<td>Daten 2.1</td>
		<td>Daten 2.2</td>
		<td>Daten 2.3</td>
	</tr>
</table>

_{Ausgabe im Browser:}

Das caption-Element, Überschrift der Tabelle

Das „caption“ Element beschreibt die Tabelle kurz und gibt ihr einen Namen. Mit CSS ist es möglich, die Position festzulegen (caption-side: bottom) z.B. unten.

<table border="1px solid #000000"><caption>Beispieltabelle</caption>
	<tr>
		<th>Überschrift 1</th>
		<th>Überschrift 2</th>
		<th>Überschrift 3</th>
	</tr>
	<tr>
		<td>Daten 1.1</td>
		<td>Daten 1.2</td>
		<td>Daten 1.3</td>
	</tr>
	<tr>
		<td>Daten 2.1</td>
		<td>Daten 2.2</td>
		<td>Daten 2.3</td>
	</tr>
</table>

Das summary Attribut

Mit dem „summary“ Attribut kann man die Tabelle mit ausführlicheren Informationen versehen. Das hilft Menschen, die auf Geräte wie etwa einen Screen Reader angewiesen sind.

<table border="1px solid #000000" summary="Längere Beschreibung der Tabelle"><caption>Beispieltabelle</caption>
	<tr>
		<th>Überschrift 1</th>
		<th>Überschrift 2</th>
		<th>Überschrift 3</th>
	</tr>
	<tr>
		<td>Daten 1.1</td>
		<td>Daten 1.2</td>
		<td>Daten 1.3</td>
	</tr>
	<tr>
		<td>Daten 2.1</td>
		<td>Daten 2.2</td>
		<td>Daten 2.3</td>
	</tr>
</table>

thead, tfoot und tbody

den Kopfbereich einer Tabelle leitet „thead“ ein. Im „thead“ befinden sich eine oder mehrere Reihen, wobei die erste(n) die Überschriften „th“ erhalten.

In weiteren Zeilen können sich Grafiken o.ä. befinden z.B. bei Produktbeschreibungen. Im <th> ist die Überschrift der Spalte, im <td> eine Abbildung.

Für die Fußzeile der Tabelle ist „tfoot“ zuständig. Hier können ergänzende Informationen untergebracht werden. Die Bezeichnung dieser Fußzeile(n) erfolgt direkt nach dem „thead“.

Innerhalb von „tfoot“ befinden sich Datenzellen „td“.

Der Tabellenrumpf wird mit „tbody“ bezeichnet. Hier befinden sich die Daten der Tabelle. Bei Verwendung der drei Elemente ist die Reihenfolge wichtig, die Fußzeile wird vor dem Rumpf Ausgezeichnet.

<table summary="Diese Tabelle zeigt die mögliche Verwendung des thead-Elements" border="1px solid #000000">
<caption>Tabelle mit Kopf und Grafiken</caption>
<!--Beschreibung mit Überschrift-->
	<thead><!--Tabellenkopf-->
		<tr>
			<th>Produkt 1</th>
			<th>Produkt 2</th>
		</tr>
		<tr>
			<td><img src="pics/pic1.gif" alt="Beispiel 1" /></td>
			<td><img src="pics/pic2.gif" alt="Beispiel 2" /></td>
		</tr>
	</thead>
	<tfoot><!--Fußzeile-->
		<tr>
			<td>Mehr Infos: <a href="site1.htm">www.abc.de</a></td>
			<td>Mehr Infos: <a href="site2.htm">www.xyz.de</a></td>
		</tr>
	</tfoot>
	<tbody><!--Datenbereich-->
		<tr>
			<td>Beschreibung 1</td>
			<td>Beschreibung 2</td>
		</tr>
		<tr>
			<td>Nr 1</td>
			<td>Nr 2</td>
		</tr>
		<tr>
			<td>Info 1</td>
			<td>Info 2</td>
		</tr>
	</tbody>
</table>

_{Ausgabe im Browser:}

Tabellenformatierung

Mit „colspan“ fasst man mehrere Spalten zusammen, mit „rowspan“ mehrere Reihen. Bei Abständen und Polster kann „cellspacing“ und „cellpadding“ zu verwendet werden.

<table border="1px" cellspacing="1px" cellpadding="1px">
	<tr>
		<th>Überschrift 1</th>
		<th>Überschrift 2</th>
		<th>Überschrift 3</th>
	</tr>
	<tr>
		<td>Daten 1</td>
		<td>Daten 2</td>
		<td>Daten 3</td>
	</tr>
	<tr>
		<td colspan="2">2 Spalten Zusammengefasst</td>
		<td>Daten 3</td>
	</tr>
</table>

_{Ausgabe im Browser:}

Tabellenübersicht

<dl>
	<dt>table-layout</dt>
	<dd>Tabellenbreite Fix oder Ausgedehnt</dd>
	<dd>Standardwert: auto Alternativ: fixed</dd>
</dl>
<dl>
	<dt>border-collapse</dt>
	<dd>ermöglicht das Zeichnen von dünnen Linien</dd>
	<dd>Standardwert: separate Alternativ: collapse</dd>
</dl>
<dl>
	<dt>border-spacing</dt>
	<dd>fügt Abstände zwischen Tabellenzellen ein</dd>
	<dd>in gängigen Längenangaben: px, em, etc.</dd>
	<dd>Alternativ cellspacing, Funktioniert in allen Browsern</dd>
</dl>
<dl>
	<dt>padding</dt>
	<dd>Erzeugt ein Polster innerhalb der Tabellenzellen</dd>
	<dd>Angaben in den gängigen Längenangaben</dd>
	<dd>Ersetzt cellpadding</dd>
</dl>
<dl>
	<dt>empty-cells</dt>
	<dd>Bestimmt ob Leere Zellen gezeichnet werden</dd>
	<dd>Standardwert: hide Alternativ: show</dd>
	<dd>Für den Internet Explorer (&nbsp;) in Zelle eintragen</dd>
</dl>

_{Ausgabe im Browser:}

thead, tfood und tbody als Druckerhelfer

Hierzu muss die Tabelle mit „thead“ und „tfood“ Elementen beschrieben werden.

<table summary="Überschriften" border="1px solid #000000" style="thead {display: table-header-group;} tfood {display: table-footer-group;}">
<caption>Druckerhelfer mit thead u. tfood</caption>
<!--Beschreibung mit Überschrift-->
	<thead><!--Tabellenkopf-->
		<tr>
			<th>Überschrift 1</th>
			<th>Überschrift 2</th>
			<th>Überschrift 3</th>
		</tr>
	</thead>
	<tfoot><!--Fußzeile-->
		<tr>
			<td>Fußzeile 1</td>
			<td>Fußzeile 2</td>
			<td>Fußzeile 3</td>
		</tr>
	</tfoot>
	<tbody><!--Datenbereich-->
		<tr>
			<td>Daten 1</td>
			<td>Daten 2</td>
			<td>Daten 3</td>
		</tr>
                ..............
                ..............
                ..............
		<tr>
			<td>Daten 1</td>
			<td>Daten 2</td>
			<td>Daten 3</td>
		</tr>
	</tbody>
</table>

_{Ausgabe im Browser:}

html 4.x

Doctype

Strict

Text

Überschrift

Textabsatz

Fett

Kursiv

Underline

Zitate

blockquote

q

cite

Links

Externe Links

Interne Verweise

Grafiken als Links

Verlinkte E-Mail Adressen

Textlinks

Listen

Ungeordnete Listen <ul>

Geordnete Listen <ol>

Definitionsliste <dl>

Geordnete und Definitionslisten kombiniert

Bildbeschriftungen mit Definitionslisten

Navigationsmenüs mit Listen

Tabellen <table>

Die Grundelemente einer Tabelle mit table, tr, th, td

Das caption-Element, Überschrift der Tabelle

Das summary Attribut

thead, tfoot und tbody

Tabellenformatierung

Tabellenübersicht

thead, tfood und tbody als Druckerhelfer

Cloud