Створення веб-сторінок Одеська школа 27 Урок 2
Зміст
Урок 2
Розбиття тексту на логічні частини
Заголовки
Для того щоб розбити текст на логічні частини, використовують заголовки. Мова HTML підтримує шість рівнів заголовків документів. Вони позначені тегами від <Н1>...</Н1> до <Н6>...</Н6>. На екрані ці заголовки відображаються різними шрифтами (зазвичай напівжирними). Хоча в мові HTML є теги форматування, які можуть змінювати зображення шрифту, користуватися ними для заголовків не рекомендовано. Текст, що міститься всередині тегу заголовка, відображатиметься відповідно до його рівня. Найвищий рівень має заголовок Н1, найнижчий — Н6. Текст заголовка може бути вирівняний по центру, за правим або лівим краєм — для цього використовують атрибут ALIGN.
Наприклад:
<Н2 ALIGN=center | right | left >Teкст заголовка </h2> (тут символ | означає можливість вибору між значеннями center, right або left ).
Абзаци
Для визначення звичайних абзаців у мові HTML використовують теги <Р> і </Р>. Текст, розміщений між ними, власне і буде одним абзацом.
При цьому слід пам'ятати, що всі «зайві» пропуски між словами і переходи на новий рядок під час відтворення HTML-документа браузер ігнорує. Коли браузер відтворює веб-сторінки, абзаци відділяються один від одного за допомогою відступів.
У разі переходу на новий рядок без створення абзацу використовується
одинарний тег <BR>. Розділювачами в тексті можуть також
бути горизонтальні лінії, які візуально відділяють різні частини
документа, — їх створюють за допомогою одинарного тегу <HR>.
Кольори та зображення для всього документа і його тла задають
за допомогою тегу <BODY>. Він може мати такі атрибути:
• BACKGROUND="URL" — замість URL вказують адресу малюнка, який має бути тлом для сторінки;
• BGC0L0R=значення — задає колір, який має бути фоновим для документа;
• ТЕХТ=значення — задає колір тексту;
• LINK=значення — визначає колір гіперпосилань у документі;
• ALINK=значення — задає колір гіперпосилань під час клацання;
• VLINK=значення — задає колір переглянутих гіперпосилань.
Браузер перетворює текст HTML-документа під час його виведення на екран, тобто ігнорує зайві пропуски, символи табуляції, символи кінця рядка, форматує текст відповідно до використаних тегів. Проте іноді виникає потреба у тому, щоб помістити в документ відформатований текст, для якого браузер повинен зберегти всі пропуски, навіть якщо кілька пропусків розміщені один за одним, знаки переносу на інший рядок, табуляції та інші символи форматування. Для цього використовують тег <PRE>TeKCT</PRE>. Втім, якщо браузер зустріне в такому тексті теги розмітки, вона буде відповідним чином застосована.
Теги форматування тексту
Текст у HTML-документах форматують за допомогою відповідних тегів. У нижче наведено теги, які використовують для форматування символів, та заданий ними ефект.
Теги Ефект Приклад
<b> ... </b> Напівжирне накреслення bold
<I> ... </I> Курсивне накреслення italic
<U> ... </U> Підкреслене underlined
<S> ... </S> Перекреслене striken
<SUP> ... </SUP> Верхній індекс superscript
<SUB> ... </SUB> Нижній індекс subscript
Окрім цього, можна визначати різні параметри шрифту. Зокрема, за допомогою тегу <BASEFONT> задають гарнітуру (рисунок), розмір і колір шрифту. Цей тег одинарний, діє на весь текст, розміщений нижче, і має такі атрибути.
• FACE="значення" — гарнітура. Якщо зазначеної гарнітури на комп'ютері користувача немає, то текст буде оформлено з використанням гарнітури за умовчанням. В атрибуті FACE іноді записують через кому кілька гарнітур, тоді браузер вибирає гарнітури за списком: за відсутності першої використовує другу і т. д. Значення атрибута слід подавати в лапках.
• size=значення — розмір шрифту (ціле число від 1 до 7). Шрифти різних розмірів мають такий вигляд:
• COLOR=значення — колір шрифту. Як значення кольору можна використовувати назви кольорів англійською мовою, такі як red, green, blue тощо, або шістнадцяткові значення (записані в шістнадцятковій системі числення), що починаються з символу # і послідовно задають червоний, зелений та синій кольори, які мають бути змішані для отримання потрібного. Наприклад, #FF0000, #008000, #0000FF тощо. Для оформлення сайту зазвичай використовують набір кольорів, який називають безпечною палітрою. Він складається з 216 елементів. Особливістю безпечних кольорів є те, що вони не змінюються у разі відображення різними браузерами або на різних моніторах, тобто ця палітра забезпечує найточнішу передачу на різних моніторах того, що задумав веб-дизайнер. Якщо будь-яка з трьох складових шістнадцяткового значення відрізняється від 00, 33, 66, 99, СС чи FF, то колір не є безпечним. Значення атрибутів SIZE та COLOR можна записувати без лапок.
Гарнітуру, розмір та колір шрифту для фрагмента тексту задають за допомогою тегу <FONT АТРИБУТИ>Текст</FONT>. Атрибути цього тегу такі самі, як у тегу <BASEFONT>, за винятком атрибута SIZE: його значення зі знаком мінус (або плюс) означає, що розмір шрифту буде зменшено (чи збільшено) на відповідну величину відносно заданого за умовчанням або у тегу <BASEFONT>. Значення без знака задає абсолютний розмір шрифту. Є й інші теги, які можна застосовувати для зміни параметрів тексту.
• <BIG>Teкст</BIG> — збільшення розміру шрифту. Розмір символів тексту збільшується на одиницю відносно поточного рівня.
• <SMALL>Teкст</SMALL> — зменшення розміру шрифту. Розмір символів зменшується на одиницю відносно поточного рівня.
• <ЕМ>Текст</ЕМ> — виділення важливих фрагментів тексту. Текст відображатиметься курсивом.
• <DEL>Teкст</DEL> — створення перекресленого тексту. Текст буде перекреслено горизонтальною лінією.
Цікавого оформлення веб-сторінці надає пара тегів
<MARQUEE> та </MARQUEE> — вони додають до веб-сторінки «рухомий рядок» із тексту, розташованого між ними.
Завдання
Розмістити на веб-сторінці наведений нижче текст, відформатувавши його за зразком відповідними тегами
