** کینگ کد : بزرگترین مرجع دانلود سورس کد های برنامه نویسی اندروید، ویندوز و جدید ترین اسکریپت های روز دنیا **
-----------------------------------------------
** سورس فروشگاه اینترنتی مارکیت فارسی برای اندروید - سورس فروشگاه اینترنتی موکتز فارسی برای اندروید **
-----------------------------------------------
** اسکریپت چیست؟ و چگونه از آن استفاده کنیم؟ (آموزش کامل نصب اسکریپت) **
-----------------------------------------------
** (160 جلسه) آموزش کامل و 0 تا 100 برنامه نویسی PHP **
-----------------------------------------------
** دانلود فیلم آموزشی فتوشاپ فارسی **
-----------------------------------------------
» بروزترین سایت ایرانی محصولات کدکنیون ( سایت /https://codemilo.ir )
» Cicool – Page, Form, Rest API and CRUD Generator
» KingArchitect | Property Portfolio & Real Estate React Template – No JQuery
» Sheltos – Real Estate React Next Js with Redux Toolkit , React Hooks & API Routes Template
» Acres – Real Estate React Template
» Mingrand – Real Estate React Template
» ChawkBazar – Elementor Lifestyle and Fashion Ecommerce Theme
» Streamit 3.0 | Video Streaming WordPress Theme + RTL
» MagicAI – OpenAI Content, Text, Image, Chat, Code Generator as SaaS
» PHP Form Generator – Codeigniter 4 Form Master, Form Header Detail, User Management, Multi-language
» بروزترین سایت ایرانی محصولات کدکنیون ( سایت /https://codemilo.ir )
» Cicool – Page, Form, Rest API and CRUD Generator
» KingArchitect | Property Portfolio & Real Estate React Template – No JQuery
» Sheltos – Real Estate React Next Js with Redux Toolkit , React Hooks & API Routes Template
» Acres – Real Estate React Template
» Mingrand – Real Estate React Template
» ChawkBazar – Elementor Lifestyle and Fashion Ecommerce Theme
» Streamit 3.0 | Video Streaming WordPress Theme + RTL
» MagicAI – OpenAI Content, Text, Image, Chat, Code Generator as SaaS
» PHP Form Generator – Codeigniter 4 Form Master, Form Header Detail, User Management, Multi-language
من قبل از اینکه طراحی سایت را یاد بگیرم چندین بار آموزش های مختلف html را در مراجع مختلف خوانده بودم اما آنقدر آن مراجع در مورد تگ ها و مشخصه های تگ ها توضیح می دادند که در نیمه راه خسته می شدم و آن را رها می کردم . تا اینکه در مرجعی که برای آموزش طراحی قالب سایت بود با تگ div آشنا شدم و یاد گرفتم که ابتدا با تگ های div ، اسکلت و ساختار اصلی سایت خود را بسازم و سپس هرگاه از بخشی از ظاهر این ساختار خوشم نیامد به سراغ یادگیری تگ های جدید بروم و با آنها سایت خود را بهتر و زیباتر کنم .
بنابراین در این مرحله شما را با تگ div آشنا می کنم ، شاید این آشنایی زود باشد اما حکمت دارد !!!
امروزه در اکثر سایت ها یک شکل برای بالای سایت (header) و یک ستون اصلی در وسط برای محتوای هر صفحه (content) ، دو ستون برای دو طرف ستون اصلی که شامل لینک ها ، اخبار کوتاه ، تبلیغات ، پیام ها و … می باشند (sidebar1 و sidebar2) و در پایین صفحه نیز بخشی برای تبلیغات ، معرفی شرکت صاحب سایت ، حقوق سایت و … (footer) ، به کار می رود . اما قبلا مشاهده کردید که مرورگر دستورات html را خوانده و بخش هایی را که باید نمایش دهد به صورت ستونی و پشت سرهم نمایش می دهد ، بنابراین ما به تگی نیاز داریم که با آن بخش های مختلف صفحه را از یکدیگر جدا کنیم و سپس بتوانیم بر روی هر بخش تغییرات مورد نظر خود را اعمال کنیم ، به گونه ای که این تغییرات چیدمان سایر بخش ها را به هم نریزد . تگ مورد استفاده برای این منظور ، تگ div می باشد .
در واقع این حالت ، حالت متداول است و چنانچه هیچ مشخصه ای برای نحوه قرارگیری تگ های div در کنار هم مشخص نکنید ، آنگاه خود به خود اطلاعات درون تگ های div پشت سرهم نمایش داده می شود .
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <body> <div> <p>paragraph number 1</p> </div> <div> <p>paragraph number 2</p> </div> </body> </html> |
paragraph number 1
paragraph number 2
مشاهده می کنید که نتیجه با حالتی که از دو پاراگراف پشت سر هم استفاده کنیم یکسان است .
با مثال بعدی نشان خواهیم داد که چگونه می توانیم اطلاعات درون دو div را به صورت دو ستون در کنار هم قرار دهیم :
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <body> <div style="float:left ; padding-right:100px"> <p>paragraph number 1</p> </div> <div style="float:left"> <p>paragraph number 2</p> </div> </body> </html> |
paragraph number 1
paragraph number 2
این بار اطلاعات درون دو تگ div در دو ستون کنار هم نمایش داده شده اند و دلیل آن استفاده از مشخصهstyle=”float:left” می باشد . این مشخصه ، تگ های div را به صورت شناور در می آورد و با تعیین جهت left برای float ، باعث شده ایم که تگ div دوم در سمت راست تگ div اول قرار بگیرد . دقت شود که در تگ div اول از مشخصه padding-right:100px استفاده کرده ایم که باعث می شود به اندازه 100 پیکسل از محتویات تگ div دوم که در سمت راست آن قرار خواهد گرفت ، فاصله بگیرد .
نکته : مشخصه style مربوط به CSS می باشد . CSS شیوه ای است که با استفاده از آن می توانید حجم کدنویسی خود را به نحو چشمگیری کاهش دهید . در واقع از شیوه CSS به روش های مختلفی می توان استفاده نمود که روش فوق ساده ترین حالت آن ، اما نه بهترین انتخاب ، می باشد . در مباحث بعدی شکل دیگری از استفاده از شیوه CSS را برای شما شرح خواهم داد .