طراحی صفحات وب ساده: آشنایی با زبان XHTML

نوشته ی طراحی صفحات وب ساده: آشنایی با زبان XHTML بر گرفته از کتاب طراحی صفحات وب مقدماتی (جلد اول) است که توسط پایگاه کتاب های درسی منتشر شده است. تــا این جای کتاب با مفاهیــم پایه ای وب و نیز اطلاعات مورد نیاز در مورد فرآیند طراحی صفحات وب آشــنا شده اید و وقت آن رسیده تا کم کم به ســراغ موضوعات عملی تر در زمینه طراحی صفحات وب برویم. در این فصل، ابتدایی ترین روش موجود برای ایجاد یک صفحه وب با اســتفاده از زبان XHTML و نرم افــزار Notepad را فرا می گیرید. مهارتی که اکثر قریب به اتفاق طراحان وب در دنیا، کار خود را از این نقطه مهم شروع کرده اند.

آشنایی با زبان XHTML

در فصل دوم هنگامی که طراحی صفحات وب ساده و زبان های نشانه گذاری را مرور می کردیم با کلیاتی از زبان XHTML آشنا شدید و دانستید که این زبان برای رفع کاستی های زبان HTML و سازگار نمودن آن با فن‌آوری XML در سال 2000 میلادی عرضه گردید.

این زبان برای ایجاد هماهنگی بیشتر میان صفحات وب با تغییراتی که در عرصه فن‌آوری ارتباطات و اطلاعات در حال وقوع بود توسط انجمن وب پیشنهاد گردید. و اگرچه سهولت کدنویسی با  HTMLرا با وضع قوانین ســختگیرانه تا حدودی از بین برد. اما باعث شــد هماهنگی لازم میان صفحات وب و انواع مرورگرهای ســاخته شده برای رایانه یا سایر دســتگاه‌های ارتباطی مانند تلفن همراه ایجاد شود. و طراحــان صفحات وب و کاربران بتوانند از مزایای فــنآوری XML به‌ویژه در زمینه تبادل اطلاعات بهره‌مند شوند.

انجمــن وب، XHTML  را به عنــوان یک فرمولبندی تــازه از 0.4 HTML در 0.1 XML  تعریف نموده و طراحان و کدنویســان را ملزم می‌کند صفحات وب را با استانداردهای تعریف شده توسط این انجمن تولید نمایند. این اســتانداردها در قالب یک فایل «تعریف نوع سند» یا DTD تعریف می‌شوند و هر صفحه وب تولید شده با زبان XHTML باید یکی از انواع DTD ارجاع داشته باشد؛ کاری که در HTML لزومی برای انجام آن وجود نداشت.

علاوه بر این، در زبان XHTML تغییراتی از نظر نوع نگارش برچســب ها نسبت به HTML ایجاد شده است. برای نمونه درج برخی برچسب ها در یک فایل XHTML اجباری گردیده و برچسب ها حتما اید با حروف کوچک نوشته شوند.

مفهوم برچسب و ساختار آن در طراحی صفحات وب

در طراحی صفحات وب ساده اســنادی که با زبان های نشانه گذاری تولید می شوند حاوی مجموعه از برچسب ها هستند که نحوه تفســیر سایر اطلاعات موجود در ســند را تعیین می کنند. هر یک از این برچسب ها با علام > شروع شده و با علامت < پایان می‌پذیرند و حاوی حروفی هستند که کار برچسب را مشخص می کنند. برای مثال در زبان XHTML برچســب <b> برای توپر کردن نوشته هایی کاربرد دارد که بین برچسب های شــروع و پایان قرار می گیرند. به مجموعه برچسب ها و محتوای قرار گرفته درون آن ها هم عنصر گفته می شود.

نکته مهم در مورد برچسب های پایان این است که یک علامت / در ابتدای نام آن ها قرار می گیرد تا از برچسب های شروع متمایز شوند. یکی از تفاوت های XHTML با HTML در همین نکته نهفته است. چون در HTML برخی برچسب ها می توانند فاقد برچسب پایان باشند ولی چنین کاری در XHTML مجاز نیست.

برخی از برچســب ها علاوه بر نــام دارای جزء دیگری با عنوان مشخصه (Attribute) هســتند. که ویژگی های برچســب را تعیین می کند. برای مثال برچسب <a> که برای ایجاد پیوند به صفحه ای دیگر یا نقطه ای در صفحه جاری مورد استفاده قرار می‌گیرد دارای مشخصه‌ای است که href نامیده می‌شوند و نشانی پیوند را در خود جای می‌دهد.

>a href=”https://www.no-yad.ir“> وب سایت اندیشه نگاران شیز</a>

ساختار عمومی برچسب ها در زبان XHTML به صورت زیر است:

<tag attribute=”value”>

در فصل های آتی هنگام معرفی برچســب ها و کارکرد هر یک از آن ها، با مشــخصه‌های هر برچسب آشنا خواهید شد.

قواعد به کارگیری برچسب ها در طراحی صفحات وب

در طراحی صفحات وب ساده برچسب های قابل اســتفاده در زبان XHTML را می توان به صورت مجزا یا تو در تو مورد استفاده قرار داد.

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

برای آشــنایی با نحوه اســتفاده از برچســب های تو در تو، به مثال زیر دقت کنید. در این مثال از برچسب <p> برای ایجاد یک پاراگراف و از برچسب <i> برای مایل نمودن نوشته ها استفاده شده است.

<p>You see a<b>bold</b>and a<b><i>bold-italic</i></b> word </p>

این کد در مرورگر به صورت زیر نمایش داده می شود.

همانطور که در کد مذکور میبینید، برچسب  <b>درون <p> و برچسب <i>هم درون <b > قرار گرفته و کاربرد برچسب های تو در تو را نشان می دهند. نکته قابل توجه در کدهای XHTML این است که باید ترتیب برچســب های شروع و پایان رعایت شــود و درست مانند کارکرد پرانتزها، هر برچسبی که زودتر شروع شده، دیرتر پایان بپذیرد. برای مثال کد زیر با وجود معتبر بودن در اسناد HTML در زبان XHTML قابل استفاده نیست.

<b><i>bold-italic</b></i>

مطلب مهم دیگر درباره نحوه نگارش کدهای XHTML به بزرگی و کوچکی حروف مربوط می شود. برچســب ها و همه مشــخصه ها در این زبان باید با حروف کوچک نوشته شــوند در حالی که در زبان HTML  اجباری برای انجام این کار وجود نداشت.

ارزیابی صفحه وب

برای ارزیابی یک صفحه وب در طراحی صفحات وب ساده که بر روی ســرور وب قرار گرفته و بررســی تطبیق آن با قواعد وضع شــده در زبان های نشانه گذاری می توانید نشانی صفحه مورد نظر را در بخش ارزیابی وبسایت انجمن وب به نشانی http://validator.w3.org وارد نموده و با کلیک روی دکمه Check خطاهای احتمالی موجود در صفحه را ببینید.

همچنیــن اگر صفحه را روی رایانه خود ایجاد کرده اید و میخواهیــد آن را ارزیابی کنید باید در نشــانی ذکر شده، به زبانه Upload File by Validate  مراجعه و فایل را برای وبسایت ارسال کنید تا نتیجه ارزیابی و خطاهای احتمالی موجود نشــان داده شود. این کار در زمانی که مشغول طراحی های اولیه هستید به شما کمک زیادی می کند تا خطاهای موجود در کد را به سادگی شناسایی کنید.

فرمتهای ذخیره سازی صفحات وب

صفحات وب تولید شده در محیط های ویرایش متن یا نرم افزارهای طراحی وبسایت را می توان با دو فرمت html و htm ذخیره نمود که هر دو در مرورگرها به یک شــکل نشــان داده می شوند. و از این نظر تفاوتی میان آن ها وجود ندارد. با این حال هنگامی که وبســایت را روی سرور وب قرار می دهید تا از طریق اینترنت در دسترس باشد با دو تفاوت جزیی میان این دو فرمت روبرو می شوید:

• برخی سیســتم عامل ها مانند Unix و Linux که نصب آن ها بر روی سرورهای وب بسیار رایج است از پسوندهای چهارحرفی مانند html پشتیبانی نمی کنند.
• چنانچه صفحه اول ســایت به دو صورتindex و html.index بر روی سرور وب ذخیره شــده باشد، هنگامی که نام ســایت را در مرورگر وب وارد می کنید، به صورت پیشفرض، htm.index نشان داده می شود.

لذا توصیه می شود برای ذخیره سازی صفحات وب ساخته شده، از فرمت htm استفاده نمایید.

صفحات ایستا و پویا

در طراحی صفحات وب ساده آشنایی با صفحات ایستا و پویا از ضروریات به شمار می آید. ممکن است هنگام گشت و گذار در اینترنت و مشاهده وبسایت های گوناگون، در نوار نشانی مرورگر با پســوندهای دیگری غیر از htm و html مواجه شوید. که در این میان، فرمتهای php ،asp ،aspx و jps  عمومیت بیشتری دارند. تفاوت این پسوندهای نا آشنا با فرمت هایی مانند htm و html چیست؟

برای پاســخ به این سؤال باید با دو تعریف جدید آشنا شوید: وبسایت های ایستا و وبسایت های پویا. وبســایت های ایستا یا استاتیک به آن دسته از وبســایت هایی گفته می شود که میزان تغییر اطلاعات در آن ها پایین اســت و  به همین دلیل ساخت آن ها با استفاده از چند صفحه وب با فرمت  htmو قرار دادن این صفحات بر روی سرور وب انجام می گیرد.

در این نوع وبســایت ها، صفحاتی که کاربر مشــاهده می کند به صورت مستقیم توسط طراح وب ایجاد شــده و تغییر محتوای صفحات فقط توسط طراح امکانپذیر است. برای مثال در وبسایت یک آژانس مســافرتی که حاوی تبلیغاتی در مورد تورها و نیز لیســت قیمت های ســه ماهه است. صفحات موردن ظر در قالب چند فایل HTML ایجاد و بر روی سرور وب قرار می گیرد و وقتی موعد تغییر لیست قیمت ها رسید، آن صفحه مجددا طراحی شده و با صفحه قبل جایگزین می گردد.

وبســایت های دینامیک

در مقابل، وبســایت های دینامیک که گاهی برنامه های کاربردی وب هم نامیده می شوند ساختار پیشــرفته تر و منعطف تری دارند. در این وبســایت ها که عموما توســط گروهی متشکل از طراحان و  برنامه نویســان تولید می شوند. برای ورود اطلاعات جدید، مدیریت اطلاعات قبلی و نیز ایجاد تغییرات در تعداد و شــکل ظاهری صفحات امکانات مجزایی در نظر گرفته می شــود. برای مثال وبسایت یک خبرگــزاری که روزانه صدها خبر جدید بر روی خروجی میفرســتد باید حاوی امکاناتی برای تنظیم ســریع ساختار متن و تصاویر خبر، دریافت و مدیریت نظرات کاربران یا ایجاد بخش های خبری جدید باشد تا صفحات به سرعت تولید شده و در اختیار کاربران قرار گیرند.

در این گونه وبسایت ها که محتوای پویایی دارند اطلاعات نه در صفحات مجزا بلکه در پایگاه داده ذخیره می شود و برای بازیابی و نمایش این اطلاعات باید کدهایی به یک زبان برنامه نویسی تحت وب مانند PHP ،NET.ASP ،JSP  و … نوشــته شــود. به همین دلیل پسوند صفحات این نوع وبسایت ها متناسب با زبانی است که کدهای صفحات بر اساس آن نوشته شده است. البته ذکر این نکته ضروری است که وقتی پردازش درخواست کاربر روی سرور وب انجام می گیرد، نتیجه پردازش در قالب کدهای HTML برای مرورگر فرســتاده می شود چون مرورگر غیر از زبان های نشانه گذاری، زبان دیگری را برای نمایش صفحات وب شناسایی نمی کند.

در این بخش صرفا با نحوه ایجاد وبسایت های ایستا آشنا می شوید و برای ایجاد وبسایت های پویا توسط یکی از زبان های برنامه نویسی تحت وب باید به کتاب های مرتبط با این زمینه ها مراجعه کنید.

با کار Notepad

در بخش های پیشین، ابزارهای ســودمند طراحی صفحات وب ساده را به صورت خالص مورد بررسی قــرار دادیم. در آنجا یاد گرفتید که یکی از روش های ســاخت صفحــات وب یا ایجاد تغییرات در آن ها اســتفاده از ویرایشگرهای متنی اســت که کدنویسی در آن ها به صورت دستی انجام می گیرد. نرم افزار Notepad  که همراه با سیســتم عامل ویندوز عرضه می شود یکی از این ویرایشگرهای متنی است که البته بیشــتر کاربرد آموزشی دارد. توصیه می شود در صورت تمایل به استفاده از ویرایشگرهای متنی برای طراحی صفحات وب، از نرم افزار ++Notepad استفاده کنید. چراکه کدهای اغلب زبان ها از جمله HTML  برای آن تعریف شده است.

ایجاد و ذخیره سازی صفحه وب

در طراحی صفحات وب ساده و ایجاد و ذخیره سازی آن ها، فرآیند زیر از جمله فرآیند های اصلی به حساب می آید:

1. در محیط ویندوز، از مسیر Start > Programs All > Accessories روی عبارت Notepad کلیک کنید تا پنجره این برنامه ظاهر شود.
2. کد زیر را در پنجره برنامه وارد کنید. فعلا به جزییات کد کاری نداشته باشید تا آن ها را به صورت مفصل در انتهای همین فصل بررسی کنیم.

<html>

<head>

<title>اولین صفحه وب</title>

</head>

<body>

<p>You see a <b>bold</b> and a <b><i>bold-italic</i></b> word </p>

</body>

</html>

3. پس از وارد کردن کد، از منوی File دستور Save را اجرا کنید تا پنجره ذخیره سازی سند ظاهر شود.
4. در این پنجره، ابتدا محل ذخیره سازی فایل را تعیین کنید.
5. از لیست Save as type گزینه All Files را انتخاب نمایید.
6. در لیست Encoding حالت UYTF-8 را برگزینید.
7. نام مناســبی برای فایل وارد کنید و پســوند htm را که با یک نقطه از نام فایل جدا می شود به آن اضافه کنید.
8. روی دکمه Save کلیک کنید.
9. پنجره Notepad را که حالا نام فایل در نوار عنوان آن درج شده ببندید.
10. صفحه‌‌ وب در محلی که تعیین کردید ایجاد شده است.

کدگذاری صفحه وب

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

بــرای مثــال اروپایی ها که دارای زبان های نوشــتاری متفاوتــی در حوزه جغرافیــای خود بودند، توســط همه نرم افزارهای تولید شده اســتانداردهایی را برای کدگذاری متون طراحی کردند. که الزاما در سطح دنیا به رسمیت شناخته نمی شد. علاوه بر این ایجاد صفحات وب با استفاده از طیف وسیعی از زبان ها (مانند فارســی) امکان‌پذیر نبود. حتی در مورد زبان انگلیســی هم هیچ یک از کدگذاری های تعریف شده به صورت کامل از علایم و نمادهای فنی متداول پشتیبانی نمی کردند.

رفع مشکلات زبان های نوشــتاری

برای زبان های نوشــتاری، با همکاری چند شرکت رایانه ای بزرگ دنیا استاندارد فراگیری تحت عنوان یونیکد تدوین شــد. تا بتواند از کدگذاری همه زبان های زنده دنیا پشتیبانی و به هر نویسه در هر زبان یک کد منحصر به فرد اختصاص دهد. در این اســتاندارد برای کدگذاری هر نویسه از 16 بیت استفاده می شود و لذا قابلیت کدگذاری  (بیش از 65000 ) نویسه را دارد.

پــس از چنــدی، انجمــن جهانــی یونیکــد کــه وظیفــه پیاده ســازی اســتاندارد یونیکــد را برعهــده داشــت، UTF  را معرفــی نمــود. و بــر اســاس آن چندیــن کدگــذاری از نــوع UTF ایجــاد گردیــد. کــه در میــان آنهــا UTF-8  بــه دلیــل ســازگاری با نویســه های اَســکی که در نرم افزارهای قدیمی کاربرد فراوانی داشــتند. و نیز تعریف طول متغیر 8 بیتی برای نویسه ها که منجر به کاهش حجم فایلهای متنی می شد محبوبیت و کاربرد بیشتری پیدا کرد.

با این توضیحات مشــخص گردید که چنانچه صفحه وب شما حاوی نویسه های غیرانگلیسی (مثلا فارســی) باشد برای نمایش صحیح آنها در همه سیستم عامل ها و مرورگرها باید از کدگذاری یونیکد و ترجیحا  UTF-8اســتفاد کنید؛ در غیر این صورت ممکن اســت متون فارسی در مرورگر یک کاربر به صورت تعدادی علامت سؤال یا نویسه های عجیب و غریب نشان داده شود.

احتمالا این وضعیت را در هنگام مشــاهده برخی صفحات وب یا نامه هایی که به صندوق پســت الکترونیک شــما رسیده است تجربه کرده اید. برای رفع این مشکل می توان از منوی View و زیرمنوی Encoding  یکــی از کدگذاری های موجود را انتخاب نمود تا نویســه ها در حالت طبیعی نمایش داده شوند.

باز کردن صفحه‌ وب

پس از طراحی صفحات وب ساده به ســراغ صفحه وبی که در بخش قبل ســاختید بروید. این فایل با آیکنی که مربوط به مرورگر پیشفرض در سیستم عامل است (غالبا مرورگر IE در ویندوز) از سایر فایل ها متمایز است.

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

کدهای XHTML توســط مرورگر تفســیر می شــود و صفحه وب در پنجره مرورگر به نمایش در می آید. در نوار نشانی هم محل ذخیره سازی فایل و نام آن درج می گردد.

چنانچه بر روی رایانه شــما چند مرورگر وجود داشــته باشد، برای باز کردن صفحه با استفاده از مرورگر مورد نظر، روی فایل HTML  راســت کلیک نمــوده و از منوی Open With مرورگر مورد نظر را انتخاب کنید. در این منو لیستی از برنامه هایی را می بینید که می توانند برای نمایش یا ویرایش صفحه وب مورد استفاده قرار بگیرند.

در منوی Open With روی گزینه Notepad کلیک کنید تا کد صفحه نمایان شود. با تغییر این کد و اجرای دستور Save می توانید تغییرات مورد نظر را روی صفحه وب ساخته شده ایجاد کنید.

منوهای Notepad

در همه نرم افزارهایی که برای ویرایش متن ســاخته شــده اند دستوراتی برای مدیریت فایل و تغییر قالب بندی عبارات در نظر گرفته شــده و Notepad هم از این قاعده مســتثنی نیســت. مهم ترین این دستورات در قالب منوهای زیر دسته بندی شده اند:

• File: حاوی دســتوراتی برای ایجاد صفحۀ جدید، ذخیره ســازی صفحه فعلی، چاپ محتویات پنجره و … است.
• Edit: دســتورات ویرایشــی این نرمافزار مانند برگشت به عقب، کپی کردن و بریدن، جستجو، جایگزینی و … در این منو قرار دارد.
• Format: در این منو گزینه ای با نام Word Wrap وجود دارد که اگر در حالت انتخاب باشــد، با طولانی شــدن یک ســطر، ادامه آن به خط بعد منتقل می شود؛ در غیراین صورت، یک نوار پیمایش افقی ظاهر شده و برای مرور بخشی از سطر که خارج از پنجره قرار می گیرد باید از این نوار پیمایش استفاده کنید.

همچنین برای تغییر فونت، اندازه و نوع نوشــته ها می توانید روی دســتور Font کلیک کنید. فونت پیشفرض Notepadکدها را ریز و نوشــته های فارسی را تا حدی ناخوانا نشان می دهد. بنابر این انتخاب فونتی مانند Arial می تواند تسلط شما روی کد را افزایش دهد.

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

اصول ایجاد صفحه وب

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

<!DOCTYPE …>

<html xmlns=”https://www.no-yad.ir/1999/xhtml”>

<head>

<title>Title of the document</title>

</head>

<body>

.

The content of document

.

</body>

</html>

در این ساختار، یک اعلان و سه برچسب اصلی وجود دارد که تکتک آن ها را بررسی خواهیم کرد.

اعلان <!Doctype>

در این اعلان باید یکی از انواع سه گانه  DTDها را که صفحه وب بر مبنای آن استاندارد تولید شده است معرفی کنید. شکل کلی اعلان به صورت زیر است:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 dtd_type//EN”

“https://www.no-yad.ir/TR/xhtml1/DTD/xhtml1-dtd_type.dtd”>

در این اعلان به جای dtd_ type باید یکی از انواع سه گانه DTD را قید کنید. این انواع عبارتند از:

• Transitional : با نسخه های قدیمی مثل HTML سازگاری بیشتری دارد
• Strict : در خصوص رعایت قواعد کدنویسی، سختگیری زیادی دارد.
• Frameset : مخصوص اسنادی است که در آن ها از قاب استفاده شده است.

بنا بر ایــن هنگامی که می خواهیم DTD نوع Transitional را به کار ببریم، شــکل اعلان به صورت زیر است:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd”>

برچسب  <html>

تمامی کدهای موجود در صفحه باید میان برچســب های شــروع و پایان <html > قرار گیرند. این برچســب دارای مشــخصه‌ای به نام xmlns است که به استاندارد تولید اسناد XML بر روی وبسایت انجمن وب اشــاره دارد. از آنجا که مقدار این مشخصه به صورت پیشفرض، نشانی مذکور است، درج آن در سند XHTML اجباری نیست.

برچسب  <head>

این برچسب به عنوان سر صفحه عمل می کند و می تواند شامل برچسب های دیگری باشد که عنوان صفحــه، محل قرارگیری فایل قالب بندی صفحه، نوع کدگذاری نویســه ها، کلید واژه های صفحه و … را مشخص می کنند. به کد زیر توجه کنید:

<head>

1 <title>اندیشه نگاران شیز</title>

2 <script src=”js/menu.js” type=”text/javascript” language=”javascript”></script>

3 <meta http-equiv=”Content-Type” content=”text/html; charset=utf8-” />

<link rel=”shortcut icon” type=”image/ico” href=”http://www.irib.ir/English/favicon.ico”>

4 <link href=”includes/irib-css.css” rel=”stylesheet” type=”text/css” />

<link href=”includes/main.css” rel=”stylesheet” type=”text/css” />

<link href=”includes/irib-js.js” type=”text/javascript” />

</head>

برچسب های موجود در سرصفحه به این صورت عمل می کنند:

1. با استفاده از برچسب <title> می توانید عنوانی را به فارسی یا انگلیسی برای صفحه در نظر بگیرید تا در نوار عنوان پنجرۀ مرورگر یا زبانه مربوط به صفحه نشان داده شود.
2. کدهای جاوا اسکریپت یا نشانی فایل حاوی آن ها در برچسب <script > قرار می گیرد. از این کدها برای ایجاد منو، اعتبارســنجی مقادیر وارد شــده درون فیلدهای ورود اطلاعات، اجرای جلوه های ویژه روی تصاویر و متون و … استفاده می شود.
3. برچســب <meta> برای درج «متادیتا» یا «فراداده» استفاده می شود. متادیتا یعنی اطلاعاتی که اطلاعات دیگری را توصیف می کند. یکی از کاربردهای این برچســب، تخصیص کلید واژه به وبسایت است تا توسط موتورهای جستجو بهتر شناسایی شود.
4. در XHTML توصیه شده برای تعیین قالب نمایش صفحات، یک فایل CSS خارجی ایجاد شود و سپس با استفاده از برچسب <link > ارتباط میان صفحه وب و فایل قالب بندی برقرار گردد. CSSها یا «شیوه نامه های انتشاری» روشی بسیار کارآمد برای قالب بندی صفحات وب هستند که در این کتاب با کارکرد آن ها آشنا خواهید شد.

برچسب  <body>

همه کدهایی که برای تعیین محتوای صفحه مورد نیاز اســت در بین برچســب های شروع و پایان <body > قرار می گیرند و در واقع این برچســب، بدنه صفحه را تشکیل می دهد. مهمترین مشخصه این برچسب،dir  است که برای تعیین جهت صفحه کاربرد دارد. کد زیر را در محیط Notepad نوشته و آن را با فرمت htm ذخیره کنید.

<html>

<head>

<title >اندیشه نگاران شیز</title>

</head>

<body>

حالت پیش فرض برای نمایش متون

</body>

</html>

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

حال صفحه وب را در محیط Notepad باز کنید. سپس به برچسب <body > مشخصۀ dir را که از واژهDirection  به معنی جهت گرفته شده اضافه نموده و مقدار آن را برابر rtl سرآیند (Left to Right) قرار دهید.

<“body dir=”rtl>

تغییرات را ذخیره نموده و صفحه را تازه ســازی کنید. همانطور که می بینید نوشــته به صورت راست به چپ و مطابق با زبان هایی مثل فارسی قرار گرفته است. البته در این حالت محل قرارگیری نوار پیمایش هم به ســمت چپ صفحه منتقل می شود که برای رفع آن می توانید از این مشخصه در سایر برچسب های اصلی صفحه به جز <body > استفاده نمایید.

در زبان HTML می توانستید مشخصه هایی نظیر رنگ پس زمینه (bgcolor) را هم به این برچسب اضافــه کنید. هر چند در DTD  هــای Transitional و Frameset از زبان XHTML هم این کار مجاز است اما توصیه شده برای قالب بندی صفحات از CSS  استفاده شود.