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

• Քայլեր
• Մաս 1. Ինչպե՞ս ես հայտնաբերեցի HTML- ը
• Խորհուրդներ
• Arnգուշացում
• Ինչ է պետք

HTML (HyperText Markup Language) հիմնական լեզուն է վեբ էջեր կառուցելու համար: Այն ստեղծվել է որպես հեշտ և ճկուն ծածկագրման լեզու: Համացանցի գրեթե յուրաքանչյուր կայք մշակված է այս ծածկագրի որոշակի ձևով (ColdFusion, XML, XSLT): HTML- ը հեշտ է ընկալել, բայց դրա մասին երկար ժամանակ կարող եք սովորել, եթե հետաքրքրված եք դրա համապարփակ գործունակությամբ: Ձեր կայքին գույն և զվարճանք ավելացնելու համար դուք կարող եք սովորել հիմնական CSS, հենց որ ընտելանաք հիմնական HTML էջին:

Քայլեր

4-րդ մասի 1-ը. Փաստաթղթի ստեղծում

1. 

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

2. 

   
   
   Ֆայլը որպես վեբ էջ պահեք: Ընտրեք Ֆայլ → Պահել ինչպես վերևում գտնվող ընտրացանկում: Ֆայլի ձևաչափը փոխեք «Վեբ էջ», «.html» կամ «.htm»: Պահեք ֆայլը այնտեղ, որտեղ հեշտությամբ կարող եք գտնել:
   • Այս երեք տարբերակների միջեւ տարբերություն չկա:

3. 

   Բացեք ֆայլը զննարկչում: Կրկնակի կտտացրեք ֆայլին և այն ինքնաբերաբար կբացվի ձեր զննարկչում որպես դատարկ կայք: Այլընտրանքորեն, դուք կարող եք բացել զննարկիչ, ինչպիսին է Firefox- ը կամ Internet Explorer- ը, ապա օգտագործել File → Open File- ը փաստաթուղթը ընտրելու համար:
   • Այս կայքը առցանց չէ: Այն տեսանելի է միայն ձեր համակարգչում:

4. 

   
   
   Թարմացրեք վեբ էջը և տեսեք կատարված փոփոխությունները: Մուտքագրեք հետևյալը ձեր դատարկ փաստաթղթում. Բարեւ, Փրկեք փաստաթուղթը: Թարմացրեք դատարկ վեբ էջը ձեր զննարկիչում, և էջի վերևում պետք է տեսնեք, որ «Ողջույն» բառը թավ տառերով է: Ամեն անգամ, երբ ցանկանում եք այս ձեռնարկի ընթացքում փորձարկել ձեր նոր HTML- ը, պահեք .htm փաստաթուղթը, ապա թարմացրեք ձեր զննարկչի պատուհանը ՝ տեսնելու, թե ինչպես է HTML կազմվում:
   • Եթե ​​տեսնում եք ««և»'' Հայտնվում է ձեր զննարկչում, ֆայլը HTML- ով ճիշտ չի կազմվել: Փորձեք այլ տեքստի խմբագիր կամ այլ զննարկիչ:

5. 

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

6. 

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

7. 

   Ավելացրեք գլխի (գլուխ) և մարմնի պիտակները: HTML փաստաթղթերը բաժանված են երկու մասի: «Վերև» բաժինը նախատեսված է հատուկ տեղեկատվության համար, ինչպիսին է էջի վերնագիրը: «Մարմին» բաժինը պարունակում է էջի հիմնական բովանդակությունը: Այս երկու բաժիններն էլ ավելացրեք ձեր փաստաթղթին և հիշեք, որ ներառեք վերջի պիտակները: Նոր ավելացված տեքստը համարձակ է.

8. 

   Ձեր էջին վերնագիր տվեք: Գլխի բաժնի քարտերի մեծ մասն անկարևոր է սովորել սկսնակի հետ: Վերնագրի պիտակը, թեև հեշտ է օգտագործել, և որոշելու է, թե ինչն է ցուցադրվում որպես զննարկչի պատուհանի անուն կամ զննարկչի ներդիրում: Տեղադրեք ձեր վերնագրի սկզբի և վերջի պիտակները գլխի պիտակների ներսում և գրեք ցանկացած վերնագիր, որը ձեզ դուր է գալիս այդ պիտակների միջև.
   գովազդ

4-րդ մասի 2-րդ մասը. Տեքստի ձևավորում

1. 

   Տեքստ ավելացրեք ձեր մարմնին: Այս բաժնի համար մենք աշխատելու ենք միայն մարմնի պիտակներով: Մյուս տեքստը դեռ կլինի ձեր փաստաթղթում, բայց մենք կխնայում ենք տարածքը ՝ չկրկնելով այն այս ձեռնարկում: Քարտերի արանքում գրեք այն, ինչ ուզում եք և , և այն կհայտնվի որպես առաջին բովանդակություն ձեր էջում: Օրինակ:
   • Ես հետևեցի wikiHow հրահանգներին ՝ HTML էջ գրելու համար:

2. 

   Տեքստի համար վերնագրեր ավելացրեք: Ձեր էջը կազմակերպեք վերնագրի պիտակներով, որոնք հրահանգում են զննարկիչին ավելի մեծ չափի տառերով ցուցադրել տեքստերը նրանց միջև: Այս պիտակներն օգտագործվում են նաև որոնիչների և այլ գործիքների կողմից `որոշելու, թե ինչի մասին է ձեր կայքը և ինչպես է այն կազմակերպվում:
   ամենամեծ վերնագիրն է, և դուք կարող եք ստեղծել ավելի փոքր վերնագրեր մինչև
   , Փորձեք դրանք ձեր էջում ՝
   • Բարի գալուստ իմ էջ:

   • Ես հետևեցի wikiHow հրահանգներին ՝ HTML էջ գրելու համար:

   • Իմ նպատակն այսօր.

   • Ավարտված նպատակները.

   • Իմացեք, թե ինչպես օգտագործել վերնագրերը:

   • Չիրականացված նպատակներ.

   • Իմացեք ավելին տեքստի ձևավորման պիտակները:

3. 

   Իմացեք ավելին տեքստի ձևավորման պիտակները: Դուք արդեն տեսել եք «ուժեղ» պիտակը, բայց ձեր տեքստը ձևափոխելու բազմաթիվ այլ եղանակներ կան: Փորձեք այս պիտակները կամ միանգամից մի քանի պիտակներով նույն տեքստի տողի համար: Հիշեք, որ հետևում վերջավոր պիտակներ ավելացրեք:
   • Կարևոր տեքստը, որը դիտվում է զննարկիչում թավ տառերով
   • Ընդգծված տեքստը ՝ զննարկիչում շեղ տառերով ցուցադրված:
   • Ուղարկեք սովորականից մի փոքր փոքր գրություն: Այս տեքստը ավտոմատ կերպով կփոխի չափը, եթե օգտագործվի վերնագրում:
   • Տեքստը այլևս արդիական չէ, ցուցադրվում է մարմնի գծիկով:
   • Տեքստը տեղադրվում է ավելի ուշ, քան մյուս փաստաթղթերը, ցուցադրվում են ընդգծումներով:

4. 

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

   • Հակառակ «պարբերություն» բառի, այս պիտակը կպահի ամբողջ տեքստը այս պիտակների միջև մի պարբերության և կտարածի այն վերևից և ներքևում գտնվող տեքստից:

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

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

   • Այս պիտակը սահմանում է տեքստի տեսակը, որը մեջբերվում է աղբյուրից:

     Աղբյուրը կարող եք հետագայում նկարագրել հետևյալով ցիտ քարտ.

5. 

   Ավելացնել վերնագրի անտեսանելի տեքստ: Մեկնաբանության պիտակները չեն ցուցադրվում ինտերնետային էջում: Դրանք թույլ են տալիս ծանոթանալ HTML փաստաթղթին ՝ առանց բովանդակության վրա ազդելու: Մի ավելացրեք ավարտի պիտակ:
   • Քարտերը, որոնք անցնում են միայնակ ՝ առանց պիտակները ավարտելու, կոչվում են «դատարկ պիտակ»:

6. 

   Միավորել դրանք միասին: Այս պիտակները հիշելու լավագույն միջոցը դրանք ձեր կայքում օգտագործումն է: Ահա մի օրինակ, որն օգտագործում է քարտերը մինչ այժմ սովորած քայլերի մեջ: Փորձեք կանխատեսել, թե ինչպես են դրանք հայտնվելու զննարկիչում, ապա պատճենեք դրանք ձեր փաստաթղթում և պարզեք:
   • Բարի գալուստ իմ կայք:

   • Հուսով եմ, որ կվայելեք այս էջը:

     Ես այն պատրաստեցի հենց քեզ համար:

   • Մաս 1. Ինչպե՞ս ես հայտնաբերեցի HTML- ը

   • Ես արդեն HTML- ն եմ սովորել մեկը երկուսըժամ, այնպես որ հիմա ես փորձագետ եմ:
   գովազդ

4-րդ մաս 3-ը. Հղումներ և պատկերներ ավելացնելը

1. 

   Իմացեք հատկանիշների մասին: Պիտակները կարող են ունենալ իրենց մեջ գրված լրացուցիչ տեղեկություններ, որոնք կոչվում են ատրիբուտներ: Այս հատկանիշները ներկայացվում են լրացուցիչ բառերով `հենց պիտակների մեջ, տեսքով գույքի անվանումը = "հատուկ արժեք". Օրինակ, ցանկացած HTML պիտակ կարող է ունենալ վերնագրի հատկանիշ.

   • Ներածության պարբերությունն այստեղ է:

     Վերնագիր «Պարբերություն» պարբերության վրա, որը կհայտնվի, երբ պարբերության վրայով սավառնես ինտերնետային էջում:

2. 

   Հղումներ դեպի այլ կայքեր: Քարտերի օգտագործումը ստեղծել ցանկացած այլ ինտերնետային էջի հղում: Տեղադրեք վեբ էջի URL- ն `href հատկանիշի օգտագործմանը հղվելու համար: Ահա մի օրինակ, որը հղում է դեպի ձեր ընթերցած կայքէջը.
   • Ձեր կայքի ձեր այցելուները կարող են կտտացնել այս տեքստին ՝ հղմանը հետեւելու համար:

3. 

   Ավելացրեք ID հատկանիշ պիտակի վրա: Մեկ այլ հատկանիշ, որը կարող է օգտագործել ցանկացած HTML պիտակ `« id »տարրն է: Cardանկացած քարտում գրեք id = "վիդու" կամ օգտագործել ցանկացած անուն, որը չի պարունակում բացատներ: Այն չի տալիս որևէ տեսանելի էֆեկտ, բայց մենք այն կօգտագործենք հաջորդ քայլին:
   • Օրինակ, ձեր փաստաթղթին ավելացրեք հետևյալը.

     Այս պարբերությունն օգտագործվում է որպես օրինակ `նկարագրելու համար, թե ինչպես է գործում id հատկանիշը:

4. 

   Հղում դեպի որոշակի ID- ի տարր: Այժմ մենք կարող ենք օգտագործել hyperlink թեգը, , նույն էջում մեկ այլ վայր հղվելու համար: URL- ի փոխարեն մենք կօգտագործենք # խորհրդանիշը, որին կհաջորդի id- ի արժեքը, որին ուզում ենք կապել: Օրինակ, Այս տեքստը հղվելու է տեքստի «vidu» ID- ով:
   • HTML- ի բոլոր արժեքները տառատեսակ են: «# VIDU» - ն ու «#vidu» - ն երկուսն էլ հղվելու են նույն վայրին:
   • Եթե ​​ձեր էջը բավականաչափ կարճ է միանգամից ամբողջ էջը ցուցադրելու համար, ձեր զննարկչի հղումը կտտացնելիս, հավանաբար, ոչինչ տեղի չի ունենա: Պատուհանը չափափոխեք մինչև ոլորման տողը հայտնվի, և կրկին փորձեք:

5. 

   Լուսանկարներ ավելացրեք: Քարտ դատարկ պիտակ է, այսինքն `վերջնական պիտակ չի պահանջվում: Պատկերը ցուցադրելու համար զննարկչին անհրաժեշտ բոլոր տեղեկությունները ավելացվում են ՝ օգտագործելով ատրիբուտները: Ահա մի օրինակ, որը ցուցադրում է wikiHow լոգոն ՝ հետևյալ նկարագրով յուրաքանչյուր հատկանիշի համար.
   • 
   • Հատկություններ src = "" զննարկիչին ասում է, թե որտեղ է լուսանկարը: (Նկատի ունեցեք, որ որևէ մեկի կայքից լուսանկար տեղադրելը համարվում է անտեղի. Եւ լուսանկարը կվերանա, երբ էջն այլևս ակտիվ չլինի):
   • Հատկություններ ոճ = "" Այն կարող է շատ բաներ անել, բայց որ ամենակարևորն է, այն օգտագործվում է պատկերի լայնությունը և բարձրությունը պիքսելներով սահմանելու համար: (Փոխարենը կարող եք նաև օգտագործել առանձին հատկանիշներ width = "" և height = "", բայց դա կարող է հանգեցնել տարօրինակ չափափոխման խնդիրների, եթե օգտագործում եք CSS):
   • Հատկություններ alt = "" պատկերի համառոտ նկարագրություն է, որը օգտվողը կտեսնի, եթե պատկերը չի բեռնվում: Սա համարվում է պահանջ, քանի որ այն օգտագործվում է էկրանի ընթերցողների համար ՝ կայքի կույր այցելուների համար:
   գովազդ

Մաս 4-ից 4-ը ՝ Իմացեք ավելին ՝ ավելացնելով և ստանալով ձեր կայքը առցանց

1. 

   Հաստատեք ձեր HTML- ը: HTML վավերացումը ստուգում է ձեր կոդի սխալները: Եթե ​​ձեր կայքը ճիշտ չի ցուցադրվում, վավերացումը կարող է օգնել ձեզ գտնել այն սխալը, որն առաջացնում է խնդիրը: Այն նաև կարող է ձեզ ավելի շատ բան սովորեցնել HTML- ի մասին `որոշելով, որ ծածկագիրը լավ է ցուցադրվում, բայց այլևս խորհուրդ չի տրվում HTML ստանդարտի նոր թարմացումների պատճառով: Անվավեր HTML- ի օգտագործումը ձեր կայքը անօգուտ չի դարձնում, բայց կարող է խնդիրներ առաջացնել կամ անկայուն ցուցադրել տարբեր զննարկիչներում:
   • Փորձեք W3C- ի անվճար վավերացման ծառայություն կամ առցանց փնտրեք HTML 5 վավերացման այլ գործիք:

2. 

   Իմացեք ավելին պիտակներն ու հատկանիշները: Կան բազմաթիվ այլ HTML պիտակներ և հատկանիշներ, և դրանց սովորելու շատ տեղեր.
   • Փորձեք w3schools և HTML Dog ՝ ավելի շատ ձեռնարկների և պիտակների ամբողջական ցուցակների համար:
   • Գտեք այնպիսի կայք, որը ձեզ դուր է գալիս տեսքի տեսքը, ապա օգտագործեք ձեր զննարկչի «Դիտել էջի աղբյուրը» գործառույթը ՝ HTML կոդն ինքներդ ստանալու համար: Պատճենեք այն ձեր փաստաթղթում և ուսումնասիրեք, թե ինչպես է այն գործում:
   • Կարդացեք այլ հոդվածներ և իմացեք, թե ինչպես HTML- ում սեղաններ ստեղծել, օգտագործել մետա-պիտակները `որոնիչների միջոցով այն գտնելու ձեր շանսերը մեծացնելու կամ բաժին օգտագործելու համար: էջի վրա տարածք դնել) և span (օգտագործվում է տեքստի տարրի ոճը ճշգրտելու համար) CSS- ի միջոցով ոճին օգնելու համար:

3. 

   Ստացեք ձեր կայքը առցանց: Ընտրեք ծառայություն ձեր վեբ կայքն ընդունելու համար, այնուհետև կարող եք վերբեռնել այնքան HTML էջ, որքան ցանկանում եք ձեր անձնական վեբ տիրույթում: Դա անելու համար ձեզ հարկավոր է օգտագործել FTP վերբեռնման ծրագրակազմ, բայց վեբ վարձակալության շատ ծառայություններ առաջարկում են նաև այս ծառայությունը:
   • Երբ հղում եք դեպի ձեր կայքի ուղղակիորեն գտնվող էջերին կամ պատկերներին, դուք պետք է օգտագործեք ամբողջական հասցեն: Օրինակ, եթե ձեր տիրույթի անունը www.chuyengiahtmlsieudang.com է, ապա տեքստը այս պիտակներում է կուղղվի «www.chuyengiahtmlsieudang.com/nhatky/thuhai.html» էջին

4. 

   Ավելացրեք ոճեր CSS- ով: Եթե ​​ձեր HTML էջը մի փոքր միօրինակ է թվում, փորձեք սովորել CSS- ի հիմունքները ՝ գույներ, տարբեր տառատեսակներ և ավելի լավ վերահսկելու, թե որտեղ են տեղադրվում տարրերը: CSS- ի «ոճաթերթիկը» HTML էջի հետ կապելը թույլ կտա ձեզ ուժեղ փոփոխություններ կատարել թռիչքային ռեժիմում `ավտոմատ կերպով կարգավորելով բոլոր տեքստի ոճը տվյալ պիտակի մեջ: Այստեղ կարող եք մի փոքր խաղալ հիմնական ձևաչափման շերտի հետ կամ փորփրել HTML- ի շան CSS ձեռնարկի ավելի մանրամասն ձեռնարկներ:

5. 

   JavaScript- ը ավելացրեք ձեր կայքում: JavaScript- ը ծրագրավորման լեզու է, որն օգտագործվում է ձեր HTML էջերին մեծ գործառույթներ ավելացնելու համար: JavaScript հրահանգները տեղադրվում են մեկնարկի և վերջի պիտակների միջև , և կարող է օգտագործվել ինտերակտիվ կոճակներ ավելացնելու, մաթեմատիկայի խնդիրները հաշվարկելու և այլնի համար: Իմացեք ավելին w3c օրինակներում: գովազդ

Խորհուրդներ

• Այս ձեռնարկի մեջ օգտագործված փաստաթղթի տիպի հայտարարագիրը (օգտագործված Փաստաթղթի տիպի հայտարարագիր) «չամրացված HTML 4.0.1 անցումային է» (HTML 4.0.1 ոչ խիստ անցում), հեշտ ձևաչափ: սկսնակների օգտագործման համար: Օգտագործել () զննարկիչը այն կազմելու խիստ HTML 5 ձևաչափով այլընտրանք, որը առաջարկվող (չնայած ավելի քիչ օգտագործվող) ստանդարտ ոճն է:

Arnգուշացում

• HTML- ի նպատակը բովանդակությունը գլոբալ ձևաչափով պահելն է: Այն վերահսկողություն չունի ձեր կայքի ներկայացման վրա, ինչպիսիք են ֆոնի գույնը և տարրերի ճշգրիտ տեղադրումը: Չնայած դեռ կան պիտակներ, որոնք թույլ են տալիս դա անել, ավելի լավ է օգտագործել CSS ՝ ավելի վերահսկելի և կայուն կայք ստեղծելու համար:

Ինչ է պետք

• Պարզ տեքստի խմբագիր, ինչպիսին է NotePad- ը կամ TextEdit- ը
• Վեբ զննարկիչ, ինչպիսիք են Internet Explorer- ը կամ Mozilla Firefox- ը
• (Ըստ ցանկության) HTML խմբագիր, ինչպիսիք են Adobe Dreamweaver, Aptana Studio կամ Microsoft Expression Web