Домой Избранное Как самостоятельно сделать HTML сайт

Как самостоятельно сделать HTML сайт

857
0

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

Подготовка

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

Сайт с нуля

Сложность: высокая

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

Для написания кода нужно разобраться с двумя языками:

  • html – он отвечает за структуру страницы, распределение и размещение блоков;
  • css – если очень кратко, то именно так прописывается внешний вид блоков (ширина/высота, размер шрифтов, цвет элементов, выравнивание и т.д.).

Где писать код:

  • В обычном блокноте (WordPad) или другой подобно программе.
  • В специализированных программах, например, бесплатный Notepad ++. Удобно редактировать сразу несколько страниц или отдельно html и css файлы (поддерживается многооконный режим), есть подсветка синтаксиса (если забудете поставить закрывающий тэг, программа это покажет), есть расширяющие функциональность плагины. Но можно выбрать и другой редактор для веб-программиста.
  • Через онлайн-редактор. Их множество, можно выбрать самый удобный. Работать можно только онлайн, не забывайте экспортировать файл с готовым кодом к себе на машину.

Пример кода

Заголовок страницы определяется html-тегом <h1>:

<h1>Вот так называется страница</h1>

Теперь пропишем для заголовка дизайн в css-файле (или, иначе – в стиле):

Цвет – красный, выравнивание – по центру. Также мы добавили синюю тень – пикселями задается ее направление и размытость.

Сделаем тень вправо без размытия:

А теперь – очень вниз и с сильным размытием:

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

Сайт на html-шаблоне

Сложность: средняя

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

После этого заливаете скачанные файлы в корневую папку хостинга – и по адресу вашего сайта уже видно заготовку.

Пример бесплатного шаблона

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

Пример платного шаблона

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

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

Сайт на html-конструкторе от хостинга

Сложность: легко

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

Возможности конструктора зависят от хостера. Например, на gpdhost.ru есть более 90 готовых шаблонов, разбитых по определенным тематикам – выбрать легко.

Выбрать нужные страницы, отредактировать их тоже очень просто – все это делается в личном кабинете. Можно и создать новые с помощью drag-n-drop функции – выбираете нужные блоки и перетаскиваете в то место страницы, где они должны быть. Не нужно даже искать картинки в интернете – есть готовая библиотека. С помощью такого конструктора можно создать большой и серьезный ресурс на html, в том числе и интернет-магазин – у gpdhost.ru есть возможность прикрутить онлайн-оплату.

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

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here