طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش HTML – بخش ششم

آموزش HTML | آموزش HTML5

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

ساخت لینک در HTML

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

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

ایجاد لینک

با استفاده از تگ <a>  می توان لینک ها را ایجاد کرد. این تگ دارای خصیصه href است که مقدار آن آدرس صفحه ای است که می خواهیم مخاطب را به آن ارجاع دهیم. در هنگام آدرس دهی باید آدرس سایت را همراه با http:// نوشت. مثلا http://www.yoursite.com و این آدرس را باید درون علامت نقل قول قرار داد.

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

همانطور که در عکس مشاهده می کنید، متن لینک شده به رنگ آبی تغییر رنگ می دهد و در زیر آن خط کشیده می شود.

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

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

تغییر رنگ لینک ها

در مرورگرها به صورت پیش فرض رنگ لینک های کلیک نشده آبی است. وقتی که بر روی لینک کلیک کردید، به ارغوانی تغییر رنگ خواهد داد. همچنین اگر بر روی لینک کلیک کنید و کلیک را نگه دارید، رنگ متن لینک شده به رنگ قرمز تبدیل خواهد شد.

می توان با استفاده از CSS این تنظیمات را تغییر داد. در مثال زیر روبروی هر کد توضیحات مربوطه نوشته شده است که می توانید، توضیحات فارسی را حذف کنید.

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

خصیصه target

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

مقادیری که این خصیصه می تواند داشته باشد به صورت زیر است:

  • _blank: لینک در یک تب جدید باز شود.
  • _self: لینک در همان پنجره یا تب باز شود. این حالت به صورت پیش فرض می باشد.

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

تبدیل یک عکس به لینک

می توان با قرار دادن تگ کامل <img>  ( یعنی همراه با خصیصه ها ) درون تگ <a>  یک عکس را به لینک تبدیل کرد که با کلیک بر روی آن به آدرس جدیدی منتقل شد.

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

وقتی که محتوایی که در سایتی منتشر می شود خیلی طولانی باشد، می توان فهرستی را ایجاد کرد که با کلیک بر روی هر عنوان به قسمت مربوطه جهش کنید.

برای این کار ابتدا از تمام عناوین موجود در متن فهرستی را تهیه کنید و در بالای صفحه قرار دهید. حال به سر صفحه ها رجوع کنید ( سرصفحه ها در تگ های h نوشته می شوند ) و برای هر سر صفحه شناسه یکتایی را تعیین کنید. مجددا به فهرست ساخته شده رجوع کنید و هر عنوان را به یک لینک تبدیل کنید. مقدار خصیصه href هر لینک را شناسه بخش مربوطه بدهید. نحوه لینک دادن فهرست به بخش مربوطه را در مثال زیر خواهید دید:

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

تصاویر در HTML

در جلسات گذشته با تگ <img>  آشنا شدیم و گفتیم که برای این تگ خصیصه های src ( تعیین آدرس پوشه ای که عکس در آن قرار دارد )، alt ( تعیین متنی که اگر عکس به هر دلیلی باز نشد بجای عکس نمایش داده شود )، width ( برای تنظیم عرض ) و height ( برای تنظیم ارتفاع )، وجود دارد. همچنین دیدیم که می توانیم ارتفاع و عرض را علاوه بر نوشتن به صورت جدا از هم، همزمان در خصیصه style بنویسیم و آموختیم که واحد طول و عرض با پیکسل ( px ) یا درصد ( % ) و em و … بیان می شود.

در رابطه با خصیصه src  و آدرس دهی در HTML نکات زیر را باید در نظر گرفت:

  • می توان عکس را در پوشه ای در کنار فایل html ذخیره کرد. به صورت زیر:

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

که در این صورت در آدرس دهی، ابتدا نام پوشه ( در اینجا images ) را نوشته ( مانند این که روی پوشه کلیک کرده و پوشه را باز می کنید ) و بعد نام عکس را همراه با پسوند آن می نویسید.

  • اگر عکس در یک سرور جدا ذخیره شده باشد می توان آدرس دقیق سرور مربوطه را در src نوشت.
  • حال فرض کنید که html در همان آدرس قبلی ولی در یک پوشه دیگر است به صورت زیر:

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

در اینصورت اگر بخواهیم عکسی را از پوشه images انتخاب کنیم، چون فایل index.html در یک پوشه مجزاست، ابتدا باید از پوشه index خارج شده ( مانند خارج شدن از پوشه یعنی کلیک بر روی á در کنار نوار آدرس ) و بعد وارد پوشه images شده و عکس را انتخاب کنید.

برای خارج شدن از پوشه index در آدرس دهی از دو نقطه استفاده می کنیم و بعد علامت ” /  ” و سپس وارد پوشه images شده و بعد عکس را انتخاب می کنیم:

  • تصاویر متحرک با قالب GIF را نیز می توان به همین طریق به سند افزود.

شناور کردن تصویر

همانطور که می توانیم متن را چپ چین و یا راست چین و یا وسط چین کنیم، می توانیم عکس را نیز در هر گوشه از صفحه که بخواهیم قرار دهیم. این کار را با CSS و با استفاده از ویژگی float انجام می دهیم. این ویژگی را هم می توان مانند طول و عرض جدا نوشت و یا اینکه آن را در خصیصه style بنویسیم.

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

علاوه بر این روش می توان تگ <img>   را درون تگ <p>  نوشت و با استفاده از خصیصه text-align در تگ <p>  عکس را در مکان دلخواه قرار داد.

 تگ <map>

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

روش کار به این ترتیب است که ابتدا عکس مورد نظر را با استفاده از تگ <img>   همراه با خصیصه هایی که گفته شد به صفحه اضافه می کنیم. حال برای اتصال بین عکس اضافه شده و تگ <map>  از یک خصیصه به نام usemap استفاده می کنیم. برای  خصیصه usmap در تگ <img>  یک نامی  را همراه با # تعیین می کنیم: usemap:”#name”

حالا نوبت به تگ <map>  می رسد. این تگ دارای تگ آغاز و پایان است. درون تگ آغاز با استفاده از خصیصه name اتصال بین تگ <map>  و تگ <img>  را برقرار می کنیم. بدین طریق که خصیصه name را نوشته و مقدار خصیصه usemap که در تگ <img>  تعیین کرده بودیم را در آن قرار می دهیم. ( name:”usemap_value” )

درون تگ <map> ، تگ <area>  به تعدادی که می خواهیم قرار می دهیم. ( فرضا می خواهیم عکس را به 3 قسمت تقسیم کنیم. برای هر قسمت یک تگ <area>  می نویسیم. یعنی 3 تا تگ <area>  باید بنویسیم. )

تگ <area>  دارای 4 خصیصه است:

  • shape: برای انتخاب شکل برش. مثلا برای جدا کردن یک قسمت به صورت دایره، مقدار این خصیصه را circle تنظیم می کنیم. مستطیل: rect و برای چند ضلعی poly را به کار می بریم.
  • coord: این قسمت برای تعیین محدوده برش عکس استفاده می شود. یعنی مختصات محدوده ای که می خواهیم برش بخورد را تعیین می کنیم. برای تعیین این مختصات می توانید از وب سایت هایی که برای این کار ایجاد شده اند استفاده کنید.
  • alt: متنی که اگر عکس باز نشد، آن متن نمایش داده شود
  • href: برای تعیین آدرس وب سایت

در انتخاب عکس باید دقت کنید. عکس های با حجم بالا سرعت بارگذاری صفحه را کاهش خواهند داد.



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

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

 

نوشته های مرتبط

دیدگاه ‏خود را بنویسید