Willkommen in der Welt des Webdesign! Wenn Sie noch nie eine Zeile Code geschrieben haben, keine Sorge. Dieser Artikel ist speziell für absolute Anfänger konzipiert. Wir führen Sie Schritt für Schritt durch die Erstellung Ihres ersten HTML-Befehls und legen damit den Grundstein für Ihre zukünftige Karriere als Webentwickler.
Was ist HTML?
HTML steht für HyperText Markup Language. Es ist die Sprache, die von Webbrowsern verwendet wird, um die Struktur und den Inhalt einer Webseite zu interpretieren. Denken Sie an HTML als das Skelett einer Webseite. Es definiert, wo Text, Bilder, Videos und andere Elemente platziert werden sollen. Im Gegensatz zu Programmiersprachen wie JavaScript, die dynamische Funktionalität hinzufügen, konzentriert sich HTML auf die grundlegende Struktur.
Die Grundstruktur einer HTML-Datei
Jede HTML-Datei folgt einer bestimmten Grundstruktur. Diese Struktur besteht aus Elementen, die durch Tags definiert werden. Ein Tag besteht aus einem öffnenden und einem schliessenden Tag, die den Inhalt einschliessen. Hier ist die Grundstruktur einer einfachen HTML-Datei:
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Hallo Welt!</h1>
<p>Dies ist mein erster HTML-Befehl.</p>
</body>
</html>
Lass uns die einzelnen Teile aufschlüsseln:
<!DOCTYPE html>: Diese Zeile deklariert, dass es sich um ein HTML5-Dokument handelt. Sie ist wichtig, damit der Browser die Seite korrekt rendern kann.<html>: Dies ist das Wurzelelement der HTML-Seite. Alles andere innerhalb der Seite ist darin enthalten.<head>: Der<head>-Bereich enthält Metadaten über die Seite, wie z.B. den Titel, der im Browser-Tab angezeigt wird, und Links zu Stylesheets (CSS).<title>: Der<title>-Tag definiert den Titel der Webseite, der im Browser-Tab oder Fensterkopf angezeigt wird.<body>: Der<body>-Bereich enthält den eigentlichen Inhalt der Webseite, der im Browserfenster angezeigt wird.<h1>: Dies ist eine Überschrift der ersten Ebene. Es gibt Überschriften von<h1>bis<h6>, wobei<h1>die wichtigste und grösste Überschrift ist.<p>: Dies ist ein Absatz. Text, der in<p>-Tags eingeschlossen ist, wird als Absatz formatiert.
Schritt-für-Schritt: Erstellen Sie Ihren ersten HTML-Befehl
- Öffnen Sie einen Texteditor: Sie können jeden einfachen Texteditor verwenden, wie z.B. Notepad (Windows), TextEdit (Mac) oder VS Code (kostenlos und sehr empfehlenswert für Webentwicklung).
- Geben Sie den HTML-Code ein: Kopieren Sie den oben gezeigten Codeausschnitt und fügen Sie ihn in Ihren Texteditor ein.
- Speichern Sie die Datei: Speichern Sie die Datei mit der Dateiendung
.html. Nennen Sie sie z.B.meine-erste-webseite.html. Achten Sie darauf, dass Sie den Dateityp als „Alle Dateien” oder „Textdateien” auswählen, damit der Editor die Datei nicht als.txtspeichert. - Öffnen Sie die Datei im Browser: Suchen Sie die gespeicherte Datei und doppelklicken Sie darauf. Ihr Webbrowser (Chrome, Firefox, Safari usw.) sollte die Datei automatisch öffnen und die Webseite anzeigen.
Glückwunsch! Sie haben erfolgreich Ihren ersten HTML-Befehl erstellt und eine einfache Webseite angezeigt.
HTML–Tags im Detail
HTML–Tags sind die Bausteine jeder Webseite. Sie bestehen aus einem öffnenden Tag (z.B. <p>), einem schliessenden Tag (z.B. </p>) und dem Inhalt, der zwischen den Tags platziert wird. Einige Tags, wie z.B. das <br>–Tag (für einen Zeilenumbruch), haben kein schliessendes Tag und werden als „self-closing tags” bezeichnet.
Häufig verwendete HTML–Tags:
<h1>bis<h6>: Überschriften verschiedener Ebenen<p>: Absätze<a>: Links (Hyperlinks)<img>: Bilder<ul>und<li>: Ungeordnete Listen und Listenelemente<ol>und<li>: Geordnete Listen und Listenelemente<div>: Container für andere HTML-Elemente<span>: Inline-Container für Text oder andere Inline-Elemente<table>,<tr>,<th>,<td>: Tabellen, Tabellenzeilen, Tabellenüberschriften, Tabellenzellen
Attribute in HTML
HTML–Tags können Attribute haben, die zusätzliche Informationen über das Element liefern. Attribute werden im öffnenden Tag angegeben und bestehen aus einem Namen und einem Wert, z.B. <img src="bild.jpg" alt="Beschreibung des Bildes">. Hier ist src das Attribut, das den Pfad zum Bild angibt, und alt ist das Attribut, das eine alternative Beschreibung des Bildes für Suchmaschinen und Screenreader bereitstellt.
Häufig verwendete Attribute:
src: Gibt die Quelle einer Ressource an (z.B. für Bilder oder Skripte)href: Gibt das Ziel eines Links analt: Bietet eine alternative Beschreibung für Bilderclass: Weist einem Element eine CSS-Klasse zu (für Styling)id: Weist einem Element eine eindeutige ID zu (für Styling oder JavaScript-Interaktionen)style: Ermöglicht Inline-Styling (nicht empfohlen für grössere Projekte)
Nächste Schritte
Nachdem Sie Ihren ersten HTML-Befehl erstellt haben, gibt es viele weitere Dinge zu lernen. Hier sind einige Vorschläge:
- Lernen Sie CSS: CSS (Cascading Style Sheets) wird verwendet, um das Aussehen Ihrer Webseite zu gestalten. Es ermöglicht Ihnen, Farben, Schriftarten, Layouts und vieles mehr zu steuern.
- Lernen Sie JavaScript: JavaScript wird verwendet, um Ihre Webseite interaktiv zu machen. Es ermöglicht Ihnen, Animationen, Formularvalidierungen und vieles mehr hinzuzufügen.
- Üben Sie regelmässig: Je mehr Sie üben, desto besser werden Sie. Erstellen Sie kleine Projekte, um Ihre Fähigkeiten zu festigen.
- Nutzen Sie Online-Ressourcen: Es gibt viele grossartige Online-Ressourcen, die Ihnen beim Lernen von Webentwicklung helfen können, wie z.B. MDN Web Docs, freeCodeCamp und Codecademy.
Der Einstieg in die Webentwicklung kann anfangs überwältigend sein, aber mit Geduld und Ausdauer können Sie grossartige Dinge erschaffen. Viel Erfolg auf Ihrer Reise!