Вы, наверное, искали в Интернете, как работает базовая веб-разработка, и получили ответы, которые искали, менее чем за 5 минут.
Если бы это было так просто ...
Web Development 101: Understanding The Basics объяснит на "простом английском" то, что вам нужно знать о том, как устроен мир Интернета.
Если вы уже являетесь в этом профи, то эта статья, вероятно, не для вас.
Эта статья для вас, если:
- Вы хотите создавать веб-сайты, но понятия не имеете, что это влечет за собой.
- Вы не представляете, как сделать сайт живым в Интернете.
- Вам нужен пошаговый обзор основ.
- Тебе нравится куриное карри.
Ни для кого не секрет ...
Изучение веб-разработки может быть очень странным, если сначала у вас нет правильного фундамента. Я надеюсь, что вам будет легче читать дальше. Хорошая новость в том, что вы сделали первый шаг к решению стать веб-разработчиком и изменить свою жизнь!
Всегда помните ... каждый заядлый программист когда-то был новичком.
Это изображение показывает, где вы сейчас находитесь и где закончите:
Основные выводы из этой статьи:
- Обзор самого необходимого
- Что такое веб-разработка?
- Что такое веб-сайт?
- Что такое веб-страницы?
- Что такое гиперссылки?
- Что такое IP-адрес?
- Что такое домен, как его получить?
- Что такое хостинг?
- Создание сайта
- Основные инструменты
- Что такое FTP-клиент?
- Пошаговая инструкция по загрузке веб-сайта в Интернет
Итак, давайте рассмотрим это:
Веб-разработка
Веб-разработка в самом упрощенном смысле означает создание веб-сайта для Интернета. Существует множество веб-сайтов, и так же, как картина создается художником, веб-сайт в основном создается веб-разработчиками и веб-дизайнерами.
Это базовый пример кодирования:
Если вы новичок, это немного похоже на древний крылатый язык, но именно этот случайный код является основой полнофункционального веб-сайта. Взгляните здесь на действующий веб-сайт этого кода.
Перейдите на любой веб-сайт и нажмите Ctrl + U (для Windows) или Cmd + U (для Mac), чтобы увидеть то, что называется «исходным кодом» веб-сайта.
В то время как веб-разработчики несут ответственность за аспекты кодирования и программирования веб-сайта, веб-дизайнеры разрабатывают тему, макет, изображения и определяют цветовую схему веб-сайта, которая затем используется веб-разработчиком при создании веб-сайта.
Очень полезно иметь достаточный объем дизайнерских знаний, таких как:
- Базовые навыки Photoshop.
- Типографика (в основном это ваш выбор шрифта и макет текста).
- Как вы используете цвета.
Что такое веб-страница?
Веб-страница - это просто электронная страница, которая является частью книги, которая в данном случае является веб-сайтом. Веб-сайт состоит из нескольких веб-страниц. Эти веб-страницы представляют собой комбинацию текста, изображений, видео и ссылок. Веб-страницы часто связаны друг с другом гиперссылками (подробнее ниже).
Таким образом, веб-страница - это одна страница с информацией, тогда как веб-сайт состоит из нескольких веб-страниц.
Что такое гиперссылка?
Гиперссылка - это гиперактивная ссылка. Хорошо, это была плохая шутка. На самом деле это ссылка, которая направляет вас на другую страницу того же веб-сайта или на другой веб-сайт в целом. Если вы наведете курсор на текст, он часто изменится на «палец», а иногда цвет текста изменится и появится подчеркивание.
Чтобы увидеть гиперссылку в действии, щелкните здесь.
Что такое веб-браузер?
Веб-браузеры - это программные приложения, которые вы используете для доступа ко всему во всемирной паутине (обычно известной как Интернет). Примеры веб-браузеров: Google Chrome, Apple Safari, Opera и Internet Explorer.
Что такое поисковая машина?
Поисковые системы позволяют пользователю находить релевантные веб-сайты на основе фраз и ключевых слов, введенных пользователем. Думайте о всемирной паутине (Интернете) как о библиотеке веб-сайтов, и вы ищете что-то конкретное, а затем выполняете поиск в поисковой системе. Некоторые распространенные поисковые системы: Google, Bing и Yahoo.
Что такое IP-адрес?
IP-адрес - это уникальный числовой адрес, который идентифицирует каждое вычислительное устройство, такое как персональные компьютеры, планшеты, смартфоны и т. Д., Для связи с другими устройствами в IP-сети. По сути, это номер мобильного телефона вашего ноутбука или номерной знак автомобиля.
Как это работает:
Сервер получает запрос страницы, отправленный вашим веб-браузером. Браузер подключается к серверу с помощью IP-адреса. В свою очередь, сервер отправляет запрошенную страницу обратно на ваш IP-адрес. Чтобы узнать свой IP-адрес, посетите:
whatismyipaddress.com
Что такое домен?
Домен - это ваша собственность в Интернете. Так, например, мой дом: www.studywebdevelopment.com - у меня есть SWD, это мой домен. Никакие два веб-сайта не могут иметь одно и то же доменное имя.
Это адрес, по которому люди будут посещать ваш «дом», то есть ваш веб-сайт. URL-адрес (унифицированный указатель ресурсов) содержит имя домена.
Доменное имя состоит из домена верхнего и второго уровня. Расширение домена верхнего уровня (TLD) - это часть имени домена, расположенная справа от точки («.»), Например .com, .net и .org.
TLD идентифицирует что-то о веб-сайте, связанном с ним, например, его цель, организацию, которой он принадлежит, или географический регион, где он находится, например .com в основном используется в коммерческих целях, а .edu используется для образовательных учреждений.
Точно так же, как вы проходите через агента по недвижимости, чтобы купить недвижимость, вам нужно пройти через хостинг-провайдера, чтобы купить домен. Я рекомендую Bluehost для покупки вашего домена.
Что такое хостинг веб-сайтов?
У вас есть закодированный веб-сайт (подробнее о том, как это сделать ниже) на вашем ноутбуке, и вам нужно разместить его в Интернете ...
Это не просто так; он должен быть «размещен» в Интернете. Вы делаете это через провайдера хостинга.
Провайдер веб-хостинга предлагает услугу, которая позволяет нам сделать наш веб-сайт доступным для всех, кто заходит на наш домен в Интернете.
Поэтому нам нужно зарегистрировать / купить домен у хостинг-провайдера, а затем ТАКЖЕ приобрести услугу хостинга. Это две РАЗНЫЕ вещи вместе. Домен оплачивается ежегодно, а хостинг в основном оплачивается ежемесячно / ежеквартально / ежегодно.
Обе эти услуги можно приобрести в Bluehost.
Они предлагают бесплатную регистрацию домена, гарантию возврата денег, круглосуточную поддержку, рекламные предложения и многое другое. Нажмите здесь, чтобы просмотреть подробности.
Как создать вебсайт?
Теперь самое интересное ... создание собственного веб-сайта.
Это самая важная часть любого веб-сайта.
«Если бы мне пришлось срубить дерево за 6 часов, я бы потратил первые 4 часа на то, чтобы точить свой топор».
Авраам Линкольн
Вам нужно решить, какой тип веб-сайта вы хотите иметь. Вот простой и краткий обзор:
Вы можете использовать CMS (Система управления контентом), которая позволяет вам создавать, загружать, редактировать и изменять ваш контент, отображаемый на веб-сайте, который идеально подходит для блогов.
Это просто значительно упрощает работу, поскольку на самом деле вам не нужны знания в области программирования, но если они есть, это будет бонус. Вы можете выбирать из множества тем, как платных, так и бесплатных.
Некоторые популярные CMS: Wordpress, Drupal и Joomla.
Если вам не нужна CMS, и вы любите опасную жизнь и любите приключения (как и большинство разработчиков), то вам нужно начать с хорошего текстового редактора.
Что такое текстовый редактор?
Текстовый редактор - это программа, в которой вы пишете свой код.
Вы можете писать код для HTML, CSS, JavaScript, Python, PHP, Ruby и т. Д. Очень важно, чтобы вы сначала выбрали хороший текстовый редактор. Хороший текстовый редактор может значительно повысить производительность и скорость разработки, а также повысить эффективность вашей работы.
PS - Чтобы освоить эти текстовые редакторы и изучить быстрые клавиши, просто перейдите на YouTube и найдите короткие руководства. Вы можете поблагодарить меня позже.
Вот несколько популярных текстовых редакторов:
Sublime - действительно классный редактор, быстрый и простой. Это замечательно как для новичков, так и для профессионалов.
Загрузите его здесь.
Блокнот ++ очень прост, понятен и понятен. Некоторые интересные функции - это выделение синтаксиса и сворачивание синтаксиса, поиск / замена, автозаполнение и многое другое. Он предназначен только для пользователей Windows, поэтому пользователи Mac могут немного расстроиться.
Вы можете скачать его здесь.
Atom поступает с GitHub и доступен для Mac, Windows и Linux. Он очень многообещающий с такими функциями, как автозаполнение, несколько панелей, номера строк, поддержка нескольких файлов, функции поиска / замены и многое другое.
Вы можете скачать его здесь.
Brackets - это легкий и мощный текстовый редактор, изначально разработанный Adobe. Он поставляется с некоторыми действительно удобными функциями, такими как быстрое редактирование, предварительный просмотр в реальном времени, селектор цвета и многое другое.
Вы можете скачать его здесь.
Теперь, когда у вас есть домен, хостинг-провайдер и текстовый редактор, вам нужно загрузить код веб-сайта из текстового редактора в хостинг-провайдера, например Bluehost в данном случае.
Как загрузить сайт в Интернет?
После того, как вы создали свой веб-сайт в текстовом редакторе, который вы выбрали выше, вам необходимо загрузить его на хостинг-провайдера.
Вы не просто копируете и вставляете код текстового редактора в платформу Bluehost, вам нужен «посредник», чтобы сделать это.
Вы делаете это с помощью так называемого FTP-клиента.
Я настоятельно рекомендую FileZilla в качестве вашего FTP-клиента. Это абсолютно бесплатно и очень популярно.
Загрузите FileZilla здесь.
Вам нужно будет использовать свое имя пользователя и пароль FTP, которые ваш хостинг-провайдер отправил вам по электронной почте. После того, как вы его загрузите, вам будет предоставлено примерно следующее:
Введите имя хоста вашего домена в поле Хост, а также заполните поля Имя пользователя и Пароль, предоставленные вам вашим поставщиком услуг хостинга. Вы можете оставить поле Порт пустым, если иное не указано вашим хостинг-провайдером, и в этом случае вам нужно будет ввести предоставленный номер порта.
Затем нажмите Быстрое подключение.
После подключения вам необходимо перейти к файлам вашего веб-сайта (на левой панели ниже), а затем перетащить их в папку public.html (на правой панели внизу).
Внизу окна FileZilla вы увидите «Файлы в очереди», «Неудачные передачи» и «Успешные передачи».
После того, как очередь опустеет и все файлы окажутся в разделе Успешные передачи, ваш веб-сайт должен быть активен в вашем домене.
Я не буду вдаваться в подробности этого поста, потому что я упомянул так много интересных и полезных вещей в своей электронной книге: Веб-разработка и не только. Убедитесь, что вы скачали его БЕСПЛАТНО здесь.
Вы рассмотрели основы того, как разместить свой веб-сайт в сети - для этого нужен бокал шампанского :) Теперь, когда вы в сети, самое важное - создать невероятный веб-сайт, который достигнет целей, для которых вы его создали.
Это только начало ... у вас много вопросов, и я отвечу на них в своей БЕСПЛАТНОЙ электронной книге.
Он получил много положительных отзывов и поможет вам в этом онлайн-путешествии. Подробнее здесь.
Оставайся крутым и продолжай кодить!
Кайл из SWD.
