Какой файл является по умолчанию главной страницей веб сайта

Обновлено: 24.01.2025

Сайт состоит из папок и файлов. Как правило, главный файл называется 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.

Программирование и разработка

Когда вы создаёте веб-страницы в редакторе кода, таком как Visual Studio Code, Sublime Text, вам необходимо создать index.html, потому что эта страница выполняет важную работу. Создание первой страницы index.html считается лучшим методом веб-разработки.

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

Что такое index.html?

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

Как создать страницу index.html

Теперь вы понимаете, что такое страница index.html и почему она важна. Давайте посмотрим, как именно мы можем создать страницу index.html с помощью Visual Studio Code (или VS Code), редактора кода.

Если у вас не установлен VS Code, ознакомьтесь с этим полезным руководством по началу работы с Visual Studio Code.

Начнём с создания нового файла.

На главной панели инструментов VS Code создайте новый файл.

Затем вам будет показан пустой файл кода с таким именем, как «Без названия» или «Без названия-1».

Затем перейдите в «Файл», «Сохранить как» и сохраните имя файла как «index» с типом файла «html».

Теперь вы увидите «index.html» в качестве имени вашего файла.

По умолчанию в файле index.html должно быть несколько элементов. К ним относятся HTML-теги, такие как,и. Вы также должны объявить тип документа, используя «DOCTYPE HTML».

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

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

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

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

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

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

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

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

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

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

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

Изображения

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

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

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

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

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

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

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

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

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

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

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

Индексный файл

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

По умолчанию индексными файлами являются следующие: index.html , index.htm , index.php , index.php3 , index.phtml , index.shtml , default.htm или default.html . Если вы хотите чтобы первым открывался какой-то иной файл, нужно переопределить текущие значения.

Назначение и использование файла .htaccess

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

Файл .htaccess может быть размещен в корневом каталоге веб-сервера (прямо в каталоге www). В этом случае директивы из такого .htaccess действуют по всему веб-серверу. Также .htaccess может находиться и в конкретном подкаталоге сервера. Тогда директивы, которые указаны в этом файле, «перекрывают» действие директив из «основного» файла, который размещен в каталоге www или в любом каталоге более высокого уровня. То есть, действие директив из .htaccess наследуется сверху вниз, но не наоборот. Изменения, внесенные в файл, вступают в силу немедленно. Это связано с тем, что информация из .htaccess перечитывается при каждом обращении к веб-серверу Apache.

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

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

Как переопределить кодировку HTML-документов

Если на вашем ресурсе существуют html-документы в разных кодировках, (ISO-8859-1, Windows-1250, Windows-1252, UTF-8), то вам, возможно, будет необходимо отключить принудительну выдачу заголовка с кодировкой windows-1251. Для этого в .htaccess добавляется строка: AddDefaultCharset Off

Статья по теме: Какой выбрать хостинг для сайта на WordPress: советы новичку

Это примеры простейшего использования возможностей конфигурирования Apache через файл .htaccess.

Как закрыть директорию паролем

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

В каталоге, к которому хотим ограничить доступ по паролю, создаем файл .htaccess с такими директивами:

Путь /home/uXXXXX/.htpasswd обозначает полный путь к файлу паролей на диске нашего сервера. Если, например, вы поместите файл .htpasswd (в нем будут пароли) в домашний каталог, куда вы попадаете зайдя на сервер по FTP, то путь к этому файлу будет иметь вид /home/uXXXXX/.htpasswd, где uXXXXX — наименование вашей виртуальной площадки (например, u12345).

В директиве AuthUserFile указываем абсолютный путь к файлу с логинами/паролями, который мы создадим чуть позже. Если вы создаете файл .htaccess на своем компьютере, а не сразу на сервере при помощи текстового редактора, обратите внимание на то, что .htaccess должен передаваться по FTP строго в текстовом (ASCII) режиме.

Создаем файл паролей. Файл с паролями должен содержать строки вида login:password. Пароль должен быть зашифрован с использованием алгоритма MD5. Один из способов создать такой файл — воспользоваться программой, входящей в поставку Apache — htpasswd (на нашем сервере она находится в каталоге /usr/local/bin/, полный путь — /usr/local/bin/htpasswd).

Рассмотрим как создать файл паролей в unix shell прямо на сервере. Зайдем в shell, и будем выполнять следующие команды:

* htpasswd -mbc .htpasswd user1 sNQ7j9oR2w создаем новый файл .htpasswd, в который добавляем запись для пользователя user1 с паролем, указанным в командной строке. Просьба обязательно заменить sNQ7j9oR2w на любой собственный пароль — здесь этот пароль указан только для примера
* htpasswd .htpasswd user2 добавляем в уже существующий файл .htpasswd пользователя user2, а пароль вводим вручную в ответ на соответствующий запрос программы

Если вы используете Windows и не хотите пользоваться unix shell для генерации паролей, можно загрузить Windows-версию программы htpasswd здесь и создать файл с паролями на своем компьютере, после чего загрузить его на сервер. Если у вас уже установлена Windows-версия Apache, файл htpasswd.exe можно найти в каталоге Program Files\Apache Group\Apache\bin\.

Итак, получите htpasswd.exe и используйте его для генерации паролей таким образом:

* htpasswd.exe -mc .htpasswd user1 создаем новый файл паролей htpasswd.exe, пароль и его подтверждение будут запрошены интерактивно
* htpasswd.exe -m .htpasswd user2 добавляем пользователя user2 в существующий файл паролей htpasswd.exe, запросив пароль интерактивно

После окончания заведения всех логинов файл нужно загрузить на сервер.

Как переопределить индексный файл

Получив .htaccess с таким содержимым, веб-сервер Apache откроет по умолчанию именно файл myindex.php.

Как запретить или разрешить выдачу листинга

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

Файл .htaccess необходимо создавать именно в том каталоге, в котором планируется разрешить листинг. Данная директива будет действовать также и на все подкаталоги (это достигается включенной по умолчанию в настройках виртуального хоста директивой AllowOverride All).

Статья по теме: Бесплатно или дешево? Обзор хостинга Hostinger

Как настроить собственные страницы ошибок

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

Как закрыть доступ с некоторых IP-адресов

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

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

Теперь при попытке обратиться к сайту с IP-адреса 172.16.16.16 посетитель получит ошибку 403 или вашу страницу для этой ошибки.

Указание части адреса в виде 172.16.16 ограничит доступ из подсети 172.16.16/24.

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

Как закрыть доступ к некоторым файлам

Иногда возникает необходимость запретить доступ к определенным файлам. Например, к конфигурационным файлам, содержащим реквизиты доступа к базам данных, интерфейсам и т.п. Допустим, в файле config.cfg вы храните логин/пароль доступа к базе данных. Создаем в этой директории файл .htaccess с директивами:

Как настроить заголовок last-modified

Для SSI cервер будет выдавать значение last-modified в том случае, если прописана директива «XBitHack full» (просто пропишите эту строку в .htaccess), и для файла, к которому происходит обращение, выставлен атрибут «исполняемый» для группы. В скриптах last-modified выдается иными средствами. Например, если учесть то, что php-скрипт генерирует код динамически, то самым логичным будет в качестве last-modified отдавать текущую дату и время./>

Реализуется это следующим образом:
<? header("Last-Modified: " . gmdate("D, d M Y H:i:s"). " GMT"); ?>

Команда header должна выполняться в php-скрипте до того, как скрипт начнет выдавать html-текст в браузер пользователя.

Дополнительно можете изучить:

Функцию header;
Функции для работы с сервером Apache.

Как управлять кэшированием

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

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

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

ExpiresActive on
ExpiresByType image/jpeg "access plus 1 day"
ExpiresByType image/gif "modification plus 3 months"
ExpiresByType text/html "now"

Примечание: При использовании Parser если вам необходимо полностью исключить заголовки от модуля Apache mod_expires, то для этого необходимо в директории с parser3.cgi создать файл . htaccess и внести в него следующую директиву:
ExpiresActive off

Как сделать переадресацию

Если у вас размещены 2 домена (не обязательно на одной площадке) domain1.tld и domain2.tld, и вам необходимо, чтобы при обращении к domain2.tld у пользователей изменялся адрес на «правильный», и сразу происходило перенаправление, тогда добавьте для домена domain2.tld переадресацию на //domain1.tld/.

Статья по теме: Проблема выбора хостинга для сайта агентства недвижимости: как обезопасить данные пользователя

* О создании переадресаций с другими условиями, вы можете узнать из документации по web-серверу Apache.

Особенность переадресации на синонимах

Предположим, есть домен domain1.tld и синоним domain2.tld. Если запросить в браузере адрес //domain2.tld/dir/ со знаком слэша в конце, то будет отображена индексная страница из директории dir основного домена, при этом содержимое адресной строки браузера останется без изменений. Но если запросить //domain2.tld/dir без слэша в конце, то произойдёт переадресация на //domain1.tld/dir/, и содержимое адресной строки изменится соответствующим образом.

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

Если такое поведение веб-сервера вас не устраивает, добавьте в файл .htaccess следующие строки:

О создании переадресаций с другими условиями вы можете узнать из документации по web-серверу Apache.

Раньше веб-разработчикам приходилось на Windows-машине устанавливать сервер Apache с различными дополнениями к нему: PHP, Perl, MySQL и т.д. — в целях более удобной отладки сайтов. Но Дмитрий Котеров и группа программистов упростила жизнь многим веб-разработчикам, создав проект «Денвер».

Я уже давно использую Denwer (Джентельменский набор веб-разработчика). Он меня полностью устраивает, потому что этот набор прост в установке и не прихотлив в использовании.

Стандартный пакет Денвера включает в себя следующий пакет:

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

XAMPP

Некоторые веб-разработчики говорят, что устанавливали Денвер ранее, но после продолжительного использования он им показался ужасно неудобным и капризным. Поэтому они работают с XAMPP. Это кроссплатформенная сборка веб-сервера, содержащая Apache, MySQL, интерпретатор скриптов PHP, язык программирования Perl и большое количество дополнительных библиотек, позволяющих запустить полноценный веб-сервер.

7 мая 2016 я тоже познакомился с XAMPP. Все время до этого пользовался исключительно Денвером. Но когда установил XAMPP, чтобы запустить сайт на WordPress локально — сразу в него влюбился. Он реально крут. Не обошлось без проблем. Как всегда найдутся программы, которые также используют 80 порт. Да, опять этот Skype :). Но я отключил одну службу и все стало норм.