Таблици

Таблиця – один з найбільш зручних способів представлення великих об’ємів даних. Мова HTML має великі можливості зі створення різних видів таблиць.

· Таблиця на мові HTML починається з тега <TABLE> і закінчується тегом </TABLE>.Текст всередині таблиці повинен бути вміщений в спеціальні теги, що визначають елементи таблиці(заголовки, рядки, комірки).

· Між тегами <TABLE> та </TABLE> може один раз зустрітися пара тегів <CAPTION> та </CAPTION>, що визначають заголовки таблиці. Заголовки таблиці розміщується безпосередньо над таблицею(за замовчуванням) або під нею.

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

· Кожний рядок таблиці складається з комірок. Комірки помічаються або тегами <TH>, що містять заголовки стовпців або рядків,або тегами <TD>, що містять звичайні дані. Ці теги також є парними, але закриваючі теги і тут можуть опускатися.

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

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

6 Вставка графічних,відео-файлів і. гіперпосилань.

Графічні зображен­ня (фотографії, картинки, піктограми тощо) зберігаються на сер­верах в окремих файлах з розширеннями bmp, jpg", gif та іншими і подаються на екран клієнта за допомогою команди, що задається одинарним тегом <IMG> з параметрами:

<IMG SRC=" адреса графічного файлу" ALT="альтернативний текст" ALIGN="left" WIDTH="240" HEIGHT="200">

Обов'язковим є лише перший параметр SRC. Альтернативний текст — це текст, який виводитиметься замість картинки, якщо броузер не може прийняти графічний файл, або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце роз­ташування картинки на екрані, а параметри WIDTH і HEIGHT її розміри по ширині і висоті в пікселях або відсотках, наприклад, <IMG WIDTH="300"> задає ширину картинки 300 пікселів; <IMG WIDTH="50%"> задає ширину картинки півсторінки у горизонта­льному напрямку.

Для проведення ліній різної довжини і товщини застосовують параметри WIDTH і SIZE, наприклад, тег <HR SIZE="30" COLOR= "red"> замість звичайної лінії дає червону полосу товщиною 30 пікселів.

Зображення можна подати в рамці, що рекомендують робити, якщо його використовуватимуть як гіперпосилання. Для створен­ня рамки навколо зображення призначений параметр BORDER= "товщина рамки в пікселях".

Справа і зліва від картинки, яку обгортає текст, можна зробити вільний простір: HSPACE = "кількість пікселів". Можна створити вільний простір також над і під рисунком: VSPACE = "кількість пікселів".

За допомогою тега IMG можна вставити також відеофільм, який запускатиметься в момент відкриття Web-сторінки:

<IMG DYNSRC=" адреса відео-файлу">

Вставка гіперпосилань.

Є два види гіперпосилань: 1) на файл; 2) на деяке місце на даній сторінці, а саме: на початок сторінки — top, кінець сторінки — bottom, на деякий позначений текст. Гіперпосилання вставляють за допомогою парного тега <А>...</А> з параметром HREF = "адреса файлу (або слова top чи bottom чи позначений текст)".

Гіперпосиланням може бути текст або деяке графічне зобра­ження. Розглянемо на прикладі випадок, коли гіперпосиланням є текст. Нехай у реченні "Мене звати Світлана" слово "Світлана" потрібно зробити гіперпосиланням на файл "newinf.htm", що містить додаткові відомості про Світлану (цей файл ще треба створити). Це роблять так:

Мене звати <А HREF = "newinf.htm"> Світлана</А>.

На екрані слово Світлана буде підкреслене і зображене іншим кольором. Колір гіперпосилання визначається у тезі BODY пара­метром LINK = "колір". Крім цього корисними є ще два пара­метри: VLINK= "інший колір" — змінює колір гіперпосилання на інший після першого використання; ALINK = "ще інший колір" — змінює колір активізованого користувачем гіперпосилання на ще інший.

Тепер розглянемо, як деяке графічне зображення зробити гіперпосиланням. Для цього в середині тега <А>...</А> потрібно використати тег IMG. Наприклад, фотографію Світлани, що є у файлі "svitlana.gif", візьмемо в рамку і зробимо з неї гіперпосилан­ня на файл newinf.htm:

<А HREF - "newinf.htm"><IMG SRC - "svitlana.gif" BORDER =8 ></A>

Клацнувши у Web-сторінці на фотографії Світлани, отримаємо на екрані файл з додатковою інформацією про неї.

Розглянемо другий тип гіперпосилань — посилання в межах сторінки. Спочатку потрібно позначити місце на сторінці, куди здійснюватиметься перехід. Якщо з деякого місця перехід має виконуватися на початок сторінки, то в місце html-файлу, що від­повідає початку сторінки, вводять тег, який називається якорем:

<А NAME="#початок”></A>.

Аналогічно позначають (кидають якір у) деяке місце в кінці файлу: <А NAME="#кінець"></А>.

Будь-яке місце в тексті можна позначити за допомогою тега:

<А МАМЕ="#мояпозначка"></А>.

Тепер на сторінці розставляють гіперпосилання на створені позначки:

<А HREF="#початок (#кінець або #мояпозначка)">

текст гіперпосилання </А>.

Якщо одна сторінка займає декілька екранів, то в кінці сторінки вартує вставити гіперпосилання для переходу на її початок, наприклад, Тепер можна перейти <А HREF="#початок> на початок</А> сторінки.

Контрольні питання

1. Визначити HTML-код. Привести приклад документа в HTML
2. Записати теги заголовків
3. Записати теги для створення списків
4. Записати теги для створення таблиці
5. Записати теги для вставки графічних,відео-файлів і. гіперпосилань.

Список рекомендованої літератури

1. Войтюшенко Н.М., Останець А.І. Інформатика і комп’ютерна техніка, К.: Центр учбової літератури, 2009. – 564с.

2. Рзаєв Д.О., Шарапов О.Д., Інформатика та комп’ютерна техніка: Навч.-метод. посібник для самост. вивч. дисц. — К.: КНЕУ, 2002. — 486 с.

3. Гаевский А.Ю., Информатика: 7-11 класс: Учебное пособие – 2-е издание, доп. – К.: А.С.К., 2006. – 576с.: ил.

4. Інформатика та комп’ютерна техніка: Конспект лекцій / Укладач д.т.н., професор З.Д. Коноплянко.- Львів: Вид-во УБС НБУ, 2009.-131 с.

5. Інформатика та комп’ютерна техніка: Конспект лекційз дисципліни “Інформатика” для студентів напряму підготовки 6.030508 „Фінанси і кредит”/ Укладач З. Д. Коноплянко. - Львів: ЛІБС УБС НБУ, 2010. - 451 с.

6. Пушкар І.О., Браткевич В.В. Інформатика: Комп’ютерна техніка. Комп’ютерні технології: Підручник для студентів вищіх навчальних закладів. К.: Видавничий центр «Академія», 2003. – 704 с.

7. Ярмуш О.В., Редько М.М. Інформатика та компьтерна техніка: Навч. Посібник. – К.: Вища освіта, 2006. – 359с.

8. Руденко В. Д., Марчук О. М., Паланжоглу М. О., Практичний курс інформатики / За ред. Мадзігона В. М. – К.: Фенікс, 1997. – 304с.: іл.

9. Браткевич В.В, Бутов М.В, Золотарьова. Інформатика: Комп'ютерна техніка. Комп'ютерні технології.: Посіб.-Видавничий центр «Академія», 2001.-696 с.(Альма-матер). Учебное пособие – К.:Центр «Методика-информ»., 2002.- 351с.

10. Заборовский Г.А., Лаппо А.И., Пупцев А.Е., Информатика: учебное пособие для 9 класса общеобзазоват. учереждений с рус.яз. обучения. – Минск: Напр.авсета, 2009. – 191с. ил.

11. Угринович Н.Д., Информатика и ИКТ. Базовый уровень: учебник для 10 класса. – М.: БИНОМ. Лаборатория знаний, 2009. – 212с. ил.

12. Валецька Т.М., Бабій П.І., Григоришин І.А. та ін., Інформатика та комп’ютерна техніка в лабораторних роботах: Навчальний посібник. Ч. І. – К.: Дакор, КНТ, 2008. – 536 с.

13. Валецька Т.М., Бабій П.І., Григоришин І.А. та ін., Інформатика та комп’ютерна техніка в лабораторних роботах: Навчальний посібник. Ч. ІІ. – К.: Дакор, КНТ, 2008. – 536 с.

14. Кинкоф Ш., Microsoft Excel 2000 / Перевод с англ. А.Г. Парфенов. – М.: ООО «Издательство АСТ», 2007. – 401с.: ил.

15. Виткуп М.Е., Петренко В.В., Информатика и компьютерная техника MS Office в примерах и задачах с методикой их решения: Учебное пособие – К.:Центр «Методика-информ»., 2002.- 351с.

Дата добавления: 2015-07-20