ایجاد لینک
برای ورود به سیستم یا عضویت رایگان برای لذت بردن از این دوره باید ارائه دهد!
در فصل قبل، شما یاد گرفتید که چگونه یک صفحه HTML ساده ایجاد کنید. خوب، واقعا خیلی زیاد نبود، اما یک صفحه HTML کاملا یکسان بود.
همانطور که می دانید، یک وب سایت از چندین صفحه تشکیل شده است. چگونه از یک صفحه به صفحه دیگر بروید؟ با استفاده از لینک ها البته! بنابراین چگونگی ایجاد پیوندهای میان صفحات ما این است که ما میخواهیم این فصل را یاد بگیریم.
من حدس می زنم همه شما می دانید که یک لینک چیست: یک متن است که می توانید روی آن کلیک کنید تا به صفحه دیگری بروید.
شما می توانید یک پیوند را از pagea.html به pageb.html ایجاد کنید، اما شما همچنین می توانید یک لینک را به یک وب سایت دیگر (به عنوان مثال، http: //www.google.com) ایجاد کنید. ما شاهد خواهیم بود که هر دو مورد به همان شیوه عمل می کنند.
لینک به وب سایت دیگری
آسان است که پیوندهای مربوط به یک صفحه را تشخیص دهید: آنها به شیوه ای متفاوت نوشته شده اند (به عنوان پیشفرض، در آبی بنام زیر) و یک مکان نما که مانند یک دست ظاهر می شود زمانی که شما به آن اشاره کردید.
پیشنهاد میکنم سعی کنید یک پیوند که شما را به Google می برد را رمزگذاری کند، همانطور که در شکل زیر نشان داده شده است.
پیوند به Google
پیوند به Google
برای قرار دادن یک پیوند، برچسبی که ما میخواهیم استفاده کنیم بسیار آسان است به یاد داشته باشید: <a>. با این حال، ویژگی، href، به آن نشان می دهد که صفحه لینک باید منجر شود.
به عنوان مثال، کد زیر لینکی است که به Google هدایت می شود، که در آدرس http://www.google.com قرار دارد:
<a href="http://www.google.com"> Google </a>
ما قصد داریم این لینک را در یک پاراگراف قرار دهیم. بنابراین در اینجا چگونگی نمایش مثال را در شکل زیر نشان می دهیم:
<p> سلام. آیا می خواهید به <a href="http://www.google.com"> Google </a> وب سایت مراجعه کنید؟ <br />
این یک وب سایت خوب است! ؛-) </ p>
به طور پیش فرض، لینک در آبی رنگ برجسته شده است. اگر قبلا صفحه را باز کرده باشید، لینک در بنفش نمایش داده می شود.
وقتی CSS را مطالعه می کنیم ببینیم چگونه این ظاهر را تغییر دهیم.
اگر می خواهید یک لینک را به یک سایت دیگر بسازید، می توانید آدرس آن (نشانی اینترنتی) inhttp: // را کپی کنید. توجه داشته باشید که برخی از لینک ها گاهی با https شروع می شوند: // (وب سایت های ایمن) یا پیشوند های دیگر (ftp: //، و غیره).
اگر یک پیوند به یک وبسایت داشته باشید که دارای یک آدرس است کمی عجیب و غریب با رخداد '&'، به عنوان در: http://www.site.com/؟data=15&name=mateo21، شما باید جایگزین هر "&" توسط "& amp؛" در لینک خود به شرح زیر است: http://www.site.com/؟data=15&؛name=mateo21.
شما هیچ تفاوتی را متوجه نخواهید شد، اما اگر می خواهید صفحه وب شما به درستی در HTML5 ساخته شود لازم است.
پیوندهایی که دیده ایم، از زمان ارسال آدرس کامل نشان داده می شود. ما در حال حاضر شاهد هستیم که می توانیم لینک ها را به طریقی متفاوت بنویسیم که برای پیوند بین صفحات وب سایت ما مفید خواهد بود.
یک پیوند به صفحه دیگری از وب سایت شما
ما فقط یاد گرفتیم که چگونه لینک هایی را به وب سایت های موجود ایجاد کنیم. اما مطمئن هستم که دوست دارید لینک هایی را بین صفحات وب سایت خود ایجاد کنید، درست است؟
بله، دقیقا چطور می توانم یک پیوند به صفحه دیگری در وبسایت من ایجاد کنم؟ من نمی دانم hishttp: // ...... آدرس همانطور که من فقط شروع به ایجاد وب سایت من در اینجا! من آدرس ندارم
در واقع، در حال حاضر شما در حال ایجاد وب سایت خود در رایانه خود هستید. شما تنها کسی هستید که میتواند آن را ببیند و هنوز "آدرس وب" با https: // مانند بسیاری از وبسایتها وجود ندارد. خوشبختانه این کار مانع از کار ما نخواهد شد.
دو صفحه در همان پوشه قرار دارد
برای شروع، ما قصد داریم دو فایل مربوط به دو صفحه مختلف HTML ایجاد کنیم. همانطور که من بسیار الهام بخش هستم، پیشنهاد می کنم آنها را به آنها page1.htmlandpage2.html بفرستم. بنابراین ما این دو فایل را بر روی هارد دیسک ما در همان فولدر قرار می دهیم (شکل بعدی را ببینید).
چندین فایل HTML در همان پوشه
چندین فایل HTML در همان پوشه
چگونه یک پیوند را از صفحه 1 به صفحه 2 ایجاد کنید بدون داشتن آدرس inhttp: //؟ در حقیقت، آسان است: اگر هر دو فایل در همان پوشه واقع شده اند، فقط نام فایل مورد نظر خود را که می خواهید به عنوان لینک هدف انتقال دهید، بنویسید. به عنوان مثال: <a href="page2.html"> گفته می شود این یک لینک نسبی است.
در اینجا کدی است که ما در filepage1.htmlandpage2.html استفاده میکنیم.
page1.html
<p> سلام. آیا می خواهید <a href="page2.html"> صفحه 2 </a> را مشاهده کنید؟ </ p>
page2.html
صفحه 2 (صفحه ورود) به سادگی پیامی را نشان می دهد که نشان می دهد شما به طور موثر به صفحه 2 رسیده اید:
<h1> به صفحه 2 خوش آمدید! </ h1>
دو صفحه در پوشه های مختلف قرار دارد
اگر صفحات در پوشه های مختلف قرار گرفته اند، چیز کمی دشوارتر می شود. در حالت ایده آل، آنها نباید خیلی دور از یکدیگر باشند (به عنوان مثال در زیر پوشه).
بیایید تصور کنیم thatpage2.htmlis در یک subfolder namedcontent واقع شده است، همانطور که در تصویر بعدی است.
فایل page2.html در پوشه محتوا قرار دارد
فایل page2.html در پوشه محتوا قرار دارد
در این مورد، لینک باید به صورت زیر نوشته شود:
<a href="content/page2.html">
اگر چند زیر پوشه وجود دارد، این را بنویسید:
<a href="content/autredossier/page2.html">
و اگر پرونده در زیر پوشه قرار نگرفته باشد، اما در پوشه «پدر و مادر»؟ بعدش چه کاری میکنی؟
اگر فایل مورد نظر شما در یک پوشه قرار گرفته است که در ساختار درختی "بالاتر" قرار دارد، باید دو نقطه به این شکل بنویسید:
<a href
چشم انداز
لینک های نسبی بسیار پیچیده برای استفاده از زمانی که شما اصل را درک کنید. برای دانستن اینکه چگونه پیوند خود را بنویسید، فقط به «سطح پوشه» نگاه کنید که در آن فایل مقصد شما واقع شده است. شکل بعدی، لینک های مختلف ممکن را به طور خلاصه خلاصه می کند.
لینک نسبی
لینک نسبی
لینک به لنگر
لنگر نوعی نقطه مرجع است که شما می توانید در صفحات HTML خود قرار دهید زمانی که آنها بسیار طولانی است.
در واقع، ممکن است پس از آن مفید باشد که یک لینک را به یک نقطه بیشتر از همان صفحه ایجاد کنید تا بازدیدکنندگان بتوانند به طور مستقیم به قسمت مورد علاقه خود بپردازند.
برای ایجاد یک لنگر جدید، فقط برچسب تگ را اضافه کنید که سپس به عنوان نقطه مرجع عمل می کند. برای مثال می توان از هر تگ، مانند یک عنوان استفاده کرد.
برای نشان دادن نام لنگر استفاده کنید. پس از آن می توانیم از آن برای ایجاد لینک به این لنگر استفاده کنیم. مثلا:
<h2 id = "my_anchor"> عنوان </ h2>
سپس فقط یک پیوند به طور معمول ایجاد کنید، اما این بار thehrefattuting شامل یک شخصیت هش (#) همراه با نام لنگر است. مثال:
<a href="#my_anchor"> به لنگر بروید </a>
به طور معمول، اگر روی پیوند کلیک کنید، آن را به شما بیشتر از همان صفحه (اگر صفحه به اندازه کافی متن برای نوارهای پیمایش به طور خودکار حرکت می کند).
در اینجا یک مثال از یک صفحه با تعداد زیادی از متن است که از لنگر استفاده می کند (از هر متن قدیمی فقط برای پر کردن صفحه استفاده می شود):
<h1 >> صفحه بزرگ من </ h1>
<p>
به بخشهایی که با آنها برخورد میکنید بروید: <br /> <br />
<a href="#kitchen"> آشپزخانه </a> <br />
<a href="#rollers"> غلطک </a> <br />
<a href="#archery"> تیراندازی با توپ </a> <br />
</ p>
<h2 id = "kitchen"> آشپزخانه </ h2>
<p> ... (مقدار زیادی متن) ... </ p>
<h2 id = "غلطک"> غلطک </ h2>
<p> ... (مقدار زیادی متن) ... </ p>
<h2 id = "تیراندازی با کمان"> تیراندازی با کمان </ h2>
<p> ... (مقدار زیادی متن) ... </ p>
اگر هنگام کلیک روی پیوندها چیزی اتفاق نیفتد، این به این معنی است که متن کافی نیست. در این مورد، می توانید هر متن قدیمی را به صفحه اضافه کنید تا متن (حتی) متن بیشتری داشته باشد یا اندازه پنجره مرورگر خود را کاهش دهد تا نوارهای پیمایش را در کنار آن نشان دهد.
Theidattribute برای نام "منحصر به فرد" برای یک برچسب استفاده می شود تا از آن به عنوان مرجع استفاده شود. و به من اعتقاد داشته باشید، آخرین ویژگی این ویژگی را ندیده اید. در اینجا، آن را برای پیوند به لنگر استفاده می کنیم، اما در CSS، ما به عنوان یک برچسب خاص، همانطور که می بینید، بسیار مفید خواهد بود.
با این حال، از ایجاد شناسه با فضاهای یا کاراکترهای خاص جلوگیری کنید. هر جا که امکان دارد، به سادگی از حروف و اعداد استفاده کنید تا ارزش توسط همه مرورگرها به رسمیت شناخته شود.
پیوند به لنگر دیگری که در صفحه دیگری قرار دارد
خوب، هشدار داده شود این واقعا یک مگامیکس است!
ایده این است که یک لینک ایجاد کنید که صفحه دیگر را باز کند و شما را مستقیما به لنگر دیگری که در پایین صفحه قرار دارد را به شما منتقل کند.
در عمل، انجام آن بسیار ساده است: فقط نام صفحه را تایپ کنید، به دنبال آن یک شخصیت هش (#)، به دنبال آن نام لنگر.
به عنوان مثال: <a href="anchors.html#rollers">
... شما را به pageanchors.html، به طور مستقیم به لنگر callrolers.
در اینجا یک صفحه است که حاوی سه پیوند است، هر کدام به یکی از لنگرهای صفحه در مثال قبلی منجر می شوند:
<h1> Megamix </ h1>
<p>
مرجع در یک صفحه دیگر: <br /> <br />
<a href="anchors.html#kitchen"> آشپزخانه </a> <br />
<a href="anchors.html#rollers"> غلطک </a> <br />
<a href="anchors.html#arc"> تیراندازی با توپ </a> <br />
</ p>
مثال های عملی استفاده از لینک ها
در اینجا، من سعی میکنم به شما چند نمونه عملی از استفاده از لینکها را نشان دهم. به عنوان مثال، آیا می دانستید که لینک هایی که یک بار دانلود می شوند بسیار آسان است؟ این یک ایمیل جدید ایجاد می کند؟ این یک پنجره جدید باز می شود؟
نه؟ خوب، ما قصد داریم نگاهی به همه چیزهایی که در اینجا وجود دارد، داشته باشیم.
یک پیوند که نشانگر ابزار شناور را نشان می دهد
شما می توانید از thetitleattribute استفاده کنید که یک متنی را نشان می دهد وقتی که به لینک اشاره میکنید. این ویژگی اختیاری است.
شما باید یک نتیجه مشابه شکل بعدی بدست آورید.
یک راهنمایی
یک راهنمایی
راهنمایی می تواند در ارائه بازدیدکنندگان اطلاعات حتی قبل از کلیک روی لینک مفید باشد.
در اینجا این است که چگونه این نتیجه را بازتولید کنیم:
<p> سلام. آیا میخواهید از <a href="http://www.google.com" title=" بعضیها بخواهید که موتور جستجوی Google هستید؟ </a> </ p>
یک لینک که یک پنجره جدید باز می شود
لینک را می توان "مجبور" برای باز کردن لینک در یک پنجره جدید. برای انجام این کار، addtarget = "_ blank" را به <a> برچسب:
<p> سلام. آیا میخواهید از <a href="http://www.google.com" target="_blank"> Google </a> بازدید کنید؟ <br />
وبسایت در پنجره دیگری نمایش داده خواهد شد. </ p>
بسته به تنظیمات مرورگر، صفحه در یک پنجره جدید یا یک برگه جدید باز خواهد شد. شما نمی توانید بین باز کردن یک پنجره جدید یا یک برگه جدید را انتخاب کنید.
توجه داشته باشید، با این حال توصیه نمی شود که این تکنیک را بیش از حد مورد استفاده قرار دهید زیرا مرور آن را مختل می کند. بازدیدکنندگان می توانند برای خود تصمیم بگیرند که آیا می خواهند لینک را در یک پنجره جدید باز کنند. آنها می توانند Shift + با کلیک بر روی لینک برای باز کردن آن در یک پنجره جدید و یا Ctrl + کلیک کنید تا آن را در یک برگه جدید باز کنید.
یک لینک برای ارسال یک ایمیل
اگر می خواهید بازدید کنندگان خود را قادر به ارسال یک ایمیل به شما، شما می توانید لینک از themailtotype استفاده کنید. هیچ چیز در سطح برچسب تغییر نمی کند. شما به سادگی value of therefattribute را مانند این تغییر دهید:
<p> <a href="mailto:yourname@yourisp.com"> به من یک ایمیل ارسال کنید! </ a> </ p>
بنابراین شما فقط باید لینک را با bymailto شروع کنید: و آدرس ایمیل که می توانید با آن تماس بگیرید را وارد کنید. اگر روی لینک کلیک کنید، یک پیام خالی جدید باز میشود، آماده ارسال به آدرس ایمیل شما.
یک لینک برای بارگیری یک فایل
بسیاری از شما باید بدانند که چگونه برای بارگیری یک فایل کار می کند ... در واقع، روش ها دقیقا همانند برای لینک دادن به یک صفحه وب است، اما این بار نشان دهنده نام فایل برای دانلود است.
به عنوان مثال، فرض کنید میخواهید downloadmyfile.zip را دانلود کنید. به سادگی این فایل را در همان پوشه به عنوان صفحه وب خود (یا در زیر پوشه) قرار دهید و یک پیوند را به این فایل بگذارید:
<p> <a href="myfile.zip"> فایل را دانلود کنید </a> </ p>
این همه! همانطور که مرورگر می بیند که هیچ صفحه وب ای نمایش داده نمی شود، هنگامی که کاربر بر روی لینک کلیک می کند، فرایند دانلود را شروع می کند.
به طور خلاصه
لینک ها برای انتقال از یک صفحه به صفحه دیگر استفاده می شوند و به عنوان پیش فرض در متن آبی رنگ با خطی مشخص شده اند.
برای قرار دادن لینک، از <a> برچسب با thehrefattribute برای نشان دادن آدرس صفحه هدف استفاده کنید. به عنوان مثال: <a href="http://www.google.com">
شما می توانید به سادگی با نوشتن نام فایل <a href="page2.html"> را به یک صفحه دیگر در وب سایت خود اضافه کنید.
لینک ها همچنین می توانند برای پرش به مکان های دیگر در همان صفحه استفاده شوند. شما باید یک لنگر با ویژگی id را برای «علامت گذاری» یک مکان در صفحه ایجاد کنید و سپس یک لینک به لنگر مانند این را ایجاد کنید: <a href="#anchor">.
