آموزش برنامه نویسی وب🌐: بخش html قسمت نهم (آیکون صفحه، کلاس ها، آیدی، لینک ها, Div)

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

قسمت قبلی

آیکون صفحه چیست؟

آیکون عکس کوچکی است که در برگه مروگر کنار title سایت قرار میگیرد.

برای اضافه کردن آیکون به صفحه وب، میتوانید از تگ link استفاده کنید. برای آیکون تگ link باید دو تا صفت rel و type را عوض کرد و href که آدرس آیکون هست.
بصورت زیر استفاده میشود.

نکته: تگ link داخل تگ head نوشه میشود.


<!DOCTYPE html>
<html>
<head>
  <title>Freedom Blog tutorial </title>
  <link rel="icon" type="image/png" href="https://blogfreedom.ir/icon.png">
</head>
<body>

<h1>عنوان سایت</h1>
<p>متن تستی پاراگراف.</p>

</body>
</html>

صفت rel برای مشخص کردن، ارتباط این فایل با صفحه است، که در تیکه کد بالا icon بود. به معنای آیکون صفحه. برای مثال برای لینک کردن فایل CSS از باید صفت rel را برابر با stylesheet قرار میدهیم.

صفت type که در تگ link آن را برابر با image/png قرار دادیم نوع فایل لینک شده را مشخص میکند و باید گذاشته شود.

تمرین: یک آیکون از اینترنت بصورت فایل png دانلود کرده و با کد بالا و تغییر دادن صفت href آن را به صفحه لینک کنید و نتیجه را در مرورگر مشاهده کنید.

لینک ها در اچ تی ام ال

همانطور که قبلا خواندید لینک با تگ a تعریف میشوند در جدول زیر سه تا از مهم ترین صفات تگ a نوشته شده است.

نام صفت	توضیحات
صفت download	با دادن این صفت به تگ a فایل یا صفحه لینک شده بعد از کلیک کاربر بر روی او دانلود میشود.
صفت target	برای نوع باز شدن لینک مورد استفاده قرار میگیرد و برای مثال با دادن مقدار _blank لینک در تب جدید باز میشود
صفت hreflang	این صفت زبان صفحه لینک شده را مشخص میکند و مقادیرش همانند صفت lang است.

کلاس ها در اچ تی ام ال

کلاس ها در اچ تی ام ال با استفاده از صفت class به یک عنصر اختصاص داده میشود.

کلاس ها معمولا برای استفاده در CSS استفاده میشوند و برای مثال میتوان در CSS برای یک کلاس خاص رنگ متن تعریف کرد و هر عنصری که اون کلاس رو با استفاده از صفت class داشته باشه اون ویژگی های تعریف شده در CSS بر روی اون اعمال میشه.

به مثال زیر دقت کنید.


<html>
<head>
<style>
.iran-city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="iran-city">
  <h2>Tehran</h2>
  <p>Tehran...</p>
</div>

<div class="iran-city">
  <h2>Qom</h2>
  <p>Qom...</p>
</div>

<div class="iran-city">
  <h2> Mashhad</h2>
  <p>Mashhad...</p>
</div>

</body>
</html>

همانطور که در بالا دیدید ما یکبار کد CSS نوشتیم و فقط با اختصاص دادن یک کلاس به عنصر ها ویژگی های مشترک رو اعمال کردیم. بجای اینکه برای هر کدام این کد ها رو تکرار کنیم.

پس میتونیم بگیم کلاس ها، برای دادن ویژگی های مشترک به یکسری عنصر استفاده میشود.

آیدی‌ها در اچ تی ام ال

آیدی‌ها در HTML با استفاده از صفت id به یک عنصر اختصاص داده می‌شوند. هر آیدی باید منحصر به فرد باشد و تنها به یک عنصر در یک صفحه HTML تعلق داشته باشد.

آیدی‌ها معمولاً برای شناسایی و استایل‌دهی به عناصر خاص استفاده می‌شوند. به عنوان مثال، می‌توانید با استفاده از CSS به یک عنصر خاص با آیدی مشخص، استایل‌های خاصی اعمال کنید.

به مثال زیر دقت کنید:

 
<!DOCTYPE html>
<html>
<head>
  <style>
    .iran-city {
      background-color: tomato;
      color: white;
      border: 2px solid black;
      margin: 20px;
      padding: 20px;
    }

    #special-city {
      background-color: lightblue;
      color: darkblue;
      border: 2px dashed blue;
      margin: 20px;
      padding: 20px;
    }
  </style>
</head>
<body>

  <div class="iran-city">
    <h2>Tehran</h2>
    <p>Tehran...</p>
  </div>

  <div class="iran-city" id="special-city">
    <h2>Isfahan</h2>
    <p>Isfahan...</p>
  </div>

  <div class="iran-city">
    <h2>Qom</h2>
    <p>Qom...</p>
  </div>

  <div class="iran-city">
    <h2>Mashhad</h2>
    <p>Mashhad...</p>
  </div>

</body>
</html>

در این مثال، ما یک آیدی به نام special-city به یک عنصر div اختصاص داده‌ایم. سپس با استفاده از CSS، استایل‌های خاصی برای این آیدی تعریف کرده‌ایم. به این ترتیب، تنها عنصر با این آیدی تحت تأثیر استایل‌های تعریف شده قرار می‌گیرد.

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

در مقایسه با کلاس‌ها، که می‌توانند به چندین عنصر اختصاص داده شوند، آیدی‌ها باید منحصر به فرد باشند و تنها به یک عنصر تعلق داشته باشند.

تمرین: یک آیدی برای یکی از عناصر موجود در کد قبلی اضافه کنید و با استفاده از CSS، استایل خاصی برای آن تعریف کنید.

DIV ها در HTML

در دنیای طراحی وب، تگ <div> یکی از مهم‌ترین و پرکاربردترین عناصر HTML است. این تگ به ما این امکان را می‌دهد که محتوا را به بخش‌های مختلف تقسیم کنیم و به راحتی استایل و طراحی را بر روی آن‌ها اعمال کنیم. در این مقاله، به بررسی ساختار و کاربردهای تگ <div> می‌پردازیم و چند مثال عملی ارائه می‌دهیم.

ساختار تگ DIV

تگ <div> به صورت زیر تعریف می‌شود:

<div>
    <!-- محتوا -->
</div>

این تگ می‌تواند شامل هر نوع محتوایی باشد، از جمله متن، تصاویر، و دیگر تگ‌های HTML.

کاربردهای DIV

تقسیم‌بندی محتوا: با استفاده از تگ <div>, می‌توانیم محتوا را به بخش‌های مختلف تقسیم کنیم. این کار به ما کمک می‌کند تا طراحی صفحه را سازماندهی کنیم.
استایل‌دهی: با استفاده از CSS، می‌توانیم استایل‌های مختلفی را به تگ‌های <div> اعمال کنیم. این کار به ما این امکان را می‌دهد که ظاهر بخش‌های مختلف صفحه را به راحتی تغییر دهیم.
ایجاد لایه‌ها: تگ <div> می‌تواند به عنوان یک لایه برای قرار دادن دیگر عناصر HTML استفاده شود. این کار به ما این امکان را می‌دهد که عناصر را به صورت دلخواه در صفحه قرار دهیم.

در واقع DIV ها برای نگهداری دیگر عناصر استفاده میشود. مانند یک کانتینر.
به مثال زیر توجه کنید:


<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" c>
    <title>گالری تصاویر</title>
    <style>
        .gallery {
            display: flex;
            flex-wrap: wrap;
        }
        .gallery div {
            margin: 5px;
            border: 1px solid #ccc;
            width: 30%;
        }
        .gallery img {
            width: 100%;
        }
    </style>
</head>
<body>

<div class="gallery">
    <div>
        <img src="image1.jpg" alt="تصویر 1">
    </div>
    <div>
        <img src="image2.jpg" alt="تصویر 2">
    </div>
    <div>
        <img src="image3.jpg" alt="تصویر 3">
    </div>
</div>

</body>
</html>

پایان
قسمت بعدی