Главная | Обратная связь | Поможем написать вашу работу!

Основні стилі заголовків

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

Тема: Стилі заголовків. Списки.

Мета: опанувати основні стилі заголовків, списки, що використовуються в HTML-документах.

Обладнання: ПК, інструкції, програма – Блокнот та броузер – Internet Explorer.

Література.

Основна література.

1. Матвієнко О.В., Бородкіна І.Л., Internet – технології: проектування Web – сторінки: Навчальний посібник.-К.: Альтерпрес, 2003

2. Дрыгалкин В.В. HTML в примерах. Как создать свой Web – сайт. Самоучитель.:-М. Издательский дом «Вильямс», 2004

3. Полонская Е.Л. Язык HTML. Самоучитель.: - М.: Издательский дом «Вильямс», 2003

4. Холл, Марти, Браун, Лэрри. Программирование для Web. Библиотека Профессионала.: Пер. с англ. – М.: Издательский дом «Вильямс», 2002

5. Сергей Велихов. Справочник по HTML 4.0. Серия книг «Руководство по работе: Советы, хитрости, трюки, секреты» - М.: Бук-прес, 2006

Додаткова література.

1. HTML, XHTML и CSS. Библия пользователя, 3-е издание. Брайан Пфаффенбергер, Стивен Шафер, Чак Уайт, Билл Кароу.

2. Освой самостоятельно HTML. 10 минут на урок, 4-е издание. Дидре Хейз.

Теоретичні відомості.

Функції заголовків

Рубрикація - це система заголовків видання й позначуваних ними підрозділів (рубрик), яка виражає логічний чи інший зв'язок і супідрядність частин тексту.

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

Рубрикація - це така система заголовків, у якій заголовки різної значущості посідають різні щаблі (від вищого через проміжні до нижчого). Термін «щабель» умовно позначає значущість заголовка: на першому, верхньому, щаблі стоять заголовки найвищої значущості, на другому, наступному -заголовки, значущість яких менша за значущість заголовків першого щабля на один крок, і так далі.

Заголовки характеризуються такими ознаками:

1. Міра змістовності, склад і форма заголовка.

2. Місце заголовка на сторінці відносно основного тексту.

3. Взаємодія заголовка з текстом.

4. Характер частини тексту, позначеної заголовком.

Мова HTML використовує шість стилів заголовків для виділення тексту. Стилі нумеруються від 1 до 6, причому розмір шрифту заголовку першого стилю є найбільшим.

Стандарт мови HTML нараховує 11 атрибутів тега заголовка, але не всі вони реалізовані у більшості програм-броузерів. Розглянемо тільки атрибут ALIGN, який дозволяє вирівнювати текст за правою, лівою межею або по центру. За замовчуванням текст вирівнюється за лівою межею. Даний атрибут застосовується також до графіки і таблиць.

Значення атрибута ALIGN такі ж, як і для тегу розбиття тексту на абзаци <Р> (див. Розділ 4).

Основні стилі заголовків

<Hn>...</Hn>, де n - номер стилю від 1 до 6 - виділяє текст різними стилями

ПРИКЛАД

Файл у форматі HTML:

<HTML>

<HEAD>

<TITLE>Moя перша HTML-Cсторінка</TITLE>

</HEAD>

<BODY>

<H1 ALIGN="CENTER">Українська минувшина</Н1>

<H2 ALIGN="CENTER">Етнографічний довідник</Н2>

<H3 ALIGN="RIGHT">традиційне житло</НЗ>

<Н4>НАРОДНІ ЗАНЯТТЯ</Н4>

<H5 ALIGN="RIGHT">Українська кухня</Н5>

<Н6>НАЦІОНАЛЬНЕ ВБРАННЯ</Н6>

</BODY>

</HTML>

Відображення файла програмою-броузером:

На сторінці веб-сайту можна розташувати маркіровані і нумеровані списки. Для створення маркірованого списку застосовується тег <ul> із закриваючим тегом </ul>. Весь вміст, поміщений цими тегами, вважається маркірованим списком, при цьому, кожен елемент списку має бути позначений тегом <li> із закриваючим тегом </li>. Хоча в HTML можна і не вказувати закриваючий тег </li>, але для xhtml він обов'язковий. Наприклад

Код

Сьогодні я їв з'їв: <ul> <li>2 котлети</li> <li>багато бульби</li> <li>салат з огірків</li> </ul>

Отримаємо в браузері:

Сьогодні я їв з'їв:

2 котлети

багато бульби

салат з огірків

Для організації нумерованого списку на веб-сторінці потрібно використовувати тег <ol> із закриваючим тегом </ol>. Елементи списку знову ж таки створюються тегом <li>(</li>). Наприклад

Код

Сьогодні я випив: <ol> <li> Чай </li> <li> Літр Живчика </li> <li> 6 літрів пива </li> </ol>

Отримаємо в браузері:

Сьогодні я випив:

Чай

Літр Живчика

6 літрів пива

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

Код

<ul> <ul> <ul> </ul> </ul> </ul>

Наприклад

Код

Процесс викурювання трьох сигарет Winston Light <ol> <li> сигарета 1 </li> <li> сигарета 2 </li> <ul> <li>намагався прикурити - спроба 1</li> <li>намагався прикурити - спроба 2</li> <li>намагався прикурити - спроба 3</li> </ul> </li> <li> сигарета 3 </li> </ol>

Отримаємо в браузері:

Процесс викурювання трьох сигарет Winston Light

сигарета 1

сигарета 2

намагався прикурити - спроба 1

намагався прикурити - спроба 2

намагався прикурити - спроба 3

сигарета 3

Можна задати вигляд маркера, який відображуватиметься спочатку кожного елементу атрибутом type тега <ul>. Атрибут type може набувати наступних значень:

· disc - маркер буде у вигляді замальованного кружка;

· square - маркер набере вигляду квадрата;

· circle - маркер набере вигляду не замальованного кола.

Наприклад

Код

<ul type="square">

Можна задати типа нумерації елементів нумерованого списку атрибутом type тега <ol>. За умовчанням (атрибут type не вказаний) нумерація елементів відбувається арабськими цифрами, також нумерація йтиме арабськими цифрами, якщо вказати як значення атрибуту type цифру "1". Якщо привласнити атрибуту type значення "i", то нумерація відбуватиметься римськими цифрами (з використанням рядкових букв). Якщо привласнити атрибуту type значення "I", то нумерація відбуватиметься римськими цифрами (з використанням прописних букв). Якщо привласнити атрибуту type значення "a", то нумерація відбуватиметься рядковими латинськими буквами. Якщо привласнити атрибуту type значення "A", то нумерація відбуватиметься прописними латинськими буквами.

Так само для нумерованого списку можна задати початкове значення, з якого буде продовжена нумерація елементів списку атрибутом start тега <ol>, наприклад

Код

<ol type="a" start="5">

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

1. Створити титульну сторінку. Відпрацювати стилі заголовків на сторінці.

2. До кожного із стилів застосувати атрибут ALIGN з різними значеннями.

3. Задати для створених стилів заголовків різні фізичні стилі.

4. Відпроцювати створення як нумерованих так и маркерованих списків.

Запитання для самоперевірки.

1. Які теги використовуються для встановлення різних стилів заголовка?

2. Чим відрізняються різні стилі заголовку?

3. Чи можна встановлювати одночасно стиль заголовку і певний фізичний стиль?

4. Як створюються маркеровані списки?

5. Як створюються нумеровані списки?

6. Як задається початок нумерованого списку?

7. Яким чином задається маркер для списку?