19.03.2020
Поняття мови розмітки гіпертексту. Етапи створення веб-сайтів
Опрацюйте теоретичний матеріал , зробіть відповідні записи у зошит;
Виконайте практичні завдання (використовуйте програмний засіб БЛОКНОТ, який знаходиться на кожному ПК);
*скриншоти (використовуй клавішу PRT SC SYSRQ )виконаних завдань відправляти на адресу karantun-2020@ukr.net або matematika-2020@ukr.net
!!!!!! Роботу виконати до 16.00 (23. 03. 2020, понеділок);
!!!!! Після вказаного часу роботи не будуть перевірятися;
Тема уроку: Поняття мови розмітки гіпертексту. Етапи створення веб-сайтів
Поняття мови розмітки гіпертексту
1. Поняття про мову HTML
HTML (англ. HyperText Markup Language — мова розмітки гіпертексту) — це набір тегів та правила їх застосування для створення гіпертекстових документів.
HTML не є мовою програмування.
2. html-документ
Тег — це записана в кутових дужках < > позначка мови HTML, яку опрацьовує браузер.
Структура html-документа:
<html> — початок документа;
<head> — заголовок документа зі службовою інформацією;
<title> — назва, що відображатиметься на вкладці браузера;
</title> — к інець н азви;
</head> — кінець заголовка документа;
<body> — «тіло» документа: все, що відображається на веб-сторінці;
</body> — кінець «тіла» документа;
</html> — кінець документа.
3. Форматування тексту
Тегами мови HTML визначають вигляд об’єктів, зокрема текстових фрагментів, на веб-сторінці.
Теги бувають парними (контейнери) і непарними. Парний тег складається з відкриваючого і закриваючого тегів. Закриваючий тег починається символом «/».
<b>…</b> — парний тег напівжирного шрифту.
<br> або <br/> — непарний тег розриву рядка.
Теги з помилками або такі, що не підтримуються використовуваним браузером, ігноруються.
Розглянемо значення деяких тегів форматування тексту:
Тег може містити атрибути — параметри, значення яких впливають на дію тега. Атрибути записуються після відкриваючого тега.
Зазвичай значення атрибутів беруть у лапки.
Тег <body> з атрибутами text (колір тексту) і bgсolor (колір тла):
Приклад застосування атрибутів:
4. Марковані та нумеровані списки
Для створення маркованого списку використовують тег <ul>…</ul> з атрибутом type, який задає вигляд маркера: ꞋꞋdiskꞋꞋ, ꞋꞋcircleꞋꞋ або ꞋꞋsquareꞋꞋ.
Для створення нумерованих списків використовують тег <ol>…</ol> з атрибутами type (тип нумерації: ꞋꞋ1ꞋꞋ — арабські цифри, ꞋꞋАꞋꞋ — латинські літери, ꞋꞋІꞋꞋ — римська нумерація тощо) і start (задання початкового номеру арабськими цифрами). Елементи списку розмічають тегами <li>…</li>.
Практичні завдання:
Завдання 1.
Створити html-документ із відформатованим текстом.
1) Запустіть текстовий редактор Блокнот (Leafpad) і введіть у текстовий документ теги за зразком:
2) Збережіть створений файл як html-документ: Файл → Зберегти як → Тип файлу (всі файли) → Ім’я: Завдання_1.html.
3) Відкрийте папку зі збереженим файлом і за допомогою браузера відкрийте html-файл Завдання_1.
Завдання 2.
Створити html-документ з розповіддю деякої особи про себе.
1) Запустіть текстовий редактор Блокнот (Leafpad) і введіть у текстовий документ теги за зразком:
2) Збережіть створений файл як html-документ: Файл → Зберегти як → Тип файлу (всі файли) → Ім’я: Завдання_2.html.
3) Відкрийте папку зі збереженим файлом і за допомогою браузера відкрийте html-файл Завдання_2.
УСПІХУ!!!!