HTML & CSS Tutorial

Mit dieser Anleitung lernen Sie die Grundlagen von HTML & CSS, damit Sie eigene Webprojekte realisieren können. Wir beginnen sofort mit einem Projekt, anstatt zuerst langweilige Theorie abzuhandeln.

Die Theorie wird erklärt, sobald sie für das Projekt benötigt wird. Sie werden damit sehr schnell eine solide Grundlage für die Webentwicklung erhalten. Ich werde Sie auf verschiedene Unterlagen hinweisen, so dass Sie später beliebige Bereiche vertiefen können.

Das Projekt, welches wir Schritt-für-Schritt erarbeiten, ist Ihr persönliches Web Portfolio. Dieses Portfolio beinhaltet eine Startseite, einen Blog, eine Seite für Ihre zukünftigen Webprojekte und eine Kontaktseite.

Die Grundidee dieses Tutorials ist, dass Sie einen Einstieg in die Webprogrammierung erhalten und dabei lernen, wie Sie sich selbständig die Informationen beschaffen können, die Sie brauchen. Dann werden Sie in der Lage sein, immer komplexere Webprojekte zu realisieren!

HTML (Hypertext Markup Language) ist für die Struktur der Webseite verantwortlich. In HTML werden zum Beispiel Überschriften, Abschnitte, Texte und Bilder definiert.

CSS (Cascading Style Sheets) ist für die Formatierung und für das Layout der Webseite verantwortlich. In CSS werden zum Beispiel Farben, Schriften, Abstände und sogar Animationen definiert.

Die beiden Sprachen, HTML und CSS, sind unabhängig voneinander und sollten auch in unterschiedlichen Dateien gespeichert werden.

Mit HTML und CSS lassen sich sehr komplexe Webseiten entwickeln. Diese Webseiten werden jedoch statisch sein, was bedeutet, dass Besucher die Seiten zwar anschauen können aber sie können nicht damit interagieren können (ausser durch das Klicken auf Links).

Um dynamische Webseiten zu programmieren, welche interaktiv sind, braucht man eine weitere Programmiersprache, wie zum Beispiel JavaScript oder Dart. Damit lassen sich ganze Webapplikationen entwickeln, wo ein Besucher zum Beispiel Berechnungen durchführen, ein Spiel spielen oder Chatfunktionen benutzen kann.

Das HTML & CSS Tutorial ist so aufgebaut, dass Sie direkt danach mit dem Lernen von Dart (oder JavaScript) beginnen können. Wenn Sie also möchten, können Sie bald eigene Webapplikationen entwickeln.

Viele oder manchmal sogar die Mehrheit der Zugriffe auf Webseiten erfolgen heute über mobile Geräte wie Smartphones oder Tablets. Deshalb ist es zentral, dass unsere Webseite auf den kleinen Bildschirmen von mobilen Geräten gut angezeigt wird. Wir werden uns in diesem Tutorial darum kümmern.

Auch wenn wir später interaktive Webapplikationen entwickeln, werden wir dafür sorgen, dass diese auf mobilen Geräten laufen!

→ Beginnen Sie Ihre Reise mit Teil 1: Unsere erste Webseite.

Viel Spass!

Quellen
Planet Cute Bild stammt von Daniel Cook (Lostgarden.com), veröffentlicht unter CC BY 3.0.

Diese Seite ist abgeleitet von code.makery von Marco Jakob, verwendet unter CC BY.
Sie ist lizenziert unter CC BY-NC-SA von Daniel Fahrni daniel.fahrni@bzz.ch.