Основні елементи Web-сторінки

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

ДО САМОСТІЙНОЇ РОБОТИ З КУРСУ

ІНФОРМАТИКА І КОМП’ЮТЕРНА ТЕХНІКА».

ОСНОВИ HTML.

(для студентів напряму підготовки «Менеджмент»

денної форми навчання)

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

ДОНБАСЬКА НАЦІОНАЛЬНА АКАДЕМІЯ БУДІВНИЦТВА ТА АРХІТЕКТУРИ

Кафедра вищої і прикладної математики та інформатики

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

до самостійної роботи з курсу
«Інформатика і комп’ютерна техніка»

Основи HTML

(для студентів напряму «Менеджмент»

денної форми навчання)

Макіївка 2010 р.

УДК 681.3 (07)

Методичні вказівки до самостійної роботи з курсу «Інформатика і комп’ютерна техніка». Основи HTML (для студентів напряму «Менеджмент організацій» денної форми навчання) / Уклад. Копичко О.М., Глухов В.О. – Макіївка, ДонНАБА, 2010. – 48 с.

Методичні вказівки містять теоретичні відомості та тексти програм на мові HTML до курсу «Інформатика і комп’ютерна техніка».

Укладачі: О. М. Копичко, к.ф.-м.н., доцент

В. О. Глухов, к.ф.-м.н., доцент

Рецензент: В.О. Моісеєнко, к.ф-м.н., доцент

Рецензент: І.Г. Гевлич, к.ф-м.н., доцент

Відповідальний за випуск В.М. Левін, д.т.н., професор

Зміст

Вступ···························································································4

§ 1. Адресація Web-сторінок······························································4

§ 2. Основні синтаксичні елементи HTML···········································6

§ 3. Основні елементи Web-сторінки··················································8

§ 4. Форматування тексту································································9

4.1 Рядки і абзаци. Дескриптори < P> і < BR> ······································9

4.2 Заголовки. Контейнер < H> ······················································11

4.3 Форматування тексту за допомогою контейнерів фізичних стилів······13

4.4 Форматування тексту за допомогою контейнерів логічних стилів·······14

4.5 Зміна розміру шрифту. Дескриптори FONT і BASEFONT·················15

4.6 Виділення цитат. Контейнер < BLOCKQUOTE> ·····························17

4.7 Використання попередньо відформатованого тексту. Контейнер < PRE> ························································································18

4.8 Створення горизонтальних ліній. Дескриптор < HR> ······················19

§ 5. Гіпертекстові посилання. Контейнер < A> ····································22

§ 6. Використання графіки та кольору···············································30

6.1 Способи завдання кольору·······················································30

6.2 Зміна кольору тексту та фону. Атрибути TEXT, COLOR, BGCOLOR, LINK, ALINK, VLINK, BACKGROUND············································31

6.3 Вставка зображень. Дескриптор < IMG> ·······································32

§ 7. Списки. Контейнери < UL>, < OL>, < MENU>, < DIR>, < DL>, < DT>, < DD> ·························································································36

§ 8. Таблиці················································································41

8.1 Структура таблиці··································································41

8.2 Контейнер завдання таблиці < TABLE> ·······································42

8.3 Контейнер завдання рядку < TR>, < TD>, < TH> ·····························43

8.4 Контейнер завдання комірок < TD>, < TH> ···································43

Список літератури···············································································48

Вступ

Історія HTML (а разом з ним і WWW) почалася в кінці 1980‑ х років, коли у вчених з Європейської лабораторії елементарних часток (CERN) виникла необхідність обмінюватися різними документами за допомогою мережі Інтернет. Розв’язок цієї проблеми був знайдений у 1989 році співробітником CERN Бернерс‑ Лі, який на основі мови SGML створив HTML (HyperText Markup Language). Він же і реалізував першу програму для перегляду HTML‑ документів – браузер. Ідея з гіпертекстом дуже швидко була сприйнята і незабаром в Інтернеті була створена мережа гіпертекстових документів, яку назвали World Wide Web.

У сучасному світі високих технологій є нормою мати власну Web-сторінку. Це дозволяє рекламувати власну продукцію чи послуги, повідомляти інформацію про себе, шукати і знаходити роботу, обмінюватися повідомленнями. Для створення Web-сторінки можна скористатися послугами професіоналів, однак цікавіше створювати такі сторінки за власним смаком, використовуючи власну фантазію і здібності.

Для створення Web-сторінок необхідно знати мову гіпертекстової розмітки (Hyper Text Markup Language, HTML). Простота цієї мови робить її доступною для широкого кола користувачів.

§ 1. Адресація Web-сторінок

Будь-які інформаційні ресурси в комп’ютерних мережах зберігаються на спеціальних комп’ютерах-серверах. Існує декілька різновидів таких серверів, що різняться між собою за способом зберігання, обробки і передачі інформації. Web-сторінка представляє собою файл, який зберігається на комп’ютері. Як правило – це Web-сервер. Для перегляду Web-сторінки використовуються браузери – програми для перегляду гіпертекстових сторінок. Прикладами таких програм є Internet Explorer, Opera, Mozilla і т.п.

Будь-яка Web-сторінка, представлена в мережі, повинна мати свою адресу (Uniform Resource Locators - URL). Ця адреса вказана в адресному рядку браузера і пересилається комп’ютером користувача на відповідний Web-сервер. Відшукавши за вказаною адресою відповідний файл, Web-сервер відсилає його на комп’ютер користувача. Браузер комп’ютера користувача відображає вміст цього файлу у відповідності з присутніми в цьому файлі правилами розмітки тексту.

Адреса, яка вказується в адресному рядку браузера, має наступний вигляд:

scheme: //host: port/шлях_до_файлу/ім’я_файлу

Тут scheme – визначає протокол, який використовується для передавання файлу, після цього параметра стоять дві крапки. Наприклад:

http – використовується протокол передавання гіпертексту;

ftp – використовується протокол обміну файлами, зазвичай використовується

для зв’язку з ftp-серверами;

mailto – використовується набір протоколів для електронної пошти;

news - використовується протокол для організації телеконференції або передавання розсилання новин;

telnet - використовується протокол для організації діалогової сесії.

Всі згадані тут протоколи є частиною протоколу інтернету TCP/IP:

Host – адреса комп’ютера-сервера, на якому зберігається інформація;

Port – десятичне число, яке означає порт (логічну адресу), за котрим здійснюється передача інформації;

шлях_до_файлу/ім’я_файлу – вказує ім’я файлу, який передається, і повний шлях до нього. Якщо параметр ім’я_файлу відсутній, то передається файл, визначений за умовчанням. Зазвичай файлом за умовчанням призначається файл index.htm чи main.htm.

Адреса комп’ютера складається з декількох частин:

ім’я_комп’ютера.ім’я_підмережі1.ім’я_підмережі2. …

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

Приклад 1.1

Ru – домен, що поєднує комп’ютери-сервери, розташовані на території Росії;

Ua – на території України;

Com – мережа, яка містить інформацію комерційного характеру;

Edu – мережа учбових закладів;

Gov – державні організації;

Org – некомерційні організації;

Net – провайдери Інтернет.

В прикладі 1.2 наведені адреси комп’ютерів всесвітньої мережі.

Приклад 1.2

www.ru – основний оглядач домену.ru;

www.mail.ru – сервер суспільної поштової служби;

www.rambler.ru – пошуковий сервер;

www.ukr.net – сервер одного з провайдерів України;

www.donbass.net – сервер провайдера (Донецька область).

Питання для самоперевірки

1. Які програми використовуються для перегляду Web-сторінок. Приклади.

2. Що необхідно для ідентифікації Web-сторінки в мережі.

3. Які протоколи використовуються для передачі даних.

4. Якщо в URL-адресі відсутнє ім’я файлу, то який файл передається за умовчанням.

5. Які домени характеризують тип організації або країну. Приклади.

6. Наведіть приклади пошукових серверів.

§ 2. Основні синтаксичні елементи HTML

Будь-який гіпертекстовий документ представляє собою текстовий файл. Це значить, що для його створення і редагування може бути використаний такий текстовий редактор, як, наприклад, Notepad в системі Windows. Для того, щоб файл, який містить гіпертекст, переглядався одним з браузерів автоматично, він повинен мати розширення htm чи html. Такий файл може містити символи стандартів ISO Latin 1 (кодування ISO 8859-1), ISO 10646 і Unicode.

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

Дескриптори. Основною синтаксичною одиницею мови гіпертекстової розмітки є дескритпор (tag). Дескриптори вміщуються в кутові дужки (< >) – знаки «більше» і «менше». Слід звернути увагу, що кутові дужки, які входять до будь-якого дескриптора, є парними, тобто за відкриваючою дужкою обов’язково повинна бути присутньою закриваюча дужка. В дужках вказується ім’я тегу. Тег може містити один чи декілька атрибутів.

Існує два типи дескрипторів: одиночні дескриптори і контейнери. Контейнер – це дескрипторна пара, яка складається з відкриваючого і закриваючого дескрипторів. Закриваючий дескриптор відрізняється від відкриваючого тим, що перед іменем дескриптора стоїть символ “/”. В прикладі 2.1 наведені одиночні дескриптори і контейнери.

Приклад 2.1

< P> - одиночний дескриптор, який означає початок нового абзацу;

< BR> - одиночний дескриптор, що означає початок нового рядка;

< H1> текст заголовка < /H1> - контейнер, який означає конструкцію, що містить заголовок;

<! коментар > - одиночний дескриптор, який містить коментар;

<! - текст коментарію --> - дескриптор, що містить коментар, який може займати декілька рядків.

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

Атрибути. Елементи можуть містити параметри, які називаються атрибутами. Атрибути можуть бути встановленими за умовчанням або автором веб-сторінки. Пара атрибут/значення вказуються в початковому дескрипторі елементу перед символом >. Наприклад, < BODY bgcolor = «#FF0000»>. Тут вказаний атрибут bgcolor в елементі BODY, завдяки якому колір сторінки буде червоний. В початковому дескрипторі може бути вказано декілька атрибутів, розділених пробілом, причому порядок їх запису не має значення. Важливим моментом HTML є використання вкладених елементів. Елемент, який знаходиться всередині іншого елементу, називається вкладеним. Наприклад, задамо нарис шрифту < I> Курсив< B> -Полужирный курсив-< /B> Курсив< /I>. При використанні вкладеності слід пам’ятати, що вкладені елементи закриватися до того, як будуть закритими зовнішні елементи.

Питання для самоперевірки.

1. Яке розширення мають файли Інтернету.

2. Що є основною синтаксичною одиницею мови HTML.

3. Де можна редагувати Web-сторінку.

4. Які типи дескрипторів існують. Їх відмінності.

5. Як на мові HTML позначаються коментарі.

6. Чим відрізняються дескриптори < BR> і < br>.

Основні елементи Web-сторінки

Усі Web-сторінки повинні мати загальну структуру. В прикладі 3.1 описані обов’язкові елементи структури будь-якої Web-сторінки.

Приклад 3.1

< HTML>

< HEAD>

< TITLE> назва сторінки < /TITLE>

< /HEAD>

< BODY>

вміст сторінки

< /BODY>

< /HTML>

З цього прикладу видно, що весь файл з точки зору синтаксису є контейнером HTML, котрий містить в собі контейнер HEAD, який містить контейнер TITLE і контейнер BODY.

Контейнер TITLE містить назву сторінки, що відображене як заголовок вікна браузера. Ім’я документу в елементі TITLE використовується браузерами й іншими програмами, слугує засобом пошуку, що повертається.

Контейнер HEAD, окрім контейнера TITLE, може містити наступні елементи:

- елемент ISINDEX (використовується рідко);

- елемент BASE (задає точну базову адресу посилань на URL);

- елемент META (задає різну метаінформацію на кшталт дати закінчення терміну документа);

- елемент LINK (задає метаінформацію про зв’язки документа з іншими документами);

- елементи STYLE і SCRIPT.

Контейнер BODY містить в собі власне текст Web-сторінки. Початковий дескриптор цього контейнера може містити ряд атрибутів:

- BGCOLOR - фоновий колір документа;

- TEXT - колір для тексту документа;

- LINK - колір для не відвіданого гіпертекстового посилання;

- VLINK - колір для відвіданого гіпертекстового посилання;

- ALINK - колір для активного гіпертекстового посилання;

- BACKGROUND – URL фонового образу.

В HTML документі дозволений тільки один елемент BODY, і він повинен знаходитися після елементу HEAD.

Питання для самоперевірки.

1. Яку структуру мають Web-сторінки.

2. Призначення дескриптора TITLE.

3. Яка інформація задається в елементі м.

4. Де розташований текст Web-сторінки.

5. В чому різниця між атрибутами LINK, VLINK, ALINK.

6. Який контейнер самий головний і містить решту дескрипторів.