List of public pages created with Protopage

Unsere Basisstation

Bookmarks

Unsere "Kontaktpersonen"

Rich sticky notes

Let´s talk about us...and our Protopage!



Seit gespannt und macht euch bereit,
denn nun wird es höchste Zeit,
gemeinsam mit uns die Flügel auszubreiten
und durch unsere Protopage zu gleiten.

Professor Kreuzbergers Auftrag erfüllt und darüber nachgedacht,
haben wir, Jule und Patricia, uns an die Arbeit gemacht.

Was denkt ihr? Haben wir den Auftrag erfolgreich ausgeführt?
Bitte klickt nach unten und kommentiert!

Calendars

Wichtiges Hilfsmittel für Agenten!

Web widgets

Der Auftrag

Photos

2 Engel für ElDok

2 Engel für ElDok - Volle Power

Word

Rich sticky notes

Nicht verzagen, Engel fragen!!!

Auch wir Engel müssen MS Word verstehen,
sonst würden wir bei unseren Aufträgen untergehen.
Um unser Wissen mit euch zu teilen,
zögert nicht und genießt die folgenden Zeilen.

MS Word - Was ist das eigentlich.!?

Microsoft Word ist ein Textverarbeitungsprogramm der Firma Microsoft für die Windows-Betriebssysteme und Mac OS. Es ist Teil der Office-Suite Microsoft Office sowie der auf private Nutzer zugeschnittenen Programmsammlung Microsoft Works-Suite, wird aber auch einzeln verkauft.

Unsere Connections

Natürlich sind auch wir angewiesen auf gewisse Quellen,
nutzt sie doch und stärkt eure Gehirnzellen:

http://mypage.bluewin.ch/reprobst/
http://www.user-archiv.de/ms-word.html
http://office.microsoft.com/de-de/word/FX100649251031.aspx

Index - Leitsystem für Engel

> 1st chapter: ZEILE / ZEILENUMBRUCH                          *Tipps zu Microsoft Word*

> 2nd chapter: SPALTEN

> 3rd chapter: VORLAGEN                                                DIE 10 TODSÜNDEN

> 4th chapter: FORMULAR

> 5th chapter: TEXTFELD

> 6th chapter: GRAFIK / OBJEKT

> 7th chapter: TEXTMARKE

> 8th chapter: DOKUMENTEIGENSCHAFTEN

Geheime Dokumente - So könnt Ihr sie erstellen!




So erstellt man eine einfache Dokumentvorlage!



- Befehl: "Datei - Neu - Vorlage" für das neue Dokument

- bei Bedarf:


Seht hier ein Beispiel für eine Dokumentvorlage: Wie erstelle ich eine Hausarbeit?



Unsere Informationsquellen


Folgende Quellen wurden vom Montag, den 19.11.2007 bis Mittwoch, den 21.11.2007 genutzt:


http://de.wikipedia.org/wiki/Microsoft_Word

 http://www.karin-schmitt.de/dokvorlage.html

http://mypage.bluewin.ch/reprobst/FrmSet.htm?Index

http://office.microsoft.com/de-de/templates/CT101527321031.aspx?av=ZWD

http://www.pc-magazin.de/praxis/cm/page/page.php?table=pg&id=2251

http://www.tu-ilmenau.de/fakmn/Lehre.empk-lehre.0.html

HTML/CSS

Rich sticky notes

Lasst euch von unseren Flügeln leiten!

Auch HTML und CSS gehören im Umgang mit dem Intenet dazu,
drum lassen wir euch auch hiermit nicht in Ruh.
Lest nach wie HTML und CSS funktionieren
und scheut euch nicht davor, es selber auszuprobieren.

Informationsquellen

Tipps und Tricks für CSS

Das kleine Benutzehandbuch für HTML und CSS hier

Beispiel für das Einrichten einer Website

Wie erstelle ich eine HTML Seite?

Einführung

Was ist HTML?


Ausgeschrieben bedeutet HTML: Hypertext Markup Language (HyPertext Auszeichnungssprache).

Es ist eine Auszeichnungssprache für Webdokumente, welche die Struktur eines Dokumentes definiert. (vgl. Jan Winkler, http://www.html-world.de/program/html_1.php)


Was kann HTML?


HTML ist keine Programmiersprache. Man spricht hier eher vom Notieren. Insgesamt kann man mit HTML strukturieren, jedoch keine Dynamik, wie z.B. fliegende Bilder oder ähnliches einbringen. Dafür gibt es andere Sprachen, wie z.B. Java Script.


Was braucht man für HTML?


Für HTML wird ein Browser benötigt. Dieser liest das Dokument ein, wertet es aus und zeigt es schließlich gemäß der vorhandenen Definitionen an. Da es sich bei den HTML Dateien um ASCII Dateien handelt, ist für das Schreiben mit HTML ein Texteditor oder Editoren, die speziell für HTML ausgerichtet sind, von Nöten.


Was ist CSS?


CSS ist eine Sprache für strukturierte Dokumente. Sie wird vor allem zusammen mit HTML und XML eingesetzt. CSS legt dabei fest, wie ein besonders ausgezeichneter Inhalt oder Bereich dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als Gruppe erkannt werden können. Man zeichnet im Dokument also die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird.

Wichtige Begriffe bei HTML

Elemente und Tags:


Ein Element ist eine Einheit, die eine bestimmte Struktur oder Objekt darstellt. Ein Element ist z.B. ein Bild oder ein Button, aber auch ein Absatz.

In HTML gibt es eine ganze Reihe von Elementen die verwendet werden können.
Außerdem gibt es noch den Begriff "Tag". Ein Tag ist im Prinzip auch ein Element. Der Unterschied liegt in der Begrifflichkeit: Ein Element ist die Gesamtheit eines bestimmten Bereiches und wird meist durch zwei Tags beschrieben. Mit dem ersten Tag beginnt auch der Bereich des Elements. Ist der erste Tag (auch öffnender Tag genannt) abgeschlossen, folgt der Elementinhalt oder "Gültigkeitsbereich". Soll der Elementinhalt abgeschlossen werden, folgt der zweite (schließende) Tag. Da es bei manchen Elementen vorhersehbar ist, dass diese keinen Elementinhalt haben werden (z.B. bei Bildern, Buttons oder Zeilenumbrüchen), gibt es auch Elemente die nur einen Tag benötigen. Man nennt diese "leere Elemente".


Tags notieren:


Ein Tag wird immer mit einem Kleinerals-Zeichen (<) eingeleitet. Diesem folgt der Elementname (man könnte auch sagen Tag-Name). Geschlossen wird der Tag wiederum mit einem Größerals-Zeichen (>). Damit ein Unterschied zwischen öffnendem und schließendem Tag ersichtlich wird, wird vor dem Namen des schließenden Tags ein Slash (/) gesetzt. Bsp.: <MeinElement> Ich bin Elementinhalt. </MeinElement>



Attribute und Werte


Ein Attribut ist eine bestimmte Eigenschaft eines Objektes. So ist z.B. ein Attribut eines Bildes dessen Zieldatei oder dessen Größe. Attribute werden immer innerhalb des öffnenden Tags aber nach dem Elementnamen notiert. Ein Attribut setzt sich dabei zumeist aus einem Attributnamen und einem Wert (z.B. die Größe des Bildes in Pixel) zusammen. Dabei wird als erstes der Attributname notiert, gefolgt von einem (=) - Zeichen. Anschließend folgt der Wert innerhalb von doppelten Anführungszeichen .

Bsp.:<Bild Hoehe="200 Pixel" Breite="430 Pixel"> ... </Bild>



Universalattribute:



Bei HTML sind die Attribute fest definiert. Einige Attribute sind bei HTML sehr wichtig. Dies sind:



Attributname

Beschreibung

id

Als Wert wird hier eine eindeutige Identifikation notiert. Über dieses Attribut ist das Element innerhalb des gesamten Dokuments eindeutig ansprechbar.

name

Ist ähnlich zu id. Es gibt dem Element einen eindeutigen Namen innerhalb des Dokuments.

class

Ist für die Verwendung von CSS gedacht und wird später noch näher beschrieben.

style

Ist für die Verwendung von CSS gedacht und wird später noch näher beschrieben.

title

Als Wert wird hier ein beliebiger Titel notiert der für das Element verwendet werden soll. Der Titel gilt als Zusatzinformation zum eigentlichen Element.

lang

Als Wert wird ein Sprachkürzel (de, en, fr, ...) notiert. Das Attribut ist dazu gedacht, den Elementinhalt eindeutig einer Sprache zuordnen zu können.


 Da es den Rahmen sprengen würde, wenn wir euch jedes einzelne Detail zur Erstellung von HTML notieren würden und ihr trotzdem alles dazu wissen wollt, dann benutzt doch folgenden LINK.

CSS: Hauptteile definieren


Zuerst werden sowohl im HTML-Code, als auch im Stylesheet die Hauptbereiche unserer Website definiert. Im Stylesheet werden zunächst die Abmessungen (Breite u. Höhe) festgelegt. Bei den ersten Layouts ist es sinnvoll, unterschiedliche Hintergrundfarben zu vergeben, um einen ersten Eindruck vom Ergebnis zu bekommen. Folgende Bereiche sind auf den meisten Webseiten zu finden:


Header:


Im Header befindet sich meistens das Hauptmenü, manchmal klappt es beim Rollover nach unten auf ("Dropdown-Menü") und legt seine Untermenüpunkte über den Content. In vielen Fällen finden sich im Header auch Werbebanner oder einfach nur eine schicke Grafik als Blickfang.


Content / Body:


Der Contentbereich (Content = Inhalt) beherbergt die Hauptinhalte der Website. Hier finden sich oftmals kleinere Info- oder Navigationsboxen, Bilder, Textinhalte, etc.


Footer:


Im Footer am unteren Ende der Website sind meist Bemerkungen zum Copyright, Links zum Impressum etc. zu finden. Die Größe des Footers liegt i.d.R. zwischen 20 und 40 Pixeln.


Wrapper:


Der Wrapper (to wrap = verpacken, einwickeln) gruppiert alle Unterbereiche. Dadurch lassen sich die Positionen aller Elemente gleichzeitig auf der Site positionieren.

Die 10 Gebote zu HTML

Die 10 Gebote

Gebot 1

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

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

Gebot 2

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

Falls ihr nicht wisst, wie man die Sonderzeichen umwadelt, sodass sie auf der Website korrekt erscheinen, dann klickt einfach auf folgenden Link.
Dieser wandelt euch diese Sonderzeichen in entsprechende Entitäten um.

Gebot 3

Du sollst darauf achten „well-formded HTML“ Seiten zu erstellen III: korrekte Hyperlinks


Für die Verlinkung von elektronischen Dokumenten in einer HTML-Seite ist die korrekte Pfadangabe wichtig. 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. Ebenfalls essentiell ist die Groß- und Kleinschreibung der verlinkten Dokumente.

Sollte das Bild nicht auf der erstellten HTML Seite erscheinen, gilt es zu überprüfen, ob das Bild korrekt hochgeladen wurde und ob man auch den selben Namen des hochgeladenen Bildes in den Pfad übernommen hat.

(<img … src=“name.endung“>)


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


Gebot 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“).

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

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

Ein gutes Beispiel dafür, was man möglichst vermeiden sollte ist die Verwendung von Blinken im HTML Text (<span style=“text-decoration: Blink; color #00FF))“<Ich</span>)


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


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


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

Gebot 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).

Beispiele für Meta-Daten:

<meta name="description" [...]>:Beschreibung einer Seiten in einem kurzen Satz möglich
<meta name="author" [...]>: Verfasser der Seite kann aufgezeigt werden
<meta name="date" [...]>: Einsetzen des Datums des Erscheinens der Website



Video Podcasts