Lernen Sie HTML5 in diesem kostenlosen und interaktiven Kurs für Anfänger

HTML ist einer der Kernbausteine ​​des Webs, da es den Inhalt der von Ihnen besuchten Websites kapselt. Trotz seines enormen Einflusses wissen nur sehr wenige Menschen, wie es funktioniert.

Um die technologische Kompetenz der Welt zu verbessern, haben wir uns mit dem Entwickler, Designer und Lehrer Eric Tirado zusammengetan und einen kostenlosen HTML5-Kurs erstellt.

Klicken Sie auf das Bild, um zur Kursseite zu gelangen

Während des gesamten Kurses führt Eric Sie vom Anfänger bis zum HTML-Experten und zeigt Ihnen, wie Sie eine Website erstellen. Und das Beste daran ist, dass Sie weniger als eine Stunde brauchen, um den Kurs abzuschließen!

Schauen wir uns nun an, wie es aufgebaut ist.

Kursinhalt

Der Kurs enthält 14 interaktive Screencasts. Jede Besetzung behandelt ein Kernkonzept von HTML und die meisten dauern zwischen drei und sechs Minuten. In einigen von ihnen werden Sie aufgefordert, in den Code zu springen und selbst zu experimentieren, wie dies mit der Scrimba-Plattform möglich ist.

Lektion 1: Einführung in das Web

Zunächst lernen Sie ein wenig über das Web im Allgemeinen und sehen sich Clients, Server und die drei Sprachen an, die Browser sprechen: HTML, CSS und JavaScript.

Dies gibt Ihnen eine gute Grundlage für die nächsten Lektionen, da Sie die allgemeine Rolle von HTML im World Wide Web besser verstehen.

Lektion 2: Erstellen eines HTML-Dokuments

Der nächste Schritt besteht darin, Ihr erstes HTML-Dokument zu erstellen. In dieser Vorlesung wird erklärt, wie HTML-Dateien funktionieren, und Sie erhalten eine kurze Einführung in die URL-Leiste im Browser.

Lektion 3: Verschachteln von Elementen

Das Verschachteln ist ein kritisches Konzept in HTML, daher wird es in der dritten Lektion behandelt. Verschachteln bedeutet im Grunde, dass Sie Tags ineinander verschachteln können. Um ein HTML-Element zu verschachteln, fügen Sie es einfach zwischen den öffnenden und schließenden Tags eines anderen HTML-Elements hinzu.

Lektion 4: Kopfelemente und Skripte

 Learning HTML       h1 { text-align: center; }   document.getElementById("h1").innerHTML = "Hello Universe!";   

Das head-Element ist das erste HTML-Tag nach dem Tag selbst. Es ist ein Container für Metadaten und definiert häufig den Titel **, ** Zeichensatz, Stile, Links, Skripte und andere Metainformationen.

In dieser Vorlesung erfahren Sie, wie Sie das Meta-Tag mit einer Reihe verschiedener Inhaltstypen füllen, wie Sie im obigen Snippet sehen können.

Lektion 5: Layoutelemente

HTML5 führte eine Reihe von Layoutelementen ein, die HTML semantischer machen. Diese neuen Tags verstärken jetzt die Bedeutung der am häufigsten verwendeten Layoutelemente wie und , während wir in der Vergangenheit nur ein bedeutungsloses Element hatten, das gerne verwendet wurde. In diesem Screencast lernen Sie die nützlichsten und wichtigsten kennen.

Lektion 6: Figuren- und Bildelemente

Bilder sind ein zentraler Bestandteil fast aller Websites. In dieser Vorlesung erfahren Sie, wie Sie der Site Bilder hinzufügen und ihnen Untertitel hinzufügen.

Lektion 7: Einbetten von Videos

Du hast vielleicht bemerkt, dass YouTube-Videos überall im Web sind, oder? Nicht nur auf youtube.com. Dies ist dank einer der HTML-Funktionen zum Einbetten von Medien in eine Seite von einer anderen Stelle im Web möglich. In dieser Lektion behandeln wir die Methoden zum Einbetten von Videos von Websites wie YouTube und auch direkt aus einer Videodatei.

Lektion 8: Navigationsleiste und Listenelemente

In dieser Vorlesung lernen Sie, wie Sie die Navigationsleiste mithilfe einer ungeordneten Liste und Listenelementen erstellen. Dies umfasst sowohl eine horizontale als auch eine vertikale Navigationsleiste zur Verwendung in der Kopfzeile und in der Seitenleiste unserer Website.

Lektion 9: Überschriften

Überschriften werden mit dem Tag erstellt, wobei das * -Zeichen durch Zahlen von 1 bis 6 ersetzt werden soll. Die Bedeutung der Kopfzeile nimmt mit zunehmender Zahl ab

ist diejenige, die Sie normalerweise für Ihren wichtigsten Titel oder Text auf Ihrer Seite verwenden würden.

Lektion 10: Absatz- und Textformatierung (Teil 1)

Das Formatieren von Text ist auch wichtig, um Websites zu erstellen. In dieser Vorlesung lernen Sie die Grundlagen. Sie werden wahrscheinlich viele der Konzepte hier an Textverarbeitungsprogrammen wie Word und Pages erkennen.

Lektion 11: Textformatierung (Teil 2)

In dieser Lektion erfahren Sie mehr über die Formatierung, jedoch mit Tags, die große Textblöcke betreffen. Beispiele hierfür sind die element and the element.

Lesson #12: Tables (part 1)

Original text


Tables can be a bit complicated, but this lecture tries to explain it as simply as possible. Secondly, two lectures will be dedicated to this subject so that you’ll properly understand it.

Lesson #13: Tables (part 2)

In this lesson, you’ll learn more advanced elements in tables, like , , and . These allow you to control the elements inside the head, body and footer separately.

You’ll also be exposed to the , which allows you to add styles to specific columns.

Lesson #14: Page linking and final touches

In the final screencast, we’ll wrap it all up and finish the website. We’ll add a link from the navigation to various sections on the page, and also introduce another page so that you understand how links between pages work.

By this point, you should have a solid understanding of HTML, and the most important tags of the language.

Note: Eric will also be launching a follow-up course in April, which will tackle CSS for beginners. Leave your email here if you want early access.

The Scrimba format

Finally, let’s also have a look at the technology behind the course, as it’s pretty slick. The course is built using Scrimba, an interactive coding screencast tool. Scrimba looks like normal videos, but they’re fully interactive. You can edit the code inside the casts!

Here’s a gif which explains the concept:

Pause the screencast → Edit the code → Run it! → See your changes

Pause the screencast → Edit the code → Run it! → See your changes

This is great for when you feel you need to experiment with the code in order to properly understand it, or when you simply want to copy a piece of the code.

So what are you waiting for? Head over to the course page and get started today!

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.