Урок:

Практична робота N2 «Мова HTML. Теги форматування тексту»

Вміст уроку:
1
2
Опис, який учні побачать перед початком уроку

Доброго дня читаєм умову уроку виконуєм у програмі блокнот та зберігаєм із розширенням HTML.

Урок не містить жодного завдання. Додайте завдання.

Щоб додати завдання, оберіть категорію завдання на панелі запитань.

1

10 з 21 бала

Практична робота №2

«Мова HTML. Теги форматування тексту»

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

Теги

Ефект

Приклад

<B> та </B>

Напівжирне

накреслення

bold

<I> та </I>

Курсивне накреслення

italic

<U> та </U>

Підкреслене

underlined

<S> та </S>

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

striken

<SUP> та </SUP>

Верхній індекс

superscript

<SUB> та </SUB>

Нижній індекс

subscript

<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> - рухомий рядок.

2

11 з 21 бала

Вправа 1

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

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

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

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

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

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

Гюлістан – країна троянд.

  1. Введіть HTML-код веб-сторінки, на якій відображатиметься наведений вище відформатований текст.

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

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

Рефлексія від 14 учнів

Сподобався:

0

Так: 13

Ні: 1

Зрозумілий:

0

Так: 12

Ні: 2

Потрібні роз'яснення:

0

Ні: 13

Так: 1

Рекомендуємо

HTML Створення форм. Практична робота

HTML Створення форм. Практична робота

349

Аватар профіля Брусенцова Катерина Юріївна
Інформатика
11 клас

50 грн

Практична робота "Форматування та формули в Excel"

Практична робота "Форматування та формули в Excel"

324

Аватар профіля Киреєва Оксана Анатоліївна
Інформатика
7 клас

50 грн

Практична робота № 1: "Форматування шрифту в текстовому процесорі"

Практична робота № 1: "Форматування шрифту в текстовому процесорі"

302

Аватар профіля Киреєва Оксана Анатоліївна
Інформатика
10—11 клас

50 грн

Мова розмітки гіпертексту (HTML)

Мова розмітки гіпертексту (HTML)

202

Аватар профіля Губчик Вероніка Григорівна
Інформатика
11 клас

50 грн

Практична робота: Анімація руху тексту в GIMP

Практична робота: Анімація руху тексту в GIMP

320

Аватар профіля Губчик Вероніка Григорівна
Інформатика
10—11 клас

50 грн

Додавання тексту до графічних зображень та його форматування

Додавання тексту до графічних зображень та його форматування

518

Аватар профіля Лизько Валентина Степанівна
Інформатика
7 клас

35 грн

Схожі уроки

КРВ - 3.2.2 Обробка нижнього зрізу жіночих штанів

КРВ - 3.2.2 Обробка нижнього зрізу жіночих штанів

689

Аватар профіля Кобилянська Катерина Анатоліївна
Професійна освіта
дорослі

КРВ - 3.2.2 Обробка верхнього зрізу жіночих штанів поясом

КРВ - 3.2.2 Обробка верхнього зрізу жіночих штанів поясом

1162

Аватар профіля Кобилянська Катерина Анатоліївна
Професійна освіта
дорослі

КРВ - 3.2.2 Обробка застібки на тасьму блискавку

КРВ - 3.2.2 Обробка застібки на тасьму блискавку

561

Аватар профіля Кобилянська Катерина Анатоліївна
Професійна освіта
дорослі

КРВ - 3.2.2 Обробка кишень в жіночих штанах

КРВ - 3.2.2  Обробка кишень в жіночих штанах

594

Аватар профіля Кобилянська Катерина Анатоліївна
Професійна освіта
дорослі

Обробка виточок та зрізів штанів

Обробка виточок та зрізів штанів

660

Аватар профіля Кобилянська Катерина Анатоліївна
Професійна освіта
дорослі

Обробка коміра суцільнокроєного з деталями виробу та з'єднання його з горловиною

Обробка коміра   суцільнокроєного з деталями виробу та з'єднання його з горловиною

904

Аватар профіля Колесник Людмила Володимирівна
Професійна освіта
дорослі