Նախքան HTML5-ում ձեր վեբ էջերի ստեղծմանն ուղղակիորեն անցնելը, եկեք նայենք հիմնական շինարարական բլոկներին, որոնք կազմում են վեբ էջը:

HTML5 փաստաթուղթը, ինչպես ցանկացած HTML փաստաթուղթ, կազմված է տարրերից, իսկ տարրերը՝ թեգերից։ Որպես կանոն, տարրերն ունեն բացման և փակման թեգ, որոնք փակցված են անկյունային փակագծերում: Օրինակ:

1. <div> Դիվ էլեմենտի մարմին </div>

Սա սահմանում է div տարր, որն ունի բացվող <div> թեգ և փակող </div> թեգ: Այս թեգերի միջև գտնվում է div տարրի բովանդակությունը: Այս դեպքում բովանդակությունը «Դիվ էլեմենտի մարմին» պարզ տեքստն է։

Տարրերը կարող են նաև բաղկացած լինել մեկ թեգից, օրինակ <br /> տարրից, որի ֆունկցիան տողերի անջատումն իրարից։

1. <div> Դիվ <br /> էլեմենտի մարմին </div>

Թեև օգտագործվել է <br /> թեգը շեղ գծիկով , սակայն այն համարժեք է <br> սրան։

Բացման թեգի ներսում յուրաքանչյուր տարր կարող է ունենալ ատրիբուտներ: Օրինակ:

1. <div style="color:red;"> Button </div>
2. <input type="button" value="click">

Այստեղ սահմանվում են երկու թեգ՝ div և input: Div տարրն ունի ոճի հատկանիշ: Հավասարության նշանից հետո հատկանիշի արժեքը գրվում է չակերտներով՝ style=”color:red;”: Այս դեպքում արժեքը «color:red;» է: ցույց է տալիս, որ տեքստի գույնը կլինի կարմիր:

Երկրորդ տարրը` մուտքային տարրը, որը բաղկացած է մեկ թեգից, ունի երկու հատկանիշ` տեսակ (նշում է տարրի տեսակը` կոճակ) և արժեքը (սահմանում է կոճակի տեքստը)

Կան գլոբալ կամ ընդհանուր ատրիբուտներ բոլոր տարրերի համար, օրինակ՝ style, և կան հատուկ ատրիբուտներ, որոնք վերաբերում են որոշակի տարրերի, օրինակ՝ type:

Բացի կանոնավոր ատրիբուտներից, կան նաև բուլյան ատրիբուտներ։ Նման հատկանիշները կարող են իմաստալից չլինել: Օրինակ, դուք կարող եք սահմանել disabled հատկանիշը կոճակի համար.

1. <input type="button" value="click" disabled>

Disabled հատկանիշը ցույց է տալիս, որ տարրն անջատված է:

Գլոբալ ատրիբուտներ

HTML5-ն ունի գլոբալ ատրիբուտների մի շարք, որոնք կիրառվում են ցանկացած HTML5 տարրի համար.

1․ accesskey. Որոծում է ստեղն արագ հասանելիության համար

2. class: սահմանում է CSS դասը, որը կկիրառվի տարրի վրա

3. contenteditable. որոշում է, թե արդյոք տարրի բովանդակությունը կարող է խմբագրվել

4. dir. սահմանում է տեքստի ուղղությունը տարրի մեջ

5. draggable. որոշում է, թե արդյոք տարրը կարելի է քաշել

6. hidden. թաքցնում է տարրը

7. id. տարրի եզակի նույնացուցիչ: Վեբ էջի տարրերը չպետք է ունենան կրկնօրինակ նույնացուցիչներ

8. lang. սահմանում է տարրի լեզուն

9. spellcheck. . ցույց է տալիս, թե արդյոք ուղղագրության ստուգումը կօգտագործվի այս տարրի համար

10. style. սահմանում է տարրի ոճը

11. tabindex. սահմանում է այն հերթականությունը, որով տարրերը կարող են փոխվել TAB ստեղնով

12․title․ սահմանում է լրացուցիչ նկարագրություն տարրի համար

13․ translate․ որոշում է, թե արդյոք տարրի բովանդակությունը պետք է թարգմանվի

Բայց, որպես կանոն, այս ամբողջ ցանկից առավել հաճախ օգտագործվում են երեքը՝ class, id և style։

Օգտագործողի ատրիբուտներ

Ի տարբերություն նշագրման լեզվի նախորդ տարբերակի, HTML5-ին ավելացվել են հատուկ ատրիբուտներ: Այժմ վեբ էջի ծրագրավորողը կամ ստեղծողը կարող է սահմանել ցանկացած ատրիբուտ՝ նախածանցով այն data—ով: Օրինակ:

1. <input type="button" value="click" data-color="red" >

Data-color ատրիբուտը սահմանված է այստեղ և ունի «կարմիր» արժեքը։ Չնայած այս տարրի, ոչ էլ ընդհանրապես html-ի համար նման ատրիբուտ չկա։ Մենք ինքներս ենք դա սահմանում և դնում ցանկացած արժեքի:

Մեկ կամ կրկնակի չակերտներ

Հաճախ կարող եք գտնել դեպքեր, երբ html-ում օգտագործվում են և՛ մեկ, և՛ կրկնակի չակերտներ՝ ատրիբուտների արժեքները սահմանելիս: Օրինակ:

1. <input type='button' value='click'>

Այս դեպքում ընդունելի են և՛ մեկ, և՛ կրկնակի չակերտները, թեև ավելի հաճախ օգտագործվում են կրկնակի չակերտներ։ Այնուամենայնիվ, երբեմն հատկանիշի արժեքը ինքնին կարող է պարունակել կրկնակի չակերտներ, որոնց դեպքում ավելի լավ է ամբողջ արժեքը դնել միայնակ չակերտների մեջ.

1. <input type="button" value='click "Hello world"'>

Բաժանորդագրվեք Տելեգրամ ալիքին բաց

չթողնելու համար նոր նյութերը ՝ https://t.me/hayqsystem