Форматування тексту. Для форматування тексту можна використовувати різні стилі шрифтів

Для форматування тексту можна використовувати різні стилі шрифтів. За допомогою тега < B> встановлюють жирний шрифт, тегів < EM> або < I> – курсив, тег < U> – підкреслене написання символів. Усі перераховані теги – парні. Наприклад:

Це дійсно < em> цікавий< /em> пункт!

Результат:

Це дійсно цікавий пункт!

Тег < font > може бути використаний для задавання кольору й розміру шрифту, яким буде виведений ваш текст. Атрибут color служить для вказівки кольору тексту.

Наприклад:

У цій пропозиції є < font color=" red" > слово< /font>, виділене червоним кольором.

Результат:

У цій пропозиції є слово (червоного кольору), виділене червоним кольором.

Атрибут size служить для задавання розміру шрифту в умовних одиницях від 1 до 7. Прийнято вважати, що розмір “нормального” шрифту відповідає числу 3. Розмір може бути зазначено як абсолютною величиною (size =5), так і відносною (size = +2 – збільшить текст на 2 одиниці відносно базового, size = -1 – зменшить текст на 1 одиницю відносно базового).

Наприклад:

Поради < font size=" +2" color=" maroon" > ветеринарного< /font> лікаря

Результат:

Поради ветеринарного лікаря

Додавання малюнків

Використання малюнків робить ваші сторінки більш цікавими. Вставити малюнок дозволяє тег < img>. Припустимо, що файл малюнка “peter.jpg” завширшки 200 пікселів і висотою 150 пікселів, лежить у тій же папці, що і HTML файл. Вказуємо наступну команду:

< img src=" peter.JPG" width=" 200" height=" 150" > < BR>

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

< img src=" peter.JPG" width=" 200" height=" 150" alt=" Мій друг Петро" >

При встановленні малюнка в документ можна використовувати атрибут align= “…” для вирівняння його по лівому, правому краю та по центру.

У WWW використовується два формати графічних файлів GIF і JPG. Формат GIF використовується, коли потрібно прозоре зображення чи анімація, а також для:

· чорно-білих малюнків і тексту

· зображень з обмеженою кількістю кольорів

· графіки з різкими контурами (меню, кнопки, діаграми і т.п.)

· зображень із текстом

Формат JPG більше підходить у таких випадках:

· скановані зображення

· графіка зі складним сполученням кольорів і відтінків

· будь-яке зображення з палітрою більш ніж 256 кольорів

Створення посилань на інші сторінки

Найважливішим поняттям в HTML є гіперпосилання, яке дозволяє зв’язати текст або будь-який об’єкт з іншими гіпертекстовими документами. Посилання позначаються тегом < a>. Загальний вигляд посилання:

< a href=" filename" > Текст_посилання< /a>

Текст між < a> і < /a> використовується як опис посилання, і позначається, як правило, синім кольором, і підкреслюється лінією.

Наприклад посилання на сторінку, визначену у файлі “advanced.htm” (тобто посилання на файл “advanced.htm”) має вигляд:

< a href=" advanced.htm" > Просунутий HTML< /a>

Можна використовувати в посиланні малюнок. Наступний приклад дозволяє кликанням на логотипі компанії перейти на її домашню сторінку:

< a href=" /" > < img src=" logo.gif" alt=" home page" > < /a>

Списки

HTML пропонує три види списків:

1. Маркірований (невпорядкований) список відкривається тегом < ul> і закінчується < /ul>, а кожен його пункт починається стандартним тегом < li>. Наприклад:

< ul>

< li> перший пункт списку< /li>

< li> другий пункт списку< /li>

< li> третій пункт списку< /li>

< /ul>

Результат:

· перший пункт списку

· другий пункт списку

· третій пункт списку

2. Нумерований (впорядкований) список використовує теги < ol> і < /ol>, а кожен його пункт починається стандартним тегом < li>.

Наприклад:

< ol>

< li> перший пункт списку< /li>

< li> другий пункт списку< /li>

< li> третій пункт списку< /li>

< /ol>

Результат:

1. перший пункт списку

2. другий пункт списку

3. третій пункт списку

4. С писок визначень (глосарій) представляє текст у формі словникової статті, що складається з обумовленого терміна й абзацу, що розкриває його значення й відкривається тегом < dl>. Кожен термін відкривається тегом < dt>, а визначення тегом < dd>.

Наприклад:

< dl>

< dt> перший термін< /dt>

< dd> його визначення< /dd>

< dt> другий термін< /dt>

< dd> його визначення< /dd>

< /dl>

Результат:

перший термін

його визначення

другий термін

його визначення

Списки можуть бути вкладеними один в іншій. Наприклад:

< ol>

< li> перший пункт списку< /li>

< li> другий пункт списку< /li>

< ul>

< li> перший пункт вкладеного списку< /li>

< li> другий пункт вкладеного списку< /li>

< /ul>

< li> третій пункт списку< /li>

< /ol>

Результат:

1. перший пункт списку

2. другий пункт списку

· перший пункт вкладеного списку

· другий пункт вкладеного списку

3. третій пункт списку.

Завдання для лабораторної роботи

1. Запустити браузер Internet Explorer, ознайомитися з меню браузера і Довідкою, а також із структурою поточної (домашньої) Web-сторінки. Виконати Пуск/ Все программы / Internet Explorer.

2. Налаштувати програму для перемикання кодування символів. Виконати команду меню Вид/Вид кодировки і обрати один із пропонованих варіантів: кирилиця (Windows), кирилиця (Dos), кирилиця (ISO) чи кирилиця (KOI8-P).

3. У власній робочій папці створити папку MY_STORY.

4. Відкрити стандартну програму Блокнот (Пуск/Все программы/ Стандартные/ Блокнот). Зберегти порожній файл, який створили у Блокноті, під назвою First.htm у папці MY_STORY. Для цього при збереженні слід обрати Тип файлу/Всі файли. Закрити Блокнот і знайти свій файл. Зверніть увагу на його піктограму (е). Клацніть на піктограмі файла First.htm. Завантажиться браузер Internet Explorer, але його вікно буде порожнім. Зверніть увагу на рядок адреси. Щоб отримати доступ до вмісту файла First.htm, обрати меню Вид/У виді HTML (джерело). У вікні Блокнота, що відкриється, набрати тексти HTML-документу, наведеного у прикладі №1 лабораторної роботи, в якому вказати коротку інформацію про розробника: ПІБ, група, дата народження, хобі та ін (всього п’ять рядків). Зберегти змінений файл і натиснути кнопку Обновить в Internet Explorer. Аналізуємо результати виконання створеного HTML-коду і виправляємо можливі помилки.

5. За допомогою Блокнота створити порожній файл Second.htm.

6. Відкрити файл Second.htm, створити структуру web-сторінки.

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

7. Знайти на своєму або іншому мережному ПК довільний графічний файл формату JPG і скопіювати його в папку MY_STORY.

8. Виконати вставку малюнка формату JPG, скопійованого раніше в папку MY_STORY.

Завдання для самостійної роботи

1. Створити файл My_Site.htm в папці MY_STORY за темою у відповідності з номером варіанту. Використати всі теги наведені в лабораторній роботі: додавання заголовків і абзаців, виділення тексту курсивом, використання різних видів списків, додавання малюнків. Рядки тексту задати різним кольором та розміром.

2. Створити в My_Site.htm посилання на сторінки First.htm та Second.htm, що також знаходиться в папці MY_STORY.

3. Продивитися результати своєї роботи у браузері.