DnL (18.07.2012)
-
18.07.2012, 18:26 #1
[HTML Tutorial] #4 - Links & Bilder
#4 - Links & Bilder
Nach dem wir uns die grundlegende Struktur von HTML angeschaut haben und unsere ersten Versuche mit der Formatierung von Texten geglückt ist, gehen wir nun einen Schritt weiter, zu den Elementen welche eine Webseite im heutigen Zeitalter am meisten prägen: Den Links.
Die Links sind im Grunde genommen einfache Verknüpfungen wie man sie von einem herkömmlichen PC klickt. Beispiel: Ihr klickt auf ein Spiel und dieses Spiel öffnet sich. Im übertragenen Sinne ist dies also ein Link zum Startprogramm des Spiels. Genau hierfür werden diese auch in HTML genutzt, um mehrere Dateien zu "verbinden".
Eine Webseite besteht meistens immer aus mehreren dieser Seiten. Klar, es gibt eine Menge neuer Techniken wie JavaScript welche uns ermöglichen ziemlich große Mengen an Informationen in einer Datei zu speichern, aber dort sind wir noch nicht: machen wir klassisch eine Webseite mit mehreren Seiten.
Ein Link ist folgendermaßen aufgebaut:
HTML-Code:<a href="http://www.google.de"> Klicke hier, um zu Google zu gelangen </a>
Nun kommen wir jedoch zu einer neuen Variante in HTML. Den Attributen. Attribute sind Angaben welche wir innerhalb der HTML Tags platzieren. Unser Attribut mit dem <a> verknüpft würde also href heißen. href heißt "Hypertext Reference". Heißt "Hypertext Verweis/Verknüpfung". Da der erste Buchstabe in HTML auch für Hypertext steht ist hiermit klar was gemeint ist: Ein Verweis auf eine andere HTML Datei.
Nach dem Attribut folgt ein Gleich Zeichen um diesem href etwas zuzuweisen. In unserem Fall ist es nun der Link zu Google. Wenn man auf andere Webseiten verweisen will, sollte man generell das http:// davorsetzen. Wenn die Datei nun im gleichen Ordner wie unsere andere Datei liegt, kann man das href auch einfach so setzen:
HTML-Code:<a href="seite.html"> Meine erste Seite </a>
Nun, wir haben ja einen einfachen Text zwischen die <a>'s gesetzt. Hier haben wir aber nun die Möglichkeit, diverse HTML-Elemente mit einander zu verbinden. Wir hätten somit auch die Möglichkeit einen kursiven Link mit <em> zu machen, wobei dies meist durch CSS (was wir eventuell im nächsten Tutorial besprechen) gemacht wird!
Wir können einem HTML-Element auch mehrere Attribute zuweisen. Somit hat man bei <a>'s noch die Möglichkeit Links in einem neuen Tab zu öffnen. Dafür wäre das Attribut target zuständig und der Attribut-Wert _blank.
HTML-Code:<a href="seite.html" target="_blank"> Hier zur neuen Seite im Tab </a>
Der IMG-Tag ist genauso wie der <br /> Tag ein Spezialfall. Dieser hat keinen normalen End-Tag sondert endet auch nur mit einem Slash.
HTML-Code:<img />
HTML-Code:<html> <head> <title> Bild </title> </head> <body> <img src="bild.jpg"> <img src="http://www.meinewebsite.com/bild.jpg"> </body> </html>
HTML-Code:<img src="http://www.meinewebsite.com/bild.jpg" alt="Affe">
Aufgabe: Erstellt eine Datei (startseite.html) und packt dort ein Bild drauf. Beim klick auf dieses Bild solltet ihr auf seite.html weitergeleitet werden. Ihr benötigt dazu eine Mischung eines Links sowie des Bildes.Spoiler:Lösung
Viel Spaß beim ausprobieren!Geändert von Cube!X (17.12.2012 um 21:21 Uhr)
-
The Following User Says Thank You to Comu For This Useful Post:
Ähnliche Themen
-
[HTML Tutorial] #5 - Tabellen
Von Comu im Forum HTMLAntworten: 0Letzter Beitrag: 26.07.2012, 17:39 -
[HTML Tutorial] Übersicht
Von Comu im Forum HTMLAntworten: 0Letzter Beitrag: 17.07.2012, 12:07 -
[HTML Tutorial] #3 - Textformatierungen
Von Comu im Forum HTMLAntworten: 0Letzter Beitrag: 17.07.2012, 11:57 -
HTML Video Tutorial
Von Comu im Forum WebentwicklungAntworten: 9Letzter Beitrag: 17.11.2011, 01:49 -
HTML: Bilder auf Seiten Verlinken
Von Kisan im Forum WebentwicklungAntworten: 1Letzter Beitrag: 20.07.2011, 21:00
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.