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

Обновлено: 21.11.2024

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

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

Что такое веб-сайт?

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

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

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

Что такое веб-страница?

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

Поэтому веб-страница состоит из 2 представлений:

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

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

Для этого используйте функцию просмотра исходного кода вашего браузера. Например, если вы используете Google Chrome, выберите View > Developer > View Source . Если вы используете Firefox, выберите «Инструменты» > «Веб-разработчик» > «Источник страницы». В зависимости от вашего устройства и браузера вы также можете щелкнуть правой кнопкой мыши в любом месте страницы, чтобы открыть параметр «Просмотр исходного кода».

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

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

Взгляните на следующий код.

Пример кода 1:

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

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

Теги body содержат весь контент, который будет отображаться на странице. Например, если вы хотите отобразить слова "Добро пожаловать на мою веб-страницу", вам нужно поместить их между тегами body и /body.

Вот еще один пример. На этот раз давайте добавим немного контента.

Пример кода 2:

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

Как видите, любой текст, окруженный h1 и /h1, отображается как заголовок (точнее, уровень заголовка 1). Текст внутри тегов p отображается как обычный текст абзаца. Вы можете добавить на веб-страницу любое количество тегов HTML.

Тегов HTML намного больше (более 100). Некоторые теги используются для форматирования (например, h1 ), другие теги используются для отображения объектов (таких как изображения, формы, таблицы и т. д.).

Как использовать этот код?

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

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

Откройте текстовый редактор (например, Блокнот или Simpletext) или HTML-редактор.
Откройте новую (пустую) страницу (например, Файл > Создать).
Скопируйте код из примера кода 2 и вставьте его в пустой текстовый файл (или введите его повторно, если хотите).
Сохраните файл как index.html (запомните, где вы его сохранили)

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

Теперь вы можете перейти к просмотру новой веб-страницы в браузере. Для этого можно дважды щелкнуть файл. Если это не сработает, попробуйте открыть новое окно браузера и перетащить в него файл. В противном случае, в зависимости от вашего браузера, вы сможете выбрать «Файл» > «Открыть».

Добавление другой веб-страницы

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

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

Пример кода 3:

Приведенная выше HTML-страница будет выглядеть в браузере следующим образом:

Итак, вперед — создайте вторую веб-страницу. На этот раз позвони, скажи. page_two.html .

Итак, если вы забыли, как это сделать, вот шаги для создания вашей второй веб-страницы:

Откройте текстовый редактор (например, Блокнот или Simpletext)
Откройте новую (пустую) страницу (например, Файл > Создать).
Скопируйте код из примера кода 3 и вставьте его в пустой текстовый файл (или введите его повторно, если хотите).
Сохраните файл как page_two.html (сохраните его в том же каталоге, что и предыдущий файл)

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

Добавление дополнительного контента на веб-страницу

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

Quackit предоставляет множество HTML-кодов, которые вы можете копировать и вставлять на свои собственные веб-страницы. Они доступны в библиотеке кода HTML и на странице примеров HTML.

Не стесняйтесь копировать/вставлять любой из этих HTML-кодов на свою веб-страницу и изменять их по своему усмотрению. Не бойтесь экспериментировать.

Готов опубликовать свой веб-сайт?

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

Чтобы опубликовать свой веб-сайт для всеобщего обозрения, вам необходимо "загрузить" свой веб-сайт на сервер поставщика услуг хостинга веб-сайтов. Для этого вам необходимо открыть счет у провайдера веб-хостинга. Сделав это, вы сможете предоставить свой собственный адрес «.com» всем, кому вы хотите просмотреть свой веб-сайт.

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

Итак, чтобы опубликовать свой веб-сайт, вам нужно просто:

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

Это так просто!

На данный момент плана Linux Economy должно быть более чем достаточно. Это самый дешевый план, но вы получаете множество функций и достаточно места на диске. Если у вас много фотографий/изображений для вашего веб-сайта, возможно, вам лучше выбрать тарифный план Deluxe или Premium, так как эти тарифные планы предоставляют гораздо больше места на диске.

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

Онлайн-конструкторы веб-сайтов

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

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

И получите это. Хостинг и доменное имя включены абсолютно БЕСПЛАТНО! Если вам нравится, как это звучит, послушайте!

Дополнительные ресурсы

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

Если вы прошли множество курсов Codecademy, но все еще задаетесь вопросом: "Где я могу писать код на своем компьютере?", начните здесь!

Создание и просмотр веб-страницы на вашем компьютере

Требования:

Введение

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

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

Шаг 1. Откройте текстовый редактор

Первый шаг — открыть текстовый редактор.Важно использовать «сырой» текстовый редактор, а не форматированный текстовый процессор.

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

Шаг 2. Напишите свой HTML-скелет

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

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

Шаг 3. Сохраните файл

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

Используйте HTML-файл с расширением .html, например about_me.html.
Не используйте пробелы или специальные символы в имени файла. Вместо этого используйте символы подчеркивания (_) или дефисы (-).
Решите, где на вашем компьютере вы сохраните файл, и обязательно запомните это место!

Используйте HTML-файл с расширением .html

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

Не используйте пробелы или специальные символы в имени файла

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

Решите, где на вашем компьютере вы сохраните файл

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

Шаг 4. Откройте веб-страницу в браузере

Теперь вы готовы к просмотру новой страницы в браузере! Сначала откройте браузер. В верхнем меню нажмите «Файл» > «Открыть файл». Перейдите к месту, где вы сохранили свою веб-страницу. Нажмите на файл веб-страницы, а затем нажмите «Открыть». Вы должны увидеть свою веб-страницу!

Обзор

За это короткое время вы научились использовать то, что изучаете на Codecademy, на своем персональном компьютере. Вы также узнали о расширениях файлов, текстовых редакторах и сохранении и просмотре локальных файлов. Теперь вы готовы проверить все, чему научились в Codecademy, и попрактиковаться самостоятельно!

Узнайте, как создавать и просматривать веб-страницы на компьютере.

Шаг 1. Откройте Блокнот (ПК)

Windows 8 или более поздняя версия:

Откройте начальный экран (символ окна внизу слева на экране). Введите Блокнот.

Windows 7 или более ранняя версия:

Откройте "Пуск" > "Программы" > "Стандартные" > "Блокнот".

Шаг 1. Откройте TextEdit (Mac)

Откройте Finder > Приложения > TextEdit

Также измените некоторые настройки, чтобы приложение правильно сохраняло файлы. В «Настройки» > «Формат» > выберите «Обычный текст»

Затем в разделе "Открыть и сохранить" установите флажок "Отображать HTML-файлы как код HTML, а не форматированный текст".

Затем откройте новый документ, чтобы разместить код.

Шаг 2. Напишите немного HTML

Напишите или скопируйте следующий HTML-код в Блокнот:

Мой первый абзац.

Шаг 3. Сохраните HTML-страницу

Сохраните файл на своем компьютере. Выберите «Файл» > «Сохранить как» в меню «Блокнот».

Назовите файл "index.htm" и установите кодировку UTF-8 (предпочтительная кодировка для файлов HTML).

Совет. В качестве расширения файла можно использовать .htm или .html. Нет никакой разницы, решать вам.

Шаг 4. Просмотр HTML-страницы в браузере

Откройте сохраненный файл HTML в своем любимом браузере (дважды щелкните файл или щелкните правой кнопкой мыши и выберите "Открыть с помощью").

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

Онлайн-редактор W3Schools — «Попробуйте сами»

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

Это идеальный инструмент для быстрого тестирования кода. Он также имеет цветовое кодирование и возможность сохранять код и делиться им с другими:

Пример

Нажмите кнопку "Попробуйте сами", чтобы увидеть, как это работает.

W3Schools Spaces

Если вы хотите создать свой собственный веб-сайт и разместить файлы .html, попробуйте наш бесплатный конструктор веб-сайтов под названием W3schools Spaces:

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

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

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

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

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

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

Обзор веб-хостинга A2

Обзор веб-хостинга Bluehost

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Узнайте больше о HTML и веб-страницах
Узнайте о компаниях, которые могут разместить ваш веб-сайт

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

Читайте также: