html-codes

 

Internet und World Wide Web


Das Internet gibt es seit den 60er Jahren. Es besteht aus Computern, die zusammen ein Netz bilden. Damit die Computer Informationen austauschen knnen, brauchen sie eine gemeinsame Sprache.
Windows-PCs und DOS-PCs, Macintosh-Computer, NECs und Unix-Computer arbeiten mit verschiedenen Sprachen. Nur
ASCII-Zeichen verstehen alle Computer. 1990 entwickelte deshalb Tim Berners-Lee das Protokoll "http" und die Sprache "HTML". HTML besteht nur aus ASCII-Zeichen. Tim Berners-Lee ist ein Techniker am CERN in Genf.

Das World Wide Web (WWW) ist ein Teil des Internets. Die Dokumente des WWW schreibt man in HTML, und mit http schickt man sie ber das Internet. Deshalb steht am Anfang jeder WWW-Adresse: "http://". Damit whlt man das richtige Protokoll, denn es gibt ja auch andere Protokolle im Internet, z.B. Gopher und Telnet. Das WWW ist also der Teil des Internets, auf dem html-Dokumente verschickt werden.

Im World Wide Web gibt es inzwischen viele Bilder. Der grere Teil des Internets besteht aber noch immer aus Text. Wie ein groes Buch besteht das "Netz" also aus Texten und Bildern. Was ist der Unterschied zwischen einem Buch und dem WWW?

Ein Buch hat eine logische Struktur: Am Anfang steht das Inhaltsverzeichnis. Ich kann das Buch von vorne nach hinten lesen oder im Inhaltsverzeichnis suchen, was interessant ist.

Das WWW hat kein Inhaltsverzeichnis. Es ist chaotisch. Im Internet gibt es viele interessante Informationen, aber sie sind nicht geordnet. Das Wissen wird im Buch logisch geordnet; im WWW werden Informationen "vernetzt" (von "Netz").

Man bewegt sich im "Netz" von einer Seite zu einer anderen Seite ber die "Links". Einen ber Links verknpften Text nennt man "Hypertext".

Was ist HTML?




HTML ist eine Dokumentbeschreibungssprache. HTML beschreibt also, wie ein Dokument aussieht. HTML schreibt man in ASCII. Deshalb verstehen es alle Computer, z.B. Windows PCs oder Macintoshs. Trotzdem zeigt HTML auch Bilder, Tabellen, Links und Graphiken. 

In HTML gibt es Text und Befehle. Alle Befehle stehen in Klammern, also z.B.: . Am Ende des Befehls wird er mit einem Strich wiederholt, also: . Dieser Befehl bedeutet "bold" (fett). Man schreibt Text zwischen die Befehle: fetter Text.Das Ergebnis sieht dann so aus: fetter Text

Man schreibt den Text und die Befehle in ASCII. ASCII-Texte schreibt man meistens mit einem Editor, z.B. Windows Notepad. Wenn man einen HTML-Text mit einem Editor liest, werden auch alle Befehle in ASCII dargestellt. Das sieht dann so aus: 

CERN: Das CERN Conseil Europen pour la Recherche 

Diesen Text nennt man "Quellcode".

Mit ASCII-Editoren kann man also HTML schreiben, aber nicht das Ergebnis sehen. Dafr braucht man einen "Browser". Das ist ein Programm, das HTML-Texte richtig interpretiert. Der Browser liest z.B.: kursiv und zeigt auf dem Bildschirm: kursiv Einige bekannte Browser sind Netscape, JustView oder Internet Explorer. In Ihrem Browser knnen Sie auch den Quellcode sehen: In Netscape drcken Sie Ctrl-U und im Internet Explorer Alt-V, C. Versuchen Sie es einmal!

Ein HTML-Dokument hat verschiedene Elemente, die mit Befehlen bezeichnet werden. Elemente sind: berschriften, Listen, Tabellen, Links (=Anker), Grafiken und andere. Am Anfang und am Ende von Elementen steht der entsprechende Befehl. Also: 

(Befehl) Text (Ende Befehl). 
Man kann Befehle in Befehle schreiben, z.B.: 

(schriftgre +2)(fett)Text(Ende fett)(Ende Schriftgre), oder: 


(Liste)

  • (Listenpunkt) Text des ersten Listenpunkts (Ende Listenpunkt)
  • (Listenpunkt) Text des zweiten Listenpunkts (Ende Listenpunkt)

(Ende Liste)

HTML-Befehle nennt man Tags. Sie stehen immer in spitzen Klammern. Es gibt einen Anfangs-Tag und einen End-Tag: Inhalt. WWW-Browser interpretieren die Tags so, da man das Dokument auf dem Bildschirm richtig sieht. 

Aufbau einer HTML-Seite


  • HTML-Tags

Jede HTML-Seite mu von einem Browser als HTML-Seite erkannt werden. Deshalb steht das ganze Dokument zwischen den Tags:

Dokument.

Jedes Dokument hat zwei Teile: "Header" und "Body".

  • Header
    Der Browser zeigt den Header nicht. Trotzdem ist er notwendig, denn die Suchmaschinen fragen zuerst nach Informationen im Header. Darin stehen der Titel, der Name des Autors und vielleicht einige andere Informationen. Der Tag sieht so aus:

    Informationen

    Der Titel wird so angegeben:



    Der Browser zeigt den Titel einer Seite ganz oben auf dem Bildschirm an. Jetzt sehen Sie z.B. ganz oben den Titel: HTML-Einfhrung: Aufbau einer HTML-Seite. Einige andere Informationen nennt man Metainformationen, d.h. Informationen ber die Seite. Dazu gehrt der Name des Autors, Stichworte und eine kurze Beschreibung des Inhalts. Die Metainformationen schreibt man so:



    Also z.B.:

    Der ganze Header sieht dann so aus:




...
[andere Metainformationen]

 

  • Body
    Im Body steht das, was der Browser zeigt. Dazu gehren Text, Grafiken, Tabellen, Links und anderes. Diese Elemente knnen mit Tags definiert werden. Aber wir lernen spter, wie das geht.
    Die Tags fr den Body sehen so aus:


Seiteninhalt

 

  • Gesamtaufbau
    Eine HTML-Seite hat also folgenden Aufbau:





    ...


    Seiteninhalt

Jetzt machen wir unsere erste eigene HTML-Seite!

Die erste HTML-Seite


  • Starten Sie das Windows Notepad.
  • Schreiben Sie zuerst die Tags fr das gesamte Dokument. Sie knnen die Tags auch von der vorigen Seite kopieren (copy and paste). Schreiben Sie dann zwischen die "Header"-Tags die entsprechenden Informationen, z.B.:
    oder:
  • Schreiben Sie zwischen die "body"-Tags zuerst eine berschrift und dann einen Text, der Ihnen gefllt. Er soll nicht zu kurz sein. Schreiben Sie bitte auf Deutsch.
  • Wenn Sie einen Absatz machen wollen, schreiben Sie den Text zwischen die Tags

    (fr "Paragraph").
  • Sichern Sie die Datei in Ihrem Verzeichnis z.B. unter dem Namen "html1.html" (alle HTML-Dateien enden auf .html oder .htm).
  • ffnen Sie einen Browser und suchen Sie mit Ctrl-O Ihre Datei. Das ist Ihre erste HTML-Seite! Und so einfach!

Links einfgen


Wir machen nun ein "Netz" aus Seiten. Dafr brauchen wir mindestens zwei Seiten.

Lesen Sie noch einmal Ihre erste HTML-Seite. Welches Thema ist besonders interessant? Wo mchten Sie ein Link einfgen?

ffnen Sie dann eine neue Datei im Windows Notepad. Kopieren Sie noch einmal die Tags und schreiben Sie einen zweiten Text zwischen die "Body"-Tags. Vergessen Sie nicht die berschrift. Dann sichern Sie die Datei unter einem neuen Namen, z.B. "html2.html", in Ihrem Verzeichnis.

ffnen Sie jetzt wieder Ihre erste Datei und suchen Sie das Wort, das auf die zweite Datei verweisen soll. Davor schreiben Sie: , dahinter: . Sichern Sie die Datei und schauen Sie sich das Ergebnis im Browser an.

Das Link erscheint jetzt blau und unterstrichen. Wenn Sie darauf klicken, erscheint sofort die andere Seite. Allerdings knnen Sie noch nicht zurueck. Dafr richten Sie jetzt am besten auch ein Link ein. Sie knnen z.B. am Ende der zweiten Seite ein Link "zurck" einfgen.
Das "A" vor "HREF" bedeutet brigens englisch "anchor".

Farben fr eine ganze Seite bestimmen


  • Ihre HTML-Seite sieht bis jetzt ziemlich langweilig aus. Mit ein paar Farben wird sie interessanter. Die Farben fr die gesamte Seite definiert man mit dem "Body"-Tag. Sie knnen fnf Farben definieren:
    • Hintergrundfarbe: BGCOLOR="Farbcode"
    • Textfarbe: TEXT="Farbcode"
    • Farbe von Links: LINK="Farbcode"
    • Farbe von Links, die Sie schon angeklickt haben: VLINK="Farbcode"
    • Farbe von Links whrend des Klickens: ALINK="Farbcode"
  • Der Farbcode besteht immer aus dem Zeichen "#" und sechs Ziffern. Der gesamte Tag sieht also so aus:


...

Das sind die Farben fr diese Seite.

  • Es gibt 16 Grundfarben und 256 weitere Farben zur Wahl. Achten Sie auf groen Kontrast zwischen Vordergrund und Hintergrund! Sonst kann man Ihre Seite schlecht lesen. Whlen Sie zu einem hellen Hintergrund eine dunkle Schrift, oder umgekehrt. Oft ist es besser, einen hellen Hintergrund zu whlen.
    Auf der Seite
    "Farbpaletten" knnen Sie Ihre Farben whlen. ffnen Sie dann wieder das Windows Notepad und geben Sie Ihren Seiten Farben!

Eine Vorlage fr mehrere Seiten herstellen


Sie haben jetzt zwei HTML-Seiten und mchten noch mehr Seiten machen. Der Inhalt ist aber zum Teil derselbe. Z.B. haben Sie immer denselben Header. Nur den Titel ndern Sie von Seite zu Seite. Die Farben sind auch immer dieselben. Daher machen wir jetzt eine Vorlage fr alle neuen Seiten. Sie entht nur das, was bei allen Seiten gleich ist.

ffnen Sie Ihre erste Seite. ffnen Sie das "Datei"-Men (File) und sichern Sie die Datei als "vorlage.html" (save as). Dann lesen Sie die Datei genau durch: Im "Header" stehen der Titel und Ihr Name. Nur der Titel ndert sich. Lassen Sie die Tags stehen und lschen Sie nur den Titel selbst. Dann schreiben Sie zwischen die Tags: "!!HIER DEN TITEL EINSETZEN!!". Wenn Sie eine neue Seite machen, ffnen Sie nur die Vorlage und schreiben den neuen Titel hierher.

Im "Body" haben Sie den Body-Tag, den Titel und Texte. Der Body-Tag bleibt stehen. Die Tags fr den Titel lassen Sie auch stehen. Nur den Titel selbst lschen Sie und schreiben wieder: "!!HIER DEN TITEL EINSETZEN!!". Lschen Sie dann den Text und schreiben Sie: "!!HIER TEXT SCHREIBEN!!". Lschen Sie nicht die End-Tags fr und !

Sichern Sie jetzt die Seite noch einmal als "vorlage.html". Wenn Sie eine neue Seite machen, ffnen Sie zuerst diese Datei. Dann sichern Sie sie unter einem neuen Namen und schreiben Ihre Tags und Ihren Text.

berschriften hervorheben


 

Jetzt gliedern wir unsere HTML-Seiten. Die wichtigsten Mittel zum Gliedern sind: berschriften, Tabellen, Listen und Abschnitte. Abschnitte haben wir schon mit dem Tag

gemacht.

Mit berschriften knnen Sie Ihren Text gliedern, z.B. so:

Hier steht der Titel Ihrer Hausarbeit

Einleitung

(Text)

Hauptteil

1. Kapitel

(Text)

1. Unterkapitel

(Text)

2. Unterkapitel

(Text)

2. Kapitel

(Text)

3. Kapitel

(Text)

Schlu

(Text)

Bibliographie

(Liste)

Es gibt berschriften in sechs Gren. Sie werden mit den Tags

bis
markiert.

ist die grte berschrift.("H" von Englisch "heading".) Der Tag fr das erste Kapitel sieht also so aus:

1. Kapitel

Aufgabe

Starten Sie jetzt wieder das Windows Notepad und ffnen Sie Ihren ersten oder zweiten Text. Lschen Sie den

-Tag und setzen Sie die berschrift zwischen die Tags

oder

. Lesen Sie dann den Text noch einmal und setzen Sie eine Zwischenberschrift ein. Benutzen Sie dafr eine kleinere berschrift. Sehen Sie sich das Ergebnis im Browser an.

Listen: Aufzhlungen und numerierte Listen


Auch Listen benutzt man oft, um Texte zu gliedern. berschriften benutzt man fr lngere Texte. Listen benutzt man fr kleine Abschnitte. Es gibt zwei Arten von Listen: Aufzhlungen und numerierte Listen.

Aufzhlungen

Die ganze Liste steht zwischen den Tags

    und
("UL" heit "unordered list"). Die Punkte der Liste stehen jeweils zwischen den Tags
  • und
  • ("LI" heit "list item").

    Jeder Listenpunkt bekommt automatisch einen Punkt. Das sieht etwa so aus:

    Einkaufszettel

    • 1 Pfund Zucker
    • 1 Liter Milch
    • 3 pfel
    • Toilettenpapier
    • 1 Paket Butter

    Die Tags fr diese Liste:


      Einkaufszettel


    • 1 Pfund Zucker

    • 1 Liter Milch

    • 3 pfel

    • Toilettenpapier

    • 1 Paket Butter

    Hier gibt es einen Fehler. Finden Sie ihn?
    Man kann auch Unterpunkte zu den Listenpunkten machen. Z.B. so:

    Einkaufszettel

    • Lebensmittel
      • Mehl
      • Butter
    • Schreibwaren
      • Papier
      • Bleistifte

    Dafr machen Sie eine zweite Liste in der ersten:

      Titel


    • Untertitel


      • Listenpunkt

      • Listenpunkt


    • Untertitel

      • Listenpunkt

      • Listenpunkt

    Beachten Sie: Am Ende brauchen Sie zwei

    -Tags!

    Numerierte Listen

    Mit numerierten Listen knnen Sie ganz genau gliedern:

    Das Haus der Wissenschaft

    1. Naturwissenschaften
      1. Physik
        1. Mechanik
        2. Astrophysik
        3. Nuklearphysik
        4. ...
      2. Chemie
      3. Biologie
        1. Botanik (Pflanzenkunde)
        2. Zoologie (Tierkunde)
    2. Human- oder Geisteswissenschaften
      1. Philosophie
      2. Mathematik (??)
      3. Geschichte
      4. Sprach- und Literaturwissenschaften
        1. Altphilologien
          1. Latinistik
          2. Grzistik
          3. ...
        2. Neuphilologien
          1. Anglistik
          2. Romanistik
          3. Germanistik (Das ist unser Zimmer im "Haus der Wissenschaft"!
            1. Deutsche Sprachwissenschaft
            2. Deutsche Literaturwissenschaft
              1. ltere Deutsche Literatur
              2. Neuere Deutsche Literatur
          4. ...
        3. Orientalistik
          1. Sinologie
          2. Japanologie
          3. ...
      5. Soziologie
      6. ...

    Numerierte Listen schreibt man genau wie Aufzhlungen, aber statt

      und
    schreibt man
      und
    . (Englisch "ordered list>.) Wenn Sie keine Zahlen wollen, sondern Buchstaben, schreiben Sie in den Anfangstag:
      . Dann gibt es eine Liste: A, B, C...
        ...
      ergibt: a, b, c...;
        ...
      ergibt I, II, III, IV...;
        ...
      ergibt i, ii, iii, iv...

      Aufgabe

      Starten Sie jetzt wieder das Windows Notepad und sichern Sie die Vorlage als "liste1.html". Schreiben Sie zuerst eine berschrift und dann eine kurze Liste. Sie knnen die Tags von dieser Seite kopieren und in den Body-Text einsetzen. Machen Sie dann ein Link von Ihrer ersten Seite zu dieser Liste, und ein Link von der Liste auf die erste Seite. Danach schreiben Sie bitte eine lngere Liste mit einer Unterliste.


      Schriftgestaltung


       

      Ausrichten

       

      Normaler Text steht links. Am linken Rand bilden alle Zeilen eine gerade, senkrechte Linie. Rechts "flattert" der Rand.

      Der Text kann aber auch rechts stehen. Das sieht ungewhnlich aus. Manchmal ist es aber ntzlich. Auch Grafiken knnen links, rechts oder in der Mitte stehen ("zentriert").

      Und so sieht zentrierter Text aus.

      Der Tag fr zentrierten Text:

      Text
      .

      Der Tag fr Text am rechten Rand:

      Text
      .

      Der Tag fr Text am linken Rand:

      Text
      .

      Normaler Text steht links. Der Tag

      ...
      ist also eigentlich berflssig.

       

      Text betonen: fett, unterstrichen, kursiv

       

      Worte und Textteile knnen Sie hervorheben. Wie bei einem normalen Textprogramm oder Wordprocessor knnen Sie den Text

      fett,
      unterstrichen oder
      kursiv

      darstellen. Die Tags dafr heien:

      fett;
      unterstrichen;
      kursiv.

       

      Text betonen: Schriftgren

       

      HTML kennt sieben Schriftgren. Die normale Schriftgre ist 3. Mit dem Tag Text ndern Sie die Schriftgre von 3 auf 5. Mit Text von 3 auf 2. Sie knnen alle Schriftgren von 1-7 benutzen.

      Benutzen Sie die Schriftgren sparsam! Ein Text mit vielen Schriften und Schriftgren ist schlecht lesbar. Benutzen Sie lieber berschriften und Listen.

       

      Text betonen: Schriftfarben

       

      Auch mit Farben knnen Sie Text betonen. Der Tag heit:
      farbiger Text. Die Farbcodes fr den Body-Tag und Schriftfarben im Text sind gleich. Sie knnen also die
      Paletten benutzen.

      Man kann die Tags zusammen benutzen: Text.

      Aufgabe

       

      ffnen Sie im Windows Notepad Ihre Vorlage (vorlage.html). Sichern Sie die Datei als "schrift.html" und schreiben Sie einen neuen Text. Dann betonen Sie verschiedene Teile des Textes. Benutzen Sie zentriert, links, rechts, fett, unterstrichen, kursiv, Schriftgren und Schriftfarben. Schreiben Sie mindestens einen Satz in jeder Schriftart.

      Tabellen


       

       

      Tabellen fr die Seitengestaltung: Unsichtbare Tabellen

       

      Mit berschriften, Listen und Schriftarten wird ein Text logisch gegliedert. Mit Tabellen gliedern wir die Seite auf dem Bildschirm. Diese Gliederung ist also nicht logisch, sondern rumlich (bzw. flchig). Hier ist eine Tabelle:

       

       

       

       

      Diese Tabelle war sehr klein. Man sieht sie fast nicht. Jetzt schreiben wir in die Zellen:

      Wenn man in die Zellen schreibt, "wachsen" sie! Viel Text macht breite Zellen.

      Wenig Text macht schmale Zellen.

      Sie knnen Tabellen fr Text oder Grafiken benutzen. Eine Tabelle kann eine ganze Seite fllen. Mit Tabellen gliedern Sie Ihre Seite.

       

      Sie kennen die nchste Tabelle schon! Das ist die Vorlage fr diese HTML-Einfhrung. Aber bei der Original-Vorlage sieht man die Linien nicht. Fr die Seitengestaltung benutzt man oft unsichtbare oder "blinde" Tabellen.



      HTML-Einfhrung fr Studenten der Universitt Iwate

      !TITEL!



      Text


      Inhaltsverzeichnis
      zurck: Schriftgestaltung - Vorwrts: Grafiken
      Glossar

      Tabellen bestehen aus waagrechten Zeilen. Die Zeilen bestehen aus Zellen. In den Zellen stehen die Informationen. Jede Zelle macht automatisch eine senkrechte Spalte. Man braucht also einen Tag fr die Tabelle, einen Tag fr Zeilen und einen Tag fr Zellen. Die Tags fr eine Tabelle sehen also so aus:










      ......
      ......

      Das ist eine Tabelle mit zwei Zeilen und zwei Spalten (=zwei Zellen in jeder Zeile).

      heit "Tabelle", heit "table row" (Zeile);
      heit "table data" (Zelle). Eine Tabelle kann sehr viele Zeilen enthalten, und eine Zeile kann viele Zellen enthalten. Zellen stehen immer in Zeilen.

      Man kann auch eine Tabelle in eine Zelle setzen. Viele Webseiten sind z.B. so aufgebaut:

      Hier geht es zur Startseite

      Hier ist der Titel

      Hier steht das Inhaltsverzeichnis

      In dieser Tabelle steht der Seiteninhalt. Der Autor mu nicht jede Seite neu schreiben. Nur diese Tabelle schreibt er neu. Dann setzt er die Tabelle in die Vorlage.

      Mit zwei Zellen gibt es hier noch Platz fr Grafiken.

      Eine Tabelle mit zwei Zeilen und zwei Zellen pro Zeile ist oft ntzlich.

       

       

      Tabellen definieren


      Eine einfache Tabelle "wchst" mit dem Inhalt, und man sieht die Linien nicht. Die Gre einer Tabelle und die Linien kann man aber definieren. Entweder fr die ganze Tabelle, oder fr einzelne Zeilen und Zellen. Den Tag schreibt man in den Anfangstag der Tabelle, Reihe oder Spalte.

      Tabellenbreite, Tabellenhhe


      Die Tabellenbreite und -hhe definiert man in Prozent des Fensters oder in Pixel (relativ oder absolut). In den Anfangstag scheibt man:

      Das sieht so aus ("Hhe" funktioniert nur in einem leeren Fenster.):

      Wissenschaftliche Bcher sind oft dick und schwer und breit. Die Zeilen sind sehr lang. Deshalb ist die Wissenschaft so schwer zu lernen. Schmale Bcher passen in jede Tasche. Und auch leichter ins Gehirn.

      Text in zwei oder drei Spalten ist leicht zu lesen. Die Zeilen sind nicht so lang. Lange Zeilen ermden die Augen.

       

      Lange am Bildschirm zu lesen ermdet auch die Augen. Deshalb findet man im World Wide Web oft Spalten und Bilder. Manchmal zuviele Bilder.

      Zeitungen und Bcher mit langen Zeilen und wenig Bildern nennt man auf Deutsch "Bleiwste". Frher machte man die Buchstaben zum Drucken aus Blei, und eine Wste ist langweilig.

      Oder man schreibt

      Das sieht so aus:

      Hier steht Text,

      und hier auch.

      Hier gibt es vielleicht ein Bild.

      Und hier?

      In Pixeln funktioniert auch die Hhe.

      Linienbreite

      Mit "blinden Tabellen teilt man oft die ganze Seite: Titel, Inhaltsverzeichnis, Grafiken, Textspalten. Sie knnen die Linien aber auch sichtbar machen. Die Auenlinien und die Innenlinien haben einen eigenen Tag.

      Auenlinien: <...>

      Die Linienbreite schreibt man in Pixel. Die Tabelle oben hat also 4 Pixel breite Linien.

      Innenlinien: <...>

      Diese Tabelle hat 6 Pixel breite Auenlinien und 4 Pixel breite Innenlinien. Das sieht etwa so aus:

       

       

       

       

       

       

       

      Aufgabe

       

      ffnen Sie im Windows Notepad Ihre Vorlage und sichern Sie sie als "tabelle.html". Schreiben oder kopieren Sie die Tags fr Tabellen zwischen die Body-Tags. Machen Sie zwei oder drei verschiedene Tabellen. Eine Tabelle soll auch eine zweite Tabelle enthalten.

      Achtung! Jede Zelle mu einen Inhalt haben. Sonst sieht der Rahmen anders aus. Kopieren Sie in eine leere Zelle die Zeichen " " (ohne Anfhrungszeichen). Man sieht die Zeichen nicht, aber die Tabelle hat einen Inhalt.

      Grafiken


      Die Brder Grimm. Begrnder der Germanistik

      Ladezeiten

      ber das WWW schickt man Informationen. Die Menge der Informationen mit man in Byte. Viele Bytes brauchen viel Zeit, wenige Bytes brauchen wenig Zeit fr den Transport. Jeder Buchstabe hat 1 Byte. Diese HTML-Datei ist etwa 5 KB (Kilobyte) gro, also 5.000 Byte. Das kleine Bild der Brder Grimm ist etwa 15 KB gro. Das Bild braucht lnger als der ganze Text!

      Deshalb komprimiert man Bilder. Sie brauchen dann weniger Platz. Es gibt zwei Komprimierungsformate fr Bilder im WWW: JPEG und GIF. Das Bild oben ist ein JPEG-Bild.

      Um ein groes Bild zu laden, braucht man manchmal 2 Minuten. Das ist sehr lange und kostet Geld. Deshalb setzt man oft ein kleines Bild in den Text. Wenn man auf das kleine Bild klickt, erscheint das groe Bild. Klicken Sie einmal auf das Bild der Brder Grimm!

      Grafiken einbinden

      Der Tag fr eine Grafik heit: . Der Tag fr die Brder Grimm heit also:

      Die Grafikdatei muss bei diesem Tag im Verzeichnis der HTML-Datei stehen. Sie knnen aber auch Grafiken von anderen Servern benutzen. Dann muss die Datei nicht auf Ihrem Computer stehen.

      Das nchste kleine Bild wird aus dem Internet geladen. Im Tag steht die gesamte Internetadresse des Bildes:

      Caspar David Friedrich, Kreidefelsen auf Rgen. Um 1818

      Wenn Sie auf das kleine Bild klicken, kommt wieder ein groes Bild. Sie benutzen das kleine Bild also als Link. Der Tag dafr ist fast wie bei allen Links:

      Text

      Bei "Adresse des Ziels" steht aber kein Dateiname, sondern die Internetadresse des groen Bildes. Und zwischen den Tags am Anfang und am Ende steht kein Text, sondern das kleine Bild:

      Aufgabe

      Besuchen Sie das Webmuseum: http://SunSITE.sut.ac.jp/wm/ oder Carol Jackson's Fine Art Museum: http://SunSITE.sut.ac.jp/cjackson/fineart.htm. Sichern Sie ein kleines Bild, das Ihnen gefllt, in Ihrem Verzeichnis. Drcken Sie dafr die rechte Maustaste und whlen Sie aus dem Men. Dann sichern Sie das groe Bild. ffnen Sie das Windows Notepad und machen Sie eine neue HTML-Datei. Schreiben Sie den Namen des Malers und den Titel des Bildes in die berschrift. Setzen Sie das kleine Bild mit einem Link auf das groe Bild in die Datei.

       

      Grafische Hintergrnde


      Sie haben im Body-Tag schon Hintergrundfarben bestimmt. Man kann auch Grafiken als Hintergrund benutzen. Das geht nur mit GIF- oder JPEG-Grafiken.

      Der Browser wiederholt eine Hintergrundgrafik immer wieder. Eine kleine Grafik bedeckt also die ganze Seite. Sie knnen daher kleine Grafiken benutzen. Dann braucht der Browser weniger Zeit zum Laden. Denken Sie an den Kontrast zwischen Hintergrund und Schrift! Dunkler Hintergrund - helle Schrift; heller Hintergrund - dunkle Schrift.

      Der Befehl fr eine Hintergrundgrafik gehrt in den Body-Tag. Er sieht so aus:

      Aufgabe

      Suchen Sie im Internet, z.B. bei iamuc internet design, einen passenden Hintergrund. Klicken Sie mit der rechten Maustaste darauf und sichern Sie den Hintergrund in Ihrem Verzeichnis. Whlen Sie eine passende Schriftfarbe und ndern Sie Ihre HTML-Seiten.

      Ein Projekt planen


      Sie sind fast am Ende der HTML-Einfhrung. Entwerfen Sie jetzt ein neues Projekt. Ein Projekt ist eine Sammlung von Ihren HTML-Seiten zu einem Thema.

      berlegen sie zuerst: Fr wen mache ich mein Projekt? Wieviele Seiten hat das Projekt? Wie sieht das Layout aus? - Vielleicht machen Sie einen Entwurf auf Papier. Schreiben Sie Ihre Seiten mit einem HTML-Editor.

      Machen Sie auf der Festplatte des Computers ein eigenes Verzeichnis fr Ihr Projekt. Alle Seiten kommen in dieses Verzeichnis. Dann benutzen Sie relative Links. Ein relatives Link ist z.B.: "inhalt.html". Ein absolutes Link ist: "c:\html\meinproj\inhalt.html". Auf Ihrem Computer funktionieren relative und absolute Links. Aber: Sie laden Ihr Projekt am Ende auf einen Server hoch. Der Server kennt die Verzeichnisse auf Ihrer Festplatte nicht. Deshalb funktionieren Ihre absoluten Links nicht. Benutzen Sie also relative Links. Vor dem hochladen machen Sie auf dem Server ein neues Verzeichnis. Dahin kommen alle Ihre Dateien.

      Nennen Sie Ihre Startseite "index.htm" oder "index.html". Dieser Name wird automatisch als Startseite erkannt.

      Machen Sie eine Probeseite mit einem Inhaltsverzeichnis, berschriften und anderen Elementen. ndern Sie diese Seite, bis sie Ihnen gefllt. Vergessen Sie nicht die Meta-Tags! Dann sichern Sie die Probeseite als Ihre Vorlage.

      Probieren Sie alle Ihre Seiten genau aus. Stimmt der Text? Stehen die Bilder an der richtigen Stelle? Funktionieren alle Links? - Dann knnen Sie Ihre Seiten hochladen.

      HTML-Editoren und andere Hilfsmittel fr Windows 95


      Sie haben einige HTML-Seiten mit dem Windows Notepad geschrieben. Der Quellcode ist in einem normalen Texteditor schwer zu lesen. Es gibt besondere HTML-Editoren. Einige Editoren zeigen den Quellcode. Andere Editoren zeigen die Seite ungefhr so, wie sie spter aussieht. Das sind WYSIWYG-Editoren.

      Textorientierte Editoren

      Textorientierte Editoren zeigen den HTML-Quellcode in verschiedenen Farben. Mit Buttons und Mens schreibt man leicht Tags. Viele Texteditoren haben einen eingebauten Browser. Damit kann man die Seite sehr schnell sehen.

      Es gibt vierschiedene textorientierte HTML-Editoren. Die meisten mu man natrlich bezahlen. Es gibt auch einige "Freeware"-Editoren. Ein guter Freeware-Editor ist z.B. Homesite 1.2. Das Programm hat keinen eingebauten Browser, aber man kann einen oder zwei externe Browser benutzen. Homesite 1.2 kann man in Deutschland downloaden. Die Datei ist nur 504 KB (KiloByte) gro. Eine deutsche oder englische Hilfe gibt es auch online. Die deutsche Hilfe kann man auch downloaden.

      So sieht der textorientierte HTML-Editor Homesite 1.2 aus

      Der HTML-Editor von Ulrich Meybohm ist fast ein professionelles Programm. Er kann ber die Homepage des Autors heruntergeladen werden (ca. 900 KB). Dort gibt es auch weitere Informationen.

      TagPad ist ein japanischer HTML-Editor. Damit knnen Sie auch Japanisch schreiben (wenn Sie einen japanischen Computer haben). Das Programm hat sogar einen eingebauten Browser. Es zeigt den Quellcode aber nicht in Farbe.
      Es gibt eine WWW-Seite mit
      Informationen dazu. Dort kann man das Programm auch downloaden (ca. 2,5 MB). TagPad sieht so aus:

      WYSISYG-Editoren

      WYSIWIG heit "What You See Is What You Get". Der Editor zeigt die Seite whrend der Arbeit so, wie sie spter aussieht. Man kann aber nicht genau sehen, welche Tags der Editor schreibt. Das ist ein Nachteil. Denn verschiedene Browser zeigen HTML-Seiten verschieden. Eine Seite, die im WYSIWYG-Editor gut aussieht, sieht in einem anderen Browser vielleicht schlecht aus. Auerdem sind WYSIWYG-Editoren groe und langsame Programme.
      Die deutsche Version von
      Frontpage Express, einem WYSIWYG-Editor von Microsoft, knnen Sie an der Uni Karlsruhe downloaden. Dort gibt es auch eine Kurzanleitung.

      Andere Hilfsprogramme

      Es gibt verschiedene Programme, die Ihnen die Arbeit leicht machen. Die Tags fr Hintergrundfarben und Schriftfarben sind oft kompliziert. Dafr gibt es "Colorpicker". Ein Freeware-Colorpicker ist z.B. der Font and Body Tag Wizard. Sie knnen ihn bei TUCOWS downloaden (262 KB).

      Er sieht so aus:

      Manchmal schreiben Sie falsche HTML-Tags. Mit einem HTML-Validator knnen Sie Ihre Tags kontrollieren. Ein Freeware-Programm ist der CSE HTML Validator Lite (ca. 3 MB).

      Wenn Ihre HTML-Seiten fertig sind, mssen Sie sie hochladen. Dafr brauchen Sie ein FTP-Programm. Ein gutes Freeware-FTP-Programm ist WS-FTP LE. Sie knnen es bei TUCOWS direkt herunterladen.

      Online-Hilfen

      Es gibt auch HTML-Validatoren online im WWW. Dort geben Sie Ihre URL ein. Der Validator prft dann Ihre HTML-Seite. Versuchen Sie es bei Netmechanic. Netmechanic prft auch Ihre Links. Manche Seiten ndern die Adresse oder verschwinden. Dann sind Ihre Links falsch. Der "Link-Checker" von Netmechanic findet die falschen Links auf Ihrer Seite.

      Liste der Tags


      Diese Liste enthlt nur die Tags, die im Text erklrt werden, und einige andere leicht verstndliche Tags. Eine vollstndige Liste gibt es z.B. bei Stefan Mnz: HTML-Dateien selbst erstellen.

      HTML-Befehl

      Bedeutung

      Link

      Ziel fr ein Link innerhalb einer Datei

      fetter Text

      Dateikrper

      Farbe fr angeklickte Verweise

      Dateihintergrundbild

      Dateihintergrundfarbe

      Farbe fr Verweise

      Farbe fr besuchte Verweise


      Erzwungener Zeilenumbruch

      Textabschnitte zentriert ausrichten

      Textabschnitte definieren/ausrichten

      Schriftfarbe

      Schriftart

      Schriftgre

      berschrift

      berschrift ausrichten

      Kopf einer HTML-Datei


      Trennlinie


      Trennlinie ausrichten


      Trennlinienfarbe


      Trennlinie ohne Schatteneffekt


      Trennlinienhhe


      Trennlinienlnge

      Anfang/Ende einer HTML-Datei

      kursiver Text

      Grafikbeschriftung / Text um Grafik

      Grafik einbinden: alternativer Text

      Grafik einbinden: Rahmen um Grafik

      Grafikhhe angeben

      Horizontaler Abstand Grafik / Text

      Grafik einbinden

      Vertikaler Abstand Grafik / Text

      Grafikbreite angeben

    1. Listeneintrag

      Allgemeine Angaben im Header

      Zeilenumbruch verhindern

      Numerierte Liste

      Numerierte Liste mit Startwert

      Besonders numerierte Liste

      Textabsatz

      Textabsatz ausrichten

      durchgestrichener Text

      tiefgestellter Text

      hochgestellter Text

      Blinde Tabelle

      Tabellen ausrichten neben Text

      Hintergrundbild fr Tabelle

      Hintergrundfarbe fr Tabelle

      Tabelle mit Rahmen und Gitternetzlinien

      Tabelle, Rahmendicke

      Rahmenfarbe einer Tabelle

      Tabelle, Randabstand Zelleninhalt

      Tabelle, Gitternetzliniendicke

      Hhe der Tabelle

      Breite der Tabelle

      Tabellendatenzelle

      Tabellendatenzelleninhalt horizontal ausrichten

      Hintergrundbild fr Tabellendatenzelle

      Hintergrundfarbe fr Tabellendatenzelle

      Tabellendatenzellen spaltenweise verbinden

      Zeilenhhe Tabellendatenzelle

      Tabellendatenzellen zeilenweise verbinden

      Tabellendatenzelleninhalt vertikal ausrichten

      Spaltenbreite Tabellendatenzelle

      Titel einer HTML-Datei im Header

      Tabellenzeile

      Hintergrundfarbe fr Tabellenzeile

      unterstrichener Text

      Aufzhlungsliste


      (nach Stefan Mnz, HTML-Dateien selbst erstellen) Farbpaletten


      Die 16 Grundfarben:

       

      Die 216 Standardfarben:

      (nach Stefan Mnz, HTML-Dateien selbst erstellen)

      Liste mit Umlauten und Sonderzeichen


      HTML benutzt nur 128 Zeichen aus dem ASCII-Zeichensatz. Darin sind alle Buchstaben, die Amerikaner brauchen, aber z.B. nicht die deutschen Umlaute , und . Man mu besondere Zeichen eingeben, damit der Browser Umlaute zeigt. Alle Sonderzeichen beginnen mit "&" und enden mit ";". Benutzen Sie folgende Zeichen:

      Zeichen

      Schreiben Sie in HTML:

      Einige Zeichen benutzt man in HTML, um Befehle zu bezeichnen. Diese Zeichen drfen nicht im normalen Text geschrieben werden. Wenn Sie in eine HTML-Datei schreiben: "3 < 4 und 6 > 5", versteht der Browser die Zeichen zwischen "<" und ">" als Tag. Man braucht also Sonderzeichen wie bei den Umlauten.

      Zeichen

      Schreiben Sie in HTML:

      <

      <

      >

      >

      "

      "

      &

      &


      (nach Stefan Mnz, HTML-Dateien selbst erstellen)

       

      Glossar


      • ASCII: American Standard Code for Information Interchange. Der ASCII-Zeichensatz besteht aus 255 Zeichen (Zahlen, Buchstaben und Sonderzeichen wie z.B. ~, +, &). HTML benutzt nur 127 davon. Das ist genug, um englische Texte zu schreiben, aber die deutschen Umlaute , , und das und andere Sonderzeichen sind nicht dabei.
      • Browser: Ein Browser ist ein Programm, das HTML-Dokumente interpretiert. Mit einem Browser kann man HTML-Dokumente auf dem Bildschirm sehen oder auch drucken. Bekannte Browser sind z.B. Netscape, Opera oder Internet Explorer.
      • CERN: :Das CERN (Conseil Europen pour la Recherche Nuclaire) ist ein Forschungszentrum fr Kernteilchenphysik in Genf. Dort wurden http und html zuerst entwickelt. Heute arbeitet das World Wide Web Consortium (W3C) an html. Das W3C ist eine Abteilung des CERN.
      • Client: Jemand, der mit einem Computer Informationen von einem Server holt. Manchmal nennt man auch den Computer "Client"
      • Copy and Paste: (kopieren und ersetzen) Mit "copy and paste" knnen Sie Text von einer Stelle im Dokument an eine andere Stelle kopieren, oder von einem Dokument in ein anderes: Markieren Sie den Text mit der Maus (Doppelklick am Anfang, einfacher Klick am Ende). Drcken Sie Ctrl-C. Gehen Sie mit der Maus an das Ziel. Drcken Sie Ctrl-V. Fertig!
      • Hochladen: Man schreibt HTML-Seiten auf dem eigenen Computer. Damit andere Leute die Seiten lesen knnen, muss man sie auf einen Server kopieren. Das nennt man "hochladen". Zum hochladen braucht man ein FTP-Programm (FTP: File Transfer Protocol)
      • HTML: HyperText Markup Language. HTML ist eine Dokumentbeschreibungssprache, d.h. HTML beschreibt, wie ein Dokument aussieht. Das Dokument kann z.B. Text oder Tabellen, Bilder und Hyperlinks enthalten.
        Man schreibt HTML in ASCII, aber zum Lesen braucht man einen
        Browser.
        HTML wird hufig erweitert. D.h. es gibt neue Befehle, die manche (oder viele) Browser verstehen. Jetzt ist Version 4.0 aktuell.
      • HTTP: HyperText Transfer Protokol. HTTP wurde 1989 von Tim Berners-Lee am CERN in Genf entwickelt. Mit HTTP werden html-Dokumente ber das Internet transportiert.
      • Hypertext: Texte sind liniear (auf einer Linie) angeordnet. Ein Buch liest man meistens von vorne nach hinten. Im Hypertext gibt es an vielen Stellen Verweise (Links). Man springt von einer Stelle im Text zu einer anderen Stelle, oder zu einem anderen Text. Hypertexte sind also nicht linear. Vorteil: Man findet sofort interessante Informationen. Nachteil: Die Informationen sind meistens nicht systematisch geordnet.
        Der grte Hypertext ist das
        WWW. Diese Einfhrung ist ein kleiner Hypertext und zugleich ein Teil des WWW.
      • Internet: Das Internet ist ein weltweites "Netz" aus Computern. Man kann Informationen von einem Computer zu einem anderen schicken. Im Internet gibt es verschiedene "Dienste". Jeder Dienst hat ein eigenes Protokoll. Die wichtigsten Dienste sind:
        • Telnet ruft Programme auf anderen Computern auf.
        • Mit FTP (File Transfer Protokol) werden Dateien zwischen Computern transportiert. Ein FTP-Programm brauchen Sie, um Ihre Webseiten hochzuladen.
        • Electronic Mail fr den Transport von e-mails.
        • Mit Gopher kann man Dateien auf anderen Computern lesen. Die Dateien sind in Verzeichnissen geordnet. Gopher wurde viel benutzt, bevor das WWW bekannt wurde.
        • World Wide Web
      • Pixel: Abkrzung fr "picture element". Ein Pixel ist der kleinste Punkt in einem digitalen Bild. Der Bildpunkt hat eine bestimmte Farbe. Digitale Bilder und auch ein Computerbildschirm bestehen aus Pixeln. Bildschirme haben oft 640 * 480, 800 * 600, 1024 * 768 oder 1280 * 1024 Pixel. Ein Bild mit 100 * 200 Pixeln ist also auf einem Bildschirm mit 800 * 600 Pixeln grer als auf einem Bildschirm mit 1024 * 768 Pixeln.
      • Server: Ein Server ist ein Computer, der Informationen speichert. Clients, d.h. Leute an anderen Computern, knnen die Informationen benutzen. Wenn Sie eine Webseite im Internet in Ihrem Browser sehen, sind Sie der "Client". Sie holen die Webseite von einem Server.
      • URL: Uniform Resource Locator. Die "URL" ist die Adresse eines Dokuments im Internet. Alle URLs im WWW beginnen mit "http://". Der Browser sucht nach der URL, die Sie eingeben.
      • World Wide Web: Das World Wide Web ist ein Teil des Internets. ber das World Wide Web verschickt man und liest man HTML-Dokumente. Das World Wide Web nennt man auch "WWW" oder "W3". Es ist ein groer Hypertext.

      Hinweise auf weiterfhrende Literatur


      Die bekannteste (und wahrscheinlich beste) Einfhrung auf Deutsch: HTML-Dateien selbst erstellen. Von Stefan Mnz. Man kann sie auch als ZIP-Datei downloaden. Bald erscheint Version 7.0

      Die HTML-Einfhrung von Hubert Partl ist auch gut. Man kann sie downloaden. Auerdem gibt es dort noch eine HTML-Kurzbeschreibung.

      Ganz kurz: HTML und CGI-Crashkurs von der Uni Heidelberg (deutsch).

      Die HTML Reference Library 3.0 ist eine Windows Hilfedatei (englisch).

      Zwei japanische HTML-Hilfen: nach Tags geordnet oder nach Funktionen geordnet.

      Die "offizielle" Adresse zu HTML ist das W3-Consortium am CERN in Genf.

      Online-Version des Buches: M.Scheller, K.-P. Boden, A. Geenen, J. Kampermann, Internet: Werkzeuge und Dienste. Von Archie bis World Wide Web. Berlin, Heidelberg: Springer 1994

      Internet-Bcherliste (mit Bewertungen) aus Mnster


      Hintergrundbilder finden Sie z.B. bei iamuc internet design

      Alles von :

      http://www.biblint.de/htmle/

       Viel Spa!!!!

       

      Seid ihr mutig ?

      wenn ja wrd ich trodzdem mal

      berlegen ob ihr lieber doch die

      Finger davon lasst!!!

      Wenn nicht viel Glck

      Geht von Nummer zu Nummer aber aufpassen!!!!!!!!

       

      1. Hast du keine Angst wenn nicht geh weiter nach unten zu Schritt 2.

       

       

      2. Bist du auf alles vorbereitet dann geh weiter zu Schritt 3.

       

       

      3. Nimmst du inkauf das dein Computer vielleicht zerstrt wirdwenn ja ab zu Schritt 4.

       

       

      4. berleg dir gut was du machst was unten kommt kann dich vernichten wenn dir das egal ist ab zu Schritt 5.

       

       

      5. Du kannst Gehirnschden davontragen ist dir das egal dann ab zu Schritt 6.

       

       

      6. Bist du bereit JETZT GEHTS GLEICH LOS 

      bist du bereit  hast du keine Angst

      nimmst alles in kauf  

      DANN GEH GANZ NACH UNTEN ABER ACHTUNG!!!!!!!

       

      WEITER

       

       

       

      WEITER

       

       

       

       

      NOCH WEITER

       

       

       

      NOCH EIN KLEINES STCK

       

       

       

      GLEICH BIST DU UNTEN

       

       

       

      Verarscht  ist nichts passiert

      aber du warst mutig

      GLCKWUNSCH!!!

      Manch einer htte sich das nicht getraut aber du schon SUPER!!!

       

    Kostenlose Homepage von Beepworld
     
    Verantwortlich für den Inhalt dieser Seite ist ausschließlich der
    Autor dieser Homepage, kontaktierbar über dieses Formular!