Учитель: Щеголева Анна Павловна | Практическая работа — Разработка сайта из web-страниц

🎯 Цель работы

Научиться создавать многостраничный веб-сайт на языке HTML: использовать базовые теги, атрибуты форматирования, гиперссылки, вставлять изображения, таблицы и списки, организовывать удобную навигацию между страницами.

📋 Задание

Создать сайт из 5 связанных HTML-страниц. Первая страница — главная (index.html) с навигационным меню на остальные 4 страницы.

🏠

index.html

Главная страница (навигация)

💻

ustroystva.html

Устройства ПК

🌐

seti.html

Компьютерные сети

📅

istoriya.html

История ИТ

🔒

bezopasnost.html

Инфобезопасность

📚 Содержание

01Подготовка проекта 02Базовая структура 03Навигация и ссылки 04Форматирование текста 05Вставка изображений 06Списки 07Таблицы 08Готовые примеры кода

Подготовка проекта

Файлы и папки

Перед написанием кода необходимо создать структуру проекта — папку со всеми файлами.

📁

Создайте на рабочем столе папку Informatica_Site, внутри — подпапку images для хранения картинок.

📂 Informatica_Site/ ├── 📄 index.html ← Главная страница ├── 📄 ustroystva.html ← Устройства ПК ├── 📄 seti.html ← Компьютерные сети ├── 📄 istoriya.html ← История ИТ ├── 📄 bezopasnost.html ← Информационная безопасность └── 📂 images/ ├── 🖼 komputer.jpg ├── 🖼 seti.jpg ├── 🖼 istoriya.jpg └── 🖼 bezopasnost.jpg

💡

Для редактирования HTML используйте Notepad++ или Visual Studio Code — они подсвечивают код и помогают найти ошибки.

Базовая структура каждой страницы

header → nav → main → footer

Каждая из 5 страниц строится по единому шаблону. Браузер читает страницу сверху вниз, как книгу.

Шапка: логотип, заголовок, слоган сайта

↓

Навигация: гиперссылки на все 5 страниц

↓

Главный контент: текст, картинки, таблицы, списки

↓

шаблон.html — базовая структура

<!-- Объявление типа документа — всегда первая строка -->
<!DOCTYPE html>

<!-- Корневой тег; lang="ru" говорит браузеру: текст на русском -->
<html lang="ru">

<!-- Секция HEAD: невидима пользователю, но важна для браузера -->
<head>
  <!-- Кодировка UTF-8 позволяет отображать русские буквы -->
  <meta charset="UTF-8">

  <!-- Адаптация под мобильные экраны -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Заголовок вкладки браузера -->
  <title>Название страницы</title>
</head>

<!-- Секция BODY: всё, что видит пользователь -->
<body>

  <!-- 1. Шапка —————————————————————— -->
  <header style="background-color:#003366; color:white; text-align:center; padding:30px;">
    <h1>Название сайта</h1>
  </header>

  <!-- 2. Навигация ———————————————————— -->
  <nav>...</nav>

  <!-- 3. Главный контент —————————————— -->
  <main style="max-width:900px; margin:30px auto; padding:20px;">
    <!-- сюда вставляем текст, картинки, таблицы -->
  </main>

  <!-- 4. Подвал ——————————————————————— -->
  <footer style="text-align:center; padding:15px; background-color:#003366; color:white;">
    <p>© 2026 Ученик 11 класса · Практическая работа по информатике</p>
  </footer>

</body>
</html>

Справочник тегов структуры

Тег	Назначение	Виден пользователю?
<!DOCTYPE html>	Объявляет тип документа — HTML5	Нет
<html>	Корневой элемент, содержит всю страницу	Нет
<head>	Мета-информация: кодировка, заголовок, стили	Нет
<meta charset>	Кодировка символов (UTF-8 = русский язык)	Нет
<title>	Заголовок вкладки браузера	Во вкладке
<body>	Весь видимый контент страницы	Да
<header>	Шапка: логотип, заголовок, слоган	Да
<nav>	Блок навигации (меню с ссылками)	Да
<main>	Основной контент (уникален для каждой страницы)	Да
<footer>	Подвал: автор, год, копирайт	Да

Навигация — гиперссылки между страницами

<a href> · <nav> · <ul>

Навигационное меню одинаково на всех 5 страницах — просто скопируйте его в каждый файл.

🔗

Тег <a href="..."> создаёт гиперссылку. Атрибут href содержит адрес (имя файла).

nav — навигационное меню (вставить на все 5 страниц)

<!-- Семантический тег <nav> — блок навигации -->
<nav style="background-color:#f0f0f0; padding:15px; text-align:center;">

  <!-- Список без маркеров (list-style:none убирает точки) -->
  <ul style="list-style:none; padding:0; margin:0;">

    <!-- display:inline — пункты в одну строку -->
    <li style="display:inline; margin:0 15px;">
      <!-- href="index.html" — ссылка на главную страницу -->
      <a href="index.html">Главная</a>
    </li>

    <li style="display:inline; margin:0 15px;">
      <!-- title — всплывающая подсказка при наведении -->
      <a href="ustroystva.html" title="Устройства ПК">Устройства ПК</a>
    </li>

    <li style="display:inline; margin:0 15px;">
      <a href="seti.html">Компьютерные сети</a>
    </li>

    <li style="display:inline; margin:0 15px;">
      <a href="istoriya.html">История ИТ</a>
    </li>

    <li style="display:inline; margin:0 15px;">
      <!-- target="_blank" — открыть в новой вкладке (необязательно) -->
      <a href="bezopasnost.html">Информационная безопасность</a>
    </li>

  </ul>
</nav>

Атрибуты тега <a>

Атрибут	Значение	Что делает
href	"ustroystva.html"	Адрес страницы (имя файла в той же папке)
target	"_blank"	Открыть ссылку в новой вкладке
title	"Подсказка"	Всплывающий текст при наведении мыши
href	"https://google.com"	Ссылка на внешний сайт (абсолютный адрес)

🌐

Ссылка на внешний ресурс: <a href="https://ru.wikipedia.org" target="_blank">Wikipedia</a>

Форматирование текста

<h1>–<h3> · <p> · <strong> · <em>

Для оформления текста HTML предоставляет набор тегов форматирования.

форматирование текста

<!-- Заголовки: h1 — самый крупный, h6 — самый мелкий -->
<h1 style="color:#003366; text-align:center;">Главный заголовок страницы</h1>
<h2 style="color:#0055aa;">Подзаголовок раздела</h2>
<h3>Заголовок подраздела</h3>

<!-- Обычный абзац текста -->
<p style="font-size:1em; text-align:justify;">
  Обычный текст абзаца. Браузер автоматически
  добавляет отступы вверху и внизу абзаца.
</p>

<!-- Жирный текст: оба варианта работают одинаково -->
<p>Устройство: <strong>процессор</strong> и <b>видеокарта</b></p>

<!-- Курсив: em (смысловое выделение) или i (просто стиль) -->
<p>Пример: <em>курсивный текст</em> и <i>также курсив</i></p>

<!-- Горизонтальная линия-разделитель -->
<hr>

<!-- Принудительный перевод строки (без нового абзаца) -->
<p>Первая строка<br>Вторая строка того же абзаца</p>

Тег	Результат	Атрибут style (пример)
<h1>	Крупный заголовок	`color:#003366; text-align:center`
<p>	Обычный абзац	`font-size:1em; text-align:justify`
<strong>	Жирный текст	—
<em>	Курсив	—
<hr>	──────────	`color:#ccc`
<br>	Новая строка	—

Вставка изображений

<img src alt width height>

Тег <img> — одиночный (без закрывающего тега). Обязательный атрибут — alt (описание картинки).

вставка изображений

<!-- Способ 1: картинка из папки images/ на компьютере -->
<img
  src="images/komputer.jpg"
  alt="Персональный компьютер"
  width="600"
  height="350"
  style="display:block; margin:20px auto; border-radius:8px;"
>

<!-- Способ 2: картинка из интернета (по ссылке URL) -->
<img
  src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Touchscreen_of_an_LG_Nexus_4.jpg/320px-Touchscreen_of_an_LG_Nexus_4.jpg"
  alt="Изображение из интернета"
  width="400"
  style="display:block; margin:15px auto;"
>

<!-- Картинка как гиперссылка (клик → переход на страницу) -->
<a href="ustroystva.html">
  <img src="images/komputer.jpg" alt="Перейти к устройствам ПК" width="200">
</a>

🖥️

Устройства ПКimages/komputer.jpgВставьте фото монитора, системного блока или клавиатуры

🌐

Компьютерные сетиimages/seti.jpgСхема сети, роутер, кабели

📅

История ИТimages/istoriya.jpgПервый компьютер ENIAC или перфокарты

🔒

Безопасностьimages/bezopasnost.jpgЗамок, щит, антивирус

Атрибут	Пример	Назначение
src	`"images/foto.jpg"`	Путь к файлу изображения
alt	`"Описание"`	Текст если картинка не загрузилась (обязательно!)
width	`"600"`	Ширина в пикселях
height	`"350"`	Высота в пикселях
style	`"margin:auto"`	Встроенный CSS-стиль

Списки

<ul> · <ol> · <li>

HTML поддерживает два вида списков: маркированный (с точками) и нумерованный.

маркированный и нумерованный списки

<!-- МАРКИРОВАННЫЙ список (ul = unordered list — без номеров) -->
<h2>Устройства ввода информации</h2>
<ul>
  <!-- li = list item — пункт списка -->
  <li>Клавиатура</li>
  <li>Мышь</li>
  <li>Сканер</li>
  <li>Веб-камера</li>
  <li>Микрофон</li>
</ul>

<!-- НУМЕРОВАННЫЙ список (ol = ordered list — с номерами 1, 2, 3...) -->
<h2>Этапы развития ЭВМ</h2>
<ol>
  <li>I поколение — ламповые ЭВМ (1940-е–1950-е)</li>
  <li>II поколение — транзисторные (1960-е)</li>
  <li>III поколение — интегральные схемы (1970-е)</li>
  <li>IV поколение — микропроцессоры (1980-е–н.в.)</li>
</ol>

<!-- Вложенный список (список внутри списка) -->
<h2>Компьютерные сети</h2>
<ul>
  <li>По масштабу:
    <ul>
      <li>LAN — локальная сеть</li>
      <li>MAN — городская сеть</li>
      <li>WAN — глобальная сеть</li>
    </ul>
  </li>
</ul>

Тег	Вид	Применение
<ul><li>	• Маркер	Перечни без порядка (устройства, правила)
<ol><li>	1. Номер	Последовательные шаги, этапы, рейтинги
<ul> вложенный	◦ Вложен	Иерархические структуры

Таблицы

<table> · <tr> · <th> · <td>

Таблицы — идеальный способ представить сравнительные данные, хронологию или технические характеристики.

таблица — поколения ЭВМ

<!-- table — контейнер таблицы
     border="1" — граница вокруг ячеек
     border-collapse:collapse — убирает двойные линии
     width:80% — ширина таблицы 80% от страницы -->
<table
  border="1"
  style="border-collapse:collapse; width:80%; margin:20px auto;"
>

  <!-- tr = table row — строка таблицы -->
  <tr style="background-color:#003366; color:white;">
    <!-- th = table header — заголовок столбца (жирный, центрирован) -->
    <th style="padding:10px;">Поколение</th>
    <th style="padding:10px;">Годы</th>
    <th style="padding:10px;">Элементная база</th>
  </tr>

  <!-- Строки с данными -->
  <tr style="background-color:#eef4ff;">
    <!-- td = table data — обычная ячейка -->
    <td style="padding:8px; text-align:center;">I</td>
    <td style="padding:8px;">1940–1955</td>
    <td style="padding:8px;">Электронные лампы</td>
  </tr>

  <tr>
    <td style="padding:8px; text-align:center;">II</td>
    <td style="padding:8px;">1955–1965</td>
    <td style="padding:8px;">Транзисторы</td>
  </tr>

  <tr style="background-color:#eef4ff;">
    <td style="padding:8px; text-align:center;">III</td>
    <td style="padding:8px;">1965–1980</td>
    <td style="padding:8px;">Интегральные схемы</td>
  </tr>

  <tr>
    <td style="padding:8px; text-align:center;">IV</td>
    <td style="padding:8px;">1980–н.в.</td>
    <td style="padding:8px;">Микропроцессоры</td>
  </tr>

</table>

Тег	Расшифровка	Роль в таблице
<table>	table	Контейнер всей таблицы
<tr>	table row	Одна строка таблицы
<th>	table header	Ячейка-заголовок (жирная)
<td>	table data	Обычная ячейка с данными

Готовые примеры кода — 5 страниц

Полный HTML-код

Ниже приведён полный готовый код каждой из 5 страниц. Скопируйте код в соответствующий файл.

index.html — Главная страница

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Информатика 11 класс — Главная</title>
</head>

<body style="font-family:Arial,sans-serif; margin:0; padding:0; background-color:#f9f9f9;">

  <!-- 1. Шапка -->
  <header style="background-color:#003366; color:white; text-align:center; padding:30px 0;">
    <h1>Добро пожаловать на сайт по информатике!</h1>
    <p style="font-size:1.2em;">Разработка многостраничного сайта</p>
  </header>

  <!-- 2. Навигация -->
  <nav style="background-color:#f0f0f0; padding:15px; text-align:center;">
    <ul style="list-style:none; padding:0; margin:0;">
      <li style="display:inline; margin:0 15px;"><a href="index.html">Главная</a></li>
      <li style="display:inline; margin:0 15px;"><a href="ustroystva.html">Устройства ПК</a></li>
      <li style="display:inline; margin:0 15px;"><a href="seti.html">Компьютерные сети</a></li>
      <li style="display:inline; margin:0 15px;"><a href="istoriya.html">История ИТ</a></li>
      <li style="display:inline; margin:0 15px;"><a href="bezopasnost.html">Информационная безопасность</a></li>
    </ul>
  </nav>

  <!-- 3. Главный контент -->
  <main style="max-width:900px; margin:30px auto; padding:20px; background:white; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1);">

    <h2 style="color:#003366; text-align:center;">Добро пожаловать!</h2>

    <!-- Изображение с ссылкой -->
    <a href="ustroystva.html">
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/320px-Good_Food_Display_-_NCI_Visuals_Online.jpg"
        alt="Перейти к устройствам ПК"
        width="320"
        style="display:block; margin:20px auto; border-radius:8px;"
      >
    </a>

    <p style="text-align:center; color:#555;">
      Данный сайт создан в рамках практической работы по информатике.

      Выберите раздел в меню навигации выше.
    </p>

    <h3 style="color:#003366;">Разделы сайта:</h3>
    <ul>
      <li><a href="ustroystva.html">Основные устройства персонального компьютера</a></li>
      <li><a href="seti.html">Передача информации. Компьютерные сети</a></li>
      <li><a href="istoriya.html">История развития техники и информационных технологий</a></li>
      <li><a href="bezopasnost.html">Информационная культура и безопасность</a></li>
    </ul>

  </main>

  <!-- 4. Подвал -->
  <footer style="text-align:center; padding:15px; background-color:#003366; color:white; margin-top:40px;">
    <p>© 2026 Ученик 11 класса · Практическая работа по информатике</p>
    <p>Выполнил: Иванов Иван · 11 класс · 15 апреля 2026 г.</p>
  </footer>

</body>
</html>

ustroystva.html — Устройства ПК

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Устройства персонального компьютера</title>
</head>

<body style="font-family:Arial,sans-serif; margin:0; background:#f9f9f9;">

  <header style="background:#003366; color:white; text-align:center; padding:30px;">
    <h1>Основные устройства персонального компьютера</h1>
  </header>

  <nav style="background:#f0f0f0; padding:15px; text-align:center;">
    <ul style="list-style:none; padding:0; margin:0;">
      <li style="display:inline; margin:0 12px;"><a href="index.html">Главная</a></li>
      <li style="display:inline; margin:0 12px;"><a href="ustroystva.html">Устройства ПК</a></li>
      <li style="display:inline; margin:0 12px;"><a href="seti.html">Компьютерные сети</a></li>
      <li style="display:inline; margin:0 12px;"><a href="istoriya.html">История ИТ</a></li>
      <li style="display:inline; margin:0 12px;"><a href="bezopasnost.html">Безопасность</a></li>
    </ul>
  </nav>

  <main style="max-width:900px; margin:30px auto; padding:20px; background:white; border-radius:8px;">

    <h2 style="color:#003366;">Что такое персональный компьютер?</h2>

    <p>
      <strong>Персональный компьютер (ПК)</strong> — это универсальная вычислительная
      машина, предназначенная для работы одного пользователя. Он состоит из
      <em>аппаратного обеспечения</em> (hardware) и программного (software).
    </p>

    <!-- Изображение компьютера -->
    <img
      src="images/komputer.jpg"
      alt="Персональный компьютер"
      width="600"
      style="display:block; margin:20px auto; border-radius:8px; border:1px solid #ddd;"
    >

    <h2 style="color:#003366;">Устройства ввода информации</h2>
    <ul>
      <li><strong>Клавиатура</strong> — ввод символов и команд</li>
      <li><strong>Мышь</strong> — управление курсором</li>
      <li><strong>Сканер</strong> — ввод изображений</li>
      <li><strong>Микрофон</strong> — ввод звука</li>
      <li><strong>Веб-камера</strong> — ввод видеоизображения</li>
    </ul>

    <h2 style="color:#003366;">Устройства вывода информации</h2>
    <ul>
      <li><strong>Монитор</strong> — отображение информации</li>
      <li><strong>Принтер</strong> — печать на бумаге</li>
      <li><strong>Колонки</strong> — вывод звука</li>
      <li><strong>Проектор</strong> — проецирование на экран</li>
    </ul>

    <h2 style="color:#003366;">Таблица: основные характеристики устройств</h2>
    <table border="1" style="border-collapse:collapse; width:90%; margin:15px auto;">
      <tr style="background:#003366; color:white;">
        <th style="padding:10px;">Устройство</th>
        <th style="padding:10px;">Тип</th>
        <th style="padding:10px;">Назначение</th>
      </tr>
      <tr style="background:#eef4ff;">
        <td style="padding:8px;">Процессор (CPU)</td>
        <td style="padding:8px;">Обработка</td>
        <td style="padding:8px;">Выполнение вычислений и команд</td>
      </tr>
      <tr>
        <td style="padding:8px;">ОЗУ (RAM)</td>
        <td style="padding:8px;">Хранение</td>
        <td style="padding:8px;">Оперативная память (временно)</td>
      </tr>
      <tr style="background:#eef4ff;">
        <td style="padding:8px;">Жёсткий диск (HDD/SSD)</td>
        <td style="padding:8px;">Хранение</td>
        <td style="padding:8px;">Долгосрочное хранение данных</td>
      </tr>
      <tr>
        <td style="padding:8px;">Видеокарта (GPU)</td>
        <td style="padding:8px;">Вывод</td>
        <td style="padding:8px;">Формирование изображения</td>
      </tr>
    </table>

  </main>

  <footer style="text-align:center; padding:15px; background:#003366; color:white; margin-top:40px;">
    <p>© 2026 · Практическая работа по информатике · 11 класс</p>
  </footer>

</body>
</html>

seti.html — Компьютерные сети

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Передача информации. Компьютерные сети</title>
</head>

<body style="font-family:Arial,sans-serif; margin:0; background:#f9f9f9;">

  <header style="background:#003366; color:white; text-align:center; padding:30px;">
    <h1>Передача информации. Компьютерные сети</h1>
  </header>

  <nav style="background:#f0f0f0; padding:15px; text-align:center;">
    <ul style="list-style:none; padding:0; margin:0;">
      <li style="display:inline; margin:0 12px;"><a href="index.html">Главная</a></li>
      <li style="display:inline; margin:0 12px;"><a href="ustroystva.html">Устройства ПК</a></li>
      <li style="display:inline; margin:0 12px;"><a href="seti.html">Компьютерные сети</a></li>
      <li style="display:inline; margin:0 12px;"><a href="istoriya.html">История ИТ</a></li>
      <li style="display:inline; margin:0 12px;"><a href="bezopasnost.html">Безопасность</a></li>
    </ul>
  </nav>

  <main style="max-width:900px; margin:30px auto; padding:20px; background:white; border-radius:8px;">

    <h2 style="color:#003366;">Что такое компьютерная сеть?</h2>
    <p>
      <strong>Компьютерная сеть</strong> — это система взаимосвязанных компьютеров
      и устройств, которые обмениваются данными и используют общие ресурсы.
    </p>

    <img
      src="images/seti.jpg"
      alt="Компьютерная сеть"
      width="600"
      style="display:block; margin:20px auto; border-radius:8px;"
    >

    <h2 style="color:#003366;">Виды компьютерных сетей по масштабу</h2>
    <ul>
      <li><strong>LAN</strong> (Local Area Network) — <em>локальная сеть</em>: офис, школа, дом</li>
      <li><strong>MAN</strong> (Metropolitan Area Network) — <em>городская сеть</em></li>
      <li><strong>WAN</strong> (Wide Area Network) — <em>глобальная сеть</em> (Интернет)</li>
    </ul>

    <h2 style="color:#003366;">Таблица: сравнение типов сетей</h2>
    <table border="1" style="border-collapse:collapse; width:90%; margin:15px auto;">
      <tr style="background:#003366; color:white;">
        <th style="padding:10px;">Тип</th>
        <th style="padding:10px;">Охват</th>
        <th style="padding:10px;">Примеры</th>
      </tr>
      <tr style="background:#eef4ff;">
        <td style="padding:8px;">LAN</td>
        <td style="padding:8px;">до 1 км</td>
        <td style="padding:8px;">Офис, школьный класс</td>
      </tr>
      <tr>
        <td style="padding:8px;">MAN</td>
        <td style="padding:8px;">десятки км</td>
        <td style="padding:8px;">Городские сети провайдеров</td>
      </tr>
      <tr style="background:#eef4ff;">
        <td style="padding:8px;">WAN</td>
        <td style="padding:8px;">тысячи км</td>
        <td style="padding:8px;">Интернет</td>
      </tr>
    </table>

    <h2 style="color:#003366;">Полезная ссылка</h2>
    <p>
      Подробнее об Интернете:
      <a href="https://ru.wikipedia.org/wiki/Интернет" target="_blank">
        Интернет — Википедия
      </a>
    </p>

  </main>

  <footer style="text-align:center; padding:15px; background:#003366; color:white; margin-top:40px;">
    <p>© 2026 · Практическая работа по информатике · 11 класс</p>
  </footer>

</body>
</html>

istoriya.html — История ИТ

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>История развития техники и информационных технологий</title>
</head>

<body style="font-family:Arial,sans-serif; margin:0; background:#f9f9f9;">

  <header style="background:#003366; color:white; text-align:center; padding:30px;">
    <h1>История развития техники и информационных технологий</h1>
  </header>

  <nav style="background:#f0f0f0; padding:15px; text-align:center;">
    <ul style="list-style:none; padding:0; margin:0;">
      <li style="display:inline; margin:0 12px;"><a href="index.html">Главная</a></li>
      <li style="display:inline; margin:0 12px;"><a href="ustroystva.html">Устройства ПК</a></li>
      <li style="display:inline; margin:0 12px;"><a href="seti.html">Компьютерные сети</a></li>
      <li style="display:inline; margin:0 12px;"><a href="istoriya.html">История ИТ</a></li>
      <li style="display:inline; margin:0 12px;"><a href="bezopasnost.html">Безопасность</a></li>
    </ul>
  </nav>

  <main style="max-width:900px; margin:30px auto; padding:20px; background:white; border-radius:8px;">

    <h2 style="color:#003366;">Поколения ЭВМ</h2>

    <img
      src="images/istoriya.jpg"
      alt="История компьютеров"
      width="600"
      style="display:block; margin:20px auto; border-radius:8px;"
    >

    <!-- Нумерованный список поколений -->
    <ol>
      <li><strong>I поколение (1940–1955)</strong> — электронные лампы; ЭВМ занимали целые залы</li>
      <li><strong>II поколение (1955–1965)</strong> — транзисторы; уменьшение размеров</li>
      <li><strong>III поколение (1965–1980)</strong> — интегральные схемы; ЭВМ стала доступнее</li>
      <li><strong>IV поколение (1980–н.в.)</strong> — микропроцессоры; персональные компьютеры</li>
    </ol>

    <h2 style="color:#003366;">Хронология важнейших событий в ИТ</h2>
    <table border="1" style="border-collapse:collapse; width:90%; margin:15px auto;">
      <tr style="background:#003366; color:white;">
        <th style="padding:10px;">Год</th>
        <th style="padding:10px;">Событие</th>
      </tr>
      <tr style="background:#eef4ff;">
        <td style="padding:8px; text-align:center;">1946</td>
        <td style="padding:8px;">Создан первый электронный компьютер ENIAC (США)</td>
      </tr>
      <tr>
        <td style="padding:8px; text-align:center;">1969</td>
        <td style="padding:8px;">Создана ARPANET — предшественник интернета</td>
      </tr>
      <tr style="background:#eef4ff;">
        <td style="padding:8px; text-align:center;">1981</td>
        <td style="padding:8px;">Выпуск IBM PC — начало эры персональных компьютеров</td>
      </tr>
      <tr>
        <td style="padding:8px; text-align:center;">1991</td>
        <td style="padding:8px;">Тим Бернерс-Ли создаёт Всемирную паутину (WWW)</td>
      </tr>
      <tr style="background:#eef4ff;">
        <td style="padding:8px; text-align:center;">2007</td>
        <td style="padding:8px;">Выпуск первого iPhone — начало смартфонной эры</td>
      </tr>
    </table>

  </main>

  <footer style="text-align:center; padding:15px; background:#003366; color:white; margin-top:40px;">
    <p>© 2026 · Практическая работа по информатике · 11 класс</p>
  </footer>

</body>
</html>

bezopasnost.html — Информационная безопасность

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Информационная культура и безопасность</title>
</head>

<body style="font-family:Arial,sans-serif; margin:0; background:#f9f9f9;">

  <header style="background:#003366; color:white; text-align:center; padding:30px;">
    <h1>Информационная культура и безопасность</h1>
  </header>

  <nav style="background:#f0f0f0; padding:15px; text-align:center;">
    <ul style="list-style:none; padding:0; margin:0;">
      <li style="display:inline; margin:0 12px;"><a href="index.html">Главная</a></li>
      <li style="display:inline; margin:0 12px;"><a href="ustroystva.html">Устройства ПК</a></li>
      <li style="display:inline; margin:0 12px;"><a href="seti.html">Компьютерные сети</a></li>
      <li style="display:inline; margin:0 12px;"><a href="istoriya.html">История ИТ</a></li>
      <li style="display:inline; margin:0 12px;"><a href="bezopasnost.html">Безопасность</a></li>
    </ul>
  </nav>

  <main style="max-width:900px; margin:30px auto; padding:20px; background:white; border-radius:8px;">

    <h2 style="color:#003366;">Что такое информационная безопасность?</h2>
    <p>
      <strong>Информационная безопасность</strong> — это защита информации и
      информационных систем от <em>несанкционированного доступа</em>,
      использования, раскрытия, искажения, изменения, уничтожения.
    </p>

    <img
      src="images/bezopasnost.jpg"
      alt="Информационная безопасность"
      width="600"
      style="display:block; margin:20px auto; border-radius:8px;"
    >

    <h2 style="color:#003366;">Основные угрозы информационной безопасности</h2>
    <ul>
      <li><strong>Вирусы и вредоносное ПО</strong> — программы, разрушающие данные</li>
      <li><strong>Фишинг</strong> — кража паролей через поддельные сайты</li>
      <li><strong>Хакерские атаки</strong> — несанкционированный доступ к системам</li>
      <li><strong>Спам</strong> — нежелательная рассылка электронных писем</li>
    </ul>

    <h2 style="color:#003366;">Правила безопасного поведения в сети</h2>
    <ol>
      <li>Используй <strong>надёжные пароли</strong> (не менее 8 символов)</li>
      <li>Регулярно <strong>обновляй антивирус</strong></li>
      <li>Не открывай <strong>подозрительные письма и ссылки</strong></li>
      <li>Делай <strong>резервные копии</strong> важных данных</li>
      <li>Используй <strong>двухфакторную аутентификацию</strong></li>
    </ol>

    <h2 style="color:#003366;">Средства защиты информации</h2>
    <table border="1" style="border-collapse:collapse; width:90%; margin:15px auto;">
      <tr style="background:#003366; color:white;">
        <th style="padding:10px;">Средство</th>
        <th style="padding:10px;">Назначение</th>
      </tr>
      <tr style="background:#eef4ff;">
        <td style="padding:8px;">Антивирусная программа</td>
        <td style="padding:8px;">Обнаружение и удаление вирусов</td>
      </tr>
      <tr>
        <td style="padding:8px;">Брандмауэр (Firewall)</td>
        <td style="padding:8px;">Контроль сетевого трафика</td>
      </tr>
      <tr style="background:#eef4ff;">
        <td style="padding:8px;">Шифрование данных</td>
        <td style="padding:8px;">Защита данных от перехвата</td>
      </tr>
      <tr>
        <td style="padding:8px;">Резервное копирование</td>
        <td style="padding:8px;">Восстановление данных при потере</td>
      </tr>
    </table>

  </main>

  <footer style="text-align:center; padding:15px; background:#003366; color:white; margin-top:40px;">
    <p>© 2026 · Практическая работа по информатике · 11 класс</p>
  </footer>

</body>
</html>

Шаг 8: Тестирование

✅Сохраните все 5 файлов (Ctrl+S) в папке Informatica_Site
✅Откройте index.html двойным кликом в браузере
✅Проверьте: все 5 пунктов меню кликабельны и ведут на нужные страницы
✅Убедитесь, что изображения отображаются (или замените на ссылки-URL)
✅Проверьте, что таблицы и списки отображаются корректно
✅Внесите данные: замените «Иванов Иван» в footer на своё имя

⚠️

Если изображения не отображаются — проверьте, что файл находится в папке images/ и имя файла написано точно так же, как в атрибуте src. Регистр букв важен!

Практическая работа по информатике · 11 класс · Разработка сайта из web-страниц

Учитель информатики:
Щеголева Анна Павловна.

Разработка сайта из нескольких
web‑страниц

🎯 Цель работы

📋 Задание

📚 Содержание

Справочник тегов структуры

Атрибуты тега <a>

Шаг 8: Тестирование

Учитель информатики: Щеголева Анна Павловна.

Разработка сайта из несколькихweb‑страниц

🎯 Цель работы

📋 Задание

📚 Содержание

Справочник тегов структуры

Атрибуты тега <a>

Шаг 8: Тестирование

Учитель информатики:
Щеголева Анна Павловна.

Разработка сайта из нескольких
web‑страниц