Նոթատետրում html էջի ստեղծում. պարզաբանում կեղծիքների համար: Կենտրոնի հավասարեցում վերնագիր

Առաջադրանք 1. Հիմնական HTML ֆայլերի ստեղծում

Ձեր HTML ֆայլը ստեղծելու համար կատարեք հետևյալը.

    Ստեղծեք թղթապանակ HTML, որում կպահենք ստեղծված վեբ էջերը։

    Գործարկեք ստանդարտ Notepad ծրագիրը:

    Խմբագրի պատուհանում մուտքագրեք HTML ֆայլի ամենապարզ տեքստը.

Ուսուցման HTML ֆայլ

Երեքշաբթի դասացուցակ

    Պահպանեք ֆայլը որպես RASP.HTM:

    Ստեղծված վեբ էջը դիտելու համար ներբեռնեք Microsoft Internet Explorer բրաուզերը:

    Բացեք բրաուզերի մենյուում Ֆայլ(Ֆայլ), Բաց(բաց), Դիտել(Ընդհանուր ակնարկ- Թերթիր) և գտնել RASP.HTM ֆայլը KURS թղթապանակում և վերբեռնել այն: Համոզվեք, որ վեբ էջի անունը (HTML ձեռնարկ) ցուցադրված է դիտարկիչի վերին կարգավիճակի տողում:

Առաջադրանք 2.Էկրանի վրա տեքստի դասավորության վերահսկում

Տեղեկատվություն.

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

    Անհրաժեշտության դեպքում հետևեք p.p. 5-6 առաջադրանքներ 1.

    Բացեք վեբ էջի սկզբնական աղբյուրը՝ դիտարկիչի ընտրացանկից Դիտել(Դիտել), Աղբյուր (ինչպեսHTML) կբացվի պատուհան ստանդարտ Notepad ծրագրով, որում ձեր վեբ էջը ներկայացված է HTML հրամաններով:

    Փոփոխեք տեքստը HTML ֆայլում՝ տեղադրելով «Ժամանակացույց», «դասեր», «Երեքշաբթի» բառերը տարբեր տողերում.

Ուսուցման HTML ֆայլ

Ժամանակացույց

դասեր

Երեքշաբթի օրը

    Պահպանեք ձեր փոփոխությունները RASP.HTM ֆայլում՝ օգտագործելով հրամանները Ֆայլ(Ֆայլ), Պահպանել(Պահպանել). Փակել Notepad-ը:

    Օգտագործեք Microsoft Internet Explorer-ը՝ F5 ստեղնով կամ հրամանների միջոցով նոր վերցված վեբ էջը դիտելու համար Դիտել(Դիտել), Թարմացնել (թարմացնել):Էկրանի վրա տեքստի պատկերը փոխվե՞լ է։

Նշում

Հետագայում, վեբ էջում փոփոխություններ կատարելուց հետո, միշտ հետևեք 4-5 քայլերին:

Առաջադրանք 3. Տողերի և պարբերությունների ընդմիջման պիտակներ

Տեղեկատվություն.

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

Գծի հոսքի պիտակ
բաժանում է տողը հաջորդ տեքստից կամ գրաֆիկայից: պարբերության պիտակ

Նաև առանձնացնում է տողը, բայց նաև ավելացնում է դատարկ տող, որը տեսողականորեն ընդգծում է պարբերությունը: Երկու թեգերն էլ միայնակ են:

    Փոփոխություններ կատարեք HTML ֆայլի տեքստում.

Ուսուցման HTML ֆայլ

Ժամանակացույց

դասեր

Երեքշաբթի օրը

    4. Պահպանեք ձեր փոփոխությունները RASP.HTM ֆայլում:

    Օգտագործեք Microsoft Internet Explorer-ը՝ նոր ստացված վեբ էջը դիտելու համար: Ինչպե՞ս է փոխվել էկրանի տեքստը:

Առաջադրանք 4. Տեքստի հատվածների ընտրություն

Տեղեկատվություն.

Տեքստի ընտրության պիտակները թույլ են տալիս վերահսկել առանձին նիշերի և բառերի ցուցադրումը: Տեքստի ընտրության երեք պիտակ կա.

… ընդգծել համարձակ,

… ընդգծել շեղատառերով

…ընդգծել ընդգծելով.

Ուսուցման HTML ֆայլ

Ժամանակացույց դասեր Երեքշաբթի օրը

2. Դիտեք նոր ստացված վեբ էջը:

Հնարավոր է օգտագործել համակցված տառատեսակներ.

Ժամանակացույց դասեր Երեքշաբթի օրը

Բայց միևնույն ժամանակ պետք է հիշել համակցված թեգեր գրելու հետևյալ կանոնը.

<Тэг-1> <Тэг-2> … Tag-2>

սխալ մուտք

Առաջադրանք 5. Վերնագրերի ոճերի օգտագործում

Տեղեկատվություն.

Բրաուզերի կողմից ցուցադրվող տեքստի չափը վերահսկելու երկու եղանակ կա.

    օգտագործելով վերնագրի ոճերը,

    հիմնական փաստաթղթի չափը կամ ընթացիկ տառատեսակի չափը սահմանելը:

Կան վեց վերնագրեր (H1-ից H6): Յուրաքանչյուր թեգ ունի հատուկ ոճ, որը նշված է բրաուզերի կարգավորումներում: Style H1-ը ամենամեծն է:

    Փոփոխություններ կատարեք RASP.HTM ֆայլում.

Ուսուցման HTML ֆայլ

Ժամանակացույց

դասեր Երեքշաբթի օրը

    Դիտեք նոր ստացված վեբ էջը:

Առաջադրանք 5. Սահմանել ընթացիկ տառատեսակի չափը:

Տեղեկատվություն.

տառատեսակի պիտակ թույլ է տալիս սահմանել ընթացիկ տառատեսակի չափը տեքստի առանձին վայրերում: Ներկայիս տառատեսակի կարգավորումների միջակայքը 1-ից 7 է:

    Փոփոխություններ կատարեք RASP.HTM ֆայլում.

Ուսուցման HTML ֆայլ

Ժամանակացույց

երեքշաբթիի պարապմունքներ

    Փոխեք «դաս երեքշաբթի օրը» տեքստի տառաչափը ինքներդ՝ օգտագործելով պիտակը .

    Փոփոխեք HTML փաստաթղթի տեքստը՝ օգտագործելով տեքստի ընտրության պիտակներ և տողերի և պարբերությունների ընդմիջման պիտակներ:

Առաջադրանք 6. Տառատեսակի և տառատեսակի գույնը

Տեղեկատվություն.

Նշել Ապահովում է տեքստի չափի, ոճի և գույնի վերահսկողություն: Տառատեսակի փոփոխությունը կատարվում է պարզապես պիտակին ավելացնելով ԴԵՄՔ հատկանիշ. Օրինակ՝ Arial տառատեսակով տեքստը ցուցադրելու համար գրեք .

Պիտակի տառատեսակի գույնը փոխելու համար հատկանիշը կարող է օգտագործվել COLOR = "X".

X-ի փոխարեն դուք պետք է փոխարինեք կամ գույնի անունը (մեջբերումներով) կամ դրա տասնվեցական արժեքը: Տասնվեցական թվով գույն նշելիս կարող եք այս գույնը ներկայացնել երեք բաղադրիչի.

կարմիր (R), կանաչ (G), կապույտ (B), որոնցից յուրաքանչյուրն ունի 0-ից մինչև FF արժեք:

RGB ձևաչափով գունավոր ձայնագրման օրինակներ ներկայացված են աղյուսակում.

Աղյուսակ 1

Գույն

Գույն

Մանուշակ

Բրաուն

Նարնջագույն

փիրուզագույն

    Փոփոխություններ կատարեք RASP.HTM ֆայլում.

Ուսուցման HTML ֆայլ

Ժամանակացույց >

երեքշաբթիի պարապմունքներ

    Ինքներդ փոխեք փաստաթղթի չափը, գույնը, տառատեսակը, տեքստի ոճը:

Առաջադրանք 7. Տեքստի հորիզոնական հավասարեցում

Տեղեկատվություն.

HTML թեգերը վերահսկում են տեքստի հորիզոնական հավասարեցումը: Եթե ​​դուք չեք նշում հավասարեցման մեթոդ, փաստաթղթի բոլոր տարրերը կհավասարեցվեն ձախ կողմում և կունենան ատամնավոր աջ լուսանցք (տես Նկար 2):

Ժամանակակից բրաուզերներն օգտագործում են տեքստի հավասարեցման հատկանիշը ՀԱՎԱՍՏԵԼ =, որը ներդրված է պարբերության կամ վերնագրի պիտակներում:

    Փոփոխություններ կատարեք RASP.HTM ֆայլում.

Ուսուցման HTML ֆայլ

Ժամանակացույց>

երեքշաբթիի պարապմունքներ

Առաջադրանք 8. Ֆոնի և տեքստի գույների սահմանում

Տեղեկատվություն.

Ֆոնը, տեքստը, բրաուզերները ցուցադրելիս օգտագործում են լռելյայն սահմանված գույները՝ դրանք սահմանված են դիտարկիչի կարգավորումներով: Այս գույները դրված են պիտակի HTML ֆայլի սկզբում . Գույնի մուտքագրումը նման է տառատեսակի գույնին (տես Աղյուսակ 1, պարբերություն 12): BGCOLOR= հատկանիշը սահմանում է էջի ֆոնի գույնը, TEXT=-ը նշում է ամբողջ էջի տեքստի գույնը, LINK= և VLINK= սահմանում են համապատասխանաբար չայցելված և դիտված հղումների գույները (վերջին երկու պարամետրերը կքննարկվեն ավելի ուշ):

    Փոփոխություններ կատարեք RASP.HTM ֆայլում.

Ուսուցման HTML ֆայլ

BGCOLOR="#FFFFCC" TEXT="#330066">

Ժամանակացույց>

երեքշաբթիի պարապմունքներ

Առաջադրանք 9.

    Փորձեք ստեղծված փաստաթղթի հետ: Երբ դուք չափափոխում եք պատուհանը, տեսեք, թե ինչպես է զննարկիչը ներկայացնում տեքստը հարկադիր գծերի ընդմիջումներով: Ի՞նչ է պատահում, երբ պատուհանն այնքան է փոքրանում, որ նույնիսկ մեկ բառ չի կարող տեղավորվել դրա ներսում:

    Ինքներդ ստեղծեք ձեր սեփական HTML փաստաթուղթը: Թող դա լինի կարճ պատմություն ձեր և ձեր հոբբիների մասին:

Բարև սիրելի բլոգի ընթերցողներ: Շարունակում ենք «Ստեղծել կայք զրոյից» բաժինը և մասնավորապես պիտակների թեման... Եվ այսօր մենք կդիտարկենք այն պիտակները, որոնք առկա են ցանկացած վեբ էջում. , և . Կա ևս մեկ պիտակ, որը պետք է լինի յուրաքանչյուր HTML փաստաթղթում, և որի մասին ես արդեն գրել եմ նախորդ հոդվածներից մեկում, ուստի մենք դրան չենք անդրադառնա:

Սյունակի նախորդ հոդվածներում գրել էի html ֆորմատով դատարկ ֆայլ ստեղծելու մասին։ Փաստորեն, այն օգտագործվել է pro հոդվածում (այդտեղ են կիրառվել վերնագրերի պիտակները): Այժմ մենք ուղղակիորեն կխմբագրենք այս ֆայլը՝ ամբողջական նկարագրություններով:

Իսկ հոդվածը սկսենք ստեղծված ֆայլի խմբագրմամբ։ Անձամբ ես այն անվանել եմ index.html, բայց անունը կարող է լինել ցանկացած: Բացեք այն ցանկացած տեքստային խմբագրիչով (ավելի լավ է օգտագործել Notepad++, քանի որ այն ունի կոդի ընդգծում և այլ օգտակար գաջեթներ)։ Եվ անմիջապես դրա վրա պիտակներ ավելացրեք , և ճիշտ այն հերթականությամբ, որով դրանք գրված են: Մի մոռացեք փակել դրանք, ինչպես ցույց է տրված սքրինշոթում: Փաստաթուղթը կունենա հետևյալ տեսքը.

Այժմ հաշվի առեք յուրաքանչյուր պիտակի նշանակությունը առանձին: Զարմանալի չէ, որ դրանք բոլորի մեջ են: HTML փաստաթուղթ.

Պիտակի գործառույթներ

Այսպիսով, պիտակը է կոնտեյներ(). Դրա ներսում կա վեբ էջի ամբողջ տեսանելի և անտեսանելի բովանդակությունը (ներառյալ պիտակները և ): Բացման պիտակ գալիս է Doctype-ի հռչակագրից և փակումից անմիջապես հետոփաստաթղթի վերջում է: Այսպիսով, զննարկիչին պարզ է դառնում, թե որտեղ պետք է սկսել փաստաթղթի մշակումը և որտեղ ավարտել այն:

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

Նույնիսկ հաշվի առնելով, որ այս պիտակի գործառույթը միայն ներսում է սահմանազատող բովանդակություն, այն ունի իր ատրիբուտները (որոնք այժմ կամ ընդհանրապես չեն օգտագործվում, կամ օգտագործվում են չափազանց հազվադեպ)։ Տարբեր աղբյուրներում նշվում են միմյանցից տարբեր ատրիբուտներ, ուստի ես չեմ համարձակվում առաջ քաշել ճիշտ տարբերակը։

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

Եվ ահա, թե ինչ կտեսնեք, երբ սավառնում եք այս բովանդակությամբ փաստաթղթի վրա.

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

Պիտակավորման գործառույթ

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

Ինչ տեղեկատվություն կարելի է գտնել ? Բայց ոչ մեկը։ Այս պիտակի մեջ ամեն ինչ հասանելի է միայն մարդու աչքին՝ դիտելով էջի սկզբնական կոդը: Այս պիտակի ամբողջ բովանդակությունը նախատեսված է որոնման համակարգեր և բրաուզերներ. Միակ բանը, որ դուք կարող եք ինչ-որ կերպ տեսնել, պիտակն է , որը պատասխանատու է վեբ էջի պատուհանի վերնագրի համար։ Ահա մի օրինակ.</p> <p><img src='https://i1.wp.com/monetavinternete.ru/wp-content/uploads/2013/01/Title-v-tege-head.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Սրբապատկերից հետո տեքստը պիտակի բովանդակությունն է <title>. Հիմա նայենք բովանդակությանը։ <head>, որը մենք չենք կարող տեսնել, բայց որը շատ կարևոր մասն է <b>կայքի ստեղծում և առաջխաղացում:</b>Առաջին հերթին սա է գիծը</p><p> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </p><p>Սա մետա թեգն է <b>էջի բովանդակության տեսակը</b>(Content-Type). Այս դեպքում սա html կոդը է UTF-8 կոդավորման մեջ (content="text/html; charset=UTF-8"): Հաջորդը գալիս է վերը նկարագրված վերնագրի պիտակը: Այնուհետև գալիս են պիտակով սկսվող տողերը <link>. Այն ցույց է տալիս արտաքին փաստաթղթի հղումը: Օրինակ, գիծը</p><p> <link href="http://сайт/.../style.css" rel="stylesheet" media="screen" type="text/css" /> </p><p>ցույց է տալիս, որ միացված է (rel="stylesheet") ֆայլը (type="text/css"), որը գտնվում է այսինչ հասցեում (տողի երկարությունը կրճատելու համար հասցեի կեսը փոխարինեցի կետերով) . Բրաուզերի կողմից այս տողը մշակելուց հետո այն կորոշի, թե որտեղից ստանալ <b>կասկադային ոճի թերթիկներ</b>.</p> <p>Ընդհանրապես, head tag-ում շատ տեղեկություններ կան, որոնց մասին կարելի է անվերջ խոսել։ Վերջին բանը, որ արժե ուշադրություն դարձնել (մասնավորապես ) նկարագրության պիտակների, հիմնաբառերի և կանոնականի առկայությունն է: ես օգտագործում եմ <b>plugin Բոլորը մեկ SEO փաթեթում</b>, ուստի նրանք ներկա են ներսում <head>.</p> <p>Ինչպես գիտեք, ամեն հիանալի ամեն ինչ միշտ սկսվում է փոքրից: Եթե ​​ձեզ հետաքրքրում է այն հարցի պատասխանը, թե ինչպես կարելի է կայք ստեղծել նոթատետրի միջոցով, ապա դուք պետք է ինչ-որ տեղ լսել այս հնարավորության մասին։ Սա իսկապես հնարավոր է: Բայց հարկ է անմիջապես նշել, որ, ամենայն հավանականությամբ, ներկայումս ոչ ոք չի ստեղծի ժամանակակից դինամիկ ինտերակտիվ կայք նոթատետրով, քանի որ դրա համար կան հատուկ ծրագրեր, որոնք մեծապես արագացնում և պարզեցնում են զարգացման գործընթացը: Բայց միանգամայն հնարավոր է ստեղծել լիարժեք վեբ էջ։</p><b>Ինչպես ստեղծել կայք notepad-ում</b><br>Սկսելու համար անհրաժեշտ է մի փոքր ծանոթանալ տեսությանը և ընդհանուր տերմիններին: Կայքի էջերի ճնշող մեծամասնությունը սովորական տեքստային փաստաթղթեր են, որոնք նախագծված են հատուկ ձևով` հիպերտեքստային նշագրման լեզվով, որը հապավում է HTML: Ոմանք դասակարգում են HTML նշումը որպես ծրագրավորման լեզու, բայց դա ճիշտ չէ: <p>HTML-ը պարզապես փաստաթղթերի նշագրման ստանդարտացման միջոց է, որը եզակի կերպով մեկնաբանվում է բրաուզերների կողմից՝ համակարգչային էկրաններին օգտագործողի համար հարմար ձևով ցուցադրվելու համար: HTML լեզվի հիմնական գործիքը հատուկ կառուցվածքային տարրերն են, որոնց օգնությամբ կազմվում է փաստաթուղթը։ Դրանք կոչվում են նկարագրիչներ կամ պիտակներ:</p><p>Ընդհանուր առմամբ, պիտակը ձևի կառուցումն է <table>Այսպիսով, պիտակը սկսվում է< после которого следует название тега table и вся конструкция завершается знаком >. Թեգերը գալիս են զույգերով, օրինակ՝ տեքստը թավ դարձնելու համար <b>և</b>և չզուգակցված որպես նոր տող <br>. Զուգակցված թեգերի օգտագործման դեպքում այն ​​պետք է օգտագործվի որպես բացման պիտակ <b>, և փակում</b>. Փակման պիտակը նկարագրիչ է առաջ կտրվածքով /:</p><p>Դիտարկենք պիտակների հիմնական տեսակները և դրանց նպատակը:</p><ul><li><span><i>Տարր <b><!DOCTYPE html> </b>. </i>Սահմանված է էջի հենց սկզբում և ծառայում է զննարկիչին ասելու, թե ինչպես մեկնաբանել այս փաստաթուղթը: Այն ընտրովի է, բայց շատ ցանկալի է էջում՝ դրա ցուցադրման հետ կապված հնարավոր խնդիրներից խուսափելու համար: <br></span></li><li><span><i>Նշել <b><html> </b>. </i>Այն զույգ պիտակ է և բաղկացած է երկու մասից <html>և</html>. Կայքի յուրաքանչյուր էջ սկսվում է այս պիտակով և ավարտվում դրանով: <br></span></li><li><span><i>Նշել <b><head> </b>. </i>Այն նաև զույգ պիտակ է և բաղկացած է երկու մասից <head>և</head>. Այս թեգը պարունակում է տարբեր կարևոր տեղեկություններ էջի մասին՝ դրա վերնագիր, օգտագործված դիզայնի ոճերի հղումներ, ներառված սցենարներ, հատուկ մետատվյալներ։ <br></span></li><li><span><i>Նշել <b><title> </b>. </i> <title>ևև գտնվում է պիտակի ներսում . Այս թեգը սահմանում է էջի անվանումը, որով այն տեսանելի կլինի դիտարկիչում:

  • Նշել . Այն զույգ պիտակ է, բաղկացած է երկու մասից ևև հետևում է պիտակին Էջում. Այն գտնվում է <body> թեգում, որը պարունակում է բրաուզերի էջում ցուցադրված ամբողջ տեղեկատվությունը:
  • Նշել . Միայնակ է։ Օգտագործվում է փաստաթղթում գծի ընդմիջում նշելու համար:
  • Նշել . Վերաբերում է զուգակցված պիտակներին, գրված է այլ պիտակներից մի փոքր տարբեր ձևով և օգտագործվում է հղումներ ստեղծելու համար: Դա HTML լեզվի, ինչպես նաև ամբողջ ինտերնետի ողջ հայեցակարգի էական տարր է:
  • Նշել

    . Վերաբերում է զուգակցված պիտակներին և բաղկացած է երկու մասից: Նրա օգնությամբ կազմվում է տեքստային պարբերություն:

  • պիտակներ

    ,

    ,

    ,

    ,
    ,
    . Դրանք պատկանում են զուգակցված պիտակներին, քանի որ, օրինակ, բաղկացած են երկու պիտակներից

    և

    . Այս թեգերը ծառայում են ենթավերնագրերի վեց մակարդակի ստեղծմանը և միևնույն ժամանակ ցույց են տալիս դրանցում պարունակվող տեքստի կարևորությունը ամբողջ փաստաթղթի հետ կապված:

  • Նշել . Այն նաև զուգակցված պիտակ է՝ բաղկացած երկու մասից ևև տառատեսակի ոճը դնում է թավերի վրա:
    • Ընդհանուր առմամբ, կան մոտ հարյուր պիտակներ, բայց դիտարկված տասը արդեն բավական է կայքի ամենապարզ էջը նոթատետրում ձևավորելու համար։ Փաստաթղթերի հիմնական պիտակներ , , , <body>բաշխվում է խիստ կարգով. Պիտակի ներսում <body>Մնացած նկարագրիչները կարող են տարբեր կարգով լինել HTML լեզվի ստանդարտների շրջանակներում: Սա հասկանալու ամենահեշտ ձևը պարզ վեբ էջ ստեղծելն է: <ol><li><span>Գործարկեք Notepad-ը և դրա առաջին տողում դրեք տարրը<!DOCTYPE html>, որը զննարկիչին ասում է, թե ինչպես մեկնաբանել ձեր փաստաթուղթը: <p> <!DOCTYPE html></p></span></li><li><span>Ստեղծեք նոր տող և ավելացրեք զույգ պիտակ <html>. Թարգմանեք փակման պիտակը</html>երկու տող ներքեւ: <p> <!DOCTYPE html><br><html></p></span></li><li><span>Ավելացնել զույգ պիտակ <head>պիտակների միջև գծում <html>և թարգմանել փակման պիտակը</head>երկու տող ներքեւ: <p> <!DOCTYPE html><br><html><br><head></p><p></head><br></html></p></span></li><li><span>Համացանց պիտակների միջև <head>և</head>գրել զույգ պիտակ <title>մեկ տողով.






  • Մուտքագրեք ձեր վեբ էջի վերնագիրը պիտակների միջև և. Օրինակ՝ այսպես.




    Իմ առաջին կայքի էջը

  • Տեղադրեք կուրսորը փակվող պիտակից հետո տողի վրաև կատարեք տողերի հոսք: Հայտնվող դատարկ տողում մուտքագրեք զույգ պիտակ .




    Իմ առաջին կայքի էջը


  • Կատարեք կրկնակի թարգմանություն ներքին պիտակների միջև և. Հայտնվող տողում մուտքագրեք զուգակցված վերնագրի պիտակը

    . Մուտքագրեք պիտակի ներսում

    էջի ենթավերնագիր.




    Իմ առաջին կայքի էջը


    Իմ մասին



  • Փակվող վերնագրի պիտակից հետոկատարեք տողերի ընդմիջում և նոր տողի վրա դրեք զուգակցված պարբերության պիտակները: Տեղադրեք տեքստ նրանց միջև: Օրինակ՝ այո։




    Իմ առաջին կայքի էջը


    Իմ մասին


    Ես Իվանով Իվանն եմ: Ես ստեղծում եմ իմ կայքը։



  • Անունը և ազգանունը փակցրե՛ք զույգ պիտակի մեջ նրանց համարձակ դարձնելու համար:




    Իմ առաջին կայքի էջը


    Իմ մասին


    Իմ ԱՆՈՒՆՆ Է Իվանով Իվան. Ես ստեղծում եմ իմ կայքը։



  • Պարբերության պիտակը փակելուց հետո

    կատարեք տողերի հոսք և մուտքագրեք զույգ պիտակը նոր տողում

    . Մուտքագրեք որոշ տեքստ պիտակների միջև:




    Իմ առաջին կայքի էջը


    Իմ մասին


    Իմ ԱՆՈՒՆՆ Է Իվանով Իվան. Ես ստեղծում եմ իմ կայքը։


    Իմ առաջընթացը



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




    Իմ առաջին կայքի էջը


    Իմ մասին


    Իմ ԱՆՈՒՆՆ Է Իվանով Իվան. Ես ստեղծում եմ իմ կայքը։


    Իմ առաջընթացը




  • Հոդվածում թվարկված պիտակներից երկուսը մնացին չուսումնասիրված՝ տողերի հոսք
    և ամենակարևոր կապի կառուցման պիտակը     . Եկեք կիրառենք դրանք: Նախքան վերջին փակման պիտակը, մուտքագրեք նկարագրիչ
    , և միջև
    և

    տեսակի շինարարություն. Դուք պետք է ստանաք հետևյալը.




    Իմ առաջին կայքի էջը


    Իմ մասին


    Իմ ԱՆՈՒՆՆ Է Իվանով Իվան. Ես ստեղծում եմ իմ կայքը։


    Իմ առաջընթացը


    HTML-ի հիմնական շարահյուսությունը յուրացվել է և ստեղծվել է ապագա կայքի առաջին էջը։
    Ուսուցման գործընթացում օգտագործվել են կայքի կայքի նյութերը



  • Պիտակի մեջբերումների միջև մուտքագրեք այն էջի հասցեն, որին կապվելու եք: Նախքան նշելը կարող եք մուտքագրել Հղում բառը և պիտակների միջև ևմուտքագրեք տեքստը, որը կցուցադրվի էջում:




    Իմ առաջին կայքի էջը


    Իմ մասին


    Իմ ԱՆՈՒՆՆ Է Իվանով Իվան. Ես ստեղծում եմ իմ կայքը։


    Իմ առաջընթացը


    HTML-ի հիմնական շարահյուսությունը յուրացվել է և ստեղծվել է ապագա կայքի առաջին էջը։
    Ուսուցման գործընթացում օգտագործվել են կայքի կայքի նյութերը

    Հղում: կայք



  • Դրա վրա կարող է ավարտվել կայքի համար ամենապարզ էջի ստեղծումը: Սկզբունքորեն, այն կարող էր ավարտվել նաև 9-րդ քայլում, բայց եթե դուք լրջորեն ցանկանում եք սովորել HTML լեզուն, ապա լրացուցիչ պրակտիկան ավելորդ չի լինի: Պահպանեք էջը *.html ընդլայնմամբ և կարող եք այն բացել ցանկացած բրաուզերում՝ ձեր աշխատանքի արդյունքները դիտելու համար։ Եթե ​​ամեն ինչ ճիշտ է արված, ապա դուք պետք է տեսնեք հետևյալի նման մի բան.
    • Եթե ​​այս հոդվածը կարդալուց հետո կայք ստեղծելու ձեր վճռականությունը չի չորացել, ապա համոզվեք, որ ծանոթացեք HTML լեզվի ամբողջական շարահյուսությանը, ինչպես նաև սովորեք, թե ինչպես օգտագործել CSS կասկադային ոճերը էջի ձևավորման համար:

    Վեբ կայքերի մշակում՝ օգտագործելով HTML հիպերտեքստի նշագրման լեզուն

    8-րդ դասարան

    Դաս 1 Վեբ էջի կառուցվածքը.

    Կայքի հայեցակարգ

    Տեղեկատվություն Համաշխարհային ցանցում
    պահվում են կայքերի տեսքով։
    Կայքն իր կառուցվածքով նման է
    ամսագիր թեմայի շուրջ կամ
    խնդիր. Ինչպես է կազմված ամսագիրը
    տպագրված էջերը, և վեբ կայքը բաղկացած է
    համակարգչային վեբ էջերից:
    Վեբ էջերը կապված են հիպերհղումներով:

    Կայքերի տեսակները

    պաշտոնական (կառավարություն,
    Դումա, դպրոց...)
    Կոմերցիոն
    Անձնական

    Վեբ էջերի առավելությունները.

    Տեղեկատվության փոքր ծավալ
    («թոքեր»)
    Հարմար է տարբեր դիտման համար
    ՕՀ.
    Դինամիկ.
    Ինտերակտիվ.

    Կայքի ստեղծման քայլերը.

    1.
    2.
    3.
    Կառուցեք կայքը տեղում
    համակարգիչ։
    թեստ (ստուգել
    ճիշտ գործողություն):
    Տեղադրել առցանց -
    ընտրեք հոստինգ սերվեր
    (վճարովի կամ անվճար):

    Կայք ստեղծելու ծրագրեր.

    1) ամենապարզ տեքստային խմբագրիչը (առանց
    տեքստի ձևաչափում):
    Տետր
    2) դիտարկիչ՝ էջերը դիտելու համար.
    Internet Explorer
    3) Պատկերների մշակման ծրագիր.
    ֆոտոշոփ

    Վիզուալ վեբ խմբագիրներ

    HTML-ով կայք կառուցելը շատ է
    աշխատատար, հատուկ
    գիտելիք։
    Կան տեսողական վեբ խմբագիրներ
    (ծրագրեր) կայքերի ստեղծման համար։
    Աշխատեք WYSIWYG սկզբունքով
    (այն, ինչ տեսնում եք, այն է, ինչ դուք ստանում եք):

    Վեբ էջի կառուցվածքը

    10. Պիտակներ

    Վեբ էջի տեսքը սահմանվում է ադմինիստրատորների կողմից
    հրամաններ - պիտակներ, որոնք են
    անկյունային փակագծեր< >
    Թեգերը կարող են լինել միայնակ (չկրկնվող) կամ
    զույգ (տարաներ)՝ փակվելուց առաջ
    կոնտեյների պիտակը գրված է առաջ կտրվածքով (/)

    Թեգերը գրված են անգլերեն տառերով (մեծատառ,
    փոքրատառ):

    11. Վեբ էջի կառուցվածքը

    Էջի ամբողջ HTML կոդը
    տեղադրված է հիմնական ներսում
    կոնտեյներ:
    .
    Վեբ էջը բաժանված է
    2 տրամաբանական մաս.
    վերնագիր (HEAD)
    բովանդակություն (ՄԱՐՄԻՆ):

    12. Վեբ էջի անվանումը

    Վեբ էջի վերնագիրը փաթաթված է տարայի մեջ:
    Պարունակում է փաստաթղթի վերնագիրը և էջի մասին տեղեկություններ
    (օրինակ՝ կոդավորման տեսակը), որն օգտագործում է զննարկիչը դրա համար
    ճիշտ ցուցադրում.
    Վեբ էջի անվանումը պարունակվում է կոնտեյներով<ТITLE> և
    ցուցադրվում է դիտարկիչի պատուհանի վերևի տողում, երբ դիտվում է
    էջեր։

    <ТITLЕ>Համակարգիչ

    13. Վեբ էջի ձևանմուշ գրելը



    <ТITLЕ>Համակարգիչ

    14. Վեբ էջի հիմնական բովանդակությունը

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

    15. Վեբ էջի ձևանմուշ



    <ТITLЕ>Համակարգիչ


    Ամեն ինչ համակարգչի մասին

    16.

    17. Ինչպես պահպանել վեբ էջը

    1. Ստեղծեք հատուկ թղթապանակ կայքի համար և
    պահպանել կայքի բոլոր ֆայլերը այս թղթապանակում:
    2. Պահպանեք վեբ էջը որպես ֆայլ
    index.html անունով տիտղոսաթերթն է
    կայք (առաջին անգամ բեռնված է դիտարկիչում)
    Վեբ էջի ֆայլերի ընդարձակումներ - .htm
    or.html

    18. Մենք ստեղծում ենք մեր կայքը….

    Անհրաժեշտ է տարբերակել index.html ֆայլի անունը՝ under
    որը վեբ էջը պահվում է ֆայլում
    համակարգը և վեբ էջի իրական անվանումը
    «Համակարգիչ» - ցուցադրվում է վերևի տողում
    զննարկիչի պատուհանները և առաջինը վերլուծվեց
    որոնման համակարգեր.
    Վեբ էջի անվանումը պետք է լինի առավելագույնը
    դրա բովանդակությանը համապատասխանության աստիճանը.
    1. Մուտքագրեք վեբ էջի HTML կոդը Notepad-ում:
    2. Պահպանեք ֆայլը որպես index.html թղթապանակում
    կայք։ Ընտրեք ֆայլի տեսակը՝ «Բոլոր ֆայլերը»:
    3. Բացեք այս ֆայլը դիտարկիչում՝ դիտելու համար:

    19.

    20. ԴԱՍ թիվ 2

    21. Դաս 2. Տեքստի ձևաչափում վեբ էջի վրա

    22. Տեքստի ֆորմատավորում

    Թեև էջը այնքան էլ գրավիչ չէ. փոքր տպագիր և սև տեքստը միացված է
    սպիտակ ֆոն. Բայց թեգերի օգնությամբ կարելի է զարդարել տեքստը։
    1. Վերնագրեր՝ պիտակներ<Н1>(ամենամեծ) դեպի<Н6>(ամենափոքրը).
    <Н1>Ամեն ինչ համակարգչի մասին
    2. Տառատեսակ (FONT): Որոշ պիտակներ ունեն ատրիբուտներ՝ գույքի անվանումներ, may
    վերցնել որոշակի արժեքներ.
    FONT face="Arial" - տառատեսակի դեմք
    չափ=4
    - չափը
    color="red" - գույն
    3. Հավասարեցում (ALIGN): Տեքստը սովորաբար ձախ դասավորված է
    էջ, սակայն ընդունված է վերնագիրը տեղադրել կենտրոնում։
    ALIGN = "ձախ",
    ALIGN = "աջ",
    <Н1 ALIGN="center">Ամեն ինչ համակարգչի մասին
    ALIGN = "կենտրոն"

    23. Տառատեսակի գույնը

    COLOR հատկանիշի արժեքը կարող է սահմանվել 2 եղանակով.
    ա) գույնի անվանումը (օրինակ՝ «կարմիր», «կանաչ», «կապույտ» և այլն),
    բ) դրա RGB տասնվեցական արժեքը «#RRGGBB», որտեղ
    առաջին երկու տասնվեցական թվանշանները սահմանում են ինտենսիվությունը
    կարմիր (կարմիր), հաջորդ երկուսը կանաչի ինտենսիվությունն են (կանաչ) և
    վերջին երկուսը կապույտ (կապույտ) գույների ինտենսիվությունն է:
    Գույնի նվազագույն ինտենսիվությունը նշվում է տասնվեցականով
    համարը 00, իսկ առավելագույնը՝ FF: Կապույտ գույն = «#0000FF»:
    Այսպիսով, դուք կարող եք սահմանել վերնագրի կապույտ գույնը FONT պիտակի հետ
    COLOR հատկանիշ.
    <Н1 ALIGN="center">Ամեն ինչ համակարգչի մասին

    24.

    25. Տեքստի ֆորմատավորում

    4. Հորիզոնական գիծը կառանձնանա
    վերնագիր մնացած բովանդակությունից
    էջեր մեկ պիտակով
    .
    5. Պարբերություններ.<Р>. Երբ դիտվում է
    պարբերությունները զննարկիչում առանձնացված են միմյանցից
    այլ ընդմիջումներով: Յուրաքանչյուր պարբերության համար
    դուք կարող եք սահմանել որոշակի տեսակ
    հավասարեցում.

    26. Գործնական աշխատանք 3.8 Ուսումնական կայք «Համակարգիչ».

    Ձևաչափեք սկզբնական տեքստը
    էջեր:
    1) Ստեղծել և հավասարեցնել 2 պարբերություն (առաջադրանք 3)
    2) Էջի վերնագիրն ընդգծել գույնով և
    առանձնացրեք այն հորիզոնական բարով
    (առաջադրանք 4)

    27.

    28. ԴԱՍ 3

    29. Դաս 3. Պատկերների տեղադրում վեբ էջերում

    30. Տեղադրեք պատկերներ

    Վեբ էջերը կարող են պարունակել 3 ձևաչափի գրաֆիկական ֆայլեր.
    GIF, JPG և PNG: Եթե ​​նկարը պահպանված է այլ ձևաչափով, ապա
    նախ պետք է փոխարկվի դրանցից մեկի
    ձևաչափեր։
    Պիտակը օգտագործվում է պատկեր տեղադրելու համար: հատկանիշով
    SRC, որը ցույց է տալիս, թե որտեղ է պահվում ֆայլը
    տեղական համակարգիչ կամ ինտերնետում:
    1) նկարը տեղական համակարգչի վրա՝ կայքի թղթապանակում.

    2) նկարը գտնվում է տեղական համակարգչի մեկ այլ թղթապանակում.

    3) նկարը գտնվում է ինտերնետի հեռավոր սերվերի վրա.

    31. Բացատրական տեքստ. Նկարի գտնվելու վայրը տեքստում:

    Վեբ էջերում նկարազարդումները դարձել են կարևոր
    դիզայնի տարր. Այնուամենայնիվ, օգտվողները, որպեսզի
    խնայել ժամանակ, երբեմն անջատել բրաուզերի ներբեռնումները
    գրաֆիկական պատկերներ և կարդալ միայն տեքստեր:
    Ուստի էջի իմաստը չկորցնելու համար նկարելու փոխարեն
    բացատրական տեքստը պետք է ցուցադրվի ALT հատկանիշով

    Նկարի դիրքը տեքստում - սահմանում է ALIGN հատկանիշը
    հատկորոշել ԹՈՐ, ՄԻՋԻՆ, ՆԵՐՔԻՆ, ՁԱԽ, ԱՋ:
    ALIGN="աջ">

    32. Պատրաստի կայքի տեսք

    33. Կայքի էջի կոդը


    Համակարգիչ


    Ամեն ինչ համակարգչի մասին




    Այս կայքում դուք կարող եք ստանալ տարբեր տեղեկություններ
    համակարգիչը, դրա ծրագրակազմը և համակարգչի գները
    պարագաներ.


    Տերմինաբանական բառարանը ձեզ կծանոթացնի համակարգչի հետ
    պայմաններ, և կարող եք նաև լրացնել հարցաթերթիկ:



    34. Դաս 4

    35. Թիվ 3 թեստային աշխատանք

    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    Ինչ է վեբ կայքը:
    Կայքի տեսակները.
    Ինչպե՞ս են վեբ էջերը միավորվում կայքերում:
    Ի՞նչ են պիտակները: պիտակի կոնտեյներ? Գրեք հիմնական կոնտեյները
    վեբ էջեր.
    Ո՞րն է վեբ էջի տրամաբանական կառուցվածքը:
    Ցուցակեք 5 էջի ձևաչափման պիտակներ:
    Ի՞նչ է պիտակի հատկանիշը:
    Որո՞նք են վեբ էջի գույները սահմանելու եղանակները:
    Ի՞նչ պիտակներ են օգտագործվում վերնագիր մուտքագրելու համար: Ֆորմատավորում
    տառատեսակը Մուտքագրե՞լ պարբերություն:
    Ի՞նչ պիտակ և դրա ատրիբուտներն են օգտագործվում պատկերներ տեղադրելու համար:

    36. Դաս 4. Հղումներ վեբ էջերում

    37.

    Հիպերհղումները թույլ են տալիս ներբեռնել
    զննարկիչը կապված այլ վեբ էջերի հետ
    նախորդից։
    Հիպերհղումը բաղկացած է 2 մասից՝ հասցե
    և հղման ցուցիչ:
    Հիպերհղումը դրված է համընդհանուր
    հատկորոշել HREF հատկանիշով (նա
    նշում է, թե որ ֆայլն է պահվում
    ցանկալի վեբ էջ):
    կապի ցուցիչ

    38. Հիպերհղումների տեսակները

    1) ներքին.
    Ցուցիչ
    հղումներ
    2) արտաքին.
    filename.html"> Հղման ցուցիչ

    39. Գերհղման ցուցիչներ

    Ցուցիչ - տեսանելի մաս
    հիպերհղումներ՝ տեքստ կամ պատկեր

    40. Հասցեական հղումների մի մասը

    Գնացեք այլ վեբ էջեր.
    կապի ցուցիչ
    Բացեք պատկերը դիտարկիչում.
    Նկար
    Լսեք ձայնը (ներկառուցված բրաուզերի գործարկումը
    խաղացող):
    Ձայն
    Պահպանել ֆայլը (գործարկում է ներկառուցված զննարկիչը
    ֆայլերի ներբեռնման կառավարիչ):
    Ներբեռնել ֆայլը

    41. Էլփոստի հիպերհղում

    Այս տեսակի հիպերհղումը
    հատուկ կոնտեյներ


    ”>Մեր էլ

    42. Կայքի պատրաստի էջի տեսք

    43. Կայքի էջի կոդը


    Համակարգիչ


    Ամեն ինչ համակարգչի մասին




    Այս կայքում դուք կարող եք ստանալ տարբեր տեղեկություններ համակարգչի, նրա ծրագրային ապահովման մասին
    համակարգչային բաղադրիչների տրամադրում և գներ:


    Տերմինաբանական բառարանը ձեզ կծանոթացնի համակարգչային տերմիններին, ինչպես նաև ձեզ
    կարող եք լրացնել ձևաթուղթը:


    [Ծրագրեր]  
    [Բառարան]  
    [Աքսեսուարներ] 
    [Հարցաթերթ]



    «> Էլ.


    44. Դաս 5

    45. Դաս 5. Ցուցակներ վեբ էջերում

    46. ​​Ցուցակների տեսակները

    Համարակալված
    Պիտակված
    Տերմինների ցուցակներ (ինչպես բառարանում)
    Ներդրված ցուցակներ

    47. Համարակալված ցուցակ

    Ցուցակ - տարայի մեջ
    Ցանկի տարր - պիտակ

  • TYPE հատկանիշը համարակալման տեսակն է (արաբերեն
    թվեր; I - հռոմեական; ա - լատինական
    փոքրատառ)

    1. Համակարգային ծրագրեր
    2. Կիրառական ծրագրեր
    3. Ծրագրավորման համակարգեր

    48. Բլետավորված ցուցակ

    Ցուցակ - տարայի մեջ
    Ցանկի տարր - պիտակ

  • TYPE հատկանիշը մարկերների տեսակն է («սկավառակը» սկավառակ է,
    «քառակուսի» - քառակուսի, «շրջանակ» - շրջան)

    • Տեքստային խմբագիրներ
    • Գրաֆիկական խմբագիր
    • Աղյուսակներ
    • Տվյալների բազայի կառավարման համակարգեր

    49. Տերմինների ցանկ

    Ցուցակ - տարայի մեջ

    Ցանկի տարր - պիտակ

    Սկզբում գրվում է տերմինը, հետո
    դրա սահմանումը (ինչպես բառարանում)

    50. Դաս 6

    51. Դաս 6. Ինտերակտիվ ձևեր վեբ էջերում

    52. Ինտերակտիվ ձևի հայեցակարգը

    Կայքի այցելուների հետ շփվելու համար
    ստեղծողները վեբ էջի տեղում
    ինտերակտիվ ձևեր.
    Ձևերը պարունակում են տարբեր տարրեր
    վերահսկում:
    տեքստային դաշտեր
    բացվող ցուցակները
    դրոշներ
    անջատիչներ...

    53. Տեքստային դաշտ

    հիմնական կոնտեյներ

    Տեքստային դաշտ - ստեղնաշարից տեքստ մուտքագրելու համար՝ պիտակ
    հատկանիշներով.
    TYPE = "text" - բովանդակության տեսակ (տեքստ)
    NAME="____" – դաշտի անվանումը
    SIZE = "40" - մուտքագրման դաշտի երկարությունը (նիշերով)

    - տողերի բաժանիչ (տեղափոխեք կուրսորը նորի վրա
    լար)

    54. Անջատիչներ (ռադիո կոճակներ)

    Կլոր կոճակ՝ մի քանիսից մեկը ընտրելու համար
    պատասխանի տարբերակներ.
    TYPE = "ռադիո"
    Այս խմբի բոլոր անդամները պետք է ունենան
    նույն անունը. NAME = "խումբ"
    VALUE հատկանիշները պարունակում են ընտրանքներ
    պատասխաններ՝ VALUE = "աշակերտ"

    55. Դրոշներ

    Քառակուսի վանդակ՝ մի քանի պատասխաններ ընտրելու համար
    առաջարկվող տարբերակներ.
    TYPE = «ստուգարկղ»
    Այս խմբի յուրաքանչյուր տարր պետք է ունենա իր անունը.
    NAME = "box1", NAME = "box2",
    …..
    VALUE հատկանիշները պարունակում են պատասխաններ ընտրելու տարբերակներ՝
    VALUE=«WWW», VALUE=«էլ.փոստ», ….
    Յուրաքանչյուր VALUE ունի իր պատասխանը:
    www

    56. Ցուցակարկղեր

    Բացվող ցուցակ ստեղծելու համար
    օգտագործել կոնտեյներ

    Դրանում ցուցակի յուրաքանչյուր տարր
    տրված է պիտակով

    • ՀԱՐԱԿԻՑ ՀՈԴՎԱԾՆԵՐ