List of public pages created with Protopage

Wir über uns

Rich sticky notes

Begrüßung

Herzlich Willkommen auf der Seite von CrossMedia.

 

Wir sind Steffi, Linette, Theresa und Sabrina!!!

 

Wir wünschen euch viel Spaß in der faszinierenden Welt der Textverarbeitung mit WORD oder der Websiteerstellung mit HTML und CSS!


XXXCrossMediaXXX

Calendars

Calendar

Photos

CrossMedia

Aufgaben

News

Tutorblog

Word

Bookmarks

Hilfreiche Links zum Thema: Word

Rich sticky notes

Links zu Gruppenwebspace

1. korrigierte Teile der Hausarbeit

 

Theresa

Linette

Stefanie

Sabrina

 

2. Deckblätter der Hausarbeit

 

Theresa

Linette

Stefanie

Sabrina

 

3. Dokumentvorlagen

 

Dokumentvorlage Deckblatt

Dokumentvorlage Hausarbeit

 

4. fertige Hausarbeit

 

Hausarbeit pdf

Hausarbeit doc

 

 

Hier seid ihr richtig

Wer kennt das nicht...

da sitzt man tagelang an einer Hausarbeit und ist froh, wenn man was einigermaßen sinnvolles Zustande gebracht hat. Doch meistens fängt mit dem Ende der Schreibarbeit der "Spaß" erst richtig an... nämlich wenn es um das Formatieren geht!

Solltet ihr auch zu denen gehören, die dabei noch ein paar Probleme haben, dann seid ihr Hier genau richtig! Denn wir, das Team CrossMedia, werden den häufigsten Fehlerquellen beim Formatieren mal auf den Grund gehen, sodass bei der nächsten Hausarbeit garantiert nichts mehr schiefgeht!

Viel Spaß wünscht das Team CrossMedia!

Jetzt gehts los!

 

Zum Einstieg empfehlen wir euch das Studieren der "10 Todsünden in der Textverarbeitung"!

Zu diesen Todsünden findet ihr im Verlauf der Seite zahlreiche Screenshots, die euch das richtige Arbeiten mit MS Word erleichtern sollen!

Alles was mit Fehlerquellen zu tun hat, ist mit einem roten Balken gekennzeichnet.

Wem das noch nicht genügt, der schaut sich mal die Fenster mit einem grünen Balken an - hier findet man noch zusätzliche Informationen, Tipps und Tricks rund um MS Word!

 

 

 

 

Die 10 Todsünden der Textbearbeitung

Die 10 Todsünden in der Textbearbeitung

 

1. Du sollst Zeichen nicht mit einem Druck auf „Tab“ oder die „Leertaste“ einrücken.

Word kennt dafür die Option „Einzug“ zum Befehl „Absatz“ (FORMAT ABSATZ…).

 

2. Du sollst einzelne Zeilen nicht durch einen Druck auf „Enter | Return“ beenden (Abschnittswechsel am Ende jeder Zeile).

Diese Taste ist nur für das Ende eines Absatzes notwendig – den Zeilenumbruch erledigt

Word automatisch. Manuelle Zeilenumbrüche innerhalb eines Absatzes können mit „Shift

+ Enter“ realisiert werden.

 

3. Du sollst (Seiten)-Umbrüche nicht durch mehrfaches Drücken auf „Enter | Return“ erzeugen.

Word stellt verschiedene Arten von „Manuellen Umbrüchen“ zur Verfügung (Einfügen

Manueller Umbruch…). Ein Manueller Seitenumbruch kann z.B. auch mit „Strg + Enter“

erzeugt werden.

 

4. Du sollst Trennstriche nicht mit einem Druck auf die Bindestrichtaste einfügen.

Trennstriche werden mit „Strg“ + „Bindestrichtaste“ erzeugt. Nur diese Trennstriche verschwinden

zwischen zwei Silben, wenn sich der Zeilenfall ändert.

 

5. Du sollst nicht wild im Text herumformatieren (Direkte Formatierung).

Die Textformatierung sollte überwiegend mit Formatvorlagen erfolgen. Dazu ist es nicht

unbedingt notwendig benutzerdefinierte Formatvorlagen zu erstellen. Die Einstellungen

der systemseitigen Formatvorlagen (z.B. „Standard“ oder „Überschrift 1“) können nach

Belieben angepasst werden (FORMAT FORMATVORLAGEN UND FORMATIERUNG…). Der gleichnamige Aufgabenbereich wird sichtbar. Bei Bedarf können „Alle Formatvorlagen“ unter

ANZEIGEN eingeblendet werden. Eigenschaften einzelner Formatvorlagen können über das

KONTEXTMENÜ „ÄNDERN…“ angepasst werden.

 

6. Du sollst Listen nicht manuell mit z.B. „Sonderzeichen“ oder der Bindestichtaste erstellen.

Word bietet Ihnen zur Erstellung von Listen und Gliederungen zahlreiche Möglichkeiten

im Dialogfeld „Nummerierung und Aufzählungszeichen“ (FORMAT NUMMERIERUNG UND AUFZÄHLUNGSZEICHEN…). Hier können einfache Aufzählungslisten, Nummerierungen und Gliederungslisten erstellt werden. Unter dem Reiter „Listenformatvorlagen“ können und sollten

eigene Formatvorlagen für Listen erstellt werden.

 

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

Zur strukturierten Gliederung eines Dokumentes sollten Sie Gliederungsebenen verwenden

(ANSICHT GLIEDERUNG). Die Gliederungsansicht dient zur Kontrolle und Korrektur

von Ebenen oder zum Konvertieren zwischen Textkörper und Ebenen. Tipp: Benutzen Sie

die systemseitigen Formatvorlagen „Überschrift 1 … n“ (falls Ihnen die Formatierungen

nicht gefallen, wissen Sie schon, dass sie auch diese systemseitigen Formatvorlagen nach

belieben anpassen können). Vorteil: Diesen Formatvorlagen sind systemseitig schon

Gliederungsebenen zugewiesen.

 

8. Du sollst Kopf- und Fußzeilen nicht manuell durch „Copy & Paste“ auf jeder Seite neu

erstellen.

Verwenden Sie die Ansicht „Kopf- und Fußzeile“ (ANSICHT KOPF- UND FUßZEILE) um Elemente

zu Positionieren, die auf jeder Seite eines Abschnittes angezeigt werden sollen.

Sie können hier nicht nur Text und Seitennummerierungen sondern auch Grafiken, Bilder

und anderen Elemente der Zeichnen-Symbolleiste (ANSICHT SYMBOLLEISTEN ZEICHNEN)

einfügen. Tipp: In dieser Ansicht können recht einfach „Wasserzeichen“ auf jede Seite eines

Abschnitts eingefügt werden.

Des Weiteren lassen sich auch Feldfunktionen in Kopf- und Fußzeilen einfügen (EINFÜGEN

FELD…). Tipp: Die Feldfunktion „StyleRef“ bietet viele Möglichkeiten Text zu referenzieren,

der mit einer gewählten Formatvorlage formatiert ist.

 

9. Du sollst Inhaltsverzeichnisse weder manuell erstellen noch in ein separates Dokument

ausgliedern.

Word bietet Ihnen die Möglichkeit verschiedene Referenzen zu erstellen, u.a. auch Inhaltsverzeichnisse

(Einfügen Referenz Index und Verzeichnisse…). Die systemseitigen

Formatvorlagen können Sie wie gehabt nach Belieben anpassen (Ändern…-Button).

Durch einen Manuellen Abschnittswechsel vor und nach der Seite, auf der Sie das Inhaltsverzeichnis

platzieren möchten, lässt sich auch das Layout der Kopf- und Fußzeilen,

unabhängig von der Gestaltung der anderen Abschnitte im Dokument, anpassen.

 

10. Du sollst Kommentare und Änderungen nicht durch manuelle Formatierung z.B. durch

Farbänderungen oder andere direkte Formatierungen kennzeichnen.

Für Teamarbeiten lassen sich Kommentare und Änderungen sehr einfach im „Überarbeitungsmodus“

generieren (ANSICHT SYMBOLLEISTEN ► ÜBERARBEITEN). Neben den Möglichkeiten

des Einfügens von Kommentaren an markierte Textstellen (auch über: EINFÜGEN

KOMMENTAR), können auch Änderungen bzw. Überarbeitungen an Textpassagen mitverfolgt

werden. Dies geschieht durch das Aktivieren „Änderungen nachverfolgen“ (auch über:

EXTRAS ÄNDERUNGEN NACHVERFOLGEN). Zur Anzeigensteuerung im Überarbeitungsmodus

stehen Ihnen verschiedene Darstellungen zur Verfügung: drop down button „Anzeigen“

ermöglicht Filterungen nach Bearbeitern, Versionsständen mit und ohne Änderungen

| Kommentaren. Tipp: Damit Änderungen für ein kollaboriertes Arbeiten im Team

markiert werden, ist es wichtig darauf zu achten, dass „Änderungen Nachverfolgen“ aktiviert

ist. Zu den jeweiligen Markups im Text gibt es verschiedene Bearbeitungsmöglichkeiten

im Kontextmenü oder der Symbolleiste.

Einführung in die Formatierung mit Word

Literatur

Zum Schluss noch was zum Schmökern...

 

Malte Borges: Word 2000

 

Johann-Christian Hanke: Word für Studenten

 

Tobias Ravens: Wissenschaftlich mit Word arbeiten

 

Claudia von Wilmsdorff: Praxishandbuch Word

 

 

 

 

Photos

Einzug

Zeichen einrücken über Format -> Absatz

Inhaltsverzeichnis anlegen

Einfügen -> Referenz -> Index und Verzeichnisse

Inhaltsverzeichnis anlegen

Es ist wichtig die einzelnen Ebenen vorher festzulegen.

Nummerierung und Aufzählungszeichen

Erstellung von Listen und Gliederungen: Format -> Nummerierung und Aufzählungszeichen

Seitenumbruch

Seitenumbrüche werden nie durch Enter erzeugt,sondern über Einfügen -> manueller Umbruch -> Seitenumbruch

Seitenzahlen

Seitenzahlen einfügen: Einfügen -> Seitenzahlen

direkte Formatierung

Textformatierung sollte mit Formatvorlagen erfolgen-Format -> Formatvorlagen und Formatierung

Kommentare

Für Kommentare im Text sollte die Kommentarfunktion genutzt werden

Office-Assistent

Mal wieder vollkommen planlos? Nicht verzweifeln, frag einfach deinen Office-Assistenten!

HTML & CSS

Bookmarks

Hilfreiche Links zum Thema HTML

Literatur zum Thema HTML

Hilfreiche Links zum Thema CSS

Bookmarks panel

Rich sticky notes

Rich text note

Ihr wollte schon immer mal eure eigene Website erstellen, aber habt keine Ahnung wie das gehen soll? Keine Angst, so schwer ist das gar nicht. Mit ein paar grundlegenden Kenntnissen in HTML-Programmierung und ein bisschen Übung kann man schon so einiges zustande bringen. Wir zeigen euch wie's geht. Worauf also noch warten? Auf in die Welt des HTML und CSS!

Was ist HTML???

Was ist HTML?

HTML ist eine Seitenbeschreibungssprache, mit der dem Browser "gesagt" wird, wie die Daten angezeigt werden:

- welche Einheiten (Buchstaben, Wörter, Sätze, Absätze) z.B. fett gedruckt werden

- in bestimmten Farben dargestellt werden etc.

 

Dazu werden über das Internet HTML-Seiten übertragen. Das Bedeutsame dabei ist, dass die HTML-Seiten in Klartext übertragen werden und so jeder schauen kann, wie das eigentlich funktioniert.

 

TIPP: Einfach mal im Browser auf "Ansicht -> Quellcode anzeigen" gehen. Das zunächst Verwirrende ist, dass zwischen den Informationen noch was auftaucht.

 

Es gibt also nicht nur Informationen, sondern auch Anweisungen, wie diese Informationen angezeigt werden sollen. Das geschieht über HTML-TAGs.

Einführung in HTML (VIDEO)

Links zu Gruppenwebspace

Hier seht ihr einige Beispiele, wie ein Webprofil aussehen könnte. Doch Vorsicht, die Originalprofile sind mit Fehlern behaftet. Wir haben für euch die Fehler gesucht und versucht einige Lösungsvorschläge zu geben. Viel Spaß beim Durchklicken!

1. Originalprofile mit Fehlern*

Profil1 Linette
Profil2 Stefanie
Profil3 Sabrina
Profil4 Theresa

2. überarbeitete Profile*


Profil1 Linette
Profil2 Stefanie
Profil3 Sabrina
Profil4 Theresa


3. Gruppenprofil mit Links zu Einzelprofilen*


CrossMedia

*Hinweis: Um den HTML-Quelltext der jeweiligen Profile sichtbar zu machen, kann man sich auf der Symbolleiste unter "Ansicht > Seitenquelltext anzeigen" oder mit der Tastenkombination Strg+U den Quelltext anzeigen lassen.

Die 10 Gebote der HTML-Programmierung

Im Folgenden findet ihr eine kleine Auflistung von Dingen, die ihr bei der HTML-Programmierung unbedingt beachten solltet. Schließlich wollt ihr doch nicht, dass eure  Website unprofessionell wirkt und unter eingefleischten "HTMLern" als "deprecated" abgestempelt wird ;-)

Gebot 1

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

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.
(rosa hinterlegt)
b. Aus Kompatibilitätsgrunden zu XHTML wird empfohlen auch Elemente ohne Inhalt wie z.B. <br>, <img> immer zu schließen: <br/>, <img>.
(blau hinterlegt)
c. Aus Kompatibilitätsgrunden zu XHTML wird empfohlen, Element- und Attributnamen IMMER klein zu schreiben.
(grün hinterlegt)
d. Setzen Sie Attributwerte immer in Anführungsstriche (z.V. src= blume.jpg" oder alt="Dieses Bild zeigt eine Sonnenblume")
e. Verwenden Sie immer Entitäten (z.B. fur "ä" --> &auml;)
(gelb hinterlegt)

Entitäten - Sonderzeichen in HTML

HTML-Entity

Zeichen

Beschreibung

Unicode dezimal

Unicode hexadez.

Unicode Zeichensatz

A

&Acirc;

Â

Großes A mit Zirkumflex

&#194;

&#x00C2;

C1 Controls and Latin-1 Supplement

&acirc;

â

Kleines a mit Zirkumflex

&#226;

&#x00E2;

C1 Controls and Latin-1 Supplement

&acute;

´

Akut (accent aigu, acute)

&#180;

&#x00B4;

C1 Controls and Latin-1 Supplement

&AElig;

Æ

Ligatur aus großem A und großem E

&#198;

&#x00C6;

C1 Controls and Latin-1 Supplement

&aelig;

æ

Ligatur aus kleinem a und kleinem e

&#230;

&#x00E6;

C1 Controls and Latin-1 Supplement

&Agrave;

À

Großes A mit Grave

&#192;

&#x00C0;

C1 Controls and Latin-1 Supplement

&agrave;

à

Kleines a mit Grave

&#224;

&#x00E0;

C1 Controls and Latin-1 Supplement

&alefsym;

Aleph-Symbol (hebräischer Buchstabe)

&#8501;

&#x2135;

Letterlike Symbols

&Alpha;

Α

Großes Alpha (griechischer Buchstabe)

&#913;

&#x0391;

Greek and Coptic

&alpha;

α

Kleines alpha (griechischer Buchstabe)

&#945;

&#x03B1;

Greek and Coptic

&amp;

&

Kaufmännisches Und (Ampersand)

&#38;

&#x0026;

ASCII/ C0-Controls and Basic Latin

&and;

Logisches Und, mathematisches Und; (Engl.: Logical AND; wedge, conjunction)

&#8743;

&#x2227;

Mathematical Operators

&ang;

Winkel (Engl.: angle)

&#8736;

&#x2220;

Mathematical Operators

&apos;

'

Apostroph (Auslassungzeichen)

&#39;

&#x0027;

ASCII/ Basic Latin

&Aring;

Å

Großes A mit Ring (Krouzek)

&#197;

&#x00C5;

C1 Controls and Latin-1 Supplement

&aring;

å

Kleines a mit Ring (Krouzek)

&#229;

&#x00E5;

C1 Controls and Latin-1 Supplement

&asymp;

Rundungszeichen (Ungefähr; asymptotisch) (Engl.: Almost Equal to; Asymptotic to)

&#8776;

&#x2248;

Mathematical Operators

&Atilde;

Ã

Großes A mit Tilde

&#195;

&#x00C3;

C1 Controls and Latin-1 Supplement

&atilde;

ã

Kleines a mit Tilde

&#227;

&#x00E3;

C1 Controls and Latin-1 Supplement

&Auml;

Ä

Großes A mit Diaeresis (Umlaut)

&#196;

&#x00C4;

C1 Controls and Latin-1 Supplement

&auml;

ä

Kleines a mit Diaeresis (Umlaut)

&#228;

&#x00E4;

C1 Controls and Latin-1 Supplement

B

&bdquo;

Doppelte Anführungszeichen links unten

&#8222;

&#x201E;

General Punctuation

&Beta;

Β

Großes Beta (griech. Buchstabe)

&#914;

&#x0392;

Greek and Coptic

&beta;

β

Kleines beta (griech. Buchstabe)

&#946;

&#x03B2;

Greek and Coptic

&brvbar;

¦

Unterbrochener senkrechter Strich (Engl.: Broken Vertical Bar)

&#166;

&#x00A6;

C1 Controls and Latin-1 Supplement

&bull;

Rundes Aufzählungszeichen (Engl.: Bullet; Black Small Circle)

&#8226;

&#x2022;

General Punctuation

C

&cap;

"Geschnitten mit ..." (Engl.: Intersection, Cap, Hat)

&#8745;

&#x2229;

Mathematical Operators

&Ccedil;

Ç

Großes C mit Cedilla

&#199;

&#x00C7;

C1 Controls and Latin-1 Supplement

&ccedil;

ç

Kleines c mit Cedilla

&#231;

&#x00E7;

C1 Controls and Latin-1 Supplement

&cedil;

¸

Cedilla

&#184;

&#x00B8;

C1 Controls and Latin-1 Supplement

&cent;

¢

Cent-Zeichen

&#162;

&#x00A2;

C1 Controls and Latin-1 Supplement

&Chi;

Χ

Großes Chi (griechischer Buchstabe)

&#935;

&#x03A7;

Greek and Coptic

&chi;

χ

Kleines chi (griech. Buchstabe)

&#967;

&#x03C7;

Greek and Coptic

&circ;

ˆ

Zirkumflex

&#710;

&#x02C6;

Spacing Modifier Letters

&clubs;

Kreuz (Kartenspiel)

&#9827;

&#x2663;

Miscellaneous Symbols

&cong;

"Etwa gleich mit ...", "Entspricht ungefähr ..."; (Engl.: Approximately equal to)

&#8773;

&#x2245;

Mathematical Operators

&copy;

©

Copyright-Zeichen (Urheberechtssymbol)

&#169;

&#x00A9;

C1 Controls and Latin-1 Supplement

&crarr;

Dünner, nach links weisender Pfeil, der senkrecht beginnt und dann waagerecht nach links abknickt (Engl.: Downwards Arrow with Corner Leftwards; may indicate a carriage return or new line)

&#8629;

&#x21B5;

Arrows

&cup;

"Vereinigt mit ..." (Engl.: Union; Cup)

&#8746;

&#x222A;

Mathematical Operators

&curren;

¤

Allgemeines Währungszeichen

&#164;

&#x00A4;

C1 Controls and Latin-1 Supplement

D

&Dagger;

Doppel-Kreuz ("Doppel-Dolch")

&#8225;

&#x2021;

General Punctuation

&dagger;

"Gestorben am..." Kreuz, "Dolch"

&#8224;

&#x2020;

General Punctuation

&dArr;

Breiter, nicht ausgefüllter, senkrecht nach unten weisender Pfeil (Engl.: Downwards Double Arrow)

&#8659;

&#x21D3;

Arrows

&darr;

Dünner, senkrechter, nach unten weisender Pfeil

&#8595;

&#x2193;

Arrows

&deg;

°

Grad-Zeichen (Temperatur, Winkel)

&#176;

&#x00B0;

C1 Controls and Latin-1 Supplement

&Delta;

Δ

Großes Delta (griech. Buchstabe)

&#916;

&#x0394;

Greek and Coptic

&delta;

δ

Kleines delta (griech. Buchstabe)

&#948;

&#x03B4;

Greek and Coptic

&diams;

Karo (Kartenspiel)

&v#9830;

&#x2666;

Miscellaneous Symbols

&divide;

÷

Divisions-Zeichen ("Geteilt durch ...")

&#247;

&#x00F7;

C1 Controls and Latin-1 Supplement

E

&Eacute;

É

Großes E mit Akut

&#201;

&#x00C9;

C1 Controls and Latin-1 Supplement

&eacute;

é

Kleines e mit Akut

&#233;

&#x00E9;

C1 Controls and Latin-1 Supplement

&Ecirc;

Ê

Großes E mit Zirkumflex

&#202;

&#x00CA;

C1 Controls and Latin-1 Supplement

&ecirc;

ê

Kleines e mit Zirkumflex

&#234;

&#x00EA;

C1 Controls and Latin-1 Supplement

&Egrave;

È

Großes E mit Grave

&#200;

&#x00C8;

C1 Controls and Latin-1 Supplement

&egrave;

è

Kleines e mit Grave

&#232;

&#x00E8;

C1 Controls and Latin-1 Supplement

&empty;

Engl.: Empty set, Null set

&#8709;

&#x2205;

Mathematical Operators

&emsp;

Leerschritt von der Breite des Buchstaben m; (Engl.: Em-space)

&#8195;

&#x2003;

General Punctuation

&ensp;

Leerschritt von der Breite des Buchstaben n; (Engl.: En-space)

&#8194;

&#x2002;

General Punctuation

&Epsilon;

Ε

Großes Epsilon (griech. Buchstabe)

&#917;

&#x0395;

Greek and Coptic

&epsilon;

ε

Kleines Epsilon (griech. Buchstabe)

&#949;

&#x03B5;

Greek and Coptic

&equiv;

Äquivalenzumformung ("Entspricht ...")

&#8801;

&#x2261;

Mathematical Operators

&Eta;

Η

Großes Eta (griech. Buchstabe)

&#919;

&#x0397;

Greek and Coptic

&eta;

η

Kleines eta (griech. Buchstabe)

&#951;

&#x03B7;

Greek and Coptic

&ETH;

Ð

Großes Eth (isländischer Buchstabe)

&#208;

&#x00D0;

C1 Controls and Latin-1 Supplement

&eth;

ð

Kleines eth (isländischer Buchstabe)

&#240;

&#x00F0;

C1 Controls and Latin-1 Supplement

&Euml;

Ë

Großes E mit Diaeresis (Umlaut)

&#203;

&#x00CB;

C1 Controls and Latin-1 Supplement

&euml;

ë

Kleines e mit Diaeresis (Umlaut)

&#235;

&#x00EB;

C1 Controls and Latin-1 Supplement

&euro;

Euro-Zeichen (Währungszeichen)

&#8364;

&#x20AC;

Currency Symbols

&exist;

Es existiert

&#8707;

&#x2203;

Mathematical Operators

F

&fnof;

ƒ

Kleines f mit Haken (Latin small letter f with hook; Latin small letter script f; Florin currency symbol of the Netherlands; function symbol; abbreviation convention for folder)

&#402;

&#x0192;

Latin Extended-B

&forall;

"Für alle ..."

&#8704;

&#x2200;

Mathematical Operators

&frac12;

½

Einhalb (Bruch 1 durch 2)

&#189;

&#x00BD;

C1 Controls and Latin-1 Supplement

&frac14;

¼

Ein Viertel (Bruch 1 durch 4)

&#188;

&#x00BC;

C1 Controls and Latin-1 Supplement

&frac34;

¾

Drei Viertel (Bruch 3 durch 4)

&#190;

&#x00BE;

C1 Controls and Latin-1 Supplement

&frasl;

Schrägstrich

&#8260;

&#x2044;

General Punctuation

G

&Gamma;

Γ

Großes Gamma (griech. Buchstabe)

&#915;

&#x0393;

Greek and Coptic

&gamma;

γ

Kleines gamma (griech. Buchstabe)

&#947;

&#x03B3;

Greek and Coptic

&ge;

"Größer gleich ..."

&#8805;

&#x2265;

Mathematical Operators

&gt;

>

"Größer als ..."

&#62;

&#x003E;

ASCII/ Basic Latin

H

&hArr;

Breiter, nicht ausgefüllter, waagerechter Doppel-Pfeil, bei dem je eine Spitze nach rechts und nach links weist (Engl.: Left Right Double Arrow)

&#8660;

&#x21D4;

Arrows

&harr;

Dünner, waagerechter Doppelpfeil, nach rechts und nach links weisend

&#8596;

&#x2194;

Arrows

&hearts;

Herz (Kartenspiel)

&#9829;

&#x2665;

Miscellaneous Symbols

&hellip;

Auslassung (drei waagrechte Punkte)

&#8230;

&#x2026;

General Punctuation

I

&Iacute;

Í

Großes I mit Akut

&#205;

&#x00CD;

C1 Controls and Latin-1 Supplement

&iacute;

í

Kleines i mit Akut

&#237;

&#x00ED;

C1 Controls and Latin-1 Supplement

&Icirc;

Î

Großes I mit Zirkumflex

&#206;

&#x00CE;

C1 Controls and Latin-1 Supplement

&icirc;

î

Kleines i mit Zirkumflex

&#238;

&#x00EE;

C1 Controls and Latin-1 Supplement

&iexcl;

¡

Umgekehrtes Ausrufungszeichen

&#161;

&#x00A1;

C1 Controls and Latin-1 Supplement

&Igrave;

Ì

Großes I mit Grave

&#204;

&#x00CC;

C1 Controls and Latin-1 Supplement

&igrave;

ì

Kleines i mit Grave

&#236;

&#x00EC;

C1 Controls and Latin-1 Supplement

&image;

Großes I in Fraktur-Schrift (Engl.: Black Letter Capital I; imaginary part)

&#8465;

&#x2111;

Letterlike Symbols

&infin;

Unendlich, endlos

&#8734;

&#x221E;

Mathematical Operators

&int;

Integral

&#8747;

&#x222B;

Mathematical Operators

&Iota;

Ι

Großes Iota (griech. Buchstabe)

&#921;

&#x0399;

Greek and Coptic

&iota;

ι

Kleines iota (griech. Buchstabe)

&#953;

&#x03B9;

Greek and Coptic

&iquest;

¿

Umgekehrtes Fragezeichen

&#191;

&#x00BF;

C1 Controls and Latin-1 Supplement

&isin;

"Ist Element von ..."

&#8712;

&#x2208;

Mathematical Operators

&Iuml;

Ï

Großes I mit Diaeresis (Umlaut)

&#207;

&#x00CF;

C1 Controls and Latin-1 Supplement

&iuml;

ï

Kleines i mit Diaeresis (Umlaut)

&#239;

&#x00EF;

C1 Controls and Latin-1 Supplement

K

&Kappa;

Κ

Großes Kappa (griech. Buchstabe)

&#922;

&#x039A;

Greek and Coptic

&kappa;

κ

Kleines kappa (griech. Buchstabe)

&#954;

&#x03BA;

Greek and Coptic

L

&Lambda;

Λ

Großes Lambda (griech. Buchstabe)

&#923;

&#x039B;

Greek and Coptic

&lambda;

λ

Kleines lambda (griech. Buchstabe)

&#955;

&#x03BB;

Greek and Coptic

&lang;

Nach links weisende, winklige Klammer (Engl.: Left Pointing Angle Bracket)

&#9001;

&#x2329;

Miscellaneous Technical

&laquo;

«

Doppelte, winklige Anführungszeichen; dreieckige Anführungszeichen, die nach links weisen, Guillemets

&#171;

&#x00AB;

C1 Controls and Latin-1 Supplement

&lArr;

Breiter, nicht ausgefüllter, waagrechter Pfeil, der nach links weist (Engl.: Leftwards Double Arrow)

&#8656;

&#x21D0;

Arrows

&larr;

Waagerechter, dünner, nach links weisender Pfeil (Engl.: Leftwards Arrow)

&#8592;

&#x2190;

Arrows

&lceil;

(Engl.: Left Ceiling; APL upstile)

&#8968;

&#x2308;

Miscellaneous Technical

&ldquo;

Doppelte Anführungszeichen rechts oben; inverse Hochkommata

&#8220;

&#x201C;

General Punctuation

&le;

"Kleiner oder gleich"

&#8804;

&#x2264;

Mathematical Operators

&lfloor;

(Engl.: Left Floor; APL downstile)

&#8970;

&#x230A;

Miscellaneous Technical

&lowast;

Tiefergestelltes Sternchen (Engl.: Asterisk Operator; Low Asterisk)

&#8727;

&#x2217;

Mathematical Operators

&loz;

Raute (Engl.: Lozenge)

&#9674;

&#x25CA;

Geometric Shapes

&lrm;

Schreibrichtung von links nach rechts (Left-to-right mark)

&#8206;

&#x200E;

General Punctuation

&lsaquo;

Einfaches, dreieckiges Anführungszeichen (Guillemet)

&#8249;

&#x2039;

General Punctuation

&lsquo;

Einfacher Anführungsstrich oben (umgekehrtes Hochkomma)

&#8216;

&#x2018;

General Punctuation

&lt;

<

"Kleiner als ..."

&#60;

&#x003C;

ASCII/ Basic Latin

M

&macr;

¯

Macron (Querstrich über dem Buchstaben)

&#175;

&#x00AF;

C1 Controls and Latin-1 Supplement

&mdash;

Gedankenstrich von der Breite des Buchstaben m (Engl.: m-dash)

&#8212;

&#x2014;

General Punctuation

&micro;

µ

Micro-Zeichen; ähnelt dem griechischen Buchstaben kleines mu

&#181;

&#x00B5;

C1 Controls and Latin-1 Supplement

&middot;

·

Mittelpunkt (diakritisches Zeichen)

&#183;

&#x00B7;

C1 Controls and Latin-1 Supplement

&minus;

Minuszeichen (Engl.: Minus Sign)

&#8722;

&#x2212;

Mathematical Operators

&Mu;

Μ

Großes Mu (griech. Buchstabe)

&#924;

&#x039C;

Greek and Coptic

&mu;

μ

Kleines mu (griech. Buchstabe)

&#956;

&#x03BC;

Greek and Coptic

N

&nabla;

Engl.: Nabla, Laplace operator (written with superscript 2); backward difference; del

&#8711;

&#x2207;

Mathematical Operators

&nbsp;

 

Leerschritt ohne Zeilenumbruch (Engl.: Non-Breaking Space)

&#160;

&#x00A0;

C1 Controls and Latin-1 Supplement

&ndash;

Bindestrich von der Länge des Buchstaben n (Engl.: n-dash)

&#8211;

&#x2013;

General Punctuation

&ne;

Ungleich; nicht gleich

&#8800;

&#x2260;

Mathematical Operators

&ni;

"Enthält das Element ..."/ "Dergestalt, dass ..." (Engl.: Contains as Member; such that)

&#8715;

&#x220B;

Mathematical Operators

&not;

¬

"Nicht"-Zeichen

&#172;

&#x00AC;

C1 Controls and Latin-1 Supplement

&notin;

"Ist kein Element von ..."

&#8713;

&#x2209;

Mathematical Operators

&nsub;

"Ist keine Teilmenge von ...." (Engl.: Not a Subset of)

&#8836;

&#x2284;

Mathematical Operators

&Ntilde;

Ñ

Großes N mit Tilde

&#209;

&#x00D1;

C1 Controls and Latin-1 Supplement

&ntilde;

ñ

Kleines n mit Tilde

&#241;

&#x00F1;

C1 Controls and Latin-1 Supplement

&Nu;

Ν

Großes Nu (griechischer Buchstabe)

&#925;

&#x039D;

Greek and Coptic

&nu;

ν

Kleines nu (griechischer Buchstabe)

&#957;

&#x03BD;

Greek and Coptic

O

&Oacute;

Ó

Großes O mit Akut

&#211;

&#x00D3;

C1 Controls and Latin-1 Supplement

&oacute;

ó

Kleines o mit Akut

&#243;

&#x00F3;

C1 Controls and Latin-1 Supplement

&Ocirc;

Ô

Großes O mit Zirkumflex

&#212;

&#x00D4;

C1 Controls and Latin-1 Supplement

&ocirc;

ô

Kleines o mit Zirkumflex

&#244;

&#x00F4;

C1 Controls and Latin-1 Supplement

&OElig;

Œ

Ligatur aus großem O und großem E

&#338;

&#x0152;

Latin Extended-A

&oelig;

œ

Ligatur aus kleinem o und kleinem e

&#339;

&#x0153;

Latin Extended-A

&Ograve;

Ò

Großes O mit Grave

&#210;

&#x00D2;

C1 Controls and Latin-1 Supplement

&ograve;

ò

Kleines o mit Grave

&#242;

&#x00F2;

C1 Controls and Latin-1 Supplement

&oline;

Oberstrich, hochgestellter Querstrich; ähnlich dem Macron (Engl.: Overline, Spacing Overscore)

&#8254;

&#x203E;

General Punctuation

&Omega;

Ω

Großes Omega (griech. Buchstabe)

&#937;

&#x03A9;

Greek and Coptic

&omega;

ω

Kleines omega (griech. Buchstabe)

&#969;

&#x03C9;

Greek and Coptic

&Omicron;

Ο

Großes Omicron (griech. Buchstabe)

&#927;

&#x039F;

Greek and Coptic

&omicron;

ο

Kleines omicron (griech. Buchstabe)

&#959;

&#x03BF;

Greek and Coptic

&oplus;

Plus-Zeichen in einem Kreis (Engl.: Circled Plus; Direct Sum; Vector Pointing Into Page)

&#8853;

&#x2295;

Mathematical Operators

&or;

Logisches Oder (Engl.: Logical or, vee, disjunction)

&#8744;

&#x2228;

Mathematical Operators

&ordf;

ª

Weibliche Ordnungszahl (zum Beispiel in 1ª = 'primera'; Dt.: die Erste)

&#170;

&#x00AA;

C1 Controls and Latin-1 Supplement

&ordm;

º

Männliche Ordnungszahl (zum Beispiel in 2º = 'secundo', Dt.: der Zweite)

&#186;

&#x00BA;

C1 Controls and Latin-1 Supplement

&Oslash;

Ø

Großes O mit Schrägstrich

&#216;

&#x00D8;

C1 Controls and Latin-1 Supplement

&oslash;

ø

Kleines o mit Schrägstrich

&#248;

&#x00F8;

C1 Controls and Latin-1 Supplement

&Otilde;

Õ

Großes O mit Tilde

&#213;

&#x00D5;

C1 Controls and Latin-1 Supplement

&otilde;

õ

Kleines o mit Tilde

&#245;

&#x00F5;

C1 Controls and Latin-1 Supplement

&otimes;

Multiplikationszeichen in einem Kreis (Engl.: Circled Times; Tensor Product; Vector Pointing Into Page)

&#8855;

&#x2297;

Mathematical Operators

&Ouml;

Ö

Großes O mit Diaeresis (Umlaut)

&#214;

&#x00D6;

C1 Controls and Latin-1 Supplement

&ouml;

ö

Kleines o mit Diaeresis (Umlaut)

&#246;

&#x00F6;

C1 Controls and Latin-1 Supplement

P

&para;

Absatz-Zeichen (Engl.: Pilcrow)

&#182;

&#x00B6;

C1 Controls and Latin-1 Supplement

&part;

Engl.: Partial Differential

&#8706;

&#x2202;

Mathematical Operators

&permil;

Promille-Zeichen

&#8240;

&#x2030;

General Punctuation

&perp;

Senkrecht zu; Lotrecht (Engl.: Up Tack; Orthogonal to; Perpendicular; Base; Bottom)

&#8869;

&#x22A5;

Mathematical Operators

&Phi;

Φ

Großes Phi (griechischer Buchstabe)

&#934;

&#x03A6;

Greek and Coptic

&phi;

φ

Kleines phi (griechischer Buchstabe)

&#966;

&#x03C6;

Greek and Coptic

&Pi;

Π

Großes Pi (griechischer Buchstabe)

&#928;

&#x03A0;

Greek and Coptic

&pi;

π

Kleines pi (griechischer Buchstabe)

&#960;

&#x03C0;

Greek and Coptic

&piv;

ϖ

Griechisches Pi-Symbol, dem Omega ähnlich (Engl.: Greek Pi Symbol; Greek Small Letter Omega Pi; used as a technical symbol; a variant of pi, looking like omega)

&#982;

&#x03D6;

Greek and Coptic

&plusmn;

±

Plus-Minus-Zeichen, Toleranzzeichen

&#177;

&#x00B1;

C1 Controls and Latin-1 Supplement

&pound;

£

Britische Pfund Sterling (Währungszeichen)

&#163;

&#x00A3;

C1 Controls and Latin-1 Supplement

&Prime;

Doppelter 'Prime' (Zoll/ inch, Winkelminuten)

&#8243;

&#x2033;

General Punctuation

&prime;

Einfacher 'Prime' (Grad bei Winkeln)

&#8242;

&#x2032;

General Punctuation

&prod;

Mathematisches Symbol für Produkt; ähnlich dem griechischen Buchstaben großes Pi; (Engl.: n-ary Product; product sign)

&#8719;

&#x220F;

Mathematical Operators

&prop;

"Proportional zu ..." (Engl.: Proportional to)

&#8733;

&#x221D;

Mathematical Operators

&Psi;

Ψ

Großes Psi (griechischer Buchstabe)

&#936;

&#x03A8;

Greek and Coptic

&psi;

ψ

Kleines psi (griechischer Buchstabe)

&#968;

&#x03C8;

Greek and Coptic

Q

&quot;

"

Gerade, doppelte Anführungszeichen oben

&#34;

&#x0022;

ASCII/ C0 Controls and Basic Latin

R

&radic;

Quadratwurzel aus (Engl.: Square Root; Radical Sign)

&#8730;

&#x221A;

Mathematical Operators

&rang;

Nach rechts weisende, winklige Klammer (Engl.: Right-Pointing Angle Bracket)

&#9002;

&#x232A;

Miscellaneous Technical

&raquo;

»

Doppelte, winklige Anführungszeichen; dreieckige Anführungszeichen, die nach rechts weisen (Guillemets); (Engl.: Right Pointing Double Angle Quotation Mark; Right Pointing Guillemet)

&#187;

&#x00BB;

C1 Controls and Latin-1 Supplement

&rArr;

Breiter, waagrechter, nach rechts weisender Pfeil (Engl.: Rightwards Double Arrow)

&#8658;

&#x21D2;

Arrows

&rarr;

Schmaler, nach rechts weisender, waagerechter Pfeil

&#8594;

&#x2192;

Arrows

&rceil;

Engl.: Right Ceiling

&#8969;

&#x2309;

Miscellaneous Technical

&rdquo;

Doppeltes Anführungszeichen oben (Hochkommata)

&#8221;

&#x201D;

General Punctuation

&real;

Großes R in Fraktur; (Engl.: Black-Letter Capital R; Real Part)

&#8476;

&#x211C;

Letterlike Symbols

&reg;

®

Registrierte Handelsmarke, geschütztes Warenzeichen

&#174;

&#x00AE;

C1 Controls and Latin-1 Supplement

&rfloor;

Engl.: Right Floor

&#8971;

&#x230B;

Miscellaneous Technical

&Rho;

Ρ

Großes Rho (griechischer Buchstabe)

&#929;

&#x03A1;

Greek and Coptic

&rho;

ρ

Kleines rho (griechischer Buchstabe)

&#961;

&#x03C1;

Greek and Coptic

&rlm;

Schreibrichtung von rechts nach links (Engl.: Right-to-left mark)

&#8207;

&#x200F;

General Punctuation

&rsaquo;

Einfaches, winkliges Anführungszeichen; dreieckiges Anführungszeichen, das nach rechts weist; Guillemet

&#8250;

&#x203A;

General Punctuation

&rsquo;

Einfaches, gekrümmtes Anführungszeichen oben (Hochkomma)

&#8217;

&#x2019;

General Punctuation

S

&sbquo;

Einfaches, gekrümmtes Anführungszeichen unten

&#8218;

&#x201A;

General Punctuation

&Scaron;

Š

Großes S mit Caron (Hatschek)

&#352;

&#x0160;

Latin Extended-A

&scaron;

š

Kleines s mit Caron (Hatschek)

&#353;

&#x0161;

Latin Extended-A

&sdot;

Engl.: Dot Operator

&#8901;

&#x22C5;

Mathematical Operators

&sect;

§

Paragraphen-Zeichen (Engl.: section sign)

&#167;

&#x00A7;

C1 Controls and Latin-1 Supplement

&shy;

­

Bedingter Trennstrich

&#173;

&#x00AD;

C1 Controls and Latin-1 Supplement

&Sigma;

Σ

Großes Sigma (griechischer Buchstabe)

&#931;

&#x03A3;

Greek and Coptic

&sigma;

σ

Kleines sigma (griechischer Buchstabe)

&#963;

&#x03C3;

Greek and Coptic

&sigmaf;

ς

Engl.: Greek Small Letter Final Sigma; The modern Greek name for this letterform is stigma, not to be confused with the actual stigma letter.

&#962;

&#x03C2;

Greek and Coptic

&sim;

Ungefähr; Ähnelt; Entspricht etwa; (Engl.: Tilde operator; similar to; varies with (proportional to); difference between; not; cycle; APL tilde)

&#8764;

&#x223C;

Mathematical Operators

&spades;

Pik (Kartenspiel)

&#9824;

&#x2660;

Miscellaneous Symbols

&sub;

Teilmenge von (Engl.: Subset of; included in set)

&#8834;

&#x2282;

Mathematical Operators

&sube;

Teilmenge von oder gleich (Engl.: Subset of or equal to)

&#8838;

&#x2286;

Mathematical Operators

&sum;

Summenzeichen (Engl.: n-ary summation; summation sign); ähnelt dem griechischen Großbuchstaben Sigma

&#8721;

&#x2211;

Mathematical Operators

&sup;

Obermenge von (Engl.: Superset of; included in set)

&#8835;

&#x2283;

Mathematical Operators

&sup1;

¹

"Hoch 1"

&#185;

&#x00B9;

C1 Controls and Latin-1 Supplement

&sup2;

²

"Hoch 2", zum Quadrat

&#178;

&#x00B2;

C1 Controls and Latin-1 Supplement

&sup3;

³

"Hoch 3", Kubik

&#179;

&#x00B3;

C1 Controls and Latin-1 Supplement

&supe;

Obermenge von oder gleich; (Engl.: Superset of or equal to)

&#8839;

&#x2287;

Mathematical Operators

&szlig;

ß

Esszett; scharfes S; Ligatur aus kleinem s und kleinem z

&#223;

&#x00DF;

C1 Controls and Latin-1 Supplement

T

&Tau;

Τ

Großes Tau (griechischer Buchstabe)

&#932;

&#x03A4;

Greek and Coptic

&tau;

τ

Kleines tau (griechischer Buchstabe)

&#964;

&#x03C4;

Greek and Coptic

&there4;

Daher; daraus folgt; (Engl.: therefore)

&#8756;

&#x2234;

Mathematical Operators

&Theta;

Θ

Großes Theta (griechischer Buchstabe)

&#920;

&#x0398;

Greek and Coptic

&theta;

θ

Kleines theta (griechischer Buchstabe)

&#952;

&#x03B8;

Greek and Coptic

&thetasym;

ϑ

Griechisches Theta-Symbol (Engl.: Greek Theta Symbol; Greek Small Letter Script Theta; used as a technical symbol)

&#977;

&#x03D1;

Greek and Coptic

&thinsp;

Schmaler Leerschritt (Engl.: Thin space)

&#8201;

&#2009;

General Punctuation

&THORN;

Þ

Großes Thorn (isländischer Buchstabe)

&#222;

&#x00DE;

C1 Controls and Latin-1 Supplement

&thorn;

þ

Kleines thorn (isländischer Buchstabe)

&#254;

&#x00FE;

C1 Controls and Latin-1 Supplement

&tilde;

˜

Tilde

&#732;

&#x02DC;

Spacing Modifier Letters

&times;

×

Multiplikationszeichen; "Multipliziert mit ..."

&#215;

&#x00D7;

C1 Controls and Latin-1 Supplement

&trade;

"Trademark"-Zeichen (geschützte Handelsmarke)

&#8482;

&#x2122;

Letterlike Symbols

U

&Uacute;

Ú

Großes U mit Akut

&#218;

&#x00DA;

C1 Controls and Latin-1 Supplement

&uacute;

ú

Kleines u mit Akut

&#250;

&#x00FA;

C1 Controls and Latin-1 Supplement

&uArr;

Breiter, nicht ausgefüllter, senkrechter, nach oben weisender Pfeil

&#8657;

&#x21D1;

Arrows

&uarr;

Dünner, senkrechter, nach oben weisender Pfeil

&#8593;

&#x2191;

Arrows

&Ucirc;

Û

Großes U mit Zirkumflex

&#219;

&#x00DB;

C1 Controls and Latin-1 Supplement

&ucirc;

û

Kleines u mit Zirkumflex

&#251;

&#x00FB;

C1 Controls and Latin-1 Supplement

&Ugrave;

Ù

Großes U mit Grave

&#217;

&#x00D9;

C1 Controls and Latin-1 Supplement

&ugrave;

ù

Kleines u mit Grave

&#249;

&#x00F9;

C1 Controls and Latin-1 Supplement

&uml;

¨

Diaeresis (Umlaut)

&#168;

&#x00A8;

C1 Controls and Latin-1 Supplement

&upsih;

ϒ

Großes Upsilon mit Haken (griech. Buchstabe) (Engl.: Greek Upsilon With Hook Symbol; Greek Capital Letter Upsilon Hook)

&#978;

&#x03D2;

Greek and Coptic

&Upsilon;

Υ

Großes Upsilon (griechischer Buchstabe)

&#933;

&#x03A5;

Greek and Coptic

&upsilon;

υ

Kleines upsilon (griechischer Buchstabe)

&#965;

&#x03C5;

Greek and Coptic

&Uuml;

Ü

Großes U mit Diaeresis (Umlaut)

&#220;

&#x00DC;

C1 Controls and Latin-1 Supplement

&uuml;

ü

Kleines u mit Diaeresis (Umlaut)

&#252;

&#x00FC;

C1 Controls and Latin-1 Supplement

W

&weierp;

Kleines p in Schreibschrift; Weierstrass'sche Ellipsen-Funktion (Engl.: Script Capital P; Weierstrass Elliptic Function; actually this has the form of a lowercase calligraphic p, despite its name)

&#8472;

&#x2118;

Letterlike Symbols

X

&Xi;

Ξ

Großes Xi (griech. Buchstabe)

&#926;

&#x039E;

Greek and Coptic

&xi;

ξ

Kleines xi (griech. Buchstabe)

&#958;

&#x03BE;

Greek and Coptic

Y

&Yacute;

Ý

Großes Y mit Akut

&#221;

&#x00DD;

C1 Controls and Latin-1 Supplement

&yacute;

ý

Kleines y mit Akut

&#253;

&#x00FD;

C1 Controls and Latin-1 Supplement

&yen;

¥

Yen-Zeichen (japanisches Währungszeichen)

&#165;

&#x00A5;

C1 Controls and Latin-1 Supplement

&Yuml;

Ÿ

Großes Y mit Diaeresis

&#376;

&#x0178;

Latin Extended-A

&yuml;

ÿ

Kleines y mit Diaeresis (Umlaut)

&#255;

&#x00FF;

C1 Controls and Latin-1 Supplement

Z

&Zeta;

Ζ

Großes Zeta (griech. Buchstabe)

&#918;

&#x0396;

Greek and Coptic

&zeta;

ζ

Kleines zeta (griech. Buchstabe)

&#950;

&#x03B6;

Greek and Coptic

&zwj;

Engl.: Zero Width Joiner

&#8205;

&#x200D;

General Punctuation

&zwnj;

Engl.: Zero Width Non-Joiner

&#8204;

&#x200C;

General Punctuation




Gebot 3

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.

(gelb hinterlegt)

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.

(rosa hinterlegt)

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

Gebot 4

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

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

(rosa hinerlegt)

Gebot 6

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.

(gelb hinterlegt)

Gebot 7

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

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.

(gelb hinterlegt)

Gebot 9

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.

Gebot 10

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


Befehle HTML

Allgemeines 

HTML-Tag

Attribute

End-Tag

Bedeutung

Bsp.

<!--

 

-->

Damit können ganze Passagen ausgeklammert werden und werden vom Browser nicht mehr angezeigt. Sehr schöne Möglichkeit, um Dinge auszuprobieren!!!
So werden Kommentare im HTML-Code vermerkt, die auf der im Browser angezeigten Seite nicht sichtbar, aber beim Erstellen und Erweitern hilfreich sind.

 

<hr>

 

 

Damit können Trennlinien eingezogen werden. Farbe, Länge und Stärke können bestimmt werden.
(e: hr = horizontal ruler = horizontale Linie)

 

<html>

 

</html>

Anfang und Ende des HTML-Codes. Ihre neue Spielwiese :-)
(e: html=hypertext markup language)

 

<head>

 

</head>

Der Kopfbereich, in dem allgemeine Angaben gemacht werden, die nicht im Browserfenster angezeigt werden.
(e: head=kopf)

 

<body>

 

</body>

ab hier kommt unser eigentlicher Inhalt, der im Gegensatz zum head-Bereich im Browserfenster angezeigt wird.
(e: body=Körper)

 

<title>

 

</title>

Wichtig! Titel hat mehrere wichtige Funktionen:
- Titelzeile des Anzeigefensters
- Namen von gesetzten Lesenzeichen/Bookmarks
- Liste der bereits besuchten Seiten
- und für die Eintragung bei Suchmaschinen
(e: title=Titel)

 

 

Schriftattribute 

HTML-Tag

Attribute

End-Tag

Bedeutung

Bsp.

<b>

 

</b>

Schrift wird fett angezeigt
(e: b=bold=fett)

 

<i>

 

</i>

kursive Schrift
(e: i=italic)

 

<u>

 

</u>

unterstrichene Schrift - sehr mit Vorsicht zu genießen,
da der Surfer bei unterstrichenen Passagen von Links ausgeht!
(e: u=underlined=unterstrichen)

 

<sup>

 

</sup>

hochgestellte Schrift, z.B. 0C
(e: sup=superscript, zu deutsch etwa Hochstellung)

 

<sub>

 

</sub>

tiefgestellte Schrift, z.B. H2O
(e: sub=subscript, zu deutsch ungefaehr Tiefstellung)

 

<tt>

 

</tt>

bewirkt Schrift mit gleichen Abständen (dicktengleich)
(e: tt=teletyper=Fernschreiber)

 

 

Schriftgröße 

HTML-Tag

Attribute

End-Tag

Bedeutung

<h1> .. <h6>

 

</h1> .. </h6>

Leitet eine Überschrift ein (reagiert wie Absatz!) x kann einen Wert von 1 bis 6 annehmen. Die größte Überschrift ist 1, die kleinste 6.
(e: h=heading=Überschrift)

<h1
..
<h2

align=left
align=center
align=right
align=justify
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

</h1>
..
</h6>

Überschriften können wie Absätzen ausgerichtet werden

<font size=...>

 

< /font >

Bestimmen Sie hier die Schriftgröße von 1 - 7. Die Angaben sind relativ. Die Normalschriftgröße ist 3. Größere Schrift bekommt man mit 4,5,6 oder 7. Kleinere Schrift mit 1 oder 2.
(e: font size = Schriftgröße)

<small>

 

</small>

Macht die Schrift um einen Schritt kleiner
(e: small=kleiner)

<big>

 

</big>

Macht die Schrift um einen Schritt größer
(e: big=größer)

 

Absatzaufbau 

HTML-Tag

Attribute

End-Tag

Bedeutung

<p>

align="left"
align="center"
align="right"
align="justify"

</p>

Absatzbeginn - vor und nach dem Absatz wird automatisch Platz gehalten
(e: p=paragraph)
(e: align=Ausrichtung)

<center>

 

</center>

zentrierte Ausrichtung (oft bei Gedichten)
(e: center=zentriert)

<br>

 

 

erzwungener Zeilenumbruch (Zeilenende)
(e: br=break=Umbruch)

<nobr>

 

</nobr>

erzwungener Zusammenhalt, was z.B. für Wortgebilde wie "V 4.1" geschickt ist.
(e: nobr=nobreak=kein Umbruch)

<blockquote>

 

</blockquote>

Hiermit können Zitate aufgenommen werden. Tag verhält sich wie Absatztag, wobei das aussehen vom Browser definiert wird! Meistens eingerückt, auf jeden Fall anders formatiert wie Rest.
(e: blockquote=geblocktes Zitat)

 

Aufzählungen 

HTML-Tag

Attribute

End-Tag

Bedeutung

Bsp.

<li>

 

</li>

Bei allen Aufzählungen (nächste 2 Punkte) müssen die Einzelpunkte durch diesen Tag gekennzeichnet sein.
(e: li = list item = Listeneintrag )

 

<ul>

 

</ul>

Leitet eine Aufzählugsliste ein. Wie der Spiegelstrich dargestellt wird, bestimmt der WWW-Browser. (weiteres siehe TAG <li> !)
(e: ul=unordered list=unsortierte Liste)

 

<ol

start="1" type="1">
start="1" type="I">
start="1" type="i">
start="1" type="A">
start="1" type="a">
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

</ol>

Leitet eine nummerierte Liste ein - Attribut ist erforderlich!
start="1" - aber welcher Einheit gestartet werden soll
type="1" - für numerische Liste
type="I" - Liste mit römischen Ziffern
type="i" - Liste mit kleinen römischen Ziffern
type="A" - Liste mit Buchstaben
type="a" - Liste mit kleinen Buchstaben
(e: ol=ordered list=numerierte Liste)

 

 

Verweise [Links] 

HTML-Tag

Attribute

End-Tag

Bedeutung

Bsp.

<a

href="..."> Ihre Beschreibung dazu

</a>

für interne & externe Linkes. "Ihre Beschreibung" wird später im Browser als so genannter Link angezeigt und kann angeklickt werden.
(e: a=anchor=Anker)
(e: href=hyper reference=Hypertext-Referenz

 

<a

href="start.htm">

</a>

interner Link

 

<a

href="http://www.uxl.de/">

</a>

externe Link

 

<a

href="http://www.uxl.de/" target="_blank">

</a>

für externen Link wird neue Browserinstanz aufgemacht.

 

<a

href="#xy">Sprung nach xy

</a>

Sprungmarke (wird durch # gekennzeichnet) zu einem bestimmten Punkt, hier "xy". Der Punkt muss definiert werden - dazu nächsten Tag anschauen.

 

<a

name="xy">irgendwas

</a>

dieser Punkt, hier "xy", soll direkt anspringbar sein. "irgendwas" darf nicht leer bleiben,.

 

<a

href="mailto:axl@uxl.de"> axl@uxl.de

</a>

So kann eine E-Mail-Adresse eingegeben werden. Durch anklicken öffnet sich das E-Mail-Prg. (sofern installiert) und die E-Mail-Adresse ist bereits eingegeben.
(e: mailto= schicke nach

 

 

Farben in HTML 

HTML-Tag

Attribute

End-Tag

Bedeutung

Bsp.

<body

bgcolor="...">

Hintergrundfarbe der ganzen Seite

 

<font

color="...">farbiges

</font>

Farbe der Schrift

 

<table

bgcolor="...">

</table>

Hintergrundfarbe Tabellen

 

<td

bgcolor="...">

</td>

Hintergrundfarbe Tabellenzelle (geht auch für Tabellenzeile bei <tr>)

 

 

Farben werden in HTML als sechsstellige Hex-Zahl notiert, es gibt jedoch auch eine Reihe festgelegter Namen, die man stattdessen benutzen kann

Farbnamen

Hex + Farbe

black

#000000

maroon

#800000

green

#008000

olive

#808000

navy

#000080

purple

#800080

teal

#008080

gray

#808080

silver

#c0c0c0

red

#FF0000

lime

#00FF00

yellow

#FFFF00

blue

#0000FF

fuchsia

#FF00FF

aqua

#00FFFF

white

#FFFFFF

 

Rich text note

So, nun aber genug zu HTML. Jetzt geht es an die Gestaltung eurer Website. Die CSS Stylesheets helfen euch dabei eurer Website das gewisse Etwas zu verpassen. Was CSS Stylesheets sind, welche Befehle es gibt und noch einiges mehr erfahrt ihr hier.

Was ist CSS???

Was ist CSS ?

 

Begriff:

CSS steht für "Cascading Style Sheets". CSS Stylesheets sind eine Ergänzung von HTML.

 

Sinn und Zweck:

Mit Hilfe von Stylesheets können zum Beispiel Textformatierungen, Hintergrundfarben- und Bilder, Formulare oder andere HTML-Elemente zentral festgelegt werden, wie dies in reinem HTML nicht möglich ist.

Sie können im Kopf oder Body einer HTML-Datei oder sogar in separaten Dateien notiert werden. Auf diese Weise können für große Projekte einheitliche Layouts festgelegt werden. Mit ein paar kleinen Änderungen in einer zentralen Stylesheet-Datei können Sie dann für hunderte von HTML-Dateien ein anderes Aussehen bewirken.

 

--> CSS Stylesheets unterstützen also erstens die professionelle Gestaltung beim Web-Design, sparen Speicherplatz und helfen beim Erstellen von umfangreichen HTML-Dateien!!!!

Befehle CSS

Befehl

Bedeutung

weitere mögliche Angaben

Schrift

 

 

font-family

Schriftart

Arial, Times New Roman, etc.

font-size

Schriftgröße

numerischer Wert in pt(Punkt) mm oder cm

color

Schriftfarbe

red, green, white usw. oder HTML Farbangabe

font-variant

Schriftvariante

normal, small-caps

font-weight

Schriftgewicht

normal, bold, bolder, lighter

font-style

Schriftstil

normal, oblique, italic

 

 

 

Textgestaltung

 

 

text-align

Textausrichtung

left, right, center, justify (Blocksatz)

line-height

Zeilenabstand (Durchschuß)

numerischer Wert in pt(Punkt) mm oder cm

text-decoration

Textgestaltung

underline, overline, line-through, blink

word-spacing

Wortabstand

numerischer Wert in pt(Punkt) mm oder cm

letter-spacing

Zeichenabstand

numerischer Wert in pt(Punkt) mm oder cm

text-indent

Texteinrückung

numerischer Wert in pt(Punkt) mm oder cm

text-transform

Textart

capitalize, uppercase, lowercase, none

 

 

 

Seitenränder

 

 

margin-left

absoluter Abstand zum Seitenrand

numerischer Wert in pt(Punkt) mm oder cm

margin-right

absoluter Abstand zum Seitenrand

numerischer Wert in pt(Punkt) mm oder cm

margin-bottom

absoluter Abstand zum Seitenrand

numerischer Wert in pt(Punkt) mm oder cm

margin-top

absoluter Abstand zum Seitenrand

numerischer Wert in pt(Punkt) mm oder cm

 

 

 

Links

 

 

A:link

Link

fast alle CSS-Befehle anwendbar

A:visited

Besuchter Link

fast alle CSS-Befehle anwendbar

A:active

Angeklickter Link

fast alle CSS-Befehle anwendbar

A:hover

Link beim überfahren mit Maus

fast alle CSS-Befehle anwendbar

 

 

 

Bilder

 

 

background

Hintergrundfarbe

red, green, white usw. oder HTML Farbangabe

background-image

Hintergrundbild

none, URL

background-repeat

Kachel

repeat, repeat-x, repeat-y, no-repeat

 

 

 

Ränder

 

 

border-top-width

Dicke der Rahmenlinie

thin, medium, thick oder num. Wert

border-bottom-width

Dicke der Rahmenlinie

thin, medium, thick oder num. Wert

border-left-width

Dicke der Rahmenlinie

thin, medium, thick oder num. Wert

border-right-width:

Dicke der Rahmenlinie

thin, medium, thick oder num. Wert

border-style

Rahmentyp

none, dotted, dashed, solid, double, groove, ridge, inset, outset

border-color

Rahmenfarbe

Farbname oder Hex.

padding-top

Tabellenabstand oben

Prozent oder num. Wert.

padding-bottom

Tabellenabstand unten

Prozent oder num. Wert.

padding-right

Tabellenabstand rechts

Prozent oder num. Wert.

padding-left

Tabellenabstand links

Prozent oder num. Wert.

width

Rahmenbreite

Auto, Prozent, num. Wert

height

Rahmenhöhe

Auto, Prozent, num. Wert

Vorteile und Nachteile von CSS

Vorteile von CSS

Mehr über das CSS Box-Modell...

http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512

Vorteile und Nachteile von CSS

Nachteile von CSS

Photos

Just for fun ;-)

Basics

Quelle: TU Ilmenau - Elektronische Dokumente WS 06/07 Foliensatz für Studierende von Dipl.-Inf. Gunther Kreuzberger

Gebot 1

Quelle: TU Ilmenau - Elektronische Dokumente WS 06/07 Foliensatz für Studierende von Dipl.-Inf. Gunther Kreuzberger

Gebot 2

Gebot 3

Gebot 5

Das gelb hinterlegte Feld zeigt ein Beispiel für eine Schachtelung anhand einer Liste.

Gebot 6

So sollte es nicht aussehen!

Gebot 8

Gebot 10

Just for fun ;-)

CSS Box-Modell

Hilfs-Widgets

News

Video-Podcasts feed 1

Video-Podcasts feed 2

Rich sticky notes

MP3s einbinden

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

Einbindung von QuickTime- und IPod-Filme (mov, mp4)

Einfach auf "http://video.google.de/videoplay?docid=6011692160371727838&q=microsoft+word2000" klicken, gebenenfalls "HTML" anwählen und die Link-Adresse in das Skript hineinkopieren.

Kommentare