Piltide lisamine veebisaidile või suhtlusvõrgustiku profiilile on suurepärane viis oma lehe kaunistamiseks. HTML-kood piltide lisamiseks on lihtne ja sageli üks esimesi õppetunde HTML-i algajale.
1
Laadige oma pilt üles. Saadaval on palju tasuta pildimajutusteenuseid, nagu Picasa Web Albums, Imgur, Flickr või Photobucket. Lugege tingimused hoolikalt läbi. Mõned teenused vähendavad teie pildikvaliteeti või eemaldavad teie pildi, kui seda vaatavad liiga paljud inimesed (kuna see kasutab ära hosti ribalaiuse).Mõned ajaveebi hostimisteenused võimaldavad teil pilte üles laadida ajaveebi administraatori tööriistade abil.Kui teil on tasuline veeb host, laadige pilt FTP-teenuse abil oma saidile üles. Failide korrastamiseks on soovitatav luua piltide kataloog. Kui soovite pilti mõnel teisel veebisaidil kasutada, küsige selle loojalt luba. Kui ta seda lubab, laadige pilt alla ja seejärel laadige pilt üles pildimajutussaidile.
2
Avage oma HTML-fail. Avage selle veebilehe HTML-dokument, kus pilt kuvatakse. Kui proovite foorumisse pilti sisestada, võite sisestada otse postitusse. Paljud foorumid kasutavad HTML-i asemel kohandatud süsteemi. Kui see ei tööta, küsige abi teistelt foorumikülastajatelt.
3
Alusta img-sildiga. Leidke oma HTML-i kehast punkt, kuhu soovite pildi sisestada. Kirjuta siia silt . See on tühi silt, mis tähendab, et see on eraldiseisev, ilma sulgeva sildita. Kõik, mida vajate oma pildi kuvamiseks, asub kahes nurksulus.
4
Otsige üles oma pildi URL. Külastage veebilehte, kus teie pilti majutatakse. Paremklõpsake pilti (Maci puhul Control-klõpsake) ja valige “Kopeeri pildi asukoht”. Võite ka klõpsata nupul „Kuva pilti”, et näha lehel pilti üksinda, seejärel kopeerida URL oma aadressiribale. Kui laadisite pildi üles oma veebisaidi piltide kataloogi, linkige sellele aadressil /images/yourfilenamehere. Kui see ei tööta, on piltide kataloog tõenäoliselt teises kaustas. Teisaldage see juurkataloogi.
5
Asetage URL atribuuti src. Nagu võib-olla juba teate, lähevad HTML-i atribuudid sildi sisse, et seda muuta. Atribuut src on lühend sõnast “source” ja annab brauserile teada, kust kujutist otsida. Kirjutage src=” ” ja kleepige pildi URL jutumärkide vahele. Siin on näide:
6
Lisage alt atribuut. Tehniliselt on teie HTML-is kõik pildi kuvamiseks vajalik, kuid kõige parem on lisada ka atribuut alt. See annab brauserile teada, millist teksti kuvada, kui pildi laadimine ebaõnnestub. Veelgi olulisem on see, et see aitab otsingumootoritel aru saada, millest teie pilt räägib, ja võimaldab ekraanilugejatel kirjeldada pilti nägemispuudega külastajatele. Järgige seda näidet, muutes jutumärkides olevat teksti:Kui pilt ei ole lehe sisu jaoks oluline, lisage atribuut alt ilma tekstita (alt=””).
7
Salvestage oma muudatused. Salvestage HTML-fail oma veebisaidile. Külastage äsja muudetud lehte või värskendage lehte, kui see oli juba avatud. Nüüd peaksite oma pilti nägema. Kui see on vale suurus või te pole sellega muul põhjusel rahul, jätkake järgmise jaotisega.
8
Muutke pildi suurust. Parimate tulemuste saavutamiseks muutke pildi suurust tasuta redigeerimistarkvara abil ja laadige seejärel üles uus versioon. Laiuse ja kõrguse määramine HTML-i abil annab brauserile käsu pilti kahandada või laiendada, mis võib brauserites olla ebaühtlane ja (harva) põhjustada kuvamisvigu. Kui soovite kiiret ja hooldatavat reguleerimist, kasutage järgmist vormingut:
(pikslite arv või telefonisõbralikumad “CSS-pikslid” HTML5-s.)või (veebilehe mõõtmete protsent või HTML-i protsent pilti sisaldav element.)Kui sisestate ainult ühe atribuudi (laius või kõrgus), peaks brauser säilitama laiuse:kõrguse suhte.
9
Lisage kohtspikker. Pealkirja atribuuti saab kasutada pildi kohta täiendava kommentaari või teabe lisamiseks. Näiteks saate siin kunstnikule au anda. Enamikul juhtudel kuvatakse see tekst, kui külastaja hõljutab kursorit pildi kohal.
10
Tee sellest link. Kujutise loomiseks, mis on ka link, sisestage pildisilt hüperlingi märgendi sisse. Siin on näide: 