اعمال کردن شیوه ها(Styles) به تگ های اچ تی ام ال

محتوایی را که بین تگ های اچ تی ام ال قرار می دهیم، به صورت عادی و بدون هیچ فرمت بندی برای کاربر نمایش داده می شود. در واقع اچ تی ام ال کاری جز نمایش دادن محتوا انجام نمی دهد؛ اگر بخواهیم ظاهر محتوا را دستکاری و فرمت بندی کنیم، باید از CSS استفاده کنیم. در قسمت CSS آموزش های لازم در این مورد داده شده است.
اما یک خصیصه با عنوان style وجود دارد که از طریق آن می توانیم ویژگی ها و مقادیر مربوط به CSS را استفاده کنیم. برای استفاده از این خصیصه به صورت زیر عمل می کنیم:

<tagname style="property:value;">

در عبارت بالا در قسمت property یک ویژگی مربوط به CSS را می نویسیم و در قسمت value نیز مقدار مربوط بهآن ویژگی را می نویسیم.
در بخش آموزش CSS نیز گفتم که مهمترین کاربرد CSS جداکردن محتوا از ساختار نمایش (صفحه آرایی) است. ما باید تلاش کنیم در طراحی صفحات وب، محتوا را از کدهای مربوط به ساختار نمایش آن جدا کنیم. به همین خاطر هم هست که در یک طراحی مناسب، سعی می کنیم فایل یا فایل های CSS را از فایل های اچ تی ام ال جدا کنیم تا بتوانیم تمام تنظیمات مربوط به صفحه آرایی را یکجا و با تغییر دادن ساختار فایل CSS عوض کنیم.
منظورم از گفتن این مورد در این قسمت این بود که بدانید استفاده از خصیصه style در تگهای اچ تی ام ال با اصل جداکردن محتوا از ساختار نمایش (صفحه آرایی) سازگار نیست. بهتر است از این خصیصه فقط در حین طراحی استفاده کنیم و هنگامی که به نتیجه مطلوب در مورد یک یا چند تگ اچ تی ام ال رسیدیم، ویژگی ها و مقادیر استفاده شده در این تگ (ها) را در داخل یک فایل جداگانه CSS قرار دهیم.
در زیر چند مثال ساده در مورد استفاده از این خصیصه را با هم مرور می کنیم:

تغییر رنگ پس زمینه

<p style="background-color:red;">
متن مربوط به پاراگراف در این قسمت قرار می گیرد.
</p>

تغییر رنگ محتوا

<p style="color:red;">تغییر رنگ محتوا.</p>

تغییر فونت

<p style="font-family:tahoma;">تعیین فونت برای متن.</p>

پاراگراف در اچ تی ام ال

همانطور که در مثال های قبل هم دیدید، با استفاده از تگ <p> یک پاراگراف را در داخل فایل اچ تی ام ال مشخص می کنیم.
در داخل تگ های اچ تی ام ال به تنهایی نمی توان مشخص کرد که ساختار متن به چه شیوه ای باشد. به عنوان مثال اگر بین کلماتی که می خواهمی در داخل یک پاراگراف بنویسیم، فضای خالی قرار دهیم، مرورگر وب هرگونه فضای خالی بین کلمات را حذف خواهد کرد. همچنین برای رفتن به خط بعدی در داخل یک پاراگراف اگر در داخل تگهای p با استفاده از کلید enter به خط بعدی برویم، در هنگام نمایش این خطها برای کاربر نمایش داده نمی شود و متن به صورت یک خط نمایش داده خواهد شد.

همانطور که قبلا نیز گفتم، تگ انتهایی پاراگراف (</p>) را فراموش نکنید. هرچند اگر تگ انتهایی پاراگراف را فراموش کنید، همه مرورگرهای وب، متن را به درستی نمایش می دهند اما فراموش کردن یا ننوشتن عمدی تگ انتهایی می تواند باعث بروز خطاهای ناشناخته شود و اعتبارسنجی صفحات ایجاد شده را کاهش می دهد.

رفتن به خط بعدی (line break)

همانطور که اشاره شد، در پاراگراف برای رفتن به خط بعدی کافی نیست که کلید enter را فشار دهید، چون مرورگر وب این حالت را یک فضای خالی در نظر می گیرد که در نهایت نیز آن را نادیده خواهد گرفت. برای اینکه متن در داخل پاراگراف به خط بعدی برود باید از تگ <br> استفاده کنیم.

<p>
برای رفتن به خط بعدی <br>به این شکل عمل می کنیم. 
</p>

همانطور که می بینید، تگ <br> یک تگ خالی است. یعنی تگ انتهایی ندارد.

چگونه یک متن را به شکلی که دوست داریم نمایش دهیم

بعضی وقتها ممکن است متنی را داشته باشید که بخواهید به شیوه خاصی برای کاربر نمایش داده شود، مثلا فرض کنید چند بیت شعر دارید که می خواهید همانطور که نوشته می شود برای کاربر نیز نمایش داده شود. در این موارد می توانید متن خودمان را بین تگ های <pre> و </pre> قرار دهیم. با استفاده از این تگ می توانیم متن ها را به همان شکلی که فرمت دهی کرده ایم در مرورگر کاربر نمایش دهیم.

تگ های مربوط به عنوان

با استفاده از تگ های <h1> الی <h6> می توانیم عنوان های (سرتیتر) مختلف با اندازه های متفاوت ایجاد کنیم. عنوان هایی که با تگ <h1> مشخص می شوند دارای بیشترین اهمیت – و بزرگترین اندازه – هستند و عنوان هایی که با تگ <h6> مشخص می شوند دارای کمترین اهمیت – و کوچک ترین اندازه – هستند.

<h1>عنوان نوع اول</h1>
<h2>عنوان نوع دوم</h2>
<h3>عنوان نوع سوم</h3>
<h4>عنوان نوع چهارم</h4>
<h5>عنوان نوع پنجم</h5>
<h6>عنوان نوع ششم</h6>

مرورگرها به صورت خودکار مقداری margin قبل و بعد از هر عنوان (از نوع h) قرار می دهند.
همانطور که در بالا گفتم، با استفاده از تگهای h1 الی h6 می توانیم میزان اهمیت هر عنوان را مشخص کنیم. این تگ ها برای موتورهای جستجو مشخص می کنند که هر عنوان در ساختار صفحه از چه میزان اهمیت برخوردار است و در چه سطحی قرار دارد.

از تگهای h1 الی h6 فقط برای مشخص کردن عناوین – با توجه به میزان اهمیتشان – استفاده کنید و حواستان باشد که از این تگ ها برای برجسته کردن قسمتی از متن استفاده نکنید.

خط افقی

با استفاده از تگ <br& می توانیم یک خط افقی رسم کنیم که به صورت ظاهری می توانیم از این خط برای جداکردن قسمت های مختلف صفحه استفاده کنیم. در مثال زیر با استفاده از این تگ، بین دو بخش صفحه خط جداکننده قرار می دهیم:

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

عنصر <head>

شاید وقتی تگ <head> را ببینید فکر کنید که این تگ هم مربوط به عنوان (سرتیتر) باشد، اما این تگ با عنوان سروکار ندارد.
این تگ یک نگهدارنده برای فراداده (metadata) است. منظور از فراداده، داده هایی است که اطلاعاتی را در مورد سند اچ تی ام ال ارائه می کنند. این نوع داده ها در مرورگر کاربر نمایش داده نمی شوند. عنصر <head> ما بین عنصر <html> و <body> قرار می گیرد.

<!DOCTYPE html>
<html>

<head>
  <title>یک صفحه نمونه</title>
  <meta charset="UTF-8">
</head>

<body>
…

در مثال بالا می بینید که در داخل تگ head، عنوان مربوط به صفحه و فراداده مربوط به charset قرار داده شده. معمولا علاوه بر این دو مقدار، شیوه نامه ها، لینکها، اسکریپت ها، و سایر اطلاعات فراداده ای در داخل این تگ قرار می گیرد.

خصیصه ها (attributes) در اچ تی ام ال

در قسمت های قبل نیز اشاره کردم که با استفاده از خصیصه اطلاعات اضافی در مورد یک عنصر را ارائه می کنیم.
در مورد خصیصه ها باید چند نکته را به خاطر داشته باشید:

• jتمام عناصر اچ تی ام ال می توانند خصیصه داشته باشند.
• خصیصه ها اطلاعات اضافی را در مورد یک عنصر ارائه می کنند.
• خصیصه ها همیشه در تگ آغازین یک عنصر معرفی می شوند.
• معمولا خصیصه ها به صورت جفت های نام مقدار نوشته می شوند: name=”value”

در زیر به تعدادی از خصیصه های پرکاربرد در اچ تی ام ال اشاره می کنم:

خصیصه lang

در تگ <html> می توانیم با استفاده از این خصیصه، زبان سند را مشخص کنیم. ما باید زبان سند را مشخص کنیم، چون این مساله برای برنامه های کاربردی دسترسی به متن (خواننده های صفحه) و همچنین موتورهای جستجو مهم و کمک کننده است:

<!DOCTYPE html>
<html lang="fa">
<body>

...

</body>
</html>

خصیصه title

مقدار مربوط به این خصیصه به صورت tooltip در بالای عنصر (هنگامی که موس را بر روی آن قرار می دهیم) ظاهر می شود. در زیر استفاده از این خصیصه را برای تگ <p> می بینید:

<p title="متن راهنما">
متن مربوط به پاراگراف.
</p>

خصیصه href

در اچ تی ام ال برای ساختن لینک از تگ <a> استفاده می کنیم. برای مشخص کردن آدرس لینک از خصیصه href استفاده می کنیم.

<a href=http://www.samplewebsite.com>یک لینک در اچ تی ام ال</a>

خصیصه های مربوط به تصویر

برای اینکه در داخل فایل اچ تی ام ال از تصاویر استفاده کنیم، از تگ <img> استفاده می کنیم. برای مشخص کردن منبع فایل از خصیصه src استفاده می کنیم؛ برای مشخص کردن اندازه های تصویر از خصیصه های height و width استفاده می شود.

<img src="sample.jpg" width="104" height="142">

خصیصه alt اگر بخواهیم به جای یک تصویر – زمانی که تصویر به هر دلیلی وجود ندارد یا قابل نمایش نیست – از یک متن جایگزین (alternative) استفاده کنیم، باید از این خصیصه استفاده کنیم.
رباطها و نرم افزارهای خواننده صفحه می توانند این خصیصه را ببینند که این ویژگی می تواند مثلا برای افراد نابینا یا موتورهای جستجو مفید باشد.

<img src="sample.jpg" alt="عکس نمونه" width="104" height="142">

همانطور که قبلا هم گفتم در نسخه 5 اچ تی ام ال مثل نوشتن تگ ها، برای نوشتن خصیصه ها هم می توانیم خصیصه را با حروف بزرگ یا حروف کوچک بنویسیم. البته بر اساس توصیه W3C بهتر است خصیصه ها با حروف کوچک نوشته شوند.

استفاده از علامت نقل قول در نوشتن مقدار خصیصه ها

در استانداردهای مربوط به نسخه 5 اچ تی ام ال لازم نیست که مقدار خصیصه ها در داخل علامت نقل قول نوشته شود. مثلا یک لینک را می توانیم به این شکل بنویسیم:

<a href=http://www.samplesite.com>

بر اساس توصیه W3C باید مقادیر خصیصه ها را داخل علامت نقل قول قرار دهیم. مثلا فرض کنیم که در خصیصه alt بین حروفی که برای مقدار این خصیصه قرار می دهیم فاصله وجود داشته باشد، اگر در این حالت از علامت نقل قول استفاده نکنیم، متن جایگزین به درستی نمایش داده نخواهد شد.
این نکته را هم در نظر داشته باشید که معمولا مقادیر خصیصه ها را داخل علامت نقل قول دوتایی قرار می دهیم ("). در برخی مواقع، مثلا زمانی که در داخل متن جایگزین، علامت نقل قول دوتایی وجود داشته باشد، این مقادیر را داخل علامت نقل قول تکی (') قرار می دهیم تا علامت نقل قول دوتایی نمایش داده شود و برای کاربر قابل مشاهده باشد.

ساختار عناصر در اچ تی ام ال

هر عنصر اچ تی ام ال معمولا یک تگ آغازین و یک تگ پایانی دارد که محتوا بین تگ های آغازین و پایانی قرار می گیرد.

 <tagname>محتوا در این قسمت قرار می گیرد</tagname> 

منظور از عنصر (element) اچ تی ام ال هر چیزی است که از تگ آغازین تا تگ پایانی قرار می گیرد.

<p>یک پاراگراف</p>

این نکته را هم در نظر داشته باشید که بعضی از عناصر اچ تی ام ال دارای محتوا نیستند. به این نوع از عناصر، عناصر خالی (empty) می گویند. عناصر خالی دارای تگ انتهایی نیستند؛ مثل <br> هیچ وقت تگ انتهایی یک عنصر را فراموش نکنید
در مورد برخی از عناصر اچ تی ام ال، اگر تگ انتهایی را ننویسیم مشکلی پیش نمی آید یعنی در واقع نوشتن تگ انتهایی برای آنها یک گزینه انتخابی است (به مثال زیر نگاه کنید). اما این نکته را در خاطر داشته باشید که همیشه تگ انتهایی عناصر را بنویسید؛ به خاطر اینکه اگر تگ انتهایی یک عنصر را ننویسید ممکن است فایل شما دچار مشکل شود یا خطایی رخ دهد. پس بهتر است از بروز مشکل پیشگیری کنیم.

<html>
<body>

<p>پاراگراف اول
<p>پاراگراف دوم

</body>
</html>

عناصر خالی در اچ تی ام ال

همانطور که در بالا اشاره شد، عناصری که دارای محتوا نیستند را عنصر خالی (empty) می نامیم. به عنوان مثال عنصر <br> یا line break یک عنصر خالی است که دارای محتوا نیست و تگ انتهایی نیز ندارد. البته این تگ را می توان به صورت <br /> نیز نوشت. در واقع با این روش این عنصر را می بندیم. این نکته را هم در نظر داشته باشید که در نسخه 5 اچ تی ام ال لازم نیست که یک عنصر خالی را ببندیم.
اما اگر می خواهید فایل اچ تی ام ال شما به صورت سختگیرانه تری اعتبار سنجی شود یا اینکه تمایل دارید فایل شما توسط تفسیر کننده های XML نیز قابل خواندن باشد باید تمام عناصر اچ تی ام ال را به درستی ببندید.

کوچکی یا بزرگی حروف در عناصر اچی تی ام ال

این نکته را به خاطر داشته باشید که در نسخه 5 اچ تی ام ال می توانید تگ ها را با حروف بزرگ یا کوچک یا ترکیبی از آن دو بنویسید! اما W3C توصیه می کند که از حروف کوچک برای تگهای خود استفاده کنید. این کار باعث می شود اعتبارسنجی فایل های ما سخت گیرانه تر باشد و از طرفی در مورد فایل هایی مثل XHTML نیز فایل ما دچار مشکل نخواهد شد.

اصول کلی و تگ های پرکاربرد در اچ تی ام ال

همانطور که در مثال های قبلی نیز مشاهده کردید هر فایل اچ تی ام ال باید با یک اعلان مربوط به نوع سند آغاز شود که در اچی تی ام ال نسخه 5 این اعلان به این شکل نوشته می شود:
<!DOCTYPE html>

اما خود فایل اچ تی ام ال مابین تگ های <html> و </html> نوشته می شود. یعنی تمام عناصر مربوط به فایل اچ تی ام ال باید مابین این تگها قرار بگیرند.

آن قسمت از فایل اچ تی ام ال که توسط کاربر قابل مشاهده است نیز مابین تگ های <body> و </body> نوشته می شود.

مثال زیر را ببینید:

<!DOCTYPE html>
<html>
<body>

<h1>یک سر تیتر</h1>
<p>متن داخل یک پاراگراف</p>

</body>
</html>

در این قسمت می خواهیم فقط با تعدادی از تگهای پرکاربرد اچ تی ام ال و ساختار کلی یک فایل اچ تی ام ال آشنا شویم. در قسمت های بعدی توضیحات کامل تری در مورد ساختار تگ ها در داخل فایل اچ تی ام ال ارائه خواهم کرد.

در مثال بالا دو تگ پرکاربرد در زبان اچ تی ام ال را مشاهده می کنید. تگ مربوط به سرتیتر (<h1>) و تگ مربوط به پاراگراف (<p>).

سرتیتر ها را می توانیم در اچ تی ام ال تا 6 سطح متفاوت تعریف کنیم که این سرتیترها با استفاده از تگهای <h1> تا <h6> مشخص می شوند. در مثال بالا از سرتیتر نوع 1 استفاده کرده ایم که از نظر اندازه فونت از همه سرتیتر ها دشت تر است.

برای اینکه در فایل اچی تی ام ال مشخص کنیم که یک تکه از متن به عنوان پاراگراف نوشته شده است، باید این متن را مابین تگ های <p> و </p> قرار دهیم.

یکی دیگر از تگ های پرکاربرد در اچ تی ام ال تگ <a> است که از آن برای ایجاد لینک استفاده می کنیم. در واقع صفحات وب بدون امکان برقراری لینک کاملا بی معنا و غیر مفید است. برای ایجاد یک لینک از تگ های <a> و </a> استفاده می کنیم.

در داخل این تگ با استفاده از خصیصه (attribute) href باید مقصد لینک را مشخص کنیم. با استفاده از خصیصه ها اطلاعات اضافی در مورد عناصر اچی تی ام ال را درج می کنیم که یک نمونه را در عنصر لینک مشاهده کردید:

<a href=http://www.samplesite.com>یک لینک ساده</a>

یکی دیگر از موارد پر استفاده در اچ تی ام ال درج تصویر در داخل صفحه است. با استفاده از عنصر <img> می توانیم یک تصویر را در داخل متن نمایش دهیم. این عنصر دارای 4 خصیصه است: فایل منبع (src)، متن جایگزین (alt)، ارتفاع (height)، عرض (width).

یک مثال ساده:

<img src="sample.jpg" alt="طراحی وب سایت کتابخانه" width="50" height="60">

ایجاد یک فایل اچ تی ام ال ساده

در ابتدای هر فایل اچ تی ام ال حتما باید تگ اعلان نوع فایل را قرار دهیم. این تگ به این صورت است: <!DOCTYPE html> پس از قرار دادن اعلان نوع فایل، تگ <html> قرار می گیرد؛ در واقع با استفاده از این تگ فایل خود را شروع می کنیم و پس از آنکه تمام محتویات مورد نظر را داخل فایل اچ تی ام ال قرار دادیم، تگ انتهایی راقرار می دهیم (</html>). آن قسمتی از فایل اچ تی ام ال که توسط کاربر در مرورگر وب قابل مشاهده می باشد داخل تگهای آغازین و پایانی <body> قرار می گیرد (<body></body>). در زیر یک فایل بسیار ساده و ابتدایی اچ تی ام ال را مشاهده می کنید که با همه سادگی در مرورگر وب قابل نمایش و مشاهده است:

<!DOCTYPE html>
<html>
<body>

<h1>یک عنوان سطح اول</h1>

<p>یک پاراگراف نمونه.</p>

</body>
</html>

همانطور که در قسمت مقدمه ذکر شد، برای اینکه فایل اچ تی ام ال خود را بسازید، فقط کافی است یک فایل متنی با استفاده از نرم افزار NotePad ایجاد کنید و سپس قطعه کدهای بالا را در داخل آن تایپ نمایید (یا همین کدها را کپی کنید). سپس فایل را با یک نام دلخواه و با پسوند .html ذخیره کنید. فایل ایجاد شده را می توانید به راحتی با استفاده از هر نوع مرورگر وب مشاهده کنید.

نرم افزار مناسب برای ویرایش تگ های اچ تی ام ل (ویرایشگر اچ تی ام ال)

     همانطور که می دانید زبان اچ تی ام ال یک زبان نشانه گذاری است که از تعدادی علائم نشانه گذاری تشکیل شده است. در واقع کد های اچ تی ام ال چیزی جز مقداری متن نیست. از آنجا که تفسیر اچ تی ام ال و تبدیل کدها به آنچه باید برای کاربر نمایش داده شود نیاز به موتور مفسر یا کامپایلر خاصی ندارد، می توان کدهای اچ تی ام ال را به راحتی با یک نرم افزار ساده متنی، مانند Notepad ویرایش و ایجاد کرد. در ابتدای کار نیز تمرین بسیار خوبی است که کدهای اچ تی ام ال خود را با استفاده از یک ویرایشگر متن ساده، ماننده Notepad، ایجاد کنید؛ با این کار بر ساختار تگ های اچ تی ام ال تسلط بسیار بیشتری پیدا خواهید کرد. اما در عمل، پس از یادگیری ابتدایی ساختار اچ تی ام ال، به نرم افزاری احتیاج خواهیم داشت که سرعت و سهولت بیشتری داشته باشد. یکی از بهترین نرم افزارهایی که برای ایجاد و ویرایش تگهای اچ تی ام ال می توان پیشنهاد کرد، نرم افزار Adobe Dreamweaver است. این نرم افزار امکانات فراوانی دارد که در آینده توضیحات بیشتری در مورد آن ارائه خواهد شد. 

     یکی دیگر از نرم افزارهای آشنا در زمینه ایجاد و ویرایش تگ های اچ تی ام ال، نرم افزار Office Frontpage است که نسبت به نرم افزار Dreamweaver در سطح پایین ترین قرار دارد اما می توانید از آن استفاده کنید. 

     پیشنهاد می کنم چنانچه تمایل دارید به صورت جدی کد نویسی اچ تی ام ال را دنبال کنید، از نرم افزار Adobe Dreamweaver استفاده نمایید. با استفاده از این نرم افزار می توانید انواع صفحات دیگر، مثلا php، را نیز به راحتی ایجاد کنید. 

مقدمه - اچ تی ام ال چیست؟

     زبان اچ تی ام ال (HTML-Hyper Text Markup Language) زبان اصلی و پایه مورد استفاده در صفحات وب است. همانطور که از نام این زبان مشخص است، زبان اچ تی ام ال یک زبان نشانه گذاری (Markup) است؛ به این معنی که یک سند را با استفاده از تعدادی تگ های از پیش تعریف شده می توانید نشانه گذاری کنید. با استفاده از این تگها می توان محتوای سند را ساختاردهی کرد و مشخص کرد که هر قسمت از محتوا چه ساختاری دارد و مربوط به چه قسمتی می باشد. مثلا با استفاده از تگها می توان مشخص کرد که قسمتی از متن به عنوان سرصفحه (header) تعریف شود و قسمت دیگر به عنوان متن پاراگراف. همانطور که می بینید زبان اچ تی ام ال یک زبان برنامه نویسی مانند زبان سی یا پرل یا چیزهایی شبیه به آن نیست، بلکه اچ تی ام ال یک زبان معنایی است که با استفاده از آن متن را نشانه گذاری می کنیم. با استفاده از این نشانه گذاری ها به مرورگر وب می فهمانیم که با هر قسمت از متن به چه طریقی برخورد کند.

     یکی دیگر از توانایی های پرکاربرد و قدرتمند زبان اچ تی ام ال در آن است که می توانیم با استفاده از این زبان به اسناد دیگر لینک برقرار کنیم؛ و از لحاظ فیزیکی نیز هیچ اهمیتی ندارد که اسناد لینک شده در چه محلی قرار داشته باشند، فقط این اسناد باید در محیط وب قابل دسترس باشند. با استفاده از یو آر ال (URL- Uniform Resource Locator) می توان به تمامی منابع موجود در وب دسترسی پیدا کرد.

     در محیط وب، پروتکل های فراوانی وجود دارند، اما زبان اچ تی ام ال هنوز هم پایه و اساس وب است، یعنی شما در نهایت با استفاده از زبان اچ تی ام ال است که اطلاعات را در معرض دید بازدیدکنندگانتان قرار می دهید.

     برای اینکه با ساختار یک فایل اچ تی ام ال ساده از نزدیک آشنا شوید، در زیر یک نمونه از فایل اچ تی ام ال آورده شده است:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body {
	font-family: "B Yekan";
	font-size: 12px;
	direction:rtl;
}
</style><title>یک صفحه ساده اچ تی ام ال</title>
</head>

<body>
<h1>اچ تی ام ال چیست</h1>
<p>
زبان اچ تی ام ال زبان اصلی و پایه مورد استفاده در صفحات وب است. <br /> 
همانطور که از نام این زبان مشخص است، زبان اچ تی ام ال یک زبان نشانه گذاری است؛ 
</p>
</body>

     مثال بالا شامل دو قسمت اصلی است. قسمت مربوط به بدنه فایل که محتوای اصلی در داخل آن قرار می گیرد و قسمت مربوط به سرصفحه که اطلاعات مربوط به سند در داخل آن قرار می گیرد. در مثال بالا در قسمت سرصفحه، عنوان فایل و همچنین یک قطعه کد شیوه نامه آبشاری (CSS – Cascading Style Sheet) قرار گرفته است. در قسمت بدنه نیز یک متن قرار دارد که شامل عنوان اصلی و متن مربوط به پاراگراف می باشد.

     اولین تگی (tag) که در مثال بالا به چشم می خورد، تگ اعلان (Declaration) نوع صفحه می باشد که با <!DOCTYPE html> مشخص شده است. این اعلان به مرورگر کمک می کند محتوای صفحه وب را به درستی نمایش دهد. انواع مختلفی از نسخه های اچ تی ام ال وجود دارد و مرورگر وب باید بداند که صفحه اچ تی ام ال با چه نوع و چه نسخه ای از زبان اچ تی ام ال طراحی شده است. توجه داشته باشید که اعلان نوع سند نسبت به بزرگی و کوچکی حروف حساس نیست.

اعلان های معمول مربوط به نوع سند به شرح زیر می باشند:

برای نسخه HTML5

<!DOCTYPE html>

برای نسخه HTML 4.0.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

برای نسخه XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

مطمئنا نیازی نیست که این کدها را حفظ کنید، فقط توجه داشته باشید که در هنگام ایجاد سند اچ تی ام ال مورد نظر خود، قسمت مربوط به نوع سند را به درستی اعلام کنید.

نسخه های مختلف مربوط به زبان اچ تی ام ال به شرح زیر می باشند:

نسخه های مختلف زبان اچ تی ام ال

نسخه	سال
HTML	1991
HTML 2.0	1995
HTML3.2	1997
HTML4.0.1	1999
XHTML	2000
HTML5	2014

     برای اینکه بتوانید محتوای نوشته شده در مثال بالا را در مرورگر خود مشاهده کنید می توانید به راحتی متن مثال بالا را کپی کرده و در داخل notepad قرار دهید و سپس با نام دلخواه و پسوند .html آن را ذخیره کنید. فقط توجه داشته باشید که قسمت save as type را all files انتخاب کنید و قسمت encoding را نیز بر روی UTF-8 تنظیم کنید تا متون نوشته شده به زبان فارسی به درستی در مرورگر شما نمایش داده شود. نتیجه مثال بالا در مرورگر وب به این شکل خواهد بود:

تنظیمات مربوط به فایل notepad نیز در شکل زیر قابل مشاهده هستند:

ساختار یک صفحه اچ تی ام ال

به طول کلی می توان ساختار یک صفحه اچ تی ام ال را به این شکل نشان داد:

<html>

<head>

<title>عنوان صفحه</title>

</head>

<body>

<h1>یک سر تیتر</h1>

<p>متن پاراگراف در این قسمت نوشته می شود.</p>

<p>و این هم یک پاراگراف دیگر.</p>

</body>

</html>

توجه داشته باشید که فقط محتوای قرار گرفته بین تگهای body در مرورگر مخاطب نمایش داده می شود.