Einführung in HTML

html starten erste schritte

HTML ist die Grundlage des Web wie wir es kennen. Im Folgenden will ich dir eine kleine Hilfestellung geben wie du die ersten eigenen Schritte machen kannst wenn du ganz am Anfang stehst.

HTML ist die Abkürzung für „Hyper Text Markup Language“. Aber was ist eine markup language eigentlich? Du kennst vielleicht schon Formate wie .txt oder .doc also Dateien in die du einfach Text reinschreiben kannst. Und in diesem Fall ist das ähnlich, nur dass in einer .html Datei auch Verlinkungen möglich sind.

Diese Datei enthält dann Inhalt der definiert was ein Titel ist, was ein Paragraph und so weiter. Und es gibt auch diese Markups, die der Browser dann nimmt, um zu verstehen, wie die Inhalte für den Besucher einer Seite dargestellt werden können. Diese Markups dienen also dazu, den Inhalt eines Dokumentes zu strukturieren und einem Dokument zum Beispiel auch unterschiedliche Formatierungen und Hierarchien zu geben. Um diese Markups umzusetzen, werden sogenannte Tags, eingesetzt. Dazu gleich mehr.

Baue deine erste HTML-Seite

Hier siehst du einmal wie HTML in der Praxis aussehen kann:

<p>Kleiner Zoo</p>

<ul>
  <li>Elefant</li>
  <li>Maus</li>
  <li>Esel</li>
</ul>

Dieses HTML snippet (Schnipsel) definiert zum Beispiel dass Kleiner Zoo ein Paragraph ist, also ein gewöhnlicher Textblock. Außerdem gibt es eine Liste mit 3 Zeilen.

p steht für paragraph, ul bedeutet unordered list, und li definiert ein list item.

Wichtig dabei ist, du darfst nie vergessen dass jeder opening tag (wie <ul>) auch zwingend einen closing tag erfordert (siehe </ul>).

Wenn du schon eine Entwicklungsumgebung hast (das Programm mit dem du programmierst) kannst du jetzt eine test.html Datei anlegen und den HTML Code von oben einmal speichern und die Seite im Browser aufrufen.

Es gibt aber auch eine andere Möglichkeit: Ein cooles Tool was dir den Einstieg einfacher macht ist Codepen. Klare Empfehlung an der Stelle, es ist kostenlos und sehr gut gemacht. Die Website hilft dir bei der einfachen Erstellung von Webseiten, vor allem wenn du ein bisschen rumexperimentieren möchtest.

Gehe einfach auf die Seite https://codepen.io und leg dir ein eigenes Konto an. Alternativ kannst du auch in dem kleinen Fenster hier ein bisschen rumspielen:

See the Pen little zoo by Luis (@luis-rieke) on CodePen.

Falls du dir ein eigenes Konto anlegst: Die Seite verwendet so genannte Pens. Lege jetzt einen neuen Pen an und starte dein erstes Projekt.

Wenn du alles richtig gemacht hast interpretiert jetzt dein Browser (Chrome, Firefox, Safari) deinen Code. In dem Rahmen gibt es auch schon ein bisschen Styling, weil dein Browser weiß was zum Beispiel eine Liste ist. So sind hier auch die Abstände größer als bei dem Paragraph.

Dennoch ist HTML nicht fokussiert auf Styling und Design, das folgt später mit dem CSS. HTML geht es nicht darum, wie die Dinge aussehen. Stattdessen ist die Aufgabe von HTML zu verstehen, was die Dinge bedeuten.

Man sagt in HTML nicht mach dieses oder jenes größer.

Das wäre Styling, das ist nicht die Aufgabe von HTML.

HTML strukturieren

Ehrlicherweise waren wir ein bisschen vorschnell und bei dem oben stehenden Code fehlt noch ein bisschen was. Wir haben bereits Ergebnisse erzielt, aber formal müssen wir noch etwas ergänzen.

Die Frage ist, was braucht eine korrekte HTML Datei?

So sieht das aus:

See the Pen structure html by Luis (@luis-rieke) on CodePen.

Die ursprünglichen Elemente sind jetzt umschlossen von einem body tag.

Außerdem gibt es ein head tag und das html tag, das alles umschließt und definiert, dass wir hier in HTML schreiben.

body zeigt immer den visuell sichtbaren Teil der Seite.

head ist für den Endanwender nicht sichtbar, hier werden Metainformationen abgespeichert, die für den Browser oder Suchmaschinen interessant sein können.

Wichtig ist: du darfst in jedem HTML Dokument nur ein Mal html, body und head verwenden.

Achso, und noch etwas: <!DOCTYPE html> zeigt dem Browser direkt zu Beginn, dass es sich hierbei um ein HTML Dokument handelt.

Und dass die einzelnen Zeilen richtig eingerückt werden macht Codepen und die meisten Entwicklungsumgebungen automatisch. Dadurch wird der Code besser lesbar.

Wenn du tiefer ins Thema einsteigen willst, einfach dran bleiben! Es gibt viele gute Informationen im Internet und auch auf dieser Seite werden weitere Hilfestellungen folgen. Coden ist wie kochen. Mit der Zeit wird man von ganz alleine besser!

Diese Seite teilen:

Kommentar hinterlassen