Links

Verknüpfungen

HyperLinks oder Verknüpfungen sind das Herz von elektronischen Dokumenten.
Sie ersetzen die Verweise, welche in Papier ungern verwendet wurden,
weil das dann händisches Blättern und suchen erfordert.
Z.B. Siehe Abbildung 2.1.4 auf Seite 12

Ein Ziel innerhalb einer Seite wird mit id="<name>" gekennzeichnet.

Verknüpfungen fangen bei HTML mit <a> wie "Anchor" oder Anker an.
Innerhalb des Verweises, macht es Sinn meist drei Schlüsselwörter zu nutzen.

Die drei wichtigsten Atribute für eine Verknüpfung

href="URL" wird genutzt um ein Ziel anzugeben.
Das Ziel kann relativ innerhalb einer Html-Seite angegeben werden,
beginnend mit einem Trennzeichen z.B. wie folgt #<name>
z.B. <a href="#source" >Quellen</a>

Relativ macht auch noch Sinn innerhalb der eigenen Webseite.
z.B. <a href="./html.html">Html-Spielereien</a>

Spätestens außerhalb der eigenen Web-Seite sollte es absolut angegeben werden.
z.B. <a href="https://metager.de/">metager.de</a>-Suchmaschine.

Es ist auch möglich auf der externen Zielseite zu einer bestimmten Stelle zu gehen.
Dafür ist jedoch die id herauszubekommen und man sollte daran denken
das nichts beständiger ist als die Veränderung und
man keinen Einfluss auf externe Seiten hat.

title="Hover" wird genutzt, um eine Kurz-Beschreibung
darzustellen, wenn man mit den Mauszeiger drüber geht.
z.B. <a href="#source" title="das Quellenverzeichnis" >Quellen</a>

target="…" wird genutzt um die Reaktion beim Anklicken zu beschreiben.

Vier mögliche Reaktionen beim Klicken auf Verknüpfungen

Der Parameter für das Attribut target= kann wie folgt lauten:

"_blank" öffnet Adresse im neuen Tab-Fenster (_blank page),
bestehender Tab bleibt erhalten (sinnvoll für externe Verknüpfungen)
Beispiel einer externen Verknüpfung:
Die bankOfScotland.de - Bank of Scotland
ist nicht die rbs.co.uk - Royal Bank of Scotland.

Den entsprechenden Code habe ich zur besseren Übersicht formatiert
und sieht wie folgt aus: Wer genau hinsieht findet noch Fehler.
Vor dem rbs.co.uk befindet sich ein Leerzeichen und dahinter ein Umbruch.
Besser wäre also …>rbs.co.uk</a>.

Die &nbsp;
<a href  = "https://www.bankofscotland.de/"  
   title = "bank_of_scotland" 
   target= "_blank" >bankOfScotland.de
</a> - Bank of Scotland <br> 
ist nicht die &nbsp;
<a href  = "https://www.rbs.co.uk/"
   title = "royal bank_of_scotland"
   target= "_blank" > rbs.co.uk 
</a> - Royal Bank of Scotland.

"_self" öffnet im selben Rahmen.
"_parent" öffnet im übergeordneten Rahmen
"_top" öffnet wie goto

Da das nur Nuancen sind, verwende ich fast nur den Parameter _top.
Dies ist z.B. hilfreich, wenn man sich innerhalb der eigenen Web-Seite bewegt.
Hier ist eine Verknüpfung zur Übersicht dieser Seite
und zur Übersicht wo es um den Inhalt der Webseite geht.

Der entsprechende Code sieht wie folgt aus:

Hier ist eine Verknüpfung zur 
&nbsp;<a  href="#uebersicht"  title="Üebersicht an Themen" 
target="_self">Übersicht</a>&nbsp; dieser Seite <br> und zur
&nbsp;<a  href="./content.html#topics"  title="Üebersicht an Themen"> 
Übersicht</a>&nbsp; wo es um den Inhalt der Webseite geht.

Man sieht, das bei der zweiten internen Verknüpfung _self fehlt.
Das stellt kein Problem dar, da es die Default-Einstellung ist.
Im zweiten Beispiel wird eine andere Seite und dann
ein bestimmter Abschnitt ausgewählt.

Das Ziel ist vorher markiert worden.
Hier innerhalb einer Überschrift mit <h2 id="topics">Übersicht</h2>.
Möchte man innerhalb eines Textes eine Marke setzen,
kann man folgendes machen. <span id="topics"></span>

Optional wäre z.B. folgendes:

style="text-decoration:none"; Wobei ich grundsätzlich (um es nicht zu vergessen) jeden Parameter mit ; abschließen würde.

Bzw. der Code dazu sieht wie folgt aus (einmal mit ; und einmal ohne ;).

Hier ist eine Verknüpfung <a href="#ueberschriften"; title="Hyperlink Beispiel"; 
target="_self";>gehe zur 1. Überschrift</a> zum Testen.

Bzw. eine externe Verknüpfung: <a href="https://www.bankofscotland.de/" 
title="bank_of_scotland" target="_blank"> bank of scotland </a>

https://www.w3schools.com/tags/att_a_target.asp
https://www.w3schools.com/tags/tag_a.asp

Bild im Text

Ohne weitere Atribute, wird ein Bild wie ein Buchstabe gehandhabt.
D.h. Bei Bildern wird innerhalb einer Verknüpfung , statt der Beschreibung, das Bild via <img … > eingefügt. Also <a … > <img … > </a>.

Es kann ich zum Einen ein (Thumb)-Bild sofort im Text darstellen …
Sorry nocheinmal mit richtiger Verknüpfung und zum Anderen,
über eine Verküpfung auf ein unter Umständen anderes Bild oder eine Webseite, etc. verweisen.
Siehe z.B. w3schools.com Bilder.

Der Code für das obige Thumb-Bild sieht wie folgt aus:

<a href="../windows/panoramastudio/1014-1017.jpg" title="irfan view" 
  target="_blank" style="text-decoration:none">
<img src="../windows/apps/Irfanview_logo.gif" width="22" height="22" 
  alt="Irfan View Logo"> </a>

.css
img.LH {float:left;
margin: 5px 15px 5px 0px;
display:inline; }
oder
img.CTR {display:block;
margin:10px auto;}
oder
img.RH {float:right;
margin:5px 0 5px 15px; }

Nicht so gut wäre folgende Bildausrichtung z.B. align="right".

Besser ist es die Bild-Ausrichtung über Klassen-Attribute zu lösen. z.B. class=”LH”
Die verwendete Klasse ist dann noch im .css zu definieren, siehe rechts...
Siehe andreasviklund.com image alignment using classes.

Also:

<a href="…" title="…" target="_blank" style="text-decoration:none">
<img class=”RH” src="…" width="x" height="y" alt="…"> </a>

Bild-Atribute

src="Bild-Adresse" gibt die Adresse an wo das Bild liegt, welches sofort im Text dargestellt wird.
with="25%" gibt die Breite an, wenn es (Bild-Adresse) nicht im Original belassen werden soll.
Die Angabe kann absolut oder in Prozent erfolgen.
height="600" ist entsprechend die Höhe in Pixel, meist nur absolut sinnvoll.
alt="Bild-Beschreibung" alternaiver Text o.ä., falls Bild fehlt oder Pfad nicht korrekt ist...

Statt über ein Klassen-Attribut class=”CTR” kann man weitere Paramter für ein Bild, zur Not über inline CSS style="…" einfügen.

z.B. folgende Styles:

float:right; Rechtsbündiges Bild
margin-right: 10px; Mit einen unsichtbaren rechten Rand von 10 Pixel außerhalb der Box.
margin-left: 10px; mit linken Rand, damit der umfließende Text, nicht daran klebt.
margin-bottom: 10px; mit unteren Rand (Werte können auch negativ sein).
margin: 5px; alle Ränder außerhalb der Box 5px
margin: 1px 2px 3px 4px; 1px top, 2px right, 3px bottom, 4px left
margin:auto um vorangegangene Regeln zu löschen
text-decoration: none nur Bild...
width:500px; height:600px; ist gleichwertig zu width="500" height="600".

Bild mit Unterschrift

figure { padding: 10px; float: left;
border: solid #b0b0b0 1px;
border-radius: 16px;}

figure img {
border-radius: 10px 10px 0 0;}

figure figcaption {
border-radius: 0 0 10px 10px;
padding: 3px 4px 3px 10px;
color: #ff0000; font-style: italic;
background-color: #c0c0c0;}

Seit HTML-5 gibt es das <figure>-Element, welches für ein oder mehrere Bilder verwendet werden kann. Die Bild-Unterschrift selbst wird via <figcaption> angegeben.

Rechts eine mögliche CSS-Einstellung, welche ich hier (auf dieser Seite) nur lokal anwende.
Also in der Kopfzeile zwischen den <style> … </style> Elementen steht der rechts dargestellte Text.

Entnommen habe ich den CSS-Vorschlag aus t3n.de und dann etwas modifiziert, um die Einstellungen prägnanter erkennen zu können.

Damit diese Zeile nicht das Bild umfließt, kann man einen variablen Platzhalter via <div style="clear:both;"> Damit diese Zeile… </div> einfügen. Siehe z.B. elbnetz.com Bilder ausrichten.

Das Element <figure> ist übrigens allgemein zur Abgrenzung verwendbar und nicht nur für Bilder. Weitergehende Tricks findet man z.B. unter selfhtml.org Bilder.

Der Code zum obigen Bild mit Unterschrift sieht wie folgt aus:

<figure>
  <a href="../audio/amp/amp01.png" target="_blank" style="text-decoration:none"> 
  <img src="../audio/amp/amp01.png" width="141" height="96" alt="INV OP"> </a> 
  <figcaption> INV-Verstärker </figcaption>
</figure>

Icons

In der Kopfzeile jedes Browser sehe ich kleine Icons/Bildzeichen um eine bestimmte Webseite schneller zuordnen zu können. Sie werden auch Favicon bezeichnet.

https://favicon.io/favicon-generator/

Einbinden externer Html-Dokumente

Leider sind die folgenden Zeile nicht mehr unter Html 5 erlaubt. Der Hintergrund ist recht einfach. Da auf dieser Seite stehts nur der Main-Anteil nachgeladen wird und der Rest bleibt, kann ein Browser/Suchmaschine nur schwer erkennen, dass es sich um unterschiedliche Seiten handelt.

toc.html steht für "table of content" oder Inhaltsverzeichnis.
main1.html steht für eine beliebige Seite...
space.html steht für eine Seite welche bei zu kleinen Browser-Fenster ausgeblendet wird (ich habe Bilder des Weltraums dargestellt).

<frameset cols="160,900,*" border="1" bordercolor="#ffffff">
  <frame marginheight="5" marginwidth="3" scrolling="auto" name="Navigate" src="toc.html">
  <frame marginheight="20" marginwidth="5" scrolling="auto" name="Main" src="./home/main1.html">
  <frame marginheight="1" marginwidth="1" scrolling="no" name="space" src="./home/space.html">
</frameset>

Also musste eine Alternative gefunden werden, welche unter Html 5 mit möglichst vielen Browsern, ohne Java, unterstützt wird. Ich habe es wie folgt gelöst. Erster Teil steht im formate.css,
zweiter Teil steht z.B. relativ weit vorne auf dieser Html-Seite.

In einen linksbündig platzierten <div>-Block wird also die externe Datei toc.html des Inhalsverzeichnis via <iframe> eingelesen. Durch die unterschiedlich gewählten Abstände klebt der umfließende Text nicht an der Box.

   
#toc p {float:left; background-color:#ffffff; height:600px; width:205px; padding: 5px;}	

<div id="toc">
  <p> <iframe src="../toc.html" height="595"; width="180"; border; name="Navigate"> Sitemap </iframe> 
  </p> 
</div>

Überschrift 1

Zum Anfang