List of public pages created with Protopage

Wir über uns

Rich sticky notes

Servus


Wir 4 Mädels begrüßen Euch auf unserer Protopage!
Sehet Euch um und habet Spaß!

 

Maike, Jule, Kathrin und Steffi

 

PS: Es würde unseren kleinen Freund Protopuppy freuen, wenn Ihr Euch ein bischen um ihn kümmern würdet.

Neuigkeiten

 

Nützliche Hinweise und Links zu HTML und CSS. Jetzt hier bei uns exklusiv zum anschauen ;-)

 

 

Euer 4fine-Team!

Photos

Das sind wir!

Aufgaben

News

Tutorblog

Word

Rich sticky notes

Orientierung

Sooooo... Ihr wollt Neues über MS Word erfahren?
Dann seid ihr hier richtig! Einfach durchklicken und checken...

Ihr könnt vieles über Fehler und ihre Behebungen erfahren, auf nützliche Links klicken und euch einen Überblick verschaffen.

Praktikumsaufgaben

Die einzeln bearbeiteten Teile der Hausarbeit:

Die Dokumentenvorlagen:

Die zusammengefügte Hausarbeit als:

Nützliche Links

Allgemeine Hinweise

    1. Bevor Ihr mit der Arbeit beginnt, solltet Ihr darauf achten, dass Ihr in eurem Dokument die Formatierungszeichen seht. Dies könnt Ihr über „Extras" unter "Optionen“ einstellen. Der Screenshot wird euch dabei helfen diese Einstellung zu finden.
    2. Egal ob Ihr schon feststehende Textbausteine in Eurem Dokument oder manuell eine Gliederung eingefügt habt, diese Dinge können jeder Zeit in ein Format umgewandelt werden(siehe Beitrag „5. Todsünde“).

MS Word: Todsünden

Im folgenden werden die 10 Todsünden in der Textbearbeitung genannt und erklärt, wie es richtig gemacht wird. Abbildungen und Videos werden euch helfen, die Lösungen besser zu verstehen.

1. Todsünde

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

 

Word kennt dafür die Option „Einzug“ zum Befehl „Absatz“.

Aaalso:
Für Absätze oder Sondereinzüge einfach die jeweilige Option in MS Word nutzen!
Nämlich:

  • Cursor vor einzurückendes Zeichen setzen
  • in Menüleiste "Format" und dort "Absatz" klicken (siehe Abbildung 1)
  • unter "Absatz" kann man nun wählen, wie man seinen Einzug gestalten möchte   (z.B. "Erste Zeile" um "1,25" cm einrücken, wie in Abbildung 2)

2. Todsünde

Du sollst einzelne Zeilen nicht durch einen Druck auf „Enter | Return“ beenden!

 

Diese Taste ist nur für das Ende eines Absatzes notwendig!

 

Das bedeutet:

3. Todsünde

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

 

Auch hierfür gibt es eine Option in MS Word:

4. Todsünde

Du sollst Trennstriche nicht mit einem Druck auf Leertaste einfügen

 

5. Todsünde

Du sollst keine direkte Formatierung innerhalb des Textes vornehmen 

6. Todsünde

Du sollst Listen nicht manuell erstellen, z.B. mit „Sonderzeichen“ oder Bindestrichtaste

 

7. Todsünde

Du sollst dein Dokumentes nicht nur über die Erste Gliederungsebene strukturieren

  • Strukturiere die Gliederung deines Dokumentes über mehrere Gliederungsebenen
  • Damit schaffst du es, dass dein Dokument übersichtlicher wirkt
  • Am besten wäre es, wenn du wieder die systemseitigen Formatvorlagen „Überschrift 1 … n“ verwendest
  • Dafür gehst du im Menü unter den Punkt „Format“ auf „Nummerierung und Aufzählungszeichen“.
  • Danach wählst du im Register den Punkt „Gliederung“ an und suchst dir eine passende Nummerierungsform aus.
  • Diese kann aus arabischen Ziffern oder auch Buchstaben bestehen.
  • Wenn du ein Form angewählt hast, klickst du auf den Button „Anpassen“ und kannst somit die verschiedensten Gliederungsebenen formatieren.
  • Du kannst ihren Einzug verändern, ein Format zuweisen oder die Schriftart ändern
  • Doch damit das Thema nicht so trocken ist, schaue dir einfach das Video an…

8. Todsünde

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

 


 

9. Todsünde

Du sollst Inhaltsverzeichnisse weder manuell erstellen noch in ein seperates Dokument ausgliedern.

 

Niemals selbst erstellen und mit Tap einrücken - klappt meistens sowieso nicht

 

10. Todsünde

Du sollst Kommentare und Änderungen nicht durch manuelle Formatierung z.B. durch manuelle Farbänderungen oder andere direkte Formatierungen kennzeichnen.

 

Nicht so wie in Abbildung 10!

 

Wichtig für die Arbeit im Team!

 

Wie ein neues Dokumet fehlerfrei entstehen kann!

Wie ein neues Dokument fehlerfrei entstehen kann.

Beispiel an einem Deckblatt für eine Hausarbeit nach den IfMK - Richtlinien

 

Bevor man anfängt ein Hausarbeit oder ähnliches zu schreiben, sollte man vorher seine Formatierung überlegen und einrichten, um sich den Arbeitsaufwand in nachhinein zu ersparen.

 

Seite einrichten

Zunächst einmal sollte man die Seite einrichten. Dazu gehören die Seitenränder, die nach
IfMK – Richtlinien folgende Werte haben müssen:

 

Diese Einstellungen werden unter dem Menüpunkt „Datei – Seite einrichten“ getätigt. Da die Erste Seite einer Hausarbeit meistens unterschiedlich gestaltet ist als der Rest der Arbeit, muss außerdem unter „Seite einrichten“ im Register „Layout“ der Haken im Feld „Erste Seite anders“ gesetzt werden.

 

Formatvorlage einrichten

Weiterhin sollte man vor beginn der Schreibarbeit bestimmte Formate für Überschriften, Absätze und sonstige anfallende Formatunterschiede einrichten.

Am besten fängt man erst mal damit an, dass man sich die Formatierung anzeigen lässt (siehe Beitrag zur „5. Todsünde“). Von hier aus können die systemeigenen Formate dann entsprechend den eignen Vorlieben bzw. Vorschriften eingerichtet werden. Eins der wichtigsten Formate ist wohl das „Standard“ Format. Es bildet die Basis aller Formate und sollte mit den wichtigsten Details gerüstet werden. Hier gelten wieder für AMW Studenten der TU – Ilmenau die Richtlinien des IfMK.

 

Da es hier aber um die Beschreibung zur Einrichtung eines Deckblattes geht, sind folgende Formate noch von Bedeutung:

§         „Titel 1“ und „Titel 2“, damit die Überschrift der Hausarbeit entsprechend per Mausklick formatiert werden kann.

§         „Adresse“ und  „Absender“, da sich die Ausrichtung der Texte im Bezug zum „Standard“ Format unterscheiden.

 

Hier könnt ihr euch eine Dokumentenvorlage zum Thema „Fehlerfreies Deckblatt“ anschauen..

Wie erstelle ich eine Dokumentenvorlage?

Zunächst einmal sollte man ein neues Dokument öffnen und wie vorher schon einige male erwähnt eine Formatierung vor nehmen. Wie das genau geschieht, kann man in den oberen Beiträgen nachlesen. Hier soll nur einmal erwähnt werden, welche Formate wichtig sind.

 

Seite einrichten

 

Formatvorlage einrichten

Systemeigene Formate

„Standard“ – Format

 

„Überschrift“

Ein ganz wichtiger Punkt bei der Einrichtung der Formatvorlage ist die Erstellung der Formate für die unterschiedlichen Überschriften. Sie sind nämlich ein wichtiger Teil der Nummerierung und helfen uns später bei der Erstellung eines Inhaltsverzeichnisses. Dabei sollte man folgendes beachten:

Benutzerdefinierte Formate

„Titel 1“ und „Titel 2“

 Diese bräuchte man im Deckblatt. Sie sollen die Formatierung für das Thema der Hausarbeit enthalten.

 

„Adresse“ und  „Absender“

Auch wieder ein wichtiger Teil vom Deckblatt. Da sich die Ausrichtung von Absender und Adresse im Bezug zum „Standard“ Format unterscheidet.

 

An dieser Stelle würde es sich empfehlen die Arbeit an der Formatvorlage erst mal abzuschließen und sich um die Gliederungsebenen kümmern.

 

Gliederung

Wie man Gliederungsebenen einrichtet findest du im Beitrag „7. Todsünde“.

 

Nochmals Formatvorlage mit „Absatz“

Nachdem man die Gliederungsebenen eingerichtet hat, können nun die benötigten Absätze eingerichtet werden. Diese können je nach Anzahl der Gliederungsebene variieren. Bei den Absätzen werden nur die Einzüge verändert. Dabei sollte man sich an die Einzüge der jeweiligen Gliederungsebenen halten. Beispiel:

 

Kopf- und Fußzeile

Kurz vor dem Ende der Formatierung des Dokumentes ist es noch wichtig eine geeignete Kopf- und Fußzeile einzurichten.  Für nähere Informationen siehe den Beitrag zur „8. Todsünde“. Dabei muss beachtet werden, dass die Seitenzahl ab Seite 2 beginnt (was automatisch passieren sollte, wenn man die Seite richtig eingerichtet hat).

 

Inhaltsverzeichnis

Alle im Text verwendeten Kapitelüberschriften müssen in einem hierarchischen System durchnummeriert und im Inhaltsverzeichnis mit der gleichen Nummer und der Seitenangabe, auf der die Überschrift steht, aufgeführt werden. Hierfür empfiehlt es sich zunächst einmal die Hausarbeit zu schreiben bzw. Platzhaltertexte einzufügen, den Gliederungsebenen die Entsprechenden Formate zu zuteilen und danach das Inhaltsverzeichnis einzufügen. Die genaue Anleitung zur Erstellung eines Inhaltsverzeichnisses, kann im Beitrag „9. Todsünde“ nachgelesen werden.

 

Wenn man dann fertig ist mit den einzelnen Schritten, kommt der wichtigste Teil einer Dokumentenvorlage. Und zwar das Speichern. Hierfür müsst ihr auf „Datei – Speichern unter“ (siehe Abbildung 12) und den „Dateityp“ namens „*.dot“ einrichten (siehe Abbildung 13). Normalerweise springt Word automatisch in sein Verzeichnis „Vorlagen“, aber dieses kann man einfach verändern, so wie den Namen der zu speichernden Datei.

 

Wie solch eine Dokumentenvorlage aussehen kann, seht ihr hier...

 

Diese Beschreibung ging jetzt zwar ein bisschen weiter als erwartet, doch hilfreiche Tipps zur Erstellung einer Dokumentenvorlage kann man doch immer gebrauchen. 

Photos

Ansicht "Extras"

Ansicht "Optionen"

Abbildung 1

Abbildung 2

Abbildung 3

Abbildung 4

Abbildung 5

Abbildung 6

Abbildung 7

Abbildung 10

Abbildung 11

Abbildung 12

Abbildung 13

HTML & CSS

Rich sticky notes

Orientierung

Huhu! Da sind wir wieder!

Diesmal haben wir uns für euch mit HTML und CSS beschäftigt und wertvolle Tipps und Tricks auf dieser Seite bereitgestellt. Viel Spaß beim Durchschauen!

Euer 4fine-Team!

Praktikumsaufgaben

Die einzeln bearbeiteten HTML-Profile:

 

Profil 1, bearbeitet von Maike

Profil 2, bearbeitet von Jule

Profil 3, bearbeitet von Kathrin

Profil 4, bearbeitet von Steffi

 

Unsere eigenen Profile:

 

Profil von Maike

Profil von Jule

Profil von Kathrin

Profil von Steffi

 

Unser Gruppenprofil:

 

Profil von 4fine

Einführung und Definitionen

HTML?! Was ist das eigentlich?

 

Die exakte Bezeichnung für HTML lautet "Hypertext Markup Language", was ungefähr "Beschreibungssprache für Texte mit Verknüpfungen" bedeutet. Sie basiert auf SGML (Standard Generalized Markup Language), welche von IBM entwickelt wurde.

HTML ist keine Programmiersprache, sondern eine Dokumentenbeschreibungssprache. Jedes beliebige Textverarbeitungsprogramm kann HTML-Seiten ansehen und erstellen. HTML hat den Vorteil, das es ohne Bedeutung ist, welches Betriebssystem oder welcher Computer verwendet wird. HTML ist eine Standardsprache im WWW.

 

komplette Quelle zum Nachlesen 

 

Und CSS???

 

CSS ist eine Stilsprache, die das Aussehen von HTML-Dokumenten definiert. CSS kann man z.B. zum festlegen von Schriftarten, Farben, Rändern, Linien, Höhen, Breiten, Hintergrundbildern, für fortgeschrittener Positionierung und viele andere Sachen benutzen.

HTML kann zum layouten von Webseiten (miß-)braucht werden. Aber CSS bietet mehr Möglichkeiten und ist zudem viel genauer und ausgereifter. Desshalb sollte CSS bei der sauberen Erstellung von HTML-Dokumenten immer genutzt werden. CSS wird von allen Browsern unterstützt.

 

komplette Quelle zum Nachlesen

 

CSS-Workshop Link

 

Also nochmal kurz gesagt:

Wo ist der Unterschied zwischen CSS und HTML?

 

Mit HTML werden Inhalte strukturiert. Mit CSS wird der strukturierte Inhalt formatiert.

 

Nützliche Links

Übersicht Tags - allgemein

HTML-Tag

Attribute

End-Tag

Bedeutung

<!--

 

-->

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)

Übersicht Tags - Schriftattribute

HTML-Tag

Attribute

End-Tag

Bedeutung

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

Übersicht Tags - 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

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

Übersicht Tags - 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)

Übersicht Tags - Aufzählungen

HTML-Tag

Attribute

End-Tag

Bedeutung

<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">

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

Übersicht Tags - Verweise (Links)

HTML-Tag

Attribute

End-Tag

Bedeutung

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

Übersicht Tags - Farben

HTML-Tag

Attribute

End-Tag

Bedeutung

<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

HTML & CSS

Hier sind 10 Gebote die bei der HTML-Programmierung zu beachten sind!

1. Gebot

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

Bei der Erstellung eines HTML – Dokumentes müssen folgende Punkte beachtet werden:

Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen:

Schema:

<html>

           <head>

                      <titel>Beschreibung der Seite</titel>

           </head>

           <body>

           </body>

</html>

 

Erläuterung:

Der gesamte Inhalt einer HTML-Datei wird in die Tags <html> bzw. </html> eingeschlossen. Hinter dem einleitenden HTML-Tag folgt das einleitende Tag für den Kopf <head>. Zwischen diesem Tag und seinem Gegenstück </head> werden die Kopfdaten einer HTML-Datei notiert.

Unterhalb davon folgt der Textkörper, begrenzt durch <body> bzw. </body>. Dazwischen wird dann der eigentliche Inhalt der Datei notiert, also das, was im Anzeigefenster des WWW-Browsers angezeigt werden soll.

 

2. Gebot

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

 

Also erstmal zur Erklärung: HTML-Dateien bestehen aus Text. Der Inhalt von HTML-Dateien steht in HTML-Elementen, die durch sogenannten Tags markiert werden. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag in Spitzen Klammern notiert.

Hier die Quelle zum nachlesen für mehr Informationen.

 

Beim Arbeiten mit Tags müsst ihr einfach ein paar Regeln beachten:

Abbildung 5

HTML-Sonderzeichen

In HTML werden alle Sonderzeichen mit einem Und-Zeichen (&) begonnen und enden mit einem Semikolon (;). Dabei gibt es zwei Sorten der Definition von Sonderzeichen: als Unicode-Zeichen und als Name-Zeichen.

Hier ein paar Beispiele mehr:

Unicode

Name

Symbol

Normalzeichen

&quot;

&#34;

"

&amp;

&#38;

&

&lt;

&#60;

<

&gt;

&#62;

>

&nbsp;

&#160;

  (Leerzeichen)

&sect;

&#167;

§

&frac14;

&#188;

¼

&frac12;

&#189;

½

&frac34;

&#190;

¾

&divide;

&#247;

÷

3. Gebot

Du sollst darauf achten „well formed HTML“ Seiten zu erstellen III:

 

korrekte Hyperlinks:

  • Die korrekte Pfadangabe ist für die Verlinkung von elektronischen Dokumenten in einer HTML Seite wichtig

  • Absolute Pfade werden von relativen Pfaden unterschieden. Hyperlinks zu externen Webseiten immer als absolute Pfade setzen! (wenn es sich um eine Internetseite handelt, immer http://www mit angeben). Ein Beispiel seht ihr auf Abbildung 6
    Eingebundene Bilder können auch relativ verlinkt werden (damit ist die Darstellung der HTML Seite auf jedem System auch offline gewährleistet; Bsp: „Ordnername/Dateiname+Dateiendung“)
    Gleiches gilt für interne Unterseiten eines HTML-Projektes (siehe Abbildung 7)
     
  •  Wichtig: Groß- und Kleinschreibung der verlinkten Dokumente beachten!

 

4. Gebot

Du sollst die strikte Trennung von Inhalt und Layout beachten!

 

Man unterscheidet hierbei unter HTML und CSS. CSS beschreibt, wie die Seite aussehen soll (z.B. Schriftgröße, Farbe, …) und HTML legt die Struktur fest. Man sollte von Anfang an diese Trennung einhalten, um später aufwendige Korrekturen zu vermeiden. Auch das Abspeichern der CSS in eine separate Datei ist möglich. Man muss diese dann nur im HTML-Dokument verlinken (siehe Abbildung 8).

Hier einige Layout-Aspekte, die man schon zu Beginn der Programmierung in CSS festhalten könnte:

 

5. Gebot

Du sollst nicht mit Attributen oder Elementen formatieren, die den Status „deprecated“ haben.

6. Gebot

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.

 

Text und Grafiken, die man in einer Tabellen darstellen möchte, kann man durch Block – Elemente in einen gemeinsamen Bereich einschließen und anordnen.

Mit <div> leitest du ein allgemeines Block-Element ein, in das du mehrere andere Block-Elemente einschließen kannst (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden </div> steht, wird als Teil des Bereichs interpretiert (Abbildung 9).

Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Mittels CSS können diesem Element dann Charakteristiken zugewiesen werden, die folgende Dinge beeinflussen (Abbildung 10):

 

7. Gebot

Du sollst auf zu viele Animationen, unterschiedliche Textfarben und Schriftarten verzichten!

 

  • Am besten legt man zu Beginn im Body fest, welche Formate verwendet werden sollen. Dann gelten diese einheitlich für die gesamte Seite. (siehe Abbildung 11)

  • In speziellen CSS-Klassen können dann Abweichungen für bestimmte Teile der Seite festgehalten werden. Zur Hervorhebung wichtiger Passagen können u.a. fette Schreibweise oder Schriftgröße verwendet werden. Meiden sollte man dagegen blinkende Objekte, wie in Abbildung.

 

8. Gebot

Du sollst für Beschreibungen immer auch das "alt-Attribut" verwenden!

 

  • Das „alt-Attribut“ kommt v.a. dann zum Einsatz, wenn Elemente auf einer HTML-Seite nicht angezeigt werden können. Bewegt man nämlich den Cursor auf die Stelle, an der das Element sitzt, erscheint ein Text, der dieses näher beschreibt. (siehe Abbildung 12)

  • Eingebunden werden solcher Beschreibungen über das „alt-Attribut“.

  • Einfach in den geöffneten Tag des zu beschreibenden Elements „alt=“….“ einfügen, wobei „…“ durch den gewünschten Text ersetzt wird. Danach einfach mit „/“ schließen. (siehe Abbildung 13)

9. Gebot

Du sollst Nutzergruppen nicht durch Aussagen wie „optimiert für Internet Explorer 4.1, Seamonkey 5.0, etc.“ oder die Verwendung von horizontalen Scrolleisten ausschließen


10. Gebot

Du sollst Metainformationen sinnvoll einsetzen.

 

Das bedeutet, deine HTML-Seite kann Zusatzinformationen ganz gut gebrauchen, solang diese auch wirklich Sinn haben. 

Wie passe ich ein bereits bestehendes HTML – Dokument an meine Vorstellungen an?

So mach ich es!

    1. Bevor man anfängt, sollte man sich zu erst einen HTML – Editor zu legen, der Element- und Attributnamen (und deren Werte) farblich darstellt, damit man den sichtbaren Text eine HTML – Dokumentes leichter erkennt. Dies ist übersichtlicher und ermöglicht ein schnelleres Arbeiten. Falls solch ein Editor nicht vorhanden ist, schaut doch einfach mal auf dieser Seite vorbei: HTML Editor Phase 5 Version 5.42
    2. Wenn man sich so den Quelltext eines HTML – Dokumentes anschaut, kann man schnell den Überblick verlieren über Dinge die man verändern möchte oder bereits hat. Deswegen empfiehlt es sich immer von oben nach unten zu arbeiten.
    3. Also fangen wir mit den Meta – Angaben an, in dem wir Autor, Beschreibung der Seite und die Informationen für die Suchmaschinen ändern.
    4. Danach kommt der Titel.
    5. In vielen Fällen ist es so, dass CSS verwendet wird. Die Art der Verwendung ist aber von Dokument zu Dokument verschieden. Einige schreiben die CSS in ein HTML – Dokument und andere verlinken zu einer externen Datei. Stehen die CSS – Angaben in dem HTML – Dokument, was man bearbeiten möchte, dann kann man beliebig ändern (Bsp. Farbe, Textausrichtung...usw.). Befinden sich die CSS – Angaben jedoch in einer externen Datei, sollte man vorsichtig mit dieser umgehen, denn in den meisten Fällen greifen noch andere HTML – Dokumente auf die CSS – Datei zu. Eine leichtsinnige Änderung solch einer Datei könnte dann zu Problemen bei HTML – Dokumenten führen, die man eigentlich nicht verändern wollte. Warum man es dann macht? Weil solch eine Nutzung den Zeitaufwand für die Erstellung eines HTML – Dokumentes erheblich minimiert, die Größe des Quelltextes klein hält und Projekt- bzw. Gruppenarbeit erleichtert. Wenn also die CSS – Angaben in einer externen Datei stehen, sollte man zunächst einmal eine Kopie dieser Datei erstellen und diese umbenennen. Danach könnt ihr ohne Probleme die CSS –Angaben verändern. HINWEIS: Man sollte nicht vergessen den Link zur externen Datei im HTML – Dokument an die neue Datei anzupassen (siehe 4. Gebot)!
    6. Nachdem man mit den CSS – Angaben abgeschlossen hat, widmet man sich nun dem sichtbaren Teil des Dokumentes. Im Bereich des <body> </body> können jetzt Texte bearbeitet und Bilder ersetzt werden. Da die Texte leicht zu verändern sind, hier nur eine Erklärung zum Ersetzen von Bildern:
    7. Zunächst einmal sollte das Bild, was man verwenden will, in dem Ordner „image“ abgelegt werden. Es empfiehlt sich immer die Dateiendung „*.gif“ zu benutzen und den Dateinamen so einfach wie möglich zu halten (keine Sonderzeichen oder Umlaute).
    8. Jetzt nur noch den Dateinamen (mit Dateiendung) an die Position setzen, wo das alte Bild steht (siehe 3. Gebot) und schon ist diese Aufgabe auch schon erledigt. HINWEIS: Die Größe des Bildes sollte nicht im HTML – Dokument beeinflusst werden. Am Besten ist es die Größe über ein Fotobearbeitungsprogramm zu regeln.

Photos

Abbildung 1

Abbildung 2

Abbildung 3

Abbildung 4

Abbildung 6

Abbildung 7

Abbildung 8

Abbildung 9

Abbildung 10

Abbildung 11

Abbildung 12

Abbildung 13

Abbildung 14

Hilfs-Widgets

News

Audio-Podcasts

Video-Podcasts

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 "edit" klicken, gebenenfalls "HTML" anwählen und die Link-Adresse in das Skript hineinkopieren.

Kommentare