HTML Kochbuch

Programm

  • Wir verwenden den Texteditor Smultron. Du kannst aber auch einen beliebigen anderen Editor verwenden, z.B. TextPad für Windows.
  • Eine einfache Webseite enthält mindestens den abgebildeten Quelltext.

Speichern

  • Der Dateiname darf keine Leerschläge, Umlaute (ä, ö, etc.) oder diakritischen Zeichen (é, â, etc.) enthalten.
  • Die Endung ist .html
  • Alle Dateien einer Website müssen sich im gleichen Ordner befinden. Den Ordnernamen darfst du frei wählen, halte dich aber an die obigen Regeln. Achte darauf, sonst funktioniert die Site nicht!

Zeilenumbruch

  • Das Kürzel br in eckigen Klammern bewirkt einen Zeilenumbruch. Normalerweise wird der Text vom Browser automatisch umbrochen. Verwende den br-Tag nur, wenn du einen Absatz erzeugen willst.

Entities

  • Für Umlaute und andere Sonderzeichen brauchst du sogenannte Entities. Die wichtigsten findest du in nebenstehender Tabelle.
  • Eine vollständige Liste findest du hier.

Titel

  • Für Titel verwende den h-Tag. Der Text steht dabei zwischen dem öffnenden Tag links und dem schliessenden mit Slash rechts.
  • h1 ist der grösste, h6 der kleinste Titel.

Textstile

  • Die drei wichtigsten Textauszeichnungen, d.h. fett, kursiv und unterstrichen, kannst du auch mit HTML-Tags erzeugen. Vergiss den schliessenden Tag nicht, sonst ist der ganze Rest der Seite fett, kursiv oder unterstrichen.

Bilder einfügen

  • In eine Webseite kannst du Bilder in den Formaten .jpg (sprich tscheipegg), .gif oder .png einfügen.
  • Die Bilder müssen sich im gleichen Ordner befinden wie die html-Datei.
  • Mit align gibst du an, ob das Bild links (left) oder rechts (right) des Textes stehen soll.
  • Die Gänsefüsschen nach den Gleichheitszeichen müssen sein, sonst funktioniert das Ganze nicht!

Hintergrundfarben

  • Wenn deine Seite eine Hintergrundfarbe haben soll, ergänze den den body-Tag mit einem Farbattribut. (Gänsefüsschen nicht vergessen!)
  • Verwende entweder den Farbnamen (z.B. red) oder den Farbcode (z.B. #ff0000). 
    # = alt + 3 
  • Eine Liste mit einigen Farben findest du hier.

Textfarbe

  • Für Textfarbe setze den font-Tag. (Schliessenden Tag ohne Farbangabe!)

Grafik als Titel

Tabellen

  • «table» öffnet eine neue Tabelle
    «border» => Zellränder in Pixel
    «width» => Breite der Tabelle in Pixel 
  • «tr» öffnet eine neue Zeile
  • «td» öffnet eine neue Zelle
  • Alle öffnenden Befehle müssen mit / wieder geschlossen werden.

 

Tabellen formatieren

  • Hintergrundfarbe => bgcolor="#     "
  • Rahmen => frame="box"
  • Rahmenfarbe => bordercolor="   "

Tabs 'n' more für faule HTML-Entwickler findest du hier.

Buttons findest du hier.

Einen Button als Link verwenden

1. Generiere den Button mit dem Button Generator (Mouse Over Effekt nicht vergessen.)

2. Lade die Buttons herunter.

3. Kopiere den Mouse Over HTML Code und füge ihn in Smultron nach dem Titel ein.

4. Schreibe vor diesen Code den Code für den Link: <a href="home.html"> und danach zum Beenden des Links </a>

Abbildung unten.

Einen Button als Link verwenden
Einen Button als Link verwenden