Негосударственное образовательное учреждение
«Открытый молодёжный университет»
Комплексная образовательная программа
«Школьный университет»
-
|
УТВЕРЖДАЮ
Директор
Негосударственного образовательного учреждения
«Открытый молодёжный университет»
_______________ И. В. Дмитриев
«___»__________ 2012 г.
|
Основы сайтостроения
Задания для проведения контрольной работы
«Язык гипертекстовой разметки HTML.
Каскадные таблицы стилей CSS»
Томск — 2012
Кравченко С. В. Основы сайтостроения : Задания для проведения контрольной работы «Язык гипертекстовой разметки HTML. Каскадные таблицы стилей CSS». — Томск : НОУ «Открытый молодёжный университет», 2012. — 15 c.
Задания для проведения контрольной работы рассмотрены и рекомендованы к изданию на методическом семинаре Негосударственного образовательного учреждения «Открытый молодёжный университет» и Образовательного центра «Школьный университет» 26 августа 2012 года.
Оглавление
Пояснительная записка 4
Вариант 1 5
Вариант 2 7
Вариант 3 9
Вариант 4 11
Вариант 5 13
Ответы 15
Пояснительная записка
С помощью предлагаемых заданий можно оценить уровень усвоения материала по первой части курса «Основы сайтостроения», включающей темы «Язык гипертекстовой разметки HTML» и «Каскадные таблицы стилей CSS». На данном этапе обучения учащиеся должны знать и понимать назначение основных тегов и атрибутов языка HTML, а также уметь пользоваться свойствами CSS.
Цели контрольной работы — закрепить теоретические знания и практические навыки по темам «Язык гипертекстовой разметки HTML» и «Каскадные таблицы стилей CSS». К моменту проведения контрольной работы учащиеся должны уметь:
придавать веб-странице требуемое оформление;
создавать гиперссылки, таблицы, списки;
вставлять графическое изображение в требуемое место веб-страницы;
создавать и использовать каскадные таблицы стилей.
Контрольная работа составлена в пяти вариантах. Каждый вариант состоит из двух частей: А и В. Часть А — это тест, содержащий 10 заданий, выполнение которых требует выбора правильного ответа (ответов) из предложенных либо записи ответа в произвольной форме. Часть В — практическая, которую учащиеся могут выполнять с использованием обычного текстового редактора либо веб-редактора Amaya.
Предполагается, что части А и В каждого варианта выдаются учащимся последовательно. Сначала учащиеся получают и выполняют теоретический тест (часть А). Затем выдаются практические задания (часть В), которые учащиеся выполняют за компьютером.
К документу прилагается таблица ответов.
Система оценивания контрольной работы:
каждый правильный ответ уровня А даёт 1 балл (максимальное число баллов — 10);
решенное задание уровня В — 5 баллов;
за весь тест максимальное число баллов — 15 баллов.
Общее количество баллов
|
Оценка
|
13–15
|
5
|
10–12
|
4
|
7–9
|
3
|
Менее 7
|
2
|
Вариант 1
Часть А
Какой тег применяется для определения нового абзаца?
Ответ: ___________.
Какие теги не содержат закрывающий (конечный) тег?
;
;
;
.
Что делает тег ?
Выделяет текст полужирным.
Увеличивает кегль символов.
Выделяет текст курсивом.
Уменьшает кегль символов.
Укажи все значения, которые может принимать атрибут align тега <img>:
left;
right;
center;
top.
Приведён следующий HTML-код:
Книга.
Какой цвет будет использоваться для отображения слова «Книга» в браузере?
Ответ: ________________.
Во внешней таблице стилей создана следующая запись:
h3 {color: green; font-weight: bold }.
Как будет отображаться документ в браузере, к которому она применена?
каждый заголовок, заключённый в тег <h3>, будет выделен зелёным полужирным шрифтом;
каждый заголовок, заключённый в тег <h3>, будет выделен полужирным шрифтом на зелёном фоне;
каждый заголовок, заключённый в тег <h3>, будет выделен полужирным шрифтом и выровнен по центру.
Какое свойство CSS используется для задания размера шрифта?
Ответ: _____________.
Какое значение не может принимать свойство text-align?
left;
justify;
large;
center.
Какой из нижеперечисленных атрибутов является обязательным для тега <a>?
href;
target;
class.
Внутри какого тега должен стоять атрибут align, чтобы происходило выравнивание содержимого ячейки таблицы?
;
;
.
Часть B
Создай веб-страницу, на которой размести любой рисунок и текст. У рисунка установи обтекание текста по правому краю. Обведи рисунок бордюром в 2 пикселя.
Вариант 2
Часть А
Какой тег используется для начала текста с новой строки, не начиная нового абзаца?
Ответ: _____________.
Что делает тег ?
Изменяет цвет текста.
Помечает текст как важный.
Выделяет текст курсивом.
Делает текст неразрывным.
Внутри какого тега помещается тег </b>? Указать начальный и конечный теги в угловых скобках.<br /></ol> <br />Ответ: __________________.<br /><ol start=4> <li><br />Какой из атрибутов является обязательным для тега <b><</b><b>img</b><b>></b>?<br /></ol> <ol> <ol> <li value=1><br /><b>src</b>;<br /><li><br /><b>align</b>;<br /><li><br /><b>title</b>;<br /><li><br /><b>border</b>.<br /></ol> <li><br />Как создать ссылку на адрес электронной почты?<br /></ol> <ol> <ol> <li value=1><br /><b>Написать</b>;<br /><li><br /><b>Написать</b>;<br /><li><br /><b>Написать</b>;<br /><li><br /><b><a rel="nofollow" href="mail:vlad@gmail.com">Написать</a></b>.<br /></ol> <li><br />Как нужно записать тег <b><table></b>, чтобы таблица растягивалась на всю ширину страницы?<br /></ol> <ol> <ol> <li value=1><br /><b><table width="100"></b>;<br /><li><br /><b><table></b>;<br /><li><br /><b><table width="100</b><b>%</b><b>"></b>;<br /><li><br /><b><table width="auto"></b>.<br /></ol> <li><br />Приведён следующий HTML-код:<br /></ol> <br /><b><hr size="2" width="50%" color="blue" noshade /></b>.<br /><br />Что отобразится в браузере? <br /><ol> <ol> <li value=1><br />Горизонтальная линия шириной 50 %, толщиной 2 пикселя, нерельефная.<br /><li><br />Горизонтальная линия шириной 50 %, толщиной 2 пикселя, синего цвета.<br /><li><br />Горизонтальная линия толщиной 50 %, шириной 2 пикселя, нерельефная, синего цвета.<br /><li><br />Горизонтальная линия шириной 50 %, толщиной 2 пикселя, нерельефная, синего цвета.<br /></ol> <li><br />Какое свойство CSS задаёт расстояние от содержимого элемента до рамки?<br /></ol> <br />Ответ: _____________.<br /><ol start=9> <li><br />Какое значение не может принимать свойство <b>position</b>?<br /><ol> <li><br /><b>static</b>;<br /><li><br /><b>fixed</b>;<br /><li><br /><b>dinamic</b>;<br /><li><br /><b>absolute</b>.<br /></ol> <li><br />Во внешней таблице стилей заданы следующие правила:<br /></ol> <br /><b>div {width: 40%} </b> <br /><br /><b>table</b><b> { </b><b>width</b><b>: 50%}</b>.<br /><br />Какова будет ширина таблицы в пикселях, если она помещена в блок <b><div></b>, а размер окна браузера составляет 1000 пикселей?<br /><ol> <ol> <li value=1><br />250 пикселей;<br /><li><br />200 пикселей;<br /><li><br />500 пикселей.<br /></ol> </ol> <br /><b>Часть B</b><br /><br />Создай веб-страницу, на которой размести любое четверостишие. Выдели первую и третью строки этого четверостишия курсивом, а вторую и четвёртую — полужирным текстом. Фон страницы залей чёрным цветом, а текст сделай белым.<br /><br /><h2><a name="__refheading__9_1591645799"></a> Вариант 3</h2> <br /><b>Часть А</b><br /><ol> <li value=1><br />При помощи какого тега в HTML-документ вставляется таблица? <br /></ol> <br />Ответ: _____________.<br /><ol start=2> <li><br />Какого из этих тегов не существует?<br /><ol> <li><br /><b><ol></b>;<br /><li><br /><b><adress></b>;<br /><li><br /><b><em></b>;<br /><li><br /><b><br /></b>.<br /></ol> <li><br />Какую функцию выполняет атрибут <b>height</b> тега <b><</b><b>img</b><b>></b>?<br /><ol> <li><br />задаёт высоту;<br /><li><br />задаёт ширину;<br /><li><br />задаёт выравнивание;<br /><li><br />создаёт рамку вокруг изображения.<br /></ol> <li><br />Во внешней таблице стилей создана следующая запись:<br /></ol> <br /><b>a</b><b>:</b><b>visited</b><b> { </b><b>color</b><b>:</b><b>green</b><b>;}</b>.<br /><br />Как будет отображаться документ в браузере, к которому она применена?<br /><ol> <ol> <li><br />посещённые гиперссылки будут зелёного цвета;<br /><li><br />все гиперссылки будут зелёного цвета;<br /><li><br />зелёной будет ссылка, на которую наведён указатель мыши.<br /></ol> <li><br />Какой тег задаёт нумерованный список?<br /><ol> <li><br /><b><l</b><b>i</b><b>></b>;<br /><li><br /><b><ol></b>;<br /><li><br /><b><</b><b>u</b><b>l></b>.<br /></ol> <li><br />Какое ключевое слово, указанное в качестве значения свойства <b>border-style</b>, задаёт отсутствие рамки вокруг элемента?<br /></ol> <br />Ответ: _____________.<br /><ol start=7> <li><br />Какой из атрибутов используется при формировании сложных таблиц для объединения ячеек по вертикали?<br /><ol> <li><br /><b>colspan</b>;<br /><li><br /><b>rowspan</b>;<br /><li><br /><b>cellspacing</b>;<br /><li><br /><b>cellpadding</b>.<br /></ol> <li><br />Как на языке HTML записать химическую формулу оксида алюминия Al2O3, чтобы двойка и тройка были в нижнем регистре (Al₂O₃)?<br /><ol> <li><br /><b>Al<sup>2</sup>O<sup>3</sup></b>;<br /><li><br /><b>Al<sub>2</sub>O<sub>3</sub></b>;<br /><li><br /><b>Al<span>2</span>O<span>3</span></b>;<br /><li><br /><b>Al^2O^3</b>.<br /></ol> <li><br />Во внешней таблице стилей создана следующая запись:<br /></ol> <br /><b>p {font-style: italic; color: red;}</b>.<br /><br />Как будет отображаться документ в браузере, к которому она применена?<br /><ol> <ol> <li><br />каждый абзац начинается с красной строки, текст будет отображён итальянским шрифтом;<br /><li><br />каждый абзац начинается с красной строки в итальянском стиле;<br /><li><br />текст всех абзацев выделен красным цветом и курсивным шрифтом.<br /></ol> <li><br />Какой атрибут тега <b><ol></b> начинает нумерацию списка с определённого значения?<br /></ol> <br />Ответ: _____________.<br /><br /><b>Часть B</b><br /><br />Создай две веб-страницы и свяжи их гиперссылками. С помощью стилей настрой вид гиперссылок, отличный от стандартного.<br /><br /><h2><a name="__refheading__11_1591645799"></a> Вариант 4</h2> <br /><b>Часть А</b><br /><ol> <li value=1><br />При помощи какого атрибута в теге <b><</b><b>a</b><b>></b> указывается адрес открываемого по гиперссылке документа?<br /></ol> <br />Ответ: _____________.<br /><ol start=2> <li><br />Какие из этих тегов используются для организации списков?<br /><ol> <li><br /><b><tr></b>;<br /><li><br /><b><ol></b>;<br /><li><br /><b><ul></b>;<br /><li><br /><b><td></b>.<br /></ol> <li><br />В чём разница между тегами <b><em></b> и <b><i></b>?<br /><ol> <li><br />Между ними нет разницы, они дают одинаковый результат.<br /><li><br /><b><</b><b>em</b><b>></b> — блочный тег, а <b><</b><b>i</b><b>> </b>— строчный.<br /><li><br /><b><</b><b>em</b><b>></b> — элемент логической разметки, а <b><</b><b>i</b><b>> </b>— физической.<br /></ol> <li><br />С помощью какого свойства CSS можно управлять позициями слоёв в документе?<br /></ol> <br />Ответ: _____________.<br /><ol start=5> <li><br />Какие из этих тегов определяют блочные элементы?<br /><ol> <li><br /><b><a></b>;<br /><li><br /><b><div></b>;<br /><li><br /><b><br /></b><br /><li><br /><b><span></b>.<br /></ol> <li><br />Какой из нижеперечисленных объектов не может являться гиперссылкой?<br /><ol> <li><br />текст;<br /><li><br />графика;<br /><li><br />графика и текст;<br /><li><br />таблица.<br /></ol> <li><br />С помощью какого атрибута тега <b><body></b> задаётся фон страницы?<br /></ol> <br />Ответ: _____________.<br /><ol start=8> <li><br />Каково назначение тега <b><li></b>?<br /><ol> <li><br />создаёт нумерованный список;<br /><li><br />создаёт маркированный список;<br /><li><br />создаёт элемент списка;<br /><li><br />создаёт новый абзац.<br /></ol> </ol> <br /><br /><br /><ol start=9> <li><br />Во внешней таблице стилей создана следующая запись:<br /></ol> <br /><b>body {</b><br /><br /><b>background-color: black</b><br /><br /><b>color: white}</b>.<br /><br />Почему на веб-странице, к которой подключена данная таблица стилей, не проявились указанные цвета?<br /><ol> <ol> <li><br />Свойство <b>background</b><b>-</b><b>color</b> неверное, нужно писать <b>background</b>.<br /><li><br />Значения цветов указаны неправильно.<br /><li><br />Не хватает точки с запятой.<br /><li><br />В качестве селектора использовать <b>body</b> нельзя.<br /></ol> <li><br />Какое значение не может принимать свойство <b>display</b>?<br /><ol> <li><br /><b>none</b>;<br /><li><br /><b>block</b>;<br /><li><br /><b>position</b>;<br /><li><br /><b>inline</b>.<br /></ol> </ol> <br /><b>Часть B</b><br /><br />Создай веб-страницу, на которой размещена таблица, имеющая следующую структуру и надписи в ячейках:<br /><CENTER> <table width=296 cellpadding=0 cellspacing=0> <col width=96> <col width=101> <col width=97> <tr> <td colspan=3 width=294 valign=top> <br />Белый<br /></td> </tr> <tr valign=top> <td width=96> <br />Зелёный<br /></td> <td width=101> <br />Красный<br /></td> <td width=97> <br />Синий<br /></td> </tr> </table> </CENTER> <br />В ячейках указан цвет фона, который у них должен быть установлен.<br /><br />Выравнивание в ячейках таблицы — по центру.<br /><br /><h2><a name="__refheading__13_1591645799"></a> Вариант 5</h2> <br /><b>Часть А</b><br /><ol> <li value=1><br />Какие атрибуты используются только для тега <b><td></b>?<br /><ol> <li><br /><b>colspan</b>;<br /><li><br /><b>r</b><b>ules</b>;<br /><li><br /><b>rowspan</b>;<br /><li><br /><b>valign</b>.<br /></ol> <li><br />Какое значение не может принимать атрибут <b>align</b> в теге <b><</b><b>p</b><b>></b>?<br /><ol> <li><br /><b>left</b>;<br /><li><br /><b>right</b>;<br /><li><br /><b>center</b>;<br /><li><br /><b>top</b>.<br /></ol> <li><br />Какой тег задёт название документа, которое отображается в заголовке окна браузера?<br /></ol> <br />Ответ: _____________.<br /><ol start=4> <li><br />Какая пара тегов определяет абзац в документе?<br /><ol> <li><br /><b><br /><br /></b>;<br /><li><br /><b><h2></h2></b>;<br /><li><br /><b><head></head></b>;<br /><li><br /><b><h3></h3></b>.<br /></ol> <li><br />Во внешней таблице стилей создана следующая запись:<br /></ol> <br /><b>TABLE TABLE A:visited {color:red;}</b>.<br /><br />Как будет отображаться документ в браузере, к которому она применена?<br /><ol> <ol> <li><br />красной будет ссылка, помещённая в таблицу;<br /><li><br />ссылки, находящиеся в таблицах, в момент наведения на них указателя будут становиться красными;<br /><li><br />красной будет посещённая ссылка, помещённая в две вложенные таблицы;<br /><li><br />посещённые ссылки будут становиться красными.<br /></ol> <li><br />В какие из нижеперечисленных тегов заключается тело HTML-документа?<br /><ol> <li><br /><b><body></body></body></em></span></em></adress></div></table></table></table> | |
