Web-жобалау

Тақырыпты талдау

Интернет, WWW, URL, браузер, хостинг 10 сынып

Интернет — желілердің бүкіләлемдік желісі. WWW (World Wide Web) — интернет қызметі, гиперсілтемелермен байланысқан гипермәтіндік құжаттар жүйесі. Гипермәтін — басқа құжаттарға өтулері (сілтемелері) бар мәтін. Интернеттің басқа қызметтері: электрондық пошта, файл тасымалдау (FTP), мессенджерлер, бейнебайланыс.

Браузер (Chrome, Firefox, Edge, Safari, Яндекс Браузер) — web-серверден беттерді сұрап, оларды көрсететін клиент-программа. Web-сервер сайт файлдарын сақтап, сұрауларға жауап береді. HTTP хаттамасы сұраулар мен жауаптар алмасу ережелерін сипаттайды (80 порт), HTTPS — сол шифрлаумен (TLS, 443 порт, құлып белгісі). 200 жауап коды — сәтті, 404 — бет табылмады.

URL: https://www.ustudy.kz/ent/inf/index.html?topic=13#css — https хаттамасы, www.ustudy.kz домендік аты (оңнан солға оқылады: kz — бірінші деңгейлі домен (ел), ustudy — екінші деңгейлі, www — үшінші деңгейлі), /ent/inf/ жолы, index.html файлы, ? белгісінен кейін параметрлер, # белгісінен кейін бетбелгі (беттегі орын). DNS домендік атауды сервердің IP-адресіне түрлендіреді.

Хостинг — сайтты интернетке тұрақты қосылған серверде орналастыру қызметі. Сайтты жариялау үшін: тіркеушіде домендік атауды тіркеу, хостингті жалға алу, файлдарды жүктеу (басқару панелі немесе FTP арқылы) қажет. Тегін хостинг (жарнамамен және шектеулермен) және ақылы хостинг болады.

Статикалық сайт — барлық келушілер үшін бірдей дайын HTML-файлдар жиынтығы. Динамикалық сайтта беттерді серверлік программа (PHP, Python) деректер қорындағы деректер бойынша құрастырады: web-беттің ДҚ-мен байланысы осылай жұмыс істейді — беттегі форма деректерді жібереді, серверлік скрипт SQL-сұранысты орындап, нәтижені шығарады.

HTML-құжаттың құрылымы және мәтін тегтері 10 сынып

HTML-файлдың кеңейтілімі .html немесе .htm, ол кез келген мәтіндік редакторда (Блокнот, Notepad++, VS Code) немесе визуалды редакторда жасалады. Негізгі құрылымы:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Қойынды атауы</title>
</head>
<body>
    Беттің мазмұны
</body>
</html>

<!DOCTYPE html> — құжат типін жариялау (HTML5). <html> — түбірлік элемент. <head> — қызметтік бөлім: <title> (браузер қойындысындағы атау), <meta> (кодтау, сипаттама), стильдер мен скрипттерді қосу; ол бетте көрінбейді. <body> — бетте көрінетіннің бәрі. Тегтер дұрыс кірістіріледі: <p><b>мәтін</b></p>, ал <p><b>мәтін</p></b> емес. Тегтердегі әріп регистрі маңызды емес, бірақ кіші әріппен жазу қабылданған. Түсініктеме: <!-- мәтін -->.

<h1> … <h6> тақырыптары: h1 — ең ірі әрі маңыздысы, h6 — ең кішісі; тақырыптардың барлығы 6 деңгей. <p> — абзац (үстінен және астынан шегініспен), <br> — жолды тасымалдау (жалқы тег), <hr> — көлденең сызық. Кодтағы бірнеше бос орын мен жол тасымалдауын браузер бір бос орын ретінде көрсетеді; оларды тек <pre> сақтайды.

Пішімдеу: <b> және <strong> — жуан, <i> және <em> — курсив, <u> — асты сызылған, <s> — сызылған, <sub> — төменгі индекс (H₂O), <sup> — жоғарғы индекс (x²), <small>, <mark>. Ескі оқулықтарда ескірген <font color="red" size="5" face="Arial">, <center>, <body bgcolor="yellow" text="blue">, <p align="center"> атрибуттары кездеседі — оларды тани білу керек, бірақ қазір олардың орнына CSS қолданылады. Арнайы таңбалар: < (<), > (>), & (&),   (үзілмейтін бос орын), © (©).

Тізімдер, гиперсілтемелер, суреттер және мультимедиа 10 сынып

Нөмірленген тізім <ol>, маркерленген <ul>, тармақ <li>. <ol> тегінің type атрибуты: 1 (1, 2, 3 — әдепкі), A (A, B, C), a (a, b, c), I (I, II, III), i (i, ii, iii); start атрибуты бастапқы нөмірді береді: <ol type="A" start="3"> C-дан басталады. <ul> үшін type: disc (●, әдепкі), circle (○), square (■). Тізімдерді бір-біріне кірістіруге болады. Анықтамалар тізімі: <dl>, термин <dt>, анықтама <dd>.

Гиперсілтеме: <a href="адрес">сілтеме мәтіні</a>. Абсолютті сілтеме — толық URL (https://egov.kz), салыстырмалы — ағымдағы беттен бастап жол (about.html, img/logo.png, ../index.html — .. «бір бума жоғары» дегенді білдіреді). target="_blank" сілтемені жаңа қойындыда ашады. href="mailto:info@mail.kz" — хат, href="#part2" — сол беттегі id="part2" элементіне өту (бетбелгі). Сурет те сілтеме бола алады: <a href="..."><img ...></a>.

Сурет: <img src="cat.jpg" alt="Мысық" width="200" height="150"> — жалқы тег; src — файлға дейінгі жол (міндетті), alt — балама мәтін (сурет жүктелмесе көрсетіледі, көзі көрмейтіндерге арналған программалар оқиды), width/height — пиксельмен өлшемдері. Веб үшін JPEG, PNG, GIF, SVG, WebP форматтары жарамды.

Мультимедиа (HTML5): <audio src="song.mp3" controls></audio> — басқару панелі бар дыбыс, <video src="film.mp4" width="400" controls autoplay muted loop></video> — видео, <source> бірнеше форматты көрсетуге мүмкіндік береді. <iframe src="..."> басқа бетті ендіреді, мысалы YouTube видеосын немесе картаны.

Кестелер 10 сынып

Кесте: <table> — бүкіл кесте, <tr> (table row) — жол, <td> (table data) — кәдімгі ұяшық, <th> (table header) — тақырып-ұяшық (ортасында жуан мәтін), <caption> — кесте атауы. Кесте жолдар бойынша құрылады: әр <tr> ішінде ұяшықтар солдан оңға қарай тізіледі. border="1" атрибуты жиектеме салады, cellpadding — ұяшық ішіндегі шегініс, cellspacing — ұяшықтар арасындағы қашықтық (қазір әдетте CSS қолданылады).

colspan="2" — ұяшық оңға қарай 2 бағанға созылады (көлденең біріктіру), rowspan="3" — төмен қарай 3 жолға (тік біріктіру). Біріктірілген көршісі «алып қойған» ұяшықты кодта енді жазбайды.

<table border="1">
    <tr><td colspan="2">A</td><td>B</td></tr>
    <tr><td rowspan="2">C</td><td>D</td><td>E</td></tr>
    <tr><td>F</td><td>G</td></tr>
</table>

Талдау: 3 × 3 = 9 орындық тор. A ұяшығы 2 орын алады, C де 2 орын (тігінен), қалған 5 ұяшық — бір-бір орыннан: $2 + 2 + 5 = 9$. Үшінші жолда тек екі <td> бар, себебі бірінші бағанды C ұяшығы алып тұр. Кестені тексеру: әр жолда жоғарыдан «салбырап» тұрған rowspan-дарды ескергендегі colspan қосындысы бірдей болуы керек.

Формалар 10 сынып

Форма пайдаланушыдан деректер жинайды: <form action="save.php" method="post"> … </form>. action — деректерді қайда жіберу (серверлік скрипт), method — тәсіл: get (деректер адрес жолында ?-тен кейін көрінеді, іздеу үшін) немесе post (сұрау денесінде, құпиясөздер мен үлкен деректер үшін).

<input type="..." name="..."> өрістері: text — жол, password — құпиясөз (таңбалар нүктелермен жасырылады), email, number, date, radio — ауыстырып-қосқыш (бірдей name бар топтан тек бір нұсқаны таңдауға болады), checkbox — жалауша (бірнешеуін белгілеуге болады), submit — жіберу батырмасы, reset — форманы тазалау, file — файл таңдау. Атрибуттар: value (мән/батырмадағы жазу), placeholder (кеңес), checked (әдепкі бойынша белгіленген), required (міндетті өріс), maxlength.

<textarea rows="4" cols="40"> — көпжолды өріс, <option> тармақтары бар <select> — ашылмалы тізім (selected — әдепкі бойынша таңдалған, multiple — бірнешеуін таңдау), <button> — батырма, <label> — өріске жазылған белгі (оны басқанда өріс белсендіріледі).

CSS: синтаксис, селекторлар, қосу тәсілдері 10 сынып

CSS ережесі: селектор { қасиет: мән; қасиет: мән; }, мысалы h1 { color: navy; font-size: 32px; }. Түсініктеме: /* ... */.

Селекторлар: тег бойынша p { } — барлық абзацтар; класс бойынша .note { } — class="note" бар барлық элементтер (класты көп элементке беруге болады); идентификатор бойынша #main { } — id="main" бар бір элемент (id бетте бірегей); топ h1, h2 { }; ұрпақ div p { } — div ішіндегі абзацтар; әмбебап * { }; псевдокластар a:hover (тінтуірді әкелгенде), a:visited.

Қосудың үш тәсілі. Кірістірілген (inline): нақты тегтегі style="color: red;" атрибуты. Ішкі: <head> ішіндегі <style> … </style> блогы. Сыртқы: <head> ішінде <link rel="stylesheet" href="style.css"> тегімен қосылатын жеке style.css файлы — бір файл бүкіл сайтты рәсімдейді, бұл ең ыңғайлы тәсіл.

Каскад және басымдық: элементке бірнеше ереже қолданылса, нақтырағы жеңеді: inline-стиль > id > класс > тег. Күші тең болса, кейінірек жазылған ереже жеңеді. Мысал: p {color: red}, .note {color: green}, #main {color: blue} болғанда <p class="note" id="main"> мәтіні көк болады. Кейбір қасиеттерді (түс, қаріп) ішкі элементтер мұраға алады.

CSS: қасиеттер және блоктық модель 10 сынып

Мәтін және қаріп: color (мәтін түсі), font-family (қаріп: Arial, sans-serif), font-size (өлшемі: 16px, 1.5em, 120%), font-weight: bold (жуандығы), font-style: italic, text-align: left | center | right | justify, text-decoration: underline | none, line-height. Фон: background-color, background-image: url(fon.png). Өлшемдер: width, height. Түсті атауымен (red), #FF0000 немесе #F00 кодымен, rgb(255, 0, 0) функциясымен береді.

Блоктық модель: әр элемент — қабаттардан тұратын тіктөртбұрыш (ішінен сыртқа қарай): мазмұн (width, height) → padding (ішкі шегініс, элемент фонымен боялады) → border (жиектеме: border: 2px solid black — қалыңдығы, solid/dashed/dotted стилі, түсі) → margin (сыртқы шегініс, мөлдір, көршілерден бөледі).

Есептеу: width: 200px; padding: 10px; border: 5px; margin: 20px болғанда көрінетін ені $200 + 2\cdot10 + 2\cdot5 = 230$ px, ал алатын орны $230 + 2\cdot20 = 270$ px. margin: 10px 20px жазбасы үстінен және астынан 10 px, солдан және оңнан 20 px дегенді білдіреді; margin: 5px 10px 15px 20px — үстінен, оңнан, астынан, солдан (сағат тілімен).

Блоктық элементтер (div, p, h1, ul, table) жаңа жолдан басталып, бүкіл енді алады; жолдық элементтер (span, a, b, img) мәтінмен бір жолда жүреді. display қасиеті мінез-құлықты өзгертеді (block, inline, none — жасыру, flex — икемді орналасу). <div> және <span> — CSS арқылы рәсімдеуге арналған әмбебап контейнерлер.

JavaScript және сайт жасау кезеңдері 10 сынып

JavaScript — браузер орындайтын программалау тілі; бетті интерактивті етеді: басуларға жауап беру, форманы тексеру, анимация, бетті қайта жүктемей мазмұнды өзгерту. Кодты <script> … </script> ішіне жазады немесе <script src="main.js"></script> файлымен қосады. Көбінесе дайын скрипттерді (сағат, слайдер, калькулятор) олардың кодын бетке кірістіру арқылы пайдаланады.

<p id="msg">Сәлем</p>
<button onclick="document.getElementById('msg').innerHTML = 'Басылды!'">Бас</button>
<script>
    alert('Бет жүктелді');
</script>

Негіздері: alert('...') — хабарламасы бар терезе, document.getElementById('id') — элементті табу, .innerHTML — мазмұнды өзгерту, onclick (шерту), onmouseover (тінтуірді әкелу), onload (жүктелу) оқиғалары. Айнымалылар: var x = 5; немесе let x = 5;.

Сайт жасау кезеңдері: 1) мақсат және техникалық тапсырма (кім үшін, не үшін); 2) құрылым — сайт картасы (қандай беттер және олар қалай байланысқан); 3) дизайн-макет; 4) беттеу (HTML + CSS); 5) программалау (JavaScript, серверлік бөлім, деректер қоры); 6) мазмұнмен толтыру; 7) әртүрлі браузерлерде және телефонда тестілеу; 8) хостингте жариялау; 9) алға жылжыту (SEO, жарнама) және қолдау. Бейімделгіш дизайн — сайт экран еніне бейімделеді.