Где хранятся html файлы

Обновлено: 04.07.2024

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

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

Создайте на компьютере (только не на рабочем столе) папку, назовите ее store (переводится "магазин"). В ней создайте файл index.html — для этого создайте текстовый документ и просто полностью переименуйте его в index.html. Теперь в папке store создайте папку css, а в ней создайте файл style.css.

Сразу скажу, что файл index.html здесь главный. Именно его нужно будет потом открыть в браузере. В файле style.css будут находиться CSS-стили, с помощью которых будут заданы цвет для шрифта, размер шрифта, цвет фона, размеры картинок и другие параметры для внешнего оформления сайта. Для того, чтобы эти стили сработали для данного сайта, в index.html будет ссылка на style.css. Таким образом, когда Вы откроете index.html в браузере, Ваш браузер начнет обрабатывать HTML-код и, когда браузер встретит ссылку на style.css, он возьмет из этого style.css все CSS-стили и применит их к сайту.

На данный момент можно сказать, что в index.html будет находиться содержимое: текст, картинки. А в style.css будет находиться всё внешнее оформление: в какой цвет покрасить, какой размер задать и т.д.

Откройте Ваш index.html в редакторе SublimeText и вставьте следующий код:

Посмотрите на этот код. В строке <link rel="stylesheet" type="text/css" href="css/style.css"> как раз указывается ссылка на style.css (link переводится как "ссылка"). Здесь путь до style.css указывается в атрибуте href . В данном случае "css/style.css" это относительный путь, то есть путь относительно главного файла index.html (по этому пути браузер перейдет из index.html в папку css, а потом благодаря слеш перейдет в сам файл style.css).

То есть еще раз. Когда Вы открываете файл index.html в браузере, браузер начинает обрабатывать HTML-код сверху вниз. Когда он встречает строку <link rel="stylesheet" type="text/css" href="css/style.css"> , он (браузер) благодаря кусочку кода href="css/style.css" переходит в папку css и находит в ней файл style.css.

Давайте разберем весь вышеприведенный HTML-код. Данный код — это основа основ HTML. То есть весь этот код в обязательном порядке должен содержать любой HTML-файл. Итак, что здесь есть.

Первая строка <!DOCTYPE html> просто сообщает браузеру, что это HTML-код.

Во второй строке открывается тег <html> . Обратите внимание, что закрывается он в самой последней строке кода — </html> . Именно между тегом <html> и </html> находится ВЕСЬ HTML-код. У тега <html> указан атрибут lang , он равен en . Это сделано для того, чтобы браузер сразу понял, что данная страница сайта на английском языке. Когда вы будете делать русскоязычные сайты, то нужно будет указывать lang="ru".

Что такое тег в HTML

Название тега — это только первое слово после открывающей скобки < . То есть в случае с <html lang="en"> тег называется html , а lang — это атрибут тега, en — это значение данного атрибута. Посмотрите внимательно на картинку:

Теги html, head и body

Непосредственно внутри <html></html> могут быть только 2 тега — это head и body . Все остальные теги должны находится уже либо внутри head, либо внутри body.

В head находится только служебная информация, которая никак не отобразится на самом сайте. В head есть только 2 тега, которые отобразятся в браузере, но не на самом сайте, а на вкладке:

Эти 2 тега — это картинка, которая называется favicon (фавикон), и заголовок страницы. Про фавикон я расскажу позже. А заголовок страницы в нашем коде указан в теге title . В нашем случае этот заголовок — Store.

Еще в <head></head> есть тег <meta charset="utf-8"> . Он указывает, что кодировка сайта — utf-8. Об этом можете не задумываться, а просто указывать именно эту кодировку в каждой новой верстке. Раньше были различные кодировки, теперь всегда нужно указывать utf-8.

Также, в head есть тег link со ссылкой на style.css, про который Вы уже знаете.

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

Теперь, находясь в Sublime Text, нажмите на клавиатуре Ctrl+S, чтобы сохранить изменения в index.html.

На этом про структуру сайта и структуру HTML всё. Переходите к следующему уроку, где Вы уже начнете верстать и познакомитесь с CSS. Следующий урок —"Верстка шапки".

В данном уроке вы узнали

.html — расширение, по которому браузер "понимает", что в файле находится HTML-код.

head — тег для служебной информации сайта.

body — тег для всего содержимого сайта.

title — тег для заголовка страницы сайта.

href — это атрибут, в котором указывается ссылка на файл или другой сайт. Расшифровывается как hyper-reference, что с английского переводится ка "гипер-ссылка". Атрибут href может быть не только у тега link.

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

Что за корневая папка?

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

Содержимое папки root

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

Например, на стандартной VDS/VPS такая директория может содержать в себе следующие папки:

/bin с системными программами, файлами и компонентами, необходимыми для загрузки ОС;
/boot с компонентами загрузчика, включающими в себя ядро Linux и базовый набор файлов для старта сервера;
/dev с файлами, привязанными к конкретным устройствам, подключаемым к системе;
/etc с другими скриптами и файлами, от которых не зависит запуск сервера.

Таких подкаталогов в корне может быть больше. Все зависит от конфигурации компьютера и ОС.

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

Где находится корень сайта?

Для чего нужен корневой каталог?

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

Если же говорить о конкретном применении root-каталога вебмастерами на практике, то речь пойдет о:

Загрузке файла Robots.txt, куда будут прописываться страницы, запрещенные для индексации поисковыми машинами. Через нее скрывают разного рода техническую информацию и конфиденциальные данные.
Добавлении документа sitemap.xml (карта сайта), где расписывается структура страниц, чтобы поисковому боту было проще ориентироваться на сайте.
Хранении данных, необходимых для подтверждения прав на владение ресурсом. Туда добавляют скрипты с настройками сторонних ресурсов для интеграции с ними (например, скрипт Яндекс.Метрики).
Хранении архива с резервной копией данных сайта. Бэкап необходим для восстановления проекта после сбоя и потери файлов.
Для установки CMS (соответствующие установочные скрипты запускаются именно из root-каталога).

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

Основной — через терминал. То есть при помощи командной строки и текстовых утилит. Но есть и специализированное программное обеспечение с графическим интерфейсом.

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

Через терминал

Чтобы управлять сервером через терминал, надо подключиться к нему через Secure Shell (SSH). Для этого:

Запускаем терминал (в macOS или Linux).
Вводим команду ssh root@IP-адрес сайта.
Указываем пароль администратора для авторизации.

В Windows для выполнения этой задачи потребуется установить приложение PuTTY и указать IP-адрес сайта в нем.

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

Сразу же можно проверить его содержимое, воспользовавшись командой ls.

Через FTP-клиент

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

Рассмотрим эту процедуру на примере утилиты FileZilla:

Заходим на официальный сайт разработчика программы и скачиваем ее.
Открываем FileZilla и заполняем поля хост, имя пользователя и пароль в верхней части интерфейса.
Затем кликаем по кнопке «Быстрое соединение», чтобы получить доступ к корневой директории.

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

Для управления используются горячие клавиши или элементы в верхней панели FileZilla.

Через панель управления хостинга

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

Открываем сайт Timeweb.
Заходим в саму ПУ.
Переходим во вкладку «Файловый менеджер».
Открываем директорию public_html.

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

Через стороннюю панель управления

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

Заходим в панель ISPmanager.
Авторизуемся, используя данные администратора.
Открываем меню «Система».
Выбираем подпункт «Менеджер файлов».

Через файловый менеджер

В Explorer (Windows) и в Finder (macOS) есть встроенная поддержка протокола FTP. То есть для подключения к серверу не нужно скачивать стороннее ПО. Достаточно ввести FTP-адрес в соответствующее поле файлового менеджера операционной системы.

В macOS это делается следующим образом:

Открываем Finder.
Одновременно нажимаем клавиши Cmd + K.
Указываем адрес сервера в формате ftp://IP-адрес сайта
Кликаем по кнопке «Подключиться».
Авторизуемся, используя данные, которые выдал хостинг.

В Windows:

Открываем Explorer.
Вводим во встроенную поисковую строку ftp://IP-адрес сайта
Авторизуемся, используя данные, которые выдал хостинг.

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

Как загружать файлы в корневой каталог?

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

Открываем FileZilla (мы уже скачали, установили и настроили ее ранее в инструкции по подключению через FTP).
Напротив строки «Локальный сайт» вводим путь до файлов на диске, которые надо загрузить в root.
Напротив строки «Удаленный сайт» вводим путь до root-каталога. Например, до папки public_html.
Выделяем папку, которую нужно перенести, и открываем меню «Файл».
В появившемся списке опций выбираем «Загрузить на сервер» или просто жмем на Enter.

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

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

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

Главная страница
Форматы графических файлов
Разрешение изображений
Оптимизация в программе Photoshop
Оптимизация формата GIF
Оптимизация формата JPEG
Антиальясинг
Разрезание изображений
Список терминов

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

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

Какой файл загружать первым

Обычно просмотр сайта начинается с главной страницы. При обилии в корне сайта различных файлов, как веб-сервер узнает, что ему загружать автоматически? Конечно, если путь к файлу указан напрямую, никаких вопросов не возникает. Но в большинстве случаев, адрес сайта указывается коротко, без лишних файлов на конце. Вот тогда читаются настройки сервера и определяется файл, который следует показать, а также, есть ли указанный файл в наличии. Как правило, такой файл имеет имена index.html, index.htm, default.htm, в общем, список можно продолжить. Чтобы не усложнять себе жизнь вычислением, какой же файл главнее, это можно установить самому, используя для этого файл .htaccess, размещая его в корне сайта. Данный файл является конфигурационным для популярного веб-сервера Apache и представляет собой обычный текстовый документ. В нем следует прописать такую строку.

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

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

Запрет доступа к папкам

В нем надо написать следующую информацию.

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

Изображения

Отслеживание ошибок

Файл называется err404.html и размещается в корне сайта, слэш (символ /) перед именем файла пишется обязательно.

Файловая структура сайта

Рис. 1. Организация документов по файлам

Рис. 2. Организация файлов по каталогам

Какую структуру предпочесть зависит лишь от воли создателей сайта.

Дополнительные файлы

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

Обязательные имена

Необязательные имена

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

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

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

HTML и CSS - взаимосвязь

Давайте для начала определимся с этими двумя понятиями:

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

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

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

Где находится html код страницы

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

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

Как изменить стиль заголовка

Далее хочу обратить ваше внимание на скриншот.

В его верхней части я выделил HTML код, отвечающий за вывод заголовка h1. По умолчанию при проверке он подсвечивается серым фоном. Ну да ладно, это так для общего сведения. Нам же нужно обратить внимание в нижнюю часть скриншота, где расположены скрипты, отвечающие за вывод CSS стилей. Хочу сразу же предупредить, что в зависимости от шаблона название CSS файла может отличаться, но, как правило, это style.css или template.css.

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

Некоторые свойства CSS

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

- font-size – изменение размера текста.

- text-decoration – в зависимости от команды сюда относится зачеркивание и подчеркивание текста, а также выделение линиями.

- font-family – семейство шрифтов.

- color – цвет текста.

Спасибо за внимание и до скорого на страницах Stimylrosta.

Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter

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

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

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

Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем 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, вы всё равно должны использовать обычные слеши в вашем коде.

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

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

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