HTML GRUNDKURS
Dieser Leitfaden richtet sich an alle, die noch keinerlei Erfahrung mit der Erstellung von Webseiten haben. HTML kann am Anfang unübersichtlich wirken, aber das Prinzip ist einfach: Ich erkläre hier Schritt für Schritt die absoluten Grundlagen, damit du am Ende ohne Vorkenntnisse deine erste eigene kleine Webseite erstellen kannst.
Was ist HTML eigentlich?
HTML (ausgeschrieben bdeutet es Hypertext Markup Language) ist das grundlegende Fundament jeder Webseite im Internet. Es ist keine komplizierte Programmiersprache, bei der du Mathe oder Logik brauchst. HTML ist eine Struktursprache.
Du nutzt HTML, um dem Browser (z.B. Chrome) zu sagen, um was für einen Inhalt es sich handelt. Du sagst dem Browser quasi: “Das hier ist eine Überschrift”, “Das ist ein normaler Text” oder “Das ist eine Liste”.
System der Tags
HTML funktioniert über sogenannte Tags. Das sind kleine Markierungen, die in spitzen Klammern stehen. Sie sagen dem Browser, wo ein bestimmtes Element anfängt und wo es wieder aufhört.
Fast jedes Element besteht aus zwei Teilen:
Der Start-Tag:
<p>(Hier beginnt das Element)Der End-Tag:
</p>(Hier endet das Element – immer am Schrägstrich/zu erkennen)
Alles, was du zwischen diese beiden Tags schreibst, wird zu dem entsprechenden Element. Beispiel: <p>Das ist ein normaler Text.</p>
Das HTML-Grundgerüst
Jede einzelne Webseite der Welt basiert auf einem festgelegten Rahmen. Bevor du Inhalte einfügst, brauchst du dieses Basis-Gerüst.
So sieht es aus:
Die Erklärung der einzelnen Bereiche:
<!DOCTYPE html>: Diese Zeile steht immer ganz oben. Das teilt dem Browser mit, dass es sich um ein HTML-Dokument handelt.<html>: Das ist der Rahmen für alles. Hier beginnt die Webseite und ganz unten bei</html>endet sie. Ohne das, funktioniert deine HTML Datei nicht.<head>: Hier stehen Hintergrundinformationen, die auf der eigentlichen Webseite unsichtbar sind. Der<title>ist zum Beispiel der Name, der oben im Tab deines Browsers angezeigt wird. (Hier z.B. HTML Grundkurs – Hamstergames.eu)<body>: Das ist der wichtigste Bereich für dich. Alles, was du zwischen<body>und</body>schreibst, wird für die Besucher deiner Webseite auf dem Bildschirm sichtbar sein.
Deine ersten eigenen Inhalte
Um deinen <body>-Bereich mit Sachen zu füllen, brauchst du nur eine Handvoll grundlegender Befehle:
Überschriften (
<h1>bis<h6>):<h1>Willkommen auf meiner Seite!</h1>(Das “h” steht für Heading.<h1>ist die Hauptüberschrift,<h2>eine Unterüberschrift, und so weiter bis<h6>).Textabsätze (
<p>):<p>Hier steht mein erster eigener Text.</p>(Das “p” steht für Paragraph, also Absatz. Jeder neue Absatz bekommt ein eigenes<p>).Fettgedruckter Text (
<b>):<b>Dieses Wort ist wichtig.</b>(Das “b” steht für bold, also fett).Eine Aufzählung (
<ul>und<li>): Eine Liste besteht immer aus dem Rahmen der Liste (<ul>) und den einzelnen Listenpunkten (<li>):