Для получения любого другого оттенка цвета можно применить различные комбинации RGB-значений, записанные в шестнадцатеричном формате. На прилагаемом диске находится файл Таблица цветов.htm в котором приведены 216 цветов, хорошо отображающихся браузерами на мониторах в 256-цветном режиме, а так же названия этих цветов.

6. Выравнивание текста

Для выравнивания текста используется атрибут ALIGN, который может принимать значения: Center – выровнять по центру; Left – выровнять по левому краю; Right- выровнять по правому краю; Justify – выровнять по обоим краям (по ширине).

        Необходимо отметить, что данный атрибут применяется не с тегом FRONT, а с тегами форматирования и группировки текста такими как:

,

-

 и др.

ALGIN = Center> Заголовок1

ALGIN = Left> Подзаголовок1

ALGIN = Right>Параграф№1.

ALGIN =Justify> Параграф№2.

ALGIN =Left> Параграф№3.

        Для отделения блока HTML-документа от остальной части документа или объединения несколько параграфов в группу и придания им общих свойств используется контейнер

…

. Находящиеся между начальным и конечным тегами текст оформляется как отдельный параграф.

Параграф№1.

Параграф№2.

Параграф№3.

Параграф№4.

---

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

Форматирование

1. Физические стили

2. Логические стили

3. Линии в HTML

4. Цвет и выравнивание линий

5. Бегущая строка

6. &-последовательности

1. Физические стили

        Под физическим стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Для управления начертанием символов, т.е. для установки параметров Жирный (Bold), Курсив (Italic) и Подчеркнутый (Underlining), используются соответственно теги …, … и …. Эти теги требуют закрытия и могут использоваться, перекрывая действие друг друга.

        Несколько особняком стоит тег …. Размещенный в этом теге текст будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символов.

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

… Перечеркнутый текст

… Увеличенный текст

… Уменьшенный текст

_… Подстрочные символы

^… Надстрочные символы

Жирный

Жирный-Курсив

Жирный-Курсив-Подчеркнутый

Перечеркнутый текст

Увеличенный текст

Уменьшенный текст

SO₄^2-+Ba²⁺

=BaSO₄

2. Логические стили

Часто бывает удобно задать один или несколько атрибутов определенных участков текста не прямо, а косвенно. Для этого в документе всем участкам текста, которые предполагается форматировать одинаковым образом, присваивается определенный логический стиль, для которого, в свою очередь, уже и задаются конкретные физические атрибуты. При использовании логических стилей автор документа не может зн6ать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.

… - От английского emphasis – акцент.

… - От английского strong emphasis – сильный                                 акцент.

… - Рекомендуется использовать для фрагментов исходных текстов.

… - От английского sample – образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами.

… - От английского keyboard – клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.

… - От английского variable – переменная. Рекомендуется использовать для написания имен переменных.

EM - От английского emphasis – акцент.

STRONG - От английского strong emphasis – сильный                                 акцент.

CODE – От английского code – код.

SAMP - От английского sample – образец.

KBD - От английского keyboard – клавиатура.

VAR - От английского variable – переменная.

3. Линии в HTML

        Непарный тег

---

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

---

        Атрибуты SIZE и WIDTH не являются обязательными. При их отсутствии браузер определяет толщину линии в 2 пикселя, а размах – 100 процентов от ширины своего окна.

---

---

---

---

---

---

4. Цвет и выравнивание линий

Для выравнивания линий и изменения цвета совместно с тегом HR используются атрибуты COLOR и ALIGN.

---

ALIGN – определяет выравнивание горизонтальной линии.

        Параметр может принимать следующие значения:

left – выравнивание по левому краю документа.

right – выравнивание по правому краю документа.

center -  выравнивание по центру документа 9 используется по умолчанию).

COLOR – определяет цвет линии. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

5. Бегущая строка

Для формирования бегущей строки в HTML – документах используется тег …. < / MARQUEE>. Текст, находящийся внутри этого контейнера, перемещается по области прокрутки в соответствии с правилами, установленными атрибутами тега.

Движущаяся строка текста

Основные атрибуты:

DIRECTION - задает направление перемещения: left - справа налево; right -   cлева направо (по умолчанию); up - снизу вверх; down - сверху вниз.

BEHAVIOR - определяет вид перемещения: slide - текст въезжает в документ и останавливается; scroll – текст перемещается подобно бегущей строке; alternate - текст перемещается между границами отведенной области.

WIDTH и HEGHT - ширина и высота области прокрутки в пикселях.

HSPACE и VSPACE - количество свободного пространства (в пикселях) по горизонтали и вертикали вокруг области прокрутки.

LOOP - число повторений перемещения. По умолчанию бесконечно.

SCROLLAMOUNT – определяет число пикселей для перемещения за один такт.

SCROLLDELAY - определяет такт в миллисекундах.

BGCOLOR - задает цвет фона области прокрутки.

6. &-последовательности

В HTML имеется возможность вывести на экран специальные или зарезервированные символы, это делается с помощью &-последовательностей (их еще называют символьными объектами или   эскейп-последовательностями). Браузер показывает на экране символ «<», когда встречается в тексте последовательность < (по первым буквам английских слов less than- меньше, чем ). Знак «>» кодируется последовательностью > (по первым буквам английских слов greater than – больше, чем). Символ «&» (амперсант) кодируется последовательностью &. Двойные кавычки ('') кодируются последовательностью ". Очень часто используется неразрывный пробел-  .

&-последовательности - символьные объекты или эскейп- последовательности - кодовая комбинация, позволяющая вывести на экран специальные символы.

Ниже приведено несколько часто используемых &-последовательностей

&larr	Стрелка влево	¢	Цент
&uarr	Стрелка вверх	£	Фунт стерлингов
&rarr	Стрелка вправо	¤	Денежная единица
&darr	Стрелка вниз	¥	Иена или юань
&harr	Стрелка влево-вправо	¦	Разорванная вертикальная черта
¡	Перевернутый восклицательный знак	§	параграф

Контрольные вопросы

1. Верно ли утверждение: шрифт стандартного заголовка H4 больше, чем шрифт заголовка H2?
2. Какой тег используется для начала новой строки?
3. Перечислить атрибуты тега FONT, позволяющие изменить оформление шрифта текста.
4. С помощью какого тега задается бегущая строка?
5. Что можно изменить с помощью атрибута SIZE тега HR?

---

Лекция № 5 (2 ч.)

Списки

1. Маркированные и нумерованные списки

2. Списки определений

1. Маркированные и нумерованные списки

На языке HTML можно создавать списки различных типов. В каждом списке должен быть один или несколько элементов списков.

Тег

…

 (Unsorted List) создает неупорядоченный (маркированный список). Между  начальным и конечным тегами должны присутствовать один или несколько парных тегов

, обозначающих отдельные пункты списка.

Необязательный атрибут TYPE определяет стиль маркера пунктов. Он может иметь значения: disc, circle или. Браузеры представляют в виде небольшого заполненного кружка, “circle” - в виде окружности, “square” а в виде небольшого квадрата. По-умолчанию используется “disc”.

• …Первая строка списка…
• …Вторая строка списка…

 Тег

…

 (Ordered List) создает нумерованный список. Между начальным и конечным тегами должны присутствовать  один или  несколько элементов

.

1. …Первая строка списка…
2. …Вторая строка списка…

Атрибут TYPE – определяет стиль нумерации пунктов.

Может иметь значения:

• “А” – заглавные буквы А, В, С…;
• “а” – строчные буквы a, b, c…;
• “I” – большие римские числа I, II, III…;
• “i”  - маленькие римские числа i, ii, iii…;
• “1” – арабские числа 1, 2, 3…

По умолчанию используется TYPE=”1”.

2. Списки определений

Списки определений создаются с помощью тега

…

. Они отличаются от других типов списков тем, что элементы состоят из двух частей: термина и определения.

Термин обозначается с помощью элемента

 и может содержать слово, значение которого раскрывается в определении.

Определение указывается с помощью элемента

 и содержит расшифровку термина.

Одним из применений списков определений может быть составление терминологических словарей, другим применением, может быть разметка диалогов, где каждый элемент DT означает говорящего, а в каждом элементе  DD содержатся его слова.

Термин 1

Определение 1

Термин 2

Определение 2

Термин 3

Определение 3

…

Иногда бывает очень полезно совмещать различные типы списков. При этом Вложенные списки должны быть различных типов.

Например, внутри списка определений может находиться нумерованный или ненумерованный список.

Контрольные вопросы

1. С помощью какого тега создаются нумерованные списки?
2. С помощью какого тега создаются маркированные списки?
3. Что определяет атрибут TYPE?
4. Как создать список определений?

---

Лекция № 6 (2 ч.)

1. Структура Web-сайта

2. Главная страница сайта

3. Создание таблиц

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

1. Структура Web-сайта

Web-сайт – это совокупность связанных между собой HTML-документов (Web-страниц), объединенных единой тематикой.

Очень важное место при разработке сайта занимает создание его структуры. Желательно разделить сайт на несколько отдельных страниц, расположенных по «древовидной» структуре, т. е. с каждой страницы имеется выход на несколько подчиненных страниц, которые в свою очередь также могут иметь подчиненные страницы. На таком сайте посетитель может сразу найти интересующее его направление и перейти к интересующей его информации.

2. Главная страница сайта

Главная или, как ее еще называют, домашняя страница – лицо сайта. От того, как она построена, зависит то, сколько будет посетителей на Вашем сайте.

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

---

Таблицы

3. Создание таблиц

В HTML любая таблица состоит из строк, разделённых на ячейки. Минимальное их количество – одна строка, содержащая одну ячейку. Максимальное количество не ограниченно.

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

Синтаксис этих тегов:

 - главный тег, применяющейся для описания начала и конца таблицы.

 - тег, описывающий начало и конец строки таблицы.

 - тег, описывающий начало и конец ячейки.

Структура HTML – таблицы выглядят так:

Ячейка 1.1

 Ячейка 1.2

 Ячейка 1.3

Ячейка 2.1

 Ячейка 2.2

 Ячейка 2.3

Контрольные вопросы

1. Нарисуйте структуру Web-сайта.
2. Что располагается на главной странице сайта?

---

Лекция № 7 (2 ч.)

Таблицы

1. Оформление таблиц

2. Сложные таблицы

1. Оформление таблиц

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

Тег

 позволяет использовать следующие основные атрибуты:

BORDER – определяет  ширину внешней рамки таблицы (в пикселях).

CELLPADDING – определяет расстояние (в пикселях) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.

CELLSPACING – определяет расстояние (в пикселях) между границами соседних ячеек.

ALIGN – определяет способ горизонтального выравнивания таблицы. Возможные значения: left – по левому краю, center – по центру, right – по правому краю. Значение по умолчанию – left.

WIDTH и HEIGHT – определяет ширину и высоту таблицы, значение задается либо в пикселях, либо в процентном отношении к ширине окна браузера.

BGCOLOR – определяет цвет фона ячеек таблицы. Он задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.

 – специальный парный тег для описания заголовка таблицы. Атрибут этого тега ALIGN определяет место размещения заголовка. Его значение top помещает заголовок над таблицей, а bottom – под таблицей.

Оформленная таблица

Ячейка1.1	Ячейка 1.2
Ячейка2.1	Ячейка 2.2
Ячейка3.1	Ячейка 3.2

При использовании темного фона таблицы, можно изменить цвет текста в ячейках, например:

Текст…      .

Необходимо иметь в виду, что тег … должен находиться внутри тегов изменяемой ячейки таблицы.

2. Сложные таблицы

Размещая внутри ячеек одной таблицы теги других таблиц или объединяя соседние ячейки, можно создавать сложные таблицы.

Кроме тега < TD> (Table Data) для создания ячейки можно применять тег

(Table Head), который также создает ячейку, но определяет ее как заголовок с увеличенным шрифтом. Для оформления содержимого ячеек можно использовать  следующие атрибуты: ALIGN, WIDTH, HEIGHT, BGCOLOR, которые определяют способ горизонтального выравнивания содержимого ячейки, её ширину, высоту и цвет соответственно. VALIGN - определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top - по верхнему краю, bottom - по нижнему краю, middle - по центру. COLSPAN - определяет количество столбцов, на которые простирается данная ячейка (ширина ячейки в столбцах). По умолчанию имеет значение 1.   ROWSPAN - определяет количество рядов, на которые простирается данная ячейка (высота ячейки в строках). По умолчанию имеет значение 1. Высокая ячейка Ячейка Ячейка Ячейка Ячейка Широкая ячейка Ячейка Ячейка Ячейка Ячейка Иногда удобно использовать атрибут NOWRAP, который блокирует автоматический перенос слов в пределах текущей ячейки (текст в ячейке помещается в одну строку). Контрольные вопросы Перечислить теги для описания таблицы. Какие основные атрибуты позволяют использовать тег ? Для чего необходим атрибут ROWSPAN? Для чего необходим атрибут COLSPAN? Лекция № 8 (2 ч) Графика 1. Изображения в HTML 2. Изменение параметров изображений 3. Выравнивание изображений 4. Изображение в качестве гиперссылки 1. Изображения в HTML Для размещения изображений на Web-страницах используются различные графические форматы, наиболее часто применяются - JPEG и GIF. JPEG используется для фотоизображений и полутоновой графики, живописи, градиентов и изображений с множеством мелких разноцветных деталей. GIF используется для рисованных изображений, векторной графики, картинок без полутонов, градиентов (переходов от цвета к цвету) и большого количества мелких деталей разного цвета. Помимо того, формат GIF используется для сохранения анимированных картинок и изображений с прозрачными частями. Для размещения изображений существует специальный тег , имеющий обязательный параметр SRC= «адрес». IMG – тег изображения SRC= «адрес» - атрибут источника атрибут1, атрибут2… - атрибуты изображения В качестве параметра (адрес) может использоваться несколько типов аргументов: имя файла с изображением (для изображений, находящихся в текущем каталоге) адрес файла с изображением (для изображений, находящихся в других каталогах) URL изображения (для изображений, находящихся в сети Интернет или на вашем сервере) 2. Изменение параметров изображений Для изменения параметров изображения на Web-странице используется дополнительные атрибуты: HEIGHT и WIDTH – определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (иногда при этом заметно теряется качество). HSPACE и VSPACE – определяют количество свободного пространства (в пикселях) по горизонтали и вертикали вокруг изображения. BORDER – определяет ширину рамки вокруг изображения в пикселях. ALT – определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением. Кроме того, текст, указанный в параметре ALT, будет отображаться во всплывающей подсказке, появляющейся  при наведении указателя мыши на изображение. 3. Выравнивание изображений Для выравнивания изображений и определения их положения относительно текста применяется атрибут ALIGN. < IMG SRC=”адрес” ALIGN=…> Он может принимать следующие значения: left или right –выравнивает изображение по левому или правому краю документа. top - выравнивает верхнюю линию текущей текстовой строки относительно верхней кромки изображения. middle - выравнивает базовую (нижнюю) линию текущей текстовой строки с вертикальным центром изображения. bottom - выравнивает базовую линию текстовой строки относительно нижней кромки изображения. Кроме этого для центрирования изображения по горизонтали всего HTML – документа используется тег . 4. Изображение в качестве гиперссылки Изображения можно использовать в качестве гиперссылок. Если тег  находится внутри контейнера  … , изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке. “File1.htm” – адрес перехода  -  тег изображения Кроме того, довольно распространен случай, когда, вместо адреса перехода используют другое изображение. Например, на Web-странице находится маленький рисунок, при активизации которого в окне браузера открывается большой  рисунок. Если в теге указать атрибут TARGET=”_blank”, документ, на который указывает гиперссылка, будет открыт в новом окне. Образец сертификата Контрольные вопросы Какие графические форматы наиболее часто используются для отображения графики на Web-страницах? Какой атрибут тега позволяет изменить толщину рамки по периметру  изображения? Перечислите какие значения может принимать атрибут ALIGN для выравнивания изображений и определения их положения относительно текста. С помощью какого атрибута создается всплывающая подсказка? Лекция № 9 (2 ч) Использование звука и видео 1. Включение звука в Web-страницу 2. Включение видео в Web-страницу 1. Включение звука в Web-страницу Настала очередь и для звука. Включить звук даже проще, чем графику. Звуковой файл включается в Web-страницу путем указания его имени в теге . Не забудьте про закрывающий тег. После данного тега следует привести текст, характеризующий содержание звукового файла. Совсем не плохо указать его размер, чтобы посетитель мог решить, стоит ли его загружать. Тип данного файла wav. (имеется в виду расширение файла). Приведем примеры: Пример 1: Воспроизведем рычание тигра. Имя звукового файла: tiger.wav Его размер: 29,740 bytes Текст ссылки звукового файла: Рычание тигра. Запись в блокноте: Рычание тигра. (29,740 bytes) На экране: Рычание тигра. (29,740bytes) Для прослушивания файла необходимо щелкнуть мышью по тексту ссылки. Автоматически загружается универсальный проигрыватель, и воспроизводиться звук. Пример 2: Использование графики. Можно использовать графику с пояснительным текстом для прослушивания файла. Запись в блокноте: Рычание тигра (29,740 bytes)  2. Включение видео в Web-страницу У большинства из нас нет места на диске или аппаратуры, необходимых для включения видеофайла в свою Web-страницу. Однако, если вы располагаете такими возможностями, лучшего способа приветствия посетителей просто нет. Видеофайл включается в HTML-документ точно так же, как звуковой файл. Единственное различие, что теперь тип файла - MOV или AVI. Приведем  пример: Мы рассмотрим только, как выглядит запись в блокноте. Пример 1: Вид горной долины.(1,600 bytes) Так же можно использовать графику с пояснительным текстом. Пример 2: Вид горной долины.(1,600 bytes) Контрольные вопросы Какой формат имеют звуковые файлы? В каком формате сохраняются видео файлы? Приведите пример подключения звукового файла? Лекция № 10 Гиперссылки 1. Что такое гипертекст? 2. Размещение сайта с помощью провайдера 3. Гиперссылки на почтовый адрес 4. Переходы внутри документа 1. Что такое гипертекст? Гипертекст – способ структурирования документов путем размещения ссылок внутри одного документа или между документами. В отличие от обыкновенного текста гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Системы помощи многих популярных программных продуктов устроены именно по гипертекстовому принципу. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент – гиперссылку текущего документа – происходит переход к некоторому заранее назначенному документу или фрагменту документа. В HTML переход по гиперссылке задается с помощью тега вида: ссылка ”[адрес]” – адрес перехода; ссылка -  текст, активизация которого вызывает переход. В качестве параметра [адреса перехода] может использоваться несколько типов аргументов: адрес документа адрес сайта сети Интернет или внешнего сервера адрес электронной почты адрес перехода к определенному месту внутри документа. 2. Гиперссылки на документ и сайты Интернет Для перехода от одного документа к другому в качестве адреса перехода задается путь к файлу: Перейти к документу1. Причем, не обязательно это должен быть HTML-документ (например, это могут быть документы Microsoft Office или др.) Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к документу1, при нажатии на который в текущее окно будет загружен файл Документ1.htm. Если файл, на который указывает ссылка, и файл с самой ссылкой расположены в разных директориях, то создается относительная ссылка, в которой прописывается часть пути между директорией с исходным документом и файлом-назначением. Перейти к документу1. Чтобы создать ссылку на файл во внешнем каталоге относительно текущего, т. е. расположенном уровнем выше, используется горизонтальное двоеточие “../пример.htm”. Если необходимо сделать ссылку на какой-либо сайт сети Интернет, внешний сервер или на какой-либо другой ресурс, то в качестве адреса перехода используется URL-строка: [протокол][адрес][порт][путь][имя файла]. 3. Гиперссылки на почтовый адрес Существует возможность использовать гиперссылку для вызова почтовой программы. Для этого используется ссылка вида: Существует возможность использовать гиперссылку для вызова почтовой программы. Для этого используются ссылка вида: mailto:user@mail.ru''>Послать письмо  ,   где: user@mail.ru - адрес электронной почты. Если пользователь совершит переход по такой ссылке, то у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To  (Кому) окна почтовой программы будет указано user@mail.ru. Пользователю предоставляется возможность текст письма и отправить его по указанному адресу. 4. Переходы внутри документа         При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри документа. Для этого необходимо создать в документе некоторую опорную точку или анкер. Это тег специального вида, в котором используется атрибут NAME. Допустим , что необходимо осуществить переход к слову  ''Параграф 1''. Прежде всего необходимо создать анкер, находящийся в месте расположения требуемого слова и  «охватывающего» его: Параграф 1   где : Метка 1- имя анкера. Слово “Параграф 1”при этом не как не будет выделен в тексте документа браузером. Затем необходимо определить ссылку для перехода на этот анкер: < A HREF=”#Метка 1”>Переход к слову – Параграф 1 . При активизации этой ссылки браузер переместит изображение страницы так, чтобы текст «Анкер1» оказался в верней видимой строке окна. Контрольные вопросы Что такое гипертекст? Запишите внешний вид тега для создания гиперссылки. Верно ли записан тег ссылки Переход к концу документа? Лекция № 10 (2 ч) Фреймы 1. Понятие и назначение фреймов 2. Правила записи тега FRAMESET 3. Параметры фреймов 1. Понятие и назначение фреймов Язык HTML позволяет разбить окно программы браузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются фреймами. Чаще всего фреймы используются для облегчения навигации по сайту, создания навигационного меню. Для создания фреймов используют особый документ HTML, структура которого отличается от обычной. Такой документ не содержит раздела «тела» документа (тега ) и не содержит какого либо текста вообще. Вместо этого он содержит теги описания фреймов, заключенные между парным тегом …. В этом описании указывают размеры и порядок размещения областей в окне браузера, а также задают документы, которые должны загружаться в каждую из этих областей. Описание фреймов 2. Правила записи тега FRAMESET Тег … (Frame Set) – определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице. Он открывает и закрывает список фреймов, определяемых с помощью тега FRAME. Между начальным и конечным тегами могут находиться другие теги FRAMESET, то есть FRAMESET поддерживает вложенные конструкции фреймов. При использовании атрибута COLS= окно делится на области вертикальными линиями, а при использовании атрибута ROWS= - горизонтальными. Если заданы оба эти атрибута, в окне создаются и вертикальные и горизонтальные области. Значения этих атрибутов определяют высоту (или ширину) областей окна. Параметры для каждого столбца (строки) задают через запятую в пикселях или в процентах (с символом “%”). В качестве последнего параметра можно использовать символ “звездочка” (*) . Под такой фрейм выделяется все остающееся свободное пространство. Дополнительные атрибуты: FRAMEBORDER – определяет наличие рамок у содержащихся внутри FRAMESET фреймов. Возможные значения: yes или 1 – отображать рамки; no или 0 – не отображать рамки; FRAMESPACING – определяет расстояние между фреймами в пикселях. Данный параметр может применятся и для создания фреймов без рамок. 3. Параметры фреймов Тег  определяет фрейм и его свойства внутри FRAMESET – структуры. Атрибуты: SRC - указывает адрес (URL) HTML–файла, отображаемого в данном фрейме. MARGINWIDTH - определяет ширину (в пикселях) левого и правого полей фрейма. MARGINHEIGHT - определяет ширину (в пикселях) верхнего и нижнего полей фрейма. SCROLLING - определяет наличие линеек прокрутки содержимого фрейма. Значения: yes - отображать; no - не отображать; auto - отображать при необходимости. NORESIZE - не позволяет изменять размеры фрейма. Данный параметр являет флагом и не требует указания значения. NAME - определяет имя данного фрейма, которое может в дальнейшем использоваться для ссылки на него из других документов. FREMESPACING=”15”>                                     Контрольные вопросы Для чего нужны фреймы? Какие атрибуты тега позволяют создавать вертикальные и горизонтальные фреймы? С помощью какого атрибута тега можно задать расстояние между фреймами в пикселях? Лекция № 11, 12 (4 ч.) Формы 1. Тег описания формы 2. Однострочные текстовые поля 3. Флажки и переключатели 4. Кнопки 5. Многострочные поля и  меню Формы являются наиболее популярным средством для интерактивного взаимодействия с пользователем. Они могут содержать такие элементы управления как кнопки, переключатели, поля для ввода текста и т. д. Эти элементы представляют возможность посетителю сайта ответить на предлагаемые вопросы и отправить результаты ответов на сервер или по электронной почте. 1. Тег описания формы Для описания формы служит тег …, который является контейнером для элементов управления. Он определяет: Макет формы (задается содержимым тега). Программу, которая будет обрабатывать заполненную и переданную форму. Метод отправки данных на сервер. Синтаксис этого тега: …содержимое формы… Атрибут ACTION задает агента для обработки формы. Например, значением может быть mailto: адрес (для отправки формы по электронной почте) или адрес обрабатывающей программы (для передачи формы в программу). Атрибут METHOD определяет метод HTTP, используемый для передачи данных формы. Возможные значения (обязательно в нижнем регистре) – “post” (для передачи по почте) и “get” (для передачи программе обработки). Например, если форма будет отправляться по электронной почте, необходимо указать: mailto:znanie_kov@mail.ru” METHOD= “post”> 2. Однострочные текстовые поля Содержимое формы задаётся  с помощью тегов управляющих элементов. Наиболее часто используется для этого тег >, атрибут TYPE которого определяет тип создаваемого элемента:   Для создания поля ввода под одну строку текста применяется атрибут TYPE= TEXT. Размер текстового поля можно устанавливать посредством атрибута SIZE (в символах). Необязательный атрибут VALUE задаёт строку, которая будет выведена в поле браузером. Атрибут NAME используется для присвоения данному полю имени, которое может применяться при отправке формы или доступа к полю из программ и таблиц стилей. Можно создать также текстовое поле пароля, для этого используется атрибут TYPE= PASSWORD. В данном случае вводимые символы отображаются  на экране в виде условных значков (звездочек), таких как * или ∙.  Делается это для того, что бы скрыть текст от любопытных глаз при вводе паролей с клавиатуры. 3. Флажки и переключатели Флажки - это переключатели вкл./выкл., которые могут переключатся  пользователем. Несколько флажков в форме могут иметь одно и то же имя управляющего элемента. Таким образом, например, флажки позволяют пользователям выбрать несколько значений для одного и того же свойства. Для создания флажков используется тег INPUT с атрибутом TYPE=”CHECKBOX”: Школа Техникум Институт Аспирантура Переключатели похожи на флажки за исключением того, что, если несколько переключателей используют одно и то же имя управляющего элемента, они являются взаимоисключающими: если один переключатель включен, другие обязательно выключены. Для создания переключателей используются тег INPUT с атрибутом TYPE=”RADIO”: Мужчина  Женщина Атрибут CHECKED позволяет заранее ”включать” тот флажок или переключать, в теге которого он расположен. 4. Кнопки В форме могут использоваться три типа кнопок: кнопки отправки - при активизации такой кнопки производится отправка формы; кнопки сброса- при активизации такой кнопки для всех управляющих элементов устанавливаются исходные значения; прочие кнопки - для таких кнопок действие по умолчанию не определено. Кнопка отправки позволяет отправить данные, введенные в форму, на соответствующий сервер (по адресу указанному в атрибуте ACTION тега ). Надпись на кнопке задается с помощью атрибута VALUE. Для создания кнопки отправки используется значение SUBMIT атрибута TYРE: Кнопка сброса позволяет вернуть все поля формы в исходное состояние, когда документ еще был только загружен в браузер. Вы можете выбрать для этой кнопки ту или иную надпись, воспользовавшись атрибутом VALUE. Кнопка сброса создается с использованием значение TYPE=RESET: Авторы могут создавать прочие кнопки с помощью контейнера …, который позволяет встраивать в кнопку картинки, таблицы и т.д. …вложенные теги… Атрибут TYPE может принимать значения  SUBMIT или RESET при создании кнопок отправки или очистки. 5. Многострочные поля и  меню Управляющий элемент для многострочного ввода текста создается тегом …. В этом теге можно заранее задать текст, который будет выведен, как исходное значение управляющего элемента, причем текст выводится с учётом пробелов, табуляторов и символа конца строки. </span></p><p class="c0"><span class="c2">Текст…        </span></p><p class="c0"><span class="c2"> ROWS – количество строк текста, видимых на экране COLS – ширина создаваемого текстового поля в символах Открывающееся меню типа «выбор одного пункта из многих» создаётся тегом …. Тег SELECT должен включать в себя один или несколько тегов , описывающих отдельные пункты меню. Использование в теге  атрибута SELECTED, позволяет заранее «выбрать» пункт меню. Excel Word Power Point Access Многострочное меню типа «несколько пунктов из многих» создаётся аналогично, разница состоит в том, что в теге  добавляются атрибуты MULTIPLE и SIZE: SIZE  - количество строк меню, видимых на экране. Контрольные вопросы Для чего служат формы? Какое значение должен иметь атрибут TYPE тега для описания однострочного текстового поля? Какие теги необходимы для создания кнопок? Лекция № 13 (2 ч.) Скрипты 1. Использование сценариев в динамических WEB-страницах 2. Создание пользовательских функций 3. Добавление и изменение текста Web-страницы c помощью сценариев 4. Функция write 5. Использование стандартных диалоговых окон 6. Работа с данными в сценариях JavaScript 1. Использование сценариев в динамических WEB-страницах Язык JavaScript используется для написания сценариев. JavaScript относится к интерпретируемым языкам программирования. В качестве интерпретатора выступает обозреватель Internet Explorer (или Netscape Navigator). Поэтому сценарии на JavaScript привязаны к HTML-коду Web-страницы и могут выполняться только при участии обозревателя. В синтаксисе JavaScript используются подходы объектно-ориентированного программирования. Web-страница представляет собой набор объектов. Объект высшего уровня представлен окном обозревателя. Окно содержит либо отдельный документ, либо структуру рамок, в каждой из которых содержится свой документ. Документы могут содержать абзацы текста, таблицы, рисунки, формы, причем эти элементы могут быть вложенными друг в друга. Работа с объектом всегда начинается с создания его экземпляра. Для управления объектом используются его атрибуты, представленные свойствами, методами и событиями объекта. Свойства определяют вид и особенности (поведение) объекта. К свойствам относятся такие атрибуты, как ширина и высота рамки элемента в окне обозревателя, цвет, текст и пр. Все свойства могут устанавливаться и изменяться динамически во время просмотра Web-страницы с помощью сценариев JavaScript. Методы представляют собой встроенные функции, предназначенные для выполнения объектом определенных задач. События устанавливают взаимосвязь между действием пользователя над объектом и внешней функцией обработки события. Например, щелчок мышью по кнопке вызывает  событие ONCLICK  и, соответственно, функцию, назначенную этому событию. С помощью сценариев на JavaScript статические Web-страницы превращаются в интерактивные средства общения разработчика с посетителями Web-страниц. Интерактивность Web-страниц состоит в том, что в ответ на какое-либо действие пользователя происходит изменение внешнего вида страницы, отображается дополнительная информация или выполняются другие процессы, облегчающие пользователю работу с документом. Действия пользователей, в ответ на которые происходит изменение страницы, называются событиями. Чтобы назначить событию вызов сценария на выполнение, используются атрибуты событий элементов Web-страницы. Примеры некоторых атрибутов событий, которым можно назначать выполнение сценариев: ONLICK – щелчок мышью на элементе ONDBCLICK – двойной щелчок на элементе ONMOUSEOVER – пользователь наводит указатель мыши на элемент ONMOUSEOUT - пользователь убирает указатель мыши на элемент ONSELECT – пользователь выделяет текст элемента ONCHANGE – пользователь изменяет текст элемента ONRESET – пользователь щелкнул в форме на кнопке Сбросить ONLOAD – Web-страница загружается в окно обозревателя или в рамку. Чтобы управлять объектами Web-страницы с помощью сценариев, необходимо иметь возможность обращаться к каждому по имени. Для любого элемента Web-страницы можно задать уникальное имя, присвоив его атрибуту ID и/или  NAME. Объектам верхнего уровня автоматически присваиваются стандартные имена: Window - окно Document – документ в окне или рамке Form – форма. Обращаясь к объекту, указывается путь в иерархии. При этом используется следующий синтаксис: window. Имена объектов в иерархии разделяются точками. После имени объекта указывается имя атрибута (свойства или события), значение которого нужно изменить. 2. Создание пользовательских функций В сценариях часто бывает необходимо выполнить не одну, а много команд. В таком случае удобно создавать и применять пользовательские функции. Пользовательские функции создаются с помощью ключевого слова function следующим образом: Имя функции должно быть уникальным для данной Web-страницы. Список аргументов может быть пустым. Код функции заключается в фигурные скобки {…}, а каждая строка кода должна завершаться символом  « ; ». После того как функция была определена, ее можно вызвать на выполнение в коде сценария следующим образом: ИмяФункции (список аргументов) Число аргументов в вызове функции должно соответствовать числу аргументов в определении функции. Чаще всего функции используются для обработки событий, выполняемых над документом HTML или его элементами. Функция, назначенная атрибуту события, называется функцией обработки события. 3. Добавление и изменение текста Web-страницы c помощью сценариев Web-страницу можно снабдить сценариями, которые дадут возможность пользователю изменять текст документа. С помощью функций можно изменять или возвращать содержимое абзацев Web-страниц. Для этого используются атрибуты innerText и innerHTML. Например, два следующих абзаца на Web-странице будут выглядеть совершенно одинаково: Текст абзаца Атрибут innerText содержит весь текст абзаца. Атрибут innerHTML отличается тем, что содержит не только текст, но и другие теги HTML. Пример. Ввод текста на Web-страницу Пример. Всплывающие списки гиперссылок Глава 1 Глава 2 Глава 3 4. Функция write Функция write языка JavaScript используется для динамического ввода текста и тегов HTML в окно обозревателя. Синтаксис функции: document.write(" текст ") Ключевое слово document соответствует текущему окну обозревателя. Если текст вводится в определенную рамку (фрейм) или в другое окно обозревателя, то перед словом document необходимо указать имя рамки или окна. Аргументом функции может быть строка текста, число или вызов функции JavaScript (стандартной или пользовательской), возвращающей текстовое или числовое значение. Каждая следующая функция write вводит текст, вслед за текстом, добавленным предыдущей функцией. Чтобы создать новый абзац, используйте в строке текста теги HTML: document.write(" Первый абзац ") document.write(" Второй абзац ") или одну команду: document.write(" Первый абзац Второй абзац ") В строке функции write можно использовать любые теги как для форматирования текста, так и для создания таблиц, форм, списков и других элементов Web-страницы. Пример 1 Пример 2 Пример 3 5. Использование стандартных диалоговых окон JavaScript  предоставляет много средств для организации диалога между создателем и посетителями Web-страниц. Наиболее эффективны в этом плане диалоговые окна, с помощью которых можно как сообщить информацию, так и попросить подтверждения действия или задать вопрос посетителю. В JavaScript используются три встроенных диалоговых окна. alert ('сообщение') – открывает диалоговое окно с текстом сообщения и единственной кнопкой ОК.  Это диалоговое окно применяется для показа предупреждений или информационных сообщений, не требующих от пользователя принятия каких-либо решений. confirm ('сообщение') – открывает диалоговое окно с текстом сообщения и двумя кнопками – ОК и Cancel. В зависимости от выбора кнопки функция confirm возвращает значение true (OK) или false (Cancel). prompt ('сообщение', 'текст по умолчанию') – открывает окно для ввода данных пользователем. Кроме кнопок ОК и Cancel данное окно содержит текстовое поле ввода. Чтобы оставить текстовое поле пустым, введите во втором аргументе пустую строку – " ". Пример 1   Основное назначение форм состоит в сборе информации от пользователей и передачи этих данных на сервер разработчика Web-страницы. Кнопка Сброс вызывает для формы метод reset(), который восстанавливает поля формы в том виде, в каком они были установлены по умолчанию. 6. Работа с данными в сценариях JavaScript Переменные в сценариях создаются для последующего использования в вычислениях и вывода результатов в окне обозревателя, диалоговом окне или для подачи запроса формы. Выбор и передача данных с помощью элементов управления формы Элементы управления форм (текстовое поле ввода, поле редактора, флажок, переключатель, список), с помощью которых можно вводить данные, называются полями формы. Общим для всех полей является то, что они могут хранить данные, вводимые или изменяемые пользователями. С помощью методов формы можно автоматически извлечь данные из всех полей и передать их на сервер для программной обработки. Пример. Белый Красный Желтый Зеленый Контрольные вопросы Верно ли утверждение: «JavaScript» язык программирования? С помощью какого тега выполняются сценарии? Какая функция используется для динамического ввода текста и тегов HTML в окно обозревателя? Лекция № Размещение Web-сайта в сети Интернет 1. Система размещения сайта в сети Интернет 2. Размещение сайта с помощью провайдера 3. Тег МЕТА для сообщения информации о сайте 1. Система размещения сайта в сети Интернет Web-страницы располагаются на серверах, подключенных к Internet и выполняющих серверные приложения. Для того, чтобы  Ваша страница попала на Internet-сервер, необходимо выполнить процедуру ее размещения, после этого она станет доступна любому пользователю Internet. Вы можете разместить страницу на серверах, которые предоставляют такую услугу на коммерческой основе. Существует также большое количество серверов, которые обеспечивают бесплатное размещение. Обычно для процедуры размещения используется FTP протокол. Размещение может производиться как с помощью средств провайдера, предоставляющего сервер, так и с помощью специальных FTP-клиентов, входящих в состав HTML редакторов (FrontPage, HomeSite, HTML Workshop и др.) или поставляемых в составе файловых менеджеров (Far, TotalComander и др.) URL страницы формируется из наименования протокола, из имен доменов различных уровней и имени страницы: http://www.Chat.ru/Site1.htm. Сервер – компьютер, предоставляющий доступ к своим ресурсам. Хост (от англ. слова Host – гнездо) – компьютер, имеющий свой IP-адрес. Хост может предоставить свои ресурсы другим пользователям сети Интернет. Домен – группа адресов, объединенная по определенному признаку и имеющая краткое имя. Определите правильно написанные URL адреса. http://www.znanie.net http://www.znanie.net/index.htm www://http.znanie.net www://http.znanie.net/index.htm http://www/znanie/net 2. Размещение сайта с помощью провайдера Для размещения сайта с помощью средств провайдера обычно выполняются стандартные операции, примерно одинаковые у различных серверов. Рассмотрим в качестве примера размещение сайта на общедоступном бесплатном сервере www.narod.ru, принадлежащем поисковой машине www.yandex.ru. Чтобы получить место на сервере для размещения своих страниц, достаточно войти на yandex, перейти по ссылке Народ, занять имя сайта и пройти процесс регистрации, состоящий из трех шагов. После этого Вы получите e-mail адрес и доменное имя для размещения страницы. URL Вашей страницы и e-mail адреса будут выглядеть примерно так: http://www.dir-znan.narod.ru и dir-znan@narod.ru соответственно. Затем необходимо провести загрузку файлов на сервер, воспользовавшись средствами системы Мастерская на сайте Народ. Для этого необходимо использовать ссылки Загрузка файлов на сайт и Управление файлами раздела «Управление и редактирование», причем изображения и фоновые рисунки загружаются в предварительно созданную папку. Главную страницу сайта рекомендуется именовать index.htm. В этом случае при обращении к Вашему сайту, эта страница будет автоматически распознаваться как главная. Обращайте внимание на регистр! В Интернете ris1.gif и RIS1.GIF – разные файлы. 3. Тег МЕТА для сообщения информации о сайте Для того, что бы Ваш сайт стал известен наибольшему количеству пользователей сети Интернет, необходимо оповестить о сайте поисковые машины и каталоги. Поисковые машины представляют собой гигантские  хранилища информации, содержащие проиндексированные тексты сайтов. Эта информация постоянно собирается и обновляется с помощью специальных программ – «пауков», «bots» и т. п. Информация, необходимая для поисковых систем и каталогов, передается с помощью тегов , которые располагаются в заголовке HTML-документов. Делается это с помощью значений “KEYWORD” и “DESCRIPTION” атрибута NAME  тега META: Ключевые слова  считываются «пауком» и вносятся в индексированные базы в первую очередь. Описание сайта необходимо для выдачи корректной информации о найденном ресурсе при отображении поисковой машиной результатов поиска. Параметр “ROBOTS” атрибута NAME служит для управления маршрутом «паука». Этому параметру могут соответствовать следующие значения атрибута CONTENT: index  или noindex – индексировать или не индексировать текст документа; follow или nofollow – следовать или не следовать далее по ссылкам, содержащимся в документе. Пример: - в этом случае «паук» проиндексирует текст страницы и проследует далее по всем ссылкам, содержащимся в документе. Регистрация сайта поисковыми машинами Как Вы уже знаете, программы «пауки» перемещаются по ссылкам, содержащимся на сайте, и индексируют найденные тексты. Затем «паук» выгружает собранную информацию в поисковую машину, после чего она становится доступна пользователям поисковой системы. Почти все поисковые машины на главной странице имеют кнопку или ссылку для регистрации сайта, например, «Добавить ресурс» на Рамблере. При ее активации, Вы попадете на страницу с описанием регистрации и кнопкой начала регистрации. Нажав на эту кнопку, Вы открываете страницу с формой, в которую необходимо внести описание сайта. После тог, как Вы заполните предложенную форму и нажмете кнопку Зарегистрировать, сайт будет добавлен в список адресов, которые необходимо посетить «пауку». В зависимости от загруженности поисковой машины и скорости ее работы, процесс индексации может занять от 10 минут до нескольких недель – в течение этого времени программа «паук» обследует Ваш сайт и проиндексирует его. После этого страницы сайта станут доступны для поиска в данной поисковой системе. Примерно такие же действия выполняются для добавления Вашего сайта в другие поисковые машины и каталоги ресурсов. Отличие обычно состоит в другом интерфейсе и различных названиях ссылок и кнопок. Баннеры, их назначение и размещение Баннер - статичное или анимированное изображение, размещаемое на страницах сайта с целью рекламы. По своей сути является изображением-гиперссылкой на определенный сайт сети Интернет. Размещается, как правило, на популярных Web-сайтах на платной основе или же путем обмена баннерами. Контрольные вопросы Что такое хост? Что такое домен? Приведите пример URL адреса. Для чего необходим тег МЕТА. По теме: методические разработки, презентации и конспекты Конспект лекции для 10-11 классов по теме "Равносильность уравнений" Старшим классам трудно освоить лекционную систему проведения занятий, поэтому в помощь учащимся составлен краткий конспект теоретического материала по теме "Равносильность уравнений"... Пример конспекта лекции "Языки программирования" Рассмотрены понятия программы и приложения, языка программирования (алфавит, синтаксис, семантика), тестирования и отладки, среды разработки; отличия языков программирования низкого и высокого уровня,... Конспекты лекций по дисциплине "Информатика и ИКТ" Данный материал содержит конспекты лекций по дисциплине "Информатика и ИКТ" для 1 курса по новым ФГОС... Никитина Н.Н. учитель химии МОУ "Лицей № 47"г. Саратов. Подготовка ЕГЭ.. Химические свойства предельных одноатомных спиртов ( конспект лекции для учащихся ) Подготовка к ЕГЭ.Химические свойства предельных одноатомных спиртов. Учащиеся воспользовшись предложенным конспектом смогут ответить на следующие вопросы:1. Какие типы химических реакций  будут х... Язык разбивки текста для Интернет страниц Некоторые материалы которые могет пригадится учащимся для изучения этого раздела информатикиHTML><pre><head>УРОК-1</head><!заголовок страницы><title>Уроки</title>... План-конспект урока "Дизайн комнаты". Бинарный урок: английский язык + информатика... План-конспект урока "Дизайн комнаты" План-конспект урока по информатике (5 класс)... Мне нравится  Поделиться: