Разработка Web-сайтов с использованием языка разметки гипертекста HTML 8 класс, IV четверть. - презентация

1 Разработка Web-сайтов с использованием языка разметки гипертекста HTML 8 класс, IV четверть

2 Урок 1. Web-страницы и Web-сайты. Структура веб-страницы. Угринович, §

3 Понятие веб-сайта Информация во Всемирной паутине хранится в форме Web-сайтов. Web-сайт по структуре напоминает журнал по какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц. Веб-страницы связаны гиперссылками.

4 Виды веб-сайтов Официальные (правительство, Дума, школа…) Коммерческие Личные

5 Достоинства веб-страниц: Малый информационный объем («легкие») Пригодны для просмотра в разных ОС. Динамичные. Интерактивные.

6 Этапы создания веб-сайта: 1. Построить сайт на локальном компьютере. 2. Протестировать (проверить правильность работы). 3. Разместить в Интернете – подобрать сервер для хостинга (платный или бесплатный).

7 Программы для создания сайта: 1) простейший текстовый редактор (без форматирования текста): Блокнот 2) браузер для просмотра страниц: Internet Explorer 3) программа обработки изображений: Photoshop

8 Визуальные веб-редакторы Создание сайта на языке HTML очень трудоемкое, нужны специальные знания. Есть визуальные веб-редакторы (программы) для создания сайтов. Работают по принципу WYSIWYG (что видишь, то и получишь).

9 Структура Web-страницы Угринович, § 3.7.2

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

11 Структура Web-страницы Весь HTML-код страницы помещается внутрь главного контейнера:. Web-страница разделяется на 2 логические части: заголовок (HEAD) содержание (BODY).

12 Заголовок веб-страницы Заголовок Web-страницы заключается в контейнер Содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения. Название Web-страницы содержится в контейнере и отображается в верхней строке окна браузера при просмотре страницы. Компьютер

13 Пишем шаблон веб-страницы Компьютер

14 Основное содержание веб-страницы Основное содержание страницы помещается в контейнер. Может содержать: текст, таблицы, бегущие строки, картинки, ссылки, звуковые файлы... Поместим на страницу текст «Все о компьютере»: Все о компьютере

15 Шаблон веб-страницы Компьютер Все о компьютере

16

17 Как сохранить веб-страницу 1. Cоздать для сайта специальную папку и сохранять все файлы сайта в этой папке. 2. Web-страницу сохранить в виде файла с именем index.html - это титульный лист сайта (первым загружается в браузер) Расширения файла Web-страницы –.htm или.html

18 Создаем свой сайт…. Нужно различать имя файла index.html - под которым Web-страница хранится в файловой системе, и собственно имя Web-страницы «Компьютер» - высвечивается в верхней строке окна браузера и в первую очередь анализируется поисковыми системами. Имя Web-страницы должно в максимальной степени соответствовать ее содержанию. 1. В Блокнот ввести HTML-код Web-страницы. 2. Сохранить файл под именем index.html в папке сайта. Выбрать тип файла – «Все файлы». 3. Открыть этот файл в браузере для просмотра.

19

20 Практическая работа 3.8 Учебный сайт «Компьютер» Проект сайта: сколько Web-страниц будет входить в сайт, тематика страниц, связи страниц (гиперссылки). Структура сайта «Компьютер»: 1) начальная (домашняя) страница; 2) «Программы» (классификация программного обеспечения); 3) «Словарь» (словарь компьютерных терминов); 4) «Анкета» (опрос посетителей сайта). Стр , задания 1-2.

21 Домашнее задание § – – определения и тэги наизусть; вопросы (с.114, 115) ПР 3.8 (задания 1-2) – с. 166

22 УРОК 2

23 Проверочная работа 1 1. В какой форме хранится информация во Всемирной паутине? 2. Что такое Web-сайт? 3. Типы сайтов. 4. В чем преимущества веб-страниц перед обычными текстовыми документами? 5. Каким образом веб-страницы объединяются в веб-сайты? 6. Что такое тэги? 7. Что такое тэговый контейнер? Записать главный контейнер веб-страницы. 8. Какова логическая структура веб-страницы? 9. Написать шаблон веб-страницы.

24 Урок 2. Форматирование текста на Web-странице Угринович, § 3.7.3

25 Форматирование текста Пока страница не слишком привлекательна: мелкий шрифт и черный текст на белом фоне. Но с помощью тэгов можно украсить текст. 1. Заголовки: тэги от (самый крупный) до (самый мелкий). Всё о компьютере 2. Шрифт (FONT). Некоторые тэги имеют атрибуты - имена свойств, могут принимать определенные значения. FONT face=Arial – гарнитура шрифта size=4 – размер color=red – цвет 3. Выравнивание (ALIGN). Текст обычно выравнивается по левому краю страницы, однако принято заголовок размещать по центру. ALIGN =left",

26 Цвет шрифта Значение атрибута COLOR можно задать 2-мя способами: а) названием цвета (например, "red", "green", "blue" и так далее), б) его шестнадцатеричным значением в RGB-формате "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие интенсивность зеленого (green) и две последние интенсивность синего (blue) цветов. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная FF. Синий цвет = "#0000FF". Таким образом, задать синий цвет заголовка можно тэгом FONT с атрибутом COLOR: Bcё о компьютере

27

28 4. Горизонтальная линия отделит заголовок от остального содержания страницы с помощью одиночного тэга. 5. Абзацы:. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания. Форматирование текста

29 Практическая работа 3.8 Учебный сайт «Компьютер» Отформатировать текст начальной страницы: 1) Создать и выровнять 2 абзаца (зад.3) 2) Выделить цветом заголовок страницы и отделить его горизонтальной чертой (зад.4) Стр. 166, задания 3-4.

30

31 Домашнее задание § – тэги наизусть; вопросы (с.114, 115, 116) ПР 3.8 (задания 3-4) – с. 166

32 УРОК 3

33 Проверочная работа 2 1. В какой форме хранится информация во Всемирной паутине? 2. Что такое Web-сайт? 3. Типы сайтов. 4. В чем преимущества веб-страниц перед обычными текстовыми документами? 5. Каким образом веб-страницы объединяются в веб-сайты? 6. Что такое тэги? 7. Что такое тэговый контейнер? Записать главный контейнер веб- страницы. 8. Какова логическая структура веб-страницы? 9. Написать шаблон веб-страницы. 10. Перечислить 5 тегов форматирования страницы. 11. Что такое атрибут тега? 12. Какие существуют способы задания цвета на веб-странице? 13. Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?

34 Урок 3. Вставка изображений в Web-страницы Угринович, § 3.7.4

35 Вставка изображений На Web-страницах могут быть графические файлы 3 форматов GIF, JPG и PNG. Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в один из этих форматов. Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. 1) картинка на локальном компьютере в папке с сайтом: 2) картинка в другой папке на локальном компьютере: 3) картинка находится на удаленном сервере в Интернете:

36 Поясняющий текст. Расположение рисунка в тексте. Иллюстрации на Web-страницах стали неотъемлемым элементом дизайна. Однако пользователи в целях экономии времени иногда отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл страницы, вместо рисунка должен выводиться поясняющий текст с атрибутом ALT Положение рисунка в тексте – определяет атрибут ALIGN тэга : ТОР, MIDDLE, BOTTOM, LEFT, RIGHT.

37 Вид готового сайта

38 Код страницы сайта Компьютер Все о компьютере На этом сайта вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

39 Домашнее задание § – тэги наизусть; вопросы (с.114, 115, 116, 118) ПР 3.8 (задание 5) – с. 167

40 Урок 4

41 Проверочная работа 3 1. Что такое Web-сайт? 2. Типы сайтов. 3. Каким образом веб-страницы объединяются в веб-сайты? 4. Что такое тэги? тэговый контейнер? Записать главный контейнер веб-страницы. 5. Какова логическая структура веб-страницы? 6. Перечислить 5 тегов форматирования страницы. 7. Что такое атрибут тега? 8. Какие существуют способы задания цвета на веб-странице? 9. Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца? 10. Какой тег и его атрибуты используются для вставки изображений?

42 Урок 4. Гиперссылки на Web-страницах Угринович, § 3.7.5

43 Гиперссылки позволяют загружать в браузер другие веб-страницы, связанные с предыдущей. Гиперссылка состоит из 2 частей: адрес и указатель ссылки. Гиперссылка задается универсальным тегом с атрибутом HREF (он указывает, в каком файле хранится нужная веб-страница): Указатель ссылки

44 Виды гиперссылок 1) внутренняя: Указатель ссылки 2) внешняя: Указатель ссылки

45 Указатели гиперссылок Указатель – видимая часть гиперссылки: текст или картинкатекст

46 Адресная часть гиперссылок Перейти на другие веб-страницы: Указатель ссылки Открыть картинку в браузере: Картинка Прослушать звук (запуск встроенного в браузер проигрывателя): Звук Сохранить файл (запуск встроенного в браузер менеджера загрузки файлов): Скачать файл

47 Гиперссылка на электронную почту Гиперссылка этого типа заключается в особый контейнер Наш е-mail

48 Вид готовой страницы сайта

49 Код страницы сайта Компьютер Все о компьютере На этом сайта вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. [ Программы ]   [ Словарь ]   [ Комплектующие ]  [ Анкета ]

50 Домашнее задание § – тэги наизусть; вопросы (с.114, 115, 116, 118, 119) ПР 3.8 (задания 6-7) – с. 167: панель навигации

51 Урок 5

52 Проверочная работа 4 1. Что такое Web-сайт? 2. Каким образом веб-страницы объединяются в веб-сайты? 3. Что такое тэги? тэговый контейнер? Записать главный контейнер веб-страницы. 4. Какова логическая структура веб-страницы? 5. Перечислить 5 тегов форматирования страницы. 6. Что такое атрибут тега? 7. Какие существуют способы задания цвета на веб-странице? 8. Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца? 9. Какой тег и его атрибуты используются для вставки изображений? 10. Какой тег и его атрибуты используются для вставки гиперссылок?

53 Урок 5. Списки на Web-страницах Угринович, § 3.7.6

54 Виды списков Нумерованные Маркированные Списки терминов (как в словаре) Вложенные списки

55 Нумерованный список Список – в контейнере Элемент списка – тег Атрибут TYPE – тип нумерации (арабские цифры; I – римские; а – латинские строчные буквы) Системные программы Прикладные программы Системы программирования

56 Маркированный список Список – в контейнере Элемент списка – тег Атрибут TYPE – тип маркеров (disc- диск, square- квадрат, circle-окружность) Текстовые редакторы Графические редакторы Электронные таблицы Системы управления базами данных см. стр.168 – «Программное обеспечение»

57 Список терминов Список – в контейнере Элемент списка – тег Сначала пишется термин, затем его определение (как в словаре) см. стр.169 – «Словарь»

58 Домашнее задание § – тэги наизусть; вопросы (с.114, 115, 116, 118,119,120) ПР 3.8 (задания 8-9) – с : страницы сайта «Программы» и «Словарь»

59 Урок 6

60 Урок 6. Интерактивные формы на Web-страницах Угринович, § 3.7.7

61 Проверочная работа 5 1. Что такое Web-сайт? 2. Каким образом веб-страницы объединяются в веб-сайты? 3. Что такое тэги? тэговый контейнер? Записать главный контейнер веб- страницы. 4. Какова логическая структура веб-страницы? 5. Перечислить 5 тегов форматирования страницы. 6. Что такое атрибут тега? 7. Какие существуют способы задания цвета на веб-странице? 8. Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца? 9. Какой тег и его атрибуты используются для вставки изображений? 10. Какой тег и его атрибуты используются для вставки гиперссылок? 11. Какие теги используются для создания нумерованных и маркированных списков?

62 Понятие интерактивной формы Для общения посетителей сайта с его создателями на веб-странице размещают интерактивные формы. Формы содержат различные элементы управления: текстовые поля раскрывающиеся списки флажки переключатели… См. «Анкету», с.172

63 Текстовое поле Основной контейнер Текстовое поле – для ввода текста с клавиатуры: тэг с атрибутами: TYPE=text – тип содержимого (текст) NAME=____ – имя поля SIZE=40 – длина поля ввода (в символах) - разделитель строк (перевод курсора на новую строку)

64 Переключатели (радиокнопки) Круглая кнопка для выбора одного из нескольких вариантов ответов: TYPE=radio Все элементы этой группы должны иметь одинаковое имя: NAME=group Атрибуты VALUE содержат варианты выбора ответов: VALUE=учащийся У каждого VALUE свой вариант ответа.

65 Флажки Квадратное окошечко для выбора нескольких ответов из предложенных вариантов: TYPE=checkbox Каждый элемент этой группы должен иметь свое имя: NAME=box1, NAME=box2, ….. Атрибуты VALUE содержат варианты выбора ответов: VALUE=WWW, VALUE= , …. У каждого VALUE свой вариант ответа. WWW

66 Поля списков Для создания раскрывающего списка используют контейнер В нем каждый элемент списка задается тэгом

67 Текстовая область Текстовая область с линейкой прокрутки – для ввода текста произвольной длины. Контейнер Атрибуты: NAME - задает имя области ROWS - число строк COLS - число столбцов

68 Отправка данных из формы Кнопка отправки создается тэгом Атрибуты: TYPE=submit VALUE=Отправить (надпись на кнопке) Чтобы данные из формы передать по электронной почте, используют контейнер:

69 Готовая анкета

70 Домашнее задание § – тэги наизусть; закончить таблицу основных тэгов; вопросы (с.114, 115, 116,118,119,120,123) – подготовка к итоговой КР по теме ПР 3.8 (задания 9-16) – с : страница сайта - «Анкета»