[an error occurred while processing this directive]

Finden Sie harmonische Farben

Mit MyColor Studio, dem professionellen Farbmanagement für Ihre Webseite

Hier klicken und mehr erfahren

Programme von Machern für Macher

Die Grammiweb-Produktreihe hält viele praktische Tools für Webdesigner bereit

Hier klicken und mehr erfahren

[an error occurred while processing this directive]

(Stand: 23.12.24, Adresse: http://www.grammiweb.de/anleitungen/ws_fpe2.shtml)

 

Erstellung von Webseiten mit Frontpage Express

von Thomas Mühlbayer

Kapitel Eins: Der Blick hinter die Kulissen von HTML

1.1. Aufbau einer HTML-Seite

Obwohl Frontpage Express keine detaillierte Kenntnisse über HTML voraussetzt, sollte man trotzdem den prinzipiellen Aufbau einer HTML-Seite kennen. Das sorgt für ein tieferes Verständnis und erlaubt auch Formatierungen, die FP Express nicht explizit anbietet.

HTML enthält nur druckbare Zeichen (7-Bit-ASCII). Das bedeutet, dass Formatierungsanweisungen auch aus diesem Zeichensatz gebildet werden müssen.

Im oberen Teil der folgenden Tabelle ist eine einfache HTML-Beispielseite so dargestellt, wie sie ein Browser anzeigt. Im unteren Teil sehen Sie den kompletten Text, der dahinter steckt.

Das ist eine Beispielseite

Das ist ein Text, der in dieser Seite enthalten ist.

Hier haben wir Fettschrift.
Das ist rot und größer geschrieben.

<HTML>
    <HEAD>
      <TITLE>Dies wird nicht vom Browser angezeigt</TITLE>
    </HEAD>
  <BODY>
    <H3>Das ist eine Beispielseite</H3>
    <P>
    Das ist ein Text, der in dieser Seite enthalten ist.
    <P>
    Hier haben wir <B>Fettschrift</B>.<BR>
    Das ist
    <FONT COLOR=red SIZE=+1>rot und größer</FONT>
    geschrieben.
  </BODY>
</HTML>

Man erkennt die Struktur von HTML. Um "Steuerzeichen" (englisch: tag = Etikett, Schildchen) als solche kenntlich zu machen, werden sie mit kleiner- und größer-Zeichen eingeschlossen. Zu (fast) jedem Tag gibt es ein "End"-Tag, das zusätzlich das / - Zeichen enthält und die entsprechende Formatierung beendet.

Das komplette Dokument wird durch die Tags <HTML>...</HTML> eingeschlossen.

<HEAD>...</HEAD> schließt einen Kopf ein. Die dort untergebrachten Informationen werden mit Ausnahme des Titels nicht anzeigt. Sie dienen der Verwaltung des Dokuments und werden z.B. von Suchmaschinen im WWW ausgewertet.

Alles, was zwischen <BODY>...</BODY> steht, wird dargestellt.

<H3>...</H3> markiert eine von 6 möglichen Überschriftarten.

<BR> bewirkt einen Zeilenumbruch und <P> erzeugt einen neuen Absatz. Diese beiden Tags brauchen keinen End-Tag.

Manche Tags können unter Umständen Parameter enthalten. Als Beispiel sehen Sie oben das <FONT> - Tag, das als Parameter die Angabe der Farbe und Größe enthält.

In einigen Eigenschaftsfenstern von FP Express finden Sie einen Knopf Erweitert. Hiermit können Sie zu dem entsprechenden Tag Parameter "von Hand" hinzufügen.

1.2. Der in Frontpage Express eingebaute HTML-Quelltexteditor

Sie können die HTML-Dateien mit jedem beliebigen (ASCII-) Texteditor bearbeiten (z.B. mit Windows-Notepad). In Frontpage Express ist aber schon ein solcher Editor eingebaut, der zusätzlich die Tags farblich vom Text absetzt und die Struktur des Textes durch Einrückungen sichtbar macht.

Mit dem Menüpunkt  Ansicht / HTML wird dieser Editor eingeblendet.

Verändern Sie am Quelltext etwas und schließen dann das Editor-Fenster, werden die Änderungen - falls von FP Express darstellbar - automatisch in die WYSIWYG-Ansicht ("What You See Is What You Get") übernommen.

1.3. Ein Formatierungsbeispiel mit dem Quelltexteditor

Geschachtelte Listen können von Frontpage Express nicht direkt erzeugt werden.

Im folgenden Beispiel wurde die Schachtelung der Listen deshalb von Hand im Quelltexteditor eingetippt.

<ol>
<li>Insekten</li>
<li>Säugetiere
<ol type="a" start="24">
<li>Wale</li>
<li>Affen
<ul type="disc">
<li>Schimpanse</li>
<li>Gorilla</li>
</ul>
</li>
<li>Pferde</li>
</ol>
</li>
<li>Vögel</li>
</ol>

<ol>...</ol> steht für "Ordered List"
<li>...</li> steht für "List-Element"
<ul>...</ul> steht für "Unordered List"

Verschiedene Parameter wurden verwendet:
type="a" start="24" bewirkt eine Nummerierung mit Buchstaben, beginnend beim 24. Buchstaben im Alphabet. type="disc" gibt an, dass gefüllte Kreise als Markierung verwendet werden sollen.

Das Beispiel erzeugt folgende Darstellung:

  1. Insekten
  2. Säugetiere
    1. Wale
    2. Affen
      • Schimpansen
      • Gorillas
    3. Pferde
  3. Vögel

Obwohl die geschachtelten Listen von Hand erzeugt wurden, lassen sich durch rechten Mausklick in die Teilliste ihre Eigenschaften einstellen. Obige Parameter müssen also nicht unbedingt im Quelltexteditor eingegeben werden.


Zurück Zurück zum Inhaltsverzeichnis Weiter

[an error occurred while processing this directive] [an error occurred while processing this directive]

© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 23.12.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt