Ласкаво прошу на мою веб-сторінку!
Я знаю, що вона має не дуже приголомшливий вигляд,
адже вона повністю порожня. Але кожна сторінка так починається,
і скоро я вам покажу, як зробити її такою, якою вона має бути.
Спершу дайте мені хвилинку,
щоб познайомити вас із структурою порожньої веб-сторінки.
Кожна сторінка починається
зі слова DOCTYPE у лівому верхньому кутку редактора.
Це всього лише сигнал для браузера,
що означає, що ця сторінка написана на сучасній версії HTML,
а не на старій незрозумілій HTML з помилками.
Далі переходимо до найпершого тега на сторінці.
HTML – це мова гіпертекстової розмітки, тому ми постійно матимемо справу з тегами.
Тег – це одна з тих речей,
що починається кутовою дужкою
і закінчується іншою кутовою дужкою.
Або якщо ви любите математику, ви можете думати про них
як про знаки більше/менше.
Першим тегом кожної сторінки завжди
є той тег, який знаходиться відразу під DOCTYPE.
Цей тег є початковим тегом HTML-коду,
а внизу, в самому кінці, є кінцевий тег HTML-коду.
Він виглядає так само як і початковий, проте містить в собі символ "\" (зворотній слеш),
який є дуже важливим.
Тег HTML має містити усі інші теги,
які формують веб-сторінку.
Тому ми використовуємо кінцевий тег HTML лише вкінці.
Багато тегів HTML є парними, як цей,
але не всі.
Після початкового тегу HTML завжди має бути тег (головний тег).
Він включає в себе теги, які допомагають браузеру відображати сторінку.
Але насправді не містить нічого того, що може бачити користувач.
Тут є тег (метатег), який надає браузеру
додаткову інформацію про те, як саме потрібно відображати сторінку.
Наприклад, якщо ви використовуєте загальновживані символи,
такі як в англійській мові
чи символи з арабської мови,
які не складно відобразити,
тоді в тезі вам слід використати набір символів utf-8.
Далі йде тег (тег заголовка),
який бразуер використовує, щоб дати назву сторінці.
Це те, що відображається у вкладці браузера зверху,
в закладках та в результатах пошуку.
На сайті Khan Academy заголовок можна побачити зверху над веб-сторінкою.
Дозвольте я зміню заголовок.
Я планую створити сторінку про кроликів.
Тому я напишу "Все про кроликів",
і ви можете відразу побачити, як зверху змінюється назва.
Чудово, ми закінчили з цими деталями,
тому ми завершуємо роботу з головним тегом і переходимо до наступного тега,
в якому все відбувається. Переходимо до тега (тег тіла сторінки).
Зараз це виглядає досить нудно, всього лиш початок і кінець.
Що я маю додати?
Що ж, я роблю сторінку про кроликів,
тому я напевно маю про це написати
у великому заголовку зверху.
Щоб додати заголовок, ми використовуємо тег .
"Все про кроликів", чудово.
Загалом ми маємо шість тегів,
які ми можемо використовувати для написання заголовків: h1, h2, h3, h4, h5 та h6.
h1 використовується для написання найважливішого заголовка сторінки,
а h6 – для найменш важливого.
Давайте додамо декілька заголовків для інших розділів.
Я використаю h2, оскільки це є
трішечки менш важливий розділ.
І напишу в ньому "Пісні", добре.
Тепер додамо трішки інформації.
Цільовою аудиторією цієї сторінки є інопланетяни,
які ніколи не бачили кроликів.
Тому тут мені краще написати детальний опис кроликів.
Насправді, я думаю, що мені потрібно цілий абзац інформації.
Як я можу зробити абзац в HTML?
Звичайно ж, за допомогою тега .
Ми ставимо тут тег , і далі мені потрібно лише
вставити інформацію,
тому вам не потрібно буде дивитись, як я це все друкую.
Прекрасно.
Тепер інопланетянам потрібна пісенька, щоб привітати кроликів,
тому я дам їм слова моєї улюбленої.
Я знову використаю тег і вставлю пісню
"Маленький кролик ФуФу", така прекрасна пісня.
Але...оу, вся пісня показана в одному рядку.
Як інопланетяни знатимуть, коли зупинятись?
Чому браузер не відображає
поділ на рядки, який я зробила?
Насправді, браузери переважно ігнорують перехід рядка
і пробіли в HTML-коді.
Якщо ми хочемо, щоб браузер відобразив переходи рядків,
ми маємо це зрозуміло сказати, використавши інший тег,
тег , який означає розрив.
Ми пройдемось по тексту і додамо тег після кожного рядка.
Тепер це виглядає, як пісня.
А ви помітили дещо веселе в тезі ?
Тут немає кінцевого тега.
Якщо ви подумаєте про це,
розрив рядка не містить ніякої інформації,
тому й не має ніякого закінчення.
Лише початковий тег – це все, що нам потрібно.
Тут він і є.
Інопланетяни вивчать основну інформацію про кроликів,
а ви вже вивчили основи HTML.
Після того як я закінчу свою лекцію,
побавтеся з цими тегами і спробуйте щось змінити.
Коли будете готові, переходьте до свого першого завданя з HTML.
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, благодійний фонд "MagneticOne.org"