Erste Schritte mit HTML und dem DOM

Artikel
05/14/2022
6 Minuten Lesedauer

Dies ist das erste einer Reihe von Lernprogrammen, die Ihnen die Grundlagen der Webentwicklung vermitteln. Erfahren Sie mehr über eine Reihe von Webentwicklertools namens Microsoft Edge DevTools, die Ihre Produktivität steigern werden.

In diesem Lernprogramm werden HTML und das Dokumentobjektmodell (DOM) beschrieben. HTML ist eine der Kerntechnologien bei der Webentwicklung. Es ist die Sprache, über die Struktur und Inhalte von Webseiten gesteuert werden. Das DOM steht ebenfalls mit Struktur und Inhalt von Webseiten in Zusammenhang. Dazu später mehr.

Ziele

Sie werden Grundlagen der Webentwicklung erlernen durch das Erstellen einer Website. Wenn Sie alle Lernprogramme der DevTools for Beginners-Reihe abgeschlossen haben, wird Ihre fertige Website wie in der folgenden Abbildung aussehen.

Am Ende dieses Lernprogramms werden Sie die nachstehend aufgeführten Konzepte verstehen:

Wie über HTML und das DOM die Inhalte erstellt werden, die auf Webseiten angezeigt werden
Wie Microsoft Edge DevTools Ihnen beim Experimentieren mit HTML- und DOM-Änderungen helfen kann.
Den Unterschied zwischen HTML und DOM

Sie werden dann außerdem über eine funktionsfähige Website verfügen. Diese können Sie z. B. für Ihren Lebenslauf oder zum Hosten Ihres Blogs verwenden.

Voraussetzungen

Bevor Sie dieses Lernprogramm durchgehen:

Wenn Sie mit HTML noch nicht vertraut sind, lesen Sie Erste Schritte mit HTML.
Laden Sie den Microsoft Edge-Webbrowser herunter. In diesem Lernprogramm werden verschiedene, in Microsoft Edge integrierte Webentwicklungstools verwendet, die als Microsoft Edge DevTools bezeichnet werden.

Einrichten des Codes

Sie werden eine Website im Glitch-Online-Code-Editor erstellen.

Öffnen Sie den Quellcode. Diese Registerkarte wird in diesem Lernprogramm als Editor-Registerkarte bezeichnet.
Wählen Sie alluring-shock aus. Das Menü Project Options wird geöffnet.
Wählen Sie "Remix Project" aus. Glitch erstellt eine Kopie des Projekts, die Sie bearbeiten können, und generiert einen neuen zufälligen Namen für das Projekt. Der Inhalt ist derselbe wie zuvor.
Wenn Sie beabsichtigen, das nächste Lernprogramm in dieser Reihe zu absolvieren, wählen Sie "Bei Glitch anmelden“ aus, und melden Sie sich mit Ihrem Facebook-, GitHub- oder Google-Konto an. Oder senden Sie sich selbst einen "magischen" Link. Wenn Sie sich nicht bei einem Konto anmelden, können Sie das Projekt nach dem Schließen der Editor-Registerkarte nicht bearbeiten.
Wählen Sie Show > In a New Window (In neuem Fenster anzeigen) aus. Eine neue Registerkarte mit der Liveseite wird geöffnet. Diese Registerkarte wird in diesem Lernprogramm als Live-Registerkarte bezeichnet.

Hinzufügen von Inhalten

Für Ihre Website werden weitere Informationen benötigt. So fügen Sie Inhalte hinzu:

Ersetzen Sie auf der Editor-Registerkarte  durch <h1>About Me</h1>.
```
<body>
  <p> Your site!</p>
        <main>
           <h1>About Me</h1>
        </main>
```
Sehen Sie sich Ihre Änderungen auf der Live-Registerkarte an. Auf der Seite wird der Text About Me angezeigt. Er ist größer als der umgebende Text, da das <h1>-Element für eine "Überschrift 1" steht. Ihr Webbrowser stellt deshalb Überschriften automatisch in größeren Schriftgraden dar.

Kehren Sie zur Editor-Registerkarte zurück, und fügen Sie <p>I am learning web development. Recent accomplishments:</p> in die Zeile unter <h1>About Me</h1> ein.

<body>
  <p> Your site!</p>
        <main>
           <h1>About Me</h1>
           <p>I am learning web development. Recent accomplishments:</p>
        </main>

Sehen Sie sich Ihre Änderung auf der Live-Registerkarte an.

Fügen Sie auf der Editor-Registerkarte mithilfe des folgenden Codes eine Liste erreichter Ziele hinzu.

<p>I am learning web development.  Recent accomplishments:</p>
   <ul>
      <li>Learned how to set up my code in Glitch.</li>
      <li>Added content to my HTML.</li>
      <li>TODO: Learn how to use Microsoft Edge DevTools to experiment with content changes.</li>
      <li>TODO: Learn the difference between HTML and the DOM.</li>
   </ul>

Überprüfen Sie auf der Live-Registerkarte, ob der neue Inhalt korrekt angezeigt wird.

Experimentieren mit Änderungen an Inhalten in Microsoft Edge DevTools

Wenn Sie eine Seite mit viel HTML-Code entwickeln, wird das Hin- und Herwechseln zwischen Editor- und Live-Registerkarte zur Überprüfung der Änderungen mühsam. Mit Microsoft Edge DevTools können Sie mit Inhaltsänderungen experimentieren, ohne die Live-Registerkarte zu verlassen.

Der Unterschied zwischen HTML und DOM

Bevor Sie Inhalte über Microsoft Edge DevTools bearbeiten, sehen wir uns an, worin sich HTML und das DOM unterscheiden. Fahren Sie mit den folgenden Schritten fort, um dies anhand eines Beispiels zu verstehen.

Navigieren Sie zur Live-Registerkarte. Am unteren Rand der Seite wird der Text A new element!?! angezeigt.
Öffnen Sie die Editor-Registerkarte, und suchen Sie nach dem Text in index.html. Der Text wird in dieser Ansicht nicht angezeigt.
Öffnen Sie die Live-Registerkarte, klicken Sie mit der rechten Maustaste auf A new element!?!, und wählen Sie dann Überprüfen aus.

DevTools wird zusammen mit Ihrer Seite geöffnet. <div>A new element!?!</div> ist hervorgehoben. Obwohl diese Struktur in DevTools wie HTML aussieht, handelt es sich tatsächlich um die DOM-Struktur.

Wenn Ihre Seite geladen wird, erstellt der Browser anhand des HTML-Codes deren anfänglichen Inhalt. Das DOM stellt den aktuellen Inhalt der Seite dar, der sich im Laufe der Zeit ändern kann.

Der <div>A new element!?!</div>-Inhalt wird Ihrer Seite aufgrund des <script src="new.js"></script>-Tags am unteren Ende Ihres HTML-Codes hinzugefügt. Dieses Tag bewirkt, dass JavaScript-Code ausgeführt wird. Weitere Informationen zu JavaScript finden Sie in einem späteren Lernprogramm.

Stellen Sie sich darunter vorerst eine Skriptsprache vor, über die der Inhalt Ihrer Seite geändert werden kann. In diesem Fall fügt JavaScript-Code Ihrer Seite <div>A new element!?!</div> hinzu. Aus diesem Grund wird dieser Text auf der Live-Registerkarte, aber nicht im HTML-Code angezeigt.

Bearbeiten des DOM

Um mit Inhaltsänderungen experimentieren, ohne die Live-Registerkarte verlassen zu müssen:

Klicken Sie in DevTools mit der rechten Maustaste auf Your site!, und wählen Sie dann Als HTML bearbeiten aus.

Ersetzen Sie <p>Your site!</p> durch den folgenden Code.

<header>
   <p><b>Welcome to my site!</b></p>
   <button>Download my resume</button>
</header>

Drücken Sie Ctrl+Enter (Windows, Linux) oder Command+Enter (macOS), um Ihre Änderungen zu speichern, oder klicken Sie außerhalb des Felds. Ihre Änderungen werden automatisch in der Liveansicht Ihrer Seite angezeigt. Der Text Your site! wurde durch den neuen Inhalt ersetzt.

Dieser Workflow eignet sich nur für das Experimentieren mit Inhaltsänderungen. Wenn Sie die Seite aktualisieren oder die Registerkarte schließen, gehen Ihre Änderungen verloren. Wenn Sie die Änderungen speichern möchten, kopieren Sie den Code manuell in Ihre HTML-Datei. In den nächsten Abschnitten werden einige weitere Möglichkeiten zum Ändern von Inhalten über die DOM-Struktur erläutert.

Knoten neu anordnen

Sie können auch die Reihenfolge von DOM-Knoten ändern. Beispielsweise befindet sich das Navigationsmenü auf Ihrer Webseite am unteren Rand.

Verschieben Sie das Navigationsmenü nach oben:

Suchen Sie den <nav>-Knoten in der DOM-Struktur von DevTools.
Ziehen Sie den <nav>-Knoten nach oben, sodass er das erste untergeordnete Element nach dem <body>-Knoten ist.

Löschen eines Knotens

Entfernen Sie einen Knoten aus der DOM-Struktur:

Wählen Sie in der DOM-Struktur <div>A new element!?!</div> aus. Der Knoten wird in DevTools hervorgehoben.
Drücken Sie Delete. Der <div>A new element!?!</div>-Knoten wird aus der DOM-Struktur entfernt.

Kopieren Ihrer Änderungen

Sie sind jetzt fast fertig. Sie haben einige Änderungen an der Seite in DevTools vorgenommen, diese werden jedoch nicht im Quellcode gespeichert.

Aktualisieren Sie die Live-Registerkarte. Die Änderungen, die Sie in der DOM-Struktur vorgenommen haben, werden nicht mehr angezeigt. Insbesondere kehrt der Text Your site! an den oberen Rand und der Text A new element!?! an den unteren zurück.

Kopieren Sie den folgenden Code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
      <header>
            <p>Welcome to my site!</p>
      </header>
      <nav>
            <ul>
               <li><a href="/">Home</a></li>
               <li><a href="/contact.html">Contact</a></li>
            </ul>
      </nav>
      <main>
            <h1>About Me</h1>
            <p>I am learning web development.  Recent accomplishments:</p>
            <ul>
               <li>Learned how to set up my code in Glitch.</li>
               <li>Added content to my HTML.</li>
               <li>Learned how to use Microsoft Edge DevTools to experiment with content changes.</li>
               <li>Learned the difference between HTML and the DOM.</li>
            </ul>
      </main>
   </body>
</html>

Wechseln Sie zurück zur Editor-Registerkarte, und ersetzen Sie den Inhalt Ihrer index.html-Datei durch den kopierten Code.

Nächste Schritte

Absolvieren Sie das nächste Lernprogramm dieser Reihe Erste Schritte mit CSS um zu lernen, wie Sie Ihre Seite entwerfen und mit Designänderungen in Microsoft Edge DevTools experimentieren können.
Näheres zum DOM erfahren Sie unter Einführung in das DOM.
Sehen Sie sich einen Kurs wie Einführung in die Webentwicklung an, um zusätzliche praktische Erfahrungen mit der Webentwicklung zu sammeln.

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die ursprüngliche Seite wurde unter gefunden https://developers.google.com/web/tools/chrome-devtools/beginners/html und von Katherine Jackson (Technical Writer Intern, Chrome DevTools) erstellt.

Diese Arbeit unterliegt einer Creative Commons Attribution 4.0 International License.