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

§ 24. ВЕБ-САЙТЫ И ВЕБ-СТРАНИЦЫ

1
Создание веб-сайтов, 11 класс 2

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

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

HTML = Hypertext Markup Language
(язык разметки гипертекста)

! HTML – это не язык программирования!

запрос на 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.

image media
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

s
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.

sunset.jpg tree.jpg laugh.wav movie.flv

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru

Создание веб-сайтов, 11 класс 4

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

• статические – готовые файлы *.htm, *.html
 быстро загружаются
 почти не нагружают сервер
 невозможна работа с базами данных (в т.ч.
гостевые книги, комментарии, Веб 2.0)
• динамические – полностью или частично
создаются на сервере в момент запроса
*.php, *.asp, *.pl, *.cgi, *.shtml …
 работа с базами данных
 загружаются медленнее
 дополнительная нагрузка на сервер

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru

Создание веб-сайтов, 11 класс 5

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

CMS = Content Management System, система управления
содержимым сайта.
Функции:
• создание разделов сайта !
Не нужно знать HTML!
• создание страниц
• база данных пользователей
• управление доступом бесплатно!
• обеспечение навигации и поиска

Joomla! Drupal
1c-bitrix.ru ucoz.ru joomla.org drupal.org wordpress.org

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru

Создание веб-сайтов, 11 класс 6

Интерактивные страницы
DHTML = Dynamic HTML, динамический HTML.
Скрипт или сценарий (англ. script) – это программный
код для автоматизации действий пользователя.
Javascript
• замена текста, оформления, рисунков
• многоуровневые выпадающие меню
• скрытие и показ частей страницы
• проверка данных, введенные пользователем
• выполнение вычислений
• игры…

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru

Создание веб-сайтов
§ 25. ТЕКСТОВЫЕ ВЕБ-СТРАНИЦЫ

7
Создание веб-сайтов, 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

Создание веб-сайтов, 11 класс 9

Первая веб-страница
Тэг – команда языка HTML контейнер
(парный тэг)
<html> открывающий тэг

</html> закрывающий тэг

<html>
<head>
<head>
<title>Первая
<title>Первая страница</title>
страница</title>
</head>
</head>
<body>
<body>
Привет!
Привет!
</body>
</body>
</html>

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru

Создание веб-сайтов, 11 класс 10

Заголовки
заголовок
документа
заголовок
раздела

<h1> – заголовок документа

<h2> – заголовок раздела
<h3> – заголовок подраздела
<h4> – заголовок параграфа
<h1>Глава
<h1>Глава 1.
1. Информация</h1>
Информация</h1>
<h2>1.1 Что
Что такое информация?</h2>
информация?</h2>
Задачи, связанные с хранением, передачей и
обработкой информации человеку приходилось решать
во все времена...

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru

Создание веб-сайтов, 11 класс 11

Выравнивание заголовков
атрибут (свойство)

<h1 align="center">Глава 1. Информация</h1>

left,
center,
right

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru

Создание веб-сайтов, 11 класс 12

Абзацы (параграфы)
И вечный бой! Покой нам только снится
Сквозь кровь и пыль...
Летит, летит степная кобылица
И мнёт ковыль...

! Браузер «проглатывает» переходы на новую строку!

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru

Создание веб-сайтов, 11 класс 13

Абзацы (параграфы)
paragraph – абзац

<p>И вечный бой! Покой нам только снится</p>

<p>Сквозь кровь и пыль...</p>
<p>Летит, летит степная кобылица </p>
<p>И мнёт ковыль...</p>

интервал

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru

Создание веб-сайтов, 11 класс 14

Выравнивание абзацев
left, center, right, justify
<p align="justify">
Молекула воды испарилась из кипящего
чайника и, подлетая к потолку, лоб в
лоб столкнулась с неизвестно как
прокравшейся на кухню молекулой
водорода. Кто быстрей отлетел?
</p>

? Что плохо?

Решение:
align="left"

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru

Создание веб-сайтов, 11 класс 15

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

И вечный бой! Покой нам только снится
break – <br>Сквозь кровь и пыль...
разрыв
<br>Летит, летит степная кобылица
<br>И мнёт ковыль...

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru

Создание веб-сайтов, 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
Создание веб-сайтов, 11 класс 17

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

Неразрывный пробел (&nbsp;) не отрывать:
Дом сдали в 2011&nbsp;году. год

А.С.&nbsp;Пушкин инициалы

Пёс весил 12&nbsp;кг. единицы

измерения

Из дома вышел А.С.

Пушкин – солнце
русской поэзии.

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru

Создание веб-сайтов, 11 класс 18

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

Длинное тире (&mdash;)
Вышел А.С.&nbsp;Пушкин&nbsp;&mdash;
солнце русской поэзии.

не начинать Вышел А.С. Пушкин

строку с тире! – солнце русской
поэзии. ? Что плохо?
Короткое тире (&ndash;)
Дорога Васюки&ndash;Васютино строилась
в 2007&ndash;2013&nbsp;годах.

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru

Создание веб-сайтов, 11 класс 19

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

Угловые скобки (&lt; &gt;)
<p>Верно ли, что X < Y?</p>

? В чём проблема? X &lt; Y

это начало
тэга?

 К.Ю. Поляков, Е.А. Ерёмин, 2013 http://kpolyakov.spb.ru