html

آموزش ساخت Jumping Text

آموزش ساخت Jumping Text

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

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

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

اگر مراحل و نحوه ساخت یک فایل 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 میرویم.

ساخت Jumping Text با تگ های HTML:

  • ابتدا Notepad را باز میکنید سپس به محل مقصد که قرار است سریع به آن بخش در مطلب پرش کنیم یک id بدهید مانند کد زیر عمل کنید:
<p id = "p3" > پاراگراف سوم</p>
  • سپس به مبدا بروید و یک لینک بسازید و قبل از نوشتن id یک (#) اضافه کنید:
<h1><a href="#P3"> پرش به پاراگراف سوم</a></h1>
آموزش ساخت Jumping Text
  • سپس فایل ایجاد شده را سیو(save) کرده و در مرورگر اجرا کنید.

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

مراحل ساخت Jumping Text در وردپرس:

  • ابتدا در مطلب خود نقطه ای مقصد را بسازید و به به اختصار آن یک id بدهید.
  • زمانی که مقصد خود را ساختید مانند پاراگراف،تیتر،فهرست و غیره به بخش ویرایش به عنوان HTML بروید مانند تصویر زیر:
مراحل ساخت Jumping Text در وردپرس:
  • سپس تمامی کد بلوک را کپی کرده و به داخل Notepd بروید تا id را به آن اضافه کنید.

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

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

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

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

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

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

به اشتراک بگذارید
نظر بدهید

پست مرتبط

پست های اخیر

  • آموزش

نحوه ایجاد فایل html

فرقی نمیکنه که از چه مرورگری برای جست جو در دنیای اینترنت استفاده میکنید،مهم این است که مطلب مورد نیاز…

6 ساعت قبل
  • PHP

انواع توابع در PHP

توابع (Functions) یکی از مهم‌ترین اجزای هر زبان برنامه‌نویسی هستند و PHP نیز از این قاعده مستثنی نیست. توابع در…

11 ساعت قبل
  • PHP

چرا \n یا \t در php کار نمیکنن

در PHP، دستور echo برای نمایش رشته‌ها در مرورگر استفاده می‌شود. اما وقتی از کاراکترهای کنترلی \n برای رفتن به…

13 ساعت قبل
  • طراحی صفحات وب

مقایسه انواع فرمت‌های فونت سایت

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

1 روز قبل
  • PHP

کاراکترهای کنترلی در PHP

کاراکترهای کنترلی در PHP به کاراکترهایی اشاره دارند که برای کنترل نحوه نمایش یا پردازش متن استفاده می‌شوند. این کاراکترها…

3 روز قبل
  • حسابداری هلو

پرداخت و دریافت چک درهلو

یکی از امکانات مهم در برنامه هلو، مدیریت پرداخت چک‌ها است که می‌تواند برای کنترل تراکنش‌های مالی و تنظیم پرداخت‌های…

5 روز قبل

Fatal error: Uncaught Error: Call to a member function hasAttribute() on null in /home/itvisi/domains/itvisit.ir/public_html/itblog/wp-content/plugins/accelerated-mobile-pages/includes/vendor/tool/Dom/Document.php:561 Stack trace: #0 /home/itvisi/domains/itvisit.ir/public_html/itblog/wp-content/plugins/accelerated-mobile-pages/includes/vendor/tool/Dom/Document.php(468): AmpProject\Dom\Document->loadHTMLFragment('<!doctype html>...', Array) #1 /home/itvisi/domains/itvisit.ir/public_html/itblog/wp-content/plugins/accelerated-mobile-pages/includes/vendor/tool/Dom/Document.php(369): AmpProject\Dom\Document->loadHTML('<!doctype html>...', Array) #2 /home/itvisi/domains/itvisit.ir/public_html/itblog/wp-content/plugins/accelerated-mobile-pages/includes/vendor/tool/Optimizer/TransformationEngine.php(78): AmpProject\Dom\Document::fromHtml('<!doctype html>...') #3 /home/itvisi/domains/itvisit.ir/public_html/itblog/wp-content/plugins/accelerated-mobile-pages/includes/amp-optimizer-addon.php(17): AmpProject\Optimizer\TransformationEn in /home/itvisi/domains/itvisit.ir/public_html/itblog/wp-content/plugins/accelerated-mobile-pages/includes/vendor/tool/Dom/Document.php on line 561