406
Категория: Разработка сайтов
Автор: Сергей Бурчиц
В данном разделе мы рассмотрим из чего состоит сайт, где он размещается и как с ним работают маркетологи, контент-менеджеры и SEO специалисты.
Для того, чтобы понять принцип работы сайта, мы немного коснемся истории развития сайтостроения. Когда-то давно сайты состояли из простого набора HTML-страниц, связанных между собой ссылками и опубликованных по определенному адресу. Это были простые сайты с малым количеством страниц, каждую из которых было необходимо редактировать вручную.
Но интернет-технологии дошли до коммерции, и количество страниц на сайтах стало увеличиваться. И тут возникла проблема с редактированием сайта. Представьте интернет-магазин на 10 000 товаров, в котором владельцу понадобилось заменить контактный телефон. Приходилось менять информацию на всех страницах отдельно.
Люди были не согласны с таким принципом работы и придумали системы для автоматизации работы с контентом. Данные системы называются CMS (Content management system). На постсоветском пространстве CMS называют платформой или “движком”, на котором работает сайт. Разрабатываются они на языках web-программирования. В большинстве случаев это php.
Современные CMS позволяют намного больше, чем просто редактировать текст. Разнообразие и функционал платформ огромен. Но даже если функций недостаточно, вы можете скачать и установить дополнительные модули. У самых популярных платформ это не потребует знания программирования. Вы просто скачиваете и устанавливаете виджеты как приложение в мобильном телефоне.
Платформы бывают как на платной, так и бесплатной основе.Первые отличаются сервисной поддержкой со стороны разработчиков, а вторые огромной армией свободных веб-мастеров. Выбор остается за вами, но главными факторами при подборе платформы должны быть необходимый функционал, удобство работы с сайтом и масштабируемость.
Основные CMS в рунете:
Итак, что необходимо современном сайту для работы?
Во-первых, это хостинг. По сути это сервер, часть которого предоставляют в аренду. Основной задачей компании, предоставляющей хостинг, является стабильная доступность сайта клиента 24/7. Конечно, возможно разместить сайт и у себя на ноутбуке, но любые проблемы с интернетом, электричеством или производительностью заставят вас быстро отказаться от этой затеи.
Во-вторых — купленный домен. Домен это имя вашего сайта в интернете. Для того, чтобы по этому имени вас могли найти, необходимо купить доменное имя и привязать его к серверу, на котором находится ваш сайт. Привязка производится благодаря указанию DNC адресов.
И доменное имя и хостинг покупаются на определенное время. Хостинг вы можете заказать в любой другой компании, но доменное имя уникально и если его купит кто-то другой, то вы можете остаться ни с чем. Поэтому заблаговременно продлевайте аренду домена.
Запомните — HTML это не язык программирования. HTML — это язык гиперразметки, позволяющий вам расположить необходимые элементы. Т.е. он не обрабатывает какие-либо формулы и не работает с базой данных. Так же как вы форматируете ваш документ в Word или Exel, благодаря языку HTML вы делаете тоже самое для браузеров.
Сам по себе язык состоит из элементов заключенных в угловые скобки <...>. Данные элементы называются тегами. Практически все теги указываемые на странице должны быть закрыты тегом с наклонной чертой. Каждый из блоков, которым вы хотите придать какое-либо свойство либо положение, необходимо поместить между открывающим и закрывающим тегами. Пример:
<html>
<head>
<title>Название страницы</title>
</head>
<body>
<b>Текст выделенный жирным</b>
</body>
</html>
Структурно любой HTML документ должен состоять из двух частей. Первый блок — это <head>. В нем мы указываем справочную информацию о странице для браузеров или поисковых роботов. Важнейшими для нас являются теги title и description. Так же их часто называют метатегами.
Второй частью является блок <body>. В нем мы размещаем те элементы и их форматирование, которые будут отображаться пользователю. Давайте рассмотрим основные теги данного блока:
<table>- создание таблицы
<a> — ссылка
<img> — вставка графики
<p>- параграф, абзац
<form> — создание формы
<ul>, <ol>- маркированные и нумерованные списки соответственно
<input>, <textarea>, <select> — интерактивные элементы формы
<h1> — <h6> — заголовки
<b>, <i>, <u>, <em> — теги для оформления текста — жирный или курсив
<audio>, <video>, <canvas> — вставка мультимедийных элементов
<div>- тег для организации блока элементов
<span>- тег для организации строчного элемента
В любом из открывающих тегов вы можете указать какие-либо атрибуты. Для примера давайте рассмотрим тег, который практически всегда имеет прописанный атрибут.
<a href=«url.ru/link»>текст ссылки</a>
В свойстве href мы указываем, на что будет ссылаться ссылка. Между тегами мы будем указывать отображаемый текст ссылки или как его часто называют анкор ссылки.
Существуют разные свойства. Вы можете центрировать элемент, определить цвет, размер картинки и т.д. Для различных тегов могут использоваться разные атрибуты. Более того вы можете использовать несколько атрибутов для тега. К примеру, тег для отображения графики:
<img src=«kartinka.jpg» alt=«подсказка при наведении» width=«120» height=«120»>
В данном примере используются атрибуты scr, alt, width и height. Стоит подметить, что некоторые теги не нуждаются в закрытии.
Язык HTML практически всегда используется с языком стилей CSS. Если вы сделаете страницу в чистом HTML, то она будет выглядеть примерно так:
Для того, чтобы страница приобрела нормальный для современного интернета вид, вам необходимо указать свойства различных элементов.
В данной книге собраны самая актуальная на данный момент информация о продвижении сайтов в поисковых системах, а также полезные советы для предпринимателей или интернет-маркетологов.
получить книгу
