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

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

<HTML> <HEAD>

 </HEAD> <BODY>

 </BODY></HTML>

Einträge im Head

• Verschiedene Einträge sind möglich

• Titel der im Browserkopf angezeigt wird:<head> <title>Titeltext</title></head>

• 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

• <br>: Zeilenumbruch (Achtung hier kein

schließendes TAG nötig)• <p> Absatz</p>• <p> kann auch alleine stehen:

• <p> Absatz <p> nächster Absatz ...• <span></span>

Attribute bei TAGs• Die Wirkung von TAGs kann durch

Attribute genauer beschrieben werden• Beispiel Absatz-TAG:

• normal: <p> Absatz </p>• mit Attribut:

<p align=„center“ > ein mittig ausgerichteter Absatz </p>

• Werte für „align“: • center, right, left, justify (Blocksatz)

TAGs zur Textformatierung• Hervorhebungen

• <b> Fetter Text </b>• <i> Kursiver Text </i>• <u> Unterstrichener Text</u>

• Schriftart• <font face=„Arial“> Text mit Font „Arial“

</font>• Schriftgröße

• <font size=„18pt“> großer Text </font>• <font size=„xsmall“> kleiner Text</font>

Farbe in HTML

• Farbe in Hexadezimal- darstellung

• Farbmodell in HTML RGB (Red Green Blue)

• Format: rrggbb• schwarz=#000000, weiß=#ffffff

• TAGs mit „color“-Attribut<font color=„red“>rote schrift</font>

Grafiken in HTML• gängige Grafikformate: JPG, PNG oder GIF• Grafiken werden genauso behandelt wie Text• Einfügen einer Grafik durch

<img src=„Grafikdatei.jpg“>

• „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 <table></table>

• Tabelle als• Tabelle, d.h. mit sichtbarem Gitternetz• Strukturierungsmittel zur Anordnung von

Elementen, ohne Gitternetz• Tabellen bestehen aus

• Zeilen ( <tr></tr> )• Zellen ( <td></td> )• Spaltenüberschriften ( <th></th> )

Tabelle <table></table>• Grundstruktur:

<table> <tr>  <th> Überschrift 1</th> <th> Überschrift 2</th> </tr> <tr>  <td> Zelle links oben</td> <td> Zelle rechts oben</td> </tr> </table>

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.: (<table align=„right“ border=„1“>)

• Die Spaltenbreiten einer Tabelle passen sich dem breitesten Eintrag an

• Die Zeilenhöhen einer Tabelle passen sich dem höchsten Eintrag an

<table border="2" align="center" cellpadding="2" cellspacing="2">

<tr> <th> <th> <th> </tr>

</th> </th> </th>

<tr> <td> cellpadding </tr>

Inhalt <td> <td>

</td> </td>

cellpadding </td>

<tr> </tr>

<td colspan="2" <td rowspan="2"

</td> </td>

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

</td> </td>

cellspacing

</table>

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

<link rel="stylesheet" href="homepage.css">

im zentralen Style-Bereich <Style type="text/css">

direkt im einleitenden TAG eines HTML-Elements (mit dem Attribut style="")z.B.: <span style="font-style:italic ; color:green">

Fragen?

Nächster Termin 13.04.2005

http://homepage.univie.ac.at/barbara.strassnig/webkurs.html

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

Documents

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