مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
مفهوم Attribute ها در HTML چیست - به همراه مثال
در آموزش قبل، ما چند تگ HTML و استفاده از آنها مانند تگهای عنوان <h1>, <h2> و تگ پاراگراف <p> و سایر تگ ها را مشاهده نمودیم.
ما تا کنون از آنها به ساده ترین شکل ممکن استفاده کرده ایم، اما اکثر تگ های HTML می توانند دارای ویژگی هایی (attribute) نیز می باشند که درواقع آنها، بیت های اضافی از اطلاعات هستند.
یک مشخصه (attribute) برای تعریف ویژگی های یک عنصر HTML استفاده می شود و داخل "تگ باز کننده" عنصر قرار می گیرد. تمام صفات (attribute) از دو بخش تشکیل شده اند – نام (name) و ارزش (value)
شما می توانید برای عنصر یا property خود یک نام (name) تنظیم کنید. به عنوان مثال، عنصر <p> در مثال دارای attribute یا صفتی است که نام آن align است، که شما می توانید از آن برای هم ترازیِ پاراگرافِ خود در صفحه استفاده کنید.
- ارزش (value) چیزی است که مقدار property را تعیین می کند و همیشه در علامت نقل قول یا quotation قرار می گیرد. مثال زیر ، سه مقدار برای attribute یا ویژگی align نشان می دهد: left , center , right .
- نام (name) و مقدار(value) مشخصه ها یا attributeها به حروف کوچک و بزرگ حساس نیستند (case-insensitive).
با این حال، کنسرسیوم جهانی وب ( w3cیا the World Wide Web Consortium ) توصیه می کند مقادیر خصوصیات یا attributeها در HTML 4 به صورت حروف کوچک نوشته شوند.
مثال :
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
ویژگی های اصلی
چهار ویژگی اصلی که می توانند در بسیاری از عناصر HTML استفاده شوند (البته نه همه) -
- شناسه یا id
- عنوان یا title
- کلاس یا class
- سبک یا style
مشخصه شناسه (Id Attribute)
Attribute یا ویژگی id می تواند برای یک تگ HTML مورد استفاده قرار گیرد که باعث می شود آن تگ را منحصر به فرد کند ، تا هر عنصر در یک صفحه HTML براحتی قابل شناسایی باشد. دو دلیل اصلی وجود دارد که شما ممکن است بخواهید از ویژگی (attribute) شناسه یا id در یک عنصر استفاده کنید -
- اگر یک عنصر دارای attribute یا مشخصه منحصربفردی به نام id باشد ، براحتی می توان در سند Html به آن عنصر و محتوایش دسترسی داشت.
- اگر دو عنصر با یک نام در یک صفحه وب (یا style sheet) داشته باشید، می توانید از ویژگی id برای تشخیص بین عناصرِ هم نام استفاده کنید.
در آموزش های آتی بطور جداگانه ، در مورد Style Sheet بحث خواهیم کرد. در حال حاضر، اجازه دهید از ویژگی id برای تشخیص دو عنصر پاراگراف استفاده کنیم.
مثال :
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>
مشخصه عنوان (title Attribute)
به وسیله ی ویژگی عنوان یا title می توان یک عنوانِ پیشنهادی برای هر عنصر، ارائه داد. Syntax ی که برای تعریف attribute یا ویژگی عنوان (title) برای هر عنصر در نظر گرفته شده است بسیار شبیه به syntax ی هست که برای تعریف ویژگی id استفاده می شود-
رفتار این ویژگی (attribute) به عنصری که این ویژگی را دارا می باشد بستگی دارد. اغلب اوقات وقتی مکان نما بر روی عنصر قرار می گیرد، مقدار این ویژگی یا attribute در قالب tooltip یا هنگامی که عنصری در حال بارگذاری (loading) هست نمایش داده می شود.
مثال :
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
اکنون سعی کنید مکان نما خود را بر روی عبارت " Titled Heading Tag Example" قرار دهید و شما خواهید دید که عنوان یا Title ی که برای عنصر <h3> خود تعریف نموده اید بصورت یک tooltip نمایش داده خواهد شد.
ویژگی کلاس (class Attribute)
ویژگی class برای ارتباط یک عنصر با یک صفحه Style استفاده می شود و کلاس عنصر را مشخص می کند.در آموزش های آتی شما در مورد استفاده از خصیصه class زمانی که Cascading Style Sheet : CSSرا یاد بگیرید، بیشتر خواهید آموخت. بنابراین اکنون می توانید از این مطلب بصورت گذرا رد شوید.
مقدار attribute یا ویژگی class می تواند یک لیستی از نام های کلاس باشد که بوسیله ی space یا کاراکتر فضای خالی از هم جدا شده اند. به عنوان مثال –
class = "className1 className2 className3"
ویژگی style (style Attribute)
Attribute یا ویژگی style به شما اجازه می دهد تا دستورات Cascading Style Sheet : CSS را درون عنصر بیان کنید.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
در این آموزش، ما قصد نداریم CSS را یاد بگیریم، بنابراین خود را درگیر آن نمی کنیم.
بلکه ما در این آموزش، می خواهیم درمورد attributesها یا ویژگی های HTML و چگونگی استفاده از آنها در هنگام قالب بندی (formatting) محتوا بیاموزیم.
درونی کردن ویژگی ها (Internationalization Attributes)
سه ویژگی درونی یا internationalization وجود دارد که برای اکثر (هر چند نه همه) عناصر XHTML در دسترس هستند.
- dir
- lang
- xml:lang
ویژگی dir (dir Attribute)
Attribute یا ویژگی dir اجازه می دهد تا شما جهت (direction) متن موجود در مرورگر را تعیین نمایید. ویژگی dir می تواند یکی از دو مقدار زیر را داشته باشد، همانطور که در جدول زیر می بینید –
|
مقدار |
توضیح |
|
ltr |
از چپ به راست (مقدار پیش فرض) |
|
rtl |
از راست به چپ (مناسب برای زبان هایی مثل فارسی و عربی و هبرو و...) |
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
هنگامی که ویژگی dir در تگ <html> استفاده می شود، مشخص می کند که متن، چگونه در کل سند نمایش داده شود. هنگامی که در تگ دیگری از این attribute استفاده می کنید، جهت متن را فقط برای محتوای آن تگ کنترل می کنید.
مشخصه lang (lang Attribute)
ویژگی lang به شما اجازه می دهد که زبان اصلی مورد استفاده در یک سند را تعیین کنید، اما این ویژگی در HTML فقط برای سازگاری با نسخه های قبلی HTML نگهداری می شود. این خصیصه با ویژگی xml: lang در اسناد XHTML جدید جایگزین شده است.
مقادیر مشخصه lang عبارتند از کدهای دو کاراکتری استاندارد ISO-639.
مثال :
<!DOCTYPE html>
<html lang = "en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
This page is using English Language
مشخصه xml: lang
ویژگی xml: lang جایگزین XHTML برای ویژگی lang است. مقدار ویژگی xml: lang باید یک کد کشور ISO-639 باشد که در بخش قبلی ذکر شده است.
ویژگیهای عمومی (Generic Attributes)
در اینجا یک جدول از برخی از ویژگی های دیگر html را مشاهده می کنید که به راحتی در بسیاری از تگ های HTML قابل استفاده هستند.
|
Attribute |
Options |
Function |
|
align |
right, left, center |
تگ ها را به صورت افقی تنظیم می کند |
|
valign |
top, middle, bottom |
تگ ها را به صورت عمودی در یک عنصر HTML تنظیم می کند |
|
bgcolor |
numeric, hexidecimal, RGB values |
یک رنگ پس زمینه در پشت یک عنصر قرار می دهد |
|
background |
URL |
یک پس زمینه عکس پشت یک عنصر قرار می دهد |
|
id |
User Defined |
برای استفاده یک عنصر ازCascading Style Sheetsیک شناسه قرار می دهد |
|
class |
User Defined |
برای استفاده یک عنصر از Cascading Style Sheets یک کلاس تنظیم می کند |
|
width |
Numeric Value |
عرض جدول یا تصویر یا سلول جدول را تعیین می کند |
|
height |
Numeric Value |
ارتفاع جدول یا تصویر یا سلول جدول را تعیین می کند |
|
title |
User Defined |
عنوان هر عنصر را "Pop-up" می کند |
فصلِ:
5
,
تعداد قسمت ها:
177
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML
آموزش HTML5
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می…
فصلِ:
3
,
تعداد قسمت ها:
25
,
سطح:
صفر تا صد
این فصل در یک نگاه:
فصل سوم…
آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …
فصلِ:
5
,
تعداد قسمت ها:
77
,
سطح:
متوسط
این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ:
11
,
تعداد قسمت ها:
162
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ:
1
,
تعداد قسمت ها:
15
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش PHP MVC
آموزش Phyton
آموزش سئو
آموزش ساخت فروشگاه اینترنتی
آموزش HTML
آموزش ایمیل مارکتینگ
آموزش وردپرس
آموزش فروشگاه ساز اپن کارت
آموزش جوملا
آموزش Virtual Freer
آموزش WHMCS
این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
