Форматирование текста HTML: Структурирование веб-контента

Введение

Добро пожаловать в лабораторию форматирования текста в HTML! На этом практическом занятии вы научитесь структурировать и форматировать текст на веб-странице, используя основные теги HTML. Правильно отформатированный текст имеет решающее значение для создания читаемого, доступного и хорошо организованного веб-контента.

Вы будете работать с одним HTML-файлом, index.html, и научитесь использовать следующие теги:

<h1>: для основных заголовков.
<p>: для абзацев.
<strong>: для придания тексту сильной важности, обычно отображается как полужирный.
<em>: для выделения текста, обычно отображается как курсив.
<br>: для вставки переноса строки.

На протяжении всей лаборатории вы сможете видеть свои изменения в реальном времени, сохраняя файл и просматривая его на вкладке "Web 8080" в вашем рабочем пространстве.

Добавьте тег h1 для основного заголовка

На этом шаге вы добавите основное название на свою веб-страницу. В HTML заголовки определяются тегами от <h1> до <h6>. <h1> определяет наиболее важный заголовок и обычно используется для основного названия страницы.

Сначала откройте файл index.html, расположенный в каталоге ~/project, используя файловый менеджер в левой части WebIDE.

Теперь добавьте тег <h1> внутрь раздела <body> вашего файла index.html. Замените комментарий  следующей строкой кода:

<h1>Welcome to My Web Page</h1>

Теперь раздел <body> должен выглядеть следующим образом:

<body>
  <h1>Welcome to My Web Page</h1>
</body>

После добавления кода сохраните файл (Ctrl+S или Cmd+S). Чтобы увидеть результат, нажмите на вкладку "Web 8080" в верхней части интерфейса. Вы должны увидеть свой заголовок, отображаемый на странице.

Вставьте тег p для текста абзаца

На этом шаге вы добавите абзац текста под вашим заголовком. Тег <p> используется для определения абзаца в HTML. Браузеры автоматически добавляют некоторое пустое пространство (отступ) до и после абзаца.

В файле index.html добавьте новую строку после тега <h1> и вставьте следующий тег <p>:

<p>
  This is a paragraph of text. It contains some introductory information about
  this page. HTML is great for structuring content, and this paragraph is an
  example of that. It also contains some important information.
</p>

Теперь раздел <body> должен содержать как заголовок, так и новый абзац:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some important information.
  </p>
</body>

Сохраните файл index.html и обновите вкладку "Web 8080", чтобы увидеть новый абзац, отображаемый под заголовком.

Используйте тег strong для полужирного текста

На этом шаге вы узнаете, как сделать текст жирным. Тег <strong> используется для обозначения того, что текст имеет сильную важность, серьезность или срочность. Браузеры обычно отображают содержимое внутри тега <strong> жирным шрифтом.

Давайте изменим абзац, который вы добавили на предыдущем шаге, чтобы выделить фразу "important information". Оберните эту фразу тегами <strong> и </strong>.

Измените тег <p> в вашем файле index.html следующим образом:

<p>
  This is a paragraph of text. It contains some introductory information about
  this page. HTML is great for structuring content, and this paragraph is an
  example of that. It also contains some <strong>important information</strong>.
</p>

Полный раздел <body> вашего файла теперь должен выглядеть так:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
</body>

Сохраните файл и проверьте вкладку "Web 8080". Вы заметите, что текст "important information" теперь выделен жирным шрифтом.

Примените тег em для курсивного текста

На этом шаге вы узнаете, как выделять текст, который обычно отображается курсивом. Для этой цели используется тег <em> (сокращение от "emphasis" - выделение). Он указывает, что заключенный в него текст должен быть подчеркнут или выделен.

Давайте добавим новый абзац, содержащий выделенный текст. Добавьте следующий код под существующий абзац в файле index.html:

<p>
  You can also use other tags to format text. For example, the em tag is used
  for <em>emphasized</em> text.
</p>

Теперь раздел <body> вашего файла должен выглядеть так:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
  <p>
    You can also use other tags to format text. For example, the em tag is used
    for <em>emphasized</em> text.
  </p>
</body>

Сохраните файл и откройте вкладку "Web 8080". Вы увидите новый абзац, а слово "emphasized" будет выделено курсивом.

Вставьте тег br для переноса строк

На этом шаге вы узнаете, как принудительно перенести строку в блоке текста. Тег <br> вставляет один перенос строки. Это пустой тег, что означает, что у него нет закрывающего тега.

Давайте добавим перенос строки в середине второго абзаца, который вы создали. Это полезно, когда вы хотите начать новую строку, не начиная новый абзац.

Измените второй тег <p> в вашем файле index.html, чтобы включить тег <br>:

<p>
  You can also use other tags to format text. <br />For example, the em tag is
  used for <em>emphasized</em> text.
</p>

Содержимое вашего окончательного раздела <body> должно быть следующим:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
  <p>
    You can also use other tags to format text. <br />For example, the em tag is
    used for <em>emphasized</em> text.
  </p>
</body>

Сохраните файл и обновите вкладку "Web 8080". Вы увидите, что второй абзац теперь разделен на две строки.

Резюме

Поздравляем с завершением лабораторной работы! Вы успешно освоили основы форматирования текста в HTML.

В этой лабораторной работе вы практиковались в использовании:

<h1> для создания основного заголовка.
<p> для структурирования контента в абзацы.
<strong> для придания тексту сильной важности (жирный шрифт).
<em> для выделения текста (курсив).
<br> для вставки переносов строк.

Эти теги являются основными строительными блоками для создания хорошо структурированного и читаемого контента на любой веб-странице. Продолжайте практиковаться и изучать другие HTML-теги, чтобы улучшить свои навыки веб-разработки.

Форматирование текста в HTML