Kaip įterpti vaizdus naudojant HTML

Autorius: Florence Bailey
Kūrybos Data: 25 Kovas 2021
Atnaujinimo Data: 17 Gegužė 2024
Anonim
15: How to Insert Images Using HTML and CSS | Learn HTML and CSS | HTML Tutorial | Basics of CSS
Video.: 15: How to Insert Images Using HTML and CSS | Learn HTML and CSS | HTML Tutorial | Basics of CSS

Turinys

Vaizdų pridėjimas prie svetainės ar socialinės žiniasklaidos profilio yra puikus būdas pagerinti vizualinį puslapio aspektą. HTML („Hypertext Markup Language“) kodas, skirtas pridėti vaizdus, ​​yra gana paprastas ir paprastai pirmasis mokosi HTML studentas.

Žingsniai

1 dalis iš 2: Vaizdo įterpimas

  1. Atsiųskite vaizdą. Šiuo metu yra keletas nemokamų vaizdų talpinimo paslaugų, tokių kaip „Picasa“ žiniatinklio albumai, „Imgur“, „Flickr“ ar „Photobucket“. Atidžiai perskaitykite kiekvieno naudojimo sąlygas. Kai kurios iš šių paslaugų gali sumažinti siunčiamo vaizdo kokybę arba jį pašalinti, kai jis pasiekia tam tikrą peržiūrų skaičių (taip yra todėl, kad vaizdai užima vietą šių įmonių serveriuose).
    • Kai kurios tinklaraščio prieglobos paslaugos leidžia vartotojui įkelti vaizdus naudodamiesi savo tinklaraščio valdymo įrankiais.
    • Jei esate mokamos prieglobos paslaugos abonentas, įkelkite vaizdus į savo svetainę naudodami FTP (File Transfer Protocol) paslaugą. Kad failai būtų tvarkomi, rekomenduojama sukurti katalogą „vaizdai“.
    • Jei norite naudoti vaizdą iš kitos svetainės, paprašykite kūrėjo leidimo. Jei užsakymas bus įvykdytas, atsisiųskite ir įkelkite vaizdą į vaizdų talpinimo svetainę.

  2. Atidarykite HTML failą. Atidarykite HTML dokumentą, atitinkantį tinklalapį, kuriame bus rodomas vaizdas.
    • Jei ketinate įterpti vaizdą į forumą, tiesiog įveskite kodą tiesiai į savo įrašą. Keletas interneto forumų vietoj HTML naudoja pritaikytą sistemą. Jei tai nepadeda, paprašykite kitų vartotojų pagalbos.

  3. Pradėkite nuo IMG žymos. HTML failo tekste raskite vietą, kurioje norite įterpti vaizdą. Parašykite žymą . Tai tuščia žyma, tai yra, ji neturi baigiamosios žymos. Viskas, ko reikia vaizdui atvaizduoti, turi būti įrašyta į du laužtinius skliaustus.

  4. Raskite savo vaizdo URL adresą. Apsilankykite svetainėje, kurioje patalpinote vaizdą. Dešiniuoju pelės mygtuku spustelėkite paveikslėlį („Mac“ sistemoje palaikykite nuspaudę „Control“ klavišą ir spustelėkite pele) ir pasirinkite „Kopijuoti vaizdo adresą“. Jei norite, spustelėkite „Peržiūrėti vaizdą“, kad atidarytumėte jį tik puslapyje, ir nukopijuokite URL adreso juostoje.
    • Jei įkėlėte vaizdą į vaizdų katalogą savo svetainėje, susiekite jį taip / images /tavo vardo vardas. Jei jis neveikia, greičiausiai vaizdų katalogas yra kitame aplanke. Perkelkite jį į šakninį katalogą.
  5. Įdėkite URL adresą į SRC atributą. Jūs tikriausiai jau žinote, kad HTML atributai dedami į žymas, kad jį modifikuotumėte. Atributas SRC reiškia „šaltinis“, ir būtent jis nurodo naršyklei, kur ieškoti, kad rastumėte vaizdą. Įveskite src = "" ir įklijuokite vaizdo URL adresą į kabutes. Štai pavyzdys:
  6. Pridėkite ALT atributą. Techniškai kalbant, HTML turi viską, ko reikia vaizdui rodyti. Tačiau geriau pridėti atributą alt taip pat. Interneto naršyklei jis nurodo tekstą, kuris bus rodomas, kai negalėsite įkelti vaizdo. Svarbiausia, kad tai padeda paieškos sistemoms apytiksliai atrasti jūsų atvaizdo turinį, leidžiant ekrano skaitytojams apibūdinti vaizdą silpnaregiams lankytojams. Sekite žemiau pateiktą pavyzdį ir pakeiskite tekstą kabutėse:
    • Jei vaizdas nėra svarbus puslapio turiniui, pridėkite ALT atributą be jo teksto (alt = "").
  7. Išsaugoti pakeitimus. Išsaugokite svetainės HTML failą. Pasiekite ką tik redaguotą puslapį arba atnaujinkite, jei jis jau atidarytas. Turėtų būti rodomas vaizdas. Jei jo dydis netinkamas arba kyla kitų problemų, pereikite prie kito skyriaus.

2 dalis iš 2: Pasirenkami nustatymai

  1. Pakeiskite vaizdo dydį. Norėdami gauti geriausius rezultatus, tiesiog naudokite vaizdų redagavimo programinę įrangą, kad pakeistumėte jų dydį, tada įkelkite naują versiją. Apibrėžkite atributus plotis (plotis) ir ūgio (aukštis) HTML, kad naršyklė sutrauktų arba padidintų vaizdą, o tai gali būti nenuosekli daugelyje interneto naršyklių ir netgi sukelti rodymo klaidas (retai). Jei norite greitai ir funkciškai sureguliuoti, naudokite šį formatą:
    • (Pikselių arba „CSS taškų“ skaičius HTML5.)
    • Arba (Tinklalapio ar vaizdo dydžio procentinė dalis.)
    • Jei įvesite tik vieną iš dviejų atributų (plotis arba aukštis), naršyklė turi išsaugoti pločio ir aukščio santykį.
  2. Pridėkite patarimą. Galite naudoti atributą pavadinimas (pavadinimas), jei norite pridėti papildomą komentarą ar informaciją apie vaizdą. Pvz., Galite ją naudoti norėdami įskaityti nuotraukos autorių. Šis tekstas paprastai rodomas, kai lankytojas užveda pelės žymeklį virš vaizdo.
  3. Sukurkite nuorodą paveikslėlyje. Norėdami, kad vaizdas taptų ir nuoroda, įterpkite atvaizdo kodą į nuorodos žymą . Štai pavyzdys:

Patarimai

  • Nepamirškite į URL įtraukti vaizdo plėtinio (.webp, .gif ir kt.).
  • GIF vaizdai gerai tinka logotipams ar animaciniams filmams; JPEG vaizdai puikiai tinka sudėtingiems vaizdams, pavyzdžiui, nuotraukoms.
  • Daugeliu atvejų patartina naudoti vaizdus su formatais.gif, .jpeg, .webp arba.png. Kiti formatai greičiausiai nebus tinkamai rodomi visose naršyklėse.
  • Laikykite atsarginę vaizdo kopiją savo kompiuteryje.

Įspėjimai

  • Nenaudokite vaizdų įvesdami kito asmens svetainės URL. Tai sunaudoja to asmens interneto pralaidumą, nesukuriant jokių apsilankymų jo svetainėje. Be to, kad vaizdas bus neetiškas, jis išnyks, jei sumažės originali jos svetainė. Jei puslapio autorius tai sužino, jis netgi gali pakeisti vaizdą, kuris rodomas jūsų svetainėje.

Kiti kyriai Kai eate kempinge, gali kilti traumų ir kitų medicininių problemų. Kok geriauia būda pairuošti? Pirmoio pagalbo rinkiny, žinoma! Štai keleta eminių dalykų. Turėkite omenyje tovyklaviečių k...

Kiti kyriai Japonijo virtuvė daugiauia laikoma viena veikiauių paaulyje u šviežia žuvimi, ryžiai ir daržovėmi. Kaip ir bet kokio tipo virtuvėje, vakarieniaujant japonų retorane yra veikų ir mažiau vei...

Įdomu Šiandien