3. Unterrichtsblock
Inhaltsverzeichnis
Tags Teil 2
Weiterführende Informationen zu allen Tags: https://www.w3schools.com/tags/default.asp
Tabellen
Tabellen bestehen mindestens aus Spalten und Zeilen. In folgendem Beispiel sind auch noch Kopfelemente eingebaut:
| Firma | Kontaktperson | Stadt |
|---|---|---|
| Marias Cafe | Maria Meier | Rosenheim |
| Maschinenbau Maier | Hans Maier | Stuttgart |
| Schreinerei Müller | Roland Müller | Traunstein |
| Pizza Palast | Mario Rovelli | Rosenheim |
| Weinkellerei Münster | Friedrich Speer | Münster |
| Gasthof zur Post | Georg Huber | Miesbach |
Grundgerüst eines HTML-Dokuments
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beschreibung der Seite</title>
</head>
<body>
<p>Inhalt der Seite</p>
<table>
<tr>
<th>Firma</th>
<th>Kontaktperson</th>
<th>Stadt</th>
</tr>
<tr>
<td>Marias Cafe</td>
<td>Maria Meier</td>
<td>Rosenheim</td>
</tr>
<tr>
<td>Maschinenbau Maier</td>
<td>Hans Maier</td>
<td>Stuttgart</td>
</tr>
</table>
</body>
</html>Tags innerhalb von Tabellen
| Tag | Beschreibung |
|---|---|
| <table> | Definiert eine Tabelle |
| <th> | Definiert eine Kopf-Zelle innerhalb einer Tabelle |
| <tr> | Definiert eine Reihe innerhalb einer Tabelle |
| <td> | Definiert eine Zelle innerhalb einer Tabelle |
| <caption> | Definiert eine Tabellenüberschrift |
| <colgroup> | Kennzeichnet eine Gruppe von einer oder mehreren Spalten in einer Tabelle zur Formatierung |
| <col> | Gibt Spalteneigenschaften für jede Spalte innerhalb eines <colgroup>-Elements an |
| <thead> | Gruppiert den „header“-Bereich einer Tabelle |
| <tbody> | Gruppiert den „body“-Bereich einer Tabelle |
| <tfoot> | Gruppiert den „footer“-Bereich einer Tabelle |
Aufgabe
Baue eine Tabelle, die alle o.g. Tags enthält und speichere diese ab.
Bilder
Bilder werden in Webseiten mit dem <img> Tag eingebunden. Um ein Bild jedoch anzeigen zu lassen, benötigen wir mehrere Attribute.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beschreibung der Seite</title>
<!-- FAVICON -->
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<!-- SYNTAX -->
<img src="url" alt="alternativtext">
<!-- BILDQUELLE SCR -->
<img src="/wp-content/uploads/2022/09/Webentwicklerkurs-Logo-150x60.png">
<!-- BILDQUELLE EXTERNER SERVER -->
<img src="https://www.seo-kueche.de/wp-content/themes/seo-kueche/_/img/logo.svg">
<!-- ALT ATTRIBUT -->
<img src="/wp-content/uploads/2022/09/Webentwicklerkurs-Logo-150x60.png" alt="Logo Webentwicklerkurs">
<!-- WEITE & BREITE -->
<img src="/wp-content/uploads/2022/09/Webentwicklerkurs-Logo-150x60.png" alt="Logo Webentwicklerkurs" width="128" height="128">
<!-- WEITE & BREITE IM STYLE ATTRIBUT -->
<img src="/wp-content/uploads/2022/09/Webentwicklerkurs-Logo-150x60.png" alt="Logo Webentwicklerkurs"
style="width:128px; height:128px;">
</body>
</html>
Häufige Bildformate
| Abkürzung | Bezeichnung | Dateiendung |
|---|---|---|
| APNG | Animated Portable Network Graphics (selten) | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Aufgabe
Baue ein beliebiges Bild von einer anderen Webseite im Code Editor ein und füge ein Weite und Breite-Attribut hinzu. Verändere die Werte im Attribut und schau, was passiert.
I-Frames
Ein Inline-Frame (kurz i-Frame) wird verwendet, um ein anderes Dokument in das aktuelle HTML-Dokument einzubetten. In folgendem Beispiel wird der Code Editor dieser Seite eingebettet.
Codebeispiel:
<!-- o.g. Einbindung -->
<iframe src="/code-editor/index.html" title="Beschreibung" width="100%" height="300px"></iframe>
Aufgabe
Baue eine beliebige Seite in den Code Editor ein und füge ein Weite und Breite-Attribut hinzu. Verändere die Werte im Attribut und schau, was passiert.
Links
HTML-Links sind Hyperlinks. Sie können auf einen Link klicken und zu einem anderen Dokument springen. Wenn Sie die Maus über einen Link bewegen, verwandelt sich der Mauspfeil in eine kleine Hand.
Link als Text
<!-- GRUNDLAGE -->
<a href="url">link text</a>
<!-- TARGET ATTRIBUT -->
<!-- Öffnet im neuen Fenster / Tab -->
<a href="https://www.webentwicklerkurs.de/" target="_blank">Zum Webentwicklerkurs!</a>
<!-- Öffnet im selben Fenster -->
<a href="https://www.webentwicklerkurs.de/" target="_self">Zum Webentwicklerkurs!</a>
<!-- Öffnet Elternfenster (standard) -->
<a href="https://www.webentwicklerkurs.de/" target="_parent">Zum Webentwicklerkurs!</a>
<!-- Öffnet das Dokument im gesamten Fensterbereich -->
<a href="https://www.webentwicklerkurs.de/" target="_top">Zum Webentwicklerkurs!</a>
<!-- ABSOLUTE URL -->
<p><a href="https://www.webentwicklerkurs.de/1-jahr/html/">Google</a></p>
<!-- RELATIVE URL -->
<p><a href="/1-jahr/html/">HTML Kurse</a></p>
<!-- BILD VERLINKEN -->
<a href="https://www.webentwicklerkurs.de/1-jahr/html/">
<img src="/wp-content/uploads/2022/09/Webentwicklerkurs-Logo-150x60.png" alt="Logo" style="width:42px; height:42px;">
</a>
<!-- E-MAIL VERLINKEN -->
<a href="mailto:irgendjemand@beispiel.de">E-Mail senden</a>
<!-- TELEFONNUMMER VERLINKEN -->
<a href="tel:+49803116277">Anrufen</a>
<!-- LINK ALS BUTTON -->
<button onclick="document.location='/1-jahr/html/'">HTML Lehrgang</button>
<!-- SPRUNGMARKEN INNERHALB VON DOKUMENTEN -->
<a href="#tags">HTML Tags Teil 2</a> Aufgabe
Rekonstruiere o.g. Links im Code Editor und probiere diese durch.
Weitere Tags
Nachfolgend eine Liste weiterer HTML-Tags sowie deren Bedeutung und Funktion.
<!-- ZEILENUMBRUCH -->
<br>
<!-- HORIZONTALE LINIE -->
<hr>
<!-- CONTAINER -->
<div>
<h2>Überschrift</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<!-- SPAN -->
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna <span>aliquyam erat</span>, sed diam voluptua.</p>
Aufgabe
Probiere o.g. Tags im Code Editor aus.
HTML-Attribute
- Alle HTML-Elemente können Attribute haben
- Attribute liefern zusätzliche Informationen über Elemente
- Attribute werden immer im Start-Tag angegeben
- Attribute kommen normalerweise in Name/Wert-Paaren wie: name=“wert“
Komplette Liste aller HTML-Attribute: https://www.w3schools.com/tags/ref_attributes.asp
Beispiele
<!-- HREF ATTRIBUT -->
<a href="https://www.webentwicklerkurs.de">Webentwicklerkurs besuchen</a>
<!-- SRC ATTRIBUT -->
<img src="/wp-content/uploads/2022/09/HTML-Logo-1024x1024.png">
<!-- WIDTH & HEIGHT ATTRIBUT -->
<img src="bild.jpg" width="500" height="600">
<!-- ALT ATTRIBUT -->
<img src="bild.jpg" alt="Kurzbeschreibung des Bildes">
<!-- STYLE ATTRIBUT -->
<p style="color: red;">Das ist eine roter Paragraph.</p>
<!-- TITEL ATTRIBUT -->
<p title="Ich bin ein Hinweis">Das ist ein Paragraph.</p>
<!-- LANG ATTRIBUT -->
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
<!-- KLASSEN ATTRIBUT
Das Attribut HTML-Klasse wird verwendet, um eine Klasse für ein HTML-Element anzugeben.
Mehrere HTML-Elemente können dieselbe Klasse teilen.
Das Klassenattribut wird häufig verwendet, um auf einen Klassennamen in einem Stylesheet zu verweisen.
Es kann auch von einem JavaScript verwendet werden, um auf Elemente mit dem spezifischen Klassennamen
zuzugreifen und diese zu manipulieren.
-->
<!DOCTYPE html>
<html>
<head>
<style>
.stadt {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="stadt">
<h2>London</h2>
<p>London ist die Hauptstadt von England.</p>
</div>
<div class="stadt">
<h2>Paris</h2>
<p>Paris ist die Hauptstadt von Frankreich.</p>
</div>
<div class="stadt">
<h2>Tokyo</h2>
<p>Tokyo ist die Hauptstadt von Japan.</p>
</div>
</body>
</html>
<!-- ID ATTRIBUT
Das id-Attribut gibt eine eindeutige ID für ein HTML-Element an. Der Wert des id-Attributs muss innerhalb des HTML-Dokuments
eindeutig sein.
Das id-Attribut wird verwendet, um auf eine bestimmte Stildeklaration in einem Stylesheet zu verweisen. Es wird auch von
JavaScript verwendet, um auf das Element mit der spezifischen ID zuzugreifen und es zu manipulieren.
Das id-Attribut wird bei Sprungmarkenmenüs auch verwendet, um Links innerhalb eines Dokuments zu setzen.
-->
<!DOCTYPE html>
<html>
<head>
<style>
#meinHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<a href="#meinHeader">Sprungmarkenmenü</a>
<h1 id="meinHeader">Mein Header</h1>
</body>
</html> Aufgabe
Probiere o.g. Attribute im Code Editor aus. Versuche auch, ein Sprungmarkenmenü einzubauen.
Übungsaufgabe
1. Aufgabe
Baue eine Seite mit folgenden Elementen:
- Header mit 3 Menülinks und Logo
- Das Logo soll auf diese Seite in einem neuen Tab verlinken und den Schriftzug „Hallo“ anzeigen, wenn man mit der Maus drüberfährt
- Hauptinhalt und eine Tabelle mit Tabellenheader, -body und -footer
- Die Tabelle soll 4 Spalten und 5 Zeilen haben
- Bild mit Link auf diese Seite, Alt-Attribut und einer Weite von 100px – darüber eine h2 Überschrift „Bild“
- I-Frame mit YouTube Video – darüber eine h2 Überschrift „Video“
- zwei Lorem-Ipsum Textblöcke, die in einem Div-Container liegen – darüber eine h2 Überschrift „Text“
- Sprungmarkenmenü, welches auf die drei h2 Überschriften verlinkt
- Footer mit 4 Menülinks und Adresse
2. Aufgabe
<!--
===============================================
HTML-Aufgaben (10 Aufgaben): Tags, Attribute, Struktur
===============================================
Name: _________________________________
Datum: ________________________________
Hinweise:
- Schreibe deinen Code unter die jeweiligen Aufgabenabschnitte.
- Nutze gültiges HTML5 (mit <!DOCTYPE html>).
- Verwende KEINE externen Frameworks (nur pures HTML).
- Behalte die Verteilung ein (siehe unten).
Verteilung:
- Mindestens 3 Aufgaben zu TAGS
- Mindestens 3 Aufgaben zu ATTRIBUTEN
- Mindestens 3 Aufgaben zu STRUKTUR
- 1 Aufgabe kombiniert alle Themen
-->
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Prüfung: HTML-Grundlagen</title>
</head>
<body>
<h1>HTML-Prüfungsaufgaben (10)</h1>
<section id="aufgabe1">
<h2>1) Grundgerüst (STRUKTUR)</h2>
<p>Erstelle ein minimales HTML5-Dokument mit <code><!doctype html></code>, <code><html lang="de"></code>, <code><head></code> (inklusive <code><meta charset="utf-8"></code> und <code><title></code>) und <code><body></code>. Füge im Body einen Absatz mit einem kurzen Satz ein.</p>
</section>
<section id="aufgabe2">
<h2>2) Tabelle mit Kopf-/Body-/Fußbereich (TAGS + STRUKTUR)</h2>
<p>Lege eine Tabelle mit <code><caption></code>, <code><thead></code>, <code><tbody></code> und <code><tfoot></code> an. Die Kopfzeile soll die Spalten „Name“, „Abteilung“, „Ort“ haben. Füge mindestens zwei Datenzeilen ein und im Fuß eine kurze Notiz.</p>
</section>
<section id="aufgabe3">
<h2>3) Bild mit Attributen (ATTRIBUTE)</h2>
<p>Binde ein Bild über <code><img></code> ein. Verwende die Attribute <code>src</code> (relativer Pfad wie <code>bilder/logo.svg</code>), <code>alt</code> (aussagekräftig) sowie <code>width</code> und <code>height</code>. Änder die Werte testweise.</p>
</section>
<section id="aufgabe4">
<h2>4) Links und Zielsteuerung (TAGS + ATTRIBUTE)</h2>
<p>Erstelle zwei Links: einen absoluten Link (z. B. auf eine externe Seite) und einen relativen Link (z. B. <code>/kontakt.html</code>). Nutze beim externen Link <code>target="_blank"</code> und füge bei mindestens einem Link ein <code>title</code>-Attribut hinzu.</p>
</section>
<section id="aufgabe5">
<h2>5) Iframe einbinden (TAGS + ATTRIBUTE)</h2>
<p>Füge ein <code><iframe></code> ein, das eine beliebige Seite aus deinem Projekt lädt. Vergib ein <code>title</code>-Attribut und setze sinnvolle Werte für <code>width</code> und <code>height</code> (z. B. <code>100%</code> und <code>240</code>).</p>
</section>
<section id="aufgabe6">
<h2>6) Weitere Tags (TAGS)</h2>
<p>Nutze <code><br></code> für einen Zeilenumbruch, <code><hr></code> für eine horizontale Linie sowie <code><div></code> und <code><span></code> zur semantischen Gruppierung/Inline-Markierung. Zeige deren Wirkung unmittelbar im Dokument.</p>
</section>
<section id="aufgabe7">
<h2>7) Klassen und IDs (ATTRIBUTE + STRUKTUR)</h2>
<p>Erzeuge zwei <code><div></code>-Boxen mit gleicher <code>class</code> (z. B. <code>box</code>) und eine Überschrift mit eindeutiger <code>id</code> (z. B. <code>top</code>). Erstelle einen Link, der per Sprungmarke zu dieser Überschrift führt.</p>
</section>
<section id="aufgabe8">
<h2>8) Sprachangabe (ATTRIBUTE + STRUKTUR)</h2>
<p>Setze das globale Attribut <code>lang</code> im <code><html></code>-Tag auf <code>de</code>. Füge zusätzlich ein kurzes Zitat in Englisch ein und setze auf dem betreffenden Absatz <code>lang="en"</code>.</p>
</section>
<section id="aufgabe9">
<h2>9) Bildlink (TAGS + ATTRIBUTE)</h2>
<p>Verlinke ein kleines Bild (z. B. <code>assets/icon.png</code>) so, dass ein Klick auf das Bild zu einer Seite deiner Wahl führt. Ergänze ein sinnvolles <code>alt</code>-Attribut.</p>
</section>
<section id="aufgabe10">
<h2>10) Kombi-Aufgabe (TAGS + ATTRIBUTE + STRUKTUR)</h2>
<p>Baue eine Mini-Seite mit: Header (Navigation mit 3 Links), Hauptbereich mit drei Abschnitten „Bild“, „Tabelle“, „Video“ (jeweils <code><h2></code>), einem Bild (mit <code>alt</code> und fester Breite), einer kleinen Tabelle (3 Spalten × 3 Zeilen) und einem <code><iframe></code> (mit <code>title</code>). Ergänze unterhalb einen Footer mit Adresse. Setze ein Sprungmarken-Menü, das auf die drei Abschnitte verweist.</p>
</section>
</body>
</html>