Представлення документів HTML

1. Основи HTML

2. Структура веб-сторінки

2.1 Елемент <html>

2.2 Елемент <head>

7. 1 Маркований список

7.2 Нумерований список

7.3 Визначений список

7.4 Вкладений список

8. Фрейми

Література до теми

Мультимедійний супровід

1. Основи HTML

Макет – розроблений у форматі PSD вигляд майбутньої HTML-сторінки, що визначає розташування елементів та дизайн. Рідше макети створюють у векторних форматах, ще рідше – JPG-картинка або PDF-документ.

Верстка – це створення структури HTML-документу таким чином, щоб у всіх браузерах веб-сторінка виглядала так само, як і на наданому дизайнером макеті.

HTML-документ – це звичайний текстовий документ, може бути створений як у звичайному текстовому редакторі (Блокнот), так і в спеціалізованому, з підсвічуванням коду (Notepad ++, Visual Studio Code і т.п.). HTML-документ має розширення .html.

index.html – перша сторінка сайту. Зазвичай заходять на сайт із головної сторінки. Коли сайт має безліч сторінок, ми підказуємо веб-серверу, яку з них потрібно завантажувати автоматично. У більшості випадків адреса сайту вказується коротко, без зайвих файлів на кінці. Порівняйте, vertex-academy.com і vertex-academy.com/index.html – це та сама сторінка, але ми звичайно напишемо, як у першому варіанті. Ось тоді браузер заходить до папки сайту та визначає файл, який потрібно показати. Якщо index.html у цій папці відсутній, то браузер покаже список усіх файлів, що розташовані у цій папці.

HTML-документ складається з дерева HTML-елементів та тексту. Кожен елемент позначається у вихідному документі початковим (відкриваючим) і кінцевим (закриваючим) тегом.

Початковий тег показує, де починається елемент, кінцевий де закінчується. Закриваючи тег утворюється шляхом додавання знаку / перед ім'ям елемента:

<ім'я елемента>…</ім'я елемента>.

Між початковим та закриваючим тегами знаходиться вміст елемента – контент.

Елементи можуть вкладатися один в одного, наприклад, <p><i>Текст</i></p>. При вкладенні слід дотримуватись порядку їх закриття (принцип «матрьошки»), наприклад, наступний запис буде невірним: <p><i>Текст</p></i>.

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

Атрибути бувають глобальні, які застосовуються для всіх HTML-елементів, та власні.

Елементи, представлені одиночними тегами, не можуть зберігати в собі вміст безпосередньо, він прописується як значення атрибута, наприклад, елемент <input type="button" value="Кнопка"> створить кнопку з написом Кнопка всередині.

Кожному елементу можна надати кілька значень class і лише одне значення id. Множинні значення class записуються через пробіл: <div class="nav top">. Значення class та id повинні складатися лише з літер, цифр, дефісів та нижніх підкреслень і повинні починатися лише з літер чи цифр.

Браузер переглядає (інтерпретує) HTML-документ, вибудовуючи його структуру та відображаючи її відповідно до інструкцій, включених до цього файлу (таблиці стилів, скрипти). Якщо розмітка правильна, то у вікні браузера буде відображена HTML-сторінка, що містить HTML-елементи – заголовки, таблиці, зображення і т.д.

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

HTML-документ складається з двох розділів:

1. заголовка – вміст елемента <head>;

2. змістової частини – вміст <body>.

2. Структура веб-сторінки

Мова HTML дотримується правил, які містяться у файлі оголошення типу документа (Document Type Definition, або DTD). DTD є XML-документом, що визначає, які елементи, атрибути та їх значення дійсні для конкретного типу HTML. Для кожної версії HTML є власний DTD.

DOCTYPE відповідає за коректне відображення веб-сторінки браузером. DOCTYPE визначає не тільки версію HTML, але й відповідний файл DTD в Інтернеті.

<!DOCTYPE html> <!—Оголошення формату документу -->

<html>

</head>

</body>

</html>

Елементи, що усередині елемента <html>, утворюють дерево документа, так звану об'єктну модель документа, DOM (document object model). При цьому елемент <html> є кореневим елементом.

Рис. 1 Найпростіша структура веб-сторінки

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

Предок – елемент, який містить інші елементи. На рис.1 предком всім елементів є <html>. У той же час елемент <body> є предком для всіх елементів, що містяться в ньому: <h1>, <p>, <span>, <nav> і т.д.

Нащадок – елемент, розташований усередині одного чи більше типів елементів. Наприклад, <body> є нащадком <html>, а елемент <p> є нащадком одночасно для <body> та <html>.

Батьківський елемент – елемент, пов'язаний з іншими елементами нижчого рівня, і знаходиться на дереві вище за них. На рис.1 є батьківським тільки для <head> і <body>. Елемент <p> є батьківським лише для <span>.

Дочірній елемент – елемент, що безпосередньо підпорядкований іншому елементу вищого рівня. На рис.1 лише елементи <h1>, <h2>, <p> і <nav> є дочірніми по відношенню до <body>.

Сестринський елемент – елемент, що має спільний батьківський елемент із аналізованим, так звані елементи одного рівня. На рис.1 <head> і <body> — елементи одного рівня, як і і елементи <h1>, <h2> і <p> є між собою сестринськими.

2.1 Елемент <html>

Кореневий елемент документа. Решта елементів міститься всередині <html>...</html>. Все, що знаходиться за межами елемента, не сприймається браузером як HTML-код і ним не обробляється.

2.2 Елемент <head>

Розділ <head>...</head> містить технічну інформацію про сторінку: заголовок, опис, ключові слова для пошукових машин, кодування тощо. Введена інформація не відображається у вікні браузера, проте містить дані, які вказують браузеру, як слід обробляти сторінку. Для даного елемента доступні глобальні атрибути.

1. Елемент <title>

Обов'язковим елементом розділу <head> є <title>. Текст, розміщений усередині елемента <title>, відображається у рядку заголовка браузера.

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

2. Елемент <meta>

Необов'язковим елементом розділу <head> є <meta>. З його допомогою можна задати опис вмісту сторінки та ключові слова для пошукових машин, автора HTML-документа та інші властивості метаданих.

Елемент <head> може містити кілька елементів <meta>, тому що в залежності від атрибутів, вони можуть містити різну інформацію.

За допомогою елемента <meta> можна заборонити або дозволити індексацію веб-сторінки пошуковими машинами:

Індексація та перехід за посиланнями дозволені:

Індексація та перехід за посиланнями заборонені:

3. Елемент <style>

Усередині цього елемента встановлюються стилі, які використовуються на сторінці. Для встановлення стилів у HTML-документі використовується мова CSS. Таких елементів на сторінці може бути декілька.

Елемент може містити код форматування як елементів веб-сторінки, так і веб-сторінки повністю.

<style>

.paper {

width: 200px;

height: 300px;

background-color: #ef4444;

color: #666666;

}

</style>

Щоб підключити до елемента заданий стиль, необхідно через атрибут class (або id) присвоїти елементу відповідну назву:

...

</div>

CSS-код можна вбудовувати безпосередньо в елемент розмітки як значення атрибута style, наприклад:

4. Елемент <link>

Елемент <link> визначає відношення між поточною сторінкою та іншими документами. Таких елементів на сторінці може бути декілька.

href – основний атрибут елемента, як значення, виступає шлях до файлу зі стилями.

5. Елемент <script>

Елемент <script> дозволяє приєднувати до документа різні сценарії. Текст сценарію може розташовуватись або всередині цього елемента, або у зовнішньому файлі. Якщо текст сценарію розташований у зовнішньому файлі, він підключається за допомогою атрибутів елемента.

2.3 Елемент <body>

У розділі <body> міститься весь вміст документа.

3. HTML-текст

Елементи для форматування тексту несуть смислове навантаження і зазвичай задають тексту, що вписаний всередині, стильове оформлення, наприклад, виділяють текст жирним накресленням або відображають його шрифтом іншого сімейства (властивість font-family).

Грамотно відформатований текст дає зрозуміти пошуковим системам, які слова несуть важливе смислове навантаження, за якими краще ранжувати веб-сторінку в пошуковій видачі. Вся текстова інформація, що відображається на сайті, розміщується усередині елемента <body>.

1. HTML-елементи для заголовків

Заголовки є важливими елементами веб-сторінки, упорядковуючи текст, формуючи його візуальну структуру. Елементи <h1>...<h6> повинні використовуватися лише для виділення заголовків нового розділу чи підрозділу.

З використанням заголовків необхідно враховувати їх ієрархію, тобто за <h1> повинен слідувати <h2> і т.д. Також не рекомендується вкладати в заголовки інші елементи.

1.1. Елемент <h1>

Заголовок верхнього рівня, на сторінці рекомендується використовувати лише один раз, по можливості частково дублюючи назву сторінки. Елемент <h1> має бути унікальним для кожної сторінки сайту.

Рекомендується прописувати на початку статті за допомогою ключового слова в тексті заголовка. Розмір шрифту в браузері дорівнює 2em, верхній та нижній відступ за замовчуванням 0.67em.

1.2. Елемент <h2>

Представляє підзаголовки елемента <h1>. Розмір шрифту в браузері дорівнює 1.5em, верхній та нижній відступ за замовчуванням 0.83em.

1.3. Елемент <h3>

Показує підзаголовки елемента <h2>. Розмір шрифту в браузері дорівнює 1.17em, верхній та нижній відступ за замовчуванням 1em.

1.4. Елементи <h4>, <h5>, <h6>

Позначають підзаголовки четвертого, п'ятого та шостого рівня. Розмір шрифту в браузері дорівнює 1em/0.83em/0.67em, верхній та нижній відступ за замовчуванням 1.33em/1.67em/2.33em відповідно.

2. Елементи для форматування тексту:

<b> – задає напівжирне зображення шрифту. Виділяє текст без акценту з його важливість.

<em> – відображає шрифт курсивом, надаючи тексту значення.

<i> – відображає шрифт курсивом.

<small> – зменшує розмір шрифту на одиницю по відношенню до звичайного тексту.

<strong> – задає напівжирне зображення шрифту, відноситься до елементів логічної розмітки, вказуючи браузеру на важливість тексту.

<sub> – використовується для створення нижніх індексів. Зсув тексту нижче рівня рядка, зменшуючи його розмір.

<sup> – використовується для створення ступенів. Зсув тексту вище рівня рядка, зменшуючи його розмір.

<ins> – виділяє текст у новій версії документа, підкреслюючи його.

<del> – перекреслює текст. Використовується для виділення тексту, видаленого з документа.

<mark> – застосовується для виділення фрагментів тексту з довідковою метою, забарвлюючи блок символів жовтим кольором.

Абзаци, засоби перенесення тексту:

<p> – розбиває текст на окремі абзаци, відокремлюючи один від одного порожнім рядком. Браузер автоматично додає верхнє та нижнє зовнішнє поле margin, що дорівнює 1em.

<br> – переносить текст на наступний рядок, утворюючи розрив рядка.

<hr> – використовується для розділення вмісту на веб-сторінці. Відображається у вигляді горизонтальної лінії.

4. HTML-посилання

HTML-посилання створюються за допомогою елементів <a>, <area> та <link>. Посилання є зв'язком між двома ресурсами, одним з яких є поточний документ.

Посилання можна розділити на дві категорії:

посилання на зовнішні ресурси – створюються за допомогою елемента <link> і використовуються для розширення можливостей поточного документа під час обробки браузером;
гіперпосилання – посилання на інші ресурси, які користувач може відвідати або завантажити.

Абсолютні посилання використовуються для переходу на інший веб-сайт. Вони відповідають вимогам позначення URL-адреси, тобто містять протокол передачі даних (наприклад, http://), доменне ім'я сайту та шлях до конкретної сторінки сайту. Якщо шлях не вказано, за замовчуванням відкриється головна сторінка. У прикладі вище вказано абсолютне посилання, яке веде на головну сторінку сайту.

Відносні посилання використовуються для переходу в рамках одного сайту (зі сторінки на сторінку або з одного місця до іншого).

Гіперпосилання створюються за допомогою елемента <a></a>. Всередині міститься текст, який відображатиметься на веб-сторінці. Текст посилання відображається у браузері з підкресленням, колір шрифту – синій, при наведенні на посилання курсор миші змінює вигляд.

Обов'язковим параметром елемента <a> є атрибут href, який задає URL-адресу веб-сторінки.

<a href="http://site.uа">вказівник посилання</a>

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

Посилання на документ у тій самій папці. Наприклад, у папці HTML_Start (коренева папка) є ще один html документ з будь-якою назвою, наприклад about.html. Оскільки вони знаходяться в одній папці, то посилання на сторінку index.html може бути дуже коротким і містити просто назву сторінки: about.html

<!DOCTYPE HTML>

<html>

<head>

<title>Головна</title>

</head>

<body>

<p>Моя перша веб-сторінка</p>

<a href="about.html">Детальніше</a>

</body>

</html>

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

Для цього використовується атрибут target="_blank".

Щоб зробити клікабельне зображення, необхідно помістити елемент <img> усередину елемента <a>. Щоб посилання було відкрито в іншому вікні, потрібно додати атрибут target="_blank" для посилання.

5. HTML-зображення

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

Бажано, щоб зображення:

були інформативними;
відповідали кольоровій гамі вашого сайту;
були доречні.

HTML-зображення додаються на веб-сторінки за допомогою <img>. Використання графіки робить веб-сторінки візуально привабливішим.

Елементи <map> та <area> дозволяють створювати карти-зображення з активними областями.

Елемент <img> представляє зображення та його резервний контент, який додається за допомогою атрибута alt.

Елемент <img> має обов'язковий атрибут src, значенням якого є абсолютний або відносний шлях зображення:

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

align, з допомогою якого вирівнювалося зображення горизонталлю чи вертикалі.

hspace - відступ ліворуч і праворуч від зображення до навколишнього контенту (напр. тексту або сусідньої картинки)

vspace - відступ зверху та знизу від картинки до контенту навколо.

border - задавав товщину рамки навколо зображення (за умовчанням вона дорівнює нулю)

Наразі всі ці налаштування робляться за допомогою CSS.

6. HTML-таблиці

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

Осередки таблиць можуть містити будь-які HTML-елементи, такі як заголовки, списки, текст, зображення, елементи форм, а також інші таблиці. Кожній таблиці можна додати пов'язаний із нею заголовок, розташувавши його перед таблицею чи після неї.

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

Таблиця створюється за допомогою елемента <table></table>, який є контейнером для елементів таблиці та всі елементи повинні знаходитись усередині нього.

Наприклад, за допомогою даної розмітки можна створити таблицю, що складається з двох стовпців та двох рядків:

<table>

<tr><th>текст заголовку</th><th>текст заголовку</th></tr>

<tr><td>данные</td><td>данные</td></tr>

</table>

Зовнішній вигляд таблиці без форматування css-властивостями

За замовчуванням таблиця та комірки не мають видимих меж. Кордони задаються за допомогою властивості border:

/* зовнішні межі сірого кольору товщиною 1px */

table {

border: 1px solid grey;

}

/* межі комірок першого ряду таблиці*/

th {

border: 1px solid grey;

}

/* межі комірок тіла таблиці */

td {

border: 1px solid grey;

}

Проміжки між осередками таблиці забираються за допомогою властивості table {border-collapse: collapse;}.

Ширина таблиці за замовчуванням дорівнює ширині її внутрішнього вмісту. Щоб встановити ширину, потрібно задати значення властивості width:

/* ширина таблиці дорівнює ширині блоку контейнера, в якому вона знаходится */

table {

width: 100%;

}

/* фіксована ширина таблицы */

table {

width: 600px;

}

Якщо для осередків таблиці задані внутрішні відступи і межі, то ширина таблиці буде включати наступні значення: padding-left і padding-right, ширина border-left плюс ширина border-right останнього осередку в ряду.

Якщо задані ширина і межі осередків, то ширина таблиці складатиметься із ширини осередків плюс ширина border-left і ширина border-right останнього осередку в ряду.

Рядки чи ряди таблиці створюються за допомогою елемента <tr>. Кількість горизонтальних рядків таблиці визначається за кількістю елементів <tr></tr>.

Елемент <th> створює заголовок стовпця – спеціальний осередок, текст у якому виділяється жирним. Кількість осередків заголовка визначається кількістю елементів <th></th>.

<table>

<tr><th>комірка заголовку</th><th> комірка заголовку </th></tr>

</table>

Елемент <td> створює осередки таблиці, всередині яких містяться дані таблиці. Елементи <td></td>, розташовані в одному ряду, визначають кількість осередків у рядку таблиці. Кількість пар осередків <td> повинна дорівнювати кількості пар осередків <th>.

<table>

<tr><th> комірка заголовку </th><th> комірка заголовку </th></tr>

<tr><td> комірка тіла таблиці</td><td> комірка тіла таблиці </td></tr>

</table>

Елемент <caption> створює підпис таблиці. Додається безпосередньо після тега <table>, поза рядком або осередком.

Атрибути colspan і rowspan поєднують комірки таблиці. Атрибут colspan визначає кількість осередків, об'єднаних по горизонталі, а rowspan – по вертикалі.

<table>

<tr>

<th>Найменування товару</th>

<th>Кількість</th>

<th>Вартість, грн.</th>

</tr>

<tr>

<td>Томати свіжі</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>

</tr>

<tr>

<td>Огірки свіжі</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>

</tr>

<tr>

<td colspan="5" style="text-align:right">ВСЬОГО:</td><td>1168,80</td><!—Задаємо кількість комірок по горизонталі для об’єднання-->

</tr>

</table>

7. HTML-списки

HTML-списки використовуються для угруповання пов'язаних між собою фрагментів інформації. Існує три види списків:

маркований список - <ul> - кожен елемент списку <li> відзначається маркером,
нумерований список - <ol> - кожен елемент списку <li> відзначається цифрою,
список визначень - <dl> - складається з пар термін <dt> - <dd> визначення.

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

Елементи списку поводяться як блокові елементи, розташовуючись один під одним і займаючи всю ширину блоку-контейнера. Кожен елемент списку має додатковий блок, розташований збоку, який бере участь у компонуванні.

7. 1 Маркований список

Маркований список є невпорядкованим списком (від англ. Unordered List). Створюється за допомогою елемента <ul>. Як маркер елемента списку виступає мітка, наприклад, зафарбований кружок.

Кожен елемент списку створюється з допомогою елемента <li> (від англ. List Item).

<ul>

<li>Microsoft</li>

<li>Google</li>

<li>Apple</li>

</ul>

Microsoft
Google
Apple
IBM

7.2 Нумерований список

Нумерований список створюється за допомогою елемента <ol>. Кожен пункт списку також створюється за допомогою елемента <li>. Браузер нумерує елементи по порядку автоматично і якщо видалити один або кілька елементів такого списку, інші номери будуть автоматично перераховані.

Для елемента <li> доступний атрибут value, який дозволяє змінити стандартний номер для вибраного елемента списку. Наприклад, якщо для першого пункту списку встановити <li value="10">, то решта нумерації буде перерахована щодо нового значення.

<ol>

<li>Microsoft</li>

<li>Google</li>

<li>Apple</li>

</ol>

Microsoft
Google
Apple
IBM

7.3 Визначений список

Визначені списки створюються за допомогою <dl>. Для додавання терміну застосовується елемент <dt>, а для вставки визначення елемент <dd>.

<dl>

<dt>Режисер:</dt>

<dd>Петр Точилин</dd>

<dt>В ролях:</dt>

<dd>Андрей Гайдулян</dd>

<dd>Алексей Гаврилов</dd>

<dd>Виталий Гогунский</dd>

<dd>Мария Кожевникова</dd>

</dl>

Режисер:

Петро Точилін

У ролях:

Андрій Гайдулян

Олексій Гаврилов

Віталій Гогунський

Марія Кожевнікова

7.4 Вкладений список

Найчастіше можливостей простих списків не вистачає, наприклад, при створенні змісту ніяк не обійтися без вкладених пунктів. Розмітка для вкладеного списку буде наступною:

<ul>

<li>Пункт 1.</li>

<li>Пункт 2.

<ul>

<li>Підпункт 2.1.</li>

<li>Підпункт 2.2.

<ul>

<li>Підпункт 2.2.1.</li>

<li>Підпункт 2.2.2.</li>

</ul>

</li>

<li>Підпункт 2.3.</li>

</ul>

</li>

<li>Пункт 3.</li>

</ul>

Пункт 1.
Пункт 2.
- Підпункт 2.1.
- Підпункт 2.2.
  - Підпункт 2.2.1.
  - Підпункт 2.2.2.
- Підпункт 2.3.
Пункт 3.

8. Фрейми

Фрейми – це прямокутні області екрану, кожна з яких містить власний html-документ. Фрейми можуть використовуватися для оформлення наступних документів:

Зміст. Якщо ви помістите на Web-сторінку зміст у вигляді вертикального стовпця, то користувач зможе звернутися до нього будь-якої миті, і йому не потрібно буде постійно клацати на кнопці повернення до попередньої сторінки. Оскільки, перебуваючи у фреймі, зміст завжди буде під рукою, користувачеві потрібно буде просто вибрати інший пункт і відразу ж отримати потрібну інформацію.
Нерухомі елементи інтерфейсу. Можна зафіксувати на екрані якесь графічне зображення, наприклад, логотип фірми, тоді як решта сторінки прокручуватиметься в іншому фреймі.
Форми та результати. Можна створити форму в одному фреймі, а в іншому – відобразити результати запиту.

Питання для перевірки:

Назвіть причини виникнення мови розмітки HTML.
Охарактеризуйте принципи представлення документу в форматі HTML.
Дайте визначення поняттю «гіперпосилання».
Що ви розумієте під терміном «скрипт»?
Охарактеризуйте структуру документу HTML.
За допомогою якого програмного забезпечення можна переглядати документ HTML?

Література до теми

Воробієнко П.П. Телекомунікаційні та інформаційні мережі [Навчальний посібник] / П.П. Воробієнко, Л.А. Нікітюк, П.І. Резніченко – К.: Самміт-книга, 2010. – 708 с. (електронний варіант, формат pdf)
Городецька О.С. Комп’ютерні мережі: навчальний посібник / О.С. Городецька, В.А. Гикавий, О.В. Онищук. – Вінниця : ВНПУ, 2017. – 129 с.
Струтинська О.В. Інформаційні системи та мережі [Навчальний посібник для дистанційного навчання] /За наук.ред.М.І.Жалдака – К.: Університет «Україна», 2008. – 211 с. (електронний варіант, формат pdf)
Азаров О.Д. Комп’ютерні мережі [Навчальний посібник] / О.Д. Азаров, С.М. Захарченко, О.В. Кадук, М.М. Орлова –Вінниця: ВНТУ, 2013. – 371 с.
Міхунін С.В. Комп’ютерні мережі. Загальні принципи функціонування комп’ютерних мереж [Навчальний посібник] / С.В. Міхунін, С.В. Кавун, С.В. Знахур – Харків: Вид. ХНЕУ, 2008. – 210 с.

Мультимедійний супровід

Розмітка сайтів мовою HTML.ppsx

ДО ЗМІСТУ

Report abuse