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

Содержание

Создание веб-сайтов § 24. Веб-сайты и веб-страницы

Слайд 1Создание веб-сайтов
§ 24. Веб-сайты и веб-страницы
§ 25. Текстовые веб-страницы
§ 26. Оформление

документов
§ 27. Рисунки
§ 28. Мультимедиа
§ 29. Таблицы
§ 30. Блоки
§ 31. Динамический § 31. Динамический HTML
§ 32. XML § 32. XML и § 32. XML и XHTML
§ 33. Размещение веб-сайтов




Слайд 2Создание веб-сайтов
§ 24. Веб-сайты и веб-страницы

Слайд 3Основные определения
Гипертекст (англ. hypertext) – это текст, содержащий гиперссылки.
Гиперссылка (англ. hyper

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

Слайд 4Что такое веб-страница?

запрос на каждый файл!
HTML = Hypertext Markup Language (язык разметки

гипертекста)


Слайд 5Какие бывают веб-страницы?

статические – готовые файлы *.htm, *.html




динамические – полностью или

частично создаются на сервере в момент запроса *.php, *.asp, *.pl, *.cgi, *.shtml …

быстро загружаются
почти не нагружают сервер

невозможна работа с базами данных (в т.ч. гостевые книги, комментарии, Веб 2.0)

работа с базами данных

загружаются медленнее
дополнительная нагрузка на сервер

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

разделов сайта
создание страниц
база данных пользователей
управление доступом
обеспечение навигации и поиска

Слайд 7Интерактивные страницы
DHTML = Dynamic HTML, динамический HTML.
Скрипт или сценарий (англ. script)

– это программный код для автоматизации действий пользователя.

Javascript

замена текста, оформления, рисунков
многоуровневые выпадающие меню
скрытие и показ частей страницы
проверка данных, введенные пользователем
выполнение вычислений
игры…

Слайд 8Создание веб-сайтов
§ 25. Текстовые веб-страницы

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

Слайд 10Первая веб-страница



Тэг – команда языка HTML
открывающий тэг
закрывающий тэг






Первая страница



Привет!



Первая страница


Привет!

контейнер (парный тэг)



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

подраздела

– заголовок параграфа

Глава 1. Информация


1.1 Что такое информация?


Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена...

Слайд 12Выравнивание заголовков

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

Слайд 13Абзацы (параграфы)

И вечный бой! Покой нам только снится
Сквозь кровь и пыль...
Летит,

летит степная кобылица
И мнёт ковыль...

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

летит степная кобылица


И мнёт ковыль...


paragraph – абзац

интервал

Слайд 15Выравнивание абзацев

Молекула воды испарилась из кипящего чайника и, подлетая к

потолку, лоб в лоб столкнулась с неизвестно как
прокравшейся на кухню молекулой
водорода. Кто быстрей отлетел?


left, center, right, justify

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

Слайд 16Переход на новую строку
И вечный бой! Покой нам только снится

Сквозь кровь

и пыль...

Летит, летит степная кобылица

И мнёт ковыль...

break – разрыв

Слайд 17Специальные символы (HTML entities)

Слайд 18Применение специальных символов
Дом сдали в 2011 году.
А.С. Пушкин
Пёс весил 12 кг.
Неразрывный пробел ( )
год
инициалы
единицы

измерения

Из дома вышел А.С. Пушкин – солнце
русской поэзии.


не отрывать:

Слайд 19Применение специальных символов
Вышел А.С. Пушкин — солнце русской поэзии.
Длинное тире (—)
Вышел А.С.

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


не начинать строку с тире!

Короткое тире (–)

Дорога Васюки–Васютино строилась
в 2007–2013 годах.

Слайд 20Применение специальных символов
Угловые скобки (< >)
Верно ли, что X < Y?



X < Y

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

Слайд 21Маркированные списки

Вася
Петя
Коля

unordered list (неупорядоченный список)
list item (элемент списка)


изменение маркера:


    ...

disk ∙
circle ○
square ■

Слайд 22Нумерованные списки

Вася
Петя
Коля

ordered list (упорядоченный список)
изменение нумерации:

...

1,

i, I, a, A

Слайд 23Многоуровневые списки


Россия





Украина







Москва

  • Санкт-Петербург



    • Киев

    • Одесса


    Слайд 24Гиперссылки (локальные)

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

    в том же каталоге:

    во вложенном каталоге:


    Информация.

    в родительском каталоге:

    Информация.

    в соседнем каталоге:

    Информация.

    Слайд 25Гиперссылки (внешние)

    Информация.
    на URL:
    на главную страницу сайта:
    Информация.
    для скачивания архива:

    Скачать.
    для

    запуска почтовой программы:

    Напишите мне!

    Слайд 26Как записать гиперссылки от show.htm?

    Слайд 27Метки внутри документов

    Там в лесу живет
    медведь.
    ...
    ...
    ...

    Медведь
    Медведь — хищное млекопитающее

    семейства медвежьих.



    медведь

    на метку в другом файле:

    медведь

    Слайд 28Куда переход?
    ...
    ...
    ...
    ...
    ...
    ...
    ...

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

    Слайд 30оформление
    Содержание и оформление
    содержание (контент)
    Веб-страница:
    содержание
    оформление
    Сборник задач по физике
    Григорий Остер
    Задача 61 Петя ехал

    к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления.




    логическая разметка
    (*.html)

    физическая разметка
    (*.css)



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

    (citation):

    Карету мне, карету!

    Сокращение (abbreviation):

    НИИЧАВО

    Слайд 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;

    preformatted (уже отформатированный)



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

    (subscript):

    Вася2

    Вася2

    Слайд 34Стилевые файлы
    содержание
    оформление
    Рекурсия
    У попа была собака, он её любил,
    Она съела кусок мяса,

    он её убил,
    В землю закопал,
    Надпись написал:
    У попа была собака, он её любил,
    ...




    main.css

    mob.css

    printer.css

    CSS (Cascading Style Sheets) – каскадные таблицы стилей.

    Слайд 35Стилевые файлы
    body {
    color: white;
    background: #FF6600;
    }
    название тэга
    свойство
    селектор
    color – цвет

    символов
    background – цвет фона

    test.css

    значение

    R = FF16 = 255
    G = 6616 = 102
    B = 0

    Слайд 36Подключение стилевого файла


    Страница с файлом стилей



    Привет, Вася!



    qq.html
    test.css
    body {
    color:

    white;
    background: #0000E0;
    }



    таблица стилей

    Слайд 37Наследование стилей

    Привет, Вася!
    Петя, тебе тоже привет!

    body {
    color: white;
    background: #0000E0;
    }

    наследуется
    не

    наследуется
    (прозрачный фон)

    Слайд 38Стили для элементов: шрифты
    p {
    font-family: Arial,sans-serif;
    font-size: 20px;
    font-style: italic;

    font-weight: bold;
    }

    для всех абзацев

    семейство шрифтов

    serif – с засечками
    sans-serif – без засечек
    monospace – моноширинный

    размер в пикселях

    normal – обычный
    italic - курсив

    normal – обычный
    bold - жирный

    Слайд 39Стили: размеры, выравнивание
    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

    цвет фона

    абзацный отступ


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

    Слайд 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Стили гиперссылок

    a {
    color: green;
    text-decoration: none;
    }
    Все гиперссылки:
    a:visited {

    color: #0000AA; }

    Посещённые гиперссылки:

    a:hover {
    color: red;
    text-decoration: underline;
    }

    Гиперссылки при наведении мыши:

    убрать подчёркивание

    псевдокласс

    псевдокласс

    подчёркивание

    Слайд 43Классы
    Ошибка!
    Что-то с памятью.

    p.error {
    background:red;
    }
    для абзацев класса error
    p {

    background:blue;
    color:white;
    }





    каскад!

    Слайд 44Классы
    .error {
    background:red;
    color:white;
    }
    для всех элементов класса error

    Ошибка!
    Что-то с

    памятью.


    элемент в тексте

    Слайд 45Фоновый рисунок
    p.hallo {
    background: white url(images/grad.jpg);
    }

    Привет, Вася!

    p.hallo {
    background: url(grad.jpg)

    repeat-y;
    }





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

    href="mailto:qq@mail.ru">qq@mail.ru


    qq@mail.ru


    qq@mail.ru

    Слайд 47Составные селекторы
    code, pre {
    font-weight: bold;
    font-family: Courier New, monospace;
    }


    Общие свойства для нескольких тэгов:

    em a {
    font-style: normal;
    }

    Вложенные элементы:

    a внутри em

    Слайд 48Сложные селекторы
    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

    Слайд 49Создание веб-сайтов
    § 27. Рисунки

    Слайд 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Форматы рисунков
    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)"/>




    Слайд 52Рисунки в документе




    из

    той же папки:

    из другой папки:

    с другого сервера:

    image (изображение)

    source (источник)

    Слайд 53Выравнивание

    left
    right
    top
    bottom
    (по умолчанию)
    middle

    Слайд 54Отступы

    hspace="10" vspace="10">

    vspace
    (vertical space)

    hspace
    (horizontal space)



    Слайд 55Другие атрибуты


    height="600">

    надпись на месте рисунка, если его нет

    размеры позволяют:
    растянуть – сжать
    не портить дизайн, если рисунка нет


    всплывающая подсказка

    Слайд 56Рисунок-гиперссылка



    border="0">

    локальная ссылка:

    ссылка на другой сервер:

    иначе будет синяя рамка вокруг

    если не вплотную к , будет «хвост»


    не будет «хвоста»


    Слайд 57Вставка векторных рисунков

    align="left">

    тип нестандартных данных

    имя файла

    размеры

    выравнивание

    Слайд 58Фоновый рисунок
    body {
    background: url(grad.jpg);
    }


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

    нет…

    Слайд 59Фоновый рисунок
    body{ background: url(grad.jpg) no-repeat; }
    body{ background: url(grad.jpg) repeat-y; }
    если рисунок

    меньше, он повторяется

    не повторять

    повторять по вертикали

    Слайд 60Фоновый рисунок


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

    Слайд 62Вставка мультимедийных файлов

    имя файла
    автозапуск
    Звуковой файл:
    Флэш-анимация:

    width="275" height="200">

    имя файла

    размеры

    Слайд 63Вставка мультимедийных файлов


    адрес ролика
    Видео:
    размеры

    Слайд 64HTML5 – тэг audio

    height="350">

    имя файла

    показывать элементы управления

    размеры

    Слайд 65HTML5 – тэг video


    width="425" height="350">
    Ваш браузер не поддерживает элемент video.



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

    Слайд 67Простые таблицы

    . . .

    толщина рамки


    Вася
    Петров


    table row
    (строка)
    table

    data
    (ячейка с данными)

    Слайд 68Заголовки таблиц


    месяц


    январь


    февраль


    март


    table header
    (заголовок)
    жирный, по центру

    Слайд 69Объединение ячеек – столбцы


    месяц


    январь
    февраль
    март


    column span (охват

    столбцов)

    Слайд 70Объединение ячеек – строки


    Привет,
    Вася!


    Петя!


    Коля!


    row span (охват

    строк)

    Слайд 71Табличная вёрстка










    Самая большая страна
    Западной Европы.




    Франция
    Париж


    скрытая таблица!

    Слайд 72Вложенные таблицы

















    ВасяПетя
    МашаДаша




    122
    3334444

    Слайд 73Размеры

    ...

    ширина в пикселях или в % от ширины окна

    браузера

    высота в пикселях


    ...

    всей таблицы:

    строки:

    ячейки:


    ...

    ширина в пикселях или в % от ширины таблицы

    Слайд 74Размеры (через CSS)
    table.spec {
    width: 60%;
    height: 300;
    }
    table.spec tr {
    height:

    50px;
    }

    всей таблицы:

    строки:

    ячейки:

    table.spec td.qq {
    width: 25%;
    height: 50px;
    }


    ...


    Слайд 75Выравнивание


    по центру,

    по верхней границе
    width="200">по правой границе,
    по середине



    ...

    всей таблицы:

    информации в ячейках:

    left,
    center,
    right

    left,
    center,
    right

    top,
    middle,
    bottom

    Слайд 76Выравнивание (через 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

    Слайд 77Фон и цвет текста (через CSS)


    Привет!

    class="r">



    Таблица
    из двух строк
    и двух столбцов


    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");
    }

    цвет фона

    рисунок

    Слайд 78Отступы

    bgcolor = blue>

    1
    2


    интервал между ячейками

    отступ внутри ячеек

    cellspacing

    cellspacing

    cellpadding

    cellpadding

    Слайд 79Отступы (через CSS)


    1
    2




    border-spacing

    border-spacing

    padding

    padding

    table#qq {
    background: blue;
    border-collapse: separate;
    border-spacing: 10px;
    padding: 10px;
    }
    #qq tr {
    background: white;
    }

    кроме IE 6

    идентификатор – уникальное имя

    Слайд 80Создание веб-сайтов
    § 30. Блоки

    Слайд 81Что такое блок (div)?

    ...





    ...
    свойства блока:

    Слайд 82Рамка, поля и отступы


    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

    Слайд 83Стили для блоков

    Ответ: 45.

    идентификатор (уникальный!)
    .info {
    margin: 5px 5px

    10px 20px;
    padding: 3px;
    }
    #result {
    background: #CCCCFF;
    border: 1px solid blue;
    }



    Слайд 84«Плавающий» блок

    height="66">

    На природе



    .picture { float:left; margin: 5px; }
    .picture p {
    margin: 0;
    text-align: center;
    font-family: sans-serif;
    font-size: 80%;
    font-weight: bold;
    }

    Слайд 85Создание веб-сайтов
    § 31. Динамический HTML

    Слайд 86Что такое DHTML?
    Динамический HTML (DHTML) – это технология создания интерактивных сайтов,

    использующая HTML, CSS, язык программирования (чаще всего JavaScript) и объектную модель документа (англ. DOM = Document Object Model).




    DOM


    Привет,
    Вася!





    document

    html

    head

    title

    DOM

    body

    em

    Привет,

    p

    Вася!

    Слайд 87«Живой» рисунок
    box_closed.gif
    box_opened.gif


    this.src='box_opened.gif'
    свойство src этого объекта
    вложенные

    кавычки



    обработчик события (Javascript)


    Слайд 88Скрытый блок
    ЛКМ



    Детали — это гайка, шайба, болт, винт, шуруп,

    гвоздь и др.

    .hidden {
    display:none;
    }

    не показывать

    block – во всю ширину
    inline – в тексте


    Слайд 89Javascript-файл
    Файл test.js

    function show ( name )
    {
    var elem = document.getElementById(name);


    if ( elem )
    elem.style.display = "block";
    }


    найти элемент по id

    функция

    имя функции

    переменная

    если нашли

    изменить свойство display

    block – во всю ширину
    inline – в тексте
    none – не показывать

    Слайд 90Подключение Javascript-файла




    ...

    имя файла

    Слайд 91Вызов функции



    Показать детали

    ссылка на эту страницу
    дальнейшая

    обработка (переход по ссылке) не нужна

    по щелчку вызвать функцию

    Слайд 92HTML-файл



    Скрытый блок




    return false;">
    Показать детали








    Слайд 93Формы



    value="Готово"
    onClick="check();">

    форма – набор элементов диалога

    поле ввода

    кнопка

    текст на кнопке

    что делать при щелчке





    Слайд 94Формы


    value="Готово"
    onClick="check();">


    function check()
    {
    if ( calc.answer.value == "4" )
    alert("Правильно!");
    else alert("Неправильно!");
    }

    Обработка события «щелчок мышью»:

    В файл
    calc.js

    введённый текст

    Слайд 95Создание веб-сайтов
    § 32. XML и XHTML

    Слайд 96В чём проблема?
    Интеграция (объединение) информационных систем
    А
    В
    Б



    обмен данными
    Двоичные файлы:
    небольшой объём
    множество форматов, приёмник

    должен суметь прочитать файл

    Слайд 97В чём проблема?
    Задачи:
    универсальный формат
    текстовая форма
    понятен человеку при просмотре
    только содержание (без оформления)
    сохранение

    структуры (главы, разделы)
    автоматическая обработка

    HTML:

    содержит тэги физической разметки
    нельзя вводить новые тэги
    нестрогий синтаксис (можно не закрывать

    )

    Слайд 98Что такое XML?



    Intel Celeron

    2048

    Мб
    <винчестер фирма="Seagate">320 Гб

    <периферия>
    <монитор>Philips 190C1SB
    <клавиатура>Logitech Classic 200

    <мышь>Genius Navigator 600


    Слайд 99Что такое XML?
    XML = eXtensible Markup Language

    (расширяемый язык разметки)

    тэги-контейнеры в угловых скобках
    <тэг>...
    атрибуты тэгов (дополнительные данные)
    <тэг атрибут="значение">...
    можно вводить новые тэги
    нет никаких тэгов оформления, только данные
    в контейнер могут быть вложены другие контейнеры иерархия – дерево!

    Слайд 100документы Microsoft Office и OpenOffice.org:
    набор XML-файлов → zip-архив
    RSS (ленты новостей

    на сайтах и в блогах)
    MathML (описание математических формул)
    SVG (векторная графика на веб-страницах)
    файлы настроек (конфигурации) программ
    электронные книги .fb2
    XAML – язык описания интерфейсов в Windows 8

    Использование XML

    Слайд 101XML: «за» и «против»
    открытый текстовый формат
    не зависит от ОС и ПО
    строгие

    правила, стандарты ⇒ легко обрабатывать в программах
    удобен для многоуровневых списков и иерархических БД

    сложно описать структуры, отличающиеся от иерархии (графы)
    не различаются типы данных (число, текст, дата, время, логическое значение)
    большой объем файлов

    Слайд 102XHTML
    Задача: автоматическая обработка веб-страниц
    HTML:
    нестрогий синтаксис (можно не закрывать )
    не различаются заглавные

    и строчные буквы

    XHTML = eXtensible Hypertext Markup Language
    имена тегов и атрибутов – только строчные буквы
    все тэги должны быть закрыты (например,
    )
    правильная вложенность тэгов

    значения атрибутов в кавычках

    замена служебных символов:
    «<» → «<» «&» → «&»

    HTML


    XHTML


    Вася


    Пес Барбос



    Слайд 103Создание веб-сайтов
    § 33. Размещение веб-сайтов

    Слайд 104Как разместить сайт?
    На своём компьютере:
    постоянно включенный компьютер
    стабильный скоростной канал связи
    «белый» IP-адрес;
    установка

    и настройка веб-сервера
    защита сайта от взломщиков, вредоносных программ и сетевых атак – самостоятельно

    Слайд 105Что такое хостинг?
    Хостинг — услуга по размещению сайта (данных) на постоянно

    работающем сервере.

    Тарифный план ⇒ стоимость
    ограничение объема данных (файлов и почты)
    ограничение трафика
    ежедневно: 100 пользователей
    10 страниц по 100 Кбайт
    в месяц: ≈ 3 Гбайт
    поддержка баз данных (да/нет/количество)
    поддержка серверных скриптов (PHP)


    ≈100 Мбайт

    Бесплатные хостинги
    ucoz.ru
    webservis.ru
    www.hostinger.ru


    www.holm.ru
    www.hut.ru
    wallst.ru

    оплата – реклама

    Слайд 106Типы хостинга
    Виртуальный хостинг
    Виртуальный частный сервер
    Выделенный сервер
    до 1000 сайтов
    garage.ru
    toy.com
    vobla.net
    …
    копирование файлов в каталог
    ПО

    хостера

    garage.ru
    toy.com
    vobla.net


    виртуальная машина для каждого сайта
    ПО хозяина сайта

    vobla.net

    отдельный компьютер для сайта
    ПО хозяина сайта

    Слайд 107Доменные имена
    IP-адреса: 94.100.101.202
    Доменные имена: www.mail.ru
    nic.ru
    (RU-CENTER)
    Бесплатно (3-й уровень): vasya.ucoz.ru
    DNS-сервер


    Слайд 108Загрузка файлов на сайт
    создание страниц в конструкторе: *.ucoz.ru
    FTP
    локальный компьютер
    каталог на сайте
    пароль
    логин
    сайт
    FileZilla

    (filezillafilezilla-filezilla-projectfilezilla-project.filezilla-project.org)

    Слайд 109Конец фильма
    ПОЛЯКОВ Константин Юрьевич
    д.т.н., учитель информатики
    ГБОУ СОШ № 163, г. Санкт-Петербург
    kpolyakov@mail.ru

    ЕРЕМИН Евгений Александрович
    к.ф.-м.н., доцент кафедры мультимедийной дидактики и ИТО ПГГПУ, г. Пермь
    eremin@pspu.ac.ru

    Слайд 110Источники иллюстраций
    www.kkfreight.ru
    www.revelation-of-silence.com
    www.dejurka.ru
    www.foru.ru
    www.ibizsys.com
    ru.wikipedia.org
    иллюстрации художников издательства «Бином»
    авторские материалы

    Похожие презентации

    Законодательство РФ о ГО. Законодательные и нормативные правовые акты 279
    Современные представления о возникновении жизни на Земле 293
    Проект на тему Первопечатник Иван Фёдоров Цель проекта: расширить кругозор знаний о жизни И.Федорова, первых изданных книгах, печатного станка. 435
    Бионика, календарь 220
    Учись видеть прекрасное в человеке. 286
    Россия - Родина моя 274

    Обратная связь

    Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

    Email: Нажмите что бы посмотреть 

    Что такое ThePresentation.ru?

    Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

    Для правообладателей

    Яндекс.Метрика