XHTML 结构化之一：使用 XHTML 重构网站

Ang pangalang ginamit ng aming sektor para sa kanyang kabanata ay, 'XHTML: Simpleng Patakaran, Madaling Alituntunin.' Isang dahilan ay dahil ang patakaran at alituntunin na talakayin sa kanyang kabanata ay simpleng at madaling maunawaan. Isang dahilan naman ay dahil sa isang simpleng at madaling WEB design aklat, tulad ng bagong libreng produkto sa supermarket, bagaman madalas na nakikita, ay maaaring maging epektibo na mag-akit sa interes ng mga tao at mag-encourage sila na subukan.

Ako talaga ay nagnanais na ang nilalaman ng ito ay mag-engage sa iyong interes at mag-encourage ka na subukang ito. Bakit ba? Dahil kapag natutuhan mo ang simpleng at madaling konsepto na kasama sa kanyang kabanata, ay mawawala ka ng bagay tungkol sa paraan ng pagsisimula ng web page, at magsimula kang baguhin ang paraan ng paggawa nito. Gayunpaman, hindi ko nais na lang ikaw ay magsasalin ng code. Nais ko na talagang ikaw ay mag-isip at magtrabaho nang iba't ibang paraan.

Sa kabilang banda, ang pagreconstruct ang tunay na kahulugan ng XHTML.

Sa kanyang kabanata, ay aaralin namin ang mekanismo at kahulugan ng structural na tag. Kung ikaw ay isinasama ang mga pamantayan ng website sa iyong proyekto ng pagbuo, maaaring maging pamilyar ang nilalaman ng kanyang kabanata. Gayunpaman, kahit na kaalyado ka sa larangan, makikita ka ng mga pagsasalungat sa kanyang kabanata.

Buod ng mga patakaran ng XHTML

Ang pagbabagong layunin ng tradisyonal na HTML sa XHTML 1.0 ay mabilis at walang sakit, hangga't pumunuan ka ng ilang simpleng patakaran at madaling alituntunin. Hindi ito magiging sagabal sa iyong paggamit ng XHTML kahit kung paano ka naging nakikilala sa HTML.

  • Gumamit ng tamang deklarasyon ng dokumentong uri at namespace.
  • Gumamit ng meta element para ipahayag ang uri ng iyong nilalaman.
  • Gumamit ng maliliit na titik para sa lahat ng element at attribute.
  • Magdagdag ng quotation mark sa lahat ng halaga ng attribute.
  • Magbigay ng halaga sa lahat ng attribute.
  • Isara ang lahat ng tag.
  • Gumamit ng espasyo at slash para isara ang walang nilalaman na tag.
  • Huwag isulat ang dual underscore sa mga komento.
  • Tiyakin na ang bawat 'less than' at 'ampersand' ay < at &

Unicode at iba pang charset

Ang default na charset ng dokumento ng XML, XHTML, at HTML 4.0 ay Unicode, isang standard na inilatag ng Unicode Consortium. Ang Unicode ay isang kumpletong charset, na nagbibigay ng isang tiyak na numero sa bawat character, kahit na sa anumang platform, program, o wika. Ang Unicode ay ang pinakamalapit natin sa pangkalahatang abugida, kahit na ito ay hindi isang abugida, kundi isang sistema ng numrical mapping.

Bagaman ang Unicode ay ang default na charset ng web dokumento, ang mga developer ay malaya na pumili ng iba pang charset na mas angkop sa kanila. Halimbawa, ang mga website ng Amerika at Europa ay kadalasang gumagamit ng ISO-8859-1 (Latin-1) encoding, habang ang pambansang standard ng People's Republic of China ay ang gb2312.

Markahin ang dokumento para sa semantika, hindi para sa estilo

Tandaan: Gamitin mo nang lubos ang CSS para sa layout. Sa mundo ng web standard, ang marka ng XHTML ay walang kaugnayan sa pagganap, ito ay may kaugnayan lamang sa estraktura ng dokumento.

Ang dokumento na may magandang estraktura ay makakapagbigay sa browser ng maraming semantika, kahit na ang browser ay nasa smart phone o stylish na graphic browser sa desktop. Ang dokumento na may magandang estraktura ay makakapagbigay sa user ng visual na semantika, kahit na sa lumang browser, o sa modernong browser na binuwag ng CSS ng user.

Hindi lahat ng site ay maaaring madaling alisin ang HTML table layout. Ang may-akda ng CSS, ang W3C, ay nagpalit ng kanilang opisyal na website sa CSS layout hanggang Nobyembre 2002. Gayunpaman, kahit na ang matatapang na tagapagtaguyod ng standard, hindi palaging nagsasalangsang na paghihiwalay ang pagganap mula sa estraktura, kahit na sa XHTML 1 ay hindi nakakaya. Ngunit ngayon, maaari nating gumawa ng malaking hakbang sa hangganan na ito, sa pamamagitan ng paghihiwalay ng pagganap mula sa estraktura (o paghihiwalay ng data mula sa disenyo), kahit na ang magkahalong tradisyonal na layout ay makikinabang mula dito.

Mayroon kaming ilang tip na makakatulong sa iyo upang maisaklaw ang isang mas struktural na pamamaraan sa pamamalakad:

Kulay sa loob ng isangkay

Sa paaralan ng pananaliksik, karamihan sa amin ay sapilitang gumamit ng standard na format ng isangkay sa pagsusulat ng artikulo. Ngayon, bilang mga disenyer, magkaiba pa natin ang pagiging malaya mula sa pagbabawal ng isangkay, at magbaliktad na lumagpas sa malayang larangan ng personal na ekspresyon (bukod sa aming mga pulyet at komersyal na site, ay hindi pa kaya't malayang personal). Ngunit kahit paano, hindi na tayo makakakulong sa isangkay.

Sa katunayan, ayon sa HTML, dapat natin结构性an ang nilalaman sa nagkaroon ng organisadong hierarkiya. Sa panahon na hindi suportado ng browser ang CSS, hindi natin maaaring magbigay ng lay-out na magamit sa pagbenta habang ginagawa ito. Ngunit ngayon, sa paghahatid ng aming disenyo nang walang paghihina, mayroon kaming kakayahan na magbigay ng dokumento na may magandang likas na estraktura.

Kapag nagmamarka ka ng teksto na gagamitin sa internet o kapag inililipat mo ang umiiral na dokumentong teksto sa pahina, gamitin mo ang mga ito na entri ng tradisyonal na isangkay.

<h1>Aking paksa</h1>
<p>Pangungusap na teksto</p>
<h2>Sanggunian ng palagay</h2>
<p>Sanggunian ng teksto</p>

Sa katulad, huwag gumamit ng pinagdaan na HTML na elemento tulad ng <font>, o walang kahulugang semantiko na elemento tulad ng <br>, upang mukhang may kahulugang logikal na ektura.

Halimbawa, huwag gawin ito:

<font size="7">Aking paksa</font><br />
Pangungusap na teksto<br /><br />
<font size="6">Sanggunian ng palagay</font><br />
Sanggunian ng teksto<br />

Gamitin ang mga elemento ayon sa kanilang kahulugan, hindi ayon sa kanilang hitsura.

Mayroon sa amin na sumasaktan sa isang masamang pagkakaroon, kapag kailangan lang ng malakas na teksto ay gumamit ng h1, o kapag kailangan ng butas sa harap ay gumamit ng li. Katulad ng pinag-usapan namin sa nakaraang kabanata, ang browser ay nakasampalataya sa ipapataw ng disenyo sa HTML na elemento. Kami ay palaging nakasampalataya sa kahulugan na h1 ay nangangahulugang malakas na teksto, li ay nangangahulugang butas, o blockquote ay nangangahulugang malalaki ang teksto. Ang karamihan sa amin ay patuloy na gumagamit ng structural na elemento para sa pagtugis ng disenyo sa HTML.

Katulad nito, kung ang disenyer ay nais na ang lahat ng pamagat ay may kaparehong laki ng font, ay gagawin niya ang lahat ng pamagat bilang h1, kahit na walang kahulugang semantiko ang gawa ng ganito.

Ang ito ay pangunahing pamagat, sa kung paano akin ay nagorganisa ang teksto sa paraan ng talaan.
Ang ito ay hindi pangunahing pamagat, ngunit nais kong magkaroon ng kaparehong font na sa itaas na pamagat, ngunit hindi ko alam kung paano gamitin ang CSS.
Ang ito ay lubos na hindi isang pamagat. Ngunit lubos akong nais na ang teksto sa pahina ay magkaroon ng kaparehong font, upang makamit ang gusto ko.
Kung alam ko ang CSS, maari kong makamit ang disenyo na ito na hindi magpapasira sa ektura ng dokumento.

Kailangan naming itigil ang aming maliliit na triko at simulan na gamitin ang CSS ayon sa semantika ng elemento, hindi ayon sa kanilang hitsura. Sa katunayan, ang h1 ay maaaring maging anumang hitsura na gusto mo. Sa pamamagitan ng CSS, ang h1 ay maaaring maging isang hindi malakas na teksto na may maliliit na romano at ang p teksto ay maaaring maging malakas at malaki, ang li ay maaaring walang butas (maari ka ring gamitin ang PNG, GIF o JPEG na larawan ng maliit na pusa, aso o logo ng kompanya) at iba pa.

Simula ngayon, gagamitin namin ang CSS upang desidernahin ang hitsura ng mga elemento. Maaari din naming baguhin ang kanilang hitsura batay sa kanilang posisyon sa pahina o sa sitio. CSS ay makakalipat ang pagtataya mula sa estraktura at magbibigay ng pagpipilit sa iyo na formatuhin ang anumang elemento sa estilo na gusto mo.

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	{}

Bakit mo ito gagawin? Ang layunin nito ay upang makakuha ng pinamarkahan na panlabas at kahulugan sa graphic browser habang pinapanatili ang kaayusan ng dokumento sa text browser, wireless device, at email na may HTML format.

Hindi namin gusto na magsalita ng higit pa tungkol sa teknikal na aspeto ng CSS sa kabanata tungkol sa XHTML. Gusto namin lamang ipakita na ang kaayusan ng dokumento at ang visual na ekspresyon ay dalawang buong magkakaiba na bagay, at ang estraktibong elemento ay dapat gamitin upang ipalit ang teksto, hindi upang ipagbabawal ang visual na epekto.

Gamitin ang estraktibong elemento, hindi ng walang kahulugan na basura

Dahil kami ay nakalimutan o wala akong alam ang layunin ng HTML at XHTML ay ipakita ang estraktibong kahulugan, maraming tagapagtalo ng HTML ay gumagamit ng mga tag upang ipasok ang listahan sa ganito:

Proyekto isang<br />
Proyekto dalawa<br />
Proyekto tatlo<br />

Isipin mo na gamitin ang may oras o walang oras na listahan sa halip:

<ul>
<li>Proyekto isang</li>
<li>Proyekto dalawa</li>
<li>Proyekto tatlo</li>
</ul>

"Ngunit ang li ay nagbibigay ng isang puwit, at hindi kailangan ko ng puwit!" Baka ikaw ay itong sasabihin. Ayon sa nakaraang kabanata, ang CSS ay hindi gumagawa ng anumang asumpisyon sa inaasahang panlabas ng elemento. Ito ay naghihintay na sa iyo para sabihin kung ano ang inaasahang panlabas ng elemento mo. Ang pagbubuwag ng puwit ay pinakamainam na kapangyarihan ng CSS. Mayroon itong kakayahang gumawa ng listahan na katulad ng pangkaraniwang teksto, at maaari rin itong gumawa ng listahan na katulad ng graphic navigation bar na may buong pagbaligtad na epekto.

Kaya, gamitin ang mga elemento ng listahan upang tandaan ang listahan. Katulad nito, gamitin ang strong upang kahalili ng b, gamitin ang em upang kahalili ng i, at iba pa. Sa karamihan sa lahat ng desktop browser sa bawat kasalukuyang estado, ang pagpapakita ng strong ay katulad ng b, at ang em at i ay katulad, at maaari rin itong gumawa ng hinahangad mong visual effect ng walang pagkasira sa kaayusan ng dokumento.

Kahit na ang CSS ay hindi gumagawa ng anumang asumpisyon sa pagpapakita ng anumang elemento, gumawa pa rin ang mga browser ng maraming asumpisyon, at wala pa akong nakakita ng isang browser na nagpapakita ng strong na hindi pangmatas na titik (maliban na lang kung ang CSS ay inilagay ng designer para sa ibang paraan ng pagpapakita). Kung ikaw ay nag-aalala na ang isang hindi kilalang browser ay hindi magpapakita ng strong bilang pangmatas na titik, maaari kang isulat ang mga sumusunod na CSS patakaran:

strong {
	font-weight: bold;
	font-style: normal;
	{}

视觉元素和结构

web 标准不仅要求我们使用何种科技，而且还要遵守使用这些技术的方式。使用 XHTML 来编写标记，同时使用 CSS 来处理一部分或者全部的布局，并不一定会使站点更易用更轻便，同时节约多少带宽。就像我们在早期使用的技术那样，XHTML 和 CSS 也会被误用和滥用。冗长的 XHTML 和冗长的 HTML 一样，都会浪费用户的带宽和时间。冗长的过度的 CSS 也不能完全的代替表现 HTML 代码；这只不过是一种糟糕的东西被另一种代替了而已。