HTML Lernen für Anfänger – Der ultimative Einstieg

Das HTML 5 Logo

HTML lernen ist nicht schwer, aber gerade wenn man zuvor keinerlei “Programmier”-Erfahrungen hat, kann der Einstieg recht gewöhnungsbedürftig sein. Lass dich davon aber nicht abschrecken! Wir werden feststellen, das HTML doch nicht so kompliziert ist wie es vielleicht zunächst wirkt. Als erstes sollten wir uns mit dem Thema befassen, was HTML eigentlich ist.

Was ist HTML eigentlich?

HTML steht für Hypertext Markup Language und wird verwendet um digitale Inhalte zu strukturieren. Was bedeutet das jetzt für uns? Das Text in Hypertext sagt für uns aus, dass es sich um eine textbasierte Datenstrukturierungssprache handelt. Wer sich bereits mit ähnlichen Sprachen wie z.B XML auskennt hat hier einen entscheidenden Vorteil. Wenn du aber keine Vorkenntnisse hast ist das auch nicht weiter schlimm ich werde alles genau erklären. :)

Es ist des öfteren schon das Wort Strukturierung gefallen, denn es ist genau das was HTML tut. HTML strukturiert sämtliche Daten, so dass der eingesetzte Browser sie ohne Probleme lesen und ausgeben kann. Nun aber genug von der Definition von HTML und lasst uns mit dem Einstieg beginnen.

Die Grundlagen von HTML

Ich denke es wäre am sinnvollsten zunächst einmal die Basisstruktur einer jeden Internetseite anhand eines Codes zu begutachten.

<!DOCTYPE html>
<html>
<head>
<title>Unsere kleine Website</title>
</head>
<body>
Der Inhalt unserer Website.
</body>
</html>

Bei genauem betrachten fällt uns auf, dass 4 der benutzten Tags (Tags bezeichnen bestimmte Befehle in HTML, welche immer in spitzen Klammern “< >” geschrieben werden) doppelt vorkommen (html, head, title und body) bei der zweiten Variante des Tags steht jedoch ein Slash (“/”) nach der geöffneten spitzen Klammer. Dies symbolisiert, das dieser Tags ab nun geschlossen ist.

Tags werden verwendet um die Daten für den Browser zu strukturieren. Mit diesem Wissen und einem weiteren Blick auf den obigen Code erkennen wir, dass selbst dieser einfache Code schon ziemlich verschachtelte Daten besitzt. Der html-Tag besitzt 2 weitere Tags, einmal den head-Tag und den body-Tag. Zu der Bedeutung dieser Tags kommen wir gleich. Der head-Tag beinhaltet wiederrum einen weiteren Tag, den title-Tag. Nun sollten wir als nächstes unseren kleinen Code ein wenig formatieren um die Struktur leichter erkennen zu können.

<!DOCTYPE html>
<html>
   <head>
       <title>Unsere kleine Website</title>
    </head>
    <body>
        Der Inhalt unserer Website.
    </body>
</html>

Der Code ist doch jetzt schon viel schöner anzusehen oder? :)

Die Bedeutung der HTML Tags

Nachdem wir nun wissen, dass HTML dazu dient mit Hilfe von Tags Daten für den Browser zu strukturieren, sollten wir uns mit der Bedeutung dieser Tags auseinandersetzen.

<!DOCTYPE html> :
Bestimmt den Dokumententyp des Dokuments, in diesem Fall HTML5, dadurch weiß der Browser das es sich um eine HTML5 Datei handelt und nicht um z.B eine XML Datei.

<html> :
Der html-Tag bestimmt den Inhalt der Internetseite wir wollen also, dass unsere komplette Seite in diesem Tag steht (mit Ausnahme von dem Doctype-Tag, da dieser wie oben beschrieben angibt um was für ein Dokument es sich überhaupt handelt).

<head> :
Daten innerhalb dieses Bereiches geben wichtige Informationen an, welche vor dem eigentlichen Inhalt unserer Webseite bearbeitet werden sollen. In der Regel sind dies Javascript, CSS Dateien oder angaben die für den Browser wichtig sind wie z.B der title-Tag.

<title> :
Browser benutzen diesen Tag und benennen in der Regel den Tab der geöffneten Seite nach diesem Inhalt. Als Beispiel so würde der Tab unserer kleinen Internetseite bei Chrome aussehen:

HTML Lernen - Tab von unserer Kleinen Seite

<body> :
Der Body-Tag beinhaltet den “Körper” unserer Seite, genauer gesagt alle angezeigten Elemente. In der Regel enthält er also den meisten Text von allen Tags und wird für uns das wichtigste Element sein. Er wird all unsere Texte, Bilder, Links etc beinhaltet und damit die zentrale Rolle spielen.

Die Umsetzung unserer kleinen Website

Da wir nun die absoluten Grundlagen kennen, stellt sich uns die Frage wie können wir eine solch simple Datei erstellen und mit dem Browser anzeigen lassen? Dafür benötigen wir 2 Programme:

  • Einen Editor
  • Einen Browser

Für den Editor, werden wir in unserem Kurs übers HTML lernen, Notepad verwenden. Für komplexere Internetseiten empfehle ich aber sich mit anderen Editoren wie z.B den Sublime Text Editor auseinander zu setzen.

Als Browser werde ich den Google Chrome Browser verwenden, aber Ihr könnt natürlich auch einen anderen verwenden.

Nachdem wir uns entschieden haben welche Programme wir verwenden werden geben wir unseren Code in den Editor unserer Wahl ein.

Der HTML Code in notepad

Als nächstes navigieren wir zu dem Button Datei -> Speichern unter
Jetzt wählen wir einen Ordner aus, indem wir die Datei speichern wollen und geben der Datei einen namen mit der Endung .html. Die Endung ist sehr wichtig und darf nicht vergessen werden.

HTML - Die Endung darf nicht fehlen.

Nun können wir unsere Datei ganz einfach mit dem Browser unserer Wahl öffnen

HTML Lernen - Unsere kleine Website in chrome

und der Browser zeigt uns sofort den Inhalt unserer Internetseite an. Herzlichen Glückwunsch du hast gerade deine erste eigene Webseite erstellt! :)

Wie geht es nun weiter?

Zunächst möchte ich euch ein Buch empfehlen, welches mir sehr geholfen hat und viele weitere Themen anspricht. Ich kann es echt jedem empfehlen der ernsthaft in das Thema einsteigen möchte.

Grundkurs Gutes Webdesign

Ich kann dieses Buch nur wärmstens empfehlen, es schneidet sehr viele Themen an, die den Rahmen dieser Internetseite sprengen würden. Es handelt unter anderem über: HTML, CSS, ein Farbkonzept entwickeln, Usability und vieles mehr! Das Buch ist wirklich gut geschrieben und es macht sogar Spaß es zu lesen. Es ist auch keine schwere Lektüre, kann also auch gemütlich auf dem Sofa gelesen werden. :)


Ich werde noch weitere Teile über HTML Lernen veröffentlichen und diese dann nach und nach hier verlinken. Der nächste Teil wird die wichtigsten Tags beinhalten und wie man diese Verwendet. Unter anderem wird dort erklärt, wie man Links und Bilder auf seiner Internetseite platziert.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>