در ادامه آموزش html-css و تقسیم بندی تگ های ساختار html5 به دلیل اینکه حجم کدهای که رفته رفته در تگ های مختلف ساختاری html5 استفاده می شود زیاد شده و ویرایش آن ها را بسیار مشکل خواهد ساخت به جدا سازی تگ های ساختار html5 در فایل های جداگانه می پردازیم.
در مقاله قصد داریم تگ های ساختار یا بدنه html5 که شامل head ,body,header,section,aside وfooter می باشند را هرکدام در یک فایل جداگانه ذخیره کرده و با گریزی کوتاه که php می زنیم آنها را در فایل index فراخوانی کنیم که این بارزبان فایل index را php انتخاب می کنیم و آن را با پسوند php ذخیره می کنیم.
تگ های ساختار html 5
جهت دسته بندی فایل هایی که قرار است ایجاد کنیم ابتدا یک پوشه در روت هاست یا لوکال هاست که یک مفهوم خاص را برای ما داشته باشد را ایجاد می کنیم که بنده این پوشه را str نام گذاری می کنم
جداسازی تگ Head در ساختار html5
جهت جدا سازی تگ های ساختاری html5 برای هرتگ یک فایل جداگانه باهمان نام(البته اختیاری است) ایجاد می کنیم.
که در این مرحله یک فایل با نام head ایجاد کرده و آن را در پوشه str ذخیره می کنیم.سپس قسمت ابتدای فایل index تا تگ باز body را در آن کات کرده و ذخیره می کنیم.
جداسازی تگ header در ساختار html5
برای جدا سازی تگ header یک فایل جدید ایجاد می کنیم و در تگ header را کپی کرده و ذخیره می کنیم
جداسازی تگ aside راست در ساختار html5
یک فایل جدید با نام asideRig ایجاد کنید و در قسمت aside ساختار را کپی کنید و در پوشه str ذخیره کنید
جداسازی تگ section در ساختار html5
برای این کار ابتدا یک فایل با نام section در پوشه str ایجاد می کنیم و پس از آن قسمت section در ساختار فایل index که قبلا ایجاد کردیم را کپی می کنیم و ذخیره مجدد می کنیم.
جداسازی تگ aside چپ در ساختار html5
یک فایل جدید با نام asideLef ایجاد کنید و در قسمت aside ساختار را کپی کنید و در پوشه str ذخیره کنید
چون تگ aside راست section و aside چپ در یک کانتینر یا یک بلوک قرار دارند می توان آنها را در یک فایل دیگر به نام main فراخوانی کرد.
ایجاد فایل main جهت فراخوانی aside راست section و aside چپ
یک فایل جدید در پوشه str ایجاد کنید و آن را با نام main ذخیره کنید در فایل main کدهای زیر را کپی کنید.
البته که به دلیل وجود کدهای php فایل باید با پسوند php ذخیره شود
جدا سازی تگ footer در ساختار html5
r یا پانوشت را به مانند تگ های قبلی در یک فایل با هیمن نام ذخیره کرده و در پوشه str ذخیره کنید.که البته شما می توانید یک فایل جداگانه برای در نظر بگیرید و تمام قسمت ها را در آن فراخوانی کنید.
ایجاد فایل index.php
خب اینک زمان تغییر فایل index است که باید ابتدا زبان آن را به php تغییر دهید و سپس آن را با پسوند )php که البته به صورت خودکار وقتی زبان را تغییر دهید پسوند نیز تغییر خواهد کرد)ذخیره کنید و کدهای زیر را به آن اضافه نموده و مجدد ذخیره نمایید.
نتیجه:
جهت دسترسی سریع و ویرایش راحت تر کده ها و حتی مفهومی سازی کده های یک وب سایت که با گسترش سایت کدهای آن نیز زیاد و زیاد تر می شوند جداسازی تگ های html 5 یک امر اجتناب ناپذیر است.
[…] جهت ایجاد تگ header در html فایل header که قبلا ایجاد کرده ایم را باز کرده و تکه کد زیر را در آن ذخیره می کنیم […]