HTML 5 Tutorial – (1) Einführung und Vorbereitung

HTML 5 Tutorial Teil 1

In dieser Artikelreihe verrate ich dir wie du schnell und effektiv HTML 5 lernst. In diesem Artikel bekommst du erstmal eine kleine Einführung in HTML 5. Am Ende des Artikels wirst du dann bereits deine erste Webseite erstellen.

Das wirst du lernen:

  • Was HTML so alles kann
  • Was genau ein Tag ist
  • Warum du einen Code Editor benötigst
  • Wie man eine Webseite erstellt

Ich werde in diesem Artikel relativ kurz auf die Theorie von HTML eingehen. Somit beginnst du recht schnell mit der Praxis und siehst erste Fortschritte. Nun lass uns aber endlich loslegen 🙂


Was genau macht HTML eigentlich?

Die Hypertext Markup Language (kurz HTML) ist eine Auszeichnungssprache für Webinhalte. Sie erlaubt es uns Inhalte sinnvoll zu strukturieren und auszugeben. Das geschieht im Normalfall über einen Browser wie Firefox oder Chrome. HTML ist also keine Programmiersprache die es erlauben würde dynamische Inhalte darzustellen.

Weniger spannend ist HTML deshalb aber nicht. Wir können nämlich Webseiten damit erstellen. Mittlerweile können wir auch Videos und Audiodateien direkt mit HTML ausgeben. Dazu komme ich in einem späteren Artikel dieser Artikelreihe. Nun kommen wir erstmal zu den sogenannten Tags.


Was ist ein HTML Tag?

Html Tags sind, einfach erklärt, Schlüsselbegriffe für den Browser. Mit der Angabe eines Tags sagst du dem Browser was er darstellen soll. Der Browser kann so zwischen Überschriften, Absätzen, Bildern und anderem Content unterscheiden und diesen auch anders darstellen und behandeln. Mit dem folgenden Codeschnipsel würdest du deinen Browser anweisen eine Überschrift auszugeben.

<h1>Ich bin eine Überschrift</h1>

Um die Ausgabe von Überschriften kümmern wir uns praktisch im nächsten Artikel. Nun benötigst du erstmal einen Code Editor!


Warum du einen Code Editor brauchst

Streng genommen könnten wir unseren Code auch in einem herkömmlichen Text Editor erstellen. Allerdings weiß dieser nicht was ein Tag ist. Da bist du dem Text Editor Word also schon weit voraus :-). Daher solltest du auch mit einem Code Editor arbeiten. Auf die Vorteile eines Code Editors gehe ich im folgenden kurz ein.

Vorteile von Code Editoren:

Die Fehleranalyse ist gerade für dich als Anfänger eine gute Sache. Doch auch wenn du erfahrener in der Programmierung bist wird sie unverzichtbar sein. Mittlere bis große Projekte sind oft fehleranfällig in der Entwicklung. Immerhin hast du es dort mit sehr vielen Zeilen von Code zu tun.

Das Hervorheben der Syntax bringt auch einen grossen Vorteil. Der Code wird farblich dargestellt und somit übersichtlicher. Doch das wirst du gleich selber sehen. Daher gehe ich hier nicht weiter auf das Syntax Highlighting ein.

Es gibt mittlerweile eine große Anzahl von Code Editoren. Hier eine kleine Liste der, von Entwicklern, am häufigsten genutzten Code Editoren.

Welchen du für deine Projekte wählst bleibt dir überlassen. In der Anwendung unterscheiden sich die Editoren kaum voneinander. Nachdem installieren eines Code Editors bist du bereit dafür deine erste Webseite anzulegen. Los geht es!


Deine erste Webseite anlegen

Lege dir zunächst einen Ordner für dein Projekt an. Nenne ihn zum Beispiel erste-Webseite. Öffne dann den von dir gewählten Code Editor und erstelle eine neue HTML Datei. Einige Editoren erstellen direkt ein HTML Grundgerüst. Sollte das bei dir nicht der Fall sein, kopiere bitte folgenden Code in deine Datei.

<!DOCTTYPE html>
<html lang="de">
<head>

</head>

<body>
	
</body>

</html>

Du definierst mit dem HTML Grundgerüst die verschiedenen Bereiche deiner Webseite.

In Zeile 1 sagst du dem Browser mit <!DOCTYPE html> das es sich hier um ein Html Dokument handelt. In der nächsten Zeile folgt die Angabe der Sprache deiner Webseite <html lang=“de“>. Mit diesen beiden Angaben ist deine erste Webseite eröffnet.

In der dritten Zeile folgt der head Bereich <head>. Hier wirst du später Informationen für die Suchmaschine speichern. Zum Beispiel den Titel der Webseite. Diesen Abschnitt schließt du in Zeile 5 mit </head> wieder.

Nun folgt der wichtigste Teil deiner Webseite der Body Bereich <body>. Hier kommen alle Inhalte hinein die du auf deiner Webseite angezeigt bekommen möchtest. Auch dieser Abschnitt wird mit </body> wieder geschlossen. Genauso wie deine Webseite dann mit </html>.

Speichere nun die Datei unter dem Namen index.html in deinen zuvor erstellten Projektordner.

Herzlichen Glückwunsch, du hast soeben deine erste Webseite erstellt 🙂

Öffne nun, durch doppelklicken auf deine Datei, deine Webseite im Browser. Du solltest nun lediglich eine weiße Seite zu sehen bekommen. Das liegt daran das du deiner Webseite noch keinen anzuzeigenden Inhalt hinzugefügt hast. Das werden wir aber gleich ändern.

Im nächsten Artikel fügst du deiner Webseite die ersten Inhalte hinzu. Bleibe also am Ball um weitere Fortschritte zu machen 😉



One thought on “HTML 5 Tutorial – (1) Einführung und Vorbereitung

Schreibe einen Kommentar

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