keen on learning – lesson 03

Pfadangaben

<img src="image/image.png" alt="Beschreibung des Bildes">

<a href="http://www.wikipedia.at"> Wikipedia </a>

<nav>
  <a href="about.html"> about </a>
  <a href="http://www.instagram.com"> instagram </a>
  <a href="#work"> work </a>
</nav>

src: verweist auf den Ort, wo das Bild liegt und auf die Datei selbst
href: führt zum html-Dokument, zu externer Website, zu einem internen Verweis
generell unterscheidet man zwischen relativen und absoluten Pfaden

Relativer Pfad

Einsatz: wenn HTML-Dokumente & Bilder im gleichen Projekt-Ordner liegen
Vorteil: beim Übertragen auf den Web-Server kann der gesamte Verzeichnisbaum komplett übernommen werden, ohne dass die interne Verweisstruktur verloren geht

<img src="delphin.gif">

Das Bild delphin.gif liegt im gleichen Ordner projekt, wie die HTML-Datei index.htm.

<img src="images/delphin.gif">

Das Bild delphin.gif liegt im Ordner images. Dieser Ordner befindet sich eine Ebene unter projekt.

<img src="../delphin.gif">

Das Bild delphin.gif im Ordner images liegt eine Ebene höher als die HTML-Datei archiv.htm aus dem Ordner archiv. Das drückt der relative Pfadname ../ aus.

<img src="../../delphin.gif">

Das Bild delphin.gif im Ordner images liegt 2 Ebenen höher als die HTML-Datei index.htm. Das wird durch ../../ ausgedrückt.

<img src="../images/delphin.gif">

delphin.gif liegt eine Ebene höher und von dort aus im Ordner images, von archiv.htm aus gesehen.

<img src="../../../images/
                    delphine/delphin.gif">

Drei Ebenen nach oben, dann abbiegen in den Ordner images und zu guter Letzt wechseln in den Ordner delphine, wo das Bild delphin.gif liegt.

Absoluter Pfad

wenn die Datei, auf die verwiesen werden soll, nicht auf dem eigenen Server oder Projektordner liegt (externer Verweis)

Beispiel absoluter Pfadname mit URL-Angabe:
1. Protokoll: http://
2. Domainname: www.animals.com/
3. Pfad: images/delphine/
4. Dateiname: delphin.gif

Soll das Bild delphin.gif in die Datei band1.htm eingebunden werden, sieht der absolute Pfadname folgendermaßen aus:
<img src="http://www.animals.com/images/delphin.gif">

Link auf einen Anker – eine Sprungmarke setzen

In der Navigation Verweis zum Anker setzen:

<a href="#ziel01">  … </a>

Im Abschnitt Anker platzieren:

<div id="ziel01"> … </div>

Grundgerüst eines HTML-Dokuments

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title> aussagekräftiger Titel der Seite </title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h1> aussagekräftige Headline </h1>
    <img src="images/lead.png" alt="Kurze Beschreibung des Bildes" />
    <p> Sehen Sie sich den Quellcode dieser Seite an. </p>
  </body>
</html>

Layoutbereiche erstellen

Header <header>
Navigation <nav>
Footer <footer>
Section <section>
Article <article>
Main <main>

Header

Definiert den Kopfteil <header> einer Seite oder eines Abschnitts – enthält oft ein Logo, den Titel der Website und die Seitennavigation

<header>
  <img src="logo.gif" alt="Firmenlogo">
  <h1> Firmenname </h1>
</header>

Navigation

Beschreibt einen Abschnitt der ausschließlich Navigationslinks enthält

<nav>
  <a href="about.html"> About </a>
  <a href="work.html"> Work </a>
  <a href="contact.html"> Contact </a>
  <a href="blog.html"> Blog </a>
</nav>

Footer

Definiert den Fußteil <footer> einer Seite oder eines Abschnitts – enthält oft Copyright-Hinweise, einen Link auf das Impressum oder Kontaktadressen

<footer>
  <p> © 2016 Vorname Nachname, alle Rechte vorbehalten. </p>
  <p> Schreiben Sie mir: <a href="mailto:name@example.com"> name@example.com </a></p>
</footer>

Section

Beschreibt einen Abschnitt eines Dokuments

<section>
  <h1> Headline zu einem Abschnitt </h1>
  <p> Text... </p>
</section>

Article

Beschreibt eigenständigen Inhalt, der unabhängig von den übrigen Inhalten sein kann

<article>
  <h1> Mozilla Firefox </h1>
  <p> Firefox ist ein freier Webbrowser des Mozilla-Projektes, 2002 veröffentlicht. </p>
</article>

Main

Definiert den Hauptinhalt der Seite – es ist nur ein <main> Element pro Seite zulässig.

<main>
  <section>
    <h1> Headline </h1>
    <p> Description </p>
  </section>
  <section>
    <article>
      <h2> Title </h2>
      <p> Text </p>
    </article>
    <article>
      <h2> Title </h2>
      <p> Text </p>
    </article>
    <article>
      <h2> Title </h2>
      <p> Text </p>
    </article>
  </section>
</main>

Note: Liste der HTML5-Elemente auf Mozilla Developer Network

JavaScript kommt zur Rettung (1995)

JavaScript war die Antwort auf die Grenzen von HTML. Wenn man ein Pop-up-Fenster benötigte oder man dynamisch etwas ändern wollte, dann war JavaScript die Lösung. Allerdings wurde JavaScript über die eigentliche Seite gelagert und musste extra geladen werden. Häufig wurde es als einfacher Patch von faulen Entwickler verwendet – dennoch war es sehr mächtig, wenn man es sinnvoll einsetzte. Heute versucht man JavaScript zu vermeiden, wenn die gleiche Funktion mit Hilfe von CSS gelöst werden kann. Im Front-end (jQuery) wie im Back-end (Node.js) kommt JavaScript dennoch in Einsatz.

Vererbung

wichtiges Prinzip in CSS
dadurch wird es möglich, verschiedene CSS-Eigenschaften wie Farben, Schriftart und Schriftgröße einmalig an einer zentralen Stelle zu definieren, anstatt jedes einzelne Element dieselben Eigenschaften wieder und wieder zuzuweisen
Aufbau von HTML-Dokumente: in Form einer Baumstruktur
die verschiedenen HTML-Elemente haben Vor- & Nachfahren – sogenannte Eltern- & Kind-Elemente
dank der Verwandtschaftsbeziehung übernehmen die nachfolgenden Kind-Elemente viele Stileigenschaften von den übergeordneten Eltern-Elementen
Vererbung erzwingen mit „inherit“

Note: Hintergrund(-Farbe) wird nicht weitervererbt.
Standardwert bei Hintergrund(-Farbe) ist transparent.

Kaskade

mit Kaskade ist gemeint, dass ein Dokument nicht nur von einem Stylesheet, sondern aus einer Vielzahl von Stylesheets formatiert werden kann, die auch aus verschiedenen Quellen kommen können
ein Stylesheet kann von drei verschiedenen Quellen kommen: Webbrowser, Benutzer und Autor
Browserstylesheet: Standardstylesheet, wenn keine CSS-Formatierung verwendet wird
Benutzerstylesheet: wird von einigen Browsern angeboten (direkt oder über Erweiterungen)
Autorenstylesheet: das persönlich angelegte Stylesheet, mit dem gewöhnlich verschiedene CSS-Eigenschaften überschrieben bzw. kombiniert werden

Auf einen Blick

wenn ein Browser den Quelltext einer Website erhält, erstellt er einen Stammbaum (DOM – Document Object Model)
dieser Stammbaum bildet die verschachtelte Hierarchie der HTML-Elmente ab
Kaskade (cascade): Bei der Gestaltung eines Elements sammelt der Browser in Stufe 1 der Kaskade für jede CSS-Eigenschaft zunächst alle relevanten Deklarationen
Kasekade – Stufe 2 bis 4: Findet er mehrere Deklarationen, sortiert er die gefundenen Anweisungen nach:
Stufe 2: Wichtigkeit (!important)
Stufe 3: Spezifität des Selektors
Stufe 4: Reihenfolge des Auftretens
Vererbung (inheritance): Findet der Browser keine Deklaration, prüft er, ob er durch Vererbung einen Wert findet.
die meisten Eigenschaften des Box-Modells (und einige ander) werden nicht vererbt
Standardwert (initial value): Wurde nichts definiert und nichts vererbt, kommt der in der CSS-Spezifikation festgelegte Standardwert zur Anwendung

static, relative, absolute, fixed

die Seite ist ein langer, ruhiger Fluss – position: static;
versetzt weiterfließen – position: relative;
raus aus dem Fluss – position: absolute;
wie ein Fels in der Brandung – position: fixed;
und Ebenenreihenfolge ändern mit z-index

Position static

die Seite ist ein langer, ruhiger Fluss
Boxen werden in der Reihenfolge, wie sie im Quellcode vorkommen, dargestellt
static ist die Standard-Positionierungsart
Elemente bleiben im Flow – sie folgen dem Fluss des Dokuments
Ausgerechnet die Positionierung, die dem natürlichen Fluss der Elemente folgt, bekommt den Namen „static“. That’s life.

Position relative

versetzt weiterfließen
relative Elemente verhalten sich wie static Elemente
der ursprüngliche Platz des Elements wird geschützt und nicht von den nachfolgenden Elementen beansprucht
Elemente bleiben im Flow

Position absolute

raus aus dem Fluss
absolut positionierte Elemente werden aus dem Fluss herausgehoben
alle anderen Elemente verhalten sich vom Fluss her so, als ob es gar nicht da wäre
Überlappungen mittels z-index kontrollieren
„Absolute“ Positionierung ist immer „relativ“ zu einem Bezugspunkt
Bezugspunkt kann ein umgebendes, positioniertes Element oder das Stammelement html sein

Note: Absolut und responsive sind nicht die besten Freunde!
Verwende einen parent container mit der Eigenschaft relative, um das folgende Element absolut zu positionieren.

Position fixed

wie ein Fels in der Brandung
absolut positionierte Elemente werden aus dem Fluss herausgehoben
das fixierte Element scrollt nicht mit
das umgebende Element ist für fixierte Elemente immer das Browserfenster (viewport) und nicht das Stammelement html

Note: Elemente hinter einem fixed Element sind nicht klickbar.

Z-Index

um die Ebenenreihenfolge zu ändern
gilt für positionierte Elemente mit dem Wert relative, absolute oder fixed
nur relevant, wenn sich Elemente überlappen
je höher der Wert, desto näher am Betrachter

Note: Dive deeper z-index for nerds

Was liegt wo?

topic 01

Pfadangaben

Relativer Pfad

Absoluter Pfad

Link auf einen Anker – eine Sprungmarke setzen

HTML – dive deeper

topic 02

Grundgerüst eines HTML-Dokuments

Layoutbereiche erstellen

Header

Navigation

Footer

Section

Article

Main

History of web design

in a nutshell

JavaScript kommt zur Rettung (1995)

Vererbung & Kaskade

topic 03

Vererbung

Kaskade

Auf einen Blick

Positionierung im Web

topic 04

static, relative, absolute, fixed

Position static

Position relative

Position absolute

Position fixed

Z-Index

Tim Berners-Lee: A Magna Carta for the web

beyond