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

Разбор темы

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

Интернет — всемирная сеть сетей. WWW (World Wide Web) — служба интернета, система гипертекстовых документов, связанных гиперссылками. Гипертекст — текст с переходами (ссылками) на другие документы. Другие службы интернета: электронная почта, передача файлов (FTP), мессенджеры, видеосвязь.

Браузер (Chrome, Firefox, Edge, Safari, Яндекс Браузер) — программа-клиент, которая запрашивает страницы у веб-сервера и отображает их. Веб-сервер хранит файлы сайта и отвечает на запросы. Протокол 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) по данным из базы данных: так работает связь веб-страницы с БД — форма на странице отправляет данные, серверный скрипт выполняет 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>. Атрибут type у <ol>: 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. Проверка таблицы: в каждой строке сумма colspan с учётом «свисающих» сверху rowspan должна быть одинаковой.

Формы 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"> — многострочное поле, <select> с пунктами <option> — раскрывающийся список (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;" у конкретного тега. Внутренний: блок <style> … </style> в <head>. Внешний: отдельный файл style.css, подключаемый в <head> тегом <link rel="stylesheet" href="style.css"> — один файл оформляет весь сайт, это самый удобный способ.

Каскад и приоритет: если к элементу применяется несколько правил, побеждает более конкретное: inline-стиль > id > класс > тег. При равной силе побеждает правило, записанное позже. Пример: для <p class="note" id="main"> при p {color: red}, .note {color: green}, #main {color: blue} текст будет синим. Некоторые свойства (цвет, шрифт) наследуются вложенными элементами.

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, реклама) и поддержка. Адаптивный дизайн — сайт подстраивается под ширину экрана.