Пошагово объясняем как самостоятельно создать сайт в reg.site

Содержание:

Подключение CSS
- Другие варианты добавления CSS
Как создать свой сайт в Интернете, чтобы потом заработать на нём от 200$
- Пошаговая инструкция, как создать сайт с нуля самостоятельно
- Заказать разработку сайта у профессионалов
У меня есть домен. Как создать свой сайт?
Выбрать структуру веб-страницы
Собираем контент, необходимый для ресурса (инвентарь)
Что такое HTML и CSS?
Основные термины CSS
Как сделать красивый сайт
Использование сброса CSS
- Кроссбраузерность и тестирование
Практические идеи для блога

Подключение CSS

Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента <head> нашего HTML-документа. Использование одного внешнего CSS позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.

Другие варианты добавления CSS

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

Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением .css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.

Внутри элемента <head> применяется элемент <link>, который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.

В следующем примере HTML-документа элемент <head> указывает на внешний стилевой файл.

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

Если CSS-файл располагается в подпапке, то значение атрибута href должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href будет stylesheets/main.css. Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.

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

Как создать свой сайт в Интернете, чтобы потом заработать на нём от 200$

Как продвигать сайт самостоятельно

Ниже рассмотрим, как создать свой сайт, на примере популярной CMS WordPress. В принципе, в других сервисах последовательность действий будет похожей.

Пошаговая инструкция, как создать сайт с нуля самостоятельно

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

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

Шаг 1. Выберите хостинг и домен

Если сайт вы собираетесь создать сайт для заработка денег, сразу переходите на платный хостинг. Многие разработчики рекомендуют американский Bluehost, так как его сервера хорошо оптимизированы под требования WordPress. На старте вам хватит бюджетного тарифа (2,95$ в месяц).

Домен 2-го уровня идёт в подарок на 1 год. При желании вы также можете создать и зарегистрировать свой домен на портале reg.ru и привязать к хостингу. Стоимость – от 200 руб. в год.

Шаг 2. Установите WordPress

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

Распакуйте архив.
Перейдите в панель управления хостингом в раздел баз данных. Создайте новую базу данных. Сохраните логин и пароль.
Вернитесь к распакованным файлам. Переименуйте «wp-config-sample.php.» в «wp-config.php». Откройте файл в текстовом редакторе.
Найдите раздел «Параметры MySQL». Внесите туда учётные данные базы данных, которую вы только что создали в панели хостинга.
Откройте FTP-клиент (например, программу FileZilla). Вверху заполните учётные данные и нажмите «Быстрое соединение».
Перетащите файлы WordPress (но не саму папку) в корневой каталог веб-сервера.
Откройте ссылку на сайт в браузере. Заполните информацию для подключения к базе данных.

Если вы всё же столкнётесь с трудностями при установке WordPress, то можете обратиться за помощью к специалисту. Например, на бирже Kwork такая услуга стоит 500 руб.

Шаг 3. Создайте дизайн проекта

При выборе шаблона учитываются тематика и формат проекта. На WordPress есть платные и бесплатные темы. Веб-дизайн последних не отличается оригинальностью, но для первого раза – сойдёт.

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

Найдите в административной панели WordPress раздел «Внешний вид – Темы». Для установки понравившегося шаблона нажмите «Активировать тему». Далее вы сможете настраивать меню, убирать и добавлять новые блоки, редактировать шрифты.

Шаг 4. Начните продвигать сайт в поисковиках

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

Но если говорить кратко, оно состоит из следующих основных этапов:

Составление сематического ядра – совокупности ключевых фраз и слов, отражающих тематику. Для их подбора можно использовать сервис «Яндекс Вордстат».
Регулярное (хотя бы 2 раза в неделю) наполнение сайта оптимизированным контентом.
Закупка внешних ссылок на биржах вроде Miralinks.
Внутренняя перелинковка. Внутри страниц нужно создать ссылки, которые будут вести на другие страницы этого же сайта.

Если вы хотите заработать на своём сайте уже через 6-8 месяцев, заказывайте услуги у SEO-специалистов. При самостоятельной работе над проектом придётся дольше добиваться высокой посещаемости.

Заказать разработку сайта у профессионалов

Если вы собираетесь зарабатывать на сайте серьёзные суммы (от 60 тыс. руб. в месяц), делайте разработку и продвижение у профессионалов. Особенно если планируете заниматься продажами.

Таблица 1 «Сколько средств надо вложить в создание и раскрутку сайта»

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

У меня есть домен. Как создать свой сайт?

Как создать, назвать или скопировать сайт

Курс

Frontend-разработчик

Научитесь разрабатывать интерактивные веб-сайты и приложения на JavaScript и HTML и получите востребованную IT-профессию. Дополнительная скидка 5% по промокоду BLOG.

Узнать больше

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

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

Для примера возьмем один из самых популярных конструкторов — Tilda. В библиотеке Tilda более 480 блоков и свыше 180 шаблонов страниц. У конструктора есть бесплатная версия — вы можете создать один сайт с 50 страницами, размером не более 500 Мб.

Создание сайта на Tilda

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

Шаблоны для создания различных страниц на Tilda

Помимо Tilda есть и другие варианты, но у всех свои плюсы и минусы.

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

У Wix есть встроенный магазин приложений, а также много возможностей, чтобы сделать крутой дизайн. Но технология AJAX, на которой работают сайты Wix, способна вызывать проблемы с SEO-продвижением и скоростью загрузки страниц. Бесплатно на Wix можно разместить один сайт, а подключение собственного домена обойдется от 90 рублей в месяц (при использовании бесплатной версии).

Выбрать структуру веб-страницы

Как создать сайт на wix: инструкция для новичков

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

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

Достоинство:

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

Недостатки:

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

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

Достоинство:

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

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

Недостатки:

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

Собираем контент, необходимый для ресурса (инвентарь)

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

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

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

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

Что такое HTML и CSS?

HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей — это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.

Эти два языка — HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.

При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.

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

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

Селекторы

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

Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде <h1> или <р>.

В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы <p>.

Свойства

Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background, color, font-size, height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size, применяемые ко всем элементам <p>.

Значения

Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы <p> и устанавливаем значение свойства color как orange, а значение свойства font-size как 16 пикселей.

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

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

Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения

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

Как сделать красивый сайт

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

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

Readymag

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

Tilda

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

Photoshop

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

Sketch

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

Figma

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

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

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

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

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

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

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

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

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

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

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

Практические идеи для блога

Полезные, простые в реализации идеи блога для личного или профессионального совершенствования.

1. Проверенный метод, как что-то сделать

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

Пример: Как создать свой блог: 7 простых шагов!

2. Творческий рецепт

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

3. Инструкции по защите вашего блога

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

4. Как сохранить мотивацию, несмотря на препятствия

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

5. Советы по поиску работы

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

6. Советы по самосовершенствованию

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

7. Преодоление вредных привычек

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

8. Создание инфографики

Такая идея подойдет для объемных статей – лонгридов. Чтобы облегчить чтение, упакуйте основные мысли статьи в инфографику. Все, что вам нужно, это бесплатный аккаунт Canva.

9. Финансовая консультация

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

10. Расшифровка подкастов или видео на YouTube

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

11. Подборки книг, видео, подкастов

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

Пример: ТОП-10 книг для блогера: учимся писать правильно

12. Сравнение приложений или гаджетов

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

Внимание – такой обзор не должен выглядеть как реклама

13. Плюсы и минусы

Выберите тему, которая интересна вашим читателям, и подробно распишите ее плюсы и минусы. Например, для блогеров это может быть “Насколько уместны лонгриды”, для фрилансеров – “Стоит ли работать на бирже”.

14. Топ-10 навыков для…

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

15. Полное руководство, или гайд

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

Пример: Как написать статью: Структура, этапы и полезные советы начинающим авторам

16. Ошибки новичков

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

17. Советы по рабочим отношениям

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