Лабораторна робота № 2
Прийоми форматування тексту, прийоми створення списків, створення таблиць, створення опису фреймів.
Мета роботи: познайомитися з деякими елементами мови HTML, що можуть використовуватися для форматування тексту документа, навчитися створювати списки засобами мови HTML і визначати спосіб їхньої нумерації. Одержати первинні навички використання редактора FrontPage Express для створення WEB-документів
Стислі теоретичні відомості
Форматування тексту
Керування форматуванням тексту не є основною задачею мови НТМL, і тому текстові елементи, що виконують цю задачу, починаючи з версії НТМL-4.0 розглядаються як застарілі, і їхнє використання не рекомендується. Однак поки ще вони є найбільш зручним способом керування представленням документа на екрані комп'ютера.
Парний тег <FONT> дозволяє керувати параметрами шрифту. Він повинний обов'язково містити хоча б один із трьох атрибутів: COLOR=, FACE= або SIZE=.
<FONT SIZE=”6”>
Атрибут COLOR= задає колір тексту, що може бути заданий текстовим значенням (наприклад, COLOR=”GREEN”) або шістнадцятирічним кодом, у якому послідовні байти задають значення червоний, зелений і синій складовий кольори (COLOR="#ООFОО" дає той же результат, що і COLOR=”GREEN”). Атрибут FACE= задає гарнітурові шрифту. Значення цього атрибута порівнюється з іменами шрифтів, що встановлені на комп'ютері. Атрибут SIZE= визначає розмір шрифту у відносних одиницях (від 1 до 7). Для цього атрибута можна визначати значення зі знаком (плюс або мінус), що визначає збільшення або зменшення шрифту щодо поточного розміру.
Параметри шрифту, використовувані в документі по умовчуванню, задають за допомогою непарного тега <BASEFONT>, що розміщають один раз усередині елемента ВОDY. Він може використовувати ті ж атрибути, що і тег <FONT>.
Накреслення символів задається за допомогою парних тегів <В> (напівжирний шрифт), <I> (курсив), <U> (підкреслений текст) <S> (викреслений текст). Їхнє використання не рекомендується. Замість них варто застосовувати елементи фрази, що описують функціональні особливості тексту, наприклад замість
<В>Зверніть увагу!</В> краще написати
<STRONG> Зверніть увагу!</STRONG>
Так, парний тег <СIТЕ> призначений для відображення цитат (виводяться курсивом). Парні теги <ЕМ> (виділення) і <STRONG> (сильне виділення) є функціональними аналогами курсивного і напівжирного накреслень. Крім того, мова НТМL містить набір елементів для опису роботи комп'ютерних програм. Для цієї мети використовують парні теги <CODE> (вихідний текст програми), <КВD> (текст, що вводиться з клавіатури), <SAMP> (приклад висновку програми) і <VAR> (програмні змінні). Для висновку відповідних елементів використовується моноширинний шрифт. Крім того, змінні виводяться курсивом, а клавіатурне введення (у деяких броузерах) — напівжирним шрифтом.
Списки
Мова НТМL підтримує п'ять видів списків, з яких два (списки меню і списки каталогів) вважаються застарілими і не рекомендуються до застосування. три типи, що залишилися — це упорядковані списки, неупорядковані списки і списки визначень. Усі списки являють собою блокові елементи.
Упорядковані (нумеровані) і неупорядковані (маркіровані) списки, приклади яких приведені на мал.5, оформляються однаково. Вони створюються за допомогою парних тегів: <OL> для упорядкованого списку і <UL> для неупорядкованого. Ці списки можуть містити лише елементи списку, обумовлені парним тегом <LI>. Закриваючий тег </LI> можна опускати, тому що його місцезнаходження легко відновити. Відкриваючі теги можуть містити атрибути, що визначають вид маркера (для неупорядкованого списку), спосіб і послідовність нумерації (для упорядкованого). Дозволяється вкладення списків друг у друга.
Рис.5. Створення маркірованих і нумерованих списків
Список визначень задається парним тегом <DL>. Він містить елементи двох типів: обумовлені терміни (парний тег <DT>) і визначення (парний тег <DD>). Закриваючі теги </DT> і </DD> можна опускати. Звичайно обумовлені терміни і визначення чергують, хоча це ніде не обговорено. Визначення відображаються на екрані з відступом від лівого краю. Такий список може бути сформований у такий спосіб:
<DL>
<DT>Поршень
<DD>Суцільний циліндр або диск, що щільно входить усередину порожнього циліндра
</DL>
Таблиці
Таблиці зручні для представлення великих обсягів даних, а деякі Wеb-дизайнери використовують їх також для точного розміщення елементів Web-сторінок (мал.6). Таблиця в мові НТМL задається за допомогою парного тега <ТАВLЕ>. Вона може містити заголовок таблиці, обумовлений парним тегом <САРТІОN>, і рядка таблиці, що задаються за допомогою парних тегів <ТR>. Закриваючі тегі </ТR> можна опускати.
Кожен рядок таблиці містить комірки таблиці, що можуть відноситися до двох різних типів. Комірку в заголовках стовпців і рядків задають парним тегом <ТН>, а звичайні комірки — парним тегом <ТD>. Закриваючі теги </ТН> і </ТD> можна опускати. Наприклад, «порожня» таблиця з двома рядками і двома стовпцями може бути задана в такий спосіб:
<ТАВLЕ>
<САРТІОN>Порожня таблиця</САРТІОN>
<ТR> <TD> </TD>
<TR> <TD> </TD>
</ТАВLЕ>
Кожна комірка може містити довільний текст, а також будь-які теги НТМL, припустимі в «тілі» документа. Зокрема, комірка таблиці може містити вкладену таблицю або зображення.
При відображенні таблиці на екрані комп'ютера відбувається її автоматичне форматування з підбором розмірів комірок відповідно до обсягу розташовуваної інформації і заданих атрибутів. Атрибути елементів дозволяють як завгодно вигадливо оформити таблицю на свій смак. У таблиці 1 приведене коротке зведення припустимих атрибутів.
Таблиця 1. Атрибути елементів, використовуваних при створенні таблиці
|
||
Атрибут |
Елемент |
Призначення |
ALIGN= |
Таблиця, заголовок, рядок, комірка |
Вирівнювання таблиці по горизонталі; вирівнювання даних по горизонталі; розміщення заголовка над або під таблицею |
VALIGN= |
Рядок, комірка |
Вирівнювання по вертикалі |
WIDTH= |
Таблиця, комірка |
Ширина |
HEIGNT= |
Комірка |
Висота |
COLSPAN= |
Комірка |
Довжина в кілька стовпців |
ROWSPAN-В\Л/5РАМ= |
Комірка |
Довжина в кілька рядків |
BGCOLOR= |
Таблиця, комірка |
Колір фону |
CELLSPACING-ЗРАС^З= |
Таблиця |
Зазор між комірками |
CELLPADDING= |
Таблиця |
Зазор між вмістом комірки і її границею |
BORDER= |
Таблиця |
Відображення границь комірок і зовнішньої рамки таблиці |
Відображення декількох документів
Мова НТМL дозволяє в рамках однієї WEB-сторінки відобразити кілька документів. Для цього сторінка повинна бути розбита на кілька областей — фреймів. Розбивка сторінки описується документом НТМL особливого роду, структура якого відрізняється від звичайної. Тіло документа заміняється описом фреймів, що задається парним тегом <FRAMESET>. Елемент BODY у такому документі відсутній, а при наявності — ігнорується броузером. Відкриваючий тег < FRAMESET> повинен містити обов'язковий атрибут COLS= або ROWS=, що визначає спосіб розбивки вікна. У першому випадку вікно розбивається вертикальними лініями, у другому — горизонтальними. Якщо задані обидва атрибути, створюється сітка фреймів. Значення кожного з цих атрибутів — це перераховані через кому розміри окремих фреймів.
< FRAMESET COLS="60%, 40%">
Значення можуть бути задані в пікселах або у відсотках від ширини вікна. Остання область може бути визначена за допомогою символу «*», що означає, що їй виділяється весь простір, що залишився.
<FRAMESET ROWS=”40%,40%,*”>.
Між тегами < FRAMESET> і </ FRAMESET> повинно розташовуватися рівно стільки елементів, скільки областей створено за допомогою атрибутів COLS= і ROWS=. При цьому можуть використовуватися додаткові елементи FRAMESET, що описують подальшу розбивку на підобласті ще меншого розміру, або непарні теги <FRAME>, що визначають спосіб використання області.
Тег <FRAME> повинен містити обов'язковий атрибут SRS=, за допомогою якого вказується, який документ спочатку завантажується у відповідну область. Значення цього атрибута — абсолютна або відносна адреса URL потрібного документа.
Серед інших атрибутів виділяється атрибут NAME=, що дозволяє задати «ім'я» створеної області у виді послідовності латинських літер і цифр, використаної як значення цього атрибута.
<FRAME SRC=”text.htm” NAME=”left”>
Це ім'я можна використовувати, щоб завантажувати нові документи в раніше створену область. Для цього в тег <А>, що визначає гіперпосилання, необхідно додати атрибут TARGET=, значення якого збігається з раніше визначеним ім'ям області. При переході по даному гіперпосиланню новий документ завантажиться в зазначений фрейм.
Наприклад, припустимо, що початкова сторінка Web-вузла складається з двох фреймів: ліворуч розташовується навігаційна панель, а праворуч — поточна сторінка. Якщо правої області привласнене ім'я, використовуване у всіх посиланнях, що маються в лівій області, то клацання на будь-якому посиланні навігаційної панелі приведе до відновлення інформації в сусідній області, залишаючи навігаційну панель без змін.
Робота в редакторі Frontpage Express
Починаючи роботу в редакторі Frontpage Express, варто усвідомлювати, що в результаті його застосування виходить документ HTML, побудований по тим же правилам, що і створюваний вручну. Цей факт відразу ж визначає можливості й обмеження в роботі цього редактора.
• Усі функції редактора Frontpage Express однозначно реалізуються тегами HTML.
• Редактор Frontpage Express не має засобів, які не можна було б представити у виді тегів HTML.
• Користувач звичайно не знає, які саме засоби HTML використовуються для досягнення заданого ефекту і наскільки коректно вони застосовуються.
Редактор Frontpage Express «орієнтований» на застосування оглядача Internet Explorer, так що створюваний їм код HTML найбільше адекватно відображається саме в цьому броузері. Зокрема, Frontpage Express дозволяє використовувати «рядок, щобіжить», засіб, що не входить у стандарт HTML, але підтримується Internet Explorer. З числа стандартних засобів HTML редактор Frontpage Express не підтримує фрейми (точніше кажучи, створення документів опису фреймів).