2. Unterrichtsblock

HTML Logo

Inhaltsverzeichnis

Syntax & Struktur

Struktur eines HTML-Dokuments

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Grundgerüst eines HTML-Dokuments

<!doctype html>
<html lang="de-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>
  </body>
</html>

Syntax

Die Syntax einer Sprache beschreibt den genauen Aufbau und Aussehen – sozusagen die Grammatik und Rechtschreibung. Auch HTML muss sich an gewisse Regeln halten um möglichst flexibel zu sein.

Tags in HTML5

Weiterführender Link zu allen HTML-Tags inkl. der zugehörigen Attribute: https://www.w3schools.com/tags/

HTML-Haupt-Tags

<!doctype html> <!-- kein wirkliches HTML-Element, sondern die Information für Browser, um welche HTML-Version es handelt. -->

<html lang="de-DE"> <!-- Kennzeichnet das Dokument als HTML-Dokument und legt die Sprache fest-->

  <head> <!-- Informationen, die nicht im Browserfenster dargestellt werden -->
  </head>

  <body> <!-- Vom Browser darstellbare Inhalte -->
  </body>

</html> <!-- Jeder Tag wird mit einem "/" geschlossen -->
<!doctype html>
<html> 
  <head lang="de-DE"> 
    
    <!-- Informationen, die nicht im Browserfenster dargestellt werden -->
    <!-- Erlaubt die Darstellung nach UTF-8 Schriftsatz (ä,ö,ü,ß und andere Sonderzeichen) -->
    <meta charset="utf-8" /> 

    <!-- Zur Darstellung auf mobilen Endgeräten (CSS vorausgesetzt) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Seitentitel, erscheint Browsertab und wird von Suchmaschinen verwendet -->
    <title>Seitentitel</title> 
    
    <!-- Basis-URL einer Webseite (wenn man im Dokument mit relativen Links arbeiten möchte) -->
    <base href="https://webentwicklerkurs.de/1-jahr/html/" /> 
    
    <!-- erzeugt einen Link zwischen dem aktuellen und einem verwandten Dokument, z.B. für eine CSS-Datei -->
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
    <link rel="canonical" href="https://webentwicklerkurs.de/1-jahr/html/2-unterrichtsblock/">
    
    <!-- Setzt CSS Regeln für das gesamte HTML-Dokument -->
    <style media="screen"> 
      h3 { color: black; font-size: 1.1em } 
      p { color: navy; font-size: 0.9em } 
      ol { font-family: Courier; color: navy } 
    </style>

    <!-- Bindet externe CSS-Dateien ein -->
    <style>
      @import url("style.css");
      @import url("print.css");
      @import url("small-devices.css");
    </style>
    
  </head>

  <body> 
  </body>

</html>

Tags im HTML-body zur Strukturierung

<!doctype html>
<html> 
  <head lang="de-DE"> 
  </head>

  <body> 

    <!-- DER HEADER
         Enthält die Hauptnavigation / Logo / Autoreninformationen / Datumsangaben / manchmal auch die <h1>
         Es sind mehrere <header> in einem Dokument erlaubt (sollte aber max. einer sein)
         Der <header> darf nicht in einem anderen <header>, in einem <footer> oder in einem <adress> Element stehen.
    -->
    <header>

      <img src="logo.jpg"> <!-- Logo, gehört nicht zu den Strukturelementen und dient hier nur als Beispiel -->

      <!-- DIE NAVIGATION
           Enthält die Menüleiste mit Links zu den wichtigsten Seiten und Inhalten (Faustregel max. 7 Links)
           Impressum, Datetnschutz, AGB etc. sollten in ein <nav> Element im <footer>
           Normale Textlinks sollten nicht innerhalb eines <nav> Elements stehen
      -->
      <nav>
        <a href="/html/">HTML</a> |
        <a href="/css/">CSS</a> |
        <a href="/js/">JavaScript</a> |
        <a href="/python/">PHP</a>
      </nav> 

    </header>

    <!-- DAS MAIN-TAG (HAUPTINHALT)
         Das <main>-Tag gibt den Hauptinhalt eines Dokuments an.

         Der Inhalt innerhalb des <main>-Elements sollte für das Dokument eindeutig sein. 
         Es sollte keine Inhalte enthalten, die sich in Dokumenten wie Seitenleisten, 
         Navigationslinks, Urheberrechtsinformationen, Website-Logos und Suchformularen wiederholen.

         Hinweis: Ein Dokument darf nicht mehr als ein <main>-Element enthalten. 
         Das <main>-Element darf KEIN Kind-Element eines <article>-, <aside>-, <footer>-, 
         <header>- oder <nav>-Elements sein.
    -->
    <main>

      <h1>Hauptthema</h1> <!-- Das <h1> Tag betitelt das Hauptthema sollte nur einmal im Dokument vorkommen -->

      <!-- DER ARTICLE
           Das <article>-Tag gibt unabhängige, in sich geschlossene Inhalte an.
           Ein Artikel sollte für sich genommen Sinn machen und unabhängig vom Rest der Seite verbreitet werden können.
           Mögliche Gründe für das Element <article>:
            - Forumsbeitrag
            - Blogeintrag
            - Nachrichtenbeitrag
      -->
      <article>

        <!-- DIE SECTION
             Das Tag <section> definiert einen Abschnitt (Sektion) in einem Dokument.
             Im fogenden Beispiel wird der Artikel in drei Sektionen unterteilt:
              - Hauptartikel
              - Eingebundenes Video
              - Quellverweise
        -->
        <section>
          <h2>Hauptartikel</h2>
          <p>...</p>
        </section>

        <section>
          <h2>Video zum Artikel</h2>
          <iframe>...</iframe>
        </section>

        <section>
          <h2>Quellverweise</h2>
          <p>...</p>
        </section>

      </article>
    </main>
 
    <!-- ASIDE
         Das Tag <aside> definiert nebensächlichen Inhalt (supplementary Content).
         Der Nebeninhalt sollte indirekt mit dem umgebenden Inhalt in Beziehung stehen.
         Der Inhalt <aside> wird oft als Seitenleiste in einem Dokument platziert.
    -->
    <!-- Hier wird das <aside> Tag für die Anmeldung zum Newsletter verwendet. -->   
    <aside>
      <section>
        <h2>Jetzt zum Newsletter anmelden</h2>
        <p>...</p>      
      </section>
    </aside>

    <!-- Hier wird das <aside> Tag für eine Seitenleiste (Sidebar) verwendet. -->
    <aside>
      <nav>
        <a href="/neue-beitraege/">Neue Beiträge</a> | 
        <a href="/kategorie-rezepte/">Rezepte</a> | 
        <a href="/kategorie-anleitungen/">DIY Anleitungen</a> | 
        <a href="/kategorie-nachrichten/">Nachrichten</a>
      </nav>
    </aside>

    <!-- DER FOOTER
         Das Tag <footer> definiert eine Fußzeile für ein Dokument oder einen Abschnitt.
         Ein <footer>-Element enthält typischerweise:
          - Informationen zum Betreiber
          - Urheberrechtsinformation
          - Kontaktinformationen
          - Seitenverzeichnis
          - Zurück nach oben Links
          - Rechtliche Informationen
         Man kann auch mehrere <footer>-Elemente in einem Dokument haben - üblich ist eines.
         Adressinformationen innerhalb des <footer>-Elements sollten in ein <address>-Tag geschrieben werden.
    -->
    <footer>
      <nav>
        <a href="/impressum/">Impressum</a> | 
        <a href="/datenschutz/">Datenschutz</a>
      </nav>

      <!-- DIE ADRESSE
           Das <address>-Tag definiert die Kontaktinformationen für den Autor/Eigentümer 
           eines Dokuments oder eines Artikels.
           Die Kontaktinformationen können eine E-Mail-Adresse, eine URL, eine physische Adresse, 
           eine Telefonnummer, ein Social-Media-Name usw. sein.
           Der Text im <address>-Element wird normalerweise kursiv dargestellt, und Browser fügen vor 
           und nach dem <address>-Element immer einen Zeilenumbruch ein.
      -->
      <address>
        Seitenbetreiber <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> <!-- <br> erwirkt einen Zeilenumbruch -->
        Anschrift:<br>
        Musterstraße 36<br>
        83024, Rosenheim<br>
        Deutschland
      </address>

    </footer>

  </body>

</html>

Tags zur Textauszeichnung

<!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> 
    <header>
      <img src="logo.jpg"> <!-- Logo, gehört nicht zur Textauszeichnung und dient hier nur als Beispiel -->
      <nav>
        <!-- DER LINK
             Das Tag <a> definiert einen Hyperlink, der verwendet wird, um von einer Seite auf eine andere zu verlinken.
             Das wichtigste Attribut des <a>-Elements ist das href-Attribut, das das Ziel des Links angibt.
             Standardmäßig werden Links in allen Browsern wie folgt angezeigt:
              - Ein nicht besuchter Link ist unterstrichen und blau
              - Ein besuchter Link ist unterstrichen und violett
              - Ein aktiver Link ist unterstrichen und rot
        -->
        <a href="/html/">HTML</a> |
        <a href="/css/">CSS</a> |
        <a href="/js/">JavaScript</a> |
        <a href="/python/">PHP</a>
      </nav> 

    </header>
    <main>

      <!-- ÜBERSCHRIFTEN
           Überschriften unterteilen das Dokument in Teilbereiche und ordnen sich hirarchisch
           Es gibt folgende Tags: <h1> <h2> <h3> <h4> <h5> <h6>
      -->
      <h1>Hauptthema</h1>
      <article>
        <section>
          <h2>Paragraphen</h2>
          
          <!-- DER PARAGRAPH
               Das Tag <p> zeichnet Fließtext als Absatz aus. Das Tag <p> definiert einen Absatz.
               Browser fügen vor und nach jedem <p>-Element automatisch eine einzelne Leerzeile ein.
               Innerhalb eines <p> Elements können viele weitere Textauszeichnungen sowie Links eingebaut werden.
          -->
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore 
          et dolore magna aliquyam</p>

          <!-- PARAGRAPH mit <b> und <strong> Auszeichnungen -->
          <p>Lorem ipsum <b>dolor</b> sit amet, <strong>consetetur</strong> sadipscing elitr, sed diam 
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>

          <!-- PARAGRAPH mit <i> und <em> Auszeichnungen -->
          <p>Lorem ipsum <i>dolor</i> sit amet, <em>consetetur</em> sadipscing elitr, sed diam 
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>

          <!-- PARAGRAPH mit <mark> und <abbr> Auszeichnungen -->
          <!-- <mark> gelb hinterlegter Text -->
          <!-- <abbr> Abkürzung -->
          <p>Lorem ipsum <mark>dolor</mark> sit amet, <abbr>consetetur</abbr> sadipscing elitr, sed diam 
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>

          <!-- PARAGRAPH mit <pre>, <q> und <small> Auszeichnungen -->
          <!-- <pre> stellt formatierten Text dar -->
          <!-- <q> stellt Hochkommas / Anführungszeichen dar -->
          <!-- <small> kleiner Text -->
          <p>Lorem ipsum <pre>dolor</pre> sit amet, <small>consetetur</small> sadipscing elitr, sed diam 
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam<q>4</q></p>

          <!-- MERKE:
               Es gibt noch zahlreiche weitere Auszeichnungen mit Tags. 
               Nicht alle sind sinnvoll und können mit CSS teilweise besser dargestellt werden.
               Welches HTML-Tag benötigt wird, hänt vom Anwendungsfall ab.
          -->

        </section>

        <section>
          <h2>Listen</h2>

          <!-- DIE LISTE
               Listen werden verwendet, um Inhalte übersichtlicher zu gestalten
               Listen können ebenso, wie Paragraphen auch Links, Fettungen und Kursivschreibungen enthalten
               Es gibt ungeordnete Listen <ul> und geordnete Listen <ol>. Die einzelnen Listenpunkte werden mit <li> dargestellt
               Ein weiterer Typ ist die Definitions-Liste <dl>. <dt> definiert und <dd> beschreibt.
          -->
          <h3>Ungeordnete Listen</h3>
          <ul>
            <li>Erster Punkt</li>
            <li>Zweiter Punkt</li>
              <ul>
                <li>Erster Unterpunkt</li>
                <li>Zweiter Unterpunkt</li>
              </ul>          
            <li>Dritter Punkt</li>
          </ul>

          <h3>Geordnete Listen</h3>
          <ol>
            <li>Erster Punkt</li>
            <li>Zweiter Punkt</li>
              <ol>
                <li>Erster Unterpunkt</li>
                <li>Zweiter Unterpunkt</li>
              </ol>          
            <li>Dritter Punkt</li>
          </ol>

          <h3>Definitions-Listen</h3>
          <dl>
            <dt>Kaffee</dt>
            <dd>Schwarzes Heißgetränk</dd>     
            <dt>Milch</dt>
            <dd>Weißes Kaltgetrtänk</dd>
          </dl>

        </section>

        <section>
          <h2>Weitere Tags</h2>

          <!-- DAS ZITAT
               Das <blockquote> Tag wird verwendet, um Zitate zu kennzeichnen.
               Zitate werden von den meisten Browsern eingerückt dargestellt und meist über CSS hervorgehoben gestaltet.
          -->
          <blockquote>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
          tempor invidunt ut labore et dolore magna aliquyam</blockquote>

          <!-- DETAILS
               Das <details> Tag wird verwendet, erweiterte Informationen aufklappen zu können.
               Das Element besteht neben dem <details>-Tag aus dem <summary>-Tag für die Überschrift 
               sowie den hinzugefügten Inhalten.
          -->
          <details>
            <summary>Neue HTML-Tags – details</summary>
            <p>Informationen, die der Benutzer aufklapen kann</p>
            <p>Text</p>
            <p>Text</p>
          </details>

        </section>

      </article>

    </main>

  </body>

</html>

Übungsaufgabe

Versuche den Code selbst zu schreiben, so ist die Lernkurve höher, als wenn der Code von der Seite kopiert wird. Achte auch auf eine saubere Struktur und arbeite mit Einrückungen von verschachtelten Code-Teilen.

1. Aufgabe

  • Baue eine Seite mit einem Header, einem Footer und einem Hauptteil.
  • Definiere den Dokumenttyp
  • Definiere die Dokumentsprache „Deutsch“
  • Definiere den Zeichensatz „UTF-8“
  • Definiere den Viewport

Suche die o.g. HTML-Bereiche im Quellcode dieser URL und mache ein Bildschirmfoto, um ein Gefühl für das Aussehen der HTML-Tags zu bekommen.

2. Aufgabe

  • Baue ein Logo in den Header ein
  • Baue eine Navigation mit 4 Links in den Header ein
  • Baue in die Seite einen Artikel über „Wingsuits“ ein und gliedere den Artikel in einzelne Sektionen
    • Arbeite dabei mit Paragraphen, Listen, Überschriften, Fettungen und Kursivschreibungen
    • Baue ein Zitat ein
    • Baue eine Definitionsliste ein und erkläre das Wort „Wingsuit“
    • Baue in einer der Sektionen folgendes Video via <i-frame> ein: https://www.youtube.com/watch?v=TWfph3iNC-k
    • Baue eine weitere Sektion für Quellverweise ein und verlinke die Quellen, von denen die Inhalte und Informationen stammen

3. Aufgabe

  • Baue 5 Details-Tags ein und nenne die Sektion „FAQ“
  • Baue eine Tabelle ein
  • Prüfe den Code auf Funktion

Falls noch Zeit übrig ist: Recherchiere zu HTML-Attributen und versuche diese in die Tags einzubauen.