GRUNDLAGEN HTML + CSS

Transkript

1 GRUNDLAGEN HTML + CSS Bitte beachten Sie mein Urheberrecht. Keine Veröffentlichung auch nicht in Auszügen - oder Weitergabe an Dritte ohne mein Einverständnis. alle Rechte vorbehalten: BüroSmart, Michaela Steidl, Römerstraße 12, Wölfersheim Telefon: +49 (0) / Mobil: +49 (0) / [email protected]

2 INHALTSVERZEICHNIS 1. Einleitung HTLM $ALLGEMEINES$...$3 2.2$AUFBAU$...$4 2.3$DIE$WICHTIGSTEN$HTML7BEFEHLE$...$ ÜBERSCHRIFTEN: ABSATZ ZEILENUMBRUCH LINKS AUFZÄHLUNGSLISTEN BILDER CSS $ALLGEMEINES$...$9 3.2$AUFBAU$...$9 3.3$DIE$WICHTIGSTEN$CSS7FORMATIERUNGEN$...$ SCHRIFTGESTALTUNG FARBE AUSRICHTUNG RAHMEN $KLASSEN$...$16 4. Theme-Editor Mehr Informationen zum Thema HTML und CSS BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0) /E<Mail:[email protected]

3 1.Einleitung Manchmal kommt man mit den Formatierungsmöglichkeiten, die über die Einstellungen des Themes möglich sind, einfach nicht mehr weiter. Dann ist es hilfreich, wenn man ein paar grundlegende Kenntnisse über die Funktionsweise von HTML und CSS hat und die wichtigsten Befehle dieser Programmiersprachen kennt. So kann man dann über den HTML-Editor für Seiten und Artikel oder über den Theme- Editor auch tiefergehende Anpassungen an einem Theme vornehmen und dieses noch individueller gestalten. Es ist im Rahmen dieses Kurses natürlich nicht möglich, Ihnen tiefschürfende Kenntnisse in diesen beiden Programmiersprachen zu vermitteln. Aber auch mit nur wenigen grundlegenden Kenntnissen können Sie schon einiges an individuellen Formatierungen vornehmen. Diese zu vermitteln, ist Ziel dieses ebooks. 2.HTLM 2.1Allgemeines HTML ist eine Abkürzung und steht für Hypertext Markup Language. Im Prinzip ist HTLM eine Programmiersprache für Websites, die von einem unabhängigen Gremium, dem World Wide Web-Konsortium (kurz W3C ) betreut wird. Mit HTML können Sie die Struktur und das Aussehen Ihrer Website definieren. Außerdem können Sie mit HTML festlegen, ob es sich bei einem bestimmten Abschnitt zum Beispiel um einen Absatz, eine Überschrift oder eine Liste handelt. Internetbrowser stellen diese Elemente nach einem festgelegten Standard dar. So wird ein Link z.b. von den meisten Browsern standardmäßig blau und unterstrichen dargestellt. Um die Standard-Darstellungen (sog. Default-Formatierung ) der Browser zu ändern, benötigt man CSS, auf das ich weiter unten in dieser Arbeitsunterlage noch näher eingehe. BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0) /E<Mail:[email protected]

4 2.2Aufbau HTML-Befehle werden in sogenannten Tags geschrieben. Diese Tags stehen immer in spitzen Klammern ( < und > ). Man unterscheidet dabei nach Starttags und Endtags Starttags sind z.b. <a>, <ul> oder <h1>. Endtags beginnen immer mit </, also z.b. </a>, </ul> oder </h1> Manche Tags, die keinen eigenen Endtag haben, werden mit einem abschließenden / geschlossen. Das sieht dann zum Beispiel so aus: <br /> Es ist wichtig, dass jeder Starttag auch wieder geschlossen wird, entweder durch den Endtag oder durch den abschließenden /, damit der darstellende Browser weiß, an welcher Stelle der Übergang zum nächsten Element erfolgt. 2.3DiewichtigstenHTML<Befehle Ich führe hier die wichtigsten Befehle mit einer kurzen Erläuterung aus und zeige jeweils den Start- und Endtag sowie ein Beispiel für den korrekten Aufbau Überschriften: Diese werden mit <h1> (Überschrift Ebene 1) bis <h6> geöffnet und mit </h1> bis </h6> geschlossen. Zwischen dem Start- und dem Endtag steht der Text der Überschrift, der dann mit der entsprechenden HTML-Formatierung ausgegeben wird. Die Darstellung der Überschriften ist von der Browsereinstellung oder der Einstellung in der style.css des jeweiligen Themes abhängig. BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0) /E<Mail:[email protected]

5 Beispiel für die Darstellung <h1>überschrift Ebene 1</h1>$$Überschrift Ebene 1$ <h2>überschrift Ebene 2</h2> Überschrift Ebene 2 <h3>überschrift Ebene 3</h3> ÜBERSCHRIFT EBENE 3 <h4>überschrift Ebene 4</h4> ÜBERSCHRIFT EBENE 4 <h5>überschrift Ebene 5</h5> ÜBERSCHRIFT EBENE 5 <h6>überschrift Ebene 6</h6> Überschrift Ebene Absatz Ein Absatz wird in HTML immer mit <p> eingeleitet und endet mit </p> Zwischen zwei Absätzen wird ein kleiner Leerraum angezeigt. Beispiel für die Darstellung <p>das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext</p> <p>und hier kommt noch einer. Und hier kommt noch einer. Und hier kommt noch einer. Und hier kommt noch einer. Und hier kommt noch einer</p> Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext Und hier kommt noch einer. Und hier kommt noch einer. Und hier kommt noch einer. Und hier kommt noch einer. Und hier kommt noch einer BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0) /E<Mail:[email protected]

6 2.3.3Zeilenumbruch Man kann im HTML-Text auch einen Zeilenumbruch erzwingen. Dafür verwendet man den Tag <br />, der keinen eigenständigen Endtag hat. Beispiel für die <p>meine Hobbies sind<br />Gartenarbeit<br />Klettern<br />und hin und wieder ein gutes Buch.</p> Meine Hobbies sind Gartenarbeit Klettern und hin und wieder ein gutes Buch 2.3.4Links Links werden im HTML-Text durch den Tag <a href> gestartet und durch </a> geschlossen. Hinter href kommt in Anführungszeichen die Adresse, wohin der Link führen soll. Man kann dem Brower außerdem vorgeben, ob der Link im selben Fenster geöffnet werden soll (target= _self ) oder ob sich nach dem anklicken des Links ein neues Fenster öffnen soll (target= _blank ). <a href= target= _blank >wp-bistro.de</a> Wenn dieser Link im Internetbrowser steht, öffnet sich beim Anklicken ein neues Browserfenster BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0) /E<Mail:[email protected]

7 2.3.5Aufzählungslisten Aufzählungen werden in HTML immer mit einem <ul> (für unsortierte Listen ) bzw. einem <ol> ( ordered list, d.h. sortierte Listen ) eingeleitet und ganz am Ende der Aufzählung mit </ul> bzw. </ol> geschlossen. Die einzelnen Listenpunkte beginnen immer mit <li> und werden mit </li> geschlossen. Bei unsortierten Listen werden die einzelnen Listenpunkte mit einem vorangestellten Anführungspunkt versehen, sortierte Listen werden durchnummeriert. Hier eine kleine Aufzählung in einer unsortierten Liste: <ul> <li>listenpunkt Nummer 1</li> <li>listenpunkt Nummer 2</li> <li>listenpunkt Nummer 3</li> </ul> Hier eine kleine Aufzählung in einer unsortierten Liste Listenpunkt Nummer 1 Listenpunkt Nummer 2 Listenpunkt Nummer 3 Hier eine kleine Aufzählung in einer sortierten Liste: <ol> <li>listenpunkt Nummer 1</li> <li>listenpunkt Nummer 2</li> <li>listenpunkt Nummer 3</li> </ol> Hier eine kleine Aufzählung in einer sortierten Liste: 1. Listenpunkt Nummer 1 2. Listenpunkt Nummer 2 3. Listenpunkt Nummer 3 BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0) /E<Mail:[email protected]

8 2.3.6Bilder Um Bilder in eine Website einzubinden, verwendet man den Tag <img>, der keinen eigenen Endtag besitzt. Die Angabe der Bildquelle erfolgt mit Hilfe von src, gefolgt von dem Pfad, auf dem das Bild gespeichert ist. Dafür ist es natürlich erforderlich, das Bild in den eigenen Webspace hochzuladen bzw. die Bildadresse zu kennen, wenn man ein Bild von einer anderen Seite einbinden möchte (Achtung: Dabei immer die Urheberrechte beachten). Man kann die Größe des Bildes durch die Befehle width und height unabhängig von der Originalgröße im Browser anzeigen lassen. Da dies aber immer Rechenleistung benötigt, empfiehlt es sich, das Bild lieber vor dem hochladen auf die benötigte Größe zu skalieren. Zu einem Bildtext sollte immer auch ein Alternativtext angegeben werden, der dann angezeigt wird, wenn das Bild im Browser nicht dargestellt werden kann. Dies geschieht über den Parameter alt Außerdem kann man einem Bild auch noch einen Titel geben. Dieser wird angezeigt, wenn man mit der Maus über das Bild fährt. Dafür verwendet man den Parameter title. alt und title sind nicht zwingend erforderlich, um das Bild korrekt darzustellen, aus Gründen der Benutzerfreundlichkeit und Suchmaschinenoptimierung sollten Sie aber immer mit angegeben werden. <img src= alt= kleine lustige Bombe title= eine lustige kleine Bombe width= 150px height= 225px /> BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0)160

9 3.CSS 3.1Allgemeines Die Abkürzung CSS steht für Cascading Stylesheets. Es ist wie HTML eine Programmiersprache, aber im Gegensatz zu HTML, dass die Strukturierung der Website gestaltet, wird CSS für die Formatierung verwendet. CSS wird ebenso wie HTML vom World Wide Web-Konsortium (W3C) betreut. Ganz grundsätzlich werden HTML und CSS in einem Content Management System wie WordPress streng voneinander getrennt. Der HTML-Code wird in den Template-Dateien festgelegt, die Formatierung über die sogenannte style.css geregelt. 3.2Aufbau CSS-Regeln werden nach einem immer gleichen Schema aufgebaut: Zuerst steht der sogenannte Selektor. Damit wird angegeben, für welches HTML- Element diese Formatierungsregel gelten soll. Der Selektor ist also jeweils der HTML- Befehl, der für die Strukturierung eines Bereiches verwendet werden kann. (Beispiele: h1, ul, p,...) Danach folgt in geschweiften Klammern ( { und } ) die Formatierungsanweisung. Eine solche Formatierungsanweisung setzt sich zusammen aus dem Namen, der Eigenschaft, einem Doppelpunkt und dem Wert. Jede Anweisung wird durch ein Semikolon ( ; ) beendet. h1 {color: red;} Im obigen Beispiel sind: h1 = Selektor color = Name / Befehl red = Wert Durch diese CSS-Regel werden alle Überschriften auf der Website, die zwischen <h1> und </h1> stehen, rot eingefärbt. BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0) /E<Mail:[email protected]

10 Man kann aber auch im HTML-Editor einzelne Elemente durch CSS-Formatierungen anpassen. Das macht Sinn, wenn man z.b. nur eine einzige Überschrift in einer anderen Farbe anzeigen lassen möchte. In diesem Fall gilt nicht der nachfolgende Aufbau, sondern die Formatierungen werden über das Wort Style eingebaut. Beispiel: <p style= color: red; >Text</p>. In diesem Fall wird das Wort Text dann in rot ausgegeben. Möchte man innerhalb eines bestimmten Elementes nur einige Wörter hervorheben, geht das durch den Befehl <span></span> Ein Beispiel: <p>in diesem Beispielsatz soll nur das Wort <span style= color: red; >Beispiel</span> in rot hervorgehoben werden</p> In diesem Beispielsatz soll nur das Wort Beispiel in rot hervorgehoben werden. 3.3DiewichtigstenCSS<Formatierungen Wie bei den HTML-Befehlen ist diese Auflistung selbstverständlich nicht vollständig. Ich zeige auch hier jeweils nur die aus meiner Sicht wichtigsten Befehle (Namen) und ein Beipiel für die Ausführung. Der Einfachheit halber sei angenommen, alle Formatierungen beziehen sich auf den Selektor p, es sei denn, es ist ausdrücklich anders angegeben. Der Text im HTML-Dokument ist wie folgt angegeben: <p></p> Die angenommene Standards-Schriftart ist Verdana mit 10px Schriftgröße in schwarz. BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0)160

11 3.3.1Schriftgestaltung $font)family$$ Dieser Befehl gibt vor, welche Schriftart für ein bestimmtes HTML-Element verwendet werden soll. Mögliche Parameter: Georgia -> Gibt vor, dass dieser Absatz in der Schriftart Georgia formatiert werden soll. Fest definierte Schriftarten werden immer in Hochkomma gesetzt. serif = Die Schriftart wird nicht exakt vorgegeben, der Browser wird aber angewiesen, eine Schriftart mit Serifen auszuwählen (wie z.b. Times New Roman) sans-serif = Wie serif, nur, dass der Browser dieses Mal angewiesen ist, den Absatz in einer serifenlosen Schrift (z.b. Verdana) anzuzeigen. Man kann auch eine feste Schriftart vorgeben und dem Browser eine weitere als Ausweichschriftart vorgeben, für den Fall, dass die vorgegebene Schrift auf dem anzeigenden Rechner nicht installiert ist. p {font-family: Times New Roman serif;} $font)size$ Über diesen Befehl wird die Schriftgröße gesteuert. Die Schriftgröße kann dabei im Verhältnis zur festgelegten Standardschriftgröße (z.b. 120%) oder in Pixeln (px) angegeben werden. p {font-size: 16px;} BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0) /E<Mail:[email protected]

12 $font)weight$ Mit diesem Befehl kann die Fettschrift des Textes formatiert werden. Man unterscheidet zwischen den folgenden Attributen light (Der Text wird dünner als normal dargestellt), normal (Der Text wird in normaler Schrift dargestellt), bold (Der Text wird in Fettschrift dargestellt) p {font-weight: bold;} $font)style$ Mit dem Befehl font-style kann der Schriftstil angepasst werden. Auch hier gibt es wieder drei Attribute: italique (Der Text wird kursiv dargestellt) oblique (Der Text wird in schräggestellten Schriftzeichen dargestellt) normal (Der Text wird in normaler Schrift angezeigt) p {font-style: italique;} BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0) /E<Mail:[email protected]

13 3.3.2Farbe Die beiden wichtigsten Befehle für die Farbgestaltung sind color und background-color color bestimmt dabei die Schriftfarbe, background-color definiert die Hintergrundfarbe eines bestimmten Elementes. Farben können entweder im Klartext oder als Hexadezimal-Code angegeben werden. Im Klartext können die folgenden 16 Attribute verwendet werden: Black (schwarz), green (grün), navy (dunkelblau), gray (grau), lime (hellgrün), blue (blau), maroon (dunkelrot), olive (olivgrün), purple (lila), red (rot), yellow (gelb), fuchsia (magenta), silver (hellgrau), aqua (hellblau), teal (blaugrün) und white (weiß) Ein Hexadezimal-Code sieht z.b. so aus: #cc0000 Wenn Sie nicht wissen, welchen Hexadezimal-Code Ihre Lieblingsfarbe hat, hilft Ihnen vielleicht diese Website weiter: p {color: #ff6600;} p {background-color: yellow;} BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0) /E<Mail:[email protected]

14 3.3.3Ausrichtung Für die Ausrichtung, z.b. von Text oder Bildern, gibt es zwei wichtige Befehle: textalign und float text-align steuert dabei mit drei möglichen Attributen die Ausrichtung des Textes: left (Der Text wird linksbündig ausgerichtet) center (Der Text wird zentriert ausgerichtet) right (Der Text wird rechtsbündig ausgerichtet) float dagegen gibt an, wie ein bestimmtes Element im Verhältnis zu dem nachfolgenden Element angeordnet ist. Hierfür gibt es zwei Parameter: left (Das Element steht links vom nachfolgenden Element) right (Das Element steht rechts vom nachfolgenden Element) P {text-align: center;} Dieses Mal am Beispiel von Bildern. Hier wird definiert, dass Bilder immer rechts vom nachfolgenden Text eingebaut werden sollen: img {float: right;}, das nachfolgende Bild wird rechts von diesem Absatz eingebunden Rahmen Mit dem Befehl Rahmen können Rahmen um einzelne HTML-Elemente herum angezeigt werden. Am ehesten bietet sich das natürlich für Bilder an, aber auch um einen Absatz oder eine Aufzählungsliste könnte man z.b. einen Rahmen einbinden. $ BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0) /E<Mail:[email protected]

15 $Border)Style$ Mit dem Befehl border-style wird die Art des Rahmens festgelegt. Es gibt dafür verschiedene Attribute, die wichtigsten sind: hidden (Kein Rahmen, bzw. ein unsichtbarer Rahmen) solid (Eine durchgezogene Linie) dottet (Ein Rahmen aus vielen kleinen Punkten) dashed (Ein gestrichelter Rahmen) double (eine doppelte, durchgezogene Linie) $Border)Color$ Mit dem Befehl border-color wird die Rahmenfarbe vorgegeben. Für die Attribute gilt dasselbe wie in Kapitel $Border)Width$ Mit dem Befehl border-width wird die Rahmenstärke in Pixel vorgegeben. p {border-style: solid; border-color: red; border-width: 3 px;} Dasselbe Ergebnis wird übrigens auch durch diese Kurzform erreicht: p {border: solid red 3px;} BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0) /E<Mail:[email protected]

16 3.4Klassen Es gibt in CSS die Möglichkeit, für einzelne Elemente sogenannte Klassen anzulegen. Damit könnten Sie zum Beispiel vorgeben, dass nicht alle Überschriften einer Ebene in der selben Art formatiert werden, sondern die Überschriften für Blogartikel in einer anderen Farbe und Schriftgröße angezeigt werden. Dafür vergeben Sie im HTML-Editor einen Namen für diese Überschrift, zum Beispiel: <h1 class= blog > In der CSS-Datei können Sie diese Klasse dann definieren, indem Sie als Selektor den vergebenen Namen mit einem. davor vergibt: Beispiel für die Darstellung h1 {font-size: 18px; color: red;} h1.blog {font-size: 20px; color: blue;} <h1></h1> <h1 class= blog ></h1> 4.Theme<Editor Wie in Kapitel 3.2 erläutert, kann man alle Formatierungen über die entsprechende Angabe im HTML-Editor einer Seite oder eines Artikels verwenden, um eine einfache Anpassung vorzunehmen. Wenn man aber bestimmte Elemente dauerhaft und mit Gültigkeit für die gesamte Website verändern möchte und die Theme-Optionen diese Möglichkeit nicht bieten, ist es sinnvoll, diese Anpassungen in der style.css vorzunehmen. Das geht am einfachsten über den Theme-Editor, den Sie über das Menü mit Design -> Editor aufrufen können. Sie finden dann auf der rechten Seite eine Auflistung aller Theme-Dateien. Relativ weit unten sind die Stylesheets gelistet. Um die style.css anzpassen, öffnen Sie diese durch anklicken im Bearbeitungsfenster. BittebeachtenSiemeinUrheberrecht.KeineVeröffentlichung auchnichtinauszügen<oderweitergabeandritte ohnemeineinverständnis. allerechtevorbehalten:bürosmart,michaelasteidl,römerstraße12,61200wölfersheim Telefon:+49(0) /Mobil:+49(0)160