Romain-Rolland-Gymnasium Dresden, Kurs Neue Medien (2013)
Übersicht wichtige Begriffe
Lektion 1:
Herangehen		 Lektion 2:
HTML		 Lektion 3:
Helfer		 Lektion 4:
so gehts		 Lektion 5:
einfache Gestaltung		 Lektion 6:
Frames		 Lektion 7:
CSS		 Lektion 8:
Dateitypen
Aufbau von HTML-Dateien
Beispiel:
Aufgaben
Phase 5 hilft
Seitenende

Was ist HTML?

Das auffälligste an einem HTML-Dokument sind die "Tags". Das sind Marken in spitzen Klammern, die alle Elemente der Seite kennzeichnen. Sie können auch ineinander geschachtelt werden. Einen etwas ausführlicheren einführenden Text finden Sie hier.
Phase 5 bereitet bei neuen Dateien das Gerüst der Datei bereits vor, so dass Sie direkt im <body>-Abschnitt beginnen können. Eine Beispiel-Datei, die einige der gebräuchlichen Tags enthält, können Sie hier als PDF-Datei und hier als HTML-Datei finden.

Aufgaben: nach oben

  1. Vergleichen Sie den HTML-Quelltext der Beispieldatei mit seinem Erscheinungsbild.
  2. Markieren Sie wichtige Tags.
  3. Sie haben sicher gemerkt, dass einige Tags Parameter enthalten. Ein Beispiel dafür ist <a href"../bookmarks.html" target="_blank">. Erläutern Sie, was diese Parameter besagen.
  4. Das Tag <a> hat noch eine weitere Bedeutung. Erläutern Sie den Unterschied zwischen Hyperlink und Anker.
  5. Bewegen Sie den Mauszeiger auf die Symbole der Symbolleisten von Phase 5 und machen Sie sich mit den wichtigsten Schaltflächen vertraut.
  6. Öffnen Sie die einzelnen Menüs und lesen Sie, welche Befehle es dort gibt. Notieren Sie Fragen zu den Befehlen, die Ihnen wichtig erscheinen.

So hilft Phase 5 nach oben

.. beim Formatieren von Text:

Markieren Sie den Text. Wählen Sie im Menü oder auf der Symbolleiste die gewünschte Formatierung. Phase 5 fügt die richtigen Tags ein. Mehr zu verschiedenen Textarten finden Sie im Abschnitt einfache Gestaltung.

.. beim Einfügen von Hyperlinks

zu Dateien des eigenen Projektes:
  1. Markieren Sie den Text, der als Link dienen soll
  2. Klicken Sie mit rechts auf die gewünschte Datei (im Verzeichnis links)
  3. Wählen Sie Einfügen|Link
zu einer Seite im Internet:
  1. Navigieren Sie mit Ihrem Browser zu der Seite, die als Ziel dienen soll.
  2. Kopieren Sie den Inhalt der Adresszeile (Markieren und Strg + C)
  3. Markieren Sie den Text, der als Link dienen soll
  4. Wählen Sie Einfügen|Hyperlink oder drücken Sie Strg + L
  5. Phase 5 fügt den Tag ein und positioniert den Cursor schon an der richtigen Stelle
  6. Fügen Sie die Adresse dort ein (Strg + V)
    Beachten Sie, dass die Adresse in diesem Fall unbedingt mit html:// beginnen muss. Bei relativen Links ist das nicht nötig.

...beim Einfügen von Bildern:

  1. Bewegen Sie den Cursor an die Stelle, wo das Bild eingefügt werden soll
  2. Klicken Sie das Bild im Verzeichnis links mit der rechten Maustaste an
  3. Wählen Sie Einfügen|Bild

.. beim Einfügen von Tabellen

Im Menü Einfügen oder mit einem Symbolbutton können Sie bequem Tabellen einfügen. Alternativ benutzen Sie den HTML-Konstruktor im Menü Tools.

.. beim Einfügen von Listen

Auch hier leistet der HTML-Konstruktor wertvolle Dienste, ohne dass Sie die zugehörigen Tags schreiben müssen. Das erledigt Phase 5 für Sie.

.. beim Einfügen von Tags

Geben Sie < ein und warten Sie einen Moment. Phase 5 zeigt eine Liste von Einträgen an und das Programm ergänzt die Marke. Die Liste ist bei neuen Versionen ziemlich kurz geworden, Sie können sie aber bearbeiten.
Meist sind Sie schneller, wenn Sie den Tag-Text eintippen. Nach dem Schließen der Klammer mit > wird auch hier das Ende-Tag ergänzt.
Für Listen und Tabellen verwenden Sie am besten den HTML-Konstruktor im Menü Tools.

.. beim Bearbeiten von Tags

  1. Bewegen Sie den Cursor direkt vor das Zeichen > im Tag und drücken Sie die Leertaste.
  2. Phase 5 zeigt eine Liste der in Frage kommenden Attribute an, aus der Sie bequem auswählen können.
 nach oben
vorherige Lektion: Grundlagen Das war Lektion 2: Was ist HTML? nächste Lektion: Helfer