Testfragen zum 3-Spalten-Layout

(siehe Übung: http://www.html-seminar.de/3-spalten-layout-mit-css-erstellen.htm)

  1. Was bedeutet 3-Spalten-Layout?
    • Welche Inhalte werden in den 3 Spalten der Seite sinnvollerweise angezeigt?
    • Welche Tags werden genutzt zur Realisierung der 3 Spalten?
    • Wie kann man 3 Spalten nebeneinander darstellen? Benötigt man dafür spezielle CSS-Eigenschaften? (siehe auch Frage 13)
    • ...
  2. Wofür stehen die Tags header und footer? Wie werden diese in der Seite verwendet, d.h. anstelle welcher anderen Tags? Wie hat man diese Funktionalität früher realisiert?
  3. Wofür steht in HTML das Tag hr? Zu welchem Zweck wird es eingesetzt?
  4. Wofür wird das Tag nav eingesetzt?
  5. Wofür wird das Tag section eingesetzt?
  6. Wofür wird das Tag aside eingesetzt?
  7. Wie kann man mehrere nav-Tags voneinander unterscheiden um sie in CSS unterschiedlich zu formatieren?
  8. Mit welchem Tag werden Listen bzw. Aufzählungen realisiert, wie sie z.B. für Navigationsleisten benötigt werden?
  9. Wie lautet die Internetadresse wo man seine HTML-Seite auf Fehler überprüfen lassen kann?
  10. Was kann man tun, wenn man viele Fotos auf einer Webseite verwendet, um in seinem Verzeichnis nicht die Übersicht zu verlieren? Was bedeutet das für das Einbinden des Fotos in die Webseite?
  11. Wann werden Fotos über CSS eingebunden und wann direkt in der Seite plaziert mit dem img-Tag? Welches Kriterium ist hierfür maßgebend?
  12. Wie kann man schnell kontrollieren, welcher Bereich der Webseite von einer CSS-Formatierung betroffen ist?
  13. Welche Eigenschaft benötigt ein HTML-Element für Bildschirmbereiche, damit rechts bzw. links daneben ein weiteres angezeigt werden kann?
  14. Wie wird realisiert, dass der komplette zentrierte Bereich der HTML-Seite (alle 3 Spalten zusammen) eine Gesamtbreite von z.B. 900 Pixeln bekommt?
  15. Das section-Tag bekommt folgende Eigenschaften zugeordnet. Zu welchem Zweck?
    section { margin-left:250px; margin-right:195px; }
  16. Was bedeutet die folgende CSS-Formatierung?
    * {
        margin: 0;
        padding: 0;
    }
  17. Wofür benötigt man die folgende CSS-Eigenschaft?
    background-attachment: fixed;
  18. Nennen Sie drei CSS-Eigenschaften die vorzugsweise dem body-Tag zugeordnet werden!
  19. Für welche Zwecke wird die CSS-Eigenschaft padding eingesetzt?
  20. Zu welchem Zweck setzt man die folgenden CSS-Eigenschaften ein?
    list-style-type: square;
    list-style-type: none;
  21. Was bewirkt die folgende CSS-Eigenschaft bei Listenelementen?
    display: inline;
  22. ...


z.B.




















Lösungen

  1. 3-Spalten-Layout bedeutet, dass der Inhalt einer HTML-Seite auf drei Spalten verteilt wird, z.B. eine Navigationsleiste in der ersten Spalte, der Inhalt in der zweiten Spalte und Werbung oder ergänzende Informationen in der rechten Spalte.
  2. header - Kopfbereich der Seite (oben) in HTML5, früher div-Tag dafür verwendet.
    footer - Fußbereich der Seite (unten) in HTML5, früher div-Tag dafür verwendet.
  3. Das hr-Tag bedeutet "horizontal ruler" trennt Bereiche des Bildschirms durch eine feine Linie.
  4. Das nav-Tag wird genutzt für die Navigationsleiste, d.h. die Steuerung. Hier stehen z.B. untereinander stehende Links auf weitere Seiten in Form einer Liste.
  5. Das section-Tag wird genutzt als Container/Behälter für den eigentlich zu präsentierenden Inhalt der Seite.
  6. Das aside-Tag wird z.B. für den rechten Seitenbereich eingesetzt, um Bilder und weitere Informationen zur Seite oder Werbung anzuzeigen.
  7. Man verwendet IDs. Diese kann man dann mit CSS-Mitteln unterschiedlich formatieren, z.B. #id1 {background-color:red } #id2 {background-color:green }. Es geht auch mit Klassen, z.B. class="nav1", class="nav2", welche man als Eigenschaften den Tags hinzufügt.
  8. Das ul-Tag wird hierfür verwendet, siehe z.B. http://www.w3schools.com/html/html_lists.asp
  9. http://validator.w3.org/
  10. Man kann ein Unterverzeichnis im Verzeichnis der Webseite anlegen, in welches man alle Fotos verschiebt. Die Fotos muss man dann z.B. wie folgt einbinden. Achten Sie auf die korrekte Groß-/Kleinschreibung!
    <a href="NeuerVerzeichnisname/foto.jpg">Foto</a>
  11. Sie haben zu entscheiden, ob es sich um ein Designmerkmal Ihrer Seite handelt, oder einen Seiteninhalt. Der Seiteninhalt gehört in die Seite. Ein Designmerkmal wird mit CSS-Mitteln realisiert.
  12. Sie können alle Tags mit einer Hintergrundfarbe versehen (background-color:red;), die Ihnen bei Ansehen der HTML-Seite anzeigt, wo sich das Element befindet und wie groß es ist.
  13. Die CSS-Eigenschaft float:left bedeutet, dass das Element sich links befindet und auf der rechten Seite Inhalte "herumfließen". float:right steht als CSS-Eigenschaft für ein rechts befindliches HTML-Element und Inhalt auf der linken Seite "herumfließen".
  14. Man verwendet einen so genannten Wrapper, z.B. ein div-Tag, in welches alle Inhalte verschoben werden und gibt diesem eine Breite von z.B. 900Pixeln (width:900px;).
  15. ...

... und die restlichen Fragen beantworten Sie bitte selbst! ;-)