Создание веб-сайтов

1. Создание веб-сайтов

§ 24. Веб-сайты и веб-страницы
К.Ю. Поляков, Е.А. Ерёмин, 2013
1
http://kpolyakov.spb.ru

2. Основные определения

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

3. Что такое веб-страница?

Создание веб-сайтов, 11 класс
3
Что такое веб-страница?
HTML = Hypertext Markup Language
(язык разметки гипертекста)
!
HTML – это не язык программирования!
запрос на
каждый файл!
image
s
sunset.jpg
tree.jpg
К.Ю. Поляков, Е.А. Ерёмин, 2013
index.html
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.
media
laugh.wav
movie.flv
http://kpolyakov.spb.ru

4. Какие бывают веб-страницы?

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

5. Системы управления сайтами

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

6. Интерактивные страницы

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

7. Создание веб-сайтов

§ 25. Текстовые веб-страницы
К.Ю. Поляков, Е.А. Ерёмин, 2013
7
http://kpolyakov.spb.ru

8. Как создать веб-страницу?

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

9. Первая веб-страница

Создание веб-сайтов, 11 класс
9
Первая веб-страница
Тэг – команда языка HTML
<html>
открывающий тэг
</html>
закрывающий тэг
контейнер
(парный тэг)
<html>
<head>
<title>Первая страница</title>
</head>
<body>
Привет!
</body>
</html>
К.Ю. Поляков, Е.А. Ерёмин, 2013
http://kpolyakov.spb.ru

10. Заголовки

Создание веб-сайтов, 11 класс
10
Заголовки
заголовок
документа
<h1>
<h2>
<h3>
<h4>
заголовок
раздела
– заголовок документа
– заголовок раздела
– заголовок подраздела
– заголовок параграфа
<h1>Глава 1. Информация</h1>
<h2>1.1 Что такое информация?</h2>
Задачи, связанные с хранением, передачей и
обработкой информации человеку приходилось решать
во все времена...
К.Ю. Поляков, Е.А. Ерёмин, 2013
http://kpolyakov.spb.ru

11. Выравнивание заголовков

Создание веб-сайтов, 11 класс
11
Выравнивание заголовков
атрибут (свойство)
<h1 align="center">Глава 1. Информация</h1>
left,
center,
right
К.Ю. Поляков, Е.А. Ерёмин, 2013
http://kpolyakov.spb.ru

12. Абзацы (параграфы)

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

13. Абзацы (параграфы)

Создание веб-сайтов, 11 класс
13
Абзацы (параграфы)
paragraph – абзац
<p>И вечный бой! Покой нам только снится</p>
<p>Сквозь кровь и пыль...</p>
<p>Летит, летит степная кобылица </p>
<p>И мнёт ковыль...</p>
интервал
К.Ю. Поляков, Е.А. Ерёмин, 2013
http://kpolyakov.spb.ru

14. Выравнивание абзацев

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

15. Переход на новую строку

Создание веб-сайтов, 11 класс
15
Переход на новую строку
break –
разрыв
И вечный бой! Покой нам только снится
<br>Сквозь кровь и пыль...
<br>Летит, летит степная кобылица
<br>И мнёт ковыль...
К.Ю. Поляков, Е.А. Ерёмин, 2013
http://kpolyakov.spb.ru

16. Специальные символы (HTML entities)

Создание веб-сайтов, 11 класс
16
Специальные символы (HTML entities)
Символ
HTML-код
&nbsp;
Название
неразрывный пробел
–
&ndash;
короткое тире
—
&mdash;
(длинное) тире
§
&sect;
«
&laquo;
левая русская кавычка
»
&raquo;
правая русская кавычка
<
&lt;
левая угловая скобка
>
&gt;
правая угловая скобка
©
&copy;
символ авторского права
®
&reg;
зарегистрированная торговая марка
°
&deg;
градус
²
&sup2;
квадрат
³
&sup3;
куб
×
&times;
÷
&divide;
К.Ю. Поляков, Е.А. Ерёмин, 2013
параграф
знак умножения
знак деления
http://kpolyakov.spb.ru

17. Применение специальных символов

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

18. Применение специальных символов

Создание веб-сайтов, 11 класс
18
Применение специальных символов
Длинное тире (&mdash;)
Вышел А.С.&nbsp;Пушкин&nbsp;&mdash;
солнце русской поэзии.
не начинать
строку с тире!
Вышел А.С. Пушкин
– солнце русской
Что плохо?
?
поэзии.
Короткое тире (&ndash;)
Дорога Васюки&ndash;Васютино строилась
в 2007&ndash;2013&nbsp;годах.
К.Ю. Поляков, Е.А. Ерёмин, 2013
http://kpolyakov.spb.ru

19. Применение специальных символов

Создание веб-сайтов, 11 класс
19
Применение специальных символов
Угловые скобки (&lt; &gt;)
<p>Верно ли, что X < Y?</p>
?
В чём проблема?
X &lt; Y
это начало
тэга?
К.Ю. Поляков, Е.А. Ерёмин, 2013
http://kpolyakov.spb.ru