Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Практична робота № 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 не підтримує фрейми (точніше кажучи, створення документів опису фреймів).
Створення і редагування документа
Вікно програми Frontpage Express (мал.8) являє собою комбінацію вікна редактора і вікна броузера. Документ HTML відображається редактором, як специфічним броузером, що відображає навіть звичайно невидимі елементи (такі як якоря). У той же час, цей текст можна редагувати засобами, аналогічними наявним в текстовому процесорі.
Як основний засіб форматування використовується Панель інструментів форматування. Вона містить:
Створене гіперпосилання відображається у вікні програми Frontpage Express так само, як і у вікні броузера: синім кольором і з підкресленням. Щоб перевірити працездатність посилання, варто клацнути на ній правою кнопкою миші і вибрати в контекстному меню команду Перейти по посиланню.
Таблиці і форми неможливо створити лише форматуванням. Щоб створити таблицю, використовують команду Таблиця > Уставити таблицю. У діалоговому вікні, що відкрилося, указують розмір таблиці (в комірках), а також додаткові параметри, реалізовані як атрибути відповідних тегів. Щоб занести інформацію в таблицю, варто установити курсор у потрібну комірку і почати введення. При роботі з комірками таблиці можна застосовувати будь-які команди форматування.
Спеціальної команди створення форми редактор Frontpage Express не має. Однак при додаванні поля форми (через меню Вставка > Поле форми) створюється і форма, що включає це поле. При додаванні наступних полів варто стежити за тим, щоб вони включалися в ту ж саму форму.
У мові HTML властивості елемента задаються атрибутами тега. Редактор Frontpage Express забезпечує їхнє завдання за допомогою спеціальних діалогових вікон. Щоб відкрити таке діалогове вікно, варто клацнути на елементі, що редагується, правою кнопкою миші. У нижній частині контекстного меню розташовуються команди, що відносяться до елементів документа, розглянутим редактором як відкриті. Порядок проходження команд відповідає порядкові вкладення елементів. Вибір однієї з цих команд приводить до відкриття діалогового вікна властивостей відповідного елемента. Елементи керування в цьому діалоговому вікні відповідають атрибутам відкриваючого тега для обраного елемента.
Додаткові об'єкти вставляються в документ, що редагується, за допомогою меню Вставка. Наприклад, для вставки зображення використовується команда Вставка > Зображення. Якщо в діалоговому вікні Зображення клацнути на кнопці Огляд, можна вибрати файл із зображенням. У ході створення документа різні графічні формати автоматично перетворяться у формати GIF і JPEG. Збереження перетвореного файлу здійснюється при збереженні документа.
Інші елементи, які можна розмістити на сторінці, — це:
• горизонтальна лінійка (Вставка ^ Горизонтальна лінія);
• відеозапис (Вставка > Відеозапис);
• фоновий звуковий супровід (Вставка > Фоновий звук);
• «рядок, що біжить,» (Вставка > рядок, Що Біжить, цей елемент відтворюється тільки оглядачем Internet Explorer).
Обмеженість можливостей редагування за допомогою Frontpage Express іноді приводить до необхідності втручання безпосередньо в створюваний код HTML. Це можна здійснити двома способами. По-перше, можна дати команду Вставка > Розмітка HTML У цьому випадку відкривається діалогове вікно Розмітка HTML у якому можна вводити довільний текст із розміткою. Редактор Frontpage Express маркірує його особливим способом і відображає у виді невеликого значка. Щоб побачити результат застосування цієї розмітки, треба відкрити документ за допомогою броузера.
Другий спосіб полягає у відкритті вікна перегляду коду, що генерується за допомогою команди Вид > HTML При цьому відкривається діалогове вікно Перегляд або виправлення HTML, у якому відображається код HTML, згенерований програмою Frontpage Express (мал.9). Кольорове маркірування дозволяє негайно побачити ключові слова тегів (зображені фіолетовим кольором), атрибути (червоним) і значення атрибутів (синім). Цей код можна редагувати вручну, однак після клацання на кнопці ОК редактор проаналізує внесені зміни і відкоригує отриманий документ відповідно до власного внутрішнього стандарту.
ПАНЕЛЬ ІНСТРУМ.ФОРМАТУВАННЯ
ПАНЕЛЬ ІНСТР. СТАНДАРТ РОБОЧА ОБЛ.
РЯДОК МЕНЮ
Рис. 8. Вікно Web-редактора FrontPage Express
ПОРЯДОК ВИКОНАННЯ ЛАБОРАТОРНОЇ РОБОТИ
Уведіть теги: <Р> <FONT SIZE="-2" FACE="ARIAL" COLOR="GREEN">.
7. У наступному абзаці використовуйте за своїм розсудом парні теги: <ЇМ> (виділення), <STRONG> (сильне виділення), <CODE> (текст програми), <KBD> (клавіатурне введення), <SAMP> (приклад висновку), <VAR> (комп'ютерна змінна).
Запустіть оглядач Internet Explorer (Пуск > Программы > Internet Explorer).
10. Поверніться в програму Блокнот і встановіть текстовий курсор після закінчення введеного списку.
Уведіть тег <TABLEBORDER="1 0" WIDTH="100%">.
Уведіть рядок: <CAPTION ALIGN="ТОР">Список телефонів</САРТІОN>.
6. Визначіть наступні рядки таблиці, випереджаючи кожну з них тегом <TR> і поміщаючи вміст кожного осередку після тега <TD>.
7. Останній рядок таблиці задайте в такий спосіб:
<TR><TD ALIGN="CENTER" COLSPAN="2">Ha першому поверсі будинку мається безкоштовний телефон-автомат.
Дайте команду Файл > Открыть. Клацніть на кнопці Обзор і відкрийте файл tаble.htm.
Вивчіть, як створена таблиця відображається в програмі Internet Explorer, звертаючи особлива увага на вплив заданих атрибутів.
Змініть ширину вікна оглядача й встановіть, як при цьому змінюється зовнішній вигляд таблиці.
Створення опису фреймів
Уведіть наступний документ:
<HTML>
<HEAD>
<TITLE>Опис фреймів</ТІТLЕ>
</HEAD>
<FRAMESET ROWS="60%,*">
<FRAME SRC="table.htm">
<FRAMESETCOLS="35%,65%"NORESIZE>
<FRAMESRC="first.htm">
<FRAMESRC="links.htm">
</FRAMESET>
</HTML>
Запустіть оглядач Internet Explorer (Пуск > Программы > Internet Explorer).
9. Клацніть на посиланні, що мається в одному з фреймів, і подивіться, як буде відображений новий документ.
ЗМІСТ ЗВІТУ
Звіт повинен містити:
СПИСОК ЛІТЕРАТУРИ