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!

Möchtest du mehr über dieses Produkt erfahren? Dann geht es hier direkt zu den Infos!

34.95 4eck Media GmbH & Co. KG
HTML & CSS für Einsteiger
Bewertungen
(19 Kundenrezensionen)
ISBN: 9783944091402
Software Kategorie Icon Kategorie Icon 

Du erstellst stilsichere Flyer in Adobe InDesign, gibst Fotografien den letzten Schliff in Photoshop und auch die Vektorbearbeitung in Illustrator kann dich nicht schrecken. Doch wehe, du sollst eine Website coden. Die Webentwicklung mit HTML & CSS scheint für dich ein unüberwindlicher Pfad, den du lieber den anderen überlässt. Aber du weißt genau, 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.

"Hier kommt Code, ohne Helm und ohne Gurt, einfach Code ..." - deine Inhalte im Training:

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
  • Texte 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

HTML & CSS für Einsteiger

Damit du dein erlangtes Wissen auch gleich optimal einsetzen kannst, findest du auf diesem Video-Training zusätzlich ausgewählte Arbeitsdateien im PSD-Format, mit denen du dich an der Entwicklung mit HTML & CSS versuchen kannst. Hier findest du ein Beispiel (Fotoblog) für eine solche PSD-Arbeitsdatei.

HTML & CSS für Einsteiger

Nutzungshinweise: Informationen zur Nutzung der Inhalte und insbesondere die Voraussetzungen zur kommerziellen Verwertung findest du in den detaillierten Nutzungshinweisen.

Fazit: Lerne Webentwicklung mit diesem intelligenten Training! Ganz nach deiner bevorzugten Lernmethode stehen dir sowohl neun Stunden Video-Training als auch begleitend Tutorials als PDF-Datei (über 500 PDF-Seiten!) zur Verfügung. Für die optimale Nachvollziehbarkeit der Inhalte sind die Projektdateien den Inhalten sowie weitere Arbeitsdateien zum Üben beigelegt.

Dein Trainer Daniel Koch

Daniel Koch

Daniel Koch ist seit 1998 in der Webentwicklung zu Hause. Nach dem klassischen Einstieg über HTML folgten schnell JavaScript und dynamische Sprachen wie PHP. Über verschiedene CMS hat er den Weg zu Contao und Joomla! gefunden. Dort reizen ihn vor allem der Open-Source-Gedanke, die Flexibilität und die Erweiterbarkeit. Auf Basis von Contao entwickelt er standardkonforme Seiten, die modern und suchmaschinenoptimiert sind.

Webseite: www.medienwerke.de

Auszug: HTML & CSS Tutorial - Grundlagen - Hyperlinks definieren

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.

Bewertet mit 5 von 5 Sternen, basierend auf 19 Bewertungen.

31.10.2017

Für mich als Quereinsteiger als Web-Designerin sehr ansprechend und gut erklärt. Auch für MAC User, das finde ich toll.
5 von 5 Sternen.
14.09.2017

Tolles Training! Gut erklärt und veranschaulicht. Hat mich weitergebracht! :-)
5 von 5 Sternen.
20.06.2017

optimal...
5 von 5 Sternen.
05.02.2017

Für mich eher die "trockene Materie", aber sehr gut erklärt.
5 von 5 Sternen.
26.01.2017

Ist einfach und logisch aufgebaut. Gefällt mir.
5 von 5 Sternen.
18.04.2016

ist in jeder Bezehung ok
5 von 5 Sternen.
03.11.2015

Ich habe oft Praktikanten, die in den Beruf des Mediengestalters hinein schnuppern. Den gebe ich auszugsweise dieses Tutorial zum nacharbeiten. Dieses Training ist sehr gut erklärt und kann Schritt für Schritt, auch von Anfängern, nachgearbeitet werden.
So muss ich mir nicht jedes mal den Mund fusselig reden um immer wieder die gleichen Erklärungen abzugeben. :-)

5 von 5 Sternen.
15.10.2015

Ein gut gelungender Kurs
5 von 5 Sternen.
26.09.2015

Sehr gut erklärt von Beginn an!
Top für Einsteiger!

5 von 5 Sternen.
16.07.2015

Liegt wahrscheinlich an mir. Als Anfänger bin ich überfordert.
Präsentation ist aber gut.

5 von 5 Sternen.
19.06.2015

Tolles lernen. Super leicht verständlich. Danke.
5 von 5 Sternen.
06.05.2015

Sehr gut für Einsteiger! Super Video.
5 von 5 Sternen.
12.03.2015

Als Anfänger und angehende Mediengestalterin kann ich dieses Videotraining nur empfehlen!
5 von 5 Sternen.
08.03.2015

Sehr gut aufgebaut, die Erklärungen und die Zusammenfassungen sind super. Für Anfänger nur zu empfehlen. Mit diesen Videos habe ich den Umgang mit HTML und CSS erlernt und Verstanden. Preis – Leistungsverhältnis auch OK, deshalb 5 Sterne.
5 von 5 Sternen.
01.03.2015

Inhaltlich und thematisch wirklich super. Die "Sprachen" werden ausführlich vorgestellt und erklärt.

Was mir allerdings nicht so gut gefiel:
Bei den Erklärungen "hüpft" die Lautstärke immer zwischen laut und leise. Das hat aber nichts mit der Qualität der Videos zu tun, sondern liegt am Tutor selbst. Auch die Betonung ist manchmal echt merkwürdig; an manchen Stellen werden Worte in die Länge gezogen oder durch kurze Aussetzer unterbrochen. Da hat man das Gefühl der Tutor überlegt gerade, wie er den Satz am besten formuliert.
Das macht es auf Dauer anstrengend zuzuhören und fängt an zu nerven.
Nicht böse gemeint, ich bin in einem Unternehmen selbst als Referent tätig. Von daher spreche ich aus Erfahrung.

Ansonsten hält das Produkt was es verspricht: man bekommt einen sehr detaillierten Einblick in dieses Gebiet.

4 von 5 Sternen.
23.01.2015

Einfach Klasse!
Hilfreich für Einsteiger und Fortgeschrittene!

5 von 5 Sternen.
18.01.2015

Topprodukt für Anfänger wie mich! Danke
5 von 5 Sternen.
18.10.2014

Ich kann nur sagen, dieses Tutorial ist einfach nur super gemacht: Klar und deutlich alles genau erklärt und auch für den blutigen Anfänger wie mich gut zu verstehen und nachzuvollziehen! Deshalb von mir volle 5 Sterne!
Manchmal ist die Sprechgeschwindigkeit ein bisschen schnell. Macht aber nichts, man kann es sich ja mehrmals anschauen!




5 von 5 Sternen.
19.09.2014

Auch hier, sehr gut Erklärt, einfach na zu voll ziehen :)
Danke :)

5 von 5 Sternen.
ALLE

img

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

Länge: 12 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 12 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 11 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 13 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 13 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 10 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 12 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 12 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 14 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 12 Minuten

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.

  Auf TutKit.com ansehen


img

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

Länge: 14 Minuten

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.

  Auf TutKit.com ansehen


img

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

Länge: 12 Minuten

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.

  Auf TutKit.com ansehen


img

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

Länge: 11 Minuten

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.

  Auf TutKit.com ansehen


img

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

Länge: 15 Minuten

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.

  Auf TutKit.com ansehen


img

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

Länge: 11 Minuten

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.

  Auf TutKit.com ansehen


img

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

Länge: 12 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 14 Minuten

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.

  Auf TutKit.com ansehen


img

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

Länge: 11 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 10 Minuten

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.

  Auf TutKit.com ansehen


img

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

Länge: 10 Minuten

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.

  Auf TutKit.com ansehen


img

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

Länge: 11 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 11 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 11 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 12 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 14 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 13 Minuten
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.

  Auf TutKit.com ansehen


img

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

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

  Auf TutKit.com ansehen


img

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

Länge: 15 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 13 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 12 Minuten
Ü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.

  Auf TutKit.com ansehen


img

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

Länge: 9 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 10 Minuten

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.

  Auf TutKit.com ansehen


img

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

Länge: 10 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 13 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 14 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 11 Minuten
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.

  Auf TutKit.com ansehen


img

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

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

  Auf TutKit.com ansehen


img

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

Länge: 12 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 10 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 13 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 13 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 10 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 14 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 12 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 11 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 15 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 11 Minuten
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.

  Auf TutKit.com ansehen


img

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

Länge: 11 Minuten
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.

  Auf TutKit.com ansehen


img

Die richtige Entwicklungsumgebung zum Erstellen von Webseiten

Länge: 10 Minuten
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: http://panic.com/coda/
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

  Auf TutKit.com ansehen


img

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

Länge: 31 Minuten
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.

  Auf TutKit.com ansehen


img

Mithilfe der Lernkurve erfährst du, welche weiteren Themen zu deinem ausgewählten Training inhaltlich am besten passen. So erkennst du auf einen Blick, wie dir der einfache Einstieg zum gekonnten Aufstieg am besten gelingt und du kannst dein eigenes Know-how zielführend einschätzen.