Как добавить страницы на сайт html

Сайт на основе одной HTML-страницы

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

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

Архитектура: Frontend, статический HTTP-сервер, XmlHttpRequest (XHR), REST.

IDE: Notepad, Notepad++ (Windows), Gedit (Linux).

Совместимость: браузер должен поддерживать JavaScript и HTML DOM.

Суть приёма

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

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

Сперва подгружается HTML-страница. Затем определяется и подгружается файл контента. Имя файла контента прописано в URL HTML-ссылки и определяется по правилам REST. Подгрузка файла контента осуществляется через XHR.

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

Всё это немного напоминает SSI, только на Frontend-е.

Как это работает

Считать URL HTML-ссылки и определить параметры:

function getUrlParametr(parName) < var params = location.search.substring(1).split("&"); for (var i = 0; i < params.length; i++) < if (params[i].split("=")[0] == parName) < return params[i].split("=")[1]; >> return ""; > 

Количество и наименование параметров определяет разработчик, главное, чтобы в HTML-cтранице, был предусмотрен функционал по их обработке.

Загрузить и отобразить контент:

function loadXMLDoc(divName, contentFile) < var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange = function() < if (xmlhttp.readyState == 4 && xmlhttp.status == 200) < document.getElementById(divName).innerHTML = xmlhttp.responseText; // отобразить контент >> xmlhttp.open("GET",contentFile,true); xmlhttp.send(); > 

В параметре «id» задано расположение файла контента, которое определяется после загрузки HTML-cтраницы:

function onPageLoad() < var paramId = getUrlParametr("id"); if(paramId == "") paramId = "/xdata/news.htm"; // дефолтный контент loadXMLDoc("div_body",paramId); >

HTML-ссылка составлена так, что HTML-страница ссылается на саму себя, но с разными значениями параметра «id»:

Для добавления нового контента, надо просто создать файл контента и добавить HTML-ссылку. Расширение файла контента может быть любым, но будет удобнее, если оно будет соответствовать известному MIME-типу, например «txt» или «htm». Так будет проще перенести сайт на внешний ресурс.

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

Как вместо файла контента вставить HTML-страницу

Чтобы в базовую HTML-страницу вставить другую HTML-страницу, проще всего использовать HTML-тег iframe. В этом случае XHR не нужен. В URL надо добавить ещё один параметр, например «iframe», и обрабатывать его при загрузке базовой HTML-страницы:

function onPageLoad() < var paramId = getUrlParametr("id"); var paramIframe = getUrlParametr("iframe"); if(paramId == "") paramId = "/it/it-box.txt"; // дефолтный контент if(paramIframe == "" || paramIframe == "0") loadXMLDoc("div_body",paramId); if(paramIframe == "1") document.getElementById("div_body").innerHTML = " "; >

Ключевое отличие состоит в том, что файл контента встроится в DOM базовой HTML-страницы и будет обработан единым CSS, а HTML-страница, подгруженная в iframe, нет.

Когда HTML-страница расположена не в корне

Бывает нужно разработать не весь сайт, а, например, тематический раздел. Чтобы HTML-ссылки оставались актуальными, надо учитывать путь к разделу:

 function onPageLoad(rootPath) < var paramId = getUrlParametr("id"); var paramIframe = getUrlParametr("iframe"); if(paramIframe == "" || paramIframe == 0) < if(paramId == "") paramId = rootPath + "/it/it-box.txt" else paramId = rootPath + paramId; loadXMLDoc("div_body",paramId); >if(paramIframe == 1) "; > if(paramIframe == 2) "; > > > 

Так выглядит, например, код примера к статье на GitHub-е.

Готовый шаблон

Если остались вопросы, то можно посмотреть демо сайта (GitHub) и скачать шаблон сайта (GitHub). Демо и шаблон представляют собой готовый макет и наполнены безобидным контентом.

Разработку можно вести на любом статическом HTTP-сервере, установленном локально, а потом перенести «как есть» в любое место сети.

Сильные и слабые стороны

• Простота, мобильность, компактность кода.
• Нет привязки к технологиям и БД (роль БД выполняет файловая система). В основе — только открытые спецификации и стандарты.
• Просто создавать и сопровождать резервные копии (простым копированием).

• Frondend проигрывает Backend-у по функциональности. Сложная функциональность может оказаться значительно более трудоёмкой в разработке.
• В браузере должен быть разрешён JavaScript.

Как добавить страницы на сайт html

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

Предположим, что в конце последнего совета у нас получилась такая страница‑визитка — файл index.html с разметкой и стилями:

     ​ body < font-family: Helvetica; font-size: 18px; line-height: 20px; background-color: #000; color: #fff; >h1 < font-size: 32px; >p < max-width: 250px; opacity: 0.9; >.highlighted  
Иван Фубаров 
 
Дизайнер, руководитель, философ, любитель луковых оладий.
 
Помогаю бизнесу выглядеть подтянуто и стильно. Оптимизирую работу дизайнеров.





 
В свободное время занимаюсь йогой и гуляю с котом ��
  

Как страница попадает в интернет

Страницу можно открыть на своём компьютере, если перетянуть ХТМЛ ‑файл в браузер.

Чтобы другие люди могли открыть страницу, нужно, чтобы они так же могли обратиться к какому‑то компьютеру и «перетянуть» файл оттуда себе в браузер. Такой компьютер называется сервером.

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

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

Проще и надёжнее арендовать готовый настроенный сервер и загрузить туда страницу.

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

Аренда сервера

Услугу по аренде сервера называют хостингом. Видов хостингов много, они отличаются ценами и специализацией: кто‑то сдаёт простые сервера для несложных сайтов, а кто‑то предлагает мощные серверные кластеры для огромных проектов.

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

Бывают и бесплатные хостинги, но с ними нужно быть осторожнее. Обычно бесплатность компенсируется низкой надёжностью и встроенной рекламой сомнительного содержания. Хороший бесплатный вариант — это Гитхаб Пейджс, но разобраться с ним может быть сложнее, чем с обычными хостингами.

Популярные и зарекомендовавшие себя в рунете хостинги — Рег.ру, Таймвеб и Бегет.

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

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

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

Сначала регистрируемся, ищем в меню «Виртуальный хостинг», выбираем самый простой тариф:

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

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

У крупных хостингов обычно есть бесплатный пробный период

После выбора тарифа откроется панель управления. Отсюда можно оплачивать и управлять нашим хостингом.

Современные панели управления довольно дружелюбны и позволяют управлять хостингом без особых технических знаний. Тем не менее, нажимать незнакомые кнопки стоит с осторожностью :‑)

На одном арендованном хостинге можно разместить несколько своих сайтов, если позволяет тариф

В разделе «Сайты» добавляем сайт. Сайт в терминах хостинга — это, условно, выделенное в памяти место с файлами, данными и уникальным адресом. Адрес сайта называют доменом и на этом шаге он может выглядеть сложно и непонятно, чуть позже мы приведём его в порядок.

На одном арендованном хостинге можно разместить несколько своих сайтов, если позволяет тариф

В Таймвебе первый сайт создаётся сам при регистрации, ничего добавлять не надо:

Наконец, в разделе «Файловый менеджер» загрузим файл нашей страницы в папку сайта.

Название файла index указывает на главную страницу, она откроется по умолчанию при заходе на сайт по его адресу

В зависимости от хостинга, названия папок для загрузки файла могут быть public_html или www . Эти папки могут находиться сразу в файловом менеджере или в папке с названием сайта. Если в нужной папке уже лежит файл с названием index, его нужно удалить.

Название файла index указывает на главную страницу, она откроется по умолчанию при заходе на сайт по его адресу

Всё. Сайт уже доступен в интернете, но пока его адрес сложный и неудобный. Разберёмся, как сделать адрес удобным и красивым.

Адрес сайта

На один сайт может вести сколько угодно доменов

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

На один сайт может вести сколько угодно доменов

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

Доменная зона может влиять на продвижение сайта в поисковиках, но для простых некоммерческих проектов этим можно не заморачиваться и выбрать зону, которая больше нравится

Цена аренды зависит от доменной зоны — текста после точки в адресе. Адрес в распространённой русской зоне .ru обойдётся дешевле, чем в более солидной коммерческой зоне .com и гораздо дешевле, чем в экстравагантной зоне .xxx .

Доменная зона может влиять на продвижение сайта в поисковиках, но для простых некоммерческих проектов этим можно не заморачиваться и выбрать зону, которая больше нравится

Домены удобно арендовать у той же компании, что и хостинг. В Таймвебе купить домен можно во вкладке «Домены и поддомены», кнопкой «Зарегистрировать домен»:

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

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

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

Когда домен подобран и оплачен, его привязывают к сайту через раздел «Сайты» в панели управления. Вскоре после привязки, сайт начнёт открываться по нужному домену.

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Как добавлять новую страницу html на ASP.NET через админку?

Добрый вечер, допустим вот такая ситуация. Создал допустим сайт, у этого сайта соответственно должен быть админ для редактирования,добавления, удаления контента и т.д. Есть ли какие либо учебные материалы по добавлению новой страницы html через админку ? Что бы админ мог выбрать, как она должна выглядеть и тому подобное ?
Ну или дайте любую другую информацию, какая есть (:

• Вопрос задан 14 февр.
• 140 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 2

Василий Банников @vabka Куратор тега ASP.NET
Токсичный шарпист

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

Затем добавляешь какой-нибудь новый контроллер, у которого будет метод, который будет обрабатывать запросы вида GET something/ и будет находить нужную страницу по её page_name

Ответ написан 14 февр.
Комментировать
Нравится 1 Комментировать
Asp.net core, MAUI,WPF,Qt, Avalonia

Это типичная задача CMS. Только в них редко страница на чистом HTML добавляется. Обычно новая страница создаётся на основе предустановленных шаблонов и плагинов. Как всё это реализуется можно посмотреть на гитхабе в исходниках опенсорсных CMS.

Ответ написан 15 февр.
Комментировать
Нравится 1 Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• Веб-разработка
• +2 ещё

Будет ли аналитика сайта учитывать источник трафика, если в поле referer — strict-origin-when-cross-origin?

• 1 подписчик
• вчера
• 35 просмотров

Как я могу добавить новую страницу на свой сайт?

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

Чтобы добавить страницу:

1. В редакторе конструкторе сайтов нажмите кнопку Мои страницы.

1. Нажмите на кнопку + Добавить страницу.

1. Выберите шаблон страницы или добавьте пустую страницу, если вы предпочитаете создать ее с нуля.
   Примечание: все шаблоны соответствуют глобальному дизайну вашего сайта.

1. Введите имя вашей новой страницы. Вы также можете переместить ее в другое место.

Похожие статьи

Как я могу добавить контактную форму на свой сайт?

Как я могу добавить текстовый блок на свой сайт и управлять им?

Популярные ресурсы

Продукт

• Email-маркетинг
• ИИ-генератор писем
• ИИ-генератор кампаний
• Автоответчики
• Автоматизации маркетинга
• Конструктор сайтов
• Лендинги
• Формы и всплывающие окна
• Все возможности
• Интеграции
• Цены

Помощь и ресурсы

• Центр поддержки
• Служба поддержки
• Ресурсы по онлайн-маркетингу
• Истории клиентов
• Подкаст по автоматизации операций
• Библиотека вебинаров
• Бесплатные шаблоны писем
• Бесплатные шаблоны сайтов
• Сравнение сервисов
• Документация по API

Компания

• О нас
• Вакансии
• Партнерские программы
• Программа для агентств
• Для инвесторов
• Специальные возможности

Топ-контент блога

Pinterest – Мои Победы и Ошибки

Сервисы рассылок – полный обзор для новичков

Конструктор сайтов Тильда в 2022 году – преимущества и недостатки