Paano Mag-embed Ng Isang Imahe Sa Isang Website

Talaan ng mga Nilalaman:

Paano Mag-embed Ng Isang Imahe Sa Isang Website
Paano Mag-embed Ng Isang Imahe Sa Isang Website

Video: Paano Mag-embed Ng Isang Imahe Sa Isang Website

Video: Paano Mag-embed Ng Isang Imahe Sa Isang Website
Video: HTML Tutorial 20 Tagalog - ADDING LINK TO IMAGE 2024, Nobyembre
Anonim

Lahat ng nakikita ng bisita sa mga pahina ng site ay ipinapakita ng browser batay sa detalyadong mga tagubiling ipinadala sa kanya ng server. Ang mga tagubiling ito ay tinatawag na html-code ng pahina at binubuo ng magkakahiwalay na "mga tag" na naglalarawan sa uri, hitsura at lokasyon ng bawat elemento nang paisa-isa. Upang mailagay ang anumang bagong elemento (halimbawa, isang imahe) sa isang pahina, kailangan mong magdagdag ng kaukulang tagubilin - isang tag - sa source code nito. Isaalang-alang ang pinakamadaling paraan upang magawa ito.

Pagpasok ng isang imahe sa isang pahina
Pagpasok ng isang imahe sa isang pahina

Panuto

Hakbang 1

Kung gumagamit ka ng anumang uri ng system ng pamamahala ng nilalaman, malamang na may kasamang isang editor ng pahina. Una, kailangan mong buksan ang nais na pahina sa editor na ito. Dagdag - posible ang mga pagpipilian. Sa pinakamagandang kaso, ang editor ng pahina ay magkakaroon ng "visual mode", sa madaling salita - "WYSIWYG mode" (What You See Is What You Get - "kung ano ang nakikita mo ay nakukuha mo"). Sa mode na ito, hindi mo na kailangang harapin ang orihinal na html-code sa lahat! Ang pahina sa editor ay magkapareho ng hitsura sa site, sapat na upang sundutin ang mouse sa nais na lugar at pindutin ang pindutan na "ipasok ang imahe" sa panel ng editor.

Hakbang 2

Bilang isang resulta, magbubukas ang isang dialog box kung saan kailangan mong piliin ang nais na larawan. Kung hindi mo pa ito na-upload, mayroon ding isang pindutan para sa pagpili ng isang imahe sa iyong computer at i-upload ito sa server. Bilang karagdagan, sa dayalogo na ito maaari mong itakda ang kulay at lapad ng frame sa paligid ng imahe, ang distansya at kulay ng pagpuno sa pagitan ng frame at ng imahe, ang teksto para sa tooltip. Hindi kinakailangan na tukuyin ang mga sukat dito, ngunit sa mga kadahilanan ng pagpapabilis ng paglo-load ng pahina at upang maiwasan ang pagbaluktot ng disenyo, mas mabuti pa ring gawin ito. Kapag napunan ang lahat ng kinakailangang larangan ng dayalogo, i-click ang "OK" at pagkatapos ay i-save ang na-edit na pahina.

Ipasok ang Image Dialog Box
Ipasok ang Image Dialog Box

Hakbang 3

Dahil sa ang katunayan na walang solong pamantayan para sa mga control system, ang pamamaraan para sa pagpasok ng isang imahe sa visual mode ng iyong system ay maaaring naiiba nang bahagya, ngunit ang prinsipyo ay magkatulad. Sa parehong dahilan, maaaring hindi lumitaw ang WYSIWYG mode sa system ng pamamahala ng iyong site. Pagkatapos kailangan mo pa ring i-edit ang source code ng pahina sa HTML (HyperText Markup Language - "hypertext markup language"). Kakailanganin mong maglagay ng isang tag sa tamang lugar sa code na nagsasabi sa browser na ipakita ang imahe dito. Sa pinakasimpleng form nito, dapat ganito ang hitsura: Narito ang "kamag-anak na address" ng imahe - sa address na ito dapat makipag-ugnay ang browser sa server upang makuha ang file ng imahe mula rito. Kung ang address ay kamag-anak, pagkatapos ay ipalagay ng browser na ang file ay nasa parehong folder ng server tulad ng pahina mismo (o sa isang subfolder). Ngunit, upang hindi mapagkamalan, mas mahusay na tukuyin ang "absolute address" - halimbawa, tulad nito: Naturally, upang makita at maipadala ng server ang imahe sa browser, dapat itong mai-upload sa tinukoy lokasyon Ang pinakamadaling paraan upang gawin ito ay sa pamamagitan ng file manager, na nasa bawat system ng pamamahala ng nilalaman, pati na rin sa control panel ng iyong kumpanya sa pagho-host. Maaari mo ring gawin ito gamit ang FTP-protocol (File Transfer Protocol - "file transfer protocol"), gamit ang isang espesyal na programa - FTP-client. Marami sa kanila, kapwa bayad at libre - halimbawa, Cute FTP, FlashFXP, WS FTP, atbp. Ngunit, syempre, magtatagal ang pag-install, mastering at pag-configure ng programa, kaya't isang file manager para sa pag-download ng lahat ng kailangan mo. ang isang browser ay isang mas madaling pagpipilian.

Hakbang 4

Bilang karagdagan sa address sa html-tag ng imahe, maaari mong tukuyin ang karagdagang impormasyon - "mga katangian" ng tag. Halimbawa, ang katangiang alt="Imahe" ay naglalaman ng teksto para sa tooltip na pop up kapag pinapag-hover mo ang cursor ng mouse sa imahe: Maaari itong mapalitan ng - pamagat na katangian: - Ang laki ng rektanggulo kung saan dapat mag-browser ipakita ang imahe ay itinakda ng lapad at taas ng mga katangian: - Ang katangian ng hangganan ay tumutukoy sa lapad ng hangganan sa paligid ng imahe (sa mga pixel): Kung ang imahe ay ginawang isang link, ang browser ay gumuhit ng isang asul na hangganan sa paligid nito. Upang mapupuksa ito, itakda ang halaga ng hangganan sa zero: - Ang iba pang dalawang mga katangian ay naglalaman ng impormasyon tungkol sa dami ng pagkakabitin ng larawan mula sa mga katabing elemento (mula sa mga linya ng teksto, iba pang mga larawan, atbp.) - Itinatakda ng hspace ang laki ng pahalang nang pahalang (kaliwa at kanan), vspace - patayo (ibaba at itaas):

Inirerekumendang: