Frau Kalke's Blog - Comcave: Kurs Tag 5 - HTML & CSS - Vertiefung der Referenzierung, Kochbuchprojekt

Mitschrift 10.04.2014

TAG 5

Wiederholung von gestern

Listen

unorderes List

<ul><li></li></ul>
Attribut: Type - Wahl des Aufzählungszeichen
default type: schwarzer Punkt (disc)
disc (1.Ebene), circle (2. Ebene), square (ab 3. Ebene) = Basisaufzählungszeichen in HTML (in CSS sind weitere möglich) so wird das Aufzählungszeichen automatisch gewählt. Man kann auch über den Type die Ebenen mit anderen Aufzählungszeichen versehen.
Aufgabe: Auflistung

ordered List

<ul><li></li></ul>
nummeriert durch
default type: 1 = nummerisch
Attribut: type - Wahl der Nummerierungszeichen
1,a,A,i & I
Attribut start - Startnummerierung angeben bspw. 15
(Ausgabe entweder 15. oder o., O., XV, je nach type)
Schachtelung möglich - Hierarchie wird aufgebaut!

<ol> <li> <ul> <li></li> </ul> </li> </ol>
passt die Aufzählungszeichen nach Ebenen direkt an
(wenn UL in 2. Ebene ist, wird automatisch der circle angegeben und nicht der eigentliche default - die UL registriert die Strukturen/Ebenen)

definition List

Tag <dl><dd><dt></dt></dd></dl>
2 Tags <dd> Definition Desciption & <dt> Definition Text
wichtig für die Strukturierung von Formularen (und CSS)

Verlinkung

Verlinkungsarten am Beispiel Wikipedia:

Dokumenteninterne Verlinkung

über Sprungmarken
die Inhaltsverzeichnisse in Wikipedia- oben das Inhaltsverzeichnis - mit Klick auf einen der Punkte, springt der Browser direkt runter auf der Seite
die Seite lädt sich nicht neu durch, sondern springt direkt dorthin

(Domain)Seiteninterne Verlinkung

Wikipedia verlinkt hauptsächlich intern
die Seite lädt sich neu durch, aber wir bleiben auf der Domain
meist wählt man so, dass die verlinkte Seite im bestehenden Browserfenster geöffnet wird

Externe Verlinkung

wir verlassen die Seite und rufen eine fremde Domain/URL auf
hier wählt man meist _blank

Email Referenzierung

Vertiefung der Referenzierung

Das Schwierigste an Verlinkungen sind die Pfade - also auf vernünftige Organisation achten - dazu später mehr!

EXTERNE VERLINKUNG

=>a-Tag
<a>Ankertext</a> - so erstmal wirkungslos - es fehlt die Zieladresse (Attribut href)

=>Attribut href
<a href="Zieladresse">Ankertext</a> - so haben wir schonmal einen funktionierenden Link (Unterstrichene Linie und Blaufärbung)
Aufgabe zur Vertiefung (Effizientes, strukturiertes Arbeiten)

Hinweis: Link mit http://www. eingeben!

<a href="http://www.google.de">Ankertext</a>

=>Attribut target
Neuer Tab soll sich öffnen - Attribut target! hier kann ich angeben, ob die Zieladresse im selben Fenster oder in einem neuen Tab geöffnet werden soll.
(_blank macht vor allem bei externen Verlinkungen Sinn)

<a target="_blank" href="http://www.google.de">Ankertext</a>

=>Attribut title
Attribut title - gibt den Text des Tooltipps an - also Information, worauf der Link verweist
<a title="öffnet einen Link zur Suchmaschine: google.de (neues Fenster)" target="_blank" href="http://www.google.de">Ankertext</a>

INTERNE VERLINKUNG

bspw. ich habe 2 Seiten (div-1.html & div-2.html) im gleichen Verzeichnis stehen, wie meine Seite (verlinkung.html)

Hinweis: der Dateiname muss vollständig

=> relative Verlinkung:
ich weiß, dass die Seiten alle in einem Verzeichnis liegen - also gebe ich nicht den gesamten Pfad an, sondern brauche nur den Dateinamen anzugeben!
Und es ist kürzer ;)

Vorteil: selbst wenn ich die Struktur verändere, funktioniert der Link weiterhin, WENN die Dateien in einem Ordner sind und bleiben!
Der Browser merkt, dass es sich um eine relative Verlinkung handelt und fügt den Rest des Pfades auf.

<a title="öffnet das Dokument div-2.html" target="" href="div-2.html">relative interne Verlinkung</a>

Startdatei heißt in der Programmiersprache index.html, index.php ...!
Wird von jedem Browser als Startpunkt genommen!

Tipp: Unterverzeichnis in mein Verzeichnis "unterseite" einfügen -> wir organisieren, damit es für uns Entwickler übersichtlicher ist

wenn index = Startpunkt und Unterseiten im unterseiten-Verzeichnis sind, muss ich das Unterverzeichnis mit angeben:
<a title="öffnet das Dokument div-2.html" target="" href="unterseiten/div-2.html">relative interne Verlinkung</a>

Denn wenn wir relativ verlinken, wird immer von dem Verzeichnis ausgegangen, in dem unsere index-Seite liegt!

-> Auf- und Abwärtsverlinkung

Was, wenn die Dateien nicht im gleichen Verzeichnis liegen?
Eine Ebene tiefer->Manchmal müssen wir den Pfad weiterlaufen!
file:///C:/Users/pkalke/Documents/HTML-CSS-Kurs/tag5/unterseiten/div-2.html
-> Wir laufen den Pfad von dort aus einfach weiter.

Ebenen über meinem Verzeichnis->Manchmal müssen wir aber auch zurückspringen!
Wollen auf eine Datei zurückgreifen, die im Pfad vor dem Verzeichnis meiner index-Seite liegt. (liegt also im HTML-CSS-Kurs-Ordner
Lösung: wir müssen den Pfad zurücklaufen mit "../" bzw. ".."als Befehl
<a title="öffnet das Dokument div-2.html" target="" href="../div.html">relative interne Verlinkung</a>
evtl auch mehrere Ebenenen:
<a title="öffnet das Dokument div-2.html" target="" href="../../../../div.html">relative interne Verlinkung</a>

Struktur/Hierarchie:
in der aboluten Verlinkung beginnt alles mit
C:
Users
    pkalke
      Documents
        HTML-CSS-Kurs (div.html, tag3 [rezept.html])
          tag5 (index.html)
            unterseiten (div-2.html, div-3.html)

Relative Pfade:
Pfad weiter gehen: unterseiten/div-2.html
ein Verzeichnis zurück gehen: ../div.html
ein Verzeichnis zurück und öffne die Datei in dem neuen Ordner: ../tag3/rezept.html

in meinem Beispiel: <a title="öffnet das Dokument div.html aus dem Ordner tag3" target="" href="../tag3/div.html">tag3 relative interne Verlinkung</a>

Hilfestellung: Bei der Verlinkung muss ich mir 3 Fragen stellen:

a) wo stehe ich?
b) wo will ich hin?
c) habe ich jeden Ordner berücksichtigt? (ich kann nicht einfach einen Ordner überspringen - muss jeden Ordner angeben)
-> relative Verlinkung istKonzentrationssache!!!

=> absolute Verlinkung:
ich gebe den gesamten Pfad an - also der, der oben im Verzeichnis steht file:///C:/Users/pkalke/Documents/HTML-CSS-Kurs/tag5/div-2.html
ich weiß, dass die Seiten alle in einem Verzeichnis liegen - also gebe ich nicht den gesamten Pfad an, sondern brauche nur den Dateinamen anzugeben!

Aber Achtung: wenn ich was in der Struktur verändere (bspw. wenn ich einen Ordner in dem Pfad umbenenne) funktioniert der Link nicht mehr!
DER PFAD DARF NICHT VERÄNDERT WERDEN!

<a title="öffnet das Dokument div-2.html" target="" href="file:///C:/Users/pkalke/Documents/HTML-CSS-Kurs/tag5/div-2.html">relative interne Verlinkung</a>

Hinweis! Dateinamen und Ordner dürfen keine Leerzeichen oder Umlaute enthalten - das gibt Probleme in der URL! In der Programmierung am besten auch auf Kleinschreibung beschränken und maximal Bindestriche ("-") oder Unterstrich ("_") verwenden - wir sind nicht im Office Paket ;)

Was, wenn ich die Aufgabe habe auf einen Link zu referenzieren, in dem Leerzeichen enthalten sind

entweder %20 einfügen in den Link
oder besser den Admin anrufen und sagen, dass er Leerzeichen rausnehmen soll - das ist unprofessionell und verursacht Probleme!

DOKUMENTENINTERNE VERLINKUNG

ich verlinke Rauten auf den Namen anfang, hauptteil, schluss...!
-> besteht aus 2 Befehlen!

<a href="#anfang">Anfang</a>
<a name="anfang"> - in den Text!
= von # nach name!!!

Beispielquelltext:
<a href="#anfang">Anfang</a>
<a href="#hauptteil">Hauptteil</a>
<a href="#schluss">Schluss</a>

<h1><a name="anfang"> Anfang </h1>

<p>
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam        </p>
<h1><a name="hauptteil"> Hauptteil </h1>
<p>
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam        </p>
<h1><a name="schluss"> Schluss </h1>
<p>
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam        </p>

Hinweis - Leerzeichen werden als Unterstrich notiert:
<a href="#mein_hauptteil">
<a name=mein_hauptteil">

Hinweise:

Die Referenzierung findet dort statt, wo der das Attribut name (also <a name...>) gesetzt wird!
nicht mehrere Worte verwenden - maximal mehrere Worte mit Untertrich verbinden!

Sprungmarke zurück an den Anfang - nach oben:

dazu <a href="#zurueck">zurück</a> die Überschrift des Textteils und
<a name="zurueck"></a> vor die <a hrefs am Anfang setzen

Beispielquelltext:

<body>
        <a name="zurueck"></a>
        <a href="#anfang">Anfang</a>
        <a href="#hauptteil">Hauptteil</a>
        <a href="#schluss">Schluss</a>

    <h1><a name="anfang">Anfang </h1>
        <a href="#zurueck">[zurück]</a>
        <p>
        Lorem ipsum dolor sit amet, conset....

Zum Anfang der Seite zurückspringen:

<a name="top"> ->nach <body>vor den Text!
<a href="#top">[zurück]</a>
= von # nach name!!!

EMAIL REFERENZIERUNG (Erklärung auf Selfhtml -> Link)

Quelltextbeispiel:
<p>
Hier können Sie dem Autor eine Mail senden:
<a href="mailto:info@base-solution.de">Email an den Autor</a>
</p>

Hinweis: Funktioniert nur da, wo jemand einen Email-Client installiert hat ;) Wo nichts installiert wurde, kann nichts aufgehen...
->Daher ist es sinnvoll, im Verweistext die E-Mail-Adresse noch einmal explizit zu nennen, so wie im obigen Beispiel, damit Anwender, bei denen der E-Mail-Verweis nicht ausführbar ist, auf Wunsch separat eine E-Mail senden können.

Parametrisieren möglich:
=>Regeln:

voran das Fragezeichen (?)
ohne Leerzeichen
Parameter, welche durch das Ampersand (&) verknüpft werden
- mehrere Emailadressen werden durch Komma (,) getrennt
Reihenfolge der Parameter ist egal

=>Parameter

bestehen immer aus einem Paar! Schlüssel (cc=) und Wert (Emailadresse):

cc = carbon copy (wie früher der Durchschlag)

ich kann mich auch auf CC setzen:
<a href="mailto:info@base-solution.de?cc=meineemailadresse@example.de">Email an den Autor: Name Autor; Emailadresse</a>

bcc = blind carbon copy

BSP:<a href="mailto:info@base-solution.de?cc=heido.bratze@example.de&bcc=ich@ich.de">Email an den Autor</a>

subject= Betreffzeile

<a href="mailto:info@base-solution.de?cc=heido.bratze@example.de&bcc=ich@ich.de&subject=Ihre%20Anfrage%20an%20uns">Email an den Autor</a>

body = Emailtext

<a href="mailto:info@base-solution.de?cc=heido.bratze@example.de&bcc=ich@ich.de&subject=Ihre%20Anfrage%20an%20uns&body=Sehr%20geehrte%20Frau/Herr,%20vielen%20Dank.">Email an den Autor</a>

Hinweise:

Leerzeichen werden als %20 markiert!
Zur Übersichtlichkeit die Parameter trennen - also vor dem & in einer neuen Zeile darstellen.

Hier können Sie dem Autor eine Mail senden:
<a href="mailto:info@base-solution.de?
cc=heido.bratze@example.de
&bcc=ich@ich.de
&subject=Ihre%20Anfrage%20an%20uns
&body=Sehr%20geehrte%20Frau/Herr,%20vielen%20Dank.">Email
an den Autor</a>

=>Struktur: <a href="mailto:Emailadresse?cc=Emailadresse,Emailadresse&bcc=Emailadresse&subject=Ihre%20Anfrage%20an%20uns
&body=Sehr%20geehrte%20Frau/Herr,%0Aneue%20Zeile%20vielen%20Dank."> </a>

=>Maskierung:
(Unicode-Zeichentabelle-fuer-die-maskierung-der-email-parameter.pdf)

Wie bekomme ich eine neue Zeile hin bzw. Sonderzeichen eingefügt?
bspw: neue Zeile = %0Aneue%20Zeile

Tipps für die Bennenung der Dateien und Verzeichnisse
Nomenklatur:

Allgemeine Kleinschreibung der Verzeichnisse
Entweder unterstrich oder Minuszeichen
Bennennung der Verzeichnisse: 3. Tag (schlecht) // Tag-3 //tag-3-uebungen
Bennennung der Dateien: rxf1.html (schlecht) // rezepte-hauptgang.html

=>Bilden Sie sprechende/selbsterklärende Verzeichnis- und Dateinamen und bauen Sie Hierachien auf!
Beispiel: thema-unterthema-subjekt.html

!!!Programmierung ist Strukturierung und Organisation!!!
je organisierter ich bin, desto einfacher und fehlerfreier läuft es

Planung

Strukturierung bei der Programmierung: Wie organisiere ich mich am Besten?
keine doppelten Wege
ich muss wissen, was ich tue und wo ich hin will
ich muss vorbereiten und
kleine Schritte separieren

Übung: Kochbuch-Projekt
(Projekt-Kochbuch.pdf)

Planung

Struktur (wie organisieren wir unsere Dateien)

Planung der Dateiorganisation

index.html = Startseite
images

eigenes Verzeichnis/Ordner für images

unterseiten-Verzeichnis

unterseite.html

Erstellung eines Inhaltsverzeichnisses
Auflistung der Einzelrezepte
Definition der Detailangaben (erstmal Überlegungen, was wichtig)

Anzahl Bilder
Planung der Zutatenformatierung
Mit/Ohne (Koch|Back)Anleitung
Quellverweis (ja|nein)
...

Wie referenzieren wir überhaupt?

Referenzierung aus dem Inhaltsverzeichnis definieren
Referenzierung der Einzelrezepte definieren

Rezeptdurchlauf planen - wichtige Vorarbeit!

wir verlinken immer zum vorigen und zum nachfolgenden Rezept - Klare Struktur für Rezeptdurchlauf

Inhalt - in diesem Fall: Template mit 8 Blöcken

Planung der inhaltlichen Details

Navigation / Referenzierung
Überschrift: Rezept
Rezeptbeschreibung
Hauptbild
Zutatenbilder
Zutaten inkl. Mengenangaben
Zubereitungstipps
Quellbezug und Copyright / Autor

Umsetzung

Inhalte zusammen tragen
Inhalte strukturieren
Inhalte in Textform als .html speichern
Verlinken

Wie referenzieren wir eigentlich?

Formatieren

Evaluation

Navigationsprüfung
Inhaltsprüfung
Detailprüfung

KOCHBUCH-PROJEKT
Umsetzung des Projektes:
erstmal template.html = einen Rohling basteln mit 8 Blöcken (div-Containern)
Vom Groben ins Feine vorarbeiten
das Template x-mal kopieren

Schritte:
Erst Excel-Rezeptdurchlauf
dann index-Seite
dann Templates kopieren und navigation hinbekommen.
Der Rest ist Formatierung

Leserfreundlichkeit:
Sprungmarke an den Anfang - im Template verankern