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.
- Lektionen 37
- Quizze 0
- Dauer 4 Stunden
- Fähigkeitstufe Alle Stufen
- Sprache deutsch
- Studenten 467
- Beurteilung Ja
