• Protopage-Zentrale von Elektronische Dokumente

• Zum Protopage-Tutorial

• Sun April 22 - Praktikum B2 Online "Word"

• Sun May 6 - Praktikum B3 Online "Html"

Unser Logo besteht aus zwei Tangramme, also Figuren und Gegenständen, die aus 7 Dreiecken gelegt werden. Passend zum Studiengang haben wir uns für eine Person entschieden, die eine Kamera hält.

Willkommen auf unserer Word-Seite!!

Hier findest du Hilfreiches für die Erstellung von Word-Dokumenten.

Im ersten Teil haben wir ein paar Lernfilme, sowie wichtige Links für dich zusammengestellt.

Danach haben wir uns typischen Fehlern bei der Bearbeitung von Dokumenten und der Frage, wie man sie vermeiden kann, gewidmet. Außerdem haben wir kurz die Richlinien für das richtige Layout zusammengetragen.

Ein weiterer Teil dieser Seite beschäftigt sich mit dem Erstellen von Dokument- und Formatvorlagen. Du erfährst alles darüber wie man sie selber erstellt, es steht dir hier aber auch ein fertig formatiertes Dokument zum Download bereit.

Im dritten Teil erfährst du etwas über die Arbeit mit Dokumentvorlagen.

Wir wünschen dir viel Spaß beim Lesen und Lernen!

Dein JMMQ Team.

Hier könnt ihr 4 verschiedene Teile einer Hausarbeit downloaden, in denen wir die typischen Fehler (nach der "Todsünden"-Liste) kommentiert und anschließend berichtigt haben.

Teil 1 kommentiert (Maria)

Teil 1 berichtigt (Maria)

Teil 2 kommentiert (Marina)

Teil 2 berichtigt (Marina)

Teil 3 berichtigt (Jana)

Teil 3 kommentiert (Jana)

Teil 4 kommentiert (Quynh)

Teil 4 berichtigt (Quynh)

Hier einige Vorschläge zur euren Deckblattgestaltung:

Deckblatt 1 (Maria)

Deckblatt 2 (Marina)

Deckblatt 3 (Jana)

Deckblatt 4 (Quynh)

Word-Tutorial auf Deutsch

 

Word von grundauf erklärt. komplette Erläuterung als zip-Datei downloadbar

 

Online-Hilfe zu Word 2000, 2003, XP und 2007 von Microsoft (deutsch)

Hier haben wir mit Hilfe einer Power Point Präsentation dokumentiert wie man Dokument- und Formatvorlagen erstellt und mit ihnen arbeitet.
Außerdem haben wir auf diesem Wege auch gleich eine Dokumentvorlage für Hausarbeiten erstellt, die du dowloaden kannst, wenn du möchtest. Wie diese Vorlage entstanden ist, zeigen wir auch in einem kleinen Film. Viel Spaß!

PPP zur Erstellung einer Dokumentvorlage
Film "Erstellung einer Dokumentvorlage"
Download Dokumentvorlage "Hausarbeit.dot"

Wir haben die hier zum Download stehende, von uns erstellte Dokumentvorlage "Hausarbeit.dot" genutzt um die vier von uns korrigierten Teile einer Hausarbeit zusammenzufügen.
Öffnet dazu einfach die Vorlage und fügt die Einzelteile ein. Anhand der unterschiedlichen Farben der Kommentare, könnt ihr unter Anzeigen -> Bearbeiter erkennen, welches Teammitglied welchen Teil bearbeitet hat.

Wir stellen euch hier zum Download einmal die komplette Hausarbeit als Word-Dokument mit Markups und einmal als pdf-File ohne Markups zum Download bereit. (PDF-File: Seite 1; 8-9 von Maria, 2-4 von Marina, 5-7 von Jana und 8-9 von Quynh bearbeitet.)

Wichtig für das Layout sind folgende Punkte:

Ränder:
- links 4 cm (für den Heftrand)
- rechts 3 cm
- oben 2,5 cm
- unten 2,5 cm

->Abweichungen hiervon nur, wenn die Einbindung von Tabellen oder Grafiken erforderlich ist<-

Zeilenabstand, Schriftart und Schriftgröße
- Zeilenabstand 1,5
- Schriftart: Times New Roman, Bookman Old Style, Garamond
- Schriftgröße: 12

Als erstes öffnest du ein neues Worddokument.
Bevor du mit dem Schreiben beginnst, solltest du es einrichten (siehe Richlinien für die Erstellung eines Dokuments).

Danach solltest du dir eine Formatvorlage einrichten. Dies wird dir genau im Punkt 5 erklärt.

Nun kannst du dein Deckblatt erstellen. Ein Bsp. wie dies ausehen könnte findest du im Widget "Deckblätter".

Nun kannst du mit deinem Text beginnen.

Vergiss nicht, dass du ein Inhaltsverzeichnis anfertigen solltest. Wie dies funktioniert, wird im Punkt 9 erläutert.

Am Ende musst du dein fertiges Dokument nur noch speichern (Datei -> Speichern Unter...)

Eine fertige Dokumentvorlage findest du links.

Beachte bei der Erstellung, bzw. dem Schreiben des Textes immer die "Todsünden"-Liste!

Wenn ihr auf Ansicht -> Symbolleistern -> Überarbeiten -> Anzeigen -> Bearbeiter klickt, seht ihr, wer das Dokument überarbeitet hat.

Was ist HTML?
HTML heißt ausgeschrieben Hypertext Markup Language oder in deutsch Hypertext Auszeichnungssprache. Es ist eine Beschreibungssprache für Webdokumente und definiert die Struktur eines Dokuments. Es beschreibt zum Beispiel an welcher Stelle sich ein Bild befindet, wo Text steht und wie eine Tabelle strukturiert ist.

Was kann HTML???
HTML ist keine echte Programmiersprache sondern ein statische Sprache, man spricht nicht von programmieren sondern eher von notieren. Da es eine Struktursprache ist findet man dynamische Elemente wie bewegte Texte, Ausklappmenüs oder bewegte Bilder rein durch HTML nicht. Für diese Dinge sind andere Sprachen wie als Beispiel Java Script nötig.

Zur Erklärung einiger auf den Websiten verwendeter Begriffe:
Als Tags bezeichnet man feststehende, definierte Terme und Definitionen von HTML-Funktionen (z.B. <br> für einen Zeilenumbruch).
Ein HTML-Dokument besteht immer aus 2 Teilen: Head und Body.
Im Head sind Metainformationen über das gesamte Dokument festgelegt, wohingegen im Body der Inhalt beschrieben wird.

Jedes HTML-Dokument muss mit folgenden „Tags“ (Befehlen) beginnen:

<html>

<head>

Hier stehen nun Meta-Informationen über das Dokument, so z.B. der Titel und eine Inhaltsbeschreibung (content).

Geschlossen wird dieser Bereich über das Tag </head>

Nun öffnet man den Body, den Teil des Dokument, in dem der später sichtbare Inhalt angegeben wird:

<body>

Dieser Teil enthält meist mehr Zeilen als der Header.

Geschlossen wird auch dieser „Bereich“ (wie ALLE Tags in HTML) durch

</body>

Das Muster zum Schließen ist also </tag>!

Folglich wird am Ende das gesamte Dokument durch </html> geschlossen.

Genauere HTML-Tags findet ihr in den nachfolgenden Übersichts-Widgets. Beachtet dabei,

dass die "Grundbefehle" (1.) bis auf die Kommentare IN JEDEM HTML_DOKUMENT enthalten sein MÜSSEN!

Hier eine von uns zusammengestellte Übersicht der wichtigsten HTML-Befehle zum Download.

1.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 (Hierarchische Struktur) der HTML-Elemente. Entscheidet ist außerdem, Elemente an der richtigen Stelle einsetzen (Head- oder Body-Bereich).

2. Du sollst darauf achten, „well-formed HTML“ Seiten zu erstellen II: „HTML-Tags“
a. Ein Start-Tag wird immer mit dem dazugehörigen End-Tag geschlossen.

b. Aus Kompatibilitätsgründen zu XHTML wird empfohlen auch Elemente ohne Inhalt
wie z.B. <br>, <img> immer zu schließen: <br />, <img />

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

d. Setzen Sie Attributwerte immer in Anführungsstriche (z.B. src=“blume.jpg“ oder
alt=“Das Photo zeigt eine Sonnenblume“)

e. Verwenden Sie immer Entitäten (z.B. für „ä“

Tag	Bedeutung
1. Grundbefehle
<html> </html>	Erstes Tag jedes Dokument, macht Browser klar, dass es sich um HTML-Dok handelt
<head> </head>	enthält Meta-Informationen (und mehr) über das Dokument
<meta> </meta>	Hier findet man die Meta-Informationen
<titel> </title>	Titel der Seite kommt hierhin
<body> </body>	Inhalt der Seite
<!-- -->	Kommentar
2. Absatzformate
<div>...</div>	umschließt mehrere Absätze, die mehrere Elemente enthalten können
<span>...</span>	Umfasst kürzeren Abschnitt, der mit CSS später genau angesprochen werden kann
<p> </p>	Absatz
<br> </br>	Zeilenumbruch
<h1> </h1>	größte Überschrift
<h6> </h6>	kleinste Überschrift
3. Listen
<ol> </ol>	Geordnete
<ul> </ul>	Ungeordnete
<li> </li>	Listeneintrag
4. Logische Tags
<cite>...</cite>	Zitat
<code>...</code>	Quellcode
<em>...</em>	Hervorhebung
<strong>...</strong>	Besondere Hervorhebung
<samp>...</samp>	Beispiel
<tt>...</tt>	Beispiel
<var>...</var>	Variablenname

3. Du sollst darauf achten „well-formded HTML“ Seiten zu erstellen III: korrekte Hyperlinks
a. Für die Verlinkung von elektronischen Dokumenten in einer HTML-Seite ist die korrekte
Pfadangabe wichtig.

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

c. Ebenfalls essentiell ist die Groß- und Kleinschreibung der verlinkten Dokumente.

4. Du sollst die strikte Trennung von Inhalt und Layout beachten.
HTML strukturiert eine Seite und beschreibt nicht wie sie aussieht. Ausschließlich CSS
dient zur Gestaltung der Seite. Beachten Sie dies schon mit Beginn der Erstellung, eine
nachträgliche Anpassung ist oft unnötig und zeitaufwändig.

5. Du sollst nicht mit Attributen oder Elementen formatieren, die den Status „deprecated“
haben.
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 Physikalischen Auszeichnung
bzw. Visuellen Auszeichnung (z.B. „i-Tag“ oder „b-Tag“).

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

CSS
CSS ist die Abkürzung für Cascading Style Sheets. Diese Sprache ermöglicht die optische  und physikalische Gestaltung  von html-Seiten.
Um z.B. mehrere miteinander verlinkte Seite einer  "Gesamthomepage"  gleichartig aussehen zu lassen, ist es einfacher einmal eine CSS-Datei mit den nötigen Angaben anzulegen.  In HTML  jede Seite  "per Hand" zu gestalten  ist demnach a)  umständlich und  b) unnütz.
Aus diesem Grund sollte man sich  daran halten,  Inhalt und Layout (also HTML und CSS) zu trennen! (siehe Todsünde 4)

Hier findet ihr nützliche Links zu  CSS:
CSS Grundlagen und Befehle (ausführlich)
Wichtigste CSS-Befehle
Befehle zur Positionierung
Befehle zur Farb-und Hintergrundgestaltung
Nützliches TOOL um den Hex-Code von Farben zu erfahren (sehr umfangreiche Palette)
Tutorial zum Download
Webdesign mit CSS (umfangreich)

7. Du sollst auf zu viele Animationen, unterschiedliche Textfarben und Schriftarten verzichten.
Zu viel verschiedene Formatierungen und blinkende Layoutelemente können leicht Verwirrung
schaffen, sind nicht immer lesbar und lenken vom Inhalt ab.

8. Du sollst für z.B. Grafiken und Formularelemente immer auch eine Beschreibung mittels
„alt-Attribut“ hinzufügen.
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.

Vorteile

• Einheitliche Layouts
• Schnelle Layout-Änderungen
• Schnellere Ladezeiten, da das Stylesheet nur einmal geladen wird und dann im Cache liegt
• weniger Trafficverbrauch, weil Dateien meist sehr viel kleiner ausfallen, was weniger Server-Hardware-Verschleiß und Traffic-Überschreitungen verursacht (gut bei langsamen Internetverbindungen)
  
• unnötiges Markup im HTML-Code verschwindet, da keine verschachtelten Tabellen, <font>-Tags usw. verwendet werden müssen
• Optimierung für verschiedene Geräte (Druck-Stylesheets, PDA-/Handy) möglich
• logischer strukturierter Code hilft beim Bearbeiten, weil es übersichtlicher ist
• Lesezeichen/Favoriten zeigen auch wirklich auf die angezeigte Seite und nicht auf das Frameset –>  Anfängerfreundlich
• barrierearm, wichtig bei Seiten die der BITV unterliegen oder unterliegen wollen

Nachteile

• alte Browser verstehen keine oder nur teilweise Stylesheets, daher siehst da nicht hübsch aus – dafür wird die Struktur durch richtig angewendeten Code verdeutlicht
• der Internet Explorer hat Fehler in der Berechnung von Größen, die mit sogenannten Hacks ausgemerzt werden müssen/können – nicht so schwer, ist man einmal im Thema hat man es bald raus
• ggü. Frames: aufwendig wenn sich Navigationslinks ändern, kann man aber mit Includes (phase 5, Freeware für Privatnutzer. Download hier) verwalten (daher auch die Wichtigkeit von strukturiertem Code)
• möglich, dass die Einarbeitung lange dauert

Quelle: http://michelb.de/weblog/vor-und-nachteile-von-semantischen-html-code-css

Das ALT Attribut soll einen alternativen (!) Text für ein Bild enthalten um den Inhalt des Bildes auch dann zugänglich zu machen, wenn der User-Agent (z.B. der Browser) keine Bilder unterstützt oder der Benutzer das automatische Laden von Bildern deaktiviert hat. User-Agents die mit Bildern nichts anfangen können sind u.a. Robots von Suchmaschinen, die zwar Bilder nicht verstehen, aber den ALT Text in ihre Datenbank aufnehmen können Ein sinnvoller ALT Text kann also auch die Plazierung in den Suchmaschinen positiv beeinflussen. Auch Browser die auf einem einfachen Text-Terminal laufen wie z.B. Lynx oder Browser für Blinde, die den Text in Brailleschrift umwandeln, damit der auch für Blinde zugänglich ist oder auch die langsam auf den Markt kommenden Voicebrowser, die Text in Sprache verwandeln, welche man dann über den Computer oder auch über ein Telefon hören kann sind auf vernünftige ALT Attribute angewiesen. Eine Gruppe an die man aber auf jeden Fall denken sollte sind die Leute, die in ihrem Browser das automatische Laden von Bildern absichtlich deaktiviert haben, weil sie z.B. nur mit einem langsamen Modem unterwegs sind.

(Quelle:  http://www.bjoernsworld.de/html/alt-text.html)

9. 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.
a. Nicht alle HTML-Eigenschaften und CSS-Regeln funktionieren in jedem Browser. Es
handelt sich dabei meist um zusätzliche Layouteffekte. Versuchen Sie sich auf die
gängigen CSS-Regeln zu beschränken, die auf allen Browsern funktionieren. Die ggf.
ein wenig abweichende Darstellung einer Seite auf unterschiedlichen Browsern ist
dabei nicht gemeint. (In den meisten Werken zu HTML & CSS sind CSSReferenzkarten
enthalten, die anzeigen welche CSS-Regeln von den gängigen Browsern
unterstützt werden).
b. Horizontale Scrollleisten sind nicht benutzerfreundlich. Durch Verwendung von h. S.
kann nicht ausgeschlossen werden, dass der Inhalt teilweise oder gar nicht wahrgenommen
wird. Abhilfe schafft eine feste horizontale Seitenbeschränkung und die automatische
Verwendung von vertikalen Scrollleisten in CSS.

Der einfachste Weg eine separate CSS-Datei in euere HTML-Dokumente einzubinden, ist wohl folgenden Link:

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

     in den HEAD-Bereich der betreffenden HTML-Dokumente einzufügen!




10. Du sollst Metainformationen sinnvoll einsetzen.
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, Spam).

Ihr könnte sowohl CSS- als auch HTML-Dateien mit dem Editor erstellen und bearbeiten, der zur Grundausstattung jedes Windows-PC gehört (meist Untermenü Zubehör). Spezieller Programme erleichtern die Arbeit jedoch teilweise erheblich.
So haben wir zur Erstellung von HTML-Seiten mit phase5 und zur Erstellung der CSS-Dateien mit TopStyle Lite gearbeitet.

Hier stellen wir euch kommentierte und berichtigte Profile fiktiver AMW-Studenten zum Download zur Verfügung:

Profil 1 kommentiert (Maria)
Profil 1 berichtigt (Maria)
Profil 2 kommentiert (Jana)
Profil 2 berichtigt (Jana)
Profil 3 kommentiert (Marina)
Profil 3 berichtigt (Marina)
Profil 4 kommentiert (Quynh)
Profil 4 berichtigt (Quynh)

(um den Quelltext zu sehen, einfach rechte Maustaste klicken und Unterpunkt "Seitenquelltext anzeigen" auswählen)

Wir haben diese Profile durch unsere persönlichen Angaben ergänzt und auf eine Startseite unseres Teams verlinkt:
So sieht das Endergebnis aus!

Quelle: http://www.weger-software.com/easyhtml.gif

<b> bewirkt fette Schrift

Alt-Attribut als Alternativtext-Beschreibung

Einfach auf "edit" klicken, gebenenfalls "HTML" anwählen und die Link-Adresse in das Skript hineinkopieren.

Einfach auf "edit" klicken, gebenenfalls "HTML" anwählen und die Link-Adresse in das Skript hineinkopieren.