Was ist HTML?

Dieser Artikel wurde von unserem Praktikanten Saleh geschrieben. „Wir danken dir sehr!“

Das gesamte Internet besteht aus ihnen, mal schauen sie weniger gut aus, mal nahezu perfekt. Egal ob du als Privatperson eine besitzt oder es für deine Firma ist, Internetseiten dienen meist dazu, sich selbst bzw. seine Dienstleistung zu vermarkten. Heute wird das Internet immer bedeutender und somit ist es sehr wichtig, sich dort auch gut präsentieren zu können. Der Großteil an Personen besucht Internetseiten ohne sich mal zu fragen, wie solch eine Seite entstehen kann, aber wozu auch, es gibt sie einfach. Man muss lediglich einen Suchbegriff bei Google eingeben und schon wird man tonnenweise mit Links zu ihnen vollgespammt.

Wenn man sich aber mal etwas genauer mit ihnen auseinandersetzt merkt man schnell, dass viel mehr hinter solch einer Seite steckt, als man sieht, denn eine Internetseite spricht ihre ganz eigene Sprache. Diese Sprache verbirgt sich hinter dem sogenannten Quelltext, welcher auf jeder Internetseite zu finden ist. Es genügt schon ein Rechtsklick auf die Seite und du solltest den Reiter Quelltext zu sehen bekommen. Nach einem kurzen Klick darauf, wird einem meist schon schwindelig und du würdest am liebsten gleich wieder wegklicken. Doch Moment! Es sieht zwar alles sehr kompliziert und irreführend aus, doch ist es in Wahrheit gar nicht so schwer wie es auf den ersten Blick ausschaut. Hinter diesem Durcheinander an Code verbergen sich verschiedene Websprachen, häufig HTML, CSS, Javascript oder PHP.

Doch für eine einfache Internetseite sind einige Kenntnisse in HTML und CSS schon völlig ausreichend. Und am Ende stellt man fest, dass es dann doch gar nicht so schwer war, wie man anfangs dachte. Doch nun zum Wesentlichen.

HTML

HTML (Hyper Text Markup Language) ist sozusagen die Sprache, welche die Struktur der Internetseite festlegt. Dadurch ist es uns beispielsweise möglich Texte, Bilder oder Links einzubinden. Aber auch das Erstellen von Auflistungen und Tabellen ist mit HTML möglich.

 HTML-Grundstruktur:

<html>

<head>

<title>Titel</title>

</head>

<body>

<p>Text</p>

</body>

</html>

HTML-Aufbau

Jeder HTML-Code beginnt zunächst mit dem Tag <html> und endet mit </html>. Der Tag <html> sagt, dass der HTML Code hier beginnt und das </html> sagt aus, wann der Code endet. Nahezu jeder HTML-Tag befolgt diese Regel.

HTML kann man auch als eine Art Mensch betrachten, denn der Code gliedert sich in einen Kopf Bereich <head> und in einen Körperbereich <body>. Alles, was sich im Head Bereich befindet, sind meist der Titel der Internetseite und einigen Meta-Informationen, welche dazu dienen die Seite für Google zu beschreiben, um besser von der Suchmaschine gefunden zu werden. Der Body Bereich dagegen, enthält alles, was auf der Seite zu finden ist, wie zum Beispiel Texte oder Bilder.

Durch den Tag <title> gibt man der Internetseite einen Seitentitel, der oben bei den Seitenreitern zu sehen ist. Der Titel befindet sich immer im Head Bereich.

Um Texte auf der Homepage schreiben zu können, wird der Tag <p> (Paragraph)  benötigt. Alles was zwischen den beiden <p></p> Tags steht wird als Text im Browser angezeigt.

Da ein Text nun mal auch eine bzw. mehrere Überschriften benötigt gibt es die Tags <h1> bis <h6>. Dabei ist der Tag mit der kleinsten Zahl die größte und somit wichtigste Überschrift, sie sollte auf der Internetseite mindestens einmal vorkommen. Ebenfalls häufig verwendet wird <h2> als Unterüberschrift, welche man mehrmals verwenden kann. Alle anderen heading-Tags werden heut zu Tage kaum noch verwendet.

Genauso gut lassen sich Texte oder bestimmte Wörter fettgedruckt, kursiv oder unterstrichen anzeigen. Dazu gibt es die Tags <b> (bold), <i> (italic), und <u> (underline). Sie können problemlos mitten in einem Paragraphen (<p>) vorkommen. Jedoch bleibt von diesen Tags abzuraten, da man heut zu Tage für das Aussehen von Text und Seite die Websprache CSS verwendet, doch gleich mehr dazu.

HTML – Verlinkungen

Interne oder externe Verlinkungen, sprich innerhalb und außerhalb deiner Webseite kannst du durch <a href=“URL“>Text</a> darstellen. Das „href“ (hyperreference) wird innerhalb des ersten Tags definiert und enthält die Adresse der Internetseite, auf die weitergeleitet werden soll.

<a href=“http://www.google.de/“>Google</a>

Nun sollte ein blau hinterlegter Text mit dem Inhalt „Google“ erscheinen, welcher direkt auf die Suchmaschine Google weiterleitet.

HTML-Link in einem Bild

Das Einbinden von Bildern hat einen ähnlichen Aufbau wie ein Link, jedoch verzichtet der Befehl im Gegensatz zu den meisten anderen Befehlen auf einen Endtag.

<img src=“bild.png“>

Mit „src“ (source) wird auf das Bild verwiesen, welches du auf deiner Homepage haben möchtest. Achte aber darauf, dass du die Dateiendung immer mit angibst, da das Bild sonst nicht im Browser geladen wird. Es ist auch möglich einen unsichtbaren Link in Bildern zu verstecken, so ähnlich funktionieren beispielsweise Werbebanner auf Internetseiten. Dazu benutzt man einfach wieder den Link-Tag, welcher den Image-Tag umschließt.

<a href=“http://www.google.de/“><img src=“bild.png“></a>

Sobald man nun auf das Bild klickt, wird man wie beim Link auf die angegebene Internetseite, in dem Fall Google, weitergeleitet.

HTML abspeichern

Das waren die wichtigsten Funktionen zum Thema HTML. Um anschließend deine hauseigene Seite speichern zu können, gehst du wie folgt vor:

„Datei“ -> „Speichern unter“ -> bei Dateityp „Alle Dateien“ auswählen -> zuletzt den Namen mit der Endung „.html“ (alternativ „.htm“) eingeben -> auf Speichern klicken.

Jetzt wird das gespeicherte Dokument als HTML-Datei erkannt und ist somit eine funktionsfähige Internetseite, welche man problemlos mit dem Internet Browser aufrufen kann.

1 Antwort

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

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