1 / 48

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

Кафедра информационных технологий. Российский государственный университет физической культуры, спорта, молодежи и туризма. Тема лекции :. Технология написания и публикации Интернет-проекта в сети. Вопрос 1. ” Всемирная паутина ” W W W.

trina
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Кафедра информационных технологий Российский государственный университет физической культуры, спорта, молодежи и туризма Тема лекции: Технология написания и публикации Интернет-проекта в сети Вопрос 1. ”Всемирная паутина” W W W Вопрос 2. Основы языка разметки гипертекста H T M L 2009

  2. ИНТЕРНЕТ-ПРОЕКТ “СТРАНИЦА СТУДЕНТА РГУФКСиТпо специальности ТУРИЗМ” Зачетные требования к Интернет-проекту http://it.sportedu.ru + Форум преподавателя http://htmLbook.ru – дополнительная электронная литература

  3. ЗАЧЕТНЫЕ ТРЕБОВАНИЯ К ИНТЕРНЕТ-ПРОЕКТУ” Тема: “Страница студента РГУФКСиТ по специальности ТУРИЗМ” Слайд. 4

  4. ЗАЧЕТНЫЕ ТРЕБОВАНИЯ К ИНТЕРНЕТ-ПРОЕКТУ” Слайд. 5

  5. ЗАЧЕТНЫЕ ТРЕБОВАНИЯ К ИНТЕРНЕТ-ПРОЕКТУ” Слайд. 6

  6. ЗАЧЕТНЫЕ ТРЕБОВАНИЯ К ИНТЕРНЕТ-ПРОЕКТУ” 4-ая страница (название страницы: КАРТА МАРШРУТА) содержит: 4.1. Графический объект с электронной картой туристического маршрута, состоящей из 4 областей (минимум). Каждая область содержит гиперссылку, открывающую контрольную страницу (1 область открывает файл map1.html с текстом "Карта 1",  2 область открывает файл map2.html с текстом "Карта 2",и т.д.). Содержание контрольных страниц студенты выбирают произвольно;4.2. гиперссылки на 1, 2, 3, 5 страницы с указанием названия страниц. Слайд. 7

  7. . . . . . . . . . . . . . . . . ИНТЕРНЕТ – СЕТЬ СЕТЕЙ Спутник Клиент 1 Сервер Клиент 2 УК Клиент 3Сервер Клиент 4 УК Оптико- волокно Клиентские компьютеры, клиентское ПО Информ. Сервер Microsoft Internet Explorer Netscape Navigator Сервер WWW (World Wide Web) Microsoft Web Server Apachi Слайд. 2

  8. Адресация в Интернете 232 = 4 294 967 296 Цифровой адрес IP-адрес Буквенный адрес Доменное имя 209.182.100.11 0-255.0-255.0-255.0-255 abcz.com Сервер доменных имен Ivanov.narod.ru Административные:COM, ORG, NET, MIL Географические: RU, CA, DE, FR,JP Слайд. 3

  9. Web-сайтWeb-страница гипертекст  гиперссылка http://www.abcz.ru 1 Home Page 2 3 4 5 6 7 8 http://www.abcz.ru/sport/ski.htm Универсальный локатор сетевых ресурсов (URL- Uniform Resource Locator) http (hypertext transfer protocol) – протокол передачи гипертекста www.abcz.ru – имя домена sport – подкаталог ski.htm – файл страницы http://www.abcz.ru/sport/images/emblem.gif Слайд. 4

  10. Вопрос 2. Основы языка разметки гипертекста H T M L • HTML (HyperText Markup Language) – язык разметки гипертекста (структура, встроенные команды). HTML страница состоит из: - тегов (определяют структуру и внешний вид Web-страницы при отображении в клиентской программе). - текста (содержимое документа), <имя_тега атрибут=“параметр” атрибут=“параметр” атрибут=“параметр”> Начальный тег <a href=“http://www.sportedu.ru”> Web-сайт ГЦОЛИФК </a> Конечный тег Исключения: <img> - вставка графического объекта, <br> - разрыв строки, <hr> - горизонтальная линейка, <p> - новый абзац. Слайд. 5

  11. Структура HTML-страницы <html> <head> <title> </title> My first Web Заголовок </head> <bodyBgColor=“Blue” Link=“Green” VLink=”Red”> <body> <p>Текст 1 <hr> Тело <p>Текст 2 <hr> <a href=“http://www.sportedu.ru”>Web-сайт ГЦОЛИФК</a> </body> </html> Слайд. 6

  12. Слайд. 7

  13. Слайд. 8

  14. Наиболее распространенные теги и их атрибуты 1) <html>...</html> - начальный и конечный теги всего HTML-документа. 2)<head>...</head>- начальный и конечный теги заголовка документа. 3)<title>...</title>- начальный и конечный теги названия документа. 4)<meta name="Description" content=“Подготовка Иванова к Олимпийским играм">- служебный тегдля поисковых систем (отображаютсодержимое ”content”). 5)<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">- служебный тег для определения кодировки (Windows икириллица). Слайд. 9 5.1.<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="Description" content=“Подготовка Иванова к Олимпийским играм"> <meta name="Keywords" content=“Олимпийские игры, подготовка, Иванов"> </head>

  15. Наиболее распространенные теги и их атрибуты(продолжение) 6)<body ...>...</body>- начальный и конечный теги тела HTML-документа. Атрибуты: 6.1.Background="url" – указывается URL фонового изображения Web–страницы. Абсолютный адрес фона Web-страницы <bodybackground=” http://www.abcz.ru/fon.gif”> Относительный адрес фона Web-страницы <bodybackground=”fon.gif”> Атрибуты: 6.2.BgColor=“цвет" – указывается URL фона Web–страницы. Цвет фона Web-страницы 6.2.1. По названию цвета:<Body BgColor=“Green”> 6.2.2. Шестиразрядный шестнадцатеричный код:<Body BgColor=“#00FF00”> Слайд. 10

  16. Шестиразрядный шестнадцатеричный код Red Интенс. – 1 байт Green Интенс. – 1 байт Blue Интенс. – 1 байт 0 - 255 0 - 255 0 - 255 00 FF 00 FF 00 FF <Body BgColor=“#FF0000”> <Body BgColor=“#0000FF”> FFFF00 (желтый), FF00FF (малиновый), 00FFFF (бирюзовый), FFFFFF(белый), 000000 (черный) 808080 (серый) Слайд. 11 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

  17. Определение цвета в граф.редакторе Adobe Photoshop Панель инструментов Цвет переднего плана Слайд. 12

  18. Наиболее распространенные теги и их атрибуты(продолжение) 7.<а ...>...</а> - гиперссылка. Атрибуты: 7.1.href="url"– указывается URL-адрес целевого документа гиперссылки. Абсолютная гиперссылка <aHREF="http://www.sportedu.ru/">ГЦОЛИФК</a> Относительная гиперссылка <aHREF=”index3.html">Фотоальбом</a> <а href="mailto:ivan@abcz.ru">Написать письмо</a> 8.<font ...> ...</font>- установка размера, цвета или гарнитуры заключенного в теги текста Атрибуты: 8.1. СоLоr="цвет" – установка цвета заключенного в теги текста. Face= "список" – установка гарнитуры заключенного в теги текста. Size= "значение" – размер шрифта устанавливается равным заданному абсолютному значению от 1 до 7. 8.1.1.<font face=“Verdana” Color=“Green” Size=“4”>ГЦОЛИФК</font> - установка размера, цвета или гарнитуры заключенного в теги текста Слайд. 13

  19. Наиболее распространенные теги и их атрибуты(продолжение) 9.<р...> - новый абзац. Атрибуты: 9.1. Аlign="позиция" – задается способ выравнивания текста в абзаце: left - по левому краю, center - по центру, right - по правому краю, justify - по ширине страницы. 10. <center>...</center>- размещение заключенного в теги текста по центру 11. <br> - разрыв текущего текстового потока и возобновление его с начала следующей строки 12. <sup>...</sup> - заключенный в теги текст будет смещен вверх (верхний индекс) 13.<b>...</b> - заключенный в теги текст будет отображаться полужирным шрифтом 14. <i>...</i> - заключенный в теги текст будет отображаться в курсивном начертании Слайд. 14

  20. Наиболее распространенные теги и их атрибуты(продолжение) 15.<hr ...> - разрыв текущего текстового потока cо вставкой горизонтальной линии Атрибуты: 15.1. Аlign="позиция" –выравнивание линии: по левому краю (left), центру (center) или правому краю (right); 15.2.Size="n" –толщина линии, равная целому числу пикселей (минимальная видимая точка на экране) 15.3.Width="n" –ширина линии, равная целому числу пикселей (например: Width=”150”) или % от ширины страницы, абзаца (например: Width=”90%”) 16.<marquee ...>...</marquee>- бегущая строка текста Атрибуты: 16.1.Аlign= "позиция" – задается размещение бегущей строки по вертикали относительно текста, в котором она расположена: вверху (top), по середине (middle) или внизу (bottom); 16.2.BgсоLоr="цвет" –цвет фона бегущей строки; 16.3.height="n" –высота (в пикселях) зоны бегущей строки; 16.4.Width="n" –ширина зоны бегущей строки в пикселях. Слайд. 15

  21. Наиболее распространенные теги и их атрибуты(продолжение) 17.<img ...> - вставка графического файла. Атрибуты: 17.1.Src="url"–URL-адрес изображения (обязательный атрибут). 17.2.Border="n" – указывается толщина в пикселях обрамления изображения. 17.3.Height=”n" – задается высота изображения в пикселях; 17.4.Width="n" – указывается ширина изображения в пикселях. 18.<table ...>... </table>- вставка таблицы Атрибуты: 18.1.Background="urL" –URL фонового изображения таблицы; 18.2.Bgcolor="цвет" –цвет фона всей таблицы; 18.3.Border=”n” –обрамление, образованное линиями толщиной n пикселей. 18.4.Bodercolor="цвет" – задается цветлиний обрамления всей таблицы; 18.5.Cellpadding=“n" –область свободного пространства ширинойn пикселеймежду границами ячейки и ее содержимым; 18.6.Cellspacing="n" –интервал между ячейками таблицы; 18.7.Width="n" –ширина таблицы в пикселях или в процентах от ширины абзаца; 18.8.Height="n" –высота таблицы в пикселях или в процентах от высоты абзаца. Слайд. 16

  22. Наиболее распространенные теги и их атрибуты(продолжение) 18.<table ...>... </table>- вставка таблицы 19.<tr ...>...</tr> - строка ячеек в таблице (только внутри тегов таблицы) Атрибуты: 19.1.– Аlign="позиция" выравнивание содержимого ячеек в данной строке; 19.2.Bgcolor="цвет" –цвет фона строки (приоритетно к цвету фона таблицы); 19.3.Valign="позиция" – выравнивание содержимого ячеек в данной строке по вертикали: вверху (top), по центру (center), внизу (bottom); 19.4.Аlign="позиция" –выравнивание содержимого ячеек в данной строке по горизонтали: left - по левому краю, center - по центру, right - по правому краю, justify - по ширине ячейки. Слайд. 17

  23. Наиболее распространенные теги и их атрибуты(продолжение) 18.<table ...>... </table>- вставка таблицы 19.<tr ...>...</tr> - строка ячеек в таблице (только внутри тегов таблицы) 20.<td ...>... </td>- ячейка в таблице (только внутри тегов строки таблицы) Атрибуты: 20.1.– Аlign="позиция" выравнивание содержимого ячейки по горизонтали: left - по левому краю, center - по центру, right - по правому краю, justify - по ширине ячейки; данной строке; 20.2.Valign="позиция" – выравнивание содержимого ячейки по вертикали: вверху (top), по центру (center), внизу (bottom); 20.3.Bgcolor="цвет" –цвет фона ячейки (приоритетно к цвету фона таблицы); 20.4. Сolspan="n" – объединение nсоседних столбцов; 20.5. Rowspan="n" – объединение nсоседнихстрок. 20.6.Width="n" –ширина ячейки в пикселях или в процентах от ширины таблицы; 20.7.Height="n" –высота ячейки в пикселях. Слайд. 18

  24. <html> <Head> </Head> <Body> <Table border=0 Width=“100%” Height=“100%”> <Tr> <TdAlign=Center Valign=Top> <Table border=1 Width=“750” Height=“800”> <Tr> <TdWidth=“150”>Команды меню </Td> <Td>Содержимое страницы </Td> </Tr> </Table> </Td> </Tr> </Table> </Body> </html> Команды меню Содержимое страницы Слайд. 19

  25. <MAP name="m1"> . <AREA shape=rect coords="0,0,210,315" href="map1.html" alt="Маршрут 2"> <AREA shape=rect coords="210,0,360,315" href="map2.html" alt="Маршрут 2"> <AREA shape=rect coords="360,0,480,315" href="map3.html" alt="Маршрут 3"> <AREA shape=rect coords="500,0,550,315" href="map4.html" alt="Маршрут 4"> </MAP> . <IMG src=m.jpg usemap="#m1" border=1> Слайд. 19

  26. ОПРЕДЕЛЕНИЕ ОБЛАСТИ ССЫЛКИ НА КАРТЕ Меню ОКНО ИНФО Слайд. 20

  27. Тема лекции: “КОМПЬЮТЕРНЫЕ СЕТИ. ИНТЕРНЕТ” 1. ИСТОРИЯ ИНТЕРНЕТ 2. УПРАВЛЕНИЕ ИНТЕРНЕТ 2. ПРОТОКОЛ ИНТЕРНЕТ TCP / IP 3. ИНФОРМАЦИОННЫЕ СЕРВИСЫ ИНТЕРНЕТА 4. ФОРМАТЫ ГРАФИКИ В СЕТИ

  28. Интернет (сеть сетей) Исторические предпосылки Политическая конкуренция Технологическая конкуренция СССР  холодная война  США 1957 г. Запуск СССР первого искусственного спутника Земли 1958 г. Агенство Перспективных Исследований США (ARPA- Advanced Research Project Agency) 1961 г. Леонард Клейнрок 1962 г. Академик Глушков - ОГАС Л.Клейнрок на празд. 30-ия Интернет 1969 г. Проект ARPANET (Network) Слайд. 12

  29. Интернет (сеть сетей) A Б Слайд. 13

  30. Интернет (исторические даты) 1983 ARPANET INTERNET MILNET (military) 1986 NSFNET (National Science Foundation) Слайд. 14

  31. Интернет (исторические даты) 1990 RELCOM (SU) 1994 РосНИИРОС (RU), Координ. Центр Слайд. 15

  32. Интернет (управление сетью) ОБЩЕСТВО ИНТЕРНЕТ (ISOC- Internet Society) Совет по архитектуре (IAB-Internet Architecture Board) Центр сетевой информации (InterNIC- Internet Network Informational Center) РосНИИРОС-RBNet (Russian Backbone) Координационный центр национального домена Слайд. 16

  33. Интернет (структура сети) Спутник Домен SPORTEDU УК УК Оптико- волокно Сервер Информ. Сервер Рабочие станции Сервер доменных имен (DNS) Слайд. 17

  34. Протокол TCP/IP (Transmission Control Protocol / Internet Protocol) TCP- разбивка на пакеты, нумерация, сборка IP- адресация, маршрутизация Слайд. 18

  35. Общая схема передачи сообщения с Интернете Слайд. 19

  36. Адресация в Интернете 232 = 4 294 967 296 Цифровой адрес IP-адрес Буквенный адрес Доменное имя 209.182.100.11 abcz.com Сервер доменных имен Ivanov.narod.ru Административные:COM, ORG, NET, MIL Географические: RU, CA, DE, FR,JP Слайд. 20

  37. Способы подключения к Интернету постоянное Сеансовое (Dial-Up) комбинированное (Исход.траф.- модем, вход.трф.- спутник) • Коммутируемое подключение с помощью программы эмуляции терминала (Telnet|TCP/IP) • Коммутируемое подключение по протоколу (SLIP, PPP) • Протокол TCP/IP • Доступ ко всем информ. службам  Web-узел ISDN-канал ( (цифров.сеть интегрированных служб [128 Кбит/с]) xDSL (цифров. Абонентская линия более 8 Мбит/с)  Радио канал (10 Мбит/c) Оптико-волокно (1 Гбит/с). Слайд. 21

  38. Электронная почта (Electronic mail – E-MAIL) 1. Система передачи сообщений с помощью компьютеров (CBMS) 2. Компоненты e-mail Internet 3. Структура сообщения Клиентское ПО (Outlook Express) Серверное ПО (MailMax) Заголовок Тело Стандарт MIME (Multipurpose Internet Mail Extensions) Подсистема хранения сообщений Транспортная подсистема Подсистема каталогов 4. Адрес e-mail: Ivanov@abc.az.ru Слайд. 22

  39. Телеконференция Usenet (Uses NetWork – сеть пользователей) 1. 1970 г. (Университеты Дьюка и Северной Каролины) 2. Компоненты Usenet 3. Стандартные (всемирные) группы новостей Alt Biz Comp News rec Sci Soc Relcom Fido7 Internet Клиентское ПО (Outlook Express) Сервер Usenet 4. Адрес Usenet: fido7.ru.sport.football Иерархически упорядоченные группы новостей (конференции) Модератор Сисоп 5. BBS (Bulletin Board System)  FIDO  Netmail, Echomail шлюз в Интернет 6. Адрес FIDO: Зона: регион (сеть) / узел 2:5020/112 (2-Европа, 50-Россия, 20- Москва, 112 узел) Слайд. 5

  40. Трансляция разговора в Интернете IRC (Internet Relay Chat) – интерактивная переписка в реальном времени IP-телефония, видеоконференция 1. 1988г. финский студент Ярко Ойкаринен 2. Компоненты IRC 3. IP-телефония Способы передачи данных через Интернет Internet через выделенный канал Клиентское ПО (mIRC, Internet Explorer) Сервер IRC 4. Общая схема IP-телефонии Технология DCC- Direct Client Comunication 5. Сервер IP-телефонии  шлюз полнодуплексный разговор Слайд. 6

  41. Трансляция разговора в Интернете Видеоконференция 1. Технологии: точка точка, точка  многоточие Пропускная способность канала связи – более 1,5 Мбит/с 2. Компоненты видеоконференции Internet 3. Аппаратно-программные требования Клиентское ПО (IE, ICQ, MS NetMeetting) Аппаратные и программные КОДЕКИ Видео Сервер Adobe Acrobat Connect Pro Слайд. 7

  42. Передача файлов в Интернете FTP (File Transfer Protocol) Файлы насервере FTP Internet Клиентское ПО (FTP-Explorer, Internet Explorer) Сервер FTP Коммер-ческие Условно бесплатно распростра-няемые (Sharewera) Анонимный Неанонимный Копировать файл с сервера (Download) Копировать файл с сервера (Download) Записывать на сервер (Upload) ftp://ftp.abcz.com Бесплатные (Freewera) Слайд. 9

  43. Всемирная паутина WWW (World Wide Web) http://www. abcz.az.ru 1 Home Page Internet 2 3 4 Клиентское ПО (Internet Explorer, Netscape Navigator) Сервер WWW 5 6 7 8 http://www.abcz.az.ru/sport/ski.htm Универсальный локатор сетевых ресурсов (URL- Uniform Resource Locator) Web-страница  Web-сайт гиперссылка <a href=“http://center.sportedu.ru”>Центр ИР</a> Слайд. 10

  44. Универсальный локатор сетевых ресурсов (URL- Uniform Resource Locator) http://abc.az.ru:8081/sport/ski.htm http (Hyper Text Transfer Protocol) – протокол передачи гипертекста по сети abc.az.ru:8081– доменное имя комп., где записан ресурс 8081- номер порта (прикладная коммуник. программа) /sport/ski.htm– подкаталог и файл ресурса Слайд. 11

  45. Информационно-поисковые системы www.rambler.ru www.google.ru www.aport.ru www.yandex.ru www.Yahoo.com www.excite.com www.lycos.com www.altavista.com Сканирование индексирование классификация текущее обслуживание Поиск по категориям– www.yandex.ru  спорт  летние виды спорта  легкая атлетика Поиск по ключевым словам, фразам Поиск файлов (Archie) Gopher Слайд. 12

  46. Поиск по ключевым словам, фразам “Мягкий” запрос “Жесткий” запрос Литеральный поиск Последовательность слов в кавычках Тренировка в соревновательный период (Рамблер - 2233) Логические операторы: AND, OR, NOT “Тренировка в соревновательный период” (Рамблер - 1) Слайд. 13

  47. Форматы графики в Интернете Растровая Матрица, пиксель (Pixel) Векторная Математическое описание объектов BMP – BitMap (RLE– Run Length Encoding) GIF – Grapfic Interchange Format (LZW Lempel Ziv Welch ) JPEG – Joint Photographic Expert Group TIFF – Target Image File Format WMF – Windows Meta File SWF - Small Web Format Слайд 14

More Related