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

:

Замените выделенный путь к файлу на относительный путь к вашему файлу about.html. Относительный путь определяет расположение файла относительно текущего рабочего каталога (в отличие от абсолютного пути, который определяет расположение файла относительно корневого каталога). Если вы используете текстовый редактор Visual Studio Code, вы можете скопировать относительный путь к файлу, нажав CTRL и кликнув левой кнопкой (на Mac) или правой кнопкой мыши (в Windows) по файлу и выбрав Copy Relative Path.

Обратите внимание, что мы также указали размер шрифта и цвет, используя атрибут style. Сохраните файл index.html и перезагрузите его в браузере.

Теперь у вас должна быть ссылка, которая ведет на вашу веб-страницу about.html.

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

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

Добавление страниц на ваш сайт

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

Подсказка:

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

Ключевой рабочий процесс

Создание страницы

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

1. Откройте сайт в режиме редактирования.
2. На боковой панели щелкните кнопку страниц .
3. Щелкните Новая страница , введите имя страницы и щелкните Далее .

Примечание:

Указанное имя также используется для автоматического создания URL-адреса страницы. Пробелы заменяются дефисами, а все специальные символы удаляются. Все URL-адреса страниц начинаются с /pages/ . О редактировании URL-адреса см. Редактирование URL-адреса страницы.

Элемент Site Page добавлен на портал и автоматически опубликован для группы основной команды сайта. Более подробно о том, кто может видеть и редактировать страницу, см. Публикация страниц.

Открытие страницы в режиме редактирования

Чтобы отредактировать страницу, выполните следующие действия.

Из окна браузера

Чтобы открыть страницу в режиме редактирования из браузера, выполните следующие шаги:

1. Откройте URL страницы в новом окне браузера и щелкните Войти на глобальной панели навигации сайта.
2. Щелкните кнопку редактирования , чтобы открыть редактор сайтов.

Примечание:

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

Из Sites

Если глобальная навигация отключена для сайта, вы можете открыть сайт в приложении Sites:

1. Войдите в Sites.
2. На странице Обзор щелкните Управлять в карточке Cайты .
3. Щелкните на странице сайта, чтобы открыть редактор сайта.
4. Нажмите кнопку и выберите страницу из списка страниц сайта.

Из портала ArcGIS Enterprise

Чтобы открыть сайт в режиме редактирования из портала ArcGIS Enterprise , выполните следующие шаги:

1. Войдите в ArcGIS Enterprise .
2. Найдите элемент сайта Страница сайта в разделе Ресурсы .
3. Щелкните элемент, чтобы открыть Информацию об элементе и щелкните Настроить приложение .

Добавление существующей страницы

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

Примечание:

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

1. Откройте сайт в режиме редактирования.
2. На боковой панели щелкните кнопку страниц .
3. Щелкните Страница ссылок , щелкните на имени страницы и укажите Выбрать .
4. Дополнительно, обновите slug страницы.
5. Щелкните Страница ссылок .

Для просмотра страницы щелкните на ее имени на боковой панели в списке ниже Главной .

Включение краткой информации о странице

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

Примечание:

Страницы обнаруживаются в результатах поиска сайта в коллекции Документы . Это изменить нельзя.

Редактирование URL-адреса страницы

Текст в конце URL-адреса страницы называется «описательная часть (slug)». Вы можете изменить описательную часть, если хотите, чтобы она содержала что-то, отличное от имени страницы. Полный URL-адрес страницы будет в следующем формате: https://webadaptorhost/webadaptorname/apps/sites/#/your-site-name/pages/page-name .

Примечание:

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

1. Откройте сайт в режиме редактирования.
2. Щелкните кнопку страниц .
3. В списке страниц щелкните страницу, которую хотите редактировать.
4. Щелкните Информация о странице .
5. Введите описательную часть (слаг) в поле Описательная часть страницы .
6. Щелкните Сохранить и опубликуйте ваши изменения.

Добавление ресурсов на страницу

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

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

Примечание:

Однако вы не можете редактировать верхний или нижний колонтитул страницы,так как они унаследованы от сайта страницы.

1. На боковой панели щелкните кнопку страниц в правом верхнем углу.
2. В списке страниц щелкните страницу, которую хотите редактировать.
3. В редакторе страниц перетащите карточку строки в компоновку страницы, чтобы начать оформление страницы.

Подсказка:

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

Публикация страниц

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

Примечание:

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

Добавление ссылок меню

Добавьте ссылки на страницу с сайта или других страниц при помощи ссылок меню или HTML.

Использование ссылок меню

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

Используйте HTML

1. Добавьте текстовую карту или откройте существующую карту на макете страницы и щёлкните Вид кода на панели инструментов.
2. Вставьте тег там, где должна быть ссылка.
3. Вставьте слаг для страницы, которую вы хотите добавить, между атрибутом href=»» вашего тега , например, Visit the linked page .
4. Щелкните Сохранить на панели навигации редактирования, чтобы подтвердить изменения, и щелкните Просмотреть , чтобы протестировать новую ссылку.

Подсказка:

Для того, чтобы эта ссылка была открыта в новой вкладке, добавьте target=»_blank» сразу после своего атрибута href в теге .

Окончательное удаление страницы

Если вы хотите совсем удалить страницу, щелкните кнопку удаления . Элемент Site Page будет окончательно удален из ArcGIS Enterprise и всех других групп, для которых он был опубликован.

В этом разделе

1. Ключевой рабочий процесс
2. Создание страницы
3. Открытие страницы в режиме редактирования
4. Добавление существующей страницы
5. Включение краткой информации о странице
6. Редактирование URL-адреса страницы
7. Добавление ресурсов на страницу
8. Публикация страниц
9. Добавление ссылок меню
10. Окончательное удаление страницы

Что такое HTML импорт и как это работает?

Перевод статьи «What are HTML Imports and How Do They Work?», Paula Borowska.

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

Введение в HTML импорт

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

Интересно то, что HTML это самые простые файлы, но иногда с ними труднее всего работать. Даже PHP файлы имеют возможность включения, почему же HTML этого не может? Благодаря веб-компонентам, мы, теперь, можем включать одни HTML документы в другие. Также, при помощи этого же тега, мы можем подключать CSS и JavaScript. (Жить стало намного лучше.)

Обходные пути

Раньше, одним из обходных путей было подключение при помощи iFrame; это тяжелые HTML элементы, загружаемые отдельным окном внутри текущего документа. Это немного не то, что нам нужно и при этом с ними, не очень то легко взаимодействовать. iFram’ы могут быть удивительно разочаровывающими, когда с ними приходится работать. Следующим вариантом был AJAX, это когда вы загружали страницу при помощи JavaScript и включали её контент. Это, на самом деле, довольно неудобный и утомительный способ.

Начнём

Базовый синтаксис

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

Такие строки помещаются в шапке, как вы уже привыкли поступать с JavaScript или CSS файлами.

Базовый пример

Чтобы импорт сработал, страницы должны находиться на одном и том же сервере. Начнем с файла index.html. Это простая HTML страница с базовым импортом:

      
Hello from Designmodo
   

Видите, я не врала о том, как все просто; это так же просто, как загрузка таблицы стилей или JavaScript-файла.

Внутри intro.html

Что же внутри импортированной страницы?

 
We're an awesome blog about web design
 
Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.
 
 

Это просто div с текстом внутри. Не нужно body или head или чего-то ещё.

Вставка импортированного HTML

Чтобы отобразить импортированный HTML, нам нужно написать несколько строчек на JavaScript. Этот код должен находиться в главном HTML-файле, в нашем случае, index.html. Данный код должен находиться в том месте, где мы хотим увидеть импортированный html. В нашем примере после ‘Hello from Designmodo.’

В нашем скрипте мы получаем контент и присваиваем его переменной. Потом мы просто добавляем содержимое переменной в HTML.

      
Hello from Designmodo
    

Переходим на следующий уровень

Вы когда-нибудь слышали о CSS атрибуте scoped? Атрибут scoped позволяет вам ограничивать действие тега

 внутри элемента. Хорошо то, что scoped стили действуют только внутри элемента, в котором они заданы, а не во всем документе. Посмотрим, как атрибут scoped может помочь при работе с импортированными HTML-файлами. 
 
Добавим h1 в импортированный документ, чтобы увидеть разницу между стилями импортированного файла и стилями index.html. Потом добавим стиль элементам импортированного HTML документа. Как видите находится внутри импортированной разметки, а не в head теге. Благодаря scoped, стили применятся только к h1 внутри импортированной разметки. 
 
 
 h1 < color: red; >p About us 
We're an awesome blog about web design
 
Designmodo is a great resource of informative material for designers and web developers. We are makers of highly-rated User Interface Packs, you can get acquainted with Designmodo shop here, and you can download a couple of other ui packs for free.





 
 

Если хотите почитать побольше об атрибуте scoped, посмотрите, что говорит W3C.

Это немного похоже на Bootstrap

Bootstrap, это набор отдельных файлов, как bootstrap.css, boostrap.js и тд. Для плагинов, используется jQuery; Bootstrap предоставляет примеры верстки. Он очень гибок и прост в использовании. Суть Bootstrap в том, что вы можете использовать только необходимые для вашего проекта файлы. Большинство людей загружают все файлы сразу, и это тоже нормально. Идея HTML импорта та же, вы подключаете файлы по мере надобности. Эта логика становится популярной, из-за ускорения загрузки и упрощения организации.

Заключение

Благодаря HTML импорту, вы можете выносить HTML, как и CSS или JavaScript, в отдельные файлы. Это, на самом деле, очень круто. Включение HTML-файлов друг в друга не было простым, до появления HTML импорта. Теперь мы можем создавать повторно-используемый контент, подключаемый одной строкой кода. Это очень мощная вещь — и это круто!

Как сделать ссылку

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега , который имеет единственный обязательный атрибут href . В качестве значения используется адрес документа (URL).

Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные ссылки начинаются с ключевого слова http:// (пример 1).

Пример 1. Использование абсолютных ссылок

      
Поисковая система Яндекс
  

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

Примеры относительных адресов

/
/demo/ Эти две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге.

/images/pic.gif Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.

../help/me.html Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта.

manual/info.html Если перед именем папки нет никаких дополнительных символов, вроде точек, то она размещена внутри текущего каталога (пример 2).

Пример 2. Использование относительных ссылок

      
Посмотрите на мою фотографию!
 
Как сделать такое же фото?
  

Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html . Точка со слэшем (символ /) означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html .