• es
  • de

HTML-Übungen

HTML-Übungen

Ein HTML-Absatzelement erstellen

Titel: Ein HTML-Absatzelement erstellen
Beschreibung: Ein HTML-Absatzelement erstellen
Anweisungen für Teilnehmer:  Erstelle mithilfe des

-Tags ein HTML-Absatzelement. Denke auch an das schließende Tag.
Datei für Teilnehmer (index.html):  
Lösungsdatei:


Prüfcode: // Alle 'p'-Elemente aus der HTML-Seite abrufen
var s=document.querySelectorAll("p");
// Prüfen, ob die Seite 'p'-Elemente enthält
if(s.length==0) {
return "Du hast keine p-Tags erstellt.";
}
// Prüfen, ob die Seite genau ein 'p'-Element enthält
else if(s.length!=1) {
return "Du musst ein p-Tag erstellen.";
}
// 'true' zurückgeben, da keine Fehler vorhanden sind
else {
return true;
}

Einen Titel erstellen

Titel: Einen Titel erstellen
Beschreibung: Der HTML-Seite einen Titel geben
Anweisungen für Teilnehmer: Erstelle ein HTML-Titelelement. Du kannst beliebigen Text für den Titel verwenden.
Datei für Teilnehmer (index.html):  
Lösungsdatei: Meine Webseite
Prüfcode: // 'title' der HTML-Seite abrufen
var s=document.querySelector("title");
// Prüfen, ob der 'title' definiert wurde
if(s==null) {
return "Du hast kein title-Tag erstellt.";
}
// Inhalt von 'title' prüfen
else if(s.text.trim()!="Meine Webseite") {
return "Der Titel der Seite muss 'Meine Webseite' lauten.";
}
// 'true' zurückgeben, da keine Fehler vorhanden sind
else {
return true;
}

Einen Hyperlink erstellen

Titel: Einen Hyperlink erstellen
Beschreibung: Einen Hyperlink erstellen
Anweisungen für Teilnehmer:  Erstelle mithilfe des -Elements einen Hyperlink. Füge dem Link Text und einen Verweis auf eine beliebige Website hinzu.
Datei für Teilnehmer (index.html):  
Lösungsdatei:
Google
Prüfcode: // Erstes 'a'-Element in der HTML-Seite abrufen
var s=document.querySelector("a");
// Prüfen, ob es vorhanden ist
if(s==null) {
return "Du hast kein Link-Tag erstellt.";
}
// Prüfen, ob das 'a'-Element auf eine URL verweist
else if(s.href.trim().length==0) {
return "href muss auf eine URL verweisen.";
}
// Prüfen, ob das 'a'-Element Text enthält
else if(s.text.trim().length==0) {
return "Füge deinem Link Beschreibungstext hinzu.";
}
// 'true' zurückgeben, da keine Fehler vorhanden sind
else {
return true;
}

Ein Bild zu einer Webseite hinzufügen

Titel: Ein Bild zu einer Webseite hinzufügen
Beschreibung: Ein Bild zu einer Webseite hinzufügen
Anweisungen für Teilnehmer: Füge mithilfe des -Tags ein Bild hinzu, und lege als Bildquelle https://udemy.programmr.com/someimage.jpg fest.
Datei für Teilnehmer (index.html):  
Lösungsdatei:
Prüfcode: // Erstes 'img'-Element in der HTML-Seite abrufen
var s=document.querySelector("img");
// Prüfen, ob es vorhanden ist
if(s==null) {
return "Du hast kein img-Tag erstellt.";
}
// Prüfen, ob das 'img'-Element auf eine Quelle verweist
else if(s.src.trim().length==0) {
return "Das src-Attribut wurde nicht gefunden.";
}
// Die URL der Quelle des Bildes prüfen
else if(s.src.trim()!="https://udemy.programmr.com/someimage.jpg") {
return "src muss auf https://udemy.programmr.com/someimage.jpg verweisen.";
}
// 'true' zurückgeben, da keine Fehler vorhanden sind
else {
return true;
}

Ein Element in einen Hyperlink einschließen

Titel: Ein Element in einen Hyperlink einschließen
Beschreibung: Ein Element in einen Hyperlink einschließen, damit darauf geklickt werden kann
Anweisungen für Teilnehmer: Der folgende Code enthält ein -Tag. Du musst das Bild in -Tags einschließen, um daraus einen Hyperlink zu machen. Der Hyperlink muss auf https://udemy.com verweisen.
Datei für Teilnehmer (index.html):
Lösungsdatei:


Prüfcode: // Erstes 'a'-Element in der HTML-Seite abrufen
var s=document.querySelector("a");
// Prüfen, ob es vorhanden ist
if(s==null) {
return "Du hast kein Link-Tag erstellt.";
}
// Die URL des Ankers prüfen
else if(s.href.trim()!="https://www.udemy.com/") {
return "href muss auf https://www.udemy.com/ verweisen.";
}
// Prüfen, ob das Anchor-Element untergeordnete Elemente enthält
else if(s.children.length==0) {
return "Es wurde kein untergeordnetes Element im Hyperlink gefunden.";
}
// Prüfen, ob das Anchor-Elemente genau ein untergeordnetes Element enthält
else if(s.children.length>1) {
return "Der Hyperlink darf nur ein untergeordnetes IMG-Element enthalten.";
}
// Prüfen, ob das untergeordnete Element ein Bild ist
else if(s.children[0].tagName!="IMG") {
return "Das Element im Link muss ein IMG sein.";
}
// 'true' zurückgeben, da keine Fehler vorhanden sind
else {
return true;
}

Eine sortierte Liste erstellen

Titel: Eine sortierte Liste erstellen
Beschreibung: Eine sortierte Liste mit drei Elementen erstellen
Anweisungen für Teilnehmer: Verwende das

    -Tag, um eine sortierte Liste zu erstellen. Die Liste muss drei Elemente enthalten (Listenelemente sind in

  1. -Tags eingeschlossen).
    Datei für Teilnehmer (index.html):  
    Lösungsdatei:

    1. Raindrops on roses
    2. Whiskers on kittens
    3. Bright copper kettles


    Prüfcode: // Das erste 'OL'-Element abrufen
    var s=document.querySelector("ol");
    // Alle 'LI'-Elemente abrufen
    var r = document.querySelectorAll("li");
    // Prüfen, ob es vorhanden ist
    if(s==null) {
    return "Leider nicht richtig. Versuche es bitte noch einmal. Du musst die sortierte Liste mithilfe von ol-Tags erstellen.";
    }
    // Prüfen, ob die HTML-Seite 3 'LI'-Elemente enthält
    else if(r.length!=3) {
    return "Leider nicht richtig. Versuche es bitte noch einmal. Enthält deine sortierte Liste drei Listenelemente?";
    }
    // 'true' zurückgeben, da keine Fehler vorhanden sind
    else {
    return true;
    }

    Eine unsortierte Liste erstellen

    Titel: Eine unsortierte Liste erstellen
    Beschreibung: Eine unsortierte Liste mit vier Elementen erstellen
    Anweisungen für Teilnehmer: Erstelle mithilfe des

      -Tags eine unsortierte Liste. Die Liste muss vier Elemente enthalten (Listenelemente sind in

    • -Tags eingeschlossen).
      Datei für Teilnehmer (index.html):  
      Lösungsdatei:

      • Element 1
      • Element 2
      • Element 3
      • Element 4


      Prüfcode: // Das erste 'UL'-Element abrufen
      var s=document.querySelector("ul");
      // Alle 'LI'-Elemente abrufen
      var r = document.querySelectorAll("li");
      // Prüfen, ob das 'UL'-Element vorhanden ist
      if(s===null) {
      return "Leider nicht richtig. Versuche es bitte noch einmal. Du musst die unsortierte Liste mithilfe von ul-Tags erstellen.";
      }
      // Prüfen, ob die Seite vier 'LI'-Elemente enthält
      else if(r.length!=4) {
      return "Leider nicht richtig. Versuche es bitte noch einmal. Enthält deine sortierte Liste vier Listenelemente?";
      }
      // 'true' zurückgeben, da keine Fehler vorhanden sind
      else {
      return true;
      }

      Einen HTML-Kommentar hinzufügen

      Titel: Kommentare zu einer HTML-Seite hinzufügen
      Beschreibung: Kommentare zu einer HTML-Seite hinzufügen
      Anweisungen für Teilnehmer: Der folgende Code enthält die Zeile „“. Aus dieser Zeile musst du einen gültigen HTML-Kommentar umwandeln.
      Datei für Teilnehmer (index.html):


      Eine Übungsseite

      Das soll ein Kommentar werden.

      Aber bitte für die Benutzer sichtbar machen!



      Lösungsdatei:


      Eine Übungsseite

      Aber bitte für die Benutzer sichtbar machen!



      Prüfcode: // Textinhalt des 'body'-Elements prüfen
      if(document.body.textContent.trim()!="Aber bitte für die Benutzer sichtbar machen!") {
      return "Leider nicht richtig. Versuche es bitte noch einmal. Dein HTML-Code sollte nur den Text 'Aber bitte für die Benutzer sichtbar machen!' anzeigen.";
      }
      else {
      for(i=0;i

      Eine leere Überschrift erstellen

      Titel: Eine leere Überschrift erstellen
      Beschreibung: Mithilfe des

      -Tags eine Überschrift ohne Text erstellen
      Anweisungen für Teilnehmer: Erstelle mithilfe eines

      -Tags eine Überschrift. Füge keinen Text in die Überschrift ein.
      Datei für Teilnehmer (index.html):  
      Lösungsdatei:


      Prüfcode: // Alle 'H1'-Elemente abrufen
      var h1=document.getElementsByTagName("h1");
      // Prüfen, ob ein 'H1'-Element vorhanden ist
      if(h1.length===0) {
      return "Leider nicht richtig. Versuche es noch mal. Denk dran, dass du ein h1-Tag erstellen musst";
      }
      // 'true' zurückgeben, da keine Fehler vorhanden sind
      return true;

      Eine Überschrift mit Text erstellen

      Titel: Eine HTML-Überschrift der Ebene 1 erstellen
      Beschreibung: Mithilfe des

      -Tags eine Überschrift erstellen
      Anweisungen für Teilnehmer: Erstelle mithilfe eines

      -Tags eine Überschrift. Du kannst beliebigen Text für die Überschrift verwenden.
      Datei für Teilnehmer (index.html):  
      Lösungsdatei:

      Text


      Prüfcode: // Alle 'H1'-Elemente in der HTML-Seite abrufen
      var h=document.getElementsByTagName("h1");
      // Prüfen, ob die Seite mindestens ein 'H1'-Element enthält
      if(h.length===0) {
      return "Leider nicht richtig. Versuche es bitte noch einmal. Du hast vergessen, der Seite ein h1-Tag hinzuzufügen.";
      }
      // Prüfen, ob das 'H1'-Element Text enthält
      else if(h[0].innerHTML.trim()==="") {
      return "Leider nicht richtig. Versuche es bitte noch einmal. Es befindet sich kein Text zwischen den h1-Tags.";
      }
      // 'true' zurückgeben, da keine Fehler vorhanden sind
      else {
      return true;
      }

      Ein style-Element hinzufügen

      Titel: Ein style-Element zu einer HTML-Seite hinzufügen
      Beschreibung: Einer HTML-Seite ein


      Prüfcode: // Alle 'style'-Elemente in der HTML-Seite abrufen
      var styleElem=document.getElementsByTagName("style");
      // Prüfen, ob 'style'-Elemente vorhanden sind
      if(styleElem.length==0) {
      return "Leider nicht richtig. Versuche es bitte noch einmal. Du hast kein style-Tag in deiner Seite deklariert."
      }
      // 'true' zurückgeben, da keine Fehler vorhanden sind
      else {
      return true;
      }

      Einen klickbaren Button erstellen

      Titel: Einen klickbaren Button erstellen
      Beschreibung: Einen klickbaren Button in der HTML-Seite erstellen, der eine Nachricht an die Konsole ausgibt, wenn auf ihn geklickt wird
      Anweisungen für Teilnehmer: Erstelle im Body der hier im Editor angezeigten HTML-Seite einen Button. Der Button braucht kein Hyperlink zu sein, muss aber das onclick-Ereignis erfassen und eine Nachricht an die Konsole ausgeben, wenn auf ihn geklickt wird.
      Wenn auf den Button geklickt wird, soll die Nachricht „Hallo Freunde“ an die Konsole ausgegeben werden.
      Datei für Teilnehmer (index.html):



      So definierst du einen klickbaren Button





      Lösungsdatei:



      So definierst du einen klickbaren Button






      Prüfcode: // Alle Buttons in der HTML-Seite abrufen
      var buttons=document.querySelectorAll("button");
      // Prüfen, ob mindestens ein Button vorhanden ist
      if(buttons.length===0) {
      return "Leider nicht richtig. Versuche es bitte noch einmal. Es wurde kein button-Element gefunden.";
      }
      button=buttons[0];
      // Sicherstellen, dass keine Nachrichten an die Konsole ausgegeben wurden
      if(consoleOutput.loggedMessages.length>0) {
      return "Leider falsch, versuche es bitte noch einmal. Es darf vorher keine Nachricht an die Konsole ausgegeben werden.";
      }
      // Klicken auf den Button simulieren
      button.click();
      // Prüfen, ob mindestens eine Nachricht an die Konsole ausgegeben wurde
      if(consoleOutput.loggedMessages.length===0) {
      return "Nach dem Klicken wurde keine Nachricht an die Konsole ausgegeben.";
      }
      // Inhalt der ersten ausgegebenen Nachricht prüfen
      if(consoleOutput.loggedMessages[0]!='Hallo Freunde') {
      return "Leider nicht richtig. Versuche es bitte noch einmal. return "Nach dem Klicken muss die korrekte Nachricht an die Konsole ausgegeben werden.";
      }
      // 'true' zurückgeben, da keine Fehler vorhanden sind
      return true;

      Das fieldset-Element in Formularen verwenden

      Titel: Formularelemente mithilfe eines fieldset-Elements gruppieren
      Beschreibung: Formularelemente mithilfe eines fieldset-Elements gruppieren
      Anweisungen für Teilnehmer: Der folgende Code enthält ein Formular, das zwei Elemente enthält: Name und E-Mail-Adresse. Verwende ein fieldset-Tag, um diese Elemente zu gruppieren.
      Datei für Teilnehmer (index.html):



      So werden zusammengehörige Elemente in einem Formular gruppiert

      Name:

      E-Mail-Adresse:



      Lösungsdatei:



      So werden zusammengehörige Elemente in einem Formular gruppiert

      Name:

      E-Mail-Adresse:



      Prüfcode: // Alle 'input'-Elemente in der HTML-Seite abrufen
      var inputs=document.querySelectorAll("input");
      if(inputs.length==0) {
      return "Leider nicht richtig. Versuche es bitte noch einmal. Es wurden keine 'input'-Elemente gefunden."
      }
      // Den übergeordneten Knoten des ersten 'input'-Elements abrufen
      var f1=inputs[0].parentNode;
      // Prüfen, ob der übergeordnete Knoten ein 'fieldset'-Element ist
      if(f1.tagName!="FIELDSET") {
      return "Leider nicht richtig. Versuche es bitte noch einmal. Hast du vergessen, Elemente in FIELDSET einzuschließen?";
      }
      // Überprüfen, ob alle 'input'-Elemente in das gleiche
      // 'fieldset'-Element eingeschlossen sind
      var f2=inputs[1].parentNode;
      if(f1!=f2) {
      return "Leider nicht richtig. Versuche es bitte noch einmal. Alle 'input'-Elemente müssen in das gleiche FIELDSET eingeschlossen sein.";
      }
      // 'true' zurückgeben, da keine Fehler vorhanden sind
      return true;