در جلسه قبلی آموزش HTML نحوه استفاده از تگ پاراگرف برای قرار دادن متن و همچنین فاصله ها و رفتن به خط جدید آشنا شدید. در این بخش قصد داریم شما را با لینک ها در HTML آشنا کنیم.
یک لینک (link) یا هایپر لینک (hyperlink) یک اتصال از یک منبع وب به دیگری است. در واقع می توان گفت اولین ویژگی بسیار مهم و چشمگیر HTML در نسخه های اولیه آن همان لینک ها در HTML بود.
لینک ها در HTML
لینک ها به کاربران اجازه می دهد که بصورت یکپارچه از یک صفحه به صفحه بعدی بر روی هر سروری در دنیای وب بروند.
یک لینک دارای دو مورد بسیار مهم anchor (به معنی لنگر) و یک جهت (direction) است. لینک با لنگر منبع آغاز می شود و به مسیر لنگر اشاره می کند که ممکن است هر موردی مثل تصویر, صدا یا ویدیو, صفحه HTML و غیره باشد.
بصورت پیش فرض, لینک ها در مرورگر وب به صورت زیر نمایان می شوند:
- یک لینک دیده نشده دارای خط زیر (underline) و آبی است
- یک لینک دیده شده دارای خط زیر و صورتی است
- یک لینک فعال (کلیک را نگه داشتن) دارای خط زیر و قرمز است.
به هر حال تمام این استایل ها با CSS قابلیت سفارشی سازی را دارند.
سینتکس لینک ها در HTML
لینک ها در HTML با استفاده از تگ <a> مشخص می شوند.
یک لینک می توانید شامل کلمه, گروهی از کلمات یا تصویر باشد.
|
1 |
<a href="url">Text link</a> |
مقدار مشخصه href نیز تعیین می کند که بعد از کلیک روی آن به به کدام منبع انتقال پیدا کند.
|
1 2 3 |
<a href="https://netparadis.com/">NetParadis</a> <a href="kites.jpg"><img src="kites-thumb.jpg" alt="kites"></a> <a href="https://www.google.com/">Google Search</a> |
مشخصه Taget لینک ها
خصوصیت target به مرورگر می فهماند که به چه صورت و کجا لینک را باز کند. چهار مقدار را برای target می توانید مشخص کنید که همه آنها با یک خط زیر (_) شروع می شوند :
_blank, _parent, _self, _top
|
1 2 3 |
<a href="https://netparadis.com/" target="_top">NetParadis</a> <a href="sky.jpg" target="_self"><img src="sky-thumb.jpg" alt="Cloudy Sky"></a> <a href="https://www.google.com/" target="_blank">Google</a> |
ساخت لینک های بوکمارک
مشخصه id برای ساخت بوکمارک در یک صفحه وب بصورت زیر استفاده می شود.
|
1 2 |
<a href="#balloons"><img src="balloons-thumb.jpg" alt="Balloons"></a> <img src="balloons.jpg" alt="Hot Air Balloons" id="balloons"> |
همان نتیجه را می توانید با مشخص کردن ویژگی name نیز ببینید.
|
1 2 |
<a href="#ballons"><img src="balloons-thumb.jpg" alt="Balloons"></a> <img src="balloons.jpg" alt="Hot Air Balloons" name="balloons"> |
منظور از بوکمارک به این صورت است که شما می توانید با مشخص کردن یک لینک در یک صفحه با متن مثلا طولانی به همان متن مشخص شده بروید مثلا یک صفحه با ۱۰ پاراگرف و با لینک های پارگراف ۱ می توانید به راحتی به آن بخش بدون گشتن بروید.
نکته: در استاندارد HTML5 توصیه شده است که از ویژگی id به جای name برای مشخص کردن لینک های بوکمارک استفاده کنید.
ساخت لینک های دانلود
قرار دادن یک فایل برای دانلود دقیقا همانند قرار دادن یک متن است به اینصورت که فقط نیاز است که لینک دانلود فایل را برای مشخصه href در نظر بگیرید.
در اینجا ما مثلا از فایل های zip,pdf,jpg استفاده کردیم.
|
1 2 3 |
<a href="downloads/test.zip">Download Zip file</a> <a href="downloads/masters.pdf">Download PDF file</a> <a href="downloads/sample.jpg">Download Image file</a> |
نکته: با کلیک روی فایل های pdf یا عکس ممکن است که مستقیما فایل ها در هارد شما ذخیره نشوند. بلکه نیاز است با باز شدن آن ها در مرورگر, در سیستم خود ذخیره کنید.
آدرس دهی در HTML
برای مشخص کردن آدرس یک فایل در پوشه های موجود در سایت میتوان از روش های مختلف آدرس دهی در HTML استفاده کرد
در تمام برنامه ها ، چه در ویندوز, لینوکس و چه در برنامه نویسی و… دو نوع آدرس دهی وجود دارد : مطلق (absolute) و نسبی (relative)
یک مسیر absolute یک آدرس کامل برای یک فایل اینترنتی است :
|
1 |
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain"> |
یک مسیر relative اشاره به فایلی دارد که نسبت به صفحه ی جاری آدرس دهی میشود. (در واقع همان جایی که این صفحه HTML شما اجرا می شود.)
در نمونه مثال زیر آدرس تنظیم شده برای src اشاره به فایلی دارد که در فولدر images قرار دارد که خود این فولدر در ریشه ی اصلی وب سایت ما واقع شده است :
|
1 |
<img src="/images/picture.jpg" alt="Mountain"> |
در نمونه مثال زیر آدرس تنظیم شده برای src اشاره به فایلی دارد که در فولدر images قرار دارد که خود این فولدر در فولدر جاری (منظور از فولدر جاری فولدریست که صفحه ی جاری در آن قرار گرفته است) واقع شده است :
|
1 |
<img src="images/picture.jpg" alt="Mountain"> |
در نمونه مثال زیر آدرس تنظیم شده برای برای src اشاره به فایلی دارد که در فولدر images قرار دارد و خود این فولدر یک سطح بالاتر از فولدر جاری است :
|
1 |
<img src="../images/picture.jpg" alt="Mountain"> |
از آدرس دهی نسبی استفاده کنیم یا آدرس دهی مطلق :
اگر فایلی را طراحی میکنید که قرار است روی یک آدرس ثابت از سایتی دیگر کار کند بهتر است از این نوع آدرس دهی استفاده کنید.
اما اگر قرار است یک فایل سیار درست کنید که فایلهای مربوط به آن نیز به همراه آن ممکن است بعدا جابجا شوند بهتر است از آدرس نسبی استفاده کنید
چون اگر مثلا شما در درایو c کامپیوتر خود فایل اچ تی ام ال را بسازید و کنار آن پوشه pic را بسازید و تصاویر مربوطه را در آن بریزید و در فایل اچ تی ام ال از آدرس دهی نسبی استفاده کنید ، هیچ نگرانی ای وجود ندارد که شما فایل HTML و پوشه مربوطه را به درایوی دیگر مثل d و یا حتی به کامپیوتر و یا سایت دیگر منتقل کنید ، چون آدرس دهی نسبی است
امیدوارم در این بخش آموزش HTML , از لینک ها در HTML و انواع آدرس دهی نهایت استفاده را برده باشید.
در بخش بعدی در مورد فرمت دهی متن در صفحه وب یاد می گیریم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
