Ласкаво прошу на мою веб-сторінку!
Я знаю, що вона має не дуже
приголомшливий вигляд,
адже вона повністю порожня.
Але кожна сторінка так починається,
і скоро я вам покажу, як зробити
її такою, якою вона має бути.
Спершу дайте мені хвилинку,
щоб познайомити вас із структурою
порожньої веб-сторінки.
Кожна сторінка починається
зі слова 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"