Існують два підходи для створення вебсторінок. З першим, автоматизованим способом, ми вже познайомилися, розглянемо другий спосіб.
Щодня ви відкриваєте сотні вебсторінок. Те, що ви бачите, — це відображений браузером результат роботи веброзробників і дизайнерів. Однак є і «зворотний бік медалі» — так званий вихідний код вебсторінки, записаний спеціальною мовою розмітки НТМL. Власне, цією мовою і «пишуть» вебсторінки в текстовому редакторі, а потім у браузері вони «перевтілюються», набуваючи звичного для нас вигляду
Мова гіпертекстової розмітки HTML розшифровується, як Hyper Text Markup Language — це мова розмітки гіпертексту для подальшого його відображення у вікні браузера. Являє собою сукупність тегів та правил їхнього застосування.
Тегом називається так званий код мови і являє собою службове слово, записане в кутових дужках < >. Наприклад, <html>
Варто зауважити, що в сучасних сайтах для форматування використовують CSS (каскадні таблиці стилів), з якими ми ознайомимося пізніше. Також в інтернеті вам можуть зустрітися сторінки, написані мовою PHP або Python.
Тим не менш, починати знайомство з веб-розробкою прийнято саме з HTML, оскільки будь-які складніші сторінки так чи інакше використовують мову гіпертекстової розмітки та її розуміння залишається базовою навичкою веб-програміста.
Як з’явилася мова HTML і для чого існують теги, дивіться в цьому відео.
Правила запису тегів
1. Теги записують латинськими літерами.
2. Регістр у тегах не розрізняється.
3. Існують парні та непарні теги.
Парні теги містять відкриваючий і закриваючий теги. Закриваючий тег починається символом «/» (слеш).
Наприклад:
Приклад непарного тега
Сьогодні ми познайомимось з наступними тегами:
<!DOCTYPE html> — тип документу за новими нормами
<html>…</html> — мова документу (стара норма)
<head>…</head> — Службова інформація (вміст цього блока не відображається на сторінці, але використовується браузером) в блоці <head> вказують мета-данні сторінки, підключають скрипти та файли стилей.
<title>…</title> — ім’я сторінки, яке відображається в ярлику сторінки браузера, а також у видачі пошукової системи.
<body>…</body> — «тіло» веб-сторінки (вміст цього блоку відображається на веб-страниці)
< h1>…</h1> — заголовок 1 рівня (назва сторінки, може зустрічатись лише 1 раз)
< h2>…</h2> — підшаголовок або заголовок 2 рівня (може зустрічатись кілька разів на сторінці) Заголовки можуть мати декілька рівнів вкладеності, кожен з яких буде автоматично форматуватись певинм чином.
<p>…</p> — параграф
<b>…</b> або <strong>…</strong>— виділення тексту жирним
<i>…</i> або <em>…</em>— виділення тесту курсивом
<u>…</u> — підкреслений текст
<center>…</center> — вирівнювання тексту по центру.
Детальніше про кожен тег дивіться у відео
HTML-теги для форматування тексту ч.1
HTML-теги для форматування тексту ч.2
Програми для створення коду
Для створення веб-сторінок ви можете використовувати різні текстові редактори:
блокнот (інтегровано в ОС Windows);
Notepad++ (завантажити) — рекомендовано;
Sublime Text (завантажити) — редактор як у відео;
WebStorm;
Visual Studio;
Atom;
Eclipse або інші.
Для смартфонів та планшетів (Android або Apple) використовуйте додаток CodeEditor або Notepad++.
Різниця у використанні різних програм суттєва, адже спеціалізовані редактори підсвічують код, підказують правильні варіанти написання тегів а атрибутів, допомогають уникати помилок. Проте, потрапивши на конкурси з веб-дизайну, вам доведеться писати код у звмчайному блокноті, то ж з яким саме редактором стартувати — вирішуйте самі. Я пропоную універсальний варіант — Notepad++. Він зручніший, ніж блокнот, проте не має функціоналу, що значно спрощує написання коду.
РОБОТА ЗА КОМП'ЮТЕРОМ
Завдання 1
Сьогодні створимо нашу першу веб-сторінку. Для цього виконайте наступнй алгоритм:
Відкрийте редактор коду.
Створіть новий файл.
Збережіть його з назвою index.html (де index — назва файлу, а html — його розширення). Зверніть увагу, що у вас має бути відкрите розширення файлів.
Введіть базовий текст сторінки, як на рисунку.
Зверніть увагу, що теги пишуть з певним ссувом (табуляцією), яку можна робити клавішею Tab або пробілами. Для браузера ці відступи не мають значення, але дуже допомогають при роботі з документом, адже ми бачимо рівень вкладеності тегів.
Збережіть файл та відкрийте його через браузер для прегляду.
Результатом буде ось така сторінка.
Продовжимо знайомство з тегами.
Далі розглянемо, як з допомогою тегів установити заголовки та абзаци документа. В мові HTML виділяють усього 6 рівнів заголовків, що позначаються відповідно тегами від <h1>...</h1> до <h6>...</h6>
У браузері заголовок першого рівня буде відображено найбільшим, а заголовок шостого рівня — найменшим.
На рисунку показано відображення заголовків у вікні браузера
та відповідний html-код.
Завдання 2
Вдоскональте сторінку, додавши заголовки <H1> та <H2> а також кілька параграфів тексту до кожного заголовка.
Працюємо самостійно:
1) Додайте ще 2 свята за зразком.
2) Виділіть слова «Новий Рік» в параграфі жирним накресленням, додавши тег <b>…</b> або <strong>…</strong> наступним чином
3) Виділіть дату народження курсивом, додавши тег <i>…</i> або <em>…</em> наступним чином
4) Збережіть файл та перегляньте його у браузері. Надішліть файл на пошту voronenko@54.edu.ks.ua
ДОМАШНЄ ЗАВДАННЯ
Опрацювати матеріал сторінки.
Виконати практичне завдання й надіслати вчителю на електронну пошту: voronenko@54.edu.ks.ua
Пройти тестування https://docs.google.com/forms/d/e/1FAIpQLSf3CGlY196mY6KygAK-dJ1sDFwe5Ti1eWqjhMwANTQlBUhNdA/viewform?usp=sf_link