Міністерство освіти і науки України

Машинобудівний коледж Сумського державного університету

Циклова комісія спеціальності 5.05010101

„Обслуговування програмних систем і комплексів”

КУРСОВА РОБОТА

З предмету _______“Web-технології та Web-дизайн”___________

Студента(ки) 4 курсу 411-ік групи

напряму підготовки 050101

«Інформатика та обчислювальна техніка»

спеціальності 5.05010101 .

.

Керівник .

.

Оцінка_____________________________________

Члени комісії ___________ ___________________

___________ ___________________

___________ ___________________

(підпис) (прізвище та ініціали)

м. Суми – 2015 рік

Міністерство освіти і науки України

Сумський державний університет

Машинобудівний коледж

Дисципліна: Web-технології та Web-дизайн

Спеціальність 5.05010101 “Обслуговування програмних систем і комплексів”

Курс________________Група __________________Семестр______________

Завдання на курсову роботу студента

__________________________________________________________________

(прізвище, ім’я, по батькові)

Тема роботи: Розробка електронного підручника на основі Web-технологій.

Дата видачі завдання “____”________________201__ р.

Дата закінчення роботи “____”________________201__ р.

Керівник _____________________ Ананченко Ю.М.

(підпис) (прізвище, ім’я, по батькові)

Завдання розглянуто на засіданні циклової комісії спеціальності 5.05010101

Протокол №________ від “____”____________201__р.

Голова циклової комісії ___________________ Овсянко А.М.

(підпис) (прізвище, ім’я, по батькові)

Зміст

1 Постановка задачі 3

2 Вступ 4

3 Теоретичні відомості 6

3.1. “Голова” документа 6

3.2. "Тіло" документа 6

3.3. Таблиці 7

3.4. Абзаци 9

3.5. Розмір шрифту 10

3.6. З'єднання з іншими документами 11

3.7. Фрейми 12

4. Карта сайту 15

5 Приклад тестування та результату роботи програми 16

Висновок 22

Література 23

ДОДАТОК А 24

1 Постановка задачі

Практичне завдання

Розробити та програмно реалізувати електронний підручник - з всесвітньої історії (частина 1).

Вимоги до програми

Створити шаблон засобами CSS для електронного підручника (випадаюче меню, позиціонування блоків, оформлення заголовків і тексту), розробити веб-сторінки, розмістити інформацію електронного підручника, створити складну систему навігації, додати інтерактивні елементи та динамічну зміну сторінок. Як окремий розділ створити тести для самоконтролю з можливістю вибору варіанту відповіді та перевірки його правильності.

2 Вступ

HTML, Hyper Text Markup Language, або, по-українськи, «мова розмітки гіпертексту », є фундаментальною, базовою технологією Інтернету. Не дивлячись на існуюче серед користувачів Всесвітньої мережі думка, що HTML є повнофункціональною мовою програмування, яка володіє практично всіма рисами, характерними для інших аналогічних мов.

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

HTML дозволяє формувати на сторінці сайту текстові блоки, включати в них зображення, організовувати таблиці, управляти відображенням кольору документа і тексту, додавати в дизайн сайту звуковий супровід, організовувати гіперпосилання з контекстним переходом в інші розділи серверу або звертатися до інших ресурсів Мережі і компонувати всі ці елементи між собою. Файли, що містять гіпертекстовий код, мають розширення .htm або .html.

HTML, Hyper Text Markup Language (мова розмітки гіпертексту) - мова, що використовується для створення документів в Інтернеті. HTML-документом називається файл, що містить код HTML. Такі документи є основним інформаційним наповненням web-вузлів, вони дозволяють відображати текст, графіку, аудіо та відеоінформацію, а також інші компоненти ресурсів Інтернету.

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

Гіперпосилання (Hyperlink) - базовий функціональний елемент html-доку-мента, що є реалізацією динамічного зв'язку якого-небудь об'єкту даної web-сторінки з контекстним вмістом іншого документа.

Щоб роз'яснити цей термін, приведу простий приклад. Припустимо, що створений вами html-документ включає текст, в якому зустрічається слово

«гіперпосилання », а докладне розкриття цього терміну приведено в іншому документі, розміщеному в Інтернеті незалежно від першого. Перетворивши дане слово в гіперпосилання і пов'язавши її з вказаним вище документом, ви організовуєте тим самим найпростіший гіперзвязок: користувачу, охочому ознайомитися із значенням терміну «гіперпосилання », достатньо клацнути мишею на цьому слові, щоб перейти до web-сторінки з відповідними поясненнями. Слід зазначити, що як гіперпосилання може використовуватися як елемент текста, так і графічний об'єкт, а сам гіперзвязок можна встановлювати як між декількома документами, розташованими на одному фізичному сервері, так і з об'єктами, розміщеними на різних вузлах Інтернету.

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

Це слідує мати у вигляді, складаючи HTML-програму, оскільки можна ненароком пропустити «непомітну » помилку і виявити її наявність вже тоді, коли сторінка буде опублікована в Web.

3 Теоретичні відомості

3.1. “Голова” документа

Для оголошення назви сторінки служать команди:

<HEAD><TITLE> текст </TITLE></HEAD>

Назва - необов'язкова частина в документі, але окрім відображення в заголовку браузера імені сторінки, може включати необмежену кількість дуже корисних META-інструкцій. Звичайно вони розташовуються між двома першими мітками <head> і <title>. META-інструкція цей стандартний опис теми документа(для пошукових систем) або ж пряма вказівка для браузера. Приклад:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html"> - інструкція дає вказівку браузеру інтерпретувати документ як HTML-текст (кодування сучасні браузери розпізнають автоматично, тому використовувати в метах параметр charset більше не рекомендується.)

Простір між закриваючими мітками </title> і </head> часто використовується для зберігання операторів JavaScript и VBScript <scripts.htm> використовуючих глобальні змінні і функції, а також при упровадженні Каскадных таблиц стилей <style.htm> або для оголошення скажемо нестандартного розміру шрифту сторінки за допомогою тега <basefont size="5">

3.2. "Тіло" документа

Основний текст сторінки знаходиться після необов'язкового заголовка, між так само необов'язковими мітками: <BODY>...тіло сторінки...</BODY>.(Сучасні браузеры самі розпізнають де кінчається заголовок і починається тіло документа... але ми, дотримуватимемо традиції побудови web сторінок)

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

<BODY BGCOLOR=GREEN> - зелений колір сторінки; або

<body background=Image.gif> для використовування як шпалери, фонового малюнка, наприклад з ім'ям Image.gif

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

<body bgcolor="red" background="fon.jpg" bgproperties="fixed">

В даному прикладі ще до завантаження фонового зображення (fon.jpg) сторінка матиме червоний колір (підбирається в тон фонової картинки, адже зображення може мати великий час завантаження, а може і зовсім не завантажитись при поганому зв'язку.

3.3. Таблиці

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

<TR> -Новая рядок для необмеженого числа елементів таблиці.

< TH > -Ячейка для заголовків.

<TD> -Ячейка для звичайного тексту.

ROWSPAN - задає кількість осередків з'єднаних в колонку, COLSPAN - теж, в строчку. (З об'єднанням доведеться потренуватися: при об'єднанні, осередки, що залишилися(з'єднані в одну), повинні бути пропущені тобто якщо ви оголосили, що сполучаєте 6 осередків в рядку, наступний тег осередки вноситиме дані відразу в сьомий осередок цього рядка. Теж і з колонками.)

Складніший приклад:

<CENTER> <TABLE BORDER="15" BGCOLOR="YELLOW" width="75%">

<TR> <TH> rowspan="2">

В першому рядку осередків в колонку з'єднано 2 осередки заголовків. В другому рядку таблиці тег першого осередку повинен бути пропущений.

<TD bgcolor="lime"> <img src="lego.gif">

<TD>3 осередок першого рядка

<TR> <TD colspan="2">

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

</TABLE></CENTER>

Дає на екрані:

"BGCOLOR" – кольор фона- можна використовувати як для таблиці в цілому,так і для кожного осередку окремо. Це відноситься і до можливості

використовування як фон графічного файлу. Наприклад: <TD BACKGROUND="Image.jpg"> Таблиці автоматично розтягуються залежно від вмісту, але також можливе і оголошення їх розмірів. WIDTH - ширина таблиці

можна у відсотках, можна в пікселях. HEIGHT-висота.(теж і до осередків)

Також таблицею можуть управляти атрибути CELLPADDING="n" - визначає відступ від вмісту усередині осередків, і CELLSPACING="n" -ширина меж між осередками -все в пікселях. (Значення BORDER проте визначає, будуть межі присутній взагалі.)

Залишається додати, що таблиця як і картинки має можливість обтікання текстом (відносного вирівнювання) при використовуванні властивості ALIGN в теге TABLE з параметрами left, right Наприклад:

<table width="100" align="right" bgcolor="lime" cellpadding="20">

<tr> <td> 1 <th><font color="blue"> 2 </font>

<tr> <td bgcolor="red"> 3 <td> 4

</table>