Виконуючи цю роботу ви використаєте досить багато тегів, які впливають на вигляд тексту вебсторінки. У файлі, з яким ви будете працювати, для деяких тегів прописані додаткові властивості в глобальному стилі (контейнер <style> </style>, який знаходиться перед закриваючим тегом </head>). Так їх їх вплив буде ще помітнішим.
Завантажте архів файлуrozmitka-textu.html для виконання роботи і розпакуйте завантажений архів. Вносьте зміни у цей файл відповідно до інструкції. Теги, які використовуються в цій роботі, розглянуто у розділі 1.2. Основні теги електронного посібника Основи HTML. Коментарі, розташовані в самому файлі, також стануть вам у нагоді.
Відкрийте у текстовому редакторі Sublime Text файл, який видобули із завантаженого архіву. Також перегляньте його у браузері. Зверніть увагу як відображається заголовок вкладки браузера та вміст веб-сторінки (рис. 1).
Рис. 1. Значки і літери знайомі, але загальний сенс контенту не зрозумілий. Чи не так?!
Результатом вашої роботи буде сторінка, зображена на рисунку 2. На остаточний вигляд впливають не тільки теги, а й стильові правила, розташовані у глобальному стилі.
Рис. 2. Звичайний текст зазнає перетворень завдяки відповідним тегам. Трішки стилів додадуть тексту виразності.
Щоб отримати зображення хатинки, як на рисунку 1, необхідно використати тег <pre>. Відкрийте його у рядку перед хатинкою, після відповідного коментаря, а закрийте після хатинки.
Огорніть текст Гарбузова каша (складники) в тег заголовка першого рівня, а для текста (складники) використайте тег <small>. Цей фрагмент коду повинен виглядати наступним чином
ЗАУВАЖЕННЯ:
Використовуйте інструменти швидкого переміщення по тексту. Наприклад, перед словом Гарбузова введіть тег <h1>, натисніть клавішу End і почніть писати </. Sublime завершить написання закриваючого тега за вас. Переміщення на слово ліворуч/праворуч можна виконати із використанням клавіші Ctrl і відповідної стрілочки →/←.
Розділіть інгредієнти каші на рядки, проставивши вкінці кожного (крім останнього) тег <br>.
Після відповідного коментаря додайте тег розділової риски. Частинка сторінки з інгредієнтами каші на цьому етапі виглядатиме як на рисунку 3.
Рис. 3. Частина тексту вже набула більш привабливого вигляду. Далі необхідно використати відповідні теги для оформлення елементів рядка
Використайте теги для верхнього і нижнього індексу, підкресленого та закресленого тексту, для напівжирного тексту та курсиву (дивіться електронний посібник). Для тексту Жирні вершки - 100мл використайте <mark>.
Якщо ваш результат цієї частини не відповідає відповідному фрагменту рисунку 2, звірте свій код з наступним:
<h1>Гарбузова каша <small>(складники)</small></h1>
<strong>Стиглий кабак</strong> - 0,5кг<br>
Вода H<sub>2</sub>O або <del>газована</del> <ins>негазована</ins> BonAqua<sup>®</sup> - 200 мл<br>
Крупа (<em>рис або пшоно</em>) - 1 склянка<br>
Сіль та цукор за смаком<br>
<mark>Жирні вершки - 100мл</mark>
<!-- додайте розділову риску -->
<hr>
ЗАУВАЖЕННЯ:
Тут були використані семантичні теги для виділення фрагментів рядка. Якщо ви для напівжирного, курсивного, закресленого, підкресленого тексту використали відповідні теги з HTML4, це також цілком прийнятний результат.
Продовжимо роботу над розміткою тексту. Мабуть ви вже здогадались, що текст Створення списків також є заголовком першого рівня. Заголовки, які на рисунку 2 мають синій колір, це заголовки другого рівня. Огорніть їх у відповідний тег. Ви вже знаєте, як це зробити одночасно. Скористайтеся нагодою потренуватись.
Кожне окреме речення під цими заголовками огорніть в тег для абзаців тексту.
І, нарешті, зверніть увагу на оформлення тегів на рисунку 2. В html для того, щоб на сторінці теги відображались у кутових дужках, використовуються спеціальні символи. А для того, щоб змінити їх вигляд на вебсторінці, огорніть кожен такий елемент у тег <code></code> .
Оскільки ви обрали ускладнений варіант, то, сподіваємось, допомога у виборі тегів вам не потрібна. Розмітьте сторінку, використовуючи теги заголовків, абзацу, відповідні теги для елементів рядка так, щоб результат відповідав рисунку 2.
ЗАУВАЖЕННЯ:
Ваша робота завершена. Зверніть увагу не тільки на вигляд, але й на вміст сторінки. Під другим заголовком тезисно викладений матеріал наступної теми. Але, якщо знайшлися невідповідності в оформленні, ви можете завантажити і переглянути в текстовому редакторі остаточний результат, щоб знайти відмінності від свого варіанту розмітки.
