در جلسه دوازدهم آموزش اچ تی ام ال در خدمت شماییم با آموزش Html؛ آموزش کار با عناصر Block و Inline در HTML از وب سایت آموزش برنامه نویسی سورس باران.
آموزش کار با عناصر Block و Inline در HTML
تمام عناصر HTML با توجه به نوع خود دارای یک مقدار نمایش پیشفرض هستند. این مقدار برای بیشتر عناصر به صورت block یا inline است.
Every HTML element has a default display value depending on what type of element it is. The two display values are: block and inline.
حتما بخوانید : طراحی وب سایت در شیراز
عناصر block-level در اچ تی ام ال
یک عنصر block-level همیشه در یک خط جدید آغاز شده و تمام عرض موجود را اشغال میکند (تا جایی که بتواند به سمت چپ و راست کشیده میشود). عنصر <div> یک عنصر block-level است.
1 |
<div>Hello World</div> |
عناصر Inline در Html
عنصر inline در یک خط جدید شروع نشده و فقط عرض مورد نیاز را اشغال میکند:
1 |
<span>Hello World</span> |
عنصر <div> در Html
عنصر <div> اغلب به عنوان محفظهی عناصر دیگر HTML مورد استفاده قرار میگیرد. وقتی از این عنصر به همراه CSS استفاده میشود، میتوان از آن برای استایل دادن به block های محتوا استفاده کرد:
1 2 3 4 |
<div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> |
عنصر <span> در Html
عنصر <span> اغلب به عنوان محفظهای برای متن به کار برده میشود. این عنصر نیاز به هیچگونه خصوصیتی (attribute) نداشته اما معمولا از خصوصیتهای style و class برای آن استفاده میشود. وقتی عنصر <span> همراه با CSS به کار برده میشود میتوان از آن برای استایل دادن به بخشهایی از متن استفاده کرد:
1 |
<h1>My <span style="color:red">Important</span> Heading</h1> |
HTML Grouping Tags
Tag | Description |
---|---|
<div> | Defines a section in a document (block-level) |
<span> | Defines a section in a document (inline) |
منبع : W3Schools
لیست جلسات قبل آموزش Html
- آموزش اصول اولیه و عناصر HTML
- آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
- آموزش کار با پاراگراف و استایل در Html
- آموزش کار با قالب بندی متن در Html
- آموزش کار با کامنت در HTML
- آموزش کار با کامنت در HTML
- آموزش کار با رنگ ها در HTML
- آموزش کار با تصاویر در HTML
- آموزش کار با لینک در HTML
- آموزش کار با جدول در HTML
- آموزش کار با لیست ها در HTML
- آموزش کار با عناصر Block و Inline در HTML
- آموزش کار با عنصر Class در HTML
- آموزش Html؛ آموزش iframe در HTML
- آموزش Html؛ آموزش جاوا اسکریپت در HTML
- آموزش کار با عنصر Head در HTML
- آموزش Layout در HTML
- آموزش طراحی سایت ریسپانسیو در HTML
- آموزش عناصر کد کامپیوتر در HTML
- آموزش موجودیت (Entities) در HTML
- آموزش نمادها (Symbols) در HTML
- آموزش کار با Character (کاراکترهای رزرو شده) در HTML
- آموزش رمزگذاری URL در HTML
- آموزش کامل کار با فرم ها در HTML
- آموزش انواع ورودی (Input) در HTML
- آموزش خصوصیات ورودی در HTML
حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی
حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- منبع : سورس باران
- رمز فايل : www.sourcebaran.com
- انتشار: ۳۱ خرداد ۱۳۹۸
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- رپورتاژ
- فروشگاه
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- Go
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
از زحمات شما ممنونم
مدل آموزش شما عالی است.
سلام خدمت شما
خواهش میکنم