• Jakobs E-Portfolio

• Toms E-Portfolio

• Laurins E-Portfolio

• Stefans E-Portfolio

• Sylvias E-Portfolio

Hallöchen allerseits,

Ihr braucht dringend Hilfe in Sachen Word oder HTML / CSS und wisst nicht mehr weiter? Ihr seid schrecklich verzweifelt, habt alles versucht und das blöde Programm macht trotzdem nicht das, was ihr wollt? Dann klickt euch doch einfach mal durch unsere kleine, bescheidene Protopage.

In den Bereichen "Word" und "HTML / CSS" haben wir nützliche Hobbit-Tipps zusammengestellt, die euch beim Einstieg und beim weiteren Arbeiten helfen sollen.

Wart Ihr zufrieden? Haben euch die Hobbit-Tipps weitergeholfen? Habt ihr zu eurem Problem sofort die passende Lösung gefunden? Dann schreibt uns doch einen kleinen Kommentar in unsere Commentbox!

Ansonsten wünschen wir euch weiterhin viel Spaß auf unserer Protopage!

Eure 4 Hobbits

(Laurin, Tom, Stefan und Jakob)

• Fehlersuche Hausarbeit Laurin

• Fehlersuche Hausarbeit Tom

• Fehlersuche Hausarbeit Jakob

• Fehlersuche Hausarbeit Stefan

• Offizielle Homepage von MS Word

• Tutorials zu MS Word

• Video-Tutorials zu MS Word

• Hilfsforum zu MS Word

• Microsoft Word

In unserem Word-Hilfsbereich findet Ihr eine Wissenscollage zu "MS Word", welche euch als Hilfe oder Nachschlagewerk rund um MS Word dienen soll. Die einzelnen Schritte werden durch nützliche Screenshots ergänzt.

Im ersten Abschnitt werden wir euch die "10 Gebote" beim Arbeiten mit MS Word näher bringen, indem wir auf die prominentesten Fehler eingehen.

Der zweite Abschnitt soll euch dabei helfen, eure eigene Dokumentenvorlage zu erstellen.

Schlussendlich sind im dritten Abschnitt nützliche Tipps und Tricks aufgelistet, die euch den Umgang mit Word erleichtern sollen.

1.Gebot:

"Du sollst nicht wild im Text herumformatieren."

Hobbit-Tipp:

Die Textformatierung sollte überwiegend mit Formatvorlagen erfolgen. Dazu ist es nicht unbedingt notwendig, benutzerdefinierte Formatvorlagen zu erstellen. Die Einstellungen der systemseitigen Formatforlagen (z.B. „Standard“ oder „Überschrift 1“) können nach Belieben angepasst werden (Format > Formatvorlagen und Formatierungen...). Der gleichnamige Aufgabenbereich wird sichtbar. Bei Bedarf können „Alle Formatvorlagen“ unter Anzeigen eingeblendet werden. Eigenschaften können über das Kontextmenü "Ändern..." angepasst werden.

2.Gebot:

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

Hobbit-Tipp:

3.Gebot:

"Du sollst Listen nicht manuell mit z.B. „Sonderzeichen“ oder der Bindestichtaste erstellen."

Hobbit-Tipp:

Word bietet euch 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.

4.Gebot:

"Du sollst einzelne Zeilen nicht durch einen Druck auf „Enter/Return“ beenden (Abschnittswechsel am Ende jeder Zeile)."

Hobbit-Tipp:

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.

5.Gebot:

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

Hobbit-Tipp:

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.

6.Gebot:

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

Hobbit-Tipp:

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

7.Gebot:

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

Hobbit-Tipp:

Verwendet die Ansicht „Kopf- und Fußzeile“ (Ansicht ► Kopf- und Fußzeile), um Elemente zu positionieren, die auf jeder Seite eines Abschnittes angezeigt werden sollen.
Ihr könnt hier nicht nur Text und Seitennummerierungen, sondern auch Grafiken, Bilder
und andere Elemente der Zeichnen-Symbolleiste (Ansicht ► Symbolleisten ► Zeichnen)
einfügen. Tipp: In dieser Ansicht können recht einfach „Wasserzeichen“ auf jede Seite eines Abschnitts eingefügt werden.

8.Gebot:

"Du sollst nicht mit einem Druck auf „Tab“ oder die „Leertaste“ einrücken."

Hobbit-Tipp:

Word kennt dafür die Option „Einzug“ zum Befehl „Absatz“ (Format ► Absatz…).

9.Gebot:

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

Hobbit-Tipp:

Word bietet euch die Möglichkeit, verschiedene Referenzen zu erstellen, u.a. auch Inhaltsverzeichnisse (Einfügen ► Referenz ► Index und Verzeichnisse…). Die systemseitigen Formatvorlagen könnt ihr wie gehabt nach Belieben anpassen. Durch einen manuellen Abschnittswechsel vor und nach der Seite, auf der ihr das Inhaltsverzeichnis platzieren möchtet, lässt sich auch das Layout der Kopf- und Fußzeilen, unabhängig von der Gestaltung der anderen Abschnitte im Dokument, anpassen.

10.Gebot:

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

Hobbit-Tipp:

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 markierten 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 euch verschiedene Darstellungen zur Verfügung: Der Drop-Down-Button „Anzeigen“ ermöglicht Filterungen nach Bearbeitern und Versionsständen mit und ohne Änderungen und Kommentaren.

Zusätzlicher 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.

Eine Dokumentenvorlage ist ein Gerüst oder auch eine Beschreibung der generischen Struktur eines Dokumentes. Sie hilft in großem Maße bei der Erstellung von strukturierten Dokumenten. Eine Dokumentvorlage ändert sich nicht, wenn sie geöffnet und zum Erstellen eines Dokumentes verwendet wird. Dokumentenvorlagen sind zudem stets an der Dateiendung .dot zu erkennen. Die folgenden 10 Schritte sollen euch bei der Erstellung einer Vorlage als "Roter Faden" dienen.

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

Format ► Absatz

Zeilenabstand 1,5

Format ► Zeichen ... oder in der Formatsymbolleiste

Schriftart Times New Roman.

Format ► Zeichen... oder in der Formatsymbolleiste Schriftgröße 12.

Format ► Absatz ► Allgemein ► Ausrichtung oder in der Formatsymbolleiste Blocksatz

Extras ► Sprache ► Silbentrennung ► Automatische Silbentrennung

Einfügen ► Seitenzahlen... bzw. Ansicht ► Kopf- und Fußzeile… ► Seitenanzahl einfügen

Beachte: Die Seitennummerierung sollte noch nicht auf dem Deckblatt und der Gliederung beginnen. Um dies zu vermeiden:

Einfügen ► Seitenzahlen… bzw. Ansicht ► Kopf- und Fußzeile… ► Seitenanzahl einfügen ► Bei Beginn auf der 1. Seite kein Häkchen machen

8. Überschriftenvormatvorlage

Überschriften sollten mit der Überschriftenformatvorlage erstellt werden.

Format ► Formatvorlagen... ► Auswählen der gewünschen Überschrift bzw. Format ► Nummerierung und Aufzählungszeichen... ► Gliederung ► Formatvorlage für die Überschrift auswählen.

9. Automatische Kapitelnummerierung

Damit Kapitelnummern in Beschriftungen eingeschlossen werden, muss man den

Kapitelüberschriften eine eindeutige Überschriftenformatvorlage zugewiesen haben.

Elemente, zu denen Aufzählungszeichen oder eine Nummerierung hinzugefügt werden sollen auswählen  ► auf der Formatsymbolleiste auf Aufzählungszeichen oder Nummerierung (siehe Erklärung der Symbolleiste unter "Tipps & Tricks") klicken.

Microsoft Word kann während der Eingabe automatisch Listen mit Aufzählungszeichen und nummerierte Listen erstellen. Man kann Aufzählungszeichen oder Nummerierungen aber auch bestehenden Textzeilen zuordnen.

Einfügen ► Referenz ► Index und Verzeichnisse... ► Inhaltsverzeichnis

Die Dokumentvorlage für die Hausarbeit soll als Idealbeispiel für eine wohl formatierte, strukturierte Hausarbeit und die Integration feststehender Textbausteine in eine Dokumentvorlage dienen.

 

 

Hier findet ihr unser Beispiel für eine Dokumentvorlage. Durch einen Klick auf die Miniaturanicht gelangt ihr zum Downloadbereich, welcher sich in einem neuen Fenster öffnet.

►  Strg + N                    Neues Dokument erzeugen
►  Strg + O                    Aktiviert das Dialogfenster "Öffnen"
►  Strg + w                   Schließt das Dokument
►  Strg + S                    Speichert das Dokument
►  Strg + P                     Aktiviert das Dialogfenster "Drucken"
►  Strg + A                     Alles markieren
►  Strg + C                     Kopieren

►  Strg + X                     Ausschneiden

►  Strg + V                     Einfügen

►  Strg + K                     Hyperlink einfügen

►  Strg + F                      Suchen

►  Strg + G                     Ersetzen

►  Strg + H                     Gehe zu

►  Strg + Alt +N             Normalansicht
►  Strg + Alt +G             Gliederungsansicht
►  Strg + Alt +L              Layoutansicht

►  Strg + Umsch + F     Fettdruck

►  Strg + Umsch + K    Kursivdruck

►  Strg + Umsch + U    Unterstreichen

►   F12                             Aktiviert das Dialogfenster "Speichern unter"

In diesem Video werden Grundlagen der Formatierung eines Aufsatzes erklärt

- Seitenrand

- Seitenzahlen,

- Kopfzeile, Schriftgröße,

- Zeilenabstand,

- Datum,

- eingerückte Zeilen,

- Seitenumbruch

Sprache:         Englisch

In diesem Video werden die einfachsten Grundlagen im Umgang mit MS Word erklärt :

- Rechtscheibprüfung

- Spracheinstellungen

- Format

- Schriftart

- Schriftgröße

- Schriftform

- Schriftfarbe

- Kopieren

- Einfügen

- Bilder

- Sonderzeichen einfügen

- Wörter zählen

- Aufzählungspunkte

Sprache:         Englisch

• PDF-Dokument zu HTML / CSS

• HTML-Hilfe

• Self-HTML

• Tipps und Tricks zu CSS

• Tipps und Tricks zu HTML

• CSS 4 YOU

Im HTML/CSS-Hilfsbereich unserer Protopage findet ihr hilfreiche Informationen zu den Themen HTML und CSS.
Diese Informationen sollen euch einerseits einen grundlegenden Überblick über die Themen geben und euch weiterführend zeigen, wie man mit HTML wohl strukturierte Webseiten erstellen kann.

Im ersten Abschnitt dieser Seite findet Ihr grundlegende Informationen zu HTML, während wir euch im zweiten Abschnitt CSS näher bringen möchten. Abschließend gehen wir im dritten Abschnitt auf die "10 Gebote der HTML-Programmierung" ein. Hier findet Ihr zudem eine von uns mit HTML erstellte Webgruppenvisitenkarte, die euch als Beispiel für ein wohl strukturiertes HTML-Dokument dienen soll.

HTML ist eine Abkürzung und steht für Hypertext Markup Language. Sie ist eine Programmiersprache und dient zur Strukturierung von Inhalten wie beispielsweise Texten, Bildern oder Hyperlinks in Dokumenten. Diese HTML-Dokumente stellen wiederum die Basis des heutigen Internets dar.

HTML wurde Ende der 80er Jahre von dem Schweizer Tim Berners-Lee entwickelt und stellt letztenendes eine Anwendung der Standard Generalized Markup Language (SGML), einem System zur Definition von Dokumentenbeschreibungssprachen, dar. Die Grundidee bestand darin, wissenschaftliche Forschungsergebnisse untereinander zu verlinken.

Hierzu sollte man durch einen "Hypertext" einfach auf bestimmte Begriffe innerhalb eines Dokumentes klicken können und somit ohne Umwege zum begriffsrelevanten Abschnitt weitergeleitet werden. Mittlerweile hat sich HTML von dieser Grundidee zur beherrschenden Sprache des Internets entwickelt.

Die Grundlage einer jeden HTML-Datei ist ein vordefiniertes Grundgerüst, das aus den folgenden Elementen besteht:

• der Dokumententyp-Deklaration (Angabe zur verwendeten HTML-Version)
• dem Head-Bereich (den Kopfdaten, z.B. Angaben zu Titel u.ä.)
• dem Body-Bereich (dem Körper - der anzuzeigende Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)

Die erste Zeile besteht aus der oben genannten Dokumententyp-Deklaration.

Der gesamte übrige Inhalt einer HTML-Datei wird in die Tags <html> (einleitendes Tag) und </html> (abschließendes Tag) eingeschlossen.

Das html-Element wird auch als Wurzelelement einer HTML-Datei bezeichnet. 

Nach dem einleitenden HTML-Tag folgt das einleitende Tag für den Headbereich, das mit <head> beginnt und mit </head> wieder abschließt . Hier werden die Kopfdaten einer HTML-Dateo festgelegt.

Nun folgt daunter der Textkörper, begrenzt durch <body> und </body>.

• Welche Elemente darf ein HTML-Dokument enthalten?
• Welche Elemente dürfen innerhalb welcher anderen Elemente vorkommen? 
• Welche Attribute gehören zu einem Element? 
• Ist die Angabe dieser Attribute Pflicht oder freiwillig etc.?

Die Dokumenttyp-Deklaration wird am Anfang jeder HTML-Datei vor dem einleitenden html-Tag in Großbuchstaben notiert.

Hinter der startenden spitzen Klammer folgt ein Ausrufezeichen (!). Darauf folgt immer die Angabe DOCTYPE HTML PUBLIC. Hiermit legt ihr fest, dass ihr euch in eurem Dokument auf eine öffentlich verfügbare HTML-Dokumententyp-Definition (kurz DTD) bezieht. Dies ist notwendig, da eine HTML-Datei erst dann gültig ist, wenn sie sich auf einen bestimmten Dokumententyp bezieht und sich im folgenden Quelltext auch genau an die jeweiligen dokumententypspezifischen Regeln hält.

Der Head einer HTML-Datei ist meist der Teil im Hintergrund, den man kaum zu sehen bekommt. Er beginnt mit dem Tag <head> und endet mit dem Tag </head>.

Hier werden die Aspekte festgelegt, welche nur geringfügig das Aussehen und die Struktur des Dokuments behandeln.

Zudem sind im Head-Element auch folgende Elemente möglich:

• der Seitentitel
• SkripteStyleSheets
• Meta-Angaben
• Bezüge zu anderen Seiten
• Basiseigenschaften

Die Reihenfolge der Elemente im Head ist zudem frei wählbar.

Hier wird nun der eigentliche Inhalt der HTML-Datei angegeben, der letztenendes im Browser angezeigt werden soll, wie etwa

• Texte
• Grafiken
• Tabellen
• Töne, etc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     

"http://www.w3.org/TR/html4/loose.dtd">       Dokumententypdeklaration

<html>
<head>
Head-Bereich

<title>Beschreibung der Seite</title>      
</head>       
<body>

Body-Bereich
</body>
</html>

In diesem kurzen Video werden die einfachsten Basiselemente eines HTML-Dokumentes erklärt.

Das Video gibt einen guten Einblick in der Grundverwendung von Tags. Im Einzelnen geht es auf den Aufbau des Head-Bereiches ein und es wird ein kurzer Einblick in das Einfügen der einfachsten Basiselemente in den Body-Bereich gewährt.

Sprache:            Englisch

Nebenstehend seht ihr einen Teil der Zeichenreferenz aus HTML.

Hierbei sind die wichtigsten Unicodes aufgelistet, die in HTML verwendet werden. Die einzelnen Zeichen sind in ihrer Hexadezimal- Schreibweise angegeben.

In diesem sehr hilfreichen Video wird auf die Verwendung verschiedener Grund-Tags eingegangen.

Es beschäftigt sich z.B. mit Tag-Eigenschaften wie Farbe und Größe, der Farbe von Schrift oder dem Einfügen von Grafiken in ein HTML-Dokument.

Auch beschäftigt es sich mit dem Einfügen von Überschriften.

Sprache:            Englisch

Jede hexadezimale Farbdefinition ist 6stellig und hat das Schema #RRGGBB.
Zunächst notiert ihr also ein Gatter #, dahinter folgen 6 Stellen für die Farbdefinition. Die ersten beiden Stellen stellen den Rot-Wert der Farbe dar, die zweiten beiden Stellen den Grünwert, und die letzten beiden Stellen den Blau-Wert. 

Hexadezimale Ziffern sind:

0 (entspricht dezimal 0)
1 (entspricht dezimal 1)
2 (entspricht dezimal 2)
3 (entspricht dezimal 3)
4 (entspricht dezimal 4)
5 (entspricht dezimal 5)
6 (entspricht dezimal 6)
7 (entspricht dezimal 7)
8 (entspricht dezimal 8)
9 (entspricht dezimal 9)
A (entspricht dezimal 10)
B (entspricht dezimal 11)
C (entspricht dezimal 12)
D (entspricht dezimal 13)
E (entspricht dezimal 14)
F (entspricht dezimal 15)

Folglich kann eine hexadezimale Ziffer 16 Zustände habe,da für jeden Farbwert (Rot, Grün, Blau) 2 Ziffern zur Verfügung stehen. Das macht 16 x 16 (= 256) mögliche Zustände pro Farbwert.

Auch CSS ist eine Abkürzung und steht für "Cascading Style Sheets", was im Deutschen soviel wie "veränderbare Gestaltungsvorlagen" bedeutet.
Durch die Sprache CSS ist es möglich, gleiche HTML-Inhalte graphisch auf verschiedene Art und Weise darzustellen. Sie dient also letztendlich zur Bestimmung des Aussehens von HTML-Inhalten.

Auch CSS entstand 1994 in der Schweiz und ermöglicht es, sich bei der Erstellung von Websites im HTML-Editor erst vollständig auf den Inhalt zu konzentrieren, um diesen im Nachhinein graphisch aufzubereiten, also das Layout des HTML-Inhaltes festzulegen.
So kann man CSS beispielsweise zum Festlegen von Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern und etlichen anderen Dingen nutzen.

Damit die Styles der externen Dateien auf der gesamten Webseite verfügbar sind und somit verwendet werden können, kann man mittels eines Links auf die Datei verweisen oder sie importieren.

• Mittels Link auf die *.css Datei verweisen:

<head>
       <link rel="stylesheet" type="text/css" href= "name_der_datei.css">
</head>

• Die *.css Datei importieren:

<head>

       <style type= "text/css">

             @import url ("name_der_datei.css");

       </style>

</head>

Eingebettete Styles werden bereits im Head-Bereich deklariert und haben damit für die gesamte Webseite Gültigkeit.

Die Definition erfolgt zwischen den Tags <style> und </style>.

Die Angabe type="text/css" weist darauf hin, dass es sich um ein Stylesheet handelt.

<head>

<style type="text/css">

h3 {

color: red;

font-family: Arial; <!-- Definition der Atrtribute -->

}

</style>

1. Geschweifte Klammern:
   Styles sind mit Ausnahme der Inline-Styles an den geschweiften Klammern zu erkennen. Vor der beginnenden Klammer steht ein sogenannter Sektor (in html = Tag).
   
   
2. Doppelpunkt:
   Ein weiteres Element der Syntax ist der Doppelpunkt, welcher die Eigenschaft vom zuzuordnenden Wert trennt (in html = Gleichheitszeichen).
   
   
3. Semikolon:
   Nach dem Wert wird ein Simikolon eingetragen. Es dient dazu, mehrere Attribute hintereinander zusammenzufassen.

Im obigen Modell könnt ihr sehen, welche Begriffe welche Ausrichtungen zur Folge haben, so hat z.B. "border" Auswirkungen auf den Rahmen.

                                                                                                  Hier kommt ihr zu unserer Webgruppenvisitenkarte!

1.Gebot: 

"Du sollst darauf achten, „well-formed" HTML-Seiten zu erstellen: Gute HTML-Struktur"

Hobbit-Tipp:

Achten Sie auf das richtige Grundgerüst einer HTML-Seite und die richtige Schachtelung(Hierarchische Struktur) der HTML-Elemente. Entscheidend ist außerdem, dass Sie Elemente an der richtigen Stelle einsetzen (Head- oder Body-Bereich).

2.Gebot: 

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

Hobbit-Tipp:

1. Ein Start-Tag wird immer mit dem dazugehörigen End-Tag geschlossen.
2. Aus Kompatibilitätsgründen zu XHTML wird empfohlen, auch Elemente ohne Inhalt wie z.B. <br> und <img> immer zu schließen (<br />, <img />).
3. 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>)
4. Setze Attributwerte immer in Anführungsstriche (z.B. src=“blume.jpg“ oder
alt=“Das Photo zeigt eine Sonnenblume“)
5. Verwende immer Entitäten (z.B. für „ä“).

3.Gebot: 

"Du sollst darauf achten, „well-formed" HTML-Seiten zu erstellen: Korrekte Hyperlinks"

Hobbit-Tipp:

1. Für die Verlinkung von elektronischen Dokumenten in einer HTML-Seite ist die korrekte Pfadangabe wichtig.
2. Hierbei werden absolute von relativen Pfaden unterschieden. Hyperlinks zu externen Webseiten müssen als absoluter Pfad gesetzt werden. Eingebundene Bilder hingegen können auch relativ verlinkt werden, um die Darstellung der HTML-Seite auf jedem System auch offline zu gewährleisten. Dasselbe gilt für interne Unterseiten eines HTML-Projektes.
3. Ebenfalls essentiell ist die Groß- und Kleinschreibung der verlinkten Dokumente.

4.Gebot: 

"Du sollst die strikte Trennung von Inhalt und Layout beachten."

Hobbit-Tipp:

HTML strukturiert eine Seite und beschreibt nicht wie sie zur Gestaltung der Seite dient. Beachten Sie dies schon mit. Nachträgliche Anpassung ist oft unnötig und zeitaufwändig.

5.Gebot: 

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

Hobbit-Tipp:

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 (z.B. „em-Tag“ oder „strong-Tag“) anstatt physikalischer Auszeichnung bzw. visueller Auszeichnung (z.B. „i-Tag“ oder „b-Tag“).

6.Gebot: 

"Du sollst eine HTML-Seite nicht mit Layouttabellen gestalten."

Hobbit-Tipp:

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.

7.Gebot: 

"Du sollst auf zu viele Animationen, unterschiedliche Textfarben und Schriftarten verzichten."

Hobbit-Tipp:

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

8.Gebot: 

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

Hobbit-Tipp:

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

9.Gebot: 

"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."

Hobbit-Tipp:

1. 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 CSS-Referenzkarten enthalten, die anzeigen, welche CSS-Regeln von den gängigen Browsern unterstützt werden).
2. Horizontale Scrollleisten sind nicht benutzerfreundlich. Durch Verwendung von horizontalen Scrollleisten 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.

10.Gebot: 

"Du sollst Metainformationen sinnvoll einsetzen."

Hobbit-Tipp:

Erweitern Sie Ihre HTML-Seite mit sinnvollen Zusatzinformationen und vermeiden Sie überflüssige Informationen bzw. Wiederholungen. Unterlassen Sie den Missbrauch von Metainformationen zum eigenen Vorteil (z.B. Werbung, gezieltes Ranking oder Spam).