Слайд 1

РАЗРАБОТКА WEB -САЙТОВ С ИСПОЛЬЗОВАНИЕМ ЯЗЫКА РАЗМЕТКИ ГИПЕРТЕКСТА HTML

Слайд 2

УРОК 1. WEB -СТРАНИЦЫ И WEB -САЙТЫ. СТРУКТУРА ВЕБ-СТРАНИЦЫ.

Слайд 3

ПОНЯТИЕ ВЕБ-САЙТА Информация во Всемирной паутине хранится в форме Web -сайтов. Web-сайт по структуре напоминает журнал по какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web -страниц. Веб-страницы связаны гиперссылками.

Слайд 4

ЭТАПЫ СОЗДАНИЯ ВЕБ-САЙТА: Построить сайт на локальном компьютере. Протестировать (проверить правильность работы). Разместить в Интернете – подобрать сервер для хостинга (платный или бесплатный).

Слайд 5

ПРОГРАММЫ ДЛЯ СОЗДАНИЯ САЙТА: 1) простейший текстовый редактор ( без форматирования текста ): Блокнот 2) браузер для просмотра страниц : Internet Explorer , Mozilla Firefox, Chrome 3) программа обработки изображений: Photoshop

Слайд 6

ВИЗУАЛЬНЫЕ ВЕБ-РЕДАКТОРЫ Создание сайта на языке HTML очень трудоемкое, нужны специальные знания. Есть визуальные веб-редакторы (программы) для создания сайтов. Работают по принципу WYSIWYG (что видишь, то и получишь).

Слайд 7

СТРУКТУРА WEB -СТРАНИЦЫ

Слайд 8

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

Слайд 9

СТРУКТУРА WEB- СТРАНИЦЫ Весь HTML -код страницы помещается внутрь главного контейнера : < HTML >. Web -страница разделяется на 2 логические части : заголовок ( HEAD ) содержание (BODY) .

Слайд 10

ЗАГОЛОВОК ВЕБ-СТРАНИЦЫ Заголовок Web -страницы заключается в контейнер < HEAD> < / HEAD > Содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения. Название Web -страницы содержится в контейнере <Т ITLE > и отображается в верхней строке окна браузера при просмотре страницы. < HEAD > <Т ITL Е> Компьютер

Слайд 11

ПИШЕМ ШАБЛОН ВЕБ-СТРАНИЦЫ < HEAD > <Т ITL Е> Компьютер

Слайд 12

ОСНОВНОЕ СОДЕРЖАНИЕ ВЕБ-СТРАНИЦЫ Основное содержание страницы помещается в контейнер < BODY> < / BODY >. Может содержать: текст, таблицы, бегущие строки, картинки, ссылки, звуковые файлы... Поместим на страницу текст «Все о компьютере»: < BODY > Все о компьютере

Слайд 13

ШАБЛОН ВЕБ-СТРАНИЦЫ < HEAD > <Т ITL Е> Компьютер < BODY > Все о компьютере

Слайд 15

КАК СОХРАНИТЬ ВЕБ-СТРАНИЦУ 1. C оздать для сайта специальную папку и сохранять все файлы сайта в этой папке. 2. Web -страницу сохранить в виде файла с именем index . html - это титульный лист сайта (первым загружается в браузер) Расширения файла Web -страницы – . htm или . html Выбрать тип файла – «Все файлы». 3. Открыть этот файл в брузере

Слайд 17

ПРАКТИЧЕСКАЯ РАБОТА 3.8 УЧЕБНЫЙ САЙТ «КОМПЬЮТЕР» Проект сайта: сколько Web -страниц будет входить в сайт, тематика страниц, связи страниц (гиперссылки). Структура сайта «Компьютер»: 1) начальная (домашняя) страница; 2) «Программы» (классификация программного обеспечения); 3) «Словарь» (словарь компьютерных терминов); 4) «Анкета» (опрос посетителей сайта). Стр. 165-166, задания 1-2.

Слайд 18

ДОМАШНЕЕ ЗАДАНИЕ § 3.7.1 – 3.7.2 – определения и тэги наизусть; вопросы (с.114, 115) ПР 3.8 (задания 1-2) – с. 166

Слайд 19

УРОК № 2

Слайд 20

ПРОВЕРОЧНАЯ РАБОТА № 1 В какой форме хранится информация во Всемирной паутине? Что такое Web-сайт? Типы сайтов. В чем преимущества веб-страниц перед обычными текстовыми документами? Каким образом веб-страницы объединяются в веб-сайты? Что такое тэги? Что такое тэговый контейнер? Записать главный контейнер веб-страницы. Какова логическая структура веб-страницы? Написать шаблон веб-страницы.

Слайд 21

УРОК 2. ФОРМАТИРОВАНИЕ ТЕКСТА НА WEB -СТРАНИЦЕ Угринович, § 3.7. 3

Слайд 22

ФОРМАТИРОВАНИЕ ТЕКСТА Пока страница не слишком привлекательна: мелкий шрифт и черный текст на белом фоне. Но с помощью тэгов можно украсить текст. 1. Заголовки: тэги от < Н1 > (самый крупный) до <Н6> (самый мелкий). <Н1> Всё о компьютере 2. Шрифт ( FONT ). Некоторые тэги имеют атрибуты - имена свойств, могут принимать определенные значения. FONT face=“Arial” – гарнитура шрифта size=4 – размер color=“red” – цвет 3. Выравнивание ( ALIGN ) . Текст обычно выравнивается по левому краю страницы, однако принято заголовок размещать по центру. ALIGN =“ left ", < FONT COLOR=“blue” ALIGN =" right ", <Н1 ALIGN =" center "> Bc ё о компьютере ALIGN =" center " < /FONT>

Слайд 23

ЦВЕТ ШРИФТА Значение атрибута COLOR можно задать 2-мя способами: а) названием цвета (например, " red ", " green ", " blue " и так далее), б) его шестнадцатеричным значением в RGB -формате "# RR GG BB ", где две первые шестнадцатеричные цифры задают интенсивность красного ( red ), две следующие — интенсивность зеленого ( green ) и две последние — интенсивность синего ( blue ) цветов. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная — FF . Синий цвет = "#000 0FF ". Таким образом, задать синий цвет заголовка можно тэгом FONT с атрибутом COLOR : < Н 1 ALIGN="center">Bc ё о компьютере

Слайд 25

ФОРМАТИРОВАНИЕ ТЕКСТА 4. Горизонтальная линия отделит заголовок от остального содержания страницы с помощью одиночного тэга < HR >. 5. Абзацы: <Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания.

Слайд 26

ПРАКТИЧЕСКАЯ РАБОТА 3.8 УЧЕБНЫЙ САЙТ «КОМПЬЮТЕР» Отформатировать текст начальной страницы: 1) Создать и выровнять 2 абзаца (зад.3) 2) Выделить цветом заголовок страницы и отделить его горизонтальной чертой (зад.4) Стр. 166, задания 3-4.

Слайд 28

ДОМАШНЕЕ ЗАДАНИЕ § 3.7.3 – тэги наизусть; вопросы (с.114, 115, 116) ПР 3.8 (задания 3-4) – с. 166

Слайд 29

УРОК 3

Слайд 30

ПРОВЕРОЧНАЯ РАБОТА № 2 В какой форме хранится информация во Всемирной паутине? Что такое Web-сайт? Типы сайтов. В чем преимущества веб-страниц перед обычными текстовыми документами? Каким образом веб-страницы объединяются в веб-сайты? Что такое тэги? Что такое тэговый контейнер? Записать главный контейнер веб-страницы. Какова логическая структура веб-страницы? Написать шаблон веб-страницы. Перечислить 5 тегов форматирования страницы. Что такое атрибут тега? Какие существуют способы задания цвета на веб-странице? Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?

Слайд 31

УРОК 3. ВСТАВКА ИЗОБРАЖЕНИЙ В WEB -СТРАНИЦЫ Угринович, § 3.7.4

Слайд 32

ВСТАВКА ИЗОБРАЖЕНИЙ На Web -страницах могут быть графические файлы 3 форматов — GIF , JPG и PNG . Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в один из этих форматов. Для вставки изображения используется тэг < IMG > с атрибутом SRC , который указывает на место хранения файла на локальном компьютере или в Интернете. 1) картинка на локальном компьютере в папке с сайтом: < IMG SRC =" computer . jpg "> 2) картинка в другой папке на локальном компьютере: < IMG SRC =" C :\ computer \ computer . jpg "> 3) картинка находится на удаленном сервере в Интернете: < IMG SRC =" http :// www . server . ru / computer . jpg ">

Слайд 33

ПОЯСНЯЮЩИЙ ТЕКСТ. РАСПОЛОЖЕНИЕ РИСУНКА В ТЕКСТЕ. Иллюстрации на Web -страницах стали неотъемлемым элементом дизайна. Однако пользователи в целях экономии времени иногда отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл страницы, вместо рисунка должен выводиться поясняющий текст с атрибутом ALT < IMG SRC =" computer . jpg " А L Т="Компьютер"> Положение рисунка в тексте – определяет атрибут ALIGN тэга < IMG >: ТОР, MIDDLE , BOTTOM , LEFT , RIGHT .

Слайд 34

ВИД ГОТОВОГО САЙТА

Слайд 35

КОД СТРАНИЦЫ САЙТА

Все о компьютере

---

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

Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

Слайд 36

ДОМАШНЕЕ ЗАДАНИЕ § 3.7.4 – тэги наизусть; вопросы (с.114, 115, 116, 118) ПР 3.8 (задание 5) – с. 167

Слайд 37

УРОК 4

Слайд 38

ПРОВЕРОЧНАЯ РАБОТА № 3 Что такое Web-сайт? Типы сайтов. Каким образом веб-страницы объединяются в веб-сайты? Что такое тэги? тэговый контейнер? Записать главный контейнер веб-страницы. Какова логическая структура веб-страницы? Перечислить 5 тегов форматирования страницы. Что такое атрибут тега? Какие существуют способы задания цвета на веб-странице? Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца? Какой тег и его атрибуты используются для вставки изображений?

Слайд 39

УРОК 4. ГИПЕРССЫЛКИ НА WEB -СТРАНИЦАХ Угринович, § 3.7.5

Слайд 40

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

Слайд 41

ВИДЫ ГИПЕРССЫЛОК 1) внутренняя: < A HREF =« filename.html » > Указатель ссылки 2) внешняя: < A HREF =« http://www.server.ru/site/ filename.html » > Указатель ссылки

Слайд 42

УКАЗАТЕЛИ ГИПЕРССЫЛОК Указатель – видимая часть гиперссылки: текст или картинка

Слайд 43

АДРЕСНАЯ ЧАСТЬ ГИПЕРССЫЛОК Перейти на другие веб-страницы: < A HREF =« filename.html » > Указатель ссылки Открыть картинку в браузере: < A HREF =« picture.jpg » > Картинка Прослушать звук (запуск встроенного в браузер проигрывателя): < A HREF =« sound.wav » > Звук Сохранить файл (запуск встроенного в браузер менеджера загрузки файлов): < A HREF =« arhiv.rar » > Скачать файл

Слайд 44

ГИПЕРССЫЛКА НА ЭЛЕКТРОННУЮ ПОЧТУ Гиперссылка этого типа заключается в особый контейнер < ADDRESS> < ADDRESS> Наш е -mail

Слайд 45

ВИД ГОТОВОЙ СТРАНИЦЫ САЙТА

Слайд 46

КОД СТРАНИЦЫ САЙТА

Все о компьютере

---

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

Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

[Программы]   [Словарь]   [Комплектующие]  [Анкета]

E-mail: mailbox@provaider.ru

Слайд 47

ДОМАШНЕЕ ЗАДАНИЕ § 3.7.5 – тэги наизусть; вопросы (с.114, 115, 116, 118, 119) ПР 3.8 (задания 6-7) – с. 167: панель навигации

Слайд 48

УРОК 5

Слайд 49

ПРОВЕРОЧНАЯ РАБОТА № 4 Что такое Web-сайт? Каким образом веб-страницы объединяются в веб-сайты? Что такое тэги? тэговый контейнер? Записать главный контейнер веб-страницы. Какова логическая структура веб-страницы? Перечислить 5 тегов форматирования страницы. Что такое атрибут тега? Какие существуют способы задания цвета на веб-странице? Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца? Какой тег и его атрибуты используются для вставки изображений? Какой тег и его атрибуты используются для вставки гиперссылок?

Слайд 50

УРОК 5. СПИСКИ НА WEB -СТРАНИЦАХ Угринович, § 3.7.6

Слайд 51

ВИДЫ СПИСКОВ Нумерованные Маркированные Списки терминов (как в словаре) Вложенные списки

Слайд 52

НУМЕРОВАННЫЙ СПИСОК Список – в контейнере

Элемент списка – тег

Атрибут TYPE – тип нумерации (арабские цифры; I – римские; а – латинские строчные буквы)

1. Системные программы
2. Прикладные программы
3. Системы программирования

Слайд 53

МАРКИРОВАННЫЙ СПИСОК Список – в контейнере

Элемент списка – тег

Атрибут TYPE – тип маркеров ( “disc” - диск , “square” - квадрат , “circle” -окружность)

• Текстовые редакторы
• Графические редакторы
• Электронные таблицы
• Системы управления базами данных

см. стр.168 – «Программное обеспечение»

Слайд 54

СПИСОК ТЕРМИНОВ Список – в контейнере

Элемент списка – тег

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

Слайд 55

ДОМАШНЕЕ ЗАДАНИЕ § 3.7.6 – тэги наизусть; вопросы (с.114, 115, 116, 118,119,120) ПР 3.8 (задания 8-9) – с. 168-169: страницы сайта «Программы» и «Словарь»

Слайд 56

УРОК 6

Слайд 57

УРОК 6. ИНТЕРАКТИВНЫЕ ФОРМЫ НА WEB -СТРАНИЦАХ Угринович, § 3.7.7

Слайд 58

ПРОВЕРОЧНАЯ РАБОТА № 5 Что такое Web-сайт? Каким образом веб-страницы объединяются в веб-сайты? Что такое тэги? тэговый контейнер? Записать главный контейнер веб-страницы. Какова логическая структура веб-страницы? Перечислить 5 тегов форматирования страницы. Что такое атрибут тега? Какие существуют способы задания цвета на веб-странице? Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца? Какой тег и его атрибуты используются для вставки изображений? Какой тег и его атрибуты используются для вставки гиперссылок? Какие теги используются для создания нумерованных и маркированных списков?

Слайд 59

ПОНЯТИЕ ИНТЕРАКТИВНОЙ ФОРМЫ Для общения посетителей сайта с его создателями на веб-странице размещают интерактивные формы. Формы содержат различные элементы управления: текстовые поля раскрывающиеся списки флажки переключатели… См. «Анкету», с.172

Слайд 60

ТЕКСТОВОЕ ПОЛЕ Основной контейнер

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

Слайд 61

ПЕРЕКЛЮЧАТЕЛИ ( Р АДИОКНОПКИ ) Круглая кнопка для выбора одного из нескольких вариантов ответов: TYPE=“radio” Все элементы этой группы должны иметь одинаковое имя: NAME=“group” Атрибуты VALUE содержат варианты выбора ответов: VALUE=“ учащийся ” У каждого VALUE свой вариант ответа.

Слайд 62

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

Слайд 63

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

Слайд 64

ТЕКСТОВАЯ ОБЛАСТЬ Текстовая область с линейкой прокрутки – для ввода текста произвольной длины. Контейнер Атрибуты : NAME - задает имя области ROWS - число строк COLS - число столбцов

Слайд 65

ОТПРАВКА ДАННЫХ ИЗ ФОРМЫ Кнопка отправки создается тэгом Атрибуты : TYPE =“submit” VALUE =“ Отправить ” (надпись на кнопке) Чтобы данные из формы передать по электронной почте, используют контейнер:

Слайд 66

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

Слайд 67

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