ChristophTutorials - (Video)Tutorialseite und IT-Blog

Zitat der Woche

Früher hatten wir die spanische Inquisition. Jetzt haben wir die Kompatibilität.
- Herbert Klaeren

Letzte Artikel

Zufällige Artikel

Verzeichnisse

Blogverzeichnis - Blog Verzeichnis bloggerei.de Blogverzeichnis Blog Verzeichnis Blog Top Liste - by TopBlogs.de Blog Button
Datenschutzerklärung
Impressum
HTML - Grundlagen - 31.10.2010
In diesem Tutorial geht es darum, wie HTML 4.01 grundlegend aufgebaut ist und natürlich erst einmal, was das denn überhaupt sein soll.
Was soll denn "HTML" heißen?
HTML ist ein Akronym (eine Abkürzung, die aus den Anfangsbuchstaben der Wörter besteht) und steht für HyperText Markup Language. HTML-Dokumente bestehen aus Tags (englische: Etikett; Schild) und Attributen. Ein Tag besteht aus einem Paar von spitzen Klammern < > und dem Namen des Tags dazwischen <tagname>. Die meisten Tags werden immer als Paare benutzt: Ein öffnendes Tag und ein schließendes Tag. Dazwischen können dann je nach Tag andere Tags, Tagpaare oder Text stehen. Das schließende Tag sieht fast genauso aus, wie das öffnende Tag, der Name beginnt aber mit einem Slash /, ein Tagpaar sieht also so aus:
<tagname> </tagname>
Attribute sind optional und können weitere Informationen zu den Tags oder dem Inhalt dazwischen enthalten. Attribute stehen im öffnenden Tag nach dem Tagnamen. Sie bestehen aus dem Namen des Attributs und dem Wert, der nach einem Gleichzeichen in Anführungszeichen besteht:
<tagname attributname="Wert"> </tagname>
Das HTML-Grundgerüst
HTML-Dokumente müssen einen bestimmten Aufbau haben. Das Grundgerüst hier einfach einmal vorweg:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title></title>
 </head>
 <body>
 </body>
</html>
In der ersten Zeile befindet sich die Dokumenttyp-Deklaration. Sie gibt an, um welche Art und Version von HTML es sich handelt. Außerdem wechseln manche Browser z.B. der Internet Explorer, wenn man keine Dokumenttyp-Deklaration angibt, in einen Modus für alte HTML-Dokumente, was zu falscher Darstellung führen kann.
Das World Wide Web Consortium (W3C), das ist die Organisation, die den Standard HTML festlegt, empfiehlt den so genannten "strikten" Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Der wird hier auch immer verwendet werden.
Sonst gibt es noch den "trasitionalen" Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Der erlaubt auch noch einige ältere Tags und Attribute, die man eigentlich nicht mehr verwenden sollte.
Es gibt noch einen anderen Doctype, aber der wird in HTML5 restlos entfernt und hier nicht weiter erwähnt werden.

Dann kommt das Tagpaar <html></html>. Dieses wiederum beinhaltet die Tags <head> und <body>. In den "Kopf", zwischen die head-Tags können verschiedene Kopf-Informationen des HTML-Dokuments (dazu in weiteren Tutorials mehr), grundsätzlich enthält er aber den Titel der Webseite, welcher einfach zwischen die title-Tags geschriben wird:
<title>Beispieltitel 123</title>
Dieser Titel steht dann in der Titelleiste des Browsers und auch auf dem Tab, in dem die Seite geöffnet ist.

Nun kommen wir zu body, dem Körper der HTML-Datei. Hier ist die Erklärung recht einfach und kurz:
Hier kommt der ganze Inhalt rein.
Woraus der bestehen kann folgt auch in weiteren Tutorials. Man sollte aber möglichst nicht direkt in den body schreiben, wenn man den strikten Doctype (siehe oben) benutzt. Dort ist vorgesehen, dass man den Text zum Beispiel zwischen <p> </p>- oder zwischen <div> </div>-Tags schreibt.
Der Editor
Was uns jetzt noch fehlt ist ein Programm, in dem wir unsere Webseiten schreiben können. Wenn man erstmal nichts installieren möchte, kann man einfach den Windowseigenen Editor benutzen. Das Problem bei einem "normalen" Textverarbeitungsprogramm ist, dass zusätzliche Formatierungsinformationen mit gespeichert werden.
Den Editor von Windows (unter Linux und anderen Betriebssystemen gibt es eigentlich immer auch einen) startet man in allen Windowsversionen (die mir bekannt sind) über
Start >> Alle Programme >> Zubehör >> Editor
Dort kommt dann erstmal das Grundgerüst rein. Dann kommt etwas zwischen die <title>-Tags und dann wäre etwas Text auch nicht schlecht. Das kann dann zum Beispiel so aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Ein Beispieltitel</title>
 </head>
 <body>
  <div>
   Ein beispielhafter Text.
  </div>
 </body>
</html>
Dabei ist zu beachten, dass es dem Browser egal ist, über wie viele Zeilen man einen Text schreibt. Folgendes sieht im Browser genauso aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Ein Beispieltitel</title>
 </head>
 <body>
  <div>
   Ein be
   ispiel
   hafter
   Text.
  </div>
 </body>
</html>
Um in eine neue Zeile zu schreiben, benutzt man das Tag <br>. Hier sind wir schon beim ersten Tag, das kein schließendes Tag hat:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Ein Beispieltitel</title>
 </head>
 <body>
  <div>
   Erste Zeile<br>.
   Das ist jetzt die Zweite Zeile<br>.
   Das ist jetzt sogar schon die dritte Zeile!
   Noch die 3. Zeile<br>vierte Zeile<br>5.Z.
  </div>
 </body>
</html>
Ein bisschen Code haben wir ja jetzt geschrieben. Ein solcher Code nennt sich übrigens Quelltext oder Quellcode. Aber wie soll man den denn nun speichern? Man speichert ihn mit der Dateiendung *.html oder *.htm. Es ist dabei darauf zu achten, dass bei Dateityp "alle Dateien *.*" steht. Der Dateiname kann dann zum Beispiel index.html (Man nennt die Startseite meistens index.html, auch dazu später mehr), aber auch meine_seite.htm sein. Die Seite kann dann per Doppelklick im Standardbrowser geöffnet werden.

Dieser Editor ist nun aber ziemlich unkomfortabel. Bei größeren HTML-Dokumenten kann man schnell die Übersicht verlieren und der Funktionsumfang ist minimal. Ich persönlich benutzte den PSPad-Editor (zum Download einfach mal Googlen) und bin ziemlich zufrieden damit.
Einrücken
Einrücken ist etwas, was wir jetzt schon die ganze Zeit machen. Unser letzter Beispielcode hätte auch so aussehen können:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ein Beispieltitel</title>
</head>
<body>
<div>
Erste Zeile<br>.
Das ist jetzt die Zweite Zeile<br>.
Das ist jetzt sogar schon die dritte Zeile!
Noch die 3. Zeile<br>vierte Zeile<br>5.Z.
</div>
</body>
</html>
Der Unterschied ist offensichtlich. Vorher waren immer das öffnende und schließende Tag auf gleicher Ebene. So konnte man gleich sehen, wo das schließende zu einem öffnenden Tag ist und welches Tagpaar zwischen welchem ist. Deswegen sollte man immer Einrücken. Man kann es mit Tabulator (Die Taste, zwei Tasten unter [Escape] oder zwei Tasten über "der Taste zum groß Schreiben") oder einfach mit Leezeichen machen. Meiner Meinung nach ist die Lösung mit Tabulator eindeutiger und übersichtlicher.
Zusammenfassung
In diesem Tutorial haben wir gelernt, wie das Grundgerüst von HTML aussieht und woraus HTML grundsätzlich besteht. Du bist jetzt in der Lage eigene kleine HTML-Seiten zu schreiben. Vielleicht hast du sogar schon einen richtigen HTML-Editor installiert.

Kommentare:

- kein Kommentar -
Um einen Kommentar zu schreiben ist eine Anmeldung nötig.