Html начало

Как создать страничку

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

Откройте документ.

Вставьте в него вот этот код.

Моя первая страница

Теперь нажмите «Сохранить как…». Это очень важный момент.

Файл нужно назвать index.html. Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.

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

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

Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center» и вставим строчку, в которой содержится слово «Color». Кстати, как менять цвет html я уже писал. Это очень просто, рекомендую к прочтению.

Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5

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

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

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

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

Размещение на хостинге

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

Любой web-хостинг работает с html-файлами, даже если у него нет поддержки PHP или баз данных. Хостинг-провайдеров безумное множество, для статичных (html) сатов даже встречаются бесплатные варианты, например, GitHub Pages. Но мы рекомендуем не тратить время, и выбрать проверенный сервис, такой как Bluehost (компания работает с 2002 года и позволяет размещать даже динамические сайты, например, на популярном движке WordPress, а ещё здесь есть возможность установки любой системы управления контентом прямо из панели управления в один клик и тарифы с полным безлимитом).

Как разместить HTML-сайт на хостинге, пошагово:

1. Вы регистрируете новое доменное имя, если его ещё у вас нет.
2. Перенаправляете его на DNS-сервера выбранного хостера.
3. В панели управления хостинга создаёте новый сайт (имя задаётся в соответствии с доменом).
4. Далее в веб-версии файлового менеджера или через FTP-протокол закачиваете ваши страницы в корень каталога сайта.
5. После того, как обновятся данные в DNS-системе и ваш домен начнёт ссылаться на сервера хостинга, сайт можно будет открыть в любом браузере просто введя имя (домен).

Стоит учесть, что если вы введёте в адресной строке vash-sait.ru, то хостинг будет пытаться загружать главную страницу, которую он ожидает увидеть с именем index.html в корне каталога (http://vash-sait.ru/index.html).

Если такого файла не будет, отобразится ошибка. Но вы можете прописать полный путь, например, vash-sait.ru/page1.html, и если файл с таким именем в каталоге сайта есть, то станица будет отображена.

Стоимость создания сайта зависит от множества факторов. Узнайте сколько стоит создать свой сайт.

Подробнее

Основные термины HTML

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

Элементы

Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с <h1> до <h6>) и абзацев (определены как <p>); в список можно включить элементы <a>, <div>, <span>, <strong> и <em> и многие другие.

Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:

Теги

Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.

Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например, <div>.

Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например, </div>.

Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег <a> и закрывающий тег </a>. Что находится между этими двумя тегами будет содержимым ссылки.

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

Атрибуты

Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id, который идентифицирует элемент; атрибут class, который классифицирует элемент; атрибут src, который определяет источник встраиваемого содержимого; и атрибут href, который указывает ссылку на связанный ресурс.

Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент <a> с атрибутом href будет выглядеть следующим образом:

Демонстрация основных терминов HTML

Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега <a> и закрывающего тега </a> охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href=»http://shayhowe.com» в открывающем теге.

Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег

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

Урок 1

1. Общие сведения о Web-сайтах и языке HTML

Публикации во Всемирной паутине (World Wide Web)реализуются
в форме Web-сайтов. Web-сайт по своей структуре
напоминает журнал, который содержит информацию,
посвящённую какой-либо теме или проблеме. Как
журнал состоит из печатных страниц, так и Web-сайт
состоит из компьютерных Web-страниц, объединённых
гиперссылками. Web-страницы могут содержать текст,
рисунки, таблицы, мультимедийные и динамические
объекты. Создание Web-сайтов можно осуществлять с
помощью языка HTML.

HTML – Hyper Text Markup Language — язык разметки
гипертекста. HTML ни в коей мере не является языком
программирования, он отвечает только за
расположение элементов (текста, рисунков) в окне
браузера. HTML является языком для создания
Web-сайтов во Всемирной паутине. Язык HTML состоит из
простых команд – тегов. Теги управляют
представлением информации на экране при
отображении HTML-документа. Теги заключаются в
угловые скобки <>…</> и бывают парные и
непарные (одиночные <>).

Документ HTML – это текстовый файл с
расширением .html или .htm, содержащий набор
тегов.

Браузер – (browser) – программа для просмотра
Web-страниц. Широко используют бразеры Microsoft Internet
Explorer, Opera и др. Браузер при получении документа HTML
выполняет его анализ, строит объектную модель
документа, затем результат отображает на
мониторе.

2. Структура HTML-документа

3. Форматирование символов

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

Параметры шрифта

Текст, заключенный между тегами <FONT….>
……..</FONT> имеет заданный размер, цвет и
гарнитуру. Для этого используются атрибуты: SIZE =
значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white),
каждому цвету соответствует свой
шестнадцатеричный код от 000000 до FFFFFF.

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

Одиночный тег <BR> разрывает текстовый
поток и вставляет пустую строку. Несколько таких
тегов добавляют несколько пустых строк.
Межстрочный интервал – одинарный.

4. Практическое задание №1.

Создание первого HTML-документа “Драматические
театры Санкт-Петербурга”, работа со шрифтами,
задание цвета и размера шрифта. Освоение
технологии работы.

Создаем структуру шаблона

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

Для этого возвращаемся к коду, который мы написали на предварительном этапе.

Создаем общий контейнер, где в теге <body></body> прописываем структуру вместо «Приветствую, Вас!»:

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

Оформление блоков

Начинаем оформление с самого большого контейнера.

Добавляем в созданный ранее файл .css следующий код:

Теперь расшифруем эту запись.

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

Далее обратимся к блоку с индентификатором  main, после чего в фигурных скобках перечислим правила, которые будут применены к данному элементу:

• ширина контейнера будет составлять 810 px,
• margin: 0 auto – установит блок по центру, что позволит нашему сайту красиво отобразиться по центру,
• следующее свойство border добавит сплошную рамку со всех сторон. В данном случае она будет черной.

Теперь настроим внешний вид основных блоков нашей страницы.

Для этого пропишем следующий код:

• Вначале зададим стили для шапки: ее высота = 100 px и она отделена в нижней части рамкой от остальных блоков.
• Сайдбару мы зададим ширину, высоту и свойство float: left. Данное правило означает, что элемент прижмется к левому краю основного блока.
• Такое же свойство зададим контентному блоку, но только он окажется справа от сайдбара и ширина его будет больше.

Из кода видно, что сайдбар и блок с контентом имеют одинаковую высоту.

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

Блок подвала (footer) – небольшой высоты и окружен рамкой.

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

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

Если теперь обновить страницу в браузере, то мы увидим следующее:

Использование сброса CSS

Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.

Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) — наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта.

Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера, его сброс CSS адаптирован для включения новых элементов HTML5.

Если вы чувствуете себя немного авантюристом, есть также Normalize.css, созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.

Кроссбраузерность и тестирование

Как упоминалось ранее, разные браузеры отображают элементы по-своему

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

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

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

Шаги

Резюме

Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

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

Напомним, что мы рассмотрели следующее:

Разница между HTML и CSS.
Знакомство с элементами HTML, тегами и атрибутами.
Настройка структуры вашей первой веб-страницы.
Знакомство с селекторами CSS, свойствами и значениями.
Работа с селекторами CSS.
Указатель на CSS из HTML.
Важность CSS сброса.

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

Результат нужно увидеть своими глазами

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<style>
body { 
  padding:0;
  margin: 0;
  background: url(http://kvest-spb.com/img/kvest-minastirit/photo00.jpg) repeat-y scroll;
background-size: cover;
}
     header{  	
background: url(http://img0.cfstatic.com/wallpapers/e6cbeca78c026a3bd1f64be1b27541c8_large.jpeg) top center no-repeat fixed;
  background-size: cover;
border-bottom: 9px double #FFFFF0;
  padding: 45px;
text-align: center;
 color: #FFFFF0;
font-size: 27px;
text-shadow: 0 0 9px #F0FFFF;
font-family: cursive;
}
.content, footer{
background-color: rgba(24, 16, 20, 0.9);
width: 80%;
margin: 0 10% 0 10%;
font-size: 18px;
color: 	#F0FFFF;
text-align: center;
}
.content > h1  {
padding: 13px;
text-shadow: 0 0 9px #F0FFFF;
text-decoration: underline;
}
 
 
img {
float: left;
}
.photo {
 display: inline-block;
}
footer {
margin-top: 15px;
color: #F0FFFF;
bottom: 0;
}
footer >h2 {
text-shadow: 0 0 9px #F0FFFF;
}
 
  </style>

Основы языка гипертекстовой разметки

Для тех, кто не знает, html – это язык разметки гипертекста. Он включает в себя определенные элементы управления – теги, благодаря которым и производится разметка страниц. Так, с их помощью создаются абзацы и заголовки, изображения и ссылки, блоки объектов, кнопки и множество других элементов.

На сегодняшний день существует и обновленная спецификация, новая платформа – html5.

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

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

• Теги обязательного верхнего уровня;
• Теги, необходимые для заголовков;
• Блочные единицы;
• Строчные единицы;
• Универсальные элементы;
• Теги табличных представлений;
• Разнообразные виды списков;
• Фреймы.

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

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

Включает в себя все последующие элементы и контент

Указывает, что данный файл является html-документом.

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

Определяет видимую часть тела файла. В эту часть вносится основная разметка веб-сайта.

Заголовок документа
Определяют название страницы и хранят информацию для поисковых роботов и других аналогичных программ браузера

Отвечает за наименование документа.

Хранит в себе информацию для поисковых систем.

Блочные единицы
Занимают доступную ширину отображаемой страницы и всегда начинаются с новой строки

Универсальный элемент

Используется для разметки блоков текста, группы объектов и создания отдельных частей страниц (блочная верстка).

,…,

Парные теги заголовков.

Используется для создания абзацев.
Списки

Создает нумерованный перечень.

Определяет пункты списка.

Создает ненумерованный перечень.
Таблица

Задает таблицу

Определяет строку таблицы

Определяет шапку страницы

Определяет ячейки таблицы

Строчные единицы
Это теги, которые могут входить в состав других элементов языка разметки

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

Немного о «мутациях» html в html5

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

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

Ответы на часто задаваемые вопросы

8.1. Где заказать создание сайта за деньги

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

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

8.2. Сколько можно заработать

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

Заработок зависит от множества моментов. Даже эксперту сложно сказать какой будет точно доход. Плюс к тому же поисковые системы бывают «чудят» и качественные проекты остаются на дне выдаче. Лучше деверисифировать риски и делать несколько средних сайтов, чем все вкладывать в один.

Более подробно эта тема раскрыта в статьях:

• Сколько можно заработать на своем сайте
• Окупит ли себя сайт, домен и хостинг

8.3. Стоит ли создавать сайт для заработка

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

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

Шаг 2 – добавляем разметку веб-страницы

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

1. <!DOCTYPE html PUBLIC»-//W3C//DTD HTML 4.01 Transitional//EN»>
2. <html>
3. <head>
4. <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
5. <title>Топовый сайт новичка</title>
6. </head>
7. <body>
8. <h1>Это тег заголовка первого уровня для содержимого страницы</h1>
9. <p>Первый абзац</p>
10. <p>Второй абзац</p>
11. <p>Третий абзац и т. д.</p>
12. </body>
13. </html>

Это базовые элементы, которые есть на любом веб-ресурсе. Весь контент страницы должен находится между тегами <body></body> (это тело документа), всё, что выходит за их пределы выше и ниже, не будет отображаться на сайте.

Структура html документа

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

Вообще, что такое html?

Это язык гипертекстовой разметки и его основные структурные элементы – теги. Благодаря им браузер «понимает», что должно отображаться на веб странице.

Для начала создадим структуру документа, прописав основные теги:

Фото: создадим структуру документа

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

Подобным образом создаем документ с расширением .CSS.

Открываем блокнот, создаем таблицу стилей, сохраняем файл:

Теперь можем дополнить структуру созданного документа, прописав ссылку на документ с расширением .css.

Можно также добавить текст. Например: дать заголовок странице, прописав его между тегами:

После того, как мы сохраним все и откроем файл в браузере, мы увидим следующее:

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

Что-то я отвлеклась. Продолжим создавать нашу веб страничку.

Но, прежде я кратенько объясню значение прописанных тегов.  

В самом начале <!DOCTYPE html> мы указали браузеру тип документа:

• <head> — тоже парный тег. В нем находится вся служебная информация о веб странице. Внутри данного тега находится <title> — название данной страницы, которое выводится в браузере вверху;
• в тег <body></body>поместим содержание файла, т.е ту информацию, которая будет видна в браузере, когда мы откроем документ;
• зададим кодировку и подключим файл стилей с помощью непарного тега <link>.

А теперь нам надо спланировать структуру сайта, т.е. подумать, какие блоки нам понадобятся.

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

Преимущества HTML редактора максимальны!

• Позволяет правильно прописывать кодировку элементов, не боясь пропустить нужный символ, закрыть скобки, допустить опечатку или ошибку. Достаточно только найти на странице инструментов нужный элемент, нажать на него — и все данные будут оперативно прописаны, можно даже не проверять содержимое.
• Скорость написания кода существенно увеличивается благодаря тому, что используется полуавтоматическое программное обеспечение, пользователь может рассчитывать на получение достаточно высокой экономии времени на выполнение конкретных действий. Следовательно, код составляется значительно быстрее.
• Доступен онлайн без предустановки на ПК. Редактор позволит без проблем работать в любой точке планеты, обеспечить сохранение данных в автоматическом режиме, гарантирует максимальное удобство исполнителю.
• Бесплатность существенно сэкономит время и средства потенциального клиента, даст ему неограниченное поле для деятельности и не даст возможности допустить многих ошибок в работе. Не будет необходимости выплачивать большие суммы за использование программного обеспечения.

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

Технические моменты

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

4.1. Движок

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

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

Движок сайта зависит от ранее рассмотренных целей. Для каждого вида сайта существуют специализированные движки.

1. Для сайта-визитки и корпоративных сайтов подойдут:
WordPress, Joomla, 1С-Битрикс, UMI.CMS, Wix, uKit, Jimdo

3. Новостной и информационные сайты:
WordPress, Joomla, Drupal

4. Блог
WordPress, DLE

5. Форум
phpBB

4.2. Конструкторы сайтов

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

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

Как я уже сказал, этот вариант хорошо подойдет только в случае, если от сайта не ждать каких-то результатов.

Бесплатные конструкторы сайта:

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

4.3. Самостоятельная разработка сайта

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

Самостоятельная разработка движка под силу только профессионалам. Новички могут попробовать написать примитивные движки сайта на php. Однако это будет скорее интерес, чем качественный продукт. Чтобы исправить все «косяки» движка необходимы годы отладки (если мы говорим про функциональный сайт).

Для самостоятельной разработки сайта с нуля потребуются много знаний:

• PHP-уроки
• HTML-уроки и советы
• Уроки CSS
• Как сделать сайт на PHP

4.4. Разработка дизайна

Следующим этапом создания сайта является — разработка дизайна сайта. Есть несколько вариантов как поступить

• Создать самостоятельно. Этот вариант подойдет только для профессионалов. Надо владеть Фотошопом, знаниями HTML и CSS.
• Использовать шаблоны
• Заказать у фрилансеров (биржи и сайты фриланса)

Чем популярнее движок сайта, который Вы выбрали ранее, тем проще под него найти сделать дизайн. Например, под популярные CMS типо WordPress, Joomla, Drupal есть тысячи бесплатных шаблонов, которые можно использовать прямо сейчас. Вряд ли хватит сил пересмотреть их все.

Конечно, делая серьезные сайты лучше использовать не бесплатные шаблоны, а уникальный дизайн. Это ценится в поисковых машинах. Для этого можно заказать создания дизайна у фрилансеров. Стоимость подобной работы не высока. В среднем чек находится от 3000 до 10000 рублей.

4.5. Сайт на https (SSL-сертификат)

Все новые сайты есть смысл создавать только на протоколе https (защищенный), поскольку это стало важно для SEO-оптимизации. Для того, чтобы сайт был с таким протоколом необходимо приобрести SSL-сертификат

DrCare – шаблон для создания сайта медицинской тематики

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

Что еще нужно для создания сайтов?

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

Стили можно подгружать с отдельного файла (обычно его называют style.css), прописывая в элементе <head> ссылку подключения вида:

Также можно внедрять css прямо в html-текст. Как думаете каким образом? Правильно, через тег. Для этого стоит в том же хедере прописать парный элемент <style></style> и в него вписать свойства со значениями.

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

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

Наполнение сайта контентом

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

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

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

Рекомендую прочитать:

Как найти себе копирайтера (рерайтера)

Рекомендую обратить внимание на следующие биржи контента/копирайтинга:

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

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

Приукрашиваем сайт

На следующем этапе добавим сайту цветов. Для начала зададим фон.

Сделать это можно, добавив следующий код:

Получим вот такой результат:

Работа с шапкой

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

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

Код примет следующий вид:

kartinka.jpeg – это наш логотип, далее следует команда, что логотип не должен повторяться и разместиться она должна по центру сверху и снизу, сместившись от начала блока на 5% по горизонтали.

Теперь убираем надпись «Здесь будет шапка» и пишем красивый заголовок.

Надо будет его красиво оформить, задав нужные стили:

Мы задали следующие свойства:

• размер и семейство шрифта;
• отступ слева;
• прижали заголовок к левому краю;
• выбрали цвет шрифта;
• верхний внутренний отступ;
• тень текста.

Теперь наша шапка готова. В реальности она может содержать различные ссылки, номера телефонов и т.п.

Оформление меню в сайдбаре

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

Зададим стили:

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

Добавим статью и наш блок готов.

Не забываем прописывать теги заголовков:

Заголовки можно оформить цветом.

Как оформить подвал

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

Мы просто выровняем подвал по центру:

Вот и все, мы создали html файл в блокноте.

Наш файл содержит: логотип, название, сайдбар с меню, статью, футер. Чтобы сделать сайт привлекательным мы добавили стили, прописав их в файле .css.

Photon – сайт для создания сайта фотографа

Дизайн с практически идеальной структурой для оформления эффектного сайта фотографа. Главная страница с горизонтальным скроллингом демонстрирует разделы галерей из портфолио. Крупные миниатюры со ссылками на разделы – привлекательный и практичный вариант подачи работ. Меню реализовано гамбургером в мобильной версии и, помимо ссылок на страницы содержит стилизованные под оформления шаблона иконки социальных сетей. Отдельно вынесены услуги с прайсингом – портрет, свадебные, видеосъёмка, путешествия и т. д. Украшено всё это несложными иконками. Галереи выглядят круто – просто и наглядно, просмотровщик фото отличный. Немного эффектов тут и там, минимум текста, максимум акцента на фотоматериалах, грамотная структура – и мы получаем оптимальный в плане подачи макет для показа фото.