Основи WEB – дизайну

      У деяких випадках з'являється необхідність у протилежній операції - забороні переведення рядка. Таку можливість надають контейнерні теги <NOBR> і </NOBR>, що є розширеннями мови HTML 4. Текст між цими тегами буде розташований в одному рядку, без переносу на інший. Іноді це дуже важливо, наприклад, при введенні гіперпосилань, однак надмірне вживання цих тегов може непередбачено порушити природне переведення рядків браузером клієнта.  

      Структурування тексту горизонтальними лініями – тег <HR>

      Одним зі способів структурування тексту служить  уведення горизонтальних лінійок.

      Звичайно  горизонтальні лінії використовують для візуального виділення області HTML-сторінки. Для цього часто використовують рельєфну втиснену лінію, що додає документу "об'ємність". Для введення втиснених ліній використовується тег <HR>.

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

      Шрифти, елементи FONT і BASEFONT

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

      Елемент BASEFONT є одиночним і використовується для завдання розміру базового шрифту. За замовчуванням, при відсутності елемента BASEFONT, використовується шрифт розміру 3. Атрибути елементів FONT і BASEFONT наведені в табл. 1.4.

      Приклад: <FONT FACE=Arial SIZЕ=4>

      Таблиця 1.4

      Атрибути  елементів FONT і BASEFONT

      Списки

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

      HTML дозволяє використовувати наступні  три типи списків:

• упорядкований список (елемент OL).
• неупорядкований список (елемент UL).
• список визначень (елемент DL).

      Упорядковані списки - тег <OL>

      Упорядкований список (те ж, що нумерований список у Word) відкривається контейнерним тегом <OL>, а кожен його пункт починається  стандартним тегом <LI>. Програма перегляду, зустрівши тег <OL> упорядкованого списку, послідовно нумерує пункти списку: 1, 2, 3 тощо. Для форматування заголовка списку використовується спеціальний тег <LH> Для закриття списку використовується тег </OL>. Початковий і кінцевий теги забезпечують переведення рядка до і після списку, відокремлюючи, таким чином, список від іншого тексту. Це виключає необхідність використовувати теги абзаца <P>.

      Для відділення пунктів списку один від одного можна використовувати теги абзаца.

      Упорядковані  списки допускають вкладення один у одного.

      Таблиця 1.5

      Атрибути  упорядкованого списку

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

      У HTML існує можливість створення неупорядкованих, маркірованих, списків - без нумерації  абзаців. Для створення неупорядкованих  списків використовують елемент UL.

      Елемент UL

      У неупорядкованих списках замість  цифр використовують різні символи  – маркери списку. Як і в упорядкованих списках, тут також забезпечується переведення рядка до і після списку і допускається створення вкладених списків. Список міститься усередині контейнерного тега <UL>. У неупорядкованих списках можна використовувати ті ж атрибути, що й в упорядкованих. Однак атрибут TYPE елемента UL допускає тільки три наступні значення: «disc», «square» і «circle», що задають маркери, відповідно, у вигляді жирної крапки, квадрата й окружності.

      Список  визначень

      Списки  визначень представляють текст  у формі словникової статті, що складається з терміну і наступного текстового абзаца, що пояснює зміст терміна. Такі списки зручні, наприклад, для складання каталогів або для опису функцій підрозділів якої-небудь організації. Елемент списку визначень DL є контейнером і відокремлює список від іншого тексту HTML-документа порожніми рядками. Усередині контейнера термін, який треба визначити, позначається тегом <DT>, а абзац з його описом - тегом <DD>. Теги <DT> і <DD> відносяться до одиночних тегів.

      Списки  можна комбінувати.

4. Створення зображення і використання його на Web-сторінці

      Елемент IMG дозволяє включати в поточний HTML-документ зображення, що зберігається у файлі. Це одиночний тег. Значення деяких атрибутів:

      SRC – задає місце розташування  зображення форматів gif, jpeg, png.

      HEIGHT – перевизначення висоти зображення.

      WIDTH - перевизначення ширини зображення.

      VSPACE – визначає вільний простір  над і під зображеннями.

      HSPACE - визначає вільний простір ліворуч і праворуч від зображення.

      ALIGN – вирівнювання. Може приймати  наступні значення:

      bottom, middle, top – вирівнювання вікна об'єкта по вертикалі по нижньому рівні базової лінії, по центру і по верхньому рівні відповідно;

      left, right, center – вирівнювання по горизонталі ліворуч, праворуч і по центру відповідно.

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

      Мова  HTML надає можливість створення таблиць.

      Елемент TABLE являє собою контейнерний тег, у якому знаходиться весь уміст таблиці. Для позначення рядка використовується контейнерний тег TR, для позначення заголовків стовпців (рядків) – контейнерний тег TH, а для даних в осередках – контейнерний тег TD.

      Атрибути  елемента TABLE.

      ALIGN задає вирівнювання таблиці усередині документа і може приймати наступні значення:

      left – таблиця знаходиться в лівій частині документа;

      center – таблиця знаходиться в центрі документа;

      right – таблиця знаходиться в правій частині документа;

      BORDER – задає товщину лінії таблиці.

      WIDTH – визначає ширину таблиці. Якщо значення зазначене у відсотках, це означає частку у відсотках від доступного браузеру горизонтального простору.

      Елемент CAPTION призначений для введення заголовка (назви) таблиці. Атрибут ALIGN указує розташування заголовка щодо таблиці – угорі (top), унизу (bottom), ліворуч (left), праворуч (right). За замовчуванням використовується значення top.

      Елементи TR, TH і TD

      Елемент TR не має характерних атрибутів і служить контейнером для осередків, що входять у рядок таблиці. Кожен новий рядок таблиці повинен починатися з тега TR. Кінцевий тег елемента TR можна опустити. Осередки, що входять у рядок, задаються елементами TH (заголовок) і TD (дані), оскільки в осередках таблиці можуть утримуватися дані двох типів: заголовна інформація і дані. Для об'єднання рядків або стовпців використовуються відповідно атрибути ROWSPAN і COLSPAN. Вони визначають, яка кількість рядків і стовпців займає осередок. Наприклад, ROWSPAN=3 поєднує в одному осередку три рядки.

6. Створення опису фреймів

      Мова  HTML дозволяє в рамках однієї Web-сторінки відобразити декілька елементів. Для цього сторінка повинна бути розбита на декілька областей – фреймів. Розбивка сторінки описується документом HTML особливого роду, структура якого відрізняється від звичайної. Тіло документа заміняється описом фреймів, що задається парним тегом <FRAMESET>. Елемент BODY у такому документі має бути відсутнім, а при наявності - ігнорується браузером.

      Відкриваючий тег <FRAMESET> мусить містити обов'язковий атрибут COLS= або ROWS=, що визначає спосіб розбивки вікна. У першому випадку вікно розбивається вертикальними лініями, у другому - горизонтальними. Якщо задані обидва атрибути, створюється сітка фреймів. Значення кожного з цих атрибутів - це перераховані через кому розміри окремих фреймів.

      <FRAMESET COLS="60%, 40%">

      Значення  можуть бути задані в пікселях або у відсотках від ширини вікна. Остання область може бути визначена за допомогою символу «*», що означає, що їй виділяється весь простір, що залишився.

      <FRAMESET ROWS="40%, 40%, *">

      Між тегами <FRAMESET> і </FRAMESET> має бути розташовано рівно стільки елементів, скільки областей створено за допомогою атрибутів COLS= і ROWS=. При цьому можуть використовуватися додаткові елементи FRAMESET, що описують подальшу розбивку на підобласті ще меншого розміру або непарні теги <FRAME>, що визначають спосіб використання області.

      Тег <FRAME> мусить містити обов'язковий  атрибут SRC=, за допомогою якого вказується, який документ спочатку завантажується у відповідну область. Значення цього атрибута - абсолютна або відносна адреса URL потрібного документа.

      Серед інших атрибутів виділяється  атрибут NAME=, що дозволяє задати «ім'я» створеної області у виді послідовності латинських букв і цифр, використаної як значення цього атрибута.

      <FRAME SRC="text.htm" NAME="left">

      Це  ім'я можна використовувати, щоб  завантажувати нові документи в  раніше створену область. Для цього  в тег <A>, що визначає гіперпосилання, необхідно додати атрибут TARGET=, значення якого збігається з раніше визначеним ім'ям області. При переході по даному гіперпосиланню новий документ завантажиться в зазначений фрейм.

Методичні вказівки до виконання  завдання № 6

Тема: Створення Web-документів

      Ціль: Одержати навички роботи в середовищі HTML. Навчитися основних прийомів проектування і розробки Web-документів.

План

1. Створення найпростішої Web-сторінки.
2. Вивчення прийомів форматування HTML-документів.
3. Створення гіперпосилань.
4. Прийоми форматування тексту.
5. Прийоми створення списків.
6. Створення зображення і використання його на Web-сторінці.
7. Створення таблиць.
8. Створення опису фреймів.