Вступ до HTML

HTML є відносно простою мовою. Вона складається з елементів, які можуть застосовуватися до різних частин тексту і надавати їм певного значення в документі (наприклад, цей текст є параграфом, цей — ненумерованим списком, цей — частиною таблиці), розбивати документ на логічні частини (це заголовок, це три колонки контенту, це меню навігації), а також вставляти контент, такий як відео чи зображення, у документ. У цьому розділі ми поговоримо про перші два з цих завдань, а також розглянемо базові поняття і синтаксис, які потрібні для розуміння HTML.

Передумови

Для цього розділу вам не потрібні попередні знання з HTML, але потрібно бути користувачем комп'ютерів і мережі (принаймні на рівні переглядання сайтів). Також вам буде потрібне базове робоче середовище, встановлення якого описане в статті Встановлення основного програмного забезпечення, і розуміння того, як створювати і керувати файлами, як описано в статті Робота з файлами — обидві статті є частинами розділу Початок роботи з вебом.

Примітка: якщо ви працюєте на комп'ютері/планшеті/іншому пристрої, на якому не маєте можливості створювати файли, спробуйте писати код в онлайн-програмах, таких як  JSBin чи Thimble.

Посібники

Статті у цьому розділі пояснюють базову теорію HTML і надають можливість перевірити ваші навички.

Початок роботи з HTML
Стаття пояснює елементарні основи HTML — що таке елементи, атрибути та інші важливі поняття, які ви могли чути, і яке завдання вони виконують. Ми також покажемо, як побудований елемент HTML, як побудована типова сторінка HTML, і пояснимо інші основні особливості мови. В процесі роботи ми трохи пограємо з HTML, щоб вам було цікаво!
Що в head? Метадані в HTML
Head в HTML-документі є частиною, яка не відображається в веб-браузері коли сторінка завантажується. Вона містить інформацію про сторінку, такі як <title> (en-US), посилання на CSS (якщо ви хочете надати стиль вашому HTML-змісту за допомогою CSS), посилання до користувальницьких favicons та метаданих (тобто даних про HTML, наприклад, хто його написав (автор) і важливі ключові слова (keywords), що описують документ.)
Основи HTML-тексту
Одним із основних завдань HTML є надання текстового значення (також відомого як семантика), щоб браузер знав, як правильно відображати його. У цій статті розглядається, як правильно використовувати HTML, щоб розбити блок тексту на структуру заголовків та абзаців (параграфів), додати акцент/важливість слів, створити списки і багато іншого.
Створення гіперпосилань
Гіперпосилання дійсно важливі — саме вони роблять Інтернет павутиною. Ця стаття показує синтаксис, необхідний для створення посилання і обговорює кращі практичні поради.
Розширене форматування тексту
В HTML є багато інших елементів для форматування тексту, про які ми не вказали в статті Основи HTML тексту. Елементи, що знаходяться тут, менш відомі, але їх все ж корисно знати. Тут ви дізнаєтесь про позначення цитат, списки опису, комп'ютерний код та інший пов'язаний текст, індекс та верхній індекс, контактну інформацію та багато іншого.
Структура документу та веб-сайту (en-US)
Крім визначення окремих частин вашої сторінки (наприклад "абзац" або "зображення"), HTML також використовується для визначення областей вашого веб-сайту (таких як "заголовок", "навігаційне меню", "колонка основного змісту".) У цій статті розглянуто, як планувати основну структуру веб-сайту, а також написати HTML-код для представлення цієї структури.
Відлагодження HTML
Написали HTML-код файно, але що робити, якщо щось йде неправильно і ви не можете з'ясувати, де помилка в коді? В цій статті ви ознайомитесь з деякими інструментами, які зможуть вам допомогти.

Оцінки

Наступні оцінки допоможуть перевірити ваше розуміння базових основ HTML, описаних вище в посібниках.

Розмітка/Форматування листа (en-US)
Ми всі вчимося писати листи рано чи пізно. Це також корисний приклад, щоб перевірити свої навички у форматуванні тексту. Отже, в цій оцінці вам буде надіслано листа для форматування.
Структурування сторінки змісту (en-US)
Ця оцінка перевіряє ваше вміння використовувати HTML для структурування простої сторінки змісту, що містить заголовок (header), нижній колонтитул (footer), навігаційне меню (navigation menu), основний зміст (main content), і бічну панель (sidebar).

Дивіться також

Основи веб-грамотності 1
Відмінний курс навчання Mozilla foundation, який навчає та випробовує багато навичок, про які говорилося в модулі Вступ до HTML. Учні знайомляться з читанням, написанням та участю в Інтернеті в цьому шестичастинному модулі. Дізнайтеся про основи Інтернету за допомогою виробництва та співпраці.