Тема 2.1.3 Языки и средства гипертекстовой разметки
ЗАДАНИЕ 1
Укажите названия понятий, которые соответствуют перечисленным ниже определениям.
Гипертекст – это способ организации текста, графики и других данных, при котором элементы данных связаны между собой. Связанными могут быть как элементы одного документа, так и элементы различных документов.
Документы в формате HTML – это гипертекстовые документы в Интернете
Web сайт – это набор Web-страниц связанных между собой гиперссылками.
HTML – это язык, на котором создаются гипертекстовые страницы.
ЗАДАНИЕ 2
Перечислите редакторы для верстки веб-страниц
Разделите их два типа: визуальные и текстовые
Визуальные |
Текстовые |
Macromedia Dreamweaver MX Adobe GoLive и LiveMotion Microsoft FrontPage Hotdog Brackets Sublime Text |
Homesite HTML Pad Notepad
|
Тема 2.1.4 Язык гипертекстовой разметки html
ЗАДАНИЕ 1
Ответьте на предложенные вопросы:
1.1 Специальная программа, установленная на компьютере пользователя, предназначенная для просмотра гипертекстовых документов – это браузер.
1.2 Код, идентифицирующий определенный элемент документа HTML, например, абзац, заголовок, ссылку, таблицу и т.д. – это тег.
1.3 Перечислите основные теги языка разметки HTML
<html></html> |
Определяет тип документа как web страницу. |
<head></head> |
Служебная часть документа, не отображаемая в браузере, тут размещаются заголовок, описание, ключевые слова и т.д. |
<body></body> |
Между этими тегами располагается непосредственно сама web страница, которую Вы видите на экране, могут размещаться и другие типы данных. |
<meta name="allow-search" content="?"> |
Определяет способ сканирования данных для роботов поисковых систем. |
<meta name="robots" content="?"> |
Указывается информация для поисковых роботов. |
<meta name="author" content="?"> |
В данном теге можно указать авторство. |
<meta name="keywords" content="?"> |
Для обеспечения работы с поисковыми серверами, указываются ключевые слова, через запятую. |
<base href="www.?"> |
Применяется для не полностью прописанных ссылок, указывает начальный адрес в интернете |
<meta name="description" content="?"> |
Краткое описание web страницы, будет показано в результатах поиска поисковиками. |
<title></title> |
Тег для заголовка страницы |
<body bgcolor="?"> |
Определяет цвет фона web страницы |
<body text="?"> |
Определяет цвет текста web страницы |
<body link="?"> |
Задается цвет гиперссылок в нормальном состоянии |
<body vlink="?"> |
Задает цвет уже просмотренных гиперссылок. |
<body alink="?"> |
Задает цвет выделенной гиперссылки. |
<h1></h1> |
Тег заголовка, создает самый крупный заголовок, цифра 1 может меняться в пределах от 1 до 6. Шесть будет самый мелкий заголовок. |
<b></b> |
Делает текст полужирным. |
<i></i> |
Форматирует текст в наклонный. |
<tt></tt> |
Имитация стиля печатной машинки. |
<kbd></kbd> |
Имитация стиля печатной машинки. |
<var></var> |
Название переменных отображается курсивом |
<cite></cite> |
Выделение цитат курсивом |
<address></address> |
Создает абзац с текстом выделенным курсивом. |
<em></em> |
Курсив (воспринимается поисковиками как выделение) |
<strong></strong> |
Полужирное форматирование текста (воспринимается поисковиками, как особо сильное выделение) |
<font size="?"></font> |
Устанавливает размер шрифта, значение от 1 до 7. |
<font color="?"></font> |
Задает цвет текста. |
1.4 Какие достоинства имеет язык разметки HTML:
Занимает мало места
Не искажается
Лёгок в освоении
ЗАДАНИЕ 2
Соотнесите понятия
|
|
ЗАДАНИЕ 3
Основные типы списков, это:
1) Упорядоченные
2) Неупорядоченные
3) Списки определений
ЗАДАНИЕ 4
Объясните основные правила синтаксиса HTML
✓ каждый тег должен начинаться с открывающейся угловой скобки, а заканчиваться закрывающейся угловой скобкой;
✓ браузеры игнорируют нестандартные теги и атрибуты, поэтому имена тегов и их атрибутов должны соответствовать перечню допустимых в HTML имен;
✓ при записи имен тегов можно пользоваться как верхним, так и нижним регистрами, но нельзя ставить пробелы;
✓ значения атрибутов можно записывать в любом регистре (за исключением пользовательских значений атрибутов, для которых соблюдается соответствие имен с точностью до регистра);
✓ если значение атрибута содержит пробелы, оно обязательно должно быть заключено в кавычки;
✓ в содержимом документа браузеры игнорируют несколько пробелов, следующих подряд, и сжимают их до одного пробела;
✓ элемент, включающий в себя начальный тег другого элемента, должен содержать и конечный тег этого элемента (за исключением одиночных тегов);
✓ допускается включать в HTML- документы комментарии.
ЗАДАНИЕ 5
Соотнесите понятия
|
|
ЗАДАНИЕ 6
Напишите HTML-код страницы, включающей таблицу. Выполнить цветовое оформление элементов таблицы: ячеек, рамок, заголовка.
Дисциплина |
Раздел |
Часы |
Физика |
Электричество |
254 |
Оптика |
100 |
|
Количество часов: 354 |
||
ЗАДАНИЕ 7
Напишите HTML-код страницы, включающей форму «Группа» с полями: ФИО, Возраст, Адрес. Создайте кнопки «Отправить/Очистить» и переключатель, определяющий студента как успевающего или неуспевающего.
Тема 2.1.5 Каскадные таблицы стилей CSS
ЗАДАНИЕ 1
Выполните тест по правилам CSS. Из предложенных ответов выберите правильный. Верных ответов может быть несколько.
Вопрос 1. Что делает следующий стиль?
OL LI:fist-letter {color:red}
а) Изменяет цвет текста всего списка
б) Изменяет цвет первой буквы элемента нумерованного списка
в) Изменяет цвет первой строки в нумерованном списке
г) Изменяет цвет первой буквы элемента маркированного списка
д) Изменяет цвет первой строки в маркированном списке
Вопрос 2. В какой строке содержится ошибка?
а) H1 {margin-left: 20px}
б) body {font-size: 11pt; color:#aaa}
в) head {color:#rob}
г) p {margin-left: 20px; padding-left: 20px}
д) H2 {margin-right: 20px}
Вопрос 3. Какое выражение написано не корректно?
а) background: red
б) width: “auto”
в) font-size: blue (здесь должны указываться единицы измерения, а не цвет)
г) border: none
д) color: #fco (такого цвета Не существует)
Вопрос 4. Какая ошибка содержится в следующем стиле?
Img (float: left; border-width: 3; display: block)
а) Не хватает точки с запятой в конце записи
б) Значение block свойства display не допускается применять к изображениям
в) Не указаны единицы измерения свойства border-width
г) Свойства border-width не существует
д) Значения left и block написаны без кавычек
Вопрос 5. Как правильно вставить комментарий в CSS-файл?
а) <!-- комментарий -->
б) # комментарий
в) // комментарий
г) // комментарий //
д) /* комментарий */
Вопрос 6. Коля решил для своего сайта сделать версию для печати. Какую строку ему следует использовать в коде?
а) @media “palm.css” print
б) @import url(“printer.css”) printer;
в) @import “palm.css” print;
г) <link media="printer" rel="stylesheet" href="print.css">
д) <style meda=”print”>
Вопрос 7. Люба подключила к HTML-документ одновременно два стилевых файла – style1.css и style2.css. Причем в файле style2.css первой строкой импортируется еще один файл с именем style3.css. В файле style1.css цвет текста задается красным, в style2.css – синим, а в style3.css – зеленым. Какой цвет текста будет на странице?
а) Зелёный
б) Красный
в) Установленный в браузере по умолчанию
г) Синий
д) Чёрный
Вопрос 8. Какой цвет фона будет у элемента с классом button при включении приведенного стиля?
.bgzapas, .button h1 {
font-size: 1.2em; padding: 10px;
background-color: #fcfaed
}
.bgzapas {
backround-color: #e7f2d7
}
.button, h2 {
width: 95px; font-size: 11px; color: #f3fced; background-color: #5ca22e
}
.bgzapas .button{
backround-color: #d9d7f2
}
а)#d9d7f2
б) #fcfaed
в) #f3fced
г) #e7f2d7
д) #5ca22e
Вопрос 9. Требуется задать цвет заголовка зеленым. Какое стилевое свойство подойдет для этой цели?
а) font-size
б) font-color
в) font-family
г) color
д) text
Вопрос 10. Какой стиль установит красный цвет текста в абзаце?
а) * HTML P { color: red; }
б) HTML * P { color: red; }
в) P * { color: red; }
г) BODY * P { color: red; }
д) BODY P * { color: red; }
Вопрос 11. К какому селектору следует применить свойство margin, чтобы изменить отступы на веб-странице?
а) !DOCTYPE
б) HEAD
в) BODY
г) HTML
д) TITLE
Вопрос 12. Как добавить фоновый цвет ко всем элементам <h1>?
а) h1 {background-color: white}
б) h1[all] {background-color: white}
в) h1:all {background-color: white}
г) h1#all {background-color: white}
д) h1.all {background-color: white}
Вопрос 13. В каких ситуациях имена идентификаторов и классов можно называть одинаково?
а) Никогда, это недопустимо.
б) Только, если они применяются к разным элементам
в) Только, если в коде они встречаются один раз
г) Только, они применяются к одному элементу
д) В любом случае.
Вопрос 14. Какой селектор написан с ошибкой?
а) p.new.back:after
б) p.new:before
в) abbr:first-line
г) a:hover:before
д) div:before:first-letter
Вопрос 15. Какое имя идентификатора написано неправильно?
а) a-a-a-1-1-1
б) krevedko
в) bla-bla
г) l0g0
д) id_1id1
Вопрос 16. К какому слову применяется стиль селектора div * em * в следующем фрагменте кода?
<div>
<h1><em>Lorem</em> ipsum</h1>
<p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit.</p>
<ul>
<li><em>Ut</em>wisis enim ad
<li>Quis <em><span>nostrud</span></em>exerci
<li>Tution ullamcorper suscipit
</ul>
<em>Nisl</em> ut aliquipexea commodo consequat.
</div>
а) nostrud
б) Nisl
в) Ut
г) consectetuer
д) Lorem
Вопрос 17. К каким элементам добавляет стиль следующая конструкция – A:link:visited:hover?
а) К посещенным ссылкам при наведении на них курсора мыши.
б) К посещённым ссылкам
в) Ни к одному элементу
г) К непосещённым ссылкам
д) К любым ссылкам при наведении на них курсора мыши.
Вопрос 18. Олег сделал ссылки, которые меняют цвет фона при наведении на них курсора мыши. Для этого он использовал следующий стиль:
A{ color: blue; background: orange}
A:hover {background: yellow; color :black}
A:visited {color: write}
A:active {color: red}
Однако некоторые ссылки при наведении на них курсора не меняли свой цвет на черный. Почему?
а) Неверное значение свойства color у А:hover
б) Код CSS не валидный.
в) Псевдокласс :active стоит после :visited.
г) К селектору А не добавлен псевдокласс :link
д) Псевдокласс :visited стоит после :hover.