0

بلاگ

خدمات شبکه فراز نتورک > دانلود رایگان > وب مستر > آموزش HTML & CSS > صفت ها در HTMLقسمت یک

صفت ها در HTMLقسمت یک

2021/01/01
ارسال شده توسط
آموزش HTML & CSS
994 بازدید
صفت ها در HTMLقسمت یک

صفت ها در HTMLقسمت یک

با عرض سلام خدمت تمامی همراهان مباحث آموزشی طراحی سایت با HTML در جلسه گذشته با ساختار یک صفحه اچ تی ام ال آشنا شدیم

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

صفت ها در HTML:

به وسیله ی صفت ها در HTML می‌توانیم ویژگی ها و تنظیمات خاصی را به تگ های HTML اعمال نماییم

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

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

انواع صفت ها در اچ تی ام ال (HTML) :

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

  • صفت های عمومی  :

    این صفات در بین تگ های اچ تی ام ال مشترک هستند و در تمام تگ ها کار یکسانی را انجام می‌دهند

    به عنوان مثال صفت align برای تگ p نحوه چینش متن پاراگراف را کنترل می‌کند.

  • صفت های اختصاصی :

    این صفات منحصر به تگ های خاصی هستند به عنوان مثال صفت type یک صفت اختصاصی برای تگ input محسوب می‌شود .

صفت ها در HTML از دو بخش Name و Value تشکیل می‌شوند و همیشه در تگ آغازین به کار می‌روند.

  • Name: این بخش معرف نام صفت است مثلا صفت class یک صفت عمومی است که همه تگ های اچ تی ام ال از این صفت استفاده می‌نمایند.
  • Value : این بخش مقداری را برای صفت تعیین می‌کند مثلا مقدار rtl برای صفت dir باعث راست چین شدن متن پاراگراف می‌شود.

شکل کلی تعریف صفات برای عناصر به این صورت است:

<tagname attribute1='value' attribute2='value'> content </tagname>

مثال زیر پاراگراف را راست چین می‌کند:

<p align='right'> معرفی صفات در اچ تی ام ال (HTML) </p>
نکته :
  • توجه داشته باشید که صفت ها همیشه باید داخل دابل کوتیشن (” “) و یا سینگل کوتیشن (‘ ‘) قرار بگیرند و با علامت = به نام صفت منتسب شوند.
  • صفات HTML نسبت به کوچکی و بزرگی حروف حساس نیستند اما W3C (کنسرسیوم شبکه جهانی وب) که وظیفه استانداردسازی HTML و CSS را برعهده دارد توصیه می‌کند که از حروف کوچک (LowerCase) برای نام گذاری صفات استفاده کنید.

 

معرفی صفات های عمومی در HTML بخش اول

صفت id در html چیست ؟ چگونه برای تگ های html کلاس تعریف کنیم ؟

تفاوت صفت id و class در چیست ؟ صفت dir در html چیست ؟  برای نوشتن متن از سمت راست به چپ در html چیکار کنیم ؟

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

 

آموزش صفت dir ، class ، id و lang

همانطور که گفتیم صفت های عمومی در بین تگ های HTML مشترک هستند

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

 

صفات عمومی در HTML :

  • صفت id :

    با استفاده از این صفت می توانیم یک شناسه ی منحصر به فرد به تگ های اچ تی ام ال نسبت دهیم

  • توجه داشته باشید که این شناسه به هیچ عنوان نباید تکراری باشد یعنی دو عنصر مختلف نباید id یکسانی داشته باشند به مثال زیر توجه کنید :
<p id='p این یک پاراگراف است <' 1 </p>

  • صفت class :

    با استفاده از این صفت می‌توانیم کلاسی که به زبان سی اس اس (CSS) نوشته شده است را به یک یا چند تگ HTML نسبت دهیم

    در مثال زیر مقدار صفت class برای تگ p  را برابر با مقدار red قرار داده ایم .

<p class='red'> این یک پاراگراف است </p>

  • صفت dir :

    این صفت جهت یک پاراگراف را کنترل می کند صفت dir دارای دو مقدار rtl و ltr است.

  • rtl : مقدار rtl جهت یک عنصر را ار راست به چپ می‌کند.
  • ltr : مقدار ltr جهت یک عنصر را از چپ به راست می‌کند.
<p dir='rtl'> این پاراگراف راست چین است. </p>

  • صفت lang :

    با استفاده از این صفت می توانیم زبان یک عنصر یا المان را مشخص نماییم این صفت یک کلمه دو حرفی را به عنوان مقدار می پذیرد

    این مقدار برای زبان فارسی fa و برای زبان انگلیسی en می‌باشد. توجه داشته باشید که موتورهای جست و جو با استفاده از این صفت می توانند زبان استفاده شده در سایت را متوجه شوند.

<html lang='fa'>
<p lang='en'>English Paragraph</p>
</html>

توجه :

مقدار صفت dir به صورت پیش فرض (ltr) یعنی از چپ به راست است.

پس در صورتی که شما جهت یک پاراگراف را با استفاده از این صفت تعیین نکنید پاراگراف به صورت پیش فرض چپ چین می‌شود.

برای استایل دهی عناصر و تگ های HTML از زبان CSS استفاده می‌شود .

معرفی صفت های عمومی در HTML بخش دوم

صفت style چیست ؟ چگونه از صفت style در html استفاده نماییم ؟

صفت عمومی title چیست ؟ صفت title در html چه کاربردی دارد ؟ از صفت hidden در html چه استفاده می شود ؟

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

آموزش صفات عمومی contenteditable ، title ، style و صفت hidden

در جلسه گذشته به معرفی تعدادی از صفت‌های عمومی در HTML پرداختیم

در این جلسه قصد داریم به ادامه ی مبحث صفت‌های عمومی در HTML بپردازیم.

در بالا با صفت های عمومی dir ، class، id، و lang در HTML آشنا شدیم حال می خواهیم

مابقی صفت‌های عمومی در HTML را به شما عزیزان آموزش دهیم.

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

  • صفت title:

    زمانی که بخواهیم درباره ی یک المان یا عنصر توضیحاتی را ذکر کنیم تا هنگامی که کاربر اشاره گر موس خود را بر روی آن عنصر قرار داد

    این توضیحات به او نشان داده شود از صفت title درون تگ های HTML استفاده می‌کنیم به مثال زیر دقت کنید :

    <p title="آموزش طراحی سایت">faraznetwork.com</p>

    • صفت style :

      با استفاده از صفت style می‌توانیم چندین ویژگی CSS را بر روی تگ های HTML اعمال نماییم

      این صفت ، ویژگی های CSS و مقدارشان را به عنوان مقدار می پذیرد در صورتی که بخواهیم از چندین ویژگی CSS

      در صفت style استفاده نماییم ویژگی های CSS باید با علامت سیمی کالن (;) از هم جدا شوند به مثال های زیر توجه کنید :

      در مثال ۲ دو ویژگی color و text-align با سیمی کالن از هم جدا شده‌اند.

      <p style="color:red"> این یک پاراگراف است </p>

<h1 style="color:blue;text-align:center"> این یک پاراگراف است </h1>

      صفت ها در HTML

    • صفت hidden:

      با استفاده از صفت hidden می‌توان عناصر را از دید کاربر مخفی کرد این صفت دو مقدار true و false را به عنوان مقدار می پذیرد

      زمانی که مقدار صفت hidden برابر با true باشد عنصر یا المان مخفی می شود و زمانی که مقدارش برابر false است

      المان به کاربر نشان داده می‌شود درصورتی که صفت hidden را همانند مثال ۲ بدون مقداردهی استفاده کنیم

      مقدار آن به صورت پیش فرض true در نظر گرفته می‌شود . به مثال های زیر توجه کنید :

      <p hidden='true'> این پاراگراف مخفی است </p>

<p hidden> این پاراگراف مخفی است </p>

    • صفت contenteditable:

      با استفاده از صفت contenteditable می‌توانیم محتوای یک پاراگراف را برای کاربر قابل ویرایش نماییم

      این صفت دو مقدار true و false را به عنوان مقدار می‌پذیرد زمانی که مقدار contenteditable برابر true است

      متن پاراگراف برای کاربر قابل ویرایش می‌شود و وقتی که مقدارش برابر false باشد

      محتوای پاراگراف غیر قابل ویرایش است درصورتی که صفت contenteditable را همانند مثال ۲ بدون مقداردهی استفاده کنیم

      مقدار آن به صورت پیش فرض true در نظر گرفته می‌شود . به مثال زیر توجه کنید :

       <p contenteditable='true'> این پاراگراف قابل ویرایش است </p>    (قابل ویرایش)

<p contenteditable> این پاراگراف قابل ویرایش است </p>            (قابل ویرایش)

<p contenteditable='false'> این پاراگراف قابل ویرایش است </p>      (غیر قابل ویرایش)

      توجه :

      • صفت hidden در مرورگر Internet Explorer ورژن 10 و پایین تر پشتیبانی نمی شود .
      • برای استایل دهی عناصر و تگ های HTML از زبان CSS استفاده می‌شود .

       

      آشنایی با کلاس ها در HTML

    

    • 



برای استایل دهی و سفارشی سازی تگ های HTML چه کار هایی باید انجام دهیم؟


آیا می‌توانیم تگ های HTML‌ را سفارشی سازی کنیم؟


کلاس ها یا Class ها در HTML به چه چیز هایی می‌گوییم؟


مثلا قصد دارید یک بک گراند را بنفش کنید، چطور میتوانیم از کلاس ها جهت رنگ دهی و استایل دهی استفاده کنیم؟


1 کلاس ها در زبان نمادگذاری HTML


2 انتخاب یک تگ خاص توسط نام class در CSS


3 استفاده از چند کلاس به صورت همزمان


4 استفاده برای چندین تگ


5 استفاده از خاصیت class در جاوا اسکریپت




کلاس ها در زبان نمادگذاری HTML


از خاصیت کلاس معمولا برای تعریف استایل بر روی تگ ها استفاده می‌شود.


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


امکان استفاده از کلاس در تگ های برخط (inline) نیز وجود دارد.


برای نمونه در مثال زیر ۳ تگ div داریم که با یک کلاس یکسان تعریف شده‌اند.


<!DOCTYPE html>
<html>
<head>
<style>
.cities {
  background-color: black;
  color: white;
  margin: 20px;
  padding: 20px;
} 
</style>
</head>
<body>

<div class="cities">
  <h2>Karaj</h2>
  <p>Karaj is a city in Iran.</p>
</div>

<div class="cities">
  <h2>Tehran</h2>
  <p>Tehran is a city in Iran.</p>
</div>

<div class="cities">
  <h2>Ardabil</h2>
  <p>Ardabil is a city in Iran.</p>
</div>

</body>
</html>


از خاصیت کلاس معمولا برای تعریف استایل بر روی تگ ها استفاده می‌شود.


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


انتخاب یک تگ خاص توسط نام class در CSS


<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
</style>

<h2 class="city">Karaj</h2>
<p>Karaj is a city in Iran.</p>

<h2 class="city">Tehran</h2>
<p>Tehran is a city in Iran.</p>

<h2 class="city">Ardabil</h2>
<p>Ardabil is a city in Iran.</p>


انتخاب یک تگ خاص توسط نام class




استفاده از چند کلاس به صورت همزمان


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


<h2 class="city main">Tehran</h2>
<h2 class="city">Ahvaz</h2>
<h2 class="city">Qom</h2>


استفاده برای چندین تگ




می توان برای چند تگ متفاوت، کلاس با نام یکسان تعریف کرد و با معرفی تگ در ابتدای نام مانند h2.city برای هر کلاس یک استایل جداگانه تعریف کرد.


<style> 
h2.city {   
background-color: tomato;  
color: white;   
padding: 10px; }
p.city {   
background-color: blue;  
color: white;   
padding: 10px; }
 </style>

<h2 class="city">Qom</h2>
<p class="city">Qom is a city in Iran.</p>


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




استفاده از خاصیت class در جاوا اسکریپت


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


برای دسترسی به تگ های خاص توسط نام کلاس در جاوا اسکریپت باید از تابع getElementsByClassName() استفاده کنید.


<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>




تا اینجا با انواع کلاس ها آشنا شدیم :


    

  • استفاده از یک کلاس برای یک تگ
    • 

  • استفاده از یک کلاس برای چند تگ با امکان شخصی سازی بر اساس تگ
    • 

  • استفاده از چند کلاس هم زمان
    • 

  • استفاده از کلاس‌ در جاوا اسکریپت
    • 



در ادامه در رابطه با آی دی ها صحبت خواهیم کرد.


 


آشنایی با ID ها در HTML


فرق ای دی id با کلاس class چیست؟


خاصیت ID چیست؟ آیا می‌توانیم از خاصیت ID در تمامی تگ های HTML استفاده کنیم؟


تفاوت ID ها با Class ها در html چیست؟ در این مقاله با ID ها آشنا می‌شویم و تفاوت آی دی با کلاس را بررسی می‌کنیم.


    

  • 1 خاصیت ID در HTML
    • 

  • 2 قوانین استفاده از خاصیت آی دی

      

    • 2.1 بخش “ارتباط با ما” و خاصیت ID :
      • 

    

    • 



خاصیت ID در HTML


تا اینجا با کلاس ها آشنا شدیم و نحوه استفاده از آن‌ها را بررسی کردیم. در اینجا می‌خواهیم در رابطه با آی دی ها صحبت کنیم.


با توجه به تعریف تعیین شده در w3c ، خاصیت ID یک شناسه یکتا برای تگ محسوب می شود.


این خاصیت ساده کارایی بسیار زیادی در سطح وب دارد. از جمله کار هایی که می توان با خاصیت id انجام داد به شرح زیر هستند:


انتخاب کننده Style Sheet :


بیشترین استفاده خاصیت id در اینجا است. به خاطر یکتا بودن مقدار داخل id می توان مطمئن بود


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


که این امر به خودی خود به زمان زیادی نیاز دارد و حتی در هنگام تغییر استایل برای یک تگ می تواند چالشی جدی باشد.


به همین دلیل روش های جدید برپایه استفاده از کلاس ها برای تعیین استایل هستند.


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


برای لینک دهی به بخش خاص صفحه:


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


حالت دیگر این است که پس از نوشتن شناسه برای یک تگ، از تگ a استفاده کنید


و در ابتدای مقدار href یک علامت # و سپس مقدار شناسه از پیش تعیین شده را بنویسید.


مرجعی برای یک اسکریپت:


در این حالت اگر شما در حال نوشتن توابع جاوا اسکریپت هستید،


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


و در اسکریپت از آن استفاده کنید.


سایر فرآیند ها: خاصیت id به شما اجازه انعطاف پذیری بالایی در استفاده از تگ ها را می دهد.


به عنوان مثال قصد دارید بخشی از محتوای صفحه وب را در یک دیتابیس ذخیره کنید.


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


قوانین استفاده از خاصیت آی دی


برای مقدار دهی خاصیت id قوانینی وجود دارند که رعایت آن ها برای حفظ عملکرد صفحه وب ضروری است.


    

  • مقدار id باید با حروف a-z یا A-Z آغاز شوند.
    • 

  • کاراکتر های دنباله می توانند از حروف،اعداد و بعضی از علامت های خاص(-,_,:,.) باشند
    • 

  • هر مقدار خاصیت آی دی در سراسر صفحه باید یکتا باشد.
    • 



بخش “ارتباط با ما” و خاصیت ID :


<p id="contact-section">ارتباط با ما فرازنتورک </p>


برای پرش به بخش ارتباط با ما‌ برای استایل دهی می توان از یکی از کد های زیر استفاده کرد


div#contact-section { background: #0cf;}


یا


#contact-section { background: #0cf;}


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


در کد اول یک تگ div به عنوان هدف در نظر گرفته شده است.


و در کد دوم همچنان تگ مورد نظر با شناسه “contact-section” مورد هدف است.


برای دسترسی به یک تگ از طریق جاوا اسکریپت، باید از تابع getElementById() استفاده کنید.


document.getElementById("contact-section")


همچنین برای اینکه بتوانیم از بخشی از صفحه به ارتباط با ما منتقل شویم، میتوانیم از آی دی ها استفاده کنیم که در مثال زیر نمونه را مشاهده می‌کنید:


<a href="#contact-section"> بخش تماس با ما </a>
مطالب مرتبط :
1-تگ های قالب بندی متن قسمت اول 
2- صفت ها در HTML قسمت دوم




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


جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.


نویسنده: راحله تبریزی



							


			


			


							

اشتراک گذاری: 
        
            
        
        
            
        
        
            
        
      
		
                
			
		


		
				


					

						برچسب ها:
											

		

		


								
			





                            
                                


                                    
                                        
                                        
                                        
                                    
                                

                                

                                    در تلگرام

                                  کانال ما را دنبال کنید!
                                

                            





                            
                                

                                  
                                      
                                      
                                      
                                      
                                  
                                

                                

                                    در اینستاگرام

                                  ما را دنبال کنید!
                                

                            











			
			
			

	

			

	        
مطالب زیر را حتما مطالعه کنید

	    


			

					

							


                                      

                      
                    

									                    

                      
                    

									                    

                      
                    

									                    

                      
                    

									                    

                      
                    

									                    

                      
                    

																

					

			

	




			

			


	


                


					

		

							
					


		

							
					

	

	
				                    
					



	

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