почему index html так называется
Страница index.
Что такое страница index? Это главная страница сайта.
Допустим наш сайт уже находится в интернете и имеет доменное имя «nemeckieavto.ru».
По ссылке nemeckieavto.ru/audi будет открываться наш файл audi.html
По ссылке nemeckieavto.ru/bmw будет открываться наш файл bmw.html
По ссылке nemeckieavto.ru/mercedes будет открываться наш файл mercedes.html
Теперь внимание! Для того, чтобы попасть на главную страницу нашего сайта, не нужно вводить в адресной строке nemeckieavto.ru/index, достаточно будет только ввести nemeckieavto.ru
Тем кто не понял, вот второй вариант объяснения:
1) Каждый сайт в интернете имеет доменное имя (домен).
2) Каждый сайт (за исключением одностраничных) имеет энное количество страниц (файлов), которые имеют свои названия.
3) Эти самые страницы (файлы) сайта будут доступны по адресу www.домен/название страницы
4) Главная страница сайта (файл index.html) будет доступна по адресу www.домен
Файл index.html в обязательном порядке присутствует абсолютно на любом сайте. Сайт не будет работать без этого файла.
В одностраничных сайтах присутствует только файл index.html, других файлов нет.
Создаем еще три страницы html.
На 2-ом уроке мы создали папку «Сайт» и в ней создали файл с расширением html. Скорее всего этот файл у Вас называется «new 0». Сейчас давайте в этой папке создадим еще 3 файла. Чтобы не заморачиваться с расширением и с кодировкой (2 урок), можно просто сделать 3 копии нашего файла «new 0». Таким образом у нас получится 4 файла с расширением html. Перед тем как сделать копии, удалите все html коды, которые мы писали в процессе работы. Оставьте только теги относящиеся к структуре html страницы.
Для тех, кто в танке, в результате в папке «Сайт» у нас 4 файла с расширением html:
Если по умолчанию у Вас стоит браузер FireFox, то вид ваших файлов будет как на рисунке. Если же по умолчанию установлен другой браузер, то и файлы будут с изображением другого браузера.
Вы что-то не поняли из этого урока? Спрашивайте!
— vadimgreb@yandex.ru
Что такое индексный файл index.html
Когда вы создаёте веб-страницы в редакторе кода, таком как Visual Studio Code, Sublime Text, вам необходимо создать index.html, потому что эта страница выполняет важную работу. Создание первой страницы index.html считается лучшим методом веб-разработки.
Итак, что такое страница index.html и почему она имеет значение? В этой статье рассказывается о index.html и о том, почему вы всегда должны создавать эту страницу при создании веб-сайта.
Что такое index.html?
Index.html — это первая HTML-страница, которую вы создаёте при создании веб-сайта. HTML (язык разметки гипертекста) помогает структурировать текст и другие элементы на веб-странице. Страница index.html — это страница по умолчанию, которую видит посетитель веб-сайта, если не указана другая страница, которую часто называют «домашней страницей».
Например, если вы вводите URL-адрес, такой как https://careerkarma.com, вы не указали какую-либо конкретную страницу, которую сервер должен доставить клиенту (компьютеру или мобильному телефону). Во многих случаях вы увидите страницу по умолчанию или страницу index.html.
Если вы знаете точный адрес страницы, которую хотите просмотреть, например https://careerkarma.com/blog, то сервер направит вас на эту страницу, а не на страницу 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
Давайте создадим простейшую структуру для нового сайта. Она будет выглядеть так:
Создайте на компьютере (только не на рабочем столе) папку, назовите ее 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 будет находиться всё внешнее оформление: в какой цвет покрасить, какой размер задать и т.д.
Для разработки Вам необходим редактор SublimeText. Скачайте его за считанные секунды на официальном сайте sublimetext.com и установите. Это займет меньше 1 минуты.
Откройте Ваш index.html в редакторе SublimeText и вставьте следующий код:
Давайте разберем весь вышеприведенный HTML-код. Данный код — это основа основ HTML. То есть весь этот код в обязательном порядке должен содержать любой HTML-файл. Итак, что здесь есть.
Первая строка просто сообщает браузеру, что это HTML-код.
Что такое тег в HTML
Теги html, head и body
В head находится только служебная информация, которая никак не отобразится на самом сайте. В head есть только 2 тега, которые отобразятся в браузере, но не на самом сайте, а на вкладке:
Также, в head есть тег link со ссылкой на style.css, про который Вы уже знаете.
Тег body служит для того, чтобы помещать в него всё, что нужно отобразить на сайте (тексты, картинки и т.д.).
Теперь, находясь в Sublime Text, нажмите на клавиатуре Ctrl+S, чтобы сохранить изменения в index.html.
На этом про структуру сайта и структуру HTML всё. Переходите к следующему уроку, где Вы уже начнете верстать и познакомитесь с CSS. Следующий урок —»Верстка шапки».
В данном уроке вы узнали
.html — расширение, по которому браузер «понимает», что в файле находится HTML-код.
head — тег для служебной информации сайта.
body — тег для всего содержимого сайта.
title — тег для заголовка страницы сайта.
href — это атрибут, в котором указывается ссылка на файл или другой сайт. Расшифровывается как hyper-reference, что с английского переводится ка «гипер-ссылка». Атрибут href может быть не только у тега link.
Уроки Web-мастерства. Урок 6
Создаем свой первый сайт
Этот урок является завершающим (для удобства все ранее опубликованные уроки практикума размещены на CD, прилагаемом к журналу. — Прим. ред.).
Прежде чем начать его изучение, имеет смысл перечитать урок 1, для того чтобы вспомнить технологию взаимодействия клиент — сервер (см. «Мир ПК», № 2/03 или http://www.osp.ru/pcworld/2003/02/084.htm), и урок 2 (см. «Мир ПК», № 3/03 или http://www.osp.ru/pcworld/2003/03/092.htm), где по шагам была рассмотрена установка сервера Apache. Если вы еще не установили Арасhe, то сделайте это сейчас — на CD прилагается его дистрибутив.
Основы проектирования сайта
При создании сайта уже на первом этапе перед вами встанет сразу несколько задач. Перечислим некоторые из них:
1. Продумать логическую структуру сайта — его содержимое, разделы, систему навигации. Не делайте лишних — «проходных» — страниц.
Грамотная структура, понятная система навигации позволят посетителям быстро получить представленную информацию.
На практике это как раз и оказывается одной из самых сложных задач, особенно в случае достаточно больших сайтов. Как правило, пользователю Всемирной паутины нужна именно информация, а не красивые картинки, и чем скорее, тем лучше. Время — деньги! И в прямом, и в переносном смысле. Ведь многие за пользование Интернетом платят из своего кармана.
Если вам удалось это сделать, то посетитель станет вашим. Он вернется к вам на сайт еще не один раз и, возможно, порекомендует ресурс кому-нибудь из своих знакомых или коллег.
2. Создать интересный дизайн. Хороший дизайн — это отнюдь не красивые картинки. Сайт может быть сделан почти без графических изображений.
Это, во-первых, удобное расположение информации и навигации на странице. Во-вторых, подбор цветов при оформлении сайта. Не выбирайте яркие цвета — смотреть на подобные страницы долго невозможно. По той же причине не используйте много анимированных изображений. В-третьих, подберите удобный для чтения с экрана шрифт, не используйте много различных шрифтов на странице, один-два — вполне достаточно. Избегайте экзотических шрифтов, скорее всего, у пользователя на компьютере их нет. В-четвертых, не перегружайте страницы картинками, ваша задача создать страницы, которые максимально быстро увидит пользователь. Следуйте девизу: чем страница легче, тем лучше! (Не рекомендуется делать странички более 50 Кбайт вместе с графикой. Конечно, для отдельных страниц возможны исключения.) Как известно, наибольший «вес» страницам придают именно картинки. Вспомните, как вы посещали те или иные ресурсы. Щелкнули по ссылке и. долго ждете, когда появится содержимое страницы или картинка. И какова была ваша реакция? Скорее всего раздражение.
3. Конечно, технически все это реализовать.
4. По возможности минимизировать затраты времени на создание и дальнейшую поддержку сайта. Очень важно, чтобы впоследствии легко было добавлять новые разделы и пополнять имеющиеся. Уже на начальном этапе необходимо разработать технологию по созданию и дальнейшей поддержке сайта. Конечно, все моменты сразу не предусмотришь, как правило, это приходит с опытом. Но некоторые из них мы рассмотрим на этом уроке.
На рис.1 представлена веб-страница. Предположим, что это «набросок» сайта какой-либо фирмы. Как видно из рис. 1, изменяется только правая часть, где будет размещаться содержимое страницы. Остальные — верхняя часть, левая (навигация) и нижняя — остаются неизменными, они одинаковы для всех страниц сайта.
Такая компоновка удобна для посетителей. Используя левую, навигационную часть, можно перемещаться по страницам, при этом навигация всегда будет оставаться в одном и том же месте — слева.
Из этой страницы мы создадим шаблон и из него будем формировать все остальные страницы сайта: изменяя правую часть (размещая там содержимое страницы), будем сохранять файл с разными именами и в разных каталогах. Но сначала разработаем для нашего сайта файловую структуру.
Файловая структура сайта
Грамотная и продуманная организация файловой структуры сайта позволит сэкономить время на его дальнейшей поддержке и сопровождении. Кроме того, она поможет легко ориентироваться в большом количестве файлов, из которых состоит веб-сайт. Особенно это важно при больших по объему сайтах или в тех случаях, когда сайт не очень большой (как в нашем примере), но вы планируете его дальнейшее развитие и добавление новых разделов.
На первом уроке (см. «Мир ПК», №2/03 или http://www.osp.ru/pcworld/2003/02/084.htm) на примере сайта «Я и мой Кот» мы уже затронули некоторые моменты по организации файловой структуры.
Рекомендуемая для нашего случая файловая структура сайта представлена на рис. 2.
 |
| Рис. 2. Файловая структура сайта |
Давайте подробнее его рассмотрим:
И еще несколько рекомендаций по именованию каталогов и файлов.
Мы уже разбирали этот немаловажный момент в уроке 3 (см. «Мир ПК», №4/03 или http://www.osp.ru/pcworld/2003/04/075.htm).
Имеются в виду отличия в именовании файлов в разных операционных системах. Они, например Unix, чувствительны к регистру букв в именах файлов и каталогов. В Windows регистр не имеет значения (About. html и about.html — для Windows один и тот же файл. Для ОС Unix это два разных файла).
На практике ошибки часто возникают при переносе файлов с локальной машины, где установлена ОС Windows, на сервер, где установлена Unix.
Предположим, сайт компании, в которой вы работаете, находится у провайдера. Как правило (наиболее частый вариант), там установлены ОС Unix и веб-сервер Apache.
На своем персональном компьютере вы имеете копию сайта. Вероятнее всего, у вас установлена ОС Windows. Сделав нужные изменения и дополнения на локальной версии, вы переносите файлы на рабочий веб-сайт — к провайдеру. Тут вас и подстерегает опасность. Казалось бы, все работает. Вы все проверили и протестировали. Почему же после переноса файлов на сайте не видны некоторые картинки, не работают ссылки?
Совет. Внимательно следите за тем, чтобы регистр в названиях файлов и в ссылках, которые идут на эти файлы, совпадал. Например, если файл называется About.html, то ссылка на него О компании. Это касается и картинок, и всех случаев, когда указывается путь к файлу.
Теперь, если понадобится добавить новый раздел, создаете отдельный каталог с названием этого раздела на английском языке (или в транслитерации — русские слова латинскими буквами), открываете шаблон страниц, размещаете в него ее содержимое и сохраняете файл на диске в заранее созданном каталоге.
Понятие корня сервера и стартовой страницы
Перед изучением технологии SSI познакомимся с двумя очень важными понятиями: корень сервера и стартовая страница.
Корневой каталог или корень сервера. Обозначается / (косая черта, прямой слэш). Это каталог на диске компьютера, внутри которого находится все содержимое вашего сайта — файловая структура.
При обращении клиента (программы просмотра) к серверу по http-протоколу поиск запрашиваемого документа осуществляется внутри этого каталога. Например, пользователь в поле адреса Internet Explorer вводит адрес страницы (URL).
Иными словами, осуществляет запрос к серверу (подробно процесс взаимодействия клиента и сервера был рассмотрен в первом уроке — см. «Мир ПК», №2/03 или http://www.osp.ru/pcworld/2003/02/084.htm).
Получив такой запрос, сервер в корневом каталоге ищет каталог webschool и в нем файл webschool.htm.
Корневой каталог определяется в настройках сервера. По умолчанию в IIS это C:Inetpubwwwroot, в Apache, если вы устанавливали по умолчанию, — C:Program FilesApache GroupApachehtdocs (под управлением ОС Windows).
Вы можете настроить корень сервера на любой каталог на диске, конечно, при условии, что имеете на это полномочия администратора.
Стартовая страница сайта (первая страница, индексная страница) — веб-страница, отправляемая сервером, когда запрос идет не к конкретному документу, а к сайту в целом http://www.microinform.ru/ или к каталогу http://www.osp.ru/pcworld/2003/02/. Об этом говорит прямой слэш в конце URL.
Какая именно страница — определяется в настройках сервера?
По умолчанию в IIS это default.htm, в Apache — index.html. Этот файл часто называют индексным.
Исходя из вышесказанного, я рекомендую вам входной файл в каталоге называть именем индексного файла. Например, если на сайте есть раздел о компании, то логично назвать каталог /aboutcompany/ и стартовую страницу этого раздела — index.html в случае Apache и default.htm в случае IIS.
Включения на стороне сервера. Директива include и создание шаблона страницы
Начинаем изучать технологию Server Side Includes (SSI). SSI — одна из первых серверных технологий. На уроке 1 мы познакомились с понятиями статичной и динамичной страницы. Статичная страница состоит из «чистых» html-кодов. Мы с вами уже научились создавать такие страницы.
Директивы могут располагаться в любых местах страницы. И внутри ячейки таблицы, и в разделе
, и в других. Соответственно именно в месте, где стоит директива, сервер вставит результат ее выполнения.
Перед тем как начинать рассматривать синтаксис технологии SSI, настроим наш веб-сервер:
Процесс установки сервера Apache был подробно рассмотрен в уроке 2 (см. «Мир ПК», №3/03 или http://www.osp.ru/pcworld/2003/03/092.htm), его дистрибутив находится на прилагаемом к журналу CD.
Настройка Apache-сервера
Все изменения в конфигурации сервера Apachе, установленного под ОС Windows, осуществляются в файле httpd.conf. Редактировать этот файл можно с помощью простейшего текстового редактора Notepad (входит в состав ОС Windows).
Где находится файл httpd.conf?
 |
| Рис. 6. Настройка корня сервера и поддержки SSI в файле конфигурации Apache httpd.conf |
На рис. 6 представлены фрагменты конфигурационного файла httpd.conf, которые нужно найти и изменить или дополнить. Знак # означает, что строка закомментирована — не выполняется. Все изменения и добавления подсвечены на рисунке цветом.
Совет. При изменениях конфигурационного файла всегда сначала комментируйте строку, которую нужно изменить, и ниже добавляйте свою. Это позволит вам вернуться назад в случае неверных изменений.
Hастройка корневого каталога узла (/)
Обратите внимание на прямые слэши (в отличие от обратных в ОС Windows).
Внутри каталога, который указывается в настройках сервера, вы и будете создавать файловую структуру своего сайта.
Настройка поддержки SSI
Поддержка SSI установлена для файлов с расширениями
И еще одна настройка. Найдите строку:
Options Indexes FollowSymLinks MultiViews
В Options добавляем через пробел Includes. Итоговая строка должна выглядеть следующим образом:
Options Indexes FollowSymLinks MultiViews Includes
Важно! Чтобы изменения вступили в силу, сервер нужно перестартовать.
Если вы все сделали корректно, то сервер успешно перестартует. В случае ошибок проверьте синтаксис, убедитесь, что верно указан корневой каталог. Возможно, забыли его предварительно создать на диске.
Теперь наш сервер готов к работе с серверными включениями.
Если же вы в качестве рабочего сервера выбираете IIS, то с процессом его установки и настройки можете познакомиться в Приложении 1 в конце статьи.
Синтаксис SSI
Правда, немного напоминает комментарии в языке HTML?
Несколько замечаний по поводу синтаксиса:
. Это важно именно для сервера Apache (например, сервер IIS работает и с пробелом, и без него).
Базовые директивы SSI: директива include
Самой распространенной директивой является include — она вставляет содержимое одного документа в другой.
Здесь include — название директивы; virtual — название атрибута; /ssi/top.html — путь к файлу от корня сервера, содержимое которого вставляется в html-страницу.
Директива include может иметь атрибуты file или virtual. В данном примере в документ, где находится директива include, будет вставлено содержимое файла top.html, который находится в папке SSI. Если вы используете атрибут virtual, то его значением является путь к файлу от корня сервера. Указание путей от корня сервера зачастую является более предпочтительным (см. врезку «Определение пути. »).
Директив include может быть несколько в одном документе.
На практике в подключаемые файлы размещают HTML-фрагменты, которые повторяются на нескольких или на всех страницах сайта. Например, навигацию по сайту, шапку, нижнюю часть, рекламные вставки.
На рис. 7 приведен пример использования директивы include для создания шаблона документа. Исходная страница показана на рис. 1.
Как говорилось выше, все страницы сайта имеют единое оформление. Соответственно для того, чтобы создать шаблон страницы, мы оставляем на ней только уникальные для нее элементы: название страницы
Почему index html так называется
После относительно загрузочных статей о профессиональном дизайне так и хочется поговорить о чем-нибудь более земном, близком к простому народу.
Вот, например, в одном из обзоров я упомянул, что ставить в ссылках «index.html» — это ламерство. Естественно, ламером никому быть не хочется, и некоторые читатели заинтересовались: почему это, собственно, ставить в ссылках «index.html» — это плохо? Объясняю.
Абсолютно все URL’ы, существующие в интернете, замечательно обходятся без всяких там «index.html» (как и index.htm, default.htm и т.п.). И с индекс.хтмл, и без него результат, который пользователь увидит в окне браузера, будет совершенно одинаковым.
Поэтому не нужно усложнять и без того длинные адреса страниц. Не нужно подстраховываться, думая: «А вдруг без индекс.хтмл главная страница моего сайта не будет показываться». Не беспокойтесь, все будет в порядке. Сервер сам найдет в каталоге index.html и покажет его содержимое, даже если в ссылке вы укажете, например, www.softlist.ru, а не www.softlist.ru/index.html.
Кто-то может сказать: «Да ладно, какая разница, что там в ссылке написано? Кликнул один раз — и все, страница загрузилась. Не все ли равно, сколько букв в адресе?»
Получается, что не все равно. Через полгода (а то и быстрее) ссылки с «индекс.хтмл» расползутся по всему интернету и за его пределы. Пользователи будут ставить закладки, вебмастера различных каталогов ресурсов занесут адрес сайта в свои базы данных, роботы поисковых серверов проиндексируют страницы, журналисты (зачастую далекие от интернета и компьютеров) будут добросовестно переписывать URL’ы в черновики своих будущих статей.