ایکس ایچ تی جیائزالیفیکیشن کی دوسری جگہ: نمونہ: و3 اسکول کی جیائزالیفیکیشن مارکر

ਕਿਉਂ ਵੀ, ਇਸ ਖੰਡ ਨੂੰ ਛੱਡ ਨਾ ਜਾਵੋ। ਇਸ ਖੰਡ ਨੂੰ ਪੜ੍ਹਨ ਨਾਲ ਤੁਹਾਡੀ ਕੌਸ਼ਲ ਵਧੇਗੀ, ਤੁਹਾਡੀ ਵੈਬਸਾਈਟ ਨੂੰ ਘਟਾਇਆ ਜਾਵੇਗਾ, ਅਤੇ ਤੁਹਾਨੂੰ ਟੈਗ ਅਤੇ ਡਿਜਾਈਨ ਦਰਮਿਆਨ ਦੀ ਅੰਤਰਾਂ ਬਾਰੇ ਹੋਰ ਸਪਸ਼ਟ ਪਛਾਣ ਹੋਵੇਗੀ। ਇਸ ਖੰਡ ਦੀਆਂ ਸਿਧਾਂਤਾਂ ਨੂੰ ਸਿੱਖਣ ਨਾਲ ਅਸਾਨੀ ਹੋਵੇਗੀ, ਪਰ ਇਹ ਵੈਬਸਾਈਟ ਦੀ ਸਮਰੱਥਾ, ਅਤੇ ਵੈਬਸਾਈਟ ਦੇ ਡਿਜਾਈਨ, ਬਣਾਉਣ ਅਤੇ ਅੱਪਡੇਟ ਕਰਨ ਦੀ ਸੁਵਿਧਾ ਨੂੰ ਬਹੁਤ ਵਧਾ ਦੇਵੇਗਾ।

ਇਸ ਖੰਡ ਵਿੱਚ ਤੁਸੀਂ ਸਮਝ ਸਕੋ ਕਿ ਕਿਵੇਂ ਤੁਸੀਂ ਤਰਕਸੰਗਤ, ਸਰਲ ਟੈਗ ਲਿਖ ਸਕਦੇ ਹੋ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਬੈਂਡਵਿੱਡਥ ਟਰੈਫਿਕ ਨੂੰ 50% ਤੱਕ ਘਟਾ ਸਕਦੇ ਹੋ, ਸਰਵਰ ਦੀ ਭਾਰ ਅਤੇ ਦਬਾਅ ਘਟਾਉਣ ਦੇ ਨਾਲ-ਨਾਲ ਵੈਬਸਾਈਟ ਦੇ ਲੋਡ ਸਮੇਂ ਘਟਾ ਸਕਦੇ ਹੋ। ਉਨ੍ਹਾਂ ਪ੍ਰਦਰਸ਼ਨ ਐਲਮੈਂਟਾਂ ਨੂੰ ਹਟਾਉਣ ਅਤੇ ਉਨ੍ਹਾਂ ਬਦਹਾਲ ਆਦਤਾਂ ਨੂੰ ਬਦਲਣ ਨਾਲ, ਅਸੀਂ ਉਸ ਉਦੇਸ਼ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ।

这些坏习惯折磨着网络中的许多站点，特别是那些将 CSS 代码与主要基于表格的布局混合在一起的站点。这种做法笨拙且不经济，即使是对于那些在其他领域很有经验的设计师来说。同时，出现这个问题的几率是均等的，不论是那些手写代码的站点，还是利用可见编辑工具，比如 Dreamweaver 和 GoLive，来创建的站点。

本节会提出这些常见的错误，这样你就可以识别和防范它们，并且学会如何改正错误。我们详细阐述唯一标识符属性 (id) - ，并展示它如何使你可以编写极其紧凑的 XHTML 代码，不论你创建的是混合布局还是纯粹的 CSS 布局。

每个元素都必须结构化吗？

正如上一节中我们讲到的那样，每个元素都可以被结构化，CSS 可使得一个有序或无序的列表显示为彻头彻尾的导航栏，其中还拥有反转按钮效果。文档的内容可以通过普通的元素进行标记，这些元素通过特定的结构化属性标志来指示出它们在网站设计中所扮演的语义角色。

我们在公元 2006 年创建了 CodeW3C.com 的第一个中文测试版，我们在一开始就使用了 CSS 进行布局，并使用 XHTML 来结构化文档。每一个其中的元素都是结构化的，从标题到列表，乃至落。你可以在 CodeW3C 的每个页面看到具有反转效果的首页按钮和二级菜单按钮。下面是这两个组件的 XHTML 代码：


<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html tutorial">html tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML tutorial">XML tutorial</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</a></li>

  • 服务器脚本
    • 
<li id="d"><a href="/d.asp" title="dot net ਟ੍ਰੇਨਿੰਗ">dot net ਟ੍ਰੇਨਿੰਗ</a></li>
<li id="m"><a href="/m.asp" title="ਮਲਟੀਮੀਡੀਆ ਟ੍ਰੇਨਿੰਗ">ਮਲਟੀਮੀਡੀਆ ਟ੍ਰੇਨਿੰਗ</a></li>
<li id="w"><a href="/w.asp" title="ਸਾਈਟ ਨਿਰਮਾਣ ਮੈਨੂਅਲ">ਸਾਈਟ ਨਿਰਮਾਣ ਮੈਨੂਅਲ</a></li>
</ul>
</div>

    div、id 和其他帮手

    如果被正确地使用，div 可以成为结构化标记的好帮手，而 id 则是一种令人惊讶的小工具，它使你有能力编写极其紧凑的 XHTML，以及巧妙地利用 CSS，并通过标准文档对象模型 (DOM) 向站点添加复杂精巧的行为。

    W3C اپنے نئی استمپاچ کی ایکس ایچ ایچ 2 میں ایکس ایچ ایچ 2 کی سکتریچر ماڈل میں اس طرح تعریف کرتا ہے:

    div عناصر،جسدیدن id،class اور role اپرائیٹیوئٹس کے ساتھ،اس دکومنٹ میں اضافی سکتریچر فراہم کرنے والا عام میکانزم فراہم کرتا ہے۔یہ عناصر مطلب کا استايل فراہم نہیں کرتا۔اس لئے،فنکار اس عناصر کو استايل شیٹ،xml:lang،اپرائیٹیوئٹس کے ساتھ استعمال کرکے،XHTML کو اپنے اپنے اور چمکدار کئے سکتا ہے۔

    div ਹੈ division ਦਾ ਛੋਟਾ ਰੂਪ। division ਮਤਲਬ ਵੰਡਣ, ਖੇਤਰ, ਗਰੁੱਪ ਹੈ। ਉਦਾਹਰਣ ਵਜੋਂ, ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਲੜੀ ਦੇ ਲਿੰਕ ਨੂੰ ਮਿਲਾਉਂਦੇ ਹੋ, ਤਾਂ ਇਹ ਦਸਤਾਵੇਜ਼ ਦਾ ਇੱਕ division ਬਣਦਾ ਹੈ।

    ਸਰੂਪਿਕ ਵਿਵਸਥਾ ਦਾ ਆਮ ਮੈਕਨਿਜਮ

    ਸਾਰੇ HTML ਲਿਖਣ ਵਾਲੇ ਲੋਕ ਪੜਾਵਾਂ ਅਤੇ ਸਿਰਲੇਖ ਵਰਗੇ ਆਮ ਇਲੈਕਟ੍ਰੌਨਸ ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਹਨ, ਪਰ ਕੁਝ ਲੋਕ div ਨਾਲ ਬਹੁਤ ਅਜਿਹਾ ਪਰਿਭਾਸ਼ਿਤ ਨਹੀਂ ਹਨ। W3C ਦੀ ਵਰਤੋਂ ਵਿੱਚ, ਅਸੀਂ div ਇਲੈਕਟ੍ਰੌਨਸ ਨੂੰ ਸਮਝਣ ਦੇ ਕੀਮਤੀ ਨੂੰ ਲੱਭ ਸਕਦੇ ਹਾਂ, 'ਇੱਕ ਸਰੂਪਿਕ ਵਿਵਸਥਾ ਦਾ ਆਮ ਮੈਕਨਿਜਮ'。

    ਇਸ ਸਾਇਟ ਦੇ ਮੁੱਖ ਪੰਨੇ 'ਤੇ, ਅਸੀਂ ਸਿੱਖਿਆ ਅਨੁਸਾਰੀ ਸੂਚੀ ਨੂੰ ਇੱਕ div ਵਿੱਚ ਪੈਕ ਕਰਦੇ ਹਾਂ, ਇਹ ਇਹ ਕਿ ਸਿੱਖਿਆ ਅਨੁਸਾਰੀ ਕੋਈ ਪ੍ਰਮੁੱਖ ਸਮੱਗਰੀ ਦਾ ਹਿੱਸਾ ਨਹੀਂ ਹੈ। ਵਿੱਚ ਹੈ 2 ਇਲੈਕਟ੍ਰੌਨਸ, h2 ਇਲੈਕਟ੍ਰੌਨਸ ਹਰ ਸਿੱਖਿਆ ਦੇ ਸਿਰਲੇਖ ਦਾ ਚਿੰਨ੍ਹ ਬਣਾਉਂਦੇ ਹਨ, ਅਤੇ ul ਸੂਚੀ ਇਲੈਕਟ੍ਰੌਨਸ ਹਰ ਸਿੱਖਿਆ ਦੇ ਵਿਸਤ੍ਰਿਤ ਸੂਚੀ ਨੂੰ ਚਿੰਨ੍ਹਿਤ ਕਰਦੇ ਹਨ। ਪਰ ਬਹੁਤ ਵੱਡੇ ਅਤੇ ਵਿਸ਼ੇਸ਼ ਮਾਹੌਲ ਵਿੱਚ, ਇਹ ਸਿੱਖਿਆ ਅਨੁਸਾਰੀ ਇੱਕ ਸਰੂਪਿਕ ਰੂਪ ਨੂੰ ਆਤਮਕਰਣ ਕਰਦੀ ਹੈ, ਯਾਨੀ ਦੂਜੇ ਨੇਵੀਗੇਸ਼ਨ ਹਿੱਸੇ। ਇਸ ਰੂਪ ਨੂੰ ਉਚਿਤ ਕਰਨ ਲਈ, ਅਸੀਂ navsecond ਇਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ。

    <div id="navsecond">
<h2>HTML ਸਿੱਖਿਆ</h2>
<ul>
<li><a href="/html/index.asp" title="HTML ਸਿੱਖਿਆ">HTML</a></li>
<li><a href="/xhtml/index.asp" title="XHTML ਸਿੱਖਿਆ">XHTML</a></li>
<li><a href="/css/index.asp" title="CSS ਸਿੱਖਿਆ">CSS</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP ਸਿੱਖਿਆ">TCP/IP</a></li>
</ul>
<h2>XML ਸਿੱਖਿਆ</h2>
<ul>
<li><a href="/xml/index.asp" title="XML ਸਿੱਖਿਆ">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL ਭਾਸ਼ਾ">XSL</a></li>
... ...
... ...
</div>

    ਤੁਸੀਂ ਕੋਈ ਨਾਮ ਵਰਤ ਸਕਦੇ ਹੋ।"Gladys" ਅਤੇ "orangebox" ਸ਼ਾਇਦ ਹੀ XHTML ਦੇ ਨਾਮਕਰਨ ਨਿਯਮਾਂ ਨਾਲ ਮੈਚ ਕਰਦੇ ਹਨ। ਪਰ ਸਮਾਨ ਜਾਂ ਮੈਟਾ-ਸਟਰਕਚਰਲ (meta-structural) ਦੇ ਨਾਮ ਬਿਹਤਰ ਹਨ (ਯਾਨੀ ਜੋ ਵੀ ਉਸ ਵਿੱਚ ਬਾਹਰ ਆਉਣ ਵਾਲੇ ਇਲੈਕਟ੍ਰੌਨਸ ਦੇ ਕੰਮ ਨੂੰ ਸਮਝਾਉਣ ਵਾਲੇ ਨਾਮ ਹਨ)。

    ਜਦੋਂ ਗਾਹਕ ਨੇ ਨੀਲਾ ਰੰਗ ਚੁਣਿਆ ਤਾਂ ਤੁਸੀਂ ਫਿਰ ਇਹ ਸਮਝਦੇ ਹੋ ਕਿ ਸਾਈਟ ਦਾ ਕਿਸੇ ਹਿੱਸੇ ਨੂੰ orangebox (ਨੀਲਾ ਬੋਕਸ) ਕਿਹਾ ਬਹੁਤ ਬੜਾ ਮੁੱਦਗਿਰ ਹੈ। ਇਸ ਪਰਿਸਥਿਤੀ ਵਿੱਚ ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਨੂੰ ਬਹੁਤ ਮੁੱਦਗਿਰ ਮੰਨਦੇ ਹੋ ਕਿ ਛੇ ਮਹੀਨੇ ਦੇ ਆਖਰੀ ਵਿੱਚ ਤੁਸੀਂ ਸਟਾਇਲ ਸ਼ੈਟ ਨੂੰ ਟੂਨ ਕਰਨ ਲਈ ਕਾਰਜ ਸ਼ੁਰੂ ਕਰੀਆਂ, ਪਰ ਤੁਸੀਂ ਨਹੀਂ ਯਾਦ ਕਰ ਸਕਦੇ ਕਿ "Gladys" (ਔਰਤ ਦਾ ਨਾਮ) ਕਿਹੜੇ ਹਨ, ਨੇਵੀਗੇਸ਼ਨ ਏਰੀਆ, ਸਾਇਡਬਾਰ ਜਾਂ ਸਰਚ ਫਾਰਮ ਦੇ ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਿੱਚ ਹੈ।

    ਇਸ ਲਈ id ਨੂੰ "menu"、"content" ਜਾਂ "searchform" ਕਰਨ ਨਾਲ ਤੁਸੀਂ ਯਾਦ ਕਰ ਸਕਦੇ ਹੋ। ਹੋਰ ਤੌਰ 'ਤੇ ਟੈਗ ਨਾਲ ਨਹੀਂ ਮੁਦਰਬਾਹਤ ਹੈ; ਸਟਰਕਟਰਲੀ ਸਾਡੀ ਪੇਜ ਦੀ ਪ੍ਰਤੀਯੋਗਿਤਾ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ ਜਿਵੇਂ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋਏ ਕਿਸੇ ਪ੍ਰਕਾਰ ਦੀ ਹੋਵੇ। ਇਸ ਪ੍ਰਕਾਰ ਦਾ ਨਤੀਜਾ ਇਹ ਹੁੰਦਾ ਹੈ ਕਿ ਚਾਹੇ ਤੁਸੀਂ ਪੂਰੀ ਤਰ੍ਹਾਂ CSS ਵਰਗਾ ਬੈਂਡਲਿੰਗ ਕਰਦੇ ਹੋ ਜਾਂ ਮਿਸ਼ਰਿਤ ਬੈਂਡਲਿੰਗ ਕਰਦੇ ਹੋ, ਤੁਸੀਂ ਪ੍ਰਦਰਸ਼ਨ ਮਾਰਕਅਪ ਨਾਲ ਵਿਚਾਰ ਕਰਨ ਅਤੇ ਰਚਨਾ ਕਰਨ ਦੀ ਆਦਤ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਦਲ ਦੇਣਾ ਪਵੇਗਾ。

    id ਵਿਰੁੱਧ class

    id ਪ੍ਰਤੀਯੋਗਿਤਾ ਐਕਸਟਰੀਮ ਹੈ ਨਹੀਂ; class ਪ੍ਰਤੀਯੋਗਿਤਾ ਜਾਂ div ਇਲੈਕਟਰਨ ਵੀ ਹੈ। ਉਹ ਸਾਰੇ HTML ਯੁੱਗ ਤੋਂ ਆਉਂਦੇ ਹਨ। id ਪ੍ਰਤੀਯੋਗਿਤਾ ਨੂੰ ਇੱਕ ਅਲੱਗ ਨਾਮ ਦਿੰਦੀ ਹੈ। ਹਰ ਨਾਮ ਸਿਰਫ ਉਸ ਪੇਜ 'ਤੇ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਜਿਸਦੇ ਅਧੀਨ ਦਿੱਤਾ ਗਿਆ ਹੈ。（ਉਦਾਹਰਣ ਵਜੋਂ ਜੇਕਰ ਤੁਹਾਡਾ ਪੇਜ id ਵਾਲਾ div ਹੈ ਤਾਂ ਇੱਕ ਹੋਰ div ਜਾਂ ਹੋਰ ਕੋਈ ਇਲੈਕਟਰਨ ਉਸ ਨਾਮ ਨੂੰ ਨਹੀਂ ਵਰਤ ਸਕਦਾ ਹੈ। ਵਿਰੁੱਧ ਤੌਰ 'ਤੇ class ਪ੍ਰਤੀਯੋਗਿਤਾ ਪੇਜ ਵਿੱਚ ਕਈ ਵਾਰ ਵਰਤੀ ਜਾ ਸਕਦੀ ਹੈ（ਉਦਾਹਰਣ ਵਜੋਂ ਪੇਜ ਵਿੱਚ ਪੰਜ ਪੈਰਾਗ੍ਰਾਫਾਂ ਸਾਰੇ "small" ਜਾਂ "footnote" ਨਾਮ ਦੀ class ਵਰਤ ਸਕਦੇ ਹਨ）。ਹੇਠ ਲਿਖੇ ਟੈਗ ਇਸ ਪ੍ਰਤੀਯੋਗਿਤਾ ਅਤੇ class ਦਰਮਿਆਨ ਅੰਤਰ ਦੀ ਸਪਸ਼ਟੀਕਰਣ ਕਰਦੇ ਹਨ:

    <div id="searchform">ਖੋਜ ਫਾਰਮ ਹਿੱਸੇ ਇੱਥੇ ਜਾਂਦੇ ਹਨ। ਇਹ
ਪੇਜ ਦੇ ਇੱਕ ਹਿੱਸੇ ਨੂੰ ਅਲੱਗ ਕਰਨਾ ਅਨੋਖਾ ਹੈ。</div>
<div class="blogentry">
   <h2>ਅੱਜ ਦਾ ਬਲਾਗ ਪੋਸਟ</h2>
   <p>ਬਲਾਗ ਕੰਟੈਂਟ ਇੱਥੇ ਹੈ。</p>
   <p>ਇਹ ਇੱਕ ਹੋਰ ਬਲਾਗ ਕੰਟੈਂਟ ਦਾ ਪੈਰਾਗ੍ਰਾਫ ਹੈ。</p>
   <p>ਜਿਵੇਂ ਕਿ ਇੱਕ ਪੇਜ 'ਤੇ ਕਈ ਪੈਰਾਗ੍ਰਾਫ ਹੋ ਸਕਦੇ ਹਨ, ਅਜਿਹਾ ਹੀ ਹੈ
   ਬਲਾਗ ਵਿੱਚ ਕਈ ਪ੍ਰਬੰਧ ਹੋ ਸਕਦੇ ਹਨ। ਇੱਕ ਬਲਾਗ ਪੇਜ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹੈ
   ਕਲਾਸ "blogentry" (ਜਾਂ ਕਿਸੇ ਹੋਰ) ਦੇ ਬਹੁਤ ਸਾਰੇ ਇੰਸਟੈਂਸੇਜ਼
   class).</p>
</div>
<div class="blogentry">
   <h2>ਕੱਲ੍ਹ ਦਾ ਬਲੌਗ ਪੋਸਟ</h2>
   <p>ਇਸ ਪ੍ਰਕਾਰ, ਇਥੇ ਅਸੀਂ ਹੋਰ ਇੱਕ class 'blogentry' ਵਾਲੇ div ਦੇ ਅੰਦਰ ਹਾਂ,</p>
   "blogentry."</p>
   <p>ਉਹ ਹਾਥੀਆਂ ਵਾਂਗ ਪ੍ਰਜਾਤੀ ਵਧਦੇ ਹਨ。</p>
   <p>ਇਸ ਪੇਜ 'ਤੇ 10 ਬਲੌਗ ਪੋਸਟ ਹੋਣ ਤਾਂ,
   ਬਲੌਗ ਵਿੱਚ 10 divs of class "blogentry" ਵੀ ਹੋ ਸਕਦੇ ਹਨ。</p>
</div>

    ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ, 'searchform' ਨਾਮ ਵਾਲਾ div ਸਰਚ ਫਾਰਮ ਨਾਲ ਜੁੜੇ ਪੇਜ ਖੇਤਰ ਨੂੰ ਬੰਦ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਜਦਕਿ div class="blogentry" ਬਲੌਗ ਵਿੱਚ ਹਰੇਕ ਲੇਖ ਦੇ ਇੰਦਰੂਨੀ ਦਾਖਲੇ ਨੂੰ ਬੰਦ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਪੇਜ ਵਿੱਚ ਇੱਕ ਹੀ ਸਰਚ ਫਾਰਮ ਹੁੰਦਾ ਹੈ ਇਸ ਲਈ ਅਸੀਂ ਇਸ ਇੱਕੁਲੀ ਕੰਪੋਨੈਂਟ ਨੂੰ id ਦੇ ਰੂਪ ਵਿੱਚ ਚੁਣਿਆ ਹੈ। ਪਰ ਬਲੌਗ ਵਿੱਚ ਕਈ ਤੋਂ ਕਈ ਲੇਖ ਦੇ ਇੰਦਰੂਨੀ ਦਾਖਲੇ ਹੁੰਦੇ ਹਨ ਇਸ ਲਈ class ਵਿਸ਼ੇਸ਼ਤਾ ਇਸ ਪ੍ਰਕਾਰ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਬਲੌਗ ਸਾਈਟਾਂ ਵਿੱਚ ਆਮ ਤੌਰ 'ਤੇ ਕਈ div ਹੁੰਦੇ ਹਨ ਅਤੇ ਇਨ੍ਹਾਂ ਦੀਆਂ class ਨੂੰ 'newsitem' ਜਾਂ ਹੋਰ ਕੁਝ ਨਾਮ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ。

    ਪਰ ਸਾਰੇ ਸਾਈਟਾਂ ਨੂੰ div ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੁੰਦੀ। blog ਸਾਈਟ ਸਿਰਫ h1, H2, ਅਤੇ h2 ਟਾਈਟਲ ਅਤੇ <p> ਪੈਰਾਗ੍ਰਾਫ ਵਰਤ ਸਕਦੀ ਹੈ, ਅਖ਼ਬਾਰ ਸਾਈਟ ਵੀ ਇਸ ਤਰ੍ਹਾਂ ਹੀ ਹੈ। ਅਸੀਂ ਇੱਥੇ class 'blogentry' ਵਾਲੇ div ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਹਾਂ ਪਰ ਤੁਹਾਨੂੰ ਸਾਈਟ ਵਿੱਚ div ਨੂੰ ਭਰਨ ਦੀ ਸਿਫਾਰਿਸ਼ ਨਹੀਂ ਕਰ ਰਹੇ, ਜਸਦੀ ਜਾਂਚ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਇਸ ਸਿਧਾਂਤ ਨੂੰ ਪਾਲਣ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ: ਇੱਕ ਹੀ HTML ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਕਈ ਵਾਰ ਕਲਾਸ ਵਰਤੋਂ ਕਰੋ, ਪਰ ਕੇਵਲ ਇੱਕ ਵਾਰ id ਵਰਤੋਂ ਕਰੋ。

    ਸਟਿਕੀ ਟੇਪ ਸਿਧਾਂਤ

    id ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸਟਿਕੀ ਟੇਪ ਨਾਲ ਸਮਾਨ ਕਰਕੇ ਸੋਚਣਾ ਮਦਦਗਾਰ ਹੋ ਸਕਦਾ ਹੈ। ਮੈਂ ਮਕੈਨੀਜ਼ ਵਿੱਚ ਇੱਕ ਟੇਪ ਕੱਢਾਂਗਾ ਤਾਕਿ ਮਿੱਲਕ ਖਰੀਦਣ ਦੀ ਯਾਦ ਰੱਖਾਂ, ਫੋਨ 'ਤੇ ਵੀ ਇੱਕ ਟੇਪ ਕੱਢਾਂਗਾ ਤਾਕਿ ਇੱਕ ਦਿਵਾਲੀ ਕਲਾਕਾਰ ਨੂੰ ਫੋਨ ਕਰਨ ਦੀ ਯਾਦ ਰੱਖਾਂ। ਇੱਕ ਹੋਰ ਟੇਪ ਲੇਖਾਂਚੋਣੀ 'ਤੇ ਹੋਵੇਗਾ, ਤਾਕਿ ਇਸ ਮਹੀਨੇ 15 ਤਾਰੀਖ ਤੱਕ ਚੁਕਾਉਣੀਆਂ ਬਿਲਾਂ ਦੀ ਯਾਦ ਰੱਖਾਂ。

    id ਨਾਲ ਦਸਤਾਵੇਜ਼ ਦੇ ਵਿਸ਼ੇਸ਼ ਖੇਤਰਾਂ ਨੂੰ ਨਿਸ਼ਾਨ ਕੀਤਾ ਜਾਵੇਗਾ ਤਾਕਿ ਤੁਹਾਨੂੰ ਇਹ ਸਪਸ਼ਟ ਹੋਵੇ ਕਿ ਕਿਹਾਂ ਖੇਤਰ ਵਿਸ਼ੇਸ਼ ਪ੍ਰਕਿਰਿਆ ਦੀ ਜ਼ਰੂਰਤ ਹੈ, ਇਸ ਪ੍ਰਕਾਰ id ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸਟਿਕੀ ਟੇਪ ਨਾਲ ਸਮਾਨ ਹੈ। ਵਿਸ਼ੇਸ਼ ਪ੍ਰਕਿਰਿਆ ਲਈ ਤੁਹਾਨੂੰ ਇਸ ਵਿਸ਼ੇਸ਼ id ਨਾਲ ਸਟਾਈਲ ਸ਼ੇਅਰ ਵਿੱਚ ਕੁਝ ਨਿਯਮਾਂ ਲਿਖਣਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਫਾਈਲ ਵਿੱਚ ਕੁਝ ਕੋਡ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ। ਉਦਾਹਰਨ ਵਜੋਂ, ਤੁਹਾਡੇ CSS ਫਾਈਲ ਵਿੱਚ ਕੁਝ ਵਿਸ਼ੇਸ਼ ਨਿਯਮ ਹੋਣ ਸਕਦੇ ਹਨ ਜੋ ਕੇਵਲ id ਨਾਮ 'searchform' ਵਾਲੇ div ਦੇ ਅੰਦਰ ਦੇ ਤੱਤਾਂ ਉੱਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ。

    when an id attribute is used as a magnetic thing (magnet) for a series of specific CSS rules, it is called a CSS selector. There are manycreate selectormethods, but id is easy to use and has many uses.

    the power of id

    the id attribute is incredibly powerful. It has the following capabilities:

    • as a stylesheet selector, enabling us to create compact and minimized XHTML.
    • as the target anchor of hyper text, replacing the outdated name attribute.
    • as a method to locate a specific element from a DOM-based script.
    • as the name of an object element.
    • as a tool for general purpose processing (in the example of W3C, 'when data is extracted from an HTML page to a database, or when an HTML document is converted to other formats, etc., it is used as a domain identification tool').

    id rules

    the id value must start with a letter or underscore; it cannot start with a number. Although W3C validation will not catch this error, the XML parser will. At the same time, if you use id with JavaScript in a form, the id name and value must be a valid JavaScript variable. Spaces and hyphens, especially hyphens, are not allowed. Moreover, using an underscore in class or id names is not a good idea, due to the limitations in CSS2.0 (and some browsers).

    semantic markup and accessibility

    now, we have discussed the widely used XHTML elements (especially div and id), let's see an example about the home page of this site. First, let's review the menu located at the header position:

    <div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html tutorial">html tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML tutorial">XML tutorial</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</a></li>

  • 服务器脚本
    • 
<li id="d"><a href="/d.asp" title="dot net ਟ੍ਰੇਨਿੰਗ">dot net ਟ੍ਰੇਨਿੰਗ</a></li>
<li id="m"><a href="/m.asp" title="ਮਲਟੀਮੀਡੀਆ ਟ੍ਰੇਨਿੰਗ">ਮਲਟੀਮੀਡੀਆ ਟ੍ਰੇਨਿੰਗ</a></li>
<li id="w"><a href="/w.asp" title="ਸਾਈਟ ਨਿਰਮਾਣ ਮੈਨੂਅਲ">ਸਾਈਟ ਨਿਰਮਾਣ ਮੈਨੂਅਲ</a></li>
</ul>
</div>

    ਅਸੀਂ ਸੱਤ ਲਿੰਕ ਹਨ, ਹਰੇਕ ਲਿੰਕ ਨੂੰ ਇੱਕ id ਦਿੱਤਾ ਹੈ ਤਾਕਿ ਉਹ ਸਮਾਨ ਸਮੱਗਰੀ ਨਾਲ ਲਿੰਕ ਹੋਣ: ਉਦਾਹਰਣ ਵਜੋਂ, id ਦਾ ਨਾਮ h ਹੈ ਤਾਂ ਇਹ HTML ਟ੍ਰੇਨਿੰਗ ਨਾਲ ਲਿੰਕ ਹੈ, ਇਸ ਤਰ੍ਹਾਂ ਹੀ। ਨਾਲ ਹੀ, ਇਹ ਲਿੰਕ menu ਨਾਮ ਦੀ ਲਿਸਟ ਐਲੀਮੈਂਟ ਵਿੱਚ ਰਖੇ ਗਏ ਹਨ, menu ਦਾ id ਇਸ ਲਿਸਟ ਦੇ ਕਾਰਜ ਦੀ ਨਿਸ਼ਾਨੀ ਕਰਦਾ ਹੈ - ਇੱਕ ਮੇਨੂ ਲਿਸਟ, ਅਤੇ ਬਾਹਰ ਦਾ ਇੱਕ ਨਾਮ ਦਾ div ਨਾਮ ਹੈ ਕਿ ਇਹ ਪੰਨੇ ਵਿੱਚ ਇਸ ਖੇਤਰ (ਸੈਕਸ਼ਨ) ਦਾ ਸੰਕੇਤ ਕਰਦਾ ਹੈ, ਇਸ ਨੂੰ ਮੁੱਖ ਸਮੱਗਰੀ (maincontent), ਪਾਰਸ਼ਵਿਕ ਬੋਰਡ (sidebar) ਅਤੇ ਪੱਟੀ (footer) ਜਿਹੇ ਐਲੀਮੈਂਟਾਂ ਤੋਂ ਵੱਖ ਕਰਦਾ ਹੈ。

    div ਅਤੇ ul ਦੋ ਐਲੀਮੈਂਟ ਅਸਲੀ ਸਰੰਜਾਮ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਉਹਨਾਂ ਵਿੱਚ ਸਮੱਗਰੀ ਦੇ ਕਾਰਜ ਦੀ ਨਿਸ਼ਾਨੀ (ਨੇਵੀਗੇਸ਼ਨ ਬਾਰੇ) ਅਤੇ ਉਹਨਾਂ ਦੀ ਸਥਿਤੀ (ਪੰਨੇ ਦੇ ਸਿਰ ਵਿੱਚ) ਦੀ ਨਿਸ਼ਾਨੀ ਕਰਦੇ ਹਨ। ਉਲਟ ਵਿਆਖਿਆਬੱਧ ਤੇਬਲ ਲੇਆਉਟ ਕੋਈ ਵੀ ਸਮਾਨਤਾ ਸੰਕੇਤ ਨਹੀਂ ਦਿੰਦਾ, ਨਾਲ ਹੀ ਇਹ ਤਿੰਨ ਗੁਣਾ ਬੈਂਡਵਿਡਥ ਖ਼ਤਮ ਕਰ ਸਕਦਾ ਹੈ。

    ਕਿਰਪਾ ਕਰਕੇ ਇਹ ਮਾਰਕਰ ਇਮੇਜ ਟੈਗ ਨਹੀਂ ਸਮੇਤ ਹਨ, ਇਸ ਲਈ width, height, background ਜਾਂ border ਜਿਹੇ ਅਕਾਰ ਦੇ ਗੁਣ ਨਹੀਂ ਲੱਗਦੇ। ਨਾਲ ਹੀ, ਇਹ ਟੇਬਲ ਸੈਲਜ਼ ਦਾ ਉਪਯੋਗ ਨਹੀਂ ਕਰਦਾ, ਇਸ ਲਈ ਸਬੰਧਤ ਗੁਣਾਂ ਦਾ ਉਪਯੋਗ ਨਹੀਂ ਹੁੰਦਾ। ਇਹ ਬਹੁਤ ਸਾਫ਼ ਅਤੇ ਛੋਟਾ ਹੈ, ਨਾਲ ਹੀ ਇਸ ਨੂੰ ਸਮਝਣ ਲਈ ਸਾਰੀ ਜਾਣਕਾਰੀ ਮਿਲਦੀ ਹੈ。

    CSS ਦੇ ਨਾਲ ਮਿਲ ਕੇ ਇਹ ਮਾਰਕਰ ਵੈਬਸਾਈਟ ਦੇ ਦੌਰੇ ਕਰਨ ਵਾਲਿਆਂ ਨੂੰ ਭਰੋਸੇਯੋਗ ਅਤੇ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੋਣ ਵਾਲੀ ਲੇਆਉਟ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਨਾਲ ਹੀ, ਇਹ ਦੌਰੇ ਕਰਨ ਵਾਲਿਆਂ ਨੂੰ ਵੱਖ-ਵੱਖ ਰੂਪਾਂ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਦਿਸ਼ਾ ਦੇਣ ਦੀ ਸਮਰੱਥਾ ਵੀ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਅਤੇ ਬਿਨਾ CSS ਦੇ ਮਾਹੌਲ ਵਿੱਚ, ਸਾਡੇ ਸਰੰਜਾਮੀ ਮਾਰਕਰ ਸਾਰੀ ਸਮੱਗਰੀ ਨੂੰ ਬੇਕਾਰ ਨਹੀਂ ਕਰ ਕੇ ਪ੍ਰਦਾਨ ਕਰ ਸਕਦੇ ਹਨ।

    ਨਜ਼ਰ ਨਾਲ ਸਫ਼ਦ ਪੜ੍ਹਨ ਵਾਲੇ ਪੜ੍ਹਕਾਰ ਹੋਣ ਨਾਲ ਇਹ ਮਹਿਸੂਸ ਕਰ ਸਕਦੇ ਹਨ ਕਿ a ਐਲੀਮੈਂਟ ਵਿੱਚ ਸਮੇਤ ਹੋਣ ਵਾਲੇ ਟੈਕਸਟ ਬਰਾਬਰ ਨਹੀਂ ਪਰਦੇ ਸਨ, ਇਹ ਵੀ ਸ਼ੁਕਰੀਆ ਹੈ ਕਿ ਸਰੰਜਾਮੀ ਮਾਰਕਰ ਅਤੇ CSS ਦੀ ਸ਼ਾਨਦਾਰ ਸਹਿਯੋਗ ਨਾਲ, ਅਸੀਂ ਕੁਝ ਸਰਲ CSS ਰੂਲਾਂ ਰਾਹੀਂ ਇੱਕ ਟ੍ਰਿਗਰਰ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹਾਂ, ਜਦੋਂ ਯੂਜ਼ਰ ਗਰਾਫਿਕ ਬਰਾਊਜ਼ਰ ਵਰਤਦੇ ਹਨ, ਤਾਂ ਉਹਨਾਂ ਨੂੰ ਸੁੰਦਰ ਨੇਵੀਗੇਸ਼ਨ ਬਟਨ ਦੇਖਣਾ ਪੈਂਦਾ ਹੈ, ਜਦੋਂ ਯੂਜ਼ਰ ਪੂਰੀ ਟੈਕਸਟ ਦੇ ਪੜ੍ਹਕਾਰ ਵਰਤਦੇ ਹਨ, ਤਾਂ ਉਹਨਾਂ ਨੂੰ ਪੂਰੀ ਟੈਕਸਟ ਮਿਲਦੀ ਹੈ, ਇਸ ਤਰ੍ਹਾਂ, ਸਾਰੇ ਯੂਜ਼ਰਾਂ ਲਈ, ਸਮੱਗਰੀ ਇੱਕ ਹੀ ਹੈ।

    اور، کیونکہ علامت کار میں تصویر اور ٹیبل یونٹ شامل نہیں کئے گئے، اس ناٹیوی گار کمپانک کو بغیر کسی ساختاری تبدیلی کے سائٹ کی کسی بھی پیج کی استفادہ کی جاسکتی ہے، ساتھ ہی اس کو مختلف بصری اثرات فراہم کئے جاسکتے ہیں، کوتا کے طور پر، کد کی ماڈیولاریت کو بڑھانے کیلئے، ہم نے کد کی کاروباریت کو بڑھائی ہے.