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

💸 Как сделать бизнес проще, а карман толще?

Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое раписание, но и напоминать клиентам о визитах тоже. Проблема в том, что средняя цена по рынку за такой сервис — 800 руб/мес или почти 15 000 руб за год. И это минимальный функционал. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
⚡️ Для новых пользователей первый месяц бесплатно. А далее 290 руб/мес, это в 3 раза дешевле аналогов. За эту цену доступен весь функционал: напоминание о визитах, чаевые, предоплаты, общение с клиентами, переносы записей и так далее.
✅ Уйма гибких настроек, которые помогут вам зарабатывать больше и забыть про чувство «что-то мне нужно было сделать».
Сомневаетесь? нажмите на текст, запустите чат-бота и убедитесь во всем сами!

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

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

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

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

Методичні вказівки до самостійної роботи з курсу «Інформатика і комп’ютерна техніка». Основи 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). Простота цієї мови робить її доступною для широкого кола користувачів.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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