Кішкентай Алмаспен бірге кодтаудың қызықты әлеміне саяхат жасаңыз! Бұл кітапша HTML, CSS және JavaScript негіздерін оңай әрі көңілді түрде түсіндіріп, балаларға өздерінің алғашқы веб-сайтын жасауға шабыт береді. Логика мен шығармашылықты ұштастыратын бұл оқиға жас кодтаушыларға арналған тамаша бастама.
📘 Кітапшаның атауы: "Веб-кодтаудың әліппесі" 🗺 Кіріспе Сәлем, болашақ веб-шебер! Бұл кітапша — сенің кодтар әлеміне алғашқы қадамың. Веб-сайт жасау — бұл сиқыр емес, бұл логика мен шығармашылықтың қосындысы. Біз қазір бірге қарапайым "Сәлем, әлем!" парақшасын құрастырамыз. 🧱 1-бөлім: HTML (Сайттың қаңқасы) HTML — бұл сайттың негізі. Ол браузерге "мұнда мәтін бар", "мұнда сурет бар" деп нұсқау береді. Негізгі тегтер: <html> — барлық кодтың бастауы. <body> — сайттың көрінетін бөлігі. <h1> — ең үлкен тақырып. <p> — қарапайым мәтін (абзац). Код мысалы: HTML <!DOCTYPE html> <html> <body> <h1>Менің алғашқы парақшам</h1> <p>Веб-кодтау өте қызықты екен!</p> <button>Мені бас!</button> </body> </html> 🎨 2-бөлім: CSS (Сайттың сәні) Егер HTML сайттың қаңқасы болса, CSS — оның киімі. CSS арқылы біз түстерді, қаріптерді (шрифт) және блоктардың орналасуын реттейміз. Стиль қосу: Біз жаңағы тақырыпты көк түске бояп, батырманы (button) әдемілейік. Код мысалы: CSS h1 { color: #2c3e50; text-align: center; } button { background-color: #27ae60; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer; } Бұл кодты қосқан соң, сайтыңыз жансыз қара-ақ парақтан заманауи дизайнға айналады. ⚡ 3-бөлім: JavaScript (Сайттың жаны) Сайт тек әдемі болып қана қоймай, "сөйлеуі" керек. JavaScript (JS) — бұл іс-әрекет. Мысалы, батырманы басқанда терезе шығуы JS арқылы жасалады. Код мысалы: JavaScript const button = document.querySelector('button'); button.onclick = function() { alert('Құттықтаймын! Сенің алғашқы кодың жұмыс істеді!'); }; Енді батырманы басқанда, экранда хабарлама пайда болады. Бұл — нағыз интерактивтілік! 🛠 4-бөлім: Құралдар мен Кеңестер Веб-бағдарламалауды бастау үшін саған не керек? Visual Studio Code — код жазатын ең ыңғайлы бағдарлама. Браузер (Chrome/Edge) — нәтижені көру үшін. Қызығушылық — күнделікті 15-30 минут болса да код жазу. Алтын ереже: Қате жіберуден қорықпа. Код жұмыс істемей қалса — демек, сен жаңа нәрсені үйренуге жақынсың! 🚀 Қорытынды Сен бүгін веб-технологияның үш тірегімен таныстың. Бұл — үлкен мұхиттың шеті ғана. Ары қарай өз бетіңше кішігірім сайттар (портфолио, визитка) жасап жаттық.
