Dodajte povezavo do slike v HTML-ju

Avtor: Christy White
Datum Ustvarjanja: 12 Maj 2021
Datum Posodobitve: 1 Julij. 2024
Anonim
Африканская тематика-МЕГА мастер-класс!  #DIY #Африканскийдекор #DIYмаскаизкартона
Video.: Африканская тематика-МЕГА мастер-класс! #DIY #Африканскийдекор #DIYмаскаизкартона

Vsebina

Z eno vrstico kode HTML lahko sliko, ki jo je mogoče klikniti, dodate na skoraj vsako spletno mesto. Za to bosta potrebni dve stvari. Za sliko potrebujete URL in tudi URL spletnega mesta.

Stopati

1. način od 2: Napišite kodo HTML

  1. Ustvarite datoteko HTML. Odprite urejevalnik besedil in nato ustvarite novo datoteko. Datoteko shranite kot index.html.
      • Uporabite lahko kateri koli urejevalnik besedil, tudi preproste urejevalnike besedil v sistemih Windows (Notepad) in Mac OS X (TextEdit).
      • Če želite uporabiti urejevalnik besedil, namenjen za delo s HTML-jem, kliknite tukaj, da prenesete Atom, urejevalnik besedil za Windows, Mac OS X in Linux.
      • Če uporabljate TextEdit, kliknite meni Oblika, preden ustvarite datoteko HTML, nato pa še Naredi navadno besedilo. Ta nastavitev zagotavlja pravilno nalaganje datoteke HTML v spletnem brskalniku.
      • Urejevalniki besedil, kot je Microsoft Word, v resnici niso dobri za pisanje HTML-jev, ker dodajo nevidne znake in oblikovanje, ki lahko poškoduje datoteko HTML in jo v spletnem brskalniku prikaže nepravilno.
  2. Kopirajte in prilepite standardno kodo HTML. Izberite in kopirajte spodnjo kodo HTML in jo prilepite v odprti index.html.

    a href = "target url"> img src = "url slike" /> / a>

  3. Poiščite URL slike. Poiščite sliko v spletu, jo kliknite z desno miškino tipko in (odvisno od brskalnika) kliknite Kopiraj URL slike, Kopiraj naslov slike ali Kopiraj lokacijo slike.
      • Firefox in Internet Explorer uporabljata mesto kopiranja slike. Chrome uporablja URL za kopiranje slike. Safari uporablja Copy Image Address.
  4. Dodajte URL slike. V datoteki index.html kliknite in povlecite, da z miško izberete URL slike, nato pritisnite CTRL + V, da prilepite URL.
  5. Dodajte ciljni URL. V index.html izbrišite ciljni URL in vnesite https://www.startpage.com.
      • Kot ciljni URL lahko uporabite kateri koli URL.
  6. Shranite datoteko HTML.
  7. Odprite datoteko HTML v spletnem brskalniku. Z desno miškino tipko kliknite index.html in nato odprite to datoteko v izbranem spletnem brskalniku.
      • Če se brskalnik odpre, vendar slike ne vidite, se prepričajte, da ste pravilno zapisali ime slikovne datoteke v datoteki index.html.
      • Ko se brskalnik odpre, vendar namesto slike v ozadju vidite kodo HTML, se index.html shrani kot datoteka .rtf (datoteka z bogatim besedilom). Poskusite urediti datoteko HTML v drugem urejevalniku besedil.

2. metoda od 2: Razumevanje kode HTML

  1. Razumevanje sidrne oznake. Koda HTML je sestavljena iz odpiranja in zapiranja oznak. Oznaka a href = ""> je začetna, / a> pa končna. To se imenuje sidrna oznaka in se uporablja za dodajanje povezav do spletne strani.
    • The a brskalniku pove, naj ustvari povezavo. The href je okrajšava za referenco HTML, = brskalniku pove, naj spremeni vse med ’ ’ ustvari povezavo. Med navednice je mogoče postaviti kateri koli URL.
    • The / a> brskalniku sporoči, da je sidrna oznaka zaprta.
    • Ko dodate besedilo med a href = ""> in / a> to besedilo postane klikljiva povezava na spletni strani. Na primer: a href = "https://www.google.com"> Google / a> ustvari povezavo do Googla.
  2. Razumevanje slikovne oznake. Oznaka img> je zaprta oznaka. Zaprete ga lahko z img src = "" /> ali img src = ""> / img>.
    • The img tag brskalniku pove, naj prikaže sliko. The src je okrajšava za source, de = brskalniku pove, naj izbriše vse med ’ ’ in sliko naložite s tega mesta.
    • The /> brskalniku pove, naj zapre slikovno oznako.
    • Na primer: {samp [} dobi sliko s tega URL-ja, nato pa jo prikaže v spletnem brskalniku.
  3. Uporabite to kodo povsod. Zdaj, ko poznate to kodo, jo lahko a href = "target url"> img src = "url slike" /> / a> za dodajanje klikljivih slik na katero koli spletno stran s kodo HTML.