Para sa Pagdaragdag ng Mga Larawan sa Markdown:
Ang syntax ay ibinigay sa ibaba.
Para sa Pagbabago ng Laki ng Larawan sa Markdown:
Para sa pagbabago ng laki ng larawan sa Markdown, ginagamit namin ang ' ' na tag ng HTML. Tanging ang tag na ito ay tumutulong sa pagbabago ng laki ng larawan sa Markdown at ang syntax ng tag na '
' na ito ay ibinigay sa ibaba.
< img src = 'pangalan ng larawan' lahat = “” lapad = 'halaga' taas = 'halaga' >
Maaari naming baguhin ang laki ng imahe sa pamamagitan ng pagtatakda ng mga halaga ng lapad at taas sa mga numero pati na rin sa mga porsyento. Magagamit din natin ang style attribute sa tag na “ ” na ito para sa pagbabago ng laki ng larawan sa Markdown.
Halimbawa # 01:
Ginagamit namin ang Visual Studio Code para sa pagsasagawa ng mga Markdown code. Para sa mga Markdown code, kailangan nating buksan ang parehong text editor pati na rin ang preview window. Sa text editor, kailangan nating idagdag ang input at ang output ay makukuha sa preview window. Sa text editor, idinagdag muna namin ang larawan sa Markdown sa pamamagitan ng paglalagay ng “!” simbolo at pagkatapos ay magdagdag ng mga square bracket kung saan idinadagdag namin ang 'Alt text'. Ngayon, idinaragdag namin ang landas ng imahe.
Ipinasok namin ang pangalan ng imahe kasama ang extension nito dahil parehong naka-save ang code at ang imahe sa parehong direktoryo. Kaya, idinagdag lang namin ang pangalan dito na 'cloud.png'. Pagkatapos, idinagdag namin ang teksto na 'Cloud Image' at ito ang teksto na nagpapakita lamang kapag ang mouseover. Ngayon, idinagdag ang larawan at makikita rin natin ang larawang ito sa preview window.
Ang imahe ng ulap ay ipinapakita sa ibaba habang idinagdag namin ang larawang ito sa Markdown code na ipinapakita sa itaas.
Halimbawa # 02:
Ngayon, binabago namin ang laki ng larawang ito sa pamamagitan ng paggamit ng tag na “ ”. Una, ipinasok namin ang 'src' kung saan idinagdag ang pangalan o landas ng imahe. Pagkatapos nito, inilalagay namin ang 'alt' at ayusin ang 'Cloud Image'. Inayos namin ang 'lapad' ng imahe sa '230'. Ang 'taas' ay nababagay sa '300'. Idinaragdag din namin ang 'title' sa tag na '
' na ito at ang value ng 'title' na ito ay 'Cloud title'. Ngayon, ang laki ng imahe ay binago. Maaari mong makita ang binagong laki ng larawan sa preview window.
Ang laki ng larawan sa kinalabasang ito ay binago at ang 'lapad' ng larawan ay '230' at ang 'taas' ay '300'. Ito ay dahil inayos namin ang lapad at taas na ito sa Markdown code.
Halimbawa # 03:
Maaari rin nating baguhin ang 'lapad' at 'taas' ng larawan sa pamamagitan ng paglalagay ng kanilang mga halaga sa mga porsyento. Matapos idagdag ang pangalan o landas ng imahe at ayusin ang 'alt' sa 'Cloud Image', itinakda namin ang 'lapad' at ang 'taas' ng imahe sa '50%'. Pagkatapos, idagdag ang 'pamagat' at isara ang tag na ito.
Narito ang larawan na ang laki ay binago sa pamamagitan ng paggamit ng tag na “ ”. Ang taas ng imahe, pati na rin ang lapad, ay '50%'.
Halimbawa # 04:
Ngayon, ginagamit namin ang attribute na 'style' sa tag na ' ' na ito para sa pagbabago ng laki ng larawan sa Markdown. Dapat nating idagdag ang pangalan ng larawan at pagkatapos ay ang katangiang 'alt'. Pagkatapos nito, inilalagay namin ang katangiang 'estilo' at idinagdag ang 'lapad at taas' bilang mga halaga nito. Ang 'lapad' na itinakda namin ay nasa mga pixel na '500px' at ang 'taas' ay '400px'. Ngayon, ang laki ng imahe ay aayusin nang naaayon.
Ang laki ng larawan sa resultang ito ay na-update; ang 'lapad' nito ay '500px' na ngayon at ang 'taas' nito ay '400px'. Nakikita ito bilang resulta ng Markdown code na ibinigay sa itaas kung saan inayos namin ang lapad at taas sa attribute ng istilo.
Halimbawa # 05:
Nagdaragdag kami ng isa pang larawan. Ngunit sa Markdown code na ito, hindi namin binabago ang laki ng larawan. Ang laki ng larawan ay mababago lamang kapag ginamit namin ang tag na “ ”. Inilalagay namin ang '!' at pagkatapos ay idagdag ang teksto sa loob ng mga square bracket na 'Sun Image'. Pagkatapos isara ang mga square bracket, inilalagay namin ang mga panaklong kung saan namin ipinasok ang pangalan ng larawan na 'New_sun.png' at pagkatapos ay idagdag ang teksto na ipapakita sa mouseover. Ang orihinal na laki ng larawan ay makikita sa kinalabasan.
Ang larawan ng araw ay ipinapakita habang idinagdag namin ang larawang ito sa Markdown code. Gayundin, nakikita ang orihinal na laki ng larawan dahil hindi namin maisasaayos ang laki ng larawan nang hindi ginagamit ang tag na ' '.
Halimbawa # 06:
Sa pamamagitan ng paggamit ng tag na ' ', binabago namin ngayon ang laki ng larawang ito. Una, idinaragdag namin ang pangalan o landas ng imahe na ang laki ay gusto naming baguhin sa field na 'src'. Ang 'lapad' at 'taas' ng larawan ay parehong napalitan ng '300'. Ang laki ng larawan ay nagbago na ngayon. Ang preview window ay nagpapakita ng bagong laki ng larawan.
Ang lapad at taas ng larawan ay parehong binago sa '300'.
Halimbawa # 07:
Sa pamamagitan ng pagtatakda ng mga value ng 'lapad' at 'taas' ng larawan sa mga porsyento, maaari naming madaling baguhin ang mga dimensyong ito. Pareho naming inayos ang 'lapad' at 'taas' ng larawan sa '40%' at pagkatapos ay isinara ang tag na ito.
Narito ang imahe na may 40% na taas at 40% din sa lapad nito. Idinagdag namin ang lapad at taas na ito sa loob ng tag na ' ' pagkatapos idagdag ang pangalan ng larawan.
Halimbawa # 08:
Ngayon, ginagamit namin ang attribute na 'style' sa tag na ' ' para baguhin ang laki ng larawan sa Markdown. Nagdagdag kami ng 'lapad at taas' bilang mga value sa attribute na 'style' pagkatapos idagdag ang pangalan ng imahe at ang attribute na 'alt'. Ang 'lapad' na tinukoy namin ay '450px', habang ang 'taas' ay isinasaayos din sa '450px.' Ang laki ng larawan ay magbabago na ngayon nang naaangkop ayon sa mga bagong halagang ito ng lapad at taas.
Ngayon, ang resulta ng code na ito ay ipinapakita din sa preview window na ipinapakita sa ibaba. Parehong '450px' ang lapad at taas ng larawang ito sa kinalabasan sa ibaba.
Konklusyon:
Na-explore namin ang konsepto ng pagdaragdag ng mga larawan nang detalyado sa gabay na ito at na-explore din namin kung paano baguhin ang laki ng imahe sa Markdown din. Idinagdag namin ang mga larawan sa Markdown at binago ang laki ng mga ito sa tulong ng tag na ' ' at ipinakita kung paano gawin ang lahat ng ito sa Markdown. Binago namin ang laki ng imahe sa pamamagitan ng paglalagay ng mga halaga ng lapad at taas sa mga numero pati na rin sa mga porsyento. Ginamit din namin ang style attribute sa '
' na tag para sa pag-update o pagbabago ng laki ng larawan sa Markdown.