Aufgabe 1-10 Flashcards
Aufgabe 1
Erstellen eine HTML-Seite mit dem Titel “Meine erste Webseite” und füge einen Absatz hinzu, der den Text “Hallo Welt!” enthält.
Lösung:
<!DOCTYPE html> <html> <head> <title>Meine erste Webseite</title> </head> <body> <p>Hallo Welt!</p> </body> </html>
Aufgabe 2
Erstellen eine HTML-Seite mit einer Überschrift “Meine Lieblingstiere” und einer Liste Ihrer drei Lieblingstiere.
Lösung:
<!DOCTYPE html> <html> <head> <title>Meine Lieblingstiere</title> </head> <body> <h1>Meine Lieblingstiere</h1> <ul> <li>Katzen</li> <li>Hunde</li> <li>Pinguine</li> </ul> </body> </html>
Aufgabe 3
Erstellen eine HTML-Seite mit einem Bild Ihrer Wahl und einem Bildunterschrift.
Hinweis
Sie müssen den Dateinamen des Bildes und den Pfad zur Datei im src-Attribut anpassen.
Lösung:
<!DOCTYPE html> <html> <head> <title>Mein Bild</title> </head> <body> <img src="bild.jpg" alt="Mein Bild"> <p>Das ist mein Bild</p> </body> </html>
Aufgabe 4
Erstellen eine HTML-Seite mit einem Formular, das einen Namen, eine E-Mail-Adresse und eine Nachricht enthält.
Lösung:
<!DOCTYPE html> <html> <head> <title>Kontaktformular</title> </head> <body> <form> <label for="name">Name:</label> <input type="text" id="name" name="name"><br> <label for="email">E-Mail-Adresse:</label> <input type="email" id="email" name="email"><br> <label for="nachricht">Nachricht:</label><br> <textarea id="nachricht" name="nachricht"></textarea><br> <input type="submit" value="Absenden"> </form> </body> </html>
Aufgabe 5
Erstellen eine HTML-Seite mit einem Link zu einer anderen Webseite.
Lösung:
<!DOCTYPE html> <html> <head> <title>Link zu Google</title> </head> <body> <p>Ein Link zu Google:</p> <a href="https://www.google.com">Google</a> </body> </html>
Aufgabe 6
Erstellen eine HTML-Seite mit einer Überschrift “Mein erster Absatz” und zwei Absätzen mit beliebigem Text.
Lösung:
<!DOCTYPE html> <html> <head> <title>Mein erster Absatz</title> </head> <body> <h1>Mein erster Absatz</h1> <p>Dies ist der erste Absatz.</p> <p>Dies ist der zweite Absatz.</p> </body> </html>
Aufgabe 7
Erstellen eine HTML-Seite mit einer Überschrift “Meine Lieblingsfarben” und einer geordneten Liste mit Ihren drei Lieblingsfarben.
Lösung:
<!DOCTYPE html> <html> <head> <title>Meine Lieblingsfarben</title> </head> <body> <h1>Meine Lieblingsfarben</h1> <ol> <li>Blau</li> <li>Grün</li> <li>Rot</li> </ol> </body> </html>
Aufgabe 8
Erstellen eine HTML-Seite mit einem Bild Ihrer Wahl und einem Link, der zu einer anderen Webseite führt.
**Hinweis: **
Sie müssen den Dateinamen des Bildes und den Pfad zur Datei im src-Attribut anpassen und den Link im href-Attribut des a-Tags anpassen.
Lösung:
<!DOCTYPE html> <html> <head> <title>Mein Bild mit Link</title> </head> <body> <a href="https://www.google.com"> <img src="bild.jpg" alt="Mein Bild"> </a> </body> </html>
Aufgabe 9
Erstellen eine HTML-Seite mit einem Formular, das Vorname, Nachname, E-Mail-Adresse und Passwort abfragt.
Lösung:
<!DOCTYPE html> <html> <head> <title>Registrierungsformular</title> </head> <body> <form> <label for="vorname">Vorname:</label> <input type="text" id="vorname" name="vorname"><br> <label for="nachname">Nachname:</label> <input type="text" id="nachname" name="nachname"><br> <label for="email">E-Mail-Adresse:</label> <input type="email" id="email" name="email"><br> <label for="passwort">Passwort:</label> <input type="password" id="passwort" name="passwort"><br> <input type="submit" value="Registrieren"> </form> </body> </html>
Aufgabe 10
Erstellen eine HTML-Seite mit einem Link zu einem Video Ihrer Wahl und einem Absatz, der den Titel des Videos enthält.
Lösung:
<!DOCTYPE html> <html> <head> <title>Link zu einem Video</title> </head> <body> <p>Ein Link zu einem Video:</p> <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Never Gonna Give You Up</a> <p>Titel: Never Gonna Give You Up von Rick Astley</p> </body> </html>
