HTML & CSS für Einsteiger

Die unendlichen Weiten des Internets – endlich auf einen Klick. Wir bringen dir bei, wie du im Netz den doppelten Bogen rauskriegst. Starte zu einem 9-stündigen Entdeckungskurs mit besonders zielführendem Basis-Know-how und reife zum sicheren Webentwickler im digitalen Überall. Der Einstieg in die Welt von HTML & CSS kann so einfach sein und dieses Training rüstet dich mit dem nötigen Handwerkszeug:

Alle wesentlichen Grundlagen zu HTML & CSS erklärt
Lerne Webentwicklung von der Pike auf und baue deine Kenntnisse zielsicher aus
Optimaler Praxisbezug: Die Umsetzung eines Layouts für einen Steuerberater

Wenn die digitale World weit weg ist: Erforsche sie! Wenn du zum Ende dieses Trainings deine erste eigene Website codest, wirst du ordentlich stolz auf dich sein!

Details

Verwendbar mit:
Inhalt: 10 h Video-Training (Kompatibilitätshinweise)
Lizenz: private und kommerzielle Nutzungsrechte
Bonus: inklusive Arbeitsmaterial

Kategorien

Webdesign, CMS & Entwicklung

Mit Liebe erstellt von:

Pascal Bajorat

Daniel Koch

Anwendungsbeispiele

Zum Inhalt

HTML & CSS für Einsteiger
Galerie öffnen

HTML & CSS für Einsteiger – leg direkt los!
Galerie öffnen

Arbeite an deinem Web-Projekt!

Einstieg

HTML & CSS für Einsteiger (Teil 01): Ein erster Blick auf HTML, CSS & Co.

Kostenlos

HTML & CSS (01): Ein erster Blick auf HTML, CSS & Co.

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.

Zum Text-Tutorial

HTML & CSS für Einsteiger (Teil 02): Die erste HTML-Seite

HTML & CSS (02): Die erste HTML-Seite

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 03): Elemente, Tags und Attribute

HTML & CSS (03): Elemente, Tags und Attribute

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 04): Texte strukturieren

HTML & CSS (04): Texte strukturieren

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 05): Texte aufhübschen

HTML & CSS (05): Texte aufhübschen

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 06): Listen

HTML & CSS (06): Listen

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.

Zum Text-Tutorial Projektdatei herunterladen

Grundlagen

HTML & CSS für Einsteiger (Teil 07): Tabellen (01)

HTML & CSS (07): Tabellen (01)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 08): Tabellen (02)

HTML & CSS (08): Tabellen (02)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 09): Grafiken fürs Web (01)

HTML & CSS (09): Grafiken fürs Web (01)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 10): Grafiken fürs Web (02)

HTML & CSS (10): Grafiken fürs Web (02)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 11): Hyperlinks definieren (1)

HTML & CSS (11): Hyperlinks definieren (1)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 12): Hyperlinks definieren (2)

HTML & CSS (12): Hyperlinks definieren (2)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 13): Formulare (1)

HTML & CSS (13): Formulare (1)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 14): Formulare (2)

HTML & CSS (14): Formulare (2)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 15): Formulare (3)

HTML & CSS (15): Formulare (3)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 16): Formulare (4)

HTML & CSS (16): Formulare (4)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 17): Formulare (5)

HTML & CSS (17): Formulare (5)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 18): Semantik fürs Web (1)

HTML & CSS (18): Semantik fürs Web (1)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 19): Semantik fürs Web (2)

HTML & CSS (19): Semantik fürs Web (2)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 20): Semantik fürs Web (3)

HTML & CSS (20): Semantik fürs Web (3)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 21): Semantik fürs Web (4)

HTML & CSS (21): Semantik fürs Web (4)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)

HTML & CSS (22): Multimedia für die Webseite (1)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 23): Multimedia für die Webseite (2)

HTML & CSS (23): Multimedia für die Webseite (2)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 24): iFrames

HTML & CSS (24): iFrames

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.

Zum Text-Tutorial Projektdatei herunterladen

CSS

HTML & CSS für Einsteiger (Teil 25): Das ist CSS

HTML & CSS (25): Das ist CSS

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 26): So klappt der Zugriff mit den Selektoren (1)

HTML & CSS (26): So klappt der Zugriff mit den Selektoren (1)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 27): So klappt der Zugriff mit den Selektoren (2)

HTML & CSS (27): So klappt der Zugriff mit den Selektoren (2)

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

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 28): So klappt der Zugriff mit den Selektoren (3)

HTML & CSS (28): So klappt der Zugriff mit den Selektoren (3)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 29): Schöner Text durch CSS (1)

HTML & CSS (29): Schöner Text durch CSS (1)

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 30): Schöner Text durch CSS (2)

HTML & CSS (30): Schöner Text durch CSS (2)

Ü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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 31): Farben und Hintergründe

HTML & CSS (31): Farben und Hintergründe

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.

Zum Text-Tutorial

HTML & CSS für Einsteiger (Teil 32): Außenabstände und Außenränder

HTML & CSS (32): Außenabstände und Außenränder

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 33): Den Textfluss kontrollieren

HTML & CSS (33): Den Textfluss kontrollieren

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 34): Rahmen

HTML & CSS (34): Rahmen

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 35): Listen und Counter

HTML & CSS (35): Listen und Counter

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 36): Das Boxmodell

HTML & CSS (36): Das Boxmodell

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 37): Elemente positionieren

HTML & CSS (37): Elemente positionieren

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

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 38): Alles im Fluss mit float

HTML & CSS (38): Alles im Fluss mit float

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.

Zum Text-Tutorial Projektdatei herunterladen

Praxis

HTML & CSS für Einsteiger (Teil 39): Die verschiedenen Layoutvarianten

HTML & CSS (39): Die verschiedenen Layoutvarianten

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.

Zum Text-Tutorial

HTML & CSS für Einsteiger (Teil 40): Zwei- und dreispaltige Layouts

HTML & CSS (40): Zwei- und dreispaltige Layouts

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 41): Das Layout entwickeln

HTML & CSS (41): Das Layout entwickeln

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.

Zum Text-Tutorial

HTML & CSS für Einsteiger (Teil 42): Das Layout weiter anpassen

HTML & CSS (42): Das Layout weiter anpassen

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.

Zum Text-Tutorial

HTML & CSS für Einsteiger (Teil 43): Das Grundgerüst erstellen

HTML & CSS (43): Das Grundgerüst erstellen

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.

Zum Text-Tutorial Projektdatei herunterladen

HTML & CSS für Einsteiger (Teil 44): Den Inhaltsbereich gestalten

HTML & CSS (44): Den Inhaltsbereich gestalten

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.

Zum Text-Tutorial

HTML & CSS für Einsteiger (Teil 45): Schicke Schriften für die Seite

HTML & CSS (45): Schicke Schriften für die Seite

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.

Zum Text-Tutorial

HTML & CSS für Einsteiger (Teil 46): Das Kontaktformular (1)

HTML & CSS (46): Das Kontaktformular (1)

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.

Zum Text-Tutorial

HTML & CSS für Einsteiger (Teil 47): Das Kontaktformular (2)

HTML & CSS (47): Das Kontaktformular (2)

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.

Zum Text-Tutorial

HTML & CSS für Einsteiger (Teil 48): Die Webseite geht online

HTML & CSS (48): Die Webseite geht online

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.

Zum Text-Tutorial

Bonus

Die richtige Entwicklungsumgebung zum Erstellen von Webseiten

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/

HTML5-Boilerplate - die beste Vorlage für HTML- und CSS3-Webseiten

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.

Projektdatei herunterladen

Die besten Tools zum Erstellen von HTML5- und CSS3-Webseiten

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

Details zum Inhalt

Die Webentwicklung mit HTML & CSS scheint für dich ein unüberwindlicher Pfad, den du lieber den anderen überlässt? Aber du weißt, früher oder später musst/willst auch du an dieses Thema ran. Doch wie anfangen? Wie gelingt dir der Einstieg in HTML & CSS? Leicht soll er sein, aber auch professionell. Erkennst du dich wieder? Dann ist das genau dein Training. Für dich haben wir es konzipiert.

Optimal für Anfänger: Im ersten Teil dieses Trainings geht es um den Einstieg in HTML:

Ein erster Blick auf HTML, CSS & Co.
Die erste HTML-Seite
Elemente, Tags und Attribute
Texte strukturieren, aufhübschen
Listen

Im zweiten Teil dieses Trainings lernst du wichtige Funktionen von HTML kennen:

Tabellen
Grafiken fürs Web
Hyperlinks definieren
Formulare
Semantik fürs Web
Multimedia für die Webseite
iFrames

Im dritten Teil dieses Trainings geht es um die Gestaltung mit CSS:

Das ist CSS
So klappt der Zugriff mit den Selektoren
Schöner Text durch CSS
Farben und Hintergründe
Außenabstände und Außenränder
Den Textfluss kontrollieren
Rahmen
Listen und Counter
Das Boxmodell
Elemente positionieren
Alles im Fluss mit float

Von der Theorie zur Praxis - wir entwickeln eine Website:

Die verschiedenen Layoutvarianten
Zwei- und dreispaltige Layouts
Das Layout entwickeln
Das Layout weiter anpassen
Das Grundgerüst erstellen
Den Inhaltsbereich gestalten
Schicke Schriften für die Seite
Das Kontaktformular
Die Webseite geht online

Damit du dein erlangtes Wissen optimal einsetzen kannst, findest du auf diesem Video-Training zusätzlich Arbeitsdateien im PSD-Format, mit denen du dich an der Entwicklung mit HTML & CSS versuchen kannst.