بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

ویژگی id مشخص کننده

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

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


استفاده از شناسه id

ویژگی id یک شناسه منحصر به فرد برای یک المان HTML مشخص می کند. مقدار ویژگی id باید در سند HTML منحصر به فرد باشد.

از ویژگی id برای اشاره به یک اعلامیه سبک خاص در یک صفحه سبک استفاده می شود. همچنین توسط JavaScript برای دستیابی و دستکاری المان با شناسه خاص استفاده می شود.

نحو id این است: یک کاراکتر hash (#) بنویسید و به دنبال آن یک نام id قرار دارد. سپس ، خصوصیات CSS را در پرانتزهای فرفری تعریف کنید {}.

مثال

در مثال زیر یک المان <h1> داریم که به نام "myHeader" که به id اشاره می کند. این المان <h1> مطابق تعریف سبک myHeader# در بخش head سبک می شود:

<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>

<h1 id="myHeader">My Header</h1>

نتیجه

My Header

خودتان آزمایش کنید »

توجه : نام شناسه به حروف کوچک و بزرگ حساس است!

توجه :: نام شناسه باید حداقل شامل یک نویسه باشد و نباید حاوی فضاهای سفید (فاصله ها ، برگه ها و غیره) باشد.


تفاوت بین کلاس class و شناسه id

نام کلاس توسط چندین المان HTML قابل استفاده است ، در حالی که نام شناسه فقط باید توسط یک المان HTML در صفحه استفاده شود:

مثال

<style>
/* سبک المان را با شناسه "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* سبک همه المان ها با نام کلاس "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- المان منحصر به فرد -->
<h1 id="myHeader"> شهر های من</h1>

<!-- چندین المان مشابه -->
<h2 class="city">لندن</h2>
<p>لندن پایتخت انگلستان است</p>

<h2 class="city">تهران</h2>
<p>تهران پایتخت ایران است</p>

<h2 class="city">توکیو</h2>
<p>توکیو پایتخت ژاپن است</p>

نتیجه

شهر های من

لندن

لندن پایتخت انگلستان است

تهران

تهران پیاتخت ایران است

توکیو

توکیو پایتخت ژاپن است

خودتان آزمایش کنید »

نشانک های HTML با شناسه ID و پیوندها Links

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

اگر صفحه شما بسیار طولانی باشد ، نشانک ها می توانند مفید باشند.

برای استفاده از نشانک ، ابتدا باید آن را ایجاد کنید و سپس پیوندی به آن اضافه کنید.

سپس ، با کلیک بر روی پیوند ، صفحه با نشانک به مکان پیمایش می شود.

مثال

ابتدا یک نشانک با ویژگی id ایجاد کنید:

<h2 id="C4">فصل 4</h2>

سپس ، از همان صفحه پیوندی را به نشانک ("رفتن به فصل 4") اضافه کنید:

<a href="#C4">رفتن به فصل 4</a>

یا از صفحه دیگر پیوندی را به نشانک ("رفتن به فصل 4") اضافه کنید:

مثال

<a href="html_demo.html#C4">رفتن به فصل 4</a>
خودتان آزمایش کنید »

با استفاده از ویژگی id در جاوا اسکریپت

مشخصه id همچنین می تواند توسط JavaScript برای انجام برخی وظایف برای آن عنصر المان استفاده شود.

JavaScript می تواند با استفاده از متد ()getElementById به یک عنصر با شناسه خاص دسترسی پیدا کند:

مثال

از ویژگی id برای دستکاری متن با JavaScript استفاده کنید:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "روز خوبی داشته باشید";
}
</script>
خودتان آزمایش کنید »

تمرینات HTML

خود را امتحان کنید

تمرین:

ویژگی های صحیح HTML را اضافه کنید تا المان H1 قرمز شود.

<!DOCTYPE html>
<html>
<head>
<style>
#myheader {color:red;}
</style>
</head>
<body>

<h1 > خانه اصلی من </h1>

</body>
</html>

تمرین را شروع کنید






این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir