Inhaltsverzeichnis

Jetzt geht es los, wir entwerfen unsere erste Webseite. Hier lernst du daher die Sprache HTML kennen, mit der alle Inhalte im Web beschrieben werden.

Was HTML inzwischen so alles kann

Einfache Textdokumente
Komplexe Webseiten
Browser Games
Browser Apps
Smart TV Apps

Bildnachweis: Android Developer Reference

Mobile Apps

Bildnachweis: Pixabay: FirmBee

Sprachen und Formate rund um HTML

HTML (HyperText Markup Language)

CSS (Cascading StyleSheets)

SVG (Scalable Vector Graphics)

JavaScript

Die grundlegende Syntax einer HTML-Datei

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Beispiel für eine einfache HTML-Datei</title> </head> <body> <p> Dies ist eine <u>einfache</u> HTML-Seite zur Verdeutlichung der grundlegenden HTML-Syntax. Wie man gut sehen kann, handelt es sich bei HTML um ein einfaches Format, das man auch ohne große Erklärungen schnell versteht. </p> <hr /> <p> Programmiersprachen, die der Strukturierung einer Textdatei durch in den Text eingebettete, für Menschen lesbare Steuerinformationen dienen, nennt man <a href="https://de.wikipedia.org/wiki/Auszeichnungssprache"> Markup Languages</a> oder Auszeichnugssprachen. </p> </body> </html>

Aufgabe 1: Deine erste HTML-Datei

  1. Kopiere den Quellcode der vorangegangenen Folie in einen Texteditor deiner Wahl.
  2. Speichere die Datei mit der Endung .html ab und öffne sie im Browser.
  3. Ändere ein paar Inhalte in der Datei und schaue dir das Ergebnis an.

Hinweis: Achte auf den richtigen Zeichensatz der Datei. Das Tag <meta charset="utf-8" /> weist den Browser an, die Datei als UTF-8-Datei zu lesen. Sonst werden die Umlaute und Sonderzeichen nicht richtig dargestellt.

Quellcode im Editor
Darstellung im Browser

„Unsichtbare” HTML-Elemente

Grundstruktur eines HTML-Dokuments

<!DOCTYPE html> <html> <head>...</head> <body>...</body> </html>

Siehe Folie 3. 😎

Elemente innerhalb des Kopfbereichs

<title>Meine erste Webseite</title>
Legt den Dokumenttitel fest, der in der Titelzeile des Browsers angezeigt wird.
<meta name="name" content="wert" />
Erlaubt es, verschiedene Metadaten wie den Autor der Seite oder Schlagwörter zu ihrem Inhalt zu definieren. Diese Informationen werden von den Suchmaschinen praktisch aber nicht mehr ausgewertet.
<meta charset="utf-8" />
Sonderform des <meta>-Tags zur Definition des Zeichensatzes der Seite. Der Standardwert lautet utf-8, sollte aber trotzdem immer mitgegeben werdendamit, dass Umlaute und Sonderzeichen richtig dargestellt werden.
<link rel="shortcut icon" href="favicon.svg" />
Ordnet der Seite ein Icon zu, das neben ihrem Titel angezeigt wird.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Meine erste Webseite</title> <link rel="shortcut icon" href="favicon.svg" /> </head> <body> ... </body> </html>

Tatsächlich angezeigte HTML-Elemente

Überschriften und Absätze

<h1>Per Anhalter durch die Galaxis</h1> <h2>Die fünfteilige Trilogie</h2> <h3>Entstehung des ersten Buchs</h3>

Die Elemente <h1> bis <h6> definieren Überschriften verschiedener Arten. <h1> ist dabei eine Hauptüberschrift, <h2> eine Unterüberschrift, <h3> eine Unterunterüberschrift und so weiter.

<p> Dies ist ein Absatz, wie er unter einer Überschrift stehen könnte. <p>

Absätze werden mit dem <p>-Element definiert. Das „p” steht dabei für „Paragraph”. Absätze sollten in der Regel nicht geschachtelt werden. Überschriften sollten ebenfalls oberhalb und nicht innerhalb der Absätze stehen.

<h1>Per Anhalter durch die Galaxis</h1> <h2>Die fünfteilige Trilogie</h2> <p> Per Anhalter durch die Galaxis ist eine Romanreihe des britischen Autors Douglas Adams, die ab den ausgehenden 1970er Jahren in verschiedenen Medien erschien. Von Adams selbst stammen dabei der ersten fünf Bücher der fünfteiligen Trilogie. Im Jahr 2009 erschien acht Jahre nach seinem Tod die Fortsetzung „Und übrigens noch was …” von Eoin Colfer. </p> <p> Die Serie umfasst daher folgende Titel: </p> ...

Per Anhalter durch die Galaxis

Die fünfteilige Trilogie

Per Anhalter durch die Galaxis ist eine Romanreihe des britischen Autors Douglas Adams, die ab den ausgehenden 1970er Jahren in verschiedenen Medien erschien. Von Adams selbst stammen dabei der ersten fünf Bücher der fünfteiligen Trilogie. Im Jahr 2009 erschien acht Jahre nach seinem Tod die Fortsetzung „Und übrigens noch was …” von Eoin Colfer.

Die Serie umfasst daher folgende Titel:

...

Textformatierung

<b>Fett</b> <i>Kursiv</i> <u>Unterstrichen</u> <tt>Schreibmaschine</tt> <small>Kleine Schriftgröße</small> <large>Große Schriftgröße</large>

Einzelne Wörter oder Teile eines Satzes können mit den hier gezeigten Elementen direkt formatiert werden. Es handelt sich um die einzigen HTML-Elemente, die direkt das Aussehen ihres Inhalts verändern. Lange Zeit war ihre Verwendung nicht gern gesehen. Seitdem man den Elementen aber eine semantische Bedeutung gegeben und dann festgelegt hat, wie diese dargestellt werden soll, geht die Verwendung wieder in Ordnung. 🙃

<p> <b>Wichtiger Hinweis:</b> Lese immer das Kleingedruckte eines Vertrags, auch wenn es oft viel Text ist, den man nur schwer lesen und kaum verstehen kann. <i>Im Kleingedruckten stecken oft viele ungeahnte Fallen!</i> </p> <p> <u>Hier ein Beispiel:</u> </p> <p> <small> <small> Sämtliche in der Werbung getroffenen Aussagen sind frei erfunden. Wir garantieren für nichts und erstatten auch kein Geld zurück. Wer bei uns kauft, ist selbst schuld. </small> </small> </p>

Wichtiger Hinweis: Lese immer das Kleingedruckte eines Vertrags, auch wenn es oft viel Text ist, den man nur schwer lesen und kaum verstehen kann. Im Kleingedruckten stecken oft viele ungeahnte Fallen!

Hier ein Beispiel:

Sämtliche in der Werbung getroffenen Aussagen sind frei erfunden. Wir garantieren für nichts und erstatten auch kein Geld zurück. Wer bei uns kauft, ist selbst schuld.

Zeilenumbrüche und Trennlinien

<br />

Definiert einen Zeilenumbruch, ohne einen neuen Absatz zu beginnen. Manchmal kann das ganz nützlich sein, um auf die Schnelle ein paar Elemente untereinander anzuordnen. <br /> sollte aber sparsam verwendet werden, da die Umbrüche auf kleineren Bildschirmen oftmals unschön aussehen.

<hr />

„hr” steht für „Horizontal Ruler” und fügt eine waagerechte Trennlinie ein. Heutzutage sieht man das Element nicht mehr so oft. Braucht man aber nur eine kleine Trennlinie, ist es oft einfacher, als sich mit den Rahmenlinien eines Absatzes herumzuschlagen.

<b>Alice Wunderland</b> <br /> Hinter dem Haus 7 <br /> 76185 Karlsruhe-Märchendorf <hr /> <b>Grinsender Kater</b> <br /> Im Garten 9 <br /> 76185 Karlsruhe-Märchendorf
Alice Wunderland
Hinter dem Haus 7
76185 Karlsruhe-Märchendorf
Grinsender Kater
Im Garten 9
76185 Karlsruhe-Märchendorf

Bilder und Links

Aufzählungen und Listen

<ul> <li>Garfield langt zu</li> <li>Garfield schläft sich durch</li> <li>Garfield überlebensgroß</li> <li>Garfield breitet sich aus</li> <li>Garfield sahnt ab</li> </ul>

„ul” steht für „Unordered List” und beschreibt eine unsortierte Liste, also eine einfache Liste ohne Nummerierung. Dementsprechend sind die <li>-Elemente die „List Items”. Die Listenelemente können beliebigen weiteren HTML-Quellcode wie Absätze oder untergeordnete Listen enthalten.

<ol> <li>Per Anhalter durch die Galaxis</li> <li>Das Restaurant am Ende des Universums</li> <li>Das Leben, das Universum und der ganze Rest</li> <li>Macht's gut und danke für den Fisch</li> <li>Einmal Rupert und zurück</li> </ol>

Das ist eigentlich dasselbe wie <ul>, nur dass es sich um eine „Ordered List” also eine Liste mit Aufzählungszeichen handelt.

<h2>Meine Lieblinugsbücher als ich jung war</h2> <ul> <li> <p> Garfield-Comics </p> <ul> <li>Garfield langt zu</li> <li>Garfield schläft sich durch</li> <li>Garfield überlebensgroß</li> <li>Garfield breitet sich aus</li> <li>Garfield sahnt ab</li> </ul> </li> <li> <p> Anhalter-Romane </p> <ol> <li>Per Anhalter durch die Galaxis</li> <li>Das Restaurant am Ende des Universums</li> <li>Das Leben, das Universum und der ganze Rest</li> <li>Macht's gut und danke für den Fisch</li> <li>Einmal Rupert und zurück</li> </ol> </li> </ul>

Meine Lieblinugsbücher als ich jung war

  • Garfield-Comics

    • Garfield langt zu
    • Garfield schläft sich durch
    • Garfield überlebensgroß
    • Garfield breitet sich aus
    • Garfield sahnt ab
  • Anhalter-Romane

    1. Per Anhalter durch die Galaxis
    2. Das Restaurant am Ende des Universums
    3. Das Leben, das Universum und der ganze Rest
    4. Macht's gut und danke für den Fisch
    5. Einmal Rupert und zurück

Exkurs: Bilder für das Web aufbereiten

Aufgabe 2: Ein kleines HTML-Quiz

Aufgabe 2.1: Mit welchem HTML-Tag kann man …

a) … den Hauptteil einer Webseite deklarieren?

  1. <header>
  2. <body>
  3. <p>
  4. <main>

b) … eine Überschrift definieren?

  1. <ul>
  2. <b>
  3. <h1>
  4. <head>

c) … einen Zeilenumbruch erzeugen?

  1. <br>
  2. <hr>
  3. <p>
  4. <div>

d) … eine nummerierte Liste erstellen?

  1. <ul> <li>…</li> <li>…</li> <li>…</li> </ul>
  2. <ol> <li>…</li> <li>…</li> <li>…</li> </ol>

Aufgabe 2.2: Mit welchem Grafikformat kann man …

a) … durchsichtige Bilder in eine Seite einbinden?

  1. PNG
  2. GIF
  3. SVG
  4. JPEG

b) … einfache Animationen erstellen?

  1. PNG
  2. GIF
  3. SVG
  4. JPEG

c) … vollfarbige Seitenhintergründe mit kurzen Ladenzeiten realisieren?

  1. PNG
  2. GIF
  3. SVG
  4. JPEG

Lösung: Aufgabe 2.1: 2, 3, 1, 2; Aufgabe 2.2: 1 und 2, 2, 4

Aufgabe 3: Verschiedene HTML-Elemente anwenden

Lege eine neue HTML-Datei an und probiere die gelernten HTML-Tags aus:

  1. Definiere mehrere Absätze mit Überschriften und Unterüberschriften.
  2. Verwende mindestens eine geordnete oder ungeordnete Aufzählungsliste.
  3. Baue ein/zwei Bilder in die Seite ein. Achte darauf, dass sie nicht zu groß sind!
  4. Füge der Seite einen Link auf einen Wikipedia-Artikel deiner Wahl hinzu.

So könnte die Seite zum Beispiel aussehen:

Strukturgebende Elemente

<div>…</div>
<header>…</header>
<footer>…</footer>
<section>…</section>
<nav>…</nav>
Definieren ein allgemeines Blockelement. Als Blockelemente erzwingen sie standardmäßig einen Zeilenumbruch vor und hinter sich und sie nehmen immer eine maximale Breite ein. Die Höhe richtet jedoch sich nach ihrem Inhalt.
<span>…</span>
Definiert ein allgemeines Inlineelement. Wie der Name sagt, wird das Element im laufenden Textfluss angezeigt und es werden keine Zeilenumbrüche erzwungen. Höhe und Breite richten sich nach dem Inhalt.

Beispiel für eine komplexe Webseite

<html> <head> <meta charset="utf-8" /> <title>WikiBerd | Gopherspace</title> </head> <body> <!-- Kopfbereich mit dem Titel der Seite --> <header> <img src="logo.png" alt="WikiBerd"/> <h1>Gopherspace</h1> </header> <!-- Hauptbereich der Seite --> <main> <i>Gopherspace</i> -- ein absolut luftleerer Raum … </main> <!-- Side Bar mit Toolbox und Lizenz --> <aside> <nav> <h6>Toolbox<h6> <ul> <li> <a href="…">RSS</a> </li> … </ul> </nav> <section> <h6>Lizenz<h6> … </section> </aside> <!-- Fußbereich der Seite --> <footer> You‘re watching WikiBerd. … </footer> </body> </html>

Aufgabe 4: Welcher Quellcode passt?

Welcher Quellcode entspricht am ehesten der Abbildung?

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>IoT/Embedded-Workshop 2017</title> </head> <body> <h1>IoT/Embedded-Workshop 2017</h1> <div> 6. Semester Wirtschaftsinformatik, DHBW Karlsuruhe </div> <hr /> <h2>Vielen Dank für die erfolgreichen Projekte</h2> <p> An dieser Stelle vielen Dank an alle Projektteilnehmer … </p> <div> dennis … </div> <h2>DingDong 9. Blogeintrag: Die PhoneGap Applikation</h2> <p> Zu guter letzt kommt in diesem Artikel noch die Applikation … </p> <div> katholnigs … </div> … </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>IoT/Embedded-Workshop 2017</title> </head> <body> <header> <h1>IoT/Embedded-Workshop 2017</h1> 6. Semester Wirtschaftsinformatik, DHBW Karlsuruhe </header> <main> <article> <h2>Vielen Dank für die erfolgreichen Projekte</h2> <p> An dieser Stelle vielen Dank an alle Projektteilnehmer … </p> <footer> dennis … </footer> </article> <article> <h2>DingDong 9. Blogeintrag: Die PhoneGap Applikation</h2> <p> Zu guter letzt kommt in diesem Artikel noch die Applikation … </p> <footer> katholnigs … </footer> </article> … </main> <aside> <input name="search" placeholder="Suchen" /> <h5>Kategorien</h5> <nav> … </nav> </aside> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>IoT/Embedded-Workshop 2017</title> </head> <body> <div name="header"> <h1>IoT/Embedded-Workshop 2017</h1> 6. Semester Wirtschaftsinformatik, DHBW Karlsuruhe </div> <div name="main"> <div class="article"> <h2>Vielen Dank für die erfolgreichen Projekte</h2> <div class="preview"> An dieser Stelle vielen Dank an alle Projektteilnehmer … </div> <div class="footer"> dennis … </div> </div> <div class="article"> <h2>DingDong 9. Blogeintrag: Die PhoneGap Applikation</h2> <div class="preview"> Zu guter letzt kommt in diesem Artikel noch die Applikation … </div> <div class="footer"> katholnigs … </div> </div> … </div> <div id="sidebar"> <input name="search" placeholder="Suchen" /> <h5>Kategorien</h5> <div> … </div> </div> </body> </html>

Die Lösung ist Quellcode 2 oder 3, eher aber noch Quellcode 2.

  • Quellcode 1 ist es nicht, da er nicht alle Elemente entält. Unter anderem fehlt die Sidebar.
  • Quellcode 2 enthält ansatzweise alle Elemente des Screenshots. Zusätzlich nutzt er Tags wie <article> und <nav>, welche die Bedeutung der eingeklammerten Bereiche widerspiegeln.
  • Quellcode 3 könnte es auch sein. Die vielen <div> sind aber nicht so übersichtlich.

Rechtshinweise

Creative Commons Namensnennung 4.0 International

§