HTML & CSS Tutorial für Anfänger

Kostenlos
HTML & CSS Tutorial für Anfänger

Habt ihr Lust eine eigene Homepage zu erstellen und wisst noch nicht ganz wie ihr das machen könnt? Dann seid ihr hier genau richtig. In dieser Tutorialserie zeige ich euch Schritt für Schritt wie das geht. Dazu bringe ich euch die dafür nötigen Elemente von HTML und CSS bei.

 

Tutorial-Übersicht

1. Erste Homepage

In dieser Session erstellen wir gemeinsam unsere erste Homepage! Klingt nach etwas aufwendigem, ist es aber erstmal nicht. Unsere erste Homepage wird nämlich recht unkomplex sein und lediglich die Grundelemente beinhalten.

2. Überschriften, Paragraphen und Zeilenumbrüche

Im letzten Tutorial haben wir unsere erste kleine Homepage gemacht. Im dritten Teil zeige ich euch, wie ihr Überschriften mit unterschiedlichen Größen, Paragraphen und Zeilenumbrüche erzeugen könnt.

3. Fett, Kursiv und Kommentieren

Beim erstellen eines Artikels kommt es vor, dass man etwas fett oder kursiv darstellen möchte. Dafür gibt es in HTML extra Tags, die ihr in diesem Tutorial lernen werdet.

4. Bilder in die Homepage einfügen

In diesem Teil der Tutorialserie geht es um das Einfügen und Anzeigen von Bildern in unserer Homepage.

5. Bildgröße verändern

Oft sind die Bilder die man zur Verfügung hat nicht in der richtigen Größe. Dann gibt es unterschiedliche Möglichkeiten dies zu ändern. Man kann das Bild mit einem Bildbearbeitungsprogramm verkleinern/vergrößern, oder man kann es direkt in HTML machen.

6. Links einfügen

Verlinkungen sind die Bindeglieder aller Hompages. Wie Verlinkungen aufgebaut sind, lernen wir hier.

7. Tabellen

Oftmals kommt es vor, dass etwas in Tabellen dargestellt, besser verständlich ist. In diesem Tutorial lernen wir, wie Tabellen aufgebaut sind.

8. Table width, Cellpadding, Cellspacing und Colspan

Im letzten HTML Tutorial haben wir ja bereits gelernt, wie wir eine Tabelle in HTML erzeugen können. Jetzt zeige ich euch, wie wir die Table Width (Tabellenbreite), das Cellpadding und denCellspacing(Platz den eine Zelle einnimmt) verändern können.

9. Listen

Listen sind ein nützliches Mittel um manche Zusammenhänge besser darzustellen. Hier lernt ihr, wie sie funktionieren.

10. Einführung in CSS

In diesem Tutorial lernen wir was CSS ist und was es eigentlich bedeutet.

11. Hintergrundfarbe und RGB

In diesem CSS Tutorial geht es um die Hintergrundfarbe und RGB.

12. Padding

Im letzten CSS Tutorial haben wir Margin kennengelernt. In diesem Tutorial geht es um ein ähnliches Konzept, welches jedoch nicht den Außenabstand, sondern den Innenabstand definiert. Die Rede ist von Padding.

13. Border

In diesem CSS Tutorial geht es um den Border (Rand).

14. Margin

In diesem CSS Tutorial, geht es um den Begriff Margin. Margin steht für den Außenabstand.

15. Schriftformatierung

In diesem CSS Tutorial geht es um die Schriftformatierung.

16. Width & Height

Wir hatten width(Breite) und height(Höhe) zwar bereits verwendet, aber ich möchte es noch einmal kurz in einem anderen Zusammenhang erkläreren.

17. Stylen von Links

Wir hatten ja bereits gelernt, wie man Links in HTML erzeugt. In diesem CSS Tutorial, lernt ihr wie man das Aussehen von Links verändert.

18. Stylen von Tabellen

In diesem CSS Tutorial zeige ich euch wie man Tabellen optisch aufpeppen kann.

19. Stylen von mehreren Elementen

In diesem Tutorial lernen wir wie man mehrere Elemente Stylt.

20. IDs und Span

Bisher haben wir beim Erstellen von Regeln das Problem gehabt, dass eine Regel sich auf alle Inhalte des Elements ausgewirkt haben. Was aber, wenn wir z.B. einem bestimmten Paragraphen bestimmte Regeln zuordnen möchten? Dafür gibt es in CSS IDs und darum geht es in diesemCSS Tutorial für Anfänger.

21. Stylen mit Klassen

Im letzten CSS für Anfänger Tutorial haben wir gelernt wie man mit IDs bestimmte Elemente Tunen kann. In diesem Tutorial geht es um Klassen – einem sehr ähnlichen Element wie IDs.

22. Div

In diesem CSS Tutorial für Anfänger geht es um ein ganz wichtiges Thema – das Div Element!Div steht für division und kommt aus dem Englischen. Es bedeutet Abgrenzung.

23. Absolute Positionierung

Im letzten CSS für Anfänger Tutorial haben wir Div kennengelernt. In diesem Tutorial werden wirAbsolute Positioning kennenlernen. Es gibt drei Möglichkeiten, Divs zu positionieren. Absolute Positioning, Relative Positioning und Fixed Positioning. In diesem und in den nächsten beiden Tutorial werden wir uns also mit der Positionierung beschäftigen.

24. Relative Positionierung

Im letzten CSS für Anfänger Tutorial haben wir die Absolute Positionierung behandelt. In diesem Tutorial geht es um die Relative Positionierung. Also das Positionieren von Elementen in Abhängigkeit zu anderen Elementen.

25. Fixed Positioning

In den letzten beiden CSS Tutorials für Anfänger haben wir die zwei der drei Positionierungsmethoden kennengelernt. In diesem Tutorial zeige ich euch wie ihr die dritte Positionierungsmethode benutzt: Fixed Position.

26. Child Selector

In diesem CSS für Anfänger Tutorial zeige ich euch den Child Selector (child=Kind; selector=Wähler). Beim Child handelt es sich um einen Tag der eine Ebene unter demParent(Eltern) liegt.

27. External Style Sheets

External Stylesheets: Wir lagern unser CSS auf eine andere Datei aus.

28. Styles überschreiben

Im letzten CSS Tutorial für Anfänger haben wir gelernt wie man External Style Sheets(ESS) erstellt. Dabei haben wir gelernt, dass man mit ESS Regeln für alle Seiten erstellen kann. Was aber wenn man eine Seite mit 123 Seiten hat und die Regeln zwar super funktionieren und auf 122 der Seiten auch super aussehen, wir aber für eine Seite etwas andere Regeln verwenden möchten?

29. Pseudo Elemente

In diesem CSS für Anfänger Tutorial geht es um Pseudo Elements. Pseude Elements lassen sich verwenden um die erste Zeile oder den ersten Buchstaben eines Blocks zu Stylen.

30. Hintergrundbild einfügen

In diesem HTML & CSS Tutorial für Anfänger geht es darum wie man das Hintergrundbild der Webpage ändert. Das Kann die Seite wirklich extrem Aufwerten.

31. Max-Height & Max-Width

Im letzten CSS für Anfänger Tutorial, haben wir kennengelernt wie man ein Bild als Hintergrund einfügt. In diesem CSS Tutorial geht es um die Max-Height und Max-Width eines solchen Bildes.

32. Einführung in Formulare

Bisher haben wir gelernt, wie man das Aussehen einer Website verändert. In diesem HTML & CSS Tutorial für Anfänger stelle ich euch Formulare vor, die es euch ermöglichen dem Nutzer Interaktion anzubieten.

33. Text Formular und Übergabe der Inhalte

Im letzten HTML & CSS Tutorial haben wir Formulare kennengelernt. In diesem Tutorial lernen wir ein weiteres Text Formular kennen, dazu benötigen wir den Doppeltag <strong>.

34. Dropdown-Listen

In diesem HTML für Anfänger Tutorial geht es wieder um Formulare. Dieses Mal darum wie man eine Drop Down Liste erstellt.

35. Radio Button und Check Boxen

In diesem HTML Tutorial für Anfänger geht es um Radio Button und Check Boxen.

36. Herausforderung Digitale Uhr

Wie immer, ist es wichtig das gelernte auch in Form einer Herausforderung umzusetzen. Daher erstellen wir in dieser Übungsaufgabe eine Digitaluhr in HTML5 mittels Canvas.

Kursfeatures

  • Lektionen 36
  • Quizzes 0
  • Dauer 4 Stunden
  • Skill level Anfänger
  • Sprache deutsch
  • Studenten 104
  • Zertifkat Nein
  • Assessments Eigen
  • Einführung in HTML

    • Lektion 1.1 Erste Homepage Vorschau
    • In dieser Session erstellen wir gemeinsam unsere erste Homepage! Klingt nach etwas aufwendigem, ist es aber erstmal nicht. Unsere erste Homepage wird nämlich recht unkomplex sein und lediglich die Grundelemente beinhalten.
    • Lektion 1.2 Überschriften, Paragraphen und Zeilenumbrüche Vorschau
    • Im letzten Tutorial haben wir unsere erste kleine Homepage gemacht. Im dritten Teil zeige ich euch, wie ihr Überschriften mit unterschiedlichen Größen, Paragraphen und Zeilenumbrüche erzeugen könnt.
    • Lektion 1.3 Fett, Kursiv und Kommentieren Vorschau
    • Beim erstellen eines Artikels kommt es vor, dass man etwas fett oder kursiv darstellen möchte. Dafür gibt es in HTML extra Tags, die ihr in diesem Tutorial lernen werdet.
  • Verschiedene Tags

    • Lektion 2.1 Bilder in die Homepage einfügen Vorschau
    • In diesem Teil der Tutorialserie geht es um das Einfügen und Anzeigen von Bildern in unserer Homepage.
    • Lektion 2.2 Bildgröße verändern Vorschau
    • Oft sind die Bilder die man zur Verfügung hat nicht in der richtigen Größe. Dann gibt es unterschiedliche Möglichkeiten dies zu ändern. Man kann das Bild mit einem Bildbearbeitungsprogramm verkleinern/vergrößern, oder man kann es direkt in HTML machen.
    • Lektion 2.3 Links einfügen Vorschau
    • Verlinkungen sind die Bindeglieder aller Hompages. Wie Verlinkungen aufgebaut sind, lernen wir hier.
    • Lektion 2.4 Tabellen Vorschau
    • Oftmals kommt es vor, dass etwas in Tabellen dargestellt, besser verständlich ist. In diesem Tutorial lernen wir, wie Tabellen aufgebaut sind.
    • Lektion 2.5 Table width, Cellpadding, Cellspacing und Colspan Vorschau
    • Im letzten HTML Tutorial haben wir ja bereits gelernt, wie wir eine Tabelle in HTML erzeugen können. Jetzt zeige ich euch, wie wir die Table Width (Tabellenbreite), das Cellpadding und den Cellspacing(Platz den eine Zelle einnimmt) verändern können.
    • Lektion 2.6 Listen Vorschau
    • Listen sind ein nützliches Mittel um manche Zusammenhänge besser darzustellen. Hier lernt ihr, wie sie funktionieren.
  • Einführung in CSS

    • Lektion 3.1 Einführung in CSS Verriegelt
    • Lektion 3.2 Hintergrundfarbe und RGB Vorschau
    • In diesem CSS Tutorial geht es um die Hintergrundfarbe und RGB.
    • Lektion 3.3 Padding Vorschau
    • Im letzten CSS Tutorial haben wir Margin kennengelernt. In diesem Tutorial geht es um ein ähnliches Konzept, welches jedoch nicht den Außenabstand, sondern den Innenabstand definiert. Die Rede ist von Padding.
    • Lektion 3.4 Border Vorschau
    • In diesem CSS Tutorial geht es um den Border (Rand).
    • Lektion 3.5 Margin Vorschau
    • In diesem CSS Tutorial, geht es um den Begriff Margin. Margin steht für den Außenabstand.
  • Tags mit CSS stylen

  • Wichtige Einsteigertricks

    • Lektion 5.1 IDs und Span Vorschau
    • Bisher haben wir beim Erstellen von Regeln das Problem gehabt, dass eine Regel sich auf alle Inhalte des Elements ausgewirkt haben. Was aber, wenn wir z.B. einem bestimmten Paragraphen bestimmte Regeln zuordnen möchten? Dafür gibt es in CSS IDs und darum geht es in diesem CSS Tutorial für Anfänger.
    • Lektion 5.2 Stylen mit Klassen Vorschau
    • Im letzten CSS für Anfänger Tutorial haben wir gelernt wie man mit IDs bestimmte Elemente Tunen kann. In diesem Tutorial geht es um Klassen – einem sehr ähnlichen Element wie IDs.
    • Lektion 5.3 Div Vorschau
    • In diesem CSS Tutorial für Anfänger geht es um ein ganz wichtiges Thema - das Div Element! Div steht für division und kommt aus dem Englischen. Es bedeutet Abgrenzung.
    • Lektion 5.4 Absolute Positionierung Vorschau
    • Im letzten CSS für Anfänger Tutorial haben wir Div kennengelernt. In diesem Tutorial werden wir Absolute Positioning kennenlernen. Es gibt drei Möglichkeiten, Divs zu positionieren. Absolute Positioning, Relative Positioning und Fixed Positioning. In diesem und in den nächsten beiden Tutorial werden wir uns also mit der Positionierung beschäftigen.
    • Lektion 5.5 Relative Positionierung Vorschau
    • Im letzten CSS für Anfänger Tutorial haben wir die Absolute Positionierung behandelt. In diesem Tutorial geht es um die Relative Positionierung. Also das Positionieren von Elementen in Abhängigkeit zu anderen Elementen.
    • Lektion 5.6 Fixed Positioning Vorschau
    • In den letzten beiden CSS Tutorials für Anfänger haben wir die zwei der drei Positionierungsmethoden kennengelernt. In diesem Tutorial zeige ich euch wie ihr die dritte Positionierungsmethode benutzt: Fixed Position.
    • Lektion 5.7 Child Selector Vorschau
    • In diesem CSS für Anfänger Tutorial zeige ich euch den Child Selector (child=Kind; selector=Wähler). Beim Child handelt es sich um einen Tag der eine Ebene unter dem Parent(Eltern) liegt.
  • CSS in der Praxis

    • Lektion 6.1 External Style Sheets Vorschau
    • External Stylesheets: Wir lagern unser CSS auf eine andere Datei aus.
    • Lektion 6.2 Styles überschreiben Vorschau
    • Im letzten CSS Tutorial für Anfänger haben wir gelernt wie man External Style Sheets(ESS) erstellt. Dabei haben wir gelernt, dass man mit ESS Regeln für alle Seiten erstellen kann. Was aber wenn man eine Seite mit 123 Seiten hat und die Regeln zwar super funktionieren und auf 122 der Seiten auch super aussehen, wir aber für eine Seite etwas andere Regeln verwenden möchten?
    • Lektion 6.3 Pseudo Elemente Vorschau
    • In diesem CSS für Anfänger Tutorial geht es um Pseudo Elements. Pseude Elements lassen sich verwenden um die erste Zeile oder den ersten Buchstaben eines Blocks zu Stylen.
    • Lektion 6.4 Hintergrundbild einfügen Vorschau
    • In diesem HTML & CSS Tutorial für Anfänger geht es darum wie man das Hintergrundbild der Webpage ändert. Das Kann die Seite wirklich extrem Aufwerten.
    • Lektion 6.5 Max-Height & Max-Width Vorschau
    • Im letzten CSS für Anfänger Tutorial, haben wir kennengelernt wie man ein Bild als Hintergrund einfügt. In diesem CSS Tutorial geht es um die Max-Height und Max-Width eines solchen Bildes.
  • Formulare und Dropdown-Listen

    • Lektion 7.1 Einführung in Formulare Vorschau
    • Bisher haben wir gelernt, wie man das Aussehen einer Website verändert. In diesem HTML & CSS Tutorial für Anfänger stelle ich euch Formulare vor, die es euch ermöglichen dem Nutzer Interaktion anzubieten.
    • Lektion 7.2 Text Formular und Übergabe der Inhalte Vorschau
    • Im letzten HTML & CSS Tutorial haben wir Formulare kennengelernt. In diesem Tutorial lernen wir ein weiteres Text Formular kennen, dazu benötigen wir den Doppeltag <strong>.
    • Lektion 7.3 Dropdown-Listen Vorschau
    • In diesem HTML für Anfänger Tutorial geht es wieder um Formulare. Dieses Mal darum wie man eine Drop Down Liste erstellt.
    • Lektion 7.4 Radio Button und Check Boxen Vorschau
    • In diesem HTML Tutorial für Anfänger geht es um Radio Button und Check Boxen.
    • Lektion 7.5 Herausforderung Digitale Uhr Verriegelt
    • Wie immer, ist es wichtig das gelernte auch in Form einer Herausforderung umzusetzen. Daher erstellen wir in dieser Übungsaufgabe eine Digitaluhr in HTML5 mittels Canvas.
Hi! Ich bin Denis. Ich habe einen Bachelor in Wirtschaftsingenieurswesen der HTWG Konstanz und hab dort meine Begeisterung fürs Programmieren entdeckt. Zur Zeit lernen bereits über 16000 Studenten von meinen Kursen. Dies gibt mir extrem viel Motivation und Energie noch mehr uns bessere Kurse zu erstellen. Mein Ziel ist es, das Programmierenlernen so zugänglich wie möglich zu machen, denn ich bin überzeugt, IT ist DIE ZUKUNFT! Also tritt meinen Kursen bei und lerne wie man Webseiten, Apps oder andere Programme entwickelt. Die Möglichkeiten sind grenzenlos!

Reviews

Durchschnittliches Rating

5
0 Bewertungen

Detailiertes Rating

5 Sterne
0
4 Sterne
0
3 Sterne
0
2 Sterne
0
1 Sterne
0
Kostenlos