چهارشنبه ۱۲ بهمن ۱۴۰۱

Wednesday, February 1, 2023 GMT +3:30

لایه بندی در HTML با تگ div و span

html-div-span

در ادامه آموزش های مقدماتی آشنایی با زبان پایه برنامه نویسی وب یعنی html، این بار می خواهیم به دو تگ کلیدی، مخصوصا در زمینه لایه بندی (فرمت بندی) صفحات وب بپردازیم، این دو تگ div و span نام دارند و کمتر صفحه وبی وجود دارد که در سورس کدهای خود از آنها استفاده نکرده باشد، به طور خلاصه از div برای ایجاد بلاک های غیر هم سطح نگهدارنده (container) سایر عناصر صفحه و از span برای ایجاد بلاک های هم سطح (inline) و معمولا برای نگهداری محتوای متنی استفاده می شود که در ادامه آموزش، به طور جزئی تری با آنها آشنا خواهیم شد.

کاربرد تگ div در html


همان طور که گفتیم، تگ div در زبان html برای ایجاد بلاک ها یا لایه های نگهدارنده جهت فرمت بندی قسمت های مختلف صفحه مورد استفاده قرار می گیرد، در واقع اکثر صفحاتی که در وب مشاهده می کنیم، از بلاک هایی تو در تو تشکیل شده اند که به کمک ویژگی های css به شکل منطقی و نظم یافته ای به نظر می رسند، پیش از این طراحان وب برای رسیدن به مقاصد خود در زمینه فرمت بندی صفحات از تگ table استفاده می کردند که امروزه به دلایلی توصیه شده تنها از جداول جهت مقاصد آماری یا اطلاعاتی که نیاز به جدول بندی دارند استفاده شود نه برای فرمت بندی.
تگ div در حالت پیش فرض توسط مرورگر ها به صورت غیر هم سطح پردازش می شود، یعنی در ابتدا و انتهای آن خطی جدا کننده (به صورت فرضی) در نظر گرفته می شود، در مثال زیر با نحوه تعریف و کاربرد این تگ آشنا می شویم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | کاربرد تگ div در html</title>
<!-- https://webgoo.ir -->
</head>
<body>
<div dir="rtl">این یک بلاک div است.</div>
</body>
</html>
توضیح:
- برای تعریف بلاک های div کافی است آنها را به صورت تگ های جفتی در html ایجاد کنید:
<div></div>
- ملاحظه می کنید که برای نمایش صحیح حروف فارسی از dir با مقادیر rtl استفاده کرده ایم، البته در کدنویسی پیشرفته، توصیه می شود در حد امکان از استایل های خطی html اجتناب شده و اینگونه تنظیمات با css انجام شود که در آموزش های مربوطه در این مورد گفته ایم.

یک مثال کاربردی با div


استفاده از تگ div در html به موارد ساده ختم نمی شود، در کدنویسی پیشرفته معمولا نیاز به تعریف بلاک های div تو در تو وجود دارد که به دلیل یکپارچه و وابسته بودن زبان های html و css در وب، برای ایجاد تنظیمات ظاهری، علاوه بر تگ div از استایل css نیز در کنار آن استفاده می شود.
در مثال کاربردی زیر، نحوه ایجاد چند بلاک div فرمت بندی شده را ملاحظه می کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | کاربرد تگ div در html</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
</style>
</head>
<body>
<!-- بلاک اصلی -->
<div style="display:block; width:600px; height:auto; border:1px solid #999; background-color:#9CF; margin:0 auto; direction:rtl; padding:4px;">
بلاک div شماره 1
<!-- بلاک زیر مجموعه -->
<div style="display:inline-block; width:200px; height:200px; border:1px solid #999; background-color:#6C9; float:left; margin:4px;">
بلاک div شماره 2
</div>
<!-- بلاک زیر مجموعه -->
<div style="display:inline-block; width:200px; height:200px; border:1px solid #999; background-color:#FC0; float:left; margin:4px;">
بلاک div شماره 3
</div>
<!-- بلاک جدا کننده -->
<div style="clear:both;"></div>
<!-- بلاک زیر مجموعه -->
<div style="display:block; width:590px; height:50px; border:1px solid #999; background-color:#CCC; margin:4px;">
بلاک div شماره 4
</div>
<!-- بلاک جدا کننده -->
<div style="clear:both;"></div>
<!-- بستن بلاک اصلی -->
</div>
<hr />
با استفاده از تنظیم بلاک های div به صورت تو در تو و بهره بردن از css، طراحان وب قالب ها و طرح های خود را فرمت بندی می کنند.
</body>
</html>
پیش نمایش
توضیح:
- در کد بالا در کنار استفاده از تگ div از استایل css نیز استفاده کرده ایم، چرا که تگ های div معمولا به تنهایی قابلیت های خاصی ندارند و در کنار ویژگی های css است که قدرت و انعطاف پذیری آنها مشخص می شود.
- همان طور که در آموزش های مقدماتی css گفته ایم، استایل ها به چند صورت قابل تعریف هستند (به صورت خطی، درون صفحه ای و ایمپورت فایل خارجی در صفحه)، در اینجا برای تگ body از استایل css درون صفحه ای و برای بلاک های div از استایل های خطی استفاده کرده ایم.
- برای آشنایی با ویژگی های css، لطفا مباحث مربوط به آموزش های آن را ملاحظه کنید.

کاربرد تگ span در html


تگ span در صفحات وب کاربردهای خاصی دارد، به طور مثال از آنجایی که این تگ توسط مرورگرها به طور پیش فرض به صورت بلاک های هم سطح یا inline تفسیر می شود (یعنی اگر از تگ span در کنار سایر عناصر استفاده کنیم، در یک سطح با آنها قرار می گیرد و به طور مثال به پائین سایر بلاک ها منتقل نمی شود)، برای نمایش دکمه های صفحه به صفحه، برجسته کردن (highlight) بخشی از یک متن به فرض در هنگام جستجو و... کاربرد دارد.
ویژگی های تگ span با استفاده از خاصیت های css کامل می شود که در زیر نمونه ای از آن را ملاحظه می کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | کاربرد تگ span در html</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.paged{
    display:inline-block;
    padding:4px;
    border:1px solid #09C;
    margin:2px;
    text-align:center;
}
.light{
    color:#69F;
    text-decoration:blink;
}
</style>
</head>
<body>
<span class="paged">صفحه 1</span>
<span class="paged">صفحه 2</span>
<span class="paged">صفحه 3</span>
<span class="paged">صفحه 4</span>
<span class="paged">صفحه 5</span>
<span class="paged">صفحه 6</span>
<hr />
تگ <span class="light">span</span> به طور پیش فرض به صورت هم سطح یا inline پردازش می شود و به این دلیل در برخی موارد بهترین گزینه برای طراحان وب است.
</body>
</html>
پیش نمایش
توضیح:
- مانند تگ div، تگ span نیز قابلیت های css را به خوبی می پذیرد و می توان به کمک آن به اهداف خود در طراحی وب دست یافت.
- در کد بالا از کلاس های css برای ایجاد قابلیت های ظاهری تگ span استفاده کرده ایم، دلیل این کار این است که تگ های html به خودی خود معمولا توانایی ایجاد جلوه ها و تنظیمات پیشرفته را ندارند و باید در کنار آنها از css استفاده شود.
- در مثال بالا دو کاربرد رایج از تگ span را ملاحظه می کنید، دکمه های هم سطح و همچنین برجسته کردن بخشی از یک متن با رنگ و ویژگی خاص.
دسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
کاربرد تگ font و ویژگی های فونت در HTML
تگ های اصلی و کلیدی HTML
ایجاد جدول با تگ table در HTML
نحوه ایجاد لینک در HTML
کار با تگ فرم (form) در HTML
دیدگاه
more ۳۷ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
محسن
۱۵:۲۱ ۱۳۹۴/۰۸/۱۵
سلام
می خواستم بدونم ما در چه صورت می تونیم یک بلاک رو در جایی که مد نظرمونه قرار بدیم مثلا من وقتی از خاصیت left استفاده می کنم بلاک داخلی زیادی چپ میره وقتی هم که از right استفاده می کنم زیادی راست میره من میخوام موقعیت بلاک رو دقیقا اونیکه مد نظرم هست قرار بدم تا بتونم سایر بلاکهای دیگه رو راحت تر جایگزاری کنم
سلام
باید سعی کنید CSS و طراحی وب را فرا بگیرید، تنها در این صورت است که می توانید به نحو دلخواه یک صفحه وب را به اصطلاح فرمت بندی کنید!
salamander
۱۰:۳۵ ۱۳۹۵/۰۱/۳۰
سلام ممنون از آموزش خوبتون
پارسا
۱۷:۳۶ ۱۳۹۸/۰۴/۱۶
ممنون از زحماتتون 1 سوال چجوری میشه صفحه ی وبو به دو قسمت با رنگ های متفاوت تقسیم کرد؟
تقسیم صفحه وب به دو قسمت با رنگ های متفاوت با خاصیت های CSS امکانپذیر است، به طور مثال:
<style>
body {
padding: 0;
margin: 0;
}
#side-right {
display: inline-block;
right: 0;
position: fixed;
height: 100%;
width: 50%;
background: #00A3FF;
padding: 0;
margin: 0;
overflow: hidden;
}
#side-left {
display: inline-block;
left: 0;
position: fixed;
height: 100%;
width: 50%;
background: #003370;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
<div id="side-right"></div>
<div id="side-left"></div>
این نمونه کد پایه است و بسته به سایر المان های موجود در صفحه و نیاز برنامه نویسی می تواند سفارشی سازی شود.
ilia Delbar
۱۳:۱۵ ۱۳۹۹/۰۲/۲۶
خیلییییییییییی خوبه!
فقط دلم می خواد یه برنامه درست کنم رنگ ها رو نشون بده (رنگ تگ ها)
اگر برای برنامه مد نظر بیشتر توضیح دهید شاید بتوانیم راهنمایی کنیم، رنگ تگ منظورتان همان رنگ متن داخل تگ است؟ در صورت تمایل یک نمونه صفحه درج کنید.
امین ایرانی
۱۸:۲۸ ۱۳۹۹/۰۳/۱۱
سلام ممکنه بفرمایید چجوری از تگ span واسه ی عکس استفاده کنیم؟
اگر منظور کنار هم قرار دادن تصاویر است می توانید هر تصویر را در تگ span با خاصیت display: inline-block قرار دهید، به فرض:
<style>
.inline {
display: inline-block;
}
</style>
<span class="inline">
<img src="images/pic_1.png"></img>
</span>
<span class="inline">
<img src="images/pic_2.png"></img>
</span>
مرتضی
۱۲:۲۴ ۱۴۰۱/۰۱/۰۳
سلام. از اموزشهاي کم نظیری كه در اين سايت قرار دادید خیلی متشکرم. واقعاً مثالهاي كاربردی کنار آموزشهاتون خیلی مفیده ، سايت خیلی خوبیه، باز هم تشکر.
پــــرتو
۱۷:۰۵ ۱۴۰۱/۰۹/۱۵
سلام خسته نباشید ببخشید اگر بخایم همین منو رو بصورت عمودی بخایم انجامش بدیم باید از چه کدی استفاده کنیم و اگر بخایم برای قالبمون از این کد استفاده کنیم (همون قالبی که بهتون دادم منظورمه) کجای کد بزارم ممنون میشم بگین لطفا امکان داره با همین کد مشکلم حل بشه مرسی
مطلب در خصوص لایه بندی در HTML است، منظورتان کدام منو است؟ در کل مشکلات قالب صرفا با درج منو رفع نمی شود باید HTML و CSS بلد باشید و بخش های لازم را ویرایش کنید، اینکه منو کجا درج شود با آزمایش و خطا می توانید تست کنید.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
4 × 1
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
علی رستگار
سلام خسته نباشید با تشکر از سایت خوبتون. من میخوام منوی سایت رو به صورت کامل از دید گوگل مخفی کنم، در حال حاضر...
۱۴۰۱/۱۱/۱۱

m.b
با سلام و خسته نباشید من یک سوال دارم . تو فرم لاگین بعد از لاگین کردن کاربر میخوام تاریخ و ساعت آخرین زمان...
۱۴۰۱/۱۱/۰۶

سینا
با سلام و درود من چهار تا داده به شیوه زیر دارم میخوام با php کوچکترین تاریخ هر دو کاربر ۲ و ۳...
۱۴۰۱/۱۱/۰۶

امیرحسین رستمی
سلام وقت بخیر یه همچین ارایه ای داریم میخوام همه حالت های حروفو بدست بیارم مثل بازی کلماتیک که هر حرف دوبار تکرار نشه...
۱۴۰۱/۱۱/۰۵

Ⲥⲅⲇⲍⲩ ⲃⲟⲩ
اینم لینک مستقیمش حتی لطفا خودتون با این لینک یا هر لینک آهنگ درست کنید بزارین ببینم
۱۴۰۱/۱۱/۰۵

Ⲥⲅⲇⲍⲩ ⲃⲟⲩ
هر چی میزارم رو پخش خودکار ولی تا وقتی روش کلیک نکنی پخش نمیشه چرا؟؟ رو اتو پلیِ ! هزارتا راهو روش رو رفتم جواب...
۱۴۰۱/۱۱/۰۵

نور
سلام این کد ابتدای وبلاگه منه چطور میتونم به آدرس لینکی که توش میشه تغییرات کد رنگ ها رو انجام داد دسترسی پیدا...
۱۴۰۱/۱۱/۰۴

پــــرتو
سلام خسته نباشید شرمنده دوباره مزاحم میشم نه انگار متوجه سوالم نشدین ، عه جناب منظورم این هستش که یه کدی دارم و میخاستم ویرایشش...
۱۴۰۱/۱۱/۰۳

پــــرتو
سلام جناب خسته نباشید شاید این سوالم تکراری باشه ولی خب راستش نمیدونم سوالمو کجا ثبت کردم واسه همین دوباره می پرسم ببخشید...
۱۴۰۱/۱۱/۰۳

پژمان
با سلام من یک سوال دارم می خواستم ببینم چطور میشه وقتی صفحات سایت عوض می شن هدر و فوتر ثابت بمونه و فقط محتویات...
۱۴۰۱/۱۱/۰۱

سینا
با سلام و با تشکر از شما از لطف و محبت شما بسیار ممنون و سپاسگزارم ببخشید این چند خیلی پیام دادم و مزاحم...
۱۴۰۱/۱۰/۲۹

سینا
با سلام و درود من یه کد نوشتم که برای id های پشت سر هم جواب میده و زمان رو برام تغییر میده وقتی...
۱۴۰۱/۱۰/۲۹

سینا
باسلام مجدد و درود برشما واسه مطالب جدید راحته آخرین مطلب رو با کوئری زدن توی دیتابیس پیدا کنم و برای مطلب بعدش آپدیت...
۱۴۰۱/۱۰/۲۸

سینا
با تشکر از شما استاد بزرگوارم اینو شب تست می کنم من واسه آپدیت کردن تایم لازم دارم توضیح کامل به اینصورت: واسه...
۱۴۰۱/۱۰/۲۷

سینا
با سلام و درود بر شما راهی هست توی mysql من داده های یک جدول رو که عددی هستند به صورت زیر آپدیت کنم!...
۱۴۰۱/۱۰/۲۶

علی داوری
سلام. چطور از فایل های داخلی کامپیوتر برای آیکون سایت استفاده کنیم؟ مسیر عکسو تو href کپی میکنم اتفاقی نمیفته
۱۴۰۱/۱۰/۲۴

سینا
شرمنده تورو خدا ببخشید الان یه سوال دیگه و یه مشکل دیگه هم دارم ممنون میشم راهنمایی کنید یه قسمت از سایتم مطالب رو...
۱۴۰۱/۱۰/۲۲

سینا
با تشکر از شما بخاطر پاسخ قبلی بسیار از لطف شما سپاسگزارم شرمنده یه سوال دیگه هم داشتم راهی وجود داره موقع export کردن...
۱۴۰۱/۱۰/۲۲

سینا
با سلام و خسته نباشید من یه صفحه دارم مثلا اول یه متنی رو echo می کنم رو وارد کنه با...
۱۴۰۱/۱۰/۲۱

ali
میخواستم حالت تصویر بدم بدون استفاده از list_style_image روشی هست بشه طراحی کرد
۱۴۰۱/۱۰/۲۰

محمد جواد
با سلام ... من میخوام اطلاعات محصولی که داخل دیتابیس mysql هست رو بجای ستونی ، ردیفی نمایش بدم برای نمایشش چطوری باید کد...
۱۴۰۱/۰۹/۲۷

کاربر
سلام هر کاری کردم جواب نداد
۱۴۰۱/۰۹/۲۳

پارسا
ببخشید چطور سایز هاشون و اندازه هاشون رو بزرگ تر کنیم ؟
۱۴۰۱/۰۹/۲۱

ابراهیم جهانگیری
حدود سه روز بود دنبال این مطلب بودم . ممنون از شما
۱۴۰۱/۰۹/۱۶

پــــرتو
سلام خسته نباشید ببخشید اگر بخایم همین منو رو بصورت عمودی بخایم انجامش بدیم باید از چه کدی استفاده کنیم و اگر بخایم برای قالبمون...
۱۴۰۱/۰۹/۱۵

میثم
بسیار سپاسگزار و ممنونم. واقعا عالی بود.
۱۴۰۱/۰۹/۱۵

میثم
ممنونم خیلی عالی بود. کلی محاسبات ریاضی انجام دادم :) اخرش یه شرط دیگه میخواست! حالا یه سوال: در حال حاضر بعد از...
۱۴۰۱/۰۹/۱۳
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.