Kurs Tag 8 - HTML & CSS - Tabellen (Matrix & Methodik) & Formulare (Grundlagen)

Mitschrift 15.04.2014

TAG 8


Seite 82 im Buch HTML lesen - Thema: col (colgroups)
-> dieses Thema wird nicht weiter in der Vorlesung betrachtet

 

Besprechung der Hausaufgaben - Tipps:

• Linie einfügen in einer Tabelle:  
• <tr><td colspan="7"><hr /></td></tr> (oder eben die Spaltenanzahl über die die Linie reichen soll)
• Leerzeile einfügen: <tr><td colspan="8"></td></tr>

 

Grundsätzliche Methodik: Schritte, wenn ich etwas nachbauen möchte:

1. ausdrucken
2. Tabellenbereich identifizieren
3. Raster bilden
• Spalten zählen und einzeichnen
• Spalten auf das restliche Formular ausbreiten und ggfs ergänzen
• nun die Reihen einzeichnen und nummerieren
  (Tipp: auch Leerzeilen sind als Reihen zu sehen)
4. Dann ein neues html-Dokument im Editor öffnen
5. das Grundgerüst bauen (doctype,html,head, body)
6. dann die Tabellenstruktur vom Großen ins Kleine aufbauen
   (Tipp: zunächst border="1", damit die Zellen sichtbar werden)
7. eine Musterreihe (tr) mit der Anzahl der Spalten (td) anlegen
8. Musterreihe durch copy & paste so häufig vervielfältigen, dass die Anzahl Zeilen erreicht wird.
9. und nun Zeile für Zeile die Struktur rausarbeiten und Text einfügen
10. erst wenn die Struktur steht, dann formatieren

Raster für Musterrechnung

Hinweis:
Die Suchmaschinen sehen Tabellen als Strukturierungsmethode an - sie mögen es gar nicht, wenn eine gesamte Seite in Tabellenform gebaut ist! -> Tabellen bitte nur für Strukturierung von Zahlenkolonnen verwenden (nur für Inhalte!)

Wozu benötigen wir Tabellen?
Navigation, Preislisten, Öffnungszeiten, Zahlenkolonen (wie Statistiken)
-> insgesamt werden Tabellen in html immer weniger verwendet
-> große CMS bieten HTML-Editoren für's Backend an.

Intranet als Spezialfall (da hier die Suchmaschine nicht vorbeikommt): hier werden Tabellen oftmals für Statistiken etc. verwendet

Einschub:
Div-Container werden im Gegensatz dazu verwendet, um Webseiten in Bereiche zu unterteilen - Tabellen sind für Berechnungen, Auswertungen etc. da.

TCPDF = Dynamische Librabry: (in php)
on the Fly ( zur Laufzeig, während ich auf den Link klicke) generiert es mir ein pdf!
(gibt es kostenlos und kostenpflichtig)
Hat einen staken Fokus auf Umwandlung von HTML-Tabellen in pdf

Eine Tabelle kann intern strukturiert/ organisiert werden! 
(Buch S. 79 - Bereiche einer Tabelle organisieren)
-> interessiert uns erst in CSS!!!

Ich definiere Bereiche einer Tabelle:

• <thead> = Kopfbereich
• <tbody> = Ausgabebereich
• <tfoot> = Footbereich

<table>
    <thread>
    </thread>
    
    <tbody >
    </tbody >
    
    <tfoot>
    </tfoot>
</table>

Formulare (link zu Selfhtml)

welche Formulare gibt es im Netz?

• Bestellformulare (z.B. für Bücher)
• Registrierungsformulare
• Profileintragung
• Kontaktformulare

Strategischer Einschub: Wenn ich als User eine Maske ausfülle - wie z.B. Kontakformulare - , INTERAGIERE (Interaktion) ich als User - also Schnittstelle zur Seite - bekomme nicht nur Info, sondern übertrage Daten, löse was aus/ gene Inhalte ein. Im Hintergrund werden Prozesse ausgelöst (Bestätigungsmails...).

Folgende Fragen werden im Formular beantwortet:

Folgende Fragen werden im Formular beantwortet

=> <form>-Tag - Abkürzung für Formular

-> ist ein Rahmen!

Attribute: (link zu Selfhtml - Elemente / form)

• action=""
• Pfad, der die Daten in Empfang nimmt:
• <form action="PFAD">
• Pfadangabe zum Dokument, welches die Daten verarbeitet
• bsp.: senden.php, administrator/senden.php

Beispiel Action - diese Aktion wird durch das Formular ausgelöst

•  method=""
• nur 2 Möglichkeiten
• GET = öffentliche Übertragung : in der URL zu sehen
• POST = stillschweigende Übertragung: nicht in der URL zu sehen

Einschub: Beispiel Mini-Formular - Erklärung Unterschied get & post (?vorname=Eingabetext/ Formularinhalt) 

Get -Method: Quelltext

Get-Method: Ausgabe in der URL

Post-Method: Ausgabe - keine Angabe in der URL

Warum Post und Get?
GET: direkter Aufruf über einen Link möglich (mit den einzelnen Attributen)
Schlüsselpaar: ?vorname= Schlüssel, Michael = Wert
Wenn ich den Link von GET in ein Formular eintrage, erhalte ich
POST: bei sensiblen Daten - immer Post, bspw. Angabe der rechnungsadresse

Anwendungsbereiche:

• get:
• Hyperlink auf Formular-Parameter
• Daten als Favoriten
• post:
• Übermittlung größerer Datenmengen
• Verwenden von Passwortabfragen
• Datenversand per E-Mail

=> <input>Tag = (Frei-)Textfeld / Button

ACHTUNG: wird in sich geschlossen! <input Attribute.../>

Attribute: (bestehen aus key/Schlüssel und value/Wert )

• type="" (bspw. text, submit [=Absendebutton, also kein Eingabefeld mehr sondern ein Button auf den ich klicken kann, um eine Aktion auszulösen])
• name="" (bspw. vorname, klicken...)
• Ist nachher Bestandteil des Links(->Schlüssels in der URL)- er ist elementar wichtig für die spätere Zuordnung, Identifikation -> sowohl Schlüssel als auch Wert! (wenn method=get!)
• ist ausschlaggebend, wie die Daten übertragen werden!
• value=""
• size="" (Größe - relativer, nummerischer Wert -  des Feldes!!! bspw. 50)

<body>
        <form action="mail12.php" method="get">
        <!-- Textfeld -->
        <input type="text" vorname="vorname" value=""
         size="50"/>
       
        <!-- Textfeld -->
       <input type="text" name="vorname" value=""
        size="10"/>  

<!--Absendebutton-->
<input type="submit" />

</body>

Quelltext (<form> & <input>)

Ausgabe - des Fomulars mit Textfeldern und Absendebutton (<form> & <input>)

Typisierte Input-Felder: (über type="")

->Textfeld (text): 

•  <input type="text" name="vorname" value="" size="10"/> 

->Absendebutton (submit), als eigenständiges Element des Formulars! 

• <input type="submit">

->Button: 

• <input type="button" name="klicken" value="klick mich"/>

• value= das, was auf dem Button draufsteht!

Button: <input type="button" name="klicken" value="klick mich"/>

-> Checkbox: 

• <input type="checkbox" name="agb" value="1"/> 

• Value sehe ich gar nicht, aber nachher in der Auswertung steht AGB = 1
  (könnte bspw. bedeuten, dass ich den AGBs zugestimmt habe!)
• ich könnte aber auch als Wert ja oder gelesen eintragen - erscheint dann in der URL 

-> Radiobox (radio) group: 

•  <input type="radio" name="auswahl" value="1"/>
   <input type="radio" name="auswahl" value="2"/>
  <input type="radio" name="auswahl" value="3"/>
• Gruppe ist als Auswahl zu betrachten (ODER-Element):
• kleiner Kreis zum Auswählen
• man kann immer nur einen Kreis anklicken/auswählen!
• bspw. für URL-Ausgabe: auswahl=2
• !!! wenn ich einen anderen Namen vergebe, gehört der Punkt nicht zur Gruppe und kann zusätzlich ausgewählt werden!!!

-> Resetbutton - Zurücksetzen (reset):

• <input type="reset" />
• hat die Funktion, die von mir ausgefüllten Inhalte wieder auf default zurückzusetzen (also default-Angabe!)
• das System liefert direkt die Buttonbeschriftung "Zurücksetzen"
  (die Browserinstallation erkennt das Land, in dem wir sind uns setzt automatisch "Zurücksetzen" ein)
• dies kann ich durch value="Andere Buttonbeschriftung" anpassen 
• Kommt meist direkt unter den Submit-button

-> Password:

• <input type="password" name="pw" size="20"/>
• verschlüsselt die Eingabe direkt mit Punkten
• Achtung mit Methode "get", kann man in der URL dann das Passwort sehen! Also bei sensiblen Daten, wie Passwörtern immer die Post-Methode wählen!

=> <select>-Tag = Selektionsbox 

• benötigt einen scließenden Tag!
• wir brauchen Elemente, die wir durch <option> Wert </option> eintragen

Attribute - wir brauchen nur 2 Stück:

• name="" (erscheint wieder in der URL)
• size="" (hiermit kann ich das Auswahlfeld vergrößern)

 Quelltext:

        <select name="woher" size="1"/>
            <option value="">-[Auswahl]-</option>
            <option value="yahoo">Yahoo</option>
            <option value="google">Google</option>
            <option value="internet">Internet</option>
        </select>

Ausgabe von select

=> <textarea>-Tag = Freitextfeld für große Textinhalte

• <textarea name="nachricht" rows="5" cols="20"/></textarea>
• benötigt schließendes Tag
• wir erhalten eine Textbox, die wir im Firefox größer ziehen können
• es wird in Spalten und Zeilen gerechnet, deshalb rows und cols
• in CSS, formatieren wir es eh anders ;)

Attribute

• name="" (erscheint wieder in der URL)
• rows""
• cols=""

textarea

Vorschau auf Morgen: Bau eines Formulares inkl. Text und semantisch korrekter Syntax!

-> Morgen wollen wir erlernen, wie wir Formulare richtig formatieren - daher Buch ab S. 88 alle Begrifflichkeiten festigen. 
-> also wenn jemand heute Nachmittag Zeit hat, bitte mit den Formularelementen spielen


 Aufgabe: Buch S. 88/89 lesen: Formulare erstellen (POST/GET...)