Web - Übung 2, HTML & CSS

Übung 2 – Buchkapitel 5

Im heutigen Unterricht haben wir verschiedene neue Tags kennengelernt.

Aufgabe: Erstelle eine oder mehrere HTML-Seiten und verarbeite folgende Tags: Wähle ein dir passendes Thema, z.b.: Seite für Schokoladenfabrik, Fitnesshinweise, Tiere, Gaming, Anime, Filme …
Du kannst auch die Website aus Übung 1 um die Tags erweitern

Ungeordnete Liste:

 <ul> ungeordnete Liste 
    <li> Listenelement </li>
</ul>

Geordnete Liste:

 <ol> geordnete Liste 
    <li> Listenelement </li>
</ol>

Auszeichnungstags:

<hr> für horizontale Linie, Abgrenzung zu folgenden Inhalt
<br> für Break
<h1>…</h1> bis <h6>…</h6> Überschriften verschiedener Ordnung
<blockquote cite=“https://....“><p> ich bin ein Zitat </p></blockquote>
<cite> Autorname </cite>
<details> repräsentiert eine Offenlegungs-Vorrichtung <summary> ermöglicht es, dem details-Element eine Überschrift zu geben </summary> </details>
<a> Links </a>
<abbr title=“blablabla“> Abkürzung </abbr> 
<cite> Verweis auf einen Buchtitle o.ä. </cite>
<code> Code </code>
<del> gelöschter Text </del>
<dfn> Definition </dfn>
<em> hervorgehobener Text </em>
<ins> eingefügter Text (Blogartikel ergänzung) </ins>
<kbd> Computertastatur </kbd>
<mark> Im Kontext relevanter Text </mark>
<q> kurzes Zitat </q>
<s> nicht korrekter Text (durchgestrichen) </s>
<samp> Beispielausgabe eines Programms </samp>
<small> kleinerer Text </small>
<span> allgemeiner Inline-Inhalt (keine sem. Bedeutung) </span>
<strong> wichtiger Text </strong>
<sub> tiefergestellter Text </sub>
<sup> höhergestellter Text </sup>
<time datetime=“21:30“>abends um halb zehn</time> maschinenlesbarer Zeit-/Datumsangabe
<u> kennzeichnet falsch geschriebenen Text </u>
<var> Variable (in techn. Dokumentationen) </var>

strukturelle Tags

<header> ist für den Kopf einer Seite oder eines Bereichs vorgesehen </header>

<nav> zeichnet die Hauptnavigation(en) aus </nav>

<main> leitet den Hauptinhalt ein, der auf jeder Unterseite unterschiedlich gefüllt sein kann </main>

<article> kennzeichnet Inhalte, die auch eigenständig existieren können </article>

<section> dient zur Auszeichnung von Bereichen </section>

<footer> bezeichnet einen Fußbereich, Fußbereich der ganzen Seite oder eines Artikels oder ähnlichem</footer>

<aside> Randbemerkungen, Randnotizen oder Inhalte, die sich auf den Hauptinhalt beziehen aber auch nur am Rande dazugehören </aside>

<div> hat keine semantische Bedeutung </div>