Grundlagen HTML
Das Grundgerüst einer HTML-Seite stelle ich gleich in einem Video vor. Ich empfehle die ersten Webseiten mit einem einfachen Editor zu schreiben. Bei der Verwendung des Standard-Editors in Windows unbedingt darauf achten, dass die Datei mit der Endung ".html" abgespeichert wird. Dafür muss bei Dateityp die Option "alle Dateien" ausgewählt sein. Die Codierung sollte UTF-8 sein.
- Den Grundaufbau einer HTML-Seite erkläre ich in diesem Youtube-Video.
- Auch in HTML-Seiten kann man Kommentare einfügen. Das ist häufig hilfreich, um sich auch nach einer Programmierpause schnell im Projekt zurecht zu finden. Wie man einen Kommentar einfügt, erkläre ich in dem Learningsnack HTML (Kommentare).
- Zusätzlich gibt es noch einen Learningsnack zum Thema Bilder und Verweise.
- Wie eine CSS-Datei eingebunden wird, erkläre ich in dem Learningsnack HTML (CSS einbinden).
- Zusätzlich gibt es noch einen Learningsnack zum Thema HTML / CSS Selektoren. Hier ist eine kurze Einführung in Klassen und IDs zu finden.
- Zur Einführung in das Box-Modell habe ich wieder ein YouTube-Video erstellt.
- Weitere Informationen finden sich auch noch in einen Learningsnack zum Thema HTML (Inline- und Block-Elemente). Hier ist eine kurze Einführung in Klassen und IDs zu finden.
- Weitere Beispiele und Erkläuterungen zum Box-Modell finden sich auf den Seiten, auf die ich oben im Menü verweise.
Beim Programmieren empfehle ich außerdem in einem zweiten Fenster das selfHTML-Wiki geöffnet zu haben. So kann man schnell nachschauen, wenn man Informationen zu einem Befehl benötigt.
HTML mit CSS
Nun geht es im nächsten Schritt darum, die erste Webseite aufzuhübschen. Dies geschieht mit Hilfe von CasCading-Stysheets (kurz CSS). Es wird eine neue Seite erzeugt mit der Dateiendung .css, zum Beispiel "format.css". Diese Datei wird dann mit Hilfe eines Verweises in der Webseite aufgerufen. Die Idee ist eine strikte Trennung von Inhalt und Design.
HTML/CSS - Das Box-Modell
Die Darstellung von HTML-Elementen erfolgt in Rechtecken, die auf vielfältige Weise formatiert werden können. Die Formatierungsmöglichkeiten erklärt das Box-Modell.
Uns jetzt wünsche ich ganz viel Spaß beim Ausprobieren! Such dir ein Thema aus, das dich interessiert, zu deinen Hobbies oder etwas das du magst und lege einfach los!