HTML (HyperText Markup Language)

Arbeitsumgebung und vorgeschlagene Tools

Da HTML ein Standard des W3C ist, gibt es viele verschiedene Tools, um Webseiten und Bildinhalte zu erstellen und diese anzuzeigen. Aus technischen und menschlichen Gründen sind Open Source Programme für die Verwendung im Unterricht ideal. Da der Kurs leider auf Microsoft Windows (und nicht auf einer von mir bevorzugten Linuxdistribution) basiert schlage ich folgende Tools vor:

  • Texteditor: Notepad++
    • Einstieg ist einfach, daher geht keine Zeit für das Erlernen verloren; dennoch sehr mächtig und flexibel
    • auch für CSS, Javascript, PHP und viele andere Sprachen geeignet
    • [Strg]+[Alt]+[Shift]+X lädt die aktuell editierte Seite in Firefox
    • Codevervollständigung mit [Strg]+[Space]
    • Wortvervollständigung mit [Strg]+[Shift]+[Space]
    • Unterstützt Zen Coding
  • Webbrowser: Firefox oder Chromium
    • schnell, einfach zu bedienen, relativ sicher und sehr gute Implementierung der W3C Standards
    • schnelle Source-Ansicht per [Strg]+[u]
    • kann den Source einzelner Frames anzeigen
    • Personal Bookmark leiste zum schnellen Öffnen von Seiten
    • Bookmark drag & drop
    • zahllose Erweiterungen, die den HTML Code einer Seite lokal auf Fehler überprüfen und beim Entwickeln helfen
    • IE und andere Browser sollten aber auch zum Testen der Seiten verwendet werden
  • FTP Client: Filezilla
    • kann neben FTP auch sichere Übertragungsprotokolle wie SFTP
    • der beste mir bekannte FTP Client für Microsoft Windows
  • Bildbearbeitungsprogramm: GIMP (GNU Image Manipulation Program)
    • sehr mächtiges Bildbearbeitungsprogramm, dass vor allem fuer die Aufbereitung von Bildern für Websteiten, aber auch für den Druck sehr gut geeignet ist
    • gutes Tool zur Farbauswahl fü HTML und CSS

Alle Programme stehen für mehrere Betriebssysteme (Windows, Linux,...) zur Verfügung. Um einen reibungslosen Ablauf zu gewährleisten, steht während dem Kurs ein Linuxrechner mit dem Apache Webserver und PHP und MySql Unterstützung zur Verfügung. Weiters ist auf dem Rechner ein FTP und ein SSH Server installiert, um beim Upload der Dateien keine Zeit zu verlieren.

Besprochene Tags

Grundgerüst

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <meta content="application/xhtml+xml; charset=utf-8" http-equiv="content-type" />
  <meta name="author" content=""/>
  <title></title>
  <!--<link rel="stylesheet"
            type="text/css"
            media="all"
            href="css/style.css" />-->
  <!--<script type="text/javascript" src="js/file.js"></script>-->
  <!--<link rel="alternate"
            type="application/rss+xml"
            title="Subscribe RSS-feed"
            href="rss/file.rss" />-->
  <!--<link rel="shortcut icon" type="image/png" href="icon.png" />-->
</head>

<body>

</body>

</html>

Grundgerüst einer XHTML 1.0 Datei, einer XHTML 1.1 Datei und einer HTML 5 Datei:
template_xhtml10_transitional.html
template_xhtml11.xhtml
template_html5.html

Absatz (paragraph) und Zeilenumbruch (break)

<p></p>
<br />

Überschriften (header)

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

Horizontale Linie (horizontal rule)

<hr />

Unsortierte Liste (unsorted list) und nummerierte Liste (ordered list)

<ul>
  <li></li>
  <li></li>
  ...
</ul>

<ol>
  <li></li>
  <li></li>
  ...
</ol>

Link (anchor) und Bild (image)

<a href="ziel.html">Linktext auf Website</a>
<img src="" alt="" width="" height="" />

Programmcode und Keyboardeingaben

<pre></pre> (preformattet Text) dient zur Inkludierung von mehrzeiligem Programmcode (Leerzeichen und Zeilenwechsel werden so angezeigt, wie sie im HTML Source stehen. Code in einer Zeile wird mit <code></code> dargestellt und für Tastatureingaben verwendet man <kbd></kbd>. 
<pre></pre>
<code></code>
<kbd></kbd>

Kommentar

Ein Kommentar dient der Erklärung von Inhalten oder der Struktur, ist aber in der Webseite nicht sichtbar. Zeigt der User allerdings den Quellcode der Seite in seinem Browser an, so sieht er sehr wohl den Kommentar. Kommentare sind auch praktisch, um unfertige Teile "auszublenden".

<!-- this is a comment -->
<!--
  this comment
  spans over more
  than one row
-->

Frames

<frameset cols="pt,*">
  <frame name="" src="">
  <frame name="" src="">
<noframes>
  <body>
  ...
  </body>
</noframes>
</frameset>

Tabellen

<table width="100%">
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td></td>
  </tr>
  <tr valign="top">
    <td rowspan="2"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Image Maps

Kreis (Circle)

Ein Kreis erhaelt 3 Koordinatenwerte x1,y1,rad.
x1 - Abstand des Kreis-Mittelpunkts in Pixel von links
y1 - Abstand des Kreis-Mittelpunkts in Pixel von oben
rad - Radius des Kreises in Pixel

Viereck (Rectangle)

Ein Viereck erhaelt 4 Koordinatenwerte x1,y1,x2,y2.
x1 - Abstand der linken Ecke oben in Pixel von links
y1 - Abstand der linken Ecke oben in Pixel von oben
x2 - Abstand der rechten Ecke unteren in Pixel von links
y2 - Abstand der rechten Ecke unteren in Pixel von oben

Polygon

Ein Polygon erhaelt jeweils 2 Koordinatenwerte fuer einen Punkt x[n],y[n].
x[n] - Abstand eines Punktes in Pixel von links
y[n] - Abstand eines Punktes in Pixel von oben

Sonstiges

Der Restbereich wird mit shape="default" angesprochen.
Falls für einen Bereich keine Referenz angegeben werden soll verwendet man nohref="". 

<map name="map1">
  <area href="file1.html"
        title="Circle"
        coords="x1,y2,radius"
        shape="circle" />
  <area href="file2.html"
        title="Rect"
        coords="x1,y1,x2,y2"
        shape="rect" />
  <area href="file3.html"
        title="Poly"
        coords="x1,y1,x2,y2,x3,y3"
        shape="poly" />
  <area href="file4.html" title="Default" shape="default" /> 
</map> 
<img usemap="#map1" alt="Imagemap" width="" height="" src="" />

Imagemap Beispiel zum Ansehen und Herunterladen: image_map_template.html

Formulare

Simples Beispielformular zum Ansehen und Herunterladen: form_template.html

Einfügen von HTML Code aus einer anderen Datei

Bietet einem der verwendete Webserver die Möglichkeit, die Skriptsprache PHP zu verwenden, so ist es möglich, andere Dateien zu importieren.

<?php include("toc.php"); ?>

Sonstige tags

Als generischer Behälter für Blöcke (zum Beispiel zur Verwendung in Verbindung mit CSS Klassen und IDs) dient div (division) in Verbindung mit einer. Die Verwendung von div ist allerdings nur sinnvoll, wenn dadurch mehrere Blöcke semantisch (inhaltlich sinnvoll) gruppiert werden, da sonst lediglich unnötige Zusatztags eingefügt werden. Das gewählte id Attribut sollte dabei nicht die Formatierung, sondern den Inhalt der division so gut wie möglich beschreiben.

<div id="..."></div>

Parallel zu div verwendet man span für "inline" Elemente, also innerhalb eines Absatzes

<span id="..."></span>

Zitate

<quote></quote>
<cite></cite>

Textstellen können entweder mit em (emphasized) betont oder mit strong (strong emphasized) stark betont werden. Mit var werden Variable hervorgehoben.

<em></em>
<strong></strong>
<var></var>

Sonderzeichen (Character Entities)

Um sicherzustellen, dass die eingegebenen Sonderzeichen auch in möglichst jedem Browser korrekt angezeit werden, empfiehlt es sich, diese als "Character Entities" in den Sourcecode zu schreiben. Dabei sind bereits deutsche Buchstaben wie "ä", "ö", "ü" und "ß" als Sonderzeichen zu betrachten. Außerdem kann man durch die Eingabe als Character Entity einfach Buchstaben darstellen, die man nicht auf der eigenen Tastatur findet. Folgend sei die zur Eingabe vieler solcher Zeichen nötige Denkweise kurz erklärt:
Jeder Buchstabe kann umgeben vom kaufmännischen & und einem einfachen ; durch Eingabe eines Codes erzeugt werden. Am einfachsten benützt man dafür vorgesehene Abkürzungen, die einem recht einfachen Schema folgen. So ist zum Beispiel der Code für den Buchstaben "Umlaut ä" &auml. Folglich kann man den Buchstaben "Umlaut ä" durch Eingabe von &auml; erzeugen. Den Großbuchstaben "Umlaut Ä" bekommt man demnach durch Eingabe von &Auml;. Andere deutsche und internationale Buchstaben folgen auch dem Schema &BuchstabeAkzent;. Hier ein paar Beispiele:

&auml; => ä
&Auml; => Ä
&ouml; => ö
&Ouml; => Ö
&uuml; => ü
&Uuml; => Ü
&szlig; => ß
&eacute; => é
&Eacute; => É
&egrave; => è
&Egrave; => È
&ecirc; => ê
&Ecirc; => Ê
&ccedil; => ç
&Ccedil; => Ç
&ntilde; => ñ
&Ntilde; => Ñ

Folgend noch ein paar Beispiele von anderen Sonderzeichen. In der Regel sollten auch die Codes, welche diese herstellen, einfach nachzuvollziehen und damit leicht merkbar sein:

&euro; => €
&lt; => <
&gt; => >

Hierbei ist es hilfreich zu verstehen, dass lt die Abkürzung von "lighter than" (= kleiner als) und gt jene von "greater than" (= größer als) ist. Da es eine enorm große Auswahl dieser Zeichen gibt, empfehle ich folgende englischsprachige Seite, um hin und wieder nach einem Zeichen nachzuschlagen:
http://tlt.its.psu.edu/suggestions/international/web/codehtml.html

Link kurze Beschreibung
https://developer.mozilla.org/ Eine der besten Seite zum Erlernen von www-Technologien (mehrsprachig)
http://www.free-webhosts.com/ Vergleich von freien Webhosting Services (Englisch!)
https://www.loopia.com/ Günstigster mir bekannter Anbieter von Internet Domain Namen
http://gs.statcounter.com/ Browser Statistiken
http://commons.wikimedia.org/ Quelle von Hintergrundbildern und Photos, die man frei unter Einhaltung verschiedener Public Licences verwenden kann.
http://validator.w3.org/ Online html Validierungsservice des W3C. Die Webseite steht in Englischer Sprache zur Verfügung. Eine deutschsprachige Alternative findet sich unter http://validator.de.selfhtml.org/

Copyright © 2009-2023 Gerald Senarclens de Grancy
Das Anfertigen von Kopien, deren Verwendung und Verteilung sind erlaubt und erwünscht, solange dieses Copyrightstatement in allen Kopien angefügt bleibt.
Die vorliegende Dokumentation wurde ausschließlich in meiner Freizeit als Service für ehemalige Seminarteilnehmer erstellt. Daher wird sie lediglich so wie sie ist zur Verfügung gestellt, ohne jegliche vertragliche oder gesetzliche Gewährleistung und ohne den Anspruch auf Korrektheit oder für irgendeinen Zweck geeignet zu sein.

Haftungsausschluss: Da ich keinerlei Einfluss auf den Inhalt der Seiten, zu denen ich von meiner Homepage linke, habe, übernehme ich auch keinerlei Haftung für diese Seiten.

[Valid XHTML 1.1!]