Урок 2: Форматирование текста и списков — Давайте придадим вашей странице немного структуры (теперь с Caddy!)

Урок 2

Урок 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, так что теперь можете показать всем свою чётко структурированную веб-страницу! В следующем уроке мы добавим немного визуального волшебства с помощью изображений и ссылок, чтобы сделать вашу страницу ещё более интерактивной. Оставайтесь с нами!

HTML  Начинающие  Веб-дизайн  Caddy 

Смотрите также