Dodajte sliko z HTML-jem

Avtor: Christy White
Datum Ustvarjanja: 4 Maj 2021
Datum Posodobitve: 1 Julij. 2024
Anonim
Полное руководство по Google Forms - универсальный инструмент для опросов и сбора данных онлайн!
Video.: Полное руководство по Google Forms - универсальный инструмент для опросов и сбора данных онлайн!

Vsebina

Dodajanje slik na vaše spletno mesto ali profil v družabnem omrežju je odličen način za oblačenje vaše spletne strani. HTML (HyperText Markup Language) ima veliko funkcij za ustvarjanje spletnih strani, vendar na srečo koda, ki jo potrebujete za dodajanje slik, ni pretežka.

Stopati

1. način od 1: vstavljanje slik v HTML

  1. Sliko naložite na brezplačno spletno mesto za gostovanje, na primer Photobucket ali TinyPic, ki omogoča vroče povezovanje. Vroče povezovanje omogoča neposredno povezavo slike s spletnim strežnikom; nekateri ponudniki so to prepovedali, ker vroče povezovanje uporablja njihovo pasovno širino in zavzema prostor na njihovih strežnikih.
    • Če imate plačljiv račun za gostovanje, naložite slike neposredno na strežnik, kjer je vaše spletno mesto. To je vedno bolj zanesljivo kot brezplačno spletno mesto in sploh ni nujno, da je drago.
  2. Odprite nov dokument v urejevalniku besedil (npr., Beležnica / Beležnica) ali odprite stran na svojem spletnem mestu / profilu, kjer lahko neposredno spremenite kodo HTML.
  3. Začnite z img oznaka. The img tag je prazen, kar pomeni, da zaključna oznaka ni potrebna. Za preverjanje XHTML pa lahko še vedno postavite presledek in poševnico večji kot znak.
    • img />
  4. Atributov je na voljo veliko, vendar je potreben le en:src. To je lokacija / naslov ali tudi URL vaše slike.
    • img src = "URL slike" />
  5. Nato moraš višina dodaj atribut. To prikaže nadomestno besedilo, če se slika ne naloži. To je tudi storitev za slabovidne, ki uporablja bralnike zaslona.
    • Če miškin kazalec premaknete nad sliko, je to besedilo prikazano tudi kot namig, vendar je to le v Internet Explorerju. Rešitev, ki deluje z vsemi brskalniki (Firefox et al.) je zanjo naslov atribut za uporabo poleg višina. (Slednjega lahko izpustite, če ne želite, da ima slika opis orodja.)

Kot primer:img src = "URL slike" alt = "Za vsak slučaj" title = "Tooltip" />


  1. Zdaj lahko označite velikost slike s višina in premer atribut in z določitvijo pikslov ali odstotka. Upoštevajte, da spreminjanje velikosti na ta način spreminja samo velikost pogleda, ne pa tudi velikosti same slike. Če želite skrajšati čas nalaganja slike, je bolje, zlasti pri velikih slikah, jih vnaprej spremeniti s programsko opremo za urejanje fotografij ali s spletno storitvijo, kot je PicResize.com.
    • img src = "URL slike" alt = "Za vsak slučaj" title = "Tooltip" height = "50%" width = "50%" />
    • img src = "URL slike" alt = "Za vsak slučaj" title = "Tooltip" height = "25px" width = "50px" />

Nasveti

  • Vrednost teh atributov je podana v slikovnih pikah ali v odstotkih od 1 do 100%.
  • Sliko lahko postavite kamor koli na spletno stran z različnimi atributi formatiranja, kot so zgornji, spodnji, srednji, desni, levi itd.
  • Atribut hspace se uporablja za vstavljanje vodoravnega presledka na levi in ​​desni strani slike, atribut vspace pa za ustvarjanje prostora na vrhu in na dnu slik in drugih predmetov.
  • Ne razvajajte se preveč s slikami. To je videti grdo in neprofesionalno.
  • Slike GIF so primerne za logotipe ali risanke, vendar je ta vrsta datoteke manj primerna za fotografije in druge slike z več barvami.
    • Slike GIF podpirajo samo 8-bitno barvo z največ 256 barvami za sliko. Zato je pričakovati, da reprodukcija 16- ali 24-bitne barvne ilustracije ali fotografije ne bo tako dobra.
    • Slike GIF podpirajo tudi preglednost. Možen je en košček prosojnosti, kar pomeni, da lahko eno barvo naredimo prosojno.
    • Prepletanje podpirajo tudi slike GIF, kar pomeni, da bo obiskovalec spletnega mesta dobil idejo, kako bo videti slika, preden bo popolnoma naložena.
    • Oblika GIF podpira tudi animacijo.
  • Prepričajte se, da je v URL-ju zapisana oblika datoteke slike (.webp .gif itd.).

Opozorila

  • Ne Hotlink!