Դաս 15: HTML նոր թեգեր և ատրիբուտներ

0

Այս դասի ընթացքում կստանաք խորը գիտելիքներ թեգերի և ատրիբուտների մասին, ինչպես նաև կսովորեք որոշ նորերը:

 Block և inline

HTML-ի տարրերի մեծ մասը block-level կամ inline-level տարրեր են։ Block-level տարրերը, այն տարրերն են, որոնք սահմանում են կայքի կառուցվածքը կամ այն տարրեր, որոնք պարունակում են բովանդակության մեծ մասը։ Հիմնականում, դրանք սկսվում են նոր տողով Օրինակն՝ <h1>, <p>, <table>, <ul>:

Inline տարրերը սովորաբար գտնվում են նախադասությունները ներսում և սա չի նշանակում, որ բովանդակությունը պետք է սկսվի նոր տողով. Օրինակ՝ <b> <img>, <em>:

 Կառուցվածքային տարրեր/Structural elements

Բոլոր կառուցվածքային տարրերը block-level տարրեր են, որոնք օգնում են սահմանել բովանդակության տեսակը և էջի այն հատվածը, որտեղ բովանդակությունը պետք է տեղադրվի:

Նոր կառուցվածքային տարրը <article>-ն է։ Այն նախատեսված է ցանկացած բովանդակություն համար, որը դուք համարում եք լիարժեք և ամբողջական՝ գրառում բլոգում, ամսագրի հոդված, գիրք, թեզ, մեկնաբանության: Այն կարող է ունենալ տարբեր ենթաբաժիններ (գլուխներ, մասեր):

Երկրորդ կառուցվածքային տարրը, որը պետք է իմանաք դա <section>-ն է։ Այն օգտագործվում է հոդվածի որևէ հատվածի համար։ Դա ինֆորմացիայի տրամաբանական խմբավորումն է և լավագույն թեստը, արդյոք անհրաժեշտ է ենթավերնագիր, թե ոչ: Եթե ցանկանում եք տալ ենթավերնագիր պարբերությանը, ապա կարող եք օգտագործել <section>-ը։

Օրինակ 1: Հոդված section-ով

          <body>

            <article>         

              <h1>My Blog Entry</h1>         

              <p>This blog entry is my first.</p>

              <section>                      

                <h2>What I Learned</h2>

                <p>HTML5 can have articles and sections.</p>

              </section>

            </article>

          </body>

Header-ը և footer-ը հաջորդ նոր կառուցվածքային տարրեր են, որը անհրաժեշտ է իմանալ։ Վերջիններս կարող են ներառել բոլոր տեսակի բաներ, բայց այն կլինի տեղը, որտեղ օրինակի համար կտեղադրեք ձեր էջի վերնագիրը (header) կամ ձեր հեղինակային իրավունքը տեղեկությունների (footer)։

Եկեք ավելացնենք դրանք

         <body>

          <header>

            <h1>The name of this web page</h1>

            <p>Written by me!</p>

          </header>         

          <article>

            <h1>My Blog Entry</h1>

            <p>This blog entry is my first.</p>

            <section>

              <h2>What I Learned</h2>

              <p>HTML5 can have articles and sections.</p>

            </section>

          </article>

          <footer>

            <p> Copyright © 2013 All Rights</p>

          </footer>         

        </body>

Իրականում դուք կարող եք ունենալ բազում header-ներ (կամ footers-ներ) մեկ էջում: Կարող եք ունենալ վերնագիր ամբողջ էջի համար և մեկ այլ վերնագիր հոդվածի: Էջի համար ներառեք վեբ էջի անվանումը: Հոդվածի համար վերնագրիը կարող է լինել ինչպես հոդվածի վերնագիրը,  այնպես էլ հեղինակը և ամսաթիվը:

Դասեր/Classes

Սա հարմար գործիք է, որը կցում է ինֆորմացիան տարրին, այնպես որ կարողանաք անել ավելի շատ գործողություններ որոշ կամ բոլոր տարրերի հետ, որոնք պատկանում են այդ դասին։

Օրինակ, եթե ցանկանում եք, որ ձեր հոդվածներից որոշները ունենան հատուկ եզրագիծ կամ տառատեսակը, ապա նշենք այդ հոդվածները որպես մեկ դաս։

        <body>

          <article class=”fancy” >

            <h1>My Blog Entry</h1>

            <p>This blog entry is my first.</p>

          </article>

        </body>

Ձեր մտքում պահպեք դասերը, երբ սկսեք CSS – ի ուսուցումը կտոր, որը հնարավորություն է տալիս ֆորմատավորել Ձեր էջը:

ID- ներ

ID-ներ նման են դասերին, դրանք մետատվյալներ են, որ դուք կցում եք տարրերին։ ID-ներ եզակի իդենթիֆիկատորներ են որոշակի տարրի համար։ Այն անհրաժեշտ է միշտ սկսել է մեծատառով, իսկ համարները ավելացնել ավելի ուշ։

ID-ն դրվում է  տարրի վրա այն դեպքում, եթե ցանկանում եք որևէ կոնկրետ տարրի հետ անել ինչ որ գործողություն։ Օրինակ JavaScript դնել, կամ ստեղծել ինչ-որ յուրահատուկ ոճ։

        <button id=”play1″ onclick=”play();”>

          <image src=”play_button.png”/>

        </button>

Ամենայն հավանականությամբ, դուք կօգտագործեք JavaScript-ը այն տարրերի համար, որոնք ունեն ինտերակտիվություն: JavaScript-ի կոդը կարող է վերստեղծել տարրը իր կոնկրետ id-ով «play1», այնպես, որ երբ որևէ մեկը քլիք  անի  կոճակին  (onclick), այն կաշխատացնի այն, ինչ սահմանված է Javascript-ով:

Javascript-ի մանրամասները բարդ են այս դաընթացի համար, բայց դուք պետք է հասկանաք, որ ավելացնելով ID-ն այն դառնում է էական բաղադրիչ, որը կարողանում է Ձեր կայքին տալ ինտերակտիվություն։

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

Կան 15 գլոբալ ատրիբուտներ, այսինքն ատրիբուտներ որոնց կարող եք ավելացնել ցանկացած տարրի։ Առաջինը և առավել կարեւորը ID-ն է, որը արդեն ներկայացրեցինք։ Այն ավելացվում է ցանկացած տարրի, որը ունի հատուկ վերահսկողության անհրաժեշտություն։

Մյուս ատրիբուտներ, որոնք նոր են HTML5-ում ներառում են contenteditable-ն, որը դարձնում է տարրի բովանդակությունը editable բրաուզերում, draggable, որը թույլ է տալիս տեղաշարժել այդ տարրը, translate թույլ է տալիս վերահսկել արդյոք էլեմենտի բովանդակությունը թարգմանվում է, թե ոչ, երբ ինչ-որ մեկը դիտում է այն մեկ ուրիշ լեզու ունեցող բրաուզերի միջոցով։

Կան նաև մի ամբողջ շարք ատրիբուտներ նախատեսված ֆորմայի համար։ Վերջիններս կուսումնասիրենք հաջորդ դասի ընթացքում:

Linking

Դուք պետք է հիշեք, որ հղումներ, ընդհանուր առմամբ, ունեն այս տեսքը՝

<a href=”my_second_page.html”>Second Page</a>

Ի՞նչ անել, եթե ցանկանում եք, որ հղումը բացվի բրաուզերում նոր պատուհանոով (այնպես որ մարդիկ չհեռանան ձեր կայքից):

Target  ատրիբուտը լուծում է այս խնդիրը: Այն հատկորոշում է, թե ինչ է տեղի ունենում բրաուզերում, երբ ինչ – որ մեկը քլիք է անում հղման վրա: Հղումը նոր պատուհանով բացելու համար օգտագործեք _blank արժեքը:

<a target=”_blank” href=”my_second_page.html”>Second Page</a>

Փորձեք ինքներդ հղում դնել ձեր ստեղծած մեկ էջից դեպի մյուսը։ Երբ բացեք էջը բրաուզերից, քանի դեռ դուք ունեք target=”_blank” -ը, ապա այն կբացվի նոր պատուհանով:

Դուք կարող եք նաև հատկորոշել հղման տեսակը rel ատրիբուտով։ Դուք կարող եք սահմանել այն  <a>, <link> կամ <area> տարրի համար (միջոց պատկերի վրա hotspots դնելու համար): Սա պատասխանում այն հարցին, թե ինչու մատնացույց անում մեկ այլ էջի:

Կան հղման երկու կատեգորիաները: հղումներ դեպի արտաքին ռեսուրսները, որոնք լրացնում  են ընթացիկ փաստաթուղթը և hyperlinks, որոնք պարզապես միացնում է երկու էջերը միասին:

<link>-ը  դեպի արտաքին ռեսուրսի կլինի rel = “stylesheet”, որը կուսումնասիրեք CSS-ի դասընթացում։ Հղման մյուս տեսակները պարզապես կլինեն հերթական հղումներ՝ hyperlinks:

Մտածում ե՞ք, որն է  <a> և <link> տարրի տարբերությունը։ Երկուսն էլ վերցնում rel հատկանիշը, սակայն <a> տարրը ունի որևէ clickable բան ներսից ( բառ, գրաֆիկակա կամ կոճակը), իսկ <link> տարրը չի դրսևորում ոչինչ էջում։ Այն հիմնականում օգտագործվում է դեպի ռեսուրսներ հղումների համար, ինչպես stylesheet-ը։

Գոյություն ունեն մի շարք թույլատրելի արժեքներ, սակայն ամենատարածվածներն են՝

author, alternate, help, next, previous և search։

Եթե վերը նշված հղումը կապում է առաջին էջի հոդվածը երկրորդ էջի հոդվածի հետ, օգտագործեք  rel  ատրիբուտը  next արժեքի հետ:

        <a rel=”next” href=”my_second_page.html”>Second Page</a>

Եթե հղում եք դեպի հեղինակի կեսնագրությունը կամ վեբ կայքը, ապա օգտագործեք author արժեքը։ Եթե հղումը դեպի Help document է, ապա տեղադրեք  help արժեքը։

Հարգելի ընթերցող, խնդրում ենք չմոռանալ like տալ մեր ֆեյսբուքյան էջին, քանի որ նորությունների մեծ մասը առաջինը տեղադրվում է հենց այնտեղ։ Ինչպես նաև հետևեք մեզ այլ սոցիալական ցանցերում և, իհարկե, գրանցվեք մեր բլոգում։

Share.