sina salehifard 20 اردیبهشت 1393 3 4808 بازدید آموزش HTML
فیلم آموزش ساختن لینک (anchor) به نقاط مختلف یک صفحه وب

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

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

فیلم آموزش ساختن لینک (anchor) به نقاط مختلف یک صفحه وب

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

دسترسی به این بخش مخصوص اعضاست. شما می توانید به رایگان عضو شوید و به این بخش دسترسی داشته باشید. ورود / عضویت

دسترسی سریع :

متن فیلم آموزشی ساختن لینک (anchor) به نقاط مختلف یک صفحه وب

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

ايجاد فهرست دروني در html


<span id="toc">فهرست</span>

<ul>

<li><a href=""> فتوشاپ</a></li>

<li><a href=""> اچ تي ام ال</a></li>

<li><a href="">سي اس اس </a></li>

<li><a href="">جي کوئري</a></li>

</ul>

<h2>photoshop</h2>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p><p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<h2>html</h2>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p><p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<h2>css</h2>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p><p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<h2>Jquery</h2>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p><p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

1

مثال 1 :

فرض می کنیم این صفحه وب ما است که دارای متن است. حال ما می خواهیم با کلیک روی فتوشاپ یا سی اس اس یا … در فهرست بالا به متن آن هدایت شوند:


<span id="toc">فهرست</span>

<ul>

<li><a href="#photoshop"> فتوشاپ</a></li>

<li><a href="#html"> اچ تي ام ال</a></li>

<li><a href="#css">سي اس اس </a></li>

<li><a href="#Jquery">جي کوئري</a></li>

</ul>

<h2 id="photoshop">photoshop</h2>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p><p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<h2 id="html">html</h2>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p><p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<h2 id="css">css</h2>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p><p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<h2 id="Jquery">Jquery</h2>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p><p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

مثال 2 :

اکنون یک لینک در زیر هر متن به نام “برو بالا” ایجاد می کنیم که هر وقت روی آن کلیک کردند، به بالای صفحه هدایت شوند. برای اینکار آدرس تگ a را به نام id تگ spsn که قبلا در بالا نوشته بودیم ( به نام toc ) می گذاریم.


<span id="toc">فهرست</span>

<ul>

<li><a href="#photoshop"> فتوشاپ</a></li>

<li><a href="#html"> اچ تي ام ال</a></li>

<li><a href="#css">سي اس اس </a></li>

<li><a href="#Jquery">جي کوئري</a></li>

</ul>

<h2 id="photoshop">photoshop</h2>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p><p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<a href="#toc">برو بالا</a>

<h2 id="html">html</h2>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p><p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<a href="#toc">برو بالا</a>

<h2 id="css">css</h2>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p><p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<a href="#toc">برو بالا</a>

<h2 id="Jquery">Jquery</h2>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p><p>this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.this is test text.</p>

<a href="#toc">برو بالا</a>

دسترسی سریع :

نظرات کاربران (3)



  1. leila

    واقعا ممنون

  2. omid

    با سلام از توضیحات عالیتون خیلی ممنون

  3. mohamad

    با سلام واقعا آموزش های شما خیلی خیلی خوبه ممنون از آموزش های شما