List of public pages created with Protopage

Mainpage

News

Tutorblog

tagesschau.de - Die Nachrichten der ARD

Bookmarks

Bookmarks panel

Member Blogs

Rich sticky notes

Bienvenido

Herzlich Willkommen
Wir sind die kubanische Orangen Melanie, Fei-Fei, Toni und Justus.

Mit unserem Frosch Juan-Carlos, den ihr füttern könnt,
indem ihr ins Fenster klickt.        

Calendars

Calendar

Photos

Justus

Fei-Fei

Melanie

Toni

MS Word

Bookmarks

Bookmarks

Word Templates

Plain sticky notes

Hallo und Willkommen...

... bei Word für Dummies! Wir möchten euch hier eine kurze Übersicht über Word geben. Damit ihr auch morgen noch gute Hausarbeiten abgeben könnt!

Dokumentvorlage

Mit den folgenden Schritten zeigen wir euch, wie man eine Dokumentvorlage erstellt. (Erstellt mit Word 2007.)

Schritt 1

Erstellen des Deckblatts.

Schritt 2

Bearbeiten des Deckblatts, durch einfaches klicken in die eckigen Klammern. (Bei Word 2007 wird diese Seite automatisch erstellt.)

Schritt 3

Erstellen des Inhaltsverzeichnisses.

Schritt 4

Formatieren der Überschriften, in der entsprechenden Größe, damit sie im Inhaltsverzeichnis an der richtigen Position stehen.

Schritt 5

Nachdem das Dokument in Kapiteln eingeteilt wurde, kann man das Inhaltsverzeichnis mit Hilfe des Kontextmenüs über die rechte Maustaste aktualisieren.

Schritt 6

Bei der Aktualisierung des Inhaltsverzeichnisses kann ausgewählt werden zwischen: - nur die Seitenzahlen aktualisieren oder - das komplette Inhaltsverzeichnis

Schritt 7

Erstellen der Kopf- und Fußzeile.

Schritt 8

Bearbeiten der Kopf- und Fußzeile. Die Kopfzeile enthält den Titel des Dokuments, die Fußzeile den Namen des Autors und die Seitenzahl.

Schritt 9

Erstellen des Literaturverzeichnisses.

Schritt 10

Erstellen einer Quellenangabe.

Schritt 11

Mit Hilfe der Quellenangabenfunktion, kann alles zur Quelle angegeben werden. Bsp. eines Buches: Autor, Buchtitel, Veröffentlichungsjahr, Verlag, Sitz des Verlages

Schritt 12

Über das Kontextmenü ist eine Aktualisierung der Quelleangaben möglich.

Schritt 13

Bestimmen der Seitenränder.

Schritt 14

Breite der Seitenränder angeben.

Schritt 15

Das Dokument als "Word 97-2003 Template"(!) speichern, damit es von allen, die an diesem Dokument arbeiten, mit der richtigen Formatierung geöffnet wird.

Word-Sünden

Zum Schluß noch einen kurzen Überblick über die 10 Word-Sünden.

1. Word-Sünde

Das Einrücken von Zeichen nicht mit der "Leertaste" oder "Tab" realisieren.

Besser:

Den Texteinzug anpassen.

2. Word-Sünde

Nicht jede Zeile mit der Taste "Enter" beenden, denn diese ist nur für Abschnitte gedacht.

Besser:

Word macht den Zeilenumbruch automatisch. Ein manueller Zeilenumbruch kann mit "Shift + Enter" realisiert werden.

3. Word-Sünde

Seitenumbrüche ebenfalls nicht durch "Enter" eingeleitet werden.

Besser:

Eine manueller Seitenumbruch kann über "Menü -> Einfügen -> Manueller Umbruch" oder über "Strg + Enter" realisiert werden.

4. Word-Sünde

Trennstriche nicht mit der "Bindestrichtaste" einfügen.

Besser:

Richtige Trennstriche können über "Menü -> Seitenlayout -> Silbentrennung" oder mit "Strg + Bindestrichtaste" eingefügt werden.

5. Word-Sünde

Den Text nicht zu oft formatieren. (Direkte Formatierung)

Besser:

Die Formatvorlagen von MS Word benutzen.

6. Word-Sünde

Listen nicht mit "Sonderzeichen" oder der "Bindestrichtaste" erstellen.

Besser:

Die Listenformatvorlagen von MS Word benutzen.

7. Word-Sünde

Ein Dokument nicht rein visuell gliedern, z.B. durch römische oder arabische Ziffern.

Besser:

Gliederungsebenen verwenden, z.B. durch formatieren in Überschriften 1, Überschrift 2, usw.

8. Word-Sünde

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

Besser:

Die Kopf- und Fußzeile über "Menü -> Ansicht -> Kopf- und Fußzeile" erstellen.

9. Word-Sünde

Inhaltsverzeichnisse nicht manuell erstellen und auch nicht in ein seperates Dokument ausgliedern.

Besser:

Die MS Word Formatvorlagen für Inhaltsverzeichnisse benutzen.

10. Word-Sünde

Kommentare und Änderungen nicht durch eine manuelle Formatierung kennzeichnen, z.B. Farbänderungen.

Besser:

Den "Überarbeitungsmodus" benutzen.

Photos

Bild zu Schritt 1

Bild zu Schritt 2

Bild zu Schritt 3

Bild zu Schritt 4

Bild zu Schritt 5

Bild zu Schritt 6

Bild zu Schritt 7

Bild zu Schritt 8

Bild zu Schritt 9

Bild zu Schritt 10

Bild zu Schritt 11

Bild zu Schritt 12

Bild zu Schritt 13

Bild zu Schritt 14

Bild zu Schritt 15

HTML & CSS

Plain sticky notes

Herzlich Willkommmen!

Wir präsentieren euch hier eine Hilfe für den Umgang mit HTML & CSS, damit euch das Erstellen von Websites leichter fällt. Viel Spaß wünscht euch Cuba.Orange!

einige HTML Tags

<p>;</p> - Absatz <br/> - Zeilenvorschub <li>;</li> - Text des Listenpunkts <h1>;</h1> - Überschrift 1 <hr/> - Trennlinien

einige HTML Attribute

align="left" - Ausrichtung links align="center" - Ausrichtung zentral align="right" - Ausrichtung rechts size - Größe width - Breite

Entitäten: Sonderzeichen

ä -> &auml; Ä -> &Auml; ö -> &ouml; Ö -> &Ouml; ü -> &uuml; Ü -> &Uuml; ß -> &szlig; € -> &euro;

Entitäten: Spezialzeichen

Entität: Spezialzeichen: & -> &amp; ("Ampersand") < -> &lt; ("lower than") > -> &gt; ("greater than") “ -> &quot; ("Quote")

HTML & CSS

Nun möchten wir euch die 10 Gebote in der HTML Programmierung näher bringen.

Beispiel zu 2.

In M&uuml;nchen steht ein Hofbr&auml;uhaus. Dort gibt es Bier aus Ma&szlig;kr&uuml;gen.

Rich sticky notes

Einführung

HTML = Hypertext Markup Language

- HTML berruht auf SGML
- populärste Markupsprache
- 1989 von Tim Bernes-Lee entwickelt
- ist ein plattformübergreifendes, lizensfreies, herstellerunabhängiges und jedem zugängliches Format für das Internet
 
CSS = Cascading Style Sheets

- „Ein Stylesheet ist eine Reihe von Anweisungen, die beschreiben, wie bestimmte    Elemente eines HTML-Dokumentes ausgegeben werden sollen.“ (Laborenz )
- getrennte Notation von Formatierungs- und Layoutanweisungen in einem Stylesheet
- CSS bestimmt das Aussehen des HTML Dokuments, wie z.B. Farbe, Schriftarten, Ränder, Linien u.s.w.

Unterschied zwischen HTML & CSS:
HTML ist dazu da um Inhalte zu strukturieren.
Mit CSS wird der strukturierte Inhalt formatiert.

Gruppenwebseite

Unsere Aufgabe war es eine Webseite über unsere Gruppe zu gestalten, die wir euch hier zum Angucken zur Verfügung stellen wollen.

Einfach dem Link folgen.

Die Seite ist nich sehr umfangreich, aber gibt euch einen kleinen Einblick in die Verknüpfung HTML mit CSS.

1. Gebot

Well formed HTML 1: Struktur

Die vielleicht wichtigste Eigenschaft einer HTML-Seite ist die Struktur. Diese formt das Grundgerüst der Seite. Die Elemente müssen stimmen und an der richtigen Stelle eingesetzt werden.

Beispiel zu 1.

Das soll der Header sein
Der Text kommt unten drunter. Hier wurden weder "<h1>" , noch das Tag "<body>" eingegeben.
Der Header unterscheidet sich so nur sehr schwer bzw. gar nicht vom body also Haupttext. Die beiden so eben genannten Tags sind die wichtigsten in einem übersichtlich gestaltetem HTML Dokument.

2. Gebot

Well formed HTML 2: Tags

In einem HTML Text kommen Elemente vor, die dafür stehen welche Funktion ein bestimmter Abschnitt im Text hat. Wenn die Tags nicht korrekt beendet werden, kann z.B. ein kompletter Text als Header angesehen werden.

Achte darum immer auf die dazugehörigen endtags!


Beispiel: zu "<h1> Überschrift </h1>".


Außerdem ist es wichtig Element und Attributnamen aus Kompatibilitätsgründen zu XHTML immer klein zu schreiben, sowie Attributwerte immer in Anführungsstrichen zu setzen.


Gerade in deutschen HTML Texten ist es wichtig auf die Entitäten zu achten, d.h. Sonderzeichen wie Umlaute in folgender Form zu notieren: ä --> "&auml;".

3. Gebot

Well formed HTML 3: Pfadangabe

Sollten Hyperlinks in einem Text verwendet werden, so muss darauf geachtet werden, dass die Links korrekt sind. Das heißt erstens keine Rechtschreibfehler enthalten sind und zweitens der Pfad zum gewünschten Dokument, Bild, o.ä. korrekt ist.

4. Gebot

Trennung von Inhalt und Layout

HTML gibt bestimmten Textelementen ihre Funktion, jedoch nicht ihr Aussehen wieder!


Angaben zur Farbe, Grösse, Schriftart usw. werden nicht gern in HTML gesehen.

Zur Gestaltung der durch HTML festgelegten Elemente dient CSS.

5. Gebot

Logische Auszeichnungen

Wie schon in 4. erwähnt, gibt HTML nur die Funktion eines Textbausteines wieder.


Wenn man z.B. ein bestimmtes Wort hervorheben möchte, also einem Wort Nachdruck verleihen möchte, so kann man das in HTML mit "<strong>" angeben.


Einfache Ausdrücke wie "<b>" für bold (also fett gedruckt) sind auch nicht gern gesehen.

6. Gebot

Keine Layout-Tabellen

Wenn man in einem HTML Quelltext vordefiniert wo welches Element später mal zu stehen hat, kann die Seite sehr unübersichtlich wirken. Auch eventuelle Änderungen zu einem späteren Zeitpunkt sind nur schwer realisierbar.

Bei korrektem Einsatz von CSS kann auf Layouttabellen komplett verzichtet werden.

7. Gebot

Übersicht

Zu viele Animationen, Schriftarten oder gar grelle Hintergrundfarben tragen nicht zu einem übersichtlichen Webauftritt bei.

Eine Website sollte ruhig und übersichtlich gestaltet werden. Zudem zeugt eine grell blinkende Webpage nicht von hoher Professionalität der Person, Firma oder Organisation die sie vertritt.

8. Gebot

Alt-Attribute

Um Grafiken, Bilder oder Formularelemente zu beschreiben sollte man sogenannte Alt-Attribute verwenden.


Diese zeigen dem Betrachter, sobald man den Cursor auf das Bild hält, gewisse Informationen an, dies kann der Titel des Bildes, aber z.B. auch das Datum einer Übersicht sein, die auf der Website publiziert wurde.

9. Gebot

Optimierungsaussagen

Bevor eine Website aufgerufen wird bekommt mal als User des Öfteren angezeigt, dass die Website für einen bestimmten Browser 'optimiert' ist. Solche Aussagen sollte man vermeiden.


Wenn eine korrekte Kombination aus HTML und CSS (Also Struktur und Formatierung) verwendet wurde, wird eine Webpage auf jedem gängigen Browser auf die gleiche Art und Weise angezeigt.

10. Gebot

Meta Informationen

Meta-Informationen müssen sinnvoll eingesetzt werden, d.h. es sollte ein gewisser Mehrwert für den Nutzer bestehen.

Eine blinkende Anzeige die einem verkündet der 1.000.000 Besucher zu sein ist z.B. eher sinnlos.

Ein Button auf der Website eines Unternehmens um Kontakt aufzunehmen kann wiederum sehr sinnvoll sein. Auch eignet sich in fast allen Fällen eine Angabe zur letzten Aktualisierung.

Hilfreiche Videos

Zum Abschluss möchten wir euch noch ein paar hilfreiche Videos zum Thema HTML & CSS bereitstellen.


Viel Spass bei eurem nächsten HTML Projekt!


Das Team von Cuba.Orange

Learn HTML Lesson 1

Learn HTML Lesson 2

Introduction to CSS editing using Firebug

Photos

HTML

CSS

Erläuterung

Beispiel zu 3.

Beispiel zu 4.

Beispiel zu 5.

Beispiel zu 6.

Beispiel zu 7.

Beispiel zu 8.

Beispiel zu 8.

So sah es in Ilmenau um 1970 aus. (Photo taken on: 25.10.2007)

Beispiel 9 - zu lange vertikale Scrollleiste

Beispiel 10

Web Projekt