Notice: Constant DATE_RFC7231 already defined in /home/jenge.de/htdocs/includes/bootstrap.inc on line 258
Die erste HTML-Seite | Jenge.de

Die erste HTML-Seite

Unsere Werkzeuge

Für den Augenblick brauchen wir nicht viel. Nur einen Editor und einen Browser.

Ein Editor ist ein Programm, mit dem man reinen Text schreiben kann. Word und vergleichbare Textverarbeitungsprogramme helfen uns hier nicht weiter! Windows liefert den Editor "Editor" von Hause auch mit. Das ist aus dieser Kategorie so ungefähr das unkomfortabelste Programm das man sich vorstellen kann. Ein guter und für fast alles zu gebrauchender Editor ist Notepad++, der auf unseren Rechnern installiert ist.

Als Browser stehen uns der Firefox und der Internet Explorer zur Verfügung. Ich gehe davon aus, dass Ihr den Firefox benutzt.

Los geht's

Öffnet den Editor Notepad++ und speichert die noch leere Datei in einem neuen Ordner unter einem Namen Eurer Wahl, z.B. "erste-seite.html". Wichtig ist nur, das die Datei die Endung ".html" hat. Dazu klickt ihr im Menü "Datei" auf "Speichern unter..." und seht dann folgendes Fenster:

Die Endung legt Ihr am besten fest, indem Ihr den Dateityp in der Drop-Down-Liste (blau markiert) wie in der Abbildung auf Hyper Text Markup Language einstellt.

Im Notepad gebt ihr dann den Text ein, den Ihr in der Abbildung unten seht.

Speichert die Datei ab und öffnet Sie anschließend in Eurem Browser. Im Firefox öffnet Ihr Dateien, die auf Eurem Rechner liegen, mit dem Tastenkürzel STRG + o (kleines oh, für engl. open). Wie Ihr seht, seht Ihr im Browser noch gar nichts:

Aber achtet mal auf die Beschriftung des aktuellen Tabs, in der Abbildung oben gelb markiert. Wenn Ihr keine Tabs seht, weil nur die eine Seite offen ist, drückt einfach STRG + t, um einen weiteren Tab zu öffnen und die Tab-Leiste zum Vorschein zu bringen.

So, das ist Euer erstes korektes (man sagt auch: valides) HTML-Dokument. Ein paar Erklärungen dazu findet ihr hier.

Das Grundprinzip von HTML

HTML ist, wie bereits erwähnt, eine Auszeichnungssprache. Das heißt, dass bestimmte Teile des Textes nach bestimmten Kriterien hin markiert oder ausgezeichnet werden.

Wenn wir nun in unserem Dokument eine Überschrift haben wollen, so zeichnen wir unsere Überschrift als solche aus. In HTML benutzen wir sogenannte Tags zur Auszeichnung. Tags sind festgelegte Wörter oder oft auch nur einzelne Buchstaben, die wir in die spitzen Klammern setzen. Eine Überschrift erster Ordnung, also die wichtigste Überschrift auf der ganzen Seite, sieht dann so aus:

<h1>Meine wichtigste Überschrift</h1>

Beachte: es gibt, bis auf wenige Ausnahmen, immer einen öffnenen Tag < > und einen schließenden Tag </ >. Der Befehl, der innerhalb der spitzen Klammern steht, erstreckt sich auf alles, was von den beiden Tags eingeschlossen wird. Das h aus dem Beispiel oben leitet sich vom englischen Wort heading ( = Überschrift) ab. Überschriften gibt es in den Kategorien h1 bis h6, so dass man einen Text sehr gut strukturieren kann.

Ganz normalen Text (auch Fließtext genannt) schließen wir absatzweise in <p>...</p> - Tags. (p wie paragraph = Absatz). Innerhalb eines Absatzes kümmern wir uns normalerweise nicht um den Textsatz. Das erledigt der Browser für uns. Wollen wir doch mal an einer Stelle einen Zeilenumbruch haben, nutzen wir dazu eines der Ausnahme-Tags, die einzeln auftreten dürfen: <br> (br: break = Umbruch).

Ihr werdet an dieser Stelle keinen vollständigen HTML-Kurs finden, weil es davon etliche im Web bereits gibt. Die beste Adresse ist die Seite selfhtml.org, die für die kommenden Tage Euer bester Freund sein wird. Ihr findet dort ALLES zu HTML sehr ausführlich erklärt und mit Beispielen illustriert. Allein ein Blick auf die Gliederung gibt Euch schon einen Hinweis auf das, was alles möglich ist.

Konzentriert Euch in Eurer Arbeit auf die Abschnitte

und eventuell noch

Es geht an dieser Stelle nicht darum, dass Ihr den ganzen Befehlsvorrat von HTML auswendig lernt. Schaut aber mal darüber, so dass Ihr einen Eindruck bekommt, was es alles gibt und wo Ihr nachschauen könnt, wenn Ihr so etwas selbst umsetzen wollt.

Eure Aufgabe

Probiert es gleich in Eurer Webseite aus! Viel Spaß dabei!

Erstellt ein HTML-Dokument, das Überschriften, Links, Listen, mindestens zwei Grafiken und eine Tabelle enthält. Wenn ihr Text zum füllen Eurer Seite braucht, googelt mal nach "Lorem ipsum".