Почему все файлы web страницы должны находиться в одной папке

Обновлено: 07.07.2024

WWW - World Wide Web - всемирная паутина - собрание гипертекстовых и иных документов, доступных по всему миру через сеть Internet.

Веб-сайт – одна или несколько связанных между собой веб-страниц.

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

HTML - Hyper Text Markup Language (язык разметки гипертекста) — язык, используемый для создания документов в Интернете. HTML позволяет формировать на странице сайта текстовые блоки, включать в них изображения, организовывать таблицы, управлять отображением цвета документа и текста, добавлять на сайт звуковое сопровождение, организовывать гиперссылки с контекстным переходом в другие разделы сервера или обращаться к иным ресурсам Сети и компоновать все эти элементы между собой. Файлы, содержащие гипертекстовый код, имеют расширение .htm или .html. Одной из основных особенностей, характерных именно для данного языка разметки, благодаря которой он и получил свое название, является гиперссылка.

Для просмотра html-документов необходимо специальное программное обеспечение, предназначенное для динамической обработки кода HTML и отображения web-страниц. Такие программы называются браузерами. Браузеры содержат встроенный транслятор языка разметки гипертекста, компилирующий html-код в процессе открытия web-страницы. При этом, обнаружив в тексте ошибку, такая программа не выдает соответствующего предупреждения (если страница не содержит встроенных скриптов Java), а попросту игнорирует всю ошибочную строку. Это следует иметь в виду, составляя HTML-код, поскольку можно ненароком пропустить незаметную ошибку и выявить ее наличие уже тогда, когда страница будет опубликована в Web. Следует также помнить, что интерпретаторы HTML, встроенные в различные браузеры, работают не одинаково, из-за чего один и тот же html-документ может отображаться в них по-разному.

Универсальный международный стандарт Unicode (UTF-8) был создан с целью объединения всех существующих на сегодняшний день национальных кодировок в одну. Поддержка Unicode требует замены части программного обеспечения, да и далеко не все клиентские программы умеют распознавать этот стандарт. Именно поэтому сегодня Unicode практически не используется в Интернете, это кодировка будущего.

Серверы могут быть разными, причем различия заключаются прежде всего в операционной системе, под управлением которой они работают. В настоящее время на большинстве интернетовских узлов используют два типа серверных программ: либо Internet Information Server, рассчитанный на работу под Windows NT, либо Apache, предназначенный для платформ, совместимых со стандартом UNIX. Как правило, серверы работают на линиях с большой пропускной способностью, например, в сетях с оптоволоконными каналами связи, что по финансовым соображениям доступно лишь крупным предприятиям. Помимо соответствующей программы сервер должен иметь собственный домен, т. е. адрес DNS, отвечающий стандартам Domain Name System.

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

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

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

Хостинг бывает нескольких видов:

Общий хостинг (Shared Hosting)
VPS (Virtual Private Server – виртуальный приватный сервер)
Облачный хостинг (Cloud Hosting)

Домен (доменное имя) – это адрес (имя) сайта в сети Интернет, состоящее из набора символов и цифр. Каждое доменное имя в Интернете является уникальным. Максимальная длина доменного имени (между точками) – 63 символа. Общая длина имени, включая поддомены, разделительные точки и имя зоны домена, может составлять до 255 знаков.

Домены делятся на несколько уровней:

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

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

Способности необходимые веб-дизайнеру:

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

В создании крупного сайта, как правило, участвуют несколько специалистов:

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

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

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

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

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

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

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

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

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

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

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

Изображения

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

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

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

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

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

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

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

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

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

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

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

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

сразу возникают две причины (чтобы сохранить как html, js, так и css отдельно):

оба css и js могут быть повторно использованы в нескольких html файлах, если они находятся во внешнем файле, но вам нужно скопировать один и тот же код на каждой странице, если это одна страница html + css + js. Если вы хотите, вы можете разработать новую версию кода, css или js, для онлайн-страницы, и когда вы закончите единственное, что вам нужно сделать, это изменить имя файла в элементе link или script в html. Это означает, что вы не повторяетесь

Размещение их в один css также означает, что легче находить стиль и объемную редактирование большого количества стилей html в одном месте.

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

Выделение синтаксиса/завершение кода/другие функции IDE (например, рефакторинг): это может частично работать с кодом внутри HTML файлов, но не все так хорошо. Таким образом, вы можете работать быстрее и фактически видеть ошибки, прежде чем они станут ошибками.

Cachability: хотя ваш HTML-код будет отличаться для всех страниц вашего сайта, ваши CSS и JS не будут, и было бы глупо перезагружать их для каждой страницы (что происходит, когда они помещаются непосредственно в HTML).

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

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

Генераторы CSS. Когда вы начинаете заботиться о минимальном дублировании кода, вы быстро устанете писать CSS, который полон дублирования, и переключитесь, например, на SASS (как, например, я сделал довольно давно). Для этого вам обязательно понадобятся отдельные файлы.

Итак, отвечая на ваш вопрос,

Да, для большинства веб-сайтов разделение их (например, mvc делает по умолчанию), скорее всего, ускорит ваше время загрузки. (в этом правиле появляется очень мало исключений, однако сайт с объявлениями стиля 1 или 2 может быть немного быстрее при размещении внутри html, но если вы когда-либо используете MVC, вы не будете оглядываться назад, чтобы не отделять их!)

На Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов - GIF, JPEG и PNG.

Вставка изображений. Для вставки изображения используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например:

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

Положение рисунка относительно текста. Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).

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

Рис. 6.28. Вставка изображения в Web-страницу "Компьютер"

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

Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:

1. Какой тэг и его атрибуты используются для вставки изображений в Web-страницы?

Задания для самостоятельного выполнения

6.12. Практическое задание. Вставить в Web-страницу "Компьютер" изображение и просмотреть ее в браузере.

Гиперссылки на Web-страницах

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

Гиперссылка создается с помощью универсального тэга <А> и его атрибута HREF, указывающего, в каком файле хранится загружаемая Web-страница:

<А HREF="Адрес">Указатель ссылки</А>

Если загружаемая в браузер Web-страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например:

<А HREF="f ilename . htm">Указатель ссылки</А>

Если загружаемая в браузер Web-страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например:

<А HREF="http://www.server.ru/Web-сайт/ filename. htm">Указатель ссылки</А>

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

Гиперссылки могут содержать адреса не только Web-страниц, но и файлов других типов. Активизация таких гиперссылок будет приводить:

Панель навигации по сайту. Создадим папку сайта "Компьютер" и добавим в сайт пустые страницы "Программы", "Словарь", "Комплектующие" и "Анкета". Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие "пустые" страницы должны иметь заголовки, но могут пока не иметь содержания:

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

Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами ( ). Такое размещение гиперссылок часто называют панелью навигации.

Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:

Гиперссылка на адрес электронной почты.Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер <ADDRESS>

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

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

Рис. 6.29. Готовая домашняя страница сайта "Компьютер"

1. Какой тэг и его атрибуты используются для создания гиперссылок?

Задания для самостоятельного выполнения

6.13. Практическое задание. Создать Web-страницу "Компьютер", содержащую панель гиперссылок на другие страницы сайта, и просмотреть ее в браузере.

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