BSI: HTML 1

Kölsch of the Week!

Inhaltsangabe:

  1. Grundsätzlicher Aufbau eines HTML Dokuments
  2. Erste Tags zur Formatierung von Text
  3. Weitere grundlegende Tags
  4. Der grundsätzliche Aufbau einer HTML5 Seite

Grundsätzlicher Aufbau eines HTML Dokuments

Für alle HTML-Dokumente gilt grundsätzlich: Jede Datei beginnt und endet mit der Metainformation html, da der Inhalt der gesamten Datei den Regeln der Markupsprache HTML folgt:

<html>...</html>

Das Dokument ist immer in zwei Teile geteilt. Der erste Teil (Header) wird verwendet, um allgemeine Angaben zum Dokument festzuhalten:

<head> ... </head>

In dem zweiten Teil, dem sogenannten Body, stehen alle Informationen, die im Anzeigebereich des Browsers dargestellt werden sollen:

<body> ... </body>

Innerhalb des Headers wird u.a. die Beschriftung des Browserfensters festgelegt. Dies erfolgt mittels des Tags

<title> ... </title>

Ein HTML Dokument (Version 4) sieht also grundsätzlich wie folgt aus:

<html>
    <head>
        <title>Titel der Seite</title>
    </head>
    <body>
        Inhalt der Seite
    </body>
</html>

Paare aus festgelegten "Starttags" und "Endtags" ( ... ) verleihen dem dazwischen stehenden Text eine bestimmte (logische) Eigenschaft, die bei HTML meist Konsequenzen auf die Darstellung des Textes hat. Welche Tags verfügbar sind und welche Eigenschaften sie aufweisen, ist in der HTML 4.01 Specification des W3C festgelegt. Diese Art der Metainformationscodierung lässt unmittelbar ein Problem entstehen: die Zeichen, die genutzt werden, um Metainformation von Information zu trennen (< und >), können nicht problemlos als Zeichen ausgegeben werden. Zu diesen sogenannten "nicht darstellbare Zeichen" gehört auch das & und alle nationalen Sonderzeichen. Um diese Zeichen dennoch nutzbar zu machen, wird ein Ersetzungsmechanismus eingesetzt, der als ‚benannte Zeichen’ oder Character Entities bezeichnet wird. Hierbei wird eine Ersetzung durch ein Kaufmanns-Und (&) eingeleitet und durch ein Semikolon (;) beendet. Zwischen diesen Markern wird ein Kommandowort eingefügt, das die Darstellung eines bestimmten "nicht darstellbaren Zeichens" ermöglicht:

&Kommandowort;
Zeichen Ersetzung
< &lt;
> &gt;
ä &auml;
Ü &Uuml;
ß &szlig;
å &aring;
® &reg;
¥ &yen;
... ...

Weitere Informationen zu Elementen auf w3schools.

Zum Seitenanfang

HTML-Erste Tags zur Formatierung von Text

Eine wichtige Gruppe von Tags beschäftigt sich mit der Festlegung von Schriftattributen:

<i> Dies ist ein Text </i>

⇒ Dies ist ein Text

<b> Dies ist ein Text </b>

⇒ Dies ist ein Text

<u> Dies ist ein Text </u>

⇒ Dies ist ein Text

<code> Dies ist ein Text </code>

⇒ Dies ist ein Text

Grundsätzlich gilt bei allen Starttag - Endtag Sequenzen:

(Kombinationen sind möglich, aber Überlappungen sind nicht erlaubt!)

<i>
     <u>
           Dies ist ein Text
      </u>
</i>

ist möglich. (Dies ist ein Text)

<i>
   <u>
         Dies ist ein Text
</i>
   </u>

ist falsch .

(Da HTML von sehr vielen Personen mit extrem geringen Computerkenntnissen verwendet wird, sind die Browser, die es umsetzen extrem tolerant. Dies ist ein Text (<i> <u> Dies ist ein Text </i> </u>) wird daher stillschweigend korrekt umgesetzt. Das ändert aber nichts daran, daß es falsch ist und es sich anzugewöhnen, bringt Sie später in Schwierigkeiten ...)

Weitere Informationen zu Schriftattributen auf w3schools.

Bitte überprüfen Sie Ihre HTML-Codes mit folgendem Tool.

Ähnlich agieren die "hn" Tags, die Überschrifteneffekte produzieren, wobei gilt: je größer "n", desto geringer der Grad der Hervorhebung. (<h1> ... </h1> bis <h6> ... </h6>). Einzuprägen als "Header erster Ordnung" bis "Header sechster Ordnung".

Weitere Informationen zu Überschriften auf w3schools.

Schließlich noch zwei Beispiele für einfache Tags, die nur aus einem Starttag bestehen:

<br> ("break") führt zu einem Zeilenumbruch, ohne wie <p> Leerraum einzufügen;

<hr> bricht die Zeile um und zeichnet eine horizontale Linie:

Schließlich gibt es noch Tags, die überhaupt erst durch Ihre Attribute wirken, wie das <font> ... </font> Tag, das beim Starttag vor allem zwei Attribute anbietet:

Attribute von "<font>":

  • size, mit Hilfe dessen die Größe zwischen "1" (= sehr klein) und "7" (= sehr groß) gewählt werden kann.
  • color, das als Wert Farbbezeichnungen akzeptiert, bei denen wir uns vorerst auf die englischen Namen der Grundfarben beschränken wollen.

Eine Anmerkung: Dass die Größen hier in derart abstrakten "Stufen" und nicht z.B. als "3,742 mm" angegeben werden, ist ein Grundprinzip von HTML. Grundsätzlich stellen Angaben zu den visuellen Eigenschaften Wünsche dar, die ein Browser nur innerhalb einer gewissen Bandbreite befriedigt. Als Beispiele zum eingeführten Tag font

<font color="red">Dies ist ein Text</font>

⇒ Dies ist ein Text

<font size="1">Dies ist ein Text</font>

⇒ Dies ist ein Text

<font size="6">Dies ist ein Text</font>

⇒ Dies ist ein Text

<font size="6" color="green">Dies ist ein Text</font>

⇒ Dies ist ein Text

Wichtige Anmerkung: Dateien, die HTML Texte enthalten, müssen eine der beiden Extensions "*.html" oder "*.htm" enthalten. Für welche Sie sich entscheiden ist vergleichsweise unwichtig: Innerhalb eines Systems von HTML Seiten sollte es aber jeweils nur eine der beiden sein.

Zum Seitenanfang

HTML - Weitere grundlegende Tags

Einfügen eines Bildes in ein HTML-Dokument

Ein Bild wird über das Tag <img> eingefügt. Diesem Tag können/müssen mehrere Attribute zugewiesen werden, damit das Bild entsprechend den Wünschen des Webdesigners korrekt angezeigt wird. img-Attribute:

  • src="...": gibt die Quelle an, wo das Bild gespeichert ist.

(1) Dies kann eine relative Pfadangabe sein (z.B.: src="bilder/bild.jpg") oder (2) eine absolute (z.B. eine URL: src="http://sisu.typepad.com/sisu/spongebob.jpg") sein.

  • align="...": gibt die Ausrichtung des Bildes an.

(1) align="left" stellt das Bild am linken Browserrand, (2) align="right" analog rechts und (3) align="top" richtet das Bild am oberen Rand aus (3) align="bottom" am unteren Rand

Wichtiger Hinweis: align="center" funktioniert nicht. Wir lernen in einer der folgenden Stunden, wie man die Bilder dennoch zentrieren kann!

  • width="...":

Wenn nicht die Originalmaße des Bildes beibehalten werden soll, kann beispielsweise mit width="150" die Breite des Bildes auf 150 Pixel verändert werden.

  • height="...": Wie width="..." analog für die Höhe.
  • alt="...": Wichtiges Attribut zur Beschreibung und alternativen Darstellung.

Beispiel:

<img src=""http://www.uni-koeln.de/hbi/archaeoafrica/web/Gallery/Brandberg-04.jpg"" align="left" width="80"alt="Brandberg">

ergibt:

Brandberg

Hinweis für die praktische Arbeit: Das Arbeiten mit Bildern und Text kann am Anfang etwas Probleme bereiten, weil Sie einige wichtige Gestaltungselemente in diesem frühen Stadium noch

nicht kennen.

Weitere Informationen zu Bildern auf w3schools.

Der Paragraph <p>

Das Tag <p> .... </p> beschreibt einen Absatz im Fließtext. In der Regel ist es ein doppelter Zeilenumbruch (<br>) u.U. mit leichter Einrückung. Beispiel:

<p> Dies ist ein Absatz </p>
<p> Dies ist ein zweiter Absatz </p>

Dies ist ein Absatz

Dies ist ein zweiter Absatz

Weitere Informationen zu Paragraphen auf w3schools.

Hyperlinks - Das Herzstück jedes HTML-Dokuments

Die grundlegende Einheit für HTML ist stets eine Datei. Wird ein Dateiname mit einer bestimmten Syntax aus HTML umschlossen, konstruiert der Browser daraus einen Mechanismus, der durch "Anklicken" des angegebenen Textes, diese Datei lädt und idR auf dem Bildschirm darstellt. Dies wird i.d.R. durch das "a" Tag mit dem Attribut "href" erreicht, wobei "a" für "Anchor" steht und "href" für "Hypertext reference". Die Grundform eines solchen Verweises auf eine andere Datei lautet:

<a href="Dateiname">Anzuklickender Text</a>

Beispiel 1 (relativer Pfad):

<a href="unterseite/unterseite1.html">Link zu einer Unterseite</a>

Ergibt: Link zu einer Unterseite Beispiel 2 (mit URL):

<a href="http://www.google.de">Link zu Google</a>

Ergibt: Link zu Google

Weitere Informationen zu Hyperlinks auf w3schools.

Hinweise zu den verschiedenen Arten von Hyperlinks

Wie an den vorhergehenden Beispielen ersichtlich ist, können nicht nur Dateien referenziert werden, die in der selben Ordnerstruktur wie die eigene HTML-Datei liegen (mit sogenannten "Lokalen Links") sondern auch Dateien, die auf einem beliebigen Server innerhalb des Internets liegen. Zu diesem Zweck werden die Dateinamen/-pfade durch sogenannte "URL"s "Uniform Resource Locator" ersetzt. (Salopp gesprochen ist dies eine einheitliche Namenskonvention, die die Dateien aller durch das WWW verbundenen Rechner unterscheidbar und eindeutig ansprechbar bzw. "adressierbar" macht, soweit sie für das WWW bereitgestellt werden.) Beispielsweise hat das Tutanchamun- Bild, das Ihnen zu Übungszwecken zur Verfügung steht, folgende URL: http://www.hki.uni-koeln.de/sites/all/files/courses/3414/HKI_Tut.jpg Dies entspricht der abstrakten Form: Protokoll://Domain[:Port]/Pfadangabe/Datei Dabei bedeuten:

  • "Protokoll": Innerhalb des WWW gibt es verschiedene Regelwerke, nach denen Rechner miteinander kommunizieren können, um Daten auszutauschen. Diese Regelwerke werden als "Protokolle" bezeichnet. Für unsere Zwecke verwenden wir bis auf weiteres immer das Protokoll "http" (= "Hypertext Transfer Protocol")
  • "Domain". Im Prinzip geht es hier um den Namen eines Rechners, der entweder als sogenannte IP Nummer spezifiziert wird (vier Zifferngruppen, getrennt durch Punkte) wie 130.75.109.86 (ein willkürlich ausgewählter Rechner der Uni Hannover) oder "mnemonische", d.h. leichter zu merkende Namen wie eben "www.hki.uni-koeln.de", d.h. der Rechner "www", der zur Historisch-Kulturwissenschaftlichen Informationsverarbeitung ("HKI") an der Universität Köln (uni-koeln) in Deutschland (de) gehört. Im Prinzip. In der Praxis ist es ein wenig komplizierter, da Rechner auch unter verschiedenen Namen unterschiedliche Dienste anbieten können.
  • "Port". Eine Art von Durchwahlnummer, unter der eine bestimmte Funktion des Rechner zu erreichen ist. Dieses zum Teil sehr komplexe Konstruktionen wird verwendet, um mit einem Rechner unterschiedliche Bedürfnisse zu befriedigen. --> mehr dazu
  • "Pfadangabe". Eine Pfadangabe wie in den Regeln des Betriebssystems des Servers festgelegt. Allerdings immer durch den Slash ("/") gegliedert, nie durch den Backslash ("\").
  • "Datei". Richtig, der Dateiname.

Die URLs können also genau wie Dateinamen verwendet werden, um Dateien innerhalb des gesamten WWW anzusprechen.

Zum Seitenanfang

HTML – Der grundsätzliche Aufbau einer HTML 5 Seite

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5 Grundgerüst</title>
  </head>
  <body>
            HTML5 Tags
  </body>
</html>

Die <!DOCTYPE> Deklaration muss immer als erstes geschrieben werden, es ist die Anweisung für einen Parser/Browser um welche HTML Version es sich handelt.

Bitte speichern Sie dieses Grundgerüst unter einem, dem Inhalt ihrer Datei entprechenden Namen mit der Endung "*.html" ab. Achten Sie darauf, dass im Speicherdialog kein Dateityp, z.B. .txt vorgegeben wird. Die veraltete Endung "*.htm" ist zwar auch möglich, findet heutzutage kaum noch Verwendung und wird aus diesem Grund in diesem Kurs nicht genutzt. Anschließend füllen Sie das Grundgerüst mit Leben, speichen erneut und überprüfen das Ergebnis in einem Browser! Wenn Sie eine neue Seite erstellen, sollten Sie stets sicher stellen, dass das HTML-Gerüst IMMER so wie oben aussieht.

Weitere Informationen zum grundsätzlichen Aufbau auf w3schools.

Sitzungsaufgabe

Bitte bearbeiten Sie nun die 2. Sitzungsaufgabe!

Hausaufgabe

Hier finden Sie die 2. Hausaufgabe.

Zum Seitenanfang