Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML und CSS für Designer

Die Hyperlinks <href>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Hyperlinks sind leicht aufzubauen und ermöglichen die Vernetzung unterschiedlichster Inhalte und Seiten miteinander.

Transkript

Die drei Artikel aus dem InDesign- Dokument wurden in HTML übernommen. Wir haben hier die Überschrift H1, wir haben den Fließtext mit P für "Page" und wir haben die Grafiken mit IMG für Image übernommen. Schauen wir uns kurz an, was noch in solch einem Artikel vorkommt. Je nach Art und Weise, wie man so ein Layout gestaltet, macht man sich natürlich auch Gedanken über die Hyperlinks, also die Verlinkungen von einer Seite zur anderen oder zu externen Verknüpfungen. Das kann man ausführlich machen. Wenn man hier mal in die Zeichenformate hineinschaut, dann sieht man, gibt es ein Zeichenformat Hyperlink und ein Zeichenformat Hyperlink Hover. Ich nehme einfach mal hier oben das Wort, und das Wort würde ich ganz gerne als Hyperlink darstellen. Da ich ein Zeichenformat habe, kann ich das einfach anklicken und entsprechend zuweisen und dann ist das genauso blau wie hier das. Der Hover-Effekt, den ich hier drauflegen kann, der zeigt mir, ich habe das Ganze jetzt hier auch noch unterstrichen. Das wäre eine denkbare Vorgehensweise, und das Schöne ist eben, dass ich in diesen Zeichenformaten auf jeden Fall auch reinschauen kann, und kann mir anschauen: Wie sind die denn formatiert? Hier steht nicht viel drin, das ist unterstrichen, das sehe ich auch so, aber zum Beispiel im Hyperlink selber, wenn ich den also aufrufe, dann sehe ich hier zum Beispiel diverse Angaben zur Schriftenfamilie, zur Zeichenfarbe. Das ist eigentlich die einzige Information, die da steht. Das kann man später dann bei den Cascading Stylesheets mit übernehmen. InDesign bietet noch eine weitere Möglichkeit an, die wirklich sehr toll ist für solche vorbereitenden Dokumente. Wenn ich hier diesen Bereich aktiviere, mit der Maus diesen Hyperlink, den ich bereits gesetzt habe, heraussuche und dann mit der rechten Maustaste hier draufklicke, dann gibt es hier einen Punkt, der heißt Hyperlinks. Da kann ich einen Hyperlink bearbeiten, und wie man sieht, ist da auch tatsächlich einer eingetragen. Hier gibt es sogar Zeichenformate. Das habe ich erstellt, was man zuweisen kann, und entsprechend die Verbindung zu dem eigentlichen Link. Und das ist auch funktionstüchtig. Ich rufe das auf, "Hyperlinks" "Gehe zu Ziel", und Sie sehen, er baut auch die Webseite auf. Hier kann ich schon sehr viel Information mit hineinbringen, die ich dann natürlich eins zu eins übertragen kann. Das, was ich hier in dem HTML-Dokument mache, das Zuordnen von Zeichenformaten und das Eintragen dieser Hyperlinks über diesen Menüpunkt, genau das kann ich auch in dem HTML-Dokument machen. Ich muss mir merken, wo ist dieser Hyperlink, wo soll der eingefügt werden. Also wechsle ich dann hier zu meinem HTML-Dokument, und das sind diese beiden Begriffe, die hier als Hyperlink dargestellt werden sollen. Der Hyperlink in HTML beginnt mit dem Befehl "a". Das "a" steht für "anchor", also Anker. Ich verknüpfe mich quasi mit einem anderen Dokument oder einer anderen Website. Dann kommt das, was wir schon so oft sagen; Hypertext oder Hyperlink, und da gibt es einen Hyperlink "reference", also eine Referenz, und das Ganze kommt nur einfach in Anführungsstrichen. Wenn ich z. B. wie in InDesign angegeben "video2brain" nachschlagen möchte, dann gebe ich ganz normal, aber ausführlich "http://video2brain.com" in den Hyperlink ein. Das reicht schon an der Stelle aus. Jetzt muss ich ihm natürlich noch sagen, von wo bis wohin der Hyperlink gehen soll. Das war nicht nur ein Wort, das sind zwei. Hier macht den dann auch wieder der schließende Tag Sinn. Ich rufe den auf und habe dann einen Hyperlink definiert. Was Sie hier sehen, ist das Nachschlagen direkt auf eine fremde Website. Sie können aber auch eine Datei aufrufen, also "datei.name", ".nam" zum Bespiel. Hier gilt das gleiche Prinzip wie bei den Grafiken, die wir hier unten z. B. im "image"-Bereich geladen haben. Möchte ich eine Grafik aus dem "image"-Bereich oder aus einem anderen Ordner, dann könnte ich zum Beispiel schreiben: "texte/" und dann Dateiname. Also das heißt, das ist wieder der Verzeichnisname. Und wenn das Ganze verschachtelt ist, dann sind es eben "Verzeichnis 2" usw. usf. Muss ich ausnahmsweise auch mal Dokumente aufrufen, die oberhalb eines Ordners liegen, in dem sich eine HTML-Datei befindet, dann geht man einfach mit zwei Schritten zurück und öffnet die Datei, die oberhalb liegt. Sie sehen, im Grunde ist das ganz einfach. Ich möchte das übernehmen wie aus dem InDesign-Dokument und trage dann hier die URL vollständig ein. Kontrollieren wir das. ich speichere das HTML-Dokument ab mit "Command-S", wechsle zum Webbrowser und aktualisiere den. Wir haben hier einen Hyperlink, der ist schon funktionstüchtig. Wenn ich darauf klicke, öffnet sich die Website, und wie man sieht, klappt das Ganze eins zu eins übernommen aus dem InDesign-Dokument. Jetzt ist wieder Fleißarbeit angesagt. Jetzt muss man sich entsprechend die einzelnen Bestandteile raussuchen. Das war nur die Demo. Da haben wir hier den Begriff, hier unten noch einen Hyperlink , dann taucht da noch einer auf usw. Die muss ich nun einfach in mein HTML-Dokument einarbeiten.

HTML und CSS für Designer

Steigen Sie als Designer ein in HTML und CSS. Sie gestalten ein responsives Reisemagazin und erleben dabei, dass der Workflow beim Gestalten nicht anders ist als gewohnt.

3 Std. 9 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

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!