HTML & CSS für Einsteiger

Wer Webseiten erstellen will, kommt früher oder später mit HTML in Berührung. Daher werden wir in den kommenden Video-Trainings gemeinsam die schöne HTML-Welt erobern. Ihr werdet Schritt für Schritt sehen, was es mit dieser Sprache auf sich hat und wie man mit ihr in Kombination mit Stylesheets Webseiten erstellen kann. Am Anfang steht allerdings eine Frage: Was hat es eigentlich mit HTML und den Stylesheets auf sich? Am Ende dieses Video-Trainings erfahrt ihr dann außerdem, welche Software ihr benötigt, um Webseiten zu erstellen und zu testen.

Im Gegensatz zu Programmiersprachen wie beispielsweise Java kann man in HTML ohne größere Einarbeitung sehr schnell erste Ergebnisse erzielen. Alles, was ihr für den Anfang braucht, sind ein Editor und ein Browser. In diesem Video-Training werdet ihr euer erstes HTML-Dokument anlegen und auch direkt eine Ausgabe im Browser bekommen. Und so ganz nebenbei erfahrt ihr dabei, wie HTML-Dokumente, letztendlich also Webseiten, aufgebaut sind bzw. welcher Grundstruktur sie folgen.

Den Zusammenhang zwischen den Begriffen Element, Tag und Attribut kennt ihr bereits aus dem ersten Teil dieser Reihe. Nun geht es darum, wie sich diese Dinge praktisch in HTML-Dokumenten nutzen lassen. Zum Abschluss dieses Video-Trainings erfahrt ihr dann, wie ihr euren HTML-Code auf syntaktische Korrektheit hin überprüfen könnt.

Eure Webseiten werden sicherlich nicht nur aus Bildern, sondern auch aus Texten bestehen. Und Texte sollten, allein schon der guten Lesbarkeit halber, vernünftig strukturiert werden. Dafür hält HTML zahlreiche Elemente bereit. In diesem Video-Training werden die wichtigsten Strukturierungselemente für Texte vorgestellt. Außerdem erfahrt ihr, wie sich HTML-eigene Zeichen maskieren lassen und wie man Programmlistings ausgeben kann.

Für eine gute Lesbarkeit von Texten ist eine vernünftige Formatierung nötig. Und die geht über reine Strukturierungselemente wie Überschriften und Textabsätze hinaus. So kann man in HTML beispielsweise Zitate kennzeichnen und einzelne Passagen fett oder kursiv darstellen. Das nötige Rüstzeug dazu liefert dieses Video-Training.

Elemente, die euch in HTML immer wieder begegnen werden, sind Listen. Das trifft übrigens nicht nur für To-do-Listen, Kontaktdaten, sondern auch für die Definition von Menüs zu. Listen nehmen also eine ganz zentrale Rolle in HTML ein. Grund genug, einen ausführlichen Blick auf sie zu werfen. In diesem Video-Training lernt ihr all die Listenvarianten kennen, die HTML zu bieten hat. Das sind Aufzählungslisten, nummerierte Liste, Definitionslisten und Menülisten. Außerdem bekommt ihr Hinweise dazu, wie man Listen bei Bedarf optisch anpasst.

Tabellen spielen auf Webseiten nach wie vor eine wichtige Rolle. Das gilt allerdings nur noch hinsichtlich der Präsentation von Daten. Als es noch kein CSS gab bzw. dieses von den Browsern noch nicht wirklich unterstützt wurde, dienten Tabellen übrigens auch noch einem ganz anderen Zweck: Man setzte darüber Layouts um. Innerhalb der Tabellenzellen platzierte man dazu die einzelnen Seitenelemente. Die daraus resultierenden Layouttabellen-Monster gehören dank CSS aber glücklicherweise der Vergangenheit an. Heute werden Tabellen im Webdesign ausschließlich dafür verwendet, wofür sie eigentlich gedacht sind: zum übersichtlichen Darstellen von Daten.

Stimmig wirkende Tabellen müssen nicht zwangsweise aus einer identischen Anzahl von Zellen innerhalb einer Tabellenzeile bestehen. In diesem Video-Training wird gezeigt, wie ihr Tabellenzellen miteinander verbinden könnt. Im zweiten Teil erfahrt ihr etwas über die Beschriftung von Tabellen. Dieser Aspekt ist wichtig, da man so den Besuchern gleich zeigen kann, um welche Daten es sich letztendlich handelt. Abgeschlossen wird das Video-Training mit einem detaillierten Blick auf die Gestaltung von Tabellen in HTML. Denn gerade auf diesem Sektor hat sich sehr viel im Vergleich zu den vorherigen HTML-Versionen getan.

Kaum eine Webseite kommt ohne Grafiken aus. Kein Wunder also, dass das Thema Grafiken auch in dieser Reihe einen wichtigen Platz einnimmt. In diesem und den nächsten Video-Trainings wird gezeigt, wie ihr Grafiken in eure Webseiten einbinden könnt. Am Anfang steht aber ein anderer Aspekt im Vordergrund: Welche Bildformate eignen sich überhaupt für den Online-Einsatz? Im zweiten Teil geht es dann darum, wie sich Bildpfade referenzieren lassen.

Wie sich Bilder grundsätzlich referenzieren lassen, wurde im vorherigen Teil gezeigt. Das Ende der Fahnenstange hinsichtlich der Bilder ist damit aber längst noch nicht erreicht. Tatsächlich kann man Bilder mittels entsprechender Attribute näher beschreiben. Darum geht es zu Beginn dieses Videos. Im zweiten Teil wird beschrieben, wie sich Bildunterschriften mittels HTML5-Syntax umsetzen lassen.

Das Salz in der Suppe des Internets ist die Möglichkeit, Inhalte mittels Hyperlinks miteinander zu verbinden. Gäbe es diese Hyperlinks nicht, wäre das Internet in seiner heutigen Form nicht denkbar. Welche Varianten euch HTML hinsichtlich der Hyperlink-Definitionen bietet, erfahrt ihr in diesem und im nächsten Video-Training.

HTML bietet in Sachen Hyperlinks noch deutlich mehr Möglichkeiten als das, was im vorherigen Video-Training gezeigt wurde. So könnt ihr beispielsweise E-Mail-Verweise definieren und Dateien für den Download anbieten. Diese und andere Hyperlink-Varianten lernt ihr in diesem Video-Training kennen.

Um es vorwegzunehmen: Gerade in HTML5 haben die Formulare einen Quantensprung hingelegt. Dank zahlreicher neuer Feldtypen lassen sich sehr interessante Formulare erstellen. Diese neuen Möglichkeiten werdet ihr natürlich noch kennenlernen. Los geht es in diesem Video-Training aber mit dem notwendigen Rüstzeug, das man zum Definieren von Formularen braucht. Am Anfang geht es um das Anlegen von einzeiligen Eingabefeldern. Ihr werdet sehen, wie sich diese definieren lassen, wie man sie mit Werten vorbelegen und auf nicht-beschreibbar setzen kann. Ebenso werdet ihr die Definition von Passwortfeldern kennenlernen. Das ist schließlich ein Feldtyp, den man immer mal wieder gebrauchen kann.

In diesem Video lernt ihr weitere Feldtypen kennen, mit denen ihr eure Formulare ausstatten könnt. Konkret geht es dabei um Auswahlfelder, Radio-Buttons und Checkboxen. Das alles sind wichtige Elemente, die man in Formularen immer wieder braucht. Grund genug also, auf diese und andere Elemente einen genaueren Blick zu werfen.

Mit HTML5 hat sich auch und gerade hinsichtlich der Formulare eine ganze Menge getan. Grund genug, auf die zahlreichen neuen Formularfunktionen, die sich mittlerweile nutzen lassen, einen ausführlichen Blick zu werfen. Schluss ist nämlich mit schnöden Eingabefeldern. Endlich lassen sich auch Schieberegler, Datumsfelder usw. definieren - und das ganz ohne den Einsatz von JavaScript.

Den Einstieg in die Welt der HTML5-Formulare hat das vorherige Video-Training geebnet. Das Ende der Fahnenstange ist damit allerdings längst noch nicht erreicht. Tatsächlich hat HTML5 auf diesem Gebiet nämlich noch deutlich mehr zu bieten.

In HTML5 gibt es neben den vorgestellten Feldtypen auch noch zahlreiche andere interessante Aspekte. So kann man nun beispielsweise mit sehr wenig Aufwand eine Autovervollständigungsfunktion für Formularfelder nach dem Vorbild von Google realisieren. Diese und andere Dinge werden in diesem Video-Training gezeigt.

Wer sich mit HTML5 befasst, kommt um das Thema Semantik nicht herum. Ihr werdet in diesem und den nächsten Video-Trainings die wichtigsten Elemente kennenlernen, die HTML5 mitbringt, mit denen ihr Dokumente vernünftig strukturieren könnt. Tatsächlich ist diese logische Strukturierung nämlich unabdingbar, wenn man seine Webseiten zukunftssicher gestalten will.

HTML5 bringt zahlreiche neue Strukturierungselemente mit. Welche das grundsätzlich sind, wurde im vorherigen Video-Training bereits gezeigt. Nun geht es darum, diese Elemente praktisch einzusetzen. Denn diese Elemente sind es, die für eine semantische Strukturierung der Dokumente sorgen. Ihr werdet in diesem Video-Training in erster Linie die beiden Elemente article und section kennenlernen. Diese sorgen für die grundlegende Struktur von HTML-Dokumenten. Am Ende dieses Videos wird dann außerdem noch einmal ein Blick auf die Unterschiede geworfen, die zwischen div, article und section bestehen.

In HTML5 können Dokumente nicht nur in Artikel und Sektionen unterteilt werden. Tatsächlich gibt es mit header, footer & Co. noch viele zusätzliche Elemente für eine semantische Strukturierung. Diese sind es in jedem Fall wert, noch einmal genauer unter die Lupe genommen zu werden.

In diesem letzten Video-Training der Semantik-Element-Reihe werdet ihr weitere Strukturierungselemente kennenlernen. Tatsächlich bietet HTML5 nämlich auch Elemente für Navigationsbereiche, Marginalien und für Zusammenfassungen.

In früheren HTML-Versionen war das Einbinden multimedialer Inhalte ein Graus. Mit einer Kombination aus object- und embed-Element wurde versucht, Videos und Sound auf die Webseite zu bringen. Ob sich das eingebundene Video dann tatsächlich abspielen ließ, war fraglich. Auch auf diesem Gebiet hat sich in HTML5 eine ganze Menge getan.

Wie sich Videos einbinden lassen, habt ihr gesehen. Nun sind Videos natürlich nicht alles, was man seinen Besuchern auf der Webseite präsentieren kann. In diesem Video-Training wird daher beschrieben, welche Optionen euch HTML5 hinsichtlich des Einbindens von Audio-Dateien und Flash-Filmen bietet. Denn auch diese Dinge muss man hin und wieder mal auf seiner Seite anzeigen.

Frames gibt es in HTML5 nicht mehr. Ihre Namensvettern, die iFrames, haben es allerdings auch in das neue HTML-Zeitalter geschafft und sind in HTML5 mit an Bord. Während klassische Frames eine Seite in unabhängige Bereiche einteilen, lassen sich über iFrames beliebige Ressourcen in Webseiten einbinden.

HTML ist für die Strukturierung der Inhalte da. Sobald es ans Designen der Seite geht, kommen die Cascading Stylesheets (CSS) ins Spiel. Denn erst die Kombination aus CSS und HTML ermöglicht es, aus einer schnöden HTML-Struktur ansprechende Webseiten zu machen. Grund genug also, einen genaueren Blick auf CSS zu werfen.

Ein Begriff, der euch im Zusammenhang mit CSS immer wieder begegnen wird, ist der der "Selektoren". Über diese Selektoren legt man letztendlich die Elemente fest, die mittels CSS formatiert werden sollen. In diesem Video-Training werdet ihr die ersten Selektoren kennenlernen. Vorgestellt werden euch hier Element-, ID- und Universalselektoren. Mit denen werdet ihr es, wenn ihr eure Webseiten mit CSS gestaltet, tagtäglich zu tun haben.

Einige Selektoren wurden im vorherigen Video-Training vorgestellt. Selbstverständlich hat CSS aber noch zahlreiche andere Selektoren zu bieten.

In diesem letzten Selektoren-Video-Training stelle ich euch eine ganz spezielle Form der Selektoren vor. Bei denen handelt es sich um sogenannte Pseudoklassen und Pseudoelemente. Das sind solche Selektoren, die sich nicht auf bestimmte HTML-Elemente beziehen, sondern vom Ausgabegerät generiert werden.

In diesem und den kommenden Video-Trainings werde ich euch die wichtigsten CSS-Eigenschaften vorstellen. Dabei geht es an dieser Stelle übrigens nicht darum, euch eine CSS-Referenz zu präsentieren. Vielmehr sollt ihr ein Gefühl dafür bekommen, was mit CSS alles möglich ist. Los geht es an dieser Stelle mit der Schriftgestaltung. Vorgestellt werden in diesem Video-Training all die Dinge, die direkt mit den sogenannten Fonts zu tun haben. Beachtet dabei, dass es hinsichtlich der Schriftgestaltung noch weitere Eigenschaften gibt, die dann im nächsten Video-Training gezeigt werden.

Über die in diesem Video-Training vorgestellten CSS-Eigenschaften lassen sich Texte und Zeichen optisch anpassen. So können zum Beispiel die Abstände zwischen den einzelnen Buchstaben verändert und Texte ausgerichtet werden. Auch diese Eigenschaften helfen euch also dabei, Texte ansprechend zu präsentieren.

Natürlich dürfen bei CSS auch die Farbdefinitionen und grafischen Hintergründe nicht fehlen. Die entsprechenden Eigenschaften werden in diesem Video-Training vorgestellt. Denn tatsächlich hat CSS auch gerade auf diesem Gebiet zahlreiche Möglichkeiten zu bieten. So kann man eben nicht nur einfach Farben und Bilder definieren. Auch sich wiederholende Hintergrundgrafiken sind möglich.

Gerade auch, wenn es um das Layouten von Webseiten geht, werdet ihr es mit der Definition von Außenrändern und Abständen zu tun bekommen. In den letzten Video-Trainings dieser Reihe wird übrigens ein umfassendes Beispiel-Projekt umgesetzt, in dem dann auch noch einmal ganz praktisch der Einsatz dieser und anderer CSS-Eigenschaften gezeigt wird.

CSS hält für Textabsätze und -blöcke einige interessante Eigenschaften bereit, die ich euch nicht vorenthalten möchte. So könnt ihr beispielsweise Textabsätze links- und rechtsbündig ausrichten.

Kommt die Sprache auf Rahmen, denken die meisten sicherlich zunächst an Tabellen. Und tatsächlich spielen Rahmen in Verbindung mit Tabellen eine wichtige Rolle. Allerdings lassen sich durch CSS eben auch noch andere Elemente mit Rahmen ausstatten. Und wie diese Rahmen dann letztendlich aussehen, kann man ebenfalls per CSS-Definitionen explizit bestimmen.

Wie sich Listen definieren lassen, wisst ihr wahrscheinlich längst. Das wurde schließlich im Rahmen dieser Reihe ausführlich gezeigt. Chic sind Listen von Hause aus allerdings nicht unbedingt. Damit sie auch optisch ansprechend daherkommen, gibt es entsprechende CSS-Eigenschaften. Welche das sind und wie man diese einsetzt, erfahrt ihr in diesem Video-Training. Im zweiten Teil geht es dann um die sogenannten Counter, mit denen sich auch komplexere Nummerierungen umsetzen lassen.

Wenn es um das Layouten von Webseiten geht, wird das sogenannte Boxmodell euer ständiger Begleiter sein. Denn hierüber legt man im Endeffekt fest, wie und wo Elemente platziert werden.

Um Elemente innerhalb der Webseite an den gewünschten Stellen positionieren zu können, müsst ihr auf ganz bestimmte CSS-Eigenschaften zurückgreifen.

Im vorherigen Video-Training wurde das sogenannte Floating-Prinzip bereits kurz angerissen. Das Thema ist allerdings so komplex, dass hier noch einmal ein detaillierter Blick auf jenes Floaten geworfen wird. Denn tatsächlich handelt es sich dabei um ein entscheidendes Konzept in CSS. Denn nur, wenn man diese Thematik versteht, kann man tatsächlich Webseiten erstellen.

In den bisherigen Video-Trainings wurden die Grundlagen zur Arbeit mit HTML und CSS dargelegt. Jetzt sollen natürlich auch erste Früchte geerntet werden. In den nächsten Video-Trainings wird daher eine Beispiel-Webseite Schritt für Schritt aufgebaut. In diesem Video-Training lernt ihr jedoch zunächst die verschiedenen Layoutvarianten kennen. Denn die Wahl der passenden Layoutform sollte immer am Anfang eurer Überlegungen für die Gestaltung einer Webseite stehen.

Ich gehe bei unserem Praxisprojekt von einem typischen Spaltenlayout aus. Bevor ich dieses Projekt jedoch live und in Farbe präsentiere, möchte ich euch ganz konkret zeigen, wie ihr selbst Spaltenlayouts umsetzen könnt. Im Fokus werden hier zwei- und dreispaltige Layouts stehen, schließlich bilden diese nach wie vor die Basis für den Großteil der Webseiten.

In den folgenden Video-Trainings werde ich euch zeigen, wie sich ein Webseiten-Layout Schritt für Schritt umsetzen lässt. Dafür gibt es ganz unterschiedliche Herangehensweisen. Oft werden die Layouts in Photoshop erstellt. Die einzelnen Seitenelemente schneidet man anschließend aus und fügt sie mittels CSS und HTML wieder als eine Webseite zusammen. Genauso wird das auch hier gehandhabt. Allerdings setze ich anstelle von Photoshop das kostenlos verfügbare GIMP ein. Die beschriebenen Schritte lassen sich so aber auch in Photoshop nachvollziehen.

Die ersten Schritte hin zum eigenen Layout wurden im vorherigen Video-Training getan. Selbstverständlich fehlen noch zahlreiche Elemente. Diese werden in diesem Video-Training hinzugefügt. Sobald das Layout dann steht, geht es mit dem Ausschneiden, dem sogenannten Slicen weiter. Denn das ist letztendlich der Arbeitsschritt, durch den es möglich wird, das erstellte Design per HTML und CSS praktisch umzusetzen.

Das Layout habt ihr erstellt. Jetzt geht es an dessen praktische Umsetzung. In diesem Video-Training werden wir gemeinsam das HTML-Grundgerüst der Webseite anlegen.

Das Grundgerüst der Seite steht, kommt allerdings noch recht spartanisch daher. In diesem Video-Training wird der Inhalt der Seite weiter ausgebaut. Im Fokus steht dabei zunächst einmal das Menü, das im oberen Seitenbereich liegt. Daran schließen sich das rechte und das untere Menü an.

Ein entscheidender Aspekt für eine optisch ansprechende Webseite ist natürlich deren Schriftbild. Im Verlauf dieser Reihe habt ihr bereits die Möglichkeiten kennengelernt, die euch HTML und CSS hinsichtlich der Schriftgestaltung zu bieten haben. In diesem Video-Training werden diese verwendet, um die Seite aufzupeppen. Dabei werden wir uns übrigens nicht nur den klassischen Varianten widmen. Das Zauberwort für den Einsatz "exotischer" Schriftarten heißt dabei @font-face.

Normalerweise sollte man seinen Besuchern die Möglichkeit zur Kontaktaufnahme bieten. Im einfachsten Fall notiert man dazu eine Telefonnummer und/oder seine E-Mail-Adresse. Das kann man so machen, ist für die Besucher aber nicht sonderlich komfortabel. Daher werden wir in diesem Video-Training ein Formular erstellen, über das die Besucher denkbar einfach in Kontakt mit uns treten können. Und selbstverständlich werden dabei die Möglichkeiten genutzt, die uns HTML5 und CSS3 bieten.

Das Grundgerüst und die ganz grundlegende Gestaltung des Formulars sind definiert und abgeschlossen. Und tatsächlich kommt das Formular bereits jetzt recht ansprechend daher. Dank CSS3 ist aber noch deutlich mehr drin, wenn es um das optische Aufpeppen des Formulars geht. In diesem Video-Training wird das Formular daher noch ein wenig gestaltet.

Bereits zum jetzigen Zeitpunkt habt ihr sicherlich viel Zeit und Arbeit in die Entwicklung eurer Webseite gesteckt. Angefangen bei der Konzeption über die Gestaltung des Layouts bis hin zu dessen Umsetzung in HTML und CSS. Grund genug also, der Welt eure Webseite nun endlich zu präsentieren. Genau darum geht es in diesem Video-Training. Ich werde euch zeigen, wie ihr die Webseite online stellen könnt. Zunächst erfahrt ihr, wie man den richtigen Provider und das passende Webspace-Paket bekommt. Anschließend werden die Daten dann mit dem zu Recht beliebten FileZilla auf den Server geladen. Und dann, tja dann ist die Webseite tatsächlich online.

In diesem Video-Training möchte ich euch einen kleinen Einblick in die richtige Entwicklungsumgebung zum Erstellen von Webseiten geben. Wer bereits komplette Webseiten oder kleinere Einzelseiten geschrieben hat, verfügt in der Regel bereits über diese Editoren und kann dieses Video überspringen.

Gezeigt werden:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

Das HTML5-Boilerplate ist eine mächtige Vorlage für HTML5- und CSS3-Webseiten; es macht HTML5 so gut wie möglich CrossBrowser-kompatibel und enthält einige sehr gute Code-Vorlagen im Bereich JavaScript, CSS3 und natürlich auch HTML.

In diesem Video-Training möchte ich euch ebendiese Funktionen vorstellen. Für einen Start im Bereich HTML5 und CSS3 gibt es aktuell keine bessere Vorlage.

In diesem Video-Training möchte ich euch einige sehr hilfreiche Tools vorstellen, mit denen man HTML5 und CSS3 entwickeln kann.

Dazu gehören:
html5css3box.com
kuler.adobe.com (jetzt https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com