تگ div برای ساخت اسکلت سایت، در HTML
من قبل از اینکه طراحی سایت را یاد بگیرم چندین بار آموزش های مختلف html را در مراجع مختلف خوانده بودم اما آنقدر آن مراجع در مورد تگ ها و مشخصه های تگ ها توضیح می دادند که در نیمه راه خسته می شدم و آن را رها می کردم . تا اینکه در مرجعی که برای آموزش طراحی قالب سایت بود با تگ div آشنا شدم و یاد گرفتم که ابتدا با تگ های div ، اسکلت و ساختار اصلی سایت خود را بسازم و سپس هرگاه از بخشی از ظاهر این ساختار خوشم نیامد به سراغ یادگیری تگ های جدید بروم و با آنها سایت خود را بهتر و زیباتر کنم .
بنابراین در این مرحله شما را با تگ div آشنا می کنم ، شاید این آشنایی زود باشد اما حکمت دارد !!!
امروزه در اکثر سایت ها یک شکل برای بالای سایت (header) و یک ستون اصلی در وسط برای محتوای هر صفحه (content) ، دو ستون برای دو طرف ستون اصلی که شامل لینک ها ، اخبار کوتاه ، تبلیغات ، پیام ها و ... می باشند (sidebar1 و sidebar2) و در پایین صفحه نیز بخشی برای تبلیغات ، معرفی شرکت صاحب سایت ، حقوق سایت و ... (footer) ، به کار می رود . اما قبلا مشاهده کردید که مرورگر دستورات html را خوانده و بخش هایی را که باید نمایش دهد به صورت ستونی و پشت سرهم نمایش می دهد ، بنابراین ما به تگی نیاز داریم که با آن بخش های مختلف صفحه را از یکدیگر جدا کنیم و سپس بتوانیم بر روی هر بخش تغییرات مورد نظر خود را اعمال کنیم ، به گونه ای که این تغییرات چیدمان سایر بخش ها را به هم نریزد . تگ مورد استفاده برای این منظور ، تگ div می باشد .
نمایش اطلاعات دو div به صورت پشت سرهم :
در واقع این حالت ، حالت متداول است و چنانچه هیچ مشخصه ای برای نحوه قرارگیری تگ های div در کنار هم مشخص نکنید ، آنگاه خود به خود اطلاعات درون تگ های div پشت سرهم نمایش داده می شود .
نتیجه :
مشاهده می کنید که نتیجه با حالتی که از دو پاراگراف پشت سر هم استفاده کنیم یکسان است .
نمایش اطلاعات دو div به صورت دو ستون در کنار هم :
با مثال بعدی نشان خواهیم داد که چگونه می توانیم اطلاعات درون دو div را به صورت دو ستون در کنار هم قرار دهیم :
نتیجه :
این بار اطلاعات درون دو تگ div در دو ستون کنار هم نمایش داده شده اند و دلیل آن استفاده از مشخصه style="float:left" می باشد . این مشخصه ، تگ های div را به صورت شناور در می آورد و با تعیین جهت left برای float ، باعث شده ایم که تگ div دوم در سمت راست تگ div اول قرار بگیرد . دقت شود که در تگ div اول از مشخصه padding-right:100px استفاده کرده ایم که باعث می شود به اندازه 100 پیکسل از محتویات تگ div دوم که در سمت راست آن قرار خواهد گرفت ، فاصله بگیرد .
مشخصه style مربوط به CSS می باشد . CSS شیوه ای است که با استفاده از آن می توانید حجم کدنویسی خود را به نحو چشمگیری کاهش دهید . در واقع از شیوه CSS به روش های مختلفی می توان استفاده نمود که روش فوق ساده ترین حالت آن ، اما نه بهترین انتخاب ، می باشد . در مباحث بعدی شکل دیگری از استفاده از شیوه CSS را برای شما شرح خواهم داد .
- فهرست مباحث
- 1 شروع یادگیری HTML
- 2 HTML چیست ؟
- 3 تگ ها، در HTML
- 4 شروع یک خط جدید، با تگ br ، در HTML
- 5 ایجاد عنوان، با تگ های h1 و h2 و h3 و h4 و h5 و h6 ، در HTML
- 6 ایجاد یک پاراگراف، با تگ p ، در HTML
- 7 تقسیم فایل html به دو بخش head و body ، در HTML
- 8 مشخصه برای تگ ها، در HTML
- 9 نرم افزار Dreamweaver برای راحت تر نوشتن کدها
- 10 تگ div برای ساخت اسکلت سایت، در HTML
- 11 استفاده از id برای دادن نام اختصاصی به هر تگ div ، در HTML
- 12 ساخت اسکلت یک سایت کامل، در HTML
- 13 قرار دادن سایت بر روی اینترنت
- 14 تغییر رنگ پس زمینه سایت، در HTML
- 15 تعیین رنگ، در HTML
- 16 ساخت لینک، در HTML
- 17 تعیین مشخصات فونت ها، با تگ font و مشخصه های face و size و color ، در HTML
- 18 نوشتن توضیحات (Comment)، در HTML
- 19 ترسیم خط افقی، با تگ hr ، در HTML
- 20 تگ های شیوه نمایش متن (تگ های b و ins و i و sub و sup)، در HTML
- 21 نمایش عکس ها، در HTML
- 22 ساخت جدول، در HTML
- 23 ساخت لیست (فهرست)، در HTML
- 24 فرم ها (Form)، در HTML
-
نکته : این فهرست مباحث، صرفا منتخبی از کلیدهای آموزشی این موضوع است (که خواندن متوالی آنها توصیه می شود) و برای دیدن کلیدهای آموزشی بیشتر از این موضوع، می توانید بر روی دسته بندی های ستون سمت راست کلیک نمایید.
حمید سلام . خدا پدر و مادر و بیامرزه مشکل من هم دقیقا مشکل تو بود.کار من رو راحت کردی. فقط یه سوال آیا نرم افزاری میشناسی که عناصر وب رو به صورت ویژیوال کنار هم بذارم و اون نرم افزار بهم خروجی html و css رو بده؟