عناصر HTML را می توانید به وسیله تگ های <div> و یا <span> گروه بندی نمایید.
عناصر Block
یک عنصر Block عنصری است که تمام طول یک سطر را اشغال می کند و قبل و بعد از آن یک سطر وجود دارد.
مثال برای عناصر Block:
- <h1>
- <p>
- <div>
- <table>
عناصر Inline
یک عنصر Inline تنها به اندازه ای که نیاز دارد، عرض یک سطر را اشغال می کند، و هیچ اجباری در اشغال کل یک سطر وجود ندارد.
مثال برای عناصر inline:
- <span>
- <a>
- <img>
- <td>
عنصر <div>
عنصر <div> یک عنصر block می باشد که می تواند به عنوان یک ظرف برای گروه بندی دیگر عناصر HTML استفاده شود.
عنصر <div> معنی خاصی ندارد. به جز این، به دلیل اینکه یک عنصر block می باشد، مرورگر یک خط قبل و بعد از آن نمایش می دهد.
هنگامی که با CSS استفاده می شود، عنصر <div> می تواند برای تنظیم خصوصیت style برای بلاک هایی با محتوای زیاد استفاده شود.
دیگر استفاده رایج از عنصر <div> صفحه بندی سند می باشد. استفاده از جدول برای صفحه بندی دیگر قدیمی شده است. استفاده از جدول ها برای این منظور روش مناسبی نمی باشد. هدف از عنصر <table> نمایش داده ها به صورت جدولی می باشد.
نحوه صفحه بندی با استفاده از عناصر <div>
توضیح مثال بالا: آموزش HTML-صفحه بندی
عنصر <span>
عنصر <span> یک عنصر درون خطی (inline) است که می تواند به عنوان ظرفی برای متن استفاده شود.
عنصر <span> معنی خاصی ندارد.
هنگامی که با CSS استفاده می شود، عنصر <span> می تواند برای تنظیم خصوصیت style برای بخش های متنی شکل، استفاده شود.
استفاده از عنصر <span> برای متمایز کردن رنگ قسمتی از متن
تگ های گروه بندی
| تگ | توضیح |
|---|---|
| <div> | تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است) |
| <span> | تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است) |
من فیلم آموزشیتون گرفتم تو این صفحه در قسمت آموزش نحوه صفحه بندی با استفاده از عناصر ( http://beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_layout_divs)
توی آموزش در فیلم هیچ توضیحی درباره ای کد style="background-color:#FFA500 داده نشده و حتی اشاره نشده که در آموزش های بعدی باهاش آشنا می شود (منظورم بک گراند کالر نیست کدیه که ازش استفاده شده است یعنی #FFA500 چون طبق آموزش بتریب که امدم حتی فیلم بعدی آموزشم دیدم تاحالا همچین کدی نبوده و نمیدونم باید از کجا این کدرنگی رو وارد کنیم) لطفا توضیح بدین شیوه وارد کردن این کدهای رنگی و انواع مختلفشون چه کدهایی هستند...
خصوصیت background-color و نحوه تنظیم اون مربوط به CSS است و در فیلم آموزش HTML فقط اشاره ای به آن شده است اما در CSS رنگ به یکی از روش های زیر مشخص می شود:
name: نام رنگ باید مشخص شود مانند "red"
RGB: به صورت RGB مشخص می شود مانند "(rgb(255,0,0"
Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #
اما در روش سوم که مورد سوال شما هم بوده است برای بدست آوردن ff0000 می تونیم از فتوشاپ استفاده کنیم و در پلن رنگ می تونیم بصورت ویژوال از بین رنگ های نمایش داده شده، رنگ مورد نظرمان را انتخاب و سپس فتوشاپ بصورت اتوماتیک نوع HEX رنگ را تولید می کنه که فقط کافی است آنرا کپی و در صفحات وب استفاده کنیم.
طبق مثال زیر که در پایان آموزش بالا گفتین کاربرد span و strong شبیه به هم هستش .بهتره از کدوم استفاده کنیم (برای بهتر بودن در نظر گوگل)
beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_span
خیر، کاربرد عنصر sapn و strong یکسان نیست. از عنصر span برای متمایز کردن قسمتی از متن استفاده می شود اما از strong برای Bold کردن استفاده می شود.
البته از نظر SEO بهتر است که از عنصر Strong برای Bold کردن استفاده کنید.
همین ساختاری رو که ذکر کردید، بنده در ادیتور آنلاین codepen ایجاد کردم. همون طور که در لینک زیر مشاهده می کنید، دو عکس وجود داره که داخل تگ a قرار داره، اما در زیر یکدیگر قرار نگرفته اند. به مثال زیر دقت کنید:
codepen.io/sbaloot/pen/RKmEJY
برای این کار کافیست از خصوصیت display استفاده کرده و مقدار آن را inline یا inline-block بگذارید. کد زیر رو ببینید:
<style> div{background-color:yellow;} .test{display:inline} </style>
<div>this is a test.</div > <br> <div class="test">this is a inline test.</div >
میخواستم بگم بنده قسمت "layout" داخل آموزش html خود سایت w3schools.com رو دیدم اما صفحه بندی رو با عناصر دیگه مثل و ... انجام داه بود و اسمی از عنصر div نیورده بود. میخواستم بدون آیا این عنصر div برای صفحه بندی دیگه منسوخ شده هستش؟ اگه نه پس چرا داخل خود دبلیو تری اسکولز نامی ازش نیورده بود؟
ممنون میشم پاسخ بدید
خیر! تگ div منسوخ نشده است و در صفحه بندی کاربرد فراوانی دارد.
چطور میتونم با استفاده از عنصر div بخشی مانند "آخرین محصولات وب سایت بیاموز" (در پایین همین صفحه) رو بنویسیم
در واقع منظورم اینه که چطور میشه 4 یا تعداد بیشتر عنصر div رو در کنار هم قرار داد حالا یا عمودی یا افقی یا هم افقی و عمودی به ترتیب چیده شوند؟؟؟
با تشکر
برای قرار دادن چند عنصر Div در یک خط باید دو کار زیر را انجام دهید:
1- برای همه ی Divها، خصوصیت float را با مقدار right یا left تنظیم نمایید.
2- برای همه ی Divها، خصوصیت width را با یک مقدار دلخواه تنظیم نمایید.<div style="style: right; width:25%"> </div>
<div style="style: right; width:25%"> </div>
<div style="style: right; width:25%"> </div>
<div style="style: right; width:25%"> </div>
منظور از خصوصیت clear که برابر با both قرار داده شده چیه؟ ممنون
برای اینکه جراین فلوت صفحه رو قطع کنیم از این خاصیت استفاده میکنیم
Clear یکی از خصوصیت های CSS است که برای فهم آن نیاز است که شما ابتدا با عناصر Block و Inlint و همچنین خصوصیت Float آشنا شوید.
عناصر Block: عناصری که تمام طول یک سطر را به خودشان اختصاص می دهند. مثل عنصر Div
عناصر Inlinr: عناصر که تنها به اندازه ای که اشغال می کنند طول یک سطر را اشغال می کنند و دیگر عناصر را در کنار خود می پذیرند، مثل عنصر Span
خصوصیت Float: با استفاده از این خصوصیت می توانید عناصر Block را Inline کرده و به سمت راست یا چپ، شناور نمود.
برای کسب اطلاعات بیشتر در مورد خصوصیت Clear به لینک زیر مراجعه فرمایید:
www.beyamooz.com/cssref/227-css-properties/851-clear
میشه در مورد div و span بیشتر توضیح بدین
ممنون
دوست عزیز منظور شما از توضیح بیشتر مشخص نیست. این دو تگ جزء تگ‌های مهم هستند که به لحاظ بصری کاری روی عنصر درونشون انجام نمی‌دن. تنها تفاوت مهم اصلی این دو تگ در واقع blockLevel بودن آنهاست.
تگ span یک تگ textLevel هست، بدین معنی که در هنگام استفاده از این تگ، برای متن قبل و بعد آن اتفاق خاصی نمیفتد.
اما تگ div یک تگ blockLevel هست، بدین معنی که در هنگام استفاده از این تگ، یک خط قبل و بعد از این تگ ایجاد میشه و باعث میشه که عناصر درون این تگ از خط جدید شروع بشه.
قدرت این دو تگ بیشتر زمانی مشخص میشه که بهشون کلاس و ID بدیم و توسط CSS یا Javascript برای اون‌های رویدادهای خاصی اعمال کنیم. اگر این دو تگ رو ساده به کار ببرید، صرفا کار خاصی انجام نمیده.
وقتی تگ div را در دریم بصورت تو در تو مینویسم وخصوصیات آنرا بصورت زیر تنظیم می کنم:position:relatvie;
top: left;آنچه که مکان عنصر در دریم ویو در دیزاین خود نشان میدهد با آنچه که با IE یا firefox نشان میدهد متفاوت هست از نظر مکان عنصر div؟
برای جلوگیری از این اشکالات چکار کنیم ؟
ممنون
حدث می زنم، اگر استایل زیر را تنظیم کنید درست بشه:
html { padding: 0px; margin: 0px; }
body { padding: 0px; margin: 0px; }
beyamooz.com/css/86-box-model/95-%D8%AE%D8%A7%D8%B5%DB%8C%D8%AA-margin-%D8%AF%D8%B1-css
در اینجور مواقع دیگر با CSS تنها نمی توان طراحی را انجام داد و باید از فتوشاپ کمک گرفت. بعنوان مثال، قسمت تو رفتگی که فرمودید را باید در فتوشاپ آماده کرد و سپس با استفاده از خصوصیت background آنرا در محل مورد نظر نمایش داد.
اما اگر خصوصیت display:block را روی آن اعمال کنیم، از حالت استانداردش خارج می شود و دیگر می توان به آن به قول شما، طول و عرض داد.
لطفا طرز html کردن قالب با div رو هم در جوملا آموزش بدید.
در ضمن پایین سایتتون اسکرول داره برطرفش کنین.
با تشکر از سایت عالیتون.
http://www.beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-%D8%AF%D8%B1-%D8%AC%D9%88%D9%85%D9%84%D8%A7
اسکرول پایین: برای داشتن دیدی بهتر از سایت، عرض قالب استفاده شده در اینجا، 1120 پیکسل تنظیم شده است، بنابراین در رزولیشن های 768*1024، پایین صفحه یک اسکرول کوچیک می خورد، البته بصورت پیش فرض سمت راست صفحه که فهرست مطالب لیست شده و متن اصلی آموزش، کاملاً قابل مشاهده است.
چرا طرز استفاده از div و span رو نگفتین؟مثال هم نیست
سلام ... با نظرتون موافقم، خود من همیشه از این عنصر برای استایل دادن به متن استفاده کردم ولی ترجمه ی بالا دقیقاً چیزی است که در w3schools گفته شده. (HTML elements can be grouped together with div and span)
ایا میشود برای تقسیم صفحه از تگ span استفاده کرد؟
اگر نه پس تعریف span رو ویرایش کنید
span:تعریف یک ظرف برای دیگر عناصر
در صورتی که جای دیگه ای گفتید برای متن نه عناصر
با تشکر
ممنون از حسن نگاهتون.
در داخل این تگ میتوان هم متن و هم یک تگ دیگر را قرار داد.
از تگ span برای محتواهای کوچک تر و از تگ div برای نمایش محتواهای بزرگتر یا نمایش یک قسمت از صفحه سایت استفاده می شود.