Создание Web-сайтов с использованием языка гипертекстовой разметки документов HTML
Создание Web-сайтов с использованием языка гипертекстовой разметки документов HTML
Цель занятия: формирование у обучающихся профессиональных компетенций создания, редактирования и форматирования html-документа при выполнении практического задания.
Задачи занятия:
познакомить учащихся с понятиями «Web-страница», «Web-сайт», «гипертекст», «гиперссылка», «браузер», «HTML», «тег»;
рассказать об основных характеристиках Web-ресурса, структуре Web-документа и назначении основных тегов;
научить создавать HTML-файлы, оформлять заголовки, управлять размером, гарнитурой и цветом шрифта, выделять и выравнивать абзацы, размещать графику на Web-странице и создавать гиперсвязи между страницами сайта.
Оборудование: компьютеры, мультимедийный проектор с экраном, текстовый редактор, программа браузер, мультимедийная презентация «Создание Web-сайта. Язык разметки гипертекстовых документов HTML», раздаточный материал для выполнения практических работ (приложение 1, приложение 2) и таблицы цветов по количеству учащихся.
Ход занятия:
Организационный момент: приветствие, проверка готовности учащихся к практическому занятию, актуализация знаний.
Беседа по теме «Web-сайты, язык разметки».
Выполнение практической работы №1: оценка качества Web-ресурсов и формирование требований к созданию учебных сайтов.
Задания к практической работе по оценке качества веб-ресурсов и формированию требований к учебным сайтам:
Проанализируйте структуру и навигацию сайта Московского промышленно-экономического колледжа. Оцените удобство использования и доступность информации для пользователей.
Изучите дизайн сайта. Оцените сочетание цветовой гаммы, графики и шаблонов оформления веб-страниц. Обратите внимание на повторяемость оформления и уникальность дизайна.
Проверьте навигацию сайта. Убедитесь, что ссылки работают корректно, переходы между разделами сайта наглядны и удобны для пользователей.
Определите структуру сайта. Оцените чёткость разделения разделов и тем, а также наличие карты сайта для удобства пользователей.
Рассмотрите структурированность контента. Обратите внимание на размер глав, использование маркированных и нумерованных абзацев, а также на распределение содержания по отдельным страницам.
Объяснение новой темы с использованием учебной презентации «Создание Web-сайта. Язык разметки гипертекстовых документов HTML». Обсуждение структуры Web-документа и основных тегов.
Выполнение практической работы №2: Создание, просмотр и редактирование HTML-документов, оформление заголовков, управление размером, гарнитурой и цветом шрифта, выделение и выравнивание абзацев, размещение графики и создание гиперссылки.
Задание к практической работе по созданию первой страницы сайта:
Создание нового HTML-документа.
Чтобы создать новый HTML-документ, выполните следующие шаги:
Откройте текстовый редактор на вашем компьютере (Блокнот (в Windows), TextEdit (в Mac) или другой простой текстовый редактор).
Создайте новый файл. Назовите его, например, «index.html».
В пустом окне текстового редактора введите следующий код (в скобках – пояснение):
<!DOCTYPE html> (DOCTYPE в HTML — это инструкция, которая сообщает веб-браузеру о языке разметки, на котором написана текущая страница)
<html> (Тег html сообщает браузеру, что необходимо прочитать документ как программный код, написанный на языке гипертекстовой разметки – HTML).
<head> (Тег <head> в HTML содержит служебную информацию: заголовок страницы, метаданные, ссылки на стили и другие данные, которые необходимы для правильного отображения и интерпретации веб-страницы).
<title> A simple HTML document</title> (означает, что в документе HTML используется элемент <title>, который определяет заголовок страницы. Заголовок отображается в строке заголовка браузера или на вкладке страницы. Он должен быть кратким (не больше 60 символов) и соответствовать содержанию страницы).
</head>
<body> (Тег <body> в HTML определяет тело документа. Он содержит всё содержимое HTML-документа, например, заголовки, параграфы, изображения, гиперссылки, таблицы, списки и т. д.)
<p>Мы рады приветствовать Вас в Московском промышленно-экономическом колледже!</p>
</body>
</html>
Сохраните файл на рабочем столе или в другом удобном месте. Расширение файла должно быть «.html».
Откройте файл в вашем веб-браузере. Если всё сделано правильно, вы увидите сообщение «Мы рады приветствовать Вас в Московском промышленно-экономическом колледже!» на экране.
Добавление заголовков различных уровней.
Добавление заголовков различных уровней в HTML позволяет структурно организовать содержимое веб-страницы. Стандарт HTML предусматривает возможность использования заголовков шести уровней. Заголовки 1 уровня обозначаются тэгом <h1> и отображаются самым крупным шрифтом, а уровня 6 (<h6>) — самым мелким.
Некоторые особенности использования заголовков:
Главный заголовок <h1> — обязательный для всех страниц. Это может быть название страницы, статьи или товара, которое несёт конкретную информацию.
Заголовок второго уровня <h2> размечает подразделы страницы или статьи. С его помощью выстраивается навигация по тексту: он разбивает его на смысловые части, помогает выделить важные моменты и легче усвоить информацию пользователю.
Заголовки <h3>–<h6> включают в себя уточняющую информацию.
Не следует использовать на одной странице заголовки более трёх различных уровней вложенности.
Добавьте заголовок первого, второго и третьего уровня. Информация должна быть о студенческой жизни Московского промышленно-экономического колледжа
Чтобы добавить заголовок первого уровня, второй и третий уровень, используйте следующий код:
<!DOCTYPE html>
<html>
<head>
<title>МПЭК</title>
</head>
<body>
<h1> ФГБОУ ВО РОССИЙСКИЙ ЭКОНОМИЧЕСКИЙ УНИВЕРСИТЕТ им. Г.В.ПЛЕХАНОВА </h1>
<h2> Московский промышленно-экономический колледж </h2>
<h3> «Мы рады приветствовать Вас в Московском промышленно-экономическом колледже!» </h3>
</body>
</html>
Сохраните изменения и откройте файл в браузере. Заголовки первого, второго и третьего уровней должны появиться на странице
Настройка гарнитуры шрифтов
Установите гарнитуру шрифта заголовка первого уровня в «Times New Roman».
Например, для установки гарнитуры шрифта заголовка первого уровня в Times New Roman используйте следующий тег:
<h1 style="font-family: Times New Roman">Заголовок</h1>
Здесь style указывает на стиль элемента, а font-family определяет гарнитуру шрифта.
Установите гарнитуру шрифта второго уровня - Tahoma, 3 уровня - Monotype Corsiva.
Изменение цвета шрифта
Задайте цвет шрифта заголовка второго уровня с помощью кода цвета #ff0000.
Для задания цвета шрифта заголовка первого уровня с кодом цвета #ff0000 используйте следующий тег:
<h1 style="color:#ff0000;">Заголовок</h1>.
Самостоятельно подберите и измените цвет следующих двух заголовков.
Выравнивание текста
Выровняйте заголовок третьего уровня по правому краю.
Для выравнивания заголовка третьего уровня по правому краю используйте следующий тег:
<h3 align="right">Заголовок</h3>
Для выравнивания текста по левому краю используйте тег <p align="left">, а для выравнивания по центру — <p align="center">.
Выровняйте первых два заголовка по центру.
Форматирование абзацев
Добавьте абзац текста с информацией о колледже (2-3 абзаца).
<p> — для создания нового абзаца;
<br> — для перехода на новую строку;
<hr> – для создания горизонтальной линии.
Вставка изображений
Разместите изображение в документе, используя тег <img> и указав путь к файлу изображения.
Для размещения изображения в документе с использованием тега <img> укажите путь к файлу изображения следующим образом:
<img src="путь/к/файлу.jpg" alt="Описание изображения">
Например, если изображение находится в папке images, расположенной в той же директории, что и HTML-документ, путь будет выглядеть так:
<img src="images/photo.jpg" alt="Фотография красивого пейзажа">
Вставка гиперссылки
Создайте гиперссылку на страницу сайта Московского промышленно-экономического колледжа с информацией для студентов, используя тег <a> и указав адрес страницы.
Вот пример создания гиперссылки на другую страницу вашего сайта с использованием тега <a>:
<a href="https://www.ваш_сайт.com/новая_страница.html"> Новая страница</a>
В этом примере мы создали гиперссылку «Новая страница», которая при нажатии приведёт пользователя на страницу «https://www.ваш_сайт.com/новая_страница.html».
Изменение фона
Для изменения фона веб-страницы используйте атрибут bgcolor тега <body>
Вы можете указать цвет фона в шестнадцатеричном значении или по его имени.
Например, <body bgcolor="#CCFFCC">.
Сохраните изменения в документе и просмотрите его в браузере.
Подведение итогов урока, обсуждение результатов практической работы и домашнее задание.
