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

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

      World Wіde Web (WWW) - глобальна комп'ютерна  мережа на сьогоднішній день  містить мільйони сайтів, на яких розміщена всіляка інформація.

     Окремий документ WWW називають WEB - сторінкою. Звичайно це комбінований документ, що може містити текст, графічні ілюстрації, мультимедійні й інші вставні об'єкти.

     Програми  перегляду Web-сторінок називаються  браузерами. Браузер відображає документ на екрані відповідно до команд, які впроваджені в текст цього документа. Автономні Web-документи використовують мову HTML (HyperText Markup Language – мова розмітки гіпертексту). Мова HTML призначена не для форматування документа, а для його функціональної розмітки. Конструкції мови HTML називаються тегами (іноді їх називають дескрипторами). Вони вставляються безпосередньо в текст документа. Усі теги розміщуються у кутових дужках <…>...

     Теги  HTML бувають парними і непарними. Непарні (одиночні, автономні) теги впливають на весь документ або визначають разовий ефект у місці своєї появи. При використанні парних тегів у документ додаються відкриваючий і закриваючий теги, що впливають на частину документа між ними. Закриваючий тег відрізняється від відкриваючою наявністю символу / (коса риска) перед ключовим словом (</HEAD>). Закриття парних тегів виконується так, щоб дотримувалися правила вкладення. Парні теги ще називаються контейнерними, разом зі своїм умістом вони утворюють контейнер.

     Зручним засобом для створення файлів HTML є блокнот. Блокнот надає мінімальні засоби оформлення, тому тут виключена  імовірність випадкового збереження спеціальних атрибутів форматування текстових файлів. Це особливо важливо мати на увазі при створенні документів HTML для Web -сторінки, тому що присутність спеціальних символів або інших атрибутів форматування на опублікованій Web -сторінці може виявитися небажаним або навіть викликати помилки [4].

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

     Усі документи HTML мають однакову структуру, обумовлену фіксованим набором тегів структури. Документ HTML завжди має починатися з тега <HTML> і закінчуватися відповідним закриваючим тегом </HTML>. Усередині документа виділяються два основних розділи: заголовків і тіла документа, що йдуть саме в такому порядку. Розділ заголовків містить інформацію, що описує документ у цілому, і обмежується тегами <HEAD> і </HEAD>. Зокрема, розділ заголовків мусить містити загальний заголовок документа, обмежений парним тегом <TITLE>. Ця назва з'являється в заголовку вікна браузера. Назви документів враховуються пошуковими машинами, так що їх варто робити максимально інформативними.

     Основний  зміст розміщається в тілі документа, що обмежується парним тегом <BODY>. Насправді, положення структурних  тегів у документі неважко визначити, навіть якщо вони опущені. Тому стандарт мови HTML вимагає тільки наявності тега <TITLE> (і, відповідно, </TITLE>). Проте, при створенні документа HTML опускати структурні теги не рекомендується.

     Найпростіший, правильний документ HTML, що містить усі теги, які визначають його структуру, може виглядати в такий спосіб:

     <HTML>

     <HEAD>

     <TITLE> Заголовок документа </TITLE>

     </HEAD>

     <BODY>

     Текст документа

     </BODY> </HTML>

     Тег може містити список атрибутів. Атрибути вказуються після імені тега в  довільному порядку. Один від одного вони відокремлюються одним або декількома пробілами або знаками табуляції. Після імені атрибута вводиться знак рівності і значення атрибута. Якщо значення складається з декількох слів або чисел, включаючи пробіли й інші спеціальні знаки, то воно має бути взято в лапки. Наприклад, <BODY BGCOLOR=Green TEXT=White> задає зелений колір фону документа і білий колір тексту.

      Елемент BODY

      Елемент BODY може містити велику кількість  атрибутів. Усі вони важливі, тому що визначають загальний вигляд документа. У табл. 1.1 наведені деякі атрибути, що задають зовнішній вигляд документа.

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

      У HTML кольори визначаються цифрами  в шістнадцятирічним коді. Колірна  система базується на трьох основних кольорах: червоному (Red), зеленому (Green) і синьому (Blue), що позначаються RGВ.

Таблиця 1.1

Атрибути  елемента BODY

      Для кожного кольору задається шістнадцятирічне значення від 00 до FF, що відповідає діапазонові 0-255 у десятковому вирахуванні. Для простоти в HTML визначені 16 стандартних кольорів, які разом з їх шістнадцятирічними кодами, наведені в таблиці 1.2.

Таблиця 1.2

Коди  шістнадцяти стандартних кольорів у HTML 4

      Елементи H1, H2, Н3, H4, Н5, H6

      Подальше  структурування тіла документа виконується усередині елемента BODY за допомогою заголовків, що задаються елементами H1, Н2, Н3, Н4, Н5 і Н6. Функції елементів заголовків подібні звичайним стилям заголовків у текстових редакторах. Заголовки мають найважливіше значення в структуруванні HTML-документів, теги заголовків є одними із самих уживаних засобів HTML.

      Елементи  заголовків є контейнерами і тому повинні мати парні, наприклад, <H1> і </H1> теги. В HTML існує шість рівнів заголовків: самий верхній рівень – H1, далі Н2, Н3, Н4, Н5 і самий нижній Н6.

      Елемент ADDRESS

      Елемент ADDRESS служить для ідентифікації  автора документа і (за бажанням) для  вказівки адреси автора. Сюди ж звичайно поміщаються дані про авторські права. Цей елемент розташовується або на початку, або в самому кінці документа.

      Елемент ADDRESS складається з тексту, розміщеного між тегами <ADDRESS> і </ADDRESS>. Текст, укладений між цими тегами, звичайно відображається у вікні браузера курсивом.

2. Створення гіперпосилань

      Основним  засобом створення гіпертекстового  документа є посилання, що зветься також гіперпосиланням або Web-посиланням. Посилання зв'язують один ресурс мережі з іншим. Посилання має два кінці, які звуться якорями, і напрямок, що визначає, який елемент до якого прив'язується. Посилання починається в «вихідному» якорі (джерелі) і вказує на«цільовий» якір, що може бути будь-яким Web-ресурсом.

      Для завдання якорів і посилань можна  використовувати елементи A і LINK. Елемент LINK може бути присутнім тільки в  заголовку документа, елемент A –  тільки в тілі документа. Розглянемо тільки атрибут HREF елемента A. Цей атрибут визначає місце розташування Web-ресурсу, тобто його URL адресу (Uniform Resource Locator – уніфікований покажчик інформаційного ресурсу, стандартизований рядок символів, що вказує місцезнаходження документа в мережі Internet).

      Приклад:

      Пропонуємо  переглянути <A HREF="http//www.dnepr.com.ua"> карту </A> м. Дніпропетровська.

      Слово "карта" буде виділено іншим кольором, як посилання, клацнувши по якому  ви перейдете в зазначену URL адресу.

3. Прийоми форматування HTML- документів

Форматування  містить у собі:

• поділ тексту на абзаци
• переведення рядка – тег <BR>
• структурування тексту горизонтальними лініями – тег <HR>
• Шрифти
• Списки тощо.

      Поділ тексту на абзаци

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

      Поділ на абзаци здійснюється за допомогою  спеціальних елементів. Якщо помістити  тег <P> у початок кожного нового абзаца тексту, то програма перегляду відокремить абзаци один від одного порожнім рядком. Використання тега </P> необов'язково.

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

Таблиця 1.3

Значення  атрибута ALIGN

      Переведення рядка – тег <BR>

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

      <HTML>

      <BODY>

      <P>Складові  частини персонального комп'ютера</P>

      Системний блок<BR>

      Монітор<BR>

      Клавіатура<BR>

      Миша<BR>

      Принтер<BR>

      Модем<BR>

      </BODY>

      </HTML>

      Заборона  переведення рядка

      У деяких випадках з'являється необхідність у протилежній операції - забороні переведення рядка. Таку можливість надають контейнерні теги <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. Створення опису фреймів.