من فکر می کنم شما قبلاً متوجه شده اید که در این فصل در مورد چه چیزی بحث خواهد شد.. و می دانید که پیوند چیست، اگر نه، اینجا را کلیک کنید.. چندین نوع پیوند و همچنین "مکانیسم" برای دنبال کردن آنها وجود دارد. در این فصل سعی خواهم کرد جزئیات نحوه ثبت پیوندها و همچنین پیچیدگی های کار با آنها را به شما بگویم.
انحراف غزلی:
یک بار در ارتش، رئیس ستاد پیش من آمد و دستور داد، نقل می کنم:
اون مدرک رو برام بیار، هر چند نمیدونم کجاست و چیه!! چه ایستاده ای؟ بریم بدویم!! من دیر کردم!!!
بنابراین، چرا من آنقدر هستم که مرورگر، مانند من، در حالت گیجی قرار نگیرد، باید بداند: نام دقیق سند، مسیر سند، و مکانی که باید آن را بیاورد، یا بهتر است بگوییم کجا برای باز کردن آن
در حال حاضر با کمک notepad فقط یک سند HTML ایجاد کرده ایم، من آن را با نام index.html دارم (چرا چنین نام عجیبی را انتخاب کردم index.html و چرا باید به آن نگاه کنم) نمی دونم کدوم یکی رو خودت به این اسم رسیدی، اما فکر می کنم، تو یادت میاد و میدونی کجاست، مگر اینکه رئیس دفتر من باشی :). در این سند سعی می کنیم یک لینک ایجاد کنیم به سند دیگری که هنوز در اختیار نداریم.. بنابراین قبل از مراجعه به آن، باید آن را ایجاد کنید خوب، شما قبلاً می دانید چگونه.
- دفترچه یادداشت را باز کنید
- ما کد را در html می نویسیم. به عنوان مثال، یک صفحه با تعدادی عکس.
- ما آن را به عنوان یک صفحه html در همان پوشه کاری ذخیره می کنیم که اولین سندی که ایجاد کردیم از قبل وجود دارد. بیایید، برای اینکه گیج نشویم، آن را primer.html بنامیم، و شاید نام اولی را نیز به index.html تغییر دهیم.
اکنون می دانم که شما دو سند html index.html و primer.html دارید و اکنون حداقل مجموعه ای برای یادگیری بیشتر دارید.
لینک های متنی
برچسب آشنایی (از لنگر - لنگر)، می توانید متن یا تصویری را در آن قرار دهید، که تبدیل به پیوندی به اسناد خاص می شود. ویژگی برچسب hrefنام و مسیر سندی که پیوند به آن اشاره دارد را مشخص می کند.
همه با هم اینطور نوشته شده است:
اینم عکسای من!!همانطور که احتمالا متوجه شدید primer.html نام دومین سند html ما است و کتیبه "اینجا عکس های من است!" این یک تکه متن از فایل index.html است.
به قیاس با برچسب تصاویر
مسیر پیوند به سند در حال باز شدن به همین روش نوشته می شود:
اینم عکسای من!!- و این بدان معناست که فایل primer.html یک سطح بالاتر از سند قرار می گیرد
اینم عکسای من!!- سند در وب سایت www.site.ru قرار دارد.
خوب، بیایید تلاش کنیم؟ در زیر نمونه ای از دو سند به طور همزمان آورده شده است که در آنها پیوندهایی که به یکدیگر اشاره دارند ثبت شده است.
فایل index.html:
به من بگو ای فرزند عزیز: در کدام گوش من وزوز می کند؟
AT قانونیا ترک کرد?
فایل primer.html:
مثال نشان می دهد که پیوندها با رنگ هایلایت شده اند، به طور پیش فرض آبی یک پیوند است، و قرمز پیوندی است که قبلاً بازدید شده است، این رنگ ها را می توان با استفاده از تگ افتتاحیه که قبلاً برای ما شناخته شده است تغییر داد. < body > و صفات آن
ارتباط دادن- رنگ پیوندپیوند- رنگ پیوند فعال و کلیک شده
vlink- رنگ لینک بازدید شده
اینگونه نوشته شده است:
>در ادامه صحبت در مورد رنگ یک پیوند متنی، لازم به ذکر است که در صورت لزوم، می توانید با یک برچسب آشنا، هم کل پیوند و هم قسمت های جداگانه آن (عبارات، کلمات، حروف) را با رنگ برجسته کنید. و صفت آن رنگبا این حال، این نه تنها در مورد رنگ صدق می کند، بلکه به طور جداگانه می توانید اندازه، سبک و فونت متن را تنظیم کنید. اما به یاد داشته باشید که دستکاری رنگ باید در داخل تگ انجام شود اینجا و نه بیش از حد، در غیر این صورت رنگ پیوند به صورت پیش فرض یا همانطور که در تگ نوشته شده خواهد بود
فایل index.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
به دنبال عبارتی باشید که به شما کمک کند مکان رنگ ها را در رنگین کمان به خاطر بسپارید.
آر
ولی
دی
در
جی
ولی
فایل primer.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
هر کس
شکارچی
آرزوها
دانستن
جایی که
نشسته است
قرقاول
به صفحه اصلی برگردید
یکی از صفحات شما در سایت لزوماباید نامیده شود index.htmlزمانی که شخصی نام سایت شما را وارد می کند، فایلی با این نام در سایت شما است که برنامه ربات به دنبال آن می گردد. از آنجایی که صفحه index.htmlابتدا باز می شود، آن را به اصلی تبدیل کنید. شما می توانید بقیه صفحات را هر طور که دوست دارید صدا کنید ... دیگر هیچ تفاوتی با نام وجود ندارد.
در مورد پرونده هنگام نوشتن نام مسیر و سند به یاد داشته باشید که به عنوان مثال: Page.html، page.html و PAGE.html نام اسناد مختلف هستند! همین امر در مورد نام نشانک ها و نقاشی ها نیز صدق می کند. همیشه هنگام نوشتن کد به حروف کوچک و بزرگ حساس باشید، احتمال زیادی وجود دارد که چنین نام هایی توسط مرورگر خاصی شناسایی نشوند. نوشتن همه چیز و نامگذاری با حروف ریز لاتین را به عنوان یک قانون در نظر بگیرید، در این صورت ریسک عامل انسانی و هوسبازی برنامه ها به صفر می رسد.
قانون سه کلیک
سعی کنید "درخت پیوند" را به گونه ای تشکیل دهید که بازدیدکننده سایت بتواند با حداقل تعداد کلیک روی لینک ها، از هر یک از صفحات آن به هر مکانی در سایت برود. بیش از سه جابجایی به جای مناسب در سایت دیگر خوب نیست .. بارگذاری بی پایان صفحاتی که شخص به آنها نیاز ندارد می تواند منجر به فروپاشی عصبی و بسته شدن زودهنگام سایت شود. در زمان، پول و اعصاب مردم صرفه جویی کنید.
هایپرلینک ها به منظور پیوند دادن اسناد موجود در شبکه به یکدیگر اختراع شدند و اگر سایت شما از یک صفحه تشکیل نشده است، بلکه از چندین صفحه تشکیل شده است، می توانید آنها را تنها با ایجاد هایپرلینک به یکدیگر پیوند دهید. بیایید مستقیماً به نمونه ای از ظاهر آن نگاه کنیم.
یک هایپرلینک ساده ایجاد کنید
به صفحه دیگری بروید
همه چیز در اینجا ساده است، برای ایجاد یک لینک از تگ استفاده می کنیم جایی که href=”” آدرس صفحه ای است که انتقال به آن انجام می شود، در مورد ما این صفحه در همان فهرست قرار دارد. همچنین می‌توانید آدرسی مانند href="http://site.ru/page.html" را در اینجا وارد کنید یا می‌تواند پیوندی به بایگانی باشد که در پوشه دیگری در سایت شما href="arj/arhiv.zip" یا در هر مدرک دیگری که در واقع مهم نیست. همچنین یک ویژگی اجباری هر هایپرلینک عنوان است، این توضیح پیوند است، این یک عنصر بسیار مهم در بهینه سازی موتورهای جستجو است و در اینجا شما کلمات کلیدی صفحه یا سند مورد نظر خود را می نویسید. متنی که بین تگ قرار می گیرد لنگر نامیده می شود و همچنین بسیار مهم است.
باز کردن لینک در صفحه جدید
ویژگی جالب دیگری وجود دارد که ممکن است برای شما مفید باشد:
به صفحه دیگری بروید
مشخصه target با مقدار _blank پیوند را در یک پنجره جدید باز می کند، این اغلب در صورتی استفاده می شود که نمی خواهید شخص صفحه شما را از دست بدهد و در عین حال اطلاعات مورد نیاز خود را فقط در یک تب یا پنجره جدید دریافت کند.
لینک های تصویری
نتیجه در مرورگر:
در اصل، همه چیز در اینجا ساده است، من تگ تصویر را بین تگ هایپرلینک باز و بسته قرار می دهم ، اما باز هم، من فقط دو تصویر را وارد نکردم، کلاس img را به یکی اختصاص دادم که در آن فریم اطراف تصویر را ریست کردم، زیرا وقتی تبدیل به هایپرلینک می شود ظاهر می شود، اما نه در همه مرورگرها، به عنوان مثال IE شما ببینید، اما نه در گوگل کروم.
خط کشی در لینک ها
به صفحه دیگری بروید
به صفحه دیگری بروید
برای وضوح، دو گزینه برای حل این مشکل دادم، آن را به انتخابگر کلاس اختصاص دادم و با تجویز این کلاس، زیر خط های غیر ضروری را در مکان های خاص حذف خواهید کرد. راه حل دوم این است که زیر خط را از تمام لینک های موجود در برچسب حذف کنید<а>، که البته به ندرت باعث نیاز می شود، اما هنوز دانش اضافی نیست.
پیوندها در یک سند
غیر معمول نیست که یک سند به اندازه کافی طولانی باشد و یک منوی کوچک در ابتدای صفحه با پیوندهایی به بخش های فرعی این صفحه ایجاد شود. به این پیوندها پیوندهای درون سند گفته می شود و همه اینها به سادگی پیاده سازی می شوند. برای شروع، لنگرها در سند قرار می گیرند، اینها علائم هستند، آنها در سند قرار می گیرند که در آن هنگام کلیک کردن روی یک پیوند داخلی لازم است حرکت کنید، به عنوان یک قاعده، اینها عناوین بخش هستند، برچسب به این صورت است:
و آخرین چیزی که باید در مورد هایپرلینک ها بدانیم پیوندهایی به صندوق پست الکترونیکی است، بسیار ساده پیاده سازی می شود، فقط کافی است یک mailto: ورودی به ویژگی href و آدرس صندوق پستی اضافه کنید:
این درس "ایجاد لینک ها در html" را به پایان می رساند، همانطور که ممکن است متوجه شده باشید، ما در اینجا بدون CSS انجام ندادیم، به طور کلی، مواد بسیار ساده است، فکر می کنم همه چیز برای شما ساده و واضح خواهد بود، سوالات بنویسید.
تاریخ انتشار: 2014-04-23
هایپرلینک ها یکی از مهم ترین اجزای اسناد html هستند. به لطف این مؤلفه و همچنین پیوندهای معمولی است که استفاده از اینترنت بسیار آسان است. ما به ساده ترین گزینه ها برای درج هایپرلینک ها نگاه خواهیم کرد که به شما به عنوان برنامه نویسان تازه کار کمک می کند تا در این درس تسلط پیدا کنید.
چگونه یک هایپرلینک در html ایجاد کنیم؟
این کد فقط در سایت شما کار می کند، برای لینک های خارجی کار نمی کند.
< a href=" *** ">***** < /a>
مثال:
< a href="https://сайт/">مجله چگونه همه چیز را انجام دهیم< /a>
در مرورگر به شکل زیر خواهد بود:
< a href="https://сайт/prigotovlenie-edy/368-kak-sdelat-malosolnye-ogurcy.html">چگونه خیار شور درست کنیم؟< /a>
در مرورگر ما می توانیم موارد زیر را مشاهده کنیم:
چگونه یک لینک در html به یک سایت خارجی ایجاد کنیم؟
برای پیوندهای خارجی، کد باید کمی اصلاح شود. برای پیوند به سایت دیگری، از کد استفاده کنید:
< a href="*** ">***** < /a>
< a href="https://vk.com/kaksdelatvse">ما در تماس هستیم "چگونه همه چیز را انجام دهیم"< /a>
یک هایپرلینک می تواند صفحاتی را در همان سایت پیوند دهد یا به هر صفحه ای در اینترنت اشاره کند. هنگام ایجاد پیوند به صفحات دیگران، همیشه باید از آدرس مطلق صفحه (http://www.site.com/page.html) استفاده کنید. اگر پیوندی به صفحه ای در یک سایت ایجاد می شود، ترجیحاً از یک URL نسبی (page.html، catalog/page.html) استفاده شود. هنگام ایجاد یک لینک گرافیکی، به خاطر داشته باشید که گرافیک ممکن است برای برخی از کاربران در دسترس نباشد، بنابراین مطمئن شوید که عناصر متنی مناسب را در آن قرار دهید.
مثال:
هایپرلینک در صفحه html
گاهی اوقات لازم است که یک هایپرلینک در همان صفحه ایجاد کنید. به عنوان مثال، در این صفحه، این هاپرلینک ها در ابتدای درس هستند که به شما امکان می دهند به یک سوال خاص بروید و در انتهای صفحه به شما امکان می دهد به بالای صفحه بروید.
مثال:
هایپرلینک ایمیل
مثال:
|
کد HTML: [ایمیل محافظت شده] |
نمایش در مرورگر: |
باز کردن صفحات html در یک پنجره جدید
با استفاده از ویژگی TARGET، می توانید صفحه را در یک پنجره مرورگر جدید بارگذاری کنید. این ویژگی برای تنظیم نام پنجره استفاده می شود. نام پنجره برای اهداف خدماتی استفاده می شود. برای باز کردن یک صفحه در یک پنجره جدید، از ثابت _blank استفاده کنید.
مثال:
رنگ متن هایپرلینک
ویژگی های LINK، ALINK، VLINK رنگ فونت را برای لینک ها تنظیم می کند.
ویژگی LINK برای برجسته کردن لینک هایی استفاده می شود که هنوز توسط کاربر بازدید نشده است.
سفارش هایپرلینک
برخی از مرورگرها ممکن است از توانایی دنبال کردن پیوندها با استفاده از کلید Tab پشتیبانی کنند. در این حالت، مرورگر پیش‌فرض، لینک‌ها را به ترتیبی که در متن صفحه ظاهر می‌شوند، برجسته می‌کند. می توانید ترتیب انتقال را با استفاده از ویژگی TABINDEX تگ تغییر دهید . برای گنجاندن یک پیوند در لیستی که ترتیب پیمایش جدید را توصیف می کند، ویژگی TABINDEX را روی یک عدد صحیح مثبت در محدوده 1 تا 32767 قرار دهید. برای حذف یک پیوند از لیست، ویژگی را روی هر عدد منفی تنظیم کنید. هنگامی که کاربر کلید TAB را فشار می دهد، مکان نما به لینکی با کمترین مقدار شاخص مثبت حرکت می کند. اگر به چندین لینک یک مقدار شاخص اختصاص داده شود، اولین مورد انتخاب شده همانی خواهد بود که در متن صفحه بالاتر است.
لازم به ذکر است که از ویژگی TABINDEX می توان برای انتخاب اشیاء دیگر مانند گرافیک استفاده کرد.
“Hyperlinks in HTML” پنجمین درس از آموزش HTML است. این درس بر روی استفاده از پیوندهای فرامتن تمرکز خواهد کرد. هر سند وب مبتنی بر پیوندهای فرامتن است، بنابراین هر استاد وب باید بتواند با پیوندها کار کند.
قوانین استفاده از پیوندهای فرامتن
هایپرلینک ها در HTMLبرای اتصال اسناد مختلف، هم در یک سایت و هم در کل اینترنت ضروری هستند. برای ایجاد پیوندهای فرامتن (هایپرلینک) از یک توصیفگر استفاده می شود :
از ویژگی href برای ارسال آدرس سندی که پیوند به آن اشاره می کند استفاده می شود.
طیف گسترده ای از اشیاء می توانند به عنوان لینک عمل کنند، از جمله تصاویر:
– متا تگ ها در HTML.
شما می توانید نه تنها به اسناد مختلف، بلکه به قسمت های مختلف این اسناد مراجعه کنید. برای این کار لازم است در قسمتی از سند به اصطلاح انکر - ساخت فرم را قرار داده و سپس با مشخص کردن کد زیر در ویژگی href به آن مراجعه کنید:
href="http://www.site.#anchor name"
اگر مرورگر نتواند لنگر با نام مشخص شده را در صفحه فراخوانی شده پیدا کند، انتقال به سادگی به ابتدای سند خواهد رفت و هیچ خطایی رخ نخواهد داد.
پیوندهای ابرمتن را می توان روی پروتکل های مختلفی پیاده سازی کرد. رایج ترین موارد مورد استفاده در زیر ذکر شده است:
- http- پروتکل - یک پروتکل استاندارد برای پیوندهای فرامتن، طراحی شده برای انتقال یکباره بلوک های اطلاعات.
- FTP– پروتکل – پروتکل جهانی انتقال فایل. نیاز به مجوز دارد.
- MAILTO- پروتکل استاندارد انتقال نامه
راه اندازی هایپرلینک ها در HTML
ویژگی هدف تگ نحوه باز شدن یک صفحه جدید را تعیین می کند و مقادیر زیر را می گیرد:
- _self - سند در پنجره فعلی باز می شود
- _parent - در قاب - والد قاب فعلی
- _بالا - در پنجره اصلی کل ساختار قاب
- _blank - سند در یک پنجره جدید باز می شود
به عنوان مثال، برای باز کردن صفحه ای با مخاطبین در یک پنجره جدید، باید از کد زیر استفاده کنید:
- پیوند - ظاهر پیوندهای بازدید نشده را مشخص می کند.
- Alink - ظاهر پیوندهای قبلاً بازدید شده را تعیین می کند.
- Vlink - ظاهر پیوندهای انتخاب شده را مشخص می کند.
در درس بعدی، در مورد کار با گرافیک در HTML صحبت خواهیم کرد: نحوه درج تصاویر، سفارشی کردن ظاهر آنها و غیره را یاد خواهیم گرفت.
