در سلسله آموزشهای قبل آنلاینر به استایل دهی بر خط سی اس اس inline CSS پرداختیم.
در این آموزش قصد بررسی تگ های عمومی مثل span , div را داریم.
تگ DIV
تگ div یکی از مهمترین و پر مصرف ترین تگ ها در زبان HTML می باشد. میدانید که برای جای گذاری المان های مختلف در صفحه وب باید مکان هایی را برای آنها تعیین کنید تا هر عامل در جای درست خودش در قرار گیرد. مدت زمانی بود که طراحان وب برای تعیین موقعیت هر عامل از جدول و جداول تو در تو استفاده می کردند که این کار مشکلات زیادی را هم برای کاربران و هم برای طراحان وب بوجود می آورد. در فصل های بعد بصورت کامل درباره جدول ها آموزش خواهید دید.
حال تگ div مشکلات مربوط به جداول و موقعیت های مختلف را برطرف میکند. اگر با نرم افزار فتوشاپ کمی آشنا باشید میدانید که نرم افزار فتوشاپ نیز از روش لایه بندی برای جایگذاری اجزای مختلف خود استفاده میکند. تگ div نیز در طراحی وب همان لایه هاییست که ما میتوانیم اجزای مورد نظرمان را در آن قرار دهیم و با استفاده از صفت های بسیار مفید آن همان عامل ایده آل خود را در صفحه وب طراحی کنیم.
نمونه ای از تگ div را در کد زیر آورده ایم:
[html]
<div>
این یک متن امتحانی است.
</div>
[/html]
ازجمله ویژگی های خوبی که تگ div در اختیار طراحان وب میگذارد امکان لایه بندی بصورت ثابت ، لایه های روی هم و لایه های وابسته به هم میباشد. نکته قابل توجه درباره div اینست که این تگ جزو عامل های غیر هم سطح است، عامل های غیر همسطح دارای عرض و ارتفاع هستند که اگر از آن در بین یک متن پاراگراف صفحه وب استفاده کنید این عامل بصورت خودکار به خط بعد خواهد رفت،درست عکس رفتاری که عامل های همسطح (span) از خود نشان خواهند داد.
تا اینجا تقریبا با تگ div آشنا شدید ولی برای آشنایی بیشتر در فصل های بعد حتما بصورت مفصل به تگ div خواهیم پرداخت.
تگ SPAN
تگ مورد بحث بعدی span می باشد. این تگ نیز در طراحی وب استفاده های بسیار زیادی دارد. در آموزش عناصر و تگ ها در HTML گفتیم که تمام محتویات صفحه وب توسط تگ ها نشانه گذاری میشود. پس هر تگی رو محتویاتش عملی انجام خواهد داد. تگ span مانند یک تگ خام است که برای طراحان وب آماده شده است.
شاید گفتن مثالی از آن خالی از لطف نیست، فرض کنید شما میخواهید در تمام متون صفحه وب خود نام سایت خود را با فونت 14 رنگ بنفش درشت و مقدار 15 پیکسل حاشیه داخلی چپ و راست وبا رنگ پس زمینه قهوه ای نمایش دهید . خب کدام تگرا میشناسید که تمامی این صفات را داشته باشد؟ بله هیچ تگی نیست. اینجاست که یک تگ خام برای ما اهمیت خاصی پیدا میکند تا تمامی صفات مورد نظرمان را به آن نسبت دهیم، سپس در هر جای سایت که مد نظرمان هست از آن استفاده کنیم.
مثال :
[html]
<div>
<p>
این آموزش توسط <span> تیم آنلاینر</span> آماده شده است.
</p>
</div>
[/html]
شاید بپرسید که خب پس صفات مورد نظرمان چه شد؟ صفات مورد نظرمان را بصورت سی اس اس بر خط یا همان inline css باید وارد کنیم.
شاید بد نباشد برای مرور درس قبل نگاهی به درس سی اس اس بر خط داشته باشید.
در بخش بعدی تگ های تو در تو را آموزش خواهیم داد.
با آنلاینر همراه شوید . . .
