Bookmarks
Bookmarks panel
Rich sticky notes
Prakitkumsaufgaben - Links zur Gruppenwebspace
An dieser Stelle veröffentlichen wir alle Dateien und Dokumente, die für die Praktikumsaufgabe B2 relevant sind. Die Dateien sind auf unsere Gruppenwebspace verlinkt.
Bearbeitung der Einzelteile der Hausarbeit:
Deckblätter der einzelnen Gruppenmitglieder:
Dokumentvorlage Deckblatt:
Dokumentvorlage für ein Deckblatt in einer Hausarbeit - Wiederverwenden von festen Textbausteinen
Dokumentvorlage (Gruppenarbeit):
Dokumentvorlage für weitere Hausarbeiten
Zusammenstellung der gemeinsamen Hausarbeit
Dokument als Worddatei mit MarkupsDokument als PDF -Datei ohne Markups
Hilfestellungen zu Word
Im Folgenden möchten wir versuchen euch mit
Hilfe von Screenshots den
Gebrauch von Word zu erleichtern. Dazu werden wir fortan auf dieser Seite
einige Tipps visuell als auch textuell darstellen.
Solltet ihr weiteres Interesse an Word haben - hier ein paar hilfreiche Links:
Film zu Word Tipps:
Video von YouTube in Englisch Hinweise zu häufigen Fehlerquellen in Microsoft Word
Sünde 1: Du sollst Zeichen nicht mit einem Druck auf "Tab" oder die "Leertaste" einrücken
Einzüge in einem Word Dokument müssen nicht durch das häufige Drücken der Tabtaste erfolgen. Word kennt hierfür den Befehl Format - Absatz - Einzugsbestimmung. An dieser Stelle kann die Ausrichtung, der Abstand zu weiteren Formaten und eben der Einzug bestimmt werden.
Sünde 2: Du sollst einzelne Zeilen nicht durch einen Druck auf ENTER/RETURN beenden (Abschnittswechsel am Ende jeder Zeile)
Die Taste "ENTER" ist nur für das Schaffen eines Absatzes von Bedeutung, da Word den Zeilenumbruch selbständig übernimmt. Manuelle Zeitenumbrüche können in Word über den Shortcut "Shift" + "ENTER" realisiert werden.
Sünde 3: Du sollst (Seiten-) Umbrüche nicht durch mehrfaches Drücken auf ENTER/RETURN erzeugen.
Manuelle Umbrüche können in Word über den Befehl Einfügen - Manueller Umbruch eingefügt werden. In dem sich öffnendem Fenster kann zwischen Seiten-, Spalten-, und Textflussumbruch gewählt werden. Auch Abschnittsumbrüche sind durch diese Option realisierbar. Der manuelle Seitenumbruch kann auch durch einen Shortcut betätigt werden (Strg+ENTER).
Sünde 4: Du sollst Trennstriche nicht mit einem Druck auf die Bindestrichtaste einfügen.
Der Bindestrich darf nur dann allein mit der Bindestrichtaste eingefügt werden, wenn er auch nach einer Änderung des Zeilenfalls bestehen bleiben soll, d.h. wenn es sich dabei um Wortzusammensetzungen mit Bindestrich handelt. Wenn es sich, wie oben beschrieben, aber um Trennstriche handelt, so sollten diese mit einem Druck auf „Strg“ + „Bindestrichtaste“ erzeugt werden, weil sie bei Änderung eines Zeilenfalls verschwinden.
Sünde 5: Du sollst nicht wild im Text herumformatieren (Direkte Formatierung).
Man erkennt sie am einfachsten, wenn man im Menü auf „Format“ - „Formatierung anzeigen“ klickt. Unter der Angabe der Formatierung im Fenster rechts vom Text findet man zwei weitere Optionen: „Formatvorlagenquelle kennzeichnen“ und „Alle Formatierungszeichen anzeigen“. Wenn man nun „Formatvorlagenquelle kennzeichnen“ anklickt, kann man durch das Klicken auf die einzelnen Absätze des Dokuments erkennen, aus welcher Quelle die Formatvorlage stammt. Diese Funktion zeigt an, welche Absätze des Textes direkt formatiert wurden. Daraufhin kann man diese direkte Formatierung umwandeln z.B. durch das Verwenden der entsprechenden Formatvorlage, falls es eine solche nicht gibt, kann man sie auch selbst erstellen (Klick auf „Neue Formatvorlage…“ im Menü „Formatvorlagen und Formatierung“) oder vorgegebene Vorlagen verändern (Rechtsklick auf die Formatvorlage und dann im Kontextmenü auf „Ändern“).
Sünde 6: Du sollst Listen nicht manuell mit z.B. "Sonderzeichen" oder der Bindestrichtaste erstellen.
Um in Word Listen zu erstellen, empfiehlt es sich, die Funktion „Nummerierung und Aufzählungszeichen“ im Menüpunkt „Format“ zu verwenden. Die Registrierkarte „Listenformatvorlagen“ bietet zudem die Möglichkeit, eigene Vorlagen zu erstellen und damit Listen nach eigenen Vorstellungen anzulegen.
Sünde 7: Du sollst dein Dokument nicht rein visuell mit römischen oder arabischen Ziffern gliedern.
Unter Ansicht - Gliederung kann man sich die Gliederungsstruktur des Dokumentes anzeigen lassen und bei Bedarf Korrekturen vornehmen. Für die Überschriften der unterschiedlichen Gliederungsebenen steht bereits eine Reihe von Formatvorlagen zur Verfügung, die beliebig an die eigenen Vorstellungen angepasst werden können. Systemintern können dadurch die Textbausteine den jeweiligen Gliederungsebenen zugewiesen werden.
Sünde 8: Du sollst Kopf- und Fußzeilen nicht manuell durch "Copy & Paste" auf jeder Seite neu erstellen.
Seitenzahlen in Word lassen sich auf zwei unterschiedliche Weisen erstellen: Über Einfügen - Seitenzahlen. Dort kann man dann wählen ob die Zahl rechts, links oder mittig stehen soll. Es folgt eine automatische Nummerierung. Auch über Ansicht - Kopf- und Fußzeile fügt man Seitenzahlen ein. In der Kopf- bzw. Fußzeile öffnet sich eine Symbolleiste in der man die Formatierung der Seitenzahlen festlegen kann. Es folgt eine automatische Nummerierung.
Sünde 9: Du sollst Inhaltsverzeichnisse weder manuell erstellen noch in ein separates Dokument ausgliedern.
In Word können verschiedene Referenzen erstellt werden - so auch Inhaltsverzeichnisse. Nutze den Pfad: Einfügen - Referenz - Index und Verzeichnisse und wähle die Anzahl der Gliederungsebenen aus. Auch die bisher verwendeten Formatvorlagen können weiterhin benutzt und an das Inhaltsverzeichnis angepasst werden.
Sünde 10: Du sollst Kommentare und Änderungen nicht durch manuelle Formatierung z.B. durch Farbänderungen oder andere direkte Formatierung kennzeichnen.
Kommentare und Änderungen im Text sollen als Kommentare am Seitenrand
dargestellt werden. Dies geschieht über die Funktion Einfügen - Kommentar. Dann erscheint ein Textfeld, in welches man den Kommentar einfügen kann. Diese Formatierung macht bestimmte Absichten verschiedener Autoren deutlich sichtbar. Ebenso bleibt das Dokument strukturiert und verwandelt sich nicht in ein buntes Durcheinander.
[Quelle] Seiten einrichten
Beginnen möchten wir mit dem Bereich - Seite einrichten. Wir empfehlen euch das Dokument bereits vor Beginn der Textkörper durch Voreinstellungen zu strukturieren.
Erstellen von Kopf - und Fußzeilen
Im folgenden Abschnitt beleuchten wir das Thema - Kopf und Fußzeilen - näher. Wichtig ist uns dabei, dass ihr die Texte eurer Kopfzeilen nicht auf jeder Seite erneut durch Copy & Paste erstellt.
Denn auch in diesem Fall kennt Word eine durchaus einfachere und vor allem einmalige Formatierungsmöglichkeit.
Formatierung in Word
Im den folgenden Screenshots wollen wir euch einige Tipps rund um das Thema - Formatierung in Word - Dokumenten geben. Von der Anzeige der Formatierungen über die Kontrolle der Formatierung bis hin zu den eigentlichen Formatvorlagen.
Automatische Korrekturen und Texte
In diesem Bereich widmen wir unsere Aufmerksamkeit dem Thema - Auto Formate hiermit möchten wir euch zeigen, wie ihr mit voreingestellten Optionen bestimmte Textbausteine immer wieder einsetzen und verwenden könnt.
Überarbeitungsmodus
Im Folgenden werden wir euch mittels zweier Screenshots die Arbeit mit dem Überarbeitungsmodus veranschaulichen. Neben deiner Arbeit am Dokument kannst du damit nachvollziehen welche Formatierung du vorgenommen hast und dir diese anzeigen lassen.
Kommentare
Den nächsten Bereich widmen wir dem Thema: Kommentare. Mit Hilfe dieser Option kannst du dich mit deinen Gruppenmitgliedern untereinander verständigen ohne Auffälligkeiten im strukturiertem Dokument (z.B. Farbänderungen) vornehmen zu müssen.
Inhaltsverzeichnisse
Das nächste Thema lautet Inhaltsverzeichnisse. Hiermit möchten wir verdeutlichen, dass das Erstellen von automatischen Inhaltsverzeichnissen hilfreich für eure Hausarbeiten sein kann.
Umbrüche
Umbrüche sollen den nächsten Bereich füllen. Wichtig bei Umbrüchen ist, dass in Word Zeilenumbrüche automatisch gemacht werden. Solltest du dennoch selbt einen Zeilenumbruch machen wollen, kannst du auch den Short Cut Shift+Enter oder den Seitenumbruch mit Strg+Enter nutzen.
Listen, Absätze
Einzüge und Absätze thematisieren einen weiteren Bereich - mit dem Pfad: Word - Format - Absatz kannst du auf das Fenster (Bild siehe Screenshot unten) aufrufen und Einstellungen vornehmen.
Nummerierungen
Nächstes Thema sind Nummerierungen in Word
Zusammenfassung der "No go's" in MS Word
Der letzte Bereich soll "No Go's im Bereich Word" gewidmet werden - also auf gehts ... All die folgenden Bilder unbedingt einprägen und nicht für strukturiertes Arbeiten mit Word anwenden.
Sondern
Photos
Das Thema
Nutze zur Seiteneinrichtung den Pfad: Word - Datei - Seite einrichten und bewege dich ja nach Vorstellung in den Reitern um das Dokument nach deinen Wünschen zu strukturieren.
Kopf - und Fußzeilen
Nutze den Pfad: Word - Ansicht - Kopf- und Fußzeile und strukturiere deine Kopf - oder Fußzeile mit Hilfe der sich öffnenden Symbolleiste. Auch Seitenzahlen können in eine Fußzeile mit Hilfe dieser Funktion integriert werden.
Formatierung von Seitenzahlen
Mit Hilfe der sich öffnenden Symbolleiste im Bereich "Kopf - und Fußzeilen" kannst du die Seitenzahlen deines Dokumentes formatieren. Klicke einfach auf den orange hinterlegten Button und richtet den Dokument ein.
Formatvorlagen und Formatierung allgemein
Um von Formatvorlagen und Formatierung in Word Gebrauch zu machen, solltest du folgenden Pfad nutzen: Word - Format - Formatvorlagen und Formatierung
Neue Formatvorlagen entwerfen
Neue Formatvorlage können ebenso in Word erschaffen werden. Klicke dazu einfach auf den im oberen Screenshot gelb umrandeten Button "Neue Formatvorlage" und nutze die Vielzahl an Optionen.
Formatvorlagen anzeigen
Nachdem du mit dem Pfad im linken Fenster die Formatvorlagen geöffnet hast, wird dieses Fenster sichtbar. Mit Hilfe dieser Option kannst du sowohl bereits vorhandene Formatvorlagen nutzen als auch neue Formatvorlagen entwerfen. Über die unten am Bildrand sichtbare Option "Anzeigen" kannst du außerdem die Auswahl an Formatierungen erweitern. Um die Formatierungen anzeigen zu lassen, die du bereits vorgenommen hast, kannst du den Pfad: Word - Format - Formatierung anzeigen nutzen.
Formatierung anzeigen lassen
In Word können die gemachten Formatierungen angezeigt werden. Diese Funktion ist vor allem bei der Kontrolle von Formatierung sehr nützlich. Denn gerade bei strukturierten Word - Dokument kommt es auf eine "saubere" Arbeit an und eben diese wird durch die Anzeige der bereits durchgeführten Formatierungen erleichtert. Nutze dazu ein folgenden Pfad: Word - Format - Formatierung anzeigen
Auto Texte
Mit Hilfe von Word können Textbausteine geschaffen werden mit deren Hilfe du zum Beispiel einen Brief nicht immer wieder neu schreiben musst. Nutze an dieser Stelle einfach den Pfad: Word - Format - Auto Korrektur Optionen und wähle zum Beispiel im Reiter Auto Text Passagen aus, mit denen du in zukünftigen Word - Dateien erneut strukturiert arbeiten kannst.
Auto Korrekturen
Mit Hilfe der Option, wie links, kannst du auch bestimmte Korrekturen in Word anlegen. Zum Beispiel kannst du Word dazu veranlassen, kleine Rechtschreibfehler zu korrigieren. Aus deinem "WOrt" wird dann automatisch "Wort".
Überarbeitungsmodus
Über den Pfad: Word - Ansicht - Symbolleisten - Überarbeiten kannst du den Überarbeitungsmodus aktivieren. Er hilft dir die Veränderungen im Dokument nachzuvollziehen.
Änderungen nachverfolgen
Um Änderungen in Word zu einem späterem Zeitpunkt nach zu verfolgen, kannst du die Option "Änderungen nachverfolgen" nutzen. In Word 2003 realisiert sich diese durch folgenden Pfad: Word - Extras - Änderungen nachverfolgen
Kommentare einfügen
In Microsoft Word kannst du Kommentare mittels dem Pfad: Einfügen - Kommentar realisiert werden. Durch das Einfügen von Kommentaren kannst du dich auf eine sehr einfache und visuell ansehnliche Art und Weise mit deinen Gruppenmitgliedern verständigen.
Gliederungsebenen
Mit Hilfe von Referenzen kannst du die Inhaltsverzeichnisse automatisch einrichten. Nutze dazu den Pfad: Word - Einfügen - Referenz - Index und Verzeichnisse. Und richte dir dein auf deinen Text abgestimmtes Inhaltsverzeichnis ein. Siehe dazu auch den Screenshot rechts.
Umbrüche
Wie in den Todsünden von Word schon beschrieben, sollst du Umbrüche nicht einfach mit einem Druck auf ENTER umsetzen. Nutze dazu den Pfad: Word - Einfügen - Manueller Umbruch. Die Seiten-, Spalten- oder Textflussumbrüche kannst du dort auswählen.
Absätze schaffen
Pfad zur Nummerierung
Der Pfad zur Nummerierung wird aus diesem Screenshot ersichtlich: Word - Format - Aufzählungszeichen
Nummerierung und Aufzählung
Bei Nummerierung und Aufzählungen ist es wichtig erneut nicht manuell vorzugehen. Die automatische Nummerierung erleichtert dir die Gliederung der Datei.
Seitenumbrüche
Zeilenumbrüche
Einrücken
Kopf- und Fußzeilen
Kapitelnummerierung
Formatierung
Bookmarks
Hinweise für HTML & CSS
Rich sticky notes
Links auf die Gruppenwebspace
In diesem Bereich verlinken wir erneut alle für die Lösung der Praktikumsaufgabe relevanter Dokument auf unsere Gruppenwebspace.
Webprofile fiktiver Personen:
Webprofile der Studenten:
Gruppenwebprofil Wenn´s mal nichts zu lachen gibt
Viel Spaß und Erfolg auf unserer Wissenscollage!!! Dein ACCE Team
Unsere Definitionen
HTML - was ist das eigentlich?
HTML ist die Abkürzung für HyperTextMarkupLanguage. Es handelt sich dennoch entgegen vieler Meinungen nicht um eine Programmier- sondern um eine Seitenbeschreibungsprache. Sozusagen wird in HTML beschrieben wie eine Seite auszusehen hat, das exakte Layout übernimmt ein Webbrowser.
CSS - was ist das eigentlich?
CSS ist die Abkürzung für Style Sheet Cascading. Während HTML die Bedeutung verschiedener Abschnitte kennzeichnet, koordniert CSS das Aussehen des Dokumentes. So können in CSS zum Beispiel Schrifauszeichnungen, Farben und Größen angeordnet werden.
Hinweise zu häufigen Fehlerquellen in HTML
Gebot 1. Du sollst darauf achten, „well-formed HTML“ Seiten zu erstellen I: gute HTML-StrukturAchten Sie auf das richtige Grundgerüst einer HTML-Seite und die richtige Schachtelung (Hierarchische Struktur) der HTML-Elemente. Entscheidet ist außerdem, dass Sie Elemente an der richtigen Stelle einsetzen (Head- oder Body-Bereich).
Gebot 2. Du sollst darauf achten, „well-formed HTML“ Seiten zu erstellen II: „HTML-Tags“- a. Ein Start-Tag wird immer mit dem dazugehörigen End-Tag geschlossen.
- b. Aus Kompatibilitätsgründen zu XHTML wird empfohlen auch Elemente ohne Inhalt wie z.B. <br>, <img> immer zu schließen: <br />, <img />
- c. Aus Kompatibilitätsgründen zu XHTML wird empfohlen Element- und Attributnamen IMMER klein zu schreiben (z.B. <a href=http://www.ifmk.de >Das ist ein Link</a>)
- d. Setzen Sie Attributwerte immer in Anführungsstriche (z.B. src=“blume.jpg“ oder alt=“Das Photo zeigt eine Sonnenblume“)
- e. Verwenden Sie immer Entitäten (z.B. für „ä“ - „ä“)
Gebot 3. Du sollst darauf achten „well-formded HTML“ Seiten zu erstellen III: korrekte HyperlinksFür die Verlinkung von elektronischen Dokumenten in einer HTML-Seite ist die korrekte Pfadangabe wichtig. Hierbei werden absolute von relativen Pfaden unterschieden. Hyperlinks zu externen Webseiten müssen als absoluter Pfad gesetzt werden. Eingebundene Bilder hingegen können auch relativ verlinkt werden, um die Darstellung der HTML-Seite auf jedem System auch offline zu gewährleisten. Dasselbe gilt für interne Unterseiten eines HTML-Projektes. Ebenfalls essentiell ist die Groß- und Kleinschreibung der verlinkten Dokumente.
Gebot 4. Du sollst die strikte Trennung von Inhalt und Layout beachten.HTML strukturiert eine Seite und beschreibt nicht wie sie aussieht. Ausschließlich CSS dient zur Gestaltung der Seite. Beachten Sie dies schon mit Beginn der Erstellung, eine nachträgliche Anpassung ist oft unnötig und zeitaufwändig.
Gebot 5. Du sollst nicht mit Attributen oder Elementen formatieren, die den Status „deprecated“ haben.Viele Formatierungselemente und Attribute in HTML verstoßen gegen die strikte Trennung von Inhalt und Layout. Demnach sollten sie nicht mehr verwendet werden und erhalten den Status „deprecated“ (z.B. „font-Tag“). Verwenden sie deshalb ausschließlich Logische Auszeichnungen (z.B. „em-Tag“ oder „strong-Tag“) anstatt Physikalischen Auszeichnung bzw. Visuellen Auszeichnung (z.B. „i-Tag“ oder „b-Tag“).
Gebot 6. Du sollst eine HTML-Seite nicht mit Layouttabellen gestalten.Die Verwendung von Layouttabellen verstößt gegen die strikte Trennung von Inhalt und Layout. Inzwischen ist es ohne Probleme möglich tabellenfreie Layouts mit CSS zu erstellen.
Gebot 7. Du sollst auf zu viele Animationen, unterschiedliche Textfarben und Schriftarten verzichten.Zu viel verschiedene Formatierungen und blinkende Layoutelemente können leicht Verwirrung schaffen, sind nicht immer lesbar und lenken vom Inhalt ab.
Gebot 8. Du sollst für z.B. Grafiken und Formularelemente immer auch eine Beschreibung mittels „alt-Attribut“ hinzufügen.Verwenden Sie stets das „alt-Attribut“ um Grafiken, Bilder, Formularelemente, applets etc. zu beschreiben, um jedem Nutzer die Chance zu geben, die Inhalte zu erfassen.
Gebot 9. Du sollst Nutzergruppen nicht durch Aussagen wie: „optimiert für Internet Explorer 4.1, SeaMonkey 5.0, etc.“ oder die Verwendung von horizontalen Scrollleisten ausschließen. Nicht alle HTML-Eigenschaften und CSS-Regeln funktionieren in jedem Browser. Es handelt sich dabei meist um zusätzliche Layouteffekte. Versuchen Sie sich auf die gängigen CSS-Regeln zu beschränken, die auf allen Browsern funktionieren. Die ggf. ein wenig abweichende Darstellung einer Seite auf unterschiedlichen Browsern ist dabei nicht gemeint. (In den meisten Werken zu HTML & CSS sind CSSReferenzkarten enthalten, die anzeigen welche CSS-Regeln von den gängigen Browsern unterstützt werden). Horizontale Scrollleisten sind nicht benutzerfreundlich. Durch Verwendung von h. S. kann nicht ausgeschlossen werden, dass der Inhalt teilweise oder gar nicht wahrgenommen wird. Abhilfe schafft eine feste horizontale Seitenbeschränkung und die automatische Verwendung von vertikalen Scrollleisten in CSS.
Gebot 10. Du sollst Metainformationen sinnvoll einsetzen.Erweitern Sie Ihre HTML-Seite mit sinnvollen Zusatzinformationen und vermeiden Sie überflüssige Informationen bzw. Wiederholungen. Unterlassen Sie den Missbrauch von Metainformationen zum eigenen Vorteil (z.B. Werbung, gezieltes Ranking, Spam).
[Quelle] HTML Basics
Hinweise zu HTML Formatierung
Bereich Grundgerüst:
Faustregel: Eine HTML-Seite beginnt in der Regel mit <html> und endet mit </html>. Alles dazwischen hat irgendwie Auswirkungen auf das, was Sie im und am Browser sehen.
Kopfbereich:
Die Angaben im Kopfabschnitt einer HTML Seite bewirken keine Ausgabe im Anzeigebereich des Webbrowsers. Sie können Hintergrundinformationen über die HTML-Seite angeben und den Text in die Titelleiste des Browsers setzen. Für die Ausgabe ist der Inhaltsabschnitt zuständig.
Schrittfolge einer HTML Seite:
- Erstelle in einem Editor ein neues Dokument und speichere es.
- Beginne mit <html> und </html>. Füge dazwischen eine ausreichende Zahl an Leerzeilen ein.
- Erstelle dann den Kopfabschnitt mit <head> und </head>.
- Gebe innerhalb des Kopfabschnittes zwischen <title> und </title> den Seitentitel an.
- Fasse den Inhaltsabschnitt zwischen <head> und </html>. Gekennzeichnet wird dieser mit <body> und </body>-
- Innerhalb des Inhaltsabschnittes gibst du den Inhalt deiner Seite an: Text, Balken, etc.
- Speichere am Ende das Dokument erneut und am Besten auch schon in der Zwischenzeit auch schon das ein oder andere Mal.
Umbrüche:
- Faustregel: Bei kleinen Abständen <br /> , bei großen Abständen <br /> und bei Absatzabständen immer <p>
Wichtige HTML Tags
HTML Grundgerüst:
Tags | Erklärung |
<html> … </html> | Äußerer Rahmen |
<head> … </head> | Kopfbereich |
<title> … </title> | Titel der Seite (Kopfbereich) |
<style> … </style> | Stilangaben (Kopfbereich) |
<body> … </body> | Inhaltsbereich |
Textformatierung:
Tags | Erklärung |
<p> … </p> | Absatz |
<br> | Zeilenumbruch |
<hr> | Horizontale Linie |
<b> … </b> | Fettdruck |
<i> … </i> | Kursivdruck |
<sup> … </sup> | Hochgestellt |
<sub> … </sub> | Tiefgestellt |
<font face=“ …“> … </font> | Schriftart |
<font size=“…“> … </font> | Schriftgröße |
<font color=“…“> … </font> | Schriftfarbe |
<s> … </s> | Durchgestrichen |
<blink><s> … </s></blink> | Blinkender Text |
<div> … </div> | Container, Block |
<div> … </div> | Container, Block |
<!--DATE-->21.04.2007<!--/DATE--> | Automatisch aktualisiertes Datum |
<nobr> … </nobr> | Verhindern von Umbrüchen |
Listen:
Tags | Erklärung |
<ol> … </ol> | Geordnete Liste (1.,2.,3.,…) |
<ul> … </ul> | Ungeordnete Liste (Aufzählungszeichen) |
<li> … </li> | Listenelement (innerhalb einer Liste) |
| |
Unicode Zeichen:
ACHTUNG BEI AUSLÄNDISCHEN WEBSITES!!! BESSER DIE UNICODE ENTITÄT BENUTZEN!!!
Zeichen | Unicode-Entität | Entität-Kurzform |
ä | ä | ä |
Ä | Ä | Ä |
ö | ö | ö |
Ö | Ö | Ö |
ü | ü | ü |
Ü | Ü | Ü |
ß | ß | ß |
€ | € | &euro |
© | © | © |
™ | ™ | &trade |
Ausrichtung des HTML Textes in Verbindung mit <p align =“ “ :
“left” – Standard, linksbündige Ausrichtung
“center“ – zentrierter Absatz
“right“ – rechtsbündige Ausrichtung
“justify“ – Blocksatz, wird aber nicht von allen Browsern unterstützt
- unterschiedliche Formatierungselemente können miteinander kombiniert werden:
z.B. <b><i>Text</i></b> - Text wird fett und kursiv
- Schriftauszeichnungen werden eigentlich über CSS verwirklicht in HTML funktioniert es so:
- Schrifttyp: <font face="Times New Roman">
- Schriftgröße: <font size="1"> orientiert sich an eingestellter Schriftgröße
- Schriftfarbe: <font color="Black"
Probleme bei HTML & CSS
- Unterschiedliche Browser zeigen das gleiche HTML Dokument unterschiedlich an: Problem hierbei ist, dass prinzipiell alle Style-Angaben von jedem Browser individuell interpretiert werden. Die unterschiedlichen Darstellungen nähern sich mit den aktuellen Browserversionen und Betriebssystemen zwar immer mehr an, aber eine korrekte Darstellung verlangt einige Erfahrung.
- HTML ist nicht schwer, aber komplex: HTML Sprache zu erlernen ist nicht schwer. Sicherlich braucht es Zeit und Geduld um eine erste eigene Homepage nach seinen Wünschen zu gestalten, aber mit einigen Plattformen im WWW und guter Lektüre ist die Sprache durchaus erlernbar. Problem ist nur: Man sollte vorher wissen, welche komplexe Möglichkeiten dieses HTML offen hält. Also durchaus schnell agieren, aber nicht überhastet!!
Hinweise zu HTML
Texte in HTML
Erläuterungen zu Texten
In HTML gibt es für die Formatierung von Text extrem viele Möglichkeiten. Da unser Platz an dieser Stelle deutlich begrenzt ist, möchten wir euch vor allem einen Rat mit auf den Weg geben. Mit Hilfe der obigen Screenshot haben wir die wichtigsten Stukturierungen bereits publilziert.
Übertreibt es nicht mit den Farben, Animationen und Effekten! Zu viel ist auch nicht gut!!!
Hinweise zu HTML
Listen in HTML
Erläuterung zu Listen
Aufzählungslisten:
Schrittfolge zur Erstellung einer Aufzählungsliste:
- Erstelle ein HTML Grundgerüst.
- Beginne die Aufzählungsliste im <body> Abschnitt mit dem Tag <ul> (ungeordnete Liste)
- Erstelle das erste Element der Liste und umgebe es mit <li> und </li> (list item, Listenelement).
- Wiederhole den Schritt 3 solang wie nötig.
- Beende die Liste mit </ul>
Symbole ändern:Du kannst die Aufzählungssymbole der Listen ändern, in dem du die folgenden Werte als type Atrribut des <ul> Tags angibst.
- "circle" - Kreis
- "disc" - Scheibe
- "square" - Quadrat
Beispiel: <ul type="circle">
<li> Apfel </li>
</ul>
Ausgabe im Browser: Nummerierte Listen:
Schrittfolge zur Erstellung einer nummerierten Liste:
- Erstelle ein HTML Grundgerüst.
- Beginne im <body> Abschnitt mit dem Tag <ol> (ordered list - geordnete Liste).
- Erstelle wie gewohnt die einzelnen Elemente der Liste mit <li> </li>
- Beenden der Liste mit </ol>
Beispiel: <ol>
<li> Apfel </li>
</ol>
Ausgabe im Browser: 1. Apfel
!!! Du kannst die Aufzählung jedoch auch bei einer belieben anderen Zahl starten lassen - dazu nutze am besten das Attribut <ol start="Zahl">!!!
Weitere Nummerierungen:- Nummerierung in kleinen römischen Ziffern <ol type="i">
- Nummerierung in großen römischen Ziffern <ol type"I">
- Nummerierung in kleinen Buchstaben <ol type="a">
- Nummerierung in großen Buchstaben <ol type="A">
Links in HTML
Links in HTML
Erläuterungen zu Links
Der Screenshots rechts zeigt dir, wie man Links allgemein in HTML Dokumente einpflegt. Natürlich gibt es auch hier allerlei Spezifikationen.
Formatierung von Links- Normaler Link: <a href=" ">Linktext </a> <br /> <a> umfasst den Link, href gibt das Linkziel an und Linktext steht für den Text, der als Link fungieren soll
- Größe, Farbe und Effekte können wie bereits kennengelernt genutzt werden
Interne Links- Links im gleichen Verzeichnis: <a href="index.html"> Hier gibts Info´s </a>
- Relative Links: <a href="presse/index.html"> Pressetexte </a> - Wechseln in anderes Verzeichnis
- Absolute Links: <a href="/index.html"> Zur Hauptseite</a> - Verweise auf Hauptverzeichnisse
Externe Links
- HTTP - Links: <a href="http://www.tu-ilmenau.de">TU Ilmenau </a> - Link zu anderem Webangebot
- FTP - Links: <a href="ftp://ftp.microsoft.com/"> FTP Server </a> - File Transfer Protocol - geeignet für Download
Newsgroups- Beispiel: <a href="news:comp.infosystems.www.authoring.html"> Zur Newsgroup </a>
Mail Links- Beispiel: <a href="mail.support@person.de"> Mail an Support Team </a>
Textmarken- Beispiel: <a name="oben"> Irgendein Text </a> dazu der Link <a href="#oben"> nach oben </a>
CSS Einbindung in HTML
Einbindung von CSS in HTML
Erläuterungen zu CSS in HTML
Mit Style Sheets definierst du Formatierungen für Tags. Bei HTML Seiten wird als Sprache für die Style Sheets das Format Cascading Style Sheet (CSS) verwendet.
Verschieden Arten von Style Sheets:Man unterscheidet die Arten von Style Sheets nach der Stelle, an der sie eingebunden sind. Man kann einzelnen HTML Befehlen Stile zuweisen oder man definiert sie am Kopf der HTML Seite. Wenn du ein Style Sheet global für mehrere Dokumente anlegen möchtest, kannst du eine eigene Datei mit dem Dateiende .css anlegen und es in den Kopf der HTML Seite laden.
Beispiel für Stile in HTML Dokumenten:<p style="color:blue; font family: Courier"> Blaue Schrift </p>
Anzeige im Browser: Blaue Schrift
Style Sheet im Kopfbereich:
Schrittfolge eines solchen Styles
- Style Sheet Definition zwischen <head> und </head>. Dazu dient das Tag <style>.
- Im <style> Tag wird mit type="text/css" die Art des Style Sheets festgelegt. text/css bedeutet, dass es sich um einen Cascading Style Sheet handelt.
- Die Style Sheet Definition beginnt mit einem Kommentar: <!-- Kommentar -->
- Mit P(Beispiel) legst du fest, dass der Stil für alle <p> Tags in der HTML Seite verwendet wird. Die Definition des Stils erfolgt in geschweiften Klammern.
- Im Körper des Dokumentes werden dann alle Absätze nach dem angelegten Schema formatiert.
Beispiel: <style type="text/css">
<!-- P{color:blue} -->
</style>
Externes Style importieren oder verlinken
- Für den Import eines externen Style Sheets verwendest du am besten den Tag @import url im Kommentar.
Beispiel: <!-- @import url(style.css) -->- Für das Verlinken von externen Style Sheets nutzt du den Tag link href.
Beispiel: <link href="style.css" rel=stylesheet type="text/css" title=stylesheet1"> Möglichkeiten von CSS in HTML
Möglichkeiten von CSS für HTML Dokumente
Videos
Hilfreiche Videos zu HTML & CSS
Tutorial in Englisch zu HTML
Tutorial 2 zu Video am Anfang der Page
CSS Tutorial in Englisch
CSS Tutorial 2 in Englisch
Photos
Die Themen
Zeilenumbrüche in HTML
Mit dem Befehl <nobr></nobr> kannst du Zeilenumbrüche verhindern. Das "No break" Element lässt diese nämlich nicht zu.
Grundgerüst einer HTML Datei
Sonderzeichen
Absätze in HTML
Überschriften
Ausrichten von Text
geordnete Listen mit arabischen Ziffern
Ungeordnete Listen
Link in HTML einbinden
1. Schreiben der HTML Datei und einbinden des Style Sheets
2. Anzeige im Browser
Beispiel Style Sheet
CSS Hintergrundbilder
CSS Klassen
Hintergrundfarben
CSS Bilder
Anzeige der Schriftformatierung im Browser
Schriftformatierung in HTML mit externen CSS Dateien