فیلم آموزشی id در HTML و class در HTML

در این فیلم آموزشی ابتدا با مفهوم کلی id و class در HTML آشنا می شویم.

سپس id در html را توضیح می دهیم و کاربرد id در HTML را به صورت کامل بررسی می کنیم.

در ادامه این فیلم دستور class در html را معرفی می کنیم. کاربرد class در HTML را مطرح می کنیم.

همچنین فرق id و class در HTML را با ذکر مثال آنالیز و تحلیل می کنیم.

id و class در HTML

مقدمه: فیلم آموزش id در HTML و کاربرد class در HTML

در این ویدئو آموزشی ابتدا با تعریف id در HTML آشنا می شویم. این فیلم آموزشی بخش دوم از قسمت هشتم آموزش رایگان HTML در سایت وبمستر وردپرس می باشد.

آموزش دوره HTML را با معرفی زبان HTML و تاریخچه ی آن شروع کردیم.

برای دسترسی به کلیه فیلم های آموزش HTML می توانید از این لینک استفاده کنید.

در ادامه این آموزش با تعریف class در HTML به صورت مفهومی آشنا می شویم. سپس کاربرد class در HTML را خواهیم گفت.

همچنین تفاوت id و class در HTML بیان می کنیم.

در تمامی این بخش ها ما با استفاده از inspector مروگر کروم، مفهوم id و صفت class در HTML را آموزش می دهیم.

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

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

توجه: پیشنیاز برای یادگیری HTML

در نظر داشته باشید برای اینکه بتوانید بر مفاهیم HTML مسلط شوید، باید بدانید که وب از چه اجزایی ساخته شده است و چگونه کار می کند.

در واقع می توان گفت برای وبمستر حرفه ای شدن و وارد شدن به سایر مباحث همچون HTML می باید بر مفاهیم وب و نحوه کار اجزا آن باهم آشنا شوید. به همین منظور، پیشنیاز درک بهتر این دوره، دوره آموزش مقدمات وب می باشد.

برای این منظور می توانید به بخش آموزش مقدمات وب در سایت کلوپ وبمستران وردپرس مراجعه کرده و در این دوره رایگان شرکت نمایید.

دوره آموزشی HTML کاربردی برای وبمستران

در کمتر از ۹ ساعت مثل یک برنامه نویس حرفه ای به HTML مسلط شوید!!!

اگر وبمستر، سئوکار، دیجیتال مارکتر یا صاحب کسب و کار آنلاین هستید، اولین چیزی که باید با آن آشنا باشید، یادگیری HTML می باشد. در غیر این صورت از پس هیچ کدام از کارهای وبمستری خود بر نخواهید آمد. برای ثبت نام در دوره کاربردی HTML در کمتر از ۹ ساعت، از لینک روبرو استفاده کنید.
دوره آموزشی HTML کاربردی برای وبمستران

نمایش فیلم آموزشی کاربرد id در HTML

در ادامه می توانید فیلم آموزشی رایگان دستور id در HTML را که به همراه توضیح و مثال می باشد، در زیر مشاهده فرمایید. در صورتی که نیاز به دانلود آن دارید، می توانید از لینک های پایین صفحه استفاده نمایید:

تگ در HTML

توجه : پیشنیاز آموزش « class و id در HTML »

برای درک دقیق و عمیق آموزش id و class در HTML، باید بدانید که تگ در HTML چیست و ساختار کلی آن به چه شکلی می باشد. اگر با تگ در HTML آشنایی ندارید جای نگرانی ندارد، می توانید به قسمت دوم از سری آموزش های HTML مراجعه کرده یا از طریق لینک روبرو با تگ head در HTML آشنا شوید.

تگ در HTML

فیلم آموزشی رایگان id و class در HTML، دارای بخش هایی به شرح زیر می باشد:

  • id در HTML

  • class در HTML

  • تفاوت id و class در HTML

id در HTML

id در html چیست؟

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

منظور از منحصر به فرد بودن این است که یک id فقط باید بر روی یک المنت مورد استفاده قرار بگیرد.

ویژگی id در زبان برنامه نویسی CSS و جاوا اسکریپت کاربرد فراوانی دارد. برای تعریف id از # استفاده می کنیم.

از سلکتور id در عناصر HTML به صورت زیر استفاده می شود:

<element id="myid">
مفهوم id در HTML

id در HTML چه کاربردی دارد؟

id یکی از پرکاربردترین اتریبیوت های HTML می باشد و در CSS و javascript بسیار استفاده می شود.

ویژگی id در HTML

در این بخش به معرفی ویژگی id در html می پردازیم:

تعریف id در CSS :

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

آدرس دهی به قسمتی از صفحه توسط id :

با استفاده از id می توان به بخشی از صفحه وب دسترسی پیدا کرد. برای انجام این کار شما id تگ مدنظر را در انتهای URL صفحه قرار می دهید. برای آشنایی با مفهوم آدرس دهی در HTML به صفحه آموزش HTML رجوع کنید.

نقش id در جاوا اسکریپت :

اگر شما با زبان برنامه نویسی جاوا اسکریپت کار می کنید بدون شک به صفت id برخورد کرده اید. برای تغییر روی تگ های صفحه، کافی است یک id برای آن تگ تعریف کنیم و آن را در اسکریپت قرار دهیم. در بخش های قبلی در مورد فراخوانی تگ script در HTM به طور مفصل بحث کرده ایم.

نکته مهم : 

ممکن است به اشتباه به صفت id، تگ id نیز گفته شود. در واقع id یک اتریبیوت و صفت برای تگ های HTML می باشد. اما به دلیل اینکه این اصطلاح رایج است ما هم در این مقاله از لفظ تگ id در HTML استفاده می کنیم.

<!DOCTYPE html>
<html>
<head>
<style>

p#wpwebmaster{
background-color:red;
color:yellow;
padding:10px;
}

</style>
</head>
<body>

<p id="wpwebmaster">
wpwebmaster.ir
</p>

</body>
</html>
<body>

<p id="myid">hello</p>
<button onclick="Result()">کلیک کن</button>

<script>
function Result() {
document.getElementById("myid").innerHTML = "تغییر کرد";
}
</script>

</body>

قوانین id در HTML

در استفاده از تگ id در html قوانینی وجود دارد که رعایت آن ضروری است.

  • مقدار id باید با حروف a-z یا A-Z شروع شود.

  • پسوند مقدار id می تواند از حروف، اعداد و علامت های خاص باشد.

  • مقدار id برای هر عنصر باید یکتا و واحد باشد.

  • بین نام id نباید فاصله قرار بگیرد.

کاربرد id درhtml
تگ id در html

bookmark با استفاده از id و link

در این بخش از bookmark با استفاده از id لینک دهی می کنیم. به وسیله bookmarks خوانندگان می توانند به قسمت های خاصی از یک صفحه وب پرش کنند. بوک مارک ها در صفحات وب طولانی بسیار کاربردی و مفید هستند.

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

ابتدا یک id به تگ مورد نظر برای ایجاد Bookmark اضافه می کنیم:

<h2 id="C4">Chapter 4</h2>

سپس از همان صفحه لینکی به بوک مارک می دهیم:

<a href="#C4">Jump to Chapter 4</a>

یا از صفحه دیگری لینکی به بوک مارک ایجاد شده در صفحه می دهیم:

<a href="html_demo.html#C4">Jump to Chapter 4</a>

تفاوت name و id در html

دو تفاوت اساسی بین name و id در HTML وجود دارد:

۱- id یک صفت uniqe می باشد، یعنی باید فقط به یک المنت نسبت داده می شود ولی در name بدین شکل نیست.

۲- id بیشتر برای استایل گذاری روی المنت ها استفاده می شود یا در جاوا اسکریپت بکار می رود. البته در جاوا اسکریپت از طریق name هم می توانیم به المنت دسترسی داشته باشیم.

۳- از name در فرم ها استفاده می شود.

class در HTML

class در html چیست؟

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

از کلاس ها در javascript نیز استفاده می کنیم. برای تعریف class از نقطه (.) استفاده می کنیم. class در عناصر inline کاربرد دارد.

از سلکتور class در HTML به صورت زیر استفاده می شود:

<element class="نام کلاس">
کاربرد class درhtml

class در HTML چه کاربردی دارد؟

class نیز همانند id یکی از پرکاربردترین اتریبیوت ها و صفت های HTML می باشد و در CSS و javascript بسیار استفاده می شود.

صفت class در HTML

در این بخش به بررسی صفت class در html می پردازیم:

Multiple class:

می توان برای تگ ها و المنت ها در HTML چندین کلاس تعریف کرد.

یک class برای چند المنت :

می توان برای چندین المنت متفاوت، یک کلاس یکسان تعیین کرد.

class در CSS :

برای تعریف کلاس ها در css باید در ابتدای نام آن ها از نقطه استفاده کنیم.

class در جاوا اسکریپت :

برای دسترسی به المنت ها به وسیله کلاس در جاوا اسکریپت باید از دستور ()document.getElementsByClassName استفاده کنیم.

<style>
.myclass {
  background-color: red;
  color: white;
  padding: 20px;
} 
</style
<script>
function myFunction() {
  var x = document.getElementsByClassName("myclass");
}
</script>

قوانین class در HTML

در استفاده از تگ class در html قوانینی وجود دارد که رعایت آن ضروری است.

  • نام class باید با حروف کوچک و بزرگ انگلیسی (a-z یا A-Z) شروع شود.

  • پسوند نام class می تواند از حروف، اعداد و علامت های خاص باشد.

  • نام کلاس نباید با اعداد آغاز شود.

تگ class در HTML

تگ div class در HTML

برای استفاده از class در تگ div باید داخل این تگ یک کلاس تعریف کنیم و با کدهای CSS استایل گذاری کنیم. برای آشنایی با تگ div به مقاله های قبلی رجوع کنید.

تگ div class به صورت زیر است:

div.wpwebmaster{
background-color:yellow;
color:black;
text-align:left;
padding:15px;
}

</style>
</head>
<body>

<div class="wpwebmaster">
www.wpwebmaster.ir
</div>

تفاوت id و class در HTML

در این بخش به بررسی تفاوت میان id و class می پردازیم:

فرق id و class در HTML چیست؟

۱- در سند HTML یک تگ فقط می تواند یک id به خود اختصاص دهد. ولی در کلاس یک تگ می تواند چندین class داشته باشد.

۲- یک المنت همزمان هم می تواند Class داشته باشد و هم id.

۳- فرق id و class در سند html و css در اختصاصی و عمومی عمل کردن برای المنت ها می باشد.

۴- id با علامت # شناسایی می شود اما class با نقطه (.) معرفی می شود.

تفاوت id و class در HTML
فرق id و class در HTML

نتیجه گیری برای فیلم آموزش «id و class در HTML»

در این بخش به معرفی اتریبیوت id در HTML می پردازیم و کاربرد id در html را مطرح می کنیم.

همچنین دستور class در HTML را معرفی می کنیم و کاربرد اتریبیوت class در HTML را با مثال توضیح می دهیم.

تفاوت id و class در HTML را به صورت جزیی بررسی می کنیم.

ممکن است به نظر شما بعضی از موارد درست نبوده و یا شما موارد بیشتری را بدانید که ما فراموش کرده ایم تا در این فیلم آموزشی، قرار دهیم.

اگر شما از این موارد آگاه هستید، حتما در بخش نظرات عنوان کنید تا آن را به این مقاله اضافه کنیم. در ضمن اگر این مقاله را مفید دیدید، حتما آن را به دوستان خود معرفی کرده یا در شبکه های اجتماعی به اشتراک بگذارید.

نظر شما در مورد این مقاله چیست؟

در ساخت و تهیه این مطلب فیلم آموزش مقدمات وبمستری از مراجع زیر استفاده شده است. شما می توانید با مراجعه به آن ها، اطلاعات بیشتری را بدست آورید:

راهنما برای خواندن سایر مقالات سایت به صورت دسته بندی شده:

شما می توانید از طریق لینک های کاربردی زیر به سایر مقالات سایت که کاملا بصورت طبقه بندی شده وجود دارد، مراجعه نموده و از آن ها استفاده کنید:

بازگشت به صفحه بلاگ وبمستر وردپرس