نحوه Include کردن کد های HTML در HTML

دوشنبه ۵ مهر ۱۳۹۵

نحوه Include کردن کد های HTML در HTMLReviewed by جواد نبوی on Sep 26Rating: 3.0

سلام دوستان؛ احتمالا همه ی شما باید با امکان Include آشنا باشید. Include یعنی الصاق کردن کد های یک فایل در فایلی دیگر. این کار در php و CSS و جاوااسکریپت به وفور استفاده می شه. اما کمتر در HTML اینکار رو انجام میدهند. البته روش اصولی برای Include کردن کد های HTML وجود نداره. ولی با یک ترفند که امروز خدمت شما معرفی می کنیم اینکار قابل انجامه.

در این روش ما از یک کتابخانه جاوااسکریپت برای Include کردن کد های HTML استفاده می کنیم. با ادامه این آموزش از وب تستر همراه باشید.

Include کردن کد های HTML

ابتدا یک فایل با نام دلخواه و با فرمت .html بسازید و کد هایی که قرار است الصاق کنید را درونش بریزید. مثلا اسمش را بزارید content.html.

برای اینکلود کردن یا الصاق کردن کد های html از این فایل به فایل html اصلی، باید از خصوصیت w3-include-html استفاده کنید. اگر نحوه استفاده از خصوصیت های html را نمیدانید حتما آموزش قدم به قدم html را ببینید.

مثلا در این مورد به شکل زیر است:

<div w3-include-html="content.html"></div>

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

حالا کد زیر را قبل از بسته شدن تگ </head> در فایل html اصلی وارد کنید:

<script src="http://www.w3schools.com/lib/w3data.js"></script>

کد زیر را هم قبل از بسته شدن تگ </body> در فایل اصلی اچ تی ام ال بگذارید:

<script>
w3IncludeHTML();
</script>

حالا من یک مثال کلی می زنم تا بهتر متوجه شوید. مثلا فرض کنید من یک چنین کدی را در فایل html اصلی ام ایجاد کرده ام:

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div>

<script>
w3IncludeHTML();
</script>

</body>
</html>

و درون فایل content.html من هم چنین کدی قرار گرفته:

<img src="http://webtoaster.ir/webtoaster.jpg" />

طبیعتا نتیجه نهایی که برای مرورگر کاربر فرستاده می شود چنین چیزی است:

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<img src="http://webtoaster.ir/webtoaster.jpg" />

<script>
w3IncludeHTML();
</script>

</body>
</html>

توجه: شما آزادید که هر تعداد که خواستید فایل html اینکلود کنید.

خوش باشید 😉

تبلیغات

نویسنده (مدیر سایت)

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

پاسخ دهید

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