List of public pages created with Protopage

Wir über uns

Bookmarks

Links

Rich sticky notes

Begrüßung

Herzlich Willkommen,

Du bist auf der Seite von
ACCE.
Wir sind ein Team der Lehrveranstaltung Elektronische Dokumente und möchten mit dieser Protopage einen Einblick in unsere eigene Website geben.

WIR - das sind Annekathrin Rudolph, Christina Dörr, Caroline Lehmann und Erik Monzer - zusammen das ACCE Team!

Du kannst uns gerne einen Kommentar hinterlassen.

1. Log Dich einfach mit dem Passwort "GAST" unten ein.
2. Klicke oben links auf die "Public Category: HOME".
3. Wähle in der "Public Category: Feedback" das Tab "Kommentare" an.


Have fun,

Dein ACCE-Team

Calendars

Calendar

Photos

A

Annekathrin Rudolph

C

Christina Dörr

C

Caroline Lehmann

E

Erik Monzer

Aufgaben

News

Tutorblog

Photos

Praktikumsdaten

Word

Bookmarks

Bookmarks panel

Rich sticky notes

Prakitkumsaufgaben - Links zur Gruppenwebspace

An dieser Stelle veröffentlichen wir alle Dateien und Dokumente, die für die Praktikumsaufgabe B2 relevant sind. Die Dateien sind auf unsere Gruppenwebspace verlinkt.

Bearbeitung der Einzelteile der Hausarbeit:

Deckblätter der einzelnen Gruppenmitglieder:

Dokumentvorlage Deckblatt:
Dokumentvorlage für ein Deckblatt in einer Hausarbeit - Wiederverwenden von festen Textbausteinen

Dokumentvorlage (Gruppenarbeit):
Dokumentvorlage für weitere Hausarbeiten

Zusammenstellung der gemeinsamen Hausarbeit

Dokument als Worddatei mit Markups
Dokument als PDF -Datei ohne Markups

Hilfestellungen zu Word

Im Folgenden möchten wir versuchen euch mit Hilfe von Screenshots den Gebrauch von Word zu erleichtern. Dazu werden wir fortan auf dieser Seite einige Tipps visuell als auch textuell darstellen.

Solltet ihr weiteres Interesse an Word haben - hier ein paar hilfreiche Links:
Film zu Word Tipps:
Video von YouTube in Englisch

Hinweise zu häufigen Fehlerquellen in Microsoft Word

Sünde 1: Du sollst Zeichen nicht mit einem Druck auf "Tab" oder die "Leertaste" einrücken

Einzüge in einem Word Dokument müssen nicht durch das häufige Drücken der Tabtaste erfolgen. Word kennt hierfür den Befehl Format - Absatz - Einzugsbestimmung. An dieser Stelle kann die Ausrichtung, der Abstand zu weiteren Formaten und eben der Einzug bestimmt werden.


Sünde 2: Du sollst einzelne Zeilen nicht durch einen Druck auf ENTER/RETURN beenden (Abschnittswechsel am Ende jeder Zeile)

Die Taste "ENTER" ist nur für das Schaffen eines Absatzes von Bedeutung, da Word den Zeilenumbruch selbständig übernimmt. Manuelle Zeitenumbrüche können in Word über den Shortcut "Shift" + "ENTER" realisiert werden.


Sünde 3: Du sollst (Seiten-) Umbrüche nicht durch mehrfaches Drücken auf ENTER/RETURN erzeugen.

Manuelle Umbrüche können in Word über den Befehl Einfügen - Manueller Umbruch eingefügt werden. In dem sich öffnendem Fenster kann zwischen Seiten-, Spalten-, und Textflussumbruch gewählt werden. Auch Abschnittsumbrüche sind durch diese Option realisierbar. Der manuelle Seitenumbruch kann auch durch einen Shortcut betätigt werden (Strg+ENTER).


Sünde 4: Du sollst Trennstriche nicht mit einem Druck auf die Bindestrichtaste einfügen.
Der Bindestrich darf nur dann allein mit der Bindestrichtaste eingefügt werden, wenn er auch nach einer Änderung des Zeilenfalls bestehen bleiben soll, d.h. wenn es sich dabei um Wortzusam­mensetzungen mit Bindestrich handelt. Wenn es sich, wie oben beschrieben, aber um Trennstriche handelt, so sollten diese mit einem Druck auf „Strg“ + „Bindestrichtaste“ erzeugt werden, weil sie bei Änderung eines Zeilenfalls verschwinden.

Sünde 5: Du sollst nicht wild im Text herumformatieren (Direkte Formatierung).
Man erkennt sie am einfachsten, wenn man im Menü auf „Format“ „Formatierung anzeigen“ klickt. Unter der Angabe der Formatierung im Fenster rechts vom Text findet man zwei weitere Optionen: „Formatvorlagenquelle kennzeichnen“ und „Alle Formatierungszeichen anzeigen“. Wenn man nun „Formatvorlagenquelle kennzeichnen“ anklickt, kann man durch das Klicken auf die einzelnen Absätze des Dokuments erkennen, aus welcher Quelle die Formatvorlage stammt. Diese Funktion zeigt an, welche Absätze des Textes direkt formatiert wurden. Daraufhin kann man diese direkte Formatierung umwandeln z.B. durch das Verwenden der entsprechenden Formatvorlage, falls es eine solche nicht gibt, kann man sie auch selbst erstellen (Klick auf „Neue Formatvorlage…“ im Menü „Formatvorlagen und Formatierung“) oder vorgegebene Vorlagen verändern (Rechtsklick auf die Formatvorlage und dann im Kontextmenü auf „Ändern“).  


Sünde 6: Du sollst Listen nicht manuell mit z.B. "Sonderzeichen" oder der Bindestrichtaste erstellen.

Um in Word Listen zu erstellen, empfiehlt es sich, die Funktion „Nummerierung und Aufzählungszeichen“ im Menüpunkt „Format“ zu verwenden. Die Registrierkarte „Listenformatvorlagen“ bietet zudem die Möglichkeit, eigene Vorlagen zu erstellen und damit Listen nach eigenen Vorstellungen anzulegen.


Sünde 7: Du sollst dein Dokument nicht rein visuell mit römischen oder arabischen Ziffern gliedern.

Unter Ansicht - Gliederung kann man sich die Gliederungsstruktur des Dokumentes anzeigen lassen und bei Bedarf Korrekturen vornehmen. Für die Überschriften der unterschiedlichen Gliederungsebenen steht bereits eine Reihe von Formatvorlagen zur Verfügung, die beliebig an die eigenen Vorstellungen angepasst werden können. Systemintern können dadurch die Textbausteine den jeweiligen Gliederungsebenen zugewiesen werden.

 

Sünde 8: Du sollst Kopf- und Fußzeilen nicht manuell durch "Copy & Paste" auf jeder Seite neu erstellen.

Seitenzahlen in Word lassen sich auf zwei unterschiedliche Weisen erstellen:  Über Einfügen - Seitenzahlen. Dort kann man dann wählen ob die Zahl rechts, links oder mittig stehen soll. Es folgt eine automatische Nummerierung. Auch über  Ansicht  - Kopf- und Fußzeile fügt man Seitenzahlen ein. In der Kopf- bzw. Fußzeile öffnet sich eine Symbolleiste in der man die Formatierung der Seitenzahlen festlegen kann. Es folgt eine automatische Nummerierung.


Sünde 9: Du sollst Inhaltsverzeichnisse weder manuell erstellen noch in ein separates Dokument ausgliedern.

In Word können verschiedene Referenzen erstellt werden - so auch Inhaltsverzeichnisse. Nutze den Pfad: Einfügen - Referenz - Index und Verzeichnisse und wähle die Anzahl der Gliederungsebenen aus. Auch die bisher verwendeten Formatvorlagen können weiterhin benutzt und an das Inhaltsverzeichnis angepasst werden.


Sünde 10: Du sollst Kommentare und Änderungen nicht durch manuelle Formatierung z.B. durch Farbänderungen oder andere direkte Formatierung kennzeichnen.

Kommentare und Änderungen im Text sollen als Kommentare am Seitenrand

dargestellt werden. Dies geschieht über die Funktion Einfügen - Kommentar. Dann erscheint ein Textfeld, in welches man den Kommentar einfügen kann. Diese Formatierung  macht bestimmte Absichten  verschiedener Autoren deutlich sichtbar. Ebenso bleibt das Dokument strukturiert und verwandelt sich nicht in ein buntes Durcheinander.


[Quelle]

Seiten einrichten

Beginnen möchten wir mit dem Bereich - Seite einrichten. Wir empfehlen euch das Dokument bereits vor Beginn der Textkörper durch Voreinstellungen zu strukturieren.

Erstellen von Kopf - und Fußzeilen

Im folgenden Abschnitt beleuchten wir das Thema - Kopf und Fußzeilen - näher. Wichtig ist uns dabei, dass ihr die Texte eurer Kopfzeilen nicht auf jeder Seite erneut durch Copy & Paste erstellt.
Denn auch in diesem Fall kennt Word eine durchaus einfachere und vor allem einmalige Formatierungsmöglichkeit.

Formatierung in Word

Im den folgenden Screenshots wollen wir euch einige Tipps rund um das Thema - Formatierung in Word - Dokumenten geben. Von der Anzeige der Formatierungen über die Kontrolle der Formatierung bis hin zu den eigentlichen Formatvorlagen.

Automatische Korrekturen und Texte

In diesem Bereich widmen wir unsere Aufmerksamkeit dem Thema - Auto Formate hiermit möchten wir euch zeigen, wie ihr mit voreingestellten Optionen bestimmte Textbausteine immer wieder einsetzen und verwenden könnt.

Überarbeitungsmodus

Im Folgenden werden wir euch mittels zweier Screenshots die Arbeit mit dem Überarbeitungsmodus veranschaulichen. Neben deiner Arbeit am Dokument kannst du damit nachvollziehen welche Formatierung du vorgenommen hast und dir diese anzeigen lassen.

Kommentare

Den nächsten Bereich widmen wir dem Thema: Kommentare. Mit Hilfe dieser Option kannst du dich mit deinen Gruppenmitgliedern untereinander verständigen ohne Auffälligkeiten im strukturiertem Dokument (z.B. Farbänderungen) vornehmen zu müssen.

Inhaltsverzeichnisse

Das nächste Thema lautet Inhaltsverzeichnisse. Hiermit möchten wir verdeutlichen, dass das Erstellen von automatischen Inhaltsverzeichnissen hilfreich für eure Hausarbeiten sein kann.

Umbrüche

Umbrüche sollen den nächsten Bereich füllen. Wichtig bei Umbrüchen ist, dass in Word Zeilenumbrüche automatisch gemacht werden. Solltest du dennoch selbt einen Zeilenumbruch machen wollen, kannst du auch den Short Cut Shift+Enter oder den Seitenumbruch mit Strg+Enter nutzen.

Listen, Absätze

Einzüge und Absätze thematisieren einen weiteren Bereich - mit dem Pfad: Word - Format - Absatz kannst du auf das Fenster (Bild siehe Screenshot unten) aufrufen und Einstellungen vornehmen.

Nummerierungen

Nächstes Thema sind Nummerierungen in Word

Zusammenfassung der "No go's" in MS Word

Der letzte Bereich soll "No Go's im Bereich Word" gewidmet werden  - also auf gehts ... All die folgenden Bilder unbedingt einprägen und nicht für strukturiertes Arbeiten mit Word anwenden.

Sondern

Sondern

Sondern

Sondern

Sondern

     Sondern

Photos

Das Thema

Nutze zur Seiteneinrichtung den Pfad: Word - Datei - Seite einrichten und bewege dich ja nach Vorstellung in den Reitern um das Dokument nach deinen Wünschen zu strukturieren.

Kopf - und Fußzeilen

Nutze den Pfad: Word - Ansicht - Kopf- und Fußzeile und strukturiere deine Kopf - oder Fußzeile mit Hilfe der sich öffnenden Symbolleiste. Auch Seitenzahlen können in eine Fußzeile mit Hilfe dieser Funktion integriert werden.

Formatierung von Seitenzahlen

Mit Hilfe der sich öffnenden Symbolleiste im Bereich "Kopf - und Fußzeilen" kannst du die Seitenzahlen deines Dokumentes formatieren. Klicke einfach auf den orange hinterlegten Button und richtet den Dokument ein.

Formatvorlagen und Formatierung allgemein

Um von Formatvorlagen und Formatierung in Word Gebrauch zu machen, solltest du folgenden Pfad nutzen: Word - Format - Formatvorlagen und Formatierung

Neue Formatvorlagen entwerfen

Neue Formatvorlage können ebenso in Word erschaffen werden. Klicke dazu einfach auf den im oberen Screenshot gelb umrandeten Button "Neue Formatvorlage" und nutze die Vielzahl an Optionen.

Formatvorlagen anzeigen

Nachdem du mit dem Pfad im linken Fenster die Formatvorlagen geöffnet hast, wird dieses Fenster sichtbar. Mit Hilfe dieser Option kannst du sowohl bereits vorhandene Formatvorlagen nutzen als auch neue Formatvorlagen entwerfen. Über die unten am Bildrand sichtbare Option "Anzeigen" kannst du außerdem die Auswahl an Formatierungen erweitern. Um die Formatierungen anzeigen zu lassen, die du bereits vorgenommen hast, kannst du den Pfad: Word - Format - Formatierung anzeigen nutzen.

Formatierung anzeigen lassen

In Word können die gemachten Formatierungen angezeigt werden. Diese Funktion ist vor allem bei der Kontrolle von Formatierung sehr nützlich. Denn gerade bei strukturierten Word - Dokument kommt es auf eine "saubere" Arbeit an und eben diese wird durch die Anzeige der bereits durchgeführten Formatierungen erleichtert. Nutze dazu ein folgenden Pfad: Word - Format - Formatierung anzeigen

Auto Texte

Mit Hilfe von Word können Textbausteine geschaffen werden mit deren Hilfe du zum Beispiel einen Brief nicht immer wieder neu schreiben musst. Nutze an dieser Stelle einfach den Pfad: Word - Format - Auto Korrektur Optionen und wähle zum Beispiel im Reiter Auto Text Passagen aus, mit denen du in zukünftigen Word - Dateien erneut strukturiert arbeiten kannst.

Auto Korrekturen

Mit Hilfe der Option, wie links, kannst du auch bestimmte Korrekturen in Word anlegen. Zum Beispiel kannst du Word dazu veranlassen, kleine Rechtschreibfehler zu korrigieren. Aus deinem "WOrt" wird dann automatisch "Wort".

Überarbeitungsmodus

Über den Pfad: Word - Ansicht - Symbolleisten - Überarbeiten kannst du den Überarbeitungsmodus aktivieren. Er hilft dir die Veränderungen im Dokument nachzuvollziehen.

Änderungen nachverfolgen

Um Änderungen in Word zu einem späterem Zeitpunkt nach zu verfolgen, kannst du die Option "Änderungen nachverfolgen" nutzen. In Word 2003 realisiert sich diese durch folgenden Pfad: Word - Extras - Änderungen nachverfolgen

Kommentare einfügen

In Microsoft Word kannst du Kommentare mittels dem Pfad: Einfügen - Kommentar realisiert werden. Durch das Einfügen von Kommentaren kannst du dich auf eine sehr einfache und visuell ansehnliche Art und Weise mit deinen Gruppenmitgliedern verständigen.

Gliederungsebenen

Mit Hilfe von Referenzen kannst du die Inhaltsverzeichnisse automatisch einrichten. Nutze dazu den Pfad: Word - Einfügen - Referenz - Index und Verzeichnisse. Und richte dir dein auf deinen Text abgestimmtes Inhaltsverzeichnis ein. Siehe dazu auch den Screenshot rechts.

Umbrüche

Wie in den Todsünden von Word schon beschrieben, sollst du Umbrüche nicht einfach mit einem Druck auf ENTER umsetzen. Nutze dazu den Pfad: Word - Einfügen - Manueller Umbruch. Die Seiten-, Spalten- oder Textflussumbrüche kannst du dort auswählen.

Absätze schaffen

Pfad zur Nummerierung

Der Pfad zur Nummerierung wird aus diesem Screenshot ersichtlich: Word - Format - Aufzählungszeichen

Nummerierung und Aufzählung

Bei Nummerierung und Aufzählungen ist es wichtig erneut nicht manuell vorzugehen. Die automatische Nummerierung erleichtert dir die Gliederung der Datei.

Seitenumbrüche

Zeilenumbrüche

Einrücken

Kopf- und Fußzeilen

Kapitelnummerierung

Formatierung

HTML & CSS

Bookmarks

Hinweise für HTML & CSS

Rich sticky notes

Links auf die Gruppenwebspace

In diesem Bereich verlinken wir erneut alle für die Lösung der Praktikumsaufgabe relevanter Dokument auf unsere Gruppenwebspace.

Webprofile fiktiver Personen:
Webprofile der Studenten:

Gruppenwebprofil

Wenn´s mal nichts zu lachen gibt


Viel Spaß und Erfolg auf unserer Wissenscollage!!! Dein ACCE Team

Unsere Definitionen

HTML - was ist das eigentlich?
HTML ist die Abkürzung für HyperTextMarkupLanguage. Es handelt sich dennoch entgegen vieler Meinungen nicht um eine Programmier- sondern um eine Seitenbeschreibungsprache. Sozusagen wird in HTML beschrieben wie eine Seite auszusehen hat, das exakte Layout übernimmt ein Webbrowser.

CSS - was ist das eigentlich?
CSS ist die Abkürzung für Style Sheet Cascading. Während HTML die Bedeutung verschiedener Abschnitte kennzeichnet, koordniert CSS das Aussehen des Dokumentes. So können in CSS zum Beispiel Schrifauszeichnungen, Farben und Größen angeordnet werden.

Hinweise zu häufigen Fehlerquellen in HTML

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

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.

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

[Quelle]

HTML Basics


Hinweise zu HTML Formatierung

Bereich Grundgerüst:

Faustregel: Eine HTML-Seite beginnt in der Regel mit <html> und endet mit </html>. Alles dazwischen hat irgendwie Auswirkungen auf das, was Sie im und am Browser sehen.

 

Kopfbereich:
Die Angaben im Kopfabschnitt einer HTML Seite bewirken keine Ausgabe im Anzeigebereich des Webbrowsers. Sie können Hintergrundinformationen über die HTML-Seite angeben und den Text in die Titelleiste des Browsers setzen. Für die Ausgabe ist der Inhaltsabschnitt zuständig.

 

Schrittfolge einer HTML Seite:

  1. Erstelle in einem Editor ein neues Dokument und speichere  es.
  2. Beginne mit <html> und </html>. Füge dazwischen eine ausreichende Zahl an Leerzeilen ein.
  3. Erstelle dann den Kopfabschnitt mit <head> und </head>.
  4. Gebe innerhalb des Kopfabschnittes zwischen <title> und </title> den Seitentitel an.
  5. Fasse den Inhaltsabschnitt zwischen <head> und </html>. Gekennzeichnet wird dieser mit <body> und </body>-
  6. Innerhalb des Inhaltsabschnittes gibst du den Inhalt deiner Seite an: Text, Balken, etc.
  7. Speichere am Ende das Dokument erneut und am Besten auch schon in der Zwischenzeit auch schon das ein oder andere Mal.

Umbrüche:

Wichtige HTML Tags

HTML Grundgerüst:

Tags

Erklärung

<html> … </html>

Äußerer Rahmen

<head> … </head>

Kopfbereich

<title> … </title>

Titel der Seite (Kopfbereich)

<style> … </style>

Stilangaben (Kopfbereich)

<body> … </body>

Inhaltsbereich

 

Textformatierung:

Tags

Erklärung

<p> … </p>

Absatz

<br>

Zeilenumbruch

<hr>

Horizontale Linie

<b> … </b>

Fettdruck

<i> … </i>

Kursivdruck

<sup> … </sup>

Hochgestellt

<sub> … </sub>

Tiefgestellt

<font face=“ …“> … </font>

Schriftart

<font size=“…“> … </font>

Schriftgröße

<font color=“…“> … </font>

Schriftfarbe

<s> … </s>

Durchgestrichen

<blink><s> … </s></blink>

Blinkender Text

<div> … </div>

Container, Block

<div> … </div>

Container, Block

<!--DATE-->21.04.2007<!--/DATE-->

Automatisch aktualisiertes Datum

<nobr> … </nobr>

Verhindern von Umbrüchen

Listen:

 

Tags

Erklärung

<ol> … </ol>

Geordnete Liste (1.,2.,3.,…)

<ul> … </ul>

Ungeordnete Liste (Aufzählungszeichen)

<li> … </li>

Listenelement (innerhalb einer Liste)

 

 

 

Unicode Zeichen:

ACHTUNG BEI AUSLÄNDISCHEN WEBSITES!!! BESSER DIE UNICODE ENTITÄT  BENUTZEN!!!

Zeichen

Unicode-Entität

Entität-Kurzform

ä

&#228

&auml

Ä

&#196

&Auml

ö

&#246

&ouml

Ö

&#214

&Ouml

ü

&#252

&uuml

Ü

&#220

&Uuml

ß

&#223

&szlig

&#8364

&euro

©

&#169

&copy

&#8482

&trade


Ausrichtung des HTML Textes in Verbindung mit <p align =“  “ :


“left” – Standard, linksbündige Ausrichtung

“center“ – zentrierter Absatz

“right“ – rechtsbündige Ausrichtung

“justify“ – Blocksatz, wird aber nicht von allen Browsern unterstützt

          z.B. <b><i>Text</i></b> - Text wird fett und kursiv

Probleme bei HTML & CSS

Hinweise zu HTML

Texte in HTML 

Erläuterungen zu Texten

In HTML gibt es für die Formatierung von Text extrem viele Möglichkeiten. Da unser Platz an dieser Stelle deutlich begrenzt ist, möchten wir euch vor allem einen Rat mit auf den Weg geben. Mit Hilfe der obigen Screenshot haben wir die wichtigsten Stukturierungen bereits publilziert.
Übertreibt es nicht mit den Farben, Animationen und Effekten! Zu viel ist auch nicht gut!!!

Hinweise zu HTML

Listen in HTML

Erläuterung zu Listen

Aufzählungslisten:
Schrittfolge zur Erstellung einer Aufzählungsliste:
  1. Erstelle ein HTML Grundgerüst.
  2. Beginne die Aufzählungsliste im <body> Abschnitt mit dem Tag <ul> (ungeordnete Liste)
  3. Erstelle das erste Element der Liste und umgebe es mit <li> und </li> (list item, Listenelement).
  4. Wiederhole den Schritt 3 solang wie nötig.
  5. Beende die Liste mit </ul>
Symbole ändern:
Du kannst die Aufzählungssymbole der Listen ändern, in dem du die folgenden Werte als type Atrribut des <ul> Tags angibst.
Beispiel: <ul type="circle">
                <li> Apfel </li>
                </ul>
Ausgabe im Browser:

Nummerierte Listen:
Schrittfolge zur Erstellung einer nummerierten Liste:
  1. Erstelle ein HTML Grundgerüst.
  2. Beginne im <body> Abschnitt mit dem Tag <ol> (ordered list - geordnete Liste).
  3. Erstelle wie gewohnt die einzelnen Elemente der Liste mit <li> </li>
  4. Beenden der Liste mit </ol>
Beispiel: <ol>
                 <li> Apfel </li>
                </ol>
Ausgabe im Browser:
                  1. Apfel
!!! Du kannst die Aufzählung jedoch auch bei einer belieben anderen Zahl starten lassen - dazu nutze am besten das Attribut <ol start="Zahl">!!!

Weitere Nummerierungen:

Links in HTML

Links in HTML

Erläuterungen zu Links

Der Screenshots rechts zeigt dir, wie man Links allgemein in HTML Dokumente einpflegt. Natürlich gibt es auch hier allerlei Spezifikationen.

Formatierung von Links
Interne Links
Externe Links
Newsgroups
Mail Links
Textmarken

CSS Einbindung in HTML

Einbindung von CSS in HTML

Erläuterungen zu CSS in HTML

Mit Style Sheets definierst du Formatierungen für Tags. Bei HTML Seiten wird als Sprache für die Style Sheets das Format Cascading Style Sheet (CSS) verwendet.

Verschieden Arten von Style Sheets:
Man unterscheidet die Arten von Style Sheets nach der Stelle, an der sie eingebunden sind. Man kann einzelnen HTML Befehlen Stile zuweisen oder man definiert sie am Kopf der HTML Seite.  Wenn du ein Style Sheet global für mehrere Dokumente anlegen möchtest, kannst du eine eigene Datei mit dem Dateiende .css anlegen und es in den Kopf der HTML Seite laden.

Beispiel für Stile in HTML Dokumenten:
<p style="color:blue; font family: Courier"> Blaue Schrift </p>
Anzeige im Browser: Blaue Schrift

Style Sheet im Kopfbereich:
Schrittfolge eines solchen Styles
  1. Style Sheet Definition zwischen <head> und </head>. Dazu dient das Tag <style>.
  2. Im <style> Tag wird mit type="text/css" die Art des Style Sheets festgelegt. text/css bedeutet, dass es sich um einen Cascading Style Sheet handelt.
  3. Die Style Sheet Definition beginnt mit einem Kommentar: <!-- Kommentar -->
  4. Mit P(Beispiel) legst du fest, dass der Stil für alle <p> Tags in der HTML Seite verwendet wird. Die Definition des Stils erfolgt in geschweiften Klammern.
  5. Im Körper des Dokumentes werden dann alle Absätze nach dem angelegten Schema formatiert.
Beispiel: <style type="text/css">
                 <!-- P{color:blue} -->
                 </style>

Externes Style importieren oder verlinken
 Beispiel: <!-- @import url(style.css) -->Beispiel: <link href="style.css" rel=stylesheet type="text/css" title=stylesheet1">

Möglichkeiten von CSS in HTML

Möglichkeiten von CSS für HTML Dokumente

Videos

Hilfreiche Videos zu HTML & CSS

Tutorial in Englisch zu HTML


Tutorial 2 zu Video am Anfang der Page


CSS Tutorial in Englisch


CSS Tutorial 2 in Englisch


Photos

Die Themen

Zeilenumbrüche in HTML

Mit dem Befehl <nobr></nobr> kannst du Zeilenumbrüche verhindern. Das "No break" Element lässt diese nämlich nicht zu.

Grundgerüst einer HTML Datei

Sonderzeichen

Absätze in HTML

Überschriften

Ausrichten von Text

geordnete Listen mit arabischen Ziffern

Ungeordnete Listen

Link in HTML einbinden

1. Schreiben der HTML Datei und einbinden des Style Sheets

2. Anzeige im Browser

Beispiel Style Sheet

CSS Hintergrundbilder

CSS Klassen

Hintergrundfarben

CSS Bilder

Anzeige der Schriftformatierung im Browser

Schriftformatierung in HTML mit externen CSS Dateien

Hilfs-Widget

News

Video-Podcasts

Audio-Podcasts

Rich sticky notes

MP3s einbinden

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

Flash-Filme oder Animationen einbinden

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