Оформлення
тексту
Звичним для людини
зображенням інформації є текст, тому він звичайно займає велику частину Web-сторінок.
Формування абзаців і рядків
При створенні Web-сторінок потрібно прагнути до лаконічних текстів, які
чітко розділені на абзаци. Для створення абзацу у мові HTML передбачено кілька можливостей. Найпростіша з них - це використання
тегів <Р> і </Р>,
між якими вміщений текст абзацу. Втім, кінцевий тег </Р> в елементі абзацу не є обов'язковим.
Для переведення рядка
(розрив рядка) застосовується тег <BR>. Цей тег є порожнім елементом, що змушує броузер
перевести текст на новий рядок. Теги <BR> зручні при оформленні поштових адрес, наборі віршів
тощо.
Нижче наведено приклад
використання тегів <Р> і <BR> для відображення на Web-сторінці відомої байки.
<HTML>
<HEAD>
<ТІТLЕ>Байка «Ведмежий суд»</ТІТLЕ>
</HEAD>
<BODY>
<Р>Ведмежий
суд</Р>
Лисичка подала у суд таку бумагу: <ВR>
Що бачила вона, як попелястий Віл <ВR>
На панській винниці пив, як мошенник, брагу, <BR>
їв сіно, і овес, і сіль. <BR><BR>
Є. П. Гребінка
</BODY>
</HTML>
Задання заголовків
Заголовки поділяють HTML-документ на логічно закінчені блоки. Завдяки
заголовкам відвідувач Web-сторінки
може отримати уявлення про її вміст. Для задання заголовків використовуються
парні теги <Н1> (заголовок 1-го, найвищого рівня), <Н2> (заголовок 2-го рівня) тощо. Усього передбачено 6
рівнів заголовків.
Програма броузера
відображає заголовки більшим (напівжирним) шрифтом. Чим вище рівень заголовка,
тим більший розмір шрифту. Заголовки відокремлюються порожніми рядками від
іншого тексту.
Наприклад, замінимо у
наведеному вище коді абзац із назвою байки на заголовок Н1:
<Н1>Ведмежий
суд</Н1>
Вирівнювання
абзаців
Абзаци, що задаються
тегами <Р> і <BR>, за умовчанням вирівнюються по лівому краю сторінки.
Змінити таке вирівнювання можна за допомогою атрибута align. Значення align="center" задаватиме вирівнювання по центру, значення align="right" - вирівнювання по правому краю сторінки (вирівнювання
по лівому краю визначається атрибутом align="left". Наприклад, заголовок
<Н1 align="center">Ведмежий суд</НІ>
розташовуватиметься по центру сторінки.
Форматування
символів
Параметри шрифту, який використовується
для відображення тексту на Web-сторінках,
найпростіше визначити за допомогою елемента FONT. Для цього елемента передбачені такі атрибути: face (гарнітура шрифту або список
допустимих шрифтів); color (колір шрифту) і size (розмір шрифту). Наприклад, ви хочете в наведеному
прикладі байки перше слово «Лисичка» показати шрифтом Аrіаl жовтогарячого кольору.
Для цього введіть у документ:
<FONT face="Arial" соlог="orange">Лисичка</FONT>
Щоб задати будь-яке
зображення шрифту, використовуються теги: <B> . . . </B> - для задання напівжирного
тексту; <І>
. . . </І> - для задання курсивного тексту і <U> .
. . </U> - для підкресленого тексту. Наприклад, якщо треба
відобразити курсивом ім'я автора у тому самому прикладі, вставте в код сторінки
такий тег:
<I>Є.П.Гребінка</I>
Задання
кольору шрифту і фону сторінки
Якщо ж потрібно
визначити колір шрифту для всієї сторінки, то використовується атрибут text у тегу <BODY>. Наприклад, тег
<BODY text="red">
задає
для всього тексту червоний колір.
Колір фону всього HTML-документа визначається атрибутом bgcolor тегу <BODY>. Наприклад, тег
<BODY bgcolor="olive">
призначає оливковий колір для фону Web-сторінки.
Приклад оформлення Web-сторінки
Проілюструємо
застосування описаних засобів HTML на прикладі Web-сторінки
із байкою. Удосконалимо код цієї сторінки, щоб вона мала цікавіший вигляд.
Задамо фоновий колір сторінки - темно-фіолетовий, колір шрифту для всієї
сторінки - білий. Заголовок байки оформимо як Н2 і вирівняємо по центру.
Ініціали і прізвище автора відобразимо курсивом із вирівнюванням по правому
краю. Все це можна виконати за допомогою простого коду:
<HTML>
<HEAD>
<ТІТLЕ>Байка
"Ведмежий суд"</ТІТLЕ>
</HEAD>
<!—
Присвоєння кольору фону
і тексту сторінки
— >
<BODY bgcolor="darkviolet" text="white">
<!— Заголовок, вирівняний по центру—>
<Н2 align="center">Ведмежий суд</Н2>
<!— Початок основного тексту байки —>
Лисичка подала у суд таку бумагу:<ВR>
Що бачила вона, як попелястий Віл<ВR>
На панський винниці пив, як мошенник, брагу,<BR>
їв сіно, і овес, і сіль.
<!— Рядок із прізвищем автора вирівнюємо
по правому краю —>
<Р align="right"><I>Є.П. Гребінка</І>
</BODY>
</HTML>
Наберіть цей код у текстовому редакторі і збережіть
його у вигляді файла Байка.htm.
Створення списків
Згадайте, який вигляд мають списки, створювані
засобами процесора Word. Мова HTML також
має у своєму розпорядженні спеціальні елементи, що дозволяють подавати текстову
інформацію у вигляді подібних списків.
У HTML розрізняють марковані (неупорядковані) і нумеровані (упорядковані)
списки, причому код списку є структурою із вкладених елементів. Зовнішнім
елементом є пари тегів:
- <UL> . . . </UL>-для маркованого списку;
- <OL> . . . </OL>-для нумерованого списку.
Усередині цих тегів
містяться елементи списку, які записуються за допомогою одиночних тегів:
<LI>Вміст
рядка списку
Отже, кількість
елементів LI дорівнює кількості рядків у списку. Імена наведених
вище тегів є скороченнями слів: UL (Unordered List) - неупорядкований список,
тобто список без номерів; OL (Ordered
List) - упорядкований список LI (List Item) - елемент списку.
Іноді на початку списку розташовують
заголовок, що виділяється парним тегом <LH> . . . </LH>. Ім'я цього
тегу LH - скорочення від List Header
(заголовок списку).
Марковані
списки
Для отримання маркованого списку на Web-сторінці маємо набрати такий код:
<UL>
<LH><!—Заголовок
списку—></LH>
<LI><!—Перший рядок
списку—>
<LI><!—Останній
рядок списку—>
</UL>
Наприклад, ви хочете
оформити на сторінці список жителів Середзем'я (за Д.Толкієном). Це можна
зробити так (елемент LH опускаємо):
<HTML>
<HEAD>
<ТІТLЕ>Маркований
список</ТІТLЕ>
</HEAD>
<BODY>
<Н2>Жителі
Середзем'я</Н2>
<UL>
<LI>Хобіти
<LI>Люди
<LI>Орки
<LI>Ельфи
</UL>
</BODY>
</HTML>
Рядки списку відзначені
маркерами - маленькими затемненими кружечками, які прийняті за умовчанням. Якщо
ви хочете змінити цей вид маркерів, можете додати в елементи списку атрибут type="square" (маркер у вигляді заповненого квадратика) або type="circle" (маркер - незаповнений кружечок).
Нумеровані
списки (елемент OL)
Нумерований список
формується із застосуванням зовнішнього парного тегу <OL></OL>, що обрамовує елементи списку.
<HTML>
<HEAD>
<ТІТLЕ>Нумерований список</ТІТLЕ>
</HEAD>
<BODY>
<Н2>Бої і битви Середзем'я</Н2>
<OL>
<LI>Битва поблизу Мінас-Тіриту;
<LI>Бій двох твердинь;
<LI>Напад на Гондор;
<LI>Заключний бій;
<LI>Битва в Хобітанії;
</OL>
</BODY>
</HTML>
У наведеному прикладі нумерація елементів
списку виконана арабськими цифрами. Стиль нумерації змінюється за допомогою
атрибута type елемента LI. Наприклад, type=A відповідає
нумерації великими літерами англійського алфавіту (А, В, С,...), type=a - це нумерація малими англійськими літерами (а, b, с,...); type=I -
нумерація за допомогою римських цифр (І, II, III,...).
Як повинен подаватись текст Web-сторінок
При наповненні Web-сторінок умістом, потрібно враховувати, що
відвідувачі звичайно приходять на сайт за інформацією. Основним способом
подання інформації є текст, тому від того, як він буде складений і оформлений,
залежить загальне сприйняття вашого сайту і його корисність для відвідувачів.
При розміщенні тексту на Web-сторінках
дотримуйтеся таких правил.
- Текст повинен бути лаконічним і зрозумілим при читанні
з першого разу. З тексту бажано видалити всі зайві звороти і слова, без яких
цілком можна обійтися. Заголовки також повинні бути зрозумілими й
інформативними. При перерахуваннях різних об'єктів, понять чи подій користуйтеся
маркованими списками. Намагайтеся заощаджувати мережний час ваших відвідувачів
і пам'ятайте, що більшість користувачів переглядають сторінки «по діагоналі»,
звертаючи увагу тільки на заголовки і виділені слова.
- Великі за обсягом тексти краще розбивати на кілька
сторінок, пов'язаних гіперпосиланнями. Якщо текст має заголовки різного
ієрархічного рівня, то бажано цю ієрархію відбити в структурі пов'язаних між
собою сторінок. Це допоможе користувачеві краще орієнтуватися у великому
текстовому матеріалі.
- Тексти Web-сторінок
повинні бути написані грамотно. На жаль, не всі сторінки в WWW мають цю якість. Неграмотно написані тексти ставлять
під сумнів поданий у них матеріал. Пам'ятайте, що ваші тексти, опубліковані в
Інтернеті, стають доступними для багатьох людей.
Отже, ви вивчили прості прийоми і правила
розміщення на Web-сторінках тексту. Далі ми
розглянемо використання на сторінках посилань, графічних елементів, таблиць.
Сфера комп'ютерної графіки й електронної верстки, пов'язана з компонуванням і оформленням Web-сторінок, називається Web-дизайном.
Гіперпосилання
і графіка на Web-сторінках
Створення гіперпосилань
Гіперпосилання або
просто посилання є найпопулярнішим елементом Web-сторінок. З їх допомогою користувач може переходити
до різних частин поточної сторінки, звертатися до інших сторінок або Web-вузлів.
Посилання організується
у такий спосіб. На вихідній Web-сторінці
визначається відправна точка посилання, наприклад, підкреслене слово або
малюнок. На цільовій Web-сторінці
задається точка призначення посилання, що відповідає як конкретному HTML-елементу (тексту, малюнку, аудіо- або відеокліпу),
так і документу в цілому.
Відправна точка
посилання задається тегом <А>. Ім'я цього
тегу походить від першої літери слова anchor - якір. Сам елемент А називається
елементом прив'язки або якірним
елементом.
Усередині тегу <А> ставиться обов'язковий атрибут href,
за допомогою якого визначається точка
призначення посилання (цільовий ресурс). Між тегами <А> і </А> розміщається
текст посилання або елемент малюнка. Так найпростіше посилання може виглядати
як
<А href="rest.html">Мої канікули</А>
На Web-сторінці це посилання відображатиметься у вигляді
тексту "Мої канікули". При клацанні мишею по цьому посиланню буде
завантажуватися HTML-файл rest. html.
Зверніть увагу, що в
атрибуті href зазначене лише ім'я файла, що відповідає відносному
посиланню на файл, який розміщений у тій самій папці, що і вихідний документ.
Якщо потрібно посилатися на ресурс, розміщений у World Wide Web, то в атрибуті href указується
URL цього
ресурсу, наприклад,
<А href="http://www.Samsung.com">
Продукція фірми
Samsung </A>
Як атрибут href можна вказати ресурс mailto (виклик
протоколу електронної пошти SMPT). Наприклад, посилання вигляду
<А href="mailto://garry@myserver.net.uа">Лист
Гарику</А>
дозволить
відвідувачеві вашої сторінки безпосередньо перейти до створення і відправлення
повідомлення за адресою: garry@myserver.net.ua.
Які бувають посилання?
Мова HTML підтримує внутрішні і зовнішні гіперпосилання. Якщо
посилання здійснює перехід у межах того самого документа, то його називають внутрішнім. Такі посилання звичайно
застосовують у великих документах для переміщення по розділах. Якщо посилання
забезпечує перехід до іншого документа, розташованого на іншому Web-вузлі, то це зовнішнє
посилання.
Локатор URL ресурсу, на який вказує посилання, може бути
абсолютним і відносним. Абсолютний URL містить усі компоненти,
необхідні для того, щоб броузер зміг знайти Web-сторінку в неосяжній мережі WWW. Але якщо посилання вказує на ресурс, що міститься на
тому самому вузлі, що і вихідний документ, зручніше користуватися скороченим
записом URL, у якому вказується тільки папка і файл. Такий запис
адреси називається відносним URL. Прикладом відносного URL є значення атрибута
href = "rest. html".
Створення внутрішнього посилання
Отже, для переходів з
однієї частини документа до іншої служать внутрішні посилання. Цей вид посилань
доцільно використовувати, коли всі частини великого документа не відображаються
цілком у вікні броузера. Внутрішнє посилання, як і зовнішнє, задається за
допомогою елемента якірного тегу <А> з
атрибутом href. Але, на відміну
від зовнішнього посилання, у значенні атрибута href указується не URL, а ім'я мітки (мітка позначається знаком #).
Наприклад, такий тег
<А
href="#глав1">Розділ 1. Відплиття Богомира </А>
задає посилання на елемент документа,
позначеного міткою "глав1". Саме посилання має вигляд виділеного
тексту «Розділ 1. Відплиття Богомира». Мітка створюється за допомогою якоря <А>, однак у ньому замість атрибута href використовується
атрибут name.
Розглянемо створення внутрішніх посилань
на конкретному прикладі. Наприклад, ви збираєтеся створити електронний варіант
книги Дж. Толкієна «Дві твердині» і хочете, щоб із змісту книги можна було переходити
по посиланнях до відповідних глав.
HTML-код усього документа матиме такий вигляд:
<HTML>
<HEAD>
<ТІТLЕ>Внутрішні посилання</ТІТLЕ>
</HEAD>
<BODY>
<Н1>Джон P.P. Толкієн. "Дві
твердині"</Н1>
<Н2>Утримання</Н2>
<А href="#глав1">Розділ
1. Відплиття Богомира</А><ВR>
<А href="#глав2">Розділ
2. Кіннотники Рістанії</А><ВR>
<А href="#глав3">Розділ 3. Урукхай</А><ВR>
<А href="#глав4">Розділ
4. Древень</А><ВR>
<А href="#глав5">Розділ
5. Білий вершник</А>
<Н2><А
name="глав1">Розділ 1. Відплиття
Богомира</А></Н2>
Арагорн біг крутою тропою, вдивляючись у землю.
Хобіти ступають легко: Слідопит, і той, бувало,
збивався з їхнього сліду. Але біля вершини тропу
зволожив струмок, і нарешті знайшлися ледь помітні
вм'ятинки. . .
<!—Далі йде текст глави 1 —>
<Н2><А name="глав2">Розділ 2. Кіннотники Рістанії</А></Н2>
Сутеніло. Позаду, у лісистих підніжжях, дерева тонули
в тумані, і туман підповзав до світлих заводей
Андуїну, але в небесах було ясно...
<!—Далі йде текст глави 2 ->
<Н2><А name="глав3">Розділ 3. Урукхай </А></Н2>
Піна огорнув неясний і неспокійний сон: йому
здавалося, що він чує власний голосок десь у темних
підвалах і зве: "Фродо, Фродо!"...
<!—Далі йде текст інших глав —>
</BODY>
</HTML>
При клацанні по внутрішньому посиланню,
вказаному у змісті, документ прокручується до початку тієї чи іншої глави.
Зробимо кілька зауважень із приводу
оформлення посилань. По-перше, текст посилання не повинен бути довгим, щоб не
утруднювати вибір потрібного посилання при швидкому перегляді документа
користувачем. По-друге, текст посилання повинен відображати зміст об'єкта, на
який указує посилання. Не слід, наприклад, використовувати для посилань
малоінформативні фрази типу «Клацніть тут» чи «Клацни і побачиш».
Вставка зображення
Важко знайти в WWW сторінку, яка не мала б зображень. Вставка зображення
на Web-сторінку виконується одиночним тегом <IMG>. Усередині цього тегу обов'язково записується атрибут src, що вміщує URL зображення.
Назва цього атрибута походить від слова source - джерело.
Наприклад, ви хочете
розмістити на сторінці картинку з файла Lord.jpg. Для цього збережіть файл із зображенням у певній
папці (наприклад, у тій самій папці, що і HTML-документ), а у документ введіть тег
<IMG src="lord.jpg">
Повний
код документа може мати вигляд:
<HTML>
<HEAD>
<TITLE>"Володар перстнів"</ТІТLЕ>
</HEAD>
<BODY>
<Н2>Вставка
зображення</Н2>
<IMG
src="lord.jpg">
</BODY>
</HTML>
Якого розміру буде
зображення на Web-сторінці? За умовчанням
броузер використовуватиме реальні розміри зображення, яке зберігається в
графічному файлі. Якщо потрібно змінити ці розміри, застосовують атрибути width (ширина)
і height (висота)
у тегу <IMG>. Значення розмірів зображення задаються звичайно у
пікселах, наприклад, width="133"
height="33". Можна також задавати ширину і висоту у відсотках
розмірів зовнішнього елемента (сторінки). Наприклад, зображення, що задається
тегом
<IMG src="lord.jpg" width="30%">
займе
по ширині 30% сторінки, а висота буде розрахована броузером із зберіганням
пропорцій.
Звичайно користувач бажає скласти
уявлення про зміст сторінки, коли вона тільки почала завантажуватися. Тоді він
зможе прийняти рішення, чи варто чекати повного завантаження сторінки. У цьому
йому допоможуть написи на місці малюнків, що не завантажилися. Вони задаються
атрибутами alt. Наприклад,
така інструкція
<IMG src="photo.jpg" width="50%"
alt="Moя фотографія">
замість
малюнка, що не завантажився, виведе рамку із межами малюнка і помістить у неї
текст «Моя фотографія».
Графічні формати зображень для Web-сторінок
Основними форматами
малюнків, що відображаються програмами броузерів, є GIF (скорочення
від Graphics Interchange Format
- графічний формат обміну) і JPEG (скорочення
від Joint Photographic Experts
Group -
об'єднана група експертів фотографії).
Файли формату GIF (розширення
.gif) мають малий обсяг завдяки тому, що в них
використовується палітра з 256 кольорів і застосовується алгоритм стиснення без
утрат Лемпеля - Зіва - Велча. Цей алгоритм особливо ефективний при обробці
простих ілюстрацій з великими ділянками одного кольору. Формат GIF широко застосовується для створення «прозорих»
малюнків, а також зображень, що завантажуються черезрядковим методом. Приклади
черезрядкового завантаження ви напевно бачили при перегляді Web-сторінок в Інтернеті: спочатку завантажується простий
варіант малюнка з великим розміром точок зображення, потім у процесі
завантаження малюнка точки зображення зменшуються, і малюнок ніби виявляється.
Ще однією перевагою GIF-формату є можливість
використання анімації. У файлі GIF можна створити послідовність малюнків - кадрів
«мультфільму», що є найпростішим способом додавання анімації на Web-сторінки.
Інший графічний формат,
JPEG (розширення
jpg або jpeg), звичайно застосовується для зображень з більшою
кількістю кольорів, наприклад, для фотографій. У цьому форматі застосований
метод стиснення із утратами. При збереженні високоякісних зображень JPEG займає
на диску набагато менше місця, ніж GIF. Однак,
формат JPEG не
підтримує функції прозорості й анімації.
Існує ще один формат створення малюнків
для Web-сторінок, це - PNG (скорочення від Portable Network Graphics
- мережна графіка, що переноситься).
Подання зображень у виді PNG-файлів
застосовується як альтернатива формату GIF і є перспективним для застосування в мережних додатках. Перевагою цього
формату порівняно з форматом GIF є компактність файлів і достатня якість передачі
кольорів. На жаль, формат PNG підтримується поки
що не всіма броузерами.
Зображення-посилання
Гіперпосилання на Web-сторінках можна подавати не тільки як виділений
текст, а й у вигляді малюнка. Клацання мишею по такому малюнку призводить до
завантаження нового HTML-документа або переходу в
межах поточного документа.
Для створення
зображення-посилання встановіть у потрібному місці документа якірний тег <А> і вкладіть до нього елемент IMG. Наприклад, якщо у документі розмістити елемент
<А href ="http: //www. rambler. com">
<IMG
src="logo. jpg"
width="100"
height="28">
то
можна буде клацанням по малюнку з файла Logo.jpg завантажувати пошукову систему Рамблер.
Про компонування й обсяг Web-сторінок
Змістова частина Web-сторінки складається з текстових і графічних елементів.
Вона повинна займати щонайменше половину робочої ділянки вікна броузера.
Оптимальним співвідношенням є, коли під змістову частину виділяється приблизно
80% простору сторінки, а під елементи навігації (списки, меню, кнопки) - 20%.
Після створення
сторінки перегляньте, чи всі наявні на ній елементи потрібні. Спробуйте
видалити неважливі з погляду змісту елементи. Якщо дизайн сторінки при цьому не
постраждає, то без вилучених елементів узагалі можна обійтися. Пам'ятайте про
загальний принцип Web-дизайну - прагнути до
мінімального розміру HTML-файлів.
Кожен кілобайт обсягу сторінки - це зайві секунди завантаження. Розмір HTML-файлів не повинен перевищувати 20 - 3О Кбайт, а
оптимальним розміром файлів зображень є декілька кілобайтів. Якщо зображення
не вміщається у файл такого розміру, потрібно виконати обробку зображення, щоб
підсумковий обсяг у форматі GIF або JPEG не перевищував одного-двох десятків Кб.
Якщо обсяг сторінки
великий, намагайтесь забезпечити швидке початкове завантаження, при якому на
екрані найперше з'являться дані, що відображають зміст сторінки. Такі дані
найкраще розміщати у верхній частині сторінки.
У верхній частині сторінки має
розташовуватися зведена інформація з питань, яким присвячена дана сторінка.
Потрібно врахувати, що при швидкому знайомстві з матеріалом відвідувачі читають
тільки перші речення в кожному абзаці. Тому початок абзацу має адекватно
відбивати його наступний зміст.
Комментариев нет:
Отправить комментарий