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:
• ¹ = hochgestellt
• ₁ = 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"> <!-- 1 = default type für ol! -->
            <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:

1. 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!
2. (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
3. 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
4. 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/