Организуйте свой текст
Текст, отображаемый на веб-странице, заключен в теги <body> </body>. Поэтому именно в <body> </body> мы будем писать текст для отображения с помощью тегов HTML, чтобы структурировать его с помощью абзацев, заголовков, списков или выделить важный текст.
Создавайте абзацы с тегами <p> </p>
Теги <p> </p> используются для разделения абзацев в HTML:
Да, но что, если я просто хочу переносить строку, не создавая каждый раз абзац?
Угадайте, для этого есть тег!
Перенести строку с одиночным тегом <br>
Чтобы вернуться к строке, мы используем одиночный тег <br> (для разрыва, break), поэтому нам не нужно его закрывать:
Теоретически вы можете поместить несколько тегов <br> в строку, чтобы сделать несколько разрывов строк, но это считается плохой практикой и усложняет поддержку кода. Чтобы сместить текст с большей точностью, мы будем использовать CSS. Этот язык, который дополняет HTML, чтобы добавить к нему стиль, и о котором я расскажу вам чуть позже. Теперь, когда вы знаете, как создавать абзацы и разрывать строки, давайте посмотрим, как создавать заголовки.
Создавайте заголовки с тегами <h1>, <h2>, <h3>…
Теги заголовков варьируются от <h1> </h1> до <h6> </h6>, что позволяет расставлять приоритеты и структурировать текст в разных разделах, от самого большого уровня до самого маленького. Вы всегда должны структурировать свою страницу, начиная с заголовка 1-го уровня <h1>, затем структурировать внутреннюю часть с заголовками 2-го уровня <h2>, затем, если необходимо структурировать внутреннюю часть, использовать заголовки 3-го уровня и т. д. Не должно быть подзаголовка без основного заголовка!
Не путай :
- Тег <h1> используется для создания заголовка уровня 1, который будет отображаться на веб-странице.
- Тег <title> ничего не отображает на веб-странице, он отображает заголовок страницы во вкладке браузера.
Итак, давайте добавим теги заголовков в код:
Ваш браузер отображает текст разного размера в зависимости от заголовков, но, если вы хотите изменить размер текста, знайте, что чуть позже мы научимся это делать в CSS.
Экспериментируйте в процессе создания вашего сайта!
Выделите важный текст
В тексте, который появляется на веб-странице, вы можете захотеть выделить определенные слова. Чаще всего для этого используется тег <strong>, но HTML предлагает вам различные способы выделения текста на вашей странице:
<mark> </mark> Выделите текст
<em> </em> Выделите текст курсивом
<strong> </strong> Выделите текст жирным шрифтом
Хорошо! Но это оформление меня не слишком радует, может поменяем?
По сути, именно браузер сам выбирает, как отображать слова, которые указаны ему как более или менее важные (жирным шрифтом, курсивом и т. д.). Теги <em> и <strong> не означают «выделение курсивом» или «жирным шрифтом» соответственно, а означают только то, что текст «важный». Позже, в CSS, мы можем решить отображать «важные» слова по-другому.
А если я не хочу выделять важный текст, имеет ли это значение?
Сканеры поисковых систем сканируют Интернет, считывая HTML-код всех сайтов. Ключевые слова «important», а также иерархические заголовки (headings), как правило, имеют большую ценность в их глазах и поэтому, если кто-то выполнит поиск, по этим словам, он с большей вероятностью наткнется на ваш сайт (у вашего сайта будет лучшее SEO (Search Engine Optimization). Но все равно будьте осторожны: злоупотребление этими тегами не окажет должного влияния на ваше SEO.
Один нюанс все же: Если почти весь текст будет помечен как важный, ничто конкретно не сможет "выделиться"... Задумайтесь!
Создавайте списки с тегами <li> и <ul> или <ol>
- Отметьте элементы списка тегами <li> </li>
Чтобы пометить элементы, которые вы хотите поместить в список, вы используете <li> </li> (« listed item » или « элементы списка » по-русски). Затем мы вставляем их все в другой тег, чтобы указать, является ли это маркированным списком или нумерованным списком.
- Оберните список тегами <ul> </ul> или <ol> </ol>
Теги <ul> </ul> (от англ. «unordered list» ) указывают, что мы начинаем неупорядоченный список, то есть то, что по-русски называется маркированным списком. Пример: О ресторане, Меню, Отзывы
Теги <ol> </ol> (от англ. «ordered list» или «упорядоченный список») указывают, что мы начинаем упорядоченный список, другими словами, нумерованный список. Пример: Просыпаюсь, Умываюсь, Завтракаю
Теперь у вас есть ещё несколько элементов для вашей HTML-страницы.
Файл index.htlm, который находится в папке Resto_Pelican, открывается в веб-браузере простым двойным щелчком по нему. Смотрим, что получилось.
До встречи в следующей части нашей темы!