Kaip paprastai įterpti vaizdus į HTML

Vaizdų įtraukimas yra pagrindinė svetainių kūrimo dalis. Nors HTML tarnauja tavo puslapio struktūrai, vaizdai padaro turinį vizualiai patrauklų ir žavingą. Šiame vadove parodysiu, kaip efektyviai integruoti vaizdus į savo HTML projektus, kad tavo svetainės taptų gyvos.

Pagrindinės įžvalgos

• Išmokite teisingai naudoti žymę.
• Atkreipkite dėmesį į vaizdo dydžius, kad pagerintumėte įkėlimo greitį.
• Laikykitės teisinių vaizdų naudojimo reikalavimų.

Žingsnis po žingsnio vaizdų integravimo vadovas

1. Paruoškite savo vaizdo failą

Norėdami įterpti vaizdą į projektą, jums reikia atitinkamo vaizdo failo. Šiame pavyzdyje naudojame failą pavadinimu rührei.jpg. Šis failas turėtų būti išsaugotas tame pačiame kataloge kaip ir jūsų HTML failas. Jei vaizdas nėra pasiekiamas arba yra išsaugotas kitoje vietoje, turite atitinkamai pakoreguoti kelią.

2. žymė

Pagrindinė HTML žymė, kurią reikia naudoti įtraukiant vaizdus, yra žymė. Žymė deklaruojama taip: . Attributas src nurodo jūsų vaizdo failo URL arba kelią. Alt atributas aprašo vaizdą, kas ne tik svarbu SEO, bet ir naudinga vartotojams, naudojantiems ekranų skaitytuvus.

3. Priderinkite vaizdo dydį

Vaizdas, kurį norite įterpti, tikriausiai yra didesnis už norimą svetainėje. Norėdami priderinti vaizdo dydį, galite naudoti atributus width (plotis) ir height (aukštis).

Reguliuodami vaizdo dydį, įsitikinkite, kad sumažinate ir failo dydį, kad svetainės įkėlimo laikas nebūtų veltui pailgintas.

4. Atnaujinkite puslapį

Įtraukę vaizdą ir pakoregavę atributus, atnaujinkite svetainę, kad įsitikintumėte, ar vaizdas rodoma teisingai. Dažnai vaizdą matote, tačiau jo rodymas gali būti neoptimalus. Patikrinkite vaizdo matmenis ir prireikus pakoreguokite juos toliau.

5. Išnagrinėkite elementą

Naudokite naršyklės kūrėjų įrankius, kad išsamiau patikrintumėte elementą. Dešiniuoju pelės mygtuku spustelėkite vaizdą savo svetainėje ir pasirinkite „Išnagrinėti elementą“. Taip galite įsitikinti, kad plotis ir aukštis rodomi teisingai ir kad jūsų žymės savybės priimtos pagal nustatytus atributus.

6. Atkreipkite dėmesį į katalogų struktūrą

Jei norite, galite sukurti katalogų struktūrą. Pavyzdžiui, galite sukurti poaplankį pavadinimu Images savo vaizdams. Tokiu atveju src atributo kelią reikia atitinkamai pakoreguoti.

Logiška aplankų struktūra ne tik padeda jums geriau tvarkyti projektą, bet ir pagerina įkėlimo laiką, nes atitinkamos bylos randamos greičiau.

7. Atkreipkite dėmesį į teisinius reikalavimus

Paskutinis svarbus dalykas – teisinė vaizdų naudojimo pusė. Įsitikinkite, kad turite teisę naudoti vaizdą, ir, jei reikia, nurodykite šaltinį ir autorių teises. Tai užtikrina, kad nepažeisite autorinių teisių ir išvengsite galimų teisinių pasekmių.

8. CSS integracija stilingam dizainui

Jei norite integruoti vaizdus į dizainą, galite naudoti CSS. Tai leidžia stilizuoti vaizdus ir valdyti jų išdėstymą, pavyzdžiui, apjuosti tekstu. Tai pažangesnė technika, padedanti kurti estetiškai patrauklią svetainę.

Santrauka

Šis vadovas parodė, kaip efektyviai naudoti žymę, priderinti vaizdo dydžius ir laikytis teisinių reikalavimų. Tinkamas šių technikų naudojimas pagerina vartotojo patirtį jūsų svetainėje ir SEO rodiklius.