HTML-Grundlagen

Anzeige:
  • Aufbau jeder HTML-Datei:
    Datei-Kopf und Datei-Körper
    Syntax:
    <html>
    <head>
    <title>
    Der Titel wird in der Titelzeile des Browsers angezeigt und spielt bei Suchmaschinen eine wichtige Rolle!</title>
    </head>
    <body>
    Hier folgt der eigentliche Inhalt.
    </body>
    </html>


  • Text und Überschriften werden generell nur in den Datei-Körper geschrieben.
    Sechs Überschriftengrößen sind erlaubt (1=sehr groß; 6=sehr klein)
    Syntax Überschrift: <h4>Text der Überschrift</h4>
    Syntax Text: <p>normaler Text (End-Tag nicht notwendig, aber auch nicht verkehrt)

  • Ausrichten von Text und Überschrift erfolgen mit den gleichen Befehlen:
    Syntax:
    <h4 align=left / right / center / justify>Hier folgt der Text</h4>
    left=linksbündig (Voreinstellung) / right=rechtsbündig / center=zentriert / justify=Blocksatz

  • Links (Verweise)
    Es gibt absolute Links (komplette Adresse wie z.B. http://www.h-a-r-z.de/html1.html), relative Links (logischer Bezug wie z.B. /html1.html) und eMail-Links.
    Syntax: <a href="URL">Linktext</a>
    Syntax eMail-Link: <a href="mailto:name@domain.com">Linktext</a>

  • Tabellen
    Tabellen ermöglichen ein genaues positionieren von Text und Grafik. Der Grundaufbau einer Tabelle sieht folgendermaßen aus:
    Syntax:
    <table>  einleitender Tabellen-Befehl, übliche ergänzende Formatierungen: width="x" (Breite)   align="left/center/right" (Ausrichtung)   border="x" (Rahmen)   cellpadding="x" (Liniendicke)   cellspacing="x" (Abstand zum Zellenrand)
    <tr>  einleitender Befehl für eine neue Tabellenzeile
    <td>  einleitender Befehl für eine Datenzelle
    </td>  Abschluß der Datenzelle
    </tr>  Abschluß der Tabellenzeile
    </table>  Tabellenende

  • Syntax einer Tabelle mit zwei nebeneinander liegenden Zellen:
    <table>
    <tr>
    <td> Inhalt
    </td>
    <td> Inhalt
    </td>
    </tr>
    </table>

  • Syntax einer Tabelle mit zwei untereinander liegenden Zellen:
    <table>
    <tr>
    <td> Inhalt
    </td>
    </tr>
    <tr>
    <td> Inhalt
    </td>
    </tr>
    </table>

  • META-Angaben:
    (immer im Dateikopf)

    "keywords" - Stichworte zum Inhalt; maximal 1000 Zeichen möglich; keine Wortwiederholungen verwenden
    Syntax: <meta name="keywords" content="Wort 1, Wort 2">

    "description" - Kurzbeschreibung der Seite; maximal 200 Zeichen möglich (bei einigen Suchmaschinen nur 150)
    Syntax: <meta name="description" content="Wort 1, Wort2">

    "refresh" - automatische Umleitung auf andere Adresse
    Syntax: <meta http-equiv="refresh" content="5; URL=http://www.h-a-r-z.de">
    (in diesem Fall wird die Seite nach 5 Sekunden auf die Adresse www.h-a-r-z.de weitergeleitet)

  • Jede Seite sollte einen kurzen, aussagekräftigen Titel besitzen (maximal 10 Worte).

  • HTML Info:
    Legen Sie eine Hintergrundfarbe für Ihre Seite fest.
    Syntax:   <body bgcolor="#ffffff">  (Beispiel für weiße Hintergrundfarbe für die gesamte Seite)
    Auch für Tabellen bzw. einzelne Tabellenzellen lassen sich auf diese Weise Hintergrundfarben definieren.

  • Zu jedem Bild sollten folgende Angaben gehören: height (Höhe) ="Pixelzahl" , width (Breite) ="Pixelzahl" ; dazu empfehlenswert ein alternativer Text (alt="Text").
    Syntax: <img src="URL" height="x" width="x" alt="Text">

  • Bilder und Grafiken sehen in Originalgröße am besten aus; d.h., nicht in HTML skalieren. Keine Regel ohne Ausnahme: bei einfarbigen Grafiken ist skalieren möglich.

  • Nur Standard-Fonts verwenden (Arial, Times New Roman, Courier, eventuell noch Comic Sans und Tahoma). Wenn die geforderten Fonts auf dem Nutzersystem nicht installiert sind, besteht die Gefahr, ein völlig zerstörtes Layout angezeigt zu bekommen.

  • Grafik benötigt Speicher und Ladezeit - nicht übermäßig einsetzen (gilt vor allem für animierte GIFs). Auch ästhetische Gesichtspunkte beachten!

  • Eine verbreitete Unsitte ist die Optimierung einer Seite für einen bestimmten Browser (meist Microsoft IE). Webseiten werden für Menschen und nicht für Browser geschrieben! Machen Sie Ihre Seite kompatibel für möglichst alle Browser.

Anzeige: