Առաջին դասում մենք արդեն քննեցինք html էջ ստեղծելու մի փոքր օրինակ: Հիմա ստեղծեք ավելի բարդ էջ: Ուզում եմ նշել, որ ես կբացատրեմ, թե ինչպես դա անել առանց հատուկ ծրագրակազմի օգտագործման: Այն ամենը, ինչ անհրաժեշտ է աշխատանքի համար, Windows- ի սովորական նոթատետր է: Ավելի հարմարավետ աշխատանքի համար խորհուրդ եմ տալիս ներբեռնել Notepad ++ (առաջադեմ նոթբուք ՝ html պիտակները կարևորելու ունակությամբ): Եկեք սկսենք:

Բացեք նոթատետրը և պատճենեք հետևյալը դրանում.

Հաջորդը, կտտացրեք «պահպանել որպես», ֆայլի տիպի տուփում ընտրեք «բոլոր ֆայլերը» և անունով գրեք index.html: Անունի վերջում համոզվեք, որ ներառեք ընդարձակումը .html (ոչ .txt), հակառակ դեպքում զննարկիչները դա չեն մեկնաբանի որպես վեբ փաստաթուղթ:

Եթե ​​ինչ-ինչ պատճառներով չեք կարողանում ստեղծել html էջ, ապա նախորդ օրինակը կարող եք ներբեռնել հղումից ՝ index.rar:

Հիմա մի քանի խոսք այն պիտակների մասին, որոնք մենք օգտագործում էինք այս էջը:

Պիտակների նկարագրությունը:

Հենց առաջին պիտակն է (այս պիտակը զուգավորված է. Չնայած այս պիտակը ընտրովի է, դրա օգտագործումը խոսում է լավ տոնայնացման կանոնների մասին: Հետևաբար խորհուրդ եմ տալիս օգտագործել այն:

Հաջորդ պիտակն է: Սա նաև զույգ պիտակ (ներ) է: Այս պիտակը չի երևում էջում (բացառությամբ վերնագրի), բայց անհրաժեշտ է նշել էջի լրացուցիչ պարամետրերը `էջի նկարագրությունը (օգտագործվում է որոնիչների կողմից), հիմնաբառեր (օգտագործվում են որոնիչների կողմից), ոճեր, գրություններ, վերնագիր և այլն:

Պիտակ - զույգ պիտակ (ներ), որը անհրաժեշտ է էջի վերնագիրը նշելու համար: Ավելին, այս պիտակը պետք է տեղադրվի միայն պիտակի ներսում:

Եվ վերջինը, մեր ծածկագրում, պիտակն է: Նաև զույգ պիտակ (և

Դեպքերի ուսումնասիրություն

Բացեք ցանկացած կայք և տեսեք սկզբնաղբյուրը: Դա կարելի է անել ուղղակիորեն զննարկիչում, օգտագործելով ստեղնաշարի դյուրանցումը Ctrl + U:

Այժմ դուք տեսնում եք, թե ինչպես մասնագետները գրում են HTML կոդ և դրա համար մեծ գումարներ են ստանում: Տարբերվում է մեր առաջին էջից, այնպես չէ՞: Բայց սա կարելի է նաև իմանալ մի քանի ամսվա ընթացքում: Եվ եթե ցանկանում եք ամբողջական կրթություն ստանալ CSS- ի և JavaScript- ի իմացությամբ, որպես կրտսեր ծրագրավորող աշխատանք ունենալով, դուք ստիպված կլինեք սովորել մի ամբողջ տարի:

HTML5 տեխնոլոգիական հավաքակազմ

HTML5- ը HTML ստանդարտի վերջին և ամենահզոր տարբերակն է ՝ նոր տարրերով, նոր հատկանիշներով և նոր պահվածքով: HTML5 տերմինը նշանակում է նաև մի շարք տեխնոլոգիաներ, ինչը թույլ է տալիս ստեղծել մի շարք կայքեր և վեբ ծրագրեր:

Փաստորեն, HTML5 տերմինը օգտագործվում է տասը չափանիշից ավելի ստանդարտների համար: Եվ HTML5 որոշ տեխնոլոգիաներ դեռ վերջնական տեսքի չեն եկել: Ոչ բոլոր դիտարկիչներն են աջակցում նրանց (կամ յուրաքանչյուր զննարկիչը տարբեր է):

Երբ մենք խոսում ենք ինտերակտիվ կայքերի և AJAX- ի մասին, մենք գրեթե միշտ խոսում ենք HTML5 տեխնոլոգիաների մասին:

HTML5- ը ունի ծրագրավորման միջերեսներ (API) ՝ վիդեո և ձայնային հաղորդակցություն հաղորդելու համար, չաթերի, ներառյալ զննարկչի միջոցով վիդեո զրույցները և շատ այլ հետաքրքիր ինտերակտիվ բաներ: HTML5- ը թույլ է տալիս ստեղծել զննարկչի խաղեր: Նույնիսկ YouTube- ն այժմ աշխատում է HTML5- ի միջոցով, չնայած նախկինում դա պահանջում էր Flash:

Ֆորմալ կերպով, HTML- ից (HTML4) պարբերաբար HTML5- ին անցնելը շատ պարզ է. Պարզապես գրեք պիտակը վեբ-էջի կոդի սկզբում փաստաթղթի տեսակը նշելու համար:

Ինչպես սովորել գրել HTML

Դուք արդեն սովորել եք, թե ինչպես կարելի է HTML- ով գրել պարզ էջ: Պարզապես սովորեք հիմնական տարրերը և փորձեք: Ինքներդ ձեզ առանձնահատուկ խնդիր դարձրեք (օրինակ, ձեր IP- ի համար այցեքարտի կայք ստեղծեք) կամ վճարովի առաջադրանք ստանձնեք որպես ազատ մասնագետ և փորձեք իրականացնել այն:

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

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

Մարդիկ միմյանց հետ կիսում են իրենց ծրագրերն ու կոդային հատվածները: Որոշ ծրագրավորողներ չեն ցանկանում բացել իրենց ծածկագիրը, նրանք կոդավորում են (կեղծել) գրությունները կայքերում, բայց դրանք կարող են նաև վերլուծվել հատուկ գործիքներով:

Ավելի բարդ գործառույթներով ինտերակտիվ կայքեր ստեղծելու համար, ժամանակակից և գեղեցիկ ձևավորմամբ, անհրաժեշտ է հետագա ուսումնասիրել CSS, JavaScript, վեբ ձևավորում և մի շարք այլ առարկաներ: Այստեղ պահանջվում է ավելի հիմնարար պատրաստում:

Վեբ մասնագիտության մասնագիտության տարեկան վերապատրաստման ծրագիրը իդեալական է սկսնակների համար, ովքեր ցանկանում են մաքուր սալաքար HTML, CSS ոճերի և JavaScript և PHP ծրագրավորման լեզուների վրա: Արդյունքում, դուք կսովորեք, թե ինչպես ստեղծել ձեր սեփական վեբ նախագծերը և կկարողանաք հավակնել կրտսեր մշակողի պաշտոնին:

Գործնական մեկամյա դասընթաց նրանց համար, ովքեր ցանկանում են դառնալ պրոֆեսիոնալ վեբ մշակող, գործարկել իրենց ինտերնետային նախագիծը կամ վեբ ծառայությունը և ստանալ իրենց զարգացման առաջին պատվերները:

  • Ուղիղ արձագանք ուսուցիչներից
  • Դասընթացի նյութերի անսահմանափակ մուտք
  • Պրակտիկա գործընկեր ընկերություններում
  • Ավարտական ​​նախագիծ իրական հաճախորդից
  • Գործընկեր ընկերություններում աշխատանքի երաշխիք իրենց թեզը պաշտպանած շրջանավարտների համար

Մեզ պետք կլինի

1) Ընտրեք տեքստի խմբագիր. Բավական է առաջին անգամ Նոթատետր (Նոթատետր) (դրանում մեզ պետք է միայն թիմ Պահպանիր ինչպես)

Եթե ​​դուք անմիջապես ցանկանում եք սկսել ծրագրավորումը տեքստի մասնագիտացված խմբագիրներում, ապա ուշադրություն դարձրեք.
1) համար Windows- ը
NotePad ++ (ներբեռնեք կամ այստեղ)
Intype (ներբեռնում)

Նրանց տարբերությունը սովորական տեքստային խմբագրիչներից այն է, որ նրանք ինքնաբերաբար պատժվում են: հնարավոր դարձնել ֆայլը նոր կոդավորմամբ կրկին պահպանել (նկատի ունենալ, որ ապագայում դուք կհանդիպեք դրան), տարբեր գույներով գունավոր պիտակներ, օրինակ `դասի ներքևի ծածկագիրը: Սովորական խմբագրում դա կլինի նույն գույնը:

2) Internetանկացած ինտերնետային զննարկիչ, օրինակ, Ինտերնետային հետախույզ պատուհանների կամ Սաֆարի Mac OS X- ի և iOS- ի համար: Այո, այո, դուք նույնպես կարող եք Մոզիլա, Google քրոմ, Օպերան, Յանդեքս և Փոստ զննարկիչները և այլն:

Եկեք ստեղծենք HTML էջ

1) ստեղծել թղթապանակ աշխատասեղանին html . Մենք դա կանենք այնպես, որ դասերը կառուցված լինեն և պարունակվեն մեկ վայրում:

2)Ստեղծել մեր ֆայլը տեքստի խմբագրում, օրինակ Notepad- ում (NotePad): Հաջորդը Պահպանիր ինչպես.

Կոդավորումը ավելի լավ է ընտրել UTF-8, ապա ընտրել ֆայլի բոլոր տեսակները և վերջում ընտրեք ֆայլի անունը .html- ով, օրինակ index.html

Մենք ընտրում ենք որպես գրացուցակ (թղթապանակ), թե որտեղ պետք է փրկենք մերը html
Հրել խնայել. Կատարված է:

Հաճախ այդ հարցը տալիս ֆայլի երկարացումը տեսանելի չէ. Եկեք կարգով ընդունենք

Ֆայլի անվան ընդլայնում - ֆայլի անունին ավելացված նիշերի հաջորդականություն և նախատեսված է ֆայլի տեսակը (ձևաչափը) պարզելու համար: Պարզ ասած, սա .txt .doc .exe .jpg և այլն, ֆայլի անվան վերջում

Ֆայլի ընդարձակման տեսնելու ունակությունը կարող է օգնել ճշգրիտ որոշել ֆայլի տեսակը և թույլ է տալիս ձեռքով (հրամանի հետ միասին) վերանվանել) փոխել ոչ միայն ընդլայնումը, այլև ֆայլի տեսակը (օրինակ ՝ txt- ից html)

չպետք է այսպիսին լինի. լուսանկար, տեքստային փաստաթուղթ, խաղ
Այն պետք է լինի այսպիսին. photo.jpg, տեքստային փաստաթուղթ.txt, game.exe

Բայց եթե դուք դեռ ունեք ֆայլի անունները, կարծես առաջին տարբերակում (ԱՌԱՆ, օրինակ, .txt, jpg, .exe ֆայլի անվան վերջում), կատարեք հետևյալը.

Մենք նայում ենք ֆայլերի և պանակների պարամետրերին.

Համար Win XP- ը Բացեք ցանկացած թղթապանակ - Գործիքներ (վերին վահանակում) - Թղթապանակների հատկություններ - Դիտում - Թաքցնել ընդարձակումները գրանցված ֆայլերի համար (ընտրելու համար) - Դիմել

Համար Հաղթեք 7 Բացեք ցանկացած թղթապանակ - Կազմեք - Ֆայլի և որոնման ընտրանքներ - Դիտեք - Թաքցրեք ընդարձակումները գրանցված ֆայլերի տեսակների համար (չստուգեք) - Դիմեք

Համար Mac OS- ն Կտտացրեք աշխատասեղանին - Finder - Preferences (Advanced) - Advanced - ընտրեք տուփը Showույց տալ բոլոր ֆայլերի ընդարձակումները (Դիմել ընդարձակումներ)

3) դրա մեջ մուտքագրեք ներքևում նշված ամբողջ ծածկագիրը (մեկնաբանությունների հետ միասին):

4) բացիր ֆայլը: Այս ֆայլը բացելու համար կարող եք ընտրել մեկ այլ զննարկիչ, դրա համար աջ սեղմեք մեր ֆայլը index.html - Բացիր և ընտրեք զննարկիչ ցուցակից, օրինակ ՝ Internet Explorer, Google Chrome, Mozilla, Yandex Browser և այլն:

Արդյունքում, արդյունքում ստացված ինտերնետային զննարկիչը բացելը index.html , Դուք պետք է տեսնեք այսպիսի էջ.


Նկար 1

Վրա Նկար 1 մենք տեսնում ենք, թե ինչպես, արդյունքում, զննարկիչը ցուցադրեց ձեր էջը: Հետևյալ տարրերի տեքստը կարևորվում է կարմիրով.

Ստորև ներկայացված կոդում կարող եք տեսնել html փաստաթղթի հիմնական նվազագույնը: Անհրաժեշտ է դա սովորել և ոչ թե շփոթել տեղերում բացման և փակման պիտակները:


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

Պիտակ վերնագիր կանգնած է էջի անվանման համար: Սա ներառում է միակ պիտակը գլուխոր ցուցադրվում է էջում: Ինչը մուտքագրեք բացումից հետո և փակման պիտակը, կլինի ձեր էջի վերնագիրը Ինտերնետում

Օրինակներում պիտակների ձախ կողմում գտնվող բոլոր ցուցումները պարտադիր չեն: Դրանք պատրաստված են նկարազարդման համար, որպեսզի տեսնեք զույգ պիտակ:

Պիտակ մարմինը ցույց է տալիս էջի մարմինը: Ինչ մուտքագրել բացման և փակման պիտակները հետո մարմինը և կլինի ձեր էջի բովանդակությունը


HTML- ում գրեթե բոլոր պիտակները բացումը և փակումը (բացառություն, օրինակ, img պիտակը, որը ցույց է տալիս պատկերի տեղադրումը):


Մեկ անգամ ևս հիշում եմ, որ կարևոր է չմոռանալ գրել փակման պիտակները բոլոր այլ տիպերի թեգերի համար, հակառակ դեպքում Browser- ը չի հասկանա, թե որտեղ եք ուզում ավարտել այս կամ այն ​​տարրը: Ինչպես ստորեւ:


Համարձակ բառից հետո մենք դիտավորյալ մոռացանք փակման պիտակը b. Արդյունքում զննարկիչը ցուցադրել է հետևյալը

Ես ուզում եմ առանձնացնել տեքստը համարձակ, և սա արդեն իտալիկայում

Ինչպես տեսնում եք, տեքստը կհրապարակվի համարձակորեն մինչև վերջ, և մեկը, որը ենթադրվում էր italics- ում, կլինի համարձակ և շեղանկյուն: Ուրեմն զգույշ եղեք:

5) Եթե ​​ցանկանում եք ինչ-որ բան խմբագրել ձեր ֆայլում index.html (և այն այժմ լռելյայն բացվում է միայն զննարկչի կողմից), ապա կտտացրեք մկնիկի աջ կոճակը մեր ֆայլի վրա index.html - ընտրել Բացիր իսկ ցուցակից մենք ընտրում ենք տեքստի խմբագիր, դա էլ կլինի Notepad (անգլերեն Notepad)կամ ձեր տեղադրած մեկ այլ տեքստային խմբագիր:

Սկզբունքորեն, բացատրեց հիմունքները: Թեև html էջը բավականաչափ պարզ է թվում, բայց հաջորդ դասերին ես ձեզ մանրամասն կպատմեմ այս և այլ տարրերի և դրանց նպատակի մասին. Մենք կտեղադրենք պատկերներ, կապեր կկազմենք և շատ այլ հետաքրքիր բաներ)