Введение в современные веб-технологии

Упражнение 1:

Номер 3

В текст вставлен элемент img с минимальным набором атрибутов. Каким образом может выглядеть изображение?

Ответ:

(1)

(2)

(3)

Упражнение 2:

Номер 1

Какие форматы изображений поддерживают сжатие регулируемой глубины?

Ответ:

(1) GIF и JPEG

(2) JPEG и PNG

(3) PNG и GIF

Номер 2

Какой формат изображений поддерживают анимацию?

Ответ:

(1) GIF

(2) JPEG

(3) PNG

Номер 3

Какие форматы изображений поддерживают прозрачность?

Ответ:

(1) GIF и JPEG

(2) JPEG и PNG

(3) PNG и GIF

Упражнение 3:

Номер 1

Атрибуты width и height элемента img:

Ответ:

(1) всегда обязательны

(2) рекомендуется опускать, поскольку браузер сам определит правильный размер

(3) рекомендуется указывать тем или иным образом, чтобы избежать лишних запросов к веб-серверу в ряде случаев

(4) указываются только в том случае, если изображение должно быть масштабировано

Номер 2

Имеет ли смысл одновременное указание свойств width и min-width для элемента img?

Ответ:

(1) да, поскольку браузеры нарушают значение width при масштабировании страниц, а min-width стремятся соблюсти

(2) нет

(3) да, если одно из этих свойств задано в процентных единицах, а другое - нет

Номер 3

Если для элемента img заданы оба свойства width и height, то:

Ответ:

(1) соотношение ширины и высоты изображения будет сохранено браузером в любом случае

(2) >масштаб, возможно, будет увеличен, но это приведет к существенной потере качества изображения

(3) масштаб, возможно, будет уменьшен, но это приведет к существенной потере качества изображения

Упражнение 4:

Номер 1

                

<style type="text/css">
img { float: right; }
</style>
...
<img src="flower1.jpg" alt="flower" />
<img src="flower2.jpg" alt="flower" />
Hello!
                

                Сколько изображений будет в одной строке со словом Hello?

Ответ:

(1) одно

(2) два

(3) ни одного

Номер 2

                Имеется следующая разметка.
                

<style type="text/css">
img { float: right; }
</style>
...
<img src="flower1.jpg" alt="flower" />
<p>Это первое изображение.</p>
<img src="flower2.jpg" alt="flower" />
<p>Это второе изображение.</p>
                
                Как избежать обтекания вторым изображением первого?

Ответ:

(1) применить css-свойство clear:both; к первому изображению

(2) применить css-свойство clear:both; ко второму изображению

(3) упаковать каждую пару изображение-текст в отдельный контейнер div

Номер 3

                Имеется следующая разметка.
                
<style type="text/css">
img {
float: right;
 }
div {
background-color: Yellow;
clear: both;
margin: 3px 0;
padding: 3px;
}
</style>
<div>
<img src="flower1.jpg" alt="flower" />
Это первое изображение.
</div>
<div>
<img src="flower2.jpg" alt="flower" />
Это второе изображение.
</div>
                
                Будут ли изображения окружены желтым фоном со всех сторон?

Ответ:

(1) да.

(2) да, если убрать у обеих секций css-свойство clear: both;

(3) да, если добавить обеим секциям css-свойство overflow:hidden;

Упражнение 5:

Номер 1

                
<style type="text/css">
body {
background-image  title="": url(Texture.jpg);
}
</style>
                
                Размер изображения Texture.jpg - 100*100 px. Какая площадь будет занята изображением на веб-странице?

Ответ:

(1) 100*100 px в левом верхнем углу

(2) 100*100 px в центре

(3) зависит от выбранного клиентом масштаба

(4) вся

Номер 2

                Требуется разместить вдоль внутренних вертикальных границ контейнера div фоновое изображение (а середину оставить без заполнения).
                Какие варианты дадут верный результат?

Ответ:

(1) создать два стилевых правила, одно из которых повторит фон вдоль левой границы, а другое - вдоль правой (при помощи свойств background-position и background-repeat) и применить оба эти правила к контейнеру

(2) создать те же правила, но второе применить ко вложенной секции

(3) заполнить контейнер текстурой полностью и вложить в него секцию с белым фоном и горизонтальными отступами

Номер 3

                имеется следующее изображение, используемое в качестве ролловера:
                
                использующая его веб-страница выглядит следующим образом (вторая ссылка активна, а над третьей находится курсор):
                
                какие стилевые правила применены к гиперссылкам?

Ответ:

(1)


a:hover {
background-position: -54px 0;
}
a:active {
background-position: -27px 0;
}

(2)


a:hover {
background-position: 0 -54px;
}
a:active {
background-position: 0 -27px;
}

(3)


a:hover {
background-position: -27px 0;
}
a:active {
background-position: -54px 0;
}

(4)


a:hover {
background-position: 0 -27px;
}
a:active {
background-position: 0 -54px;
}

Упражнение 6:

Номер 1

                Имеется таблица, к которой не применено никаких css-правил:
                
                

    Фамилия 
    Телефон 


    Иванов 
    9094567 


    Петров 
    9045732 


                    ]]>
                
                Какие границы будут иметь ячейки таблицы?

Ответ:

(1) никаких

(2) сплошные

(3) двойные

Номер 2

                Какую разметку может иметь следующая таблица:

Ответ:

(1) <table> <tr> <td>1 </td> <td>2 </td> </tr> <tr> <td>3 </td> <td>4 </td> </tr> </table>

(2) <table> <tr> <td>1 </td> <td>3 </td> </tr> <tr> <td>2 </td> <td>4 </td> </tr> </table>

(3) <table columns="2"> <td>1 </td> <td>2 </td> <td>3 </td> <td>4 </td> </table>

(4) <table columns="2"> <td>1 </td> <td>3 </td> <td>2 </td> <td>4 </td> </table>

Номер 3

                Имеется следующая таблица:
                
                Каким образом устраняется пространство между ячейками?

Ответ:

(1) добавлением css-свойства margin:0; к ячейкам

(2) добавлением атрибута cellpadding="0" к таблице

(3) добавлением css-свойства border-collapse:collapse; к таблице

Упражнение 7:

Номер 1

Как правильно разместить заголовок таблицы?

Ответ:

(1) Заголовок таблицы

1	3
2	4

]]>

(2) Заголовок таблицы 1 3 2 4 ]]>

(3) Заголовок таблицы 1 3 2 4 ]]>

Номер 2

Выберите верные утверждения об элементах thead и tfoot:

Ответ:

(1) эти элементы являются устаревшими и не рекомендуются к использованию

(2) в таблице может быть не более одного элемента thead и не более одного tfoot

(3) thead и tfoot являются колонтитулами, которые для многостраничных таблиц повторяются некоторыми браузерами на каждой странице

Номер 3

Выберите верные утверждения об элементе tbody:

Ответ:

(1) этот элемент является устаревшим и не рекомендуется к использованию

(2) наличие элемента tbody в таблице необходимо согласно стандарту

(3) элементов tbody в таблице может быть несколько

(4) элемент tbody объединяет строки в группы

Упражнение 8:

Номер 1

                Какая может быть разметка у следующей таблицы?

Ответ:

(1) 1 2 3 ]]>

(2) 1 2 3 ]]>

(3) 1 2 3 ]]>

Номер 2

                Какая может быть разметка у следующей таблицы?

Ответ:

(1) 1 2 3 ]]>

(2) 1 2 3 ]]>

(3) 1 2 3 ]]>

Номер 3

                Какая может быть разметка у следующей таблицы?

Ответ:

(1) 1 2 1 3 4 5 6 ]]>

(2) 1 2 3 4 5 6 ]]>

(3) 1 2 3 4 5 6 ]]>

Упражнение 9:

Номер 1

                Таблица генерируется динамически посредством следующего сценария:
                
                    
                
                Как она будет выглядеть?

Ответ:

(1)

1	2	3
4	5	6
7	8	9

(2)

1	2	3
2	4	6
3	6	9

(3)

2	3	4
3	4	5
4	5	6

Номер 2

                Таблица генерируется динамически посредством следующего сценария:
                
                    
                
                Как она будет выглядеть?

Ответ:

(1)

1	2	3
4	5	6
7	8	9

(2)

1	2	3
2	4	6
3	6	9

(3)

2	3	4
3	4	5
4	5	6

Номер 3

                Таблица генерируется динамически посредством следующего сценария:
                
                    
                
                Как она будет выглядеть?

Ответ:

(1)

1	2	3
4	5	6
7	8	9

(2)

1	2	3
2	4	6
3	6	9

(3)

2	3	4
3	4	5
4	5	6

Упражнение 10:

Номер 1

Выберите верные утверждения о статическом позиционировании (нормальном потоке):

Ответ:

(1) браузер размещает элементы в их контейнерах слева направо, затем сверху вниз, начиная с контейнера body

(2) невозможно манипулировать позицией блока по горизонтали и вертикали

(3) невозможно разместить два блока, смежных по горизонтали

Номер 2

Выберите верные утверждения об абсолютном позиционировании:

Ответ:

(1) оно применяется по умолчанию

(2) позиция элемента должна быть указана относительно окна

(3) абсолютно позиционированный элемент выбрасывается из нормального потока

(4) абсолютная позиция отсчитывается от первого блока в ряду контейнеров, который имеет позиционирование absolute, relative или fixed

Номер 3

Выберите верные утверждения о позиционировании на основе плавающих элементов:

Ответ:

(1) для его применения используется значение css-свойства position: float;

(2) плавающие элементы должны быть позиционированы статически

(3) при многоколоночной верстке колонки обычно снабжаются свойством float:left и указанием ширины, а также отступа и поля

(4) если суммарная ширина всех плавающих колонок превысит ширину контейнера, то браузер добавит в этот контейнер горизонтальную полосу прокрутки

Упражнение 11:

Номер 1

                Выберите верные утверждения об относительном позиционировании:

Ответ:

(1) абсолютное позиционирование блока часто применяется в сочетании с относительным позиционированием контейнера

(2) одно из основных его применений состоит в том, чтобы размещать маленькие объекты относительно других объектов на странице

(3) относительно позиционированный элемент выбрасывается из нормального потока

Номер 2

Выберите верные утверждения о фиксированном позиционировании:

Ответ:

(1) оно удаляет элемент из нормального потока HTML

(2) оно не работает в Internet Explorer версий 6 и ниже

(3) для его применения используется значение css-свойства position: fixed;

Номер 3

Как можно горизонтально центрировать блочный элемент?

Ответ:

(1) задать css-свойство align:center;

(2) только при помощи абсолютного позиционирования

(3) задать ширину и автоматические горизонтальные отступы

Упражнение 12:

Номер 1

Требуется разместить на странице три блока текста, причем первый занимает всю ширину страницы, а остальные находятся под ним и делят страницу по ширине пополам. Какой способ позиционирования следует применить ко второму и третьему блоку?

Ответ:

(1) абсолютное

(2) относительное

(3) статическое + float

Номер 2

                Требуется разместить изображение в правом верхнем углу текстового блока. Какое позиционирование можно применить к изображению?

Ответ:

(1) абсолютное

(2) относительное

(3) фиксированное

Номер 3

Требуется центрировать блок по вертикали. Какое позиционирование следует применить к нему?

Ответ:

(1) абсолютное

(2) относительное

(3) статическое + float

Введение в современные веб-технологии - тест 10