ساخت لینک به نقاط مختلف یک صفحه با html و تگ iframe در html

تگ iframe ساختن لینک به نقاط مختلف یک صفحه با html

تگ iframe و ساخت لینک به نقاط مختلف یک صفحه html

جلسه ی آخر از دوره ی آموزشی html را آغاز می کنیم. البته این جلسه، جلسه ی آخر آموزش است. و در ادامه ی همین آموزش تعدادی پروژه همراه با توضیحات کامل قرار گرفته است. شما می توانید آنها را در این آدرس مشاهده کنید.

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

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

تگ ifram

ما با کمک و با استفاده از این تگ قادریم صفحه ای را از سایت های دیگر در سایت خودمان قرار دهیم.

توجه توجه! در صورتی که شما بدون رضایت صاحب سایت این کار را انجام دهید ایشان می تواند. بر علیه شما به اقامه ی دعوی بپردازد.

اگر متوجه نشدید اصلا نگران نباشید. چون با مثال هایی که در ادامه ی آموزش زده می شود. به خوبی این مبحث را فرا خواهید گرفتن.

این تگ تا قبل از html 5 مقادیری زیادی را قبول می کرد که حال تنها چهار تا از قابلیت ها مورد استفاده قرار می گیرند.

width: شما با مقدار دادن به این مورد می توانید مقدار عرض این تگ را معین کنید.

height:این گزینه نیز برای مشخص کردن ارتفاع، مورد استفاده قرار می گیرد.

srcdoc: اگر قصد داشته باشید که کدی را در درون یک تگ قرار دهید می توانید از این مورد استفاده کنید.

src: آدرس صفحه ای که قصد دارید در صفحه ی وب شما نمایش داده شود.

و تمام.

همانطور که متوجه شدید تگ iframe تگ پیچیده ای نیست می توان به راحتی با آن کار کرد.

کد تگ iframe

خروجی:


و سپس توضیح کامل کد بالا

در کد بالا ما تگ iframe را باز کردیم و سپس آدرس محلی را که قصد نمایش آن را داریم وارد کردیم که ما آدرس سرزمین کد را وارد کردیم.

سپس ما عرض تگ iframe  مشخص کرده ایم.

بعد از آن ما ارتفاع را مشخص کردیم و تمام

ساختن لینک به نقاط مختلف یک صفحه html (انکرلینک)

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

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

قبل از این مورد چیزی که باید به شما بگویم این است که زمانی که شما از (#) استفاده کنید به این معناست که شما قصد دارید در همان صفحه ای که قرار دارید کاری انجام دهید.

پس ما هم از همین قابلیت برای ساخت انکرلینک یا ساختن لینک به نقاط مختلف یک صفحه html استفاده می کنیم.

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

سپس شما باید مقدار href را که به تگ a می دهید. با مقدار id عنصر مورد نظر یکی کنید. با این تفاوت که شما باید به اول مقدار href  نیز یک (#) بفزایید. که این مورد به ما در عمل ساخت لینک به نقاط مختلف یک صفحه با html کمک می کند.

یعنی مقدار href تگ a باید به این گونه باشد.

نام#

مقدار id عنصر مورد نظر شما هم.

نام

شما می توانید هر چیزی را به جای مقدار name بیفزایید.

کد ساختن لینک به نقاط مختلف یک صفحه html.

خروجی کد بالا را مرورگر خود مشاهده کنید.

همانطور که مشهاده کردید در کد بالا زمانی که روی لینکی که در اول صفحه بود کلیک کردید به تگ h1 که مقدار آموزش اچ تی ام ال را گرفته بود منتقل شدید.

توضیح کد بالا

در کد بالا در خط اول گفته شده است که ما از زبان html استفاده می کنیم و از جدید ترین نسخه ی این زبان بهره می بریم.

سپس همانطور که می دانید تگ head را باز کرده ایم که قسمت اول زبان html می باشد.

بعد هم تگ title که عنوان صفحه است و قرار داده ایم.

در ادامه شما همانطور که می بینید ما یک تگ a تعریف کردیم به آن صفت href را افزودیم و مقدار آن را برار با #name قرار دادیم.

بعد هم برای اینکه پدیده ی ساخت لینک به نقاط مختلف یک صفحه با html را مشاهده کنید ما یک تگ p تعریف کردم و سپس ما استفاده از صفت style توانستیم که با دستور font-size اندازه ی فونت این تگ را به 70px برسانیم.

در مرحله ی بعد ما تگ h1 با صفت id را نوشتیم و مقدار id آن را name قرار دادیم.

و تمام

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

لینک دوره

 

نوشتهٔ قبلی
ساخت لیست کشویی با html
نوشتهٔ بعدی
پروژه با تگ های قالب بندی متن در html

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست