- •Міністерство освіти і науки україни
- •61166 Харків, просп. Леніна, 14 зміст
- •1 Мета і задачі дисципліни
- •1.1 Мета дисципліни
- •1.2 Програма знань і вмінь
- •2 Робоча програма дисципліни
- •2.1 Лекційні заняття
- •2.2 Лабораторні роботи
- •2.3 Практичні заняття
- •2.4 Самостійна робота студента
- •2.5 Тематика контрольних робіт
- •2.6 Тематика розрахункових завдань
- •2.7 Рейтингова оцінка з дисципліни
- •2.8 Рекомендована література
- •3 Характеристика підручників і навчальних посібників
- •4 Методичні вказівки з вивчення дисципліни
- •4.1 Html (HyperText Markup Language)
- •4.2 Css (cascading style sheets)
- •4.2.2 Селектори
- •4.2.4 Властивості css
- •4.3 Xml (extensible markup language)
- •4.3.7 Простори імен
- •4.4 Dtd (Document Type Definition)
- •4.5 Xslt (Extensible Stylesheet Language Transformations)
- •4.5.2 Шаблони xslt
- •5 Контрольні запитання та завдання за основними темами
- •Тема 1. Html (HyperText Markup Language)
- •Тема 2. Css (cascading style sheets)
- •Тема 3. Xml (extensible markup language)
- •Тема 4. Dtd (Document Type Definition)
- •Тема 5. Xslt (Extensible Stylesheet Language Transformations)
- •6 Основні рекомендації з організації самостійної роботи
- •8 Приклади розв'язання типових задач
- •Атрибут background. Даний атрибут задає фонове зображення для таблиць. Застосуємо до тегів table і td. Його значенням є url файла з фоновим зображенням.
5 Контрольні запитання та завдання за основними темами
Тема 1. Html (HyperText Markup Language)
1. Використайте HTML для розмітки першого абзаца цих методичних вказівок. Скористайтеся елементом h1 для заголовка теми, p для тексту, strong для першого слова в кожній пропозиції, а em для слів, що складаються із великих літер.
2. Чи є наведений нижче код коректним?
<p>От деякий текст...</p>
<hr>
<p>А от ще...</p>
3. Чому даний код є некоректним?
<p>От деякий текст...<br></br>
А от ще один...</p>
4. Є зображення з ім'ям 1.gif, що має ширину 200 пікселів та висоту 150 пікселів. Використайте атрибути width і height тегу <img>, щоб
а) збільшити розмір зображення на 100%;
б) збільшити розмір зображення на 50 %;
в) змінити відношення ширини до висоти 2:1 при збереженні ширини, заданої в пункті а).
5. Створіть гіперпосилання на такі ресурси:
а) файл index.htm, розташований у каталозі files;
б) файл index.htm, розташований у підкаталозі text каталогу files;
в) файл index.htm, розташований у каталозі other батьківського каталогу;
г) посилання на адресу електронної пошти президента США (president@whitehouse.gov).
6. Вкажіть, що в перерахованому нижче є елементом, а що – атрибутом: width; td; th; frame; name; select; type.
7. Який набір фреймів створюватиме наведений нижче код? Припустимо, що імпортовані сторінки є порожніми й мають білий фон, розмір вікна браузера дорівнює 800х600. Зробіть зображення компонування сторінки, приблизно витримуючи розміри.
<frameset rows = “20% , *”>
<frame src = “hello.htm” name = “hello”>
<frameset cols = “150 , *”>
<frame src = “nav.htm” name = “nav”>
< frame src = “my.htm” name = “my”>
</frameset>
</frameset>
8. Припустимо, у вас є документ із деякими підрозділами. Напишіть HTML-код для створення фрейму зі змістом у лівій частині вікна, задайте для кожного пункту в змісті внутрішнє посилання для прокручування вмісту правого фрейму документа вниз із метою переходу до відповідного підрозділу.
Тема 2. Css (cascading style sheets)
1. Напишіть правило CSS, що робить весь текст в 1,5 рази більше, ніж розмір базового шрифту в системі, а також задає для тексту червоний колір.
2. Напишіть правило CSS, що видаляє підкреслення для всіх гіперпосилань в елементах списків (li) і зрушує їх уліво на 3.
3. Напишіть правило CSS, що поміщає фонове зображення в нижній половині сторінки та розмножує його по горизонталі. Зображення має залишатися на місці при прокручуванні вікна користувача вгору або вниз.
4. Напишіть правило CSS, що задає для всіх елементів h1 і h2 відступ 0.5, тип рамки groove і поле 0.5.
5. Напишіть правило CSS, що змінює колір всіх елементів з атрибутом class=“green-Move” на зелений і зрушує їх вниз на 25 пікселів і вправо на 15 пікселів.
Тема 3. Xml (extensible markup language)
1. Створіть XML-документ для розмітки інформації про харчову цінність упакування кексів Grandma Cookies, що має такий склад: 260 калорій, 100 калорій жиру, 11 грамів жирів, 2 грами насичених жирів, 5 міліграмів холестерину, 210 міліграмів солі, 36 грамів вуглеводів, 2 грами клітковини, 15 грамів цукру і 5 грамів протеїнів. Відтворіть документ в Internet Explorer.
2. Розмітьте код Java, наведений на рис. 5.1, за допомогоюXML. Оператор if подайте елементом if, що містить один або кілька елементів condition і один або кілька елементів statement. Елемент condition містить умову (наприклад, m = = month && d = = day), а елемент statement містить оператори (наприклад, resultDay = “Date: D” + d + “М” + m). Праворуч від умов і операторів є примітки. Елемент else подає оператор else Java і містить один або кілька елементів statement. Запустіть отриманий документ в Internet Explorer для перевірки синтаксису XML.
Рисунок 5.1 – Код Java для XML-розмітки
3. Модифікуйте створений XML-документ, помістивши код Java у розділ CDATA. Потім відтворіть документ в Internet Explorer. Порівняйте результати.
4. Створіть XML-документ для розмітки цих методичних вказівок.