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

• Քայլել
• 2-րդ մասի 1-ը. HTML- ի հիմունքների ուսուցում
• 2-րդ մաս 2-րդ. Սովորել առաջադեմ HTML
• Խորհուրդներ
• Arnգուշացումներ
• Անհրաժեշտությունները

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

Քայլել

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

1. Բացեք HTML փաստաթուղթ: Բառերի մշակման ծրագրերի մեծ մասը, ներառյալ Notepad- ը կամ Word- ը Windows- ի համար և Text Editor- ը Mac- ի համար, կարող են օգտագործվել HTML փաստաթղթեր ստեղծելու համար: Բացեք նոր փաստաթուղթ և վերևի ընտրացանկից ընտրեք File → Save As- ը ՝ ձեր փաստաթուղթը որպես վեբ էջ պահելու համար, կամ ֆայլի ընդլայնումը փոխեք «.doc», «.rtf» կամ այլ բաներից «.html» կամ «.htm «
   • Այժմ կարող եք տեսնել նախազգուշացում, որում ասվում է, որ ձեր փաստաթուղթը հարուստ տեքստի ձևաչափից (RTF) վերածվում է «պարզ տեքստի» ձևաչափի, և որ ձևաչափման որոշ ընտրանքներ և նկարներ պատշաճ կերպով չեն պահվում: Դուք կարող եք անտեսել այս նախազգուշացումը. HTML փաստաթղթերը չեն օգտագործում այս ընտրանքները:
   • .html և .htm ֆայլերը նույնն են: Երկուսն էլ գործում են:
2. Դիտեք ձեր փաստաթուղթը զննարկիչով: Պահեք ձեր դատարկ փաստաթուղթը, փակեք այն, ապա կրկնակի կտտացրեք փաստաթղթին այն վայրում, որտեղ այն պահվել է, որպեսզի այն կրկին բացվի: Ձեր փաստաթուղթն այժմ պետք է բացվի ձեր զննարկչի կողմից որպես դատարկ կայք: Եթե ​​դա չի աշխատում, քաշեք ֆայլի պատկերակը ձեր զննարկչի հասցեի տողում: Ավելի ուշ, եթե ձեր HTML փաստաթուղթը խմբագրեք ՝ հետևելով այս հոդվածի քայլերին, դուք կշարունակեք վերադառնալ զննարկիչ ՝ ստուգելու, թե ինչպիսին են ծածկագրի փոփոխությունները:
   • Նշում. Ձեր կայքը դեռ առցանց չէ: Էջը հասանելի չէ ուրիշներին, և ձեզ փորձելու համար ձեզ հարկավոր չէ գործող ինտերնետ կապ: Դուք պարզապես օգտագործում եք ձեր զննարկիչը HTML փաստաթուղթը «կարդալու» համար, կարծես դա կայք էր:
3. Հասկացեք, թե ինչ են «պիտակները»: Պիտակները տեսանելի չեն վերջին վեբ էջում, ինչպես սովորական տեքստը կարող է: Պիտակները ձեր զննարկիչին ասում են, թե ինչպես պետք է էջը և բովանդակությունը ցուցադրել էջում: Մեկնարկային պիտակը պարունակում է հրահանգներ: Օրինակ, այն կարող է զննարկչին ասել, որ տեքստը ցուցադրվի թավ տառերով: Վերջի պիտակը անհրաժեշտ է զննարկիչին տեղեկացնելու համար, թե որտեղ են գործում հրահանգները. Այս օրինակում մեկնարկի և վերջի պիտակի միջև եղած ամբողջ տեքստը թավ է: Վերջնակետերը նույնպես տեղադրվում են փակագծերի ներսում, բայց կտրվածքը հաջորդում է առաջին փակագծին:
   • Գրեք մեկնարկային պիտակները փակագծերում. սա մեկնարկային օրն է>
   • Փակագծերում գրեք վերջի պիտակները, բայց առաջին փակագծից հետո կտրեք մի կտրվածք. /սա փակման պիտակն է>)
   • Ավելի ուշ կարդացեք հոդվածում, թե ինչպես գրել ֆունկցիոնալ հատկորոշիչներ: Այս քայլում պարզապես անհրաժեշտ է հիշել, թե որ եղանակով կարելի է գրել պիտակները ՝> և />:
   • HTML այլ դասընթացներում պիտակները նաև անվանվում են «տարրեր», իսկ բացման և փակման պիտակների միջև եղած տեքստը ՝ «տարրերի պարունակություն»:
4. Գրեք ձեր առաջին html> պիտակը: Յուրաքանչյուր HTML փաստաթուղթ սկսվում է ա html>պիտակով և ավարտվում է ա-ով / html>պիտակ Սա զննարկչին ասում է, որ այս պիտակների միջև ամեն ինչ գրված է HTML- ով: Այս պիտակներն ավելացրեք ձեր փաստաթղթում.
   • Գրիր html> ձեր փաստաթղթի վերևում:
   • Մի քանի անգամ հարվածեք մուտքին կամ վերադառնալու համար, որ ինքներդ ձեզ որոշակի տարածք տրամադրեք, ապա գրեք / html>
   • Հիշիր քեզ ամեն ինչ այս հոդվածում այս երկու պիտակների միջև:
5. Դարձրեք ձեր փաստաթղթի գլուխը> մաս: Html> և / html> պիտակների միջև Դուք գրում եք a ղեկավար>>մեկնարկի պիտակ և ա / ղեկավար>- վերջ պիտակ: Այս պիտակների միջև կրկին տարածություն թողեք: Այս պիտակների միջև գրված որևէ բան չի երեւա հենց ինտերնետային էջում: Փորձեք հետևյալ քայլերը և տեսեք ՝ տեսնո՞ւմ եք, թե որտեղ են հայտնվում տեղեկությունները.
   • Գրեք head> և / head> պիտակների միջև. վերնագիր> և / վերնագիր>
   • Վերնագրի> և / վերնագրի> պիտակների միջև դուք գրում եք. Ինչպես սովորել HTML (նկարներով) - wikiHow.
   • Պահպանեք փաստաթուղթը և բացեք այն զննարկչում (կամ պահպանեք փաստաթուղթը և թարմացրեք էջը զննարկչում, եթե էջը դեռ բաց էր): Տեսնո՞ւմ եք, թե ինչ եք գրել հենց էջի վերևում ՝ հասցեի տողի վերևում:
6. Ստեղծել մարմին> բաժին: Այս սկսնակ փաստաթղթում մնացած ամեն ինչ տեղադրված է body> բաժնում և այն ցուցադրվում է ինտերնետային էջում: Դրանից հետո թեգը / գլուխը>, բայց առջևում պիտակը / html> դուք գրում եք մարմին> և / մարմին>, Այն ամենը, ինչ մենք քննարկում ենք հետագա այս հոդվածում, մենք տեղադրում ենք մարմնի պիտակների միջև: Այժմ դուք պետք է ունենաք այսպիսի տեսք ունեցող փաստաթուղթ (առանց փամփուշտների).
   • html>
   • ղեկավար>>
   • վերնագիր> սովորել HTML - wikiHow / վերնագիր>
   • / ղեկավար>
   • մարմին>
   • / մարմին>
   • / html>
7. Ավելացրեք տեքստ տարբեր ոճերում: Հիմա ժամանակն է, որ դուք սկսեք գրել մի բան, որն իրականում տեսանելի կլինի զննարկչում: Այն ամենը, ինչ գրում եք մարմնի պիտակների մեջ, տեսանելի կլինի զննարկիչում փոփոխությունները պահելուց և զննարկչի մեջ էջը թարմացնելուց հետո: Գրիր ոչ նշաններով ինչ-որ բան և >քանի որ ձեր զննարկիչը դա կմեկնաբանի որպես HTML հրահանգ պարզ տեքստի փոխարեն: Գրիր օրինակ Բարեւ աշխարհ! (Անգլերեն ՝ «Hello world!», Սա գլոբալ ստանդարտ տեքստ է ՝ որպես ծրագրավորման որևէ լեզվի ցանկացած ծրագրավորման դասընթացի առաջին օրինակ) կամ մեկ այլ բան, և դրեք հետևյալ պիտակները տեքստից առաջ և հետո և տեսեք, թե ինչ է տեղի ունենում.
   • em> Ողջույն աշխարհ! / em> կարծես թեքված տեքստ լինի. Բարեւ աշխարհ!
   • ուժեղ> Ողջույն աշխարհ! / ուժեղ> կարծես համարձակ տեքստ է. Բարեւ աշխարհ!
   • s> Ողջույն աշխարհ: / s> կարծես գծապատկերային տեքստ է. Բարեւ աշխարհ!
   • sup> Ողջույն աշխարհ! / sup> կարծես վերնագիր լինի.
   • sub> Ողջույն աշխարհ! / sub> կարծես վերնագիր լինի. _{Բարեւ աշխարհ!}
   • Փորձեք համադրությունները. Ինչպե՞ս է տեսնում em> strong> Ողջույն աշխարհ! / strong> / em> Դուրս արի?
8. Ձեր տեքստը բաժանեք պարբերությունների: Եթե ​​ձեր փաստաթղթում տեքստի տարբեր տողեր տեղադրեք, կտեսնեք, որ բոլոր տողերը տեղադրվում են մեկը մյուսի հետեւից: Դուք ինքներդ պետք է ծրագրավորեք նոր տողեր և դատարկ տողեր.
   • p> Սա առանձին բաժին է: / p>
   • Այս նախադասությունը առաջին գծի վրա է, իսկ այս նախադասությունը ՝ հաջորդի վրա:
     Սա առաջին պիտակն է, որին մենք հանդիպում ենք, որի վերջի պիտակի կարիք չկա: Նման պիտակը մենք անվանում ենք մեկը դատարկ պիտակ.
   • Ստեղծեք վերնագրեր բաժինների անունները պարզ դարձնելու համար.
     h1> վերնագիր / h1>հնարավոր ամենամեծ վերնագիրը
     h2> վերնագիր / h2> (2 մակարդակի վերնագիր)
     h3> վերնագիր / h3> (3 մակարդակի վերնագիր)
     h4> վերնագիր / h4> (4 մակարդակի վերնագիր)
     h5> վերնագիր / h5> (հնարավորինս փոքր վերնագիր)
9. Իմացեք, թե ինչպես կարելի է ցուցակներ կազմել: Վեբ էջում ցուցակներ ստեղծելու մի քանի եղանակ կա: Փորձեք հետևյալ մեթոդները ՝ պարզելու համար, թե ինչն է ձեզ ամենից շատ դուր գալիս: Ուշադրություն դարձրեք, որ մեկ զույգ պիտակներ տեղադրվում են ամբողջ ցուցակի շուրջ (օրինակ ՝ ul> և / ul> պիտակներ չպատվիրված ցուցակների համար) և որ ցուցակի յուրաքանչյուր իրի շուրջ մեկ այլ զույգ պիտակներ են տեղադրված, ինչպիսիք են li> և / li ,
   • Օգտագործեք հետևյալ կոդը ՝ բուլետային ցուցակներ ստեղծելու համար.
     ul> li> Մեկ նյութ / li> li> Մեկ այլ նյութ / li> li> Մեկ այլ նյութ / li> / ul>
   • Կամ այս կոդը `համարակալված ցուցակներ ստեղծելու համար.
     ol> li> Նյութ 1 / li> li> Կետ 2 / li> li> Կետ 3 / li> / ol>
   • Կամ այս կոդը, այսպես կոչված, սահմանման ցուցակ ստեղծելու համար.
     dl> dt> Սուրճ / dt> dd> - Տաք խմիչք / dd> dt> Կաթ / dt> dd> - Սառը ըմպելիք / dd> / dl>
10. Ձեր էջն ավելի գրավիչ դարձրեք նոր տողերով, հորիզոնական գծերով և պատկերներով: Հիմա ժամանակն է սկսել ձեր էջին այլ բաներ ավելացնել: Փորձեք հետևյալ պիտակները (պատկերը պետք է տեղադրվի առցանց, որպեսզի կարողանաք օգտագործել պատկերի հղումը).
    • Տեղադրեք մի տող. br>> կամ ժամ>
    • Տեղադրեք պատկերներ. img src = "ձեր_պատկերին_ռոլը">
11. Տեղադրեք էջի այլ վայրերի հղումները: Այս կոդը կարող եք օգտագործել նաև այլ էջեր և կայքեր հղելու համար, բայց քանի որ դեռ կայք չունեք, մենք կկենտրոնանանք «խարիսխների» վրա, որոնք էջի հատուկ վայրերն են, որոնց կարող եք հղում կատարել.
    • Նախ, ստեղծեք a> պիտակով խարիսխ այն էջի այն կետում, որին ցանկանում եք հղում կատարել: Ձեր խարիսխին տվեք հստակ անուն, որը հեշտ է հիշել.
      
      a name = "Tips"> Սա այն տեքստն է, որի շուրջ դուք տեղադրում եք ձեր խարիսխը: / ա>
    • Օգտագործեք href պիտակը> ձեր խարիսխին կամ այլ ինտերնետային էջին հղում կատարելու համար.
      
      a href = "ինտերնետային կայքի url- ը կամ այս էջի խարիսխի անվանումը"> Գրեք այստեղ որպես հղում ցուցադրված տեքստը կամ պատկերը: / ա>
    • Մեկ այլ էջում խարիսխին հղում կատարելու համար url- ից հետո ավելացրեք # նիշը, որին հաջորդում է ձեր խարիսխի անունը: Օրինակ ՝ http://www.wikihow.com/HTML-leren# Հուշումները ձեզ ուղիղ կտան այս էջի «Խորհուրդներ» բաժնում:

2-րդ մաս 2-րդ. Սովորել առաջադեմ HTML

1. Իմացեք հատկանիշների մասին: Հատկանիշները տեղադրվում են պիտակի մեջ և օգտագործվում են սկզբի և վերջի պիտակի միջև «տարրի բովանդակության» լրացուցիչ ճշգրտումներ կատարելու համար: Նրանք երբեք միայնակ չեն մնում: Դրանք գրված են հետևյալ ձևով. անուն = "արժեք". Անուն ներկայացնում է հատկանիշի անունը (օրինակ ՝ «գույն») և արժեք նկարագրում է այս կոնկրետ դեպքը (օրինակ ՝ «կարմիր»):
   • Եթե ​​մանրամասն ուսումնասիրել եք այս հոդվածի նախորդ մասը, ապա արդեն հանդիպել եք հատկանիշների: Img> պիտակն օգտագործում է ատրիբուտը src, խարիսխը օգտագործում է ատրիբուտը Անուն և հղումները օգտագործում են հատկանիշը href, Կարող եք ասել, որ դրանք բոլորը չափի են ___='___’ հետեւել.
2. Փորձեք HTML աղյուսակներով: Աղյուսակ կամ գրաֆիկ կազմելու համար ձեզ հարկավոր է մի քանի պիտակ:
   • Սկսեք սեղանի պիտակներից («սեղան» անգլերենով) ամբողջ սեղանի շուրջ.սեղան> / սեղան>
   • Տեղադրեք պիտակներ յուրաքանչյուր շարքի բովանդակության շուրջ. tr>
   • Առաջին շարքում տեղադրեք սյունակի վերնագրերը. րդ>
   • Տեղադրեք բջիջները հաջորդական շարքերում. td>
   • Սա մի օրինակ է, թե ինչպես է այս ամենը միավորվում.
     
     աղյուսակ> tr> th> Column 1: Month / th> th> Column 2: Money տնտեսված / th> / tr> tr> td> հունվար / td> td> 100 € / td> / tr> / աղյուսակ>
3. Իմացեք գլխի բաժնում օգտագործված մյուս պիտակները: Դուք արդեն սովորել եք պիտակի գլուխը>, որը տեղադրում եք յուրաքանչյուր փաստաթղթի սկզբում: Վերնագիր> թեգից բացի, գլխի բաժնում կարող են լինել նաև այլ պիտակներ.
   • Ստեղծելու համար օգտագործվում են մետա պիտակները մետատվյալներ վեբ էջի մասին: Այս տվյալները որոնիչները օգտագործում են համացանցային էջերը դասակարգելու համար: Ձեր էջը որոնիչների համար տեսանելի դարձնելու համար կարող եք տեղադրել մեկ կամ ավելի մետապիտակներ (վերջի պիտակները պարտադիր չեն), յուրաքանչյուր պիտակ պետք է պարունակի ճշգրիտ մեկ անվանման հատկություն և բովանդակության հատկանիշ, օրինակ ՝ այստեղ տեղադրեք նկարագրություն ">; կամ meta name = "keywords" content = "այստեղ գրել հիմնաբառերի ցուցակ, միշտ առանձնացված ստորակետով">
   • հղում> պիտակներն օգտագործվում են այլ ֆայլեր էջին կապելու համար: Սովորաբար օգտագործվում են CSS ոճի թերթերը HTML էջերի հետ կապելու համար, այս էջերը կառուցված են այլ տեսակի կոդերով և օգտագործվում են էջի ընդհանուր ոճը որոշելու համար:
   • script> պիտակներն օգտագործվում են javascript ֆայլերը HTML էջի հետ կապելու համար: Javascript- ը թույլ է տալիս էջը փոխել, եթե օգտվողը ինչ-որ բան անում է էջում:
4. Խաղալ HTML- ով առկա էջերից: Վեբ էջերի աղբյուրի կոդը դիտելը ձեր HTML գիտելիքները ընդլայնելու հիանալի միջոց է: Աջ կտտացրեք էջին և ընտրեք «Դիտել աղբյուրը», «pageուցադրել էջի աղբյուրը» կամ նման այլ բաներ: Պարզեք, թե ինչ է անում ձեզ հատուկ չգիտակցված պիտակը կամ որոնեք առցանց պատասխանը:
   • Դուք չեք կարող խմբագրել այլ մարդկանց կայքերը, բայց կարող եք պատճենել HTML կոդը ձեր սեփական փաստաթղթում և խաղալ դրա հետ ՝ տեսնելու, թե ինչ են անում տարբեր ճշգրտումները: Նշում. Քանի որ շատ կայքեր օգտագործում են CSS ոճի թերթեր, գուցե չկարողանաք տեսնել շատ գույներ կամ այլ ոճեր:
5. Իմացեք HTML- ի մասին ՝ կարդալով ավելի մանրամասն հոդվածներ: Ինտերնետում կան բազմաթիվ ռեսուրսներ ՝ ավելի շատ HTML պիտակներ տիրապետելու համար, ինչպիսիք են W3Schools կամ Codecademy: Հասանելի են նաև բազմաթիվ HTML գրքեր, բայց համոզվեք, որ վերջերս օգտագործում եք հրատարակություն, քանի որ HTML ստանդարտը ժամանակ առ ժամանակ փոխվում է: HTML- ը լավ մակարդակի տիրապետելուց հետո կարող եք դիմել CSS- ին `ձեր կայքի դիզայնի և ոճի նկատմամբ ավելի շատ վերահսկողություն իրականացնելու համար: Դրանից հետո հաջորդ քայլը սովորաբար javascript է:

Խորհուրդներ

• Կարող է օգտակար լինել ինտերնետում գտնել մի պարզ կայք և այնուհետև սկսել խառնաշփոթել կոդով: Փորձեք տեղափոխել որոշ տեքստեր, փոխել տառատեսակը, փոխել պատկերները, ինչ ուզում եք:
• Կոդը գրելու համար կարող եք օգտագործել նոթատետր, որպեսզի ինչ-որ բան ունենաք հետ ընկնելու, եթե այն մի պահ չեք հիշում: Կարող եք նաև տպել այս էջը և այն պահել տեղեկանքի համար:
• Մեր օրերում XML- ը և RSS- ն ավելի ու ավելի հաճախ են օգտագործվում կայքերում: Կոդը կարող է անհասանելի թվալ մարդու աչքի համար, հատկապես, երբ դիտվում է սկզբնաղբյուրում, բայց ֆունկցիոնալությունը կարող է օգտակար լինել:
• HTML- ի մեջ օգտագործվող պիտակները զգայուն չեն փոքրատառերի համար, բայց լռելյայնը փոքրատառերն են (ինչպես մենք անում ենք այս հոդվածում): Պիտակների համար փոքրատառերը շատ խորհուրդ են տրվում, նաև XHTML- ի հետ համատեղելիության համար:

Arnգուշացումներ

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

Անհրաժեշտությունները

• Բառերի մշակման ծրագիր, օրինակ ՝ Գրառման գրքույկ (Windows) կամ Տեքստային խմբագիր (Mac):
• թուղթ կամ տետր (ընտրովի)
• HTMLրագիր, որը հատուկ մշակված է HTML գրելու համար, ինչպիսիք են Notepad ++ Windows- ի համար կամ TextWrangler Mac- ի համար (ընտրովի)