- Главная
- Разное
- Бизнес и предпринимательство
- Образование
- Развлечения
- Государство
- Спорт
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Религиоведение
- Черчение
- Физкультура
- ИЗО
- Психология
- Социология
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Что такое findslide.org?
FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.
Обратная связь
Email: Нажмите что бы посмотреть
Презентация на тему Разработка Web-сайтовс использованием языкаразметки гипертекста HTML
Содержание
- 2. Урок 1. Web-страницы и Web-сайты. Структура веб-страницы. Угринович, § 3.7.1- 3.7.2
- 3. Понятие веб-сайтаИнформация во Всемирной паутине хранится в
- 4. Виды веб-сайтовОфициальные (правительство, Дума, школа…)Коммерческие Личные
- 5. Достоинства веб-страниц:Малый информационный объем («легкие»)Пригодны для просмотра в разных ОС.Динамичные.Интерактивные.
- 6. Этапы создания веб-сайта:Построить сайт на локальном компьютере.Протестировать
- 7. Программы для создания сайта:1) простейший текстовый редактор
- 8. Визуальные веб-редакторыСоздание сайта на языке HTML очень
- 9. Структура Web-страницыУгринович, § 3.7.2
- 10. ТэгиВид Web-страницы задается управляющими командами - тэгами,
- 11. Структура Web-страницыВесь HTML-код страницы помещается внутрь главного
- 12. Заголовок веб-страницыЗаголовок Web-страницы заключается в контейнер Содержит
- 13. Пишем шаблон веб-страницы Компьютер
- 14. Основное содержание веб-страницыОсновное содержание страницы помещается
- 15. Шаблон веб-страницы Компьютер
- 17. Как сохранить веб-страницу1. Cоздать для сайта специальную
- 18. Создаем свой сайт….Нужно различать имя файла index.html
- 20. Практическая работа 3.8 Учебный сайт «Компьютер»Проект
- 21. Домашнее задание§ 3.7.1 – 3.7.2 – определения
- 22. УРОК № 2
- 23. Проверочная работа № 1В какой форме хранится
- 24. Урок 2. Форматирование текста на Web-страницеУгринович, § 3.7.3
- 25. Форматирование текстаПока страница не слишком привлекательна: мелкий
- 26. Цвет шрифтаЗначение атрибута COLOR можно задать 2-мя
- 28. 4. Горизонтальная линия отделит заголовок от остального
- 29. Практическая работа 3.8 Учебный сайт «Компьютер»Отформатировать
- 31. Домашнее задание§ 3.7.3 – тэги наизусть;вопросы (с.114, 115, 116)ПР 3.8 (задания 3-4) – с. 166
- 32. УРОК 3
- 33. Проверочная работа № 2В какой форме хранится
- 34. Урок 3. Вставка изображений в Web-страницыУгринович, § 3.7.4
- 35. Вставка изображенийНа Web-страницах могут быть графические файлы
- 36. Поясняющий текст. Расположение рисунка в тексте.Иллюстрации на
- 37. Вид готового сайта
- 38. Код страницы сайта Компьютер Все о
- 39. Домашнее задание§ 3.7.4 – тэги наизусть;вопросы (с.114, 115, 116, 118)ПР 3.8 (задание 5) – с. 167
- 40. Урок 4
- 41. Проверочная работа № 3Что такое Web-сайт?Типы сайтов.Каким
- 42. Урок 4. Гиперссылки на Web-страницахУгринович, § 3.7.5
- 43. Гиперссылки позволяют загружать в браузер другие веб-страницы,
- 44. Виды гиперссылок1) внутренняя: Указатель ссылки2) внешняя: Указатель ссылки
- 45. Указатели гиперссылокУказатель – видимая часть гиперссылки: текст или картинка
- 46. Адресная часть гиперссылокПерейти на другие веб-страницы: Указатель
- 47. Гиперссылка на электронную почтуГиперссылка этого типа заключается в особый контейнер Наш е-mail
- 48. Вид готовой страницы сайта
- 49. Код страницы сайта Компьютер Все о
- 50. Домашнее задание§ 3.7.5 – тэги наизусть;вопросы (с.114,
- 51. Урок 5
- 52. Проверочная работа № 4Что такое Web-сайт?Каким образом
- 53. Урок 5. Списки на Web-страницахУгринович, § 3.7.6
- 54. Виды списковНумерованныеМаркированныеСписки терминов (как в словаре)Вложенные списки
- 55. Нумерованный списокСписок – в контейнере Элемент списка
- 56. Маркированный списокСписок – в контейнере Элемент списка
- 57. Список терминовСписок – в контейнере Элемент списка
- 58. Домашнее задание§ 3.7.6 – тэги наизусть;вопросы (с.114,
- 59. Урок 6
- 60. Урок 6. Интерактивные формы на Web-страницахУгринович, § 3.7.7
- 61. Проверочная работа № 5Что такое Web-сайт?Каким образом
- 62. Понятие интерактивной формыДля общения посетителей сайта
- 63. Текстовое полеОсновной контейнер Текстовое поле – для
- 64. Переключатели (радиокнопки)Круглая кнопка для выбора
- 65. ФлажкиКвадратное окошечко для выбора нескольких ответов из
- 66. Поля списковДля создания раскрывающего списка используют контейнер В нем каждый элемент списка задается тэгом
- 67. Текстовая областьТекстовая область с линейкой прокрутки
- 68. Отправка данных из формыКнопка отправки создается тэгом
- 69. Готовая анкета
- 70. Скачать презентацию
- 71. Похожие презентации
Урок 1. Web-страницы и Web-сайты. Структура веб-страницы. Угринович, § 3.7.1- 3.7.2
Слайд 3
Понятие веб-сайта
Информация во Всемирной паутине хранится в форме
Web-сайтов.
Web-сайт по структуре напоминает журнал по какой-либо теме
или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.Веб-страницы связаны гиперссылками.
Слайд 5
Достоинства веб-страниц:
Малый информационный объем («легкие»)
Пригодны для просмотра в
разных ОС.
Динамичные.
Интерактивные.
Слайд 6
Этапы создания веб-сайта:
Построить сайт на локальном компьютере.
Протестировать (проверить
правильность работы).
Разместить в Интернете – подобрать сервер для хостинга
(платный или бесплатный).
Слайд 7
Программы
для создания сайта:
1) простейший текстовый редактор (без форматирования
текста): Блокнот
2) браузер для
просмотра страниц: Internet Explorer
3) программа обработки изображений:
Photoshop
Слайд 8
Визуальные веб-редакторы
Создание сайта на языке HTML очень трудоемкое,
нужны специальные знания.
Есть визуальные веб-редакторы (программы) для создания сайтов.
Работают по принципу WYSIWYG (что видишь, то и получишь).
Слайд 10
Тэги
Вид Web-страницы задается управляющими командами - тэгами, которые
заключаются в угловые скобки < >
Тэги бывают одиночные
(неповторяющиеся) или парные (контейнеры): перед закрывающим тэгом контейнера пишут прямой слэш (/) Тэги пишутся английскими буквами (прописными, строчными).
Слайд 11
Структура Web-страницы
Весь HTML-код страницы помещается внутрь главного контейнера:
.
Web-страница разделяется на
2 логические части:
заголовок (HEAD) содержание (BODY).
Слайд 12
Заголовок веб-страницы
Заголовок Web-страницы заключается в контейнер
Содержит
название документа и справочную информацию о странице (например, тип
кодировки), которая используется браузером для ее правильного отображения.Название Web-страницы содержится в контейнере <ТITLE> и отображается в верхней строке окна браузера при просмотре страницы.
<ТITLЕ>Компьютер
Слайд 14
Основное содержание
веб-страницы
Основное содержание страницы помещается в контейнер
.
Может содержать: текст, таблицы, бегущие строки, картинки, ссылки,
звуковые файлы... Поместим на страницу текст «Все о компьютере»:
Все о компьютере
Слайд 17
Как сохранить веб-страницу
1. Cоздать для сайта специальную папку
и сохранять все файлы сайта в этой папке.
2. Web-страницу
сохранить в виде файла с именем index.html - это титульный лист сайта (первым загружается в браузер) Расширения файла Web-страницы – .htm или .html
Слайд 18
Создаем свой сайт….
Нужно различать имя файла index.html -
под которым Web-страница хранится в файловой системе, и собственно
имя Web-страницы «Компьютер» - высвечивается в верхней строке окна браузера и в первую очередь анализируется поисковыми системами.Имя Web-страницы должно в максимальной степени соответствовать ее содержанию.
1. В Блокнот ввести HTML-код Web-страницы.
2. Сохранить файл под именем index.html в папке сайта. Выбрать тип файла – «Все файлы».
3. Открыть этот файл в браузере для просмотра.
Слайд 20
Практическая работа 3.8
Учебный сайт «Компьютер»
Проект сайта:
сколько
Web-страниц будет входить в сайт,
тематика страниц,
связи страниц (гиперссылки).
Структура
сайта «Компьютер»:1) начальная (домашняя) страница;
2) «Программы» (классификация программного обеспечения);
3) «Словарь» (словарь компьютерных терминов);
4) «Анкета» (опрос посетителей сайта).
Стр. 165-166, задания 1-2.
Слайд 21
Домашнее задание
§ 3.7.1 – 3.7.2 – определения и
тэги наизусть;
вопросы (с.114, 115)
ПР 3.8 (задания 1-2) – с.
166
Слайд 23
Проверочная работа № 1
В какой форме хранится информация
во Всемирной паутине?
Что такое Web-сайт?
Типы сайтов.
В чем преимущества
веб-страниц перед обычными текстовыми документами?Каким образом веб-страницы объединяются в веб-сайты?
Что такое тэги?
Что такое тэговый контейнер? Записать главный контейнер веб-страницы.
Какова логическая структура веб-страницы?
Написать шаблон веб-страницы.
Слайд 25
Форматирование текста
Пока страница не слишком привлекательна: мелкий шрифт
и черный текст на белом фоне. Но с помощью
тэгов можно украсить текст.1. Заголовки: тэги от <Н1> (самый крупный) до <Н6> (самый мелкий). <Н1> Всё о компьютере
2. Шрифт (FONT). Некоторые тэги имеют атрибуты - имена свойств, могут принимать определенные значения.
FONT face=“Arial” – гарнитура шрифта
size=4 – размер
color=“red” – цвет
3. Выравнивание (ALIGN). Текст обычно выравнивается по левому краю страницы, однако принято заголовок размещать по центру.
ALIGN =“left", ALIGN="right", <Н1 ALIGN="center"> Bcё о компьютере
ALIGN="center"
Слайд 26
Цвет шрифта
Значение атрибута COLOR можно задать 2-мя способами:
а)
названием цвета (например, "red", "green", "blue" и так далее),
б) его шестнадцатеричным значением в RGB-формате "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие — интенсивность зеленого (green) и две последние — интенсивность синего (blue) цветов.
Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная — FF. Синий цвет = "#0000FF".
Таким образом, задать синий цвет заголовка можно тэгом FONT с атрибутом COLOR:
<Н1 ALIGN="center">Bcё о компьютере
Слайд 28 4. Горизонтальная линия отделит заголовок от остального содержания
страницы с помощью одиночного тэга .
5. Абзацы: . При
просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания.Форматирование текста
Слайд 29
Практическая работа 3.8
Учебный сайт «Компьютер»
Отформатировать текст начальной
страницы:
1) Создать и выровнять 2 абзаца (зад.3)
2) Выделить цветом
заголовок страницы и отделить его горизонтальной чертой (зад.4)Стр. 166, задания 3-4.
Слайд 31
Домашнее задание
§ 3.7.3 – тэги наизусть;
вопросы (с.114, 115,
116)
ПР 3.8 (задания 3-4) – с. 166
Слайд 33
Проверочная работа № 2
В какой форме хранится информация
во Всемирной паутине?
Что такое Web-сайт?
Типы сайтов.
В чем преимущества
веб-страниц перед обычными текстовыми документами?Каким образом веб-страницы объединяются в веб-сайты?
Что такое тэги?
Что такое тэговый контейнер? Записать главный контейнер веб-страницы.
Какова логическая структура веб-страницы?
Написать шаблон веб-страницы.
Перечислить 5 тегов форматирования страницы.
Что такое атрибут тега?
Какие существуют способы задания цвета на веб-странице?
Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?
Слайд 35
Вставка изображений
На Web-страницах могут быть графические файлы 3
форматов — GIF, JPG и PNG. Если рисунок сохранен
в другом формате, то его необходимо предварительно преобразовать в один из этих форматов.Для вставки изображения используется тэг
1) картинка на локальном компьютере в папке с сайтом:
2) картинка в другой папке на локальном компьютере:
3) картинка находится на удаленном сервере в Интернете:
Слайд 36
Поясняющий текст. Расположение рисунка в тексте.
Иллюстрации на Web-страницах
стали неотъемлемым элементом дизайна. Однако пользователи в целях экономии
времени иногда отключают в браузере загрузку графических изображений и читают только тексты.Поэтому, чтобы не терялся смысл страницы, вместо рисунка должен выводиться поясняющий текст с атрибутом ALT
Положение рисунка в тексте – определяет атрибут ALIGN тэга
Слайд 38
Код страницы сайта
Компьютер
Все
о компьютере
На этом сайта
вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.
Слайд 39
Домашнее задание
§ 3.7.4 – тэги наизусть;
вопросы (с.114, 115,
116, 118)
ПР 3.8 (задание 5) – с. 167
Слайд 41
Проверочная работа № 3
Что такое Web-сайт?
Типы сайтов.
Каким образом
веб-страницы объединяются в веб-сайты?
Что такое тэги? тэговый контейнер?
Записать главный контейнер веб-страницы.Какова логическая структура веб-страницы?
Перечислить 5 тегов форматирования страницы.
Что такое атрибут тега?
Какие существуют способы задания цвета на веб-странице?
Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?
Какой тег и его атрибуты используются для вставки изображений?
Слайд 43
Гиперссылки позволяют загружать в браузер другие веб-страницы, связанные
с предыдущей.
Гиперссылка состоит из 2 частей: адрес и указатель
ссылки.Гиперссылка задается универсальным тегом с атрибутом HREF (он указывает, в каком файле хранится нужная веб-страница):
Указатель ссылки
Слайд 46
Адресная часть гиперссылок
Перейти на другие веб-страницы:
Указатель
ссылки
Открыть картинку в браузере:
Картинка
Прослушать звук (запуск встроенного
в браузер проигрывателя):Звук
Сохранить файл (запуск встроенного в браузер менеджера загрузки файлов):
Скачать файл
Слайд 47
Гиперссылка на
электронную почту
Гиперссылка этого типа заключается в
особый контейнер
Наш е-mail
Слайд 49
Код страницы сайта
Компьютер
Все
о компьютере
На этом сайта
вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.
[Программы]
[Словарь]
[Комплектующие]
[Анкета]
E-mail: mailbox@provaider.ru
Слайд 50
Домашнее задание
§ 3.7.5 – тэги наизусть;
вопросы (с.114, 115,
116, 118, 119)
ПР 3.8 (задания 6-7) – с. 167:
панель навигации
Слайд 52
Проверочная работа № 4
Что такое Web-сайт?
Каким образом веб-страницы
объединяются в веб-сайты?
Что такое тэги? тэговый контейнер? Записать
главный контейнер веб-страницы.Какова логическая структура веб-страницы?
Перечислить 5 тегов форматирования страницы.
Что такое атрибут тега?
Какие существуют способы задания цвета на веб-странице?
Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?
Какой тег и его атрибуты используются для вставки изображений?
Какой тег и его атрибуты используются для вставки гиперссылок?
Слайд 55
Нумерованный список
Список – в контейнере
Элемент списка –
тег
Атрибут TYPE – тип нумерации (арабские цифры; I
– римские; а – латинские строчные буквы)- Системные программы
- Прикладные программы
- Системы программирования
Слайд 56
Маркированный список
Список – в контейнере
Элемент списка –
тег
Атрибут TYPE – тип маркеров (“disc”- диск, “square”-
квадрат, “circle”-окружность)- Текстовые редакторы
- Графические редакторы
- Электронные таблицы
- Системы управления базами данных
см. стр.168 – «Программное обеспечение»
Слайд 57
Список терминов
Список – в контейнере
Элемент списка –
тег
Сначала пишется термин, затем его определение (как в
словаре)см. стр.169 – «Словарь»
Слайд 58
Домашнее задание
§ 3.7.6 – тэги наизусть;
вопросы (с.114, 115,
116, 118,119,120)
ПР 3.8 (задания 8-9) – с. 168-169: страницы
сайта «Программы» и «Словарь»
Слайд 61
Проверочная работа № 5
Что такое Web-сайт?
Каким образом веб-страницы
объединяются в веб-сайты?
Что такое тэги? тэговый контейнер? Записать
главный контейнер веб-страницы.Какова логическая структура веб-страницы?
Перечислить 5 тегов форматирования страницы.
Что такое атрибут тега?
Какие существуют способы задания цвета на веб-странице?
Какие теги используются для ввода заголовка? Форматирования шрифта? Ввода абзаца?
Какой тег и его атрибуты используются для вставки изображений?
Какой тег и его атрибуты используются для вставки гиперссылок?
Какие теги используются для создания нумерованных и маркированных списков?
Слайд 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=“e-mail”, ….
У каждого VALUE свой вариант ответа.
WWW
Слайд 66
Поля списков
Для создания раскрывающего списка используют контейнер
В
нем каждый элемент списка задается тэгом
Слайд 67
Текстовая
область
Текстовая область с линейкой прокрутки – для
ввода текста произвольной длины.
Контейнер
Атрибуты: NAME -
задает имя областиROWS - число строк
COLS - число столбцов
Слайд 68
Отправка данных из формы
Кнопка отправки создается тэгом
Атрибуты:
TYPE=“submit”
VALUE=“Отправить” (надпись на кнопке)
Чтобы данные из формы передать по
электронной почте, используют контейнер:- Имя файла: razrabotka-web-saytovs-ispolzovaniem-yazykarazmetki-giperteksta-html.pptx
- Количество просмотров: 186
- Количество скачиваний: 0
