Referenzierung, Hyperlinks, Metainformationen & erste Schritte mit CSS

Referenzierungsarten


Wenn wir Inhalte einbinden / referenzieren, ist es wichtig, zwischen relativer und absoluter Referenzierung zu unterscheiden:

1. Absolute Referenzierung: Vollständige Pfadangabe

  • Beispiel: <img alt="Luise Adelgunde" src="http://gutenberg.spiegel.de/gutenb/autoren/bilder/gottschl.jpg" />

2. Relative Referenzierung: Hier gehen wir davon aus, dass sich die einzubindende Ressource in der Nähe unserer HTML-Datei befindet.

  • Beispiel: <img alt="Murakami " src="img/murakami.jpg" />

Hyperlinks


Hyperlink auf eine Webressource über einen URL (Uniform Resource Locator):

1. Absolute Referenzierung: Vollständige Pfadangabe

  • Syntax: <a href="Adresse (URL)">Text, über den auf die Adresse verlinkt wird</a>
  • Beispiel: <a href="http://www.hki.uni-koeln.de">HKI-Homepage</a>

2. Hyperlink auf eine lokale Ressource:

  • Beispiel: <a href="einDokument.pdf">Verweis auf ein PDF-Dokument</a>

Anker


Mit dem <a> Tag lassen sich Seitenbereiche ansteuern:

  • Beispiel:
    <a href="#seitenbereich">Hier klicken, um zum verlinkten Seitenbereich zu gelangen</a>
    <div style="height: 2000px;"></div>
    <div id="seitenbereich">Ich befinde mich am untersten Seitenrand</div>

Metainformationen


<meta> stellt zusätzliche Informationen über ein HTML-Dokument bereit. Das <meta>-Tag wird im Header des Dokumentes untergebracht und verfügt über kein schließendes Tag. Innerhalb des Tags repräsentieren Attribute und ihre Werte Informationen über das HTML-Dokument – sinnvoll z.B., um die Indizierung durch Suchmaschinen zu beeinflussen.

  • Beispiel:
    <meta name="description" content="Beschreibung des HTML-Dokumentes">
    <meta name="keywords" content="HTML, CSS, PHP, MySQL, JavaSript">
    <meta name="author" content="Benedikt Mildenberger">

Cascading Style Sheets (CSS)


Stylesheets (Formatvorlagen) dienen der einheitlichen und praktikablen Gestaltung von HTML-Seiten. Mit Hilfe von Stylesheets lassen sich Schriftarten, Farben, Hintergründe, […], global für ein HTML-Dokument oder eine Sammlung von HTML-Dokumenten definieren. Um Formatvorlagen zu definieren, bieten sich drei Möglichkeiten an: Inline-Styles, Stylesheets im Dokumentkopf und externe Stylesheets in einer separaten .css Datei.

Inline-Style:

Die einfachste Möglichkeit, die Darstellung eines Tags zu beeinflussen: Das style-Attribut wird in das Tag eingefügt: <h1 style="font-family: Arial; color: blue;">Diese Überschrift wird in der Schriftart Arial und blau dargestellt</h1>

Stylesheetdefinition im HTML-Dokument:

Die im Dokumentkopf definierten Stile haben Auswirkung auf Darstellung und Verhalten aller Tags des HTML-Dokumentes.
<style type="text/css">

h1 { color: red; font-family: Arial; }

h1:hover { color: blue; }

</style>

<h1>Diese Überschrift wird in der Schriftart Arial und rot dargestellt</h1>

Aufgabe

Bitte verwenden Sie alle oben beschriebenen Elemente sinnvoll, auf der von Ihnen in der letzten Stunde erstellten Seite.

Sie können mir Ihre Lösungen gerne per Email senden ( bmilden1@uni-koeln.de). Wenn Sie mir Ihre Hausaufgabenlösungen nicht senden, gehe ich davon aus, dass Sie die Inhalte der ersten Sitzung verstanden haben.