HTML5 und CSS – Grundlagen

Kurs | Albert America

1
2
3
4
5
6

Links - Hypertext

  • Lernziele
  • Ich kann mit einem Link auf andere Webseiten verweisen.
  • Ich erkenne den Zusammenhang zwischen URL und Dokumentenstruktur.
  • Ich kann Links zu anderen Seiten derselben Website erstellen.

Repetition

Fragen zu Tag 2 - HTML & FTP
FTP: Persönlicher Ordner vom Server auf den Schreibtisch downloaden.

HTML Syntax

Alle HTML Elemente im Überblick,
Begriffe und Kurzschreibweise in Brackets: HTML - CSS - Kurzschreibweise

Hypertext Link 1

Mit einem a-Element kannst du einen Link zu einem anderen Dokument oder zu einem Anker (anchor) setzen. Hyperlinks, auch „Verweise“ genannt, sind ein entscheidender Bestandteil jedes Hypertext-Projekts und der „intelligente Mehrwert“ des World Wide Web.

Absoluter (externer) Link

Ein absoluter Link zeigt auf eine Seite auf einem anderen Server. Er beginnt daher immer mit http:// oder http://www.

Übung - absoluter Text Link

  1. Öffne Deine Datei index.html im Editor Brackets.
  2. Erstelle einen h2 Titel mit dem Wort «Favoriten» im main-Element.
  3. Unterhalb dieses Titels erstellst du eine Liste ul mit zwei Aufzählungen li.
  4. Setzte zwei absoluten Links zu deinen Lieblingsseiten in die Listenelmente.
  5. Anleitung: Absoluter Link mit Brackets erstellen

Lösung | Lösung ZIP

E-Mail Link

Im Gegensatz zu anderen Hyperlinks ruft der E-Mail-Link keine andere Webseite auf, sondern öffnet ein Fenster im Mailprogramm oder im Browser, welches der Benutzer verwendet.

Übung - E-Mail Link

  1. Öffne Deine Datei index.html.
  2. Erzeuge einen Mailto-Link im footer der Datei.
  3. Anleitung: E-Mail-Link mit Brackets erstellen
  4. Falls Dir Zeit bleibt, versuche dem Maillink, ein Betreff (subject) mitzugeben.

Lösung | Lösung ZIP

Links können ein Titel Attribut haben

Für Suchmaschinen ist dieses Attribut im Tag wichtig. Wenn in den Links Keywords sind, wird die verlinkte Seite besser gelistet. Das Attribut title zeigt dem Benutzer einen Text, wenn er über den Link fährt. Du kannst zum Beispiel beschreiben, was das für eine Seite ist auf die man verlinkt. 

title="unbedingt hier Buchen"

HOVER ME (^_^)/~~ (nicht zu schnell)

PAUSE

Datenorganisation

Datenorganisation ist wichtig. Die Datenstruktur muss logisch, übersichtlich und nachvollziehbar sein.
Welche Namenskonvention haben Dateinamen, Verzeichnisseund Pfadangaben?

Relativer (interner) Link

Links zu anderen Seiten derselben Website.
Relative Links geben die Adresse relativ zur Lage der HTML-Datei an.

Übung - Subseiten erstellen und verlinken

  1. Erstelle in Deinem Projektfolder für jeden der drei weiteren Menupunkte einen eigenen Folder (kontakt, projekte, ueber-mich).
  2. Kopiere oder speichere dein index.html in jeden der drei Folder (kontakt, projekte, ueber-mich).
  3. Passe die title-Tags von allen Seiten dem jeweiligen Inhalt an. Diese sollten aussagekräftig sein.
  4. Korrigiere auch die h1 Titel dem Seiteninhalt entsprechend.
    Beispiel: Im index.html im Folder ueber-mich mit dem h1: Über mich.
  5. Lösche auch auf allen drei kopierten index.html die Farvoriten h2 und dessen Listeninhalt ul. Dieser Inhalt mit den erstellten absoluten Links sollen nur auf der Startseite sichtbar sein.
  6. Verlinke nun alle vier "index.html" relativ zueinander.
  7. Anleitung: Relative Links
  8. Zusatz: Setze einen Link zur Startseite auf den Namen h2 im header.
    Dieser Link heisst HOME-Link. Er führt immer zur Startseite.
  9. Teste das Ergebnis im Browser.

Lösung | Lösung ZIP

Ankerlink Links

Ankerlinks sind im Zeitalter von endlos Scrollen und ONEPAGE Webseiten wieder in Mode gekommen. Ein Anker ist ein Hypertext-Link der zu einem anderen Punkt im gleichen Dokument führt. Der # ist immer das Sprumgziel. Vor-und Nachteile kannst du unter usability-toolkit nachlesen.

Übung - Ankerlink

  1. Erstelle in deinem Projektfolder einen neunen Folder mit dem Namen «uebungen»
  2. Öffne die Vorlage (Text McLuhan) im Browser.
  3. Speichere diese Seite direkt vom Browser (...speichern unter) in deinen neunen Folder mit dem Namen «uebungen».
  4. Erstelle die Anker-Links anhand der Anleitung: Ankerlink einfügen.
  5. Wenn du die Übung fertig hast, verlinke sie auf deiner Projekt Seite.

Lösung | Du kannst die Lösung auch speichern und zuerst die Lösung studieren.

Wichtig: Du kannst auf jeden Anker in jeder belibigen Seite einen Link setzten.
Klicke auf den Link: Mit der ganzen Menschheit verflochten Die Seite wird aufgerufen und springt zum Anker.

http://pingu.eb-zuerich.ch/html/unterlagen2018/assets/material/tag2/anker-links.html#menschheit

Aufgaben

Lesen Im HTML & CSS Buch
Seite 80 - 96 (Kapitel 4 Thema Links )
Übungen aus dem Buch analysieren

Portraitbild für das Portfolio

  1. Suche ein digitales Portraitbild von dir, oder mache ein Selfie.
  2. Erstelle in deinem Projektfolder einem Folder mit dem Namen "images".
  3. Lade dein Portraitbild in den Folder images.

Links & Tipp's

Hypertext
Blindtext Archiv
Blindtext Generator
loremipsum