К.Ю. Поляков, Е.А. Ерёмин, 2013 1 Создание веб-сайтов § 24. Веб-сайты и веб-страницыВеб-сайты и веб-страницы § 25. Текстовые веб-страницыТекстовые веб-страницы. - презентация

1 К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 24. Веб-сайты и веб-страницы Веб-сайты и веб-страницы § 25. Текстовые веб-страницы Текстовые веб-страницы § 26. Оформление документов Оформление документов § 27. Рисунки Рисунки § 28. Мультимедиа Мультимедиа § 29. Таблицы Таблицы § 30. Блоки Блоки § 31. Динамический HTMLДинамический HTML § 32. XML и XHTMLXML и XHTML § 33. Размещение веб-сайтов Размещение веб-сайтов

2 К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 24. Веб-сайты и веб-страницы 2

3 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Основные определения 3 Гипертекст (англ. hypertext) – это текст, содержащий гиперссылки. Гиперссылка (англ. hyper reference) – это «активная» ссылка на другой объект (часть того же документа, другой документ, файл, каталог, программу и т.д.). Веб-страница – это гипертекстовый документ в Интернете. Веб-сайт – группа веб-страниц, которые объединены общей темой и оформлением, связаны гиперссылками. Веб-сервер – это программа, которая принимает запросы по протоколу HTTP и отвечает на них – возвращает веб- страницы и дополнительные данные (рисунки, звуковые файлы, видеофайлы). Браузер – это программа для просмотра веб-страниц на экране монитора.

4 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Что такое веб-страница? 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis scelerisque metus, non hendrerit neque convallis placerat. Phasellus consequat convallis nisl, a volutpat quam posuere sed. Maecenas laoreet congue nibh, et euismod lectus varius sit amet. In tristique mattis leo, eget commodo ante egestas eget. Sed id purus quis ligula scelerisque fringilla. Suspendisse scelerisque, sapien id scelerisque imperdiet, tellus odio consequat nunc, eu fermentum diam lacus non urna. Praesent faucibus massa in risus sagittis a luctus justo aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent metus dolor, semper ut fermentum vel, imperdiet in risus. Nam a lectus lorem, dictum semper nulla. In eget ipsum non arcu aliquet lacinia. Morbi iaculis sodales metus, vel posuere orci vulputate vel. Nulla non felis sem, sagittis porttitor mi. Curabitur in tortor in nisi egestas cursus quis at sapien. Proin pulvinar, odio id lacinia suscipit, sem justo aliquam risus, nec suscipit enim felis at justo. Donec at nulla orci, suscipit auctor arcu. Donec nec tortor quis justo scelerisque cursus id et magna. index.html sunset.jpgtree.jpg image s media laugh.wavmovie.flv запрос на каждый файл! HTML = Hypertext Markup Language (язык разметки гипертекста) HTML – это не язык программирования! !

5 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Какие бывают веб-страницы? 5 статические – готовые файлы *.htm, *.html динамические – полностью или частично создаются на сервере в момент запроса *.php, *.asp, *.pl, *.cgi, *.shtml … быстро загружаются почти не нагружают сервер невозможна работа с базами данных (в т.ч. гостевые книги, комментарии, Веб 2.0) работа с базами данных загружаются медленнее дополнительная нагрузка на сервер

6 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Системы управления сайтами 6 CMS = Content Management System, система управления содержимым сайта. Функции: создание разделов сайта создание страниц база данных пользователей управление доступом обеспечение навигации и поиска Не нужно знать HTML! ! 1c-bitrix.ru Joomla! joomla.org Drupal drupal.org ucoz.ru wordpress.org бесплатно!

7 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Интерактивные страницы 7 DHTML = Dynamic HTML, динамический HTML. Скрипт или сценарий (англ. script) – это программный код для автоматизации действий пользователя. Javascript замена текста, оформления, рисунков многоуровневые выпадающие меню скрытие и показ частей страницы проверка данных, введенные пользователем выполнение вычислений игры…

8 К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 25. Текстовые веб-страницы 8

9 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Как создать веб-страницу? 9 Любой текстовый редактор (Блокнот и т.п.) 2×ЛКМ Текстовые редакторы с подсветкой HTML-тэгов: Sublime Text (sublimetext.com)sublimetext.com NotePad++ (notepad-plus-plus.org)notepad-plus-plus.org Bluefish (bluefish.openoffice.nl)bluefish.openoffice.nl HEFS (kpolyakov.spb.ru/prog/hefs.htm)kpolyakov.spb.ru/prog/hefs.htm Редакторы WYSIWYG = What You See Is What You Get TinyMCE ( Kompozer (kompozer.net)kompozer.net CKEditor (ckeditor.com)ckeditor.com openWYSIWYG ( BlueGriffon (bluegriffon.org)bluegriffon.org бесплатно!

10 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Первая веб-страница 10 Тэг – команда языка HTML открывающий тэг закрывающий тэг Первая страница Привет! Первая страница Привет! Первая страница Первая страница Привет! Привет! контейнер (парный тэг)

11 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Заголовки 11 заголовок документа заголовок раздела – заголовок документа – заголовок раздела – заголовок подраздела – заголовок параграфа Глава 1. Информация 1.1 Что такое информация? Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена... Глава 1. Информация 1.1 Что такое информация? Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена...

12 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Выравнивание заголовков 12 Глава 1. Информация left, center, right left, center, right атрибут (свойство)

13 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Абзацы (параграфы) 13 И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнёт ковыль... И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнёт ковыль... Браузер «проглатывает» переходы на новую строку! !

14 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Абзацы (параграфы) 14 И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнёт ковыль... И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнёт ковыль... paragraph – абзац интервал

15 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Выравнивание абзацев 15 Молекула воды испарилась из кипящего чайника и, подлетая к потолку, лоб в лоб столкнулась с неизвестно как прокравшейся на кухню молекулой водорода. Кто быстрей отлетел? Молекула воды испарилась из кипящего чайника и, подлетая к потолку, лоб в лоб столкнулась с неизвестно как прокравшейся на кухню молекулой водорода. Кто быстрей отлетел? left, center, right, justify Что плохо? ? Решение: align="left" Решение: align="left"

16 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Переход на новую строку 16 И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнёт ковыль... И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнёт ковыль... break – разрыв

17 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Специальные символы (HTML entities) 17 Символ HTML-код Название неразрывный пробел – – короткое тире — (длинное) тире § § параграф « « левая русская кавычка » » правая русская кавычка < < левая угловая скобка > > правая угловая скобка © © символ авторского права ® ® зарегистрированная торговая марка ° ° градус ² ² квадрат ³ ³ куб × × знак умножения ÷ ÷ знак деления

18 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Применение специальных символов 18 Дом сдали в 2011 году. А.С. Пушкин Пёс весил 12 кг. Неразрывный пробел ( ) год инициалы единицы измерения Из дома вышел А.С. Пушкин – солнце русской поэзии. Из дома вышел А.С. Пушкин – солнце русской поэзии. не отрывать:

19 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Применение специальных символов 19 Вышел А.С. Пушкин — солнце русской поэзии. Длинное тире ( — ) Вышел А.С. Пушкин – солнце русской поэзии. не начинать строку с тире! Короткое тире ( – ) Дорога Васюки–Васютино строилась в 2007–2013 годах. Дорога Васюки–Васютино строилась в 2007–2013 годах. Что плохо? ?

20 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Применение специальных символов 20 Угловые скобки ( < > ) Верно ли, что X В чём проблема? ? X < Y это начало тэга?

21 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Маркированные списки 21 Вася Петя Коля Вася Петя Коля unordered list (неупорядоченный список) list item (элемент списка) изменение маркера: disk circle square disk circle square

22 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Нумерованные списки 22 Вася Петя Коля Вася Петя Коля ordered list (упорядоченный список) изменение нумерации: , i, I, a, A

23 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Многоуровневые списки 23 Россия Украина Россия Украина Москва Санкт-Петербург Киев Одесса

24 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Гиперссылки (локальные) 24 Переход на новую страницу. Переход на новую страницу. anchor (якорь) anchor (якорь) hyper reference (гиперссылка) страница в том же каталоге: во вложенном каталоге: Информация. в родительском каталоге: Информация. в соседнем каталоге: Информация.

25 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Гиперссылки (внешние) 25 Информация. Информация. на URL: на главную страницу сайта: Информация. для скачивания архива: Скачать. Скачать. для запуска почтовой программы: Напишите мне!

26 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Как записать гиперссылки от show.htm ? 26 main index.htm goods.htm goods food food.htm show show.htm history hist.htm before before.htm

27 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Метки внутри документов 27 Там в лесу живет медведь.... Медведь Медведь — хищное млекопитающее семейства медвежьих. Там в лесу живет медведь.... Медведь Медведь — хищное млекопитающее семейства медвежьих. медведь на метку в другом файле: медведь

28 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Куда переход? 28...

29 К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 26. Оформление документов 29

30 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, оформление Содержание и оформление 30 содержание (контент) Веб-страница: содержаниеоформление Сборник задач по физике Григорий Остер Задача 61 Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Сборник задач по физике Григорий Остер Задача 61 Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. логическая разметка ( *.html ) логическая разметка ( *.html ) физическая разметка ( *.css ) физическая разметка ( *.css )

31 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Логическая разметка (HTML) 31 Выделение (emphasize): Вася Сильное выделение (strong): Вася Программный код (code): a:=b+c; Определение (definition): Информация — это... Цитата (citation): Карету мне, карету! Сокращение (abbreviation): НИИЧАВО

32 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Оформление текстов программ 32 iMin := 1; for i:=2 to n do if a[i] < a[iMin] then iMin := i; iMin := 1; for i:=2 to n do if a[i] < a[iMin] then iMin := i; iMin := 1; for i:=2 to n do if a[i] < a[iMin] then iMin := i; iMin := 1; for i:=2 to n do if a[i] < a[iMin] then iMin := i; preformatted (уже отформатированный)

33 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Тэги физической разметки HTML 33 Курсив (italic): Вася Жирный (bold): Вася Подчёркивание (underline): Вася Зачёркивание (strikeout): Вася Верхний индекс (superscript): Вася 2 Нижний индекс (subscript): Вася 2

34 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Стилевые файлы 34 содержание оформление Рекурсия У попа была собака, он её любил, Она съела кусок мяса, он её убил, В землю закопал, Надпись написал: У попа была собака, он её любил,... Рекурсия У попа была собака, он её любил, Она съела кусок мяса, он её убил, В землю закопал, Надпись написал: У попа была собака, он её любил,... main.css mob.css printer.css CSS (Cascading Style Sheets) – каскадные таблицы стилей.

35 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Стилевые файлы 35 body { color: white; background: #FF6600; } body { color: white; background: #FF6600; } название тэга свойство селектор color – цвет символов background – цвет фона test.css значение R = FF 16 = 255 G = = 102 B = 0 R = FF 16 = 255 G = = 102 B = 0

36 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Подключение стилевого файла 36 Страница с файлом стилей Привет, Вася! Страница с файлом стилей Привет, Вася! qq.html test.css body { color: white; background: #0000E0; } body { color: white; background: #0000E0; } таблица стилей

37 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Наследование стилей 37 Привет, Вася! Петя, тебе тоже привет! Привет, Вася! Петя, тебе тоже привет! body { color: white; background: #0000E0; } body { color: white; background: #0000E0; } наследуется не наследуется (прозрачный фон) не наследуется (прозрачный фон)

38 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Стили для элементов: шрифты 38 p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } для всех абзацев семейство шрифтов serif – с засечками sans-serif – без засечек monospace – моноширинный serif – с засечками sans-serif – без засечек monospace – моноширинный размер в пикселях normal – обычный italic - курсив normal – обычный italic - курсив normal – обычный bold - жирный normal – обычный bold - жирный

39 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Стили: размеры, выравнивание 39 p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } ширина высота Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. выравнивание: left center right justify выравнивание: left center right justify 100px 80% 20px цвет фона абзацный отступ

40 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Рамка, поля, отступы 40 p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } рамка отступы снаружи отступы внутри сверху, справа, снизу, слева со всех сторон толщина solid – сплошная dashed - штриховая dotted – точечная solid – сплошная dashed - штриховая dotted – точечная цвет Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. 40px 5px 20px

41 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Рамка, поля и отступы 41 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus. margin-right margin-bottom margin-left margin-top padding-right padding-left padding-top padding-bottom border-right border-left border-top border-bottom

42 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Стили гиперссылок 42 a { color: green; text-decoration: none; } a { color: green; text-decoration: none; } Все гиперссылки: a:visited { color: #0000AA; } Посещённые гиперссылки: a:hover { color: red; text-decoration: underline; } a:hover { color: red; text-decoration: underline; } Гиперссылки при наведении мыши: убрать подчёркивание псевдокласс подчёркивание

43 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Классы 43 Ошибка! Что-то с памятью. Ошибка! Что-то с памятью. p.error { background:red; } p.error { background:red; } для абзацев класса error p { background:blue; color:white; } p { background:blue; color:white; } каскад! Более конкретное указание отменяет более общее! !

44 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Классы 44. error { background:red; color:white; }.error { background:red; color:white; } для всех элементов класса error Ошибка! Что-то с памятью. Ошибка! Что-то с памятью. элемент в тексте

45 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Фоновый рисунок 45 p.hallo { background: white url(images/grad.jpg); } p.hallo { background: white url(images/grad.jpg); } Привет, Вася! Привет, Вася! Привет, Вася! p.hallo { background: url(grad.jpg) repeat-y; } p.hallo { background: url(grad.jpg) repeat-y; } Привет, Вася!

46 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Фоновый рисунок без повторения 46 p. { background: url(letter.gif) no-repeat; padding-left: 20px; } p. { background: url(letter.gif) no-repeat; padding-left: 20px; } 20px

47 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Составные селекторы 47 code, pre { font-weight: bold; font-family: Courier New, monospace; } code, pre { font-weight: bold; font-family: Courier New, monospace; } Общие свойства для нескольких тэгов: em a { font-style: normal; } em a { font-style: normal; } Вложенные элементы: a внутри em

48 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Сложные селекторы 48 p. a { color: green; text-decoration:none; } p. a { color: green; text-decoration:none; } p. a:hover { color: #00F; text-decoration:underline; } p. a:hover { color: #00F; text-decoration:underline; } p. a:visited { color: #F0F; } p. a:visited { color: #F0F; } ссылки внутри абзаца класса убрать подчеркивание посещённые ссылки подчеркнуть мышь над ссылкой то же, что #FF00FF

49 К.Ю. Поляков, Е.А. Ерёмин, Создание веб-сайтов § 27. Рисунки 49

50 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Форматы рисунков 50 GIF (Graphic Interchange Format) сжатие без потерь (LZW) прозрачные области анимация только с палитрой (2…256 цветов) рисунки с четкими границами, мелкие рисунки JPEG (Joint Photographer Expert Group) сжатие с потерями только True Color (16,7 млн. цветов) нет анимации и прозрачности рисунки с размытыми границами, фото PNG (Portable Network Graphic) сжатие без потерь с палитрой (PNG-8) и True Color (PNG-24) прозрачность и полупрозрачность (альфа-канал) нет анимации плохо сжимает мелкие рисунки

51 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Форматы рисунков 51 SVG (Scalable Vector Graphics, масштабируемые векторные изображения) ">

52 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Рисунки в документе 52 из той же папки: из другой папки: с другого сервера: image (изображение) source (источник)

53 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Выравнивание 53 left right top bottom (по умолчанию) middle

54 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Отступы 54 vspace (vertical space) hspace (horizontal space)

55 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Другие атрибуты 55 надпись на месте рисунка, если его нет размеры позволяют: растянуть – сжать не портить дизайн, если рисунка нет размеры позволяют: растянуть – сжать не портить дизайн, если рисунка нет всплывающая подсказка надпись на месте рисунка, если его нет размеры позволяют: растянуть – сжать не портить дизайн, если рисунка нет размеры позволяют: растянуть – сжать не портить дизайн, если рисунка нет всплывающая подсказка">

локальная ссылка: ссылка на" title="Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru Рисунок-гиперссылка 56 локальная ссылка: ссылка на" class="link_thumb"> 56 Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, Рисунок-гиперссылка 56 локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет «хвоста» локальная ссылка: ссылка на"> локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет «хвоста»"> локальная ссылка: ссылка на" title="Создание веб-сайтов, 11 класс К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru Рисунок-гиперссылка 56 локальная ссылка: ссылка на">