Лабораторна робота № 5.

Хід роботи:

  1. Створіть гіпертекстовий документ. Для цього виконайте наступні дії:
  2. Подвійним кліком відкрийте створений Вами файл. Зверніть увагу за допомогою якої програми відкрився файл.
  3. Клікніть на файлі правою кнопкою миші, оберіть пункт контекстного меню Открыть с помощью… та оберіть пункт Блокнот. Якщо вказаний пункт відсутній в запропонованому списку, то натисніть Выбрать программу… та оберіть серед запропонованих програм Блокнот, впевнившись, що знято позначку Использовать выбранную программу для всех файлов такого типа натисніть кнопку Ok.

    Ваш файл відкриється за допомогою блокноту.
  4. Введіть теги, що визначають структуру html-документа: <HTML> <HEAD> <META CHARSET="UTF-8"> </HEAD> <BODY> </BODY> </HTML> За допомогою тегу <TITLE> в контейнері <HEAD> задайте заголовок документу. В тексті заголовку вкажіть свої ПІБ. Далі всередині контейнеру <BODY> вкажіть назву факультету, спеціальність, курс та групу в якій Ви навчаєтесь. <HTML> <HEAD> <TITLE> ПІБ </TITLE> </HEAD> <BODY> Фізико-математичний факультет, математика, 2 курс, 1 група. </BODY> </HTML> Збережіть внесені в документ зміни (закривати текстовий редактор не обов’язково) та обновіть сторінку браузеру на якій Ви перший раз переглядали вміст Вашого файлу. Ознайомтесь зі змінами, які відбулися після редагування файлу.
  5. Використовуючи тег <BR> спробуйте відредагувати Ваш текст таким чином, щоб інформація про курс та групу в якій Ви навчаєтесь відображалась з нового рядка та додайте ще один рядок, що містить ПІБ Вашого викладача. Збережіть документ, та перевірте зміни на сторінці в браузері, попередньо оновивши її.
  6. Оформіть фрагменти тексту за допомогою стилів заголовків наступним чином: перший рядок документа оформіть стилем Заголовок 1-го рівня за допомогою тегів <H1> </H1>. Другий рядок оформіть як Заголовок 6-го рівня, а третій як Заголовок 4-го рівня.
  7. Виконайте форматування назви факультету за зразком:

    Текст оформлено наступними кольорами:
    Фіз – червоний, ико – зелений, Ма – ліловий, тема – синій, тич – темно-зелений, ний – сріблястий.
    З необхідними тегами можете ознайомитися, наприклад, на сайті http://htmlbook.ru/.
    Перегляньте отриманий результат в браузері.
  8. Створіть новий документ prizvyshe_2.html введіть теги, що визначають структуру документу та збережіть його в тій же папці, що й перший. Знайдіть в Інтернеті довільний невеликий вірш та скопіюйте його. В тексті заголовку вкажіть назву вірша. А текст вірша двічі розмістіть в контейнері <BODY>. Для розбиття першого вірша на рядки кожен рядок позначте як абзац, використовуючи теги <P> </P>. Для розбиття другого вірша на рядки позначте весь вірш як один абзац, а кінець кожного рядка вірша позначте тегом <BR>. Збережіть та перевірте результат. Проаналізуйте відмінності в оформленні віршів.
  9. Спробуйте вирівняти тексти віршів по центру. Перевірте результат.
  10. Виділіть вірші горизонтальними лініями зверху и знизу, використовуючи тег <HR>.
  11. Створіть новий документ prizvyshe_3.html введіть теги, що визначають структуру документу та збережіть його в тій же папці, що й перші два. В тексті заголовку розмістіть текст «Список групи». А список Вашої підгрупи оформіть у вигляді нумерованого списку в контейнері <BODY>. Для цього використовуйте наступні теги: <OL> <LI> Іванов Іван </LI> <LI> Петров Петро </LI> <LI> Пупкін Василій </LI> </OL> Нижче продублюйте список студентів, але для оформлення використовуйте теги маркованого списку: <UL> </UL>.
  12. Спробуйте створити змішаний список:

    Перевірте результат.

Контрольні запитання:

  1. Для чого використовується тег <TITLE>?
  2. Для чого використовується контейнер <META CHARSET="UTF-8">?
  3. Чи можна не використовувати контейнер <META CHARSET="UTF-8"> і чи може це призвести до проблем з відображенням сторінки?
  4. Чи обов'язково назви тегів писати великими літерами?
  5. Чим відрізняється тег <BR> від тегу <P>?