{"id":398,"date":"2025-04-16T09:09:27","date_gmt":"2025-04-16T09:09:27","guid":{"rendered":"https:\/\/ajnock.com\/?p=398"},"modified":"2025-04-16T09:10:01","modified_gmt":"2025-04-16T09:10:01","slug":"398","status":"publish","type":"post","link":"https:\/\/ajnock.com\/?p=398","title":{"rendered":"\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 HTML \/ CSS \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e43\u0e19 10 \u0e19\u0e32\u0e17\u0e35"},"content":{"rendered":"\n<p><strong>\u0e40\u0e02\u0e35\u0e22\u0e19\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e1e\u0e08\u0e14\u0e49\u0e27\u0e22\u0e15\u0e31\u0e27\u0e40\u0e2d\u0e07\u0e44\u0e14\u0e49\u0e20\u0e32\u0e22\u0e43\u0e19\u0e44\u0e21\u0e48\u0e01\u0e35\u0e48\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u0e17\u0e33\u0e04\u0e27\u0e32\u0e21\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e01\u0e48\u0e2d\u0e19\u0e40\u0e23\u0e34\u0e48\u0e21<\/h2>\n\n\n\n<p><strong>HTML<\/strong> (HyperText Markup Language) \u0e04\u0e37\u0e2d\u0e20\u0e32\u0e29\u0e32\u0e43\u0e0a\u0e49\u0e2a\u0e23\u0e49\u0e32\u0e07 &#8220;\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07&#8221; \u0e02\u0e2d\u0e07\u0e40\u0e27\u0e47\u0e1a<br><strong>CSS<\/strong> (Cascading Style Sheets) \u0e04\u0e37\u0e2d\u0e20\u0e32\u0e29\u0e32\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49 &#8220;\u0e15\u0e01\u0e41\u0e15\u0e48\u0e07&#8221; \u0e23\u0e39\u0e1b\u0e23\u0e48\u0e32\u0e07 \u0e2a\u0e35 \u0e02\u0e19\u0e32\u0e14 \u0e1f\u0e2d\u0e19\u0e15\u0e4c \u0e2f\u0e25\u0e2f<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e21\u0e35<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21\u0e41\u0e01\u0e49\u0e44\u0e02\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21: \u0e40\u0e0a\u0e48\u0e19 VS Code \u0e2b\u0e23\u0e37\u0e2d Notepad++<\/li>\n\n\n\n<li>\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c \u0e40\u0e0a\u0e48\u0e19 Chrome, Edge<\/li>\n\n\n\n<li>\u0e44\u0e1f\u0e25\u0e4c HTML + CSS \u0e07\u0e48\u0e32\u0e22 \u0e46 (\u0e08\u0e30\u0e2a\u0e2d\u0e19\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e43\u0e2b\u0e49\u0e40\u0e25\u0e22\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07)<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">STEP 1: \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c HTML<\/h2>\n\n\n\n<p>\u0e40\u0e1b\u0e34\u0e14 VS Code \u0e41\u0e25\u0e49\u0e27\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e0a\u0e37\u0e48\u0e2d <code>index.html<\/code><br>\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e42\u0e04\u0e49\u0e14\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e25\u0e07\u0e44\u0e1b:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;title&gt;\u0e40\u0e27\u0e47\u0e1a\u0e41\u0e23\u0e01\u0e02\u0e2d\u0e07\u0e09\u0e31\u0e19&lt;\/title&gt;\n  &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h1&gt;\u0e2a\u0e27\u0e31\u0e2a\u0e14\u0e35, \u0e42\u0e25\u0e01!&lt;\/h1&gt;\n  &lt;p&gt;\u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e41\u0e23\u0e01\u0e17\u0e35\u0e48\u0e09\u0e31\u0e19\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e02\u0e36\u0e49\u0e19\u0e40\u0e2d\u0e07&lt;\/p&gt;\n  &lt;a href=\"https:\/\/google.com\" target=\"_blank\"&gt;\u0e44\u0e1b\u0e17\u0e35\u0e48 Google&lt;\/a&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/code><\/pre>\n\n\n\n<p>\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e44\u0e1f\u0e25\u0e4c \u0e41\u0e25\u0e49\u0e27\u0e14\u0e31\u0e1a\u0e40\u0e1a\u0e34\u0e25\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e19\u0e40\u0e1a\u0e23\u0e32\u0e27\u0e4c\u0e40\u0e0b\u0e2d\u0e23\u0e4c<br>\u0e04\u0e38\u0e13\u0e08\u0e30\u0e40\u0e2b\u0e47\u0e19\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e41\u0e23\u0e01\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e02\u0e36\u0e49\u0e19\u0e41\u0e25\u0e49\u0e27!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">STEP 2: \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c CSS<\/h2>\n\n\n\n<p>\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c\u0e0a\u0e37\u0e48\u0e2d <code>style.css<\/code> \u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c\u0e40\u0e14\u0e35\u0e22\u0e27\u0e01\u0e31\u0e19 \u0e41\u0e25\u0e49\u0e27\u0e1e\u0e34\u0e21\u0e1e\u0e4c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>body {\n  background-color: #f0f0f0;\n  font-family: sans-serif;\n  padding: 40px;\n}\n\nh1 {\n  color: #0066cc;\n  font-size: 36px;\n}\n\np {\n  font-size: 18px;\n  color: #333;\n}\n\na {\n  color: #ff6600;\n  text-decoration: none;\n}\n<\/code><\/code><\/pre>\n\n\n\n<p>\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e44\u0e1f\u0e25\u0e4c \u0e41\u0e25\u0e49\u0e27\u0e01\u0e14 Refresh \u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07<br>\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e08\u0e30\u0e14\u0e39\u0e14\u0e35\u0e02\u0e36\u0e49\u0e19\u0e17\u0e31\u0e19\u0e17\u0e35!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07 HTML \u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u0e41\u0e17\u0e47\u0e01<\/th><th>\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48<\/th><\/tr><\/thead><tbody><tr><td><code>&lt;!DOCTYPE html&gt;<\/code><\/td><td>\u0e1a\u0e2d\u0e01\u0e27\u0e48\u0e32\u0e44\u0e1f\u0e25\u0e4c\u0e19\u0e35\u0e49\u0e04\u0e37\u0e2d HTML5<\/td><\/tr><tr><td><code>&lt;html&gt;<\/code><\/td><td>\u0e04\u0e23\u0e2d\u0e1a\u0e17\u0e38\u0e01\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a<\/td><\/tr><tr><td><code>&lt;head&gt;<\/code><\/td><td>\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e2b\u0e25\u0e31\u0e07 (title, CSS, meta)<\/td><\/tr><tr><td><code>&lt;body&gt;<\/code><\/td><td>\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e17\u0e35\u0e48\u0e41\u0e2a\u0e14\u0e07\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a<\/td><\/tr><tr><td><code>&lt;h1&gt;<\/code><\/td><td>\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e43\u0e2b\u0e0d\u0e48<\/td><\/tr><tr><td><code>&lt;p&gt;<\/code><\/td><td>\u0e22\u0e48\u0e2d\u0e2b\u0e19\u0e49\u0e32<\/td><\/tr><tr><td><code>&lt;a&gt;<\/code><\/td><td>\u0e25\u0e34\u0e07\u0e01\u0e4c<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22 CSS \u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07<\/th><th>\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e21\u0e32\u0e22<\/th><\/tr><\/thead><tbody><tr><td><code>body { background-color: #f0f0f0; }<\/code><\/td><td>\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e35\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07<\/td><\/tr><tr><td><code>h1 { font-size: 36px; }<\/code><\/td><td>\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e02\u0e19\u0e32\u0e14\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23<\/td><\/tr><tr><td><code>a { text-decoration: none; }<\/code><\/td><td>\u0e25\u0e1a\u0e02\u0e35\u0e14\u0e40\u0e2a\u0e49\u0e19\u0e43\u0e15\u0e49\u0e02\u0e2d\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">BONUS: \u0e2d\u0e22\u0e32\u0e01\u0e43\u0e2b\u0e49\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e14\u0e39\u0e2a\u0e27\u0e22\u0e02\u0e36\u0e49\u0e19\u0e44\u0e27\u0e46?<\/h2>\n\n\n\n<p>\u0e25\u0e2d\u0e07\u0e43\u0e2a\u0e48\u0e42\u0e04\u0e49\u0e14\u0e19\u0e35\u0e49\u0e43\u0e19 <code>&lt;head&gt;<\/code> \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e0a\u0e49 <strong>Google Fonts<\/strong> \u0e41\u0e25\u0e30 <strong>CSS reset<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt&amp;display=swap\" rel=\"stylesheet\"&gt;\n&lt;style&gt;\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body { font-family: 'Prompt', sans-serif; }\n&lt;\/style&gt;\n<\/code><\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e42\u0e04\u0e49\u0e14\u0e23\u0e27\u0e21 (HTML + CSS)<\/h2>\n\n\n\n<p><strong>index.html<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;title&gt;\u0e41\u0e19\u0e30\u0e19\u0e33\u0e15\u0e31\u0e27&lt;\/title&gt;\n  &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h1&gt;\u0e2a\u0e27\u0e31\u0e2a\u0e14\u0e35\u0e04\u0e23\u0e31\u0e1a \u0e1c\u0e21\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e2d\u0e25&lt;\/h1&gt;\n  &lt;p&gt;\u0e1c\u0e21\u0e2a\u0e19\u0e43\u0e08\u0e01\u0e32\u0e23\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c \u0e41\u0e25\u0e30\u0e01\u0e33\u0e25\u0e31\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 HTML\/CSS&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/code><\/pre>\n\n\n\n<p><strong>style.css<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>body {\n  background: #ffffff;\n  color: #333;\n  font-family: 'Prompt', sans-serif;\n  padding: 50px;\n}\n\nh1 {\n  color: #0055aa;\n  font-size: 32px;\n}\n\np {\n  font-size: 18px;\n}\n<\/code><\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u0e2a\u0e23\u0e38\u0e1b<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u0e15\u0e49\u0e2d\u0e07\u0e23\u0e39\u0e49<\/th><th>\u0e17\u0e33\u0e44\u0e21\u0e16\u0e36\u0e07\u0e2a\u0e33\u0e04\u0e31\u0e0d<\/th><\/tr><\/thead><tbody><tr><td>HTML = \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07<\/td><td>\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e43\u0e2b\u0e49\u0e40\u0e27\u0e47\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e44\u0e14\u0e49<\/td><\/tr><tr><td>CSS = \u0e01\u0e32\u0e23\u0e15\u0e01\u0e41\u0e15\u0e48\u0e07<\/td><td>\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e27\u0e47\u0e1a\u0e14\u0e39\u0e19\u0e48\u0e32\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/td><\/tr><tr><td>\u0e43\u0e0a\u0e49 VS Code + Live Server<\/td><td>\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e41\u0e1a\u0e1a\u0e40\u0e2b\u0e47\u0e19\u0e1c\u0e25\u0e17\u0e31\u0e19\u0e17\u0e35<\/td><\/tr><tr><td>\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e08\u0e32\u0e01 w3schools \u0e2b\u0e23\u0e37\u0e2d MDN<\/td><td>\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e21\u0e37\u0e2d\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e44\u0e14\u0e49\u0e40\u0e23\u0e47\u0e27\u0e02\u0e36\u0e49\u0e19<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u0e40\u0e02\u0e35\u0e22\u0e19\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e1e\u0e08\u0e14\u0e49\u0e27\u0e22\u0e15\u0e31\u0e27\u0e40\u0e2d\u0e07\u0e44\u0e14\u0e49\u0e20\u0e32\u0e22\u0e43\u0e19\u0e44\u0e21\u0e48\u0e01\u0e35\u0e48\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14 \u0e17\u0e33\u0e04\u0e27\u0e32\u0e21\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,61],"tags":[71,70,72,65],"class_list":["post-398","post","type-post","status-publish","format-standard","hentry","category-computer-tips","category-programming","tag-css","tag-html","tag-72","tag-65"],"_links":{"self":[{"href":"https:\/\/ajnock.com\/index.php?rest_route=\/wp\/v2\/posts\/398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ajnock.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ajnock.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ajnock.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ajnock.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=398"}],"version-history":[{"count":3,"href":"https:\/\/ajnock.com\/index.php?rest_route=\/wp\/v2\/posts\/398\/revisions"}],"predecessor-version":[{"id":401,"href":"https:\/\/ajnock.com\/index.php?rest_route=\/wp\/v2\/posts\/398\/revisions\/401"}],"wp:attachment":[{"href":"https:\/\/ajnock.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ajnock.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ajnock.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}