html փաստաթղթի կառուցվածքը հիմնական թեգերն են: Ճիշտ HTML փաստաթղթի կառուցվածքը և էջի կոդը

Բարի օր, բլոգի ընթերցողներ և հյուրեր: Ես նորից ձեզ հետ եմ՝ ձեր խոնարհ օգնականը հիպերտեքստի նշագրման լեզվի html հիմունքները սովորելու հարցում: Այս հոդվածում ես ուզում եմ անդրադառնալ կայքի էջերի կառուցվածքի թեմային և ավելի մոտիկից ծանոթացնել լեզվի հիմնական թեգերին։

Կայքի կառուցվածքի html թեման ամենակարևորներից է և հանդիսանում է կայք կառուցելու հիմքը, որը տիրապետելուց հետո հեշտությամբ կարող եք անհատական ​​դիզայն ստեղծել ձեր էջերի և կայքերի համար։ Թեմայի մանրամասն ուսումնասիրության համար հոդվածում ներկայացված է ոչ միայն տեսական նյութ, այլեւ բլոգ ստեղծելու կոնկրետ օրինակ։ Հիմա ժամանակն է սկսել սովորել:

Սարսափելի տեսք ունի, հեշտ ծրագրավորվող

Նրանց համար, ովքեր առանձնապես անհանգիստ են, ներածությունը կսկսեմ օրինակով: Ստորև բերված է մի պարզ ծրագրի կոդը, որը ես գրել եմ հատուկ այս հոդվածի համար: Մի անհանգստացեք: Յուրաքանչյուր քայլի կտրվի մանրամասն բացատրություն:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 Իմ էջը

  • Հիմնական հիպերտեքստի նշագրման լեզվական պիտակներ
  • Նոր պիտակներ, որոնք եկել են html 5-ով
  • Էջի կառուցվածքի օրինակ

Հոդված 1

Ահա առաջին հոդվածի տեքստը.

Հոդված 2

Ահա երկրորդ հոդվածի տեքստը.

Այս բլոգի հոդվածի հեղինակ

Իմ էջը

Կայքի կառուցվածքի ստեղծում՝ օգտագործելով html

  • Հիմնական հիպերտեքստի նշագրման լեզվական պիտակներ
  • Նոր պիտակներ, որոնք եկել են html 5-ով
  • Էջի կառուցվածքի օրինակ
    •
    • Հիմնական հիպերտեքստի նշագրման լեզվական պիտակներ
    • Նոր պիտակներ, որոնք եկել են html 5-ով
    • Էջի կառուցվածքի օրինակ

    Հոդված 1

    Ահա առաջին հոդվածի տեքստը.

    Հոդված 2

    Ահա երկրորդ հոդվածի տեքստը.

    Այս բլոգի հոդվածի հեղինակ


    Այս կոդը ստեղծում է բլոգի էջ, որն իր հերթին բաժանվում է վերնագրի, մենյուի, հիմնական վահանակի (դասավորություն), որը պարունակում է բովանդակության վահանակ (բովանդակություն) և կողագոտի (կողային տող), ինչպես նաև «ստորատակ» (ստորատակ): )

    Դեբրիֆինգը սկսենք առաջին տողից։

    լեզվական տարր է, որի հիմնական խնդիրն է նշել վեբ փաստաթղթի տեսակը։ Այս կերպ բրաուզերը որոշում է, թե ինչ ստանդարտով պետք է ցուցադրվի էջը, քանի որ այսօր կան html-ի մի քանի տարբերակներ։

    Այնուամենայնիվ, արժե ուշադրություն դարձնել լեզվական նոր միավորի վրա, որը կոչվում է ոճը. Ինչպես կարող եք կռահել անունից, այս թեգը սահմանում է ոճը և կարգավորում է էջի օբյեկտների դասավորությունը:

    Տրամաբանորեն կարող եմ ենթադրել, որ ձեր գլխում անմիջապես ծագեց հարցը. «Ի՞նչ անհասկանալի կոդ կա ծրագրի այս հատվածում։ Դա ընդհանրապես նման չէ html-ի: Եվ պատասխանը հետևյալն է՝ ոչ թե html-ն է գրված ոճի թեգի մեջ, այլ css կոդը։ Ինչպես նախկինում նշվեց, սա վեբկայքերի արտաքին տեսքը ֆորմատավորելու գործիք է։

    Դիվվերաբերում է նշագրման լեզվի բլոկի պիտակներին: Այն օգտագործվում է որոշակի բեկորների մեկուսացման համար՝ դրանց հետագա փոփոխման նպատակով։

    Բլոկները կառավարվում են կասկադային ոճի թերթիկների միջոցով, այսինքն. css լեզու Օրինակի վեբ էջը ունի երեք բլոկ, որոնք ոճավորվում են դասի ատրիբուտներով:

    Այսպիսով, ծածկագիրը պարունակում է.

    • դասավորություն – բլոկ, որը պատասխանատու է էջի հիմնական մասի համար,
    • կողագոտ - կողային գոտի (սովորաբար ստեղծված է նավիգացիայի համար),
    • բովանդակություն – բլոկ, որտեղ տեղակայված են բլոգի գրառումները:

    Կողային տողի դասի սահմանում ունեցող տարրում ես տարրերի միջոցով սահմանում եմ չդասավորված ցուցակ

      Եվ
    • . Ոճի դասի բովանդակությամբ բլոկում – վերնագրերի պիտակներ

      և պարբերություն

      Հիմա եկեք ավելի սերտ նայենք բլոկին

      .

      HTML, թե դեռ HTML 5: Ինչպե՞ս ճանաչել:

      Դասավորության ոճի դասով div-ում, ի լրումն այլ բլոկների, կան պիտակներ, ինչպիսիք են վերնագիրը, ընտրացանկը և ստորագիրը: Ի տարբերություն օրինակի մյուս տարրերի, դրանք հատուկ են HTML 5 հարթակին:

      Այսպիսով, վերնագիրը հիպերտեքստի նշագրման լեզվի տարր է, որը սովորաբար ստեղծում է կայքի էջերի կամ բաժինների վերնագիրը, որոնցում տեղադրվում է վերնագիրը: Հարկ է նշել, որ Internet Explorer բրաուզերը չի աջակցում մինչև 8-րդ տարբերակի վերնագիրը, բայց ցուցադրում է դրա բովանդակությունը:

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

    • .

      Եվ վերջապես ստորագրի լեզվական միավորը։ Վեբ մշակողների ժարգոնում սա երբեմն կոչվում է էջի «ստորատակ»: Այս թեգը գտնվում է էջի կամ բաժինների ներքևում: Ստորագիր սովորաբար պարունակում է տեղեկատվություն որոշակի ռեսուրսի հեղինակության, փաստաթղթի ստեղծման ամսաթվի, հիմնական տեղեկատվության կամ այլ նյութերի մասին, որոնք հատուկ ուշադրություն չեն պահանջում վեբ ռեսուրսի ընթերցողներից:

      Վեբ ռեսուրսներ ստեղծելու գործիքներ

      Ինտերնետային էջեր մշակելու համար ստեղծվել են բազմաթիվ ծրագրային արտադրանք: Պայմանականորեն դրանք կարելի է բաժանել պարզ խմբագրման ծրագրերի և մասնագիտորեն ուղղված ծրագրային արտադրանքների:

      Կայք ստեղծելիս առաջին բանը, որ պետք է պատկերացնել, այն է, թե ինչպես է ձևավորվում վեբ էջը։ Սա մի տեսակ «հիմք» է վեբկայքի կառուցման մեջ: Ուստի, նախքան կայքերի ստեղծման ավելի բարդ տեխնոլոգիաների մեջ խորանալը, խորհուրդ է տրվում ունենալ HTML-ի առնվազն տարրական գիտելիքներ։ Այս դասում մենք կծանոթանանք HTML, արի դասավորենք HTML փաստաթղթի կառուցվածքըև օգտագործել գործնական օրինակներ՝ ձեռք բերված գիտելիքները համախմբելու համար:

      Ինչ է HTML-ը:

      HTMLնշանակում է HyperText Markup Language: Այս լեզուն պատասխանատու է այն բանի համար, թե ինչպես կցուցադրվի հիպերտեքստը կայքի էջերում: Հիմա եկեք պարզենք, թե ինչ է հիպերտեքստը: Գաղտնիք չէ, որ մեկ վեբ էջը կարող է պարունակել բազմաթիվ տարբեր տեսակի տեղեկություններ՝ լինի դա տեքստ, որոշ աղյուսակներ, գրաֆիկներ, տեսանյութեր, աուդիո և այլն: Այսպիսով, այս ամբողջ ինֆորմացիան կարելի է անվանել մեկ բառով՝ հիպերտեքստ։

      Նկատի ունեցեք, որ HTML-ը նշագրման լեզու է, այլ ոչ ծրագրավորման լեզու: Այս լեզուն չունի որևէ տրամաբանական ֆունկցիա և անհնար է դրանում մաթեմատիկական հաշվարկներ կատարել։ HTML էջերն ունեն ընդլայնում .htmlկամ .htmև մշակվում են բրաուզերների կողմից՝ IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera և այլն:

      Հիմա եկեք պարզենք, թե ինչպես է բրաուզերը հասկանում, թե ինչ և ինչպես ցուցադրել վեբ էջում: Դա շատ պարզ է. Հիպերտեքստի նշագրման լեզուն HTML-ն ունի ներկառուցված հրամաններ, որոնք կոչվում են պիտակներ: Նրանց կողմից է, որ բրաուզերը կողմնորոշվում է:

      HTML փաստաթղթի կառուցվածքը

      Ցանկացած HTML փաստաթուղթ (վեբ էջ) պետք է ունենա որոշակի կառուցվածք։ Սա կխուսափի հնարավոր խնդիրներից բրաուզերներում էջեր բացելիս: Որպես օրինակ, եկեք նայենք մի էջ, որը պարունակում է հետևյալ HTML կոդը.

      HTML փաստաթղթի կառուցվածքը ...

      Տեսնենք, թե ինչ է ներառված այս կառույցում հերթականությամբ.

      1. Առաջին բանը, որ հայտնվում է HTML փաստաթղթում, տարբերակի նշումն է (առաջին տող): Ճիշտ աշխատանքի համար այս տողը պետք է նշվի վեբ էջը տեղադրելու ժամանակ:

      3. Այնուհետև գալիս է կայքի վերևի հատվածը (վերնագիր): Դրա համար օգտագործվում է պիտակը . Վերնագրում նշում ենք մեր էջի անունը՝ պիտակների միջև տեղադրելով էջի անվանումը Եվ. Հաջորդը նշվում է HTML փաստաթղթի կոդավորումը (հինգերորդ տող): Սա արվում է կիրիլիցա այբուբենը ճիշտ ցուցադրելու համար: Փակելով վերնագրի տարածքը պիտակով.

      4. Մետա թեգ «նկարագրություն» - էջի ամփոփում, որը նախատեսված է որոնման համակարգերի համար: Այս թեգը կարևոր է որոնման համակարգի օպտիմալացման համար և պետք է լրացվի:

      5. Մետա թեգ «հիմնաբառեր»՝ հիմնաբառեր, որոնք կարող են հայտնվել էջում: Այս թեգը նախատեսված է նաև որոնման համակարգերի համար։ Այս պիտակը մեր օրերում հազվադեպ է օգտագործվում:

      6. Էջի հիմնական մասը բացվում է պիտակով և համապատասխանաբար փակվում է պիտակով

      . Վեբ էջի հիմնական մասը սովորաբար պարունակում է հիմնական բովանդակություն՝ տեքստ, վիդեո, աուդիո և այլ տեղեկություններ:

      Այսպիսով, մենք պատասխանել ենք հարցին, թե ինչ է HTML-ը և ուսումնասիրել ենք HTML փաստաթղթի կառուցվածքը։ Այս դասում ստացված տեղեկատվությունը հիմնական հասկացություններ են, առանց դրանց չես կարող: Ավելի բարդ բաների մասին կխոսենք մյուս դասերին։

      Այսօր մենք կխոսենք HTML5-ում իմաստաբանության մասին: Ես արդեն գրել եմ կարճ ակնարկային գրառում դրա մասին: Ես խորհուրդ եմ տալիս ծանոթանալ դրան նախքան այս հոդվածը կարդալը: Այժմ մենք ավելի մանրամասն կանդրադառնանք այս հարցին, թե ինչպես ճիշտ և գրագետ ձևակերպել HTML5 փաստաթղթի իմաստային կառուցվածքը:

      Այս հոդվածում մենք աստիճանաբար կստեղծենք HTML էջ և կզարդարենք այն իմաստային HTML5 թեգերով։

      Նկար - HTML5 էջի իմաստային կառուցվածք:

      DOCTYPE և մետա պիտակներ էջի վերնագրում

      Եկեք սկսենք ստանդարտ HTML5 փաստաթղթի ձևանմուշից և գլխին ավելացնենք մետա թեգեր.

      Էջի վերնագիր

      Ես պիտակ ավելացրի որը պատասխանատու է հիմնաբառերի համար: Եվ նշեք որը պատասխանատու է էջի նկարագրության համար։ SEO-ի օպտիմալացման համար այս պիտակները պահանջվում են: Անհրաժեշտ է նաև ճիշտ լրացնել պիտակը . Էջի վերնագիրը պետք է եզակի լինի ամբողջ կայքի համար և վերնագրում պարունակի էջի ամբողջ էությունը, որի համար այն նշված է:</p><p>Եկեք ավելի հեռու գնանք: HTML5-ը ներկայացնում է նոր թեգեր, որոնք օգտագործվում են փաստաթղթում իմաստային նշումներ ստեղծելու համար: Սրանք վերնագիր, nav, հիմնական, հոդված, մի կողմ, ստորագիր և այլն պիտակներ են: Ցուցադրման առումով նրանք աշխատում են նույնը, ինչ սովորականները: <div>պիտակներ, այսինքն՝ դրանք բլոկային տարրեր են։ Բայց եթե <div>չունի իմաստային ծանրաբեռնվածություն, ապա վերնագիր, nav, հիմնական և այլն պետք է օգտագործվեն միայն իմաստալից:</p><h3>Էջի վերնագիր</h3><p>Էջի վերնագիրը ձևաչափված է վերնագրի պիտակի մեջ: Խնդրում ենք նկատի ունենալ, որ էջի վերնագիրը գրված է h1 պիտակի միջոցով:</p><p> <!-- Header страницы --> <header> <h1>Կայքի անվանումը</h1> </header> </p><p>Եթե ​​վերնագրի կողքին ունենք նաև կարգախոս, ապա այն տեղադրում ենք p, div կամ span:</p><p> <!-- Header страницы --> <header> <h1>Կայքի անվանումը</h1> <p>կայքի կարգախոսը</p> </header> </p><p><b>Նշում H1 թեգի մասին</b></p><p>Հարկ է նշել, որ HTML5-ում H1 թեգը օգտագործվում է նշելու այն կոնտեյների անվանումը, որտեղ այն գտնվում է (սա կարող է լինել վերնագիր, բաժին, հոդված և այլն):</p><p>Մինչև HTML5 թեգերի հայտնվելը, իմաստաբանությունը որոշ չափով տարբեր էր և տարբեր: Այսպիսով, HTML4-ում կարող է լինել միայն մեկ H1 վերնագիր յուրաքանչյուր էջի համար: Որպես կանոն, սա հոդվածի կամ էջի վերնագիրն էր (օրինակ, եթե դա կատեգորիայի էջ է, որի վրա ցուցադրվում են մի քանի հոդվածներ): Հ2-ն օգտագործվում էր ենթավերնագրերի կամ հիմնական հոդվածի բաժինների համար: H3 ենթաբաժինների համար և այլն:</p><h3>Էջի նավարկություն</h3><p>Կայքի հիմնական նավիգացիայի դիզայնը պետք է պարունակվի nav tag-ում: Պետք է նաև հիշել, որ լավ պրակտիկա է համարվում ցուցակի տարրերով նավիգացիայի ձևավորումը:</p><p> <!-- Главная Навигация по сайту --> <nav> <ul> <li>տուն</li> <li>Պորտֆոլիո</li> <li>Պատկերասրահ</li> <li>Կոնտակտներ</li> </ul> </nav> </p><h3>Էջի բովանդակությունը</h3><p>Էջի հիմնական բովանդակությունը ձևաչափված է հիմնական թեգում: Սա կարող է լինել մեկ հոդված կամ մի քանի հոդվածի նախադիտում, եթե մենք խոսում ենք մի քանի գրառումներով բլոգի էջի մասին: Դուք չեք կարող տեղադրել կողագոտ, էջի վերնագիր, ստորագիր կամ հիմնական նավարկություն հիմնական թեգում:</p><p> <!-- Основное содержимое страниц --> <main>...հիմնական էջի բովանդակությունը...</main> </p><h3>Հոդվածի ձևավորում</h3><p>Հոդվածի պիտակն օգտագործվում է հոդվածները փաթաթելու համար: Ընդհանուր առմամբ, այս թեգը պարունակում է բովանդակության բլոկ, որը կարելի է դուրս բերել էջի կոնտեքստից և օգտագործել առանձին այլուր։ Սա կարող է լինել հոդված (հոդվածի ամբողջական տեքստը կամ նախադիտումը), գրառում ֆորումում և այլն:</p><p>Ստորև բերված օրինակում ես ցույց տվեցի հոդվածի դիզայնը համատեքստում, հիմնական թեգի ներսում: Հոդվածն ունի վերնագրի բլոկ՝ հոդվածի վերնագրով։ Հոդվածի հրապարակման ամսաթիվը նշվում է հատուկ ժամային պիտակով, որը ցուցադրվում է որպես սովորական ներդիր տարր։ Ժամանակի պիտակն ունի հատուկ հատկանիշ, որում հրապարակման ժամանակը պետք է նշվի մեքենայական ձևաչափով: Սա կարող է լինել պարզապես datetime="2015-09-30" կամ ժամերով րոպեներով և վայրկյաններով datetime="2015-09-30T15:25:55": pubdate պարամետրը ցույց է տալիս, որ հոդվածը հրապարակվել է գրվածի հետ միաժամանակ: Եթե ​​սա նորություն է, ապա կարող է պատահել, որ լուրերի ժամը մեկ է, իսկ հրապարակման ժամը՝ տարբեր, դրա համար անհրաժեշտ է երկու անգամ նշել ժամային հատկորոշիչը, իսկ pubdate-ը դնել միայն այն թեգում, որտեղ նշված է հրապարակման ժամը։</p><p> <main> ... <!-- Статья --> <article> <!-- Шапка статьи если в шапке у нас больше чем заголовок --> <header> <!-- Заголовок статьи --> <h1>Հոդվածի վերնագիր</h1> <!-- Дата публикации статьи --> <time datetime="2015-09-30T15:25:55" pubdate>սեպտեմբերի 30</time> </header> <!-- Подзаголовок страницы --> <h2>Հոդվածի ենթավերնագիր</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>Վերոնշյալ օրինակից կարող եք տեսնել, որ վերնագրի և ստորագրի պիտակները օգտագործվել են հոդվածի ներսում՝ հոդվածի վերնագիրն ու ստորագիրն ընդգծելու համար։</p><h3>Կողային գոտի կամ սյունակ վիդջեթներով</h3><p>Յուրաքանչյուր առանձին կողային տարրի համար մենք օգտագործում ենք մի կողմի բլոկ: Դրա ներսում վերնագիրը ֆորմատավորված է h1 թեգով։ Այսպիսով, կողագոտի սյունակը կարող է այսպիսի տեսք ունենալ.</p><p> <!-- Сайдбар --> <div class="sidebar"> <!-- Виджет в сайдбаре --> <aside> <h1>Վիջեթի վերնագիր</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>Վերջին գրառումները</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>Հանրաճանաչ մեկնաբանություններ</h1> ... </aside> </div> </p><h3>Բաժնի պիտակ</h3><p>Բաժնի պիտակն օգտագործվում է թեմատիկորեն առնչվող բովանդակության խումբ կամ հատված ներկայացնելու համար: Դրա օգտագործումը նման է հոդվածին, հիմնական տարբերությամբ այն է, որ տարրի մեջ պարունակվող բովանդակությունը թույլատրվում է իմաստ չունենալ: <section>բուն էջի համատեքստից դուրս: Խորհուրդ է տրվում օգտագործել պիտակներ ( <h1> – <h6>) բաժնի թեման նշելու համար։</p><p>Որպեսզի օրինակ բերեք այն հոդվածը, որը հիմա կարդում եք, կարող եք յուրաքանչյուր պարբերություն փաթաթել պիտակի մեջ <section>. Օրինակ, բաժնի պիտակը կարող է օգտագործվել վայրէջքի էջի բովանդակության բլոկները ընդգծելու համար: Սա նման է div տարրի սահմանմանը, որը հաճախ օգտագործվում է որպես կոնտեյներ բովանդակության համար: Տարբերությունն այն է, որ div-ը իմաստային նշանակություն չունի և ոչինչ չի ասում դրա բովանդակության մասին: Բաժնի պիտակը, ընդհակառակը, օգտագործվում է հստակ նշելու, որ դրա բովանդակությունը իմաստով կապված է: Դուք կարող եք փոխարինել ձեր div թեգերից մի քանիսը բաժինների պիտակներով, բայց միշտ ինքներդ ձեզ հարց տվեք. «Այս բովանդակությունը կապված է, թե ոչ»:</p><p>Քաղաքների ցանկում բաժնի պիտակի օգտագործման օրինակ.</p><p> <h1>Միջոցառում բացի</h1> <section> <header> <h2>Քաղաքներ</h2> </header> <p>Միացե՛ք մեզ այս քաղաքներում 2010թ.</p> <section> <header> <h3>Սիեթլ</h3> </header> <p>Հետևեք դեղին աղյուսով ճանապարհով:</p> <section> <header> <h3>Բոստոն</h3> </header> <p>Դա Բինթաունն է իր ընկերների համար:</p> <section> <header> <h3>Մինեապոլիս</h3> </header> <p>Այդպես է <em>գեղեցիկ</em>.</p> <small>Տեղավորում չի տրամադրվում։</small> </p><h3>Կայքի ստորագիր – Ստորատատ</h3><p>Կայքի ստորագիր նախագծված է պիտակով <footer></p><p> <!-- Подвал сайта --> <footer> <p class="copyright">© 2015 կայք Հեղինակային իրավունք</p> </footer> </p><h3>Եզրակացություն</h3><p>Էջի կառուցվածքը ստուգելու համար կարող եք օգտագործել HTML5 outliner գործիքը: Այն ցույց է տալիս էջի կառուցվածքն ըստ բլոկների և վերնագրերի:</p><p>HTML5-ի իմաստաբանությունը չի սահմանափակվում հոդվածում վերը նշված պիտակներով: Բայց օգտագործելով վերը նշված օրինակները, դուք կարող եք թարմացնել ձեր նշագրումը և ձեր կայքը դարձնել ավելի հարմար որոնման համակարգին, ինչը կհանգեցնի ձեր կայքի ավելի բարձր վարկանիշի որոնման արդյունքներում:</p><p>Այս թեման շարունակելու համար կարող եք ուսումնասիրել այլ նոր HTML5 թեգեր: Ինչպես նաև տվյալների նախագծման և կառուցվածքի միկրո ձևաչափեր, ինչպիսիք են schema.org-ը</p><p><b>Կարևոր նշում HTML5 թեգերի օգտագործման վերաբերյալ:</b>Հստակեցումը չի սահմանում իմաստային պիտակների օգտագործման խիստ կանոններ, այն միայն առաջարկություններ է տալիս դրանց օգտագործման համար: Եթե ​​դուք չեք հասկանում կամ չգիտեք, թե որտեղ և որ HTML5 թեգը օգտագործել, ավելի լավ է օգտագործել div, որպեսզի չվնասեք կամ չխախտեք փաստաթղթի կառուցվածքը:</p><p><b>Հոդվածներ և նյութեր</b></p> <ul><li>1. HTML փաստաթղթերը կառուցվածքային փաստաթղթեր են:</li> <li>2. Տարրերի անունները կարելի է գրել ցանկացած դեպքում։</li> <li>3. Հատկանիշների անունները կարելի է գրել ցանկացած դեպքում։</li> <li>4. Հատկանիշների արժեքները կախված են մեծատառերից, հատկապես հասցեներից (Յունիքս օպերացիոն համակարգերի առանձնահատկությունն այն է, որ տարբեր ռեգիստրներում նիշերի տարբեր մեկնաբանությունն է, ուստի ֆայլերը</li> </ul><p>նկար .gif-ը և picture.GIF-ը տարբեր են):</p> <ul><li>5. Տարրերի անունները չեն կարող բացատներ պարունակել:</li> <li>6. Եթե հատկանիշի արժեքները պարունակում են բացատներ, դրանք պետք է լինեն չակերտների մեջ:</li> <li>7. Լրացուցիչ բացատները, ներդիրները և փոխադրամիջոցները անտեսվում են և սեղմվում մեկ տարածության մեջ:</li> <li>8. Տարրերը կարելի է բույն դնել միմյանց ներսում։ Այս դեպքում պետք է պահպանել բնադրման կանոնը. Ներդրված տարրի ներսում, բացի բացվող պիտակից, պետք է լինի նաև փակող պիտակ։ Խաչմերուկները սխալ են.</li> </ul><h1>HTML փաստաթղթի կառուցվածքը</h1> <p>9. Անծանոթ տարրերն ու ատրիբուտները անտեսվում են բրաուզերների կողմից («սխալների հանդուրժողականություն»):</p> <p>Փաստաթղթերի մեծ մասն ունի ստանդարտ տարրեր, ինչպիսիք են վերնագիրը, պարբերությունները կամ ցուցակները: Օգտագործելով HTML պիտակները՝ դուք կարող եք պիտակավորել այս տարրերը՝ վեբ բրաուզերներին տրամադրելով նվազագույն տեղեկատվություն՝ այդ տարրերը ցուցադրելու համար՝ ընդհանուր առմամբ պահպանելով փաստաթղթերի ընդհանուր կառուցվածքը և տեղեկատվական ամբողջականությունը: Այն ամենը, ինչ անհրաժեշտ է HTML փաստաթուղթ կարդալու համար, վեբ բրաուզերն է, որը մեկնաբանում է HTML պիտակները և ցուցադրում փաստաթուղթը, ինչպես նախատեսված է հեղինակի կողմից:</p> <p>Երբ վեբ զննարկիչը ստանում է փաստաթուղթ, այն որոշում է, թե ինչպես պետք է մեկնաբանվի փաստաթուղթը: Փաստաթղթում հայտնված հենց առաջին պիտակը պետք է լինի պիտակը <HTML>. Այս թեգը վեբ բրաուզերին ասում է, որ փաստաթուղթը գրված է HTML-ի միջոցով:</p> <p><b>Մեկնաբանություններ HTML-ում:</b>Ինչպես ցանկացած լեզու, HTML-ը թույլ է տալիս մեկնաբանություններ տեղադրել փաստաթղթի մարմնում, որոնք պահվում են, երբ փաստաթուղթը փոխանցվում է ցանցով, բայց չեն ցուցադրվում բրաուզերի կողմից: Հաճախ որոշ պիտակներ կամ ամբողջ շարահյուսական կառուցվածքներ «թաքնվում» են բրաուզերների հին տարբերակների մեկնաբանություններում, որոնք չեն կարողանում մշակել դրանք: Մեկնաբանությունները կարող են հայտնվել փաստաթղթի ցանկացած վայրում և ցանկացած քանակությամբ: Պետք է հիշել, որ մեկնաբանությունները մեծացնում են փաստաթղթի չափը և, հետևաբար, բեռնման ժամանակը:</p> <p><b>Փաստաթղթի գլխավոր վերնագրի մասը:</b>Փաստաթղթի գլխի պիտակը պետք է օգտագործվի պիտակից անմիջապես հետո <HTML>և ոչ մի այլ տեղ փաստաթղթի մարմնում: Այս պիտակը ներկայացնում է փաստաթղթի ընդհանուր նկարագրությունը: Սկսել պիտակ <HEAD>տեղադրվում է պիտակից անմիջապես առաջ <TITLE>և այլ պիտակներ, որոնք նկարագրում են փաստաթուղթը, և ավարտվող թեգը</head>տեղադրված է փաստաթղթի նկարագրության ավարտից անմիջապես հետո:</p> <p><b>Փաստաթղթի անվանումը.</b>Վեբ բրաուզերների մեծ մասը ցուցադրում է պիտակի բովանդակությունը <TITLE>փաստաթուղթը պարունակող պատուհանի վերնագրում և էջանիշների ֆայլում, եթե աջակցվում է վեբ բրաուզերի կողմից: Վերնագիրը սահմանափակված է պիտակներով <TITLE>Եվ, տեղադրված պիտակների ներսում . Փաստաթղթի անվանումը չի հայտնվում, երբ փաստաթուղթն ինքնին ցուցադրվում է պատուհանում:

      Փաստաթղթի մարմնի պիտակներ.Փաստաթղթի հիմնական թեգերը նույնացնում են պատուհանում ցուցադրվող HTML փաստաթղթի բաղադրիչները: Փաստաթղթի տեքստը կարող է պարունակել հղումներ դեպի այլ փաստաթղթեր, տեքստ և այլ ձևաչափված տեղեկություններ:

      Փաստաթղթի մարմին.Փաստաթղթի մարմինը պետք է լինի պիտակների միջև Եվ. Սա փաստաթղթի այն մասն է, որը ցուցադրվում է որպես ձեր փաստաթղթի տեքստային և գրաֆիկական (իմաստային) տեղեկատվություն:

      Վերնագրերի մակարդակները<Нх>. Վերնագրերի առաջին մակարդակը (ամենամեծը) նշանակվում է 1-ով, հաջորդը 2-ով և այդպես շարունակվում է մինչև 6-րդ համարը: Բրաուզերների մեծ մասն աջակցում է վերնագրերի վեց մակարդակների մեկնաբանությանը, որոնցից յուրաքանչյուրը սահմանում է իր ոճը: Շատ դեպքերում նման վերնագրի տեքստը կդառնա թավ, և տեքստից հետո կլինի դատարկ տող: Կարևոր է, որ այս թեգերը որոշեն փաստաթղթի տրամաբանական կառուցվածքը և մասնակցեն ինտերնետի որոնման համակարգերի ինդեքսավորմանը: Վեցերորդ մակարդակից բարձր վերնագրերը ստանդարտ չեն և կարող են չաջակցվել դիտարկիչի կողմից:

      Պարբերության պիտակ<Р>. INԻ տարբերություն բառային պրոցեսորների մեծ մասի, HTML փաստաթղթում անտեսվում են փոխադրման վերադարձները: Բրաուզերը բաժանում է պարբերությունները միայն այն դեպքում, եթե կա պիտակ<Р>. Եթե ​​դուք չեք առանձնացնում պարբերությունները պիտակով<Р>, ապա փաստաթուղթը նման կլինի մեկ մեծ պարբերության։

      Նախաֆորմատավորված տեքստային պիտակ 

      .
Նշել 
      Թույլ է տալիս տեքստը ներկայացնել հատուկ ձևաչափով էկրանին:  Նախապես ձևաչափված տեքստն ավարտվում է վերջի պիտակով
      .  Նախապես ձևաչափված տեքստի մեջ կարող եք օգտագործել՝ տողերի հոսք, ներդիրի նիշեր (ութ նիշերով տեղաշարժ դեպի աջ), զննարկչի կողմից տեղադրված անհամաչափ Courier տառատեսակ:
      

      Ցուցակ պիտակներ. HTML փաստաթղթում կան երեք հիմնական տեսակի ցուցակներ՝ համարակալված, պարբերակավոր և նկարագրության ցուցակ:
      

      Դուք կարող եք ստեղծել ներդիր ցուցակներ՝ օգտագործելով ցուցակի տարբեր պիտակներ կամ կրկնելով դրանք ուրիշների մեջ:  Դա անելու համար պարզապես անհրաժեշտ է մեկ զույգ պիտակներ (սկիզբ և վերջ) տեղադրել մյուսի ներսում:  Արդյո՞ք ցանկի մեջ դրված տարրերը կունենան նույն ցուցիչները, որոնք նշում են ցանկի տարրը, կախված է դիտարկիչից:
      

      Համարակալված ցուցակներ.  INՀամարակալված ցուցակում զննարկիչը ավտոմատ կերպով տեղադրում է իրերի համարները հերթականությամբ:  Սա նշանակում է, որ եթե դուք ջնջեք մեկ կամ մի քանի տարրեր համարակալված ցանկից, մնացած թվերն ավտոմատ կերպով կվերահաշվարկվեն:
      

       
        և ավարտվում է պիտակով
       
    • .
      

      Բլետավորված ցուցակներ.  ՀամարՊարբերակներով ցուցակների համար զննարկիչը սովորաբար օգտագործում է պարբերակներ ցուցակի տարրի համար:  Մարկերի տեսակը սովորաբար կազմաձևվում է բրաուզերի օգտագործողի կողմից:
      

      Համարակալված ցուցակը սկսվում է մեկնարկային պիտակով 
        և ավարտվում է պիտակով
      .  Ցանկի յուրաքանչյուր տարր սկսվում է պիտակով<ы>.
      

      Տառատեսակի ձևավորում. HTML-ը թույլ է տալիս տեքստի հատվածների տառատեսակի ընտրության երկու մոտեցում:  Մի կողմից, դուք կարող եք ուղղակիորեն նշել, որ տեքստի որոշակի հատվածում տառատեսակը պետք է լինի թավ կամ շեղ, այսինքն.  փոխել տեքստի ֆիզիկական ոճը.  Մյուս կողմից, հնարավոր է տեքստի որոշ հատված նշել որպես ոչ նորմալ տրամաբանական ոճ՝ թողնելով այդ ոճի մեկնաբանությունը բրաուզերի վրա։
      

      Գրաֆիկա HTML փաստաթղթի ներսում: WEB-ի ամենագրավիչ առանձնահատկություններից մեկը HTML փաստաթղթում գրաֆիկական և այլ տեսակի տվյալներ ներառելու հնարավորությունն է:
      

      HTML փաստաթղթերում գրաֆիկան օգտագործելու երկու եղանակ կա.  Առաջինը գրաֆիկական պատկերների ներկառուցումն է փաստաթղթի մեջ, որը թույլ է տալիս օգտագործողին տեսնել պատկերները ուղղակիորեն փաստաթղթի այլ տարրերի համատեքստում:  Դա արվում է պիտակի միջոցով .  Այս պիտակը կետավոր է, այսինքն.  այն չի փակվում:  Պիտակի շարահյուսություն.
      

      

      Պահանջվող պարամետրն ունի նույն շարահյուսությունը, ինչ ստանդարտ URL-ը:  Այս URL-ը զննարկիչին ասում է, թե որտեղ է
      

      նկարչություն.  Նկարը պետք է պահվի զննարկչի կողմից աջակցվող գրաֆիկական ձևաչափով:  Այսօր դրանք GIF, JPG, PNG ձևաչափեր են:  Դրանք աջակցվում են բրաուզերների մեծ մասի կողմից:
      

      ALT = "տեքստ"
      

      Այս կամընտիր տարրը սահմանում է տեքստը, որը կցուցադրվի զննարկիչում, որը չի աջակցում գրաֆիկական կամ պատկերի գրաֆիկան անջատված է:  Սովորաբար սա պատկերի կարճ նկարագրությունն է, որը օգտատերը կարող է կամ կկարողանա տեսնել էկրանին:  Եթե ​​այս պարամետրը բացակայում է, ապա բրաուզերների մեծ մասը նկարի փոխարեն ցուցադրում է դատարկ շրջանակ:  Նշել խորհուրդ է տրվում, եթե օգտվողներն օգտագործում են ոչ գրաֆիկական զննարկիչ, ինչպիսին է Lynx-ը, և որոնման համակարգերի ինդեքսավորման համար:  Տեքստը տեսանելի է նաև, երբ դուք որոշ ժամանակ պահում եք մկնիկի կուրսորը՝ առանց պատկերի վրայով շարժվելու՝ որպես համակարգի գործիքի հուշում կուրսորի տակ:
      

      Բրաուզերներից շատերը թույլ են տալիս ձեր փաստաթղթում ներառել ֆոնային պատկեր, որը կկրկնվի լոգարանի սալիկների նման և կհայտնվի որպես ամբողջ փաստաթղթի ֆոն:  Սա երկրորդ ճանապարհն է։  Որոշ օգտվողներ սիրում են ֆոնային գրաֆիկա, ոմանք՝ ոչ:  Աննկատ կիսաթափանցիկ նախշը (պաստառը) սովորաբար լավ տեսք ունի փաստաթղթերի մեծ մասի համար որպես ֆոն:
      

      Հիպերտեքստային հղումները հիմնական բաղադրիչն են, որը դարձնում է WEB-ը գրավիչ օգտվողների համար:  Հիպերտեքստային հղումներ ավելացնելով (այսուհետ՝ հղումներ) օգտատերը դարձնում է միացված և կառուցվածքային փաստաթղթերի մի շարք, ինչը նրան թույլ է տալիս հնարավորինս արագ և հարմարավետ ստանալ իրեն անհրաժեշտ տեղեկատվությունը:
      

      Հղումները ունեն ստանդարտ ձևաչափ, որը թույլ է տալիս դիտարկիչին մեկնաբանել դրանք և կատարել անհրաժեշտ գործառույթները (զանգի մեթոդները)՝ կախված հղման տեսակից։  Հղումները կարող են մատնանշել մեկ այլ փաստաթղթի, փաստաթղթի որոշակի վայրի կամ կատարել այլ գործառույթներ, ինչպիսիք են ֆայլի հարցումը:  Դուք կարող եք օգտագործել տեքստը կամ պատկերը կամ երկուսն էլ որպես հիպերհղում:
      

      Հղման կառուցվածքը HTML փաստաթղթում:Որպեսզի զննարկիչը ցուցադրի URL-ի հղումը, դուք պետք է տեղադրեք տեքստ կամ պատկեր հիպերհղման պիտակի ներսում:  HTML շարահյուսությունը հետևյալն է.
      

      <А HREF="URL">text-or-image- that- will-be-highlighted- as a-link
      


      Նշել<А HREF="URL">բացում է հղման նկարագրությունը և պիտակը- փակում է:  Ցանկացած տեքստ, որը գտնվում է այս երկու պիտակների միջև, ընդգծվում է հատուկ ձևով վեբ բրաուզերի կողմից:  Սովորաբար այս տեքստը հայտնվում է ընդգծված և ընդգծված:  Պատկերը շրջանակված է ուղղանկյուն շրջանակով։  URL-ը ներկայացնող տեքստը չի ցուցադրվում բրաուզերի կողմից, այլ օգտագործվում է միայն իր նախատեսված գործողությունները կատարելու համար, երբ հղումն ակտիվանում է (սովորաբար սեղմելով ընդգծված կամ ընդգծված տեքստի վրա):
      

      Հղումներ դեպի փաստաթղթի պիտակներ:Դուք կարող եք կապել նույն փաստաթղթի տարբեր տարածքների կամ բաժինների՝ օգտագործելով հատուկ թաքնված պիտակներ այդ բաժինների համար:  Սա թույլ է տալիս արագ անցնել փաստաթղթի մեջ բաժինից բաժին՝ առանց էկրանը ոլորելու:  Հենց որ օգտատերը սեղմի հղման վրա, զննարկիչը նրան կտեղափոխի փաստաթղթի նշված բաժին, և այս բաժնի պիտակը պարունակող տողը կտեղադրվի բրաուզերի պատուհանի առաջին տողում (եթե «երկարությունը» բրաուզերի պատուհանի փաստաթուղթը բավարար է):
      

      Յուրաքանչյուր HTML փաստաթուղթ պետք է սկսվի պիտակով <
HTML>
և վերջացրեք պիտակով HTML>
.  Այս թեգերը ցույց են տալիս, որ նրանց միջև եղած տողերը ներկայացնում են մեկ HTML փաստաթուղթ:  Բացի այդ, դուք կարող եք տեսնել, որ HTML ֆայլը որպես ամբողջություն HTML լեզվի տարր է:
      Բացի այդ, HTML փաստաթուղթը պետք է պարունակի HEAD (փաստաթղթի տեղեկատվություն) և BODY (փաստաթղթի մարմին) տարրեր:
      Փաստաթղթերի բաժինԳԼՈՒԽ
      Փաստաթղթի HEAD բաժինը սահմանում է դրա անվանումը և պարունակում է նաև լրացուցիչ տեղեկություններ փաստաթղթի մասին բրաուզերի համար:  Այս բաժինը պարտադիր չէ, բայց խորհուրդ է տրվում, որ այն միշտ օգտագործեք ձեր HTML փաստաթղթերում, քանի որ լավ գրված վերնագիրը կարող է բավականին օգտակար լինել:
      Վերնագրի բաժինը սկսվում է պիտակով <
ԳԼՈՒԽ>
և անմիջապես հետևում է պիտակին .  HEAD տարրի բացման և փակման պիտակների միջև կան վերնագրի այլ տարրեր:
      Փաստաթղթի վերնագիր
      HTML փաստաթղթին անուն տալու համար պիտակն է <
ԿՈՉՈՒՄ>
.  Այս անունը կցուցադրվի դիտարկիչի պատուհանի վերնագրում:  Վերնագիրը գրված է պիտակների միջև Եվև տեքստի տող է:  Այս տողի երկարությունը կարող է լինել ցանկացած, բայց խորհուրդ է տրվում այն ​​դարձնել ոչ ավելի, քան 60 նիշ:  TITLE տարրը պետք է հայտնվի միայն HEAD բաժնում:
      Փաստաթղթերի բաժինՄԱՐՄԻՆ
      Փաստաթղթի այս բաժինը պարունակում է տեղեկատվությունը, որը ցուցադրվում է դիտարկիչի պատուհանում:  BODY բաժինը պետք է սկսվի պիտակով <
ՄԱՐՄԻՆ>
և վերջացրեք պիտակով ՄԱՐՄԻՆ>
, որոնց միջև գտնվում են փաստաթղթի բովանդակությունը կազմող HTML տարրերը։
      Նյութի ճշգրտումՄԱՐՄԻՆ
      Նշել ունի մի շարք հատկանիշներ, որոնք որոշում են փաստաթղթի տեսքը:  Ստորև ներկայացված է պիտակի ճշգրտումը .
      TEXT = "տեքստի գույն"
      BGCOLOR = ֆոնի գույն
      BACKGROUND = «ֆոնային պատկերի հասցեն»
      TEXT հատկանիշը նշում է ամբողջ փաստաթղթի տառատեսակի գույնը RGB կամ նիշերի նշումով:  Լռելյայն (եթե այս հատկանիշը նշված չէ), օգտագործվում են դիտարկիչի կարգավորումները:
      BGCOLOR հատկանիշը նշում է փաստաթղթերի դիտարկիչի պատուհանի ֆոնի գույնը RGB կամ խորհրդանշական նշումով:  Բրաուզերի կարգավորումները օգտագործվում են լռելյայն:
      BACKGROUND հատկանիշը թույլ է տալիս նշել նկարի հասցեն և անունը, որն օգտագործվում է որպես ֆոն:  Այս նկարը կվերարտադրվի և կտարածվի փաստաթղթի ֆոնին:
      LINK, VLINK և ALINK ատրիբուտները նշում են հիպերհղումների գույները RGB կամ խորհրդանշական նշումով:  Բրաուզերի կարգավորումները օգտագործվում են լռելյայն:  Չայցելված հիպերհղումը հիպերհղում է, որը դեռ չի օգտագործվել մեկ այլ փաստաթուղթ նավարկելու համար:  Այցելած հիպերհղումը հիպերհղում է, որն արդեն օգտագործվել է մեկ այլ փաստաթուղթ նավարկելու համար:  Ակտիվ հիպերհղում – հիպերհղում դեպի այն փաստաթուղթը, որտեղ այժմ նավարկվում է:
      Խորհուրդներ BODY պիտակի ատրիբուտների օգտագործման համար
       Եթե BODY թեգում նշել եք առնվազն մեկ գույն, ապա նշեք նաև մյուսները:  Դա պայմանավորված է նրանով, որ օգտատերը կարող է սահմանել իր բրաուզերի գունային կարգավորումները, քանի որ դա իրեն ավելի հարմար է։  Միայն մեկ գույն նշելը կարող է հանգեցնել որոշ օգտատերերի տեքստի միախառնմանը ֆոնի գույնի մեջ:  Արդյունքում փաստաթուղթը դիտելը դժվար կլինի։
       Ընտրեք տեքստի գույնը, որպեսզի այն «աշխատի» ֆոնի գույնի կամ պատկերի հիմնական գույների հետ:  Օրինակ՝ կանաչի վրա կարմիրը կարող է լուրջ խնդիրներ առաջացնել զգալի թվով մարդկանց համար։
       BGCOLOR և BACKGROUND-ը կարող են նշվել BODY տարրում:  Այս դեպքում զննարկիչը նախապատվությունը տալիս է BACKGROUND-ին, բայց եթե ֆոնի պատկերը հնարավոր չէ բեռնել, կօգտագործվի BGCOLOR:  Հետևաբար, փորձեք սահմանել ֆոնի գույնը, որպեսզի նման լինի ֆոնային պատկերի գույնին, որպեսզի չխախտի փաստաթղթի գունային հավասարակշռությունը:
      


      

      

    
       
      
    
      Կարող է օգտակար լինել կարդալ.