- •Тема 2 Структура й елементи гіпертекстових документів
- •Загальна характеристика і структура html-документа
- •2.Тіло документа та оформлення його основних фрагментів
- •2.1. Тіло документа
- •2.2. Теги логічного форматування тексту
- •2.3. Теги фізичного форматування тексту
- •3. Оформлення списків термінів і визначень
- •3.1. Марковані списки
- •3.2. Створення нумерованих списків
- •3.3. Списки визначень
- •3.4. Багаторівневі спискові структури
- •4. Використання графіки при оформленні електронного видання
- •5.Включення до видання посилань та коментарів
- •6. Оформлення таблиць
- •7.Фреймова структура електронного видання
- •8. Html-форми
- •9. Поняття про динамічний html і його компоненти
3.3. Списки визначень
У науково-технічних і навчальних виданнях нерідко використовують списки або словники визначень, які в зарубіжних книгах називають глосаріями. Кожен елемент такого списку починається з певного терміну, після якого подане його визначення. Для створення списку визначень служить тег-контейнер <DL> (Definition List), усередині якого тег <ВІД> (Definition Term) задає кожний термін у формі єдиного рядка, а тег <00> (Definition Description) передує абзацу з визначенням цього терміна. Для прикладу наведемо фрагмент списку визначень для комп'ютерної графіки.
<html> <head> <title> Cписок термінів і визначень </ title> </ head>
<body bgcolor=#d5d5d5> <DL> <ВІД> Пікселів
<DD> Найменший елемент зображення, який характеризується сталістю параметрів по всій своїй поверхні <DT> Монітор
<DD> Монітор визначається кількістю пікселів на одиницю довжини і становить близько 96 пікселів на дюйм <ВІД> Лініатура растра
<DD> Частота розміщення растрових точок у площині зображення, вимірюється числом ліній на дюйм </ DL> </ body> </ html>
Як випливає із запису вихідного HTML-документа ніяких спроб вирівнювання тексту та формування відступів не проводилося. Самі теги <DT> і <DD> так форматують текст, що забезпечують оптимальне його сприйняття користувачем. Фон документа задається певним рівнем сірого відповідно до значення параметра BGCOLOR в тегові <BODY>.
3.4. Багаторівневі спискові структури
Багаторівневі списки в HTML-документах можуть створюватися шляхом вкладення одного типу списку всередину іншого. Наприклад, фрагменти нумерованого списку можуть бути вкладені всередину маркованого або навпаки. Сказане ілюструється простим прикладом, в якому перераховуються супутники деяких планет нашої сонячної системи.
<HTML> <HEAD> <TITLE> Приклад дворівневого списку </ TITLE> </ HEAD
<BODY> <OL> <B> Супутники планет </ В>
<BR> ....
<LIбл/> ЗЕМЛЯ
<OL> <LI> Місяць </ OL>
<LI> MAPC
<OL> <LI> Фобос
<LI> Деймос </ OL>
<BR> ....
</ UL> </ BODY> </ HTML>
Усередині тега-контейнера маркованого списку <UL> розміщені два контейнери нумерованого списку <О1_> та </ О1_> зі своїми тегами <LI> кожен. Додатковий відступ зліва забезпечує хорошу читаність тексту. За цією схемою можна створювати і багаторівневі списки.
4. Використання графіки при оформленні електронного видання
Відомо, що за допомогою графіки можна точніше передати ідеї і призначення будь-якого видання, у тому числі й електронного. Без ілюстрації шпальти набору виглядають одноманітними, а добре підібрана і вміло розміщена графіка робить видання набагато більш привабливим. Обмеження у використанні графіки з позицій естетики пов'язане з небезпекою перевантаження документа зображеннями, у тому числі і фоновими, та нав'язливою анімацією, часто не пов'язаної безпосередньо з тематикою видання.
З технічної точки зору зображення вимагають значно більшого обсягу інформації, ніж простий текст, тому може виникнути інформаційне перевантаження, особливо при використанні мережевих технологій з каналами недостатньої пропускної спроможності. Відомо, що багато користувачів мережі Інтернет відключають завантаження графічних файлів, щоб швидше завантажити документ і ознайомитися з ним. Дещо поліпшило становище застосування компактних форматів графічних файлів, таких як JPEG (з частковою втратою інформації), GIF і PNG.
Ми вже стикалися з використанням зображення як фонового при знайомстві з міткою <BODY>. Для цього у параметрі BACKGROUND вказувався URI-файл, що зберігає зображення. Якщо в електронних виданнях, які розповсюджуються на носіях, можна використовувати практично будь-які графічні файли, то для мережевих видань переважно використовуються GIF-файли, рідше файли у форматі JPEG.
Основним засобом вбудовування зображень в текст служить тег <IMG>, обов'язковим параметром якого є SRC, значення якого - адреса (URL) файлу зображення. Параметр вирівнювання зображення на смузі ALIGN може набувати вісім різних значень, що визначають різні способи його розміщення на сторінці, два параметри дозволяють встановити розмір зображення, ще два - відстань від кордону зображення до тексту, окремий параметр дозволяє створити навколо зображення рамку, а ще один - поставити альтернативний текст, який буде виведений замість зображення при відмові користувача від його завантаження. Розглянемо послідовно ці параметри.
Вирівнювання зображення здійснюється двома принципово різними способами:
• по лівому або правому краю шпальти;
• зображення вбудовується як елемент одного з рядків тексту (друкованого аналогу такого способу вирівнювання немає, більше того, в друкованому виданні таке розташування малюнка абсолютно неприпустимо).
Для вирівнювання зображення по лівому або правому краю вікна браузера параметру ALIGN присвоюються значення LEFT або RIGHT відповідно, а текст обтікає малюнок з протилежного боку. Для звдання розмірів зображення використовуються параметри WIDTH (ширина) і HEIGHT (висота), причому значення кожного параметра можуть задаватися як в абсолютних одиницях - пікселях, так і у відносних - відсотках від відповідного розміру вікна браузера. Реальні розміри зображення можуть не збігатися зі значеннями параметрів WIDTH і HEIGHT. У цьому випадку браузер автоматично масштабує зображення по окремих координатах.
Графічні зображення можуть задаватися в двох основних форматах: векторному і растровому. Відповідно до першого форматом створюються файли порівняно малого інформаційного обсягу, легко масштабовані, проте в них не може бути досягнуто висока художня якість. Крім того, перетворення опису зображення, що міститься у файлі, на реальний малюнок вимагає значних обчислювальних ресурсів.
Растровий формат масштабується з перекручуваннями, файли в ньому мають великий інформаційний обсяг, але він забезпечує досить високу якість зображення. Крім того, сама підготовка комп'ютерних графічних файлів пов'язана з оцифруванням (перетворенням в цифровий формат) реальних зображень, наприклад, малюнків і фотографій. Для цього використовуються так звані сканери, які перетворюють зображення в один з растрових форматів, частіше TIFF.
З растровими ж форматами працюють цифрові фото-та відеокамери, які все ширше використовуються в сучасних видавничих технологіях для прямого перетворення зображення в його цифровий еквівалент.
Тому масштабування виправдано тільки для векторної графіки, для растрової ж слід визначити реальні розміри зображення по горизонталі й вертикалі в пікселях і задати ці розміри в параметрах WIDTH і HEIGHT. При цьому:
• зображення буде виведено в реальних розмірах і без спотворень;
• при мережевому розповсюдженні документа користувач одразу буде знати розміри зображення, а в іншу частину документа буде без зволікання завантажуватися текст.
Зупинимося коротко на інших способах вирівнювання зображення в електронному виданні. Відповідні значення параметра ALIGN такі: ТОР, ТЕХТТОР, BOTTOM, BASELINE, ABSBOTTOM, MIDDLE, ABSMIDDLE. Значення TOP вирівнює верхню межу зображення за найвищим елементу поточного рядка, а ТЕХТТОР - за найвищим текстового елементу. Сенс відмінності в тому, що елементом рядка може бути й інше зображення. Значення BASELINE і BOTTOM діють однаково і вирівнюють нижню межу зображення по базовій лінії поточного рядка, тобто лінії, на якій «стоять» шрифтові елементи (нижні виносні елементи символів знаходяться під базовою лінією), a ABSBOTTOM - вирівнює нижню межу зображення по нижній межі поточного рядка, включаючи всі елементи рядка, у тому числі й графічні, якщо вони є. Нарешті, значення MIDDLE і ABSMIDDLE вирівнюють середину зображення по базовій лінії або посередині поточного рядка відповідно. Застосування параметрів вирівнювання цієї групи в більшості випадків знижує якість оформлення сторінки, суперечить основним принципам дизайну шпальт.
Щоб виділити зображення в текстовому документі, корисно передбачити незайнятий текстом простір навколо нього. Це можна здійснити за допомогою параметрів HSPACE і VSPACE, які визначають відступи (світлий простір) по горизонталі й вертикалі в пікселях. Для виділення зображення на сторінці можна укласти його в рамку, товщина якої в пікселях задається за допомогою параметра BORDER. Нарешті, для користувачів, що працюють у режимі відключення завантаження графіки, можливість виведення альтернативного тексту дає параметр ALT. У разі ж завантаження зображення при виводі на нього курсор миші з'являється текст підказки у спливаючому вікні. Нижче наводяться приклад тегу <IMG> з різними параметрами:
<HTML> <HEAD> <TITLE> Приклад вставки зображення в документ </ TITLE> </ HEAD>
<BODYXIM6 SRC=globus.jpg ALIGN=LEFT WIDTH=40% HEI6HT=40% HSPACE=8 VSPACE=10 BORDER=5 А1/Г='Рельеф земної поверхності'>
<Р ALIGN = 'Justify'> В даному документі малюнок вирівнюється вліво, тобто він повинен розміщуватися в лівому верхньому кутку. Розміри малюнка 60 на 60 пікселів. Малюнок оточений рамкою шириною в 5 пікселів і відділений від тексту полями по 10 пікселів з кожного боку. Текст розміщується праворуч від малюнка і, надалі, нижче його. </ Р> </ BODY> </ HTML>
Наведений вище HTML-документ відображався в браузері MS Internet Explorer. На малюнку видно напис «Рельєф земної поверхні», задане у вигляді значення параметра ALT і виникає на екрані при підведенні курсора миші до зображення.
На закінчення відзначимо, що фірма Netscape у своєму веб передбачила можливість використання ще одного параметра в тегові <1мс>, а саме LOWSRC. Як значення цього параметра вказується графічний файл з альтернативним зображенням того ж самого об'єкта, але з набагато більш низьким розділенням і глибиною кольору. У результаті альтернативне зображення має на порядок менший інформаційний обсяг і швидко завантажується на Web-сторінку, а тільки пізніше завантажується основне зображення. Приклад запису тегу з цим параметром:
<IMG SRC=globus.gif LOWSRC=low-globus.gif>
Слід зауважити, що розміри цих двох зображень повинні збігатися. Якщо параметр LOWSRC задає зображення менших розмірів, то основне зображення буде також трансформуватися до цих менших розмірів. Щоб уникнути спотворень, що виникають внаслідок цього, слід у тегу <IMG> вказати дійсні розміри основного зображення у пікселях щоб при першому проході і завантаженні допоміжного зображення розміри останнього наводилися до розмірів основного, а не навпаки.