(X)HTML

• Extensible Hypertext Markup Language

• Hypertext Markup Language

• Text wird der Reihe nach geschrieben

• Ergbnis: Kilometerlanger Buchstabenwurm

• Linearität passt nicht zum vernetzten Wissen

• Nichtlineares Medium zur Präsentation vernetzter Einheiten von Texten

• Ergänzung des Textes um Verweise

• Ausgezeichnungssprache

• Ergänzung des Textes um Elemente, auch als Tags bezeichnet

Tags

Kopfbereich

Inhaltsbereich

• Rot: Start-Tag

• Blau: End-Tag

<elementname>Elementeinheit<elementname>

Ja, das <br /> Tag hat keinen Inhalt und muss deshalb im Start-Tag mit einem / wieder geschlossen werden

• <p>…</p>: erzeugt einen Absatz

• <u>…</u>: unterstreicht den Satz

• <b>…</b>: schreibt den Text fett

• <br />: erzeugt einen Zeilenumbruch

Elemente die zuletzt geöffnet werden, müssen zuerst geschlossen werden

<u><b><i>…</i></b></u>

• Elemente können ergänzende Eigenschaften haben, die als Attribute bezeichnet werden. diese besitzen wiederrum eigene Werte (im Englischen Value)

• Attribute stehen im öffnenden Tag und ihre Werte werden nach einem Gleichheitszeichen angegeben und sind dabei in Anführungszeichen

<elementname attribut1=”Wert” attribut2=”Wert”></elementname>

• <img …/>: Tag zum einbinden von Bildern

• src: Attribut zum angeben des Bilddateinamens

• alt: (Attribut) Angabe eines Alternativtextes

• title: (Attribut) Text, der angezeigt wird wenn die Maus über dem Bild ist

• width: (Attribut) Angabe der Bildbreite

• height: (Attribut) Angabe der Bildhöhe

UTF-8

<a href=”./Verzeichnis/Dateiname”>Linktext</a>

• a steht für anchor (Anker, Befestigung)

• Attribut href bezeichnet die Adresse

• Dahintersteht der angezigte Text auf der Webseite (Linkname)

<!--…-- >

• CSS: Cascading Stylesheet

• Trennung von Struktur und Darstellung einer Website.

• Struktur verbleibt im xhtml, Darstellung wird zentral in CSS definiert

• Block-Elemente erzeugen einen eigenen Absatz im Textfluss

• Alle Block-Elemente werden mit einem Abstand vor und nach dem Element versehen

• <h1> bis <h6>: Überschriftenklassen

• <p>: Absatz

• <blockquote>: Längere Zitate

• <table>: Erzeugt eine Tabelle

• Inline-Elemente erzeugen keinen Absatz im Textfluss

• Inline-Elemente sind als untergeordnete, innere Elemente für Block-Elemente gedacht

• <b>: Texte wird Fett formateirt

• <img>: Einbinden eines Bildes

• <br />: Zeilenumbruch

• <a>: Hyperlink

• Sie können in den meisten Fällen normalen Text und weitere Inline- Elemente enthalten, jedoch keine Block-Elemente

• Dürfen gemäß normgerechter Schreibweise von HTML nicht direkt im body-Element vorkommen, sondern nur innerhalb von Block-elementen

• <table>…</table>: Beginn/Ende der Tabelle

• <tr>…</tr>: Zeile einer Tabelle (row)

• <td>…</td>: Tabellendaten

• <th>…</th>: Alternativ zu <td>…</td> für die Kopfzeile

<table style=“border:1px solid; width:100%“>

• Definition einer Tabelle mit Rahmenbreite 1 Pixel und Breite 100% des Browserfensters

<table style=“border:1px solid; width:500px“>

• Definition einer Tabelle der Breite 500 Pixel

<table style=“background-color:blue;“>

• Definition einer Tabelle mit der Hintergrundfrabe Blau (dies kann auch für einzelne Zeilen oder Zellen genutzt werden#

Hinsweis

Die Tabelleneigenschaften border und width sind Elemente des style Attributes und werden in diesem Fallk durch CSS-Inline-Formatierung definiert

• <thead>…</thead>: Tabellenkopf

• <tbody>…</tbody>: Datenbereich

• <tfoot>…</tfoot>: Tabellenfuß

<table style=“border: dotted“>

• Tabellenrahmen (gepunktet)

<table style=“border-spacing: 15px; border: dotted“>

• Abstand zwischen den Zellen und Tabellenrahmen

<td style=“padding: 15px“>

• Abstand zwischen Zellenrand und Zelleninhalt

Der Abstand zwischen den Tabellenzellen kann ein- (border-collapse: separate) und ausgeschaltet (border-collapse: collapse) werden

border-collapse: collapse

• Kein Abstand zwischen Tabellenzellen

border-collapse: separate; border-spacing: 5px

• Abstand zwischen Tabellenzellen eingeschaltet (Standard), Abstandsangabe über border-spacing

Äußerer Rahmen

<table style=“border: 1px soild black“>

• Rechteck

<table style=“border-top: 1px soild black“>

• Oberer Rand

<table style=“border-bottom: 1px soild black“>

• Unterer Rand

<table style=“border-left: 1px soild black“>

• Linker Rand

<table style=“border-rigth: 1px soild black“>

• Rechter Rand

• dotted: Definiert einen gepunkteten Rahemn

• dashed: Definiert einen gestrichelten Rahmen

• double: Definiert einen doppelten Rahmen

• groove: Definiert einen 3D gerillten Rahemn

• ridge: Definiert einen 3D gefurchten Rahmen -> Ausprobieren check nicht was dat sein soll

<td style=

• “text-align: left”>: Links

• “text-align: right”>: Rechts

• “text-align: center”>: Horizontal zentriert

• “vertical-align: justify”>: Blocksatz

• “vertical-align: top”>: Oben

• “vertical-align: bottom”>: Unten

• “vertical-align: middle”>: Vertikal zentriert, d.h. Mittig. Achtung: nicht center!

• “vertical-align: baseline”>: Alle Zellen einer Zeile, die dieses Attribute enthalten werden auf einer gemeinsamen Basislinie ausgerichtet

• Definition von 3 Spalten unterschiedlicher, aber fester Breite

• Definition von 3 Spalten mit gleicher Breite. span = spannen

• Definition mit prozentualem Breitenverhältnis. Spalte 1 nimmt 10% der TAbellenbreite ein, Spalte 2 70% und Spalte 3 20%

• colspan=”2”: Zelle erstreckt sich über 2 Spalten

• rowspan=”3”: Zelle erstreckt sich über 3 Zeilen

<table border=”1”>

<caption>

Tabellenüberschrift

</caption>

<tr>…</tr>

</table>

• Definiert eine Tabellenüberschrift

<caption style=”text-align: left”>

• Überschrift links

<caption style=”text-align: right”>

• Überschrift rechts

• <ul>…</ul>: Unsortierte Liste. Die Reihenfolge der Objekte ist beliebig

• <ol>…</ol>: Sortierte Liste. Die Reihenfolge der Objekte ist wichtig

• <dl>…</dl>: Definitionsliste. Die Liste besteht aus Begriffen und deren Definition

<ul>

<li>Text1</li>

<li>Text2</li>

</ul>

• Das Tag <ul> (unordered list) leitet die Aufzählung ein, </ul> beendet die Aufzählung. In die Tags <li> bzw. </li> (list item) wird jeweils ein Listenpunkt eingeschlossen

<ol>

<li>Text1</li>

<li>Text2</li>

</ol>

• Das Tag <ol> (ordered list) leitet die Aufzählung ein, </ol> beendet die Aufzählung. In die Tags <li> bzw. </li> (list item) wird jeweils ein Listenpunkt eingeschlossen

<dl>

<dt>Ausdruck</dt>

<dd>Beschreibung</dd>

</dl>

• Das Tag <dl> (definition list) leitet die Definitionsliste ein, </dl> beendet sie. In der Liste werden Paare der beiden folgenden Tags aufgeführt: <dt> (definition term) gibt den zu definierenden Ausdruck <dd> (definition description) formatiert den erläuterten Text

• Mehrere Elemente wie Text, Grafiken, Tabellen usw., können in einem gemeinsamen Bereich durch <div>…</div> eingeschlossen werden

• Dieses allgemene Element bewirkt nichts weiter als das es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften

• Es ist dazu gedacht, um mit Hilfe von CSS formatiert zu werden