آموزش برنامه نویسی وب و مهارتهای مرتبط
یکشنبه ۱۵ مهر ۱۴۰۳
Sunday, October 6, 2024 GMT +3:30
Sunday, October 6, 2024 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
متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
فرمت بندی و کار با متن و پاراگراف در HTML
تگ های اصلی و کلیدی HTML
دیدگاه
۳۷ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.محسن
۱۵:۲۱ ۱۳۹۴/۰۸/۱۵
سلام
می خواستم بدونم ما در چه صورت می تونیم یک بلاک رو در جایی که مد نظرمونه قرار بدیم مثلا من وقتی از خاصیت left استفاده می کنم بلاک داخلی زیادی چپ میره وقتی هم که از right استفاده می کنم زیادی راست میره من میخوام موقعیت بلاک رو دقیقا اونیکه مد نظرم هست قرار بدم تا بتونم سایر بلاکهای دیگه رو راحت تر جایگزاری کنم
می خواستم بدونم ما در چه صورت می تونیم یک بلاک رو در جایی که مد نظرمونه قرار بدیم مثلا من وقتی از خاصیت left استفاده می کنم بلاک داخلی زیادی چپ میره وقتی هم که از right استفاده می کنم زیادی راست میره من میخوام موقعیت بلاک رو دقیقا اونیکه مد نظرم هست قرار بدم تا بتونم سایر بلاکهای دیگه رو راحت تر جایگزاری کنم
سلام
باید سعی کنید CSS و طراحی وب را فرا بگیرید، تنها در این صورت است که می توانید به نحو دلخواه یک صفحه وب را به اصطلاح فرمت بندی کنید!
باید سعی کنید 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 بلد باشید و بخش های لازم را ویرایش کنید، اینکه منو کجا درج شود با آزمایش و خطا می توانید تست کنید.
صفحه 3 از 3آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.سیدعباسی
با سلام من میخوام از متن زیر لینکش رو دربیارم و در آخر مقدار 3088 رو بصورت خروجی نهایی داشته باشم با...۱۴۰۳/۰۷/۰۷
مجتبی
سلام وقت بخیر میخوام یک روز به تاریخ دریافتی اضافه شه ممنون میشم راهنمایی کنید۱۴۰۳/۰۶/۲۰
پرتو
سلام خوبید؟ خسته نباشیذ ببخشید مزاحم شدم می خواستم بگم من به شما ایمیل زدم ولی هنوز شما جواب ندادین می تونم بپرسم چرا سوال...۱۴۰۳/۰۶/۱۵
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.