Распечатать страницу

Главная \ База готовых работ \ Готовые работы по компьютерным дисциплинам \ WEB-программирование \ 714. Лабораторна робота №2, Мова Hyper Text Markup Language (HTML) і його використання для структурованого подання інформації

Лабораторна робота №2, Мова Hyper Text Markup Language (HTML) і його використання для структурованого подання інформації

« Назад

Купить работу

ПРО РОБОТУ

Код роботи: 714

Вид роботи: Лабораторна робота

Предмет: Web-програмування

Тема: №2, Мова Hyper Text Markup Language (HTML) і його використання для структурованого подання інформації

Кількість сторінок: 1

Дата виконання: 2015

Мова написання: українська

Ціна: 150 грн

Купить работу

Ціль роботи: навчитися використовувати мову розмітки гіпертексту html для структурованого подання різних видів текстової і графічної інформації.

Завдання 1. Ознайомитися з теоретичними матеріалами про призначення гіпертексту, областях його застосування і засобах подання гіпертекстової інформації.

Завдання 2. Вивчити синтаксис мови html, елементи, використовувані в цій мові для розмітки тексту, і їхні параметри (текст, виділений синім кольором). Для отримання додаткової інформації рекомендується використовувати інформаційні ресурси Інтерент.

Завдання 3. Виконати навчальні вправи 1-16 (при необхідності) і практичні завдання, результати зберегти.

Завдання 4. Оформити звіт про виконання лабораторної роботи у виді документа MS WORD.

Завдання 5. Відповісти на контрольні питання, відповіді включити в звіт по лабораторній роботі.

Теоретична довідка

Гіпертекст

Інструкції HTML, у першу чергу, призначені для керування процесом виведення вмісту документа на екрані програми - клієнта і визначають цим самим спосіб подання документа, але не його структуру. HTML припускає, що документ складається зі стандартних елементів розмітки, що відображаються стандартним образом. Набір цих елементів – це типізація компонентів звичайного документа: заголовок, автори, параграфи, таблиці, цитування і т.д. Як елемент гіпертекстової БД, описуваної HTML, використовується текстовий файл, що може легко передаватися по мережі з використанням протоколу HTTP. Ця особливість, а також те, що HTML є відкритим стандартом і величезна кількість користувачів має можливість застосовувати можливості цієї мови для оформлення своїх документів, безумовно,вплинули на ріст популярності HTML і зробили його сьогодні основним механізмом подання інформації в Інтернет.

Документ, написаний на HTML, являє собою текстовий файл, що містить власне текст, що несе інформацію, і теги розмітки (markup tags). Теги являють собою визначені стандартом HTML послідовності символів, що знаходяться між знаками <і>. відповідно до тегів розмітки програма розташовує текст на екрані, включає в нього рисунки, що зберігаються в окремих графічних файлах, і формує гіперзв’язки з іншими документами чи ресурсами Інтернет. Файл мовою HTML приймає «гіпертекстовий вигляд» тільки тоді, коли він інтерпретується програмою перегляду – браузером.

Синтаксис html

Існує 2 види тегів: парні і непарні. Дія будь-якого парного тега починається з того місця, де зустрівся відкриваючий тег і закінчується після відповідного закриваючого тега (ознакою якого є символ /,що йде відразу після < ) чи кінця файлу. Наприклад, текст, що йде за тегом курсиву <І>, виводиться на екран курсивом до його закриваючого парного тега </І>.

Непарний тег викликає «одиничну» дію в тому місці, де він зустрічається. Наприклад, тег <BR> служить для переходу на новий рядок при виведенні тексту.

Багато тегів можуть включати додаткові параметри, що модифікують ефект даного тега, наприклад<P ALIGN =CENTER> - тег початку параграфа, який вирівнюється по центру вікна.

Структура HTML документа

Документ починається з тега <HTML>, що повідомляє програмі перегляду, що даний файл – це документ мовою HTML. Закінчується документ тегом </HTML>, що є закриваючим тегом, парним тегу <HTML>.

Заголовок документа виділяється тегами <HEAD> і </HEAD>. Кожен HTML документ повинний мати рядок заголовка, який визначається в такий спосіб:

<TITLE> Ім’я заголовка </ TITLE >.

Цей рядок ідентифікує документ і відображається навігатором не тільки в заголовку головного вікна, але й в інших місцях, наприклад, у списку відвідуваних сторінок.

Тіло документа знаходиться між тегами <BODY > і </ BODY > і відображається у внутрішній області вікна. Тіло документа може містити один чи кілька рядків. Найпростіший HTML – документ має вид:

< HTML >

< HEAD >

< TITLE > Найпростіший HTML документ </ TITLE >

</ HEAD >

< BODY > Ласкаво просимо! </ BODY >

</ HTML >

Далі між тегами < HEAD > і </ HEAD > - знаходиться головна частина документа, усередині якої, між тегами < TITLE > і </ TITLE >, знаходиться назва документа. Назва виводиться не разом із самим документом, а в заголовку вікна програми перегляду (title bar), а також використовується і для інших цілей.

Потім – між тегами < BODY > і </ BODY > - міститься основна частина документа, так назване тіло.

Заголовки усередині документа

У мові HTML можливе використання заголовків шести рівнів. Заголовок першого рівня вважається самим головним і використовується як перший заголовок документа. Заголовки можуть виділятися кольором і/чи жирним шрифтом. Приклад:

<Нх > Текст заголовка </Н1 > розташовується заголовок (heading), що програма перегляду виводить великим і/чи жирним шрифтом.

Вирівнювання параграфів тексту

Для розбивки документів на параграфи в HTML – документах використовуються спеціальні теги <Р > і </Р >. Без них текст стає одним великим параграфом. Помітимо, що закриваючий тег може бути опущений, тому що браузер розуміє, що коли відкривається новий <Р >, то це означає кінець попереднього параграфа.

У стандарті HTML версії 3.2. визначений параметр ALIGN, за допомогою якого можна задати вирівнювання параграфа по горизонталі. Даний параметр може приймати наступні значення: LEFT, RIGHT, CENTER. Однак для вирівнювання по центрі можна скористатися також спеціальним тегом <CENTER>. Нижче приведений фрагмент програми, що використовує даних тегів:

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

ОРГАНІЗАЦІЯ СПИСКУ

Списки зустрічаються в документах дуже часто. Звичайно списку бувають нумерованими і ненумерованими (неупорядкованими). В останньому випадку кожен елемент списку виділяється яким – небудь символом, звичайно – жирною крапкою.

Теги <UL > і </ UL > позначають початок і кінець так званого нумерованого списку, кожному елементу якого передує тег <LI > (list item). Кожен елемент списку програма перегляду виводить з нового рядка і позначає символом.

Неупорядковані списки

Для створення неупорядкованого списку призначений тег < UL>, що використовується в парі з </ UL >, що закриває список. Кожен рядок списку позначається тегом < LI >. Для даного тега можна додати параметр TYPE, що визначає, зовнішній вигляд символу, що використовується для виділення рядка в списку, і може мати наступні значення.

Значення параметра TYPE

Нижче розглянемо приклад неупорядкованого списку, використовуючи всі значення параметра TYPE.

Нумеровані списки

Для створення нумерованих списків призначений тег <OL >, який необхідно використовувати разом з тегом </ OL >. Нумерований список створюється аналогічно неупорядкованому списку. Кожен рядок у списку повинний бути відзначений тегом < LI >.

У тегу < OL > можна вказувати перераховані нижче параметри

Якщо розмістити в документі HTML список визначень яких-небудь термінів, то можна скористатися для цього тегами:

<DL>, </DL> - відзначають відповідно початок і кінець списку визначень;
<DT> - відзначається рядок, що містить обумовлений термін;
<DD> - визначення терміна.
Наступний фрагмент програми ілюструє список визначень:

РОЗМІЩЕННЯ ГРАФІЧНИХ ЗОБРАЖЕНЬ

Для розміщення зображення в документі треба панятами, що в HTML використовується тільки два графічних формати. Перший формат – це формат обміну графікою GIF (Graphics Interchange Format), другий – JPEG.

Для того, щоб помістити зображення усередині тексту, треба скористатися тегом <IMG >.

Параметри тега IMG

Тег < IMG SRG = “face. gif” ALT = “Face” > (image source) включає в документ зображення, що зберігається у файлі face. gif. Атрибут ALT = “Face” задає так називаний альтернативний текст (у даному випадку, Face), що неграфічні програми перегляду виводять на екран замість відповідного малюнка. Цей ж текст буде видний, якщо в графічній програмі перегляду відключити автоматичне завантаження зображень.

ВИКОРСИТАННЯ ПОСИЛАНЬ У ГІПЕРТЕКСТОВИХ ДОКУМЕНТАХ

Основна особливість мови HTML полягає в можливості зв’язку окремих частин тексту й ілюстрацій з іншими документами. Гіпертекстові посилання виділяються в тексті документа спеціальним кольором (і/чи підкресленням), і, активізувавши їхньою мишею, без праці можна переміститися по чи документах частинам одного документа.

Посилання створюється за допомогою тега <А >, що використовується в парі з тегом </А >. Між ними розташовується текст посилання, що відображається у вікні перегляду навігатора.

Приклад посилання на інший документ:

Локальні посилання усередині документа

Якщо довжина документа велика, має сенс організувати посилання на його окремі логічні самостійні частини, розташувати їх, наприклад, на початку документа. Такі посилання називаються локальними.

Нехай необхідно створити документ з ім’ям book. htm, що складається з декількох глав. На початку документа бажано розмістити зміст, що містить посилання на окремі глави.

Насамперед визначимо на початку кожної глави локальні мітки. Для цього необхідно використовувати тег <А > з параметром NAME, як показано нижче:

Посилання на створені в такий спосіб локальні мітки виконуються за допомогою тега <А >, що має параметр HREF:

Логічне форматування символів

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

Таблиця 2 – Теги логічного форматування

Теми логічного і фізичного форматування застосовуються однаково.

ВИДІЛЕННЯ ПАРАГРАФА ГОРИЗОНТАЛЬНОЮ ЛІНІЄЮ

Для того, щоб включити в документ HTML горизонтальну розділову лінію, ви повинні використовувати тег <HR >. Цей тег має ряд параметрів, що визначають зовнішній вигляд лінії.

Наприклад, щоб розмістити лінію висотою 8 пікселів, шириною, рівній половині ширини вікна навігатора, вирівняну по лівому краї, необхідно написати:

Примусовий поділ рядків

Для примусової розбивки рядків використовується тег <BR >. Рядки, розділені цим тегом, йдуть один під іншим. У випадку ж застосування тега <Р> між рядками виводиться порожній рядок.

ТАБЛИЦІ В ДОКУМЕНТАХ АХ HTML

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

У тексті документа HTML таблиця визначається між тегами <TABLE > і </ TABLE >. У найпростішому випадку рядка таблиці обмежені тегами <TR > і </TR >, а стовпці – тегами <TD > і </TD >, наприклад:

Звичайно перший рядок таблиці використовується для розміщення заголовків стовпців. За допомогою тега <ТН > можна створити такий рядок.

Параметри цього тега аналогічні вище розглянутому тегові <TD>.

За допомогою тега <CAPTION> можна супроводити таблицю підписом, розташованої над чи під таблицею. Для цього існує параметр ALIGN, що може приймати значення: ТОР (угорі) чи ВОТТОМ (унизу).

Параметри для тега <TD>

Елемнти html, які можна використовувати надалі для керування