Web-програмування 24.07.2015 06:14

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

 

Національний університет водного господарства та природокористування

Кафедра економічної кібернетики

 

 

06-11-04

0

 5

МЕТОДИЧНІ  ВКАЗІВКИ  І  ЗАВДАННЯ

 

для самостійної роботи студентів 3 курсу

напряму підготовки 6.030502 «Економічна кібернетика»

з дисципліни «Web-програмування»

 

 

 

 

Рекомендовано до друку методичною комісією НУВГП за напрямом підготовки 6.030502 «Економічна кібернетика»

 

Протокол №___  від «___» _____ 2013 р

 

 

 

Рівне – 2013

 

Методичні вказівки і завдання для самостійної роботи студентів 3 курсу напряму підготовки 6.030502 «Економічна кібернетика» з дисципліни «Web-програмування». 06-11-04 / Білан Б.С., – Рівне: НУВГП, 2013. – 28 с.

 

 

 

Упорядник: Б.С. Білан, ст. викладач кафедри економічної кібернетики

 

 

 

Відповідальний за випуск: П.М. Грицюк, д.е.н., професор, завідувач кафедри економічної кібернетики НУВГП

 

 

 

 

 

Зміст

 

Вступ. Загальні відомості про розвиток сучасних

інтернет-технологій та ресурсів.......................................3

Лабораторна робота №1 ……………………………......4

Лабораторна робота №2 ……………………………......9

Лабораторна робота №3 …………………………….....12

Лабораторна робота №4 …………………………….....13

Лабораторна робота №5 …………………………….....16

Лабораторна робота №6 …………………………….....18

Лабораторна робота №7 …………………………….....23

Література.........................................................................23

 

 

 

 

 

© Білан Б.С., 2013 

© НУВГП, Рівне, 2013

ВСТУП. ЗАГАЛЬНІ ВІДОМОСТІ ПРО РОЗВИТОК

СУЧАСНИХ ІНТЕРНЕТ-ТЕХНОЛОГІЙ ТА РЕСУРСІВ

 

Інтернет-технології – це технології створення і підтримки різних інформаційних ресурсів в комп'ютерній мережі Інтернет: сайтів, блогів, форумів, чатів, електронних бібліотек та енциклопедій.

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

Зараз можна виділити такі основні напрями використання мережевих інтернет-технологій: технології зберігання даних на хост-серверах (дата-центри); гіпертексти і веб-сайти; електронна пошта; різноманітні технології передачі даних; WAP-технології; інтернет- телефонія (chat, skype, аудіо- та відеоконференції) і ін.

Розвиток сучасних інформаційних технологій пов'язаний, перш за все, саме з розвитком мережевих інтернет-технологій. Тому розвиток мережевих технологій диктує основні напрями розвитку сучасного апаратного і програмного забезпечення ПК.

Можливість доступу до світових інформаційних ресурсів – це шлях активного акумулювання знань і вмінь людини з метою прискорення прогресу людства у всіх сферах діяльності.

В основі інтернет-технологій лежать гіпертексти, веб-сайти та інші інформаційні ресурси, що розміщуються в глобальній мережі Інтернет або в локальних мережах ЕОМ.

Гіпертексти – це тексти із гіперпосиланнями на інші гіпертексти, розміщені в Інтернет або локальній мережі ЕОМ. Для запису гіпертекстів використовується мова розмітки гіпертекстів HTML, яка сприймається всіма браузерами на всіх персональних комп'ютерах. Мова HTML є міжнародним стандартом, тому всі гіпертексти єдиним чином сприймаються і однаково відображаються на всіх персональних комп'ютерах в усьому світі. Для підготовки гіпертекстів зазвичай використовуються візуальні гіпертекстові редактори, у яких відразу видно, як буде виглядати гіпертекст на ЕОМ і можлива вставка гіперпосилань на сайти в Інтернет. Одним з кращих візуальних гіпертекстових редакторів є вільний офісний редактор Writer в офісному пакеті Open Office.

Інтерактивні сайти – це сайти, в яких використовуються інтерактивні гіпертекстові підпрограми, що дозволяють вести діалог з користувачами ЕОМ, підключеними до мережі ЕОМ. Гіпертекстові підпрограми включаються до гіпертексту разом з гіпертекстовими формами і підпрограмами, які називаються скриптами. Для запису гіпертекстових скриптів часто використовується мова JavaScript.

Мова JavaScript є розширенням мови розмітки гіпертекстів HTML і з цих причин інтерпретатор мови JavaScript вбудований в усі браузери і всі гіпертекстові редактори. Мова JavaScript є міжнародним стандартом. З цієї причини інтерактивні програми на мові JavaScript однаковим чином виконуються на всіх комп'ютерахі. Більше 60% програм у світі написано на мові гіпертекстових скриптів JavaScript. Програми, написані на JavaScript, – це кращий приклад відкритого програмного забезпечення в мережі Інтернет. Їх може читати, виконувати і модифікувати будь-яка людина, знайома з мовою програмування JavaScript.

 

Лабораторна робота №1. Створення найпростіших

веб-сторінок. Вивід тексту та його редагування.

 

Короткі теоретичні відомості.

Браузери– це клас прикладних програм, призначених для роботи з веб-сторінками в Інтернеті. Посилання – це слово або об’єкт за допомогою якого здійснюється перехід з одного місця документу в інше, або перехід в інший документ. HTML (Hyper Text Markup Language) – це мова маркування гіпертексту. Тег – це основний елемент HTML, він складається з відкриваючої та закриваючої частини. Основні теги:

Службовий тег <html> ... </html> - відкриває і закриває html-документ. Тег <head> ... </head>  містить інформацію про документ та його властивості. Визначає місце, де зберігається різноманітна інформація, яка не відображається в тілі документу. Тут розміщуються тег назви та теги для пошукових машин. В тегах  <body> ... </body> міститься сам html-докумет. Тут розміщується вся основна частина документу (текст статті, фотографії, форми для заповнення, інші об’єкти).

Атрибути BODY: bgcolor - задає колір фону документу. Використовуються значення кольору у вигляді #RRGGBB. Також можна використовувати константи кольору. Наприклад, <body bgcolor= "yellow">. background – вказує url-адресу зображення фону документа. text – встановлює колір тексту документа, використовуючи значення кольру у вигляді #RRGGBB. Наприклад, #000000 – чорний колір. Також можна використовувати константи кольору. Наприклад, <body text= "green">. <bodylink= “red”> – задає колір гіперпосилань.

Значення деяких кольорів: Olive #808000, Orange #FFA500, Chocolate #D2691E, Darkviolet #9400D3, Tan #D2B48C, Red #FF0000, White #FFFFFF, Purple #800080, Indigo #4B0082, Coral #FF7F50, Brown #A52A2A, Crimson #DC143C, Yellow #FFFF00, Maroon #800000, Gray #808080, Tomato #FF6347, Aqua #00FFFF, Fuchsia #FF00FF, Ivory #FFFFF0, Violet #EE82EE, Black #000000, Lavendar #E6E6FA, Dimgray #696969, Cyan #00FFFF, Salmon #FA8072, Magenta #FF00FF, Green #008000, Bisque #FFE4C4, Navy #000080, Blue #0000FF, Darkred #8B0000, Gold #FFD700

 

В HTML є 6 основних рівнів заголовків. <H1> … </H1>  - визначає заголовки першого рівня. <H2> … </H2> визначає  заголовки другого рівня і т.д. Є різновиди даного даного тега від Н1 до Н6 в залежності від розміру заголовку.  Тег <Hі> може мати атрибут align – вирівнювання заголовку у відповідностями з наступними значеннями: center – по центру, left – по лівому краю, right – по правому краю, title - вспливаюча підказка.

Тег, що визначає абзац, має таку структуру <p> … </p>. Параметр align також використовується в тегу і багатьох  інших і має ті ж самі значення, що й при визначенні заголовків.

Тег <br> не має закриваючої частини і продовжує вивід тексту чи заголовка з наступної стрічки.

Тег <hr> створює лінію і має такі внутрішні параметри: Size = товщина лінії (2,3, і т.д.); Width = довжина лінії (значення у пікселях або у процентах).

Завдання до лабораторної роботи №1.

 

Рівень I

1. В папці з своїм прізвищем створіть папку WEB і в цій папці створіть файл з пояснення основних тегів. В цьому файлі наберіть наступну інформацію:

Теги:

         <html> … </html> <!-- початок та закінчення -->

         <head> … </head > <!-- властивості сторінки -->

         <title> … </title> <!-- заголовок вікна -->

         <body> … </body> <!-- тіло сторінки -->

         <h1>…</h1> <-- заголовок першого рівня-->

Параметри:

         Align <!-- вирівнювання тексту left, center, right -->

         Bgcolor <!-- колір фону сторінки-- >

1. Відкрийте програму Notepad (Блокнот) і надрукуйте свою першу html-сторінку:

<html>

<head>

                   <title>Заголовок Вікна</title>

</head>

<body>

            …

</body>

</html>

1. Збережіть файл як веб-сторінку в папку WEB:

ФайлàСохранить; Папка WEB; Имя файла: pr1a.html; Тип файла  Все файлы(*.*);  і кнопка Сохранить....

1. Відкрийте ваш файл у браузері зверніть увагу на верхній лівий кут вікна.

 

 

 

   

Примітка: для зручнішої та швидшої роботи одночасно відкрийте два вікна, Перше – це ваш файл у програмі „Блокнот”; друге – ваш файл у браузері. Зробивши зміни у блокноті ви легко можете їх переглянути в браузері натиснувши клавішу F5.

1. Замініть заголовок вікна на Ваше прізвище та ім’я.
2. У тегу  <body> надрукуйте наступну стрічку:

<h1>Hello HTML! </h1>

Збережіть файл та подивіться на зміни у браузері.

7. Аналогічно використовуючи тег <h1> виведіть на екран привітання: “Привіт мене звати (ваше ім’я)”

8. У стрічці “Hello HTML!”  в тег <h1> допишіть align=right і подивіться на зміни. <h1 align=right>Hello HTML!</h1>

1. Вирівняйте весь текст по центру сторінки (align=center).
2. В середині тегу  <body> допишіть параметр bgcolor=red, подивіться що при цьому на зміни в браузері, змініть його значення на  blue, green, yellow, silver: <body bgcolor=red>
3. Створіть новий HTML документ:

<html>  

<head>

            <title>Завдання 2</title>

</head>

<body>

<h1> Веб-дизайн </h1>

</body>

</html>

Збережіть та перегляньте його у браузері

1. Змініть заголовок вікна на своє прізвище та ім’я, а слово Веб-дизайн вирівняйте по центру.
2.  Змініть цифру 1 в тегу <h1> на будь яку від 2 до 6. 
3.  Запишіть тег абзацу <p>, а у ньому слова “Ви завітали” і вирівняйте їх по лівому краю.
4.  Запишіть тег абзацу <p>, а у ньому слова “на сторінку” і вирівняйте їх по центру.
5.  Запишіть тег абзацу <p>, а у ньому своє прізвище та ім’я у родовому відмінку і вирівняйте їх по правому краю.
6.  Запишіть по центру таке речення Ось мій улюблений вірш: та наберіть такий вірш (використайте тег <BR>):

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

1. Під віршем проведіть лінії товщиною 4, 8, 16 та довжиною 80%, 50% та 30% відповідно.
2. Запишіть по центру сторінки слова Вашої улюбленої пісні і вирівняйте текст по ширині сторінки.
3. Збережіть результати лабораторної роботи.

 

Рівень ІІ

1. Створіть веб-сторінку такого змісту: назва файлу pr1(2).html; заголовок вікна „ Мій перший сайт”; в центрі веб-сторінки повинна знаходитися інформація: Прізвище та ім’я вирівняне по центру; назва внз, спеціальність вирівняні по лівому краю; домашня адреса та телефон по правому краю; Колір фону сторінки морська хвиля (navy).
2. Створіть веб-сторінку з такими атрибутами: назва файлу pr2.html; заголовок вікна  Робота з текстом; колір фону сторінки зелений; колір тексту жовтий; на самій веб-сторінці повинна розміститись наступна інформація: три заголовки різних рівнів: веб дизайн, 2013 р., автор ваше ім'я; проведіть лінію довжиною 57% і розміром 6; уривок з улюбленого вірша (до 4 рядків); проведіть лінію довжиною 300 пікселів та розміром 2; скопіюйте уривок прози та аналогічно вирівняйте по ширині сторінки

Лабораторна робота № 2. Створення списків.

 

Короткі теоретичні відомості.

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

OL - упорядкований (нумерований) список,

UL - неупорядкований список,

DL - список визначення,

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

В пронумерованому списку броузер автоматично вставляє номери елементів один за одним. Пронумерований список починається стартовим тегом <OL> і завершується тегом </OL>. Кожен елемент списку починається з тега <LI>. Тег <OL> може мати параметри: <OL TYPE=A|a|I|i|1 START=n>, де: TYPE - вид лічильника:

A - великі латинські букви (A,B,C...)

a - маленькі латинські букви (a,b,c...)

I - великі римські цифри (I,II,III...)

 i - маленькі римські цифри (i,ii,iii...)

1 - звичайні цифри (1,2,3...)

START=n - число, з якого починається відлік

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

 

Завдання до лабораторної роботи №2.

 

Рівень І

1. В програмі Блокнот створіть новий html-документ з такими атрибутами: заголовок вікна «Повторення»; колір фону сторінки - зелений, колір тексту – жовтий; наберіть три тексти заголовки трьох різних рівнів: 1 - HTML,  2 - web-дизайн, 3 - Notepad; проведіть лінію довжиною 400 пікселів, шириною 6; наберіть уривок з улюбленого вірша (пісні) і вирівняйте його по центру сторінки; скопіюйте уривок прози у свою сторінку, вирівняйте по ширині сторінки. Наприклад:

2. Створіть нову веб-сторінку. По центру напишіть слова Мій словник  проведіть горизонтальну лінію. Напишіть ще один заголовок, але меншим шрифтом Кольори – Colors, проведіть ще одну лінію. Створіть маркерований список (<UL>…</UL>) в якому вкажіть найбільшу кількість кольорів англійською мовою та їх український переклад.

<ul> <li>black - чорний</li>...і т. д.....</ul>

3. Аналогічно створіть веб-нову сторінку з маркерованим списком наступного змісту: Напис 1 – Університет, Напис 2 – Рейтинг предметів, в списку вкажіть 5 улюблених предметів.

4. В новому html-файлі надрукуйте заголовок Студенти моєї групи, проведіть горизонтальну лінію і створіть нумеро-ваний список (<ol> .. .</ol>), кожним пунктом якого буде прізвище, ім’я та телефон студентів вашої групи. Наприклад:

5. Створіть нову сторінку зі списком визначень: HTML - це мова гіпертекстової розмітки, яка створенна для написання web-сторінок. Тег – це основне „слово” мови HTML, із багатьох тегів створюється веб-сторінка. <DL>…</DL> – це список визначень.

6. Створіть такий список визначень:

% - процент;       *  - зірочка;       /   - слеш;

@ - альфа комерцйійне;               & - амперсант.

7. Збережіть результати лабораторної роботи.

 

Рівень ІІ

Створіть веб-сторінку з наступними атрибутами: назва файлу pr3.html; розміщення файлу ...\WEB; заголовок вікна  Робота з списками; колір фону сторінки сірий; колір тексту чорний. На самій веб-сторінці повинна розміститись наступна інформація: два ненумерованих списки: перший - 5 чоловічих імен, які починаються на перші 5 букв української абетки (Антон, Борис ..і т.д.);  другий -  5 тропічних фруктів.  Далі йдуть два нумерованих списки: перший - 5 країн Західної Європи;  другий - основні складові частини комп’ютера.

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

Складіть список визначень для наступних термінів :браузер, гіперпосилання, параметр. Сторіть компактний список визначень де термін це скорочена назва іноземної валюти, а визначення це її повна назва, наприклад USD.- доллар і т.д. За допомогою преформатованого тексту створіть такі малюнки:

 

Збережіть результати лабораторної роботи.

Лабораторна робота №3. Робота з графічними елементами. Розміщення графічних зображень на веб-сторінці.

 

Короткі теоретичні відомості.

Для розміщення зображення на сторінці використовують  тег: <img src = ”ім’я файлу(шлях до нього)”>. Щоб графічне зображення було одночасно і гіперпосиланням достаньо лише помістити тег <img> в  середину тега <a>..</a>.

Вказувати шлях до малюнків можна двома способами:
абсолютною адресою http://www.mywebsite.com/images/img1.jpg або відносною адресою /images/img1.jpg

 

Завдання до лабораторної роботи №3.

 

Рівень І

1. У папці WEB створіть нову веб-сторінку pr3a.html. Задайте заголовок вікна Робота з графікою.
2. Cкопіюйте (або скачайте з Інтернету) у папку WEB, будь-який малюнок (файл з розширенням .jpg, .jpeg, .gif, .png).
3. У розділі <body> … </body> вкажіть, що фоном Вашого html-документа має бути Ваш малюнок. Записується це так: <body background = “Ваш малюнок”>.
4. Збережіть та перегляньте сторінку.
5. Вставте новий малюнок  (наприклад pic1.jpg) за допомогою тега img. Команда для вставки: <img src=pic1.jpg>
6. Аналогічно зробіть таке (див. рис.)

Рівень ІІ

У першому малюнку зробіть так, щоб не було рамки навколо зображення. Зробіть рамку навколо другого малюнка товщиною 4 пікселі. Збільшіть розміри третього малюнка у півтора рази.

 

 

Вставте тег IMG, який посилається на неіснуючий файл. Створіть для нього альтернативний текст «Тут могла бути ваша реклама» (див. рис.).

 

Лабораторна робота №4. Шрифти, стилі і формати.

 

Короткі теоретичні відомості.

Тег BASEFONT призначений для задання шрифта, розміру і кольору тексту. Вказані значення використовуються до всього документа окрім тексту, який поміщений в середині тега FONT.

Параметри тега BASEFONT: Face – гарнітура шрифта, наприклад: Arial, Verdana, Times New Roman, Courier New, Georgia, Helvetica та інші. Можна вказати декілька шрифтів через кому, в такому випадку якщо перший вказаний шрифт не буде знайдено, то буде використано наступний. Size – розмір тексту в умовних одиницях, можливі значення від 1 до 7.  За замовчуванням береться значення 3. Розмір шрифта можна задавати двома шляхами: абсолютною величиною, наприклад size = 4, або відносною – size = +1 (або size = -1). В останньому випадку розмір змінюється на +1 чи -1 відносно базового. Color – колір тексту, задається аналогічно, як і колір фону сторінки.

За допомогою тега FONT можна легко змінювати базові параметри для окремого тексту..Існують ряд видозмін шрифтів:

Код HTML	Опис
<b>Текст</b>	Потовщений текст
<i>Текст</i> або <em>Текст</em>	Курсивний текст
<u>Текст</u>	Підкреслений текст
<small>Текст</small>	Маленькі літери
<big>Текст</big>	Великі літери
<strike>Текст</strike>	Закреслений текст
<sub>Текст</sub>    <sup>Текст</sup>	Нижній і верхній індекси

 

Завдання до лабораторної роботи №4.

 

Рівень І

1. За допомогою тега basefont задайте наступні параметри: шрифт - Arial, колір тексту - Maroon, розмір літер – 4.

2. Створіть такий абзац тексту: „На цій веб-сторінці текст оформлений з допомогою тега BASEFONT”.

3. Використовуючи тег FONT виведіть на екран наступний текст: „А це речення я зробив(ла) зеленого кольору, та розміром „2” за допомогою тега FONT”. В результаті має вийти таке:

 

 

4. У новому файлі створіть 6 записів і від форматуйте їх за допомогою тега FONT, використовуючи різні способи задання розміру шрифта. Наприклад: <font size = 7>Шрифт розміру 7 </font> і/або <font size = +4> Шрифт розміру 7 </font>.

 

 

 

5. Створіть наступний напис із буквицею:

 

 

 

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

7. Збережіть результати лабораторної роботи

 

Рівень ІІ

Створіть на веб-сторінці список з формули: вода - H₂O, сірчана кослота - H₂SO₄,  теорему Піфагора - AC²=AB²+BC². При виконанні завдання використовуйте різні підходи, нариклад: <p>H₂O</p>, а для зменшення індексу можна буде двійку взяти у середину тега SMALL

 

Лабораторна робота №5. Створення гіпертексту.

 

Короткі теоретичні відомості.

Гіпертекст (гіперпосилання або просто посилання) – це текст з особливими властивостями. Крім того, що він несе якусь інформацію, а натиснувши на ньому лівою кнопкою миші ми можемо перейти на іншу веб-сторінку чи інший веб-ресурс.

Для організації переходу всередині одного HTML-файла потрібно ввести необхідний текст в двох місцях: записати мітку в тому місці HTML-файла, куди необхідно перейти і записати перехід на цю мітку в тому місці, звідки буде потрібно виконати перехід. Для організації мітки використовують тег <А NAME = “МІТКА”></А>, де МІТКА – це будь-яке ім'я, що складається з букв англійського алфавіту і цифр. Для переходу на цю мітку слід використовувати тег: <А href = “МІТКА”>Текст</А>.

Для переходу з будь-якого місця HTML-файла h001.html на початок HTML-файла h002.html потрібно скористатися таким тегом: <А href = “h002.html”>Перехід до розділу h002</А>.

У будь-якому місці будь-якого HTML-файла можна ввести гіпертекстові посилання на інший веб-документ або html-файл. Гіпертекстові посилання вводяться в HTML-файл за допомогою уніфікованого локатора ресурсів - URL. Цей локатор визначає правила написання різних видів посилань:

 

URL	Функція
FTP://	Пересилання на сервер FTP
HTTP://	Посилання на об'єкт, який буде передаватися з використанням протоколу HTTP
GOPHER://	Посилання на сервер Gopher
MAILTO://	Посилання на електронну поштову адресу
NEWS://	Посилання на електронну конференцію
NNTP://	Посилання на сервер електронної конференції
TELNET://	Посилання на сервер електронної конференції

Для запису гіпертекстовогоо посилання на інші веб-сайти  використовують тег <А href = “URL-адрес”>Текст7</А>. При натисненні лівої кнопки миші на тексті Текст7 буде виконано перехід на веб-ресурс, що заданий в URL-адресі.

Графічне зображення (наприклад, IMAGE-файл, який має ім’я image.gif) теж може служити гіперпосиланням. Якщо Ви хочете організувати пересилання так, щоб при натисненні лівої кнопки миші на цьому зображенні, було здійснено перехід на домашню сторінку http://home.com, то це можна зробити так:

<А href = “http://home.com”> <img src = “image.gif”></A>

Якщо мова йде про електронні адреси е-мейл (скажімо, моя поштова адреса info@mail.ru., то для організації посилання в моїй домашній сторінці на мою поштову адресу необхідно записати в кінці головного розділу домашньої сторінки таке:

<А href = mailto: info@mail.ru> Моя пошта </А>

 

Завдання до лабораторної роботи №5.

 

1. Створіть новий html-файл WEB\pr5.html і організуйте гіперпосилання і переходи на html-файли своїх попередніх лабораторних робіт, протестуйте їх дію.

 

2. Проведіть горизонтальну лінію, зробіть запис „Пошукові системи світу” і створіть на них зовнішні гіперпосилання:

<a href = “http://www.google.com”>Google</a>

<a href = “http://www.yandex.ru”>Yandex</a>

<a href = “http://www.yahoo.com”>Yahoo</a>

<a href = ” http://www.meta.ua”>Meta-UA</a>

3. Відформатуйте тектст. Зробіть гіперпосилання червоним кольором, активні посилання - оранжевим, відвідані посилання – синім. Перегляньте збережену сторінку.

4. Проведіть зелену горизонтальну лінію. Створіть гіпер- посилання „Жовті сторінки Інтернету”, яке повинно пересилати на сайт www.yellowpages.com. За допомогою тега FONT зробіть гіпертекст жовтим. А також зробіть так, щоб при натисканні лівої клавіші миші на це посилання, сайт відкривався у новому вікні (команда target=_blank).

 

Лабораторна робота №6. Робота з таблицями в HTML.

 

Короткі теоретичні відомості.

Таблиця створюється тегом  <TABLE> … </TABLE>. Тег <TABLE> може мати наступні параметри:

UNITS – атрибут, що визначає задає одиниці вимірювання. Він може приймати одне з двох значень RELATIVE або PIXELS. За замовчуванням, UNITS = PIXELS.

BORDER – визначає межі і лінії, що розмежовують клітки всередині таблиці. Товщина лінії задається так: BORDER = N.

CELLPADDING – визначає мінімальний проміжок навколо вмісту таблиці. Наприклад, CELLPADDING = 3.

BGCOLOR – визначає колір забарвлення клітинок.

ROWSPAN і COLSPAN та команди <TR>, <TD> і <TH> використовуються для формування кліток даних, що об'єднують більше за один рядок або стовпець.

Тег <TR> ... </TR> утворює один рядок.

Тег <TD> ... </TD> утворює один стовпець.

Щоб утворити одну комірку потрібно записати наступне:

<table>

<tr>

<td> тут записують дані, що мають бути у клітині</td>

</tr>

</table>

Завдання до лабораторної роботи №6.

 

Рівень І

1. Створіть найпростішу таблицю, яка складається всього лиш з однієї комірки:

<table border = 1>

                             <tr>

                                <td>комірка 1</td>

                             </tr>

</table>

2. Додайте до таблиці ще одну комірку.

 

 

3. Створіть другий рядок  так, щоб утворилась таблиця розмірами 2 на 2 (див. рис.).

4. За допомогою заголовка підпишіть таблицю:

<table border=1>

                  <caption>Таблиця № 1</caption>

 

Рівень ІІ

5. Задайте колір фону таблиці (параметр bgcolor).

6. Зробіть рамку таблиці прозорою.

7. Створіть нову таблицю із заголовком Розклад занять:

 

 

 

8. Створіть таблицю розмірами 200 на 200 пікселів:

<table width=200 height=200>

...

</table>

9. Нижче створіть ще одну нову таблицю розмірами 300 на 150 пікселів і у ній створіть один рядок з трьома комірками:

 

 

10. За допомогою параметру align  розмістіть текст у комірках так, як показано на малюнку (<td align=left>…</td>).

Створіть наступну таблицю

11. Створіть ще одну нову таблицю з трьома рядками та двома стовпчиками, ширина таблиці 300 пікселів, фон таблиці – silver, товщина рамки –„0”. Заголовок таблиці – „Статистика продажу автосалону „German Auto”. У першому стовпчику вставти назви трьох іномарок (наприклад Mersedes, Wolksvagen, Audi). У першій комірці другого стовпчика вставте внутрішню таблицю з двома комірками та шириною і висотою 100%, встановіть колір першої комірки blue, а ширину 90%, другої 10%. У створеній синій комірці зробіть напис „90” і вирівняйте по правому краю. Аналогічно створіть ще 2 комірки і 2 стовпчика. Кінцевий результат має бути таким:

 

 

12. Створіть таблицю шириною 400 пікселів, кольором фону - #ff0000, товщиною рамки -1, внутрішнім відступом та відступом між комірками – 0. Вирівняйте дану таблицю по центру сторінки та створіть заголовок таблиці „Таблиця 1”.

 

13. В створеній таблиці додайте ще 4 комірки у першому рядку.

 

14. Задайте кожній комірці почергово наступні кольори фону:

 #ffee00                    #ffcc00       #ff9900         #ff6600         #ff4400

 

15. Скопіюйте код таблиці і вставте під нею.

16. У другій таблиці задайте коміркам значення кольорів фону:

#ff00ee           #ff0099        #ff0066          #ff0099        #ff00ee

 

17. Змініть товщину рамки таблиці на 0

18. Створіть нову web-сторінку, задайте їй фон за смаком, створіть таблицю з 3 рядків і 2 стовпчиків. В першому стовп-чику розмістіть по порядку 4 зображення (скачайте з Інтернету). Другий стовпчик об’єднайте в одну комірку (rowspan="4”).

 

 

19. Скопіюйте уривок тексту і вставте у щойно створену велику комірку. В кінець тексту впишіть своє прізвище та ім’я.

 

 

 

20. Збережіть результати лабораторної роботи.

 

ЛІТЕРАТУРА

 

1. Баженов В.А. та ін. Інформатика. Комп’ютерна техніка. Комп’ю-терні технології. – Київ, Каравела, 2004. – 464 с.
2. Білан Б.С., Карпович І.М. Інформатика та інформаційні технології. – Рівне, НУВГП, 2010. – 197 с.
3. Гладка О.М. Комп’ютерна техніка і програмування. Інтерактивний комплекс. Навчально-методичне забезпечення дисципліни. КМСОН процесу. – Рівне: НУВГП, 2006.
4. Глинський Я.М. Практикум з інформатики. – Львів, 2007.
5. Горобець С.М. Основи комп’ютерної графіки. Навчальний посібник. – Київ: ЦНЛ, 2006. – 232 с.
6. Дэйв Ши, Молли Е. Хольцшлаг. Философия CSS-дизайна. – М.: «НТ-Пресс», 2005.- 313 с.
7. Крис Джамса, Конрад Кинг, Энди Андерсон. Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. / Пер с англ. – М.: «ДиаСофтЮП», 2005.- 672 с.
8. Кэмпбел М. Строим Web-сайты. Дизайн. HTML. CSS. GARAGE. – М.: «Триумф», 2006. – 480 с.
9. Леонтьев Б. Web-дизайн: Тонкости, хитрости  и секреты. – М. «Познавательная книга», 1999. – 192 с.
10. Пройдаков Е. М., Теплицький Л. А. Англо-український тлумачний словник з обчислювальної техніки, інтернету і програмування. – Київ, Софт Прес, 2006, - 824 с.
11. Самойлов Е.Э. Web-дизайн для начинающих: Практическое рук-во. – М.: «Триумф», 2009.- 192 с.
12. Фролов И.К. Разработка, дизайн, программирование и раскрутка web-сайта. – М.: «Триумф», 2009.- 304 с.
13. Ярмуш О.В. Редько М.М. Інформатика та КТ. – К.: ВО, 2006.
14. Компьютеры  +  Программы. Популярный журнал о современ-ных информационных технологиях. - К.:, 2003 – 2013.
15. Мир ПК. Журнал для пользователей персональных компью-теров. - М.: открытые системи, 2003 – 2013.
16. Чип. Компьютерный журнал. - К.: ООО Софт Пресс, 2003 – 2013.
17. Короткий посібник по HTML. Автор: Kevin Werbach. – URL http://www.citforum.ru/internet/html/refer.shtml

Методична література

 

1. Методичні вказівки “Навчальний практикум з обчислювальної техніки” для студентів 1 курсу всіх спеціальностей УДУВГП Частина 1. Шифр 044-139 / Я.Я. Зубик, Л.В. Зубик, Т.А. Карпюк. – Рівне: УДУВГП, 2003. – 36 с.
2. Методичні вказівки та завдання до виконання лабораторних робіт з розділу "Розробка веб-сторінок" денної та заочної форм навчання НУВГП.044-151 / Кравчук Ю. О. – Рівне: НУВГП, 2006. – 40 с.
3. Методичні вказівки і завдання до виконання лабораторних робіт з дисципліни «Інтернет-технології та ресурси» студентами 3 курсу напряму підготовки 6.020105 «Документознавство та інформаційна діяльність». Шифр 044-167. / Білан Б.С., Карпович І.М.  – Рівне: НУВГП, 2013. – 26 с.
4. Методичні вказівки і завдання для самостійної роботи студентів 3 курсу напряму підготовки 6.020105 «Документознавство та інформаційна діяльність» з дисципліни «Інтернет-технології та ресурси». Шифр 044-168. / Білан Б.С., Карпович І.М.  – Рівне: НУВГП, 2013. – 24 с.
5. Методичні вказівки і завдання до виконання лабораторних робіт з дисципліни «Мережеві Web-технології» студентами 3 курсу напряму підготовки 6.030502 «Економічна кібернетика». 06-11-01 / Білан Б.С, – Рівне: НУВГП, 2013. – 28 с.
6. Методичні вказівки і завдання для самостійної роботи студентів 3 курсу напряму підготовки 6.030502 «Економічна кібернетика» з дисципліни «Мережеві Web-технології». 06-11-02 / Білан Б.С, – Рівне: НУВГП, 2013. – 24 с.
7. Методичні вказівки і завдання до виконання лабораторних робіт з дисципліни «Web-програмування» студентами 3 курсу напряму підготовки 6.030502 «Економічна кібернетика». 06-11-03 / Білан Б.С, – Рівне: НУВГП, 2013. – 28 с.
8. Методичні вказівки і завдання для самостійної роботи студентів 3 курсу напряму підготовки 6.030502 «Економічна кібернетика» з дисципліни «Web-програмування». 06-11-04 / Білан Б.С, – Рівне: НУВГП, 2013. – 28 с.
9. http://ukrbooks.com.ua/kniga878.html - підручник по HTML
10. http://uk.wikipedia.org/wiki/Оптимізація_для_пошукових_систем