Презентация "Создание веб-сайтов"

Подписи к слайдам:
  • Создание веб-сайтов
  • Веб-сайты и веб-страницы
  • <number>
  • Основные определения
  • <number>
  • Гипертекст (англ. hypertext) – это текст, содержащий гиперссылки.
  • Гиперссылка (англ. hyper reference) – это «активная» ссылка на другой объект (часть того же документа, другой документ, файл, каталог, программу и т.д.).
  • Веб-страница – это гипертекстовый документ в Интернете.
  • Веб-сайт – группа веб-страниц, которые объединены общей темой и оформлением, связаны гиперссылками.
  • Веб-сервер – это программа, которая принимает запросы по протоколу HTTP и отвечает на них – возвращает веб-страницы и дополнительные данные (рисунки, звуковые файлы, видеофайлы).
  • Браузер – это программа для просмотра веб-страниц на экране монитора.
  • Что такое веб-страница?
  • <number>
  • 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.jpg
  • tree.jpg
  • images
  • media
  • laugh.wav
  • movie.flv
  • запрос на каждый файл!
  • HTML = Hypertext Markup Language (язык разметки гипертекста)
  • HTML – это не язык программирования!
  • !
  • Какие бывают веб-страницы?
  • <number>
  • статические – готовые файлы *.htm, *.html
  • динамические – полностью или частично создаются на сервере в момент запроса *.php, *.asp, *.pl, *.cgi, *.shtml …
  • быстро загружаются
  • почти не нагружают сервер
  • невозможна работа с базами данных (в т.ч. гостевые книги, комментарии, Веб 2.0)
  • работа с базами данных
  • загружаются медленнее
  • дополнительная нагрузка на сервер
  • Системы управления сайтами
  • <number>
  • CMS = Content Management System, система управления содержимым сайта.
  • Функции:
  • создание разделов сайта
  • создание страниц
  • база данных пользователей
  • управление доступом
  • обеспечение навигации и поиска
  • Не нужно знать HTML!
  • !
  • 1c-bitrix.ru
  • Joomla!
  • joomla.org
  • Drupal
  • drupal.org
  • ucoz.ru
  • wordpress.org
  • бесплатно!
  • Интерактивные страницы
  • <number>
  • DHTML = Dynamic HTML, динамический HTML.
  • Скрипт или сценарий (англ. script) – это программный код для автоматизации действий пользователя.
  • Javascript
  • замена текста, оформления, рисунков
  • многоуровневые выпадающие меню
  • скрытие и показ частей страницы
  • проверка данных, введенные пользователем
  • выполнение вычислений
  • игры…
  • Создание веб-сайтов
  • Текстовые веб-страницы
  • <number>
  • Как создать веб-страницу?
  • <number>
  • Любой текстовый редактор (Блокнот и т.п.)
  • 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)
  • бесплатно!
  • бесплатно!
  • Первая веб-страница
  • <number>
  • <html>
  • </html>
  • Тэг – команда языка HTML
  • открывающий тэг
  • закрывающий тэг
  • <html>
  • <head>
  • <title>Первая страница</title>
  • </head>
  • <body>
  • Привет!
  • </body>
  • </html>
  • <head>
  • <title>Первая страница</title>
  • </head>
  • <body>
  • Привет!
  • </body>
  • контейнер (парный тэг)
  • Заголовки
  • <number>
  • заголовок документа
  • заголовок раздела
  • <h1> – заголовок документа
  • <h2> – заголовок раздела
  • <h3> – заголовок подраздела
  • <h4> – заголовок параграфа
  • <h1>Глава 1. Информация</h1>
  • <h2>1.1 Что такое информация?</h2>
  • Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена...
  • Выравнивание заголовков
  • <number>
  • <h1 align="center">Глава 1. Информация</h1>
  • left,
  • center,
  • right
  • атрибут (свойство)
  • Абзацы (параграфы)
  • <number>
  • И вечный бой! Покой нам только снится
  • Сквозь кровь и пыль...
  • Летит, летит степная кобылица
  • И мнёт ковыль...
  • Браузер «проглатывает» переходы на новую строку!
  • !
  • Абзацы (параграфы)
  • <number>
  • <p>И вечный бой! Покой нам только снится</p>
  • <p>Сквозь кровь и пыль...</p>
  • <p>Летит, летит степная кобылица </p>
  • <p>И мнёт ковыль...</p>
  • paragraph – абзац
  • интервал
  • Выравнивание абзацев
  • <number>
  • <p align="justify">
  • Молекула воды испарилась из кипящего чайника и, подлетая к потолку, лоб в лоб столкнулась с неизвестно как
  • прокравшейся на кухню молекулой
  • водорода. Кто быстрей отлетел?
  • </p>
  • left, center, right, justify
  • Что плохо?
  • ?
  • Решение:
  • align="left"
  • Переход на новую строку
  • <number>
  • И вечный бой! Покой нам только снится
  • <br>Сквозь кровь и пыль...
  • <br>Летит, летит степная кобылица
  • <br>И мнёт ковыль...
  • break – разрыв
  • Специальные символы (HTML entities)
  • <number>
  •  Символ 
  •  HTML-код 
  •  Название 
  •  
  • &nbsp;
  • неразрывный пробел  
  • &ndash;
  • короткое тире
  • &mdash;
  • (длинное) тире
  • §
  • &sect;
  • параграф
  • «
  • &laquo;
  • левая русская кавычка
  • »
  • &raquo;
  • правая русская кавычка
  • <
  • &lt;
  • левая угловая скобка
  • >
  • &gt;
  • правая угловая скобка
  • ©
  • &copy;
  • символ авторского права
  • ®
  • &reg;
  • зарегистрированная торговая марка 
  • °
  • &deg;
  • градус
  • ²
  • &sup2;
  • квадрат
  • ³
  • &sup3;
  • куб
  • ×
  • &times;
  • знак умножения
  • ÷
  • &divide;
  • знак деления
  • Применение специальных символов
  • <number>
  • Дом сдали в 2011&nbsp;году.
  • А.С.&nbsp;Пушкин
  • Пёс весил 12&nbsp;кг.
  • Неразрывный пробел (&nbsp;)
  • год
  • инициалы
  • единицы измерения
  • Из дома вышел А.С. Пушкин – солнце
  • русской поэзии.
  • не отрывать:
  • Применение специальных символов
  • <number>
  • Вышел А.С.&nbsp;Пушкин&nbsp;&mdash; солнце русской поэзии.
  • Длинное тире (&mdash;)
  • Вышел А.С. Пушкин – солнце русской поэзии.
  • не начинать строку с тире!
  • Короткое тире (&ndash;)
  • Дорога Васюки&ndash;Васютино строилась
  • в 2007&ndash;2013&nbsp;годах.
  • Что плохо?
  • ?
  • Применение специальных символов
  • <number>
  • Угловые скобки (&lt; &gt;)
  • <p>Верно ли, что X < Y?</p>
  • В чём проблема?
  • ?
  • X &lt; Y
  • это начало тэга?
  • Маркированные списки
  • <number>
  • <ul>
  • <li>Вася</li>
  • <li>Петя</li>
  • <li>Коля</li>
  • </ul>
  • unordered list (неупорядоченный список)
  • list item (элемент списка)
  • изменение маркера:
  • <ul type="disk">
  • ...
  • </ul>
  • disk 
  • circle ○
  • square ■
  • Нумерованные списки
  • <number>
  • <ol>
  • <li>Вася</li>
  • <li>Петя</li>
  • <li>Коля</li>
  • </ol>
  • ordered list (упорядоченный список)
  • изменение нумерации:
  • <ol type="i" start="4">
  • ...
  • </ol>
  • 1, i, I, a, A
  • Многоуровневые списки
  • <number>
  • <ol>
  • <li>Россия
  • </li>
  • <li>Украина
  • </li>
  • </ol>
  • <ul>
  • <li>Москва</li>
  • <li>Санкт-Петербург</li>
  • </ul>
  • <ul>
  • <li>Киев</li>
  • <li>Одесса</li>
  • </ul>
  • Гиперссылки (локальные)
  • <number>
  • Переход на
  • <a href="newpage.html">новую страницу</a>.
  • anchor
  • (якорь)
  • hyper reference (гиперссылка)
  • страница в том же каталоге:
  • во вложенном каталоге:
  • <a href="news/info.htm">Информация</a>.
  • в родительском каталоге:
  • <a href="../info.htm">Информация</a>.
  • в соседнем каталоге:
  • <a href="../news/info.htm">Информация</a>.
  • Гиперссылки (внешние)
  • <number>
  • <a href="http://example.net/news/info.htm">
  • Информация</a>.
  • на URL:
  • на главную страницу сайта:
  • <a href="http://example.net">Информация</a>.
  • для скачивания архива:
  • <a href="http://example.net/game.zip">
  • Скачать</a>.
  • для запуска почтовой программы:
  • <a href="mailto:vasya@mail.ru"> Напишите мне!</a>
  • Как записать гиперссылки от show.htm?
  • <number>
  • main
  • index.htm
  • goods.htm
  • goods
  • food
  • food.htm
  • show
  • show.htm
  • history
  • hist.htm
  • before
  • before.htm
  • Метки внутри документов
  • <number>
  • Там в лесу живет
  • <a href="#bear">медведь</a>.
  • ...
  • ...
  • ...
  • <a name="bear"></a>
  • <h2>Медведь</h2>
  • Медведь&nbsp;&mdash; хищное млекопитающее семейства медвежьих.
  • <a href="animals.htm#bear">медведь</a>
  • на метку в другом файле:
  • <a href="http://qq.net/a.htm#bear">медведь</a>
  • Куда переход?
  • <number>
    • <a href="example.html">...</a>
    • <a href="../example.html">...</a>
    • <a href="../../../example.html">...</a>
    • <a href="../new/old/example.html">...</a>
    • <a href="example.html#resume">...</a>
    • <a href="download/example.zip">...</a>
    • <a href="mailto:john@yahoo.com">...</a>
  • Создание веб-сайтов
  • § 26. Оформление документов
  • <number>
  • оформление
  • Содержание и оформление
  • <number>
  • содержание (контент)
  • Веб-страница:
  • содержание
  • оформление
  • <h1>Сборник задач по физике</h1>
  • <p class="author">Григорий Остер</p>
  • <h2>Задача 61</h2> Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления.
  • логическая разметка
  • (*.html)
  • физическая разметка
  • (*.css)
  • Логическая разметка (HTML)
  • <number>
  • Выделение (emphasize):
  • <em>Вася</em>
  • Сильное выделение (strong):
  • <strong>Вася</strong>
  • Программный код (code):
  • <code>a:=b+c;</code>
  • Определение (definition):
  • <dfn>Информация</dfn> &mdash; это...
  • Цитата (citation):
  • <cite>Карету мне, карету!</cite>
  • Сокращение (abbreviation):
  • <abbr>НИИЧАВО</abbr>
  • Оформление текстов программ
  • <number>
  • <pre>
  • iMin := 1;
  • for i:=2 to n do
  • if a[i] < a[iMin] then
  • iMin := i;
  • </pre>
  • iMin := 1;
  • for i:=2 to n do
  • if a[i] < a[iMin] then
  • iMin := i;
  • preformatted (уже отформатированный)
  • Тэги физической разметки HTML
  • <number>
  • Курсив (italic):
  • <i>Вася</i>
  • Вася
  • Жирный (bold):
  • <b>Вася</b>
  • Вася
  • Подчёркивание (underline):
  • <u>Вася</u>
  • Вася
  • Зачёркивание (strikeout):
  • <s>Вася</s>
  • Верхний индекс (superscript):
  • Вася<sup>2</sup>
  • Вася2
  • Нижний индекс (subscript):
  • Вася<sub>2</sub>
  • Вася2
  • Стилевые файлы
  • <number>
  • содержание
  • оформление
  • <h1>Рекурсия</h1>
  • У попа была собака, он её любил,
  • Она съела кусок мяса, он её убил,
  • В землю закопал,
  • Надпись написал:
  • У попа была собака, он её любил,
  • ...
  • main.css
  • mob.css
  • printer.css
  • CSS (Cascading Style Sheets) каскадные таблицы стилей.
  • Стилевые файлы
  • <number>
  • body {
  • color: white;
  • background: #FF6600;
  • }
  • название тэга
  • свойство
  • селектор
  • color – цвет символов
  • background – цвет фона
  • test.css
  • значение
  • R = FF16 = 255
  • G = 6616 = 102
  • B = 0
  • Подключение стилевого файла
  • <number>
  • <html>
  • <head>
  • <title>Страница с файлом стилей</title>
  • <link rel="stylesheet" href="test.css">
  • </head>
  • <body>
  • Привет, Вася!
  • </body>
  • </html>
  • qq.html
  • test.css
  • body {
  • color: white;
  • background: #0000E0;
  • }
  • таблица стилей
  • Наследование стилей
  • <number>
  • <body>
  • Привет, Вася!
  • <p>Петя, тебе тоже привет!</p>
  • </body>
  • body {
  • color: white;
  • background: #0000E0;
  • }
  • наследуется
  • не наследуется
  • (прозрачный фон)
  • Стили для элементов: шрифты
  • <number>
  • p {
  • font-family: Arial,sans-serif;
  • font-size: 20px;
  • font-style: italic;
  • font-weight: bold;
  • }
  • для всех абзацев
  • семейство шрифтов
  • serif – с засечками
  • sans-serif – без засечек
  • monospace – моноширинный
  • размер в пикселях
  • normal – обычный
  • italic - курсив
  • normal – обычный
  • bold - жирный
  • Стили: размеры, выравнивание
  • <number>
  • 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
  • цвет фона
  • абзацный отступ
  • Рамка, поля, отступы
  • <number>
  • 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
  • 5px
  • 20px
  • Рамка, поля и отступы
  • <number>
  • 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
  • Стили гиперссылок
  • <number>
  • a {
  • color: green;
  • text-decoration: none;
  • }
  • Все гиперссылки:
  • a:visited { color: #0000AA; }
  • Посещённые гиперссылки:
  • a:hover {
  • color: red;
  • text-decoration: underline;
  • }
  • Гиперссылки при наведении мыши:
  • убрать подчёркивание
  • псевдокласс
  • псевдокласс
  • подчёркивание
  • Классы
  • <number>
  • <p class="error">Ошибка!
  • Что-то с памятью.
  • </p>
  • p.error {
  • background:red;
  • }
  • для абзацев класса error
  • p {
  • background:blue;
  • color:white;
  • }
  • каскад!
  • Более конкретное указание отменяет более общее!
  • !
  • Классы
  • <number>
  • .error {
  • background:red;
  • color:white;
  • }
  • для всех элементов класса error
  • <p>
  • <span class="error">Ошибка!</span>
  • Что-то с памятью.
  • </p>
  • элемент в тексте
  • Фоновый рисунок
  • <number>
  • p.hallo {
  • background: white url(images/grad.jpg);
  • }
  • <p class="hallo">
  • Привет, Вася!
  • </p>
  • Привет, Вася!
  • p.hallo {
  • background: url(grad.jpg) repeat-y;
  • }
  • Привет, Вася!
  • Фоновый рисунок без повторения
  • <number>
  • p.email {
  • background: url(letter.gif) no-repeat;
  • padding-left: 20px;
  • }
  • <p class="email">
  • <a href="mailto:qq@mail.ru">qq@mail.ru</a>
  • </p>
  • qq@mail.ru
  • qq@mail.ru
  • 20px
  • Составные селекторы
  • <number>
  • code, pre {
  • font-weight: bold;
  • font-family: Courier New, monospace;
  • }
  • Общие свойства для нескольких тэгов:
  • em a {
  • font-style: normal;
  • }
  • Вложенные элементы:
  • a внутри em
  • Сложные селекторы
  • <number>
  • 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
  • Создание веб-сайтов
  • § 27. Рисунки
  • <number>
  • Форматы рисунков
  • <number>
  • 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)
    • прозрачность и полупрозрачность (альфа-канал)
    • нет анимации
    • плохо сжимает мелкие рисунки
  • Форматы рисунков
  • <number>
    • SVG (Scalable Vector Graphics, масштабируемые векторные изображения)
  • <svg>
  • <rect width="135" height="30"
  • x="0" y="10"
  • stroke-width="1" stroke="rgb(0,0,0)"
  • fill="rgb(255,255,255)"/>
  • <rect width="135" height="30" x="0" y="40"
  • stroke-width="1" stroke="rgb(0,0,0)"
  • fill="rgb(0,0,255)"/>
  • <rect width="135" height="30" x="0" y="70"
  • stroke-width="1" stroke="rgb(0,0,0)"
  • fill="rgb(255,0,0)"/>
  • </svg>
  • Рисунки в документе
  • <number>
  • <img src="night.jpg">
  • <img src="images/night.jpg">
  • <img src="../../images/night.jpg">
  • <img src="http://example.com/img/night.jpg">
  • из той же папки:
  • из другой папки:
  • с другого сервера:
  • image (изображение)
  • source (источник)
  • Выравнивание
  • <number>
  • <img src="flag.jpg" align="left">
  • left
  • right
  • top
  • bottom
  • (по умолчанию)
  • middle
  • Отступы
  • <number>
  • <img src="net.jpg" align="left">
  • <img src="net.jpg" align="left" hspace="10" vspace="10">
  • vspace
  • (vertical space)
  • hspace
  • (horizontal space)
  • Другие атрибуты
  • <number>
  • <img src="night.jpg" alt="Фото: Ладога"
  • title="Ночь на Ладоге" width="800"
  • height="600">
  • надпись на месте рисунка, если его нет
  • размеры позволяют:
  • растянуть – сжать
  • не портить дизайн, если рисунка нет
  • всплывающая подсказка
  • Рисунок-гиперссылка
  • <number>
  • <a href="http://www.mail.ru">
  • <img src="mailru.jpg"
  • alt="Бесплатная почта" border="0"></a>
  • <a href="gallery.htm">
  • <img src="night.jpg" border="0">
  • </a>
  • локальная ссылка:
  • ссылка на другой сервер:
  • иначе будет синяя рамка вокруг
  • если </a> не вплотную к <img …>, будет «хвост»
  • не будет «хвоста»
  • Вставка векторных рисунков
  • <number>
  • <object type="image/svg+xml"
  • data="test.svg"
  • width="48" height="48"
  • align="left">
  • </object>
  • тип нестандартных данных
  • имя файла
  • размеры
  • выравнивание
  • Фоновый рисунок
  • <number>
  • body {
  • background: url(grad.jpg);
  • }
  • body {
  • background: url(grad.jpg) #EEE;
  • }
  • 'images/grad.jpg'
  • '../images/grad.jpg‘
  • 'http://www.vasya.ru/images/grad.jpg'
  • если рисунка нет…
  • Фоновый рисунок
  • <number>
  • body{ background: url(grad.jpg) no-repeat; }
  • body{ background: url(grad.jpg) repeat-y; }
  • если рисунок меньше, он повторяется
  • не повторять
  • повторять по вертикали
  • Фоновый рисунок
  • <number>
  • Не должно быть «швов»!
  • !
  • Фон не должен мешать чтению!
  • !
  • Создание веб-сайтов
  • § 28. Мультимедиа
  • <number>
  • Вставка мультимедийных файлов
  • <number>
  • <embed src="myaw.wav"
  • autostart="false"></embed>
  • имя файла
  • автозапуск
  • Звуковой файл:
  • Флэш-анимация:
  • <embed src="cube.swf"
  • width="275" height="200">
  • </embed>
  • имя файла
  • размеры
  • Вставка мультимедийных файлов
  • <number>
  • <embed src="http://www.youtube.com/v/YvLNA5OW6xZ"
  • width="425" height="350">
  • </embed>
  • адрес ролика
  • Видео:
  • размеры
  • HTML5 – тэг audio
  • <number>
  • <audio
  • src="nature.ogg"
  • autostart="false"
  • controls="controls"
  • width="425"
  • height="350">
  • </audio>
  • имя файла
  • показывать элементы управления
  • размеры
  • HTML5 – тэг video
  • <number>
  • <video src="sail.ogv"
  • controls="controls"
  • autostart="false"
  • width="425" height="350">
  • Ваш браузер не поддерживает элемент video.
  • </video>
  • <video width="425" height="350"
  • controls="controls">
  • <source src="start.mp4"
  • type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  • </video>
  • <video width="425" height="350"
  • controls="controls">
  • <source src="finish.webm"
  • type='video/webm; codecs="vp8, vorbis"'>
  • </video>
  • Создание веб-сайтов
  • § 29. Таблицы
  • <number>
  • Простые таблицы
  • <number>
  • <table border="1">
  • . . .
  • </table>
  • толщина рамки
  • <table border="1">
  • <tr>
  • <td>Вася</td>
  • <td>Петров</td>
  • </tr>
  • </table>
  • table row
  • (строка)
  • table data
  • (ячейка с данными)
  • Заголовки таблиц
  • <number>
  • <table border="1">
  • <tr>
  • <th>месяц</th>
  • </tr>
  • <tr>
  • <td>январь</td>
  • </tr>
  • <tr>
  • <td>февраль</td>
  • </tr>
  • <tr>
  • <td>март</td>
  • </tr>
  • </table>
  • table header
  • (заголовок)
  • жирный, по центру
  • Объединение ячеек – столбцы
  • <number>
  • <table border="1">
  • <tr>
  • <th colspan="3">месяц</th>
  • </tr>
  • <tr>
  • <td>январь</td>
  • <td>февраль</td>
  • <td>март</td>
  • </tr>
  • </table>
  • column span (охват столбцов)
  • Объединение ячеек – строки
  • <number>
  • <table border="1">
  • <tr>
  • <th rowspan="3">Привет,</th>
  • <td>Вася!</td>
  • </tr>
  • <tr>
  • <td>Петя!</td>
  • </tr>
  • <tr>
  • <td>Коля!</td>
  • </tr>
  • </table>
  • row span (охват строк)
  • Табличная вёрстка
  • <number>
  • <table>
  • <tr>
  • <td>
  • </td>
  • <td>Самая большая страна
  • Западной Европы.</td>
  • </tr>
  • </table>
  • <table border="1">
  • <tr>
  • <th>Франция</th>
  • <td>Париж</td>
  • </tr>
  • </table>
  • скрытая таблица!
  • Вложенные таблицы
  • <number>
  • <table border="0" cellspacing=10>
  • <tr><td>
  • </td>
  • <td>
  • </td></tr>
  • </table>
  • <table border="1">
  • <tr><td>Вася</td><td>Петя</td></tr>
  • <tr><td>Маша</td><td>Даша</td></tr>
  • </table>
  • <table border="1">
  • <tr><td>1</td><td>22</td></tr>
  • <tr><td>333</td><td>4444</td></tr>
  • </table>
  • Размеры
  • <number>
  • <table width="60%" height="300">
  • ...
  • </table>
  • ширина в пикселях или в % от ширины окна браузера
  • высота в пикселях
  • <tr height="50">
  • ...
  • </tr>
  • всей таблицы:
  • строки:
  • ячейки:
  • <td width="25%" height="50">
  • ...
  • </td>
  • ширина в пикселях или в % от ширины таблицы
  • Размеры (через CSS)
  • <number>
  • table.spec {
  • width: 60%;
  • height: 300;
  • }
  • table.spec tr {
  • height: 50px;
  • }
  • всей таблицы:
  • строки:
  • ячейки:
  • table.spec td.qq {
  • width: 25%;
  • height: 50px;
  • }
  • <table class="spec">
  • ...
  • </table>
  • Выравнивание
  • <number>
  • <table border="1">
  • <tr align="center"
  • valign="top">
  • <td width="120">по центру,
  • по верхней границе</td>
  • <td align="right" valign="middle"
  • width="200">по правой границе,
  • по середине</td>
  • </tr>
  • </table>
  • <table align="center">
  • ...
  • </table>
  • всей таблицы:
  • информации в ячейках:
  • left,
  • center,
  • right
  • left,
  • center,
  • right
  • top,
  • middle,
  • bottom
  • Выравнивание (через CSS)
  • <number>
  • <table class="ex" border="1">
  • <tr class="centop">
  • <td>По центру,
  • по верхней границе</td>
  • <td class="rmid">По правой
  • границе, по середине</td>
  • </tr>
  • </table>
  • 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)
  • <number>
  • <table border="1" class="qq">
  • <tr class="spec">
  • <td>Привет!</td>
  • <td class="r"></td>
  • </tr>
  • <tr>
  • <td class="pic">
  • Таблица
  • из двух строк</td>
  • <td>и двух столбцов</td>
  • </tr>
  • </table>
  • 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");
  • }
  • цвет фона
  • рисунок
  • Отступы
  • <number>
  • <table cellspacing = "10" cellpadding = "10"
  • bgcolor = blue>
  • <tr bgcolor = white>
  • <td width = "100">1</td>
  • <td width = "100">2</td>
  • </tr>
  • </table>
  • интервал между ячейками
  • отступ внутри ячеек
  • cellspacing
  • cellspacing
  • cellpadding
  • cellpadding
  • <number>
  • Отступы (через CSS)
  • <table id="qq">
  • <tr>
  • <td> 1 </td>
  • <td> 2 </td>
  • </tr>
  • </table>
  • border-spacing
  • border-spacing
  • padding
  • padding
  • table#qq {
  • background: blue;
  • border-collapse: separate;
  • border-spacing: 10px;
  • padding: 10px;
  • }
  • #qq tr {
  • background: white;
  • }
  • кроме IE 6
  • идентификатор – уникальное имя
  • Создание веб-сайтов
  • § 30. Блоки
  • <number>
  • Что такое блок (div)?
  • <number>
  • <div>
  • ...
  • </div>
  • <p>
  • <table>
  • <a>
  • <img>
  • ...
  • свойства блока:
  • 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.
  • padding
  • border
  • margin
  • Рамка, поля и отступы
  • <number>
  • 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
  • Стили для блоков
  • <number>
  • <div class="info" id="result">
  • Ответ: 45.
  • </div>
  • идентификатор (уникальный!)
  • .info {
  • margin: 5px 5px 10px 20px;
  • padding: 3px;
  • }
  • #result {
  • background: #CCCCFF;
  • border: 1px solid blue;
  • }
  • «Плавающий» блок
  • <number>
  • <div class="picture">
  • <img src="dog.jpg"
  • width="100"
  • height="66">
  • <p>На природе</p>
  • </div>
  • .picture { float:left; margin: 5px; }
  • .picture p {
  • margin: 0;
  • text-align: center;
  • font-family: sans-serif;
  • font-size: 80%;
  • font-weight: bold;
  • }
  • div
  • Создание веб-сайтов
  • § 31. Динамический HTML
  • <number>
  • Что такое DHTML?
  • <number>
  • Динамический HTML (DHTML) – это технология создания интерактивных сайтов, использующая HTML, CSS, язык программирования (чаще всего JavaScript) и объектную модель документа (англ. DOM = Document Object Model).
  • <html>
  • <head>
  • <title>DOM</title>
  • </head>
  • <body>
  • <p>Привет,
  • <em>Вася!</em></p>
  • </body>
  • </html>
  • document
  • html
  • head
  • title
  • DOM
  • body
  • em
  • Привет,
  • p
  • Вася!
  • «Живой» рисунок
  • <number>
  • box_closed.gif
  • box_opened.gif
  • <img src="box_closed.gif"
  • onMouseOver="this.src='box_opened.gif'"
  • onMouseOut="this.src='box_closed.gif'">
  • this.src='box_opened.gif'
  • свойство src этого объекта
  • вложенные кавычки
  • обработчик события (Javascript)
  • Скрытый блок
  • <number>
  • ЛКМ
  • <div id="details" class="hidden">
  • Детали &#151; это гайка, шайба, болт, винт, шуруп, гвоздь и др.
  • </div>
  • .hidden {
  • display:none;
  • }
  • не показывать
  • Зачем нужен id?
  • ?
  • block – во всю ширину
  • inline – в тексте
  • Javascript-файл
  • <number>
  • Файл test.js
  • function show ( name )
  • {
  • var elem = document.getElementById(name);
  • if ( elem )
  • elem.style.display = "block";
  • }
  • найти элемент по id
  • функция
  • имя функции
  • переменная
  • если нашли
  • изменить свойство display
  • block – во всю ширину
  • inline – в тексте
  • none – не показывать
  • Подключение Javascript-файла
  • <number>
  • <head>
  • <script src="test.js"></script>
  • ...
  • </head>
  • имя файла
  • Вызов функции
  • <number>
  • <a href="#"
  • onClick="show('details');return false;">
  • Показать детали
  • </a>
  • ссылка на эту страницу
  • дальнейшая обработка (переход по ссылке) не нужна
  • по щелчку вызвать функцию
  • HTML-файл
  • <number>
  • <html>
  • <head>
  • <title>Скрытый блок</title>
  • <script src="test.js"></script>
  • <link rel="stylesheet" href="test.css">
  • </head>
  • <body>
  • <a href=# onClick="show('details'); return false;">
  • Показать детали</a>
  • </body>
  • </html>
  • <div id="details" class="hidden">
  • Детали &#151; это гайка, шайба, болт, винт,
  • шуруп, гвоздь и др.
  • </div>
  • Как сделать два скрытых блока?
  • ?
  • Формы
  • <number>
  • <form name="calc">
  • <input name="answer">
  • <input type="button"
  • value="Готово"
  • onClick="check();">
  • </form>
  • форма – набор элементов диалога
  • поле ввода
  • кнопка
  • текст на кнопке
  • что делать при щелчке
  • Формы
  • <number>
  • <form name="calc">
  • <input name="answer">
  • <input type="button"
  • value="Готово"
  • onClick="check();">
  • </form>
  • function check()
  • {
  • if ( calc.answer.value == "4" )
  • alert("Правильно!");
  • else alert("Неправильно!");
  • }
  • Обработка события «щелчок мышью»:
  • В файл
  • calc.js
  • введённый текст
  • Создание веб-сайтов
  • § 32. XML и XHTML
  • <number>
  • В чём проблема?
  • <number>
  • Интеграция (объединение) информационных систем
  • А
  • В
  • Б
  • обмен данными
  • В каком формате?
  • ?
  • Двоичные файлы:
  • небольшой объём
  • множество форматов, приёмник должен суметь прочитать файл
  • В чём проблема?
  • <number>
  • Задачи:
  • универсальный формат
  • текстовая форма
  • понятен человеку при просмотре
  • только содержание (без оформления)
  • сохранение структуры (главы, разделы)
  • автоматическая обработка
  • HTML:
  • содержит тэги физической разметки
  • нельзя вводить новые тэги
  • нестрогий синтаксис (можно не закрывать <p>)
  • Что такое XML?
  • <number>
  • <?xml version="1.0"?>
  • <компьютер>
  • <процессор частота="2 ГГц">Intel Celeron
  • </процессор>
  • <память фирма="Kingston">2048 Мб</память>
  • <винчестер фирма="Seagate">320 Гб
  • </винчестер>
  • <периферия>
  • <монитор>Philips 190C1SB</монитор>
  • <клавиатура>Logitech Classic 200
  • </клавиатура>
  • <мышь>Genius Navigator 600</мышь>
  • </периферия>
  • </компьютер>
  • Что такое XML?
  • <number>
  • XML = eXtensible Markup Language
  • (расширяемый язык разметки)
  • тэги-контейнеры в угловых скобках
  • <тэг>... </тэг>
  • атрибуты тэгов (дополнительные данные)
  • <тэг атрибут="значение">... </тэг>
  • можно вводить новые тэги
  • нет никаких тэгов оформления, только данные
  • в контейнер могут быть вложены другие контейнеры иерархия – дерево!
  • Это иерархическая база данных!
  • !
  • документы Microsoft Office и OpenOffice.org:
  • набор XML-файлов  zip-архив
  • RSS (ленты новостей на сайтах и в блогах)
  • MathML (описание математических формул)
  • SVG (векторная графика на веб-страницах)
  • файлы настроек (конфигурации) программ
  • электронные книги .fb2
  • XAML – язык описания интерфейсов в Windows 8
  • Использование XML
  • <number>
  • XML: «за» и «против»
  • <number>
  • открытый текстовый формат
  • не зависит от ОС и ПО
  • строгие правила, стандарты  легко обрабатывать в программах
  • удобен для многоуровневых списков и иерархических БД
  • сложно описать структуры, отличающиеся от иерархии (графы)
  • не различаются типы данных (число, текст, дата, время, логическое значение)
  • большой объем файлов
  • XHTML
  • <number>
  • Задача: автоматическая обработка веб-страниц
  • HTML:
  • нестрогий синтаксис (можно не закрывать <p>)
  • не различаются заглавные и строчные буквы
  • XHTML = eXtensible Hypertext Markup Language
  • имена тегов и атрибутов – только строчные буквы
  • все тэги должны быть закрыты (например, <br />)
  • правильная вложенность тэгов
  • значения атрибутов в кавычках
  • замена служебных символов:
  • «<»  «&lt;» «&»  «&amp;»
  • HTML
  • XHTML
  • <p><strong>Вася</p></strong>
  • <img src="dog.jpg" alt="Пес Барбос" />
  • Создание веб-сайтов
  • § 33. Размещение веб-сайтов
  • <number>
  • Как разместить сайт?
  • <number>
  • На своём компьютере:
  • постоянно включенный компьютер
  • стабильный скоростной канал связи
  • «белый» IP-адрес;
  • установка и настройка веб-сервера
  • защита сайта от взломщиков, вредоносных программ и сетевых атак – самостоятельно
  • Что такое хостинг?
  • <number>
  • Хостинг — услуга по размещению сайта (данных) на постоянно работающем сервере.
  • Тарифный план  стоимость
  • ограничение объема данных (файлов и почты)
  • ограничение трафика
  • ежедневно: 100 пользователей
  • 10 страниц по 100 Кбайт
  • в месяц:  3 Гбайт
  • поддержка баз данных (да/нет/количество)
  • поддержка серверных скриптов (PHP)
  • 100 Мбайт
  • оплата – реклама
  • Типы хостинга
  • <number>
  • Виртуальный хостинг
  • Виртуальный частный сервер
  • Выделенный сервер
  • до 1000 сайтов
  • garage.ru
  • toy.com
  • vobla.net
  • копирование файлов в каталог
  • ПО хостера
  • garage.ru
  • toy.com
  • vobla.net
  • виртуальная машина для каждого сайта
  • ПО хозяина сайта
  • vobla.net
  • отдельный компьютер для сайта
  • ПО хозяина сайта
  • Доменные имена
  • <number>
  • IP-адреса: 94.100.101.202
  • Доменные имена: www.mail.ru
  • Как зарегистрировать?
  • ?
  • nic.ru
  • (RU-CENTER)
  • Бесплатно (3-й уровень): vasya.ucoz.ru
  • DNS-сервер
  • Загрузка файлов на сайт
  • <number>
  • создание страниц в конструкторе: *.ucoz.ru
  • FTP
  • локальный компьютер
  • каталог на сайте
  • пароль
  • логин
  • сайт
  • FileZilla (filezilla-project.org)
  • Источники иллюстраций
  • <number>
  • www.kkfreight.ru
  • www.revelation-of-silence.com
  • www.dejurka.ru
  • www.foru.ru
  • www.ibizsys.com
  • ru.wikipedia.org
  • иллюстрации художников издательства «Бином»
  • авторские материалы