Zur Navigation springen

 ZEIK-Tutorium - Webdesign mit XHTML und CSS

Vorrede

Über Inhalt und Form beim Webdesign

HTML - Hypertext Markup Language

= Wie ist das Dokument strukturiert?

CSS - Cascading Stylesheets

= Wie soll das Dokument dargestellt werden?

Einführung

Grundlagen zum Kurs
Werkzeuge

Sowohl HTML-Dateien als auch Stylesheets sind einfache Text-Dateien, daher genügt zum Schreiben der Dateien ein einfacher Text-Editor. Die HTML-Dateien speichert man mit der Endung .html (oder .htm) ab. Sie lassen sich dann im Webbrowser betrachten.
Zur Edition benötigt man:

Zur Überprüfung der HTML-Dokumente gibt es den HTML-Validation-Service und für die Stylesheets den CSS-Validator des W3C.
Non-Profit-Organisationen können sich die Zugänglichkeit ("Barrierefreiheit") ihres Webauftrittes vom Barrierekompass kostenlos überprüfen lassen.

TEIL 1 - HTML

1 HTML - Begriffe und Grundsätze

2 Aufbau eines HTML-Dokuments

Lesen lernen!

Versuchen Sie, den Quelltext dieser Seite zu verstehen.
(Mozilla, Firefox: ANSICHT/SEITENQUELLTEXT ANZEIGEN; Opera, IE: ANSICHT/QUELLTEXT)

Erläuterung der Struktur eines typischen HTML-Dokuments

3 Textauszeichnung und Seitenstrukturierung

Elemente zur Strukturierung

Übung 1

Schreiben Sie diese Seite !

Listen und Tabellen

Listenelemente müssen nicht unbedingt untereinander angeordnet sein. Die Formatierung (auch die Art der Numerierung[arabische, römische Zahlen]) lässt sich mit CSS vornehmen.

Tabellen sollten nur zur Wiedergabe strukturierter Daten genutzt werden. Zur Aufteilung und Formatierung von Webseiten nutze man die Auszeichung logischer Bereiche in Verbindung mit den CSS-Möglichkeiten (siehe unten).

Textauszeichnungselemente
Einbinden von anderen Dokumenten (Links, Bilder, Filme)

<a></a>: Anker 

Anker können Zusatzinformationen im title-Attribut tragen, z.B. <a href="/" title="zur Startseite">...</a>, die dann dem Nutzer als Tipp beim Überfahren mit der Maus angezeigt werden.

<img />: Bilder einbinden

Achtung!
<img /> ist ein leeres Tag, d.h. es endet daher in XHTML mit /> . Ein Alternativtext ( alt="...") ist in XHTML obligatorisch (s. Warum alt-Attribute Pflicht sind ). Auch wenn manche Browser ihn anzeigen, wenn der Mauszeiger über das Bild fährt, ist er dazu nicht gedacht: Für Erläuterungen gibt es das title-Attribut.

<object></object>: Einfügen von Objekten

Bei all diesen Objekten sollte daran gedacht werden, dass Alternativangebote in Textform zur Verfügung gestellt werden, damit auch die Nutzer, die diese Objekte nicht sehen können (etwa weil sie die nötigen Browser-Plugins nicht haben), die Inhalte erfassen können.

Bereiche:

Das Blockelement <div> dient der Einteilung des Webdokuments in logische Bereiche (z.B. Inhalt, Fußzeile, etc.); das Inline-Element <span> wird innerhalb von anderen Elementen (z.B. <p>) wird besondere Zwecke benutzt (z.B. Anzeigen von Sprachwechsel Deutsch->Englisch, Klassen mit CSS-Regeln).
Diese beiden Element werden häufig als Hilfsmittel für das unten folgende Design mit CSS verwandt.

4 Umschreiben von Sonderzeichen mit so genannten Entities

Sonderzeichen als Entity
Zeichen Name Entity
ä a-Umlaut &auml;
Ä A-Umlaut &Auml;
ö o-Umlaut &ouml;
Ö O-Umlaut &ouml;
ü u-Umlaut &uuml;
Ü U-Umlaut &Uuml;
ß sz-Ligatur &szlig;
© Copyright-Zeichen &copy;
€ Euro-Zeichen &euro;
& et-Zeichen &amp;
" Anführungszeichen &quot;

Die hier dargestellten Sonderzeichen (und auch alle anderen) lassen sich auch numerisch (dezimal in der Form &#000; oder hexidezimal in der Form &#x0000;)umschreiben, z.B. &#228; für "ä".
Auf den Seiten von Unicode findet man eine HTML-Zeichenreferenz für westeuropäische Zeichen und für andere ISO-Kodierungen.

Achtung!
Die korrekte Darstellung der Sonderzeichen ist abhängig von der im Kopf des HTML-Dokuments eingestellten Kodierung! (z.B. charset=iso-8859-1 für westeuropäischen Zeichenvorrat [Latein-1], charset=iso-8859-2 für mittelosteuropäischen Zeichenvorrat [Latein-2], charset=iso-8859-5 für Kyrillisch, charset=utf-8 für Unicode). Will man mehrere Sprachen auf einer Seite benutzen (z.B. Russisch und Deutsch), sollte man entweder auf einige Zeichen verzichten (also "ss" statt "ß"), oder Unicode benutzen (von älteren Browser jedoch nicht durchgängig unterstützt!).

Übung 2

Schreiben Sie die folgenden Seiten und verknüpfen Sie miteinander
Seite 1 - Seite 2 - Seite3 !

Zum Seitenbeginn

TEIL 2 - CSS

Mit Cascading Style Sheets lassen sich Style-Vorgaben für einzelne HTML-Elemente von Webseiten erstellen. Prinzipiell können Stylevorgaben in der HTML-Datei selbst oder aber in einem externen CSS-Dokument gemacht werden, das dann in die HTML-Dokumente eingebunden wird.
Die Einrichtung zentraler Style-Dateien ist vorzuziehen, da nicht nur eine größere Übersichtlichkeit über die Styles gegeben ist, sondern so auch ein einheitliche Design für eine Site oder zumindest für einen gewünschte Menge von HTML-Dateien erzielt werden kann.

CSS-Dateien lassen sich (ebenso wie HTML-Dateien) mit jedem beliebigen Texteditor erstellen.
Sie sollten die gängige Dateiendung .css haben.

CSS verhalten sich "kaskadierend", d.h. Eigenschaften werden vererbt:
Ein untergeordnetes Element übernimmt die Styles des darübergeordneten Elements, es sei denn, sie sind anders definiert; Positionierungsangaben beziehen sich auch auf das darüber liegende Element.
Z.B.: Wird für das <body>-Element die Schrift "Times" festgelegt, so gilt dies auch für das darinliegende <div>-Element. Sollte für ein <div>-Element eine andere Schrift festgelegt sein (z.B. Garamond), so wird diese für das <div>-Element angezeigt und auch für alle darinbefindlichen Elemente (z.B. <p>), bis wieder z.B. in einem weiteren Element (z.B. <span>) etwas anderes definiert ist, usw.

Einbinden von CSS-Dateien in HTML-Dokumente

Das Einbinden von externen CSS-Dateien geschieht im Kopf (<head></head>) der HTML-Datei.

Zwei Möglichkeiten:

Es lassen sich auch mehrere CSS zu verschiedenen Zwecken einbinden z.B.

Man kann auch dem Nutzer die Auswahl zwischen alternativen Stylesheets überlassen:

Aufbau von CSS-Dateien

Im Gegensatz zu HTML-Dateien haben CSS keinen Kopf oder ähnliches. Man kann gleich mit den einzelnen Regeln beginnen.

Kommentare werden so gekennzeichnet:
/* das ist ein Kommentar*/ .

Syntax der CSS-Regeln

Selektor { Eigenschaft: Wert; }
z.B.:
body {font-family: Times, serif;}

bei mehreren Eigenschaften :

Selektor {

  Eigenschaft 1: Wert;

  Eigenschaft 2: Wert;

  Eigenschaft x: Wert;

  }

mehrere Selektoren:
Selektor 1, Selektor 2, Selektor X { Eigenschaft: Wert; }
z.B.:

code, pre {
	font-family: "Courier New", Courier, mono;
	}

Vorgaben zu Schrift-Art, -Größe, -Farbe, etc.

Beim Einsatz von Farben sollte man darauf achten, dass für ausreichenden Konstrast gesorgt ist und dass Text und Grafik auch verständlich sind, wenn sie ohne Farbe betrachtet werden.

Formatierung von Text

Übung 3

Entwickeln Sie für die erste Übungsseite eine einfache CSS-Styledatei mit Angaben zur Schrift und der Textformatierung und binden Sie diese mit <link ... /> in die HTML-Datei ein!

Verhalten von Links (<a></a>) bei unterschiedlichem Status (Anker-Pseudo-Klassen) 

  a:link { color: blue } /* noch nicht besuchter Link */
  a:visited { color: red } /* schon besuchter Link */
  a:hover { color: black } 
  /* Benutzer zeigt mit der Maus auf einen Link' */
  a:active { color: yellow } /* Link wird ausgewählt */

Man beachte die Reihenfolge!

Einbinden von Bildern, z.B. für den Hintergrund

Bereiche (Boxen, <div></div>) - Positionierung

Mit dem <div>-Element lassen sich Webseiten in einzelne logische Bereiche teilen (z.B. für Navigation, Kopfzeile, Hauptteil, etc.), die sich dann mit Hilfe von CSS gestalten und positionieren lassen.

Das Element mit dem Identifikationsnamen "mein_bereich" (in HTML als <div id="mein_bereich"></div>) lässt sich in CSS über
#mein_bereich {
Eigenschaft: Wert;
}
gestalten. Dabei ist zu beachten, dass jeder Bereich (also jede "id") nur einmal in jedem Webdokument vorkommen kann.

Bei der Positionierung gibt folgende Möglichkeiten:

Die Positionierung im Ganzen kann dann z.B. lauten:

Mit width und height wird die Höhe des Bereiches angegeben. Mit margin definiert man einen etwaig gewünschten Rand ringsum den Bereich, mit padding einen inneren Rand zum nächsten Element (z.B. einem Textabschnitt). Um den Bereich lassen sich mit border Linien ziehen, für die Linienstärke, die Art (solid [durchgezogen], dotted [gepunktet], dashed [gestrichelt]) und die Farbe festzulegen ist.

Klassen

Durch die Verwendung von Klassen lassen sich bestimmte Inline-Bereiche (z.B. innerhalb eines Absatzes) bestimmen. Die Bereiche einer Klasse können in einem Webdokument beliebig oft vorkommen.

Klassen werden in CSS mit einem Punkt definiert:

Sinnvolle Style-Vorgaben für Druckausgaben

Durch #mein_bereich { display: none;} lässt sich die Ausgabe eines Bereichs unterdrücken. Sinnvoll ist dies beispielsweise bei Navigationsbereichen, auf die man bei Druckausgaben verzichten kann.
Tooltipps und Adressen von Links verschwinden normalerweise bei gedruckten Webseiten, da diese auf dem Bildschirm angezeigt werden, wenn der Nutzer die entsprechende Stelle mit der Maus überfährt. In einem Druckstylesheets lassen sich Vorgaben machen, damit diese Informationen auch auf dem Papier nicht fehlen:
Mit abbr:after { content: " (" attr(title) ") ";} gibt man den Titel (also den Langnamen) einer Abkürzung nach der Abkürzung in Klammern mit aus.
Mit a.extern:after { content: " < " attr(href) ">";} wird die Web-Adresse (URI) eines im HTML-Dokument mit <a class="extern" ...> gekennzeichneten externen Links in spitzen Klammern mit aufs Papier gebracht.

Übung 4

Ändern Sie den HTML-Code der Seiten aus Übung 2 dahingehend, dass Sie sinnvoll Bereiche für die Navigation, den Inhalt, etc. definieren und positionieren und gestalten Sie diese Bereiche in einem CSS-Stylesheet!
z.B. in dieser Form mit diesem Stylesheet.

Zum Seitenbeginn

Anhang

Code eines strikten XHTML-1.0-Dokumentes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Titel</title>
  </head>

  <body>
		
    <!-- ... Body des Dokuments mit dem Inhalt ... -->
		  
  </body>

</html>

Literatur / weitere Infos /Adressen

Einführungen und Allgemeines zu Webdesign mit (X)HTML, CSS
speziell zu CSS
speziell zu Zugänglichkeit (Barrierefreiheit)

Zum Seitenbeginn

letzte Änderung: Mi., 02.05.2007 20:07 , fiedler@

URI: http://www.adrian-fiedler.de/zeik/tut_webdesign.html
Valid XHTML 1.0!   Valid CSS!   Webdesign a.fiedler