HTML ձեռնարկ (սկսնակների համար)

HTML ձեռնարկը սկսնակների համարԿցանկանայի՞ք ինչ-որ HTML սովորել?


Դա կարծես հիանալի գաղափար է: Հետևաբար, պատճառը, թե ինչու ենք մենք միասին դրել այս HTML ձեռնարկը սկսնակների համար.

Այսօր աշխարհում կա առնվազն 1,7 միլիարդ կայք: Գործնականորեն այս բոլոր կայքերը HTML- ն օգտագործում են այս կամ այն ​​կերպ.

P.S. Եթե չեք ցանկանում HTML սովորել և անմիջապես սկսել ձեր վեբ կայքը կառուցել, առանց պահանջելու կոդավորում, դիտեք այս ուղեցույցը. Ինչպե՞ս ստեղծել վեբ կայք ԱՆՎԱՐ (առանց HTML սովորելու).

Contents

Ներածություն HTML- ին


Ինչ է HTML- ը?

Ինչ է HTML- ըHTML- ը ՝ HyperText Markup Language- ի հապավումը, համակարգչային լեզու է ՝ կայքեր և վեբ ծրագրեր ստեղծելու համար: Հիմնականում բաղկացած է հիմնականում տեքստային կոդերի շարք, որոնք սովորաբար գրված են տեքստային ֆայլում և պահպանվում են որպես HTML, HTML լեզվով գրված կոդը վերածվում է գեղեցիկ, լավ ձևափոխված տեքստի կամ տեքստի և մեդիայի համադրության, երբ դիտարկվում է զննարկչի միջոցով:.

HTML- ն առաջին անգամ մշակվել է բրիտանացի ֆիզիկոս Թիմ Բեռներս-Լի կողմից 1990 թ.-ին, և այդ ժամանակից այն անցել է այդքան շատ զարգացումներ, որից հետո ամենավերջին տարբերակը կարող է հասնել շատ ավելին, քան պատկերացնում էին հնարավոր, երբ լեզուն առաջին անգամ ստեղծվեց:.

Այս ձեռնարկում մենք կանցնենք HTML լեզվի հիմունքները, և այն ամենը, ինչ դուք պետք է իմանաք, սկսելու HTML- ն ՝ որպես սկսնակ.

HTML տարբերակները

Նախ, HTML- ի հորինումից ի վեր HTML- ի բոլոր վարկածների արագ համընկնում.

  • HTML 1.0Սա HTML- ի barebones տարբերակն էր և լեզվի հենց առաջին թողարկումը.
  • HTML 2.0Այս տարբերակը ներդրվել է 1995 թ.-ին: Այն աստիճանաբար զարգացավ, ինչը հնարավորություն տվեց լրացուցիչ հնարավորություններ, ներառյալ ձևի վրա հիմնված ֆայլերի վերբեռնումը, սեղանները, հաճախորդի կողմից պատկերված քարտեզները և միջազգայնացումը:.
  • HTML 3.2Համաշխարհային ցանցի ստանդարտների զարգացումն ապահովելու համար, Համաշխարհային ցանցի կոնսորցիումը (W3C) հիմնադրվել է Թիմ Բեռներս-Լի կողմից 1994 թ.-ին: 1997-ին նրանք հրապարակեցին HTML 3.2.
  • HTML 4.01997-ին ավելի ուշ, W3C- ը թողարկեց HTML 4.0-ը ՝ տարբերակ, որն ընդունում էր զննարկչի հատուկ տարրերի շատ տեսակներ և հատկանիշներ.
  • HTML 4.0- ը հետագայում վերանայվեց փոքր խմբագրումներով 1998 թ.
  • HTML 4.011999 թ. Դեկտեմբերին թողարկվեց HTML 4.01.
  • XHTMLՏեխնիկական պայմանները ներկայացվել են 2000 թ.-ին և առաջարկվում է օգտագործել որպես HTML 4.01- ի համատեղ ստանդարտ: Այն ներառում է XML ՝ կոդը պատշաճ կերպով գրելու և ծրագրավորման լեզուների միջև փոխգործունակությունն ապահովելու համար.
  • HTML5W3C- ն հրատարակեց HTML5- ը որպես առաջարկություն 2014 թվականի հոկտեմբերին, իսկ ավելի ուշ թողարկեց HTML 5.1-ը 2016-ի նոյեմբերին.

Ընտրելով ձեր HTML խմբագիրը

Ընտրեք HTML խմբագիրԵթե ​​մտածում եք HTML էջեր ստեղծելու մասին, ձեզ հարկավոր է HTML խմբագիր: HTML խմբագրիչ օգտագործելու համար կան մի քանի առավելություններ.

Լավ HTML խմբագրիչը կպահպանի ձեր ծածկագիրը մաքուր և կազմակերպված: Այն նաև կբացահայտի, երբ նոր պիտակ բացեք և ինքնաբերաբար փակեք այն, որպեսզի խուսափեք խելագարված կոդ ունենալուց և արդյունքում իջեցնելով, թե որքան մուտքագրեք անելիք: HTML խմբագիրներից շատերն այսօր թույլ են տալիս նախադիտել ձեր վեբ էջը ՝ տեսնելու համար, թե ինչպես է այն տեսքը դիտվում վեբ զննարկչում ՝ օգտագործելով իրենց WYSIWYG հատկությունը.

Կան շատ անվճար և վճարովի HTML խմբագիրներ. Ստորև ներկայացված են լավագույն ընտրանքներից մի քանիսը, որոնցից կարող եք ընտրել.

HTML- ի հիմնական շենքային բլոկները


Երբ որոշեք HTML խմբագրիչը, որը ցանկանում եք օգտագործել, հաջորդ քայլը հասկանալ HTML- ի շինանյութերը: HTML- ում կոդավորելու ժամանակ անհրաժեշտ է հասկանալ այս շինանյութերը: Դրանք ներառում են պիտակներ, հատկանիշներ և տարրեր: Մենք դրանցից կանդրադառնանք ստորև.

Ներածություն թեգերի

HTML մուտք գործելուց հետո առաջին բանը, որ դուք պետք է հասկանաք, թեգերն են: Ըստ էության, պիտակները առանձնացնում են նորմալ տեքստը HTML կոդից.

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

Եկեք քննարկենք «Նա տղա է» բառը որպես օրինակ.

  • Տեքստի սովորական ձևաչափով ստացվում է. Նա տղա է.
  • Տեքստի համարձակ ձևաչափով դուք ստանում եք. Նա տղա է

Հասնելու համարձակ ձևաչափով մեր ունեցածը դուք պետք է օգտագործեք այն պիտակ.

տեքստը համարձակ դարձնելով HTML5

Հում HTML- ում մենք ունենք Նա տղա է որը զննարկիչը այնուհետև թարգմանում է հետևյալին. Նա տղա է.

«Նա տղա է» նույնպես կարող էր դուրս գալ այսպես կոչված.

Դա ձեռք է բերվում օգտագործելով պիտակ.

տեքստը դարձնելով italicized html

Մենք ունենք: Նա տղա է որն այնուհետև դուրս է գալիս որպես Նա տղա է.

Հիպերկապվածությունը ձեռք է բերվում օգտագործելով պիտակ.

տեքստը հիպերպլանավորված դարձնելով HTML5

Հում HTMLում մենք ունենք. Նա մի տղա է, որը ցույց է տալիս, որ Նա տղա է.

Կան մի քանի բաներ, որոնք դուք պետք է հասկանաք պիտակների մասին.

  • Պիտակները գործնականում HTML- ի շինանյութ են. Դուք չեք կարող HTML անել առանց պիտակների: Եթե ​​դուք մնում եք, թե որ պիտակը օգտագործեք, համոզվեք, որ ստուգեք մեր HTML պարբերական աղյուսակը.
  • Գրեթե յուրաքանչյուր բաց պիտակը պետք է փակվի: Հիշեք, որ կան բացառություններ: Պիտակի փակման պիտակի օրինակ `դատարկ պիտակ, օրինակ` գծի ընդմիջում.
    .
  • Թեմաները պարունակում են ավելի քիչ, քան («<”) and greater than (“>») Անկյան փակագիծ: Փակման պիտակները պարունակում են հետգետնյա կտրվածք, որը դառնում է նախքան պիտակի անունը փակելը: Բաց նշանի օրինակ. . Փակ պիտակի օրինակ .
  • Յուրաքանչյուր HTML ֆայլ սկսվում է բացման պիտակից և ավարտվում է փակման պիտակով. HTML ֆայլի առաջին տողը պետք է հայտարարի փաստաթղթի տեսակը, որպեսզի զննարկիչը իմանա, թե ինչ HTML բուրմունք եք օգտագործում: Ահա թե ինչու եք տեսնում, որ HTML էջերը սկսվում են «Նախքան HTML կոդն սկսելը.

Նախքան բովանդակության ավելացումը, HTML ֆայլերի մեծ մասը հիմնականում նման է.

HTML--

Այն հատվածը, որը հետևում է պիտակը սովորաբար պարունակում է փաստաթղթի վերաբերյալ տեղեկություններ, ինչպիսիք են նրա անվանումը, մետատրոհները, և որտեղ կարելի է գտնել դրա CSS ֆայլը `պարունակություն, որն ուղղակիորեն տեսանելի չէ զննարկչի էջում: Բաժին « և»(Որը մենք ներկայացնում էինք« ՀԻՄՆԱԿԱՆ ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆ »-ով) այն է, որտեղ գտնվում է HTML ֆայլի հիմնական բովանդակությունը, որը դիտողը կտեսնի զննարկիչում: Սա իր մեջ ներառում է ամեն ինչ ՝ առաջին պարբերությունից մինչև հիպերհղումներ, մինչև մուլտիմեդիա ձևաչափի ձևափոխում և մնացած ամեն ինչ.

Տարրերի ներածություն

տարրերի ներդրում

HTML- ում «տարրը» բաղկացած է բացման և փակման պիտակից, ինչպես նաև պիտակների միջև պարունակվող բովանդակությունից.

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

Երբ պիտակը բացվում է, բովանդակությունը ներմուծվում է և պիտակը փակվում է, մենք ունենք մի տարր.

Տարրը կարող է լինել հիմնական ձևով կամ բարդ ձևով: Ինչո՞ւ Քանի որ բաց պիտակի և փակման պիտակի, ինչպես նաև այդ պիտակների միջև որևէ տարր է: Դա նշանակում է, որ մենք կարող ենք տարրեր ունենալ տարրի ներսում: Մեր ներկայիս օրինակում «նա տղա է» (Նա տղա է) տարր է.

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

Ներածություն հատկությունների հետ

Թեև HTML փաստաթղթերը հիմնականում օգտագործում են պիտակները ամեն ինչի համար, մենք երբեմն ուզում ենք հաղորդակցել լրացուցիչ տեղեկատվություն տարրի ներսում: Այս դեպքում մենք օգտագործում ենք ատրիբուտ: Հատկությունն օգտագործվում է տարրի բնութագրերը սահմանելու համար, այն օգտագործվում է տարրի բացման պիտակի ներսում: Առանձնահատկությունները կազմված են անունից և արժեքից.

Ուշադրություն դարձրեք, որ ատրիբուտի արժեքը ձևաչափի միջոցով տեղադրվում է գնանշման մեջ Ձեր տեքստը.

ատրիբուտի օրինակ

Օրինակ:

Նա տղա է

Այս օրինակում մենք հրահանգում ենք, որ «Նա տղա է» հավասարեցված է փաստաթղթի կենտրոնում.

Սկսել HTML- ով


Սկսել HTML- ովԵնթադրելով, որ այսօր ցանկանում եք ստեղծել ձեր սեփական հիմնական HTML փաստաթուղթը, ինչպե՞ս եք սկսել: Էջի վերնագրերի ստեղծումից մինչև ձևերի ստեղծում ՝ մենք կքայլենք ձեզ միջոցով, թե ինչպես կարելի է սկսել HTML- ից ներքևում.

HTML- ի ստեղծում Տարր

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

Որոշ տարրեր ներառեք վերնագիրը, որը ստեղծվում է հետ պիտակ.</p><p><strong>Օրինակ</strong>:</p><pre><title>Սա մեր էջի վերնագիրն է

Այս վերնագիրը կցուցադրվի զննարկչի ներդիրում: Սա նաև այն է, ինչ էջի վերնագիրն անվանվելու է, երբ որոնիչի բոտերը սողում են ձեր կայքը.

Սա նաև ներառում է տարր, որը հաճախ օգտագործվում է տեղեկատվության ստացման համար, որոնիչները կարող են օգտագործել իրենց ցուցակների պարունակությունը նկարագրելու համար: Սա ներառում է նկարագրություն, հիմնաբառեր, հեղինակի տեղեկատվություն և այլն տարրը նաև սահմանում է HTML փաստաթղթի օգտագործման սահմանած նիշը.

Վերնագրերի ստեղծում HTML- ում

վերնագրեր ստեղծելով html- ում

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

Այսպես ասած, կարևոր է խուսափել վերնագրեր օգտագործելուց `ձեր տեքստը մեծ կամ համարձակ դարձնելու համար: Կան նաև այլ պիտակներ, որոնք կարող են օգտագործվել դրա համար (որին մենք կտանք ավելի ուշ այս բաժնում): Փոխարենը, վերնագրերի պիտակները պետք է օգտագործվեն բացառապես կառուցվածքի համար.

HTML- ում վեց վերնագիր կա.

դեպի
, հետ

նշումը `նշելով ամենակարևոր վերնագիրը և
պիտակը `նշելով ամենաքիչը կարևոր վերնագիրը.

Վերնագրեր ստեղծելու համար պարզապես որոշեք, թե ինչ վերնագիր եք ստեղծում, բացեք վերնագիրը հերթական վերնագրով և միշտ հիշեք, որ ավարտվելուց հետո փակեք պիտակները:.

HTML վերնագրերի օրինակ:

  • Սա ձեր առաջին HTML վերնագիրն է

    (ամենամեծն)

  • Սա ձեր HTML երկրորդ վերնագիրն է

  • Սա ձեր HTML երրորդ գլուխն է

  • Սա ձեր HTML չորրորդ գլուխն է

  • Սա ձեր HTML հինգերորդ գլուխն է
  • Սա ձեր HTML վեցերորդ գլուխն է

Պարբերություններ ստեղծելը

պարագրաֆներ ստեղծելով HTML- ում

Հաջորդ քայլը `պարբերությունների ստեղծումը սկսելը: Պարագրություններ կարելի է ստեղծել հետ

պիտակ.

Օրինակ:

Սա ձեր առաջին պարբերությունն է.

Սա ձեր երկրորդ պարբերությունն է, և դուք կստեղծեք ևս շատ պարբերություններ.

Հիշեք, որ HTML- ով գրելը շատ տարբեր է զուտ տեքստով գրելուց: Հետևաբար, եթե HTML- ի տեքստը կոտրեք առանց նոր պարբերություն սկսելու, ապա իրականում նշանակություն չունի, երբ տեքստը ցուցադրվում է զննարկչի կողմից: Փոխարենը, դուք ուզում եք օգտագործել գծի ընդմիջում, որը ներկայացված է
պիտակ.

Օրինակ:

Սա նոր պարբերություն է. Եվ ես ուզում եմ օգտագործել մի շարք նոր տողեր. Այսպիսով, ես կոտրում եմ այն.

Սա չի ստացվի հետևյալի մասին.

Սա նոր պարբերություն է.
Եվ ես ուզում եմ օգտագործել մի շարք նոր տողեր.
Այսպիսով, ես կոտրում եմ այն.

Փոխարենը, դա կստացվի այսպես.

Սա նոր պարբերություն է: Եվ ես ուզում եմ օգտագործել մի շարք նոր տողեր: Այսպիսով, ես կոտրում եմ այն.

Այսպիսով, ինչպե՞ս եք տեքստերը կոտրում նոր տողերի, որպեսզի այն նման կերպ ցույց տա.

Սա նոր պարբերություն է.
Եվ ես ուզում եմ օգտագործել մի շարք նոր տողեր.
Այսպիսով, ես կոտրում եմ այն.

Օգտագործելով գծի ընդմիջումները.

Օրինակ:

Սա նոր պարբերություն է.
Եվ ես ուզում եմ օգտագործել մի շարք նոր տողեր.
Այսպիսով, ես կոտրում եմ այն.

Ասվածը կարևոր է նշել, որ գծի ընդմիջումը (
) պիտակը դատարկ պիտակ է, ուստի հարկ չկա այն փակել.

HTML տեքստի ձևաչափում

տեքստի ձևաչափումը HTML- ում

Հաջորդ քայլը ձեր տեքստը HTML ձևաչափելն է: Սա այն դեպքում, երբ դուք կարող եք ցույց տալ, թե արդյոք ցանկանում եք, որ ձեր տեքստը դուրս գա համարձակ, շեղված, ընդգծված, բաժանորդագրված, գրագրված և այլն: Սա հիմնական ուղեցույց է, այնպես որ այս բաժինը չի հանդիսանա ձևաչափման համար բոլորը: Փոխարենը, մենք կներառենք միայն մի քանի հիմնական ձևաչափման պիտակներ: Ձևաչափման այլ ձևերի օգտագործման գործընթացը շատ պարզ է. Պարզապես գտնեք ձեր ուզած պիտակը և առաջ անցեք.

Օգտագործելով համարձակ: Նա տղա է դուրս է գալիս որպես Նա տղա է

Օգտագործելով italics: Նա տղա է դուրս է գալիս որպես Նա տղա է

Ընդգծելով տեքստը: Նա տղա է դուրս է գալիս որպես Նա տղա է. Արժե նշել, որ թեգը արժեզրկվել է HTML 4.01-ում և վերաձևակերպվել է ՝ ներկայացնելով HTML5 ոճաբանորեն տարբեր տեքստ: Արդյունքում, խորհուրդ է տրվում օգտագործել CSS ՝ տեքստը նշելու համար, որը պետք է ընդգծվի: Քանի որ այս հոդվածը հիմնական ուղեցույց է, մենք այն շարունակում ենք պարզ պահել.

Օգտագործելով բաժանորդագրություն: Նա տղա է դուրս է գալիս որպես Նա տղա է

Օգտագործելով գիր: Նա տղա է դուրս է գալիս որպես Նա տղա է

Այլ պիտակների համար, որոնք կարող են օգտագործվել ձևափոխման համար, գուցե ցանկանաք զննել բառարանն այս ռեսուրսի վերջում, որտեղ մենք ներառել ենք շատ համապատասխան HTML պիտակներ.

Պատվիրված և չկարգավորված ցուցակներ

Վաղ թե ուշ ստիպված կլինեք ցուցակներ ստեղծել: Lուցակները կարող են պատվիրվել (այսինքն ՝ համարակալված) կամ չկարգավորված (այսինքն ՝ չհաշված).

Ահա պատվիրված ցուցակի օրինակ.

  1. 1-ին կետ
  2. 2-րդ կետ
  3. 3-րդ կետ

Ահա, թե ինչպես ստեղծել այն.

  1. 1-ին կետ
  2. 2-րդ կետ
  3. 3-րդ կետ

Ահա չկարգավորված ցուցակի օրինակ.

  • 1-ին կետ
  • 2-րդ կետ
  • 3-րդ կետ

Ահա, թե ինչպես ստեղծել այն.

  • 1-ին կետ
  • 2-րդ կետ
  • 3-րդ կետ

Եթե ​​դա արդեն ակնհայտ չէ: Ահա տրոհումը.

The

  • պիտակը օգտագործվում է ցուցակի յուրաքանչյուր տարրը նշելու համար: Makingանկ կազմելիս կարող եք օգտագործել
      նշեք պատվիրված ցուցակը նշելու համար (“o” = պատվիրված և “l” = ցուցակ) կամ