Файл: Учебнометодическое пособие для студентов прикладных и экономических специальностей Киров 2005 ббк 32. 973. 26018. 1я73 В19 Печатается по решению редакционноиздательского совета Вятского государственного гуманитарного университета.pdf
ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 22.11.2023
Просмотров: 44
Скачиваний: 1
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
30
Глава 3. Графика в HTML-документе
Совет будущему HTML-редактору. При грамотном размещении на
странице рисунков лучше указать еще и их ширину и высоту. В этом случае
браузеру не нужно будет выполнять работу по определению размера рисунка,
что значительно ускорит загрузку страницы.
Упражнение 3.3
Работа с положением рисунка относительно текста абзаца.
В созданный в предыдущих упражнениях HTML-документ picture.html добавьте еще один абзац текста, а рисунок переместите внутрь этого абзаца
(между тэгами и
):
Цапля обитает на болотах, имеет длинные ноги. Постоянно стоит на одной ноге, чтобы не спугнуть свою добычу - лягушек.Задайте у рисунка положение справ тельно текста абзаца. а относи рисваив
Для этого:
• У тэга
добавляем параметр align, которому п аем значение right: align=right> • Посмотрите результат в окне браузера (рис. 3.2)
Рис 3.2. Положение рисунка справа от текста абзаца
Задание 3.1
Изменяя значение параметра align у тэга
, поэкспериментируйте с положением рисунка на страничке. Примечание. Не забывайте, что положением рисунка можно
управлять, если рисунок помещен внутрь абзаца!
Упражнение 3.4
Задайте у рисунка горизонтальный отступ текста – 40 пикселей.
Для этого:
• У тэга
добавьте еще один параметр hspace: • Посмотрите результат в окне браузера.
Глава 3. Графика в HTML-документе
31
Альтернативный текст
Пользователь, путешествуя по сети Internet, в целях уменьшения количества скачанной информации может отключить отображение рисунков (команда меню браузера Internet Explorer
Сервис/Свойства обозревателя, вкладка
Дополнительно -> убрать галочку
Отображать
рисунки).
Рис. 3.3. HTML-документ при отключении режима отображения рисунков
Тогда страничка с рисунками будет выглядеть как на рис. 3.3.
Согласитесь, что не очень- то приятно увидеть на месте рисунка непонятное белое пятно.
Чтобы избежать таких накладок, используют альтернативный текст, который выводится на том месте, где должен находиться «пропавший» рисунок. Цель альтернативного текста – объяснить, что изображено на рисунке.
Для добавления к рисунку альтернативного текста нужно использовать дополнительный параметр
alt тэга
. Например,
Рис. 3.4. Рисунок с альтернативным текстом
Тогда страничка будет выглядеть как на рис. 3.4.
Упражнение 3.5
Придумайте для своего рисунка альтернативный текст.
Совет будущему HTML-редактору. Альтернативный текст
полезен также тем, что он используется поисковыми системами при поиске
картинок в сети Internet. Поэтому, если вы хотите, чтобы вашу страничку
нашли даже по картинке, используйте альтернативный текст.
Тэг
1 2 3 4 5 6
С помощью тэга
можно изобразить горизонтальную линию.
32
Глава 3. Графика в HTML-документе
Тэг
имеет ряд параметров, с помощью которых можно задать внешний вид линии:
• width – задает длину линии (измеряется в процентах от ширины окна браузера или пикселях);
• size – задает толщину линии (измеряется в пикселях);
• align – задает горизонтальное положение линии относительно окна браузера. Может принимать значения:
− right – размещение относительного правого края окна браузера;
− left – размещение относительно правого края окна браузера;
− center – размещение по центру окна браузера.
• color – задает цвет линии.
Упражнение 3.6
В конце HTML-документа
picture.html разместите красную линию толщиной 3 пикселя, длиной в 50% ширины окна браузера, размещенную по центру окна
(рис. 3.5).
Рис. 3.5. Линия в HTML-документе
Для этого:
• Откройте код HTML- документа picture.html.
• В конце тела страницы напишите тэг
c нужными параметрами:
• Загрузите страницу в окне браузера и посмотрите результат.
Рис. 3.6. Несколько линий в HTML-
Задание 3.2
Дополните оформление документа несколькими линиями различной толщины и длины
(рис. 3.6) документе
Глава 3. Графика в HTML-документе
33
Вопросы для повторения
1. Рисунки каких форматов способны отображать браузеры?
2. Какой обязательный параметр должен иметь тэг
? За что он отвечает? 3. Какие параметры относятся к необязательным?
4. Что следует учитывать при использовании рисунков на web-страничке?
Контрольные задания
1. Создайте HTML-документ согласно образцу:
Примечания по выполнению. Для создания буквицы используйте
рисунок
с
соответствующим
выравниванием.
Не
забудьте
про
альтернативный текст к каждому рисунку.
34
Глава 3. Графика в HTML-документе
2. Создайте HTML-документ по образцу (рисунки выберите на ваше усмотрение, измените их размеры, если это необходимо). У каждого рисунка задайте альтернативный текст.
Глава 4. Работа с таблицами в HTML
35
Глава 4. Работа с таблицами
Существует два основных направления использования таблиц в HTML:
1. Отображение каких-либо данных в табличном виде.
В качестве данных таблицы может быть использовано все: параграфы, списки, заголовки, формы, рисунки и отформатированный текст.
2. Размещение всей информации на страничке внутри одной или нескольких таблиц.
Структуризация информации с помощью таблиц считается правилом хорошего тона в дизайне. Тексты, рисунки, ссылки размещаются в ячейках.
Это значительно облегчает работу с позиционированием объектов относительно друг друга на странице.
Также таблицы помогают обойти ограничения HTML. Например, в HTML нельзя точно разместить элементы по горизонтали, но, разместив их в ячейках одной строки или столбца, можно выровнять положение элементов по горизонтали или вертикали соответственно.
Создание таблиц вручную - одна из наиболее сложных задач в HTML.
Сначала вы формируете таблицу, затем первую строку, затем каждую ячейку с ее содержимым. Каждый элемент требует открывающего и закрывающего тэгов разметки документа. Если вы забыли один-единственный тэг, то вашу страницу никто не сможет прочитать.
Создание таблицы
Таблица описывается парными тэгами <TABLE> и TABLE>:
Тэг
ячейки-заголовки и ячейки с данными.
Название является необязательным элементом и задается парными тэгами
У тэга
• align - задает положение названия таблицы относительно таблицы.
Он может принимать значения:
− bottom – название таблицы будет расположено в центре под таблицей;
− left - название таблицы будет расположено над таблицей, слева;
− right – название таблицы будет расположено над таблицей, справа;
− top – название таблицы будет расположено над таблицей по центру (это значение задается по умолчанию).
Обязательный элемент Строка таблицы используется для формирования строк в таблице и задается парными тэгами
Тэг
• align – задает выравнивание внутри строки (возможные значения:
left, right, center);
• valign – задает вертикальное выравнивание внутри строки
(возможные значения: top, bottom, middle);
• bgcolor – задает цвет фона внутри строки;
• background – задает фоновый рисунок строки.
Внутри строки могут находиться ячейки с данными и ячейки-заголовки.
Ячейка-заголовок является необязательным элементом и служит для обозначения заголовка строки или столбца. По сути, это обычная ячейка таблицы, в которой используется более крупный и жирный шрифт, нежели в ячейках с данными.
Ячейка-заголовок задается парными тэгами
Обязательный элемент Ячейка таблицы служит для хранения данных таблицы и задается парными тэгами <TD>TD>:
Глава 4. Работа с таблицами в HTML
37
Тэги
• align – задает выравнивание внутри ячейки (left, right, center);
• valign – задает вертикальное выравнивание внутри ячейки (top,
bottom, middle);
• colspan – растягивание ячейки на несколько столбцов;
• rowspan – растягивание ячейки-заголовка на несколько строк;
• height – задает высоту ячейки(в пикселях либо в процентах от высоты таблицы);
• width – ширина ячейки (в пикселях либо в процентах от ширины таблицы);
• bgcolor – задает цвет фона ячейки;
• background – задает фоновый рисунок ячейки;
• nowrap – наличие или отсутствие этого параметра обозначает запрет или разрешение на перенос строк внутри ячейки.
Упражнение 4.1
Создайте HTML-документ tables.html с названием странички «Работа с таблицами в HTML». Поместите в этот документ простейшую таблицу, имеющую название «Пример простой таблицы» и состоящую из трех столбцов с заголовками и трех строк (для наглядности можно использовать в коде отступы):
| Заголовок1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| ячейка A | ячейка В | ячейка С |
| ячейка D | ячейка E | ячейка F |
| ячейка G | ячейка H | ячейка J |
1 2 3 4 5 6
и посмотрите ее в браузере (рис. 4.1)
38
Глава 4. Работа с таблицами в HTML
Задание 4.1
Измените внешний вид таблицы, созданной в упр. 4.1:
• используя тэг , отформатируйте текст названия таблицы:
курсивное начертание, красный цвет текста;
• измените положение названия таблицы - над таблицей справа;
• используя параметр bgcolor, задайте цвета ячеек, пусть все ячейки будут различного цвета;
• используя тэг , задайте различные цвета шрифта в ячейках таблицы.
Параметры rowspan, colspan
Для объединения группы ячеек в таблице используются специальные параметры: rowspan («растягивает» ячейку таблицы на указанное количество строк) и colspan (растягивает ячейку таблицы на указанное количество столбцов)
Параметр rowspan строк. Параметр colspan растягивает ячейку
Упражнение 4.2
Приведите таблицу, созданную в упр. 4.1:
Заголовок 1
Заголовок 2
Заголовок 3
Ячейка A
Ячейка B
Ячейка C
Ячейка D
Ячейка E
Ячейка F
Ячейка G
Ячейка H
Ячейка J
К виду:
Заголовок 1
Заголовок 2
Заголовок 3
Ячейка B
Ячейка C
Ячейка E
Ячейка F
Объединенные
ячейки A, D, G
Ячейка H
Ячейка J
Для этого:
• Нам нужно «растянуть» ячейку A на три строки.
• Откройте код таблицы.
• При описании таблицы у тэга, описывающего ячейку A, укажите параметр rowspan=3 (то есть «растянуть» на 3 строки):
• Растянув таким образом ячейку А, мы уже не нуждаемся в ячейках D и
G – убираем описание этих ячеек.
• HTML-код будет выглядеть так (изменения выделены жирным шрифтом):
| Заголовок1 | Заголовок 2 | Заголовок 3 | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ячейка В | ячейка С | ||||||||||||||
| ячейка F | |||||||||||||||
| ячейка J |
| первой ячейки нужного столбца укажите параметр width=80%: |
• Посмотрите страничку в окне браузера. Задание 4.4 Измените таблицу, созданную в упр. 4.4: задайте ширину первого столбца 30%, высоту таблицы 50% от экрана. Внесите в ячейки соответствующий поясняющий текст. Вертикальное и горизонтальное выравнивание внутри ячейки Для задания выравнивания элементов внутри ячейки у тэга |
или |
используются параметры align - для задания горизонтального выравнивания внутри ячейки (возможные значения left, right, center) и valign – для задания вертикального выравнивания внутри ячейки (возможные значения top, bottom, middle). Глава 4. Работа с таблицами в HTML 41 Упражнение 4.5 В HTML-документе tables_sizes.html, созданном в упр. 4.4, в ячейках таблицы установите вертикальное выравнивание по середине и горизонтальное – по центру. Для этого: • У каждого тэга ячейки укажите параметры valign=middle и align=center: |
|
Вопросы для повторения 1. Как можно использовать таблицы в HTML (два направления)? 2. Назовите основные элементы в структуре таблицы. Какие элементы являются обязательными и необязательными? 3. Перечислите параметры, которые применяются при объединении нескольких ячеек. Приведите примеры. Контрольные задания 1. Создайте HTML-документ с таблицей по образцу: Используйте различные цвета фона и текста. 42 Глава 4. Работа с таблицами в HTML 2. Создайте HTML-документ по образцу: Примечание по выполнению. Картинки и подписи к картинкам размещены в разных ячейках с различным выравниванием. Глава 5. Гиперссылки 43 Глава 5. Гиперссылки Часть текста, название, участок изображения и пр. могут иметь ссылки на другой текст внутри этого же документа или на другой документ в сети Интернет. Такие ссылки называются гипертекстовыми, или гиперсвязью. Существуют ссылки текстовые и графические (когда ссылкой является рисунок). По умолчанию текстовая ссылка выделяется синим цветом и подчеркиванием, а графическая – синей рамкой. Но цвет ссылок на страничке можно устанавливать и самим через специальные параметры тэга : • link - цвет ссылки, еще не посещенной; • alink - цвет активной ссылки; • vlink - цвет ссылки, уже посещенной; Например, задает синий цвет еще не посещенным ссылкам, зеленый – активным, красный – уже посещенным. Создание гиперссылки Для добавления гиперссылки в HTML-документ используют парные тэги и : текст ссылки (или рисунок) Обязательный параметр href тэга определяет адрес документа, на который будет совершен переход, если щелкнуть мышью по объекту, находящемуся между тэгами. Адресом может быть либо локальный документ, либо страничка в сети Интернет. Помимо href тэг <А> имеет ряд других, необязательных, параметров: • title – текст подсказки, которая всплывает при наведении на ссылку; • target – наличие или отсутствие этого параметра определяет, как открыть документ, на который ведет ссылка; • name – используется при задании ссылки внутри текущего документа (метки 1 ). Упражнение 5.1 Создание текстовой ссылки. Создайте HTML-документ links.html с заголовком странички «Ссылки в HTML-документе» с текстом «Я учусь в ВятГГУ». Название университета оформите ссылкой, ведущей на сайт www.vspu.kirov.ru Для этого: • Название университета заключите между тэгами и . В параметре href тэга укажите полный адрес сайта: 1 Более подробно о метках речь пойдет далее. 44 Глава 5. Гиперссылки ВятГГУ • Проверьте работу ссылки: ссылка окрашена в синий цвет и подчеркнута. При наведении курсора мыши на ссылку он меняется, а в строке состояния отображается адрес ссылки (рис. 5.1). Рис. 5.1. Изменение внешнего вида курсора при наведении на ссылку Упражнение 5.2 У HTML-документа links.html, созданного в упр. 5.1, задайте следующие настройки ссылок: текст непосещенных ссылок окрашивается синим цветом, текст активных ссылок – зеленым, посещенных – красным. Для этого: • Откройте код странички links.html. • У тэга задайте нужные значения соответствующих параметров: • Проверьте настройки ссылок: - кликнув по ссылке, вы автоматически перейдете на документ, на который вела эта ссылка. Заметьте, что в момент активизации ссылки (то есть в момент клика) ссылка меняла цвет на зеленый; - вернитесь на исходный документ, нажав кнопку «Назад» на панели инструментов окна браузера (или просто нажмите клавишу «BackSpace»). Ссылка все еще остается активной – следовательно зеленой; - теперь щелкните по любому месту в вашем HTML-документе: ссылке присваивается статус посещенной – ссылка станет красной. Задание 5.1 Добавьте у ссылки, созданной в упр. 5.1, подсказку «Перейти на сайт ВятГГУ». Проверьте результат в окне браузера: при наведении на ссылку должна появляться подсказка. Глава 5. Гиперссылки 45 Упражнение 5.3 Создание графической ссылки. Добавьте в HTML-документ links.html графическую ссылку, ведущую на сайт www.afisha.kirov.ru (рис. 5.2). Для этого: • В любом графическом редакторе (например, «Paint») создайте рисунок • Cоздайте ссылку на сайт www.afisha.kirov.ru , но вместо текста ссылки поместите созданный рисунок 1 :  Рис. 5.2. Графическая ссылка в HTML-документе • Рядом со ссылкой разместите комментирующий текст. • Загрузите страничку в окне браузера. Задание 5.2 Уберите ссылочную рамку вокруг рисунка. Примечание. Используйте параметр border у тэга . Упражнение 5.4 Создание гиперсвязи между локальными страничками. В HTML-документе links.html создайте ссылку, ведущую на страничку с картинкой. Для этого: • Создайте HTML-документ picture.html с картинкой с текстом «Вы попали на страничку с картинкой!». • В HTML-документ links.html добавьте ссылку на эту страничку: Щелкнув здесь мышью, вы можете попасть на файл с картинкой! • Откройте этот документ в браузере и проверьте работу ссылки. 1 Подробнее о вставке рисунка читайте в гл. 3 «Графика в HTML». 46 Глава 5. Гиперссылки Задание 5.3 Усовершенствуйте переход между страничками, созданный в упр. 5.4, – на страничке с картинкой добавьте ссылку «Назад», по которой можно вернуться на исходный HTML-документ. Параметр target Когда пользователь щелкает по ссылке, документ открывается в текущем окне. Иногда удобнее открывать ссылочный документ в отдельном окне. Это можно осуществить, щелкнув по ссылке правой кнопкой мыши и в контекстном меню выбрав команду Открыть в новом окне (рис. 5.3). Рис. 5.3. Открытие документа по ссылке в новом окне через контекстное меню Можно настроить открытие документа в новом окне средствами HTML. Для этого нужно параметру target присвоить значение «_blank». Например, ВятГГУ Параметр target может иметь еще следующие значения: − _self – документ будет загружаться в текущем окне, то есть в том же, что и ссылка на этот документ. По умолчанию присваивается это значение; Глава 5. Гиперссылки 47 − _parent – используется при работе с фреймами 1 : документ будет загружаться во фрейм-родитель, если фреймов нет, то этот параметр работает как _self; − _ top – используется при работе с фреймами: документ загружается в полном окне без фреймов, если фреймов нет, то этот параметр работает как _self. Метки Обычно, когда загружается страничка, пользователь автоматически перемещается в начало странички. Для перемещения по ссылкам в конкретную часть текущей или другой странички используются метки. Место, в которое пользователь будет перемещаться, щелкнув по ссылке, метится тэгом с параметром name: текст метки Имя метки может быть любое: числа и буквы. Ссылка на метку оформляется следующим образом: текст ссылки Примечание. Если ссылка ведет на место в этом же HTML-документе, то имя документа в параметре href можно не указывать. Пользователь, кликнув на текст ссылки, попадает в то место странички, где расположен текст метки. Упражнение 5.5 Создайте ссылку внутри HTML-документа links.html, щелкнув по которой, пользователь перемещается в конец документа. Для этого: • Откройте код странички links.html. • В конце тела странички создайте метку с именем finish: конец документа • В начале документа поместите ссылку с текстом «в конец документа», ведущей на метку с именем finish: в конец документа • Заметим, что имя документа links.html можно опустить, потому что метка находится в этом же документе. • Проверьте работу ссылки, загрузив страничку в окне браузера. 1 О фреймах будет рассказано в следующей главе. 48 Глава 5. Гиперссылки Размещение адреса электронной почты Также с web-странички можно отправлять письмо по электронной почте. Ссылка на электронный адрес оформляется с помощью тэга с указанием в параметре href специального слова mailto: Например: Пишите письма на:<А href=mailto:vasenina@mail.ru>vasenina@mail.ru Когда пользователь щелкнет по этой ссылке, на компьютере запускается почтовая программа и создается письмо с уже заполненным полем «Кому» (рис. 5.4). Рис. 5.4. Окно создания письма, появившееся после активизации ссылки с адресом электронной почты Совет будущему HTML-редактору. Чтобы при создании письма автоматически заполнялась и тема письма, нужно в конец адреса ссылки добавить «?subject=» и указать тему письма. Например, Все вопросы пишите на: inform@mail.ru. Упражнение 5.6 Поместите на свою страничку ссылку на свой адрес электронной почты. Если у вас нет зарегистрированного адреса, то для выполнения упражнения придумайте его сами. Формат адреса электронной почты: имя_пользователя@адрес_почтового_сервера Глава 5. Гиперссылки 49 Карта ссылок т можно встретить рисунок, на котором в разных его частях с а В сети Интерне размещены сразу несколько ссылок. Это осуществляется помощью специального механизма Карта ссылок (MAP). Этот механизм включает в себя сразу несколько тэгов: <IMG> c атриб u n утом semap, <MAP> с атрибутом ame, <AREA> с трибутами shape, coords, href и закрывающий тэг . Перед вами пример меню на сайте www.shakers.kirov.ru , которое оформлено в виде карты:  Остановимся поподробнее на синтаксисе Карты. Вначале нам нужно задать рисунок, который тве карты (menu.jpg в нашем примере). Кроме того, рисунку нужно сообщить, карту с каким именем будут на него накладывать (usemap=”#menu”), имя указывается обязательно с символом #: м описание самой карты ссылок: 1) задаем имя карте через атрибут name тэга любое): 50 Глава 5. Гиперссылки − shape=”rect” coords=”X1,Y1,X3,Y3” - задаются координаты верхнего левого и правого нижнего угла прямоугольника, − shape=”circle” coords=”X,Y,R” - где X,Y,R - координаты центра круга и его радиус, − shape=”poly” coords=”X1,Y1,X2,Y2,X3,Y3”... – задаются координаты вершин многоугольника, ться последним в списке • href • alt - метр задает альтернативный текст для каждой из ент Упр map.html. Создайте в этом документе меню из двух на странички picture.html (страничка с картинкой) и table. дайте рисунок, котор ю на страничке. Например, − shape=”default” – не требуется задания координат, определяет вообще все точки и должно располага областей. - этот параметр определяет адрес ссылки; этот пара активных областей изображения; • title - этот параметр задает текст подсказки, которая всплывает при наведении курсора на данный элем ажнение 5.7 Создайте HTML-документ ссылок, ведущих html (страничка с таблицей). Если страничек нет, создайте их (не забудьте про названия и заголовки). Меню реализуйте с помощью карты. Для создания карты: • В любом графическом редакторе (например, «Paint») соз ый будет служить мен • Определите размер вашего рисунка. Например, высота=75 пикселей, ширина=80 пикселей. ервой ссылки определяется верхняя половина рисунка, для в p="#menu" width="80" height="75"> • Определите области ссылок. Для нашего примера форма области – прямоугольник, для п торой – нижняя половина. • Опишите карту в коде странички: Проверьте работу карты: перейдите по ссылкам на странички. • Глава 5. Гиперссылки 51 Вопросы для повторения 1. Что такое гиперссылка? Назовите два вида гиперссылок. 2. Какой тэг задает ссылку? Перечислите основные и вспомогательные параметры этого тэга. 3. Что такое метка? Как ее задать? 4. Как задать ссылку на адрес электронной почты? 5. Какими способами можно открыть ссылку в новом окне? 6. Что такое карта ссылок? Контрольные задания 1. С помощью меток реализуйте сноски в HTML-документе: если пользователь находит в тексте сноску, то, щелкая по ней, перемещается в объяснение этой сноски, которое находится в конце документа. Кроме того, если навести на номер сноски курсор мыши, то текст сноски появляется в подсказке. Примечание. Яркий пример можно найти на личном сайте М. И. Ненашева, профессора кафедры философии ВятГГУ ( www.nenashev.kirov.ru ), например, на странице www.nenashev.kirov.ru/monografies/02/index.shtml?pred 2. Создайте HTML-документ, содержащий ссылки на странички с картинкой, с таблицей, со списком. При наведении курсора мыши на ссылку должна всплывать подсказка. Отформатируйте странички: добавьте цвет фона, цвет текста, все странички оформите в едином стиле - одинаковый шрифт, одинаковый фон. Каждая страничка имеет свое название, заглавие и ссылку «назад», при нажатии на которую пользователь возвращается на главную страничку. 52 Глава 6. Фреймы Глава 6. Фреймы Фреймы (frame – структура, рамка) позволяют разбить окно браузера на несколько независимых окон, в каждом из которых будет отображаться один HTML-документ. Использование фреймов позволяет размещать статическую информацию (например, главное меню сайта, графический логотип фирмы, copyright, набор управляющих кнопок) в одном фрейме, а изменяющуюся - в другом. Используя фреймы, позволяющие разбивать web-страницы на множественные подокна, в некоторых случаях вы можете значительно улучшить внешний вид и функциональность ваших страничек. Фреймы имеют следующие возможности: • Каждый фрейм имеет свой URL, что позволяет загружать его независимо от других фреймов. • Каждый фрейм может иметь собственное имя (параметр name), позволяющее обращаться к нему из другого фрейма. • Размер фрейма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрещено указанием специального параметра). Но тут же следует заметить, что система фреймирования не всегда правильно воспринимается большинством поисковых систем. Практика показывает, что количество посещений страничек с фреймами значительно меньше, чем тех же страничек, с совершенно тем же содержимым, но без использования фреймов. Создание web-странички на основе фреймов Создание web-странички на основе фреймов осуществляется в два этапа: 1. Создается HTML-файл (главный), в котором задаются размеры и количество фреймов, а также имена файлов, соответствующих фреймам, и некоторые атрибуты для каждого фрейма. 2. Создаются отдельные HTML-документы, которые будут отображаться во фреймах. Главный документ – специфичный вид HTML-документа. Он не содержит тэга , он только описывает фреймы, которые будут содержать информацию. В нем осуществляется разбиение на фреймы. Структура главного документа: |
|---|
Глава 6. Фреймы
53
Между парными тэгами <FRAMESET> и FRAMESET> создаётся фреймовая структура. Эти тэги используются вместо тэгов и
54
Глава 6. Фреймы
Файлы, которые отображаются во фреймах, – это обыкновенные
HTML-документы со стандартной структурой. Они могут содержать рисунки, таблицы, текст.
Упражнение 6.1
Создайте web-страничку, содержащую три горизонтальных фрейма: первый фрейм содержит таблицу, второй – рисунок, третий – отформатированный текст.
Для этого:
• Создайте файл главного документа – frames.html:
• Создайте файлы-фреймы table.html, pictures.html, text.html. Занесите в них соответствующую информацию.
• Просмотрите файл главного документа в окне браузера (рис. 6.1).
Рис. 6.1. Страничка с тремя горизонтальными фреймами
Задание 6.1
Измените расположение фреймов с горизонтального на вертикальный.
Глава 6. Фреймы
55
Упражнение 6.2
Удалите полосу прокрутки у первого фрейма (рис. 6.2). Для этого у тэга , описывающего первый фрейм, добавьте параметр scrolling=”no”.
Передвигая границы фреймов, измените их размеры так, чтобы стала видна таблица полностью.
Задание 6.2
С помощью параметра
noresize тэга запретите возможность изменения размеров первого фрейма.
Проверьте выполнение этого запрета – попробуйте передвинуть границу фрейма.
Рис. 6.2. Отсутствие полосы прокрутки у первого фрейма
Задание 6.3
С помощью параметров bordercolor и border тэга
56
Глава 6. Фреймы
Упражнение 6.3
Создайте страничку index.html, содержащую два фрейма, первый представляет собой меню и отображает содержимое файла menu.html, второй – отображает содержимое в зависимости от выбранной ссылки в меню (рис. 6.4).
Рис. 6.4. Использование первого фрейма в качестве меню
Для этого:
• Создайте главный документ index.html.
• Проанализируем его структуру. Главный документ представляет собой два вертикальных фрейма: левый - для меню (пусть его ширина - 200 пикселей) и правый - для отображения выбранных в меню файлов. Следовательно, при описании тэга
Глава 6. Фреймы
57
• Начинаем создавать файлы-фреймы.
• Пусть файл menu.html содержит три ссылки – «первый фрейм», «второй фрейм», «третий фрейм», которые ссылаются на соответствующие файлы –
first.html, second.html, third.html. Но чтобы эти файлы отображались в нужном фрейме (а именно в правом), нужно в каждой ссылке указать имя этого фрейма
(content) через параметр target: target="content">первый фрейм
• Тем самым, мы сообщаем браузеру, что файл first.html нужно отобразить во фрейме с именем «content» (это имя мы присвоили правому фрейму в главном документе). В тело меню добавьте заголовок «Меню».
• Создайте HTML-документ greet.html с заглавием «Приветствие», оформленным любым встроенным заголовком и текстом «Выберите пункт меню для перехода на соответствующую страничку».
• Создайте файлы first.html, second.html, third.html. В теле каждого файла вставьте заглавие «Первая (Вторая, Третья) страничка» и текст «Поздравляем!
Вы попали на первую (вторую, третью) страничку!»
• Теперь откройте главный документ в браузере и проверьте работу меню. При выборе соответствующей ссылки в левом фрейме в правом отображается выбранный HTML-документ.
«Плавающий» фрейм (тэг
На страничке можно использовать так называемые
плавающие фреймы.
Это фрейм, вставленный в тело
HTML-документа в виде отдельного окна (рис. 6.5).
Рис. 6.5. HTML-документ с «плавающим» фреймом
Этот тип фреймов хорош тем, что его можно вставить в любой HTML документ. Даже в тот, у которого тело представлено не в виде фреймовой структуры, а в виде обычного тела .
58
Глава 6. Фреймы
«Плавающий» фрейм задается тэгом <IFRAME>. Например,
Глава 6. Фреймы
59 50% 50%
50% 50%
Задание 6.6
Создайте файл с предложенной фреймовой структурой:
Второй
Frame
Третий
Frame
Первый
Frame
Четвёртый
Frame
Фреймы должны содержать информацию разного характера (картинка, бегущая строка, списки и т. д.). У фреймов используйте рамки различных цветов и толщины, поля (отступы), полосы прокрутки.
Вопросы для повторения
1. Какая информация содержится в главном HTML-документе?
2. Какие тэги задают фрейм?
3. Что такое
60
Глава 6. Фреймы
60
Глава 6. Фреймы
Рис. 6.6. Меню в горизонтальном фрейме
Глава 7. Формы
61
Глава 7. Создание форм
Формы – это объекты в HTML-документе, назначением которых является сбор информации от посетителей странички. С их помощью посетитель может отправить комментарии по поводу посещения сайта, посылать на сервер различные запросы или регистрироваться.
После того как пользователь заполнит форму и нажмет кнопку, внесенные им данные посылаются на сервер и обрабатываются специальной программой
CGI (Common Gateway Interface) или PHP (Personal Hypertext Processor). Таким образом, пользователь может интерактивно взаимодействовать с web-сервером через Интернет.
В одном документе может быть определено несколько форм для заполнения, но форма не должна содержать в себе другую форму.
Создание формы
Процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй – в создании на сервере программы, обрабатывающей данные этой формы.
Все формы создаются парными тэгами <FORM> и FORM>, между которыми помещаются элементы формы:
В параметре action указывается адрес (URL) программы, которая будет обрабатывать данные формы на сервере.
Параметр method определяет, каким путем данные будут посылаться на сервер:
• get: информация из формы добавляется в конец адреса, который был указан в параметре action. Опытные HTML-редакторы не рекомендуют использовать метод get.
• post: при использовании данного метода информация из формы пересылается не как часть адреса, а как содержимое запроса.
Данный метод рекомендуется к использованию.
Примечание. Изучение программ обработки данных формы на сервере
не входит в рамки данного курса. В примерах будут рассмотрены основы
создания интерфейса для отправки данных – то есть структура и основные
элементы форм. Поэтому параметры method и action тэга
выполнении упражнений и заданий данной главы могут быть опущены.
Для задания элементов внутри формы используются тэги ,
<TEXTAREA> и <SELECT>.
Рассмотрим каждый из них подробнее.
62
Глава 7. Формы
Элемент
Тэг используется для ввода текстовой информации, пересылки файлов или управляющей информации.
Параметры тэга :
• name - имя поля. Данное имя используется как уникальный идентификатор поля, по которому впоследствии программа обработки сможет получить данные, помещенные пользователем в это поле;
• size - определяет визуальный размер поля ввода на экране в символах
(по умолчанию size=20);
• maxlength - определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов браузер не позволяет ввести последующий символ. По умолчанию значение maxlength равно бесконечности;
• value – определяет начальное (по умолчанию) значение поля;
• type - определяет тип поля ввода. Может принимать значения:
− text - описывает однострочное поле ввода
Этот атрибут используется по умолчанию (см. пример в упр. 7.1);
− password - отличается от атрибута text тем, что вводимое пользователем значение не отображается браузером на экране
;
− checkbox (флажок) - используется, когда необходимо ответить да или нет. В форме отображается в виде
. Если в форме имеется несколько полей-флажков, то можно выбрать более одного поля.
Каждое поле должно иметь свое имя (name) и значение (value). На сервере обрабатываются данные только у выбранных полей;
− radio - при использовании нескольких полей данного типа в одной форме пользователь может выбрать только одно поле. В форме отображается в виде . Поля должны иметь одинаковое имя (name), но разные значения (value). На сервер будет передано значение только выбранного поля;
− reset - данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию. Атрибут
value может содержать текст, который будет высвечен на кнопке;
− submit - данный тип обозначает кнопку, при нажатии которой на сервере будет вызвана управляющая программа, описанная в параметре формы action. Атрибут value может содержать текст, который будет высвечен на кнопке;
− image - данный тип обозначает кнопку submit в виде рисунка. Путь к картинке указывается через атрибут src, а синтаксис совпадает с тэгом
; − file (файловое поле) - поле передачи файла на сервер.
Глава 7. Формы
63
Упражнение 7.1
Создайте HTML-документ simpleform.html. Разместите в нем простую форму, предлагающую пользователю ввести свои личные данные (рис. 7.1).
Для этого:
Рис. 7.1. Пример простейшей формы
• С помощью тэгов
создадим саму форму.
• Для ввода информации будем использовать элементы
, которые будут представлять собой текстовые поля (параметр type=text). В эти поля пользователь будет вносить свои данные, которые будут передаваться на сервер как значения переменных с соответствующими именами
(параметр name).
• В текстовом поле Индекс зададим ограничение на количество символов
(параметр maxlength) и значение по умолчанию (параметр value):
maxlength=6 value=”999999”>
• В конце формы поместим кнопку, при нажатии на которую данные будут отсылаться на сервер (тэг с параметром type=submit).
type=submit value=”Отправить данные”>
• В результате мы получим такую структуру формы:
64
Глава 7. Формы
Задание 7.1
Выровняйте элементы формы, созданной в упр. 7.1 путем размещения их в ячейках таблицы (рис. 7.2).
Рис. 7.2. Элементы формы выровнены с помощью ячеек таблицы
Упражнение 7.2
Создайте HTML-документ anketa1.html с формой-анкетой, предлагающей выбрать любимое блюдо (с возможностью выбора нескольких пунктов).
Для этого:
• Для описания пунктов выбора используйте элемент с параметром type=checkbox (при просмотре в окне браузера рядом с пунктом появится квадратик):
…
Выберите ваше любимое блюдо:
…
• Посмотрите результат в окне браузера.
• Проанализируем работу формы: при нажатии на копку «Отправить данные» на сервер будут отосланы одна, две или три переменных (в зависимости от количества выбранных вариантов) с именами, хранящимися в
Глава 7. Формы
65 параметре name (food1, food2, food3) и с соответствующими значениями, хранящимися в параметре value («Салат Оливье», «Мясо по-испански»,
«Макароны по-флотски»).
• Обратите внимание на то, что элемент «Макароны по-флотски» указан как заранее отмеченный.
Задание 7.2
Создайте HTML-документ
anketa2.html с формой-анкетой, предлагающей выбрать самый любимый напиток с возможностью выбора только одного варианта (рис. 7.4).
Рис. 7.4. Анкета с возможностью выбора только одного варианта
Примечание.
Проанализируйте
тот факт, что на сервер нужно
отправить
только
одно
значение,
следовательно,
на
сервер
будет
отсылаться одна и та же переменная
(параметр name одинаковый у всех
элементов), но с разными значениями
(параметр value), в зависимости от
выбранного пункта.
Упражнение 7.3
Создайте HTML-документ
password.html,
предлагающий ввести пароль (рис. 7.5).
Для этого:
• У элемента значение параметра задайте password.
• Загрузите форму в окне браузера.
Введите в поле пароль – в поле отображаются не символы, а точки.
Упражнение 7.4
В HTML-документе simpleform.html, созданном в упр. 7.1, в форму добавьте кнопку сброса значений полей формы.
Рис. 7.5. Окно с формой для ввода пароля
Для этого:
• Добавьте новый элемент параметром type=reset:
type=reset value=”Очистить поля”>
• Проверьте работы кнопки – при ее нажатии все поля очищаются или заполняются значением, заданным по умолчанию.
66
Глава 7. Формы
Упражнение 7.5
Создайте документ file.html с формой, позволяющей отправлять на сервер файлы.
Для этого:
• Создайте HTML-документ с текстом «Выберите файл для загрузки на сервер».
• Создайте в этом документе форму.
• Добавьте в нее элемент , позволяющий выбрать файл
(type=file)
и кнопку «Отправить».
Примечание. Для отправки файла в параметре action тэга
вводится адрес специальной программы, осуществляющей пересылку файла на
сервер (в примере адрес указывать не надо).
Элемент
Тэг <TEXTAREA> используется для ввода большого количества текстовой информации (в несколько строк).
Атрибуты тэга .
Упражнение 7.6
Создайте документ otziv.html с формой, предлагающей написать отзыв о статье (рис. 7.6).
Для этого:
• Создайте HTML- документ с текстом
«Напишите отзыв о прочитанной статье».
• В HTML-документе создайте форму.
• Добавьте в нее элемент
Глава 7. Формы
67
• В конце формы добавьте кнопку «Отправить».
Элемент
Элемент
<SELECT> дает возможность пользователю выбрать значение из фиксированного списка значений.
Обычно этот элемент представлен выпадающим списком.
Рис. 7.7. Элемент
68
Глава 7. Формы
Задание 7.3
В форме, созданной в упр. 7.8, измените элемент
Глава 7. Формы
69
Вопросы для повторения
1. Для чего при создании web-страничек используют формы?
2. С помощью какого тэга задают форму?
3. Какие элементы могут находиться на форме?
Контрольное задание
Создайте форму по образцу:
70
Глава 8. Каскадные таблицы стилей
Глава 8. Каскадные таблицы стилей
Используя тот или иной тэг из стандартного набора, мы задаем стандартный (определенный по умолчанию) внешний вид абзацу, символам, рисунку и т. д. Если же мы хотим получить иной вид, то нужно использовать дополнительные тэги.
Например, чтобы создать абзац с полужирным начертанием, красного цвета и с подчеркиванием, нужно использовать 3 тэга - , и :
Абзац с красным полужирным подчеркнутым шрифтом
Если подобный стиль нужно использовать не один, не два, а десятки раз, то использование такого набора тэгов становится нерациональным и неудобным для разработчика.
Решается такая проблема с помощью CSS (Cascading Style Sheets - каскадные таблицы стилей). CSS позволяют задать шаблон стиля и применять его в дальнейшем.
Использование каскадных таблиц стилей имеют ряд преимуществ:
1. CSS предоставляет гораздо больший объем параметров форматирования объектов HTML
1 2. Используя CSS, зачастую можно легко сократить размер исходного
HTML-документа.
3. CSS позволяет «настраивать» такие объекты HTML, как таблицы, списки, гиперссылки и т. д.
Первые каскадные таблицы стилей CSS были реализованы в браузере
Internet Explorer 3.0. С момента своего возникновения структура CSS была несколько раз пересмотрена, в нее были добавлены новые элементы и убраны старые.
Способы задания CSS
Существует три способа задания стилей, применение каждого из которых обусловлено конкретной задачей.
1-й способ - cтрочный (внутренние таблицы стилей - Inline Style Sheets) - стили вставляются прямо в описание тэгов HTML с помощью специального параметра style.
<ТЭГ style="описание стиля">текстТЭГ>
Этот способ обычно используется, если стиль нужно применить единожды к конкретному тэгу и требуется использование параметров, доступных только через CSS.
1
Подробный перечень параметров, доступных при использовании CSS, смотрите в Приложении III в разделе
«Приложения» данного пособия.
Глава 8. Каскадные таблицы стилей 71
Упражнение 8.1
Создайте HTML-документ inline.html, содержащий абзац с разреженным шрифтом и таблицу с жирной верхней границей (см. рис. 8.1).
Для этого:
• Во-первых, без использования CSS здесь не обойтись, потому что разреженный интервал невозможно создать стандартными средствами HTML, следовательно, прибегнем к использованию CSS. Создаем стиль у тэга
:
Разреженный текст в абзаце задан с помощью CSS
• Аналогично создаем стиль у тэга
| , Упражнение 8.4 Работа по созданию и применению классов. Создайте HTML-документ class.html (см. рис. 8.6). Для форматирования текста создайте два класса тэга с различными параметрами форматирования. Для этого: • Введите текст странички. • В разделе создайте два класса у тэга : heading – для заголовков и text – для основного текста. P .heading {font-family:Arial; background:yellow; font-weight:bold} .text {font-family:Times New Roman; padding-left:130} Глава 8. Каскадные таблицы стилей 77 Глава 8. Каскадные таблицы стилей 77 Рис. 8.6. Использование классов при форматировании текста 78 Глава 8. Каскадные таблицы стилей Задание 8.4 Создайте HTML-документ по образцу (рис. 8.7), задав классы у тэга для выделения элементов окна и пунктов меню. Рис. 8.7. Образец выполненного задания 8.4 Позиционирование элементов HTML Все элементы языка разметки HTML выводятся в той последовательности, в какой размещены тэговые конструкции. С помощью средств CSS можно прибегнуть к позиционированию необходимых объектов в пределах web-странички. Позиционирование – это пространственное размещение элементов HTML-документа. Существует два типа визуального позиционирования элементов: • абсолютное; • относительное. Позиционирование элемента задается с помощью CSS через параметр style, где параметры перечисляются через точку с запятой: <ЭЛЕМЕНТ style=”параметры позиционирования”> Глава 8. Каскадные таблицы стилей 79 В параметры позиционирования входят: 1. Параметры размещения элемента: • position - устанавливает, каким образом вычисляется положение слоя на странице. Возможные значения: − absolute — координаты позиции элемента будут вычисляться от верхнего левого угла странички; − relative — координаты будут вычисляться от верхнего левого угла родительского элемента, т. е. элемента, в котором находится позиционируемый элемент; − static — элемент всегда будет находиться в зафиксированной месте окна браузера при прокручивании странички; • top - устанавливает вертикальную координату элемента (в пикселях: px, в процентах: % - от ширины родительского элемента); • left - устанавливает горизонтальную координату элемента (в пикселях: px, в процентах:% - относительно ширины родительского элемента); • width - устанавливает ширину элемента (в пикселях: px, в процентах: % - от ширины родительского элемента); • height - устанавливает высоту элемента (в пикселях: px, в процентах: % — от ширины родительского элемента). 2. Параметры «видимости» элемента: • visibility — устанавливает, будет ли виден элемент. Возможные значения: − visible — слой будет виден; − hidden — слой не будет виден; • z-index — указывает, в каком порядке слои будут перекрываться. Слои с бóльшим z-index будут перекрывать слои с меньшим z-index. Возможны любые значения, включая отрицательные. В случае отрицательных значений элементы данного слоя будут закрыты обычным текстом; с положительным значением — будут лежать «перед» обычным текстом, перекрывая его. По умолчанию z-index=0. Упражнение 8.5 Рис. 8.8. Создание тени с помощью позиционирования Создайте HTML-документ position.html, содержащий абзац «Позиционирование в HTML» с тенью (рис. 8.8). Для этого: • Создайте в HTML- документе абзац с заданным текстом. Отформатируйте его: измените цвет текста, шрифт, размер шрифта. • Для создания тени 80 Глава 8. Каскадные таблицы стилей используйте копию абзаца, но со смещением. Для этого у тэга через CSS задайте координаты размещения второго абзаца: • Посмотрите страничку в окне браузера. • Чтобы «тень» была на втором плане, задайте z-index у «тени» меньший, чем у основного текста (у которого z-index по умолчанию равен нулю). Например, -1. Слои Обычно в позиционировании используют слои. Слой – это HTMLобъект, который объединяет несколько элементов, расположенных на HTML-документе (таблицы, текст, картинки) в одну группу. Использование слоев позволяет управлять группой элементов в целом, в том числе и позиционировать. Слои делают web-страницу компактной, динамичной, неожиданной и неотразимо привлекательной. Слой задается тэгами и : элементы слоя Таким образом, чтобы сгруппировать несколько элементов в слой, нужно поместить их между тэгами и . Упражнение 8.6 Создайте HTML-документ sloi.html (рис. 8.9). При позиционировании используйте слои. Рис. 8.9. Использование слоев в позиционировании Глава 8. Каскадные таблицы стилей 81 Для этого: • Создайте три слоя: для слова «HTML», слова «Учебник» и основного текста. • Разместите слои в HTML-документе, используя позиционирование через CSS (параметры размещения каждого слоя определите сами): ’элементы слоя • Определите порядок расположения слоев, задав у каждого слоя z-index. • Просмотрите результат в окне браузера. Вопросы для повторения 1. Каковы преимущества использования стилей в HTML? 2. Назовите и опишите способы задания стилей, когда рекомендуется тот или иной способ? 3. Что такое классы? Когда необходимо задавать классы? 4. Назовите и опишите способы задания классов. 5. Что такое позиционирование? Возможна ли работа с позиционированием без CSS? 6. Дайте понятие слоя, для чего используются слои? Контрольное задание Создайте HTML-документ по образцу, используя классы, слои и позиционирование. Учебник CSS HTML CSS JavaScript Спецификация CSS ( Cascading Style Sheets ) позволяет остаться в рамках декларативного характера разметки страницы и дает полный контроль над формой представления элементов HTML-разметки Каскадные таблицы стилей призваны разрешить противоречие между точностью определения размеров картинок и приложений с одной стороны, и точностью определения размеров блоков текста и его начертания - с другой. 82 Проектное задание. Разработка и создание сайта «Моя личная страничка» Проектное задание Разработка сайта «Моя личная страничка» Примерное техническое задание на разработку сайта «Моя личная страничка» I. Описание сайта Сайт относится к катэгории «личная страничка». На сайте размещена информация о владельце сайта: его биография, увлечения, фотографии и т. д. II. Структура сайта Посетитель сайта вначале попадает на главную (титульную) страницу, затем по ссылке переходит на второстепенную страницу (макеты титульной и второстепенной страниц см. п. III «Макеты страниц»). Второстепенная страница имеет фреймовую структуру, состоящую из четырех фреймов: левый фрейм – меню-список всех разделов сайта, верхний фрейм – бегущая строка, нижний фрейм – ссылка на адрес электронной почты автора странички, центральный фрейм – содержание изменяется в зависимости от выбранного раздела в меню. Сайт включает в себя следующие разделы: 1. «Биография»: краткая биография о себе, сопровождаемая фотографиями разных лет. 2. «Моя семья»: небольшой рассказ о членах семьи, сопровождаемый фотографиями. 3. «Мои друзья»: фотографии друзей и подписи к ним. 4. «Мои увлечения»: перечисление увлечений и краткий рассказ об одном из них. 5. «Анкета»: форма, предлагающая внести личную информацию посетителя и пожелания по сайту. III. Макеты страниц Образец главной страницы (index.html): Образец второстепенной страницы (main.html). Проектное задание. Разработка и создание сайта «Моя личная страничка» 83 IV. Форматирование сайта 1. Страницы всех разделов оформлены в едином стиле: одинаковое форматирование основного текста, заголовков разделов, текста ссылок, используется один фоновый рисунок на страницах всех разделов. 2. Текст главной страницы сайта расположен по центру по горизонтали и по вертикали. 3. Меню выровнено по центру по вертикали. Примечания по выполнению проектного задания 1. Используйте интересное поведение бегущей строки. Например, достигнув края фрейма, она меняет свое направление на противоположное. 2. Используйте альтернативный текст у фотографий и рисунков. 3. При перечислении увлечений используйте список. 4. Параметры форматирования, используемые на всех страничках, опишите в файле style.css. 5. На сайте должны быть задействованы все изученные параметры форматирования текста. 6. В разделе «Мои друзья» фотографии разместите в несколько рядов (используйте таблицу). При этом на страничке разместите только уменьшенные фотографии, которые являются ссылками на большие фотографии, открывающиеся в новом окне. 84 Приложения. Приложение I «Web-палитра цветов» Приложения Приложение I Web-палитра цветов Цвет Имя цвета Значение Аквамарин Aquamarine #7FFFD4 Античный белый Antiquewhite #FAEBD7 Бежевый Beige #F5F5DC Белый White #FFFFFF Белый дымчатый Whitesmoke #F5F5F5 Бирюзовый Turquoise #40E0D0 Бисквитный Bisque #FFE4C4 Бледно-красно-фиолетовый Palevioletred #DB7093 Бледно-розово-лиловый Lavenderblush #FFF0F5 Бледно-бирюзовый Paleturquoise #AFEEEE Бледно-зеленый Palegreen #98FB98 Бледно-золотой Palegoldenrod #EEE8AA Бледно-лиловый Lavender #E6E6FA Блекло-серо-голубой Cadetblue #5F9EA0 Блекло-голубой Aliceblue #F0F8FF Болотный Moccasin #FFF4B5 Васильковый Cornflowerblue #6495ED Весенний зеленый Springgreen #00FF7F Голубовато-стальной Steelblue #4682B4 Голубой Blue #0000FF Грязно-серый Navajowhite #FFDEAD Дыни Papyawhip #FFEFD5 Желтовато-коричневый Tan #D2B48C Желто-зеленый Yellowgreen #9ACD32 Желтый Yellow #FFFF00 Зеленовато-известковый Limegreen #32CD32 Зелено-желтый Greenyellow #ADFF2F Зеленый Green #008000 Зеленый травы Lawngreen #7CFC00 Золотой Gold #FFD700 Индиго Indigo #4B0082 Коралловый Coral #FF7F50 Коричневый Brown #A52A2A Коричневый Peru #CD853F Королевский голубой Royalblue #4169E1 Красного золота Goldenron #DAA520 Красно-оранжевый Orangered #FF4500 Приложения. Приложение I «Web-палитра цветов» 85 Цвет Имя цвета Значение Красный Red #FF0000 Лазурь Azure #F0FFFF Лесной зелени Forestgreen #228B22 Лимонный Lemonchiffon #FFFACD Льняной Linen #FAF0E6 Малиновый Crimson #DC143C Морской волны Seagreen #2E8B57 Морской пены Deashell #FFF5EE Мятно-кремовый Mintcream #F5FFFA Небесно-голубой Skyblue #87CEEB Ночной синий Midnightblue #191970 Огнеупорного кирпича Firebrick #B22222 Оливковый Olive #808000 Оранжево-розовый Maroon #800000 Оранжево-розовый Salmon #FA8072 Оранжевый Orange #FFA500 Орхидейный Orchid #DA70D6 Охра Sienna #A0522D Персиковый Peachpuff #FFDAB9 Пурпурный Purple #800080 Пшеничный Wheat #F5DEB3 Розово-коричневый Rosybrown #BC8F8F Розовый Pink #FFC0CB Рыже-коричневый Sandybrown #F4A460 Свежего меда Honewdue #F0FFF0 Светло-голубой Lightbkue #ADD8E6 Светло-желтый Lightyellow #FFFFED Светло-зеленый Lightgreen #90EE90 Светло-коралловый Lightcoral #F08080 Светло-кремовый Blanchedalmont #FFEBCD Светло-розовый Lightpink #FFB6C1 Светло-серый Lightgray #D3D3D3 Светло-стальной Lightsteelblue #B0C4DE Светло-фиолетовый Blueviolet #8A2BE2 Светло-циановый Lightcyan #E0FFFF Светлый красно-золотистый Lightgoldenrodyellow #FAFAD2 Светлый морской волны Lightseagreen #20B2AA Светлый небесно-синий Lightskyblue #87CEFA Светлый оранжево-розовый Lightsalmon #FFA07A Светлый серо-фиолетовый Gainsboro #DCDCDC Светлый синевато-серый Lightslategray #778899 Серебристый Silver #C0C0C0 86 Приложения. Приложение I «Web-палитра цветов» Цвет Имя цвета Значение Серовато-синий Slateblue #6A5ACD Серый Gray #BEBEBE Синевато-серый Slategray #708090 Синий Aque #00FFFF Сливовый Plum #DDA0DD Слоновой кости Ivory #FFFFF0 Снежный Snow #FFFAFA Старого дерева Burlywood #DEB887 Старого коньяка Oldlace #FDF5E6 Старой кожи Saddlebrown #8B4513 Темно-красно-синий Darkgoldenron #B8860B Темно-бирюзовый Darkturquoise #00CED1 Темно-голубой Darkblue #00008B Темно-зеленый Cornsilk #FFF8DC Темно-зеленый Darkgreen #006400 Темно-красный Darkred #8B0000 Темно-оливковый Darkolivegreen #556B2F Темно-оранжево-розовый Darksalmon #E9967A Темно-оранжевый Darkorange #FF8C00 Темно-орхидейный Darkorchid #9932CC Темно-розовый Deeppink #FF1493 Темно-серый Darkgrey #A9A9A9 Темно-синий Navy #000080 Темно-фиолетовый Darkviolet #9400D3 Темный морской волны Darkseagreen #8FBC8F Темный небесно-синий Deepskyblue #00BFFF Темный серовато-синий Darkslategrey #483D8B Темный синевато-серый Darkslategray #2F4F4F Темный фуксин Darkmagenta #8B008B Темный хаки Darkkhaki #BDB76B Темный циан Darkcyan #008B8B Томатный Tomato #FF347 Туманно-белый Ghostwhite #F8F8FF Туманно-голубой Powderblue #B0E0E6 Туманно-розовый Mistyrose #FFF4E1 Тускло-васильковый Dodgerblue #1E90FF Тускло-коричневый Olivedrab #6B8E23 Тускло-серый Dimgray #696969 Умеренно-аквамариновый Mediumaquamarine #66CDAA Умеренно-бирюзовый Mediumturquoise #48D1CC Умеренно-голубой Mediumblue #0000CD Умеренно-орхидейный Mediumorchid #BA55D3 Приложения. Приложение I «Web-палитра цветов» 87 Цвет Имя цвета Значение Умеренно-пурпурный Mediumpurple #9370DB Умеренный красно-фиолетовый Mediumvioletred #C71585 Умеренный морской волны Mediumseagreen #3CB371 Умеренный серовато-синий Mediumslateblue #7B68EE Умеренный синевато-серый Mediumspringgreen #00FA9A Фиолетовый Violet #EE82EE Фисташковый Chartreuse #7FFF00 Фуксин Magenta #FF00FF Фуксия Fuchsia #FF00FF Хаки Khaki #F0D58C Цвет извести Lime #00FF00 Цветочно-белый Floralwhite #FFFAF0 Циан Cyan #00FFFF Чайный Teal #008080 Черный Black #000000 Чертополоха Thistle #D8BFD8 Шоколадный Chocolate #D2691E Ярко-красный Indianred #CD5C5C Ярко-розовый Hotpink #FF69B4 88 Приложения. Приложение II «Таблица замены специальных символов» Приложение II Таблица замены специальных символов В спецификации HTML указано большое количество спецсимволов, но только некоторые из них используются. Наиболее часто используемые спецсимволы приведены в этой таблице. При замене символов, указанных в первом столбце, можно использовать имя, указанное в третьем столбце, либо код, указанный в четвертом столбце. Символ Описание Имя Код Пробелы и тире неразрывный пробел узкий пробел (еn-шириной в букву N) широкий пробел (em-шириной в букву M) - узкое тире (en-тире) – – — широкое тире (em -тире) — — мягкий перенос Кавычки ′ штрих (минуты, футы) ′ ′ ″ двойной штрих (секунды, дюймы) ″ ″ " прямая кавычка " " “ кавычка-лапка левая “ “ ” кавычка-лапка правая верхняя ” ” „ кавычка-лапка правая нижняя „ „ « кавычка-елочка открывающая « « » кавычка-елочка закрывающая » » ‹ одинарная угловая кавычка открывающая ‹ ‹ › одинарная угловая кавычка закрывающая › › ‘ левая верхняя одинарная кавычка ‘ ‘ ’ правая верхняя одинарная кавычка ’ ’ ‚ правая нижняя одинарная кавычка ‚ ‚ Знаки валют ¢ знак цента ¢ ¢ £ знак фунта £ £ € знак евро € € ¥ знак йены и юаня ¥ ¥ ¤ знак валюты ¤ ¤ ƒ знак флорина ƒ ƒ Прочие символы § параграф § § Приложения. Приложение II «Таблица замены специальных символов» 89 Символ Описание Имя Код ° градус ° ° … многоточие … … © копирайт © © ® знак зарегистрированной торговой марки ® ® ™ знак торговой марки ™ ™ µ знак микро µ µ ‰ тысячная доля ‰ ‰ & амперсант & & ⎯ надчеркивание ‾ ‾ ´ знак ударения ´ ´ ¦ вертикальный пунктир ¦ ¦ ¶ знак абзаца ¶ ¶ ¡ перевернутый восклицательный знак ¡ ¡ ¿ перевернутый вопросительный знак ¿ ¿ Маркеры • простой маркер • • · средняя точка · · † крестик † † ‡ двойной крестик ‡ ‡ ♠ пики ♠ ♠ ♣ трефы ♣ ♣ ♥ червы ♥ ♥ ♦ бубны ♦ ♦ ◊ ромб ◊ ◊ Стрелки ← стрелка влево ← ← ↑ стрелка вверх ↑ ↑ → стрелка вправо → → ↓ стрелка вниз ↓ ↓ ↔ стрелка влево и вправо ↔ ↔ Знаки арифметических и математических операций × знак умножения × × ÷ знак деления ÷ ÷ ⁄ дробная черта ⁄ ⁄ − знак минус − − < знак меньше < < > знак больше > > 90 Приложения. Приложение II «Таблица замены специальных символов» Символ Описание Имя Код ≤ меньше или равно ≤ ≤ ≥ больше или равно ≥ ≥ ≈ приблизительно равно (асимптотически равно) ≈ ≈ ≠ не равно ≠ ≠ ≡ совпадает с ≡ ≡ ± плюс-минус ± ± ¼ одна четвёртая ¼ ¼ ½ одна вторая ½ ½ ¾ три четверти ¾ ¾ ¹ единица в верхнем индексе ¹ ¹ ² два в верхнем индексе (квадрат) ² ² ³ три в верхнем индексе (куб) ³ ³ √ квадратный корень (радикал) √ √ ∞ знак бесконечность ∞ ∞ ∑ знак суммирования ∑ ∑ ∏ знак произведения ∏ ∏ ∂ частичный дифференциал ∂ ∂ ∫ интэграл ∫ ∫ ƒ знак функции ƒ ƒ Буквы латинского алфавита æ латинские строчные буквы ae æ æ ð латинские строчные символы eth ð ð Θ заглавная тета Θ Θ Σ заглавная сигма Σ Σ Ω заглавная омега Ω Ω α строчная альфа α α β строчная бета β β γ строчная гамма γ γ δ строчная дельта δ δ ε строчная эпсилон ε ε ζ строчная дзета ζ ζ η строчная эта η η θ строчная тета θ θ ι строчная иота ι ι κ строчная каппа κ κ λ строчная лямбда λ λ μ строчная мю μ μ Приложения. Приложение II «Таблица замены специальных символов» 91 Символ Описание Имя Код ν строчная ню ν ν ξ строчная кси ξ ξ ο строчная омикрон ο ο π строчная пи π π ρ строчная ро ρ ρ ς строчная сигма(final) ς ς σ строчная сигма σ σ τ строчная тау τ τ υ строчная ипсилон υ υ φ строчная фи φ φ χ строчная хи χ χ ψ строчная пси ψ ψ ω строчная омега ω ω 92 Приложения. Приложение III «Параметры, доступные при использовании CSS» Приложение III Параметры форматирования, доступные при использовании CSS Параметр Возможные значения Описание атрибута Работа с текстом letter-spacing Например: letter-spacing:5px Расстояние между буквами (межсимвольный интервал). В пикселях (px) или пунктах (pt) line-height Например: line-height:3% Высота текущей строки (междустрочный интервал). В пикселях (px), пунктах (pt) или процентах (%) относительно текущего размера шрифта text-align • left – по левому краю, • right – по правому краю, • center – по центру, • justify – по ширине. Например: text-align: left Выравнивание текста text-indent Например: Отступ первой строки. В пикселях (px), пунктах (pt) или процентах (%) относительно ширины родительского элемента vertical-align • baseline — выравнивание по образцу родительского элемента • super — переводит элемент в верхний регистр • sub — нижний регистр • text-top — выравнивает по верху текста, набранного родительским шрифтом • text-bottom — выравнивает по низу текста, набранного родительским шрифтом • top — по самому верху Вертикальное положение текущего элемента Приложения. Приложение III «Параметры, доступные при использовании CSS» 93 Параметр Возможные значения Описание атрибута • bottom — по самому низу Например: vertical-align:top text-decoration • underline – подчеркнутый • overline – надчеркнутый • line-through – перечеркнутый Например: text-decoration:overline «Украшение» текста text-transform • Capitalize - каждое слово начинается с большой буквы • UPPERCASE - каждая буква текста становится заглавной • lowercase - каждая буква текста становится маленькой Например: text-transform:сapitalize Изменение текста Работа с фоном и цветом color Например: color:#AF3399 Задает цвет (любой из трех способов задания) backgroung-color Например: background-color:red Цвет фона элемента background-image Например: background-image:URL(fon.jpg) Задает фоновое изображение background Например: background: black fixed 50% 0% Объединяет все вышеперечисленные свойства background- attachment • fixed – не будет прокручиваться, • scroll – будет прокручиваться. Например: background-attachment:fixed Определяет, будет ли прокручиваться фон background-position Например: background-position: 10px 5% Определяет начальное положение фоновой картинки по горизонтали и вертикали. В пикселях (px) или процентах (%) 94 Приложения. Приложение III «Параметры, доступные при использовании CSS» Параметр Возможные значения Описание атрибута background-repeat • repeat-x – повтор по горизонтали, • repeat-y – повтор по вертикали, • repeat (по умолчанию) – по всем направлениям, • no-repeat – не повторяется. Например: background-repeat:repeat-x Определяет, повторяется ли фоновая картинка Работа со шрифтом font-family Например: font-family:Arial Задает название шрифта font-style • normal – без изменений • italic – курсив Например: font-style:italic Задает стиль начертания font-variant • normal - без изменений • small-caps - заменяет все буквы на большие. Например: font-variant:small-caps Задает прописные (заглавные буквы) font-weight • normal - без изменений • bold – жирный • любое значение от 100 до 900 Например: font-weight:bold Задает жирность текста font-size • smaller • larger • числовое значение Например: font-size:30pх Задает размер шрифта. В пикселях (pх), пунктах (pt) или процентах (%) font Например: font: italic bold Arial 12pt Объединяет все описанные выше свойства Работа с рамкой border-top-width, border-right-width, border-bottom-width, border-left-width Например: border-top-width:100px Толщина верхней, правой, нижней или левой рамки соответственно. В пикселях (px) или Приложения. Приложение III «Параметры, доступные при использовании CSS» 95 Параметр Возможные значения Описание атрибута процентах (%) border-color Например: border-color:green Цвет рамки border-style • none - рамка отсутствует • dotted - рамка представляется мелким пунктиром. • dashed - рамка представляется крупным пунктиром • solid – сплошная рамка • double – рамка в виде двух сплошных линий. • groove - рамка выглядит вдавленной • ridge - рамка выглядит выпуклой. Например: border-style:double Стиль рамки Работа с отступом margin-top, margin-right, margin-bottom, margin-left. Например: margin-top:100px Отступ сверху, справа, снизу и слева соответственно у блочных элементов (таблицы, слоя, картинки, тэга ). В пикселях (px) или процентах (%) margin Например: margin:10% Определяет отступ во всех направлениях padding-top, padding-right, padding-bottom, Например: padding-bottom:100px Отступ сверху, справа, снизу и слева соответственно у любого элемента (таблицы, слоя, параграфа и др.). В пикселях (px) или процентах (%) padding-left padding Например: padding:10px Отступ во всех направлениях 96 Приложения. Приложение III «Параметры, доступные при использовании CSS» Параметр Возможные значения Описание атрибута Работа с размером элемента width Например: width:10% Ширина элемента. В пикселях (px) или процентах (%) height Например: height:100pх Высота элемента. В пикселях (px) или процентах (%) Позиционирование элемента (слоя) position • absolute — координаты будут вычисляться от верхнего левого угла документа • relative — координаты будут вычисляться от верхнего левого угла родительского элемента • static — элемент не будет прокручиваться при прокручивании страницы Например: position:absolute Устанавливает, каким образом определяется положение элемента на странице top Например: top:10px Устанавливает вертикальную координату элемента относительно верхнего края. В пикселях (px) или в процентах (%) от высоты родительского элемента bottom Например: bottom:10% Устанавливает вертикальную координату элемента относительно нижнего края. В пикселях (px) или в процентах (%) от высоты родительского элемента left Например: left:10% Устанавливает горизонтальную координату элемента относительно левого Приложения. Приложение III «Параметры, доступные при использовании CSS» 97 Параметр Возможные значения Описание атрибута края. В пикселях (px) или в процентах (%) от ширины родительского элемента right Например: right:10px Устанавливает горизонтальную координату элемента относительно правого края. В пикселях (px) или в процентах (%) от ширины родительского элемента Видимость элемента (слоя) visibility • visible — элемент будет виден • hidden — элемент не будет виден Например: visibility:visible Устанавливает, будет ли виден элемент z-index Например: Указывает, в каком порядке элементы будут перекрываться. z-index:-3 Элементы с более высоким z-index будут перекрывать элементы с более низким. Возможны любые значения, включая отрицательные. В случае отрицательных значений элементы буду закрыты обычным текстом; c положительным значением — будут лежать «перед» обычным текстом 98 Приложения. Приложение IV «Список тэгов и параметров, рассмотренных в пособии» Приложение IV Список тэгов и параметров, рассмотренных в пособии Тэг Параметры Назначение Структура HTML-документа и границы HTML- документа голова HTML-документа и Приложения. Приложение IV «Список тэгов и параметров, рассмотренных в пособии» 99 Тэг Параметры Назначение и для отметки имен переменных и полужирный шрифт и курсив и подчеркнутый и шрифт фиксированной ширины и нижний индекс и верхний индекс работа со шрифтом size размер шрифта face тип шрифта color цвет бегущая строка bgcolor цвет фона height высота фоновой полосы (в px или %) width ширина полосы бегущей строки (в px или %) direction направление бегущей строки (возможные значения left, right, up, down) behavior поведение бегущей строки (возможные значения scroll, slide, alternate) hspace, vspace горизонтальный и вертикальный отступы у бегущей строки (в px или %) loop количество переходов строки по экрану scrollamount скорость движения строки (в px в секунду)
100 Приложения. Приложение IV «Список тэгов и параметров, рассмотренных в пособии» Тэг Параметры Назначение (возможные значения i, I, a, A,)
disc) Графика в HTML вставка рисунка src путь к рисунку width ширина рисунка (в px) height высота рисунка (в px) align положение рисунка относительно текста (возможные значения top, middle, center, bottom, left, right) hspace, vspace горизонтальный и вертикальный отступы текста от изображения (в px) border граница картинки (по умолчанию 1) alt альтернативный текст горизонтальная полоса width длина линии (в % или px) size ширина линии (в px) align положение линии на странице (возможные значения right, left, center) color цвет линии Работа с таблицами Приложения. Приложение IV «Список тэгов и параметров, рассмотренных в пособии» 101 Тэг Параметры Назначение bgcolor цвет фона под таблицей background фоновый рисунок таблицы align положение таблицы на странице (возможные значения left, center, right) cellpadding отступ текста от границ ячеек cellspacing отступ табличных объектов (ячейки, строки) друг от друга (возможные значения bottom, left, right, top) |
1 2 3 4 5 6
строка таблицы align выравнивание внутри строки
(возможные значения:
left,
right,
center); valign вертикальное выравнивание внутри строки
(возможные значения: top, bottom,
middle); bgcolor цвет фона внутри строки background фоновый рисунок строки
и ячейка-заголовок строки или столбца
и ячейка данных сolspan, rowspan растягивание ячейки на несколько столбцов или несколько строк высота ячейки(в px или
%) height width ширина ячейки (в px или
%)
(возможные значения:
left,
right,
center); valign вертикальное выравнивание внутри строки
(возможные значения: top, bottom,
middle); bgcolor цвет фона внутри строки background фоновый рисунок строки
%) height width ширина ячейки (в px или
%)
102
Приложения. Приложение IV «Список тэгов и параметров, рассмотренных в пособии»
Тэг
Параметры
Назначение
nowrap запрет или разрешение на перенос строк внутри ячейки
Ссылки
текст ссылки задание ссылки метки">текст метки задание метки документа#имя метки">текст ссылки. задание ссылки на метку link цвет ссылки, еще не посещенной alink цвет активной ссылки vlink цвет ссылки, уже посещенной title текст подсказки, которая всплывает при наведении на ссылку target способ открытия документа, на который ведет ссылка
(возможные значения
_self, _parent, _top)
Фреймы
задание фреймовой структуры rows количество горизонтальных фреймов cols количество вертикальных фреймов frameborder наличие рамки, обрамляющей фреймы
(возможные значения
“yes” или “no”) border толщина рамки, обрамляющей фреймы (в px или %)
Приложения. Приложение IV «Список тэгов и параметров, рассмотренных в пособии» 103
Тэг
Параметры
Назначение
bordercolor цвет рамки, обрамляющей фреймы
… задание фрейма src путь к файлу, который отображается в данном фрейме name имя фрейма scrolling наличие полосы прокрутки во фрейме
(значения «yes» или
«no») noresize разрешение или запрет на изменение размера фрейма marginwidth, marginheight отступ содержимого внутри фрейма по горизонтали и вертикали соответственно (в px)
104
Приложения. Приложение IV «Список тэгов и параметров, рассмотренных в пособии»
Тэг
Параметры
Назначение
value определяет начальное
(по умолчанию) значение поля либо значение, которое нужно отправить на сервер type определяет тип поля ввода
(возможные значения – text, password,
checkbox, radio, reset,
submit, image, file)
текстовое поле в несколько строк name наименование поля cols число колонок
(символов) в текстовой области rows число видимых строк в текстовой области
список значений name имя объекта SELECT multiple позволяет выбрать более чем одно наименование single из списка можно выбрать только один вариант size определяет число пунктов, видимых для пользователя