web:ex-tags-erkennen
HTML-Übung: Tags erkennen
- Ordnen Sie die Tags aus der folgenden Liste dem untenstehenden HTML-Beispiel zu.
- Markieren Sie im HTML-Beispiel alle Attribute farbig.
- Skizzieren Sie auf einem Blatt, wie das HTML-Beispiel im Browser aussehen wird.
- Speichern Sie das HTML-Beispiel auf Ihren Rechner und laden Sie es in Ihren Browser. Stimmt die anzeige mit Ihrer Skizze überein?
Start-Tag | Beschreibung | Typ |
---|---|---|
<a> | Hyperlink | Inline |
<abbr> | Abkürzung | Inline |
<aside> | Seitlicher Bereich | Block |
<b> | bedeutungstragende Worte | Inline |
<body> | Inhalt der Webseite | Block |
<br> | Zeilenumbruch | inline |
<cite> | Titel von Büchern, Filmen usw. | Inline |
<div> | Allgemeiner Bereich (division) | Block |
<em> | betont, emphatisch (gefühlsmässig) betont | Inline |
<footer> | Fussbereich der Webseite | Block |
<h1> | grösste Überschrift (heading) | Block |
<h2> | zweitgrösste Überschrift (heading) | Block |
<h3> | drittgrösste Überschrift (heading) | Block |
<h4> | drittkleinste Überschrift (heading) | Block |
<h5> | zweitkleinste Überschrift (heading) | Block |
<h6> | kleinste Überschrift (heading) | Block |
<head> | Meta-Angaben zur Webseite | – |
<header> | Kopfbereich der Webseite | Block |
<i> | spezielle Worte, z.B. Fachausdrücke, Eigennamen, anderssprachige Phrasen | Inline |
<img> | Bild (image) | Inline |
<main> | Hauptbereich der Webseite | Block |
<nav> | Navigationsbereich, z.B. für Menüs | Block |
<p> | Absatz (paragraph) | Block |
<q> | ein Zitat (quote) | Inline |
<title> | Titel der Webseite | – |
- uebung2.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Beispiel-Webseite (ohne CSS)</title> </head> <body> <nav> <a href="seite1.html">Seite 1</a><br> <a href="seite2.html">Seite 2</a> </nav> <header> <img src="https://unterricht.kinet.ch/informatik/_media/logo.png" alt="logo"> <h1>Informatik</h1> </header> <article> <h2>Einführung in HTML</h2> <p>Wir lernen <b>HTML 5</b> kennen.</p> <h3>Ein nützlicher Link</h3> <a href="www.sbb.ch">Der <abbr title="Schweizerische Bundesbahnen">SBB</abbr>-Fahrplan</a> <q>Der Kluge reist im Zuge.</q> <img src="http://www.bahnbilder.de/1024/sbb-lok-re-66-348605.jpg" alt="logo" width="124" height="124"> </article> <footer> <p>Gymnasium Kirchenfeld <em>2014</em></p> </footer> </body> </html>
web/ex-tags-erkennen.txt · Zuletzt geändert: 2020/10/13 14:25 von 127.0.0.1