Верстка статьи – 9 ошибок в верстке статьи, из-за которых вы теряете читателей

Содержание

9 ошибок в верстке статьи, из-за которых вы теряете читателей

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

Выравнивание правого края

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

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

В блоге медиахаба «Rockin’Robin» делают правый край текста ровным с помощью автоматического выравнивания по ширине. Из-за этого между словами образуются дыры:

Если отключить выравнивание по ширине, то пробелы между словами будут одинаковыми, и станет заметно лучше:

Совет: Выравнивайте текст по левому краю. Рваный правый край выглядит лучше, чем разная длина пробелов между словами

Цвет текста не контрастен к фону

Чем меньше соотношение цвета текста и фона, тем сложнее его читать. Если мы напишем белым цветом на белом фоне, то соотношение цветов будет 1:1. Такой текст невозможно прочитать. Светло-серый текст на белом фоне будет иметь соотношение 1:6.

Текст различим, но читабельность все еще низкая. Чтобы текст хорошо читался, соотношение цветов должно быть 5:1 или больше.

Чтобы прочитать эти четыре слова, напрягаться не нужно. Но если в таком же соотношении набрать целую статью, читабельность ухудшится:

Поэтому для статей нужно выбирать более контрастный цвет шрифта. Проверить соотношение контрастности цвета шрифта и фона можно с помощью специального инструмента. Самая большая контрастность между черным и белым. Поэтому черный текст на белом фоне — самый читабельный.

Совет: Пишите черным по белому

Незаметный подзаголовок

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

В блоге «Madcats» подзаголовки выделяют только крупным кеглем, жирность и цвет не используют. Поэтому при сканировании мимо них легко проскочить:

Внимание к подзаголовкам привлекают только красные линии, но они не информативны: читатель их заметит, но подзаголовок может не прочитать. Если поменять цвет подзаголовков и добавить жирность, то мимо них уже не проскочишь:

Совет: Подзаголовки должны выделяться

Неправильное соотношение верхнего и нижнего отступа в подзаголовке

Еще одна ошибка в оформлении подзаголовков — неправильная величина отступов. Величина отступа сверху подзаголовка должна быть больше, чем величина отступа снизу. Так мы визуально показываем, что подзаголовок относится к нижнему абзацу, а не к верхнему.

В блоге «GetGoodRank» подзаголовки оформлены невнятно, поэтому их можно спутать с врезками.

Сделаем отступ сверху больше, чем снизу, и иерархия станет понятной:

Совет: у читателя не должно возникать сомнений, к какому абзацу относится подзаголовок.

Сложная структура

Подзаголовки создают структуру статьи. Хорошая структура помогает читателю ориентироваться в статье. Но если структура многоуровневая, то читатель может запутаться. Принцип многоуровневой структуры — каждый следующий подзаголовок вкладывается в предыдущий и создает новый уровень вложенности.

Если подзаголовок включает в себя еще один подзаголовок — структура получается с трехуровневой вложенностью:

Заголовок (Первый уровень)

Подзаголовок (Второй уровень)

Подзаголовок (Третий уровень)
Подзаголовок (Третий уровень)

Подзаголовок (Второй уровень)
Подзаголовок (Второй уровень)

Такая структура воспринимается нормально, но если добавить еще один уровень, то читатель может потеряться в статье:

Заголовок (Первый уровень)

Подзаголовок (Второй уровень)

Подзаголовок (Третий уровень)

Подзаголовок (Четвертый уровень)
Подзаголовок (Четвертый уровень)

Подзаголовок (Третий уровень)

Подзаголовок (Второй уровень)
Подзаголовок (Второй уровень)

Многоуровневая структура хорошо подходит для справочников: с ее помощью легко находить информацию. Но читать статью с такой структурой сложно. Читателю приходится запоминать, в каком разделе он находится, что приводит к лишнему напряжению и путанице. Поэтому в статьях лучше использовать простую структуру:

Заголовок

Подзаголовок
Подзаголовок
Подзаголовок

Совет: Делайте структуру статьи проще. Многоуровневую структуру оставьте для тех, кто верстает справочники.

Неподходящий размер интерлиньяжа

Интерлиньяж — это расстояние между строками. Размер интерлиньяжа зависит от размера кегля и от ширины строки. Чем шире строка и крупнее кегль, тем больше должен быть интерлиньяж. Чтобы строки не получились слишком слипшимися, нужно ориентироваться на расстояние между словами: оно должно быть заметно меньше, чем интерлиньяж.

Совет: Подбирая размер интерлиньяжа, ориентируйтесь на размер кегля, ширину текстового поля и расстояние между словами.

Слишком широкое текстовое поле

От размера текстового поля зависит скорость и удобство чтения. Слишком длинное текстовое поле затрудняет чтение: дочитав одну строку, сложно перескочить на следующую. Поэтому читатель может перепрыгнуть не на ту строку.

Сделаем наборную строку чуть уже, и читать станет легче:

Чтобы определить подходящую длину строки, можно использовать формулу Роберта Брингхарста: размер кегля умножить на 30.

Мелкий размер кегля

Мелкий размер кегля — это неуважение к читателю. Размер кегля должен быть таким, чтобы его можно было читать без усилий.

Увеличим кегль до 16 px, и текст можно спокойно читать:

Совет: Основной текст на веб-странице лучше не набирать кеглем меньше 14 px.

Отсутствие абзацев

Абзацы — это один из показателей хорошей структуры текста. Абзацы делают текст читабельнее и привлекательнее. Длинные полотна текста не хочется читать, кажется, что там написано о чем-то сложном.

Разделим это полотно на абзацы:

Совет: Делите текст на абзацы размером не более 8 строк

Подведем итог

Выравнивайте текст по левому краю;
Подбирайте цвет шрифта, который наиболее контрастен к фону;
Выделяйте подзаголовки четче;
Расстояние сверху подзаголовка должно быть больше, чем снизу;
Не используйте сложную структуру в статье;
Межстрочный интервал должен быть заметно больше расстояния между словами;
Текстовое поле не должно быть слишком широким;
Набирать статью кеглем меньше 14 px — неуважение к читателю;

Делите текст на абзацы.

9-oshibok-v-verstke-stati-iz-za-kotorykh-vy-teryaete-chitateley

texterra.ru

что это такое? Какие методы верстки бывают и какие программы используются.

Часто возникает вопрос, что такое верстка? Простым языком, верстка – это расположение составных элементов (текста, заголовков, изображений, таблиц) на странице документа. Верстка бывает следующих видов:

Книжная
Газетно-журнальная
Верстка веб-документов

Описание первых двух опустим и перейдем сразу к верстке веб-страниц. Чтобы лучше понять, что это такое рассмотрим процесс создания сайта. Сначала создают дизайн-макет: рисуют каждую страницу и все его элементы. В итоге получают изображение сайта, но это всего лишь «картинка».

Далее, полученный макет нужно отобразить в браузере, да так, чтобы все элементы «ожили» и откликались на действия пользователей. На этом этапе и вступает в работу верстальщик. Используя язык разметки html, он создает документы, которые понимает браузер и отображает их привычными всем веб-страницами.

Методы верстки

При верстке веб-страниц можно выделить два основных метода:

Табличная верстка
Блочная верстка

Табличная верстка раньше была основной. Преимущество верстки с помощью таблиц заключается в ее простом исполнении и практически одинаковом отображении в разных браузерах. Недостатки – сложная и объемная структура, которая в разы увеличивает количество кода ( по сравнению с блочной). Чтобы изменить табличную верстку нужно затратить большое количество времени и усилий, долго вникать в уже существующую структуру.

На сегодняшний день продолжают верстать сайты табличной версткой, но профессионалы уже давно перешли на более гибкую — блочную. Табличную верстку рекомендуют использовать только для отображения таблиц.

Блочная верстка является основной в среде веб-разработчиков. В блочной верстке каркас документа состоит из тегов <div>. Главным ее преимуществом является концепция семантической верстки, т. е. разделение содержимого и оформления.

Небольшой пример кода:

Табличная верстка

<table border=»0″ cellspacing=»0″ cellpadding=»0″>
<tr colspan=»2″>
<td colspan=»2″>Шапка</td>
</tr>
<tr>
<td>Контент</td>
<td>Меню</td>
</tr>
<tr colspan=»2″>
<td colspan=»2″>Подвал</td>
</tr>
</table>

Код блочной верстки

<div>Шапка</div>
<div>
<div>Контент</div>
<div>Меню</div>
</div>
<div>Подвал</div>

Результат получается одинаковый:

Даже для самого простого макета уже видна разница в коде, а с увеличением элементов разница будет расти в геометрической прогрессии.

Программы для верстки

Чтобы сверстать простую веб-страницу можно обойтись и обычным блокнотом. Для более сложных проектов не обойтись без специальных html-редакторов. Они подсвечивают код, что значительно упрощает процесс верстки. В профессиональной среде используют следующие программы:

Notepad++
Macromedia Dreamweaver
Microsoft FrontPage
CoffeeCup HTML Editor
NetBeans
Coda

Редакторы html-страниц разделяют на обычные и визуальные. Используя визуальный редактор, сверстать страницу сможет даже неопытный пользователь. Но стоит понимать, что визуальный редактор дописывает много лишнего кода ( мусора) и лишает верстальщика возможности использовать гибкость языка html на 100%.

Какие проблемы возникают при верстке?

Основная проблема при верстке сайтов – не одинаковое отображение одного и того же документа в разных браузерах. Сверстав качественно страницу для Firefox, она может отображаться немного по-другому в Opera, и полностью разъехаться в Internet Explorer.

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

Часто верстке не уделяют должного внимания. С таким подходом можно загубить даже самый креативный дизайн и сложный функционал сайта. Если посетители вашего личного блога это вам простят, то разваливающаяся верстка корпоративного сайта или магазина серьезно отразится на имидже компании. Самое верное решение – доверить работу профессионалам.

ac-u.ru

Как стать верстальщиком, или Почему азы верстки должны знать все

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

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

Что такое HTML-верстка и зачем она нужна

Верстка — это этап разработки сайтов, на котором визуальные макеты переводятся в код, который обеспечивает отображение страниц в браузерах. Условно это можно представить так: верстальщик переводит страницу с визуального языка дизайнера на язык браузеров.

Сверстанный макет страницы попадает от верстальщика к программисту, который интегрирует его в систему управления контентом. После этого вебмастер может наполнить и опубликовать страницу, а посетители сайта смогут ее просматривать.

Нужны ли услуги верстальщика владельцам существующих сайтов? Ответ на вопрос зависит от потребностей вебмастера.

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

В популярных CMS есть визуальные редакторы, с помощью которых можно отформатировать контент и сделать его читабельным. Обратите внимание на возможности штатного WYSIWIG-редактора WordPress.

Вы можете набирать текст непосредственно в редакторе CMS, форматировать его, добавлять фотографии. Функциональность CMS обеспечивает корректное отображение контента с небольшими оговорками.

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

В теории решить проблему можно без знаний HTML. Достаточно правильно отформатировать контент в текстовом процессоре и перенести его в визуальный редактор CMS.

Редактор CMS автоматически преобразовал визуальный формат контента в HTML-код. То есть администратору сайта для публикации контента достаточно уметь работать с текстовым процессором и WYSIWYG-редактором CMS.

Но иногда копирование содержимого из Word в CMS приводит к ошибкам. Обратите внимание на код страницы.

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

«Верстальщиком можешь ты не быть, но HTML знать обязан»

Адаптированный отрывок из произведения Некрасова относится к владельцам, администраторам и контент-менеджерам сайтов. Еще раз обратите внимание на попавшие на страницу при копировании контента из MS Word лишние теги. В данном случае они прямо не влияют на пользовательский опыт: посетители страницы их не видят.

Мусорный код, который попадает на страницу при копировании контента из текстовых редакторов, может стать причиной проблем. Например, если внутри лишних тегов окажется контент, он будет отображаться для пользователей некорректно. Такая ошибка нарушит структуру страницы и сделает ее некачественной.

Лишние теги делают код страницы невалидным. Валидность кода не входит в число факторов ранжирования сайтов крупнейших поисковых систем. Однако невалидный код страницы может направить поисковых роботов по ложному пути и исказить результаты сканирования страницы.

Простой пример: подзаголовки помогают поисковикам структурировать текст на смысловые блоки. Если в подзаголовке написано «Как составить файл robots.txt», поисковая система понимает, что в соответствующем разделе страницы речь пойдет о файле robots.txt.

Что случится, если подзаголовок не будет обозначен верными html-тегами? «Яндексу» и Google будет сложнее определить, о чем идет речь в соответствующем разделе страницы. Роботы могут посчитать страницу нерелевантной запросам о файле robots.txt. В результате сайт получит меньше посетителей.

Теперь понятно, почему блогеру, журналисту или сапожнику и по совместительству администратору сайта сапожной мастерской не помешает знать хотя бы основные HTML-теги? Например, эти знания могут помочь удалить «мусор» со страницы.

Большинство WYSIWIG-редакторов в CMS имеют два режима: визуальный и HTML. Чтобы найти и удалить лишние теги из кода страницы, достаточно переключить штатный редактор WordPress в режим «Текст».

Знание HTML на базовом уровне предупреждает появление на странице лишнего кода на этапе переноса контента из текстового процессора в редактор движка. Чтобы решить эту задачу, очистите созданный в Word контент от форматирования. Для этого воспользуйтесь функцией «Удалить форматирование» в текстовом редакторе или скопируйте контент и вставьте его в «Блокнот». Потом вставьте очищенный от форматирования контент в редактор CMS в формате HTML.

Разметьте контент с помощью тегов HTML и опубликуйте.

Очистка контента от форматирования и добавление тегов HTML вручную предупредила появление на странице мусорного кода и обеспечила корректное отображение публикации для пользователей.

Что нужно знать администратору сайта, чтобы обойтись без верстальщика

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

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

Во-вторых, знание основ HTML не превращает блогера или сапожника и по совместительству администратора сайта сапожной мастерской в верстальщика. Чтобы профессионально выполнять верстку, нужно учиться и практиковаться.

Администратор сайта автомойки не будет краснеть перед читателями за неудобный для восприятия контент, если у него следующие знания:

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

Чтобы корректно использовать теги, вебмастер должен понимать их значение. Например, специалист должен знать разницу между заголовками второго и третьего порядка или визуально одинаковыми тегами i и em.

Изучение базовой информации поможет самостоятельно размечать и публиковать контент. Если основы HTML дадутся легко, а интерес к веб-верстке не исчезнет, вы сможете взяться за обучение по-настоящему и стать профессиональным верстальщиком.

Тяжело ли научиться верстке? Где учат на верстальщика? Чем занимается данный специалист на практике? Об этом и не только читателям рассказал руководитель отдела верстки компании TexTerra Алексей Печенкин.

«Верстальщик реализует идеи дизайнера»

Алексей поделился информацией о профессии верстальщика, несмотря на чрезвычайную загруженность. Он сразу рассказал, от чего пришлось отвлечься ради мини-интервью для блога.

Дмитрий Дементий: Расскажите в двух словах о профессии верстальщика: чем занимаетесь вы и сотрудники вашего отдела, как организован рабочий процесс? Верстальщик — это кто: программист, технический специалист, дизайнер? Англичане и американцы называют типографских верстальщиков layout artist. Можно ли назвать HTML-верстальщика художником?

Алексей Печенкин: По большей части наша работа заключается в добавлении материалов на сайт. Задачи, с которыми нам приходится работать, в большинстве случаев схожи. Это верстка статей, разделов и инфографики для публикации на сайтах. Нередко приходится решать и более сложные задачи. Например, верстка лендинга требует от специалиста больших усилий. Верстальщика нельзя назвать программистом или дизайнером. Это самостоятельная профессия.

Д.Д.: Какие задачи решает HTML-верстка с точки зрения владельца сайта? Чем может помочь верстальщик владельцу интернет-магазина?

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

Верстка новых элементов страниц, разделов, блоков, — все это тоже делают верстальщики. С помощью веб-верстки специалист создает статичную страницу, на которую при необходимости фронтэнд-программист может добавить интерактивные элементы.

Д.Д.: В большинстве популярных CMS есть визуальные редакторы публикаций. Значит ли это, что владельцы сайтов на WordPress, Drupal или Битрикс не нуждаются в услугах верстальщика?

А.П.: Нет, это не так. Визуальный редактор упрощает жизнь обычному пользователю: редактору, блогеру. С помощью редактора человек без каких-либо знаний верстки может добавить материал на свой блог, сайт, страницу.

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

Простой пример: штатный редактор самого популярного движка WordPress позволяет выделить отрывок текста с помощью полужирного начертания или курсива. В коде страницы можно увидеть, что выделение выполняется с помощью тегов strong и em соответственно. В некоторых случаях данную разметку предпочтительно делать с помощью тегов b и i. В визуальном редакторе WP нет таких инструментов, поэтому придется добавлять теги вручную. А это требует соответствующих знаний.

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

Д.Д.: Нужны ли с вашей точки зрения минимальные знания в области HTML-верстки маркетологам, копирайтерам, блогерам? Может ли журналист или копирайтер самостоятельно сверстать свой материал и опубликовать на сайте? Или каждый специалист должен заниматься своим делом?

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

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

А.П.: Да, в первую очередь можно просмотреть страницы на различных разрешениях и устройствах, а также просканировать страницу в валидаторе. При плохой верстке будут сразу заметны все грубые недочеты, которые оставил верстальщик. Что касается самого кода, то тут человек без знаний никак не определит качество.

Проверить отображение страницы на экранах с разным разрешением можно с помощью сервиса Screenfly. Проверить страницу в разных браузерах можно с помощью Browsershot.

Д.Д.: Читатели интересуются возможностью обучения HTML-верстке. Каждому ли дано стать хорошим специалистом в этой области? Какие качества необходимы хорошему верстальщику?

А.П.: Да, я думаю любой может этому научиться. Главное, чтобы было желание и терпение. Если что-то не получается сразу, то нужно просто больше практиковаться. Все зависит только от вас.

Д.Д.: Где учат верстке? Это очные учебные заведения, онлайн-курсы? Можно ли научиться самостоятельно с помощью учебников и пособий?

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

Получить знания и научиться верстать не составит труда. Главное, больше интересоваться тематикой и практиковаться с полученными знаниями.

Д.Д.: Какой набор знаний нужен хорошему верстальщику?

А.П.: Хорошему верстальщику в первую очередь нужно следить за новостями в мире IT, за всеми новинками и технологиями, которые время от времени появляются в этой сфере, так как веб не стоит на месте. Поэтому верстальшикам приходится постоянно учиться и повышать свою квалификацию. Если говорить про базовый набор знаний, то это HTML и CSS, а также хотя бы базовые знания Javascript (Jquery).

Д.Д.: Спасибо за информацию.

А.П.: Пожалуйста. Читателям успехов в обучении.

Где можно научиться верстке

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

Обучиться веб-верстке помогут следующие ресурсы:

Онлайн-курсы для начинающих и продолжающих

Бесплатный курс «Основы HTML и CSS» от «Нетологии». Пять часовых занятий познакомят вас с азами HTML и CSS. Курс будет полезен не только для будущих верстальщиков, но и для всех специалистов, работающих в сфере интернет-маркетинга.
Бесплатный видеокурс по HTML и CSS от WebForMyself.com подойдет пользователям с любым уровнем подготовки. Его можно рассматривать в качестве первой ступени обучения для будущих верстальщиков или инструмента повышения квалификации для блогеров, журналистов или администраторов сайтов.
Онлайн-курс «Базовый HTML и CSS» от Html-academy.
Полугодовой курс «Профессиональная верстка сайтов по современным стандартам» от Geekbrains позволит вам удаленно обучиться профессии верстальщика.
Если верстка вас заинтересует, продолжить образование можно на курсе «Нетологии» «HTML-верстка: с нуля до первого макета». После получения диплома можете смело называть себя начинающим верстальщиком.

Полезные тематические сайты

Сайт htmlbook.ru. Этот информационный хаб будет полезен как для будущих и начинающих верстальщиков, так и для опытных специалистов. Данный ресурс для верстальщиков — то же самое, что «Серч» для сеошников и блог «Текстерры» для интернет-маркетологов. Обратите внимание на форум.
В блоге верстальщика Юлии Паниной вы найдете универсальные премудрости о верстке, поиске, работе с популярными CMS. К сожалению, журнал обновляется не очень часто. Но здесь опубликовано такое количество материалов по теме, которого хватит на целую книгу.
Освоили базовую информацию? Тогда развивайтесь и ищите полезную информацию на «Хабре». Куда же без этого ресурса, если вы решили стать технарем?
Css-live.ru. Этот ресурс будет полезным для дизайнеров, верстальщиков и веб-программистов.
Справочный хаб для верстальщиков от студии Артемия Лебедева.
Консорциум всемирной паутины. Эта организация занимается разработкой и валидацией интернет-стандартов. Будущим и состоявшимся верстальщикам будет полезен валидатор разметки.

Очные курсы по веб-верстке

Если вы хотите обучаться очно, запишитесь на месячный курс «Верстка для начинающих» от CubeComp Development. Занятия проходят в Москве.
Еще один очный бесплатный курс для начинающих верстальщиков предлагает учебный центр «Специалист» при МГТУ им. Н.Э. Баумана.

Найти очные курсы верстальщиков в своем городе вы сможете с помощью поисковых систем.

Книги по веб-верстке

«Изучаем HTML 5», Б.Лоусон, Р.Шарп. Вы можете приобрести эту книгу в электронном или бумажном формате.
«CSS. Каскадные таблицы стилей. Подробное руководство», Э.Мейер. Эта книга считается классикой, с которой должен ознакомиться каждый верстальщик.
«HTML и CSS. Путь к совершенству», Б.Хеник. Еще один учебник, обязательный для начинающих специалистов.
«Web-дизайн по стандартам», Д.Зельдман. Книга предназначена для специалистов, у которых есть базовые знания HTML и CSS. Она была издана более 10 лет назад, но остается актуальной.
«HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера», Николай Прохоренок.

Англоязычные ресурсы

Знание английского языка считается чуть ли не обязательным для верстальщика. Один из аргументов — самые современные и актуальные книги и статьи появляются сначала на английском, а потом их переводят на русский. Если вы спокойно общаетесь на иностранном языке, вам пригодятся перечисленные ниже ресурсы.

W3School.com. Этот ресурс можно использовать в качестве справочника по верстке. Его можно назвать англоязычным аналогом htmlbook.ru. Зарубежные специалисты не рекомендуют использовать сайт для обучения верстке, хотя на нем есть уроки по HTML и CSS.
Learn to code HTML and CSS. Это полноценный онлайн-учебник, который поможет овладеть азами верстки.
Гайд по веб-верстке для начинающих. В этой огромной статье-руководстве от Айана Ллойда рассматриваются практически все вопросы, связанные с обучением профессии верстальщика. Вы узнаете, каким программным обеспечением лучше пользоваться, как размечать страницы, как работать с таблицами стилей и многое другое.
Activejump — сайт-тренер по HTML и CSS. Это не просто онлайн-учебник, а интерактивный курс, в рамках которого вы можете самостоятельно получить знания и сформировать умения в области верстки.
В видеоблоге Channel 9 вы найдете 21 видеоурок по HTML и CSS от разработчиков Microsoft. Курс предназначен для новичков, которые хотят стать профессионалами.
HTML5 Tutorial. Еще один сайт-учебник по верстке для начинающих.
Intro to HTML and CSS от Khan Academy. Еще один бесплатный интерактивный учебник для начинающих верстальщиков.

Вы можете выбрать один или несколько ресурсов, чтобы удаленно или очно обучиться верстке.

Стать верстальщиком может каждый

Обучиться HTML-верстке под силу каждому человеку. Если вы планируете овладеть новой профессией, придется погрузиться в мир HTML, CSS и JavaScript, следить за изменением стандартов и технологий и много практиковаться. Учиться можно очно и заочно, платно и бесплатно, с наставником или самостоятельно. Эти возможности можно реализовать с помощью предложенных выше учебных ресурсов.

Завершающий подзаголовок статьи можно сформулировать и так: стать верстальщиком должен каждый. Базовые знания HTML и CSS пригодятся всем специалистам, работающим в интернет-маркетинге. Блогер, журналист, копирайтер, маркетолог, владелец сайта должен уметь самостоятельно разметить и опубликовать контент. Конечно, речь идет о стандартной разметке и стилях.

kak-stat-verstalshchikom-ili-pochemu-azy-verstki-dolzhny-znat-vse

texterra.ru

Верстка текста для статьи! Html теги, оформление на примерах из моего блога

Здравствуйте, друзья!

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

Вот именно для наглядного представления и даже возможности скопировать/поэкспериментировать, я и приведу здесь наиболее характерные и показательные тэги, основываясь на опубликованных на моем блоге статьях.

Также в конце статьи немного остановлюсь на самых характерных ошибках, которые нахожу в присылаемых вами публикациях.

Коротко о тэгах

Эта статья будет коротенькой, что для меня не характерно 😊 Поскольку предназначена она для “своих”, то есть тех, кто проходит бесплатный тренинг в рамках необычного проекта “Одна семья”. и не дошел еще до сорок пятого шага (почему 45-го? А вот узнаете, когда дойдете 😁 )

На этом тренинге мы заняты по самую макушку созданием собственных блогов-дневников, благо за обучение не берут ни копейки!

Получить такой “подарок” от команды опытных коучей, успешно развивших свои собственные ресурсы и взявшихся научить всех желающих, как создать и продвинуть свой интернет-ресурс до гарантированного денежного результата, “пассивного дохода”, дорогого стоит! 💵

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

На момент написания этой статьи в проекте “Одна семья” уже зарегистрировалось более 4800 человек и число их растет день ото дня. Так что семья у нас многодетная!

Впрочем, статья будет интересной всем, кто хочет посмотреть примеры написания тэгов в конкретных статьях. 🤔

Вообще “тэги”, это специальные команды, позволяющие разметить с помощью html-кода веб-страницу или, например, создать метки на основе ключей для улучшения навигации по сайту, ну и так далее.

Говоря по простому и применительно к нашему случаю, тэги это специальные команды, которые позволяют браузеру отобразить вашу статью в том виде, в каком вы ее оформляете.

Потому что не достаточно просто ввести текст в редактор и опубликовать его на блоге. Чтобы машина поняла, что вот эти слова нужно выделить курсивом, а эти жирным, а вот те — это вообще ЗАГОЛОВОК, эти самые слова нужно обозначить в редакторе соответствующими, понятными ей метками — тэгами.

Примеры:

1) в данном случае мы имеем в редакторе заголовок “ИНТЕРЬЕР САНАТОРИЯ” в открывающем и закрывающем его тэге <h> и последующий за ним абзац текста в тэге <p> (по треугольным скобкам машина определяет, что это тэг):

Выглядит эта абракадабра в опубликованной статье так:

2) ну а здесь заключаем текст в элемент оформления “цитата” тэгом <blockquote>, плюс к этому еще и включаем в него ссылку на одну из опубликованных ранее статей:

Вуаля:

Верстка статей

Все это очень подробно, с примерами описывает в своих видео Владимир Белев в шаге № 12 тренинга и в последующих шагах.

Думаю, вы с ними уже ознакомились, скачали редактор, заглянули на свою страничку “Типографика” и написали на блоге свою первую статью “О себе” с помощью тэгов, показанных Владимиром. 👌

Отлично, с первой статьей вас, коллеги!

Поскольку в тренинге я по ряду причин позиционируюсь как “активист” (со школы это слово не люблю), меня довольно часто в чате ВК нашей группы просят прислать тэги конкретных примеров оформления из моих опубликованных статей.

Надо сказать, что сервис SmartBlog PRO, которым мы пользуемся в тренинге и на котором создаем свои дневники 📘, дает нам полностью готовый блог со всеми необходимыми причиндалами:

надежный хостинг и настроенный сервер с необходимыми плагинами;
продвинутую тему оформления;
типографику с элементами оформления;
всплывающие картинки (!) без дополнительных плагинов;
адаптивность под различные размеры экрана;
микроразметку;
чистый код темы оформления;
карту сайта;
политику конфиденциальности;
подписную форму и много чего еще (я и половины слов тут не знал до тренинга).

Подобный продвинутый движок, доступный пока только участникам тренинга, позволяет нам не отвлекаться от основной задачи: написания контента.

Практически уже на днях выйдет, наконец, долгожданный графический редактор, который позволит ленивым совсем избавиться от “головной боли” тэгов 👏 или пользоваться двумя редакторами (и графическим, и html), кому как удобно…

html-редактор помогает иметь чистейший код в своих статьях без какого либо лишнего “безобразия”! Что позволяет поисковым машинам без загвоздок “читать” ваши статьи, то есть индексировать их.

Необходимость их ввода “вручную” просто отпадет благодаря тем инструментам, которые будут в графический редактор встроены. И в этом редакторе блога мы сразу будем видеть текст так, как он будет отображаться на блоге!

Мне уже приходилось работать в подобной штуке, свои первые статьи я с его помощью и верстал. Вещь!

С его выходом данная статья, как и html-редактор вроде бы потеряют актуальность, но… Учитывая свой прошлый опыт и рекомендации коучей, хочу сказать: учитесь, учитесь работать с тэгами, ибо всякое бывает!

Не раз приходилось мне разбираться с расплывшимся текстом и сбежавшими шут его знает куда картинками. 👨‍🎓

А поскольку тренинг не имеет поддержки (условно не имеет, поскольку чат в ВК уже любую поддержку переплюнул, спасибо Светлане Дешеулиной и другим активистам), разбираться с этим придется вам самим.

Поэтому знание тэгов и опыт работы с ними нам, блогерам, совершенно необходим!

Как говорили мои преподаватели в институте: “Вы все равно ничего не запомните, из того, что мы вам преподаем, но, по крайней мере будете знать, что и где искать, когда приспичит!” 🤔

Вижу, вы уже зеваете, поэтому перейду наконец к конкретным примерам!

Конкретные примеры

Дублировать Владимира Белева и объяснять, как пользоваться Типографикой и какой тэг что означает, я не буду. Надеюсь, понимание что и как делается при верстке у вас уже есть.

Рисунки

Начнем с самых “ходовых” вопросов — рисунков. Наиболее разгулялся я с рисунками в статье “Отдохнул и подлечился в Решме”. Из нее и возьмем примеры.

Пример №1

Тэги:

<p><a href=»/backend/uploads/2018/06/Reshma_Skrin.jpg»><img src=»/backend/uploads/2018/06/Reshma_Skrin.jpg» alt=»» /></a>Сайт удивил: очень сочно и доходчиво, большой список медицинских процедур и программ, живописные фотки окружающей природы и внутреннего убранства санатория.</p>

<p>Тут же посетили и 3Д тур по как самому санаторию, так и по некоторым номерам. Ничесе! Красочные ландшафты и явно не любительские обзоры обещали манящий отдых и разнообразное лечение. </p>

<p><a href=»/backend/uploads/2018/06/Bezymyannyj-1.png»><img src=»/backend/uploads/2018/06/Bezymyannyj-1.png» alt=»» /></a>Ну, нас то не проведешь на мякине! Видали мы уже заказные отзывы и красиво оформленные сайты глядели… Действительность только, честно говоря, далеко не всегда с обещаниями совпадает!</p>

Здесь хочу обратить ваше внимание на тэг <p> </p> вставляющий «пустой» абзац, что может пригодиться, если например рисунок налезает на нижележащую рамку. Тогда пустой абзац между ними поможет им разбежаться.

Пример №2

Тэги:

от Главного корпуса уже небыло видно этих зданий.</p>

<p>Выглядел Главный корпус точь в точь так, как на фотографиях: <em>огромный, необычный,</em>

Пример №3

Тэги:

укладывать на пол плитки мраморные… </p>

<p><a href=»/backend/uploads/2018/06/Proekt-bez-nazvaniya-Vremya-0_01_5101.png»><img src=»/backend/uploads/2018/06/Proekt-bez-nazvaniya-Vremya-0_01_5101.png» alt=»» /></a>Необычные работы палехских мастеров и живописцев по стенам, большое количество раритетов и образцов народных промыслов было расставлено в по стеллажам и витринам (часть этих работ можно было здесь же и приобрести). Конечно, я просто обязан показать вам это на фотках?</p>

<p>На редкость ВЕЖЛИВАЯ администраторша тут же оформила нам документы и проводила

Здесь приметьте: во втором ряду рисунки выровнены по высоте

Пример №4

Тэги:

однокомнатный номер:</p>

<p>Позже заснял я и <em>двухкомнатный</em> номер (с

Пример №5 (последний)

Тэги:

фойе. Шампуры с решеткой получил напрокат в этом же магазине.</p>

<p>Цветы, чрезвычайно ухоженные, сечас же привлекли внимание моей Татьяны

В первом графическом редакторе при выстраивании изображений в ряд нарисовалась было одна проблемка: при просмотре разворачивалась не кликаемая фотка, а соседняя с ней 😳 Решил проблему набивая между ними пробел. Посмотрим, будет ли такая же фиг… проблема в новом редакторе!

На этом закончим наконец с рисунками и перейдем к шрифту.

Шрифт

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

Моему блогу предстоит скоро пройти общую модерацию, в результате которой все оформление статей будет приведено к одному знаменателю.

Однако сейчас, пока этого еще не произошло, покажу примеры из статьи “Отзыв о Рукапча”,. где я вволю поэкспериментировал со шрифтом (и получил за это нагоняй). 👹

Пример №6

Тэги:

<p>Фигасе! Доктор вэб не забыл случайно, что здесь я хозяин, так то? Это что: <span><em>“Не рекомендуемый сайт”</em></span>?! Ок! Отключим в настройках (Но, кто его знает, а вдруг послушать его нужно было?..)</p>

<p>Ладно, теперь на сайт и зарегистрирумся тут как работник (снова капча), обращаем внимание на то, что интерфейс должен быть русским <span><em>“RuCaptchaBot для для пользования рукапчами”</em></span>.</p>

<p>Теперь мы получим двойное рабочее окно, подтвердив на своей почте регистрацию. В этик окнах будем получать прямоугольные капчи квадратиками и кликать по ним мышкой. Средняя цена капчи тут <strong>5,5 копеек</strong>. Работать преимущественно и будем в этом окне.</p>

Пример №7

Тэги:

<p><div><span>Пришло время и резюмировать:</span><br /></p>

<p>1. <span><em>рекомендовать капчу не могу</em>,</span> как настоящий и реальный способ заработка;<br /></p>

<p>2. Однако, если вы своего дела в интернете еще не нашли, <em><span>могу рекомендовать </span></em>для начала взяться за капчу.</div></p>

Ну и достаточно со шрифтом, кому мало, напишите, добавлю.

Рамки, цитаты, сноски, ссылки

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

Пример №8 (цитата) из статьи “История ремонта полов”

Тэги:

<blockquote>А вот тут будет не так! А здесь хочу как вот тут! (совал мне под нос фотки)!</blockquote>

Цитата, как цитата, не стал бы я ее приводить, но скажу вот о чем: вставляемые в текст цитаты, анекдоты, пословицы и тому подобные заимствования совершенно портят уникальность статьи. А она должна быть 100%!

Поэтому здесь есть три варианта 👌

📌 Первый: перефразировать цитату. В статье “Как нас развели на косметике DeSheli” я использую массу цитат, но все они перефразированы!

📌 Второй: оформлять это дело в виде рисунков, например:

📌 Третий вариант: создавать РИСУНКИ в виде обычных для вашего блога цитат. У меня есть несколько таких штук в разных статьях, например:

Да-да, это рисунок цитаты. Посмотрите на него в статье “О технарях и гуманитариях”, наведите на него курсор, вместо текстового он останется указывающим.

Не надо мучиться с Фотошопом и Paint, просто наберите эту цитату в черновике и при просмотре на блоге сделайте ее скрин, а затем вставьте в статью, как рисунок.

Пример №9 (сноска) из статьи “Первый отчет”

Тэги:

<div>Да и я знаю еще далеко не все, много у меня вопросов, ответы на которые я выясню уже в<a href=»http://sadykovr.ru/pervyotchet» target=»_blank» rel=»noopener»> тренинге “Одна Семья”</a>.</div>

В эту сноску вставлена ссылка на другой сайт. Как вы наверное догадались, на презентационную страницу тренинга “Одна семья”! Причем здесь задействована моя партнерская ссылка, полученная и укороченная через trimlink.pro — один из инновационных инструментов для блогеров.

Не удивляйтесь смайлику. Эта непримечательная картинка при проверке на уникальность дала многомиллиардное совпадение с… «КАЗИНО»! Не знаю почему, но про уникальность картинок мы еще поговорим ниже.

Ну и приведу еще яркую рамку, захватив ссылку на мою же статью “О себе”.

Пример №10 (яркая рамка) из статьи “Что взять в командировку”

Тэги:

<p>Об этом я писал в <a href=»http://rosadykov.ru/o-sebe/» target=»_blank» rel=»noopener»>“О себе”</a>. Просто не помню уже, когда я в такой задрипаной квартире жил в последний раз.</p>

<div>Предлагаемые сейчас посуточно квартиры подразумевают набор само собой разумеющихся удобств: телевизор, стиралка-автомат, посуда и холодильник, ВайФай и свежее белье. Ну и чистота конечно, хотя и сомнительная.</div>

Пример №10/1 (внесен 26.11.18)

Тэги:

<p>Ягодное и грибное изобилие было (и есть) невероятным. Зато зимы тут суровые, снежные. А уж как катались мы с горок, благо здесь их создала сама природа превеликое множество!<br />
На самодельных санях, сколоченных из фанеры, по двое, с поросячьим визгом неслись по заснеженным лесным склонам, с трудом уворачиваясь от вековых пихт и елей. </p>

В этом примере показан тэг <br /> который позволяет перенести предложение на следующую строку в пределах одного абзаца. Зачем? Ну, иногда мне кажется не логичным разбить один большой абзац на два маленьких…

Что же, с примерами я пожалуй закончу.

Распространенные ошибки при оформлении статей

Напоследок скажу еще о самых частых ошибках, на которые мне приходится указывать в присылаемых статьях.

Анонс это не начало статьи! Он должен кратко и сочно отражать суть вашей статьи и заинтересовывать. При этом он должен быть уникальным по отношению к тексту самой статьи, то есть анонс не нужно дублировать, как первый абзац в статье. Его размер 350 символов с пробелами (+/- 10).

Всего в статье должно быть не меньше трех заголовков h3. Их может быть и больше, если хотите, но отделенных друг от друга как минимум тремя абзацами. Заголовки h4 (если они есть) должны стоять ПОСЛЕ заголовков h3, и так далее…

При этом заголовок статьи h2 считается первым заголовком, поэтому после тизера должно быть минимум три абзаца, лишь затем идет заголовок h3 к общей части, затем к заключению. Заголовок h2 в статье должен быть только один!

После заголовка не должны сразу идти подзаголовки или выделенные элементы текста (например, жирным шрифтом), между ними нужен минимум один абзац текста. Точки в конце заголовков НЕ СТАВЯТСЯ! ☝

(Внесено 26.11.18) А вот этот пример меня заставила внести моя совесть… Недавно встретилась мне статья, где автор выделяет текст не жирным, а как ЗАГОЛОВОК (т.е. тэгом h)! И вспомнилось вдруг, что и сам я этим грешен, не моя ли статья послужила примером?! (Вот я негодяй, сам косячу и других с панталыку сбиваю…)

Речь идет о странице «Контакты» на моем блоге. В ней я не только развлекся с цветом, курсивом и жирностью (говорю же, негодяй!), но и умудрился трижды выделить текст как заголовок. Дело то было еще в кейсе…

Делать этого категорически нельзя, звездюлей я получил, но исправить руки не дошли пока (как всегда). Вот короткая выдержка из наставлений сенсея по этому поводу:

Для SEO важна структура текста. Заголовки (деление текста на смысловые сегменты) происходит установкой заголовков (h2-h6).
Если использовать заголовки где попало — это плохо сказывается на СЕО-оптимизации. Есть определённые тэги и их необходимо правильно использовать по назначению.
Тэги заголовков нужно использовать для разделения, скажем, параграфов в вашей статье. Но эти теги точно не стоит использовать как вздумается, например, только лишь для увеличения шрифта в каком-то месте текста.
В целом, статьи на всех блогах оформляются стандартно: есть заголовки и подзаголовки; внутри идёт текст; рамки где нужно; в тексте могут быть использованы курсив, жирный и подчёркнутый варианты шрифтов.
Увеличение шрифтов обычно не используют, цветовое оформление шрифтов обычно тоже не используют. Те абзацы, к которым нужно привлечь внимание, заключают в рамки. Для всего остального настроен уже изначально шаблон, например, задан стандартный для всех статей и страниц сайта шрифт и одно оформление.

В общем, не любят машины, когда выпендриваются. Нравится им, когда все «правильно» и «по полочкам»! Ну и ладно… Поговорим теперь об абзацах.

Статью необходимо разбивать на абзацы. Абзацы я делаю из 2-4 не слишком длинных предложений или одного большого. Не больше!

Продвинутые seo-шники советуют делать абзацы на 7-10 строчек, не больше. Но мне и этого кажется много, для меня четыре строчки — самое то! Ну, шесть еще туда-сюда…

Читать огромные абзацы не хватит никакого терпения и взгляд просто начинает скользить по ним не задерживаясь. Пожалейте читателя и свой труд. 😒

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

Можно разумно использовать по тексту эмодзи (Emoji), то есть смайлики и другие миникартинки, также расставленные по смыслу.

В данной статье их использовано предостаточно, в тех местах, где нет картинок, рамок, сносок… Согласитесь, так читать намного веселее! Что-же, оформление статьи — дело индивидуальное, главное не переборщить.

И если я вставляю элементы оформления или картинки через 3-4 абзаца, а между ними один эмодзи, то вам вероятно это может показаться чересчур аляписто 😊

Ссылки! Используемые в статье ссылки вставляются гиперссылками в словосочетания или слова, то есть не вставляются в текст в полном виде “как есть”, с ttps://…

Насчет ссылок… Некоторые новички, уже имеющие за плечами опыт применения партнерских и реферальных ссылок на предыдущих ресурсах, начинают вставлять их в текст уже со второй, а то и с первой статьи! О дисциплине на тренинге говорится много; как, где и какие ссылки мы будем использовать, узнаете в свое время на соответствующих шагах. 👨‍🎓

Не бегите впереди паровоза! А то будете потом руками всплескивать: почему, мол, ГуглАдсенс мой блог не модерирует?! А может потому и не модерирует, что ваши коммерческие анкоры на молодом блоге ему не внушают доверия… Идите по шагам тренинга планомерно и будет вам удача в делах и счастье в жизни!

Раз коснулись заголовков, есть такое правило: идеальный заголовок статьи должен быть не более 65, максимум 80 символов (с пробелами). Потому, что именно столько влазит в видимый текст названий, в выдаче поисковыми системами. Об особенностях построения сниппетов в Яндексе и Гугле узнаете позже, пока так поверьте…

Иногда, из-за жадности до ключей, заголовки разбабахивают до 90-100 символов, при этом портится структура предложения, заголовок становится неудобочитаемым. Поэтому нужно сначала писать, как льется душевный поток, потом уже вмонтировать ключи не искажая смысл и красоту изложенной информации. Если действовать по другому, то получаются не совсем человеческие заголовки. Вообще ужасные! 🤦‍♀️

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

Вообще, одним из практических обучающих инструментов тренинга является возможность тщательно изучать блоги “продвинутых” (себя к ним не причисляю). 😀

Например блог Петровича, который модерируется тренерами и является образцово — показательным. Или статьи на блоге И. Колпакова Loxotrona.net.

Присматривайтесь ко всему: тизерам, анонсам, оформлению, содержанию.

Уникальность. Знаю случай, когда одобрение от Google AdSense человек получил только тогда, когда перепроверил все свои картинки (в том числе скрины и личные фотографии) на уникальность.

Сделать это можно в сервисе “Картинки” Гугла, просто перетащив в него свою картинку. При этом выявленных совпадений должно быть не более четырех!

Как уникализировать картинки, В. Белев рассказывает в одном из шагов. Помните, что вес вставляемых картинок должен быть менее 1Мб, иначе они просто не вставятся при верстке в нашем редакторе! 📕

Самым же оптимальным размером у seo-шников (если вы не фотограф, презентующий свои работы, или это не подробные карты местности, где важна супер четкость) считается 0,3Мб.

Почему? Вес картинок сильно сказывается на скорости загрузки страницы. Первым всегда загружается текст, и не каждый читатель будет ждать, пока на странице полностью загрузятся все картинки. Что касается размеров тизеров, соотношение сторон тизерной картинки: 16/9. Тогда тизер смотрится пропорционально, не растягивается и не обрезается, как попало. 🏞

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

Такое может случиться, если расширение у картинок прописано большими буквами (например: 1.JPG вместо 1.jpg). Попробуйте прописать расширение маленькими буквами.

Вторая возможная причина: если страница ещё не до конца загрузилась и в это время попытаться открыть картинку в полный размер, то она также откроется неправильно.

Уникальность текста: ее надо проверять ДО выкладки статьи на блог, при этом она должна составлять 100% (но не менее 95% в особо тяжелых случаях).

Например, в данной статье я использую в примерах куски текстов из опубликованных мною ранее статей, поэтому первоначально уникальность этой статьи была всего 65% 🙀 Делать нечего, пришлось эти куски текстов слегка перефразировать…

Это также может стать причиной того, что ваши статьи не будут индексироваться машинами (или еще чего похуже), да и Адсенсу это может не понравится (хотя точных алгоритмов его “одобрям” не знает никто).

Очень много замечаний приходится на орфографию и пунктуацию. Не надейтесь на свою грамотность. Русский язык непобедим!

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

Ничего лучше него я пока не встретил, хотя и не обращаю внимания на его самодовольные требования избавиться от просторечных и вышедших из употребления слов. 😛

В Word-е статьи не набираю, хотя он мне более привычен, а к ГуглДиску приходилось приспосабливаться. Но это была одна из первых рекомендаций сенсеев кейса, вроде там при копировании текста из Word-а в редактор косяки случаются. Так и вошло в привычку.

Кроме Word-а использую один из онлайн-сервисов. Сервисов таких много и каждый пользуется тем, к которому привык. Мой называется Text.ru и кроме орфографии позволяет проверить уникальность текста, посмотреть проблематичные куски и понять, с чем они конкретно совпадают.

Заодно посмотреть количество символов с пробелами и без, подобрать синонимы (актуально при исправлении уникальности).

Некоторые его функции пока не использую, но без сомнения они еще пригодятся в дальнейших шагах тренинга. Например SEO-анализ текста и проверка сайта на уникальность. 🧐

На этот ресурс ссылаются в тренинге, меня он вполне устраивает, поэтому можете считать это моей личной рекомендацией.

Кроме того, сайт относится к “буксовским”, то есть на нем можно подзаработать копирайтингом и рерайтингом, если есть время. Тем более, что те знания и навыки, которые нам дают на тренинге, вполне позволяют со временем начать заниматься фрилансом, 💰 это я на себе проверил, о чем писал в статье “Первый отчет о развитии моего блога”.

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

Немного о тренинге “Одна Семья”

Теперь скажу пару слов о бесплатности Проекта “Одна Семья”. По этому поводу также задают вопросы, хотя в группе в ВК, в разделе “Обсуждения” есть подробнейшая раскладка по этому поводу и в чате все это не один раз обсуждено (не читают, что ли?!)

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

Однако, для создания и раскрутки блога, да и любого другого ресурса в интернете, каждый желающий начать свое дело должен приобрести обязательные инструменты: домен, укорачиватель ссылок, болванку блога на движке, плагины для оформления блога и функционал, различные сервисы и прочее (все это разжевано в тренинге).

Всего этого добра в инете хватает, но хватает и желающих завести свое дело, поэтому стоит все это офигеть как дорого, да и покупки не всегда качественные.

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

Я обычно привожу следующий пример, цитирую из переписки (орфография сохранена 😁 ):

Ок! у меня дочь, участница и победительница многих российских и даже зарубежных художественных выставок (а мы вообще в глуши живем чтоб ты понимал), ходит в художку к преподу 👨‍🎓 (заслуженный художник Казахстана, человек очень опытный и со связями)

и мы покупаем те не дешевые и не обычные кисточки, краски и холсты (и много чего еще), которые он требует. И даже говорит где именно их купить. и даже сам их привозит. Ничего с этого он не имеет и магазины ему за это не платят, но он хочет чтобы его ученики пользовались лучшими инструментами! И это видимо окупается такое отношение и его и учеников и родителей. Наверно это и на качестве их картин и скульптур сказывается, не знаю 🙂

инструменты, которые нам тут будут предлагать — действительно одни из лучших+не дорогие! По крайней мере сейчас. а подобные инструменты придется покупать все равно, если хочешь заниматься блоговедением. Без них не создашь блог 😳

хочешь — можешь искать другое, дешевле например, но тренинг — это препод, который требует чтобы кисточки были лучшие, не из магазина «все за 30», тогда и результат будет тот который нужно ☝

Ну вот, теперь точно закончил!

Эх, обещал же, что маленькая статья будет, так нет, на 23 страницы наворотил… Честно, планировал в пять уложиться, только тэги прописать! Понесло опять Остапа… Уж простите старого сварщика, надеюсь вам не очень скучно было!

Если что осталось не понятно или хотите, чтобы я дополнил статью другими примерами, пишите в комментариях.

Для тех же, кто не знаком еще с проектом “Одна семья”, загляните на нашу страничку и почитайте, чем живет тренинг в ВК, кто каких результатов добился и кто что обо всем этом думает. Не беспокойтесь, тренинг действительно бесплатный и заманухи тут нет.

С уважением, ваш Роберт 🙂

rosadykov.ru

Верстка и оформление статей на сайте

Оформление текста статей на сайте

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

Стоит отметить, что несколько лет назад еще можно было пренебрежительно отнестись к оформлению статей, но сегодня наличие ошибок может негативно отразиться на отдельно взятой странице.

Цвет текста должен быть контрастен к фону. Для удобного чтения соотношение цветов должно быть 5:1 и более. При этом чем выше показатель, тем проще читать объемные статьи. Лучше всего выбирать черный цвет текста и белый фон.

Если текст будет легко читаться, то пользователь проведет на сайте больше времени, что в свою очередь отразится на поведенческих факторах. Если посетитель будет вовлечен, то он может перейти на следующую статью или оставить комментарий. В сумме все эти факторы положительно влияют на ваш сайт.

Теперь запоминаем важный момент — статья должна быть одинаково качественно сверстана как для человека, так и для поискового робота.

Для наглядного примера возьмем фрагмент текста из правовых документов Яндекса в разном оформлении.

А ниже представлен оригинальный фрагмент. С соблюдением интервалов, выравниваний, оформления подзаголовков и списков.

Первый текст так же можно прочесть, но второй будет читаться и восприниматься проще. Также верстка на втором примере является правильной с точки зрения поисковика, однако поисковые системы видят её иначе.

Выравнивайте текст по правому краю, это позволит проще воспринимать текст. Не используйте автоматическое выравнивание по ширине, так как это увеличивает отступы между словами и текст ужасно смотрится.

В случае неправильной верстки текста могут быть затруднения с выводом ваших статей на лидирующие позиции поисковой выдачи. Таким образом, даже качественная семантика не поможет вам, а поисковые системы при удобном случае могут наложить один из актуальных фильтров. Разумеется, это не затрагивает 100% сайтов с некорректной версткой, но нельзя игнорировать тот факт, что правильная верстка — это плюс в оптимизации статьи.

Делайте так, чтобы можно было визуально легко отделить один абзац от другого. Используйте теги <p> или <br>.

Правила верстки не просто так были придуманы, она помогает улучшить восприятие и читабельность текста, что в свою очередь отображается на поведенческих факторах (количество кликов, время, проведенное на странице, глубина просмотра, комментирование, расшаривание). А все это влияет на конверсии и потенциальный доход.

Повышаем ценность статьи

Не забываем о том, что кроме читабельности статья должна быть еще и информативной. Следовательно, стоит давать максимальный ответ на вопрос пользователя.

Кроме того, рекомендуется использовать дополнительные элементы, которые позволят улучшить восприятие информации:

калькулятор;
опросы;
тесты;
статистика;
инфографика;
фотогалерея;
таблицы;
рейтинг записи;
документы и файлы.

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

Подзаголовки позволяют привлечь внимание читателя и понять, о чем следующий раздел статьи. Они должны быть визуально заметны и при пролистывании текста сразу бросаться в глаза. Однако оформлять их стоит в общем стиле статьи, и ни в коем случае не выбирать для подзаголовков кислотные слова и написание через Caps Lock.

Дополнительное оформление

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

Если по теме статьи у вас есть видеоматериал, то разместите его там, где он будет наиболее уместен. Лучше всего, если вы сами создаете видео под свой контент.

Благодаря блокам привлечения внимания вы сможете выделить важную и полезную информацию, делая текстовую часть более заметной. Оформлять такие блоки можно индивидуально под конкретный тип записи, или использовать стандартные шаблоны под каждый случай, который хотите выделить (“Важно”, “Внимание”, “Полезно”, “Скачать”, прочие).

По сути вы можете дополнить свою статью любыми элементами, которые на ваш взгляд будут актуальны и информативны. Если это полезно для пользователя — это полезно и для вашего сайта.

Вывод

А вывод прост — делайте хорошо, оформляйте статьи грамотно, делайте контент удобочитаемым. Если статья будет полезна для читателя, и среди прочих конкурентов сможет выделиться, показав свои преимущества, то преимущество в борьбе за лидирующие позиции в выдаче явно будет за вами.

www.rush-analytics.ru

Памятка по базовой верстке статьи для Хабра без использования Markdown-разметки / Habr

На Хабре, по меркам старожилов, я совсем недавно, всего два года, но пишу активно, по возможности каждый день. Так вот, читая статьи, да и просто прокручивая ленту свежих публикаций как на Хабре, так и на GT, я понял, что многие просто не могут совладать с версткой текста и, как следствие, достаточно часто годные публикации хоронятся их же авторами из-за нечитабельности текста. Или отпугивает кривая КДПВ, или еще что произойдет.

Возможно, для опытных авторов пост покажется капитанским, мелочным, или еще каким, ведь главное содержание, но тем, кто хочет пройти песочницу и влиться в Хабра-сообщество, я уверен, он поможет не только написать что-то полезное, но и красиво свой труд преподнести.

Картинка Для Привлечения Внимания и выравнивание по левому краю

Так уж сложилось, что вся лента Хабрахабра выровнена по левому краю. По этой причине опытные авторы небольшие изображения оставляют слева или используют картинки шириной в 800-1000 px. Отдельно хочется заметить, что чуть ли не лучшим является соотношение КДПВ 2 к 1, т.е. изображения 800х400 px. Подобная пропорция позволяет SMM-щику соц. сетей не изгаляться с вашей картинкой (а то и вовсе искать что-то другое, более подходящее по размерам), а использовать оригинал, не нарушая задумки автора.

Даже если ваше изображение имеет меньшее соотношение сторон, например, 800х700, то постарайтесь уменьшить его высоту. Критическим порогом является 500-600px кроме исключительных случаев, когда КДПВ и в правду «тащит» или содержит полезную информацию (скриншоты интерфейса, например). Тут все достаточно прозаично: не у всех есть мониторы с разрешением 1920х1080 и, например, пользователь ноута с максимальным разрешением экрана в 1366х768 просто не оценит всех этих красот КДПВ размером 1000х1000. Но даже в случае, когда картинка несет полезную нагрузку в виде текста, например, можно сделать ее кликабельной, так всем будет проще.

Из-за того, что изображения редко бывают больше 500-800 пикселей в ширину, все стараются использовать выравнивание по левому краю. И вы старайтесь, сейчас объясню почему.

Когда пользователь скроллит ленту статей, его фокус внимания смещен в левую часть ленты, на начало заголовков, список хабов и кнопки для голосования. Если вы выносите картинку небольшого размера в центр, или, боже упаси, вправо, вы совершаете дешевый маркетинговый трюк «мы не такие как все и привлекаем внимание читателя через раздражающие факторы». На самом деле, такие приемы обычно заканчиваются для авторов печально.

Приведу пример опираясь на мою старую статью.

Правильное расположение КДПВ:

Неправильное расположение КДПВ:

Очень неправильное расположение КДПВ:

Обтекание текстом

Окей, с картинкой мы разобрались. 2 к 1, не шире 1000 px, выравнивание по левому краю. Но если картинка узкая, но подходящая к тексту? Что делать? Использовать обтекание, вестимо. Вот тут-то и было сломано уйма копий (таких, острых, с наконечниками) не одной сотней авторов. Совсем неопытные господа просто пытаются не переходить на другую строку и продолжать текст после кода вставки изображения, вот так:

Закономерно получая вот это:

Окей, нам нужно обтекание. Задается оно в классической хабра-верстке через align="side" внутри кода вставки:

&LT;img src="https://habrastorage.org/getpro/habr/post_images/832/8d3/0bd/8328d30bda5b014e848437e1eea3a654.jpg" alt="image" align="left"/&GT;
Используя такой код мы получаем:

Так, СТОП! А почему засосало еще один абзац, который у нас раньше был под катом? Он нам здесь не нужен, мы хотим только первое предложение! Для этого нам необходимо использовать &LT;br&GT; &LT;br clear="side"/&GT;, который очистит форму от применения align="left" там, где мы пожелаем. В форме редактирования текста код будет выглядеть вот так:

А после публикации мы получим вот это:

Если вы хотите, чтобы кнопка «ката» была не под картинкой, а сразу после текста, для которого вы прописали обтекание, сдвигайте &LT;br clear="side"/&GT; под &LT;/cut&GT;:

Не практикуйте обтекание текстом слева, а картинку справа. Как я уже говорил, лента выровнена по левому краю. Если поставить картинку справа, вы, опять таки, используете раздражающий многих ход «не такие как все».

Установка Хабра-ката

Да, я выделил этот пункт отдельно, потому что очень многие не уделяют этому достаточно внимания. Где ставить кат — дело ваше. Вопрос в том, как именно вы это делаете.

Суть в том, что после публикации статьи cut отображается как пустая строка. Таким образом, код &LT;cut/&GT; должен быть зажат между абзацами текста, чтобы его цельность не была нарушена:

Правильно:

Неправильно:

Как видно на скриншоте выше, при пустой строке до или после &LT;cut/&GT; в итоговом варианте мы получаем двойную пустую строку, что не есть красиво и визуально «разрывает» текст.

Заголовки, списки, текст и все-все-все, что ищут методом проб и ошибок

Отдельно стоит обозначить верстку заголовков, списков и кода. Суть тут, опять же, в повышении читабельности текста за счет правильной расстановки пустых строк. К сожалению, для многих верстка статей ведет себя не очевидно.

Например, после текста заголовка, который вы вписали в &LT;h5&GT; &LT;/h5&GT; пустая строка не нужна, т.к. она проставляется автоматом:

Если же вы поставите пустую строку в форме написания текста после заголовка, то у вас получится двойная пустая строка и у читателя будет создаваться впечатление, что заголовок больше относится к тексту над ним, чем под:

Также не совсем логично ведут себя и списки. Рассмотрим на примере.

Пункт списка №1
Пункт списка №2
Пункт списка №3
Пункт списка №4
Пункт списка №5

Как видите, отступ в строку над и под списком в наличии, все красиво, первый пункт списка не сливается с текстом выше. Но при верстке все выглядит не так круто:

Многие чисто интуитивно убирают пустую строку сверху и добавляют ее после списка, получая:

В некоторых случаях сверстанный список «зажимают» между абзацами, но тогда пункты «подпирают» текст над собой, сливаясь с ним, что значительно снижает читабельность и восприятие написанного как перечисление чего-либо (а ведь в списках по пунктам перечислением обычно и занимаются).

Цитаты ведут себя точно по такому же принципу. При цитировании через blockquote создается автоматический отступ снизу, но не сверху:

Крутая цитата.

Комментарий автора к крутой цитате.

Это же касается и кода:

Крутой код тут;
код;
еще код;
конец кода.

Комментарий к коду.

А выглядит на самом деле вот так:

В конце хотелось бы сказать, что оптимальная для понимания длина абзаца составляет 3-5 строк (проверить можно через предпросмотр статьи). При переводе англоязычных текстов приходится часто объединять несколько абзацев оригинала в один, так как многие зарубежные авторы имеют тягу к тезисному изложению по одному-два предложения, что превращается на Хабре в частокол из одиночных-двойных строк. Ну, а с остальным, я думаю, вы справитесь сами, так как красоты в виде цветного текста и, тем более цветных заголовков я не исповедую и вам не рекомендую.

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

Надеюсь, я написал хоть что-то полезное. Всем спасибо за внимание, Кэп полетел.

habr.com

9 ошибок в верстке статьи, из-за которых вы теряете читателей

Выравнивание правого края

Цвет текста не контрастен к фону

Незаметный подзаголовок

Неправильное соотношение верхнего и нижнего отступа в подзаголовке

Сложная структура

Неподходящий размер интерлиньяжа

Слишком широкое текстовое поле

Мелкий размер кегля

Отсутствие абзацев

Подведем итог

что это такое? Какие методы верстки бывают и какие программы используются.

Методы верстки

Программы для верстки

Какие проблемы возникают при верстке?

Как стать верстальщиком, или Почему азы верстки должны знать все

Что такое HTML-верстка и зачем она нужна

«Верстальщиком можешь ты не быть, но HTML знать обязан»

Что нужно знать администратору сайта, чтобы обойтись без верстальщика

«Верстальщик реализует идеи дизайнера»

Где можно научиться верстке

Онлайн-курсы для начинающих и продолжающих

Полезные тематические сайты

Очные курсы по веб-верстке

Книги по веб-верстке

Англоязычные ресурсы

Стать верстальщиком может каждый

Верстка текста для статьи! Html теги, оформление на примерах из моего блога

Коротко о тэгах

Верстка статей

Конкретные примеры

Распространенные ошибки при оформлении статей

Немного о тренинге “Одна Семья”

Рекомендации по вёрстке текста •

Как оформить текст, чтобы его дочитали до конца

Как я читаю текст

Смотрю на картинки и заголовки

Сканирую текст новости взглядом — удобно ли читать?

Читаю первые строки абзацев

Что такое вёрстка?

15 рекомендаций по вёрстке

Оставляйте «воздух»

Размещайте текст в колонки

Используйте заголовки и подзаголовки

Разбивайте текст на абзацы

В рекламных материалах используйте асимметрию

В официальных материалах используйте симметрию

Подбирайте и располагайте картинки грамотно

Будьте осторожны с цветом

Используйте не более 3-х шрифтов

Используйте сочетаемые шрифты

Используйте комфортные кегль и интерлиньяж

Выбирайте шрифты, подходящие к смыслу текста

Переносите текст правильно

Избегайте «висячих» строк

Используйте выноски

Несоблюдение рекомендаций

Верстка и оформление статей на сайте

Оформление текста статей на сайте

Повышаем ценность статьи

Дополнительное оформление

Вывод

Памятка по базовой верстке статьи для Хабра без использования Markdown-разметки / Habr

Картинка Для Привлечения Внимания и выравнивание по левому краю

Обтекание текстом

Установка Хабра-ката

Заголовки, списки, текст и все-все-все, что ищут методом проб и ошибок

Добавить комментарий Отменить ответ

Рубрики