Tumingin sa anumang web page online ngayon at mapapansin mo na ibinabahagi nila ang ilang mga bagay sa karaniwan. Ang isa sa mga nakabahaging katangian na ito ay mga imahe. Ang mga tamang larawan ay nagdaragdag nang labis sa pagtatanghal ng isang website. Ang ilan sa mga imaheng iyon, tulad ng logo ng isang kumpanya, tulungan ang tatak ng site at ikonekta ang digital entity na iyon sa iyong pisikal na kumpanya.
Upang magdagdag ng isang imahe, icon, o graphics sa iyong web page, kailangan mong gamitin ang tag sa HTML code ng isang pahina. Inilagay mo ang tag ng IMG sa iyong HTML kung saan mismo nais mong ipakita ang graphic. Ang web browser na nagre-render ng code ng pahina ay palitan ang tag na ito gamit ang angkop na graphic sa sandaling makita ang pahina. Bumalik sa halimbawa ng logo ng aming kumpanya, narito kung paano mo maidaragdag ang larawang iyon sa iyong site:
Mga Katangian ng Imahe
Sa pagtingin sa HTML code sa itaas, makikita mo na ang elemento ay may kasamang dalawang katangian. Ang bawat isa sa kanila ay kinakailangan para sa larawan.
Ang unang katangian ay ang "src". Ito ay ganap na literal ang file ng imahe na nais mong maipakita sa pahina. Sa aming halimbawa ay gumagamit kami ng isang file na tinatawag na "logo.png". Ito ang graphic na ipapakita ng web browser kapag ini-render ang site.
Mapapansin mo rin na bago ang pangalan ng file na ito, nagdagdag kami ng ilang karagdagang impormasyon, "/ images /". Ito ang landas ng file. Ang unang pasulong na slash ay nagsasabi sa server upang tumingin sa ugat ng direktoryo. Ito ay pagkatapos ay tumingin para sa isang folder na tinatawag na "mga imahe" at sa wakas ang file na tinatawag na "logo.png". Ang paggamit ng isang folder na tinatawag na "mga larawan" upang iimbak ang lahat ng graphics ng isang site ay isang medyo pangkaraniwang kasanayan, ngunit ang iyong path ng file ay mababago sa anumang may kaugnayan para sa iyong site.
Ang ikalawang kinakailangang katangian ay ang "alt" na teksto. Ito ang "alternatibong teksto" na ipinapakita kung ang imahe ay nabigo upang mai-load para sa ilang kadahilanan. Ang tekstong ito, na sa aming halimbawa ay nagbabasa ng "Logo ng Kumpanya" ay ipapakita kung ang imahen ay nabigo. Bakit mangyayari iyon? Iba't ibang dahilan:
- Maling landas ng file
- Maling pangalan ng file o maling pagbaybay
- Error sa paghahatid
- Tinanggal ang file mula sa server
Ang mga ito ay ilang mga posibilidad para sa kung bakit ang aming tinukoy na imahe ay maaaring nawawala. Sa mga kasong ito, ang aming teksto ng alt ay ipapakita sa halip.
Ang teksto ng alt ay ginagamit din ng software ng screen reader upang "basahin" ang imahe sa isang bisita na may kapansanan sa pangitain. Dahil hindi nila makita ang larawan tulad ng ginagawa namin, ang tekstong ito ay nagpapaalam sa kanila kung ano mismo ang imahen. Ito ang dahilan kung bakit kailangan ang alt text at kung bakit dapat malinaw na sabihin kung ano ang imahe!
Ang isang karaniwang hindi pagkakaunawaan ng alt teksto ay na ito ay sinadya para sa mga layunin ng search engine. Hindi ito totoo. Habang binabasa ng Google at iba pang mga search engine ang tekstong ito upang matukoy kung ano ang imahe (tandaan, hindi nila maaaring "makita" ang iyong imahe alinman), hindi ka dapat sumulat alt teksto upang mag-apela lamang sa mga search engine. Ang may-akda ng malinaw na alt text na sinadya para sa mga tao. Kung maaari mo ring idagdag ang ilang mga keyword sa tag na apila sa mga search engine, iyon ay mabuti, ngunit palaging tiyakin na ang alt text ay naglilingkod sa pangunahing layunin nito sa pamamagitan ng pagsasabi kung ano ang imahe para sa sinuman na hindi nakikita ang graphics file.
Iba Pang Katangian
Ang tag ng IMG ay mayroon ding dalawang iba pang mga katangian na maaari mong makita na ginagamit kapag naglagay ka ng isang graphic sa iyong web page - ang lapad at ang taas. Halimbawa, kung gumagamit ka ng WYSIWYG na editor tulad ng Dreamweaver, awtomatiko itong idinadagdag ang impormasyong ito para sa iyo. Narito ang isang halimbawa:
Ang katangian ng WIDTH at HEIGHT ay nagsasabi sa browser na laki ng imahe. Alam nang eksakto ng browser kung gaano kalaking espasyo sa layout ang ilaan, at maaari itong lumipat sa susunod na elemento sa pahina habang ang mga pag-download ng imahe. Ang problema sa paggamit ng impormasyong ito sa iyong HTML ay maaaring hindi mo laging nais na ipakita ang iyong larawan sa eksaktong sukat na iyon. Halimbawa, kung mayroon kang isang tumutugon na website na ang mga pagbabago sa sizing ay batay sa isang screen ng bisita at sukat ng device, gusto mo rin na ang iyong mga imahe ay magiging kakayahang umangkop. Kung sinasabi mo sa iyong HTML kung ano ang nakapirming sukat, matutuklasan mo itong napakahirap upang i-override ang mga tumutugon na mga query sa media ng CSS . Para sa kadahilanang ito, at upang mapanatili ang paghihiwalay ng estilo (CSS) at istraktura (HTML), inirerekomenda na HINDI kang magdagdag ng mga katangian ng lapad at taas sa iyong HTML code.
Isang paalala: Kung iiwan mo ang mga tagubilin sa sizing na ito at hindi tukuyin ang isang laki sa CSS, ipapakita ng browser ang larawan sa default, katutubong laki nito.
Ini-edit ni Jeremy Girard