[edit] [comment] [remove] |2007-04-04| e1 # HTML - Einführung

HTML ist …

  • die Hypertext Markup Language – eine Auszeichnungssprache
  • von Web-Gründer Tim Berners-Lee 1990 am CERN entwickelt worden
  • standardisiert (W3C)
  • die "lingua franca" des Web.
  • als Klartextformat plattform– und softwareunabhängig.
  • eine Sprache, die von einem sog Parser verarbeitet wird.
  • mit anderen Sprachen sinnvoll erweiterbar (CSS, Javascript).
  • mit der Version 4.01 zunächst am Ende der Entwicklung angelangt.
  • im Hinblick auf XHTML als Nachfolger als abgeschlossen betrachtet.
  • 2007 mit der Bildung einer Arbeitsgruppe des W3C wieder reaktiviert und in Richtung HTML 5.0 weiterentwickelt.
 

[edit] [comment] [remove] |2007-04-04| e2 # Textauszeichnung

Ein HTML-Dokument verwendet sog. Auszeichnungen, d.h. zusätzliche Symbole, um bestimmten Textabschnitten eine besondere Bedeutung zu geben. 

[Überschrift]Zwei Frösche[Ende Überschrift]
[Paragraph]Auf der Insel Hondo in Japan lebten zwei Frösche. 
Einer hauste in einem Graben außerhalb der Stadt Osaka, 
während - der andere in einem kristallklaren Strom wohnte, 
nahe bei Kioto.[Ende Paragraph]

Derartig ausgezeichneter Text (Markup) wird von einem sog. Parser gelesen, interpretiert und auf syntaktische Korrektheit geprüft. Die Textauszeichnungselemente in HTML werden Tags genannt und sind in spitze Klammern eingeschlossen. 

<h1>Zwei Frösche</h1>
<p>Auf der Insel Hondo in Japan lebten zwei Frösche. 
Einer hauste in einem Graben außerhalb der Stadt Osaka, 
während - der andere in einem kristallklaren Strom wohnte, 
nahe bei Kioto.</p>
 

[edit] [comment] [remove] |2007-04-04| e3 # Syntax

Ein HTML-Dokument besteht aus Elementen. Die allgemeine Syntax eines HTML-Elements lautet: 

<element attr1="wert1" ... attrN="wertN">Inhalt</element>

Ein Element besteht aus:

  • dem Start-Tag <element...>, das von einem spitzen Klammerpaar (<>) eingeschlossen ist und einen eindeutigen Elementnamen besitzt.
  • den Attributen attrI="wertI", die durch Leerzeichen voneinander getrennt sind und deren Reihenfolge irrelevant ist. Jedes Attribut setzt sich zusammen aus
    • dem Attributnamen, der innerhalb des jeweiligen Tags eindeutig sein muss.
    • dem '='-Zeichen
    • dem Attributwert, der von Anführungszeichen (") eingeschlossen ist.
  • dem Inhalt des Elements, der aus Text besteht und/oder weitere HTML-Elementen einschliesst.
  • dem Ende-Tag, ebenfalls eingeschlossen von einem spitzen Klammerpaar (<>) und einem dem Elementnamen vorangestellten Vorwärtsschrägstrich (Slash) '/'.

Inhaltslose HTML-Elemente können auf das Endetag verzichten und stattdessen die folgende Schreibweise verwenden. 

<element attr1="wert1" ... attrN="wertN" />

Ein Element kann ein Anderes vollständig beinhalten. 

<x> abc <y> def </y> ghi </x>

Überlappende Elemente sind nicht zulässig. 

<x> abc <y> def </x> ghi </y>
 

[edit] [comment] [remove] |2007-04-04| e4 # Kommentare

HTML erlaubt die Verwendung von Kommentaren innerhalb von Dokumenten. 

<!-- Einzeiliger Kommentar. -->
  
<!-- Kommentar, der sich über
   mehrere Zeilen 
   erstreckt. -->

Kommentare …

  • dienen dem Autor zur Formulierung von Anmerkungen.
  • werden vom Parser überlesen.
  • werden vom Browser nicht angezeigt.
  • können Quelltext temporär verbergen.
  • dürfen nicht innerhalb von Tags oder Attributwerten verwendet werden.
 

[edit] [comment] [remove] |2007-04-04| e5 # Grundgerüst

Das Grundgerüst eines HTML–Dokuments 

<!DOCTYPE html>
<html>
  <head>
    <title>Dokument Titel</title>
  </head>
  <body>
    <!-- sichtbarer Inhalt des Dokuments -->
  </body>
</html>
  • beginnt mit einer Definition des Dokumenttyps (DTD). Mittels dieser wird die Menge der zugelassenen Elemente einschliesslich der verwendbaren Attribute festgelegt.
  • beinhaltet ein äusseres Element html, das sog. Wurzelelement (root). Ausserhalb dessen dürfen keine Element notiert werden.
  • besitzt einen Kopfbereich head, in dem nicht sichtbare Angaben zum Dokument stehen.
  • besitzt einen Rumpfbereich body, in dem der sichtbare Inhalt des Dokuments zusammengefasst ist.
 

[edit] [comment] [remove] |2007-04-04| e6 # Beispiel 

<!DOCTYPE html>
<html>
  <head>
    <title>Zwei Frösche</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
    <meta name="author" content="anonymous"/>
    <link rel="stylesheet" type="text/css" href="/css/main.css"/>
  </head>
  <body>
    <h1>Zwei Frösche</h1>
    <p>Auf der Insel Hondo in Japan lebten zwei Frösche. 
       Einer hauste in einem Graben außerhalb der Stadt Osaka, 
       während - der andere in einem kristallklaren Strom wohnte, 
       nahe bei Kioto.</p>
  </body>
</html>

froesche.htmtl

 

[edit] [comment] [remove] |2007-04-04| e7 # Dokumentkopf

Das head-Element stellt übergeordnete Informationen zum aktuellen Dokument bereit. Dazu gehört schlicht alles, was nicht als Dokumentinhalt gilt.

  • das Titelelement title muss angegeben werden und wird
    • in der Titelzeile des Browsers angezeigt.
    • bei Verweisen, Lesezeichen (bookmarks) und Reitern (tabs) verwendet.
    • von Suchmaschinen ausgewertet.
  • Metaelemente meta machen üblicherweise Angaben hinsichtlich Autor, Erstellungsdatum, Schlagwörter und den verwendeten Zeichensatz.
  • Verweise link's stellen logische Beziehungen zu anderen Dokumenten und Hilfsdateien her.
  • Skriptelemente script werden entweder mit vollständigem Inhalt oder als externe Verweise notiert. Dieses Element darf nicht in verkürzter leerer Notation geschrieben werden.
 

[edit] [comment] [remove] |2007-04-04| e8 # Zeichensätze

Zeichensätze

Heutige Browser arbeiten mit einer Zeichencodierung, die auf Übersetzungstabellen zugreift. Die Menge der Zeichen in einer Tabelle wird Zeichensatz genannt.

  • ASCII (128 Basiszeichen)
  • ISO 8859-1 (Latin-1) … meist voreingestellt.
  • UTF-8 (Unicode)

Im Kopfbereich des HTML-Dokuments kann der zu verwendende Zeichensatz eingestellt werden. 

<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
 

[edit] [comment] [remove] |2007-04-04| e9 # Sonderzeichen

Sonderzeichen

Spezielle Zeichen, die

  • nicht im aktuellen Zeichensatz vorhanden sind
  • auf der Tastatur keine Entsprechung haben

können mittels folgender unterschiedlicher Notation geschrieben werden. So gilt bspw. für das Sonderzeichen '€':

  • &name; (&euro;)
  • &#dezimalzahl; (&#128; )
  • &#xhexadezimalzahl; (&#x20AC;)

Deutsche Umlaute sind in den beiden Zeichensätzen ISO 8859-1 und UTF-8 enthalten, so dass auf deren früher praktizierte Schreibweise (&auml; …) heute üblicherweise verzichtet wird.

Der gewählte Zeichensatz ist wie oben beschrieben im Dokumentenkopf zu vereinbaren.

Hier ist eine HTML-Zeichenreferenz.

spezielle HTML-Zeichen

HTML-Parser behandeln die Zeichen (< > &) als spezielle, Markup beschreibende Symbole. Wenn nun genau jene Zeichen innerhalb eines Textes verwendet werden sollen, sind unter Verwendung einer der drei Notationen

Zeichenbenanntdezimalhexadezimal
" &quot; &#34; &#x0022;
& &amp; &#38; &#x0026;
' &apos; &#39; &#x0027;
< &lt; &#60; &#x003C;
> &gt; &#62; &#x003E;

zu schreiben.

 

[edit] [comment] [remove] |2007-04-04| e10 # HTML Module

Strukturmodul
html, head, body, title
Textmodul
abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var
Hypertextmodul
a
Listenmodul
dl, dt, dd, ol, ul, li
Formularmodul
button, fieldset, form, input, label, legend, select, optgroup, option, textarea
Tabellenmodul
caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr
Bildmodul
img
Skriptmodul
noscript, script
weitere Module:
Object, Presentation, Edit, Bidirectional Text, Image Map, Events, Metainformation, Stylesheet, Link, Base (siehe XHTML 1.1)
 

[edit] [comment] [remove] |2007-04-04| e11 # Dokumentrumpf

Der Inhalt eines HTML–Dokuments wird in das body-Element, den Dokumentrumpf geschrieben.

  • Ein clientseitiges Programm liest den Inhalt mittels eines eingebauten Parsers und präsentiert ihn auf geeignete Weise.
  • Die Darstellung muss nicht zwangsläufig visuell erfolgen (Rendern), sondern kann bspw. auch in einer Sprachausgabe resultieren.
  • Die visuelle Darstellung durch Webbrowser ist heute die mit Abstand häufigste Präsentationsform von Dokumentinhalten.
  • Ein Browser hält sich üblicherweise nicht an Leerzeichen und Zeilenumbrüche im laufenden Text, sondern stellt jene komprimiert als einfache Leerzeichen dar.
  • Eine gewünschte Textstrukturierung ist also mit entsprechenden Auszeichnungselementen zu bewerkstelligen.
  • Gewünschtes Aussehen ist dagegen nicht mittels HTML, sondern durch separate Stilmittel (CSS) zu realisieren.
  • Die visuelle Anordnung der HTML-Element im body–Bereich erfolgt nach einem Prinzip, in dem jene Element als Rechtecke (Boxen) aufgefasst werden.
  • In diesem Sinne werden Blockelemente und Inline–Elemente unterschieden.
    • Blockelemente …
      • sind höher strukturierte, oft mehrzeilige Elemente.
      • haben einen gewissen Abstand zu anderen Blockelementen.
      • können i.A. weitere Blockelemente und Inline–Elemente beinhalten.
    • Inline–Elemente
      • treten im laufenden Text auf.
      • können lediglich andere Inline–Elemente beinhalten.
 

[edit] [comment] [remove] |2007-04-04| e12 # Überschriften (headings)

Überschriften sind wichtige HTML-Elemente, die – wie in Textverarbeitungsprogrammen – zur Bildung hierarchischer Textstrukturen verwendet werden. Es gibt Überschriften von erster bis sechster Ordnung.

<h1>Überschrift erster Ordnung</h1>
<h2>Überschrift zweiter Ordnung</h2>
<h3>Überschrift dritter Ordnung</h3>
<h4>Überschrift vierter Ordnung</h4>
<h5>Überschrift fünfter Ordnung</h5>
<h6>Überschrift sechter Ordnung</h6>

<h3 align="center">zentrierte Überschrift dritter Ordnung</h3>

Überschrift erster Ordnung

Überschrift zweiter Ordnung

Überschrift dritter Ordnung

Überschrift vierter Ordnung

Überschrift fünfter Ordnung
Überschrift sechter Ordnung

zentrierte Überschrift dritter Ordnung

 

[edit] [comment] [remove] |2007-04-04| e13 # Absätze

Das p–Element …

  • zeichnet Textabsätze (paragraph) aus.
  • wird vom Browser selbständig mit gewissen Abständen untereinander versehen.
  • darf nur Inline–Elemente beinhalten.
  • überlässt die Zeilenumbrüche im Textfluss dem jeweiligen Browser. 
<p style="width:50%">Absatz Absatz Absatz Absatz Absatz Absatz Absatz 
Absatz hier<br/>Zeilenumbruch Absatz Absatz Absatz
Absatz hier&nbsp;bitte&nbsp;keinen&nbsp;Zeilenumbruch
Absatz Absatz Absatz Absatz Absatz.</p>
<p align="center" style="width:50%">zentrierter Absatz 
zentrierter Absatz zentrierter Absatz</p>
<hr style="width:50%; height:3px; background-color:red;" />
<p align="right" style="width:50%">rechtsbündiger Absatz 
rechtsbündiger Absatz rechtsbündiger Absatz</p>
<p align="justify" style="width:50%">Absatz im Blocksatz  
Absatz im Blocksatz Absatz im Blocksatz Absatz im Blocksatz</p>

Absatz Absatz Absatz Absatz Absatz Absatz Absatz Absatz hier
Zeilenumbruch Absatz Absatz hier bitte keinen Zeilenumbruch Absatz.

zentrierter Absatz zentrierter Absatz zentrierter Absatz.

rechtsbündiger Absatz rechtsbündiger Absatz rechtsbündiger Absatz

Absatz im Blocksatz Absatz im Blocksatz Absatz im Blocksatz Absatz im Blocksatz.

 

[edit] [comment] [remove] |2007-04-04| e14 # vorformatierter Text

Gelegentlich ist es unerlässlich, Leerzeichen und Zeilenumbrüche selbst zu bestimmen.

Hierfür stellt HTML sein pre–Element zur Verfügung

<pre>
|  x  |  y  |
|=====|=====|
| 1.0 | 2.4 |
| 2.0 | 6.3 |
|  :  |  :  |
| 8.0 |98.7 |
|=====|=====|
</pre>

|  x  |  y  |
|=====|=====|
| 1.0 | 2.4 |
| 2.0 | 6.3 |
|  :  |  :  |
| 8.0 |98.7 |
|=====|=====|

 

[edit] [comment] [remove] |2007-04-04| e15 # Verweise

Verweise sind ein primäres Merkmal üblicher Webdokumente. Links können auf

  • externe Webdokumente (entfernte Webserver, andere Domain)
  • interne Webdokumente (dieselbe Domain)
  • lokale Stellen im aktuellen Quelldokument

verweisen.

externe Verweise 

<a href="http://google.de">Suche</a>
<a href="http://google.de" target="_blank">Suche im neuen Fenster</a>

Suche
Suche im neuen Fenster

interne Verweise 

<a href="/learn/web/">Webtechnologien</a>
<a href="../lec01/">Letzte Vorlesung</a>

Webtechnologien Letzte Vorlesung

lokale Verweise 

<a href="#mark">zur Markierung</a>
...
<p id="mark">Paragraph, auf dessen Beginn mittels id="mark" verwiesen
werden kann.</p>

<a href="../lec01/#e12">Folie 12, letzte Vorlesung</a>

Folie 12, letzte Vorlesung

 

[edit] [comment] [remove] |2007-04-04| e16 # Listen

HTML unterstützt drei verschiedene Arten von Listen

  • Aufzählungslisten
  • nummerierte Listen
  • Definitionslisten

Aufzählungsliste (unordered list)

<ul>
  <li>eins</li>
  <li>zwei</li>
</ul>

  • eins
  • zwei
Mit dem Attribut type="[circle|square|disc]" kann der Bullet-Type festgelegt werden.

nummerierte Liste (ordered list)

<ol>
  <li>eins</li>
  <li>zwei</li>
</ol>

  1. eins
  2. zwei
Mit dem Attribut type="[a|A|i|I]" kann eine alphabetische oder römische Nummerierung jeweils klein/gross festgelegt werden. Das Attribut start="[zahl]" setzt den Startwert auf einen von "1" abweichenden Wert fest.

verschachtelte Listen 

<ol>
  <li>eins
    <ul>
      <li>eins-eins</li>
      <li>eins-zwei</li>
    </ul>
  </li>
  <li>zwei</li>
</ol>

  1. eins
    • eins-eins
    • eins-zwei
  2. zwei

Definitionslisten 

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

HTML
Hypertext Markup Language
CSS
Cascading Style Sheets

 

[edit] [comment] [remove] |2007-04-04| e17 # Tabellen

Einfache Tabelle 

<table border="1">
  <tr>
    <th>Kernobst</th>
    <th>Steinobst</th>
  </tr>
  <tr>
    <td>Apfel</td>
    <td>Pflaume</td>
  </tr>
  <tr>
    <td>Birne</td>
    <td>Kirsche</td>
  </tr>
</table>

Kernobst Steinobst
Apfel Pflaume
Birne Kirsche

Die Tabellenelemente in HTML sind 

<table align="[left | center | right]"              ... Ausrichtung
       border="[number]"                            ... Rahmenstärke
       cellpadding="[number]"                       ... Innenrandabstand
       cellspacing="[number]"                       ... Zellenabstand
       rules="[none | groups | rows | cols | all]"  ... Gitternetzarten
       width="[number]">

<tr    align="[left | center | right | justify]"    ... horiz. Ausrichtung
       valign="[top | middle | bottom | baseline]"> ... vert.  Ausrichtung

<th|td align="[left | center | right | justify]"    ... horiz. Ausrichtung
       valign="[top | middle | bottom | baseline]"  ... vert.  Ausrichtung
       colspan="[number]"                           ... Spaltenweite
       rowspan="[number]">                          ... Zeilenweite

Der Aufbau komplexer Tabellen ist anschaulich bei SELFHTML beschrieben. Ebenso deren Gestaltung mittels CSS.

 

[edit] [comment] [remove] |2007-04-04| e18 # Grafiken

Grafiken

  • können nicht direkt eingebettet werden. Sie werden über externe Dateien referenziert.
  • unterstützte Grafikformate sind gif, jpeg, png.
  • können je nach Grösse eine nicht unerhebliche Ladezeit verursachen.

Beispiel 

<img src="mobius.jpg" width="246" height="448" alt="Möbius-Streifen"/>
<img src="mobius.jpg" width="123" height="224" alt="Möbius-Streifen"/>

Möbius-Streifen Möbius-Streifen

Grafiken werden als Inline-Elemente im laufenden Text eingefügt. Mittels des Attributs align="[left | right]" kann das Bild links- oder rechtsbündig positioniert werden.

Grafiken können von entfernten Webservern referenziert und als Verweise benutzt werden. 

<a href="http://www.google.de/intl/de_de/images/logo.gif" alt="Google"/>
<a href="http://de.wikipedia.org/wiki/Hauptseite">
  <img src="wikipedia.png" alt="Wikipedia"/>
</a>

Google Wikipedia

 

[edit] [comment] [remove] |2007-04-04| e19 # Universalattribute

Universalattribute können in (fast) allen HTML–Elementen verwendet werden. 

<blockquote id="quote01" lang="en" class="quotes" 
            title="Sign hanging in Einstein's office at Princeton"
            style="border:solid 2px black; background-color:lightgray">
Not everything that counts can be counted, and not everything 
that can be counted counts.
</blockquote>

Not everything that counts can be counted, and not everything that can be counted counts.

  • id–Attribut
    • definiert einen eindeutigen Bezeichner für ein Element.
    • bildet den Zielanker für einen lokalen Verweis.
    • sein Wert muss innerhalb eines Dokuments eindeutig sein.
    • ermöglicht den Elementzugriff seitens CSS (ID-Selector).
    • ermöglicht den Zugriff seitens Javascript (getElementById()).
  • class–attribut
    • Vergabe eines oder mehrerer Klassennamen für ein Element.
    • Zuweisung von CSS-Stilklassen.
    • Elementklassifizierung für externe Programme.
  • lang–Attribut
    • definiert die Spracheigenschaften für den Text eines Elements.
  • style–Attribut
    • beinhaltet CSS–Formatierungsinformation.
  • title–Attribut
    • liefert Zusatzinformation zu dem Inhalt eines Elements,
      • die visuell als Tooltip angezeigt wird.
      • die Screenreader vorlesen können.
 

[edit] [comment] [remove] |2007-04-05| e20 # Links zum Thema