Создание Web – страницы c помощью HTML

1.

МУНИЦИПАЛЬНОЕ КАЗЕННОЕ ОБЩЕОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ МОРОЗОВСКАЯ СРЕДНЯЯ
ОБЩЕОБРАЗОВАТЕЛЬНАЯ ШКОЛА РОССОШАНСКОГО МУНИЦИПАЛЬНОГО РАЙОНА
ВОРОНЕЖСКОЙ ОБЛАСТИ
Итоговый индивидуальный проект
на тему:
«Создание Web – страницы c помощью HTML»
Выполнил:
Булавин Александр Вячеславович
учащийся 10 класса
Руководитель:
Чучупал Денис Викторович,
учитель информатики и ИКТ
с. Морозовка, 2025

2.

Актуальность
В современном мире интернет играет
ключевую роль, и умение создавать web-сайты
становится востребованным навыком. Для
привлечения внимания, сайт должен обладать
не только интересным содержанием, но и
привлекательным web-дизайном.
Понимание принципов и инструментов
создания web-страниц необходимо для
успешной публикации информации в интернете.

3.

Цель и задачи
Цель: разработать сайт с помощью языка HTML.
Задачи:
Изучить основы языка HTML;
2. Изучить основные способы создания Web – страниц;
3. Продумать и спроектировать будущий сайт;
Subtitleнеобходимую
Text Here
4. Собрать
информацию,
для верстки
страниц сайта;
5. Продумать внешний вид сайта;
6. Создать сайт.
1.
Contact

4.

Определение понятий
Web-страница – электронный документ в сети Интернет, в
котором описано размещение материала на экране.
Web-сайт – это совокупность программных, информационных, а
также медийных средств, логически связанных между собой
(совокупность Web-страниц).

5.

Структура сайта

6.

Главная страница сайта
1.Отражает тематику сайта.
2.Привлекает к просмотру других
страниц.
3.Содержит функцию поиска.
4.Имеет раздел с обновляемой
информацией.
5.Включает контактную информацию.
6.Отличается от других страниц,
сохраняя общий стиль.

7.

Остальные страницы сайта
• Единый стиль всех страниц обязателен.
• Название сайта и ссылка на главную обязательны.
• Каждая страница уникальна по
содержанию:
- страницы не должны быть слишком
длинными (не более 2,5 экранов).
- текст должен быть структурирован для
легкости восприятия (абзацы, заголовки).
- изображения и графики уместны, но
должны быть обоснованы.

8.

Что такое HTML?
Hyper Text Markup Language (HTML) – это язык разметки документа во
всемирной паутине.
Язык html воспроизводится интернет-браузером в виде удобной
страницы с текстом, таблицами, списками, изображениями.
<html>
Начало разметки
<heard>
Начало «головы» страницы сайта
<title> Воронежская область </title>
Название страницы сайта
</heard>
Конец «головы»
<body>
Начало «тела» страницы
Мой город Воронеж
Основной контент сайта
</body>
Конец «тела»
</html>
Конец разметки html
Табл.1. Структура простейшего html файла

9.

Форматирование текста
Используются теги:
• – абзац.
• – полужирный.
• – перенос строки.
•<hr> – горизонтальная линия.
•<H2> – заголовок 1-го уровня.
FACE - гарнитура (FACE= ”Arial”),
SIZE – размер (SIZE=4),
COLOR – цвет (COLOR=”#00FF00”)
С помощью тега FONT и его атрибутов можно задать параметры
форматирования шрифта любого фрагмента.

10.

Задать цвет текста можно следующим образом:
Текст
Рис.1. Названия цветов и значения RGB

11.

Оформление сайта
1.
Подбор цветовой гаммы;
2.
Формирование расположения текста,
рисунков и видео материалов на страницах;
3.
Расположение информационных блоков;
4.
Подбор шрифта (стиля и размера);
5.
Удобство дизайна для посетителя.

12.

Подключение графических объектов
Для вставки изображения используют тег <img> с атрибутом src,
указывающим путь к файлу (локальный компьютер или интернет).
Атрибуты <img>:
•src - имя графического файла.
•alt - альтернативное описание.
•height - высота.
•width - ширина.
•border - ширина границ.

13.

Гиперссылки
Титульная страница должна содержать
гиперссылки для навигации по сайту.
Гиперссылки создаются с помощью
тега <A> с атрибутом HREF,
указывающим путь к другой странице
(локальный компьютер или интернет).

href="index.html"> ТЕКСТ</a>] &nbsp [<a
href="text.html"> ТЕКСТ</a] &nbsp [<a
href="text.html"> ТЕКСТ</a>] &nbsp [<a
href="text.html">ТЕКСТ </a>] &nbsp [<a
href="text.htm">ТЕКСТ</a>] &nbsp
Принято размещать гиперссылки в
нижней части страницы.
[<a

14.

Списки на Web-страницах
• Нумерованные списки, где элементы
списка идентифицируются с помощью
чисел;
• Маркированные – элементы списка
идентифицируются помощью
специальных символов (маркеров);
• Списки определений – позволяют
составлять перечни определений в так
называемой словарной форме.

15.

Создание сайта

16.

Заключение
В ходе проекта был изучен HTML - язык разметки
гипертекстов. Я ознакомился с его историей,
освоил создание web-страниц с использованием
таблиц, изучил основные теги и их функции,
получил навыки создания web-страниц с
использованием мультимедиа и выполнил
практическое задание по созданию web-страницы.
HTML позволяет формировать текстовые блоки,
включать изображения, организовывать таблицы,
управлять цветом, добавлять звук, организовывать
гиперссылки и использовать мультимедиа.
Мультимедиа делает web-страницы удобными и
практически незаменимыми.

17.

Contact
Благодарю
за внимание!

English Русский Правила