Методы и средства создания и сопровождения сайта

Содержание

1. Методы и средства создания и сопровождения сайта
2. WWW (World Wide Web) – служба для
3. Основные определенияГиперссылка (англ. hyper reference) – это
4. Веб-браузеры Internet Explorer Firefox (www.mozilla-russia.org) Chrome (www.google.com/chrome)
5. Веб-сервер – это программа, которая обеспечивает работу
6. Протокол передачи гипертекстаПротокол передачи гипертекстовой информации HyperText
7. запрос на каждый файл!HTML = Hypertext Markup Language (язык разметки гипертекста)
8. Веб-страницы бываютстатические – готовые файлы *.htm, *.htmlдинамические
9. Системы управления сайтамиCMS = Content Management System, система
10. Интерактивные страницыDHTML = Dynamic HTML, динамический HTML. Скрипт
11. Как создать веб-страницу?Любой текстовый редактор (Блокнот и
12. Язык гипертекстовой разметки HTMLHyperText Markup Language (HTML)
13. Первая веб-страницаТэг – команда языка HTMLоткрывающий тэгзакрывающий
14. Моя первая Web-страничка
15. Слайд 15
16. Спецификация языка HTML позволяет опускать кавычки для
17. Комментарий открывается символьной последовательностью, начинающейся с открывающейся угловой скобки, восклицательного знака и двух тире:
18. Методы описания цвета элементов: посредством задания специальных
19. Цветовая палитра HTML состоит из сочетаний оттенков красного,
20. Фон документа
21. Тэг BODY – общие свойства страницыцвет фона и текстаПривет!цвет текста цвет фона атрибуты тэга
22. Теги для форматирования текста
23. Теги для форматирования текста
24. Тэги физической разметки HTMLКурсив (italic):ВасяВасяЖирный (bold):ВасяВасяПодчёркивание (underline):ВасяВасяЗачёркивание (strikeout):ВасяВасяВерхний индекс (superscript):Вася2Вася2Нижний индекс (subscript):Вася2Вася2
25. Тэг FONT – свойства блока текстацвет текстаразмер шрифтаПривет!Как дела?Привет!Как дела?от 1 до 7(3 – нормальный)
26. Линия-разделительhorizontal rule ширина в пикселях или процентахтолщинавыравнивание
27. Наиболее распространенныеEscape-последовательности
28. Специальные символы
29. Фраза Он сказал: «Поехали!» в тексте веб-страницы будет выглядеть, например, так:Он сказал: «Поехали!»
30. Заголовки: H1 … H6Заголовок документаЗаголовок разделаЗаголовок подразделаЗаголовок параграфаКомментарийАвторские пометкивыравнивание:Историяleft, center, right
31. Абзацыпереход на новую строкуабзац (с отступами)И вечный
32. ВыравниваниеЭтот текст выровнен по центру.Этот текст выровнен
33. Маркированные спискиВася ПетяКоляunordered list (неупорядоченный
34. Нумерованные спискиВася ПетяКоляordered list (упорядоченный список) изменение нумерации:...1, i, I, a, A
35. Списки определенийкомпьютер устройство для обработки
36. Многоуровневые списки Города России Города Украины Москва Санкт-Петерург Киев Одесса
37. Ссылки на другие страницы сайтаТаблицыстраница в той
38. Ссылки на другие сайтыПочтана главную страницу сайтаindex.htm,
39. Запуск почтовой программыНапишите мне!
40. Ссылки внутри страницыГлава 1Глава 2Глава 1Это текст
41. Цвет гиперссылок...LINK ссылки, на которых не былиVLINK посещенные ссылкиALINK активные ссылки
42. Форматы рисунковGIF (Graphic Interchange Format)сжатие без потерьпрозрачные
43. Рисунки в документе из той же папки:из другой папки:с другого сервера:image (изображение) source (источник)
44. Выравнивание leftrighttopbottom(по умолчанию)middle
45. Отступы VSPACE(vertical space)HSPACE(horizontal space)
46. Другие атрибуты всплывающая подсказканадпись на месте рисунка,
47. Рисунок-гиперссылкалокальная ссылка:ссылка на другой сервер:иначе будет синяя
48. Простейшая таблица Таблица из одной строки
49. Размеры...ширина в пикселях или в % от
50. ФреймыФрейм (frame) – это часть сложной Web-страницы,
51. Описание структурыindex.html Фреймы-столбцы
52. Граница между фреймами......граница между фреймами:0 – невидима,
53. Настройка фрейма (FRAME)убрать отступы от края фрейма
54. Фреймы-строкиindex.html Фреймы-строки строкиширина в пикселях или %
55. Сложные структуры (3 фрейма)index.html
56. Как открыть ссылку в другом фреймеГлава 2TARGET
57. Блоки (DIV) – любое содержимое Lorem ipsum
58. Блоки (DIV) – рамки и отступыLorem ipsum
59. «Плавающие» блоки.picture { float: left;
60. Скачать презентанцию

WWW (World Wide Web) – служба для обмена информацией в виде гипертекста.Гипертекст – текст, содержащий активные ссылки (гиперссылки) на другие документы.Гипермедиа – документ, который включает текст, рисунки, звуки, видео, причём каждый

Главная
Разное
Методы и средства создания и сопровождения сайта

Слайды и текст этой презентации

Слайд 1Методы и средства создания и сопровождения сайта

Слайд 2WWW (World Wide Web) – служба для обмена информацией в

виде гипертекста.

Гипертекст – текст, содержащий активные ссылки (гиперссылки) на другие

документы.
Гипермедиа – документ, который включает текст, рисунки, звуки, видео, причём каждый элемент может быть гиперссылкой.

Основные определения

WWW (World Wide Web) – служба для обмена информацией в виде гипертекста.Гипертекст – текст, содержащий активные ссылки

Слайд 3Основные определения
Гиперссылка (англ. hyper reference) – это «активная» ссылка на

другой объект (часть того же документа, другой документ, файл, каталог,

программу и т.д.).

Веб-страница – это гипертекстовый документ в Интернете.

Веб-сайт (ресурс, узел) — web-site — это пространство/место в сети Интернет, которое определяется адресом (URL), имеет владельца и состоит из веб-страниц, объединенных общей темой, дизайном и связанных между собой ссылками.

Основные определенияГиперссылка (англ. hyper reference) – это «активная» ссылка на другой объект (часть того же документа, другой

Слайд 4Веб-браузеры
Internet Explorer
Firefox (www.mozilla-russia.org)
Chrome (www.google.com/chrome)
Safari (www.apple.com/safari)
Opera

(www.opera.com)
бесплатно!
Браузер – это программа для просмотра веб-страниц на экране.

Веб-браузеры Internet Explorer Firefox (www.mozilla-russia.org) Chrome (www.google.com/chrome) Safari (www.apple.com/safari) Opera (www.opera.com)бесплатно!Браузер – это программа для просмотра веб-страниц

Слайд 5Веб-сервер – это программа, которая обеспечивает работу сайтов: приём запросов

и выдачу ответов по протоколу HTTP или HTTPS.
Веб-сёрфинг — переход

со страницы на страницу с
помощью ссылок.

Веб-сервер – это программа, которая обеспечивает работу сайтов: приём запросов и выдачу ответов по протоколу HTTP или

Слайд 6Протокол передачи гипертекста
Протокол передачи гипертекстовой информации
HyperText Transfer Protocol (HTTP)

Протокол передачи гипертекста - базирующийся на TCP/IP, обеспечивает доступ к

документам на веб-узлах.

Основная задача протокола состоит в установлении связи с веб-сервером и обеспечении доставки HTML-страниц веб-браузеру клиента.

HTTPS = HyperText Transfer Protocol Secure – предусматривает шифрование

Протокол передачи гипертекстаПротокол передачи гипертекстовой информации HyperText Transfer Protocol (HTTP) Протокол передачи гипертекста - базирующийся на TCP/IP,

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

Слайд 8Веб-страницы бывают
статические – готовые файлы .htm, .html

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

частично создаются на сервере в момент запроса

*.php, *.asp, *.pl, *.cgi, *.shtml …

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

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

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

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

Веб-страницы бываютстатические – готовые файлы *.htm, *.htmlдинамические – полностью или частично создаются на сервере

Слайд 9Системы управления сайтами
CMS = Content Management System, система управления содержимым сайта.

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

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

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

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

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

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

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

Как создать веб-страницу?Любой текстовый редактор (Блокнот и т.п.)2×ЛКМТекстовые редакторы с подсветкой HTML-тэгов: Sublime Text (sublimetext.com)

Слайд 12Язык гипертекстовой разметки HTML
HyperText Markup Language (HTML)

Язык гипертекстовой разметки

HTML - язык разметки исходного текста веб-документа,
Обрабатываемое значение

Язык гипертекстовой разметки HTMLHyperText Markup Language (HTML) Язык гипертекстовой разметки HTML - язык разметки исходного текста веб-документа,

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

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

Первая

страница

Привет!

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

Привет!

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

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

Слайд 14

Моя первая Web-страничка

Слайд 15

Слайд 16Спецификация языка HTML позволяет опускать кавычки для следующих видов атрибутов:

Атрибуты,

записываемые только строчными или заглавными символами латинского алфавита и не

включающие иных символов, например, цифр.

2) Атрибуты, состоящие только из цифр от 0 до 9.

Например, запись атрибутов
BORDER="1" или ALIGN="CENTER"
допустимо представить как
BORDER=1 и ALIGN=CENTER.

Спецификация языка HTML позволяет опускать кавычки для следующих видов атрибутов:Атрибуты, записываемые только строчными или заглавными символами латинского

Слайд 17
Комментарий открывается символьной последовательностью, начинающейся с открывающейся угловой скобки, восклицательного

знака и двух тире:

Слайд 18Методы описания цвета элементов:

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

названия цветов словами. Существует 140 цветов, для которых приняты стандартные

символьные метки.

2) с помощью шестнадцатеричного цифрового кода, заменяющего эти метки. Цветов, которые возможно отобразить посредством цифрового кода, несоизмеримо больше, чем меток.

Методы описания цвета элементов: посредством задания специальных цветовых меток, обозначающих названия цветов словами. Существует 140 цветов, для

Слайд 19Цветовая палитра HTML состоит из сочетаний оттенков красного, зеленого и синего цветов.

Это двоичная система кодирования цвета в графических редакторах RGB. Однако

значения цветов могут быть представлены и в шестнадцатеричной кодировке:
(RGB) 255.255.255 (НЕХ) FFFFFF (белый цвет)

В спецификации HTML 4.0 определены следующие
16 ключевых цветов

Цветовая палитра HTML состоит из сочетаний оттенков красного, зеленого и синего цветов. Это двоичная система кодирования цвета в графических

Слайд 20Фон документа

Слайд 21Тэг BODY – общие свойства страницы
цвет фона и текста

BGCOLOR=#00FF00>
Привет!

цвет текста
цвет фона
атрибуты тэга

Тэг BODY – общие свойства страницыцвет фона и текстаПривет!цвет текста цвет фона атрибуты тэга

Слайд 22Теги для форматирования текста

Слайд 23Теги для форматирования текста

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

индекс (subscript):
Вася2
Вася2

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

Слайд 25Тэг FONT – свойства блока текста
цвет текста

размер шрифта
Привет!

Как дела?

Привет!

COLOR=red
SIZE=6>
Как дела?

от 1 до 7
(3 – нормальный)

Тэг FONT – свойства блока текстацвет текстаразмер шрифтаПривет!Как дела?Привет!Как дела?от 1 до 7(3 – нормальный)

Слайд 26Линия-разделитель

horizontal rule
ширина в пикселях или процентах
толщина
выравнивание

Слайд 27Наиболее распространенные
Escape-последовательности

Слайд 28Специальные символы

Слайд 29Фраза Он сказал: «Поехали!» в тексте веб-страницы будет выглядеть, например,

так:

Он сказал: «Поехали!»

Слайд 30Заголовки: H1 … H6

Заголовок документа
Заголовок раздела
Заголовок подраздела
Заголовок параграфа
Комментарий
Авторские пометки

выравнивание:
История
left,

center,
right

Заголовки: H1 … H6Заголовок документаЗаголовок разделаЗаголовок подразделаЗаголовок параграфаКомментарийАвторские пометкивыравнивание:Историяleft, center, right

Слайд 31Абзацы
переход на новую строку

абзац (с отступами)
И вечный бой! Покой
нам

только снится

Сквозь кровь и пыль...

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

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

Одно

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

До самого вечера тело с варежками ...

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

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

Этот текст выровнен по центру.

Этот текст выровнен по

ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст

выровнен по ширине.

left по левой границе
right по правой границе
center по центру
justify по ширине

атрибут тэга

ВыравниваниеЭтот текст выровнен по центру.Этот текст выровнен по ширине.Этот текст выровнен по ширине.Этот текст выровнен по ширине.Этот

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

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

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

списка)
изменение маркера:

...

disk 
circle ○
square

■

Маркированные спискиВася ПетяКоляunordered list (неупорядоченный список) list item (элемент списка) изменение маркера:...disk

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

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

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

START=3>
...

1, i, I, a, A

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

Слайд 35Списки определений

компьютер
устройство для обработки информации
дискета
гибкий магнитный диск
винчестер
жесткий магнитный

диск

definition list (список определений)
definition term (термин)
definition description (описание)

Списки определенийкомпьютер устройство для обработки информациидискетагибкий магнитный дисквинчестержесткий магнитный дискdefinition list (список определений) definition

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

Города Украины

  Москва   Санкт-Петерург
  Киев   Одесса

Слайд 37Ссылки на другие страницы сайта
Таблицы
страница в той же папке
anchor

(якорь)
hyper reference (гиперссылка)
страница во вложенной папке
Пример
страница в

соседней папке

Текст

выйти из текущей папки

Ссылки на другие страницы сайтаТаблицыстраница в той же папкеanchor (якорь) hyper reference (гиперссылка) страница во вложенной папкеПримерстраница

Слайд 38Ссылки на другие сайты
Почта
на главную страницу сайта
index.htm, index.html, default.asp,

…
на конкретную страницу сайта (URL)

Васин текст
на файл для скачивания

HREF="http://www.vasya.ru/prog.zip">
Скачать

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

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

Ссылки на другие сайтыПочтана главную страницу сайтаindex.htm, index.html, default.asp, …на конкретную страницу сайта (URL)Васин текстна файл для

Слайд 39Запуск почтовой программы

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

Слайд 40Ссылки внутри страницы

Глава 1

Глава 2

Глава 1
Это

текст главы 1. Это текст главы 1.
Это текст главы 1.

Это текст главы 1.

Наверх

Глава 2

Это текст главы 2. Это текст главы 2.
Это текст главы 2. Это текст главы 2.

Наверх

в другом файле

Цвет текста

метка (якорь)

переход на метку

Ссылки внутри страницыГлава 1Глава 2Глава 1Это текст главы 1. Это текст главы 1.Это текст главы 1. Это

Слайд 41Цвет гиперссылок

...

LINK

ссылки, на которых не были
VLINK посещенные ссылки
ALINK активные

ссылки

Слайд 42Форматы рисунков
GIF (Graphic Interchange Format)
сжатие без потерь
прозрачные области
анимация
только с палитрой

(2…256 цветов)
рисунки с четкими границами, мелкие рисунки
JPEG (Joint Photographer Expert

Group)
сжатие с потерями
только True Color (16,7 млн. цветов)
нет анимации и прозрачности
рисунки с размытыми границами, фото

PNG (Portable Network Graphic)
сжатие без потерь
с палитрой (PNG-8) и True Color (PNG-24)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки

Форматы рисунковGIF (Graphic Interchange Format)сжатие без потерьпрозрачные областианимациятолько с палитрой (2…256 цветов)рисунки с четкими границами, мелкие рисункиJPEG

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

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

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

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

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

ALIGN="left" HSPACE=10 VSPACE=10>
VSPACE
(vertical space)
HSPACE
(horizontal

space)

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

всплывающая

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

портить дизайн, если рисунка нет

толщина рамки вокруг рисунка

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

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

SRC="tbl.jpg" ALT="Таблицы" BORDER=0>

локальная ссылка:
ссылка на другой сервер:
иначе будет синяя рамка

вокруг

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

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

Слайд 48Простейшая таблица

Таблица из одной строки
из

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

и ячеек.

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

TABLE таблица
TR = table row строка таблицы
TD = table data данные таблицы
TH = table header заголовок (жирный, по центру)

Простейшая таблица Таблица из одной строки из трех столбцов без указания ширины таблицы

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

...

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

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

...

всей таблицы:
строки:
ячейки:

...

ширина в пикселях

или в % от ширины таблицы

Слайд 50Фреймы
Фрейм (frame) – это часть сложной Web-страницы, в которую может

быть загружена другая Web-страница.
3 файла:
left.html

– страница в левой части
right.html – страница в правой части
index.html – описание структуры

ФреймыФрейм (frame) – это часть сложной Web-страницы, в которую может быть загружена другая Web-страница.3 файла:

Слайд 51Описание структуры
index.html

Фреймы-столбцы

SRC="right.html" NAME="qq">

columns
столбцы
ширина в пикселях или %
все остальное место
source
источник
имя фрейма

(для ссылок)

Слайд 52Граница между фреймами

...

...

граница между фреймами:
0 –

невидима, 1 - видима
ширина полосы между фреймами, за которую можно

перетащить границу

Слайд 53Настройка фрейма (FRAME)

MARGINHEIGHT="0"
NORESIZE
SCROLLING="auto">
убрать отступы от края фрейма

до содержимого

полоса прокрутки:
auto – появляется, когда надо
yes – есть всегда
no – нет никогда

запретить изменение размеров

Настройка фрейма (FRAME)убрать отступы от края фрейма до содержимогополоса прокрутки: auto – появляется, когда надо

Слайд 54Фреймы-строки
index.html

Фреймы-строки

NAME="qq">

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

Фреймы-строкиindex.html Фреймы-строки строкиширина в пикселях или %

Слайд 55Сложные структуры (3 фрейма)
index.html

Слайд 56Как открыть ссылку в другом фрейме

TARGET="qq">Глава 2
TARGET
_blank – в новом окне
_parent

– в родительском окне
_top – в главном окне
(убрать фреймы)

Как открыть ссылку в другом фреймеГлава 2TARGET _blank – в новом окне _parent – в

Слайд 57Блоки (DIV) – любое содержимое

Lorem ipsum dolor sit

amet, consectetur adipiscing elit. Nam nunc libero,

semper ac feugiat sed, sollicitudin et mauris.

Блоки (DIV) – любое содержимое Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam

Слайд 58Блоки (DIV) – рамки и отступы
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. Mauris eu turpis vel tellus tincidunt pulvinar.

padding

border

margin

#qq {
padding: 5px 10px;
border: 1px solid green;
margin: 5px 15px 5px 10px;
}

Блоки (DIV) – рамки и отступыLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper

Слайд 59«Плавающие» блоки
.picture {
float: left;
margin: 5px;
}
.picture

p {
margin: 0;
text-align: center;
font-family: sans-serif;
font-size: 80%;

font-weight: bold;
}

На природе

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

свойства абзаца внутри блока

«Плавающие» блоки.picture { float: left; margin: 5px; }.picture p { margin: 0; text-align: center; font-family:

Скачать презентацию

Разделы презентаций

Методы и средства создания и сопровождения сайта

Содержание

Слайды и текст этой презентации

Слайд 1Методы и средства создания и сопровождения сайта

Слайд 2WWW (World Wide Web) – служба для обмена информацией в

виде гипертекста.Гипертекст – текст, содержащий активные ссылки (гиперссылки) на другие

Слайд 3Основные определенияГиперссылка (англ. hyper reference) – это «активная» ссылка на

другой объект (часть того же документа, другой документ, файл, каталог,

Слайд 4Веб-браузеры Internet Explorer Firefox (www.mozilla-russia.org) Chrome (www.google.com/chrome) Safari (www.apple.com/safari) Opera

(www.opera.com)бесплатно!Браузер – это программа для просмотра веб-страниц на экране.

Слайд 5Веб-сервер – это программа, которая обеспечивает работу сайтов: приём запросов

и выдачу ответов по протоколу HTTP или HTTPS.Веб-сёрфинг — переход

Слайд 6Протокол передачи гипертекстаПротокол передачи гипертекстовой информации HyperText Transfer Protocol (HTTP)

Протокол передачи гипертекста - базирующийся на TCP/IP, обеспечивает доступ к

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

Слайд 8Веб-страницы бываютстатические – готовые файлы *.htm, *.htmlдинамические – полностью или

частично создаются на сервере в момент запроса

Слайд 9Системы управления сайтамиCMS = Content Management System, система управления содержимым сайта.

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

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

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

Слайд 11Как создать веб-страницу?Любой текстовый редактор (Блокнот и т.п.)2×ЛКМТекстовые редакторы с

подсветкой HTML-тэгов: Sublime Text (sublimetext.com) NotePad++ (notepad-plus-plus.org)

Слайд 12Язык гипертекстовой разметки HTMLHyperText Markup Language (HTML) Язык гипертекстовой разметки

HTML - язык разметки исходного текста веб-документа, Обрабатываемое значение

Слайд 13Первая веб-страницаТэг – команда языка HTMLоткрывающий тэгзакрывающий тэг Первая

страница Привет! Первая страница Привет!контейнер (парный тэг)

Слайд 14 Моя первая Web-страничка