3.67M

Категория:

Программирование

Похожие презентации:

«Створення HTML- сторінок (частина 1)». Лекція 1

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

HTML. Мова розмітки гіпертексту

Мова розмітки гіпертексту HTML 5

Введення в HTML

HTML. Текст, списки

Web-технології. Програмування

«Технологія СSS» Лекція 2

Перша web-сторінка. HTML

Еволюція стандартів веб розмітки в контексті історичного розвитку інформаційних технологій

HTML5: Лекція #1

2.

Agenda
Введення в HTML
Загальні теги HTML
Стандарт HTML і перевірка
Редактори коду
Ресурси
Практичне завдання
Домашнє завдання

3.

HTML / CSS / JavaScript
• HTML – Hypertext Markup Language
• CSS – Cascading Style Sheets
• JavaScript – Scripting Programming Language
3

HTML документи та HTTP Protocol
Hypertext Markup Language (HTML) — це мова
розмітки веб-сторінок
Hypertext Transport Protocol (HTTP) — це протокол,
який забезпечує транспортування сторінок до
клієнтів
DNS
DNS,
HTTP
HTTP

5.

HTML Document
HTML Document - це текстовий
документ, створений для
представлення відформатованої
інформації, включаючи текст,
відео, зображення, звуки
Документ HTML створюється
тегами і складається з розділів
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample website</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

6.

Загальні HTML Tеги
<html>: Ідентифікує сторінку як документ HTML
<head>: Містить розмітку та код, який
використовується браузером, таку як сценарії, що
додають інтерактивності, та ключові слова, щоб
допомогти пошуковим системам знайти сторінку
<title>: Відображає заголовок веб -сторінки, яка
з’являється у верхній частині веб -браузера, як
правило, на вкладці сторінки в браузері
<body>: Оточує вміст, який видно на веб -сторінці,
коли переглядається у веб -браузері

7.

Загальні HTML Tags (Продовження)
• <p>: розбиває текст на параграфи (paragraph)
• <a href="URL">: Зазвичай використовується для
прив’язки URL-адреси до тексту чи зображення; може
створити іменований прив’язок у документі, щоб
дозволити посилання на розділи документа
• <h1> - <h6>: Cтворення заголовку, починаючи з
першого рівня (h1) та до шостого рівня (h6)
• <b>: жирний текст
• <i>: курсив
• <u>: текст з підкресленням
• <img>: вставити малюнок з файлу або іншого Web
site

8.

Парні теги
• Tags та keywords які визначають структуру сторінки
HTML
• Ключове слово в кутових дужках
• Більшість тегів поставляються парами
Відкриваючий або start tag
Закриваючий або end tag
<h1>Pet Care 101</h1>
• Закриваючий тег має мати той самий регістр, що й
відкриваючий тег

9.

Порожні теги
• Порожні теги не потребують кінцевого тегу
• Приклади:
<br> для розриву рядка
<hr> для горизонтальної лінії

10.

Мінімальний набір HTML Tags
• Мінімальний набір тегів на кожній вебсторінці (зверніть увагу: деякі з них
насправді є необов’язковими в
специфікаціях):
<!DOCTYPE> directive
<!DOCTYPE html>
<html>
<html>
<head>
<head>
<title>...</title>
<title>
</head>
<body>
<body>
...
</body>
</html>

11.

Doctype
• Директива DOCTYPE Визначає мову або
правила, які використовує сторінка.
• У HTML DOCTYPE нечутливий до регістру.
• Усі наступні DOCTYPE є дійсними:
<!doctype html>
<!DOCTYPE html>
<!DOCTYPE HTML>
<!DoCtYpE hTmL>

12.

Doctype
• HTML 4.01 doctype приклад:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.example.com/TR/xhtml11/
DTD/xhtml11.dtd">
• HTML5 doctype приклад:
<!DOCTYPE html>

13.

Елементи
• Пара тегів або порожній тег також називається
елементом.
• Елемент може описувати вміст, вставляти
графіку або відео та створювати
гіперпосилання.

14.

Атрибути
• Атрибути — це модифікатори елементів
HTML, які надають додаткову інформацію
• Атрибути є розширеннями елементів
• Синтаксис:
• Example:
<img src="picture.jpg" alt="Short description">

15.

Створення посилання
• приклад:
<a href="http://html5.edu" target="_blank">
This is a link.
</a>
_blank: відкриває пов’язаний документ у новому вікні чи
вкладці
_self: відкриває пов’язаний документ у тому ж фреймі, у
якому його було клацнуто (це типово)

16.

Вкладання
• Для розміщення одного елемента в іншому
приклад:
<p>Make sure your pet has plenty of
<i><b>fresh water</i> during hot
weather. </b></p>

17.

Сутності
• Спеціальний символ, як-от символ долара,
зареєстрована торгова марка (велика буква R у
колі) і літери з акцентами
• Починається з амперсанда (&) і закінчується
крапкою з комою (;)
• приклади:
сутність ® позначає символ зареєстрованої
торгової марки
Її числовий код ®
https://dev.w3.org/html5/html-author/charref

HTML5: Лекція #1

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.