Անշրջելի կանոններ html. HTML փաստաթղթերի կառուցման կանոններ. CSS ոճավորման կանոններ
HTML հիմունքներպարունակում է HTML լեզվի հիմնական կանոնները, HTML էջի կառուցվածքի նկարագրությունը, HTML փաստաթղթի կառուցվածքում հարաբերությունները HTML տարրերի միջև:
HTML փաստաթուղթը պարզ տեքստային փաստաթուղթ է, այն կարող է ստեղծվել այնպես, ինչպես սովորական տեքստային խմբագրիչում: (Տետր), իսկ մասնագիտացվածում՝ կոդի ընդգծմամբ (Notepad++, Visual Studio Code և այլն). HTML փաստաթուղթն ունի .html ընդլայնում:
HTML փաստաթուղթը բաղկացած է HTML տարրերի և տեքստի ծառից: Յուրաքանչյուր տարր սկզբնաղբյուր փաստաթղթում նույնացվում է սկզբի (բացման) և ավարտի (փակման) պիտակով (հազվադեպ բացառություններով):
Սկսել պիտակցույց է տալիս, թե որտեղ է սկսվում տարրը, ավարտը, որտեղ ավարտվում է: Փակման պիտակձևավորվում է թեգի անունից առաջ շեղ ավելացնելով.<имя тега> … имя тега>. Մեկնարկի և վերջի պիտակների միջև գտնվում է պիտակի բովանդակությունը՝ բովանդակություն:
Միայնակ թեգերը չեն կարող ուղղակիորեն պահել բովանդակությունը, այն գրված է որպես հատկանիշի արժեք, օրինակ՝ թեգ կստեղծի կոճակ տեքստով Կոճակներսում։
Պիտակներ կարող են տեղադրվել միմյանց մեջ, օրինակ.
Տեքստ
. Ներդրումներ կատարելիս պետք է հետևել դրանց փակման կարգին («մատրյոշկայի» սկզբունքը), օրինակ, հետևյալ գրառումը սխալ կլինի.Տեքստ
.HTML տարրերը կարող են ունենալ ատրիբուտներ (գլոբալ, կիրառվում է բոլոր HTML տարրերի վրա և իրենց սեփականը): Հատկանիշները գրված են տարրի բացման պիտակում և պարունակում են անուն և արժեք, որոնք նշված են ձևաչափի հատկանիշ name="value": Հատկանիշները թույլ են տալիս փոխել այն տարրի հատկությունները և վարքագիծը, որի համար դրանք սահմանված են:
Յուրաքանչյուր տարր կարող է ունենալ մի քանի դասի արժեքներ և միայն մեկ id արժեք: Բազմաթիվ դասի արժեքներ գրվում են բացատով,
Զննարկիչը դիտում է (մեկնաբանում) HTML փաստաթուղթը՝ կառուցելով դրա կառուցվածքը (DOM) և ցուցադրելով այն այս ֆայլում ներառված հրահանգների համաձայն (ոճաթերթեր, սկրիպտներ): Եթե նշումը ճիշտ է, ապա բրաուզերի պատուհանը կցուցադրի HTML էջ, որը պարունակում է HTML տարրեր՝ վերնագրեր, աղյուսակներ, պատկերներ և այլն:
Մեկնաբանության գործընթաց (վերլուծություն)սկսվում է նախքան վեբ էջը զննարկիչում ամբողջությամբ բեռնվելը: Բրաուզերները հենց սկզբից հաջորդաբար մշակում են HTML փաստաթղթերը, միաժամանակ մշակելով CSS և կապելով ոճաթերթերը էջի տարրերին:
HTML փաստաթուղթը բաղկացած է երկու բաժիններից՝ վերնագիր՝ պիտակների միջև
… իսկ բովանդակությունը՝ պիտակների միջև ….
Վեբ էջի կառուցվածքը
1. HTML փաստաթղթի կառուցվածքը
HTML լեզուն հետևում է փաստաթղթի տեսակի հայտարարագրման ֆայլում պարունակվող կանոններին: (Փաստաթղթի տեսակի սահմանում կամ DTD). DTD-ն XML փաստաթուղթ է, որը սահմանում է, թե որ պիտակները, հատկանիշները և դրանց արժեքները վավեր են որոշակի HTML տեսակի համար: HTML-ի յուրաքանչյուր տարբերակ ունի իր սեփական DTD-ն:
DOCTYPEպատասխանատու է բրաուզերի կողմից վեբ էջի ճիշտ ցուցադրման համար: DOCTYPE-ը սահմանում է ոչ միայն HTML տարբերակը (օրինակ՝ html), այլ նաև համացանցում համապատասխան DTD ֆայլը:
Տարրեր պիտակի մեջ , ձևավորել փաստաթղթի ծառ, այսպես կոչված օբյեկտի մոդելըփաստաթուղթ, DOM (փաստաթղթի օբյեկտի մոդել). Միաժամանակ տարրը արմատային տարրն է։
Բրինձ. 1. Վեբ էջի ամենապարզ կառուցվածքը
Վեբ էջի տարրերի փոխազդեցությունը հասկանալու համար անհրաժեշտ է դիտարկել այսպես կոչված «ընտանեկան հարաբերություններ»տարրերի միջև։ Բազմաթիվ բնադրված տարրերի միջև փոխհարաբերությունները դասակարգվում են ծնողների, երեխաների և եղբայրների միջև հարաբերությունների:
ՆախահայրՏարր, որը պարունակում է այլ տարրեր: Նկար 1-ում բոլոր տարրերի նախահայրն է . Միաժամանակ տարրը
այն բոլոր պիտակների նախահայրն է, որը պարունակում է.,
, ,
Հետնորդ- տարր, որը տեղակայված է մեկ կամ մի քանի տեսակի տարրերի ներսում: Օրինակ,
հետնորդ է , և տարրըԵրկուսի զավակն է
և .մայր տարր- ավելի շատ այլ տարրերի հետ կապված տարր ցածր մակարդակ, և լինելով նրանց վերևում գտնվող ծառի վրա: Նկար 1
և . ՆշելԾնող է միայն .
մանկական տարր- մեկ այլ տարրի անմիջականորեն ենթակա տարր բարձր մակարդակ. Նկար 1-ում միայն տարրեր
, ,
Եվ
քույր տարր- տարր, որն ունի ընդհանուր մայր տարր դիտարկվող տարրի հետ, այսպես կոչված, նույն մակարդակի տարրեր: Նկար 1
և - նույն մակարդակի տարրեր, ինչպես նաև տարրեր , և
Նրանք միմյանց հետ քույր են։
1.1. Տարր
1.2. Տարր
Գլուխ
...պարունակում է էջի մասին տեխնիկական տեղեկատվություն՝ վերնագիր, նկարագրություն, որոնման համակարգերի հիմնաբառեր, կոդավորում և այլն։ Դրանում մուտքագրված տեղեկատվությունը չի ցուցադրվում բրաուզերի պատուհանում, այլ պարունակում է տվյալներ, որոնք բրաուզերին ասում են, թե ինչպես մշակել էջը:1.2.1. Տարր
Պահանջվող հատվածի պիտակ
պիտակն է1.2.2. Տարր
Ընտրովի բաժնի պիտակ
մեկ պիտակ է . Դրանով դուք կարող եք սահմանել էջի բովանդակության և հիմնաբառերի նկարագրությունը որոնման համակարգերի, HTML փաստաթղթի հեղինակի և այլ մետատվյալների հատկությունների համար: Տարր կարող է պարունակել բազմաթիվ տարրեր , քանի որ կախված օգտագործվող ատրիբուտներից՝ դրանք տարբեր տեղեկություններ են կրում։
Էջի բովանդակության և հիմնաբառերի նկարագրությունը կարելի է նշել միաժամանակ մի քանի լեզուներով, օրինակ՝ ռուսերեն և անգլերեն.
Պիտակի հետ Դուք կարող եք անջատել կամ թույլատրել վեբ էջի ինդեքսավորումը որոնման համակարգերով.
Նշված ժամանակահատվածից հետո էջը ավտոմատ կերպով վերաբեռնելու համար դուք պետք է օգտագործեք թարմացման արժեքը.
Էջը կվերաբեռնվի 30 վայրկյանից: Այցելուն մեկ այլ էջ վերահղելու համար անհրաժեշտ է նշել URL-ը url պարամետրում.
Հատկանիշ | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
նիշերի հավաքածու | Նշում է ընթացիկ HTML փաստաթղթի նիշերի կոդավորումը. | ||||||||||||||||||||
բովանդակությունը | Պարունակում է կամայական տեքստ, որը նշում է http-equiv կամ name հատկանիշի հետ կապված արժեքը՝ կախված դրանց արժեքից: | ||||||||||||||||||||
http-համարժեք | Կառավարում է դիտարկիչի գործողությունները այս վեբ էջում (համարժեք HTTP վերնագրերին): Էջը ցուցադրելիս զննարկիչը կհետևի հատկանիշում տրված հրահանգներին. default-style-ը սահմանում է էջում օգտագործելու նախընտրելի ոճը: Բովանդակության հատկանիշը պետք է պարունակի տարրի id-ը , որը վերաբերում է CSS ոճի թերթիկին կամ տարրի ID-ին օգտագործելով տարր . Տարրը չի պահանջում փակման պիտակ: Այս տարրը սահմանում է ընթացիկ էջի և այլ փաստաթղթերի միջև կապը: Էջում կարող են լինել մի քանի նման տարրեր։ Մուտքը կունենա հետևյալ տեսքը.
1.2.5. Տարր |