سایت ما با سه صفحه به خوبی طراحی شد، فقط یک اشکال وجود دارد: اینکه صفحه های طراحی شده ما با یکدیگر لینک نیستند! خودتان هم می توانید امتحان کنید، صفحه index.html را در مرورگر خود باز کرده و سعی کنید از طریق این صفحه به صفحه دیگر بروید، نمی توانید.
برای اینکه به بازدید کنندگان سایت این امکان را بدهید که بین صفحات جابه جا شوند باید برای آن ها بین صفحات آدرس دهی کنیم. این آدرس دهی ها به anchors معروف هستند که به طور عمده به آن لینک می گویند. برای لینک دهی در یک XHTML به شکل زیر عمل می کنیم:
شاید نتوانید مثل بقیه تگ ها ارتباط تگِ a را با کلمه لاتینش پیدا کنید، a از anchors گرفته شده است. این تگ را از همه بهتر یاد خواهید گرفت، از آنجا که تمام وب بر روی آن سوار است و بیشتر از هر تگِ دیگر آن را خواهید دید.
1. تگِ a دربر دارنده لینکی است که کاربر بر روی آن کلیک می کند (که به صورت پیش فرض با رنگ آبی نشان داده می شود و زیر آن خط کشیده شده است).
2. مقدارِ href به URL_ای اشاره دارد که شما آن را لینک می کنید (ممکن است فایلی در سیستم شما یا صفحه ای در یک وبسایت آنلاین باشد). متاسفانه href هم به راحتی به خاطر سپرده نمی شود اما آنقدر با آن روبه رو می شویم که به زودی آن را نیز به خاطر خواهید سپرد، این دستور از کلمه hypertext reference گرفته شده است.
Image از اینجا کلیک کنید استفاده نکنید!
توضیحاتِ لینک—توضیحاتی که به جای لینک نشان داده شده و کاربر با کلیک بر روی آن ها لینک درون آن ها را در مرورگر خود باز می کند—باید توضیحاتی کوتاه و کارامد در ارتباط با لینک درون خود باشند. در بیشتر اوقات سایت هایی را می بینید که از شما می خواهند برای عضویت در خبرنامه اینجا کلیک کنید یا برای اینکه ما را از تغییر آدرس خود مطلع کنید اینجا کلیک کنید. به هیچ وجه از اینجا کلیک کنید استفاده نکنید، انتخابی ضعیف و مبتدی برای توضیح درباره لینک شماست، از مشکلات دیگر آن می توان به زشت شدن پرینت صفحه سایت، به درد نخوردن برای موتورهای جست و جو و مواردی اینچنینی یاد کرد.
خوب حالا بیایید از یک منوی آدرس دهیِ ساده در سایت خود استفاده کنیم. آدرس دهی ما از یک لیستِ متشکل از سه لینک تشکیل شده است:
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
تمامِ دستور بالا را در یک تگِ div قرار می دهیم، پس به راحتی و به سرعت خواهیم دانست که این قسمت از XHTML ما برای چه کاری نوشته شده است.
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div> <!-- end of navigation div -->
حالا تنها کاری که باید انجام دهیم این است که این کد را در یک قسمت مناسب از سایت خود جایگذاری کنیم. جای مناسبی که به شما پیشنهاد می کنیم در پایین تگِ بسته شده عنوان ماست، دقیقاً قبل از اینکه محتوای body شروع شود. در کد نشان داده شده ی زیر می توانیم جایِ در نظر گرفته شده برای بخش آدرس دهی را ببینیم.
فایلِ index.html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bubble Under - The diving club for the south-west UK</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK - let's make a splash!</p>
</div>
</div> <!-- end of header div -->
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div> <!-- end of navigation div -->
<div id="bodycontent">
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills" /></p>
<p>Glad you could drop in and share some air with us!
You've passed your underwater navigation skills and
successfully found your way to the start point - or in
this case, our home page.</p>
</div> <!-- end of bodycontent div -->
</body>
</html>
لینک های قرار داده شده را به فایل های contact.html و about.html نیز اضافه کنید. باید بتوانید بین سه صفحه طراحی شده با استفاده از این لینک ها جابه جا شوید، دقیقا همانطور که در شکل 2.21 نشان داده شده است.
خوب، تا اینجا شما طراح سایت چند صفحه ای هستید، تبریک! قبل از پایان کار بهتر است با چند تگِ XHTML دیگر نیز آشنا شویم.
عکس2.21: گشت و گذار در سایتمان.
