HTML für Einsteiger: Wie Sie die Grundlagen von HTML 5 leicht verstehen und Schritt für Schritt eine erste Webseite aufbauen und gestalten

Timo Freitag

• Verlag: Books on Demand
• Jahr: 2022
• ISBN drucken: 9783755755098
• eBook-ISBN: 9783755789918
• Auflage: 1
• Thema: Computer Science
• Thema: Computer Science General

Milliarden von Menschen nutzen täglich das Internet, um sich zu entspannen, weiterzubilden oder um Spaß zu haben. Das Internet bietet beinahe unendlich viele Möglichkeiten und einer der wichtigsten Bausteine des Internets sind Websites. Man mag nun meinen, es wäre schwer, eine solche Website zu erstellen, dabei ist die Basis einer Website, nämlich HTML, weder schwer zu verstehen noch zu erlernen. Mit diesem Buch werden Sie an das Thema HTML herangeführt und lernen nicht nur, was HTML eigentlich ist und wofür man es benutzt, sondern werden Schritt für Schritt HTML-Code schreiben und damit arbeiten. Hierfür wird es immer einen Theorieteil geben, welcher eine neue Funktion behandelt und erklärt, woraufhin Übungen folgen werden. Diese dienen dazu, das Gelernte direkt anzuwenden und dabei erste Erfolge zu erleben.

Wie erstelle ich
eine eigene Website
mit HTML?

WAS BRAUCHE ICH, UM OPTIMAL
FOLGEN ZU KÖNNEN?

Da dieser Abschnitt des Ratgebers nicht nur aus reiner Theorie besteht, sondern auch sehr viel Praxis enthält, sollten Sie darauf vorbereitet sein. Hierfür brauchen Sie folgende Dinge:

Einen Laptop oder PC, da man an diesen Geräten am besten mit HTML arbeiten kann und Tablets wie auch Handys für solche Projekte grundlegend eher ungeeignet sind. Es spielt hierbei keine Rolle, ob Ihr Computer alt oder neu ist, solange Sie irgendein Gerät besitzen, sollte dieses für die folgenden Aufgaben mehr als ausreichen.

Einen Texteditor, denn um HTML-Code zu schreiben, brauchen wir auch etwas, in das wir ihn reinschreiben können. Die meisten Betriebssysteme haben bereits einen Texteditor installiert. Sollte sich keiner auf Ihrem Gerät finden, so laden Sie einfach einen herunter. Hierbei tut es jeder beliebige Texteditor, wobei es auch Editoren gibt, welche noch zusätzliche hilfreiche Dinge enthalten.

Visual Studio von Microsoft bietet z. B. den Vorteil, dass verschiedene Elemente farblich voneinander abgetrennt werden und dass der Editor sofort erkennt, was für eine Art von Code Sie gerade schreiben möchten und automatisch die richtige Datei für Sie erstellt. Sollten Sie also keinen Texteditor haben oder es ausprobieren wollen, empfehle ich Ihnen Visual Studio einmal herunterzuladen. Sollten Sie den Texteditor Ihres Betriebssystems verwenden, dann wundern Sie sich nicht über das einfache Erscheinungsbild. Der Texteditor dient lediglich dazu, den notwendigen Code aufzuschreiben. Alles andere, was aus Ihrem Code eine Anwendung oder Website macht, übernimmt ein anderes Programm, was in manchen modernen Texteditoren schon integriert ist.

Einen Browser, wobei es sich hier anbietet, einen Browser wie Mozilla Firefox oder Chrome zu verwenden. Wir benötigen diesen, um unsere Aufgaben zu kontrollieren, denn diese können unsere HTML-Dokumente auslesen und uns anzeigen sowie das bei jeder Website, die wir öffnen, auch automatisch getan wird.

DIE GRUNDLEGENDE SYNTAX

Die meisten Elemente von HTML folgen dem gleichen Prinzip. Es gibt einen Starttag, danach kommt der Inhalt, abschließend kommt der Endtag. Dies passiert, wenn beispielsweise ein Text als kursiv dargestellt werden soll. Wenn ich einen Text als kursiv darstellen möchte oder nur ein einzelnes Wort im ganzen Text, muss ich diese Auswahl treffen können. Mit dem Start- und dem Endtag definiere ich also, an welcher Stelle meine Formatierung anfängt und wo sie wieder aufhört. Das sieht dann in HTML wie folgt aus:

<p>Dies ist ein Beispiel </p>

Was das p bedeutet und macht, lernen wir später, dies gilt für alle verwendeten Tags in diesem Abschnitt, da diese nur als Beispiele dienen sollen, um die Syntax zu verstehen. Die umschließenden Vergleichszeichen <> signalisieren, dass das Element beginnt und durch die Vergleichszeichen mit dem Schrägstrich wird das Element beendet. In die Vergleichszeichen kommt dann eine spezifische Abkürzung für eine Anweisung, von welchen wir später noch einige kennenlernen werden. Wird diese Syntax nicht eingehalten, kann es zu sehr komischen Ergebnissen kommen, daher sollten Sie darauf achten, die Syntax nach Möglichkeit einzuhalten.

Man kann auch mehrere Tags ineinander verschachteln, aber auch hier gibt es ein paar Sachen zu beachten. Hier ist ein Beispiel.

<p>Dies ist ein <em>Beispiel</em> </p>

Wie man sehen kann, gibt es einen äußeren und einen inneren Tag. Diese Anordnung führt dazu, dass der äußere Tag für den gesamten Satz gilt, während der innere em-Tag nur für das Wort Beispiel gilt.

Würde man die Tags wie in folgendem Beispiel anordnen:

<p>Dies ist ein <em>Beispiel</p></em>

So wüsste der Browser nicht was er tun sollte, da der em-Tag von einem p-Tag umschlossen wird, ohne selbst abgeschlossen zu sein. In diesem Fall würde das dazu führen, dass der Browser praktisch raten würde, was das eigentliche Ziel Ihrer Anweisungen war, was zu unerwünschten Ergebnissen führen kann, daher sollte man bei der Verschachtelung von Tags immer darauf achten, dass sie in der umgekehrten Reihenfolge geschlossen werden müssen, in welcher sie geöffnet wurden. Falls Ihnen das schwierig vorkommt, so merken Sie sich einfach, dass ein Starttag oder ein Endtag niemals ohne den jeweils anderen innerhalb eines weiteren Elements stehen darf.

Eine weitere Unterscheidung, die wir hier treffen, sind die Elemente, welche keinen Endtag benötigen. Dies sind meistens die Tags, welche etwas in die Website einbauen, wie beispielsweise ein Bild oder ein Video. Hier wird kein Text strukturiert oder Ähnliches, es muss also auch keine Auswahl getroffen werden. Somit sind keine Endtags notwendig. Solche Tags werden später noch einmal behandelt, wenn es darum geht, ein Bild zu Ihrer Website hinzuzufügen.

Außerdem gilt es noch zu erwähnen, dass es bei Tags grundlegend egal ist, ob sie groß- oder kleingeschrieben werden. Sie können also <em>, <EM>, oder sogar <eM> schreiben und HTML wird die zugehörige Anweisung ausführen. Dennoch sollten Sie alles kleinschreiben, da es am einfachsten zu realisieren ist und die geringste Fehlerquote mit sich bringt.

WIE MANAGE ICH MEINE
DATEIEN?

Im Verlauf der weiteren Schritte werden Sie nicht nur mit Texten, sondern auch mit Bildern und Videos arbeiten. Grundlegend stellt sich natürlich die Frage, wo auf Ihrem Rechner sich Ihre Website befinden sollte.

Am besten ist es, wenn Sie einen Ordner erstellen, welchen Sie an einem Ort platzieren, auf den Sie leicht zugreifen können, wie z. B. Ihren Desktop. Legen Sie dann zwei weitere Ordner in diesem Ordner an, welche Sie „images“ und „videos“ nennen. Grundsätzlich können Sie natürlich auch alles Deutsch benennen, aber da Ihre Website später vielleicht auch international verständlich sein soll und da die Sprache der Informatik Englisch ist, ergibt es nur Sinn, sich anzugewöhnen, seine Dateien mit englischen Titeln zu versehen.

Vermutlich ist Ihnen bereits aufgefallen, dass alle Datei- und Ordnernamen kleingeschrieben sind und das sollten Sie auch übernehmen. Die Begründung ist relativ simpel. Viele Programme machen einen Unterschied bei Groß- und Kleinschreibung, das heißt, dass wenn Sie eine Datei Bild1 nennen und dann später versuchen, dieses Bild mit bild1 aufzurufen, wird das nicht funktionieren. Gewöhnt man sich an, alles erst einmal kleinzuschreiben, umgeht man diese Fehler und erspart sich so viele unerwünschte Fehlermeldungen und Probleme. Der Fall kann natürlich auch umgekehrt auftreten. Haben Sie ein Programm, welches keinen Unterschied zwischen Groß- und Kleinschreibung macht, und Sie wollen zwei verschiedene Dateien Bild1 und bild1 benutzen, so wird das Programm sie für dieselbe Datei halten, was genauso problematisch ist. Viele Programm...

Inhaltsverzeichnis

• Inhaltsverzeichnis
• Das erwartet Sie in diesem Buch
• HTML – Die Grundlage des Internets
• Wie erstelle ich eine eigene Website mit HTML?
• Wie geht es nach HTML weiter?
• Impressum