طراحی سایت

معرفی تگ های عمومی div , span

مشاوره رایگان

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

شبکه های اجتماعی ما
دوره سئو مقدماتی

یک دوره مقدماتی و رایگان سئو که بسیار پربار و سرشار از تجربه مدرس و با کیفیت بالا تهیه شده تا بتوانید در زمان کمتری وب سایت را سئو کنید.

2723 نفر
3 دقیقه
گروه آموزش طراحی سایت
بروزرسانی در: اردیبهشت 18, 1392

فهرست مطالب

در سلسله آموزشهای قبل آنلاینر به استایل دهی بر خط سی اس اس 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 باید وارد کنیم.

شاید بد نباشد برای مرور درس قبل نگاهی به درس سی اس اس بر خط داشته باشید.

در بخش بعدی تگ های تو در تو را آموزش خواهیم داد.
با آنلاینر همراه شوید . . .

به این صفحه رتبه دهید
بدون دیدگاه
انتشار: اردیبهشت 18, 1392
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
گروه آموزش طراحی سایت

دیدگاه ها بسته شده اند.

آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

برای راحتی شما عزیزان می‌توانید اطلاعات خود را در کادر زیر وارد کنید تا کارشناسان ما با شما تماس بگیرند

مشاوره رایگان
پیمایش به بالا