HTML Erste Schritte – HTML-Lehrbuch
HTML ist eine recht einfache Sprache, sie wird von allen Studierenden technischer und geisteswissenschaftlicher Fachrichtungen an Hochschulen gelernt, und ich denke, heutzutage wird sie auch in den meisten Schulen unterrichtet. Alles ist ziemlich einfach, denn HTML ist nicht einmal eine Programmiersprache.
HTML ist eine Auszeichnungssprache, das heißt, was wir schreiben, wird genau so auf dem Bildschirm angezeigt. Keine Algorithmen, keine Abläufe, keine Schleifen, Variablen oder Klassen – einfach nur Text, Text, Text. In HTML gibt es nur Tags, und davon gibt es eigentlich nicht sehr viele, und die häufig verwendeten Tags sind kaum mehr als drei Dutzend. Wenn Sie sich also mit einer Sprache beschäftigen wollen, die mit Programmiersprachen verwandt ist, ist HTML die richtige Wahl.
Um mit der Erstellung von HTML-Dokumenten zu beginnen, brauchen wir ein Programm wie den Editor (Blocknotiz), der bereits in Windows und Linux enthalten ist, sowie einen Browser, um das Dokument anzusehen (Firefox, Opera, Chrome oder Internet Explorer). Als Texteditor unter Windows benutze ich Notepad++.
Ich denke, die obigen Zeilen sollten als Vorbereitung für das Lernen ausreichen, mehr brauchen wir nicht, also legen wir los.
Mein erstes HTML-Dokument
HTML-Dokumente sind einfache Textdateien, wie z.B. readme.txt oder andere Dateien mit der Endung .txt
Hinweis:
Was ist eine Dateiendung?
Dateiendungen sind hauptsächlich ein Privileg von Betriebssystemen mit grafischer Benutzeroberfläche. Ihre Hauptfunktion besteht darin, dem Betriebssystem mitzuteilen, welches Programm zum Öffnen einer bestimmten Datei verwendet werden soll. Wir werden hier nicht auf ausführbare Dateiendungen eingehen, da die Kommandointerpreter der Betriebssysteme auch eine Art Programme sind, die mit Dateien arbeiten, die bestimmte Masken haben, z.B. .COM; .EXE; .BAT; .CMD; .VBS.
Für HTML-Dokumente verwenden wir die Endungen .HTML, .HTM
Es ist Zeit, ein Dokument zu erstellen. Wir öffnen den gewünschten Ordner und klicken mit der rechten Maustaste auf eine freie Stelle:
Wir wählen „Textdokument erstellen“. Die Datei nennen wir index.html, es ist auch möglich, die Endung .htm zu verwenden.
Es kann sein, dass Ihre Systemeinstellungen es nicht erlauben, die Dateiendung zu ändern, und die Datei als index.txt gespeichert wird. Dann müssen Sie:
- Die Datei index.txt mit dem Editor öffnen.
- Im Menü Datei → Speichern unter wählen.
- Im erscheinenden Fenster können Sie jetzt die gewünschte Dateiendung eintragen.
Nachdem die Datei index.html erstellt ist, öffnen wir sie im Editor und beginnen, die HTML-Auszeichnung zu schreiben.
HTML-Auszeichnung wird mit Hilfe von Tags erstellt. Tags sehen folgendermaßen aus:
<tag>Einige Text</tag>
Zuerst kommt das erste Tag, das öffnende Tag genannt wird – das Wort ist in spitze Klammern eingeschlossen. Die spitzen Klammern werden nicht ausgesprochen, wir sagen einfach „das ist das tag tag“.
Wir beginnen mit dem einfachsten Tag <html></html>. Das ist das wichtigste Tag, mit dem das HTML-Dokument beginnt und auch endet:
<html> </html>
Tags können in einer Zeile geschrieben werden, aber es ist praktischer, wenn sie untereinander auf einer vertikalen Linie stehen, so hebt Notepad++ die Tags hervor.
Innerhalb des Tags <html> werden wir das Tag <body></body> setzen. Body ist der Körper unseres Dokuments im wahrsten Sinne. Alles, was wir im Browser sehen, befindet sich innerhalb des body-Tags. Ganz vergessen hatten wir den Browser. Ändern wir den Inhalt der Datei index.html und speichern sie.
<html> <body> </body> </html>
Beachten Sie, wie ich den body-Tag eingerückt habe, zwei Leerzeichen von der vertikalen Linie des html-Tags entfernt. Diese Einrückung erhöht die Lesbarkeit des HTML-Dokuments. Speichern wir die Datei und öffnen sie im Browser.
Wir sollten einen leeren Bildschirm sehen. Das ist korrekt, denn wir haben dem Dokument noch keinen Text hinzugefügt.
Fügen wir also Text direkt zwischen die body-Tags ein.
<html>
<body>
HTML meine ersten Schritte
</body>
</html>
Speichern Sie das Dokument und aktualisieren Sie die Seite im Browser. Nun erscheint der Text „HTML meine ersten Schritte“. Und das, weil wir ihn innerhalb des body-Tags platziert haben, weder über noch unter dem body-Tag, sondern genau darin.
Sie haben wahrscheinlich bemerkt, dass im Titel des Dokuments nur „Mozilla Firefox“ steht, also ein Dokument ohne Titel. Lassen Sie uns das langweilige HTML-Dokument verbessern und einen Titel hinzufügen.
Wir fügen Überschriften innerhalb eines weiteren Tags <head></head> hinzu. Das head-Tag befindet sich oberhalb des body-Tags:
<html>
<head>
</head>
<body>
HTML meine ersten Schritte
</body>
</html>
Wenn Sie die Datei jetzt speichern und die Seite im Browser aktualisieren, ändert sich nichts, im head-Tag müssen wir das <title></title>-Tag einfügen, das für den Titel verantwortlich ist:
<html>
<head>
<title>HTML erste Schritte drupalbook.org</title>
</head>
<body>
HTML meine ersten Schritte
</body>
</html>
Speichern Sie die Datei, aktualisieren Sie die Seite im Browser, und voilà, unser Dokument hat nun einen Titel.
Ich denke, das reicht für die Einführung, in den nächsten Lektionen werden wir noch vieles mehr behandeln.