آموزش ساخت Jumping Text

در این مطلب به آموزش ساخت Jumping Text یا همان انکر لینک (Anchor Link) در صفحه پرداخته ایم:

• پرش در متن به چه معناست:
• تگ h1 چیست:
• تگ a و ساخت لینک:
• ID چیست و چه کاربردی دارد:
• ساخت Jumping Text با تگ های HTML:
• ساخت Jumping Text در وردپرس:

پرش در متن به چه معناست:

شماره بندی در کتاب ها یکی از مهم ترین بخش های هر کتاب میباشد چرا که به عنوان مثال یک کتاب قطور را تصور کنید بدون شماره بندی چقدر مطالعه آن کتاب سخت خواهد بود شماره بندی باعث میشود خواندن یک کتاب برای ما آسان شود و هر زمان که نیاز بود به بخش مورد نیاز سریعاََ رجوع کنیم در این مقاله آموزش ساخت Jumping Text در صفحات وب را خواهید آموخت.

جامپینگ یا انکر لینک (Anchor Link) چیست؟

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

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

تگ h1 چیست:

یک تگ مخصوص ساخت عنوان است که سر فصل ها را میتوان با این تگ ساخت h1 بزرگترین عنوان و h6 کوچکترین عنوان را مشخص میکند.

<h1> عنوان اول </h1>

تگ a و ساخت لینک:

لینک ها جز مهم ترین قسمت در سایت ها میباشد چرا که با هر کلیک میتوان جا به جا شد،یکی دیگر از تگ های مهم HTML تگ <a> است که جز پر استفاده ترین تگ ها محسوب میشود. با استفاده از این تگ میتوانید یک نقطه پرش بسازید به مثال زیر با دقت توجه کنید.

    <a href = "https://www.google.com/">گوگل</a>

در مثال بالا تگ <a> نشانگر ساخت لینک است و (href) مخفف hypertext reference که برای وصل کردن صفحه ای به صفحه دیگر استفاده میشود که به عنوان مثال از گوگل برای لینک دهی استفاده کرده ایم.

ID چیست و چه کاربردی دارد:

زمانی که یک صفحه با تگ های HTML ساخته میشود، طراح برای اینکه بتواند روی آن بخش شامل پاراگرف ها تیتر،تصاویر و غیره تغییراتی اعمال کند یک شناسه(ID) به اختصار آن تگ میدهد،تا زمان استفاده از دستوراتی همچون CSS (Cascading Style Sheets) مانند:رنگ پس زمینه،اندازه فونت تنها روی تگ مورد نظر آن تغییرات اجرا شود.

در قسمت id یک نام به اختصار تگ <h1> در آمده است که نحوه نام گذاری آن کاملا به صورت دلخواه میباشد و موقع ایجاد متن پرش(Jumping Text) باید از این id استفاده کرد.

اکنون که نحوه ساخت تگ <h1> و ساخت لینک<a> و شناسه دادن به عنصر را یاد گرفتید به سراغ ادامه آموزش ساخت Jumping Text میرویم.

لینک دادن به متن در html :

• برای لینک دادن به متن در html ابتدا Notepad را باز میکنید سپس به محل مقصد که قرار است سریع به آن بخش در مطلب پرش کنیم یک id بدهید مانند کد زیر عمل کنید:

<p id = "p3" > پاراگراف سوم</p>

• سپس به مبدا بروید و یک لینک بسازید و قبل از نوشتن id یک (#) اضافه کنید:

<h1><a href="#P3"> پرش به پاراگراف سوم</a></h1>

• سپس فایل ایجاد شده را سیو(save) کرده و در مرورگر اجرا کنید.

نتیجه کار به مانند تصویر زیر خواهد بود که ما از برخی دستورات CSS برای راست چین کردن متن و رنگ پس زمینه برای این مثال استفاده کرده ایم.

لینک دادن به متن در ورد پرس :

مراحل ساخت Jumping Text (انکر لینک ) در وردپرس:

• برای لینک دادن به متن در ورد پرس ابتدا در مطلب خود نقطه ای مقصد را بسازید و به به اختصار آن یک id بدهید.

• زمانی که مقصد خود را ساختید مانند پاراگراف،تیتر،فهرست و غیره به بخش ویرایش به عنوان HTML بروید مانند تصویر زیر:

• سپس تمامی کد بلوک را کپی کرده و به داخل Notepd بروید تا id را به آن اضافه کنید.

در تصویر بالا مشاهده میکنید که جای تگ باز و بسته جا به جا شده است و همین امر باعث میشود زمان نوشتن id به مشکل بر بخوریم. تگ را به Notepad انتقال داده و id را به آن اضافه کنید.

• بدون هیچ مشکلی id را اضافه شد سپس تگ را کپی کرده و در محل اصلی خود جای گذاری کنید.

مشاهده میکنید که id اضافه شده است و به نقطه مبدا بروید.

• id را به عنوان یک لینک که با # شروع میشود به مبدا اضافه کنید و با زدن ENTER نقطه پرش ایجاد میشود.

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

بازگشت به صفحه اصلی