Как загрузить файл index html

Обновлено: 04.07.2024

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

Размещение сайта в Панели управления

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

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

При входе в папку в «Файловом менеджере» будет выведено её содержимое:

папка cgi-bin, предназначенная для размещения CGI-скриптов;
файл .htaccess, представляющий собой файл дополнительной конфигурации веб-сервера Apache;
файл index.html, являющийся индексной (заглавной) страницей сайта (т.е. при входе на сайт посетитель попадет именно на эту страницу).

Содержимое страницы index.html можно видеть по основному или техническому домену.

На этой странице приведена общая информация по работе с новым аккаунтом, а также наши контактные данные. Для работы сайта эта страница не понадобится, и перед загрузкой файлов сайта следует удалить файлы .htaccess и index.html из папки public_html.

Для удаления файла index.html необходимо выделить его и нажать "Переместить в корзину". Это делается для того, чтобы в дальнейшем при загрузке сайта первой страницей открывалась не наша стандартная страница, а страница нового размещённого сайта. Файл .htaccess также следует удалить, либо загружать новый .htaccess с заменой предыдущего.

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

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

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

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

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

У сайта должна быть индексная (главная) страница. Поэтому надо назвать именем index.html тот файл, который должен открываться первым при загрузке сайта, т.е. сделать этот файл индексным. Например, если требуется, чтобы страница mypage.html открывалась первой при загрузке сайта, то файл mypage.html надо переименовать в index.html. Имя файла обязательно задаётся в нижнем регистре.

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

Выделить файл нажав на него.
В верхней панели нажать на кнопку «Переименовать»
Появится возможность указать имя файла. Достаточно прописать index. Расширение файла указывать не потребуется. Загруженный файл будет переименован в index.html.

Размещение

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

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

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

Подробная информация о работе с FTP представлена в статье.

Создание

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

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

Подробная информация о работе с базами данных представлена в разделе помощи.

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

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.

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

По шагам на скриншоте:

Add workspace folder — открывает меню выбора папки.
Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
Нажмём Add.

После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

Шаг 6. Запускаем код и смотрим на результат

Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

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

Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

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

Что мы сделали

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

В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее. Подпишитесь на нашу рассылку, чтобы не пропустить следующие выпуски.

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

Подробнее: Просмотр HTML-кода страницы в браузере

Способ 1: Контекстное меню

Способ 2: Перетаскивание

Реализовать поставленную задачу можно и выполнив простое перетаскивание файла.

Способ 3: Адресная строка

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

Мы рады, что смогли помочь Вам в решении проблемы.

Отблагодарите автора, поделитесь статьей в социальных сетях.

Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

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

Где ваш веб-сайт должен располагаться на вашем компьютере?

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

Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем web-projects (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.
Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её test-site (или как-то более творчески).

Небольшое отступление о регистре и пробелах

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

Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в test-site/MyImage.jpg , а затем в другом файле вы пытаетесь вызвать изображение как test-site/myimage.jpg , это может не сработать.
Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: my-file.html лучше чем my_file.html .

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

Какую структуру должен иметь ваш веб-сайт?

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

index.html : Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем index.html и сохраните его прямо внутри вашей папки test-site .
Папка images : Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем images внутри вашей папки test-site .
Папка styles : Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем styles внутри вашей папки test-site .
Папка scripts : Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем scripts внутри вашей папки test-site .

Файловые пути

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

Скопируйте изображение, которое вы выбрали ранее, в папку images .
Откройте ваш файл index.html и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит - позже в этом руководстве мы рассмотрим структуры более подробно.

Некоторые общие правила о путях к файлам:

Для ссылки на целевой файл в той же директории, что и вызывающий HTML файл, просто используйте имя файла, например, my-image.jpg .
Для ссылки на файл в поддиректории, напишите имя директории в начале пути, плюс косую черту (forwardslash, слеш), например: subdirectory/my-image.jpg .
Для ссылки на целевой файл в директории выше вызывающего HTML файла, напишите две точки. Например, если index.html находится внутри подпапки test-site , а my-image.jpg - внутри test-site , вы можете обратиться к my-image.jpg из index.html , используя ../my-image.jpg .
Вы можете комбинировать их так, как вам нравится, например ../subdirectory/another-subdirectory/my-image.jpg .

На данный момент это все, что вам нужно знать

Примечание: Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например C:\windows . Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы всё равно должны использовать обычные слеши в вашем коде.

Что должно быть сделано?

К настоящему моменту структура вашей папки должна выглядеть примерно так:

Template, Shadow DOM, и Custom Elements позволяют вам строить UI компоненты проще и быстрее. Однако, это не самый эффективный способ загрузки ресурсов HTML, CSS и JavaScript по отдельности.

Для загрузки библиотек типа jQuery UI или Bootstrap требуются отдельные тэги для JavaScript, CSS, и Web шрифтов. Все становится проще при использовании Web Components с несколькими зависимостями.

HTML импорты позволяют загружать ресурсы как совокупность нескольких файлов этого типа.

Предлагаю вам ознакомиться с видео по данной теме.

Использование HTML импортов

Чтобы загрузить HTML файл, добавьте тэг link с import 'ом в параметре rel и href , содержащий путь до нужного файла. К примеру, если вы хотите загрузить файл под названием component.html в index.html , то все должно выглядеть так:
index.html

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

doctype , html , head , body необязательны. HTML импорты автомагически загрузят все указанные элементы, добавят их на страницу и запустят JavaScript, если имеется.

Порядок исполнения

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

Во избежание блокировки тэгом script оставшегося HTML можно использовать атрибуты async / defer (также можно переместить все скрипты в конец страницы). defer указывает на то, что код можно запустить лишь после загрузки HTML. async позволяет браузеру выполнять эти два действия параллельно.

Итак, как же работают импорты?

Скрипт внутри HTML импорта работает как обычный тэг script с атрибутом defer . В примере ниже index.html запустит script1.js и script2.js внутри component.html перед исполнением script3.js .
index.html

component.html

Загружается component.html из index.html и ожидает исполнения;
Загружается script1.js в component.html ;
Загружается script2.js в component.html после script1.js ;
Загружается script3.js в index.html после script2.js .

За рамками происходящего

Чтобы избежать этого ограничения, используйте CORS (Cross Origin Resource Sharing). Чтобы узнать больше об этой технологии, прочтите эту статью.

Объекты window и document в импортируемых файлах

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

Остерегайтесь того, что объект document в импортируемом файле будет ссылаться на страницу оригинала.

Используя написанный ранее код в качестве примера, заставим document в index.html и component.html ссылаться на document в index.html .

Внесем небольшие изменения в наши файлы.
index.html

Для получения document из component.html дополните ваш код с document.currentScript.ownerDocument .
component.html

Если вы используете webcomponents.js , воспользуйтесь document._currentScript вместо document.currentScript . Нижнее подчеркивание в currentScript используется для поддержания браузеров, не способных работать с этим компонентом без использования сего знака.
component.html

Написав вот это в начале вашего скрипта, можно легко получить доступ к document из component.html , даже если браузер не поддерживает HTML импорты.

Вопросы производительности

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

Зависимости

Что делать, если несколько вставляемых документов ссылаются на одну и ту же библиотеку? Например:

Вы загружаете jQuery в обоих документах, из-за чего при импорте этих документов библиотека в конечном документе будет исполнена дважды.
index.html

component1.html

component2.html

Данная проблема крайне легко решается в импортах.

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

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

К счастью, нам на помощь идет инструмент под названием «Vulcanize».

Объединение сетевых запросов

Vulcanize — инструмент объединения нескольких HTML файлов в один, с помощью чего число подключений к сети в целях загрузки необходимых документов сокращается. Вы можете установить его с помощью npm и использовать в командной строке. Также существуют аналоги для grunt и gulp , с помощью чего можно сделать «Vulcanize» частью вашего процесса сборки.

Для объединения файлов index.html используем следующий код:

При исполнении данной команды все зависимости index.html будут соединены в файле vulcanized.html .

Прочитать больше о данном инструменте можно здесь.

Сочетание импортов с Template, Shadow DOM и Custom Elements

Для тех, кто не знает о данных технологиях: С templates определение содержания пользовательского элемента может быть декларативным. С Shadow DOM styles , ID и classes элемента можно использовать немного иначе. С Custom Elements можно создать собственные HTML тэги. Неплохо, не так ли?

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

Обратите внимание, что объект document в x-component.html такой же, как и в index.html . Не нужно писать ничего сложного, все работает само ~~и за вас~~.

Поддерживаемые браузеры

HTML импорты поддерживаются браузерами Chrome и Opera. Firefox на данный момент отложил добавление данной фичи, так как «у них есть более приоритетные задачи».

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