Erstellung eines HTML-Dokuments Einführung von M&U Holzbaur Einführung in die Erstellung von HTML-Seiten. zur Übersicht

Inhaltliche und Graphische Gliederung der Seite

Zur logischen Gliederung gehört:
  • Einteilung in Kopfbereich, Haupttel und Seitenschluß
  • Gliederung mit Überschriftsebenen
  • Gliederung mit Listen

    •  

     

    Zur graphischen Gliedeurung dienen

  • Frames
  • Linien
  • Tabellen

    • Logik und Darstellung

    HTML-Tags sollten die Logik des Textes beschrieben, nicht zur Formatierung herangezogen werden. Dies wird nicht von allen Autoren (auch von uns nicht) und nicht von allen Editoren konsequent durchgehalten.
    Auch HTML ist nicht ganz konsequent. Eigenlich gehört ein Text folgendermaßen formatiert:
     
    <vorspann>
       <Titel>.... </Titel>
       <Verfasser>....</Verfasser>
    </vorspann>    		 Der Vorspann enthält Verwaltungsinformation (siehe auch den head des HTML-Dokuments) 
    und das, was den Besucher beim Einstieg interessiert. 
    <Teil > 
      <Kapitel>
        <Überschrift> ..</Überschrift>
        <Inhalt>
            <Ebene2>
               <Überschrift> ..</Überschrift>
               <Inhalt>
                   <Ebene3>
                      <Überschrift> ..</Überschrift>
                      <Inhalt>
                           hier wird dann was geschrieben, evtl weitere Gliederungsebenen 
                      </Inhalt>
                     <Nachklapp> Übungsaufgaben, Literatur, Fußnoten, .....</Nachklapp> 
                  </Ebene3>
                  <Ebene3>
                      <Überschrift> ..</Überschrift>
                      <Inhalt>
                                 ..
                      </Inhalt>
                     <Nachklapp> ..</Nachklapp> 
                  </Ebene3>
              <Nachklapp> ....</Nachklapp> 
            </Ebene2>
            <Ebene2>
                   ...
            </Ebene2>
         </Inhalt>
       </Kapitel>
       <Kapitel>
                 .....
        </Kapitel>
    </Teil>
    ...    		 jede Gliederungsebene enthält:
    • ihre eigene Überschrift
    • ihre eigene Verwaltungsinformation wie Kurzüberschrift, Verfasser
    • ihren Inhalt mit allen drunterliegenden Gliederungsebenen .....
    • Nachspann wie Literatur, Bemerkungen, Übungsaufgaben sofern sie sich auf die jeweilige Gliederungsebene beziehen
    <Schlussteil>
     .
    </Schlussteil>    		 Der Schluß des Dokuments enthält weitere Information, META-Information, Kontaktmöglichkeit

    Aber immerhin gehts folgendermaßen:

    Logische Gliederung

    Einteilung in Kopfbereich, Hauptteil und Seitenschluß

    Im Kopf des Dokuments (auch mit frames realisierbar) sollte Information über das Dokument und den Verfasser stehn.
    Ferner gehört eine Übersicht (Inhaltübersicht mit Verweisen, Summary) dazu.
    Der Schluß des Dokuments sollte eine Rückmeldemöglichkeit gegeben werden.

    Gliederung mit Überschriftsebenen

    Die Überschriftebenen gliedern ein Dokument wie bei einem geschriebenen Dokument.

    Vergleiche im vorliegenden Dokument:
     
    Inhaltliche und Graphische Gliederung der Seite

    Logische Gliederung
         Einteilung in Kopfbereich Hauptteil und Seitenschluß
         Gliederung mit Überschriftsebenen
         Gliederung mit Listen
              Unnummerierte Liste
              nummerierte Liste
    Graphische Gestaltung der Seite
         Linie
         Tabelle
         Blinde Tabelle
     

    		 <h1><a href="#Logische">Inhaltliche</a> und <a href="#graph">Graphische </a><a href="html.htm">Gliederung
    der Seite</a></h1>
    <h1><a NAME="Logische"></a>Logische Gliederung</h1>
    <h2>Einteilung in Kopfbereich,&nbsp;Hauptteil und Seitenschlu&szlig;</h2>
    <h2>Gliederung mit&nbsp;&Uuml;berschriftsebenen</h2>
    <h2>Gliederung mit&nbsp;Listen</h2>
    <h3>Unnummerierte Liste</h3>
    <h3>nummerierte Liste</h3>
    <h1><a NAME="graph"></a>Graphische Gestaltung der Seite</h1>
    <h2>Linie</h2>
    <h2>Tabelle</h2>
    <h2>Blinde Tabelle</h2>

    Gliederung mit Listen

    Unnummerierte Liste

    Dies geht mit dem tag <ul> unordered list:
    <ul>
        <li>Liste</li>
        <li>Listenelemente</li>
            <ul>
                <li>Liste in der Liste</li>
                <li><a/li>
            </ul>
        <li>b</li>
        <li>c</li>
    </ul>

    nummerierte Liste

    1. Listenelement
    2. und
    3. noch
    4. mehr
      1. nummerierte Unterliste
      2. zweites
      3. und so weiter
    5. wieder eins
      1. nummerierte Unterliste
      2. zweites
      3. und so weiter
    6. noch eins
    Dies geht mit dem tag <ol> ordered list:
      <ol>
          <li>Listenelement</li>
          <li>und</li>
          <li>noch</li>
          <li>mehr</li>
          <ol>
              <li>nummerierte Unterliste</li>
              <li>zweites</li>
              <li>und so weiter</li>
          </ol>
          <li>wieder eins</li>
          <ol TYPE=a>
              <li>nummerierte Unterliste</li>
              <li>zweites</li>
              <li>und so weiter</li>
          </ol>
          <li>noch eins</li>
      </ol>


    Graphische Gestaltung der Seite

    Neben Frames können Linien und Tabellen zur Gliederung von Seiten verwendet werden.
     

    Linie

    so geht eine Linie: <hr WIDTH="100%">

    Tabelle

    und so eine Tabelle:
    <table BORDER=2 CELLSPACING=3 CELLPADDING=3 COLS=4 WIDTH="100%" BGCOLOR="#66FF99" >
    erste Zeile
    <tr><td>erste Zeile</td>    		 2tes
    <td>2tes</td>    		 3 ende
    <td>ende</td></tr>
    <tr BGCOLOR="#33CCFF">
    <td>&lt;tr BGCOLOR="#33CCFF">
    <br>&lt;td>blau&lt;/td></td>    		 blaue Zeile
    <td>blaue Zeile</td>
    		<td></td>
    </tr>
    zeile bleibt grün
    <tr><td>zeile bleibt gr&uuml;n</td>    		 rote Zelle
    <td BGCOLOR="#FFCCCC">rote Zelle</td>    		 zeile bleibt grün ENDE
    <td>ENDE</td>
    </tr>
    und zum Schluß :</table>

    Blinde Tabelle

    oder auch so:
     
    hier 
    <table CELLSPACING=0 CELLPADDING=0 WIDTH="100%" > 
    <tr> <td>hier&nbsp;</td>    		 sieht man  überhaupt nicht,
    <td>&uuml;berhaupt nicht,</td></tr>
    daß eine Tabelle drunter  liegt.

    so positioniert man dann eine Graphik.
    <td>so positioniert man dann eine Graphik.</td>
    <td><img SRC="baum.jpg" height=25 width=25></td>




    		<td></td></tr></table>