Rich sticky notes
Praktikumsauftrag
Learn HTML
Herzlich willkommen
Herzlich Willkommen bei FirstStep!
Auf dieser Seite beschäftigen wir uns mit dem Thema "HTML & CSS". Mit Hilfe von den 10 Geboten, wie man HTML und CSS richtig anwendet, und Screenshots wollen wir Tipps und Hilfen bieten, wie man damit richtig umgeht.
Viel Spaß
wünscht FirstStep!
Links zum Thema HTML und CSS
Das ist eine kurze Zusammenfassung zu den Basics von HTML:SELFHTML-HTMLHier nun ein paar Informationen zum Thema Cascading Style Sheets:SELFHTML-CSSUnter diesem Link findet man auch ähnliche Informationen zu CSS wie bei den oberen und einen speziellen Workshop für Anfänger:CSS Gebot 1
1. Du sollst darauf achten, "well-formed HTML" Seiten zu erstellen I: gute HTML Struktur
Damit es beim Anzeigen von HTML Seiten nicht zu Fehlern kommt, ist es wichtig, die richtige Struktur zu haben. Dass heißt erst kommt der "head-Bereich" und dann der "body-Bereich". Durchmischungen sind nicht definiert.
Weiteres kann man auf dem Screenshot sehen.
Gute HTML Struktur
Wenn man Fehler im HTML Quelltext vermeiden will, sollte man "head" und "body" nicht willkührlich verwenden.Gebot 2
2. Du sollst darauf achten, "well-formed HTML" Seiten zu erstellen II: "HTML-Tags"
Im Gebot 2e heißt es man soll immer Entinitäten verwenden. Das bedeuted man setzt für den Buchstaben "ä" die Entinität "ä" im HTML Editor ein (analoges Vorgehen bei "ö", "ü" und deren Großbuchstaben). Denn es kann passieren, dass Buchstaben wie "ä" nicht angezeigt werden können. Das ist allerdings abhängig von dem Internet Explorer. Bei manchen gibts es eine integrierte Einstellung, die "ä" auch ohne die Entinität im Quelltext anzeigen kann. Aber davon können wir nicht ausgehen.
Ändern kann man das indem man "Strg+R" drückt oder auf "Bearbeiten" und "Ersetzen" geht. Dort erscheint ein Fenster, wo man zunächst den Buchstaben, also "ä", und dann die dazugehörige Entinität, also "ä", einsetzt. Anschließend wählt man "Alles ersetzen" aus. Dadurch wird jedes "ä", "ö" oder "ü" im HTML Quelltext ersetzt. Das garantiert dann eine gute Lesbarkeit der entsprechenden HTML-Seite.
Achtung: Dies gilt nicht nur bei Buchstaben sonder auch bei Sonderzeichen wie € (€). das "ß" wird so gekennzeichnet: ß
Siehe dazu Screenshot "Text ersetzen".
Text ersetzen
Aus Bchstaben wie "ä", "ö" und "ü" kann man Entinitäten machen, indem man Strg+R drückt oder auf "Bearbeiten" und "Ersetzen" drückt. Danach wird das oben gezeigte Fenster angezeigt.Gebot 3
3. Du sollst darauf achten "well-formed HTML" Seiten zu erstellen III: korrekte Hyperlinks
Wenn man z.B Bilder in den HTML Quelltext mit einbinden möchte, so ist es wichtig, stets den richtigen Pfad anzugeben. Bei Bildern kann dieser auch relativ sein.
Erscheint das Bild nicht auf der erstellten HTML Seite, muss man erstens kontrollieren, ob man das Bild korrekt hochgeladen hat und zweitens dementsprechend auch den selben Namen des hochgeladenen Bildes in den Pfad übernimmt. Hier muss auch besonders auf Groß-u. Kleinschreibung geachtet werden. Sonst ist es nicht möglich, dass das Bild angezeigt wird.
Im Quelltext sieht das in etwa so aus: <img ... src="name.endung">
Wurde alles korrekt übernommen, so wird das Bild angezeigt.
Siehe dazu auch Screenshot "Bild einfügen".
Bild einfügen
Beim Einfügen eines Bildes in eine HTML Quelltext muss man den korrekten Pfad beachten.Gebot 4
4. Du sollst die strikte Trennung von Inhalt und Layout beachten.
Zur Strukturierung einer Seite benutzt man HTML. Mit CSS kann man die Seite gestalten.
Man sollte gleich zu Beginn auf die Trennung achten, dann bekommt man keine Probleme mit der Anpassung.
Siehe dazu die beiden Screenshots "Formatierung im Quelltext" und "Formatierung mit CSS".
Formatierung im Quelltext
Um Inhalt vom Layout zu trennen, sollte man die Formatierung nicht in den HTML Quelltext schreiben.Gebot 5
5. Du sollst nicht mit Attributen oder Elementen formatieren, die den Status "deprecated" haben.
Die mit dem Status "deprecated" ausgezeichnete Elemente und Attribute werden missbilligt, da sie im HTML Quelltext den Inhalt formatieren. Daraus folgt, dass es keine direkte Trennung zwischen Inhalt und Layout gibt. Für das Format wird heutzutage CSS (Cascading Style Sheets) benutzt. Findet man also im HTML Quelltext solche Elemente, ersetzt man sie durch die nun gängigen Elemente und formatiert mit CSS.
Bsp. für "deprecated": Das dunkel geschriebene kommt in eine CSS Datei und das helle kann im Quelltext stehen bleiben.
<div id="kopfbereich" style=" background-color: #d700d7;
padding-top: 5px; padding-right: 20px; padding-bottom:
5px; padding-left: 10px; font-family: Times, serif;">
Man muss dabei darauf achten, das man das CSS im HTML Editor verlinkt:
<link href="profil1.css" rel="stylesheet" type="text/css" />
Siehe dazu die beiden Screenshots "Formatierung im Quelltext" und "Formatierung mit CSS".
Formatierung mit CSS
Hier wird die Formatierung im CSS eingegeben und garantiert somit eine Trennung von Inhalt und Layout.Layouttabellen
Layouttabellen unbedingt mit CSS gestalten und nicht im HTML Quellcode.Gebot 6
6. Du sollst eine HTML-Seite nicht mit Layouttabellen gestalten.
Das wäre ein Verstoss gegen die Regelung,dass man Inhalt (HTML) und Layout (CSS) trennen soll. Layouttabellen lassen sich problemlos mit CSS erstellen.
Gebot 7
7. Du sollst auf zu viele Animatinen, unterschiedliche Textfarben und Schriftarten verzichten.
Bei der Erstellung einer HTML Seite sollte man darauf achten, möglichst eine einheitliche Struktur des Layouts zu schaffen. D.h. insbesondere der Verzicht auf verschiedene Schriftarten und Farben, sowie blinkenden Text. Das irritiert und lenkt vom Inhalt ab.
Am besten ist es, wenn man für sich eine bestimmte Formatierung festlegt und diese mit CSS umsetzt. Man sollte es dezent von den Farben her halten und niemals Komplimentärfarben für Hintergrund und Schrift verwenden. Dies erschwert das Lesen.
Ein Beispiel für Blinken im HTML Text:
<span style="text-decoration: Blink; color: #00FF99">Ich</span>
Soetwas sollte nach Möglichkeit selten eingesetzt werden.
Siehe dazu den Screenshot "Animationen".
Animationen
Zuviele Animationen, wie Blinken, verwirren und lenken vom Inhalt ab. Agressive Farben erleichtern das Lesen nicht.Gebot 8
8. Du sollst für z.B. Grafiken und Formularelemente immer auch eine Beschreibung mittels "alt-Attribut" hinzufügen.
Für die Barrierefreiheit ist es wichtig, jedem zu ermöglichen, die jeweiligen Inhalte der Seite zu verstehen. Da z.B. Blinde ein Bild nicht sehen können, sollte man es beschreiben, damit sie in etwa wissen, was darauf zu sehen ist.
Dies macht man mit dem "alt-Attribut", was soviel wie Beschreibung bedeuted. Hier ein Beispiel:
<img id="photo" alt="Foto eines Wassertropfens" src="images/trop.JPG">
Man fügt es also mit in den Image Tab ein.
Siehe dazu den Screenshot "Bildbeschreibung".
Bildbeschreibung
Um die Barrierefreiheit zu gewährleisten, sollten Grafiken und Bilder unbeding beschrieben werden, wie das Beispiel oben zeigt.Gebot 9
9. Du sollst Nutzergruppen nicht durch Aussagen, wie „optimiert für Internte Explorer 4.1, SeaMonkey 5.0, etc.“ oder die Verwendung von horizontalen Scrollleisten ausschließen.
Man sollte sich auf die üblichen CSS Regeln beschränken, denn nicht alle HTML-Eigenschaften und CSS-Regeln werden von jedem Browser erkannt. Meistens sind dies auch nur zusätzliche Layouteffekte. Mit diesem Punkt ist aber nicht gemeint, dass die Seiten von Browser zu Browser etwas anders dargestellt werden können.
Des Weiteren sollte man darauf achten,dass man die Verwendung von vertikalen Scrollleisten autmatisch eingestellt hat und auf horizontale verzichten. Durch die Verwendung horizontaler Scrolleisten kann Inhalt übersehen werden. Im Großen und Ganzen sind diese einfach nicht benutzerfreundlich.
Gebot 10
10. Du sollst Metainformationen sinnvoll einsetzen.
Meta-Daten werden eingesetzt, um Informationen für den Web-Browser, den Web-Server und Suchmaschinen-Tools bereitzustellen. Letztere lesen beispielsweise die "keywords" aus, die als Metainformationen angegeben wurden:
Beispiel:
[...]
<meta name="keywords" content="SPIEGEL ONLINE, DER SPIEGEL,
Nachrichten, News, Meldungen, Informationen, [...]">
[...]
Hier wird schon deutlich, dass die Angabe von "keywords" missbraucht werden kann, um seiner eigene Website im Ranking der Suchergebnisse von Internetsuchmaschinen eine vorteilhafte Positionierung zu verschaffen. ABER: Dies soll man strikt unterlassen! Zum einen aus Vernunft und zum anderen deshalb, weil die Suchmaschinenbetreiber nun auch andere Methoden anwenden, um die wirklichen Inhalte von Websiten zu überprüfen.
ALSO: Nur die wesentlichen und korrekten "keywords" hier angeben.
Die Angabe der Meta-Daten erfolgt immer nach der selben Struktur:
<meta name="Eigenschaft" content="Wert" />
Neben den "keywords" gibt noch eine Reihe weiterer Meta-Daten. Die Wichtigsten sind jedoch:
<meta name="description" [...]>: Hier kann man seine Seite mit einem kurzen Satz beschreiben.
<meta name="author" [...]>: Hier soll der Verfasser der Website genannt werden.
<meta name="date" [...]>: Hier steht das Datum des Erscheinens der Website.
Metainformationen
Hier wurden die wichtigsten Meta-Daten hinzugefügt. Die Metainformationen stehen immer im Head-Bereich.CSS 1
CSS 2
CSS 3
Das war´s erstmal
So wir hoffen wieder einmal,dass wir euch weiterhelfen konnten. Wenn es Fragen oder Anregungen gibt, dann hinterlasst einen Kommentar.
FirstStep
Rich sticky notes
Willkommen zur Wissenscollage
FirstStep begrüßt euch herzlich auf der Wissenscollage zu MS Word!
Hier findet ihr Anregungen, Informationen und Tipps zum Umgang mit MS Word.
Mit Hilfe von Sreenshots, Cartoons und Erläuterungen wollen wir euch einen interessanten und unterhaltsamen Überblick im Umgang mit Word geben.
Viel Spaß wünscht
FirstStep
Praktikumsauftrag
Links zum Thema MS Word
Unter diesem Link findet ihr Hinweise u.a zu Fußnoten und Hyperlinks in Word: Hilfe zu WordErstellung von FormatvorlagenAuf der offiziellen Seite könnt ihr Hilfe und Anleitung zu Word finden:Microsoft Office WordUnter diesem Link findet ihr aktuelle Tipps und Tricks u.a. zum Thema Dateischutz in Word, wie man Texte und Bilder einfügt und zu Sonderzeichen in Word:Tipps und Tricks zu WordArbeiten mit Word
Todsünde 1
1. Du sollst Zeichen nicht mit einen Druck auf "Tab" oder "Leertaste" eindrücken.
Ein häufiger Fehler beim Erstellen eines Dokumentes ist, wenn man bestimmte Textabschnitte oder auch Überschriften mit der Leertaste oder Tab einrückt oder mittig setzt.
Dafür gibt es in MS Word zum Beispiel die Option "Einzug". Dort kann man einstellen wie weit beispielsweise ein Textabschnitt einrücken soll. Dazu gelangt man unter "Format" und "Absatz".
Will man allerdings Überschriften mittig rücken, so verwendet man nicht die Leertaste, sondern zum Beispiel die Formatvorlagen. Unter "Formatvorlage ändern" kann man einstellen, ob eine Überschrift rechts- oder linksbündig ist oder mittig gestellt wird.
Wie genau das aussieht, könnt ihr euch im Screenshot "Einzug" ansehen.
Todsünde 2
2. Du sollst einzelne Zeilen nicht durch einen Druck auf "Enter"/"Return" beenden (Abschnittwechsel am Ende jeder Zeile).
Wen man am Ende jeder Zeile durch "Enter" zur nächsten Zeile springt, kann das Probleme mit sich bringen, sobald sich etwas am Dokument verändert. Zum Beispiel stellt man eine Formatvorlage mit Absatzkontrolle ein, so erreicht jede Zeile von der anderen einen unglaublichen Abstand. Bei Änderung der Formatierung von Linksbündig zu Blocksatz, kann ein einziges Wort in einer ganzes Zeile stehen, was jedoch noch zu einem Satz gehört, der aber erst in der nächsten weitergeht. Das sieht sehr schlimm aus und ist extrem unübersichtlich und irritierend.
Sobald man die Seitenränder bestimmt, muss man niemals die Zeilen mit "Enter" beenden, denn sie können nicht unendlich lang werden. Man kann also einfach nach Belieben weiterschreiben. Wie man Seitenränder einstellt, kann man auf dem Screenshot "Seitenränder" erkennen. Zu dieser Option gelangt man über "Datei" und "Seite einrichten".
Möchte man nun aber einen neuen Satz beginnen, der nicht gleich zum neuen Absatz wird, sondern noch zum bestehenden Absatz dazugehört, so sollte man dies nicht mit Enter tun. Dafür gibt es den manuellen Zeilenumbruch, den man unter "manuelle Umbrüche" einstellen kann. Siehe dazu auch Screenshot "Seitenumbruch", auf dem die verschiedenen Optionen enthalten sind.
Todsünde 3
3. Du sollst (Seiten-) Umbrüche nicht durch mehrfaches Drücken auf "Enter"/"Return" erzeugen.
Beim Gestalten z.B. eines Deckblattes in MS Word sollte man auf keine Fall die Seite durch mehrfaches Drücken auf "Enter" wechseln. Auch muss man kein eigenes Dokument für das Deckblatt erstellen. Man kann alles fortlaufend in einem Dokument haben. Dies erreicht man durch das Anwenden von "manuellen Ümbruchen", die man unter "Einfügen" finden kann. Dort gibt es die Option "Seitenumbruch". Wählt man diese aus, so wechselt die Eingabe automatisch auf die nächste Seite. Dadurch wird auch bei eventuellen Ergänzungen des Deckblattes, der darunterstehende Text nicht nach unten geschoben, wie es z.B. der Fall ist, wenn man durch Enter die Seite wechselt.
Todsünde 4
4. Du sollst Trennstriche nicht mit einem Druck auf die Bindestrichtaste einfügen.
Silbentrennung kann man über die Funktion Extras -> Sprache -> Silbentrennung automatisch einstellen.
Wenn sich der Zeilenfall ändert,bleiben die mit der Bindestrichtaste erzeugten Trennstriche stehen. Man sollte deshalb die Tastenkombination "Strg" und "Bindestrichtaste" benutzen,um Silbentrennungen zu kennzeichnen.
Todsünde 5
5. Du sollst nicht wild im Text herumformatieren (Direkte Formatierung).
Auf keinen Fall sollte man nach Belieben im Text formatieren, d.h. Überschriften fett oder kursiv machen und Absätze einfach durch "Enter" eingeben. Dafür gibt es in Word die Formatvorlagen. Diese findet man unter "Format" und "Formatvorlagen und Formatierung".
Für Überschriften gibt es auch schon systemseitige Formatvorlagen, die einfach angepasst oder geändert werden können. So kann man einstellen welche Formatierung zu welche Graden der Überschriften gehören.
Beim Standardtext kann man ebenfalls Blocksatz einstellen oder eine Absatzkontrolle einfügen. Ein neuer Absatz wird jeweils durch "Enter" erzeugt. Das gibt dem ganzen eine ordentliche Struktur.
Als Beispiel hierfür sind die Screenshots "Formatierung" und "Überschrift" zu nennen.
Todsünde 6
6. Du sollst Listen nicht manuell mit z.B. „Sonderzeichen“ oder der Bindestrichtaste erstellen.
Am besten lassen sich die Elemente einer Liste durch Nummerierungen und Aufzählungszeichen kenntlich machen. Im Dialogfeld „Nummerierung und Aufzählungszeichen“ (unter Format) kann man Varianten zur Erstellung der Listen und Gliederungen auswählen. Man kann einfache Aufzählungslisten, Nummerierungen und Gliederungslisten erstellen. Außerdem lassen sich mit dem Reiter „Listenformatvorlagen“ eigene Formatvorlagen für Listen erzeugen.
Todsünde 7
7. Du sollst dein Dokument nicht rein visuell mit römischen oder arabischen Ziffern gliedern.
Um ein Dokument gut zu gliedern und die Übersicht zu behalten, sollte man Gliederungsebenen benutzen. Man sollte dazu über dem Menüpunkt „Ansicht“ „Gliederung“ einstellen. Die Ansicht hilft die eigene Arbeit anhand der Gliederung des Dokuments zu überprüfen. Außerdem kann man mit Hilfe der Gliederungsansicht das Dokument so reduzieren, dass nur noch die Überschriften zu sehen sind.
Das Benutzen der systemseitigen Formatvorlagen „Überschrift 1…n“ bietet den Vorteil, dass sie den Gliederungsebenen schon zugewiesen sind. Es ist kein Problem die Formatierungen seinen eigenen Vorstellungen anzupassen.
8. Todsünde
8. Du sollst Kopf- und Fußzeilen nicht manuell durch "Copy & Paste" auf jeder Seite neu erstellen.
Will man z.B. Seitenzahlen in ein Dokument einfügen, so macht man dies nicht manuell und kopiert es immer wieder, sondern man geht über die Einstellung "Einfügen" und "Seitenzahlen" oder über die Einstellung "Ansicht" und "Kopf- und Fußzeile". Dort kann man nicht nur Optionen wie Seitenzahlen einstellen. Es ist möglich auch andere Optionen zu wählen, wie z.B. "Erstellt von".
Dadurch erscheint alles automatisch auf jeder Seite des Dokuments. Nach Belieben kann man dies aber auch ändern, indem man Kopf- und Fußzeilen z.B. ab einer bestimmten Stelle des Dokuments festlegt.
Todsünde 9
9. Du sollst Inhaltsverzeichnisse weder manuell erstellen, noch in ein seperates Dokument ausgliedern.
Häufig werden Inhaltsverzeichnisse manuell erstellt oder sogar in einem gesonderten Dokument erstellt. Dieses sollte man unbedingt vermeiden und besser die Word-Funktionalitäten nutzen, die zu diesem Thema bereitstehen.
Word schafft es nämlich selbst, automatisch ein Inhaltsverzeichnis zu erstellen, wobei alle weiteren Veränderungen im Dokument (z.B. Seitenzahlveränderungen, Änderungen der Kapitelüberschriften) im Verzeichnis übernommen werden. Somit spart man sich viel Zeit und Nerven bei einer Überarbeitung seines Dokumentes.
Über "Einfügen>Referenz>Index und Verzeichnisse..." kommt man zu den Einstellungsmöglichkeiten, die man bei der Inhaltsverzeichniserstellung benötigt. Im Word-Dokument müssen einfach nur die Kapitel bzw. Absätze mit entsprechenden Formatierungen versehen sein. Die Formatierung der Überschriften im Word-Dokument müssen die passenden Dokumentenebenen aufweisen. Dann wird automatische ein wohl strukturiertes Inhaltsverzeichnis hinzugefügt.
Todsünde 9
So kommt Ihr zu der Einstellung "Index und Verzeichnisse...".
Einstellungen vornehmen
Hier könnt Ihr euer Inhaltsverzeichnis konfiguieren und anschlie0ßend mit "OK" erstellen. Achtet dabei darauf, dass die Überschriften im Dokument die korrekten Ebenen und Formatierungen aufweisen.
Todsünde 10
10. Du sollst Kommentare und Änderungen nicht durch manuelle Formatierung z.B. durch Farbänderungen oder andere direkte Formatierungen kennzeichnen.
Möchte man zum Beispiel in seiner Hausarbeit noch etwas zu einem späteren Zeitpunkt einfügen, so sollte man es nicht manuell eingeben, z.B. indem man die Farbe des Textes als Kennzeichen dafür ändert. Dass es auch die anderen Teammitglieder verfolgen können, sollte man einen Kommentarerstellen.
Kommentare fügt man ein, indem man unter "Einfügen" auf "Kommentare" geht. Dann erscheint eine Art Sprechblase an der Seite, in die man seine Botschaft eintragen kann. So ist alles stets übersichtlich.
Markup
Wenn man ein Word Dokument mit Markup's in eine PDF Datei umwandeln möchte, so sollte man zunächst die Markup's entfernen. Über Ansicht und Markup lässt sich dies ganz einfach realisieren.
PDF in Word erstellen
In einem Teil des Praktikumsauftrags sollten wir die zu erstellende Hausarbeit in ein PDF Dokument umwandeln.
Auf den Screenshots zu PDF wird gezeigt, wie das gemacht wird. Auf jeden benötigt man einen PDF Drucker, den man sich im Netz herunterladen kann (PDF Drucker) und Ghostscript.
Wenn alles vorhanden ist und man ein Word Dokument in ein PDF Dokument umwandeln möchte, so geht man zunächst auf "Datei". Dann wählt man "Drucken" aus und in dem sich öffnenden Fenster stellt man den Drucker ein. Dort müsst ihr euren heruntergeladenen PDF Drucker einstellen. Der Rest erledigt sich dann wie von selbst, wenn ihr erstmal die Qualität eingestellt habt und auf "Ablegen" gedrückt habt. Ihr könnt eure PDF Datei dann an einem Ort eurer Wahl speichern.
Bis bald
Hier wollen wir nun erstmal enden. Wir hoffen sehr, dass wir euch im Umgang mit MS Word weiterhelfen konnten. Falls ihr Fragen oder Kommentare habt, dann nutzt doch das Tab "Kommentare" unter Home - Feedback.
Bis bald sagen
FirstStep
Photos
Cartoon
Einzug
Den Einzug benutzt man um Absätze einzurücken. Man stellt ihn unter "Format" und "Absatz"ein.
Seitenränder
Die Seitenränder stellt man über Datei und Seite einrichten ein.
Seitenumbruch
Den Seitenumbruch stellt man über manuellen Umbruch ein.
Herumformatieren
Silbentrennung
Silbentrennung lässt die Wörter in einem Text mit dem Format Blocksatz nicht soweit auseinanderstehen und verschönert somit das Gesamtbild. Man stellt sie unter Extras und Sprache ein.
Silbentrennung
Silbentrennung lässt die Wörter in einem Text mit dem Format Blocksatz nicht soweit auseinanderstehen und verschönert somit das Gesamtbild. Man stellt sie unter Extras und Sprache ein.
Formatierung
Über Format und Formatvorlagen kann man ein Dokument gewünschter Wahl strukturieren. Mit dieser Option, können Formatvorlagen erstellt und geändert werden.
Überschrift
Überschriften werden mit Formatvorlagen ebenso erstellt und geändert wie der Standardtext.
Nummerieung und Aufzählungszeichen
Listen mit Hilfe von "Nummerierung und Aufzählungszeichen" erstellen
Seitennummerierung
In Word kann man Seitenzahlen durch die gleichnamige Option im Bereich Einfügen erstellen. Diese können in Kopf- oder Fußzeile sein, was je nach Wunsch eingerichtet werden kann.
Kommentare
Kommentare erstellt man über "Einfügen". Dann erscheint eine Art Sprechblase.
Markup
Markups kann man einfügen oder entfernen über Ansicht nd Markup.
PDF erstellen
Hier nochmal der PDF- Drucker.
PDF erstellen
Um eine PDF aus einem Word Dokument zu erstellen, benötigt man die Option unter Datei, die Drucken heißt. Dort wählt man den PDF Drcker aus und entscheidet, welche Auflösung es haben soll.
Cartoon
