آموزش HTML به زبان ساده-قسمت هشتم:کاربرد تگ span
برچسب یا تگ <span> چیست؟
در ابتدا باید بدانید که خود کلمه span به معنی “طول” است. در واقع تگ span به ما کمک میکند یک عنصر را در طول عنصری دیگر قرار دهیم. برای درک بهتر به یک مثال روی میآوریم. فرض کنید میخواهید جمله “حسن به مدرسه رفت” را در HTML بنویسید و همچنین نهاد این جمله یعنی کلمه “حسن” را به رنگ آبی در بیاورید. در حالت عادی باید دو تگ Paragraph ایجاد کنیم و در تگ اول، نهاد را بنویسیم و همچنین به آن استایلِ رنگ آبی بدهیم. در تگ پاراگراف دوم نیز بقیه جمله را بنویسیم. که در این صورت نهاد جمله در خط اول باقی میماند و بقیه جمله به خط دوم میرود. مانند زیر:
<p/> حسن<";p style="color:blue>
<p/>به مدرسه رفت<p>
در چنین حالتی زبان HTML، به ما پیشنهاد استفاده از تگ span را داده تا بتوانیم به یک قسمت از متن بدون آنکه به خط بعدی برود، استایل دهیم. تگ span در عناصر مختلف کاربرد دارد اما رایج ترین آنها، کاربرد این تگ در متن است.
کاربرد تگ <span>
تگ span یک تگ بسته است به این معنی که علاوه بر تگ باز<span>، دارای یک تگ بسته <span/> نیز میباشد. با استفاده از این تگ میتوانیم به سک قسمت خاص از نوشته ها استایلهای خاصی بدهیم. در واقع هنگام استفاده از این تگ ما یک عنصر درونی ایجاد کردهایم. با ان تفاوت که عنصر درونی ایجاد شده هیچ تغییر موقعیتی نمیدهد. مثلا میتوانیم کلمه “حسن” در جمله بالا را به رنگ آبی در بیاوریم ولی همچنان تمام جمله در یک خط باقی بماند.
با استفاده از این تگ کار های بسیار جالبی میتوان انجام داد اما برای آموزش آنها کمی زود است و ابتدا باید با بسیاری از تگها آشنا شوید. پس آموزش آنها را به جلسات نهایی موکول میکنیم تا درکشان برای شما ساده باشد.
روش استفاده از تگ span
همانطور که گفته شد این تگ به ایجاد یک عنصر درونی میپردازد پس ما باید از این تگ، درون دیگر عناصر استفاده کنیم. برای درک بهتر به تشریح مثال اول میپردازیم. برای اینکه نهاد را به رنگ آبی دربیاوریم در حالی که بقیه جمله رنگِ دیگری داشته باشد. باید ابتدا یک تگ پاراگراف ایجاد کنیم و تمام جمله خود را درون آن بنویسیم. سپس در سمت چپ کلمه “حسن” یک تگ باز <span> و در سمت راست آن یک تگ بسته <span/> ایجاد میکنیم. حالا وقت آن رسیده که درون تگ باز span استایلهای خود را تنظیم نماییم به این منظور به جعبه کدهای زیر توجه فرمایید.
See the Pen aboxpoE by amir (@amir5250) on CodePen.0
میبینید که هر آنچه درون تگ باز و بسته span قرار میگیرد، استایلهای انحصاری را به خود میگیرد. نکته دیگری که اینجا قابل ذکر است این است که از تگ های span میتوان هم به صورت درونی و هم به صورت تگ اصلی استفاده کرد. برای درک این موضوع مثال بالا را در نظر بگیرید، از تگ span درون تگ پاراگراف استفاده کردیم پس یک عنصر درونی به حساب میآید. ولی میتوان از آن، به عنوان تگ اصلی نیز استفاده اما این کار فقط هنگامی انجام میشود که بخواهیم ترفندهای ویژهای را به کار ببریم. روش دوم را در جلسات نهایی به همراه ترفندهای ویژه آموزش خواهیم داد.
0 دیدگاه
قوانین ارسال دیدگاه در وبسایت "به اضافه"
1. وبسایت "به اضافه" تابع قوانین کشور است ، لطفا هنگام ارسال دیدگاه ، به قوانین جمهوری اسلامی ایران احترام بگذارید.
2. از ارسال هر گونه ناسزا و الفاظ رکیک خودداری نمایید. در صورت مشاهده ، نظر شما تایید نخواهد شد.
3. نظراتی که به توهین علیه اقوام ، نژاد ها ، ادیان و یا حزب خاصی بپردازد ، مورد تایید نخواهد بود.
4. هر گونه توهین به کاربران ، نویسنده مطلب و یا مدیر سایت پذیرفته نیست.
5. هر گونه فعالیت تبلیغاتی در بخش دیدگاه ها ، ممنوع است.
6. ارسال دیدگاه های نامرتبط با مطلب ، مجاز نیست.
7. تمامی کاربران باید هنگام ثبت نام در سایت، از کلمات مناسب در نام کاربری خود استفاده کنند. در صورت مشاهدهی کلمات رکیک و نامناسب، اشتراک آن كاربر حذف خواهد شد.
8. در بخش ویرایش پروفایل ، کاربران قادر به تغییر تصویر پروفایل هستند. در صورت مشاهده استفاده از تصاویر مستهجن ، زننده و توهین آمیز حساب کاربری حذف خواهد شد.
9. زبان اصلی سایت "به اضافه" فارسی است. دیدگاه های انگلیسی و یا فینگلیش حذف خواهد شد.
10. وبسایت "به اضافه" یک سایت تخصصی در حوزه فناوری است. خواهشمند است از هر گونه فعالیت سیاسی پرهیز نمایید.