Tutorium zur LV Online Research Ein Computerprogramm tut, was Du schreibst, nicht was Du willst.

Inhalt des Tutoriums Vertrautmachen mit Werkzeugen HTML – das Wichtigste PHP – nur relevantes für Fragebögen Speicherung von Daten Weitergabe von Variablen Datenbanken erstellen SPSS – Daten übertragen KEINE SPSS-Auswertung

Zeitplan für heute Bearbeitung & Online-stellen von HTML/PHP-Dateien Editoren SFTP (SSH) Grundlagen von HTML Aufbau einer Seite Die wichtigsten TAGS Tabellen zur Layout-Gestaltung

Übertragung der Daten an Server Client – Server Browser FTP (File Transfer Programm) SFTP (Secure FTP) SSH

Editoren Quelltexteditoren Kleine Programme Leicht zu besorgen Keine unnötigen Codezeilen Kenntnis von HTML- Befehlen Für Anfänger verwirrend WYSIWYG-Editoren Teure Programme Drag and drop KEINE HTML- Kenntnisse nötig Überladener Code Längere Ladezeit

HTML Grundstruktur Befehle Tabellen Buttons/Eingabefelder Links

Allgemeine Dokumentstruktur

Einträge im Head Verschiedene Einträge sind möglich Titel der im Browserkopf angezeigt wird: Titeltext weitere Angaben, wie Suchbegriffe etc

Sonderzeichen und Umlaute Umlaute werden nur von deutschen Browsern verstanden müssen sonst durch besondere Zeichenkette dargestellt werden ä = ä ß=ß etc Leerzeichen= KEINE LEERZEICHEN!! in Namen von Variablen, HTML-Dateien

TAGs zur Textstrukturierung : Zeilenumbruch (Achtung hier kein schließendes TAG nötig) Absatz kann auch alleine stehen: Absatz nächster Absatz...

Attribute bei TAGs Die Wirkung von TAGs kann durch Attribute genauer beschrieben werden Beispiel Absatz-TAG: normal: Absatz mit Attribut: ein mittig ausgerichteter Absatz Werte für align: center, right, left, justify (Blocksatz)

TAGs zur Textformatierung Hervorhebungen Fetter Text Kursiver Text Unterstrichener Text Schriftart Text mit Font Arial Schriftgröße großer Text kleiner Text

Farbe in HTML Farbe in Hexadezimal- darstellung Farbmodell in HTML RGB (Red Green Blue) Format: rrggbb schwarz=#000000, weiß=#ffffff TAGs mit color-Attribut rote schrift

Grafiken in HTML gängige Grafikformate: JPG, PNG oder GIF Grafiken werden genauso behandelt wie Text Einfügen einer Grafik durch img-TAG erlaubt verschiedene Attribute: align, wieder wie gehabt alt= Bildbeschreibung, ein Text der angezeigt wird, wenn das Bild nicht geladen werden kann width= Zahl und height= Zahl, Angabe der Größe des Bilds

Tabelle Tabelle als Tabelle, d.h. mit sichtbarem Gitternetz Strukturierungsmittel zur Anordnung von Elementen, ohne Gitternetz Tabellen bestehen aus Zeilen ( ) Zellen ( ) Spaltenüberschriften ( )

Tabelle Grundstruktur: Überschrift 1 Überschrift 2 Zelle links oben Zelle rechts oben

Beachte! Das Attribut align kann für alle Elemente der Tabelle vergeben werden Es gibt TAGs die mehr als ein Attribut haben können z.B.: ( ) Die Spaltenbreiten einer Tabelle passen sich dem breitesten Eintrag an Die Zeilenhöhen einer Tabelle passen sich dem höchsten Eintrag an

cellpadding Inhalt cellpadding <td colspan="2" <td rowspan="2" cellspacing

CSS (Cascading Style Sheets)... Sprache zur Definition von Formateigenschaften einzelner HTML- Elemente Selektoren (CSS Syntax): zur Auswahl von HTML-Elementen, für ein bestimmtes Format gelten soll.meindesign { font-style: italic; color: green;} Mehrere Eigenschaften müssen durch einen ; getrennt werden. Vorhandene TAGS nehmen oder Klassen definieren class=meindesign

CSS (Cascading Style Sheets) Einbindung in HTML in einer externen CSS-Datei im zentralen Style-Bereich direkt im einleitenden TAG eines HTML- Elements (mit dem Attribut style="") z.B.:

Fragen? Nächster Termin webkurs.html