of {$slidecount} ½ {$title}, {$author}

Lecture 02

Prof. Dr.-Ing. S. Gössner

FH Dortmund - University of Applied Sciences

Inhalt

HTML - Einführung

HTML ist …

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>

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:

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>

Kommentare

HTML erlaubt die Verwendung von Kommentaren innerhalb von Dokumenten. 

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

Kommentare …

Grundgerüst

Das Grundgerüst eines HTML–Dokuments 

<!DOCTYPE html>
<html>
  <head>
    <title>Dokument Titel</title>
  </head>
  <body>
    <!-- sichtbarer Inhalt des Dokuments -->
  </body>
</html>

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

Dokumentkopf

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

Zeichensätze

Zeichensätze

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

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>

Sonderzeichen

Sonderzeichen

Spezielle Zeichen, die

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

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.

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)

Dokumentrumpf

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

Ü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

Absätze

Das p–Element …

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

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

Verweise

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

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

Listen

HTML unterstützt drei verschiedene Arten von Listen

Aufzählungsliste (unordered list)

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

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

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.

Grafiken

Grafiken

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

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.

Links zum Thema