Как сделать сайт самому с нуля html: Как создать сайт бесплатно самому? 👇 3 способа

9. Максим Ильяхов: «Ясно, понятно» 

О чем книга

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

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

Об авторе

Редактор, создатель сервиса для проверки текстов «Главред». Работал с такими проектами как «Мегаплан», «Тинькофф-журнал», журнал «Код». Автор более 400 статей о копирайтинге и смежных сферах. Кандидат педагогических наук.

Кому будет полезна

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

Высоких вам конверсий!  

Изображение: freepik.com

Анна Черная, автор videoinfographica.com — блога об онлайн-образовании.

20-05-2021

Как сделать сайт самому бесплатно.Как создать сайт в интернете на html.

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

Как сейчас создаются сайты без каких-либо серьезных знаний в верстке и программировании? Для этого существует много современных платформ, которые так или иначе являются конструкторами сайтов. Наиболее популярны из них сервис Яндекса «Народ», «Гугл конструктор», ну и все знают «Укоз». Так как в данном трактате будем рассматривать создание сайта своими руками, без помощи сервисов, то начнем с создания сайта на html.

Как создать сайт в интернете на html и CMS самому и бесплатно

Чтобы иметь свою страничку в интернете в качестве своей визитки, можно сделать простой сайт на голом html и css. Большое преимущество такого сайта это быстрая загрузка, минимальные системные требования (подойдет любой хостинг в том числе и бесплатный), высокая взломоустойчивость (базу данных такой сайт не использует). Минусов тоже много, так как конкурировать с современными CMS такой сайт априори не может.
Создавать сайт на html будем в визуальном редакторе Adobe Dreamweaver CS5.5, можно и в Notepad++, но для начинающих второй вариант не подойдет.  Скачайте с торрент-сайта Дримвивер и начнем ( ссылку не привожу т.к. постоянно выходят новые версии, думаю в гугле или яндексе найдете).

Надеюсь, что вы успешно установили Dreamweaver CS5.5 и готовы начать. У нас с вами нет цели изучать Дримвивер и все его возможности, наша главная цель это сделать простой сайт. Давайте посмотрим главный дешборд Дримвивера.

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

Но наша цель это путь наименьшего сопротивления, поэтому выбираем «файл» «создать».

И видим страницу выбора макета (дизайн-верстки сайта). Выбираем тип страницы html и например фиксированный дизайн с тремя колонками .

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

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

После того как ваша мини интернет-визитка готова, то посмотрите как она отображается в браузере (можете посмотреть используя режим интерактивного просмотра).

В конце вам нужно лишь залить файлы вашего сайта на хостинг и сайт на html готов. Вот вы сделали сайт на html сами и абсолютно бесплатно! Конечно рассказал все быстро и не во всех подробностях, потому как мало кто сейчас делает сайты на чистом html. В основном сейчас делают сайты на системах управления — CMS/CMF и тому есть разумные причины, и доводы.

Давайте создадим свой сайт в интернете на ЦМС Joomla. Бесплатной системе управления контентом

Зачем создавать сайт на ЦМС? Все до безобразия просто и логично. Если вам нужен динамический (таких большинство) а не статический сайт (на html), то вам нужно использовать ЦМС систему управления сайтом. Все современные сайты сделаны на CMS. Используются как платные движки, так и бесплатные, отдельно можно отметить студийные и самописные движки (CMS) для сайтов.

Давайте для начала сделаем небольшой обзор ЦМС и выберем подходящую для ваших целей CMS.
Платные и студийные ЦМС — если вы не планируете сами копаться в тонкостях ЦМС, её настройке и технической поддержке то выбор оптимален. Если с сайтом, что-то случится, то продавец платной CMS обязан устранить проблему (бесплатная техническая поддержка вам гарантирована). Так должно быть в идеале. К студийным относятся CMS внедряемые в основном веб-студиями, работающими на своем собственном программном обеспечении (CMS).

Они обычно гарантируют полную техническую поддержку и всяческую помощь, если, что-то выйдет из строя, но реалии заставляют меня усомниться в их безграничной порядочности. А вдруг они исчезнуть вместе со своей веб-студией. Кто вам тогда поможет? Поверьте мало кто любит копаться в чужом коде. В таком случае вы уходите в свободное плавание со своей оригинальной CMS. То же в принципе относится к самописной ЦМС.

Предлагаю остановить свое внимание на бесплатных движках массового употребления. Как ни странно бесплатное именно в этой области является правильным выбором с финансовой и логической точки зрения. Для коробочных ЦМС таких как Джумла, Друпал, Вордпресс существует огромное комьюнити и поддержка как в нашей стране так и за рубежом. Не проблема найти и скачать нужные расширения и локализовать ЦМС выбранную вами, из выше перечисленных. Советую выбрать для начального изучения Joomla или WordPress. С ними усвоить сайта строение на основе CMS будет легче, чем например начать с Друпал. Но мой субъективизм и любовь к Джумла означает, что начнем с …Joomla

Запомните нету плохой или хорошей ЦМС. Все зависит от ваших целей и возможностей (в том числе и финансовых). Так как мы только учимся отделять одно от другого, то начнем с установки и знакомства с Joomla 2.5

Установка Джумла 2.5 на локальный хостинг Денвер 3 ни чем ни отличается от установки на реальный хостинг. В случае хостинга, вам лишь предстоит внести данные вашего хостинг аккаунта, которые вы получите сразу после регистрации у вашего хостинг-провайдера. Вам нужно запустить Денвер ( версию берите самую последнюю) — скачать денвер. Далее будем заливать файлы с помощью файлового менеджера «Тотал коммандер» (так же если у вас его нет качайте). Скачайте понравившийся шаблон на — здесь много шаблонов и расширений для Джумла (Joomla Jampstart) версии 2. 5. или 3.0.

После того как вы скачали и установили Денвер 3 и Тотал Коммандер приступим к установке ЦМС Джумла 2.5.

Открываем Тотал Коммандер и перед нами два окошка, которые позволяют работать сразу с двумя локальными дисками. Откройте слева созданный Денвером локальный диск, на котором он установлен. Справа откройте архив с Jampstartom Joomla 2.5 и выберите папку с дистрибутивом. Я указал папку home в которой и будут находиться наши сайты.

На следующем шаге в папке home, с помощью горячей клавиши F 7, создадим папку с названием домена.

Далее в папке с доменом создадим папку с названием www

После нам необходимо закачать дистрибутив с Джумла 2.5 (3.0 или другую) в папку с www. Для этого давайте скопируем содержимое дистрибутива в папку с www Ctrl+a (выделить все), и нажать F 5. Копируем кликнув OK.

Теперь переходим к процессу инсталяции и полной установке Joomla 2.5 на локальный хостинг Денвер 3

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

По умолчанию язык установки русский. Нажимаем далее и видим техническую информацию о CMS Joomla 2.5. Вверху показаны минимальные системные требования к apache и версии PHP. Если вы установили Денвер 3 и скачали пакет joomla 2.5, то никаких проблем быть на этом этапе не должно. Еще ниже необходимые настройки локального хостинга Вот скриншот:

Нажимаем далее и видим лицензионное соглашение

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

Для начала нам нужно создать новое имя базы данных, набираем в другой вкладке адресной строки браузера localhost/Tools/phpmyadmin/index.php. И попадаем в панель управления базами данных Денвер 3.

Кликаем по вкладке Базы данных. Теперь создадим новую базу данных для Joomla 2.5

Все наша база данных создана и мы возвращаемся в инсталятор Джумла 2. 5

• Тип используемой базы данных любой например: MySQLi
• Имя сервера базы данных: localhost
• Имя пользователя: root
• Имя базы данных: joomla (или другое, какое вы создали)

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

Кликаем «далее» и попадаем в настройки доступа по протоколу FTP. Данный шаг можно смело пропустить. После нас ждет предпоследний этап установки Joomla 2.5, Даем название нашему сайту, выбираем будет ли наш сайт включен для пользователей (на денвере ставьте радио-кнопку на включить и все), введите почту сайта, логин, пароль и обязательно установите демо данные.

Далее удаляем инсталятор ( папка installation  в корне сайта ) и переходим на сайт.

Панель администратора также доступна по адресу ваш_домен.ру/administrator (набираем естественно в строке браузера)

Вот собственно и все. Ваш сайт на CMS Joomla 2. 5 готов, теперь главное научиться с ним работать. Это тоже не так сложно как может показаться на первый взгляд. В дальнейших статьях я покажу как управлять и работать с ЦМС Джумла 2.5.

Как создавать сайты с нуля с помощью HTML и CSS?

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

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

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

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

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

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

Что-то более личное, что многие люди считают более доступным, — это блог.Я уверен, что вы уже были пару раз. Основная идея блога заключается в том, что вы, как создатель, будете писать статьи на тему, которая вас очень интересует. Вам не обязательно иметь степень в этой области, просто быть заинтересованным и увлеченным предметом.

Неважно, по какой причине вы это делаете, создание веб-сайта — один из наиболее эффективных способов улучшить работу в Интернете. И метод, который я вам здесь покажу, является эффективным, его можно использовать для создания любого типа веб-сайта: бизнес-сайт, личный блог, веб-сайт-каталог (например, Yelp) или любой другой.

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

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

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

Во-первых, давайте посмотрим, для чего используются HTML и CCS? HTML означает язык гипертекстовой разметки. Да, проще сказать HTML. Идея этого языка — помочь пользователю создать разметку веб-сайта.Думайте об этом как о скелете. Все остальное построено на этом фундаменте. Чуть позже в статье вы увидите, как этот язык используется для создания веб-сайтов.

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

А теперь давайте начнем с первого, что вам нужно сделать. Чтобы все было проще, просто создайте новую папку на рабочем столе под названием «сайт».Мы поместим все файлы сайта в эту папку для облегчения работы. Создав папку, откройте ее и создайте новый файл с именем «index.html». Важно, чтобы в конце имени вы указывали расширение .html. Это поможет нам в дальнейшем просмотреть веб-сайт в окне браузера. При желании вы также можете сохранить созданный нами файл как HTML-документ позже. Это действительно зависит от ваших предпочтений.

Поскольку вы уже находитесь в этой папке, создайте новый файл еще раз и назовите его style. css ’’. Как и раньше, не забудьте указать правильное расширение: расширение .css в конце имени. В этом файле нам нужно будет написать все стили для нашего простого веб-сайта.

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

[код]

[/ code]

Все, что вы только что написали, — это HTML-код.Части, которые выглядят так: , называются тегами. Большинство тегов состоят из двух сторон: открывающего и закрывающего тегов ( и ). По сути, это разные части сайта. Первый тег, который вы написали, предназначен для того, чтобы компьютер знал, что это документ HTML.

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

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

Для этого выполните следующий шаг: добавьте этот код в теги тела:

[code]

Вы можете добавить сюда свой первый абзац

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

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

[код]

Как я уже упоминал, код, который я только что написал, находится внутри тегов. Подведем итоги того, что мы сделали до сих пор: сначала вы создали 2 файла, один с именем index.html и один с именем style.css. Следующим шагом было открыть файл index.html и отредактировать его, как мы сделали выше. Итак, ваш HTML-код пока должен выглядеть так:

[код]

[/ code]

Проверьте, все ли правильно.А теперь, если все хорошо, пойдем дальше. Если вы просмотрите свой HTML-файл в окне браузера, вы не увидите ничего впечатляющего. Здесь на сцену выходит файл style.css. Перед тем, как открыть его, нам нужно связать его с нашей существующей HTML-страницей. Для этого напишите код, который вы найдете ниже, в тегах :

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

Добавление правил CSS

Теперь вы можете открыть файл CSS в Блокноте, и мы приступим к оформлению веб-сайта. Чтобы иметь возможность добавить стиль, мы будем ссылаться на идентификаторы наших уже созданных разделов: контейнера, заголовка, боковой панели, основного содержимого и нижнего колонтитула. Код вашего файла CSS будет выглядеть так:

[код] тело {фон: белый; маржа: 0; заполнение: 0;}

а {цвет: # 2b2bf6;}

#container {width: 1000px; маржа: 0; отступ: 0; фон: #dddddd;}

#header {ширина: 1000 пикселей; высота: 150 пикселей; маржа: 0; отступ: 0; граница: 0; фон: # 3bcce1;}

#sidebar {ширина: 300 пикселей; высота: 400 пикселей; маржа: 0; отступ: 0; граница: 0; плыть налево; фон: # fff600;}

#main content {width: 700px; высота: 400 пикселей; маржа: 0; отступ: 0; граница: 0; плыть налево; фон: # d7f7fd;}

#footer {width: 1000px; высота: 70 пикселей; маржа: 0; отступ: 0; граница: 0; плыть налево; фон: # 261c69; clear: both;} [/ code]

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

«a» обозначает ссылки, которые мы добавим в файл index.html. Мы меняем цвет, чтобы пользователь мог знать, что он нажимает на ссылку.

Другие элементы, начинающиеся с #, представляют теги div, которые мы добавили в качестве различных разделов. Поскольку у нас есть 5 тегов div, мы не можем стилизовать их отдельно, ссылаясь на слово div. Чтобы сделать это правильно, вы должны указать идентификатор для каждого тега div: контейнер, заголовок и так далее.

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

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

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

[code] Это ссылка [/ code]

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

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

Выход в Интернет

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

Мы поговорим об обоих прямо сейчас. Начнем с доменного имени.

Вы, наверное, уже знаете, что у любого веб-сайта должно быть доменное имя. По сути, это само название конкретного веб-сайта. Например, у Google есть домен google.com или у YouTube есть домен youtube.com. Любое доменное имя отображается в адресной строке конкретного веб-сайта.

Чтобы ваш веб-сайт заработал, вам нужно понять, как он будет называться и какую тему вы на нем затронете. Чтобы облегчить вам задачу, подумайте о следующем примере: допустим, вы хотите создать блог-сайт о фильмах. Конечно, вашему сайту потребуется название, связанное с фильмами. Но если быть более точным, вам нужно имя, которое точно соответствует тематике вашего сайта. Если вы говорите о научно-фантастических фильмах, вы хотите назвать это соответствующим образом, а не просто movies.com. Идея состоит в том, что вам нужно придумать название, которое действительно хорошо соответствует теме вашего сайта.Сайт о научно-фантастических фильмах можно было бы назвать: Sci-Fi For All. Доменом для этого может быть sciforall.com.

При выборе доменного имени лучше всего использовать расширения . com или .net. Возможно расширение вашей страны. Но оставьте такие странные, как .xyz или .blog. Они не очень эффективны, если вы хотите привлечь трафик на свой веб-сайт, а домен .com или .net выглядит гораздо более профессиональным.

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

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

Это американская хостинговая компания, обслуживающая веб-сайты по всему миру. Он поставляется со многими услугами.Например, некоторые из возможностей хостинга, которые они предоставляют, включают общий хостинг, хостинг VPS, облачный хостинг, выделенный хостинг и хостинг WordPress. В нашем случае виртуальный хостинг — лучший выбор, поэтому мы рассмотрим его прямо сейчас.

Как и большинство хостинговых услуг, общий хостинг BlueHost также предлагается в трех отдельных планах. Это:

1. Basic за 3,95 долл. США в месяц
2. Plus за 5,95 долларов США в месяц
3. Choice Plus за 5,95 долларов США в месяц (это цена без ошибок)

Базовый план

Базовый пакет предназначен для тех, кто только начинает работу с новым сайтом.В вашем случае это может быть хорошим выбором. Что он предлагает по этой цене? Давайте посмотрим! Для начала вы получаете 50 ГБ SSD-накопителя вместо традиционного жесткого диска. Это отличный профи, потому что ваш сайт будет загружаться намного быстрее, когда посетитель зайдет на него.

Они также добавляют неограниченную пропускную способность и 5 профессиональных учетных записей электронной почты ([электронная почта защищена]). Эти электронные письма могут оказаться важным активом при дальнейшем улучшении сайта. Посетители узнают, что имеют дело с профессионалом в определенной области.

Если вы решите платить вперед на целый год, BlueHost предоставит вам бесплатное доменное имя на целый год. Да, вам не нужно ничего платить за свое первое доменное имя. И в довершение всего, они дадут вам бесплатный сертификат SSL для использования на вашем веб-сайте.

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

Plus и Choice Plus

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

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

Но в чем разница между этими двумя планами? Единственное отличие состоит в том, что план Choice Plus также предоставит вам конфиденциальность 1 домена и CodeGuard Basic для резервного копирования веб-сайта.

Если вы ищете более полный пакет услуг, план Choice Plus может стать вашим лучшим выбором.

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

Помимо BlueHost, есть бесчисленное множество других веб-хостинговых компаний, на которые стоит обратить внимание (SiteGround, InMotion Hosting, A2Hosting, HostGator, Hostinger, GreenGeeks и т. Д.). Одна из лучших альтернатив BlueHost — Hostinger. У них очень низкие цены с множеством функций, включенных во все их планы.

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

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

Как создать веб-сайт с использованием HTML и CSS за 7 шагов • Код для Интернета

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

Просто примечание …

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

Конечный продукт

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

К сожалению, ваш браузер не поддерживает встроенные видео.

Это будет вымышленный сайт о ламе Боберике (иногда у меня возникают самые странные идеи …)

1. Спланируйте свой макет

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

Помните, не обязательно хорошо выглядеть. Вот мой:

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

В этом макете у меня есть заголовок (панель навигации), три раздела и нижний колонтитул.

2.Установите «шаблонный код»

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

Сделайте это с помощью:

1. Создание новой папки на вашем компьютере для веб-сайта
2. Создайте новые пустые файлы index.html и style.css внутри
3. Добавьте базовый «шаблонный код» в ваш индекс .html файл:

  

    
        
        
    
    
         
 Просто проверяю, как это работает! 
 
    

  

Наконец, откройте свой index.html в веб-браузере, чтобы проверить, все ли работает:

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

Если да, то для начала следуйте инструкциям выше!

3.Создайте элементы в макете

Теперь пора создать элементы макета / сечения, которые вы запланировали на шаге 1!

Лучший способ сделать это — использовать семантические элементы:

Обратите внимание, что мы даем

  

    
        
        
    

    
        <заголовок>
            
            
        
        <основной>
            <раздел>
                

                    
                     
 Привет, я лама Боберик. 
 
                
            

Если вы перезагрузите страницу, вы увидите, что теперь у нас есть некоторый контент!

5.Добавьте базовый макет CSS

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

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

Вот CSS, который мы добавим в наш style.css :

  body {
    маржа: 0;
    маржа сверху: 50 пикселей;
}

header {
    дисплей: гибкий;
    положение: фиксированное;
    верх: 0;
    слева: 0;
    справа: 0;
    высота: 50 пикселей;
    высота строки: 50 пикселей;
    цвет фона: #eee;
}

header * {
    дисплей: встроенный;
    высота: 50 пикселей;
}

header ul {
    отступ: 0;
}

header li {
    маржа слева: 20 пикселей;
}

раздел {
    высота: 100vh;
    граница: сплошной черный 1px;
    дисплей: гибкий;
    justify-content: center;
    align-items: center;
    выравнивание текста: центр;
}

#hero.profile-img {
    ширина: 300 пикселей;
}

нижний колонтитул {
    выравнивание текста: центр;
    отступ: 50 пикселей;
}
  

Здесь мы добавляем стили только для того, чтобы наш общий макет выглядел похожим, а не отдельный контент. Мы следим за тем, чтобы секции были установлены на 100% высоту области просмотра, чтобы заголовок имел фиксированное положение, позиционировал элементы в заголовке и т. Д. Мы также используем гибкие блоки для центрирования содержимого в наших разделах.

Это результат:

К сожалению, ваш браузер не поддерживает встроенные видео.

6. Добавьте более конкретные стили

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

Теперь мы можем сделать наш сайт лучше!

Вот наш CSS:

  body {
    маржа: 0;
    маржа сверху: 50 пикселей;
    семейство шрифтов: без засечек;
}

header {
    дисплей: гибкий;
    положение: фиксированное;
    верх: 0;
    слева: 0;
    справа: 0;
    высота: 50 пикселей;
    высота строки: 50 пикселей;
    цвет фона: #eee;
}

header * {
    дисплей: встроенный;
    высота: 50 пикселей;
}

header ul {
    отступ: 0;
}

header li {
    маржа слева: 20 пикселей;
}

раздел {
    высота: 100vh;
    граница: сплошной черный 1px;
    дисплей: гибкий;
    justify-content: center;
    align-items: center;
    выравнивание текста: центр;
}

#hero.profile-img {
    ширина: 300 пикселей;
    радиус границы: 50%;
}

нижний колонтитул {
    выравнивание текста: центр;
    отступ: 50 пикселей;
}



#hero h2 {
    размер шрифта: 3em;
}

section h3 {
    размер шрифта: 2.5em;
}

section h4 {
    размер шрифта: 1.5em;
}

header a {
    текстовое оформление: нет;
    черный цвет;
}
  

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

Вот результат:

К сожалению, ваш браузер не поддерживает встроенные видео.

7. Добавляем цвета и фон

Ура, мы на финише! Пришло время добавить последние штрихи к нашему сайту — цвета и фоны!

Это то, что сделает наш сайт действительно потрясающим.

Вот код CSS:

  body {
    маржа: 0;
    маржа сверху: 50 пикселей;
    семейство шрифтов: без засечек;
}

header {
    дисплей: гибкий;
    положение: фиксированное;
    верх: 0;
    слева: 0;
    справа: 0;
    высота: 50 пикселей;
    высота строки: 50 пикселей;
    цвет фона: #eee;
}

header * {
    дисплей: встроенный;
    высота: 50 пикселей;
}

header ul {
    отступ: 0;
}

header li {
    маржа слева: 20 пикселей;
}

раздел {
    высота: 100vh;
    граница: сплошной черный 1px;
    дисплей: гибкий;
    justify-content: center;
    align-items: center;
    выравнивание текста: центр;
    
    размер фона: обложка;
    background-position: center center;
    фон-повтор: без повторения;
    background-attachment: исправлено;
}

#hero.profile-img {
    ширина: 300 пикселей;
    радиус границы: 50%;
}

нижний колонтитул {
    выравнивание текста: центр;
    отступ: 50 пикселей;
}

#hero h2 {
    размер шрифта: 3em;
}

section h3 {
    размер шрифта: 2.5em;
}

section h4 {
    размер шрифта: 1.5em;
}

header a {
    текстовое оформление: нет;
    черный цвет;
}



#hero {
    background-image: linear-gradient (rgba (255,255,255,0.75), rgba (255,255,255,0.75)), url ('https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/ field.jpg ');
}

#о {
    фоновое изображение: линейный градиент (rgba (255,255,255,0.75), rgba (255,255,255,0.75)), url ('https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/beach.jpg');
}

#контакт {
    background-image: linear-gradient (rgba (255,255,255,0.75), rgba (255,255,255,0.75)), url ('https://codetheweb.blog/assets/img/posts/steps-to-creating-a-website/ canyon.jpg ');
}
  

Как видите, мы добавили несколько общих стилей фона к элементам раздела , а также добавили фоновое изображение в каждый раздел по отдельности.

Причина линейного градиента (rgba (255,255,255,0,75), rgba (255,255,255,0,75)), перед URL-адресом ('image.jpg') заключается в том, что в противном случае текст трудно читать — поэтому добавляем сверху полупрозрачную белую накладку. Я написал немного больше об этом в своей статье о том, как создать изображение героя на всю страницу.

8. Празднуйте! 🎉

Ух! Наконец-то ваш сайт готов! Теперь покажите это своим друзьям, семье и всему Интернету 😉

Дополнительная литература

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

1. Как создать полную -page hero image
2. Как стилизовать панель навигации с помощью CSS

Заключение

Итак, я надеюсь, вам понравилась эта статья, и, надеюсь, вы кое-что узнали в процессе!

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

Если вам понравилась эта статья, будьте отличным человеком и поделитесь новостной рассылкой или подпишитесь на нее, я дам вам бесплатный тако (не совсем)

Получайте удовольствие, продолжайте кодировать, и увидимся в следующий раз, где «Я расскажу о том, как стилизовать панель навигации (заголовок) с помощью CSS, — проведя вас через панель навигации, которую мы создали сегодня, но более подробно.Тогда увидимся!

Эту статью предложила Алиса Дубик-Уилсон — спасибо! Если вы также хотите предложить статью, вы можете связаться со мной или рассказать в комментариях.

Как создать сайт без знания кодирования

Добро пожаловать в Coding Corner! Сегодня мы рассмотрим тему, о которой меня много спрашивали в последнее время: создание веб-сайта.

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

В 1996 году, если вы хотели создать свой собственный веб-сайт, у вас было два варианта: присоединиться к хостинговому сайту, например Tripod или Geocities, и иметь ограниченный контроль над своим присутствием в Интернете, или создать свой собственный с нуля, используя HTML. Но времена — к счастью — изменились.

Встречайте сокращения: WYSIWYG, HTML, CSS, PHP, WTF?

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

Ваш современный веб-сайт обычно состоит из трех частей: HTML, CSS и Javascript.

HTML

HTML означает «язык разметки гипертекста». Он был основой Интернета с самого начала и для создания элементов использует слова, окруженные шевронами (<>), называемые «тегами»; эти элементы помогут вам организовать и структурировать вашу веб-страницу. Какой-нибудь контент вы видите в сети? Он окружен HTML.

CSS

CSS, или «Каскадные таблицы стилей», — это язык дизайна современной сети. Он берет вашу HTML-структуру и делает ее красивой: CSS использует код, называемый селекторами, для определения типа HTML, который вы хотите украсить, а затем использует свойства и значения CSS для изменения его внешнего вида.

Javascript (и другие языки сценариев)

Javascript позволяет сделать обычно статические веб-страницы интерактивными: галереи изображений в стиле лайтбоксов, страницы с плавной прокруткой (например, те, которые предпочитает Apple) и веб-игры используют различные функции Javascript.

Существуют и другие языки сценариев, которые вы также можете использовать в Интернете, включая PHP, Ruby и Java, которые позволяют выполнять более сложные и динамические действия на вашем веб-сайте.

Аббревиатуры «Don’t Panic»: WYSIWYG и CMS

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

Вам не нужно знать, как писать HTML, или куда помещать CSS, или как работает JavaScript — и все благодаря двум другим аббревиатурам: WYSIWYG и CMS.

Вам не нужно знать, как писать HTML, CSS или JavaScript, благодаря двум другим аббревиатурам: WYSIWYG и CMS.

WYSIWYG означает «Что видишь, то и получаешь». Впервые он был использован в середине 1990-х годов для помощи людям, не имеющим опыта работы с HTML, в создании веб-сайтов. Вместо того, чтобы писать код, чтобы сделать фон вашего веб-сайта синим или зеленым, вы можете просто выбрать «синий» или «зеленый» из раскрывающегося меню, и ваш веб-сайт изменится соответствующим образом.Многие современные веб-сервисы в Интернете, включая такие места, как Squarespace, работают по этому принципу.

CMS, или «Система управления контентом», позволяет вам вводить контент на ваш сайт, даже не касаясь кода страницы. Вы когда-нибудь писали на Tumblr или Medium? Это обе CMS для блогеров.

Как создать веб-сайт, если не знаешь, как кодировать

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

Шаг 1. Понимание доменов и хостинга

Чтобы иметь веб-сайт, вам нужны две вещи: доменное имя (которое сообщает вам, куда идти в Интернете) и хостинг (который хранит ваши файлы — да, каждый веб-сайт — это просто набор файлов — где люди могут получить доступ их). Большинство современных услуг предлагают некоторые вариации того и другого; и многие из рекомендованных ниже сервисов предлагают индивидуальную регистрацию доменного имени верхнего уровня как часть своих платных пакетов.Но стоит ли вам этим воспользоваться?

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

Одна из причин, по которой , а не , воспользоваться преимуществами платного бесплатного доступа, заключается в том, что вам нужно специальное расширение TLD, отличное от «.com «,» .edu «или» .net «, например. Многие разработчики веб-сайтов не предлагают регистрацию для менее известных TLD, отчасти потому, что они могут быть значительно дороже в год; вместо этого проверьте домен сервис регистрации, такой как Hover. У вас не должно возникнуть проблем с подключением домена, зарегистрированного вне домена, к вашему сайту.

Если вы используете бесплатную службу, вам может быть автоматически предоставлен субдомен (например, «[ваше имя] .tumblr.com»), но служба также может предлагать регистрацию домена верхнего уровня (TLD), например » [Ваше имя].com »за фиксированную плату в год. В этом случае я бы рекомендовал использовать отдельную службу регистрации для любых доменов верхнего уровня, поскольку вы не получаете ее бесплатно.

Шаг 2. Мне нужна платная или бесплатная услуга?

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

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

Бесплатные сервисы также используют субдомены для вашего хостинга, то есть что-то вроде «[ваше имя] .tumblr.com» по сравнению с доменом верхнего уровня «[ваше имя] .com». Ваш веб-URL, вероятно, будет навсегда привязан к службе, если вы не потратите немного больше на собственное доменное имя.

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

Итак, вопрос: сколько вы должны платить за услуги веб-сайта?

Когда дело доходит до платных услуг, вы можете рассчитывать платить от 7 до 10 долларов в месяц за хостинг типичного личного сайта или веб-сайта для ведения блога. (Возможно, вам также придется заплатить 10-15 долларов в год за свое доменное имя, о чем мы упоминали в предыдущем разделе.) Если вы хотите разместить интернет-магазин или планируете сделать что-то более сложное, например, предоставлять большие файлы (например, видео), вам подойдет диапазон от 15 до 30 долларов в месяц. (Обратите внимание, что мы в первую очередь говорим о личных веб-сайтах, здесь: если ваш сайт станет бизнесом с постоянным трафиком, ваши расходы на хостинг могут резко возрасти.)

Шаг 3. Выберите веб-сайт службы

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

Базовый платный веб-сайт или магазин: Есть причина, по которой Squarespace имеет такое признание в области платных веб-сайтов для начинающих, и не только потому, что они покупают рекламу на всех мыслимых подкастах. Их шаблоны великолепны, интерфейс редактирования превосходен, и вам не нужно знать клочок HTML или CSS, чтобы сделать что-то красивое и настроенное по своему вкусу. Планы Squarespace начинаются с 96 долларов в год или 12 долларов в месяц и включают 20 страниц, неограниченную пропускную способность и бесплатную регистрацию домена; план «Бизнес» за 216 долларов в год дает вам неограниченное количество страниц, а также позволяет иметь витрину с 25 продуктами.

Художественное портфолио : Если вам нужен веб-сайт, посвященный искусству или мультимедиа, скорее всего, у вас уже есть подписка на продукты Adobe Creative Cloud. Если вы это сделаете, вы можете настроить великолепное отображение своих работ с помощью веб-сайта Adobe Portfolio: хотя в настоящее время сайт ограничен всего пятью шаблонами, он предлагает впечатляющий способ отображения и интеграции проектов из ваших приложений Adobe (или Adobe Behance социальная сеть) для Интернета. Вы можете использовать субдомен или собственное доменное имя, приобретенное за пределами домена.Если вы не являетесь подписчиком Adobe Creative Cloud, вы можете получить доступ к Adobe Portfolio вместе с подписками на Photoshop и Lightroom CC за 9,99 долларов США в месяц.

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

Есть несколько отличных веб-хостингов, и у каждого есть свое мнение о том, какая компания действительно лучшая, но за эти годы мне исключительно повезло с Dreamhost. С середины 2000-х я разместил несколько личных сайтов через Dreamhost; компания преуспевает в том, чтобы сделать веб-хостинг максимально дружественным, и предлагает массу «приятностей в один клик», которые позволяют автоматически устанавливать CMS на ваш веб-сайт, так что вам никогда не придется касаться кода. Хотите удобство WordPress или веб-сайт в стиле Википедии на собственном сервере? Без проблем.

Шаг 4: Приступайте к строительству!

После того, как вы выбрали веб-службу, это так же просто, как собрать шаблон и загрузить нужные изображения на свой веб-сайт. Если вы хотите украсить свой готовый шаблон веб-сервиса своим собственным чутьем, я рекомендую найти хорошую (и отличающуюся) цветовую палитру: Coolors предлагает замечательный генератор цветов, который позволяет вам «заблокировать» определенные цвета (например, те, что в ваш логотип) и использует их для создания дополнительной цветовой схемы для вашего сайта.

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

Вопросы?

И это касается этого выпуска Coding Corner. Все еще есть вопрос о создании веб-сайтов для новичка? Дайте мне знать в комментариях, и я посмотрю.

Мы можем получать комиссию за покупки, используя наши ссылки.Учить больше.

Как кодировать веб-сайт с нуля! 5 простых шагов

Какие существуют типы языков программирования?

Языки программирования для веб-сайтов делятся на две основные категории: интерфейс и серверная часть. Языками программирования веб-страницы для Frontend являются HTML, CSS и JavaScript.

Языки интерфейса:

• Язык разметки гипертекста (HTML) — этот язык используется для форматирования веб-страниц и организации элементов на веб-странице.Он состоит из открывающих и закрывающих тегов, каждый из которых имеет определенную задачу. Например, тег заголовка используется для написания заголовка веб-страницы в адресной строке.
• Каскадные таблицы стилей (CSS) — Как следует из названия, CSS используется для стилизации веб-страниц. Например, вы можете использовать CSS для определения шрифта веб-сайта, размера шрифта, цветов и т. Д. CSS можно записать в один файл и многократно использовать для множества элементов на веб-странице.
• JavaScript (JS) — JavaScript используется для повышения интерактивности веб-сайтов.Допустим, вы создали кнопку и хотите, чтобы при нажатии на нее отображалось сообщение. Вы можете использовать JavaScript для написания этой функции.

Языки серверной части

Серверная часть может быть написана на любом языке, поддерживающем веб-разработку. Вы можете использовать JavaScript на стороне сервера, используя NodeJS, Python, Ruby или PHP. Одной из наиболее часто используемых программ для разработки веб-сайтов является PHP. В этом руководстве мы сосредоточимся на PHP как языке сценариев.

PHP:

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

Из этого туториала Вы узнаете:

Как кодировать веб-сайт — полное руководство для начинающих

В этом подробном руководстве мы научим вас, как создать веб-сайт с нуля и написать весь код самостоятельно, или вы можете использовать существующую платформу, такую ​​как WordPress, Joomla и т. Д.

В этом полном руководстве мы рассмотрим следующие темы.

• Создание с нуля Vs. с использованием системы управления контентом
• Создание веб-сайта с нуля с использованием фреймворка (PHP MVC Framework)
• Создание веб-сайта с использованием системы управления контентом (WordPress)

Базовая концепция HTML

Документ HTML — это текстовый файл, который содержит теги и элементы HTML и обычно заканчивается расширением файла .html.

HTML также может быть встроен в файлы с расширениями других языков сценариев, например *.php, * .jsp или * .asp.

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

Вот шаги, которые помогут вам создать веб-сайт:

Шаг 1) Щелкните правой кнопкой мыши веб-страницу, чтобы отобразить всплывающее меню.

Шаг 2) Выберите Просмотр источника страницы.

Шаг 3) HTML-код будет отображаться в виде обычного текста, и вы сможете увидеть HTML-теги и элементы, составляющие страницу.

Вы также можете увидеть некоторые CSS и JavaScript, встроенные или включенные как отдельные внешние файлы.

Функция веб-браузера заключается в переводе HTML-документа в удобочитаемый формат. Браузер также обрабатывает JavaScript, включенный в веб-страницу.

Понять структуру HTML-документа.

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

Все документы HTML заключены в тег HTML. В теге HTML у вас будут другие теги, такие как голова и тело. Тег заголовка содержит другие теги, например заголовок для отображения заголовка страницы. Он также включает ссылки на внешние файлы для стилей CSS, JavaScript и метаданных.Тег body содержит элементы, составляющие веб-страницу. Элементами внутри тега body могут быть div, таблицы, списки и т. Д.

 


    
    
    
    
    


     
 Добро пожаловать на мою первую веб-страницу 
 


 

Пояснение:

• определяет тип документа, который является HTML
• … определяет тег HTML с атрибутом языка, который указывает язык веб-сайта.
• В этом простом примере языком веб-сайта является английский. Внутри открытого и закрывающего HTML-тега у нас будут такие теги, как head и body, которые, в свою очередь, включают другие теги и элементы.
• … определяет тег заголовка, который содержит в себе метаданные.
• … определяет тело, которое содержит содержимое веб-сайта.

Познакомьтесь с селекторами CSS

CSS выбирают элементы на веб-странице, которые вы хотите отформатировать на основе определенных правил CSS.

CSS-селекторов делятся на пять основных категорий, а именно:

Составьте таблицу стилей CSS

В этом разделе будет создан простой документ стилей CSS, который выполняет простую стилизацию, определяя следующие правила стилей.

• Центрировать текст на основе центра класса: Это правило центрирует текст и меняет цвет текста на красный.
• Форматирование текста на основе идентификатора элемента: Мы создадим правило стиля для заголовка идентификатора, которое изменит цвет на оранжевый, выделит жирность шрифта и изменит регистр текста на верхний регистр.
• Форматирование текста на основе номера элемента заголовка 2: Это правило устанавливает синий цвет текста заголовка и устанавливает размер шрифта 60 пикселей.

Следующий код определяет документ CSS с указанными выше правилами.

 .center {
    выравнивание текста: центр;
    красный цвет;
}
#заглавие {
    оранжевый цвет;
    текст-преобразование: прописные буквы;
    font-weight: жирный;
}
h3 {
    размер шрифта: 60 ​​пикселей;
    цвет синий;
}
 

Объясняет:

• .center {…} — определяет центр правил класса, который выравнивает текст по центру и изменяет цвет шрифта.
• #title {…} — определяет правило заголовка, которое изменяет цвет шрифта, переводит все буквы в верхний регистр и изменяет начертание шрифта на полужирный.
• h3 {…} — определяет правила, которые будут применяться ко всем элементам h4. Размер шрифта будет установлен на 60 пикселей, а цвет шрифта будет обновлен до синего.

Загрузить / установить Bootstrap

Bootstrap — это CSS-фреймворк с большим количеством стилей, которые вы можете сразу же использовать. Он содержит стили для макетов и элементов форматирования.

Вы можете написать свои стили CSS, которые изменяют настройки по умолчанию для начальной загрузки CSS. Для этого вы можете либо загрузить Bootstrap прямо с официального сайта, либо включить его в свой HTML-документ из сети доставки контента (CDN).

В качестве альтернативы вы можете использовать инструмент управления пакетами, например Node Package Manager (NPM), для установки Bootstrap, но он предназначен для опытных веб-разработчиков. Чтобы загрузить Bootstrap, вы можете щелкнуть эту ссылку здесь и использовать ее в своем проекте, как и любой другой файл CSS и JavaScript.

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

Роль HTML и CSS

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

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

Общие сведения об общих терминах HTML

Давайте теперь рассмотрим некоторые общие термины HTML, с которыми вы должны быть знакомы как веб-разработчик.

Общие сведения об общих терминах CSS

Ниже приведены некоторые общие термины CSS, с которыми вы должны быть знакомы.

Редакторы HTML

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

Давайте посмотрим на некоторые из популярных вариантов:

Код Visual Studio:

Visual Studio Code — это кроссплатформенный редактор кода, разработанный Microsoft. Вы можете использовать Visual Studio Code для редактирования кода для многих языков, включая HTML, CSS, JavaScript и PHP.Visual Studio Code бесплатен и работает в Windows, Mac и Linux.

Возвышенный текст:

Sublime Text — это кроссплатформенный редактор кода, который также можно использовать для написания и редактирования кода HTML, CSS, JavaScript и PHP. Это коммерческий продукт, и вам необходимо его приобрести. Вы также можете использовать его бесплатно в незарегистрированном режиме.

Блокнот ++

Notepad ++ — это легкий редактор кода, который также поддерживает множество языков. В отличие от Visual Studio Code и Sublime Text, Notepad ++ не является кроссплатформенным.Работает только на платформе Microsoft Windows.

IDE NetBeans

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

Создание вашей первой веб-страницы

Давайте теперь создадим простую веб-страницу. Здесь мы создали простой HTML-документ и применили некоторые стили с помощью Bootstrap CSS. У нас также будет интерактивная кнопка, которая будет отображать простое сообщение с использованием JavaScript.

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

Шаг 1) Откройте ваш любимый текстовый редактор.

Здесь мы открываем блокнот.

Шаг 2) Создайте новый файл.

с именем index.html.

Шаг 3) Добавьте следующий код,

в файл index.html.

 



    
    

    

    
    <сценарий>
    function displayMessage () {
        document.getElementById ("сообщение"). innerHTML = "Привет из JavaScript!";
    }
    


    

         
 Мое веб-приложение! 
 
        
 Ваше сообщение появится здесь.
         Нажми меня! 
    



 

Пояснение:

• определяет тип документа.
• … определяет тег заголовка, который содержит метаданные, невидимые для пользователей.
• Заголовок также содержит тег сценария, содержащий код JavaScript, отображающий приветственное сообщение.
• Мы также загружаем Bootstrap CSS из сети CDN.
• … определяет содержимое нашей страницы: заголовок, абзац и кнопку, которая применяет стиль из Bootstrap CSS.

Создание с нуля Vs. с использованием системы управления контентом

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

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

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

В следующей таблице сравниваются два популярных метода создания веб-сайтов.

Использование фреймворка (PHP MVC Framework)

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

Бэкэнд имеет больше возможностей для языков программирования. Вы можете использовать PHP, Python, Ruby, JavaScript и т. Д. PHP — один из самых распространенных. В этом разделе мы поговорим о технологиях PHP.

Вы можете использовать PHP, поскольку это медленный процесс, поэтому даже программисты, которые создают веб-сайты с нуля, должны использовать среду разработки. Самым популярным из них является фреймворк Model-View-Controller (MVC). Примеры фреймворков PHP MVC включают Laravel, CodeIgniter, Cake PHP, Symfony и т. Д.

MVC предоставляют следующие возможности:

• Встроенная связь с базой данных с библиотеками: Это экономит время на написание кода для безопасного подключения к базе данных для записи и извлечения данных.
• Встроенные модули аутентификации: Это сэкономит вам время на написание кода, который потребует от пользователей входа на сайт и выхода из него, если это необходимо.
• Структурированный код: Шаблон проектирования MVC отделяет бизнес-логику от презентации. Это позволяет легко иметь программиста, который может работать над серверной частью, и веб-дизайнера, который работает над разработкой внешнего интерфейса.
• Пакетов: Это коллекции библиотек, которые выполняют очень специфические задачи.Например, вы можете использовать или загрузить пакет для добавления таких функций, как;
  • Добавление функции комментирования Disqus на ваш сайт
  • Вызов API
  • Интеграция платежного шлюза.

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

Например, вы можете приобрести шаблон HTML, который использует шаблон лезвия, механизм шаблонов, встроенный в платформу Laravel MVC.

Создание веб-сайта с использованием системы управления контентом (WordPress)

В этом разделе мы рассмотрим, как создать веб-сайт с помощью WordPress:

Загрузка WordPress

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

Начало работы с WordPress

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

Веб-хостинг:

Прежде чем начать, вам необходимо иметь доменное имя и учетную запись веб-хостинга. В учетной записи веб-хостинга должен быть установлен PHP и MySQL в качестве ядра базы данных. Вы можете воспользоваться услугами Bluehost, Godaddy или использовать WP Engine, который специализируется на предоставлении управляемого хостинга WordPress.

Установка:

У большинства провайдеров веб-хостинга есть специальные скрипты в административной панели, позволяющие установить WordPress. Если ваш хостинг-провайдер использует cPanel, вы сможете установить WordPress, щелкнув значок WordPress, как показано на изображении ниже:

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

Настройки:

Раздел настроек позволяет вам настроить такие вещи, как имя сайта, постоянные ссылки URL, часовой пояс, может ли кто-либо зарегистрироваться на вашем сайте и т. Д.

Шаблон:

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

Плагины:

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

Создатели сайтов:

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

Давайте посмотрим на некоторые из самых популярных веб-конструкторов:

Астра

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

Элементор:

Elementor — это конструктор веб-сайтов для WordPress, который используют более 5 миллионов пользователей. Elementor предлагает как бесплатные, так и премиальные функции.

Beaver Builder:

Beaver Builder — это простой в использовании конструктор веб-сайтов с перетаскиванием для WordPress, который позволяет быстро создавать профессионально выглядящие веб-сайты.

Альтернативы WordPress

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

• Joomla: Joomla — это система управления контентом с открытым исходным кодом, которую можно использовать для публикации контента, дискуссионных форумов, приложений электронной коммерции и т. Д. Она использует PHP в качестве языка программирования и MySQL в качестве механизма базы данных.
• Drupal: Это система управления веб-контентом, которая может создавать личные блоги, корпоративные веб-сайты или управлять знаниями для делового сотрудничества.Drupal написан на PHP и JavaScript.
• MODX: Это система управления контентом с открытым исходным кодом, написанная на PHP. И использует MySQL в качестве движка базы данных. Его можно использовать как в Интернете, так и в интранете.
• Постоянный контакт : это конструктор веб-сайтов, который предоставляет функции перетаскивания. Его можно использовать для создания базовых веб-сайтов и интернет-магазинов.

Резюме:

• Веб-сайты создаются с использованием компьютерного кода.
• Компьютерный код — это удобочитаемые инструкции, которые говорят компьютеру выполнить определенную задачу.
• Веб-сайты можно создавать либо с нуля, либо с использованием существующей платформы, такой как WordPress.
• Создание веб-сайта с нуля занимает больше времени по сравнению с созданием с использованием платформы.
• Создание веб-сайта с нуля более гибкое по сравнению с использованием существующей платформы.
• Языками программирования, используемыми для создания веб-сайтов, являются HTML, CSS, JavaScript, а также языки сценариев для серверной части, такие как PHP, Python, Ruby и т. Д.
• WordPress — это система управления контентом, которую можно использовать для очень быстрого создания веб-сайтов.
• WordPress поддерживает плагины, такие как Astra, Elementor или Beaver Builder и т. Д., Для обеспечения функций дизайна веб-сайтов перетаскиванием.
Фреймворки
• MVC, такие как Laravel или CodeIgniter, можно использовать для ускорения разработки веб-сайтов с нуля.

Следует ли писать код с нуля или по шаблону?

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

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

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

У вас есть навыки для написания кода с нуля?

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

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

Если у вас еще нет навыков для выполнения этого проекта, это не исключает автоматически создания веб-сайта с нуля. Будьте честны с собой: сможете ли вы своевременно получить необходимые навыки? Или для вашего клиента (и вашего здравомыслия) лучше всего отложить этот вопрос и начать с шаблона?

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

У вас есть время написать код с нуля?

Какой крайний срок для этого проекта? У вас есть достаточно времени, чтобы поиграть с этим, или это нужно сделать до вчерашнего дня?

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

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

Нужно ли клиенту понимать код?

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

Если ваш клиент знает только основы HTML и CSS, вы значительно упростите ему жизнь, создав шаблон. Например, использование макета WordPress предоставит им небольшие параметры настройки без необходимости погружаться в код. Им понравится, как легко вы сделали это для них.

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

Макет продвинутый или довольно простой?

Если вы знаете шаблон с точным макетом, которого хотите достичь, зачем вам кодировать его вручную?

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

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

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

Я отказался от Squarespace и создал свой собственный фото-сайт с нуля

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

Squarespace имеет множество преимуществ. У них большой выбор шаблонов, они визуально привлекательны и, как правило, работают для тех целей, для которых они были созданы. Хотите добавить на свой сайт электронную торговлю? Простой. Хотите начать вести блог? Добавьте страницу блога, и все остальное будет сделано за вас. Нужна техническая поддержка? Чат или телефонный звонок на расстоянии.

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

Почему я должен покинуть тщательно созданную и отполированную среду Squarespace? Во многом из-за управления контентом .

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

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

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

Для портфолио это, скорее всего, не такая уж большая проблема, но может быть особенно, если вы используете свой веб-сайт для любых источников дохода.После нескольких лет использования именно это общее отсутствие владения заставило меня покинуть Squarespace и разместить свой веб-сайт где-нибудь еще. Есть что сказать о полном контроле над всеми областями вашего веб-сайта, от мультимедийных файлов, которые вы загружаете, до файлов HTML и CSS, составляющих ядро ​​веб-сайта.

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

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

Часть 1

Выбор хостинг-платформы

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

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

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

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

Перенос домена

Когда вы регистрируете учетную запись Squarespace, вы также, скорее всего, зарегистрируете свое собственное доменное имя (веб-сайт).На самом деле это хорошая функция, которую предлагает Squarespace, поскольку в качестве услуги все автономно. Вы можете настроить свое доменное имя и веб-сайт за 10 минут, необходимых для создания учетной записи; нет необходимости покупать домен у другого провайдера. Это был путь, который я выбрал, когда использовал Squarespace и зарегистрировал свое имя в качестве доменного имени.

Squarespace, к счастью, делает это относительно безболезненным, предлагая инструменты, необходимые для подготовки вашего домена к передаче другому провайдеру.Я выполнил указанные здесь точные шаги и не обнаружил никаких проблем. Передача из Squarespace в Siteground заняла всего 10 минут (хотя, по их оценкам, иногда это может занять до 48 часов). Когда передача домена завершилась, пришло время начать собирать части для этого сайта.

Часть 2

WordPress (CMS) или статический HTML?

Следующим решением было решить, использовать ли мне WordPress или статический HTML / CSS. Сказать, что WordPress — самая используемая CMS в мире, не будет преувеличением.По данным WordPress, 30% веб-сайтов построены с использованием WordPress, в том числе ряд громких имен, таких как The New York Times , Forbes , BBC America , TechCrunch .

Если WordPress достаточно хорош для управления этими веб-сайтами, этого достаточно для управления вашим личным веб-сайтом. Повсеместное распространение WordPress также означает, что услуги хостинга обычно предлагают легкую установку WordPress. Итак, если вы пришли из Squarespace и вам все еще нравится идея CMS, WordPress (или один из многих вариантов) — хороший вариант.

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

Однако есть существенный недостаток, и это, что довольно интересно, управление контентом. CMS, как и WordPress, предназначена именно для этого — управления контентом. Вы можете писать и загружать на страницу через простой в использовании текстовый редактор, а также загружать фотографии, используя любое количество доступных плагинов фотогалереи. Статический HTML требует, чтобы вы напрямую отредактировали HTML-код страницы, а затем загрузили эту страницу через FTP, чтобы заменить старый на новый. Это довольно архаично по сравнению с WordPress или другими системами CMS.Если вы постоянно добавляете новый контент, это не совсем идеальный вариант.

Взвесив преимущества и недостатки как WordPress, так и статического HTML, я выбрал статический HTML. В среде, где современные веб-сайты имеют тенденцию быть многофункциональными, я искал скорость и простоту. Статический HTML / CSS предлагает и то, и другое.

Шаблоны HTML / CSS

У меня нет большого опыта веб-разработки. Я управлял веб-сайтами с помощью CMS, но не создавал веб-сайт с нуля.Я знаком с HTML / CSS на базовом уровне; достаточно, чтобы знать некоторые термины и не многое другое. Единственная информация, о которой я знал, — это шаблоны HTML / CSS.

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

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

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

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

Фотогалерея

Я знал, что создание фотогалереи не будет таким простым делом, если я выберу CMS, такую ​​как WordPress.Поскольку этот веб-сайт более практичный, я знал, что для создания фотогалереи потребуется немного больше работы. Я хотел свести к минимуму не только объем потенциальной работы / кодирования, но также придерживаться своей темы простоты и легкости. Вечер занял солидный, но я наткнулся на утилиту фотогалереи под названием Fresco. Это быстро, легко реализовать и предоставляет множество возможностей настройки для удовлетворения большинства потребностей фотогалереи.

Часть 3

Философия дизайна

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

Шаблоны Squarespace красиво спроектированы и в целом соответствуют многим из самых популярных сегодня тенденций веб-дизайна: растягивающиеся на экран изображения, крупный блочный текст и плавные переходы между элементами. Хотя они приятны, они лично раздражали. У меня было давнее представление о том, как я буду оформлять свой собственный веб-сайт, поэтому мне не пришлось тратить много времени на наброски деталей.Моя основная философия дизайна этого веб-сайта была довольно простой; легкий и быстрый, чистый и аккуратный.

Макет

Я выбрал довольно стандартный макет. Контейнер (часть веб-сайта, которую вы сейчас читаете) имеет ширину 960 пикселей и расположен по центру. Использование Skeleton в качестве шаблона сделало это простым, поскольку это макет по умолчанию. Это рабочее пространство размером 960 пикселей можно разделить на столбцы, чтобы упростить размещение элементов на странице. Например, мои страницы «Главная», «Блог» и «О нас» используют 100% ширину контейнера (все 960 пикселей) или один столбец.

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

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

Шрифты

Выбор правильного шрифта — большое дело. Я бы сказал, что это одно из самых важных решений, которые вам придется принять с точки зрения дизайна.Не помогает то, что доступны тысячи шрифтов. Несколько ключевых соображений помогут значительно сузить поле выбора. Независимо от того, будет ли шрифт использоваться для заголовка или основного текста, вам нужен шрифт, который будет легко читаемым и одинаковым для разных браузеров. К счастью, такие репозитории, как Google Fonts, предлагают динамически размещаемые шрифты, которые будут отображаться независимо от платформы и браузера.

Еще один плюс для Google Fonts в том, что они бесплатны.Не все шрифты бесплатны и часто требуют покупки лицензии. Какими бы удобными ни были шрифты Google Fonts, я считаю, что вам лучше выбрать безопасный для Интернета шрифт.

Безопасный для Интернета шрифт обычно отображается независимо от того, какой браузер вы используете. Я хотел использовать шрифт без засечек, а Arial — это веб-шрифт, доступный для отображения во всех браузерах. Поскольку Arial считается системным шрифтом, мне не приходилось полагаться на Google Fonts для создания стиля. Arial используется как для основного текста, так и для заголовков этого веб-сайта.Хотя у Arial может не быть особого «вау-фактора» дизайна, это один из тех шрифтов, которые подходят практически ко всему; что-то вроде нейтрального цветового эквивалента шрифтов.

Фото

Я понимаю, что фотографии с высоким разрешением, заполняющие экран, очень популярны на веб-сайтах, но это также может означать более медленную визуализацию и, возможно, дорогие загрузки. У Google есть несколько отличных ресурсов по оптимизации изображений, которые стоит прочитать. Их можно найти здесь и здесь. Изображения на этом веб-сайте в среднем имеют размер 200 КБ, что обеспечивает хороший баланс между размером, качеством и скоростью.

Существует ряд программ, которые могут помочь сжать JPEGS без слишком большого ущерба для качества. Некоторые из них включают в себя онлайн-утилиты, такие как TinyJPG и Compressor, а также настольные программы, такие как imageOptim (только для Mac. Я не слишком хорошо знаю, какие параметры доступны для пользователей Windows). Хотя я использовал их, Adobe Photoshop покрывает все мои потребности в сжатии изображений. Если у вас уже есть учетная запись Creative Cloud, нет необходимости добавлять что-либо еще в свой рабочий процесс.Если нет, то упомянутые выше утилиты будут работать нормально.

Часть 4

Рабочий процесс

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

Редактор HTML / CSS

Доступно множество редакторов HTML / CSS, и у меня действительно нет каких-либо конкретных советов, которые можно было бы дать друг другу.Если вы не заядлый разработчик с очень специфическими потребностями, нет особых причин покупать программное обеспечение для редактирования HTML / CSS. Единственный совет, который у меня есть, — это найти тот, у которого есть надежное автозаполнение HTML / CSS и Live Preview.

Автозаполнение HTML / CSS чрезвычайно полезно и помогает избавиться от догадок при кодировании, в то время как Live Preview позволяет просматривать веб-страницу так, как если бы она была в реальном времени и в Интернете. Это полезно при просмотре содержимого страницы перед ее загрузкой на свой веб-сайт. Я выбрал скобки.В основном из-за его простоты и несложного набора функций, а также включения автозаполнения HTML / CSS и Live Preview. Он также допускает расширения, которых много. Я использую Beautify, который помогает упорядочить код HTML / CSS в более удобочитаемой форме.

FTP-клиент

Поскольку это статический веб-сайт, это означает, что я заменяю старые файлы HTML новыми файлами HTML вместе с загрузкой другого содержимого веб-сайта. Хотя услуги хостинга предлагают онлайн-порталы для доступа к вашему FTP-сайту, самый простой путь — через FTP-клиент.FTP-клиенты позволяют сохранять учетные данные для входа в систему для последующего использования, поэтому после входа в систему вы можете просто повторно подключиться. Как и в редакторах HTML / CSS, есть множество FTP-клиентов на выбор, но я использую Filezilla, который доступен как для Mac, так и для Windows. Это бесплатно и выполняет свою работу.

Обработка текста

Для обработки текста я буду использовать и TextEdit, и скобки. TextEdit (эквивалент Блокнота для Mac) предназначен в основном для написания черновика. Как только черновой вариант будет готов, я скопирую его в скобки, чтобы разделить на разделы на HTML-странице, а затем завершу окончательную проверку.Интерактивный предварительный просмотр здесь особенно полезен, так как я могу лучше понять макет страницы до того, как она будет запущена.

Заключение

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

Об авторе : Мэтью Нордхаген — фотограф-любитель из Александрии, штат Вирджиния. Мнения, выраженные в этой статье, принадлежат исключительно автору. Вы можете найти больше его работ на его сайте. Эта статья также была опубликована здесь и здесь.

Как я создал свое дизайнерское портфолио с нуля | автор: Jingyi Lai

После использования шаблонов для моего портфолио в течение 1 года на Wix и 3 года на Format, я решил внести изменения — создать свой собственный сайт портфолио.

Есть две причины: Цена и настройка.

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

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

WordPress — это популярный инструмент CMS, который легко настраивается, а также имеет интерфейс для редактирования контента без необходимости касаться кода.

Webflow Альтернатива WordPress с большей поддержкой визуального дизайна.

Semplice Единовременный платеж со всем функционалом.

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

Я потратил около на 2 месяца , чтобы закончить все, включая дизайн и разработку. Ну, конечно, я тоже работал полный рабочий день, так что мог делать все это только по выходным и ночью. Если бы мне не нужно было работать, мне бы, наверное, понадобился всего 1 месяц или меньше.

Оглядываясь назад, я думаю, что процесс создания портфолио похож на работу, которую мы делаем каждый день как дизайнер.Само портфолио также представляет собой цифровой продукт с целевой группой пользователей и конкретными сценариями использования. Я читал что-то вроде того, что дизайнеры тоже должны создавать портфолио. Точно! Здесь также можно использовать типичный процесс UX-дизайна, которому мы следуем.

Я хотел бы поделиться своими результатами на каждом этапе и с нетерпением жду ваших комментариев!

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

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

А как насчет пользователей? В данном случае это не настоящий «пользователь». Но мы все надеемся, что посетители нашего сайта портфолио смогут получить необходимую им информацию. , например, понять, как я работаю дизайнером, просмотрев предыдущие проекты, узнать мой процесс проектирования и получить мою контактную информацию, такую ​​как электронная почта, блог и социальные медиа.

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

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

Я выбрал 3 самых больших проекта, которые я сделал в nanopay: Merchant Portal, B2b Portal и эксперимент системы дизайна. Я заметил, что все мои проекты посвящены веб-платформе, поэтому я также разместил два побочных проекта о мобильных приложениях, просто чтобы продемонстрировать свой опыт в дизайне мульти-платформы.

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

Резюме — Одно или два предложения с описанием проекта.

Справочная информация — Дайте аудитории контекст. Почему мы создали этот продукт? Какие факторы влияют на это решение? Есть какие-то бизнес-требования?

Исследование — Кто пользователи? Каковы их мотивация и цели? Что их беспокоит и каковы их потребности? Каковы их точки соприкосновения на пути к продукту и что можно улучшить? На основе исследования выясните, в чем проблема.

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

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

Оценка — Был ли запущен продукт? Если да, каковы отзывы пользователей? А как насчет данных? Снижение показателя отказов или более активное взаимодействие пользователя с функцией? Это не так, каков текущий статус? А внутренняя обратная связь? Какие уроки мы извлекли? Что можно было бы изменить, если бы мы переделали этот проект?

Первый шаг, который я сделал после того, как у меня появился контент, — это выяснить структуру своего сайта.Я хотел бы, чтобы это было как можно проще, поэтому я решил иметь только две вкладки: Работа (также домашняя страница) и О программе. Я размещаю тематические исследования на странице «Работа», мою биографию и контактную информацию — в разделе «О программе».

Следующее — актуальный дизайн сайта.

Я пошел на компромисс, чтобы сделать мой веб-сайт одной колонкой.