Բովանդակություն

• Քայլեր
• Մաս 1 -ը 2 -ից. HTML- ի հիմունքների ուսուցում
• 2 -րդ մաս 2 -ից. Ընդլայնված HTML
• Խորհուրդներ
• Գուշացումներ
• Ինչ է պետք

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

Քայլեր

Մաս 1 -ը 2 -ից. HTML- ի հիմունքների ուսուցում

1. 1 Բացեք HTML փաստաթուղթ: Տեքստային խմբագիրների մեծ մասը (Notepad կամ Notepad ++ Windows- ի համար, TextEdit Mac- ի համար, gedit GNU / Linux- ի համար) կարող են օգտագործվել HTML ֆայլեր ստեղծելու համար: Ստեղծեք նոր փաստաթուղթ և պահեք այն ՝ օգտագործելով File → Save As in Web Page Format, կամ փոխեք ֆայլի ընդլայնումը .html կամ .htm փոխարեն .doc, .rtf կամ այլ ընդլայնման փոխարեն:
   • Դուք կարող եք նախազգուշացում ստանալ, որ ֆայլը կպահվի որպես «պարզ տեքստ» RTF ձևաչափի փոխարեն, կամ որ ձևաչափումն ու պատկերները չեն պահվի: Սա լավ է; HTML- ի համար այս տարբերակները անհրաժեշտ չեն:
2. 2 Բացեք ստեղծված ֆայլը դիտարկիչում: Պահեք դատարկ ֆայլը, գտեք այն ձեր համակարգչում և կրկնակի կտտացրեք այն ՝ այն բացելու համար: Բրաուզերում պետք է բացվի դատարկ էջ: Եթե ​​դա այդպես չէ, ֆայլը քաշեք ձեր դիտարկիչի հասցեի տող: HTML ֆայլը խմբագրելիս կարող եք թարմացնել այս էջը `փոփոխությունները տեսնելու համար:
   • Խնդրում ենք նկատի ունենալ, որ այս կերպ դուք ինտերնետային կայք չեք ստեղծում: Այլ մարդիկ մուտք չեն ունենա այս էջ, և ձեզ անհրաժեշտ չէ ինտերնետ կապ ՝ ձեր տեղական էջը ստուգելու համար: Theննարկիչը պարզապես մեկնաբանում է HTML կոդը ՝ «կարդալով» այն, կարծես դա վեբ կայք լինի:
3. 3 Հասկացեք, թե ինչ են նշման պիտակները: Ի տարբերություն սովորական տեքստի, էջանիշերը չեն հայտնվում: Փոխարենը, նրանք զննարկիչին ասում են, թե ինչպես ցուցադրել էջը և դրա բովանդակությունը: «Բացում» պիտակը պարունակում է հրահանգներ: Օրինակ, այն կարող է զննարկիչին ասել, որ տեքստը պետք է ցուցադրվի որպես համարձակ... Այն նաև կարիք ունի «վերջ» պիտակի ՝ դիտարկիչին ցույց տալու համար, թե որտեղ է ավարտվում հրահանգը: Այս օրինակում սկզբի և վերջի պիտակների միջև եղած տեքստը կցուցադրվի համարձակ: Պիտակները գրված են անհավասար նշանների ներսում, սակայն վերջի պիտակը սկսվում է առաջի շեղ գծով:
   • Բացվող պիտակը գրված է անհավասարության նշանների միջև. բացման պիտակ>
   • Փակման պիտակում, պիտակի նկարագրիչը (անունը) տեղադրվում է առաջի շեղ: /ավարտի պիտակը>
   • Կարդացեք ՝ պարզելու համար, թե ինչպես են օգտագործվում տարբեր պիտակները: Այս քայլի համար պարզապես անհրաժեշտ է հիշել ձայնագրման ձևաչափը: Պիտակներ գրվում են անհավասարության նշանների միջև ՝> և />
   • Որոշ ձեռնարկներում HTML պիտակները կոչվում են տարրեր, իսկ բացման և փակման պիտակների միջև եղած տեքստը կոչվում է տարրերի բովանդակություն:
4. 4 Խմբագրիչում մուտքագրեք html> պիտակը: Յուրաքանչյուր HTML ֆայլ պետք է սկսվի պիտակով html> և ավարտել պիտակով / html>... Այս պիտակները զննարկիչին ասում են, որ պիտակների միջև եղած ամբողջ բովանդակությունը HTML է: Ավելացրեք այս պիտակները ձեր փաստաթղթին.
   • Հաճախ HTML ֆայլերը սկսվում են տողից ! DOCTYPE html>ինչը նշանակում է, որ դիտարկիչները պետք է ամբողջ ֆայլը ճանաչեն որպես HTML: Այս տողն անհրաժեշտ չէ, բայց այն կարող է օգնել ձեզ լուծել համատեղելիության խնդիրները:
   • Ialանգահարեք html> փաստաթղթի վերևում:
   • Մի քանի անգամ սեղմեք Enter կամ Return ՝ բազմաթիվ դատարկ տողեր ստեղծելու համար, այնուհետև մուտքագրեք / html>
   • հիշեք, որ ամբողջը այս հոդվածում ստեղծվող կոդը պետք է գրվի այս երկու պիտակների միջև:
5. 5 Ֆայլում ստեղծեք գլուխ> բաժին: Html> և / html> պիտակների միջև ստեղծեք բացման պիտակ գլուխ> և փակման պիտակը / գլուխ>... Նրանց միջև ավելացրեք մի քանի դատարկ տող: Head> և / head> պիտակների միջև գրված բովանդակությունը չի ցուցադրվում հենց էջում: Հետևեք այս քայլերին և կտեսնեք, թե ինչի համար է այս պիտակը.
   • Head> և / head> պիտակների միջև գրեք վերնագիր> եւ / վերնագիր>
   • Վերնագրի> և / վերնագիր> պիտակների միջև գրեք Ինչպես սովորել HTML - wikiHow.
   • Պահպանեք ձեր փոփոխությունները և ֆայլը բացեք դիտարկիչում (կամ թարմացրեք էջը, եթե ֆայլը արդեն բաց է): Տեսե՞լ եք տեքստը, որը հայտնվում է հասցեի տողի վերևում գտնվող էջի վերնագրում:
6. 6 Ստեղծեք մարմին> բաժին: Այս օրինակի մյուս բոլոր պիտակներն ու տեքստերը գրված են մարմնի հատվածում, որի բովանդակությունը ցուցադրվում է էջում: Հետո փակման պիտակ / գլուխ>, բայց նախքան tag / html> ավելացնել պիտակներ մարմին> եւ / մարմին>... Այս հոդվածի մնացած մասի համար աշխատեք մարմնի հատվածի հետ: Ձեր ֆայլը պետք է ունենա այսպիսի տեսք.
   html>
   գլուխ>
   վերնագիր> Ինչպես սովորել HTML - wikiHow / title>
   / գլուխ>
   մարմին>
   / մարմին>
   / html>
7. 7 Ավելացնել տեքստ ՝ օգտագործելով տարբեր ոճեր: It'sամանակն է էջին ավելացնել իրական բովանդակությունը: Այն ամենը, ինչ գրում եք մարմնի պիտակների միջև, բրաուզերում թարմացվելուց հետո կցուցադրվի էջում: Չեն օգտագործում խորհրդանիշներ կամ >քանի որ դիտարկիչը կփորձի բովանդակությունը մեկնաբանել որպես տեքստ ՝ տեքստի փոխարեն: Գրեք Բարեւ! (կամ ինչ ուզում եք), ապա փորձեք ավելացնել այս պիտակները տեքստին և տեսեք, թե ինչ է տեղի ունենում.
   • em> Բարև բոլորին: / em> տեքստը դարձնում է «շեղագիր». Բարեւ!
   • ուժեղ> Բարև բոլորին: / ուժեղ> տեքստը դարձնում է «համարձակ». Բարեւ!
   • s> Բարև բոլորին: / s> ուղիղ տեքստ. Բարեւ!
   • sup> Բարև բոլորին: / sup> ցուցադրում է տառատեսակը որպես վերնագիր.
   • sub> Բարև բոլորին: / sub> ցուցադրում է տառատեսակը որպես ենթավերնագիր. _Բարեւ!
   • Փորձեք տարբեր պիտակներ միասին: Ինչ տեսք կունենա em> ուժեղ> Բարև բոլորին: / strong> / em>?
8. 8 Տեքստը բաժանել պարբերությունների: Եթե ​​փորձեք HTML տեքստում գրել տեքստի մի քանի տող, կնկատեք, որ տողերի ընդմիջումները չեն ցուցադրվում բրաուզերում: Տեքստը պարբերությունների բաժանելու համար հարկավոր է ավելացնել պիտակներ.
   • p> Սա առանձին պարբերություն է: / p>
   • Այս նախադասությանը հաջորդում է տողի ընդմիջում br> նախքան այս տողի մեկնարկը:
     Սա առաջին պիտակն է, որը չի պահանջում վերջնական պիտակ: Այս պիտակները կոչվում են «դատարկ» պիտակներ:
   • Ստեղծեք վերնագրեր ՝ բաժնի վերնագրերը ցույց տալու համար.
     h1> վերնագրի տեքստ / h1>: ամենամեծ կոչումը
     h2> վերնագրի տեքստ / h2> (երկրորդ մակարդակի վերնագիր)
     h3> վերնագրի տեքստ / h3> (երրորդ մակարդակի վերնագիր)
     h4> վերնագրի տեքստ / h4> (չորրորդ մակարդակի վերնագիր)
     h5> վերնագրի տեքստ / h5> (ամենափոքր կոչումը)
9. 9 Սովորեք ստեղծել ցուցակներ: Վեբ էջում ցուցակներ ստեղծելու մի քանի եղանակ կա: Փորձեք ստորև ներկայացված տարբերակները և որոշեք, թե որն է ձեզ ավելի դուր գալիս: Նկատի ունեցեք, որ ցուցակի համար անհրաժեշտ է մեկ զույգ պիտակներ (օրինակ ՝ ul> և / ul> պարբերականացված ցուցակի համար), և ցուցակի յուրաքանչյուր տարր ընդգծված է տարբեր զույգ պիտակներով, օրինակ ՝ li> և / li>.
   • Փամփուշտներով ցուցակ.
     ul> li> Առաջին տող / li> li> երկրորդ տող / li> li> Եվ այսպես շարունակ / li> / ul>
   • Համարակալված ցուցակ.
     ol> li> One / li> li> Two / li> li> Three / li> / ol>
   • Սահմանումների ցանկ.
     dl> dt> սուրճ / dt> dd> - տաք ըմպելիք / dd> dt> Լիմոնադ / dt> dd> - սառը ըմպելիք / dd> / dl>
10. 10 Էջը դասավորեք ՝ օգտագործելով գծերի ընդմիջումներ, հորիզոնական գծեր և Նկարներ. It'sամանակն է էջին տեքստից բացի այլ բան ավելացնել: Փորձեք հետևյալ պիտակները կամ լրացուցիչ տեղեկությունների համար հետևեք հղումներին: Օգտագործեք առցանց հոստինգի ծառայություն ՝ պատկերին հղում ստեղծելու համար, որը ցանկանում եք տեղադրել.
    • Հորիզոնական գիծ. ժամ>
    • Տեղադրեք նկարը. img src = "պատկերի հղում">
11. 11 Ավելացնել հղումներ: Դուք կարող եք օգտագործել այս պիտակները ՝ այլ էջերի և կայքերի հիպերհղումներ ստեղծելու համար, բայց քանի որ դեռ կայք չունեք, այժմ կսովորեք, թե ինչպես ստեղծել խարիսխ հղումներ, այսինքն ՝ էջի որոշակի վայրերի հղումներ.
    • Ստեղծեք խարիսխ a> պիտակով, որտեղ ցանկանում եք հղում կատարել էջին: Եկեք հստակ և հիշարժան անունով.
      
      a name = "Tips"> Տեքստը, որին կապում եք: / a>
    • Օգտագործեք href> պիտակը ՝ հարաբերական հղում կամ արտաքին ռեսուրսին հղում ստեղծելու համար.
      
      href = "հղում դեպի էջը կամ էջի ներսում խարիսխի անունը"> Տեքստ կամ պատկեր, որը կծառայի որպես հղում: / a>
    • Մեկ այլ էջի հարաբերական հղմանը կապելու համար հիմնական հղումից և խարիսխի անունից հետո ավելացրեք # նշան: Օրինակ ՝ https://hy.wikihow.com/learn-HTML# Հուշումներ հղումներ դեպի այս էջի խորհուրդների բաժին:

2 -րդ մաս 2 -ից. Ընդլայնված HTML

1. 1 Անոթացեք հատկանիշներին: Հատկանիշները գրված են պիտակի ներսում ՝ նշելով լրացուցիչ տեղեկություններ: Հատկությունների ձևաչափը հետևյալն է. անուն = "արժեք", որտեղ կոչում սահմանում է հատկանիշ (օրինակ ՝ գույնը գույնի հատկանիշի համար), և արժեքը ցույց է տալիս դրա արժեքը (օրինակ ՝ կարմիր կարմիրի համար):
   • Հատկանիշներն իրականում օգտագործվել են HTML- ի հիմունքների նախորդ բաժնում: Img> պիտակը օգտագործում է հատկանիշը src, հարաբերական կապի խարիսխները օգտագործում են հատկանիշը Անունիսկ հղումները օգտագործում են հատկանիշը href... Ինչպես արդեն նկատել եք, բոլոր հատկանիշները գրված են ձևաչափով ___='___’.
2. 2 Փորձարկումներ HTML աղյուսակների հետ: Աղյուսակի ստեղծումը ենթադրում է տարբեր պիտակների օգտագործում: Դուք կարող եք փորձարկել կամ կարդալ ավելի մանրամասն հրահանգներ:
   • Ստեղծեք սեղանի պիտակներ.սեղան> / սեղան>
   • Աղյուսակում յուրաքանչյուր տողի բովանդակությունը ներառեք պիտակների մեջ. tr>
   • Սյունակի վերնագիրը սահմանվում է պիտակով. th>
   • Հետագա տողերի բջիջները. td>
   • Այս պիտակների օգտագործման օրինակ.
     
     սեղան> tr> th> սյունակ 1: ամիս / th> th> սյունակ 2: խնայողություն / th> / tr> tr> td> հունվար / td> td> 5000 ռուբլի / td> / tr> / սեղան>
3. 3 Իմացեք գլխի բաժնի լրացուցիչ պիտակները: Դուք արդեն սովորել եք head> պիտակը, որը գալիս է յուրաքանչյուր html ֆայլի սկզբում: Բացի վերնագիր> պիտակից, այս բաժնի համար կան նաև այլ պիտակներ.
   • Մետա պիտակներ, որոնք պարունակում են մետատվյալներօգտագործվում են որոնիչների կողմից կայքի ինդեքսավորման համար: Որոնման համակարգերում ձեր կայքը ավելի հեշտ գտնելու համար օգտագործեք մեկ կամ մի քանի բացվող մետա> պիտակներ (փակման պիտակներ չեն պահանջվում):Օգտագործեք մեկ հատկանիշ և մեկ արժեք մեկ պիտակի համար. Meta name = "description" content = "page description">; կամ meta name = "keywords" content = "ստորակետով առանձնացված հիմնաբառեր">
   • Հղում> պիտակներ, որոնք մատնանշում են երրորդ կողմի ֆայլեր, ինչպիսիք են ոճաթերթերը (CSS), որոնք ստեղծվում են տարբեր տեսակի կոդավորման միջոցով և թույլ են տալիս փոխել HTML էջը ՝ օգտագործելով գույն, տեքստի հավասարեցում և շատ այլ հնարավորություններ:
   • Սցենար> պիտակներ, որոնք օգտագործվում են էջին JavaScript ֆայլեր կցելու համար: Այս ֆայլերը անհրաժեշտ են էջը ինտերակտիվ փոփոխելու համար (ի պատասխան օգտագործողի գործողությունների):
4. 4 Փորձեք այլ կայքերի HTML կոդով: Այլ վեբ էջերի աղբյուրի կոդը դիտելը հիանալի միջոց է HTML սովորելու համար: Դուք կարող եք աջ սեղմել էջի վրա և ձեր դիտարկիչի վերևի ընտրացանկից ընտրել «Դիտել աղբյուրը» կամ նման այլ բան: Փորձեք պարզել, թե ինչ է անում անծանոթ պիտակը, կամ ինտերնետում փնտրեք դրա մասին տեղեկատվություն:
   • Չնայած դուք չեք կարող խմբագրել այլ մարդկանց կայքերը, կարող եք պատճենել աղբյուրի կոդը ձեր ֆայլում ՝ հետագայում պիտակներով փորձարկելու համար: Խնդրում ենք նկատի ունենալ, որ CSS նշագրումը կարող է անհասանելի լինել, և գույներն ու ձևաչափումը կարող են տարբեր լինել:
5. 5 Սկսեք ուսումնասիրել ավելի մանրամասն ուղեցույցներ: Ինտերնետում կան բազմաթիվ կայքեր, որոնք նվիրված են HTML պիտակներին, օրինակ ՝ W3Schools կամ HTMLbook: Վաճառքում կան նաև թղթե գրքեր, բայց փորձեք գտնել վերջին հրատարակությունը, քանի որ չափանիշները փոխվում և զարգանում են: Ավելի լավ է, տիրապետեք CSS- ին ՝ շատ ավելի մեծ վերահսկողություն ունենալու ձեր կայքի դասավորության և արտաքին տեսքի վրա: CSS սովորելուց հետո վեբ դիզայներները սովորաբար սովորում են JavaScript:

Խորհուրդներ

• Գրառման գրքույկ ++ -ը հիանալի անվճար ծրագիր է, որը նման է սովորական Գրառման գրքույկին, սակայն կարող եք առցանց պահել և ստուգել ձեր ծածկագիրը ձեր դիտարկիչում առցանց: (Այն նաև աջակցում է գրեթե ցանկացած լեզու ՝ HTML, CSS, Python, JavaScript և այլն):
• Գտեք ցանցում մի քանի պարզ էջ, պահեք կոդը ձեր համակարգչում և փորձարկեք դրա հետ: Փորձեք տեղափոխել տեքստ, փոխել տառատեսակը, փոխարինել պատկերները `ինչ էլ որ լինի:
• Դուք կարող եք պահել տետր, որտեղ պիտակներ եք գրում, որպեսզի դրանք միշտ ձեռքի տակ լինեն: Կարող եք նաև տպել այս էջը և անդրադառնալ դրան:
• Երբ գրում եք ծածկագիր, դա արեք ուշադիր, որպեսզի դուք և այլ մարդիկ հասկանան այն: Օգտագործեք! - Տեղադրեք մեկնաբանություն այստեղ -> HTML մեկնաբանությունների համար. Դրանք չեն արտացոլվի էջում, այլ տեսանելի կլինեն կոդի փաստաթղթում:
• XML- ը և RSS- ը դառնում են ժողովրդականություն: XML և RSS տեխնոլոգիաներ պարունակող էջերի ծածկագիրը անփորձ օգտվողի համար ավելի դժվար է կարդալ և հասկանալ, բայց այդ գործիքները բավականին օգտակար են:
• HTML- ում նշման նշումները փոքրատառ են, բայց խորհուրդ ենք տալիս օգտագործել միայն փոքրատառ (ինչպես սույն հոդվածի օրինակներում) ինչպես ստանդարտացման, այնպես էլ XHTML համատեղելիության համար:

Գուշացումներ

• Որոշ պիտակներ վերջին մի քանի տարիների ընթացքում դուրս են եկել օգտագործումից և փոխարինվել նորերով, որոնք տալիս են նույն կամ որոշ լրացուցիչ էֆեկտներ:
• Եթե ​​ցանկանում եք փորձարկել ձեր էջը, անցեք W3 կայք և ծանոթացեք HTML- ի ժամանակակից պահանջներին: HTML ստանդարտները փոխվում են ժամանակի ընթացքում, և որոշ պիտակներ փոխարինվում են նորերով, որոնք ավելի լավ են աշխատում ժամանակակից բրաուզերներում:

Ինչ է պետք

• Տեքստային խմբագիր, ինչպիսիք են Notepad (Windows) կամ TextEdit (Mac)
• Թուղթ / նոթատետր (ոչ անհրաժեշտ)
• HTML խմբագիր, ինչպիսիք են Notepad ++ (Windows) կամ TextWrangler (Mac) (ոչ անհրաժեշտ)