Start mit Texteditor und Internetbrowser

Gehe auf deinen Desktop, clicke an einer freien Stelle die rechte Maustaste und wähle "Neue Textdatei". Als Namen gibst du ein: Index.htm

Wenn du auf die Datei doppelclickst, wird sie nicht im Texteditor geöffnet, sondern im Internetbrowser (Internet Explorer, Firefox etc). Das liegt an der Endung ".htm" im Dateinamen.

Damit du den Text bearbeiten kannst, clickst du mit der rechten Maustaste auf das File und wählst "Bearbeiten". Jetzt geht dein Texteditor (z.B. Notepad) auf und du kannst die Seite verändern.

Du kannst den Text, der angezeigt werden soll, einfach eintippen, probiere es mal:

 Hallo Welt
 Hier bin ich!

Datei speichern (Strg + s) und im Internetbrowser öffen (auf dem Desktop doppelclicken) bzw. wenn sie noch im Internetbrowser offen ist, mit der Taste [F5] neu laden. Es erscheint:

 Hallo Welt Hier bin ich!

Der Browser erkennt keine Zeilenumbrüche. Du kannst auch keine Textformatierung (Überschriften, Fettschrift), keine Bilder und keine Links auf andere Seiten anzeigen. Hier kommt HTML ins Spiel, das dem Browser über sogenannte "Tags" mitteilen kann, dass er etwas anderes als normalen Text anzeigen soll.

Grundgerüst einer HTML Seite

Da im Internet viele Seiten in verschiedenen Sprachen und HTML Versionen stehen, sollte eine Seite immer zuerst eine Angabe haben, die dem Internetbrowser mitteilt, worum es geht. Diese Angabe lautet:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Du musst diese Zeile nicht verstehen, aber wenn es dich interessiert, bekommst du »hier eine Erklärung.

Jetzt folgt der eigentliche HTML-Code, er beginnt und schließt mit <html> und </html>.
Dazwischen gibt es zwei Teile:

Head (Kopfbereich), der Angaben zur Seite enthält, wie z.B. einen Titel, der in der Titelleiste des Browsers erscheint oder Infos für Suchmaschinen.
Body (Textbereich), der das enthält, was im Browserfenster angezeigt wird.

 <html>

<head>

   <title>Meine erste Seite</title>
  </head>

  <body>
   Hallo Welt<br>
   Hier bin ich!
  </body>

 </html>

Oben links in der Titelleiste steht jetzt "Meine erste Seite".
Jetzt sollten wir noch eine Überschrift überlegen, die so aussieht: <h1> ... </h1> (h=header). Außerdem wenn man es genau nimmt, muss noch dazu gesagt werden, dass es sich bei dem restlichen Text um einen normalen Absatz handelt:

 <h1>Willkommen auf meiner Seite!</h1>
 <p>Hallo Welt<br>
 Hier bin ich!</p>

(Kopiere diese 3 Zeilen zwischen <body> und </body>).

Bild einfügen

So, und jetzt wollen wir natürlich noch ein Bild auf der Seite haben!
Suche dazu ein schönes Bild auf deinem PC und kopiere es auf den Desktop, also dorthin wo dein HTML Dokument liegt. Das ist wichtig, denn sonst findet der Browser beim Anzeigen das Bild nicht. Wenn du später deine Seite ins Internet hochlädst, musst du auch das Bild mit hochladen.

 <img src="Dein_Bild.jpg">

(Ersetze Dein_Bild.jpg durch den richtigen Namen deines Bildes). Der Name sollte möglichst keine Leerzeichen oder Sonderzeichen außer dem "_" enthalten, auch keine Umlaute usw (äöü, ß). Das alles kann zu Problemen führen, die du vielleicht nicht mal bemerkst, weil sie von den Browsereinstellungen des jeweiligen Internetbenutzers abhängen.

Zu beachten: Umlaute und Sonderzeichen

Wenn deine Seite nicht nur auf Windows-Rechnern mit deutscher Spracheinstellung gezeigt werden soll, musst du alle Zeichen, die nicht zum Standard-Zeichensatz gehören, codieren! Das sind vor Allem Umlaute, Anführungszeichen, Spitze Klammern die keine Tags einleiten oder auch "erzwungene" Leerzeichen. (Normalerweise werden mehrere Leerzeichen hintereinander nur als eines dargestellt, weil der Browser meint, dass sie keinen Sinn machen).

Die Codierung beginnt immer mit & und endet mit ;
Alle darstellbaren Zeichen haben einen ASCII Code bzw. Unicode. Wenn du diesen Zahlencode verwendest, muss du noch ein # voranstellen. Die meisten Zeichen haben aber auch ein HTML-Kürzel, z.b. quot für ein Anführungszeichen (Unicode #34):

 &quot; = "
 &#34; = "

Die wichtigsten Zeichen findest du »hier.
Alle darstellbaren Zeichen findest du unter ASCII Code.

Lieber ein HTML Editor

Weil es sehr mühsam ist, alle Sonderzeichen und Umlaute per Hand zu ersetzen, benutze ich persönlich lieber einen HTML (WYSIWYG) Editor, der das automatisch erledigt (siehe Seiten Gestaltung). Wenn der Text erst mal auf der Seite ist, Tabellen und Bilder eingefügt sind, kann ich immer noch nachträglich direkt am Code etwas verändern.

Weiterführende HTML Dokumentation

»http://de.selfhtml.org/
Weitere Links: HTML Und CSS

Mit dem PC arbeiten

Webseiten gestalten

Programmieren

Über mich