Что такое статический веб-сайт, структура и как его создать? »WebNots
Как видно из названия, статические веб-сайты доставляют один и тот же контент при каждом посещении. Его можно определить следующим образом:
Статический веб-сайт или веб-страница — это набор элементов, таких как текст, изображения и мультимедийные элементы, содержащий размеченный контент, созданный с помощью языка гипертекстовой разметки (HTML) и хранящийся на веб-сервере.
webnots.com
Браузер получает контент с сервера, когда посетитель вводит URL-адрес статического сайта. Полученный контент затем интерпретируется, чтобы отобразить его как привлекательный сайт в окне браузера.
В основном как статические, так и динамические сайты работает аналогичным образом. Но большая разница в том, что статическая страница — это отдельная страница, содержащая всю информацию, а динамическая страница — это сборка из множества отдельных страниц. Вы можете ознакомиться со статьей на разница между статическими и динамическими веб-страницами для сравнения характеристик статических и динамических сайтов.
Основы статического веб-сайта
В этой статье мы обсудим следующие темы:
- Статические функции сайта
- Создание статической страницы
- Проверить образец страницы в браузере
- Подробная информация о статической веб-странице
- Создание живых статических сайтов
- Плюсы и минусы статических сайтов
1. Особенности статического веб-сайта
- Статический сайт в основном используется для передачи фиксированной информации с веб-сервера в браузер, работающий на клиентском компьютере.
- Все посетители будут видеть один и тот же контент каждый раз при загрузке страницы.
- Обычно статические сайты создаются с помощью языка гипертекстовой разметки (HTML), но не обязательно, чтобы все HTML-страницы были статическими. Например, код JavaScript, встроенный в страницу HTML, по-прежнему будет отображаться как страница HTML с расширением .html при открытии в браузере.
- Когда посетитель входит в URL в веб-браузере, запущенном на компьютере, браузер отправляет HTTP запрос к серверу. Веб-сервер просто отправляет HTTP-ответ, чтобы указать доступность запрошенного URL-адреса. Ответ будет завершен отправкой клиенту содержимого запрошенного URL. Обычно веб-сервер не выполняет никакой обработки кода на статической веб-странице. Графическое изображение браузера, отображающего статический контент веб-сайта, показано на рисунке ниже.
- Браузер интерпретирует размеченное содержимое и отображает его в окне браузера, чтобы придать веб-сайту вид и удобство. Все веб-браузеры имеют собственный способ интерпретации разметки HTML. По этой причине один и тот же веб-сайт выглядит по-разному в Chrome, Firefox, Safari, Edge и Internet Explorer. Веб-дизайнеры сосредотачиваются на разработке сайтов, которые выглядят одинаково во всех браузерах и платформах.
- Статический сайт больше подходит для распространения фиксированного контента, который не меняется со временем или не требует частого обновления.
- Как правило, владельцы сайтов сами создают и обновляют содержимое статических сайтов.
2. Создание простой статической веб-страницы
Для создания статической веб-страницы доступно множество готовых фреймворков. Например, Bootstrap — одна из популярных бесплатных платформ с открытым исходным кодом, которую вы можете использовать для создания статических веб-страниц. Однако создать статическую веб-страницу самостоятельно очень просто. Выполните следующие шаги, чтобы создать простую статическую веб-страницу.
В этом примере содержимое находится на вашем собственном локальном компьютере, поэтому отдельный сервер не требуется. (Это означает, что локальный компьютер действует как клиент, а также как сервер).
- Откройте любой текстовый процессор, в этом примере мы объясняем это с помощью Блокнота для операционной системы Windows. Вы можете использовать TextEdit, если используете Mac. Не используйте Microsoft Word или Apple Pages, это процессоры форматированного текста, не предназначенные для программирования. Вы можете использовать профессиональные инструменты, такие как скобки, для визуального упрощения кодирования.
- Скопируйте и вставьте приведенный ниже код в Блокнот.
<html> <head> <title>WebNots - Static Page Example</title> </head> <body bgcolor="#f1f1f1" text="Red"> <h1>Create Your Static Website</h1> Here is the content of your site. </body> </html>
- Сохраните файл как staticpage.html на вашем локальном рабочем столе.
- Откройте файл в любом браузере, например Chrome или Firefox. (Двойной щелчок по файлу откроет его в веб-браузере по умолчанию).
3. Внешний вид и ощущение веб-страницы
Ниже показано, как файл HTML будет выглядеть при открытии в Google Chrome.
Обратите внимание на содержимое исходного файла и его внешний вид в браузере. Браузер преобразовал все теги HTML и отображает только размеченное содержимое без пробелов между строками. Например, содержимое между тегами h1 интерпретируется как заголовок при отображении в окне браузера. Браузер загружает одно и то же содержимое каждый раз, когда вы открываете файл, так как интерактивная обработка не выполняется ни на сервере, ни на стороне браузера.
В реальном случае в Интернете файл HTML будет расположен на веб-сервере с именем страницы в домене, например «www.domain-name.com/staticpage.html«. Веб-страница откроется в окне браузера, когда посетитель вводит этот URL-адрес непосредственно в адресной строке браузера или когда этот URL-адрес перенаправляется из результатов поиска.
4. Подробная информация о статической веб-странице
Статическая веб-страница содержит всю необходимую информацию для отображения на этой странице. Давайте рассмотрим пример простой страницы блога с названием «blog-post.html», как показано ниже. Если эта страница является статической, тогда весь контент, относящийся к заголовку, области основного контента, нижнему колонтитулу и боковой панели, доступен на странице «blog-post.html». Вы можете щелкнуть правой кнопкой мыши и просмотреть источник страницы, чтобы найти все необходимые сведения.
5. Создание динамических статических сайтов
Самый простой способ создать живую статическую веб-страницу — создать HTML-страницу, как описано выше. Затем загрузите HTML-страницу и соответствующие связанные ресурсы, такие как изображения и таблицы стилей, на веб-сервер, используя протокол передачи файлов. Как уже упоминалось, существуют также предварительно скомпилированные фреймворки внешнего интерфейса, такие как Bootstrap, которые помогут вам быстро создавать статические страницы, повторно используя встроенные блоки. Вы можете просмотреть демонстрационный статический сайт Bootstrap с некоторыми динамическими скриптами для обработки данных форм.
Последний вариант — использовать инструменты для создания сайтов лайк Weebly, Wix и Yola. Все эти поставщики услуг предлагают бесплатные услуги с ограниченными возможностями. Вы можете перейти на платную услугу, чтобы получить полный набор функций. Большинство этих инструментов предлагают сочетание статических и динамических страниц для создания полноценного веб-сайта с большим количеством страниц.
Существуют продвинутые системы управления контентом, такие как WordPress, Joomla и Drupal, для создания более сложных динамических сайтов.
Связанный: Руководство по кодам состояния HTTP.
6. Преимущества и недостатки статического веб-сайта
Статические веб-сайты имеют много преимуществ в этом мобильном мире:
- Поисковые системы, такие как Google, любят статические веб-сайты, поскольку они загружаются очень быстро. Google также подталкивает владельцев сайтов к использованию ускоренных мобильных страниц (AMP), которые по своей природе статичны и эквивалентны динамическим страницам на компьютере.
- Чтобы повысить скорость загрузки страниц, владельцы сайтов используют кеширование для преобразования динамических страниц в статические.
- Стоимость создания и размещения статических сайтов в несколько раз ниже, чем управление динамическими сайтами.
В настоящее время у вас просто не может быть автономного статического сайта с фиксированным содержанием.
- Вам понадобится серверный скрипт для обработки писем и сбора данных с помощью контактных форм.
- На статических веб-сайтах невозможно предлагать индивидуализированный контент отдельным пользователям. Чтобы запустить сайт членства или подписки, вам сначала необходимо собрать, обработать и сохранить данные в базе данных. Вы не можете управлять этими вещами, поскольку статический сайт не будет иметь отдельной базы данных.
- Точно так же сайты электронной коммерции должны предлагать варианты продуктов и собирать платежи от клиентов, чего нельзя делать со статическим сайтом.
Вывод
Статические веб-сайты предлагают простое, но мощное представление контента. Это больше подходит для людей, создающих одноразовый контент с несколькими страницами, чтобы иметь веб-сайт для демонстрационных целей. Невозможно управлять статическим сайтом с сотнями страниц и предлагать индивидуальный контент разным пользователям. Вы должны выбрать соответствующие системы управления контентом для эффективного управления динамическими крупномасштабными веб-сайтами.
