HTML և CSS դասընթացներ. HTML և CSS Դասընթացներ Ինտերնետը դժվար է՝ դասավորության ուսուցման ծառայություն

  • Ոճերը կարգավորումների մի շարք են, որոնք որոշում են վեբ էջի տարրերի դիրքը, տեսքը և ֆունկցիոնալությունը: Ոճերի հիմնական առավելությունն այն է, որ դրանք ֆորմատավորման, ձևավորման և դասավորության համար շատ ավելի շատ տարբերակներ են տրամադրում՝ համեմատած հայրենի HTML-ի հետ: Այս հզոր համակարգը կարող է հավաքվել առանձին փաստաթղթերում, որպեսզի այն չխառնվի HTML կոդի հետ: Սա հիմքն է; ավելին, ավելի պարզ և պարզ - այստեղ՝ http://htmlbook.ru: Սկսեք ձեր ծանոթությունը «CSS» բաժնի հետ «Ձեռնարկից», և տեղեկագիրքը մեծապես կհեշտացնի անծանոթ տերմինների ըմբռնումը: Ապագայում ձեզ անհրաժեշտ կլինի նաև «Block layout» բաժինը։
  • Նրանց համար, ովքեր հատկապես համառ են և հետաքրքրասեր են ծրագրավորման հարցում, խորհուրդ ենք տալիս http://www.xiper.net, http://css-live.ru կայքերը: Ահա դասեր, որոնք բացահայտում են HTML-ում և CSS-ում «առաջադեմ» տեխնիկայի օգտագործման գաղտնիքները: Եթե ​​խոսում եք անգլերեն, անպայման այցելեք http://css-tricks.com/ , http://net.tutsplus.com/ ռեսուրսները, որտեղ կարող եք գտնել ոչ միայն տեքստային, այլև տեսադասեր։

Աերոբատիկա - JavaScript!

JavaScript լեզվի օգտագործումը ձեր վեբ էջերը կդարձնի ինտերակտիվ: Երբ ուսումնասիրեք այս ավելի լուրջ դասավորությունը, դանդաղորեն ներառեք JavaScript-ը ձեր HTML-ում:

  • Բավարար տեղեկատվական բազանայս լեզուն սովորելու համար պատկանում է http://javascript.ru ռեսուրսը: Այն ներառում է բազմաթիվ անհրաժեշտ նյութեր, քննարկումներ և խորհուրդներ որակյալ ուսուցման համար:
  • Դեյվիդ Ֆլանագանի JavaScript-ի առաջին մասը Մանրամասն ուղեցույց” հիանալի ուղեցույց կլինի JavaScript-ի հիմունքների համար: Երկրորդ մասը նկարագրում է բրաուզերների կողմից տրամադրվող սցենարների մշակման միջավայրը: Երրորդ մասը ընդարձակ հղում է հիմնական JavaScript-ի համար, չորրորդը՝ հաճախորդի կողմից:
  • Վեբ էջերում JavaScript-ի ներմուծումը պարզեցնելու համար օգտագործվում է jQuery գրադարանը, որը գրված է նաև JavaScript-ով: Պաշտոնական կայքը http://jquery.com և jQuery Advanced JavaScript Guide Definitive Guide-ը (Ber Bibo, Yehuda Katz) պարզաբանում են այն ամենը, ինչ դուք պետք է իմանաք լեզվի մասին հեշտ հասկանալի ձևով:
  • Mootools-ը՝ անվճար մոդուլային շրջանակը, նշանակալի օգնություն է տրամադրում JavaScript-ի մշակմանը:

Փոքր հնարքներ մեծ վարպետներից

Նույնիսկ փորձառու գրամեքենաների համար մենք պատրաստ ենք տրամադրել տեղեկատվություն, որը կարող է զգալիորեն բարելավել աշխատանքը։ Օպտիմիզացված դասավորության կոդի ստեղծման հարցում ձեզ անպայման պետք կլինի hthttp://www.xiper.net կայքը։ Առաջնորդվեք «Սովորել» և «Պատրաստի հնարքներ» բաժիններով, որոնք պարունակում են սկրիպտների օգտագործման առաջադեմ լուծումներ և տեխնոլոգիա։

Կան նաև բազմաթիվ ծառայություններ դասավորության օպտիմալացման համար: Խորհուրդ ենք տալիս ուշադրություն դարձնել այս թեմայի վերաբերյալ ռեսուրսներին.

  1. http://www.google.com/webfonts; - կտրամադրի տառատեսակների հավաքածու, որը կարող է ներառվել ձեր էջերում:
  2. http://www.fontsquirrel.com/fontface/generator - Փոխակերպում է ցանկացած տառատեսակ և ստեղծում է CSS կոդ՝ ոճի թերթիկում տեղադրելու համար:
  3. http://stm.dp.ua/web-design/color-html.php - գույների և դրանց կոդերի լայն ընտրանի:
  4. CSS sprite ծառայությունը կնվազեցնի ձեր կայքի կողմից ուղարկված գրաֆիկական ակտիվները ներբեռնելու HTTP հարցումների քանակը: Այս մասին ավելին կպատմի http://www.xiper.net/collect/html-and-css-tricks/overclock-site/sprite.html հոդվածը:
  5. http://htmlbook.ru կայքի «Փաստաթղթերի վավերացում» բաժինը ձեզ կծանոթացնի վավերացնողների հայեցակարգին: Յուրաքանչյուր էջի կոդը պետք է համապատասխանի բնութագրին, որը մշակվել է W3 կոնսորցիումի կողմից www.w3c.org: Վալիդատորների մի քանի օրինակ (ստուգում html կոդը և css կոդը) հասանելի է այստեղ՝ http://validator.w3.org/, http://jigsaw.w3.org/css-validator/:
  6. http://caniuse.com - բրաուզերի համատեղելիության ստուգում - ծառայություն, որը կօգնի խուսափել տարբեր դասավորության ցուցադրումից մի քանի բրաուզերում:

+ Խոստացված գեղեցիկ բոնուս

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

  • Mark Pilgrim HTML5. Բարձրանալ և վազել»
  • Էրիկ Մեյեր «CSS - Կասկադային ոճերի թերթիկներ. վերջնական ուղեցույց»
  • Peter Lubbers, Brian Albers, Frank Salim «HTML5 մասնագետների համար. հզոր գործիքներ ժամանակակից վեբ հավելվածների մշակման համար»
  • Stephen Schafer HTML, XHTML և CSS: Օգտագործողի Աստվածաշունչը»
  • Էրիկ Ֆրիմեն, Էլիզաբեթ Ֆրիմեն Սովորեք HTML, XHTML և CSS:

P.S. Երբ դուք որոշել եք սովորել HTML, մի օգտագործեք հատուկ խմբագրիչներ: Գրեք սովորական նոթատետրում կամ Notepad++-ում, սա կօգնի ձեզ արագ ձեռք բերել անհրաժեշտ հմտությունները: Եթե ​​դուք ինտերակտիվ հաղորդակցության կողմնակից եք, դարձեք մասնագիտացված ֆորումների հաճախակի հյուր.

  • http://www.cyberforum.ru/html/
  • http://ru.html.net/forums/viewforum.php?f=49
  • http://www.html.by/
  • http://forum.htmlbook.ru/

Խորհուրդ խնդրեք ավելի փորձառու գործընկերներից, կիսվեք ձեր սեփական գիտելիքներով սկսնակների հետ:

Հուսով ենք, որ այս հոդվածը ձեզ համար արժանի ուղեցույց կլինի ծրագրավորում սովորելու համար: Հետևյալ նյութը նվիրված կլինի սերվերի կողմից ծրագրավորման PHP լեզվին:

Արկադի Մոչուլսկի.
Բարև Սաշա: Ես կարդացի ալիքի վերջին գրառումը և մի հարց ունեմ ձեզ. Ես կցանկանայի սովորել մի փոքր ճակատ: Որտեղի՞ց սկսել: Ես գիտեմ հիմնական HTML/CSS, շատ հիմնական JS:

Արկադի, բարև:

Հիմնական գիտելիքները լավ են: Դուք կարող եք սկսել մուտքագրել: Ընթացքում կգա հասկացողություն, թե ինչ գիտելիք է պակասում: Հետո գնում ես հոդվածներ, գրքեր կարդալու, վիդեո դասեր դիտելու, գուցե պետք է գրանցվել դասընթացների։

Որտեղի՞ց սկսել:

Դասավորության հետ իմ ծանոթությունը սկսվել է 10-րդ դասարանից։ Հետաքրքիր դարձավ, թե ինչպես են ստեղծվում կայքերը։ Ես գրանցվեցի մի քանի անվճար հոսթինգում և սկսեցի կայք կառուցել: Ճանապարհին ես կարդում էի հոդվածներ, թե ինչպես իրականացնել ինչ-որ բան: Դրանից հետո նա սկսեց գումարի դիմաց ուսուցիչների համար կայքեր պատրաստել։

Նախ պետք է փորձել: Հավանեցի՞ք: Դուք կարող եք սկսել սովորել:

Տեղադրեք կոդերի խմբագիր, ինչպիսին է Atom-ը: Փորձեք:

  • դիմահարդարել գլխավոր էջձեր կայքը
    Գրառման մեջ մասնագետը նշել է հետաքրքիր գլխավոր էջերի հղումներ, նայեք դրանք
  • Գտեք փոքրիկ վեբ ծառայության գաղափար և ինքներդ ծրագրավորեք այն
    Տես օրինակներ՝ լոլիկի ժմչփ, ծանր: Իմ առաջին նախագիծը XSLT խմբագիրն էր, այն հեշտացրեց նոր XSLT ֆայլեր ստեղծելը

Հենց որ բախվեք խնդրի հետ, լուծում փնտրեք համացանցում։ Ձեր խնդիրների 99%-ն արդեն լուծված և նկարագրված է հոդվածներում։ HTML թեգերի և CSS ոճի հատկությունների նկարագրությունը կարելի է դիտել htmlbook.ru կայքում:

Իմացեք, թե ինչպես աշխատել վեբ տեսուչի հետ՝ դիտել և խմբագրել դասավորությունը, ոճերը, վրիպազերծման սկրիպտները: Եթե ​​ձեզ դուր է գալիս ինչ-որ մեկի կայքը, ազատ զգալ նայեք «կապակի տակ» և տեսեք, թե ինչպես է ամեն ինչ արվում այնտեղ:

Երբեմն լինում են զվարճալի հաղորդագրություններ.

Եթե ​​դասավորության գործընթացում ինչ-որ բան սխալ է տեղի ունեցել, ապա բացեք տեսուչը և փնտրեք սխալը: Սովորելու համար, թե ինչպես աշխատել դրա հետ, դիտեք այս տեսանյութերը.

Երբ սկսում եք վստահ զգալ դասավորության մեջ, գնացեք JavaScript սովորելը. Նախ, հասկացեք լեզվի հնարավորությունները, ապա անցեք գրադարանների և շրջանակների ուսուցմանը:

Խորհուրդ եմ տալիս սկսել լեզուն սովորել Դեյվիդ Ֆլանագանի գրքով՝ «»: Գիրքը մեծ է, բայց մի վախեցեք: Պետք չէ ամբողջությամբ կարդալ.

Կարող եք նաև դիտել վիդեո դասընթացներ, YouTube-ում շատ են։ Ահա մի քանի հետաքրքիր.

Ի՞նչ է հաջորդը:

Իլյա Կանտորը Gulp-ի հիանալի էկրանավորում ունի
Ձեզ դուր եկավ մուտքագրել? Այժմ դուք կարող եք արագացնել ձեր աշխատանքը: Սովորեք որոշ ոճի նախապրոցեսոր՝ SASS, LESS կամ Stylus: Ավտոմատացրեք ոճերի հավաքումը և դրանց մշակումը

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

Որտեղի՞ց է սկսվում դասավորությունը:

Կայքի դասավորությունը դրա տեսողական բաղադրիչի նկարագրությունն է ծրագրի կոդով: Միևնույն ժամանակ, կայքը պետք է ճիշտ տեսք ունենա և աշխատի ցանկացած բրաուզերի վրա (լինի խաչաձև բրաուզեր): Վեբ կայքերը զրոյից կառուցելու սովորելը պետք է սկսվի ինքներդ PSD դասավորություն ստեղծելուց, չնայած այն հանգամանքին, որ տեսականորեն վեբ դիզայները պետք է ստեղծի այն:

Դասավորության դիզայների հիմնական խնդիրն է մշակել իրեն հասած նյութը տեքստերի, պատկերների, կատալոգների և այլնի տեսքով և այն վերածել վեբ էջերի՝ հիմնված հաստատված վեբ դիզայնի վրա։

Այնուամենայնիվ, պատկերացրեք, որ դուք 2-ը 1-ում դասավորության դիզայներ եք, և ինչ-ինչ պատճառներով ստիպված եք եղել տպագրել դասավորությունը դիզայների փոխարեն, ով չի հետաքրքրում ձեր խնդիրներին:

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

Ժամանակի ընթացքում դուք ինքներդ կսկսեք զգալ, թե ինչն է գեղեցիկ, իսկ ինչը՝ ոչ։ Հենց սկզբում դուք կարող եք պարզապես վերցնել և նկարել, օրինակ, այլ մարդկանց ինտերֆեյսի տարրերը։ Սա ձեզ կստիպի մտածել, թե ինչպես են կառուցված հենց այս տարրերը և ինչից են դրանք բաղկացած: Եվ այդ ժամանակ գեղեցիկ դիզայնը կդադարի ձեզ համար առասպելական բան լինել, քանի որ դուք կիմանաք, թե ինչպես ստեղծել նման բան:

Կայքի դասավորության գործիքներ

Ինչ վերաբերում է գործիքներին, շատ վեբ դիզայներներ օգտագործում են Adobe Photoshop ինտերֆեյս ստեղծելու համար: Այս ծրագրով դուք կարող եք ամեն ինչ անել:

Կան մարդիկ, ովքեր աշխատում են միայն վեկտորային գրաֆիկայի հետ և օգտագործում են դրանք դասավորություններ ստեղծելու համար Adobe Illustrator.
Եվ մեկ այլ խմբագիր, որը ես չեմ փորձել, բայց որը, ըստ լուրերի, բավականին արժանի այլընտրանք է վերը նշվածին, Sketch-ն է, բայց այն աշխատում է միայն Mac OS-ով։

Ծանոթացում - HTML

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

Ամենատարրական վեբ ռեսուրսը ոչ այլ ինչ է, քան HTML էջերի մի շարք: Եթե ​​կայքը ստատիկ է, ապա դասավորությունից հետո դուք իրականում կստանաք դրա վերջնական տարբերակը, և ոչ միայն կաղապարը։ Հիմա նման կայքերը, իհարկե, հազվադեպ են։ Բոլոր ժամանակակից վեբ էջերը ստեղծվում են դինամիկ կերպով՝ օգտագործելով սերվերի կողմի որոշակի տրամաբանություն, որը դուք կամ ինքներդ գրում եք, կամ օգտագործում եք պատրաստ՝ ինչ-որ CMS-ի (բովանդակության կառավարման համակարգ) օգնությամբ:

Առանց այս սերվերային տրամաբանության, առցանց ծառայությունների մեծ մասը, որոնք մենք օգտագործում ենք ամեն օր և այդքան սովոր ենք, հնարավոր չէր լինի: Ինչ վերաբերում է HTML-ին, ապա այն բոլորովին ոչ բարդ լեզու է։

Runet-ում կան հսկայական թվով վճարովի դասեր վեբ կայքի դասավորության վերաբերյալ և այլ նյութեր, որոնք ունեն արժանապատիվ ուսումնական բազա: Իմ կարծիքով այս լեզուն ինքնուրույն սովորելը ամենևին էլ խնդիր չէ։

Ավելի լավ է դառնում - CSS

HTML-ի հիմունքներին տիրապետելուց հետո կարող եք անմիջապես սկսել սովորել CSS (Cascading Style Sheets), որը թույլ է տալիս սահմանել տառատեսակներ, գույներ և կայքի առանձին բլոկների գտնվելու վայրը:

CSS-ի համար ես կարող եմ խորհուրդ տալ լավը, որը կօգնի ձեզ կառուցել դասավորության դիզայների կարիերա, նույնիսկ եթե դուք ընդհանրապես չունեք վեբ դիզայնի և դասավորության տարրական գիտելիքներ:

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

Արդյո՞ք անհրաժեշտ է սովորել բոլոր HTML/CSS թեգերը, ատրիբուտները և հատկությունները:

HTML-ն ունի բազմաթիվ տարբեր պիտակներ և ատրիբուտներ, իսկ CSS-ն ունի բազմաթիվ հատկություններ, որոնք կարող են ունենալ տարբեր արժեքներ: Հետևաբար, սկսնակների շատերին անհանգստացնում է այն հարցը. որտեղի՞ց սկսել կայքի դասավորությունը և արդյոք անհրաժեշտ է անգիր անել այս բոլոր արժեքները, պիտակները և հատկությունները:

Իհարկե, եթե ունես յուրահատուկ լուսանկարչական հիշողություն, ապա քեզ համար դժվար չի լինի սովորել այս ամենը, և միևնույն ժամանակ, «Պատերազմ և խաղաղություն» երեք հատորները՝ անգիր։ Հակառակ դեպքում, ձեզ հարկավոր չէ անգիր անել այս բոլոր բառերը:

Սկզբում, երբ առաջին անգամ ծանոթանաք CSS-ին, դուք դեռ կնայեք, թե ինչ է անում այդ հատկության յուրաքանչյուր հատկությունը և յուրաքանչյուր արժեքը: Ժամանակի ընթացքում դուք կհասկանաք, թե ինչ կարող եք անել կասկադային ոճի թերթիկների օգնությամբ, և այդ հատկություններից / արժեքներից մի քանիսն արդեն պահված են ձեր գլխում: Դե, իհարկե, եթե դուք տառապում եք ամնեզիայից:

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

Մենք պարզեցնում ենք դասավորության գործընթացը

Այն դեպքերի համար, երբ անհրաժեշտ է արագ ստեղծել ինչ-որ ինտերֆեյս կամ կայքի նախատիպ, կան CSS շրջանակներ, ինչպիսին է Bootstrap-ը: Այն թույլ է տալիս մեկ անձի մեջ դառնալ վեբ վարպետ, վեբ ծրագրավորող և կոդավորող՝ առանց ոճաթերթերի, ծրագրավորման լեզուների և հիպերտեքստի նշագրման իմացության:

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

Աերոբատիկա - JavaScript

Վեբ դիզայնի ավելի լուրջ դասեր ուսումնասիրելիս դուք կհանդիպեք HTML-ում ներառված JavaScript-ի տարրերին, որոնք վեբ էջերը դարձնում են ինտերակտիվ: Եթե ​​դուք նախատեսում եք ոչ միայն Back-end, այլ նաև Front-end մշակում, ապա դուք պետք է իմանաք JavaScript-ը շատ լավ մակարդակով։

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

Ամփոփելով

Այսպիսով, ինչպես դուք, հուսով եմ, արդեն հասկացաք, դասավորության դիզայները շատ կարևոր և հնագույն ինտերնետ մասնագիտություն է, որից կախված է.

կայքի բեռնման արագություն;

դրա ցուցադրման համապատասխանությունը տարբեր բրաուզերներում.

հարմարվողականություն տարբեր օգտագործողների էկրաններին;

Համապատասխանություն HTML ստանդարտներին և որոնման համակարգի պահանջներին:

Առայժմ այսքանը: Մի մոռացեք բաժանորդագրվել մեր բլոգի նորություններին, որպեսզի բաց չթողնեք կայքի դասավորությունը զրոյից սովորելու մասին ամենահետաքրքիր բաները:

Մինչև մենք նորից կհանդիպենք, սիրելի գործընկերներ և նրանք, ովքեր նոր են սկսում վեբ զարգացման այս դժվարին, բայց շատ հուզիչ ճանապարհը:

Ձեզ հետաքրքրում է հարցը ինչպես ինքնուրույն սովորել կայքի դասավորությունը? Համապատասխան հաստատակամությամբ յուրաքանչյուրը կարող է սովորել կայքերի դասավորությունը:

Այսօրվա գրառման թեման. Որտեղի՞ց սկսել դասավորությունը սովորել:Այս հարցը հեռու է պարապ լինելուց, և յուրաքանչյուրն ինքն է ընտրում իր ճանապարհը։ Ես ձեզ կպատմեմ այն ​​մասին, թե ինչպես ես ինքս սկսեցի այս հետաքրքրաշարժ ճանապարհորդությունը դեպի աշխարհ HTMLԵվ CSS.Հուսով եմ, որ ձեզանից ոմանց համար սա կդառնա, եթե ոչ առաջնորդող աստղ, ապա գոնե ուղեցույց դեպի նպատակ:

Այսպիսով, ինչ է կայքի դասավորությունը? Ով դեռ տանկի մեջ չէ, լսեք. դասավորությունը այս դեպքում չի նշանակում «Իսկրա» թերթում տպագրել նոր հոդվածը կապարատառերով, այլ Photoshop-ում նկարված կայքի դասավորությունը ուղղակիորեն աշխատանքային կայքի վերածել:

Այլ կերպ ասած, դասավորությունը կոդավորումն է, HTML-ով տվյալներ գրելը, որոնք իրեն հարգող ցանկացած բրաուզեր կվերածի գեղեցիկ և հասկանալի կայքի:

Կայքի սովորական այցելուի համար այս կոդը կմնա անտեսանելի՝ թաքնված բրաուզերի լայն հետևի հետևում: Այնուամենայնիվ, դա ամենևին չի նշանակում, որ դա կարող է լինել ամեն դեպքում։ Կոդը պետք է լինի գեղեցիկ, հարմար և ճիշտ:

Այսպիսով, որտեղի՞ց եք սկսել սովորել HTML: Առաջին բանը, որ գալիս է մտքին, գիրք գնելն է: Եվ որքան հաստ է, այնքան լավ: Միգուցե սա ինչ-որ մեկին օգտակար կլինի:

Բայց անձամբ, նման «աղյուսների» փորձից հետո, ես հստակ վանող ռեֆլեքս եմ զարգացրել։ Այն պարզ պատճառով, որ այնտեղ տեղեկատվությունն ավելորդ է մատակարարվում։

Հիշում եք դպրոցը: Սովորական քաղաքացին կարիք չունի իմանալու քիմիա, ֆիզիկա, անատոմիա և այլն, այնքանով, որքանով փորձում է մտցնել իր ուղեղի մեջ։

Ահա այսպես. հաստ գրքում շատ ավելորդ կա, իսկ երբ շատ է, այն մթագնում է աչքերը, հորանջում և ուսումը վերածում 2-3 օրվա տանջանքների, որին հաջորդում է այս գիտությունը հեռուն նետելու մեջ։ վառարանը։ Եվ վերջ։

Այսպիսով, ես անձամբ գնացի այլ ճանապարհով: Ես գնել եմ գիրքը: Ամենևին չաղ. Եվ ես դեռ չեմ հոգնում այն ​​խորհուրդ տալ իմ ուսանողներին, քանի որ գրքի արդիականությունը դեռ թարմ է և պահանջված: գրքի հեղինակ Արտեմի Լոմով, բայց դա կոչվում է «HTML, CSS, սցենարներ. կայքեր ստեղծելու պրակտիկա». «ԲՀՎ-Պետերբուրգ» հրատարակչություն.

Այս գրքում ամեն ինչ չափավոր է. կա մի քիչ վեբ պատմություն, մի քիչ ստանդարտների մասին: Բայց ամենակարևորը, HTML-ի, CSS-ի և JavaScript-ի հիմնական նյութը շատ հասկանալի և պարզ է ներկայացված: Սկսնակների համար, ովքեր սովորում են կայքի դասավորությունը, դա պարզապես պարտադիր է:

Բայց մեկ գիրքը բավական չէ։ Իմ ուսումնասիրության մեթոդը ոչ մի կերպ նոր չէ, բայց միևնույն ժամանակ շատ արդյունավետ։ Մեզ ոչ թե մեկ, այլ մի քանի գիրք է պետք։ Այստեղ խորամանկությունն այն է, որ յուրաքանչյուր հեղինակ մի փոքր այլ կերպ է գրում: Երբ դուք կարդում եք նույն թեման տարբեր տարբերակներով, ընդհանուր պատկերը շատ ավելի արագ է պարզվում և շատ ավելի լավ է հիշվում:

Իմ երկրորդ նման գիրքը Վլադիմիր Դրոնովի Macromedia Dreamweaver ձեռնարկի էլեկտրոնային տարբերակն էր:

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

Այս ծրագրի մեծ պլյուսը ցանցում գոյություն ունեցող ցանկացած կայք դիտելու հնարավորությունն է (կրկին երկակի ռեժիմով):

Օրինակ, ինձ դուր եկավ բլոկների գեղեցիկ և հարմար տեղադրմամբ կայք, ես պահպանեցի ամբողջ էջը նկարներով, իսկ հետո գործարկեցի այս էջը Dream-ում: Եվ վոյլա! Դուք կարող եք տեսնել ամեն ինչ, որտեղ և ինչ: Չնայած սկզբում ամեն ինչ այնքան ակնհայտ չէ, որքան մենք կցանկանայինք։ Դա պարզապես գիրքն է, այստեղ պարզապես հիանալի օգնական է:

Իհարկե, ես վաղուց չեմ օգտագործում որևէ մեկը։ տեսողական խմբագիրներ, բայց ես կարողանում եմ պարզ տեքստային խմբագրիչով, ինչպիսին PSPad-ն է: Բայց մեծ փորձ է ձեռք բերվել։ Եվ ամենակարևորը` բազմակողմանի: Ինչու առարկան ինքնին հեշտությամբ և բավականին կառուցված է տեղավորվում գլխի մեջ:

Ի դեպ, կառուցվածքը ցանկացած լեզու սովորելու ամենակարեւոր գործոնն է։ Իսկ HTML-ը նույնպես լեզու է։ Իսկ այս կառույցի մասին կխոսեմ հաջորդ անգամ։

Միևնույն ժամանակ, ձեռք բերեք ձեզ մի քանի օգտակար գիրք: Եվ կարդացեք իմ բլոգի վեբ խորհուրդները: Այստեղ դուք նույնպես կգտնեք շատերը օգտակար խորհուրդներկայքի դասավորության համար. Սկսեք սովորել կայքի դասավորությունը առնվազն .

UPD թվագրված 10/25/2012Սկսնակների համար խորհուրդ եմ տալիս այս հոդվածը. Դասավորության դիզայների ուղին: Այնտեղ ամեն ինչ շատ ավելի մանրամասն է՝ հղումներով և այլ օգտակար բաներով։

 
Հոդվածներ Ըստթեմա:
Ինչու՞ է Պրիպյատի հետախուզական զանգը ռենտգենից դուրս թռչում
Microsoft-ի արտադրանքի մեծ թվով օգտատերեր հայտնում են Windows 10-ի ակտիվացման կորստի և Pro տարբերակը Home-ի փոխակերպման մասին: Օգտագործողները ծանուցվում են ժամկետանց բանալու մասին, և երբ նրանք փորձում են նորից ակտիվացնել, նրանք ստանում են սխալ 0x803fa067 Windo-ի համար:
css տարրի տեսակի ընտրիչ
Այն, ինչ ընտրիչն է css-ում, այդ տարրի կամ տարրերի խմբի նկարագրությունն է, որը բրաուզերին ասում է, թե որ տարրը պետք է ընտրի՝ ոճ կիրառելու համար: Եկեք նայենք հիմնական CSS ընտրիչներին:1) .x .topic-title (ֆոնի գույնը՝ դեղին;)
Հեծանիվների բարձրախոսներ. հիմնական տարբերությունները, ինչպես ընտրել
Ճանապարհին շարժիչ ուժ, պայծառություն և հույզեր ավելացնելու համար կարող եք հեծանիվով բարձրախոսներ կառուցել և ճանապարհորդությունը լրացնել երաժշտություն լսելով: Չնայած այն հանգամանքին, որ այսօր շուկայում առկա բոլոր հեծանիվների աուդիո համակարգերն ունեն բնութագրերի նման համադրություն
Ավտոմատ վճարման ծառայություն մեգաֆոն Սբերբանկից Մեգաֆոնի հաշվի ավտոմատ համալրում
Ամենօրյա վազքի ընթացքում կարող է ժամանակ չմնա ձեր բջջային հեռախոսի հաշիվը լրացնելու համար: Արդյունքում մենք ունենք բոլոր հնարավորությունները մնալու առանց հաղորդակցության, այն էլ ամենավճռական պահին։ Եթե ​​դուք չունեք անվճար րոպե գնալու վճարման տերմինալ և