آموزش برنامه نویسی وب و مهارتهای مرتبط
پنجشنبه ۰۴ اردیبهشت ۱۴۰۴
Thursday, April 24, 2025 GMT +3:30
Thursday, April 24, 2025 GMT +3:30
لایه بندی در 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>یک مثال کاربردی با 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
مطالب بیشتر:کار با تگ فرم (form) در HTML
فرمت بندی و کار با متن و پاراگراف در HTML
ایجاد جدول با تگ table در HTML
نحوه ایجاد لینک در HTML
کاربرد تگ font و ویژگی های فونت در HTML
دیدگاه
۳۷ دیدگاه برای این مطلب ارسال شده است. چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.پــــرتو
۱۷:۰۵ ۱۴۰۱/۰۹/۱۵
سلام خسته نباشید ببخشید اگر بخایم همین منو رو بصورت عمودی بخایم انجامش بدیم باید از چه کدی استفاده کنیم و اگر بخایم برای قالبمون از این کد استفاده کنیم (همون قالبی که بهتون دادم منظورمه) کجای کد بزارم ممنون میشم بگین لطفا امکان داره با همین کد مشکلم حل بشه مرسی
مطلب در خصوص لایه بندی در HTML است، منظورتان کدام منو است؟ در کل مشکلات قالب صرفا با درج منو رفع نمی شود باید HTML و CSS بلد باشید و بخش های لازم را ویرایش کنید، اینکه منو کجا درج شود با آزمایش و خطا می توانید تست کنید.
مرتضی
۱۲:۲۴ ۱۴۰۱/۰۱/۰۳
سلام. از اموزشهاي کم نظیری كه در اين سايت قرار دادید خیلی متشکرم. واقعاً مثالهاي كاربردی کنار آموزشهاتون خیلی مفیده ، سايت خیلی خوبیه، باز هم تشکر.
امین ایرانی
۱۸:۲۸ ۱۳۹۹/۰۳/۱۱
سلام ممکنه بفرمایید چجوری از تگ 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>ilia Delbar
۱۳:۱۵ ۱۳۹۹/۰۲/۲۶
خیلییییییییییی خوبه!
فقط دلم می خواد یه برنامه درست کنم رنگ ها رو نشون بده (رنگ تگ ها)
فقط دلم می خواد یه برنامه درست کنم رنگ ها رو نشون بده (رنگ تگ ها)
اگر برای برنامه مد نظر بیشتر توضیح دهید شاید بتوانیم راهنمایی کنیم، رنگ تگ منظورتان همان رنگ متن داخل تگ است؟ در صورت تمایل یک نمونه صفحه درج کنید.
پارسا
۱۷:۳۶ ۱۳۹۸/۰۴/۱۶
ممنون از زحماتتون 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>salamander
۱۰:۳۵ ۱۳۹۵/۰۱/۳۰
سلام ممنون از آموزش خوبتون
محسن
۱۵:۲۱ ۱۳۹۴/۰۸/۱۵
سلام
می خواستم بدونم ما در چه صورت می تونیم یک بلاک رو در جایی که مد نظرمونه قرار بدیم مثلا من وقتی از خاصیت left استفاده می کنم بلاک داخلی زیادی چپ میره وقتی هم که از right استفاده می کنم زیادی راست میره من میخوام موقعیت بلاک رو دقیقا اونیکه مد نظرم هست قرار بدم تا بتونم سایر بلاکهای دیگه رو راحت تر جایگزاری کنم
می خواستم بدونم ما در چه صورت می تونیم یک بلاک رو در جایی که مد نظرمونه قرار بدیم مثلا من وقتی از خاصیت left استفاده می کنم بلاک داخلی زیادی چپ میره وقتی هم که از right استفاده می کنم زیادی راست میره من میخوام موقعیت بلاک رو دقیقا اونیکه مد نظرم هست قرار بدم تا بتونم سایر بلاکهای دیگه رو راحت تر جایگزاری کنم
سلام
باید سعی کنید CSS و طراحی وب را فرا بگیرید، تنها در این صورت است که می توانید به نحو دلخواه یک صفحه وب را به اصطلاح فرمت بندی کنید!
باید سعی کنید CSS و طراحی وب را فرا بگیرید، تنها در این صورت است که می توانید به نحو دلخواه یک صفحه وب را به اصطلاح فرمت بندی کنید!
مجتبی
۱۲:۴۰ ۱۳۹۴/۰۸/۱۴
حرف نداری....
تمام
تمام
نیلوفر
۰۹:۱۲ ۱۳۹۴/۰۸/۱۲
سلام
من از div تو طراحی قالب جوملا استفاده کردم بصورت زیر:
من از div تو طراحی قالب جوملا استفاده کردم بصورت زیر:
<div id="text-logo">
<jdoc:include type="modules" name="text-logo" style="xhtml" />
</div>style="xhtml"سلام
متاسفانه از سیستم جوملا استفاده نمی کنیم، لطفا در این زمینه به انجمن های مرتبط مراجعه کنید!
متاسفانه از سیستم جوملا استفاده نمی کنیم، لطفا در این زمینه به انجمن های مرتبط مراجعه کنید!
۱۸:۳۳ ۱۳۹۴/۰۲/۳۱
خیلی ممنون به دردم خورد عالیییییییییی
مگنولیا
۰۷:۰۴ ۱۳۹۳/۰۹/۰۳
سلام.
من میخوام متن درون div از لبه div فاصله داشته باشه .چطور باید اینکار رو انجام بدم؟
ممنون.
من میخوام متن درون div از لبه div فاصله داشته باشه .چطور باید اینکار رو انجام بدم؟
ممنون.
سلام
باید از CSS و به طور خاص ویژگی padding استفاده نمائید.
باید از CSS و به طور خاص ویژگی padding استفاده نمائید.
محمد مطهری
۱۱:۳۷ ۱۳۹۳/۰۸/۱۲
سلام
چطوری موقعیت دو قالب نسبت به هم رو مشخص کنیم
من وقتی میخوام چند تا قالب تو صفحه داشته باشم همه قالب ها زیر هم قرار میگیرن
چطوری موقعیت دو قالب نسبت به هم رو مشخص کنیم
من وقتی میخوام چند تا قالب تو صفحه داشته باشم همه قالب ها زیر هم قرار میگیرن
سلام
احتمالا منظور شما از "قالب" همان بلاک div است! در این صورت باید کار با CSS و از جمله خاصیت display با مقادیر inline یا inline-block را بلد باشید.
احتمالا منظور شما از "قالب" همان بلاک div است! در این صورت باید کار با CSS و از جمله خاصیت display با مقادیر inline یا inline-block را بلد باشید.
۱۶:۰۳ ۱۳۹۳/۰۵/۰۱
سلام. با تشکر از مطالب عالیتون. چند سوال داشتم：
١- چرا در مثال کاربردی که برای div طراحی کردید در قسمت style مربوط به div شماره ٢ هم از display:block و هم از display:inline-block استفاده کرده اید؟ مگر میشود یک div به طور هم زمان دو display بگیرد؟
٢- چرا باید از block جدا کننده استفاده کرد؟ کاربرد خاصیت clear چیست؟
٣- چرا برای فرمت بندی یک سایت ١٠٠١ روش متفاوت وجود دارد؟!!! به نظر شما بهترین راه فرمت بندی و قالب بندی چیست؟
۴- راجع به قالب بندی بوسیله table-block توضیحاتی بفرمایید.
ببخشید سوال ها زیاد شد.
١- چرا در مثال کاربردی که برای div طراحی کردید در قسمت style مربوط به div شماره ٢ هم از display:block و هم از display:inline-block استفاده کرده اید؟ مگر میشود یک div به طور هم زمان دو display بگیرد؟
٢- چرا باید از block جدا کننده استفاده کرد؟ کاربرد خاصیت clear چیست؟
٣- چرا برای فرمت بندی یک سایت ١٠٠١ روش متفاوت وجود دارد؟!!! به نظر شما بهترین راه فرمت بندی و قالب بندی چیست؟
۴- راجع به قالب بندی بوسیله table-block توضیحاتی بفرمایید.
ببخشید سوال ها زیاد شد.
سلام
1- ضمن تشکر از نکته سنجی، اشتباه از ما بوده، اصلاح شد!
2- برخی مواقع مرورگرها، عناصری را که باید در زیر عناصر دیگر باشند را بدون ترتیب نمایش می دهند، برای رفع این نوع موارد از یک بلاک جداکننده با خاصیت clear: both استفاده می شود، این کار موجب می شود که بلاک جداکننده از هر دو طرف به صورت نامرئی کشیده شود و مانع به بالا آمدن عناصر زیری شود (both به معنی هر دو و در اینجا به معنی هر دو طرف است، both نقش یک ستون افقی نامرئی را بازی می کند).
3- چون نوع و نیازهای سایتهای مختلف گوناگون و به نوعی نامحدود است، بدین لحاظ ترجیح داده شده تنها ابزارهای اولیه (HTML و CSS) خلق و فرمت بندی به طراحان واگذار شود! البته در چند سال اخیر برخی روش ها و الگوهای پرکاربرد در حال استفاده است که هنوز به یک استاندارد فراگیر تبدیل نشده.
4- استفاده از جداول برای فرمت بندی روشی قدیمی است که امروزه به دلایل مختلف توصیه نمی شود جزء برای ارائه محتوای آماری و ... در حال حاضر برای فرمت بندی صفحات وب استفاده از بلاک های div بهترین انتخاب است.
1- ضمن تشکر از نکته سنجی، اشتباه از ما بوده، اصلاح شد!
2- برخی مواقع مرورگرها، عناصری را که باید در زیر عناصر دیگر باشند را بدون ترتیب نمایش می دهند، برای رفع این نوع موارد از یک بلاک جداکننده با خاصیت clear: both استفاده می شود، این کار موجب می شود که بلاک جداکننده از هر دو طرف به صورت نامرئی کشیده شود و مانع به بالا آمدن عناصر زیری شود (both به معنی هر دو و در اینجا به معنی هر دو طرف است، both نقش یک ستون افقی نامرئی را بازی می کند).
3- چون نوع و نیازهای سایتهای مختلف گوناگون و به نوعی نامحدود است، بدین لحاظ ترجیح داده شده تنها ابزارهای اولیه (HTML و CSS) خلق و فرمت بندی به طراحان واگذار شود! البته در چند سال اخیر برخی روش ها و الگوهای پرکاربرد در حال استفاده است که هنوز به یک استاندارد فراگیر تبدیل نشده.
4- استفاده از جداول برای فرمت بندی روشی قدیمی است که امروزه به دلایل مختلف توصیه نمی شود جزء برای ارائه محتوای آماری و ... در حال حاضر برای فرمت بندی صفحات وب استفاده از بلاک های div بهترین انتخاب است.
۲۱:۲۹ ۱۳۹۳/۰۳/۱۱
تگ SPAN در مواردی که میخواهیم عناصرمون کنار هم باشن خیلی به کار میاد تا تگ DIV.
فرمت بندی با تگ span مرسوم نیست و بیشتر برای متن استفاده می شود، برای فرمت بندی بهتر است از div با خاصیت inline استفاده کنید.
ابوالفضل
۲۰:۰۲ ۱۳۹۲/۱۱/۲۸
سلام ممنون از مطلب خوبتون
اگر کل کدنویسی اچ تی ام ال ما در 60 خط باشد ما بیایم همه کدها را در یک خط قرار دهیم:
1. در سرعت لود سایت تاثیری دارد یا نه؟
2. برای سئو سایت و موتورهای جستجوگر این روش خوب هستش یا نه؟
ممنون میشم استاد به سوالم جواب بدین ، شرمنده من زیاد سوال می پرسم ، چون شما خیلی واضح جواب میدین و توی ذهنم واسه همیشه می مونه
بابت همه چیز ازتون سپاسگذارم
اگر کل کدنویسی اچ تی ام ال ما در 60 خط باشد ما بیایم همه کدها را در یک خط قرار دهیم:
1. در سرعت لود سایت تاثیری دارد یا نه؟
2. برای سئو سایت و موتورهای جستجوگر این روش خوب هستش یا نه؟
ممنون میشم استاد به سوالم جواب بدین ، شرمنده من زیاد سوال می پرسم ، چون شما خیلی واضح جواب میدین و توی ذهنم واسه همیشه می مونه
بابت همه چیز ازتون سپاسگذارم
سلام
این روش توصیه نمی شود و تاثیر یا ضرر خاصی بر سرعت بارگذاری یا سئو سایت ندارد، بهترین حالت نوشتن کدها به صورت متعارف و منظم است، نکته اصلی در حفظ سرعت، خلاصه نویسی و به فرض استفاده از استایل CSS و در زمینه سئو، کدنویسی استاندارد و مطابق با قوانین W3C است.
این روش توصیه نمی شود و تاثیر یا ضرر خاصی بر سرعت بارگذاری یا سئو سایت ندارد، بهترین حالت نوشتن کدها به صورت متعارف و منظم است، نکته اصلی در حفظ سرعت، خلاصه نویسی و به فرض استفاده از استایل CSS و در زمینه سئو، کدنویسی استاندارد و مطابق با قوانین W3C است.
صفحه 1 از 3 محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.