HTML-Crashkurs: Zum Profi in wenigen Stunden!

Anhand der Unterschiede zu den beiden Sprachen CSS und JavaScript, welche oft mit HTML zusammen verwendet werden, erkläre ich dir die grundlegende Aufgabe, die HTML erfüllt. Denn: Um zu verstehen, was etwas ist, ist es oft hilfreich zu verstehen, was es nicht ist.

Und schon lernst du das erste wichtige Tool als Programmierer*in kennen: Die kostenlose Open-Source-Plattform "CodePen". Hier erstellst du Code, testet und teilst ihn und die Plattform eignet sich wunderbar für erste ,,Experimente" - also dein allererstes Programm.

Um den Inhalt der vorherigen Lektion weniger abstrakt zu halten, veranschauliche ich ihn dir hier anhand eines vorbereiteten Code-Schnipsels. Durch ihn erlebst du die drei Websprachen ,,in Aktion". Klar, der Code ist noch sehr einfach. Aber es ist doch cool, wie du jede noch so kleine Änderung im Code sofort in Echtzeit in der Ausgabe siehst...

Übung: Mit deinem ersten Pen (Code) rumspielen!

Auch hier findest du meinen mit CodePen erstellten ,,Pen", also Code-Schnipsel: https://codepen.io/Sinah/pen/eYGXbbM

Du brauchst keinen Account, um damit herumzuspielen und veränderst nur deine eigene Version. Daher bleibt das Original (mein Pen) stets erhalten. Nimm dir so viel Zeit wie du willst.

Experimentiere mit dem Code (vor allem mit der HTML-Datei !), versuche, Dinge zu ändern und hab' keine Angst vorm Crash. Wichtig: Um deine Pens- oder deine Version meiner Pens- zu speichern, brauchst du einen (kostenlosen) CodePen-Account. Auch wenn der Pen automatisch auf "Auto-save" eingestellt ist (siehe Settings --> Behavior--> Save Automatically?), musst du ihn einmal gespeichert haben, damit er von da an alle 30 Sekunden automatisch gespeichert wird. Es kann nicht schaden, ab und an auf ,,Save" zu klicken.

Was ist eigentlich dieses Internet? Worin besteht der Unterschied zum Web? Was passiert hinter den Kulissen, wenn jemand deine Website öffnet, zwischen Endgerät und Server? All das sehen wir in dieser Lektion.

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/LYzbBYy?editors=1000

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/podzZqL

Wichtig: Um deine Pens- oder deine Version meiner Pens- zu speichern, brauchst du einen (kostenlosen) CodePen-Account. Auch wenn der Pen automatisch auf "Auto-save" eingestellt ist (siehe Settings --> Behavior--> Save Automatically?), musst du ihn einmal gespeichert haben, damit er von da an alle 30 Sekunden automatisch gespeichert wird. Es kann nicht schaden, ab und an auf ,,Save" zu klicken.

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/zYEQXxq

Wir erstellen, gliedern und öffnen unser erstes Projekt in VSCode, fügen die Erweiterung Live Server hinzu. Wir erstellen Ordner und Dateien, unter anderem die Index.html-Datei.

Mithilfe eines nützlichen Shortcuts erstellen wir ein HTML-Template in VSCode. Wir lernen den Head oder Kopf unseres Dokuments kennen, den Teil, der ,,hinter den Kulissen" mit Metainformationen für eine reibungslose Darstellung unseres Dokuments sorgt. Unter anderem sehen wir dabei sogenannte Meta-Tags und einige vom Aussterben bedrohte Elemente.

__________________________________________________________________________________

Den Code stelle ich dir in verschiedenen Dateitypen zur Verfügung (in einem Zip-Ordner, als Bild..), falls du mit einem Typ Probleme haben solltest. Es handelt sich jeweils um den gleichen Code, nur eben in unterschiedlichen Dateiversionen.

Du kannst meine Datei im Zip-Ordner direkt in deinem VSCode-Projekt öffnen und mit deinem Code vergleichen oder meinen Code kopieren.

So geht das:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code.

Den Code stelle ich dir in verschiedenen Dateitypen zur Verfügung (in einem Zip-Ordner, als Bild..), falls du mit einem Typ Probleme haben solltest. Es handelt sich jeweils um den gleichen Code, nur eben in unterschiedlichen Dateiversionen.

Du kannst meine Datei im Zip-Ordner direkt in deinem VSCode-Projekt öffnen und mit deinem Code vergleichen oder meinen Code kopieren.

So geht das:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code.

Hier findest du meinen Kurs zu Grundlagen in HTML, CSS und JS, in dem ich Dom Manipulation genauer behandele: https://www.udemy.com/course/lets-play-programmiere-dein-game-lerne-javascript-css-und-html/?referralCode=FB443A16D973181F1C21

Wichtig: Um deine Pens- oder deine Version meiner Pens- zu speichern, brauchst du einen (kostenlosen) CodePen-Account. Und: Auch wenn der Pen automatisch auf "Auto-save" eingestellt ist (siehe Settings --> Behavior--> Save Automatically?), musst du ihn einmal gespeichert haben, damit er von da an alle 30 Sekunden automatisch gespeichert wird. Es kann nicht schaden, ab und an auf ,,Save" zu klicken.

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/LYOpbOG?editors=1000

Manche HTML-Auszeichnungen führen zu dem gleichen optischen Ergebnis, unterscheiden sich aber in ihrer (semantischen) Bedeutung. Diese wird vom Screenreader erfasst, was besonders wichtig für Menschen mit Seh- oder Leseschwächen sein kann, aber auch von Suchmaschinen und Browsern.

Ich zeige dir hier solche ,,speziellen" Tags und Attribute, die zur Barrierefreiheit einer Website oder Anwendung beitragen können, ihre Kompatibilität erhöhen und technischen Problemen vorbeugen, sowie bei der Suchmaschinenoptimierung (engl. SEO für search engine optimization) eine Rolle spielen.

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/GROKBVN

Hier erstellen wir eine Homepage für ein fiktionales Restaurant, fügen unser eigenes Logo ein, ein Navigationsmenü und den strukturierten Haupttext.

Wir lernen reine Text-Elemente kennen, aber auch solche, die selbst keine Text-Elemente sind, aber oft zum Einsatz kommen, um Text zu strukturieren, gliedern, gruppieren. Diese Elemente gucken wir uns an:

• title

• header

• headings (h1-h6)

• div

• nav

• main

• section

• article

• aside

Wenn du mehr darüber erfahren willst, wie man HTML-Elemente mit CSS stylt, dann schau gerne in meinem anderen Kurs vorbei:

https://www.udemy.com/course/lets-play-programmiere-dein-game-lerne-javascript-css-und-html/?referralCode=FB443A16D973181F1C21

Hier lernst du, deiner Seite Copyright oder Impressum hinzuzufügen, Kontaktinformationen und inspirierende Zitate. Ich erkläre dir den Unterschied zwischen p und div und wir sehen weitere semantische sowie rein präsentationsbezogene Elemente.

In dieser Lektion lernen wir folgende Elemente kennen:

• p

• span

• small

• blockquote

• q

• footer

• address

In dieser Lektion lernen wir folgende Elemente kennen:

• strong

• em

• bold

• i

• u

• pre

• time

• sub

• sup

• br

• wbr

• hr

Wir werfen einen Blick auf zwei Arten von Listen: geordnete und ungeordnete.

Meinen Pen dazu findest du auch hier: https://codepen.io/Sinah/pen/podJpRr?editors=1100

Glückwunsch, jetzt kannst du endlich deine eigenen Websites erstellen! Zur Übung mache ich dir zwei bewährte Vorschläge:

• Clone eine andere Website.

• Erstelle deine eigene Website nach deinen ganz eigenen Vorstellungen.

Vergiss dabei nicht, sowohl auf die Optik als auch die Semantik deiner Seite zu achten. Viel Spaß!

Deine Website ist in Nullkommanichts veröffentlicht, und zwar kostenfrei. Wie das geht, zeige ich dir hier.

Und hier findest du Netlify: https://www.netlify.com/

Ich verabschiede dich mit ein paar Ratschlägen für deine Zukunft. Außerdem verlinke ich dir hier hilfreiches Material:

Unter anderem einen weiteren Kurs von mir, mit dem du sinnvoll an diesen Kurs anschließen kannst (Ich zeige dort Grundlagen in HTML, CSS und JavaScript und wie du mit den drei Sprachen ein Spiel programmierst):
https://www.udemy.com/course/lets-play-programmiere-dein-game-lerne-javascript-css-und-html/?referralCode=FB443A16D973181F1C21

Willst du auch CSS lernen? Dann findest du hier einen Kurs dazu von mir:

https://www.udemy.com/course/html-css-frontend-website-programmierung-webentwicklung-crashkurs/?referralCode=FA9C30F5130E54B529EA