html 4.x


Hypertext Markup Language, eine Auszeichnungssprache zur Formatierung von Webseiteninhalten.
FIXME



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>


FIXME


Überschrift


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




Textabsatz


Ein Textabsatz wird in einem <p></p> Container eingeschlossen.

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




Fett


Mit <strong></strong> können Textpassagen Fett hervorgehoben werden (veraltet).

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




Kursiv


Das <em></em> Element stellt den eingeschlossenen Text kursiv dar (veraltet).

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




Underline


Das <u></u> 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:

blockquote.jpg


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:

q.jpg


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-attribut.jpg


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:

cite-element.jpg



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 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>
        ...


FIXME



<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.





<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>


FIXME

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:

ul1.jpg



<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:

ul2.jpg



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:

ul3.jpg



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:

ol1.jpg


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:

ol2.jpg



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:

dl1.jpg



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:

ol-dl.jpg



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:

dl2.jpg



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>






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:

li-navi1.jpg



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:

li-navi2.jpg



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:

tab1.jpg



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:

tab2.jpg



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:

tab3.jpg



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:

tab4.jpg



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:

tab5.jpg

FIXME



Cloud