Forum - Internet, PC, Smartphones & Co
Fragen zur Programmierung oder zur Erstellung von Webseiten? Hier wird dir mit Sicherheit geholfen!
Im 0. Teil des Kurses haben wir gelernt, dass HTML eine Art Sprache ist. Und zu jeder Sprache gehören Dialekte und Vokabeln :D
Dialekte werden in HTML als Sprachstandards bezeichnet und beinhalten Regeln und Normen die festlegen, welche Vokabeln eine Datei enthalten muss und in welcher Form und Zusammenstellung diese ein sinnvolles Dokument ergeben. Die Sprachstandards sind also quasi die Rechtschreibung und Grammatik von HTML-Dateien.
Die Vokabeln heißen in HTML Tags (ausgesprochen: Tägs) und sind an die englische Sprache angelehnt.
Die allgemeine Funktionsweise der Tags kann man ganz leicht verstehen, wenn man an Zitate denkt: Um Zitate in deutschen Texten zu kennzeichnen benutzen wir Anführungszeichen (auch Gänsefüßchen genannt). Vor dem Zitat haben wir einleitende Anführungszeichen unten und nach dem Zitat welche oben. Die Anführungszeichen gehören nicht wirklich zum Zitat, dienen aber dazu dem Leser kenntlich zu machen, dass es sich hierbei um eines handelt und geben dem Text dadurch eine zusätzliche Bedeutung.
Bei HTML-Tags ist das sehr ähnlich. Die meisten Tags umschließen einen Text mit einem Start-Tag und einem End-Tag und geben diesem Text eine zusätzliche Bedeutung. Tags werden in spitzen Klammern notiert, das Endtag zusätzlich mit einem Slash (Schrägstrich) nach der öffnenden Klammer.
Erster Tag und erste HTML-Seite
Das erste Tag das wir lernen ist das <title>-Tag. <title> ist das einzige Pflicht-Tag, das jede gültige HTML-Datei enthalten muss (je nach Sprachstandard können dies aber noch ein paar mehr sein). Es sagt dem Browser, dass der Text der von ihm umschlossen wird ganz oben in der Titelleiste des Browsers ausgegeben wird.
Schreiben wir also unsere erste Seite um zu sehen was passiert. Öffnet euren Editor (z. B. den in Teil 0 beschriebenen) und schreibt etwas in der Art:
[quote=HTML][b]<title>Meine erste Seite</title>
Ich bin so stolz![/b][/quote]
Wie ihr seht, wird „meine erste Seite“ von den öffnenden und schließenden <title>-Tags umschlossen.
Beim Abspeichern gebt ihr der Datei einen Namen (am besten ohne Leerzeichen, Umlaute und Sonderzeichen) und die Dateiendung .html und speichert sie irgendwo ab, wo ihr sie wiederfindet (solltet ihr Windows Notepad als Editor nutzen müsst ihr darauf achten, dass in dem Speichern-Dialog der Dateityp auf „Alle Dateien“ steht.). Das wars schon!
Wenn ihr die Datei doppelt anklickt öffnet sie sich automatisch in eurem Browser und ihr seht das Ergebnis.
Grundgerüst
Das obere Beispiel ist schon ganz nett, aber wie wir alle wissen ist nett der kleine Bruder von scheiße. Wir wollen ja nichtnur HTML schreiben das funktioniert, sondern auch in größeren Dateien noch übersichtlich und logisch ist. Also fügen wir ein paar HTML-Tags hinzu um unseren Code zu strukturieren.
Zuerst einmal macht es Sinn, den Anzeigebereich von allem was nicht angezeigt wird (wie zusatzinformationen, Titel, etc.) zu trennen. Dafür gibt es die HTML-Tags <body> und <head>
[quote=HTML][b]<head>[/b]
<title>Meine erste Seite</title>
[b]</head>
<body>[/b]
Ich bin so stolz!
[b]</body>[/b]
[/quote]
Dort drum herum packen wir nun noch das Tag <html>, welches den gesamten Inhalt als HTML-relevant kenntlich macht
[quote=HTML][b]<html>[/b]
<head>
<title>Meine erste Seite</title>
</head>
<body>
Ich bin so stolz!
</body>
[b]</html>[/b][/quote]
Hey, das sieht ja schon ganz gut aus!
Erinnert ihr euch noch daran, dass HTML verschiedene Sprachstandards hat? Dann sagen wir dem Browser doch am besten, in welchem Sprachstandard wir unsere Dateien schreiben! Dafür gibt es die sogenannten Doctypes. Davon gibt es so einige, teils ziemlich lange Zeichenfolgen. Wir verwenden den HTML5 Doctype, weil er ziemlich kurz ist und außerdem bereits auch bei älteren Browsern verstanden wird.
[quote=HTML][b]<!DOCTYPE html>[/b]
<html>
<head>
<title>Meine erste Seite</title>
</head>
<body>
Ich bin so stolz!
</body>
</html>[/quote]
Der Doctype ist ein spezieller Tag (sieht man schon daran, dass er mit einem Ausrufezeichen beginnt und kein Endtag hat) der sehr sehr wichtig ist! Fehlt dieser Doctype oder vertippt ihr euch dort oder steht dieser nicht in der ersten Zeile, werden eure Seiten in manchen Browsern in einen Kompatibilitäts-Modus (Quirks-Modus) geschaltet. Kurz gesagt, der Browser denkt, du wärst ne hole Nuss, weißt nix von HTML und er versucht deshalb, deine Seite mit Gewalt irgendwie darzustellen.
Gut, zum Schluß erzählen wir dem Browser noch, welche Zeichen und Sprache wir verwenden. Fangen wir mit dem Zeichensatz an. Dieser sollte definitiv mit dem Zeichensatz zusammenpassen, in den euer Editor die Seite abspeichert. In Kurs 0 habt ihr ihn hoffentlich auf UTF-8 eingestellt, deshalb schreiben wir, dass wir diesen Zeichensatz verwenden:
[quote=HTML]<!DOCTYPE html>
<html>
<head>
[b]<meta charset="UTF-8">[/b]
<title>Meine erste Seite</title>
</head>
<body>
Ich bin so stolz!
</body>
</html>[/quote]
Meta-Tags (davon gibt es mehrere) haben auch keinen Endtag, wie ihr seht. Den Zeichensatz solltet ihr immer direkt nach dem öffnenden <head> Tag notieren, denn schon euer <title>-Tag könnte Sonderzeichen enthalten für die der Browser wissen muss, wie er diese darstellen muss. Alle anderen <meta>-Tags folgen für gewöhnlich erst nach dem <title>-Tag.
Und wir sehen noch etwas neues, nämlich unser erstes ATTRIBUT! Attribute sind sozusagen die Eigenschaften von HTML-Tags. Sie sind immer gleich aufgebaut: schlüssel="Wert", in dem Fall also charset="UTF-8". Auf Attribute werden wir noch öfters treffen.
Und wo wir schonmal dabei sind, für das HTML-Tag gibt es das Attribut lang für language. Damit machen wir kenntlich in welcher Sprache unser Inhalt gestaltet ist. Für eine deutsche Seite ist das also "de", für eine englische "en", für eine chinesische "cn", etc.
[quote=HTML]<!DOCTYPE html>
<html[b] lang="de"[/b]>
<head>
<meta charset="UTF-8">
<title>Meine erste Seite</title>
</head>
<body>
Ich bin so stolz!
</body>
</html>[/quote]
Damit ist unser Grundgerüst vollständig. Das könnt ihr euch einfach abspeichern und für neue Seiten wieder als Vorlage benutzen.
P.S.: Damit euer Quelltext noch übersichtlicher ist, solltet ihr euren Code einrücken. Ich rücke zum Beispiel jede Zeile zwischen den <body>-Tags und <head>-Tags um jeweils 4 Leerzeichen ein (bei Notepad++ kann man einstellen, dass jeder Druck auf die Tab-Taste x Leerzeichen erzeugt). Das wird hier im Forum leider nicht deutlich. Vielleicht baut mir Dennis ja noch ein code-BBTag :D
Copyright © 2024 squizzl - Alle Rechte vorbehalten.