• Protopage-Zentrale für Elektronische Dokumente

• Zum Protopage-Tutorial

A-Team siegt über MS Word.

Wir lieben es, wenn ein Plan funktioniert :)

Herzlich Willkommen auf der Protopage-Seite des A-Teams!!

Diese Seite widmen wir dem Umgang mit MS Word.

Da wir immer wieder mit diesem Programm konfrontiert werden, u.a. wenn man eine Hausarbeit schreiben muss, soll Euch unsere Seite helfen möglichst schnell und fehlerfrei Format- und Dokumentvorlagen zu erstellen.

Hierzu könnt ihr auch unsere eigenen erstellten Deckblätter, korrigierten Dokumente sowie unsere Dokumentvorlage zur Hilfe nehmen. Wie eine fertige Hausarbeit aussehen könnte, könnt ihr euch auch auf unserer Seite anschauen.

Unter den "10 Todsünden" findet ihr typische Fehler, die bei der Arbeit mit Word auftreten können sowie Tipps und Tricks, die den Umgang mit MS Word erleichtern.

Viel Spaß beim Durchstöbern,

Euer A-Team

Hier stehen die korrigierten und kommentierten Teile der  Hausarbeit zum Download bereit:

Teil A von Michael

Teil B von Bene

Teil C von Christina

Teil D von Andreas

Deckblätter von Christina, Benedikt, Michael und Andreas

Gemeinsam erstellte Dokumentvorlage zur Erstellung einer Hausarbeit

Formatierte und strukturierte Hausarbeit

Endgültige Version Worddatei (enthält Markups)

Endgültige Version PDF-Datei (ohne Markups)

Probiert es mal aus, einfach Word öffnen, "=rand(200,99)" eingeben, Überraschung :)

Des Rätels Lösung: dieser Satz enthält alle Buchstaben aus dem Alphabet

Word 2003 Help - die offizielle MS Office Seite

erstellen eines Dokumentes - z.B. Diplomarbeit, sehr übersichtlich und sauber dargestellte Anleitung zum Arbeiten mit MS Word

Formatierungshilfen - Tipps zum Formatieren in Word, mit Screenshot's illustriert [falls euch unsere nicht helfen :-)]

MS Word - hier findet ihr sowohl kurz und knapp erläuterte Antworten zur Formatierung als auch  zu Features wie Serienbrief etc.

Vorlagen für Word - egal welche Art von Dokument ihr erstellen wollt, auf der Seite von MS werden viele Vorlagen aus verschiedenen Kategorien kostenlos zur Verfügung gestellt

Nützliche Tastenkombinationen (pdf) für Word, Shortcuts sparen ne Menge Zeit und Nerven

"Du sollst Zeichen nicht mit einem Druck auf "Tab" oder die "Leertaste" einrücken"

So wirds richtig gemacht:

Für Absätze oder Sondereinzüge einfach die jeweilige Option in MS Word nutzen!

• Word kennt dafür die Option "Einzug" zum Befehl "Absatz" (Format > Absatz)
• Cursor vor einrückendes Zeichen setzen und dann in Menüleiste "Format" und dort "Absatz" klicken (siehe Abb.)

"Du sollst einzelne Zeilen nicht durch einen Druck auf "Enter / Return" beenden!"

So wirds richtig gemacht:

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

• einfach weiterschreiben, Word erledigt den Zeilenumbruch automatisch
• wenn Zeilenumbruch doch nötig, dann einfach "Shift" + "Enter" drücken

"Du sollst (Seiten)-Umbrüche nicht durch mehrfaches Drücken auf "Enter / Return" erzeugen"!

So wirds richtig gemacht:

• Manueller Seitenumbruch durch Drücken von "Strg + Enter"
• oder durch "Einfügen" > "Manueller Umbruch" erzeugen (siehe Abb.1).
• Auswahl verschiedener Umbruchsvarianten (siehe Abb.2)

"Du sollst Trennstriche nicht mit einem Druck auf die Bindestrichtaste einfügen"

So wirds richtig gemacht:

• Bindestriche durch Drücken von "Strg" + "Bindestrichtaste" erzeugen
• bei Änderung des Zeilenfalls entfallen diese dann nämlich

"Du sollst nicht wie wild im Text herumformatieren"

Direkte Formatierung!

So wirds richtig gemacht:

• Textformatierung sollte überwiegend mit Formatvorlagen erfolgen
• Bereits bestehende Formatvorlagen (z.B "Standard" oder "Überschrift1") können nach Belieben individuell verändert werden (über "Format" > "Formatvorlagen und Formatierungen") (Abb.1)
• Ihr könnt die Schrift, Absatz, Nummerierung und vieles mehr verändern
• Makiert den Text den ihr verändert wollt
• Eigenschaften einzelner Formatvorlagen können über das Kontextmenü "Ändern" angepasst werden

"Du sollst Listen nicht manuell mit z.B. "Sonderzeichen" oder der Bindestrichtaste erstellen"

So wirds richtig gemacht:

• Unter "Fornat" > "Nummerierung und Aufzählungszeichen"  (Abb.1) findet man viele Möglichkeiten Listen und Gliederungen zu erstellen
• Es können Aufzählungslisten, Nummerierungen und Gliederungslisten erstellt werden (Abb.2).
• Unter "Listenformatvorlagen" kann man eigene Formatvorlagen erstellen

"Du sollst dein Dokument nicht rein visuell mit römischen oder arabischen Ziffern gliedern"

So wirds richtig gemacht:

• Strukturiere die Gliederung deines Dokuments über mehrere Gliederungsebenen ("Ansicht" > "Gliederung") (siehe Abb.)
• Dadurch wirkt dein Dokument übersichtlich
• Am Besten wieder systemeigene Formatvorlagen "Überschrift1 ... n" verwenden

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

So wirds richtig gemacht:

• "Ansicht" > "Kopf und Fußzeile" (Abb.1)wählen, um Elemente wie Name, Datum, Seitennummerierungen zu positionieren
• auch Bilder und Graphiken lassen sich hier einfach einfügen ("Ansicht - Symbolleisten - Zeichnen") (Abb.2)
• Außerdem sind Feldfunktionen in Kopf- und Fußzeile möglich ("Einfügen" > "Feld")

"Du sollst Inhaltsverzeichnisse weder manuell erstellen noch in ein separates Dokument ausgliedern"

So wirds richtig gemacht:

• Mit Word lassen sich verschiedene Refernezen erstellen, auch Inhaltsverzeichnisse
• Über Menüleiste "Einfügen" > "Referenz" und dann "Index und Inhaltsverzeichnisse" (Abb.1-2)
• Es können Formatvorlagen genutzt und auch über den "Ändern..-Button" angepasst werden

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

So wirds richtig gemacht:

• Überarbeitungsmodus über "Ansicht > Symbolleisten > Überarbeiten" (Abb.1) anzeigen lassen, so werden Kommentare und Änderungen sichtbar
• Kommentare können an makierten Textstellen über "Einfügen > Kommentar" (Abb.2)eingefügt werden
• Über "Extras > Änderungen nachverfolgen" erhält man genaue Auskunft über Text- bzw. Formatänderungen (Bei Teamarbeiten immer aktivieren!).

Um euch beim Erstellen einer Dokumentvorlage für eine Hausarbeit zu helfen, haben wir euch hier die wichtigsten Schritte dafür aufgestellt.

Dokumentvorlagen enthalten Voreinstellungen für neue Dokumente. Sie werden durch die Dateiendung dot. (für document template) kenntlich gemacht.

Für eine Hausarbeit gelten bei der Festlegung der Ränder folgende Regelungen:

• links 4cm
• rechts 3cm
• oben 2,5cm
• unten 2,5cm

Diese Einstellungsmöglichkeit findet ihr unter "Datei"  und dort bei "Seite einrichten" unter "Seitenränder" (siehe Abb.1-2)

Unter "Format" und "Formatvorlagen und Formatierung"  (Abb.1) lassen sich allgemeine Eigenschaften für Überrschriften und den Text festlegen.

• Um eine neue Formatvorlage zu erstellen klickt man "neue Formatvorlage" an (Abb.2).
• Zunächst sollte man der erstellten Formatvorlage einen neuen Namen, um diese später leichter wiederzufinden.

Hier lassen sich u.a. folgende Eigenschaften einstellen:

1. Zeilenabstand: 1,5
2. Schriftart: Times New Roman
3. Schriftgröße: 12
4. Blocksatz

(Einstellungen, die für Hausarbeiten notwendig sind)

• Automatische Silbentrennung (Abb.1)
• Automatische Seitennummerierung (Abb.2)

Zu beachten: Die Seitennummerierung sollte noch nicht auf dem Deckblatt und der Gliederung losgehen, dewegen beim Menü "Seitenzahl einfügen" bei Beginn auf der 1. Seite kein Häckchen machen (Abb.3).

• Überschriftenformatvorlage (Abb.4)

Ein wichtiger Punkt ist die Erstellung der Formate für die Überschriften. Sie sind ein wichtiger Teil der Nummerierung und helfen uns später bei der Erstellung eines Inhaltsverzeichnisses.

Zu beachten ist hier deshalb:

• Format "Überschrift1" erhält die Textdekoration für die Gliederungsebene 1
• Format "Überschrift2" erhält die Textdekoration für die Gliederungsebene 2
• Format "Überschrift3" erhält die Textdekoration für die Gliederungsebene 3

• Automatisches Inhaltsverzeichnis

Hat man die Hausarbeit soweit fertig geschrieben sowie die Seitenzahlen eingefügt, kann man nun mit Word ein automatisches Inhaltsverzeichnis erstellen.

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.

Das Inhaltsverzeichnis erfasst dann automatisch alle Gliederungspunkte, die man erstellt und einheitlich formatiert hat. Hierzu muss man unter "Einfügen", "Referenz" , "Index und Verzeichnisse" auswählen (Abb. 5 - 6)

Nachdem die vier Teile der Hausarbeit korrigiert und die Dokumentvorlage erstellt ist, bietet es sich nun an, daraus eine wohl formatierte und strukturierte Hausarbeit entstehen zu lassen.

Beim Zusammenfügen muss man folgendes beachten:

Wenn man Texte aus verschiedenen Quellen zusammenfügen will, verwendet man dazu normalerweise die Zwischenablage von Windows: Man markiert den Text, kopiert ihn mit Strg+C in die Zwischenablage und fügt ihn dann mit Strg+V wieder an gewünschter Stelle ein.

Es kommt jedoch zu Problemen, wenn der Quelltext eine eigene Formatierung aufweist, dann kann es sein, dass die Formatierung im Zieltext durcheinander gebracht wird.

Um das zu vermeiden, verwenden wir unter "Bearbeiten - Inhalte einfügen".

Es erscheint ein Dialogfeld, in dem wir die Option "unformatierter Text" auswählen.

Auf diese Weise bleibt unsere gewünschte Formatierung erhalten.

Der eingefügte Text sollte sich dann automatisch unseren Formatvorlagen anpassen.

Seitenzahlen können entweder über "Einfügen - > Seitenzahlen..."

oder über "Ansicht -> Kopf- und Fußzeile eingefügt und formatiert werden.

Wenn man ein klar strukturiertes Dokument erstellen will, kommt man nicht ohne Abschnitte aus.

Diese findet man unter "Einfügen -> Manueller Umbruch

Wir haben uns entschieden die Bearbeitung der einzelnen Teile durch einen Eintrag des Namens in der Kopfzeile deutlich zu machen. Um das hinzubekommen, muss man an den richtigen Stellen Abschnitte setzen. Individuelle Kopfzeilen lassen sich dann für diese Abschnitte umsetzen.

Auf diesem Teil unserer Seite findet ihr alles rund um das Thema HTML & CSS

Ihr erfahrt auf dieser Seite was HTML und CSS ist, wie man ein HTML-Dokument, einschließlich mit CSS, erstellt und auf was ihr bei der Erstellung von HTML-Dokumenten beachten müsst, um typische Fehler zu vermeiden.

Wir geben hier nur einen kleinen Überblick über einige wichtige Punkte, die das Thema HTML &CSS umfassen. Wenn ihr mehr über HTML und CSS erfahren wollt, dann nutzt unsere Links.

Viel Spaß,

euer A-TEAM

Ein abschreckendes Beispiel, aber sehr unterhaltsam

Die goldenen Regeln für schlechtes HTML

das wohl bekannteste HTML Tutorial, hilft immer

SelfHTML

sehr brauchbares HTML Tutorial

HTML-Seminar

Alles zu HTML, und noch viel mehr findet ihr auf

www.html-world.de

Dr Web hiltft bei HTML und CSS Problemen 

TopStyle Lite 3.0 CSS-Editor Download

HTML Editor Phase 5 Downloadbereich

korrigierte Web-Profile (zip):

Profil 1 von Michael
Profil 2 von Andreas
Profil 3 von Christina
Profil 4 von Benedikt

CSS steht für Cascading Style Sheets und ist eine Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Somit ist eine Trennung von Inhalt und Layout möglich.

Mit Hilfe von CSS ist es möglich  -mit relativ geringem Aufwand -das Aussehen von Websites zu verwalten. Es können nicht nur Farben, Schriftgrößen und Schriftarten festgelegt werden, sondern sogar der Aufbau der Website (z.B. Positionierung von Elementen).

Hier ist eine Auflistung wichtiger HTML-Tags.

Weitere Informationen über Tags und HTML findet ihr bei unseren Links!

Eine grundlegende Voraussetzung für eine gute HTML-Seite ist die korrekte Struktur.

Als erstes hat eine HTML-Seite ein Grundgerüst.

Jedes HTML-File soll zumindest mit den folgenden Befehlen beginnen:

<html>

<head>

<title>Beschreibung der Seite</title>

</head>

<body>

<h1>Haupt-&Uuml;berschrift</h1>

und mit folgenden Befehlen enden:

</body>

</html>

Es gibt zwei wesentliche Bereiche im Grundgerüst (Abbildung Grundgerüst HTML):

• Head-Bereich: Der "Kopf" der Datei ist meist der Teil im Hintergrund, den man kaum zu sehen bekommt.Hier werden die Dinge festgelegt, welche nicht so sehr das Aussehen und/oder die Struktur des Dokuments behandeln.

Zwischen <head> und </head> stehen die Angaben, die für die Verwaltung des HTML-Files notwenidig sind (Titel, Autor und dergleichen). Abbildung 1

• Body-Bereich: Im body wird alles andere notiert, was nicht schon im head steht. Im einleitenden body-Tag werden außerdem die Angaben zur Hintergrundfarbe des Dokumnets, die Farben der Links sowie die Textfarben angegeben.

Zwischen <body> und </body> steht die Information, die am Bildschirm des Benutzers dargestellt werden soll, also die Textelemente, Hypertext-Links, Bilder und Töne.

Das gesamte HTML-File wird zwischen <html> und </html> eingeschlossen.

Zwischen <title> und </title> steht die Überschrift des HTML-Files, die in Bookmarks und Suchhilfen verwendet wird.

Zwischen <h1> und </h1> steht die Überschrift, die am Bildschirm zu Beginn des Textes erscheint.

Hier haben wir euch ein einiige wichtige Befehle aufgelistet:

Überschrift

Anhand von Überschriften wird der Text gegliedert und strukturiert.

Für Überschriften wird der TAG <hX> verwendet

header=Überschrift

X steht für die Wichtigkeit der Überschrift und kann Werte von 1-6 annehmen

• 1 ist die größte und wichtigste Überschrift
• ...
• 6 die kleinste Überschrift, aber immer noch größer/wichtiger als der normale Text

<h1> Überschriften-Ebenen 1 </h1>

<h2> Überschriften-Ebenen 2 </h2>

<h3> Überschriften-Ebenen 3 </h3>

etc.

Schriftgröße

Um innerhalb eines Textes Wörter bzw. Passagen groß oder klein zu schreiben wird der TAG <big> für größer und <small> für kleiner verwendet (End-TAG nicht vergessen!!!)

Umbrüche

Um einen Umbruch zu erzielen wird der TAG <br/> benutzt (break=Umbruch)

Absätze

Ein Absatz zwischen in einem Text erfolgt durch den TAG <p> (paragraph=Absatz).

Im Gegensatz zu einem Umbruch durch den Befehl </br> erfolgt hier eine Trennung mit Leerzeile.

Aber auch hier nicht den End-TAG </p> vergessen!!!!!

Listen

Um eine Liste zu erstellen benötigt man zwei verschiedene TAGs:

• <ul> (dem Browser wird mitgeteilt, um was für eine Liste es sich handelt und wo sie anfängt und aufhört)
• <li> (einzelne Listenpunkte werden festgelegt)

....

<ul>

<li>erster Listenpunkt</li>

<li>zweiter Listenpunkt</li>

<li>x-ter Listenpunkt</li>

</ul>

....

Um eine durchnummerierte Liste zu erstellen wird <ul> einfach durch <ol> (orderd list=sortierte Liste) ersetzt!!

Links

Textlink/ interner Link

Ein Link wird immer duch den TAG <a href="DATEINAME.HTM">BESCHREIBUNG</a>

Die groß geschriebnen Teile müssen hierbei durch den jeweiligen Dateinamen und die entsprechende Beschreibung ersetzt werden.

Wichtig: Bei der Bestimmung des Dateinamens müssen einige Punkte beachtet werden:

• Der Dateiname darf keine Leerzeichen enthalten
• Er darf keine Sonderzeichen (z.B.äßü etc.) enthalten
• Die Dateinamen sollten einheitliche Endungen haben, also entweder .htm oder .html (nicht einmal die eine Endung wählen und dann wieder die andere!!)
• Der Dateiname muss klein geschrieben werden

Also so nicht: "Über uns.htm"    Besser: "ueber-uns.htm"

Im Browserfenster wird der Link dann unterstrichen angezeigt: Über uns

Externer Link

Um auf eine andere Seite im Internet zu verweisen wird der TAG

<a href="URL">BESCHREIBUNG</a>

An die Stelle des Dateinamens tritt also die URL der Seite auf die man verlinken will.

Beispiel: <a href="http://www.tu-ilmenau.de">Startseite</a>

TIPP:

Um die Seite in einem neuen Fenster zu öffnen, damit die eigene Seite noch erhalten bleibt, fügt man den Zusatz "target" dem Befehl zu:

<a href="http://www.tu-ilmenau.de/start.htm"target="_blank">Startseite</a>

Farben

Farben peppen eine Internetseite auf und können wichtige Passagen hervorheben. Farben könen entweder für die Schrift eingesetzt werden oder zur Hintergrundgestaltung dienen.

Aber es gilt stets der Grundsatz: Weniger ist mehr!     (Immer im Hinterkopf behalten ;) )

Schriftfarbe

Um eine Schrift farbig zu machen, benutzt man den HTML-TAG

<font color="Farbnummer"> Dein Text </font>

z.B. rote Textfarbe: <font color="#FF0000"> Dein Text </font>

Hintergrundfarbe

Um den Hintergrund farbig zu machen, fügt man dem Body-TAG noch den Befehl bgcolor (backrgound-color) hinzu:

....

<body ... bgcolor="Farbnummer" ... >

...

</body>

...

Farbpallette

Die Farben werden meistens in Hexadezimalen angegeben. Hintergrund hierzu ist das RGB-Farbmodell, also die drei Grundfarben rot, grün und blau und deren Mischung.

In der Abbildung "Farbtabelle" sehen die die Standard-Pallette, die 216 Farben enthält.

2. Möglichkeit Farben anzugeben:

Die Farben können auch über ihren englischen Namen angegeben werden:

Hierzu beim HTML-Editor den Reiter "Colors" anklicken und dann im rechten Pulldownmenü den Punkt "Namen" anklicken.

 

Die Farben werden nun mit ihrem englischen Namen angezeigt:

z.B. color ="red"

       color="yellow"

       etc.

Die 10 Gebote in der HTML-Programmierung

Was du bei der Arbeit mit HTML und CSS beachten musst und wie du typische Fehler vermeiden kannst, erfährst du in den folgenden Geboten:

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

• Achte auf das richtige Grundgerüst einer HTML-Seite und die richtige Schachtelung der HTML-Elemente (siehe bereits oben erwähnten Punkt "HTML Grundgerüst)!!!
• Setze die Elemente an die richtige Stelle (Head- oder Body-Bereich)

Du sollst darauf achten. "well-formed HTML" Seiten zu erstellen II: "HTML-Tags"

• Schließe einen Start-Tag immer mit dem dazugehörigen End-Tag!! (Siehe dazu auch bereits den oben erwähnten Punkt "HTML-Tags")
• Schließe auch Elemente ohne Inahlt wie <br> oder <img> mit dem passenden End-Tag </br> und </img>
• Schreibe Element-und Attributnamen IMMER klein!!
• Setze Attributwerte IMMER in Anführungsstriche! (z.B alt="Das Photo zeigt einen Studenten")
• 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-Dokumenten automatisch Entitäten. Darauf solltet ihr euch aber nicht verlassen!

Aus „ä“ wird „&auml;“
Aus „ü“ wird „&uuml;“
Aus „ö“ wird „&ouml;“
Und „ß“ wird zu „&szlig;“

TAGs bilden die Grundlage für die Arbeit mit HTML und CSS.

Als HTML-TAG wird ein einzelner HTML-"Befehl" bezeichnet.

• Die TAGs werden immer zwischen Kleiner- und Größerzeichen <...> geschrieben
• Zwischen den < > befindet sich die Anweisung
• Alle HTML-TAGs immer klein schreiben!

Ein TAG (mit oder ohne Inhalt), der geöffnet wird, muss auch wieder mit einem dazugehörigen End-TAG geschlossen werden:

Anfangs- und End-TAGs

Es gibt einen Anfangs- und einen End-TAG.

Der End-TAG ist fast identisch mit dem Anfangs-TAG, allerdings muss bei dem End-TAG nach dem Kleinerzeichen (<) ein Schrägstrich kommen.

z.B. </befehl>

Elemente fassen Teile eines Dokuments zu Einheiten  zusammen und geben so einem Dokument eine logische Struktur oder bestimmen die Darstellung bzw. das Verhalten dieser Einheiten.

Beginn und Ende von Elementen werden von Start- und End-Tags makiert. Tags sind mittels spitzer Klammern <> als Markup kenntlich gemacht, also als nicht zum Dokument gehörige Strukturierungszeichen hervorgehoben. Zwischen den spitzen Klammern steht der Elementname.

<Elementname> ... </Elementname>

Attribute sind Eigenschaften die für Elemente vergeben werden können.

Sie werden im Start-Tag eines Elements in der Form attribut="attributwert" angegeben.

Mit < IMG src="bild1.gif"> wird z.B.dem Element IMG durch das Attribut src (source) die Grafikdatei mitgeteilt, die ausgegeben werden soll.

Entitäten =  spezielle Sonderzeichen = Ersatzzeichen

Sonderzeichen sind Zeichen, die nicht auf der Tastatur vorhanden sind oder die eine spezielle Bedeutung haben. Zur Darstellung von Sonderzeichen werden in HTML sogenannte Entities verwendet. Eine Entity ist ein Name für ein bestimmtes Sonderzeichen.

Entities werden durch ein &-Zeichen am Anfang und durch ein Semikolon am Ende gekennzeichnet.

Beispiel: Auf einer amerikanischen Tastatur gibt es keine Tasten für die deutschen Umlaute. Daher wird etwas für den Buchstaben ä die Entity &auml; verwendet.

Das Wort "Säge" kann im HTML-Quelltext dann wie folgt geschrieben werden: S&auml;ge

Du sollst darauf achten, "well-formed HTML" Seiten zu erstellen III: korrekte Hyperlinks

• Achte bei der Velinkung auf eine korrekte Pfadangabe!
• Absolute Pfade werden von relativen Pfaden unterschieden. Hyperlinks zu externen Webseiten immer als absolute Pfade setzen! (Wenn es sich um eine Internetseite handelt, immer http://www mit angeben). 
• Eingebundene Bilder können relativ verlinkt werden (Bsp: "Ordnername/Dateiname+Dateiendung")
• Achte auf die Groß-und Kleinschreibung der verlinkten Dokumente.

Du sollst 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 etc.) und HTML legt die Struktur fest. Diese Trennung solte man von Anfang an einhalten, um später aufwendige Korrekturen zu vermeiden.

• HTML strukturiert eine Seite
• CSS beschreibt wie die Seite aussieht, dient also zur Gestaltung

Hier einige Layout-Aspekte, die schon zu Beginn der Programmierung in CSS festgelegt werden können:

 

- Farben (Schrift, Hintergrund etc.)

- Aussehen der Links (Farbig? Unterstrichen? Fett? Kursiv?)

- Lage der eingebundenen Elemente (Links-, rechtsbündig? Zentral, Abstände zu den Rändern etc.)

Du sollst nicht mit Attributen oder Elementen formatieren, die den Status "deprecated" haben

• Formatierungselemente. die gegen die strikte Trennung von Inhalt und Layout verstoßen, erhalten den Status "deprecated" (z.B. "front-Tag") und sollten nicht mehr verwendet werden!
• Verwende deshalb Logische Auszeichnungen (z.B "strong-Tag") anstatt Physikalische Auszeichnungen bzw. Visuelle Auszeichnungen (z.B. "b-Tag")

In HTML gint es logische und physische Elemente zur  Auszeichnung von Text.

Logsiche Textauszeichnungen haben Bedeutungen wie "betont" oder "emphatisch". Bei logsichen Elementen entscheidet der Browser, wie ein solcher Text hervorgehoben wird (z.B. fett, kursiv oder andersfarbig). In Verbindung mit Stylesheets kann man logische Textauszeichnungen allerdings nach Wunsch formatieren.

Du sollst eine HTML-Seite nicht mit Layouttabellen gestalten

• Erstelle tabellenfreie Layouts mit CSS, da Layouttabellen gegen die strikte Trennung von Inhalt und Layout verstößt!!!

Verzichte auf zu viele Animationen, unterschiedliche Textfarben und Schriftarten

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

Am besten legt man zu Beginn im Body fest, welche Formate verwendet werden sollen. Dann gelten diese einheitlich für die gesamte Seite.

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

• Verwende immer das "alt-Attribut" um Grafiken, Bilder, Formatierungselemente, applets etc. zu beschreiben. So kann jeder Nutzer die Inhalte erfassen.

Das "alt-Attribut" kommt vor allem dann zum Einsatz, wenn Elemente auf einer HTML- Seite nicht angezeigt werden können. Bewegt man den Curser nämlich auf die Stelle, an der das Element sitzt, erscheint ein Text, der diese Näher beschreibt.

 

Füge hierzu in den geöffneten Tag des zu beschreibenden Elements "alt="..." ein, wobei du dann "..." durch den Text ersetzt, der das Element beschreiben soll. Danch einfach mit "/" wieder schließen.

Du sollst Nutzergruppen nicht durch Aussagen wie: "optimiert für Internet Explorer 4.1. SeaMonkey 5.0, etc." oder die Verwendung von horizontalen Scrollleisten ausschließen

• Da nicht alle HTML-Eigenschaften und CSS-Regeln in jedem Browser funktionieren (meist zusätzliche Layouteffekte), beschränke dich auf die gängigen CSS-Regeln, die auf allen Browsern funktionieren.
• Horizontale Scrollleisten sind nicht benutzerfreundlich, da dadurch der Inhalt eventuell teiweise oder gar nicht wahrgenommen werden kann. Abbildung 2
• Benutze deshalb eine feste horizontale Seitenbeschränkung und die automatische Verwendung von vertikalen Scrollleisten in CSS.

Damit erst keine horizontale Scrollleiste entsteht am besten immer unter 800 Pixeln bleiben! Abbildung 1

Du sollst Metainformationen sinnvoll einsetzen

Zusatzinformationen sind bei HTML-Seiten erwünscht, allerdings nur wenn diese auch sinnvoll sind!

• Vermeide deshalb überflüssige Informationen bzw. Wiederholungen
• und missbrauche Metainformationen nicht zum eigenen Vorteil (z.B. Werbung, gezieltes Ranking - z.B. bei google - , Spam)

In Metainformationen kann man verschiedene nützliche Anweisungen für WWW-Server, WWW-Browser und automatische Suchprogramme im Internet notieren.

Einige der Metainformationen sind speziell für automatische Suchprogramme im Internet gedacht. Das sind Programme, die regelmäßig durch den gesamten Informationsraum Internet wandern, Verweisen folgen, aufgerufene Datein lesen und die gelesenen Daten an die heimische Suchdatenbank übermitteln. Dadurch wird eine HTML-Datei in dem entsprechenden Suchdienst auffindbar. Durch bestimmte meta-Informationen kann man bestimmen, welche Daten das Suchprogramm an seine Suchdatenbank überträgt. Man kann auch verbiten, dass ein Suchprogramm überhaupt Daten aus der Datei überträgt.

Einführungsvideo in HTML und CSS, erklärt die Basisbefehle (Englisch)

Wie kann ich nun ein bereits bestehendes HTML-Dokument individuell anpassen/verändern?

1. Als aller erstes solte man sich einen geeigneten HTML-Editor zulegen (z.B. den HTML-Editor Phase 5 -> siehe Links), der beispielsweise Element-und Attributnamen farblich darstellt, denn so wird der Quelltext des Dokuments übersichtlicher und man erkennt den sichtbaren Text des HTML-Dokuments besser.
2. Am besten immer von oben nach unten bei einem Quelltext durcharbeiten, um nicht den Überblick zu verlieren- Angefangen wird also mit dem head-Bereich, in dem die nicht-sichtbaren Angaben geregelt werden.
3. Im head-Bereich kann man nun die meta-Angaben ändern (Autor, Beschreibung der Seite etc.).
4. Dann den Titel anpassen (<title>.. >/title>).
5. Den nächsten Schritt widmen wir nun CSS ( Bsp.: <link href="styles.css" rel="stylesheet" type="text/css" />)
6. Wie bereits schon in den Geboten erwähnt, ist CSS für die Gestaltung einer Seite zuständig (z.B. CSS-Editor TopStyle Lite 3.0 -> siehe Links). Es ist möglich CSS-Befehle direkt in einem HTML-Dokument zu notieren, oder in eine externen Datei auszulagern. Das bietet sich an, wenn man mehrere Seiten mit dem gleichen Design erstellen möchte. Layout und Inhalt sind voneinander getrennt. Stehen die CSS-Angaben in dem HTML-Dokument, das man bearbeiten will, so kann man beliebige Änderungen vornehmen  (Farbe, Schriftgröße, Textausrichtung etc). Sind sie in einer externen Datei, so muss man aufpassen, dass die Änderungen in der Datei sich nicht ungewollt auch noch auf andere HTML-Dokumente auswirkt.
7. Hat man nun alle gewünschten Änderungen vorgenommen, kann man sich nun dem body-Bereich des HTML-Dokuments widmen (<body>... </body>). Hier können nun die Texte berabeitet bzw. durch eigene ersetzt werden sowie Bilder eingefügt/ersetzt werden. Alle Inhalte werden in der HTML Datei notiert. 
8. Bei den Bildern darauf achten, dass man diese in dem Ordner "Image" abgelegt hat, bzw. die relative (oder auch absulute) Pfadangabe in der HTML-Datei stimmt, damit auf die gewünschte Grafik zugeriffen werden kann.
9. Um nun das alte Bild durch das eigene zu ersetzen, einfach den Dateinamen (mit Dateiendung) bei <img src.... > ersetzen und nicht das alt-Attribut vergessen! :)