3. Unterrichtsblock

HTML Logo

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:

FirmaKontaktpersonStadt
Marias CafeMaria MeierRosenheim
Maschinenbau MaierHans MaierStuttgart
Schreinerei MüllerRoland MüllerTraunstein
Pizza PalastMario RovelliRosenheim
Weinkellerei MünsterFriedrich SpeerMünster
Gasthof zur PostGeorg HuberMiesbach

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

TagBeschreibung
<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ürzungBezeichnungDateiendung
APNGAnimated Portable Network Graphics (selten).apng
GIFGraphics Interchange Format .gif
ICOMicrosoft Icon .ico, .cur
JPEGJoint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics .png
SVGScalable Vector Graphics .svg
Webentwicklerkurs Logo grau
Bild im Dateiformat .png
Webentwickler-Kurs-Hintergrund
Bild im Dateiformat .jpg
Bild im Dateiformat .gif

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.

Sprungmarke

Link als Text

E-Mail schreiben

Anrufen

Bildlink
<!-- 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