Это займет всего пару минут! А пока ты можешь прочитать работу в формате Word 👇
Оглавление
Введение...................................................................................................................................................... 5
Вопросы к зачету ........................................................................................................................................ 6
1. HTML ...................................................................................................................................................... 8
Лекция 1. Основы HTML....................................................................................................................... 8
1.1. История языка HTML. Создание web-страниц ......................................................................... 8
1.2. Структура html-документа ......................................................................................................... 9
1.3. Теги управления форматированием ........................................................................................ 11
1.4. Таблицы...................................................................................................................................... 12
Лекция 2. Ссылки, рисунки, фреймы ................................................................................................. 14
2.1. Ссылки........................................................................................................................................ 14
2.2. Рисунки ...................................................................................................................................... 15
2.3. Карты изображения ................................................................................................................... 16
2.4. Фреймы....................................................................................................................................... 16
2. CSS......................................................................................................................................................... 17
Лекция 3. Каскадные таблицы стилей ................................................................................................ 17
3.1. Синтаксис CSS........................................................................................................................... 17
3.2. Размещение каскадных таблиц ................................................................................................ 19
3.3. Верстка ....................................................................................................................................... 20
3.4. Параметры CSS, управляющие положением на странице..................................................... 21
3. JavaScript ............................................................................................................................................... 23
Лекция 4. Основные сведения о JavaScript ........................................................................................ 23
4.1. Знакомство с JavaScript ............................................................................................................. 23
4.2. Операторы языка JavaScript ..................................................................................................... 24
4.3. Объекты JavaScript .................................................................................................................... 27
Лекция 5. Формы HTML. Обработка форм с помощью JavaScript.................................................. 31
5.1. Основные элементы формы ..................................................................................................... 31
5.2. Обращение к элементам формы............................................................................................... 37
5.2. Обработчики событий ............................................................................................................... 38
Лекция 6. Объектная модель Dynamic HTML ................................................................................... 38
6.1. Window ....................................................................................................................................... 38
6.2. document ..................................................................................................................................... 40
6.3. Объект navigator ........................................................................................................................ 40
6.4. Объект location........................................................................................................................... 41
6.5. Объект history ............................................................................................................................ 41
2
6.6. Объект screen ............................................................................................................................. 41
6.7. Объект event ............................................................................................................................... 42
6.8 Обращение к свойствам таблицы стилей ................................................................................. 43
6.9. Свойства и методы управления содержимым ........................................................................ 43
Лекция 7. Модель DOM ....................................................................................................................... 45
7.1. Структура документа DOM ...................................................................................................... 45
7.2. Навигация по дереву документа .............................................................................................. 45
7.3. Создание новых узлов............................................................................................................... 46
7.4. Редактирование дерева документов ........................................................................................ 46
7.5. Работа с массивами элементов ................................................................................................. 47
Лекция 8. Библиотека jQuery .............................................................................................................. 48
8.1. Введение в jQuery...................................................................................................................... 48
8.2. Обращение к элементам ........................................................................................................... 49
8.3. Обработчик готовности документа ......................................................................................... 50
8.4. Создание элементов DOM ........................................................................................................ 51
8.5. Работа с полученным набором значений ................................................................................ 51
8.6. Манипулирование объектами на странице ............................................................................. 52
8.7. Обработка событий ................................................................................................................... 52
8.8. Скрытие и отображение объектов ........................................................................................... 53
8.9. Создания слайдера .................................................................................................................... 53
Введение
Лекции и лабораторные работы разработаны для студентов направления «Математика и компьютерные науки» на основе многолетнего преподавания автором дисциплины «Web-программирование» в Сыктывкарском государственном университете. В рамках курса рассматриваются только технологии, работающие на стороне клиента, а именно – HTML, CSS, JavaScript.
Серверная часть в рамках курса не рассматривается.
Курс рассчитан на 108 часов, из них
Самостоятельная работа – 53 ч;
Лекции – 16 ч;
Лабораторные занятия – 34 ч
В рамках курса предусмотрена 1 контрольная работа.
Итоговый форма контроля – зачет.
Продолжение курса видится автором в виде дальнейшего изучения баз
данных и программирования на php, а также в рамках курсового и дипломного проектирования.
Содержание курса направлено на понимание сути web-технологий. Поэтому приведены только основные конструкции и примеры, призванные показать принципы взаимодействия. Для более детального изучения рекомендуется изучить материалы, представленные, например, на сайтах:
http://htmlbook.ru;
http://javascript.ru;
https://htmlweb.ru.
Тем не менее, пособие призвано создать полноценную картину о webпрограммировании, поэтому содержит примеры и необходимые материалы.
Для удобства приведены вопросы к зачету по дисциплине «Webпрограммирование».
5
Вопросы
1. Определение языков разметки. HTML, версии.
2. Структура Web-страницы (обычная, с фреймовой структурой).
3. HTML. Форматирование текста, изменение шрифта, заголовки, списки.
4. HTML. Вставка рисунков и таблиц.
5. Верстка страниц при помощи таблиц.
6. HTML. Гиперссылки, примеры.
7. HTML. Карты изображений.
8. HTML. Фреймы. Пример.
9. HTML. Формы. Способы передачи данных на сервер. Элементы формы.
10. Определение, назначение, версии каскадных таблиц стилей (CSS).
11. Синтаксис CSS.
12. Верстка страниц при помощи CSS.
13. Статические и динамические фильтры.
14.Управление положением на странице (свойства left, top, z-index, position,
visibility, overflow).
15. JavaScript, назначение, размещение, основные операторы.
16. Классы языка JavaScript.
17. Класс Data. Пример использования.
18. Класс String. Пример использования.
19. Работа с математическими формулами в JavaScript.
20. Обращение к элементам формы из JavaScript.
21. Обработка событий при помощи JavaScript.
22. Объектная модель DHTML.
23. Объект window.
24. Объект document.
25. Объекты history, location, screen, navigator.
26.Объект event. Обработка событий.
27. Функции и свойства смены содержимого.
6
28. Модель DOM. Уровни. Структура документа.
29. DOM. Навигация по дереву документов. Создание узлов.
30. DOM. Редактирование дерева элементов.
31. DOM. Работа с массивами элементов. Пример.
32. Библиотека jQuery. Обращение к элементам.
33. Создание элементов DOM с помощью jQuery. Пример реализации раскрывающегося списка.
Для самостоятельного изучения
34. Системы управление контентом (CMS). Назначение, функции.
35. Классификация CMS.
36. Схема функционирования CMS. Проблемы установки и использования
CMS.
37. Установка CMS WordPress.
38. Настройка WordPress. Плагины, шаблоны.
39. Способы программирования на php в WordPress.
7
1. HTML
Лекция 1. Основы HTML
1.1. История языка HTML. Создание web-страниц
HTML (HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной паутине.
Версии языка HTML
HTML 0.9
HTML 2.0, одобренный как стандарт 22 сентября 1995 года;
HTML 3.2— 14 января 1997 года;
HTML 4.0 — 18 декабря 1997 года;
HTML 4.01 — 24 декабря 1999 года;
HTML 5— 28 октября 2014 года
HTML 5.1 начал разрабатываться примерно 19 декабря 2012 года.
Для создания web-страниц нам понадобиться обычный текстовый ре-
дактор, например, Блокнот или NotePad++. Отличие в том, что создаваемым
файлам дается расширение html.
Рассмотрим создание страницы, выводящей фразу «Сыктывкарский государственный университет». Для этого в блокноте набираем:
СыктГУ
Сыктывкарский государственный университет
Затем необходимо сохранить этот документ в виде файла с расширением html. Далее выполняем двойной щелчок по файлу, после чего запускается
браузер для просмотра результата.
8
1.2. Структура html-документа
HTML — элемент верхнего уровня — ограничивает начало и конец
документа. Элемент HTML является элементом верхнего уровня в языке
HTML. Использование элемента HTML не сказывается на выводе документа.
Если элемент HTML используется, начальный и конечный теги HTML долж-ны
идти вокруг всего документа, сразу после объявления DOCTYPE.
заголовок и тело документа
HEAD (ЗАГОЛОВОК) — заголовок документа
Основная структура HTML-документа должна состоять из заглавия и
тела. Явное вложение заголовка в элемент HEAD не обязательно. Использование элемента HEAD не сказывается на вывод документа. Атрибуты отсутствуют. В документе должен присутствовать только один элемент HEAD, и
он должен появиться до элемента BODY .
Синтаксис использования
элемент TITLE
Заметим, что начальный и конечный теги могут отсутствовать.
Тег должен содержать один TITLE элемент и возможно следующие элементы
ISINDEX:
META;
LINK;
STYLE;
SCRIPT.
BODY (ТЕЛО) — тело документа. Основная структура документа
HTML всегда состоит из заголовка и тела. Нет необходимости явно помещать тело в элемент BODY, однако делая так, можно специфицировать атри9
буты, влияющие на представление документа в целом (например, установить
фоновое изображение или цвет).
Если элемент BODY не содержит атрибуты, использование его не дает
явного эффекта в непосредственном отображении документа. Элемент HTML
может быть задан яво или подразумеваться. Только один элемент BODY разрешен в документе, и он должен находится после элементаHEAD (который
тоже может быть как подразумеваемым, так и явным).
Основной синтаксис
тело документа
Возможные атрибуты тега BODY
Имя атрибута
Возможные
значения
Смысл
BGCOLOR
Цвет
Фоновый цвет документа
TEXT
Цвет
Цвет для текста документа
Цвет
LINK
Цвет
для непосещенной гипертекстовой
связи
Цвет
VLINK
Цвет
для посещенной гипертекстовой
связи
Цвет
для активной гипертекстовой
ALINK
Цвет
связи; используется для выделения текста , когда пользователь
нажал на связь
BACKGROUND URL
URL фонового образа
10
1.3. Теги управления форматированием
Абзац формируется при помощи тега
…
. Изначально предпо1
лагалось использовать вместе с тегами параметры . Параметры тега
–
способы выравнивания (left, right, center, justify). Например, если необходимо
сделать абзац с выравниванием по ширине, то надо написать:
Содержание абзаца
Заголовки предназначены, во-первых, показать важность раздела, к
которому относятся, а во-вторых, с помощью различных заголовков легко
регулировать размер текста. Чем выше уровень заголовка, тем больше размер
шрифта. Самым верхним уровнем является уровень 1 (
), а самым нижним — уровень 6 (
).
Также следует отметить, что использование заголовков приветствуется
поисковыми системами.
Пример использования заголовков.
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
Для полужирного начертания применяется два тега: и .
Жирное начертание шрифтаСильное выделение
текста
Для курсивного начертания используются два тега: и .
Курсивное начертание шрифтаВыделение
текста
1
В настоящее время параметры тегов также поддерживаются, но предпочтение отдается использованию
стилей.
11
Следует отметить, что теги и , также как и хотя и
похожи по своему действию, являются не совсем эквивалентными и заменяемыми. Первый тег — является тегом физической разметки и устанавливает жирное начертание текста, а тег — тегом логической разметки и выделяет помеченный текст.
Маркированный список формируется с помощью контейнера
, а
каждый пункт списка начинается с тега
, как показано ниже.
Значение №1
Значение №2
Значение №3
В списке непременно должен присутствовать закрывающий тег
,
иначе возникнет ошибка. Закрывающий тег хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка.
Нумерованные списки формируются так:
