Einführung in die Web-bezogenen Sprachen

Vorlesung und Übung
Universität Paderborn
Wintersemester 2016/2017
Dr. Peter Pfahler
HTML und CSS
EWS, WS 2016/17, Pfahler
F-1
HTML: Ein kurzer Überblick
HTML steht für Hypertext Markup Language: eine Auszeichnungssprache, in der
man Dokumente durch Hyperlinks (Verweise) miteinander verknüpfen kann.
Entwickelt 1990 von Sir Tim Berners-Lee, CERN, Genf.
Im Moment ist die Version HTML5 aktuell.
Siehe auch Veranstaltung Einführung in die Informatik.
Markups sind typografische Anweisungen für
die Strukturierung von Texten in Abschnitte, Absätze, Listen, Tabellen
die Gestaltung von Zeichen:
Schrifttyp, Schriftgrad, Schriftstil, Schriftfarbe
die Bildmontage: Platzierung und Größe
das Layout des Dokumentes: Tabellen und Frames
die Verknüpfung von Dokumenten: Anker, Links, sensitive Bildbereiche
die Dialoggestaltung: Formulare, Schaltelemente
EWS, WS 2016/17, Pfahler
.
F-2
Grundstruktur von Dokument und Seite
Grundstruktur
DOCTYPE, html, head, body
Kopfdaten
title, meta, link, style, base
Seitenstrukturierung
body, header, nav, aside, main, section, article, footer, address
h1, h2, h3, h4, h5, h6 (Überschriften)
EWS, WS 2016/17, Pfahler
F-3
Grundstruktur von Dokument und Seite
EWS, WS 2016/17, Pfahler
F-4
Textstrukturierung
Textstrukturierung
h1, h2, h3, h4, h5, h6 (Überschriften)
p, pre, blockquote, figure, figcaption
ol, ul, dl, li, dt, dd (Listen)
hr
div
EWS, WS 2016/17, Pfahler
F-5
EWS, WS 2016/17, Pfahler
F-6
Textstrukturierung
Textstrukturierung
EWS, WS 2016/17, Pfahler
F-7
Textauszeichnung
Textauszeichnung
b, em, i, kbd, mark, s, small, strong, sub, sup, u
cite, q (Zitate)
dfn, abbr
code, var, samp
time
ruby, rt, rp
bdi, bdo
br, wbr (Zeilenumbrüche)
del, ins (Änderungsmarkierungen)
span
EWS, WS 2016/17, Pfahler
F-8
Tabellen
Tabellen
table
caption
col, colgroup
thead, tbody, tfoot
tr
th, td
EWS, WS 2016/17, Pfahler
F-9
EWS, WS 2016/17, Pfahler
F-10
Tabellen
Tabellen
EWS, WS 2016/17, Pfahler
F-11
EWS, WS 2016/17, Pfahler
F-12
Hyperlinks
Links (Verweise)
a
map, area
Hyperlinks
EWS, WS 2016/17, Pfahler
F-13
Multimedia und Grafiken
Multimedia und Grafiken
img, picture, map, area,
canvas, svg, math
iframe, embed, object, param
audio, video, source, track
EWS, WS 2016/17, Pfahler
F-14
Multimedia, Grafiken, Einbettungen
EWS, WS 2016/17, Pfahler
F-15
Multimedia, Grafiken, Einbettungen
EWS, WS 2016/17, Pfahler
F-16
Multimedia, Grafiken, Einbettungen
F-17
EWS, WS 2016/17, Pfahler
Formulare
Typen der Input-Elemente
Formulare
form, fieldset, legend, label, datalist
input, button, select, optgroup, option,
textarea, keygen
output, progress, meter
EWS, WS 2016/17, Pfahler
type = "text"
type = "search"
type = "password"
type = "tel"
type = "url"
type = "email"
type = "number"
type = "range"
type = "hidden"
type = "file"
type = "color"
type = "date"
type = "datetime"
type = "datetime-local"
type = "week"
type = "month"
type = "time"
type = "radio"
type = "checkbox"
type = "button"
type = "submit"
type = "image"
type = "reset"
F-18
Ein einfaches Formular
EWS, WS 2016/17, Pfahler
F-19
Ein einfaches Formular
action-Attribut
Ziel, an das die Eingabe geschickt wird; Web-Adresse als URL.
Das Ziel ist i.d.R. ein Programm, das die Eingabe verarbeitet, z. B. Ein PHP-Skript.
Übermittlung der Daten:
Nach Drücken der "submit" Schaltfläche wird das Ziel-Dokument angefordert.Die
eingegebenen Formulardaten werden dem Server der angegebenen Zieladresse übermittelt
und dort verarbeitet.
EWS, WS 2016/17, Pfahler
F-20
Ein einfaches Formular
method-Attribut
charakterisiert die Art der Übertragung zum Ziel (HTTP-Übertragungsmethode)
Mögliche Attribute: get oder post
get
Formulardaten werden an die Zieladresse
angehängt.
Parameter sind in der URL sichtbar.
post
Formulardaten werden dem empfangenden Web-Server auf dem Standard-Eingabe-Kanal
zur Verfügung gestellt..
F-21
EWS, WS 2016/17, Pfahler
Auswahllisten
Mehrfachauswahl mit Attribut
Multiple
Mehr Optionen sichtbar machen
mit Attribut size
Verschachtelte Auswahl
mit <optgroup>
EWS, WS 2016/17, Pfahler
F-22
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) ist eine Sprache zur Definition von Formateigenschaften
für HTML-Auszeichnungen.
CSS wird verwendet, um Formatierungsangaben von den Auszeichnungen der Struktur und
der Zweck-bezogenen Hervorhebungen zu trennen:
HTML-Datei:
Struktur und Rolle der Elemente
CSS-Datei:
im Dokument
benutzt zur Formatierung Formatierung der markierten
Elemente
<h1>Unsere Uni</h1>
<p>Eine der 5 Fakultäten ist die <span class="eim">
Fakultät EIM</span>.</p>
h1 {font­size:24;}
.eim {color:blue;}
Ziele:
● konsistente Formatierung im ganzen Dokument
●
konsistente Formatierung in vielen Dokumenten (Corporate Identity)
●
einfache Änderung der Formatierung in der CSS-Datei - HTML-Dateien bleiben unverändert
EWS, WS 2016/17, Pfahler
F-23
Stylesheets in HTML einbinden
3 Arten:
●
Externe Datei
Im <head>-Abschnitt der HTML-Datei wird ein Link auf die CSS-Datei eingetragen:
<link rel="stylesheet" href="formate.css">
●
Intern im Dokument
Im <head>-Abschnitt der HTML-Datei
<style>td {border: 1px solid gray;}</style>
●
Lokal als Attribut von HTML-Elementen
<h1 style="text­align: center; text­decoration: underline;">
Interne und lokale Definitionen sind an das Dokument gebunden. Sie sind also nicht
zentral definiert und wiederverwendbar für viele Dokumente eingesetzt.
EWS, WS 2016/17, Pfahler
F-24
Syntax von CSS
Ein Stylesheet besteht aus Regelsätzen.
Ein Regelsatz besteht aus Selektoren (Komma-getrennt) gefolgt von Deklarationen in
geschweiften Klammern.
Eine Deklaration besteht aus Eigenschaft und Werten, durch Doppelpunkt getrennt, durch
Semikolon abgeschlossen.
Werte sind ein oder mehrere Wertangaben.
(Beispiel einer verbalen Syntaxbeschreibung)
h1, h2
{text-align: center; color: red;}
em
{font-weight: bold;}
strong
{font-weight: bold; color:red;}
table
{border: 1px solid gray;}
F-25
EWS, WS 2016/17, Pfahler
CSS-Selektortypen
●
●
●
●
●
Universal-Selektor
betrifft alle HTML-Tags
* {margin: 0px;}
Typselektor
spricht ausgewähle HTML-Tags an
h1, h2 {font-style:italic;}
ID-Selektor
spricht ausgewähle Elemente des Dokuments an #bigBox {border: 3px;}
Klassenselektor
spricht ausgewähle Klassen von Elementen des
Dokuments an
Nachfahren-Selektor
spricht Elementen in Unterstrukturen an
.wichtig {color: red;}
ul.oops {font-weight:bold;}
Im HTML
<div id="bigBox">
<p class="wichtig">
<ul class="oops">
...
EWS, WS 2016/17, Pfahler
F-26