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