این آموزش در تاریخ ۱۴۰۲/۰۶/۱۸ آپدیت شده است.
آموزش کار با صفات یا Attributes در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با صفات یا Attributes در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با صفات یا Attributes در HTML
صفت یا Attribute چیزیه که درون تگ HTML قرار میگیره و میتونه یه ویژگی یا امکانی ( یا قابلیتی ) رو به اون تگ اضافه کنه، مثلا صفت href درون تگ a میتونه یه آدرس صفحه براش مشخص کنه که وقتی بروی لینک کلیک شد کاربر بره به اون آدرس.
یا مثلا صفت src در تگ img میتونه آدرس یا مسیر فایل تصویر رو مشخص کنه، پس هریک از صفت های HTML برای کاری درست شدن و هرکدون یه ویژگی یا امکانی رو به یک تگ اضافه میکنند.
پیشنهاد میکنم یه نگاهی به لیست کامل صفات HTML بیندازید.
نکاتی درباره صفات یک تگ در HTML :
- تمامی تگ های موجود در زبان HTML میتونن صفت داشته باشند
- یک صفت میتونه یه ویژگی یا قابلیت یا امکاناتی رو به یک تگ بده
- یک صفت همیشه در قسمت تگ شروع قرار میگیره
- یک صفت بطور کلی ۲ حالت داره ( یا فقط نام صفت رو مینویسیم یاهم نام صفت + مقدارش )
- صفات در HTML به حروف کوچک و بزرگ انگلیسی حساس نیستند ولی پیشنهاد میکنم حتما با حروف کوچک انگلیسی بنویسید
- در HTML5 اگر در قسمت مقدار یک صفت علامت های ” ” را نگذارید باز هم خروجی صحیح به شما نمایش داده می شود. البته به شرطی که در محتوای مقدار یک صفت، فاصله ای ایجاد نشود. و اگر فاصله ای ایجاد شود لازم و ضروری است که از ” ” استفاده شود.
- مقدار یک صفت را در بین تک کوتیشن ‘ ‘ یا دوبل کوتیشن ” ” میشه گذاشت و فرقی ندارد.حتی از هر دو در کنار هم میشه استفاده کرد.
Free-Learn
شکل نوشتاری صفت ها در HTML
- صفت هایی که دارای مقدار هستن :
|
1 |
<p title="Salam Khobi?"> Test </p> |
پس اون title میشه نام صفت بعدش یه علامت مساوی = و در نهایت ۲تا دوبل کوتیشن ” ” میزاریم و داخلش مقدارشو مشخص میکنیم. به همین سادگی
- صفت هایی که بدون مقدار هستن مثه صفت controls :
|
1 2 3 |
<audio controls> ...... </audio> |
پس الان اون صفت controls دیگه مقدار نداره پس فقط خوده صفت رو مینویسیم ، تموم شد رفت
Free-Learn
انواع صفت در زبان HTML
- صفت های عمومی
- صفت های خصوصی
- صفت های دارای مقدار
- صفت های بدون مقدار
صفت های عمومی
صفت هایی هستن که میشه ازشون تقریبا در تمامی تگ های HTML استفاده کرد ( حالا ممکنه انگشت شمار تگ هایی باشن که خاص هستن و نشه داخلشون استفاده کرد در غیراینصورت میشه در همه تگ ها استفاده کرد )
مثال از یک صفت عمومی مثه صفت style
|
1 2 3 4 5 |
<body> <p style="background-color:#123456; color:#fff; padding:10px; text-align:center;">سایت آموزشی فری لرن</p> </body> |
- صفت های خصوصی
صفت هایی هستن که فقط میشه در یک یا چندین تگ ازشون استفاده کرد و نمیشه مثلا بصورت عمومی در همه تگ ها ازشون استفاده کرد چون اصلا کاربردی ندارن، مثه صفت alt که فقط در تگ img میشه استفاده کرد.
|
1 2 3 4 5 |
<body> <img src="images/girls-1.jpg" alt="دختر سوار بر اسب"> </body> |
- صفت های دارای مقدار
در زبان HTML یسری از صفت ها هستن که دارای مقدار هستن ، یعنی وقتی صفت رو مشخص میکنیم باید مقدارشم مشخص کنیم تا بتونه عمل کنه.
مثال : همین مثال بالارو اگه توجه کنید صفت alt مقدارش اون متنی هست که داخلش نوشتیم و تموم شد رفت.
- صفت های بدون مقدار
باز در مقابل صفت هایی هستن که مقدار ندارن، میشن صفت های بدون مقدار ( یعنی فقط کافیه نام خوده صفت رو بنویسیم فقط همین دیگه مقدار نمیخواد ) مثلا در مثال زیر صفت های controls و autoplay میشه صفت های بدون مقدار
|
1 2 3 4 5 6 7 |
<body> <audio controls autoplay> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body> |
Free-Learn
خب دوستان در ادامه آموزش کار با صفات یا Attributes در HTML میخوام شمارو با برخی از صفت های پراستفاده و محبوب زبان HTML آشنا کنم و چندتا هم مثال باهمدیگه ببینیم.
صفت Href
این صفت یکی از پرکاربردترین صفت ها در تمامی صفحات وب در دنیا می باشد، ما از این صفت در تگ <a> استفاده میکنیم، برای اضافه کردن یک آدرس مقصد جهت کلیک کاربر بروی آن و انتقال آن به مکانی دیگر استفاده می شود.
البته این صفت فقط در تگ <a> مورد استفاده قرار نمیگیرد بلکه در تگ های دیگری نیز مورد استفاده قرار میگیرد که ان شاالله خودتون در بخش های بعدی استفاده ی این صفت رو در تگ های مختلف مشاهده خواهید کرد.
آموزش صفت href را بصورت کامل تر مطالعه نمایید.
|
1 2 3 4 5 |
<body> <a href="https://free-learn.ir">برو به سایت فری لرن</a> </body> |
Free-Learn
صفت Src
این صفت هم به نوبه ی خودش یکی از پرکاربردترین صفات در HTML می باشد، که در تگ <img> مورد استفاده قرار میگیرد. ما با استفاده از این صفت میتونیم آدرس یا منبع یک تصویر را مشخص نماییم، در قسمت های بعدی بطور کامل با تگ <img> آشنا خواهید شد.
آموزش صفت src را بصورت کامل تر مطالعه نمایید.
|
1 2 3 4 5 |
<body> <img src="https://files.free-learn.ir/Tryitself/html/learn/images/logo-1.png"> </body> |
Free-Learn
صفت Width و Height
همانطور که از اسم این دو صفت مشخصه برای تنظیم اندازه عرض و ارتفاع یک عنصر میتوان از آن استفاده کرد، بفرض مثال ما با استفاده از این دو صفت در تگ <img> میتوانیم اندازه تصاویرمون رو به دلخواه تنظیم نماییم.
|
1 2 3 4 5 6 7 |
<body> <img src="images/logo-1.png" width="20" height="20"> <img src="images/logo-1.png" width="50" height="50"> <img src="images/logo-1.png" width="100" height="100"> </body> |
Free-Learn
صفت Alt
در ادامه ی آموزش کار با صفات یا Attributes در HTML میخوایم با صفت Alt آشنا شویم ، این صفت نیز از صفات مهمی است که میتوان در تگ <img> استفاده کرد، با استفاده از این صفت میتوان یک متن رو به عنوان هویت یا شناسنامه برای یک تصویر مشخص کرد و اگر زمانی تصویر نمایش داده نشود آن متن به نمایش درمی آید.
شاید براتون سواله که دلیل اصلی استفاده از این صفت چیه و اینکه چرا باید از این صفت استفاده کنیم؟ اصلی ترین و مهمترین دلیل استفاده از این صفت برای موتورهای جستجوگر برای بحث سئو و بعد برای استفاده کاربرانی است که نابینا هستند و یا با استفاده نرم افزارهای مخصوص صفحات وب را گوش میدهند.
پس بطور کلی بدونید صفت Alt میتونه یه متن یا توضیح کوتاه در مورد اون عکس بده، مثلا اگه عکس من در مورد طبیعت بود خب باید در صفت Alt بنویسیم عکس طبیعت یا حالا هرچیزی
استفاده از این صفت اختیاری هست و میتونید اصلا استفاده نکنید ولی این صفت تاثیر بسیار مثبتی در سئوی یک تصویر و بطور کلی یک وبسایت و نمایش آن در موتورهای جستجوگر دارد، لذا حتما و همیشه سعی کنید از صفت Alt در تصاویرتان استفاده نمایید.
آموزش صفت alt را بصورت کامل تر مطالعه نمایید.
مثال شماره ۱ : مثلا عکس من الان یه دختری هست که سوار اسبه، پس باید در صفت Alt این توضیح رو بدم که عکسم در مورد چیه
|
1 2 3 4 5 |
<body> <img src="images/girls-1.jpg" alt="دختر سوار بر اسب"> </body> |
همانطور که مشاهده مینمایید از صفت alt استفاده کرده ایم و یک تصویر به ما نمایش داده می شود ولی هیچ حرکتی از صفت alt نمی بینیم، خب گفتیم که این صفت موقعی دس بکار میشه که تصویر نمایش داده نشود و در ضمن اصل وجود این صفت برای موتورهای جستجوگر می باشد.
حالا به دستورات زیر توجه نمایید. ( برای اینکه صفت Alt نمایش داده شود من عمدا آدرس تصویر رو دستکاری کردم که تصویر نمایش داده نشود )
|
1 2 3 4 5 |
<body> <img src="images/girls-12.jpg" alt="دختر سوار بر اسب"> </body> |
Free-Learn
صفت Style
صفت استایل یا style از نظره من یکی از جذابترین صفات در HTML می باشد که ما با استفاده از آن میتوانیم ظاهر یک عنصر رو مانند اندازه،رنگ و.. از طریق دستورات CSS مشخص نماییم. برای یادگیری کامل و قدم به قدم زبان CSS پیشنهاد میکنم آموزش های سی اس اس CSS فری لرن رو دنبال نمایید.
در قسمت های بعدی از آموزش HTML بطور کامل با آموزش نحوه استفاده از صفت Style در HTML آشنا خواهید شد ولی در اینجا فقط میخوام بطور کلی با صفت Style آشنا شوید.
مثال شماره ۱ : تنظیم رنگ زمینه و رنگ متن با استفاده از صفت style ( حواستون باشه هرچی داخل این صفت قرار میگیره دستورات زبان CSS می باشد )
|
1 2 3 4 5 6 |
<body> <h2 style="background-color:#123456; color:#fff;">سایت آموزشی فری لرن</h2> <h2 style="color:red;">سایت آموزشی فری لرن</h2> </body> |
Free-Learn
صفت Title
صفت تایتل یا عنوان یکی دیگر از صفات کاربردی در HTML می باشد، این صفت در دسته ی صفات عمومی می باشد ( عمومی یعنی میشه از این صفت در تمامی تگ های HTML استفاده کرد )
صفت Title موقعی که ماوس بروی عنصر برای چند لحظه قرار بگیرد نمایش داده می شود.
آموزش صفت Title را بصورت کامل تر مطالعه نمایید.
|
1 2 3 4 5 6 7 |
<body> <p title="سایت آموزشی فری لرن"> لطفا ماوس را برای چند لحظه روی این متن نگه دارید </p> </body> |
Free-Learn
حساسیت به حروف کوچک یا بزرگ انگلیسی
در ادامه آموزش کار با صفات یا Attributes در HTML میخوام چنتا نکته بهتون بگم که مهم هستن و باید حواستون بهشون باشه.
نام صفت ها به حروف کوچک یا بزرگ انگلیسی حساس نیستن، این یعنی اگه مثلا صفت alt رو اینجوری ALT بنویسیم بازم مشکلی نداره و خروجی میده ولی خب من پیشنهادم اینه همیشه از حروف کوچک انگلیسی استفاده کنید مثلا alt
خوب هست :
|
1 |
<img src="test.jpg" alt="test"> |
بد هست :
|
1 |
<img SRC="test.jpg" AlT="test"> |
Free-Learn
قرار دادن مقدار صفت ها درون دوبل کوتیشن
بصورت پیش فرض اگه مقدار صفت رو داخل ۲تا ” نزاریم بازم بهمون خروجی میده ( البته به شرطی که فاصله بین کلمات نباشه ) ولی بازم شما اینکارو هیچوقت انجام نده و پیشنهاد من اینه همیشه مقدار یک صفت رو داخل ” قرار بدید.
خوب هست :
|
1 |
<p title="Test"> Salam </p> |
بد هست :
|
1 |
<p title=Test> Salam </p> |
Free-Learn
استفاده از تک کوتیشن یا دوبل کوتیشن بصورت ترکیبی
ما میتونیم از تک کوتیشن ‘ داخل دوبل کوتیشن ” و یا برعکس استفاده کنیم و هیچ مشکلی نداره.
مثال : استفاده از تک کوتیشن داخل دوبل کوتیشن
|
1 |
<p title="Salam 'Man' Sadegh Hastam"> Free-Learn </p> |
مثال : استفاده از دوبل کوتیشن داخل تک کوتیشن
|
1 |
<p title='Salam "Man" Sadegh Hastam'> Free-Learn </p> |
خب دوستان عزیز و محترم به پایان آموزش کار با صفات یا Attributes در HTML رسیدیم، همونطور که گفتم تعداد صفات HTML زیاد می باشند لذا در این قسمت میتوانید لیست کامل این صفات را مشاهده نمایید.
