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



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 Uhrheber­rechte © von Fotos.

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>.

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 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>

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.
© mylime.info