Wie, wo, was? HTML… – Eine Sprache für sich!

HTML…

Ja, HTML! Wahrscheinlich haben bereits viele von euch schon mal von der Abkürzung „HTML“ gehört. Eventuell ist für euch auch schon klar gewesen, dass eigentlich unser komplettes Internet darauf basiert, jedoch höchstwahrscheinlich nicht viel mehr. Aber macht euch darüber keine Gedanken, denn für so etwas bin ich ja schließlich da °-°! Ich selbst habe vor einiger Zeit aus Interesse angefangen, mich intensiver und intensiver mit dem Thema HTML zu beschäftigen. Ich werde versuchen euch ein wenig in diese verrückte, aber in der heutigen Zeit wichtige, Sprache einzuführen.

Viel Spaß ^^!

Zuallererst sind einige , mehr oder wenige wichtige Informationen zu nennen…

1: HTML ist bei weitem keine Programmiersprache… Viel mehr eine Seitenbearbeitungssprache mit der man Texte definieren und schlicht und ergreifend eine Seite erstellen kann.

2: Um HTML nutzen zu können, ist kein großartiges Programm von Nöten… Es reicht der Windows Editor, zusätzlich gibt es aber auch weitere Programme wie Phase 5, um das Arbeiten mit HTML zu vereinfachen.

3: HTML folgt einem einfachen Prinzip – Man eröffnet einen bestimmten Befehl, schreibt etwas und schließt diesen wieder. Sozusagen : Auf_Hallo Welt_Zu

1.Das erstellen eines HTML Dokuments!

Zuallererst geht es darum, unser Dokument zu öffnen. Dafür geht man auf die vorinstallierte Windowsapp „Editor“. Dort kann man nun seinen beliebigen Text schreiben, zu welchem wir aber später noch kommen werden…

Editor Screenshot

Dort geht man zuerst auf das Menüfeld Datei>Speichern unter. Nun wählt man seinen beliebigen Speicherort aus. Nun ist es wichtig, im unteren Teil des geöffneten Fensters den Dateityp von Textdateien (*.txt) auf Alle Dateien (*.*) zu ändern. Alternativ kann man auch sein Textdokument von ABC*.txt auf ABC.html umbenennen.

Speichern unter falsch Screenshot
Wechseln auf:

Speichern unter richtig Screenshot

Sobald man alles richtig gemacht hat, muss man sein Dokument Mithilfe seines Browsers öffnen und einem wird sein fertiges Dokument angezeigt. So sollten keine Probleme aufkommen! Zuvor genannte Befehle, zu denen ich jetzt kommen werde, werden automatisch umgesetzt, Bilder eingefügt und alles anständig dargestellt. Um das Dokument zu bearbeiten, muss man es erneut mithilfe des Editors öffnen und die Ursprungsdatei wird angezeigt.

2. Die Befehle innerhalb eines HTML Dokuments!

In der Sprache HTML gibt es sehr viele Befehle. Anfangs sieht es so aus, als ob diese einen erschlagen werden, jedoch benutzt man meistens nur einige wenige, mit denen man auch häufig zu tun hat. Der Rest ist meist nur eine bessere Darstellung oder ähnliches, wird anfangs aber keinesfalls benötigt. Ich versuche euch nun die für den Anfang wichtigen Befehle zu geben. Ich würde euch raten, immer direkt mitzumachen, um die Befehle direkt umsetzen zu können.

Wie oben schon genannt, folgt HTML einem Prinzip:

Auf_…_Zu!

Dieses Auf_…_Zu stellt man als < und > dar. Bevor ich aber irgendeinen Quatsch erzähle, schaut es euch selbst an…

Das Öffnen eines HTML Dokuments leitet man folgendermaßen ein:

<html> … </html>

Auf_……….._Zu

So wird dem klar, dass es sich bei unserem Geschriebenen, um ein HTML Dokument handelt. Der komplette Text der später auf unserer Seite landen soll, wird zwischen diese beiden Klammern geschrieben. Ich würde als Anfänger empfehlen, die verschiedenen Befehle untereinander zu schreiben, damit alles übersichtlich bleibt. In der Theorie könnte man auch alle Befehle in einer Zeile schreiben, jedoch empfinde ich persönlich dies als sehr unhandlich und unübersichtlich.

Außerdem wird ein HTML Dokument unterteilt in einen sogenannten <head> und einen <body>. Wie die Namen es schon sagen, ist der <head> hauptsächlichfür die Benennung der Seite also deren Namen zuständig. Außerdem kann man damit noch einige Sachen mehr definieren, jedoch sind diese für uns momentan noch unwichtig. In dem <body> kommt eigentlich der komplette Text hin. Auch dort kann man wieder einige Sachen genauer definieren, aber wie beim <head> sind diese für uns momentan noch unwichtig.

Um nun unseren Titel festzulegen, verwendet man den Befehl <title>. Dies sieht folgendermaßen aus:

Unbenannt

Wir eröffnen unser Dokument mit <html>, öffnen den <head> Bereich und benennen unsere Seite mithilfe des Befehls <title> auf den Namen 123. Dies sieht in der späteren Darstellung folgendermaßen aus:

URL

Da wir bisher noch keinen Text geschrieben haben, wird dort auch nichts angezeigt.

Um nun unseren Text so zu schreiben, dass er überall gleich angezeigt wird, verwendet man Befehle wie:

<p>…</p>

oder auch

<br>…</br>

Mit <p> verursacht man einen simplen Absatz und mit <br> einen Zeilenumbruch. Diese benutzt man im Regelfall nur im <body>, wie eigentlich auch alle weiteren Befehle welche nun kommen.

Um Texte hervorzuheben verwendet man Überschriften. Diese sind von 1-6 gekennzeichnet und sehen folgendermaßen aus:

<h1> – Größte Überschrift

<h2> – Zweitgrößte Überschrift

<h3> – Drittgrößte Überschrift

<h4> – Viertgrößte Überschrift

<h5> – Fünftgrößte Überschrift

<h6> – Kleinste Überschrift

Diese verwendet man beispielsweise so:

<p><h2> Hallo und willkommen auf unserem Blog </h2></p>

In diesem Fall hätten wir einen Absatz und die zweitgrößte Überschrift.

Und so kann man mit den verschiedensten Befehlen weitermachen… Man kann Farben und Schriftarten bestimmen, Bilder einfügen, Tabellen definieren, Grafiken einfügen und noch Vieles mehr. Mit diesen wenigen Befehlen lassen sich jedoch schon die ersten Texte verfassen. Falls euch dieses Thema interessiert, könnt ihr mir gerne Kritik, Rückmeldungen sowie Tipps geben. Wenn ihr Lust auf mehr zum Thema HTML habt, meldet euch, schreibt einen Kommentar oder ähnliches und ich kann gerne bald mehr machen…

LG

Oskar 😉

 

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s