Содержание
- 2. План лекции Определение Интернет-технологий Язык разметки Язык разметки HTML Каскадные стили Каскадные стили CSS Язык скриптов
- 3. Типы приложений Могут работать как на смартфоне, так и персональном компьютере Практически независимы от железа По
- 4. 2 – HTTP (англ. HyperText Transfer Protocol «протокол передачи гипертекста») — протокол прикладного уровня передачи данных
- 5. DNS-запрос — поиск ближайшего DNS-сервера, чтобы преобразовать URI (например, google.com) в его числовое представление — IP-адрес
- 6. Какие бывают Web-страницы? статические – существуют на сервере в виде готовых файлов: *.htm, *.html динамические –
- 8. Общее представление о языках гипертекстовой разметки HTML, XML, XHTML ЭВОЛЮЦИЯ ЯЗЫКОВ РАЗМЕТКИ. 1986 ISO-8879 SGML Декабрь
- 9. HTML + CSS Заголовок Заголовок Язык HTML достаточно простой. Сначала может показаться, что в нём слишком
- 10. HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») Основным форматом представления документов в сети
- 11. Тэги Тэг – это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги (контейнеры) вставить
- 12. Подготовка рабочего места Инструмент №1 – Редактор кода Инструмент №2 – PhotoShop или любой другой редактор,
- 13. HTML-код страницы помещается внутрь контейнера … Заголовок Web-страницы заключается в контейнер … Основное содержание страницы помещается
- 14. Простейшая Web-страница Моя первая Web-страница Привет! first.html Моя первая Web-страница шапка («голова») Привет! основная часть («тело»)
- 15. Cоздание файла веб-страницы Открыть Notepad++ и введите туда следующий текст: Моя первая веб-страничка Здравствуйте, это моя
- 16. Сохранение Выбрать в меню Файл - Сохранить как…, и сохранить файл с расширение .html
- 17. Web-страницы. Язык HTML Оформление текста
- 18. Заголовки: H1 … H6 Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки выравнивание:
- 19. Абзацы переход на новую строку абзац (с отступами) И вечный бой! Покой нам только снится Сквозь
- 20. Выравнивание Этот текст выровнен по центру. Этот текст выровнен по ширине. Этот текст выровнен по ширине.
- 21. Физическая разметка
- 22. Специальные символы
- 23. Web-страницы. Язык HTML Изображения
- 24. Форматы рисунков GIF (Graphic Interchange Format) сжатие без потерь прозрачные области анимация только с палитрой (2…256
- 25. Выравнивание left right top bottom (по умолчанию) middle
- 27. Рисунки в документе из той же папки: из другой папки: с другого сервера: image (изображение) source
- 28. Отступы VSPACE (vertical space) HSPACE (horizontal space)
- 29. Другие атрибуты всплывающая подсказка надпись на месте рисунка, если его нет размеры позволяют: растянуть - сжать
- 30. Рисунок-гиперссылка ALT="Бесплатная почта" BORDER=0> локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если
- 31. Web-страницы. Язык HTML Гиперссылки
- 32. Ссылки на другие страницы сайта Таблицы страница в той же папке anchor (якорь) hyper reference (гиперссылка)
- 33. Примеры (ссылки из файла rock.html)
- 34. Ссылки на другие сайты Почта на главную страницу сайта index.htm, index.html, default.asp, … на конкретную страницу
- 35. Ссылки внутри страницы Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы
- 36. Запуск почтовой программы Напишите мне!
- 37. Web-страницы. Язык HTML Этапы создания современного сайта
- 38. Работу по созданию можно разделить на такие этапы: - Подготовительный; - Разработка макета; - Верстка; -
- 39. 1. Подготовительный этап Создание любого сайта должно начинаться с составления его структуры (карты сайта), тематики, цель
- 40. 2. Разработка макета Разработка макета - расположение основных значимых элементов (блоков) на каждой странице (каркас). Разработка
- 41. Пример созданного макета в Photoshop
- 42. Табличная. В табличной верстке можно создавать колонки, таблицы в браузерах выглядят почти одинаково. Недостатки: индексация такого
- 43. Табличная верстка Схема табличного дизайна: Заголовок сайта Набор гиперссылок Содержимое сайта Сведения о правах разработчика
- 44. Блочная верстка Создаем простейший макет сайта на основе блочной верстки. Элемент является блочным элементом и предназначен
- 45. Шапка(header) Левая колонка(left) Содержание страницы(content) Подвал(footer) Блоки верстка с #header { width:1000px; height:217px; background: red; }
- 46. Пример вёрстки
- 47. Web-страницы. Cascading Style Sheets (СSS)
- 48. CSS (Cascading Style Sheets) Каскадные таблицы стилей преимущественно используется как средство описания, оформления внешнего вида веб-страниц,
- 49. Синтаксис CSS состоит из трех частей: селектора, свойства и значения: Синтаксис CSS Синтаксис: селектор { свойство:
- 50. Селекторы элементов
- 51. Селекторы классов и идентификаторов Кофе — напиток, изготавливаемый из жареных зёрен кофейного дерева. Благодаря содержанию кофеина
- 52. Основные свойста CSS width:1000px; // задает ширину элемента (можно в px,%) height:217px; // задает высоту элемента
- 53. CSS 3. Новые возможности Прозрачность/Opacity В браузерах, поддерживающих это свойство, указать прозрачность можно так: В файле
- 54. CSS 3. Новые возможности Пользовательское изменение размера/Resize Средствами новой версии CSS можно добавить немного интерактивности на
- 55. CSS 3. Новые возможности Тень блока/box-shadow Абсолютно новое свойство, позволяющее показать бокс с тенью. Его формат
- 56. Web-страницы. JavaScript
- 57. Немного о JavaScript Язык JavaScript предоставляет средства для решения многих задач в документе HTML без необходимости
- 58. Объектная модель DOM В javascript страница представлена в виде объектной модели DOM (Document Object Model). Согласно
- 59. Простейший DOM Самый внешний тег - , поэтому дерево начинает расти от него. Внутри находятся два
- 60. Обращение к элементам DOM Стандарт DOM предусматривает несколько средств поиска элемента. Это методы: getElementById, getElementsByTagName и
- 61. Обращение к элементам DOM Следующий способ - это получить все элементы с определенным тегом, и среди
- 62. Возможности, которые даёт DOM Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для
- 63. Вставить код JavaScript на страницу function openMenu(node){ var subMenu = node.parentNode.getElementsByTagName("ul")[0]; subMenu.style.display == "none" ? subMenu.style.display
- 64. Результат При нажатии:
- 65. Библиотеки JavaScript
- 66. jQuery jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать
- 67. jQuery. Подключение Подключить jQuery можно двумя способами: 1.Загрузка и подключение Загружать jQuery желательно с http://jquery.com/download/. Чтобы
- 68. jQuery. Подключение 2. Подключение jQuery с CDN (не закачивая библиотеку на сервер) Существуют несколько таких хранилищ,
- 69. jQuery. Пример(слайдер) jQuery можно использовать для различных задач. Разберем например слайдер и галерею изображений. Разберем самый
- 70. jQuery. Пример(слайдер) Добавляем на страницу следующий код Текст 1 Далее текст 2 Текст 3
- 71. jQuery. Пример(слайдер) Как изменять слайдер: Чтобы добавить(удалить) страничку слайдера добавляем(удаляем) элемент Текст 1 Далее 2) Изменение
- 72. jQuery. Пример(слайдер) Вставляем Инициализацию плагина 1. Без параметров $(".slider-container").sliderUi(); 2. C расширенными параметрами $(".slider-container").sliderUi({ speed: 500,
- 73. jQuery. Пример(слайдер) Результат:
- 74. jQuery. Пример(галерея изображений) Использование jQuery для создания галереи изображений Галерея Funcy Box (подробную инструкцию по установке
- 75. jQuery UI. jQuery UI (User intarface)— библиотека JavaScript с открытым исходным кодом для создания насыщенного пользовательского
- 76. jQuery UI. Datapicker Datepicker — виджет для выбора даты или диапазона дат jQuery UI Datepicker -
- 77. jQuery UI. Tabs Tabs — вкладки
- 78. jQuery UI. Tabs jQuery UI Tabs - Default functionality $(function() { $( "#tabs" ).tabs(); }); Название
- 79. jQuery UI. Accordion Accordion — виджет «Аккордеон»
- 80. jQuery UI. Accordion jQuery UI Accordion - Default functionality $(function() { $( "#accordion" ).accordion(); }); Секция
- 81. Landing Page LANDING PAGE - веб-страница, построенная определенным образом, основной задачей которой является сбор контактных данных
- 82. Landing Page. Шаблон
- 83. Landing Page. Пример
- 84. Landing Page. Перемещение по странице Когда на странице сайта расположено большое количество контента пользователь ознакомившись с
- 85. Landing Page. Кнопка наверх с помощью jQuery Кнопка реализована достаточно просто. Для ее функционирования понадобится библиотека
- 86. Landing Page. Кнопка наверх. Чтобы придать красивый внешний вид кнопке необходимо добавить следующие стили. Их лучше
- 87. Web-страницы. PHP+MySQL
- 88. Обработка событий Динамика на веб-страницах реализована при помощи скриптов, которые выполняются на сервере. Работает это следующим
- 89. Схема работы без и с PHP Статические HTML-страницы Динамические страницы (с PHP кодом)
- 90. РНР выполняется на сервере. Браузер посылает серверу запрос на страницу с php кодом. Сервер отдает эту
- 91. Что необходимо Apache HTTP-сервер необходим для обработки запросов от браузера и передачи на исполнение php-скриптов (т.к.
- 92. Денвер Локальный сервер (Apache, PHP, MySQL, Perl и т.д.) и программная оболочка, используемые Web-разработчиками для разработки
- 93. Для того, чтобы сообщить серверу о том, что надо произвести обработку PHP-кода, необходимо использовать следующий синтаксис
- 94. Форма — это инструмент, с помощью которого HTML-документ может послать некоторую информацию скрипту, где информация будет
- 95. ! В свойстве action тега Form указывается файл скрипта имя_файла.php И так создадим простейшую форму: (начало
- 96. Передача данных на сервер Тэг , имеющий парный завершающий тэг , собственно и задает форму. Его
- 97. Передача данных методом GET GET - это название запроса который отправляется на сервер скрипту с помощью
- 98. Передача данных методом POST Главное отличия метода POST от метода GET это то, что он скрывает
- 99. Передача значений $_POST[‘sirname’] $_POST[‘email’] $_POST[‘message’] Передача значений
- 100. Немного о языке PHP echo - выводит одну или более строк $имя_переменной = значение; //определение переменной
- 101. Обработка переданных значений А теперь – создаем файл test.php и пишем скрипт: echo " Привет, ".$_POST['sirname']."
- 102. Хранение данных Хранилище обработанных данных База данных (MySQL, Oracle, Postgre и т.д.)
- 103. Использование БД Mysql 1. Создаём базу данных с использованием утилиты phpmyadmin (набираем в браузере localhost и
- 104. Использование БД Mysql 2. В созданной базе данных создаём таблицу (для этого нужно указать имя таблицы,
- 105. Использование БД Mysql 3. Подключаемся к базе данных в php файле: $db=mysql_connect("localhost", "root",""); mysql_select_db("praktika", $db); ?>
- 106. Как записать данные в MySQL Структурированный язык запросов (Structured Query Language) – сокращённо SQL: Есть четыре
- 107. Как записать данные в MySQL /* Принимаем данные из формы */ $name = $_POST["sirname"]; $email =
- 108. Как выбрать данные из MySQL /* Подключаемся к базе данных */ $db=mysql_connect("localhost", "root",""); mysql_select_db("praktika", $db); /*
- 109. Загрузка файлов на сервер Приложение для загрузки файлов на сервер представляет собой HTML-форму (upload.html) и скрипт
- 110. Обработка multipart-форм Как же PHP обрабатывает multipart-формы? Получив файл, он сохраняет его во временном каталоге upload_tmp_dir,
- 111. Обработка multipart-форм После завершения работы скрипта, временный файл будет удален. Это означает, что мы должны его
- 112. Пишем upload.php Файл успешно загружен на сервер "; } else { echo " Ошибка! Не удалось
- 113. Считывание файлов из директории //Получив путь, мы можем выводить картинку в галлерею и слайдер, например, //
- 115. Скачать презентацию