8 < 9 Webdesign | start | Webdesign 9 > 10
Semantische Elemente | Navigation | Menü | Listen | Verlinkungen
HTML-Inhaltsstrukturen mit semantischen Elementen (main, header, nav, section, article, footer)
Aufgabe:
- Erstellen Sie eine Seite mit den Elementen, main, header, nav, section, article und footer. Schreiben Sie in jeden Inhaltstyp einen Platzhaltertext und weisen Sie dem Element eine Höhe, Breite und eine Hintergrundfarbe zu.
- Drei Artikel (article) sollen innerhalb einer Sektion (section) nebeneinander stehen. Für die Artikel werden unterschiedliche Boxen erstellt.
- In jedem Artikel steht ein selbstgewählter Inhalt mit Rubrikenangabe, Überschrift, Text und Quellenangabe
Navigation mit der Listenfunktion
Sortierte Listen (ordert lists = <ol>) und nicht unsortierte listen (unordert lists = <ul>) umklammern Listenelemente <li>...</li> und ermöglichen die Strukturierung von Listen.
Aufgabe:
- Erstellen Sie iinnerhalb des Menüs (HTML-Element nav) eine unsortierte Liste. Jeder Listenpunkt wird zum Menüpunkt für eine neue Seite. Die Seiten lauten z.B. Home, Zitate, Gedichte, Kontakt, Impressum
- Erstellen Sie für jeden Menüpunkt einen Link auf eine der genannten Seiten auch wenn es die Seiten noch nicht gibt. Wie ein Link erstellt wird, zeigt der Kasten auf dieser Seite.
Link erstellen mit dem HTML-Element a
Das Element a ist das Link-Element. Mit diesem Element ist es Möglich auf andere Seiten oder Sprungadressen zu verweisen und diese durch Mausklick anzusteuern.
Beispiel: Link auf die Startseitendatei index.html mit dem Linknamen Home
Das Element a für Links wird automatisch unterstrichen und blau dargestellt. In der CSS-Datei kann der voreingestellte Befehl "text-decoration: underline", der die Unterstreichung bewirkt, ausgeschaltet werden durch "text-decoration: none". Die Farbe kann durch überschreiben "color: ..." ebenfalls geändert werden.
Gestaltung des Menüs aus einer Liste
Das Listenmenü wird voreingestellt untereinander dargestellt. Listenpunkte können jedoch genau so gut nebeneinander und ohne Listenpunkt dargestellt werden. Die Möglichkeit dazu liefern CSS-Befehle.
Listenmenü eingebettet in das HTML-Element nav
<ul>
<li><a href="index.html>Home</li>
<li><a href="zitate.html>Zitate</li>
<li><a href="gedichte.html>Gedichte</li>
<li><a href="kontakt.html>Kontakt</li>
</ul>
</nav>
Listenmenü mit CSS-Befehl bearbeiten | Horizontale Anzeige (CSS-Befehl)
nav ul li {display: inline; background: blue;list-style-type: none}
/* Unterstreichung wirde entfernt, Schriftfarbe auf weiß gesetzt */
nav ul li a {text-decoration: none; color: white;}
johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen (http://de.creativecommons.org/).