Home

HTML-Kurzanleitung

Struktur - Format - Link - Liste - Tabelle - Bilder - Email

In HTML kann man ganz normale Texte schreiben, z. B. im Notepad-Editor und sie unter "meindokument.htm" abspeichern.
In einem Browser (z.B. Microsoft Explorer oder Netscape) kann man dann das Dokument dann betrachten (Datei\Öffnen ...).

Bei einem Html-Dokument müssen zuerst einmal die Struktur-Tags beachtet werden, die (fast) immer paarweise auftauchen, als Anfangs-(<...>) und Endtag (mit </...>):

<!DOCTYPE> enthält Information für den Browser
<HTML> rahmt das ganze Dokument ein
<HEAD> grenzt den Kopf des Dokuments ein, der im Browser nicht sichtbar ist
<TITLE> befindet im <HEAD> und gibt den Titel an.
<BODY> ist der Teil, der im Browser sichtbar ist.

Dort kann nun munter drauflos geschrieben werden. Der Browser wird den Zeilenumbruch immer dann durchführen, wenn es notwendig sein sollte.
<BR> erzwingt einen Zeilenumbruch und
<P> einen neuen Absatz (mit etwas Abstand zur letzten Zeile).

Zum Formatieren von Text werden vor allem drei Tags benutzt:
<B> umrahmt einen fettgedruckten (bold) Text und
<I> einen kursiv (italic) geschriebenen Text.

<CENTER> zentriert den Text

Um Überschriften zu formatieren, wird

<H1> für eine Hauptüberschrift

<H2> für eine zweite Ebene

<H3> für eine dritte Ebene

<H4> für eine vierte Ebene

verwendet. Für das Erstellen von Standarddokumenten reicht dieser Befehlssatz aus.

Hyperlinks

Um aber ein "richtiges" Dokument in HTML zu erstellen, also ein Hypertext-Dokument, muss man noch Dokumente verbinden, also mit "Links" verknüpfen. Das können entweder Dokumente im selben Verzeichnis (lokal) sein oder im gesamten Internet (global). Die Syntax ist jeweils gleich: <A HREF="..."> und für die Punkte wird die Adresse des Links eingesetzt, z. B. so:

Interner Link: 
< a href="/j/link.htm" >  Link zum Dokument link.htm im selben Verzeichnis
<a href="/j/../html.htm"> Link zum Dokument html.htm im übergeordneten Verzeichnis
<a href="/j/ordner/link.htm">    Link zum Dokument link.htm im untergeordneten Verzeichnis "ordner" 

Oder ins WWW: 
<A HREF="http://www.rudolf-web.de">Rudolf-Web.de</A> Link ins Rudolf-Web.de

Linien

<HR> erzeugt eine horizontale Linie:

Für Fortgeschrittene noch fünf weitere Komponenten:

  1. Listen
  2. nummerierte Listen
  3. Tabellen
  4. Bilder
  5. und Email-Anbindung.

1. Listen

<UL> umrahmt die ganze Liste
<LI> kennzeichnet einen Listeneintrag

2. nummerierte Listen

  1. <OL> umrahmt die nummerierte Liste
  2. <LI> kennzeichnet wieder einen Listeneintrag

3. Tabellen

Zwischen diese TD-Zeichen kommt eine Zelle der Tabelle
Nach TR beginnt eine neue Zeile Also: <TABLE> für Tabelle
<TR> für eine neue Zeile <TD> für eine neue Zelle

4. Bilder

Um Bilder einzubinden lautet die Syntax:
<IMG SRC="..."> und für die Punkte wird der Bildname eingesetzt (zulässig sind nur Bilder der Formate gif und jpg)
<IMG SRC="xexcuse.gif">

5. Email-Anbindung

Um dem Betrachter der Seiten Kontaktmöglichkeit zu Dir zu ermöglichen, sollte die Email-Adresse angegeben werden oder besser noch:
mit einem Klick soll der User dich anmailen können. Dazu lautet die Syntax:
<A HREF="MAILTO: ..."> und für die Punkte die Emailadresse einsetzten: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!   

 

TIPP 1: Wenn ihr in euren Dokumente diese Formate nutzen wollt, kopiert sie einfach aus diesem Dokument.

TIPP 2: Das Dokument Selfhtml enthält eine absolut ausführlich Anleitung in HTML (und noch viel mehr).

TIPP 3: Der Inhalt ist wichtiger als das Layout!

TIPP 4: Für jeden Schüler wird ein eigener Ordner angelegt. Darin speichert jeder seine Dokumente ab, wobei Textdokumente die Endung "htm" und Bilddateien die Endung "gif" oder "jpg" haben müssen. Alle Dateinamen müssen kleingeschrieben werden.