[edit] [comment] [remove] |2006-03-29| e1 # HTML - Einführung

HTML ist …

  • die Hypertext Markup Language
  • 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
  • mit der Version 4.01 am Ende der Entwicklung angelangt
  • mit anderen Sprachen erweiterbar (CSS, Javascript).
 

[edit] [comment] [remove] |2006-03-29| e2 # Textauszeichnung

Ein HTML-Dokument verwendet sog. Auszeichnungen, 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] |2006-03-29| 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] |2006-03-29| e4 # Grundgerüst

Das Grundgerüst eines HTML–Dokuments 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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 offensichtlich keine Element notiert werden.
  • besitzt einen Kopfbereich head, in dem nicht sichtbare Angaben zum Dokument stehen.
    • 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.
  • besitzt einen Rumpfbereich body, in dem der sichtbare Inhalt des Dokuments zusammengefasst ist.
 

[edit] [comment] [remove] |2006-03-31| e5 # Beispiel 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Zwei Frösche</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
    <meta name="author" content="anonymous"/>
    <meta name="created" content="2006-03-29"/>
    <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] |2006-04-02| e6 # Sonderzeichen & 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>

Sonderzeichen

Spezielle Zeichen, die

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

können mittels folgender unterschiedlicher Notation

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

Deutsche Umlaute sind in beiden Zeichensätzen enthalten, so dass auf deren früher übliche Darstellung (&auml; …) heute verzichtet werden kann.

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, sind sie als

  • &lt; … (<)
  • &gt; … (>)
  • &amp; … (&)
  • &quot; … (")

zu schreiben.

 

[edit] [comment] [remove] |2006-04-02| e7 # 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] |2006-04-03| e8 # Überschriften (headings) 

<h1>Überschrift</h1>
<h2>Überschrift</h2>
<h3>Überschrift</h3>
<h4>Überschrift</h4>
<h5>Überschrift</h5>
<h6>Überschrift</h6>

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

Überschrift

Überschrift

Überschrift

Überschrift
Überschrift

zentrierte Überschrift

 

[edit] [comment] [remove] |2006-04-03| e9 # Absätze (paragraph) 

<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] |2006-04-03| e10 # vorformatierter Text 

<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] |2006-04-03| e11 # Verweise (links)

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/inp/">INP</a>
<a href="../lec01/">Suche im neuen Fenster</a>

INP
Suche im neuen Fenster

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>

zur Markierung
...

Paragraph, auf dessen Beginn mittels id="mark" verwiesen werden kann.

Folie 12, letzte Vorlesung

 

[edit] [comment] [remove] |2006-04-03| e12 # 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 deine 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] |2006-04-03| e13 # 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] |2006-04-03| e14 # 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] |2006-04-03| e15 # Formularelemente

-ToDo-

 

[edit] [comment] [remove] |2006-04-03| e16 # CSS in 5 Min.

CSS ist …

  • Cascading Style Sheets
  • ähnlich den Formatvorlagen eines Textvararbeitungsdokuments.
  • eine Sammlung von Vorschriften zur Festlegung des Aussehens von XML/XHTML Elementen.
  • eine Steuereinheit für Seitenlayout, Textfluss und Print-Layout.
  • ein Hilfsmittel für Webseitengestaltung und Corporate Design.

Externe CSS Definition

Syntax 

<link rel="stylesheet" media="{target}" href="{url}" />

Beispiel 

<html>
  <head>
    <title>Webdokument</title>
    <link rel="stylesheet" media="screen" href="seite.css" />
    <link rel="stylesheet" media="print" href="druck.css" />
    <link rel="stylesheet" media="projection" href="slides.css" />
  </head>
  <body>
  </body>
</html>
Selector {property1: value1; ...; propertyN: valueN; }

; Selector: Auswahl der gewünschten Elemente (body, h1, table, …).

property
festzulegende Eigenschaft (color, border-style, …)
value
Eigenschaftswert (red, solid, …)

zentrale Einbindung in Dokument

Beispiel 

<html>
  <head>
    <title>Webdokument</title>
    <style type="text/css">
      body { font-weight:bold; font-family:Tahoma,sans-serif; font-size:1.2em; }
      h1, h2 { color:blue; font-style:italic; }
    </style>
  </head>
  <body>
  </body>
</html>

lokale Stilfestlegung in Elementen

Beispiel 

<html>
  <head>
    <title>Webdokument</title>
  </head>
  <body style="font-weight:bold; font-size:1.2em;">
    <h1 style="color:blue; font-style:italic;">...</h1>
  </body>
</html>

SelfHTML bietet eine gute Übersicht über alle CSS 2.1 Eigenschaften.

CSS Kurzreferenz

 

[edit] [comment] [remove] |2006-04-03| e17 # Verweise