HTML-документ, створений в попередній роботі, доповнити інформацією, поданою у вигляді списків. При потребі у формі списку може бути записана частина раніше створеного документу.

Порядок виконання роботи.

20.3.1 Зробити копію документа, створеного в попередній роботі, і відкрити її у текстовому редакторі.

20.3.2 Доповнити HTML-документ інформацією, яку можна подати у вигляді списків. Допускається замість використання кількох списків записати список, який містить кілька рівнів.

20.3.3 Виконати форматування доданого тексту з використанням тегів, які задають списки.

20.3.4 Зберегти файл і відкрити його програмою-броузером для перегляду та перевірки.

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

20.4.1 Списки в HTML-документах

Можна створювати списки різних видів: впорядкований (нумерований), невпорядкований (ненумерований), список визначень (тлумачень), список меню, список каталога. Список може мати заголовок, який задається текстом всередині тега-контейнера <LH> </LH>.

Впорядкований список розміщується всередині тега-контейнера <OL> </OL> (ordered list). Кожен елемент списку задається тегом <LI> (list item). Список і його елементи відображаються з нового рядка, тому теги задання нового абзацу в списках використовувати не потрібно. Елементи впорядкованого списку нумеруються. Стиль нумерації задається параметрами тега <OL> (див. таблицю 20.1). Списки можуть бути вкладеними один в одного. Списки візуально виділяються відступом зліва.

Для створення невпорядкованого списку використовується тег-контейнер <UL> </UL> (unordered list). З даним тегом також можна використовувати параметри COMPACT і TYPE, який може приймати значення disc, square та circle.

Таблиця 20.1 – Параметри тега <OL>

Параметр Призначення

COMPACT Надає списку більш компактний вигляд

TYPE A – нумерація великими латинськими буквами a – нумерація малими латинськими буквами I – нумерація великими римськими цифрами i – нумерація малими римськими цифрами 1 – нумерація числами n – встановлення початкового значення номерів поточного списку

START Задається номер елемента, з якого треба продовжити перерваний список

Формат списку визначень нагадує формат словника – термін та його визначення, записане в іншому рядку з відступом зліва. Список розміщується всередині тега-контейнера <DL> </DL> (definition list). Елемент списку – термін – записується після тега <DT>, а його визначення – після тега <DD>.

Список каталогу розміщують всередині тега-контейнера <DIR> </DIR>. Елементи такого списку записуються після тега <LI>.

Подібним чином записуються і елементи списків меню, які розміщуються всередині тега-контейнера <MENU> </MENU>. Найчастіше в списках меню використовуються елементи прив’язки, які зв’язують меню з іншими ресурсами документа або іншими документами Internet.

Хоча в мові HTML різним типам списків присвоєні імена, це не значить, що їх використання обмежене. В кожному конкретному випадку треба вибирати той вид списку, який найкраще подає інформацію. Треба також пам’ятати, що списки різних видів можна комбінувати.

Лабораторна робота №21

Створення HTML-документа, що містить таблиці

21.1 Мета роботи: Вивчити команди для формування таблиць в HTML-документі та оволодіти навичками їх практичного використання.

Завдання

Створити HTML-документ, який містить таблиці.

Порядок виконання роботи.

21.3.1 Відкрити текстовий редактор.

21.3.2 Записати шаблон HTML-документа.

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

21.3.4 Записати текстову частину (видається викладачем) в тілі документа. Текст повинен бути структурованим за змістом. Кожна завершена за змістом частина тексту повинна мати заголовок. Заголовки оформити відповідними тегами мови HTML.

21.3.5 Зробити розмітку текста на абзаци та форматування тексту.

21.3.6 Вставити в документ таблиці, застосувавши відповідні теги мови HTML.

21.3.7 Зберегти файл з розширенням .html і відкрити його програмою-броузером для перегляду та перевірки.

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

Створення таблиць

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

Таблиця розміщується всередині тега-контейнера <TABLE> </TABLE>. Вона формується рядок за рядком. Таблиця може мати назву-заголовок, який записується тегом-контейнером <CAPTION> </CAPTION>. Кожен рядок таблиці розміщується всередині тега-контейнера <TR> </TR> (table row). Окремі градки таблиці в рядку задаються тегами <TH> </TH> (table header) та <TD> </TD> (table data), в які поміщать відповідно заголовки (відображаються жирнішим шрифтом з вирівнюванням по центру) та вміст. Градка може бути порожньою <TD> </TD> або не містити нічого видимого <TD>   </TD>.

Рядки та стовпці таблиці можна об’єднувати, створюючи із суміжних градок більші градки. Для цього в тегах <TH> та <TD> використовуються параметри ROWSPAN і COLSPAN, для яких задається кількість суміжних градок для об’єднання.

Таблиця може мати рамку, товщина якої задається значенням параметра BORDER. Якщо це значення дорівнює нулю або даний параметр відсутній, то таблиця буде без обрамлення. Колір рамки задається параметром BORDERCOLOR, а колір фона градок таблиці – параметром BGCOLOR. З допомогою параметрів WIDTH та HEIGHT можна задати відповідно ширину та висоту таблиці як в пік селях, так і у відсотках від розміру вікна броузера. Цей параметр можна використовувати і для окремих градок таблиці. Параметри CELLPADDING та CELLSPACING із заданими для них числовими значеннями використовуються для розміщення в окремих градках та/або в усій таблиці додаткового вільного простору.

Вирівнювання елементів у таблиці по горизонталі та по вертикалі відповідно здійснюється заданням значень для параметрів ALIGN та VALIGN. Для тега <CAPTION> параметр ALIGN може мати значення TOP та BOTTOM (підпис таблиці над або під таблицею). Для тега <TR> параметр ALIGN може мати значення LEFT, RIGHT і CENTER, а параметр VALIGN – TOP, BOTTOM, MIDDLE та BASELINE. Для тегів <TH> і <TD> параметр ALIGN може мати значення LEFT, RIGHT і CENTER, а параметр VALIGN - TOP, BOTTOM і MIDDLE.

Також може задаватись вирівнювання по символу в тегах <TR>, <TH>, <TD> заданням значення параметра ALIGN=CHAR CHAR=”символ”. Вирівнювання по символу крапки (CHAR=”.”) зручно використовувати для таблиць з числовими даними.

Лабораторна робота №22

Використання графічних зображень в HTML-документі

22.1 Мета роботи: Отримати навички з підготовки графічних зображень для HTML-документів. Вивчити команди зв’язування графічних зображень з HTML-документом та оволодіти навичками їх практичного використання.

Порядок виконання роботи.

22.2.1 Відкрити текстовий редактор.

22.2.2 Записати шаблон HTML-документа.

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

22.2.4 Записати текстову частину (видається викладачем) в тілі документа. Текст повинен бути структурованим за змістом. Кожна завершена за змістом частина тексту повинна мати заголовок. Заголовки оформити відповідними тегами мови HTML.

22.2.5 Зробити розмітку текста на абзаци та форматування тексту.

22.2.6 Вставити в документ графічні зображення, застосувавши відповідні теги мови HTML.

22.2.7 Зберегти файл з розширенням .html і відкрити його програмою-броузером для перегляду та перевірки.

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

Графіка в HTML-документах

Графічні зображення, ілюстрації роблять текст значно інформативнішим. Крім того, вдале використання графіки робить сторінку привабливою, що збільшує аудиторію відвідувачів сторінки при її розміщенні в мережі Internet.

Для зберігання зображень на комп’ютерах використовуються різні методи кодування графічної інформації, що відображається в розширенні назви графічного файла – GIF, JPG, PNG, BMP і т.п. В HTML-документах найбільше використовуються формати GIF, JPG та PNG. Це пов’язано з тим, що вони досить ефективно стискають графічні дані без втрат або з мінімальними втратами якості та швидко декодуються. Невеликі розміри графічних файлів дуже важливі при публікації документів в мережі Internet. Швидкість передачі інформації каналами зв’язку обмежена, тому сторінки великого об’єму будуть довго вантажитись, що створюватиме незручності та дратуватиме користувача.

Помістити графічне зображення в документ дозволяє тег <IMG> з обов’язковим параметром SRC, який вказує адресу графічного файла. Адреса залежить від місця знаходження файла. Якщо файл знаходиться на віддаленому комп’ютері, її записують із зазначенням протоколу доступу (http або ftp) та URL (Uniform Resource Locator) – уніфікованого показчика ресурсу (<IMG SRC=”http://www.nung.edu.ua/images/logo.gif”>). Якщо файл знаходиться на локальному диску, використовується протокол file і вказується шлях до файлу (<IMG SRC=”file:///c:/pics/foto.jpg“>). Якщо файл знаходиться у тому ж каталозі, що й основний файл, то достатньо лише зазначити назву файла (<IMG SRC=”picture.png”>).

Крім параметра SRC рекомендується задавати для графічного зображення наступні параметри:

ALT – альтернативний текст – опис графічного зображення для користувачів, у яких графіка не відображається, або дає інформацію про рисунок в процесі його завантаження. Це особливо ефективно при використанні параметрів WIDTH та HEIGHT, які задають ширину та висоту зображення у пікселях. Слід зауважити, що вказування висоти та ширини зображення менших, ніж реальні значення, не зменшує час завантаження. Броузер завантажує все зображення, а потім вже масштабує його, що помістити в зарезервоване місце. Вказування розмірів рисунка важливе з двох причин:

- по-перше, інформація про зображення прискорює його завантаження. Броузер спочатку показує документ HTML, а потім зображення. Якщо розміри зображення вказані, то броузер покаже відформатований документ паралельно з завантаженням зображення;

- по-друге, якщо користувач відключив відображення графіки, а розміри рисунків не вказані, то замість зображень він побачить маленькі піктограми, а сторінка буде відформатована не так, як очікувалось.

ALIGN – задає місце розташування зображення на екрані (LEFT - зліва, RIGHT - справа). Якщо зображення знаходиться у рядку текста, то їх взаємне розміщення задається такими значеннями параметра ALIGN: TOP – текст вирівнюється по верху зображення, MIDDLE – по середині, BOTTOM – по низу зображення.

Параметр BORDER задає товщину рамки навколо зображення, а параметри HSPACE та VSPACE задають розміри вільного простору навколо зображення по горизонталі та вертикалі відповідно.

Предыдущая 1 2 3 4 5 6 7 89Следующая