DAMOO

Информатика · ҰБТ 2026 · 06. Ақпараттық объектілерді құру және түрлендіру

Web-жобалау

Тестті бастау

Тест тапсыру үшін жүйеге кіру немесе тіркелу керек.

Конспект

Оқулықтық тірек

Негізгі ұғымдар

  • HTML — веб-парақшаның құрылымын анықтайтын гипермәтіндік белгілеу тілі; файл кеңейтілімі .html, тегтер бұрыштық жақшада.
  • CSS (Cascading Style Sheets) — мазмұнды (HTML) безендіруден бөлетін каскадты стильдер кестесі: селектор { қасиет: мән; }.
  • JavaScript — браузерде орындалатын скрипт тілі; <script> тегі арқылы қосылады.
  • HTML5 мультимедиа тегтері: <img>, <audio>, <video>, <iframe>.
  • Веб-жүйенің үш деңгейі: клиент (браузер), сервер (PHP, Python, Node.js), деректер қоры (MySQL, PostgreSQL).

Теория

Құжат қаңқасы.

<!DOCTYPE html>
<html lang="kk">
<head>
  <meta charset="UTF-8">
  <title>Беттің тақырыбы</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Тақырып</h1>
  <p>Абзац мәтіні</p>
</body>
</html>

<!DOCTYPE html> — HTML5 декларациясы; <head> — метадеректер (экранда көрінбейді): <meta charset>, <title> (браузер қойындысындағы атау), <link>; <body> — экранда көрінетін мазмұн.

Негізгі тегтер.

Тег Қызметі
<h1> … <h6> 1–6 деңгейлі тақырыптар
<p> абзац
<br> жаңа жол (дара тег)
<hr> көлденең сызық
<b>, <strong> / <i>, <em> қалың / курсив
<ul> / <ol> / <li> маркерленген / нөмірленген тізім / элемент
<a href="URL" target="_blank"> гиперсілтеме (жаңа қойындыда)
<table>, <tr>, <th>, <td> кесте, жол, тақырып ұяшығы, дерек ұяшығы

CSS қосу тәсілдері. 1) Сыртқы — <link rel="stylesheet" href="style.css"> (ең тиімді, бір файл бүкіл сайтты безендіреді); 2) ішкі — <head> ішіндегі <style>; 3) жолдық — style атрибуты: <p style="color: green;">.

Селекторлар. Тег (h1 { … }), класс — нүктемен (.card), идентификатор — торламен (#header), псевдокласс (a:hover — тінтуір үстінде тұрғанда).

Блоктық модель (Box Model) ішінен сыртқа: content (width, height) → padding (ішкі бос орын) → border (жиектеме) → margin (сыртқы бос орын).

Скрипттер. JavaScript формадағы деректерді серверге жібермей тексереді, динамикалық элементтер (мәзір, модаль терезе, слайдер, таймер) жасайды, оқиғаларды (шерту, перне басу) өңдейді. Сыртқы скрипт: <script src="main.js"></script>, әдетте </body> алдына қойылады. Дайын кітапханалар мен виджеттер (карталар, валюта конвертері) файл немесе CDN сілтемесі арқылы қосылады.

Мультимедиа. HTML5-ке дейін дыбыс пен бейнеге Adobe Flash плагині керек болатын.

  • <img src="photo.jpg" alt="сипаттама" width="300"> — alt: сурет ашылмағанда көрсетілетін баламалы мәтін;
  • <audio controls> + <source src="a.mp3" type="audio/mpeg"> — controls ойнату батырмаларын шығарады;
  • <video controls poster="cover.jpg"> — poster: ойнатуға дейінгі мұқаба;
  • <iframe> — басқа ресурсты (YouTube, карта) бет ішіне кірістіреді.

Веб-бет пен ДҚ байланысы. Браузер ДҚ-ға тікелей қосыла алмайды. Қадамдар: форма толтырылады → HTTP-сұраныс серверге → серверлік скрипт ДҚБЖ-мен байланысады (хост, порт, логин, пароль) → SQL-сұраныс → нәтиже серверге → HTML құрастырылып браузерге жіберіледі. SQL-инъекция қаупі — пайдаланушы мәтіні сұранысқа тікелей қосылса пайда болады; шешімі — параметрленген сұраныстар:

import sqlite3

def get_student_by_id(student_id):
    conn = sqlite3.connect('school.db')
    cursor = conn.cursor()
    cursor.execute("SELECT name, gpa FROM Students WHERE id = ?",
                   (student_id,))   # параметрленген сұраныс
    data = cursor.fetchone()
    conn.close()
    return data

CMS, хостинг және домен

  • CMS — бірнеше адамға мазмұнды бірге жасап өңдеуге мүмкіндік беретін жүйе; сайтты маманның қатысуынсыз жаңартуға болады. Мысалы, WordPress — бастапқы коды ашық платформа (GPLv2), код жазбай жариялауға мүмкіндік береді.
  • Хостинг — сайт файлдарын интернетке үнемі қосылған веб-серверде сақтау.
  • Домен — серверге адам оқи алатын атау (mozilla.org), оң жақтан солға оқылады, соңғы бөлігі — жоғары деңгейлі домен (.com, .org, .kz). Домен тіркеушіде (регистраторда) тіркеледі: атауды сатып алмайсың, бір немесе бірнеше жылға пайдалану құқығын төлейсің.

Мысалдар

  1. Сілтеме жаңа қойындыда ашылуы үшін? <a href="https://bilimland.kz" target="_blank">Білім порталы</a>.
  2. Барлық class="btn" элементтерін жасыл ету. .btn { background-color: green; } — класс селекторы нүктемен.
  3. Мазмұн мен жиектеме арасындағы бос орын қай қасиет? padding; көрші элементтерге дейінгісі — margin.
  4. Бейне басталғанға дейін сурет көрсету. <video controls poster="intro.jpg">…</video>.

ҰБТ-дағы жиі қателер

  • <title> мазмұны бетте көрінеді деп ойлау: ол браузер қойындысында көрінеді, <head> ішінде.
  • <ul> мен <ol> шатастыру: <ol> — нөмірленген.
  • Класс пен идентификатор белгілерін ауыстыру: . — класс, # — id.
  • padding пен margin шатастыру.
  • <th> мен <td> айырмасын білмеу: <th> — тақырып ұяшығы.
  • Браузер ДҚ-ға тікелей қосылады деп ойлау: байланысты сервер орнатады.

Өзіңді тексер

  1. Жаңа жолға түсіретін дара тег? — <br>.
  2. CSS-ті бүкіл сайтқа қолданудың ең тиімді тәсілі? — Сыртқы стиль кестесі (<link>).
  3. Суреттің баламалы мәтінін беретін атрибут? — alt.
  4. Тінтуір элемент үстінде тұрғандағы стильді беретін псевдокласс? — :hover.
  5. SQL-инъекциядан қорғаудың тәсілі? — Параметрленген (дайындалған) сұраныстар.

Осы бөлімнің басқа тақырыптары