Вправа "Троянда столиста" (форматування символів)

Текст у HTML форматують за допомогою відповідних тегів, які наведені в таблиці.

Тег

Стиль

Приклад

<B>

Напівжирний шрифт

Напівжирний

<strong>

Напівжирний шрифт

Напівжирний

<I>

Курсив

Курсив

<em>

Курсив

Курсив

<U>

Підкреслення

Підкреслений текст

<SUB>

Підрядковий текст

Текст підрядковий текст

<SUP>

Надрядковий текст

Текст надрядковий текст

<STRIKE>

Перекреслення

Перекреслений

 

<BASEFONT> - одинарний тег, задає гарнітуру(шрифт), розмір і колір шрифту, діє на весь текст і має такі атрибути:

  • FACE=”значення” – гарнітура (шрифт), наприклад FACE=”Monotype Corsiva”, тоді текст html-документу буде мати гарнітуру шрифта Monotype Corsiva.
  • SIZE=значення – розмір шрифту (ціле число від 1 до 7). Шрифти різних розмірів мають такий вигляд:   

1  2  3  4  5  6  7   (7-найбільший розмір шрифту)

  • COLOR=значення – колір шрифту. Як значення кольору можна використовувати назви кольорів англійською мовою, такі як red, green,blue тощо, або шістнадцяткові значення, що починаються з символу # і послідовно задають червоний, зелений та синій кольори, які мають бути змішані для отримання потрібного. Наприклад, #FF0000, #008000, #0000FF тощо.

<FONT АТРИБУТИ>Текст</FONT> - подвійний тег, задає гарнітуру(шрифт), розмір і колір шрифту для фрагменту тексту і має такі самі атрибути як тег <BASEFONT>

Є й інші теги, які можна застосувати для зміни параметрів тексту.

  • <BIG>Текст</BIG> - збільшення розміру шрифту. Розмір символів тексту збільшується на одиницю відносно поточного рівня.
  • <SMALL>Текст</SMALL> - зменшення розміру шрифту. Розмір символів зменшується на одиницю відносно поточного рівня.
  • <EM>Текст</EM> - виділення важливих фрагментів тексту. Текст відображатиметься курсивом.
  • <DEL>Текст</DEL> - створення перекресленого тексту. Текст буде перекреслено горизонтальною лінією.
  • <MARQUEE>Текст</MARQUEE> - рухомий рядок.

 Практичне завдання

Помістимо на веб-сторінку наведений нижче текст, відформатувавши його за допомогою відповідних тегів:

Троянда столиста

Граціозні форми, ніжне забарвлення, витончений аромат троянди з незапам’ятних часів чарували людей. Тому й створено безліч легенд про цю чарівну, ніжну й чудову квітку.

За стародавньою легендою, прекрасна богиня Лакшмі народилася з пуп’янка троянди.

У древньому індійському міфі розповідається, що прегарний юнак Адоніс, який уособлював прихід весни, повстав із куща троянди. 

У Персії так шанували царицю квітів, що навіть країна одержала назву Гюлістан – країна троянд.

 

 

 

Завантажити файл - Троянда.html

У цьому прикладі для деяких фрагментів тексту необхідно застосувати по два теги форматування, наприклад, <i><u>Україні</u></i>. Слід пам’ятати про правило вкладених тегів, згідно з яким їх потрібно закривати у зворотному до відкривання порядку. Тобто, якщо спершу відкрили тег курсиву, а потім – тег підкреслення, то спочатку слід закривати тег підкреслення, а потім курсиву.

  1. Збережіть HTML-документ у файлі з розширенням .html. Вигляд створеної веб-сторінки у вікні браузера.
  2. Здайте роботу на сайт за допомогою форми для відправки домашнього завдання.

Матеріали сайту https://distosvita.pp.ua