HTML-Lernmaterial

HTML ist das Herzstück einer Webseite. In diesem Modul sehen wir uns an, wie Sie eine solide und aussagekräftige Struktur für eine Webseite erstellen.

Das Wichtigste in Kürze

  • Schüler oder Studenten verstehen die HTML-Dateistruktur.
  • Schüler oder Studenten wissen genau, wie eine Webseite anhand gängiger Tags erstellt wird.

Was ist HTML?

HTML steht für HyperText Markup Language. Der Code, mit dem wir:

  • Dokumente erstellen, die im World Wide Web gespeichert und in einem Browser angezeigt werden.
  • eine grundlegende Struktur für unsere Webseite – die Knochen der Webseite – bereitstellen.
  • Achten Sie darauf, dass Text und Bilder richtig geladen werden, damit unser Browser angezeigt werden kann.

Wann verwenden wir HTML?

Jede Webseite, die Sie im World Wide Web sehen, ist in HTML geschrieben. Schaltflächen, Bilder, Formulare, Textabschnitte sind alles, was mit HTML erstellt wird.

Wenn wir uns unsere Webseite als einen menschlichen Körper vorstellen, ist HTML die Knochenstruktur. Wir können Haut und Kleidung durch den Einsatz von CSS ergänzen, aber erst, wenn diese Skelettstruktur vorhanden ist.

HTML in Aktion

Das Herzstück von HTML sind die Elemente. Elemente werden mit Tags erstellt.

Die meisten Elemente haben ein öffnendes und ein schließendes Tag:

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

Inhalte (Text oder andere HTML-Elemente), die Sie auf der Webseite sehen möchten, können zwischen diesen Tags platziert werden, ähnlich wie das Verschachteln der Sandwich-Ebenen.

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

Einige HTML-Inhalte werden mit selbstschließenden Tags erstellt, die kein zusätzliches schließendes Tag benötigen:

<img />
<link />

Nur dieses eine Tag reicht aus, da dieses Element einen Platz in Ihrem Dokument hält. Im Gegensatz zu den meisten anderen HTML-Elementen können es keine anderen Elemente oder Informationen in diesen selbstschließenden Elementen verschachteln.

Bestandteile eines HTML-Elements

HTML-Beispiel

Dieser Code würde in einem Browser angezeigt werden und wie in der Abbildung unten dargestellt sein.

Dieser Code...

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... diese Webseite erstellt

HTML-Referenz

Framing

Kontext &Zweck

HTML steht für „Hyper Text Markup Language“. Es gibt eine Möglichkeit, dem Text strukturelle Bedeutung zu geben. So können Computer und Programmierer ganz einfach den Zweck eines Textabschnitts ermitteln.

Stellen Sie sich den HTML-Code als Grundgerüst für eine Webseite vor: Er bietet die Struktur und den Inhalt, während JavaScript und CSS die Interaktivität und den Stil bieten.

Lernziele

Für Schüler und Studenten gilt:

  • HTML-Datei erstellen und im Editor und im Browser öffnen
  • eine HTML-Datei mit der richtigen Struktur einrichten
  • Liste erstellen und einige allgemeine Tags verwenden, um der Website Struktur und Inhalte hinzuzufügen

Einstieg

Bildausschnitt und Zweck

  • HTML wird in Dateien mit der Erweiterung .html geschrieben.
  • Sie können Ihren HTML-Dateien einen beliebigen Namen geben. index.html ist jedoch der am häufigsten verwendete Name für die Landingpage, es sei denn, der Entwickler hat anderen Grund, den Server zu konfigurieren.
# creating an html file on the command line
touch index.html
# opening your html file in your browser
open index.html

Mini-Wettkämpfe

  1. Erstellen Sie drei zusätzliche HTML-Dateien mit einem beliebigen Namen.
  2. Öffnen Sie eine der Dateien in Ihrem Texteditor und Browser.

Struktur einer HTML-Seite

Bildausschnitt und Zweck

Ein HTML-Dokument sollte immer mit derselben Struktur beginnen:

  • Das DOCTYPE-Tag ist etwas Besonderes und wird nicht geschlossen. Es ist auch das einzige Tag, das nicht-alphanumerische Werte (Buchstaben/Zahlen) enthalten kann.
  • Das <head> enthält Informationen über deine Website, jedoch keine tatsächlichen Inhalte, die auf der Seite angezeigt werden.
  • <body> enthält den gesamten Inhalt deiner Seite, der tatsächlich auf dem Bildschirm angezeigt wird.
  • Die Tags, mit denen du die Struktur deiner Seite erstellst, sollten zwischen den <body>-Tags platziert werden.
  • Zwischen den öffnenden und schließenden Tags werden der Text oder der Inhalt des Elements eingefügt. Das endgültige Ergebnis sieht so aus: <example-tag>Content Goes in here</example-tag>. Tags können auch in anderen Tags platziert werden.
  • Wenn Sie ein Tag innerhalb eines anderen Tags einfügen, sollten Sie das neue Tag einrücken, damit es einem untergeordneten Tag entspricht.

Vokabular

  • elements – Elemente (wie Bilder, Absätze und Überschriften), die mit HTML-Code erstellt werden.
  • Tags – Code-Snippets, die angeben, wo bestimmte Elemente beginnen und enden.
  • child: Elemente enthielt INSIDE andere Elemente.
  • parent – Elemente, die andere Elemente enthalten.

HTML-Beispiele

Hinweis: Im Folgenden wird nur ein Beispiel als Referenz verwendet. Sie müssen zwar nicht alles sofort verstehen, aber es ist gut, zu sehen, wie gut der HTML-Code aussehen könnte.

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

Mini-Wettkämpfe

  1. Öffnen Sie eine der Dateien, die Sie erstellt haben, und fügen Sie die grundlegende HTML-Tag-Struktur hinzu.
  2. Richten Sie den HTML-Textkörper ein, damit der Familienbaum (oder der Familienbaum einer anderen Person) angezeigt wird. Mit einem section-Tag kannst du eine Familiengruppe erstellen. Mit einem p-Tag kannst du ein Familienmitglied aufnehmen. Familien sind kompliziert. Hier ein Beispiel:
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

Gängige Tags

Bildausschnitt und Zweck

Im Allgemeinen erstellen wir keine eigenen Elementtypen. Stattdessen sind einige vordefinierte Elemente mit den entsprechenden Funktionen verknüpft.

Eine Aufschlüsselung aus Beispielen für Codeblöcke finden Sie in der HTML-Referenz

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

Mini-Wettkämpfe

  1. Überarbeiten Sie alle oben genannten Inhalte, um Ihre Interessen zu berücksichtigen.
  2. Geben Sie in einer dieser leeren HTML-Dateien, die Sie zu Beginn der Lektion erstellt haben, vor, dass Sie einen Nachrichtenartikel mit Titel, Überschriften und Zwischenüberschriften vorbereiten. Etwa einen Tag, wenn du unterwegs bist Denken Sie z. B. an Minireisen, die Sie besucht haben, an Restaurants, die Sie gegessen haben.
  3. Fügen Sie die relevanten Tags hinzu und fügen Sie Inhalte hinzu, damit Ihr Nachrichtenartikel auf Ihrer Website angezeigt wird.
  4. Überprüfen Sie, ob die Inhalte in Ihrem Browser angezeigt werden.
  5. STRETCH: Erstellen Sie ein Formular, das jemand ausfüllen kann, um Ihnen einen Kommentar zu Ihrem Artikel zu senden. Es funktioniert zwar noch nicht, weil wir es mit JavaScript verknüpfen, aber wenn Sie dieses Formular in HTML erstellen, sehen Sie den ersten Schritt, wie wir ein funktionierendes Formular erstellen können.

Kontext

HTML ist die Sprache des Contents im World Wide Web.

Über die Befehlszeile können Sie Ihre HTML-Dateien aufrufen und öffnen. Die HTML-Dateien werden mit CSS-Stilen und Funktionen aktualisiert, die mit JavaScript-Skripting erstellt wurden und aus verschiedenen Funktionen bestehen. HTML-Dateien sind außerdem von der Google App Engine verwendete Vorlagen und einer Datenbank.

HTML in Aktion

Erste Schritte mit HTML

HTML wird in Dateien mit der Erweiterung .html geschrieben.

Seite aufrufen

So rufen Sie auf einem Mac eine Vorschau einer HTML-Datei auf: Gehen Sie in der Befehlszeile zu dem Ordner mit Ihrer HTML-Seite und geben Sie „offener Dateiname“ ein. Ersetzen Sie dabei „&filet“ durch den Namen Ihrer HTML-Datei.

Allgemeine Syntax

<tag>
  Content
</tag>

Elemente sind verschachtelt

HTML-Elemente können in anderen Elementen platziert werden:

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

Struktur einer HTML-Seite

Jede Webseite hat dieselbe Grundstruktur. Sie sieht so aus:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • <head> enthält Informationen zu deiner Website, jedoch nicht zu den Inhalten, die auf der Seite angezeigt werden. Das ist keine leichte Aufgabe.
  • <body> enthält den gesamten Inhalt deiner Seite, der tatsächlich auf dem Bildschirm angezeigt wird.

Gemeinsame Elemente

Verwende die folgenden gängigen Elemente in den Tags <body> und </body>, um einer Seite Inhalte hinzuzufügen.

Paragraph

Verwende zum Erstellen eines Absatzes die p-Tags zum Öffnen und Schließen:

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

Kommentar

Verwenden Sie Kommentare, damit der Code leichter lesbar ist, ohne dass der endgültige gerenderte HTML-Code beeinträchtigt wird.

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

Überschriften

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Allgemein <div>

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

Listen

Listen von Listenelementen (<li>) sind entweder im ungeordneten Listen-Tag <ul> oder in einem sortierten Listen-Tag (<ol>) umschlossen.

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

Bild

Für das <img>-Tag muss die Adresse des Bilds mit dem Attribut src angegeben werden. Das optionale Attribut alt wird für Bedienungshilfen wie Screenreader verwendet.

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

Bei einem Hyperlink muss für das <a>-Tag die Adresse des Hyperlink-Ziels mithilfe des Attributs href angegeben werden.

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

Horizontale Trennlinie

<!-- This self-closing tag creates a line across your web page. -->
<hr>

Pause

<!-- This self-closing tag creates a line break between elements. -->
<br>

Formular

Mit einem <form> werden Informationen von einem Nutzer erfasst. Damit eine <form> funktioniert, müssen erst die erhobenen Daten verarbeitet und verarbeitet werden. Daher sind für <form>oft zusätzliche Attribute erforderlich:

  • action: Ziel der Formulardaten beim Einreichen des Formulars.
  • method: Gibt an, ob die Daten mit einer GET- oder einer POST-Anfrage verarbeitet werden sollen.
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

Eingabe

<input> ist das Element, das <form> zum Erfassen von Informationen verwendet.

Ein <input>-Element hat außerdem normalerweise ein name-Attribut, das von Datenbanken verwendet wird, um das Feld zu identifizieren, zu dem die eingereichten Daten gehören.

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

Das <input>-Element ist vielseitig. Mit dem Attribut type kann es als Textfeld, Datumsauswahl im Kalender, Optionsfeld oder Drop-down-Menü gerendert werden. Weitere Informationen finden Sie in der externen Dokumentation.

Tipps und Tricks

  • Erfahren Sie, welche HTML-Tags verfügbar sind, indem Sie den Code von Webseiten prüfen, um zu sehen, welche Tags andere Entwickler verwendet haben, um etwas zu einer Webseite hinzuzufügen.
  • Wenn Sie etwas nicht finden können, sehen Sie in der Entwicklerdokumentation nach. Hier finden Sie eine Liste aller möglichen HTML-Elemente https://www.w3schools.com/Tags/, https://developer.mozilla.org/en-US/docs/Web/HTML/Element, http://html-css-js.com/html/tags/.
  • Wenn Sie HTML-Code für Elemente erstellen, die ein öffnendes und ein schließendes Tag erfordern, sollten Sie das Tag zuerst öffnen und schließen, bevor Sie Content zwischen den Tags einfügen. So musst du nichts mehr tun.
  • Um die verschachtelte Funktionsweise von HTML-Elementen in Ihrem Code zu maximieren, rücken Sie Elemente ein, die sich in anderen Elementen befinden. So können Sie die Struktur Ihrer HTML-Inhalte schnell erkennen.
  • Nutze viele Kommentare! Damit können Sie Probleme mit Ihrem Code leichter beheben und andere werden gebeten, den Code zu überprüfen.
  • Ressourcen im Web wie html5boilerplate.com erleichtern Ihnen den Einstieg in das Schreiben von HTML.

Zusammenfassung der Best Practices

  • Informationen zu einer Webseite werden in die <head> eines HTML-Dokuments aufgenommen: Titel, Metadaten, Links zu Stilen usw.
  • Informationen auf einer Webseite werden in die <body> eines HTML-Dokuments aufgenommen.
  • Entwickler können viele Elemente verwenden, um den Inhalt eines HTML-Dokuments zu erstellen, zum Beispiel <p>, <h1> bis <h6>, <div>, <li>, <img>, <a>, <hr>, <br> und <!-- -->.
  • Für einige Elemente sind ein öffnendes und ein schließendes Tag erforderlich: <p></p>.
  • Andere Elemente schließen sich selbst, sodass nur ein öffnendes Tag erforderlich ist: <img>.
  • Tags können Attribute (src, alt, id usw.) enthalten, die weitere Informationen zur Funktionsweise eines Elements liefern: <img src="filename.png" alt="description">.
  • Mit Kommentaren (<!-- -->) werden Entwicklern Notizen gemacht, mit denen sich nachvollziehen lässt, was Bereiche einer Webseite machen.
  • Mit den integrierten Entwicklertools des Browsers können Sie den HTML-Code von Webseiten und den Aufbau der Seite ermitteln.

Frage 1

Welches der folgenden Elemente ist ein untergeordnetes Element? (Text- und HTML-Elemente ignorieren für diese Übung)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. H1
  2. p
  3. a
  4. H1 und P

Frage 2

In einem HTML-Dokument geht __ in das Element <head> und __ in das Element <body> ein.

  1. Struktur, Metadaten
  2. Metadaten, Struktur
  3. Überschriften, kleinere Inhalte
  4. der Website, der Hauptinhalt der Website

Frage 3

Was ist kein guter Grund für das Einrücken verschachtelter Elemente?

  1. Durch Einrücken lässt sich leichter erkennen, welche Elemente in anderen Elementen enthalten sind
  2. Durch Einrücken können Nutzer die Struktur der Webseite leichter lesen
  3. Durch das Einrücken können Bots und Suchmaschinen die Struktur der Webseite leichter lesen
  4. Durch Einrücken wird die Erkennung von gleichrangigen Elementen vereinfacht.

Frage 4

Welche der folgenden Optionen ist ein Attribut des HTML-Elements?

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. Seitenleiste
  4. Die Seitenleiste wird geöffnet.

Frage 5

Wie viele Attribute hat das folgende HTML-Element?

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

Frage 6

Welches Element ist im übergeordneten HTML-Snippet eine Beziehung?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

Frage 7

Wie viele der Elemente im folgenden HTML-Snippet sind einem übergeordneten Element untergeordnet?

(Umfassende <body>- oder <html>-Elemente nicht zählen)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

Frage 8

Welches Browser stellt das folgende HTML-Snippet zwar richtig dar, was stimmt jedoch nicht?

<img src=puppies.png width=400 />
  1. Es hat kein schließendes Tag.
  2. Wenn Sie die Werte eines Attributs angeben möchten, müssen Sie es in Anführungszeichen setzen.
  3. Die Angabe des width-Attributs erfordert auch das height-Attribut.
  4. Ein erforderliches Attribut fehlt.

Frage 1

Welches der folgenden Elemente ist ein untergeordnetes Element? (Text- und HTML-Elemente ignorieren für diese Übung)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

Das a-Element ist ein untergeordnetes Element, da es in einem anderen Element enthalten ist.

Frage 2

In einem HTML-Dokument geht __ in das Element <head> und __ in das Element <body> ein.

Metadaten werden in das Element <head> und die Struktur in das Element <body> aufgenommen. Nichts im <head>-Element ist auf der Webseite selbst sichtbar.

Frage 3

Was ist kein guter Grund für das Einrücken verschachtelter Elemente?

Durch das Einstellen ist es für Bots und Suchmaschinen nicht einfacher, die Struktur der Webseite zu lesen. Wenn ein Bot eine Website liest, kann er den HTML-Code lesen, selbst wenn alles in einer Zeile enthalten ist.

Frage 4

Welche der folgenden Optionen ist ein Attribut des HTML-Elements?

<div class="sidebar">Sidebar goes here!</div>

class ist das Attribut. Attribute sind in einem HTML-Element enthalten und haben in der Regel einen Wert.

Frage 5

Wie viele Attribute hat das folgende HTML-Element?

<input type="text" placeholder="username" name="username" />

Das obige input-Element hat drei Attribute: type, placeholder und name.

Frage 6

Welches Element ist im übergeordneten HTML-Snippet eine Beziehung?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> ist ein übergeordnetes Element, da es andere Elemente enthält.

Frage 7

Wie viele der Elemente im folgenden HTML-Snippet sind einem übergeordneten Element untergeordnet?

(Umfassende <body>- oder <html>-Elemente nicht zählen)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

Das Snippet enthält vier untergeordnete Elemente, also übergeordnete Elemente, also außer dem Element <div>: <h1>, <p>, <i> und <a>.

Frage 8

Welches Browser stellt das folgende HTML-Snippet zwar richtig dar, was stimmt jedoch nicht?

<img src=puppies.png width=400 />

Die Werte der Attribute müssen in Anführungszeichen gesetzt werden. <img /> ist ein selbstschließendes Tag, das kein erforderliches Attribut hat. Es ist in Ordnung, width ohne height zu haben und umgekehrt.