Вступ

World Wide Web, або Всесвітня павутина WWW, складає основну компоненту глобальної компютерної мережі Інтернет. Важко знайти сферу суспільного життя, на яку б не вплинули виникнення і розвиток WWW, роком народження якого вважається 1989. У цьому році була винайдена мова, яка стала основною мовою web-документів. Це HTML (Hyper Text Markup Language). HTML складає основу технології гіпертексту. HTML не є власне мовою програмування, а є засобом опису структури документа, його стилю і звязків з іншими документами. Створення мови HTML, протоколу HTTP, web-серверу, броузера та системи адресації URL є базою розвитку WWW. Розширення аудиторії користувачів стимулювало розвиток змісту WWW : почали виникати web-сайти найрізноманітнішої тематики. Створення web-сайтів, їх підтримка та розвиток здійснюються за допомогою спеціалізованого програмного забезпечення.

Мета лабораторних робіт – навчитися створювати web-сторінки (на прикладi вашої домашньої web-сторінки), застосовуючи HTML. Дана сторінка буде вашою візитною карткою, засобом спілкування або презентацією, яку можна виготовити самому. Нерідко це перша спроба веб-дизайнерського пера, за якою потім зявляються інші, кращі, професіональніші. І завжди це — засіб самовираження.

Взагалі, HTML-код як будь-який текстовий документ можна створювати у будь-якому текстовому редакторі, навіть у “блокноті” (тобто MS NotePAD). Блокнот Windows – найулюбленіший редактор веб-дизайнерів. Поважають його, головним чином, за простоту, доступність, компактність.

Поради при створенні Web-сторінки

1. Потрібно звернути увагу на простоту та логічність розміщення інформації на ваших сторінках. Один із способів зробити інформацію більш легкою для сприйняття — залишити на сторінці достатньо вільного місця. Сторінка, що містить багато інформації, лише злякає відвідувача.

2. Спробуйте представити інформацію у вигляді списків або таблиць так, щоб можна було достатньо легко знайти найбільш важливі відомості.

3. Не розміщуйте одне зображення відразу за іншим. Намагайтеся розподілити їх по документу, залишивши достатньо вільного простору.

4. Інформація повинна розміщуватися частинами, легкими для сприймання. Зверніть увагу на довжину абзаців. Якщо абзац занадто довгий, розбийте його на декілька невеликих.

5. Якщо Web-сторінка має великий обєм, то, можливо, вам треба вставити гіперпосилання, що дозволяють користувачу швидко переміщуватися між частинами одного документа. Іноді має сенс замість одного довгого документа підготувати одну сторінку, котра містить перелік тем, кожну з яких слід розкрити на окремій Web-сторінці і встановити гіперпосилання на відповідні сторінки.

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

Перед тим, як помістити на сервер свої Web-сторінки, необхідно їх протестувати. Створені документи повинні пройти “локальну перевірку” у межах вашого жорсткого диска. При перевірці використовуйте різні броузери. При тестуванні варто виконати такі дії:

1. Перевірити правопис. Виконати автоматизовану перевірку правопису тексту.

2. Перевірити навігацію. Впевнитися, що усі гіперпосилання працюють правильно.

3. Перевірити доступ до зовнішніх файлів. Повинен бути правильно вказаний шлях до графічних, звукових та відеофайлів. Для неграфічних броузерів потрібно задати підміняючі текстові повідомлення.

4. Перевірити час завантаження Web-сторінки.

5. Виконати перевірку ваших Web-сторінок сторонньою особою. При цьому іноді виявляються такі факти, яких ви раніше не помічали.

Завдання до лабораторних робіт

Створити Web-сторінки, які висвітлюють наступну інформацію: автобіографію, вашу наукову діяльність, розповідь про друзів, про ваші уподобання, інтереси. Вони повинні бути пов’язані між собою гіперпосиланнями, а також мають бути гіперпосилання на них із головної Web-сторінки. На сторінці, де розповідається про наукову роботу, створити посилання, що ведуть на задані місця поточної сторінки. Це дозволить швидко переміщуватися між частинами даного документа. Для оформлення використати графіку і фото, різноманітні стилі й формати тексту. Структура сайта може бути такою (рис. 1):

Рис. 1. Структура сайта

Лабораторна робота №1 Простий документ html. Форматування тексту

Перший тег, який повинен знаходитися у будь-якому HTML-документі, — це <HTML>. Він вказує на те, що даний документ дійсно містить у собі HTML-текст. Все, що ви напишете у своєму документі, має знаходитися всередині даного тега:

<HTML>

…

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

…

</HTML>

Заголовок міститься всередині тега <HEAD> ...</HEAD>:

<HTML>

<HEAD>

...

Заголовок тексту

...

</HEAD>

...

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

...

</HTML>

У розділі заголовка вказується заголовок документа, для цього використовується тег <TITLE>…</TITLE>. Наприклад:

<HTML>

<HEAD>

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

</HEAD>

...

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

...

</HTML>

Весь останній HTML-документ, включаючи весь текст, міститься всередині тега <BODY>…</BODY>. Тепер документ виглядатиме ось так:

<HTML>

<HEAD>

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

</HEAD>

<BODY>

...

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

...

</BODY>

</HTML>

Загальні відомості про документ розміщуються у тегах <META>. Наприклад:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

• Windows –1251 — кодування для російської мови в операційній системі Windows.

• Koi8-r — кодування для російської мови в операційній системі Unix.

Завдання 1. Створення найпростіших файлів HTML.

1. Запустити програму Блокнот (Notepad).

2. Наберіть у вікні редактора простий текст файла HTML:

<HTML>

<HEAD>

<TITLE> Навчальний файл HTML</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</HEAD>

<BODY>

Розклад занять на вівторок

</BODY>

</HTML>

3. Для перегляду створеної Web-сторінки загрузіть броузер Microsoft Internet Explorer.

Завдання 2. Деякі спеціальні команди форматування.

Існують спеціальні команди, що задають переміщення рядків униз <BR>, а також початок нового абзацу <P>.

1. Внесіть зміни у ваш попередній файл.

<HTML>

<HEAD>

<TITLE> Навчальний файл HTML</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</HEAD>

<BODY>

<P> Розклад </P>

<BR> занять <BR>

на вівторок

</BODY>

</HTML>

Завдання 3. Виділення фрагментів тексту.

1. Внесіть зміни у ваш попередній файл.

<HTML>

<HEAD>

<TITLE> Навчальний файл HTML</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</HEAD>

<BODY>

<B> Розклад </В><I>

занять </I> <U>

на вівторок </U>

</BODY>

</HTML>

Можна використовувати комбіновані виділення текстів, наприклад:

.............

<I><В> Розклад </В></I> <I> занять

</I> <U> на вівторок </U>

............

Але при цьому необхідно памятати таке правило запису комбінованих тегів:

<тег-1><тег-2>...</тег-2></тег-1> — правильний запис;

<тег-1><тег-2>...</тег-1></тег-2> — неправильний запис.

Завдання 4. Використання стилів заголовка.

Використовується шість тегів заголовків (від <H1> до <H6>). Кожному тегу відповідає конкретний стиль, заданий параметрами настроювання броузера.

<HTML>

<HEAD>

<TITLE> Навчальний файл HTML</TITLE>

</HEAD>

<BODY>

<P><H1> Розклад </Н1></P><BR>

<H2><I> занять </I><U> на вівторок </U></H2>

</BODY>

</HTML>

Завдання 5. Установлення розміру поточного шрифту.

Тег шрифту <FONT> дозволяє задати розмір поточного шрифту в окремих місцях тексту у діапазоні від 1 до 7.

<HTML>

<HEAD>

<TITLE> Навчальний файл HTML</TITLE>

</HEAD>

<BODY>

<FONT SIZE="7"> Розклад </FONT>

занять на вівторок

</BODY>

</HTML>

Завдання 6. Встановлення гарнітури і кольору шрифту.

Тег <FONT> дає можливість управляти розміром, гарнітурою і кольором тексту. Зміна гарнітури виконується простим доповненням до тега <FONT>, атрибута FACE. Наприклад, для зображення тексту шрифтом Arial необхідно записати: <FONT FACE= ARIAL>.

Для зміни кольору шрифту у тег <FONT> додають атрибут COLOR=X. Замість X потрібно підставити або назву кольору (у лапках), або його шістнадцятирічне значення (формат RGB). Приклади запису кольору у форматі RGB наводимо у таблиці 1.

Таблиця 1

Колір	RBG	Колір	RBG
Black чорний	000000	Purple бордовий	FFOOFF
While білий	FFFFFF	Yellow жовтий	FFFFOO
Red червоний	FFOOOO	Brown коричневий	996633
Green зелений	OOFFOO	Orange оранжевий	FF8000
Azure бірюзовий	OOFFFF	Violet фіолетовий	8000FF
Blue синій	OOOOFF	Gray сірий	АОАОАО

1. Внесіть зміни у ваш попередній файл.

<HTML>

<HEAD>

<TITLE> Навчальний файл HTML </TITLE>

</HEAD>

<BODY>

<U><I><B><FONT COLOR="#FFOOOO" FACE="ARIAL"

SIZE="7">

Розклад </FONT></B></I></U>

занять на вівторок

</BODY>

</HTML>

2. Самостійно змінити розмір, колір, гарнітуру, стиль тексту.

Завдання 7. Вирівнювання тексту по горизонталі.

Вирівнювання тексту виконується за допомогою атрибута ALIGN у тезі <P>.

Внесіть зміни у ваш файл.

<HTML>

<HEAD>

<TITLE> Навчальний файл HTML</TITLE>

</HEAD>

<BODY>

<P ALIGN="CENTER">

<FONT COLOR="#008080" SIZE="7">

<B> Розклад </B></FONT><BR>

<FONT SIZE="6"><I>занять на вівторок </I>

</FONT>

</Р>

</BODY>

</HTML>

Завдання 8. Встановлення кольору фону і тексту.

При зображенні фону і тексту броузери використовують кольори, встановлені за замовчуванням, — вони задані параметрами налаштування броузера. Якщо ви хочете задати інші кольори, то це потрібно зробити на початку файла HTML у тезі <BODY>. Атрибут BGCOLOR визначає колір фону сторінки, TEXT — колір тексту для всієї сторінки, LINK та VLINK визначає колір відповідно невідвіданих і відвіданих гіперпосилань (останні два параметри розглянемо пізніше).

<HTML>

<HEAD>

<TITLE> Навчальний файл HTML</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFCC" TEXT="#330066">

<P ALIGN="CENTER">

<FONT COLOR="#008080" SIZE="7">

<B> Розклад </B></FONT><BR>

<FONT SIZE="10"><I>занять на вівторок </I>

</FONT>

</P>

</BODY>

</HTML>