 HTML-Grundgerüst
Mit nur 39 Tastenanschlägen + 5 <Returns> erstellen sie ihre erste (leere) HTML-Seite. Das hätten sie sicher nicht gedacht. Die 39 Textzeichen benötigen sie, um die 6 HTML-Tags für ein simples Grundgrerüst zu notieren. (siehe unten)
|
|
... nur 44 Tastenanschläge bis zur Sucht
Um eine HTML-Seite zu erstellen öffnen sie in einem HTML- oder TextEditor ein neues, leeres Dokument. Sie haben zu Anfang also ein 'leeres Blatt' vor sich.
Sie notieren die unten gelisteten 6 Anweisungen für ein HTML-Grundgerüst und speichern diese Textdatei ohne jede Formatierung (nur Text) als HTML-Dokument ab. Diese Datei sollte nun die Dateiklasse (Endung) 'htm' oder 'html' haben. Fertig! Diese (leere) HTML-Datei können sie dann bereits in einem Browser anzeigen lassen / öffnen.
Nur zur Begriffserklärung
Wenn sie eine HTML-Seite mit einem Browser anzeigen lassen, schauen sie auf die HTML-Seite, die der Browser nach ihren Anweisungen zusammenstellt. Die Anweisungen in spitzen Klammern sind nicht zu sehen! Sie schauen auf die Browseransicht der Seite.
Wenn sie die Seite im Editor bearbeiten sind die HTML-Befehle, die Anweisungen in spitzen Klammern zu sehen. Sie schauen auf den Quellcode / den Quelltext der Seite.
Querverweis  Referenz und HTML-Editor
6 HTML-Tags für ein Grundgerüst
<html>
<head>
</head>
<body>
</body>
</html>
HTML-Befehle (Anweisungen) stehen in spitzen Klammern. So kann der Browser normalen Text und Befehle unterscheiden.
Eine solche Anweisung in spitzen Klammern nennt man Tag (sprich: Tääg).
In der Informatik hat der englische Begriff 'TAG' für „Etikett“ die Bedeutung einer Markierung oder Auszeichnung.
|
|
HTML ist simpel! 6 HTML-Tags und die (leere) Seite ist fertig. Dabei tauchen die Tags in der Regel paarweise auf. Die beiden, zu einem Paar gehörenden Tags unterscheiden sich durch den 'slash' (/)
| <html> | Beginn der HTML-Seite | </html> | Ende der HTML-Seite |
| <head> | Beginn des Kopfs | </head> | Ende des Kopfs |
| <body> | Beginn des Körpers | </body> | Ende des Körpers |
Gedankenstütze:
Falls die Sprache Englisch nicht ihr tägliches Handwerkszeug ist: Denken sie einfach an 'head and shoulders' (Shampoo) oder 'Body-Lotion' (Körperlotion) um sich die neuen Begriffe zu merken.
So sieht das auf dem Schirm aus
Das ist das Grundgerüst einer HTML-Datei. Zu Beginn und ganz am Ende stehen die Tags für ein HTML-Dokument. Außerden wird hier ein Kopfbereich (head) und ein 'Körperbereich' (body) definiert.
Abgespeichert mit der Dateiendung "htm" oder "html" würde jeder Browser diese (noch leere) Datei anzeigen. So einfach geht das. Alles andere ist nur noch "Kosmetik"
Das, was sie auf der Seite anzeigen wollen notieren sie später im BODY-Bereich, zwischen <body> und </body>.
Seiteninhalt im <body>-Bereich
Ohne auf die Erklärung der Formatierung des ersten Seiteninhalts einzugehen, wird nun Text kombiniert mit HTML-Anweisungen im Body-bereich notiert. In den spitzen Klammern stehen Anweisungen für den Browser, den Text in einer bestimmten Art und Weise anzuzeigen.
<h1> Überschrift 1. Grades </h1>
<p> dieser Absatz enthält Text </p>
<ul>
<li> Aufzählungspunkt 1 </li>
<li> Aufzählungspunkt 2 </li>
<li> Aufzählungspunkt 3 </li>
</ul>
<p> dieser Absatz enthält Text </p>
Wie ihnen möglicherweise schon jetzt auffällt, werden die Anweisungen offenbar paarweise eingesetzt. Eine Anweisung steht zu Beginn, eine ähnliche als Abschluss.
Die HTML-Anweisungen werden nach einem simplen Prinzip notiert:
Nach dem 'hier beginnt der Bereich' und 'hier endet der Bereich' Schema.
Jetzt mal mit spitzen Klammern:
Beginn eines Bereiches
|
Ende eines Bereiches
|
<h1>
|
Beginn der Überschrift
|
</h1>
|
Ende der Überschrift
|
<b>
|
Beginn der Fettschrift
|
</b>
|
Ende der Fettschrift
|
<p>
|
Beginn des Absatzes
|
</p>
|
Ende des Absatzes
|
Wie ich oben schon behauptete, steht eine Anweisung zu Beginn, eine ähnliche als Abschluss. Der einzige Unterschied besteht in dem zusätzlichen ' / ' beim abschließenden HTML-Tag.
/ = ein slash (sprich: släsch)
Sie als Webmaster werden sich nun auch wie ein Fachmann ausdrücken und sprechen nur noch von 'einleitenden' und 'schließenden HTML-Tags' oder aber von 'öffnenden' und 'schließenden HTML-Tags'.
Tag = engl. Marker (sprich: Tägg)
|
Home • HTML • HTML-Grundgerüst
Demo