Как создать сайт на компьютере: Как сделать сайт самому бесплатно

Содержание

Как запустить сайт на локальном компьютере

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

Что такое локальный сервер и когда он нужен

Речь идет о программе или наборе программ, которые имитируют работу реальных серверов хостинг-провайдеров. Локальный сервер обеспечивает доступ к ресурсу через браузеры. Набор программ и скриптов преобразует информацию баз данных типа MySQL и языков программирования типа Perl и PHP в HTML- и CSS-код, который «понимают» веб-обозреватели.

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

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

В число наиболее популярных программных решений входят Open Server, Denwer, XAMPP, Desktop Server и другие. Ниже вы найдете руководства по работе с самыми востребованными локальными серверами. Но сначала уделите внимание подготовке ПК.

Как подготовить компьютер к работе с локальным сервером

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

В первую очередь попробуйте изменить настройки Skype. Откройте меню Skype «Инструменты – Настройки – Дополнительно – Соединение». Уберите флаг напротив опции «Использовать порты 80 и 443 для дополнительных входящих соединений». Сохраните изменения и перезапустите программу».

Если изменение настроек Skype не помогает, скорее всего необходимо менять настройки операционной системы. Порт 80 часто занимает служба Internet Information Services (IIS). Чтобы убедиться в этом, введите в командную строку команду netstat -aon | findstr 0.0:80. Если порт 80 действительно занимает системный процесс, в диалоговом окне в последнем столбце вы увидите значение «4».

Чтобы отключить IIS, в панели управления выберите меню «Программы и компоненты – Включение и отключение компонентов Windows». Снимите флаг напротив опции «Службы IIS» и сохраните изменения. Может потребоваться перезагрузка системы.

Если изменение настроек системы не помогло, отключите брандмауэр. Некоторые сетевые экраны блокируют порт 80. Если этот шаг также не помог, скачайте и запустите надстройку для Windows TCP View. Программа не требует установки. С ее помощью вы увидите список активных процессов и используемых портов. Найдите процесс, который занимает порт 80, и отключите связанную с ним программу на время работы с локальным сервером.

Когда порт 80 освобожден, приступайте к установке локального сервера.

Desktop Server: простой способ запустить сайт на WordPress локально

Если вы создаете сайт на WordPress, воспользуйтесь Desktop Server. Скачайте дистрибутив, распакуйте архив и запустите инсталлятор.

Активируйте Desktop Server и воспользуйтесь меню Create New development site. По умолчанию установочный пакет содержит устаревшую версию CMS WordPress. Вы можете скачать и загрузить в папку Xampplite – Blueprints на диске C дистрибутив актуальной версии WordPress.

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

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

Выберите предпочтительный язык. Укажите название сайта, имя пользователя, Email и пароль.

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

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

Как запустить сайт на Open Server

Особенность Open Server — возможность работать без установки ПО на компьютер. Вы можете запускать сервер с USB-накопителя.

Скачайте дистрибутив с официального сайта проекта. Open Server можно использовать бесплатно. Разработчики предлагают сделать пожертвование на развитие проекта. Без платежа скорость загрузки дистрибутива сильно ограничена. Скачивать полный пакет придется несколько часов.

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

Запустите исполняемый файл в папке Open Server и выберите язык.

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

Введите в адресную строку браузера адрес http://localhost/. Вы увидите страницу приветствия.

Теперь установите на локальный сервер выбранную CMS. Для этого создайте новую папку в разделе Domains. Распакуйте в нее архив с дистрибутивом движка.

Перезапустите Open Server с помощью меню в трее.

Введите в адресной строке браузера URL экспериментального сайта. Вы попадете в меню установки CMS.

Для продолжения установки необходимо создать базу данных. Через меню управления Open Server войдите в панель управления phpMyAdmin. Для доступа к серверу введите имя пользователя root, а поле «Пароль» оставьте пустым.

В панели управления phpMyAdmin выберите вкладку «Базы данных» и создайте БД экспериментального сайта.

В меню установки WordPress укажите название БД и имя пользователя. Завершите установку: укажите название сайта, имя пользователя, пароль, электронный адрес администратора.

Теперь вы можете работать с сайтом на локальном сервере.

После окончания разработки перенесите его на сервер хостинг-провайдера.

Мы делаем сайты, которые оптимизированы под поисковики и приносят продажи. Обращайтесь! Подробнее

Как работать с локальным сервером Denwer

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

Скачайте дистрибутив с сайта проекта. Закройте браузеры и запустите установщик. Используйте подсказки в диалоговом окне инсталлятора. После завершения установки браузер откроет окно приветствия. Запустить программу можно с помощью ярлыка на рабочем столе Start Denwer.

В адресную строку браузера введите URL http://localhost/denwer/. Вы попадете на стартовую страницу локального сервера Denwer.

Чтобы установить CMS на локальный сервер «Денвер», создайте раздел с названием сайта в папке WebServers – Home. В разделе создайте еще одну папку с именем www. Распакуйте в нее архив с дистрибутивом движка.

Создайте базу данных экспериментального сайта в разделе управления phpMyAdmin. Для этого введите в адресную строку браузера адрес http://localhost/tools/phpMyAdmin/.

Перезапустите локальный сервер с помощью ярлыка Restart Denwer на рабочем столе. Установите WordPress. Для этого в адресной строке браузера наберите адрес экспериментального сайта.

После окончания разработки перенесите сайт с локального сервера на сервер хостинг-провайдера.

Обратите внимание на особенности удаления локального сервера с ПК. Чтобы удалить «Денвер», выполните следующие действия:

  • Остановите сервер с помощью ярлыка Stop Denwer на рабочем столе.
  • В командную строку введите команду subst z: /d. Это необходимо для удаления виртуального диска Z, который создается при установке ПО «Денвер». Если вы вместо значения по умолчанию Z использовали другое название виртуального диска, укажите это в команде.
  • Удалите папку WebServers с диска C.
  • Удалите ярлыки управления локальным сервером с рабочего стола.

Вы полностью удалили «Денвер» с ПК.

Как создать сайт на локальном сервере Xampp

Xampp — популярный программный комплекс для создания локального сервера Apache. Чтобы установить ПО, скачайте дистрибутив и запустите инсталлятор. Во время установки оставьте настройки по умолчанию. При необходимости поменяйте путь установки.

В папке Xampp активируйте контрольную панель: запустите приложение xampp-control. На панели запустите сервер Apache и базу данных.

Введите в адресную строку браузера URL http://localhost. Если Xampp работает корректно, вы попадете на страницу приветствия.

Создайте базу данных экспериментального сайта. Для этого введите в адресную строку браузера URL http://localhost/phpmyadmin/. На вкладке «Базы данных» укажите название БД и нажмите кнопку «Создать».

Установите на локальный сервер WordPress. Скачайте дистрибутив с официального сайта и разархивируйте его в папку xampp – htdocs. Укажите URL тестового сайта в качестве названия папки с файлами движка.

Чтобы завершить установку CMS, введите в адресную строку браузера URL http://localhost/folder-name. Вместо значения folder-name укажите название папки с файлами CMS.

Завершите установку и проверьте работоспособность сайта.

Как пользоваться локальным сервером Winginx

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

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

Перейдите в панель управления phpMyAdmin с помощью меню «Менеджеры баз данных – phpMyAdmin». Создайте базу данных экспериментального сайта.

Откройте папку сайта с помощью соответствующего меню в панели управления Winginx.

Разархивируйте дистрибутив выбранной CMS в каталог public_html.

Введите в адресную строку браузера адрес wp-admin/install.php и установите движок на сервер.

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

Как перенести действующий сайт на локальный сервер

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

  • Запустите локальный сервер и установите на него WordPress.
  • Установите на локальном сайте дизайн-шаблон, который вы используете на реальном ресурсе.
  • Установите на действующий сайт и активируйте плагин Duplicator.
  • В административной консоли выберите меню «Duplicator – Пакеты». Нажмите кнопку «Создать новый».
  • Скачайте созданные пакеты на жесткий диск компьютера. Перенесите их в корневой каталог ресурса на локальном сервере.
  • Введите в адресную строку браузера путь к файлу installer.php на тестовом ресурсе. Вы попадете на страницу установки базы данных.
  • Удалите из корневой директории тестового ресурса файлы install.php и wp-config.php.
  • Укажите имя пользователя и название базы данных экспериментального сайта. Отметьте, что вы прочитали техническое предупреждение и запустите установку копии ресурса на локальный сервер. Запустите установку.

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

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

С помощью функции «Импорт» можно загрузить полученный файл на локальный сервер.

Что делать, если вы не пользуетесь WordPress? Вот универсальный способ переноса ресурсов. В панели управления phpMyAdmin выберите базу данных экспериментального сайта. Укажите обычный способ экспорта, при котором отображаются все настройки. Выберите метод сжатия gzip. Не меняйте другие настройки. Запустите экспорт БД.

Браузер загрузит на жесткий диск ПК файл с расширением sql.gz. Его необходимо импортировать на сервер хостинг-провайдера. Для этого в панели управления сервером выберите меню «Базы данных – phpMyAdmin».

На вкладке «Импорт» загрузите файл с базой данных.

Описанными способами сайты можно переносить с локального сервера на сервер хостера и в обратном направлении. Также для создания копии ресурса и последующего переноса вы можете воспользоваться инструментами резервного копирования базы данных, например, плагином для WordPress WP Database Backup или аналогами для других движков. Если вы пользуетесь WordPress и локальным сервером Desktop Server, перенести локальный сайт можно с помощью плагина Desktop Server for WordPress.

Какой локальный сервер выбрать

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

Если вы пользуетесь CMS WordPress, обратите внимание на Desktop Server. Установка и настройка этой программы занимают меньше времени по сравнению с другими продуктами. Благодаря плагину для WordPress вы также ускорите перенос готового сайта на сервер хостера. Если вы работаете с другими CMS, используйте любой из предложенных локальных серверов. Например, с Winginx вы сможете запустить сайт и контролировать разработку с помощью удобного планировщика в панели управления программой.

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

Как разместить веб-сайт с вашего компьютера

Опубликовано: 2021-01-11

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

Если вы планируете запустить веб-сайт, вам нужно будет инвестировать в собственное доменное имя и веб-хостинг. В зависимости от ваших потребностей в хостинге затраты могут варьироваться от 50 долларов (общий хостинг) до более 10 000 долларов в год (выделенный сервер).

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

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

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

Как разместить веб-сайт с помощью Windows

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

Что такое WAMP-сервер?

WAMP — это сокращенная форма Windows, Apache, MySQL и PHP. Таким образом, WAMP-сервер устанавливает одновременно три разных приложения. Эти серверы считаются довольно удобными, потому что они позволяют загружать и устанавливать все пакеты, необходимые для размещения любого веб-контента. Элементы WAMP можно объяснить следующим образом:

Windows- это показывает , что приложения AMP совместимы с устройствами Windows. Другие платформы, такие как Linux, например, будут иметь его как LAMP.

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

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

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

Шаг 1: Установка программного обеспечения WAMP

Посетите веб-сайт WampServer и загрузите последнюю версию. Выберите 32 или 64 бит в зависимости от вашей операционной системы. Пакет поставляется с самыми последними версиями Apache, MySQL и PHP. Запустите файл .exe в загруженной вами программе установки WAMP. Вы получите простые подсказки для установки. Нажмите «Далее», сохранив значения по умолчанию, чтобы продолжить установку. Выберите браузер по вашему выбору или просто нажмите «открыть», и веб-сервер будет использовать браузер ПК по умолчанию.

По мере выполнения этого процесса брандмауэр Windows может отклонять некоторые функции Apache. Поэтому не забудьте сделать исключение, когда вы получите всплывающее окно с предупреждением безопасности. После завершения установки отметьте поле с надписью «Запустить WampServer 2 сейчас», прежде чем в конечном итоге нажать кнопку «Готово».

Шаг 2: Навигация по серверу WAMP

Если вы хотите изменить страницы, отображаемые веб-сервером, перейдите в каталог www, щелкнув значок WAMP на панели уведомлений. Каталог создается автоматически во время установки и находится на локальном диске C (c: \ wamp \ www). У вас также есть возможность создавать подкаталоги, называемые проектами в WampServer. Они пригодятся для хранения файлов HTML или PHP. Например, если вы устанавливаете WordPress, его установочные файлы будут сохранены в каталогах. Вы можете обновить любые изменения в приложении, нажав кнопку обновления.

Шаг 3. Создайте страницу HTML или PHP

В этом разделе показано, как протестировать веб-сервер. Используйте программу веб-разработки, такую ​​как Блокнот, для разработки простой страницы PHP или HTML. Перейдите в «Сохранить как», дайте ему любое имя и добавьте расширение .php (например, «name.php»). Установите c: \\ wamp \\ www в качестве места назначения для сохраненного файла. Вернитесь в WebServer и нажмите «Обновить», чтобы обновить эти изменения. Ваши данные будут обновлены в каталоге www. Чтобы проверить это, перейдите по адресу http: //localhost/name.php через свой браузер. Вы попадете на новую веб-страницу, где увидите подробную информацию об установке PHP.

Шаг 4: Настройка MySQL

Вы можете начать настройку своих баз данных MySQL, открыв панель phpMyAdmin в меню. Здесь вы можете открыть новое окно браузера. Имя пользователя admin автоматически устанавливается на «root», после чего вам будет предложено ввести пароль. Пока вы можете оставить поле пароля пустым. Вы также можете настроить базы данных MySQL или создать новые в зависимости от ваших предпочтений. Если вы используете программное обеспечение CMS, такое как WordPress, они по умолчанию предоставляют вам базу данных.

Шаг 5. Настройка публичного доступа к сайту

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

Обратите внимание, что файл настроек Apache запрограммирован на запрет доступа к подключениям извне, которые не являются локальным хостом. Следовательно, люди, нажимающие на ваш URL-адрес, получат сообщение «403 запрещено». Чтобы исправить эту проблему, вам нужно изменить две строки кода в файле конфигурации Apache. Найдите файл httpd.conf в меню WampServer внутри папки Apache. Прокрутите вниз, пока не найдете код, показанный ниже:

 Заказ запретить, разрешить
Запретить всем

Удалите его и замените на:

 Заказать разрешить, запретить
Разрешить от всех

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

Как разместить свой веб-сайт на машине с Linux

Как и в ОС Windows, для размещения веб-сайта на компьютере Linux необходимо установить Apache, MySQL и PHP. Вместо того, чтобы устанавливать их отдельно, LAMP WebServer предоставляет вам пакет, содержащий все три важных приложения веб-хостинга.

Шаг 1: установите программное обеспечение LAMP

AMP можно установить в любых версиях ОС Linux. У вас должна быть возможность настроить WebServer на ПК, независимо от того, предпочитаете ли вы только командную строку Ubuntu или стандартный рабочий стол Ubuntu. Для этого введите в терминал следующую простую строку команды:

 sudo apt установить apache2 mysql-server php libapache2-mod-php7.0

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

Еще одна важная вещь, которую стоит отметить, заключается в том, что всякий раз, когда вы меняете конфигурацию Apache, вам необходимо перезапустить Apache, выполнив команду sudo /etc/init.d/apache2 restart. Однако есть исключение, когда вы выполняете процесс с использованием локальных файлов .htaccess.

Шаг 2: Протестируйте работу PHP

LAMP предоставляет тест, который может проверить, работает ли PHP-сервер, а также проверить доступные модули. Для его выполнения вставьте тестовый файл PHP в корневой каталог WebServer, / var / www / html /. В качестве примера создайте тестовую веб-страницу PHP с именем «name», затем введите следующий код в корневой каталог веб-сервера:

 sudo echo ""> /var/www/html/name.php

После этого перейдите в свой браузер и введите http: //localhost/name.php, затем нажмите Enter. Когда он загрузится, он должен показать вам ваш тестовый файл PHP. Текущая версия PHP, конфигурация и доступные модули также будут отображаться в вашем окне. Вы можете добавить новые модули PHP позже через диспетчер пакетов Ubuntu, если столкнетесь с приложением, которое требует этого.

Графический менеджер пакетов содержит доступные модули. Вы также можете получить к нему доступ через командную строку, введя следующий код: apt search php | модуль grep. Я считаю последнее намного проще.

Шаг 3. Проверьте MySQL и его адрес привязки

На этом этапе вам необходимо подтвердить, прошла ли установка MySQL успешно. Это потому, что системы CMS, такие как WordPress, не будут работать без него. Введите следующую команду для выполнения теста: состояние службы MySQL. Он должен запуститься после нажатия клавиши Enter, но если этого не произойдет, перезапустите сервер MySQL с помощью следующего кода: «sudo service mysql restart».

Также проверьте, похож ли адрес привязки MySQL на адрес вашей системы. Сделайте это, набрав эту простую команду: cat / etc / hosts | grep localhost. На вашем экране отобразится несколько результатов, среди которых будет ваш IP-адрес. Откройте файл конфигурации MySQL и проверьте все, что там указано. Прокрутите, пока не увидите адрес привязки вашего ПК. Цифры, отображаемые в этой строке, должны соответствовать тем, которые вы видели ранее. Если они не совпадают, измените его, чтобы завершить тест.

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

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

Шаг 4: процесс установки PHPMyAdmin

Введите команду «sudo apt-get install phpmyadmin», чтобы установить его. Если установка не удалась, вам придется перенастроить другие репозитории, прежде чем повторить процесс. Например, когда вы видите синий экран с вопросом, какой веб-сервер вы хотите настроить, нажмите пробел (красный курсор должен быть рядом с «apache2»). Когда появится звездочка, нажмите кнопку ввода.

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

Чтобы войти в phpMyAdmin, введите в браузере следующий адрес: http: // localhost / phpmyadmin /. Введите имя пользователя и пароль в соответствующие поля и нажмите кнопку «Перейти». Важно отметить, что пароли, которые вы устанавливаете для всего этого процесса, должны быть мощными, потому что программное обеспечение веб-сервера дает другим людям доступ к вашему ПК.

Шаг 5: настройка DNS

Вы можете настроить свой локальный веб-сервер так, чтобы он имел личное доменное имя, например exmple.com. Для этого вам следует изменить настройки Apache для приема запросов из Интернета. Ниже приведены конкретные шаги по настройке DNS:

Убедитесь, что у вашего выбранного доменного имени есть запись A; он должен указывать на конкретный IP-адрес. Ваши записи DNS обновляются автоматически вашим поставщиком услуг хостинга DNS. Чтобы проверить, была ли конфигурация успешной, используйте инструмент dig, который вернет данные, содержащие ваш IP-адрес, доменное имя и раздел полномочий.

Шаг 6: Настройка Apache

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

Сначала отключите виртуальный хост Apache по умолчанию, введя команду sudo a2dissite * default. Перейдите в каталог хранилища по умолчанию, называемый / var / www / html, набрав эту командную строку: «cd / var / www / html». Создайте новую папку, в которой будет размещен ваш сайт. Обязательно измените имя своего домена с exmple.com на желаемое. Используйте командную строку: sudo mkdir желаемое имя.com.

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

 sudo mkdir -p желаемое имя.com/public_html
sudo mkdir -p желаемое имя.com/log
sudo mkdir -p желаемое имя.com/backups

После этого откройте новый файл виртуального хоста для вашего сайта с помощью этой команды:

 sudo nano /etc/apache2/sites-available/desiredname.com.conf

Обратите внимание, что ваше доменное имя «желаемое имя.com» было заменено на «желаемое имя.com.conf».

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

 <виртуальный хост>
ServerAdmin [адрес электронной почты защищен]
Имя_сервера желаемое имя.com
Server_Alias ​​www.desiredname.com
располагается)
Directory_Index index.html index.php (это папка, в которой сохраняются файлы)
Document_Root /var/www/html/desiredname.com/public_html (содержит имя вашего php или htm файла)
LogLevel предупреждать
Custom_Log /var/www/html/desiredname.com/log/access.log вместе
</virtualhost>

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

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

Каковы преимущества размещения веб-сайта на вашем компьютере?

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

Он предлагает больше контроля и гибкости

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

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

Стоимость

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

Изучение новых навыков

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

Доступность

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

Минусы размещения веб-сайта на вашем ПК

Собственный хостинг тоже имеет свои недостатки. Вот основные из них:

Отсутствие доступа к дополнительным услугам

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

Безопасность

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

Масштабируемость

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

Способности и навыки

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

Доступность

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

Стоимость

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

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

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

Альтернативы самостоятельному размещению веб-сайта

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

Виртуальный хостинг

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

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

Некоторые из надежных хостинговых компаний VPS включают Bluehost , Siteground и InMotion Hosting. Также вы можете проверить некоторых из более дешевых провайдеров VPS.

Выделенный хостинг

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

Основным преимуществом выделенного хостинга является неограниченная вычислительная мощность и скорость. У них очень мало времени простоя по сравнению с хостингом VPS.

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

Что такое локальный сайт: программы локальных серверов

 

Вступление

По своей сути, сайт это набор разноформатных  файлов (текстовых, фото и т.п.) объединенных в единую структуру с доступом для их просмотра всех желающих.

Что такое сайт

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

Где сайт можно разместить

Как и любая другая электронная информация, сайт должен размещаться на жестком диске компьютера. Поместить сайт можно и на своем домашнем компьютере и на мощных серверах, так называемых хостингах. На хостинге вы можете арендовать определенное место на общем диске сервера (аренда виртуального хостинга) или арендовать отдельный сервер (аренда виртуального сервера (VPS/VDS) Open VZ или KVM).

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

Что такое локальный сайт и как он строится

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

При этом, нельзя создавая локальный сайт, используются те же программные продукты, которые применяются на хостингах. Базовый набор программных продуктов для создания сайта включает: веб-сервер HTTP  (Apache или NGINX или IIS), система управления базами данных (СУБД) MySQL и язык программирования (PHP, Perl или Pethon). Естественно, все эти продукты должны работать во взаимосвязи.

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

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

Другое дело локальный сайт. Локальный сайт «лежит» на вашем диске и вам для создания локального сайта, нужно самостоятельно установить набор, выше указанного, программного обеспечения (например, связку Apache + MySQL + PHP).

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

Платформы собираются для работы на определенных операционных системах. Для Windows свои, для Linux свои, для MAC OC X свои. Правда есть и кросплатформы, работающие на нескольких OC, например XMAPP.  

Для работы на Windows платформы обозначаются акронимом WAMP: Windows, Apache, MySQL, PHP. Для Linux это LAMP:  Linux, Apache, MySQL, PHP.

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

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

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

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

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

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

Несколько выводов

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

Для облегчения создания сайта, установить на свой локальный сайт систему управления содержанием сайт (CMS). CMS это скрипты Joomla, WordPress, Drupall и т.д. 

©Joomla3-x.ru

Статьи раздела

 

 

Похожие статьи

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

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

Сводка видео: как разместить веб-сайт

Как работает веб-хостинг

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

Как разместить сайт с помощью хостинг-провайдера

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

Плюсы хостинга у провайдера

  • Обычно дешевле
  • Поддержка часто легко доступна
  • Нет необходимости в обслуживании оборудования
  • Более высокая надежность

Минусы хостинга у провайдера

  • Могут быть некоторые сервисные ограничения
  • Меньше вариантов в местах размещения

Вот шаги для размещения сайта с поставщиком услуг хостинга.

Вот шаги для размещения сайта с поставщиком услуг хостинга.

1. Решите, какой тип сайта вы создаете

Есть два основных типа сайтов; статичный и динамичный.

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

Динамические сайты в основном управляются приложениями и используют скрипты, базы данных и другие инструменты для создания некоторых частей сайта на лету. WordPress и Joomla являются примерами распространенных сегодня приложений системы управления контентом (CMS). Другие, такие как Magento и PrestaShop, используются для сайтов электронной коммерции.

Выбор веб-хостинга зависит от типа веб-сайта, который вы создаете. Бюджетный веб-хостинг, как Hostinger ($ 0.99 / мес) будет достаточно для простого статического сайта; тогда как динамические сайты потребуют больше ресурсов сервера.

2. Сравните типы веб-хостинга

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

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

Три типа веб-хостинга

Одним словом, наиболее распространенными типами хостинга являются

  • Виртуальный хостинг
  • VPS / облачный хостинг
  • Выделенный сервер хостинг
WordPress? Prestashop? Magento? WooCommerce хостинг?

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

Например, не многие люди могут знать разницу в типах хостинга, но многие узнают термин «WordPress».

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

  1. Объем трафика, который вы ожидаете на вашем сайте, или
  2. Любые конкретные потребности вашего сайта могут иметь.

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

Shared vs VPS / Cloud vs выделенный хостинг

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

Виртуальный хостинг часто дешев и прост в управлении, но не имеет расширенных элементов управления и не может обрабатывать большие объемы трафика. Вы можете получить услуги виртуального хостинга от A2 хостинг, Hostinger, GreenGeeksVPS / облачный хостинг стоит дороже и очень универсален. Пользователи могут установить на эти учетные записи практически все, что им нужно, и смогут справляться с различными объемами трафика в зависимости от того, сколько ресурсов оплачено. Вы можете получить услуги VPS или облачного хостинга от Цифровой океан, межсерверной, InMotion хостинг.Выделенные серверы являются наиболее сложными в управлении и стоят больше всего. Они очень мощные и могут управляться вплоть до аппаратного уровня администраторами. AltusHost, InMotion хостинги TMD хостинг предоставлять выделенные услуги хостинга.

3. Выберите и купите план веб-хостинга

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

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

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

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

Некоторые веб-хосты также предлагают другие преимущества на более дорогих планах, такие как специальные оптимизации или улучшения. Хорошим примером этого являются планы хостинга на хостинге A2, Самым дорогим планом этой серии являются 20-кратные «Турбо» скорости.Обычно сразу после того, как вы приобрели веб-хостинг, вы получите приветственное письмо с подробной информацией о ваших учетных данных и сервере имен. Храните это электронное письмо в надежном месте — информация понадобится для настройки вашего домена и входа в панель управления сервером. Снимок экрана, показывающий мое приветственное письмо от HostPapa.

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

Веб-хостинг для новичков / Простые сайты
Веб-хостинг для бизнеса / растущих сайтов

4. Купить домен

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

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

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

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

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

5. Переместить / создать свой сайт на сервер

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

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

Процесс аналогичен копированию файлов из одного места в другое на вашем компьютере.

Как разместить сайт локально

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

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

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

1. Выберите оборудование и программное обеспечение

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

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

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

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

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

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

2. Обеспечить достаточную пропускную способность

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

Также необходимо учитывать ваш IP-адрес. Большинство домашних интернет-планов поставляются с назначенными динамическими IP-адресами. Чтобы запустить веб-сервер, вам нужен статический IP-адрес. Это может быть обработано поставщиком услуг, таким как DynDNS или купив услугу у вашего интернет-провайдера (ISP).

Научитесь рассчитывать необходимую вам пропускную способность.

3. Разработка и развертывание сайта

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

Какой вариант лучше всего разместить у себя на сайте?

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

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

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

Управление ресурсами хостинга

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

Некоторое время назад мы взяли интервью у Марка Верна, сотрудника хостинг-провайдера Linux Gigatux.comи попросил его совета по управлению ресурсами сервера. Вот несколько советов о том, как сделать ваши ресурсы последними.

1. Выберите легкий CMS

Вы можете использовать Joomla or Mambo это так плохо, но если размер вашего хостинга меньше 500 МБ, вы можете пересмотреть свой выбор.

WordPress or DrupalНапример, это будет легкая и гибкая альтернатива, которая сэкономит вам МБ веб-диска и пропускную способность. Часто меньше — больше, а вес — не меньше функциональности. Составьте список своих альтернатив и выберите CMS, которая наиболее соответствует вашим потребностям и вашему пакету хостинга.

2. Для форума — используйте miniBB вместо SMF

MiniBB занимает всего менее 2 МБ против 10+ МБ SMF, но это полноценное решение для форума с мясным хранилищем надстроек, расширений и плагинов.

Не нравится miniBB?

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

3. Используйте стороннюю рассылку новостей

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

В сравнении — MailChimp, полное решение для рассылки новостей с нулевой стоимостью, если ваша целевая аудитория составляет менее 2,000 12,000 подписчиков и вы стремитесь отправлять не более XNUMX XNUMX электронных писем в месяц.

Все шаблоны могут быть настроены так, что вам не нужно размещать свои собственные, и вы можете интегрировать рассылку с Facebook.

Хорошими альтернативами MailChimp являются Постоянный Контакт, чье единственное ограничение задается параметрами подписки — люди могут зарегистрироваться только из вашей формы.

4. Использовать систему кеширования

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

Пользователи WordPress могут установить Быстрая производительность но если вы не используете WordPress, вы должны попытаться оптимизировать кэш вашего сайта с помощью инструментов, предоставляемых вашим поставщиком CMS. Например, Joomla может рассчитывать на Cache Cleaner or Jot Cache; в то время как Drupal имеет несколько инструментов для повышения производительности кэша.

5. Регулярно удалять содержимое спама

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

Делайте это по крайней мере раз в неделю, чтобы избежать проблем с памятью (например, удаление комментариев WordPress работает только до памяти 64MB, после чего вы получите фатальную ошибку и вам придется либо увеличить допустимый объем памяти в вашем PHP.INI файл или в wp-config.php в вашем корне WordPress).

6. Если возможно, используйте внешние базы данных

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

7. Используйте сторонние файловые хостинги

Разместите все загружаемое на внешнем файловом хостинге, например Photobucket, Vimeo, YouTube, Giphy, И так далее.

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

8. Регулярно загружать и удалять файлы журналов

Файлы журналов были созданы для того, чтобы держать вас в курсе о состоянии вашего веб-сайта, но их не нужно использовать на сервере: если вы не загружаете и не удаляете их хотя бы раз в неделю, их размер увеличивается до нескольких мегабайт до ГБ. Это особенно верно для двух журналов cPanel:

/ Главная / пользователь / public_html / error_log

и

/ главная / пользователя / TMP / Awstats /

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

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


FAQ по хостингу

Что такое веб-хостинг?

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

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

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

Вам нужен хост для сайта?

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

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

Доменное имя — это адрес вашего сайта. Без этого ваши пользователи не смогут попасть на ваш сайт, если не будут знать точный IP-адрес. Узнать больше о как работает доменное имя.

Есть ли у GoDaddy сайты?

Да, GoDaddy является поставщиком веб-услуг, и одним из его продуктов является веб-хостинг.

Достаточно ли общего хостинга для моего сайта?

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

Сколько существует видов хостинга?

Существует четыре основных типа веб-хостинга: VPS, облачный и выделенный хостинг. Каждое предложение различной степени производительности, надежности и безопасности.

Какой тип хостинга лучше?

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

Могу ли я использовать WordPress на моем веб-хостинге?

Большинство поставщиков услуг веб-хостинга сегодня позволяют устанавливать различные популярные веб-приложения. Обычно это WordPress, Drupal, Joomla и множество других. Чтобы убедиться, что приложение, которое вы хотите установить, лучше всего проверить у своего поставщика услуг.

Почему мой сайт работает медленно?

Скорость сайта может зависеть от многих факторов. Одним из них является то, насколько хорошо ваш сайт оптимизирован. Чтобы узнать, что влияет на производительность вашего сайта, используйте такой инструмент, как WebPageTest или GT Metrix. Выполнение здесь теста приведет к разбивке деталей времени загрузки, что позволит вам определить точки задержки во время загрузки вашего сайта.

Как работает хостинг сайта?

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

Что такое облачный хостинг?

Как следует из названия, учетные записи виртуального хостинга «совместно используют» ресурсы одного сервера. В Облако хостинг, несколько серверов объединяют свои ресурсы в «облако», а затем эти ресурсы распределяются по учетным записям облачного хостинга.

Что такое управляемый хостинг?

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

Дальнейшее чтение

Подробнее о хостинге веб-сайта
О создании веб-сайта

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

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

Первые — это начинающие вебмастера, совсем новички, которые только начинают свой путь по просторам html, css, php, JavaScript, jQuery и так далее. Они ищут и поглощают любую информацию, которая им помогает учиться и продвигаться дальше в деле создания сайтов. Употребляя фразу ‘бесплатный сайт‘, на самом деле , они не имеют в виду какую-то халяву, говоря языком современного сленга. Эти люди — труженики, которые готовы учиться. Они ищут более легкие варианты, чтобы создать сайт самостоятельно, часто – ищут в сети просто шаблоны сайтов, бесплатные сайты , которые можно скачать. Эту группу можно назвать — Ученики.

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

Вышеупомянутые Ученики и Заказчики сайтов одновременно ищут, по сути, одно и тоже. Бесплатную возможность размещения в интернете информации, которая будет доступна людям через поиск в Интернете, возможность создать бесплатный сайт своими силами с нуля.
Только одни хотят сами научиться размещать эту информацию — сделать сайт бесплатно, а вторые – найти способ бесплатно сделать сайт и разместить информацию о своих товарах или услугах в интернете самостоятельно.
И соответственно, — вопрос – кто сейчас читает это текст? Первые или вторые? Отвечать буду последовательно. И первым и вторым.

Правда о создании бесплатного сайта своими силами

Обращаюсь ко всем, кто интересуется вариантами создания бесплатного сайта . Если вы ничего не заплатили, но потратили много времени, своего или чужого на создание сайта, это не значит, что вам удалось сделать сайт бесплатно. Время, потраченное на создание ‘бесплатного сайта’, — это тоже деньги.
Бесплатно сделать сайт, в буквальном случае нажать на кнопочку и – о чудо! – создать сайт — невозможно. К сожалению, чудес не бывает. Кому-то все равно придется поработать. И даже если кому-то удалось сделать сайт бесплатно, то, полюбовавшись какое-то время сайтом в сети интернет, Заказчику сайта придется признать, что для того, чтобы сайт развивался, оптимизировался к запросам пользователей, с ним придется серьезно поработать и потратить время.

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

Сайт можно сделать на Конструкторе сайтов. Но!

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

Итак, создание бесплатного сайта для того, кто учится создавать сайты, возможно. Возможность зависит от того, какими знаниями обладает человек, а так же от его готовности эти новые знания получать.
Для создания сайта можно использовать многочисленные шаблоны сайтов, которые можно скачать с разных источников, как в русском сегменте интернета, так и в зарубежном. (шаблоны сайтов c иностранных источников можно найти в интернете по запросу ‘download template of website‘ — в переводе с английского ‘Загрузить шаблон сайта’. Или просто набрать ‘template of website’).
Эти шаблоны сайтов можно использовать начинающему разработчику сайтов, при наличии у него на компьютере специальных, рекомендуемых для создания сайтов программ.

Программы для начинающего вебразработчика

Notepad++ — программа, в которой можно написать сайт, помощник начинающего вебмастера.
Прежде всего, нужно обзавестись Блокнотом Разработчика сайтов, называется он — Блокнот Notepad++. Скачивается в интернете бесплатно с массы источников.(Официальный сайт https://notepad-plus-plus.org/).
Это текстовый редактор, в котором можно ‘написать’ свой будущий сайт в прямом смысле этого слова. Написать на языке программирования, на html, например.
Блокнот Notepad++ поддерживает много языков синтаксиса, в любом случае это прекрасный инструмент для разработчика сайта. Любой шаблон сайта, о котором ниже, как правило, состоит из нескольких страниц, содержание которых можно увидеть в формате этого Блокнота, внести правки, скопировать или создать новые страницы сайта.
Блокнот Notepad++ фиксирует внесенные вами изменения на сайте на языке программирования и преобразует в сложные манипуляции, понятные машинам, в результате чего мы можем увидеть на экране монитора компьютера красивую картинку нашего сайта, оформленные тексты и так далее. Все, что нам показывает в итоге браузер- красивый сайт — вначале частенько прописывается в блокноте Notepad++ руками человека, который занят созданием сайта.
Далее про другие программы для создания сайта на своем компьютере.

Программа FileZilla — программа, соединяющая ваш компьютер и сервер хостинга в интернете

Программа FileZilla ( FTP – клиент). Скачивается бесплатно. Лучше качать программу с официального источника. ( Официальный сайт https://filezilla-project.org/).
В Рунете( русском интернете) есть так же русифицированные версии. Эта программа (после ее установки на ваш компьютер) по специальному FTP-протоколу соединит ваш компьютер и сервер, на котором находится или будет находиться ваш сайт.
Проще говоря, программа FileZilla — это почтовый голубь, который будет постоянно метаться между вашим компьютером и вашим хостингом (сервером, где находится сайт в интернете).
Установить и использовать программу очень просто. Впоследствии, сайт, сделанный например, с помощью Блокнота Notepad++ , описанного выше, можно будет легко заслать на сервер хостинга (в Интернет) с вашего локального компьютера через FileZilla.
С помощью программы FileZilla можно не только засылать сайт на хостинг, а с хостинга – на ваш компьютер. Прямо в FileZilla можно делать правки файлов, менять их, удалять, добавлять новые и так далее. А теперь вопрос.
Что еще нужно будет установить на ваш компьютер для того, чтобы начать создавать сайты кроме двух вышеописанных программ? Правильно, локальный сервер.

Локальный сервер – это мини-интернет на вашем компьютере
Локальный сервер – это программа, которую обязательно нужно установить на ваш компьютер, если вы хотите заняться разработкой и созданием сайтов. Самые популярные у нас в стране – это Denver и Open Server. Первый – постарше, второй моложе. Суть у них одинакова: программа устанавливается на компьютер, и у пользователя появляется возможность видеть свой сайт ‘как в интернете’. Только в адресной строке созданного или создаваемого сайта будет написано, что он находится на диске С, к примеру, и путь будет такой Диск С- Локальный сервер-Название сайта.
Сайт на локальном сервере, как правило, имеет расширение loc. То есть в интернете ваш сайт имеет адрес ‘vash-sait.ru’, а на локальном сервере он будет иметь адрес ‘vash-sait.loc’. Но видеть его будете только вы. Или тот, кто может смотреть на ваш монитор.
Скачать локальный сервер Denver можно с сайта разработчика http://www.denwer.ru/. Open server скачивается так же с официального сайта https://ospanel.io/. Обе программы бесплатны. Выбирайте из них ту, которая больше нравится.

Все изменения, которые вы делаете с сайтом с помощью программы Блокнот Notepad++, вы можете тут же протестировать на своем локальном сервере. Сохранили изменения в Блокноте, поменяли или дописали html-страницы, поработали со стилями (дизайн сайта), или наоборот что-то удалили, потом обновляете страницу сайта на локальном сервере и тут же видите все изменения.
В целом, сайт, сделанный на Локальном сервере, не отличается от сайта, который вы увидите в интернете, когда зашлете его на хостинг с помощью программы FileZilla.
Таким образом, при разработке сайта, вы имеете полный начальный комплект разработчика.
В Блокноте Notepad++ пишется сайт, тестируется на Локальном сервере, потом, с помощью FileZilla сайт засылается на сервер хостера, то есть – в интернет.

Если у начинающего разработчика сайта на компьютер закачаны три программы, о которых сказано выше
Блокнот Notepad++
Локальный сервер ( Денвер или Open Server)
и FTP-клиент Программа FileZilla
то можно уже сказать, что начинающий web-разработчик готов к тому, чтобы поработать с готовыми шаблонами сайтов, которых в сети великое множество и они так же бесплатны и доступны.

Теперь вернемся к теме шаблона сайта.

Что такое шаблон сайта, и как с ним работать далее
Шаблон сайта – это, прежде всего, папка с файлами сайта. Шаблон может содержать даже несколько страниц сайта. Но чаще в простом шаблоне – главная страница ( index.php), файл style.css — со стилями, определяющими дизайн сайта ( формат текста, отображение картинок, расположение блоков на странице, разные отступы от полей и так далее), папка img , содержащая фотографии, картинки сайта, логотипы, иконки.
Для начинающего веб-разработчика, который решил сделать сайт, начать эту работу с готового шаблона, в принципе, неплохая идея. Учитывая, что на компьютере уже есть программы, о которых упомянуто выше. Особенно, Блокнот Notepad++ и Локальный сервер ( Денвер или Open Server).
Но большинство шаблонов сайтов, которыми сегодня буквально ‘забит’ интернет, к сожалению, не адаптивны (плохо смотрятся на экране смартфона). Сегодня требования поисковых систем таковы, что раскрутить ( продвинуть) не адаптивный сайт будет очень трудно. А скоро – и вовсе невозможно. Мир давно перешел на поиск в интернете со смартфона; старые сайты, сделанные много лет назад, сейчас переделываются, адаптируются к мобильным устройствам. И это – не просто.
Поэтому, совет номер один по работе с шаблонами сайтов таков: при выборе готового шаблона сайта из сети, стоит выбирать только адаптивные шаблоны. Скачивая шаблоны с иностранных источников, выбирайте шаблоны, которые помечены как ‘Responsive template’. ‘Responsive’ переводится как ‘отзывчивый’. Тем не менее, именно этот термин используется, когда речь идет о шаблонах, адаптированным к мобильным устройствам и разным размерам экранов.
Современные адаптивные шаблоны сайтов сегодня можно найти на Envato маркете (https://market.envato.com/), но там все платно. Однако, в пользу шаблонов с этого большого магазина по продаже цифровой дистрибуции говорит то, что при покупке одного шаблона, покупатель получает целый пакет фреймворков, который может быть использован в разных комбинациях. И это – адаптивный профессиональный шаблон сайта. На основе такого шаблона может быть сделано множество сайтов, их количество почти безгранично.
Совет номер два касается предстоящего управления сделанным сайтом. О нем стоит подумать заранее, на стадии сохранения понравившегося шаблона.

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

Да. Конечно же нужно начать изучать язык интернета html, на котором написаны все сайты. Нужно понять как работают каскадные таблицы стилей, то, что помогает сайту выглядеть красиво и — именно так как вы задумали ( дизайн сайта создается стилями). Нужно понять как работает серверный язык php. Что такое Базы данных, какому сайту они необходимы, а какому — не очень. Именно в Блокноте Notepad++ нужно начать оттачивать свои навыки начального програмирования и с помощью локального сервера смотреть как выглядят те или иные задумки, воплощенные на страницах своего первого сайта.

Как правило, когда сделанный сайт появляется в Интернете, радости и гордости у новоявленного разработчика – через край. Однако, новичок не предусмотрел, какая система управления будет на сайте.
Пополнять сайт, используя свои знания по html, css и даже php ( серверный язык программирования), новоявленный разработчик, конечно же сможет. Но вот сделать такой сайт для кого-то, на заказ, уже проблематично. Ведь не заставишь того, кто заказал сайт фирмы, закачать себе на компьютер массу программ, закончить курсы по программированию, чтобы управлять сайтом фирмы без админки.

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

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

Хорошая система управления сайтом может быть написана специально для уже сделанного сайта, но это большая и серьезная работа. Чем сложнее сайт ( много графических элементов, фоны, выпадающее меню, слайдеры и т.д.), тем сложнее будет ‘вписать’ админку во все хитросплетения дизайна и кода. Малый функционал управления, который включает лишь правку текстов, но не касается изменения элементов дизайна сайта, к сайту ‘приделать’ можно. А на том же языке php не так сложно сделать простую систему администрирования, но на самом деле это будет не система управления сайтом, а всего лишь – текстовый редактор.
Из современных текстовых редакторов, пожалуй, лишь система Textolite обладает наиболее широким функционалом. Скачать можно на официальном сайте https://textolite.ru/
Текстолайт или Текстолите можно легко ‘встроить’ в сайт и получить возможность управлять текстовыми изменениями в очень симпатичном режиме. Стандартная версия бесплатна, и в некоторых случаях ее бывает вполне достаточно. Расширенная версия Textolite стоит 15 долларов, но – использовать ее можно только на одном домене.
Уникальный код фиксирует расширенную версию лишь для одного сайта (домена). Для использования редактора Textolite на других сайтах того же покупателя нужно снова оплачивать 15 долларов.
Зато расширенная версия позволяет так же редактировать и фотографии. Систему управления сайтом Textolite можно с успехом использовать на многих сайтах, однако, как показал опыт, не все пользователи справляются даже с такой простой и приятной системой. Несмотря на подробный мануал ( Инструкцию), написанным к Textolite ее несомненно гениальным создателем, для того, чтобы использовать на сайте такую Систему управления контентом, нужно быть готовым получить новые знания. И немного поучиться. А на это идут не все.
Для людей, имеющих минимальные, но все же базовые знания о языке html и стилях CSS, Textolite подойдет идеально.

Известные бесплатные движки для сайтов (CMS): Джумла, Друпал, WordPress, другие
Да, свой первый сайт можно сделать на известных и широкораспространенных движках, системах управления сайтом. Как правило, новичок, решивший сделать сайт бесплатно собственными силами, первым делом слышит про CMS. По — русски звучит как ЦМС. Сайт на Вордпрессе — самое распространенное в мире явление. ‘Начинался’ WordPress как сайт для ведения блога, но впоследствии разработчики стали снабжать систему Вордпресс многочисленными опциями, которые сегодня позволяют на этом движке делать любые сайты, не только текстовые блоги.

Справка. Что такое CMS.
Это – Система управления контентом.
Аббревиатура CMS расшифровывается и как ‘Content Management Software’ (Software – программа, программное обеспечение, по-русски звучит просто — софт) и как ‘Content Management Sistem’, так же еще есть пара толкований и расшифровок. Одно ясно всем и давно. CMS – это Система, на которой и построен весь сайт.
Да, на самом деле CMS – это просто ЦЕЛЫЙ отдельный сайт, где уже все ‘вписано и настроено’.
Главное, что в себе содержит любая CMS – пользовательская админка, та секретная часть сайта, не видимая обычным посетителям сайта, куда заходит администратор с логином и паролем, и попадает в ‘святая святых’, в место на сайте, где можно администрировать сайт, но – во вполне пользовательском виде.
Это, уже не коды, и это – не простой текстовый редактор, где позволено лишь править текст. Админка CMS позволяет уже серьезные шалости, такие как, например, менять фон страницы, добавить пункт меню, изменить дизайн разных элементов сайта и так далее.
CMS – это по сути, адаптированная к обычному человеку, ‘начинка сайта’, где подробно обозначен доступ к любой части сайта, чтобы изменить почти все. И вот в этом ‘почти’ кроется и самый главный минус любой CMS.
‘ЦМС-ки’ известных производителей, упомянутых в подзаголовке, это гигантские программные продукты, довольно старые и почтенные. Вокруг них собраны сообщества людей, занятных в разработке сайтов, которые используют эти системы, имеют опыт в решении тех или иных сценариев. Производителями этих движков регулярно разрабатываются и выпускаются различные обновления, создаются новые плагины ( программы для выполнения разных задач, например, варианты форм обратной связи на сайте, плагин комментариев и так далее), совершенствуются сами движки.

Минусы использования CMS:
Свой шаблон сделать практически невозможно, приходится работать в рамках предложенных шаблонов. А их – до обидного, всегда мало.
Админка не всегда удобная, с первого взгляда может напугать, не все понятно.
Не все CMS перешли на адаптивность.
Раскрученные CMS слишком известны, подвержены взлому.

Тема CMS – одна из самых обсуждаемых в Интернете, если мы хотим найти что-то на запрос – ‘как сделать сайт с хорошей админкой’. Главная проблема всех CMS, на мой взгляд – это навязывание администратору заданного сценария позволенных пользовательских функций. Это логично, учитывая, что все дополнения, которые расширяют функционал администратора, уже платные. CMS бесплатна, а вот дополнения – уже за деньги. Бизнес в Интернете никто не отменял. Разработка сайтов – обширная поляна, с которой кормятся все, кто пишут приложения и плагины к известным CMS.

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

Еще одно. Не в каждой CMS обычному пользователю можно легко добраться до рабочих файлов, таких как robots.txt, sitemap.xml, других. В то время, когда эти движки создавались, еще не было таких жестких правил поисковых систем, поэтому с некоторыми моментами разработчики не очень ‘упирались’. Но сегодня, при разработке сайтов, многие подобные вещи могут стать фатальными для молодого сайта.
Словом, резюмируя, почему я не советую начинающим делать сайт на CMS, скажу главное. ‘Лучшая CMS – это та, которую ты хорошо знаешь’. Это – известное высказывание про CMS, популярное в среде веб-разработчиков.

Вишенка на торте последних лет — сайты на Mobirise.

Настоящее открытие последних лет в среде веб-разработки — подарок начинающим вебмастерам, которые хотят сделать сайт бесплатно своими силами — Сайты на Mobirise.
Mobirise – система создания сайтов, совсем недавно появилась, оглушила своим появлением; и кажется это — именно то, что требовалось пользователям. Пользователями я в данном случае называю тех самостоятельных и продвинутых пользователей Интернета, которые хотят заниматься самостоятельным созданием сайтов. Разработка сайтов на Mobirise – это удовольствие. И — замечательная возможность сделать сайт бесплатно и самому!
Мобирис или Мобирайс — не зря называют убийцей сайтбилдеров.
Mobirise – это CMS, но – в хорошем смысле слова:-). Это тоже система, тот же движок. Хорошая новость в том, что для создания сайта на Mobirise, вы скачиваете на свой компьютер специальную программу Mobirise с официального сайта. Это здесь https://mobirise.com/
Программа будет у вас, на вашем диске, и использовать вы ее сможете автономно.
Админка Mobirise – выглядит как сайт. Просто в этом сайте вы делаете изменения, которые вам нужны. Очень похоже на администрирование сайта на Wix, только в случае с Wix, сайт делается на виртуальной платформе, которая прикреплена к порталу Wix, находится на их хостинге. (Про Wix я писала здесь.)
А Mobirise вы делаете только у себя на компьютере, а потом вы можете заслать сделанный сайт либо на свой локальный сервер, либо на сервер вашего хостинга в интернете. Все оценить и продолжить работу дальше, засылая все последующие варианты.
Подробных мануалов — как создать сайт на Mobirise уже достаточно в сети, не хочу повторяться. А вот на тему как управлять сайтом на Mobirise, как решать возникающие проблемы, как засылать обновления, не так много инструкций.
Это по ссылке Читать дальше про управление Сайтом Mobiris

Созданному сайту понадобится домен и хостинг.

Сайт сделан и написан, его нужно разместить в интернете. Для этого сайту нужен домен. Домен покупается на паспорт, оплачивается раз в год, домен в зоне ‘ru’ стоит 600 р., у хостеров и партнеров дешевле. Подробно про покупку и выбор домена читайте в моем Ликбезе, в главе 3. Там же подробно про хостинг.

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

Хостинг — это виртуальная площадка в интернете, аренда площадей для размещения вашего сайта. Много сайтов — нужно много места, мало — немного. Для одного небольшого сайта-визитки потребуется не более 2 гигабайт, цена аренды хостинга в год от 1500 р до 3000 р. в зависимости от возможностей и амбиций хостера.

Главные критерии выбора хорошего хостинга лично для меня☝:

  • Быстрая поддержка ( ответы на вопросы, техническая поддержка, помощь по любым вопросам, связанных с сайтом и его размещением, решение проблем;
  • Наличие бонусов, таких как акции по скидкам на хостинг, к примеру, если оплачиваете сразу за пару-тройку лет. Я на хостинге Бегет в свое время ( кризис был) поймала дивную скидочку, оплатив хостинг сайтов сразу на 5 лет. В итоге несколько лет мои сайты стоили мне по 128 р в год каждый ;
  • Разумеется, качество услуг: бесперебойная работа хостинга, никаких падений сервера, атак и прочего;
  • Удобство файлового менеджера и наличие разных бесплатных подарков в виде SSL сертификата, например, это перевод сайта на безопасный протокол https, современные версии PHP, наличие установленных на хостинге CMS, если это необходимо и так далее.;
  • Базы данных и наличие phpMyAdmin, легкий заход в менеджер Базы данных без всяких танцев с бубнами.

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

Могу сказать, что человек, который осилил создание своего первого сайта сам, без привлечения профессионалов — БОЛЬШОЙ МОЛОДЕЦ!💪
Резюме – как сделать сайт бесплатно собственными силами, выводы и советы

  • Для создания сайта нужно скачать на свой компьютер программы: Блокнот Notepad++( программа для создания и редактирования файлов html, php, css и других), FileZilla (FTp- клиент, программа для связи компьютера и сервера хостинга), Denver или Open Server (локальный сервер)
  • Использовать только адаптивные шаблоны сайтов, потому что мы уже не вернемся к монополии большого монитора.
  • Как приятное дополнение – сайты Mobirise, попробуйте, вам понравится. По ссылке — подробная инструкция — как управлять сайтом на Мобирайс, как создавать страницы, пользоваться настройками и публиковать сайт в Интернете.
  • P.S. Упомянутые в тексте ссылки на платные программы и маркеты по продаже цифрового товара, сделаны автором абсолютно бескорыстно, это не реклама, а выводы, сделанные на основании собственного опыта. Учитывая, что основной моей задачей было описать варианты создания бесплатного сайта сегодня, таковы итоги.

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

А так же есть большая пошаговая инструкция
Как продвинуть молодой сайт самостоятельно и бесплатно своими силами.

Если вы пришли в ужас от прочитанного и не хотите иметь весь этот массив трудов: скачивать на свой комп все перечисленные выше программы и создавать свой сайт самостоятельно и бесплатно, тогда милости просим почитать ИЗ ЧЕГО СОСТОИТ РАБОТА НАД САЙТОМ И СКОЛЬКО ОНА СТОИТ, если вы решите сайт заказать, о цене создания обычного небольшого сайта без особых амбиций.

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

Как создать сайт в блокноте?

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

Что такое HTML

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

Вот как выглядит на экране домашняя страница сайта umi.ru:

А вот как её «видит» браузер:

Чтобы понять, как работает HTML необходимо ознакомиться с его основным понятием, каковым является тег. Этот термин обозначает специальный структурный элемент, представляющий собой определенную комбинацию символов, при помощи которого и осуществляется разметка страницы. Определить тег очень просто — что бы он не означал, он всегда выделен в тексте знаками “<” перед и “>” в конце названия тега. Например, <script> или <table>, означающие «сценарий» и «таблица» соответственно. Если действие относится к определённой части текста, например, выделение полужирным шрифтом, то границы этого участка обозначаются парными тегами. В случае с полужирным текстом это будут комбинации <b> и </b>. Обратите внимание, что любой закрывающий тег отличается от открывающего косой чертой “/”.

Существуют и непарные теги, когда действие разовое и не относится к определённому участку текста, например, перенос строк, обозначаемый в HTML комбинацией <br>.

 

Основные виды тегов и их роль в разметке веб-страницы
  • <!DOCTYPE html>. С этого элемента начинается сайт. Он сообщает браузеру, что документ создан с помощью языка гипертекстовой разметки HTML. По большому счёту, этот элемент не обязателен, но его присутствие позволит избежать потенциальных проблем с отображением страницы;
  • парный тег <html> и </html> сообщает о начале и конце каждой страницы;
  • внутри между элементами парного тега <head> и </head> указывается всевозможная служебная информация о странице, в том числе, ее заголовок, указания на стили, использованные в ее оформлении, подключаемые скрипты, специальные метаданные;
  • ещё один парный тег <title> содержит заголовок страницы и находится внутри тега <head>. Благодаря этому тегу браузер и поисковые роботы определяют название каждой страницы;
  • область документа, отображаемая непосредственно на мониторе и видная пользователю, ограничивается парным тегом <body>. На странице эта область следует за тегом </head>.
  • для добавления в текст ссылок служит тег <a>, однако он несколько отличается от предыдущих своим видом и выглядит <a href=”URL ссылки”>текст ссылки</a>.
  • абзацы в тексте обозначаются парным тегом <p>.
  • для разделения текста при помощи подзаголовков различных уровней существуют парные теги <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Благодаря им можно выделять текст в зависимости от его важности.
  • для выделения текста полужирным шрифтом служит парный тег <b>.

Это всего лишь небольшая часть из всего разнообразия тегов, которых насчитывается около ста. Тем не менее, с их помощью уже можно начинать  cоздание сайта через блокнот. Есть также ряд правил, по которым теги располагаются в документе. Для основных тегов, включая <html>, <head>, <title>, <body>, существует строгий порядок распределения, тогда как в блоке, ограниченном тегами <body>, остальные теги комбинируются в зависимости от общего замысла и в соответствии со стандартами языка HTML.

Создаём сайт своими руками в Блокноте

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

Для работы с текстом сайта лучше работать не с традиционной программой «Блокнот», а со специальной его версией Notepad++, созданной как раз для написания кода. Скачать её можно с сайта разработчика. Всё описанное можно сделать и в обычном «Блокноте», но в Notepad++ работать с кодом гораздо удобнее.

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

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

Затем выделим в документе участок страницы со служебной информацией, добавив парный тег <head> между тегами <html>, как показано ниже:

Чтобы указать заголовок страницы, в пространстве между тегами <head> и </head> в одну строку напишите парный тег <title></title> и вставьте между них заголовок (название сайта), например, «Создание сайта через блокнот».

А вот как её «видит» браузер:

Это будет единственная служебная информация нашего сайта. Далее приступаем к оформлению той части, которая будет видна на экране дисплея, выделив её тегами <body>. Открывающий тег ставим в строке после тега </head>, а закрывающий — перед тегом </html>, обозначающим, как мы помним, конец страницы.

Теперь, воспользовавшись парным тегом <h2> и </h2>, в строке, следующей после тега <body>, укажем заголовок нашей страницы, который будет показан пользователю. Между этими тегами добавим название страницы, например то же, что и у сайта — «Создание сайта через блокнот».

Наполним сайт содержанием, создав один абзац текста, и ограничив его открывающим тегом <p> в строке после </h2> и </p> в конце абзаца. Между ними добавим текст. Например: «Чтобы научиться  cозданию сайта через блокнот, сначала необходимо получить представление об HTML».

Если вы хотите в тексте сделать выделение полужирным шрифтом, воспользуйтесь парным тегом <b>. В нашем примере выделим слово «HTML» — <b>HTML</b>.

Создадим подзаголовок. Для этого в новой строке пропишем парный тег <h4> в который вставим подзаголовок следующего блока текста, например, «Что такое теги».

Далее создадим еще один абзац текста, использовав уже знакомые нам теги <p> и </p>, вставив между ними отрывок из нашей статьи.

Не переживайте, что текст вышел за пределы окна — на экране компьютера или смартфона он будет автоматически подстроен под ширину страницы. Впрочем, если вы хотите сделать перенос, вставьте тег <br> — теперь строка будет заканчиваться именно в этом месте, а дальнейший текст начинаться с новой строки (на экране, но не в Блокноте). Так и поступим — разделим наш абзац переносом.

Осталось научиться вставлять ссылки — один из ключевых элементов гипертекстов. Для этого воспользуемся тегами <a href=””></a>. Например, в новом абзаце с текстом: «В создании сайта через блокнот нам помогли специалисты компании UMI», — дадим ссылку на сайт. В результате у  вас должна получиться комбинация вида <a href=”https://umi.ru/”>UMI</a>. То есть, между кавычками в теге <a href=””> указывается URL страницы, на которую ведёт ссылка, а перед закрывающим тегом </a> указывается текст, который будет отображён на странице. Как это выглядит на деле, видно на приведённом ниже рисунке.

Наш наипростейший сайт, созданный с помощью блокнота, почти готов. Осталось сохранить документ в формате *.html. Теперь его можно открывать в любом браузере. Заметьте, после сохранения с расширением HTML содержимое файла выглядит несколько по-другому — теперь в нём выделены все теги и ссылки, а при помощи расположенных слева плюсов и минусов можно скрывать и раскрывать содержимое отдельных блоков, находящихся между парными тегами, к примеру, скрыть участок, ограниченный тегом <head>.

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

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

Как создать сайт на виртуальном хостинге

Если Вы хотите сделать сайт и уже приобрели домен, то необходимо сделать несколько шагов, чтобы сайт заработал: настроить NS серверы домена и создать сайт на виртуальном хостинге. Расскажем об этом по порядку. Если ещё не приобрели домен, то рекомендуем ознакомиться со статьёй «Как купить домен?».

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

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

Настройка NS серверов домена

Если планируете размещать домен на наших NS серврах, то необходимо убедиться в правильности настроек. Войдите в личный кабинет управления хостингом: my.mousedc.ru. В верхнем меню найдите пункт «Домены». Кликните на него: Откроется список доменов. Найдите нужный домен в списке и выберите его, кликнув по нему один раз левой кнопкой мышки. Откроется форма для изменения настроек домена. В левом меню кликните на кнопку «Сервера имён (NS)»: Проверьте, чтобы в первые две строчки содержали адреса NS серверов виртуального хостинга MouseDC.ru:
  1. ns1.vhost.mousedc.ru
  2. ns2.vhost.mousedc.ru
Если в строках не было таких значений, то введите их и нажмите на кнопку «Изменить». На этом процедуру настройки NS записей домена можно считать оконченной. Теперь необходимо создать сайт на виртуальном хостинге.

Создание сайта на виртуальном хостинге

Если Вы ещё ни разу не заказывали услугу виртуального хостинга, то рекомендуем ознакомиться со статьёй «Как заказать виртуальный хостинг». Далее расскажем о том, как создать сайт внутри уже существующей услуги виртуального хостинга.

В верхнем меню панели администрирования найдите пункт «Хостинг». Кликните на него: Если виртуальный хостинг ещё не заказан, то список будет пуст. В этом случае рекомендуем ознакомиться со статьёй «Как заказать виртуальный хостинг».

Если виртуальный хостинг уже заказан, то необходимо перейти в его панель управления. Делается это несколькими способами. Первый — кликнуть на кнопку вызова выпадающего меню в списке, а затем кликнуть на кнопку «Перейти в панель»: Либо можно кликнуть на название хостинга в списке, и в открывшемся окне изменения настроек найти кнопку «Меню». Оно вызовет то же самое выпадающее меню, в котором нужно кликнуть на пункт «Перейти в панель»: Произойдёт переход в панель управления виртуальным хостингом. Через этот раздел можно загрузить файлы, настроить базу данных, настроить почтовые ящики и многое другое. Наша задача — загрузить файлы на сервер: дамп базы данных и архив с файлами сайта. Для этого в боковом меню найдите пункт «WWW» и подпункт «WWW-домены». Кликните на него: Откроется список сайтов, которые есть на хостинге (он будет пустым, если сайтов ещё нет). Необходимо создать сайт. Для этого кликните на кнопку «Создать» в верхнем меню: Откроется форма создания сайта. В этой форме самая главная (она же первая по списку) графа — это «Имя». Введите в неё доменное имя сайта: Вводите доменное имя без «www»! После ввода имени сайта остальные обязательные графы заполнятся автоматически.

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

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

Обратите внимание, что если сайт доступен одновременно по домену и его псевдониму с «www», то это ухудшает его ранжирование в поисковых сетях, откуда приходит почти 80% аудитории сайтов. Потому что поисковые роботы воспринимают эти два адреса как два разных сайта, которые воруют контент друг у друга. Поэтому обязательно сделайте перенаправление с одной версии на другу. А если сайт новый, то сразу определитесь, какую версию (с «www» или без) будете использовать.

На одном виртуальном хостинге можно разместить одновременно до 3 сайтов. Но ресурсы используются сайтами совместно: если поставить три проекта на один виртуальный хостинг, то они будут соперничать за процессор и оперативную память, которые выделяются на одну услугу виртуального хостинга. Если три сайта — это статичные HTML файлы (без PHP кода и соединения с базой данных), то сайты будут работать без проблем. А если это будет три сайта на ресурсоёмкой CMS (к примеру, «1С-Битрикс» старшей редакции «Бизнес» для создания огромных высоконагруженных интернет магазинов), то сайты будут притормаживать. В таком случае будет лучше разделить сайты на три отдельных услуги виртуального хостинга.

При создании конфигурации сайта в его корневой директории появляется файл-заглушка «index.html«. Если есть несколько индексных файлов («index.php» и «index.html»), то первым будет открываться именно «index.html». Этот файл-заглушку можно удалить (или переименовать, к примеру, в «index-old.html«). Порядок обращения задаётся в индексным файлам через настройки сайта в разделе «www-домены».

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

Как создать веб-сайт

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

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

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

Если вы готовы приступить к работе, это руководство познакомит вас со службами и программным обеспечением, которые помогут вам начать создание собственного веб-сайта, даже если у вас нет опыта. Имейте в виду, что ни один из этих инструментов не даст вам представления о веб-сайте-победителе — это ваше дело.Они также не сделают вас веб-дизайнером — работа, отличная от создания сайта. Тем не менее, эти службы и программное обеспечение облегчат некоторые головные боли, возникающие из-за отсутствия обширных знаний в области CSS, FTP, HTML и PHP. Давайте начнем.

WordPress Hosting Services, протестировано

Ведение блога для развлечения и прибыли

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

Основным игроком в игре для блогов является WordPress, система управления контентом (CMS), на которой работают миллионы веб-сайтов, включая The New York Times , Quartz и Variety . Сайты на базе WordPress невероятно просты в установке, настройке и обновлении — в идеале — ежедневно.Вам не обязательно изучать причудливые приемы FTP (хотя вы, безусловно, можете использовать их, если хотите), и существует смехотворное количество бесплатных и платных тем WordPress и плагинов WordPress, чтобы придать вашему сайту красивое лицо и значительно расширить функциональность. Ознакомьтесь с разделом «Как начать работу с WordPress», чтобы узнать все, что вам нужно знать о CMS, включая различия между WordPress.com и WordPress.org. Хотя WordPress доминирует в сфере ведения блогов, это не единственная заслуживающая внимания CMS для ведения блогов.

Yahoo Tumblr — еще одна невероятно популярная платформа для блогов, которая позволяет размещать более короткие и наглядные сообщения. Однако вы можете найти темы, которые придадут вашему сайту Tumblr более традиционный вид. Blogger от Google отличается тесной интеграцией с Google AdSense, поэтому внести дополнительные карманные изменения совсем несложно. Новые службы ведения блогов, такие как Anchor, Feather и Medium, делают написание и публикацию не просто сложным дизайном, но их невероятно просто обновить.

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

Если вы предпочитаете более традиционный URL-адрес, вам необходимо приобрести его у таких компаний, как GoDaddy или Namecheap. Цены на доменные имена могут варьироваться от чрезвычайно дешевых до чрезвычайно дорогих, в зависимости от того, стремятся ли сквоттеры доменов продать ценную часть онлайн-недвижимости. Вы захотите получить что-то короткое, но вызывающее воспоминания и запоминающееся.Для получения дополнительной информации, пожалуйста, прочтите «Как зарегистрировать доменное имя».

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

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

Создайте свой личный Интернет-сайт #Brand

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

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

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

Художники, у которых достаточно много портфолио, не должны чувствовать себя обделенными. Существует ряд конструкторов персональных страниц / сайтов, в том числе BigBlackBag и SmugMug, которые отображают вашу работу так же или лучше, чем Flickr или Instagram.

Службы автономных веб-сайтов, протестировано

Переход к автономным службам

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

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

Посмотрите, как мы тестируем службы веб-хостинга

Даже если вы не подписывались на эти веб-хосты, вам следует искать службы, которые предлагают аналогичные функции.Вам понадобится редактор WYSIWYG, который позволяет настраивать каждую страницу и добавлять изображения, видео и социальные ссылки. Потратив несколько дополнительных долларов, вы обычно получаете надежные пакеты электронной коммерции и поисковой оптимизации (SEO) для улучшения размещения в Bing, Google и Yahoo. Большинство современных услуг веб-хостинга включают в себя как минимум одно доменное имя бесплатно при регистрации.

платформ электронной коммерции, протестировано

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

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

Рекомендовано нашими редакторами

Вещи, на которые следует обратить внимание при проверке хостов для электронной коммерции, включают в себя конструкторы магазинов с перетаскиванием, программное обеспечение Secure Socket Layer (SSL) для защиты финансовых транзакций и плагины электронного маркетинга, чтобы вам не приходилось работать с внешний поставщик для продвижения вашего бизнеса.Само по себе нет ничего плохого в использовании несвязанных маркетинговых услуг, но все, что добавляет удобства, означает, что больше времени можно потратить на остальную часть вашего бизнеса. Для получения более подробных советов о том, как начать продавать в Интернете, вы должны рассмотреть нашу историю о 6 факторах, которые компании должны учитывать при выборе веб-хостинга.

Конструкторы веб-сайтов Создание веб-сайтов

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

Хотя лучшие из них предлагают удивительную гибкость, они также налагают достаточно жесткие ограничения на дизайн страниц, чтобы вы не смогли создать действительно плохо выглядящий сайт с помощью одной из этих служб. Обычно вы можете получить URL-адрес стиля Mysite.servicename.com без каких-либо коммерческих возможностей бесплатно с помощью одной из этих служб; вам придется доплачивать за лучший URL и возможность продавать.Одна проблема, которую следует учитывать, заключается в том, что если вы в конечном итоге перерастете одну из этих служб, может быть трудно экспортировать свой сайт на полномасштабный расширенный веб-хостинг, такой как Dreamhost или Hostgator. Если вы знаете, что в конечном итоге собираетесь, возможно, лучше пропустить этап создания сайта.

Никто не выполняет работу лучше Wix, удостоенный награды Editors ‘Choice, хотя у Gator и GoDaddy есть очень интересные предложения. Он имеет интерфейс перетаскивания, и все элементы сайта настраиваются. Начать работу с Wix не стоит ни цента, но вы захотите перейти на премиум, начиная с 5 долларов в месяц за домен и до 25 долларов в месяц за неограниченную ежемесячную передачу данных и 20 ГБ хранилища.

Программное обеспечение для создания веб-сайтов, протестировано

Сделай сам: программное обеспечение для создания веб-сайтов

В течение многих лет Adobe Dreamweaver был синонимом создания веб-страниц. Он прошел путь от создания HTML-страниц в интерфейсе WYSIWYG до возможности обрабатывать страницы программирования в Cold Fusion, JavaScript, PHP и других форматах. Его гибкий макет позволяет увидеть, как страницы выглядят в браузере и на экранах разных размеров — даже на смартфонах и планшетах. Это примерно столько кода, сколько вы хотите.

Dreamweaver доступен как часть службы подписки Adobe Creative Cloud. Вы можете получить отдельную версию Dreamweaver CC за 31,49 долларов в месяц или как часть пакета Adobe All Apps, который включает Illustrator CC и Photoshop CC, по цене от 79,49 долларов в месяц.

Если вы используете Mac, есть и другой вариант: RapidWeaver. Этот редактор веб-страниц WYSIWYG имеет полный доступ к коду и поддержку FTP для загрузки страниц. Для начала есть множество встроенных шаблонов по единовременной цене 84 доллара.99. В Windows есть множество вариантов. Xara Web Designer, например, стоит от 49,99 долларов и обещает, что вам не нужно знать HTML или Javascript для создания сайтов на основе шаблонов компании.

Press Publish

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

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

Нравится то, что вы читаете?

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

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

Как создать веб-сайт: пошаговое руководство

В 2021 году создать веб-сайт будет очень просто.

Вам не обязательно быть компьютерным фанатом или программистом.

Следуйте правильному методу. Выберите подходящие платформы. Используйте правильные инструменты. Вы будете на 100% в порядке.

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

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

Есть три способа создать веб-сайт:
  1. Создание с нуля
  2. Использование системы управления контентом (CMS)
  3. Использование конструктора веб-сайтов

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

Создание и управление веб-сайтом намного проще с помощью методов №2 и №3. Вам следует выбрать один из этих методов в зависимости от вашей компетенции.

Мы рассмотрим каждый из этих трех методов и все шаги, описанные ниже.

1. Зарегистрируйте домен

Домен — это имя вашего веб-сайта. Он должен быть уникальным и отражать бренд вашего бизнеса.

Самый простой способ найти и зарегистрировать домен — обратиться к регистратору домена.

Регистратор доменов позволит вам зарегистрировать свое доменное имя посредством годовых или долгосрочных контрактов.

Где зарегистрировать свой домен

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

Советы

2. Купите веб-хостинг

Веб-хостинг — это большой компьютер (он же сервер), на котором хранятся ваши веб-сайты. Некоторые гигантские компании, такие как Amazon, IBM и FB, владеют своими веб-серверами и управляют ими; другие компании просто арендуют свои серверы у хостинг-провайдера (что намного дешевле и проще).

Примечание. Пропустите этот шаг, если вы выбираете конструктор веб-сайтов для создания своего сайта (см. Шаг № 3).

Какие у вас варианты хостинга?

Сегодня веб-хостинг поставляется в различных пакетах.

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

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

Некоторые удобные для новичков услуги хостинга.

Советы

  • Доступны различные виды хостинга: общий хостинг, хостинг выделенного сервера и облачный / VPS-хостинг.
  • Если у вас небольшой веб-сайт, дешевле выбрать общий хостинг.Для больших сайтов рекомендуется использовать облачный или выделенный хостинг.
  • Некоторые ключевые качества, которые необходимо учитывать перед выбором веб-хостинга, — это удобство использования, цена, скорость сервера и время безотказной работы.
  • На сегодняшний день мы зарегистрировались, протестировали и проверили более 60 хостинговых компаний. См. Наши 10 лучших вариантов хостинга или полный список обзоров хостинга.
  • Рассмотрите возможность использования конструктора магазинов, например Shopify или BigCommerce, если вы планируете продавать товары прямо со своего веб-сайта.
  • Также прочтите — Сколько платить за ваш веб-хостинг

В самом начале

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

3. Создайте свою веб-страницу

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

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

Для домашних мастеров вот три простых способа создать веб-страницу:

Метод № 1: Создание веб-сайта с нуля

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

В противном случае рекомендуется перейти к способу №2 / 3; или свяжитесь с веб-разработчиком.

Основные веб-языки / инструменты, которые вы должны знать:
  • HTML (язык гипертекстовой разметки)
    HTML — это базовая структура веб-страниц и веб-приложений, которая делает контент семантическим для веб-браузера. Он состоит из последовательных тегов, которые имеют открывающую и закрывающуюся, и структурно ключевое слово, заключенное в угловые скобки. Пример:
  • CSS (каскадные таблицы стилей)
    CSS — это язык стилей, который используется для украшения разметки HTML веб-страницы.Без CSS веб-страница выглядела бы не чем иным, как большой белой страницей с неупорядоченным текстом и изображением на ней. CSS — это то, что делает страницу такой, какой мы хотим.
  • Языки сценариев
    HTML и CSS — ничто без языков сценариев, потому что они не интерактивны. Чтобы создать динамическую веб-страницу, которая будет отвечать пользователям, вам понадобятся такие языки, как JavaScript и jQuery. Со временем могут потребоваться серверные языки, такие как PHP, Python и Ruby.
  • Управление базой данных
    Для хранения, управления и доступа к вводимым пользователем данным на веб-сайте рассматривается большая таблица информации, которая называется базой данных.Система управления базами данных, такая как MySQL, MongoDB и PostgreSQL, используется на стороне сервера для эффективного выполнения этой работы.
  • FTP (протокол передачи файлов)
    FTP используется для более простой передачи исходных файлов веб-сайта на его размещенный сервер. Существуют как веб-клиенты, так и FTP-клиенты на базе компьютерного программного обеспечения, которые можно использовать для загрузки файлов на сервер.
Пошаговый процесс создания веб-сайта с использованием IDE

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

Шаг 1. Настройка локальной рабочей среды

Снимок экрана рабочей среды Subline Text.

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

Sublime Text и Atom — это некоторые из основных IDE для веб-разработки, поддерживающие HTML, CSS, JS, PHP, Python и аналогичные веб-языки.

С другой стороны, существуют расширенные IDE, такие как Adobe Dreamweaver, которые предлагают ряд других функций (например, подключение к серверу, FTP).

Шаг 2: Спланируйте и создайте свой веб-сайт с помощью Adobe Photoshop

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

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

Примеры — макеты дизайна, которые мы сделали во время обновления сайта в декабре 2016 года.

Шаг 3: Кодифицировать Дизайн с использованием HTML и CSS

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

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

Шаг 4. Сделайте его динамическим с помощью JavaScript и jQuery.

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

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

Шаг 5: Загрузите локальные файлы на сервер с помощью FTP-клиента

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

Сначала загрузите FTP-клиент на свое компьютерное устройство и подключите его к веб-серверу, используя учетную запись FTP. После того, как вы успешно подключили его к учетной записи FTP, скопируйте все локальные файлы в корень вашего веб-каталога. Некоторые хорошие FTP-клиенты — это FileZilla, WinSCP и Cyberduck.

Метод № 2: Создание веб-сайта с помощью CMS

Необходимые навыки и инструменты

  • Знания: базовые операции с компьютером и Интернетом; HTML, CSS и PHP (не обязательно, но лучше, если вы знаете основы)
  • Инструменты: WordPress, Joomla и Drupal

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

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

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

Быстрое сравнение

миллионов долларов 34315+ Сравнение CMS — WordPress против Joomla против Drupal

WordPress

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

Эта платформа предназначена для начинающих, а также разрабатывается различными классами веб-разработчиков. Он имеет множество бесплатных плагинов и тем в собственном репозитории. Поскольку это CMS №1, на стороне доступно множество сторонних ресурсов.

Выбор тем WordPress.

Плюсы

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

Минусы

  • Требуются обновления кода для основных настроек визуализации 9011 может вызвать проблемы с плагинами

Подробнее

Joomla

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

Однако новички могут быть более напуганы изучением Joomla из-за большого количества доступных опций. В дополнение к левому меню, есть также меню на верхней панели справа над логотипом «Панель управления». Во избежание путаницы помните, что некоторые элементы меню левой и верхней панели похожи, включая «Контент», «Пользователи» и «Расширения».”

Как и WordPress, Joomla имеет несколько стилей и шаблонов, которые могут быстро придать вашему сайту особый вид. Но из всех трех систем управления контентом Joomla предлагает самое простое решение, когда дело доходит до создания социальной сети. С такими платформами, как EasySocial и JomSocial, вы в нескольких минутах ходьбы от вашего собственного веб-сайта социальной сети.

Внутри системы Joomla.

Плюсы

  • Более технически продвинутые
  • Веб-сайты в целом работают лучше
  • Безопасность корпоративного уровня

Минусы

  • Модули сложно поддерживать
  • Среднестатистическая CMS — не так просто, как WordPress , не такой продвинутый, как Drupal

Подробнее

Drupal

Опытные веб-разработчики подтверждают, что Drupal — самая мощная CMS.

Однако он также наиболее сложен в использовании. Благодаря своей гибкости, Drupal является второй по популярности CMS в мире, но не является фаворитом среди новичков. Чтобы успешно создать «законченный» веб-сайт с помощью Drupal, вам нужно запачкать руки и изучить основы кодирования. Знать свой способ работы с CMS также непросто для новичков.

Установка нового Drupal — несмотря на сложные функции в Drupal, CMS предлагает простой, минималистичный интерфейс.

Плюсы

  • Легко освоить
  • Отличный справочный портал
  • Обновления легко интегрируются
  • Больше встроенных опций

Минусы

  • Крутая кривая обучения на начальном этапе — рекомендуется для опытных пользователей

Подробнее

Пошаговый процесс создания веб-сайта с использованием WordPress

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

Шаг 1. Найдите установщик WordPress на панели веб-хостинга.

Услуги веб-хостинга обычно включают быстрый установщик для установки WordPress и других распространенных платформ.

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

Некоторые хостинг-провайдеры (пример: SiteGround) используют интегрированные установщики на своей пользовательской панели (экран, который вы видите сразу после входа в cPanel).В этом случае просто попробуйте найти заголовок, содержащий слово «WordPress».

Шаг 2: Установите WordPress с помощью установщика

Softaculous — самый популярный автоматический установщик, представленный на cPanel. Я проведу вас через установку через Softculous. Остальные установщики почти такие же.

Щелкните Softaculous, а затем щелкните «Установить» поверх WordPress, чтобы начать установку.

А вот и важная часть.

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

  • Протокол: вы должны решить, хотите ли вы установить http: // или http: // www. версия URL. Что бы вы ни выбрали, большой разницы вы не увидите. С технической точки зрения http: // www. лучше с точки зрения гибкости и управления файлами cookie. Обратите внимание: если у вас есть действующий сертификат SSL и вы хотите установить на него WordPress, просто выберите https вместо http.
  • Домен: выберите домен, на котором вы хотите установить веб-сайт.
  • Каталог: укажите, где вы хотите установить сайт WordPress.Если вы хотите установить его на свой корневой URL-адрес (например, http://www.yourwebsite.com/), оставьте поле пустым. Если вы хотите, чтобы это было на дополнительном URL-адресе (например, http://www.yourwebsite.com/myblog/), укажите каталог в поле.
  • Учетная запись администратора: укажите имя пользователя, пароль и адрес электронной почты, которые вы будете использовать для входа на свой сайт WordPress.

Если вы добились успеха в последних шагах, молодец. Ваш сайт работает!

Теперь войдите на свой сайт WordPress. Страница входа на ваш сайт будет выглядеть как wp-login.php после указанного вами URL-адреса веб-сайта.

Шаг 3. Установите тему и некоторые важные плагины

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

В каталоге WordPress доступно множество бесплатных готовых тем.

Чтобы просмотреть эти бесплатные темы, перейдите в «Внешний вид> Темы> Добавить новую», найдите тему, которая соответствует вашим требованиям, и нажмите кнопку установки.

Каталог тем WordPress.

Вы также можете установить сторонние темы из раздела «Загрузить тему». Для платных, профессионально разработанных тем WordPress я рекомендую Elegant Themes (за эффективный код и красивый внешний вид).

Для плагинов выберите «Плагины> Добавить новый».

Найдите и установите только необходимые плагины. 3 rd Плагины Party также можно установить из раздела «Загрузить плагин».

Каталог плагинов WordPress.

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

  • Для SEO: Yoast SEO, All in One SEO Pack
  • Для безопасности: iThemes Security, Wordfence Security
  • Для статистики сайта: Jetpack от WordPress.com, Google Analytics для WordPress от Monster Insights
  • Для создания формы: Связаться Форма 7
  • Для производительности: W3 Total Cache, WP Super Cache

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

Также прочтите — 9 основных плагинов WordPress для новых сайтов WP

Шаг 4: Вы готовы!

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

  • В разделе «Настройки> Общие»: задайте заголовок сайта и слоган.
  • В разделе «Настройки> Чтение»: что должно отображаться на вашей домашней странице и сколько сообщений в блоге вы хотите отображать на одной странице.
  • В разделе «Настройки> Постоянные ссылки»: укажите, какой будет структура URL-адреса вашего сообщения в блоге.
Основные настройки для нового сайта WordPress.

Метод № 3: Создание веб-сайта с помощью конструкторов сайтов

Требуемые навыки и инструменты

  • Знания: базовые операции с компьютером и Интернетом
  • Инструменты: Zyro, Wix и Weebly

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

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

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

Zyro

Даже учитывая природу конструкторов веб-сайтов, Zyro абсолютно прост в использовании.Если вы когда-либо использовали текстовый процессор или подобное приложение What-You-See-Is-What-You-Get (WYSIWYG), у вас не возникнет проблем с созданием сайта с помощью Zyro.

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

Также читайте — наш подробный обзор Wix.

Wix

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

Они предлагают гибкий редактор веб-сайтов Drag & Drop, который всегда отображается поверх содержимого. Вы можете перетащить один элемент из списка в любое место на веб-сайте, чтобы добавить. Любой видимый элемент на нем можно перемещать или редактировать.

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

Также читайте — наш подробный обзор Wix.

Weebly

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

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

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

Также прочтите — наш подробный обзор Weebly.

4. Проверка и тестирование вашего веб-сайта

Как только ваш веб-сайт будет готов, самое время проверить, как он работает в основных браузерах (Chrome, Firefox, Safari, Microsoft Edge, IE 11 и т. Д.), А также в различных размеры экрана.

Мы можем запустить эти тесты с помощью бесплатных онлайн-инструментов.

Проверка разметки

Что такое проверка разметки? Языки кодирования или сценарии, такие как HTML, PHP и т. Д., Имеют свои собственные форматы, словарный запас и синтаксис.Проверка разметки — это процесс проверки того, соответствует ли ваш веб-сайт этим правилам.

Browser Test
Перекрестное тестирование вашего веб-сайта до 115 различных браузеров за один раз в BrowserShots.
Screen Test
Используйте Screenfly для предварительного просмотра веб-страницы на мониторах, планшетах, смартфонах и экранах других размеров.

5. Тонкая настройка и развитие

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

Точная настройка скорости веб-сайта

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

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

Повышение видимости веб-сайта в поисковой сети

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

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

Дополнительные советы по SEO можно найти в нашем руководстве по SEO.

Внедрить HTTPS

С тех пор, как Google Chrome начал маркировать веб-сайты HTTP как «Небезопасные», сертификат SSL стал большим делом. Чтобы убедиться, что вашему сайту «доверяют» пользователи — необходимо HTTPS-соединение.

Добавить важные страницы

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

Домашняя страница

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

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

About page

About Page — это создание взаимопонимания с вашими посетителями. Это позволяет вам представиться и предоставить подробную информацию (ну?) О вашем веб-сайте.Обычно рекомендуется включать фотографии людей, владеющих и управляющих сайтом.

Пример — страница «О компании Bulldog Skincare» отправляет милое и запоминающееся сообщение.

Контактная страница

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

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

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

Добавить значок

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

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

Часто задаваемые вопросы по созданию веб-сайта

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

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

С чего начать при создании веб-сайта?

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

Сколько времени нужно на создание кода сайта?

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

Готово, прямо сейчас!

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

Как мне создать свой собственный веб-сайт?

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

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

Допустим, у вас есть идея для веб-сайта, и у вас есть классное доменное имя , которое вы хотите использовать.Вы не уверены, когда сможете начать работу с самим сайтом, но вы хотите убедиться, что никто другой не уловил идею и не взял это доменное имя. Например, предположим, что ваше доменное имя — MyIdea.com. Что вы хотите сделать, так это проверить реестр доменных имен и убедиться, что он еще не зарегистрирован. Если он доступен, вы хотите зарегистрировать это доменное имя (также известное как «резервирование» или «парковка» доменного имени). Регистрация имени дает вам право собственности на него. Чтобы вы могли припарковать доменное имя , оно должно фактически располагаться где-то на сервере.Обычно у него есть какое-то уведомление «В стадии разработки», которое появляется, когда люди пытаются получить доступ к этому доменному имени.

Вам необходимо зарегистрировать свое доменное имя. Есть много компаний, которые размещают ваше доменное имя на сервере, и некоторые из них взимают плату. Verio — одна из компаний, которая будет парковать ваше доменное имя, и она предоставляет удобную форму, которая упрощает проверку доступности доменного имени. Проверка и резервирование доменного имени займет всего пару минут.

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

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

Удачи в создании вашего нового сайта!

Эти ссылки помогут вам узнать больше:

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

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

На вашем компьютере есть программа или приложение , которое может создавать простые текстовые файлы. На компьютерах с Windows это приложение называется Notepad . На Macintosh эта программа называется SimpleText . Если вы не можете найти эти программы, можно также использовать простую программу обработки текста, такую ​​как WordPerfect или Microsoft Word.

  • Примечание:
  • В среде Windows 95/98 нажмите кнопку Пуск, щелкните Программы, щелкните Стандартные и щелкните Блокнот.
  • В среде Windows 3.1 щелкните Стандартные (в Диспетчере программ) и щелкните Блокнот.
  • В среде Macintosh щелкните Macintosh HD, щелкните Приложения и щелкните SimpleText.

Когда на экране откроется нужная программа, введите (или скопируйте и вставьте) следующий текст HTML в окне:

 
  
     Моя первая страница 
  
  
    Привет. Это моя первая страничка!
  

 

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

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

Затем откройте страницу в своем веб-браузере (например, Microsoft Internet Explorer или Netscape Navigator). Все веб-браузеры имеют возможность открывать файл, хранящийся на локальном компьютере.В Internet Explorer и Netscape выберите «Открыть файл» в меню «Файл» в верхней части окна. Откройте файл first.html . Когда вы откроете его в браузере, он будет выглядеть примерно так, как на изображении выше.

На этом рисунке обозначены три вещи:

  • Вы можете видеть, что страница имеет заголовок «Моя первая страница».
  • Вы можете видеть, что тело страницы содержит слова «Здравствуйте. Это моя первая страница!»
  • Вы можете видеть, что в адресном окне отображается URL-адрес C: WINDOWSDESKTOPfirst.html с локального жесткого диска, а не обычный http: // … , который содержался бы в URL-адресе, если бы мы получали страницу с сервера в Интернете.

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

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

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

Глава 1. Создание вашей первой страницы

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

Технически веб-страница — это особый тип документа, написанный на компьютерном языке, который называется HTML (это сокращение от HyperText Markup Language).Веб-страницы написаны для веб-браузеров — таких программ, как Internet Explorer, Google Chrome и Safari. У этих браузеров простая, но чрезвычайно важная задача: они читают HTML в документе веб-страницы и отображают идеально отформатированный результат, чтобы вы могли его прочитать.

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

HTML: язык Интернета

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

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

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

Примечание

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

Взлом Открытие файла HTML

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

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

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

Рисунок 1-1. Каждый документ HTML на самом деле является обычным текстовым файлом. Вверху: веб-браузер отображает простой HTML-документ, демонстрируя все его великолепное форматирование.Внизу: но когда вы открываете тот же документ в текстовом редакторе, вы видите весь текст из исходного документа, а также несколько дополнительных фрагментов информации внутри угловых скобок <> . Эти HTML-теги передают информацию о структуре и форматировании документа.

Тип используемого вами текстового редактора зависит от операционной системы вашего компьютера:

  • Если у вас компьютер Windows, вы используете простой редактор Notepad. Переходим к следующему разделу.

  • Если у вас компьютер Mac, вы используете встроенный редактор TextEdit. Но сначала вам нужно внести коррективы, описанные ниже.

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

  1. Выберите TextEdit Настройки .

    Откроется окно с вкладками параметров TextEdit (рис. 1-2).

    Рисунок 1-2. В окне настроек TextEdit есть две вкладки с настройками: «Новый документ» (слева) и «Открыть и сохранить» (справа).

  2. Щелкните «Новый документ», а затем в разделе «Формат» выберите «Обычный текст».

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

  3. Нажмите «Открыть и сохранить» и включите первую опцию «Отображать файлы HTML как HTML-код вместо форматированного текста».

    Это указывает TextEdit, что вы можете видеть (и редактировать) реальную разметку HTML, теги и все остальное, а не отформатированную версию страницы, как она будет отображаться в веб-браузере.

  4. Закройте окно настроек, а затем закройте TextEdit .

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

Как вы, несомненно, знаете, веб-браузер — это программа, которая позволяет вам переходить и отображать веб-страницы. Без браузеров Интернет все еще существовал бы, но вы не смогли бы его увидеть.

Работа браузера на удивление проста — на самом деле основная часть его работы состоит из двух задач. Во-первых, он запрашивает веб-страницы, что происходит, когда вы вводите адрес веб-сайта (например, www.google.com) или щелкаете ссылку на веб-странице. Браузер отправляет этот запрос на удаленный компьютер, называемый веб-сервером .Сервер, как правило, намного мощнее домашнего компьютера, поскольку ему необходимо одновременно обрабатывать несколько запросов браузера. Сервер принимает во внимание эти запросы и отправляет обратно содержимое желаемых веб-страниц.

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

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

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

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

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

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

    Загрузите Google Chrome на www.google.com/chrome.

  • Internet Explorer — это браузер с самым долгим сроком службы и официальный стандарт во многих корпоративных и правительственных средах. Это также браузер, который предустановлен в Windows, поэтому его используют люди, не являющиеся техническими специалистами, если они не хотят (или не знают, как) устанавливать что-то новое.Даже горячие веб-дизайнеры должны проверять, понимает ли Internet Explorer их страницы, потому что даже старые версии IE, такие как IE 8, остаются популярными.

    Чтобы загрузить самую последнюю версию Internet Explorer, посетите www.microsoft.com/ie.

    Рисунок 1-4. Статистика использования браузера, которая оценивает процент людей, использующих каждый из основных браузеров, варьируется в зависимости от того, какие сайты вы изучаете и как вы подсчитываете посетителей, но на момент написания этой статьи это одна разумная оценка. (Текущую статистику использования браузера см. Http: // tinyurl.com / stats-browsers.)
  • Firefox начал свою жизнь как современный ответ на Internet Explorer. Он по-прежнему впереди всех со своими невероятно гибкими надстройками , крошечными программами, которые другие люди разрабатывают для улучшения Firefox с дополнительными функциями, такими как уведомление веб-почты и эскизы сайтов, которые отображаются на странице результатов поиска. Лучше всего то, что армия программистов-добровольцев постоянно обновляет Firefox.

    Попробуйте Firefox на www.mozilla.org / firefox.

  • Safari — это браузер, разработанный Apple, который поставляется с текущими версиями операционной системы Mac OS. В таких продуктах Apple, как iPhone, iPad и iPod Touch, также используется браузер Safari (хотя его мобильная версия ведет себя немного иначе). Прекрасные люди в Apple создали воплощение Safari для компьютеров с Windows, но с тех пор отказались от него, сделав Safari доступным только для Apple.

    Откройте Safari по адресу www.apple.com/safari.

  • Opera — это упрощенный и простой в установке браузер, который существует уже более десяти лет и служит противоядием от огромных размеров и бессмысленных излишеств Internet Explorer.В течение многих лет Opera сдерживала неприятная деталь: если вы хотели версию без рекламы, вам нужно было заплатить. Сегодня Opera бесплатна и не содержит рекламы, как и другие браузеры из этого списка. У него немного, но преданных последователей, но он занимает пятое место в рейтинге веб-браузеров.

    Посетите Opera на сайте www.opera.com.

Учебное пособие: Создание файла HTML

Теперь, когда вы подготовили свою веб-кухню, вы готовы создать свою собственную веб-страницу. В этом руководстве вы создадите базовую страницу, показанную на рис. 1-1.

Совет

Как и все учебные пособия в этой книге, вы найдете решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с названием Tutorial-1-1 (что означает «Глава 1, первое руководство», если вам интересно).

Готовы начать? Вот что нужно сделать:

  1. Запустите текстовый редактор .

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

    На Mac это TextEdit. Чтобы запустить его, перейдите в папку «Приложения» и дважды щелкните TextEdit.

    Когда вы загружаете текстовый редактор, он запускает вас с новым пустым документом, а это именно то, что вам нужно.

  2. Начните писать свой HTML-код .

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

     

    United Popsicle Workers Union

    Мы боремся за ваши права.

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

  3. Когда вы закончите свою веб-страницу, выберите Файл Сохранить .

    При этом открывается окно «Сохранить» или «Сохранить как», в котором вы вводите сведения о своем новом файле (рис. 1-5).

    Рисунок 1-5. Независимо от того, используете ли вы Блокнот (показан здесь) или TextEdit, в сохранении файла нет ничего сложного. Просто не забудьте включить «.htm» или «.html» в конце имени файла, чтобы идентифицировать его как документ HTML.

  4. Выберите место для сохранения файла и дайте ему имя popsicles.htm .

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

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

    Примечание для параноиков: нет разницы между файлами .htm и .html. Оба они на 100% одинаковы — текстовые файлы, содержащие HTML-контент.

    Примечание

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

  5. При необходимости измените способ кодирования файла в текстовом редакторе на UTF-8 .

    Это стандарт TextEdit, поэтому пользователи Mac могут пропустить этот шаг. Но в Блокноте вам нужно выбрать UTF-8 в списке «Кодировка» внизу окна «Сохранить как».

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

  6. Нажмите «Сохранить», чтобы сделать его официальным .

    Если вы используете TextEdit, программа может спросить, действительно ли вы хотите использовать .htm или .html вместо .txt , стандартного текстового файла; нажмите «Использовать .htm». В Блокноте такой шаг не требуется. Однако на самом деле вы не увидите свои HTML-файлы в списке, если не выберете «Все файлы (*. *)» В поле «Сохранить как тип» (в котором изначально выбрано «Текстовые документы (* .txt)»).

  7. Чтобы просмотреть свою работу, откройте файл в браузере (рис. 1-6) .

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

    Рисунок 1-6. Адресная строка браузера показывает, где на самом деле находится текущая веб-страница. Если в адресе вы видите «http: //», это значит, что он исходит от веб-сервера в Интернете (вверху). Если вы посмотрите на веб-страницу, которая находится на вашем собственном компьютере, вы увидите обычный адрес локального файла (посередине, показывающий расположение файла Windows в Internet Explorer), или вы увидите URL-адрес, который начинается с префикса «file: // / ”(Внизу, где показано расположение файла в Chrome).

  8. По окончании редактирования закройте текстовый редактор .

    В следующий раз, когда вы захотите изменить документ, просто запустите текстовый редактор, выберите «Файл» → «Открыть», а затем выберите нужный файл или перетащите его в уже открытое окно текстового редактора.

Подсказка

Вот уловка, которая поможет вам открыть HTML-файлы в спешке. Найдите свой файл, затем щелкните его правой кнопкой мыши (на Mac нажмите, удерживая клавишу Control), и выберите «Открыть с помощью». Откроется список программ, которые можно использовать для открытия файла.Щелкните Блокнот (или TextEdit) в списке, чтобы запустить новое окно текстового редактора и открыть HTML-файл одним махом.

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

Просмотр HTML действующей веб-страницы

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

Если вы используете Internet Explorer, Chrome, Firefox или любой другой браузер, кроме Safari, вы можете использовать ярлык. После того, как вы перейдете на веб-страницу, которую хотите изучить, щелкните правой кнопкой мыши в любом месте страницы и выберите «Просмотр исходного кода» или «Просмотр исходного кода страницы» (точная формулировка зависит от браузера). Появится новое окно, показывающее необработанный HTML-код, лежащий в основе страницы.

Если вы используете Safari на Mac, вам нужно перепрыгнуть через лишнюю петлю, чтобы увидеть HTML-код веб-страницы. Сначала включите меню «Разработка», выбрав Safari → «Настройки» → «Дополнительно», а затем установите флажок «Показать меню разработки в строке меню». Как только вы это сделаете, посетите страницу, которую хотите проанализировать, и выберите «Разработка» → «Показать исходный код страницы».

Совет

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

Большинство веб-страниц значительно сложнее, чем пример popsicles.htm , показанный на рис. 1-1, поэтому вам нужно пройти через гораздо больше HTML-тегов, когда вы смотрите на разметку веб-страницы. Вы также, вероятно, найдете густую чащу кода JavaScript, набитого в верхней части страницы, лишенного всех интервалов и почти невозможного для чтения. Но даже если разметка выглядит тарабарщиной, не паникуйте. К тому времени, когда вы дочитаете эту книгу, вы сможете просмотреть груду HTML-кода, чтобы найти интересующие вас фрагменты.Фактически, профессиональные веб-разработчики часто используют технику просмотра исходного кода, чтобы проверить работу своих конкурентов.

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

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

Тег можно узнать по угловым скобкам, двум специальным символам, которые выглядят следующим образом: <> . При создании тега вы вводите код HTML в скобках. Этот код предназначен только для обозревателя; веб-посетители никогда его не видят (если только они не используют команду «Просмотр исходного кода» для просмотра HTML-кода). По сути, код — это инструкция, которая передает браузеру информацию о том, как отформатировать следующий текст.

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

 Этот текст не полужирный.  Этот текст выделен жирным шрифтом. 

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

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

 Не жирный шрифт.  Обратите внимание!  Теперь мы вернулись к нормальной жизни. 

Отображается в браузере как:

Не жирным шрифтом. Обратите внимание! Теперь мы вернулись к нормальной жизни.

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

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

Примечание

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

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

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

Рисунок 1-7.Чтобы получить жирный текст, вам нужно начать с правильного контейнера. Это элемент .

Примечание

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

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

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

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

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

Примечание

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

На рис. 1-8 показаны два типа элементов в перспективе.

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

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

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

 Это   слово   выделено полужирным шрифтом и курсивом. 

Когда браузер просматривает этот фрагмент HTML, он создает текст, который выглядит следующим образом:

Это слово имеет полужирное и курсивное форматирование.

Между прочим, не имеет значения, поменяете ли вы порядок тегов и . Следующий HTML дает точно такой же результат.

 Это   слово   выделено курсивом и полужирным шрифтом.

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

 Это   слово   выделено курсивом и полужирным шрифтом. 

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

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

Note

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

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

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

Определение типа документа

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

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

Интернет-сообщество остановилось на простом решении. При разработке новой современной веб-страницы вы указываете этот факт, добавляя код, называемый определением типа документа (DTD) или doctype , который идет в самом начале вашего HTML-документа (рис. 1-9).

Рисунок 1-9. Определение типа документа (DTD) - это первая часть информации в файле HTML.Он сообщает браузеру, какой стандарт разметки вы использовали для написания страницы.

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

Но когда браузер встречает HTML-документ, у которого нет документа, все ставки отключены. Internet Explorer, например, переключается в ужасный режим quirks , где он пытается вести себя так же, как 10 лет назад, с причудами и всем остальным.Это гарантирует, что действительно старые веб-страницы сохранят вид, который они имели при первом создании, даже если они полагаются на старые ошибки браузера, которые уже давно исправлены. К сожалению, разные браузеры по-разному ведут себя при просмотре страницы без документа. Скорее всего, вы получите текст разного размера, несогласованные поля и границы, а также неправильно расположенное содержание. По этой причине веб-страницы без доктайпов - плохая новость, и вам следует избегать их создания.

В прошлом веб-дизайнеры использовали разные типы документов для обозначения разных версий разметки HTML (например, XHTML, HTML5 или действительно старый HTML 4.01). Но сегодня веб-разработчики почти всегда используют простой универсальный тип документа HTML5:

  

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

Для сравнения, вот более многословный тип документа для XHTML 1.0, который вы все еще можете встретить на старых веб-страницах:

  

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

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

Примечание

В этой книге вы будете использовать только функции HTML5, которые работают во всех современных браузерах. Но если вам интересно узнать о более экспериментальных частях языка, которые все еще не очень хорошо поддерживаются браузерами, ознакомьтесь с HTML5: The Missing Manual (O’Reilly).

Теперь вы готовы заполнить остальную часть веб-страницы.

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

Этот элемент охватывает все (кроме документа) на вашей веб-странице.

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

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

Есть только один правильный способ использовать эти три элемента на странице.Вот их правильное расположение с типом документа HTML5 в начале страницы:

 


...


...

 

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

Когда у вас есть скелет HTML, вам нужно добавить в смесь еще два элемента контейнера.Для каждой веб-страницы требуется элемент </code>, который находится в разделе заголовка страницы, и вам необходимо создать контейнер для текста в разделе <code> <body> </code> страницы. Один универсальный текстовый контейнер - это элемент <code> <p> </code>, который представляет абзац. </p> <p> Вот элементы, которые вам нужно добавить: </p> <dl> <dt> <code> <title> </code> </dt> <dd> <p> Этот элемент устанавливает заголовок для вашей веб-страницы. В названии играет несколько ролей.Сначала веб-браузеры отображают его на вкладке браузера или в верхней части окна браузера. Во-вторых, когда посетитель добавляет вашу страницу в закладки, браузер использует название в качестве метки закладки. В-третьих, когда ваша страница появляется в веб-поиске, поисковая система обычно отображает этот заголовок в качестве первой строки результатов, за которым следует фрагмент контента со страницы. </p> </dd> <dt> <code> <p> </code> </dt> <dd> <p> Обозначает абзац. Веб-браузеры не делают отступы между абзацами, но они добавляют небольшой промежуток между последовательными абзацами, чтобы они оставались разделенными.</p> </dd> </dl> <p> Вот веб-страница с этими двумя новыми ингредиентами (выделены жирным шрифтом): </p> <pre> <! DOCTYPE html> <html> <head> <strong> <code> <title> Все, что я знаю о веб-дизайне

Если вы откроете этот документ в веб-браузере, вы обнаружите, что страница пуста, но отображается заголовок (как показано на рисунке 1-10).

Рисунок 1-10.Когда браузер отображает веб-страницу, он показывает заголовок страницы на вкладке браузера или в верхней части окна. Но учтите: название не всегда подходит.

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

Учебное пособие: создание полного HTML-документа

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

Подсказка

Как и все учебные пособия в этой книге, вы можете найти решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с именем Tutorial-1-2 (сокращение от «Chapter 1, second tutorial»). По мере того, как вы создаете эту страницу, добавляя список, изображение и заголовки, она проходит несколько итераций.Учебные файлы включают отдельный файл для каждого этапа улучшения.

Независимо от того, какую страницу вы хотите создать, вы всегда начинаете одинаково:

  1. Запустите текстовый редактор .

    Это Блокнот или TextEdit.

  2. Введите скелет HTML в новый файл .

    Это doctype, корневой элемент и два основных раздела каждой веб-страницы: и .Выглядит это так:

     
    
    
    
    
    
     

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

  3. Добавьте заголовок в раздел .

    Добавьте элемент </code> в новую строку между открывающим тегом <code> <head> </code> и закрывающим тегом <code> </head> </code>: </p> <pre> <strong> <code> <title> Hire Me!

  4. Добавьте свой контент в раздел .

    Например, предположим, вы хотите написать простую страницу резюме. Вот очень простой пример:

     
    
    
        Найми меня!   
    
    
       

    Меня зовут Ли Пак.Нанять меня в свою компанию, потому что моя работа прямо сейчас .

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

  5. Сохраните HTML-файл как резюме .htm и откройте его в веб-браузере .

    Если ваша страница отображается правильно (см. Рис. 1-11), вы можете быть уверены, что у вас хорошее начало.

Рисунок 1-11. Добро пожаловать в Интернет. На этой странице не так много полезных функций HTML (и Ли, вероятно, не получится нанять), но она представляет собой одну из самых простых HTML-страниц, которые вы можете создать.

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

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

 


 Наймите меня! 


Я Ли Пак.Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Мои навыки включают: * Быстрый набор текста (почти 12 слов в минуту). * Невероятная заточка карандашей. * Изобретательское оправдание. * Ведение переговоров с мировыми офицерами.

Проблема возникает, когда вы открываете этот, казалось бы, невинный документ в своем веб-браузере (рис. 1-12).

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

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

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

Чтобы иметь дело с этим диапазоном опций отображения, HTML использует элементы для определения структуры вашего документа. Вместо того, чтобы сообщать браузеру: «Здесь вы переходите к следующей строке, а здесь вы добавляете четыре дополнительных пробела», HTML сообщает браузеру: «Вот два абзаца и маркированный список». Браузер должен отображать страницу, используя инструкции, которые вы включаете в свой HTML.

Чтобы исправить пример резюме, вам нужно использовать больше элементов абзаца и два новых элемента контейнера:

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

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

      . Другими словами, каждый элемент списка (
    • ) должен находиться внутри элемента списка (
        ).

    Вот исправленная веб-страница (показанная на рис. 1-13), где структурные элементы выделены жирным шрифтом:

     
    
    
     Наймите меня! 
    
    
       

    Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот .

    Мои навыки включают:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Изобретательское оправдание.
    • Ведение переговоров с мирными офицерами.

    Рисунок 1-13. При наличии правильных элементов (как показано в коде на этой странице) браузер понимает структуру вашего HTML-документа и знает, как его отображать.

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

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

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

    Рисунок 1-14. Вот еще один способ взглянуть на созданный вами HTML-код. Модель дерева показывает, как вы вкладываете элементы HTML. Следуя стрелкам, вы увидите, что элемент верхнего уровня содержит элементы и .Внутри элемента находится элемент </code>, а внутри элемента <code> <body> </code> находятся два абзаца и маркированный список с четырьмя элементами. Если вы посмотрите на модель дерева достаточно долго, вы поймете, почему HTML называет все эти элементы «элементами-контейнерами». </p> <p> Если вы мазохист, вам не нужно использовать пробелы. Предыдущий пример в точности эквивалентен следующему гораздо менее читаемому HTML-документу: </p> <pre> <! DOCTYPE html> <html> <head> <title> Hire Me!

    я Ли Парк.Наймите меня в свою компанию, потому что моя работа без спешки .

    Мои навыки:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Изобретательность поиск оправданий.
    • Ведение переговоров с мирными офицерами.

    Конечно, человеку почти невозможно написать такой HTML, не допустив ошибки.

    Где все картинки?

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

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

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

    Хотя в главе 4 вы узнаете все, что когда-либо хотели знать о веб-графике, сейчас стоит рассмотреть простой пример. Чтобы попробовать это, вам понадобится готовое для Интернета изображение. (Наиболее часто поддерживаемые типы файлов изображений - это JPEG, GIF и PNG.) Если у вас нет изображения под рукой, вы можете загрузить образец изображения leepark.jpg из папки Tutorial-1-2. Вот пример элемента , который использует файл leepark.jpg :

      Lee Park Portrait  

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

    Однако есть очевидная разница между элементом
    и элементом . Хотя является отдельным элементом, это не т самодостаточный.Чтобы элемент имел какое-либо значение, вам необходимо предоставить еще две части информации: имя файла изображения и некоторый альтернативный текст, который используется в тех случаях, когда браузер не может загрузить или отобразить изображение (см. Альтернативный текст ). Чтобы включить эту дополнительную информацию в элемент изображения, HTML использует атрибутов , дополнительные части информации, которые появляются через после имени элемента, но перед закрывающим символом>.

    Пример включает два атрибута, разделенных пробелом.Каждый атрибут состоит из двух частей: имени (которое сообщает браузеру, что делает атрибут) и значения (части информации, которую вы предоставляете). Имя первого атрибута - src , что является сокращением от слова «источник»; он сообщает браузеру, где взять нужное изображение. В этом примере значение атрибута src равно leepark.jpg , что является именем файла с изображением Ли Пака.

    Имя второго атрибута - alt , что является сокращением для «альтернативного текста.Он сообщает браузеру, что вы хотите, чтобы он отображал текст, если он не может отображать изображение. Его значение - это текст, который вы хотите отобразить, в данном случае это «Lee Park Portrait».

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

     
    
    
     Наймите меня! 
    
    
    

    Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Lee Park Portrait

    Мои навыки включают:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Изобретательное придумывание оправданий.
    • Ведение переговоров с мирными офицерами.

    На рис. 1-15 показано, где именно заканчивается изображение.

    Рисунок 1-15.Вот веб-страница, на которой встроено изображение благодаря связывающей способности элемента изображения. Чтобы отобразить этот документ, веб-браузер выполняет отдельный запрос на получение файла изображения. В результате ваш браузер может отображать текст веб-страницы перед загрузкой изображения, в зависимости от того, сколько времени занимает загрузка (обычно это доли секунды).

    Note

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

    10 самых важных элементов (и еще несколько)

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

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

    Примечание

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

    Некоторые элементы, такие как элемент

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

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

    Таблица 1-1. Базовые блочные элементы.

  • Функции WordPress Joomla Drupal
    Стоимость Бесплатно Бесплатно миллионов бесплатно
    31,216 миллионов
    Бесплатные темы 4,000+ 1,000+ 2,000+
    Бесплатные плагины 45,000+ 7,000+

    ЭЛЕМЕНТ

    НАИМЕНОВАНИЕ

    ТИП ЭЛЕМЕНТА

    ОПИСАНИЕ 53 903

    3

    Контейнер

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

    ,

    ,

    ,

    ,
    ,

    Заголовок

    Контейнер

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

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


    Горизонтальная линия (или горизонтальная линия на языке HTML)

    Автономный

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

      ,

    Неупорядоченный список, элемент списка

    Контейнер

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

      на
        , чтобы получить автоматически пронумерованный список вместо маркированного списка (ol означает «упорядоченный список»).

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

    Таблица 1-2. Основные встроенные элементы.

    Полужирный и курсив

    ЭЛЕМЕНТ

    НАИМЕНОВАНИЕ

    ТИП

    ОПИСАНИЕ

    3

    Контейнер

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


    Разрыв строки

    Автономный

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

    Изображение

    Автономный

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

    Якорь

    Контейнер

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

    Чтобы образец резюме выглядел более респектабельно, вы можете использовать несколько ингредиентов из таблиц 1-1 и 1-2. На рис. 1-16 показана измененная версия веб-страницы, в которую добавлены некоторые новые элементы.

    Рисунок 1-16. Этот HTML-документ, содержащий больше заголовков, списков и горизонтальную линию, добавляет немного больше стиля резюме.

    Вот обновленный HTML с новыми заголовками и горизонтальной линией, выделенными жирным шрифтом:

     
    
    
       Наймите меня! 
    
    
       

    Наймите меня!

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

    Незаменимые навыки

    Мои навыки включают:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Изобретательное придумывание оправданий.
    • Ведение переговоров с мирными офицерами.

    А еще я знаю HTML!

    Предыдущий опыт работы

    У меня долгая и блестящая карьера в самых разных профессиях. Вот некоторые основные моменты:

    • 2008-2009 - работал машинисткой в ​​ Flying Fingers
    • 2010-2013 - Выполнение передовых веб-дизайнеров в Riverdale Ферма
    • 2014–2015 гг. - отмечен в главе 1 книги Создание веб-сайта: The Отсутствует руководство

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

    Проверка страниц на наличие ошибок

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

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

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

    Вот некоторые потенциальные проблемы, которые может обнаружить валидатор:

    • Отсутствуют обязательные элементы (например, элемент ).</p> </li> <li> <p> Начальный тег контейнера без соответствующего конечного тега. </p> </li> <li> <p> Неправильно вложенные теги. </p> </li> <li> <p> Теги с отсутствующими атрибутами (например, элемент <code> <img> </code> без атрибута <code> src </code>). </p> </li> <li> <p> Элементы или контент в неправильном месте (например, текст, помещенный непосредственно в раздел <code> <head> </code>). </p> </li> </ul> <p> В Интернете можно найти множество инструментов для проверки.Следующие шаги показывают, как использовать популярный валидатор, предоставляемый организацией по стандартизации W3C (официальные владельцы языка HTML). Попробуйте это с помощью файла <em> resume.htm </em>, который вы создали во втором учебном пособии (Учебное пособие: создание полного HTML-документа). Или дайте валидатору повод для жалоб с помощью файла <em> popsicles.htm </em>, который вы создали в первом руководстве (Учебник: Создание файла HTML). Поскольку это фрагмент HTML, а не полный документ HTML, валидатор быстро пожалуется на недостающие биты, такие как требуемые элементы <code> <html> </code>, <code> <head> </code> и <code> <body> </code>.</p> <p> После того, как вы решите, что вы хотите проверить, выполните следующие действия: </p> <ol type="1"> <li> <p> <strong> Убедитесь, что ваш документ имеет тип документа </strong> (Общие сведения о документах HTML). </p> <p> doctype сообщает валидатору, какие правила использовать при проверке вашего документа. В этой книге мы придерживаемся универсального типа документа HTML5 («Базовый скелет»). </p> </li> <li> <p> <strong> В веб-браузере перейдите по адресу </strong> http://validator.w3.org (рис. 1-17). </p> <p> Валидатор W3C предлагает три варианта выбора, представленных тремя вкладками: Проверить по URI (для страницы, которая уже находится в сети), Подтвердить по загрузке файла (для страницы, которая хранится на вашем компьютере) и Подтвердить с помощью прямого ввода (для разметки). вы вводите прямо в предоставленное поле).</p> Рисунок 1-17. На веб-сайте http://validator.w3.org есть три варианта проверки HTML. Вы можете ввести адрес страницы в Интернете, вы можете загрузить свой собственный файл (показанный здесь) или ввести разметку напрямую. </li> <li> <p> <strong> Щелкните нужную вкладку и введите содержимое HTML </strong>. </p> <p> <strong> Проверить по URI </strong> позволяет проверить существующую веб-страницу. Просто введите URL-адрес (это полный Интернет-адрес) страницы в поле «Адрес» (например, www.MySloppySite.com/FlawedPage.html). </p> <p> <strong> Подтвердить загрузкой файла </strong> позволяет загружать любой файл с вашего компьютера. Сначала нажмите кнопку «Обзор» (которая называется «Выбрать файл в Chrome»), чтобы увидеть стандартное диалоговое окно «Открыть». Перейдите к местоположению вашего HTML-файла, выберите его и нажмите «Открыть». Это самый простой способ убедиться, что вы все правильно поняли со страницей <em> resume.htm </em>, которую вы создали ранее. </p> <p> <strong> Проверка прямым вводом </strong> позволяет проверять любую разметку - вам просто нужно ввести ее в предоставленное большое поле.Самый простой способ использовать эту опцию - скопировать разметку из текстового редактора и вставить ее в поле. </p> <p> Перед тем, как продолжить, вы можете щелкнуть Дополнительные параметры в любом из окон с вкладками, чтобы установить другие параметры, но вы, вероятно, этого не сделаете. Лучше всего позволить валидатору автоматически определять тип документа; Таким образом, валидатор будет использовать тип документа, указанный на вашей веб-странице. Точно так же оставьте для параметра «Кодировка символов» значение «обнаруживать автоматически», если вы не написали свою страницу не на английском языке, и у валидатора возникнут проблемы с определением правильного набора символов.</p> </li> <li> <p> <strong> Нажмите кнопку Проверить </strong>. </p> <p> После небольшой задержки валидатор сообщает, прошел ли ваш документ проверку валидации или, в случае неудачи, какие ошибки обнаружил валидатор (см. Рисунок 1-18). </p> <p> Валидатор также может предложить несколько безобидных предупреждений для совершенно корректного HTML-документа, включая предупреждение о том, что кодировка символов была определена автоматически, и предупреждение о том, что служба проверки HTML5 считается экспериментальной, незаконченной функцией.</p> </li> </ol> <p> Рисунок 1-18. В этом файле валидатор обнаружил 10 ошибок, связанных с двумя ошибками. Во-первых, на странице отсутствует обязательный элемент <code> <title> </code>. Во-вторых, он закрывает элемент <code> <li> </code> перед закрытием элемента <code> <b> </code>, вложенного внутрь. (Чтобы решить эту проблему, замените <code> </li> </b> </code> на <code> </b> </li> </code>.) Между прочим, этот файл все еще достаточно близок, чтобы исправить его, чтобы браузеры могли отображать его правильно.</p> <h2><span class="ez-toc-section" id="_-_2021"> Как создать веб-сайт: пошаговое руководство на 2021 год </span></h2> <p> Вы хотите создать веб-сайт? Вы попали в нужное место. Вооружившись этим пошаговым руководством, у вас будет четкая дорожная карта для создания собственного сайта. </p> <p> Для этого не обязательно быть программистом, компьютерщиком или технарем. Также не обязательно быть иллюстратором или дизайнером. Все, что вам нужно сделать, это потратить некоторое время, принять некоторые решения, потратить несколько долларов и написать содержание вашего сайта, и вскоре у вас будет новый блестящий веб-сайт, который вы будете с гордостью продвигать.</p> <h3><span class="ez-toc-section" id="i-75"> Вы хотите создать сайт? Вот с чего начать </span></h3> <p> Прежде чем вы вытащите свою кредитную карту и подпишетесь на конструктор веб-сайтов или план веб-хостинга, вам необходимо принять несколько важных решений. Некоторые из этих решений проложат ваш курс на долгую перспективу. Другие - простые варианты для начала. Мы проведем вас через все и дадим несколько советов, как принять решение. Вот первые четыре: </p> <ol> <li> Является ли блокировка приемлемым риском или вы хотите спланировать переносимость сайта? </li> <li> Вы покупаете домен через регистратора доменов или получаете его вместе с тарифным планом хостинга? </li> <li> Вы нанимаете консультанта или сами создаете сайт? </li> <li> Вы используете конструктор сайтов или WordPress? </li> </ol> <p> Давайте рассмотрим каждый по очереди.</p> <h3><span class="ez-toc-section" id="i-76"> Что такое блокировка, стоимость переключения и переносимость? </span></h3> <p> В этом разделе я расскажу о стоимости переключения <em> </em>. Это наиболее важная концепция, которую необходимо понять, прежде чем принимать какие-либо решения по настройке сайта. К сожалению, вы не увидите, чтобы этот вопрос обсуждался в большинстве статей о том, как создать веб-сайт. Я думаю, это потому, что у большинства людей, пишущих такие статьи, нет такого многолетнего опыта работы с производственными сайтами, как у меня. </p> <p> Если вы создаете растущий сайт, который хотите развивать годами, вы, вероятно, захотите любой ценой избежать блокировки.</p> <p> Вот проблема: создание веб-сайта - это сложный процесс, включающий множество технологий и конфигураций, работающий поверх серверной среды, предоставляемой провайдером хостинга. Стоимость перехода - это время, усилия и долларовые затраты на переход на нового поставщика. Неспособность легко переключиться называется <em>, блокировка </em>. </p> <p> Если вы запускаете активный веб-сайт в течение любого количества лет, почти гарантировано, что вам придется сменить хостинг-провайдера. Это лишь некоторые из причин, по которым вам может потребоваться перейти: </p> <ul> <li> Ваш провайдер может стать ненадежным, может повысить цены или начать предлагать более низкую качественную поддержку.</li> <li> Ваш сайт может просто превзойти возможности провайдера. </li> <li> Серверное программное обеспечение хостинг-провайдера может не соответствовать требованиям безопасности платежной системы. </li> </ul> <p> Несколько лет назад мне пришлось переключиться из-за очень печального обстоятельства: скончался владелец одного из моих хостинг-провайдеров, и компания просто закрылась, что сделало быстрое переключение неожиданной срочностью. </p> <p> Вы можете работать с одним поставщиком услуг в течение трех, четырех, пяти или более лет.Но если вы управляете сайтом на длительный срок, редко удается остановиться на одном хостинг-провайдере, если у вас просто нет выхода. Итак, планирование возможности переключения полезно. </p> <p> Многие веб-конструкторы являются проприетарными, поэтому, если вы хотите переключиться на другую службу, вам придется перестроить свой сайт в основном или полностью с нуля. По крайней мере, между сервисами будет тонна вырезок и вставок. </p> <p> Для небольших сайтов это не проблема. Перестроить пять или десять веб-страниц - не проблема.Но если ваш сайт состоит из 50, 100 или даже тысяч страниц, вам придется много копировать и вставлять (или, если вам очень повезет, экспортировать и импортировать). Подумайте об этом: если вы будете делать одно сообщение в блоге каждый будний день, к концу года у вас будет как минимум 261 страница. Контент расширяется очень быстро. </p> <p> Другой подход - создать веб-сайт с использованием сторонних инструментов. Когда мы дойдем до этого, мы будем много обсуждать WordPress. Преимущество непатентованных инструментов состоит в том, что они делают переключение более практичным.Недостаток в том, что они обычно более сложные. </p> <p> Обсуждая решения, которые вы собираетесь принимать при настройке своего сайта, мы будем возвращаться к вопросу блокировки снова и снова. Вам нужно будет заранее решить, является ли блокировка приемлемым риском или вы хотите спланировать переносимость сайта. Как правило, если вы ожидаете, что у вас будет всего несколько страниц, которые не меняются с течением времени, возможно, вам подойдет блокировка. Но если вы создаете растущий сайт, который хотите развивать годами, вы, вероятно, захотите любой ценой избежать блокировки.</p> <h3><span class="ez-toc-section" id="i-77"> Зарегистрируйте доменное имя </span></h3> <p> Независимо от того, какую технологию вы используете для создания своего веб-сайта (мы поговорим об этом позже), вам понадобится доменное имя. Это онлайн-бренд вашего сайта, и поэтому он является важной частью вашего присутствия в Интернете. </p> <p> Не позволяйте поставщикам веб-хостинга убеждать вас использовать что-то вроде yourname.theirname.com. Лучше иметь yourbrand.com в качестве доменного имени. Доменные имена стоят около 10 долларов в год, и вы идете к регистратору доменов, чтобы купить его.Единственная проблема, как и в случае с номерными знаками тщеславия, - найти тот, который еще не использовался. </p> <p> Вот предостережение: большинство регистраторов также предлагают некоторую форму рынка доменов, где те, кто владеет доменными именами, пытаются продать их другим, кому они нужны. Держись подальше. </p> <p> У меня есть знакомый, который решил, что ему нужно очень конкретное имя, и потратил тысячи на его покупку. Да, название вашей компании могло уже быть занято. Будь креативным. Есть еще много отличных комбинаций букв.Не тратьте сотни, тысячи или даже десятки тысяч долларов на доменное имя. Просто проявите изобретательность и выберите тот, который доступен. </p> <p> Многие хостинг-провайдеры и разработчики веб-сайтов включают бесплатное доменное имя в свой тарифный план. У этого пути есть свои плюсы и минусы. Часто можно сэкономить десять долларов в течение первого года, и обычно это на несколько минут легче настроить. Но затраты на переключение будут, если вам нужно переехать. </p> <p> <strong> Рекомендация: </strong> Мне нравится хранить свои домены отдельно от моих хостинг-провайдеров, поэтому у меня больше контроля над тем, куда они указывают.Если я хочу или мне нужно сменить хост, я не пытаюсь одновременно извлечь свой домен. Если вы выберете регистратора доменов отдельно от вашего хостинг-плана, вы также можете установить свою онлайн-личность на раннем этапе процесса. В противном случае вам, возможно, придется подождать, пока вы не выберете технологию хостинга и поставщика. </p> <p> У вас вряд ли будет доступ к одному и тому же разработчику на протяжении всего срока существования вашего сайта. Консультанты уезжают, находят новую работу, уезжают, умирают или увольняются. Я </p> <p> Лично я использовал GoDaddy и Namecheap, оба из которых предлагали хорошие цены и разумную поддержку.</p> <h3><span class="ez-toc-section" id="i-78"> Построить самому или нанять консультанта? Как принять решение? </span></h3> <p> Если вы управляете большой корпорацией, которая может нанять веб-команду, конечно, выйдите и наймите консультанта. И хотя существует множество веб-разработчиков (фрилансеров и агентств), которые отлично справляются со своей работой, они могут значительно усложнить задачу. А пока я расскажу вам несколько причин, по которым я не рекомендую вам кого-то нанимать. После я покажу вам несколько советов, как добиться успеха, если вы это сделаете. </p> <p> Давайте начнем с причин, по которым вы, возможно, не захотите кого-то нанимать.Вверху списка стоит стоимость. Создание собственного веб-сайта - это большая работа. Хотя можно создавать сайты-формочки, на которых меняются только логотип и цвета, для создания чего-либо, сделанного с большей индивидуальностью, потребуются дни, недели или месяцы. </p> <p> Я волонтер в некоммерческой организации. Я согласился построить свой сайт. У него было всего несколько настраиваемых функций (измененный список участников и доступ только для участников). Даже с несколькими настраиваемыми функциями мне потребовалось несколько недель, чтобы собрать его воедино.Даже стоимость найма наименее дорогого разработчика с оплатой от 80 до 100 часов увеличится. </p> <p> Однако, помимо затрат, это потеря контроля. Я также поддерживаю приложение для бесплатных пожертвований, опять же как часть моей работы на общественных началах. По крайней мере, раз в неделю кто-то связывается со мной, говоря, что они потеряли своего разработчика (или они понятия не имеют, кем был первоначальный разработчик), и им нужно знать, как изменить свой сайт. </p> <p> <strong> Рекомендация: </strong> Собери сам. </p> <p> У вас вряд ли будет доступ к одному и тому же разработчику на протяжении всего срока существования вашего сайта.Консультанты уезжают, находят новую работу, уезжают, умирают или увольняются. Если вы полностью полагаетесь на кого-то другого, чтобы поддерживать свой сайт, вы подвергаетесь серьезному риску. Это невероятно ценно, особенно для ваших первых нескольких сайтов, - создавать их самостоятельно. Узнайте о хостинге. Узнайте о своей системе управления контентом. Узнайте о резервных копиях. </p> <p> Если вы разовьете эти базовые навыки, вы сможете сразу же приступить к работе, если ваш разработчик недоступен. По крайней мере, у вас будет больше шансов понять, является ли запрашиваемая консультантом цена разумной или завышенной.</p> <p> Если вы действительно хотите нанять консультанта, мой самый главный совет - делать каждую работу простой, с четкими целями и измеримым набором руководящих принципов. Вместо того, чтобы нанимать кого-то для разработки всего вашего сайта, вы можете нанять кого-нибудь для настройки вашего плагина электронной коммерции и научить вас, как его поддерживать. Вместо того, чтобы заставлять кого-то создавать дизайн всего сайта, вы можете нанять кого-то, кто поможет вам выбрать цвета вашего сайта и настроить CSS для их отображения. </p> <p> <strong> Рекомендация: </strong> Делайте задания простыми, ощутимыми и поддающимися объективной оценке.Гораздо проще убедить поставщика внести исправление, потому что платежи не обрабатываются, чем попытаться убедить консультанта изменить дизайн, потому что у вас не появилось легкого и легкого ощущения, на которое вы надеялись. </p> <h3><span class="ez-toc-section" id="_WordPress"> Конструктор сайтов или WordPress? </span></h3> <p> Теперь вы находитесь перед одним из наиболее важных структурных решений, касающихся вашего сайта: использовать ли службу конструктора веб-сайтов, такую ​​как Wix или Squarespace, или создать размещенный сайт, вероятно, на основе WordPress. </p> <p> Без сомнения, если вам нужен самый быстрый и простой путь к веб-сайту, один из конструкторов веб-сайтов поможет вам там.Проблема в том, что создатели веб-сайтов стремятся к привязке. Если вы хотите переместить свой сайт к другому провайдеру или другой технологии управления сайтом, вам придется перестраивать весь сайт с нуля. </p> <p> Вот диаграмма, которая помогает сравнить два подхода: </p> <h3><span class="ez-toc-section" id="i-79"> Параметр конструктора веб-сайтов </span></h3> <p> Как я уже упоминал, вариант конструктора веб-сайтов - это самый быстрый путь к сайту. Все, что вам нужно сделать, это выбрать строителя. Как только вы это сделаете, вы создаете учетную запись, выбираете тему, наполняете свой сайт словами и изображениями, и все готово.Строитель будет выполнять хостинг, управлять серверами и даже предоставлять вам доменное имя. Но - и это стоит повторить - после того, как вы выбрали конструктор веб-сайтов, сложно переключиться. </p> <p> Для некоторых из вас, читающих это, возможности переключения и гибкость могут не иметь значения. Быстрое начало работы может иметь большее значение. Итак, для вас давайте немного углубимся в выбор строителя. </p> <p> Во-первых, я собираюсь указать вам на нашу статью, в которой сравниваются конструкторы веб-сайтов. Это отличное место, чтобы начать смотреть на каждый из продуктов конструктора, сравнивать характеристики и цены.</p> <p> <strong> Также: Лучший конструктор веб-сайтов на 2021 год: ваше пошаговое руководство </strong> </p> <p> Вот пять факторов, которые следует учитывать при выборе конструктора веб-сайтов: </p> <ol> <li> <strong> Пробный период. </strong> Важно иметь достаточно времени, чтобы ознакомиться с услугой и решить, может ли она делать то, что вы хотите. </li> <li> <strong> Выбор шаблона. </strong> Это большой. Вам необходимо выбрать внешний вид вашего сайта. Если у конструктора нет того вида, который вам нужен, не подписывайтесь. И наоборот, если вам нравится определенный вид, это может быть конструктором для вас.</li> <li> <strong> Электронная коммерция. </strong> Хотите продавать физические или цифровые товары? У разработчика должна быть опция электронной коммерции, которая соответствует вашим потребностям. </li> <li> <strong> Услуги прочие. </strong> Вам нужны форумы, социальные ссылки, блоги или типы видеоконтента? Убедитесь, что выбранный вами строитель предлагает их. </li> <li> <strong> Цена и вместимость. </strong> Выберите услугу, которая может работать с сайтом того размера, который вы собираетесь создать, и находится в пределах вашего бюджета. </li> </ol> <p> Некоторые конструкторы предлагают дополнительные преимущества, такие как библиотеки графики, бесплатная электронная почта, управление списком рассылки и многое другое.Тщательно продумайте то, что вам нужно, и оцените соответственно. Воспользуйтесь всеми преимуществами любого пробного периода и тестируйте, тестируйте, тестируйте. Лучше узнать об ограничениях сейчас, чем позже, когда вы полностью заблокированы и затраты на переключение будут намного выше. </p> <p> Конструктор веб-сайтов Wix </p> <h4><span class="ez-toc-section" id="i-80"> Выбор и настройка вашего шаблона </span></h4> <p> Хотя большинство конструкторов веб-сайтов предлагают примерно одинаковый набор функций, больше всего они будут отличаться в дизайне шаблонов. Дизайн шаблона - это одновременно искусство и наука, и поэтому вы можете обнаружить, что эстетика, предлагаемая одним поставщиком, значительно отличается от другого.</p> <p> Обязательно протестируйте свой шаблон не только на компьютере. Протестируйте его на планшетах и ​​телефонах, чтобы убедиться, что он также отображается правильно. </p> <p> Шаблоны обычно бывают разных категорий: </p> <ul> <li> Блог </li> <li> Брошюра </li> <li> Информационный сайт </li> <li> Портфолио </li> <li> Целевая страница </li> <li> Членский сайт </li> <li> Резюме </li> <li> Магазин </li> </ul> <p> Часто страницы можно включать в несколько стилей один сайт. Итак, если вам нужен сайт, который предоставляет информацию о вашей компании, но также имеет блог, портфолио клиентских проектов, которые вы хотите продемонстрировать, и магазин для покупки некоторых загрузок, убедитесь, что ваш провайдер может справиться со всеми этими вариантами - - и что они выглядят как что-то, что соответствует стилю вашей компании.</p> <p> Выбрав шаблон, вы захотите наполнить его своим уникальным содержанием. Вы можете написать свой текст прямо в редакторе конструктора веб-сайтов или написать его в текстовом редакторе и вставить. Мне нравится писать свои статьи, в основном, в Evernote, а затем вставлять их в свои сообщения. Таким образом, если я случайно нажму кнопку «Назад» в своем браузере, я уверен, что не потеряю все свои жестко созданные тексты. Если я пишу прямо в инструменте публикации (как сейчас), я обязательно нажимаю «Сохранить». Много.</p> <p> Обязательно протестируйте свой шаблон не только на компьютере. Протестируйте его на планшетах и ​​телефонах, чтобы убедиться, что он также отображается правильно. Большинство шаблонов, предоставляемых более крупными службами создания веб-сайтов, делают это автоматически. </p> <h4><span class="ez-toc-section" id="i-81"> Электронная коммерция: Настройка онлайн-продаж </span></h4> <p> Интересно, что онлайн-продажи проявляются в том, как обрабатываются деньги и как вам удается доставлять товары. </p> <p> Часто довольно просто настроить сайт для продажи через Интернет. Создатели веб-сайтов часто занимаются всеми аспектами фиксации продаж, включая получение денег у ваших клиентов.Обычно вы настраиваете списки продуктов, часто с категориями, а затем загружаете описания и изображения предметов, которые хотите продать. </p> <p> Интересно, что онлайн-продажи - это то, как обрабатываются деньги и как вам удается доставить товары. Как правило, большинство поставщиков веб-сайтов предлагают обрабатывать кредитные карты с использованием некоторых услуг, с которыми они заключили договор. Обычно они снимают комиссию сверху, процент от каждой транзакции плюс комиссия за транзакцию. Они также могут взимать дополнительную плату только за использование услуги электронной коммерции.</p> <p> Другие службы предоставят вам возможность использовать PayPal или Stripe, по крайней мере, если вы находитесь в США. Оба собирают деньги клиентов, выплачивая вам платежи либо при достижении порогового значения, либо на регулярной основе. Я работал как с PayPal, так и с Stripe, и хотя у меня как разработчика была гораздо лучшая поддержка со стороны Stripe, очень немногие из моих пользователей сильно жаловались на любую услугу. </p> <p> Настроенная вами корзина покупок может потребоваться для доставки цифровых товаров и разблокировки файлов для загрузки после завершения оплаты.Однако редко когда система корзины конструктора веб-сайтов предлагает лицензирование. Если вы хотите выдавать номера лицензий для каждой цифровой загрузки, вам, вероятно, понадобятся решения WordPress, которые мы обсудим чуть позже. </p> <p> Если вы отправляете физические товары, вам нужно убедиться, что тележка обрабатывает налоги, а также предоставляет вам некоторый механизм для управления доставкой. Идеальная тележка даст вам возможность печатать транспортные этикетки и взаимодействовать с UPS или USPS для доставки. Если вы хотите продавать физические предметы, определенно найдите время, чтобы внимательно изучить эти функции.</p> <p> WordPress - отличный вариант, если вам нужна гибкость и масштабируемость. </p> <h3><span class="ez-toc-section" id="WordPress"> WordPress: лучшее при создании веб-сайтов </span></h3> <p> Вот и все для разработчиков веб-сайтов. Дайте им номер своей кредитной карты и начните создавать свой контент. Затем давайте посмотрим на размещенный WordPress, который является гораздо более гибким (но немного более сложным) вариантом. Лично я использую такой вариант. </p> <p> WordPress имеет огромное сообщество пользователей, практически неограниченное количество обучения, помощи и поддержки, а также огромное количество ресурсов.</p> <p> Если вы решите, что вам нужно больше гибкости и контроля, чем предоставляют конструкторы веб-сайтов, я собираюсь сделать очень осторожный шаг и рекомендовать вам рассматривать WordPress как основу вашего веб-сайта. По данным службы отслеживания W3Techs, WordPress теперь управляет 40% всех веб-сайтов и занимает 64,3% рыночной доли всех сайтов, основанных на системе управления контентом. </p> <p> WordPress - это CMS с открытым исходным кодом, которую вы устанавливаете на сайт вашего хостинг-провайдера. Обычно WordPress поставляется предварительно установленным, или вам нужно запустить быстрый установщик для создания сайта.В процессе установки нужно ответить на несколько основных вопросов. Чтобы просто запустить WordPress, редко требуется больше пяти минут или около того. </p> <p> <strong> Также: </strong> <strong> Лучший хостинг WordPress в 2021 году </strong> </p> <p> Настройка WordPress может занять некоторое время. Это потому, что существует так много опций и возможностей, особенно если учесть дополнительные функции, предлагаемые плагинами и темами. </p> <p> Еще одно преимущество WordPress: поскольку он настолько огромен, существует огромное сообщество пользователей и практически неограниченное количество обучения, помощи и поддержки, а также виртуальное рог изобилия ресурсов, сайтов и полезных людей, знающих WordPress.</p> <p> Если вы хотите глубоко погрузиться в сайт WordPress шестилетней давности, который предоставляет поддержку, электронную коммерцию и информацию, я написал подробную статью (ниже) о том, как работает мой сайт программных продуктов. Имейте в виду, что это результат многолетней эволюции, поэтому не ожидайте, что вам придется все это понимать прямо сейчас, но если вы планируете расти, это хороший пример того, что вы будете строить. за несколько лет: </p> <p> <strong> Реальный пример: </strong> <strong> Сайт WordPress 101: Бесплатные и недорогие инструменты для создания мощного веб-присутствия </strong> </p> <h4><span class="ez-toc-section" id="_WordPress-2"> Плагины WordPress </span></h4> <p> Плагины расширяют возможности WordPress.Их тысячи и тысячи. Я считаю плагины большой силой WordPress, потому что они позволяют настраивать WordPress практически для чего угодно. Многие из них бесплатны, многие - платные дополнения. Многие предлагают бесплатный основной плагин, но продают либо профессиональную версию, либо дополнительные возможности. </p> <p> Существует широкий спектр возможностей плагина, от небольших настроек поведения WordPress до основных приложений, таких как: </p> <ul> <li> Членство </li> <li> Поддержка билетов </li> <li> Управление пожертвованиями </li> <li> Контроль конфиденциальности </li> <li> SEO (поисковая оптимизация) </li> <li> Электронная коммерция </li> <li> И даже в таких отраслях, как управление рестораном, службы доставки, расписание кабинетов врачей и многое другое.</li> </ul> <p> <strong> Рекомендация: </strong> Лучшее место для начала поиска плагинов WordPress - это официальный репозиторий плагинов WordPress. Существуют и другие источники плагинов (в том числе их разработчики для премиум-версий), но репозиторий WordPress имеет определенный набор требований к качеству и коммуникациям, поэтому его стоит придерживаться. Кроме того, плагины из репозитория могут автоматически обновляться на панели управления плагинами вашего сайта. Плагины из других каналов могут потребовать от вас обновления каждого плагина вручную, что со временем станет более утомительным.</p> <p> Я разрабатываю и поддерживаю ряд плагинов для WordPress. Если вы хотите увидеть инструменты, которые я использую для этого, нажмите ниже: </p> <p> <strong> Реальный пример: </strong> <strong> Любимые инструменты кодирования Mac для PHP и веб-разработки одним из разработчиков </strong> </p> <h4> </h4><strong> Темы WordPress </strong> </h4> <p> Мы поговорили ранее о шаблонах, предлагаемых разработчиками сайтов. Термин WordPress для этого - темы. Вторая сильная сторона WordPress - огромная библиотека тем. Есть несколько очень хороших бесплатных тем и тем по умолчанию, а также доступно огромное количество отличных коммерческих тем.Это тоже одна из причин, по которой я уверенно рекомендую WordPress. </p> <p> Помните, если вы не художник или дизайнер, темы в WordPress и шаблоны в конструкторах веб-сайтов - ваши друзья. </p> <p> <strong> Рекомендация: </strong> Я рекомендую вам рассмотреть одну из замечательных тем для построения страниц, такую ​​как Divi, Elementor или Beaver Builder. Это дает вам лучшее из обоих миров: простоту использования конструктора веб-сайтов, но с гибкостью, мощностью и масштабируемостью WordPress. Они позволяют настраивать внешний вид, но также включают в себя широкий спектр готовых шаблонов в качестве хороших отправных точек.Я лично использую Divi. </p> <p> Кроме того, при изучении тем вы можете обнаружить термин «отзывчивый». Отзывчивый в веб-разговоре - это термин, который в основном означает, что веб-страница будет реагировать на экраны разного размера. Например, форма на большой странице может иметь заголовок поля слева от области ввода данных поля, но та же форма, отображаемая на маленьком телефоне, может иметь заголовок поля, отображаемый над областью ввода поля. . </p> <p> Выбирая тему, убедитесь, что она адаптивная.Вы обязательно должны быть уверены, что ваша страница будет правильно работать на мобильных устройствах. </p> <h4><span class="ez-toc-section" id="i-82"> Выбор изображений </span></h4> <p> Как и в случае с конструкторами веб-сайтов, вы, несомненно, захотите загрузить некоторые изображения на сайт WordPress. Только вы можете предоставить свой логотип и изображения своих продуктов, сотрудников и офисов. Но если вам нужен широкий спектр других изображений, вот два отличных ресурса: </p> <h4> </h4><strong> Блокировка на уровне модуля и блокировка на уровне хостинга </strong> </h4> <p> Но имейте в виду, что как только вы интегрируете кучу плагинов и тем в WordPress у вас также будет что-то вроде блокировки.Это не то же самое, что застрять на одном хостинг-провайдере, но у вас могут быть данные, отформатированные только для работы с выбранными вами плагинами, или страницы, отформатированные для работы только с выбранной вами темой. </p> <p> Разница между блокировкой на уровне модуля и блокировкой на уровне хостинга заключается в том, что вы часто можете найти заменяющие темы и плагины, и вы почти всегда можете переместить весь свой сайт WordPress (включая все эти плагины и темы) на другой хост. без особых усилий. </p> <h4> </h4><strong> Безопасность WordPress </strong> </h4> <p> Также вы, возможно, слышали о проблемах безопасности в WordPress.Не позволяйте этому напугать вас. Имейте в виду, что 40% Интернета работает под управлением WordPress, поэтому миллионы веб-сайтов используют его. Это создает очень большие возможности для плохих парней и открывает широкий спектр ошибок, которые люди могут допустить при настройке своих сайтов. </p> <p> <strong> Также: </strong> <strong> Лучший инструмент для мониторинга веб-сайтов в 2021 году </strong> </p> <p> Вот несколько очень простых методов, которые помогут защитить ваш сайт: </p> <ol> <li> <strong> Регулярно создавайте резервные копии вашего сайта: </strong> Некоторые хостинг-провайдеры сделают это за вас, cPanel также позволяет вам это сделать, плюс есть множество плагинов и сервисов для WordPress, которые добавляют дополнительные возможности.</li> <li> <strong> Обязательно применяйте обновления по мере их появления: </strong> На панели инструментов WordPress есть раздел «Обновления», который загорается красным цветом, когда есть обновления, которые нужно применить. Просто выберите обновления и примените их. Большинство эксплойтов WordPress предназначены для старых уязвимостей, которые уже были обновлены. </li> <li> <strong> Покупайте темы премиум-класса только у их первоначальных продавцов: </strong> Хакеры и преступники часто открывают дисконтные магазины, где вы можете купить со значительной скидкой (и украденные) версии коммерческих плагинов и тем.Вы не только сообщаете злоумышленникам вашу личную информацию, но также почти наверняка устанавливаете взломанные версии плагинов и тем, которые заразят посетителей вашего сайта. </li> <li> <strong> Используйте инструменты сканирования сайта: </strong> Существуют коммерческие инструменты, такие как Wordfence, iThemes Security Pro, Bulletproof Security и другие. Вы также можете установить Jetpack, который предоставит вам базовую функциональность безопасности бесплатно. </li> <li> <strong> Воспользуйтесь службой мониторинга веб-сайтов: </strong> Службы мониторинга сайтов просто сообщат вам, когда ваш сайт не работает или возобновляет работу.Другие также будут активно сканировать файлы на вашем сайте на предмет известных вредоносных программ. Мониторинг сайта полезен как для того, чтобы сообщить вам, если у вашего сайта проблемы, так и потому, что если ваш сайт часто выходит из строя, это может быть связано с тем, что что-то на нем повреждено или повреждено. </li> </ol> <p> <strong> Рекомендация: </strong> Если вы выполните простые практики резервного копирования своих сайтов и применения обновлений по мере их появления, вы почти всегда будете в ясности. </p> <h4><span class="ez-toc-section" id="_WordPress-3"> Управление файлами с помощью WordPress </span></h4> <p> Если вы проводите много времени с WordPress, в конечном итоге вам придется загружать файлы на свой сайт.Чаще всего это изображения, и вы можете загружать изображения через интерфейс панели управления WordPress. Фактически, интерфейс панели управления WordPress также позволяет загружать темы и плагины. </p> <p> Примечание: вы не собираетесь загружать свой текст, потому что WordPress и некоторые его темы предоставляют очень хорошие интерфейсы для написания. </p> <p> Но, если вам нужно загружать файлы или управлять ими вне интерфейса WordPress, например, путем загрузки файла JavaScript или CSS или удаления папок из неработающего плагина или темы, вам необходимо понимать управление файлами.</p> <p> Существует два основных способа управления файлами на вашем сайте: через cPanel или эквивалентный файловый менеджер для управления хостом или через FTP-клиент. Давайте обсудим каждый по очереди. </p> <p> cPanel - это интерфейс для всех настроек вашего хостинга. Это коммерческий продукт, поэтому ваш хостинг-провайдер заплатит за его включение в ваше предложение хостинга. Когда вы покупаете хостинг, провайдер хостинга предоставит вам URL-адрес cPanel, и вы будете использовать его, перемещаясь по его меню и значкам, ища любую функцию, которую хотите.cPanel поставляется с элементарным файловым менеджером, который позволяет вам детализировать файловую структуру вашего сайта и загружать, скачивать, перемещать, копировать, удалять и изменять файлы. </p> <p> Существуют и другие информационные панели хостинга, но почти все они будут включать что-то вроде cPanel. </p> <p> Другой подход - использовать клиентское приложение FTP на вашем компьютере. FTP существует еще до Интернета (это означает протокол передачи файлов). Базовый FTP полностью незащищен и открыт.Скорее всего, если вы используете FTP, ваш хостинг-провайдер посоветует вам использовать SFTP (защищенный FTP), что требует дополнительной настройки. Большинство хостов порекомендуют настройки для наиболее распространенных программ FTP. Лично в Windows я использую FileZilla. На Mac я использую как Forklift, так и Transmit, обычно в зависимости от того, какие задачи я пытаюсь выполнить в этот день. </p> <p> Одна вещь, которую вам нужно понять, - это структура каталогов типичной установки WordPress. WordPress состоит из набора файлов PHP, причем файлы верхнего уровня расположены там, где ваш хостинг-провайдер предпочитает размещать файлы серверов своих пользователей.В папке WordPress верхнего уровня будет набор дополнительных папок, и они важны: </p> <ul> <li> <strong> wp-admin: </strong> Это основная папка для всего внутреннего интерфейса WordPress. Не трогай это. </li> <li> <strong> wp-включает; </strong> Это включает большую часть кода, который управляет WordPress. Не трогай это. </li> <li> <strong> wp-content: </strong> Здесь будут жить ваши настройки. Вы будете посещать и изменять его время от времени. </li> </ul> <p> Название wp-content вводит в заблуждение.В этой папке действительно нет содержимого. Он содержит модули настройки. В папке wp-content находятся следующие важные подпапки: </p> <ul> <li> <strong> плагины: </strong> Здесь находятся ваши плагины, по одному плагину на папку </li> <li> <strong> themes: </strong> Здесь живут ваши темы. Здесь также есть дочерние темы, которые изменяют основную тему. </li> <li> <strong> загрузок: </strong> Здесь живут все загруженные вами мультимедиа </li> <li> <strong> mu-plugins: </strong> Это обязательные плагины, часто устанавливаемые продуктами, которые существенно изменяют поведение WordPress. </li> <li> <strong> Языки: </strong> Содержит языковые файлы для неанглийских реализаций. </li> <li> <strong> обновлений: </strong> Где WordPress хранит файлы обновления при обновлении всей установки.</li> </ul> <p> И да, "Языки" - это верхний регистр, а все остальные папки - нет. Если вы хотите узнать больше о папке wp-content, это действительно хорошее введение в папку wp-content. </p> <h4><span class="ez-toc-section" id="i-83"> Выбор хостинг-провайдера </span></h4> <p> Имейте в виду, что типичная бизнес-модель хостинга зависит от этих больших скачков платы за продление, и планируйте это соответствующим образом. </p> <p> Если вы выберете один из универсальных веб-конструкторов, таких как Wix или Squarespace, вам не придется выбирать хостинг-провайдера.Но если вы выберете другую CMS или WordPress, вам нужно будет заключить договор с компанией, которая будет предоставлять ваши веб-страницы вашим посетителям. </p> <p> Я писал о бизнес-модели хостинг-провайдера в разделе «Лучший бесплатный веб-хостинг в 2021 году»: дешевое быстро становится дорогим, поэтому щелкните здесь и прочтите его. Вы узнаете много нового о том, как думать о хостинге, о том, какие услуги предлагают хостинг-провайдеры, и о некоторых уловках ценообразования, которые хостинг-провайдеры пытаются навязать своим клиентам. </p> <p> Самое главное, на что следует обратить внимание, - это цены на продление.Хостинг-провайдеры знают, насколько трудоемким является перемещение сайта, поэтому они низко оценивают свои предложения, чтобы затянуть вас, но затем, когда приходит время продлевать, - после того, как вы полностью установили, настроили и закрепились, - они поднимают их цены. Это не просто вдвое дороже. Иногда они могут быть в десять раз дороже, чем то, что вы потратили при первой регистрации. Так что будь осторожен. Имейте в виду, что типичная бизнес-модель хостинга полагается на эти большие скачки платы за продление, и планируйте это соответствующим образом.</p> <p> Еще одна статья на нашем дочернем сайте <em> CNET, </em> - это Как выбрать провайдера веб-хостинга. Там я написал о различных типах хостинга и серверов, которые следует учитывать. </p> <p> <strong> Также: </strong> <strong> Лучший веб-хостинг в 2021 году: Найдите подходящую услугу для своего сайта </strong> </p> <p> <strong> Вот небольшой совет: </strong> Вероятно, вы можете обойтись виртуальным хостингом, если у вас нет тонны страниц или сложный сайт. Но держитесь подальше от планов ценообразования дна.Ты получаешь то, за что платишь. Ищите план, который составляет примерно 10 долларов в месяц, если вы используете WordPress или что-то еще с базовой CMS. Если у вас сложная электронная коммерция, рассчитывайте потратить больше. </p> <p> Причина этого в том, что вам понадобится базовый уровень производительности, чтобы иметь возможность загружать страницы с любой отзывчивостью. Сверхдешевые сайты будут иметь ужасную производительность и часто слабую безопасность. Если вы производите первое впечатление в Интернете, сделайте это. Потратьте несколько долларов - намного меньше, чем мы раньше тратили на рассылку брошюр в доинтернетовские темные века - чтобы получить приличное качество, но все же доступное предложение.</p> <p> <strong> Дополнительные сведения: </strong> </p> <h3><span class="ez-toc-section" id="i-84"> А как насчет электронной почты? </span></h3> <p> Это как-то странно. Когда «индустрия» говорит о присутствии в Интернете, они в основном говорят о создании веб-сайтов. Но полное присутствие в Интернете также должно включать электронную почту - даже если это просто бесплатная учетная запись Gmail. Ваши клиенты, клиенты и потенциальные клиенты должны иметь возможность связаться с вами по электронной почте. Это просто часть онлайн-образа жизни. </p> <p> <strong> Heads up: </strong> Электронная почта не приходит автоматически с услугами веб-хостинга.Возможно, вам придется полностью решить эту проблему за пределами хостинга. </p> <p> Большинство разработчиков веб-сайтов не предоставляют учетные записи электронной почты. Например, если у вас есть сайт на Wix или Squarespace, они порекомендуют вам использовать другую службу для размещения учетных записей электронной почты вашего домена. </p> <p> <strong> Также: </strong> <strong> Лучший хостинг электронной почты в 2021 году </strong> </p> <p> И наоборот, самые недорогие учетные записи хостинга на основе cPanel с <em> до </em> поставляются с электронной почтой. Это просто еще одна опция в большом списке вещей, которые вы можете включать и выключать в cPanel.</p> <p> Но тогда, если вы платите надбавку за управляемый хостинг WordPress более высокого уровня, с обслуживанием клиентов на уровне консьержа, большей производительностью и большей емкостью, электронная почта часто не включается. </p> <p> У меня есть электронная почта, включенная в некоторые из моих супер-дешевых тестовых учетных записей cPanel, но я не пропускаю электронную почту через них. Вместо этого у меня есть учетная запись Google Workspace с двумя учетными записями электронной почты. Электронная почта настолько критически важна для моей работы, что я хотел запустить ее через службу, которая делает все возможное, чтобы обеспечить надежную работу с электронной почтой.Еще один отличный вариант - Office 365, который предоставляет электронную почту через веб-приложение Outlook, а также отличное установленное программное обеспечение Microsoft Outlook. </p> <h3> </h3><strong> Управление списком рассылки </strong> </h3> <p> Управление списком рассылки использует электронную почту, но почти всегда полностью отличается от услуги хостинга электронной почты. Поясним. </p> <ul> <li> <strong> Хостинг электронной почты: </strong> Служба, в которой размещаются ваши учетные записи электронной почты, а также хранятся и управляются все ваши входящие и исходящие сообщения электронной почты.</li> <li> <strong> Управление списком рассылки: </strong> Служба, которая управляет всеми вашими подписчиками, позволяет им подписываться и отказываться от подписки, а также предоставляет вам механизм для одновременной массовой рассылки тысяч подписчиков. </li> </ul> <p> Управление списками рассылки как услуга почти никогда не поставляется ни с планом конструктора веб-сайтов, ни с планом хостинга. Есть совершенно другой пантеон компаний, управляющих списками рассылки. Они часто взимают плату в зависимости от количества ваших подписчиков и количества сообщений, которые вы отправляете в свой список.</p> <p> Когда дело доходит до работы вашего веб-сайта, убедитесь, что вы посмотрите, как вы можете интегрировать регистрацию пользователей, регистрацию клиентов и регистрацию поддержки в свой список рассылки, чтобы составляющие вашего веб-сайта могли автоматически присоединиться к вашему списку рассылки. В WordPress есть несколько плагинов, которые делают этот процесс автоматическим. </p> <p> И последнее: не спамите и не просто регистрируйте пользователей. Обязательно используйте подход двойной подписки, при котором подписчик должен подтвердить, что он хочет быть зарегистрированным в вашем списке рассылки.</p> <h3><span class="ez-toc-section" id="i-85"> Создание веб-сайта: Словарь терминов </span></h3> <p> С точки зрения посетителя веб-сайта, веб-сайт - это место в сети, которое вы посещаете, чтобы получить информацию или что-то сделать. Но с точки зрения оператора сайта, веб-сайт, по сути, представляет собой один или несколько каталогов файлов, возможно, сопровождаемых одной или несколькими базами данных таблиц. </p> <p> Благодаря простым в настройке параметрам, доступным от разработчиков веб-сайтов, а также с помощью WordPress, остается лишь решить, что лучше подходит для ваших нужд.</p> <p> Веб-страница - это, по сути, единый документ. Веб-сайт - это набор связанных веб-страниц. Многие веб-сайты, использующие языки веб-программирования, также работают с базами данных (которые обеспечивают быстрый поиск и извлечение). Эти сайты создают веб-страницы динамически, конструируя все элементы по мере того, как пользователь посещает страницу, а затем передают этот кластер элементов в виде файлов в браузер пользователя. </p> <p> Хотя мы вручную создавали наши страницы - HTML-тег за HTML-тегом - в середине 1990-х годов, это больше не является предпочтительной практикой.Сегодня вы почти всегда будете использовать какой-то конструктор страниц или систему управления контентом (CMS), которая сделает за вас большую часть утомительной работы по форматированию и сборке страниц. </p> <p> Возможно, вы слышали такие термины, как HTML, CSS, JavaScript, Java, PHP и другие. Все это, в большей или меньшей степени, компьютерные языки в том смысле, что они следуют определенному синтаксису и при обработке дают какой-то результат. В этом разделе мы коснемся некоторых терминов, с которыми вы можете столкнуться при настройке сайта или при изучении вариантов.</p> <p> <strong> HTML (язык гипертекстовой разметки): </strong> Это текстовый файл, содержащий команды форматирования для создания веб-страницы. Вы можете управлять стилем текста, добавлять заголовки, списки и размещать мультимедийный контент. Большинство HTML-страниц также встраивают или включают контент с других веб-языков, например CSS. </p> <p> <strong> CSS (каскадные таблицы стилей): </strong> Это файлы, которые помогают форматировать веб-страницу. Они содержат информацию о позиционировании и стиле, которые придают странице приятный вид.</p> <p> <strong> JavaScript и Java: </strong> Это языки программирования, изначально разработанные для работы в браузере с целью изменения поведения страницы на лету. Теперь существуют серверные версии, такие как Node.js для JavaScript и Enterprise Java Beans для Java. Почти все веб-приложения, такие как Gmail и Facebook, используют Java и JavaScript (или модифицированный диалект), чтобы сделать страницы более динамичными. </p> <p> <strong> PHP, Python, Ruby и т. Д.: </strong> Это серверные языки программирования, которые запускают веб-приложения на сервере.Например, интернет-магазину нужно будет обратиться к платежной системе. Большая часть этой обработки платежей обрабатывается на стороне сервера на языке веб-программирования. </p> <p> <strong> CMS (система управления контентом): </strong> В 1995 году, когда я начал работать в Интернете, не было веб-конструкторов или систем управления контентом. Мне пришлось вручную кодировать весь свой HTML. Сегодня, если вы не пишете специальные функции, вам, вероятно, не придется подробно знать какой-либо из этих языков, чтобы создать успешный сайт.Но вы, возможно, захотите иметь о них мимолетное представление и, по крайней мере, понимать основы HTML и CSS, потому что небольшие изменения в том, как выглядит ваш сайт, могут потребовать настройки CSS или HTML. Самая популярная CMS сегодня - это WordPress. </p> <p> <strong> SSL (Secure Socket Layer): </strong> Это протокол безопасности, используемый для защиты ваших транзакций в Интернете. Он защищает данные, передаваемые между вашим компьютером и сервером. Если вы видите веб-URL, начинающийся с https: //, это страница, защищенная SSL.Веб-страница, начинающаяся с http: //, не является. Наличие SSL требует наличия сертификата SSL. Этим займутся все разработчики веб-сайтов и некоторые хостинг-провайдеры. Убедитесь, что вы покупаете хостинг, предоставляется ли сертификат SSL. Кроме того, Google теперь уделяет приоритетное внимание сайтам на основе SSL, поэтому, если вы обслуживаете только страницы http: //, ваш рейтинг, вероятно, будет ниже. </p> <p> <strong> SEO (поисковая оптимизация): </strong> Это искусство, наука и, как некоторые думают, оспа для человечества.Это практика настройки или написания ваших веб-сайтов так, чтобы они отображались выше на странице Google после поиска. Да, есть и другие поисковые системы, но на самом деле это Google, для которого каждому нужно оптимизировать. Высокий рейтинг может означать разницу между успехом и неудачей на сайте, поэтому SEO имеет большое значение. Тем не менее, потворство SEO иногда может привести к тому, что страницы или копии будут менее привлекательными для людей, но лучше влияют на алгоритм ранжирования страниц в Google. Большинство услуг по созданию веб-сайтов предлагают некоторую поддержку SEO, и в репозитории WordPress есть широкий спектр чрезвычайно популярных плагинов для помощи в SEO.</p> <p> Каждый из этих условий может зажечь свой собственный полный класс. Но пока достаточно просто знать, что они означают. По мере того, как вы расширяете свой опыт хостинга, вы органично приобретете больше знаний по каждой из этих тем. </p> <h4><span class="ez-toc-section" id="i-86"> Заключительные мысли </span></h4><br/> </h4> <p> Как видите, вариантов много. К счастью, создать стартовый веб-сайт относительно недорого. С помощью простых в настройке параметров, доступных от разработчиков веб-сайтов, а также с помощью WordPress, вам остается только решить, что лучше подходит для ваших нужд.</p> <p> У вас сейчас есть собственный сайт? Какой подход вы используете? Есть ли какие-нибудь уроки, которые вы извлекли, и хотели бы поделиться с другими читателями? Дайте нам знать в комментариях ниже. </p> <hr/> <p> <em> Вы можете следить за обновлениями моих ежедневных проектов в социальных сетях. Не забудьте подписаться на меня в Twitter на @DavidGewirtz, на Facebook на Facebook.com/DavidGewirtz, на Instagram на Instagram.com/DavidGewirtz и на YouTube на YouTube.com/DavidGewirtzTV. </em> </p> <h2><span class="ez-toc-section" id="_-_2021-2"> Как разместить веб-сайт в 2021 году </span></h2> <p> Есть два способа разместить веб-сайт локально, каждый из которых включает три (не очень простых) шага: </p> <p> <strong> Использование ПК с Windows в качестве сервера WAMP: </strong> </p> <ul> <li> Шаг 1: Установите программное обеспечение WAMP.</li> <li> Шаг 2. Загрузите файлы сайта. </li> <li> Шаг 3. Сделайте свой веб-сайт общедоступным. </li> </ul> <p> <strong> Используйте машину Linux: </strong> </p> <ul> <li> Шаг 1. Установите программное обеспечение LAMP. </li> <li> Шаг 2. Настройте файлы сайта и DNS. </li> <li> Шаг 3. Настройте Apache. </li> </ul> <p> Самостоятельное размещение веб-сайта - это более практичный подход и далеко не такой надежный. Это отличное представление о том, как работает веб-сайт, но на самом деле это хорошо. Соединения медленные, обслуживание полностью ложится на вас, и ваш компьютер должен быть постоянно включен.Не идеально. Тем не менее, если вы здесь, вам должна быть интересна опция, и вам ничего не стоит узнать. </p> <p> Есть два способа разместить ваш веб-сайт из дома: </p> <ul> <li> <strong> Используйте ПК с Windows в качестве сервера WAMP </strong> </li> <li> <strong> Используйте машину Linux </strong> </li> </ul> <p> Мы рассмотрим оба подхода. Имейте в виду, что это не вариант для новичков. Бесплатный хостинг - привлекательная перспектива, но вы действительно получаете то, за что платите. Если ваш дом не является центром обработки данных, мы рекомендуем использовать хостинг-провайдера.</p> <h3><span class="ez-toc-section" id="_-_Windows_WAMP"> Хостинг веб-сайта Использование ПК с Windows в качестве сервера WAMP </span></h3> <p> Подход Windows означает превращение вашего компьютера в сервер WAMP. WAMP означает Windows, Apache, MySQL и PHP - элементы, составляющие сервер. </p> <h4><span class="ez-toc-section" id="_1_WAMP"> Шаг 1: Установите программное обеспечение WAMP </span></h4> <p> Существует ряд доступных бесплатных программ (<strong> WampServer </strong> и <strong> XAMPP </strong>, чтобы назвать пару). Загрузите и установите один, придерживаясь настроек по умолчанию, где это будет предложено. Программное обеспечение позволяет вашему компьютеру выступать в качестве сервера - дома для файлов вашего веб-сайта.</p> <h4><span class="ez-toc-section" id="_2"> Шаг 2. Загрузите файлы сайта </span></h4> <p> После установки программного обеспечения WAMP вам нужно будет добавить к нему сайт. Как только вы открываете панель управления, она обычно находится в «каталоге www». Здесь размещаются файлы веб-сайта. Ваш HTML должен быть записан в текстовые файлы с расширением <strong> .php </strong>. Добавьте их в «каталог www», чтобы добавить их на свой сайт. </p> <h4><span class="ez-toc-section" id="_3-2"> Шаг 3: Сделайте свой веб-сайт общедоступным </span></h4> <p> Ваши первоначальные действия с собственным сайтом будут частными - только вы сможете их увидеть.Когда вы будете довольны тем, что вы сделали, перейдите в «Apache» и выберите файл «httpd.conf». Убедитесь, что в настройках указано следующее… </p> <p> Разрешить, запретить <br/> Разрешить со всех </p> <p>… и все готово! </p> <h3><span class="ez-toc-section" id="_-_Linux"> Размещение веб-сайта на компьютере с Linux </span></h3> <h4><span class="ez-toc-section" id="_1_LAMP"> Шаг 1. Установка программного обеспечения LAMP </span></h4> <p> Другой подход - установка сервера LAMP (Linux, Apache, MySQL и PHP). Это в значительной степени тот же процесс, что и WAMP, но на компьютере с Linux. Для начала введите следующую команду в терминале Linux: </p> <ul> <li> sudo apt install apache2 mysql-server php libapache2-mod-php7.0 </li> </ul> <p> Во время установки вас могут попросить ввести пароль MySQL, поэтому обязательно держите его под рукой. После установки программного обеспечения вы готовы к настройке сервера. </p> <h4><span class="ez-toc-section" id="_2_DNS"> Шаг 2: Настройте файлы сайта и DNS </span></h4> <p> Как и в случае с WAMP, вы добавляете файлы в корневой каталог, чтобы добавить их на свой сайт. Опять же, обязательно используйте расширение файла <strong> .php </strong>. Лучше всего обеспечить правильную работу PHP и My SQL. </p> <h4><span class="ez-toc-section" id="_3_Apache"> Шаг 3. Настройте Apache </span></h4> <p> Чтобы ваш сервер разрешил посетителям посещать ваш веб-сайт, вам необходимо указать Apache принимать их запросы.Это включает в себя настройку каталога и настройку разрешений. </p> <h4><span class="ez-toc-section" id="i-87"> Заключение </span></h4> <p> Если все это звучит сугубо технически, то это потому, что это так. Самостоятельное размещение - это мир кроличьей норы, к которому нельзя относиться легкомысленно. Если у вас есть серьезное техническое преимущество и вам интересно, как веб-сайты работают на их самом фундаментальном уровне, попробуйте самостоятельный хостинг. </p> <p> Если вы не разбираетесь в технике и хотите сосредоточиться на создании отличного веб-сайта, откажитесь от этого подхода. Самостоятельные веб-сайты редко бывают изощренными животными - это простые творения HTML. </div><!-- .entry-content --> </article><!-- #post-## --> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://pk-region.ru/raznoe-2/rostelekom-interaktivnoe-chto-takoe-interaktivnoe-tv-rostelekom.html" rel="prev">Ростелеком интерактивное: Что такое Интерактивное ТВ | Ростелеком</a></div><div class="nav-next"><a href="https://pk-region.ru/raznoe-2/vyberite-ustanavlivaemye-drajvery-vyberite-ustanavlivaemye-drajvery-telegraph.html" rel="next">Выберите устанавливаемые драйверы: Выберите устанавливаемые драйверы – Telegraph</a></div></div> </nav> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/kak-sozdat-sajt-na-kompyutere-kak-sdelat-sajt-samomu-besplatno.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://pk-region.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message" aria-hidden="true">Обязательные поля помечены <span class="required" aria-hidden="true">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required" aria-hidden="true">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required" aria-hidden="true">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required" aria-hidden="true">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='25853' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </main><!-- #main --> </div><!-- #primary --> <aside id="secondaryright" class="widget-area" role="complementary"> <section id="search-2" class="widget clearfix widget_search"><form role="search" method="get" class="search-form" action="https://pk-region.ru/"> <label> <span class="screen-reader-text">Найти:</span> <input type="search" class="search-field" placeholder="Поиск…" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Поиск" /> </form></section><section id="custom_html-6" class="widget_text widget clearfix widget_custom_html"><div class="textwidget custom-html-widget"><ins class="adsbygoogle" style="display:inline-block;width:100%;height:600px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="6847132033" ></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></section><section id="nav_menu-2" class="widget clearfix widget_nav_menu"><h3 class="widget-title">Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-6318" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6318"><a href="https://pk-region.ru/category/texnologi">IT ликбез</a></li> <li id="menu-item-6319" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6319"><a href="https://pk-region.ru/category/raznoe">Заметки айтишника</a></li> <li id="menu-item-6320" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6320"><a href="https://pk-region.ru/category/nastrojk-2">Настройка</a></li> <li id="menu-item-6321" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6321"><a href="https://pk-region.ru/category/nastrojk">Настройка коммуникаций</a></li> <li id="menu-item-6322" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6322"><a href="https://pk-region.ru/category/obzor">Обзоры</a></li> <li id="menu-item-6323" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6323"><a href="https://pk-region.ru/category/programm-2">Программы</a></li> <li id="menu-item-6325" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6325"><a href="https://pk-region.ru/category/sbork-2">Сборка ПК</a></li> <li id="menu-item-6326" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6326"><a href="https://pk-region.ru/category/texnologi-2">Технологии</a></li> <li id="menu-item-6324" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-6324"><a href="https://pk-region.ru/category/raznoe-2">Разное</a></li> </ul></div></section><section id="custom_html-5" class="widget_text widget clearfix widget_custom_html"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script></div></section><section id="custom_html-7" class="widget_text widget clearfix widget_custom_html"><div class="textwidget custom-html-widget"><!-- Yandex.RTB R-A-546739-5 --> <div id="yandex_rtb_R-A-546739-5"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-546739-5", renderTo: "yandex_rtb_R-A-546739-5", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script></div></section> </aside><!-- #secondary --> </div> </div> <!-- Store Vill Container --> </div><!-- #content --> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="bottom-footer-wrap clearfix"> <div class="store-container"> <div class="site-info"> Все права защищены, 2019 <p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p> </div><!-- .site-info --> <div class="payment-accept"> </div> </footer><!-- #colophon --> <a href="#" class="scrollup"><i class="fa fa-angle-up" aria-hidden="true"></i> </a> </div><!-- #page --> <style type="text/css"> .pgntn-page-pagination { text-align: left !important; } .pgntn-page-pagination-block { width: 60% !important; padding: 0 0 0 0; } .pgntn-page-pagination a { color: #1e14ca !important; background-color: #ffffff !important; text-decoration: none !important; border: 1px solid #cccccc !important; } .pgntn-page-pagination a:hover { color: #000 !important; } .pgntn-page-pagination-intro, .pgntn-page-pagination .current { background-color: #efefef !important; color: #000 !important; border: 1px solid #cccccc !important; } .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://pk-region.ru/wp-content/plugins/pagination/css/nav-style.css?ver=6.0.1' type='text/css' media='all' /> <script type='text/javascript' src='https://pk-region.ru/wp-content/themes/storevilla/assets/js/lightslider.js?ver=4.1.1' id='lightslider-js'></script> <script type='text/javascript' src='https://pk-region.ru/wp-content/themes/storevilla/assets/js/navigation.js?ver=4.1.1' id='storevilla-navigation-js'></script> <script type='text/javascript' src='https://pk-region.ru/wp-content/themes/storevilla/assets/js/skip-link-focus-fix.js?ver=4.1.1' id='storevilla-skip-link-focus-fix-js'></script> <script type='text/javascript' src='https://pk-region.ru/wp-content/themes/storevilla/assets/js/retina.js?ver=4.1.1' id='retina-js'></script> <script type='text/javascript' src='https://pk-region.ru/wp-content/themes/storevilla/assets/js/common.js?ver=4.1.1' id='storevilla-common-js'></script> <script type='text/javascript' src='https://pk-region.ru/wp-includes/js/comment-reply.min.js?ver=6.0.1' id='comment-reply-js'></script> <script type='text/javascript' id='q2w3_fixed_widget-js-extra'> /* <![CDATA[ */ var q2w3_sidebar_options = [{"sidebar":"storevillasidebarone","margin_top":10,"margin_bottom":0,"stop_id":"","screen_max_width":0,"screen_max_height":0,"width_inherit":false,"refresh_interval":1500,"window_load_hook":false,"disable_mo_api":false,"widgets":["custom_html-7"]}]; /* ]]> */ </script> <script type='text/javascript' src='https://pk-region.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.1.9' id='q2w3_fixed_widget-js'></script> <script type='text/javascript' src='https://pk-region.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://pk-region.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script> <script type='text/javascript' src='https://pk-region.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' src='https://pk-region.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://pk-region.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script> </body> </html>