با اين که صفحات وب بسيار پيچيده مي باشند، اما زير ساخت آنها بسيار ساده باقي مانده است.هر صفحه وب از سه عنصر اصلي تشکيل شده است.

1- محتويات متني (Text Content) که شامل Header ها، پاراگرافهاي اصلي و هر چيز ديگري که بر روي صفحه ظاهر مي شوند مي باشند.
2- رفرنسها (References) که باعث برقراري ارتباطات مي شوند. همانند لينکها، تصاوير و ... .
3- علائم (Markup) که باعث چگونگي نمايش محتويات متني و رفرنسها مي شوند.

بايد توجه داشته باشيد که تمامي اين عناصر، به صورت متن مي باشند. اين قابليت به ما اين امکان را مي دهد که صفحات وب خود را با فرمت فقط متن (Text Only Format) ذخيره نماييم. در نتيجه، تمامي برنامه هاي مرورگر بر روي هر کامپيوتري، قادر به نمايش صفحه وب ما خواهد بود. اين دليل را مي توان يکي از علل جهاني شدن وب به حساب آورد.
همچنين صفحات وب اطلاعات ديگري را نيز شامل مي شوند. اطلاعاتي از قبيل نوع زبان يا اسکريپتي (Script) که براي نوشتن متن به کار رفته است (رمزگذاري يا Encoding). نوع علائمي که براي تشريح اين نوع متنها به کار رفته است (نوع سند يا DOCTYPE).

انواع علائم: المنتها (Elements)، خاصيت ها (Attributes)، مقادير (Values)
همان طور که در بالا گفته شد، (X)HTML، از علائم، براي چگونگي نمايش محتويات متني و رفرنسها استفاده مي کند. به طور کلي سه نوع Markup اصلي وجود دارد: المتنها (Elements)، خاصيتها (Attributes) و مقادير (Values) که در زير به تشريح هر يک از آنها مي پردازيم.
* منظور از (X)HTML، دو زبان HTML و XHTML مي باشد. اگر يک ويژگي در دو زبان HTML و XHTML مشابه باشد، براي اشاره همزمان به هر دوي آنها، از کلمه (X)HTML استفاده مي کنم. ولي وقتي تنها يک زبان خاص مورد نظر باشد، نام آن اصلي آن زبان را ذکر مي کنم.

المنت ها
کار اصلي المنت ها، مشخص کردن قسمتهاي مختلف يک صفحه وب مي باشد. مثلا اين که يک عکس در کجاي صفحه قرار بگيرد و يا اينکه فلان متن، با چه فونتي و چه رنگي و در کجاي صفحه ظاهر شود و ... . بعضي از المنتها، تنها شامل يک خاصيت و بعضي ديگر داراي چندين خاصيت مي باشند. همچنين المنتها مي توانند متن يا المنتهاي ديگر را نيز در برگيرند و يا ممکن است خالي باشند. در زير ساختار کلي يک المنت، نشان داده شده است.

My name is <em>Mojtaba Dashti Nejad</em>

اين المنت (منظور المنت em است)، عبارت Mojtaba Dashti Nejad را تحت تاثير قرار مي دهد. در بيشتر مرورگرها (Browsers)، کلمه تاکيد شده به وسيله المنت em، به صورت کج (Italic) نشان داده مي شود.


<img src="http://www.digitall-life.8k.com/images/ComputerWeblog/Logo.jpg" width="88" height="31"/>
المنت هاي خالي، همانند مثال بال (img)، هيچ متني را در بر نمي گيرند. دقت داشته باشيد که کاراکتر اسلش (/)، که در انتهاي اين نوع المنتها قرار مي گيرد، در HTML اختياري و در XHTML اجباري است.

خاصيتها و مقادير
المنت img در مثال بالا را در نظر بگيريد. خاصيتهاي width و height، طول و عرض عکس انتخاب شده را تايين مي کنند. خاصيت src، محل عکس را مشخص مي کند و ... .
در اين مثال (منظور همان مثال بالا مي باشد)، خاصيتهاي src و width و height، جزء خاصيتهاي المنت img محسوب مي شود. همچنين اعداد و عباراتي که در بين علامتهاي کوتيشن (") و بعد از علامت مساوي قرار گرفته اند، نشان دهنده مقادير خاصيتهاي مربوطه مي باشد. دقت داشته باشيد که گذاشتن علامتهاي کوتيشن در HTML اختياري و در XHTML اجباري است.
بايد توجه داشته باشيد که خاصيتها، هميشه در تگ ابتدايي قرار مي گيرند. بعضي از المنت ها، تنها شامل يک خاصيت و بعضي ديگر شامل چندين خاصيت مي باشد. اگر يک المنت شامل چند خاصيت باشد، در نوشتن آنها، ترتيب اهميت ندارد، فقط بايد بين هر خاصيت، يک فاصله خالي (Space) قرار دهيد.
بعضي از خاصيت ها مي توانند هر مقداري را قبول کنند، ولي مقادير بعضي از خاصيت ها، محدود مي باشد. معمول ترين آنها، خاصيت هايي هستند که مقادير از پيش تعريف شده يا مقادير شماري (Enumerated) را قبول مي کنند. به عبارت ديگر، براي هر خاصيت، ليستي از مقادير استاندارد موجود مي باشد و شما مجبور به انتخاب يکي از آنها هستيد. مثال زير، شما را در درک اين مطلب ياري مي کند.


<link rel="stylesheet" type="text/css"media="screen" href="Mojtaba.css" />

خاصيت media در اين مثال، تنها مي تواند يکي از سه مقادير screen و handheld و print را اختيار کند. دقت
داشته باشيد که در XHTML، اين نوع مقادير بايد با حروف کوچک نوشته شوند. ولي در HTML، بزرگ و يا کوچک بودن حروف، تاثيري ندارد.
مقادير بسياري از خاصيتها نيز به صورت يک عدد مستقل و يا يک مقدار درصدي تعيين مي شوند. مخصوصا خاصيتهايي که اندازه يا طول را مشخص مي کنند. دقت داشته باشيد که يک مقدار عددي، هيچگاه شامل واحد اندازه گيري نمي باشد. در شرايطي هم که واحد اندازه گيري مورد نياز باشد (مثلا هنگامي که مي خواهيد پهناي يک تصوير را مشخص کنيد)، از واحد پيکسل (pixel) استفاده مي شود.
خاصيتهايي که براي کنترل رنگ به کار مي شوند، مي توانند با نام رنگ و يا يک مقدار هگزادسيمال (Hexadecimal) مشخص شوند.

المنت هاي Block-Level و Inline
يک المنت مي تواند به دو صورت Block-Level و يا Inline نوشته شود. اگر به صورت Block-Level باشد، همواره بر روي روي يک خط جديد قرار خواهد گرفت. همانند يک پاراگراف در يک صفحه. اگر به صورت Inline باشد، بر روي خط فعلي نوشته مي شود. همانند يک کلمه در يک جمله.
المنت هاي Block-Level، مي توانند شامل المنتهاي Inline و Block-Level و متن باشند. ولي المنتهاي Inline، تنها قادرند متن و المنت هاي Inline را در بر گيرند.
علاوه بر اين، المنت ها مي توانند به صورت ليست نيز باشند که چيزي به غير از المنتهاي Block-Level و Inline هستند. در مورد المنت هاي ليست، در درسهاي بعدي توضيح خواهم داد.

<div><img src="Mojtaba.jpg" alt="Test
Picture" width="300" height="175" />

<p>My name is <em>Mojtaba Dashti Nejad</em></p>

</div>در اين کد، المنتهاي div و p، جزء المنتهاي Block-Level محسوب مي شوند. المنتهاي img و em، المنتهاي Inline هستند.

المنت هاي Parent (مادر) و Child (فرزند)
اگر المنت A، المنت B را در بر گيرد، به المنت A، المنت Parent و به المنت B، المنت Child گويند. اين نوع المنتها را مي توان به صورت يک مادر و فرزند در نظر گرفت.

<div>
   <img src="Mojtaba.jpg" … />
       
<p>My name is
           
<em>Mojtaba Dashti Nejad</em>
       
</p>
       <p>Have a Nice Day</p>
</div>

دقت داشته باشيد که تو رفتگيهايي که در کد بالا مشاهده مي شود، در نشان دادن کد تاثيري ندارند. بلکه براي خواناتر کردن کد مورد استفاده قرار مي گيرند. همچنين مي توانيد کدهاي (X)HTML را به صورت تو در تو نيز بنويسيد. کد زير، همان کد بالاست. تنها تفاوت آن با کد بالا در اين است که به صورت تو در تو نوشته شده است. خواندن يک کد تو در تو، بسيار مشکل تر از خواندن يک کد غير تو در تو است.


<div><img src="Mojtaba.jpg" … /><p>My name is <em>Mojtaba Dashti Nejad</em></p><p>Have a Nice Day</p></div>

هنگامي که يک کد را به صورت تو در تو مي نويسيم، بايد به اين نکته مهم توجه کنيم که هر المنت، بايد المنت بعدي را به طول کامل در بر گيرد. به عنوان مثال، اگر ابتدا المنت A و سپس المنت B را باز کرديم، بايد اول المنت B و سپس المنت A را ببنديم.

1- <p>My name is <em>Mojtaba Dashti Nejad</em></p>
2- <p>My name is <em>Mojtaba Dashti Nejad</p></em>


مثال شماره 1، شکل صحيح يک کد تو در تو را نشان مي دهد. اما مثال 2، يک کد نادرست مي باشد.