i

Listen von Knoten

Mehrere Attribute

Auf der vorherigen Seite wurden der a Funktion zwei Listen übergeben. Diese enthielten jeweils nur ein Element. Bei Bildern reicht ein einzelnes Attribut oft nicht aus:

main =
    img
        [ src "https://kurzelinks.de/caesarbild"
        , width 100
        , alt "Caesar"
        ]
        []

Der DOM-Teilbaum lässt sich so darstellen:

DOM für Bild
HTML

Wir erzeugen den DOM-Baum mit Hilfe von Elm, nicht mit HTML. Zur Verdeutlichung aber hier der HTML-Code, der die gleiche Wirkung hätte:

<img src="https://kurzelinks.de/caesarbild" width="100" alt="Caesar">

Aufgabe 1

Ersetze in deinem Projekt den Link durch das Bild gemäß dem Code oben. Ergänze ähnlich dem Lückentext auf der vorherigen Seite:
  • img ist eine ...
  • src ist eine ...
  • width ist eine ...
  • alt ist eine ...

Mehrere Textknoten

Analog kannst du mehrere Textknoten in einer Liste erzeugen:

main =
div []
    [ text "HALLO"
    , text " "
    , text "KDOOR"
    ]

Der erzeuge DOM-Teilbaum hat folgende Gestalt:

DOM Teilbaum div
HTML

Wir erzeugen den DOM-Baum mit Hilfe von Elm, nicht mit HTML. Zur Verdeutlichung aber hier der HTML-Code, der die gleiche Wirkung hätte:

<div>
    HALLO
        
    KDOOR
</div>

Aufgabe 2

Teste auch diese Variante.

Suche

v
8.2.3.2.1.3
inf-schule.de/deklarativ/fp_elm/dynamischewebseiten/caesarstatisch/lernstrecke/knotenlisten
inf-schule.de/8.2.3.2.1.3
inf-schule.de/@/page/hOqAxUIRx4rwEIkp

Rückmeldung geben