Лекція 1. Основи html5 Для студентів спеціальності "Початкова освіта" та "Електроніка"

1. Лекція # 01

2. * Я бачив майбутнє. Воно у моєму браузері.

3. Бра́узер, або оглядач, (веб-)переглядач (англ. browser) — програмне забезпечення
для комп'ютера або іншого електронного пристрою, як правило, під'єднаного до
Інтернету, що дає можливість користувачеві взаємодіяти з текстом, малюнками або
іншою інформацією на гіпертекстовій веб-сторінці.
Веб-переглядач під'єднується до сервера HTTP, отримує з нього документ і форматує
його (інтерпретує) для представлення користувачеві або намагається викликати
зовнішню програму, яка це зробить, залежно від формату документа.
Формати документа, які веб-переглядач повинен представляти без допомоги
зовнішніх програм, визначає World Wide Web Consortium (скорочено W3C). До них
належать формати текстових документів HTML та XHTML, а також найпоширеніші
формати растрової графіки GIF, JPEG та PNG (останній — розробка W3C).

4. Розроблений «батьком» сервісу
Всесвітньої павутини (WWW –
World Wide Web) Тімом Бернерсом
Лі у 1990 році

5. MidasWWW був розроблений у
Стенфордському університеті в 1992
Lynx (1992) був текстовим оглядачем. Міг
відображати лише текстову інформацію

6. NCSA Mosaic (1993) був першим оглядачем, який
умів відображати графічні зображення вбудовані
у текстові блоки. Пізніше був перейменований
на Netscape Navigator (1994), який проіснував до
2007 року.
Internet Explorer (1995) браузер від компанії
Microsoft. Перші версії базувалися на основі
Mosaic.

7. Opera (1994) Почав свій шлях як дослідницький
проект норвезької телекомунікаційної компанії
Теленор. Першим почав підтримувати вкладки.
Mozilla Firefox (2004) розроблявся як
безкоштовна версія Netscape Navigator. По суті
є його нащадком.

8. Chrome (2008) розроблений компанією Google.
За вісім років перетворився на найбільш
популярний браузер у світі.
Microsoft Edge (2015) відомий також як Project
Spartan. Покликаний замінити застарілий
Internet Explorer.

11. О, так!
Ми готові до
зустрічі із
HTML5…

12. 1. HyperText — текст, що містить вузли переходу між ними
2. Mark-up — це розмітка
3. Language — це мова (HTML)
HTML — це стандартна мова розмітки документів в Інтернеті. Мова інтерпретується
браузерами(не тільки) і відображається в зручній для людини формі.
HTML не є мовою програмування!

13.  HTML 0.9
 RFC 1866 — HTML 2.0, ухвалений як стандарт 22 вересня 1995 року
 HTML 3.2 — 14 січня 1997 року
 HTML 4.0 — 18 грудня 1997 року
 HTML 4.01 (зміни, причому досить значні) — 24 грудня 1999 року
 ISO/IEC 15445:2000 (так званий ISO HTML, оснований на HTML 4.01 Strict) — 15
травня 2000 року
 HTML5— 28 жовтня 2014 року
 HTML 5.1 почав розроблятися 17 грудня 2012 року

14. Гайдамаки (уривок)
Все йде, все минає — і краю немає. Куди ж воно ділось? відкіля взялось? І
дурень, і мудрий нічого не знає. Живе… умирає… одно зацвіло, А друге зав'яло,
навіки зав'яло… І листя пожовкле вітри рознесли. А сонечко встане, як перше
вставало, І зорі червоні, як перше плили, Попливуть і потім, і ти, білолиций, По
синьому небу вийдеш погулять, Вийдеш подивиться в жолобок, криницю І в море
безкрає, і будеш сіять, Як над Вавілоном, над його садами І над тим, що буде з
нашими синами.

15. Гайдамаки (уривок)
Все йде, все минає — і краю немає.
Куди ж воно ділось? відкіля взялось?
І дурень, і мудрий нічого не знає.
Живе… умирає… одно зацвіло,
А друге зав'яло, навіки зав'яло…
І листя пожовкле вітри рознесли.
А сонечко встане, як перше вставало,
І зорі червоні, як перше плили,
Попливуть і потім, і ти, білолиций,
По синьому небу вийдеш погулять,
Вийдеш подивиться в жолобок, криницю
І в море безкрає, і будеш сіять,
Як над Вавілоном, над його садами
І над тим, що буде з нашими синами.

16. [початок заголовока]Гайдамаки (уривок) [кінець заголовока]
[початок абзацу] Все йде, все минає — і краю немає. [перенос]
Куди ж воно ділось? відкіля взялось? [перенос]
І дурень, і мудрий нічого не знає. [кінець абзацу]
[початок абзацу] Живе… умирає… одно зацвіло, [перенос]
А друге зав'яло, навіки зав'яло… [перенос]
І листя пожовкле вітри рознесли. [кінець абзацу]
[початок абзацу] А сонечко встане, як перше вставало, [перенос]
І зорі червоні, як перше плили, [перенос]
Попливуть і потім, і ти, білолиций, [перенос]
По синьому небу вийдеш погулять, [перенос]
Вийдеш подивиться в жолобок, криницю [перенос]
І в море безкрає, і будеш сіять, [перенос]
Як над Вавілоном, над його садами [перенос]
І над тим, що буде з нашими синами. [кінець абзацу]

17. Тег — елемент мови розмітки, що вміщений між символами < та >.
Теги бувають:
• Парні (подвійні) <div> </div>
• Непарні (одинарні) <br>
Теги не залежать від регістру літер:
<html>,<HTML> або навіть <hTmL> — однакові теги.
Однак рекомендується всі теги писати маленькими літерами!

18. <h2>Гайдамаки (уривок)</h2>
<p>Все йде, все минає — і краю немає. <br>
Куди ж воно ділось? відкіля взялось? <br>
І дурень, і мудрий нічого не знає. </p>
<p>Живе… умирає… одно зацвіло, <br>
А друге зав'яло, навіки зав'яло… <br>
І листя пожовкле вітри рознесли. </p>
<p>А сонечко встане, як перше вставало, <br>
І зорі червоні, як перше плили, <br>
Попливуть і потім, і ти, білолиций, <br>
По синьому небу вийдеш погулять, <br>
Вийдеш подивиться в жолобок, криницю <br>
І в море безкрає, і будеш сіять, <br>
Як над Вавілоном, над його садами <br>
І над тим, що буде з нашими синами. </p>

19. <i>дуже <b> довгий текст </b> дуже </i> — Правильно
<i>дуже<b> довгий текст </i> дуже</b> — Неправильно
<!--Браузер це зрозуміє так:-->
<i>дуже<b> довгий текст </b> </i> <b>дуже</b>

21. <div class="he'a'der"> — у подвійних лапках
<input checked='checked'> — в апострофах
<div class=highlighted> — без лапок
<input checked> — одиночні атрибути

22. Використовуються для вставки пояснень/описів до фрагментів коду сторінки або
тимчасового виключення рядків з відображення у браузері.
<!-- Це текст коментаря (пояснення) до фрагменту коду сторінки -->

23. HTML документ повинен мати .htm або .html розширення.
Файли HTML-документів можуть бути створені за допомогою простих текстових
редакторів:
 NotePad
 NotePad ++
 PsPad
 Brackets
Або візуальних редакторів WYSIWYG (акронім від What You See Is What You Get -
англ. що бачиш, те й отримуєш)
 Microsoft WebMatrix
 Microsoft Expression Web
 Microsoft Visual Studio
 Adobe Dreamweaver

24. <!DOCTYPE html>
<html>
<head>
<!--Інформація про сторінку-->
</head>
<body>
<!-- Вміст сторінки-->
</body>
</html>

25. Є теги, які обов’язково містяться у кожній веб сторінці:
<!DOCTYPE html> — вказує на те, що даний документ
(файл) має саме html5 розмітку.
<html> – кореневий тег, в який вкладаються всі інші теги
сторінки.
<head> – містить інформацію про сторінку: заголовок,
під’єднувані файли (таблиці стилів, шрифти, скрипти тощо),
мета інформацію.
<body> – візуальний вміст сторінки.

26. <title> - задає заголовок сторінки
<title>Заголовок сторінки</title>
<meta> — визначає мета-теги, які
використовуються для збереження
інформації, що призначена для браузерів та
пошукових систем.

27. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
Атрибути:
 http-equiv — встановлює HTTP-заголовок
 content — значення атрибута
<meta name="Keywords"
content="k-p city, портал, новини, форуми"/>
<meta name="Description"
content="Інформаційний ресурс найкращого міста"/>
 атрибут name — встановлює модифікатор мета-тега