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.
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.
Nützliche Hinweise und Links zu HTML und CSS. Jetzt hier bei uns exklusiv zum anschauen ;-)
Euer 4fine-Team!
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.
Die einzeln bearbeiteten Teile der Hausarbeit:
Die Dokumentenvorlagen:
Die zusammengefügte Hausarbeit als:
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.
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:
Du sollst einzelne Zeilen nicht durch einen Druck auf „Enter | Return“ beenden!
Diese Taste ist nur für das Ende eines Absatzes notwendig!
Du sollst (Seiten)-Umbrüche nicht durch mehrfaches Drücken auf „Enter | Return“ erzeugen!
Auch hierfür gibt es eine Option in MS Word:
Du sollst Trennstriche nicht mit einem Druck auf Leertaste einfügen
Du sollst keine direkte Formatierung innerhalb des Textes vornehmen
Du sollst Listen nicht manuell erstellen, z.B. mit „Sonderzeichen“ oder Bindestrichtaste
Du sollst dein Dokumentes nicht nur über die Erste Gliederungsebene strukturieren
Du sollst Kopf- und Fußzeilen nicht manuell durch "Copy & Paste" auf jeder Seite neu erstellen.
Du sollst Inhaltsverzeichnisse weder manuell erstellen noch in ein seperates Dokument ausgliedern.
Niemals selbst erstellen und mit Tap einrücken - klappt meistens sowieso nicht
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 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.
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.
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..
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
„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:
Diese bräuchte man im Deckblatt. Sie sollen die Formatierung für das Thema der Hausarbeit enthalten.
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.
Wie man Gliederungsebenen einrichtet findest du im Beitrag „7. Todsünde“.
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:
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).
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.
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!
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:
Unser Gruppenprofil:
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
Also nochmal kurz gesagt:
Wo ist der Unterschied zwischen CSS und HTML?
Mit HTML werden Inhalte strukturiert. Mit CSS wird der strukturierte Inhalt formatiert.
http://www.uni-koeln.de/rrzk/www/tips/eingabe.html >> Auf dieser Seite kann man sich einen groben Überblick darüber verschaffen, was man unter WWW-Seitenerstellung versteht und wie sie im allgemeinen funktioniert.
http://www.html-world.de/ >> Diese Seite scheint auf den ersten Blick unübersichtlich. Aber nach einer kleinen Erkundungstour und erste Erfahren mit HTML sehr bereichernd. Aktuelle News rund um HTML und nützliche Foren, zum Fragen stellen, werden angeboten.
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!!! |
<hr> | | | Damit können Trennlinien eingezogen werden. Farbe, Länge und Stärke können bestimmt werden. |
<html> | | </html> | Anfang und Ende des HTML-Codes. Ihre neue Spielwiese :-) |
<head> | | </head> | Der Kopfbereich, in dem allgemeine Angaben gemacht werden, die nicht im Browserfenster angezeigt werden. |
<body> | | </body> | ab hier kommt unser eigentlicher Inhalt, der im Gegensatz zum head-Bereich im Browserfenster angezeigt wird. |
<title> | | </title> | Wichtig! Titel hat mehrere wichtige Funktionen: |
HTML-Tag | Attribute | End-Tag | Bedeutung |
<b> | | </b> | Schrift wird fett angezeigt |
<i> | | </i> | kursive Schrift |
<u> | | </u> | unterstrichene Schrift - sehr mit Vorsicht zu genießen, |
<sup> | | </sup> | hochgestellte Schrift, z.B. 0C |
<sub> | | </sub> | tiefgestellte Schrift, z.B. H2O |
<tt> | | </tt> | bewirkt Schrift mit gleichen Abständen (dicktengleich) |
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. |
<h1 | align=left | </h1> | Ü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. |
<small> | | </small> | Macht die Schrift um einen Schritt kleiner |
<big> | | </big> | Macht die Schrift um einen Schritt größer |
HTML-Tag | Attribute | End-Tag | Bedeutung |
<p> | align="left" | </p> | Absatzbeginn - vor und nach dem Absatz wird automatisch Platz gehalten |
<center> | | </center> | zentrierte Ausrichtung (oft bei Gedichten) |
<br> | | | erzwungener Zeilenumbruch (Zeilenende) |
<nobr> | | </nobr> | erzwungener Zusammenhalt, was z.B. für Wortgebilde wie |
<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. |
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. |
<ul> | | </ul> | Leitet eine Aufzählugsliste ein. Wie der Spiegelstrich dargestellt wird, bestimmt der WWW-Browser. (weiteres siehe TAG <li> !) |
<ol | start="1" type="1"> | </ol> | Leitet eine nummerierte Liste ein - Attribut ist erforderlich! |
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. |
<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. |
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 |
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:
<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. <title>
bzw. </title>
. Dieser Tag zeigt den Titel der Datei bei der Anzeige im Web-Browser in der Titelzeile des Anzeigefensters angezeigt. <meta name="description" content="Beschreibungstext">
bestimmt man einen Beschreibungstext (meta = "über", name = Name, description = Beschreibung, content = Inhalt).<meta name="author" content="Autorenname">
teilt man den Namen des Autors (d.h.: des inhaltlich Verantwortlichen) für die HTML-Datei mit (author = Autor).<meta name="keywords" content="[Wortliste]">
bestimmt man Stichwörter für ein Suchprogramm. Trenne die einzelnen Schlüsselwörter durch Kommata. <body>
bzw. </body>
. Dazwischen wird dann der eigentliche Inhalt der Datei notiert, also das, was im Anzeigefenster des WWW-Browsers angezeigt werden soll.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:
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 |
" | " | " |
& | & | & |
< | < | < |
> | > | > |
|   | (Leerzeichen) |
§ | § | § |
¼ | ¼ | ¼ |
½ | ½ | ½ |
¾ | ¾ | ¾ |
÷ | ÷ | ÷ |
Du sollst darauf achten „well formed HTML“ Seiten zu erstellen III:
korrekte Hyperlinks:
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:
Du sollst nicht mit Attributen oder Elementen formatieren, die den Status „deprecated“ haben.
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):
Du sollst auf zu viele Animationen, unterschiedliche Textfarben und Schriftarten verzichten!
Du sollst für Beschreibungen immer auch das "alt-Attribut" verwenden!
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
Du sollst Metainformationen sinnvoll einsetzen.
Das bedeutet, deine HTML-Seite kann Zusatzinformationen ganz gut gebrauchen, solang diese auch wirklich Sinn haben.
So mach ich es!