Ten years ago [In 1972], a crack commando unit was sent to prison by a military court for a crime they didn´t commit. These men promptly escaped from a maximum-security stockade to the Los Angeles underground. Today, still wanted by the government, they survive as soldiers of fortune. If you have a problem, if no one else can help, and if you can find them, maybe you can hire the A-Team.“[
A-Team siegt über MS Word.
Wir lieben es, wenn ein Plan funktioniert :)
Herzlich Willkommen auf der Protopage-Seite des A-Teams!!
Diese Seite widmen wir dem Umgang mit MS Word.
Da wir immer wieder mit diesem Programm konfrontiert werden, u.a. wenn man eine Hausarbeit schreiben muss, soll Euch unsere Seite helfen möglichst schnell und fehlerfrei Format- und Dokumentvorlagen zu erstellen.
Hierzu könnt ihr auch unsere eigenen erstellten Deckblätter, korrigierten Dokumente sowie unsere Dokumentvorlage zur Hilfe nehmen. Wie eine fertige Hausarbeit aussehen könnte, könnt ihr euch auch auf unserer Seite anschauen.
Unter den "10 Todsünden" findet ihr typische Fehler, die bei der Arbeit mit Word auftreten können sowie Tipps und Tricks, die den Umgang mit MS Word erleichtern.
Viel Spaß beim Durchstöbern,
Euer A-Team
Hier stehen die korrigierten und kommentierten Teile der Hausarbeit zum Download bereit:
Teil A von Michael
Teil B von Bene
Teil C von Christina
Teil D von Andreas
Deckblätter von Christina, Benedikt, Michael und Andreas
Gemeinsam erstellte Dokumentvorlage zur Erstellung einer Hausarbeit
Formatierte und strukturierte Hausarbeit
Endgültige Version Worddatei (enthält Markups)
Endgültige Version PDF-Datei (ohne Markups)
Probiert es mal aus, einfach Word öffnen, "=rand(200,99)" eingeben, Überraschung :)
Des Rätels Lösung: dieser Satz enthält alle Buchstaben aus dem Alphabet
Word 2003 Help - die offizielle MS Office Seite
erstellen eines Dokumentes - z.B. Diplomarbeit, sehr übersichtlich und sauber dargestellte Anleitung zum Arbeiten mit MS Word
Formatierungshilfen - Tipps zum Formatieren in Word, mit Screenshot's illustriert [falls euch unsere nicht helfen :-)]
MS Word - hier findet ihr sowohl kurz und knapp erläuterte Antworten zur Formatierung als auch zu Features wie Serienbrief etc.
Vorlagen für Word - egal welche Art von Dokument ihr erstellen wollt, auf der Seite von MS werden viele Vorlagen aus verschiedenen Kategorien kostenlos zur Verfügung gestellt
Nützliche Tastenkombinationen (pdf) für Word, Shortcuts sparen ne Menge Zeit und Nerven
"Du sollst Zeichen nicht mit einem Druck auf "Tab" oder die "Leertaste" einrücken"
So wirds richtig gemacht:
Für Absätze oder Sondereinzüge einfach die jeweilige Option in MS Word nutzen!
"Du sollst einzelne Zeilen nicht durch einen Druck auf "Enter / Return" beenden!"
So wirds richtig gemacht:
Diese Tast ist nur für das Ende eines Absatzes notwendig!
"Du sollst (Seiten)-Umbrüche nicht durch mehrfaches Drücken auf "Enter / Return" erzeugen"!
So wirds richtig gemacht:
"Du sollst Trennstriche nicht mit einem Druck auf die Bindestrichtaste einfügen"
So wirds richtig gemacht:
"Du sollst nicht wie wild im Text herumformatieren"
Direkte Formatierung!
So wirds richtig gemacht:
"Du sollst Listen nicht manuell mit z.B. "Sonderzeichen" oder der Bindestrichtaste erstellen"
So wirds richtig gemacht:
"Du sollst dein Dokument nicht rein visuell mit römischen oder arabischen Ziffern gliedern"
So wirds richtig gemacht:
"Du sollst Kopf- und Fußzeilen nicht manuell durch "Copy & Paste" auf jeder Seite neu erstellen"
So wirds richtig gemacht:
"Du sollst Inhaltsverzeichnisse weder manuell erstellen noch in ein separates Dokument ausgliedern"
So wirds richtig gemacht:
"Du sollst Kommentare und Änderungen nicht durch manuelle Formatierung z.B. durch Farbänderungen oder andere direkte Formatierungen kennzeichnen"
So wirds richtig gemacht:
Um euch beim Erstellen einer Dokumentvorlage für eine Hausarbeit zu helfen, haben wir euch hier die wichtigsten Schritte dafür aufgestellt.
Dokumentvorlagen enthalten Voreinstellungen für neue Dokumente. Sie werden durch die Dateiendung dot. (für document template) kenntlich gemacht.
Für eine Hausarbeit gelten bei der Festlegung der Ränder folgende Regelungen:
Diese Einstellungsmöglichkeit findet ihr unter "Datei" und dort bei "Seite einrichten" unter "Seitenränder" (siehe Abb.1-2)
Unter "Format" und "Formatvorlagen und Formatierung" (Abb.1) lassen sich allgemeine Eigenschaften für Überrschriften und den Text festlegen.
Hier lassen sich u.a. folgende Eigenschaften einstellen:
(Einstellungen, die für Hausarbeiten notwendig sind)
Zu beachten: Die Seitennummerierung sollte noch nicht auf dem Deckblatt und der Gliederung losgehen, dewegen beim Menü "Seitenzahl einfügen" bei Beginn auf der 1. Seite kein Häckchen machen (Abb.3).
Ein wichtiger Punkt ist die Erstellung der Formate für die Überschriften. Sie sind ein wichtiger Teil der Nummerierung und helfen uns später bei der Erstellung eines Inhaltsverzeichnisses.
Zu beachten ist hier deshalb:
Hat man die Hausarbeit soweit fertig geschrieben sowie die Seitenzahlen eingefügt, kann man nun mit Word ein automatisches Inhaltsverzeichnis erstellen.
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.
Das Inhaltsverzeichnis erfasst dann automatisch alle Gliederungspunkte, die man erstellt und einheitlich formatiert hat. Hierzu muss man unter "Einfügen", "Referenz" , "Index und Verzeichnisse" auswählen (Abb. 5 - 6)
Nachdem die vier Teile der Hausarbeit korrigiert und die Dokumentvorlage erstellt ist, bietet es sich nun an, daraus eine wohl formatierte und strukturierte Hausarbeit entstehen zu lassen.
Beim Zusammenfügen muss man folgendes beachten:
Wenn man Texte aus verschiedenen Quellen zusammenfügen will, verwendet man dazu normalerweise die Zwischenablage von Windows: Man markiert den Text, kopiert ihn mit Strg+C in die Zwischenablage und fügt ihn dann mit Strg+V wieder an gewünschter Stelle ein.
Es kommt jedoch zu Problemen, wenn der Quelltext eine eigene Formatierung aufweist, dann kann es sein, dass die Formatierung im Zieltext durcheinander gebracht wird.
Um das zu vermeiden, verwenden wir unter "Bearbeiten - Inhalte einfügen".
Es erscheint ein Dialogfeld, in dem wir die Option "unformatierter Text" auswählen.
Auf diese Weise bleibt unsere gewünschte Formatierung erhalten.
Der eingefügte Text sollte sich dann automatisch unseren Formatvorlagen anpassen.
Seitenzahlen können entweder über "Einfügen - > Seitenzahlen..."
oder über "Ansicht -> Kopf- und Fußzeile eingefügt und formatiert werden.
Wenn man ein klar strukturiertes Dokument erstellen will, kommt man nicht ohne Abschnitte aus.
Diese findet man unter "Einfügen -> Manueller Umbruch
Wir haben uns entschieden die Bearbeitung der einzelnen Teile durch einen Eintrag des Namens in der Kopfzeile deutlich zu machen. Um das hinzubekommen, muss man an den richtigen Stellen Abschnitte setzen. Individuelle Kopfzeilen lassen sich dann für diese Abschnitte umsetzen.
Auf diesem Teil unserer Seite findet ihr alles rund um das Thema HTML & CSS
Ihr erfahrt auf dieser Seite was HTML und CSS ist, wie man ein HTML-Dokument, einschließlich mit CSS, erstellt und auf was ihr bei der Erstellung von HTML-Dokumenten beachten müsst, um typische Fehler zu vermeiden.
Wir geben hier nur einen kleinen Überblick über einige wichtige Punkte, die das Thema HTML &CSS umfassen. Wenn ihr mehr über HTML und CSS erfahren wollt, dann nutzt unsere Links.
Viel Spaß,
euer A-TEAM
Ein abschreckendes Beispiel, aber sehr unterhaltsam
Die goldenen Regeln für schlechtes HTML
das wohl bekannteste HTML Tutorial, hilft immer
sehr brauchbares HTML Tutorial
Alles zu HTML, und noch viel mehr findet ihr auf
Dr Web hiltft bei HTML und CSS Problemen
TopStyle Lite 3.0 CSS-Editor Download
HTML Editor Phase 5 Downloadbereich
korrigierte Web-Profile (zip):
Profil 1 von Michael
Profil 2 von Andreas
Profil 3 von Christina
Profil 4 von Benedikt
CSS steht für Cascading Style Sheets und ist eine Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Somit ist eine Trennung von Inhalt und Layout möglich.
Mit Hilfe von CSS ist es möglich -mit relativ geringem Aufwand -das Aussehen von Websites zu verwalten. Es können nicht nur Farben, Schriftgrößen und Schriftarten festgelegt werden, sondern sogar der Aufbau der Website (z.B. Positionierung von Elementen).
Hier ist eine Auflistung wichtiger HTML-Tags.
Weitere Informationen über Tags und HTML findet ihr bei unseren Links!
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 |
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) |
Befehl | Bedeutung | weitere mögliche Angaben |
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 |
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) |
Befehl | Bedeutung | weitere mögliche Angaben |
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 |
HTML-Tag | Attribute | End-Tag | Bedeutung |
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=center align=right align=justify | </h1> .. </h6> | Überschriften können wie Absätzen ausgerichtet werden |
< /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) |
Befehl | Bedeutung | weitere mögliche Angaben |
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 |
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="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) |
Befehl | Bedeutung | weitere mögliche Angaben |
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 |
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 (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) |
Befehl | Bedeutung | weitere mögliche Angaben |
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 |
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 |
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 |
Eine grundlegende Voraussetzung für eine gute HTML-Seite ist die korrekte Struktur.
Als erstes hat eine HTML-Seite ein Grundgerüst.
Jedes HTML-File soll zumindest mit den folgenden Befehlen beginnen:
<html>
<head>
<title>Beschreibung der Seite</title>
</head>
<body>
<h1>Haupt-Überschrift</h1>
und mit folgenden Befehlen enden:
</body>
</html>
Es gibt zwei wesentliche Bereiche im Grundgerüst (Abbildung Grundgerüst HTML):
Zwischen <head> und </head> stehen die Angaben, die für die Verwaltung des HTML-Files notwenidig sind (Titel, Autor und dergleichen). Abbildung 1
Zwischen <body> und </body> steht die Information, die am Bildschirm des Benutzers dargestellt werden soll, also die Textelemente, Hypertext-Links, Bilder und Töne.
Das gesamte HTML-File wird zwischen <html> und </html> eingeschlossen.
Zwischen <title> und </title> steht die Überschrift des HTML-Files, die in Bookmarks und Suchhilfen verwendet wird.
Zwischen <h1> und </h1> steht die Überschrift, die am Bildschirm zu Beginn des Textes erscheint.
Hier haben wir euch ein einiige wichtige Befehle aufgelistet:
Überschrift
Anhand von Überschriften wird der Text gegliedert und strukturiert.
Für Überschriften wird der TAG <hX> verwendet
header=Überschrift
X steht für die Wichtigkeit der Überschrift und kann Werte von 1-6 annehmen
- 1 ist die größte und wichtigste Überschrift
- ...
- 6 die kleinste Überschrift, aber immer noch größer/wichtiger als der normale Text
<h1> Überschriften-Ebenen 1 </h1>
<h2> Überschriften-Ebenen 2 </h2>
<h3> Überschriften-Ebenen 3 </h3>
etc.
Schriftgröße
Um innerhalb eines Textes Wörter bzw. Passagen groß oder klein zu schreiben wird der TAG <big> für größer und <small> für kleiner verwendet (End-TAG nicht vergessen!!!)
Umbrüche
Um einen Umbruch zu erzielen wird der TAG <br/> benutzt (break=Umbruch)
Absätze
Ein Absatz zwischen in einem Text erfolgt durch den TAG <p> (paragraph=Absatz).
Im Gegensatz zu einem Umbruch durch den Befehl </br> erfolgt hier eine Trennung mit Leerzeile.
Aber auch hier nicht den End-TAG </p> vergessen!!!!!
Listen
Um eine Liste zu erstellen benötigt man zwei verschiedene TAGs:
....
<ul>
<li>erster Listenpunkt</li>
<li>zweiter Listenpunkt</li>
<li>x-ter Listenpunkt</li>
</ul>
....
Um eine durchnummerierte Liste zu erstellen wird <ul> einfach durch <ol> (orderd list=sortierte Liste) ersetzt!!
Links
Textlink/ interner Link
Ein Link wird immer duch den TAG <a href="DATEINAME.HTM">BESCHREIBUNG</a>
Die groß geschriebnen Teile müssen hierbei durch den jeweiligen Dateinamen und die entsprechende Beschreibung ersetzt werden.
Wichtig: Bei der Bestimmung des Dateinamens müssen einige Punkte beachtet werden:
Also so nicht: "Über uns.htm" Besser: "ueber-uns.htm"
Im Browserfenster wird der Link dann unterstrichen angezeigt: Über uns
Externer Link
Um auf eine andere Seite im Internet zu verweisen wird der TAG
<a href="URL">BESCHREIBUNG</a>
An die Stelle des Dateinamens tritt also die URL der Seite auf die man verlinken will.
Beispiel: <a href="http://www.tu-ilmenau.de">Startseite</a>
TIPP:
Um die Seite in einem neuen Fenster zu öffnen, damit die eigene Seite noch erhalten bleibt, fügt man den Zusatz "target" dem Befehl zu:
<a href="http://www.tu-ilmenau.de/start.htm"target="_blank">Startseite</a>
Farben
Farben peppen eine Internetseite auf und können wichtige Passagen hervorheben. Farben könen entweder für die Schrift eingesetzt werden oder zur Hintergrundgestaltung dienen.
Aber es gilt stets der Grundsatz: Weniger ist mehr! (Immer im Hinterkopf behalten ;) )
Schriftfarbe
Um eine Schrift farbig zu machen, benutzt man den HTML-TAG
<font color="Farbnummer"> Dein Text </font>
z.B. rote Textfarbe: <font color="#FF0000"> Dein Text </font>
Hintergrundfarbe
Um den Hintergrund farbig zu machen, fügt man dem Body-TAG noch den Befehl bgcolor (backrgound-color) hinzu:
....
<body ... bgcolor="Farbnummer" ... >
...
</body>
...
Farbpallette
Die Farben werden meistens in Hexadezimalen angegeben. Hintergrund hierzu ist das RGB-Farbmodell, also die drei Grundfarben rot, grün und blau und deren Mischung.
In der Abbildung "Farbtabelle" sehen die die Standard-Pallette, die 216 Farben enthält.
2. Möglichkeit Farben anzugeben:
Die Farben können auch über ihren englischen Namen angegeben werden:
Hierzu beim HTML-Editor den Reiter "Colors" anklicken und dann im rechten Pulldownmenü den Punkt "Namen" anklicken.
Die Farben werden nun mit ihrem englischen Namen angezeigt:
z.B. color ="red"
color="yellow"
etc.
Die 10 Gebote in der HTML-Programmierung
Was du bei der Arbeit mit HTML und CSS beachten musst und wie du typische Fehler vermeiden kannst, erfährst du in den folgenden Geboten:
Du sollst darauf achten, "well-formed HTML" Seiten zu erstellen I: gute HTML-Struktur
Du sollst darauf achten. "well-formed HTML" Seiten zu erstellen II: "HTML-Tags"
Aus „ä“ wird „ä“
Aus „ü“ wird „ü“
Aus „ö“ wird „ö“
Und „ß“ wird zu „ß“
TAGs bilden die Grundlage für die Arbeit mit HTML und CSS.
Als HTML-TAG wird ein einzelner HTML-"Befehl" bezeichnet.
Ein TAG (mit oder ohne Inhalt), der geöffnet wird, muss auch wieder mit einem dazugehörigen End-TAG geschlossen werden:
Anfangs- und End-TAGs
Es gibt einen Anfangs- und einen End-TAG.
Der End-TAG ist fast identisch mit dem Anfangs-TAG, allerdings muss bei dem End-TAG nach dem Kleinerzeichen (<) ein Schrägstrich kommen.
z.B. </befehl>
Elemente fassen Teile eines Dokuments zu Einheiten zusammen und geben so einem Dokument eine logische Struktur oder bestimmen die Darstellung bzw. das Verhalten dieser Einheiten.
Beginn und Ende von Elementen werden von Start- und End-Tags makiert. Tags sind mittels spitzer Klammern <> als Markup kenntlich gemacht, also als nicht zum Dokument gehörige Strukturierungszeichen hervorgehoben. Zwischen den spitzen Klammern steht der Elementname.
<Elementname> ... </Elementname>
Attribute sind Eigenschaften die für Elemente vergeben werden können.
Sie werden im Start-Tag eines Elements in der Form attribut="attributwert" angegeben.
Mit < IMG src="bild1.gif"> wird z.B.dem Element IMG durch das Attribut src (source) die Grafikdatei mitgeteilt, die ausgegeben werden soll.
Entitäten = spezielle Sonderzeichen = Ersatzzeichen
Sonderzeichen sind Zeichen, die nicht auf der Tastatur vorhanden sind oder die eine spezielle Bedeutung haben. Zur Darstellung von Sonderzeichen werden in HTML sogenannte Entities verwendet. Eine Entity ist ein Name für ein bestimmtes Sonderzeichen.
Entities werden durch ein &-Zeichen am Anfang und durch ein Semikolon am Ende gekennzeichnet.
Beispiel: Auf einer amerikanischen Tastatur gibt es keine Tasten für die deutschen Umlaute. Daher wird etwas für den Buchstaben ä die Entity ä verwendet.
Das Wort "Säge" kann im HTML-Quelltext dann wie folgt geschrieben werden: Säge
Du sollst darauf achten, "well-formed HTML" Seiten zu erstellen III: korrekte Hyperlinks
Du sollst 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 etc.) und HTML legt die Struktur fest. Diese Trennung solte man von Anfang an einhalten, um später aufwendige Korrekturen zu vermeiden.
Hier einige Layout-Aspekte, die schon zu Beginn der Programmierung in CSS festgelegt werden können:
- Farben (Schrift, Hintergrund etc.)
- Aussehen der Links (Farbig? Unterstrichen? Fett? Kursiv?)
- Lage der eingebundenen Elemente (Links-, rechtsbündig? Zentral, Abstände zu den Rändern etc.)
Du sollst nicht mit Attributen oder Elementen formatieren, die den Status "deprecated" haben
In HTML gint es logische und physische Elemente zur Auszeichnung von Text.
Logsiche Textauszeichnungen haben Bedeutungen wie "betont" oder "emphatisch". Bei logsichen Elementen entscheidet der Browser, wie ein solcher Text hervorgehoben wird (z.B. fett, kursiv oder andersfarbig). In Verbindung mit Stylesheets kann man logische Textauszeichnungen allerdings nach Wunsch formatieren.
Du sollst eine HTML-Seite nicht mit Layouttabellen gestalten
Verzichte auf zu viele Animationen, unterschiedliche Textfarben und Schriftarten
Am besten legt man zu Beginn im Body fest, welche Formate verwendet werden sollen. Dann gelten diese einheitlich für die gesamte Seite.
Du sollst für z.B. Grafiken und Formatierungselemente immer auch eine Beschreibung mittels "alt-Attribut" hinzufügen
Das "alt-Attribut" kommt vor allem dann zum Einsatz, wenn Elemente auf einer HTML- Seite nicht angezeigt werden können. Bewegt man den Curser nämlich auf die Stelle, an der das Element sitzt, erscheint ein Text, der diese Näher beschreibt.
Füge hierzu in den geöffneten Tag des zu beschreibenden Elements "alt="..." ein, wobei du dann "..." durch den Text ersetzt, der das Element beschreiben soll. Danch einfach mit "/" wieder schließen.
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
Damit erst keine horizontale Scrollleiste entsteht am besten immer unter 800 Pixeln bleiben! Abbildung 1
Du sollst Metainformationen sinnvoll einsetzen
Zusatzinformationen sind bei HTML-Seiten erwünscht, allerdings nur wenn diese auch sinnvoll sind!
In Metainformationen kann man verschiedene nützliche Anweisungen für WWW-Server, WWW-Browser und automatische Suchprogramme im Internet notieren.
Einige der Metainformationen sind speziell für automatische Suchprogramme im Internet gedacht. Das sind Programme, die regelmäßig durch den gesamten Informationsraum Internet wandern, Verweisen folgen, aufgerufene Datein lesen und die gelesenen Daten an die heimische Suchdatenbank übermitteln. Dadurch wird eine HTML-Datei in dem entsprechenden Suchdienst auffindbar. Durch bestimmte meta-Informationen kann man bestimmen, welche Daten das Suchprogramm an seine Suchdatenbank überträgt. Man kann auch verbiten, dass ein Suchprogramm überhaupt Daten aus der Datei überträgt.
Einführungsvideo in HTML und CSS, erklärt die Basisbefehle (Englisch)
Wie kann ich nun ein bereits bestehendes HTML-Dokument individuell anpassen/verändern?