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

Обновлено: 08.07.2024

Этот урок является завершающим (для удобства все ранее опубликованные уроки практикума размещены на CD, прилагаемом к журналу. — Прим. ред.).

На этом уроке мы с вами на конкретном примере создадим тестовый сайт, взяв за основу страницу, которая была приведена в качестве примера в уроке 5 (см. "Мир ПК", №5/04) при изучении CSS (рис. 1).
Разработаем для него файловую структуру.
Оформим все страницы в едином стиле: единая навигация, расположение элементов на экране, заголовок страницы, содержимое страницы. Для этого создадим шаблон страницы.
Используем для оформления сайта единую стилевую таблицу (см. урок "Мир ПК", № 5/04).
Научимся подключать навигацию и все повторяющиеся элементы страниц, используя технологию SSI и директиву include.
Настроим веб-сервер.

Основы проектирования сайта

При создании сайта уже на первом этапе перед вами встанет сразу несколько задач. Перечислим некоторые из них:

1. Продумать логическую структуру сайта — его содержимое, разделы, систему навигации. Не делайте лишних — «проходных» — страниц.

Грамотная структура, понятная система навигации позволят посетителям быстро получить представленную информацию.

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

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

2. Создать интересный дизайн. Хороший дизайн — это отнюдь не красивые картинки. Сайт может быть сделан почти без графических изображений.

Это, во-первых, удобное расположение информации и навигации на странице. Во-вторых, подбор цветов при оформлении сайта. Не выбирайте яркие цвета — смотреть на подобные страницы долго невозможно. По той же причине не используйте много анимированных изображений. В-третьих, подберите удобный для чтения с экрана шрифт, не используйте много различных шрифтов на странице, один-два — вполне достаточно. Избегайте экзотических шрифтов, скорее всего, у пользователя на компьютере их нет. В-четвертых, не перегружайте страницы картинками, ваша задача создать страницы, которые максимально быстро увидит пользователь. Следуйте девизу: чем страница легче, тем лучше! (Не рекомендуется делать странички более 50 Кбайт вместе с графикой. Конечно, для отдельных страниц возможны исключения.) Как известно, наибольший «вес» страницам придают именно картинки. Вспомните, как вы посещали те или иные ресурсы. Щелкнули по ссылке и. долго ждете, когда появится содержимое страницы или картинка. И какова была ваша реакция? Скорее всего раздражение.

3. Конечно, технически все это реализовать.

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

На рис.1 представлена веб-страница. Предположим, что это «набросок» сайта какой-либо фирмы. Как видно из рис. 1, изменяется только правая часть, где будет размещаться содержимое страницы. Остальные — верхняя часть, левая (навигация) и нижняя — остаются неизменными, они одинаковы для всех страниц сайта.

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

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

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

Грамотная и продуманная организация файловой структуры сайта позволит сэкономить время на его дальнейшей поддержке и сопровождении. Кроме того, она поможет легко ориентироваться в большом количестве файлов, из которых состоит веб-сайт. Особенно это важно при больших по объему сайтах или в тех случаях, когда сайт не очень большой (как в нашем примере), но вы планируете его дальнейшее развитие и добавление новых разделов.

Первая (стартовая) страница сайта получает, как правило, имя: index.html (для веб-сервера Apache); default.htm (для Microsoft IIS).
Остальные файлы именуются произвольным образом, но рекомендуется делать это в соответствии с назначением документа или его содержимым, например aboutme. html и mycat.html. Давайте папкам и файлам осмысленные названия (не следует давать имена типа 12345.html).
Именование каталогов и файлов допускается только в основной английской кодировке.
Картинки лучше размещать в отдельный каталог (/pictures/ или /images/). Если графики много, то внутри этого каталога создайте подкаталоги.

Рекомендуемая для нашего случая файловая структура сайта представлена на рис. 2.

Давайте подробнее его рассмотрим:

И еще несколько рекомендаций по именованию каталогов и файлов.

Именовать файлы и каталоги рекомендуется в нижнем регистре.

Имеются в виду отличия в именовании файлов в разных операционных системах. Они, например Unix, чувствительны к регистру букв в именах файлов и каталогов. В Windows регистр не имеет значения (About. html и about.html — для Windows один и тот же файл. Для ОС Unix это два разных файла).

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

Предположим, сайт компании, в которой вы работаете, находится у провайдера. Как правило (наиболее частый вариант), там установлены ОС Unix и веб-сервер Apache.

На своем персональном компьютере вы имеете копию сайта. Вероятнее всего, у вас установлена ОС Windows. Сделав нужные изменения и дополнения на локальной версии, вы переносите файлы на рабочий веб-сайт — к провайдеру. Тут вас и подстерегает опасность. Казалось бы, все работает. Вы все проверили и протестировали. Почему же после переноса файлов на сайте не видны некоторые картинки, не работают ссылки?

Совет. Внимательно следите за тем, чтобы регистр в названиях файлов и в ссылках, которые идут на эти файлы, совпадал. Например, если файл называется About.html, то ссылка на него О компании. Это касается и картинок, и всех случаев, когда указывается путь к файлу.

Продумать единый стиль в именовании файлов. Пример: pic_s.jpg - картинка небольшого размера (small) и pic_b.jpg. - это же изображение большего размера (big). Обычно с маленького изображения делается гипертекстовая ссылка на большое для более детального просмотра.

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

Понятие корня сервера и стартовой страницы

Перед изучением технологии SSI познакомимся с двумя очень важными понятиями: корень сервера и стартовая страница.

Корневой каталог или корень сервера. Обозначается / (косая черта, прямой слэш). Это каталог на диске компьютера, внутри которого находится все содержимое вашего сайта — файловая структура.

Получив такой запрос, сервер в корневом каталоге ищет каталог webschool и в нем файл webschool.htm.

Корневой каталог определяется в настройках сервера. По умолчанию в IIS это C:Inetpubwwwroot, в Apache, если вы устанавливали по умолчанию, — C:Program FilesApache GroupApachehtdocs (под управлением ОС Windows).

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

Какая именно страница — определяется в настройках сервера?

По умолчанию в IIS это default.htm, в Apache — index.html. Этот файл часто называют индексным.

Исходя из вышесказанного, я рекомендую вам входной файл в каталоге называть именем индексного файла. Например, если на сайте есть раздел о компании, то логично назвать каталог /aboutcompany/ и стартовую страницу этого раздела — index.html в случае Apache и default.htm в случае IIS.

Включения на стороне сервера. Директива include и создание шаблона страницы

Начинаем изучать технологию Server Side Includes (SSI). SSI — одна из первых серверных технологий. На уроке 1 мы познакомились с понятиями статичной и динамичной страницы. Статичная страница состоит из «чистых» html-кодов. Мы с вами уже научились создавать такие страницы.

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

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

Перед тем как начинать рассматривать синтаксис технологии SSI, настроим наш веб-сервер:

1) корень сервера;
2) поддержку SSI для файлов с расширениями .html и .htm. То есть файлы с этими расширениями перед отправкой клиенту будут проверяться сервером на наличие указаний (директив), которые сервер должен выполнять.

Настройка Apache-сервера

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

Hастройка корневого каталога узла (/)

Обратите внимание на прямые слэши (в отличие от обратных в ОС Windows).

Внутри каталога, который указывается в настройках сервера, вы и будете создавать файловую структуру своего сайта.

Настройка поддержки SSI

Поддержка SSI установлена для файлов с расширениями

.html и .htm. Добавлен тип документа AddType text/html .html (htm). Директива AddHandler активизирует обработчик серверных включений server-parsed.

И еще одна настройка. Найдите строку:

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.

Как говорилось выше, все страницы сайта имеют единое оформление. Соответственно для того, чтобы создать шаблон страницы, мы оставляем на ней только уникальные для нее элементы: название страницы

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

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

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

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

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

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

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

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

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

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

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

Изображения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В ходе изучения языка гипертекстовой разметки HTML мы узнали, что представляют из себя веб-страницы и научились логически размечать их структуру. Далее, когда мы научимся оформлять внешний вид страниц при помощи каскадных таблиц стилей, мы сможем начать верстать наши первые простейшие сайты и размещать их на локальном сервере или в Интернете. Однако прежде, чем двигаться дальше, давайте все-таки дадим определение понятию «сайт» , а также рассмотрим, как устроена его файловая структура, в которую помимо html -страниц входит достаточно большое количество других файлов и папок: js -скрипты, php -скрипты, различные служебные и вспомогательные файлы (например, .htaccess , favicon.ico , robots.txt , sitemap.xml и др.), а также обычные изображения, медиафайлы и некоторые другие файлы.

(от англ. site ) – это совокупность логически связанных между собой веб-страниц, находящихся в одном месте и воспринимаемых пользователями как одно целое. В Интернете сайт обычно идентифицируется по его уникальному доменному имени или IP -адресу и располагается на сервере в специально отведенной для него папке, которую называют данного сайта.

Формирование файловой структуры сайта

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

Конечно, никто не запрещает поместить все файлы сайта напрямую в корневую папку сайта, но когда количество файлов сайта начнет исчисляться сотнями или тысячами, разобраться в них при последующем редактировании содержимого и структуры сайта будет весьма проблематично. Поэтому все файлы нужно помещать в упорядочненную систему папок. Так индексный файл, который обычно является стартовой страницей сайта, принято помещать непосредственно в корневую папку сайта (см. рисунок №1 ). Именно его по умолчанию ищут браузеры при указании доменного имени сайта в адресной строке. Вместе с индексным файлом в корневой папке сайта располагают различные служебные файлы, например, favicon.ico (иконка сайта), sitemap.xml (карта сайта), robots.txt (служебный файл для поисковых роботов), .htaccess (конфигурационный файл), а также файлы подтверждения прав собственности сайта для поисковых машин и некоторые другие дополнительные файлы. Все эти служебные файлы мы рассмотрим более подробно в последующих пунктах данного параграфа.

Рис. №1. Пример содержимого корневой папки сайта

Что касается различных подключаемых к веб-страничкам скриптов и таблиц стилей, то для них можно создать отдельную папку, например, site_files , а уже в ней создать ряд вложенных папок, например, папку images для изображений, папку js для скриптов JavaScript , папку php_files для php -скриптов, папку site_styles для внешних таблиц стилей CSS и т.д. Отдельную папку логично завести и для различных расширений и модулей для сайта, назвав ее, например, modules . Соответственно для каждого подключаемого к сайту модуля нужно будет создать в ней отдельные подкаталоги. Чтобы было легко искать файлы, которые относятся к разным разделам сайта, также целесообразно предусмотреть отдельные каталоги. Главное, чтобы в итоге в корневой папке сайта было сформировано четко структурированное дерево каталогов, в котором будет удобно, быстро и легко искать необходимые для редактирования файлы и страницы.

Также хотелось бы отметить, что имена файлов и папок сайта желательно писать латинскими буквами в нижнем регистре и без пробелов. Если же имя файла или папки состоит из двух слов, то следует писать его через знак нижнего подчеркивания, например, site_files , а не site files . Эти два простых правила помогут избежать на ранних этапах освоения сайтостроения досадных ошибок, связанных с несовпадением регистра символов при обращении к файлу и возможно неправильным восприятием имени файла сервером при наличии в имени пробелов или русских символов.

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

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