Оглавление

Оглавление 1

Лекция №1 (2 часа) 4

Тема: World Wide Web 4

Введение 4

Немного истории 4

Что такое WWW? 4

Распределенная информационная система: 4

Мультимедиа: 5

Гипертекст: 5

Как в WWW задается местонахождение документа? 6

Вопросы к теме 6

Лекция №2 (4 часа) 7

Тема: Язык HTML, Основные теги форматирования документов 7

Основные сведения о HTML 7

Понятие тега, виды тегов 7

Структура HTML документа 8

Тег HEAD 8

Тэг BODY 8

Атрибуты тега BODY 8

Управление фоном документа 9

Способы задания цветовых параметров 10

Форматирование текста документа 10

Вопросы к теме 11

Практическое задание 12

Задание 1: 12

Задание 2: 12

Лекция №3 (2 часа) 13

Тема: Изображения 13

Форматы графических файлов 13

Растровые форматы 13

Векторные форматы 13

Метафайлы 13

Некоторые популярные форматы 13

Формат GIF 13

Формат JPEG 13

Формат PNG 14

Вставка изображений в HTML документ 14

Вопросы к теме 15

Практическое задание 15

Задание 1: 15

Задание 2: 15

Лекция №4 (2 часа) 16

Тема: Гиперссылки 16

Параметры тэга А: 16

Понятие внешней и внутренней ссылки 16

Способы указания источника файла для ссылок и иллюстраций: абсолютный, относительный URL 17

Структура web-узла 17

Линейная структура 17

Иерархическая структура 18

Многосвязная структура 18

Распределение материала 18

Структура каталогов 18

Вопросы к теме 19

Практическое задание 19

Лекция №5 (2 часа) 20

Тема: Списки 20

Тэг UL 20

Тэг OL 20

Атрибуты тэга OL: 20

Тэг LI 20

Атрибуты тэга LI: 20

Тэг DL 20

Атрибуты тэга DL: 20

Тэг DT 20

Тэг DD 20

Примеры 20

Пример 1: Неупорядоченный список 21

Пример 2: Упорядоченный список 21

Пример 2: Список определений 21

Вопросы к теме 21

Практическое задание 22

Лекция №6 (2 часа) 23

Тема: Таблицы 23

Тэг TABLE 24

Атрибуты тэга TABLE: 24

Тэг TR 25

Атрибуты тэга TR: 25

Тэг TD и TH 25

Атрибуты тэгов TD и TH: 25

Тэг CAPTION 26

Атрибуты тэга CAPTION: 26

Примеры таблиц: 26

Пример 1: Таблица в 2 столбца и 2 строки 26

Пример 2: Таблица в 3 столбца и 3 строки с некоторыми объединенными ячейками 26

Вопросы к теме 27

Практическое задание 27

Лекция №7 (2 часа) 28

Тема: Фреймы 28

Тэг FRAMESET 28

Атрибуты тэга FRAMESET: 28

Тэг FRAME 29

Атрибуты тэга FRAME: 29

Тэг NOFRAMES 29

Примеры фреймов 29

Пример 1: Разделение окна браузера на две горизонтальные части 29

Пример 2: Разделение окна браузера на три части 29

Вопросы к теме 30

Практическое задание 30

Лекция №8 (2 часа) 31

Тема: Формы 31

Тэг FORM 31

Атрибуты тэга FORM: 31

Тэг TEXTAREA 31

Атрибуты тэга TEXTAREA: 31

Тэг SELECT 32

Атрибуты тэга SELECT: 32

Тэг OPTION 32

Атрибуты тега OPTION: 32

Тэг INPUT 32

Атрибуты тэга INPUT: 32

Примеры форм 34

Пример 1: Простая форма для сохранения на сервере короткого текстового сообщения 34

Пример 2: Форма с выпадающим списком, радио кнопками, чекбоксом и обычной кнопкой. 34

Вопросы к теме 34

Практическое задание 35

Лекция №9 (6 часов) 36

Тема: Каскадные таблицы стилей 36

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

Селекторы тегов 37

Селекторы элементов 37

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

Селекторы псевдоклассов 37

Комплексные селекторы 38

Контекстные селекторы 38

Каскадирование 38

Группирование 39

Декларации 39

Свойства шрифта 39

Свойства текста 39

Списки 40

Цвета 41

Границы и рамки 41

Свойства позиционирования 42

Визуальные свойства 43

Единицы измерения 44

Добавление таблиц стилей к документу 44

Таблицы связанных стилей 44

Таблицы глобальных стилей 44

Внутренние стили 45

Вопросы к теме 45

Практическое задание 45

Задание 1 45

Задание 2 45

Лекция №1 (2 часа)

Тема: World Wide Web

• Краткая история internet

• Что такое internet

• Понятие гипертекста

• Местонахождение документа в www

• Вопросы к теме

Введение

Немного истории

Для решения проблемы устойчивости и надежности каналов связи в условиях войн и катастроф в 1969 году специалистами из Пентагона была создана крупная децентрализованная компьютерная сеть Advanced Research Project Agency Network (Arpanet). Спустя некоторое время доступ к Arpanet получили и гражданские учреждения США, а в 1973 году, с установлением каналов связи с Англией и Норвегией, Arpanet преодолела границы США. В 1977 году началось слияние Arpanet с другими сетями как внутри США, так и в других развитых странах. В результате такого слияния и родилась глобальная компьютерная сеть Internet. В конце 80-х годов Internet, наконец, проник через уже прогнивший к тому времени Железный Занавес и достиг России.

Internet сделал возможным свободный обмен информацией невзирая на расстояния и государственные границы. Однако, несколько лет назад его ресурсы были доступны при помощи программного обеспечения, ориентированного лишь на пересылку файлов и неформатированного текста. Приверженцы Internet приходили в восторг, если им удавалось "скачать" файл с новой "игрушкой", переслать пару строк приятелю по электронной почте или подключить персоналку к "большой" машине в режиме удаленного терминала. В конце концов физикам Тиму Бернерс-Ли (Tim Berners-Lee) и Роберу Кайо (Robert Cailliau) из Женевского ЦЕРНа (CERN) это наскучило. Они решили разработать инфраструктуру, позволяющую братьям-физикам по всей Европе обмениваться результатами исследований через Internet в виде привычного для научных работников отформатированного и иллюстрированного текста, включающего ссылки на другие публикации. Так было положено начало World Wide Web, Всемирной Информационной Паутине, которая к настоящему времени оплела своими сетями практически весь компьютерный мир и сделала Internet доступным и привлекательным для миллионов пользователей.

Что такое WWW?

Так что же такое World Wide Web, или, как говорят в просторечье, WWW, the Web, или еще проще - 3W? WWW - это распределенная информационная система мультимедиа, основанная на гипертексте. Давайте разберем это определение по порядку.

Р аспределенная информационная система:

Информация хранится на огромном множестве так называемых серверов (servers), то есть компьютеров, на которых установлено специальное программное обеспечение (WWW-сервер) и которые объединены в сеть Internet. Пользователи, имеющие доступ к сети, получают эту информацию при помощи программ-клиентов (clients), называемых программами просмотра WWW-документов (WWW-browsers). При этом программа просмотра посылает по компьютерной сети запрос серверу, хранящему файл с необходимым документом. В ответ на запрос сервер высылает программе просмотра этот требуемый файл или сообщение об отказе, если файл по тем или иным причинам недоступен. Взаимодействие клиент-сервер происходит по определенным правилам, или, как говорят иначе, протоколу. Протокол, принятый в WWW, называется HyperText Transfer Protocol, сокращенно - HTTP.

Мультимедиа:

Информация включает в себя не только текст, но и двух- и трехмерную графику, видео и звук.

Гипертекст:

И нформация в WWW представляется в виде документов, каждый из которых может содержать как внутренние перекрестные ссылки, так и ссылки на другие документы, хранящиеся на том же самом или на любом другом сервере. Такие ссылки называют гиперссылками (hyperreferences) или гиперсвязями (hyperlinks). На экране компьютера в окне программы просмотра ссылки выглядят как выделенные каким-либо образом (например, другим цветом и/или подчеркиванием) участки текста или графики. Выбирая гиперссылки, пользователь программы просмотра может быстро перемещаться от одной части документа к другой, или же от одного документа к другому. При необходимости программа просмотра автоматически связывается с соответствующим сервером в сети и запрашивает документ, на который сделана ссылка. Кстати, идея гипертекстового представления информации должна уже быть хорошо знакома пользователям различных версий системы Microsoft Windows, каковых среди читателей этой книги, вероятно, большинство. Именно по этому принципу построена в Windows система подсказок (Help), с той лишь разницей, что гипертекстовая система подсказок Windows не является распределенной.

Итак, WWW-документ может содержать стилизованный и форматированный текст, графику и гиперсвязи с различными ресурсами Internet. Чтобы реализовать все эти возможности, был разработан специальный язык, названный HyperText Markup Language (HTML), то есть, Язык Разметки Гипертекста. Документ, написанный на HTML, представляет собой текстовый файл, содержащий собственно текст, несущий информацию читателю, и флаги разметки (markup tags). Последние представляют собой определенные стандартом HTML последовательности символов, являющиеся инструкциями для программы просмотра; согласно этим инструкциям программа располагает текст на экране, включает в него рисунки, хранящиеся в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Internet. Таким образом, файл на языке HTML приобретает облик WWW-документа только тогда, когда он интерпретируется программой просмотра.

Как в www задается местонахождение документа?

Виртуальный мир WWW населен миллионами документов, обитающих на сотнях тысяч серверов. Задача WWW-путешественника - найти среди них тот, который содержит необходимую информацию, и прочитать его при помощи программы просмотра, - а для этого программа просмотра должна знать точное местонахождение данного документа. Оно однозначно определяется адресом сервера, номером порта, именем директории и именем файла с этим документом. Для успешной загрузки требуемого документа с сервера программе просмотра также нужно указать протокол, используемый этим сервером. Это связано с тем, что кроме WWW-серверов, программы просмотра могут обращаться к серверам пересылки файлов (так называемым FTP-серверам), серверам телеконференций, серверам электронной почты и некоторым другим типам серверов. Комбинация протокола, адреса сервера, номера порта, имени директории и имени файла получила название Uniform Resource Locator, или сокращенно URL. Синтаксис URL показан ниже:

протокол://адрес_сервера:номер_порта/имя_директории/имя_файла

Пример:

Вопросы к теме

• Что такое internet?

• Что такое www-сервер?

• С помощью чего ссылаются друг на друга гипертекстовые документы?

• Что такое протокол?

• Из каких элементов состоит адрес документа в internet?

• Для чего был придуман internet и в каком году?

• Как расшифровывается и переводится URL?

Лекция №2 (4 часа)

Тема: Язык HTML, Основные теги форматирования документов

• Основные сведения о HTML

• Понятие тега, виды тегов

• Структура HTML документа

• Теги HEAD и BODY

• Управление фоном документа

• Способы задания цветовых параметров

• Форматирование текста страницы

• Вопросы к теме

• Практическое задание

Основные сведения о HTML

Самое короткое и точное истолкование назначения языка HTML заключается в дословном переводе его названия: язык гипертекстовой разметки (HyperText Markup Language). Это не язык программирования и не коммуникативное средство, а набор инструкций или предписаний, которые задают способ представления текста и импортированных объектов на экране монитора. Элементы языка принято называть дескрипторами или тегами, от английского tag.

Язык HTML был разработан Тимом Бернерс-Ли во время его работы в CERN и распространен браузером Mosaic, разработанным в NCSA. В 1990-х годах он добился особенных успехов благодаря быстрому росту Web. В это время HTML был расширен и дополнен.

Понятие тега, виды тегов

Тэг – специальная текстовая метка, которая опознаётся браузером и используются им для отображения содержимого файла на экране компьютера. С помощью этих меток можно выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы.

Тег HTML состоит из следующих друг за другом в определенном порядке элементов:

• левой угловой скобки < (такого же, как "меньше чем" символа)

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

• имени тега, например TITLE или PRE

• список атрибутов (параметров). Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER

• правой угловой скобки > (такой же, как символа "больше чем").

Примеры:

<BR>

<H1 ALIGN=LEFT> текст </H1>

Большинство, но не все теги HTML спарены так, что за открывающим тегом следует соответствующий закрывающий тег, а между ними содержится текст или другие теги, например:

<H1> текст </H1>

<H1> - открывающий тэг

</H1> - закрывающий тэг

Текст который располагается между этими тэгами будет в несколько раз крупнее и жирнее обычного.

В таких случаях два тега и часть документа, отделенная ими, образуют блок, называемый HTML элементом. Некоторые теги, например <HR>, не имеют закрывающего тэга.

Для каждого тега определяется множество возможных атрибутов. Большинство тегов допускает один или несколько атрибутов, однако атрибутов может и совсем не быть. Спецификация атрибута состоит из расположенных в следующем порядке:

• имени атрибута, например WIDTH

• знак равенства (=)

• значения атрибута, которое задается строкой символов, например, "80".

Пример:

<TABLE BORDER=0 WIDTH=80> </TABLE>

Тэги HTML не зависят от регистра; они могут быть записаны прописными или строчными буквами. Допускается смешение регистров в пределах одного тэга.

Структура HTML документа

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.0

После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тэга HTML. Необходимо отметить, что любой HTML-документ открывается тэгом HTML и им же закрывается.

Затем, между тэгами <HTML> и </HTML> следует разместить заголовок и тело документа.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML>     <HEAD>     <TITLE>Заголовок документа</TITLE>     </HEAD> <BODY> Текст документа </BODY> </HTML>

Документ состоит из двух основных блоков - "заголовка" и "тела документа". Заголовок определяется с помощью тэга HEAD, а тело - BODY.

Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия (с помощью тэга TITLE).

Тег HEAD

Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе. (TITLE,BASE,STYLE,LINK,META).

Этот тэг (так же как HTMLи BODY) должен быть только один для всего документа.

Тэг BODY

Указывает начало и конец тела HTML-документа. Между начальным и конечным тэгами содержится текст документа, изображения и таблицы.

Атрибуты тега BODY