Workshop: HTML und CSS erlernen (Teil 4)

Im vierten Teil unseres Artikelworkshops “HTML und CSS erlernen”, erklären wir Ihnen heute alles wissenswerte rund um die Themen Links, Videos und Bilder. Unser Workshop ist genau das richtige für Einsteiger, welche ihre eigene Website von Grund an selbst erstellen möchten, oder auch für Fortgeschrittene, welche unseren Workshop als Nachschlagewerk nutzen möchten.

Das wichtigste ist eine übersichtliche Ordnerstruktur. Sie wird uns später die Arbeit erleichtern und wir können so besser den Überblick behalten. Hier ein Beispiel, wie die Struktur angelegt werden kann. Ich werde mich während der nächsten Erklärungen immer auf diese Ordnerstruktur beziehen.

​

Haben wir die Struktur so angelegt, können wir die index.html Datei im Hauptverzeichnis lassen und müssen diese nicht in den „html“-Ordner verschieben.

​Möchten wir nun zum Beispiel ein Bild anzeigen lassen, so würde die Syntax wie folgt aussehen:

Der wichtigste Tag um das Bild einzubinden ist <img />. Durch src=“…“ geben wir den Pfad an, an dem das Bild zu finden ist. Da sich dieser Befehl in der index.html befindet, müssen wir ihm sagen, dass wir ein Bild im „img“ Ordner suchen. Das tun wir durch den Pfadteil /img/, danach folgt der Name des Bildes. In unserem Fall ist das „beispielbild.jpg“. Ist im img-Ordner noch ein weiterer Ordner, wird dieser zwischen img und dem Namen geschrieben. Quasi : <img src=“/img/mainpage/beispielbild.jpg“/>. Hier müssen wir beachten, dass wir die richtige Endung nehmen, da das Bild sonst nicht gefunden wird.

 Liegt die Grafik in einem übergeordneten Ordner, müssen wir den Pfad mit „../“ am Anfang schreiben. Somit geht der Computer solange eine Ordnerebene höher, bis er den nachfolgenden Ordner gefunden hat. Zum Beispiel <img src=“../img/beispielbild.jpg“/>. Liegt die Grafik auf einem externen Server, schreibt man den direkten Link hinein, z.B.: <img src=“http://www.bilder.de/fotos/haus.png“/>. Haben wir das Bild eingebunden, müssen wir noch die Größe definieren. Dies tun wir indem wir nach dem Pfad noch height=“…“ und width=“…“ benutzen. Dann sieht unser Code wie folgt aus:

<img src=“/img/beispielbild.jpg“ height=100px width=200px/>

Kommen wir zu den Befehlen „alt“ und „title“. „Alt“ ist der Alternativ-Text, der angezeigt wird, wenn es Probleme mit der Bild-Darstellung gibt. Der „Title“ Befehl hingegen, zeigt einen Text an, wenn der Mauszeiger auf dem Bild ist. Hier ein Syntax-Beispiel mit allen Befehlen:

<img src=“/img/beispielbild.jpg“ height=“100″ width=“200″ alt=“Bild fehlt“ title=“Das ist ein Beispielbild“/>

Das Einbinden von Videos basiert auf einem ähnlichen Prinzip, nur gibt es hier andere Befehle zu beachten. Binden wir z.B. ein Video ein: <video width=“720″ hight=“300″ />

Wir haben dazu viele Befehle zur Auswahl. Ich stelle hier mal ein paar wichtige von diesen vor:

​Möchten wir einen Hyperlink einfügen, können wir das über den <a> Tag machen. Hyperlinks können benutzt werden, um auf andere html-Dokumente sowie auf andere Websites verweisen zu können. Sie können Textbereiche sowie Grafiken umfassen. So sieht die Syntax für das Hyperlinking aus:

<a href=“url“>Textbereich</a>

In unserem Beispiel wird der Textbereich blau hinterlegt und wir würden bei einem Klick auf URL verlinkt werden. Wir können die Verlinkung noch durch diverse Attribute beeinflussen z.B.:

Möchten wir, dass ein Download gestartet wird, verlinken wir direkt auf die Datei
<a href=“downloads/daten.zip“>Daten download </a>

Wir können auch einen „mailto“-Link erstellen. Dieser öffnet automatisch das installierte Email-Programm, somit können Sie Empfänger, Betreff sowie Text direkt angeben.
<a href=“mailto:empfänger@übung.de?subjekt=Betreff&body=Text“>mail</a>
Durch Subjekt fügen wir den Betreff hinzu und durch Body den vorgefertigten Text.

Wenn Sie einen Newsreader installiert und konfiguriert haben können sie auch darauf verlinken.
Der nötige Befehl dazu ist: <a href „news:politik“>Zur Newsgruppe Politik</a>

Wir können auch auf eine bestimmte Stelle auf der Webseite verlinken. Das kann für „springe zu“-Verlinkungen genutzt werden. Als erstes müssen wir einen sogenannten Anker festlegen. An diese Stelle springt man beim Klick dann direkt dorthin

<p id=“Markierung“>Hier soll es hin</p>

Bei der Namensgebung müssen wir darauf achten, dass der Name eindeutig ist. Da es sonst zu Komplikationen kommen wird. Die Verlinkung auf eine Textstelle wird mit #gekennzeichnet wie hier gezeigt:
– Verlinken auf dieselbe Seite <a href=“#Markierung“>springe zu</a>
– Verlinken auf andere Seite <a href=“kontakte.html#Markierung“>springe zu</a>

Image Maps

Es gibt viele komplexe Erklärungen für Imagemaps, die wohl einfachste ist, wen man es sich wie folgt vorstellt. Imagemaps können auf einem Bild ein unsichtbares Bild zeichnen, dass dann mit einem Link versehen wird. Ein „Map“-Tag wird wie folgt erzeugt:
<map name=“Bild“></map>

Dann müssen im inneren des „Map“-Tags, „Area“-Tags erzeugt werden:

Der „Area“-Tag benötigt das Pflicht-Attribut „Shape“. Shape beschreibt die Form die genutzt werden soll.

Der komplizierteste, aber auch vielseitigste Befehl ist „Poly“, daher erkläre ich diesen anhand des folgenden Bildes. Ein Beispiel: <area shape=“poly“ coord=“x1,y2,x2,y2,x3,y3″ />

​

Die Map-Definition darf sich an einem beliebigen Ort im <body>-Bereich befinden, denn sie ist noch nicht mit dem Bild verbunden. Durch das Attribut „usemap“ verbindet man die Teile nun.

<img src=“../img/wasser.jpg“ alt=“Bild vom See“ usemap=“#seebild“ />

Und so kann man einen Bestimmten Bildbereich mit einem Link versehen. Nun wissen Sie alles nötige um Bilder sowie Videos einzubinden und Bereiche zu verlinken.

Alle Teile des Workshops jetzt kostenlos abrufen:

1. Grundstruktur einer HTML-Datei
2. Tabellen und Listen
3. Textformatierung
4. Links, Videos & Bilder
5. Formulare
6. Die erste CSS-Datei

Artikelbild: Sebastian Fuss  / pixelio.de