forked from WEB-IB-SS26/development-ib
Answers for exercises 1-4
parent
9c61e93038
commit
c20629a44c
|
|
@ -0,0 +1,87 @@
|
||||||
|
# Aufgabe 1:
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>1. Testwebseite</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1> 1. Überschrift </h1>
|
||||||
|
<h2> 2. Überschrift </h2>
|
||||||
|
<h3> 3. Überschrift </h3>
|
||||||
|
<h4> 4. Überschrift </h4>
|
||||||
|
<h5> 5. Überschrift </h5>
|
||||||
|
<h6> 6. Überschrift </h6>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
# Aufgabe 2:
|
||||||
|
|
||||||
|
## Beispiel 1:
|
||||||
|
```html
|
||||||
|
<h1>Willkommen<h1> <!--Variante A -->
|
||||||
|
<h1>Willkommen</h1> <!--Variante B -->
|
||||||
|
```
|
||||||
|
Antwort: Variante A ist falsch, da der 2. \<h1> tag kein schließender Tag ist.
|
||||||
|
|
||||||
|
## Beispiel 2:
|
||||||
|
```html
|
||||||
|
<p>Dies ist ein Absatz.</p> <!--Variante A -->
|
||||||
|
<p>Dies ist ein Absatz. <!--Variante B -->
|
||||||
|
```
|
||||||
|
Antwort: Variante B ist falsch, da der End Tag fehlt.
|
||||||
|
|
||||||
|
## Beispiel 3:
|
||||||
|
```html
|
||||||
|
<img src="bild.jpg" alt="Beschreibung"> <!--Variante A -->
|
||||||
|
<img>bild.jpg</img> <!--Variante B -->
|
||||||
|
```
|
||||||
|
Antwort: Variante B ist falsch, da die Attribute für den <img> Tag nicht verwendet wurden.
|
||||||
|
|
||||||
|
## Beispiel 4:
|
||||||
|
### Variante A:
|
||||||
|
```html
|
||||||
|
<ul>
|
||||||
|
<li>Erster Punkt
|
||||||
|
<li>Zweiter Punkt
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Variante B:
|
||||||
|
```html
|
||||||
|
<ul>
|
||||||
|
<li>Erster Punkt</li>
|
||||||
|
<li>Zweiter Punkt</li>
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
Antwort: Variante A ist falsch, da die schließenden Tags für die entsprechenden Listeneinträge fehlen.
|
||||||
|
|
||||||
|
## Beispiel 5:
|
||||||
|
### Variante A:
|
||||||
|
```html
|
||||||
|
<a "https://example.com">Zur Website</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Variante B:
|
||||||
|
```html
|
||||||
|
<a href="https://example.com">Zur Website</a>
|
||||||
|
```
|
||||||
|
Antwort: Variante A ist falsch, da das "href" Attribut nicht gesetzt worden ist.
|
||||||
|
|
||||||
|
## Beispiel 6:
|
||||||
|
### Variante A:
|
||||||
|
```html
|
||||||
|
<a href="#kontakt">Zum Kontaktbereich springen</a>
|
||||||
|
...
|
||||||
|
<h2 id="kontakt">Kontakt</h2>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Variante B:
|
||||||
|
```html
|
||||||
|
<a href="kontakt">Zum Kontaktbereich springen</a>
|
||||||
|
...
|
||||||
|
<h2 id="kontakt">Kontakt</h2>
|
||||||
|
```
|
||||||
|
Antwort: Variante A ist falsch, da der "href" Attributwert keine Raute enthält.
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<a href="#sprung10">Zum 10. Absatz springen</a>
|
||||||
|
|
||||||
|
<h2>1. Absatz</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc commodo semper velit, eu consectetur quam mollis
|
||||||
|
eget. In tristique iaculis diam pharetra finibus. Quisque rhoncus vel leo nec vulputate. Nulla ullamcorper porta
|
||||||
|
odio id molestie. Nunc sollicitudin lorem a libero faucibus, quis elementum erat posuere. In vulputate egestas
|
||||||
|
ante, eget sodales nisi lacinia ut. Aliquam quis erat venenatis ex tristique finibus. Quisque et consectetur
|
||||||
|
metus. Pellentesque vitae pretium eros. Sed nec porta nulla. Curabitur eu placerat mi. Nunc sed posuere sapien.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>2. Absatz</h2>
|
||||||
|
<p>
|
||||||
|
Nam vitae nulla turpis. Proin est sem, finibus quis sagittis eget, luctus eu justo. Phasellus mauris sem,
|
||||||
|
commodo eget arcu et, porta fringilla turpis. Cras a erat sed metus placerat vehicula. Etiam scelerisque
|
||||||
|
vestibulum erat id laoreet. Phasellus condimentum odio quis nisl tempor iaculis in id orci. Integer rutrum
|
||||||
|
lectus a metus euismod maximus. Nam porta, purus ac fermentum semper, ipsum est accumsan nunc, eu finibus leo
|
||||||
|
libero nec massa. Sed augue ex, efficitur in libero id, posuere ullamcorper ante. Cras feugiat tempor magna, at
|
||||||
|
cursus augue aliquam ac.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>3. Absatz</h2>
|
||||||
|
<p>
|
||||||
|
Vestibulum vel mauris ac purus ultrices molestie. Mauris dictum, lorem nec hendrerit pretium, lectus urna
|
||||||
|
pulvinar eros, vitae vestibulum lectus turpis vel ipsum. Nunc accumsan ante et enim euismod pellentesque.
|
||||||
|
Phasellus pulvinar turpis nec dui aliquet, et ultricies ante gravida. Nulla ultrices vel tellus eget hendrerit.
|
||||||
|
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec feugiat, risus non
|
||||||
|
mattis lacinia, ante velit pretium mi, vitae posuere nunc sem eget neque. Praesent mi justo, mollis ac maximus
|
||||||
|
sed, congue in augue. Nulla eleifend risus vitae leo faucibus facilisis. Quisque egestas vel diam at convallis.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>4. Absatz</h2>
|
||||||
|
<p>
|
||||||
|
Mauris in maximus nulla. Etiam neque turpis, rhoncus vel libero id, vulputate tempor ante. Ut aliquet vulputate
|
||||||
|
odio, vel fermentum mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
|
||||||
|
mus. Suspendisse tempor metus magna, ut elementum diam imperdiet a. Praesent pharetra ante arcu, ac tempus
|
||||||
|
lectus auctor in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In
|
||||||
|
vitae dui sit amet elit dapibus lobortis. Vivamus consequat lorem quis est aliquet, accumsan tincidunt mi
|
||||||
|
dignissim.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>5. Absatz</h2>
|
||||||
|
<p>
|
||||||
|
Donec pellentesque risus id lorem ullamcorper suscipit. Sed nec venenatis risus. Proin ultrices purus sit amet
|
||||||
|
dictum posuere. Phasellus et euismod ex. Curabitur lacinia laoreet mi vel suscipit. Proin posuere eros eu urna
|
||||||
|
ullamcorper, eget pretium tellus dignissim. Suspendisse varius ex est, et tempor elit convallis sed.
|
||||||
|
Pellentesque et diam id purus mattis malesuada a eu erat. Pellentesque habitant morbi tristique senectus et
|
||||||
|
netus et malesuada fames ac turpis egestas.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>6. Absatz</h2>
|
||||||
|
<p>
|
||||||
|
Cras blandit ultrices augue, vel aliquam sem lacinia quis. Proin dapibus tortor nibh, nec varius lorem blandit
|
||||||
|
sit amet. Duis maximus ex at tincidunt consequat. Cras sodales nisl quis est ornare, in molestie elit viverra.
|
||||||
|
Donec semper pellentesque laoreet. Nullam faucibus sodales euismod. Nunc erat mi, luctus nec est ac, tempus
|
||||||
|
dignissim eros. Vestibulum a magna felis.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>7. Absatz</h2>
|
||||||
|
<p>
|
||||||
|
Nulla auctor malesuada placerat. Morbi luctus tortor at enim vehicula imperdiet. Nulla sed feugiat nisl. Nullam
|
||||||
|
vestibulum iaculis dapibus. Etiam ac hendrerit purus, sit amet lobortis est. Mauris eu dui vel massa placerat
|
||||||
|
volutpat ut at risus. Donec in euismod nisl, in tempus mauris.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>8. Absatz</h2>
|
||||||
|
<p>
|
||||||
|
Ut rutrum sem sit amet volutpat iaculis. Quisque vehicula velit leo, nec luctus leo accumsan blandit. Nam
|
||||||
|
pretium justo non tempus ultricies. Ut ultrices in arcu in vehicula. Nullam blandit, sem ut dapibus finibus, sem
|
||||||
|
ligula pellentesque sapien, et rutrum est tellus sit amet sem. Ut sit amet tortor lacinia turpis auctor posuere.
|
||||||
|
Nam hendrerit erat vitae varius bibendum. Donec eu dictum lacus. Mauris finibus, arcu eget volutpat gravida,
|
||||||
|
libero arcu efficitur neque, quis maximus nulla diam in quam. Suspendisse et arcu non arcu mollis luctus in sit
|
||||||
|
amet libero. Mauris id turpis eget odio tincidunt consectetur vel quis nisi. Suspendisse nec tellus orci. Donec
|
||||||
|
id quam vel libero finibus dictum. Phasellus eleifend dolor ut est volutpat gravida.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>9. Absatz</h2>
|
||||||
|
<p>
|
||||||
|
Mauris luctus orci eu velit bibendum, eget facilisis nibh feugiat. Praesent tincidunt viverra congue. Aliquam
|
||||||
|
non ligula quis lorem rhoncus dictum. Vivamus porta eu ante eget cursus. Nunc a libero sit amet mi mattis
|
||||||
|
euismod. Donec posuere sollicitudin ipsum a consectetur. Pellentesque sit amet vestibulum tortor. Curabitur id
|
||||||
|
ex non eros auctor tempus in vel tellus. Aliquam condimentum ex a nibh tincidunt, at placerat tortor pulvinar.
|
||||||
|
In aliquam, elit vitae volutpat convallis, sapien mauris vehicula mauris, eu placerat elit augue sit amet
|
||||||
|
lectus. Pellentesque blandit venenatis eros, non varius orci hendrerit a. Proin diam mi, mollis vel sollicitudin
|
||||||
|
id, ullamcorper et mauris. Ut malesuada pharetra nunc, vitae ultrices arcu. Nullam aliquet lobortis dui, et
|
||||||
|
pellentesque enim sollicitudin non. Nullam nulla lorem, malesuada quis est sed, sollicitudin mollis urna.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 id="sprung10">10. Absatz</h2>
|
||||||
|
<p>
|
||||||
|
Proin auctor ullamcorper dapibus. Sed semper congue turpis, eu commodo nisi aliquam et. Ut placerat dignissim
|
||||||
|
leo, ut commodo nibh fermentum vel. Maecenas sed elementum augue. Etiam semper lacinia velit, sed aliquet tellus
|
||||||
|
pharetra non. Integer ac purus ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales
|
||||||
|
suscipit diam ac viverra. Vestibulum at orci in dui hendrerit mollis quis ac orci. Integer sed justo id libero
|
||||||
|
dapibus dictum sit amet at magna. Nullam commodo diam id mauris gravida, vitae egestas ipsum consectetur. Nulla
|
||||||
|
eu quam urna. Mauris aliquam ligula sit amet libero bibendum scelerisque. Duis lobortis posuere nisl sit amet
|
||||||
|
vehicula. Mit <a href="http://google.de">google erstellt</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<img src="Pictures_Aufgabe_4/binary.jpg" alt="Ein Bild mit Nullen und Einsen" title="Binärsequenzen" width="200px">
|
||||||
|
<br>
|
||||||
|
<img src="Pictures_Aufgabe_4/library.jpg" alt="Ein Bild von einer Bibliothek" title="Bibliothek" width="200px">
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 878 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 819 KiB |
Loading…
Reference in New Issue