МОВА РОЗМІТКИ ГІПЕРТЕКСТУ HTML
МЕТОДИЧНІ ВКАЗІВКИ
до лабораторної роботи № 4
з дисципліни “Алгоритмізація та програмування, частина 2”
для студентів спеціальності 122 «Комп’ютерні науки та інформаційні технології»
Затверджено
на засіданні кафедри інформаційних систем та мереж
Протокол №__ від _____.2017 р.
Мова розмітки гіпертексту HTML: Методичні вказівки до лабораторної роботи № 4 / Укл.: В.А. Висоцька, Л.В. Чирун. – Львів: Видавництво Національного університету ”Львівська політехніка”, 2016. – 36 с.
Укладачі
Висоцька В.А., канд. техн. наук, доц.
Чирун Л.В., канд. техн. наук, доц.
Відповідальний за випуск Литвин В.В., доктор техн. наук., проф.
Рецензенти Верес О.М., канд. техн. наук, доц.
Берко А.Ю., доктор техн. наук., проф.
Мета роботи: створення шаблону стандартної сторінки і ознайомлення з методологією роботи по генерації HTML кодів в лабораторній роботі. Cтворити художньо-оформлену текстову Web-сторінку з використанням дескрипторів заголовків, розриву, абзацу, попереднього форматування тексту, логічних стилів, вирівнювання тексту. Oволодіти практичними навичками створення маркованих і нумерованих списків, а також глосаріїв. Оволодіти практичними навичками форматування шрифтів в HTML. Створення гіперзв’язку з вашими Web-сторінками, зв’язку з переходами на сторінці і поштового зв’язку. Вивести зображення на екран і художньо оформити Web-сторінку. Створити художньо-оформлену Web-сторінку з використанням таблиць. Вивчити структуру серверного та клієнтського типів навігаційних карт. Оволодіти методом створення навігаційної карти клієнтського типу. Створити Web-вузел з використанням фреймів. Оволодіти навиками роботи з формами.
- Теоретичні відомості
- 1.Ознайомлення з HTML – структура Web-сторінки.
HTTP - це протокол прикладного рівня, розроблений для обміну гіпертекстовою інформацією в мережі Internet. Протокол використовується в одному з найпопулярніших ресурсів мережі Internet - Word Wide Web - з 1990 року.
Реальна інформаційна система вимагає набагато більшої кількості функцій, ніж просто пошук. HTTP дозволяє реалізувати в рамках обміну даними набір методів доступу, що базуються на специфікації універсального ідентифікатора ресурсів (Universal Resource Identifier), що застосовується у формі універсального локатора ресурсів (Universe Resource Locator) або універсального імені ресурсу (Universal Resource Name). Повідомлення в мережі при використанні протоколу HTTP передаються у форматі, подібному до формату поштового повідомлення Internet (RFC-822) або до формату повідомлень MIME (Multiperposal Internet Mail Exchange). HTTP використовується для взаємодії програм-клієнтів із програмами-шлюзами, що дозволяють доступ до ресурсів електронної пошти Internet (SMTP), списків новин (NNTP), файлових архівів (FTP), систем Gopher і WAIS. Протокол розроблений для доступу до цих ресурсів з допомогою проміжних програм-серверів (proxy), що дозволяють передавати інформацію між різними інформаційними службами без втрат. Протокол реалізує принцип "запит/відповідь". При роботі в Internet для обслуговування HTTP-запитів використовується 80 порт TCP/IP.
В даний час у практиці World Wide Web реально використовуються тільки три методи доступу: POST, GET, HEAD.
GET - метод, що дозволяє одержати дані, задані у формі URL в запиті ресурсу. Якщо посилаються на програму, то повертається результат виконання цієї програми, але не текст програми. Додаткові дані, які треба передати для обробки, кодуються в запит ресурсу. Існує різновид методу GET - умовний GET. При використанні цього методу сервер відповість на запит тільки в тому випадку, якщо будуть виконані умови передачі. Це дозволяє розвантажити мережу та позбавити її від передачі непотрібної інформації. Умова вказується в полі "if-Modified-Since" заголовка запиту. При використанні методу GET у поле тіла ресурсу повертається власне викликана інформація (текст HTML-документа, наприклад).
HEAD - метод, аналогічний GET, але він не повертає тіло ресурсу. Використовується для одержання інформації про ресурс. Умовного HEAD не існує. Даний метод використовується для тестування гіпертекстових посилань.
POST - цей метод, розроблений для передачі великого обсягу інформації на сервер. Ним користуються для анотування існуючих ресурсів, відсилання поштових повідомлень, роботи з формами інтерфейсів до зовнішніх баз даних і зовнішніх програм, що виконуються. У відмінності від GET і HEAD, у POST передається тіло ресурсу, що і є інформацією з поля чи форм, або інших джерел уведення. У перших версіях протоколу були визначені й інші методи доступу (DELETE, наприклад), але вони не знайшли належного застосування. Багато функцій, що покладали на ці методи, можна успішно виконувати через POST.
- 2.Елементи HTML.
Одним з інструментаріїв створення WEB- сторінок є мова HTML. Крім того на даний момент є досить перспективна мова XML. Основним елементом HTML є дескриптор (tag).
Тег - це основний елемент кодування, прийнятий в стандарті HTML. В документі HTML все залежить від дескрипторів. Дескриптори визначають правила розмітки в документі. Всі дескриптори беруться в кутові дужки < >. Наприклад дескриптор розриву абзацу <P> (Page), дескриптор <HR> - розмітка горизонтальною лінією (horizontal role). Всі дескриптори мають певні властивості, які називаються атрибутами. Атрибут – управляючий елемент дескриптора, відповідно розміщується всередині кутових дужок дескриптора.
Існує два типи дескрипторів.
- Контейнерні – це дескрипторна пара, яка складається з початкового (відкриваючого) і кінцевого (закриваючого) дескрипторів а також вмісту контейнеру над яким проводиться операція. Запис контейнерного дескриптора:
<TAG> вміст контейнеру </TAG>
де, TAG – ім’я реального контейнерного дескриптора.
Таким чином, контейнерний дескриптор виконує задачу розмітки над вмістом контейнеру, наприклад:
<PRE> Це відформатований текст </PRE>
- Одиночний дескриптор, або пустий не містить інформації і виконує в основному самостійну задачу. Наприклад, дескриптор <HR> створює горизонтальну лінію в HTML документі.
Отже – елементи HTML-документу – все те, що знаходиться між початковим і кінцевим дескрипторами а також самі дескриптори.
Елементами документу можуть бути – зображення; фрагменти тексту; форми; таблиці; списки; посилання; текстове поле; кнопки; заголовок документу; основне тіло документу.
Зауваження: В HTML-код не потрібно вставляти ні пробіли ні пусті рядки. Броузер HTML-коду відображає документ згідно дескрипторів і всі зайві пробіли і пусті рядки відкидаються. Тому пробіли і пусті рядки використовуються тільки для того, щоб ваш код мав чіткий і читабельний вигляд. На вашій Web-сторінці пробіли і пусті рядки відображаються за допомогою відповідних дескрипторів.
- 3.Структура Web-сторінки
Всі ново створені Web сторінки повинні мати однакову загальну структуру.
Цей лістинг HTML документу може служити у вигляді шаблону для вашої сторінки.
Будь-яка WEB-сторінка починається з дескриптора <HTML>, він означає початок WEB-сторінки. Дескриптор </HTML> означає кінець WEB-сторінки, все що буде написано після цього дескриптора відображатись на вікні браузера відображатись не буде.
<HEAD> - заголовку, що позначає заголовну частину документу HTML;
<TITLE> - дескриптор назви документу, розміщує надпис в верхньому лівому куті браузера;
<META> – повідомляє браузеру додаткову інформацію про документ;
<BASE> – задає базову адресу документу;
<STYLE> – визначає стилі форматування зовнішнього вигляду документу;
<SCRIPT> – визначає оператори інтерпретації мов програмування JavaScript i VBScript;
<LINK> – (не підтримується більшістю браузерів);
<BODY> - це тіло документу HTML, в ньому знаходиться вся інформація що виводиться браузером на екран, тобто вся інформація, що ви хочете подати користувачу.
Дескриптор <META> має корисне застосування. Він дозволяє добавити інформацію про вашу сторінку в списки індексації та таблиці каталогів сторінок пошукових машин. Ідея полягає в розміщенні в полі дескриптора атрибутів NAME і CONTENT.
Приклад застосування цієї ідеї:
<HEAD>
<TITLE> Вирощування ароматичних трав. Інструкція </TITLE>
<META NAME=”keywords” CONTENT=”вирощування, ароматичні трави, м’ята, прянощі”>
</HEAD>
Дескриптор <META> використовується також для автоматичного завантаження сторінок, для створення презентацій, слайдів і анімацій.
- 4.Робота з тілом документа - дескриптор BODY.
Найпотужнішим в HTML є елемент BODY, котрий визначає тіло документа. Його атрибути дозволяють керувати більшістю візуальних можливостей Web-сторінки: кольором і дизайном фону, кольором тексту, кольорами зв’язків, розміщаючи їх при цьому в середині одного відкриваючого дескриптора <BODY>...</BODY>.
Фактично з цього дескриптора починається уся видима частина сторінки. Переважно, зображення також вносять привабливість і забезпечують великі візуальні можливості, але основне керування кольором знаходиться саме в дескрипторі <BODY>...</BODY>. Дескриптор <BODY>...</BODY> відповідає за те, що називається браузерним дизайном. Це значить, що ще до того, як на сторінці буде розміщене будь-яке зображення, її вже можна зробити барвистою і цікавою, працюючи усього лише з палітрою кольорів і встановлюючи різні атрибути дескриптора <BODY>...</BODY>. Браузер, за винятком фонових зображень, не запитує цю інформацію на сервері після завантаження сторінки, і якщо ви правильно кодуєте інформацію, зв'язану з фоном, текстом і атрибутами зв’язків, те всі ці дані відображаються прямо в документі сторінки. У такий спосіб підвищується швидкість завантаження й обробки сторінки при ускладненні її дизайну.
У цій лабораторній ви довідаєтеся, як використовувати дескриптор <BODY>...</BODY> і його атрибути, щоб одержувати ефективні сторінки, що швидко завантажуються та ведуть від нудного стандартного оформлення в царство барвистого дизайну.
Елемент <BODY>...</BODY> є елементом форматування документа, тому якщо в нього немає атрибутів, то він просто відповідає за демаркацію області Web-браузера, що повинна містити тіло документа: текст, зображення і медіа.
Цей елемент має відкриваючий і закриваючий дескриптори і розташовується за контейнером HEAD. Разом з елементами HEAD, HTML і TІTLE він складає оболонку HTML (що показано в лістингу 11.1).
Рис. 1. Лістинг програми дескриптора BODY,
що є складовою частиною документа HTML
Хоча для відкриваючого дескриптора <BODY>...</BODY> атрибути не обов'язкові, але саме вони підсилюють його потужність і вплив у звичайному HTML.
- Керування кольором фону, тексту і зв’язків.
Для керування кольором фона, тексту і зв’язків у дескрипторі <BODY>...</BODY> використовуються наведені нижче атрибути (їхніми значеннями служать кольори, представлені у вигляді імен або шістнадцятковому коді формату RRGGBB).
- text="x" - колір тексту по замовчуванню.
- lіnk="x" - колір зв’язку по замовчуванню. Щоб не порушувати цілісність дизайну, необхідно завжди користатися цим атрибутом і привласнювати йому значення, відповідне палітрі вашого вузла, навіть якщо це значення іншого кольору, прийнятого по замовчуванню у більшості браузерів.
- vlіnk="x" - колір зв’язку після відвідування. Як і у випадку з атрибутом lіnk, якщо не встановлене це значення, те браузер буде використовувати колір по замовчуванні (звичайно це фіолетовий) чи той, що встановлено користувачем. По цих ж причинам, що і для lіnk="x", у рядок BODY необхідно включати відповідний колір зв’язку після відвідування.
- alіnk="x" - колір активного зв’язку. Він з'являється, коли зв’язок стає активний: при натисненні на ній мишею коли над нею проходить курсор миші - це залежить від використовуваного браузера.
- bgcolor="x" - колір фону. Раніше в браузерах по замовчуванню застосовувався жахливий сірий колір, але тепер використовується білий. Користувачі можуть самі його встановлювати, так що і вам завжди випливає це робити, навіть якщо ви вирішили користатися фоновим зображенням (колір фону не перешкодить навіть у цьому випадку).
- background="URL" - використовується тільки тоді, коли на сторінці потрібно розмістити фонове зображення, з графічного файлу.
Кольори тексту і зв’язку.
Щоб можна було правильно вибирати колір тексту і зв’язку, дуже важливо знати теорію кольорів і те, як кольори поводяться на екрані комп'ютера і у браузері. При цьому варто підкреслити два аспекти.
- Естетичний. При розумному використанні кольору завжди росте якість дизайну сторінки. Дуже важливо навчитися створювати індивідуальну палітру, що об’єднуватиме ваші сторінки і буде служити їх візитною карткою.
- Функціональний. Якщо кольори недостатньо насичені, то відвідувачам вузла буде важко читати ваші сторінки. Необхідно так вибирати кольори, щоб вони несли як художнє, так і інформаційне навантаження.
Робота з Web-кольорами.
Професіонали звичайно задають кольори як шістнадцяткові значення з 216-колірної Web-палітри.
Дивний ефект "зникнення" тексту вийде в тому випадку, якщо зробити однаковими колір активного зв’язку і колір фону. Після натиснення на зв’язку і повернення на основну сторінку, зв’язок знову стане темно-сірим.
- Колір фону.
При роботі з кольором фону не слід забувати про контраст. Наприклад, чорний текст розташований на білому фоні. Це дуже сильний контраст. Але, якщо встановити темно-синій фон і світло-сірий текст, то контраст зменшиться, що полегшить читання. Це особливо відчувається при читанні такої сторінки протягом більш-менш тривалого часу.
(Для ознайомлення з повним текстом статті необхідно залогінитись)