{"id":17788,"date":"2024-08-21T22:14:11","date_gmt":"2024-08-21T18:44:11","guid":{"rendered":"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/"},"modified":"2024-08-21T22:14:11","modified_gmt":"2024-08-21T18:44:11","slug":"%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c","status":"publish","type":"post","link":"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/","title":{"rendered":"\u0633\u0627\u062e\u062a \u0642\u0627\u0644\u0628 \u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0627 HTML \u0648 CSS \u062f\u0631 \u067e\u0627\u06cc\u062a\u0648\u0646"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0633\u0631\u0641\u0635\u0644\u0647\u0627\u06cc \u0645\u0637\u0644\u0628<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#%d8%b1%d8%a7%d9%87_%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c_%d8%af%d8%a7%db%8c%d8%b1%da%a9%d8%aa%d9%88%d8%b1%db%8c_%d9%82%d8%a7%d9%84%d8%a8_%d9%88_jinja2\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0642\u0627\u0644\u0628 \u0648 Jinja2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#%d8%a7%db%8c%d8%ac%d8%a7%d8%af_%db%8c%da%a9_%d9%82%d8%a7%d9%84%d8%a8_%d8%a7%db%8c%d9%85%db%8c%d9%84_html\" >\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0642\u0627\u0644\u0628 \u0627\u06cc\u0645\u06cc\u0644 HTML<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#%d9%85%d8%b1%d8%ad%d9%84%d9%87_1_%d8%b3%d8%a7%d8%ae%d8%aa%d8%a7%d8%b1_html\" >\u0645\u0631\u062d\u0644\u0647 1: \u0633\u0627\u062e\u062a\u0627\u0631 HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#%d9%85%d8%b1%d8%ad%d9%84%d9%87_2_%d8%a7%db%8c%d9%85%db%8c%d9%84_%d8%ae%d9%88%d8%af_%d8%b1%d8%a7_%d8%b3%d8%a7%d8%ae%d8%aa%d8%a7%d8%b1_%d8%af%d9%87%db%8c%d8%af\" >\u0645\u0631\u062d\u0644\u0647 2: \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u0631\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0647\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#%d8%b3%d8%a8%da%a9_%d8%af%d8%a7%d8%af%d9%86_%d8%a8%d9%87_%d8%a7%db%8c%d9%85%db%8c%d9%84_%d8%a8%d8%a7_css\" >\u0633\u0628\u06a9 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0627\u06cc\u0645\u06cc\u0644 \u0628\u0627 CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#css_%d8%af%d8%b1%d9%88%d9%86_%d8%ae%d8%b7%db%8c\" >CSS \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#%d8%aa%d9%86%d8%b8%db%8c%d9%85_%d8%b3%d8%a8%da%a9\" >\u062a\u0646\u0638\u06cc\u0645 \u0633\u0628\u06a9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#%d8%a7%d8%b6%d8%a7%d9%81%d9%87_%da%a9%d8%b1%d8%af%d9%86_%d8%af%da%a9%d9%85%d9%87_cta_%d9%88_%d9%be%db%8c%d9%88%d9%86%d8%af%d9%87%d8%a7\" >\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062f\u06a9\u0645\u0647 CTA \u0648 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#%d8%a2%d9%88%d8%b1%d8%af%d9%86_%d9%87%d9%85%d9%87_%da%86%db%8c%d8%b2_%d8%a8%d8%a7_jinja2\" >\u0622\u0648\u0631\u062f\u0646 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0628\u0627 Jinja2<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#%d9%88%d8%a7%d8%b1%d8%af_%da%a9%d8%b1%d8%af%d9%86_%d9%85%d8%a7%da%98%d9%88%d9%84_%d9%87%d8%a7%db%8c_%d9%be%d8%b1%d9%88%da%98%d9%87\" >\u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u067e\u0631\u0648\u0698\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#%d9%82%d8%a7%d9%84%d8%a8_%d8%ae%d9%88%d8%af_%d8%b1%d8%a7_%d8%a8%d8%a7%d8%b1%da%af%db%8c%d8%b1%db%8c_%da%a9%d9%86%db%8c%d8%af\" >\u0642\u0627\u0644\u0628 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#%d9%82%d8%a7%d9%84%d8%a8_%d8%b1%d8%a7_%d8%b1%d9%86%d8%af%d8%b1_%da%a9%d9%86%db%8c%d8%af\" >\u0642\u0627\u0644\u0628 \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#%d8%a7%d8%b1%d8%b3%d8%a7%d9%84_%d8%a7%db%8c%d9%85%db%8c%d9%84\" >\u0627\u0631\u0633\u0627\u0644 \u0627\u06cc\u0645\u06cc\u0644<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#%d8%aa%d8%b3%d8%aa_%da%a9%d8%b1%d8%af%d9%86\" >\u062a\u0633\u062a \u06a9\u0631\u062f\u0646<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rasanegaar.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d9%82%d8%a7%d9%84%d8%a8-%d9%87%d8%a7%db%8c-%d8%a7%db%8c%d9%85%db%8c%d9%84-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-%d8%a8%d8%a7-html-%d9%88-css-%d8%af%d8%b1-%d9%be%d8%a7%db%8c\/#%d9%86%d8%aa%db%8c%d8%ac%d9%87_%da%af%db%8c%d8%b1%db%8c\" >\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 9<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span><p> <br \/>\n<\/p>\n<div><noscript><\/noscript><\/p>\n<p>\u06cc\u06a9 \u0627\u06cc\u0645\u06cc\u0644 HTML \u0627\u0632 \u06a9\u062f HTML \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0637\u0631\u0627\u062d\u06cc \u0622\u0646 \u0633\u0646\u06af\u06cc\u0646 \u0627\u0633\u062a \u0648 \u0634\u0628\u06cc\u0647 \u06cc\u06a9 \u0648\u0628 \u0645\u062f\u0631\u0646 \u0627\u0633\u062a page\u063a\u0646\u06cc \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 \u0628\u0635\u0631\u06cc \u0645\u0627\u0646\u0646\u062f \u062a\u0635\u0627\u0648\u06cc\u0631\u060c \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627 \u0648 \u063a\u06cc\u0631\u0647\u060c \u0628\u0631\u0627\u06cc \u062a\u0623\u06a9\u06cc\u062f \u0628\u0631 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644.<\/p>\n<p>\u0633\u0627\u062e\u062a \u0642\u0627\u0644\u0628 \u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0628\u0631\u0646\u062f \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u0627\u0647\u062f\u0627\u0641 \u0645\u062e\u062a\u0644\u0641 \u0628\u0627\u0632\u0627\u0631\u06cc\u0627\u0628\u06cc \u0627\u06cc\u0645\u06cc\u0644\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0627\u0632 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u062c\u062f\u06cc\u062f\u060c \u062a\u0627\u06cc\u06cc\u062f \u0633\u0641\u0627\u0631\u0634 \u0648 \u063a\u06cc\u0631\u0647 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a. \u0631\u0648\u06cc. \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \u0642\u0627\u0644\u0628 \u0627\u06cc\u0645\u06cc\u0644 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0627 \u0639\u062f\u0645 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u06cc\u062c\u0627\u062f \u0627\u06cc\u0645\u06cc\u0644 \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u062e\u0648\u062f \u0635\u0631\u0641\u0647 \u062c\u0648\u06cc\u06cc \u06a9\u0646\u06cc\u062f. \u0634\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 <a href=\"https:\/\/mailtrap.io\/blog\/mailto-links-explained\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u0644\u06cc\u0646\u06a9 \u0627\u06cc\u0645\u06cc\u0644 \u062f\u0631 HTML<\/a> \u0628\u0631\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u06cc\u0645\u06cc\u0644 \u062f\u0631 \u0633\u0631\u0648\u06cc\u0633 \u06af\u06cc\u0631\u0646\u062f\u0647 \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645\u060c \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u0642\u0627\u0644\u0628 \u0627\u06cc\u0645\u06cc\u0644 HTML \u0628\u0633\u0627\u0632\u06cc\u062f\u060c \u06cc\u06a9 \u0637\u0631\u062d \u0627\u06cc\u0645\u06cc\u0644 CSS \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062e\u0627\u0637\u0628\u0627\u0646 \u0647\u062f\u0641 \u062e\u0648\u062f \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2 id=\"settingupyourtemplatedirectoryandjinja2\"><span class=\"ez-toc-section\" id=\"%d8%b1%d8%a7%d9%87_%d8%a7%d9%86%d8%af%d8%a7%d8%b2%db%8c_%d8%af%d8%a7%db%8c%d8%b1%da%a9%d8%aa%d9%88%d8%b1%db%8c_%d9%82%d8%a7%d9%84%d8%a8_%d9%88_jinja2\"><\/span>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0642\u0627\u0644\u0628 \u0648 Jinja2<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0631\u0627\u062d\u0644 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0642\u0627\u0644\u0628 \u0627\u06cc\u0645\u06cc\u0644 HTML \u0648 Jinja2 \u0628\u0631\u0627\u06cc \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0627\u06cc\u0645\u06cc\u0644 \u067e\u0627\u06cc\u062a\u0648\u0646 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<ul>\n<li>\n<p><strong>\u06cc\u06a9 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0627\u0644\u06af\u0648 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/strong>: \u0628\u0631\u0627\u06cc \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0642\u0627\u0644\u0628 \u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 HTML \u062e\u0648\u062f\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0627\u0644\u06af\u0648 \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0645\u0627\u0698\u0648\u0644 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0646\u0627\u0645 \u0627\u06cc\u0646 \u0641\u0647\u0631\u0633\u062a \u0631\u0627 \u0628\u06af\u0630\u0627\u0631\u06cc\u0645 &#8211; <code>html_emailtemp<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Jinja2 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/strong>: Jinja \u06cc\u06a9 \u0645\u0648\u062a\u0648\u0631 \u0642\u0627\u0644\u0628 \u0633\u0627\u0632\u06cc \u0645\u062d\u0628\u0648\u0628 \u0628\u0631\u0627\u06cc \u067e\u0627\u06cc\u062a\u0648\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc\u060c \u0627\u0633\u0646\u0627\u062f HTML \u0648 \u063a\u06cc\u0631\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f. Jinja2 \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 \u0622\u0646 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062d\u0644\u0642\u0647\u200c\u0647\u0627\u060c \u0628\u0644\u0648\u06a9\u200c\u0647\u0627\u060c \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0648 \u063a\u06cc\u0631\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u067e\u0627\u06cc\u062a\u0648\u0646\u060c \u0645\u0627\u0646\u0646\u062f \u0633\u0627\u062e\u062a \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627 \u0648 \u0645\u06cc\u06a9\u0631\u0648\u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627\u060c \u062e\u0648\u062f\u06a9\u0627\u0631 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0645\u06cc\u0644\u200c\u0647\u0627 \u0628\u0627 \u067e\u0627\u06cc\u062a\u0648\u0646 \u0648 \u063a\u06cc\u0631\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p>\u0627\u0632 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 Jinja2 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0631\u0648\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631 \u0634\u0645\u0627:<\/p>\n<pre><code class=\"hljs\">pip install jinja2\n<\/code><\/pre>\n<\/li>\n<\/ul>\n<h2 id=\"creatinganhtmlemailtemplate\"><span class=\"ez-toc-section\" id=\"%d8%a7%db%8c%d8%ac%d8%a7%d8%af_%db%8c%da%a9_%d9%82%d8%a7%d9%84%d8%a8_%d8%a7%db%8c%d9%85%db%8c%d9%84_html\"><\/span>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0642\u0627\u0644\u0628 \u0627\u06cc\u0645\u06cc\u0644 HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <a href=\"https:\/\/mailtrap.io\/blog\/html-email\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u0627\u06cc\u0645\u06cc\u0644 HTML<\/a> \u0642\u0627\u0644\u0628\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0631\u0648\u0634 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u0631\u0627 \u0645\u0631\u062d\u0644\u0647 \u0628\u0647 \u0645\u0631\u062d\u0644\u0647 \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u0645. \u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0642\u0627\u0644\u0628 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0645\u0631\u0627\u062d\u0644 \u0632\u06cc\u0631 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f:<\/p>\n<h3 id=\"step1structurehtml\"><span class=\"ez-toc-section\" id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87_1_%d8%b3%d8%a7%d8%ae%d8%aa%d8%a7%d8%b1_html\"><\/span>\u0645\u0631\u062d\u0644\u0647 1: \u0633\u0627\u062e\u062a\u0627\u0631 HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06cc\u06a9 \u0627\u06cc\u0645\u06cc\u0644 \u0627\u0648\u0644\u06cc\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u0646\u0627\u0633\u0628\u06cc \u062f\u0627\u0631\u062f &#8211; \u0633\u0631\u0635\u0641\u062d\u0647\u060c \u0628\u062f\u0646\u0647 \u0648 \u067e\u0627\u0648\u0631\u0642\u06cc.<\/p>\n<ul>\n<li><strong>\u0633\u0631\u0628\u0631\u06af<\/strong>: \u0628\u0631\u0627\u06cc \u0627\u0647\u062f\u0627\u0641 \u0628\u0631\u0646\u062f\u0633\u0627\u0632\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f (\u062d\u062f\u0627\u0642\u0644 \u062f\u0631 \u0627\u06cc\u0645\u06cc\u0644 \u0647\u0627)<\/li>\n<li><strong>\u0628\u062f\u0646<\/strong>: \u0645\u062a\u0646 \u06cc\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0635\u0644\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u062c\u0627\u06cc \u0645\u06cc \u062f\u0647\u062f<\/li>\n<li><strong>\u067e\u0627\u0648\u0631\u0642\u06cc<\/strong>: \u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u060c \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06cc\u0627 \u062a\u0645\u0627\u0633\u200c\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f (CTA) \u062f\u0631 \u0627\u0646\u062a\u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0622\u0645\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<\/ul>\n<p>\u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u0633\u0627\u062e\u062a\u0627\u0631 HTML \u062e\u0648\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0633\u0627\u062f\u0647 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f \u0632\u06cc\u0631\u0627 \u0633\u0631\u0648\u06cc\u0633 \u06af\u06cc\u0631\u0646\u062f\u06af\u0627\u0646 \u0627\u06cc\u0645\u06cc\u0644 \u0646\u0633\u0628\u062a \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u0648\u0628 \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u06a9\u0645\u062a\u0631\u06cc \u062f\u0627\u0631\u0646\u062f. \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u062f\u0627\u0648\u0644 \u0628\u0631\u0627\u06cc \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc \u0627\u06cc\u0645\u06cc\u0644\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u062a\u0631\u062c\u06cc\u062d \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0631\u0648\u0634 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u06cc\u0645\u06cc\u0644 \u0627\u0648\u0644\u06cc\u0647 HTML \u0628\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>HTML Email Template<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/css\"<\/span>&gt;<\/span><span class=\"css\">\n        \n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"100%\"<\/span> <span class=\"hljs-attr\">cellpadding<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">cellspacing<\/span>=<span class=\"hljs-string\">\"0\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">align<\/span>=<span class=\"hljs-string\">\"center\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"600\"<\/span> <span class=\"hljs-attr\">cellpadding<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">cellspacing<\/span>=<span class=\"hljs-string\">\"0\"<\/span>&gt;<\/span>\n                    \n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background-color: #1c3f60; color: #ffffff; text-align: center; padding: 20px;\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Your order is confirmed<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n                    \n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"padding: 20px; font-size: 16px; line-height: 1.6; color:#ffffff;\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>The estimated delivery date is 22nd August 1403.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n                    \n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background-color: #ff6100; color: #000000; text-align: center; padding: 20px;\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>For additional help, contact us at (email\u00a0protected)<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li><code>&lt;!DOCTYPE html&gt;<\/code>: \u0627\u06cc\u0646 HTML \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0648\u0639 \u0633\u0646\u062f \u0634\u0645\u0627 \u0627\u0639\u0644\u0627\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li><code>&lt;html&gt;<\/code>: \u0627\u06cc\u0646 \u06cc\u06a9 HTML \u0627\u0633\u062a page&#8217;s root \u0639\u0646\u0635\u0631<\/li>\n<li><code>&lt;head&gt;<\/code>: \u0627\u06cc\u0646 \u0641\u0648\u0642 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0633\u0646\u062f \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u0633\u0628\u06a9 \u0647\u0627\u06cc CSS \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li><code>&lt;style&gt;<\/code>: \u0633\u0628\u06a9 \u0647\u0627\u06cc CSS \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/li>\n<li><code>&lt;body&gt;<\/code>: \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0635\u0644\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0634\u0645\u0627 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li><code>&lt;table&gt;<\/code>: \u0627\u06cc\u0646 \u062a\u06af \u0686\u06cc\u062f\u0645\u0627\u0646 \u0627\u06cc\u0645\u06cc\u0644 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647 \u0622\u0646 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u062c\u062f\u0648\u0644\u06cc \u0628\u0627 \u0633\u0644\u0648\u0644 \u0647\u0627 \u0648 \u0631\u062f\u06cc\u0641 \u0647\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0627\u06cc\u0645\u06cc\u0644 \u0622\u0633\u0627\u0646 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li><code>&lt;tr&gt;<\/code>: \u0627\u06cc\u0646 \u062a\u06af \u0631\u062f\u06cc\u0641 \u062c\u062f\u0648\u0644 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0645\u06a9\u0627\u0646 \u0627\u0646\u0628\u0627\u0634\u062a\u0646 \u0645\u062d\u062a\u0648\u0627\u06cc \u0639\u0645\u0648\u062f\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li><code>&lt;td&gt;<\/code>: \u0627\u06cc\u0646 \u062a\u06af \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0633\u0644\u0648\u0644 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0631\u062f\u06cc\u0641 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0634\u0627\u0645\u0644 \u0645\u062d\u062a\u0648\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u062a\u0635\u0627\u0648\u06cc\u0631\u060c \u0645\u062a\u0646\u060c \u062f\u06a9\u0645\u0647 \u0647\u0627 \u0648 \u063a\u06cc\u0631\u0647 \u0627\u0633\u062a.<\/li>\n<\/ul>\n<h3 id=\"step2structureyouremail\"><span class=\"ez-toc-section\" id=\"%d9%85%d8%b1%d8%ad%d9%84%d9%87_2_%d8%a7%db%8c%d9%85%db%8c%d9%84_%d8%ae%d9%88%d8%af_%d8%b1%d8%a7_%d8%b3%d8%a7%d8%ae%d8%aa%d8%a7%d8%b1_%d8%af%d9%87%db%8c%d8%af\"><\/span>\u0645\u0631\u062d\u0644\u0647 2: \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u0631\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0647\u06cc\u062f<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06a9\u0646\u0648\u0646\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u06cc\u0645\u06cc\u0644 HTML \u0634\u0645\u0627 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645. \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0622\u0646 \u0628\u0627 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0645\u062e\u062a\u0644\u0641\u060c \u0628\u0647 \u062c\u0627\u06cc CSS \u0627\u0632 \u062c\u062f\u0627\u0648\u0644 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0637\u0631\u062d \u0627\u06cc\u0645\u06cc\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"100%\"<\/span> <span class=\"hljs-attr\">cellpadding<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">cellspacing<\/span>=<span class=\"hljs-string\">\"0\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">align<\/span>=<span class=\"hljs-string\">\"center\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"600\"<\/span> <span class=\"hljs-attr\">cellpadding<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">cellspacing<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"border: 1px solid #1c3f60; padding: 20px;\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">align<\/span>=<span class=\"hljs-string\">\"center\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"color: #7ed957;\"<\/span>&gt;<\/span>Hi, Jon!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"font-size: 16px; color: #ffde59;\"<\/span>&gt;<\/span>Thank you for being our valuable customer!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n<\/code><\/pre>\n<h2 id=\"stylingtheemailwithcss\"><span class=\"ez-toc-section\" id=\"%d8%b3%d8%a8%da%a9_%d8%af%d8%a7%d8%af%d9%86_%d8%a8%d9%87_%d8%a7%db%8c%d9%85%db%8c%d9%84_%d8%a8%d8%a7_css\"><\/span>\u0633\u0628\u06a9 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0627\u06cc\u0645\u06cc\u0644 \u0628\u0627 CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f\u06cc\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0637\u0631\u0627\u062d\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0628\u0627 HTML \u0648 CSS \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645:<\/p>\n<h3 id=\"inlinecss\"><span class=\"ez-toc-section\" id=\"css_%d8%af%d8%b1%d9%88%d9%86_%d8%ae%d8%b7%db%8c\"><\/span>CSS \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0632 CSS \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u06a9\u0644\u0627\u06cc\u0646\u062a\u200c\u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0645\u062e\u062a\u0644\u0641 CSS \u0631\u0627 \u0628\u0627 \u062f\u0642\u062a \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u0632\u06cc\u0628\u0627\u06cc\u06cc\u200c\u0634\u0646\u0627\u0633\u06cc \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0633\u0628\u06a9 \u0627\u06cc\u0645\u06cc\u0644 \u0634\u0645\u0627 \u0631\u0627 \u062d\u0641\u0638 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"font-size: 16px; color: blue;\"<\/span>&gt;<\/span>Styled paragraph.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n<\/code><\/pre>\n<h3 id=\"adjustingstyle\"><span class=\"ez-toc-section\" id=\"%d8%aa%d9%86%d8%b8%db%8c%d9%85_%d8%b3%d8%a8%da%a9\"><\/span>\u062a\u0646\u0638\u06cc\u0645 \u0633\u0628\u06a9<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u0632 \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u06cc\u0645\u06cc\u0644 \u0634\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0644\u0627\u0632\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0633\u0628\u06a9 \u0631\u0627 \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062a\u0637\u0628\u06cc\u0642 \u062f\u0647\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f\u060c \u0645\u0627 \u0627\u0632 \u067e\u0631\u0633\u0634\u200c\u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u0646 \u0628\u0647 \u0627\u06cc\u0646 \u0647\u062f\u0641 \u0648 \u062a\u0633\u0647\u06cc\u0644 \u0637\u0631\u0627\u062d\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0648\u0627\u06a9\u0646\u0634\u200c\u06af\u0631\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/css\"<\/span>&gt;<\/span><span class=\"css\">\n    <span class=\"hljs-keyword\">@media<\/span> screen <span class=\"hljs-keyword\">and<\/span> (<span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">600px<\/span>) {\n        <span class=\"hljs-selector-class\">.container<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span> <span class=\"hljs-meta\">!important<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-meta\">!important<\/span>;\n        }\n    }\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"600\"<\/span>&gt;<\/span>\n    \n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li><code>@media screen and (max-width: 600px) {....}<\/code>: \u0627\u06cc\u0646 \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0633\u062a\u06af\u0627\u0647 \u062a\u0627 600 \u067e\u06cc\u06a9\u0633\u0644 \u0631\u0627 \u0647\u062f\u0641 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0633\u0628\u06a9 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627 \u0645\u0627\u0646\u0646\u062f \u062a\u0628\u0644\u062a \u0647\u0627 \u0648 \u062a\u0644\u0641\u0646 \u0647\u0627\u06cc \u0647\u0648\u0634\u0645\u0646\u062f \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li><code>width: 100% !important;<\/code>: \u0627\u06cc\u0646 \u0633\u0628\u06a9 \u0639\u0631\u0636 \u062c\u062f\u0648\u0644 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f &#8211; .container. \u06a9\u062f \u062f\u0633\u062a\u0648\u0631 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0639\u0631\u0636 \u062c\u062f\u0648\u0644 \u0631\u0648\u06cc \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062a\u0646\u0638\u06cc\u0645 \u0634\u0648\u062f\u060c \u0646\u0647 600 \u067e\u06cc\u06a9\u0633\u0644.<\/li>\n<li><code>!important<\/code>: \u0627\u06cc\u0646 \u0642\u0627\u0646\u0648\u0646 \u0633\u0627\u06cc\u0631 \u0633\u0628\u06a9 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0627 \u0622\u0646 \u062f\u0631 \u062a\u0636\u0627\u062f \u0628\u0627\u0634\u0646\u062f\u060c \u0644\u063a\u0648 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li><code>padding: 10px !important;<\/code>: \u062f\u0627\u062e\u0644 .container \u062c\u062f\u0648\u0644\u060c \u06cc\u06a9 \u0628\u0627\u0644\u0634\u062a\u06a9 10 \u067e\u06cc\u06a9\u0633\u0644\u06cc \u0628\u0647 \u062c\u062f\u0648\u0644 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ul>\n<h3 id=\"addingctabuttonandlinks\"><span class=\"ez-toc-section\" id=\"%d8%a7%d8%b6%d8%a7%d9%81%d9%87_%da%a9%d8%b1%d8%af%d9%86_%d8%af%da%a9%d9%85%d9%87_cta_%d9%88_%d9%be%db%8c%d9%88%d9%86%d8%af%d9%87%d8%a7\"><\/span>\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062f\u06a9\u0645\u0647 CTA \u0648 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0645\u0627 \u06cc\u06a9 \u067e\u06cc\u0648\u0646\u062f \u062a\u0645\u0627\u0633 \u0628\u0647 \u0627\u0642\u062f\u0627\u0645 (CTA) \u0631\u0627 \u062f\u0631 \u062f\u06a9\u0645\u0647 &#8211; &#8220;\u062f\u0631\u06cc\u0627\u0641\u062a \u06cc\u06a9 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0631\u0627\u06cc\u06af\u0627\u0646 30 \u0631\u0648\u0632\u0647&#8221; \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0627\u0634\u0627\u0631\u0647 \u062f\u0627\u0631\u062f. page &#8211; <code>https:\/\/www.mydomain.com<\/code>.<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">cellpadding<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">cellspacing<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin: auto;\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">align<\/span>=<span class=\"hljs-string\">\"center\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background-color: #8c52ff; padding: 10px 20px; border-radius: 5px;\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/www.mydomain.com\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"color: #ffffff; text-decoration: none; font-weight: bold;\"<\/span>&gt;<\/span>Get a 30-day free trial<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p><strong>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u0642\u0627\u0644\u0628 \u06a9\u0627\u0645\u0644 \u0627\u06cc\u0645\u06cc\u0644 HTML \u0646\u06af\u0627\u0647 \u06a9\u0646\u06cc\u0645:<\/strong><\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1\"<\/span>&gt;<\/span>\n\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>HTML Email Template<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/css\"<\/span>&gt;<\/span><span class=\"css\">\n    \n    \n    <span class=\"hljs-selector-tag\">body<\/span> {\n      <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n      <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#f4f4f4<\/span>;\n      <span class=\"hljs-attribute\">font-family<\/span>: Arial, sans-serif;\n    }\n    \n    <span class=\"hljs-selector-tag\">table<\/span> {\n      <span class=\"hljs-attribute\">border-collapse<\/span>: collapse;\n    }\n    \n    <span class=\"hljs-selector-class\">.mailcontainer<\/span> {\n      <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n      <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">600px<\/span>;\n      <span class=\"hljs-attribute\">margin<\/span>: auto;\n      <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#ffffff<\/span>;\n    }\n    \n    <span class=\"hljs-selector-class\">.header<\/span> {\n      <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#1c3f60<\/span>;\n      <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#ffffff<\/span>;\n      <span class=\"hljs-attribute\">text-align<\/span>: center;\n      <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n    }\n    \n    <span class=\"hljs-selector-class\">.body<\/span> {\n      <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n      <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">16px<\/span>;\n      <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">1.6<\/span>;\n      <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#1c3f60<\/span>;\n      <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#7ed957<\/span>;\n    }\n    \n    <span class=\"hljs-selector-class\">.footer<\/span> {\n      <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#ff6100<\/span>;\n      <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#000000<\/span>;\n      <span class=\"hljs-attribute\">text-align<\/span>: center;\n      <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n    }\n    \n    <span class=\"hljs-selector-class\">.cta<\/span> {\n      <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#8c52ff<\/span>;\n      <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">20px<\/span>;\n      <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">5px<\/span>;\n      <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#ffffff<\/span>;\n      <span class=\"hljs-attribute\">text-decoration<\/span>: none;\n      <span class=\"hljs-attribute\">font-weight<\/span>: bold;\n    }\n    \n    <span class=\"hljs-keyword\">@media<\/span> screen <span class=\"hljs-keyword\">and<\/span> (<span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">600px<\/span>) {\n      <span class=\"hljs-selector-class\">.container<\/span> {\n        <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span> <span class=\"hljs-meta\">!important<\/span>;\n        <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-meta\">!important<\/span>;\n      }\n    }\n  <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"100%\"<\/span> <span class=\"hljs-attr\">cellpadding<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">cellspacing<\/span>=<span class=\"hljs-string\">\"0\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">align<\/span>=<span class=\"hljs-string\">\"center\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"600\"<\/span> <span class=\"hljs-attr\">cellpadding<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">cellspacing<\/span>=<span class=\"hljs-string\">\"0\"<\/span>&gt;<\/span>\n\n          \n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"header\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Your order is confirmed<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n\n          \n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"body\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>The estimated delivery date is 22nd August 1403.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"font-size: 16px; color: blue;\"<\/span>&gt;<\/span>Styled paragraph.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"100%\"<\/span> <span class=\"hljs-attr\">cellpadding<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">cellspacing<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"border: 1px solid #1c3f60; padding: 20px;\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">align<\/span>=<span class=\"hljs-string\">\"center\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"color: #7ed957;\"<\/span>&gt;<\/span>Hi, Jon!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>  \n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"font-size: 16px; color: #ffde59;\"<\/span>&gt;<\/span>Thank you for being our valuable customer!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">cellpadding<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">cellspacing<\/span>=<span class=\"hljs-string\">\"0\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin: auto;\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">align<\/span>=<span class=\"hljs-string\">\"center\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background-color: #8c52ff; padding: 10px 20px; border-radius: 5px;\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/www.mydomain.com\"<\/span> <span class=\"hljs-attr\">target<\/span>=<span class=\"hljs-string\">\"_blank\"<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"noopener noreferrer\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"color: #ffffff; text-decoration: none; font-weight: bold;\"<\/span>&gt;<\/span>Get a 30-day free trial<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n                  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n\n          \n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background-color: #ff6100; color: #000000; text-align: center; padding: 20px;\"<\/span>&gt;<\/span>\n              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>For additional help, contact us at (email\u00a0protected)<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/pre>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li><code>.mailcontainer<\/code>: \u0627\u06cc\u0646 \u06a9\u0644\u0627\u0633\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0628\u062e\u0634 \u0627\u0635\u0644\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0639\u0631\u0636\u060c \u062d\u0627\u0634\u06cc\u0647\u060c \u062d\u0627\u0634\u06cc\u0647 \u0648 \u0631\u0646\u06af \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0628\u0647 \u0622\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li><code>.header<\/code>\u060c <code>.footer<\/code>\u060c <code>.body<\/code>: \u0627\u06cc\u0646\u0647\u0627 \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0633\u0631\u0628\u0631\u06af\u060c \u0641\u0648\u062a\u0631 \u0648 \u0628\u062f\u0646\u0647 \u0627\u06cc\u0645\u06cc\u0644 \u0634\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/li>\n<li><code>.cta<\/code>: \u0627\u06cc\u0646 \u06a9\u0644\u0627\u0633 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0645\u0627\u0646\u0646\u062f \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc CTA \u0631\u0627 \u0628\u0627 \u0631\u0646\u06af \u0645\u0634\u062e\u0635\u060c \u0637\u0631\u062d \u062d\u0627\u0634\u06cc\u0647\u060c \u0628\u0627\u0644\u0634\u062a\u06a9 \u0648 \u063a\u06cc\u0631\u0647 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc\u062f.<\/li>\n<\/ul>\n<h2 id=\"bringingeverythingtogetherwithjinja2\"><span class=\"ez-toc-section\" id=\"%d8%a2%d9%88%d8%b1%d8%af%d9%86_%d9%87%d9%85%d9%87_%da%86%db%8c%d8%b2_%d8%a8%d8%a7_jinja2\"><\/span>\u0622\u0648\u0631\u062f\u0646 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0628\u0627 Jinja2<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u0642\u0627\u0644\u0628 HTML \u0645\u0627\u060c \u0627\u06a9\u0646\u0648\u0646 \u0632\u0645\u0627\u0646 \u0622\u0646 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0648\u062a\u0648\u0631 \u0642\u0627\u0644\u0628\u200c\u0633\u0627\u0632\u06cc Jinja2 \u06a9\u0646\u0627\u0631 \u0647\u0645 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645.<\/p>\n<h3 id=\"importprojectmodules\"><span class=\"ez-toc-section\" id=\"%d9%88%d8%a7%d8%b1%d8%af_%da%a9%d8%b1%d8%af%d9%86_%d9%85%d8%a7%da%98%d9%88%d9%84_%d9%87%d8%a7%db%8c_%d9%be%d8%b1%d9%88%da%98%d9%87\"><\/span>\u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u067e\u0631\u0648\u0698\u0647<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0634\u0645\u0627 \u0642\u0628\u0644\u0627 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0642\u0627\u0644\u0628 \u062e\u0648\u062f \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f &#8211; <code>html_emailtemp<\/code>. \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0644\u06af\u0648\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0647 \u0648 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f. \u0627\u0645\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c import \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0645\u0631\u0628\u0648\u0637\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f \u0632\u06cc\u0631:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">from<\/span> jinja2 <span class=\"hljs-keyword\">import<\/span> Environment, PackageLoader, select_autoescape\n\nenv = Environment(loader=PackageLoader(<span class=\"hljs-string\">'email_project'<\/span>, <span class=\"hljs-string\">'html_emailtemp'<\/span>), autoescape=select_autoescape((<span class=\"hljs-string\">'html'<\/span>, <span class=\"hljs-string\">'xml'<\/span>)))\n<\/code><\/pre>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d<\/strong>:<\/p>\n<ul>\n<li>\n<p>Environment: Jinja2 \u0627\u0632 \u06cc\u06a9 \u0634\u06cc \u0645\u0631\u06a9\u0632\u06cc\u060c Template Environment \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0646\u0645\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u0622\u0646 \u0627\u0634\u06cc\u0627\u0621 \u0648 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u0642\u0627\u0644\u0628\u200c\u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><code>PackageLoader<\/code>: \u0627\u06cc\u0646 Jinja2 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0642\u0627\u0644\u0628 \u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><code>autoescape<\/code>: \u0628\u0631\u0627\u06cc \u06a9\u0627\u0647\u0634 \u062a\u0647\u062f\u06cc\u062f\u0627\u062a \u0627\u0645\u0646\u06cc\u062a\u06cc \u0645\u0627\u0646\u0646\u062f \u062d\u0645\u0644\u0627\u062a \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u06cc\u0646 \u0633\u0627\u06cc\u062a\u06cc (XSS) \u0648 \u0645\u062d\u0627\u0641\u0638\u062a \u0627\u0632 \u06a9\u062f \u062e\u0648\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u062d\u06cc\u0646 \u0631\u0646\u062f\u0631 HTML \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631\u060c \u0627\u0632 \u0645\u0642\u0627\u062f\u06cc\u0631 (\u06a9\u0647 \u0628\u0647 \u0642\u0627\u0644\u0628 \u0627\u06cc\u0645\u06cc\u0644 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f) \u0641\u0631\u0627\u0631 \u06a9\u0646\u06cc\u062f. <code>autoescape<\/code>. \u06cc\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0631\u062f \u06a9\u062f\u0647\u0627\u06cc \u0645\u062e\u0631\u0628 \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a\u060c <code>autoescape<\/code> \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a <code>True<\/code> \u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0641\u0631\u0627\u0631. \u0627\u06af\u0631 \u0622\u0646 \u0631\u0627 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u06cc\u062f <code>False<\/code>\u060c Jinja2 \u0646\u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u0632 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0641\u0631\u0627\u0631 \u06a9\u0646\u062f \u0648 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062d\u0645\u0644\u0627\u062a XSS \u0631\u062e \u062f\u0647\u062f. \u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0641\u0631\u0627\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631\u060c \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f <code>autoescape<\/code> \u0628\u0647 <code>True<\/code>:<\/p>\n<p><code>env = Environment(loader=PackageLoader(\"myapp\"), autoescape=True)<\/code><\/p>\n<\/li>\n<\/ul>\n<h3 id=\"loadyourtemplate\"><span class=\"ez-toc-section\" id=\"%d9%82%d8%a7%d9%84%d8%a8_%d8%ae%d9%88%d8%af_%d8%b1%d8%a7_%d8%a8%d8%a7%d8%b1%da%af%db%8c%d8%b1%db%8c_%da%a9%d9%86%db%8c%d8%af\"><\/span>\u0642\u0627\u0644\u0628 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u062a\u0645\u0627\u0645\u060c \u06cc\u06a9 \u0645\u062d\u06cc\u0637 \u0642\u0627\u0644\u0628 \u0628\u0627 \u06cc\u06a9 \u0628\u0627\u0631\u06af\u0630\u0627\u0631 \u0642\u0627\u0644\u0628 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u062f\u0631 \u067e\u0648\u0634\u0647 \u0642\u0627\u0644\u0628 \u0645\u0627\u0698\u0648\u0644 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u062f.<\/p>\n<p>\u0633\u067e\u0633\u060c \u0642\u0627\u0644\u0628 \u0627\u06cc\u0645\u06cc\u0644 HTML \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0648\u0634 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f &#8211; <code>get_template()<\/code>. \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0627\u0644\u06af\u0648\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0634\u0645\u0627 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0686\u0646\u062f\u06cc\u0646 \u0645\u0632\u06cc\u062a \u0645\u0627\u0646\u0646\u062f \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0648\u0631\u0627\u062b\u062a \u0642\u0627\u0644\u0628 \u0627\u06cc\u0645\u06cc\u0644 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u0644\u06af\u0648 \u062f\u0631 \u0686\u0646\u062f\u06cc\u0646 \u0633\u0646\u0627\u0631\u06cc\u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p><code>template1 = env.get_template(\"myemailtemplate.html\")<\/code><\/p>\n<h3 id=\"renderthetemplate\"><span class=\"ez-toc-section\" id=\"%d9%82%d8%a7%d9%84%d8%a8_%d8%b1%d8%a7_%d8%b1%d9%86%d8%af%d8%b1_%da%a9%d9%86%db%8c%d8%af\"><\/span>\u0642\u0627\u0644\u0628 \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0627\u0644\u06af\u0648\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u0627\u0632 \u0631\u0648\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f &#8211; <code>render()<\/code><\/p>\n<p><code>html1 = template1.render()<\/code><\/p>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0642\u0627\u0644\u0628\u200c\u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 HTML \u067e\u0648\u06cc\u0627 \u0647\u0633\u062a\u0646\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0631\u06af\u0648\u0645\u0627\u0646\u200c\u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u0648\u0627\u0698\u0647 (kwargs) \u0631\u0627 \u0628\u0627 Jinja2 \u0628\u0647 <code>render<\/code> \u062a\u0627\u0628\u0639 \u0633\u067e\u0633 kwargs \u0628\u0647 \u0627\u0644\u06af\u0648\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0634\u0645\u0627 \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0631\u0648\u0634 \u0627\u0631\u0627\u0626\u0647 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u062e\u0648\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0645\u0642\u0635\u062f &#8211; &#8220;Jon Doe&#8221; &#8211; \u062f\u0631 \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p><code>html1 = template1.render(name=\"Jon Doe\")<\/code><\/p>\n<p><strong>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u06a9\u062f \u06a9\u0627\u0645\u0644 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0646\u06af\u0627\u0647 \u06a9\u0646\u06cc\u0645:<\/strong><\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">from<\/span> jinja2 <span class=\"hljs-keyword\">import<\/span> Environment, PackageLoader, select_autoescape\n\nenv = Environment(loader=PackageLoader(<span class=\"hljs-string\">\"email_project\"<\/span>, <span class=\"hljs-string\">\"html_emailtemp\"<\/span>),\n                  autoescape=select_autoescape((<span class=\"hljs-string\">\"html\"<\/span>, <span class=\"hljs-string\">\"xml\"<\/span>)))\n\ntemplate1 = env.get_template(<span class=\"hljs-string\">\"myemailtemplate.html\"<\/span>)\nhtml1 = template1.render()\n<\/code><\/pre>\n<h2 id=\"sendingtheemail\"><span class=\"ez-toc-section\" id=\"%d8%a7%d8%b1%d8%b3%d8%a7%d9%84_%d8%a7%db%8c%d9%85%db%8c%d9%84\"><\/span>\u0627\u0631\u0633\u0627\u0644 \u0627\u06cc\u0645\u06cc\u0644<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0627\u06cc\u0645\u06cc\u0644\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u067e\u0631\u0648\u062a\u06a9\u0644 \u0633\u0627\u062f\u0647 \u062f\u0631 \u0633\u0637\u062d \u0628\u0631\u0646\u0627\u0645\u0647 &#8211; \u067e\u0631\u0648\u062a\u06a9\u0644 \u0627\u0646\u062a\u0642\u0627\u0644 \u0646\u0627\u0645\u0647 \u0633\u0627\u062f\u0647 (SMTP) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u067e\u0631\u0648\u062a\u06a9\u0644 \u0627\u0631\u0633\u0627\u0644 \u0627\u06cc\u0645\u06cc\u0644 \u0631\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f process \u0648 \u0631\u0648\u0634 \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc\u060c \u0627\u0631\u0633\u0627\u0644 \u0648 \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u06cc\u0646 \u0633\u0631\u0648\u0631\u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0645\u0628\u062f\u0627 \u0648 \u0645\u0642\u0635\u062f \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c \u0645\u0627 \u0627\u06cc\u0645\u06cc\u0644\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u062a\u0648\u0646 \u0627\u0632 \u0637\u0631\u06cc\u0642 SMTP \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645\u060c \u0632\u06cc\u0631\u0627 \u067e\u0627\u06cc\u062a\u0648\u0646 \u06cc\u06a9 \u0645\u0627\u0698\u0648\u0644 \u062f\u0627\u062e\u0644\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0627\u06cc\u0645\u06cc\u0644 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0627\u06cc\u0645\u06cc\u0644\u060c \u067e\u0627\u06cc\u062a\u0648\u0646 \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0628\u0647 \u0646\u0627\u0645 &#8216;smtplib&#8217; \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u062a\u0639\u0627\u0645\u0644 \u0628\u062f\u0648\u0646 \u0632\u062d\u0645\u062a \u0628\u0627 \u067e\u0631\u0648\u062a\u06a9\u0644 SMTP \u0631\u0627 \u062a\u0633\u0647\u06cc\u0644 \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639:<\/p>\n<p><strong>&#8216;smtplib&#8217; \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/strong>: \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u067e\u0627\u06cc\u062a\u0648\u0646 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u0631\u0648\u06cc \u0633\u06cc\u0633\u062a\u0645 \u0634\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646\u060c import &#8216;smtplib&#8217; \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0627\u062a\u0635\u0627\u0644 \u0628\u0627 \u0633\u0631\u0648\u0631 \u0627\u06cc\u0645\u06cc\u0644.<\/p>\n<p><code>import smtplib<\/code><\/p>\n<p><strong>\u067e\u0627\u0631\u0627\u0645\u062a\u0631 HTML \u062e\u0648\u062f \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f<\/strong>: \u067e\u0627\u0631\u0627\u0645\u062a\u0631 HTML \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0634\u06cc mail \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0627\u0644\u06af\u0648\u06cc HTML \u062e\u0648\u062f \u0631\u0627 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u06cc\u062f\u060c \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0627\u06cc\u0645\u06cc\u0644 \u062f\u0633\u062a\u0648\u0631 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0627\u0644\u06af\u0648 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u062f \u06a9\u0627\u0645\u0644 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0622\u0645\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<pre><code class=\"hljs\"><span class=\"hljs-keyword\">import<\/span> smtplib\n\n<span class=\"hljs-keyword\">from<\/span> email.mime.text <span class=\"hljs-keyword\">import<\/span> MIMEText    \n\n<span class=\"hljs-keyword\">from<\/span> jinja2 <span class=\"hljs-keyword\">import<\/span> Template   \n\nsender = <span class=\"hljs-string\">\"&lt;a href='mailto:(email\u00a0protected)' target='_blank' rel='noopener noreferrer'&gt;(email\u00a0protected)&lt;\/a&gt;\"<\/span>\n\nrecipient = <span class=\"hljs-string\">\"&lt;a href='mailto:(email\u00a0protected)' target='_blank' rel='noopener noreferrer'&gt;(email\u00a0protected)&lt;\/a&gt;\"<\/span>\n\nsubject = <span class=\"hljs-string\">\"Your order is confirmed!\"<\/span>\n\n<span class=\"hljs-keyword\">with<\/span> <span class=\"hljs-built_in\">open<\/span>(<span class=\"hljs-string\">'myemailtemplate.html'<\/span>, <span class=\"hljs-string\">'r'<\/span>) <span class=\"hljs-keyword\">as<\/span> f:\n    template1 = Template(f.read())\n\n\n\nhtml_emailtemp = <span class=\"hljs-string\">\"\"\"\n&lt;!DOCTYPE html&gt;\n&lt;html lang='en'&gt;\n&lt;head&gt;\n    &lt;meta charset='UTF-8'&gt;\n    &lt;meta name='viewport' content='width=device-width, initial-scale=1'&gt;\n\n    &lt;title&gt;HTML Email Template&lt;\/title&gt;\n\n    &lt;style type='text\/css'&gt;   # Adding the CSS\n        body { margin: 0; padding: 0; background-color: #f4f4f4; font-family: Arial, sans-serif; }\n        table { border-collapse: collapse; }\n        .mailcontainer { width: 100%; max-width: 600px; margin: auto; background-color: #ffffff; }\n        .header { background-color: #1c3f60; color: #ffffff; text-align: center; padding: 20px; }\n        .body { padding: 20px; font-size: 16px; line-height: 1.6; background-color: #1c3f60; color: #7ed957; }\n        .footer { background-color: #ff6100; color: #000000; text-align: center; padding: 20px; }\n        .cta { background-color: #8c52ff; padding: 10px 20px; border-radius: 5px; color: #ffffff; text-decoration: none; font-weight: bold; }\n\n        @media screen and (max-width: 600px) {\n            .container {\n                width: 100% !important;\n                padding: 10px !important;\n            }\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;table width='100%' cellpadding='0' cellspacing='0'&gt;\n        &lt;tr&gt;\n            &lt;td align='center'&gt;\n                &lt;table class='container' width='600' cellpadding='0' cellspacing='0'&gt;\n                    &lt;!-- Header --&gt;\n                    &lt;tr&gt;\n                        &lt;td class='header'&gt;\n                            &lt;h1&gt;Your order is confirmed&lt;\/h1&gt;\n                        &lt;\/td&gt;\n                    &lt;\/tr&gt;\n                    &lt;!-- Body --&gt;\n                    &lt;tr&gt;\n                        &lt;td class='body'&gt;\n                            &lt;p&gt;The estimated delivery date is 22nd August 1403.&lt;\/p&gt;\n                            &lt;p style='font-size: 16px; color: blue;'&gt;Styled paragraph.&lt;\/p&gt;\n                            &lt;table width='100%' cellpadding='0' cellspacing='0' style='border: 1px solid #1c3f60; padding: 20px;'&gt;\n                                &lt;tr&gt;\n                                    &lt;td align='center'&gt;\n                                        &lt;h1 style='color: #7ed957;'&gt;Hi, Jane!&lt;\/h1&gt;  \n                                        &lt;p style='font-size: 16px; color: #ffde59;'&gt;\n                                            Thank you for being our valuable customer!\n                                        &lt;\/p&gt;\n                                    &lt;\/td&gt;\n                                &lt;\/tr&gt;\n                            &lt;\/table&gt;\n                            &lt;table cellpadding='0' cellspacing='0' style='margin: auto;'&gt;\n                                &lt;tr&gt;\n                                    &lt;td align='center' style='background-color: #8c52ff; padding: 10px 20px; border-radius: 5px;'&gt;\n                                        &lt;a href='https:\/\/www.mydomain.com' target='_blank' rel='noopener noreferrer' style='color: #ffffff; text-decoration: none; font-weight: bold;'&gt;Get a 30-day free trial&lt;\/a&gt;\n                                    &lt;\/td&gt;\n                                &lt;\/tr&gt;\n                            &lt;\/table&gt;\n                        &lt;\/td&gt;\n                    &lt;\/tr&gt;\n                    &lt;!-- Footer --&gt;\n                    &lt;tr&gt;\n                        &lt;td style='background-color: #ff6100; color: #000000; text-align: center; padding: 20px;'&gt;\n                            &lt;p&gt;For additional help, contact us at (email\u00a0protected)&lt;\/p&gt;\n                        &lt;\/td&gt;\n                    &lt;\/tr&gt;\n                &lt;\/table&gt;\n            &lt;\/td&gt;\n        &lt;\/tr&gt;\n    &lt;\/table&gt;\n&lt;\/body&gt;\n\n&lt;\/html&gt;\n\"\"\"<\/span>\n\ntemplate1 = Template(html_emailtemp)\nhtml1 = template1.render(name=<span class=\"hljs-string\">\"Jon Doe\"<\/span>)\n\n\n\nmessage = MIMEText(html1, <span class=\"hljs-string\">'html'<\/span>)\nmessage(<span class=\"hljs-string\">'Subject'<\/span>) = subject\nmessage(<span class=\"hljs-string\">'From'<\/span>) = sender\nmessage(<span class=\"hljs-string\">'To'<\/span>) = recipient\n\n\n\n<span class=\"hljs-keyword\">with<\/span> smtplib.SMTP_SSL(<span class=\"hljs-string\">'smtp.gmail.com'<\/span>, <span class=\"hljs-number\">465<\/span>) <span class=\"hljs-keyword\">as<\/span> server:\n    server.login(username, password)\n    server.sendmail(sender, recipient, message.as_string())\n<\/code><\/pre>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li><code>sender<\/code>: \u0622\u062f\u0631\u0633 \u0627\u06cc\u0645\u06cc\u0644 \u0641\u0631\u0633\u062a\u0646\u062f\u0647<\/li>\n<li><code>recipient<\/code>: \u0622\u062f\u0631\u0633 \u0627\u06cc\u0645\u06cc\u0644 \u06af\u06cc\u0631\u0646\u062f\u0647<\/li>\n<li><code>from email.mime.text import MIMEText<\/code>: \u0628\u0647 \u0627\u06cc\u0646 \u0639\u0627\u062f\u062a \u0634\u062f\u0647 \u0627\u0633\u062a import \u06a9\u0644\u0627\u0633 MIMEText\u060c \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0627\u0644\u06af\u0648\u06cc HTML \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0645\u06cc\u0644 \u067e\u06cc\u0648\u0633\u062a \u06a9\u0646\u06cc\u062f.<\/li>\n<li><code>smtplib.SMTP_SSL('smtp.gmail.com', 465) as server:<\/code>: \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u067e\u0648\u0631\u062a 465 \u0628\u0627 \u0633\u0631\u0648\u0631 SMTP \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u06cc\u0645\u06cc\u0644 \u0634\u0645\u0627 (Gmail) \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0631\u0642\u0631\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06af\u0631 \u0627\u0632 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 SMTP \u062f\u06cc\u06af\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0627\u0632 \u0646\u0627\u0645 \u062f\u0627\u0645\u0646\u0647 \u0622\u0646\u0647\u0627 \u0645\u0627\u0646\u0646\u062f smtp.domain.com \u0628\u0627 \u0634\u0645\u0627\u0631\u0647 \u067e\u0648\u0631\u062a \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u062a\u0635\u0627\u0644 \u0628\u0627 SSL \u0627\u06cc\u0645\u0646 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<li><code>server.login(username, password)<\/code>: \u0627\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u062e\u0648\u062f \u0648\u0627\u0631\u062f \u0633\u0631\u0648\u0631 \u0627\u06cc\u0645\u06cc\u0644 \u0634\u0648\u06cc\u062f.<\/li>\n<li><code>server.sendemail(sender, recipient, message.as_string())<\/code>: \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0627\u06cc\u0645\u06cc\u0644 HTML \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<h3 id=\"testing\"><span class=\"ez-toc-section\" id=\"%d8%aa%d8%b3%d8%aa_%da%a9%d8%b1%d8%af%d9%86\"><\/span>\u062a\u0633\u062a \u06a9\u0631\u062f\u0646<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0627\u0631\u0633\u0627\u0644 \u0627\u06cc\u0645\u06cc\u0644 HTML \u062e\u0648\u062f\u060c \u0622\u0646 \u0631\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0645\u062a\u0648\u062c\u0647 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0645\u062e\u062a\u0644\u0641 \u0686\u06af\u0648\u0646\u0647 CSS \u0648 HTML \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f. \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u0633\u062a \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0645\u06cc\u0644 \u0631\u0648\u06cc \u0627\u0633\u06cc\u062f\u060c \u062a\u0648\u0631\u0646\u0633\u0644 \u0648 \u063a\u06cc\u0631\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u06a9\u0646\u0646\u062f.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"%d9%86%d8%aa%db%8c%d8%ac%d9%87_%da%af%db%8c%d8%b1%db%8c\"><\/span>\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0642\u0627\u0644\u0628 \u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0627 HTML \u0648 CSS \u062f\u0631 \u067e\u0627\u06cc\u062a\u0648\u0646\u060c \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0647\u0627\u06cc \u0628\u0627\u0644\u0627 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f. \u0627\u0628\u062a\u062f\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 \u0642\u0627\u0644\u0628 \u0627\u06cc\u0645\u06cc\u0644 HTML \u062e\u0648\u062f \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f\u060c \u0628\u0647 \u0627\u06cc\u0645\u06cc\u0644 \u0647\u0627 \u0628\u0627 CSS \u0633\u0628\u06a9 \u062f\u0647\u06cc\u062f \u0648 \u0633\u067e\u0633 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06af\u06cc\u0631\u0646\u062f\u06af\u0627\u0646 \u062e\u0648\u062f \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f. \u0647\u0645\u06cc\u0634\u0647 \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0642\u0627\u0644\u0628 \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 HTML \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u062f\u0627\u0648\u0644 \u0633\u0627\u062f\u0647 \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f. \u0627\u0641\u0632\u0648\u062f\u0646 \u06cc\u06a9 \u067e\u06cc\u0648\u0646\u062f \u0627\u06cc\u0645\u06cc\u0644 \u062f\u0631 HTML \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u06cc\u06a9 \u0627\u06cc\u0645\u06cc\u0644 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062f\u0631 \u0633\u0631\u0648\u06cc\u0633 \u06af\u06cc\u0631\u0646\u062f\u0647 \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0648\u062f \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0622\u062f\u0631\u0633 \u0627\u06cc\u0645\u06cc\u0644 \u062e\u0627\u0635 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/div>\n<p><br \/>\n<br \/>\u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u062f\u0631 1403-08-21 22:14:07<br \/>\n<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-center kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:&quot;17788&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628&quot;,&quot;legend&quot;:&quot;0\\\/5 (0 \u0631\u0627\u06cc)&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;\u0633\u0627\u062e\u062a \u0642\u0627\u0644\u0628 \u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0627 HTML \u0648 CSS \u062f\u0631 \u067e\u0627\u06cc\u062a\u0648\u0646&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ({count} \u0631\u0627\u06cc)&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-left: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            <span class=\"kksr-muted\">\u0627\u0645\u062a\u06cc\u0627\u0632 \u0634\u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628<\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">\u0632\u0645\u0627\u0646 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u0645\u0637\u0627\u0644\u0639\u0647: <\/span> <span class=\"rt-time\"> 9<\/span> <span class=\"rt-label rt-postfix\">\u062f\u0642\u06cc\u0642\u0647<\/span><\/span>\u06cc\u06a9 \u0627\u06cc\u0645\u06cc\u0644 HTML \u0627\u0632 \u06a9\u062f HTML \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0637\u0631\u0627\u062d\u06cc \u0622\u0646 \u0633\u0646\u06af\u06cc\u0646 \u0627\u0633\u062a \u0648 \u0634\u0628\u06cc\u0647 \u06cc\u06a9 \u0648\u0628 \u0645\u062f\u0631\u0646 \u0627\u0633\u062a page\u063a\u0646\u06cc \u0627\u0632 \u0639\u0646\u0627\u0635\u0631 \u0628\u0635\u0631\u06cc \u0645\u0627\u0646\u0646\u062f \u062a\u0635\u0627\u0648\u06cc\u0631\u060c \u0648\u06cc\u062f\u06cc\u0648\u0647\u0627 \u0648 \u063a\u06cc\u0631\u0647\u060c \u0628\u0631\u0627\u06cc \u062a\u0623\u06a9\u06cc\u062f \u0628\u0631 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644. \u0633\u0627\u062e\u062a \u0642\u0627\u0644\u0628 \u0647\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0628\u0631\u0646\u062f \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u0627\u0647\u062f\u0627\u0641 \u0645\u062e\u062a\u0644\u0641 \u0628\u0627\u0632\u0627\u0631\u06cc\u0627\u0628\u06cc \u0627\u06cc\u0645\u06cc\u0644\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0627\u0632 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u062c\u062f\u06cc\u062f\u060c [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1743,620],"tags":[2914,21,1778,1779,1753,1744,2750,2134,1755,3826,2600,1752,1745,1785],"class_list":["post-17788","post","type-post","status-publish","format-standard","hentry","category-python","category-programming","tag-css","tag-html","tag-1778","tag-1779","tag-1753","tag-1744","tag-2750","tag-2134","tag-1755","tag-3826","tag-2600","tag-1752","tag-1745","tag-1785"],"acf":[],"_links":{"self":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/17788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/comments?post=17788"}],"version-history":[{"count":0,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/posts\/17788\/revisions"}],"wp:attachment":[{"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/media?parent=17788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/categories?post=17788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rasanegaar.com\/blog\/wp-json\/wp\/v2\/tags?post=17788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}