Как создать файл index html. Этапы создания html страницы. Связь между страницами

Урок 12.

Страница index.

Что такое страница index? Это главная страница сайта.

У каждого сайта есть главная страница. Предположим у нас сайт автомобильной тематики имеющий 4 страницы. Это страница про автомобили Audi, вторая про BMW, третья про Mercedes и четвертая - это главная страница нашего сайта. Соответственно папка в которой находится наш сайт будет иметь 4 файла. Это audi.html, bmw.html, mercedes.html и index.html

Допустим наш сайт уже находится в интернете и имеет доменное имя "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 страницы.

С этими файлами мы будем работать в следующих уроках. Теперь давайте переименуем файлы и дадим им имена audi.html, bmw.html, mercedes.html и index.html. Не используйте в названии файлов заглавные буквы, с чем это связанно, Вы узнаете из следующего урока. Внимание! Если я пишу, что файл должен иметь имя, например, bmw.html , то это не значит что нужно дать ему имя bmw.html, это значит,что файл должен иметь имя bmw , а html - это расширение (тип) файла, а не часть его имени!

Для тех, кто в танке, в результате в папке "Сайт" у нас 4 файла с расширением html.

Влад Мержевич

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

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

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

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

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

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

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

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

DirectoryIndex index.html index.htm

Где через пробел указываются имена файлов, которые следует просматривать на предмет наличия и запускать автоматически. После этого, при указании пути к разным файлам и папками, в браузере будут открываться документы, как показано в таблице (указание протокола http:// для краткости опущено).

Путь	Что запускается
www.mysite.ru	www.mysite.ru/index.html
www.mysite.ru/16.html	www.mysite.ru/16.html
www.mysite.ru/16/	www.mysite.ru/16/index.html
www.mysite.ru/1/6	www.mysite.ru/1/6/index.html

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

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

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

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

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

Options -Indexes

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

Изображения

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

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

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

ErrorDocument 404 /err404.html

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

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

Вернемся теперь к сайту, файловую структуру которого следует создать. Здесь существует два различных подхода. В первом случае, каждому разделу соответствует html-документ, находящийся в корне сайта. Путь к нему будет выглядеть как www.mysite.ru/optimize.html. Альтернативный вариант — создание папок, которые будут соответствовать определенным разделам. В каждой папке размещается файл index.html. Поскольку этот файл указывать в адресе не обязательно, то путь будет выглядеть как www.mysite.ru/optimize. На рис. 1 и рис. 2 показаны два набора организации файлов на сайте.

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

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

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

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

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

Htaccess — конфигурационный файл веб-сервера Apache. Указанный сервер является наиболее популярным и распространенным в мире, поэтому и данный файл можно встретить повсеместно. Бывают, конечно, исключения.

robots.txt — файл, предназначенный для поисковых систем. При индексировании сайта, в первую очередь ищется он. Пример запрета для всех поисковых систем посещать папки сайта cgi-bin и images.

User-agent: *
Disallow: /cgi-bin/
Disallow: /images/

favicon.ico — иконка сайта, она появляется возле адреса сайта при занесении его в раздел «Избранное» браузера. Это рисунок размером 16 на 16 пикселов формата ICO.

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

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

Заключение

Хотя имена некоторых служебных файлов зависят от настроек сервера и могут меняться от сайта к сайту, приведенные принципы характерны для большинства из них. Для динамических сайтов, содержание которых формируется с помощью программы, так называемого «движка», структура будет несколько отличаться от приведенной. Однако и в этом случае, служебные файлы, такие как таблицы стилей, .htaccess, favicon.ico, robots.txt останутся на месте.

В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.

Вы готовы? Тогда поехали!

Подключение к интернету для создания страницы на html нам НЕ нужно.

Нам понадобится

1) Выбираем текстовой редактор . На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как )

Если Вы сразу хотите начать программировать в специализированных текстовых редакторах, то обратите внимание на: 1) для Windows NotePad++ (скачать или ) Intype (скачать) 2) для Mac и Linux Bluefish Editor (скачать) Их отличие от обычных текстовых редакторов заключается в основном в том, что они делают автоматические отступы, ! дают возможность пересохранить файл в другой кодировке (обратите внимание, в будущем столкнётесь), окрашивают теги в различные цвета как, например, код внизу урока. В обычном редакторе он будет одного цвета.

2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla , Google Chrome , Opera , Yandex и Mail браузеры и тд.

Приступим к созданию страницы HTML

1) создаём на рабочем столе папку html . Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.

2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как .

Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с.html на конце, например index.html

Выбираем в качестве директории (папки), куда сохранить, нашу html
Нажимаем сохранить . Готово!

Часто задают вопрос о том, что не видно расширения файла . Разберём по порядку

Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать ) сменить не только расширение, но и следовательно тип файла (например, с txt на html)

так НЕ должно выглядеть: photo, текстовой документ, game так Должно выглядеть: photo.jpg; текстовой документ.txt; game.exe Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее: Смотрим настройки файлов и папок: Для Win XP Открываем любую папку - Сервис (сверху в панели) - Свойства папки - Вид - Скрывать расширения для зарегистрированных файлов (снять галочку) - Применить Для Win 7 Открываем любую папку - Упорядочить - Параметры файлов и поиска -Вид - Скрывать расширения для зарегистрированных типов файлов (снять галочку) - Применить Для Mac OS Щёлкаем мышью по рабочему столу - Finder - Preferences (Настройки) - Advanced (Дополнительно) - выставить флажок в Show all file extensions (Показывать расширения всех файлов) - Применить

3) вставляем в него Весь код (вместе с комментариями), указанный ниже:

Заголовок моей странички

4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html - Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.

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

Рисунок 1.

На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:

Заголовок моей странички

Это моя первая web-страничка!

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

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

Тег title обозначает Название страницы. Это единственный тег, содержащийся в head , который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете

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

Любой заголовок

Просто текст

Текст в параграфе. Он будет писаться с новой строки и заканчиваться с закрывающим тегом

Другой текст

Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия).

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

Хочу выделить текст жирным, а этот уже курсивом

Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее

Хочу выделить текст жирным, а этот уже курсивом

Как видите, текст до конца будет выделяться жирным, а тот, что подразумевался курсивом, тот будет и жирным, и курсивом. Так что будьте внимательны!

5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html - выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad) , либо установленный Вами другой текстовой редактор.

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

Мои поздравления!
Несложно же?)

Ниже рассмотрим оба этих способа.

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

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

Для размещения сайта через Панель управления используется раздел «Файловый менеджер », предназначенный для работы с файлами на аккаунте. В нем отображается текущее содержимое аккаунта. На каждом новом аккаунте виртуального хостинга изначально находится папка 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.html и нажать кнопку «Переименовать ». Загруженный файл будет переименован в index.html.

Размещение сайта с использованием протокола FTP

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

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

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

ftp://login:[email protected]

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

Создание базы данных MySQL

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

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

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