Post on 06-Apr-2015
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>
<!--hier stehen Metainformationen--> </HEAD> <BODY>
<!--hier steht der Inhalt des Dokuments--> </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> <!--Überschriftzeile--> <th> Überschrift 1</th> <th> Überschrift 2</th> </tr> <tr> <!--Erste Zeile--> <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