Урок 001
Твоя перша сторінка в інтернеті
Your first page on the internet
Сьогодні ти зробиш сторінку про себе. Справжню – таку, що відкривається у браузері й виглядає так, як ти вирішиш.
Починати з порожнечі не доведеться. Унизу вже є маленька сторінка: вона працює, але вона поки що ні про кого. Ти змінюватимеш її шматочок за шматочком, і кожна зміна одразу з’явиться у вікні перегляду.
Спробуй спочатку сам. Якщо застрягнеш – підказка відкриється, але дай собі кілька хвилин.
Спершу подивись
Ліворуч – код сторінки. Праворуч – те, що з нього виходить.
Знайди у коді слова «Привіт, світ!». Тепер знайди ці самі слова у вікні перегляду. Це один і той самий текст: ліворуч він записаний, праворуч – намальований браузером.
Завдання 1
Заміни «Привіт, світ!» на своє ім’я. Кутові дужки не чіпай – міняй лише текст між ними.
Підказка до завдання 1 відкриється, якщо буде потрібно.
Натисни «Перевірити». У заголовку має стояти твоє ім’я.
Розкажи про себе
Нижче в коді є рядок <p>Тут буде текст про мене.</p>. p – від англійського paragraph, абзац.
Завдання 2
Напиши замість цього тексту одне-два речення про себе. Що завгодно: звідки ти, що любиш, що зараз вивчаєш.
Підказка до завдання 2 відкриється, якщо буде потрібно.
Абзац має містити твій власний текст.
Три речі, які ти любиш
Далі йде список. Він поки що з одного пункту:
<ul>
<li>Перше</li>
</ul>ul – це unordered list, маркований список. li – list item, один пункт списку. Пункт завжди живе всередині списку.
Завдання 3
Зроби у списку три пункти – три речі, які ти любиш. Ігри, музика, футбол, кіт, що завгодно.
Підказка до завдання 3 відкриється, якщо буде потрібно.
У списку має бути щонайменше три твої пункти.
Тепер зовнішній вигляд
Усе, що ти міняв досі, – це HTML: що саме є на сторінці. Те, який вигляд воно має, описують окремо. Подивись угору коду, всередину <style>. Там є таке правило:
h1 {
color: #888888;
}Читається просто: «заголовкам h1 – колір #888888». Це сірий. А #888888 – це запис кольору цифрами.
Завдання 4
Зроби заголовок свого улюбленого кольору. Спробуй написати color: teal; – або crimson, orange, hotpink, rebeccapurple. Англійські назви кольорів браузер розуміє без словника.
Підказка до завдання 4 відкриється, якщо буде потрібно.
Колір заголовка має відрізнятися від початкового сірого.
Що щойно сталося
Ти зробив дві різні речі, і їх варто розрізняти.
HTML – це те, що є на сторінці: заголовок, абзац, список. Ти позначаєш шматки тексту тегами, і браузер розуміє, чим кожен шматок є.
CSS – це те, який вигляд воно має: колір, розмір, відступи. Одне правило CSS може змінити всі заголовки одразу.
Розділення тут не випадкове. Зміст окремо, вигляд окремо – так можна перефарбувати всю сторінку, не чіпаючи жодного слова тексту.
І ще одне: сторінка, яку ти щойно зробив, – справжня. Це не тренажер і не спрощена версія. Той самий HTML і той самий CSS працюють на будь-якому сайті, який ти сьогодні відкривав.
Поясни своїми словами
Своїми словами, як пояснив би другові: що робить HTML, а що робить CSS? Двох речень достатньо.
Тут немає правильної відповіді, яку треба вгадати. У справжньому уроці цю відповідь читає вчитель – саме з неї видно, що вже вкладено в голову.
Слова, які ти сьогодні зустрів
- tag тег, позначка на кшталт
<p> - paragraph абзац
- unordered list маркований список
- list item пункт списку
- color колір
- style стиль, вигляд