Paggamit sa Mga Font, Mga Border, ug mga Imahen sa Pagdayand sa Mga Pangulo
Komon ang mga ulohan sa daghang mga panid sa web. Sa pagkatinuod, bisan unsa nga dokumento sa teksto ang adunay usa ka headline aron mahibal-an nimo ang ulohan sa imong gibasa. Kini nga mga headline gi-code gamit ang HTML nga elemento sa ulohan - h1, h2, h3, h4, h5, ug h6.
Diha sa pipila ka mga site, mahimo nga makita nga ang mga ulohan nga mga coded nga walay paggamit niini nga mga elemento. Hinoon, ang mga headline mahimo nga magamit ang mga parapo nga adunay piho nga mga hiyas sa klase nga idugang ngadto kanila, o mga pagbahin sa mga elemento sa klase. Ang rason nga kanunay nakong nadunggan mahitungod niining sayop nga praktis mao nga ang tigdisenyo "dili ganahan sa pagtan-aw sa mga ulohan". Sa kasagaran, ang mga ulohan gipakita nga maisog ug kini mas dako sa gidak-on, ilabi na ang h1 ug h2 nga mga elemento nga gipakita sa mas dako nga gidak-on sa font kay sa nahibilin sa usa ka teksto sa panid. Hinumdomi kini mao lamang ang default nga pagtan-aw niining mga elemento! Uban sa CSS, mahimo nimo nga tan-awon tan-awon ang imong gusto! Mahimo nimo usbon ang gidak-on sa font, kuhaa ang kaisug, ug daghan pa. Ang mga ulohan mao ang husto nga paagi sa pag-code sa headlines sa pahina. Ania ang pipila ka mga hinungdan ngano.
Nganong Gigamit ang Heading Tags Imbis nga DIVs ug Styling
Mga Search Engines Sama sa mga Tags sa Pagpangulo
Kini ang pinakamaayong rason nga gamiton ang mga ulohan, ug gamiton kini sa husto nga pagkasunod (ie h1, dayon h2, dayon h3, ug uban pa). Ang mga search engine naghatag sa labing taas nga weighting sa text nga gilakip sulod sa mga tag sa tag sunod tungod kay adunay usa ka semantiko nga bili niana nga teksto. Sa laing pagkasulti, pinaagi sa pagsulat sa imong titulo sa panid sa H1, gisulti nimo ang spider sa search engine nga kana ang # 1 nga focus sa panid. Ang H2 nga mga ulohan adunay gibug-aton nga # 2, ug uban pa.
Wala Ka Nimong Hinumdomi Unsa nga mga Klase nga Imong Ginamit Sa Paghubit sa Imong Mga Pangulo
Kung nahibal-an nimo nga ang tanan nimong mga panid sa Web adunay H1 nga bold, 2em, ug yellow, nan imong mahibal-an nga kausa sa imong stylesheet ug pagabuhaton. Pagkahuman sa 6 ka bulan, sa dihang nagdugang ka og laing panid, idugang nimo ang usa ka H1 tag sa ibabaw sa imong panid, dili kinahanglan nga mobalik ka sa ubang mga panid aron mahibal-an kung unsa ang estilo sa ID o klase nga imong gigamit sa pag-define sa main ulohan ug sub-heads.
Sila Naghatag og Lig-on nga Outline nga Panid
Ang mga outline naghimo sa teksto nga mas sayon nga basahon. Mao nga ang kadaghanan sa mga eskwelahan sa Estados Unidos nagtudlo sa mga estudyante sa pagsulat sa usa ka outline sa wala pa nila isulat ang papel. Sa diha nga ikaw naggamit sa mga tag sa ulohan sa outline format, ang imong teksto adunay usa ka tin-aw nga estruktura nga mahimong dali nga makita. Dugang pa, adunay mga himan nga makarepaso sa outline sa panid aron sa paghatag sa usa ka sinopsis, ug kini nagsalig sa mga tag nga tag-iya alang sa outline structure.
Ang Imong Pahina Mahimong Masabtan Bisan Ang Mga Estilo Mawala
Dili tanan ang makatan-aw o makagamit sa style sheets (ug kini mobalik sa # 1 - ang mga search engine makita ang sulod (teksto) sa imong panid, dili ang style sheets). Kon mogamit ka sa mga tag sa heading, imong himoon nga mas accessible ang imong mga panid tungod kay ang mga headline naghatag og kasayuran nga dili usa ang DIV tag.
Kini Makatabang Kay Mga Magbabasa sa Screen Ug Website Accessibility
Ang hustong paggamit sa mga ulohan nagmugna sa usa ka lohikal nga istruktura sa usa ka dokumento. Kini ang gamiton sa screen readers sa "pagbasa" sa usa ka site ngadto sa usa ka user nga adunay impairment sa panglantaw, nga ang imong site maadto sa mga tawo nga adunay mga kakulangan.
Estilo ang Estilo ug Pulong sa Imong Mga Pangulo
Ang labing sayon nga paagi sa pagpalayo gikan sa "dako, maisugon, ug mangil-ad" nga problema sa mga tag sa ulohan mao ang estilo sa teksto sa paagi nga gusto nimo nga tan-awon. Sa pagkatinuod, sa dihang nagtrabaho ko sa usa ka bag-ong website, kasagaran akong isulat ang parapo, h1, h2, ug h3 nga mga estilo sa unang butang. Kasagaran ako magpabilin sa pamilya nga font ug gidak-on / gibug-aton. Pananglitan, kini mahimong usa ka pasiuna nga estilo sa estilo alang sa usa ka bag-ong site (kini usa lamang ka panig-ingnan nga estilo nga mahimong gamiton):
lawas, 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; }Mahimo nimong usbon ang mga font sa imong headline o usbon ang estilo sa teksto o bisan ang kolor sa teksto . Kining tanan makapausab sa imong "mangil-ad" nga ulohan ngadto sa usa ka butang nga mas kusog ug sumala sa imong desinyo.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; kolor: # e7ce00; }Ang mga Border Makahimo sa Pagsulud sa Mga Pangulo
Ang mga utlanan usa ka maayong paagi sa pagpauswag sa imong mga ulohan. Ug ang mga utlanan sayon nga idugang. Apan ayaw kalimot nga mag-eksperimento sa mga utlanan - dili nimo kinahanglan ang usa ka utlanan sa matag kilid sa imong ulohan. Ug magamit nimo ang labaw pa kay sa yano nga mga boring nga mga utlanan.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; kolor: # e7ce00; border-top: solid # e7ce00 medium; utlanan-ilawom sa ubos: gisul-ob # e7ce00 nga nipis; lapad: 600px; }Gidugang ko ang usa ka top ug bottom border sa akong sample headline aron ipaila ang pipila nga makapaikag nga estilo sa visual. Mahimo nimong idugang ang mga utlanan sa bisan unsang paagi nga gusto nimo nga makab-ot ang estilo sa disenyo nga imong gusto.
Pagdugang og mga Larawan sa Imahen sa Imong mga Pangulo Alang sa Dugang pa nga Pizazz
Daghang mga Web site nga adunay usa ka header nga bahin sa ibabaw sa panid nga naglakip sa headline - kasagaran ang titulo sa site ug usa ka graphic. Ang kadaghanan sa mga tigdesinyo naghunahuna niini isip duha ka managlahing elemento, apan dili kinahanglan. Kung ang graphic naa didto aron sa pagdayandayan sa headline, nan nganong dili kini idugang sa estilo sa ulohan?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; background: #fff url ("fancyheadline.jpg") repeat-x bottom; padding: 0.5em 0 90px 0; text-align: center; margin: 0; border-bottom: solid # e7ce00 0.25em; kolor: # e7ce00; }Ang lansis niini nga ulohan mao nga nahibal-an ko nga ang akong dagway 90 ka pixel ang gitas-on. Busa gidugang ko ang padding ngadto sa ubos sa ulohan nga 90px (padding: 0.5 0 90px 0p;). Mahimo ka makadula sa mga gilay-on, taas nga linya, ug padding aron makuha ang hilisgutan sa ulohan aron ipasundayag kung asa nimo kini gusto.
Ang usa ka butang nga hinumdum sa diha nga ang paggamit sa mga larawan mao nga kon ikaw adunay usa ka responsive nga website (nga kinahanglan nimo) nga adunay usa ka layout nga nagbag-o base sa mga gidak-on sa screen ug mga himan, ang headline dili kanunay nga pareho nga gidak-on. Kung kinahanglan nimo ang imong headline nga usa ka eksaktong gidak-on, mahimo kini nga hinungdan sa mga problema. Usa kini sa mga rason kung nganong sa kasagaran akong malikayan ang mga hulagway sa background sa usa ka ulohan, ingon nga mabugnaw nga usahay makita kini.
Pagpuli sa Imahe sa Mga Pangulo
Kini mao ang laing popular nga pamaagi alang sa mga tigdesinyo sa Web tungod kay kini nagtugot kanimo sa paghimo og usa ka graphical headline ug pag-ilis sa teksto sa heading tag uban sa maong larawan. Kini sa pagkatinuod usa ka karaan nga buhat gikan sa mga tigdisenyo sa web nga adunay gamay nga mga font ug gusto nga mogamit og mas talagsaon nga mga font sa ilang trabaho. Ang pag-uswag sa mga web font nausab gyud kung giunsa pagduol sa mga designers ang mga site. Ang mga ulohan nga mahimo na nga ibutang sa nagkalainlain nga mga font ug mga larawan nga adunay mga font nga natago dili na gikinahanglan. Tungod niini, makakita ka lamang og mga hulagway sa CSS alang sa mga ulohan sa mga dagko nga mga site nga wala pa ma-update sa mas modernong mga buhat.
Ang orihinal nga artikulo ni Jennifer Krynin. Gi-edit ni Jeremy Girard sa 9/6/17