Pridėkite vaizdą su HTML

Autorius: Christy White
Kūrybos Data: 4 Gegužė 2021
Atnaujinimo Data: 1 Liepos Mėn 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 savo svetainės ar socialinio tinklo profilio yra puikus būdas pasipuošti savo tinklalapiu. HTML („HyperText Markup Language“) turi daug funkcijų kuriant tinklalapius, tačiau, laimei, kodas, kurį reikia pridėti vaizdams, nėra per sunkus.

Žengti

1 metodas iš 1: Vaizdų įterpimas naudojant HTML

  1. Įkelkite savo atvaizdą į nemokamą prieglobos svetainę, pvz., „Photobucket“ ar „TinyPic“, kuri leidžia greitai susieti. Greitas susiejimas leidžia tiesiogiai susieti vaizdą su svetainės serveriu; kai kurie paslaugų teikėjai tai uždraudė, nes karštasis susiejimas naudoja jų pralaidumą ir užima vietą jų serveriuose.
    • Jei turite mokamą prieglobos paskyrą, įkelkite vaizdus tiesiai į serverį, kuriame yra jūsų svetainė. Tai visada yra patikimesnė nei nemokama svetainė ir nebūtinai turi būti brangi.
  2. Atidarykite naują dokumentą teksto rengyklėje (pvz.,, Notepad / Notepad) arba atidarykite savo svetainės / profilio puslapį, kuriame galite tiesiogiai pakeisti HTML kodą.
  3. Pradėkite nuo img žyma. img žyma tuščia, vadinasi, uždarymo žymos nereikia. Tačiau norint patvirtinti XHTML, vis tiek prieš jį galite įdėti tarpą ir pasvirąjį brūkšnį geresnis negu ženklas.
    • img />
  4. Yra daug galimų atributų, tačiau būtinas tik vienas:src. Tai yra jūsų paveikslėlio vieta / adresas arba URL.
    • img src = "Vaizdo URL" />
  5. Toliau jūs turite alt pridėti atributą. Tai rodo alternatyvų tekstą tuo atveju, jei nepavyksta įkelti vaizdo. Tai taip pat yra silpnaregių paslauga, naudojanti ekrano skaitytuvus.
    • Jei užvedate žymeklį virš paveikslėlio, šis tekstas taip pat rodomas kaip patarimas, tačiau taip yra tik „Internet Explorer“. Sprendimas, veikiantis visose naršyklėse („Firefox“) ir kt.) yra jai pavadinimas atributas, naudojamas kartu su alt. (Pastarojo galite praleisti, jei nenorite, kad paveikslėlyje būtų patarimas.)

Pavyzdžiui:img src = "Vaizdo URL" alt = "Tik tuo atveju" title = "Patarimas" />


  1. Dabar paveikslėlio dydį galite nurodyti naudodami ūgio ir plotis atributą ir nurodant taškus ar procentus. Atminkite, kad tokiu būdu pakeitus dydį keičiamas tik vaizdo dydis, o ne paties vaizdo dydis. Norint sutrumpinti atvaizdo įkėlimo laiką, geriau, ypač naudojant didelius vaizdus, ​​iš anksto pakeisti jų dydį naudojant nuotraukų redagavimo programinę įrangą arba naudojant internetinę paslaugą, pvz., PicResize.com.
    • img src = "Vaizdo URL" alt = "Tik tuo atveju" title = "Patarimas" height = "50%" width = "50%" />
    • img src = "Vaizdo URL" alt = "Tik tuo atveju" title = "Patarimas" height = "25px" width = "50px" />

Patarimai

  • Šių atributų vertė pateikiama pikseliais arba procentais, nuo 1 iki 100%.
  • Vaizdą galima įdėti bet kur tinklalapyje, naudojant įvairius formatavimo atributus, tokius kaip viršuje, apačioje, viduryje, dešinėje, kairėje ir kt.
  • Atributas „hspace“ naudojamas horizontaliai erdvei įterpti į kairę ir į dešinę atvaizdą, o „vspace“ atributas naudojamas tam, kad atsirastų vietos vaizdų ir kitų objektų viršuje ir apačioje.
  • Nepasiduokite per daug vaizdams. Tai atrodo netvarkinga ir neprofesionalu.
  • GIF vaizdai tinka logotipams ar animaciniams filmams, tačiau šis failo tipas yra mažiau tinkamas nuotraukoms ir kitiems daugiaspalviams vaizdams.
    • GIF vaizdai palaiko tik 8 bitų spalvas, daugiausia 256 spalvas. Todėl reikia tikėtis, kad 16 ar 24 bitų spalvotos iliustracijos ar nuotraukos atkūrimas nebus toks geras.
    • GIF vaizdai taip pat palaiko skaidrumą. Galimas vienas šiek tiek skaidrumo, o tai reiškia, kad viena spalva gali būti skaidri.
    • Persipynimą taip pat palaiko GIF vaizdai, o tai reiškia, kad svetainės lankytojas, prieš pilnai įkeldamas, supras, kaip atrodys vaizdas.
    • GIF formatas taip pat palaiko animaciją.
  • Įsitikinkite, kad URL nurodytas vaizdo failo formatas (.webp .gif ir kt.).

Įspėjimai

  • Negalima „Hotlink“!