Gumamit ng Mga Font, Mga Border, at Mga Larawan upang Palamutihan Mga Mga Pangunahin
Ang mga headline ay karaniwang sa karamihan sa mga web page. Sa katunayan, ang halos anumang dokumentong teksto ay may kaugaliang magkaroon ng kahit isang headline upang malaman mo ang pamagat ng iyong binabasa. Ang mga headline na ito ay naka-code gamit ang mga elemento ng heading ng HTML - h1, h2, h3, h4, h5, at h6.
Sa ilang mga site, maaari mong makita na ang mga headline ay naka-code nang hindi gumagamit ng mga elementong ito. Sa halip, ang mga headline ay maaaring gumamit ng mga talata na may partikular na mga katangiang klase na idinagdag sa kanila, o divisions sa mga elemento ng klase. Ang dahilan kung bakit madalas kong marinig ang tungkol sa maling kaugalian na ito ay ang taga-disenyo ay "hindi gusto ang hitsura ng mga heading". Bilang default, ang mga heading ay ipinapakita nang naka-bold at mas malaki ang laki nito, lalo na ang h1 at h2 na mga elemento na ipinapakita sa mas malaking sukat ng font kaysa sa natitirang bahagi ng teksto ng isang pahina. Tandaan na ito ay lamang ang default na hitsura ng mga sangkap na ito! Gamit ang CSS, maaari kang gumawa ng heading tumingin gayunpaman gusto mo! Maaari mong baguhin ang laki ng font, alisin ang naka-bold, at marami pang iba. Ang mga pamagat ay ang tamang paraan upang i-code ang mga headline ng pahina. Narito ang ilang mga dahilan kung bakit.
Bakit Gamitin ang Heading Tags Sa halip na DIVs and Styling
Search Engine Tulad ng Heading Tags
Ito ang pinakamahusay na dahilan upang magamit ang mga pamagat, at gamitin ang mga ito sa tamang pagkakasunud-sunod (ie h1, pagkatapos h2, pagkatapos h3, atbp.). Ang mga search engine ay nagbibigay ng pinakamataas na weighting sa teksto na isinama sa loob ng mga heading tag dahil mayroong isang semantiko na halaga sa tekstong iyon. Sa ibang salita, sa pamamagitan ng pag-label sa pamagat ng iyong pahina H1, sasabihin mo sa spider ng search engine na iyon ay ang # 1 na pokus ng pahina. Ang H2 heading ay mayroong # 2 diin, at iba pa.
Hindi Mo Nakalimutan ang Anong mga Klase na Ginamit Mo Upang Tukuyin ang Iyong Mga Pangunahin
Kapag alam mo na ang lahat ng iyong mga pahina sa Web ay magkakaroon ng isang H1 na naka-bold, 2em, at dilaw, pagkatapos ay maaari mong tukuyin na isang beses sa iyong stylesheet at gawin. Pagkalipas ng 6 na buwan, kapag nagdaragdag ka ng isa pang pahina, idagdag mo lamang ang isang H1 na tag sa tuktok ng iyong pahina, hindi mo na kailangang bumalik sa iba pang mga pahina upang malaman kung anong style ID o uri ang iyong ginamit upang tukuyin ang pangunahing headline at sub-head.
Nagbibigay Sila ng Malakas na Balangkas ng Pahina
Ang mga balangkas ay mas madaling basahin ang teksto. Kaya nga tinuturuan ng karamihan sa mga paaralan ng Estados Unidos ang mga estudyante na magsulat ng balangkas bago isulat ang papel. Kapag gumamit ka ng mga heading tag sa isang outline na format, ang iyong teksto ay may isang malinaw na istraktura na nagiging maliwanag na napakabilis. Dagdag pa, may mga tool na maaaring suriin ang balangkas ng pahina upang magbigay ng isang buod, at ang mga ito ay umaasa sa mga heading na tag para sa outline na istraktura.
Ang Iyong Pahina Ay Magiging Sense Kahit Na Naka-Off ang Mga Estilo
Hindi lahat ay maaaring tumingin o gumamit ng mga style sheet (at ito ay bumalik sa # 1 - tingnan ang mga search engine sa nilalaman (teksto) ng iyong pahina, hindi ang mga style sheet). Kung gumagamit ka ng mga heading tag, ginagawa mo ang iyong mga pahina na mas madaling ma-access dahil ang mga headline ay nagbibigay ng impormasyon na hindi isang DIV tag.
Ito ay Nakatutulong Para sa Mga Mambabasa ng Screen At Website Accessibility
Ang wastong paggamit ng mga heading ay lumilikha ng lohikal na istraktura sa isang dokumento. Ito ang gagamitin ng mga screen reader upang "basahin" ang isang site sa isang gumagamit na may kapansanan sa pangitain, na ginagawang naa-access ang iyong site sa mga taong may mga kapansanan.
Estilo ang Teksto at Font ng Iyong Mga Mga Pangunahin
Ang pinakamadaling paraan upang lumayo mula sa "malaki, naka-bold, at pangit" na problema ng mga tag ng heading ay ang estilo ng teksto sa paraan na nais mong tumingin sa kanila. Sa katunayan, kapag nagtatrabaho ako sa isang bagong website, karaniwang isusulat ko ang unang talata, h1, h2, at h3 na estilo. Karaniwan ako ay may stick sa family font at size / weight. Halimbawa, maaaring ito ay isang paunang estilo ng sheet para sa isang bagong site (ang mga ito ay ilan lamang halimbawa ng estilo na magagamit):
katawan, html {margin: 0; padding: 0; } p {font: 1em Arial, Geneva, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: bold 1.2em Arial, Geneva, Helvetica, sans-serif; }Maaari mong baguhin ang mga font ng iyong headline o baguhin ang estilo ng teksto o kahit na ang kulay ng teksto . Ang lahat ng ito ay bubuksan ang iyong "pangit" headline sa isang bagay na mas buhay na buhay at alinsunod sa iyong disenyo.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; kulay: # e7ce00; }Maaaring Bihisan ng mga Hangganan ang mga pamagat
Ang mga hangganan ay isang mahusay na paraan upang mapabuti ang iyong mga headline. At ang mga hangganan ay madaling idagdag. Ngunit huwag kalimutan na mag-eksperimento sa mga hanggahan - hindi mo kailangan ng hangganan sa bawat panig ng iyong headline. At maaari mong gamitin ang higit pa sa mga plain na pagbubutas hangganan.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; kulay: # e7ce00; hangganan-itaas: solid # e7ce00 daluyan; hangganan-ilalim: may tuldok # e7ce00 manipis; lapad: 600px; }Nagdagdag ako ng isang top at bottom border sa aking sample headline upang ipakilala ang ilang mga kagiliw-giliw na visual na mga estilo. Maaari kang magdagdag ng mga hangganan sa anumang paraan na nais mong makamit ang estilo ng disenyo na gusto mo.
Magdagdag ng Mga Larawan sa Likod sa Iyong Mga Pangunahin Para sa Higit pang Pizazz
Maraming mga Web site na may isang seksyon ng header sa tuktok ng pahina na may kasamang headline - karaniwang ang pamagat ng site at isang graphic. Iniisip ng karamihan sa mga taga-disenyo na ito bilang dalawang magkahiwalay na elemento, ngunit hindi mo kailangang. Kung ang graphic ay mayroon lamang upang palamutihan ang headline, pagkatapos ay kung bakit hindi idagdag ito sa mga estilo ng heading?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; background: #fff url ("fancyheadline.jpg") ulit-x ibaba; padding: 0.5em 0 90px 0; text-align: center; margin: 0; border-bottom: solid # e7ce00 0.25em; kulay: # e7ce00; }Ang lansihin sa headline na ito ay alam ko na ang aking imahe ay 90 pixel matangkad. Kaya nagdagdag ako ng padding sa ilalim ng headline ng 90px (padding: 0.5 0 90px 0p;). Maaari kang maglaro kasama ang mga margin, line-height, at padding upang makuha ang teksto ng headline upang maipakita nang eksakto kung saan mo nais ito.
Ang isang bagay na dapat tandaan kapag gumagamit ng mga larawan ay kung mayroon kang isang tumutugon na website (na dapat mo) na may isang layout na nagbabago batay sa laki ng screen at mga aparato, ang headline mo ay hindi palaging magiging parehas na laki. Kung kailangan mo ang iyong headline upang maging eksaktong sukat, maaari itong magdulot ng mga problema. Ito ay isa sa mga kadahilanan kung bakit ako karaniwang maiiwasan ang mga larawan sa background sa isang headline, bilang cool na kung minsan ang mga ito ay maaaring tumingin.
Pagpalit ng Larawan sa mga pamagat
Ito ay isa pang popular na pamamaraan para sa mga taga-disenyo ng Web dahil pinapayagan ka nito na lumikha ng isang graphical na headline at palitan ang teksto ng heading na tag sa larawang iyon. Ito ay totoong isang praktikal na kasanayan mula sa mga taga-disenyo ng web ay may access sa napakakaunting mga font at nais na gumamit ng higit pang mga exotic na mga font sa kanilang trabaho. Ang pagtaas ng web font ay talagang nagbago kung paano lumalapit ang mga taga-disenyo ng mga site. Ang mga pamagat na ngayon ay maaaring itakda sa isang malawak na pagkakaiba-iba ng mga font at mga imahe na may mga naka-embed na mga font ay hindi na kinakailangan. Dahil dito, makakahanap ka lamang ng mga imaheng CSS na kapalit para sa mga headline sa mas lumang mga site na hindi pa na-update sa mas modernong mga kasanayan.
Orihinal na artikulo ni Jennifer Krynin. Ini-edit ni Jeremy Girard noong 9/6/17