Wir 4 Mädels begrüßen Euch auf unserer Protopage!
Sehet Euch um und habet Spaß!

Maike, Jule, Kathrin und Steffi

PS: Es würde unseren kleinen Freund Protopuppy freuen, wenn Ihr Euch ein bischen um ihn kümmern würdet.

Nützliche Hinweise und Links zu HTML und CSS. Jetzt hier bei uns exklusiv zum anschauen ;-)

Euer 4fine-Team!

Sooooo... Ihr wollt Neues über MS Word erfahren?
Dann seid ihr hier richtig! Einfach durchklicken und checken...

Ihr könnt vieles über Fehler und ihre Behebungen erfahren, auf nützliche Links klicken und euch einen Überblick verschaffen.

Die einzeln bearbeiteten Teile der Hausarbeit:

• Teil 1, bearbeitet von Maike
• Teil 2, bearbeitet von Stefanie
• Teil 3, bearbeitet von Kathrin
• Teil 4, bearbeitet von Juliane

Die Dokumentenvorlagen:

• Deckblatt
• Hausarbeit

Die zusammengefügte Hausarbeit als:

• Word-Datei mit Markups
• Pdf-Datei ohne Markups

• Wer ein gut strukturiertes Nachschlagewerk zu MS Word online sucht, der ist hier richtig: http://www.schule-bw.de/lehrkraefte/werkstatt/2_mm/12_prog/word

• Mit diesem Link gelangt Ihr in ein Forum, bei dem Ihr allgemeine Fragen zu Computerproblemen los werdet, aber auch Hilfe zu MS WOrd findet: http://www.computerhilfen.de/hilfen-7-84841-0.html

• Auf dieser Seite findet Ihr verschiedene Kurse und weitere Links zu Lernprogrammen für viele Word-Versionen (also XP, 2003, ...) : http://www.akademie.de/office-programme/office-microsoft-word-lernen/index.html

• Das ist die offizielle Homepage zu Microsoft Office. Ganz nett zum Stöbern: http://office.microsoft.com/de-de/word/FX100487981031.aspx

• Wer keine Lust hat selbst zu stöbern, dem sei dieser Link ans Herz gelegt. Hier könnt Ihr durch verschiedene Lektionen blättern und Euch über alle Möglichkeiten mit MS Word informieren: http://office.microsoft.com/training/training.aspx?AssetID=RC100664431031&pid=CR100654561031 

1. Bevor Ihr mit der Arbeit beginnt, solltet Ihr darauf achten, dass Ihr in eurem Dokument die Formatierungszeichen seht. Dies könnt Ihr über „Extras" unter "Optionen“ einstellen. Der Screenshot wird euch dabei helfen diese Einstellung zu finden.
2. Egal ob Ihr schon feststehende Textbausteine in Eurem Dokument oder manuell eine Gliederung eingefügt habt, diese Dinge können jeder Zeit in ein Format umgewandelt werden(siehe Beitrag „5. Todsünde“).

Im folgenden werden die 10 Todsünden in der Textbearbeitung genannt und erklärt, wie es richtig gemacht wird. Abbildungen und Videos werden euch helfen, die Lösungen besser zu verstehen.

Du sollst einzelne Zeilen nicht durch einen Druck auf „Enter | Return“ beenden!

Diese Taste ist nur für das Ende eines Absatzes notwendig!

Das bedeutet:

• einfach weiterschreiben und manuelle Zeilenumbrüche meiden
• falls doch Zeilenumbruch nötig einfach "Shift" + "Enter" drücken

Du sollst (Seiten)-Umbrüche nicht durch mehrfaches Drücken auf „Enter | Return“ erzeugen!

Auch hierfür gibt es eine Option in MS Word:

• entweder man nutzt die Tastenkombination "Strg + Enter"
• oder man wählt über die Menüleiste "Einfügen" die Option "Manueller Umbruch" und aktiviert dort den gewünschten Umbruch (siehe Abbildung 3+4)

Du sollst Trennstriche nicht mit einem Druck auf Leertaste einfügen

• da solche Trennstriche bei späterer Formatierung erhalten bleiben, wenn das Wort doch noch in eine Zeile passt (siehe Abbildung 5)
• Deshalb: Bindestriche mit Druck auf „Strg“ und Bindestrichtaste erzeugen
• Bei Änderung des Zeilenfalls entfallen diese

Du sollst keine direkte Formatierung innerhalb des Textes vornehmen 

• Textformatierung sollte überwiegend mit Formatvorlagen erfolgen
• Ihr müsst nicht unbedingt eigene Formatvorlagen erstellen
• Verändert doch einfach die Einstellungen der systemseitigen Formatvorlagen
• Ihr könnt die Schrift, Absatz, Nummerierung und vieles mehr verändern
• Markiert den Text, den ihr verändern wollt
• Geht dann in der Menüleiste auf den Punkt „Format“ und lasst euch durch „Formatvorlagen und Formatierung…“ das derzeitige Format anzeigen
• Das hervorgehobene Format entspricht eurer momentan Formatierung
• Wählt diese an und schon könnt ihr die Formatvorlagen nach euren Wünschen verändern.
• Doch wie dies genau abläuft, könnt ihr im Video nochmals sehen...

Du sollst Listen nicht manuell erstellen, z.B. mit „Sonderzeichen“ oder Bindestrichtaste

• MS Word stelle Werkzeuge zur Erstellung von Listen und Gliederungen zur Verfügung
• Format/ Absatz, dann auf „Nummerierung und Aufzählungszeichen“ (siehe Abbildung 6)
• man kann nun zwischen verschiedenen Listenzeichen wählen, eine Gliederung erstellen oder Formatvorlagen nutzen und das ganze über "Anpassen" in die gewünschte Form bringen (siehe Abbildung 7)

Du sollst Kopf- und Fußzeilen nicht manuell durch "Copy & Paste" auf jeder Seite neu erstellen.

• meist verwendet, um auf jeder Seite den Namen, Datum, Seitennummerierungen oder Ähnliches erscheinen zu lassen
• unter "Ansicht - Kopf- und Fußzeile positionieren"
• auch Grafiken und Bilder lassen sich hier einfach einfügen ("Ansicht - Symbolleisten - Zeichnen")
• Feldfunktionen in Kopf- und Fußzeile sind auch möglich ("Einfügen - Feld") übersichtlich und sauber wird die Kopf- und Fußzeile auf jeder Seite automatisch weitergeführt

Du sollst Inhaltsverzeichnisse weder manuell erstellen noch in ein seperates Dokument ausgliedern.

Niemals selbst erstellen und mit Tap einrücken - klappt meistens sowieso nicht

• Jeden neuen Gliederungspunkt formatieren (entweder Formatvorlagen nutzen oder selbst anlegen) – für obere Gliederungspunkte z.B. „Überschrift 1“ 
• Für weitere untere Gliederungsebenen fortführen, z.B. als „Überschrift 2“ formatieren
• Über "Einfügen - Referent - Index und Verzeichnisse - Inhaltsverzeichnis" die Gliederung erstellen – natürlich müssen hier die Formatierungen übereinstimmen. Beachte die Vorschau!
• Das Layout der Gliederung ist flexibel anpassbar - sieht ganz gut aus, oder?
• hier ein kleines Video zur Gliederung zum besseren Verständnis

Du sollst Kommentare und Änderungen nicht durch manuelle Formatierung z.B. durch manuelle Farbänderungen oder andere direkte Formatierungen kennzeichnen.

Nicht so wie in Abbildung 10!

Wichtig für die Arbeit im Team!

• Überarbeitungsmodus über "Ansicht - Symboleisten - Überarbeiten" anzeigen lassen, Kommentare und Änderungen werden so sichtbar
• Über "Extras - Änderungen nachverfolgen" erhält man genaue Auskunft über Text- bzw. Formatänderungen – bei Teamarbeit immer aktivieren!
• verschiedene Darstellungen lassen sich anzeigen - so z.B. nach Versionsständen
• bei erwünschten Änderungen nicht formatieren sondern lieber einen "Kommentar" einfügen (siehe Abbildung 11) 

Wie ein neues Dokument fehlerfrei entstehen kann.

Beispiel an einem Deckblatt für eine Hausarbeit nach den IfMK - Richtlinien

Bevor man anfängt ein Hausarbeit oder ähnliches zu schreiben, sollte man vorher seine Formatierung überlegen und einrichten, um sich den Arbeitsaufwand in nachhinein zu ersparen.

Seite einrichten

Zunächst einmal sollte man die Seite einrichten. Dazu gehören die Seitenränder, die nach
IfMK – Richtlinien folgende Werte haben müssen:

• links 4 cm (für den Heftrand)
• rechts 3 cm
• oben 2,5 cm
• unten 2,5 cm

Diese Einstellungen werden unter dem Menüpunkt „Datei – Seite einrichten“ getätigt. Da die Erste Seite einer Hausarbeit meistens unterschiedlich gestaltet ist als der Rest der Arbeit, muss außerdem unter „Seite einrichten“ im Register „Layout“ der Haken im Feld „Erste Seite anders“ gesetzt werden.

Formatvorlage einrichten

Weiterhin sollte man vor beginn der Schreibarbeit bestimmte Formate für Überschriften, Absätze und sonstige anfallende Formatunterschiede einrichten.

Am besten fängt man erst mal damit an, dass man sich die Formatierung anzeigen lässt (siehe Beitrag zur „5. Todsünde“). Von hier aus können die systemeigenen Formate dann entsprechend den eignen Vorlieben bzw. Vorschriften eingerichtet werden. Eins der wichtigsten Formate ist wohl das „Standard“ Format. Es bildet die Basis aller Formate und sollte mit den wichtigsten Details gerüstet werden. Hier gelten wieder für AMW Studenten der TU – Ilmenau die Richtlinien des IfMK.

• Zeilenabstand: 1,5 Zeilen
• Schriftart: Times New Roman, Bookman Old Style, Garamond
• Schriftgröße: 12
• Ausrichtung: Blocksatz

Da es hier aber um die Beschreibung zur Einrichtung eines Deckblattes geht, sind folgende Formate noch von Bedeutung:

§         „Titel 1“ und „Titel 2“, damit die Überschrift der Hausarbeit entsprechend per Mausklick formatiert werden kann.

§         „Adresse“ und  „Absender“, da sich die Ausrichtung der Texte im Bezug zum „Standard“ Format unterscheiden.

Hier könnt ihr euch eine Dokumentenvorlage zum Thema „Fehlerfreies Deckblatt“ anschauen..

Zunächst einmal sollte man ein neues Dokument öffnen und wie vorher schon einige male erwähnt eine Formatierung vor nehmen. Wie das genau geschieht, kann man in den oberen Beiträgen nachlesen. Hier soll nur einmal erwähnt werden, welche Formate wichtig sind.

Seite einrichten

• links 4 cm (für den Heftrand)
• rechts 3 cm
• oben 2,5 cm
• unten 2,5 cm
• „Erste Seite anders“

Formatvorlage einrichten

Systemeigene Formate

„Standard“ – Format

• Zeilenabstand: 1,5 Zeilen
• Schriftart: Times New Roman, Bookman Old Style, Garamond
• Schriftgröße: 12
• Ausrichtung: Blocksatz

„Überschrift“

Ein ganz wichtiger Punkt bei der Einrichtung der Formatvorlage ist die Erstellung der Formate für die unterschiedlichen Überschriften. Sie sind nämlich ein wichtiger Teil der Nummerierung und helfen uns später bei der Erstellung eines Inhaltsverzeichnisses. Dabei sollte man folgendes beachten:

• Format „Überschrift 1“ erhält die Textdekoration für die Gliederungsebene 1
• Format „Überschrift 2“ erhält die Textdekoration für die Gliederungsebene 2
• Format „Überschrift 3“ erhält die Textdekoration für die Gliederungsebene 3
• Weiter als bis zur Gliederungsebene 3 sollte man so wie so nicht gehen.

Benutzerdefinierte Formate

„Titel 1“ und „Titel 2“

 Diese bräuchte man im Deckblatt. Sie sollen die Formatierung für das Thema der Hausarbeit enthalten.

„Adresse“ und  „Absender“

Auch wieder ein wichtiger Teil vom Deckblatt. Da sich die Ausrichtung von Absender und Adresse im Bezug zum „Standard“ Format unterscheidet.

An dieser Stelle würde es sich empfehlen die Arbeit an der Formatvorlage erst mal abzuschließen und sich um die Gliederungsebenen kümmern.

Gliederung

Wie man Gliederungsebenen einrichtet findest du im Beitrag „7. Todsünde“.

Nochmals Formatvorlage mit „Absatz“

Nachdem man die Gliederungsebenen eingerichtet hat, können nun die benötigten Absätze eingerichtet werden. Diese können je nach Anzahl der Gliederungsebene variieren. Bei den Absätzen werden nur die Einzüge verändert. Dabei sollte man sich an die Einzüge der jeweiligen Gliederungsebenen halten. Beispiel:

• Absatz 1 (Einzug: 0,6)
• Absatz 2 (Einzug: 1,6)
• Absatz 3 (Einzug: 2,4)…usw.

Kopf- und Fußzeile

Kurz vor dem Ende der Formatierung des Dokumentes ist es noch wichtig eine geeignete Kopf- und Fußzeile einzurichten.  Für nähere Informationen siehe den Beitrag zur „8. Todsünde“. Dabei muss beachtet werden, dass die Seitenzahl ab Seite 2 beginnt (was automatisch passieren sollte, wenn man die Seite richtig eingerichtet hat).

Inhaltsverzeichnis

Alle im Text verwendeten Kapitelüberschriften müssen in einem hierarchischen System durchnummeriert und im Inhaltsverzeichnis mit der gleichen Nummer und der Seitenangabe, auf der die Überschrift steht, aufgeführt werden. Hierfür empfiehlt es sich zunächst einmal die Hausarbeit zu schreiben bzw. Platzhaltertexte einzufügen, den Gliederungsebenen die Entsprechenden Formate zu zuteilen und danach das Inhaltsverzeichnis einzufügen. Die genaue Anleitung zur Erstellung eines Inhaltsverzeichnisses, kann im Beitrag „9. Todsünde“ nachgelesen werden.

Wenn man dann fertig ist mit den einzelnen Schritten, kommt der wichtigste Teil einer Dokumentenvorlage. Und zwar das Speichern. Hierfür müsst ihr auf „Datei – Speichern unter“ (siehe Abbildung 12) und den „Dateityp“ namens „*.dot“ einrichten (siehe Abbildung 13). Normalerweise springt Word automatisch in sein Verzeichnis „Vorlagen“, aber dieses kann man einfach verändern, so wie den Namen der zu speichernden Datei.

Wie solch eine Dokumentenvorlage aussehen kann, seht ihr hier...

Diese Beschreibung ging jetzt zwar ein bisschen weiter als erwartet, doch hilfreiche Tipps zur Erstellung einer Dokumentenvorlage kann man doch immer gebrauchen. 

Huhu! Da sind wir wieder!

Diesmal haben wir uns für euch mit HTML und CSS beschäftigt und wertvolle Tipps und Tricks auf dieser Seite bereitgestellt. Viel Spaß beim Durchschauen!

Euer 4fine-Team!

Die einzeln bearbeiteten HTML-Profile:

Profil 1, bearbeitet von Maike

Profil 2, bearbeitet von Jule

Profil 3, bearbeitet von Kathrin

Profil 4, bearbeitet von Steffi

Unsere eigenen Profile:

Profil von Maike

Profil von Jule

Profil von Kathrin

Profil von Steffi

Unser Gruppenprofil:

Profil von 4fine

HTML?! Was ist das eigentlich?

Die exakte Bezeichnung für HTML lautet "Hypertext Markup Language", was ungefähr "Beschreibungssprache für Texte mit Verknüpfungen" bedeutet. Sie basiert auf SGML (Standard Generalized Markup Language), welche von IBM entwickelt wurde.

HTML ist keine Programmiersprache, sondern eine Dokumentenbeschreibungssprache. Jedes beliebige Textverarbeitungsprogramm kann HTML-Seiten ansehen und erstellen. HTML hat den Vorteil, das es ohne Bedeutung ist, welches Betriebssystem oder welcher Computer verwendet wird. HTML ist eine Standardsprache im WWW.

komplette Quelle zum Nachlesen 

• http://de.selfhtml.org/  >> Hier findet man wirklich alles über Webseitenerstellung, gut an Beispielen erklärt und selbst für richtige Freaks genug neue Informationen. Tipp: Einfach die Suchfunktion nutzen, um schneller an die richtigen Seiten zu gelangen
  
  
• http://www.html-seminar.de/index.htm  >> Übersichtliche Erläuterungen für HTML-Einsteiger und auch Fortgeschrittene  
  
  

• http://www.uni-koeln.de/rrzk/www/tips/eingabe.html >> Auf dieser Seite kann man sich einen groben Überblick darüber verschaffen, was man unter WWW-Seitenerstellung versteht und wie sie im allgemeinen funktioniert.
  
  

• http://www.html-world.de/  >> Diese Seite scheint auf den ersten Blick unübersichtlich. Aber nach einer kleinen Erkundungstour und erste Erfahren mit HTML sehr bereichernd. Aktuelle News rund um HTML und nützliche Foren, zum Fragen stellen, werden angeboten.

Du sollst darauf achten, „well-formed HTML“ Seiten zu erstellen I: gute HTML-Struktur

Bei der Erstellung eines HTML – Dokumentes müssen folgende Punkte beachtet werden:

•  Verwendung des richtigen Grundgerüsts einer HTML-Seite
•  richtige Schachtelung (Hierarchische Struktur) der HTML-Elemente

Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen:

• Header (Kopfdaten)
• Body (Körper - anzuzeigender Inhalt)

Schema:

<html>

           <head>

                      <titel>Beschreibung der Seite</titel>

           </head>

           <body>

           </body>

</html>

Erläuterung:

Der gesamte Inhalt einer HTML-Datei wird in die Tags <html> bzw. </html> eingeschlossen. Hinter dem einleitenden HTML-Tag folgt das einleitende Tag für den Kopf <head>. Zwischen diesem Tag und seinem Gegenstück </head> werden die Kopfdaten einer HTML-Datei notiert.

• Zum einem <title> bzw. </title>. Dieser Tag zeigt den Titel der Datei bei der Anzeige im Web-Browser in der Titelzeile des Anzeigefensters angezeigt. 

• Zum anderem Meta – Angaben. Diese können Angaben zum Autor und zum Inhalt der Datei enthalten. Für jede Meta-Angabe notiert man ein Meta-Tag im HTML-Dateikopf. Hier ein paar der wichtigsten (siehe Abbildung 1):

  • Mit <meta name="description" content="Beschreibungstext"> bestimmt man einen Beschreibungstext (meta = "über", name = Name, description = Beschreibung, content = Inhalt).

  • Mit <meta name="author" content="Autorenname"> teilt man den Namen des Autors (d.h.: des inhaltlich Verantwortlichen) für die HTML-Datei mit (author = Autor).

  • Mit <meta name="keywords" content="[Wortliste]"> bestimmt man Stichwörter für ein Suchprogramm. Trenne die einzelnen Schlüsselwörter durch Kommata.

Unterhalb davon folgt der Textkörper, begrenzt durch <body> bzw. </body>. Dazwischen wird dann der eigentliche Inhalt der Datei notiert, also das, was im Anzeigefenster des WWW-Browsers angezeigt werden soll.

Du sollst darauf achten, „well-formed HTML“ Seiten zu erstellen II: „HTML-Tags“

Also erstmal zur Erklärung: HTML-Dateien bestehen aus Text. Der Inhalt von HTML-Dateien steht in HTML-Elementen, die durch sogenannten Tags markiert werden. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag in Spitzen Klammern notiert.

Hier die Quelle zum nachlesen für mehr Informationen.

Beim Arbeiten mit Tags müsst ihr einfach ein paar Regeln beachten:

• Ein Start-Tag wird immer mit dem dazugehörigen End-Tag geschlossen.
  Bsp.: <h1> das ist eine Überschrift </h1>,  <h1> bildet dabei das Starttag, durch </ wird das Endtag eingeleitet.
   
• Aus kompatibilitätsgründen zu XHTML wird empfohlen auch Elemente ohne Inhalt zu schließen.
  Also habt ihr irgendwo auf eurer Seite ein <h1> und nichts weiter dahinter stehen. Schließt es trotzdem, damit andere Browser keine Probleme bei der Darstellung haben.
  
  
• Aus Kompatibilitätsgründen zu XHTML wird empfohlen Element- und Atrributnamen immer klein zu schreiben.
  Abbildung 2 und 3 zeigen ein Beispiel.
   
• Setze Attributwerte immer in Anführungszeichen.
  Möchstest du ein Foto einbinden, dann immer mit z.B.  „Fotoname.gif“ kennzeichnen. Genauso ist es beim alt-Attribut zum Beschreiben der Bilder (siehe Gebot 8), es sollte z. B. so aussehen: alt=“Das Foto zeigt...“
   
• Verwende immer Entitäten. Das bedeutet: Vokale wie ä, ö und ü, sowie ß können von manchen Browsern nicht richtig angezeigt werden. Einige Programme verwenden beim Erstellen von HTML-dokumente automatisch Entitäten. Verlasst euch aber nicht darauf!
  Aus „ä“ wird „&auml;“
  Aus „ü“ wird „&uuml;“
  Aus „ö“ wird „&ouml;“
  Und „ß“ wird zu „&szlig;“ >> in Abbildung 4 seht ihr nochmal wie das im Quelltext aussieht, und Abbildung 5 zeigt noch ein paar mehr Sonderzeichen

HTML-Sonderzeichen

In HTML werden alle Sonderzeichen mit einem Und-Zeichen (&) begonnen und enden mit einem Semikolon (;). Dabei gibt es zwei Sorten der Definition von Sonderzeichen: als Unicode-Zeichen und als Name-Zeichen.

Hier ein paar Beispiele mehr:

Du sollst darauf achten „well formed HTML“ Seiten zu erstellen III:

korrekte Hyperlinks:

Du sollst die strikte Trennung von Inhalt und Layout beachten!

Man unterscheidet hierbei unter HTML und CSS. CSS beschreibt, wie die Seite aussehen soll (z.B. Schriftgröße, Farbe, …) und HTML legt die Struktur fest. Man sollte von Anfang an diese Trennung einhalten, um später aufwendige Korrekturen zu vermeiden. Auch das Abspeichern der CSS in eine separate Datei ist möglich. Man muss diese dann nur im HTML-Dokument verlinken (siehe Abbildung 8).

Hier einige Layout-Aspekte, die man schon zu Beginn der Programmierung in CSS festhalten könnte:

• Lage der eingebundenen Elemente (Linksbündig? Rechtsbündig? Abstand nach oben, unten, rechts, links? …)
• Gestalt der Links (Unterstrichen? Fett? Blau?,…)
• Farben (Hintergrund, Schrift, …)
• Etc.

Du sollst nicht mit Attributen oder Elementen formatieren, die den Status „deprecated“ haben.

• Diese Tags sollten nicht mehr verwendet werden, sie erhalten den Status deprecadet (werden „mißbilligt“), denn sie verstoßen gegen die strikte Trennung von Layout und Inhalt.
  
  
• Verwende deshalb nur Logische Auszeichnung (z.B. „em-Tag“) anstatt Physikalische oder visuelle Auszeichnung („z.B. „i-Tag“)

Du sollst eine HTML-Seite nicht mit Layouttabellen gestalten.

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.

Text und Grafiken, die man in einer Tabellen darstellen möchte, kann man durch Block – Elemente in einen gemeinsamen Bereich einschließen und anordnen.

Mit <div> leitest du ein allgemeines Block-Element ein, in das du mehrere andere Block-Elemente einschließen kannst (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden </div> steht, wird als Teil des Bereichs interpretiert (Abbildung 9).

Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Mittels CSS können diesem Element dann Charakteristiken zugewiesen werden, die folgende Dinge beeinflussen (Abbildung 10):

• Schriftformatierung
• Ausrichtung und Absatzkontrolle
• Außenrand und Abstand
• Innenabstand
• Rahmen
• Hintergrundfarben und –bilder
• Positionierung und Anzeige von Elementen

Du sollst Nutzergruppen nicht durch Aussagen wie „optimiert für Internet Explorer 4.1, Seamonkey 5.0, etc.“ oder die Verwendung von horizontalen Scrolleisten ausschließen

• Nicht alle HTML-Eigenschaften und CSS-Regeln funktionieren in jedem Browser (meist zusätzliche Layouteffekte)
• Deshalb: auf gängige CSS-Regeln beschränken, die auf allen Browsern funktionieren (für weitere Informationen: siehe „Externe Links“)
  
  
• Horizontale Scrollleisten sind nicht benutzerfreundlich, da der Inhalt häufig teilweise oder gar nicht wahrgenommen wird
• Deshalb: eine feste horizontale Seitenbeschränkung und die automatische Verwendung von vertikalen Scrollleisten in CSS verwenden! ( Um einen Richtwert zu geben: damit keine horizontale Scrolleiste entsteht, immer unter 800 Pixeln bleiben, denn die kleinste Auflösung ist 800 x 600 Pixel)

Du sollst Metainformationen sinnvoll einsetzen.

Das bedeutet, deine HTML-Seite kann Zusatzinformationen ganz gut gebrauchen, solang diese auch wirklich Sinn haben. 

• Vermeide Wiederholungen und überflüssige Infos, z.B. stellt ein gezielter Verusch des Rankings (um in einer Suchmaschine wie google auf die ersten Plätze zu gelangen) eine Missbrauch von Metainformationen dar – also lieber weglassen
  
  
• Abbildung 14 zeigt Euch ein unmögliches Beispiel - Sieht doch nich schön aus... ;-)

So mach ich es!

1. Bevor man anfängt, sollte man sich zu erst einen HTML – Editor zu legen, der Element- und Attributnamen (und deren Werte) farblich darstellt, damit man den sichtbaren Text eine HTML – Dokumentes leichter erkennt. Dies ist übersichtlicher und ermöglicht ein schnelleres Arbeiten. Falls solch ein Editor nicht vorhanden ist, schaut doch einfach mal auf dieser Seite vorbei: HTML Editor Phase 5 Version 5.42
2. Wenn man sich so den Quelltext eines HTML – Dokumentes anschaut, kann man schnell den Überblick verlieren über Dinge die man verändern möchte oder bereits hat. Deswegen empfiehlt es sich immer von oben nach unten zu arbeiten.
3. Also fangen wir mit den Meta – Angaben an, in dem wir Autor, Beschreibung der Seite und die Informationen für die Suchmaschinen ändern.
4. Danach kommt der Titel.
5. In vielen Fällen ist es so, dass CSS verwendet wird. Die Art der Verwendung ist aber von Dokument zu Dokument verschieden. Einige schreiben die CSS in ein HTML – Dokument und andere verlinken zu einer externen Datei. Stehen die CSS – Angaben in dem HTML – Dokument, was man bearbeiten möchte, dann kann man beliebig ändern (Bsp. Farbe, Textausrichtung...usw.). Befinden sich die CSS – Angaben jedoch in einer externen Datei, sollte man vorsichtig mit dieser umgehen, denn in den meisten Fällen greifen noch andere HTML – Dokumente auf die CSS – Datei zu. Eine leichtsinnige Änderung solch einer Datei könnte dann zu Problemen bei HTML – Dokumenten führen, die man eigentlich nicht verändern wollte. Warum man es dann macht? Weil solch eine Nutzung den Zeitaufwand für die Erstellung eines HTML – Dokumentes erheblich minimiert, die Größe des Quelltextes klein hält und Projekt- bzw. Gruppenarbeit erleichtert. Wenn also die CSS – Angaben in einer externen Datei stehen, sollte man zunächst einmal eine Kopie dieser Datei erstellen und diese umbenennen. Danach könnt ihr ohne Probleme die CSS –Angaben verändern. HINWEIS: Man sollte nicht vergessen den Link zur externen Datei im HTML – Dokument an die neue Datei anzupassen (siehe 4. Gebot)!
6. Nachdem man mit den CSS – Angaben abgeschlossen hat, widmet man sich nun dem sichtbaren Teil des Dokumentes. Im Bereich des <body> </body> können jetzt Texte bearbeitet und Bilder ersetzt werden. Da die Texte leicht zu verändern sind, hier nur eine Erklärung zum Ersetzen von Bildern:
7. Zunächst einmal sollte das Bild, was man verwenden will, in dem Ordner „image“ abgelegt werden. Es empfiehlt sich immer die Dateiendung „*.gif“ zu benutzen und den Dateinamen so einfach wie möglich zu halten (keine Sonderzeichen oder Umlaute).
8. Jetzt nur noch den Dateinamen (mit Dateiendung) an die Position setzen, wo das alte Bild steht (siehe 3. Gebot) und schon ist diese Aufgabe auch schon erledigt. HINWEIS: Die Größe des Bildes sollte nicht im HTML – Dokument beeinflusst werden. Am Besten ist es die Größe über ein Fotobearbeitungsprogramm zu regeln.