Урок 2: Форматування тексту і списків – Надайте своїй вебсторінці структуру (знову з Caddy!)
Ласкаво просимо назад, веб-чарівнику! Тепер, коли ви розпочали свою подорож у світ HTML, час зробити вашу вебсторінку трохи більш організованою. Сьогодні ми поринемо в заголовки, абзаци та списки, щоб надати вашій сторінці чітку структуру. І, як і в Уроці 1, ми використаємо Caddy, щоб захостити вашу сторінку. Готові похизуватися своїм ідеально структурованим контентом? Тоді поїхали!
Заголовки: Нехай ваш контент виділяється
Заголовки в HTML – це як назви і підзаголовки у книжці. Вони допомагають структурувати контент і підказують відвідувачам, що є найважливішим. HTML пропонує шість рівнів заголовків: від <h1> (найважливіший) до <h6> (найменш важливий).
Ось як вони виглядають:
<h1>Головний заголовок (H1)</h1>
<h2>Підзаголовок (H2)</h2>
<h3>Ще менший підзаголовок (H3)</h3>
<h4>Четвертий заголовок (H4)</h4>
<h5>П'ятий заголовок (H5)</h5>
<h6>Шостий заголовок (H6)</h6>
Завдання: Спробуйте власні заголовки
Створіть сторінку про ваше улюблене хобі або тему. Використовуйте різні заголовки, щоб організувати свої думки. Не забудьте, що <h1> — це головний заголовок, а <h6> — найменший.
Абзаци: Час писати!
Тег абзацу (<p>) дозволяє додавати блоки тексту на вашу сторінку. Це спосіб поділитися своїми геніальними ідеями, не перевантажуючи ваших читачів.
Ось приклад:
<p>Це абзац. Ви можете написати стільки, скільки хочете, і текст автоматично буде переноситися, щоб відповідати розмірам сторінки. Ідеально для написання історій або пояснень.</p>
Завдання: Додайте кілька абзаців
Напишіть кілька абзаців про щось, що вам подобається — фільми, книги або улюблений десерт. Це ваша сторінка, тому отримуйте задоволення!
Списки: Організуйте свій контент як професіонал
Неупорядковані списки (з маркерами)
Неупорядкований список (<ul>) створює список з маркерами. Ідеально підходить для створення списків справ або чого-небудь, що не потребує певного порядку.
Приклад:
<ul>
<li>Вивчити HTML</li>
<li>Стати майстром веброзробки</li>
<li>Захопити інтернет</li>
</ul>
Упорядковані списки (нумеровані кроки)
Упорядкований список (<ol>) створює нумерований список, ідеально підходить для кроків, які потрібно виконувати в певному порядку.
Приклад:
<ol>
<li>Прокинутися</li>
<li>Приготувати каву</li>
<li>Захопити день</li>
</ol>
Завдання: Створіть власні списки
Створіть неупорядкований список (наприклад, ваших улюблених фільмів, страв або занять) і упорядкований список (наприклад, кроки вашої ранкової рутини). Експериментуйте!
Вкладені списки: На один рівень глибше
Ви також можете вкладати списки всередині інших списків для більш детальної організації.
Приклад:
<ul>
<li>Чому хочу навчитися:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Чому хочу стати майстром:
<ol>
<li>Контроль версій</li>
<li>Термінал</li>
</ol>
</li>
</ul>
Завдання: Спробуйте вкладені списки
Створіть вкладений список своїх цілей і підцілей. Це як планування життя, тільки для вебсторінки!
Хостинг вашої сторінки з Caddy
Тепер, коли ваша сторінка наповнена структурованим контентом, давайте використаємо Caddy, щоб знову захостити її. Виконайте наступні кроки, щоб продемонструвати свої навички HTML:
Крок 1: Відкрийте термінал
Перейдіть до папки, в якій збережений ваш HTML-файл:
cd ~/my-website
Крок 2: Запустіть Caddy
Запустіть цю команду, щоб захостити ваш сайт локально на порту 8080:
caddy file-server --listen :8080
Крок 3: Перегляньте вашу сторінку
Відкрийте браузер і перейдіть за адресою http://localhost:8080, щоб побачити вашу нову, чітко структуровану сторінку. Оцініть всю цю ідеально організовану красу!
Підсумки:
У цьому уроці ви дізналися, як:
- Використовувати заголовки для організації контенту.
- Писати абзаци для додавання змістовного тексту.
- Створювати як неупорядковані (з маркерами), так і упорядковані (нумеровані) списки.
- Вкладати списки для більш складного контенту.
Ви також захостили оновлену сторінку за допомогою Caddy, тож тепер можете похизуватися своєю акуратно форматованою вебсторінкою! У наступному уроці ми додамо трохи візуального шарму за допомогою зображень та посилань, щоб зробити вашу сторінку ще більш інтерактивною. Залишайтеся з нами!