آموزش تگ span در HTML
فهرست موضوعات در این آموزش
بنام خدا سلام خدمت شما دوستان و همراهان همیشگی وب سایت پاسخ وردپرس در خدمت شما یا یک دیگه از جلسات آموزش html در این جلسه میخواهیم آموزش تگ span در html به صورت کامل برسی کنیم پس با من همراه باشید .
از تگ span در HTML به منظور دسته بندی کردن عناصر درون خطی و اعمال استایل یا ویژگی خاص روی آن ها استفاده میشود.
کاربرد تگ span
به منظور درک بهتر کاربرد تگ span در طراحی سایت به مثالی که برایتان میزنم توجه کنید فرض کنید که میخواهید متن یا محتوایی را در سایت خود منتشر کنید که بعضی از کلمات موجود در این متن با رنگی متفاوت نسبت به سایر کلمات نشان داده شوند خب برای انجام این کار چه راه حلی به ذهن شما میرسد ؟
به چه طریقی میتوانیم روی این کلمات استایلی متفاوت اعمال نماییم ؟
درصورتی که متن خود درون تگ p قرار دهید و استایل رنگ قرمز را روی این تگ اعمال کنید تمام کلمات موجود در متن شما استایل رنگ قرمز را خواهند گرفت در صورتی که شما میخواستید بعضی از کلمات موجود در متن استایل رنگ قرمز را بگیرند نه همه کلمات موجود در متن ، کمی فکر کنید به نظر شما راه حل این مشکل چیست ؟
مسلما بهترین راه قرار دادن این کلمات درون تگ span و اعمال استایل دلخواه روی آنهاست.
مثال تگ span در HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>replywp.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, nesciunt! <span style="color: red;">replywp.com</span> Delectus, quia voluptas perferendis tempore aut quaerat minus reiciendis alias, <span style="color:green;">پاسخ وردپرس</span>ratione neque, ipsam laudantium natus ipsa accusamus libero quasi exercitationem?</p> </body> </html> |
Block Element چیست و چه فرقی با Inline Element دارد؟
۲ دسته مهم از المان هایی که در HTML از آنها استفاده میکنیم، المانهای بلاکی (Block element) و المانهای درون خطی (Inline element) هستند.
المانهای بلاکی (Block Element)
همان طور که از عنوان پیدا است این المانها مانند بلوکی هستند که میتوانند عناصر دیگر را در خود جای دهند و با استفاده از آنها میتوان بخشهای مختلف صفحه را جدا کرده و به هر بخش استایل داد. به عنوان مثال Div و h1 دو نمونه از المانهای بلاکی هستند. قبل و بعد از باز و بسته شدن این نوع المان ها، مرورگر یک خط جدید در نظر میگیرد.
المانهای درون خطی (Inline Element)
این المانها میتوانند درون یک تگ دیگر مورد استفاده قرار بگیرند و تاثیری روی سایر عناصر آن بخش ندارند و فقط همان خط را تغییر میدهند. از این المانها میتوان در استایل دادن به المانهای بلاکی نیز استفاده کرد. قبل و بعد از باز شدن این تگ، مرورگر به خط جدید نمیرود.
تفاوت تگ Div با Span اصلا چه فرقی داره ؟
HTML به شما در شکل دهی ساختار یک صفحه کمک میکند و برای استایل دادن و افزودن ویزگیهای ظاهری به صفحات سایت، باید از CSS کمک بگیرید. تگ div و تگ span در کنار CSS کاربرد زیادی دارند و در بسیاری از موارد کار طراحان وب را ساده میکنند. تا این قسمت از مطلب با کاربرد تگها آشنا شدیم. در لیست زیر تفاوت تگ Div و Span را بررسی میکنیم:
تگ div
- تگ Div یک المان بلاکی است.
- Div برای استایل دادن به کادرهای موجود در صفحه که دارای المانهای مختلفی هستند، به کار میرود.
تگ Span
- Span یک المان درون خطی است.
- این تگ برای استایل دادن به عناصر صفحه به کار میرود.
جمع بندی آموزش تگ span در HTML
پس به این نتیجه رسیدیم که تگ دیو در HTML برای سازمان دهی المانهای مختلفی که در خود جای داده به کار میرود. درحالیکه تگ Span برای سازمان دهی متن در همان خط از کد استفاده میشود. اگرشما هم تعریف دیگری از تفاوت این دو تگ دارید خوشحال میشویم با خوانندگان سون لرن در میان بگذارید.
برای نصب نرم افزار برای کد نویسی html از لینک زیر استفاده فرمایید.
آموزش نرم افزار های مورد نیاز طراحی وب سایت
در صورت که به طراحی وب آشنایی ندارید میتوانید از آموزش زیر استفاده فرمایید .
در صورت که میخواهید به صورت حرفه ای طراحی وب را فرا بگیرید از لینک زیر استفاده فرمایید .
آموزش css html آموزش HTML5 CSS3
در یافت تمام جلسات آموزش مرحله به مرحله html از لینک زیر استفاده فرمایید.
هیچ دیدگاهی برای این نوشته ثبت نشده است.