مدرس فناوری اطلاعات و ارتباطات

مقدمه

در این فصل می‌خواهیم در مورد لینک – Link (پیوند) و آی دی – id در صفحات وب گفتگو کنیم؛
لینک چیست و چه کاربرد دارد؟ چند نوع لینک داریم؟
آی دی چیست و چه کاربرد دارد؟

یکی از مهم‌ترین اجزاء صفحات وب لینک‌ها (‌links) هستند.
در دنیای اینترنت فایل‌ها و صفحات بیشماری از سایت‌های مختلف وجود دارد.
برای ارتباط بین این صفحات و فایل‌ها، مسلماً یک رابط مورد نیاز است؛ لینک در اینترنت این وظیفه را بر عهده دارد.
لینک‌های موجود در صفحات مختلف ارتباط بین صفحات و فایل‌های بیشماری را که در فضای وب موجود هستند برقرار می‌کنند.
با استفاده از لینک‌ها می‌توانید اتصالی (پیوند) به صفحات یا فایل‌ها ایجاد کنید. به طوریکه وقتی کاربر روی آن کلیک کرد به یک صفحه وب دیگری منتقل شود؛
درست مثل این لینک که با کلیک روی آن به صفحه‌ی فصل هشتم منتقل می‌شوید .

انواع لینک

در نرم افزارهای ادیتور مختلف برای قرار دادن لینک معمولاً دکمه‌ای به شکل زنجیر ? یا کره زمین ? وجود دارد، که با کلیک روی آن و وارد کردن اسم لینک و آدرس آن، لینک‌تان ایجاد می‌شود.
برای اینکه دقیق‌تر و عمیق‌تر متوجه شوید که ساختار ایجاد لینک در html چگونه است تا پایان با ما همراه باشید.

نحوه ایجاد لینک در HTML

تگ a وظیفه ایجاد لینک در html را دارد؛ a مخفف کلمه anchor به معنای لنگر است.

درون این تگ می‌تواند یک متن یا اِلمنت‌های دیگری قرار گیرند.
پس به این نکته توجه کنید که با استفاده از تگ a نه تنها متون، بلکه هر چیز دیگری، مثل تصاویر و… را می‌توانید لینک کنید.

ساختار نوشتن تگ a

<a> ... </a>

تگ a، صفت‌هایی مانند href , target , download می‌تواند بگیرد.

صفت href مخفف Hyperlink References است. 

<a href="URL"> Link Name </a>

به جای Link Name، اسم لینک و به جای URL آدرس لینک را قرار ‌دهید.
حواستان باشد آدرس لینک باید بین علامت “quotation“ نوشته شود.

به طور مثال در اینجا صفحه‌ای ساده طراحی کرده‌ایم که در آن
کلمه دبیرستان ‌نیک‌پرور به آدرس https://www.alavischool.ir لینک داده شده است.

برای درک بهتر موضوع حتماً page source مثال را مشاهده کنید.

<a href="https://www.alavischool.ir">دبیرستان‌نیک‌پرور</a>

<a href="https://www.alavischool.ir" target="_blank">دبیرستان‌نیک‌پرور</a>

<a href="https://www.alavischool.ir" download>دبیرستان‌نیک‌پرور</a>

آی دی‌(id) چیست؟

با استفاده از صفت id می‌توانیم برای تمامی اِلمنت‌ها در سند html یک شناسه یکتا تعریف کنیم؛ مقدار id منحصر به فرد بوده و نمی‌توان از یک id برای چند اِلمنت استفاده کرد.
منظور از منحصر به فرد بودن این است که یک id فقط باید بر روی یک المنت مورد استفاده قرار بگیرد.
id مانند کلی ملی یا شماره‌شناسنامه است،‌ یعنی باید یکتا و منحصر به فرد باشد.

ویژگی id در CSS و javascript کاربرد فراوانی دارد.

ساختار نوشتن id

برای تعریف id از علامت Number sign (#) استفاده می‌شود.

<X id="my-element"> . . . </X>

#my-element{
   . . .
}

جای X، هر تگی می‌تواند باشد و به جای my-element،  هر اسمی‌ قرار دهید.
نام id باید بین علامت “quotation” قرار بگیرد.

در قسمت css ابتدا باید علامت Number sign (#) را گذاشته سپس اسمی که برای id در html مشخص کرده بودید را بنویسید و بعد از آن ویژگی‌های مورد نظرتان را قرار دهید.

قوانین استفاده از id

مقدار دهی به id قوانینی دارد که رعایت آنها ضروری است.

• مقدار id باید با حروف کوچک یا بزرگ انگلیسی (a-z یا A-Z) آغاز شوند.
• کاراکترهای دنباله می‌توانند از حروف، اعداد و بعضی از علامت‌های خاص مانند ( –   _  :  . ) باشند.
• در تعیین نام id از space و tab استفاده نکنید.

برای بررسی و مشاهده مثال اینجا کلیک کنید.

در مثال بالا یک صفحه بلند طراحی شده است، زمانیکه روی عبارت Jump to section 10 کلیک می‌کنید به section 10 هدایت می‌شوید و وقتی روی فلش قرمز رنگ میزنید به ابتدای فایل بر می‌گردید.

در زمان آزمایش مثال بالا به قسمت انتهای Address bar دقت کنید!

این تکنیک در بسیاری از سایت‌های امروزی استفاده می‌شود. یعنی کل سایت در یک صفحه بلند طراحی می‌شود و زمانیکه روی هر بخش کلیک می‌کنند به آن قسمت هدایت می‌شوید؛ به این تکنیک اصطلاحاً بوک‌مارک – Bookmark می‌گویند.

زمانیکه از تگ a استفاده می‌کنید، پیشفرض متن به صورت زیر می‌باشد:

• همیشه به صورت underline نمایش داده می‌شود.
• قبل از دیدن،(link) آبی است.
• بعد از دیدن،(visited) بنفش است.
• وقتی دکمه‌ی ماوس روی آن پایین نگه داشته می شود،(active) قرمز است.
• وقتی نشانگر ماوس روی آن قرار بگیرد، (hover) شکل آن تغییر می‌کند.

سِلکتورهای شِبه کلاس ۱  –  Pseudo Class 1

به این نوع سِلکتور اصطلاحاً شِبه کلاس می‌گویند، ‌در فصل دوازدهم در مورد اینکه کلاس چیست توضیح خواهیم داد.

انواع سِلکتورهای شِبه کلاس‌

۱) ویژگی به یک اِلمنت موقعی که بر روی آن قرار می گیرید.
۲) یا ویژگی دادن به لینک‌هایی که هنوز روی آنها کلیک نشده است.
۳) همچنین لینک‌هایی که عمل کلیک بر روی آنها صورت گرفته است.
۴) یا ویژگی دادن به یک اِلمنت موقعی که بر روی آن کلیک می‌کنیم .

نکته:
جهت تماشای کامل صفحات مثال‌های طراحی شده زیر در مرورگر گوگل کروم روی آن راست کلیک کرده و گزینه View Frame Source را بزنید.
در قسمت Address bar ابتدای آدرس یعنی عبارت :view-source را پاک کرده و Enter کنید.

برای تحلیل و بررسی در نحوه نوشتن CSS می‌توانید Source صفحه را مشاهده کنید.

 – : hover      سِلکتور

این حالت وقتی نشانگر ماوس روی لینکی برود مورد استفاده قرار می‌گیرد؛ با استفاده از سِلکتور :hover می‌توانید این کار را انجام دهید.

CSS

X:hover{
  background-color: blue;
}

مثال: در صفحه طراحی شده بالا ماوس‌ را روی مربع سبز رنگ جابجا کرده و تغییر را مشاهده کنید.

 – : active      سِلکتور

هنگام فعال شدن انتخاب می‌کند (با نگه داشتن کلیک ماوس روی آن).

CSS

X:active{
  background-color: red;
}

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

 – : target      سِلکتور

هنگامیکه id مورد نظر فعال شود.

برای بررسی و مشاهده مثال اینجا کلیک کنید.

توجه داشته باشید:
برای درک بهتر این سِلکتور در انتهای قسمت Address Bar ابتدا علامت # را گذاشته سپس یکی از کلمات home , about , contact را تایپ کرده و اینتر کنید، حال نتیجه را تماشا بفرمایید.
پیشنهاد می‌کنم حتماً source این مثال را تحلیل و بررسی کنید.

 – : link      سِلکتور

این سِلکتور فقط تگ‌های <a> با صفات href را انتخاب می‌کند. اگر خالی باشد کار نخواهد کرد.

CSS

a:link{
  background-color: red;
}

مثال: در صفحه طراحی شده بالا بعد از کلیک روی مربع تغییر را مشاهده کنید.

 – : visited      سِلکتور

وقتی لینکی را درون مرورگر بازدید می‌کنید، از این سِلکتور استفاده می‌شود.

CSS

a:visited{
  background-color: blue;
}

یادآوری:
جهت تماشای کامل صفحات مثال‌های طراحی شده زیر در مرورگر گوگل کروم روی آن راست کلیک کرده و گزینه View Frame Source را بزنید.
در قسمت Address bar ابتدای آدرس یعنی عبارت :view-source را پاک کرده و Enter کنید.

برای تحلیل و بررسی در نحوه نوشتن CSS می‌توانید Source صفحه را مشاهده کنید.

مثال۱:

CSS

a:link{
  background-color: red;
}
a:visited{
  background-color: blue;
}
a:hover{
  background-color: lime;
}
a:active{
  background-color: orange;
}

در صفحه طراحی شده بالا همه (link,visited,hover,active) را در یک مثال مشاهده می‌کنید.

پیشنهاد می‌کنم حتماً source آن را تحلیل و بررسی کنید.

مثال۲:  Target

CSS

:target{
  color: red;
}

در صفحه طراحی شده بالا با استفاده از سِلکتورهای بیان شده در این فصل روی هر کدام از عناوین کلیک کرده و تغییر را مشاهده کنید.

مثال۳:  Tab Pages

CSS

p{
  display: none;
}
:target{
  display: block;
}

در صفحه طراحی شده بالا با استفاده از سِلکتورهای بیان شده در این فصل روی هر کدام از عناوین کلیک کرده و تغییر را مشاهده کنید.

مثال۴:  Accordion

CSS

p{
  display: none;
}
:target{
  display: block;
}

در صفحه طراحی شده بالا با استفاده از سِلکتورهای بیان شده در این فصل روی هر کدام از عناوین کلیک کرده و تغییر را مشاهده کنید.

تمرین

با توجه به مطالب بیان شده برنامه‌ی درسی یک هفته‌تان را به سه مدل Target ، Tab Pages ، Accordion و با رنگ بندی و سلیقه خودتان طراحی کنید.
برای مشاهده نمونه اینجا کلیک کنید.