Презентация на тему: Лекція 2 «Створення HTML- сторінок ( частина 1 )»

Лекція 2 «Створення HTML- сторінок ( частина 1 )»
План лекції
1. Структура HTML- документа
1.1. Об'єктна модель HTML- документу DOM
Приклад
«Родинні стосунки» HTML- елементів
Приклад
1.2. Основні елементи HTML - сторінки
Тег <! DOCTYPE>
Тег <! DOCTYPE>
Тег <!DOCTYPE>
Лекція 2 «Створення HTML- сторінок ( частина 1 )»
Елемент < html >
Лекція 2 «Створення HTML- сторінок ( частина 1 )»
Елемент < head >
Лекція 2 «Створення HTML- сторінок ( частина 1 )»
Елемент < title >
Елемент < meta >
Атрибути елементу <meta >
Лекція 2 «Створення HTML- сторінок ( частина 1 )»
Елемент <body>
Приклад
2. Блочні та рядкові елементи
Блочні та рядкові елементи ( HTML block and inline tags )
Блочні елементи
Блочні елементи
Рядкові елементи
Взаємодія блочних та рядкових елементів
Елементи < div> та <span>
Код html- сторінки
Код html- страницы
<span>
Код html- сторінки
Код html- сторінки
3. Оформлення тексту HTML
HTML- текст
Лекція 2 «Створення HTML- сторінок ( частина 1 )»
Лекція 2 «Створення HTML- сторінок ( частина 1 )»
Заголовки
Код html- сторінки
3.2. Теги для форматування тексту
Лекція 2 «Створення HTML- сторінок ( частина 1 )»
Лекція 2 «Створення HTML- сторінок ( частина 1 )»
Лекція 2 «Створення HTML- сторінок ( частина 1 )»
3.3. Абзаци, засоби перенесення тексту
Лекція 2 «Створення HTML- сторінок ( частина 1 )»
Лекція 2 «Створення HTML- сторінок ( частина 1 )»
3.4. Коментарі
3.5. Цитати
3.6. Теги для вводу «комп'ютерного» тексту
4. Гіперпосилання ( HTML LINKS )
Створення посилань на інші сторінки
Лекція 2 «Створення HTML- сторінок ( частина 1 )»
Адреси на web -сторінках.
Абсолютні адреси
Відносні адреси
Шлях для відносних посилань має такі спеціальні позначення :
Приклади відносних адрес
Відкриття посилання у новому вікні
Завантаження файлу по ссилці
Додавання опису до посилання
Створення посилань на адресу електронної пошти
Лекція 2 «Створення HTML- сторінок ( частина 1 )»
Приклад
Посилання на телефонний номер та Skype
Создание ссылку внутрь страницы
Як організувати посилання такого типу?
Приклад
Изображение в качестве ссылок
Основні атрибути елемента < img >
5. Створення списків ( HTML LISTS)
Списки
Як сформувати список?
Синтаксис
Атрибути тегів списку
Елементи < dl >, < dt >, < dd >
Лекція 2 «Створення HTML- сторінок ( частина 1 )»
Вкладений список
Дякую за увагу !
1/79
Средняя оценка: 4.3/5 (всего оценок: 45)
Код скопирован в буфер обмена
Скачать (1716 Кб)
1

Первый слайд презентации: Лекція 2 «Створення HTML- сторінок ( частина 1 )»

Изображение слайда
2

Слайд 2: План лекції

Структура HTML-документа Блокові і рядкові елементи Оформлення тексту в HTML Гіперпосилання в HTML Створення списків в HTML

Изображение слайда
3

Слайд 3: 1. Структура HTML- документа

Изображение слайда
4

Слайд 4: 1.1. Об'єктна модель HTML- документу DOM

Елементи, що знаходяться всередині тега < html >, утворюють дерево документа, так звану об'єктну модель документа, DOM ( Document Object Model ). При цьому елемент < html > є кореневим елементом. Відповідно до DOM-моделі, документ є ієрархією. Кожен html -тег утворює окремий елемент-вузол, кожен фрагмент тексту – текстовий елемент тощо. DOM – це подання (відображення) html - документа у вигляді дерева тегів. Це дерево утворюється за рахунок вкладеної структури тегів плюс текстових фрагментів сторінки, кожен з яких утворює окремий вузол.

Изображение слайда
5

Слайд 5: Приклад

Елементи-вузли ( element node) Текстові вузли (text node)

Изображение слайда
6

Слайд 6: Родинні стосунки» HTML- елементів

Предок – елемент, який містить в собі інші елементи. Нащадок – елемент, розташований усередині одного або більше типів елементів. Батьківський елемент – елемент, пов'язаний з іншими елементами нижчого рівня, і що знаходиться на дереві вище їх. Дочірній елемент – елемент, безпосередньо підпорядковане іншому елементу вищого рівня. Сестринський елемент – елемент, який має загальний батьківський елемент з даним, так звані елементи одного рівня.

Изображение слайда
7

Слайд 7: Приклад

Изображение слайда
8

Слайд 8: 1.2. Основні елементи HTML - сторінки

Вказується службовий елемент <! DOCTYPE > Починається з тегу < html > і закінчується тегом </ html >. Така пара тегів повідомляє браузеру, що це html -документ. Містить два розділи – заголовки і тіло документа. Розділ заголовків помічений тегами < head > і </ head > та містить інформацію про документ загалом. Текст документа міститься в його тілі, яке розташоване між тегами < body > та </ body >.

Изображение слайда
9

Слайд 9: Тег <! DOCTYPE>

Елемент <!DOCTYPE > призначений для зазначення типу поточного документа - DTD ( Document Type Definition, опис типу документа). Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну web -сторінку, оскільки HTML існує в декількох версіях. Існує кілька видів <! DOCTYPE >, вони різняться в залежності від версії мови, на яку орієнтовані.

Изображение слайда
10

Слайд 10: Тег <! DOCTYPE>

DOCTYPE О ПИС HTML 4.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Строгий синтаксис HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Перехідний синтаксис HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> В HTML- документі використовуються фрейми HTML 5 <!DOCTYPE html> Для всіх документів Тег <! DOCTYPE>

Изображение слайда
11

Слайд 11: Тег <!DOCTYPE>

Часто можна зустріти код HTML взагалі без використання <!DOCTYPE >, веб- сторінка в подібному випадку все одно буде показана. Проте, може статися, що один і той же документ відображається в браузері по-різному при використанні <!DOCTYPE > і без нього. Крім того, браузери можуть по-своєму показувати такі документи, в результаті сторінка « розсип и ться », тобто буде відображатися зовсім не так, як це потрібно розробнику. Щоб не сталося подібних ситуацій, завжди додавайте <!DOCTYPE > в початок документа.

Изображение слайда
12

Слайд 12

Изображение слайда
13

Слайд 13: Елемент < html >

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

Изображение слайда
14

Слайд 14

Изображение слайда
15

Слайд 15: Елемент < head >

Контейнер < head > </ head > містить технічну інформацію про сторінку : заголовок, опис, ключові слова для пошукових машин, кодування тощо. Усередині контейнера < head > допускається розміщувати такі елементи: < link >, < meta >, < script >, < style >, < title >. Вміст тега < head > не відображається безпосередньо на web -сторінці, за винятком тега < title >, який встановлює заголовок вікна web -сторінки.

Изображение слайда
16

Слайд 16

Изображение слайда
17

Слайд 17: Елемент < title >

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

Изображение слайда
18

Слайд 18: Елемент < meta >

Елемент < meta > визначає метатеги, які використовуються для зберігання інформації, призначеної для браузерів і пошукових систем. Наприклад, механізми пошукових систем звертаються до метатегів для отримання опису сайту, ключових слів та інших даних. Дозволяється використовувати більш ніж один тег, всі вони розміщуються в контейнері < head >. Як правило, атрибути будь-якого метатега зводяться до пар «ім'я = значення», які визначаються ключовими словами content, name або http-equiv. < head > < meta content = "..." > </ head >

Изображение слайда
19

Слайд 19: Атрибути елементу <meta >

Атрибут Опис charset Задає кодування документа content Встановлює значення атрибута, заданого за допомогою name або http-equiv http-equiv Призначений для конвертації метатега в заголовок HTTP. name Ім'я метатега, також побічно встановлює його призначення. <!DOCTYPE HTML > < html < head > < title > META </ title > < meta charset = "utf-8" > < meta name = "GENERATOR" content = " Microsoft FrontPage 4.0" > < meta name = " ProgId " content = " FrontPage.Editor.Document " > </ head > < body > <p>... </p> </ body > </ html >

Изображение слайда
20

Слайд 20

Изображение слайда
21

Слайд 21: Елемент <body>

Елемент < body > призначений для зберігання змісту веб-сторінки (контенту), що відображається у вікні браузера. Інформацію, яку слід виводити в документі, слід розташовувати саме всередині контейнера < body >. До такої інформації належить текст, зображення, теги, скрипти JavaScript тощо. Часто тег < body > використовується для розміщення обробника подій, наприклад, onload, яке виконується після того, як документ завершив завантаження в поточне вікно або фрейм.

Изображение слайда
22

Слайд 22: Приклад

Изображение слайда
23

Слайд 23: 2. Блочні та рядкові елементи

Изображение слайда
24

Слайд 24: Блочні та рядкові елементи ( HTML block and inline tags )

Всі елементи HTML діляться на дві групи: блочні ( block ); рядкові ( inline ).

Изображение слайда
25

Слайд 25: Блочні елементи

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

Изображение слайда
26

Слайд 26: Блочні елементи

Зазвичай блокові елементи використовуються, щоб розділити вміст web - сторінки на логічні блоки ( наприклад, заголовок (шапка сайту), меню, блок з контентом, нижній колонтитул та ін ). Блокові елементи не можна вкладати в рядкові, винятком є тільки посилання і комірки таблиць, всередині яких за стандартом HTML5 можуть бути розташовані блокові елементи. Examples of Block Elements : < p>, <div>, <form>, <header>, < nav >, < ul >, <li>, and <h1 >.

Изображение слайда
27

Слайд 27: Рядкові елементи

Використовуються для розмітки частин вмісту елементів. Ширина рядкового елемента дорівнює об'єму вмісту. На відміну від блокових елементів браузер не додає розрив рядка до і після рядкового елемента, тому, якщо кілька рядкових елементів йдуть підряд один за одним, вони розташовуються на одній лінії, і переносяться на інший рядок при необхідності. У більшості випадків всередину рядкових елементів допустимо розміщувати інші малі елементи, вставляти блокові елементи всередину рядкових заборонено. Examples of Inline Elements: <a>, <span>, <b>, < em >, < i >, <cite>, <mark>, and <code>

Изображение слайда
28

Слайд 28: Взаємодія блочних та рядкових елементів

Изображение слайда
29

Слайд 29: Елементи < div> та <span>

< div > Елемент < div > є універсальним блоковим елементом і призначений для групування елементів документа з метою зміни виду вмісту через стилі.

Изображение слайда
30

Слайд 30: Код html- сторінки

Изображение слайда
31

Слайд 31: Код html- страницы

Изображение слайда
32

Слайд 32: <span>

Універсальний рядковий елемент < span> призначений для виділення окремих рядків, символів або інших малих елементів для подальшої зміни їх оформлення за допомогою стилів. Наприклад, всередині абзацу (< p ></p>) можна змінити колір і розмір першого слова, якщо його виділити за допомогою елемента < span> і задати для нього бажаний стиль.

Изображение слайда
33

Слайд 33: Код html- сторінки

Изображение слайда
34

Слайд 34: Код html- сторінки

Изображение слайда
35

Слайд 35: 3. Оформлення тексту HTML

Изображение слайда
36

Слайд 36: HTML- текст

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

Изображение слайда
37

Слайд 37

Заголовки є блочними елементами і в них є шість різних рангів < h 1> – < h 6>. Заголовки допомагають швидко розбити вміст і встановити ієрархію, і вони є ключовими ідентифікаторами для користувачів, що переглядають сторінку. Заголовки допомагають пошуковим системам індексувати і визначати вміст на сторінці. 3.1. Заголовки

Изображение слайда
38

Слайд 38

Изображение слайда
39

Слайд 39: Заголовки

Заголовки повинні бути використані в порядку, що відповідає змісту сторінки. Основний заголовок сторінки або розділу повинен бути розмічений за допомогою елемента <h1>, а наступні заголовки повинні використовувати елементи <h2>, <h3>, <h4>, <h5> <h6>, при необхідності. Кожен рівень заголовка повинен застосовуватися з семантичним змістом і не повинен використовуватися для того, щоб зробити текст жирним або великим, для цього є інші, більш ефективні способи.

Изображение слайда
40

Слайд 40: Код html- сторінки

Изображение слайда
41

Слайд 41: 3.2. Теги для форматування тексту

Тег Описание Пример <b>…</b> Напівжирний текст Текст <strong>…</strong> < em >…</ em > Курсив Текст < i >…</ i > <u>…</u> Підкреслений текст Текст <s>…</s> Перекреслений текст Текст <sub>…</sub> Нижній індекс х 2 <sup>…</sup> Верхній індекс х 2

Изображение слайда
42

Слайд 42

Изображение слайда
43

Слайд 43

Жирний текст Є два елементи, які виділять текст жирним шрифтом: елементи < strong > і <b>. Важливо розуміти семантичну різницю між ними. Перший елемент <b> – встановлює жирний текст, а < strong > – визначає важливість поміченого тексту. Теоретично, якщо скористатися, наприклад, мовним браузером, то текст, оформлений за допомогою елементів <b> і < strong >, буде відзначений по-різному. Однак вийшло так, що в популярних браузерах результат їх використання рівнозначний.

Изображение слайда
44

Слайд 44

Курсивний текст Для курсивного тексту, на якому тим самим робиться акцент, ми будемо використовувати рядковий елемент < em >. Як і з елементами для жирного тексту, є два різних елемента, які встановлюють курсивний текст, кожен зі своїм семантичним змістом. Елемент < em > семантично застосовується щоб зробити акцент на тексті, це найбільш популярний варіант для курсиву. Інший варіант — це елемент <i>, він семантично застосовується для передачі тексту іншим голосом або тоном.

Изображение слайда
45

Слайд 45: 3.3. Абзаци, засоби перенесення тексту

Тег < p > Розбиває текст на окремі абзаци, відокремлюючи один від одного порожнім рядком. Браузер автоматично додає верхній і нижній відступ. Т ег < br > Переносить текст на наступний рядок, створюючи розрив рядка. Тег < hr > Використовується для поділу контента на веб- сторінці. Відображається у вигляді горизонтальної лінії.

Изображение слайда
46

Слайд 46

Изображение слайда
47

Слайд 47

Изображение слайда
48

Слайд 48: 3.4. Коментарі

Іноді для того, щоб краще розуміти html -код, вставляють в текст примітки – коментарі. Вони починаються з спеціального тега <!--. Будь- який записаний після нього текст браузер розглядає як коментар і не відображає під час відтворення документа. Закінчують коментар тегом -->. Коментар може містити будь- які символи, крім >, а отже, не може включати в себе теги.

Изображение слайда
49

Слайд 49: 3.5. Цитати

Тег Описание <q>…</q> Призначений для виділення коротких цитат у тексті. Текст всередині цього тега автоматично обрамляється лапками < cite >…</ cite > Використовується для того, щоб виділити джерело цитати, назва твору чи автора цитати. Браузери зазвичай встановлюють текст всередині контейнера курсивом <blockquote>…</blockquote> Призначений для виділення довгих цитат всередині документа. Текст, позначений цим тегом, відображається як вирівняний блок з відступами зліва і справа ( приблизно по 40 пікселів ), а також з відбиттям зверху і знизу

Изображение слайда
50

Слайд 50: 3.6. Теги для вводу «комп'ютерного» тексту

<code> < kbd > < samp > < var > <pre> Самостійна робота

Изображение слайда
51

Слайд 51: 4. Гіперпосилання ( HTML LINKS )

Изображение слайда
52

Слайд 52: Створення посилань на інші сторінки

Елемент <a> є одним з найважливіших в html і призначений для створення посилань. Для цього необхідно повідомити браузеру, що є посиланням, а також вказати адресу документа, на який слід зробити посилання. Як значення атрибута href використовується адреса документа (URL, Universal Resource Locator, універсальний покажчик ресурсів ), на який відбувається перехід. Вміст тега <a> виступає в якості мітки для посилання. У браузері мітка відображається у вигляді підкресленого тексту, щоб показати, що можна клацнути на ньому кнопкою миші.

Изображение слайда
53

Слайд 53

Изображение слайда
54

Слайд 54: Адреси на web -сторінках

Адреса посилання може бути абсолютною або відносною.

Изображение слайда
55

Слайд 55: Абсолютні адреси

Абсолютні адреси працюють всюди незалежно від імені сайту або веб-сторінки, де прописана посилання. Абсолютні посилання містять всю інформацію, необхідну браузеру для знаходження файлу. Абсолютний шлях містить такі компоненти: 1) протокол (наприклад, http ) 2) домен (доменне ім'я або IP-адреса комп'ютера) 3) папка (ім'я папки, що вказує шлях до файлу) 4) файл (назва файлу)

Изображение слайда
56

Слайд 56: Відносні адреси

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

Изображение слайда
57

Слайд 57: Шлях для відносних посилань має такі спеціальні позначення :

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

Изображение слайда
58

Слайд 58: Приклади відносних адрес

Адреса Опис / Ці два посилання називаються неповними і вказують веб-серверу завантажувати файл index.html ( або default.html), який знаходиться в корені сайту або папці demo. Якщо файл index.html відсутній, браузер, як правило, показує список файлів, що знаходяться в даному каталозі. /demo/ /images/pic.gif Слеш перед адресою говорить про те, що адресація починається від кореня сайту. Посилання веде на малюнок pic.gif, який знаходиться в папці images. А та в свою чергу розміщена в корені сайту. ../help/me.html Дві точки перед ім'ям вказують браузеру перейти на рівень вище в списку каталогів сайту. manual/info.html Якщо перед ім'ям папки немає ніяких додаткових символів, на зразок точок, то вона розміщена всередині поточного каталогу

Изображение слайда
59

Слайд 59: Відкриття посилання у новому вікні

Однією з доступних особливостей пов'язаної з гіперпосиланнями є здатність визначити, де посилання відкриється при натисканні. Як правило, посилання відкриваються в тому ж вікні, в якому по ним клацнули, однак посилання також можуть бути відкриті в нових вікнах. Для відкриття посилання в новому вікні використовуйте атрибут target зі значенням _ blank. Цей атрибут визначає, де саме буде відображатися посилання, а значення _ blank задає нове вікно:

Изображение слайда
60

Слайд 60: Завантаження файлу по ссилці

При наявності атрибута download браузер не переходить за посиланням, а запропонує завантажити документ, зазначений в адресі посилання.

Изображение слайда
61

Слайд 61: Додавання опису до посилання

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

Изображение слайда
62

Слайд 62: Створення посилань на адресу електронної пошти

Іноді ми хочемо створити гіперпосилання на нашу адресу електронної пошти. Наприклад, текст гіперпосилання « Email Me» при натисканні відкриває клієнт електронної пошти користувача, заданий за замовчуванням і попередньо заповнює певні дані. Як мінімум, адреса електронної пошти та іншу інформацію, таку як тема і текст листа.

Изображение слайда
63

Слайд 63

Для створення такого посилання значення атрибута href має починатися з mailto: Потім слід адреса електронної пошти, на який має бути відправлено повідомлення: Можна також автоматично додати тему повідомлення, приєднавши до адреси електронної пошти через символ запитання - параметр subject : Для автоматичного заповнення поля тексту повідомлення використовують параметр body :

Изображение слайда
64

Слайд 64: Приклад

Изображение слайда
65

Слайд 65: Посилання на телефонний номер та Skype

Изображение слайда
66

Слайд 66: Создание ссылку внутрь страницы

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

Изображение слайда
67

Слайд 67: Як організувати посилання такого типу?

Знайдіть те місце на сторінці, яке ви хочете використовувати в якості «місця приземлення». Це може бути будь-який текст на сторінці, але частіше застосовується короткий фрагмент тексту заголовка. Виберіть ідентифікаційне ім'я для фрагмента і вставте атрибут id в відкриває тег відповідного елемента. Щоб послатися на якір на сторінці, просто додайте символ « # » у посилання, за яким вкажіть ім'я якоря.

Изображение слайда
68

Слайд 68: Приклад

Изображение слайда
69

Слайд 69: Изображение в качестве ссылок

Крім тексту, в якості посилань можна використовувати і малюнки. Зображення в цьому випадку їх треба помістити між тегами <a> і </a>. Розглянемо для початку, як відобразити картинку на веб-сторінці. Елемент < img > призначений для відображення на веб-сторінці зображень в графічному форматі GIF, JPEG, SVG або PNG. Адреса файлу з картинкою задається через атрибут src.

Изображение слайда
70

Слайд 70: Основні атрибути елемента < img >

Назва Опис alt Альтернативний текст для зображення src Путь до графічного файлу height Висота зображення longdesc Вказує адресу документа, де міститься анотація до картинки width Ширина зображення usemap Посилання на елемент < map >, що містить координати для клієнтської карти-зображення

Изображение слайда
71

Слайд 71: 5. Створення списків ( HTML LISTS)

Изображение слайда
72

Слайд 72: Списки

Для створення списків в HTML потрібні два елементи, які створюють список тільки за умови використання їх обох. Перший застосовується для розмітки кожного пункту списку. Другий визначає тип створюваного списку: упорядкований ( нумерований ) або невпорядкований ( маркований ). невпорядкований список - < ul > упорядкований список - < ol > елемент списку - < li >

Изображение слайда
73

Слайд 73: Як сформувати список?

Помістіть кожен елемент списку в HTML - елемент < li >. Щоб створити список, потрібно помістити кожен його пункт в окремий HTML- елемент < li >. Іншими словами, потрібно « загорнути » цей пункт списку у відкриваючий < li > та закриваючий </ li >. Як і для всіх інших HTML- елементів, текст всередині тегів може бути будь- якої довжини. Крім того, його можна розбити на будь-яку кількість рядків. Якщо ви використовуєте елемент < ol >, то пункти списку будуть пронумеровані, якщо елемент < ul >, то список буде відображатися як маркований.

Изображение слайда
74

Слайд 74: Синтаксис

Изображение слайда
75

Слайд 75: Атрибути тегів списку

Назва Опис <ol> <ul> <li> type Встановлює вид маркера списку устарів <ol> reversed Спадаюча нумерація списку (3,2,1 ). Html5 start Задає число, з якого буде починатися нумерований список Html5 <li> value Число, з якого буде починатися нумерований список Html5

Изображение слайда
76

Слайд 76: Елементи < dl >, < dt >, < dd >

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

Изображение слайда
77

Слайд 77

Изображение слайда
78

Слайд 78: Вкладений список

Изображение слайда
79

Последний слайд презентации: Лекція 2 «Створення HTML- сторінок ( частина 1 )»: Дякую за увагу !

к.е.н., доцент кафедри інформаційного менеджменту Корзаченко Ольга В олодимирівна

Изображение слайда