Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Мова розмітки гіпертексту

Содержание

Мова розмітки гіпертекстуГіпертекст - форматований текст з графікою і т.п., що містить також посилання на інші документи (гіперпосилання)Розмітка - встaвка в текст додаткових службових символів, кожен з яких є командою, що вказує браузеру, як слід відображати
HTML Мова розмітки гіпертекстуГіпертекст - форматований текст з графікою і т.п., що містить Мова розмітки гіпертекстуHTML призначений для виділення логічних частин веб- документаHTML входить в Теги HTML ФайлФайл, що містить текст з HTML-розміткою *. Htm або * .htmlМоже бути ТегиTag (тег) – ярлик, етикетка Тег Вміст Теги Мова HTML складається з тегів. Теги - це ті самі цеглинки, з HTML. Термінологія Some text. AтрибутиТеги можуть мати атрибути. Деякі теги є сенс використовувати тільки з атрибутами. Основні групи тегів за призначенням і сферою дії:теги, що визначають структуру документа;теги, Проста HTML-сторінкаНайпростіша HTML-сторінка складається як мінімум з трьох тегів.Тег - це контейнер, Структура HTML-документуЗаголовок документуНазва документаТіло документа Структура HTML-документа і контейнериПриклад HTML-документаПриклад HTML-документа Блочні і строчні елементи (HTML block and inline tags)Всі HTML елементи Код html-сторінки‹html› всегда находится в корне дерева‹html› содержит два вложенных элемента: ‹head› З чого починається HTMLКожен HTML-документ повинен починатися з декларації типу документа або Заголовок сторінкиЗаголовок сторінки - це той текст, який відображається в лівому верхньому Кодування HTML-сторінкиКодування HTML-сторінки потрібно вказувати для того, щоб веб-браузер міг правильно відображати ПомилкиHTML дозволяє вкладати теги друг в друга, і одна з найчастіших помилок Блочні елементиЦе великі блоки web-сторінки. При відображенні браузер автоматично додає розрив рядка Блочні елементиЗазвичай блокові елементи використовуються, щоб розділити вміст web-сторінки на логічні блоки Строчні елементиВикористовуються для розмітки частин вмісту елементів.Ширина строчного елемента дорівнює обсягу вмісту.На Взаємодія блочних і строчних елементів ПідключенняПосилання () – зв'язок із зовнішнім документомСкрипти () – опис скриптів Коментар Теги форматування тексту ШРИФТИ ТА АБЗАЦИ ЗаголовкиЗаголовокЗаголовокЗаголовокЗаголовокЗаголовокЗаголовок heading Абзац та розрив строкиАбзац paragraphРозривстроки break ШрифтЖирний bold textКурсів italic textПідкреслений underlined text Верхні та нижні індексиПідстроковий subscriptsНадстроковий superscripts Шрифт Текст, який не змінюється ЦитатиУ HTML існує кілька тегів для позначення цитат: призначений для виділення довгих Зміна текстуЯкраз для опису змін призначені теги і . виділяє текст, який Специальні символи< < или < > > или > КОЛЬОРИ КольориВ HTML колір задається двома способамиза допомогою шістнадцятирічного кодуза назвою деяких кольорів Кольорова модель RGBЧервоний RedЗелений GreenСиній Blue Кольорова модель RGBТри кольорових складовихREDGREENBLUEКожна кольорова складова має значення в диапазоні 0 Кольорова модель RGBФормування кольору DB + 60 + 1C = DB601CПеред Цветовая модель RGBНазвания цветов Вибір кольору Web-кольориДля кожної колірної складової можна використовувати тільки значення 00 33 66 99 СС FF Web-кольориПриклади web-кольорів #336699 #66FF00 #0033СС #FFCC99 #000000 #333333 ГІПЕРПОСИЛАННЯ ВизначенняГіперпосилання (англ. Hyperlink) - частина гіпертекстового документа, що посилається на інший елемент Гіперпосилання Гіперпосилання anchor hyperreference ГіперпосиланняMetaFTP Послати листа ГіперпосиланняАбсолютні КНЕУВідносні (приклад – файл contents.html) Глава 1 Додаток 2 Новини Посилання на файлПосилання може вказувати на будь-яку веб-сторінку, на будь-який файл. Якщо Гіперпосилання всередені документуЗакладки Що таке ICANN Що таке система домених імен DNSПосилання Гіперпосилання всередені документу Посилання з якорем зазвичай використовуються для створення навігації усередині сторінки. Гіперпосилання всередені документуЗакладки Що таке ICANN Що таке DNSПосилання на закладку Що ГіперпосиланняЗакладка в файлі chapter 1.html Питання до гл. 1 Закладка в файлі Гіперпосилання Надіслати листа cc – Carbon Copybcc – Blind Carbon Copy ПідказкаДля того, щоб додати посиланням підказку, треба використовувати атрибут title. наприклад:Підказка з'явиться, ЗОБРАЖЕННЯ Формати графічних файлівjpg (jpeg) – Joint Photographic Experts Groupgif – Graphic Вставка зображень image source Альтернативний текст Якщо у користувача відключені зображення або їх неможливо завантажити, то в Розміри зображень Щоб керувати шириною і висотою зображення, потрібно використовувати атрибути width і Зображення - посиланняПосилання можна робити не тільки з допомогою тексту, а й Основні атрибути елементу СПИСКИ СпискиДля створення списків в HTML потрібні два елементи, які створюють список тільки Маркирований список Червоний Жовтий Нумерований список Червоний Жовтий Багаторівневий списокСтворити багаторівневий список досить просто.Спочатку потрібно створити список першого рівня, а Список визначеньСписок визначень створюється за допомогою трьох ключових слів: позначає сам список Атрибути тегів списка ТАБЛИЦІ HTML таблиціHTML таблиці складаються з осередків, що утворюються при перетині рядків і Тегі для розмітки таблиціДля розмітки таблиці використовуються три основних тега ... Розмічає Таблиця Ячейка 1 Ячейка 2 Розміри ячейок і стовбцівРозміри осередків і стовпців теж можна задавати вручну, особливо якщо Ширина і висота таблиціЗа замовчуванням ширина і висота таблиці залежить від вмісту і Таблиця Ячейка 1 Ячейка 2 об'єднання осередківЩоб об'єднати комірки по горизонталі, необхідно використовувати атрибут colspan у тегів Таблица Ячейка 1Ячейка 2 Ячейка 3 Объединение ячеекОб'єднання осередків по вертикалі трохи складніше.  Воно здійснюється за допомогою атрибута Таблиця Ячейка 1 Ячейка 2Ячейка 3 Приклад Атрибути Елемент створює підпис таблиці. Додається безпосередньо після тега , поза описом рядка або комірки. Елемент створює структурну групу стовпців, виділяючи логічно однорідні осередки. Групує один або Елемент формує неструктурні групи стовпців, які ділять таблицю на розділи, що не Для елемента доступний атрибут span, що задає кількість стовпців для об'єднання. Приклад Елемент створює групу заголовків для рядків таблиці з метою завдання єдиного оформлення. Синтаксіс Приклад ТЕГИ І Теги  і Теги і візуально нічого не роблять. Зате вони дозволяють згрупувати кілька елементів Приклад:      Приклад         Абзац1  Абзац2    Тег Треба уточнити, що тег дозволяє не тільки групувати елементи, але і управляти призначений для вказівки типу поточного документа - DTD (document type definition, АТРИБУТИ Елемент верхнього рівня - вказує елемент верхнього рівня в документі, для META-ТЕГИ Мета-тегиТеги використовуються для вказівки деяких службових даних про html-документікодуванняописуключових слівперенаправленняі т.д. Мета-тегиРозташовуються мета-теги в заголовку сторінки між початковим і кінцевим елементами тега і Ключові словаЄ ціле сімейство тегів , званих мета-тегами. Їх можна використовувати всередині Приклад Приклади Приклад АТРИБУТИ Атрибут name и значення атрибутів ВАЛІДАЦІЯ HTML-ДОКУМЕНТУ ВалідаціяValidation? Перевірка правильностіВалідація - процедура, що дає високу ступінь впевненості в тому, W3CПеревірка за адресоюПеревірка файлаПеревірка шляхом копіювання коду Приклад веб-сторінки Media-типи і підтипиВказівка media-типу використовується для передачі відомостей про формат вмісту в Media-типи і підтипиMedia-типи - це нова назва для розширених mime-типівMIME - Multipurpose Формат media-типівТип/ПідтипContent-type: text/html сервер посилає клієнтові текстовий документ в html-форматі Приклади media-типівtext/html text/css text/plainimage/bmp image/gif image/jpeg image/pngaudio/midi audio/mpeg video/mpegapplication/msword application/octet-stream application/pdf application/x-shockwave-flash application/zip… Перелік media-типівhttp://www.iana.org/assignments/media-types/
Слайды презентации

Слайд 2 Мова розмітки гіпертексту
Гіпертекст - форматований текст з графікою

Мова розмітки гіпертекстуГіпертекст - форматований текст з графікою і т.п., що

і т.п., що містить також посилання на інші документи

(гіперпосилання)
Розмітка - встaвка в текст додаткових службових символів, кожен з яких є командою, що вказує браузеру, як слід відображати документ

Слайд 3 Мова розмітки гіпертексту
HTML призначений для виділення логічних частин

Мова розмітки гіпертекстуHTML призначений для виділення логічних частин веб- документаHTML входить

веб- документа
HTML входить в сімейство мов розмітки SGML (Standard

Generalized Markup Language)

Слайд 4

Слайд 5 Теги HTML

Теги HTML

Слайд 6 Файл
Файл, що містить текст з HTML-розміткою
*. Htm

ФайлФайл, що містить текст з HTML-розміткою *. Htm або * .htmlМоже

або * .html
Може бути створений будь-яким текстовим редактором
Мова не

залежить від регістру

Слайд 7 Теги
Tag (тег) – ярлик, етикетка
Тег

ТегиTag (тег) – ярлик, етикетка Тег Вміст

atrN="valueN"> Вміст

Слайд 8

Слайд 9 Теги 
Мова HTML складається з тегів. Теги - це

Теги Мова HTML складається з тегів. Теги - це ті самі цеглинки,

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

починається з символу < і закінчується символом >, наприклад:

.
Всі теги можна розділити на парні і одиночні. Кожен парний тег складається з двох частин: відкриваючого тега і закриваючого. Всередині закриваючого тега використовується символ /. (слеш)

Слайд 10 HTML. Термінологія

Some text.

HTML. Термінологія Some text.

Слайд 11 Aтрибути
Теги можуть мати атрибути. Деякі теги є сенс

AтрибутиТеги можуть мати атрибути. Деякі теги є сенс використовувати тільки з

використовувати тільки з атрибутами. Найбільш яскравий приклад - тег

, що позначає зображення. Для нього обов'язково потрібно вказувати атрибут src, який задає адресу картинки (інакше браузер не зможе завантажити її).
У загальному випадку тег записується таким чином:
<ім'я-тега атрибут1 = "значення1" атрібут2 = "значення2" ...>
Атрибутів може бути декілька, ось приклади:

...
  ...
 

Слайд 12 Основні групи тегів за призначенням і сферою дії:
теги,

Основні групи тегів за призначенням і сферою дії:теги, що визначають структуру

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

(параграфи, списки, таблиці, картинки);
гіпертекстові посилання і закладки;
форми для організації діалогу;
теги для виклику програм.

Слайд 13 Проста HTML-сторінка
Найпростіша HTML-сторінка складається як мінімум з трьох

Проста HTML-сторінкаНайпростіша HTML-сторінка складається як мінімум з трьох тегів.Тег - це

тегів.
Тег - це контейнер, в якому знаходиться весь

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

Слайд 14 Структура HTML-документу


Заголовок документу
Назва документа



Тіло документа





Структура HTML-документуЗаголовок документуНазва документаТіло документа

Слайд 15 Структура HTML-документа і контейнери



Приклад HTML-документа




Приклад HTML-документа


Структура HTML-документа і контейнериПриклад HTML-документаПриклад HTML-документа

Привіт, Світ!






<br>Приклад HTML-документа<br><p><body><br><p><h1><br>Приклад HTML-документа<br><p><p><br>Привіт, Світ! <br><p>HTML-документ складається з контейнерів, що включають в себе інші контейнери або простий текст. По суті сам HTML-документ є контейнером<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide16"> <a href="/img/tmb/15/1450446/eee8e00041fdc239ab3031f28dc9b5e4-720x.jpg" target="_blank">Слайд 16</a> Блочні і строчні елементи (HTML block and inline </h3> <div class="image"> <a href="/img/tmb/15/1450446/eee8e00041fdc239ab3031f28dc9b5e4-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Блочні і строчні елементи (HTML block and inline tags)Всі HTML елементи поділяються на дві групи:блочные (block);строчные (inline)."><img src="/img/tmb/15/1450446/eee8e00041fdc239ab3031f28dc9b5e4-720x.jpg" title="Мова розмітки гіпертексту" alt="Блочні і строчні елементи (HTML block and inline tags)Всі HTML елементи"></a> </div> <div class="text"> <h4>tags)<br>Всі HTML елементи поділяються на дві групи:<br>блочные (block);<br>строчные (inline).<br><br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide17"> <a href="/img/tmb/15/1450446/ef0be40880fde6ba5dfd254e431b9fde-720x.jpg" target="_blank">Слайд 17</a> Код html-сторінки<br>‹html› всегда находится в корне дерева<br>‹html› содержит </h3> <div class="image"> <a href="/img/tmb/15/1450446/ef0be40880fde6ba5dfd254e431b9fde-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Код html-сторінки‹html› всегда находится в корне дерева‹html› содержит два вложенных элемента: ‹head› и ‹body›. Вы можете называть их «детьми» элемента ‹html› ‹body› вложен в элемент ‹html›, поэтому мы говорим, что ‹body› – «ребенок» ‹html› ‹title› вложен в элемент ‹head›‹p› – «родитель» ‹strong›,‹body› – «родитель» ‹p› и ‹h1›, ‹html› – «родитель» ‹body›"><img src="/img/tmb/15/1450446/ef0be40880fde6ba5dfd254e431b9fde-720x.jpg" title="Мова розмітки гіпертексту" alt="Код html-сторінки‹html› всегда находится в корне дерева‹html› содержит два вложенных элемента:"></a> </div> <div class="text"> <h4>два вложенных элемента: ‹head› и ‹body›. Вы можете называть</h4> их «детьми» элемента ‹html› <br><p>‹body› вложен в элемент ‹html›, поэтому мы говорим, что ‹body› – «ребенок» ‹html› <br><p>‹title› вложен в элемент ‹head›<br><p>‹p› – «родитель» ‹strong›,<br>‹body› – «родитель» ‹p› и ‹h1›, <br>‹html› – «родитель» ‹body›<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide18"> <a href="/img/tmb/15/1450446/a692df4b9979ca3ff18116024acf2ef8-720x.jpg" target="_blank">Слайд 18</a> З чого починається HTML<br>Кожен HTML-документ повинен починатися з </h3> <div class="image"> <a href="/img/tmb/15/1450446/a692df4b9979ca3ff18116024acf2ef8-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="З чого починається HTMLКожен HTML-документ повинен починатися з декларації типу документа або «доктайпів». Тип документа потрібен, щоб браузер міг визначити версію HTML і правильно відобразити сторінку.Наприклад, для старої версії HTML 4.01 доктайпів виглядає так:А для останньої версії HTML вже набагато простіше:Останню версію HTML ще називають HTML 5. Але так як ця версія вже прийнята як стандарт і поширена майже скрізь, її ми також будемо вивчати. "><img src="/img/tmb/15/1450446/a692df4b9979ca3ff18116024acf2ef8-720x.jpg" title="Мова розмітки гіпертексту" alt="З чого починається HTMLКожен HTML-документ повинен починатися з декларації типу документа"></a> </div> <div class="text"> <h4>декларації типу документа або «доктайпів». Тип документа потрібен, щоб</h4> браузер міг визначити версію HTML і правильно відобразити сторінку.<br>Наприклад, для старої версії HTML 4.01 доктайпів виглядає так:<br><! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"><br>А для останньої версії HTML вже набагато простіше:<br><! DOCTYPE html><br>Останню версію HTML ще називають HTML 5. Але так як ця версія вже прийнята як стандарт і поширена майже скрізь, її ми також будемо вивчати. <br> </div> <hr> </div> <div class="descrip"> <h3 id="slide19"> <a href="/img/tmb/15/1450446/ddf95b2289c598be5da5d747deeb92e3-720x.jpg" target="_blank">Слайд 19</a> Заголовок сторінки<br>Заголовок сторінки - це той текст, який </h3> <div class="image"> <a href="/img/tmb/15/1450446/ddf95b2289c598be5da5d747deeb92e3-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Заголовок сторінкиЗаголовок сторінки - це той текст, який відображається в лівому верхньому куті браузера, а також у вкладках.Щоб задати заголовок сторінки, потрібно використовувати тег всередині тега . Наприклад, ось так: Курси "><img src="/img/tmb/15/1450446/ddf95b2289c598be5da5d747deeb92e3-720x.jpg" title="Мова розмітки гіпертексту" alt="Заголовок сторінкиЗаголовок сторінки - це той текст, який відображається в лівому"></a> </div> <div class="text"> <h4>відображається в лівому верхньому куті браузера, а також у</h4> вкладках.<br>Щоб задати заголовок сторінки, потрібно використовувати тег <title> всередині тега <head>. Наприклад, ось так:<br><head> <title> Курси </ title> </ head><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide20"> <a href="/img/tmb/15/1450446/7e2390264119d1e1a97047660f50b463-720x.jpg" target="_blank">Слайд 20</a> Кодування HTML-сторінки<br>Кодування HTML-сторінки потрібно вказувати для того, щоб </h3> <div class="image"> <a href="/img/tmb/15/1450446/7e2390264119d1e1a97047660f50b463-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Кодування HTML-сторінкиКодування HTML-сторінки потрібно вказувати для того, щоб веб-браузер міг правильно відображати текст на сторінці. Якщо браузер неправильно «вгадає» кодування, то замість тексту будуть відображатися ієрогліфи.Щоб повідомити браузеру кодування HTML-сторінки, необхідно всередині тега використовувати тег:Найпоширеніше сучасне кодування - utf-8. Використовуйте його у всіх своїх проектах.Для кирилиці в Windows charset часто задавали як windows-1251. Але зараз це вважається поганою практикою."><img src="/img/tmb/15/1450446/7e2390264119d1e1a97047660f50b463-720x.jpg" title="Мова розмітки гіпертексту" alt="Кодування HTML-сторінкиКодування HTML-сторінки потрібно вказувати для того, щоб веб-браузер міг правильно"></a> </div> <div class="text"> <h4>веб-браузер міг правильно відображати текст на сторінці. Якщо браузер</h4> неправильно «вгадає» кодування, то замість тексту будуть відображатися ієрогліфи.<br>Щоб повідомити браузеру кодування HTML-сторінки, необхідно всередині тега <head> використовувати тег:<br><meta charset = "ім'я кодування"><br>Найпоширеніше сучасне кодування - utf-8. Використовуйте його у всіх своїх проектах.<br>Для кирилиці в Windows charset часто задавали як windows-1251. Але зараз це вважається поганою практикою.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide21"> <a href="/img/tmb/15/1450446/a690c173a52ee1db993354301adf3c61-720x.jpg" target="_blank">Слайд 21</a> <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/a690c173a52ee1db993354301adf3c61-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/a690c173a52ee1db993354301adf3c61-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide22"> <a href="/img/tmb/15/1450446/2c4bc61f2bab3bc87c80976d3ecb8d5a-720x.jpg" target="_blank">Слайд 22</a> <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/2c4bc61f2bab3bc87c80976d3ecb8d5a-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/2c4bc61f2bab3bc87c80976d3ecb8d5a-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide23"> <a href="/img/tmb/15/1450446/08a51ec3de2a21eece317f0fa95b7e95-720x.jpg" target="_blank">Слайд 23</a> <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/08a51ec3de2a21eece317f0fa95b7e95-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/08a51ec3de2a21eece317f0fa95b7e95-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide24"> <a href="/img/tmb/15/1450446/569cb72da038cad5ded7561ca2d8af0f-720x.jpg" target="_blank">Слайд 24</a> <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/569cb72da038cad5ded7561ca2d8af0f-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/569cb72da038cad5ded7561ca2d8af0f-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide25"> <a href="/img/tmb/15/1450446/7cca13ac095dca6e56cb04476edfd44d-720x.jpg" target="_blank">Слайд 25</a> <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/7cca13ac095dca6e56cb04476edfd44d-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/7cca13ac095dca6e56cb04476edfd44d-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide26"> <a href="/img/tmb/15/1450446/dfff862f12260085214e6b8d95d22b7d-720x.jpg" target="_blank">Слайд 26</a> Помилки<br>HTML дозволяє вкладати теги друг в друга, і </h3> <div class="image"> <a href="/img/tmb/15/1450446/dfff862f12260085214e6b8d95d22b7d-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ПомилкиHTML дозволяє вкладати теги друг в друга, і одна з найчастіших помилок полягає в неправильній вкладеності, наприклад: Текст виділено напівжирним У цьому прикладі тег закривається раніше, ніж тег , і це помилка.Інший тип помилок трапляється через прикрі помилки і неуважності, коли забувають прогалини між атрибутами тега або неправильно пишуть їх назви."><img src="/img/tmb/15/1450446/dfff862f12260085214e6b8d95d22b7d-720x.jpg" title="Мова розмітки гіпертексту" alt="ПомилкиHTML дозволяє вкладати теги друг в друга, і одна з найчастіших"></a> </div> <div class="text"> <h4>одна з найчастіших помилок полягає в неправильній вкладеності, наприклад:<br></h4> Текст <strong> виділено </ p> напівжирним </ strong><br>У цьому прикладі тег <p> закривається раніше, ніж тег <strong>, і це помилка.<br>Інший тип помилок трапляється через прикрі помилки і неуважності, коли забувають прогалини між атрибутами тега або неправильно пишуть їх назви.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide27"> <a href="/img/tmb/15/1450446/f6323778aeb5ba89e923dc65e1a7406a-720x.jpg" target="_blank">Слайд 27</a> Блочні елементи<br>Це великі блоки web-сторінки. При відображенні браузер </h3> <div class="image"> <a href="/img/tmb/15/1450446/f6323778aeb5ba89e923dc65e1a7406a-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Блочні елементиЦе великі блоки web-сторінки. При відображенні браузер автоматично додає розрив рядка до і після блочного елемента, при цьому він займає всю доступну ширину (за умовчанням відображається на веб-сторінці у вигляді прямокутника).Висота блочного елемента обчислюється браузером автоматично, виходячи з обсягу його вмісту.Текст в блокових елементах за замовчуванням вирівнюється по лівому краю."><img src="/img/tmb/15/1450446/f6323778aeb5ba89e923dc65e1a7406a-720x.jpg" title="Мова розмітки гіпертексту" alt="Блочні елементиЦе великі блоки web-сторінки. При відображенні браузер автоматично додає розрив"></a> </div> <div class="text"> <h4>автоматично додає розрив рядка до і після блочного елемента,</h4> при цьому він займає всю доступну ширину (за умовчанням відображається на веб-сторінці у вигляді прямокутника).<br>Висота блочного елемента обчислюється браузером автоматично, виходячи з обсягу його вмісту.<br>Текст в блокових елементах за замовчуванням вирівнюється по лівому краю.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide28"> <a href="/img/tmb/15/1450446/bb382bba6be7a2b92bcf1726846c9e69-720x.jpg" target="_blank">Слайд 28</a> Блочні елементи<br>Зазвичай блокові елементи використовуються, щоб розділити вміст </h3> <div class="image"> <a href="/img/tmb/15/1450446/bb382bba6be7a2b92bcf1726846c9e69-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Блочні елементиЗазвичай блокові елементи використовуються, щоб розділити вміст web-сторінки на логічні блоки (наприклад, заголовок (шапка сайту), меню, блок з контентом, нижній колонтитул і ін.).Блокові елементи неможна вкладати в рядкові, винятком є лише посилання і осередки таблиць, всередині яких за стандартом HTML5 можуть бути розташовані блокові елементи.Examples of Block Elements: , , , , , , , and ."><img src="/img/tmb/15/1450446/bb382bba6be7a2b92bcf1726846c9e69-720x.jpg" title="Мова розмітки гіпертексту" alt="Блочні елементиЗазвичай блокові елементи використовуються, щоб розділити вміст web-сторінки на логічні"></a> </div> <div class="text"> <h4>web-сторінки на логічні блоки (наприклад, заголовок (шапка сайту), меню,</h4> блок з контентом, нижній колонтитул і ін.).<br>Блокові елементи неможна вкладати в рядкові, винятком є лише посилання і осередки таблиць, всередині яких за стандартом HTML5 можуть бути розташовані блокові елементи.<br>Examples of Block Elements:<br> <p>, <div>, <form>, <header>, <nav>, <ul>, <li>, and <h1>.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide29"> <a href="/img/tmb/15/1450446/22534d72e9f08e2d37b0cbc8b9b4575c-720x.jpg" target="_blank">Слайд 29</a> Строчні елементи<br>Використовуються для розмітки частин вмісту елементів.<br>Ширина строчного </h3> <div class="image"> <a href="/img/tmb/15/1450446/22534d72e9f08e2d37b0cbc8b9b4575c-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Строчні елементиВикористовуються для розмітки частин вмісту елементів.Ширина строчного елемента дорівнює обсягу вмісту.На відміну від блокових елементів браузер не додає розрив рядка до і після строчного елемента, тому, якщо кілька малих елементів йдуть підряд один за одним, вони розташовуються на одному рядку і переносяться на інший рядок при необхідності.У більшості випадків всередину строчних елементів допустимо поміщати інші строчні елементи, вставляти блокові елементи всередину строчних заборонено.Examples of Inline Elements:, , , , , , , and "><img src="/img/tmb/15/1450446/22534d72e9f08e2d37b0cbc8b9b4575c-720x.jpg" title="Мова розмітки гіпертексту" alt="Строчні елементиВикористовуються для розмітки частин вмісту елементів.Ширина строчного елемента дорівнює обсягу"></a> </div> <div class="text"> <h4>елемента дорівнює обсягу вмісту.<br>На відміну від блокових елементів браузер</h4> не додає розрив рядка до і після строчного елемента, тому, якщо кілька малих елементів йдуть підряд один за одним, вони розташовуються на одному рядку і переносяться на інший рядок при необхідності.<br>У більшості випадків всередину строчних елементів допустимо поміщати інші строчні елементи, вставляти блокові елементи всередину строчних заборонено.<br>Examples of Inline Elements:<br><a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide30"> <a href="/img/tmb/15/1450446/f79115fedeb02546835442ca377fb74c-720x.jpg" target="_blank">Слайд 30</a> Взаємодія блочних і строчних елементів<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/f79115fedeb02546835442ca377fb74c-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Взаємодія блочних і строчних елементів"><img src="/img/tmb/15/1450446/f79115fedeb02546835442ca377fb74c-720x.jpg" title="Мова розмітки гіпертексту" alt="Взаємодія блочних і строчних елементів"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide31"> <a href="/img/tmb/15/1450446/e448b97effb50640da2e97bcf3e357d5-720x.jpg" target="_blank">Слайд 31</a> Підключення<br>Посилання () – зв'язок із зовнішнім документом<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/e448b97effb50640da2e97bcf3e357d5-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ПідключенняПосилання () – зв'язок із зовнішнім документомСкрипти () – опис скриптів"><img src="/img/tmb/15/1450446/e448b97effb50640da2e97bcf3e357d5-720x.jpg" title="Мова розмітки гіпертексту" alt="ПідключенняПосилання () – зв'язок із зовнішнім документомСкрипти () – опис скриптів"></a> </div> <div class="text"> <h4>href="main.css" rel="Stylesheet" /><br>Скрипти () – опис скриптів<br><br><br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide32"> <a href="/img/tmb/15/1450446/8bb9d3de0753bffb4301d2b386fde4b4-720x.jpg" target="_blank">Слайд 32</a> Коментар<br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/8bb9d3de0753bffb4301d2b386fde4b4-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Коментар"><img src="/img/tmb/15/1450446/8bb9d3de0753bffb4301d2b386fde4b4-720x.jpg" title="Мова розмітки гіпертексту" alt="Коментар"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide33"> <a href="/img/tmb/15/1450446/7510f7ae13510310cfae533b5a82fb5c-720x.jpg" target="_blank">Слайд 33</a> Теги форматування тексту<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/7510f7ae13510310cfae533b5a82fb5c-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Теги форматування тексту"><img src="/img/tmb/15/1450446/7510f7ae13510310cfae533b5a82fb5c-720x.jpg" title="Мова розмітки гіпертексту" alt="Теги форматування тексту"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide34"> <a href="/img/tmb/15/1450446/d7b8a4f98f727f189430aed3115f1b8f-720x.jpg" target="_blank">Слайд 34</a> ШРИФТИ ТА АБЗАЦИ<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/d7b8a4f98f727f189430aed3115f1b8f-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ШРИФТИ ТА АБЗАЦИ"><img src="/img/tmb/15/1450446/d7b8a4f98f727f189430aed3115f1b8f-720x.jpg" title="Мова розмітки гіпертексту" alt="ШРИФТИ ТА АБЗАЦИ"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide35"> <a href="/img/tmb/15/1450446/e7cc0018472e9a4aab6f809421dccda2-720x.jpg" target="_blank">Слайд 35</a> Заголовки<br>Заголовок<br>Заголовок<br>Заголовок<br>Заголовок<br>Заголовок<br>Заголовок heading<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/e7cc0018472e9a4aab6f809421dccda2-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ЗаголовкиЗаголовокЗаголовокЗаголовокЗаголовокЗаголовокЗаголовок heading"><img src="/img/tmb/15/1450446/e7cc0018472e9a4aab6f809421dccda2-720x.jpg" title="Мова розмітки гіпертексту" alt="ЗаголовкиЗаголовокЗаголовокЗаголовокЗаголовокЗаголовокЗаголовок heading"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide36"> <a href="/img/tmb/15/1450446/97fb5cd2eaa8b0ec296b235b4083e73d-720x.jpg" target="_blank">Слайд 36</a> Абзац та розрив строки<br>Абзац paragraph<br><br>Розрив<br>строки break<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/97fb5cd2eaa8b0ec296b235b4083e73d-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Абзац та розрив строкиАбзац paragraphРозривстроки break"><img src="/img/tmb/15/1450446/97fb5cd2eaa8b0ec296b235b4083e73d-720x.jpg" title="Мова розмітки гіпертексту" alt="Абзац та розрив строкиАбзац paragraphРозривстроки break"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide37"> <a href="/img/tmb/15/1450446/5950e02d209edaf78afc05ea92898987-720x.jpg" target="_blank">Слайд 37</a> Шрифт<br>Жирний bold text<br>Курсів italic text<br>Підкреслений underlined text<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/5950e02d209edaf78afc05ea92898987-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ШрифтЖирний bold textКурсів italic textПідкреслений underlined text"><img src="/img/tmb/15/1450446/5950e02d209edaf78afc05ea92898987-720x.jpg" title="Мова розмітки гіпертексту" alt="ШрифтЖирний bold textКурсів italic textПідкреслений underlined text"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide38"> <a href="/img/tmb/15/1450446/32e7fb8c45354294733d6aa9052f19fb-720x.jpg" target="_blank">Слайд 38</a> Верхні та нижні індекси<br>Підстроковий subscripts<br>Надстроковий superscripts<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/32e7fb8c45354294733d6aa9052f19fb-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Верхні та нижні індексиПідстроковий subscriptsНадстроковий superscripts"><img src="/img/tmb/15/1450446/32e7fb8c45354294733d6aa9052f19fb-720x.jpg" title="Мова розмітки гіпертексту" alt="Верхні та нижні індексиПідстроковий subscriptsНадстроковий superscripts"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide39"> <a href="/img/tmb/15/1450446/137f8e7fe6f14f7a510703591cb8fd9c-720x.jpg" target="_blank">Слайд 39</a> Шрифт<br> Текст, який не змінюється </h3> <div class="image"> <a href="/img/tmb/15/1450446/137f8e7fe6f14f7a510703591cb8fd9c-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Шрифт Текст, який не змінюється браузером preformatted textМоношириний teletype or monospaced text"><img src="/img/tmb/15/1450446/137f8e7fe6f14f7a510703591cb8fd9c-720x.jpg" title="Мова розмітки гіпертексту" alt="Шрифт Текст, який не змінюється"></a> </div> <div class="text"> <h4> </h4> браузером</pre> preformatted text<br><tt>Моношириний</tt> teletype or monospaced text<br><br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide40"> <a href="/img/tmb/15/1450446/5cc37624a45620a56d0491ed616b9252-720x.jpg" target="_blank">Слайд 40</a> Цитати<br>У HTML існує кілька тегів для позначення цитат:<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/5cc37624a45620a56d0491ed616b9252-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ЦитатиУ HTML існує кілька тегів для позначення цитат: призначений для виділення довгих цитат, які можуть складатися з декількох абзаців. Тег виділяє цитату як окремий блок тексту з відступами. призначений для виділення коротких цитат в тексті пропозиції. Текст всередині цього тега автоматично обрамляється лапками. використовується для того, щоб виділити джерело цитати, назва твору або автора цитати."><img src="/img/tmb/15/1450446/5cc37624a45620a56d0491ed616b9252-720x.jpg" title="Мова розмітки гіпертексту" alt="ЦитатиУ HTML існує кілька тегів для позначення цитат: призначений для виділення"></a> </div> <div class="text"> <h4>призначений для виділення довгих цитат, які можуть складатися з</h4> декількох абзаців. Тег виділяє цитату як окремий блок тексту з відступами.<br><q> призначений для виділення коротких цитат в тексті пропозиції. Текст всередині цього тега автоматично обрамляється лапками.<br><cite> використовується для того, щоб виділити джерело цитати, назва твору або автора цитати.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide41"> <a href="/img/tmb/15/1450446/aad4ce83f52231615b2fd03e6058be2e-720x.jpg" target="_blank">Слайд 41</a> Зміна тексту<br>Якраз для опису змін призначені теги </h3> <div class="image"> <a href="/img/tmb/15/1450446/aad4ce83f52231615b2fd03e6058be2e-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Зміна текстуЯкраз для опису змін призначені теги і . виділяє текст, який був вилучений у новій версії документа. виділяє текст, який був доданий в новій версії документа.Обидва тега мають атрибут datetime, в якому можна вказати дату і час, коли була внесена та чи інша правка.Найпростішим прикладом застосування цих тегів може служити список помилок. Коли помилка виправлена, її позначають тегом , якщо знайдена нова помилка, то її додають в список і позначають тегом ."><img src="/img/tmb/15/1450446/aad4ce83f52231615b2fd03e6058be2e-720x.jpg" title="Мова розмітки гіпертексту" alt="Зміна текстуЯкраз для опису змін призначені теги і . виділяє текст,"></a> </div> <div class="text"> <h4>і .<br> виділяє текст, який був вилучений у новій</h4> версії документа.<br><Ins> виділяє текст, який був доданий в новій версії документа.<br>Обидва тега мають атрибут datetime, в якому можна вказати дату і час, коли була внесена та чи інша правка.<br>Найпростішим прикладом застосування цих тегів може служити список помилок. Коли помилка виправлена, її позначають тегом <del>, якщо знайдена нова помилка, то її додають в список і позначають тегом <ins>.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide42"> <a href="/img/tmb/15/1450446/dc14aef2ebe6c83abc6fe67a17be270a-720x.jpg" target="_blank">Слайд 42</a> Специальні символи<br>< < или < <br>> > или ><br>" " или </h3> <div class="image"> <a href="/img/tmb/15/1450446/dc14aef2ebe6c83abc6fe67a17be270a-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Специальні символи< < или < > > или >" " или " quote& & или & ampersand© © или © copyright™ ™ или ™ trademark   или no break space…"><img src="/img/tmb/15/1450446/dc14aef2ebe6c83abc6fe67a17be270a-720x.jpg" title="Мова розмітки гіпертексту" alt="Специальні символи< < или < > > или >" " или " quote& & или & ampersand© ©"></a> </div> <div class="text"> <h4>" quote<br>& & или & ampersand<br>© © или © copyright<br>™ ™ или ™ trademark<br>   или</h4> no break space<br>…<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide43"> <a href="/img/tmb/15/1450446/d91a8ec958293730cf91d4e80b7f6e38-720x.jpg" target="_blank">Слайд 43</a> <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/d91a8ec958293730cf91d4e80b7f6e38-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/d91a8ec958293730cf91d4e80b7f6e38-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide44"> <a href="/img/tmb/15/1450446/f8c50efb220487879e4e660212c8db7e-720x.jpg" target="_blank">Слайд 44</a> <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/f8c50efb220487879e4e660212c8db7e-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/f8c50efb220487879e4e660212c8db7e-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide45"> <a href="/img/tmb/15/1450446/38bbc7fe9b4de2d8d79fa6ee497fb696-720x.jpg" target="_blank">Слайд 45</a> КОЛЬОРИ<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/38bbc7fe9b4de2d8d79fa6ee497fb696-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="КОЛЬОРИ"><img src="/img/tmb/15/1450446/38bbc7fe9b4de2d8d79fa6ee497fb696-720x.jpg" title="Мова розмітки гіпертексту" alt="КОЛЬОРИ"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide46"> <a href="/img/tmb/15/1450446/c399821238a19bf197a9c417db2f3092-720x.jpg" target="_blank">Слайд 46</a> Кольори<br>В HTML колір задається двома способами<br>за допомогою шістнадцятирічного </h3> <div class="image"> <a href="/img/tmb/15/1450446/c399821238a19bf197a9c417db2f3092-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="КольориВ HTML колір задається двома способамиза допомогою шістнадцятирічного кодуза назвою деяких кольорів"><img src="/img/tmb/15/1450446/c399821238a19bf197a9c417db2f3092-720x.jpg" title="Мова розмітки гіпертексту" alt="КольориВ HTML колір задається двома способамиза допомогою шістнадцятирічного кодуза назвою деяких кольорів"></a> </div> <div class="text"> <h4>коду<br>за назвою деяких кольорів<br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide47"> <a href="/img/tmb/15/1450446/5ebd525cedf77bf0c4c8a9bf37b51959-720x.jpg" target="_blank">Слайд 47</a> Кольорова модель RGB<br>Червоний Red<br>Зелений Green<br>Синій Blue<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/5ebd525cedf77bf0c4c8a9bf37b51959-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Кольорова модель RGBЧервоний RedЗелений GreenСиній Blue"><img src="/img/tmb/15/1450446/5ebd525cedf77bf0c4c8a9bf37b51959-720x.jpg" title="Мова розмітки гіпертексту" alt="Кольорова модель RGBЧервоний RedЗелений GreenСиній Blue"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide48"> <a href="/img/tmb/15/1450446/ce3500b89e16d7906c2c882a2aa718db-720x.jpg" target="_blank">Слайд 48</a> Кольорова модель RGB<br>Три кольорових складових<br>RED<br>GREEN<br>BLUE<br>Кожна кольорова складова має </h3> <div class="image"> <a href="/img/tmb/15/1450446/ce3500b89e16d7906c2c882a2aa718db-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Кольорова модель RGBТри кольорових складовихREDGREENBLUEКожна кольорова складова має значення в диапазоні 0 ÷ 255 або 00 ÷ FF"><img src="/img/tmb/15/1450446/ce3500b89e16d7906c2c882a2aa718db-720x.jpg" title="Мова розмітки гіпертексту" alt="Кольорова модель RGBТри кольорових складовихREDGREENBLUEКожна кольорова складова має значення в диапазоні"></a> </div> <div class="text"> <h4>значення в диапазоні 0 ÷ 255 або 00 ÷ FF<br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide49"> <a href="/img/tmb/15/1450446/f094be28843692669d4cf5809b844b66-720x.jpg" target="_blank">Слайд 49</a> <br><br><br><br>Кольорова модель RGB<br>Формування кольору DB + 60 + 1C </h3> <div class="image"> <a href="/img/tmb/15/1450446/f094be28843692669d4cf5809b844b66-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Кольорова модель RGBФормування кольору DB + 60 + 1C = DB601CПеред кодом кольору додається символ # #DB601C або #db601c"><img src="/img/tmb/15/1450446/f094be28843692669d4cf5809b844b66-720x.jpg" title="Мова розмітки гіпертексту" alt="Кольорова модель RGBФормування кольору DB + 60 + 1C = DB601CПеред"></a> </div> <div class="text"> <h4>= DB601C<br><br>Перед кодом кольору додається символ # #DB601C або #db601c<br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide50"> <a href="/img/tmb/15/1450446/18ffb486f25fd31bf8faf18a5230fd1a-720x.jpg" target="_blank">Слайд 50</a> Цветовая модель RGB<br>Названия цветов<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/18ffb486f25fd31bf8faf18a5230fd1a-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Цветовая модель RGBНазвания цветов"><img src="/img/tmb/15/1450446/18ffb486f25fd31bf8faf18a5230fd1a-720x.jpg" title="Мова розмітки гіпертексту" alt="Цветовая модель RGBНазвания цветов"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide51"> <a href="/img/tmb/15/1450446/062f11525e2f1008fa79b54f27ad6d62-720x.jpg" target="_blank">Слайд 51</a> Вибір кольору<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/062f11525e2f1008fa79b54f27ad6d62-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Вибір кольору"><img src="/img/tmb/15/1450446/062f11525e2f1008fa79b54f27ad6d62-720x.jpg" title="Мова розмітки гіпертексту" alt="Вибір кольору"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide52"> <a href="/img/tmb/15/1450446/79ba0e33a45e49c90acb934993689f10-720x.jpg" target="_blank">Слайд 52</a> Web-кольори<br>Для кожної колірної складової можна використовувати тільки значення </h3> <div class="image"> <a href="/img/tmb/15/1450446/79ba0e33a45e49c90acb934993689f10-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Web-кольориДля кожної колірної складової можна використовувати тільки значення 00 33 66 99 СС FF"><img src="/img/tmb/15/1450446/79ba0e33a45e49c90acb934993689f10-720x.jpg" title="Мова розмітки гіпертексту" alt="Web-кольориДля кожної колірної складової можна використовувати тільки значення 00 33 66 99 СС FF"></a> </div> <div class="text"> <h4> 00 33 66 99 СС FF<br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide53"> <a href="/img/tmb/15/1450446/2f4e378e5bb093fdbde03473bf92ebeb-720x.jpg" target="_blank">Слайд 53</a> Web-кольори<br>Приклади web-кольорів #336699 #66FF00 #0033СС #FFCC99 #000000 #333333<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/2f4e378e5bb093fdbde03473bf92ebeb-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Web-кольориПриклади web-кольорів #336699 #66FF00 #0033СС #FFCC99 #000000 #333333"><img src="/img/tmb/15/1450446/2f4e378e5bb093fdbde03473bf92ebeb-720x.jpg" title="Мова розмітки гіпертексту" alt="Web-кольориПриклади web-кольорів #336699 #66FF00 #0033СС #FFCC99 #000000 #333333"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide54"> <a href="/img/tmb/15/1450446/a1663d6ed596ada8e205d30f10fc8dd3-720x.jpg" target="_blank">Слайд 54</a> ГІПЕРПОСИЛАННЯ<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/a1663d6ed596ada8e205d30f10fc8dd3-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ГІПЕРПОСИЛАННЯ"><img src="/img/tmb/15/1450446/a1663d6ed596ada8e205d30f10fc8dd3-720x.jpg" title="Мова розмітки гіпертексту" alt="ГІПЕРПОСИЛАННЯ"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide55"> <a href="/img/tmb/15/1450446/1aea5e212cd4c42b4bec0d02d8430ab8-720x.jpg" target="_blank">Слайд 55</a> Визначення<br>Гіперпосилання (англ. Hyperlink) - частина гіпертекстового документа, що </h3> <div class="image"> <a href="/img/tmb/15/1450446/1aea5e212cd4c42b4bec0d02d8430ab8-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ВизначенняГіперпосилання (англ. Hyperlink) - частина гіпертекстового документа, що посилається на інший елемент (текст, заголовок, зображення і т.п.) в самому документі, на інший об'єкт (файл, каталог, додаток), розташований на локальному диску або в комп'ютерній мережі , або на елементи цього об'єкта"><img src="/img/tmb/15/1450446/1aea5e212cd4c42b4bec0d02d8430ab8-720x.jpg" title="Мова розмітки гіпертексту" alt="ВизначенняГіперпосилання (англ. Hyperlink) - частина гіпертекстового документа, що посилається на інший"></a> </div> <div class="text"> <h4>посилається на інший елемент (текст, заголовок, зображення і т.п.)</h4> в самому документі, на інший об'єкт (файл, каталог, додаток), розташований на локальному диску або в комп'ютерній мережі , або на елементи цього об'єкта<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide56"> <a href="/img/tmb/15/1450446/0e61963a7d3ef4d8a66a2df3d9e2005d-720x.jpg" target="_blank">Слайд 56</a> Гіперпосилання<br> Гіперпосилання anchor hyperreference<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/0e61963a7d3ef4d8a66a2df3d9e2005d-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Гіперпосилання Гіперпосилання anchor hyperreference"><img src="/img/tmb/15/1450446/0e61963a7d3ef4d8a66a2df3d9e2005d-720x.jpg" title="Мова розмітки гіпертексту" alt="Гіперпосилання Гіперпосилання anchor hyperreference"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide57"> <a href="/img/tmb/15/1450446/3822601f5ccbff0ed5719ced4203dc7b-720x.jpg" target="_blank">Слайд 57</a> Гіперпосилання<br>Meta<br>FTP<br> Послати листа <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/3822601f5ccbff0ed5719ced4203dc7b-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ГіперпосиланняMetaFTP Послати листа "><img src="/img/tmb/15/1450446/3822601f5ccbff0ed5719ced4203dc7b-720x.jpg" title="Мова розмітки гіпертексту" alt="ГіперпосиланняMetaFTP Послати листа"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide58"> <a href="/img/tmb/15/1450446/fb41f13a38f0f0aaa2d3ea9e7019bae8-720x.jpg" target="_blank">Слайд 58</a> Гіперпосилання<br>Абсолютні КНЕУ<br>Відносні (приклад – файл contents.html) Глава 1 Додаток </h3> <div class="image"> <a href="/img/tmb/15/1450446/fb41f13a38f0f0aaa2d3ea9e7019bae8-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ГіперпосиланняАбсолютні КНЕУВідносні (приклад – файл contents.html) Глава 1 Додаток 2 Новини"><img src="/img/tmb/15/1450446/fb41f13a38f0f0aaa2d3ea9e7019bae8-720x.jpg" title="Мова розмітки гіпертексту" alt="ГіперпосиланняАбсолютні КНЕУВідносні (приклад – файл contents.html) Глава 1 Додаток 2 Новини"></a> </div> <div class="text"> <h4>2 Новини<br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide59"> <a href="/img/tmb/15/1450446/ae89b61294ce7359fa8de433599b1eda-720x.jpg" target="_blank">Слайд 59</a> Посилання на файл<br>Посилання може вказувати на будь-яку веб-сторінку, </h3> <div class="image"> <a href="/img/tmb/15/1450446/ae89b61294ce7359fa8de433599b1eda-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Посилання на файлПосилання може вказувати на будь-яку веб-сторінку, на будь-який файл. Якщо клацнути по посиланню, що веде на файл, то браузер запропонує його завантажити.Однак, якщо браузер вміє обробляти цей тип файлів, то вміст файлу відкриється прямо в браузері. Найчастіше так відбувається з зображеннями. Останнім часом браузери навчилися відкривати .pdf файли і багато інших."><img src="/img/tmb/15/1450446/ae89b61294ce7359fa8de433599b1eda-720x.jpg" title="Мова розмітки гіпертексту" alt="Посилання на файлПосилання може вказувати на будь-яку веб-сторінку, на будь-який файл."></a> </div> <div class="text"> <h4>на будь-який файл. Якщо клацнути по посиланню, що веде</h4> на файл, то браузер запропонує його завантажити.<br>Однак, якщо браузер вміє обробляти цей тип файлів, то вміст файлу відкриється прямо в браузері. Найчастіше так відбувається з зображеннями. Останнім часом браузери навчилися відкривати .pdf файли і багато інших.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide60"> <a href="/img/tmb/15/1450446/5ed339919df2527bc61e9bb9fe3978c1-720x.jpg" target="_blank">Слайд 60</a> </h3> <div class="image"> <a href="/img/tmb/15/1450446/5ed339919df2527bc61e9bb9fe3978c1-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/5ed339919df2527bc61e9bb9fe3978c1-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide61"> <a href="/img/tmb/15/1450446/29eba0bbeeb9940c5319862da733a486-720x.jpg" target="_blank">Слайд 61</a> Гіперпосилання всередені документу<br>Закладки Що таке ICANN Що таке </h3> <div class="image"> <a href="/img/tmb/15/1450446/29eba0bbeeb9940c5319862da733a486-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Гіперпосилання всередені документуЗакладки Що таке ICANN Що таке система домених імен DNSПосилання на закладку Що таке ICANN Що таке система домених імен DNS"><img src="/img/tmb/15/1450446/29eba0bbeeb9940c5319862da733a486-720x.jpg" title="Мова розмітки гіпертексту" alt="Гіперпосилання всередені документуЗакладки Що таке ICANN Що таке система домених імен"></a> </div> <div class="text"> <h4>система домених імен DNS<br>Посилання на закладку Що таке ICANN </h4> href=#2>Що таке система домених імен DNS</a><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide62"> <a href="/img/tmb/15/1450446/9a771eb85a93ab4acadfb0ddaf92097a-720x.jpg" target="_blank">Слайд 62</a> Гіперпосилання всередені документу <br>Посилання з якорем зазвичай використовуються для </h3> <div class="image"> <a href="/img/tmb/15/1450446/9a771eb85a93ab4acadfb0ddaf92097a-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Гіперпосилання всередені документу Посилання з якорем зазвичай використовуються для створення навігації усередині сторінки. Наприклад, змісту на початку сторінки з великою статтею.Посилання з якорем містить символ #, після якого йде ідентифікатор. Ідентифікатор створюється за допомогою атрибута id, який може бути заданий у будь-якого тега.Можна задати адресу, що складається з одного якоря, наприклад: Глава 1 При натисканні на таке посилання браузер знайде на сторінці елемент з атрибутом id що має значення glava1 і прокрутить вікно сторінки до нього. Тобто перезавантаження сторінки не відбудеться.Якір можна використовувати і в абсолютних адресах, тоді після переходу на потрібну сторінку відбудеться прокрутка до заданої частини цієї сторінки."><img src="/img/tmb/15/1450446/9a771eb85a93ab4acadfb0ddaf92097a-720x.jpg" title="Мова розмітки гіпертексту" alt="Гіперпосилання всередені документу Посилання з якорем зазвичай використовуються для створення навігації усередині"></a> </div> <div class="text"> <h4>створення навігації усередині сторінки. Наприклад, змісту на початку сторінки</h4> з великою статтею.<br>Посилання з якорем містить символ #, після якого йде ідентифікатор. Ідентифікатор створюється за допомогою атрибута id, який може бути заданий у будь-якого тега.<br>Можна задати адресу, що складається з одного якоря, наприклад:<br><a href="#glava1"> Глава 1 </a> При натисканні на таке посилання браузер знайде на сторінці елемент з атрибутом id що має значення glava1 і прокрутить вікно сторінки до нього. Тобто перезавантаження сторінки не відбудеться.<br>Якір можна використовувати і в абсолютних адресах, тоді після переходу на потрібну сторінку відбудеться прокрутка до заданої частини цієї сторінки.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide63"> <a href="/img/tmb/15/1450446/d72b9451680bf0d62c2a582d7e9e64bf-720x.jpg" target="_blank">Слайд 63</a> Гіперпосилання всередені документу<br>Закладки Що таке ICANN Що таке </h3> <div class="image"> <a href="/img/tmb/15/1450446/d72b9451680bf0d62c2a582d7e9e64bf-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Гіперпосилання всередені документуЗакладки Що таке ICANN Що таке DNSПосилання на закладку Що таке ICANN Що таке DNS"><img src="/img/tmb/15/1450446/d72b9451680bf0d62c2a582d7e9e64bf-720x.jpg" title="Мова розмітки гіпертексту" alt="Гіперпосилання всередені документуЗакладки Що таке ICANN Що таке DNSПосилання на закладку"></a> </div> <div class="text"> <h4>DNS<br>Посилання на закладку Що таке ICANN Що таке</h4> DNS</a><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide64"> <a href="/img/tmb/15/1450446/aa28ddccf884f81e71baaed537915b57-720x.jpg" target="_blank">Слайд 64</a> Гіперпосилання<br>Закладка в файлі chapter 1.html Питання </h3> <div class="image"> <a href="/img/tmb/15/1450446/aa28ddccf884f81e71baaed537915b57-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ГіперпосиланняЗакладка в файлі chapter 1.html Питання до гл. 1 Закладка в файлі chapter2.html Питання до гл. 2 Посилання на закладки в файлі contents.html Питання до гл. 1 Питання до гл. 2 "><img src="/img/tmb/15/1450446/aa28ddccf884f81e71baaed537915b57-720x.jpg" title="Мова розмітки гіпертексту" alt="ГіперпосиланняЗакладка в файлі chapter 1.html Питання до гл. 1 Закладка в"></a> </div> <div class="text"> <h4>до гл. 1 <br>Закладка в файлі chapter2.html </h4> Питання до гл. 2 </a><br>Посилання на закладки в файлі contents.html <a href="/chapter1.html#questions"> Питання до гл. 1 </a> <a href="/chapter2.html#questions"> Питання до гл. 2 </a><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide65"> <a href="/img/tmb/15/1450446/8790cfe27d9b76c45aef1c63682c46b6-720x.jpg" target="_blank">Слайд 65</a> Гіперпосилання<br> Надіслати листа <br>cc – Carbon Copy<br>bcc – </h3> <div class="image"> <a href="/img/tmb/15/1450446/8790cfe27d9b76c45aef1c63682c46b6-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Гіперпосилання Надіслати листа cc – Carbon Copybcc – Blind Carbon Copy"><img src="/img/tmb/15/1450446/8790cfe27d9b76c45aef1c63682c46b6-720x.jpg" title="Мова розмітки гіпертексту" alt="Гіперпосилання Надіслати листа cc – Carbon Copybcc – Blind Carbon Copy"></a> </div> <div class="text"> <h4>Blind Carbon Copy<br><br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide66"> <a href="/img/tmb/15/1450446/559cf6bf4569c5834f4a5159c1f38082-720x.jpg" target="_blank">Слайд 66</a> Підказка<br>Для того, щоб додати посиланням підказку, треба використовувати </h3> <div class="image"> <a href="/img/tmb/15/1450446/559cf6bf4569c5834f4a5159c1f38082-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ПідказкаДля того, щоб додати посиланням підказку, треба використовувати атрибут title. наприклад:Підказка з'явиться, коли курсор затримається над посиланням деякий час.Підказки допомагають роз'яснити призначення незрозумілих посилань, а також посилань-зображень."><img src="/img/tmb/15/1450446/559cf6bf4569c5834f4a5159c1f38082-720x.jpg" title="Мова розмітки гіпертексту" alt="ПідказкаДля того, щоб додати посиланням підказку, треба використовувати атрибут title. наприклад:Підказка"></a> </div> <div class="text"> <h4>атрибут title. наприклад:<br><br>Підказка з'явиться, коли курсор затримається</h4> над посиланням деякий час.<br>Підказки допомагають роз'яснити призначення незрозумілих посилань, а також посилань-зображень.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide67"> <a href="/img/tmb/15/1450446/b1e94b99e0c0b8a894ff67d971dfdb1e-720x.jpg" target="_blank">Слайд 67</a> ЗОБРАЖЕННЯ<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/b1e94b99e0c0b8a894ff67d971dfdb1e-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ЗОБРАЖЕННЯ"><img src="/img/tmb/15/1450446/b1e94b99e0c0b8a894ff67d971dfdb1e-720x.jpg" title="Мова розмітки гіпертексту" alt="ЗОБРАЖЕННЯ"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide68"> <a href="/img/tmb/15/1450446/5b65b6b5532a6cd0f9410e17f89374e5-720x.jpg" target="_blank">Слайд 68</a> Формати графічних файлів<br>jpg (jpeg) – Joint Photographic Experts </h3> <div class="image"> <a href="/img/tmb/15/1450446/5b65b6b5532a6cd0f9410e17f89374e5-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Формати графічних файлівjpg (jpeg) – Joint Photographic Experts Groupgif – Graphic Interchange Formatpng – Portable Graphic Network"><img src="/img/tmb/15/1450446/5b65b6b5532a6cd0f9410e17f89374e5-720x.jpg" title="Мова розмітки гіпертексту" alt="Формати графічних файлівjpg (jpeg) – Joint Photographic Experts Groupgif – Graphic"></a> </div> <div class="text"> <h4>Group<br>gif – Graphic Interchange Format<br>png – Portable Graphic Network<br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide69"> <a href="/img/tmb/15/1450446/5c752f241e1092dc332c46382880a304-720x.jpg" target="_blank">Слайд 69</a> Вставка зображень<br> image source<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/5c752f241e1092dc332c46382880a304-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Вставка зображень image source"><img src="/img/tmb/15/1450446/5c752f241e1092dc332c46382880a304-720x.jpg" title="Мова розмітки гіпертексту" alt="Вставка зображень image source"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide70"> <a href="/img/tmb/15/1450446/7f3d30afe9a48b1fe7d897de34eb37a8-720x.jpg" target="_blank">Слайд 70</a> Альтернативний текст <br>Якщо у користувача відключені зображення або їх </h3> <div class="image"> <a href="/img/tmb/15/1450446/7f3d30afe9a48b1fe7d897de34eb37a8-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Альтернативний текст Якщо у користувача відключені зображення або їх неможливо завантажити, то в браузері відображається альтернативний текст. Наприклад, якщо меню зроблено за допомогою зображень, то альтернативний текст допоможе зрозуміти, куди веде кожен пункт. Загалом, ставити альтернативний текст добре.Альтернативний текст зображення задається за допомогою атрибута alt. приклад:"><img src="/img/tmb/15/1450446/7f3d30afe9a48b1fe7d897de34eb37a8-720x.jpg" title="Мова розмітки гіпертексту" alt="Альтернативний текст Якщо у користувача відключені зображення або їх неможливо завантажити, то"></a> </div> <div class="text"> <h4>неможливо завантажити, то в браузері відображається альтернативний текст. Наприклад,</h4> якщо меню зроблено за допомогою зображень, то альтернативний текст допоможе зрозуміти, куди веде кожен пункт. Загалом, ставити альтернативний текст добре.<br>Альтернативний текст зображення задається за допомогою атрибута alt. приклад:<br><Img src = "cat.png" alt = "Кіт у повному розквіті сил"><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide71"> <a href="/img/tmb/15/1450446/7223d8d07c48ae3116684fcd69ed5d5f-720x.jpg" target="_blank">Слайд 71</a> Розміри зображень <br>Щоб керувати шириною і висотою зображення, потрібно </h3> <div class="image"> <a href="/img/tmb/15/1450446/7223d8d07c48ae3116684fcd69ed5d5f-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Розміри зображень Щоб керувати шириною і висотою зображення, потрібно використовувати атрибути width і height. приклад: У прикладі зображенню задана ширина 100px. Зверніть увагу, що в атрибуті width після цифри немає px. Якщо ви задаєте розмір картинки в пікселях, то використовуйте просто цифри. Додавати px не потрібно, такий стандарт.У другому прикладі зображенню задана відносна ширина, 50 відсотків: Висоту в процентах зазвичай не задають.Якщо задати тільки один з розмірів, ширину або висоту, то другу розмірність браузер вирахує самостійно виходячи з пропорцій зображення.Якщо ж поставити і ширину, і висоту для картинки: То браузер може порушити пропорції вихідного зображення."><img src="/img/tmb/15/1450446/7223d8d07c48ae3116684fcd69ed5d5f-720x.jpg" title="Мова розмітки гіпертексту" alt="Розміри зображень Щоб керувати шириною і висотою зображення, потрібно використовувати атрибути width"></a> </div> <div class="text"> <h4>використовувати атрибути width і height. приклад:<br></h4> src = "..."> У прикладі зображенню задана ширина 100px. Зверніть увагу, що в атрибуті width після цифри немає px. Якщо ви задаєте розмір картинки в пікселях, то використовуйте просто цифри. Додавати px не потрібно, такий стандарт.<br>У другому прикладі зображенню задана відносна ширина, 50 відсотків:<br><Img width = "50%" src = "..."> Висоту в процентах зазвичай не задають.<br>Якщо задати тільки один з розмірів, ширину або висоту, то другу розмірність браузер вирахує самостійно виходячи з пропорцій зображення.<br>Якщо ж поставити і ширину, і висоту для картинки:<br><Img width = "100" height = "100" src = "..."> То браузер може порушити пропорції вихідного зображення.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide72"> <a href="/img/tmb/15/1450446/d6c0df70b770cdb5078f2c6ff2eebf13-720x.jpg" target="_blank">Слайд 72</a> Зображення - посилання<br>Посилання можна робити не тільки з </h3> <div class="image"> <a href="/img/tmb/15/1450446/d6c0df70b770cdb5078f2c6ff2eebf13-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Зображення - посиланняПосилання можна робити не тільки з допомогою тексту, а й за допомогою зображень. Для цього потрібно обернути тег в тег . наприклад: Часто посилання-зображення використовуються в галереях, коли зі зменшеною версією зображення ставиться посилання на повнорозмірне зображення. "><img src="/img/tmb/15/1450446/d6c0df70b770cdb5078f2c6ff2eebf13-720x.jpg" title="Мова розмітки гіпертексту" alt="Зображення - посиланняПосилання можна робити не тільки з допомогою тексту, а"></a> </div> <div class="text"> <h4>допомогою тексту, а й за допомогою зображень. Для цього</h4> потрібно обернути тег <img> в тег <a>. наприклад:<br><a href="http://keks.ua"> <img src = "cat.png" alt = "Кекс"> </a><br>Часто посилання-зображення використовуються в галереях, коли зі зменшеною версією зображення ставиться посилання на повнорозмірне зображення. <br> </div> <hr> </div> <div class="descrip"> <h3 id="slide73"> <a href="/img/tmb/15/1450446/b407d75463cd486f94dfae7576c2024a-720x.jpg" target="_blank">Слайд 73</a> Основні атрибути елементу <br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/b407d75463cd486f94dfae7576c2024a-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Основні атрибути елементу "><img src="/img/tmb/15/1450446/b407d75463cd486f94dfae7576c2024a-720x.jpg" title="Мова розмітки гіпертексту" alt="Основні атрибути елементу"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide74"> <a href="/img/tmb/15/1450446/177ee941b2ef659fba7ab189bb27df2c-720x.jpg" target="_blank">Слайд 74</a> СПИСКИ<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/177ee941b2ef659fba7ab189bb27df2c-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="СПИСКИ"><img src="/img/tmb/15/1450446/177ee941b2ef659fba7ab189bb27df2c-720x.jpg" title="Мова розмітки гіпертексту" alt="СПИСКИ"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide75"> <a href="/img/tmb/15/1450446/16e3417127ed047f12a08c339794789f-720x.jpg" target="_blank">Слайд 75</a> Списки<br>Для створення списків в HTML потрібні два елементи, </h3> <div class="image"> <a href="/img/tmb/15/1450446/16e3417127ed047f12a08c339794789f-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="СпискиДля створення списків в HTML потрібні два елементи, які створюють список тільки за умови використання їх обох. Перший застосовується для розмітки кожного пункту списку. Другий визначає тип створюваного списку: упорядкований (нумерований) або невпорядкований (маркирований) .̆невпорядкований список - упорядкований список - елемент списку - "><img src="/img/tmb/15/1450446/16e3417127ed047f12a08c339794789f-720x.jpg" title="Мова розмітки гіпертексту" alt="СпискиДля створення списків в HTML потрібні два елементи, які створюють список"></a> </div> <div class="text"> <h4>які створюють список тільки за умови використання їх обох.</h4> Перший застосовується для розмітки кожного пункту списку. Другий визначає тип створюваного списку: упорядкований (нумерований) або невпорядкований (маркирований) .̆<br>невпорядкований список - <ul><br>упорядкований список - <ol><br>елемент списку - <li><br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide76"> <a href="/img/tmb/15/1450446/16d13ef5a349c2031212d8e421f6cec5-720x.jpg" target="_blank">Слайд 76</a> Маркирований список<br> Червоний Жовтий </h3> <div class="image"> <a href="/img/tmb/15/1450446/16d13ef5a349c2031212d8e421f6cec5-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Маркирований список Червоний Жовтий Зелений unordered list list itemЧервонийЖовтийЗелений"><img src="/img/tmb/15/1450446/16d13ef5a349c2031212d8e421f6cec5-720x.jpg" title="Мова розмітки гіпертексту" alt="Маркирований список Червоний Жовтий Зелений unordered list list itemЧервонийЖовтийЗелений"></a> </div> <div class="text"> <h4> Зелений unordered list list item<br>Червоний<br>Жовтий<br>Зелений<br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide77"> <a href="/img/tmb/15/1450446/db8d4647f5ca305ccd6ec789503fda75-720x.jpg" target="_blank">Слайд 77</a> Нумерований список<br> Червоний </h3> <div class="image"> <a href="/img/tmb/15/1450446/db8d4647f5ca305ccd6ec789503fda75-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Нумерований список Червоний Жовтий Зелений ordered list list itemЧервонийЖовтийЗелений"><img src="/img/tmb/15/1450446/db8d4647f5ca305ccd6ec789503fda75-720x.jpg" title="Мова розмітки гіпертексту" alt="Нумерований список Червоний Жовтий Зелений ordered list list itemЧервонийЖовтийЗелений"></a> </div> <div class="text"> <h4>Жовтий Зелений ordered list list item<br>Червоний<br>Жовтий<br>Зелений<br><br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide78"> <a href="/img/tmb/15/1450446/8bafecf4d133928346a2d485ed8946d1-720x.jpg" target="_blank">Слайд 78</a> </h3> <div class="image"> <a href="/img/tmb/15/1450446/8bafecf4d133928346a2d485ed8946d1-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/8bafecf4d133928346a2d485ed8946d1-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide79"> <a href="/img/tmb/15/1450446/ae4b7534ac2a8505780728a68c5a1ae0-720x.jpg" target="_blank">Слайд 79</a> </h3> <div class="image"> <a href="/img/tmb/15/1450446/ae4b7534ac2a8505780728a68c5a1ae0-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/ae4b7534ac2a8505780728a68c5a1ae0-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide80"> <a href="/img/tmb/15/1450446/38273536491d38946a9cceb9bb79224d-720x.jpg" target="_blank">Слайд 80</a> Багаторівневий список<br>Створити багаторівневий список досить просто.<br>Спочатку потрібно створити </h3> <div class="image"> <a href="/img/tmb/15/1450446/38273536491d38946a9cceb9bb79224d-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Багаторівневий списокСтворити багаторівневий список досить просто.Спочатку потрібно створити список першого рівня, а потім всередину будь-якого елементу цього списку, між тегами і , додати список другого рівня. При цьому необхідно акуратно закривати всі теги.Приклад правильного коду: 1 1.1   1.2   2 Кількість рівнів в списках не обмежена. В багаторівневому списку можна використовувати як впорядковані, так і невпорядковані списки."><img src="/img/tmb/15/1450446/38273536491d38946a9cceb9bb79224d-720x.jpg" title="Мова розмітки гіпертексту" alt="Багаторівневий списокСтворити багаторівневий список досить просто.Спочатку потрібно створити список першого рівня,"></a> </div> <div class="text"> <h4>список першого рівня, а потім всередину будь-якого елементу цього</h4> списку, між тегами <li> і </ li>, додати список другого рівня. При цьому необхідно акуратно закривати всі теги.<br>Приклад правильного коду:<br><Ul><br><Li> 1<br><Ul><br><Li> 1.1 </ li><br>  <Li> 1.2 </ li><br>  </ Ul> </ li> <li> 2 </ li> </ ul><br>Кількість рівнів в списках не обмежена. В багаторівневому списку можна використовувати як впорядковані, так і невпорядковані списки.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide81"> <a href="/img/tmb/15/1450446/ab5c23c69ab0dcd73fe64422e33ba890-720x.jpg" target="_blank">Слайд 81</a> Список визначень<br>Список визначень створюється за допомогою трьох ключових </h3> <div class="image"> <a href="/img/tmb/15/1450446/ab5c23c69ab0dcd73fe64422e33ba890-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Список визначеньСписок визначень створюється за допомогою трьох ключових слів: позначає сам список визначень; позначає термін; позначає визначення терміна.Теги і пишуться парами всередині .наприклад:  Термін Визначення   Другий термін І його визначення   Кішка Вовняна виріб розважального характеру   "><img src="/img/tmb/15/1450446/ab5c23c69ab0dcd73fe64422e33ba890-720x.jpg" title="Мова розмітки гіпертексту" alt="Список визначеньСписок визначень створюється за допомогою трьох ключових слів: позначає сам"></a> </div> <div class="text"> <h4>слів:<br> позначає сам список визначень;<br> позначає термін;<br> позначає визначення</h4> терміна.<br>Теги <dt> і <dd> пишуться парами всередині <dl>.<br>наприклад:<br><dl><br>  <dt> Термін </ dt> <dd> Визначення </ dd><br>  <dt> Другий термін </ dt> <dd> І його визначення </ dd><br>  <dt> Кішка </ dt> <dd> Вовняна виріб розважального характеру </ dd><br>  </ dl><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide82"> <a href="/img/tmb/15/1450446/d9a33759651863a7a24488d383b2bef1-720x.jpg" target="_blank">Слайд 82</a> </h3> <div class="image"> <a href="/img/tmb/15/1450446/d9a33759651863a7a24488d383b2bef1-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/d9a33759651863a7a24488d383b2bef1-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide83"> <a href="/img/tmb/15/1450446/803b5fc7cbefb01e031bf324c80c7dc0-720x.jpg" target="_blank">Слайд 83</a> Атрибути тегів списка<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/803b5fc7cbefb01e031bf324c80c7dc0-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Атрибути тегів списка"><img src="/img/tmb/15/1450446/803b5fc7cbefb01e031bf324c80c7dc0-720x.jpg" title="Мова розмітки гіпертексту" alt="Атрибути тегів списка"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide84"> <a href="/img/tmb/15/1450446/932fb23e60100b5feb1a1a1b98a0d7da-720x.jpg" target="_blank">Слайд 84</a> ТАБЛИЦІ<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/932fb23e60100b5feb1a1a1b98a0d7da-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ТАБЛИЦІ"><img src="/img/tmb/15/1450446/932fb23e60100b5feb1a1a1b98a0d7da-720x.jpg" title="Мова розмітки гіпертексту" alt="ТАБЛИЦІ"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide85"> <a href="/img/tmb/15/1450446/c440531c9cde40f804b9003019d7e458-720x.jpg" target="_blank">Слайд 85</a> HTML таблиці<br>HTML таблиці складаються з осередків, що утворюються </h3> <div class="image"> <a href="/img/tmb/15/1450446/c440531c9cde40f804b9003019d7e458-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="HTML таблиціHTML таблиці складаються з осередків, що утворюються при перетині рядків і стовпців.Осередки таблиць можуть містити будь-які HTML-елементи, такі як заголовки, списки, текст, зображення, елементи форм, а також інші таблиці.Таблиці в HTML-документах використовуються не тільки для угруповання пов'язаної інформації, але і для точного позиціонування фрагментів тексту і зображень відносно один одного.За допомогою таблиць можна вирівняти фрагменти сторінок відносно один одного, розмістити поруч зображення і текст, управляти колірним оформленням, розбити текст на стовпці.Для всіх елементів таблиці доступні глобальні атрибути, а також власні атрибути."><img src="/img/tmb/15/1450446/c440531c9cde40f804b9003019d7e458-720x.jpg" title="Мова розмітки гіпертексту" alt="HTML таблиціHTML таблиці складаються з осередків, що утворюються при перетині рядків"></a> </div> <div class="text"> <h4>при перетині рядків і стовпців.<br>Осередки таблиць можуть містити будь-які</h4> HTML-елементи, такі як заголовки, списки, текст, зображення, елементи форм, а також інші таблиці.<br>Таблиці в HTML-документах використовуються не тільки для угруповання пов'язаної інформації, але і для точного позиціонування фрагментів тексту і зображень відносно один одного.<br>За допомогою таблиць можна вирівняти фрагменти сторінок відносно один одного, розмістити поруч зображення і текст, управляти колірним оформленням, розбити текст на стовпці.<br>Для всіх елементів таблиці доступні глобальні атрибути, а також власні атрибути.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide86"> <a href="/img/tmb/15/1450446/847d371880d7ac314795e627d9e768d3-720x.jpg" target="_blank">Слайд 86</a> Тегі для розмітки таблиці<br>Для розмітки таблиці використовуються три </h3> <div class="image"> <a href="/img/tmb/15/1450446/847d371880d7ac314795e627d9e768d3-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Тегі для розмітки таблиціДля розмітки таблиці використовуються три основних тега ... Розмічає таблицю в цілому ... (table row) Розмічає рядок таблиці ... (table data ) розмічає осередок в рядку таблиціДля того, щоб додати стовпець в таблицю, треба в кожен рядок додати по осередку ."><img src="/img/tmb/15/1450446/847d371880d7ac314795e627d9e768d3-720x.jpg" title="Мова розмітки гіпертексту" alt="Тегі для розмітки таблиціДля розмітки таблиці використовуються три основних тега ..."></a> </div> <div class="text"> <h4>основних тега<br> ... Розмічає таблицю в</h4> цілому <Tr> ... </ tr> (table row) Розмічає рядок таблиці <Td> ... </ td> (table data ) розмічає осередок в рядку таблиці<br>Для того, щоб додати стовпець в таблицю, треба в кожен рядок <tr> додати по осередку <td>.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide87"> <a href="/img/tmb/15/1450446/669b1e80537ba9c5fd0af683d69746b3-720x.jpg" target="_blank">Слайд 87</a> Таблиця<br> Ячейка 1 </h3> <div class="image"> <a href="/img/tmb/15/1450446/669b1e80537ba9c5fd0af683d69746b3-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Таблиця Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 "><img src="/img/tmb/15/1450446/669b1e80537ba9c5fd0af683d69746b3-720x.jpg" title="Мова розмітки гіпертексту" alt="Таблиця Ячейка 1 Ячейка 2"></a> </div> <div class="text"> <h4>Ячейка 2 Ячейка</h4> 3</td> <td>Ячейка 4</td> </tr> </table><br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide88"> <a href="/img/tmb/15/1450446/08d9e0c7b9dacd5b6412df80ad30b017-720x.jpg" target="_blank">Слайд 88</a> Розміри ячейок і стовбців<br>Розміри осередків і стовпців теж можна </h3> <div class="image"> <a href="/img/tmb/15/1450446/08d9e0c7b9dacd5b6412df80ad30b017-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Розміри ячейок і стовбцівРозміри осередків і стовпців теж можна задавати вручну, особливо якщо вам не подобається, як браузер розподілив ширину колонок. Розміри осередків задаються точно так же, як і розміри таблиці: за допомогою атрибутів width і height або CSS."><img src="/img/tmb/15/1450446/08d9e0c7b9dacd5b6412df80ad30b017-720x.jpg" title="Мова розмітки гіпертексту" alt="Розміри ячейок і стовбцівРозміри осередків і стовпців теж можна задавати вручну, особливо"></a> </div> <div class="text"> <h4>задавати вручну, особливо якщо вам не подобається, як браузер</h4> розподілив ширину колонок. Розміри осередків задаються точно так же, як і розміри таблиці: за допомогою атрибутів width і height або CSS.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide89"> <a href="/img/tmb/15/1450446/b0f190905f873d4adda9df2227fb58e9-720x.jpg" target="_blank">Слайд 89</a> Ширина і висота таблиці<br>За замовчуванням ширина і висота таблиці </h3> <div class="image"> <a href="/img/tmb/15/1450446/b0f190905f873d4adda9df2227fb58e9-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Ширина і висота таблиціЗа замовчуванням ширина і висота таблиці залежить від вмісту і відступів всередині осередків. Чим менше вмісту, тим меньше розміри таблиці.Розмірами можна керувати за допомогою атрибутів таблиці і CSS.Варто зазначити, що у таблиці є мінімальні розміри, які залежать від змісту, меньше яких вона не стиснеться, яке б значення ширини або висоти ні задавалося.Розміри таблиці можна задавати як в абсолютних одиницях, наприклад, в пікселях - 20px, так і у відносних, у відсотках - 20%."><img src="/img/tmb/15/1450446/b0f190905f873d4adda9df2227fb58e9-720x.jpg" title="Мова розмітки гіпертексту" alt="Ширина і висота таблиціЗа замовчуванням ширина і висота таблиці залежить від вмісту"></a> </div> <div class="text"> <h4>залежить від вмісту і відступів всередині осередків. Чим менше</h4> вмісту, тим меньше розміри таблиці.<br>Розмірами можна керувати за допомогою атрибутів таблиці і CSS.<br>Варто зазначити, що у таблиці є мінімальні розміри, які залежать від змісту, меньше яких вона не стиснеться, яке б значення ширини або висоти ні задавалося.<br>Розміри таблиці можна задавати як в абсолютних одиницях, наприклад, в пікселях - 20px, так і у відносних, у відсотках - 20%.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide90"> <a href="/img/tmb/15/1450446/c9c7105caa631964125e4a0231130146-720x.jpg" target="_blank">Слайд 90</a> Таблиця<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/c9c7105caa631964125e4a0231130146-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Таблиця Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 "><img src="/img/tmb/15/1450446/c9c7105caa631964125e4a0231130146-720x.jpg" title="Мова розмітки гіпертексту" alt="Таблиця Ячейка 1 Ячейка 2"></a> </div> <div class="text"> <h4> Ячейка 1 Ячейка 2 </h4> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </table><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide91"> <a href="/img/tmb/15/1450446/55ac8377dc4bf2092296db0a2661fc2c-720x.jpg" target="_blank">Слайд 91</a> об'єднання осередків<br>Щоб об'єднати комірки по горизонталі, необхідно використовувати </h3> <div class="image"> <a href="/img/tmb/15/1450446/55ac8377dc4bf2092296db0a2661fc2c-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="об'єднання осередківЩоб об'єднати комірки по горизонталі, необхідно використовувати атрибут colspan у тегів або .Коли ви задаєте осередку атрибут colspan зі значенням 2, то осередок як би «розтягується» на осередок праворуч, але той осередок не зникає, а відсувається і в таблиці з'являється новий стовпець. Щоб видалити його, потрібно видалити осередок, яка знаходиться праворуч від «розтягнутого»."><img src="/img/tmb/15/1450446/55ac8377dc4bf2092296db0a2661fc2c-720x.jpg" title="Мова розмітки гіпертексту" alt="об'єднання осередківЩоб об'єднати комірки по горизонталі, необхідно використовувати атрибут colspan у"></a> </div> <div class="text"> <h4>атрибут colspan у тегів або .<br>Коли ви задаєте</h4> осередку атрибут colspan зі значенням 2, то осередок як би «розтягується» на осередок праворуч, але той осередок не зникає, а відсувається і в таблиці з'являється новий стовпець. Щоб видалити його, потрібно видалити осередок, яка знаходиться праворуч від «розтягнутого».<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide92"> <a href="/img/tmb/15/1450446/b19df0b7088f9c353f8da67bcc819f8a-720x.jpg" target="_blank">Слайд 92</a> Таблица<br> Ячейка 1Ячейка 2 </h3> <div class="image"> <a href="/img/tmb/15/1450446/b19df0b7088f9c353f8da67bcc819f8a-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Таблица Ячейка 1Ячейка 2 Ячейка 3 "><img src="/img/tmb/15/1450446/b19df0b7088f9c353f8da67bcc819f8a-720x.jpg" title="Мова розмітки гіпертексту" alt="Таблица Ячейка 1Ячейка 2 Ячейка 3"></a> </div> <div class="text"> <h4>Ячейка 3 <br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide93"> <a href="/img/tmb/15/1450446/796baf9ee5f3e336ae4f5cdcead08123-720x.jpg" target="_blank">Слайд 93</a> Объединение ячеек<br>Об'єднання осередків по вертикалі трохи складніше.<br>  Воно </h3> <div class="image"> <a href="/img/tmb/15/1450446/796baf9ee5f3e336ae4f5cdcead08123-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Объединение ячеекОб'єднання осередків по вертикалі трохи складніше.  Воно здійснюється за допомогою атрибута rowspan у тега або .Коли ви задаєте осередку атрибут rowspan зі значенням 2, то осередок як би «розтягується» на наступний рядок. При цьому осередок, який був під «розтягнутим» відсувається в своєму ж рядку вправо, що додає в таблицю зайвий стовпець. Видаливши осередок, яка був під «розтягнутим» ми позбудемося цього стовпчика."><img src="/img/tmb/15/1450446/796baf9ee5f3e336ae4f5cdcead08123-720x.jpg" title="Мова розмітки гіпертексту" alt="Объединение ячеекОб'єднання осередків по вертикалі трохи складніше.  Воно здійснюється за допомогою"></a> </div> <div class="text"> <h4>здійснюється за допомогою атрибута rowspan у тега або</h4> <th>.<br>Коли ви задаєте осередку атрибут rowspan зі значенням 2, то осередок як би «розтягується» на наступний рядок. При цьому осередок, який був під «розтягнутим» відсувається в своєму ж рядку вправо, що додає в таблицю зайвий стовпець. Видаливши осередок, яка був під «розтягнутим» ми позбудемося цього стовпчика.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide94"> <a href="/img/tmb/15/1450446/3039379b628dc1e6c11d459ad65129c5-720x.jpg" target="_blank">Слайд 94</a> Таблиця<br> Ячейка 1 Ячейка </h3> <div class="image"> <a href="/img/tmb/15/1450446/3039379b628dc1e6c11d459ad65129c5-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Таблиця Ячейка 1 Ячейка 2Ячейка 3 "><img src="/img/tmb/15/1450446/3039379b628dc1e6c11d459ad65129c5-720x.jpg" title="Мова розмітки гіпертексту" alt="Таблиця Ячейка 1 Ячейка 2Ячейка 3"></a> </div> <div class="text"> <h4>2Ячейка 3 <br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide95"> <a href="/img/tmb/15/1450446/9a99a2e780d29bf572fb032e7c43181f-720x.jpg" target="_blank">Слайд 95</a> Приклад<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/9a99a2e780d29bf572fb032e7c43181f-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Приклад"><img src="/img/tmb/15/1450446/9a99a2e780d29bf572fb032e7c43181f-720x.jpg" title="Мова розмітки гіпертексту" alt="Приклад"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide96"> <a href="/img/tmb/15/1450446/ad502fbc10aa51e65f6ecbbbe3472b05-720x.jpg" target="_blank">Слайд 96</a> Атрибути <br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/ad502fbc10aa51e65f6ecbbbe3472b05-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Атрибути "><img src="/img/tmb/15/1450446/ad502fbc10aa51e65f6ecbbbe3472b05-720x.jpg" title="Мова розмітки гіпертексту" alt="Атрибути"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide97"> <a href="/img/tmb/15/1450446/cb90a33907940f4b1341d117ad7c8dd6-720x.jpg" target="_blank">Слайд 97</a> Елемент створює підпис таблиці. Додається безпосередньо після </h3> <div class="image"> <a href="/img/tmb/15/1450446/cb90a33907940f4b1341d117ad7c8dd6-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Елемент створює підпис таблиці. Додається безпосередньо після тега , поза описом рядка або комірки."><img src="/img/tmb/15/1450446/cb90a33907940f4b1341d117ad7c8dd6-720x.jpg" title="Мова розмітки гіпертексту" alt="Елемент створює підпис таблиці. Додається безпосередньо після тега , поза описом рядка або комірки."></a> </div> <div class="text"> <h4>тега , поза описом рядка або комірки.<br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide98"> <a href="/img/tmb/15/1450446/03cf7339f505829d318e86115f89ebb2-720x.jpg" target="_blank">Слайд 98</a> Елемент створює структурну групу стовпців, виділяючи логічно </h3> <div class="image"> <a href="/img/tmb/15/1450446/03cf7339f505829d318e86115f89ebb2-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Елемент створює структурну групу стовпців, виділяючи логічно однорідні осередки. Групує один або більше стовпців для форматування, дозволяючи застосувати стилі до стовпців, замість того, щоб повторювати стилі для кожного осередку і для кожного рядка. Додається безпосередньо після тегів і ."><img src="/img/tmb/15/1450446/03cf7339f505829d318e86115f89ebb2-720x.jpg" title="Мова розмітки гіпертексту" alt="Елемент створює структурну групу стовпців, виділяючи логічно однорідні осередки. Групує один"></a> </div> <div class="text"> <h4>однорідні осередки. Групує один або більше стовпців для форматування,</h4> дозволяючи застосувати стилі до стовпців, замість того, щоб повторювати стилі для кожного осередку і для кожного рядка. Додається безпосередньо після тегів <table> і <caption>.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide99"> <a href="/img/tmb/15/1450446/331f2d032a11d9cc2a9b170ae6f80666-720x.jpg" target="_blank">Слайд 99</a> Елемент формує неструктурні групи стовпців, які ділять </h3> <div class="image"> <a href="/img/tmb/15/1450446/331f2d032a11d9cc2a9b170ae6f80666-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Елемент формує неструктурні групи стовпців, які ділять таблицю на розділи, що не належать до загальної структури, тобто що не містять інформацію одного типу. Дозволяє задавати властивості стовпців для кожного стовпця в межах елемента . За допомогою атрибута можна змінити основний колір фону осередків."><img src="/img/tmb/15/1450446/331f2d032a11d9cc2a9b170ae6f80666-720x.jpg" title="Мова розмітки гіпертексту" alt="Елемент формує неструктурні групи стовпців, які ділять таблицю на розділи, що"></a> </div> <div class="text"> <h4>таблицю на розділи, що не належать до загальної структури,</h4> тобто що не містять інформацію одного типу. Дозволяє задавати властивості стовпців для кожного стовпця в межах елемента <colgroup>. За допомогою атрибута <style> можна змінити основний колір фону осередків.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide100"> <a href="/img/tmb/15/1450446/fb8183e15aaeb081ebac3aa4d66e2941-720x.jpg" target="_blank">Слайд 100</a> Для елемента доступний атрибут span, що задає </h3> <div class="image"> <a href="/img/tmb/15/1450446/fb8183e15aaeb081ebac3aa4d66e2941-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Для елемента доступний атрибут span, що задає кількість стовпців для об'єднання."><img src="/img/tmb/15/1450446/fb8183e15aaeb081ebac3aa4d66e2941-720x.jpg" title="Мова розмітки гіпертексту" alt="Для елемента доступний атрибут span, що задає кількість стовпців для об'єднання."></a> </div> <div class="text"> <h4>кількість стовпців для об'єднання.<br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide101"> <a href="/img/tmb/15/1450446/65e5980eda84b00c671fcffd671f61d7-720x.jpg" target="_blank">Слайд 101</a> Приклад<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/65e5980eda84b00c671fcffd671f61d7-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Приклад"><img src="/img/tmb/15/1450446/65e5980eda84b00c671fcffd671f61d7-720x.jpg" title="Мова розмітки гіпертексту" alt="Приклад"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide102"> <a href="/img/tmb/15/1450446/a0156ab25611aff5eaef607b0ab73b61-720x.jpg" target="_blank">Слайд 102</a> Елемент створює групу заголовків для рядків таблиці </h3> <div class="image"> <a href="/img/tmb/15/1450446/a0156ab25611aff5eaef607b0ab73b61-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Елемент створює групу заголовків для рядків таблиці з метою завдання єдиного оформлення. Використовується в поєднанні з елементами і для вказівки кожній частині таблиці.Елемент повинен бути використаний в наступному порядку: як дочірній елемент , після і , і перед , і елементами. У межах однієї таблиці можна використовувати один раз.Елемент групує основний вміст таблиці. Використовується в поєднанні з елементами і .Елемент створює групу рядків для представлення інформації про суми або підсумки, розташовану в нижній частині таблиці. Використовується в таблиці один раз. Розташовується після тега , перед тегами і ."><img src="/img/tmb/15/1450446/a0156ab25611aff5eaef607b0ab73b61-720x.jpg" title="Мова розмітки гіпертексту" alt="Елемент створює групу заголовків для рядків таблиці з метою завдання єдиного"></a> </div> <div class="text"> <h4>з метою завдання єдиного оформлення. Використовується в поєднанні з</h4> елементами <tbody> і <tfoot> для вказівки кожній частині таблиці.<br>Елемент повинен бути використаний в наступному порядку: як дочірній елемент <table>, після <caption> і <colgroup>, і перед <tbody>, <tfoot> і <tr> елементами. У межах однієї таблиці можна використовувати один раз.<br>Елемент <tbody> групує основний вміст таблиці. Використовується в поєднанні з елементами <thead> і <tfoot>.<br>Елемент <tfoot> створює групу рядків для представлення інформації про суми або підсумки, розташовану в нижній частині таблиці. Використовується в таблиці один раз. Розташовується після тега <thead>, перед тегами <tbody> і <tr>.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide103"> <a href="/img/tmb/15/1450446/fd5a9d383daf5e89c4d6e9aeb7e9b445-720x.jpg" target="_blank">Слайд 103</a> Синтаксіс<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/fd5a9d383daf5e89c4d6e9aeb7e9b445-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Синтаксіс"><img src="/img/tmb/15/1450446/fd5a9d383daf5e89c4d6e9aeb7e9b445-720x.jpg" title="Мова розмітки гіпертексту" alt="Синтаксіс"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide104"> <a href="/img/tmb/15/1450446/a67056a0399335edecec39aafe1a680e-720x.jpg" target="_blank">Слайд 104</a> Приклад<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/a67056a0399335edecec39aafe1a680e-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Приклад"><img src="/img/tmb/15/1450446/a67056a0399335edecec39aafe1a680e-720x.jpg" title="Мова розмітки гіпертексту" alt="Приклад"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide105"> <a href="/img/tmb/15/1450446/657dca7db17f04e7447a745c44c9e4cd-720x.jpg" target="_blank">Слайд 105</a> ТЕГИ І <br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/657dca7db17f04e7447a745c44c9e4cd-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ТЕГИ І "><img src="/img/tmb/15/1450446/657dca7db17f04e7447a745c44c9e4cd-720x.jpg" title="Мова розмітки гіпертексту" alt="ТЕГИ І"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide106"> <a href="/img/tmb/15/1450446/a5563af3e5751cf505c9914666cc53be-720x.jpg" target="_blank">Слайд 106</a> Теги  і <br>Теги і візуально нічого не роблять. </h3> <div class="image"> <a href="/img/tmb/15/1450446/a5563af3e5751cf505c9914666cc53be-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Теги  і Теги і візуально нічого не роблять. Зате вони дозволяють згрупувати кілька елементів сторінки в один. Якщо необхідно виділити фрагмент тексту всередині абзацу, то слід використовувати тег , так як тег відобразить фрагмент на новому рядку, а не всередині абзацу."><img src="/img/tmb/15/1450446/a5563af3e5751cf505c9914666cc53be-720x.jpg" title="Мова розмітки гіпертексту" alt="Теги  і Теги і візуально нічого не роблять. Зате вони дозволяють згрупувати кілька"></a> </div> <div class="text"> <h4>Зате вони дозволяють згрупувати кілька елементів сторінки в один.</h4> Якщо необхідно виділити фрагмент тексту всередині абзацу, то слід використовувати тег <SPAN>, так як тег <DIV> відобразить фрагмент на новому рядку, а не всередині абзацу.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide107"> <a href="/img/tmb/15/1450446/54ac93f9da25d00db1832b8fe6c6d89f-720x.jpg" target="_blank">Слайд 107</a> Приклад:<br>      Приклад         Абзац1  Абзац2      Абзац3  Абзац4       <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/54ac93f9da25d00db1832b8fe6c6d89f-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Приклад:      Приклад         Абзац1  Абзац2      Абзац3  Абзац4       "><img src="/img/tmb/15/1450446/54ac93f9da25d00db1832b8fe6c6d89f-720x.jpg" title="Мова розмітки гіпертексту" alt="Приклад:      Приклад         Абзац1  Абзац2   "></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide108"> <a href="/img/tmb/15/1450446/c9e410b40027f100035e805be94a77a5-720x.jpg" target="_blank">Слайд 108</a> Тег <br>Треба уточнити, що тег дозволяє не тільки </h3> <div class="image"> <a href="/img/tmb/15/1450446/c9e410b40027f100035e805be94a77a5-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Тег Треба уточнити, що тег дозволяє не тільки групувати елементи, але і управляти горизонтальним вирівнюванням тексту за допомогою атрибута align. Параметр може набувати таких значень:center - вирівнювання по центру; Елемент з вирівнюванням по центру left - вирівнювання по лівому краю; Елемент з вирівнюванням по лівому краю right - вирівнювання по правому краю. Елемент з вирівнюванням по правому краю "><img src="/img/tmb/15/1450446/c9e410b40027f100035e805be94a77a5-720x.jpg" title="Мова розмітки гіпертексту" alt="Тег Треба уточнити, що тег дозволяє не тільки групувати елементи, але і"></a> </div> <div class="text"> <h4>групувати елементи, але і управляти горизонтальним вирівнюванням тексту за</h4> допомогою атрибута align. Параметр може набувати таких значень:<br>center - вирівнювання по центру;<br><Div align = "center"> Елемент з вирівнюванням по центру </ div><br>left - вирівнювання по лівому краю;<br><Div align = "left"> Елемент з вирівнюванням по лівому краю </ div><br>right - вирівнювання по правому краю.<br><Div align = "right"> Елемент з вирівнюванням по правому краю </ div><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide109"> <a href="/img/tmb/15/1450446/946b9ff1f08cb10d13e4972cdb75c320-720x.jpg" target="_blank">Слайд 109</a> <br> призначений для вказівки типу поточного документа </h3> <div class="image"> <a href="/img/tmb/15/1450446/946b9ff1f08cb10d13e4972cdb75c320-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=" призначений для вказівки типу поточного документа - DTD (document type definition, опис типу документа).Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, оскільки HTML існує в декількох версіях, крім того, є XHTML (EXtensible HyperText Markup Language, розширена мова розмітки гіпертексту), схожий на HTML, але розрізняються з ним по синтаксису. Щоб браузер «не плутався» і розумів, згідно яким стандартом відображати веб-сторінку і необхідно в першому рядку коду задавати ."><img src="/img/tmb/15/1450446/946b9ff1f08cb10d13e4972cdb75c320-720x.jpg" title="Мова розмітки гіпертексту" alt="призначений для вказівки типу поточного документа - DTD (document type"></a> </div> <div class="text"> <h4>- DTD (document type definition, опис типу документа).<br>Це необхідно,</h4> щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, оскільки HTML існує в декількох версіях, крім того, є XHTML (EXtensible HyperText Markup Language, розширена мова розмітки гіпертексту), схожий на HTML, але розрізняються з ним по синтаксису.<br> Щоб браузер «не плутався» і розумів, згідно яким стандартом відображати веб-сторінку і необхідно в першому рядку коду задавати <! DOCTYPE>.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide110"> <a href="/img/tmb/15/1450446/48014f9403cf99e9b8c6279a6b863b72-720x.jpg" target="_blank">Слайд 110</a> АТРИБУТИ <br>Елемент верхнього рівня - вказує елемент верхнього </h3> <div class="image"> <a href="/img/tmb/15/1450446/48014f9403cf99e9b8c6279a6b863b72-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="АТРИБУТИ Елемент верхнього рівня - вказує елемент верхнього рівня в документі, для HTML це тег .Публічність - об'єкт є публічним (значення PUBLIC) або системним ресурсом (значення SYSTEM), наприклад, таким як локальний файл. Для HTML / XHTML вказується значення PUBLIC.Реєстрація - повідомляє, що розробник DTD зареєстрований в міжнародній організації зі стандартизації (International Organization for Standardization, ISO). Приймає одне з двох значень: плюс (+) - розробник зареєстрований в ISO і - (мінус) - розробник не зареєстрований. Для W3C значення ставиться «-».Організація - унікальна назва організації, яка розробила DTD. Офіційно HTML / XHTML публікує W3C, ця назва і пишеться в .Тип - тип описуваного документа. Для HTML / XHTML значення вказується DTD.Ім'я - унікальне ім'я документа для опису DTD.Мова - мова, якою написаний текст для опису об'єкта. Містить дві літери, пишеться у верхньому регістрі. Для документа HTML / XHTML вказується англійську мову (EN).URL - адреса документа з DTD."><img src="/img/tmb/15/1450446/48014f9403cf99e9b8c6279a6b863b72-720x.jpg" title="Мова розмітки гіпертексту" alt="АТРИБУТИ Елемент верхнього рівня - вказує елемент верхнього рівня в документі,"></a> </div> <div class="text"> <h4>рівня в документі, для HTML це тег .<br>Публічність -</h4> об'єкт є публічним (значення PUBLIC) або системним ресурсом (значення SYSTEM), наприклад, таким як локальний файл. Для HTML / XHTML вказується значення PUBLIC.<br>Реєстрація - повідомляє, що розробник DTD зареєстрований в міжнародній організації зі стандартизації (International Organization for Standardization, ISO). Приймає одне з двох значень: плюс (+) - розробник зареєстрований в ISO і - (мінус) - розробник не зареєстрований. Для W3C значення ставиться «-».<br>Організація - унікальна назва організації, яка розробила DTD. Офіційно HTML / XHTML публікує W3C, ця назва і пишеться в <! DOCTYPE>.<br>Тип - тип описуваного документа. Для HTML / XHTML значення вказується DTD.<br>Ім'я - унікальне ім'я документа для опису DTD.<br>Мова - мова, якою написаний текст для опису об'єкта. Містить дві літери, пишеться у верхньому регістрі. Для документа HTML / XHTML вказується англійську мову (EN).<br>URL - адреса документа з DTD.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide111"> <a href="/img/tmb/15/1450446/48b682a52e37eada6273033f7affbe8f-720x.jpg" target="_blank">Слайд 111</a> META-ТЕГИ<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/48b682a52e37eada6273033f7affbe8f-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="META-ТЕГИ"><img src="/img/tmb/15/1450446/48b682a52e37eada6273033f7affbe8f-720x.jpg" title="Мова розмітки гіпертексту" alt="META-ТЕГИ"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide112"> <a href="/img/tmb/15/1450446/aaa6d5da44c94d15f83055ac471987ff-720x.jpg" target="_blank">Слайд 112</a> Мета-теги<br>Теги використовуються для вказівки деяких службових даних </h3> <div class="image"> <a href="/img/tmb/15/1450446/aaa6d5da44c94d15f83055ac471987ff-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Мета-тегиТеги використовуються для вказівки деяких службових даних про html-документікодуванняописуключових слівперенаправленняі т.д."><img src="/img/tmb/15/1450446/aaa6d5da44c94d15f83055ac471987ff-720x.jpg" title="Мова розмітки гіпертексту" alt="Мета-тегиТеги використовуються для вказівки деяких службових даних про html-документікодуванняописуключових слівперенаправленняі т.д."></a> </div> <div class="text"> <h4>про html-документі<br>кодування<br>опису<br>ключових слів<br>перенаправлення<br>і т.д.<br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide113"> <a href="/img/tmb/15/1450446/5043ebc25f5163aa84221f0754a92e6d-720x.jpg" target="_blank">Слайд 113</a> Мета-теги<br>Розташовуються мета-теги в заголовку сторінки між початковим і </h3> <div class="image"> <a href="/img/tmb/15/1450446/5043ebc25f5163aa84221f0754a92e6d-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Мета-тегиРозташовуються мета-теги в заголовку сторінки між початковим і кінцевим елементами тега і , що не видно користувачеві, але видно пошуковим системам і іншим програмним роботам, які заходять на сторінку"><img src="/img/tmb/15/1450446/5043ebc25f5163aa84221f0754a92e6d-720x.jpg" title="Мова розмітки гіпертексту" alt="Мета-тегиРозташовуються мета-теги в заголовку сторінки між початковим і кінцевим елементами тега"></a> </div> <div class="text"> <h4>кінцевим елементами тега і , що не</h4> видно користувачеві, але видно пошуковим системам і іншим програмним роботам, які заходять на сторінку<br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide114"> <a href="/img/tmb/15/1450446/9c647b5bf3b2e4705914b291bcef4fb4-720x.jpg" target="_blank">Слайд 114</a> Ключові слова<br>Є ціле сімейство тегів , званих мета-тегами. </h3> <div class="image"> <a href="/img/tmb/15/1450446/9c647b5bf3b2e4705914b291bcef4fb4-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Ключові словаЄ ціле сімейство тегів , званих мета-тегами. Їх можна використовувати всередині тега .Мета-теги розрізняються набором атрибутів і їх значень, ось деякі з атрибутів: content, http-equiv, name і scheme.Мета-теги зберігають корисну для браузерів і пошукових систем інформацію. Один з таких тегів - це опис ключових слів сторінки. Задається він так: В атрибуті content через кому перераховуються найважливіші слова зі змісту сторінки. Раніше цей тег був дуже важливий для пошукових систем. Який стан справ зараз - великий секрет Гугла. "><img src="/img/tmb/15/1450446/9c647b5bf3b2e4705914b291bcef4fb4-720x.jpg" title="Мова розмітки гіпертексту" alt="Ключові словаЄ ціле сімейство тегів , званих мета-тегами. Їх можна використовувати"></a> </div> <div class="text"> <h4>Їх можна використовувати всередині тега .<br>Мета-теги розрізняються набором атрибутів</h4> і їх значень, ось деякі з атрибутів: content, http-equiv, name і scheme.<br>Мета-теги зберігають корисну для браузерів і пошукових систем інформацію. Один з таких тегів - це опис ключових слів сторінки. Задається він так:<br><Meta name = "keywords" content = "різні, ключові, слова"> В атрибуті content через кому перераховуються найважливіші слова зі змісту сторінки. Раніше цей тег був дуже важливий для пошукових систем. Який стан справ зараз - великий секрет Гугла. <br> </div> <hr> </div> <div class="descrip"> <h3 id="slide115"> <a href="/img/tmb/15/1450446/45f19f04d487d585bf96f11deca002e0-720x.jpg" target="_blank">Слайд 115</a> Приклад<br><br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/45f19f04d487d585bf96f11deca002e0-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Приклад"><img src="/img/tmb/15/1450446/45f19f04d487d585bf96f11deca002e0-720x.jpg" title="Мова розмітки гіпертексту" alt="Приклад"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide116"> <a href="/img/tmb/15/1450446/7c8e428bef9cec9d19d3c6c55a30f793-720x.jpg" target="_blank">Слайд 116</a> Приклади<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/7c8e428bef9cec9d19d3c6c55a30f793-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Приклади"><img src="/img/tmb/15/1450446/7c8e428bef9cec9d19d3c6c55a30f793-720x.jpg" title="Мова розмітки гіпертексту" alt="Приклади"></a> </div> <div class="text"> <h4>вхідні металеві двері від виробника. Виготовлення на замовлення, безкоштовна</h4> доставка, установка. Гарантія 5 років."><br><Meta name = "keywords" content = "металеві двері купити недорого гарантія виготовлення установка доставка"><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide117"> <a href="/img/tmb/15/1450446/f823d5e4936ee47982a5149a04a2a7c1-720x.jpg" target="_blank">Слайд 117</a> Приклад<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/f823d5e4936ee47982a5149a04a2a7c1-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Приклад"><img src="/img/tmb/15/1450446/f823d5e4936ee47982a5149a04a2a7c1-720x.jpg" title="Мова розмітки гіпертексту" alt="Приклад"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide118"> <a href="/img/tmb/15/1450446/3d35ec8f7795c79bad037561eea552ee-720x.jpg" target="_blank">Слайд 118</a> АТРИБУТИ <br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/3d35ec8f7795c79bad037561eea552ee-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="АТРИБУТИ "><img src="/img/tmb/15/1450446/3d35ec8f7795c79bad037561eea552ee-720x.jpg" title="Мова розмітки гіпертексту" alt="АТРИБУТИ"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide119"> <a href="/img/tmb/15/1450446/4f7ffdb668f1caf745a257f7f1a0ea3c-720x.jpg" target="_blank">Слайд 119</a> Атрибут name и значення атрибутів<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/4f7ffdb668f1caf745a257f7f1a0ea3c-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Атрибут name и значення атрибутів"><img src="/img/tmb/15/1450446/4f7ffdb668f1caf745a257f7f1a0ea3c-720x.jpg" title="Мова розмітки гіпертексту" alt="Атрибут name и значення атрибутів"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide120"> <a href="/img/tmb/15/1450446/94e92f20eef75680a302b01afa7334bd-720x.jpg" target="_blank">Слайд 120</a> ВАЛІДАЦІЯ HTML-ДОКУМЕНТУ<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/94e92f20eef75680a302b01afa7334bd-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ВАЛІДАЦІЯ HTML-ДОКУМЕНТУ"><img src="/img/tmb/15/1450446/94e92f20eef75680a302b01afa7334bd-720x.jpg" title="Мова розмітки гіпертексту" alt="ВАЛІДАЦІЯ HTML-ДОКУМЕНТУ"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide121"> <a href="/img/tmb/15/1450446/dbdaec07125126a4f7d45ec12c1a1422-720x.jpg" target="_blank">Слайд 121</a> Валідація<br>Validation? <br>Перевірка правильності<br>Валідація - процедура, що дає високу </h3> <div class="image"> <a href="/img/tmb/15/1450446/dbdaec07125126a4f7d45ec12c1a1422-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ВалідаціяValidation? Перевірка правильностіВалідація - процедура, що дає високу ступінь впевненості в тому, що процес, метод або система будуть послідовно приводити до результатів, які відповідають заздалегідь встановленим критеріям прийнятностіВалідація підтверджує, що створений правильний продукт"><img src="/img/tmb/15/1450446/dbdaec07125126a4f7d45ec12c1a1422-720x.jpg" title="Мова розмітки гіпертексту" alt="ВалідаціяValidation? Перевірка правильностіВалідація - процедура, що дає високу ступінь впевненості в"></a> </div> <div class="text"> <h4>ступінь впевненості в тому, що процес, метод або система</h4> будуть послідовно приводити до результатів, які відповідають заздалегідь встановленим критеріям прийнятності<br>Валідація підтверджує, що створений правильний продукт<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide122"> <a href="/img/tmb/15/1450446/25a9f3358910b3bdde5f691d4a7162e4-720x.jpg" target="_blank">Слайд 122</a> <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/25a9f3358910b3bdde5f691d4a7162e4-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/25a9f3358910b3bdde5f691d4a7162e4-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide123"> <a href="/img/tmb/15/1450446/d712249cd3de332b3c054f47eaeaff46-720x.jpg" target="_blank">Слайд 123</a> W3C<br>Перевірка за адресою<br>Перевірка файла<br>Перевірка шляхом копіювання коду<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/d712249cd3de332b3c054f47eaeaff46-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="W3CПеревірка за адресоюПеревірка файлаПеревірка шляхом копіювання коду"><img src="/img/tmb/15/1450446/d712249cd3de332b3c054f47eaeaff46-720x.jpg" title="Мова розмітки гіпертексту" alt="W3CПеревірка за адресоюПеревірка файлаПеревірка шляхом копіювання коду"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide124"> <a href="/img/tmb/15/1450446/b923951aae0513a3bad80a680fbfc03b-720x.jpg" target="_blank">Слайд 124</a> Приклад веб-сторінки<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/b923951aae0513a3bad80a680fbfc03b-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Приклад веб-сторінки"><img src="/img/tmb/15/1450446/b923951aae0513a3bad80a680fbfc03b-720x.jpg" title="Мова розмітки гіпертексту" alt="Приклад веб-сторінки"></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide125"> <a href="/img/tmb/15/1450446/d9f8ddf52652e54a1265a6b05ba8498f-720x.jpg" target="_blank">Слайд 125</a> <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/d9f8ddf52652e54a1265a6b05ba8498f-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/d9f8ddf52652e54a1265a6b05ba8498f-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide126"> <a href="/img/tmb/15/1450446/38424742bbc7b80c9bb91663af01ec68-720x.jpg" target="_blank">Слайд 126</a> <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/38424742bbc7b80c9bb91663af01ec68-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/38424742bbc7b80c9bb91663af01ec68-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide127"> <a href="/img/tmb/15/1450446/ded4f30525d72c892802e66155c9eac4-720x.jpg" target="_blank">Слайд 127</a> <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/ded4f30525d72c892802e66155c9eac4-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/ded4f30525d72c892802e66155c9eac4-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide128"> <a href="/img/tmb/15/1450446/1d89993582f15b259c8927eca57243d3-720x.jpg" target="_blank">Слайд 128</a> <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/1d89993582f15b259c8927eca57243d3-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/1d89993582f15b259c8927eca57243d3-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide129"> <a href="/img/tmb/15/1450446/3d061f3e45d40c04ab9f5b248dc16462-720x.jpg" target="_blank">Слайд 129</a> <br><br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/3d061f3e45d40c04ab9f5b248dc16462-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/15/1450446/3d061f3e45d40c04ab9f5b248dc16462-720x.jpg" title="Мова розмітки гіпертексту" alt=""></a> </div> <hr> </div> <div class="descrip"> <h3 id="slide130"> <a href="/img/tmb/15/1450446/3e74c527f39326b42ad71b69e6f502ae-720x.jpg" target="_blank">Слайд 130</a> Media-типи і підтипи<br>Вказівка media-типу використовується для передачі відомостей </h3> <div class="image"> <a href="/img/tmb/15/1450446/3e74c527f39326b42ad71b69e6f502ae-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Media-типи і підтипиВказівка media-типу використовується для передачі відомостей про формат вмісту в HTTP-транзакціїКлієнти використовують media-типи для того, щоб повідомити, в яких форматах вони вважають за краще приймати даніСервери використовують media-типи для того, щоб повідомити клієнтам про те, в якому форматі передається додається вміст"><img src="/img/tmb/15/1450446/3e74c527f39326b42ad71b69e6f502ae-720x.jpg" title="Мова розмітки гіпертексту" alt="Media-типи і підтипиВказівка media-типу використовується для передачі відомостей про формат вмісту"></a> </div> <div class="text"> <h4>про формат вмісту в HTTP-транзакції<br>Клієнти використовують media-типи для того,</h4> щоб повідомити, в яких форматах вони вважають за краще приймати дані<br>Сервери використовують media-типи для того, щоб повідомити клієнтам про те, в якому форматі передається додається вміст<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide131"> <a href="/img/tmb/15/1450446/213fa1e38e08a8adfd9ac79b5f44789d-720x.jpg" target="_blank">Слайд 131</a> Media-типи і підтипи<br>Media-типи - це нова назва для </h3> <div class="image"> <a href="/img/tmb/15/1450446/213fa1e38e08a8adfd9ac79b5f44789d-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Media-типи і підтипиMedia-типи - це нова назва для розширених mime-типівMIME - Multipurpose Internet Mail ExtensionsБагатоцільові розширення для електронної пошти"><img src="/img/tmb/15/1450446/213fa1e38e08a8adfd9ac79b5f44789d-720x.jpg" title="Мова розмітки гіпертексту" alt="Media-типи і підтипиMedia-типи - це нова назва для розширених mime-типівMIME -"></a> </div> <div class="text"> <h4>розширених mime-типів<br>MIME - Multipurpose Internet Mail Extensions<br>Багатоцільові розширення для</h4> електронної пошти<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide132"> <a href="/img/tmb/15/1450446/b0d5da40a98947846f775d1e5b406cfe-720x.jpg" target="_blank">Слайд 132</a> Формат media-типів<br>Тип/Підтип<br>Content-type: text/html сервер посилає клієнтові текстовий документ в </h3> <div class="image"> <a href="/img/tmb/15/1450446/b0d5da40a98947846f775d1e5b406cfe-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Формат media-типівТип/ПідтипContent-type: text/html сервер посилає клієнтові текстовий документ в html-форматі"><img src="/img/tmb/15/1450446/b0d5da40a98947846f775d1e5b406cfe-720x.jpg" title="Мова розмітки гіпертексту" alt="Формат media-типівТип/ПідтипContent-type: text/html сервер посилає клієнтові текстовий документ в html-форматі"></a> </div> <div class="text"> <h4>html-форматі<br><br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide133"> <a href="/img/tmb/15/1450446/3d5a9b47dc5b57b818f4f4d4a3124a03-720x.jpg" target="_blank">Слайд 133</a> Приклади media-типів<br>text/html text/css text/plain<br>image/bmp image/gif image/jpeg image/png<br>audio/midi audio/mpeg <br>video/mpeg<br>application/msword application/octet-stream application/pdf application/x-shockwave-flash application/zip<br>…<br> </h3> <div class="image"> <a href="/img/tmb/15/1450446/3d5a9b47dc5b57b818f4f4d4a3124a03-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Приклади media-типівtext/html text/css text/plainimage/bmp image/gif image/jpeg image/pngaudio/midi audio/mpeg video/mpegapplication/msword application/octet-stream application/pdf application/x-shockwave-flash application/zip…"><img src="/img/tmb/15/1450446/3d5a9b47dc5b57b818f4f4d4a3124a03-720x.jpg" title="Мова розмітки гіпертексту" alt="Приклади media-типівtext/html text/css text/plainimage/bmp image/gif image/jpeg image/pngaudio/midi audio/mpeg video/mpegapplication/msword application/octet-stream application/pdf application/x-shockwave-flash application/zip…"></a> </div> <hr> </div> </div> <div class="custom" > <!-- Yandex.RTB R-A-11464146-5 --> <div id="yandex_rtb_R-A-11464146-5"></div> <script> window.yaContextCb.push(() => { Ya.Context.AdvManager.render({ "blockId": "R-A-11464146-5", "renderTo": "yandex_rtb_R-A-11464146-5" }) }) </script></div> <div class="content dl-content" style="margin-top: 20px"> <form action="" method="post" class="js_captcha dl-form"> <div> <ul> <li>Имя файла: mova-rozmіtki-gіpertekstu.pptx</li> <li>Количество просмотров: 123</li> <li>Количество скачиваний: 0</li> </ul> <div class="g-recaptcha" data-sitekey="6Lf0iN8nAAAAACKv8U8VhTtj8F1wq0TA-RBjxFb2"></div> <input type="submit" value="Скачать презентацию"> <input type="hidden" name="task" value="dodownload"> <input type="hidden" name="566674288127253583b669e8112a264a" value="1" /> </div> <div class="clear"></div> </form> <div class="adBlockDownload"> <div class="banners"></div> </div> </div> <div class="itemNavigation"> <div class="itemNavigation-wrapper"> <div class="itemNavigation-item"> - Предыдущая <a class="itemNavigation-link" href="/istoriya/kultura-drevney-assirii">Культура Древней Ассирии</a> </div> <div class="itemNavigation-item"> Следующая - <a class="itemNavigation-link" href="/geografiya/transport-belarusi-infografika-aviatsionnyy-avtomobilnyy-zheleznodorozhnyy">Транспорт Беларуси (инфографика). Авиационный, автомобильный, железнодорожный, водный</a> </div> </div> </div> </div> <div class="right"> <div class="banners"> <div class="custom" > <!-- Yandex.RTB R-A-11464146-1 --> <div id="yandex_rtb_R-A-11464146-1"></div> <script> window.yaContextCb.push(() => { Ya.Context.AdvManager.render({ "blockId": "R-A-11464146-1", "renderTo": "yandex_rtb_R-A-11464146-1" }) }) </script></div> </div> <div class="list related"> <h2>Похожие презентации</h2> <div class="wrapper"> <a href="/informatika/602407-gbou-spo-regionalnyy-mnogoprofilnyy-kolledzh-g"> <img src="/img/tmb/7/602407/f1605647128159b930c33199d9f03785-210x.jpg" alt="ГБОУ СПО Региональный многопрофильный колледж г. Ставрополь.Социальные сети в студенческой жизни"> <span class="desc"> <span>ГБОУ СПО Региональный многопрофильный колледж г. Ставрополь.Социальные сети в студенческой жизни</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 173</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/subd-5"> <img src="/img/tmb/12/1122850/043f081b1ee80697ac6e29ffb10211c7-210x.jpg" alt="СУБД"> <span class="desc"> <span>СУБД</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 141</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/616584-prezentatsiya-k-uroku-informatiki-ip-adresa"> <img src="/img/tmb/7/616584/21fc868a1d410fa534fa3d92b845a214-210x.jpg" alt="Презентация к уроку информатики IP-адреса и система доменных имен"> <span class="desc"> <span>Презентация к уроку информатики IP-адреса и система доменных имен</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 199</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/programmist-matematika-v-professii"> <img src="/img/tmb/12/1154614/b0f7b28f52bf24ce25ae4232d775cf52-210x.jpg" alt="Программист. Математика в профессии"> <span class="desc"> <span>Программист. Математика в профессии</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 179</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kodirovanie-informatsii-106"> <img src="/img/tmb/12/1125963/8b625ff334cee093f4ccc63d36582075-210x.jpg" alt="Кодирование информации"> <span class="desc"> <span>Кодирование информации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 118</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/arifmeticheskie-operatsii-v-pozitsionnyh-sistemah-schisleniya_"> <img src="/img/tmb/14/1312277/0a0f213e2c652b56800c0a6b1db971ac-210x.jpg" alt="Арифметические операции в позиционных системах счисления"> <span class="desc"> <span>Арифметические операции в позиционных системах счисления</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 129</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> <div class="cntWrapper"> <div class="list"> <h2 class="right-heading" id="related">Похожие презентации</h2> <div class="wrapper"> <a href="/informatika/vyigryshnaya-strategiya_"> <img src="/img/tmb/13/1229539/c1bcd42949538f9add8c3fc95fc2b6f2-210x.jpg" alt="Выигрышная стратегия"> <span class="desc"> <span>Выигрышная стратегия</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 147</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/professiya-programmist-2_"> <img src="/img/tmb/13/1244099/73c15fab442c91c13bf5494cfaddfbb8-210x.jpg" alt="Профессия программист"> <span class="desc"> <span>Профессия программист</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 141</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/ugrozy-bezopasnosti-kompyuternoy-sistemy-organizatsii"> <img src="/img/tmb/15/1436316/ca9288dd75ccc590660caa61838af7cf-210x.jpg" alt="Угрозы безопасности компьютерной системы организации"> <span class="desc"> <span>Угрозы безопасности компьютерной системы организации</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 140</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/584222-prezentatsiya-po-informatike-6-klass-fgos"> <img src="/img/tmb/6/584222/1f00240a5776566f321e93e8bc57259c-210x.jpg" alt="Презентация по информатике 6 класс фгос Типы алгоритмовГрафики и диаграммы"> <span class="desc"> <span>Презентация по информатике 6 класс фгос Типы алгоритмовГрафики и диаграммы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 154</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/ponyattya-pro-programu-zapusk-programi-na"> <img src="/img/tmb/12/1106586/ca0907a6cf3907fceec33fa5b3e2a881-210x.jpg" alt="Поняття про програму. Запуск програми на виконання"> <span class="desc"> <span>Поняття про програму. Запуск програми на виконання</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 149</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompyuternye-seti-vidy-kompyuternyh-setey"> <img src="/img/tmb/12/1108197/ba1e61010c1b15d5ac1b35b865307dd4-210x.jpg" alt="Компьютерные сети. Виды компьютерных сетей"> <span class="desc"> <span>Компьютерные сети. Виды компьютерных сетей</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 156</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/festival-kompyuternaya-strana"> <img src="/img/tmb/12/1144636/cdbaa55f0094ea3e7440c2419b815ddb-210x.jpg" alt="Фестиваль - КОМПЬЮТЕРНАЯ СТРАНА"> <span class="desc"> <span>Фестиваль - КОМПЬЮТЕРНАЯ СТРАНА</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 140</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/rabota-s-krossvordom-v-microsoft-office"> <img src="/img/tmb/12/1177612/05be512ec986c0b94873708ee3181cc4-210x.jpg" alt="Работа с кроссвордом в Microsoft Office Excel"> <span class="desc"> <span>Работа с кроссвордом в Microsoft Office Excel</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 69</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/zhestkiy-disk-3"> <img src="/img/tmb/12/1111593/ff32c5d9041280c52645362b504ecabf-210x.jpg" alt="Жесткий диск"> <span class="desc"> <span>Жесткий диск</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 170</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/vvod-vyvod-1"> <img src="/img/tmb/15/1456124/ac941074c9b0b2f8b06149061e57dde1-210x.jpg" alt="Ввод-вывод"> <span class="desc"> <span>Ввод-вывод</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 129</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/prostranstvennaya-diskretizatsiya-1"> <img src="/img/tmb/11/1055357/3be3fe45e57c26750d0f3d0c350db92c-210x.jpg" alt="Пространственная дискретизация"> <span class="desc"> <span>Пространственная дискретизация</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 141</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/12-printsipov-killer-apps-im-mobillak_"> <img src="/img/tmb/13/1248027/e294c7b368995c9778200d0a41f2c763-210x.jpg" alt="12 принципов “killer apps” ИМ Мобиллак"> <span class="desc"> <span>12 принципов “killer apps” ИМ Мобиллак</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 120</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/mikroprotsessorly-zhyen-arhitekturasy"> <img src="/img/tmb/15/1420583/bfa7f8f0b74059219d95264f49eecc39-210x.jpg" alt="Микропроцессорлық жүйенің архитектурасы"> <span class="desc"> <span>Микропроцессорлық жүйенің архитектурасы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 148</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/izuchenie-instrumentov-vydeleniya"> <img src="/img/tmb/12/1131510/6b06958b6032fd90a7e851043d271857-210x.jpg" alt="Изучение инструментов выделения"> <span class="desc"> <span>Изучение инструментов выделения</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 198</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/596418-prezentatsiya-po-teme-strukturirovanie-i-vizualizatsiya"> <img src="/img/tmb/6/596418/0dabe88360f6e9688d52d8e0b2e9e4d5-210x.jpg" alt="Презентация по теме Структурирование и визуализация данных"> <span class="desc"> <span>Презентация по теме Структурирование и визуализация данных</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 194</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/graficheskiy-redaktor-paint-6"> <img src="/img/tmb/13/1257578/e829d472038a147998d2cf741ecc5926-210x.jpg" alt="Графический редактор Paint"> <span class="desc"> <span>Графический редактор Paint</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 132</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/533253-protsedury-i-funktsii-obrabotki-strokovyh-dannyh"> <img src="/img/tmb/6/533253/2fe09060686c90a97707e1e56a0ae3c9-210x.jpg" alt="Процедуры и функции обработки строковых данных в Паскаль"> <span class="desc"> <span>Процедуры и функции обработки строковых данных в Паскаль</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 181</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/informatsionnye-sistemy-i-bazy-dannyh-11"> <img src="/img/tmb/15/1427925/ed6f65166eb2699dfb7e83031c7f03fa-210x.jpg" alt="Информационные системы и базы данных. (11 класс)"> <span class="desc"> <span>Информационные системы и базы данных. (11 класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 162</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/vliyanie-interneta-i-kompyutera-na-zdorove"> <img src="/img/tmb/12/1141083/dd479d117cc60c3fd6f236a9f4b807eb-210x.jpg" alt="Влияние интернета и компьютера на здоровье человека"> <span class="desc"> <span>Влияние интернета и компьютера на здоровье человека</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 147</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/organizatsiya-protsessov-obrabotki-dannyh-v-baze_"> <img src="/img/tmb/13/1276424/b330fc26894c20a95fd722cbad698bde-210x.jpg" alt="Организация процессов обработки данных в базе данных"> <span class="desc"> <span>Организация процессов обработки данных в базе данных</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 120</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompas-3d-lt"> <img src="/img/tmb/12/1129774/93fa85e7d9fe65da5522514c6c321c53-210x.jpg" alt="Компас 3D - LT"> <span class="desc"> <span>Компас 3D - LT</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 132</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/tablitsy-i-diagrammy-v-microsoft-word_"> <img src="/img/tmb/13/1236789/4b44606788a6456e13b0682846bbbc4d-210x.jpg" alt="Таблицы и диаграммы в Microsoft Word"> <span class="desc"> <span>Таблицы и диаграммы в Microsoft Word</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 143</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/elektronnyy-dokumentooborot-1_"> <img src="/img/tmb/15/1470313/f2ecb79506b09f94ecaca38eb2a9bac7-210x.jpg" alt="Электронный документооборот"> <span class="desc"> <span>Электронный документооборот</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 153</span> </span> </a> </div> <div class="wrapper"> <a href="/informatika/kompyuternaya-myshka-1"> <img src="/img/tmb/14/1367417/522e34a7269930b5efcdcee2ca201263-210x.jpg" alt="Компьютерная мышка"> <span class="desc"> <span>Компьютерная мышка</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 118</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>