HTML-Unterrichtsmaterial

HTML ist das Fundament einer Webseite. In dieser Lektion sehen wir uns an, wie Sie eine solide und aussagekräftige Struktur für eine Webseite erstellen.

Zusammenfassung

  • Die Lernenden verstehen die HTML-Dateistruktur.
  • Die Lernenden wissen, wie sie gängige Tags verwenden, um eine Webseite zu erstellen.

Was ist HTML?

HTML steht für HyperText Markup Language. Dieser Code wird für folgende Zwecke verwendet:

  • Dokumente erstellen, die im World Wide Web gespeichert und in einem Browser angezeigt werden.
  • eine grundlegende Struktur für unsere Webseite bereitstellen – das Gerüst der Webseite.
  • sorgt für das korrekte Laden von Text und Bildern, damit sie in unserem Browser angezeigt werden können.

Wann verwenden wir HTML?

Jede Webseite, die Sie im World Wide Web sehen, wird mit HTML-Code geschrieben. Schaltflächen, Bilder, Formulare und Textabschnitte sind Elemente, die mit HTML erstellt werden.

Wenn wir unsere Webseite als menschlichen Körper betrachten, ist HTML das Skelett. Wir können dem Körper mit CSS Haut und Kleidung hinzufügen, aber erst, wenn wir das Skelett haben.

HTML in Aktion

Das Herzstück von HTML sind 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 sogar andere HTML-Elemente), die auf der Webseite angezeigt werden sollen, können zwischen diesen Tags platziert werden. Das ist so ähnlich wie beim Schichten eines Sandwiches.

<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, für die kein zusätzliches schließendes Tag erforderlich ist:

<img />
<link />

Dieses eine Tag reicht aus, da dieses Element nur einen Platzhalter in Ihrem Dokument enthält. Im Gegensatz zu den meisten anderen HTML-Elementen ist es nicht möglich, andere Elemente oder Informationen in diese selbstschließenden Elemente einzufügen.

Bestandteile eines HTML-Elements

HTML-Beispiel

Dieser Code würde in einem Browser angezeigt und wie das Bild unten aussehen.

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>

... Macht diese Webseite

HTML-Referenz

Framing

Kontext und Zweck

HTML steht für Hyper Text Markup Language. Damit lässt sich Text strukturell gliedern. So können Computer und Programmierer leicht feststellen, welchen Zweck ein Textabschnitt hat.

HTML ist das Gerüst einer Webseite. Es enthält die Struktur und den Inhalt. JavaScript und CSS sorgen für die Interaktivität und das Styling.

Lernziele

Lernende haben folgende Möglichkeiten:

  • eine HTML-Datei erstellen und sie in ihrem Editor und Browser öffnen
  • Richten Sie eine HTML-Datei mit der richtigen Struktur ein.
  • Sie können einige gängige Tags auflisten und verwenden, um ihrer Website Struktur und Inhalt hinzuzufügen.

Erste Schritte

Einleitung und Zweck des Abschnitts

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

Mini-Challenges

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

Struktur einer HTML-Seite

Einleitung und Zweck des Abschnitts

Ein HTML-Dokument sollte immer mit derselben Struktur beginnen:

  • Das DOCTYPE-Tag ist speziell und wird nicht geschlossen. Außerdem ist es das einzige Tag, das nicht alphanumerische Werte (Buchstaben/Zahlen) enthalten kann.
  • Das <head> enthält Informationen über Ihre Website, aber keine tatsächlichen Inhalte, die auf der Seite angezeigt werden.
  • Der <body>-Bereich enthält alle Inhalte Ihrer Seite, die tatsächlich auf dem Bildschirm angezeigt werden.
  • Die Tags, mit denen Sie die Struktur Ihrer Seite erstellen, sollten zwischen den <body>-Tags platziert werden.
  • Zwischen dem öffnenden und dem schließenden Tag wird der Text oder „Inhalt“ des Elements eingefügt. Das Endergebnis würde so aussehen: <example-tag>Content Goes in here</example-tag>. Tags können auch in andere Tags eingefügt werden.
  • Wenn Sie ein Tag in ein anderes Tag einfügen, sollten Sie das neue Tag einrücken, um zu zeigen, dass es ein untergeordnetes Element des übergeordneten Tags ist.

Wortschatz

  • Elemente: Elemente wie Bilder, Absätze und Überschriften, die mit HTML-Code erstellt werden.
  • Tags: Codeabschnitte, die angeben, wo bestimmte Elemente beginnen und enden.
  • Untergeordnet: Elemente, die IN anderen Elementen enthalten sind.
  • Übergeordnet: Elemente, die andere Elemente ENTHALTEN.

HTML-Beispiele

Hinweis : Das Folgende ist nur ein Beispiel zur Orientierung. Sie müssen nicht alles sofort verstehen, aber es ist gut zu sehen, wie gut formatierter HTML-Code aussehen kann.

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

  1. Öffnen Sie eine der erstellten Dateien und fügen Sie die grundlegende HTML-Tag-Struktur hinzu.
  2. Richten Sie den HTML-Body ein, um Ihren Stammbaum (oder den Stammbaum einer anderen Person) anzuzeigen. Verwenden Sie ein section-Tag, um eine Familiengruppe zu erstellen. Verwenden Sie das p-Tag, um ein Familienmitglied zu platzieren. Familien sind kompliziert. 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. -->

Gemeinsame Tags

Einleitung und Zweck des Abschnitts

Im Allgemeinen erstellen wir keine eigenen Elementtypen. Stattdessen gibt es eine Reihe vordefinierter Elemente, denen bereits Funktionen zugewiesen sind.

HTML-Referenz mit Beispielen für Codeblöcke

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

  1. Überarbeite alle oben genannten Inhalte, damit sie DEINEN Interessen entsprechen.
  2. Erstellen Sie in einer der anderen leeren HTML-Dateien, die Sie zu Beginn der Lektion erstellt haben, einen Nachrichtenartikel mit Titel, Überschriften und Unterüberschriften. Schreibe über einen Tag auf Reisen. Denken Sie an kleine Ausflüge, die Sie gemacht haben, Orte, die Sie besucht haben, und Speisen, die Sie gegessen haben.
  3. Verwenden Sie die entsprechenden Tags und fügen Sie Inhalte hinzu, damit Ihr Nachrichtenartikel auf Ihrer Website angezeigt wird.
  4. Prüfen Sie, ob Ihre Inhalte in Ihrem Browser angezeigt werden.
  5. STRETCH: Erstelle ein Formular, das Nutzer ausfüllen können, um dir einen Kommentar zu deinem Artikel zu senden. Das Formular funktioniert noch nicht, da es nicht mit JavaScript verknüpft ist. Es zeigt aber den ersten Schritt, wie wir ein funktionierendes Formular erstellen würden.

Kontext

HTML ist die Sprache der Inhalte im World Wide Web.

Sie verwenden die Befehlszeile, um zu Ihren HTML-Dateien zu navigieren und sie zu öffnen. Ihre HTML-Dateien werden mit CSS-Stilen und mit JavaScript geschriebenem Verhalten erweitert, das aus verschiedenen Funktionen besteht. HTML-Dateien sind auch Vorlagen, die von Google App Engine verwendet und aus einer Datenbank gefüllt werden.

HTML in Aktion

Erste Schritte mit HTML

HTML wird in Dateien mit der Erweiterung .html geschrieben.

Seite aufrufen

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

Allgemeine Syntax

<tag>
  Content
</tag>

Elemente sind verschachtelt

HTML-Elemente können in andere Elemente eingefügt 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 eine grundlegende Struktur, die immer gleich ist. Sie sieht so aus:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • Der <head> enthält Informationen über Ihre Website, aber keine tatsächlichen Inhalte, die auf der Seite angezeigt werden (er ist sozusagen das „Gehirn“ Ihrer Webseite).
  • Der <body>-Bereich enthält alle Inhalte Ihrer Seite, die tatsächlich auf dem Bildschirm angezeigt werden.

Häufige Elemente

Verwenden Sie diese gängigen Elemente innerhalb der Tags <body> und </body>, um einer Seite Inhalte hinzuzufügen.

Absatz

Verwenden Sie zum Erstellen eines Absatzes die öffnenden und schließenden Tags p:

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

Kommentar

Mit Kommentaren können Sie Ihren Code lesbarer machen, ohne dass sich dies auf den gerenderten HTML-Code auswirkt.

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

Allgemeines <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 mit Listenelementen (<li>) werden entweder mit einem Tag für unsortierte Listen (<ul>) oder mit einem Tag für sortierte Listen (<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 Bildes mit dem Attribut src angegeben werden. Das optionale Attribut alt wird für die Barrierefreiheit, einschließlich 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">

Für einen Hyperlink muss mit dem Attribut href die Adresse des Hyperlinkziels angegeben werden.<a>

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

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

Horizontale Linie

<!-- 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 erhoben. Damit ein <form> funktioniert, müssen die erfassten Daten zur Verarbeitung oder Bearbeitung an einen Ort gesendet werden. Daher sind für <form>oft zusätzliche Attribute erforderlich:

  • action: Das Ziel der Formulardaten, wenn das Formular gesendet wird
  • method – gibt an, ob die Daten mit einer Anfrage vom Typ GET oder POST 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 von einem <form> zum Erheben von Informationen verwendet wird.

Ein <input>-Element hat in der Regel auch 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 Element <input> ist sehr vielseitig: Durch Angabe des Attributs type kann es als Textfeld, Datumsauswahl im Kalenderstil, Optionsfeld, Drop-down-Menü und mehr gerendert werden. Eine vollständigere Liste finden Sie in der externen Dokumentation.

Tipps und Tricks

  • Sie können sich ansehen, welche HTML-Tags verfügbar sind, indem Sie den Code von Webseiten untersuchen und sehen, welche Tags andere Entwickler verwendet haben, um einer Webseite etwas hinzuzufügen.
  • Wenn Sie nicht finden, was Sie hinzufügen möchten, sehen Sie in der Entwicklerdokumentation nach. Hier finden Sie einige Listen 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 schreiben, sollten Sie bei Elementen, die ein öffnendes und ein schließendes Tag benötigen, zuerst das Tag öffnen und schließen, bevor Sie Inhalte zwischen den Tags hinzufügen. So vermeiden Sie verwaiste Tags.
  • Um die geschachtelte Struktur von HTML-Elementen in Ihrem Code besser zu sehen, sollten Sie Elemente, die sich in anderen Elementen befinden, einrücken. So können Sie die Struktur Ihrer HTML-Inhalte schnell erkennen.
  • Viele Kommentare verwenden Sie helfen Ihnen bei der Fehlerbehebung in Ihrem eigenen Code und anderen, wenn Sie sie bitten, ihn zu überprüfen.
  • Ressourcen im Web wie html5boilerplate.com können Ihnen den Einstieg in das Schreiben von HTML erleichtern.

Zusammenfassung der Best Practices

  • Informationen über eine Webseite gehören in den <head> eines HTML-Dokuments: Titel, Metadaten, Links zu Stilen usw.
  • Informationen auf einer Webseite gehören in den <body> eines HTML-Dokuments.
  • Entwickler können viele Elemente verwenden, um den Inhalt eines HTML-Dokuments zu erstellen, darunter <p>, <h1>–<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 sind selbstschließend und benötigen daher nur ein öffnendes Tag: <img>.
  • Tags können Attribute (src, alt, id usw.) enthalten, die weitere Informationen zum Verhalten eines Elements liefern: <img src="filename.png" alt="description">.
  • Kommentare, <!-- -->, enthalten Hinweise für Entwickler, die zum Verständnis der einzelnen Abschnitte einer Webseite nützlich sind.
  • Mit den integrierten Entwicklertools Ihres Browsers können Sie den HTML-Code von Webseiten prüfen, um herauszufinden, wie die Seite erstellt wurde.

Frage 1

Welches der folgenden Elemente ist ein untergeordnetes Element? Ignorieren Sie für diese Übung die body- und html-Elemente.

<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 gehört __ in das <head>-Element und __ in das <body>-Element.

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

Frage 3

Welche der folgenden Optionen sind keine guten Gründe, um verschachtelte Elemente einzurücken?

  1. Durch Einrücken lässt sich leichter erkennen, welche Elemente in anderen Elementen enthalten sind.
  2. Durch Einrücken können Menschen die Struktur der Webseite leichter erfassen.
  3. Durch Einrücken können Bots/Suchmaschinen die Struktur der Webseite leichter lesen.
  4. Durch Einrücken lassen sich gleichgeordnete Elemente leichter erkennen

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. Seitenleiste hier einfügen!

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 folgenden HTML-Snippet, das eine Beziehung veranschaulicht, ein übergeordnetes Element?

<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 untergeordnete Elemente eines übergeordneten Elements?

Die umschließenden Elemente <body> oder <html> werden nicht gezählt.

<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

Einige Browser rendern das folgende HTML-Snippet korrekt. Was ist daran falsch?

<img src=puppies.png width=400 />
  1. Es hat kein schließendes Tag.
  2. Die Werte von Attributen sollten in Anführungszeichen stehen
  3. Wenn Sie das Attribut width angeben, ist auch das Attribut height erforderlich.
  4. Ein erforderliches Attribut fehlt

Frage 1

Welches der folgenden Elemente ist ein untergeordnetes Element? Ignorieren Sie für diese Übung die body- und html-Elemente.

<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 gehört __ in das <head>-Element und __ in das <body>-Element.

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

Frage 3

Welche der folgenden Optionen sind keine guten Gründe, um verschachtelte Elemente einzurücken?

Durch Einrücken wird es Bots/Suchmaschinen nicht erleichtert, die Struktur der Webseite zu lesen. Wenn ein Bot eine Website liest, kann er den HTML-Code auch dann lesen, wenn er sich in einer einzigen Zeile befindet.

Frage 4

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

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

class ist das Attribut. Attribute werden in ein HTML-Element eingefügt und haben in der Regel (aber nicht immer) einen Wert.

Frage 5

Wie viele Attribute hat das folgende HTML-Element?

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

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

Frage 6

Welches Element ist im folgenden HTML-Snippet, das eine Beziehung veranschaulicht, ein übergeordnetes Element?

<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 untergeordnete Elemente eines übergeordneten Elements?

Die umschließenden Elemente <body> oder <html> werden nicht gezählt.

<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 alle Elemente, die ein übergeordnetes Element haben, mit Ausnahme des <div>-Elements: <h1>, <p>, <i> und <a>.

Frage 8

Einige Browser rendern das folgende HTML-Snippet korrekt. Was ist daran falsch?

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

Die Werte von Attributen sollten in Anführungszeichen gesetzt werden. <img /> ist ein selbstschließendes Tag und hat kein erforderliches Attribut. Es ist in Ordnung, wenn width ohne height und umgekehrt vorhanden ist.