Grundlagen der Webprogrammierung: Meine erste Website

Verlinkungen nutzen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Verlinkungen innerhalb der eigenen Webseite dienen vor allem der Übersichtlichkeit und erleichtern das Zurechtfinden durch die Besucher. Durch das Vernetzen mit anderen Seiten erreichen Sie auch einen Vorteil bei Suchmaschinen.
09:35

Transkript

Verlinkungen sind für Webseiten sehr wichtig. Einerseits sorgen diese Verlinkungen innerhalb der eigenen Seite, dass man gut hin- und herspringen kann und eigentlich immer den Überblick bewahrt. Dann haben wir hier zum Beispiel auch eine Form von Verlinkung, wo es darum geht, dass eben ein externer Inhalt mit hereingeholt wird. Es gibt aber auch die Möglichkeit, innerhalb von Fließtext selbst Verlinkungen einzurichten. Und wie gesagt, Verlinkungen sind wichtig auch vor allem Verlinkungen unter unterschiedlichen Webseiten, denn je besser Sie mit anderen vernetzt sind, umso bessere Ergebnisse werden Sie zum Beispiel auch bei der Suchmaschine erzielen können. Wir sehen uns jetzt diese einzelnen Verlinkungen etwas genauer an. Die Navigation kennen Sie ja schon. Was ich jetzt noch dazu zugefügt habe, ist, dass ich für jeden dieser Anreise-Artikel noch so ein Lesen sie mehr hinzugefügt habe, und hier ganz unten sehen Sie noch überhaupt einen Link hin zu einer anderen Seite. Und jetzt wenn wir uns das Ganze im Detail ansehen und werden auch noch dafür sorgen, dass es sich dann optisch etwas verbessert, denn dieser Link ist zwar informativ und sofort das Link erkennbar, aber optisch ist es nicht so wirklich reizvoll. Und das werden wir verändern. Vielleicht verändern wir das sogar zuerst. Ich habe, dann nehme ich, in meiner CSS schon eine Kleinigkeit vorbereitet. Ich habe eine Klasse, die ich btn, also Button nenne, und dass es eine Klasse ist, erkennen Sie hier an diesem kleinen Punkt am Anfang. Dieser verweist eben eindeutig auf Klassen Und habe jetzt alles hinterlegt, um meine Links zu gestalten. Einerseits lasse ich mir das Ganze als Blog-Element darstellen, das heißt es ist dann als Ganzes anklickbar, was natürlich ein Entgegenkommen ist, damit leichter auf diesen Link geklickt werden kann. Dann habe ich eine Weite von 30 Prozent angegeben. Das sieht hier relativ wenig dann aus. Wenn aber die Seite auf die gesamte Breite sich ausdient, dann wird es auch ein breiter gut fassbarer Link werden. Dann hat das Ganze noch einen Rahmen und der Rahmen ist mithilfe von border-radius ein ganz klein wenig abgerundet worden. Dann gibt es noch eine nicht vorhandene text-decoration, das heißt, es gibt diesen Unterstrich, der den Link auszeichnen nicht mehr. Die Schriftgröße liegt im Moment bei 1em das heißt, ganz normal, aber wir könnten es noch, wenn Sie es nach oben schauen, die Schriftfarbe ist dieselbe wie die Rahmenfarbe, das wiederum ist dieselbe Farbe, wie wir sie hier einfach schon verwendet haben, Und dann habe ich ein Padding innerhalb, um etwas Raum hin zum Rahmen zu bekommen, und auch noch etwas Margin außerhalb meines Elements, damit ich Luft hin zum nächsten Element bekomme. Und hier unten noch eine kleine optische Spielerei, nämlich ein kleiner Schatten der jetzt von älteren Browsern so nicht wirklich unterstützt wird von ganz alten Browsern. Was aber nicht wirklich wesentlich ist, denn es ist kein entscheidendes Mittel um dann meinen Link betätigen zu können. Und dann habe ich hier herum noch mithilfe der Pseudoklasse, der sogenannten Pseudoklasse hover dafür gesorgt, dass beim Überfahren meines Links mit der Maus, sich der Link optisch leicht verändert, in meinem Fall invertiert sich einfach nur die Farbe. Und so, nachdem ich diese klasse hier so schöne definiert habe, muss ich sie jetzt eigentlich beim meinem Link nur noch anwenden. Dazu gehe ich in diesem Tag hinein und vor dem Schließen im Tag mache ich jetzt zur besseren Lesbarkeit einen Abstand. Dann schreibe ich class und innerhalb dieser Klasse verweise ich eben auf mein btn, also die Bezeichnung dieser Klasse. Ich speichere, dieses Mal lasse mir die Seite neuladen, und so sieht das Ganze jetzt aus. Wenn ich mit der Maus darüberfahre, verändert sich eben das Ganze optisch einwenig, so dass ich einen Effekt habe, dass ich gerade quasi richtig bin. Und das kann ich jetzt nehmen und kopieren mit Steuerung C, denn der Vorteil einer Klasse, wenn ich Klassen einsetze, ist der, dass ich eine Klasse immer wieder verwenden kann, was ich jetzt auch tun werde. Nur das Allerletzte mit dem Verweis auf einen externen Inhalt. Das werde ich jetzt zubelassen, wie es einfach ist. Gut, ich habe gespeichert, ich lasse hier die Seite neuladen und habe jetzt hier meine Verweise. Sehen wir uns jetzt zuallererst noch den Verweis hier auf den externen Inhalt an. Wenn Sie sich hier die Referenz genauer ansehen, so werden Sie merken, dass hier eindeutig mehr steht als nur die neue Seite. Möchte ich auf einen externen Inhalt verweisen, in diesem Fall direkt auf die Indexseite einer anderen Internetseite, muss ich eine absolute Pfadangabe verwenden. Das heißt hier steht dann wirklich auch das Protokoll am Anfang und die genaue Seitenangabe mit einem schließenden Slash am Schluss damit verweise ich darauf, dass ich sofort dort auf die Indexseite komme. Und wenn Sie diese Links selber einfügen wollen, dann reicht es, wenn Sie in der Adressleiste des entsprechenden Browsers einmal mit der linken Maus hineinklicken rechts auf Kopieren und dann können Sie dieses dann hier auch tatsächlich einfügen. So, probieren wir es mal aus ob es funktioniert, das heißt, ich klicke hier auf diesen Link und lande jetzt auf der neuen Seite. Was mir jetzt noch nicht gefällt, ist, dass man dann automatisch von meiner ursprünglichen Seite wegkommt. Und da gibt es eine Möglichkeit, dass ich den Link noch etwas anpasse, so dass er nachher mehr Raum bietet. Hier habe ich jetzt noch innerhalb meines A-Tags die Möglichkeit, auf ein sogenanntes Target zu verweisen. Und in meinem Fall möchte ich ganz gerne auf blank verweisen. Das heißt, hier wird dann ein neuer Tab geöffnet oder wenn es beim Browser so eingestellt ist, sogar die neue Seite. Meine Seite bleibt offen und erhalten und beim Klicken landet man eben in den neuen Tab. Ich speichere diese Neuerung und werde hier auch die Seite neuladen. Und wenn ich jetzt auf den Link klicke, öffnet er sich eben in einem weiteren Tab und das ist ziemlich einfach, wieder zu meiner Seite zu gelangen. Das ist eine der Möglichkeiten, wie ich einen normalen Link verbessern kann, beziehungsweise erweitern kann. Das zweite Beispiel, das ich Ihnen zeigen möchte, ist der Springpunkt, Dass ich einen genauen Springpunkt hin zu einer Seite oder zu einem bestimmten Bereich einer Seite einrichten kann. Im Moment ist es so, dass ich hier mit diesen beiden Einträgen eigentlich auf dieselbe Seite verweise. Es ist eher so, dass ich, wenn ich hier auf Lesen Sie mehr bei Der Hitze entfliehen, landet, tatsächlich auch Der Hitze entfliehen sehen kann. Vor allem, wenn ich so ein schmales Display für meine Seite habe. Aber wenn ich versuche, Auf die Höhe genießen zu klicken, so wie es im Moment aussieht, lande ich ebenfalls hier im oberen Bereich bei Der Hitze entfliehen. Ich kann allerdings dafür sorgen, dass der Springpunkt hier herunter zu liegen kommt. Und das, was ich dafür als Erstes tun muss, und Entschuldigung, ich auch schon getan habe, ist, dass ich jetzt bei diesem Bereich einen sogenannten Sprungpunkt setze. Und dieser Sprungpunkt wird jetzt durch eine sogenannte ID umgesetzt. Ich gebe also diesem Artikel eine ID mit, Die ID genießen, und mithilfe dieser ID kann ich jetzt dann genau diesen Bereich ansprechen. Eine ID verwende ich immer dann, wenn ich eine eindeutige Zuordnung brauche. Klassen kann ich eben mehrfach verwenden, eine ID kann ich nur einmal verwenden. Nachdem ich den Sprungpunkt ja eindeutig brauche, ist hier die ID genau das, was ich brauche. Und jetzt muss ich dann eigentlich nur noch auf diesen Sprungpunkt verweisen. Das heißt hier habe ich Die Höhe genießen, hier ist die Verlinkung. Und beide Verlinkungen selber werde ich jetzt noch bei der Seitenangabe mithilfe einer Raute auf die ID verweisen und die ID hieß genießen. So! Das wäre eigentlich alles. Ich speichere mit Steuerung S, gehe wieder auf meine Home-Seite zurück und wenn ich jetzt auf Die Höhe genießen klicke, lande ich auch tatsächlich in diesem Bereich. Wie gesagt, das kommt erst zum Tragen wenn Seiten nicht über allzu viel Breite verfügen, und damit meine Texte etwas näher in die Länge gezogen werden. Aber es ist eine gute Möglichkeit, um auch beim Verlinken für etwas mehr Komfort für die Benutzer Ihrer Seite zu sorgen.

Grundlagen der Webprogrammierung: Meine erste Website

Gestalten Sie in wenigen Stunden Ihre erste Website und lassen Sie sich dabei von der Idee über die Auswahl der Werkzeuge bis zur Veröffentlichung Ihrer Web-Präsenz begleiten.

2 Std. 53 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.05.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!