Ի՞նչ է հատկանիշը – attribute
Էլեմենտների հնարավորություններն ընդլայնելու, լրացուցիչ տվյալներ ավելացնելու կամ դրանց ստանդարտ վարքագիծը փոխելու համար օգտագործվում են ատրիբուտները։
Այն գրվում է բացվող տեգում, հիմնական տեգից պարտադիր առանձնացվում է պրոբելով, որին հետևում է ատրիբուտի անվանումը, ատրիբուտի արժեքը։ Արժեքում արգելվում է օգատգործել & նշանը։
Կան ատրիբուտներ՝ դատարկ ատրիբուտներ, որոնց արժեքը համապատասխանում է անվանը։ Դրանց սինտաքսը հետևյալն է՝ <input disabled> – գրվում է միայն անունը։ Նման ատրիբուտների առկայությունը համապատասխանում է տրամաբանական «true – Ճիշտ է»-ին, իսկ բացակայությունը՝ տրամաբանական «false– Սխալ է» – ին։ Նշված օրինակում առկա է disabled ատրիբուտը․ առկայությունը համապատասխանում է տրամաբանական «true – Ճիշտ է»-ին, ուստի տվյալ դաշտը կարգելափակվի(disabled – անաշխատունակ)՝ կդառնա անհասանելի օգտվողի համար․
Օրինակներ՝
<input disabled>
<input disabled="">
<input disabled=disabled>
Վերը նշվածները համարժեք են։
Թվարկվող ատրիբուտները որպես արժեք ընդունում է թույլատրելի բանալի բառերից որևէ մեկը։ Օրինակ՝
<p dir = "rtl">لعميل مهم جدًا، العميل سيتبعه العميل.</p>
dir ատրիբուտը ընդունում է 3 բանալի բառեր՝ ltr | rtl | auto:
ltr – տեքստի ուղղությունը ձախից։
rtl – տեքստի ուղղությունը աջից։
auto – որոշում է ծրագիրը։
Կան ատրիբուտներ, որոնց արժեքը գրվում է առանց չակերտների։ Դա ենթադրում է, որ արժեքը չպետք է պարունակի պրոբելներ, “, ‘, = , <, > նշանները։ Արժեքը չպետք է նաև դատարկ մնա։ Օրինակ՝
<input value=Barev>
Ատրիբուտի արժեքը վերցվում է միայնակ (‘…’) կամ կրկնակի (“…” ) չակերտների մեջ: Միայնակ չակերտներում օգտագործվում է ամեն ինչ, բացի միայնակ չակերտից և &-ից։ Կրկնակի չակերտներում օգտագործվում է ամեն ինչ, բացի կրկնակի չակերտից և &-ից։
<div class = "barev12"> <div class = "barev12">
Գլոբալ ատրիբուտներ
Ատրիբուտները, որոնք հասանելի են html-ի բոլոր էլեմենտների համար, կոչվում են գլոբալ ատրիբուտներ։
accesskey
accesskey = "voreveSimvol"
Նշվում է ստեղնի սիմվոլներից մեկը․ Alt -ի համադրությամբ կկատարվի հրահանգ, որով կակտիվանա տվյալ էլեմենտը(Alt+b)։ Օրինակ՝
<p><a href="www.hayti.am" accesskey="b"> մուտք գործել կայք</a></p>
Հիմա Alt+b հրահանգի միջոցով հնարավոր է առանց հղմանը սեղմելու անցնել նշված կայքը։
<p><a href="www.hayti.am" accesskey="b"> մուտք գործել կայք</a></p>):
class
class = "voreveBar"
Օգտագործվում է css ոճաթերթում էլեմենտի հետ աշխատելու համար(օրինակ փոխել տեքստի գույնը)։
<!DOCTYPE html>
<html lang="hy">
<head>
<meta charset="utf-8" />
<title>HyperText Markup Language</title>
<style>
div.ab1{ color: red}
</style>
</head>
<body>
<h1>HyperText Markup Language<h1>
<div class = "ab1">Նշագրման լեզու,
որն օգտագործվում է վեբ-էջերի
մեծամասնության նշագրման համար։
HTML լեզուն վերամշակվում է դիտարկչի կողմից
և ցուցադրվում է մարդու կողմից հեշտ
ընթեռնելի փաստաթղթի տեսքով։
</div>
</body>
</html>
contenteditable
contenteditable = "true | false"
Հնարավոր է փոխել էլեմենտի պարունակությունը բրաուզերից։
<h1 contenteditable = "true"> կարող է փոխվել այս տեքստը </h1>
dir
dir = “ltr | rtl | auto”
Սահմանում է տեքստի ուղղությունը՝ ձախից աջ, կամ աջից ձախ։
Ընդունում է 3 բանալի բառեր՝ ltr | rtl | auto:
ltr – տեքստի ուղղությունը ձախից։
rtl – տեքստի ուղղությունը աջից։
auto – որոշում է ծրագիրը։
draggable
draggable = “true | false”
Թույլ է տալիս կատարել էլեմենտի տեղափոխում բրաուզերից։ Օգտագործվել է նաև Css և Javascript օրինակն ավելի պատկերավոր դարձնելու համար։
<!DOCTYPE html>
<html lang="hy">
<head>
<meta charset="utf-8" />
<style>
.trash {
border: 1px solid #929292;
background: url(/example/image/trash.png) no-repeat 50% 50%;
height: 292px;
padding: 20px;
text-align: center;
margin-bottom: 1rem;
}
img {
cursor: move;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Նկարը տեղափոխեք ուղղանկյան մեջ</p>
<div class="trash" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img decoding="async" src="html.png" draggable="true" alt=""
ondragstart="drag(event)" id="photo">
</body>
</html>
hidden
hidden
Ծածկում է էլեմենտի պարունակությունը բրաուզերի պատուհանից:
<img src = "html.png" hidden>
<img src = "html.png" >
<img src = "html.png" >
id
id = “voreve bar”
էլեմենտը նույնականացնում է Css-ում կամ Javascript-ում օգտագործելու համար։ Նման է class ատրիբուտին։ class-ի դեպքում մի քանի էլեմենտների թույլատրելի է սահմանել նույն արժեքը, իսկ id-ի դեպքում՝ ոչ։
<p id = "a1b1"> ... </p>
Itemscope / itemtype / itemprop
Itemscope / itemtype / itemprop
Նշված ատրիբուտները պատկանում են միկրոտվյալներին(microdata), որոնք լրացուցիչ տվյալներ են հաղորդում որոնողական համակարգերին, օրինակ Google-ին։ Նմանատիպ կայքերն օգատգործում են միկրոտվյալները, որպեսզի ավելի շատ տեղեկություններ ցուցադրեն այն կայքերից, որոնք համապատասխանում են ձեր փնտրածին։
<!DOCTYPE html>
<head>
<title>Hello world</title>
</head>
<body>
<section itemscope itemtype="http://schema.org/Person">
<h1 itemprop="name">Թիմ-Բերներս-Լի</h1>
<img decoding="async" itemprop="image" src="http://www.w3.org/Press/Stock/Berners-
Lee/2001-europaeum-eighth.jpg">
<p itemprop="affiliation" itemscope
itemtype="http://schema.org/Organization">
<span itemprop="name">Համաշխարհային ցանցի կոնսորցիում </span>,
<span itemprop="url">http://www.w3.org</span>
</p>
<p itemprop="address" itemscope
itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Քեմբրիջ</span>,
<span itemprop="addressRegion">Օքսվորդ </span>
</p>
</section>
</body>
</html>
<section itemscope itemtype="http://schema.org/Person">-
itemscope – սահմանում է, որ <section> էլեմենտը(section -ը հանդիսանում է թեմայի բլոկ, որն ունի իր վերնագիրը, նկարը և այլն) մի վայր է, որտեղ նշվելու են որոշակի միկրոտվյալներ։
itemtype=“http://schema.org/person” – միկրոտվյալները պարունակելու են տվյալներ մարդ(person) տեսակի մասին, որը նշվում է itemtype-ի(type-տեսակ) միջոցով:
http://schema.org/Person – կայքում կան բազմաթիվ արդեն պատրաստի տեսակներ միկրոտվյալների համար:
<h1 itemprop="name"> Թիմ-Բերներս-Լի </h1>
<img decoding="async" itemprop="image" src="html.png">
<section>-ում <h1>-ի և <img>-ի համար սահմանվել են միկրոտվյալներ itemprop-ի միջոցով։
name միկրոտվյալի արժեքը կլինի էլեմենտի պարունակությունը՝ – Թիմ-Բերներս-Լի ։
image միկրոտվյալի արժեքը կլինի էլեմենտի պարունակությունը՝ – html.png։
<p itemprop="affiliation" itemscope
itemtype="http://schema.org/Organization">
<span itemprop="name"> Համաշխարհային ցանցի կոնսորցիում </span>,
<span itemprop="url">http://www.w3.org</span>
</p>
<p> էլեմենտն ունի միկրոտվյալ affiliation անունով։ <p>-ն նաև վայր է այլ միկրոտվյալների համար(itemscope – տվյալ էլեմենտը հանդիսանում է վայր դրանում միկրոտվյալներ նշելու համար)։ <p> էլեմենտը Organization տեսակի է։
<span itemprop="name"> Համաշխարհային ցանցի կոնսորցիում span>,
<span itemprop="url">http://www.w3.org </span>
name միկրոտվյալի արժեքը կլինի էլեմենտի պարունակությունը՝ – Համաշխարհային ցանցի կոնսորցիում ։
url միկրոտվյալի արժեքը կլինի էլեմենտի պարունակությունը՝ – http://www.w3.org։
<p itemprop="address" itemscope
itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Քեմբրիջ</span>,
<span itemprop="addressRegion">Օքսվորդ</span>
</p>
– Այստեղ նույնն է, ինչ նշվեց քիչ առաջ։
https://search.google.com/structured-data/testing-tool/u/0/ – Կայք միկրոտվյալները թեստավորելու համար։
Տվյալ կայքի միջոցով միկրոտվյալները թեստավորվում են արդյունքը տեսնելու համար, թե ինչպես են դրանք հայտնաբերվում որոնողական համակարգերում։ Օրինակ, եթե մեկը որոնի « Համաշխարհային ցանցի կոնսորցիում » արտահայտությունը, որն ավելացված է միկրոտվյալներում, ապա հնարավոր է, որ որոնման արդյունքներում հայտնվի նաև միկրոտվյալները պարունակող կայքը։
lang
lang = “hy | ru | en | ev ayln”
html փաստաթղթում տեքստերը կարող են հավաքված լինել տարբեր լեզուներով։
Ամեն լեզու ունի տեքստի ձևավորման իրեն համապատասխան կանոններ։ Օրինակ չակերտները տարբեր լեզուներում տարբեր տեսք ունեն։ Որպեսզի բրաուզերը կողմնորոշվի, թե տեքստը որ լեզվի կանոններով պետք է ցուցադրի, սահմանավում է lang ատրիբուտը։
spellcheck
spellcheck = “true | false”
Թույլ է տալիս բրաուզերին ստուգելու տեքստի քերականությունը (սովորաբար այն օգատգործվում է <input> և <textarea> էլեմենտների հետ)։
<textarea spellcheck = "true"> </textarea>
style
style = “color: red”
Սահմանում է էլեմենտի ոճը(css)։ Թույլատրելի է նշել մի քանի տվյալներ․ դրանք իրարից առանձնացվում են «;»-ով։
<p style = "color: red; font-size:10px;">Hello world</p>
tabindex
tabindex = “inchvor tiv”
Սահմանում է էլեմենտների դասավորությունը Tab ստեղնը սեղմելու ժամանակ:
<a href="//msiter.ru/" tabindex="2">MSiter.RU</a><br>
<a href="http://www.google.com/" tabindex="1">Google</a><br>
<a href="http://www.yandex.ru/" tabindex="3">Яндекс</a>
Երբ Tab-ին սեղմենք առաջինը կնշվի Google-ը:
title
title = “ինչոր տեքստ”
Նկարագրում է էլեմենտի պարունակությունը հայտնվող պատուհանի տեսքով, երբ մկնիկի սլաքը էլեմենտի վրա է։
<p title = "Ծրագրավորման դասընթացների կայք է">www.hayti.am</p>
translate
translate = “yes” | “no”
Թույլատրվում կամ արգելվում է տեքստի թարգմանությունը։
<p translate = yes>Այս պարունակությունը թույլատրելի է թարգմանության համար.</p>
<p translate = no>Այս պարունակությունը թույլատրելի չէ թարգմանության համար.</p>
aria-*
aria-*
Փոխանցում է լրացուցիչ տվյալներ այնպիսի ծրագրերին, որոնք նախատեսված են պատուհանի պարունակությունը լսելի կարդալու համար։ Դրանցից են՝ aria-label, aria-labelledby, aria-live և այլն:
<button aria-label = "Pakel" >X</button>
button-ը փաստաթղթին ավելացնելու է սովորական կոճակ, որին սեղմելով, օրինակ, կփակվի էջում հայտնված գովազդը։
Եթե կայքից օգտվողը ունի տեսողական խնդիրներ և օգտագործում է ծրագիր էջը լսելի ձայնով կարդալու համար, հասնելով կոճակին՝ ծրագիրը կկարդա այն որպես “baton” կամ “кнопка”։ Եթե էլեմենտին սահմանվի aria-label = “Pakel” ատրիբուտը, ապա ռոբոտը կկարդա «Pakel» և օգտվողը կհասկանա, որ այդտեղ սեղմելով գովազդը կփակվի։
aria- -ի բոլոր էլէմենտները ստեղծված են նմանատիպ դեպքերի համար։ Դրանք արտասանող ծրագրերին փոխանցում են լրացուցիչ տվյալներ, թե ինչպես է ներկայացվելու այս կամ այն էլեմենտը։
role
role = “banali barer”
Նույնն է ինչ aria-ն։ role-ի դեպքում օգտագործվում է դրա համար նախատեսված բանալի բառեր։ Օրինակ՝ role = “banner” -ցանկալի է օգտագործել մեկ անգամ և այն էլեմենտի մեջ, որը պատկերելու է կայքի լոգոտիպը․ role = “search” –կարելի է օգտագործել այն էլեմենտի համար, որը պատկերելու է որոնման պատուհանը։
data-meqena
data-meqena = “bmw”
Այս տեսակի ատրիբուտների անունները որոշում ենք ինքներս․ պարտադիր նշվում է data- -ն, որին հաջորդում է ցանկացած լատինատառ բառ։ Նման է class ատրիբուտին, քանի որ data- ի արժեքը նույնպես նախատեսված է Javascript-ի և Css-ի հետ աշխատելու համար։
<!DOCTYPE html>
<html lang="hy">
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style>
div[data-guyn="karmir"] {color: red}
</style>
</head>
<body>
<div data-guyn="karmir" >bmw</div>
</body>
</html>
Javascript attributes
Html-ի և Css-ի միջոցով պատրաստվում են պարզ ստատիկ էջեր, որը չի ենթարկվում որևէ փոփոխման , այլ ցուցադրվում է այնպես ինչպես պատրաստված է նախապես, բայց Javascript-ի միջոցով ստատիկ էջը կարող է դառնալ ավելի դինամիկ՝ ավելացվել տարատեսակ անիմացիաներ, փոփոխման ենթարկվել ըստ հաճախորդի գործողությունների և այլն։
«իրադարձության ատրիբուտներ»(атрибуты событий) -ը աշխատում են միայն Javascript-ի հետ: Դրանցից են օրինակ՝ onload, onfocus, onblur և այլն․ սրանք «իրադարձության ատրիբուտներն» են, իսկ որևէ իրադարձության «մշակողը» Javascript կոդն է, որը փաստաթուղթը դարձնում է ավելի դինամիկ ։
Ինչու է կոչվում «իրադարձության ատրիբուտներ»․ օրինակում պատկերվում է, թե ինչպես է պարզ ստատիկ էջը javascript- ի միջոցով դառնում ավելի դինամիկ՝
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<input type="text" id="my-input"
onfocus="myFocusFunction()"
onblur="myBlurFunction()">
<script>
function myFocusFunction(){
document.getElementById("my-input").style.backgroundColor = "yellow";
}
function myBlurFunction(){
document.getElementById("my-input").style.backgroundColor = "red";
}
</script>
</body>
</html>
Դաշտի վրա սեղմելով այն ակտիվանում է, որը onfocus իրադարձությունն է։ Դրան սահմանվում է մշակող՝ Javascript կոդ, որը դաշտը դարձնում է դեղին։
Դաշտից դուրս սեղմելով այն կորցնում է ակտիվությունը, որը onblur իրադարձությունն է։ Դրան սահմանվում է մշակող՝ Javascript կոդ, որը դաշտը դարձնում է կարմիր։
Armenian 
Russian