بازدید امروز : 16
بازدید دیروز : 2
در جلسه گذشته به بررسی تگ font پرداختیم و با شرایط و خصیصه های آن آشنا شدیم. در این جلسه هم قراره به بررسی لینک ها بپردازیم که از جمله بخش های پرکاربرد HTML هست.
برای ایجاد لینک در هر صورتی باید از تگ a استفاده کنیم. این تگ به مرورگر اعلام میکنه که باید قسمت معین شده رو به سبک متفاوتی به صورتی که نویسنده مشخص کرده نمایش بده که با کلیک بر آن عملی رو انجام بده.
به طور کلی ? حالت برای یک لینک وجود داره که با موس مشخص میشند. یکی اینکه در حالت عادی لینک چجوری یا به چه رنگی باشه. دومی اینکه وقتی موس روی لینک میره به چه رنگی در بیاد. سومی اینکه وقتی بر روی لینک کلیک میشه به چه سبکی در بیاد. و چهارمی هم اینکه وقتی لینک به صورت فعال هست چجوری باشه که هر چهار حالت رو بررسی می کنیم.
در اولین قدم باید به بررسی تگ a بپردازیم و خصوصیات اون رو مشخص کنیم. همونجوری که میدونید و در بخش تگها توضیح داده بودم برای معرفی کردن یک لینک به صورت زیر عمل می کنیم:
a>نوشته مورد نظر ...
توجه: به خاطر اینکه طراح گرامی این قالب احتمالا حواسشون نبوده که کد منع تاکید هر تگ a ای رو قرار بدند ناچار شدم از اول اخر تگ بزنم و کد رو ناقص بذارم. حواستون باشه.
اما اگه فقط اینجوری بخواین لینک رو مشخص کنید کامپایلر ایراد میگیره و میگه کد شما کامل نیست. یعنی میگه شما وقتی هدفی از ایجاد این تگ نداری نباید از اون استفاده کنی. پس باید یک خصیصه دیگه هم بهش اضافه بشه. اصلی ترین خصیصه، خصیصه href هست که مقصد رو مشخص میکنه که لینک به کجا ارجاع داده بشه. مثلا اینجوری:
a href="http://www.shypnu-itg.blogfa.com">نشریه الکترونیکی دانشجویان آی تی دانشگاه پیام نور شهریار ...
با این خصیصه شما به مرورگرتون میگید که وقتی کاربر روی لینک کلیک کنه به این آدرس بره. با اینکار دیگه کامپایلر نمیتونه ایرادی بگیره. اما این اولین کاری بود که باید می کردید. یعنی خیلی مونده هنوز تموم بشه. بعد از اینکه مقصد رو مشخص کردید میتونید به مرورگر بگید که وقتی روی متن مورد نظر کلیک میشه چجوری بره به مقصد. یعنی داخل همین صفحه که هستم بره یا مثلا صفحه دیگه ای باز بشه یا حالتهای دیگه ای که هست. حالتهاش هم به ترتیب زیر عمل می کنند:
- blank_ : با این کد مرورگر مقصد رو در صفحه ای جدید باز میکنه.
- self_ : با این کد مرورگر صفحه رو درصفحه فعلی باز میکنه.
- parent_ : با این کد هم مرورگر صفحه رو در داخل قاب اصلی باز میکنه. (این بخش مربوط به قوانین استفاده از frame هست که چون بخشش جداست دیگه من توضیحی در موردش نمیدم تا به خودش برسیم.)
top_ : این کد هم باعث میشه تا مقصد خارج از قاب اصلی باز بشه که باز شرایطش مثل کد بالایه هست.
تا حالا لینک ما شد مثل این:
a target="یکی از حالتهای گفته شده" href="url">نوشته مورد نظر ...
تا اینجا تونستیم لینکمون رو ایجاد کنیم. اما ممکنه از ظاهر لینک خوشمون نیاد. برای اینکه به سبک دلخواهمون بشه میایم حالتهایی رو براش معین می کنیم که بهتر بشه. اول از همه برای خود تگ a که وقتی استفاده بشه چجوری کار کنه یعنی فونتش چجوری باشه یا اینکه چه اندازه ای داشته باشه یا حتی با وجود ایجاد لینک خطی زیر لینک وجود داشته باشه یا نه و ... . به نمونه زیر دقت کنید:
a {
font-family: Times New Roman, Times, serif;
font-size: 12px;
color: #000000;
}
فکر کنم کاملا موضوع براتون مشخص شده باشه که چیه منظورم. خوب با این کد شما به مرورگر میگید که وقتی تگ a استفاده میشه فونت بشه همون بالایی و اندازه و ... . این کد فقط حالت اصلی رو مشخص می کنه یعنی ربطی به چهار حالتی که در اول آموزش گفته بودم نداره. حالا بریم سر وقت ? حالت.
Link : یعنی حالتی که لینک هنوز موس رویش نرفته یا کلیکی نشده. که به صورت زیر میتونید براش خاصیت تعریف کنید:
a:link {
font-family: Times New Roman, Times, serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
اگه دقت کنید من از text-decoration هم استفاده کردم. این کد میگه که لینک خط زیر داشته باشه یا نه. که خودش ? حالت داره که مورد نیازش فقط ? تا میشه گفت هست البته به نیاز و سلیقه شما ربط داره. که عبارتند از: none :(یعنی خطی نداشته باشه)، underline :(یعنی خطی داشته باشه) و line-through :(یعنی خطی روی نوشته باشه). که خودتون میتونید استفاده های مختلفشون رو با نرم افزارهای طراحی وب ببینید.
hover : یعنی حالتی که موس روی لینک میره. که برای این بخش هم میشه مثل link خصوصیات تعریف کرد که دیگه دوباره نمینویسم.
visited : یعنی حالتی که روی لینک کلیک می کنید و دوست دارید که مرورگر به شما اعلام بکنه که شما روی این لینک کلیک کردید.
active : یعنی حالتی که روی لینکی کلیک شده و چون مقصد داخل همان سایت بوده اعلام می کنه که شما در حال حاضر در این بخش هستید. مثلا ما روی بخش طراحی وب وبلاگ کلیک می کنیم بعد از اینکه وارد بخش شد لینک طراحی وب با بقیه فرق داشته باشه. که البته نمیدونم در این وبلاگ، طراح این قسمت رو اعمال کرده یا نه.
اما اگه بادتون باشه گفته بودم برای اینکه ما بخوایم یک حالت کلی تعریف کنیم باید حالت رو در داخل تگ head قرار بدیم. پس باید داخل تگ قرارش بدیم. یعنی به صورت زیر:
type="text/css">
a:link {
font-family: Times New Roman, Times, serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
/>
< type=text/css>
a:link {
font-family: Times New Roman, Times, serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
>
< type=text/css>
کد مورد نظرمون برای تغییر حالت
>
که داخل تگ head قرارش میدیم. ( بازم حواستون به تگ بندیش باشه!)
یک حالت دیگه ای هم داره که مثلا وقتی روی لینک کلیک می کنیم به بخشی از خود صفحه بره. یعنی بدون هیچ پنجره باز شدنی. این بخش میذارم برای بخش بعدی. چون اول باید اینا رو یاد بگیرید بعد اونا رو.
خوب فکر کنم همه چیز رو توضیح داده باشم. فقط یه چیزی خیلی نظر کم میدیدا. گفته بودم اگه مشکلی در یادگیری یا سوالی در این زمینه داشتید داخل نظرات اعلام کنید ولی انگار همه HTML رو کامل بلدند. اصلا یعنی هیچ کدومتون سوالی ندارید؟ اگه واقعا ندارید بهتون تبریک میگم حتما خوب یاد گرفتید. این بخش هم تموم شد.انشالله تا بخش های بعدی.
موفق باشید/.
فهرست موضوعی یادداشت ها
اشتراک