Wegweiser

HTML - Links, Bilder und Tabellen


Autoren: A. Grella, D. Supper, Elektronikschule Tettnang.

Links (auch Hyperlinks) haben dem Internet sicherlich zum Durchbruch verholfen. Musste man früher bspw. aufwändig in Wörterbüchern nach Übersetzungen schauen gelingt dies heute mit einem Klick.

In dieser Einheit lernst Du das Erstellen von Links und das Einbinden von Bildern. Weiter erfährst Du alles wichtige über Sonder- und Steuerzeichen sowie Adressbereich. Abschließend lernst Du das Gestalten von Tabellen.

Links erstellen



mylime Informatik

Seitenanfang

Google

Sprungmarke

Sprungmarke

Ein Link (engl. hyper link) ist ein Quer­verweis zu einem anderen Dokument oder an eine andere Stelle im Dokument.:
<a href="index.php">mylime Informatik</a>
<a href="#top">Seitenanfang</a>

Wenn man die Seite in einem neuen Tab öffnen möchte kann man den Link mit einem Attribut versehen:
<a href="https://google.com" target="_blank">Google</a>

Will man an eine andere Stelle als den Seitenanfang im Dokument wechseln, spricht man von Sprungmarken. Hierzu vergibt man ID's:
<h3 id="bereich1">Sprungmarke</h3>
<a href="#bereich1">Sprungmarke</a>

Bilder einbinden



Ein Bild (engl. image) wird mit dem <img>-Tag eingebunden. Man beachte das es hierfür kein schließendes Tag gibt. Mit dem alt-Attribut wird ein alternativer Text angegeben. Dies ist wichtig für Blinde, falls das Bild fehlt und für Suchmaschinen.
<img src="img/bild1.jpg" alt="Wegweiser">
Hinweis: Typischerweise legt man für Bilder einen eigenen Ordner an. Beachte außerdem die Urheber­rechte © von Fotos.

pexels.com

Bilder können auch als Link verwendet werden. Dazu fügt man anstelle des Linktextes ein Bild ein. Wenn Du auf das Bild klickst, gelangst Du zum Seitenanfang.
<a href="#top"><img src="..."></a>

Sonder­zeichen und Adressbereiche



Zeichen html
♥ &hearts;
✉ &#9993
✐ &#10000;
✆ &#9990;
Zeichen html
😀 &#128512;
Ω &Omega;
© &copy;
€ &euro;

Wir verwenden in Europa den UTF-8-Zeichensatz. Darin enthalten sind auch die deutschen Sonderzeichen ä, ö, ü und ß.

Nichts desto trotz gibt es in HTML 5 jede Menge Sonderzeichen, welche über einen html-Code aufgerufen werden können.

Darüber hinaus gibt es auch noch Steuerzeichen: &nbsp; (engl. no breaking space) erzeugt ein geschütztes Leerzeichen, welches für Werte mit Einheiten benötigt wird. &shy; (engl. soft hyphen) ist ein bedingtes Trennzeichen, welches bei Bedarf die Silbentrennung vorgibt.

Adressbereiche werden mit dem folgendem Tag gekenn­zeichnet <address></address>.

Entspann dich erst mal ...



Amtliche Wetterstation - Der Wetterstein

Stein bewegt sich Sturm ⚐
Stein ist ruhig Windstille 😷
Stein ist nass Regen ☔
Stein ist trocken kein Regen ⛅
Stein unsichtbar Nebel 🌫
Stein wirft Schatten Sonne ☀
Stein ist weiß Schnee ☃
Stein run­terge­fallen Erdbeben 🌋
Stein leuchtet auf Gewitter ⚡
Stein fehlt geklaut

Tabellen gestalten



Zur Gestaltung von Tabellen verwendet man das <table>-Tag <table></table>, <tr>-Tag (table row) <tr></tr> und das <td>-Tag (table data) <td></td>:

<table>
  <tr>
    <td>S</td>
    <td>M</td>
    <td>L</td>
  </tr>
  <tr>
    <td>14,40&nbsp;&euro;</td>
    <td>16,20&nbsp;&euro;</td>
    <td>17,90&nbsp;&euro;</td>
  </tr>
</table>

S M L
14,40 € 16,20 € 17,90 €

Man beachte, dass Tabellen auf mobilen Endgeräten schnell unübersichtlich werden. Aus diesem Grund verwendet man wenig Tabellen und falls notwendig bedingte Trennzeichen &shy;.

Übung 1 drei verlinkte Internetseiten

In dieser Übung wird die bestehende Internetseite um zwei zusätzliche Seiten erweitert.

  1. Erstelle auf der Seite /html/index.html Links in Form einer ungeordneten Liste zu den Seiten /html/osi-modell.html und /html/tcp-ip-modell.html, welche Du später erstellst.
  2. Erstelle einen Unterordner /html/img in dem Du für jede Internetseite ein oder mehrere Bilder speicherst.
    Lampen
  3. Binde die Abbildungen sinnvoll auf der Seite ein.
  4. Erstelle auf der Seite /html/index.html eine Tabelle in der du die beiden Modelle vergleichst. Teste die Seite für eine Auflösung der Iphone 7.
    Strg +  ⇧  + I
    Füge für eine einwandfreie Darstellung bedingte Trennzeichen ein.
Internetseite
Internetseite
  1. Erstelle die Seite /html/osi-modell.html auf welcher Du detailliertere Erklärungen zum OSI-Modell gibst.
  2. Binde die Verlinkung der drei Seiten ein.
  3. Füge mindestens ein Bild ein.
  4. Erstelle einen externen Link zur Cisco Network Academy. Der Link soll in einem neuen Fenster öffnen.
  1. Erstelle die Seite /html/tcp-ip-modell.html auf welcher Du detailliertere Erklärungen zum TCP-IP-Modell gibst.
  2. Binde die Verlinkung der drei Seiten ein.
  3. Füge mindestens ein Bild ein, sowie den Link zur Cisco Network Academy ein.
  4. Erstelle für alle drei Seiten einen Adressbereich, bei welchem Du Sonderzeichen gezielt einsetzt.
  5. Teste die Links auf den Seiten.
  6. Überprüfe Deine Seite mit dem Entwicklertool des Browsers auf Fehler: Strg +  ⇧  + I.
Internetseite
<ul>
  <li><a href="...">Home</a></li>
  <li><a href="...">OSI-Modell</a></li>
  <li><a href="...">TCP-IP-Modell</a></li>
</ul>
<address>
  &#10000; IT-Berufsschule ... <br>
  ...
</address>

Übung 2 Welche Aussage ist wahr?

Wähle die korrekten Aussagen aus.

Nenne zwei Attribute, die zum <a>-Tag gehören.
Wähle zwei Antworten.

  1. src
  2. alt
  3. href
  4. target


Nenne zwei Attribute die zum <img>-Tag gehören.
Wähle zwei Antworten.

  1. href
  2. src
  3. alt
  4. target



Programmiere:
♥ kostet 3 €
Wähle eine Antwort.

  1. &hearts; kostet 3&nbsp;&euro;
  2. &hearts; kostet 3&euro;
  3. &herz; kostet 3&nbsp;&euro;
  4. &hearts; kostet 3&nbsp;EUR


Programmiere:
Donau-
dampfschifffahrt

  1. Donau-dampfschifffahrt
  2. Donau&shy;dampfschifffahrt
  3. Donaudampfschifffahrt
  4. Donau&dampfschifffahrt


Ein Anwender möchte folgende Tabelle:

NameVorname

Er programmiert:
<table><tr><td>Name</td><td>Vorname</td></tr></table>
Nenne die Anzahl der Fehler. Wähle eine Antwort.

  1. null
  2. eins
  3. zwei
  4. drei


Ein Anwender möchte folgende Tabelle:

ElementeAnzahl

Er programmiert:
<table><tr><td>Elemente</td><td>Anzahl</td></tr>
Nenne die Anzahl der Fehler. Wähle eine Antwort.

  1. null
  2. eins
  3. zwei
  4. drei

Wortliste und Satzbausteine



der Link, -s Ein Link (engl. hyper link) <a href="...">Bezeichnung</a> ist ein Quer­verweis zu einem anderen Dokument oder an eine andere Stelle im Dokument. Unter dem href-Attribut wird eine Internetadresse oder Speicherort angegeben.
die Sprung­marke, -n Sprung­marken sind Links, welche an eine andere Stelle im gleichen Dokument verweisen. Hierbei wird unter dem href-Attribut eine ID (z.B. #top) angegeben.
das Bild, -er Mit dem <img>-Tag <img src="img/bild1.jpg" alt="Wegweiser"> werden Bilder eingebunden. Unter dem src-Attribut wird der Speicherort ange­geben. Mit dem alt-Attribut wird ein alternativer Text für bspw. blinde Menschen notiert.
das Sonder­zeichen, ~ Sonderzeichen können über einen html-Code eingefügt werden. Dieser Beginnt mit einem Kaufmannsund & und endet mit einem Semikolon ;. Auch Steuerzeichen werden so notiert.
die Tabelle, -en Zur Gestaltung von Tabellen verwendet man das <table>-Tag, das <tr>-Tag (table row) und das <td>-Tag (table data). Mit den Attributen <td colspan="..."></td> und <tr rowspan="..."></tr> können Zellen reihen- und zeilen­weise zusammen­gefasst werden.