Лекція 2 «Створення HTML- сторінок ( частина 1 )» презентация
Содержание
- 2. План лекції Структура HTML-документа Блокові і рядкові елементи Оформлення
- 3. 1. Структура HTML-документа
- 4. 1.1. Об'єктна модель HTML-документу DOM Елементи, що знаходяться всередині тега <html>,
- 5. Приклад
- 6. «Родинні стосунки» HTML-елементів Предок – елемент, який містить в собі інші
- 7. Приклад
- 8. 1.2. Основні елементи HTML-сторінки Вказується службовий елемент <! DOCTYPE> Починається з
- 9. Тег <!DOCTYPE> Елемент <!DOCTYPE> призначений для зазначення типу поточного документа -
- 10. Тег <!DOCTYPE>
- 11. Тег <!DOCTYPE> Часто можна зустріти код HTML взагалі без використання <!DOCTYPE>,
- 13. Елемент <html> Є кореневим елементом документа. Всі інші елементи містяться
- 15. Елемент <head> Контейнер <head> </ head> містить технічну інформацію про сторінку:
- 17. Елемент <title> Обов'язковою тегом розділу <head> є тег <title>. Текст,
- 18. Елемент <meta> Елемент <meta> визначає метатеги, які використовуються для зберігання інформації,
- 19. Атрибути елементу <meta>
- 21. Елемент <body> Елемент <body> призначений для зберігання змісту веб-сторінки (контенту), що
- 22. Приклад
- 23. 2. Блочні та рядкові елементи
- 24. Блочні та рядкові елементи (HTML block and inline tags) Всі елементи
- 25. Блочні елементи Це великі блоки web-сторінки. При відображенні браузер автоматично
- 26. Блочні елементи Зазвичай блокові елементи використовуються, щоб розділити вміст web -сторінки
- 27. Рядкові елементи Використовуються для розмітки частин вмісту елементів. Ширина рядкового елемента
- 28. Взаємодія блочних та рядкових елементів
- 29. Елементи <div> та <span> <div> Елемент <div> є універсальним блоковим елементом
- 30. Код html-сторінки
- 31. Код html-страницы
- 32. <span> Універсальний рядковий елемент <span> призначений для виділення окремих рядків, символів
- 33. Код html-сторінки
- 34. Код html-сторінки
- 35. 3. Оформлення тексту HTML
- 36. HTML-текст HTML текст представлений в специфікації тегами для форматування і угруповання
- 37. Заголовки є блочними елементами Заголовки є блочними елементами і в них
- 39. Заголовки Заголовки повинні бути використані в порядку, що відповідає змісту сторінки.
- 40. Код html-сторінки
- 41. 3.2. Теги для форматування тексту
- 43. Жирний текст Жирний текст Є два елементи, які виділять текст
- 44. Курсивний текст Курсивний текст Для курсивного тексту, на якому тим
- 45. 3.3. Абзаци, засоби перенесення тексту Тег <p> Розбиває текст на окремі
- 48. 3.4. Коментарі Іноді для того, щоб краще розуміти html-код, вставляють в
- 49. 3.5. Цитати
- 50. 3.6. Теги для вводу «комп'ютерного» тексту <code> <kbd> <samp> <var> <pre>
- 51. 4. Гіперпосилання (HTML LINKS)
- 52. Створення посилань на інші сторінки Елемент <a> є одним з найважливіших
- 54. Адреси на web-сторінках. Адреса посилання може бути абсолютною або відносною.
- 55. Абсолютні адреси Абсолютні адреси працюють всюди незалежно від імені сайту або
- 56. Відносні адреси Відносні посилання описують шлях до зазначеного документа щодо поточного.
- 57. Шлях для відносних посилань має такі спеціальні позначення: / Вказує
- 58. Приклади відносних адрес
- 59. Відкриття посилання у новому вікні Однією з доступних особливостей пов'язаної з
- 60. Завантаження файлу по ссилці При наявності атрибута download браузер не переходить
- 61. Додавання опису до посилання Атрибут title додає пояснювальний текст до заслання
- 62. Створення посилань на адресу електронної пошти Іноді ми хочемо створити гіперпосилання
- 63. Для створення такого посилання значення атрибута href має починатися з mailto:
- 64. Приклад
- 65. Посилання на телефонний номер та Skype
- 66. Создание ссылку внутрь страницы Для створення посилань всередину сторінки прийнято використовувати
- 67. Як організувати посилання такого типу? Знайдіть те місце на сторінці, яке
- 68. Приклад
- 69. Изображение в качестве ссылок Крім тексту, в якості посилань можна використовувати
- 70. Основні атрибути елемента <img>
- 71. 5. Створення списків (HTML LISTS)
- 72. Списки Для створення списків в HTML потрібні два елементи, які створюють
- 73. Як сформувати список? Помістіть кожен елемент списку в HTML - елемент
- 74. Синтаксис
- 75. Атрибути тегів списку
- 76. Елементи <dl>, <dt>, <dd> Елемент <dd> входить в трійку елементів <dl>,
- 78. Вкладений список
- 79. Дякую за увагу! к.е.н., доцент кафедри інформаційного менеджменту Корзаченко Ольга Володимирівна
- 80. Скачать презентацию
Слайды и текст этой презентации
Слайд 1
Описание слайда:
Лекція 2
«Створення HTML-сторінок (частина 1)»
Слайд 2
Описание слайда:
План лекції
Структура HTML-документа
Блокові і рядкові елементи
Оформлення тексту в HTML
Гіперпосилання в HTML
Створення списків в HTML
Слайд 3
Описание слайда:
1. Структура HTML-документа
Слайд 4
Описание слайда:
1.1. Об'єктна модель HTML-документу DOM
Елементи, що знаходяться всередині тега <html>, утворюють дерево документа, так звану об'єктну модель документа, DOM (Document Object Model). При цьому елемент <html> є кореневим елементом.
Відповідно до DOM-моделі, документ є ієрархією.
Кожен html-тег утворює окремий елемент-вузол, кожен фрагмент тексту – текстовий елемент тощо.
DOM – це подання (відображення) html-документа у вигляді дерева тегів. Це дерево утворюється за рахунок вкладеної структури тегів плюс текстових фрагментів сторінки, кожен з яких утворює окремий вузол.
Слайд 5
Описание слайда:
Приклад
Слайд 6
Описание слайда:
«Родинні стосунки» HTML-елементів
Предок – елемент, який містить в собі інші елементи.
Нащадок – елемент, розташований усередині одного або більше типів елементів.
Батьківський елемент – елемент, пов'язаний з іншими елементами нижчого рівня, і що знаходиться на дереві вище їх.
Дочірній елемент – елемент, безпосередньо підпорядковане іншому елементу вищого рівня.
Сестринський елемент – елемент, який має загальний батьківський елемент з даним, так звані елементи одного рівня.
Слайд 7
Описание слайда:
Приклад
Слайд 8
Описание слайда:
1.2. Основні елементи HTML-сторінки
Вказується службовий елемент <! DOCTYPE>
Починається з тегу <html> і закінчується тегом </html>. Така пара тегів повідомляє браузеру, що це html-документ.
Містить два розділи – заголовки і тіло документа.
Розділ заголовків помічений тегами
<head> і </head> та містить інформацію
про документ загалом.
Текст документа міститься в його тілі,
яке розташоване між тегами
<body> та </body>.
Слайд 9
Описание слайда:
Тег <!DOCTYPE>
Елемент <!DOCTYPE> призначений для зазначення типу поточного документа - DTD (Document Type Definition, опис типу документа). Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну web-сторінку, оскільки HTML існує в декількох версіях.
Існує кілька видів <!DOCTYPE>, вони різняться в залежності від версії мови, на яку орієнтовані.
Слайд 10
Описание слайда:
Тег <!DOCTYPE>
Слайд 11
Описание слайда:
Тег <!DOCTYPE>
Часто можна зустріти код HTML взагалі без використання <!DOCTYPE>, веб-сторінка в подібному випадку все одно буде показана.
Проте, може статися, що один і той же документ відображається в браузері по-різному при використанні <!DOCTYPE> і без нього.
Крім того, браузери можуть по-своєму показувати такі документи, в результаті сторінка «розсипиться», тобто буде відображатися зовсім не так, як це потрібно розробнику.
Щоб не сталося подібних ситуацій, завжди додавайте <!DOCTYPE> в початок документа.
Слайд 12
Описание слайда:
Слайд 13
Описание слайда:
Елемент <html>
Є кореневим елементом документа.
Всі інші елементи містяться всередині тегів <html> ... </ html>.
Все, що знаходиться за межами тегів, не сприймається браузером як код html і ніяк їм не обробляється.
Слайд 14
Описание слайда:
Слайд 15
Описание слайда:
Елемент <head>
Контейнер <head> </ head> містить технічну інформацію про сторінку: заголовок, опис, ключові слова для пошукових машин, кодування тощо.
Усередині контейнера <head> допускається розміщувати такі елементи:
<link>, <meta>, <script>, <style>, <title>.
Вміст тега <head> не відображається безпосередньо на web-сторінці, за винятком тега <title>, який встановлює заголовок вікна web-сторінки.
Слайд 16
Описание слайда:
Слайд 17
Описание слайда:
Елемент <title>
Обов'язковою тегом розділу <head> є тег <title>.
Текст, розміщений всередині цього тега, відображається в рядку заголовка веб-браузера.
Довжина заголовка повинна бути не більше 60 символів.
Текст заголовка повинен містити максимально повний опис вмісту веб-сторінки.
Слайд 18
Описание слайда:
Елемент <meta>
Елемент <meta> визначає метатеги, які використовуються для зберігання інформації, призначеної для браузерів і пошукових систем. Наприклад, механізми пошукових систем звертаються до метатегів для отримання опису сайту, ключових слів та інших даних.
Дозволяється використовувати більш ніж один тег, всі вони розміщуються в контейнері <head>.
Як правило, атрибути будь-якого метатега зводяться до пар «ім'я = значення», які визначаються ключовими словами content, name або http-equiv.
Слайд 19
Описание слайда:
Атрибути елементу <meta>
Слайд 20
Описание слайда:
Слайд 21
Описание слайда:
Елемент <body>
Елемент <body> призначений для зберігання змісту веб-сторінки (контенту), що відображається у вікні браузера. Інформацію, яку слід виводити в документі, слід розташовувати саме всередині контейнера <body>. До такої інформації належить текст, зображення, теги, скрипти JavaScript тощо.
Часто тег <body> використовується для розміщення обробника подій, наприклад, onload, яке виконується після того, як документ завершив завантаження в поточне вікно або фрейм.
Слайд 22
Описание слайда:
Приклад
Слайд 23
Описание слайда:
2. Блочні та рядкові елементи
Слайд 24
Описание слайда:
Блочні та рядкові елементи
(HTML block and inline tags)
Всі елементи HTML діляться на дві групи:
блочні (block);
рядкові (inline).
Слайд 25
Описание слайда:
Блочні елементи
Це великі блоки web-сторінки.
При відображенні браузер автоматично додає розрив рядка до і після блокового елемента, при цьому він займає всю доступну ширину (за замовчуванням відображається на веб-сторінці у вигляді прямокутника).
Висота блокового елемента обчислюється браузером автоматично, виходячи з обсягу його вмісту.
Текст в блокових елементів за замовчуванням вирівнюється по лівому краю.
Слайд 26
Описание слайда:
Блочні елементи
Зазвичай блокові елементи використовуються, щоб розділити вміст web -сторінки на логічні блоки (наприклад, заголовок (шапка сайту), меню, блок з контентом, нижній колонтитул та ін).
Блокові елементи не можна вкладати в рядкові, винятком є тільки посилання і комірки таблиць, всередині яких за стандартом HTML5 можуть бути розташовані блокові елементи.
Examples of Block Elements:
<p>, <div>, <form>, <header>, <nav>, <ul>, <li>, and <h1>.
Слайд 27
Описание слайда:
Рядкові елементи
Використовуються для розмітки частин вмісту елементів.
Ширина рядкового елемента дорівнює об'єму вмісту.
На відміну від блокових елементів браузер не додає розрив рядка до і після рядкового елемента, тому, якщо кілька рядкових елементів йдуть підряд один за одним, вони розташовуються на одній лінії, і переносяться на інший рядок при необхідності.
У більшості випадків всередину рядкових елементів допустимо розміщувати інші малі елементи, вставляти блокові елементи всередину рядкових заборонено.
Examples of Inline Elements:
<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>
Слайд 28
Описание слайда:
Взаємодія блочних та рядкових елементів
Слайд 29
Описание слайда:
Елементи <div> та <span>
<div>
Елемент <div> є універсальним блоковим елементом і призначений для групування елементів документа з метою зміни виду вмісту через стилі.
Слайд 30
Описание слайда:
Код html-сторінки
Слайд 31
Описание слайда:
Код html-страницы
Слайд 32
Описание слайда:
<span>
Універсальний рядковий елемент <span> призначений для виділення окремих рядків, символів або інших малих елементів для подальшої зміни їх оформлення за допомогою стилів.
Наприклад, всередині абзацу (<p></p>) можна змінити колір і розмір першого слова, якщо його виділити за допомогою елемента <span> і задати для нього бажаний стиль.
Слайд 33
Описание слайда:
Код html-сторінки
Слайд 34
Описание слайда:
Код html-сторінки
Слайд 35
Описание слайда:
3. Оформлення тексту HTML
Слайд 36
Описание слайда:
HTML-текст
HTML текст представлений в специфікації тегами для форматування і угруповання тексту. Теги є контейнерами для тексту і не мають візуального відображення.
Теги для форматування тексту несуть смислове навантаження і зазвичай задають для тексту стильове оформлення.
Вся текстова інформація, яка відображається на сайті, розміщується всередині тега <body>.
Слайд 37
Описание слайда:
Заголовки є блочними елементами
Заголовки є блочними елементами
і в них є шість різних рангів <h1> – <h6>.
Заголовки допомагають швидко розбити вміст і встановити ієрархію, і вони є ключовими ідентифікаторами для користувачів, що переглядають сторінку.
Заголовки допомагають пошуковим системам індексувати і визначати вміст на сторінці.
Слайд 38
Описание слайда:
Слайд 39
Описание слайда:
Заголовки
Заголовки повинні бути використані в порядку, що відповідає змісту сторінки.
Основний заголовок сторінки або розділу повинен бути розмічений за допомогою елемента <h1>, а наступні заголовки повинні використовувати елементи <h2>, <h3>, <h4>, <h5> <h6>, при необхідності.
Кожен рівень заголовка повинен застосовуватися з семантичним змістом і не повинен використовуватися для того, щоб зробити текст жирним або великим, для цього є інші, більш ефективні способи.
Слайд 40
Описание слайда:
Код html-сторінки
Слайд 41
Описание слайда:
3.2. Теги для форматування тексту
Слайд 42
Описание слайда:
Слайд 43
Описание слайда:
Жирний текст
Жирний текст
Є два елементи, які виділять текст жирним шрифтом: елементи <strong> і <b>. Важливо розуміти семантичну різницю між ними.
Перший елемент <b> – встановлює жирний текст, а
<strong> – визначає важливість поміченого тексту.
Теоретично, якщо скористатися, наприклад, мовним браузером, то текст, оформлений за допомогою елементів <b> і <strong>, буде відзначений по-різному. Однак вийшло так, що в популярних браузерах результат їх використання рівнозначний.
Слайд 44
Описание слайда:
Курсивний текст
Курсивний текст
Для курсивного тексту, на якому тим самим робиться акцент, ми будемо використовувати рядковий елемент <em>. Як і з елементами для жирного тексту, є два різних елемента, які встановлюють курсивний текст, кожен зі своїм семантичним змістом.
Елемент <em> семантично застосовується щоб зробити акцент на тексті, це найбільш популярний варіант для курсиву.
Інший варіант — це елемент <i>, він семантично застосовується для передачі тексту іншим голосом або тоном.
Слайд 45
Описание слайда:
3.3. Абзаци, засоби перенесення тексту
Тег <p>
Розбиває текст на окремі абзаци, відокремлюючи один від одного порожнім рядком. Браузер автоматично додає верхній і нижній відступ.
Тег <br>
Переносить текст на наступний рядок, створюючи розрив рядка.
Тег <hr>
Використовується для поділу контента на веб-сторінці. Відображається у вигляді горизонтальної лінії.
Слайд 46
Описание слайда:
Слайд 47
Описание слайда:
Слайд 48
Описание слайда:
3.4. Коментарі
Іноді для того, щоб краще розуміти html-код, вставляють в текст примітки – коментарі.
Вони починаються з спеціального тега <!--. Будь-який записаний після нього текст браузер розглядає як коментар і не відображає під час відтворення документа. Закінчують коментар тегом -->.
Коментар може містити будь-які символи, крім >, а отже, не може включати в себе теги.
Слайд 49
Описание слайда:
3.5. Цитати
Слайд 50
Описание слайда:
3.6. Теги для вводу «комп'ютерного» тексту
<code>
<kbd>
<samp>
<var>
<pre>
Слайд 51
Описание слайда:
4. Гіперпосилання
(HTML LINKS)
Слайд 52
Описание слайда:
Створення посилань на інші сторінки
Елемент <a> є одним з найважливіших в html і призначений для створення посилань. Для цього необхідно повідомити браузеру, що є посиланням, а також вказати адресу документа, на який слід зробити посилання.
Як значення атрибута href використовується адреса документа (URL, Universal Resource Locator, універсальний покажчик ресурсів), на який відбувається перехід.
Вміст тега <a> виступає в якості мітки для посилання. У браузері мітка відображається у вигляді підкресленого тексту, щоб показати, що можна клацнути на ньому кнопкою миші.
Слайд 53
Описание слайда:
Слайд 54
Описание слайда:
Адреси на web-сторінках.
Адреса посилання може бути абсолютною або відносною.
Слайд 55
Описание слайда:
Абсолютні адреси
Абсолютні адреси працюють всюди незалежно від імені сайту або веб-сторінки, де прописана посилання.
Абсолютні посилання містять всю інформацію, необхідну браузеру для знаходження файлу.
Абсолютний шлях містить такі компоненти:
1) протокол (наприклад, http)
2) домен (доменне ім'я або IP-адреса комп'ютера)
3) папка (ім'я папки, що вказує шлях до файлу)
4) файл (назва файлу)
Слайд 56
Описание слайда:
Відносні адреси
Відносні посилання описують шлях до зазначеного документа щодо поточного. Шлях визначається з урахуванням місця розташування веб-сторінки, на якій знаходиться посилання.
Відносні посилання використовуються при створенні посилань на інші документи на одному і тому ж сайті.
Відносний шлях містить такі компоненти:
1) папка (ім'я папки, що вказує шлях до файлу)
2) файл (назва файлу)
Слайд 57
Описание слайда:
Шлях для відносних посилань має такі спеціальні позначення:
/ Вказує на кореневу директорію і говорить про те, що потрібно почати шлях від кореневого каталогу документів і йти вниз до наступної папки
./ Вказує на поточну папку
../ Піднятися на одну папку (директорію) вище
Слайд 58
Описание слайда:
Приклади відносних адрес
Слайд 59
Описание слайда:
Відкриття посилання у новому вікні
Однією з доступних особливостей пов'язаної з гіперпосиланнями є здатність визначити, де посилання відкриється при натисканні. Як правило, посилання відкриваються в тому ж вікні, в якому по ним клацнули, однак посилання також можуть бути відкриті в нових вікнах.
Для відкриття посилання в новому вікні використовуйте атрибут target зі значенням _blank. Цей атрибут визначає, де саме буде відображатися посилання, а значення _blank задає нове вікно:
Слайд 60
Описание слайда:
Завантаження файлу по ссилці
При наявності атрибута download браузер не переходить за посиланням, а запропонує завантажити документ, зазначений в адресі посилання.
Слайд 61
Описание слайда:
Додавання опису до посилання
Атрибут title додає пояснювальний текст до заслання у вигляді підказки. Така підказка відображається, коли курсор миші затримується на засланні, після чого підказка через деякий час пропадає:
Слайд 62
Описание слайда:
Створення посилань на адресу електронної пошти
Іноді ми хочемо створити гіперпосилання на нашу адресу електронної пошти.
Наприклад, текст гіперпосилання «Email Me» при натисканні відкриває клієнт електронної пошти користувача, заданий за замовчуванням і попередньо заповнює певні дані. Як мінімум, адреса електронної пошти та іншу інформацію, таку як тема і текст листа.
Слайд 63
Описание слайда:
Для створення такого посилання значення атрибута href має починатися з mailto: Потім слід адреса електронної пошти, на який має бути відправлено повідомлення:
Для створення такого посилання значення атрибута href має починатися з mailto: Потім слід адреса електронної пошти, на який має бути відправлено повідомлення:
Можна також автоматично додати тему повідомлення, приєднавши до адреси електронної пошти через символ запитання - параметр subject:
Для автоматичного заповнення поля тексту повідомлення використовують параметр body:
Слайд 64
Описание слайда:
Приклад
Слайд 65
Описание слайда:
Посилання на телефонний номер та Skype
Слайд 66
Описание слайда:
Создание ссылку внутрь страницы
Для створення посилань всередину сторінки прийнято використовувати атрибут id, який часто розглядають як спосіб унікальної ідентифікації того чи іншого елемента.
Завдяки id у елементів сторінки формуються певні закладки (якоря), на які можна посилатися.
Якорем називається закладка з унікальним ім'ям на певному місці веб-сторінки, призначена для створення переходу до неї за посиланням.
Слайд 67
Описание слайда:
Як організувати посилання такого типу?
Знайдіть те місце на сторінці, яке ви хочете використовувати в якості «місця приземлення». Це може бути будь-який текст на сторінці, але частіше застосовується короткий фрагмент тексту заголовка.
Виберіть ідентифікаційне ім'я для фрагмента і вставте атрибут id в відкриває тег відповідного елемента.
Щоб послатися на якір на сторінці, просто додайте символ «#» у посилання, за яким вкажіть ім'я якоря.
Слайд 68
Описание слайда:
Приклад
Слайд 69
Описание слайда:
Изображение в качестве ссылок
Крім тексту, в якості посилань можна використовувати і малюнки. Зображення в цьому випадку їх треба помістити між тегами <a> і </a>.
Розглянемо для початку, як відобразити картинку на веб-сторінці.
Елемент <img> призначений для відображення на веб-сторінці зображень в графічному форматі GIF, JPEG, SVG або PNG. Адреса файлу з картинкою задається через атрибут src.
Слайд 70
Описание слайда:
Основні атрибути елемента <img>
Слайд 71
Описание слайда:
5. Створення списків
(HTML LISTS)
Слайд 72
Описание слайда:
Списки
Для створення списків в HTML потрібні два елементи, які створюють список тільки за умови використання їх обох. Перший застосовується для розмітки кожного пункту списку. Другий визначає тип створюваного списку: упорядкований (нумерований) або невпорядкований (маркований).
невпорядкований список - <ul>
упорядкований список - <ol>
елемент списку - <li>
Слайд 73
Описание слайда:
Як сформувати список?
Помістіть кожен елемент списку в HTML - елемент <li>.
Щоб створити список, потрібно помістити кожен його пункт в окремий HTML-елемент <li>. Іншими словами, потрібно «загорнути» цей пункт списку у відкриваючий <li> та закриваючий </li>. Як і для всіх інших HTML-елементів, текст всередині тегів може бути будь-якої довжини. Крім того, його можна розбити на будь-яку кількість рядків.
Якщо ви використовуєте елемент <ol>, то пункти списку будуть пронумеровані, якщо елемент <ul>, то список буде відображатися як маркований.
Слайд 74
Описание слайда:
Синтаксис
Слайд 75
Описание слайда:
Атрибути тегів списку
Слайд 76
Описание слайда:
Елементи <dl>, <dt>, <dd>
Елемент <dd> входить в трійку елементів <dl>, <dt>, <dd>, призначених для створення списку описів.
Кожен такий список починається з контейнера <dl>, куди входить елемент <dt>, що створює термін і елемент <dd>, що задає опис цього терміна.
Слайд 77
Описание слайда:
Слайд 78
Описание слайда:
Вкладений список
Слайд 79
Описание слайда:
Дякую за увагу!
к.е.н., доцент кафедри інформаційного менеджменту Корзаченко Ольга Володимирівна
Скачать презентацию на тему Лекція 2 «Створення HTML- сторінок ( частина 1 )» можно ниже:
