Registrieren/Anmelden

Eine Frage stellen

Thema erstellen

Eine erste HTML-Seite erstellen: <html>, <head>, <body>

Wir werden gemeinsam eine HTML-Seite erstellen, den Aufbau und die Grundstruktur einer HTML-Seite verstehen und wie dir der Webseiten-Inspektor dabei hilft.
(Letztes Update von Niklas Baumgärtler am 7.9.2020)

Am Ende wirst du:

  • Wissen wie man den Quell-Code einer Webseite in verschiedenen Browsern ansehen kann
  • Den Webseiten-Inspektor in verschiedenen Browsern benutzen können, um einzelne HTML-Elemente genauer kennenzulernen
  • Ein erstes Webseiten-Projekt angelegt haben
  • Eine erste HTML-Seite erstellt haben
  • Den Aufbau einer minimalen HTML-Seite verstanden haben
  • Wissen was HTML-Tags sind und die zwei Arten die es gibt unterscheiden können
Diese Einheit überspringen

Willkommen im zweiten Teil dieses Kurses. Im letzten Teil haben wir uns ja unsere Programmier-Umgebung und innere Einstellung vorbereitet. Nun beginnen wir mit der Programmierung selbst, indem wir eine erste eigene HTML-Seite erstellen.

In dieser Lektion werden wir uns drei Bereiche ansehen:

  • Die Sprache von Webseiten sichtbar machen
  • Den Webseiten-Inspektor nutzen, um den Aufbau von HTML-Seiten zu verstehen
  • Eine erste eigene HTML-Seite erstellen

1. HTML-Seiten verstehen: Die Sprache von Webseiten sichtbar machen

Wenn man eine Fremdsprache lernt, wirkt diese anfangs oft undurchschaubar, fast zufällig. Erst mit der Zeit gelingt es, Regelmäßigkeiten innerhalb des Gehörten oder Gelesenen zu erkennen und auch einzelne schon bekannte “Bausteine” der Sprache wiederzuerkennen.

Wenn es darum geht, eine Web-Programmier-Sprache zu erlernen, stehen wir zusätzlich noch vor einem weiteren Problem: Wir sehen diese Sprache nicht einmal. Wie sollen wir Regelmäßigkeiten und Bausteine in einer Sprache erkennen, die wir nicht sehen können?

Glücklicherweise ist es uns sehr wohl möglich, die Sprache, die hinter Webseiten steckt, sichtbar zu machen. Dabei hilft uns unser Browser. Er kann uns den ganzen Programm-Code einer Webseite, die wir betrachten, anzeigen. Oder auch über den sogenannten Webseiten-Inspektor nur den bestimmten Teil des Codes, der uns gerade interessiert.

Anmerkung: Der Programm-Code wird übrigens auch Quell-Code oder Source-Code genannt (weil der Ursprung von dem was du als Webseiten-Besucher sehen kannst gewissermaßen aus der Quelle des Programm-Codes entstammt). Ab jetzt werde ich alle drei Begriffe abwechselnd verwenden – auch damit du dich an die allerwichtigsten Fachbegriffe gewöhnen kannst. Aber keine Angst, ich spare im Allgemeinen mit Fachbegriffen 😉

1.1 Wie man sich den Source-Code von Webseiten ansieht

Dabei hilft dir dein Browser. Weil das in einem jeden Browser ein wenig anders aussieht, werde ich das in diesem Fall mit den Browsern Firefox, Chrome und dem auf vielen Computern vorinstallierten Internet Explorer erklären. Die Grundfunktion ist dabei in allen drei Browsern sehr ähnlich, nur ist die Bedienung ein wenig anders.

Dabei gibt es zwei Funktionen, die sich etwas unterscheiden:

  • den Source-Code als Ganzes ansehen: Du siehst alles auf einmal, selbst wenn der Source-Code Fehler enthält. Kann aber (vor allem für Anfänger) auch dazu führen, dass du den Wald vor lauter Bäumen nicht mehr sehen kannst.
  • der Webseiten-Inspektor: Du erkundest gezielt einzelne Elemente einer Webseite. Sehr nützlich, um herauszufinden, wie andere ihre Webseiten gebaut haben. Du kannst damit sogar bestehende Webseiten ein wenig abändern und mit anderem Aussehen betrachten. Das werden wir später dann auch gleich mal ausprobieren.

1.2 Den Source-Code als Ganzes ansehen

Beim Source-Code als Ganzes siehst du dir einfach die ganze dahinterstehende HTML-Datei an. Das hat den Vorteil, dass du sehr viel sehen kannst – selbst Dinge, die der Webseiten-Inspektor vielleicht nicht korrekt anzeigen kann, weil es Fehler im Programm-Code der Webseite gibt. Aber wenn man alles sehen kann, dann sieht man manchmal auch den Wald vor lauter Bäumen (oder in diesem Fall HTML-Elementen) nicht mehr.

Weil es in unterschiedlichen Browsern ein wenig unterschiedlich funktioniert den Source-Code anzuzeigen  werde ich den Vorgang hier mit Bildern beschreiben:

Im Browser Firefox

Im Browser Firefox funktioniert das Anzeigen des Source-Codes sehr einfach. Man besucht eine Webseite, deren Source-Code man anzeigen möchte, macht irgendwo auf der Seite einen Rechtsklick und wählt “Seitenquelltext anzeigen”, also etwa so:

Firefox Sourcecode anzeigen

Dann wird in einem neuen Tab der Source-Code der aktuell angesehenen Seite angezeigt. In diesem Fall sieht das bei mir so aus:

Firefox Sourcecode anzeigen 2

In der Adress-Zeile des Browsers müsste nun vor der Adresse selbst ein “view-source:” stehen. Das ist der HTML-Teil der Webseite. Wenn auch du dieses “view-source:” sehen kannst, hast du es richtig gemacht.

Im Browser Chrome

Im Chrome ist das mit dem Source-Code anzeigen sehr ähnlich wie im Firefox gelöst. Rechtsklick, “Seitenquelltext anzeigen” klicken.

Im Browser Edge/Internet Explorer

Im Internet Explorer funktionert das Anzeigen des Source-Codes mit einem Rechtsklick und dann mit Klick auf “Quellcode anzeigen”.

Dann öffnet sich allerdings kein neuer Tab, sondern der Quellcode wird anders wie im Firefox und Chrome als Teil des Webseiten-Inspektors im unteren Bereich angezeigt.

1.3 Verwirrt? Überfordert? Du glaubst du wirst nie eine HTML-Seite erstellen können?

So ein Source-Code sieht ziemlich… unübersichtlich aus, oder?

Du magst dir jetzt ein wenig so vorkommen wie jemand, der zum ersten Mal in einem fremden Land ist, und feststellt, dass er von der Sprache, die dort gesprochen wird, kaum etwas versteht. Keine Angst, das ist normal am Anfang. Doch sehr bald schon wird es dir gelingen, immer mehr Teile einer beliebigen Webseite, von der du dir den Source-Code ansiehst, zu verstehen.

Der größte Teil aller Webseiten besteht nämlich aus Wiederholungen von nur einigen wenigen Bausteinen. Und wenn du diese kennst und ihre Anwendung beherrschst, dann kannst du aus dem Zusammenhang in vielen Fällen auch bei den dir noch unbekannten Bausteinen leicht selbst herausfinden worum es sich handelt.

Lass uns als nächsten Schritt den Webseiten-Inspektor ansehen. Dieser  wird dir anfangs mehr helfen, weil man nicht so viel auf einmal erfassen muss.

1.4 Den Webseiten-Inspektor nutzen

Beim Webseiten-Inspektor kannst du sehr gezielt einzelne Teile der Webseite betrachten, etwa ein einzelnes Listen-Element oder eine Überschrift. Außerdem siehst du hier auch CSS-Anweisungen und kannst dir in der JavaScript-Konsole Ausgaben anzeigen lassen. JavaScript ist eine weitere Programmier-Sprache die erst in einem späteren Kurs vorkommen wird, um diese brauchst du dich vorerst nicht zu kümmern. Aber CSS, eine weitere Programmiersprache, die dem Browser sagt, wie die HTML-Elemente denn konkret aussehen sollen, wird schon in diesem Kurs immer wieder vorkommen. Diesen Begriff solltest du dir merken.

Aber nun auf zum Webseiten-Inspektor! Der ist auch ein wenig übersichtlicher aufgebaut. Aufrufen kannst du ihn je nach Browser wieder etwas unterschiedlich.

1.4.1 Im Firefox

Du schaltest ihn ein, indem du wieder einen Rechtsklick auf ein beliebiges Element einer Webseite machst und nun statt auf “Quelltext anzeigen” zwei Optionen weiter unten “Element untersuchen (Q)” auswählst.

Firefox Webseiten-Inspektor

Da mein Rechtsklick über einer Überschrift passiert ist, zeigt mir der Webseiten-Inspektor nun die Überschrift genauer an:

Firefox Webseiten-Inspektor 2

Im Bereich links unten kann ich mich durch all die HTML-Elemente der aktuellen Seite klicken und sie betrachten. Wenn ich mit der Maus über ein Element im Webseiten-Inspektor fahre, sehe ich wo es sich auf der Seite befindet, wie viele Abstände es zu anderen hat (dieses z.B. hat einiges an gelb angezeigtem Abstand nach oben), und noch vieles mehr. Rechts neben dem Inspektor sieht man im nächsten Fenster die CSS-Befehle, die mit diesem HTML-Element verknüpft sind – aber dazu später noch mehr.

Profi-Tipp: Wer sich wie ein Profi vorkommen will, kann den Webseiten-Inspektor auch über den Shortcut “STRG + SHIFT + I” öffnen.

1.4.2 Im Chrome

Den Webseiten-Inspektor öffnet man in Chrome ähnlich wie im Firefox per Rechts-Klick auf das Element das man untersuchen möchte und dann per Klick auf “Untersuchen”.

Damit öffnet sich der Webseiten-Inspektor von Chrome. Alternativ kann man wie im Firefox auch den Shortcut STRG + SHIFT + I verwenden (SHIFT ist der Fachbegriff für die Umschalt-Taste). Im zweiten Fall muss man das zu untersuchende Element danach allerdings noch extra in der Liste links unten auswählen.

Chrome Webseiten-Inspektor

Der Webseiten-Inspektor ist im Chrome optisch ein bisschen anders aufgebaut wie im Firefox, funktioniert aber recht ähnlich.

1.4.3 Im Internet Explorer

Den Webseiten-Inspektor kannst du öffnen, indem du ein Element der Webseite mit einem Rechtsklick anklickst und danach auf “Element untersuchen” klickst.

Dann öffnet sich (wie schon beim Anzeigen des Source-Codes) der Webseiten-Inspektor, und man kann die einzelnen HTML-Elemente genauer untersuchen:

Internet Explorer Webseiten-Inspektor

In seltenen Fällen kann es vorkommen, dass dir die Option “Element untersuchen” nicht angezeigt wird, wenn du einen Rechtsklick auf ein Element machst. Dann will dir der Internet Explorer die Welt einfacher machen als sie ist – gut gemeint, aber unpraktisch für dich.

Zum Glück gibts in diesem Fall einen einfachen Trick: Drücke gleichzeitig STRG + SHIFT + I, dann solltest du auch im Internet Explorer zum Webseiten-Inspektor kommen.

Außerdem wird dich der Internet Explorer dann womöglich fragen, ob du ab jetzt bei einem Rechtsklick die Optionen mit dem Webseiten-Inspektor und dem Source-Code sehen willst. Wenn du hier zustimmst, sollte die ursprüngliche Variante mit dem Rechtklick ab diesem Zeitpunkt auch für dich klappen.

2. Eine erste Aufgabe: Elemente mit dem Webseiten-Inspektor durchsuchen und verändern

Nach so viel Theorie auf einmal wird es jetzt erstmal höchste Zeit für etwas Praxis, findest du nicht? Nun da wir wissen wie wir den Webseiten-Inspektor öffnen können, wollen wir ihn benutzen, um bestehende Webseiten “in neuem Kleid” zu betrachten.

2.1 Ein HTML-Element mit dem Webseiten-Inspektor auswählen

Öffne dazu mit dem Browser deiner Wahl eine Webseite deiner Wahl. Dann untersuche mit dem Webseiten-Inspektor ein Element deiner Wahl, zum Beispiel eine Überschrift, einen Button, einen Link, was auch immer. In meinem Fall habe ich mit dem Browser Firefox die Webseite www.bunterrichten.com geöffnet und die Überschrift “Startpunkt” mit dem Webseiten-Inspektor untersucht. Das Ergebnis ist dieses:

Firefox Webseiten-Inspektor 2

Auf der linken Seite des Webseiten-Inspektors können wir sehen, dass der Text “Startpunkt” umschlossen ist von <h1> und </h1>. Dies sind sogenannte HTML-Tags, die in diesem Fall dem Browser sagen dass es sich um alles was zwischen ihnen steht dabei um eine Überschrift handelt. Das Ganze ist wiederum eingebettet in ein weiteres HTML-Element vom Typ <div>, dieses beschreibt einen Bereich einer Webseite. Mit <div> kann man z.B. Spalten-Layouts realisieren. Aber dazu einige Lektionen später in diesem Kurs noch ausführlich mehr.

Nun aber wollen wir uns einen Spaß machen und die Webseite die wir geöffnet haben ein wenig verändern! Gleich rechts neben dem HTML-Part des Webseiten-Inspektors befindet sich eine Liste mit CSS-Befehlen, die auf das ausgewählte HTML-Element angewendet werden und sein Aussehen festlegen.

2.2 Das Aussehen eines HTML-Elements verändern

CSS ist eine weitere Programmiersprache, die für das Aussehen einer Webseite zuständig ist. Später im Kurs werden wir noch genauer darauf eingehen was CSS genau ist und wie es funktioniert. Aber vorerst wollen wir nur ein wenig damit herumspielen.

In meinem Beispiel findet sich z.B. der CSS-Befehl “font-size: 36px;” der auf die ausgewählte Überschrift angewendet wird. “font-size” beschreibt – wie sich auch ohne Programmier-Kenntnisse erraten lässt – die Schriftgröße des Textes, und “px” ist eine Abkürzung für “Pixel”. Wenn die “font-size” auf 36 Bildpunkte eingestellt ist, ist die Schrift dann eben 36 einzelne Bildpunkte groß.

Profi-Tipp: Ein Pixel ist ein Bildpunkt auf dem Bildschirm, dessen Größe von der Bildschirmgröße und der gewählten Auflösung abhängig ist. Je größer der Bildschirm, desto größer jeder einzelne Bildpunkt. Je größer die Auflösung des Bildschirms, desto kleiner ist ein Pixel. Die größten Einzel-Pixel in Millimeter bekommt man also mit großen Bildschirmen und kleiner Auflösung, die kleinsten Einzel-Pixel in Millimeter mit kleinem Bildschirm und großer Auflösung.

Im Webseiten-Inspektor kann man sich nun einen Spaß machen und herausfinden, was passieren würde, wenn die einzelnen CSS-Befehle anders wären. Zum Beispiel kann man dann die font-size auf nur 10px herabsetzen. Dazu reicht ein Doppel-Klick auf die 36px, und schon lässt lässt sich editieren. Man sieht auch sofort, wie die Überschrift zusammenschrumpft.

In diesem Beispiel habe ich bei der Liste an CSS-Befehlen noch etwas heruntergescrollt und den Befehl “color: ” gefunden. Dieser beschreibt die eingestellte Text-Farbe. Wenn ich nun neben der Schriftgröße auch noch die Textfarbe verändere, so dass dann “color: blue;” steht, sieht die Überschrift der Webseite schon ganz anders aus:

Firefox Webseiten-Inspektor blaue Überschrift

Falls du dich jetzt fragst wie es möglich sein kann dass man die Webseite eines anderen einfach “umprogrammieren” kann, und ob das den Inhaber der Webseite nicht stört: Du veränderst nicht wirklich die Webseite eines anderen. Für alle anderen Besucher außer dir sieht sie immer noch so aus wie vorgesehen. Du kannst also nichts kaputt machen. Nur lernen, und im Idealfall dabei auch noch Spaß haben 🙂

2.3 Die ganze Online-Welt ist nun deine Spielwiese

Wenn du bei den CSS-Befehlen jeweils ein wenig herunterscrollst, findest du noch viele weitere Dinge, die man abändern kann. Und das beste ist: Wenn du keine Ahnung hast welche Optionen es denn geben könnte, dann bekommst du bei den meisten CSS-Befehlen sogar Vorschläge geliefert, aus denen du wählen kannst, sobald du den bisherigen Wert löschst.

Nimm dir ruhig ein wenig Zeit dafür mit dem Webseiten-Inspektor bestehende Webseiten abzuändern und zu sehen was dabei jeweils passiert. So siehst du selbst, dass fast alles, was im Quell-Code einer Webseite zu finden ist, aus einer Aneinander-Reihung der immer gleichen wenigen “Bausteinen” besteht. Alles was du tun musst, um Programmieren zu lernen, ist mehr und mehr dieser Bausteine und ihre Funktionsweisen zu verstehen.

Und weil wir schon dabei sind, werden wir jetzt auch gleich die ersten Bausteine für unsere erste eigene Webseite kennenlernen.

3. Unsere erste kleine Webseite mit HTML erstellen

Da unsere Webseite ja mit Sicherheit eine großartige werden wird, tun wir in unserem Größenwahn auch einfach mal so, als wäre sie ein richtiges Projekt. So lernst du gleich von Anfang an einige wichtige Dinge, die man bei größeren Projekten beachten sollte, um sich die Welt langfristig einfacher zu machen.

3.1 Ein Projekt in Eclipse anlegen

Als erstes öffnen wir also nun unser Programmier-Programm Eclipse und erstellen ein neues Projekt. Dazu machen wir einen Rechtsklick auf den linken Bereich des Eclipse-Fensters, der “Project Explorer” heißt, und wählen “New”->”Project…” aus. Also in etwa so:

Eclipse neues Projekt

Bei mir sind im Project Explorer schon drei andere Projekte zu sehen, weil mein Workspace (der Ort wo Eclipse Projekte speichert) eben auch schon mit mehreren Projekten gefüllt ist. Bei dir wird dieser Bereich noch leer sein.

Dann wählst du PHP als Projekt-Typ aus und kommst auf diesen Bildschirm, wo du den Namen des Projektes eingeben kannst:

Eclipse neues Projekt 2

Wenn du dann auf “Finish” klickst dauert es ein bisschen und dann sollte dein erstes Projekt im Project Explorer links aufscheinen. Mein Projekt heißt z.B. “Test-Projekt”. Sehr kreativ, ich weiß… du darfst da gerne kreativer werden 😉

Dein erstes Projekt kannst du mit einem Klick auf den kleinen Pfeil im Project Explorer “ausklappen”, dann hast du einen besseren Überblick. Jetzt wird es Zeit eine HTML-Seite zu erstellen.

3.2 Eine HTML-Seite erstellen

Nun wollen wir unsere erste HTML-Datei erstellen. Dazu machst du einen Rechts-Klick auf dein Projekt und wählst einfach New->File, also in etwa so:

Eclipse neues Projekt 3

Dann braucht die neue Datei noch einen Namen, den du im aufscheinenden Fenster festlegen kannst. Das sieht dann so aus (zum Namen gleich noch mehr):

Eclipse neues Projekt 5

Sobald du auf “Finish” drückst, wird deine erste HTML-Seite erstellt. Aber warum habe ich diese Datei “index.html” genannt, und warum solltest auch du das so machen?

Bei der Vergabe des Namens sind nun mehrere Dinge zu beachten:

  • Datei-Endung: Der Dateiname muss mit .html aufören damit klar ist dass es eine HTML-Datei ist.
  • Schreibweise: Tu dir selbst einen Gefallen und verwende nur Kleinbuchstaben und keine Sonderzeichen oder Umlaute (Ausnahme: – und _).Wenn du nicht darauf achtest, kann es sein, dass du später Stunden damit verbringst Fehler zu suchen, die durch eine ungenaue Schreibweise entstanden sind.
  • Der Name der Datei selbst: Es gibt mehrere “reservierte” Dateinamen, die alleine aufgrund ihres Dateinamens eine besondere Funktion erfüllen. Für uns relevant ist jetzt vorerst nur “index.html”. Warum? Wenn in einem Ordner mehrere HTML-Dateien zu finden sind und ein Link auf den Ordner zeigt (nicht auf eine exakte .html-Datei), dann erkennt der Browser die index.html in diesem Ordner immer als Startseite. Hat sich einmal jemand so ausgedacht, und seitdem ist das so üblich 😉

Die Datei “index.html” ist somit perfekt geeignet um eine Startseite zu sein – genau das wollen wir erreichen! Nenn deine erste HTML-Datei daher am besten ebenso “index.html”. Dann drücke “Finish”, und du hast deine erste HTML-Seite erstellt!

Nun solltest du in der Mitte eine Ansicht der HTML-Seite sehen, in die du deinen Programm-Code hineinschreiben kannst.

3.3 HTML-Seiten erstellen: Unser erster Programm-Code

Nun wird es aber wirklich Zeit! Lass uns endlich mit dem Programmieren beginnen! Füge den folgenden Programmier-Code in deine leere index.html ein. Du kannst ihn entweder einfach kopieren und einfügen oder selbst abtippen.

Profi-Tipp: Kopieren kannst du mit dem Shortcode STRG + C, einfügen mit dem Shortcode STRG + V, und ausschneiden (löschen und gleichzeitig kopieren) mit dem Shortcode STRG + X. Diese Shortcodes funktionieren übrigens in fast allen Programmen, auch z.B. in Word oder Excel – wenn du sie dir angewöhnt, wirst du ganz allgemein viel schneller in der Arbeit mit dem Computer werden 🙂

Wenn du ihn abtippst wirst du feststellen dass unser Programmier-Programm dir beim Tippen hilft, indem es beispielsweise nach einem <html>-Befehl automatisch einen </html>-Befehl einfügt, damit du weniger schreiben musst. Ist das nicht freundlich von Eclipse? 🙂

Profi-Tipp: Falls du dich fragst wo auf der Tastatur eigentlich diese seltsamen <>-Klammern zu finden sind: Die sind zumindest auf meiner Tastatur gleich links unten neben dem Y zu finden. Normal auf die Taste drücken öffnet die Klammer, zusammen mit SHIFT (die Taste die auf Großbuchstaben umschaltet) und der selben Taste schließt sie sich wieder.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Ich bin der schönste Titel der Welt!</title>
</head>
<body>
<!-- Das ist der Inhalt -->
Ich bin der Inhalt der Seite!
</body>
</html>

Du hast nun den obigen Code in deine Datei “index.html” eingefügt oder geschrieben, als nächstes musst du sie speichern.Das geht wie in den meisten Programmen mit Hilfe von “Datei”->”Speichern”, oder in dem Fall, weil Eclipse ja auf Englisch installiert wurde, unter “File”->”Save”.

Profi-Tipp: Wenn du programmierst ist es ratsam, häufig zu speichern. Es ist einfach ziemlich nervig falls irgendetwas schief geht, du dann irgendetwas noch einmal programmieren musst und vielleicht gar nicht mehr weißt wie du das vorher gemacht hast. Ich selbst speichere im Grunde nach fast jeder Zeile die ich programmiere. Weil das Mit Hilfe von “File”->”Save” recht umständlich ist, hier einer der nützlichsten Shortcodes, den du dir merken solltest: STRG + S. Das speichert die aktuelle Datei und geht mit etwas Übung dann sehr rasch und unkompliziert. Am besten gewöhnst du dir den Shortcut und das regelmäßige Speichern von Anfang an an. Praktischerweise funktioniert STRG + S auch bei fast allen anderen Programmen.

Nun wollen wir uns einmal ansehen, wie unsere Webseite im Browser aussieht. Dazu musst du die Datei auf deinem Computer finden und mit dem Browser öffnen. Aber wie findest du die Datei wieder?

3.3.1 Wie du die Dateien deiner Webseite auf deinem Computer wiederfindest

Die Datei ist nun in einem Unterordner des Ordners abgespeichert, den du anfangs bei der Installation von Eclipse als “Workspace” angegeben hast. Aber was ist, wenn du dich nicht mehr daran erinnerst, wie dieser heißt? Auch dann ist Eclipse so freundlich, dir zu helfen. Mache im Project Explorer von Eclipse einen Rechtsklick auf die Datei die du wiederfinden willst, und klicke dann ganz unten bei den Optionen auf “Properties”. Dann öffnet sich das folgende Fensterchen:

Eclipse neues Projekt 6

Unter “Location” findest du den Dateipfad zu der Datei. Und wenn du nun extra-bequem sein willst, dann nutze den Button rechts neben dem Dateipfad, der öffnet sofort den Ordner in dem die Datei zu finden ist.

3.3.2 Wie du deine Webseite im Browser ansiehst

Mit einem Rechtsklick auf die Datei und dem dann ausgewählten “Öffnen mit…” wählst du einen Browser deiner Wahl aus. Und schon kannst du deine erste eigene Webseite in Aktion sehen. Alternativ kannst du die erstellte HTML-Datei auch einfach in deinen schon geöffneten Browser ziehen, dann sollte dieser auch einen neuen Tab mit deiner Webseite öffnen. Oder du machst einen Doppel-Klick auf die Datei (Falls dann “Öffnen mit…” kommt, wählst du einen Browser aus).

Du solltest nun eine weitgehend leere Webseite vor dir haben, auf der in schwarzer Schrift auf weißen Hintergrund “Ich bin der Inhalt der Seite!” zu lesen ist. Außerdem hat die Webseite einen Titel, nämlich “Ich bin der schönste Titel der Welt!”. Kannst du ihn entdecken?

So oder so ähnlich sieht eine kleinstmögliche HTML-Datei im Browser aus, in diesem Fall die HTML-Seite, die du erstellt hast. Ziemlich.. kläglich, findest du auch? Keine Angst, das werden wir schon noch ändern. Aber bevor wir das tun, werden wir uns nochmal kurz im Detail ansehen, was wir denn da gerade programmiert haben.

Die allererste Zeile heißt “<!DOCTYPE hmtl>” und ist vermutlich ein Stück weit selbsterklärend. Diese sagt dem Browser – falls er es anhand der .html-Datei-Endung noch nicht erraten hat – dass es sich um eine HTML-Datei handelt, und dass er alles was danach kommt auch entsprechend interpretieren soll.

3.3.3 Was sind HTML-Tags, und wie funktionieren sie?

Darauf folgt das erste “richtige” HTML-Tag, das sinnigerweise gleich <html> heißt. Ein “Tag” ist ein Name für eine bestimmte Art von Webseiten-Baustein. Von denen gibt es zwei Grund-Arten:

  • Tags, die in sich abgeschlossen sind
  • Tags, die andere Inhalte einschließen

Die erste Gruppe an Tags steht alleine für sich im Programm-Code, z.B. das <img>-Tag, das für Bilder zuständig ist, oder ein <br>-Tag, das einen Zeilenumbruch darstellt. Bei diesen musst du nicht groß mitdenken, die kann man einfach verwenden.

Die zweite Gruppe an Tags kommt immer doppelt vor: einmal ganz normal und beim zweiten Mal mit einem Schrägstrich ( / ) vor dem Tag-Namen. Das erste Mal wenn es vorkommt nennt man es “öffnendes Tag”, beim zweiten Mal “schließendes Tag”, und alles dazwischen wird durch dieses Tag dann beeinflusst. Wir haben weiter oben z.B. schon einmal das <h1>-Tag erwähnt. Es bewirkt, dass alles, was zwischen dem öffnenden <h1>-Tag und dem schließenden </h1>-Tag steht, eine Überschrift sein soll.

Unser <html>-Tag ist ein Tag der zweiten Gruppe, deswegen kommt es im Code auch zwei Mal vor, einmal zum Öffnen des Tags und einmal zum Schließen des Tags. Bei einem <html>-Tag weiß der Browser, dass alles zwischen dem öffnenden <html>-Tag und dem schließenden </html>-Tag als HTML-Code zu verstehen ist.

Innerhalb von unserem öffnenden HTML-Tag findet sich nun auch noch ein lang=”de”. Dies sagt dem Browser dass die Sprache des Dokuments Deutsch ist. Würden wir hier lang=”en” schreiben, würde der Browser davon ausgehen dass es eine englische Seite ist.

Dieses “lang”-Attribut ist u.A. für Besucher wichtig die einen sogenannten Screen-Reader verwenden, der ihnen die Webseite vorliest – also zum Beispiel blinde Menschen. Aber auch Google freut sich darüber wenn es weiß welche Sprache deine Webseite hat, weil es seinen Nutzern dann leichter Ergebnisse in der richtigen Sprache anzeigen kann.

So ziemlich jedes HTML-Tag kann jeweils eigene Attribute haben, aber was das ist und wie diese funktionieren wird später in diesem Kurs noch genauer erklärt. Fürs erste reicht es wenn du im <html>-Tag deiner HTML-Seiten einfach diese Zeile einbaust, damit Browser wissen, um welche Sprache es sich handelt.

3.3.4 Die Meta-Informationen der Seite: das <head>-Tag

Als nächstes folgt ein <head>-Tag, auch dieses besteht aus zwei Teilen. Im Head-Tag finden sich normalerweise Verweise zu CSS-Style-Dateien oder Javascript-Dateien, aber dazu später mehr.

In unserem Fall sind zwei Befehle in unserem <head>-Tag zu finden. Die erste Zeile (die mit dem charset=”utf-8″) sagt dem Browser, dass er eine bestimmte Art von Zeichen-Set verwenden soll. Die Erklärung warum das so ist ist etwas kompliziert, deswegen erspare ich mir die Erklärung an dieser Stelle lieber.

Interessanter ist für uns das <title>-Tag. Wie du vielleicht schon entdeckt hast, handelt es sich auch bei diesem um ein zwei-teiliges Tag. Innerhalb von diesem Tag findet sich der Titel der Webseite wieder. Der Titel erfüllt vor allem zwei Aufgaben:

  • Er wird im Browser ganz oben als Tab-Beschreibung angezeigt
  • Er wird z.B. als Ergebnis einer Google-Suche als Überschrift angezeigt und hilft Suchmaschinen dabei zu verstehen, worum es in der Webseite geht

Wenn du den Text innerhalb des <title>-Tags veränderst, veränderst du den oben in den Tabs angezeigten Titel deiner Webseite.

Das kannst du auch gleich ausprobieren. Einfach etwas zwischen den <title>-Tags verändern, speichern (STRG + S) und dann die Webseite im Browser neu laden. Das machst du entweder über das “Aktualisieren”-Symbol (im Firefox so ein Pfeil der im Kreis läuft), oder du benutzt die Taste F5 auf der Tastatur. Bei einigen neueren Tastaturen kann es sein, dass du zusätzlich noch die Taste “Fn” gedrückt halten musst, daher dann Fn + F5.

3.3.5 Der eigentliche Inhalt der Webseite: das <body>-Tag

Zwischen den beiden <body>-Tags wird alles hineingeschrieben, was auf deiner Webseite zu sehen sein soll: Texte, Bilder, Videos, Menüs, … In unserem Fall ist dort bisher nur ein kleiner Beispiel-Text zu finden. Wenn du ihn veränderst und dann die Seite im Browser neu lädst, solltest du die Veränderung sehen können.

Damit ist unser erstes HTML-Dokument eigentlich auch schon wieder zu Ende, es folgt nur noch das schließende <html>-Tag mit dem Schrägstrich davor (</html>).

3.3.6 Kommentare: Was sie bringen

Wobei, das stimmt so nicht ganz. Es gibt auch dieses sehr seltsam anmutende Ding mit dem Rufzeichen darin. Was das wohl ist?

Alles, was zwischen einem <!– und einem –> steht, ist in der Sprache HTML ein sogenannter Kommentar. Das bedeutet, dass alles was als Kommentar gekennzeichnet ist vom Browser ignoriert wird. Warum aber soll man etwas programmieren, was dann gar nichts tut?

Bei unserer kleinen Mini-Webseite macht das tatsächlich gar nicht so viel Sinn. Aber wenn die Webseite mit der Zeit größer wird und man vielleicht über mehrere Wochen an ihr gearbeitet hat, dann weiß man vielleicht nicht mehr genau, was man sich vor zwei Wochen dazu überlegt hatte. Und da können Kommentare sehr nützlich sein, um sich später besser daran erinnern zu können. Weil Kommentare auch im Programmier-Programm in einer anderen Farbe dargestellt werden, sind sie auch nützlich, um Bereiche im Programm-Code graphisch abzugrenzen.

Für die Inhalte dieses Kurses wirst du nur selten Kommentare brauchen, einfach weil die Beispiele vergleichsweise einfach sein werden. Aber wenn du dir selbst einen Gefallen tun willst, dann gewöhnst du dir am besten gleich an, Kommentare zu verwenden. Eclipse hilft dir da auch freundlicherweise wieder beim Schreiben: sobald du ein öffnendes <!– schreibst, fügt Eclipse dir schon ein schließendes –> dazu.

Die Arbeit, ein gutes Programmier-Programm zu installieren, macht sich wie du siehst durchaus rasch bezahlt.

4. Du hast deine erste eigene HTML-Seite erstellt!

Du kannst nun wenn du möchtest noch ein wenig damit herumexperimentieren was passiert, wenn du den Titel oder den Haupt-Inhalt (zwischen den zwei <body>-Tags) abänderst.

Kannst du dich noch an das Überschriften-Tag <h1> erinnern? Wo glaubst du, dass es eher hingehört – innerhalb des <head>-Tags oder innerhalb des <body>-Tags? Versuche doch mal, deiner Webseite eine Überschrift zu verpassen – schaffst du es?

Wenn nicht, keine Sorge! In unserer nächsten Lektion werden wir uns ausführlich mit dem Text unserer Webseite befassen. Der soll doch auch etwas hermachen, oder?

Also, auf zur nächsten Lektion 🙂

Du hast nun:

  • Gelernt wie man den Quellcode einer Webseite als Ganzes und für bestimmte Elemente ansehen kann
  • Ein eigenes Projekt samt einer ersten eigenen HTML-Seite erstellt
  • Den Aufbau einer minimalen HTML-Seite verstanden
  • Verstanden was HTML-Tags sind und was der Unterschied zwischen den zwei Arten ist
Diese Einheit abschließen

Mit deinem kostenlosen Account kannst du:

  • deine selbst programmierte Webseite auf verschiedenen Geräten ansehen und auch deinen Freunden zeigen
  • Fragen an mich und die Community stellen
  • mehr Hilfsmittel benutzen, um dich besser im Kurs zu orientieren