خانه / کامپیوتر / اموزش / آموزش برنامه نویسی HTML (قسمت ۱۴)

آموزش برنامه نویسی HTML (قسمت ۱۴)

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

 

دوستان توجه کنید که در برخی از صفحات طولانی عمدتاً یک دکمه به بالای صفحه مشاهده می شود که با نام های Top و Back to top و Scroll to top زیاد به چشم میخورند.

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

 

این لینک ها با استفاده از همان تگ معروف <a> درست می شوند با این تفاوت که با کلیک بر روی آنها به یک صفحه دیگر منتقل نمی شوید بلکه بدون تغییر صفحه فقط به نقطه مقصد (معمولاً بالای صفحه) منتقل می شوید و اما مهمترین کاربردی که از آن استفاده بسیاری میشود برای ساخت صفحات چند بخشی است.

 

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

 

این آموزش را توسط مثال ارائه می دهیم که علاوه بر درک بهتر موضوع ، نحوه کاربرد آن مفهومی تر باشد »

فرض کنید یک صفحه بسیار طولانی دارید و صفحه شما شامل ۴ بخش مختلف است به ترتیب زیر :

  • بخش مقدمه
  • بخش معرفی
  • بخش محصولات
  • بخش ارتباط

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

ابتدا صفحه را می سازیم » (برای راحتی کار و جلوگیری از شلوغ شدن صفحه به جای متن های طولانی از <br> های متعدد استفاده می کنیم .

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

خب دوستان یک صفحه اچ تی ام درست کنید و بخش زیر را در آن جایگذاری کنید (در بخش Body قرار دهید)

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

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

خب توجه کنید »

یکی از شناسه های بسیار مهم تگ <a> شناسه نامگذاری name است، حالا ما در ابتدای هر یک از بخش ها به شکل زیر یک شناسه نامگذاری قرار میدهیم ، توجه نمایید که در این آموزش ما از متن های فارسی در شناسه نامگذاری استفاده میکنیم که درک بهتر و کاملتری ایجاد کنیم اما بهتر است از حروف یا اعداد انگلیسی استفاده گردد.

شناسه نامگذاری به این شکل استفاده می شود :

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

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

 

قبل از کلمه Test یک علامت # قرار دادیم که مشخص کنیم لینک داخلی است و همچنین باید به جای کلمه test نامی که برای هر بخش انتخاب کردیم را قرار دهیم، به این شکل منو های ما لینک دار می شود ، حالا باید تمام منو ها را لینک دار کنیم. کد اصلی ما به این شکل در می آید »

کد بالا را درون یک نوت پد قرار دهید و یا اینکه سورس آموزش را دانلود کنید تا به طور واضح طریقه عملکرد لینک های داخلی را مشاهده کنید.

 

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


موفق باشید.

 

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

درباره ی nasimazadi

همچنین ببینید

واحد پردازش مركزي CPU 

واحد پردازش مركزي CPU مدت زمان انجام يك كار بوسيله كامپيوتر، به عوامل متعددي بستگي …

پاسخ دهید

%u0637%u0631%u0627%u062D%u06CC %u0633%u0627%u06CC%u062A
طراحی سایتسئوفروش ویلا و اجاره ویلاسرویس و تعمیر کولر گازیاجاره ویلافروش ویلا