Реклама в интернете
Рекламное интернет-агентство «Heika» в Санкт-Петербурге предлагает ряд эффективных рекламных решений.
Создание сайтов
Создание сайта – большой проект. Эффективность вашего бизнеса в интернете зависит от комплексного подхода к решению задач.
Продвижение сайтов
Мы создаем сайт, учитывая принципы оптимизации сайта и психологию пользователя (оптимизированный html-код, оригинальность дизайна).
О чём нужно помнить при наполнении сайта контентом
Для начала давайте разберемся, знаете ли Вы, что такое сайт на самом деле. Нажмите на клавиатуре Ctrl+U. И сразу Вопрос: что перед Вами открылось? Что это за символы: <html><head></head>….<body></html>?
Если Вы подумали о HTML тэгах, то Вы правы это именно они! HTML разметка - это основа сайта или то без чего современного сайта не может быть в принципе.
Зачем мне знать про HTML, ведь в любой системе управления сайтом ( CMS ) есть визуальный редактор кода?
Да есть, но не стоит сильно обольщаться. Если Вам нужен “добротный” сайт, который будет одинаково хорошо отображаться в разных браузерах и, что самое важное, более качественно читаться поисковыми роботами, Вам не стоит полагаться во всём на редактор кода!
Давайте рассмотрим один пример из наших будней, когда текст на сайт добавляет человек не знакомый с HTML, и всё делается из CMS в редакторе кода:
<h2 style="text-align: center;"> <strong> <span style="color: #0000ff;">Нужен этот трактор? Просто позвоните нам на бесплатную горячую линию </span><br> </strong> </h2> <p style="text-align: center;"> <span style="font-size: xx-large;"> <strong> <span style="text-decoration: underline;"> <span style="background-color: #ff6600;">8-800-00-00-900</span></span> </strong> </span> </p> <h2> <strong> <span style="color: #0000ff;">А еще, можно оставить заявку в разделе - Контакты</span> </strong> </h2>
А теперь этот же текст, но сделанный контент-менеджером знакомым с HTML:
<p style="text-align:center; color:#0000ff; font-size:22px; font-weight:bold">Нужен этот трактор? Просто позвоните нам на бесплатную горячую линию <br></p <p style="text-align:center; font-size:28px; font-weight:bold"> <span style="background-color: #ff6600;">8-800-00-00-900</span> </p>
<p style="text-align:center; color:#0000ff; font-size:22px; font-weight:bold"> <strong>А еще, можно оставить заявку в разделе - Контакты</strong> </p>
Как видите, получилось намного меньше текста (в первом случае около 700 знаков во втором примерно 400, что почти в два раза меньше), а в браузере результат вывода будет и в том и в другом случае одинаков. Кстати, второй вариант можно ещё уменьшить с помощью стилей, что уменьшит количество знаков ещё на 100 символов.
Что же получается, мне теперь надо учить HTML, там же десятки тэгов? Да и вообще зачем мне знать сколько символов в исходном HTML?
Количество знаков, по сути, не играет никакой роли, важна так называемая "чистота" кода. Отсутствие "чистоты" в коде может негативно сказаться на визуальном отоброжении контента в браузере, плюс не самым лучшим образом повлиять на "лояльность" поисковых систем при ранжировании сайта.
Что же касается того, необходимо ли изучить html для наполнения сайта контентом - нет, знать всё не обязательно. Более того, даже самый опытный веб мастер не знает всех HTML тэгов, так как их великое множество, а многие из них очень редко используются. Для того чтобы более-менее качественно наполнить сайт контентом, достаточно знать порядка 10 основных тегов.
Начнём с самых важных тегов, необходимых для нополнения сайта контентом:
<h1></h1>, <h2></h2>, <h3></h3>, и так до <h6></h6> - являются тегами заголовков, где главный и по сути самый важный заголовок - H1, наименее важный - H6.
<p>текст</p> - этот тег используется для создания абзаца в тексте.
<strong> - выделяет текст жирным начертанием.текст</strong>
<em> - выделяет текст курсивным начертанием.текст</em>
<ul><li>список</li></ul> - эта пара тегов создана специально для вывода на странице различных маркированных списков. Сам по себе <ul></ul> ничего не выведет, он нужен для того чтобы “сказать” браузеру, что в <li> находится маркированный список. По мимо <ul>, можно писать <ol>, тогда <li> будет выводиться как нумерованный список.
<img src=”” alt=”” /> - предназначен для отображения на странице сайта картинок. Этот тэг очень часто использоваться в наполнении сайта контентом. О нём следует знать как можно больше. В отличии от тэгов h1, p, em это одинарный тег, т.е. он никого не обрамляет, у него есть обязательный атрибут src в котором указывается ссылка на картинку, пишется так: <img src=”ссылка на картинку” />, и атрибут alt, в нём записывается описание картинки.
<table><tr><td></td></tr></table> - эти парные тэги выводят в браузере табличные данные, где <table> - фактически ничего не делает, за исключением того что, сообщает браузеру что далее нужно создать таблицу (его свойства похожи на <ul></ul>). <tr> - создаёт горизонтальную колонку. <td> - создаёт ячейку в колонке.
<a href=”” title=””>ссылка</a> - с помощью этого тэга мы можем создавать ссылки на другие страницы сайта или “якори” на странице. Ссылка записывается в атрибут href. Title необходим для описания ссылки, например, сделаем ссылку на сайт Яндекс: <a href=”http://yandex.ru/”>Яндекс</a>.
<title>заголовок</title> - это тэг, который не выводится на странице сайта, но который очень важен для поисковых систем. По смыслу он такой же как и тэг H1, но в него записывается описание всей страницы.
Вот и всё. Это были самые необходимые тэги для качественного наполнения сайта контентом.
Что значит всё?! А как же атрибут style в примерах выше, и что делать, если мне нужно часть текста покрасить другим цветом или сделать его крупнее?
Понять или освоить какую-то область за один присест не возможно, но мы попробуем Вам рассказать самое важное. Справится с задачей изменения цвета текста и другими визуальными эффектами Вам поможет CSS или таблица каскадных стилей. Именно в CSS создаётся всё оформление сайта. HTML и CSS это две неразрывно связанные технологии. Так с помощью HTML шрифт имеет разное начертание, цвет, размер и даже положение в плоскости. CSS немного сложнее понять в отличии от HTML.Благо Вам не нужно в нём разбираться - достаточно просто знать что он есть и что он даёт. Так к примеру, всегда в атрибуте style (<p style=”какое-то оформление”>) пишeтся CSS свойства для тэгов, а атрибут class: <p class=”textCss”>текст</p> указывает браузеру применить CSS класс с именем textCss, которые могут подгружаться отдельным файлом или быть в коде текущей страницы.
Если же у Вас возникло желание более детально изучить HTML и CSS - рекомендуем Вам прочесть стандарт W3C, где описаны все HTML теги и все CSS свойства.
Мы оказываем техническую поддержку сайта от 15 000 руб.
Если Вам необходимо найти специалистов для технической поддержки сайта, либо его доработки, обращайтесь.
Добавить комментарий:
Для того, чтобы добавить коментарий, авторизируйтесь.