alles klar dann starten wir mal den praktischen Teil zum Thema e Hyperlinks und zwei Videos im Rahmen der Praxis Video Nummer 1 Hyperlinks in die Welt des Internets und Hyperlinks auf verschiedene Dateien die auf meinem Rechner sind Stichwort relative Pfadangaben und dann noch ein zweites Video zum Thema Sprungmarken bzw Anker habe ich es im Skript genannt genau hier soll jetzt aber erstmal die Hyperlinks im Internet gehen und dazu beginnen wir ich habe bereits ein Ordner angelegt infodateien das ist der Ordner den ich später auch euch ins Laufwerk packe und dazu öffne ich einmal meinen Visual Studio Code apparello weg weg weg und dann was wollte ich jetzt machen ach so ja stimmt ich wollte das mal auf dunkel einstellen weil es ist Abend und dann macht wir das ein bisschen dunkel so okay Ordner öffnen wir öffnen also das Ordner das Ordner ihr merkt es ist spät wir öffnen den Ordner indem wir alle Dateien ablegen die wir für unser Projekt brauchen in diesem Fall ist es zunächst einmal der Infodatei ich habe es gerade gesagt wir machen das Ganze immer über Visual Studio Code weil dann haben wir alle Dateien in einen Ort wir sehen also infodateien ist geöffnet und ich mache mal ein Unterordner für Hyperlinks und dann mache ich gleich noch ein zweiten Unterordner dort packe ich Sprungmarken hinein und hier drin erstelle ich jetzt meine index. HTML und richte die mal ganz kurz ein für die die das vielleicht noch nicht so ganz auf dem Schirm haben die können dann hier noch mal bei bleiben HTML guck wer schnell arbeitet macht die meisten Fehler so wir haben einen Headbereich wir haben da drunter einen Body Bereich alles soweit wie gehabt in den Headbereich betiteln wir unser neues wunderschönes Webprojekt mit der Überschrift hperlinks und stellen natürlich sicher dass wir auch alle besonderen Zeichen die es im Land Deutschland gibt international zeigeferig machen und legen fest dass wir den UTF8 Zeichensatz nutzen so das Ganze am Rande wir machen eben hier met Informationen und dann gehen wir in den bodybereich wir starten mal kurz mit einem Header indem wir feststellen H1 e hings und da drunter machen wir ich persönlich mag das ganz gerne eine head R head R highow horizontal row ich ich habe gerade vergessen wofür das ha steht ihr wisst was damit gemeint ist und was ich jetzt anlege sind einfach so ein bisschen Text damit ich den auf der Webseite habe ich leg mal hier Artikel an und ma mal H2 erstes Kapitel und dazu ballern wir uns hier ein bisschen Text rein ir habe ich lorem ipsum mein Freund und Kupferstecher so Gott da blendet das auch gleich richtig so dann machen wir mal so ein bisschen Umbrüche rein damit das optisch nicht ganz so aussieht wie ein Verbrechen zack Zack und zack genau so alles das was ich bis lang gemacht habe war jetzt Kosmetik wir machen noch mal einmal einen zweiten Artikel hier rein ich ma das nur damit wir so ein bisschen so ein working space haben inem wir gleich ein bisschen mit Links arbeiten können weil ich finde das immer scheiße wenn wir so eine Datei entwickeln und in der Datei steht nichts anderes drin als einfach nur D vi Wörter ich persönlich K kotzen da ist er wieder mein innerer Monk zweites Kapitel und hier kopiere ich mir jetzt einfach den ptag von hier oben W jetzt nicht mehr Arbeit machen als wir brauchen so zack was machen wir jetzt wir machen hier noch mal ein Umbruch zwischen und das ist auch eine Empfehlung die ich glaube ich euch immer mal irgendwie mit auf dem Weg gegeben hat hatte schaut euch Zwischenergebnisse an wir machen das Klicken auf Index und das ist jetzt meine Webseite und in dieser Webseite die nutze ich jetzt ein bisschen als mein Sandkasten indem ich ein bisschen mit Hyperlinks herumspiele denn bei Hyperlinks ist es so dass wir anfangen irgendwie so ein bisschen navigationstechnisch zu arbeiten soll bedeuten oh ich glaub ich mus mal eben was in der Dings einstellen ja okay so weiter geht's ja jetzt bin ich auch komplett raus genau Hyperlink sind dafür da damit ich eben auf meiner Webseite hin und her surfen kann und wir nehmen mal an dass wir zu jedem Kapitel ein Youtube Video verlinken wollen das was ich hier mache ist ich verlinke einfach mal mein eigenes videowo drin na das sollte e nicht sehen so Youtube ich hole mir einfach mal die Links von meinem eigenen youtubekal hier raus welche Videos das dann am Ende sind die ich verlinke könnt euch ja mal überraschen lassen so Link zum Teil okay also was möchte ich machen ich möchte unter meinem ersten Kapitel ein Link einbauen der den Benutzer auffordert oder die Möglichkeit eröffnet weitere Informationen zu sehen wenn ihr eben diesen Link folgt was nutzen wir dazu en dazu einen Atag das haben wir schon gesagt a steht für anchor und ich Zoom noch mal ein bisschen ran hier da das sieht man schon vielleicht ein bisschen besser so wir sind hier unten in Zeile 27 und wir nutzen den attech als anchor dafür eben mit Hyperlinks zu arbeiten und was in dem letzten Video auch direkt deutlich geworden ist wenn ich eine Hyperlink erstellen möchte meiner Webseite dann bin ich irgendwo auf jeden Fall dazu verpflichtet dass ich eine zielurl angeben muss und wenn ich ein Youtube Video verlinken möchte dann nutze ich dazu natürlich eine URL die uns den Weg ins Internet eröffnet gut in diesem Editor Visual Studio Code fange ich also an mein Atag hier hinzuschreiben und danach beginne ich mit dem Attribut Hyper reference HF dort steht es auch schon im Skript ist auch noch mal die Bedeutung gekt ärt für das Attribut HR F oder hyper hyper reference l obbei das L für language steht wir können das gleich auch Spaß hier einmal hinzufügen also wir nehmen die Hyper reference und in anführungstrichen geben wir eben die Zieladresse ein in diesem Fall ist es diese Webseite kann man sich verwundern wie was moment mal steh kein www ja muss auch nicht weil wir wissen ja wofür hTTPS steht das heißt wir haben h durchaus die Verlinkung auf eine Webseite gut dann hatte ich gesagt wir wollen auch Hyper reference language angeben dort nehmen wir de warum weil die Webseite auf die wir verweisen se deutsche diesem Attribut kann ich also für Suchmaschinen quasi den Hinweis geben dass die Seiten auf die ich mich hier beziehe Seiten sind die ja also deutsche Seiten sind ne wie eben deutschsprachig sind okay ich mache die spitzeeklammer zu und das was ich jetzt noch brauche ist Feld oder irgendetwas worauf der Benutzer klicken kann damit er eben auf ja diese Zieladresse die ich dort in der Hyper reference angegeben hab gelangt in diesem Fall schreibe ich h mal hin mehr Informationen das ist dann so die Schaltfläche für den Benutzer damit sich das Ganze optisch abgrenzt setze ich hier vor noch mal ein Umbruch rein und ich ma auch vor der horizontalen Linie noch mal Umbruch das giche mache ich jetzt für mein zweites Kapitel denn auch dort versuche ich den Benutzer irgendwas zu erzählen irgendwas worin ich gut bin und danach möchte ich eine Verlinkung haben die mehr Information bereitstellt und in diesem Fall nehme ich logischerweise ein anderes Video nicht das Gleiche ich weiß das Video das passt sowieso vorne und hinten nicht aber wir wollen eben ganz kurz hier einmal plakativ zeigen wie man damit umgeht okay wir speichern ab und das ist auch die ganze Kunst der Sache wie ich eine Verlinkung ins worldwide web schalte ne ich nutze den attec für anchor das Attribut Hyper reference und dann gebe ich natürlich als Attribut Wert in Anführungsstrichen an wo genau soll der Link mich hinführen ne und hier ist der geöffnete Atag geschlossen das heißt ich gebe dann natürlich zwischen dem öffnenden atteag und hier sehen wir ganz deutlich den geschlossenen atteag gebe ich an worauf der Benutzer klicken soll damit eben der Browser arbeitet okay wir speichern den ganzen Bums mal ab und schauen uns an was ich hier im Internet getan hat dort ist unsere Webseite und die aktualisieren wir mal ganz kurz und hier sind wir direkt Zeuge der voreingestellten Formatierung HTML seitig denn ein Link ist dargestellt als blauschrift die unterstrichen ist wenn ich da drauf gehe öffnet sich also jetzt ein Youtube Video von dem kochschen Party Kanal welches das ist könnt ihr euch noch mal angucken steht hier erste Normalform da gruselt ein bisschen lange ist her egal das was wir gesehen haben ist der Link funktioniert Punkt gut das ist Teil 1 des ganzen was wir hier veranstalten da genau so das heißt wir haben auf jeden Fall schon mal hinbekommen wie wir einen Link in die Welt da draußen schaffen nämlich eben mit diesem Kram falls ihr das nachgucken wollt kommentiere ich das noch mal kurz aus Link zu einem Youtube Video mittels Tag genau na und das können wir noch mal kopieren unten einfügen dann hab wir das soweit fertig okay soweit so gut ne wir haben das zweite Attribut noch hinzugenommen das muss man nicht hinzunehmen da hat der Benutzer sowieso nichts von das ist mehr auf semantischer Ebene eine Zusatzinformation für den Browser dass ich hier eben ja eine deutschsprachige Webseite befindet es gibt ein weiteres Attribut welches durchaus sinnvoll ist manchmal anzuwenden wir öffnen noch mal die Webseite oh jetzt habe ich weggemacht und guck mal hier besuchte Links werden auchch in ander Farbe dargestellt aber das ist jetzt auch nichts Besonderes wenn ich dort drauf klicke dann verlasse ich meine ursprüngliche Webseite und gehe auf eine neue Webseite ne und manchmal möchte man das ja unterwinden heißt wenn ich auf diesen Link klicke dann soll sich hier oben eine neue Registerkarte öffnen in der der Link eben angezeigt wird und auch das kann ich realisieren über einen über ein Attribut und das Attribut welches mir hier zum Ziel verhilft nennt sich target auch hier verweise ich einmal auf das Script da steht genau drin welche Werte eben das Attribut target annehmen kann irgendwo eine lustige Tabelle gebaut da target und dort kann ich als Attribut dann z.B festlegen unr blank dass wenn der Benutzer auf den Link klickt sich ein neues Fenster öffnet oder neuer Tab je nach Browser je nachdem was man da eben gerade benutzt gut wir wollen das mal so machen nehmen target blank ich muss Attribute Werte ja immer gleicherzeichen einfstichen unrich blank wir speichern das mal ab und gucken kurz was tut sich hier auf meiner Webseite nicht vergessen aktualisieren und ich klicke da drauf und sie da es öffnet sich ein neues Fenster unten habe ich dieses target blank nicht angegeben wir bleiben im gleichen Fenster das sind Al so die Kleinigkeiten mit dem man eben seine Webseite etwas strukt en kann da muss man dann halt Vorgehen je nachdem wie man möchte J das war der erste Teil der zweite Teil der Verlinkung ich komme ein bisschen nicht so gut klar wenn das so nah rangezomt ist okay der zweite Teil bezüglich Verlinkung dort wollen wir eben eine Hyper reference reinbauen die nicht ins Internet führt das heißt wir wollen keine externe Datei rufen für die ich eine Internetanbindung brauche sondern wir wollen Dateien aufrufen die die ich selber geschrieben habe und dazu müssen wir mal eben eine neue Datei generieren ich mache das hier im gleichen Ordner Index HTML und dann machen wirmer eine neue Datei rein und die nennen wir unterseite. HTML jetzt nicht im Ordner Hyperlinks das ja super ja die möchte ich da reinen so g also ich will dass beide Dateien im gleichen s okay ich kopiere mir mal eben diesen ganzen Kram rüber damit ich hier nicht ganz so viel neu schreiben muss was ich rausnehme sind diese Links hier weil die brauche ich jetzt so nicht wichtig ist man darf nie den Spaß verlieren beim Webseiten gestalten auch wenn das sicherlich ein bisschen schwierig ist weil wir noch keinerlei optische Geschichten hier machen deswegen ist das was man so produziert sieht immer recht doof aus aber das kommt noch früh genug okay so ich lass mal den Header hier da wir uns ja auf einer Unterseite befinden was auch immer das sein soll machen wir noch mal Artikel nee quatsch wir machen in den Header machen wir direkt eine unterüberschrift rein h machen wir H2 willkommen auf der Unterseite klingt irgendwie so ein bisschen komisch willkommen sind willkommen auf der Unterseite so m und hier steht dann irgendwas anderes BL hier [Musik] machen speichern wir können sonst hier noch mal irgendwie weiß ich eine lustige Tabelle reinmachen table border g UNO so TR und dann machen wir eben hier eine TD rein dann nemen wir auch mal ein bisschen Text mal hier das zack TD num 1 und dann haben wir noch TD numero 2 weil dann haben wir gleich wenn wir bisschen zwischen den Seiten hin und her springen erkennen wir auch dass wir uns auf einer offensichtlich anderen Seite befinden als vorher okay so Speicher gut wir haben also jetzt eine Seite e Hyperlinks und wir haben jetzt eine Unterseite das heißt die entscheiden unterscheiden sich so ein bisschen in dem Inhalt wir können uns das auch noch mal im Browser angucken dazu muss ich das natürlich ordnerseitig öffnen Index kennen wir die sieht so aus da haben wir noch die beiden Links die habe ich in den and beiden gelöscht und zusätzlich dazu haben wir jetzt noch die Unterseite die sieht dann jetzt so aus ich weiß gar nicht warum er jetzt hier keinen Rahmen drin hat aha Bo der natürlich Speich ja also immer wenn das so rot markiert sieh das immer so falsch aus dabei ist es aber vollkommen richtig okay so das ist meine Unterseite und das was ich jetzt irgendwie hinbekommen möchte ist dass ich auf meiner Index HTML und das ist ja so meine Hauptseite für meine komplette Webpräsenz dass ich dort über eine Navigationsleiste jetzt zu einer anderen Seite komme heißt also ich richte mir mein Navigationsbereich ein und dort packe ich dann ja eine Verlinkung rein auf eine auf ein anderes HTML Dokument und das soll mich ja auf meine Unterseite verlinken heißt also wenn ich später an der Stelle meine Indexseite aufrufe dann möchte ich hier oben auf Unterseite klicken können und dann gelange ich eben automatisch zu meiner anderen HTML Seite genau und das müssen wir jetzt irgendwie realisieren ich verweise an dieser Stelle einmal auf das andere Video nämlich auf diese theoretische Geschichte mit der relativen und den absoluten pfahrtangaben denn ich möchte an dieser Stelle gar nicht erst zeigen wie man eine absolute pfahrtangabe in den hier vernünftig reinbekommt ohne wahnsinnig zu werden sondern wir machen direkt die relative fahrtangabe weil wir werden sehen dass was vielleicht gerade dem Video so unglaublich kompliziert klang wirklich extrem einfach ist und extrem schnell gemacht ist solange man hier in dieser Navigation eine Ordnung hat und mit Ordnung meine ich eben das wenn wir eine neue Webseite machen wollen und in diesem Fall gestalte ich ja gerade eine Webpräsenz die sich mit Hyperlinks auseinandersetzt dann speichere ich alles was für diese Webseite von Relevanz ist in einen Ordner das heißt die Dateien liegen zusammen irgendwie geordnet in einem Fach und wenn ich das eben habe ne das ist so der erste Schritt den man macht dann ist es extrem einfach zwei Seiten zu verlinken denn das was ich jetzt mache ist im Grunde erstmal identisch zu dem was ich eben gemacht habe ich nutze den Atag und innerhalb des atags nutze ich eine Hyper reference so ich tippe das ein und jetzt sieht man vielleicht schon worauf ich hinaus will wenn man das hier alles soweit richtig eingegeben hat und hier dann auch schon die Anführungsstriche hingesetzt hat dann schlägt einen der Editor vor was in der näheren Umgebung dieser Indexdatei verlinkt werden kann ja und was will ich verlinken ich will diese Seite verlinken klicke ich hier drauf dann schreibe ich hin die Textzeile auf die der Nutzer Klinken kann das ist Unterseite zack a und fertig ist die Laube gut schauen uns das an aktualisier das W haben jetzt hier schon mal unterstrichen das schon mal sehr gut klicke drauf und se da ich bin auf meiner Unterseite also wenn jetzt nicht das extremely mindblowing shit ist dann weiß ich das leider auch nicht mehr das war jetzt allerdings auch die einfachste Variante wir machen das jetzt noch Mali weiter das was ich jetzt hier einfüge ist ein Unterordner den Unterordner nenne ich neben Seiten so und in die Nebenseiten baue ich mir jetzt eine weitere HTML Datei ne so ich gehe jetzt hier in den Ordner Nebenseiten rein und da packe ich eine Datei rein die heißt Nebenseite hdml so die Nebenseite ist leer was machen wir leeren Seiten wir packen oh nee das war schlecht wir packen in die leeren Seiten erstmal die Grundstruktur unserer Website ich hier das zack Nebenseite einfügen so Nebenseite kürz mal ein bisschen ab da soll jetzt auch nicht ganz so viel stehen es ist ja schließlich auch nur eine Nebenseite auch alles weg genau nebenkapitel und die Überschrift ist hier gesagt mit H2 Seite so gut wir haben also jetzt eine weitere Datei in unserer lustigen Geschichte mit drin und was ich natürlich jetzt machen möchte ist ich möchte auf meiner von meiner Index HTML wieder verweisen auf eine weitere Seite meiner Webpräsenz gut wir wollen das ganze hier optisch so ein bisschen hübsch darstellen deswegen machen wir hier neben mal so ein ja etwas längeren Strich und muss ich ganz kurz gucken ja wir machen da einfach ein Umbruch und nehmen wieder a Hyper reference gleich in Anführungsstrichen und es ist wieder extrem einfach das was der Editor uns jetzt neben den Dateien vorschlägt die in dem gleichen Ordner liegen wie die Index hTML ist die Ordner die in dem gleichen Ordner liegen wie die indexhtml und wenn ich jetzt drauf gehe dann finde ich dort automatisch die Datei nebenseite. HTM wenn ich jetzt drauf klehe habe ich automatisch meine relative pahtangabe und das ist die die nur richtig sein kann weil der Computer uns diese vorgegeben hat wir machen hier noch mal zusätzlich target blank weil dann können wir sehen das funktioniert natürlich auch bei Dateien die ich adressiere die nicht im Internet liegen hier mache ich Nebenseite rein und ich klicke mal auf speichern und dann schauen wir uns das El mal an Weg Hyperlinks das war ach nee siehst du das nächste was wir uns einbauen istind zurückbon so Index so wir sehen wir haben jetzt hier zwei wunderschön voneinander getrennte links liegen das ist hier nämlich mein Navigationsbereich wenn ich jetzt auf die Nebenseite gehe wir sehen öffnet sich ein neuer Tab hier oben und ich bin auf meiner Nebenseite jetzt habe ich gerade den Quellcode rüber kopiert heißt also ich habe hier noch Verlinkung zur Unterseite drin und ja was passiert wohl wenn ich jetzt hier drauf gehe drück mal Pause und überlegt mal ganz scharf also wenn ich jetzt hier drauf gehe dann sollte das ganze nicht funktionieren ne sie da Zugriff auf die Datei nicht möglich und das hat nichts damit zu tun dass mir irgendwer verbietet diese Datei anzugucken sondern diese Datei schlichtweg nicht existent warum ist das so wir gucken mal den Quellcode rein was dort steht wir haben das Problem entdeckt auf der Unterseite die wir haben ne quatsch auf der Nebenseite genau denn dort habe ich das mit rüber kopiert was versucht der Browser der Browser versucht diese Datei zu finden und wenn ich diese Datei so angebe dann heißt das dass diese HTML Datei im gleichen Ordner liegen muss wie die Datei die ich gerade auf hab das heißt Nebenseite wenn ich allerdings in diese Ordnerstruktur reingehe Nebenseite dann finde ich da auch nur die Nebenseite das heißt wie ich keine unterseite. HTML ne und das ist das Problem wenn wir da jetzt irgendwie in die pfahangabe rüber kopieren müssen das halt anpassen das heißt also wenn ich von hier weg will nämlich zur Unterseite das können wir durchaus mal heranziehen so Hyper reference gleich und ich will zur Unterseite dann schlägt er mir nicht vor dass hier e die Datei Unterseite liegt warum ist das so ich muss quasi aus dem Ordner Nebenseiten erstmal ein Ordner nach oben gehen und dann dort auf die Datei Unterseite zugreifen und das kann ich umsetzen ich hab es gerade im anderen Video schon mal gesagt indem ich folgende Zeichensetzung eingebe das ist ein Punkt das ist ein Punkt und das ist ein Backslash und was wir jetzt sehen ist mit dem Punkt Punkt Backslash geht der ein Ordner nach oben und zeigt uns an was wir da jetzt für Sachen rumfliegen haben und die Sachen die wir da rumfliegen haben haben es z.B unterseite. HTML und dann habe ich hier wieder meine relative pfahrtgabe zu genau der Datei die ich haben möchte ja was haben wir gemacht also manchmal macht es ein bisschen mehr Sinn sich das hier irgendwie so in dieser Explorer Ansicht anzusehen mit dem Punkt Punkt Backslash drücke ich quasi auf diesen Knopf nämlich hoch eine ordnerebene nach oben eine Ordner Ebene nach oben ist das hier und das was hier liegt ist die Unterseite und so ergibt sich eben genau diese fahangabe gut bevor wir uns gleich die ganze Webseite ansehen machen wir mal eben auf all unseren Seiten noch mal ein Zurückbutton sodass ich von jeder Seite zurückkomme auf die Startseite und häufig findet man sowas ganz unten ma Umbruch rein a Hyper reference gleich und dann müssen wir gucken dass wir immer auf die Index zurückkommen hier müssen wir ein Ordner nach oben und dann sind wir bei Index das ganze zurück in die Zukunft so unterseite. HTML machen wir das gleiche auch hier gehen ganz nach unten und packen da Hyper reference mäßig ein Zurückbutton rein auf die Index HTML hier muss ich eben nicht die Ordner wechseln sch hier zurück J und das müsste es eigentlich auch schon gewesen sein wenn ich mir das jetzt angucke müsste ich lustig freudig zwischen all Dateien hin und her marschieren können wie ich möchte wir sind jetzt auf auf welcher Seite sind wir denn das ist die Hauptseite ich aktualisi mal schnell okay ich gehe auf meine Nebenseite J bin da wenn ich auf zurückgehe bin ich wier auf meiner Startseite ich gehe auf die Unterseite auch hier kann ich auf zurückklicken bin wieder auf der Startseite ja und das ist das ganze Hexenwerk welches hinter Hyperlink steht ne also immer Atag anwenden Hyper reference also die Zieladresse geben und dann gegebenenfalls noch weitere Attribute wie z.B die language festlegen oder aber und das sehen wir hier ob neuer Tab geöffnet werden soll oder eben nicht ja und wenn man das so ein bisschen gemacht hat dann ist es kein Problem das Schwierigste an dieser Stelle ist sicherlich das Hin und Her navigieren zwischen den Ordnern und man muss ehrlich sagen das ist eine reine Übungssache das hat gar nicht so viel damit zu tun ob man jetzt dumm oder klug ist das muss man einfach üben also man muss halt wissen dass man Backflash eingibt und dann haut das Allis hin genau