Основи HTML (Відео версія)

Ласкаво прошу на мою веб-сторінку!

Я знаю, що вона має не дуже
приголомшливий вигляд,

адже вона повністю порожня.
Але кожна сторінка так починається,

і скоро я вам покажу, як зробити
її такою, якою вона має бути.

Спершу дайте мені хвилинку,

щоб познайомити вас із структурою
порожньої веб-сторінки.

Кожна сторінка починається

зі слова 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"