Format- oder Stilvorlagen

Vorraussetzung Sie sollten Grundkenntnisse der HTML-Sprache besitzen, um die Ausbildungseinheit Formatvorlagen, auch Stilvorlagen genannt, ohne Probleme verstehen zu können. Ist dies nicht der Fall, empfehlen wir Ihnen, sich zunächst die Ausbildungseinheit Eine Mini-Website an einem Nachmittag anzusehen. Was ist ein Format? Mit Hilfe eines Formats kann man eine bestimmte Typographie auf einen Text anwenden. Die Typographie betrifft die Wahl der Schriftart, der Schriftgröße, der Farbe und ob der Text fett oder kursiv gesetzt wird... Aus diesem Grund sind Formate für das Layout einer Website wichtig. Wozu dienen Formatvorlagen? Sie kennen den Tag . Der Tag dient dazu, die Schriftart, die Farbe und die Größe eines Textes zu bestimmen, den der einfasst. Wenn der Text in Arial, in roter Farbe und der Größe 12 erscheinen soll, dann schreibt man dies folgendermaßen: Dies ist mein Text Wenn dieser Text zudem noch fett, kursiv und unterstrichen sein soll, muss man um den Text herum die Tags (für Fettschrift), (Kursivsetzen), (Unterstreichen) ergänzen. dies ist mein Text Diese Methode erscheint sehr kompliziert. Sie hat aber vor allem einen großen Nachteil: Stellen Sie sich vor, dass Sie eine Website mit etwa 12 Seiten erstellen möchten und jedes Mal folgende Zeile kopieren müssen, um dieses Format zu erhalten: einzufügender Text Nehmen wir weiter an, dass Sie diesen Code einige Male um den entsprechenden Text herum kopiert haben und der Text im gewollten Format dargestellt wird (Arial, rot, Größe 12, fett, kursiv, Mit Unterstützung der Europäischen Union

unterstrichen). Nun ändern Sie aber Ihre Meinung und möchten den Text doch nicht fett anzeigen lassen. Sie müssten sich erneut jeden betroffenen Textabschnitt einzeln vornehmen und jeweils den Tag löschen. Mit Hilfe einer Formatvorlage können Sie so viele Formate definieren, wie sie möchten. Anschließend können die Vorlagen auf alle Seiten einer Website angewendet werden. Außerdem ermöglichen Formatvorlagen die Farbe, Größe, Schriftart... beispielsweise Ihrer Hyperlinks festzulegen. Formate können auf zwei verschiedene Art und Weisen auf eine HTML-Seite angewandt werden: - Als interne Formatvorlage eines bestimmten Dokuments. Sie ist in der Kopfzeile festgeschrieben und hier innerhalb des Tags <HEAD> und </HEAD>. - Als externe Formatvorlage. Sie ist in einem externen Dokument festgeschrieben und besitzt die Endung.css. Interne Formatvorlagen 1. Öffnen Sie den Text-Editor (Start -> Programme -> Zubehör -> Editor bzw. SimpleText bei einem Macintosh) und kopieren Sie folgenden Text: <title>interne Formatvorlage</title> Speichern Sie das Dokument unter formatvorlage_1.html 2. Innerhalb des Tags schreiben Sie folgenden Text: Innerhalb dieses Tags werden wir nun verschiedene Formate definieren. 3. Das erste Format, das wir definieren, nennen wir H1: => definiert die Schriftart des Formats => definiert die Größe des Formats in Pixel => definiert, ob der Text fett oder kursiv angezeigt wird => definiert die Farbe des Textes (die Farbe wird in einem Hexadezimal-Code ausgedrückt) => definiert, ob der Text unterstrichen ist oder nicht Seite 2

4. Innerhalb des Tags <style> fügen Sie das Format H1 ein. Dies ergibt: <title>interne Formatvorlage</title> 5. Nun erstellen wir einen Paragraphen innerhalb unserer HTML-Seite. Auf diesen Paragraphen wenden wir das Format H1 an. Dies schreibt man mit Hilfe des Attributs class=. <title>interne Formatvorlage</title> --!> Text, auf den wir die Formatvorlage H1 anwenden Falls der Text nicht unterstrichen sein soll, kann man einfach folgenden Code von in text-decoration: none; abändern. Alle Paragraphen, auf die wir das Format anwenden, werden abgeändert. Seite 3

6. Nun erstellen wir drei weitere Formate: H2, H3 und H4. 7. Wir integrieren die Formate in den Tag <style>: <title>interne Formatvorlage</title> --> Seite 4

Text, auf den wir die Formatvorlage H1 anwenden Text, auf den wir die Formatvorlage H2 anwenden Text, auf den wir die Formatvorlage H3 anwenden Text, auf den wir die Formatvorlage H4 anwenden <a href= # >Ein Hyperlink</a> 8. Mit Hilfe des Tags <style> können Sie auch die Anzeige der Hyperlinks auf Ihrer Internetseite definieren. Hyperlinks können auf drei verschiedene Arten angezeigt werden. hover : Der Link wird angezeigt, wenn man mit der Maus darüber zieht. link : Der Link wird als einfacher Link angezeigt. visited : Der Link, auf den man bereits geklickt hat, wird unterschiedlich angezeigt. Jede Art Links anzuzeigen entspricht einem Format, wobei die Namen der drei Formate nicht verändert werden können. Dies ist für die oben erstellten Formate nicht der Fall. Man hätte sie statt.h1 oder.h2 ebenso.format1,.format2 oder auch.meinformat1 und.meinformat2 nennen können. Die drei Formate heißen a:link, a:visited, a:hover. Innerhalb der Formate kann man eine Reihe von Elementen verändern. Der Einfachkeit halber empfehlen wir Ihnen, lediglich die Schrift- und die Hindergrundfarbe zu definieren oder den Text zu unterstreichen. In unserem Beispiel: Definieren Sie eine Hintergrundfarbe für das Format a:hover. 9. Wir werden nun die 3 Formate zu den 4 bereits erstellten Formaten hinzufügen. Anschließend setzen wir einen Hyperlink auf die Seite. Im Tag <style> ergänzen Sie nach den 4 bereits existierenden Formaten folgende Zeilen: a:link { color: #0000FF; a:visited { color: #999999; a:hover { background-color: #FF99CC; Fügen Sie außerdem nach den bereits erstellten Paragraphen innerhalb des Tag Folgendes ein: Dies ist <a href= # >ein Hyperlink</a> Seite 5

Der Code sollte nunmehr so aussehen: <title>interne Formatvorlage</title> a:link { color: #0000FF; a:visited { color: #999999; a:hover { background-color: #FF99CC; --> Text, auf den wir die Formatvorlage H1 anwenden Text, auf den wir die Formatvorlage H2 anwenden Text, auf den wir die Formatvorlage H3 anwenden Text, auf den wir die Formatvorlage H4 anwenden Dies ist <a href= # >ein Hyperlink</a> Sie wissen nun, wie eine interne Formatvorlage erstellt wird. Im Folgenden werden wir dieselbe Formatvorlage als externe Formatvorlage erstellen. Seite 6

Externe Formatvorlagen 1. Speichern Sie die Datei formatvorlage1.html als neue Datei. 2. Nennen Sie die neue Datei formatvorlage2.html. 3. Markieren Sie folgenden Text: a:link { color: #0000FF; a:visited { color: #999999; a:hover { background-color: #FF99CC; --> Seite 7

4. Schneiden Sie den markierten Text aus und fügen Sie ihn in ein neues Dokument ein. Speichern Sie den Text im gleichen Ordner wie formatvorlage1.html und formatvorlage2.html unter dem Namen externe_formatvorlage.css. Löschen Sie in dem neuen Dokument: und --> sodass nur der Inhalt des Tags <style> stehen bleibt. 5. Schreiben Sie im Dokument formatvorlage2.html innerhalb des Tags folgenden Code: <link href= externe_formatvorlage.css rel= stylesheet type= text/css > Hierdurch weiß die Webseite, welche Formatvorlage sie anwenden soll. 6. Der Code der Seite formatvorlage2.html sollte folgendermaßen aussehen: <title>externe Formatvorlage</title> <link href= externe_formatvorlage.css rel= stylesheet type= text/css > Text, auf den wir die Formatvorlage H1 anwenden Text, auf den wir die Formatvorlage H3 anwenden Text, auf den wir die Formatvorlage H3 anwenden Text, auf den wir die Formatvorlage H3 anwenden Dies ist<a href= # >ein Hyperlink</a> 7. So sollte der Code der Seite externe_formatvorlage.css aussehen: Seite 8

a:link { color: #0000FF; a:visited { color: #999999; a:hover { background-color: #FF99CC; Wenn Sie nun zur Liste der Ausbildungseinheiten zurückkehren, können Sie ein Beispiel zu Format und Stilvorlagen herunterladen. Seite 9