Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Einführung in die Webprogrammierung

HTML erforschen

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das grundlegendste Werkzeug ist ein Editor und das grundlegendste Mittel zum Strukturieren von Text für eine Webseite ist die Seitenbeschreibungssprache HTML.

Transkript

Das Kernstück jeder Webseite ist der Text, der darauf dargestellt wird und dieser wiederum wird strukturiert mit der Hilfe von HTML. HTML ist eben eine Auszeichnungssprache, und um HTML zu schreiben, braucht man nicht viel. Man braucht einen ganz einfachen Editor. Ich habe hier den windowseigenen Editor, weil jedes Betriebssystem kommt mit einem eigenen Editor und der kann nun wirklich nicht viel, der kann gerade mal Text darstellen. Aber im Unterschied zu einem Textverarbeitungsprogramm hast du im Office-Bereich interpretiert er nichts, formatiert er nichts, das überlässt er alles mir. Das einzige, was dieser Editor tut, ist, er speichert dann meinen Text Gut, ich speicher jetzt auf jeden Fall meine zukünftige Webseite und wenn ich das tue, muss ich auf zwei, drei Kleinigkeiten achten. Das erste ist einmal der Dateiname. Ich nenne meine erste Seite "Hallo", dann kommt ein Punkt, jetzt kommt die Dateiendung. Und die Dateiendung für eine normale Webseite ist "html". Diese Endung bewirkt, dass mein Betriebssystem, wenn es diese Endung sieht, schon sagt, "Oh, ich brauche einen Browser, um die Datei zu öffnen." Und der Browser kennt sich ebenfalls aus und fühlt sich angesprochen. Hier sagen wir mal alle Dateien und das zweite, das wichtig ist, ist die Kodierung. Voreingestellt beim Editor ist in dem Fall "ANSI" Ansi ist das, womit der Editor seinerseits alles kodiert. und da sind wir besser aufgehoben, wenn wir wechseln auf "UTF-8". Das liegt daran, weil UTF-8 bei der Kodierung dafür sorgt, dass auch alle Sonderzeichen korrekt kodiert werden können. Das ist etwas, das Sie im Vorfeld einstellen müssen. Im Nachhinein können Sie diese Kodierung, die seitens des Editors im Hintergrund läuft, nicht mehr verändern. Wir sagen "Speichern" und jetzt habe ich also schon ein HTML-Dokument. Und in das schreibe ich jetzt "Meine erste HTML-Seite" und speichere das Ganze nochmal und werde mir das Ganze mal in meinem Ordner ansehen. Im Ordner sehen Sie, dass aufgrund der Dateiendung ich auch hier gleich das Symbol meines Standardbrowsers zur Verfügung habe. Und wenn ich jetzt doppelklicke, lande ich nicht im Editor, sondern eben in meinem Browser und die Seite wird zwar vom Betriebssystem aus, aber im Browser dargestellt. Und Sie werden sich denken: Ja, erledigt und hier im Browser wird genau das ausgegeben, was ich geschrieben habe. Das ist aber nur die halbe Wahrheit, denn drücken Sie doch mal, wenn Sie im Firefox sind, F12. Damit öffnen Sie nämlich den Inspektor, der Ihnen dabei hilft, ihre Seite zu untersuchen. Und was Firefox und jeder andere Browser auch freundlicherweise macht, wenn Sie da nur Text stehen haben, bastelt der Browser von sich aus ein kleines Korsett rundherum, das dafür sorgt, dass er diese Seite dann auch darstellen kann. Und dieses Korsett besteht aus sogenannten "Tags", die zum Einsatz kommen. Das alles umschließende Tag ist HTML und damit wird gesagt, was jetzt kommt, ist in HTML geschrieben. Und dann gibt's nochmal zwei Bereiche, nämlich einen Head-Bereich wo da noch nichts drinsteht, der aber trotzdem da ist, und dem Body-Bereich, in dem eben mein Satz steht. Und weil es vernünftiger ist, wenn ich diese Arbeit selber mache und mich nicht darauf verlasse, dass ein Browser so freundlich ist, die Arbeit für mich zu übernehmen, gehen wir jetzt zurück in den Editor und werden genau dieses Korsett um die Seite herumbauen. Das heißt ich gehe da an den Anfang, verschaffe mir ein bisschen Platz und wir haben zuerst gesehen, das Wichtigste ist, eine spitze sich öffnende Klammer, "html"," die spitze Klammer wieder schließen und dann ans Ende des Textes gehen. Ich mache da ein bisschen Platz. Und einen Text schließt man mit so einem Schrägstrich, das heißt "/", "html", spitze Klammer. Damit ist alles, was zwischen diesen beiden Tags steht, HTML. Und dann haben wir zuerst gesehen, gabs da noch einen Bereich, der hieß "Head", und auch der mit einem Schrägstrich wieder geschlossen, stand da ohne zusätzlichen Inhalt. Das werden wir jetzt ein wenig ändern, denn wir werden unserer Seite einen Titel geben. Normalerweise ist es so, dass im Head-Bereich nur Sachen stehen, die in der Webseite selbst nicht ausgegeben werden, bis auf den "title". Wenn wir dann die Seite aktualisieren, wird hier heroben, wenn Sie im Hintergrund schauen, nicht mehr diese lange "Wurst" stehen, sondern da wird dann mein Titel stehen, den ich jetzt vergeben werde und der Titel ist "Hallo", so. Das ist der Head-Bereich, in dem eben alles steht, was nicht ausgegeben wird, außer oben in der Titelzeile und jetzt brauchen wir noch den Body-Bereich. Alles, was innerhalb des öffnenden und sich schließenden Body-Texts steht, geschlossen wird es wieder mit einem Schrägstrich, ist nun etwas, was auf der Webseite selbst dargestellt werden soll. Und wenn ich jetzt möchte, dass das Ganze auch noch mit etwas mehr Struktur dargestellt wird, dann kann ich auch den Elementen selbst noch Struktur mitgeben. In dem Fall möchte ich, dass dieses hier eine Überschrift wird, auf Englisch headline und damit "h" als Abkürzung, und die Zahl dahinter gibt an, welche Hierarchieebene einer Überschrift das hier ist. Und Sie können durchnummerieren von eins, zwei, drei, vier, fünf und "h1" ist die oberste Ebene dieser Überschrift. Würde ich nun meinen Fließtext schreiben wollen, so ist der Tag dafür ein "p", steht für paragraph. Und auch hier schließen tu ich diesen Paragraph wieder mit einem Schrägstrich und das ist ein "ein normaler Absatz". So, Punkt. Und auch das können wir uns jetzt erst einmal speichern. und sehen uns dann an, wie nun das Ganze im Browser ausschaut, indem wir hier die Seite neu laden. Und schon können Sie sehen, dass wir es geschafft haben, einen strukturierten Text zu erzeugen und der vom Browser interpretiert werden kann. Die Spielregeln sind nicht schwer, das haben Sie gesehen. Es geht um Tags, es geht darum, Tags zu öffnen und wieder zu schließen, und es geht darum, dass alles, was zwischen diesen Tags steht, dann speziell ausgezeichnet werden kann. Das ist alles, was HTML ausmacht. Es gibt sehr viele Tags. Sie werden nie alle brauchen und die, die Sie tatsächlich verwenden, die werden Sie schnell in den Griff bekommen. Es ist aber gut, einen Überblick zu haben, welche Tags Ihnen dabei helfen können, gut strukturierten HTML-Text zu erzeugen.

Einführung in die Webprogrammierung

Tauchen Sie ein in die vielfältige Welt von Webdesign und -entwicklung und lernen Sie die wichtigsten Technologien, Programmiersprachen und -tools kennen.

2 Std. 46 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!