Կայքեր, բլոգեր, վեբ էջեր՝ մեր ժամանակներում արդեն ծանոթ հասկացություններ: Համացանցի զարգացման հետ մեկտեղ վեբ էջերի հոսթինգի կայքերը անհավանական տարածում են գտել, և դա զարմանալի չէ. ոմանց համար սեփական կայք ունենալն անհրաժեշտություն է, ոմանց համար՝ հաճելի ժամանց: Առաջին դեպքում խոսքը սովորաբար ֆիրմաների, կորպորացիաների, անհատ ձեռնարկատերերի մասին է, երբ նրանք գովազդում են պահանջարկ ունեցող ցանկացած ապրանք կամ ծառայություն։ Երկրորդը բլոգերների մասին է։
Բացի սրանից, կան համացանցի օգտատերեր, ովքեր պարզապես տեղեկատվություն են փնտրում, կարդում բլոգներ, դիտում տեսանյութեր և այլն:
Որակյալ կայք ստեղծելու համար կան բազմաթիվ տարբերակներ: Մենք կենտրոնանալու ենք HTML-ի միջոցով վեբ ծրագրավորման վրա։
Ինչ է HTML
HTML-ը նշանակում է Hyper Text Mark-Up Language: Անգլերենից թարգմանված՝ սա նշանակում է «Հիպերտեքստի նշագրման լեզու»:
Այլ կերպ ասած, HTML-ը կոդերի մի շարք է, որոնցով կարող եք ստեղծել կայքի հիմնական տարրերը, դրա շրջանակը, ինչպես օրինակ.ինչպես են բառերը կազմվում նախադասություններից։
HTML կոդերը գրված են բացառապես լատինական տառերով և կոչվում են պիտակներ, և յուրաքանչյուր ծածկագիր փակցված է անկյունային փակագծերում: Որոշ պիտակներ զուգակցված են, որոշները՝ չզուգակցված:
Զուգտկված նշանակում է, որ դրանք պետք է օգտագործվեն զույգերով առանց ձախողման: Օրինակ, բացվող պիտակը ցույց է տալիս, թե որտեղ է այն սկսվում վեբ էջի վրա, իսկ փակող պիտակը ցույց է տալիս, թե որտեղ է այն դադարում: Վերջինս առաջինից տարբերվում է բացման անկյան փակագծից հետո շեղ նիշի առկայությամբ։ Օրինակ՝ -ը բացման թեգն է, ՝ փակման պիտակը:
Չզուգակցված պիտակները գործընկերոջ կարիք չունեն:
Շատ պիտակներ կարող են ունենալ ատրիբուտներ՝ լրացուցիչ տարրեր, որոնք դրան ավելի կոնկրետ նշանակություն են տալիս: Օրինակ՝ պիտակը.
Որտեղ օգտագործվում է HTML
Դասական ըմբռնումը, թե որտեղ է անհրաժեշտ HTML-ը, դա կայքի կառուցումն է:
Գործնականում դա կարող է բավարար լինել, քանի որ HTML-ը թույլ է տալիս ստեղծել կայքի հիմնական տարրերը, մենյուները (ներառյալ բազմամակարդակները), սահմանել ֆոն, տեղադրել տեքստ, պատկերներ, աուդիո, վիդեո, խմբագրել տառատեսակները: և շատ ավելին։
Սակայն կան այլ լեզուներ, որոնք թույլ են տալիս ավելի հետաքրքիր և հաճախ անհրաժեշտ տարրեր ավելացնել վեբ էջին՝
- CSS-ը ոճեր է սահմանում ամբողջ կայքի համար՝ առանց պիտակների միջոցով առանձին տարրերի ոճային առանձնահատկությունները անընդհատ սահմանելու անհրաժեշտության, օրինակ՝ տեքստի գույնն ու տառատեսակը:
- Սցենարի լեզուն թույլ է տալիս կայքում մշակել և տեղադրել մինի ծրագրեր (սկրիպտներ)՝ սկսածսովորական էսթետիկ բաներ (հղման գույնի փոփոխություն մկնիկի վրա սավառնելիս) և վերջացրած ֆունկցիոնալներով (հաճախորդների էլ.փոստի հասցեների, հեռախոսահամարների հավաքում):
- PHP-ով դուք կարող եք մշակել ձեր սեփական հյուրերի գիրքը կամ մեկնաբանությունների համակարգը:
Նաև HTML-ն օգտագործվում է բաշխման համար էլ-նամակների ստեղծման մեջ:
Ինչ է հղումը
Նրանք թույլ են տալիս նավարկելու մեկ այլ վեբ էջ, ինչպես կայքի ներսում, այնպես էլ արտաքին:
HTML հղումները սովորաբար օգտագործվում են.
- Արտաքին վեբ ռեսուրս գնալու համար:
- Կայքի էջերով շարժվելու համար:
- Google ձևաթղթեր գնալու համար:
Աղբյուրի հղումը նույնպես հաճախ նշվում է HTML-ով, հատկապես, որ այլ կայքից նյութ պատճենելիս պետք է նշեք հեղինակին: Հակառակ դեպքում, առանց վերագրման պատճենումը կարող է ընկնել հեղինակային իրավունքի խախտման, բովանդակության գողության և հակադարձման սահմանումների ներքո: Բացի այդ, փոխառված, ոչ եզակի նյութերի օգտագործումը նվազեցնում է SEO-ի արդյունավետությունը, իսկ աղբյուրին հղումը նշելը նվազեցնում է ռիսկերը:
Հղումների տեսակները
Դասական իմաստով հղումը վեբ ռեսուրսի հասցեն է, որին կարող եք գնալ՝ սեղմելով դրա վրա:
Բացի այս, կան հիպերհղումներ՝ տեքստ և պատկերներ: Այս դեպքերում HTML հղումը «թաքնված» է ինչ-որ նախադասության (բառի) կամ պատկերի տակ, և դրան հետևելու համար հարկավոր է սեղմել տեքստի կամ պատկերի վրա։
Հղումների այլ տեսակներ՝
- Unvisited - հղում, որի վրա դեռ չեն սեղմել որոշակի նստաշրջանի ընթացքում: Օրինակ, եթե երեկ հետևել եք այս հղմանը, այնուհետև անջատել եք ձեր համակարգիչը և կրկին միացրել եք այն այսօր, այժմ հղումը կրկին չայցելված է, քանի որ նոր նիստ է սկսվել:
- Ակտիվ - այս վիճակում հղումը պահվում է շատ կարճ ժամանակով՝ հղումը սեղմելու և դրան հետևելու միջև ընկած ընդմիջումով:
- Այցելել - հղում, որն արդեն այցելել է առնվազն մեկ անգամ մեկ նստաշրջանի ընթացքում:
Սովորական տեքստային հղումների դեպքում այցելածները հակված են փոխելու գույնը, եթե այլ բան նշված չէ:
Հիպերկապված պատկերը չի փոխում իր տեսքը, անկախ նրանից՝ այցելում են, թե ոչ:
Ինչպես տեղադրել սովորական հղում
Բազմաթիվ վեբ ռեսուրսներ կայքի հասցեն ընկալում են որպես հղում, անմիջապես դարձնում այն սեղմելի և ընդգծում գույնով: Օրինակ, եթե հասցեն ուղարկվում է մեսենջերում կամ էլ. փոստով, սեղմելով դրա վրա, կարող եք գնալ կայք։
Ինքներդ HTML-ի միջոցով կայք ստեղծելու դեպքում դուք պետք է տեղադրեք հղում՝ օգտագործելով հատուկ թեգ: Այն կունենա հետևյալ տեսքը՝ կայքի հասցեն: Հղման տեքստը HTML-ում պետք է ամբողջությամբ նշվի արձանագրությամբ:
Ինչպես տեղադրել տեքստային հիպերհղում
Ավելի վաղ ասվել է, որ տեքստային հիպերհղումը կատարում է նույն գործառույթը, ինչ սովորական հղումը, բայց ավելի գեղագիտական տեսք ունի. կայքի հասցեի փոխարեն, որը հաճախ անհարկի երկար է, նշվում է բառ կամ արտահայտություն: Օրինակ, «Փնտրեք տեղեկատվություն այստեղ» նախադասության մեջ դուք կարող եք թաքցնել հղումը«այստեղ» բառը. Այն կնշվի, և դրա վրա սեղմելով օգտվողը կտեղափոխվի ցանկալի կայք:
Ինչպես ստեղծել HTML հղում, արդեն քննարկվել է ավելի վաղ: Դուք կարող եք տեղադրել տեքստային հիպերհղում, օգտագործելով նույն պիտակը: Միակ տարբերությունն այն է, որ պիտակների միջև պետք է նշել տեքստը, որի տակ կթաքնվի հղումը՝ տեսանելի տեքստ:
Ինչպես տեղադրել պատկերի հիպերհղում
Այստեղ մի փոքր ավելի բարդ է: Մենք օգտագործում ենք նույն թեգը, բայց տեքստի փոխարեն պետք է նշել նկարի ուղին:
Ուղին պատկերի գտնվելու վայրն է: Եթե նկարը (լուսանկարը) գտնվում է ֆայլերի փոխանակման ծառայության վրա, ապա դուք պետք է նշեք բոլոր թղթապանակները դեպի պատկեր տանող ճանապարհի երկայնքով կտրվածքով: Հնարավորության դեպքում կարող եք նաև ներառել պատկերի հղում:
հատկորոշելու համար
բացի src-ից, կիրառելի են նաև այլ ատրիբուտներ, որոնք թույլ են տալիս կարգավորել պատկերի բարձրությունը, լայնությունը և գտնվելու վայրը և շատ ավելին: Դրանցից մի քանիսը`
- Src - նշում է պատկերի ուղին:
- Lowsrc - նույնական է նախորդ հատկանիշին, բայց նշված է ցածրորակ պատկերների համար:
- Բարձրություն - նկարի բարձրություն.
- Լայնությունը՝ դրա լայնությունը։
- Alt - պատկերի նկարագրություն: Երբ սավառնում եք լուսանկարի կամ նկարի վրա, այս հատկանիշում նշված տեքստը կհայտնվի:
- Սահման - որոշում է պատկերի շուրջ եզրագծի հաստությունը:
Հատկանիշները նշված են պիտակից հետո և ներառված ենդրա կազմը։ Հատկանիշին պետք է հաջորդի դրա արժեքը: Օրինակ, ատրիբուտների համար «բարձրություն» կամ «լայնություն» (բարձրություն, լայնություն) նշում է վեբ էջում պատկերի բարձրությունը: Չափման միավորը պիքսելներն են, եթե այլ բան նշված չէ:
Այն կունենա հետևյալ տեսքը՝ <a href="վեբ էջի հասցե"
. Այս հատկանիշները կօգնեն սահմանել պատկերի համապատասխան չափը: Սահմանն օգնում է ստեղծել անտեսանելի եզրագիծ պատկերի շուրջ:
Վերոնշյալ ատրիբուտները կիրառվում են առանձին պատկերի տեղադրման պիտակի վրա: Օրինակ՝.
Ինչ են խարիսխային հղումները
Խարիսխ հղումներ ստեղծելը շատ օգտակար հմտություն է: Հաճախ անհրաժեշտություն է առաջանում տեղադրել վեբ էջ երկար տեքստային բլոկով կամ մեկ էջի վրա մի քանի ենթաբաժիններով: Այս դեպքում դուք կարող եք անմիջապես սկսել տեքստի կամ վեբ էջի ենթաբաժինների հղումների ցանկից, և երբ սեղմեք դրանց վրա, օգտվողը անմիջապես կգնա պահանջվող բաժին:
Խարիսխ հղումներ ստեղծելու համար կպահանջվի հատկանիշի պիտակների ավելի շատ օգտագործում, քան այլ տեսակի հղումներ:
Նախ, դուք պետք է սահմանեք ընդհանուր արժեքը տեղեկատվության յուրաքանչյուր բլոկի կամ տեքստի ենթաբաժնի համար՝ օգտագործելով վերին հատկանիշը, այնուհետև այն կապեք համապատասխան հղման հետ:
Նրանց առանձնահատկություններն ավելի ընդարձակ են, ուստի խորհուրդ է տրվում նախ տիրապետել ավելի պարզ հղումների ստեղծմանը, այնուհետև անցնել խարիսխ հղումների ձևավորմանը։
Խորհուրդներ
Օգնություն փորձառուներիցծրագրավորողներ:
- Դուք կարող եք այնպես անել, որ հղումի մասին տեղեկատվությունը ցուցադրվի HTML-ում սավառնելիս: Դրա համար alt հատկանիշը, որը մենք օգտագործում ենք նաև գրաֆիկական տարրերի համար, կարող է օգտակար լինել:
- Հնարավոր է կազմել հղումների ցանկ՝ օգտագործելով HTML: Մասնավորապես, սա կարող է օգտակար լինել խարիսխի հղումների համար, ինչպես նաև այն ժամանակ, երբ դուք պետք է կազմեք վեբ ռեսուրսների ցանկ, որին կարող եք հետևել ուղիղ ընթացիկ վեբ էջից հղումը:
- CSS-ի և JavaScript-ի, ինչպես նաև HTML-ի որոշ գործառույթների օգնությամբ դուք կարող եք ստեղծել սովորականից տարբերվող տեքստային հղումների և հիպերհղումների ձևավորում: Օրինակ, երբ սավառնում եք հղման վրա, այն կարող է փոխել իր գույնը և վերադառնալ նախկինին, երբ կուրսորը հեռու է դրանից: Սա կարելի է անել հատուկ JavaScript սկրիպտով: Բացի այդ, հղման գույնը կարող է սահմանվել այլ բան, քան կապույտը՝ չայցելվածի համար, կամ մանուշակագույնը՝ այցելելու համար: Սա CSS-ի գործն է:
- Մի չարաշահեք հղումները: Շատ անհամապատասխան հղումներով վեբ էջը անփույթ և անփույթ տեսք ունի:
- Համոզվեք, որ օգտվողը հասկանում է, որ պատկերի հետ կապված հիպերհղումը իրականում պատկեր է, և ոչ միայն պատկեր:
Եզրակացություն
Շատ հեշտ է կապել էջին HTML-ով: Կարևոր է հետևել այս լեզվի բոլոր հիմնական կետերին, քանի որ նույնիսկ փոքր սխալը կարող է հանգեցնել նրան, որ արդյունք չի լինի, և ծածկագիրը չի աշխատի:
