AlexTech Logo Schwarz
programieren—

2024-09-20

HTML Tutorial für Anfänger

HTML Tutorial für Anfänger Thumbnail
— scroll down — read more

HTML Tutorial für Anfänger

Viele Menschen besitzen mittlerweile eine selbstgemachte Website. In diesem Tutorial lernst du Schritt für Schritt wie du auch deine eigene Website Programieren kannst.

Schritt 1: Eine HTML-Datei erstellen.

Öffne einen Texteditor deiner Wahl (ich empfehle Visual Studio Code oder NotePad++) und erstelle eine neue Datei. Speichere diese mit der Dateiendung ".html". Zum Beispiel: "meine_website.html".

Schritt 2: Die Grundstruktur der Webseite.

Damit der Browser weiß wie er die Website darstellen soll, benötigt die Website eine gewisse Strucktur. Diese legen wir nun mit Folgendem Code fest:

<!DOCTYPE html>
<html>
<head>
<title>Meine coole Website</title>
</head>
<body>

</body>
</html>

Nun haben wir schon die Strucktur der Website deffiniert. Im nächsten Schritt erfährst du wie du ganz einfach Inhalte hinzufügen kannst.

Schritt 3: Inhalte durch "Tags" hinzufügen.

Es gibt verschiedene sogenannte "Tags", durch diese kann man zur Website Inhalte hinzufügen. Die Tags müssen meist in den "<body>" Tag eingefügt werden, es gibt allerdings auch Tags wie "<title>" welche in den "<head>" Tag gehören. Hier findest du eine kleine Übersicht der Wichtigsten HTML Tags:

Überschriften:

<h1>sehr große Überschrift</h1>
<h2>große Überschrift</h2>
<h3>mittlere Überschrift</h3>
<h4>kleine Überschrift</h4>
<h5>sehr kleine Überschrift</h5>
<h6>winzige Überschrift</h6>

Absätze:

<p>Dies ist ein Absatz, in diesen kannst du einiges an Text einfügen.</p>

Bilder:

<img src="pfad/zum/bild.png" alt="Eine alternative Beschreibung falls das Bild nicht verfügbar ist oder für Screenreader ;)">
# Der IMG Tag muss nicht wie die anderen geschlossen werden.

Links:

<a href="www.example.com">Mein cooler Link</a>
# In den Klammern von "href", wird die URL definiert.

Listen:

# Geordnete Liste: (Wird nach der Reihenfolge Nummeriert.)
<ol>
<li>Objekt 1</li>
<li>Objekt 2</li>
<li>Objekt 3</li>
</ol>

# Ungeordnete Liste: (Wird mit Punkten vor jedem Objekt angezeigt.)
<ul>
<li>Objekt 1</li>
<li>Objekt 2</li>
<li>Objekt 3</li>
</ul>

Diese Tags kannst du in deinen Body Tag einfügen und nach deinen Wünschen anpassen.

Schritt 4: Website Öffnen

Um deine Website nun zu öffnen musst du diese zuerst Speichern, hierzu kannst du den "Strg + S" Shortcut nützen. Danach musst du einfach deine ".html" Datei in einem Browser wie Chrome oder Firefox öffnen. Super, nun hast du erfolgreich deine eigene Website erstellt!

Schritt 5: Website veröffentlichen (optional)

Optional gibt es nun auch die Möglichkeit deine Website zu veröffentlichen, um dies zu tun benötigt man einen Webspace diesen kann man z.B. bei Hostern wie Datalix günstig erwerben. Allerdings ist dies nur für erfahrene Personen empfohlen. 

Teile diesen Artikel

Suggested Posts

AllAll