آموزش کامل CSS قسمت دوازدهم
در این جلسه از آموزش های CSS به معرفی تگ های <span> و <a> و کاربرهای این دو تگ html در یک صفحه وب می‌پردازیم.
عنصر <span>
عنصر span تا حد زیادی به عنصر div شباهت دارد و میتوان گفت همان خاصیت های عنصر div اما در ابعاد کوچکتر را در خود جای داده است. span از نوع عناصر Inline محسوب می‌شود و معمولا در درون عناصر دیگر میتوان از آن به راحتی استفاده کرد، اما عنصر div از نوع Block Element ها است و معمولا در صفحات وب به عنوان سرشاخه یا والد دیگر عناصر مورد استفاده قرار میگیرد.
Block Element ها به صورت معمول در یک خط مجزا در صفحه وب قرار میگیرند و مروگر در هنگام نمایش صفحه وب در ابتدا و انتهای این عناصر یک خط جدید ایجاد می کند.
بطور کلی می توان گفت، از span زمانی استفاده می کنیم که بخواهیم بر روی بخش کوچکی از محتوای خود تغییرات ظاهری ایجاد کنیم.
برای آشنایی بیشتر با این عنصر میخواهیم به کمک <span> در مثال زیر رنگ background کلمات توسعه نرم افزار و طراحی سایت را در داخل عنصر p تغییر دهیم. (جهت یادگیری استفاده از class ها در عناصر html به آموزشهای قبلی ما مراجعه کنید)
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body dir="rtl">
<h1>پیشرو سیستم</h1>
<p class="para1">به وب سایت ما خوش آمدید، ما یک شرکت <span class="highlight">توسعه نرم افزار و طراحی سایت</span> هستیم.</p>
<h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
<p class="para2">می توانید این متن را در ویرایشگر خود تغییر دهید. </p>
</body>
</html>
body { color:#274472; font-family:Arial black;
font-weight:normal; font-size:15px;background-color:#FDF6F0;}
h1 { text-decoration: underline; font-size:150%; text-align:center;}
h2 { text-decoration: underline; font-size:1.2em; text-align:center;}
p.para1 { color:#000000;}
p.para2 { color:#000000;}
.highlight { background-color:#ffff00; }
پیشرو سیستم
به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.
شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.
می توانید این متن را در ویرایشگر خود تغییر دهید.
همانطور که در نتیجه بالا مشاهده می‌کنید فقط رنگ پس زمینه دو کلمه انتخابی تغییر کرد.
در مثال زیر رنگ کلمه “ویرایشگر” را نیز به کمک span و استایل درون خطی تغییر میدهیم.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body dir="rtl">
<h1>پیشرو سیستم</h1>
<p class="para1">به وب سایت ما خوش آمدید، ما یک شرکت <span class="highlight">توسعه نرم افزار و طراحی سایت</span> هستیم.</p>
<h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
<p class="para2">می توانید این متن را در <span style="color:red">ویرایشگر</span> خود تغییر دهید. </p>
</body>
</html>
پیشرو سیستم
به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.
شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.
می توانید این متن را در ویرایشگر خود تغییر دهید.
عنصر <a> و ارتباط محتوا و صفحه ها
عنصر a یکی از مهمترین عناصر html به حساب می آید که می توان به کمک آن عبارات یا تصاویر لینک دار ایجاد کرد و کاربر با کلیک بر روی این عناصر لینک دار به نقطه ای دیگری در همان صفحه و یا دیگر صفحه هات وب سایت ما انتقال پیدا کند. عنصر <a> دارای در کدهای اضافه شده زیر عبارت ارتباط با ما را با استفاده از anchor tag (تگ لنگر) و عبارت “contact.html” که نام پوشه صفحه ارتباط با ما است در وب سایت قرار میدهیم.
لازم به ذکر است که در این مثال چون ما از صفحه استایل خارجی استفاده می‌کنیم و تمام پوشه های موردنیازمان در فایل وب سایت قرار دارند تنها کافیست برای ارجاع دادن، نام پوشه را ذکر کنیم. اما اگر از صفحه استایل خارجی استفاده نمی‌کنید باید ادرس صفحه موردنظرتان را بصورت کامل بنویسید.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body dir="rtl">
<h1>پیشرو سیستم</h1>
<p class="para1">به وب سایت ما خوش آمدید، ما یک شرکت <span class="highlight">توسعه نرم افزار و طراحی سایت</span> هستیم.</p>
<h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
<p class="para2">می توانید این متن را در <span style="color:red">ویرایشگر</span> خود تغییر دهید. </p>
<a href="contact.html"> ارتباط با ما </a>
</body>
</html>
پیشرو سیستم
به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.
شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.
می توانید این متن را در ویرایشگر خود تغییر دهید.
ارتباط با ماهمانطور که مشاهده می‌کنید به همین راحتی عبارت لینک دار به صفحه وب اضافه کردیم.
The article is very helpful for beginners! It clearly explains HTML elements like `span` and `a` with practical examples. The step-by-step format makes it easy to follow along and understand how to implement these features in web design. Great job!
سلام – محتوای جذابی بود خیلی بهم کمک کرد.
همینطوری پرقدرت ادامه بدید.
عالی بود ممنون از شما
مرسی که کامل این موضوع را توضیح دادین
با قدرت ادامه بدین