Transcript (X)HTML - Klickdichschlau.at

(X)HTML
HTML wird nicht programmiert,
sondern einfach geschrieben!
© Oliver Mochmann 2006
www.klickdichschlau.at
Entstehung des Internets
 Idee: Dezentrale Speicherung von Daten auf
mehreren entfernten Computern.
Aktualisierung über ein Datennetz.
 60er Jahre: ARPA = Advanced Research
Projects Agency beauftragt Universitäten mit
Entwicklung.
 1969: Vier kalifornische Universitäten
verbinden Ihre Rechner  ARPA-Net
© Oliver Mochmann 2006
www.klickdichschlau.at
Akademische Nutzung
Offene Architektur des Netzes ermöglicht
vielfältige Nutzung.
Anfang der 70er: Wissenschaftler nutzen das
ARPA-Net zum Austausch von
Forschungsergebnissen zwischen versch.
Instituten.
Das Usenet: Newsgroups - Schwarze Bretter zu
allen erdenklichen Themengebieten.
© Oliver Mochmann 2006
www.klickdichschlau.at
Wachstum
1977: Entstehung des paketorientierten TCP/IP
Protokolls, da die bisherige leitungsorientierte
Übertragungsart unzuverlässig und nicht für
größere Netze geeignet war.
Anfang der 80er: Ausgliederung des
militärischen Teils  Milnet.
© Oliver Mochmann 2006
www.klickdichschlau.at
Die Entstehung von HTML
Von Tim Berners-Lee 1989 in Genf
herausgegeben.
HyperText Markup Language
– Texte können in Form von Hyperlinks auf andere
Textstellen oder Dokumente verweisen.
– Textteile werden nach Funktion oder Struktur
ausgezeichnet (Überschrift, Absatz, Liste,
Hervorhebung, etc.).
© Oliver Mochmann 2006
www.klickdichschlau.at
Sprachversionen
 HTML 0.0 (1992): Die Urversion, die sich nur an Text orientierte.
 HTML 1.0 (1993): fette oder kursive Text-Darstellung, Bildintegration
 HTML 2.0 (1995): Formulare
 HTML 3.0: erscheint nicht, weil sie mit der Einführung des NetscapeBrowsers in der Version 3 bereits vor der Veröffentlichung obsolet ist.
 HTML 3.2 (1997): Tabellen, Textfluß um Bilder, Einbindung von Applets. 3.2
erscheint in Anpassung an die Gegebenheiten im WWW. So halten
unglücklicherweise Tags und Attribute zur optischen Gestaltung Einzug in
HTML.
 HTML 4.0 (Ende 1997): Style Sheets (CSS), Skripte und Frames.
Trennung in „strict”, „frameset” und „transitional”.
1998 erscheint eine leicht korrigierte Version dieses Standards. Viele
Bestandteile aus 3.2 werden „deprecated“ (mißbilligt).
 HTML 4.01 (1999): Ersetzt HTML 4.0 mit vielen, kleineren Korrekturen.
Letzte HTML-Version.
© Oliver Mochmann 2006
www.klickdichschlau.at
XHTML
XHTML 1.0 (2000): Eine Neuformulierung von
HTML 4.01 mit Hilfe von XML.
2002 erscheint eine überarbeitete Version.
XHTML 1.1 (2001): XHTML wird in Module
aufgeteilt. Die mit HTML 4 eingeführten
Varianten „frameset” und „transitional” entfallen,
es bleibt die strikte Version.
© Oliver Mochmann 2006
www.klickdichschlau.at
W3C
1994 von vom HTML Erfinder Tim Berners-Lee
gegründet.
Standardisierung des WWW: HTML, CSS, XML,
WAI.
Herausgabe von sogenannten
Recommendations.
© Oliver Mochmann 2006
www.klickdichschlau.at
CSS
Wie ein bestimmtes HTML-Element (z.B. eine
Überschrift oder ein Hyperlink) auszusehen hat
und angeordnet ist, wird durch CSS
beschrieben.
CSS kann in das HTML-Dokument eingebunden
oder in eine externe Datei ausgelagert werden.
HTML-Elementen können CSS-Klassen und IDs
zugewiesen werden, z.B
<div class=“menue“> und <div class=“inhalt“>.
© Oliver Mochmann 2006
www.klickdichschlau.at
HTML im Browserkrieg der 90er
 Netscape und Microsoft kämpfen um die Vorherrschaft
am Browsermarkt. Jeder implementiert eigene
selbsterfundene Sprachbestandteile.
 HTML wird zu Designzwecken zweckentfremdet. Bei
Designern gilt: „Hauptsache es funktioniert“. Meistens
werden verschachtelte Tabellen für das Layout
verwendet. CSS wird noch nicht oder mangelhaft
unterstützt.
 Microsoft gewinnt Browserkrieg mit fragwürdigen
Geschäftsmethoden. Bald: „Hauptsache es funktioniert
am Internet Explorer“.
© Oliver Mochmann 2006
www.klickdichschlau.at
Danach
Hoher Marktanteil des Internet Explorers ließ
Microsoft Weiterentwicklung verschlafen.
Sicherheitsrisiken des Internet Explorers
unterstützten die Verbreitung von altenativen
Browsern wie Mozilla/ Firefox oder Opera.
CSS wird von immer mehr Browsern zufrieden
stellend interpretiert.
© Oliver Mochmann 2006
www.klickdichschlau.at
Heute
 Das Internet steht nicht nur am PC, sondern an mobilen
Taschencomputern oder Handys zur Verfügung.
 Barrierefreies Webdesign soll behinderten Personen
(z.B. Blinden) den Zugang zum WWW ermöglichen.
 Daher nicht mehr: „Diese Seite wurde optimiert für den
Internet Explorer“, sondern neue Beachtung der
Standards des W3C
 Auch Microsoft hat die Wichtigkeit dieser Tatsachen
erkannt, unterstützt Standards und Initiativen zur
Barrierefreiheit.
© Oliver Mochmann 2006
www.klickdichschlau.at
Modernes Webdesign bedeutet:
 Verwendung von HTML
als logische
Auszeichnungssprache
(Überschrift1, 2, 3...,
Absatz, Bereich, etc.)
<h1>Mehr Flexibilität</h1>
<h1>Grundlagen</h1>
<h1>Moderne Webseiten</h1>
<p>Dies ist eine kleine
Einführung in modernes
Webdesign mit CSS</p>
© Oliver Mochmann 2006
 Design und Layout
(Positionierung) mit CSS
 Klare Trennung zwischen
Struktur und Design!
h1 {color:#CC0000;
font-weight:bold;
border:1px solid #FF6600}
p {padding:5px;
line-height:15px}
www.klickdichschlau.at
DTD-Varianten
DTD-Definition steht am Anfang des HTMLDokuments – z.B.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 Wird die DTD vergessen werden, kann es zu Anzeigefehlern kommen, da bestimmte
Parameter wie in alten Browsern interpretiert werden. Der IE schaltet in den so
genannten Quirks-Mode.
– Strict: Komplette Trennung zwischen Struktur und
Präsentation (Design).
Struktur
 HTML,
Design, Layout
 CSS
– Transitional: Akzeptiert Designelemente in HTML.
Ab XHTML1.1 nicht mehr vorhanden.
– Frameset: Mehrseitenlayout.
Ab XHTML1.1 nicht mehr vorhanden.
© Oliver Mochmann 2006
www.klickdichschlau.at