Eine einfache HTML-Datei

HTML/CSS-Tutorial Inhalt »

editor01

Eine HTML-Datei kann bereits mit einem einfachen Editor erstellt werden. Auf Rechnern mit Windows-Betriebssystem ist dieser unter StartAlle ProgrammeZubehörEditor zu finden.

Wird dort irgendein Text hineingeschrieben, kann dieser in einer einfachen Text-Datei in irgendeinem Ordner auf der Festplatte des Rechners gespeichert werden. Dazu braucht man nur oben in der Menüleiste des Editors auf “DateiSpeichern unter” klicken und es öffnet sich ein Fenster, in dem man den gewünschten Ordner auswählen kann, in dem die Text-Datei gespeichert werden soll. Nun gibt man der Text-Datei noch irgendeinen Namen und klickt unten im Fenster auf den Button “Speichern”.

editor02

Standardmäßig wird diese Text-Datei mit der Datei-Endung “.txt” gespeichert. Gibt man der Text-Datei beispielsweise den Namen “seite1”, dann wird die Text-Datei unter “seite1.txt” gespeichert.

editor03

Wählt man stattdessen bei Dateityp die Option “Alle Dateien” und ändert bei Dateiname das “.txt” in “.html”, sodass dort nun “seite1.html” steht und klickt unten im Fenster auf den Button “Speichern”, dann wird die Datei als “HTML-Datei” gespeichert. (Vor dem Speichern sollte als Codierung statt “ANSI” noch “UTF-8” gewählt werden, damit auch alle Sonderzeichen später richtig dargestellt werden.)

Öffnet man in seiner Ordner-Übersicht den Ordner, in dem sich nun die Datei “seite1.html” befindet und führt einen Doppelklick auf diese Datei aus, dann öffnet sie sich, anders als mit der Datei-Endung “.txt” nicht mehr im Editor, sondern im Browser, so wie eine normale Internetseite.

Ohne zusätzliche HTML-Anweisungen, sogenannte “Tags” (ist englisch und wird "tägs" ausgesprochen), lässt sich die HTML-Datei jedoch nicht weiter strukturieren und gestalten. Es lassen sich auch keine Bilder oder Links einfügen.

editor04

Diese Tags werden in spitze Klammern eingefasst und mit in die HTML-Datei geschrieben. So lautet die erste HTML-Anweisung <html>. Dann folgt der Inhalt (Texte, Bilder, Links,...) und ganz zum Schluss wird die abschließende HTML-Anweisung </html> hinzugefügt. Diese unterscheidet sich von der ersten Anweisung durch den zusätzlichen Schrägstrich.

In der ersten Zeile der HTML-Datei und noch vor der ersten HTML-Anweisung muss auch noch der sogenannte “doctype” eingefügt werden. Dieser lautet in der heutzutage üblichen kurzen Schreibweise:
<!doctype html>

Wenn im Ordner, in dem sich die Datei “seite1.html” befindet, diese durch ein Doppelklick im Browser öffnet, dann fällt auf, dass oben im Tab der Webseite noch kein Titel steht, z.B. “Meine erste Seite”, sondern nur “seite1.html”.

editor05

Damit die Webseite einen Titel erhält, sind zusätzliche HTML-Anweisungen (Tags) nötig. Dazu wird die HTML-Datei in zwei Bereiche aufgeteilt. In dem einen Bereich, der als “Body-Bereich” bezeichnet wird, befinden sich sämtliche Inhalte (Texte, Bilder, Links,...). In dem anderen Bereich, der als “Head-Bereich” bezeichnet wird, befindet sich der Titel. Die beiden Bereiche, der “Body-Bereich” und der “Head-Bereich”, werden jeweils mit eigenen Tags gekennzeichnet.

Dort, wo der “Head-Bereich” beginnt, wird <head> in die HTML-Datei eingefügt und dort, wo der “Head-Bereich” endet, wird </head> eingefügt.

  • <head> ist das Anfangs-Tag für den Head-Bereich
  • </head> ist das End-Tag (wieder mit Schrägstrich) für den Head-Bereich

Das gleiche gilt für den Body-Bereich:

Dort, wo der “Body-Bereich” beginnt, wird <body> in die HTML-Datei eingefügt und dort, wo der “Body-Bereich” endet, wird </body> eingefügt.

  • <body> ist das Anfangs-Tag für den Body-Bereich
  • </body> ist das End-Tag (wieder mit Schrägstrich) für den Body-Bereich
editor06

Der Head-Bereich (rot dargestellt) ist ebenso wie der Body-Bereich (grün dargestellt) ein “Unterbereich” des HTML-Bereichs (blau dargestellt), der für beide der “Oberbereich” ist.

Das Anfangs-Tag für den HTML-Bereich wurde noch mit lang=”de” (Sprachattribut für die Sprache “deutsch”) erweitert und lautet nun nicht mehr <html>, sondern <html lang=”de”>.

Im Head-Bereich wird der Titel eingetragen, in diesem Beispiel "Meine erste Seite", der auch ein Anfangs-Tag (<title>) und ein End-Tag (</title>) hat.

Im Body-Bereich wird der Inhalt eingetragen, in diesem Beispiel nur der Text "Dies ist ein Beispieltext.", der auch ein Anfangs-Tag (<p>) und ein End-Tag (</p>) hat, wobei "p" für "paragraph" steht (engl. für "Absatz").

(Das Einrücken der Zeilen dient nur der besseren Übersichtlichkeit und gehört zum guten Programmierstil.)

editor07

Im Tab der Webseite steht nun der Titel "Meine erste Seite".

Da HTML-Dateien sehr umfangreich werden können, ist der einfache Editor nicht gut geeignet, diese zu erstellen oder zu bearbeiten. Dafür eignen sich spezielle HTML-Editoren wesentlich besser, wie z.B. der kostenlose unter der GPL-Lizenz stehende Texteditor “Notepad++”. Dort werden die Tags farblich dargestellt und es können mehrere HTML-Dateien gleichzeitig geöffnet und zwischen ihnen per Tabs gewechselt werden. Dies ist besonders praktisch, wenn Abschnitte des Quellcodes per copy/paste von einer Datei zur anderen übertragen werden sollen.

<!doctype html>
<html lang="de">

    <head>
        <title>...</title>
    </head>

    <body>
        <p>...</p>
    </body>

</html>

Der hier dargestellte Quellcode wird auch als “HTML-Grundgerüst” bezeichnet.

« Inhalt

Fett- und Kursiv-Schrift »


 

Galerien / Präsentationen...

city001-sidebar

link-icon002 Galerien-Übersicht...

Kategorien

Alle Artikel

(Inhaltsverzeichnis)

link-icon002 alphabetisch geordnet...

link-icon002 nach Datum geordnet...

soziale Netzwerke...

"Cogniclip" ist auch auf folgenden sozialen Netzwerken vertreten:

Cogniclip auf Twitter Cogniclip auf Google+
 

Per RSS Beiträge abonnieren:

RSS-Feed von Cogniclip
 

Kalender

September 2017
M D M D F S S
« Feb    
 123
45678910
11121314151617
18192021222324
252627282930