Российский государственный университет физической...

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

Кафедра информационных технологий

2009

Технология написания и публикации Интернет-проекта в сети

Тема лекции:

Вопрос 2. Основы языка разметки гипертекста H T M L

Вопрос 1. ”Всемирная паутина” W W W

http://htmLbook.ru – дополнительная электронная литература

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

+ Форум преподавателя

Слайд. 4

ЗАЧЕТНЫЕ ТРЕБОВАНИЯ К ИНТЕРНЕТ-ПРОЕКТУ”

Тема: “Страница студента РГУФКСиТ по специальности ТУРИЗМ”

E:\Borland\Delphi6\Bin\delphi32.exe

Слайд. 5



Слайд. 6



Слайд. 7


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


Слайд. 2

ИНТЕРНЕТ – СЕТЬ СЕТЕЙ

Спутник

Оптико-волокно

УК

УК

Информ.Сервер

Клиентские компьютеры, клиентское ПО

Клиент 1 Сервер Клиент 2

..... . .

..... . . .

Microsoft Internet Explorer Netscape Navigator

Сервер WWW (World Wide Web)Microsoft Web Server Apachi

.

Клиент 3 Сервер Клиент 4

Слайд. 3

Адресация в Интернете

Цифровой адресIP-адрес

Буквенный адресДоменное имя

209.182.100.110-255.0-255.0-255.0-255

abcz.com

Сервер доменных имен

232 = 4 294 967 296

Ivanov.narod.ru

Административные: COM, ORG, NET, MIL Географические: RU, CA, DE, FR,JP

Слайд. 4

Web-сайт Web-страница гипертекст гиперссылка

1http://www.abcz.ru

2 3 4

5 6 7 8

Home Page

Универсальный локатор сетевых ресурсов (URL- Uniform Resource Locator)

http://www.abcz.ru/sport/ski.htm

http (hypertext transfer protocol) – протокол передачи гипертекстаwww.abcz.ru – имя доменаsport – подкаталогski.htm – файл страницы

http://www.abcz.ru/sport/images/emblem.gif


Слайд. 5

Вопрос 2. Основы языка разметки гипертекста H T M L

1. HTML (HyperText Markup Language) – язык разметки гипертекста (структура, встроенные команды).

HTML страница состоит из:

- текста (содержимое документа),

- тегов (определяют структуру и внешний вид Web-страницы при отображении в клиентской программе).

<имя_тега атрибут=“параметр” атрибут=“параметр” атрибут=“параметр”>

<a href=“http://www.sportedu.ru”>Web-сайт ГЦОЛИФК

</a>

Начальный тег

Конечный тег

Исключения:<img> - вставка графического объекта,<br> - разрыв строки, <hr> - горизонтальная линейка,<p> - новый абзац.

Слайд. 6

Структура HTML-страницы

<html>

</html>

<head>

</head>

<title> </title>My first Web

<body>

</body>

Заголовок

Тело

<body BgColor=“Blue” Link=“Green” VLink=”Red”>

<p>Текст 1

<hr>

<p>Текст 2

<hr><a href=“http://www.sportedu.ru”>Web-сайт ГЦОЛИФК</a>

Слайд. 7

Слайд. 8

Слайд. 9

Наиболее распространенные теги и их атрибуты

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 и кириллица).

5.1. <head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><meta name="Description" content=“Подготовка Иванова к Олимпийским играм"><meta name="Keywords" content=“Олимпийские игры, подготовка, Иванов"> </head>

Слайд. 10

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

6) <body . . .> . . . </body> - начальный и конечный теги тела HTML-документа.

Атрибуты:6.1. Background="url" – указывается URL фонового изображения

Web–страницы.

Относительный адрес фона Web-страницы <body background=”fon.gif”>

Абсолютный адрес фона Web-страницы<body background=” http://www.abcz.ru/fon.gif”>

Атрибуты:6.2. BgColor=“цвет" – указывается URL фона Web–страницы.

Цвет фона Web-страницы6.2.1. По названию цвета: <Body BgColor=“Green”>6.2.2. Шестиразрядный шестнадцатеричный код: <Body BgColor=“#00FF00”>

Слайд. 11

Шестиразрядный шестнадцатеричный код

RedRedИнтенс. – 1 байтИнтенс. – 1 байт

0 - 255

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

GreenGreenИнтенс. – 1 байтИнтенс. – 1 байт

BlueBlueИнтенс. – 1 байтИнтенс. – 1 байт

0 - 255 0 - 255

00 FF 00 FF 00 FF

<Body BgColor=“#FF0000”><Body BgColor=“#FF0000”> <Body BgColor=“#0000FF”><Body BgColor=“#0000FF”>

FFFF00 (желтый), FF00FF (малиновый), 00FFFF (бирюзовый), FFFFFF (белый), 000000 (черный)808080 (серый)

Слайд. 12

Определение цвета в граф.редакторе Определение цвета в граф.редакторе Adobe PhotoshopAdobe Photoshop

Панель инструментов

Цвет переднего

плана

Слайд. 13


7. <а . . .> . . . </а> - гиперссылка.

Атрибуты:7.1. href="url" – указывается URL-адрес целевого документа

гиперссылки.

Относительная гиперссылка<a HREF=”index3.html">Фотоальбом</a>

Абсолютная гиперссылка<a HREF="http://www.sportedu.ru/">ГЦОЛИФК</a>

<а href="mailto:[email protected]">Написать письмо</a>

8. <font . . .> . . . </font> - установка размера, цвета или гарнитуры заключенного в теги текста

Атрибуты:8.1. СоLоr="цвет" – установка цвета заключенного в теги текста.Face= "список" – установка гарнитуры заключенного в теги текста. Size= "значение" – размер шрифта устанавливается равным

заданному абсолютному значению от 1 до 7.

8.1.1. <font face=“Verdana” Color=“Green” Size=“4”>ГЦОЛИФК</font> - установка размера, цвета или гарнитуры заключенного в теги текста

Слайд. 14


9. <р . . .> - новый абзац.

Атрибуты:9.1. Аlign="позиция" – задается способ выравнивания текста в

абзаце: left - по левому краю, center - по центру, right - по правому краю, justify - по ширине страницы.

10. <center> . . . </center> - размещение заключенного в теги текста по центру

11. <br> - разрыв текущего текстового потока и возобновление его с начала следующей строки

13. <b> . . . </b> - заключенный в теги текст будет отображаться полужирным шрифтом

12. <sup> . . . </sup> - заключенный в теги текст будет смещен вверх (верхний индекс)

14. <i> . . . </i> - заключенный в теги текст будет отображаться в курсивном начертании

Слайд. 15


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" –ширина зоны бегущей строки в пикселях.

Слайд. 16


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" –высота таблицы в пикселях или в процентах от высоты абзаца.

Слайд. 17



19. <tr . . .> . . . </tr> - строка ячеек в таблице (только внутри тегов таблицы)

Атрибуты:19.1. – Аlign="позиция" выравнивание содержимого ячеек в данной строке; 19.2. Bgcolor="цвет" –цвет фона строки (приоритетно к цвету фона таблицы) ;19.3. Valign="позиция" – выравнивание содержимого ячеек в данной строке по вертикали:

вверху (top), по центру (center), внизу (bottom);19.4. Аlign="позиция" –выравнивание содержимого ячеек в данной строке по горизонтали:

left - по левому краю, center - по центру, right - по правому краю, justify - по ширине ячейки.

Слайд. 18



19. <tr . . .> . . . </tr> - строка ячеек в таблице (только внутри тегов таблицы)

Атрибуты: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" –высота ячейки в пикселях.

20. <td . . .> . . . </td> - ячейка в таблице (только внутри тегов строки таблицы)

Слайд. 19

<html> <Head> </Head> <Body>

<Table border=0 Width=“100%” Height=“100%”> <Tr> <Td Align=Center Valign=Top>

<Table border=1 Width=“750” Height=“800”> <Tr> <Td Width=“150” >Команды меню </Td> <Td>Содержимое страницы </Td>

</Tr> </Table>

</Td> </Tr> </Table>

</Body></html>

Команды меню

Содержимоестраницы

Слайд. 19

<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>

Слайд. 20

Меню ОКНО ИНФО

ОПРЕДЕЛЕНИЕ ОБЛАСТИ ССЫЛКИ НА КАРТЕ

Тема лекции:“КОМПЬЮТЕРНЫЕ СЕТИ. ИНТЕРНЕТ”

1. ИСТОРИЯ ИНТЕРНЕТ

2. УПРАВЛЕНИЕ ИНТЕРНЕТ

2. ПРОТОКОЛ ИНТЕРНЕТ TCP / IP

3. ИНФОРМАЦИОННЫЕ СЕРВИСЫ ИНТЕРНЕТА

4. ФОРМАТЫ ГРАФИКИ В СЕТИ

Слайд. 12

Интернет (сеть сетей)

Политическая конкуренция

Исторические предпосылки

Технологическая конкуренция

СССР холодная война США 1957 г. Запуск СССР первого искусственного спутника Земли

1958 г. Агенство Перспективных Исследований США (ARPA- Advanced Research Project Agency)1961 г. Леонард Клейнрок

1969 г. Проект ARPANET (Network)

1962 г. Академик Глушков - ОГАС

Л.Клейнрок на празд. 30-ия Интернет

Слайд. 13

Интернет (сеть сетей)

A

Б

Слайд. 14

Интернет (исторические даты)

ARPANET

MILNET (military)

INTERNET

1983

1986

NSFNET (National Science Foundation)

Слайд. 15

Интернет (исторические даты)

RELCOM (SU)

1990

1994

РосНИИРОС (RU), Координ. Центр

Слайд. 16

Интернет (управление сетью)

Совет по архитектуре (IAB- Internet Architecture Board)

ОБЩЕСТВО ИНТЕРНЕТ (ISOC- Internet Society)

Центр сетевой информации(InterNIC- Internet Network Informational Center)

РосНИИРОС- RBNet (Russian Backbone)Координационный центр национального домена

Слайд. 17

Интернет (структура сети)

Спутник

Оптико-волокно

УКУК

Сервер доменных имен (DNS)

Информ.Сервер

Сервер

Рабочиестанции

Домен SPORTEDU

Слайд. 18

Протокол TCP/IP(Transmission Control Protocol / Internet Protocol)

TCP- разбивка на пакеты, нумерация, сборка

IP- адресация, маршрутизация

Слайд. 19

Общая схема передачи сообщения с Интернете

Слайд. 20

Адресация в Интернете

Цифровой адресIP-адрес

Буквенный адресДоменное имя

209.182.100.11 abcz.com

Сервер доменных имен

232 = 4 294 967 296

Ivanov.narod.ru

Административные: COM, ORG, NET, MIL Географические: RU, CA, DE, FR,JP

Слайд. 21

Способы подключения к Интернету

Сеансовое(Dial-Up)

постоянное

Коммутируемое подключение с помощью программы эмуляции терминала (Telnet|TCP/IP) Коммутируемое подключение по протоколу (SLIP, PPP)

Протокол TCP/IPДоступ ко всем информ. службам Web-узел

ISDN-канал ( (цифров.сеть интегрированных служб [128 Кбит/с])xDSL (цифров. Абонентская линия более 8 Мбит/с) Радио канал (10 Мбит/c) Оптико-волокно (1 Гбит/с).

комбинированное(Исход.траф.- модем, вход.трф.- спутник)


Слайд. 22

1. Система передачи сообщений с помощью компьютеров (CBMS)

Электронная почта(Electronic mail – E-MAIL)

Inte

rnet

Серверное ПО (MailMax)

Клиентское ПО (Outlook Express)

Подсистема хранения сообщений Транспортная подсистема Подсистема каталогов

2. Компоненты e-mail

3. Структура сообщения

Заголовок Тело

Стандарт MIME(Multipurpose Internet Mail Extensions)

4. Адрес e-mail: [email protected]

Слайд. 5

1. 1970 г. (Университеты Дьюка и Северной Каролины)

Телеконференция Usenet(Uses NetWork – сеть пользователей)

Inte

rnet

Сервер Usenet

Клиентское ПО (Outlook Express)

Иерархически упорядоченные группы новостей (конференции) Модератор Сисоп

2. Компоненты Usenet 3. Стандартные (всемирные) группы новостей

AltBizCompNewsrec

4. Адрес Usenet: fido7.ru.sport.football

SciSocRelcomFido7

5. BBS (Bulletin Board System) FIDO Netmail, Echomail шлюз в Интернет

6. Адрес FIDO: Зона: регион (сеть) / узел

2:5020/112 (2-Европа, 50-Россия, 20- Москва, 112 узел)

Слайд. 6

1. 1988 г. финский студент Ярко Ойкаринен

Трансляция разговора в ИнтернетеIRC (Internet Relay Chat) – интерактивная переписка в реальном времени

IP-телефония, видеоконференция

Inte

rnet

Сервер IRCКлиентское ПО (mIRC, Internet Explorer) Технология

DCC- Direct Client Comunication

2. Компоненты IRC 3. IP-телефония Способы передачи данных

через Интернет

4. Общая схема IP-телефонии

через выделенный канал

5. Сервер IP-телефонии шлюз полнодуплексный разговор

Слайд. 7

1. Технологии: точка точка, точка многоточие

Трансляция разговора в ИнтернетеВидеоконференция

Inte

rnet

Видео СерверAdobe Acrobat Connect Pro

Клиентское ПО (IE,ICQ, MS NetMeetting)

2. Компоненты видеоконференции

3. Аппаратно-программные требования

Пропускная способность канала связи – более 1,5 Мбит/с

Аппаратные и программные КОДЕКИ

Слайд. 9

Передача файлов в ИнтернетеFTP (File Transfer Protocol)

Inte

rnet

Сервер FTPКлиентское ПО (FTP-Explorer, Internet Explorer)

Анонимный Неанонимный

Копировать файл с сервера(Download)

Копировать файл с сервера(Download) Записывать на сервер(Upload)

Файлы на сервере FTP

Коммер-ческие

Условно бесплатно распростра-няемые (Sharewera)

Бесплатные (Freewera)

ftp://ftp.abcz.com

Слайд. 10

Всемирная паутинаWWW (World Wide Web)

Inte

rnet

Сервер WWW Клиентское ПО (Internet Explorer, Netscape Navigator)

1http://www. abcz.az.ru

2 3 4

5 6 7 8

Home Page


http://www.abcz.az.ru/sport/ski.htm

Web-страница Web-сайт гиперссылка <a href=“http://center.sportedu.ru”>Центр ИР</a>

Слайд. 11


http://abc.az.ru:8081/sport/ski.htm

http (Hyper Text Transfer Protocol) – протокол передачи гипертекста по сети

abc.az.ru:8081– доменное имя комп., где записан ресурс8081- номер порта (прикладная коммуник. программа)

/sport/ski.htm– подкаталог и файл ресурса

Слайд. 12

Информационно-поисковые системы

www.Yahoo.comwww.excite.comwww.lycos.comwww.altavista.com

Поиск по ключевым словам, фразам

Поиск по категориям– www.yandex.ru спорт летние виды спорта легкая атлетика

www.rambler.ruwww.google.ruwww.aport.ruwww.yandex.ru

Поиск файлов (Archie)

Сканирование индексирование классификация текущее обслуживание

Gopher

Слайд. 13

Поиск по ключевым словам, фразам

“Мягкий” запрос“Жесткий” запрос

Литеральный поиск

Последовательность слов в кавычках

Логические операторы: AND, OR, NOT

Тренировка в соревновательный период (Рамблер - 2233)

“Тренировка в соревновательный период” (Рамблер - 1)

Слайд 14

Форматы графики в Форматы графики в ИнтернетеИнтернете

РастроваяМатрица, пиксель (Pixel)

ВекторнаяМатематическое описание

объектов

BMP – BitMap (RLE – Run Length Encoding)GIF – Grapfic Interchange Format (LZW Lempel Ziv Welch )JPEG – Joint Photographic Expert GroupTIFF – Target Image File Format

WMF – Windows Meta FileSWF - Small Web Format

Российский государственный университет физической...

Documents