آموزش HTML (قسمت 5) : کار با لینک ها در HTML (جلسه دوم)

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۰۲ مهر ۱۳۹۱

فهرست محتوای این مقاله

لینک‌های ایمیلی

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

برای ایجاد لینک‌های ایمیلی می‌بایست از قاعده کلی زیر در عنصر a استفاده کنید:

<a href="mailto:[email protected]"> [email protected] </a>

در مثال فوق همانطور که مشاهده میکنید مقدار صفت href با عبارت mailto شروع شده و به دنبال آن کاراکتر ":" آمده و پس از آن آدرس ایمیلی که میخواهید ایمیل به آن ارسال شود آمده است. محتوای عنصر a مانند انواع دیگر لینک‌ها می‌تواند هر چیز دیگر باشد. بنابراین مثال فوق را می‌توان به صورت زیر نیز نوشت :

<a href="mailto:[email protected]"> E-mail us </a>

در هنگام ایجاد لینک‌های ایمیلی علاوه بر مشخص کردن آدرس ایمیل دریافت کننده حتی می‌توان موضوع، آدرس سایر دریافت کنندگان (یعنی گزینه‌های CC و BCC ) و بخشی از متن ایمیل را نیز مشخص کرد. برای این کار کافی است کد فوق را به صورت زیر تغییر داده و از پارامترهایی همچون subject، CC ، body پس از آدرس اصلی ایمیل استفاده کنید:

<a href="mailto:[email protected]?subject=hello&[email protected]&body=Please send me a copy of your new program!"> Email Me </a>

اکنون پس از کلیک بر روی لینک فوق برنامه ارسال ایمیل که معمولا یا Gmail و یا برنامه Microsoft Office Outlook و یا مثل من Yahoo-mailمی باشد به صورت زیر و با مشخصات پیش فرض تعیین شده باز خواهد شد: یاهو میل

لینک‌های دانلود

لینک‌های دانلود به لینک هایی گفته می‌شود که مسیر دسترسی به یک فایل خاص بر روی سرور خودمان یا سایر سرورها را مشخص میکند. معمولا از این نوع لینک‌ها برای فراهم کردن امکان دانلود فایل‌ها به کاربران استفاده می‌شود. در صورتی که بر روی لینکی کلیک کنیم و مرورگر نتواند فایل مورد نظر را باز کند. شروع به دانلود آن خواهد کرد. در مثال زیر نمونه ساده یک لینک دانلودکه امکان دانلود فایلی به نام test.zip را فراهم میکند. مشاهده می‌کنید:

<a href="mysite.com/upload/test.zip"> Click to Download </a>

لینک‌های لنگری

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

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

در هنگام ایجاد مقصد لنگر می‌بایست به جای استفاده از صفت href در تگ a از صفت name یا id برای نامگذاری آن استفاده کرد. ما از این نام در لنگر برای جهش به آن بخش بهره می‌بریم . حال در تگ a مبدا لنگر می‌بایست در صفت href از کاراکتر # و به دنبال آن نامی که برای مقصد انتخاب شده است استفاده کنیم. به کد زیر دقت کنید که متن همین جلسه است که با استفاده از لینک‌های لنگری ساخته شده :

کد بالا را دانلود کنید و آن را در ویرایشگر متن خود بنویسید (کپی، پیست کنید 😀 ).

نتیجه کد در مرورگر:

فهرست لینک‌های لنگری

سپس به طور مثال با کلیک بر روی لینک، به قسمت لینک‌های دانلود خواهید رفت:

لینک‌های لنگری- لینک‌های دانلود

نکته :

اگر مقصد لینک در یک صفحه مجزا باشد، برای اشاره کردن به یک بخش از این کد:

<a href="page.html#anchorname">

استفاده میشود، و اگر مقصد لنگر روی یک صفحه روی یک سرور(سایت) دیگر قرار گرفته باشد می‌بایست از دستور:

<a href="http://www.sitename.com/path/page.html#anchorname">

استفاده شود.

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

در لینک مقصد:

<h1 name="titr1"> this is a Heading</h1>

و در لینک مبدا از کد:

<a href="#titr1"> Heading1 </a>

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نیاز به لاگین

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

نظرات کاربران

Abbas412

سلام
یه مشکل!
ظاهرا مقصد میتونه هر تگی باشه، مثلا h2
ولی توی همین کد دانلود شده، من چند تا از هدینگ ها رو که درون تگ a بودن، فقط توی هدینگ گذاشتم
مثلا

&lt;h2&gt;&lt;a name=&quot;tag-a&quot;&gt;تگ a&lt;/a&gt;&lt;/h2&gt;

رو تبدیل کردم به:

&lt;h2 name=&quot;tag-a&quot;&gt;تگ a&lt;/h2&gt;

ولی کار نکرد!!!

یه کار دیگه هم کردم!!
جای “فهرست” و “بازگشت” رو عوض کردم! اولی رو بردم پایین صفحه، دومی رو بالای صفحه؛ ولی دیگه کار نکرد، یعنی دیگه نرفت پایین صفحه

مشکل از کجاست؟؟

سجاد دریس

سلام.
بله میتونه هر عنصری رو به عنوان مقصد انتخاب کرد.
اگه صفت name کار نکرد از صفت id استفاده کنید.

محمد حسین

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

کیوان علی محمدی

سلام بله میشه جاوااسکریپت ترجیحا جی کوئری (ای جکس) و PHP هم میخواد.

Sahar66

سلام
طبق راهنماییاتون مشکلم حل شد..
مرسی…

Sahar66

سلام وقتتون بخیر
وقتیکه کد هارو اجرا کردم و نرم افزار outlook express برام باز شد، در قسمت to آدرس ایمیل رو بهم نشون میده اما تو قسمت های دیگه مثه CC و Subject چیزیرو برام نشون نمیده. کدهارو مطمئنم که درست نوشتم و چند بار هم چک کردم. فک میکنین مشکل کجاست؟

سجاد دریس

سلام.
توی outlook تست نکردم، شاید مربوط به عدم پشتیبانی outlook از بقیه قسمت های کد باشه.

Sahar66

خب چجوری میتونم مثلا از یاهو یا جیمیل تستش کنم؟

سجاد دریس

باید ابتدا برای تست هر کدوم یه حساب داشته باشی، یعنی یه حساب جیمیل و یک حساب یاهو.
بعد از کلیک روی ارسال ایمیل. احتمالا یه پنجره ای باز میشه که با کدوم برنامه میخوایید ارسال ایمیل انجام بشه،؟ از اون جا میتونید yahoo و gmail یا outlook رو انتخاب کنید
توی فایر فاکس مسیر options > applictions برید توی لیست یک گزینه هست به اسم mailto که مقابلش نرم افزار ارسال ایمیل رو میتونید تعییین کنید

reza99

دانلود کد

سلام کد بالا دانلود نمیشه
میشه لطفا چک کنید
ممنون

سجاد دریس

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

فرزاد

سلامـ
خستهـ نباشید
انشاا… خوبـ باشینـ
مطالبـ خوبیـ رو گذاشتینـ دستتونـ درد نکنهـ
من می خوام با شما در ارتباط باشم
اگه مایل شدین برام یه پیام بدن از زحمتتون ممنون میشم
با تشکر ..
😳

سجاد دریس

سلام.
خیلی ممنون لطف دارین.
مشکلی نیس. میتونین از طریق پیغام خصوصی باهام در ارتباط باشین.
اینم آدرس ایمیلم
[email protected]

hamed

سایت خوبی داری از اموزشت هم ممنون

سجاد دریس

سلام.
خیی ممنون لطف دارین.