گروه انفورماتیک لیمو

طراحی سایت انواع وب سایت های گرافیکی, اتوماسیون آنلاین, نرم افزار های تحت وب و وب سرویس

www.Limoo-IT.ir - www.TMWeb.ir

طراحی سایت لیمو, قوی ترین تیم طراحی سایت در غرب کشور

طراحی سایت در بروجرد, طراحی سایت در خرم آباد, طراحی سایت در لرستان


آموزش طراحی سایت به زبان PHP بخش سوم

تگ div برای تقسیم بندی صفحه به صورتی عمودی یا افقی استفاده می شود. پس اگر ما بخواهیم یک پارتیشن افقی در صفحه ایجاد کنیم و داخل آن یک عنوان و زیر عنوان یک توضیح بنویسیم باید این آموزش را که به معرفی استایل بندی و ایجاد Layout می پردازد را مطاله کنیم. ایجاد صفحه ی دو ستون یا 3 ستون با این روش قابل پیاده سازی است. از کتاب PHP in Ride نوشته بهمن شرفی

تگ <div> برای تقسیم بندی صفحه به صورتی عمودی یا افقی استفاده می شود. پس اگر ما بخواهیم یک پارتیشن افقی در صفحه ایجاد کنیم و داخل آن یک عنوان و زیر عنوان یک توضیح بنویسیم کد زیر را در <body> قرار می دهیم:
<div>
<h1>دومین وب من </h1>
<br />
<div>توضیحات را خواهیم دید . </div>
</div> 
به طور کلی تگ های HTML در بین دو کارکتر < و > قرار میگیرند. بعضی تگ ها دو جزئی هستند مثل <div>و </div> ولی بعضی مثل <br /> تک بخشی. این تگ برای بردن متن بعد از خود به خط پایین استفاده می شود. توجه داشته باشید که در HTML فاصله های نوشتاری مانند WORDعمل نمی کنند و Enter زدن در کد HTML به معنی رفتن به خط بعد نیست. همچنین فاصله و تب. به این موضوع نیز توجه داشته باشید که ما در کد قبل, ترتیب باز و بسته کردن تگ ها را رعایت کردیم ولی کد زیر نمونه ای از باز و بسته کردن اشتباه کدهاست:
<div>
<h1>
</div>
</h1>
اگر در اجرای صفحتان به مشکلی برخوردید بدانید ترتیب را رعایت نکرده اید. نمونه ای از تگ های دوبخشی و تک بعضی را در زیر میبینید(در ضمیمه اول همه کدها لیست شده اند, ما برای آموزش مطالب مهم تر از توضیح دقیق آنها خودداری کرده ایم):

برای قسمت بندی صفحه

 

<div></div> 

 

ایجاد لینک 

 

<a href="http://www.google.com">Google</a> 

 

ایجاد فیلد متنی

 

<textarea>متن در ایتجا قرار میگیرد </textarea> 

 

 

ما با مثال های عملی پیش خواهیم رفت بنابراین در برخی موارد ابتدا کد را نوشته و سپس توضیح می دهیم. 
تا حالا فهمیده ایم:

صفحاتی که با فرمت .html ذخیره می شوند صفحه وب محسوب می گردند. 

هر المان قابل مشاهده در یک وب سایت در تگ <body> قرار دارد. 

بخش هایی که قابل مشاهده نیستند در تگ <head> قرار میگیرند. 

هر تگ دو بخشی باید به ترتیب باز شدن بسته شود. 

با تگ های h1-h6 و a و textarea و div آشنا شدیم. 

 

به مثال زیر دقت کنید:
اگر بخواهیم صفحه ی زیر را درست کنیم چه کدهایی لازم است؟ 

شکل 2 صفحه بندی یا Layout 
همانطور که اشاره کردیم تگ <div> برای قسمت بندی صفحه استفاده می شود. این بدان معنی است که برای ساختن کادرهای مورد نیاز باید از تگ <div> استفاده کنیم.
کدهای زیر را در <body> بنویسید:
<div class="header"></div>
<div class="main">
<div class="left"></div> 
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="footer"></div> 
قصد داریم Layout نشان داده شده را انجام دهیم. اما اگر الآن فایل را Save کنیم و مشاهده کنیم چیزی در صفحه نمیبینیم!

اینجا است که نیاز پیدا می کنیم تا با CSS آشنا شویم. لازم نیست مخفف آن را بدانیم, CSS شبه کدی است برای تغییر استایل و نحوه نمایش عناصر. کد HTML را Save نمایید. 

 

 

در آموزش بعد به بررسی کدهای CSS می پردازیم.

در صورتیکه از ابتدا با این آموزش ها جلو نیامده اید به این صفحه مراجعه کنید!

در آینده به مبحث بوتسترپ نیز خواهیم پرداخت.

 

تاریخ مطلب: 28 آبان 1399