Frau Kalke's Blog

Montag, 14. April 2014

Kurs Tag 7 - HTML & CSS - Tabellen (Grundlagen)

Mitschrift 14.04.2014

TAG 7

Besprechung der letzten Kochbuchprojekte

<em>= physikalisches Tag, welches Text als besonders wichtig hervorhebt
Meta-info: empatisch

Hinweis:

Textausrichtung in Tabellen -

v-align=top (vertical align), damit in der Tabelle der Text linksoben anfängt: <ol style="v-align: top";>...

alt-Attribut - alternativtext, falls Bild nicht <img border="0" alt="" src="../bilder/vegetarisch1.jpg" width="30%" height="100%" />

Tipp: bevor wir ein Projekt rausgeben - immer nochmal den Funktionstest für alle Seiten/Elemente/Links machen! In der IT spricht man von Konsistenz - ist es einheitlich auf jeder Seite dargestellt und tituliert?

Tabellen

Link zu Selfhtml/Tabellen
neues dokument - tabelle1.hml

ähnlich wie bei Listen, brauchen wir auch bei Tabellen einen umfassenden Tag, der zeigt: "dieser Bereich zeigt eine Tabelle!"

<table>-Tag
Achtung vor Falschschreibung - Blaufärbung im Browser zeigt Richtigkeit an:
also nicht tabel sondern table!

benötigt schließendes Tag: </table>

Wie ist eine Tabelle aufgebaut?
klassische Tabelle - bspw. Excel:
Eine Tabelle besteht aus:

Spalten
Zeilen

HTML arbeitet nach einem anderen Prinzip als Excel - und zwar über die Zeilen
<th>-Tag (table head / erste Zeile als Ersatz für <td> in der ersten Row!

ist automatisch fett und zentriert! (kann ich nur mit CSS "knacken"/verändern)
bildet die Spaltenüberschrift
sind für Überschriften reserviert

<tr> -Tag (table row/Tabellenzeile)
innerhalb einer Row, benötigen wir Datenzellen:
<td>-Tag (table data/Tabellenzelleninhalt) hier kommen Inhalte rein!

-> alle Tags in einer Tabelle benötigen schließende Tags!

Tipp: Rahmen um die Tabelle:
Damit wir eine Tabelle sichtbar machen können, setzen wir innerhalb des table-tags ein Attribut ein: border="1":
<table border="1">...

Matrix (einfach):

<!doctype html>
<html>
    <head>
        <title>Tabelle 1</title>

    </head> 
        <table border ="1">
            <tr> 
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
            </tr>

            <tr> 
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
            </tr>

            <tr> 
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
            </tr>


        </table>
    <body>

    </body>
</html>

tabelle1.html - Ausgabe im Browser

Matrix mit <th>-Tag / Head :

<!doctype html>
<html>
    <head>
        <title>Tabelle 1</title>

    </head> 
        <table width="400 "border ="3">
            <tr> 
                <th>Headline 1</th>
                <th>Headline 2</th>
                <th>Headline 3</th>
                <th>Headline 4</th>
            </tr>

            <tr> 
                <td width="25%">Tabellenzelle</td>
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
            </tr>

            <tr> 
                <td>Tabellenzelle</td>
                <td>Tabellenzelle - <br /> wird zur Anschaulichkeit mal größer gemacht
                    </td>
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
            </tr>

            <tr> 
                <td>Tabellenzelle</td>
                <td>Tabellenzelle</td>
                <td> </td>
                <td>Tabellenzelle</td>
            </tr>


        </table>
    <body>

    </body>
</html>

tabelle1-modifiziert.html - Table mit Head :)

Tabelle-Aufbau in HTML:
Rumpf > Reihe (ist Container für Zellen) > Zelle(n)
-> aus den nebeneinandergestellten Zellen heraus bilden sich Spalten!

aus den nebeneinandergestellten Zellen heraus bilden sich Spalten!

Aufgabe: Vergrößern Sie die Zelleninhalte durch längeren Text und Breaks in den Zellen. Experimentieren Sie mit den Zelleninhalten - nehmen Sie welche heraus etc.

Regeln:

Hauptregel einer Zelle: Durch Inhalt oder andere Angaben, ist die maximale Breite einer Spalte gültig!
Die Zellenbreite wird vom Inhalt bestimmt!!! die Tabelle ist von Grund aus dynamisch: die Zellen-Höhe und -Breite passt sich automatisch der Länge des Textes an.

Hinweis: Inhalt vor Attributangaben! gebe ich bspw 25% für die Zellenbreite an, aber der Text einer anderen Zelle in der Spalte ist größer (aufgrund des Inhaltes), dann ist die Prozentangabe nichtig!

der Browser verzeiht auch nicht geschlossene table datas - aber es ist syntaktisch nicht korrekt - beeinflusst die Lesbarkeit negativ! Bitte nicht versuchen Zeichen zu sparen, sondern syntaktisch korrekt arbeiten!
Egal ob man eine Zelle leer lässt oder eine <td> weglässt (fehlende Zelle) - das Ergebnis ist eine Lücke in der Tabelle - wenn wir eine leere Zelle produzieren wollen, besser ein erzwungenes Leerzeichen einsetzen:   sonst werden die Zellen aufgerückt :(
-> ERGO: die Anzahl der <td>s in den <tr>s muss immer gleich sein!!!

Welche Attribute können wir dem table-Tag geben?
hier ein Link zu Selfhtml - hier wird angegeben, welche Attribute die Table-Tags annehmen können!
Nochmal: Attribute sind Paare aus Schlüssel & Wert. Sie werden durch ein Leerzeichen getrennt!

border="" (bspw. 1,5...)

Rahmenlinien
verleiht der Tabelle ihr Erscheinungsbild durch Setzung eines Rahmens

width="" (bspw. 200, 800...)

= Breite der Tabelle
nur nummerischer Wert, keine Maßeinheiten!
Hinweis zur Mindestbreite: die Tabelle kann nur so klein werden, wie der größte Inhalt einer Zelle an Zeichen hat bzw. an Platz benötigt!
wir können die Width auch in jede einzelne Zelle schreiben: <td width="25%"

Wir müssen es nicht in jeder Zelle eingeben, da maximal nur die Gesamtbreite des Browserfensters der Tabelle als Breite zur Verfügung steht!

bgcolor="" (kann ich nicht nur für table sondern auch für body nutzen)

Backgroundcolor/Hintergrundfarbe
kann direkt gesetzt werden
sowohl namedcolor als auch Hexadezimalangaben!
hat nichts mit CSS zu tun!
wenn wir die border rausnehmen bzw. auf null setzen, sehen wir dank der Hintergundfarbe trotzdem Zellen! :)

cellspacing="" (bspw. 10...)

Außenabstand um die Zellen!!!
der Abstand der einzelnen Zellen ist gewachsen - 10 px bei "10", oder 30 px bei "30"
der Außenrahmen wächst mit!
=Abstand der einzelnen Zellen zur nächsten Zelle und zum Rand!

cellpadding="" (bspw. 10)

Innenabstand in der Zelle!!!
der Abstand des Zelleninhaltes zum Zellenrand ist gewachsen

valign=""

mit diesem Attribut können wir alle Zelleninhalte ausrichten
<td valign="">

top
middle
bottom
(baseline)

colspan="" ("1"... maximal Anzahl der Spalten)

column span (=Zellen verbinden) -> in xls ganz easy
wenn ich jetzt in die <td colspan="2" angebe, dann schiebt er die anderen Zeilen nach rechts...
ERGO: Wir müssen eine Zelle entfernen!!!

Aufgabe: Bitte verbinden Sie die beiden Zellen neben der Bundestagszeile:
Lösung: eine der beiden tds löschen und bei der anderen <td colspan="2"> eintragen. Tadaaa! :)

Hinweis: Die Summe aller colspans muss nachher wieder 4 (Anzahl der tds wie bei den anderen Zeilen!) ergeben

Aufgabe: jetzt 3 Zellen verbinden und nachher sogar 4 Zellen verbinden!

rowspan="" ("1"... maximal Anzahl der Zeilen!)

Reihen verbinden!
also in der einen tr - die td
eine Zelle erstreckt sich in einer Spalte über mehrere Zeilen hinweg (rowspan = Zeilen spannen).
Die Angabe ist nur wirksam, wenn die Tabelle mindestens so viele Zeilen besitzt wie angegeben. - klar! ;)

Hinweis: Die Ur-Table ist nur dafür vorgesehen Inhalte zu strukturieren - aber mit CSS können wir sie später auch schöner gestalten!

Aufgabe: bauen Sie diese Tabelle nach! - colspan und rowspan!

Tipps zum Tabellenbau!
Wenn wir eine Tabelle planen, dann zunächst auf dem Papier!
von Außen nach Innen arbeiten!
Am Besten keine Tabellen mit copy & paste erstellen, sondern besser immer von Grund auf neu erstellen.

erst Grundgerüst (HTML, head, body)
dann Tabellenrumpf <table></table> (evtl border= setzen)
dann Tablerows <tr></tr>
dann Table Data reinsetzen (Zellen) <td></td>
und mit Inhalten füllen
zuletzt formatieren mit weiteren Attributen

(Haus-)Aufgabe: Rechnungsmuster nachbauen
Ziel aus der HTML-Datei eine pdf generieren

Wie gehe ich vor?

audrucken und
alles mit Linien in Tabellenfelder setzen!

Wofür brauchen wir Tabellen?
Rechnungen, ...

Freitag, 11. April 2014

Kurs Tag 6 - HTML & CSS - Kochbuchprojekt

Mitschrift 11.04.2014

TAG 6

Heute haben wir an unserem Rezeptbuch-Projekt gearbeitet - daher keine wirkliche Mitschrift für heute.

Nette Links:

!!! Methodik ist in der Entwicklung ein sehr wichtiges Thema !!!

->Templating = eine Vorlage für alles!!!

Welche Methoden haben uns geholfen - wie sind wir vorgegangen?

Template erzeugen
Wissen wie das Ergebnis aussehen soll
Strukturiert vorgehen
Vorbereitungen treffen (bspw. excel-Tabelle mit Linkverlauf)
...

Welche Fehler würden wir nicht mehr wiederholen

Index und Rezeptseiten auf einer Ebene
mehr Zeit für das Grundtemplate nehmen
...

Aufgabe für Montag:

Buch Seite 76 - Tabellen!
Position 8.1 Aufbau einer Tabelle

Versuchen Sie eine eigene Tabelle zu erstellen.

Donnerstag, 10. April 2014

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

Mittwoch, 9. April 2014

Kurs Tag 4 - HTML & CSS - DIV- und SPAN-Container, Verlinkungen

Mitschrift 9.04.2014

TAG 4

Besprechung der Hausaufgaben.

Wir haben viele schöne Anregungen bekommen:

&frac38 = 3/8
& = KaufmannsUND = Ampersand
Regel-Nr.1: Höhen und Breitenangaben:

100 = gemeint: 100 px (px automatisch gemeint)
100% = gemeint 100%

Angaben mit : oder =""

style tag (lehnt sich ans CSS, daher andere Schreibweise): style="width: xxxpx; text-align: justify;"

im style formatiert, muss ich die die Attribute mit : versehen und die Maßeinheiten px oder pt... angeben!

andere tags (normale HTML Attribuierung): Image src="..." width="..."

ohne Maßangaben von pt/px, sondern nur %

Div-Container gehören mit zu den wichtigsten Strukturierungselementen, die wir haben - Hinleitung zu CSS!
Sonderzeichen beginnen immer mit einem & und enden mit einem ; also:
&Anweisung;
weitere Zeichenformate:

<sup>1</sup> = hochgestellt
<sub>1</sub> = tiefgestellt

Länderfahneneffekt:

3 Schichten übereinanderlegen

1. Schicht bspw. 900px
2. Schicht bspw. 895px
3. Schicht bspw. 890px

das <p> möchte immer eine Reihe für sich haben, auch wenn es in einem div-Container mit einem Bild zusammen ist, wird es sich nicht neben das Bild stellen.
ein div-Container wird nur dargestellt, wenn er Inhalt hat.
width:

entweder relativer Wert: %
oder absoluter Wert: px (Maßangabe muss ich nicht tätigen - automatisch)

Attribute:

font Attribute: nur color, size, face!
style-Attribute:
Span-Attribute:

<p align="justify"> -> justify, left, right oder center möglich!
Tag-Merkmale sind nur im öffnenden Teil - der schließende Tag-Teil umfasst nur das Attribut mit "/": </span>

Weiter geht es mit Div-Containern:

(div-2.html)

div-Container gehören zu den Strukturierungeelementen
Beschreiben einen Bereich!
Tipp: Vom Groben ins Feine!

Immer erst den Bereich beschreiben mit <div></div>
dann erst die Attribuierung vornehmen <div style="background-color: silver;">
=>um Fehler zu vermeiden und die Struktur zu überblicken!

Wenn ich einen <p> in einen div "gefangen nehmen", der bspw. auf 600px width beschränkt ist, dann dehnt sich der Paragraph auch nur auf maximal 600px aus.

div = division = Bereich!
Bildet ein Blockelement

Unterschied zwischen div und span

"Über die 2 Elemente DIV und SPAN kann CSS erst seine volle Pracht entfalten. DIV steht für das englische "division" in der Bedeutung "Bereich" und ist ein allgemeines Block-Element. Lustiger weise hat SPAN im englischen auch die Bedeutung von "Bereich", ist aber ein Inline-Element.
Beide Elemente werden primär zum Begrenzen von Bereichen genutzt. Und über die Attribute der Elemente kann dann Design in die umschlossenen Bereiche gebracht werden. Dabei können die Elemente geschachtelt werden.
Wichtig ist zu verstehen, was der Unterschied zwischen den 2 Elementen ist. DIV ist ein Blockelement. Nach ein dem DIV erfolgt nach der Definition ein neuer Block. SPAN dagegen kann innerhalb eines Bereiches angewendet werden. Im folgenden Beispiel wird der Unterschied deutlicher.
Der CSS-Befehl background-color:farbe; bewirkt, dass der Hintergrund des Elements eingefärbt wird."

Unterschied zwischen <div> und <span>

span-Tag <span>
gehört zu den Zeichenformaten!
span = spanning = umfassen
<span style="background-color: silver;"> Text, den ich hervorheben möchte z.B. durch eine andere Farbe im Hintergrund</span>
Hiermit kann ich eine Passage einspannen, die ich individuell gestalten kann!

"Das span-Tag wendet HTML-Attribute auf Inhalte und Inline-Elemente an. Inline-Elemente sind HTML-Elemente, die nicht zu einem Zeilenumbruch führen wie z.B. a, img, label und input.
HTML span transportiert CSS-Stile zu diesen Inhalten oder dient als Anker für JavaScript, wenn z.B. Text oder Bilder dynamisch ausgetauscht werden sollen.
HTML span fügt den betroffenen Elementen keinerlei Formatierung hinzu, wenn für das span-Tag keine CSS-Stile angelegt sind.
In dieser Hinsicht ist das span-Tag das Gegenstück zum div-Tag, das ein Blockelement bildet (das div-Tag führt zu einem Zeilenumbruch). Beide Tags nehmen eine Reihe von Tags auf, um Attribute oder CSS-Stile auf sie anzuwenden, ohne selber eine Formatierung einzubringen.
Innerhalb eines <span>-Tags dürfen nur Inline-Elemente liegen – also keine HTML-Tags wie div, table, ul, li oder p.
<span>-Tags können ineinander verschachtelt werden.
<div style="border:2px solid dimgray;"> 
  <p> Wenn mitten im Text 
    <span style="color: green;">ein paar Wörter anders aussehen</span> 
    als der Rest, dann war's bestimmt ein <span>-Tag. </p> 
</div> 
Wenn mitten im Text ein paar Wörter anders aussehen als der Rest, dann war's bestimmt ein <span>-Tag."

Unterschied <span> und <font>-Tag
Span und font machen das gleiche, allerdings ist span an CSS angekoppelt und font ist der ältere Textformatierungstag, der nur größe, Schriftart und Schriftfarbe verändern kann.

Listen (netter Link bei selfhtml):

Buch - Seite 70 / Kapitel 7!
Wir haben die Möglichkeit die Vorzeichen und Nummerieungen zu ändern:

Aufzählung/unordered List <ul>

Aufzählungslisten sind z.B. von Bedeutung, um Produkteigenschaften oder Argumente für eine These übersichtlich darzustellen. Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen (Bullet) versehen.
<ul> leitet eine Aufzählungsliste ein (ul = unordered list = unsortierte Liste). Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet den Listeneintrag. Es ist zwar nach HTML-Standard erlaubt, das abschließende </li>-Tag wegzulassen, doch davon ist abzuraten. </ul> beendet die Liste.
Wie das Bullet dargestellt wird, bestimmt dabei der Web-Browser.
Das Verschachteln von Listen ist ebenfalls möglich.

Zwischen <li> und </li> darf eine komplette weitere Liste stehen. Auch andere Listentypen sind dabei erlaubt.
3 Arten von Aufzählungszeichen (Kreis, Punkt, Quadrat)
Attribut für die Liste: type: circle, disc und square
disc ist der default-type, also der voreingestellte Type - die anderen beiden sind optional, können also eingestellt werden.

Nummerierung/ ordered List <ol>

Nummerierte Listen sind z.B. von Bedeutung, um nacheinander auszuführende Aktionen oder Rangfolgen übersichtlich darzustellen. Bei einer nummerierten Liste werden alle Listeneinträge automatisch durchnummeriert.
<ol> leitet eine nummerierte Liste ein (ol = ordered list = nummerierte Liste). Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). </li> beendet den Listeneintrag. Es ist zwar nach HTML-Standard erlaubt, das abschließende </li>-Tag wegzulassen, doch davon ist abzuraten. </ol> beendet die Liste.
Hinweis: Verschachteln von nummerierten Listen ist ebenfalls möglich, bewirkt aber keine Gesamtnummerierung. Automatische Nummerierungshierarchien wie 1, 1.1, 1.1.1, sind mit HTML alleine nicht möglich.

Arten: a.,b.,c. (=a)// A.,B.,C. (=A)//1.,2.,3. (=1) //I.,II.,III.(=I) //i.,ii.,iii. (=i)
Type-Optionen: a,A,1,I,i
default-type: <ol type="1">
Startpunkt frei wählbar mit Attribut start="17"

Beschreibungslisten / definition List <dl>

Definitionslisten sind für Glossare gedacht. Glossare bestehen aus einer Liste von Einträgen. Die Einträge eines Glossars bestehen aus einem zu definierenden Ausdruck (z.B. ein Fachbegriff) und der zugehörigen Definition.

erst in den letzten Jahren dazugekommen
z.B. für Glossare
wichtig bei Formularen oder CSS-Formatierungen!

<dl> leitet eine Definitionsliste ein
(dl = definition list = Definitionsliste).
<dt> leitet einen zu definierenden Ausdruck ein
(dt = definition (list) term = Ausdruck in der Definitionsliste).
<dd> leitet eine Definition eines Ausdrucks ein
(dd = definition (list) definition = Definition in der Definitionsliste).
</dl> beendet die Liste. Die End-Tags </dt> und </dd> dürfen zwar auch fehlen, doch davon ist abzuraten

->Wofür brauche ich Listen im Web?

bspw. Listen für Wettkämpfe
Paragraphen und Absätze im Recht
Inhaltsverzeichnisse, Agenden

Hauptpunkte mit Untergliederungen

Listen sind aber auf fast jeder Seite - beim Inhaltsverzeichnis, beim Menü der Webseiten!

überall wir mit Listen strukturiert!
definierte Aufzählungszeichen über CSS
nicht nur untereinander auch nebeneinander (gekippt = in die Waagerechte gelegt)
ol/ul ist sehr flexibel einsetzbar!

->Wie erstelle ich Unterpunkte?
<h1>Beispiel für unordered List - Vereinsagenda</h1>
        <ol Start="1" type="I"> 
            <li>Begrüßung</li>
            <li>
                Vorstellung der Tagesthemen
(unterhalb des Listentextes noch eine weitere ol einfügen!!!)
                <ol type ="a">
                    <li>Erfolgsmeldungen der Abteilungen</li>
                    <li>Ehrung der Verstorbenen</li>
                </ol>
            </li>

Frage: Was passiert, wenn wir keine Typisierung einstellen - also blankes ol ohne Attribuierungen
Antwort: Der Browser wählt automatisch die default-typen.

UND: der Browser erstellt automatisch verschiedenen Aufzählungszeichen für die unterschiedlichen Unterpunkte.
1. Ebene: Disc
2. Ebene: Circle
ab 3. Ebene: Square

Verlinkung/ Referenzierung

Mit den Definition Lists kommen wir zu den Verlinkungen!
Buch Seite ab 52

3 Verlinkungsarten:

Dokumenteninterne Verlinkung auf einer Seite
(selten, wird teilweise sogar übersehen)

von oben nach untern oder andersherum
keine echte Verlinkung sondern springen auf einer Seite von einen Punkt zum Anderen.
#name zu name => Sprungmarken!

(Seiten)interne Verlinkung (bleiben auf der gleichen Domain)

häufig bei Shops (bspw. conrad.de) oder Wikipedia
http://www.meine-domain.de/sofa.html zu
http://www.meine-domain.de/sessel.html

Externe Verlinkung (häufigste Art zu verlinken)

von der einen auf die anderen Domain verlinken

http://www.meine-domain.de zu http://www.deine-domain.de

Email Referenzierung (keine direkte Verlinkung)

Öffnen des Emailclients

Beispiel für Dokumenteninterne Verlinkung

Ein Link ist ein anker-Tag (a-Element):

<a>Ankertext = Wort, welches ich verlinken möchte</a>
attribute:

href=""

erst mit dem Attribut href wird ein Link produziert (inkl. Unterstrich)!
<a href="">Ankertext</a>
a= Anker, h = Hyper, Ref = Referenzierung
href = Zieladresse, mit welcher verlinkt werden soll

target=""

Angabe, in welcher Instanz die Zieladresse geöffnet werden soll.

im selben Fenster oder
in einem neuen Tab (_blank)

durch ein weiteres Attribut: target, wird das Ziel eingegeben.
bspw.: mit _blank wird über den Link die Zielseite in einer neuen Reiterkarte geöffnet:
<a target="_blank" href="http://www.google.de">

title=""

Tooltipp/ Beschreibungstext zum Link wird beim "hover" angezeigt

externe Verlinkung

<a title="Beschreibungstext zum Link" target="_blank" href="http://www.webadresse.de">Ankertext</a>

-> hier würde ich präferieren die Seite in einem neuen Tab zu öffnen - also mit _blank

(Seiten)interne Verlinkung

<a title="Beschreibungstext zum Link" target="_blank" href="Dateiname.html">Dateiname</a>

-> hier bleiben die Leute eh auf meiner Seite, somit mache ich nicht extra ein neues Tab auf, sondern leite sie im gleichen tab auf die nächste Seite meiner Webpage - also ohne _blank

Angabe des Dateinamens je nachdem in welcher Verzeichnisebene die Datei liegt
(Hinweis: Verzeichnis hier gleich Ordner)

Unterscheidung in relativ oder absolut:

relativ:

Verzeichnisintern:An sich versuche ich immer die Seiten, auf die ich verweise, im gleichen Ordner zu haben. (Verzeichnisintern) -> dann brauche ich nur den Dateinamen benennen

Im Unterordner des Verzeichnisses: Es kann aber sein, dass ich noch einen Unterordner in meinem Verzeichnis haben, dann gebe ich den Unterordner vor dem Dateinamen an Name_unterordner/Dateiname.html

In einem Übergeordneten Verzeichnis: Oder es kann sein, dass es ein Verzeichnis darüber gelagert ist, dann muss ich dem Browser sagen, dass er ein Verzeichnis hochwandern muss. Dies geschieht mit zwei Punkten für die übergeordneten, gleichen Ordner: "..Übergeordnetes _Verzeichnis/Verzeichnis/Dateiname.html

absolut:

einfachere und fehlerärmere Lösung!

einfach den gesamten Pfad eintragen, der oben im Fenster des Explorers angezeigt wird.
file://C:/Users/name/Ordner/Unterordner/Dateiname.html

<a title="Tooltipp bzw. Angaben zum Linkinhalt bzw. Beschreibungstext zum Link" target="_blank" href="..Hauptordner/Unterordner/Dateiname.html">Dateiname</a>

wenn der Browser keine Infos mit http oder www erhält, dann führt er den Pfad aus und schreibt ihn automatisch unten in die Leiste:

Vorschau auf Morgen: Wie bereite ich mich vor, dass ich effektiv arbeite = Management der Arbeit mit HTML :)

Linktipps: Erklärung zu HTML-Grundlagen:
http://www.mediaevent.de/
http://www.html-seminar.de/

Dienstag, 8. April 2014

Kurs Tag 3 - HTML & CSS - weitere Strukturierungselemente

Mitschrift 8.04.2014

TAG 3

Grundgerüst einhalten!
Dem html-Text Struktur geben! -> bestimmt die Qualität!

weiter zu Strukturierungelemente:

=>Aufzählungen und Listen:

Listen (geordnet & ungeordnet) und Aufzählungen (unordered List) - Listen mit HTML

Aufzählungen (unordered list)
<ul>...</ul> - Bereichs-Rahmen
und dann die Listen seperat aufführen, indem die listitems in den Rahmen eingefügt werden:

<ul> 
        <li>Äpfel</li> 
        <li>Birnen</li>
        <li>Bananen</li>
</ul>

-------------------------------------------------------------------------------------------------------------

Exkurs: Sonderzeichentabelle.de
&frac14 = 1/4
&frac12 = 1/2
©2014 - P.Kalke = Copy-Zeichen

--------------------------------------------------------------------------------------------------------------

=> Listen (ordered list)
<ol>
<li> Listitem</li>...
</ol>

=>Bild einfügen:
<img /> - benötigt kein schließendes Tag
wird ausschließlich durch Attribute gesteuert!
src= Quelle
Das Bild muss im gleichen Ordner/gleiche Quelle, wie html-Datei liegen!!!
relative Angaben: bspw. width=50% (-> in Relation zum Originalbild/Ausgabeseite)
Reguliert sich proportional zum Ausgabefenster.
Wenn wir das nicht wollen, dann geben wir feste Größen ein:
width="400"
height="" - > wenn ich die Höhe nicht angebe, dann berechnet sich der Browser die Bildgröße automatisch

Frage: Wie kann ich 3 Bilder nebeneinander stellen?
Antwort: die Bildbreite bei jedem Bild in relativen Angaben auf width = "33%" (ggfs auch 32%) stellen.

=> Div-Container
DAS Strukturierungselement in HTML, mit dem ich ganz viel strukturieren kann, weil es ein Blockelement ist.
<div>...</div>
Der Div-Container kann weitere divs in sich schachteln, um dann den Text wieder ander zu formatieren.
Die wahre Stärke des div-Containers kommt erst zum Tragen, wenn ich mit CSS arbeite.

Einen Rahmen um den div-container setzen und mehrere div Container ineinander machen, um dann auch verschiedene Farben zu erhalten

Neues Attribut: style!
Ein Container kontinuiert - hält zusammen.
; = Abschluss einer Formatierungseinheit aus Attribut und Value
    BSP.:     <div align="right" style="width: 200px; background-color: silver;">
            Das ist ein Test
            </div>
unterschiedliche Schreibweise der Werte:
HTML pure Attribute: {attrib}="{value}" <-> div-Container: style="{attrib}:{value};"

Aufgabe für heute Nachmittag:
auf Basis dieser Datei - ein Rezept raussuchen mit Bildern, etc.

Frau Kalke's Blog - Comcave

Seiten