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

Содержание

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

Выполнить практическую работу №25 «Текстовые веб-страницы.» Практикум «Создание веб-сайтов»\practice11-4.doc

Слайд 22

Маркированные списки


  • Вася

  • Петя

  • Коля


unordered list (неупорядоченный список)

list item (элемент списка)

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


    ...

disk

∙
circle ○
square ■

Слайд 23

Нумерованные списки


  1. Вася

  2. Петя

  3. Коля


ordered list (упорядоченный список)

изменение нумерации:


    ...

1, i, I, a,

A

Слайд 24

Многоуровневые списки


  1. Россия

  2. Украина



  • Москва

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



  • Киев

  • Одесса


Слайд 25

Выполнить практическую работу №26 «Списки.» Практикум «Создание веб-сайтов»\practice11-4.doc

Слайд 26

Гиперссылки (локальные)

Переход на
новую страницу.

anchor
(якорь)

hyper reference (гиперссылка)

страница в том

же каталоге:

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

Информация.

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

Информация.

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

Информация.

Слайд 27

Гиперссылки (внешние)


Информация.

на URL:

на главную страницу сайта:

Информация.

для скачивания архива:


Скачать.

для запуска почтовой

программы:

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

Слайд 28

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

Слайд 29

Метки внутри документов

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

Медведь


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

href="animals.htm#bear">медведь

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

медведь

Слайд 30

Куда переход?

...
...
...
...
...
...
...

Слайд 31

Выполнить практическую работу №27 «Гиперссылки.» Практикум «Создание веб-сайтов»\practice11-4.doc

Слайд 32

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

§ 26. Оформление документов

Слайд 33

оформление

Содержание и оформление

содержание (контент)

Веб-страница:

содержание

оформление

Сборник задач по физике


Григорий Остер


Задача 61

Петя ехал к бабушке

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

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

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

Слайд 34

Логическая разметка (HTML)

Выделение (emphasize):

Вася

Сильное выделение (strong):

Вася

Программный код (code):

a:=b+c;

Определение (definition):

Информация — это...

Цитата (citation):

Карету мне,

карету!

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

НИИЧАВО

Слайд 35

Оформление текстов программ


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

Слайд 36

Тэги физической разметки HTML

Курсив (italic):

Вася

Вася

Жирный (bold):

Вася

Вася

Подчёркивание (underline):

Вася

Вася

Зачёркивание (strikeout):

Вася

Вася

Верхний индекс (superscript):

Вася2

Вася2

Нижний индекс (subscript):

Вася2

Вася2

Слайд 37

Выполнить практическую работу №28a «Оформление текста» Практикум «Создание веб-сайтов»\practice11-4.doc

Слайд 38

Стилевые файлы

содержание

оформление

Рекурсия


У попа была собака, он её любил,
Она съела кусок мяса, он её

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

main.css

mob.css

printer.css

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

Слайд 39

Стилевые файлы

body {
color: white;
background: #FF6600;
}

название тэга

свойство

селектор

color – цвет символов
background –

цвет фона

test.css

значение

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

Слайд 40

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



Страница с файлом стилей
href="test.css">


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


qq.html

test.css

body {
color: white;

background: #0000E0;
}

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

тип данных MIME

Multipurpose Internet Mail Extension

Слайд 41

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


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

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



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

наследуется

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

Слайд 42

Стили для элементов: шрифты

p {
font-family: Arial,sans-serif;
font-size: 20px;
font-style: italic;
font-weight: bold;
}

для

всех абзацев

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

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

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

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

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

Слайд 43

Стили: размеры, выравнивание

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

цвет фона

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

Слайд 44

Рамка, поля, отступы

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

Слайд 45

Рамка, поля и отступы

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

Слайд 46

Стили гиперссылок

a {
color: green;
text-decoration: none;
}

Все гиперссылки:

a:visited { color: #0000AA;

}

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

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

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

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

псевдокласс

псевдокласс

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

Слайд 47

Классы

Ошибка!
Что-то с памятью.


p.error {
background:red;
}

для абзацев класса error

p {
background:blue;
color:white;
}

каскад!

Слайд 48

Классы

.error {
background:red;
color:white;
}

для всех элементов класса error

Ошибка!
Что-то с памятью.


элемент в

тексте

Слайд 49

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

p.hallo {
background: white url(images/grad.jpg);
}


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


p.hallo {
background: url(grad.jpg) repeat-y;
}

Слайд 50

Фоновый рисунок без повторения

p.email {
background: url(letter.gif) no-repeat;
padding-left: 20px;
}


qq@mail.ru

qq@mail.ru

Слайд 51

Составные селекторы

code, pre {
font-weight: bold;
font-family: Courier New, monospace;
}

Общие свойства

для нескольких тэгов:

em a {
font-style: normal;
}

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

a внутри em

Слайд 52

Сложные селекторы

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

Слайд 53

Выполнить практическую работу №28, 28-2 «Использование СSS. Часть 1,2» Практикум «Создание веб-сайтов»\practice11-4.doc

Слайд 54

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

§ 27. Рисунки

Слайд 55

Форматы рисунков

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

Слайд 56

Форматы рисунков

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)"/>

Слайд 57

Рисунки в документе





из той же

папки:

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

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

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

source (источник)

Слайд 58

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


left

right

top

bottom
(по умолчанию)

middle

Слайд 59

Отступы



vspace
(vertical space)

hspace
(horizontal space)

Слайд 60

Другие атрибуты

Ночь на Ладоге height="600">

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

если его нет
всплывающая подсказка

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

Слайд 61

Рисунок-гиперссылка


alt="Бесплатная почта" border="0">




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

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

сервер:

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

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

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

Слайд 62

Вставка векторных рисунков

data="test.svg"
width="48" height="48"
align="left">

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

имя файла

размеры

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

Слайд 63

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

body {
background: url(grad.jpg);
}

body {
background: url(grad.jpg) #EEE;
}

'images/grad.jpg'
'../images/grad.jpg‘
'http://www.vasya.ru/images/grad.jpg'

если рисунка нет…

Слайд 64

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

body{ background: url(grad.jpg) no-repeat; }

body{ background: url(grad.jpg) repeat-y; }

если рисунок меньше, он

повторяется

не повторять

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

Слайд 65

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

Слайд 66

Выполнить практическую работу №29 «Вставка рисунков в документ» Практикум «Создание веб-сайтов»\practice11-4.doc

Слайд 67

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

§ 28. Мультимедиа

Слайд 68

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

autostart="false">

имя файла

автозапуск

Звуковой файл:

Флэш-анимация:

width="275" height="200">

имя файла

размеры

Слайд 69

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

width="425" height="350">

адрес ролика

Видео:

размеры

Слайд 70

HTML5 – тэг audio


имя файла

показывать элементы

управления

размеры

Слайд 71

HTML5 – тэг video

не поддерживает элемент video.



Слайд 72

Выполнить практическую работу №30 «Вставка звука и видео в документ» Практикум «Создание веб-сайтов»\practice11-4.doc

Слайд 73

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

§ 29. Таблицы

Слайд 74

Простые таблицы


. . .

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






Вася Петров

table row
(строка)

table data
(ячейка

с данными)

Слайд 75

Заголовки таблиц














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

table header
(заголовок)

жирный, по центру

Слайд 76

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










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

column span (охват столбцов)

Слайд 77

Объединение ячеек – строки












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

row span (охват строк)

Слайд 78

Табличная вёрстка







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






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

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

Слайд 79

Вложенные таблицы










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




122
3334444

Слайд 80

Размеры


...

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

высота в

пикселях


...

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

строки:

ячейки:


...

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

Слайд 81

Размеры (через CSS)

table.spec {
width: 60%;
height: 300;
}

table.spec tr {
height: 50px;
}

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

строки:

ячейки:

table.spec

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


...

Слайд 82

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


valign="top">

align="right" valign="middle"
width="200">по правой границе,
по середине

по центру,
по верхней границе


...

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

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

left,
center,
right

left,
center,
right

top,
middle,
bottom

Слайд 83

Выравнивание (через CSS)




class="rmid">По правой
границе, по середине

По центру,
по верхней границе

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

Слайд 84

Фон и цвет текста (через CSS)







class="pic">
Таблица
из двух строк


Привет!
и двух столбцов

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

цвет фона

рисунок

Слайд 85

Отступы

bgcolor = blue>
white>



1 2

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

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

cellspacing

cellspacing

cellpadding

cellpadding

Слайд 86

Отступы (через 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

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

Слайд 87

Выполнить практическую работу №31 «Табличная вёрстка» Практикум «Создание веб-сайтов»\practice11-4.doc

Слайд 88

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

§ 30. Блоки

Слайд 89

Что такое блок (div)?


...




...

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

Слайд 90

Рамка, поля и отступы

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

Слайд 91

Стили для блоков


Ответ: 45.

идентификатор (уникальный!)

.info {
margin: 5px 5px 10px 20px;

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

Слайд 92

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


width="100"
height="66">

На природе



.picture { float:left;

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

Слайд 93

Выполнить практическую работу №32 «Блочная вёрстка» Практикум «Создание веб-сайтов»\practice11-4.doc

Слайд 94

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

§ 31. Динамический HTML

Слайд 95

Что такое DHTML?

Динамический HTML (DHTML) – это технология создания интерактивных сайтов, использующая HTML,

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



DOM


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




document

html

head

title

DOM

body

em

Привет,

p

Вася!

Слайд 96

«Живой» рисунок

box_closed.gif

box_opened.gif

onMouseOver="this.src='box_opened.gif'"
onMouseOut="this.src='box_closed.gif'">

this.src='box_opened.gif'

свойство src этого объекта

вложенные кавычки

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

Слайд 97

Скрытый блок

ЛКМ

др.

.hidden {
display:none;
}

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

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

Слайд 98

Javascript-файл

Файл test.js

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

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

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

функция

имя функции

переменная

если нашли

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

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

Слайд 99

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



...

тип файла

имя файла

Слайд 100

Вызов функции

onClick="show('details');return false;">
Показать детали

ссылка на эту страницу

дальнейшая обработка (переход по

ссылке) не нужна

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

Слайд 101

HTML-файл



Скрытый блок




onClick="show('details'); return false;">
Показать детали



Слайд 102

Формы



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

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

диалога

поле ввода

кнопка

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

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

Слайд 103

Формы



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

function check()
{
if ( calc.answer.value

== "4" )
alert("Правильно!");
else alert("Неправильно!");
}

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

В файл
calc.js

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

Слайд 104

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

§ 32. XML и XHTML

Слайд 105

В чём проблема?

Интеграция (объединение) информационных систем

А

В

Б

обмен данными

Двоичные файлы:

небольшой объём

множество форматов, приёмник должен суметь

прочитать файл

Слайд 106

В чём проблема?

Задачи:

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

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

HTML:

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

)

Слайд 107

Что такое XML?


<компьютер>
<процессор частота="2 ГГц">Intel Celeron

<память фирма="Kingston">2048 Мб
<винчестер

фирма="Seagate">320 Гб

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

<мышь>Genius Navigator 600


Слайд 108

Что такое XML?

XML = eXtensible Markup Language
(расширяемый язык разметки)

тэги-контейнеры в угловых

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

Слайд 109

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

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

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

Слайд 110

XML: «за» и «против»

открытый текстовый формат
не зависит от ОС и ПО
строгие правила, стандарты

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

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

Слайд 111

XHTML

Задача: автоматическая обработка веб-страниц

HTML:

нестрогий синтаксис (можно не закрывать

)
не различаются заглавные и строчные

буквы

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

HTML

XHTML

Вася


Пес Барбос

Слайд 112

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

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

Слайд 113

Как разместить сайт?

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

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

Слайд 114

Что такое хостинг?

Хостинг — услуга по размещению сайта (данных) на постоянно работающем сервере.

Тарифный

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

≈100 Мбайт

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

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

Слайд 115

Типы хостинга

Виртуальный хостинг

Виртуальный частный сервер

Выделенный сервер

до 1000 сайтов

garage.ru
toy.com
vobla.net
…

копирование файлов в каталог
ПО хостера

garage.ru
toy.com
vobla.net

виртуальная машина

для каждого сайта
ПО хозяина сайта

vobla.net

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

Слайд 116

Доменные имена

IP-адреса: 94.100.101.202

Доменные имена: www.mail.ru

nic.ru
(RU-CENTER)

Бесплатно (3-й уровень): vasya.ucoz.ru

DNS-сервер

Слайд 117

Загрузка файлов на сайт

создание страниц в конструкторе: *.ucoz.ru
FTP

локальный компьютер

каталог на сайте

пароль

логин

сайт

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

Имя файла: Создание-веб-сайтов.pptx
Количество просмотров: 220
Количество скачиваний: 0
- Предыдущая
Франция в XVIII веке. Причины и начало Великой французской революции
Следующая -
Суспільно-політичне значення перекладу. Фах перекладача/тлумача

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

Циклы в языке Си. (Лекция 4)
Стандарт кодирования видео и звуковой информации MPEG-4
Лига безопасного интернета и Кибердружина
Краткое введение в NGN для NSS
Методы моделирования бизнес-процессов
Презентация Марийская литература
Технические и программные средства телекоммуникационных технологий
История развития компьютеров
Перші кроки до електронного декларування. Отримання електронних цифрових підписів
Introduction to C++
Repository and Unit of Work
Системное программное обеспечение
JavaScript. Функции
Определение скорости передачи. 10 класс
Системы управления проектами и предприятием
Минимизация логических функций
Minecraft. Координаты и условия. Запускаем Python. Занятие 2
Использование мобильного приложения Наблюдатель Единой России и передача сведений с участковых избирательных комиссий
Задача о пути торможения автомобиля
Brining Governance to the clouds. Module 3. Policy. Stages of Policy Making
NAVY. Проблемы в создании рекламных роликов
Программное обеспечение ПК
Побудова бібліотек для Python у мові програмування C
Информационные системы и технологии
Автоматизация бизнес-процессов
Создание плана-проекта по разработке, внедрению и сопровождению сайта компании по продаже мужской одежды
Базовые понятия информатики
Информатика. Лекции – С++
Обратная связь
Email: Нажмите что бы посмотреть