Metod_rekomendatsii_po_HTML
.pdf
|
путем данные будут посылаться на сервер. |
|
Комментарий: |
|||
|
Значения параметра method могут быть |
|
||||
|
1. Создание формы со- |
|||||
|
следующие: get – данные присоединяются |
стоит из двух этапов: пер- |
||||
|
к адресу сервера после знака ? и передают- |
вый заключается в созда- |
||||
|
ся через адресную строку браузера. Этот |
нии самой формы, а вто- |
||||
|
рой |
– в |
создании про- |
|||
|
метод нужно использовать, если не пере- |
|||||
|
граммы-обработчика, об- |
|||||
|
дается больших объемов информации или |
|||||
|
рабатывающей |
данные |
||||
|
отдельных файлов; post – применяется для |
этой формы. |
|
|||
|
отправки данных на сервер. Данные, |
от- |
2. Для обработки данных |
|||
|
правляемые с помощью этого метода, |
не |
из |
форм |
используются |
|
|
специальные языки веб-про- |
|||||
|
видны в заголовке URL, поскольку они со- |
|||||
|
граммирования PHP, PERL, |
|||||
|
держатся в теле сообщения. Этот метод |
|||||
|
JavaScript и др. |
|
||||
|
подходит дня отправки больших объемов |
3. В |
рамках инструкции |
|||
|
информации. |
|
рассматриваются |
только |
||
|
|
основы создания |
интер- |
|||
|
Элементы Input |
|
||||
|
|
фейса форм, поэтому па- |
||||
Решение |
Тег <INPUT> используется для ввода тек- |
раметры method и action |
||||
|
|
|
|
|||
тега <FORM> опущены.
стовой информации, пересылки файлов
или управляющей информации. Параметры тега <INPUT>: name – имя поля используется как уникальный идентификатор поля, по которому впоследствии программа обработки сможет получить данные, помещенные пользователем в это поле; size – визуальный размер поля ввода на экране в символах (по умолчанию size = 20); maxlength – количество символов, которое пользователи могут ввести в поле ввода. По умолчанию это значение не ограничено; value – начальное (по умолчанию) значение поля; type – тип поля ввода. Пример поля ввода текста и поля ввода пароля 
Пример флажков, позволяющих ответить «да» или «нет» 
31
Пример переключателей, позволяющих выбрать один возможный вариант 
Пример кнопки, при нажатии на которую все поля формы примут значения, описанные для них по умолчанию 
Пример кнопки, при нажатии на которую на сервере будет вызвана управляющая программа, описанная в параметре формы action 
Пример предыдущей кнопки в виде рисунка 
Пример файлового поля для передачи файлов на сервер 
Элементы Textarea
Решение |
Тег <TEXTAREA> используется для ввода большого количества |
||
|
текстовой информации (в несколько строк). Параметры тега |
||
|
<TEXTAREA>: name – имя поля; cols – число колонок (символов) в |
||
|
текстовой области; rows – число видимых строк в текстовой облас- |
||
|
ти. Пример |
|
|
|
|
||
|
|
|
|
|
Элементы Select |
Решение |
Тег <SELECT> дает возможность пользователю выбрать значение |
|
из фиксированного списка значений. Обычно этот элемент пред- |
32
ставлен выпадающим списком. Параметры тега <SELECT>: name – имя объекта SELECT; multiple – позволяет выбрать более чем одно наименование; single – из списка можно выбрать только один вариант (задан по умолчанию); size – определяет число пунктов, видимых для пользователя. По умолчанию список на экране отображается в виде выпадающего списка (видно одно наименование), если size > 1, то браузер представляет на экране обычный список (число – количество видимых наименований).
Для определения списка пунктов используются теги <OPTION>. Параметры этого тега: selected – указывает, какой пункт выбран по умолчанию; value – значение, которое передается на сервер для обработки.
Пример поля со списком с возможностью выбора только одного пункта 
Пример поля со списком с возможностью выбора нескольких пунктов 
33
2.6. Каскадные таблицы стилей
Задача № 1 |
Способы задания каскадных таблиц стилей |
Решение
Решение
Строчный способ задания стиля
Этот способ целесообразно использовать в том случае, если стиль нужно применить однократно к конкретному тегу и требуется использовать параметры форматирования, доступные только через CSS.
Стили вставляются прямо в описание тегов HTML с помощью специального параметра style. Пример строчного способа задания стиля 
Вложенный способ задания стиля
Комментарий:
Каскадные таблицы сти-
лей (Cascading Style Sheets) позволяют:
1.Задавать шаблон стиля (набор определенных параметров форматирования) и многократно применять его в дальнейшем.
2.Использовать гораздо более широкий спектр параметров форматирования объектов HTML.
Этот способ оправданно применять, если стиль тега в HTML-документе используется многократно. В этом случае стиль описывается один раз в теге <STYLE>. Этот тег и его содержимое располагаются в разделе <HEAD> HTML-документа. Пример вложенного способа задания стиля
Заметка:
Перечень основных параметров форматирования, доступных при использовании CSS, можно найти в Приложении III «Параметры форматирования CSS».
|
Внешний способ задания стиля |
Решение |
Этот способ применяется, если описанные стили используются |
|
сразу в нескольких HTML-документах. Изначально стили описыва- |
|
ются в отдельном текстовом файле с расширением *.css, а затем в |
34
раздел <HEAD> нужного HTML-документа вставляется ссылка на этот текстовый файл: <LINK rel=stylesheet type=text/css href=“имя файла с описанными стилями”>.
Пример содержимого файла style.css
Пример внешнего способа задания стиля 
Задача № 2
Решение
Способы задания классов стилей
Внутренний способ задания класса стиля
Классы стилей задаются в самом HTML-до- кументе в разделе <STYLE>. Каждое новое отображение элемента HTML-документа представляется новым классом с уникальным именем, который начинается с точки, например:
Комментарий:
Классы стилей позволяют использовать для одного и того же элемента несколько разных стилей, интерпретируемых браузером последовательно.
.center {text-align:center}
Пример внутреннего способа описания класса стиля
35
Внешний способ задания класса стиля
Решение Задаются в отдельном текстовом файле с расширением *.css, а затем в разделе <HEAD> HTML-документа указывается ссылка на этот файл: <LINK rel=stylesheet type=text/css href=“имя файла с
описанными классами стилей”>.
Пример содержимого файла стилей style.css 
Пример внешнего способа описания класса стиля
2.7. Позиционирование элементов в HTML-документе
Задача № 1 |
Позиционирование различных элементов |
|
|
Создание слоев |
|
Решение |
Использование слоев позволяет управ- |
Комментарий: |
|
лять группой элементов в целом, в том чис- |
Слой – это HTML-объект, |
|
ле и позиционировать. |
который объединяет не- |
|
Слой задается тегом <DIV>. Например, |
сколько элементов, рас- |
|
чтобы объединить несколько абзацев в |
положенных на HTML-до- |
|
один слой, необходимо поместить их меж- |
кументе (таблицы, текст, |
|
|
|
ду открывающим и закрывающим тегом |
картинки) в одну группу. |
|
|
<DIV>. Пример слоя |
|
Решение
36
Позиционирование с помощью стилей
Позиционирование элемента задается с
помощью CSS через параметр style, в котором атрибуты перечисляются через точку с запятой. В атрибуты позиционирования входят:
Комментарий:
Позиционирование – это пространственное размещение элементов HTML-документа.
1.Параметры размещения элемента: position – устанавливает, каким образом вычисляется положение слоя на странице. Возможные значения: absolute – координаты позиции элемента будут вычисляться от верхнего левого угла странички; relative – координаты будут вычисляться от верхнего левого угла родительского элемента, т. е. элемента, в котором находится позиционируемый элемент; static – элемент всегда будет находиться в зафиксированном месте окна браузера при прокручивании страницы; top – устанавливает вертикальную координату элемента в пикселях (px) или в процентах (%); left – устанавливает горизонтальную координату элемента в пикселях (pх) или в процентах (%); width – устанавливает ширину элемента в пикселях (pх) или в процентах (%); height – устанавливает высоту элемента в пикселях (pх) или в процентах (%).
2.Параметры «видимости» элемента: visibility – устанавливает, будет ли виден элемент (visible – слой будет виден; hidden – слой не будет виден); z-index – указывает, в каком порядке слои будут перекрываться. Слои с бoльшим z-index будут перекрывать слои с меньшим z-index. Возможны любые значения, включая отрицательные. В случае отрицательных значений элементы данного слоя будут закрыты обычным текстом; с положительным значением – будут лежать «перед» обычным текстом, перекрывая его. По умол-
чанию z-index=0.
Пример создания тени текста 
37
Библиографический список
1.Богомолова О. Б. Web-конструирование на HTML: практикум. М.: Бином. Лаборатория знаний, 2008. 192 с.
2.Васенина Е. А. Основы языка HTML: учебно-методическое пособие для студентов прикладных и экономических специальностей. Киров: Изд-во ВятГГУ, 2005. 106 с.
3.Дронов В. А. HTML 5, CSS 3 и Web 2.0. Разработка современных Webсайтов. СПб.: БХВ-Петербург, 2011. 416 с.
4.Квинт И. HTML, XHTML и CSS на 100 %. СПб.: Питер, 2010. 384 с.
5.Кузин А. В. Компьютерные сети: учебное пособие. 3-е изд., перераб. и доп. М.: Форум: Инфра-М, 2011. 192 с.
6.Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. 3-е изд., перераб. и доп. СПб.: БХВ-Петербург, 2010.
912 с.
7.Харунжева Е. В., Харунжев А. А. Новые информационные технологии: учебное пособие для студентов гуманитарных специальностей. Киров: Изд-во ВятГГУ, 2007. 119 с.
38
Приложение I
Веб-палитра цветов
Цвет |
Имя |
Код |
Цвет |
Имя |
Код |
|
|
|
|
|
|
|
|
Аквамарин |
Aquamarine |
#7FFFD4 |
Светло-желтый |
Lightyellow |
#FFFFED |
|
|
|
|
|
|
|
|
Бежевый |
Beige |
#F5F5DC |
Светло- |
Lightgreen |
#90EE90 |
|
зеленый |
||||||
|
|
|
|
|
||
Белый |
White |
#FFFFFF |
Светло- |
Lightpink |
#FFB6C1 |
|
розовый |
||||||
|
|
|
|
|
||
Бирюзовый |
Turquoise |
#40E0D0 |
Светло-серый |
Lightgray |
#D3D3D3 |
|
|
|
|
|
|
|
|
Болотный |
Moccasin |
#FFF4B5 |
Серебристый |
Silver |
#C0C0C0 |
|
|
||||||
|
|
|
|
|
|
|
Васильковый |
Cornflowerblue |
#6495ED |
Серый |
Gray |
#BEBEBE |
|
|
|
|
|
|
|
|
Голубой |
Blue |
#0000FF |
Синий |
Aque |
#00FFFF |
|
|
|
|
|
|
|
|
Желтый |
Yellow |
#FFFF00 |
Темно-голубой |
Darkblue |
#00008B |
|
|
|
|
|
|
|
|
Зеленый |
Green |
#008000 |
Темно-зеленый |
Darkgreen |
#006400 |
|
|
|
|
|
|
|
|
Зеленой травы |
Lawngreen |
#7CFC00 |
Темно-красный |
Darkred |
#8B0000 |
|
|
|
|
|
|
|
|
Золотой |
Gold |
#FFD700 |
Темно-серый |
Darkgrey |
#A9A9A9 |
|
|
|
|
|
|
|
|
Индиго |
Indigo |
#4B0082 |
Темно-синий |
Navy |
#000080 |
|
|
|
|
|
|
|
|
Коралловый |
Coral |
#FF7F50 |
Фиолетовый |
Violet |
#EE82EE |
|
|
|
|
|
|
|
|
Коричневый |
Brown |
#A52A2A |
Фисташковый |
Chartreuse |
#7FFF00 |
|
|
|
|
|
|
|
|
Красный |
Red |
#FF0000 |
Фуксин |
Magenta |
#FF00FF |
|
|
|
|
|
|
|
|
Лимонный |
Lemonchiffon |
#FFFACD |
Фуксия |
Fuchsia |
#FF00FF |
|
|
|
|
|
|
|
|
Малиновый |
Crimson |
#DC143C |
Хаки |
Khaki |
#F0D58C |
|
|
|
|
|
|
|
|
Оливковый |
Olive |
#808000 |
Черный |
Mediumpurple |
#000000 |
|
|
|
|
|
|
|
|
Оранжевый |
Orange |
#FFA500 |
Чертополоха |
Mediumvioletred |
#D8BFD8 |
|
|
|
|
|
|
|
|
Персиковый |
Peachpuff |
#FFDAB9 |
Шоколадный |
Mediumseagreen |
#D2691E |
|
|
|
|
|
|
|
|
Розовый |
Pink |
#FFC0CB |
Ярко-красный |
Indianred |
#CD5C5C |
|
|
|
|
|
|
|
|
Светло- |
Lightbkue |
#ADD8E6 |
Ярко-розовый |
Hotpink |
#FF69B4 |
|
голубой |
||||||
|
|
|
|
|
39
Приложение II
Таблица замены специальных символов
Символ |
Имя |
Код |
Символ |
Имя |
Код |
|
неразрывный |
|
|
♣ |
♣ |
♣ |
|
пробел |
||||||
|
|
|
|
|
||
- |
– |
– |
♥ |
♥ |
♥ |
|
— |
— |
— |
♦ |
♦ |
♦ |
|
|
|
|
◊ |
◊ |
◊ |
|
' |
′ |
′ |
← |
← |
← |
|
" |
″ |
″ |
↑ |
↑ |
↑ |
|
“ |
“ |
“ |
→ |
→ |
→ |
|
” |
” |
” |
↓ |
↓ |
↓ |
|
« |
« |
« |
↔ |
↔ |
↔ |
|
» |
» |
» |
|
× |
× |
|
‹ |
‹ |
‹ |
|
÷ |
÷ |
|
› |
› |
› |
/ |
⁄ |
⁄ |
|
‘ |
‘ |
‘ |
|
&minus |
− |
|
’ |
’ |
’ |
< |
< |
< |
|
‚ |
‚ |
‚ |
> |
> |
> |
|
¢ |
¢ |
¢ |
|
≤ |
≤ |
|
£ |
£ |
£ |
|
≥ |
≥ |
|
€ |
€ |
€ |
|
≈ |
≈ |
|
Y |
¥ |
¥ |
|
≠ |
≠ |
|
§ |
§ |
§ |
± |
± |
± |
|
° |
° |
° |
¼ |
¼ |
¼ |
|
… |
… |
… |
½ |
½ |
½ |
|
© |
© |
© |
¾ |
¾ |
¾ |
|
® |
® |
® |
¹ |
¹ |
¹ |
|
™ |
™ |
™ |
² |
² |
² |
|
& |
& |
& |
³ |
³ |
³ |
|
¯ |
‾ |
‾ |
√ |
√ |
√ |
|
' |
´ |
´ |
∞ |
∞ |
∞ |
|
¦ |
¦ |
¦ |
∑ |
∑ |
∑ |
|
• |
• |
• |
∏ |
∏ |
∏ |
|
· |
· |
· |
∂ |
∂ |
∂ |
|
† |
† |
† |
∫ |
∫ |
∫ |
|
♠ |
♠ |
♠ |
ƒ |
ƒ |
ƒ |
40