Веб-проектирование

Учебниковая опора

• Кадиркулов Р. А., Нурмуханбетова Г. К. «Информатика. Учебник для 10 классов ЕМН», 10 класс, Алматыкітап баспасы, 2019, с. 148–178 (§§ 24–28)

Главное

• HTML (HyperText Markup Language) — язык гипертекстовой разметки; документ — текстовый файл .html с тегами.
• Скелет: <!DOCTYPE html>, <html>, <head> (метаданные, <title>), <body> (видимое содержимое).
• CSS (Cascading Style Sheets) отделяет оформление от структуры: селектор { свойство: значение; }.
• Подключение CSS: внешний файл (<link>), внутренний (<style>), встроенный (атрибут style).
• JavaScript — скрипты на стороне клиента; тег <script>; доступ к элементам через DOM.
• Мультимедиа HTML5: <img>, <audio>, <video>, <iframe> — без плагинов вроде Flash.
• Связь с БД: браузер → сервер приложений → СУБД (трёхуровневая архитектура).

Теория

Основные теги HTML

Тег	Назначение
<h1>–<h6>	заголовки (h1 — главный)
<p>	абзац
<br>, <hr>	перенос строки, горизонтальная линия (одиночные теги)
<strong>/<b>, <em>/<i>	полужирный, курсив
<ul>, <ol>, <li>	маркированный, нумерованный список, пункт
<a href="url" target="_blank">	гиперссылка (в новой вкладке)
<table>, <tr>, <th>, <td>	таблица, строка, ячейка-заголовок, ячейка
<meta charset="UTF-8">	кодировка документа

CSS-селекторы. Тега (p { … }), класса (.highlight → атрибут class), идентификатора (#header → атрибут id, уникален), универсальный (*), псевдоклассы (a:hover — наведение, a:active — клик). Рекомендуемый способ подключения — внешний файл: <link rel="stylesheet" href="style.css">.

Блочная модель: content (width, height) → padding (внутренний отступ) → border (граница) → margin (внешний отступ). Свойства текста: color, background-color, font-family, font-size, text-align.

Скрипты. JavaScript выполняется браузером: проверка форм до отправки, меню, вкладки, слайдеры, реакция на действия. Внешний скрипт <script src="app.js"></script> обычно ставят перед </body>. DOM — дерево объектов документа: document.getElementById("id"), document.querySelector(".class"). События: onclick, onchange, onsubmit. Готовые библиотеки подключают файлом или через CDN.

Мультимедиа

Тег	Атрибуты
<img> (одиночный)	src — путь, alt — альтернативный текст, width, height
<audio>	controls, autoplay, loop; вложенный <source> (MP3, WAV, OGG)
<video>	controls, poster (заставка), width, height; MP4, WebM
<iframe>	встраивает другой документ: карты, YouTube, презентации

Связь веб-страницы с БД. Уровни: клиент (HTML, CSS, JS), сервер приложений (Nginx, Apache; PHP, Python, Node.js, Java), данные (MySQL, PostgreSQL). Браузер напрямую к СУБД не обращается. Порядок: форма → POST-запрос → сервер проверяет данные и подключается к СУБД → SQL-запрос → результат → HTML/JSON → браузер. Защита от SQL-инъекций — параметризованные запросы.

Примеры

1. Минимальная страница

<!DOCTYPE html>
<html lang="ru">
<head><meta charset="UTF-8"><title>Портфолио</title></head>
<body>
  <h1>Мой проект</h1>
  <ul><li>HTML</li><li>CSS</li></ul>
  <a href="https://bilim.kz" target="_blank">Портал</a>
</body>
</html>

2. Какой селектор задаст стиль элементу <div id="header">? #header { … }; для class="card" — .card { … }.
3. Видео с заставкой: <video controls poster="cover.png"><source src="lesson.mp4" type="video/mp4"></video>.
4. Серверная часть на Python: параметризованный запрос

import sqlite3
con = sqlite3.connect(":memory:")
con.execute("CREATE TABLE Students (id INTEGER PRIMARY KEY, name TEXT, grade INT)")
con.execute("INSERT INTO Students (name, grade) VALUES (?, ?)", ("Арман", 10))
grade = 10                                   # пришло из формы
rows = con.execute("SELECT name FROM Students WHERE grade = ?", (grade,)).fetchall()
print(rows)                                  # [('Арман',)] — без подстановки строкой

Типичные ошибки на ЕНТ

• Помещают <title> в <body> — он в <head>, текст виден на вкладке браузера.
• Путают селекторы: . — класс, # — идентификатор.
• Путают padding (внутренний отступ) и margin (внешний).
• Считают <br> и <img> парными тегами — они одиночные.
• Думают, что JavaScript выполняется на сервере: в учебнике — на стороне клиента, в браузере.
• <th> — заголовочная ячейка, <td> — обычная, <tr> — строка.

Самопроверка

1. Что означает HTML? — Язык гипертекстовой разметки (HyperText Markup Language).
2. Какой атрибут тега <a> задаёт адрес? — href.
3. Какой атрибут <audio> показывает панель управления? — controls.
4. Какой способ подключения CSS рекомендуется? — Внешний файл через <link>.
5. Чем защищаются от SQL-инъекций? — Параметризованными запросами.