HTML Grundlagen – Teil 2

Design

CSS – das Design der Website

Im ersten Teil der HTML Blogserie habe ich Ihnen bereits erklärt, was HTML bedeutet und was sich dahinter verbirgt. Dort haben wir erfahren, dass HTML für den Inhalt und die Struktur einer Webseite zuständig ist. Nun stelle ich Ihnen im Teil 2 den Part vor, der für das Design Ihrer Webseite verantwortlich ist:

Cascading Style Sheets, kurz CSS, ist für das Aussehen (Design) einer Webseite zuständig. Wie bei HTML wird bei CSS eine Textdatei erstellt. Dort definieren Sie das Design z.B. die Farbe Ihres Texts oder die Hintergrundfarbe. Zudem handelt es sich bei der CSS-Datei um eine ausgelagerte Datei. Das bedeutet, Design Änderungen werden nicht in der HTML- sondern in einer externen Datei erfasst. Diese muss im Anschluss mit der HTML-Datei verknüpft werden.

Somit ist es möglich die Formatierungen, die in der CSS-Datei vorgenommen werden, für alle Einzelseiten zu übernehmen.

Der große Vorteil einer eigenen CSS-Datei liegt darin, dass diese nicht in die HTML-Befehle eingreift, sondern nur das Design darüber legt.

 

Aufbau (Syntax) von CSS

Der Aufbau eines CSS-Befehls ist prinzipiell einfach nachzuvollziehen. Bei jedem Befehl wird sich folgende Frage gestellt:

Wo soll welche Eigenschaft einen bestimmen Wert annehmen?

In Computer-Sprache bedeutet wo = Selektor und die Eigenschaft-Wert Kombination = Deklaration.

Eine Antwort auf diese Frage könnte wie folgt aussehen:

Die <h2> Überschriften sollen bei der Eigenschaft Schriftfarbe den Wert blau annehmen.

In CSS-Sprache sieht das dann wie folgt aus:

h2 { color:blue; }

Bei der CSS-Sprache umfassen die geschweiften Klammern die Kombination Eigenschaft und Wert. Die Klammern dienen dazu mehrere Anweisungen in einem Befehl auszuführen. Dank der Klammern bleibt der Aufbau übersichtlich.
Zudem ist es unabdingbar, das Semikolon nach dem Wert einzufügen. Denn erst dieses Zeichen schließt die Kombination aus Eigenschaft und Wert ab.

 

Einbindung von CSS in HTML

Insgesamt gibt es drei Möglichkeiten CSS in HTML einzubinden. Heute stelle ich Ihnen eine davon vor. Meiner Meinung nach ist diese die beste Lösung, um Ihre Dateien ordentlich und strukturiert zu halten.

Auslagerung in eine eigene CSS-Datei
Die Auslagerung benötigt zwei Dinge:
Zu allererst müssen Sie eine neue Textdatei anlegen. Diese können Sie nennen, wie Sie möchten. Für das nachfolgende Beispiel nenne ich sie design.css.
Anschließend muss im Head-Bereich der HTML-Dokumente ein Verweis zur CSS-Datei eingefügt werden.

Der Verweis im HTML-Dokument sieht wie folgt aus:
<link href=“namederdatei.css“ rel=“stylesheet“>

Sofern Sie beide Schritte befolgt haben, sollte die CSS-Datei erfolgreich in Ihrem HTML-Dokument eingebunden sein.

 

Farbeinstellung bei CSS

Bei der Farbeinstellung sollten Sie vorab wissen wie die englische Übersetzung der Farbe lautet und wie der RGB- oder der Hex-Farbwert lautet. Zu finden sind beide Informationen bei Google.

Mein Tipp: Falls Ihnen eine Farbe gefällt, Sie jedoch weder den RGB- noch den Hex-Wert kennen, können Sie ein Tool herunterladen, welches Ihnen beide Werte angibt. Hier kann ich Ihnen den MiniPicker (Mac) oder den ColorPic (Windows) empfehlen. Sobald Sie mit Ihrem Cursor über eine beliebige Farbe fahren, erkennt das Tool automatisch den RGB- und Hex-Wert.
Falls Sie nur den Hex-Wert, aber nicht den RGB-Wert kennen, können Sie dieses einfache Tool nutzen: http://hex.colorrrs.com/. Nettes Extra: Während Sie den Hex-Farbwert eingeben, ändert sich die Hintergrundfarbe passend zu der von Ihnen ausgewählten Farbe. In unserem Beispiel: cyan.

HEX to RGB Converter

Bei den Hex-Farbwerten wird zu Anfang eine Raute (#) verwendet und dann dahinter in sechs Stellen der Zahlenwert geschrieben.
Es ist Ihnen überlassen, ob Sie den Befehl mit dem englischen Begriff der Farbe nutzen oder ob Sie die Hex-Schreibweise nutzen. Die Hex-Schreibweise ist auf jeden Fall genauer und lässt verschiedene Farbnuancen zu.

Als Praxis-Beispiel nehmen wir nun unsere Überschrift, der wir die Farbe cyan zuweisen möchten. Dann sieht die Anweisung wie folgt aus:

h1 { color:#00FFFF; }
oder
h1 { color:cyan; }

Wichtig!
Die Anweisung sollte wieder in einer eigenen Datei eingefügt und mit dem HTML-Dokument verknüpft werden und nicht direkt im HTML-Text.

Damit Sie sich das Ganze auch bildlich vorstellen können, habe ich diese Übersicht ausgewählt, die Ihnen genau zeigt, welche Farbe welchen Hex- bzw. RGB-Wert hat.

Farbname, Hex- und RGB-Wert

 

Schriftgestaltung

Zuvor haben wir gelernt, wie wir unserer Überschrift eine bestimmte Schriftfarbe zuweisen. Nun möchten wir die Überschrift hervorheben und ihr eine Schriftart zuweisen.
Hierfür brauchen Sie folgende Anweisungen:

h1 { color:#00FFFF;
font-size:26pt;
font-family:sans-serif; }

font-size = Schriftgröße
font-family = Schriftart

Hier sind weitere Kombinationen, die Sie anwenden können:
font-weight = Schriftstärke
z.B.:
normal
bold
bolder
lighter

font-style = Anzeige der Schrift
z.B.
italic
oblique
normal

Seien Sie hier gerne kreativ und schauen Sie, welche Anpassungen am besten zu dem Design Ihrer Webseite passen.

 

Grafiken als Aufzählungszeichen

Sind Sie manchmal einfach nicht zufrieden mit den Standard Aufzählungszeichen und würden viel lieber etwas neues ausprobieren? Dann befolgen Sie diese Tipps:

  1. Legen Sie zu allererst eine Liste in Ihrem HTML-Dokument an. Wie das geht, erfahren Sie in Teil 1.
  2. Bestimmen Sie die Grafik des Aufzählungszeichens in CSS.

Und so geht’s:
Der Selektor bei CSS für Aufzählungspunkte lautet „ul“.
Nun brauchen Sie eine Grafik, die Sie als Aufzählungszeichen verwenden möchten. Als Beispiel nehmen wir nun diesen Pfeil mit der Bezeichnung icon-pfeil.gif:

GIF-Pfeil
Wenn Sie diesen Pfeil in CSS einbinden möchten, müssen Sie folgende Anweisung in Ihrer CSS-Datei nutzen:

ul { list-style-image:url(icon-pfeil.gif); }

Sobald Sie die CSS-Datei mit Ihrer HTML-Datei verknüpft haben, sollten Sie eine Grafik statt des Standard-Aufzählungszeichen sehen.
Damit der Server auf die Grafik zugreifen kann, muss diese separat in einem Ordner abgelegt werden. Am besten dort, wo Sie alle Bilder der Seite ablegen.

 

Fazit

Diese kleinen aber hilfreichen Tipps sind nur wenige von vielen Möglichkeiten, die CSS bietet. Mit diesen Grundlagen können Sie jedoch schon einige Dinge Ihrer Webseite anpassen und verschönern.

Mithilfe des ersten Blogartikels über HTML sollten Sie nun in der Lage sein erste Tests durchzuführen und Ihre Webseite für Ihre Bedürfnisse zu optimieren. Viel Spaß dabei! 🙂

Bildnachweis Vorschaubild:
© Rawpixel.com - fotolia.com

Eine Antwort zu “HTML Grundlagen – Teil 2”

  1. Ricardo sagt:

    Ich hatte mir mal vor Jahren HTML selbst bei gebracht über Youtube Videos und Blogbeiträge wie deiner, ich habe auch Seiten die bis heute nur mit HTML aufgebaut sind, Später wurden es aber immer schwerer mit der Konkurrenz mit zuhalten ganz besonders in Sachen Design. Bin dann auf WordPress umgestiegen und ich muss sagen das hat mir viele voreile gebraucht und das leben um vieles einfacher gemacht. Das heißt aber nicht das HTML mir nichts gebracht hat ganz im gegen teil auch bei WordPress nützt mir meine Code Kenntnisse sehr oft und habe somit viel Vorteil gegenüber andere. .

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.



Weitere Artikel zu Design

Bei der heutigen Landingpage handelt es sich um eine Microsite bei der man... Mehr lesen »

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen... Mehr lesen »

CSS – das Design der Website Im ersten Teil der HTML Blogserie habe ich... Mehr lesen »


Weitere Artikel von Romina
AdWords Online Marketing
Sollte man auf die eigene Brand bieten? Ja oder nein? Ein Thema, das... Mehr lesen »

Online Marketing
Parallel zur SMX findet 2017 nicht nur die AllFacebook Marketing... Mehr lesen »

AdWords Online Marketing
Prinzipiell ist es nicht schwer, eine Adwords Kampagne auf die Beine zu... Mehr lesen »

Top-Beiträge

Facebook

Bilder posten auf Facebook

Nicht jedes Bild passt in das neue Konzept der Facebook Chronik. Aber wie müssen Bilder jetzt... Mehr lesen »
Design

13 coole Header-Effekte für Webseiten

Ich zeige euch 13 coole Header-Effekte für Webseiten, die beim Scrollen animiert werden. Manche... Mehr lesen »
Facebook

Bilder einfügen in Facebook-Kommentaren – Gut oder schlecht?

Bereits im Juni war es bei Facebook-Profilen schon möglich Kommentare mit Bildern zu versehen. Für... Mehr lesen »
^