HTML/Tutorials/Einstieg

Was muss man eigentlich können oder wissen, um nicht nur im Internet zu surfen, sondern auch eigene Inhalte im Internet zu präsentieren?

In diesem Tutorial lernen Sie die Grundlagen von HTML kennen. Und keine Sorge, diese vier Buchstaben dürfen Sie gerne deutsch aussprechen. Wofür diese Buchstaben im Einzelnen stehen, verraten wir Ihnen auf jeden Fall noch. Jedenfalls sind Sie herzlich eingeladen, mit uns eine Reise durch die Techniken des Internets zu wagen.

Dieser Kurs gliedert sich in vier Kapitel:

Vorüberlegungen

  • Überschriften
  • HTML5-Grundgerüst
  • Bilder + Videos
  • Referenzieren in HTML
  • Schriftgröße
  • Ausrichtung
  • Einbindung von Stylesheets
  • Seitenstrukturierung
  • Elemente nebeneinander platzieren
  • Wie geht es weiter? (Nachwort)
  • eine Preistabelle
  • Erste Schritte (Kapitel 1)

Was brauche ich, um loslegen zu können?

Um HTML-Dateien auf dem Bildschirm anzeigen zu können, benötigen Sie dann nur Ihren Browser , also das Programm, mit dem Sie gerade dieses Tutorial lesen.

Die HTML-Dateien (und auch CSS-Stylesheets ab Kapitel 3 ), um die es im Folgenden hauptsächlich geht, sind reine Textdateien. Um diese Dateien bearbeiten zu können, reicht erstmal ein einfacher Code-Editor , der bei Ihrem Betriebssystem bereits vorinstalliert ist.

Website-Planung – die Schreinerei Meier

Um die Überlegungen zu verdeutlichen, die vor der Veröffentlichung einer Website stehen, begeben wir uns jetzt in die Werkstatt des Schreinermeisters Meier in Dingenskirchen. Meier arbeitet in der Hauptsache als Möbelschreiner, daneben bietet er noch einen Reparaturdienst an – wenn beispielsweise an einer Tür ein Beschlag auszuwechseln oder ein Tisch abzubeizen sei. Er ist ein Mann mit Ambitionen und möchte gern auch über die Grenzen Dingenskirchens hinaus bekannt werden. Nachdem er schon gesehen hat, dass sein schärfster Konkurrent in seiner Werbung eine Internet-Adresse angibt, unter der man sich informieren kann, möchte er so etwas auch.

Html-einstieg-vorschau.png

Auf den folgenden Seiten können Sie seine ersten Schritte bis zur mehrseitigen Homepage verfolgen!

Klicken Sie auf das Bild, um die Seiten in einem neuen Tab zu öffnen.

Sie können alle Dateien herunterladen:

src.selfhtml.org/kurse/html-einstieg.zip (ZIP, 8.9MB)

Navigationsmenü

Meine werkzeuge.

  • Benutzerkonto erstellen

Namensräume

  • Quelltext anzeigen
  • Versionsgeschichte
  • Wie fange ich an?
  • Offline-Wiki
  • Letzte Änderungen
  • Links auf diese Seite
  • Änderungen an verlinkten Seiten
  • Spezialseiten
  • Druckversion
  • Permanenter Link
  • Seiten­informationen
  • Diese Seite wurde zuletzt am 6. September 2021 um 22:18 Uhr geändert.

Unterstützt durch

Die Inhalte des SELFHTML-Wikis unterliegen der CC-BY-SA 3.0 (de) . Nähere Informationen finden Sie unter SELFHTML/Lizenzvereinbarungen .

  • Datenschutz
  • Über SELFHTML-Wiki

CC-BY-SA 3.0 (de)

Leon Hoffmann von codeCrowd

HTML-Tutorial für Anfänger (deutsch)

Abonniere den Kanal auf YouTube 💪

Das html-tutorial für anfänger auf deutsch.

Wenn du Programmieren lernen willst, muss HTML der erste Schritt sein. Denn HTML ist die Grundlage aller Websites und Apps. In dieser YouTube-Playlist: HTML-Tutorial Anfänger deutsch bekommst du ein erstes, grundlegendes Verständnis für das Coden von und die Arbeit mit HTML.

Dieser Artikel ist die Text-Variante der Videos, welche Teil des HTML-Kurses auf Udemy sind. In diesem Kurs lernst du in 60 Minuten alles was man als Web-Entwickler über HTML wissen muss.

Das HTML-Tutorial Vorwort

In diesem Kurs lernst du wirklich alles was man über HTML wissen muss und zwar sowohl in der Theorie als auch an konkreten Praxisbeispielen. Der Kurs besteht aus Videos und beinhaltet unzählige Code-Beispiele, die du später zum Download und zur freien Verfügung erhältst.

Während des Kurses erstellen wir gemeinsam ein Beispielprojekt, damit du deine neu erworbenen Fähigkeiten an unserer ersten gemeinsamen HTML-Website üben kannst.

HTML bildet das Fundament deiner Programmierkenntnisse und ist wirklich leicht zu erlernen. Nachdem du diesen Kurs durchgearbeitet hast, kannst du HTML vollständig und professionell anwenden. Der Kurs behandelt HTML vollumfassend. Solltest du während deiner Arbeit mit HTML später auf neue Themen stoßen, zum Beispiel, weil HTMl sich weiterentwickelt hat, wirst du in der Lage sein, dir diese Neuerungen problemlos autodidaktisch anzueignen, weil du ein grundlegendes Verständnis für die Funktionsweise von und die Arbeit mit HTML haben wirst.

Wie du das HTML-Tutorial am besten nutzt

In jeder Lektion bitte ich dich alle Aufgaben ebenfalls an deinem Computer umzusetzen, denn Coden lernt man am besten in der Praxis. Daher empfehle ich dir alle Zeilen code gemeinsam mit mir zu schreiben, also mitzuschreiben, wie du es noch aus der Schule kennst. Eine bekannte didaktische Methode ist es übrigens den Code handschriftlich, also auf Blatt und mit einem Stift, mitzuschreiben um ihn zu verinnerlichen.

Noch eine letzte Bitte bevor es losgeht

Der Zweck dieses Tutorials ist es, möglichst vielen Menschen die Grundlagen des Web-Programmierens beizubringen. du und dein Lernfortschritt stehen also im Vordergrund. Daher freue ich mich immer über Anregungen, Fragen und Vorschläge zur Verbesserung. Wenn du den Kursgekauft hast, nutze dazu einfach die Bewertungsfunktion der Platform. Andernfalls kommentiere gern auf YouTube oder hier im Blog.

Vielen Dank und viel Spaß und Erfolg mit diesem Kurs.

Definition: Was ist HTML?

HTML ist die Sprache des Internets und die Basis aller Websites und Apps. Die Abkürzung HTML steht für H yper t ext M arkup L anguage und ist streng genommen keine Programmiersprache, sonder eine Auszeichnungssprache, also eine Markup Language (Englisch für Auszeichnungssprache).

HTML legt die Struktur von Websites fest und definiert so, was eine Überschrift, ein Textabsatz oder ein Link ist.

Das ist eine Überschrift

Dies ist ein Textabsatz

Im Grunde genommen ist HTML nichts weiteres als eine Ansammlung von Tags. Tags bestehen meistens aus einem öffnenden und einem schließenden Tag. Dazwischen steht der Inhalt.

Die Tags definieren den Inhalt der zwischen Ihnen steht. Das Wort Tag stammt aus dem Englischen und steht für Etikett oder Schild. Und genauso funktioniert ein HTML-Tag auch. Es definiert/etikettiert Inhalte.

Wenn du dir nur die wichtigsten Tags merkst, kannst du HTML in 90% aller Anwendungsfälle lesen und schreiben.

HTML im Browser

Ein Browser stellt Websites dar. Er stellt aber die HTML-Tags nicht selbst dar, sondern nutzt diese Tags als Information dazu die einzelnen Inhalte dargestellt werden sollen. Zum Beispiel als Überschrift, Bild oder Textabsatz.

Die HTML-Tags sind also die Bausteine des World Wide Webs und definieren und strukturieren die Inhalte in einer Website.

So sieht ein HTML-Element für einen Textabsatz aus:

Er besteht aus 2 Tags. Im den Fall dem öffnenden <p>, dem schließenden </p> und dem Inhalt dazwischen. All dies zusammen, also die HTML-Tags und der Inhalt dazwischen, bilden ein HTML-Element.

Du wirst es kaum glauben, aber wenn du bis hier hin folgen konntest, hat du schon ein grundlegendes Verständnis dafür wie HTML funktioniert.

Zusammenfassung

  • HTML ist eine Auszeichnungssprache und fügt Inhalte in Websites ein und strukturiert diese damit.
  • Mit HTML definiert man zum Beispiel was eine Überschrift oder ein Textabsatz ist.
  • HTML besteht aus Tags.
  • Ein Tag umschließt den Inhalt und definiert ihn so.

Tools zum HTML programmieren

Nun richten wir deine Werkzeuge ein, damit du im Kurs mitarbeiten und später die richtigen Werkzeuge im Programmieralltag nutzen kannst.

Websites werden in Code-Editoren erstellt und von Browsern dargestellt.

Um Code zu bearbeiten kannst du einen einfachen Text-Editor verwenden, wie ihn jeder Computer vorinstalliert hat.

Besser geeignet, da hilfreicher, sind sogenannte Code-Editoren, wie Brackets , Atom oder Sublime Text .

Für dieses Tutorial verwenden wir ausschließlich kostenlose Tools. Auch im Programmieralltag wirst du nicht mehr brauchen, als die Werkzeuge, die ich dir nun zeige.

Code-Editor

Als Code-Editor für HTML-Anfänger empfehle ich den kostenlosen Code-Editor Brackets. Um diesen verwenden zu können, lade die Installationsdatei einfach auf der Brackets-Website (siehe Infobox ) herunter und führe die Installation durch.

Besonders hilfreich an Brackets ist, dass wir die Änderungen im HTML-Code direkt in der Live-Vorschau verfolgen können und diese sogar mit einem blauen Rahmen markiert werden. Das macht es einem HTML-Anfänger leichter, die Zusammenhänge zu verstehen.

Als Browser empfehle ich Google Chrome , welchen du ebenfalls kostenlos downloaden und installieren kannst.

Besonders hilfreich an Chrome ist der ausgesprochen gute Inspektor, den du per Rechtsklick und dann „Inspect/Untersuchen“ erreichst.

Hiermit lässt sich der HTML-Code jeder Website auslesen und Änderungen lassen sich direkt im Front End testen. Natürlich veränderst du den Quellcode einer Website damit nicht wirklich, sondern simulierst Änderungen im Code, um zu sehen, wie sich diese Änderungen auf der Website ausüben.

Das HTML-Grundgerüst

Als ersten Schritt auf dem Weg HTML zu lernen, legen wir am besten das HTML Grundgerüst an. Öffne deinen Code-Editor und lege eine neue Datei an. Unter Brackets gehst du dazu im Menü unter Datei -> Neu und speichere diese Datei unter einem sinnvollen Dateinamen. Vergiss beim Speichern nicht die Endung .html an den Dokumentnamen anzuschließen, damit du definierst, dass es sich um eine HTML-Datei handelt.

Um nun deine HTML-Datei zu vervollständigen, muss nur noch ein HTML-Grundgerüst in die Datei eingefügt werden. Wir schauen uns dieses Grundgerüst gleich noch einmal im Detail an. Zuerst aber kopieren wir es in unsere Datei:

Der sichtbare Teil der Website beginnt hier

Ich habe das HTML-Grundgerüst im obigen Beispiel ausführlich kommentiert, damit du die einzelnen Elemente besser verstehst. Du kannst diese Vorlage gern kopieren und für deine eigenen Projekte verwenden.

Den Code zu diesem Artikel findest du wie immer in der Infobox .

Die wichtigsten Elemente des HTML-Grundgerüsts

  • Als erstes fügen wir den Doctype HTML ein, der definiert, um welche HTML-Version es sich handelt. In unserem Fall HTML5.
  • Mit dem HTML-Tag definieren wir den Bereich in dem HTML geschrieben wird und schließen diesen am Ende der Datei wieder. Alles zwischen diesen HTML-Tags wird unser HTML-Code sein.
  • Der Head-Bereich ist der Kopfbereich der Website, welcher nicht sichtbar sein wird, sondern allgemeine Informationen zur Website beinhaltet. In diesem Head-Bereich kann mann zum Beispiel mit Meta-Tags weitere Informationen zum Kopfbereich hinzufügen.
  • Ein Title-Tag definiert den Title der Website, welcher zum Beispiel im Browser-Tag oder in den Google-Suchergebnissen angezeigt wird.
  • Nun beginnt mit dem Body-Tag der eigentliche Rumpf der Website, also der sichtbare Bereich, der in deinem Browser dargestellt wird.

HTML-Tags und deren Attribute

Was du bereits weißt:

  • HTML beschreibt die Struktur von Websites. Dies geschieht durch die HTML-Tags.
  • HTML fügt Inhalte in Websites ein und definiert diese Inhalte. Zum Beispiel als Überschrift, als Textabsatz oder Links Bilder und Videos und vieles mehr.

Nun schauen wir uns die HTML-Tags und deren Attribute genauer an.

Öffnende und schließende Tags

Wie du ja bereits weißt, besteht ein HTML-Element meist aus einem öffnendem und einem schließenden Tag sowie dem Inhalt dazwischen:

In den spitzen Klammern steht der Tag-Name wie h1, p oder a.

Tags definieren, also verändern, die Inhalt den die umschließen.

Die Tags und der Inhalt zusammen bilden ein HTML-Element. Der Aufbau eines HTML-Elements ist also: öffnendes Tag, Inhalt, schließendes Tag.

Alleinstehende Tags

Es gibt auch alleinstehende Tags. Wie zum Beispiel <br> (für Englisch: Break) also einen Zeilenumbruch.

Alleinstehende Tags brauchen keinen zweiten Tag. Diese Tags sind leer, also dazwischen steht kein Inhalt.

Verschachtelte Tags

HTML Tags können in andere HTML-Tags eingenistet (Englisch: Nested Tags), also verschachtelt werden.

Hier nisten wir ein alleinstehendes Tag für einen Zeilenumbruch <br> in einen Textabsatz <p> ein.

Dies haben wir schon in unseren obigen Code-Beispielen gesehen, zum Beispiel haben wir das <h1> Tag in das <body> eingenistet.

Die Attribute von Tags

Öffnende HTML-Tags können Attribute enthalten. Attribute geben dem Tags zusätzliche Informationen und sind folgendermaßen aufgebaut:

Im öffnenden Tag folgt zuerst der Attributname und nach einem Gleichheitszeichen der Attributwert in Anführungszeichen.

Wir kennen Attribute bereits aus unseren Code-Beispielen, nämlich beispielsweise aus dem HTML-Tag indem die Sprache der Website als „Deutsch“ gekennzeichnet wird.

Im öffnenden HTML-Tag steht also der Attributname „lang“. Nach dem Gleichheitszeichen folgt in Anführungszeichen der Attributwert „de“ für die deutsche Sprache.

Ebenfalls haben wir bereits in den Meta-Tags Attribute verwendet. Hier werden sogar gleich zwei Attribute in einem öffnenden HTML-Tag verwendet:

Hier ist ein weiteres Beispiel für ein HTML-Tag mit einem Attribut:

In diesem Fall wird ein Link-Tag also <a> verwendet. Im Attribut „href“ steht das Linkziel.

Die wichtigsten 10 HTML-Tags

Herzlichen Glückwunsch! Du hat schon einen großen Teil von HTML verstanden. Nun geht es vor allem noch darum, sich die HTML-Tags einzuprägen, um diese auch verwenden zu können.

Nun gibt es leider zu viele Tags, um sich alle direkt merken zu können aber keine Sorge, denn in der täglichen Arbeit eines Entwicklers ist Nachschlagen typische Praxis. Du kannst also immer wieder auf die diese Listen zurückgreifen, um die alle HTML-Tags und deren Attribute in Erinnerung zu rufen.

Allerdings wirst du in deiner täglichen Coding-Praxis garnicht alle HTML-Tags benötigen. Viele wirst du eventuell nie gebrauchen. Dafür wirst du aber einige wenige Tags immer wieder verwenden, wodurch du sie schnell auswendig kannst. Die nachfolgende Liste zeigt die 10 Tags, die ich am häufigsten in der täglichen Arbeit verwende.

  • <h1></h1> bis <h6></h6> h steht für Headline (Englisch für Überschrift). Es gibt 6 verschiedenen Überschriften. Diese sind hierarchisch geordnet, wobei h1 die wichtigste Überschrift darstellt. Die Überschriften sollten in einer logischen Reihenfolge verwendet werden. h1 sollte pro Seite nur einmal verwendet werden. Alle anderen Überschriften (also h2-h6) können beliebig oft verwendet werden. Es gibt Website-Developer die dazu raten nur h1-h3 zu verwenden.

Überschrift 2

Überschrift 3, überschrift 4, überschrift 5, überschrift 6.

Die Attribute die für diesen Tag verwendet werden können sind align="" mit den Werten: left, center, right, justify . Das bedeutet der Text (in dem Fall die Überschrift) ist entweder linksbündig, rechtsbündig, mittig oder als Blocksatz angeordnet.

Achtung: Das align="" Attribut wird in HTML5 nicht mehr unterstützt. Dennoch wirst du es häufig in Websites finden und daher muss es auch an dieser Stelle erwähnt werden.

Dieses Tag hat ebenfalls das align="" Attribut mit den selben werten wie die Überschriften (h1-h6).

Dies ist ein Textabsatz der im Browser rechtsbündig dargestellt wird.

Mögliche Werte des Attributes sind:

  • Eine vollständige URL, um auf andere Websites zu verlinken (Beispiel:<a href=“https://www.google.de/“>Website</a>)
  • Eine relative URL, um auf eine Unterseite oder Datei der eigenen Website zu verweisen (Beispiel: <a href=“/blog/“>Link auf der eigenen Website</a>)
  • Eine OnPage-Navigation (also eine Navigation die zu einem anderen Punkt auf der selben Seite springt (wie der Link zur Infobox ) (Beispiel: <a href=“#infobox“>OnPage-Link</a>). Dabei muss der Teil, zu dem der Link führen soll, mit einem id-Attribut gekennzeichnet sein, also z.B. <p id=“infobox“>Hier ist die Infobox</p>
  • Andere Protokolle, wie https:// (Website mit SSL-Zertifikat), ftp:// (Webserver), mailto: (E-Mail-Adresse) (Beispiel: <a href=“mailto:[email protected]“>E-Mail-Adresse</a>)
  • Skripte, wie ein JavaScript-Befehl (Beispiel: href=“javascript:alert(‚Hello‘);“)

Es gibt viele weitere Attribute für dieses Tag, wobei vor allem taget="" noch zu nennen ist. Durch taget="_self" wird der Link im selben Browser-Fenster geöffnet, wobei durch taget="_blank" der Link in einem neuen Browser-Fenster geöffnet wird.

Hier wird also ein Bild-Tag mit der Quelle des Servers (https://www.code-crowd.de/) sowie des entsprechenden Ordners (/blog/wp-content/themes/CodeCrowd-Blog/img/logo-programmieren-lernen.svg) auf dem Server und dem Bildnamen (logo-programmieren-lernen.svg) eingefügt. Als alt-Tag geben wir „CodeCrowd Logo“ an.

Weitere typische Bild-Attribute, die du bereits aus dem HTML-Tutorial kennst, sind: align="" , width="" und height="" .

In beiden Listen werden die einzelnen Listenelemente mit <li></li> eingefügt.

  • Dies ist das erste Listenelement der geordneten Liste
  • Dies ist das zweite Listenelement der geordneten Liste
  • Dies ist das dritte Listenelement der geordneten Liste
  • Dies ist das erste Listenelement der ungeordneten Liste
  • Dies ist das zweite Listenelement der ungeordneten Liste
  • Dies ist das dritte Listenelement der ungeordneten Liste

Häufig werden Navigations-Menüs auch als Listen eingefügt und dann mit CSS so verändert, dass keine Aufzählungszeichen verwendet werden und die Liste sich horizontal anordnet mit einem Abstand zwischen den Wörtern.

Ein Textabsatz mit einem Teil in Fettschrift .

Ein Textabsatz mit einem Teil in kursiver Schrift .

Ein Textabsatz mit einem Umbruch im Text und zwar hier. Ab hier geht der Text dann in einer neuen Zeile weiter.

Ein Textabsatz mit einer horizontalen Linie und zwar hier.

Das <div> Element wird als Container oder unsichtbarer Rahmen verwendet, um allen Elementen in diesem Rahmen/Container bestimmte Eigenschaften (Schriftfarbe, Größe, etc.) zuzuordnen.

Die häufigsten Attribute sind style="" (welches wir aus dem vorangegangenen Teil des HTML-Tutorial schon kennen) und class="" . Das class="" Attribut dient zur Identifizierung eines HTML-Elements und kann frei vergeben werden.

Ähnlich wie das class="" Attribut ist das id="" Attribut. Der einzige Unterschied ist, dass eine ID nur einmal pro Website-Projekt vergeben werden kann. Es ist also ein einmaliges Element, welches nur einmal oder nur auf diese eine Art dargestellt wird, wie z.B. wie ein Logo.

Hautsächlich werden Klassen und IDs dafür verwendet, HTML-Elemente mit CSS zu stylen oder mit JavaScript anzusprechen. Daher ist ein Verständnis von Klassen und IDs in diesem HTML-Tutorial nicht entscheidend, da dir diese Themen im Detail bei dem Studium von CSS und JavaScript wieder begegnen werden.

Hier eine beispielhafte Anwendung eines div-Containers mit einer Klasse, einer ID und einem style-Attribut (mit dem Wert „Schriftfarbe = grün“).

Ähnlich wie <div></div> Tags sind die <span></span> Tags.

span steht für so genanntes Inline-Element. Ein Inline-Element befindet sich immer innerhalb eines Textabschnitts (<p></p>). Ein Inline-Element startet nicht in einer neuen Zeile des Code-Editors und nimmt die geringste benötigte Breite im Browser ein.

Die häufigsten Attribute sind auch hier style="" und class="" .

Hier eine beispielhafte Anwendung eines span-Attributs mit einer Klasse, einer ID und einem style-Attribut (mit dem Wert „Schriftfarbe = grün“).

Dies ist ein Text und darin befindet sich ein Textteil mit einer Klasse und einer ID und einem anderen Style. Danach geht der Text normal weiter.

Dies war es zu den HTML-Grundlagen. Ich hoffe, du konntest HTML etwas besser verstehen. Wenn du Fragen hast, schreibe mir gern in den Kommentaren.

Wenn du tiefer in die Materie einteigen willst, ist hier der Link zum HTML Online Kurs: HTML in unter 1 Stunde .

P.S. Wenn dir der Artikel gefallen hat, abonniere doch die wöchentlichen Tutorials auf YouTube , den E-Mail-Newsletter oder Beteilige dich an der Diskussion auf Facebook .

YouTube Playlist: HTML-Tutorial Anfänger deutsch

Wikipedia zu Text-Editoren

Code-Editor Brackets

Code-Editor Atom

Code-Editor Sublime Text

Google Chrome Browser

Quellcode zum HTML-Grundgerüst

Zum vollständigen HTML-Kurs

Ähnliche Artikel

Css menü erstellen.

CSS Menü/Navigation erstellen Heute erstellen wir gemeinsam ein Menü in... Programmieren lernen

Basis HTML5 Vorlage/Template

Basis HTML5 Vorlage/Template Ich habe uns eine Vorlage für ein... Programmieren lernen

Video und Audio in HTML

Video und Audio in HTML In diesem Tutorial dreht sich... Programmieren lernen

  • Domain kaufen
  • Domain Check
  • Domain umziehen
  • Günstige Domain
  • Kostenlose Domain
  • SSL-Zertifikat kaufen
  • SSL-Zertifikat kostenlos
  • Homepage-Baukasten
  • Website erstellen
  • Website-Vorlagen
  • Website erstellen lassen
  • Onlineshop erstellen
  • WordPress Hosting
  • Windows Hosting
  • Eigene E-Mail-Domain
  • E-Mail-Hosting
  • Managed Nextcloud Hosting
  • HiDrive Cloud-Speicher
  • Microsoft 365 Business
  • Cloud Server
  • vServer (VPS)
  • Dedicated Server
  • Server mieten
  • Root Server mieten
  • IONOS Cloud
  • Firmennamen-Generator
  • Logo erstellen
  • Favicon Generator
  • Whois Domain Abfrage
  • Website Check
  • Wie ist meine IP?
  • Web-Entwicklung

HTML lernen: Die ersten Schritte mit der Standard-Websprache

HTML lernen: Die ersten Schritte mit der Standard-Websprache

Ende der 1980er Jahre entwickelte der britische Informatiker Tim Berners-Lee die Grundkomponenten des World Wide Webs. Als Angestellter der Europäischen Organisation für Kernforschung (CERN) widmete er sich zunächst einem internen Projekt, das den länderübergreifenden Austausch von Informationen im Netzwerk zwischen den Laboratorien des CERN, die sich teilweise auf französischem, teilweise auf schweizerischem Boden befanden, ermöglichen sollte. Als Basis für die geplante Netzwerk-Infrastruktur verwendete Berners-Lee Hypertext, eine Textform, die Informationen durch Querverweise (Hyperlinks) vermittelt und mithilfe von Auszeichnungssprachen geschrieben wird. Eine solche Auszeichnungssprache entwickelte er gleich mit, womit die Hypertext Markup Language , kurz HTML, geboren war.

Gemeinsam mit vielen anderen Bausteinen wie dem Transferprotokoll HTTP, dem URL sowie Browsern und Webservern bildet HTML auch knapp drei Jahrzehnte später noch die Grundlage der weltweiten, digitalen Vernetzung. Das macht das Erlernen dieser Websprache zum absoluten Pflichtprogramm jedes Entwicklers. Um Ihnen das Prinzip der Auszeichnungssprache näher zu bringen und den Einstieg zu erleichtern, haben wir in diesem HTML-Tutorial die wichtigsten Grundlagen und Tipps für Neulinge zusammengefasst.

Was ist HTML?

Einfache texteditoren, html-editoren, html-editoren mit echtbilddarstellung, die erste html-seite anlegen, textabsätze mithilfe des <p>-tags definieren, überschriften setzen: das <h>-tag, passagen und wörter kursiv oder fett hervorheben: <i>, <em>, <b> und <strong>, listen erstellen: passgenaue auflistungen mit den tags <ul>, <ol> und <li>, daten strukturiert mithilfe von tabellen präsentieren: <table>, <tr> und <td>, das html-basisgerüst: so sieht der grundaufbau von webseiten aus, so integrieren sie bilder, fotos und grafiken in ihre webseiten, interne links: so verknüpfen sie einzelne seiten ihres webauftritts, externe links: wie sie auf die inhalte anderer webpräsenzen verweisen, auf der zielgeraden – so stellen sie ihre html-seite online, css und javascript – warum html erst der anfang ist.

HTML zählt zu den maschinenlesbaren Sprachen, die auch als Computersprachen bezeichnet werden und die Interaktion zwischen Computern und Menschen ermöglichen. Sie ermöglicht es, die typischen Elemente eines textorientierten Dokuments wie Überschriften, Textabsätze, Listen, Tabellen oder Grafiken zu definieren und zu strukturieren, indem man diese entsprechend auszeichnet. Die visuelle Darstellung gelingt mithilfe eines beliebigen Webbrowsers, der die Codezeilen interpretiert und dadurch weiß, auf welche Art und Weise die einzelnen Elemente dargestellt werden sollen. Zusätzlich kann der HTML-Code Angaben in Form von Metainformationen , z. B. über den Autor, enthalten. Als Auszeichnungssprache nutzt man HTML heutzutage größtenteils nur noch in seiner beschreibenden Funktion, während man das Design mithilfe von Stylesheet-Sprachen wie CSS (Cascading Style Sheets) definiert. Zu den Anfängen des Webs war es jedoch durchaus üblich, visuelle Anpassungen mit HTML vorzunehmen.

HTML hat sich aus der heute weitgehend verschwundenen Metasprache SGML (Standard Generalized Markup Language) entwickelt, die ein anerkannter ISO-Standard (8879:1986) ist. Die Schreibweise der SGML-Elemente findet sich daher auch in HTML wieder. Für gewöhnlich werden sie durch ein Tag-Paar, bestehend aus dem Start-Tag <> und dem End-Tag </> markiert. Bei einigen Elementen ist das End-Tag nicht notwendig; darüber hinaus existieren einige inhaltsleere Elemente wie der Zeilenumbruch <br> . Neben den Tags erinnern beispielsweise die folgenden HTML-Eigenschaften an das Vorbild:

  • Dokumententyp-Deklaration : Angabe der verwendeten HTML-Version wie z. B. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
  • Verwendung von Zeichen-Entitäten : Nutzung von Entitäten für wiederkehrende Einheiten, beispielsweise &lt; für „<“ oder &amp; für „&“.
  • Kennzeichnung von Kommentaren : Kommentare fügt man in HTML nach dem Muster <!--Kommentar--> hinzu.
  • Attribute : Ergänzende Eigenschaften von Tags nach dem Muster <tag attribut="wert"> .

Welche Software benötigt man, um HTML-Code zu schreiben?

Am Anfang unseres HTML-Kurses steht die Frage zu klären, mit welcher Software sich HTML-Code eigentlich am besten schreiben lässt. Hierfür gibt es gar keine allgemeingültige Antwort. Denn einerseits sind die Anforderungen an das Programm verschwindend gering, sodass ein einfacher Text-Editor, wie er auf jedem Betriebssystem vorzufinden ist, vollkommen ausreicht. Andererseits bieten spezielle HTML-Anwendungen deutliche Vereinfachungen beim Codeschreiben. Wie gut eignen sich die verschiedenen Optionen dafür, HTML zu lernen?

Um einen sauberen HTML-Code zu schreiben, benötigen Sie keine anspruchsvolle Software. Ein einfacher Editor wie der Windows-Editor, der auch als Notepad bekannt ist, oder das Mac-Pendant TextEdit (im Klartext-Modus) genügen als Basis. Ihnen fehlt zwar die Möglichkeit, das Layout des Textes zu verändern, aber diese Aufgabe fällt ja auch den HTML-Formatierungen direkt zu. Textverarbeitungsprogramme wie Microsoft Word oder OpenOffice Writer können Sie theoretisch ebenfalls verwenden, von deren zusätzlichen Features profitieren Sie beim HTML-Lernen allerdings nicht. In einigen Fällen bremsen die überflüssigen Funktionen den Lernprozess sogar. Für die ersten Schritte beim Erwerb der HTML-Grundlagen machen Sie mit einem einfachen Texteditor, der auf jedem gängigen Betriebssystem standardmäßig vorinstalliert ist, also alles richtig.

Neben einfachen Editoren und komplexen Textverarbeitungsprogrammen existieren auch spezielle Editoren, die mit nützlichen Hilfestellungen aufwarten: So heben diese Anwendungen beispielsweise syntaktische Auszeichnungen farblich hervor und verschaffen Ihnen auf diese Weise einen hervorragenden Überblick über den geschriebenen Code. Zusätzlich werden etwaige Syntaxfehler aufgedeckt . Ein weiteres standardmäßiges Feature ist die Autovervollständigung, die Ihnen beim Schreiben der HTML-Tags Vorschläge zur Erweiterung bzw. Vervollständigung des Codes unterbreitet und z. B. das End-Tag automatisch ergänzt. Ferner verfügen HTML-Editoren oft über eine Vorschaufunktion, mit deren Hilfe Sie jederzeit per Knopfdruck das vorläufige Ergebnis Ihrer Codezeilen begutachten können. Ein sehr empfehlenswerter Editor für Windows-Nutzer ist das freie, GPL-lizenzierte Notepad++ . Eine kostenfreie Lösung für unixoide Systeme ist Vim .

Eine Editor-Option, die durchaus ihre Reize besitzt und in nahezu alle Homepage-Baukästen und Content-Management-Systeme integriert ist, sind HTML-Editoren mit Echtbilddarstellung, besser auch als WYSIWYG-Editoren bekannt. Das Akronym steht für den Grundgedanken dieser Programme „ W hat Y ou S ee I s W hat Y ou G et“ (dt. „Was du siehst, bekommst du auch“). Diese Editoren sind speziell für das Erzeugen von HTML-Code entwickelt worden, erfordern allerdings nur wenig Know-how über die Auszeichnungssprache. Wie in einem Textverarbeitungsprogramm strukturieren Sie Ihren Text mithilfe vorgefertigter Schaltflächen im Menü, ohne ein einziges HTML-Tag zu setzen. Diese generiert der WYSIWYG-Editor parallel im Hintergrund, was in der Praxis durchaus seine Vorzüge hat. Für das HTML-Lernen sind solche Editoren, zu denen beispielsweise BlueGriffon .

Im ersten Schritt des HTML-Tutorials erstellen Sie eine erste einfache Seite, die Sie mithilfe Ihres Browser anzeigen lassen können. Dabei handelt es sich allerdings noch nicht um eine valide HTML-Page, die nach bestimmten Standards aufgebaut ist, sondern um eine reine Testseite. Zur Erstellung dieser Seite sowie der weiteren HTML-Beispiele dieses Tutorials haben wir uns für den bereits erwähnten Editor Notepad++ entschieden. Nutzen Sie ein anderes Programm, kann sich die Vorgehensweise also leicht von den nachfolgenden Ausführungen unterscheiden.

Öffnen Sie zunächst den Editor und speichern Sie die neue Datei unter dem Namen test. Wählen Sie dabei „Hypertext Markup Language file“ als Dateiformat aus, damit der Browser später auch weiß, dass es sich um eine HTML-Seite handelt. Nutzen Sie einen einfachen Editor, müssen Sie alternativ den Dateityp „Alle Dateien“ auswählen (Codierung: UTF-8) und die HTML-Kennzeichnung direkt im Feld „Dateiname“ vornehmen, indem Sie die Datei unter dem Namen test.html speichern.

HTML-Testseite in Notepad++ speichern

Die erzeugte Datei sollte nun mit dem Icon Ihres Webbrowsers angezeigt werden. Per Doppelklick können Sie die Seite bereits öffnen, da bisher jedoch jeglicher Inhalt fehlt, sehen Sie nur eine weiße Seite. Ergänzen Sie also im nächsten Schritt den kleinen Beispieltext „Dies ist meine erste HTML-Seite!“, speichern das Dokument und öffnen die test.html -Datei erneut. Das Ergebnis sollte in etwa folgendermaßen aussehen:

Voransicht der ersten Webseite mit Textinhalt

HTML: Die Grundlagen der Textstrukturierung

Ihre erste Webseite wäre somit erfolgreich angelegt – und das, obwohl Sie bisher noch keinerlei HTML-Auszeichnungen vorgenommen haben. Spätestens wenn Sie nun aber auf dem gleichen Weg einen strukturierten Text mit Überschriften und Absätzen einfügen, werden Sie feststellen, dass Sie ohne Tags nicht weit kommen. Formatierungen, die Sie beispielweise mit einem Textverarbeitungsprogramm hinzugefügt haben, verschwinden in der Browseransicht : Umbrüche werden automatisch entfernt, mehrere Leerzeichen zusammengefasst etc. Die Lösung besteht darin, die verschiedenen Textbausteine mithilfe der passenden Strukturelemente als solche auszuzeichnen – also den Schritt in die HTML-Welt zu vollziehen.

Um Absätze zu setzen, benötigen Sie das <p> -Tag, das auf das englische Wort „paragraph“ (dt. Absatz) zurückzuführen ist. Das Start-Tag markiert den Beginn, das End-Tag beendet den jeweiligen Absatz. Innerhalb der beiden Markierungen befindet sich der auszuzeichnende Text. In allen HTML-Versionen (außer XHTML) ist das abschließende Tag zwar optional , allerdings zählt die Angabe zum guten Stil und ist insbesondere beim HTML-Lernen auch empfehlenswert. Sie können die Definition von Absätzen direkt in der erstellten Testseite ausprobieren, indem Sie einen weiteren Textabschnitt hinzufügen und beide mithilfe des Tags kennzeichnen:

Hinweis : Der manuell gesetzte Absatz dient einzig der besseren Übersichtlichkeit. Sie können beide <p> -Elemente aber auch hintereinander in eine einzige Zeile schreiben.

Vorschau der Testseite inklusive des neuen Textabschnitts

Ebenso wichtig für eine ordentliche Struktur Ihrer Website-Texte sind Überschriften. Mit HTML haben Sie nicht nur die Möglichkeit, diese allgemein zu kennzeichnen, sondern können eine eindeutige Hierarchie für alle eingesetzten Schlagzeilen festlegen. Dazu stehen die Tags <h1> bis <h6> zur Verfügung, wobei <h1> die Hauptüberschrift der jeweiligen Webseite darstellt. Diese sollten Sie, anders als <h2> und folgende, nur ein einziges Mal pro Seite verwenden. Es ist wichtig, die korrekte hierarchische Reihenfolge einzuhalten und nicht wahllos zwischen den verschiedenen Stufen zu springen, damit sowohl Leser als auch Suchmaschinen die Textstruktur anhand der Überschriften nachvollziehen können. Für unsere Testseite fügen wir exemplarisch eine Haupt- sowie eine erste Unterüberschrift hinzu:

Hinweis : Da es sich bei dem bisherigen HTML-Dokument um eine sehr vereinfachte Variante ohne Metainformationen handelt, zeigen einige Browser wie Firefox Umlaute nicht korrekt an. Zum Test sollten Sie daher zunächst auf Google Chrome zurückgreifen oder alternativ die HTML-Schreibweisen der Umlaute nutzen. Im vorliegenden Beispiel müssten Sie „ü“ durch &uuml; und „Ü“ durch &Uuml; ersetzen.

Bild der erstellten HTML-Seite mit zwei Absätzen, Haupt- und untergeordneter Überschrift

Zu den wichtigen HTML-Grundlagen zählt auch die Möglichkeit, einzelne Textausschnitte oder Wörter auf besondere Art und Weise hervorzuheben. So können Sie den Fokus des Lesers ganz gezielt auf inhaltlich oder funktionell wichtige Textelemente lenken und ihm helfen, diese zu erfassen. Mit den Tags <i> und <em> kursivieren Sie beispielsweise den ausgezeichneten Text, um Phrasen, technische Ausrücke oder Gedanken zu betonen. Kursive Schrift bremst den Lesefluss im Allgemeinen allerdings, weshalb Sie sparsam mit den beiden Tags umgehen sollten. Wichtiger sind die Elemente <b> und <strong> , die Wörter und Textausschnitte fett darstellen. Mit dem <b> -Tag sollten Sie bevorzugt solche Inhalte auszeichnen, auf die der Nutzer ganz bewusst aufmerksam gemacht werden soll. Im Gegensatz dazu ist die <strong> -Auszeichnung standardmäßig für inhaltlich wichtige Textelemente vorgesehen.

Zur Veranschaulichung der Markierungs-Tags erweitern wir unseren HTML-Code ein wenig:

Hinweis : Damit das HTML-Code-Beispiel in der hinzugefügten Textpassage nicht in Klartext umgewandelt wird, haben wir die spitzen Klammern „<“ und „>“ durch ihre HTML-Schreibweisen &lt; und &gt; ergänzt. Bedenken Sie außerdem auch hier wieder die Nutzung der HTML-Schreibweisen für Umlaute.

Darstellung der überarbeiteten Testseite inklusive hervorhebender Wörter und Passagen

Nicht nur beim Thema Einkaufen sind Listen eine große Hilfe: Bei der Gestaltung von Texten erweisen Sie sich als nützliches Mittel, um einzelne Absätze aufzulockern und auf diese Weise das Leseerlebnis zu optimieren. Mit HTML können Sie sowohl ungeordnete als auch geordnete Auflistungen mit Nummerierung für Ihr Webprojekt erstellen. Erstere erstellen Sie mithilfe des Tags <ul> (engl. „unordered list“ = ungeordnete Liste), während Sie die sortierte Variante mithilfe von <ol> (engl. „ordered list“ = geordnete Liste) kreieren. Die einzelnen Punkte der jeweiligen Auflistung definieren Sie mit dem Tag <li> , der nur in Kombination mit einem der beiden Listentypen funktioniert . Testen Sie die Funktionsweise der HTML-Listen mit folgendem Code:

Das Ergebnis sollte in etwa folgendermaßen aussehen:

Vorschau der ungeordneten HTML-Auflistung mit drei -Elementen

Wollen Sie aus der unsortierten Auflistung eine nummerierte Liste machen, tauschen Sie einfach das Listentyp-Tag aus:

Daraufhin erscheinen in der Browseransicht Zahlen anstelle der Bullet-Points:

Nummerierte HTML-Auflistung mit drei -Elementen

Jahrelang war es üblich, HTML-Tabellen nicht nur für die praktische Präsentation komplexer Daten , sondern auch für die Strukturierung des kompletten Layouts einer Webseite oder mehrspaltiger Texte zu nutzen. Mit dem Aufstieg von CSS trat diese Zusatzrolle aber zunehmend in den Hintergrund, sodass die Tabellen heute ausschließlich in ihrer standardmäßig angedachten Funktion – der Aufbereitung von Daten – zum Einsatz kommen. Dabei besteht jede Tabelle mindestens aus diesen drei Komponenten:

  • <table> : Das <table> -Start- bzw. End-Tag kennzeichnet den Beginn bzw. das Ende einer HTML-Tabelle. Mit dieser Auszeichnung allein kann der Browser allerdings nicht viel anfangen, denn das Tag gibt weder Aufschluss über die Anzahl der Zeilen noch über die Anzahl der Spalten.
  • <tr> : Mit dem Element <tr> (engl. „table row“ = Tabellenzeile) fügen Sie der Tabelle eine Zeile hinzu. Hinsichtlich der Anzahl besteht keinerlei Begrenzung.
  • <td> : Erst wenn Sie Spalten hinzufügen, haben Sie die Grundstruktur Ihrer Tabelle fertiggestellt. Das dazu notwendige Tag <td> (engl. „table data“ = Tabellendaten) ist logischerweise immer einem <tr> -Tag untergeordnet, denn es sollen ja eine bzw. mehrere Datenzellen innerhalb einer Zeile erzeugt werden. Der Inhalt eines Datenfeldes steht zwischen dem öffnenden <td> - und dem schließenden </td> -Element.

Um die etwas komplexe Struktur zu verstehen, legen wir nun eine erste, einfache HTML-Tabelle an, die lediglich aus einer Zeile und zwei Spalten besteht:

Die Vorschau des erstellten HTML-Codes erweckt den Anschein, dass sich eventuell ein Fehler eingeschlichen hat und die Tabelle nicht wie gewünscht funktioniert. Es ist weder zu erkennen, dass Sie zwei Spalten definiert haben, noch, dass es sich überhaupt um eine Tabelle handelt. Dafür gibt es jedoch eine einfache Erklärung: Standardmäßig haben die HTML-Tabellenzellen keine visuellen Umrandungen . Für dieses typische Kennzeichen von Tabellen müssen Sie das <table> -Tag mithilfe des Attributs border inklusive des Werts 1 erweitern:

Öffnen Sie das HTML-Dokument nun erneut in Ihrem Browser, sehen Sie das bestens vertraute Tabellenlayout.

Hinweis : HTML5 unterstützt das border -Attribut nicht mehr (für die Zellenumrandung ist nun einzig CSS zuständig).

Browseransicht der einfachen HTML-Tabelle mit einer Zeile und zwei Spalten

HTML bietet im Übrigen auch die Möglichkeit, Spaltenüberschriften hervorzuheben . Dazu ist es notwendig, die betreffende Spalte mit dem Tag <thead> zu umschließen und die <td> -Markierungen der einzelnen Datenzellen durch <th> -Tags zu ersetzen. Eine beispielhafte Tabelle mit vier Zeilen sowie drei Spalten inklusive Überschrift erzeugen Sie mithilfe des folgenden HTML-Codes:

Browseransicht der einfachen HTML-Tabelle mit drei Zeile und drei Spalten

In diesem Abschnitt unseres HTML-Tutorial geht es um den allgemeinen Aufbau einer Webseite. HTML-Dokumente enthalten nämlich nicht nur Text, Links und andere eingebundene Inhalte wie Bilder und Videos, sondern auch die bereits erwähnten Metainformationen , die dem Browser, aber auch den Crawlern von Suchmaschinen verraten, wie sie die Seiten lesen müssen. Wenn ein Besucher eine Webseite aufruft, sieht er einige dieser zusätzlichen Angaben gar nicht, andere nur in der Titelleiste des Browserfensters, im Tab, in der Chronik oder als Überschrift von Suchmaschineneinträgen.

Auf die notwendigen Mindestbestandteile reduziert, sieht der Basiscode einer HTML-Seite folgendermaßen aus:

Die Datei setzt sich also aus den drei Bereichen DOCTYPE , head und body zusammen, wobei die erste Komponente, bei der es sich um die Dokumententyp-Definition handelt, als einzige vor dem <html> -Tag stehen muss. Hierüber teilen Sie interpretierenden Anwendungen mit, an welchen Standard Sie sich bei der Erstellung des Dokumentes gehalten haben – in diesem Fall HTML5. Diesen Dokumententyp erkennt jeder Browser; zudem ermöglicht er sowohl die Nutzung aktueller HTML5- als auch älterer HTML-Codes, weshalb Sie ihn standardmäßig und insbesondere beim HTML-Lernen verwenden sollten.

Im folgenden <head> -Bereich notieren Sie die Kopfdaten Ihrer HTML-Datei . Dazu zählen beispielsweise die Zeichenkodierung, die der Browser nutzen soll ( meta charset ), die für Suchmaschinen relevante Meta-Description ( meta name="description" ) oder der Titel der Webseite ( title ), der im Browserkopf erscheint. Zusätzlich können Sie unzählige weitere Meta-Angaben machen, wobei selbst die in unserem Beispiel eingebundenen Informationen optional, zugunsten einer guten Suchmaschinenbewertung aber empfehlenswert sind. Eine Ausnahme bildet die <title> -Angabe, die neben der Dokumententyp-Definition das einzige Pflichtelement einer HTML-Seite darstellt. Im Kopf setzen Sie später außerdem auch den Verweis zu Ihrer CSS-Datei , in der das Design der Webseite geregelt ist. Der <body> -Abschnitt enthält all das, was am Ende im Browser des Nutzers angezeigt wird.

Hinweis : Die Tags für die HTML-Grundstruktur sind optional und können daher theoretisch weggelassen werden. In diesem Fall erzeugt der Browser die Tags <html> , <head> und <body> automatisch und ordnet ihnen die passenden Elemente zu. Es ist aber üblich, diese Angaben selbst zu machen. Zudem fördert die Aufgliederung die Lesbarkeit des Dokuments, was vor allem für HTML-Anfänger von Vorteil ist.

Texte sind unbestritten der wichtigste Bestandteil gewöhnlicher HTML-Seiten. Visuelle Reizpunkte in Form von Bildern, Fotos oder Grafiken haben allerdings einen großen Einfluss auf die User-Experience, weshalb diese ebenso unverzichtbar für einen gelungenen Webauftritt sind. Gängig ist die Nutzung folgender drei Formate, die von allen Browsern unterstützt werden:

  • JPG : Für Fotos oder fotoähnliche Grafiken mit starken Kontrasten und farblicher Vielfalt verwendet man für gewöhnlich das JPG-Format. Dieses kann über 16 Millionen Farben darstellen und Dateien stark komprimieren – wenngleich letzteres mit einem Qualitätsverlust verknüpft ist.
  • PNG : Grafiken und Logos speichern Sie am besten im PNG-Format, das 256 (PNG8) bis 16,7 Millionen Farben (PNG24) darstellen kann. Im Gegensatz zu JPG komprimiert PNG ohne Qualitätsverlust, dafür ist die Datei aber auch größer.
  • GIF : GIF-Dateien können nur 256 Farben abbilden, sind in der Webentwicklung aber trotzdem gefragt, denn mit ihnen lassen sich kleine Animationen, Navigationselemente oder simple Grafiken gut wiedergeben.

Ihnen fehlt noch ein Logo für Ihre Homepage? Mit dem IONOS Logo-Generator können Sie kostenlos und mit nur wenigen Klicks Ihr eigenes Logo erstellen !

Unabhängig vom Format binden Sie ein Bild mit dem <img> -Tag (engl. „image“ = Bild) in die gewünschte Webseite ein. Zusätzlich ist es notwendig, den Ablageort des Bildes anzugeben, denn ansonsten kann der Browser dieses nicht finden und logischerweise auch nicht anzeigen. Hierfür benötigen Sie das Attribut src (engl. „source“ = Quelle) sowie den relativen Pfadnamen der Bilddatei. Legen Sie hierfür einfach einen Unterordner mit dem Namen „Bilder“ im Projektordner Ihrer Website (der auch das HTML-Dokument enthält) an und speichern alle relevanten Bilder dort ab. Unsere HTML-Tutorial-Beispieldatei trägt den Dateinamen grafik1.png und liegt im genannten Ordner „Bilder“. Der Code zur einfachen Einbindung dieser Grafik sieht so aus:

Für Bilder existieren allerdings noch weitere Attribute, deren Einsatz aus guten Gründen empfehlenswert ist. Dabei handelt es sich zum einen um die Angabe der Breite ( width ) und Höhe ( height ) des Bildes. Dank dieser Werte kann der Browser beim Laden einen Platzhalter in der entsprechenden Größe platzieren, bis das eigentliche Bild komplett übertragen ist. Somit kann er parallel weitere Inhalte im Browser-Fenster darstellen, ohne dass der Ladeprozess der Bilddatei abgeschlossen sein muss – was wiederum die allgemeine Ladezeit der Website beschleunigt. Zum anderen gibt es das alt -Attribut, mit dem Sie einen Alternativtext für das Bild definieren. Diesen sollten Sie aus verschiedenen Gründen in Ihr HTML-Grundlagen-Repertoire aufnehmen, denn er …

  • trägt zur Barrierefreiheit der Seite bei, indem er sehbehinderten Nutzern oder bei Ladeschwierigkeiten der Bilddatei eine Alternative bietet.
  • hilft den Suchmaschinen -Crawlern das Bild einzuordnen und zählt ferner auch als zusätzlicher Content.
  • ist in der HTML-Spezifikation vorgeschrieben.

Um diese Attribute erweitert sieht der HTML-Code in etwa wie folgt aus:

Hinweis : Bei den hier verwendeten Werten für Breite ( 960 ) und Höhe ( 274 ) handelt es sich um die Originalmaße der Beispielgrafik. Der Browser errechnet die Größe standardmäßig automatisch in Pixeln.

Die eingebundene Beispielgrafik in der Browseransicht

Seiten und Inhalte miteinander verknüpfen – die wichtige Rolle von Hyperlinks

Hyperlinks, besser bekannt unter der Kurzform „Links“, sind der Hauptgrund für den unvergleichbaren Erfolg des World Wide Web. Ohne diese elektronischen Verweise, die den User auf eine andere Webseite führen oder eine spezielle Aktion wie beispielsweise einen Download starten, wäre ein Vernetzungsgrad, wie ihn das Web bietet, nicht möglich. Drei Typen von Links gilt es zu unterscheiden:

  • Interne Links : Interne Verlinkungen dienen der Strukturierung der kompletten Website und weisen den Besuchern den Weg. Hierbei können Sie verschiedene Strukturen realisieren. Bei einer linearen Struktur gelangt der User beispielsweise in einer bestimmten Reihenfolge von Seite zu Seite, während er bei einer Baumstruktur von einer Startseite aus zu diversen untergeordneten Seiten navigieren kann. Sie können auch interne Verlinkungen innerhalb einer einzelnen Seite setzen, mit deren Hilfe der Nutzer beispielsweise direkt vom Seitenende zum -anfang springen kann.
  • Externe Links : Als externe Links bezeichnet man solche Verlinkungen, die auf ein anderes Webprojekt verweisen. Diese Art von Verweisen nutzen Sie, um Ihren Besuchern einen Mehrwert zu bieten bzw. ein anderes Webangebot zu empfehlen. Sie sollten allerdings darauf achten, dass Sie nicht zu viele ausgehende Links auf einer Seite platzieren und dass der verlinkte Inhalt vertrauenswürdig ist. Andernfalls nehmen Sie eine negative Suchmaschinenbewertung in Kauf.
  • Andere Links : Nicht alle Links verweisen auf HTML-Dokumente. Je nach Linkziel kann das Klicken eines Verweises auch einen Download anstoßen, den Mail-Client öffnen oder den PDF-Betrachter aktivieren.

Während Sie zu einem späteren Zeitpunkt Ihres HTML-Studiums mit großer Wahrscheinlichkeit einmal in den Genuss kommen werden, eine komplexe Linkstruktur für Ihre Webpräsenz zu konzipieren und zu entwickeln, soll es im Rahmen dieses HTML-Crashkurses zunächst um eine einfache interne Verknüpfung zweier Seiten gehen. Dafür benötigen Sie neben der bereits erstellten test.html noch ein weiteres HTML-Dokument. Achten Sie darauf, dass Sie dieser zweiten Datei einen anderen Namen geben, z. B. zielseite.html , und dass sie sich im gleichen Verzeichnis wie die Testseite befindet.

Um einen Link zu erzeugen, benötigen Sie das HTML-Tag <a> (engl. „anchor“ = Anker), das jedoch nur für die Information, dass es sich um eine Verlinkung handelt, steht. Aus diesem Grund kann es nicht alleine stehen, zusätzlich braucht es das Attribut href ( H yper ref erenz), um das Linkziel anzugeben. Den Linktext, den der Browser standardmäßig blau und unterstrichen anzeigt, schreiben Sie zwischen das öffnende und das schließende <a> -Tag. Setzen Sie eine erste interne Verlinkung, indem Sie der test.html folgende Codezeile hinzufügen:

Haben Sie die Verlinkung korrekt gesetzt, sollte ein Klick darauf eine leere Seite öffnen, denn die zielseite.html ist bis dato ja noch unbearbeitet. Aus diesem Grund fügen wir in dieses Dokument im nächsten Schritt eine weitere interne Verlinkung ein, die per Klick zurück auf die Ursprungsseite führt:

Link zur gewünschten Zielseite

Hinweis : Liegt die zu verlinkende Seite nicht im Hauptverzeichnis, geben Sie einfach den entsprechenden Pfad des Unterverzeichnisses an – beispielsweise unterverzeichnis/zielseite.html . Zurück kämen Sie in diesem Fall mit <a href="https://www.ionos.de/digitalguide/../test.html"> .

Wenn Sie Ihren Seiten einen externen Link hinzufügen wollen, benötigen Sie weder ein anderes Tag als bei der internen Verlinkung, noch müssen Sie wissen, in welchem Verzeichnis die zu verlinkende Seite abgespeichert ist. Verweise auf fremde Inhalte setzen einzig die Angabe der kompletten URL voraus – diese enthält automatisch die benötigten Informationen. Da der verlinkte Content nicht auf Ihrem eigenen Webserver liegt, haben Sie keinerlei Einfluss auf die Funktionalität eines externen Links , weshalb Sie diese regelmäßig überprüfen sollten. Bemühen Sie sich um die Formulierung eines aussagekräftigen Linktextes, denn inhaltslose Platzhalter wie „hier“ geben dem Besucher keinerlei Information darüber, was hinter dem Link steckt. Probieren Sie die externe Verlinkung mit dem folgenden Code aus, der einen Verweis zu unserem Digital Guide erzeugt:

Mit einem gewöhnlichen externen Link führen Sie die Besucher immer auch von Ihrem eigenen Webprojekt weg. Theoretisch kann diese über einen Klick auf den „Zurück“-Button zwar wieder zu Ihnen zurückkehren, allerdings wird diese Option häufig nicht wahrgenommen. Praktischerweise gibt es eine Möglichkeit, mit der Sie die verlinkte Seite vom Browser automatisch in einem neuen, separaten Tab oder Fenster öffnen lassen können, ohne dass sich Ihre Seite dabei schließt: Das Attribut target beschreibt, wo ein verlinktes Dokument geöffnet werden soll. Mit dem Wert _blank spezifiziert sorgt sein Einsatz für das erwähnte Öffnen in einem neuen Fenster bzw. Tab. Der angepasste Code des Links sieht folgendermaßen aus:

Die Beispielseiten, die Sie in diesem HTML-Tutorial erstellt haben, können Sie auf Ihrem Rechner ganz normal öffnen. Wenn Sie nun aber die entsprechenden Seiten-URLs an andere Personen weiterleiten, um beispielsweise die Ergebnisse zu präsentieren, können diese damit nicht viel anfangen. Das liegt daran, dass die HTML-Dokumente und etwaige eingebundene Bilder etc. nur lokal auf Ihrem PC abgespeichert sind und deshalb nicht an die anfragenden Browser ausgeliefert werden können. Damit die Welt an Ihren Kreationen teilhaben kann, müssen Sie Ihr Webprojekt zunächst im Netz registrieren und für die geeignete Hosting-Struktur sorgen .

Es gilt also im ersten Schritt, eine passende Domain (Webadresse) für Ihren Auftritt zu finden und diese zu registrieren. Diese Anmeldung können Sie bei jedem Internetprovider vornehmen – auch wir bei IONOS bieten Ihnen eine entsprechende Option zur Domain-Registrierung an. Im zweiten Schritt geht es darum, die geeignete Basis für Ihr Webprojekt zu schaffen, indem Sie entweder einen eigenen Webserver einrichten und konfigurieren oder diesen bei einem Webhosting-Anbieter mieten. Als HTML-Anfänger empfehlen wir Ihnen letztere Option: So müssen Sie sich nicht mit der Auswahl, Einrichtung und Wartung der Server-Software auseinandersetzen und wählen einfach das gewünschte Webspace-Paket, das Ihnen den notwendigen Speicherplatz für die Dokumente Ihres Projektes gewährt.

Um Ihre Seiten im letzten Schritt auf den gemieteten Webspace hochzuladen, benötigen Sie für gewöhnlich ein FTP-Programm . Mithilfe dieser Client-Software können Sie Daten mit einem FTP-Server des Providers über das namensgebende File Transfer Protocol austauschen. Einige exzellente Vertreter von FTP-Programmen haben wir in umserem Ratgeber für Sie zusammengetragen. Detaillierte Anleitungen und Zugangsdaten für den Zugriff auf den FTP-Server erhalten Sie direkt vom jeweiligen Hosting-Anbieter.

Hinweis: Beim Hochladen auf den FTP-Server bleibt die Verzeichnisstruktur bestehen. Es lohnt sich also, von Beginn an Mühe in die Strukturierung zu investieren.

Im Laufe des Tutorials haben wir mehrfach betont, dass HTML zwar die Grundlage für jede Webseite bildet, die Aufgabe des Designs in der modernen Webentwicklung aber einer anderen Sprache zufällt: Welche Farben die einzelnen Elemente besitzen, welches Layout einer Seite zu Grunde liegt oder in welcher Schriftart und -größe Textpassagen, Überschriften und andere Textelemente erscheinen, definieren Sie heute ausschließlich mit der Stylesheet-Sprache Cascading Style Sheets (CSS) . Die strikte Trennung von Inhalt und Design erleichtert die Analyse und Pflege größerer Webprojekte enorm. Im Anschluss an das HTML-Lernen ist es folglich absolut empfehlenswert, sich mit CSS zu befassen, damit Sie Ihren erstellten HTML-Seiten auch das gewünschte Aussehen verleihen können.

Eine bis dato unerwähnt gebliebene Komponente der modernen Webseite ist JavaScript. Mithilfe der Skriptsprache erweitern Sie Ihre HTML-Seiten um dynamische Elemente , durch die Ihre Besucher mit der Seite interagieren können. Dabei kann es sich beispielsweise um Bildergalerien, dynamische Navigationsmenüs oder das Nachladen externer Daten handeln. Sowohl für JavaScript als auch für CSS finden Sie online zahlreiche fertige Code-Schnipsel , die Sie direkt in Ihre Dokumente (CSS und JavaScript) integrieren können, ohne eigene Skripte schreiben zu müssen. Zuvor sollten Sie jedoch ein grundlegendes Verständnis für die beiden Websprachen entwickelt haben, um diese Codezeilen korrekt einsetzen und sich bei auftretenden Problemen auf Fehlersuche begeben zu können.

Ähnliche Artikel

Einführung in HTML5

Einführung in HTML5

HTML5 ist die neue Kernsprache des Internets. Doch noch immer greifen Webentwickler auf veraltete Auszeichnungssprachen wie HTML 4.01 oder XHTML zurück. Diese erfordern im modernen Webseitenbetrieb oft eine Vielzahl externer Plug-ins, die sowohl die Kompatibilität als auch die Sicherheit einer Webseite gefährden. HTML5 hingegen ermöglicht eine direkte Integration von Multimedia-Elementen und…

Was bietet HTML 5.1 an Neuerungen?

Was bietet HTML 5.1 an Neuerungen?

Lange hat es gedauert, bis im Herbst 2014 das langersehnte HTML5 erschienen ist. Jetzt ist mit HTML 5.1 gleich das erste Update zum neuen Web-Standard fertig. Dabei gibt es zahlreiche Änderungen: Vor allem die leichtere Anpassung an ein responsives Webdesign steht wieder im Mittelpunkt. Doch sind nicht nur zahlreiche HTML-Neuerungen hinzugekommen: Einige Elemente und Attribute landeten auch auf…

CSS komprimieren und die Performance verbessern

CSS komprimieren und die Performance verbessern

Gestalterische Angaben, die direkt im HTML-Code stehen, sind eher selten. Farben, Schriftarten oder die Größe von HTML-Elementen werden heutzutage standardmäßig in Stylesheets wie CSS definiert. Wird die Website komplexer, steigen auch Umfang und Zahl der benötigten CSS-Dateien, was erhebliche Auswirkungen auf die Ladezeit haben kann. Dann hilft es, diese CSS zu komprimieren.

Compiler und Interpreter: Erklärung und Unterscheidung

Compiler und Interpreter: Erklärung und Unterscheidung

Im Laufe der Jahre sind Programmiersprachen immer stärker vereinfacht worden, um den Einstieg und die Anwendung so mühelos wie möglich zu gestalten. Ein zentraler Punkt ist dabei eine bestmögliche Lesbarkeit des mit der jeweiligen Sprache geschriebenen Codes. Damit dieser später auch von den Computerprozessoren gelesen werden kann, werden Compiler bzw. Interpreter für die Umwandlung in…

In Zeiten von Content-Management-Systemen und Homepage-Baukästen entsteht schnell der Eindruck, dass es reine Zeitverschwendung sei, HTML zu lernen. Doch spätestens, wenn eine Seite aus unerkenntlichen Gründen nicht mehr funktioniert oder wenn dynamische Elemente eingebaut werden sollen, kommen Sie ohne Kenntnisse in der Websprache nicht mehr weiter. In unserem ausführlichen HTML-Tutorial stellen…

NEU: Jetzt auch mit Künstlicher Intelligenz! Von Website bis Cloud – skalierbare Lösungen für jedes Projekt, immer inklusive persönlicher Beratung für Ihren Online-Erfolg.

html tutorial deutsch für anfänger

HTML lernen

Willkommen auf HTML-einfach.de, deinem Online-Lernportal für HTML, CSS und PHP seit 2005 – jährlich aktualisiert!

Ob du Anfänger oder Fortgeschrittener bist, hier findest du alles, was du brauchst, um deine eigene Webseite zu planen, erstellen und online zu stellen.

html tutorial deutsch für anfänger

HTML Anleitung und mehr…

Im Blog findest du nützliche und vor allem aktuelle Tutorials und Tipps!

Entdecke die Grundlagen von HTML und erfahre, wie du deine eigene Webseite von Grund auf erstellen kannst.

Lernen, wie du deine Webseite mit CSS gestalten und ansprechend darstellen kannst.

Hintergrund HTML EInfach

Über mich…

Seit über 18 Jahren ist das Internet mein zweites zu Hause. html-einfach.de habe ich 2008 ins Leben gerufen, damals noch unter einen anderen Domain und seit dem versuche ich mein Wissen möglichst leicht verständlich weiterzugeben. Mein Ziel sind möglichst praxisnahe Tutorials rund um das Thema HTML lernen und Webseiten erstellen .

Zusätzlich bieten findest du Dinge wie eine MySQL-Kurzanleitung an, Tipps zu CSS und JavaScript und einige PHP Anleitungen.

Ich würde mich freuen, wenn du den ein oder anderen Codeschnipsel direkt verwenden kannst und freue mich immer über einen Backlink :-)

Viel Erfolg beim HTML lernen und CSS lernen!

3 Wege zur eigenen Webseite

Selbst programmieren.

Mit HTML und CSS eine Webseite von Grund auf selbst gestalten und programmieren.

+ kostenlos + Ausbau deiner Fähigkeiten –  Lernen ist zeitintensiv

Mit einem CMS System

Schneller Start mit einem CMS System wie WordPress, TYPO3, Joomla und Co.

+ meist sehr günstig + schnelle Fortschritte –  Individualisierung teilweise begrenzt

Programmieren lassen

Die eigene Webseite von einem Profi programmieren lassen

+ professionell – kostenintensiv – abhängigkeit

Kennst du schon unser E-Book mit ausführlichen Anleitungen rund um HTML, CSS & Co?

html tutorial deutsch für anfänger

  • Benachrichtigungen verwalten
  • Lesezeichen verwalten
  • Gespeicherte Entwürfe verwalten
  • Dateianhänge verwalten
  • Profil ändern
  • Signatur ändern
  • Avatar ändern
  • Registrierungs-Details ändern
  • Persönliche Einstellungen
  • Nachrichten erstellen
  • Anzeigeoptionen ändern
  • Neue Nachricht erstellen
  • Posteingang
  • Gesendete Nachrichten
  • Regeln, Ordner & Einstellungen
  • Mitgliedschaften ändern
  • Gruppen verwalten
  • Freunde verwalten
  • Ignorierte Mitglieder verwalten

Übersetzung

Sven Albert-Pedersen

HTML lernen: das große Tutorial für Anfänger

Was charakterisiert HTML? Welche Vorteile bietet diese Programmiersprache und wo wird sie verwendet? Diese und weitere Fragen beantworten wir dir im folgenden Post.

Programmieren lernen

Html lernen, java lernen, javascript lernen, python lernen.

😩 Gelangweilt von den Udemy & YouTube-Tutorials?!

Lerne spielerisch zu programmieren und komme deiner gutbezahlten (und an der 🌴 liegenden) Traumkarriere einen Schritt weiter.

100% kostenlos registrieren · keine Kreditkarte notwendig

Bevor wir anfangen, HTML zu lernen, schauen wir uns erst einmal an, was HTML überhaupt ist!

HTML Lernen: Das große HTML5-Tutorial!

Was ist HTML?

HTML ist eine Abkürzung und steht für „Hypertext Markup Language“. Es ist eine sogenannte Auszeichnungsprache, mit der du einem Browser „sagen“ kannst, wie Inhalte strukturiert sind. Du kannst beispielsweise definieren, welche Bereiche zu welcher Kategorie gehören: Überschriften, Absätze, Aufzählungen oder Tabellen sind nur einige davon. HTML ist damit keine klassische Programmiersprache, sondern eine Sprache, mit der du beschreibst, welchen logischen Aufbau ein Inhalt hat.

Wie der Großteil der herkömmlichen Programmiersprachen wird auch HTML ständig weiterentwickelt. Im aktuellen Standard werden XHTML und die HTML-Version HTML 5 verwendet. Diese bieten insbesondere die Möglichkeit, Suchmaschinen-optimierte und User-orientierte Webseiten zu erstellen. Über sogenannte Tags kannst du bei HTML jeden einzelnen Bereich individuell gestalten. Zum Beispiel wird über das Tag " " spezifiziert, dass es sich um einen Absatz handeln soll, " " definiert den Titel. HTML Code besteht aus einer Vielzahl an diesen Elementen und bereits mit grundlegenden HTML-Kenntnissen hast du viele Gestaltungsmöglichkeiten.

Neben normalen Text können wir die HTML-Tags auch nutzen, um beispielsweise HTML-Tabellen zu erstellen.

Wofür wird HTML verwendet?

HTML ist das Format, in dem Webseiten geschrieben werden. Wenn du einfach nur Text in einer Datei speicherst und mit dem Browser öffnest, ist dieser unstrukturiert und dadurch schlecht lesbar. Mithilfe von HTML Elementen lässt sich dieser Text strukturieren und formatieren. Zur Strukturierung gehört unter anderem die Einteilung in Titel, Überschriften und Absätzen. Mit der Formatierung kannst du etwa Schriftart und -Schriftgröße anpassen. Ferner können mit HTML Tags auch Bilder, Videos oder Links im Text ergänzt und als solche erkannt werden.

Die Verwendung von HTML als Sprache zur Darstellung einer Webseite kommt nicht von irgendwo. Der Erfinder des World Wide Webs, der britische Informatiker Tim Berners-Lee, erfand im Zusammenhang mit dem WWW auch HTML. Spätestens damit wird deutlich, wie wichtig der Zusammenhang zwischen Webseiten und HTML ist.

Um Programmieren zu lernen, brauchst du bei codegree nur deine E-Mail angeben.

Sind HTML & CSS das Gleiche?

Den Inhalt einer Webseite kannst du optimal mit HTML Elementen darstellen. Eine HTML-Seite besteht aus einem Seitenkopf, auch Head genannt, und dem eigentlichen Inhalt, der Body heißt. Von allen Informationen, die du im Head festlegen kannst, wird lediglich der Titel auch auf einer Webseite abgebildet. Der Rest kann Details zum Autor, für die Suchmaschinen-Optimierung oder auch der Link zur Gestaltungs-Datei enthalten. In den Body kommt dann der eigentliche Inhalt der Seite. Das können Bilder, Artikel oder auch Videos sein.

Wenn du eine Website erstellst, kommt es selbstverständlich nicht nur auf die Inhalte und deren Strukturierung an, sondern auch auf die Gestaltung. Diese kann nicht zufriedenstellend mit HTML umgesetzt werden, sondern wird mit CSS implementiert. Bei CSS handelt es sich um Cascading Style Sheets, auf Deutsch „gestufte Gestaltungsbögen“. Mit dieser Sprache kannst du das gesamte Aussehen einer Webseite steuern. Dazu gehören etwa Layout, Typografie, Farben und das allgemeine Design. Beides sind zunächst unabhängige Dateien, die miteinander verknüpft werden, um sie zu verbinden. Hit Hilfe dieser beiden Sprachen kannst du mit ein wenig Erfahrung sehr umfangreiche aber auch elegante Websites erstellen.

Darum lohnt es sich die Grundlagen von HTML & CSS zu lernen.

Wer sollte HTML lernen?

Für jeden, der Webseiten programmieren oder betreuen will, ist es unerlässlich, sich mit HTML auseinanderzusetzen. Doch nicht nur für Webentwickler sind HTML Grundlagen sinnvoll. Wenn du zum Beispiel eine eigene Homepage hast und diese von einem Webadministrator betreut wird, kannst du mit Wissen über HTML selbst kleinere Aktualisierungen und Änderungen vornehmen. Auch als Student kann es nützlich sein, HTML zu verstehen. In einem Nebenjob kannst du so etwa Webseiten betreuen.

Doch auch für viele andere Berufsgruppen, wie Lehrer oder Tätigkeiten im Marketing, kann HTML eine gute Ergänzung sein. Lehrer können beispielsweise Unterrichtsmaterial oder Hausaufgaben über eine Webseite zur Verfügung stellen. Egal, ob du professioneller Webentwickler werden oder nur aus eigenem Interesse HTML lernen möchtest, es lohnt sich auf jeden Fall und lässt sich sehr vielfältig einsetzen. Auch für deinen aktuellen Beruf kann HTML eine gute Ergänzung sein und vielleicht auch dein Gehalt verbessern.

Darum solltest du HTML & CSS lernen!

Du fragst dich vielleicht, warum du HTML lernen sollst, wenn es doch bereits eine Vielzahl an Baukasten Systemen gibt, die schnell „fertige“ Webseiten erzeugen. Der Grund ist einfach: ohne HTML Kenntnisse, wirst du viele Zusammenhänge nicht verstehen. Insbesondere bei tiefergehenden Themen wie Suchmaschinen-Optimierung oder aufwendigen grafischen Details ist HTML Wissen unerlässlich. Dabei geht es weniger um das Lernen von HTML Befehlen und Elementen, sondern um Zusammenhänge zwischen dem Inhalt und dessen Gestaltung.

Das sind die besten Möglichkeiten, um HTML zu lernen (inkl. einzelner Schritte)!

Wie kann ich HTML lernen?

Du kannst HTML über verschiedene Wege lernen: Bücher, Präsenzkurse, Internetseiten und Online Tutorials sind nur einige Beispiele. Welches Vorgehen für dich am besten passt, kannst nur du selbst entscheiden, wir empfehlen dir ein Online Tutorial. Damit wird dir von erfahrenen Entwicklern eine gut strukturierte und logisch aufgebaute Lernumgebung bereitgestellt. Häufig wechseln sich Text, Videos und Übungsbeispiele ab, wodurch du auch ohne Vorkenntnisse schnell die ersten HTML-Grundlagen lernst. Ein großer Vorteil eines solchen Online-Kurses ist auch, dass du jederzeit auch später Dinge nachlesen kannst.

Das einfachste konkrete Vorgehen, um HTML zu lernen, ist eine Beispielseite zu erstellen und so die HTML-Elemente von Grund auf kennenzulernen. Damit lernst du automatisch die wichtigsten HTML-Tags und Elemente. Eine einfache Seite mit Beispielinhalten wirst du schnell aufbauen und auch komplexere und aufwändigere Seiten verstehst du dann vom Prinzip bereits.

Wie lernt man am besten HTML?

Wie bei jedem anderen Themenbereich auch, gibt es auch für HTML viele unterschiedliche Lernmöglichkeiten. Aus Erfahrung empfehlen wir allen Interessierten einen Online-Kurs zu besuchen. In diesen Kursen lernst du als Anfänger zunächst die Grundlagen und das nötige Hintergrund-Wissen. Später wird das vertieft und mithilfe von Beispielen und Übungen verinnerlicht.

Solltest du, auch nach Abschluss des Kurses, noch einmal etwas nachschauen wollen, so ist auch das kein Problem. Die unterschiedliche Gestaltung der Inhalte mit Text, Videos und Übungen bietet jedem Lerntyp eine gute Umgebung. Für Informationen oder Problemstellungen, die über das Tutorial hinausgehen, sind Internetforen häufig eine gute Anlaufstelle.

So lange dauert es wirklich, bist du HTML beherrschst!

Wie schwer ist es, HTML zu lernen?

Im Vergleich mit reinen Programmiersprachen ist HTML nicht so schwierig zu lernen. Die Grundlagen wirst du auch ohne Vorkenntnisse schnell verstehen und die wichtigsten HTML Elemente kennen. Für eine kompliziertere HTML-Seite wirst du schon etwas mehr Übung brauchen. Auch kommt es dann mehr darauf an, wie gut dein logisches Verständnis und wie schnell deine Auffassungsgabe ist. Das soll dich auf keinen Fall entmutigen, wenn du etwas länger brauchst, um neue Dinge zu lernen. Du wirst lediglich etwas mehr Zeit brauchen als andere. Solltest du bereits Erfahrung in der Programmierung haben, wird es dir nicht schwerfallen, HTML zu lernen.

Wie lange dauert es, HTML zu lernen?

Die Grundlagen von HTML wirst du deutlich schneller lernen, als bei anderen Programmiersprachen. Es kommt nicht auf Abläufe, Funktionsaufrufe und unterschiedliche Variablen an, sondern auf Text-Elemente und deren Formatierung. Viele dieser Elemente wirst du bereits aus Textverarbeitungs-Programmen kennen, wodurch du schon eine gute Basis hast. Auch als Anfänger wirst du in wenigen Stunden eine erste HTML-Datei mit allen wesentlichen Elementen erzeugen und strukturieren können.

Dadurch, dass du keine extra Software brauchst, sondern lediglich ein Internet-Browser und ein Texteditor genügen, kannst du im Grunde sofort loslegen. Es braucht auch keinen eigenen Übersetzer, wie bei der herkömmlichen Programmierung. Es genügt, wenn du eine HTML-Datei speicherst und dann mit dem Browser öffnest, um das Ergebnis deiner Arbeit als Seite zu sehen.

Unser großes HTML-Tutorial: die große Sammlung.

Das große HTML Tutorial: die codegree Bibliothek

Um dir das HTML & CSS lernen noch weitaus einfacher zu gestalten, haben wir hier alle relevanten Beiträge von uns zu diesem Thema zusammengefasst!

  • CSS background-color: Hintergrundfarben ändern
  • CSS Kommentar

Fazit & Häufig gestellte Fragen zum Thema HTML, CSS & Web-Entwicklung

Zusammenfassung: Erfolgreich HTML & CSS lernen

Für jeden, der Webseiten programmieren oder betreuen will, ist es unerlässlich, sich mit HTML auseinanderzusetzen. Doch nicht nur für Webentwickler sind HTML Grundlagen sinnvoll. Wenn du etwa eine eigene Homepage hast und diese von einem Webadministrator betreut wird, kannst du mit Wissen über HTML selbst kleinere Aktualisierungen und Änderungen vornehmen. Auch als Student kann es nützlich sein, HTML zu verstehen. In einem Nebenjob kannst du so beispielsweise Webseiten betreuen.

Doch auch für viele andere Berufsgruppen, wie Lehrer oder Tätigkeiten im Marketing, kann HTML eine gute Ergänzung sein. Lehrer können etwa Unterrichtsmaterial oder Hausaufgaben über eine Webseite zur Verfügung stellen. Egal, ob du professioneller Webentwickler werden oder nur aus eigenem Interesse HTML lernen möchtest, es lohnt sich auf jeden Fall und lässt sich sehr vielfältig einsetzen. Auch für deinen aktuellen Beruf kann HTML eine gute Ergänzung sein und vielleicht auch dein Gehalt verbessern.

Häufig gestellte Fragen

Wie schnell kann man html lernen.

Durch seine Einfachheit kannst du HTML Grundlagen bereits in wenigen Stunden lernen. Eine erste HTML Seite, die die elementaren HTML Elemente umfasst und Informationen und Inhalte im Internet darstellen kann, ist in dieser Zeit auch möglich. Für aufwändigere Projekte und eine umfangreichere Webseitenerstellung wirst du etwas mehr Zeit brauchen. Es gibt aber viele HTML Tutorials, die dir den Anfang erleichtern.

Wie lange braucht man, um HTML zu lernen?

Wie bereits angedeutet, ist es im Prinzip möglich, schnell ersten HTML Code zu entwickeln. Ein HTML Tutorial bietet vielen Interessierten eine gute Möglichkeit strukturiert HTML zu lernen. Dabei werden zunächst Grundlagen behandelt und du wirst nicht von irrelevanten Informationen abgelenkt, die für Neulinge noch nicht wichtig sind. Auch wenn dir ein Online Kurs im ersten Blick sehr umfangreich und lange vorkommt, so bietet dieser neben den reinen Lernunterlagen ebenfalls detaillierte Übungsmöglichkeiten. Damit kannst du dir schnell eine gute Basis bilden und dann darauf aufbauen.

Wie kann man in HTML programmieren?

Alle HTML Dateien bestehen aus HTML Elementen, sogenannte HTML Tags. Diese definieren unter anderem den Titel, Überschriften und einzelne Abschnitte sowie Links, Bilder oder Videos. Zu Beginn solltest du dir den Aufbau der HTML-Seite überlegen und die jeweiligen Inhalte. Unter Verwendung von Titel Tag, Body Tag oder auch Link Tag, kannst du dann die jeweiligen Bereiche bestimmen. In einem einzelnen HTML Tag können über Meta Tags einfache Formatierungsänderungen vorgenommen werden. Für aufwändigere und umfangreichere Formatierungen solltest du aber CSS verwenden.

Was kann man alles in HTML machen?

Das Hauptanwendungsgebiet von HTML Code sind Websites. Diese können Bilder, Texte, Videos oder auch andere Elemente enthalten. Mithilfe von HTML kannst du diese strukturieren und definieren und ohne zusätzliche Konvertierung oder Anpassung in allen Browsern darstellen. Es gibt verschiedene Lösungen, wie du deinen Inhalt darstellen und grundlegende Formatierungen vornehmen kannst. Ferner brauchst du für das Verständnis von Websites im Allgemeinen und dem Zusammenspiel von Inhalt und grafischer Darstellung HTML Wissen. Auch ist es eine gute Grundlage, um XML oder auch JavaScript zu lernen.

Was braucht man, um HTML zu Programmieren?

Im Gegensatz zu herkömmlichen Programmiersprachen brauchst du für HTML keine Compiler oder Interpreter. Ein einfacher Texteditor und ein Browser sind ausreichend. Viele Texteditoren beinhalten standardmäßig auch einen HTML-Editor, der prüft, ob die Elemente richtig aufgebaut sind. Das HTML Dokument kannst du dann in einem Browser deiner Wahl öffnen und ansehen. Damit ist die Anpassung nach deinen Vorstellungen schnell und einfach und der Spaß an der Programmierung bleibt.

Dr.-Ing. Soner Emec - Mitgründer von codegree

Dr.-Ing. Soner Emec

Mitgründer von codegree

Lerne das, was du wirklich brauchst.

Im Gegensatz zu der Abendschule oder der alteingesessenen Uni lernst du bei codegree die Sprachen & Pakete, die wirklich im Jobmarkt gesucht werden.

100% kostenlos registrieren · keine Zahlungsdaten notwendig

Mit unserem Hobby Tier können Sie Ihre Anwendung schnell bereitstellen und skalieren, wenn Sie wachsen.

Der beste Weg, um HTML kostenlos zu lernen (und warum du es tun solltest)

Der beste Weg, um HTML kostenlos zu lernen (und warum du es tun solltest)

Es ist nicht immer einfach, deine Ideen zum Leben zu erwecken.

Du hast vielleicht eine perfekte Vision, aber es ist schwierig, sie mit deinem Entwickler zu teilen. Die Ideen könnten in der Übersetzung verloren gehen und deine Webseite könnte das Ziel verfehlen.

Noch schlimmer ist es, wenn du kurzfristig Änderungen brauchst und keine Zeit hast, dich vor dem Start noch einmal mit deinem Entwickler zu besprechen.

Deshalb ist es so wichtig, HTML zu lernen. Mit den richtigen HTML-Kenntnissen und -Fähigkeiten kannst du eine Webseite fachgerecht erstellen und bearbeiten, um deine Visionen zu verwirklichen.

In diesem Beitrag erfährst du, was du tun musst, um HTML zu lernen und warum du es unbedingt in deinem Werkzeugkasten haben solltest.

Was ist HTML?

HTML steht für H yper T ext M arkup L anguage. Es ist die Sprache, die verwendet wird, um Dokumente und verschiedene Kreationen in einem Standardbrowser anzuzeigen.

Es wird von Unternehmen auf der ganzen Welt verwendet, um mobile Apps, Software und Webseiten zu betreiben – fast 92,8% aller Webseiten.

Wenn du HTML lernst, eröffnen sich dir und deinem Unternehmen unzählige Möglichkeiten. Wenn du die Grundlagen von HTML verstehst, kannst du Webseiten programmieren und Skripte anpassen .

Auf den ersten Blick mag das Schreiben in HTML kompliziert erscheinen. Sieh dir die Zeilen des HTML-Codes an, die in diesem HTML-Editor geschrieben werden:

HTML ist eine einzigartige Programmiersprache, die fortgeschrittene Kenntnisse erfordert.

Im Moment mag es für dich noch keinen Sinn ergeben, aber wenn du einen HTML-Kurs besuchst, wirst du es schon bald verstehen.

Wenn du die erforderliche Struktur von HTML lernst und verstehst, wirst du dich im Handumdrehen an HTML-Abkürzungen erinnern können.

Im obigen Beispiel siehst du, dass der Code für eine HTML-Seite geschrieben wurde und eine Überschrift, einen Titel und einen Textkörper enthält. Die Tags innerhalb der Klammern geben dem Dokument eine Struktur, während der eigentliche Inhalt zwischen den Klammern eingefügt werden kann.

Die Tags und der Inhalt werden zusammen als ein Element bezeichnet. Der erste Schritt zum Verständnis von HTML besteht darin, die am häufigsten verwendeten Tags und ihre Funktionen zu kennen.

Der <p> -Tag steht zum Beispiel für einen Absatz. Füge <p> hinzu, um einen neuen Absatz zu beginnen, und beginne dann mit der Eingabe deines Inhalts wie folgt:

Zu verstehen, wie verschiedene Tags Elemente bilden, ist ein wichtiger Schritt beim Erlernen von HTML.

Alle öffnenden Tags brauchen einen passenden schließenden Tag. Du kannst schließende Tags mit einem Backslash vor dem Tag schreiben. Um zum Beispiel einen Absatz zu beenden, würdest du </p> nach dem Inhalt einfügen.

Das ist nur ein Beispiel für ein Tag. Es gibt noch Hunderte anderer Tags, mit denen du deine Projekte dynamischer gestalten kannst. Die Reihenfolge und die Art und Weise, wie du die Tags zusammensetzt, bestimmen die Struktur und den Stil deiner Webseite oder deines Assets.

Einige der beliebtesten Tags sind:

  • <H1> – Textgröße der ersten Überschrift
  • <b> – Fettdruck des Textes
  • <i> – den Text kursiv setzen
  • <a href=> – Hinzufügen eines Links zum Dokument
  • <font size="+3"> – Vergrößert die Schrift auf eine bestimmte Größe

Sobald du mit dem Studium von HTML beginnst, werden dir diese Tags zur zweiten Natur werden. Du wirst in der Lage sein, dich genau daran zu erinnern, welchen du brauchst, ohne nachschlagen zu müssen.

Das ist der Grund, warum Programmierer/innen beim Schreiben von Code so schnell vorankommen. Sie kennen die Tags und wissen, wie sie sie zusammenfügen müssen, um den dynamischen HTML-Code zu erstellen, den sie vor Augen haben.

Vielleicht denkst du jetzt: „Könnte ich nicht einfach jemanden beauftragen, meine Webseite für mich zu programmieren?“ Die Antwort ist zwar ja, aber es gibt trotzdem viele Gründe, warum du HTML lernen solltest.

Sehen wir uns ein paar der wichtigsten Gründe an, warum es sich lohnt, deine Zeit in HTML zu investieren.

Warum du HTML lernen solltest

Um es einfach auszudrücken: HTML ist die Grundlage für die meisten Webseiten, mit denen du jeden Tag zu tun hast. Sogar diese Webseite selbst ist ein HTML-Dokument.

Es ist im Internet so weit verbreitet, dass es sinnvoll ist, wenn du zumindest die Grundlagen der HTML-Struktur kennst. Du weißt nie, wann du es brauchen wirst.

Wenn du es kennst, wirst du zu einem noch versierteren Geschäftsmann, Vermarkter, Produktentwickler und Designer.

Es gibt so viele Dinge, die du tun kannst, wenn du HTML verstehst. Ein solides HTML-Grundlagenwissen wird dich von anderen Gründern, Mitarbeitern und Konkurrenten abheben – von der Erstellung bis zur Bearbeitung.

Wenn du die Grundlagen von HTML verstehst, kannst du:

  • Erstelle benutzerdefinierte Webseiten, die du selbst programmierst
  • Hostet Assets auf Webseiten
  • Webseiten inspizieren und wissen, wie sie aufgebaut sind
  • Programmiere andere Assets, einschließlich Basissoftware, Apps und mehr
  • Verwalte Änderungen an deiner Webseite, ohne dass du einen Entwickler brauchst

Die Entscheidung, HTML zu lernen, kann sich auf lange Sicht sogar auszahlen, da die Nutzung von HTML immer weiter zunimmt.

Schau dir zum Beispiel diese Grafik an, um zu sehen, wie die Nutzung von HTML im Laufe der Jahre zugenommen hat, während XHTML, eine ältere Auszeichnungssprache, zurückgegangen ist:

HTML- und XHTML-Sprachgebrauchstabelle

Mit einem soliden Verständnis von HTML kannst du dich als konkurrenzfähiger Kandidat für fast jede Stelle positionieren. Wenn du selbst Unternehmer bist, kannst du diese Fähigkeiten nutzen, um dein Geschäft zu verbessern.

Wer muss HTML lernen?

Wenn du auf dieser Seite gelandet bist, bist du wahrscheinlich ein hervorragender Kandidat, um HTML zu lernen – und auch jemand, der davon profitieren wird.

Bevor du zögerst, solltest du wissen, dass dein Alter und dein Kenntnisstand keine Rolle spielen. Jeder, vom Gründer bis zum Praktikanten, kann davon profitieren, HTML zu lernen.

Nicht viele Menschen haben Erfahrung mit HTML, also ist es in Ordnung, wenn du ganz von vorne anfängst. Lass dich von der Begeisterung anstecken, etwas Neues zu lernen, und lass dich von deiner Neugier anstecken.

Wenn du HTML kennst, eröffnet sich dir eine neue Welt. Du kannst deine Ideen zum Leben erwecken, indem du responsive Webseiten, Anwendungen und vieles mehr erstellst.

HTML hilft Menschen in einer Vielzahl von beruflichen Funktionen:

  • Vermarkter – um zu wissen, wie man Änderungen an einer Webseite vornimmt
  • Produktentwicklung – um interaktive Renderings eines Produkts zu programmieren
  • Kundenservice – um bei der Suche nach Bestellungen zu helfen und benutzerdefinierte Nachrichten zu codieren
  • Designer – sie können ihre Kreationen im Internet hosten und wissen, wie sie dargestellt werden
  • Vertriebsmitarbeiter – um Datenfilter für potenzielle Kunden zu automatisieren, Kaltakquise-E-Mails zu versenden usw.
  • Gründer / innen – um Änderungen an ihrem Produkt oder ihrer Webseite vorzunehmen und ihre Visionen für HTML-angereicherte Assets auf konkretere Weise zu teilen

Wie du siehst, bringt das Erlernen von HTML viele Vorteile mit sich, und das Wissen kann sich auf viele verschiedene Geschäftsbereiche auswirken.

Willst du deinen Arbeitsalltag verändern? Erwäge, HTML als eine neue Fähigkeit zu erlernen, die du deinem Unternehmen anbieten kannst.

Es gibt viele Jobs , die du bekommen kannst, wenn du HTML verstehst.

Welche Jobs kannst du bekommen, wenn du HTML lernst?

Wenn du HTML lernst, kannst du dich für fast jedes Unternehmen einmalig wertvoll machen.

Machen wir uns nichts vor: Jemanden zu haben, der auf deiner Webseite Feuer löschen kann, ist für jedes Unternehmen vonnöten.

Du wirst nicht über Nacht zum Softwareentwickler, aber wenn du HTML lernst, bist du auf dem richtigen Weg dazu.

HTML-Kenntnisse sind eine spezielle Fähigkeit, die von Arbeitgebern auf der ganzen Welt nachgefragt wird. Softwareentwickler/innen sind einer der häufigsten Berufe, in denen HTML zum Einsatz kommt.

Der Bedarf an Softwareentwicklern ist in den letzten Jahren stetig gewachsen. Es wird geschätzt, dass bis zum Jahr 2024 28,7 Millionen Softwareentwickler/innen benötigt werden:

Die Nachfrage nach Softwareentwicklern wird in den nächsten Jahren weiter steigen.

Es gibt so viele verschiedene Softwareentwickler/innen, die du werden kannst, wenn du HTML lernst. Mit HTML-Kenntnissen kannst du die folgenden Jobs bekommen:

  • Frontend – Entwickler – programmiert den Teil der Webseite, mit dem der Benutzer interagiert
  • Backend – Entwickler – programmiert das Content Management System (CMS), in das der Content Manager die Inhalte eingibt, damit sie im Frontend erscheinen
  • Full Stack Developer – programmiert sowohl das Frontend als auch das Backend der Webseite

Du bist nicht daran interessiert, Webentwickler zu werden? Mach dir keine Sorgen. Es gibt viele andere Berufe, die von deinen HTML-Kenntnissen profitieren werden.

HTML-Kenntnisse machen dich zu einem vielversprechenden Kandidaten für den Arbeitsmarkt. Du wirst natürlich verschiedene Möglichkeiten finden, deine Fähigkeiten in verschiedenen Abteilungen deines Unternehmens einzusetzen.

Selbst ein leichtes Grundwissen in HTML kann für jedes Unternehmen ein Gewinn sein. Du wirst wissen, wovon die Leute reden und wie du technische Ideen den Teammitgliedern erklären kannst.

Marketing, Business Intelligence und Produktentwicklung können alle von HTML profitieren. Hier sind einige der Jobs, die du in jedem dieser Bereiche bekommen kannst:

  • E-Mail Marketing Manager – du kannst HTML-angereicherte E-Mails erstellen , die für den Endkunden optisch ansprechender sind
  • Marketing Operations Manager – HTML wird oft benötigt, um Integrationen hinzuzufügen und die sichere Weitergabe von Kundendaten zu gewährleisten
  • Data Science/SQL-Administrator – du kannst HTML-Skripte ausführen, um große Datenmengen und Modelle zusammenzufassen
  • Business Intelligence Manager – du kannst HTML-Module verwenden, um Trends und Erkenntnisse in deinen Kundendaten zu entdecken
  • Produktmanager/in – du kannst HTML nutzen, um neue Produkte zu entwickeln, zu testen und zu programmieren

Wenn diese Berufe interessant klingen, solltest du dir die Zeit nehmen, um HTML zu lernen. Aber täusche dich nicht: HTML zu lernen kann eine Herausforderung sein.

Vielleicht verstehst du es nicht auf Anhieb. Stattdessen musst du vielleicht daran arbeiten, um sicherzustellen, dass du jede Komponente der neuen Sprache, die du lernst, kennst.

Aber wie schwer ist es eigentlich, ein vernünftiges Verständnis von HTML zu entwickeln? Schauen wir uns an, was neue Schüler/innen erwarten sollten.

Wie schwer ist es, HTML zu lernen?

Das Erlernen von HTML erfordert Übung, Übung und noch mehr Übung, genau wie jede neue Fähigkeit.

Du solltest an HTML genauso herangehen wie an das Erlernen einer neuen Sprache. Mach dir bewusst, dass du ohne Vorkenntnisse beginnst. Das kann selbst für die erfahrensten Arbeitnehmer/innen demütigend sein.

Sobald du dir jedoch bewusst machst, dass du nichts über diese neue Sprache weißt, kannst du dich darauf einlassen und entdecken, worum es wirklich geht.

Je mehr du lernst, desto klarer wird dir HTML, und du kannst jede Lektion, die sich aufeinander aufbaut, weiter ausbauen.

Schon bald wirst du in der Lage sein, komplexe Elemente zusammenzufügen und visuell beeindruckende HTML-Seiten und -Anwendungen zu erstellen.

Wie lange dauert es, HTML zu lernen?

Der Prozess kann eine Weile dauern. Wenn es einfach wäre, würde jeder HTML verstehen.

Es ist wirklich eine spezielle Fähigkeit, für die du dir die Zeit nehmen musst, um sicherzustellen, dass du alles langsam verstehst.

Es gibt abgekürzte Kurse, die dir die Grundlagen von HTML in nur ein paar Tagen oder einem Monat beibringen können. Allerdings wirst du nicht über Nacht zum Softwareentwickler.

Ein gründliches Verständnis von HTML kann Monate oder Jahre dauern, bis du alles weißt, was du darüber wissen musst.

Du fragst dich, wie du anfangen kannst? Schauen wir uns den besten Weg an, HTML zu lernen.

Der beste Weg, HTML zu lernen

Der beste Weg, HTML zu lernen, ist angeleitetes Üben. Das kann in einem Bootcamp (persönlich oder online) oder mit geführten Modulen geschehen.

Ein Modul bietet eine Mischung aus Videounterricht, Vorlesungen und angeleiteten Übungen. Manche haben sogar einen Test, den du am Ende jeder Lektion machst.

Module sind praktisch, denn sie ermöglichen es den Lernenden, in ihrem eigenen Tempo zu lernen und den Unterricht praktisch zu gestalten.

Hier ist ein Beispiel für ein Modul in Aktion:

Mit HTML-Modulen kannst du deine Arbeit selbst überprüfen, um sicherzustellen, dass du auf dem richtigen Weg bist.

Idealerweise loggst du dich in ein Modul ein, lernst eine bestimmte Lektion über HTML und machst dann eine Übungsaufgabe, um deine neu erworbenen Fähigkeiten zu testen.

Die Lektionen sollten mit der Zeit aufeinander aufbauen.

Du solltest darauf achten, dass das Medium, in dem du lernst, Anwendungsfragen anbietet, um deine Fähigkeiten zu testen.

Es wird dir helfen, die Konzepte und die Sprache zu verstehen, die du lernst.

Da du nun weißt, wie und warum du HTML lernen solltest , werfen wir einen Blick auf einige der besten HTML-Programme, die du kostenlos nutzen kannst.

Wie du HTML kostenlos lernst

Der wichtigste erste Schritt auf deinem Weg zum HTML-Lernen ist die Auswahl des richtigen Programms, das für dich geeignet ist.

Es gibt so viele verschiedene Programme auf dem Markt. Du solltest das Programm finden, das zu deinem Lernstil passt und dich darauf einlassen.

Im Folgenden stellen wir dir einige der besten kostenlosen HTML-Programme vor, die du für dein Studium nutzen kannst.

Codeacademy

Codecademy hat zahlreiche kostenlose Programme, die dir die technischen Fähigkeiten vermitteln, die du brauchst. Über 50 Millionen Schüler/innen haben Codecademy genutzt, um grundlegende HTML- und Programmierkenntnisse zu erwerben.

Das Unternehmen glaubt, dass es die Art und Weise, wie Schüler/innen programmieren lernen, „perfektioniert“ hat. Das Programm basiert auf drei Säulen: Lernen durch Handeln, sofortiges Feedback und praktische Anwendung des Gelernten. So entdeckst du HTML mit einem praxisnahen, geführten Ansatz.

Das Unternehmen bietet sogar Foren, Chats, Kapitel und Veranstaltungen an, um dich auf deinem Lernweg zu unterstützen. Du kannst in Echtzeit über die Benutzeroberfläche chatten oder eine Frage im Online-Forum stellen.

Wenn du Gleichgesinnte virtuell triffst, kannst du sie auch bei einer von Codecademy organisierten Veranstaltung kennenlernen. Durch die Verbindung von Gemeinschaft und praktischem Lernen hebt sich Codecademy von anderen Anbietern ab.

Learn-HTML.org

Learn-HTML.org

Learn-HTML.org ist eine zuverlässige Quelle für alles, was du über HTML wissen musst. Auf Learn-HTML.org, einem kostenlosen Online-Modulkurs, der dich Schritt für Schritt in die Welt der Programmierung einführt, gibt es viel zu entdecken.

Die Website bietet Tutorials für HTML-Anfänger/innen, die ihnen zeigen, wie sie HTML- und CSS-Websites von Grund auf erstellen können. Die Tutorials beginnen mit den Grundlagen und werden im Laufe der Lektionen immer intensiver und komplexer.

In den Lektionen geht es um wichtige Elemente, Links, Bilder, Schaltflächen, Navigationsleisten, Formulare, Videos, responsive Webdesign, App-Cache, lokale Speicherung, Drag-and-Drop und vieles mehr.

Diese Webseite ist eine hervorragende Ressource, wenn du zusätzliche Hilfe zu einem bestimmten Element auf deiner Webseite benötigst. Du kannst ganz einfach das Tutorial finden und wertvolle Informationen für das jeweilige Widget erhalten, das du erstellen möchtest.

General Assembly Dash

General Assembly Dash

General Assembly Dash ist eine beliebte Webseite, um die Grundlagen von HTML zu erlernen. Dieser kostenlose Online-Kurs hilft dir anhand von Projekten, die HTML-Konzepte zu verstehen.

Das Programm eignet sich hervorragend für Anfänger, die einen grundlegenden Überblick über HTML brauchen, oder für Fortgeschrittene, die einen Auffrischungskurs benötigen.

Im selben Kurs lernst du auch HTML5, CSS3 und Javascript. So kannst du beeindruckende Webseiten mit verschiedenen Layouts und Benutzerereignissen erstellen.

Nach diesem Einführungskurs kannst du deine Ausbildung bei General Assembly fortsetzen. Das Unternehmen bietet eine Vielzahl von Kursen und Ressourcen an, mit denen du dich noch intensiver mit HTML und anderen interessanten Themen beschäftigen kannst.

MIT OpenCourseware

MIT OpenCourseware

Das MIT bietet “ open courseware classes ” für Studierende, die von der führenden technischen Universität des Landes lernen wollen, offene Kurse an. Diese Kurse werden von namhaften Lehrkräften und Studierenden gestaltet, die online zu den Inhalten beitragen.

Das Format dieser Kurse ähnelt dem von Miniatur-Online-Collegekursen. Du kannst dir Videovorlesungen ansehen, Vorlesungsmitschriften einsehen, Aufgaben und Projekte erledigen, Mitschriften einsehen und eine Prüfung ablegen, um deine Fähigkeiten zu testen.

Nach Abschluss der Prüfung kannst du die Lösungen einsehen und sehen, wie du abgeschnitten hast. Es ist ein hervorragendes Hilfsmittel, um dein HTML-Studium zu ergänzen. Wie die Inhalte, die an den Universitäten und in den kostenpflichtigen Kursen gelehrt werden, sind die Inhalte für die Schüler/innen kostenlos.

Was du mit HTML lernen solltest

Sobald du HTML gelernt hast, hört deine Ausbildung in der Webentwicklung nicht auf. Es gibt noch viel mehr zu lernen, um deine HTML-Kenntnisse zu erweitern und sie noch nützlicher zu machen.

Zwei weitere Sprachen, die du ebenfalls lernen solltest, sind CSS und Javascript .

CSS (oder Cascading Sliding Sheets) ist eine Programmiersprache , die sich mehr auf den Stil deines Dokuments konzentriert als auf seine bloße Struktur, wie es bei HTML der Fall ist.

CSS- und HTML-Kenntnisse können dich zu einem kompetenten Entwickler machen.

Javascript ist eine weitere Programmiersprache, die du lernen solltest, um deine Fähigkeiten zu verbessern. Es ist eine Programmiersprache, mit der du dynamische Inhalte erstellen kannst. Du kannst Bilder animieren oder verschiedene Multimedia-Elemente über den Bildschirm fliegen lassen.

Javascript macht jede Webseite für den Endnutzer interessanter und kann die Verweildauer auf deiner Webseite erhöhen.

Zusammenfassung

HTML zu lernen kann sich wie ein Unterfangen anfühlen. Du musst die Grundlagen dessen verstehen, was du erreichen willst, und das richtige Programm finden, das deinen Bedürfnissen entspricht.

Oft fühlt es sich so an, als würdest du eine völlig neue Sprache lernen. Deshalb ist es so wichtig, dass du dir Zeit nimmst und in das richtige Programm investierst.

Zum Glück gibt es viele kostenlose Angebote auf dem Markt, die dich mit Lektionen, Tutorials und geführten Modulen zu einem HTML-Profi machen. Egal, für welches Programm du dich entscheidest, du wirst die Geheimnisse von HTML im Handumdrehen entschlüsseln können.

Fertig mit dem Lernen von HTML? Das ist erst der Anfang deiner Reise in die Webentwicklung. Lies unseren Beitrag über die besten Programmiersprachen , die du lernen kannst .

html tutorial deutsch für anfänger

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website , and connect with Salman on Twitter .

Verwandte Artikel und Themen

html tutorial deutsch für anfänger

HTML vs. HTML5: Lerne die entscheidenden Unterschiede zwischen ihnen kennen

html tutorial deutsch für anfänger

10 kostenlose HTML-Editoren auf dem Markt für Entwickler und fortgeschrittene Benutzer

  • Lokale Entwicklung
  • Webentwicklung
  • Anwendungs-Entwicklung

Schreibe einen Kommentar Antworten abbrechen

E-Mail-Adresse

Durch Absenden dieses Formulars: stimmen Sie der Verarbeitung der eingereichten persönlichen Daten gemäß Kinsta's Datenschutzerklärung zu, einschließlich der Übertragung der Daten in die Vereinigten Staaten.

Sie stimmen auch zu, von Kinsta Informationen über unsere Dienstleistungen, Veranstaltungen und Werbeaktionen zu erhalten. Sie können den Newsletter jederzeit abbestellen, indem Sie den Anweisungen in den erhaltenen Mitteilungen folgen.

Logo HTML-Seminar

Inhalt dieser Seite: Vorstellung des Kursaufbaus

HTML-Tutorial für Anfänger

  • Was wird benötigt
  • HTML für Inhalt & Struktur

Design für Websites

  • Projekt-Websites
  • Provider eigener Domainnamen

Online stellen

Und nun geht es los. Zu Beginn kommen die Grundlagen - dabei wird teilweise mit Vereinfachungen gearbeitet. Wichtig ist mir, dass Sie schnell einen Erfolg sehen und dass die Zusammenhänge verständlich werden.

Im Verlauf des Kurses vervollständigen wir nach und nach unser Wissen, damit korrekte Seiten herauskommen.

Aufbau des Kurses

Was wird benötigt.

Im ersten Schritt sehen wir uns an, welches „Werkzeug“ wir benötigen. Dann geht es zum eigentlichen Lernen von HTML und CSS.

Hier schauen wir uns den aktuellen Standard an. Das hat den Vorteil, dass wir keine Zeit für veraltete Befehle und deren Attribute verschenken. Diese veralteten HTML-Befehle sollten auch nicht mehr eingesetzt werden.

HTML für Inhalt und Struktur

Über HTML werden der Internetseite ihr eigentlicher Inhalt und ihre Struktur mitgegeben. Struktur ist die Logik des Texts:

  • was ist eine Überschrift
  • was ist eine Unterüberschrift
  • was ist der eigentliche Text
  • was soll hervorgehoben werden
  • was ist eine Aufzählung

Dies ist zunächst einmal eine Welt ohne Design! Die Struktur ist das innere Gerüst und das Design wird dann erst im nächsten Schritt darübergestülpt.

Nachdem der Inhalt und die Struktur erstellt wurden (und wir die wichtigsten HTML-Befehle gelernt haben), stürzen wir uns auf das Design. Design für Internetseiten wird über CSS erstellt. Dies „stülpen“ wir über das HTML und bekommen so schnelle, schlanke und funktionierende Seiten, deren Pflegeaufwand sehr gering ist.

In CSS werden Farben, Abstände, Rahmen und sonstige Bestandteile des Erscheinungsbilds definiert. Die Stärke von CSS ist, dass mit wenigen Befehlen, die alle untereinander kombiniert werden können, alle Design-Varianten möglich sind.

Projekt-Websites zum HTML lernen

Um das Wissen über HTML und CSS zusammenzuführen und umzusetzen, erstellen wir Schritt für Schritt eine komplette Internetseite mit Inhalt und Design. Hier lernen wir verschiedene Layout-Arten kennen.

Provider auswählen – eigene Domainnamen oder kostenloser Webspace

Wenn wir nun unsere erste Website erstellt haben, wollen wir diese „online stellen“, sprich: dafür sorgen, dass jeder nach Eingabe der entsprechenden Internetadresse unsere Website ansehen kann. Dazu schauen wir uns die Möglichkeiten und Angebote von Providern an (für eine professionelle Website ist der richtige Domainname unerlässlich und auch im privaten Bereich sehr interessant, z.B. als Bewerbungsseite mit den entsprechenden Informationen). Zum Testen kann sich auch ein kostenloser Provider anbieten. Vor- und Nachteile im entsprechenden Kapitel.

Haben wir nun unseren Webspace (Provider) ausgewählt, müssen wir die einzelnen HTML-Seiten, die Bilder und die CSS-Dateien (für das Design) auf den Webspace „transportieren“.

Dieses „online stellen“ geschieht über FTP. Die Programme hierfür und der Ablauf werden im entsprechenden Kapitel vorgestellt.

Hilfe bei Fragen zu HTML und CSS und Co

Dies ist im Groben der Inhalt des HTML-Tutorials. Im Forum bekommen Sie Hilfe, wenn Fragen auftauchen und Unklarheiten können meistens dadurch schnell geklärt werden.

Und nun viel Freude beim Lernen, wie man eine Website erstellt.

html tutorial deutsch für anfänger

Weiterempfehlen • Social Bookmarks • Vielen Dank

  • Facebook teilen

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

Unsere Videos und eBooks bestellen.

Sie können uns eine Spende über PayPal zukommen lassen.

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bestellen Sie Bücher über folgende Links bei Amazon :

  • Bücher zu HTML
  • Bücher zu CSS

Vielen Dank für Ihre Hilfe

html tutorial deutsch für anfänger

  • E-Books kaufen

E-Books zum Kurs

E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

Mehr Details

Logo academyBlue

HTML5 und CSS3 Kurs

Inklusive Erstellung von 3 Webseiten

HTML 5 - Elemente

Du wirst lernen welche HTML 5 Elemente es gibt und wie man diese verwendet. HTML 5 Elemente verwendet man um der Webseite Inhalte zu geben.

CSS 3 - Eigenschaften

Du lernst wie man mit CSS 3 die Webseite gestaltet. Mit CSS 3 werden die HTML 5 Inhalte gestylte.

Flex-Boxen und Grid-System

In diesem Kurs lernst du die unterschiedlichen Möglichkeiten Webseiten zu erstellen. Dabei zeige ich dir, wie man diese mit Flex-Boxen oder mit dem Grid-System erstellt.

3 Praxisbeispiele

Anhand von 3 praktischen Beispielen, lernst du wie man Webseiten erstellt.

Fragen und Antworten

Du benötigst einen PC oder einen Laptop.

Nein, du benötigst keine Programmierkenntnisse. Alles was du für diesen Kurs lernen musst, lernst du in dem Kurs.

Jeder der Interesse am erstellen von Webseiten hat, kann diesen Kurs machen.

Niemand wird alleine gelassen. Bei Fragen kannst du mich sehr gerne anschreiben. Ich antworte schnellstmöglich.

Teilnehmer-Feedback

Html5 und css3 kurs inklusive erstellung von 3 webseiten, lerne wie man mit html 5 und css 3 komplett responsive webdesigns mit flexboxen oder einem grid-system erstellt., das ist im kurs enthalten:.

  • 16,5 Stunden On-Demand-Video
  • 251 zum Download verfügbare Materialien
  • Uneingeschränkter lebenslanger Zugriff
  • Zugriff auf Handy/Tablet und TV

Das wirst du lernen

  • Die Erstellung von Webseiten mit HTML5 und CSS3. Alles wird detailliert erklärt
  • Wir erstellen 3 Projekte (Einfaches Design, Onlineshop, Online Marketing)
  • Wie erstelle ich responsive Webseiten mit Flexboxen oder dem Grid-System
  • Animationen mit CSS
  • Wie man eine Webseite optimiert, damit diese auch auf mobilen Geräten (Handy, Tablet, usw.) gut aussieht.
  • Hättest du vor einem Jahr begonnen, würdest du heute schon Webseiten erstellen können.

Warum sollte ich HTML5 und CSS3 lernen?

Gerade in der heutigen Zeit, wo Home-Office immer populärer wird, sind HTML5 und CSS3 optimal. Du lernst, wie man schnell und einfach responsive Webseiten erstellt. Diese sehen nicht nur auf dem PC oder Laptop gut aus, sondern auch auf mobilen Geräten. Mit HTML5 und CSS3 kannst du eine neue berufliche Laufbahn einschlagen, die du unabhängig von irgendwelchen Pandemien von zu Hause aus weiterführen kannst. Für viele ist HTML5 und CSS3 der Einstieg in die Programmierung.

html tutorial deutsch für anfänger

Du wirst lernen welche HTML 5 Elemente es gibt und wie man diese verwendet

Außerdem zeige ich dir wie man mit den CSS 3 Eigenschaften, die Webseite stylt.

Du lernst also wie HTML Elemente und CSS Eigenschaften miteinander zusammen arbeiten um schöne responsive Webseiten zu erstellen.

Wir arbeiten unter anderem mit Flex-Boxen, mit denen es sehr leicht ist responsive Webseiten erstellen zu können die auch auf mobilen Geräten optimiert dargestellt werden.

Danach werden wir uns auch noch ausführlich mit dem Grids-System beschäftigen. Mit man noch einfacher und schneller Webseiten responsiv erstellen kann.

Außerdem lernst du wie man mit dem Grid System sehr einfach Webseiten erstellt die sich automatisch an die Displaygröße anpassen ohne das man Media Queries verwenden muss.

Wir werden uns erst immer einzelne HTML 5 Elemente und CSS 3 Eigenschaften anschauen.

Nachdem wir dann verstehen was man mit diesen Elemente und Eigenschaften machen kann, werden wir ein kleines Projekt zu Festigung erstellen.

So kannst du sehr leicht die einzelnen Elemente und Eigenschaften in Aktion sehen und verstehen wie diese zusammen arbeiten.

Nach diesem Kurs wirst du in der Lage sein professionelle Webseiten zu erstellen die auch noch optimiert für mobile Geräte sind, also responsiv.

Dabei werden wir ganz vorne anfangen und uns dann Stück für Stück nach hinten arbeiten.

Der Kurs ist leicht verständlich aufgebaut.

html tutorial deutsch für anfänger

Als erstes erstellen wir eine sehr einfache Seite und steigern uns bereits im nächsten Projekt.

html tutorial deutsch für anfänger

Im zweiten Projekt erstellen wir bereits ein viel besseres Design das man für einen Online Shop verwenden könnte.

Natürlich auch für mobile Geräte optimiert, also responsives Webdesign.

html tutorial deutsch für anfänger

Im dritten Projekt erstellen wir das Design einer Online Marketing Webseite.

Du erlernst die unterschiedlichen Techniken wie das arbeiten mit Flex-Boxen, mit dem man bereits einen großen Sprung im Bereich CSS gemacht hat.

Außerdem werden wir uns natürlich auch das Grid-System ausführlich anschauen, mit dem man noch einfacher sehr gute responsive Webseiten erstellen kann.

Ganz zum Schluss schauen wir uns noch an, wie man mit einem Grid Layout ein komplett responsives Design erstellen kann, das sich automatisch an die jeweilige Display Größe anpasst.

Ich lasse dich natürlich auch nicht alleine. So kannst du mich immer anschreiben wenn du etwas nicht verstanden hast oder Hilfe benötigst.

Somit bist du auf der sicheren Seite, falls du doch mal Hilfe benötigen solltest.

html tutorial deutsch für anfänger

Nach diesem Kurs wirst du in der Lage sein professionelle responsive Webseiten erstellen zu können.

Worauf wartest du also?

Vorteile eines Web-Designers:

  • Du kannst von zu Hause aus arbeiten.
  • Gerade in der heutigen Zeit ist es vom Vorteil wenn man einen Beruf hat den man auch im Home Office betreiben kann.
  • Dadurch hast du mehr Freiheiten, denn du könntest auch an irgendeinem Strand sitzen und Webseiten erstellen
  • Du hast die Möglichkeit komplett selbstständig zu arbeiten. Auch sind Web-Designer sehr gefragt in der heutigen Zeit der Digitalisierung sehr gefragt.
  • Gute Web-Designer verdienen natürlich auch gutes Geld.

Für wen eignet sich dieser Kurs ?

  • Jeder der HTML5 und CSS3 lernen möchte
  • Jeder der eigene Webseiten erstellen möchte
  • Jeder der Webdesigner oder Webentwickler werden möchte
  • Jeder der einen Einstieg in die Programmierung sucht
  • Jeder der einen neue berufliche Laufbahn einschlagen möchte
  • Jeder der von zu Hause aus arbeiten möchte

html tutorial deutsch für anfänger

Du hast meinen Kurs gefunden, weil dich die Erstellung von Webseiten interessiert.

Wie wäre es wenn du jetzt den nächsten Schritt machst und Web-Design erlernst.

Stell dir jetzt vor du hättest vor einem Jahr angefangen HTML 5und CSS 3 zu lernen.

Dann könntest du heute professionelle Webseiten erstellen und mit diesem Wissen dein neues Leben starten.

Fange heute an und werde Web-Designer.

Ich liebe es, kreative Grafiken in meinen Projekten zu verwenden, ob es nun eine coole Grafik für mein neuestes Spiel oder eine ansprechende Grafik für meine Website ist. In meiner Suche nach hochwertigen, vielseitigen Grafiken bin ich auf pngtree.com gestoßen und ich kann ehrlich sagen, dass es meine erste Anlaufstelle für alle meine Designbedürfnisse geworden ist.

Pngtree.com bietet eine unglaubliche Auswahl an hochwertigen, lizenzfreien Grafiken, die perfekt für jedes Projekt geeignet sind. Von Icons über Hintergrundbilder bis hin zu Vektorgrafiken, es gibt nichts, was man auf dieser Seite nicht findet. Die Suchfunktion ist einfach zu bedienen und die Ergebnisse sind immer von höchster Qualität.

Was ich besonders an pngtree.com schätze, ist die Tatsache, dass es eine erschwingliche Option für den Zugriff auf Premium-Grafiken gibt. Ich habe bereits das Abonnement-Modell genutzt und es hat sich als äußerst wertvoll erwiesen. Ich habe uneingeschränkten Zugriff auf eine riesige Bibliothek von Grafiken, die ich für alle meine Projekte verwenden kann.

Insgesamt bin ich sehr beeindruckt von der Qualität der Grafiken auf pngtree.com und der Benutzerfreundlichkeit der Website. Als Affiliate empfehle ich pngtree.com jedem, der auf der Suche nach hochwertigen Grafiken für seine Projekte ist. Probieren Sie es aus und lassen Sie sich von der Vielseitigkeit und Qualität der Grafiken begeistern!

HTML lernen ist heute einfacher denn je. Beginnen Sie mit Online-Tutorials, Büchern und Praxisprojekten. Websites wie Codecademy und W3Schools bieten großartige Einführungen in die HTML Grundlagen.

Fangen Sie mit HTML an, indem Sie einen Texteditor wie Sublime Text oder Visual Studio Code herunterladen und einfache HTML Befehle üben. Es gibt viele kostenlose Ressourcen online, um Ihnen den Einstieg zu erleichtern.

Die Zeit, um HTML zu lernen, variiert je nach Engagement und Lernressourcen. In der Regel können Sie die Grundlagen in wenigen Wochen beherrschen.

Absolut! HTML ist die Grundlage aller Webseiten und bleibt ein wesentlicher Bestandteil der Webentwicklung.

HTML lernen ist entscheidend, wenn Sie Webseiten erstellen oder verstehen möchten, wie das Internet funktioniert. Es öffnet Türen zu weiteren Technologien wie CSS und JavaScript.

Es gibt viele HTML Befehle, einschließlich Tags für Überschriften ( <h1> bis <h6> ), Absätze ( <p> ), Links ( <a> ) und Bilder ( <img> ). Diese sind die Grundlagen für das Erstellen von Webseiten.

HTML Grundkenntnisse umfassen das Verständnis von Tags, Attributen, Elementen und der Struktur einer HTML-Datei. Dies bildet die Basis für das Erstellen und Verstehen von Webseiten.

Join Our Newsletter

Subscribe to receive our latest blog posts directly in your inbox!

Logo des Popups

  • Skip to main content
  • Skip to search
  • Skip to select language
  • Sign up for free
  • English (US)

Introduction to HTML

At its heart, HTML is a language made up of elements , which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.

Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

Get started

Prerequisites

Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in Installing basic software ), and understand how to create and manage files (as detailed in Dealing with files ). Both are parts of our Getting started with the web complete beginner's module.

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch .

This module contains the following articles, which will take you through all the basic theory of HTML and provide ample opportunity for you to test out some skills.

Covers the absolute basics of HTML, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. We also show how a typical HTML page is structured and how an HTML element is structured, and explain other important basic language features. Along the way, we'll play with some HTML to get you interested!

The head of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page <title> , links to CSS (if you want to style your HTML content with CSS), links to custom favicons, and metadata (data about the HTML, such as who wrote it, and important keywords that describe the document).

One of HTML's main jobs is to give text meaning (also known as semantics ), so that the browser knows how to display it correctly. This article looks at how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.

Hyperlinks are really important — they are what makes the web a web. This article shows the syntax required to make a link and discusses best practices for links.

There are many other elements in HTML for formatting text that we didn't get to in the HTML text fundamentals article. The elements here are less well-known, but still useful to know about. In this article, you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.

As well as defining individual parts of your page (such as "a paragraph" or "an image"), HTML is also used to define areas of your website (such as "the header", "the navigation menu", or "the main content column"). This article looks into how to plan a basic website structure and how to write the HTML to represent this structure.

Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help.

Assessments

The following assessments will test your understanding of the HTML basics covered in the guides above.

We all learn to write a letter sooner or later; it is also a useful example to test out text formatting skills. In this assessment, you'll be given a letter to mark up.

This assessment tests your ability to use HTML to structure a simple page of content, containing a header, a footer, a navigation menu, main content, and a sidebar.

IMAGES

  1. HTML Tutorial für Anfänger [German]

    html tutorial deutsch für anfänger

  2. HTML Tutorial Deutsch für Anfänger

    html tutorial deutsch für anfänger

  3. HTML Tutorial für Anfänger 🚀

    html tutorial deutsch für anfänger

  4. HTML Anfänger Tutorial Teil 1

    html tutorial deutsch für anfänger

  5. Lerne HTML in 60 Minuten // HTML Tutorial Deutsch für Anfänger

    html tutorial deutsch für anfänger

  6. HTML Formulare

    html tutorial deutsch für anfänger

VIDEO

  1. HTML lernen

  2. Lektion 16: Übersichtlich HTML programmieren

  3. CSS lernen

  4. Was kommt nach HTML und CSS? #programmieren #programmierenlernen

  5. HTML lernen

  6. Webseite in HTML5 und CSS3 programmieren + AJAX Funktionen

COMMENTS

  1. HTML/Tutorials/Einstieg

    In diesem Tutorial lernen Sie die Grundlagen von HTML kennen. Und keine Sorge, diese vier Buchstaben dürfen Sie gerne deutsch aussprechen. Wofür diese Buchstaben im Einzelnen stehen, verraten wir Ihnen auf jeden Fall noch. Jedenfalls sind Sie herzlich eingeladen, mit uns eine Reise durch die Techniken des Internets zu wagen.

  2. HTML-Tutorial für Anfänger (deutsch)

    In dieser YouTube-Playlist: HTML-Tutorial Anfänger deutsch bekommst du ein erstes, grundlegendes Verständnis für das Coden von und die Arbeit mit HTML. Dieser Artikel ist die Text-Variante der Videos, welche Teil des HTML-Kurses auf Udemy sind. In diesem Kurs lernst du in 60 Minuten alles was man als Web-Entwickler über HTML wissen muss.

  3. HTML Tutorial Deutsch für Anfänger

    0:00 / 29:18 HTML Tutorial Deutsch für Anfänger Deutsche Tutorials zu HTML, PHP, Laravel und mehr 3.9K subscribers Subscribe Subscribed 7K 290K views 6 years ago HTML lernen für blutige...

  4. HTML Lernen

    In unserem kostenlosen HTML-Tutorial für Anfänger lernen Sie die HTML-Sprache und wie Sie Ihre Webseite von Anfang an erstellen können.

  5. Lerne HTML in 60 Minuten // HTML Tutorial Deutsch für Anfänger

    HTML Tutorial Deutsch für Anfänger. Lerne HTML in 60 Minuten. Einfach HTML lernen und eine HTML Website erstellen. Dieses Tutorial dreht sich um die HTML Gru...

  6. HTML lernen: Das große Einsteiger-Tutorial

    Um Ihnen das Prinzip der Auszeichnungssprache näher zu bringen und den Einstieg zu erleichtern, haben wir in diesem HTML-Tutorial die wichtigsten Grundlagen und Tipps für Neulinge zusammengefasst. Inhaltsverzeichnis Was ist HTML? Welche Software benötigt man, um HTML-Code zu schreiben? Die erste HTML-Seite anlegen

  7. HTML Tutorial für Anfänger

    HTML #Tutorial für Anfänger auf Deutsch! Einfach #HTML lernen 🙂 HTML und #CSS bilden das Fundament der Web-Entwicklung. Lerne in diesen knapp 500 Sekunden die absoluten Basics und...

  8. html-einfach.de

    HTML lernen Willkommen auf HTML-einfach.de, deinem Online-Lernportal für HTML, CSS und PHP seit 2005 - jährlich aktualisiert! Ob du Anfänger oder Fortgeschrittener bist, hier findest du alles, was du brauchst, um deine eigene Webseite zu planen, erstellen und online zu stellen. HTML Anleitung Webseite online stellen HTML Anleitung und mehr… Blog

  9. HTML Tutorial

    Lektion 1: Fangen wir an! Welche Werkzeuge brauchen Sie um Ihre eigene Webseite zu erstellen. Lektion 2: Was ist HTML? Verstehen Sie was HTML ist und bedeutet. Lektion 3: Elemente and Tags? Was sind Elemente und Tags und wofür werden Sie benötigt. Lektion 4: Ihre erste Webseite

  10. HTML Onlinekurs für Einsteiger + CSS (deutschsprachig)

    Schritt für Schritt zur eigenen Website - mit HTML selber erstellen. Die Schulungsvideos sind in deutscher Sprache. Kompakt, schrittweise und praxisnah die Kenntnisse über HTML5 aneignen. Verstehen Sie durch unseren in diverse Module und Videos aufgeteilten Onlinekurs die HTML Grundlagen.

  11. HTML lernen: das große Tutorial für Anfänger

    HTML lernen: das große Tutorial für Anfänger Was charakterisiert HTML? Welche Vorteile bietet diese Programmiersprache und wo wird sie verwendet? Diese und weitere Fragen beantworten wir dir im folgenden Post. 😩 Gelangweilt von den Udemy & YouTube-Tutorials?!

  12. HTML basics

    HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font ...

  13. HTML Tutorial: Basics (Deutsch)

    Matthias Dangl 38.1K subscribers Subscribe Subscribed 421 22K views 6 years ago Website programmieren lernen Die Sprache HTML ist der erste Schritt zur Entwicklung von Webseiten. In diesem...

  14. Der beste Weg, um HTML kostenlos zu lernen (und warum du es ...

    HTML steht für H yper T ext M arkup L anguage. Es ist die Sprache, die verwendet wird, um Dokumente und verschiedene Kreationen in einem Standardbrowser anzuzeigen. Es wird von Unternehmen auf der ganzen Welt verwendet, um mobile Apps, Software und Webseiten zu betreiben - fast 92,8% aller Webseiten.

  15. HTML Tutorial für Anfänger

    HTML für Inhalt und Struktur. Über HTML werden der Internetseite ihr eigentlicher Inhalt und ihre Struktur mitgegeben. Struktur ist die Logik des Texts: was ist eine Überschrift. was ist eine Unterüberschrift. was ist der eigentliche Text. was soll hervorgehoben werden. was ist eine Aufzählung. Dies ist zunächst einmal eine Welt ohne Design!

  16. PDF HTML für Anfänger

    HTML für Anfänger Version 0.1 Warum schreibe ich dieses Tutorial? Da ich mich schon seit einiger Zeit mit HTML beschäftige, denke ich, dass ich einem Einsteiger viele Tipps für den Einstieg in dieses Thema bieten kann. Oft ist es passiert, dass jemand nach den Basics sucht.

  17. HTML und CSS Tutorial für Anfänger

    Kostenloses Beratungsgespräch: https://weiterbildung.developerakademie.com/yIn diesem HTML und CSS Tutorial lernst du, wie du eine eigene Internetseite erste...

  18. HTML lernen für Anfänger

    Herzlich Willkommen zu unserem Kurs "HTML lernen für Anfänger". Wer im oder mit dem Internet arbeitet, hat sicher schon etwas von HTML gehört. In diesem Kurs bringen wir dir die Grundlagen der Markup-Sprache bei. Dabei richten wir uns an komplette Anfänger.

  19. academyBlue

    Beginnen Sie mit Online-Tutorials, Büchern und Praxisprojekten. Websites wie Codecademy und W3Schools bieten großartige Einführungen in die HTML Grundlagen. ... Ja, HTML für Anfänger ist relativ leicht zu lernen. Es ist eine klare und logische Sprache, die oft als Einstiegspunkt in die Webentwicklung dient. ... Es gibt viele HTML Befehle ...

  20. HTML Tutorial Deutsch

    Kapitel: 01:47 - Fangen wir an! 02:28 - Was brauch ma? 04:10 - Vorbereitungen... 07:11 - Erste Schritte in HTML 13:00 - Schneller Speichern im Editor 14:04 - mehrere HTML-Tags kombinieren 19:07...

  21. Introduction to HTML

    This article looks at how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more. Creating hyperlinks. Hyperlinks are really important — they are what makes the web a web. This article shows the syntax required to make a link and discusses best practices ...

  22. HTML Grundlagen für absolute Anfänger

    154 4.4K views 1 year ago HTML ist das Fundament einer jeden Website, denn ohne HTML kann eine Website nicht existieren. Deshalb wirst du in diesem Learn by Doing Kurs alles lernen, was nötig...