آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

لینک ها در HTML

لینک ها در HTML

فصل سوم ( معرفی ساختار  HTML4 )

جلسه ششم ( لینک ها در HTML )

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

تواین جلسه میخوایم راجع به لینک ها در HTML صحبت کنیم . ما با عنصر <a> میتونیم در تمامی نقاط صفحه لینک ایجاد کنیم . عنصر <a> یک عنصر inline هست و درون هر عنصری که بخواین میتونید قرار بدید . شما با استفاده از عنصر <a> میتونید لینک به یک URL جدید بدید و یا یک لینک برای اسال ایمیل ایجاد کنید .

سه نوع لینک داریم :

  • لینک سراسری (Global Links) : لینک به صفحات یک سایت دیگه .
  • لینک محلی (Local Links) : لینک به صفحات همون سایتی که داخلش هستید .
  • لینک داخلی  (Internal Links) : لینک هایی هستند که به قسمتی از همون صفحه ای که در اون هستید اشاره می کنند.

ایجاد لینک سراسری

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

 ایجاد لینک محلی

لینک محلی هم مثل لینک سراسری ایجاد میشه :

 ایجاد لینک داخلی  

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

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

ایجاد لینک برای ارسال ایمیل

برای ایجاد لینک برای ارسال ایمیل بصورت زیر عمل کنید :

کافیست بجای آدرس ایمیل info@iranweblearn.com ایمیل مورد نظر خودتون رو وارد کنید و بجای متن ” برای ارسال ایمیل کلیک کنید ” هم متن دلخواه خودتون رو بنویسید .

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

 

عنصر <a> شامل سه خاصیت پراهمیت هست که به شرح زیر می باشد :

خاصیت  href: این خاصیت از مهمترین خاصیت عنصر <a> هست . برای تعیین آدرس لینک مورد نظر از این خاصیت استفاده می کنیم .

خاصیت target : این خاصیت نحوه ی باز شدن لینک موردنظر رو در مرورگر مقصد تعیین میکنه که شامل ۴ حالت زیر هست :

blank : باز شدن صفحه ی مقصد در یک پنجره ی جدید

self : این خاصیت این امکان رو میده که لینک در همان پنجره یا قابی که کلیک شده ، باز بشه .

parent : باز شدن صفحه ی مقصد در همون صفحه ای که هستید .

top : لینک در همون پنجره ای که کلیک شده اجرا خواهد شد.

 خاصیت  title: جهت ثبت توضیحاتی برای لینک از این خاصیت استفاده می کنیم . پس از درج title ، زمانی که موس روی لینک قرار میگیره ، اون توضیحات برای کاربر نمایش داده میشه و متوجه میشه که این لینک قراره به کجا هدایتش کنه . همچنین استفاده از title به سئوی لینک ها کمک بیشتری میکنه .

 

تعیین فرمت و استایل برای لینک ها

شما میتونید به حالات مختلف به یک لینک استایل بدید ، به کد زیر دقت کنید :

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

 با text-decoration: none هم تعیین کردیم که خط زیر لینک پنهان بشه و نمایش داده نشه .

خوب جلسه ی امروز هم تموم شد . امیدوارم مفید واقع شده باشه .

تهیه شده در مدرسه مجازی ایرانیان

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • بهزاد

    به نظر من آموزشاتون مفید نیست :دی
    وقتی هنوز css رو یاد ندادین برا چی ازش استفاده میکنین ؟
    اون هم در این حد حرفه ای 😐

    • میترا رحیمی

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

  • فرهاد

    استاد ممنون

    با این اموزش ها بنظرتون نیازی به کلاسم هست که برم ؟

    • میترا رحیمی

      سلام دوست عزیز
      با استفاده از آموزش های مدرسه مجازی ایرانیان و پشتکار خودتون میتونید این مباحث رو یاد بگیرید اما نکته ای که هست اینکه در کلاس های آموزشی ممکنه هنگام انجام پروژه عملی نکاتی گفته بشه که تو این جلسات بیان نشده باشه . به عنوان استفاده از فونت ها در html بجای تصاویر و آیکون ها ، استفاده از آیکون های متحرک جدید که بصورت svg در پروژه بکار میره و به livicon ها معروفه ، رعایت یکسری اصول و نکات سئو در کدنویسی و یکسری ترفندها ، این ها مواردی هست که در کلاس های آموزشی حضوری مدرسه مجازی ایرانیان بصورت عملی و واضح آموزش داده میشه که به زودی این دوره ها برگزار میشه .
      نکته ی دیگه اینکه در کلاس آموزشی شما با سرعت بیشتری میتونید مباحث رو یاد بگیرید و اگر سوالی داشته باشید در لحظه به جواب اون میرسید و این سرعت آموزش رو زیاد میکنه .
      اما اگر شما بخواین در حد تبدیل psd به html5 , css3 آموزش ببینید همین مباحث که در سایت هست برای شما کافیه . فصل css که تقریبا کامل بشه یه پروژه عملی تبدیل psd به html5 , css3 همراه با فیلم های آموزشی در سایت قرار میدم که میتونید استفاده کنید .
      موفق باشید

  • Disrex

    سلام لطفا کد های به درد بخور زیادی درباره وب بزارید که ما از طریق آن ها وبمون رو طراحی کنیم.

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟