{"id":23582,"date":"2025-06-04T13:55:13","date_gmt":"2025-06-04T13:55:13","guid":{"rendered":"https:\/\/elfsight.com\/ru\/?p=23582"},"modified":"2025-06-26T14:36:44","modified_gmt":"2025-06-26T14:36:44","slug":"how-to-make-a-simple-html-calendar","status":"publish","type":"post","link":"https:\/\/elfsight.com\/ru\/blog\/how-to-make-a-simple-html-calendar\/","title":{"rendered":"\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 HTML-\u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c"},"content":{"rendered":"
\r\n\t\t\t
Contents<\/div>\r\n\t\t\t
  1. \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c \u0432 HTML<\/a><\/li>
  2. \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c \u0434\u043b\u044f HTML \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0438\u0434\u0436\u0435\u0442\u0430<\/a><\/li>
  3. \u041f\u043e\u0447\u0435\u043c\u0443 \u0441\u0442\u043e\u0438\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c HTML-\u0432\u0438\u0434\u0436\u0435\u0442 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f \u0431\u0435\u0437 \u043a\u043e\u0434\u0430?<\/a><\/li>
  4. \u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/li> <\/ol>\r\n\t\t<\/div>\n

    \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f \u043d\u0430 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u044f\u0449\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0442. \u0434. \u0414\u043b\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432, \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u044f\u0442\u0438\u0439 \u0438\u043b\u0438 \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u0440\u0442\u0430\u043b\u043e\u0432 HTML-\u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0446\u0435\u043d\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c.<\/p>

    \u041a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0434\u0440\u0443\u0433\u0438\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0435 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0430.<\/p>

    \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c \u0432 HTML<\/h2>

    \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c HTML-\u043a\u043e\u0434 \u0434\u043b\u044f \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f. \u0422\u0430\u043a\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c HTML \u0438 CSS \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c JavaScript \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438.<\/p>

    \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 HTML-\u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b index.html<\/em>. \u041a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u043e\u043a \u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043c\u0430\u043a\u0435\u0442\u0443 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f.<\/p>

    \u0412\u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 HTML-\u043a\u043e\u0434 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u044b. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c \u043d\u0430 \u043e\u0434\u0438\u043d \u043c\u0435\u0441\u044f\u0446 \u0441 HTML \u0438 CSS \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>

    <!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 HTML-\u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c - \u043d\u043e\u044f\u0431\u0440\u044c 2024 \u0433.<\/title> <style> \/* \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b *\/ body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f4f4f9; margin: 0; } \/* \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f *\/ .calendar { width: 450px; border: 1px solid #ddd; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } \/* \u041e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f *\/ .calendar-header { text-align: center; background-color: #007bff; color: white; padding: 10px; font-size: 1.2em; font-weight: bold; } \/* \u041e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0434\u043d\u0435\u0439 \u043d\u0435\u0434\u0435\u043b\u0438 *\/ .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); background-color: #007bff; color: white; } .calendar-days div { padding: 10px; text-align: center; font-weight: bold; } \/* \u041e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u044f\u0447\u0435\u0435\u043a \u0441 \u0434\u0430\u0442\u0430\u043c\u0438 *\/ .calendar-dates { display: grid; grid-template-columns: repeat(7, 1fr); } .calendar-dates div { padding: 20px; text-align: center; border: 1px solid #ddd; } \/* \u0412\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c *\/ .today { background-color: #ffdd57; font-weight: bold; } <\/style><\/head><body> <!-- \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044f --> <div class=\"calendar\"> <!-- \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043c\u0435\u0441\u044f\u0446\u0430 \u0438 \u0433\u043e\u0434\u0430 --> <div class=\"calendar-header\">\u041d\u043e\u044f\u0431\u0440\u044c 2024<\/div> <!-- \u0414\u043d\u0438 \u043d\u0435\u0434\u0435\u043b\u0438 --> <div class=\"calendar-days\"> <div>\u0412\u0441<\/div> <div>\u041f\u043d<\/div> <div>\u0414\u043d<\/div> <div>\u0421\u0440<\/div> <div>\u0427\u0442<\/div> <div>\u041f\u0442<\/div> <div>\u0421\u0431<\/div> <\/div> <!-- \u041a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u043d\u044b\u0435 \u0434\u0430\u0442\u044b --> <div class=\"calendar-dates\"> <!-- \u041f\u0443\u0441\u0442\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 \u0434\u043b\u044f \u0434\u043d\u0435\u0439 \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u0435\u0441\u044f\u0446\u0430 \u0432 \u043f\u044f\u0442\u043d\u0438\u0446\u0443 --> <div><\/div> <div><\/div> <div><\/div> <div><\/div> <div><\/div> <div class=\"today\">1<\/div> <div>2<\/div> <div>3<\/div> <div>4<\/div> <div>5<\/div> <div>6<\/div> <div>7<\/div> <div>8<\/div> <div>9<\/div> <div>10<\/div> <div>11<\/div> <div>12<\/div> <div>13<\/div> <div>14<\/div> <div>15<\/div> <div>16<\/div> <div>17<\/div> <div>18<\/div> <div>19<\/div><div>20<\/div> <div>21<\/div> <div>22<\/div> <div>23<\/div> <div>24<\/div> <div>25<\/div> <div>26<\/div><div>27<\/div> <div>28<\/div> <div>29<\/div> <div>30<\/div> <\/body><\/html><\/code><\/pre>  

    \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u044c \u043d\u0430 \u043e\u043a\u0442\u044f\u0431\u0440\u044c 2024 \u0433\u043e\u0434\u0430. \u0427\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JavaScript \u0434\u043b\u044f \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0434\u0430\u0442 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043c\u0430\u043a\u0435\u0442\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u044f\u0446\u0435\u0432.<\/p>

    \"\"<\/figure>

    \u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430<\/strong><\/h3>