Практическое занятие

на тему:

«Технология создания сайтов»

(франмент)

преподаватель:Харьковская Ольга Константиновна

Нерюнгри, 2020

---

Цели:

Образовательная:

• приобрести начальные навыки создания простейших Internet-документов;
• научиться выполнять форматирование созданныхWeb-страниц

Воспитательная:        

• воспитание информационной культуры учащихся, внимательности, аккуратности, дисциплинированности, усидчивости;
• формировать элементы научного мировоззрения

Развивающая:        

• развивать наглядно-образное мышление, память и умение сравнивать и анализировать

Тип занятия:                         комбинированный

Технические средства:        компьютеры IBM/PC

Программное обеспечение:        операционная система WINDOWS 7/10,

программа Блокнот,Браузер InternetExplorer

Замечание. Для выполнения задания должна быть приготовлена папка ВОВ с рабочим материалом, в который включить файлы:

1. текстовый файл для веб-страницы.txt (создан в программе Блокнот)
2. рисунки  в формате .jpg
3. Краткая справка по тэгам Приложение 1
4. Таблица цветов Приложение 2

План урока:
I. Орг. момент.
II. Актуализация знаний.
III. Выполнение лабораторно-практической работы по теме.
IV. Домашнее задание
V. Итог урока.

Ход урока:
I. Орг. момент.
Приветствие. Добрый день, ребята.

Посмотри на экран (Слайд 1), и выскажите предположения о теме нашего урока. (ответы детей). Замечательно, молодцы.

II. Актуализация знаний.

А как вы думаете как создаются сайты? Из чего они состоят? (заголовок, картинки, текст, футер)

Конечно, одна из самых наиболее популярных профессий в сфере IT-технологий – это сайтостроение.

А  вы знаете кто создает сайты? Как называется эта профессия? Хорошо, молодцы

Скажите, а вы встречали такие слова (Слайд 2)

Что такое Web? Ответы детей. Хорошо, молодцы

Web - это средство представления информации в Интернете.

А как вы думаете, как создаются сами Web-странички?

Web-страницы могут быть созданы с помощью

1. обычного текстового редактора;
2. редактора, способного сохранять в формате HTML;
3. специализированного редактора;
4. специализированной системы.

Основой создания Web-сайтов и Web-страниц является язык гипертекстовой разметки HTML. Но есть и другие программы-помощники, конструкторы создания сайтов. (Слайд 3)

HTML-документы сохраняются на диске как обычные текстовые документы, а для распознавания Web-страниц по их именам общепринято обозначать такие файлы использованием расширений .html.

В HTML-документах используются специальные управляющие последовательности символов — тэги. (слайд 4)

Чаще всего тэги используются попарно, окружая размеченные фрагменты текста. Такие тэги называются контейнерами. Закрывающийся тэг отличается от начального только присутствием символа "/", добавляемого перед именем тэга. При интерпретации тэгов браузер не делает различия между строчными и прописными буквами. Поэтому сами тэги можно набирать на любом регистре. Зачастую параметр (атрибут) является необязательной величиной и его можно пропускать.

III. Выполнение практической работы. (Слайды с 5-11 )
И так, сегодня на уроке мы попробуем создать Web-страничку, а темой нашей странички приурочена теме 2020 года- который в России был объявлен годом памяти и славы.

В Якутии – годом патриотизма.

В Нерюнгринском районе  - годом героического наследия.

1. Исходные файлы: находятся в папке ВОВ

Перед выполнением задания скопируйте все файлы из папки ВОВ в свою рабочую папку.

2. Загрузить программу Блокнот (ПУСК – Программы – Стандартные)

3. Открыть готовый текстовый файл «для веб-страницы.txt»

Замечание. На каждом шаге будете добавлять новый тэг – он выделен жирным шрифтом. Остальные тэги остаются без изменения.

4. В начале текста разместить тэг, указывающий, что данный документ является HTML-текстом (т.е. обязательный тэг для Web-страницы):

…

текст

…

5. Создание заголовка Web-страницы:

        (заголовок страницы)

…

текст

…

6. Сохраните документ в своей рабочей папке под именем indeх.htm– для этого выполните команду Файл – Сохранить как

7. Открыть программу Internet Explorer (ПУСК – Программы). Работать будем автономно!

Открыть Web-страницу – команда Файл – Открыть; выбрать нужный файл и щелкнуть по кнопке «Обзор…»

Замечание. Будете продолжать редактирование файла index.htm, не закрывая InternetExplorer: для этого через панель задач переключиться на программу Блокнот, в которой открыт файл index.htm.

8. Определение тела документа:

для этого необходимо вставить тэги …

Страница получит вид:

…

текст

…

Замечание. Сохранить редактируемый в Блокноте файл (Файл – Сохранить) и, переключившись через панель задач на InternetExplorer, выполнить в браузере команду Вид – Обновить (или щелкнуть по кнопке «Обновить»).

9. Разбить текст на несколько абзацев:

для этого имеется тэг
(его действие аналогично нажатию клавиши Enter в процессоре Word). Поставить тэг
перед словами:

1. «Почетного...»

2. «Впервые…»

3. «В сентябре…»

10. Оформить красную строку: для этого нужно вставить несколько символов пробела  (вставьте 4 пробела) – после каждого тэга
 и перед началом всего текста- т.е.

11. Между абзацами вставить по одной пустой строки – для этого добавить еще один тэг

12. Выровнить абзацы по ширине: для этого перед текстом поставить тэг, после текста – тэг

13.Вставить к тексту заголовок: для этого после поставить тэг

города герои

Замечание. Изменяя цифру от 1 до 6, можно получить заголовки шести уровней. Попробуйте, не забывая при этом замечание п. 7.

14. Изменение фона страницы и цвета текста: для этого добавить в тэг

Замечание.  Код цвета фона и текста можно подобрать другие. Запись цвета - в формате RGB

Более полный перечень цветов – см. файл Приложение 2.

Просматривайте Web-страницу после внесения изменений (не забывайте о замечании п.7)

15. Расположение текста на экране: редактируемая страница при просмотре в браузере имеет недостаток -  слишком широкий текст, который неудобно читать. Чтобы «сузить» текст можно использовать для разметки страницу таблицу с невидимыми границами (атрибут bolder).

После тэга вставить тэги таблицы

….

Заголовок

Текст

…

16. Изменение начертания шрифта (т.е. выделение фрагментов текста): выделить слова «Города Герои» (1-й абзац) – полужирным, 3-й абзац – курсивом. Для этого в тексте поставить тэги

 Города Герои и  …

Замечание. Способы выделения текста:- полужирный, -курсив,  - подчеркивание (парные тэги!Не забывайте ставить закрывающий тэг)

17. Изменение размера шрифта: текст

Замечание.        Цифру можно изменять от 1 до 7 (7 – самый крупный шрифт, 1 – самый мелкий)

Сделайте для 1-го абзаца шрифт 5, для 4-го абзаца – шрифт 4

Вставка рисунка: после тэга

Города Герои