{"id":39258,"date":"2024-05-12T17:26:23","date_gmt":"2024-05-12T12:56:23","guid":{"rendered":"https:\/\/wpadmin.maktabkhooneh.org\/mag\/?p=39258"},"modified":"2026-04-26T11:02:17","modified_gmt":"2026-04-26T07:32:17","slug":"slider-with-js","status":"publish","type":"post","link":"https:\/\/maktabkhooneh.org\/mag\/slider-with-js\/","title":{"rendered":"\u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a &#8211; \u0622\u0645\u0648\u0632\u0634 \u0639\u0645\u0644\u06cc \u0648 \u062c\u0630\u0627\u0628"},"content":{"rendered":"\n<p>\u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0648\u0628\u060c \u0627\u0648\u0644\u06cc\u0646 \u062a\u0623\u062b\u06cc\u0631\u06af\u0630\u0627\u0631\u06cc \u062d\u0631\u0641 \u0627\u0648\u0644 \u0631\u0627 \u0645\u06cc\u200c\u0632\u0646\u062f. \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u062a\u0646\u0647\u0627 \u0686\u0646\u062f \u062b\u0627\u0646\u06cc\u0647 \u0641\u0631\u0635\u062a \u062f\u0627\u0631\u062f \u062a\u0627 \u062a\u0648\u062c\u0647 \u0645\u062e\u0627\u0637\u0628 \u0631\u0627 \u062c\u0644\u0628 \u06a9\u0646\u062f \u0648 \u0627\u0648 \u0631\u0627 \u0628\u0647 \u06af\u0634\u062a\u200c\u0648\u06af\u0630\u0627\u0631 \u062a\u0631\u063a\u06cc\u0628 \u0646\u0645\u0627\u06cc\u062f. \u06cc\u06a9\u06cc \u0627\u0632 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0645\u0624\u062b\u0631 \u0628\u0631\u0627\u06cc \u062a\u062d\u062a \u062a\u0623\u062b\u06cc\u0631 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0628\u0627\u0632\u062f\u06cc\u062f\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u062f\u0631 \u0647\u0645\u0627\u0646 \u0646\u06af\u0627\u0647 \u0627\u0648\u0644\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\u0647\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u062a\u0627 \u0686\u0646\u062f\u06cc\u0646 \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0628\u0627 \u0648 \u06af\u06cc\u0631\u0627 \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0686\u0631\u062e\u0634\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f \u0648 \u0628\u0647\u200c\u0627\u06cc\u0646\u200c\u062a\u0631\u062a\u06cc\u0628\u060c \u062f\u0627\u0633\u062a\u0627\u0646 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06a9\u0644 \u0631\u0648\u0627\u06cc\u062a \u06a9\u0646\u06cc\u062f. \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0627\u0632 \u0622\u0646 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0641\u06a9\u0631\u0634 \u0631\u0627 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc \u062c\u0627\u0645\u0639\u060c \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0628\u0647 \u0634\u0645\u0627 \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0633\u0647 \u0631\u06a9\u0646 \u0627\u0635\u0644\u06cc \u0648\u0628 \u06cc\u0639\u0646\u06cc HTML \u060cCSS \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0622\u0645\u0648\u0632\u0634 \u062f\u0647\u06cc\u0645. \u067e\u0633 \u0627\u06af\u0631 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u06cc\u062f \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u067e\u0648\u06cc\u0627\u062a\u0631 \u0648 \u062c\u0630\u0627\u0628\u200c\u062a\u0631 \u0627\u0632 \u0647\u0645\u06cc\u0634\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0628\u0627 \u0645\u0627 \u0647\u0645\u0631\u0627\u0647 \u0628\u0627\u0634\u06cc\u062f!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0686\u06cc\u0633\u062a\u061f<\/h2>\n\n\n\n<p>\u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 (Image Slider) \u06cc\u0627 \u0686\u0631\u062e\u0627\u0646\u0646\u062f\u0647 \u062a\u0635\u0648\u06cc\u0631 (Image Carousel)\u060c \u0631\u0648\u0634\u06cc \u06a9\u0627\u0631\u0622\u0645\u062f \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0686\u0646\u062f\u06cc\u0646 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0645\u062a\u0648\u0627\u0644\u06cc \u062f\u0631 \u06cc\u06a9 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0627\u0633\u062a. \u0627\u06cc\u0646 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627 \u062c\u0644\u0648\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0633\u0644\u0627\u06cc\u062f \u0634\u062f\u0646\u060c \u0645\u062d\u0648 \u0634\u062f\u0646 \u06cc\u0627 \u062d\u0631\u06a9\u062a \u0628\u0647 \u0637\u0631\u0641\u06cc\u0646\u060c \u062c\u0627\u0628\u062c\u0627 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0648 \u062a\u0648\u062c\u0647 \u0645\u062e\u0627\u0637\u0628 \u0631\u0627 \u0628\u0647 \u062e\u0648\u062f \u062c\u0644\u0628 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n\n\n<div class=\"jet-listing-grid--56206\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-learn cb-ud1ng69u\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\r\n<div class=\"zht-learn-card\">\r\n    <div class=\"zht-learn-title-section\">\r\n        <div class=\"zht-learn-card-icon\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\r\n                <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" \/>\r\n            <\/svg>\r\n        <\/div>\r\n        \r\n        <!-- \u0639\u0646\u0648\u0627\u0646 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0628\u0647 \u0644\u06cc\u0646\u06a9 -->\r\n        <a href=\"https:\/\/maktabkhooneh.org\/learn\/java-script\/\" class=\"zht-learn-card-title\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n            \u062f\u0648\u0631\u0647\u200c\u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a        <\/a>\r\n    <\/div>\r\n\r\n    <!-- \u062f\u06a9\u0645\u0647 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0628\u0647 \u062a\u06af button -->\r\n    <!-- \u0627\u0632 onclick \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u062a\u0627 \u0628\u0647 \u0645\u062d\u0636 \u06a9\u0644\u06cc\u06a9 \u0644\u06cc\u0646\u06a9 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u062f -->\r\n    <button class=\"zht-learn-card-btn\" data-course-url=\"https:\/\/maktabkhooneh.org\/learn\/java-script\/\" onclick=\"window.open(this.getAttribute('data-course-url'), '_blank');\">\r\n        \u0634\u0631\u0648\u0639 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc\r\n    <\/button>\r\n<\/div><\/div><\/div><\/div>\n\n\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0632\u06cc\u0628\u0627 \u0648 \u06af\u06cc\u0631\u0627 \u062f\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0637\u0648\u0631 \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u062f\u0631 \u062c\u0630\u0628 \u0628\u0627\u0632\u062f\u06cc\u062f\u06a9\u0646\u0646\u062f\u0647 \u0648 \u0628\u0627\u0644\u0627 \u0628\u0631\u062f\u0646 \u0646\u0631\u062e \u062a\u0639\u0627\u0645\u0644 (Engagement Rate) \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u0645\u0624\u062b\u0631 \u0628\u0627\u0634\u062f. \u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u062e\u0627\u0637\u0628 \u0648\u0627\u0631\u062f \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0628\u0627 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062c\u0630\u0627\u0628\u06cc \u0631\u0648\u0628\u0631\u0648 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062c\u062f\u06cc\u062f\u060c \u062a\u062e\u0641\u06cc\u0641\u0627\u062a \u0648\u06cc\u0698\u0647 \u06cc\u0627 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627 \u06a9\u06cc\u0641\u06cc\u062a\u06cc \u0627\u0632 \u062e\u062f\u0645\u0627\u062a \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u06af\u0630\u0627\u0631\u062f. \u0628\u0647 \u0637\u0648\u0631 \u0642\u0637\u0639\u060c \u0627\u062d\u062a\u0645\u0627\u0644 \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0631\u0627\u06cc \u0645\u062f\u062a\u200c\u0632\u0645\u0627\u0646 \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u0628\u0627\u0642\u06cc \u0628\u0645\u0627\u0646\u062f \u0648 \u0628\u0647 \u062f\u06cc\u06af\u0631 \u0628\u062e\u0634\u200c\u0647\u0627 \u0633\u0631 \u0628\u0632\u0646\u062f\u060c \u0627\u0641\u0632\u0627\u06cc\u0634 \u067e\u06cc\u062f\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0627\u0632 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0627\u0647\u0645\u06cc\u062a \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0686\u0631\u0627 \u0628\u0627\u06cc\u062f \u0627\u0632 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061f<\/h3>\n\n\n\n<p>\u062f\u0644\u0627\u06cc\u0644 \u0645\u062a\u0639\u062f\u062f\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0627\u0646\u062a\u062e\u0627\u0628 \u0647\u0648\u0634\u0645\u0646\u062f\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"747\" src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/433eeb62-0afa-4bd8-99be-a436af4803de.jpg\" alt=\"\u0686\u0631\u0627 \u0628\u0627\u06cc\u062f \u0627\u0632 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061f\" class=\"wp-image-39260\" title=\"\" srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/433eeb62-0afa-4bd8-99be-a436af4803de.jpg 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/433eeb62-0afa-4bd8-99be-a436af4803de-300x219.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/433eeb62-0afa-4bd8-99be-a436af4803de-768x560.jpg.webp 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p>\u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0628\u0647 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0627\u06cc\u0646 \u062f\u0644\u0627\u06cc\u0644 \u0627\u0634\u0627\u0631\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u062c\u0644\u0628\u200c\u062a\u0648\u062c\u0647 \u0645\u062e\u0627\u0637\u0628:<\/strong> \u0647\u0645\u0627\u0646\u200c\u0637\u0648\u0631 \u06a9\u0647 \u067e\u06cc\u0634\u200c\u062a\u0631 \u0627\u0634\u0627\u0631\u0647 \u0634\u062f\u060c \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0647\u0645\u0627\u0646 \u0646\u06af\u0627\u0647 \u0627\u0648\u0644\u060c \u062a\u0648\u062c\u0647 \u0645\u062e\u0627\u0637\u0628 \u0631\u0627 \u0628\u0647 \u062e\u0648\u062f \u062c\u0644\u0628 \u06a9\u0646\u062f. \u062a\u0635\u0627\u0648\u06cc\u0631 \u0645\u062a\u062d\u0631\u06a9 \u0648 \u0628\u0627\u06a9\u06cc\u0641\u06cc\u062a\u060c \u0628\u0647 \u0637\u0648\u0631 \u0637\u0628\u06cc\u0639\u06cc \u0686\u0634\u0645 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u062e\u0648\u062f \u062e\u06cc\u0631\u0647 \u0645\u06cc\u200c\u0633\u0627\u0632\u0646\u062f \u0648 \u0627\u0648 \u0631\u0627 \u062a\u0631\u063a\u06cc\u0628 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u062a\u0627 \u062f\u0631 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u0628\u06cc\u0634\u062a\u0631 \u06a9\u0627\u0648\u0634 \u06a9\u0646\u062f.<\/li>\n\n\n\n<li><strong>\u0628\u0647\u0628\u0648\u062f \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc:<\/strong> \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0628\u0647\u0628\u0648\u062f \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc (User Experience) \u062f\u0631 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u06a9\u0646\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0628\u0632\u0627\u0631\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647\u200c\u0631\u0627\u062d\u062a\u06cc \u0686\u0646\u062f\u06cc\u0646 \u062a\u0635\u0648\u06cc\u0631 \u06cc\u0627 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0647\u0645 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0641\u0636\u0627\u06cc \u0646\u0633\u0628\u062a\u0627\u064b \u06a9\u0648\u0686\u06a9 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u062a\u0627 \u06a9\u0627\u0631\u0628\u0631 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631\u062f\u0646 \u0635\u0641\u062d\u0647 (Scrolling) \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646\u060c \u0628\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u0648\u0631\u062f\u0646\u0638\u0631 \u062e\u0648\u062f \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u062f.<\/li>\n\n\n\n<li><strong>\u0628\u0631\u062c\u0633\u062a\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc:<\/strong> \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u062e\u0648\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062c\u062f\u06cc\u062f\u060c \u0645\u0642\u0627\u0644\u0627\u062a \u067e\u0631\u0628\u0627\u0632\u062f\u06cc\u062f\u060c \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0622\u062a\u06cc \u0648 \u063a\u06cc\u0631\u0647\u060c \u062a\u0623\u06a9\u06cc\u062f \u0648\u06cc\u0698\u0647\u200c\u0627\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f. \u0628\u0627 \u0628\u0631\u062c\u0633\u062a\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u06cc\u0646 \u0645\u062d\u062a\u0648\u0627 \u062f\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\u060c \u0634\u0627\u0646\u0633 \u062f\u06cc\u062f\u0647 \u0634\u062f\u0646 \u0622\u0646\u200c\u0647\u0627 \u062a\u0648\u0633\u0637 \u0645\u062e\u0627\u0637\u0628 \u0631\u0627 \u0628\u0647 \u0645\u06cc\u0632\u0627\u0646 \u0642\u0627\u0628\u0644\u200c\u062a\u0648\u062c\u0647\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u06cc\u062f.<\/li>\n\n\n\n<li><strong>\u0627\u06cc\u062c\u0627\u062f \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u06cc \u067e\u0648\u06cc\u0627\u062a\u0631:<\/strong> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631\u060c \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u062d\u0627\u0644\u062a \u0627\u06cc\u0633\u062a\u0627 \u062e\u0627\u0631\u062c \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0647 \u0622\u0646 \u067e\u0648\u06cc\u0627\u06cc\u06cc \u0648 \u062a\u062d\u0631\u06a9 \u0645\u06cc\u200c\u0628\u062e\u0634\u062f. \u0627\u06cc\u0646 \u062a\u062d\u0631\u06a9 \u0648 \u067e\u0648\u06cc\u0627\u06cc\u06cc \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062d\u0633 \u062e\u0648\u0634\u0627\u06cc\u0646\u062f\u06cc \u0631\u0627 \u0628\u0647 \u0645\u062e\u0627\u0637\u0628 \u0627\u0644\u0642\u0627 \u06a9\u0646\u062f \u0648 \u0627\u0648 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062f\u062a\u200c\u0632\u0645\u0627\u0646 \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u0646\u06af\u0647 \u062f\u0627\u0631\u062f.<\/li>\n\n\n\n<li><strong>\u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u0627 \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641:<\/strong> \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0628\u0647\u200c\u06af\u0648\u0646\u0647\u200c\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u06a9\u0647 \u062f\u0631 \u062a\u0645\u0627\u0645\u06cc \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631\u0647\u0627\u06cc \u0631\u0648\u0645\u06cc\u0632\u06cc\u060c \u062a\u0628\u0644\u062a\u200c\u0647\u0627 \u0648 \u062a\u0644\u0641\u0646\u200c\u0647\u0627\u06cc \u0647\u0645\u0631\u0627\u0647\u060c \u0628\u0647\u200c\u062f\u0631\u0633\u062a\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u0646\u062f. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u062a\u0627 \u0645\u062e\u0627\u0637\u0628\u0627\u0646 \u0634\u0645\u0627 \u0628\u0627 \u0647\u0631 \u0646\u0648\u0639 \u0648\u0633\u06cc\u0644\u0647\u200c\u0627\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u062e\u062a\u06cc\u0627\u0631 \u062f\u0627\u0631\u0646\u062f\u060c \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647\u200c\u0631\u0627\u062d\u062a\u06cc \u0627\u0632 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u0627\u06cc\u0646\u062f.<\/li>\n<\/ul>\n\n\n<div class=\"jet-listing-grid--50121\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-course cb-fb2qc30r\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\n<div class=\"course-card\">\n    <div class=\"course-card-img\">\n        <img decoding=\"async\" \n            data-src=\"https:\/\/media1.maktabkhooneh.org\/CACHE\/images\/courses\/images\/javascript-es-series_1403-08-16-164352163\/97c6aa2e4add56ea5373fa13a8178942.webp?expire=4893471932&#038;token=a299c61715e09470f165388b87e60951&#038;md5=opnGFxXglHDxZTiLh-YJUQ==\" \n            alt=\"\u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a (JavaScript)\" \n            title=\"\u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a (JavaScript)\" \n            width=\"100%\" \n            height=\"auto\"\n           \n         src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n    <\/div>\n\n    <div class=\"course-details\">\n        <a href=\"https:\/\/maktabkhooneh.org\/course\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-mk1122\/\" class=\"course-title\" target=\"_blank\" rel=\"noopener noreferrer\">\n            \u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a (JavaScript)        <\/a>\n\n        <div class=\"course-price\">\n            \n                <span class=\"real-price\">\n                                            \u06f1,\u06f4\u06f9\u06f9,\u06f0\u06f0\u06f0                                    <\/span>\n\n                <span>\n                    <span class=\"discounted-price\">\n                        \u06f7\u06f4\u06f9,\u06f5\u06f0\u06f0                    <\/span>\n                    <span class=\"price-currency\">\u062a\u0648\u0645\u0627\u0646<\/span>\n                <\/span>\n\n                                    <div class=\"discount-percentage\">\n                        \u06f5\u06f0%                    <\/div>\n                \n                    <\/div>\n        <button class=\"course-cta-button\" data-course-url=\"https:\/\/maktabkhooneh.org\/course\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-mk1122\/\">\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062e\u0631\u06cc\u062f        <\/button>\n    <\/div>\n<\/div>\n<\/div><\/div><\/div>\n\n\n<p>\u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0628\u0627 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0627 \u0634\u0645\u0627 \u0647\u0645\u0631\u0627\u0647 \u0647\u0633\u062a\u06cc\u0645.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0645\u0631\u0627\u062d\u0644 \u0648 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/h2>\n\n\n\n<p>\u0627\u06a9\u0646\u0648\u0646\u200c\u06a9\u0647 \u0628\u0627 \u0627\u0647\u0645\u06cc\u062a \u0648 \u0645\u0632\u0627\u06cc\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0622\u0634\u0646\u0627 \u0634\u062f\u06cc\u0645\u060c \u0646\u0648\u0628\u062a \u0622\u0646 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0633\u0631\u0627\u063a \u0633\u0627\u062e\u062a \u0627\u06cc\u0646 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0648\u06cc\u0645. \u0645\u0631\u0627\u062d\u0644 \u0633\u0627\u062e\u062a \u0627\u06cc\u0646 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u06af\u0627\u0645\u200c\u0628\u0647\u200c\u06af\u0627\u0645 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f<strong>.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0622\u0645\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u062f\u0631 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/h3>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0627\u0631\u060c \u0633\u0647 \u0641\u0627\u06cc\u0644 \u0645\u062c\u0632\u0627 \u0628\u0627 \u067e\u0633\u0648\u0646\u062f\u0647\u0627\u06cc HTML\u060c CSS \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u060c \u06a9\u062f\u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0633\u0627\u062e\u062a \u0648 \u0646\u0645\u0627\u06cc\u0634 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0646\u0648\u0634\u062a.<\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><style><\/style><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"207\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/7cc19f75-b7ea-416a-95e6-6f61d149d308-300x207.jpg.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0628\u062e\u0634 \u0639\u0645\u0644\u06cc: \u0622\u0645\u0648\u0632\u0634 \u06af\u0627\u0645\u200c\u0628\u0647\u200c\u06af\u0627\u0645 \u0646\u0648\u0634\u062a\u0646 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u06cc\u0627\u0647\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/7cc19f75-b7ea-416a-95e6-6f61d149d308-300x207.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/7cc19f75-b7ea-416a-95e6-6f61d149d308-768x531.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/7cc19f75-b7ea-416a-95e6-6f61d149d308.jpg 1024w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/207;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/black-javascript\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u06cc\u0627\u0647 &#8211; \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0633\u0627\u062f\u0647 \u0648 \u0645\u062e\u062a\u0635\u0631<\/a>\n<\/section><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u0627\u06cc\u062c\u0627\u062f \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0635\u0644\u06cc \u0627\u0633\u0644\u0627\u06cc\u062f\u0631<\/h3>\n\n\n\n<p>\u062f\u0631 \u0641\u0627\u06cc\u0644 HTML \u0627\u0632 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n\n\n\n<div class=\"line number1 index0 alt2\" style=\"text-align: left;\"><code class=\"plain\">&lt;!DOCTYPE html&gt;<\/code><\/div>\n\n\n\n<div class=\"line number2 index1 alt1\" style=\"text-align: left;\"><code class=\"plain\">&lt;<\/code><code class=\"keyword\">html<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number4 index3 alt1\" style=\"text-align: left;\"><code class=\"plain\">&lt;<\/code><code class=\"keyword\">body<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number5 index4 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"comments\">&lt;!--HTML Code--&gt;<\/code><\/div>\n\n\n\n<div class=\"line number6 index5 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"comments\">&lt;!-- Slideshow Container Div --&gt;<\/code><\/div>\n\n\n\n<div class=\"line number7 index6 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">div<\/code> <code class=\"color1\">class<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"container\"<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number8 index7 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"comments\">&lt;!-- Full-width images with caption text --&gt;<\/code><\/div>\n\n\n\n<div class=\"line number9 index8 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">div<\/code> <code class=\"color1\">class<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"image-sliderfade fade\"<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number10 index9 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">img<\/code> <code class=\"color1\">src<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"img1.jpg\"<\/code><\/div>\n\n\n\n<div class=\"line number11 index10 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"color1\">style<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"width: 100%\"<\/code> <code class=\"plain\">\/&gt;<\/code><\/div>\n\n\n\n<div class=\"line number12 index11 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">div<\/code> <code class=\"color1\">class<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"text\"<\/code><code class=\"plain\">&gt;Image caption 1&lt;\/<\/code><code class=\"keyword\">div<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number13 index12 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;\/<\/code><code class=\"keyword\">div<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number15 index14 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">div<\/code> <code class=\"color1\">class<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"image-sliderfade fade\"<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number16 index15 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">img<\/code> <code class=\"color1\">src<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"img2.jpg\"<\/code><\/div>\n\n\n\n<div class=\"line number17 index16 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"color1\">style<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"width: 100%\"<\/code> <code class=\"plain\">\/&gt;<\/code><\/div>\n\n\n\n<div class=\"line number18 index17 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">div<\/code> <code class=\"color1\">class<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"text\"<\/code><code class=\"plain\">&gt;Image caption 2&lt;\/<\/code><code class=\"keyword\">div<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number19 index18 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;\/<\/code><code class=\"keyword\">div<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number21 index20 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">div<\/code> <code class=\"color1\">class<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"image-sliderfade fade\"<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number22 index21 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">img<\/code> <code class=\"color1\">src<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"img3.jpg\"<\/code><\/div>\n\n\n\n<div class=\"line number23 index22 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"color1\">style<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"width: 100%\"<\/code> <code class=\"plain\">\/&gt;<\/code><\/div>\n\n\n\n<div class=\"line number24 index23 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">div<\/code> <code class=\"color1\">class<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"text\"<\/code><code class=\"plain\">&gt;Image caption 3&lt;\/<\/code><code class=\"keyword\">div<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number25 index24 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;\/<\/code><code class=\"keyword\">div<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number27 index26 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">div<\/code> <code class=\"color1\">class<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"image-sliderfade fade\"<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number28 index27 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">img<\/code> <code class=\"color1\">src<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"img3.jpg\"<\/code><\/div>\n\n\n\n<div class=\"line number29 index28 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"color1\">style<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"width: 100%\"<\/code> <code class=\"plain\">\/&gt;<\/code><\/div>\n\n\n\n<div class=\"line number30 index29 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">div<\/code> <code class=\"color1\">class<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"text\"<\/code><code class=\"plain\">&gt;Image caption 4&lt;\/<\/code><code class=\"keyword\">div<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number31 index30 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;\/<\/code><code class=\"keyword\">div<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number32 index31 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;\/<\/code><code class=\"keyword\">div<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number33 index32 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">br<\/code> <code class=\"plain\">\/&gt;<\/code><\/div>\n\n\n\n<div class=\"line number35 index34 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"comments\">&lt;!-- The dots\/circles --&gt;<\/code><\/div>\n\n\n\n<div class=\"line number36 index35 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">div<\/code> <code class=\"color1\">style<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"text-align: center\"<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number37 index36 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">span<\/code> <code class=\"color1\">class<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"dot\"<\/code><code class=\"plain\">&gt;&lt;\/<\/code><code class=\"keyword\">span<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number38 index37 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">span<\/code> <code class=\"color1\">class<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"dot\"<\/code><code class=\"plain\">&gt;&lt;\/<\/code><code class=\"keyword\">span<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number39 index38 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;<\/code><code class=\"keyword\">span<\/code> <code class=\"color1\">class<\/code><code class=\"plain\">=<\/code><code class=\"string\">\"dot\"<\/code><code class=\"plain\">&gt;&lt;\/<\/code><code class=\"keyword\">span<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number40 index39 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">&lt;\/<\/code><code class=\"keyword\">div<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number41 index40 alt2\" style=\"text-align: left;\"><code class=\"plain\">&lt;\/<\/code><code class=\"keyword\">body<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<div class=\"line number43 index42 alt2\" style=\"text-align: left;\"><code class=\"plain\">&lt;\/<\/code><code class=\"keyword\">html<\/code><code class=\"plain\">&gt;<\/code><\/div>\n\n\n\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u0627\u0633\u06a9\u0644\u062a\u200c\u0628\u0646\u062f\u06cc \u0627\u0648\u0644\u06cc\u0647 \u06cc\u06a9 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0627 HTML \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u0627\u0645\u0627 \u0641\u0639\u0644\u0627\u064b \u06a9\u0627\u0631\u0627\u06cc\u06cc \u062e\u0627\u0635\u06cc \u0646\u062f\u0627\u0631\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0646\u06af\u0627\u0647 \u062f\u0642\u06cc\u0642\u200c\u062a\u0631\u06cc \u0628\u0647 \u0622\u0646 \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u0645:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u0633\u0627\u062e\u062a\u0627\u0631 <\/strong><strong>HTML<\/strong><strong>:<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u0645\u0634\u062e\u0635\u0627\u062a \u06a9\u0644\u06cc \u0635\u0641\u062d\u0647 \u0645\u062b\u0644 \u0646\u0648\u0639 \u0633\u0646\u062f\u060c \u0632\u0628\u0627\u0646\u060c \u06a9\u062f\u06cc\u0646\u06af \u0645\u062a\u0646\u060c \u0627\u0646\u062f\u0627\u0632\u0647 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0631\u0648\u06cc \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u0639\u0646\u0648\u0627\u0646 \u0635\u0641\u062d\u0647 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>\u06cc\u06a9 \u0641\u0627\u06cc\u0644 CSS \u062e\u0627\u0631\u062c\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc \u0628\u0647 \u0635\u0641\u062d\u0647 \u0644\u06cc\u0646\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>\u06cc\u06a9 \u0628\u062e\u0634 \u0627\u0635\u0644\u06cc (div) \u0628\u0627 \u06a9\u0644\u0627\u0633 &#8220;container&#8221; \u0628\u0631\u0627\u06cc \u0646\u06af\u0647\u200c\u062f\u0627\u0634\u062a\u0646 \u0627\u062c\u0632\u0627\u06cc \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>\u062f\u0627\u062e\u0644 \u0628\u062e\u0634 \u0627\u0635\u0644\u06cc\u060c \u0633\u0647 \u0642\u0633\u0645\u062a \u06cc\u06a9\u0633\u0627\u0646 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f (div \u0628\u0627 \u06a9\u0644\u0627\u0633 &#8220;image-sliderfade fade&#8221;) \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a.\n<ul class=\"wp-block-list\">\n<li>\u0647\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 (img) \u0628\u0627 \u0639\u0631\u0636 \u06f1\u06f0\u06f0 \u062f\u0631\u0635\u062f \u0648 \u06cc\u06a9 \u0645\u062a\u0646 \u0634\u0631\u062d (div \u0628\u0627 \u06a9\u0644\u0627\u0633 &#8220;text&#8221;) \u0627\u0633\u062a.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u0632\u06cc\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\u0647\u0627\u060c \u06cc\u06a9 \u0628\u062e\u0634 \u0628\u0627 \u0645\u062a\u0646 \u0648\u0633\u0637\u200c\u0686\u06cc\u0646 (&#8220;div&#8221;) \u0628\u0627 \u0633\u0647 \u0639\u0646\u0635\u0631 \u062e\u0627\u0644\u06cc (span \u0628\u0627 \u06a9\u0644\u0627\u0633 &#8220;dot&#8221;) \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0646\u0642\u0627\u0637 \u0646\u0627\u0648\u0628\u0631\u06cc (\u062f\u0627\u06cc\u0631\u0647 \u06cc\u0627 \u0646\u0642\u0637\u0647) \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0647\u200c\u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n\n\n\n<li>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0627 \u062a\u06af &lt;script&gt; \u0628\u0647 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062e\u0627\u0631\u062c\u06cc (&#8220;script.js&#8221;) \u0627\u0634\u0627\u0631\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0645\u0633\u0626\u0648\u0644\u06cc\u062a \u06a9\u0646\u062a\u0631\u0644 \u0646\u0645\u0627\u06cc\u0634 \u0627\u0633\u0644\u0627\u06cc\u062f\u0647\u0627 \u0648 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0628\u0631\u0639\u0647\u062f\u0647 \u062f\u0627\u0631\u062f (\u0627\u0645\u0627 \u0641\u0639\u0644\u0627\u064b \u062f\u0631 \u0627\u06cc\u0646 \u06a9\u062f \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f).<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>\u0646\u06a9\u062a\u0647 \u0645\u0647\u0645:<\/strong> \u0627\u06cc\u0646 \u06a9\u062f \u0641\u0642\u0637 \u0628\u062e\u0634 \u0638\u0627\u0647\u0631\u06cc \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0631\u0627 \u0628\u0627 HTML \u0633\u0627\u062e\u062a\u0647 \u0648 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0627\u0633\u0644\u0627\u06cc\u062f\u0647\u0627 \u0639\u0648\u0636 \u0634\u0648\u0646\u062f \u06cc\u0627 \u0646\u0642\u0637\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u06a9\u0627\u0631 \u06a9\u0646\u0646\u062f\u060c \u0628\u0647 \u06a9\u062f\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062f\u0631 \u0641\u0627\u06cc\u0644 script.js \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a \u06a9\u0647 \u0641\u0639\u0644\u0627\u064b \u062f\u0631 \u0627\u06cc\u0646 \u06a9\u062f \u06af\u0646\u062c\u0627\u0646\u062f\u0647 \u0646\u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0646\u062f\u06cc \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 CSS<\/h3>\n\n\n\n<p>\u062f\u0631 \u0641\u0627\u06cc\u0644 CSS \u0627\u0632 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n\n\n\n<div class=\"line number1 index0 alt2\" style=\"text-align: left;\"><code class=\"plain\">\/\/ CSS <\/code><code class=\"value\">code<\/code><\/div>\n\n\n\n<div class=\"line number2 index1 alt1\" style=\"text-align: left;\"><code class=\"plain\">* {<\/code><\/div>\n\n\n\n<div class=\"line number3 index2 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">box-sizing: border-box;<\/code><\/div>\n\n\n\n<div class=\"line number4 index3 alt1\" style=\"text-align: left;\"><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number5 index4 alt2\" style=\"text-align: left;\"><code class=\"plain\">body {<\/code><\/div>\n\n\n\n<div class=\"line number6 index5 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">font-family<\/code><code class=\"plain\">: <\/code><code class=\"color1\">Verdana<\/code><code class=\"plain\">, <\/code><code class=\"color1\">sans-serif<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number7 index6 alt2\" style=\"text-align: left;\"><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number9 index8 alt2\" style=\"text-align: left;\"><code class=\"plain\">.image-sliderfade {<\/code><\/div>\n\n\n\n<div class=\"line number10 index9 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">display<\/code><code class=\"plain\">: <\/code><code class=\"value\">none<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number11 index10 alt2\" style=\"text-align: left;\"><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number13 index12 alt2\" style=\"text-align: left;\"><code class=\"plain\">img {<\/code><\/div>\n\n\n\n<div class=\"line number14 index13 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">vertical-align<\/code><code class=\"plain\">: <\/code><code class=\"value\">middle<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number15 index14 alt2\" style=\"text-align: left;\"><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number17 index16 alt2\" style=\"text-align: left;\"><code class=\"comments\">\/* Slideshow container *\/<\/code><\/div>\n\n\n\n<div class=\"line number18 index17 alt1\" style=\"text-align: left;\"><code class=\"plain\">.container {<\/code><\/div>\n\n\n\n<div class=\"line number19 index18 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">max-width<\/code><code class=\"plain\">: <\/code><code class=\"value\">1000px<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number20 index19 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">position<\/code><code class=\"plain\">: <\/code><code class=\"value\">relative<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number21 index20 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">margin<\/code><code class=\"plain\">: <\/code><code class=\"value\">auto<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number22 index21 alt1\" style=\"text-align: left;\"><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number24 index23 alt1\" style=\"text-align: left;\"><code class=\"comments\">\/* Caption text *\/<\/code><\/div>\n\n\n\n<div class=\"line number25 index24 alt2\" style=\"text-align: left;\"><code class=\"plain\">.text {<\/code><\/div>\n\n\n\n<div class=\"line number26 index25 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">color<\/code><code class=\"plain\">: <\/code><code class=\"value\">#f2f2f2<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number27 index26 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">font-size<\/code><code class=\"plain\">: <\/code><code class=\"value\">15px<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number28 index27 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">padding<\/code><code class=\"plain\">: <\/code><code class=\"value\">20px<\/code> <code class=\"value\">15px<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number29 index28 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">position<\/code><code class=\"plain\">: <\/code><code class=\"value\">absolute<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number30 index29 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">right<\/code><code class=\"plain\">: <\/code><code class=\"value\">10px<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number31 index30 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">bottom<\/code><code class=\"plain\">: <\/code><code class=\"value\">10px<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number32 index31 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">width<\/code><code class=\"plain\">: <\/code><code class=\"value\">\u06f4\u06f0%<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number33 index32 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">background<\/code><code class=\"plain\">: rgba(<\/code><code class=\"value\">\u06f0<\/code><code class=\"plain\">, <\/code><code class=\"value\">\u06f0<\/code><code class=\"plain\">, <\/code><code class=\"value\">\u06f0<\/code><code class=\"plain\">, <\/code><code class=\"value\">\u06f0.\u06f7<\/code><code class=\"plain\">);<\/code><\/div>\n\n\n\n<div class=\"line number34 index33 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">text-align<\/code><code class=\"plain\">: <\/code><code class=\"value\">left<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number35 index34 alt2\" style=\"text-align: left;\"><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number37 index36 alt2\" style=\"text-align: left;\"><code class=\"comments\">\/* The dots\/bullets\/indicators *\/<\/code><\/div>\n\n\n\n<div class=\"line number38 index37 alt1\" style=\"text-align: left;\"><code class=\"plain\">.dot {<\/code><\/div>\n\n\n\n<div class=\"line number39 index38 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">height<\/code><code class=\"plain\">: <\/code><code class=\"value\">15px<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number40 index39 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">width<\/code><code class=\"plain\">: <\/code><code class=\"value\">15px<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number41 index40 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">margin<\/code><code class=\"plain\">: <\/code><code class=\"value\">\u06f0<\/code> <code class=\"value\">2px<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number42 index41 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">background-color<\/code><code class=\"plain\">: <\/code><code class=\"value\">transparent<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number43 index42 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">border-color<\/code><code class=\"plain\">: <\/code><code class=\"value\">#ddd<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number44 index43 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">border-width<\/code><code class=\"plain\">: <\/code><code class=\"value\">\u06f5<\/code> <code class=\"plain\">px;<\/code><\/div>\n\n\n\n<div class=\"line number45 index44 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">border-style<\/code><code class=\"plain\">: <\/code><code class=\"value\">solid<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number46 index45 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">border-radius: <\/code><code class=\"value\">\u06f5\u06f0%<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number47 index46 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">display<\/code><code class=\"plain\">: inline-<\/code><code class=\"value\">block<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number48 index47 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">transition: border-color <\/code><code class=\"value\">\u06f0.\u06f6<\/code><code class=\"plain\">s ease;<\/code><\/div>\n\n\n\n<div class=\"line number49 index48 alt2\" style=\"text-align: left;\"><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number51 index50 alt2\" style=\"text-align: left;\"><code class=\"plain\">.active {<\/code><\/div>\n\n\n\n<div class=\"line number52 index51 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">border-color<\/code><code class=\"plain\">: <\/code><code class=\"value\">#\u06f6\u06f6\u06f6<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number53 index52 alt2\" style=\"text-align: left;\"><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number55 index54 alt2\" style=\"text-align: left;\"><code class=\"comments\">\/* Animation *\/<\/code><\/div>\n\n\n\n<div class=\"line number56 index55 alt1\" style=\"text-align: left;\"><code class=\"plain\">.fade {<\/code><\/div>\n\n\n\n<div class=\"line number57 index56 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">-webkit-animation-name: fade-image;<\/code><\/div>\n\n\n\n<div class=\"line number58 index57 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">-webkit-animation-duration: <\/code><code class=\"value\">\u06f1.\u06f5<\/code><code class=\"plain\">s;<\/code><\/div>\n\n\n\n<div class=\"line number59 index58 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">animation-name: fade-image;<\/code><\/div>\n\n\n\n<div class=\"line number60 index59 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">animation-duration: <\/code><code class=\"value\">\u06f1.\u06f5<\/code><code class=\"plain\">s;<\/code><\/div>\n\n\n\n<div class=\"line number61 index60 alt2\" style=\"text-align: left;\"><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number63 index62 alt2\" style=\"text-align: left;\"><code class=\"plain\">@-webkit-keyframes fade-image {<\/code><\/div>\n\n\n\n<div class=\"line number64 index63 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">from {<\/code><\/div>\n\n\n\n<div class=\"line number65 index64 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">opacity: <\/code><code class=\"value\">\u06f0.\u06f4<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number66 index65 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number67 index66 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">to {<\/code><\/div>\n\n\n\n<div class=\"line number68 index67 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">opacity: <\/code><code class=\"value\">\u06f1<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number69 index68 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number70 index69 alt1\" style=\"text-align: left;\"><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number72 index71 alt1\" style=\"text-align: left;\"><code class=\"plain\">@keyframes fade-image {<\/code><\/div>\n\n\n\n<div class=\"line number73 index72 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">from {<\/code><\/div>\n\n\n\n<div class=\"line number74 index73 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">opacity: <\/code><code class=\"value\">\u06f0.\u06f4<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number75 index74 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number76 index75 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">to {<\/code><\/div>\n\n\n\n<div class=\"line number77 index76 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">opacity: <\/code><code class=\"value\">\u06f1<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number78 index77 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number79 index78 alt2\" style=\"text-align: left;\"><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number81 index80 alt2\" style=\"text-align: left;\"><code class=\"comments\">\/* On smaller screens, decrease text size *\/<\/code><\/div>\n\n\n\n<div class=\"line number82 index81 alt1\" style=\"text-align: left;\"><code class=\"plain\">@media only <\/code><code class=\"value\">screen<\/code> <code class=\"plain\">and (<\/code><code class=\"keyword\">max-width<\/code><code class=\"plain\">: <\/code><code class=\"value\">300px<\/code><code class=\"plain\">) {<\/code><\/div>\n\n\n\n<div class=\"line number83 index82 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">.text {<\/code><\/div>\n\n\n\n<div class=\"line number84 index83 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">font-size<\/code><code class=\"plain\">: <\/code><code class=\"value\">11px<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number85 index84 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number86 index85 alt1\" style=\"text-align: left;\"><code class=\"plain\">}<\/code><\/div>\n\n\n\n<p>\u0627\u06cc\u0646 \u06a9\u062f CSS\u060c \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0638\u0627\u0647\u0631\u06cc \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0628\u0647\u200c\u0637\u0648\u0631\u06a9\u0644\u06cc\u060c \u0628\u0647 \u0647\u0645\u0647 \u062a\u06af\u200c\u0647\u0627 \u0645\u06cc\u200c\u06af\u0648\u06cc\u062f \u06a9\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0627\u06a9\u0633 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 padding \u0648 border \u0645\u062d\u0627\u0633\u0628\u0647 \u06a9\u0646\u062f (box-sizing: border-box).<\/li>\n\n\n\n<li>\u0641\u0648\u0646\u062a \u0645\u062a\u0646 \u0628\u062f\u0646\u0647 (body) \u0631\u0627 Verdana \u06cc\u0627 \u06cc\u06a9 \u0641\u0648\u0646\u062a sans-serif \u0645\u0634\u0627\u0628\u0647 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>\u0627\u0628\u062a\u062f\u0627 \u0647\u0645\u0647 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\u0647\u0627 (\u0628\u0627 \u06a9\u0644\u0627\u0633 &#8220;image-sliderfade&#8221;) \u0631\u0627 \u0645\u062e\u0641\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f (display: none).<\/li>\n\n\n\n<li>\u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u06a9\u0644\u06cc \u0628\u0631\u0627\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f (vertical-align: middle \u0628\u0631\u0627\u06cc \u062a\u0631\u0627\u0632 \u0639\u0645\u0648\u062f\u06cc \u0628\u0647\u062a\u0631).<\/li>\n\n\n\n<li>\u0628\u0631\u0627\u06cc \u0628\u062e\u0634 \u0627\u0635\u0644\u06cc \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 (\u06a9\u0644\u0627\u0633 container) \u062d\u062f\u0627\u06a9\u062b\u0631 \u0639\u0631\u0636 \u06f1\u06f0\u06f0\u06f0 \u067e\u06cc\u06a9\u0633\u0644\u060c \u0645\u0648\u0642\u0639\u06cc\u062a \u0646\u0633\u0628\u06cc (position: relative) \u0648 \u0642\u0631\u0627\u0631\u06af\u06cc\u0631\u06cc \u0648\u0633\u0637 \u0635\u0641\u062d\u0647 (margin: auto) \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>\u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u062a\u0646\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631\u0646\u0648\u06cc\u0633 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 (\u06a9\u0644\u0627\u0633 text) \u0631\u0627 \u0634\u0627\u0645\u0644 \u0631\u0646\u06af\u060c \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a\u060c \u0641\u0627\u0635\u0644\u0647 \u0627\u0632 \u0644\u0628\u0647\u200c\u0647\u0627\u060c \u0645\u0648\u0642\u0639\u06cc\u062a \u0645\u0637\u0644\u0642 (position: absolute), \u0645\u0648\u0642\u0639\u06cc\u062a \u062f\u0631 \u06af\u0648\u0634\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0648 \u0639\u0631\u0636 \u06f4\u06f0% \u0635\u0641\u062d\u0647\u060c \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0646\u06cc\u0645\u0647 \u0634\u0641\u0627\u0641 \u0633\u06cc\u0627\u0647 \u0648 \u062a\u0631\u0627\u0632 \u0686\u067e \u0645\u062a\u0646 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>\u0627\u0633\u062a\u0627\u06cc\u0644 \u0646\u0642\u0627\u0637 \u0646\u0627\u0648\u0628\u0631\u06cc (\u06a9\u0644\u0627\u0633 dot) \u0631\u0627 \u0634\u0627\u0645\u0644 \u0627\u0631\u062a\u0641\u0627\u0639\u060c \u0639\u0631\u0636\u060c \u0641\u0627\u0635\u0644\u0647 \u0627\u0632 \u0647\u0645\u060c \u0631\u0646\u06af \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0634\u0641\u0627\u0641\u060c \u0631\u0646\u06af \u0648 \u0636\u062e\u0627\u0645\u062a \u062d\u0627\u0634\u06cc\u0647\u060c \u0634\u06a9\u0644 \u06af\u0631\u062f\u060c \u0646\u0645\u0627\u06cc\u0634 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062e\u0637\u06cc \u0648 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0646\u06af \u062d\u0627\u0634\u06cc\u0647 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0641\u0639\u0627\u0644 \u0634\u062f\u0646 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>\u06a9\u0644\u0627\u0633 active \u0631\u0646\u06af \u062d\u0627\u0634\u06cc\u0647 \u0646\u0642\u0627\u0637 \u0631\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0641\u0639\u0627\u0644 \u0634\u062f\u0646 \u0628\u0647 \u062e\u0627\u06a9\u0633\u062a\u0631\u06cc \u062a\u06cc\u0631\u0647 (#\u06f6\u06f6\u06f6) \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/li>\n\n\n\n<li>\u06cc\u06a9 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627 \u0646\u0627\u0645 fade-image \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0627\u0639\u062b \u0645\u062d\u0648 \u0634\u062f\u0646 \u062a\u062f\u0631\u06cc\u062c\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u0634\u0648\u062f (opacity \u0627\u0632 \u06f0.\u06f4 \u0628\u0647 \u06f1).<\/li>\n\n\n\n<li>\u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0628\u0647\u062a\u0631 \u062f\u0631\u06af\u0648\u0634\u06cc\u200c\u0647\u0627\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644\u060c \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0645\u062a\u0646 \u0632\u06cc\u0631\u0646\u0648\u06cc\u0633 \u0631\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a \u06a9\u0648\u0686\u06a9 \u0628\u0648\u062f\u0646 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 (\u06a9\u0645\u062a\u0631 \u0627\u0632 \u06f3\u06f0\u06f0 \u067e\u06cc\u06a9\u0633\u0644) \u06a9\u0627\u0647\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/li>\n<\/ul>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"181\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/a-person-sitting-at-a-desk-working-on-a-computer-300x181.png.webp\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u0622\u0645\u0648\u0632\u0634 ajax \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/a-person-sitting-at-a-desk-working-on-a-computer-300x181.png.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/a-person-sitting-at-a-desk-working-on-a-computer-768x463.png.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/a-person-sitting-at-a-desk-working-on-a-computer.png 780w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/181;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/ajax-in-javascript\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 Ajax \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0627 \u06f3 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0633\u0627\u062f\u0647<\/a>\n<\/section><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u06a9\u062f\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631<\/h3>\n\n\n\n<p>\u062f\u0631 \u0641\u0627\u06cc\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n\n\n\n<div class=\"line number1 index0 alt2\" style=\"text-align: left;\"><code class=\"plain\">let slideIndex = 0;<\/code><\/div>\n\n\n\n<div class=\"line number2 index1 alt1\" style=\"text-align: left;\"><code class=\"plain\">showSlides(); <\/code><code class=\"comments\">\/\/ call showslide method<\/code><\/div>\n\n\n\n<div class=\"line number4 index3 alt1\" style=\"text-align: left;\"><code class=\"keyword\">function<\/code> <code class=\"plain\">showSlides() {<\/code><\/div>\n\n\n\n<div class=\"line number5 index4 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">let i;<\/code><\/div>\n\n\n\n<div class=\"line number7 index6 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"comments\">\/\/ get the array of divs' with classname image-sliderfade<\/code><\/div>\n\n\n\n<div class=\"line number8 index7 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">let slides = document.getElementsByClassName(<\/code><code class=\"string\">\"image-sliderfade\"<\/code><code class=\"plain\">);<\/code><\/div>\n\n\n\n<div class=\"line number10 index9 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"comments\">\/\/ get the array of divs' with classname dot<\/code><\/div>\n\n\n\n<div class=\"line number11 index10 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">let dots = document.getElementsByClassName(<\/code><code class=\"string\">\"dot\"<\/code><code class=\"plain\">);<\/code><\/div>\n\n\n\n<div class=\"line number13 index12 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">for<\/code> <code class=\"plain\">(i = 0; i &lt; slides.length; i++) {<\/code><\/div>\n\n\n\n<div class=\"line number14 index13 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"comments\">\/\/ initially set the display to<\/code><\/div>\n\n\n\n<div class=\"line number15 index14 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"comments\">\/\/ none for every image.<\/code><\/div>\n\n\n\n<div class=\"line number16 index15 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">slides[i].style.display = <\/code><code class=\"string\">\"none\"<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number17 index16 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number19 index18 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"comments\">\/\/ increase by 1, Global variable<\/code><\/div>\n\n\n\n<div class=\"line number20 index19 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">slideIndex++;<\/code><\/div>\n\n\n\n<div class=\"line number21 index20 alt2\" style=\"text-align: left;\"><\/div>\n\n\n\n<div class=\"line number22 index21 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"comments\">\/\/ check for boundary<\/code><\/div>\n\n\n\n<div class=\"line number23 index22 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">if<\/code> <code class=\"plain\">(slideIndex &gt; slides.length) {<\/code><\/div>\n\n\n\n<div class=\"line number24 index23 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">slideIndex = 1;<\/code><\/div>\n\n\n\n<div class=\"line number25 index24 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number27 index26 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"keyword\">for<\/code> <code class=\"plain\">(i = 0; i &lt; dots.length; i++) {<\/code><\/div>\n\n\n\n<div class=\"line number28 index27 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">dots[i].className = dots[i].className.replace(<\/code><code class=\"string\">\" active\"<\/code><code class=\"plain\">, <\/code><code class=\"string\">\"\"<\/code><code class=\"plain\">);<\/code><\/div>\n\n\n\n<div class=\"line number29 index28 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">}<\/code><\/div>\n\n\n\n<div class=\"line number31 index30 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">slides[slideIndex - 1].style.display = <\/code><code class=\"string\">\"block\"<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number32 index31 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">dots[slideIndex - 1].className += <\/code><code class=\"string\">\" active\"<\/code><code class=\"plain\">;<\/code><\/div>\n\n\n\n<div class=\"line number34 index33 alt1\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"comments\">\/\/ Change image every 2 seconds<\/code><\/div>\n\n\n\n<div class=\"line number35 index34 alt2\" style=\"text-align: left;\"><code class=\"undefined spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"plain\">setTimeout(showSlides, 2000);<\/code><\/div>\n\n\n\n<div class=\"line number36 index35 alt1\" style=\"text-align: left;\"><code class=\"plain\">}<\/code><\/div>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u06a9\u062f \u0627\u0632 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u062a\u0648\u0627\u0628\u0639 \u0648 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0646\u0645\u0627\u06cc\u0634 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0648 \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc \u0628\u06cc\u0646 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0646\u0645\u0627\u06cc\u0634 \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u062a\u0648\u0645\u0627\u062a\u06cc\u06a9 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0633\u0631\u0627\u0633\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 slideIndex \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644 \u062a\u0635\u0648\u06cc\u0631 \u0641\u0639\u0627\u0644 (\u0627\u0633\u0644\u0627\u06cc\u062f \u062c\u0627\u0631\u06cc) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0622\u0646 \u0635\u0641\u0631 \u0627\u0633\u062a.<\/li>\n\n\n\n<li>\u0633\u067e\u0633 \u0628\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u062a\u0627\u0628\u0639 showSlides()\u200e\u060c \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0631\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n<\/ul>\n\n\n\n<p><strong>\u062a\u0627\u0628\u0639 showSlides()\u200e:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u06a9\u0645\u06a9\u06cc i \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0631 \u062d\u0644\u0642\u0647\u200c\u0647\u0627\u06cc for \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 getElementsByClassName \u0622\u0631\u0627\u06cc\u0647\u200c\u0627\u06cc \u0627\u0632 \u062a\u0645\u0627\u0645 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc div \u0628\u0627 \u06a9\u0644\u0627\u0633 image-sliderfade (\u0627\u0633\u0644\u0627\u06cc\u062f\u0647\u0627) \u0631\u0627 \u062f\u0631 \u0645\u062a\u063a\u06cc\u0631 slides \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>\u0628\u0647 \u0647\u0645\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628 \u0622\u0631\u0627\u06cc\u0647\u200c\u0627\u06cc \u0627\u0632 \u062a\u0645\u0627\u0645 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc div \u0628\u0627 \u06a9\u0644\u0627\u0633 dot (\u0646\u0642\u0627\u0637 \u0646\u0627\u0648\u0628\u0631\u06cc) \u0631\u0627 \u062f\u0631 \u0645\u062a\u063a\u06cc\u0631 dots \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>\u06cc\u06a9 \u062d\u0644\u0642\u0647 for \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u062a\u0645\u0627\u0645 \u0627\u0633\u0644\u0627\u06cc\u062f\u0647\u0627 \u0631\u0627 \u0637\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0628\u0627 \u062a\u0646\u0638\u06cc\u0645 display: none \u0628\u0631\u0627\u06cc \u0647\u0645\u0647\u060c \u0627\u0628\u062a\u062f\u0627 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0645\u062e\u0641\u06cc \u0645\u06cc\u200c\u0633\u0627\u0632\u062f.<\/li>\n\n\n\n<li>\u0645\u0642\u062f\u0627\u0631 \u0645\u062a\u063a\u06cc\u0631 \u0633\u0631\u0627\u0633\u0631\u06cc slideIndex \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0627\u0633\u0644\u0627\u06cc\u062f \u0628\u0639\u062f\u06cc\u060c \u06cc\u06a9 \u0648\u0627\u062d\u062f \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/li>\n\n\n\n<li>\u06cc\u06a9 \u0634\u0631\u0637 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 slideIndex \u0627\u0632 \u062a\u0639\u062f\u0627\u062f \u06a9\u0644 \u0627\u0633\u0644\u0627\u06cc\u062f\u0647\u0627 \u0628\u06cc\u0634\u062a\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631. \u0627\u06af\u0631 \u0686\u0646\u06cc\u0646 \u0628\u0627\u0634\u062f\u060c \u0628\u0627 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0645\u062c\u062f\u062f \u06f1 \u0628\u0647 slideIndex\u060c \u0646\u0645\u0627\u06cc\u0634 \u0627\u0633\u0644\u0627\u06cc\u062f \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0634\u0631\u0648\u0639 \u0645\u06cc\u200c\u0634\u0648\u062f (\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062d\u0644\u0642\u0647).<\/li>\n\n\n\n<li>\u06cc\u06a9 \u062d\u0644\u0642\u0647 for \u062f\u06cc\u06af\u0631 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u062a\u0645\u0627\u0645 \u0646\u0642\u0627\u0637 \u0646\u0627\u0648\u0628\u0631\u06cc \u0631\u0627 \u0637\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0628\u0627 \u062d\u0630\u0641 \u06a9\u0644\u0627\u0633 active \u0627\u0632 \u0622\u0646\u200c\u0647\u0627\u060c \u062d\u0627\u0644\u062a \u0641\u0639\u0627\u0644 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u063a\u06cc\u0631\u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f.<\/li>\n\n\n\n<li>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 slideIndex &#8211; 1 (\u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u0646 \u0628\u0647 \u0627\u0646\u062f\u06cc\u0633 \u0635\u062d\u06cc\u062d \u0622\u0631\u0627\u06cc\u0647 \u06a9\u0647 \u0627\u0632 \u0635\u0641\u0631 \u0634\u0631\u0648\u0639 \u0645\u06cc\u200c\u0634\u0648\u062f)\u060c \u0627\u0633\u0644\u0627\u06cc\u062f \u0635\u062d\u06cc\u062d \u0631\u0627 \u0627\u0632 \u0622\u0631\u0627\u06cc\u0647 slides \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0627 display: block \u0622\u0646 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/li>\n\n\n\n<li>\u0628\u0647 \u0647\u0645\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 slideIndex &#8211; 1\u060c \u0646\u0642\u0637\u0647 \u0646\u0627\u0648\u0628\u0631\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0627\u0633\u0644\u0627\u06cc\u062f \u0641\u0639\u0627\u0644 \u0631\u0627 \u0627\u0632 \u0622\u0631\u0627\u06cc\u0647 dots \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647 \u0648 \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06a9\u0644\u0627\u0633 &#8220;active&#8221; \u0628\u0647 \u0622\u0646\u060c \u062d\u0627\u0644\u062a \u0641\u0639\u0627\u0644 \u0631\u0627 \u0628\u0631\u0627\u06cc\u0634 \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n\n\n\n<li>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 setTimeout\u060c \u062a\u0627\u0628\u0639 showSlides \u0631\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0627 \u062a\u0623\u062e\u06cc\u0631 \u06f2 \u062b\u0627\u0646\u06cc\u0647 (\u06f2\u06f0\u06f0\u06f0 \u0645\u06cc\u0644\u06cc\u200c\u062b\u0627\u0646\u06cc\u0647) \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u062a\u0627\u0628\u0639 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0647\u0631 \u06f2 \u062b\u0627\u0646\u06cc\u0647 \u0627\u062c\u0631\u0627\u0634\u062f\u0647 \u0648 \u0627\u0633\u0644\u0627\u06cc\u062f \u0628\u0639\u062f\u06cc \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u062f \u0648 \u0628\u0647\u200c\u0627\u06cc\u0646\u200c\u062a\u0631\u062a\u06cc\u0628 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0627\u062a\u0648\u0645\u0627\u062a\u06cc\u06a9 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0646\u062f.<\/li>\n<\/ul>\n\n\n\n<p>\u0628\u0627 \u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc HTML\u060c CSS \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062e\u0631\u0648\u062c\u06cc \u0646\u0647\u0627\u06cc\u06cc \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"916\" height=\"656\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/Video_240512153312-ezgif.com-optimize.gif\" alt=\" \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" class=\"wp-image-39259 lazyload\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 916px; --smush-placeholder-aspect-ratio: 916\/656;\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">&nbsp;\u0634\u062e\u0635\u06cc\u200c \u0633\u0627\u0632\u06cc \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/h3>\n\n\n\n<p>\u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0646\u06cc\u0627\u0632 \u062e\u0648\u062f\u060c \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0634\u062e\u0635\u06cc\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u0646\u062f \u0646\u0645\u0648\u0646\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627 \u0631\u0627 \u0634\u0631\u062d \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645:<\/p>\n\n\n<div class=\"jet-listing-grid--50121\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-course cb-fb2qc30r\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\n<div class=\"course-card\">\n    <div class=\"course-card-img\">\n        <img decoding=\"async\" \n            data-src=\"https:\/\/media1.maktabkhooneh.org\/CACHE\/images\/courses\/images\/front_gcZ5ulR_1403-08-16-164827889\/eb15a124ff8961e6f5a4178684ece70c.webp?expire=4893471932&#038;token=0416681717d9beb623a1202e6efcac1b&#038;md5=BBZoFxfZvrYjoSAubvysGw==\" \n            alt=\"\u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)\" \n            title=\"\u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)\" \n            width=\"100%\" \n            height=\"auto\"\n           \n         src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n    <\/div>\n\n    <div class=\"course-details\">\n        <a href=\"https:\/\/maktabkhooneh.org\/course\/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-front-end-mk3\/\" class=\"course-title\" target=\"_blank\" rel=\"noopener noreferrer\">\n            \u0622\u0645\u0648\u0632\u0634 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a (Front-End)        <\/a>\n\n        <div class=\"course-price\">\n            \n                <span class=\"real-price\">\n                                            \u06f9\u06f9\u06f9,\u06f0\u06f0\u06f0                                    <\/span>\n\n                <span>\n                    <span class=\"discounted-price\">\n                        \u06f5\u06f9\u06f9,\u06f4\u06f0\u06f0                    <\/span>\n                    <span class=\"price-currency\">\u062a\u0648\u0645\u0627\u0646<\/span>\n                <\/span>\n\n                                    <div class=\"discount-percentage\">\n                        \u06f4\u06f0%                    <\/div>\n                \n                    <\/div>\n        <button class=\"course-cta-button\" data-course-url=\"https:\/\/maktabkhooneh.org\/course\/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-front-end-mk3\/\">\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062e\u0631\u06cc\u062f        <\/button>\n    <\/div>\n<\/div>\n<\/div><\/div><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0627\u0641\u0632\u0648\u062f\u0646 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u06cc\u0634\u062a\u0631:<\/strong> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0639\u062f\u0627\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0631\u0627 \u0628\u0647 \u062f\u0644\u062e\u0648\u0627\u0647 \u062e\u0648\u062f \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a \u06a9\u062f HTML \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 HTML \u06a9\u067e\u06cc \u0648 \u067e\u06cc\u0633\u062a \u06a9\u0646\u06cc\u062f.<\/li>\n\n\n\n<li><strong>\u062a\u063a\u06cc\u06cc\u0631 \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc:<\/strong> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc \u0628\u06cc\u0646 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u062f\u0644\u062e\u0648\u0627\u0647 \u062e\u0648\u062f \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u0641\u06a9\u062a \u0645\u062d\u0648 \u0634\u062f\u0646 (Fade) \u06cc\u0627 \u062d\u0631\u06a9\u062a \u0628\u0647 \u0633\u0645\u062a \u0686\u067e \u0648 \u0631\u0627\u0633\u062a (Slide) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n\n\n\n<li><strong>\u0627\u0641\u0632\u0648\u062f\u0646 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc:<\/strong> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0628\u0647 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0631\u0641\u062a\u0646 \u0628\u0647 \u0627\u0633\u0644\u0627\u06cc\u062f \u0627\u0648\u0644\u060c \u0622\u062e\u0631 \u06cc\u0627 \u0627\u0633\u0644\u0627\u06cc\u062f \u062a\u0635\u0627\u062f\u0641\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/li>\n\n\n\n<li><strong>\u062a\u0646\u0638\u06cc\u0645 \u0633\u0631\u0639\u062a \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc:<\/strong> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0633\u0631\u0639\u062a \u062c\u0627\u0628\u062c\u0627\u06cc\u06cc \u0628\u06cc\u0646 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u062f\u0644\u062e\u0648\u0627\u0647 \u062e\u0648\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a \u0645\u0642\u062f\u0627\u0631 \u0645\u062a\u063a\u06cc\u0631 transition \u062f\u0631 \u0641\u0627\u06cc\u0644 CSS \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/li>\n\n\n\n<li><strong>\u0627\u0641\u0632\u0648\u062f\u0646 \u0639\u0646\u0648\u0627\u0646 \u0648 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0628\u0647 \u062a\u0635\u0627\u0648\u06cc\u0631:<\/strong> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0647\u0631 \u062a\u0635\u0648\u06cc\u0631\u060c \u0639\u0646\u0648\u0627\u0646 \u0648 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0645\u062e\u062a\u0635\u0631\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u062a\u0627 \u0645\u062e\u0627\u0637\u0628 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.<\/li>\n\n\n\n<li><strong>\u0627\u06cc\u062c\u0627\u062f \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648:<\/strong> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0631\u0627 \u0628\u0647\u200c\u06af\u0648\u0646\u0647\u200c\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u062a\u0645\u0627\u0645\u06cc \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u060c \u0627\u0632 \u062c\u0645\u0644\u0647 \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631\u0647\u0627\u06cc \u0631\u0648\u0645\u06cc\u0632\u06cc\u060c \u062a\u0628\u0644\u062a\u200c\u0647\u0627 \u0648 \u062a\u0644\u0641\u0646\u200c\u0647\u0627\u06cc \u0647\u0645\u0631\u0627\u0647\u060c \u0628\u0647\u200c\u062f\u0631\u0633\u062a\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0628\u0627\u06cc\u062f \u0627\u0632 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627\u06cc CSS \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"852\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/2bfa55a4-b75f-4af6-b2eb-d5a5043cc2a7.jpg\" alt=\"\u00a0\u0634\u062e\u0635\u06cc\u200c\u0633\u0627\u0632\u06cc \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\" class=\"wp-image-39261 lazyload\" title=\"\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/2bfa55a4-b75f-4af6-b2eb-d5a5043cc2a7.jpg 1024w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/2bfa55a4-b75f-4af6-b2eb-d5a5043cc2a7-300x250.jpg.webp 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/2bfa55a4-b75f-4af6-b2eb-d5a5043cc2a7-768x639.jpg.webp 768w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/852;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0645 \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627 \u0627\u0628\u0639\u0627\u062f \u0645\u062e\u062a\u0644\u0641 \u062f\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645\u061f<\/h3>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627 \u0627\u0628\u0639\u0627\u062f \u0645\u062e\u062a\u0644\u0641 \u062f\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 CSS Flexbox \u06cc\u0627 Grid Layout \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u062a\u06a9\u0646\u06cc\u06a9\u200c\u0647\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u062a\u0627 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647\u200c\u06af\u0648\u0646\u0647\u200c\u0627\u06cc \u062f\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u062f \u06a9\u0647 \u0641\u0636\u0627\u06cc \u062e\u0627\u0644\u06cc \u0628\u06cc\u0646 \u0622\u0646\u200c\u0647\u0627 \u0628\u0647 \u062d\u062f\u0627\u0642\u0644 \u0628\u0631\u0633\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0645 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0639\u0645\u0648\u062f\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u0645\u061f<\/h3>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0639\u0645\u0648\u062f\u06cc\u060c \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a \u062c\u0647\u062a \u0646\u0645\u0627\u06cc\u0634 \u062a\u0635\u0627\u0648\u06cc\u0631 (display) \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 CSS \u0627\u0632 flex-direction: row \u0628\u0647 flex-direction: column \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0645 \u0627\u0632 \u0648\u06cc\u062f\u06cc\u0648 \u062f\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645\u061f<\/h3>\n\n\n\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u062f\u06cc\u0648 \u062f\u0631 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647\u200c\u062c\u0627\u06cc \u062a\u06af img \u0627\u0632 \u062a\u06af video \u062f\u0631 \u0641\u0627\u06cc\u0644 HTML \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n<div class=\"jet-listing-grid--50192\" style=\"\"><section class=\"zht-related-post\" itemscope=\"\" itemtype=\"https:\/\/schema.org\/Article\" role=\"region\"\n  aria-label=\"Related article\">\n  <div class=\"zht-related-post-section-label\">\n    \u0645\u0637\u0627\u0644\u0628 \u0645\u0631\u062a\u0628\u0637\n  <\/div>\n  <img decoding=\"async\" width=\"300\" height=\"198\" data-src=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/b2a7791b-12de-40cd-aa57-b3d08e08cb65-300x198.jpg\" class=\"attachment-medium size-medium wp-post-image lazyload\" alt=\"\u062a\u06af \u200c\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" data-srcset=\"https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/b2a7791b-12de-40cd-aa57-b3d08e08cb65-300x198.jpg 300w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/smush-webp\/2024\/05\/b2a7791b-12de-40cd-aa57-b3d08e08cb65-768x508.jpg.webp 768w, https:\/\/maktabkhooneh.org\/mag\/wp-content\/uploads\/2024\/05\/b2a7791b-12de-40cd-aa57-b3d08e08cb65.jpg 1024w\" data-sizes=\"(max-width: 300px) 100vw, 300px\" title=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 300px; --smush-placeholder-aspect-ratio: 300\/198;\">\n  <a href=\"https:\/\/maktabkhooneh.org\/mag\/javascript-tags\/\" class=\"zht-related-post-title\"\n    itemprop=\"headline\" target=\"_blank\">\u0622\u0645\u0648\u0632\u0634 \u062a\u06af\u200c \u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647<\/a>\n<\/section><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0645 \u0627\u0632 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062f\u0631 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0627\u0646\u0646\u062f Slick \u06cc\u0627 Swiper \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645\u061f<\/h3>\n\n\n\n<p>\u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0627\u0646\u0646\u062f Slick \u06cc\u0627 Swiper \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647\u200c\u062a\u0631 \u0628\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631 \u06a9\u0645\u06a9 \u06a9\u0646\u0646\u062f. \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u060c \u0628\u0627\u06cc\u062f \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0645\u0637\u0627\u0644\u0639\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u0627\u0632 \u062a\u0648\u0627\u0628\u0639 \u0648 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0622\u0646\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u062c\u0645\u0639 \u0628\u0646\u062f\u06cc<\/h2>\n\n\n\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0622\u0645\u0648\u0632\u0634\u06cc\u060c \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 HTML\u060c CSS \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u06af\u0627\u0645\u200c\u0628\u0647\u200c\u06af\u0627\u0645 \u0634\u0631\u062d \u062f\u0627\u062f\u06cc\u0645. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631\u06cc \u062c\u0630\u0627\u0628 \u0648 \u067e\u0648\u06cc\u0627 \u0628\u0631\u0627\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647\u200c\u0627\u06cc\u0646\u200c\u062a\u0631\u062a\u06cc\u0628\u060c \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u062e\u0627\u0637\u0628\u0627\u0646 \u062e\u0648\u062f \u0631\u0627 \u0627\u0631\u062a\u0642\u0627 \u062f\u0647\u06cc\u062f.<\/p>\n\n\n<div class=\"jet-listing-grid--50121\" style=\"\"><div class=\"jet-listing-dynamic-field-block zht-maktab-khooneh-course cb-fb2qc30r\"data-is-block=\"jet-engine\/dynamic-field\"><div class=\"jet-listing-dynamic-field__content\" >\n<div class=\"course-card\">\n    <div class=\"course-card-img\">\n        <img decoding=\"async\" \n            data-src=\"https:\/\/media1.maktabkhooneh.org\/CACHE\/images\/courses\/images\/HTML_Qhq5DTI_1403-08-16-164537770\/8baf27066913f44bec32b4534a429d52.webp?expire=4893471932&#038;token=afbe4b4cb4fedc0da3e390b25320ffc0&#038;md5=r75LTLT-3A2j45CyUyD_wA==\" \n            alt=\"\u0622\u0645\u0648\u0632\u0634 HTML \u0648 CSS\" \n            title=\"\u0622\u0645\u0648\u0632\u0634 HTML \u0648 CSS\" \n            width=\"100%\" \n            height=\"auto\"\n           \n         src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\">\n    <\/div>\n\n    <div class=\"course-details\">\n        <a href=\"https:\/\/maktabkhooneh.org\/course\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-html-css-mk865\/\" class=\"course-title\" target=\"_blank\" rel=\"noopener noreferrer\">\n            \u0622\u0645\u0648\u0632\u0634 HTML \u0648 CSS        <\/a>\n\n        <div class=\"course-price\">\n            \n                <span class=\"real-price\">\n                                            \u06f1,\u06f4\u06f9\u06f9,\u06f0\u06f0\u06f0                                    <\/span>\n\n                <span>\n                    <span class=\"discounted-price\">\n                        \u06f5\u06f9\u06f9,\u06f6\u06f0\u06f0                    <\/span>\n                    <span class=\"price-currency\">\u062a\u0648\u0645\u0627\u0646<\/span>\n                <\/span>\n\n                                    <div class=\"discount-percentage\">\n                        \u06f6\u06f0%                    <\/div>\n                \n                    <\/div>\n        <button class=\"course-cta-button\" data-course-url=\"https:\/\/maktabkhooneh.org\/course\/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-html-css-mk865\/\">\n            \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062e\u0631\u06cc\u062f        <\/button>\n    <\/div>\n<\/div>\n<\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>\u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0648\u0628\u060c \u0627\u0648\u0644\u06cc\u0646 \u062a\u0623\u062b\u06cc\u0631\u06af\u0630\u0627\u0631\u06cc \u062d\u0631\u0641 \u0627\u0648\u0644 \u0631\u0627 \u0645\u06cc\u200c\u0632\u0646\u062f. \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u062a\u0646\u0647\u0627 \u0686\u0646\u062f \u062b\u0627\u0646\u06cc\u0647 \u0641\u0631\u0635\u062a \u062f\u0627\u0631\u062f \u062a\u0627 \u062a\u0648\u062c\u0647 \u0645\u062e\u0627\u0637\u0628 \u0631\u0627 \u062c\u0644\u0628 \u06a9\u0646\u062f \u0648 \u0627\u0648 \u0631\u0627 \u0628\u0647 \u06af\u0634\u062a\u200c\u0648\u06af\u0630\u0627\u0631 \u062a\u0631\u063a\u06cc\u0628 \u0646\u0645\u0627\u06cc\u062f. \u06cc\u06a9\u06cc \u0627\u0632 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0645\u0624\u062b\u0631 \u0628\u0631\u0627\u06cc \u062a\u062d\u062a \u062a\u0623\u062b\u06cc\u0631 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0628\u0627\u0632\u062f\u06cc\u062f\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u062f\u0631 \u0647\u0645\u0627\u0646 \u0646\u06af\u0627\u0647 \u0627\u0648\u0644\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\u0647\u0627 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u062a\u0627 [&hellip;]<\/p>\n","protected":false},"author":28,"featured_media":39262,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,30,12],"tags":[],"class_list":["post-39258","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-and-it-training","category-web-programming-articles","category-java-script-articles"],"_links":{"self":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/39258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/comments?post=39258"}],"version-history":[{"count":5,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/39258\/revisions"}],"predecessor-version":[{"id":68355,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/posts\/39258\/revisions\/68355"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/media\/39262"}],"wp:attachment":[{"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/media?parent=39258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/categories?post=39258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maktabkhooneh.org\/mag\/wp-json\/wp\/v2\/tags?post=39258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}