Доброго часу доби, шановні передплатники.

Цей урок ми посвящаємо форматування тексту в html. Розглянемо, які теги для цього застосовуються.

Відразу обмовлюся, що багато з них є досить специфічними, їх можна “обійти”, використовуючи каскадні таблиці стилів (css).

Тому загострювати увагу на них ми не будемо. Просто подивимося їх роботу, щоб Ви знали, що такі можливості в мові HTML присутні.

Отже, почнемо.

Для того щоб нам було простіше працювати, завантажити архів lesson2.zip по прямой ссылке: Архів 2 уроку

Візьмемо з надісланого Вам архіву файл “Лис і лошадь.doc” і відкриємо його за допомогою програми word. Там дві казки відомих авторів Брати Грімм.

Потім відкриємо блокнот і зробимо в ньому заголовок як у минулому уроці або просто скопіювати з попереднього уроку.

Готове?

Вірю, що так.

Тепер повернемося в word, скопіювати весь наш текст з файлу “сказка.doc” і вставимо його між тегами нашої заготовки.

Зберігаємо нашу заготовку під ім’ям lesson2.html і відкриваємо за допомогою браузера (наприклад, opera).

Ми бачимо, що текст йде без заголовків, без абзаців, без відступів.

Ось тепер і займемося безпосереднім форматуванням тексту в мову HTML.

Для виділення заголовків використовуються теги

текст

текст

текст

Цифри після букви H застосовуються в тезі від 1 до 6.

1 – найбільший заголовок, 6 – самий маленький заголовок.

Тепер Давайте знайдемо у нашому файлі назви казок і укладемо їх в теги

…

.

Лис і кінь

Лис і кіт

Аналогічно і другий заголовок.

Зберігаємо і дивимося в браузер.

Заголовки стали по центру.

Для спрощення роботи можна одночасно тримати відкритими код сторінки в блокноті і браузері.

А після змін у коді файл зберігати, а в браузері натиснути кнопку обновить (або F5).

Самостійно спробуйте різні значення тега текст. І різні значення align. Оберіть будь-яка Вам сподобалася.

Тепер розіб’ємо наш текст на абзаци.

Тег, який це робить —

текст абзацу

.

Для цього знаходимо початок абзаців і ставимо там тег

, а в кінці абзацу закриваємо його

.

Зберігаємо файл з кодом (ctrl+s), в браузері тиснемо кнопку “оновити” і дивимося, що вийшло.

У тега

є параметр align з такими ж значеннями, що і у тегів — left, right, center. Його робота абсолютно така ж як і у тега .

На абзаци і заголовки текст ми розбили. Тепер йдемо безпосередньо за текстом.

Текст можна зробити жирним. За допомогою тега або (до речі, це закриваються теги. Рекомендується ).

Курсив — або , підкреслений , моноширинний або .

Спробуйте укласти різні ділянки тексту в різні теги. І не забувайте їх закривати.

Наприклад:

будь-який текст з казки
…………………………..
………………………….
……………………..

Для зміни розміру, кольору і шрифту окремої ділянки тексту використовуйте тег , його параметри:

fаce=”arial” – вказує назви шрифту.

size=”3″ — розмір (значення від 1 до 7).

color=”******” – колір шрифту.

****** — певний код шрифту (наприклад, 000000 – це чорний).

Давайте виділимо фрагмент тексту великим червоним шрифтом. Зробити це можна наступним чином:

фрагмент тексту казки

Ще один важливий тег
застосовується для примусового переходу тексту на новий рядок. Він простий у використанні, ставите його в тому місці, починаючи з якого текст повинен відображатися з нового рядка. В принципі з цього тегу додати більше нічого, тому рухаємося далі.

Наступну групу тегів (виходячи зі свого досвіду) використовують досить рідко, тому детально розглядати їх ми не будемо. Включив я їх в даний урок, щоб показати можливості мови, і раптом вам вони коли-небудь знадобляться. Щоб ви знали, що такі можливості існують.

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

Отже, теги:

— подиндексы (H2O)

— надіндекс (45)

— збільшує шрифт на 1

— зменшує шрифт на 1

— відомості про автора та останньому оновленні сторінки (відображаються курсивом)

— цитати, відображаються курсивом

— програмний код відображається моноширинним шрифтом

— виділений текст відображається курсивом

— виділений текст відображається жирним шрифтом, рекомендується замість

— горизонтальна лінія. У цього тега є такі параметри, як:

align=center(left, right) -вирівнювання, з цим параметром ми знайомі з інших тегів

width=”число” — довжина лінії по горизонталі задається в пікселях або у відсотках щодо розмірів екрану

size”число” — товщина лінії (менше 100 пікселів, тобто якщо задати параметр size=99, a параметр width=1, то отримаємо вертикальну лінію, тільки з обмеженою висотою)

color=”колір” -колір лінії

noshade — скасовує рельєфність

Давайте відділимо наші дві казки лінією червоного кольору з шириною рівною ширині екрану. Для цього перед початком другої казки напишемо:

Поекспериментуйте з набором значень параметрів цього тегу.

Є ще один цікавий тег, але він підтримується тільки браузером Internet Explorer. Чесно кажучи мені його на практиці використовувати не доводилося.

Тег – контейнер бігає рядка з параметрами:

align=”middle(top, bottom)”- вирівнює контейнер відносно оточуючого тексту.

top — по верхньому тексту, bottom – по нижньому, middle – по середині.

behavior=”scroll(slide, alternate)” — scroll — текст, що прокручується, slide — ковзання, alternate — текст “плаває” з боку в бік.

bgcolor =”колір” — колір тла для контейнера.

direction=”left(right)” — задає напрямок руху тексту.

height=”число” — висота контейнера.

hspace=”число” — відстань від контейнера до тексту по горизонталі.

vspace=”число” — відстань від контейнера до тексту по вертикалі.

loop=”кількість” — кількість повторень.

width=”число” — ширина контейнера.

scrollmount=”число” — швидкість руху тексту.

scrolldelay=”число” — час затримки між циклами.

Наприклад, в нашій казці це може виглядати так:

Як можете?

Як можете?

Ось, мабуть, і все що я хотів вам розповісти про теги форматування тексту в HTML. Пропоную самостійно зробити вправу:

Колір тла сторінки зробити чорним, колір тексту білим, кольору заголовків червоним, внизу зробити підпис курсивом синього кольору. Можете поекспериментувати з квітами і підібрати свій варіант. Файл з назвами кольорів, які ви можете використовувати, знаходиться у надісланому вам архіві.

У наступному уроці ми навчимося робити посилання, розглянемо, які вони бувають, попрацюємо над вставкою картинок в нашу html сторінку, і зробимо картинку посиланням на будь-який web-ресурс.