HTML & CSS: Dein Wegweiser für erfolgreiches Webdesign
Beschreibung der Seitenstruktur
mit HTML
 HTML funktioniert nach dem „Sandwich-Prinzip“: Unten eine Brotscheibe, oben eine Brotscheibe und dazwischen eine Scheibe Käse oder Schinken, je nach Ihrem Geschmack. Bei HTML entspricht der „oberen Brotscheibe“ ein Befehl in spitzenKlammern, z. B. <body>. Der „unteren Brotscheibe“ entspricht derselbe Befehl,jedoch mit einem Schrägstrich (engl. „slash“) nach der öffnenden spitzen Klammer, z. B. </body>. Den Slash erhält man mit der Tastenkombination [Shift] +[7].
Die Grundstruktur eines HTML-Dokument
Super geile Welt
Die (vereinfachte) Grundstruktur eines HTML-Dokuments sieht im Editor (Notepad) folgendermaßen aus:
Haben sie schon einmal darüber nachgedacht, wie einfach es sein kann, sich die Grundstruktur dieser Tags zu merken? Mit ein paar Englischkenntnissen kannst du dir die Tags wie kleine Puzzleteile zusammensetzen, denn sie sind tatsächlich englische Wörter! Stell dir vor, die Grundstruktur ist wie ein kunterbuntes Sandwich, bei dem jedes Element perfekt ineinander passt. Beginnen wir mit dem Text „Meine tolle Webseite“ – das ist quasi die köstliche Käsescheibe in unserem Sandwich. Das äußerste Sandwich wird vom umfassenden Befehl `...` gebildet, der alles umschließt. Im Bereich `...` versteckt sich der geheimnisvolle Unterbefehl ``. Die eigentlichen Inhalte unserer Seite – sei es Text, Bilder, Tabellen oder Listen – finden im Bereich `...` ihren Platz, der im Moment noch leer und unberührt ist. Doch keine Sorge, mit ein paar geschickten Einrückungen können wir diese Schachtelung optisch hervorheben und zum Leben erwecken. Tauche ein in die Welt der HTML-Tags und lass dich von ihrer Vielfalt und Kreativität verzaubern! ihren Platz, der im Moment noch leer und unberührt ist. Doch keine Sorge, mit ein paar geschickten Einrückungen können wir diese Schachtelung optisch hervorheben und zum Leben erwecken. Tauche ein in die Welt der HTML-Tags und lass dich von ihrer Vielfalt und Kreativität verzaubern! Die faszinierende Welt des Webdesigns öffnet sich.
HTML-Code schreiben
Die Erstellung eines HTML-Dokuments kann ganz einfach mit dem Editor aus den Windows Bordmitteln erfolgen (Start>Alle Programme>Zubehör>Editor). Dieser Editor ist ein ganz primitives Programm, mit dem man lediglich Buchstaben und Zahlen eingeben kann. Er ist eigentlich dafür gedacht, einfache Textdokumente ohne jegliche Formatierung zu erstellen. Beim Abspeichern muss man deshalb darauf achten, dass man als Dateiendung auch explizit .html eingibt und nicht die Voreinstellung für Textdateien .txt verwendet.
Manchmal sehen Sie auch noch die Dateidung.htm bei HTML-Doku-Videos. So wie es war. Man kann diese auch benutzen. Aber jetzt ist sie nicht mehr da. Die Endung.html ist allgemein üblich. Bitte beachten Sie, dass vor dem Speichern etwas gespeichert wird. Im Drop-Down-Menü Codierung wählen Sie UTF-8 (8-bit Unicode Transformation) Man muss das Format auswählen, damit später auch die deutschen Umlaute korrekt sind. Der Browser sollte 3.3 korrekt dargestellt werden. Weitere Optionen Es gibt Sätze wie ANSI oder Unicode, die Sie benutzen können, um die Regeln zu verstehen. Wir brauchen die Übungen aus dem Heft nicht. Wenn Sie Ihren HTML-Code auf einem Mac eingeben, verwenden Sie bitte das. Das schon gesagte Programm TextEdit. Damit Ihr Code nicht als forma-Code verwendet wird. Wenn Sie den Text im Programm ändern wollen, müssen Sie in den Einstellungen folgende Schritte machen. Bitte ändern Sie den Text im Haupt-Menü. Edit>Einstellungen und selektieren dann das Register „Öffnen und Sichern“. Dort aktivieren Sie bitte oben nach der Überschrift „Beim Öffnen von Dateien“ die Option „Formatierungsbefehle in HTML-Dateien ignorieren“. Selektieren Sie dann bitte unten in diesem Register unter der Überschrift „Optionen für das Sichern von HTML“ folgende Einträge in den drei Drop-Down-Menüs: Dokument- art: HTML 4.01 Strict, CSS: Kein CSS, Codierung: Unicode (UTF-8). Unter dem Register „Neues Dokument“ muss das Format auch auf „Reiner Text“ ange-klickt sein weil sonst später beim Speichern der Datei keine korrekte .html- Datei erstellt wird! Die Standardeinstellung ist hier nämlich auf „Formatierter Text“ eingestellt. Achten Sie beim Speichern von Dateien darauf, dass Sie auch die Dateiendung .html eingeben.
Strukturelle Elemente
In diesem Kapitel lernen Sie die wichtigsten HTML-Tags kennen. Sie kennen die Struktur von Überschriften auf einer Webseite:
Überschriften und Absätze
Natürlich muss jetzt etwas in den Körper-Bereich kommen, damit unser Körper besser wird.
Die Webseite bekommt auch "Fleisch". Das heißt, sie hat einen sichtbaren Inhalt. Das reicht dazu.
Am Anfang benutzen wir HTML-Tags, um Überschriften und Absätze zu markieren.
Es gibt verschiedene Möglichkeiten.
Schlagwörter
Die Überschriften werden nach den entsprechenden Tags sortiert. Das Prinzip wird als Prinzip definiert. Die Tagbezeichnung h kommt von dem englischen Wort „Header“.
Beschriftung:
Die größte Überschrift ist die größte Überschrift.
Der Text der zweitgrößten Überschrift/h2
h3Text von der wichtigsten Überschrift.
Je größer die Zahl ist, desto kleiner erscheint die Überschrift. Hier ist HTML.
Es gibt sechs Ebenen für Überschriften von h1 bis h6.
Weitere Absätze
Der Begriff „Paragraph“ kommt vom englischen Wort „Paragraph“.
•
<p>Absatz-Text</p>
Damit ergibt sich folgendes Code-Beispiel:
|
