Что такое идентификатор элемента и для чего он нужен?
Ответ.
Идентификатор элемента — это уникальная метка, которую
разработчик приписывает элементу. Идентификатор выделяет элемент
среди других элементов на странице. Например, в HTML-коде может быть
несколько элементов P, и идентификаторы позволяют их
отличать друг от друга. Идентификатор можно использовать
в скриптах для управления событиями, происходящими с элементами или
написать стилевое определение, привязав его к идентификатору. Кроме того,
можно записать гипертекстовый переход к элементу по его идентификатору.
Как назначить элементу идентификатор?
Ответ.
Идентификатор назначается элементу при помощи атрибута id.
Значением атрибута является идентификатор.
Из каких символов может состоять идентификатор?
Ответ. Идентификатор должен начинаться с буквы (стандарт рекомендует латинскую букву) и может продолжаться любым количеством букв, арабских цифр, символов дефиса (“-”), подчёркивания (“_”), двоеточия (“:”) и точки (“.”).
Как использовать идентификатор для построения стилевого определения?
Ответ. Стилевое определение строится как класс, но вместо точки записывается символ рамки, за которым следует идентификатор:
#идентификатор
{
набор стилевых правил
}
Такое стилевое правило будет применяться к элементу с указанным идентификатором:
<ELEMENT id=идентификатор>...</ELEMENT>
Вася записал стилевое определение:
#el {color:red}
В HTML-коде Вася так использовал своё определение:
<P>
Стилевые определения можно задавать:
<UL>
<LI id="el">в открывающем теге;
<LI id="el">в головной части HTML-файла;
<LI id="el">в отдельном CSS-файле.
</UL>
Какую ошибку допустил Вася?
Ответ.
Вася записал три элемента LI с одним и тем же идентификатором.
Но в коде не должно быть несколько элементов c одним и тем же идентификатором.
В данном случае нужно использовать определение класса:
.el {color:red}
<P>
Стилевые определения можно задавать:
<UL>
<LI class="el">в открывающем теге;
<LI class="el">в головной части HTML-файла;
<LI class="el">в отдельном CSS-файле.
</UL>
Опишите элемент, который кодирует гипертекстовую ссылку. Как этот элемент отображается на экране и что должен сделать пользователь, чтобы выполнить гипертекстовый переход?
Ответ.
Для кодирования гипертекстового перехода
используют элемент A с обязательным закрывающим тегом:
<A href="переход">текст</A>
Атрибут href задаёт объект, на который должен выполниться
переход при щелчке на элементе A. Элемент A,
представляется на экране в виде области, на которой курсор превращается
в указующий перст. Текстовое содержание элемента отображается,
как правило, другим цветом и подчёркивается.
Запишите гипертекстовый переход на начало следующий фрагмента HTML-кода:
<P id="def">
All-in-one. Исполнение изделия или программы
по принципу «всё-в-одном».
Ответ.
<A href="#def">переход</A>
Запишите гипертекстовый переход на начало документа 01.htm,
который находится в том же каталоге, что и файл со ссылкой.
Ответ.
<A href="01.htm">переход</A>
Запишите гипертекстовый переход на элемент с идентификатором
t в файле 01.htm,
расположенный в том же каталоге, что и файл со ссылкой.
Ответ.
<A href="01.htm#t">переход</A>
Запишите гипертекстовые переходы.
Ответ.
| № | Из файла | В файл | На элемент | Ссылка |
|---|---|---|---|---|
| 01 | index.htm |
01.htm |
|
|
| 02 | index.htm |
02.htm |
|
|
| 03 | index.htm |
01add.htm |
|
|
| 04 | 02.htm |
index.htm |
|
|
| 05 | 01add.htm |
index.htm |
|
|
| 06 | 01add.htm |
0201.htm |
|
|
| 07 | 02.htm |
0201.htm |
|
|
| 08 | 01.htm |
0201.htm |
|
|
Какой атрибут элемента BODY задаёт цвет
неотработанной ссылки?
Ответ.
Цвет неотработанной ссылки задаётся в элементе BODY
при помощи атрибута link .
Какой атрибут элемента BODY задаёт цвет
активной ссылки?
Ответ.
Цвет активной ссылки задаётся в элементе BODY
при помощи атрибута alink.
Какой атрибут элемента BODY задаёт цвет
отработанной ссылки?
Ответ.
Цвет отработанной ссылки задаётся в элементе BODY
при помощи атрибута vlink.
Почему важно, чтобы неотработанные, активные и отработанные ссылки были разных цветов?
Ответ. Разные цвета неотработанных и отработанных ссылок помогают пользователю ориентироваться на странице. При одном взгляде на ссылку пользователь определяет, “ходил” он по ссылке или нет. Цвет активной ссылки подсказывает пользователю, что щелчок удался и новая страница загружается браузером.
Какими рекомендации существуют по выбору цветов для ссылок? Чем обосновываются эти рекомендации?
Ответ. Цвет неотработанной ссылки должен быть заметным, контрастным по отношению к остальным цветам страницы. Ведь мы хотим привлечь к ссылке внимание пользователя, сделать так, чтобы его рука сама потянулась к мышке, и он сделал то физическое усилие, на которое рассчитывал проектировщик страницы.
Посещенные (отработанные) ссылки должны иметь существенно меньшую напряжённость окраски. Они должны сообщать об окончании своей рабочей смены и отдыхать. Не надо по-прежнему фиксировать на них взгляд пользователя.
Цвет ссылки, сразу после щелчка, должен стать ещё более активным, чем цвет неотработанной ссылки: “Внимание! Я (ссылка) приступила к работе. Документ загружается и скоро появится на вашем экране. Потерпите немного!”
Почему не рекомендуется выделять элементы подчёркиванием и цветом?
Ответ. Так обычно выделяют ссылки.
Почему не рекомендуется помечать как ссылку большой текст?
Ответ. Ссылка — это довольно сильное выделение на странице. Известно, что выделить много — не выделить ничего. Значит, нужно стараться выделять в ссылку одно слово.
Почему не рекомендуется выделять ссылки курсивом, жирностью, размером, разрядкой?
Ответ. Ссылка уже имеет два выделения — цвет и подчёркивание, дополнительные выделения противоречат стандартным дизайнерским рекомендациям.
Почему не следует записывать подряд несколько ссылок?
Ответ. Пользователь может подумать, что видит одну большую ссылку (сколько здесь ссылок?).
С помощью какого псевдокласса можно задавать стиль неотработанной ссылки?
Ответ.
Стиль неотработанной ссылки можно задавать с помощью псевдокласса
A:link (например, A:link{color:blue}).
С помощью какого псевдокласса можно задавать стиль активной ссылки?
Ответ.
Стиль активной ссылки можно задавать с помощью псевдокласса
A:active (например, A:active{color:red}).
С помощью какого псевдокласса можно задавать стиль отработанной ссылки?
Ответ.
Стиль отработанной ссылки можно задавать с помощью псевдокласса
A:visited (например, A:visited{color:purple}).
С помощью какого псевдокласса можно задавать стиль ссылки, в момент расположения над ней курсора?
Ответ.
Стиль ссылки в момент расположения над ней курсора можно задавать с помощью псевдокласса
A:hover (например, A:hover{color:red}).
Приведите формулу, по которой записываются ссылки на ресурсы Интернета.
Ответ.
название протокола://адрес сервера/расположение файла
Запишите ссылку на картинку pic.jpg, которая располагается
на ftp-сервере с адресом ftp.botik.ru в каталоге
pub.
Ответ.
<A href="ftp://ftp.botik.ru/pub/pic.jpg">текст</A>
Запишите ссылку на документ products.htm, который расположен
в каталоге news/products/ сайта www.canon.ru.
Ответ.
<A href="http://www.canon.ru/news/products/products.htm">текст</A>
Запишите ссылку, по которой можно будет создать электронное письмо
с адресом zebra@microsoft.com.
Ответ.
<A href="mailto:zebra@microsoft.com">текст</A>