HTML Grundlagen

Vorwort

Herzlich willkommen zum Lehrgang Webdesign mit HTML5 und CSS3. Wenn du schon immer einmal eine Webseite kreieren wolltest und nie recht gewusst hast, wie du starten sollst, dann soll dieses Skript (Lernheft) dir dabei helfen, Fuss zu fassen.

Um bei diesem Kurs möglichst viel zu profitieren, ist es notwendig, alle Beispiele mit Code selbst nachzuschreiben, mit deinen eigenen Änderungen zu versehen und anschliessend in einem Ordner zu speichern. So erhälst du Praxis und Anwendung verschiedenster Techniken, wie die Seitenstrukturierung mit sogenannten TAG's (ausgesprochen: "tägs") sowie das Styling mit CSS Code- Elementen.

Ich möchte dieses Skript so kurz wie möglich halten und die Anwendung in den Vordergrund stellen. Natürlich ist es auch erlaubt, sich mit Büchern oder mit Inhalten aus dem Internet noch weiter zu informieren. Wenn die Englischkenntnisse es erlauben schlage ich dafür folgende Webseite vor: w3schools.com

Warum HTML und CSS lernen

Warum überhaupt HTML lernen, wenn es doch bereits Software gibt, die „fertige“ Websites erzeugt? Die Antwort ist einfach: Ohne HTML- und CSS-Kenntnisse hat man wenig Chancen auf das Verständnis der Zusammenhänge. Hinter dem Lernen von HTML und CSS verbirgt sich hier mehr als das Lernen von ein paar HTML- und CSS-Befehlen. Es geht um die Zusammenhänge und erst dadurch kann man ein erfolgreiches Projekt im Web starten. Egal, ob es sich um eine Internetseite für einen Verein, einen privaten Auftritt oder eine Firmenwebsite handelt – HTML und CSS sind die Grundlagen, auf denen jede Webseite und viele Apps für Handys aufgebaut werden.

Im Kapitel über Cascading Stylesheets wird gezeigt, wie man Design für Webseiten umsetzt. Wir gehen nach der aktuellen Philosophie der Trennung von Inhalt und Design vor.

Programme zum Editieren von HTML

Welche Programme werden benötigt, um HTML-Seiten zu erstellen? Das ist die erste Frage, die man sich stellt, wenn man eine Webseite machen möchte bzw. HTML lernen will. Wir brauchen für den Anfang nur sehr wenig, und niemand muss dafür Geld ausgeben! Benötigt werden:

  • ein Texteditor (hier werden wir das Programm Notepad++ verwenden, welches OpenSource ist. Das bedeutet, dass der Quellcode für alle zugänglich ist und gratis zum Download bereit steht unter: https://notepad-plus-plus.org/ unter Downloads)
  • ein Webbrowser (Bitte installiere die Browser: Mozilla Firefox und Google Chrome.) Der Internet Explorer ist bei der Windowsinstallation bereits installiert.