Es ist also so weit. Du hast dich endlich dazu entschieden, in die Webentwicklung einzusteigen. Wir gratulieren dir zu dieser Entscheidung, denn gerade dieser Bereich der Programmierung führt dich schnell zu anschaulichen Ergebnissen, was mit einem entsprechend hohen Spaßfaktor einhergeht. HTML bietet hierfür die alles entscheidende Grundlage. Auch wenn es sich bei der Hypertext Markup Language lediglich um eine Auszeichnungssprache handelt, so liefert sie dennoch die Basis, um später komplexere Sprachen wie PHP oder JavaScript erlernen zu können. Mit HTML lassen sich keine komplexen Funktionen, Abfragen oder Schleifen entwickeln. Diese fehlende Komplexität sorgt für einen überschaubaren Funktionsumfang, der sich in wenigen Schritten erlernen lässt. Daher: Starten wir direkt in unser „HTML5 Tutorial Deutsch – Teil 1“.
Vorrausetzung für das HTML5 Tutorial Deutsch – Teil 1
Um dieses Tutorial durchführen zu können, benötigst du nichts weiter als einen PC auf dem ein beliebiger Texteditor und ein Browser deiner Wahl installiert ist.
Einfache Texteditoren für Windows und/oder Mac OS:
– Brackets
– Notepad++
– Gedit
– CotEditor
Um die ersten Schritte in HTML gehen zu können und die grundsätzliche Funktionalität einer Auszeichnungssprache zu verstehen, ist ein einfacher Texteditor völlig ausreichend. Für umfangreichere Entwicklungen sind What-You-See-Is-What-You-Get-Editoren (WYSIWYG) sinnvoll. Doch hierzu später mehr.
Als Browser lassen sich Firefox, Safari, Edge, Opera und viele weitere Alternativen verwenden.
Alles beginnt mit einem ‚Hallo Welt‘-Skript
Öffne deinen Text-Editor und füge folgende Zeilen in den Textbereich ein:
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Tutorial Deutsch</title>
</head>
<body>
<p>Hallo Welt!</p>
</body>
</html>
Speichere die Datei an einem beliebigen Ort unter dem Namen index.html ab. Über deinen Finder oder Datei-Browser suchst du die Datei und öffnest sie mit dem von dir bevorzugten Browser. Wenn alles wie geplant funktioniert, zeigt dir dein Browser eine weiße Seite an, auf der lediglich die Worte ‚Hallo Welt!‘ zu sehen sind. Die übrigen Bestandteile der Datei – die wir uns gleich im weiteren Verlauf ansehen werden – nutzt der Browser, um deine Ausgabe zu interpretieren und sie deinen Vorgaben entsprechend darzustellen.
Auszeichnungen werden in HTML von eckigen Klammern umfasst – zu sehen im Beispiel <body> – und werden als Tags (englisch ausgesprochen) bezeichnet. Bis auf wenige Ausnahmen werden Inhalte einer HTML-Datei von einem öffnenden und einem schließenden Tag umschlossen. Beispiel: <p>Hallo Welt!</p>. Mit dem Befehl <p> (Das p kennzeichnet einen paragraph – zu deutsch: Absatz) signalisiert die HTML-Datei dem Browser: „Hier beginnt ein Absatz!“ und mit dem schließenden p-Tag: </p> wird der Browser darüber informiert, dass der Absatz beendet ist.
Das HTML-Grundgerüst
Jedes HTML-Dokument wird von einem html-Tag umfasst:
<html>
… ganz viel Quelltext und Inhalte …
</html>
Nach dem öffnenden html-Tag folgt der head-Bereich:
<html>
<head>
… diverse Metainformationen rund um deine Datei/Webseite …
</head>
…
</html>
Die im <head>-Bereich deines HTML-Dokuments hinterlegten
Informationen werden nicht im Seitenbereich deines Browsers angezeigt.
Hier hinterlegst du eher Informationen über dein Projekt bzw. deine Webseite. Bspw. kannst du dich als Autor oder Entwickler verewigen, deiner Seite einen Titel vergeben, Informationen liefern, die Google als Suchergebnis auswerten kann, externe Dateien einbinden u.v.m.
Wichtige Tags für den <head>-Bereich sind bspw. <title></title>, <meta> oder auch <link>. Doch lass uns hierauf später noch einmal genauer schauen. Denn entscheidender für den Einstieg ist der <body>-Bereich, der sämtliche Inhalte, die auf unserer Webseite zu sehen sein sollen, beherbergt:
<html>
<head> … </head>
<body>
… die Inhalte deiner Webseite (Texte, Bilder, Formulare, Videos, …)
</body>
</html>
Jetzt wird es spannend. Im Body-Bereich deines HTML-Dokumentes kannst du sämtliche Inhalte hinterlegen, für die dir zahlreiche Tags bereitgestellt werden. So stehen bspw. die Tags <h1></h1> bis <h6></h6> für unterschiedlich zu kategorisierende Überschriften. Hierbei sollte die Hauptüberschrift von einem <h1>-Tag umschlossen und auch nur ein einziges Mal im HTML-Dokument enthalten sein.
Den <p>-Tag kennen wir bereits. Er beinhaltet lange Textabsätze, in denen einzelne oder auch mehrere Wörter mit weiteren Tags formatiert werden können. So stellt der Befehl <i></i> bspw. einen Text in kursiver Schrift dar. Die Tags <b></b> oder <strong></strong> fetten den umschlossenen Text ein.
Ergänzen wir das Gelernte in der oben begonnenen HTML-Datei:
<html>
<head>
<title>HTML 5 Tutorial Deutsch</title>
</head>
<body>
<h1>Hier steht meine Hauptüberschrift</h1>
<p>Es
folgt ein erster Einleitungsabsatz in dem <i>dieser Teil
kursiv</i> und <b>dieser Teil fett</b> geschrieben
ist.</p>
<h2>Gönnen wir uns eine Zwischenüberschrift</h2>
<p>Als Fazit bleibt festzuhalten, dass dieses Tutorial wirklich ziemlich gut ist.</p>
</body>
</html>
Wie du im Browser erkennen solltest, haben wir unsere ursprüngliche Datei um zwei Überschriften und geringfügig formatierte Textelemente erweitert.
Und hiermit endet auch schon der erste Teil unseres HTML5 Tutorial Deutsch. Wir hoffen, dir mit diesem ersten Einstieg einige hilfreiche Tipps an die Hand gegeben zu haben.
