HTML… что-то знакомое, это какой-то бренд?

HTML — это язык разметки гипертекста. Благодаря ему, наш браузер понимает, ЧТО изображено на интернет-странице. Боевая единица этого языка называется тег. Есть видимые — теги абзаца, заголовка, ссылки, цитаты и всего остального того, что отображается на странице. А есть скрытые так называемые метатеги, они передают техническую информацию о странице браузеру или поисковой системе. В этой статье поговорим о видимых тегах.

Стандартная html разметка страницы

Html разметка пример

html разметка пример


Практически каждая веб страница состоит из трех блоков:

  1. Голова
  2. Тело
  3. Подвал

Шапка, или <head> — блок в котором лежит вся техническая информация о странице, метатеги, а также тег заголовка страницы.
Тело, — <body>, — блок основного контента. Тут прописывается страница. Полностью все участки страницы лежат здесь — логотип, меню, хлебные крошки, область с контентом, рекламные блоки, баннеры и все остальное, что только можно представить.

Подвал, он же футер <footer> — нижний колонтитул страницы. Обычно туда вставляют какое-то вспомогательное меню, ссылки на юридические документы, копирайты и тому подобное.

Оформление текста в html — что нужно знать копирайтеру

Копирайтеру не нужно вникать во все тонкости верстки страниц сайтов. Ему нужно понимать, как сделать html форматирование текста. Он должен хотя бы примерно представлять, как это все работает. Но тут все на самом деле очень просто. За исключением тега тайтл, работать копирайтер будет в блоке тела документа. Помните, тайтл прописывается в шапке.

Недавно я писал статью про разметку статьи в текстовом редакторе. Там я говорил о 5 главных блоках. Сейчас я покажу, какие теги нужны, чтобы отобразить эти блоки на сайте в ХТМЛ.

<title>То соме название страницы из Хедера</title>
<h1>Самый главный заголовок</h1>
<h2>Подзаголовок. Их много — от h2 до h6.</h2>
<p>Тег абзаца</p>
<a href=”google.com”>Ссылка</a>
<blockquote>Цитата</blockquote>
<strong>Выделение текста жирным</strong>
<h3>Заголовок 3: ниже маркированный список</h3>
<ul>
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
<li>Четвертый пункт списка</li>
</ul>
<h4>Заголовок 4: ниже нумерованный список</h4>
<ol>
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
<li>Четвертый пункт списка</li>
</ol>

В принципе, это и все. Конечно, тегов еще много, но обычно для разметки статьи этого достаточно. Несмотря на то, что практически во всех современных CMS есть встроенный визуальный редактор, знать основы HTML полезно. Особенно, если ты решаешь задачи не только копирайтера, но и контент-менеджера, делая оформление текста в html.
Если я забываю какой-то тег или синтаксис, то захожу на htmlbook.ru там все годно расписано.

HTML справочник для копирайтера

HTML справочник для копирайтера

Рекомендую добавить этот сайт себе в закладки.

Как попрактиковаться в форматировании текста для WEB

Для этого на самом деле ничего не нужно. У тебя уже установлен на компе браузер и блокнот. Этого достаточно. Хотя уровень удобства стандартных программ оставляет желать лучшего. Рекомендую скачать саблайм текст. Это простой, но очень мощный редактор кода. Официальный сайт → sublimetext.com
Прямо в саблайме напишем код, который я показал выше.

Sublime для копирайтера

Форматируем текст в html через Sublime

Сохраняем в формате html. Жмем кнопки Ctrl+S, выбираем папку, куда сохраним файл и пишем «название_файла.html». Сохранить.

Сохраняем файл в формате .html

Сохраняем файл в формате .html

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

Подсветка синтаксиса

Подсветка синтаксиса

Теперь открываем файлик в браузере.

Открываем файл в браузере

Открываем файл в браузере

Обратите внимание, где отображается тайтл. Несмотря на такое вот невзрачное место отображения, это один из самых основных тегов. На него молятся сеошники.

По поводу подзаголовков. Попробуй прописать теги от h2 до h6. Посмотри, чем они отличаются. Можешь считать это домашним заданием. Сделай разметку статьи в html самостоятельно)

Выглядит это все конечно так себе

Конечно, это же всего лишь html. Он отвечает лишь за то, что находится на странице, а не за то, как это выглядит. Чтобы отобразить это содержимое красиво, применяются таблицы стилей — CSS. Но это уже совсем другая история.

Кроме того, в этом примере нет разделения страницы на шапку, тело и подвал. Мы просто написали теги, чтобы посмотреть, как это работает. Если хочешь подтянуть знания в хтмл, то рекомендую сервис htmlacademy.ru Все базовые навыки разметки текста в html там можно получить и отточить бесплатно. Там же прокачаешь немного CSS. На сегодня все. Если есть вопросы, не стесняйся, задавай в комментариях↓↓↓