1. #1
    Avatar von Comu
    Registriert seit
    18.11.2011
    Beiträge
    772
    Thanked 753 Times in 363 Posts

    Standard [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>
    Wollen wir erstmal das href ausblenden und uns auf den gröbsten Teil konzentrieren: Hier sehen wir wieder den typischen HTML Tag, <a> CONTENT </a>. In diesem Fall wird auch wieder hier der Text der zwischen <a> und </a> steht im Browser ausgegeben und zwar als Link.

    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>
    Alles was wir nun machen müssen ist irgendwelchen Text auf unsere seite.html zu packen und schon haben wir unsere zweite Seite der Homepage!

    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>
    Als zweites wichtiges Element gibt es Bilder. Bilder sagen einer Menge auf einer Webseite aus: Repräsentieren einen selber, wollen Lesern etwas veranschaulichen oder dienen zur Verzierung.

    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 />
    Der IMG Tag verknüpft quasi das "spezielle" ohne End-Tag mit Attributen welche wir in <a> verwendet haben. Um nun ein Bild einzufügen, benutzen wir das Attribut src. Src steht für Source und heißt soviel wie Bildquelle. So würde also unser Code aussehen:

    HTML-Code:
    <html>
    <head>
     <title> Bild </title>
    </head>
    <body>
     <img src="bild.jpg">
     <img src="http://www.meinewebsite.com/bild.jpg">
    </body>
    </html>
    Dort können wir wieder das gleiche sehen wie bei dem <a>. Ohne einen genauen Pfad, sondern nur den Dateinamen, geben wir Bilder an die im momentanen Ordner sind. Wenn wir Bilder einer anderen Webseite einbinden wollen, müssen wir wieder den kompletten Pfad angeben. Als weiteres Attribut kommt hier alt="" ins Spiel. Es heißt "alternative" und gibt (z.B. für Browser für Blinde) eine alternative an, was auf diesem Bild drauf ist. Somit sollte man immer einen dementsprechendes Attribut hinzufügen, damit es wirklich für alle Leute kompitabel ist.

    HTML-Code:
    <img src="http://www.meinewebsite.com/bild.jpg" alt="Affe">
    Abschließend könnt ihr euch im Netz noch diverse andere Listen von Attributen besorgen. Es gibt noch eine Menge, die man benutzen kann. Einfach mal Googlen!

    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

    HTML-Code:
    <html>
    <head>
     <title> Startseite </title>
    </head>
    <body>
     <a href="seite.html"> <img src="bild.jpg" alt="Zur Startseite" /> </a>
    </body>
    </html>


    Viel Spaß beim ausprobieren!
    Geändert von Cube!X (17.12.2012 um 21:21 Uhr)

  2. The Following User Says Thank You to Comu For This Useful Post:

    DnL (18.07.2012)

Ähnliche Themen

  1. [HTML Tutorial] #5 - Tabellen
    Von Comu im Forum HTML
    Antworten: 0
    Letzter Beitrag: 26.07.2012, 17:39
  2. [HTML Tutorial] Übersicht
    Von Comu im Forum HTML
    Antworten: 0
    Letzter Beitrag: 17.07.2012, 12:07
  3. Antworten: 0
    Letzter Beitrag: 17.07.2012, 11:57
  4. HTML Video Tutorial
    Von Comu im Forum Webentwicklung
    Antworten: 9
    Letzter Beitrag: 17.11.2011, 01:49
  5. HTML: Bilder auf Seiten Verlinken
    Von Kisan im Forum Webentwicklung
    Antworten: 1
    Letzter Beitrag: 20.07.2011, 21:00
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.