Anleitungen Einsteiger Web Development

HTML und CSS lernen – Eine unkonventionelle Anleitung – Wie erstelle ich eine Webseite (Teil 3)

HTML und CSS lernen ist kein Hexenwerk und kann auch ohne Programmier-Kenntnisse schnell erlernt werden. Die vorherigen Beiträge zum Thema „Wie erstelle ich eine Webseite“ befassten sich weniger mit der technischen Umsetzung. Nun ist es endlich soweit sich näher mit der technischen Umsetzung auseinander zu setzen. Diese Anleitung soll ihnen auf praktische Weise zeigen wie HTML und CSS funktioniert. Hierbei zählt die Devise „Learning By Doing“. Um die Anleitung durchzuführen, benötigen Sie keinen Server oder einen anderen Hosting Anbieter. Das einzige was Sie brauchen ist ein Browser (bevorzugt Chrome oder Firefox) und ein HTML-Dokument.

Der Fahrplan um schnell und einfach HTML und CSS lernen zu können ist wie folgt:

  1. Was ist HTML und CSS
  2. HTML und CSS lernen und üben – Der einfache und schnelle Weg
  3. Der Aufbau von HTML
  4. CSS-Anweisungen – Der Aufbau

Was ist HTML und CSS

Häufig wird davon gesprochen, dass Programmier-Kenntnisse benötigt werden um HTML und CSS zu lernen. Das ist absoluter Quatsch. Warum? Weil HTML und CSS keine Programmiersprachen sind, sondern Auszeichnungssprachen.

HTML ist so einfach wie die Erstellung eines gut gegliederten Textes

Was hat HTML mit einem gut gegliederten Text zu tun? Nun, HTML ist für nichts anderes da als Inhalte sinngerecht zu strukturieren. Der einzige Unterschied zwischen der Erstellung von Inhalten mit einer Desktop-Software und HTML ist: Sie müssen die Bedeutung jedes einzelnen Elements kennen. Natürlich müssen Sie auch wissen welche Elemente es gibt, wobei das eine andere Lernaufgabe ist. Zweitens muss bekannt sein wie der Inhalt in die HTML-Elemente platziert werden.

Die einzige Aufgabe von CSS ist es HTML-Elemente äußerlich zu verändern, also die Darstellung anzupassen. Somit ist es nur notwendig die Syntax einer CSS-Anweisung zu kennen und welche Möglichkeiten bereitstehen. Aufgrund der Vielzahl an Anweisungen werden sie hier nicht besprochen. Am Ende des Beitrags sind jedoch Referenzen hinterlegt, in denen alle Möglichkeiten beschrieben sind.

Die Anleitung geht auch nicht auf alle Elemente ein, da es zuerst notwendig ist die grundsätzlichen Funktionen von HTML und CSS zu kennen und wie das Gelernte mit einem sofortigen visuellen Effekt geübt werden kann. Daher soll zuerst geklärt werden wie man schnell und einfach HTML und CSS lernen und üben kann. Die nachfolgende beschriebene Technik liefert Ihnen somit sofortige visuelle Ergebnisse zum Geübten.

HTML und CSS lernen und üben – Die Vorbereitungen

Bevor man sich mit dem Thema CSS auseinander setzt, sollte unbedingt zuerst HTML verstanden werden. Deshalb wird als erstes HTML genauer unter die Lupe genommen. Erst danach wird CSS genauer betrachtet. Wie besprochen liegt der Schwerpunkt auf den Grundlagen. Denn erst nachdem die grundsätzliche Funktionsweise verstanden worden ist, macht es Sinn auf die Einzelheiten und Feinheiten einzugehen.

Wie bereits erwähnt wird HTML genutzt um Inhalte zu strukturieren und sie semantisch auszuzeichnen (s.a. Semantik). Der folgende Code zeigt den Grundaufbau eines HTML-Dokuments und wird in der Anleitung für die vorgestellte Technik verwendet:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<!-- Meta-Daten und andere Ressourcen, wie Stylesheet und JavaScript Dateien -->
</head>
<body>
<!-- content -->
<header>
<!-- Logo, Navigation oder andere im Head-Bereich -->
</header>
<div class="main-content">
<h1>Die Hauptüberschrift des Dokumentes</h2>
<p>Eine Einleitung</p>
</div><!-- div.main-content -->
<footer>
<!--  Navigation des Footers, CopyrightIinformationen, etc. -->
</footer>
</body>
</html>

Fügen Sie den Code in ein Textdatei über einen Editor ein und speichern Sie das Dokument als [ihr_name_der_datei].html ab. Für mehr Komfort für die Erstellung von HTML und CSS, würde ich Ihnen einen Editor empfehlen, der Sie dabei unterstützt. Für den Anfang würde ich Notepad++ empfehlen. Der Editor bietet Vorschläge zu HTML, Stylesheets und anderen Sprachen, wodurch Zeit gespart werden kann.
Danach öffnen Sie die Datei in einem Browser (Firefox oder Chrome; Doppelklick oder Öffnen mit…). Sie sehen nun eine Seite mit dem Text „Die Hauptüberschrift des Dokumentes“ und „Eine Einleitung“. Es ist also das Dokument, dass Sie gerade abgespeichert wurde.

HTML und CSS lernen und üben – Der einfache und schnelle Weg

Nun, bevor die einzelnen Elemente eines HTML-Dokuments beschrieben werden, möchte ich eine Möglichkeit zeigen, wie Änderungen direkt im Browser durchgeführt werden können, ohne Änderungen am Dokument vorzunehmen. Diese Technik kann sowohl für HTML-Elemente, als auch für CSS angewendet werden. Persönlich bevorzuge ich Chrome für diese Technik und für diese Anleitung wird der Browser auch verwendet. Sie können selbstverständlich auch Firefox oder Oprera nutzen.

Ich nehme zwar stark an, dass Sie endlich wissen wollen, wie HTML und CSS funktioniert, jedoch ist die hier vorgestellte Methode wirklich wichtig. Schließlich sollen Sie wissen, wie man schneller vorankommen. Mit der vorgestellten Technik können sie auch andere Webseite im Browser manipulieren. Bspw. könnten sie versteckte Elemente sichtbar machen, die im Normalfall versteckt wären. Selbstverständlich sind alle Änderungen nur im lokalen Browser vorhanden, d.h. ein Neuladen würde die Änderungen zunichte machen. Jedoch hilft die Technik besonders beim Debuggen. Daher wird die Technik vor der Beschreibung von HTML und CSS vorgezogen. Sie können selbstverständlich andere Techniken nutzen um HTML und CSS zu lernen. Meiner Meinung nach ist die Methode „Learning By Doing“ wesentlich effektiver, egal ob sie HTML und CSS lernen, oder eine andere Auszeichnungs- und Programmiersprachen.

Nachdem das Dokument im Browser geöffnet wurde, machen Sie einen Rechts-Klick mit der Maus und wählen den Punkt Element untersuchen, manchmal auch als Untersuchen bezeichnet.

1.) HTML und CSS lernen - Element untersuchen in Chrome einer HTML-Seite
1.) HTML und CSS lernen – Element untersuchen in Chrome einer HTML-Seite

Durch die Auswahl von „Element untersuchen“ öffnet sich der untere Bereich. Hier sind verschiedenen Bereiche klassifiziert. Bild 1 zeigen die wichtigen Elemente um auf HTML-Elemente und CSS-Regeln zuzugreifen. Nun können drei Dinge mit den HTML-Elementen durchgeführt werden. Es ist möglich neue Elemente in das Dokument einzufügen (1), Elemente können verschoben werden (2) und Elemente können optisch angepasst werden (3).

HTML einfügen, verschieben und löschen

Es soll nun zuerst neuer Text in das Dokument eingefügt werden. Hierzu wird ein Lorem Ipsum Generator verwendet, der automatisch Text erzeugt.

2.) HTML und CSS lernen - neue HTML-Elemente einfügen
2.) HTML und CSS lernen – neue HTML-Elemente einfügen

Über einen Rechts-Klick mit der Maus kann der Punkt „Edit as HTML“ oder „HTML bearbeiten“ gewählt werden, wodurch das Element und seine Kind-Elemente als reiner Text bearbeitbar macht. Keine Sorge, dass Thema Kind-Elemente wird später noch genauer beschrieben. kann jedes Element bearbeitet, bzw. neuer Text hinzugefügt oder gelöscht werden. Folgender Code wurde nach dem Element <p>Eine Einleitung</p> hinzugefügt:

<h2>Ein unglaublich toller Titel</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Es lässt sich klar erkennen, dass es relativ einfach ist Änderungen an der HTML-Struktur im Browser durchzuführen. Selbstverständlich wäre es auch möglich die Änderungen im Dokument durchzuführen. Dazu müsste jedoch bei jeder Änderung die Seite neu geladen werden. Soll das gesamte Dokument nach vielen Änderungen im Browser ersetzt werden, kann das erste Element (<html>) als bearbeitet markiert werden. Danach einfach alles markieren, kopieren und den Inhalt im Dokument ersetzen (<!DOCTYPE html> nicht überschreiben).

Das Löschen und Verschieben ist ebenfalls eine leichte Prozedur. Um HTML-Elemente zu verschieben muss das Element mit der Maus angewählt werden, linke Maustaste gedrückt halten und an die gewünschte Stelle geschoben werden. Elemente können durch das Drücken der Löschen-Taste auf der Tastatur (Entf) entfernt werden.

CSS anpassen

Änderungen von sog. Stylesheet-Regeln auf ein Element sind ebenfalls relativ einfach einzustellen. Die definierten Styles eines HTML-Elements sind auf der rechten Seite des unteren Layers zu finden (s. Bild 1). Änderungen können nun unterschiedlich angegangen werden:

  1. Erstellung einer neuen Anweisung
  2. Bearbeitung einer bisher bestehenden Anweisung
3.) HTML und CSS lernen - Styles anpassen
3.) HTML und CSS lernen – Styles anpassen

Bild 3 zeigt die Möglichkeiten um Stylesheet-Regeln für alle Elemente anzupassen. Auch hier sind die Änderungen nur im Browser vorhanden. Gewünschte Änderungen müssen dem HTML-Dokument hinzugefügt werden. Hierzu gibt es zwei Möglichkeiten, entweder werden die Anweisung in das Dokument selbst eingetragen (zwischen <style>..Anweisungen</style>), oder es wird in eine separate Datei eingefügt (Dateiende .css).

Die hier vorgestellte Technik hilft besonders gut um HTML und CSS zu erlernen, bzw. zu üben, sie hilft aber auch besonders gut Änderungen schnell und einfach zu überprüfen und somit CSS-Regeln zu überprüfen. Aber auch die Fehlerbeseitigung von Anweisungen werden damit schneller gefunden. Ich empfehle Ihnen wirklich diese gute Möglichkeit zu nutzen.
Nun gilt es HTML etwas näher kennen zu lernen.

Der Aufbau von HTML

Betrachtet man den Aufbau von HTML erkennt man schnell die generelle Struktur. HTML-Elemente sind ineinander verschachtelt. Das heißt, dass HTML-Elemente in einem anderen HTML-Element integriert werden können. Somit kann jedes HTML-Element ein Vater-Element haben, aber sie können auch gleichwertige HTML-Elemente (sog. Siblings – alle Elemente sind in der gleichen Ebene) und Kind-Elemente haben. Die Elemente <header> und <footer> in unserem Dokument sind sog. Siblings zueinander. Alle Elemente, die von diesen Elementen umschlossen werden, sind ihre Kind-Elemente.

Ebenfalls sollte aufgefallen sein, dass ein Element mittels <[name_des_elements]> geschlossen werden. Somit wird ein-Element (steht für Paragraph) Obergeschossen. Das Beenden, bzw. schließen von Elementen ist enorm wichtig, damit der Browser, Suchmaschinen, etc. wissen, dass dieses Element und seine Informationen beendet sind. Es gibt hierbei noch Ausnahmen: Elemente, die keine anderen Elemente beinhalten können, bzw. dürfen. Hierzu gehört das Bild-Element (<img src=“…“ />), welches am Ende des Tags über /> geschlossen wird.

Attribute von HTML-Elemente

Zudem können HTML-Elemente noch Attribute beinhalten, wobei manche Attribute notwendig sind und andere nicht. Folgendes Beispiel soll den Fall näher erläutern:
Es soll ein bestimmtes Bild dargestellt werden. Der Name des Tags lautet <img />. Ein Bild kann keine weiteren Inhalte einschließen, daher wird ein Bild mit dem Code <img src=“ein-tolles-bild.png“ alt=“Mein Bild-Titel“ /> ausgeschrieben. Sollte das Attribut alt nun fehlt, wird das Bild trotzdem angezeigt. Würde jedoch das Attribut src fehlen, würde der Browser nicht wissen, welches Bild geladen werden sollte. Somit ist das Attribut src wirklich wichtig für ein Bild-Element und darf nicht fehlen.

HTML-Elemente markieren

Das markieren von HTML-Elementen ist eine wichtige Eigenschaft für Webseiten. Über das Markieren von Elementen kann ein HTML-Element oder, je nach Markierungs-Typ, mehrere Elemente eindeutig identifiziert werden. Wozu das benötigt wird? Besonders für die Vergabe von Style-Regeln für bestimmte HTML-Elemente ist das notwendig. Aber auch für JavaScript kann es sehr hilfreich sein Element zu markieren um mit ihnen etwas durchzuführen.

Eine Variante der Markierung haben Sie bereits kennengelernt, die Vergabe von Klassen, s. <div class=“main-content“>. Alle Elemente können das Attribut class beinhalten und mehrere Klassen besitzen. Getrennt werden die Klassen durch Leerzeichen. Das Attribut class=“main-content left-side“ hätte die Klassennamen main-content und left-side. Alle Elemente können die gleiche Klassenbezeichner besitzen. Das ist ein großer Unterschied zu der Möglichkeit und Vergabe von IDs. Die Vergabe von einer ID bedeutet, dass in einem Dokument die vergebene ID nur einmal vorkommt, bzw. nur einmal vorkommen darf. Es ist eine Markierung für eindeutig ein Element im Dokument.

Mögliche Probleme bei falscher Verwendung von Markierungen

Merken sie sich diesen Fall unbedingt, denn andernfalls kann es dazu führen, dass CSS-Anweisungen nicht reagieren oder das JavaScript bestimmte Elemente nicht anspricht (sollten Sie später einmal JavaScript nutzen). Möglicherweise wäre es sinnvoller das Element in <div id=“main-content“ class=“left-side“> umzubennen. Schließlich wird es nur einen Haupt-Inhalt besitzen. Es liegt jedoch immer im Ermessen des „Autors oder Autoren“ der Dokumente, wie Elemente markiert werden. Dem Browser ist es vollkommen egal, welche Klassen und IDs vergeben werden.

Die Markierung von Elementen ist eine wirklich wichtige Angelegenheit und sollte gut genutzt werden. Denken Sie auch noch daran, wenn Sie immer mehr über HTML und CSS lernen. Mittels Klassen lassen sich CSS-Anweisungen schließlich wesentlich einfacher und mit weniger Rechenintensiv nutzen als manch komplizierte Anweisungen über Kombinationen von Selektoren. Mehr Informationen über Selektoren und CSS-Anweisungen finden Sie im nächsten Abschnitt.

CSS-Anweisungen – Der Aufbau

Sie haben gelernt, dass HTML nicht so schwierig zu verstehen ist. Da eine Webseite auch nach etwas aussehen soll, wollen Sie natürlich wissen, wie die Vergabe von Style-Regeln funktioniert. Über sog. CSS-Anweisungen kann das Aussehen von Elementen beeinflusst werden. Wichtig für Anfänger ist es zu wissen, wie der generelle Aufbau von CSS-Anweisungen aussieht, auf welche Elemente es Auswirkungen hat und was geschieht, wenn gleiche Anweisungen auf ein Element auf unterschiedliche Weise festgelegt werden. Das soll bedeuten, dass z.B. die Vergabe einer Schriftgröße mehrfach auf ein Element definiert werden kann, aber mit unterschiedlichen Angaben. Welche Anweisung hat dann Gültigkeit? Diese Fragen werden hier beantwortet.

Für die Klärung der Fragen sollen drei Anweisungen verwendet werden:

  1. div, div p.left-side {font-size: 120%; color:blue;}
  2. .left-side {font-size:130%; color:green; float:left; width: 200px; border:solid thin black;}
  3. #main-content {font-size:150%; color:red;}

Alle drei Anweisungen würden für das Element <div id=“main-content“ class=“left-side“> gelten. Der generelle Aufbau einer Anweisung beginnt mit der Definition der Elemente, welche von der Anweisung betroffen werden sollen, sog. Selektoren. Mittels der ersten Anweisung werden alle <div>-Elemente angesprochen. Anweisung zwei hat auf alle Elemente eine Auswirkung, welche die Klasse left-side besitzen. Die dritte Anweisung verändert das optische Aussehen eines Elements, wenn es die ID main-content besitzt. Fügen Sie einmal die Anweisungen im Browser hinzu. Gleichzeitig können Sie einmal versuchen weitere HTML-Elemente einzufügen, auch andere Elemente mit der Klasse left-side um das Verhalten zu beobachten.

Die Anweisung auf die gewählten Elemente werden mittels geschweiften Klammern umschlossen. Nach der Benennung einer Anweisung folgt ein Doppelpunkt, gefolgt von dem zu übergebenen Wert. Abgeschlossen wird eine Anweisung mit einem Semikolon. Die gleiche Anweisung kann auf mehrere Elemente angewandt werden. Hierbei werden die Selektoren über ein Komma getrennt.

Welche CSS-Anweisung gilt jetzt?!?

Wenn Sie die Anweisungen im Browser ausprobiert haben, dann werden Sie gemerkt haben, dass Anweisungen verschiedene Prioritäten haben. Die Anweisung auf einfache Elemente hat eine geringere Auswirkung als eine Anweisung über eine ID-Selektoren. Eine noch höhere Priorität haben Definitionen über Klassen. Wenn noch weitere Elemente als Selektor genutzt werden (s. Punkt 1: div p.left-side), verschieben sich die Prioritäten nochmals. Je mehr Elemente ein Selektor besitzt, desto höher ist seine Priorität. Sie sollten einmal die verschiedenen Möglichkeiten überprüfen und einmal ausprobieren, wie sich die Prioritäten verschieben. Wenn exakt gleiche Selektoren mit gleichen Anweisungen, aber unterschiedlichen Werten genutzt werden, dann wird das letzte Element genutzt. Es überschreibt die vorherigen Regeln. Vergessen Sie diesen Fall nicht, das zu wissen ist sehr wichtig. Jedoch hilft die oben beschriebene Technik sehr um herauszufinden, ob eine Regel die andere überschreibt oder ob sie einen höheren Stellenwert hat.

HTML und CSS lernen – Die nächsten Schritte

Sie haben nun die verstanden wie HTML und CSS funktioniert. Um nun wirklich weiterzukommen sollten sie mehr über HTML und CSS lernen. D.h. es ist notwendig zu wissen, welche HTML-Elemente es alle gibt und wann es Sinn ergibt sie einzusetzen. Das gleiche gilt für CSS. Es gibt eine Vielzahl an CSS-Befehlen. Ich empfehle dieses HTML-Tutorial und CSS-Tutorial. In der linken Sidebar sind die jeweiligen Themen katalogisiert. Nutzen Sie die oben genannte Technik um das gelernte schnell zu üben. Denn beim HTML und CSS lernen gilt es wie mit anderen Dingen: „Übung macht den Meister“.