Webdesign für Anfänger – Teil II
Der Kurs „HTML lernen – Einsteiger“ ist die Fortsetzung des Anfänger-Kurses HTML und CSS. Parallel zum Thema Webdesign betrachten wir von Anfang an auch die Suchmaschinenoptimierung.
HTML lernen – Einsteiger
Zuerst ein wichtiger Merksatz:
Wir bauen eine Webseite nicht für uns selbst, sondern für unsere Website-Besucher.
Gleichzeitig beobachten wir von Anfang an die sogenannte Suchmaschinenoptimierung, oft auch als SEO (Search Engie Optimization) bezeichnet. Als Einsteiger sollte man von Anfang an wissen, dass eine Webseite nur dann in den oberen Rängen von Google gelistet wird, wenn bestimmte Voraussetzungen erfüllt werden.
Selektoren
Ein einfacher Selektor ist entweder ein Typselektor, der Universalselektor, ein Attributselektor, ein Klassenselektor, ein ID-Selektor, ein Namensraumselektor oder eine Pseudoklasse. Ein Pseudoelement kann an den letzten einfachen Selektor in einer Kette angehängt werden.
Selektoren stellen die Verbindung zwischen den zentralen Formaten im <head>-Bereich oder der externen Datei und den Elementen innerhalb der Seite dar, die formatiert werden sollen.
Der Aufbau ist immer gleich: Selektor, geschweifte Klammer auf, Stylesheet-Angaben, geschweifte Klammer zu:
Selektor { Stylesheet-Angabe; }
Kombinatoren
Kombinatoren sind Zeichen, die zwei Selektoren miteinander verketten.
Kombinatoren sind Leerraum, das Größer-als-Zeichen (>), das Plus (+) und die Tilde (~). Leerraum darf nur aus Spatium (Leerzeichen, space), Tabulator (tab), Zeilenvorschub (line feed) und Wagenrücklauf (carriage return) bestehen.
p.hinweis { margin: 0; }
Sh. auch: http://jendryschik.de/wsdev/einfuehrung/css/selektoren
URIs
URL und URN sind Teilmengen einer URI
u.a. Downloads von Dateien – alles was der Browser nicht rendern kann.
Beispiele:
- best-superblog.de – URI
- https://best-superblog.de – URL (zeigt auf die Ressource)
- urn:isbn:3827370191 – URN (eindeutige Indentifikation des Buches „Moderne Betriebssysteme“ von Andrew S. Tanenbaum)
Begriffe
Meta – versteckte HTML-Elemente, die Metadaten über das Dokument enthalten.
Keywords – Schlüsselwörter: Elemente einer Auszeichnungssprache.
Siehe auch wikibooks
Das Box-Modell
Jedes HTML-Element ist eine Box
Inline-Elemente: div, strong, em, …
Block-Elemente: p (Absätze),
vgl. display: block
Box-Aufbau:
Content – Padding – Rahmen – Margin