Summary  
This chapter explains how to embed external images by using an img element with a src attribute pointing to a URL, providing descriptive alt text, and controlling display size via width.

General domain of usage  
Web development

## Tavoite
Lisätään sivustolle kuvia, jotta siitä tulee houkuttelevampi käyttäjille. Miten tämä onnistuu? Kuvia voi etsiä esimerkiksi lähteestä kuten <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>. Siellä voi hakea halutun aiheen, valita kuvan, kopioida sen osoitteen ja käyttää sitä sivustolla.

#### 1. Etsi haluamasi aihe
Vieraile <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>. Kirjoita tähän mikä tahansa aihe, joka kiinnostaa.

#### 2. Valitse kuva
Etsi mieluisin kuva ja napsauta sitä.

#### 3. Kopioi kuvan osoite
Kopioi kuvan osoite napsauttamalla kuvaa hiiren oikealla painikkeella ja valitsemalla kontekstivalikosta "Kopioi kuvan osoite".

#### 4. Kuvien käyttö
Voimme liittää kopioidun osoitteen kuvan `src`-attribuuttiin lisätäksemme valitun kuvan verkkosivustollemme. Kuvan leveyden määrittäminen on suositeltavaa, jotta se sopii sivustolle hyvin. Lisäksi voimme antaa kuvaavan sisällön `alt`-attribuutille tai käyttää artikkelin otsikkoa kuvan `alt`-tekstinä.

Esimerkki:

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

Kun olet löytänyt kuvan Unsplashista ja valinnut "Kopioi kuvan osoite", mitä sinun tulisi tehdä tällä osoitteella HTML:ssä?

Opi web-kehityksen perusteet hyödyntäen tekoälytyökaluja, kuten ChatGPT:tä. Ymmärrä HTML:n, CSS:n ja JavaScriptin roolit verkkosivustojen rakentamisessa sekä kuinka tekoäly voi parantaa koodausnopeutta ja luovuutta. Harjoittele tehokkaiden kehotteiden laatimista ja koodin tuottamista ChatGPT:llä. Rakenna kokonainen blogisivusto alusta alkaen tekoälyavusteisesti ja hanki käytännön taitoja omia web-projekteja varten.

Johdatus web-kehityksen keskeisiin käsitteisiin ja teknologioihin, mukaan lukien tekoälyn rooli nykyaikaisessa koodauksessa. Tämä osio luo perustan oppimispolullesi käsittelemällä web-kehityksen perusteita sekä sitä, miten tekoäly parantaa tuottavuutta, luovuutta ja tehokkuutta koodauksessa.

Opi keskeiset web-kehitysteknologiat. Syvenny HTML:n, CSS:n ja JavaScriptin perusteisiin, selvittäen niiden yksittäiset toiminnot ja yhteinen rooli digitaalisen ympäristön muovaamisessa.

Tutustu ChatGPT:n mahdollisuuksiin ja sen tehokkaaseen hyödyntämiseen. Saat tietoa kehotteiden laatimisesta ja koodin käsittelystä ChatGPT:n avulla. Lopuksi käytännön vinkkejä ChatGPT:n hyödyntämiseen eri sovelluksissa.

Rakenna blogisivusto. Luo täydellinen ja toimiva blogisivusto alusta alkaen hyödyntäen erilaisia web-kehitystekniikoita ChatGPT:n avulla.

Kuvien Etsiminen ja Lisääminen

Tavoite

Vaiheet

1. Etsi haluamasi aihe

2. Valitse kuva

3. Kopioi kuvan osoite

4. Kuvien käyttö

Tulokset

Verkkosivuston tila

Videotutoriaali

Awesome!