3 урок
Розглянемо будову
парних тегів форматування тексту:
•<B> текст
</B> — напівжирний;
•<I> текст
</I> або<EM>текст
</EM> — курсив;
•<U>текст
</U> — підкреслений;
•<SUB> текст
</SUB> —нижній індекс;
•<SUP> текст
</SUP> —верхній індекс;
•<BIG>текст
</BIG> –великий шрифт;
•<SMALL> текст
</SMALL> — малий шрифт;
•<MARK> текст
</MARK> — підсвічений шрифт;
•<S> текст
</S> — закреслений шрифт;
Завдання 1.
У створеній папці
\\Група№xx\Вивчення HTML\
Створіть в блокноті (notepad++) нову сторінку
Формат2.html
Скопіюйте текст внизу у новосторенну вебсторінку.
Зверніть увагу як працюють теги.
<Html>
<Head>
<Title> Теги форматування </title>
</Head>
<Body>
<hr>
<B> текст напівжирний </B> <br>
<I>текст курсивом </I> <br>
<U>текст підкреслений </U>
<SUB> нижній індекс </SUB> та<SUP> верхній індекс </SUP> <br>
<BIG> великий шрифт</BIG> <br>
<SMALL>малий шрифт></SMALL> <br>
<EM> текст курсивом </EM> <br>
<MARK> текст виділений підсвічуваням </MARK> <br>
<S> текст закреслено </S> <br>
<hr>
</Body>
</Html>
Завдання 2.
Застосуйте до цих тегів
атрибут кольору COLOR = "назва кольору" на свій вибір
Наприклад. <SUB color="Lime">нижній індекс
</SUB> <br>
!!!! Зверніть увагу на те, що для деяких тегів, атрибут color не спрацьовує.
Отже кожен тег, має свій набір атрибутів.
Black —чорний
Red — червоний
Gray.—темно-сірий
Navy — темно-синій
Fuchsia—рожевий
Yellow — жовтий
Silver —сірий
Green —зелений
White —білий
Blue—синій
Teal —бірюзовий
Aqua — блакитний
Maroon —малиновий
Lime — яскраво-зелений
Olive — темно-зелений
Purple — бузковий
Розглянемо парні теги <abbr> текст </abbr> - примітка
Тег <abbr> при наведенні курсору миші на текст обгорнутий цим тегом, виводиться пояснення, яке описується в атрибуті title
Наприклад. Підведіть мишку до слова Кабмін
Теги <Hn> текст </Hn> заголовки 6-ти рівнів:
заголовок 1 рівня
заголовок 2 рівня
заголовок 3 рівня
заголовок 4 рівня
заголовок 5 рівня
заголовок 6 рівня
Завдання 1.
У створеній папці
\\Група№xx\Вивчення HTML\
Створіть в блокноті (notepad++) нову сторінку
Формат3.html
Скопіюйте текст внизу у новосторенну вебсторінку.
Зверніть увагу як працюють теги.
<Html>
<Head>
<Title> Теги форматування </title>
</Head>
<Body>
<h1>заголовок 1 рівня<h1>
<hr>
<h3>Приклад з використанням тегу <mark>abbr</mark><h3>
<p>Наведіть курсором миші на невідому Вам абревіатуру
</p>
<p><mark> Абревіатура </mark> – скорочене складне слово (іменник), утворене з початкових літер чи початкових слів, на основі яких твориться скорочення.
Суттєвою ознакою абревіатур є стабільна вимова за назвами букв (рідше звуків) та – як результат її – лексикалізація графічних скорочень, якої з часом набувають
частовживані й загальновживані довгоживучі абревіатури:
<abbr title="Кабінет Міністрів України">Кабмін</abbr>, <abbr title="Житлово-експлуатаційна контора"> ЖЕК</abbr>,<abbr title="Організація Північноатлантичного договору">НАТО</abbr>, <abbr title="Організація Об'єднаних Націй">ООН</abbr> тощо. Основні умови їхнього функціонування - доцільність, зрозумілість, стандартність. їх ще деколи називають «лексичними скороченням».
<h3>заголовок 3 рівня<h3>
<hr>
</Body>
</Html>
Тег
<pre> абзац тексту
</pre> - абзац огорнутий цим тегом виведеться браузером, так же само, як ви його ввели в блокноті, зберігаючи відступи і переноси на інші сторінки;
Завдання 5.
У створеній папці
\\Група№xx\Вивчення HTML\
Створіть в блокноті (notepad++) нову сторінку
Формат4.html
Використовуючи шрифти форматування тексту побудуйте схожу веб - сторінку :
