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

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

Что такое веб-страница?
запрос на каждый файл!
HTML = Hypertext Markup Language
(язык разметки гипертекста)

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

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

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

Создание веб-сайтов
Текстовые веб-страницы

Как создать веб-страницу?
Любой текстовый редактор (Блокнот и т.п.)
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)

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

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

Выравнивание заголовков
Глава 1. Информация
left,
center,
right
атрибут (свойство)

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

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

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

Маркированные списки
Вася
Петя
Коля
unordered list
(неупорядоченный список)
list item
(элемент списка)
изменение маркера: type="disc">
...
disc ∙
circle ○
square ■

Нумерованные списки
Вася
Петя
Коля
ordered list
(упорядоченный список)
изменение нумерации:
...
1, i, I, a, A

Многоуровневые списки
Россия
Украина
Москва
Санкт-Петербург
Киев
Одесса

Гиперссылки (локальные)
Переход на
новую страницу
.
anchor
(якорь)
hyper reference (гиперссылка)
страница в том же каталоге:
во вложенном каталоге:
Информация
.
в родительском каталоге:
Информация
.
в соседнем каталоге:
Информация
.

Гиперссылки (внешние)
Информация
.
на URL:
на главную страницу сайта:
Информация
.
для скачивания архива:
Скачать
.
для запуска почтовой программы:
Напишите мне!

Создание веб-сайтов
Оформление документов

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

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

Оформление текстов программ
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 (уже отформатированный)

Тэги физической разметки HTML
Курсив (italic):
Вася
Вася
Жирный (bold):
Вася
Вася
Подчёркивание (underline):
Вася
Вася
Зачёркивание (strikeout):
Вася
Вася
Верхний индекс (superscript):
Вася
2
Вася2
Нижний индекс (subscript):
Вася
2
Вася2

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

Стилевые файлы
body {
color: white;
background: #FF6600;
}
название тэга
свойство
селектор
color – цвет символов
background – цвет фона
test.css
значение
R = FF16 = 255
G = 6616 = 102
B = 0

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

Наследование стилей
Привет, Вася!
Петя, тебе тоже привет!
body {
color: white;
background: #0000E0;
}
наследуется
не наследуется
(прозрачный фон)

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

Стили: размеры, выравнивание
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
100px
80%
20px
цвет фона
абзацный отступ

Рамка, поля, отступы
p {
background: #ccffcc;
border: 1px solid green;
margin: 0 40px 20px 40px;
padding: 5px;
}
рамка
отступы снаружи
отступы внутри
сверху, справа, снизу, слева
со всех сторон
толщина
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
40px
20px

Рамка, поля и отступы
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

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

Фоновый рисунок
p.hallo {
background: white url(images/grad.jpg);
}
Привет, Вася!
p.hallo {
background: url(grad.jpg) repeat-y;
}

Фоновый рисунок без повторения
p.email {
background: url(letter.gif) no-repeat;
padding-left: 20px;
}
[e-mail]
[e-mail]
[e-mail]

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

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

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

Форматы рисунков
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)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки

Форматы рисунков
SVG (Scalable Vector Graphics, масштабируемые векторные изображения)
x="0" y="10"
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(255,255,255)"/>
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(0,0,255)"/>
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(255,0,0)"/>

Рисунки в документе
из той же папки:
из другой папки:
с другого сервера:
image
(изображение)
source
(источник)

Выравнивание
left
right
top
bottom
(по умолчанию)
middle

Отступы
vspace
(vertical space)
hspace
(horizontal space)

Другие атрибуты
title="Ночь на Ладоге" width="800"
height="600">
надпись на месте рисунка, если его нет
размеры позволяют:
растянуть – сжать
не портить дизайн, если рисунка нет
всплывающая подсказка

Рисунок-гиперссылка
alt="Бесплатная почта" border="0">
локальная ссылка:
ссылка на другой сервер:
иначе будет синяя рамка вокруг
если не вплотную к
, будет «хвост»
не будет «хвоста»

Фоновый рисунок
body {
background: url(grad.jpg);
}
body {
background: url(grad.jpg) #EEE;
}
'images/grad.jpg'
'../images/grad.jpg‘
'http://www.vasya.ru/images/grad.jpg'
если рисунка нет…

Фоновый рисунок
body{ background: url(grad.jpg) no-repeat; }
body{ background: url(grad.jpg) repeat-y; }
если рисунок меньше, он повторяется
не повторять
повторять по вертикали

Фоновый рисунок

Создание веб-сайтов
Мультимедиа

Вставка мультимедийных файлов
autostart="false">
имя файла
автозапуск
Звуковой файл:
Флэш-анимация:
width="275" height="200">
имя файла
размеры

Вставка мультимедийных файлов
width="425" height="350">
адрес ролика
Видео:
размеры

HTML5 – тэг audio
src="nature.ogg"
autostart="false"
controls="controls"
width="425"
height="350">
имя файла
показывать элементы управления
размеры

HTML5 – тэг video
controls="controls"
autostart="false"
width="425" height="350">
Ваш браузер не поддерживает элемент video.
controls="controls">
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
controls="controls">
type='video/webm; codecs="vp8, vorbis"'>

Создание веб-сайтов
Таблицы

Простые таблицы
. . .
толщина рамки
Вася
Петров
table row
(строка)
table data
(ячейка с данными)

Заголовки таблиц
месяц
январь
февраль
март
table header
(заголовок)
жирный, по центру

Объединение ячеек – столбцы
месяц
январь
февраль
март
column span
(охват столбцов)

Объединение ячеек – строки
Привет,
Вася!
Петя!
Коля!
row span
(охват строк)

Табличная вёрстка
Самая большая страна
Западной Европы.
Франция
Париж
скрытая таблица!

Вложенные таблицы
Вася
Петя
Маша
Даша
1
22
333
4444

Размеры
...
ширина в пикселях или в % от ширины окна браузера
высота в пикселях
...
всей таблицы:
строки:
ячейки:
...
ширина в пикселях или в % от ширины таблицы

Размеры (через CSS)
table.spec {
width: 60%;
height: 300;
}
table.spec tr {
height: 50px;
}
всей таблицы:
строки:
ячейки:
table.spec td.qq {
width: 25%;
height: 50px;
}
...

Выравнивание
valign="top">
по центру,
по верхней границе
width="200">по правой границе,
по середине
...
всей таблицы:
информации в ячейках:
left,
center,
right
left,
center,
right
top,
middle,
bottom

Выравнивание (через CSS)
По центру,
по верхней границе
По правой
границе, по середине
table.ex tr.centop {
text-align: center;
vertical-align: top;
height:100px;
}
table.ex td.rmid {
text-align: right;
vertical-align: middle;
width:200px;
}
left,
center,
right
top,
middle,
bottom

Фон и цвет текста (через CSS)
Привет!
Таблица
из двух строк
и двух столбцов
table.qq td {
background: green;
}
table.qq tr.spec td {
background: blue;
color: white;
}
table.qq tr.spec td.r {
background: red;
}
table.qq td.pic {
background: url("web.jpg");
}
цвет фона
рисунок

Отступы
bgcolor = blue>
= white>
1
2
интервал между ячейками
отступ внутри ячеек
cellspacing
cellspacing
cellpadding
cellpadding = white>