آموزش HTML - بخش دوازدهم: تگ span

فرض کنید که قصد دارید متنی بنویسید که هر بخش از آن یک رنگ دارد. برای این کار می‌توانید همه را در یک تگ بنویسید؛ ولی نتیجه‌ی نهایی یک رنگ دیده خواهد شد. راه‌حل دیگر نیز آن است که هر بار تگ  را ببندید و دوباره آن را باز کنید و به هر کدام یک استایل دلخواه بدهید! اگر جلسه‌های پیش را با دقت دنبال کرده باشید، می‌دانید که این راه‌حل هم قابل استفاده نخواهد بود؛ چرا که المان p جزء المان‌های بلاک است (در رابطه با این المان‌ها بعدا بیشتر توضیح خواهیم داد) و وقتی بسته می‌شود، المان بعدی را به خط بعدی هول می‌دهد. پس در این صورت متن شما تکه تکه خواهد شد. حالا دوست دارید بدانید که راه‌حل چیست؟

 المان Span از نوع المان‌های اینلاین است. این یعنی با استفاده از این المان، المان شما به خط بعدی نمی‌رود و همه درکنار هم به خوبی و خوشی زندگی می‌کنند. این المان همانند یک جعبه برای متن‌هاست. درواقع این المان یک بخش از متن مدنظر را زیر پرچم خود می‌گیرد و استایل دلخواه شما را بدان می‌دهد. بدین ترتیب اگر بخواهید بخشی از متن یا یک المان مثلا یک پاراگراف را با استایل متفاوتی از باقی نمایش دهید، می‌توانید از این المان استفاده کنید. البته دقت داشته باشید که این المان به خودی خود هیچ تغییری در ظاهر صفحه شما اعمال نمی‌کند و شما باید ازطریق اتریبیوت استایل یا سی‌اس‌اس ظاهر این المان را تغییر دهید.  بنابراین المان span همیشه دارای اتریبیوت است و آن اتریبیوت طبیعتا چیزی نیست جز اتریبیوت""=Style! 

برای مثال ما می‌خواهیم متن زیر را با دو رنگ نمایش دهیم:

متن با رنگ و فونت دلخواه نوشته می‌شود.

برای این کار:

مرحله اول:‌ ابتدا تگ پاراگراف را باز می‌کنیم و متن را به‌طور کامل در آن تایپ می‌کنیم.

مرحله دوم:‌ بخشی از متن که می‌خواهیم رنگ و استایل متفاوتی داشته باشد را انتخاب کرده و در بین دو تگ  قرار می‌دهیم.

حالا نوبت به اضافه کردن استایل دلخواه به بخشی است که در درون تگ span قرار دارد. برای اضافه کردن استایل، از اتریبیوت استایل  " "= Style  استفاده می‌کنیم:

style="color: blue;">متنی که بین المان اسپن قرار می‌گیرد به رنگ آبی دیده خواهد شد

استایلی که در این بخش قرار می‌گیرد(اکنون رنگ آبی تنها استایل ماست) با بخش‌های دیگر تگ پاراگراف متفاوت است.

مثال دیگری می‌زنیم. در این مثال قصد داریم علاوه بر رنگ متن فونت و نوع آن را نیز عوض کنیم. برای این کار ابتدا متن را با کمک می‌نویسیم.

متن با رنگ و فونت دلخواه نوشته شود

 در قدم بعدی بخشی از متن را که قصد تغییر آن را داریم انتخاب کرده و دو طرف آن تگ قرار می‌دهیم. 

حال در آخرین مرحله، درون تگ استایل مشخصات مدنظر  را به ترتیبی که پیش از این در بخش اتریبیوت‌ها یاد گرفته‌ایم وارد می‌کنیم.

نوشته شود  style="color: red;  font-family: Yekan;">رنگ و فونت دلخواهمتن با

نوشته شود  style="color: red;  font-family: Yekan;">رنگ و فونت دلخواهمتن با

متن با رنگ و فونت دلخواه نوشته می‌شود.

امیدواریم که بخش دوازهم از آموزش اچ‌تی‌ام‌ال به سبک زومیت، موفق به جلب رضایت شما زومیتی‌های عزیز شده باشد. تجربیات، پیشنهاد‌ها و نظرات شما بدون شک در ادامه‌ی این مقالات آموزشی تأثیر بسزایی خواهد داشت. پس لطفا با ما در ارتباط باشید.