Willkommen zu unserem Programmierkurs! In diesem ersten Teil konzentrieren wir uns auf die Grundlagen von HTML (HyperText Markup Language). HTML ist die Basis jeder Webseite und dient dazu, Inhalte zu strukturieren und darzustellen. Perfekt für Anfänger!
1. Was ist HTML?
HTML ist eine Auszeichnungssprache, mit der du Inhalte wie Text, Bilder, Videos und Links auf einer Webseite anzeigen kannst. Es arbeitet mit sogenannten „Tags“, die den Browser anweisen, wie die Inhalte dargestellt werden sollen.
Ein einfaches Beispiel für HTML sieht so aus:
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Willkommen auf meiner Webseite!</h1>
<p>Das ist mein erster Versuch, eine Webseite zu erstellen.</p>
</body>
</html>
Aufbau des Beispiels:
<!DOCTYPE html>: Gibt an, dass es sich um ein HTML5-Dokument handelt.<html>: Der Start des HTML-Dokuments.<head>: Enthält Meta-Informationen wie den Seitentitel.<body>: Hier kommen die sichtbaren Inhalte der Webseite hinein.<h1>: Eine Überschrift erster Ordnung (fett und groß).<p>: Ein Absatz.
2. Deine erste Webseite erstellen
Schritt 1: Vorbereitung
- Installiere einen einfachen Texteditor wie Visual Studio Code oder verwende den Windows-Editor (Notepad).
- Speichere eine leere Datei mit der Endung
.html, z. B.index.html.
Schritt 2: Der Grundaufbau
Schreibe den folgenden Code in deine Datei:
<!DOCTYPE html>
<html>
<head>
<title>Meine Webseite</title>
</head>
<body>
<h1>Hallo Welt!</h1>
<p>Das ist meine erste HTML-Seite.</p>
</body>
</html>
Speichere die Datei und öffne sie in einem Browser (z. B. Chrome, Firefox, Edge). Du solltest eine Überschrift „Hallo Welt!“ und einen Absatz sehen.
3. Grundlegende Tags
Hier sind einige wichtige HTML-Tags, die du oft verwenden wirst:
Textelemente
<h1> bis <h6>: Überschriften,<h1>ist die wichtigste,<h6>die kleinste.<p>: Absätze.<strong>: Hervorheben von Text (fett).<em>: Hervorheben von Text (kursiv).
Beispiel:
<h2>HTML lernen</h2>
<p><strong>Fettgedruckt</strong> und <em>kursiv</em> in einem Satz.</p>
Listen
- Ungeordnete Liste:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
- Geordnete Liste:
<ol>
<li>HTML lernen</li>
<li>CSS anwenden</li>
<li>JavaScript programmieren</li>
</ol>
Links und Bilder
- Links:
<a href="https://example.com">Besuche example.com</a>
- Bilder:
<img src="bild.jpg" alt="Ein Beispielbild">
4. Übung: Deine eigene Webseite erstellen
Aufgabenstellung:
- Erstelle eine neue HTML-Datei mit dem Namen
meine_seite.html. - Füge folgende Elemente hinzu:
- Eine Überschrift mit deinem Namen.
- Einen Absatz, der erklärt, warum du HTML lernen möchtest.
- Eine Liste mit deinen Lieblingshobbys.
- Einen Link zu einer Webseite, die du oft besuchst.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Meine persönliche Webseite</title>
</head>
<body>
<h1>Hallo, ich bin Anna!</h1>
<p>Ich lerne HTML, weil ich meine eigenen Webseiten erstellen möchte.</p>
<h2>Meine Hobbys</h2>
<ul>
<li>Lesen</li>
<li>Kochen</li>
<li>Reisen</li>
</ul>
<p>Hier ist eine meiner Lieblingswebseiten: <a href="https://www.wikipedia.org">Wikipedia</a></p>
</body>
</html>
5. Nächste Schritte
Im nächsten Kapitel schauen wir uns an, wie man HTML mit CSS (Cascading Style Sheets) gestaltet. Damit kannst du deiner Webseite Farben, Schriftarten und Layouts hinzufügen.
Bleib dran und viel Spaß beim Programmieren!