Summary  
This chapter covers referencing external image resources by URL and integrating them into HTML code with attributes (src, alt, width), as well as organizing image metadata in JavaScript objects for dynamic gallery creation.

General domain of usage  
Web development

## Ziel
Fügen wir der Website einige Bilder hinzu, um sie für die Nutzer attraktiver zu gestalten. Wie können wir das tun? Wir können Bilder von Quellen wie <a href="https://unsplash.com/" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> Unsplash</a> verwenden. Dort kann nach dem gewünschten Thema gesucht, das Bild ausgewählt, die Adresse kopiert und auf der Website verwendet werden.

#### 1. Nach dem gewünschten Thema suchen
Besuchen Sie <a href="https://unsplash.com/" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> https://unsplash.com/</a>. Hier kann jedes beliebige Thema eingegeben werden, das von Interesse ist.

#### 2. Bild auswählen
Das bevorzugte Bild auswählen und darauf klicken.

#### 3. Bildadresse kopieren
Um die Bildadresse zu kopieren, mit der rechten Maustaste auf das Bild klicken und "Bildadresse kopieren" im Kontextmenü auswählen.

#### 4. Bildverwendung
Die kopierte Adresse kann in das `src`-Attribut des Bildes eingefügt werden, um das ausgewählte Bild zur Website hinzuzufügen. Es empfiehlt sich außerdem, die Bildbreite anzugeben, damit das Bild optimal zur Website passt. Zusätzlich kann ein beschreibender Text für das `alt`-Attribut oder der Artikeltitel für das Bild-`alt` verwendet werden.

Beispiel:

PGltZwogIHNyYz0iaHR0cHM6Ly9pbWFnZXMudW5zcGxhc2guY29tL3Bob3RvLTE0NzczMzI1NTI5NDYtY2ZiMzg0YWVhZjFjP3E9ODAmdz0yOTQwJmF1dG89Zm9ybWF0JmZpdD1jcm9wJml4bGliPXJiLTQuMC4zJml4aWQ9TTN3eE1qQTNmREI4TUh4d2FHOTBieTF3WVdkbGZIeDhmR1Z1ZkRCOGZIeDhmQSUzRCUzRCIKICBhbHQ9IlVubG9ja2luZyB0aGUgUG93ZXIgb2YgRGFpbHkgSGFiaXRzIGZvciBPcHRpbWFsIEhlYWx0aCIKICB3aWR0aD0iMzYwIgovPg==

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+TXkgQmxvZzwvdGl0bGU+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9ImluZGV4LmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aGVhZGVyPgogICAgICA8aDE+V2VsY29tZSB0byBNeSBCbG9nPC9oMT4KICAgIDwvaGVhZGVyPgoKICAgIDxtYWluPgogICAgICA8YXJ0aWNsZT4KICAgICAgICA8aDI+VW5sb2NraW5nIHRoZSBQb3dlciBvZiBEYWlseSBIYWJpdHMgZm9yIE9wdGltYWwgSGVhbHRoPC9oMj4KICAgICAgICA8cD4KICAgICAgICAgIE1haW50YWluaW5nIG9wdGltYWwgaGVhbHRoIGlzIGEgbXVsdGlmYWNldGVkIGVuZGVhdm9yLCBvZnRlbiBhY2hpZXZlZCB0aHJvdWdoIHRoZQogICAgICAgICAgY29uc2lzdGVudCBwcmFjdGljZSBvZiBoZWFsdGh5IGhhYml0cy4gTnV0cml0aW9uIHBsYXlzIGEgcGl2b3RhbCByb2xlIGluIG91ciBvdmVyYWxsCiAgICAgICAgICB3ZWxsLWJlaW5nLCBzZXJ2aW5nIGFzIHRoZSBmb3VuZGF0aW9uIGZvciB2aXRhbGl0eSBhbmQgZGlzZWFzZSBwcmV2ZW50aW9uLiBFbWJyYWNpbmcgYQogICAgICAgICAgYmFsYW5jZWQgZGlldCByaWNoIGluIGZydWl0cywgdmVnZXRhYmxlcywgbGVhbiBwcm90ZWlucywgYW5kIHdob2xlIGdyYWlucyBmdWVscyBvdXIgYm9kaWVzCiAgICAgICAgICB3aXRoIGVzc2VudGlhbCBudXRyaWVudHMgd2hpbGUgZm9ydGlmeWluZyBvdXIgaW1tdW5lIHN5c3RlbXMuIE1vcmVvdmVyLCBwcmlvcml0aXppbmcKICAgICAgICAgIGh5ZHJhdGlvbiBlbnN1cmVzIHByb3BlciBib2RpbHkgZnVuY3Rpb25zIGFuZCBzdXBwb3J0cyBjb2duaXRpdmUgcGVyZm9ybWFuY2UuIEJ5CiAgICAgICAgICBpbnRlZ3JhdGluZyBtaW5kZnVsIGVhdGluZyBwcmFjdGljZXMgYW5kIHN0YXlpbmcgaHlkcmF0ZWQsIGluZGl2aWR1YWxzIGNhbiBlbmhhbmNlIHRoZWlyCiAgICAgICAgICBlbmVyZ3kgbGV2ZWxzLCBwcm9tb3RlIHdlaWdodCBtYW5hZ2VtZW50LCBhbmQgcmVkdWNlIHRoZSByaXNrIG9mIGNocm9uaWMgY29uZGl0aW9ucyBzdWNoCiAgICAgICAgICBhcyBoZWFydCBkaXNlYXNlIGFuZCBkaWFiZXRlcy4KICAgICAgICA8L3A+CiAgICAgICAgPGltZwogICAgICAgICAgc3JjPSJodHRwczovL2ltYWdlcy51bnNwbGFzaC5jb20vcGhvdG8tMTQ3NzMzMjU1Mjk0Ni1jZmIzODRhZWFmMWM/cT04MCZ3PTI5NDAmYXV0bz1mb3JtYXQmZml0PWNyb3AmaXhsaWI9cmItNC4wLjMmaXhpZD1NM3d4TWpBM2ZEQjhNSHh3YUc5MGJ5MXdZV2RsZkh4OGZHVnVmREI4Zkh4OGZBJTNEJTNEIgogICAgICAgICAgYWx0PSJVbmxvY2tpbmcgdGhlIFBvd2VyIG9mIERhaWx5IEhhYml0cyBmb3IgT3B0aW1hbCBIZWFsdGgiCiAgICAgICAgICB3aWR0aD0iMzYwIgogICAgICAgIC8+CiAgICAgICAgPHA+CiAgICAgICAgICBJbiBhZGRpdGlvbiB0byBudXRyaXRpb24sIHJlZ3VsYXIgcGh5c2ljYWwgYWN0aXZpdHkgaXMgcGFyYW1vdW50IGZvciBtYWludGFpbmluZyBvcHRpbWFsCiAgICAgICAgICBoZWFsdGguIEVuZ2FnaW5nIGluIG1vZGVyYXRlIGV4ZXJjaXNlIGZvciBhdCBsZWFzdCAzMCBtaW51dGVzIG1vc3QgZGF5cyBvZiB0aGUgd2VlayBvZmZlcnMKICAgICAgICAgIGEgbXlyaWFkIG9mIGJlbmVmaXRzLCBpbmNsdWRpbmcgaW1wcm92ZWQgY2FyZGlvdmFzY3VsYXIgaGVhbHRoLCBzdHJlbmd0aGVuZWQgbXVzY2xlcyBhbmQKICAgICAgICAgIGJvbmVzLCBhbmQgZW5oYW5jZWQgbW9vZC4gRnVydGhlcm1vcmUsIGNvbnNpc3RlbnQgZXhlcmNpc2UgaGVscHMgbWFuYWdlIHN0cmVzcyBsZXZlbHMgYW5kCiAgICAgICAgICBwcm9tb3RlcyBiZXR0ZXIgc2xlZXAgcXVhbGl0eSwgY3J1Y2lhbCBjb21wb25lbnRzIG9mIG92ZXJhbGwgd2VsbC1iZWluZy4gQnkgaW5jb3Jwb3JhdGluZwogICAgICAgICAgZW5qb3lhYmxlIHBoeXNpY2FsIGFjdGl2aXRpZXMgaW50byBkYWlseSByb3V0aW5lcywgaW5kaXZpZHVhbHMgY2FuIGN1bHRpdmF0ZSBzdXN0YWluYWJsZQogICAgICAgICAgaGFiaXRzIHRoYXQgY29udHJpYnV0ZSB0byBhIGhlYWx0aGllciwgbW9yZSBmdWxmaWxsaW5nIGxpZmUuIFRocm91Z2ggdGhlIHN5bmVyZ3kgb2YKICAgICAgICAgIG51dHJpdGlvdXMgZWF0aW5nIGFuZCByZWd1bGFyIGV4ZXJjaXNlLCBpbmRpdmlkdWFscyBjYW4gdW5sb2NrIHRoZSBwb3dlciBvZiBkYWlseSBoYWJpdHMKICAgICAgICAgIHRvIG9wdGltaXplIHRoZWlyIGhlYWx0aCBhbmQgdml0YWxpdHkuCiAgICAgICAgPC9wPgogICAgICAgIDxwPkNhdGVnb3J5OiA8c3Ryb25nPkhlYWx0aDwvc3Ryb25nPjwvcD4KICAgICAgPC9hcnRpY2xlPgoKICAgICAgPGFydGljbGU+CiAgICAgICAgPGgyPlRoZSBDcnVjaWFsIFJvbGUgb2YgRGFpbHkgQWN0aW9ucyBpbiBFbnZpcm9ubWVudGFsIFByZXNlcnZhdGlvbjwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBFbnZpcm9ubWVudGFsIHByZXNlcnZhdGlvbiBpcyBhIGNvbGxlY3RpdmUgcmVzcG9uc2liaWxpdHkgdGhhdCBoaW5nZXMgb24gdGhlIGRhaWx5IGFjdGlvbnMKICAgICAgICAgIG9mIGluZGl2aWR1YWxzLiBTaW1wbGUgeWV0IGltcGFjdGZ1bCBoYWJpdHMgY2FuIHNpZ25pZmljYW50bHkgY29udHJpYnV0ZSB0byB0aGUgaGVhbHRoIG9mCiAgICAgICAgICBvdXIgcGxhbmV0LiBPbmUgc3VjaCBwcmFjdGljZSBpcyByZWR1Y2luZyB3YXN0ZSB0aHJvdWdoIG1pbmRmdWwgY29uc3VtcHRpb24gYW5kIHJlY3ljbGluZy4KICAgICAgICAgIEJ5IGNob29zaW5nIHJldXNhYmxlIHByb2R1Y3RzLCBtaW5pbWl6aW5nIHNpbmdsZS11c2UgcGxhc3RpY3MsIGFuZCBwcm9wZXJseSBzb3J0aW5nCiAgICAgICAgICByZWN5Y2xhYmxlcywgaW5kaXZpZHVhbHMgY2FuIGRlY3JlYXNlIHRoZSBhbW91bnQgb2Ygd2FzdGUgdGhhdCBlbmRzIHVwIGluIGxhbmRmaWxscyBhbmQKICAgICAgICAgIG9jZWFucy4gVGhpcywgaW4gdHVybiwgaGVscHMgcHJvdGVjdCB3aWxkbGlmZSBhbmQgcmVkdWNlcyBwb2xsdXRpb24uIE1vcmVvdmVyLCBzdXBwb3J0aW5nCiAgICAgICAgICBzdXN0YWluYWJsZSBwcm9kdWN0cyBhbmQgcHJhY3RpY2VzLCBzdWNoIGFzIHB1cmNoYXNpbmcgbG9jYWxseS1zb3VyY2VkIGFuZCBlY28tZnJpZW5kbHkKICAgICAgICAgIGdvb2RzLCBjYW4gZnVydGhlciBkaW1pbmlzaCBvdXIgZW52aXJvbm1lbnRhbCBmb290cHJpbnQuCiAgICAgICAgPC9wPgogICAgICAgIDxpbWcKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9pbWFnZXMudW5zcGxhc2guY29tL3Bob3RvLTE1MzU5MTQyNTQ5ODEtYjUwMTJlZWJiZDE1P3E9ODAmdz0yOTQwJmF1dG89Zm9ybWF0JmZpdD1jcm9wJml4bGliPXJiLTQuMC4zJml4aWQ9TTN3eE1qQTNmREI4TUh4d2FHOTBieTF3WVdkbGZIeDhmR1Z1ZkRCOGZIeDhmQSUzRCUzRCIKICAgICAgICAgIGFsdD0iVGhlIENydWNpYWwgUm9sZSBvZiBEYWlseSBBY3Rpb25zIGluIEVudmlyb25tZW50YWwgUHJlc2VydmF0aW9uIgogICAgICAgICAgd2lkdGg9IjM2MCIKICAgICAgICAvPgogICAgICAgIDxwPgogICAgICAgICAgQW5vdGhlciBjcml0aWNhbCBhc3BlY3Qgb2YgZW52aXJvbm1lbnRhbCBwcmVzZXJ2YXRpb24gaXMgZW5lcmd5IGNvbnNlcnZhdGlvbi4gU21hbGwKICAgICAgICAgIGNoYW5nZXMgaW4gb3VyIGRhaWx5IHJvdXRpbmVzIGNhbiBsZWFkIHRvIHN1YnN0YW50aWFsIGVuZXJneSBzYXZpbmdzLiBGb3IgaW5zdGFuY2UsCiAgICAgICAgICB0dXJuaW5nIG9mZiBsaWdodHMgd2hlbiBub3QgaW4gdXNlLCB1bnBsdWdnaW5nIGVsZWN0cm9uaWMgZGV2aWNlcywgYW5kIHV0aWxpemluZwogICAgICAgICAgZW5lcmd5LWVmZmljaWVudCBhcHBsaWFuY2VzIGNhbiBzaWduaWZpY2FudGx5IHJlZHVjZSBob3VzZWhvbGQgZW5lcmd5IGNvbnN1bXB0aW9uLgogICAgICAgICAgQWRkaXRpb25hbGx5LCBvcHRpbmcgZm9yIHB1YmxpYyB0cmFuc3BvcnRhdGlvbiwgY2FycG9vbGluZywgb3IgdXNpbmcgYWx0ZXJuYXRpdmUgbW9kZXMgb2YKICAgICAgICAgIHRyYW5zcG9ydCBsaWtlIGN5Y2xpbmcgb3Igd2Fsa2luZyBjYW4gZGVjcmVhc2UgZ3JlZW5ob3VzZSBnYXMgZW1pc3Npb25zLiBUaGVzZSBwcmFjdGljZXMKICAgICAgICAgIG5vdCBvbmx5IGhlbHAgbWl0aWdhdGUgY2xpbWF0ZSBjaGFuZ2UgYnV0IGFsc28gcHJvbW90ZSBjbGVhbmVyIGFpciBhbmQgaGVhbHRoaWVyCiAgICAgICAgICBjb21tdW5pdGllcy4gQnkgaW50ZWdyYXRpbmcgdGhlc2UgZW52aXJvbm1lbnRhbGx5IGNvbnNjaW91cyBoYWJpdHMgaW50byBvdXIgZGFpbHkgbGl2ZXMsCiAgICAgICAgICB3ZSBjYW4gY29sbGVjdGl2ZWx5IG1ha2UgYSBzaWduaWZpY2FudCBpbXBhY3Qgb24gcHJlc2VydmluZyB0aGUgcGxhbmV0IGZvciBmdXR1cmUKICAgICAgICAgIGdlbmVyYXRpb25zLgogICAgICAgIDwvcD4KICAgICAgICA8cD5DYXRlZ29yeTogPHN0cm9uZz5FbnZpcm9ubWVudDwvc3Ryb25nPjwvcD4KICAgICAgPC9hcnRpY2xlPgoKICAgICAgPGFydGljbGU+CiAgICAgICAgPGgyPlRoZSBJbXBvcnRhbmNlIG9mIE1lbnRhbCBIZWFsdGggaW4gT3ZlcmFsbCBXZWxsLUJlaW5nPC9oMj4KICAgICAgICA8cD4KICAgICAgICAgIE1lbnRhbCBoZWFsdGggaXMgYW4gaW50ZWdyYWwgY29tcG9uZW50IG9mIG92ZXJhbGwgd2VsbC1iZWluZywgaW5mbHVlbmNpbmcgaG93IHdlIHRoaW5rLAogICAgICAgICAgZmVlbCwgYW5kIGFjdCBpbiBvdXIgZGFpbHkgbGl2ZXMuIEl0IHBsYXlzIGEgY3J1Y2lhbCByb2xlIGluIGRldGVybWluaW5nIGhvdyB3ZSBoYW5kbGUKICAgICAgICAgIHN0cmVzcywgcmVsYXRlIHRvIG90aGVycywgYW5kIG1ha2UgY2hvaWNlcy4gUHJvbW90aW5nIG1lbnRhbCBoZWFsdGggc3RhcnRzIHdpdGgKICAgICAgICAgIHJlY29nbml6aW5nIGFuZCBhZGRyZXNzaW5nIHRoZSBzaWducyBvZiBtZW50YWwgaGVhbHRoIGlzc3Vlcywgc3VjaCBhcyBwcm9sb25nZWQgc3RyZXNzLAogICAgICAgICAgYW54aWV0eSwgYW5kIGRlcHJlc3Npb24uIFJlZ3VsYXIgbWVudGFsIGhlYWx0aCBjaGVjay1pbnMsIHdoZXRoZXIgdGhyb3VnaCBzZWxmLXJlZmxlY3Rpb24KICAgICAgICAgIG9yIHByb2Zlc3Npb25hbCBjb3Vuc2VsaW5nLCBjYW4gaGVscCBpbmRpdmlkdWFscyBtYW5hZ2UgdGhlaXIgZW1vdGlvbnMgYW5kIG1haW50YWluIGEKICAgICAgICAgIGJhbGFuY2VkIG91dGxvb2sgb24gbGlmZS4gUHJpb3JpdGl6aW5nIG1lbnRhbCBoZWFsdGggY2FuIGxlYWQgdG8gaW1wcm92ZWQgcmVsYXRpb25zaGlwcywKICAgICAgICAgIHByb2R1Y3Rpdml0eSwgYW5kIGEgYmV0dGVyIHF1YWxpdHkgb2YgbGlmZS4KICAgICAgICA8L3A+CiAgICAgICAgPGltZwogICAgICAgICAgc3JjPSJodHRwczovL2ltYWdlcy51bnNwbGFzaC5jb20vcGhvdG8tMTUwNjEyNjYxMzQwOC1lY2EwN2NlNjg3NzM/cT04MCZ3PTIyMDImYXV0bz1mb3JtYXQmZml0PWNyb3AmaXhsaWI9cmItNC4wLjMmaXhpZD1NM3d4TWpBM2ZEQjhNSHh3YUc5MGJ5MXdZV2RsZkh4OGZHVnVmREI4Zkh4OGZBJTNEJTNEIgogICAgICAgICAgYWx0PSJUaGUgSW1wb3J0YW5jZSBvZiBNZW50YWwgSGVhbHRoIGluIE92ZXJhbGwgV2VsbC1CZWluZyIKICAgICAgICAgIHdpZHRoPSIzNjAiCiAgICAgICAgLz4KICAgICAgICA8cD4KICAgICAgICAgIEluY29ycG9yYXRpbmcgbWVudGFsIGhlYWx0aCBwcmFjdGljZXMgaW50byBkYWlseSByb3V0aW5lcyBpcyBlc3NlbnRpYWwgZm9yIHN1c3RhaW5pbmcKICAgICAgICAgIG1lbnRhbCB3ZWxsLWJlaW5nLiBUZWNobmlxdWVzIHN1Y2ggYXMgbWluZGZ1bG5lc3MsIG1lZGl0YXRpb24sIGFuZCByZWd1bGFyIHBoeXNpY2FsCiAgICAgICAgICBhY3Rpdml0eSBjYW4gcmVkdWNlIHN0cmVzcyBhbmQgZW5oYW5jZSBtb29kLiBNaW5kZnVsbmVzcyBlbmNvdXJhZ2VzIHByZXNlbnQtbW9tZW50CiAgICAgICAgICBhd2FyZW5lc3MsIGhlbHBpbmcgaW5kaXZpZHVhbHMgbWFuYWdlIG92ZXJ3aGVsbWluZyB0aG91Z2h0cyBhbmQgZW1vdGlvbnMuIFNpbWlsYXJseSwKICAgICAgICAgIG1lZGl0YXRpb24gcHJvbW90ZXMgcmVsYXhhdGlvbiBhbmQgbWVudGFsIGNsYXJpdHksIHdoaWxlIHBoeXNpY2FsIGFjdGl2aXR5IHJlbGVhc2VzCiAgICAgICAgICBlbmRvcnBoaW5zLCB3aGljaCBhcmUgbmF0dXJhbCBtb29kIGxpZnRlcnMuIEVuc3VyaW5nIGFkZXF1YXRlIHNsZWVwLCBtYWludGFpbmluZyBhIGhlYWx0aHkKICAgICAgICAgIGRpZXQsIGFuZCBmb3N0ZXJpbmcgc29jaWFsIGNvbm5lY3Rpb25zIGFsc28gY29udHJpYnV0ZSB0byBtZW50YWwgcmVzaWxpZW5jZS4gQnkgZW1iZWRkaW5nCiAgICAgICAgICB0aGVzZSBwcmFjdGljZXMgaW50byBkYWlseSBsaWZlLCBpbmRpdmlkdWFscyBjYW4gc3VwcG9ydCB0aGVpciBtZW50YWwgaGVhbHRoLCBsZWFkaW5nIHRvIGEKICAgICAgICAgIG1vcmUgYmFsYW5jZWQgYW5kIGZ1bGZpbGxpbmcgbGlmZS4KICAgICAgICA8L3A+CiAgICAgICAgPHA+Q2F0ZWdvcnk6IDxzdHJvbmc+SGVhbHRoPC9zdHJvbmc+PC9wPgogICAgICA8L2FydGljbGU+CiAgICA8L21haW4+CgogICAgPGZvb3Rlcj4KICAgICAgPHA+JmNvcHk7IDIwMjQgTXkgQmxvZy4gQWxsIHJpZ2h0cyByZXNlcnZlZC48L3A+CiAgICA8L2Zvb3Rlcj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogUmVzZXQgZGVmYXVsdCBtYXJnaW4gYW5kIHBhZGRpbmcgKi8KYm9keSwKaDEsCmgyLApwLAppbWcgewogIG1hcmdpbjogMDsKICBwYWRkaW5nOiAwOwp9CgovKiBBcHBseSBmb250IGFuZCBiYWNrZ3JvdW5kIGNvbG9ycyAqLwpib2R5IHsKICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UyZGZkMDsKICBjb2xvcjogIzMyMDEyZjsKfQoKLyogSGVhZGVyIHN0eWxpbmcgKi8KaGVhZGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTI0YzQyOwogIHBhZGRpbmc6IDIwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9CgovKiBNYWluIGNvbnRlbnQgc3R5bGluZyAqLwptYWluIHsKICBwYWRkaW5nOiAyMHB4Owp9CgovKiBBcnRpY2xlIHN0eWxpbmcgKi8KYXJ0aWNsZSB7CiAgbWFyZ2luLWJvdHRvbTogMzBweDsKfQoKLyogQXJ0aWNsZSB0aXRsZSBzdHlsaW5nICovCmFydGljbGUgaDIgewogIGNvbG9yOiAjMzIwMTJmOwogIGZvbnQtc2l6ZTogMjRweDsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9CgovKiBBcnRpY2xlIHBhcmFncmFwaCBzdHlsaW5nICovCmFydGljbGUgcCB7CiAgbGluZS1oZWlnaHQ6IDEuNjsKICBtYXJnaW4tYm90dG9tOiAxNXB4Owp9CgovKiBJbWFnZSBzdHlsaW5nICovCmFydGljbGUgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXgtd2lkdGg6IDEwMCU7CiAgaGVpZ2h0OiBhdXRvOwogIG1hcmdpbi1ib3R0b206IDE1cHg7Cn0KCi8qIENhdGVnb3J5IHN0eWxpbmcgKi8KYXJ0aWNsZSBwOmxhc3QtY2hpbGQgewogIGZvbnQtc3R5bGU6IGl0YWxpYzsKICBjb2xvcjogI2Y5NzMwMDsKfQoKLyogRm9vdGVyIHN0eWxpbmcgKi8KZm9vdGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTI0YzQyOwogIGNvbG9yOiAjZTJkZmQwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBwYWRkaW5nOiAxMHB4Owp9

Erlernen Sie die Grundlagen der Webentwicklung und nutzen Sie dabei die Leistungsfähigkeit von KI-Tools wie ChatGPT. Verstehen Sie die Rollen von HTML, CSS und JavaScript beim Erstellen von Websites und wie KI Ihre Codiergeschwindigkeit und Kreativität steigern kann. Üben Sie das Erstellen effektiver Prompts und das Generieren von Code mit ChatGPT. Entwickeln Sie eine vollständige Blog-Website von Grund auf mithilfe KI-gestützter Entwicklung und erwerben Sie praktische Fähigkeiten für Ihre Webprojekte.

Einführung in die wichtigsten Konzepte und Technologien der Webentwicklung, einschließlich der Rolle von KI im modernen Programmieren. Dieser Abschnitt bildet die Grundlage für Ihren Lernweg, behandelt die Grundlagen der Webentwicklung und zeigt auf, wie KI Produktivität, Kreativität und Effizienz beim Programmieren steigert.

Erlernen der grundlegenden Webentwicklungstechnologien. Vertiefung in die Grundlagen von HTML, CSS und JavaScript, mit Erläuterung ihrer jeweiligen Funktionen und ihrer gemeinsamen Rolle bei der Gestaltung der digitalen Landschaft.

Erkunden Sie die Leistungsfähigkeit von ChatGPT, indem Sie dessen Fähigkeiten kennenlernen und erfahren, wie es effektiv genutzt werden kann.
Einblicke in die Erstellung von Prompts und die Arbeit mit Code durch ChatGPT.
Abschließende praktische Hinweise zur Nutzung von ChatGPT in verschiedenen Anwendungen.

Erstellen einer vollständigen und funktionsfähigen Blog-Website von Grund auf unter Einbeziehung verschiedener Webentwicklungstechniken mit ChatGPT.

Bilder Finden und Hinzufügen

Ziel

Schritte

1. Nach dem gewünschten Thema suchen

2. Bild auswählen

3. Bildadresse kopieren

4. Bildverwendung

Ergebnis

Website-Status

Videoanleitung

Awesome!