Модуль 1

Тег (tag) — елемент мови розмітки гіпертексту. Це найменші будівельні блоки, з яких складається будь-яка веб-сторінка. Кожен тег позначає якусь сутність: заголовок, список, абзац тексту, зображення. Для виділення тегів серед тексту документа використовуються кутові дужки, в яких вказується ім'я тегу і його атрибути. <ім'я_тегу>...</ім'я_тегу> Відкриваючий тег вказує, де починається елемент, закриваючий - де закінчується. Закриваючий тег утворюється за допомогою додавання слеша (/) перед іменем тегу. Між відкриваючим і закриваючим тегами знаходиться вміст тегу - контент. Приклади тегів. <section>Секція</section> <p>Абзац</p> <a>Посилання</a> <button>Кнопка</button> Коментарі​ Коментарі використовуються для того, щоб залишити у вихідному коді пояснення, замітку, тимчасово закоментувати ділянку коду тощо. <!-- Це коментар, його вміст не відобразиться на сторінці --> <p>Це абзац тексту, він буде на сторінці.</p> <!-- Коментар може бути багаторядковим. Це зручно для об'ємніших описів. --> Атрибути​ Атрибути - це додаткові налаштування тегів, за допомогою яких можна змінювати властивості і поведінку елемента. У кожного тегу є обов'язкові і необов'язкові атрибути, їх може бути декілька або зовсім не бути. Атрибути записуються всередині відкриваючого тегу, а їх значення розташовуються всередині подвійних лапок. Декілька атрибутів розділяються пробілом. <a href="https://google.com" class="link">...</a> <img src="cat.jpg" alt="cute cat" /> <input type="text" name="user_name" /> <button type="submit">...</button> <p class="text">...</p> Розглянемо деякі атрибути тегу <a>. <a href="http://google.com" target="_blank" title="Пошукова система Google"> Google.com </a> href - адреса сторінки, на яку перейде користувач після натискання на текст посилання. target - вказує на те, в якій вкладці відкривається сторінка після кліку на посилання title - додає спливаючу підказку до тексту посилання. Розглянемо деякі атрибути тегу <img>. <img src="https://picsum.photos/640/480" alt="Довільна картинка від генератора" /> src - адреса зображення. alt - альтернативний текст, який буде показаний, якщо зображення не завантажилося. Корисно Для того щоб дізнатися доступні атрибути тегу та їх призначення, можна зайти в документацію або довідник, наприклад htmlreference.io. Парні теги​ Складаються з відкриваючих і закриваючих тегів, які обгортають контент, дозволяючи змінювати його властивості або відображення, групувати за змістом. Всередині парних тегів можуть бути вкладені інші теги, як мотрійка. <!-- Стаття із заголовком і абзацом --> <article> <h1>Коротко про парні теги</h1> <p> Більшість тегів парні. Їх контент вкладений між відкриваючим і закриваючим тегом. </p> </article> Одинарні теги​ Складаються тільки з відкриваючого тегу, не містять текстового контенту і отримують контент або поведінку з атрибутів. Слугують для зміни властивостей документа, підключення файлів тощо. <!-- Метаінформація про кодування --> <meta charset="utf-8" /> <!-- Поле введення --> <input type="text" /> <!-- Зображення --> <img src="cat.jpg" alt="cool cat" /> Цікаво У попередніх стандартах HTML поодинокі теги обов'язково записувалися зі зворотним символом / перед закриваючою дужкою. Наприклад <img /> або <input />. В сучасному стандарті - це необов'язково і ні на що не впливає. Вкладеність тегів​ Дотримуючись деяких правил, теги можна вкладати один в одного. У разі вкладеності, потрібно дотримуватися порядку їх закриття за принципом мотрійки. <тег1> <тег2> <тег4>...</тег4> <тег5>...</тег5> </тег2> <тег3> <тег6>...</тег6> </тег3> </тег1> Ось валідна розмітка абзацу з посиланням і виділеним текстом, а також списку переваг з описом. <p> <a href="squoosh.app">Squoosh</a> - сервіс <em>оптимизації</em> зображень. </p> <p>Переваги</p> <ul> <li>Працює в браузері</li> <li>Не навантажує систему</li> <li>Зручний інтерфейс</li> </ul> А в цій версії є проблеми (рядки підсвічені). <!-- Не дотримується порядок закриття тегів --> <p><a href="squoosh.app">Squoosh</a> - сервіс <em></a>оптимизації</p> зображень.</em> <!-- Не дотримуються специфічні правила вкладення тегів --> <ul> <p>Переваги</p> <li>Працює в браузері</li> <li>Не навантажує систему</li> <li>Зручний інтерфейс</li> </ul> Специфікація HTML​ Специфікація HTML Living Standard - головний документ, який описує стандарти, можливості і майбутній розвиток мови HTML. Для вивчення верстки, насамперед важливі розділи, які описують, які є типи елементів, що позначає кожен з них , і розуміння того, як їх можна вкладати один в одного. Корисно HTML-елемент - це термін, що описує якусь семантичну сутність в стандарті HTML. Наприклад абзац, заголовок, список або посилання. В HTML-документі елемент представлений тегом (парним або одинарним) - синтаксичною конструкцією мови HTML. Вкладеність тегів​ Алгоритм визначення можливості вкладення тегу досить простий. Йдемо в специфікацію і знаходимо потрібний елемент. Перевіряємо контентну модель елемента (Content model), в який вкладаємо. Перевіряємо категорії елемента (Categories), який вкладаємо. Якщо категорія підходить і обмеження не забороняють - вкладати можна, інакше - не можна. Вже через пару днів використання HTML ви звикнете правильно вкладати елементи один в одного, оскільки правила вкладеності стануть інтуїтивно зрозумілі після знайомства з основними тегами. Довідники​ Крім специфікації під рукою корисно мати довідники і шпаргалки. Знати все напам'ять не потрібно, специфічніші речі або ті, що рідко використовуються, завжди можна підглянути. Довідник HTML-тегів Довідник CSS-властивостей

HTML-документ складається з «дерева» тегів. Далі наведений мінімально необхідний набір тегів, який слугує основою будь-якого HTML-документа, як фундамент для будинку. <!DOCTYPE html> <html lang="uk"> <head> <!-- Службова інформація --> </head> <body> <!-- Зміст --> </body> </html> Оголошення типу документа​ <!DOCTYPE > - це не тег, а обов'язкова інструкція оголошення типу документа. Вона потрібна для того, щоб повідомити браузеру, в якій версії HTML написаний документ. На підставі доктайпу браузер визначає версію HTML і правильно відображає сторінку. Оголошення типу документа повинно бути найпершим, що бачить браузер під час обробки HTML-документа. <!-- Вказує на те, що документ написаний за специфікацією HTML Living Standard --> <!DOCTYPE html> Цікаво Раніше в HTML були версії, остання - це HTML5. Зараз HTML Living Standard - це єдина специфікація мови HTML, в якій відмовилися від версій, вона просто оновлюється. Якщо говорять про HTML5, то це те саме, що «сучасний HTML» або HTML Living Standard, тільки коротше. Елементи верхнього рівня​ Призначені для формування основної структури веб-сторінки і визначають розділи заголовка і тіла документа. Тег <html>​ Кореневий елемент документа як контейнер, який містить в собі увесь вміст сторінки. Все, що знаходиться за його межами, не сприймається браузером як HTML-код і не обробляється. <!DOCTYPE html> <html lang="ru"></html> Атрибут lang вказує, якою мовою написаний текст сторінки. Це необхідно для допоміжних технологій, таких як скрінрідери тощо. Тег <head>​ Призначений для зберігання службової інформації про сторінку: заголовок, опис, кодування тощо. Вся ця інформація не відображається у вікні браузера, однак, містить дані, які вказують браузеру, яким чином потрібно обробляти сторінку. <!DOCTYPE html> <html lang="uk"> <head> <!-- Службова інформація --> </head> </html> Тег <body>​ Містить вміст майбутньої веб-сторінки. Контент, який повинен відображатися на сторінці, варто розташовувати саме всередині цього тегу. <!DOCTYPE html> <html lang="uk"> <head> <!-- Службова інформація --> </head> <body> <!-- Зміст --> </body> </html> Теги заголовка документа​ Група службових тегів, які розташовуються в шапці документа. Більшість з них безпосередньо не відображаються у вікні браузера. Заголовок сторінки​ Текст, розміщений всередині тегу <title>, відображається у вкладці браузера. Довжина заголовка повинна бути не більше 60 символів, щоб повністю поміститися у заголовку. Текст заголовка повинен містити короткий опис вмісту веб-сторінки. <!DOCTYPE html> <html lang="uk"> <head> <title>HTML5 це просто!</title> </head> <body> <!-- Зміст --> </body> </html> Метадані​ Тег <meta> використовується для зберігання інформації, призначеної для браузера і пошукових систем: встановлення кодування документа, передача інформації пошуковим системам і багато іншого. Мета-тегів може бути кілька, тому що, залежно від використаних атрибутів, вони несуть різну інформацію. Кодування сторінки необхідно вказати для того, щоб браузер коректно відобразив текст. Якщо цього не зробити, або задати невірне кодування, замість символів браузер може відобразити ієрогліфи. <!DOCTYPE html> <html lang="uk"> <head> <!-- utf-8 - найпоширеніше кодування --> <meta charset="utf-8" /> <title>HTML5 це просто!</title> </head> <body> <!-- Зміст --> </body> </html> Короткий опис змісту допомагає пошуковим системам краще проіндексувати сторінку. <!DOCTYPE html> <html lang="uk"> <head> <meta charset="utf-8" /> <meta name="description" content="Вивчення основ HTML5 для новачків" /> <title>HTML5 - це просто!</title> </head> <body> <!-- Зміст --> </body> </html> Мета-теги, які розуміє Google Потік документа​ Потік - це вертикальний і горизонтальний порядок відображення елементів на сторінці. Вертикально потік йде зверху вниз, і, за замовчуванням, елементи відображаються на сторінці в тому порядку, в якому вони вказані в HTML-документі. Горизонтально потік йде зліва направо (або справа наліво для східних країн). Всі без винятку елементи - це прямокутні області, які займають певне місце у так званих «рядках», як слова в реченні на аркуші в лінійку. Існує два основних типи елементів - блокові і рядкові. <!-- Абзац - це блоковий елемент --> <p>Блоковий елемент 1</p> <p>Блоковий елемент 2</p> <p>Блоковий елемент 3</p> <!-- Посилання - це рядковий елемент --> <a href="">Рядковий елемент 1</a> <a href="">Рядковий елемент 2</a> <a href="">Рядковий елемент 3</a> Блоковий елемент (block-level element) - займає повністю увесь рядок, незалежно від обсягу його контенту, тому кілька блокових елементів візуально йдуть один за одним зверху вниз. Рядковий елемент (inline element) - займає місце по своєму вмісту, тому кілька малих елементів можуть розташовуватися на одному рядку. Якщо в рядку не вистачає місця для вміщення рядкового елемента, він переноситься на новий рядок. Увага З потоком документа, блоковими, рядковими, блочно-рядковими, а також флекс-елементами ми детально познайомимося на наступних уроках.

Розмітка майбутньої веб-сторінки повинна мати смислове значення, як сторінка газети або журналу. На сторінці є секції, заголовки, списки, зображення, абзаци тексту тощо. Для опису всього цього багатства типів контенту існують відповідні теги. Тобто семантика спочатку є частиною HTML, але вона марна, якщо реалізована неправильно. Семантична розмітка - підхід до створення HTML-розмітки ґрунтується на використанні тегів за їх призначенням відповідно до специфікації і, які відповідають типу контенту, що розмічується. Здебільшого семантична розмітка - це просто використання здорового глузду. Під час розмітки абзацу тексту ми використовуємо тег <p>, для розмітки посилання існує тег <a>, контентне зображення представлено тегом <img> тощо. Тобто семантична розмітка означає, що теги не вибираються на підставі того, як вони відображаються в браузері - вони вибираються на підставі типу та структури контенту, який розмічується.

Абзац​ Тег <p> - універсальний контейнер для групування дрібних фразових елементів, відокремлення їх один від одного, і подальшої стилізації. За замовчуванням абзац - це блоковий елемент, тобто він починається з нового рядка і має вертикальні відступи, які можна буде змінити в CSS. <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque eligendi, a eaque, esse itaque porro non exercitationem odio earum quos perferendis! </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, totam velit asperiores non temporibus ut nisi minima? </p> Часто необхідно заповнити тег текстом-"рибою", якщо самого тексту, який буде розміщуватися на сайті, ще немає. Для цього використовують спеціальний заповнювач (текст-"риба"). Корисно В редакторі VSCode, в HTML-документі можна набрати код lorem10, після чого натиснути клавішу Tab. Це створить масив тексту з 10 слів. Замість 10 можна поставити будь-яке число. Заголовки​ Група тегів <h1>...<h6> - визначає текстові заголовки смислових розділів різного рівня, які вказують на важливість секції контенту, розташованого після них. Це інструмент структурування текстового контенту. https://codepen.io/goit-academy/embed/mdVZepj?height=265&theme-id=default&default-tab=result Тег <h1> найчастіше використовується тільки один раз, як основний заголовок сторінки. Решта заголовків можуть використовуватися скільки завгодно разів, але їх завжди слід застосовувати правильно, дотримуючись ієрархії. Корисно Пошукові системи звертають особливу увагу на заголовки, тому коректне використання цієї групи тегів вкрай важливе. Не визначайте рівень заголовка за розміром тексту на макеті. Не весь великий текст - заголовки. Заголовок - це те, що за змістом озаглавлює секцію контенту. Списки​ Списки дозволяють упорядкувати колекції і представити їх в наочному і зручному для користувача вигляді. Список - це контейнер, дітьми якого можуть бути тільки елементи списку - теги <li>. Тег <ol> - створює нумерований (упорядкований) список, тобто кожен елемент списку пронумерований. Браузер автоматично нумерує елементи по порядку і, якщо видалити один або кілька елементів такого списку, інші номери будуть автоматично перераховані. Нумерацією елементів можна управляти за допомогою спеціальних атрибутів списку. Використовується для перерахування дій в певному порядку, наприклад рецепт. <h1>Як заварити чай</h1> <p>Покрокова інструкція для чайників, просто повтори і у тебе все вийде!</p> <ol> <li>Закип'ятити воду</li> <li>Засипати чай в чашку</li> <li>Налити в чашку окріп</li> <li>Чекати 10 хвилин, після чого можна пити</li> </ol> Тег <ul> - створює маркований (невпорядкований) список, кожен елемент якого починається з невеликого символу (маркера). За допомогою CSS маркер можна прибрати або замінити. Використовується для перелічення набору у довільному порядку, наприклад список курортів. <h1>Найгарячіші курорти</h1> <p>Цього року експерти рекомендують відвідати наступні локації.</p> <ul> <li>Туніс</li> <li>Туреччина</li> <li>Греція</li> <li>Єгипет</li> </ul> Увага За специфікацією в теги <ul> і <ol> можна вкладати тільки елементи списку - теги <li>. Водночас, всередині тегів <li> можуть бути вкладені інші довільні теги. Вкладені списки​ Зробити багаторівневий список просто - вкладаємо в елемент списку ще один список. Це часто застосовується для створення багаторівневих меню. <ul> <li> Комп'ютери та комплектуючі <ul> <li>Процесори</li> <li>Монітори</li> <li>Відеокарти</li> </ul> </li> <li> Побутова техніка <ul> <li>Холодильники</li> <li>Телевізори</li> <li>Пральні машини</li> </ul> </li> <li> Товари для дому <ul> <li>Крісла</li> <li>Матраци</li> <li>Електрокаміни</li> </ul> </li> </ul> Посилання​ Тег <a> - призначений для створення посилань, тексту, клікаючи на який, переходимо на іншу сторінку, завантажуємо файл тощо. Текст посилання відображається в браузері з підкресленням, колір шрифту синій, при наведенні на посилання, курсор миші змінює вигляд. Адреса посилання задається в обов'язковому атрибуті href="адреса". Адреса - це URL,яка може вказувати на сторінку, файл, будь-який ресурс. <a href="https://google.com">Посилання на головну сторінку Google</a> Атрибути target і rel​ За замовчуванням посилання відкривається в поточній вкладці браузера. Атрибут target="значення" визначає те, в який вкладці повинен відкриватися документ, на який веде посилання. Якщо значення - _blank, сторінка відкривається у новій вкладці браузера. Атрибут rel доповнює атрибут href інформацією про відношення між поточним і пов'язаним документом, і використовується в парі з target="_blank". <!-- Посилання на зовнішній ресурс, відкриється в поточній вкладці --> <a href="https://www.facebook.com/">Facebook</a> <!-- Посилання на зовнішній ресурс, відкриється у новій вкладці --> <a href="https://www.facebook.com/" target="_blank" rel="noreferrer noopener"> Facebook </a> Атрибут download​ Якщо в href посиланні зазначений шлях до файлу, браузер спробує його відкрити у поточному вікні, якщо вміє обробляти файли цього типу. Зазвичай так відбувається з зображеннями і PDF-файлами. Атрибут download="ім'я файлу" повідомляє браузеру, що зазначений ресурс не повинен відкриватися, а завантажуватися в момент, коли користувач клікне на посилання. Значення атрибута задає ім'я файлу, що завантажується, тобто можна змінити ім'я під час завантаження. Атрибут можна використовувати без вказівки значення, тоді буде використано ім'я оригінального файлу. <!-- Посилання на завантаження файлу --> <a href="/путь/к/cv.pdf" download>Завантажити резюме</a> Спеціальні значення href​ Посилання мають можливість не тільки переходити на інші сторінки і завантажувати файли, але й здійснювати дзвінки на телефони, відправляти повідомлення або телефонувати по скайпу. <!-- Посилання на телефонний номер --> <a href="tel:+14251234563">+1 (425) 123-45-63</a> <!-- Посилання на адресу електронної пошти --> <a href="mailto:example@mail.ua">example@mail.ua</a> Посилання-якір​ Посилання з якорем використовується для створення навігації по поточній сторінці. Наприклад, для швидкого переходу до якоїсь секції (як у цих матеріалах). Під час кліку на таке посиланню, браузер проскролить сторінку до якоря без її перезавантаження. Для створення якоря необхідно додати тег, до якого ми хочемо проскролити сторінку, атрибут id - унікальний ідентифікатор. А атрибуту href у посилання задати значення, що починається з символу #, після якого вказаний ідентифікатор елемента. https://codepen.io/goit-academy/embed/WNrqQzV?height=265&theme-id=default&default-tab=result Кнопка​ Інтерактивний елемент, який оживляється за допомогою JavaScript. Наприклад, кнопка відкриття і закриття спливаючого вікна, перемикання мобільного меню або відправлення форми. Необхідно явно вказувати атрибут type. Його значення за замовчуванням - submit, але, найчастіше потрібне значення button. Так, кнопка типу «кнопка» - така особливість. <button type="button">Відкрити модальне вікно</button> Корисно Важливо не плутати посилання і кнопку. Якщо по кліку на елемент інтерфейсу відбувається перехід за якоюсь адресою, тобто присутній href, то це посилання. Якщо ж по кліку відбувається щось без перезавантаження або перенаправлення сторінки - це гарантовано кнопка. Атрибут lang​ Якщо сторінка містить текст різними мовами, для того щоб зробити її доступнішою для допоміжних технологій, можна задавати атрибут lang не тільки всьому документу, а й окремим тегами. <!DOCTYPE html> <html lang="uk"> <head> <meta charset="utf-8" /> <meta name="description" content="Інструкція по експлуатації пиріжків" /> <title>Пиріжки - це смачно!</title> </head> <body> <p>Інструкція з експлуатації</p> <p lang="en">Operating instructions</p> <p lang="fr">Manuel d'utilisation</p> </body> </html> Увага Це можливість, рекомендація, а не обов'язкова вимога. Верстка з урахуванням підтримки асистивних технологій виконується тільки на вимогу замовника.

Використання графіки робить веб-сторінки візуально привабливішими. Зображення допомагають краще передати суть і зміст документа. Тег <img> призначений для розмітки зображень у різних графічних форматах. <img src="https://images.pexels.com/photos/67112/pexels-photo-67112.jpeg" alt="Macbook Air на сірому дерев'яному столі" width="400" /> src="шлях" - обов'язковий атрибут, вказує адресу зображення. Шлях до зображення може бути абсолютним, або відносним. alt="опис" - обов'язковий атрибут, альтернативний опис. width="значення" і height="значення" - задають розміри зображення в пікселях. Без зазначення розмірів зображення відображається на сторінці в оригінальному розмірі. Якщо задати тільки одну величину, браузер автоматично вирахує іншу для збереження пропорцій. Атрибут alt​ Необхідний для надання важливої інформації для користувачів, які не можуть бачити зображення (з вадами зору), або якщо зображення не завантажилось. Альтернативний текст повинен бути у кожному тезі <img>. В описі повинна бути закінчене, повністю сформоване речення. Альтернативний текст повинен відповідати на питання «Що зображено на малюнку?». Опис повинен бути унікальним і не повторювати те, що вже присутнє в тексті до цього зображення. В описі не потрібно використовувати слова «зображення», «малюнок» або «ілюстрація», це само собою зрозуміло. Якщо в тексті сторінки описується історія цих кошенят, наступного опису буде достатньо. <img src="kittens.jpg" alt="Кошенята" /> У разі, якщо у нас просто галерея зображень, без будь-якого текстового опису, необхідно уточнити, що саме зображено на малюнку. <img src="kittens.jpg" alt="Три кошеня грають на соломі. Два сірих і один чорний." /> Зображення-посилання​ Посилання не обов'язково повинне бути з текстовим контентом. Дуже часто, особливо в інтернет-магазинах, клік на зображення товару зі списку товарів, перенаправляє користувача на сторінку цього товару. Для створення зображення-посилання обгортаємо тег <img> посиланням. <a href="https://www.pexels.com/photo/animals-sweet-cat-kitty-57416/"> <img src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?w=640" alt="Рудий кіт" width="640" /> </a> Зображення з підписом​ Таке завдання часто зустрічається в статтях, де багато зображень з поясненням під або над зображенням, наприклад ілюстрації, графіки або діаграми. Якщо необхідно розмітити зображення з підписом, можна використовувати теги <img> та абзац <p>. Але, саме для таких завдань існують семантичні теги <figure> і <figcaption>. Всередину <figure> поміщаємо розмітку зображення та опис. Тег <figcaption> обов'язково повинен бути першою або останньою дитиною <figure>. <figure> <!-- Довільний графічний контент: фотографія, графік, діаграма тощо --> <img src="адреса зображення" alt="альтернативний текст" /> <figcaption>Текст пояснення, який буде під зображенням</figcaption> </figure> Абсолютні і відносні шляхи​ Веб-сайти містять безліч файлів, які розміщують в окремі папки, щоб ними було легше керувати. Для того щоб створити зв'язок між різними файлами, наприклад в HTML-документі підключити зображення або файл стилів, використовуються абсолютні або відносні шляхи, що описують розташування файлу, який підключається. Абсолютний шлях​ Вказує точне місце розташування файлу в структурі папок на сервері. Абсолютний шлях дозволяє отримати доступ до файлу зі сторонніх ресурсів. https://images.pexels.com/photos/583842/pexels-photo-583842.jpeg Абсолютні адреси складаються мінімум з трьох частин: протокол, ім'я сервера і шлях до файлу. https:// - протокол. images.pexels.com - ім'я сервера. /photos/583842/pexels-photo-583842.jpeg — шлях до файлу зображення, де «photos» і «583842» - імена папок. Папка «583842» вкладена в «photos». Цікаво Наприклад, по кліку на посилання з такою адресою, в браузері відкриється вкладка із зображенням, яке лежить десь на сервері в інтернеті. Відносний шлях​ Описує шлях до ресурсу щодо поточного файлу. Використовується для складання шляхів до зображень, файлів стилів або створення навігації на інші сторінки сайту, який ви створюєте. Візьмемо стандартну структуру файлів і папок проекту. Для того щоб в index.html достукатися до зображення логотипу з папки images, в атрибуті src потрібно вказати відносний шлях, тобто щодо HTML-документа. <a href=""> <img src="images/logo.png" alt="Логотип сайту" /> </a> Символ / означає перехід на один рівень нижче. Такий шлях браузер буквально розуміє як: «В папці images, на одному рівні з поточним файлом index.html, взяти файл logo.png». У майбутньому необхідно буде підключати зображення у файлі стилів. Для того щоб у файлі styles.css достукатися до зображення логотипу з папки images, необхідно вказати відносний шлях (щодо файлу стилів). background-image: url('../images/logo.png'); Послідовність символів ../ означає перехід на одну папку (рівень) вище. Такий шлях браузер буквально розуміє як: «Перейти на одну папку вище (назад), зайти в папку images і взяти в ній файл logo.png». Графічні формати​ Векторна графіка буде відображатися однаково добре на звичайних екранах і на екранах з високою піксельною щільністю. Растрова графіка, особливо стиснута з втратою якості, буде виглядати розмито. Растрова графіка​ Растрова графіка (raster, bitmap) - опис графічного файлу у вигляді масиву з координатами кожного пікселя і описом кольору цього пікселя. На кшталт мапи кольорів з фіксованим розміром. Найпопулярніші растрові формати зображень: JPEG - великі файли, що не потребують прозорого фону або анімації. Цей формат ідеальний для барвистих фотореалістичних фотографій, оскільки вони можуть містити мільйони кольорів. PNG - на відміну від JPEG, має додатковий параметр для опису прозорості (альфа канал). Підходить для зображень, фон яких повинен бути прозорий або одноколірний. Використовується для іконок і декоративних елементів. Також використовується для зображень підвищеної точності - скріншотів, креслень, графіків тощо. webP - формат, що замінює PNG і JPEG, але ще з неповною підтримкою в браузерах. За однакової якості зображення, стиснуті файли будуть меншими, ніж PNG і JPEG, в середньому на 25%. Корисно Відрізнити растрове зображення досить просто, достатньо збільшити його масштаб. У певний момент, зображення почне розмиватися і з'являться квадрати (пікселізація). Векторна графіка​ Векторна графіка (SVG, Scalable Vector Graphics) - описується у вигляді правил або рівнянь, що визначають лінії, а також додаткові властивості, колір ліній і фон для фігур. Векторна графіка ідеально підходить для простих масштабованих зображень, займаючи дуже мало місця. Проте, зі зростанням складності зображення, розмір файлу робить використання формату SVG невигідним. Векторна графіка замінює PNG і використовується для іконок, логотипів, графіків, абстрактної графіки і декоративних елементів. Увага З векторною графікою будемо детально знайомитися в окремому уроці. Оптимізація зображень​ Зображення складають близько 90% загальної ваги ресурсів веб-сайту, тому їх необхідно оптимізувати в першу чергу. В майбутньому оптимізацією ресурсів проекту будуть займатися спеціальні інструменти, які зроблять це автоматично. Але вже зараз потрібно думати про оптимізацію ваги сторінки і використовувати спеціальні онлайн-сервіси для стиснення зображень. Squoosh для оптимізації растрової графіки SVGOMG для оптимізації векторної графіки Потрібно пам'ятати, що оптимізація JPEG-файлу призводить до втрати якості зображення. Тому, зменшуючи вагу зображення, погіршиться його зовнішній вигляд. Оптимізація JPEG зводиться до пошуку балансу між якістю і вагою зображення. Увага Оптимізація зображення здійснюється один раз. Зображення, експортоване з макету, оптимізується і тільки після цього додається в проект. ::: Прогресивний JPEG​ Прогресивні JPEG-зображення - це файли зображень у форматі JPEG, які були закодовані таким чином, що під час відображення вони завантажуються шарами. Прогресивний JPEG виглядає точно так само, як і звичайні JPEG-зображення. Різниця у тому, як вони відображаються під час завантаження. Звичайні JPEG-файли завантажуються і відображаються смугами (порядково), зверху вниз. Для користувача це створює ефект поганої швидкості завантаження сторінки. Це особливо помітно у великих зображеннях або на мобільних пристроях з поганою швидкістю підключення до мережі. Прогресивний JPEG завантажується таким чином, що відразу показується все зображення, але у поганій якості, і в процесі його завантаження якість поступово покращується до максимальної. З точки зору користувача, прогресивний JPEG забезпечує приємніший досвід відвідування сторінки. Користувач відразу отримує повне уявлення про вміст сторінки. Створення​ Для того щоб зробити прогресивне JPEG-зображення, достатньо скористатися спеціальними інструментами, зокрема онлайн. Наприклад, у разі оптимізації JPEG-зображень в Squoosh, вони за замовчуванням (автоматично) перетворюються у прогресивні. Вага файлу прогресивного JPEG-зображення зазвичай трохи менша його базового JPEG-аналога.

Існує цілий набір семантичних тегів для розмітки великих логічних розділів і поліпшення структурної семантики сторінки. Кожен з них може бути використаний за певних умов. Це впливає на роботу асистивних технологій, індексування сторінки та її рейтинг видачі у пошуку. Потоковий вміст​ Тег <header>​ Шапка (хедер) виділяє вступну частину всієї сторінки, складної секції або статті. Як правило, містить логотип, навігацію, вступний текст, складний заголовок. Може бути кілька на сторінці. <body> <!-- Шапка сторінки --> <header> <a href="/">Логотип сайту</a> <ul> Меню навігації по інших сторінках </ul> </header> </body> Посилання на специфікацію Тег <footer>​ Підвал (футер) - це фінальна частина всієї сторінки, її розділу або статті. Часто містить копірайт, список посилань на соціальні мережі, контактну інформацію і таке інше. Може бути кілька на сторінці. <body> <!-- Шапка сторінки --> <header> <a href="/">Логотип сайту</a> <ul> Меню навігації по інших сторінках </ul> </header> <!-- Підвал сторінки --> <footer> <!-- Копірайт --> <p>Всі права захищені &copy;lpj.dev</p> <!-- Посилання на соцмережі --> <ul> <li><a href="">Facebook</a></li> <li><a href="">Twitter</a></li> <li><a href="">Instagram</a></li> </ul> </footer> </body> Посилання на специфікацію Тег <main>​ Основний (унікальний) вміст, що не повторюється на інших сторінках сайту. Може бути тільки один на сторінці. <body> <!-- Шапка сторінки --> <header></header> <!-- Унікальний контент сторінки --> <main></main> <!-- Підвал сторінки --> <footer></footer> </body> Посилання на специфікацію Смислові розділи​ Тег <nav>​ Визначає розділ основної навігації з посиланнями на секції поточної або інших сторінок. Використовується тільки для основної навігації, а не для будь-якої групи посилань в документі. <body> <!-- Шапка сторінки --> <header> <a href="/">Логотип сайту</a> <nav> <!-- Навігація на інші сторінки --> <ul> <li><a href="/portfolio">Portfolio</a></li> <li><a href="/contact">Contact</a></li> <li><a href="/about">About</a></li> </ul> </nav> </header> <!-- Унікальний контент сторінки --> <main></main> <!-- Підвал сторінки --> <footer> <!-- ⚠️ Посилання на соцмережі, не nav --> <ul> <li><a href="">Facebook</a></li> <li><a href="">Twitter</a></li> <li><a href="">Instagram</a></li> </ul> </footer> </body> Посилання на специфікацію Тег <article>​ Незалежна, відокремлювана, і така, що має самостійне значення, частина документа. Наприклад пост на форумі, твіт, стаття в блозі, віджет з рекламою, інстраграм історія, картка товару в магазині. <article> <h1>Солодкий пиріжок</h1> <img src="посилання на зображення пиріжка" alt="пиріжок" /> <p> Дуже смачний печений пиріжок з різними наповнювачами: вишнею, персиком сливою або полуницею. </p> <p>Ціна: 50 кредитів</p> </article> Корисно Якщо розділу документа можна дати назву, винести його за межі сайту і він буде мати смислове значення - це <article>. Обов'язковий заголовок. Посилання на специфікацію Тег section​ Великий розділ, що об'єднує вміст за смисловим значенням. Не відокремлюється від основного документа. Наприклад секція списку товарів, блок особистої інформації в профілі користувача, розділ контактної інформації. <section> <h1>Найпопулярніші пиріжки цього тижня</h1> <!-- Всередині кожного <li> може бути картка пиріжка з секції «Тег <article>» --> <ul> <li>Смажений з грибами</li> <li>Смажений з м'ясом</li> <li>Печений з яблуками</li> <li>Печений з сиром</li> </ul> </section> Корисно Якщо розділу документа можна дати назву, але за межами сайту він не матиме смислового значення - це <section>. Бажаний заголовок. Посилання на специфікацію Тег <div>​ Універсальний контейнер без семантичного значення. Використовується як блок-обгортка для подальшої стилізації контенту. Корисно Якщо не виходить дати групі контенту смислову назву (не "права колонка", а така, що має сенс) - це <div> і, швидше за все, вам просто потрібен загальний контейнер для оформлення. Посилання на специфікацію Алгоритм вибору тегу​ Не тільки новачкам буває важко вирішити, який тег використовувати для розмітки блоку контенту, ґрунтуючись на його семантичному значенні. Скористайтесь цим алгоритмом для визначення відповідного тегу. Розмітка сторінки​ Використовуючи всі розглянуті теги, створимо розмітку простої сторінки починаючої веб-студії. https://codepen.io/goit-academy/embed/ExPmoKE?height=265&theme-id=default&default-tab=html,result У прикладі не вистачає розмітки скелета документа, тому що його автоматично додає інтерактивний майданчик codepen.io. Для повноти картини запишемо базову розмітку документа. <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <title>Веб студія mango.dev</title> </head> <body> <!-- Вся розмітка з живого прикладу --> </body> </html>

У коді важлива кожна кома, лапки і дужка, ім'я атрибута і тегу, відкриваючий і закриваючий тег. Очима, особливо новачкам, за усім цим не встежити, тому придумали валідатор. Валідація потрібна для виявлення помилок у синтаксисі розмітки HTML-документа і розбіжностей з HTML-специфікацією, вказаною в <!DOCTYPE >. Програма для такої перевірки називається валідатором. В результаті валідації, документ або проходить валідацію, або отримує список рекомендованих виправлень. Увага Валідатори перевіряють тільки HTML-синтаксис і відповідність специфікації, а не семантику. Є спеціальний онлайн сервіс (валідатор), який перевіряє код HTML-документа щодо відповідності стандарту. Для перевірки необхідно всього два кроки, перший - передати валідатору вихідний код, другий - натиснути на кнопку перевірки. Передати код для валідації можна, завантаживши HTML-файл, передати посилання на живу веб-сторінку, або скопіювати і вставити увесь код. Корисно Якщо передати валідатору просто окремі HTML-теги, то він видасть помилку, тому що у кожної сторінки повинен бути базовий скелет документа. Валідатор перевіряє наступні пункти: Правильне написання тегів. Актуальність тегів і можливість їх застосування у поточній версії HTML. Правильність закриття і вкладеності тегів. Правильність використання атрибутів. <section> <!-- Не дотримується порядок закриття тегів. --> <p><a href="squoosh.app">Squoosh - сервіс <em></a>оптимізації</p> зображень.</em> <!-- Не дотримуються специфічні правила вкладення тегів. --> <ul> <p>Переваги</p> <li>Працює в браузері</li> <li>Не завантажує систему</li> <li>Зручний інтерфейс</li> </ul> </section> Якщо перевірити цей код у валідаторі (не забувши додати скелет документа), отримаємо звіт - список помилок і попереджень. У кожному елементі списку вказано значення, атрибут і елемент, які не пройшли валідацію, опис проблеми, а також наведена цитату коду з помилкою і номер рядка. Помилки позначаються як Error та їх потрібно обов'язково виправляти у тому порядку, в якому вони вказані. Попередження позначаються як Warning, виправляти їх не обов'язково, але це причина задуматися і переглянути якість розмітки. Виправимо всі помилки валідації в прикладі. <section> <p> <a href="squoosh.app">Squoosh</a> - сервіс <em>оптимізації</em> зображень. </p> <p>Переваги</p> <ul> <li>Працює в браузері</li> <li>Не завантажує систему</li> <li>Зручний інтерфейс</li> </ul> </section>

Для ефективної розробки потрібні інструменти, зокрема і для написання HTML-коду. Тому необхідно навчитися працювати з інструментами розробника. Вони присутні у всіх сучасних браузерах і не вимагають додаткового встановлення. Інструменти розробника - вбудований функціонал браузера, який дозволяє отримувати інформацію про вихідний код сторінки, стилі, мережеві запити і багато іншого. Інструменти розробника можна викликати наступними методами: Натиснувши клавішу F12 Комбінацією клавіш Ctrl+Shift+I для Windows Комбінацією клавіш Cmd+Opt+I для MacOS На веб-сторінці натиснути правою кнопкою миші і вибрати пункт меню «Переглянути код» До того ж, наводячи курсор миші на певний елемент, він буде підсвічуватися у вікні браузера (viewport). Крім інспектування елементів, інструменти розробника дозволяють здійснити зміни в HTML і CSS-коді. Такі зміни відразу будуть відображені на веб-сторінці, але у вихідному коді зберігатися не будуть. Ця функція зручна для експериментів з розміткою і стилями. Огляд всіх можливостей DevTools

В процесі роботи над створенням веб-сайтів завжди необхідно повертатися до вже написаного коду для внесення змін. В переважній більшості проектів більше одного розробника. Якщо код не оформлений відповідно до стандартів - він втрачає читабельність і, як наслідок - швидкість розробки падає. Корисно Використовуйте це керівництво від @mdo для написання коду в процесі вивчення технологій.