Завдання до роботи

Лабораторна робота

Створення WEB-сторінок

Мета роботи

Сформувати у студентів практичні навички створення WEB-сторінок.

Завдання до роботи

· Вивчити необхідний теоретичний матеріал.

· Виконати практичне завдання до лабораторної роботи.

· Відповісти на контрольні теоретичні запитання.

· Оформити звіт, який містить завдання до лабораторної роботи та вказівки для його

виконання.

Оцінювання роботи.

 Максимальну кількість балів за лабораторну роботу студент може одержати, якщо лабораторна робота

здається вчасно (на парі з відповідної теми або не пізніше, ніж упродовж двох тижнів після цієї пари, якщо пара

пропущена з поважної причини).

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

тиждень після закінчення відповідного модуля, студент може одержати не більше 75% від максимальної кількості

балів за дану роботу.

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

може одержати не більше 60% від максимальної кількості балів за дану роботу.

 Після закінчення семестру лабораторна робота захищається лише в період перескладання екзаменаційної

сесії.

І. Теоретико-практична частина

Перед виконанням роботи створіть у власному каталозі підкаталог HTML, в який надалі

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

Для ОС Windows XP. Створивши папку HTML увійдіть до неї, викличте вікно її властивостей

(“Сервис / Свойства папки / Вид”) та переконайтеся, що скинуто прапорець “Не показывать

расширения для зарегистрированных типов файлов” (в противному випадку редактор „Блокнот”

може автоматично додати в кінець імені файлу розширення.ТХТ).

Поняття про Web-документи. Створення найпростішої Web-сторінки.

Web-документи зберігаються і пересилаються як текстові файли з розширенням htm чи html

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

моніторі зовсім інакше, ніж вони виглядають у файлі. Для відображення html-файлів використовують

спеціальні програми, які називають браузери.

Фізико математичний факультет, кафедра Інформатики і ОТ

Web-документ, який ми бачимо на екрані браузера, називають web-сторінкою. Бажано, щоб

web-сторінка поміщалась на одній-двох екранних сторінках і використання вертикального скролінгу

було мінімальним. Додаткову інформацію користувач має читати на інших сторінках, користуючись

гіперпосиланнями.

Декілька web-документів на одну тему, що є на деякому комп'ютері чи належать одному

власникові, утворюють web-вузол (інший термін – web-сайт ).

Простий web-документ складається з текстових блоків (короткі текстові абзаци, списки,

таблиці), двох-трьох рисунків невеликих розмірів, горизонтальних ліній та гіперпосилань.

Більш складні web-документи містять фрейми – рамки, в яких одночасно відображаються різні

сторінки; елементи керування – кнопки, перемикачі, поля діалогу; динамічні ефекти та графічні

рухомі об’єкти ActiveX чи Flash.

Створюючи web-документ, потрібно стежити, щоб обсяг усіх його файлів, зокрема, графічних і

відеододатків був невеликим. Великі файли браузер іноді зчитує надто довго. Тому перед тим як

вставити у свою web-сторінку графічний, звуковий чи відеофайл або клацнути у чужій web-сторінці

на звуковому чи відеопосиланні, варто взяти до уваги пропускну спроможність наявної лінії зв’язку.

Для створення web-сторінок використовується мова HTML – Hyper Text Markup Language

(мова для розмічування гіпертекстових документів). Деякі редактори, такі як FrontPage, MS Word

тощо, дають змогу створювати web-сторінки методом конструювання, тобто за допомогою готових

об’єктів не відображуючи явно коди мови HTML. Вони генерують цей код автоматично.

Команди мови HTML називаються тегами. Теги записують у кутових дужках. Вони бувають

одинарними і парними. Більшість тегів парні, як, наприклад, тег означення html-файлу:

< HTML>... < /HTML>

Такі парні теги називаються інакше контейнерами. Контейнер може містити текст та інші

теги. Парні теги позначають початок і кінець області дії відповідної команди. Кожному відкритому

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

закриває область дії відповідної команди.

Тег може містити параметри, які користувач записує у першому блоці тегу через пропуск,

наприклад,

< BODY TEXT=" red" BGCOLOR=#FF37A9>...< /BODY>

Як можна бачити на прикладі, нечислові значення параметрів прийнято записувати у лапках.

Домовимось надалі всі значення параметрів записувати в лапках. Таким чином, попередній приклад

потрібно буде записати у вигляді:

< BODY TEXT=" red" BGCOLOR=" #FF37A9" >...< /BODY>

2

Фізико математичний факультет, кафедра Інформатики і ОТ

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

називають елементом, наприклад, елемент BODY тощо.

Вправа 1. Створення найпростішої Web-сторінки

1. Запустіть текстовий редактор для (ОС Windows - Блокнот; для ОС Linux KWriter).

2. Введіть наступний документ:

< HTML>

< HEAD>

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

< /HEAD>

< BODY>

Зміст

документа

< /BODY>

< /HTML>

3. Збережіть цей документ під іменем first.html.

4. Запустить будь-який браузер.

5. В рядку адреси введіть шлях до файлу first.html, для його відкриття.

6. У випадку якщо текст документу є нечитабельним додайте до області заголовку документу (між

тегами < HEAD>...< /HEAD>) один з наступних тегів, що буде встановлювати формат шрифту

документу:

для ОС Windows - < META http-equiv=" Content-Type" content=" text/html; Charset=windows-

1251",

для ОС Linux - < META http-equiv=" Content-Type" content=" text/html; Charset=utf-8" >.

7. Подивіться, як відображається цей файл – найпростіший HTML-документ. Де відображається

вміст елемента TITLE? Де і як відображається вміст елемента BODY?

8. Як відображаються слова «Зміст» і «документа», введені у двох окремих рядках? Чому?

Перевірте, що відбувається при зменшенні ширини вікна.

Тег Призначення Примітка

< HTML> Означення html-файлу Парний

< BODY параметри> Текст сторінки Парний

< TITLE> Заголовок Windows-вікна Парний

<! — текст —> Коментар Непарний

3

Фізико математичний факультет, кафедра Інформатики і ОТ

Вправа 2. Прийоми форматування абзаців

1. Відкрийте документ first.html у текстовому редакторі.

2. Видалите весь текст, що знаходиться між тегами < BODY> і < /BODY>.

3. Після тегу < BODY> введіть заголовок тексту (заголовок першого рівня), розмістивши його між

тегами < H1> і < /H1>.

4. Введіть підзаголовок тексту (заголовок другого рівня), розмістивши його між тегами < H2> і

< /H2>.

5. Введіть окремий абзац тексту, почавши його з тегу < Р>. Пропуски можна використати всередині

абзацу довільно. Вставте тег < BR>.

6. Введіть принаймні ще одне речення. Закінчіть абзац тегом < /P>.

7. Введіть тег горизонтальної лінійки < HR>.

8. Введіть ще один абзац тексту, розмістивши його між тегами < Р> та < /P>.

9. Збережіть цей документ під іменем paragraph.html, використовуючи пункт меню „Файл /

Сохранить как…”.

10. Подивіться, як відображається цей файл. Для цього запустіть його для перегляду в браузер

(подвійним клацанням лівою кнопкою миші на файлі або клавішею „Enter”). Встановіть

відповідність між елементами HTML-коду і фрагментами документа, що відображаються на

екрані.

11. Внесіть наступні зміни до файлу. Заголовок першого рівня розташуйте між тегами < CENTER>...

< /CENTER>, а заголовок другого рівня – між тегами < DIV ALIGN=”RIGHT”>... < /DIV>.

Збережіть змінений документ на диску, використовуючи пункт меню „Файл / Сохранить” та

закрийте текстовий редактор.

12. В браузері оберіть пункт меню „Вид / Обновить” (або скористайтесь відповідною кнопкою панелі

інструментів чи кнопкою F5 клавіатури). Порівняйте як змінився вигляд документу.

Тег Призначення Примітка

< Н1> Заголовок 1 рівня Парний

.........

< Н6> Заголовок 6 рівня Парний

< Р> Початок нового абзацу. Наступне речення після

тега < Р> починатиметься з нового абзацу без

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

абзацами буде порожній рядок.

Парний

< BR> Наступний за цим тегом текст буде виведено у

новому рядку без пропуску рядка

Непарний

< HR> У рядку буде проведена горизонтальна лінія Непарний

< CENTER> Вирівнювання по центру тексту або лінії Парний

4

Фізико математичний факультет, кафедра Інформатики і ОТ