HTML – Weitere grundlegende Tags

24.10.2016 05:31 Uhr

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=""https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Technique_of_dehydration_applied_in_a_foal.jpg/512px-Technique_of_dehydration_applied_in_a_foal.jpg"" align="left" width="80"alt="Technique of dehydration applied in a foal">

ergibt:

 

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.


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

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.htm">Link zu einer Unterseite</a>

 

Ergibt:
Link zu einer Unterseite


Beispiel 2 (mit URL):

<span style="font-family: Arial, Helvetica, sans-serif;">
<a href="http://www.google.de">Link zu Google</a>
</span>

 

Ergibt:
Link zu Google


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.

Schlagwörter: