Internet-basierte Fragebögen I

Timo Gnambs

http://timo.gnambs.at

Inhalt

Geschichte
Was ist das Internet?
Was ist HTML?
Strukturierung
Aufzählungen, Tabellen
Formulare
Stylesheets

Geschichte

ARPA-Net (Sputnik-Schock).
Wissenschaftliche Anwendungen.
WWW (Tim Berners-Lee): einfach zu bedienendes Hypertextsystem.
Rasante Verbreitung von Personalcomputern & immer mehr angeschlossene Systeme.
"Das Internet entsteht".
Musch, J. (1997). Die Geschichte des Internet. In B. Batinic (Hsg.), Internet für Psychologen (S. 1). Göttingen: Hogrefe.

Was ist das Internet?

Quelle: http://uts.cc.utexas.edu/~croyal/articles/internet.gif (2004-11-26)

Was ist HTML?

Hypertext Markup Language (= Auszeichnungssprache).
Quelltext jeder Seite einsehbar.
HTML muss vom Browser interpretiert(!) werden -> unterschiedliche Darstellungen.
Dateiendungen in .htm oder .html

Editoren

Text-Editoren: SciTE, Phase 5, Metapad (gratis)
WYSIWYG-Editoren: Dreamweaver, Frontpage (kostenpflichtig)
-> Weiter Links

Tags & Attribute

Auszeichnungssprache besteht aus Tags und Attributen.
Bsp.:
- HTML: <h1 class="norm">Das ist eine Überschrift</h1>
- Browser:
  Das ist eine Überschrift
Dienen der logischen Auszeichnung (historische Entwicklung!).
Jedes Tag besteht aus einem öffnenden <h1> und einem schliessenden Teil </h1>
Tags und Attribute sind per Konvention klein zu schreiben.

Verschachteln von Tags

Verschiedene Tags können ineinander verschachtelt werden.
Jeder von Tags eingeschlossene Text übernimmt die Eigenschaften ALLER übergeordneter Tags.
- HTML: <h1>Das ist eine <em>besondere</em> Überschrift</h1>
- Browser:
  Das ist eine besondere Überschrift

Kommentare

Kommentare können im Quelltext zur Beschreibung / Erklärung herangezogen werden.
Sie werden nicht im Browser angezeigt.
- HTML:  <h1>Das ist eine <em>besondere</em> Überschrift</h1>
- Browser:
  
  Das ist eine besondere Überschrift

Grundstruktur eines Dokuments

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
        <head>
            ... Metainformationen zum Dokument ...
        </head>
        
        <body>
            ... der eigentliche Inhalt des Dokuments ...
        </body>
        
    </html>

-> Weiterführende Informationen

Angaben im Head

Enthät Metainformationen zum aktuellen Dokument.
HTML:
<title>Mein erster Fragebogen</title> <meta name="robots" content="index,follow" /> <meta name="author" content="Timo Gnambs" />
-> Weiterführende Informationen

Sonderzeichen und Umlaute

Sonderzeichen und Umlaute sollten kodiert werden (sonst Probleme bei "nicht-deutschen" Browsern)
HTML:
- ä => ä
- ö => ö
- Ü => Ü
- ß => ß
- " => "
- & => &
-> Weiterführende Informationen

Tags zur Textstrukturierung

- <p> ... </p>: Absatz
- <span> ... </span>: Textteil (für Stylesheet-Angaben)
- <br />: Zeilenumbruch
- <h1> ... </h1>: Überschrift erster Ordnung
- <h2> ... </h2>: Überschrift zweiter Ordnung etc.
- <strong> ... </strong>: stark betonter Text(teil)
- <em> ... </em>: empathischer Text(teil)
-> Weiterführende Informationen

Aufzählungen (a)

Ungeordnete Listen:

HTML:

<ul>
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
    <li>Dritter Punkt</li>
</ul>

Browser:
- Erster Punkt
- Zweiter Punkt
- Dritter Punkt

Aufzählungen (b)

Geordnete Listen:

HTML:

<ol>
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
</ol>

Browser:
1. Erster Punkt
2. Zweiter Punkt

Bilder

- HTML:
  <img src="Pfad zum Bild" width="Breit" height="Höhe" alt="Alternativtext" /> <img src="vorlagen/demo-bild.gif" width="49" height="40" alt="Eine kleine Ente." />
- Browser:
Übliche Graphikformat für das Internet: GIF, JPEG, PNG
-> Weiterführende Informationen

Verweise

Verweise (Links) können auf belibige Ressourcen im Internet zeigen (HTML-Seiten, Graphiken, PDFs etc.)
- HTML:
  <a href="Der Link">Linktext</a> <a href="http://www.univie.ac.at/">Website der Universität Wien</a>
- Browser:
  Website der Universität Wien
-> Weiterführende Informationen

Verweisziele

Auf externe Dokumente:
<a href="http://www.google.at/">Google</a>
Auf interne Dokumente:
<a href="vorlagen/demo-vorlage.gif">Eine kleine Ente</a>
Auf Emailadressen:
<a href="mailto:meine@emailadres.se">Meine Email-Adresse</a>
Innerhalb eines Dokuments:
<a href="#deranker">Spring zum Anker</a> ... viel Text ... <a name="deranker"></a>

Tabellen

Tabellen bestehen aus
- <tr> ... </tr>: Zeilen
- <td> ... </td>: Zellen
- <th> ... </th>: Zeilen- bzw. Spaltenüberschriften
-> Weiterführende Informationen

Grundstruktur von Tabellen

  
    <table border="0">
    
        <tr> <!-- Überschriftszeile -->
            <th>Überschrift 1</th>
            <th>Überschrift 1</th>
        </tr>
        <tr> <!-- Erste Tabellenzeile mit Inhalt -->
            <td>Erste Zeile, erste Zelle</td>
            <td>Erste Zeile, zweite Zelle</td>
        </tr>
        <tr> <!-- Zweite Tabellenzeile mit Inhalt -->
            <td>Zweite Zeile, erste Zelle</td>
            <td>Zweite Zeile, zweite Zelle</td>
        </tr>
        
    </table>

Grundstruktur von Formularen

    <form name="[ NAME DES FORMULARS ]" 
        action="[ NÄCHSTE SEITE ]" 
        method="post">
        
        ...  Formularfelder ...
    
    </form>

-> Weiterführende Informationen

Formularfelder (a)

Text:

    <input type="text" name="[ NAME ]" 
        value=" [ STANDARDINHALT ] " 
        size="[ LÄNGE ]" 
        maxlength="[ MAXIMALLÄNGE ]" />

Textfelder:

    <textarea name="[ NAME ]" 
        rows=" [ ZEILENANZAHL ] " 
        cols=" [ SPALTENANZAHL ] "></textarea>

Formularfelder (b)

Radiobuttons:

    <input type="radio" name=" [ NAME ] " 
        value=" [ WERT ] " 
        checked="checked" />

Checkboxen:

    <input type="checkbox" name=" [ NAME ] " 
        value=" [ WERT ] " 
        checked="checked" />

Formularfelder (c)

Auswahllisten:

    <select name=" [ NAME ] " size="1">
        <option value=" [ WERT ] "> [ BESCHRIFTUNG ] </option>
        ...
    </select>

Button:

    <input type="submit" value=" [ TEXT ] "  />

Versteckte Felder:

    <input type="hidden" name=" [ NAME ] " 
        value=" [ WERT ] "  />

Label für Elemente

Verbindet ein Formularelement mit seiner textuellen Beschreibung.

    <label for=" [ ELEMNT-ID ] "> [ TEXT ] </label>
    <input type="text" name=" [ NAME ] " 
        id=" [ EINDEUTIGE ID ] "
        value=" [ STANDARDINHALT ] " />

Die Werte des for sowie des jeweiligen id-Attributs müssen übereinstimmen.

Variablennamen

Sie sollten nicht länger als 8 Zeichen sein (SPSS).
Sie sollten inhaltliche Bedeutung haben (schlecht sind z.B.: item1, item2 ... item 30).
Bei Radiobuttons erhalten alle Auswahlmöglichkeiten den selben Namen (man kann ja nur eine Alternative wählen).
Bei Checkboxen erhalten alle Auswahlmöglichkeiten unterschiedliche Namen (da mehr Alternativen gewählt werden können).
-> Weiterführende Informationen

Übung HTML

Setzen Sie diesen Fragebogen in HTML um.

Stylesheets (CSS)

Definiert Layout - Aussehen der Seite.
Eigene Sprache, die Darstellung von HTML-Elementen ändern kann.
Unzählige Eigenschaft, die nachgeschlagen werden können.
-> Weiterführende Informationen

CSS Beispiele

font-weight:600;: fett
font-style:italic;: kursiv
font-size:12pt;: Schriftgröße.
text-decoration:underline;: durchgestrichen.
padding:30px;: Abstand.
border:1px solid #000000;: Rahmen.
color:#FF8000;: Farbe.

Farben in CSS

Farben müssen in Hexadezimalwerten angegeben werden.
Entspricht dem Rot-, Grün- und Blauanteil
Findet man über die meisten Graphikprogramme.
Farbauswähler von SelfHTML.
Eyedropper.

CSS & HTML (a)

Direkt in HTML-Tags:

HTML:

<h1 style="font-size:16px; color:#A5A5A5;">
    &Uuml;berschrift
</h1>

Browser:
Überschrift

Durch Definiton im head der Datei:

<"style type="text/css">
... Style-Definitionen ...
</style>

CSS & HTML (b)

Durch Definition in einer externen Datei, die im head eingebunden wird:
```
<link rel="stylesheet" href="meine-styles.css" />
```
Diese Vorgansweise ist meist zu empfehlen, da die Styles nur einmal definiert werden müssen und dann einfach auf verschiedenen Seiten eingebunden werden können ohne sie stets neu schreiben zu müssen.

CSS Selektoren

Um bestimmte HTML-Elemente mit CSS anzusprechen, verwendet man Selektoren.
Ansprechen von HTML-Tag-Typen:
```
h1 { font-weight:300; font-style:italic; }
```
Diese Angaben beziehen sich auf alle h1 im Dokument.
Ansprechen von einzelnen HTML-Tags:
```
h1.spezial { font-weight:300; font-style:italic; }
```
Diese Angabe bezieht sich nur auf die h1, deren class-Attribut den Wert spezial hat.

Übung CSS

Ändern Sie das Layout Ihres Fragebogens.

Validierung

Fehlerfreier Code garantiert grösst mögliche Browser-Kompatibilität.
HTML-Validator: W3C, WDG
CSS-Validator: W3C, WDG
Weiter Validatoren: UITest.com

Literatur

o. A. (o. J.). Planethtml.de. Online im Internet: http://www.planethtml.de/ (2004-11-26).
o. A. (o. J.). CSS Tutorial. Online im Internet: http://www.webdesign-referenz.de/html_css.shtml/ (2004-11-26).
o. A. (2004). CSS Dokumentation. Online im Internet: http://www.style-sheets.de/css/ (2004-11-26).
Hirschmann, U. (2003). HTML Tutorial. Online im Internet: http://www.ksl.mediendesign.eduhi.at/ts/htmltut/ (2004-11-26).
Karzauninkat, S. (1997). Die Goldenen Regeln für schlechtes HTML. Online im Internet: http://www.karzauninkat.com/Goldhtml/ (2004-11-26).
Münz, S. (2001). SelfHTML. Online im Internet: http://de.selfhtml.org (2004-11-26).

Alle Dateien

Demonstrationsdateien:
Ein kleiner Fragebogen:
- Vorlage (Word)
- HTML
- HTML mit CSS (CSS)

Copyright

Lizenz: Creative Commons Attribution-NonCommercial License 2.0 Austria.

Wien, 2004-11-26

Einführung in HTML

Internet-basierte Fragebögen I

Timo Gnambs

http://timo.gnambs.at

Inhalt

Geschichte

Was ist das Internet?

Was ist HTML?

Editoren

Tags & Attribute

Das ist eine Überschrift

Verschachteln von Tags

Das ist eine besondere Überschrift

Kommentare

Das ist eine besondere Überschrift

Grundstruktur eines Dokuments

Angaben im Head

Sonderzeichen und Umlaute

Tags zur Textstrukturierung

Aufzählungen (a)

Aufzählungen (b)

Bilder

Verweise

Verweisziele

Tabellen

Grundstruktur von Tabellen

Grundstruktur von Formularen

Formularfelder (a)

Formularfelder (b)

Formularfelder (c)

Label für Elemente

Variablennamen

Übung HTML

Stylesheets (CSS)

CSS Beispiele

Farben in CSS

CSS & HTML (a)

Überschrift

CSS & HTML (b)

CSS Selektoren

Übung CSS

Validierung

Literatur

Alle Dateien

Copyright