Heyho und Herzlich Willkommen auf der Seite der Prototypes!

Ihr sucht nach Tricks und Kniffen, um besser und erfolgreicher mit Word zu arbeiten?

Außerdem interessiert Ihr euch für die Grundlagen von HTML und CSS?

Dann seid Ihr hier genau richtig!

Klickt Euch einfach in die Rubrik "Word" und "HTML&Css" und stillt Euren Wissensdurst!

Danach könnt Ihr uns gern einen Comment hinterlassen.

Also: Rock on and stay proto!

Eure Prototypes

Deborah

http://www.deborah.uniblogs.org/

Rieke

Susi

http://www.susi.edublogs.org/

• Sun December 23 - Weihnachten!

• Dokumentvorlagen in MS Word

• Grundlagen zu MS Word

• MS Word 2007 Tutorial 1

• MS Word 2007 Tutorial 2

Diese Seite zeigt Euch:

1. Die 10 Todsünden der Textverarbeitung

2. Step by Step - das Erstellen einer Dokumentvorlage

3. Wissenshunger - Was man immer schonmal über Word wissen wollte sowie hilfreiche Links und Videos

4. Quellenangaben

In dieser Rubrik werden Euch die 10 Word-Sünden vorgestellt und Ihr erfahrt, wie man es besser machen kann.

Erste Word-Sünde

Zeichen sollen nicht mit einem Druck auf "Tab" oder die "Leertaste" eingerückt werden.

Besser:

Word kennt dafür die Option "Einzug" zum Befehl "Absatz" (FORMAT > ABSATZ).

Zweite Word-Sünde

Einzelne Zeichen sollen nicht durch einen Druck auf  "Enter / Return" beendet werden (Abschnittswechsel am Ende jeder Zeile).

Besser:

Diese Taste ist nur für das Ende eines Absatzes notwendig – den Zeilenumbruch erledigt Word automatisch. Manuelle Zeilenumbrüche innerhalb eines Absatzes können mit „Shift+Enter“ realisiert werden.

Dritte Word-Sünde

(Seiten-)Umbrüche sollen nicht durch mehrfaches Drücken auf "Enter | Return" erzeugt werden.

Besser:

Word stellt verschiedene Arten von manuellen Umbrüchen zur Verfügung (EINFÜGEN > MANUELLER UMBRUCH...). Ein manueller Seitenumbruch kann z.B. auch mit "Strg + Enter" erzeugt werden.

Vierte Word-Sünde

Trennstriche sollen nicht mit einem Druck auf die "Bindestrichtaste" eingefügt werden.

Besser:

Trennstriche werden mit „Strg“ + „Bindestrichtaste“ erzeugt. Nur diese Trennstriche verschwinden zwischen zwei Silben, wenn sich der Zeilenfall ändert.

Fünfte Word-Sünde

Im Text soll nicht wahllos herumformatiert werden (Direkte Formatierung).

Besser:

Die Textformatierung sollte überwiegend mit Formatvorlagen erfolgen. Dazu ist es nicht unbedingt notwendig, benutzerdefinierte Formatvorlagen zu erstellen. Die Einstellungen der systemseitigen Formatvorlagen (z.B. „Standart“ oder „Überschrift 1“) können nach Belieben angepasst werden (FORMAT > FORMATVORLAGEN UND FORMATIERUNG ...) . Der gleichnamige Aufgabenbereich wird sichtbar. Bei Bedarf können „Alle Formatvorlagen“ unter ANZEIGEN eingeblendet werden. Eigenschaften können über das KONTEXTMENÜ "ÄNDERN..." angepasst werden.

Sechste Word-Sünde

Listen sollen nicht manuell z.B. mit „Sonderzeichen“ oder der Bindestrichtaste erstellt werden!

Besser:

Word bietet Ihnen zur Erstellung von Listen und Gliederungen zahlreiche Möglichkeiten im Dialogfeld „Nummerierung und Aufzählungszeichen“ (FORMAT > NUMMERIERUNG UND AUFZÄHLUNGSZEICHEN...). Hier können einfache Aufzählungslisten, Nummerierungen und Gliederungslisten erstellt werden. Unter dem Reiter „Listenformatvorlagen“ können und sollten eigene Formatvorlagen für Listen erstellt werden.

Achte Word-Sünde

Kopf- und Fußzeilen sollen nicht manuell durch "Copy & Paste" auf jeder Seite neu erstellt werden.

Besser:

Verwenden Sie die Ansicht „Kopf- und Fußzeile“ (ANSICHT > KOPF-UND FUßZEILE), um Elemente zu positionieren, die auf jeder Seite eines Abschnittes angezeigt werden sollen.

Sie können hier nicht nur Text und Seitennummerierungen, sondern auch Grafiken, Bilder

und andere Elemente der Zeichnen-Symbolleiste (ANSICHT > SYMBOLLEISTEN > ZEICHEN)

einfügen.

Tipp: In dieser Ansicht können recht einfach "Wasserzeichen" auf jede Seite eines Abschnitts eingefügt werden.

Neunte Word-Sünde

Inhaltsverzeichnisse sollen weder manuell erstellt werden noch in ein separates Dokument ausgegliedert werden.

Besser:

Word bietet Ihnen die Möglichkeit, verschiedene Referenzen zu erstellen, u.a. auch Inhaltsverzeichnisse (EINFÜGEN > REFERENZ > INDEX UND VERZEICHNISSE...). Die systemseitigen Formatvorlagen können Sie wie gehabt nach Belieben anpassen (Ändern…-Button). Durch einen Manuellen Abschnittswechsel vor und nach der Seite, auf der Sie das Inhaltsverzeichnis platzieren möchten, lässt sich auch das Layout der Kopf- und Fußzeilen, unabhängig von der Gestaltung der anderen Abschnitte im Dokument, anpassen.

Zehnte Word-Sünde

Kommentare und Änderungen sollen nicht durch manuelle Formatierung, z.B. durch Farbänderungen oder andere direkte Formatierungen gekennzeichnet werden.

Besser:

Für Teamarbeiten lassen sich Kommentare und Änderungen sehr einfach im „Überarbeitungsmodus“ generieren (ANSICHT > SYMBOLLEISTEN > ÜBERARBEITEN). Neben den Möglichkeiten des Einfügens von Kommentaren an markierte Textstellen (auch über: EINFÜGEN > KOMMENTAR), können auch Änderungen bzw. Überarbeitungen an Textpassagen mitverfolgt werden. Dies geschieht durch das Aktivieren „Änderungen nachverfolgen“ (auch über: EXTRAS > ÄNDERUNGEN NACHVERFOLGEN). Zur Anzeigensteuerung im Überarbeitungsmodus stehen Ihnen verschiedene Darstellungen zur Verfügung: drop down button „Anzeigen“ ermöglicht Filterungen nach Bearbeitern, Versionsständen mit und ohne Änderungen | Kommentaren.

Tipp: Damit Änderungen für ein kollaboriertes Arbeiten im Team markiert werden, ist es wichtig darauf zu achten, dass „Änderungen Nachverfolgen“ aktiviert ist. Zu den jeweiligen Markups im Text gibt es verschiedene Bearbeitungsmöglichkeiten im Kontextmenü oder der Symbolleiste.

Im Folgenden zeigen wir Euch in wenigen einfachen Schritten, wie man ganz leicht das Grundgerüst für Hausarbeiten, Referate etc. erstellen kann. Dieses kann dann als Dokumentvorlage gespeichert und für weitere Arbeiten verwendet werden.

Für Hausarbeiten gelten im Allgemeinen folgende Seitenränder (Abweichungen hiervon nur, wenn die Einbindung von Tabellen oder Grafiken erforderlich ist):

- links    4,0 cm (für den Heftrand)

- rechts  3,0 cm

- oben    2,5 cm

- unten   2,5 cm

Seitenlayout > Seitenränder > Formatvorlage auswählen oder "Benutzerdefinierte Seitenränder" anklicken

In der Regel ist für Hausarbeiten festgelegt:

- Zeilenabstand    1,5

Start > in der Rubrik "Absatz" das Feld "Zeilenabstand" anklicken > gewünschtes Format auswählen (1,5)

- Schriftart           Times New Roman, Bookman Old Style, Garamond

- Schriftgröße      12

Start > in der Rubrik "Schriftart" je nach Bedarf das Feld "Schriftart", bzw. "Schriftgrad" > gewünschtes Format auswählen (Times New Roman, bzw. 12)

Einfügen > Deckblatt > gewünschtes Deckblatt auswählen > Deckblatt erscheint > Text einfügen

Nachdem wir nun schon fertig sind mit dem Erstellen der Dokumentvorlage, sollte diese noch ordnungsgemäß abgespeichert werden. Die Vorlage wird als sogenannte DOT-Datei gespeichert. Dies macht man wie folgt:

Speichern Unter > gewünschten Speicherort wählen > Rubrik "Dateityp" anklicken, es bieten sich nun mehrere Auswahlmöglichkeiten > "Word-Vorlage" wählen und als solche speichern

http://www.imt.tu-ilmenau.de/lehre/hs_avt/Wiss.Arbeiten.pdf

http://www.jura.uni-tuebizentrum/veranstaltungen/MSWord_2000_Kurs_Teil1.pdf

http://tutorblog.elearning2null.de/wp-content/uploads/2007/04/eldok_b2-word_ifmk-leitfaden_auszug.pdf

http://www.pc-faq.de/tasten/word.htm

Schröder, Henrik / Steinhaus, Ingo (2002): Mit dem PC durchs Studium. Darmstadt: Primus Verlag. [S.100 f.]

Ravens, Tobias (2004): Wissenschaftliches mit Word arbeiten. 2. Auflage von Word 2000 bis Word 2003. München: Pearson Studium. [S. 41 ff.]

• Hier findet Ihr Beispiele für Entitäten

Diese Seite zeigt Euch:

1. Begriffserklärungen

2. Grundlagen und Befehle zu HTML

3. Grundlagen und Befehle zu CSS

4. Die 10 Gebote in der HTML-Programmierung

5. Typische Fehler beim Verfassen einer HTML-Seite

6. Dokumentation zur Erstellung unserer Webvisitenkarte

7. Quellenangaben

Als Einstieg werden wir Euch grundlegende Begriffe erläutern:

Was ist HTML?                Was sind Tags?                  Was sind Entitäten?           Was ist CSS?            Was sind Hyperlinks?

HTML = Hypertext Markup Language

HTML ist die Grundlage sowie Sprache des World Wide Webs.

Sie ermöglicht die Darstellung des WWW sowie eine einfache Navigation zwischen den Inhalten.

Einfach ausgedrückt: HTML ist die Dokumentenbeschreibungssprache, in der Web-Seiten geschrieben sind.

Eine HTML-Datei wird in einem beliebigen Editor erstellt. Sie enthält Text, Informationen darüber, was der Text bedeutet (die logische Struktur des Dokuments) und Informationen über bestimmte physische Attribute bestimmter Textpassagen (wie Hervorhebungen durch Fettdruck, kursive Schrift oder Unterstreichungen).

Ein HTML-Dokument kann von einem Betrachtungsprogramm bzw. Browser  unabhängig von der verwendeten Hardware, dargestellt werden. Browser führen die Formatierungsbefehle aus und zeigen das HTML-Dokument auf dem Bildschirm an.

CSS = Cascading Style Sheets

CSS ist eine Stilsprache, die das Aussehen von HTML-Dokumenten definiert.

Sie kann man z.B. zum Festlegen von Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern, für fortgeschrittener Positionierung und viele andere Sachen benutzen.

Mit CSS kann man das Layout vieler Webseiten aus einer einzigen Style-Sheet-Datei heraus kontrollieren - eine Kontrolle, die sehr präzise ist und individuell sein kann.

Man kann verschiedene Layouts für verschiedene Medientypen (Bildschirmanzeige, Druck etc.) erstellen und eine Vielzahl von fortgeschrittenen und anspruchsvollen Techniken anwenden. Zudem wird CSS von allen Browsern unterstützt.

Mit CSS ist es möglich, Inhalte und Formatierungen voneinander zu trennen.

Tags = HTML-Befehle

Sie werden benutzt, um den Anfang und das Ende eines Befehls zu kennzeichnen.

Dafür setzt man die Tags in spitze Klammern. Die Zeichen in den Klammern werden nun vom Browser erkannt und interpretiert.

Start-Tags sehen wie folgt aus: <html>.

End-Tags unterscheiden sich von ihnen nur durch einen Schrägstrich (Slash): </html>.

Außerdem gibt es nich Empty-Tags, die nur einmal auftreten und Browser sofort ausgeführt werden. Hierzu gehören z.B. die Tags für horizontale Linien <hr> und den Zeilenumbruch <p>. Sie benötigen kein End-Tag.

Hyperlink = Verknüpfung / Verweis auf ein anderes Dokument in einem Hypertext

Hyperlinks verbinden einzelne Webseiten und andere im Internet verfügbare Dokumente.

Die technische Grundlage von Hyperlinks im Web bildet eine standardisierte Auszeichnungssprache (HTML).

Die Syntax lautet dabei folgendermaßen:

<a href="www.beispiel.de">Linktext</a>

würde einen Hyperlink auf die Internetseite www.beispiel.de anlegen;

der "Linktext" ist dabei der Text, der für den Benutzer (User) auf der Seite als Weiterleitung auf die entsprechende Internetseite angezeigt wird.

Ziel eines Links kann eine bereits vorhandene Datei (Webseite, Bild, Audiodatei, ect.) oder ein dynamisch erstelltes Dokument sein.

Ein Link enthält die Adresse des Ziels, in der Regel als URL.

Die Interpretation des Aufrufs eines Links übernimmt typischerweise ein Browser.

Entitäten = Sonderzeichen

Sonderzeichen werden in HTML als sogenannte HTML-Entitäten kodiert.

Sie beginnen mit einem Ampersand (&) und enden mit einem Semikolon, dazwischen steht eine mehr oder weniger einprägsame Bezeichnung.

Der Umlaut ä wird beispielsweise als &auml; kodiert.

An dieser Stelle wollen wir Euch Grundlagen von HMTL näher bringen.

Wir zeigen Euch, wie man ein Dokument richtig gliedert, wie man Hypertextlinks einfügt und Listen sowie Grafiken erstellt.

Weiterhin findet Ihr Beispiele für Absatz- und Zeichenformate.

Jedes HTML-Dokument ist von dem <html>...</html> Tag eingeschlossen, um Anfang und Ende des gesamten HTML-Dokuments zu kennzeichnen.

Das gesamte, mit diesem Tag eingeschlossene, Dokument lässt sich weiterhin gliedern in einen Head- und einen Body-Abschnitt, wobei beide Abschnitte von ihren entsprechenden Tags, also <head>...</head> sowie <body>...</body>, eingeschlossen werden.

Diese Tags sind zwingend nötig. Ein minimales HTML-Dokument sieht wie folgt aus:

<html>

<head>

</head>

<body>

</body>

</html>

Der Teil eines HTML-Dokuments, der normalerweise die meisten Zeilen enthält ist der Body, der von dem Body-Tag umschlossen wird.

Findet ein Browser den Body-Tag, so weiß er, daß der nachfolgende Text bis zum Body-Ende-Tag mit den HTML-Konventionen auszugeben ist. Der Body enthällt den eigenlichen Informationsteil.

Hypertext-Verweise auf Sprungmarken sowie Hypertextlinks sind die eigentliche Stärke bzw. Grundlage von HTML.

Eine HTML-Seite als gesamtes Dokument kann schnell unübersichtlich und zu umfangreich werden. Teilt man sein gesamtes Dokument hingegen in einzelne HTML-Seiten bzw. einzelne Unterabschnitte auf, steigert man die Übersichtlichkeit und Wartbarkeit des gesamten Dokuments.

Die Verbindung zwischen Unterdokumenten in HTML bezeichnet man als Hypertextlinks, die i.d.Regel vom Browser farblich gekennzeichnet werden. Innerhalb des WWW gibt es für Hypertextlinks generell die Möglichkeit, jedes beliebige Dokument aufzurufen.

Das folgende Beispiel stellt einen Hypertextlink dar, der auf das HTML-Dokument in der Datei 'haupt.htm' im aktuellen Verzeichnis verzweigt. Der Text 'Hauptverzeichnis' wird hierbei vom Browser als Hypertextlink gekennzeichnet.

<a href="haupt.htm">Hauptverzeichnis</a>

Soll innerhalb einer HTML-Seite navigiert werden, so müssen hierzu einzelne Sprungmarken innerhalb der HTML-Seite definiert werden. Ein einfaches Beispiel hierfür ist z.B. die Definition einer Sprungmarke zu Beginn eines Dokuments wie folgt:

<a name="home">

Die Verzweigung auf diese Sprungmarke wird mit der folgenden Anweisung realisiert, wobei hierbei der Text  'Anfang der Seite'  wiederum vom Browser gekennzeichnet wird:

<a href="#home">Anfang der Seite</a>

HTML stellt im Wesentlichen die drei Listentypen 'geordnete Liste', 'ungeordnete Liste' sowie '(ungeordnete) Menüliste' zur Verfügung.

Alle diese Listentypen lassen sich beliebig verschachteln.

Syntax 'geordnete Liste': die Listenpositionen werden numeriert

<ol>

Überschrift der Liste

<li>erster Listeneintrag

<li>weiterer Listeneintrag

</ol>

Syntax 'ungeordnete Liste': Voranstellung eines Grafikzeichens je Listenposition

<ul>

Überschrift der Liste

<li>erster Listeneintrag

<li>weiterer Listeneintrag

</ul>

Syntax '(ungeordnete) Menüleiste': einfache Ausgabe der Listenposition

<menu>

Überschrift der Liste

<li>erster Listeneintrag

<li>weiterer Listeneintrag

<menu>

Zur Gliederung von Absätzen stellt HTML folgende Befehle zur Verfügung:

<br>              Zeilenumbruch

<p>               Absatzende inkl. Leerzeile

<hr>              horizontale Trennlinie

<center>        Zentrierung (container-tag)

Die Zeichenformate von HTML sind leider nicht sehr umfangreich, sie können aber bzgl. ihrer Darstellung innerhalb der Optionen des verwendeten Browsers meistens für verschiedene Eigenschaften (z.B. Farben und Fonts) eingestellt werden.

Alle HTML-Befehle im Beispiel sind container-tags.

Zur Einbindung von Grafiken bzw. Bildern stellt HTML den 'image-tag' zur Verfügung, der folgende Syntax hat:

<img align=Ausrichtung src=Bilddatei alt=Alternativtext>

Die einzelnen Parameter haben hierbei folgende Funktion:

Ausrichtung                       Position [top,middle,bottom] im Browserfenster

Bilddatei                            z.B. GIF-Datei "bild.gif"

Alternativtext                     "Ausgabe, wenn Bilddatei nicht vorhanden ist"

Natürlich dürfen auch die Grundlagen zu CSS nicht fehlen.

Wie CSS-Anweisungen aufgebaut sind und wie man CSS implementiert, erfahrt Ihr hier.

Ihr findet außerdem das CSS-Box-Modell sowie einige CSS-Befehle im Überblick.

Jede CSS-Anweisung besteht aus 2 Teilen:

h1   {color:red}

Erster Teil = h1:

Auf welche HTML-Elemente soll sich die Formatierung beziehen?

Der erste Teil wird durch ein Leerzeichen vom zweiten getrennt.

Zweiter Teil = {color:red}:

er wird in geschweifte Klammern eingeschlossen und als Deklaration bezeichnet. Hier wird angegeben, welche Formatierung/en erfolgen sollen.

Die Deklaration besteht ebenfalls aus 2 Teilen: dem Namen der betroffenen Eigenschaft (Attribut), gefolgt von einem Doppelpunkt und dem dieser Eigenschaft zugewiesenen Wert (Attributwert).

Die CSS-Attribute sind nicht identisch mit den HTML-Attributen, obwohl die Benennung manchmal gleich und oft ähnlich ist.

Kommentare

Kommentare werden in CSS mit der Syntax: /*Hier steht ein Kommentar*/ angegeben.

Setzen von mehreren Attributen

In einer CSS-Regel können auch mehrere Eigenschaften gleichzeitig bestimmt werden; die einzelnen Eigenschaften werden dann innerhalb der geschweiften Klammern durch ein Semikolon getrennt.

h1 {color:red;font-size:17pt;font-family:arial}

Definition von Regeln für mehrere Tags

Es ist ebenfalls möglich, eine Regel zu formulieren, die sich auf mehrere HTML-Elemente gleichzeitig bezieht. Dazu müssen die Namen der betroffenen Elemente als Liste mit dem Komma als Trennzeichen aufgeführt werden.

h1,h2,h3 {color:green;font-family:arial}

Es gibt 3 Methoden, Stylesheet-Angaben mit einem Dokument zu verknüpfen.

1. Inline Definition

Im einfachsten Fall werden die Regeln als Inline-Style-Information mit Hilfe des Attributs style direkt im Start-Tag des entsprechendenn HTML-Elements untergebracht.

<h1 style="font-family:arial;font-size:30pt;color:blue">CSS-Beispiel Nr.1</h1>

Die Inlinen-Methode stellt im Wesentlichen keinen Fortschritt gegenüber der HTML-Vorgehensweise dar und sollte daher nur in nicht generalisierbaren Ausnahmefällen Anwendung finden.

2. Definition im Head einer Seite

Die komplette Style-Information kann mit Hilfe des dafür vorgesehenen Tags <style> im Head-Bereich des HTML-Dokuments untergebracht werden und gilt dann für alle so definierten Tags dieser Seite.

<html>

<head>

<title>Titel der Seite</title>

<style type="text/css">

<body {background-color:white;color:black}

p {color:red;

font-size:20pt;

font-family:verdana}>

</head>

<body>...</body>

</html>

Die HTML_Kommentare in dem style-Bereich dienen dazu, die Angaben vor älteren Browsern, die kein CSS verstehen, zu verstecken. Ohne Kommentare stellen diese Browser die CSS-Angaben als Text auf der Seite dar.

3. Externe Definition in einer separaten Datei

Als dritte Möglichkeit kann die Style-Information auch in einer zusätzlichen Datei untergebracht werden, aus die dann aus einer HTML-Seite verwiesen wird.

Dazu dient der Tag <link>, der innerhalb des Head-Bereichs gesetzt werden muss.

Insbesondere bei größeren Projekten, wo eine Vielzahl von HTML-Dokumenten  (Web-Site) ein einheitliches Erscheinungsbild haben soll, empfiehlt sich diese Vorgehensweise und bringt große Vorteile hinsichtlich der Wartbarkeit einer Web-Site.

<html>

<head>

<title></title>

<link rel="stylesheet"

type="text/css"

href="mystyle.css">

</head> ...

Werden CSS-Definitionen doppelt angegeben, so gilt:

INLINE überschreibt IN-HEAD überschreibt EXTERN

In dieser Rubrik werden Euch die 10 HTML-Gebote vorgestellt und Hinweise gegeben, wie man die Programmierung erfolgreich meistert.

Erstes HTML Gebot

Es sollen "well-formed HTML"-Seiten erstellt werden.

I: Gute HTML-Struktur

Achten Sie auf das richtige Grundgerüst einer HTML-Seite und die richtige Schachtelung (Hierarchische Struktur) der HTML-Elemente.

Entscheidend ist außerdem, dass die Elemente an der richtigen Stelle eingesetzt werden (Head- oder Body-Bereich).

Zweites HTML-Gebot:

Es sollen "well-formed HTML"-Seiten zu erstellt werden.

II: "HTML-Tags"

Hinweis:

a) Ein Start-Tag wird immer mit dem dazugehörigen End-Tag geschlossen.
b) Aus Kompatibilitätsgründen zu XHTML wird empfohlen, auch Elemente ohne Inhalt, wie z.B. <br>, <img> immer zu schließen: <br />, <img />.

c) Aus Kompatibilitätsgründen zu XHTML wird empfohlen, Element- und Attributnamen IMMER klein zu schreiben (z.B. <a href=http://www.ifmk.de >Das ist ein Link</a>).

d) Attribute werden immer in Anführungsstriche gesetzt (z.B. src= "blume.jpg" oder alt "Das Foto zeigt eine Sonnenblume")

e) Es sollen immer Entitäten verwendet werden (z.B. für "ä" ->"&auml;").

Drittes HTML-Gebot

Es sollen "well-formded HTML"-Seiten erstellt werden.

III: korrekte Hyperlinks

Hinweis:

Viertes HTML-Gebot

Inhalt und Layout sollen strikt getrennt werden.

Hinweis:

HTML strukturiert eine Seite und beschreibt nicht wie sie aussieht.
Ausschließlich CSS dient zur Gestaltung der Seite.
Beachten Sie dies schon mit Beginn der Erstellung, eine nachträgliche Anpassung ist oft unnötig und zeitaufwändig.

Fünftes HTML-Gebot

Es soll nicht mit Attributen oder Elementen formatiert werden, die den Status "deprecated" haben.

Hinweis:

Viele Formatierungselemente und Attribute in HTML verstoßen gegen die strikte Trennung von Inhalt und Layout. Demnach sollten sie nicht mehr verwendet werden und erhalten den Status "deprecated" (z.B. "font-Tag").

Verwenden Sie deshalb ausschließlich logische Auszeichnungen bzw. visuelle Auszeichnung (z.B. "i-Tag" oder "b-Tag").

Sechstes Gebot

Eine HTML-Seite soll nicht mit Layouttabellen gestaltet werden.

Hinweis:

Die Verwendung von Layouttabellen verstößt gegen die strikte Trennung von Inhalt und Layout.

Inzwischen ist es ohne Probleme möglich, tabellenfreie Layouts mit CSS zu erstellen.

Siebentes Gebot

Auf zu viele Animationen, unterschiedliche Textfarben und Schriftarten soll verzichtet werden.

Hinweis:

Zu viel verschiedene Formatierungen und blinkende Layoutelemente können leicht Verwirrung schaffen, sind nicht immer lesbar und lenken vom Inhalt ab.

Achtes Gebot:

Du sollst für z.B. Grafiken und Formularelemente immer auch eine Beschreibung mittels "alt-Attribut“ hinzufügen.

Hinweis:

Verwende stets das „alt-Attribut“ um Grafiken, Bilder, Formularelemente, applets etc. zu beschreiben, um jedem Nutzer die Chance zu geben, die Inhalte zu erfassen.

Neuntes Gebot

Nutzergruppen sollen nicht durch Aussagen wie: "optimiert für Internet Explorer 4.1, SeaMonkey 5.0, etc." oder die Verwendung von horizontalen Scrollleisten ausgeschlossen werden.

Hinweis:

a) Nicht alle HTML-Eigenschaften und CSS-Regeln funktionieren in jedem Browser. Es handelt sich dabei meist um zusätzliche Layouteffekte. Versuchen Sie sich auf die gängigen CSS-Regeln zu beschränken, die auf allen Browsern funktionieren.

Die ggf. ein wenig abweichende Darstellung einer Seite auf unterschiedlichen Browsern ist dabei nicht gemeint. (In den meisten Werken zu HTML & CSS sind CSSReferenzkarten enthalten, die anzeigen welche CSS-Regeln von den gängigen Browsern unterstützt werden).

b) Horizontale Scrollleisten sind nicht benutzerfreundlich.

Durch Verwendung von h. S. kann nicht ausgeschlossen werden, dass der Inhalt teilweise oder gar nicht wahrgenommen wird. Abhilfe schafft eine feste horizontale Seitenbeschränkung und die automatische Verwendung von vertikalen Scrollleisten in CSS.

Zehntes Gebot

Metainformationen sollen sinnvoll eingesetzt werden.

Hinweis:

Erweitere deine HTML-Seite mit sinnvollen Zusatzinformationen und vermeide überflüssige Informationen bzw. Wiederholungen.
Unterlasse den Missbrauch von Metainformationen zum eigenen Vorteil (z.B. Werbung, gezieltes Ranking, Spam).

Hier seht Ihr nocheinmal häufig vorkommende Fehler, wie sie Euch am besten nicht unterlaufen sollten.

Um ein Hintergrundbild (den background) über CSS zu bestimmen nutzt ihr  <body style="background-image:url(background1.gif)">, wobei ihr für URL die Adresse eures Hintergrundes angebt. Die Farbbestimmung trefft ihr über die Eingabe background-color:Wert; Für „Wert“ setzt ihr eine Farbangabe wie z.B. FFFFFF für weiß und 000000 für schwarz ein. Um den Wiederholungseffekt des Hintergrundes anzugeben, nutzt ihr die Eingabe von background-repeat:Wert; Für „Wert“ notiert ihr einen der folgenden Werte:

repeat = wiederholen (Voreinstellung)
repeat-x = nur "eine Zeile lang" waagerecht wiederholen.
repeat-y = nur "eine Spalte lang" senkrecht wiederholen.
no-repeat = nicht wiederholen, nur als Einzelbild anzeigen.                                                      

Mit der Angabe background-attachment:Wert; könnt ihr eine Aussage über das Wasserzeichen treffen. Für „Wert“ notiert ihr dabei einen der folgenden Werte:
scroll = mitscrollen (Voreinstellung).
fixed = Hintergrundbild bleibt stehen. Auch die Position des Backgrounds könnt ihr verändern; mit background-position:Wert; Für „Wert“ setzt ihr entweder zwei numerische Angaben zur Bestimmung der linken oberen Startecke bezogen auf die linke obere Elementecke ein,
z.B. 10px 30px.
Oder notiert einen der folgenden Werte:

top = vertikal obenbündig.
center = horizontal zentriert.
center = vertikal mittig.
bottom = vertikal untenbündig.
left = horizontal linksbündig.
right = horizontal rechtsbündig.

Einem Text kann man verschiedene Eigenschaften zuordnen. Um dies über CSS zu definieren ist z.B. folgende Eingabe möglich:
<html>
<head>
<title>Name des Dokumentes</title>
<style type="text/css">
body {
 font-family:Verdana;
 font-size:x-large;
 font-style:italic;
 color: 000000;
}
</style>

Mit dem Ausdruck font-family wird dabei die Schriftart wie z.B. Times New Roman oder Verdana gewählt. Mit font-size bestimmt ihr die Größe der Schrift, und gebt dafür entweder einen numerischen Wert wie 1.7em, 18px oder 11pt oder einen der folgenden Werte an:

xx-small = winzig.
x-small = sehr klein.
small = klein.
medium = mittel.
large = groß.
x-large = sehr groß.
xx-large = riesig.
smaller = sichtbar kleiner als normal.
larger = sichtbar größer als normal

font-style gibt den Schriftstil einer gewählten Schrift an. Dabei gilt:
italic = kursiv
oblique = kursiv
normal = normaler Schriftstil

So, und zuletzt nun der Link zu unserer Gruppen-Webpage. Schaut sie gerne an, für Fragen, Komentare, Anregungen sind wir stets offen.

Wir hoffen, unsere Wissenscollagen haben ein bisschen mehr Licht in die HTML-/CSS-Geschichte gebracht! Viel Erfolg.

http://www.box.net/shared/l8fqiv1lj2

www.uni-bielefeld.de

www.fh-wedel.de

de.html.net

www.jgiesen.de

www.wikipedia.de

www.exinde.de

www.webmasternetz.de

recherchenblog.ch

www.onlyfree.de