Work with webpages

Add content to pages

After a page has been created, you can add content, such as text, tables, images, and links to other pages or websites. When you have finished entering your content, save the page. You can re-edit any page at a later time as necessary.

Modify pages

To prevent two people from editing a page at the same time, anyone intending to modify content should always check out the page before he or she begins. When you edit a publishing page, the page is automatically checked out to you. You must check out wiki pages and web part pages yourself.

The Pages library, where publishing pages are stored, is configured for major and minor (draft) versions. Only users who can edit items can see the draft items; therefore, after you have checked in a page, the page must be published as a major version before visitors to the site can see the amendments you have made to the page.

As you modify a page, you might find that the layout you originally chose does not now suit the content you want to display. On both wiki pages and publishing pages, you can change the page layout.

To activate a wiki or publishing page for editing

1. Go to the page that you want to edit, and then do one of the following:

• On the Settings menu, select Edit page.

• In the upper-right corner of the page, select Edit.



Use the links in the upper-right corner to share a site, follow a site, edit a page, or focus on content

• On the Page tab, select Edit.



Click to view larger image

Use the Page tab to edit and check out a page

To check out a wiki page

1. On the wiki page, on the Page tab, select Check Out. A yellow notification area is displayed at the top of the page, stating that the page is checked out and editable.



The yellow notification area at the top of a page is used to display the page status

To check in a wiki page

1. On the wiki page, on either the Page tab or the Format Text tab, do one of the following:

• If you have the page checked out, to check in your changes, select Check In.

• If you have the page checked out, to discard any changes you have made to your checked out version and release the checkout, select the Check In arrow, and then select Discard Check Out.

• If the page is currently checked out to another user and you have the Override List Behaviors permission, which allows you to check in the page and discard any changes that user might have made to the checked-out version, select Override Check Out.



Click to view larger image

Use the Check In menu to check out, check in, discard a checkout, or override a checkout

To check in and publish a publishing page

1. On the publishing page, do one of the following:

• In the yellow notification message, select Check it in.



Click to view larger image

The yellow notification area displays the status of the page and allows you to check in the page

• Use one of the options described in the previous procedure, “To check in a wiki page.”

2. In the Check In dialog, enter a comment, and then select Continue.

3. Do one of the following:

• In the yellow notification message, select Publish this draft.

• On the Publish tab, select Publish.

To save or discard your modifications to a wiki or publishing page

1. After you have added content to a page, do one of the following:

• To the right of the tabs, select Save.



When you edit a page, the upper-right Edit link is replaced with Save

• If you are done adding content to the page, on the Page tab or the Format Text tab, select Save.

• If you want to save the content you have added so far but intend to continue adding content to the page, on the Page tab or the Format Text tab, select the Save arrow and then select Save and Keep Editing.



Use the Save split button to save, keep editing, or discard your modifications

• On the Page tab or the Format Text tab, select the Save arrow, and then select Stop Editing. You will then be prompted to save or discard the content you have added to the page. To discard your modification, select Discard changes.



Click to view larger image

Use the Save Changes dialog to save or discard the changes you have made to a page, or select Cancel to return to editing the page

Format and display content

SharePoint provides you with a What You See Is What You Get (WYSIWYG) environment for adding content to your pages. When a wiki page or publishing page is in edit mode and the cursor is within the body of the page, two tabs are displayed: Format Text and Insert.

The commands on these tabs are similar to the commands on the Home and Insert tabs in Word: you use them to format the text, check spelling, and control the layout of the page, and to insert tables, images, videos, audio, hyperlinks, app parts, web parts, and embedded code.

You can also use keyboard shortcuts similar to those in other Office programs. If a tab command has a keyboard shortcut, you can display it by pointing to the command on the tab to display the screen tip.

The Format Text tab

The Format Text tab contains ribbon groups you will not find on the Home tab in Word. These include:

• Layout This group appears on the Format Text tab only for wiki pages. Use the Text Layout command to create additional editing areas and to change the structure of your page. You can reformat the page by using any of eight options. For publishing pages, the Layout group is on the Page tab. Developers can create additional publishing page layouts, but no additional wiki page layouts can be added to SharePoint.



Click to view larger image

You can control the layout of a wiki page

• Markup This group provides four commands:

• Edit Source Selecting this command opens a dialog that contains a plain-text box in which you can enter HTML code. The text box displays the HTML tags for the content area where the cursor was located before you selected Edit Source. For example, if your wiki page has a two-column layout and the cursor is in the left column when you select the command, only the HTML for the left column is displayed in the dialog. You will need to know HTML to use this method of entering content on your page, because no IntelliSense help is provided; therefore, you might find it easier to use an HTML editing tool to create the content, and then paste it into the text box. To prevent the entry of malicious code, SharePoint does sanitize user-entered HTML content, so you might find that some of the code you enter is removed when you save the page.

• Languages When you create a SharePoint site, it has a default language. When you enter text in a different language, you can select the text and use this command to tag the language of the text. The SharePoint search functionality can then identify pages that include text in specific languages; some screen reader programs, such as the Job Access With Speech (JAWS) screen reader, use this so they can pronounce words correctly when they read them aloud.

• Select Use this command to select the HTML tag you want to work with. For example, to edit the HTML for a row in a table, place the cursor in a cell in the row, and then select the Select command to display the list of HTML tags that apply to that row, including the row itself and any parent HTML tags, such as for the table or the entire content area. A red dotted line surrounds the area related to the HTML tag when you point to each tag in the Select list. To format or style the row, select the HTML for just the row.

• Convert to XHTML Most SharePoint pages adhere to and generate HTML to the XHTML 1.0 Strict specification; however, when you use the Edit Source command to create HTML, you might introduce errors into the page. By using this command, you might be able to fix those errors.

The Insert tab

The Insert tab also contains ribbon groups you will not find on the Insert tab in Word. These include:

• Media This group contains two split buttons:

• Picture Use this command to insert a picture from your computer, to reference a web address where a picture is stored, or to reference an image that is stored in a SharePoint library.



Click to view larger image

Use the Picture split button to insert a picture on the page

Use the first option, From Computer, when you have stored your image on the hard drive of your computer—for example, drive C. The default location to store images that you use on pages is the Site Assets library; however, you can choose a different library on the site.

TIP

The Site Assets library is the place to store files that are needed to brand a site, such as the image files used to display pictures on pages or files that contain team or company information. These are usually not files that team members will collaborate on, so they should be saved in the Site Assets library rather than in, for example, a document library.

Selecting the second option, From Address, opens the Select Picture dialog, in which you must manually enter or paste the URL of the image. To avoid incorrectly entering the URL for the image, which would result in a broken link, open another browser window or tab, navigate to the picture, copy the URL, and then paste the URL into the Address box in the Select Picture dialog.

Selecting the From SharePoint option opens the Select An Asset dialog, which you use to navigate to a SharePoint library where you have previously uploaded an image.

• Video and Audio Use this split button to display video and audio on your page. This command provides the same three options as the Picture split button, plus a fourth option, Embed. Using the Embed option is the same as using the Embed Code option in the Embed group on the Insert tab, which is described later in this section.

• Content This group appears on the Insert tab only on publishing pages and is detailed in the “Reusable content” section later in this topic.

• Parts This group contains two commands, App Part and Web Part. The insertion and configuration of these two components is detailed in “Use app parts and web parts” later in this chapter.

• Embed This group contains the Embed Code option, which you can use to embed HTML code to display content not stored in SharePoint, such as content from Bing Maps, Vimeo, and YouTube. Most of these sources provide methods of generating the HTML code you need to embed in your page.

You can also use this option to display the contents of Word, Excel, or PowerPoint files, when Office Online Server (OOS) is installed in your organization. OOS is a separate product from SharePoint; organizations can use it to deliver browser-based versions of Word, PowerPoint, Excel, and OneNote files, among other capabilities.

See Also

For more information about embedding Office documents and PDF files on a website, see “Embed Office documents and PDF files on a website” at https://aka.ms/Yx8n5e. For information about embedding an Excel workbook on a webpage, see “Embed your Excel workbook on your web page or blog from SharePoint or OneDrive for Business” at https://aka.ms/K4c5l6.

The embedded code is stored in an HTML iFrame tag, which means that your browser can display content stored in SharePoint immediately and it will display the content from the external source when it receives it. If the network connection to the external source is poor or the external source is not responding, you might have unexpected results. For example, if your source is a video source, you could end up with a blank video area on the page, or video buffering or playback problems. When this occurs, it is important to recognize that it is not a SharePoint issue; you must investigate the network connection and the availability of the external source.

Contextual tabs

When a component has been inserted onto a page and is selected, additional contextual tabs might be displayed. For example, if an image on a page is selected, the Image contextual tab is displayed. You can use the commands on the Image tab to replace the image, enter alternative text, format the borders of the image, position the image on the page, and reduce the area on the page used to display the image.

On publishing sites, you need not optimize your images before uploading them into SharePoint, because such sites can use image renditions, as long as your server administrator has configured their use. An image rendition is an optimized, scaled variant generated from the original image. By default, there are four rendition display templates; therefore, after you upload an image, you have the choice of five image sizes on your page: the original size of the image, and a rendition for each display template. You can change the renditions that SharePoint has generated, and if you are a site owner, you can add new rendition display templates.

To format text on a page

1. On the page whose content you want to format, activate edit mode.

2. On the Format tab, use the commands to format the content as you want.

TIP

The commands in the Edit, Clipboard, Font, Paragraph, and Styles groups work the same as in any other Office program.

3. Save or save and publish the page.

To change the layout of a wiki page or a publishing page

1. On the page whose layout you want to change, activate edit mode.

2. Do one of the following to display a list of page layouts:

• If the page is a wiki page, on the Format Text tab, in the Layout group, select Text Layout.

• If the page is a publishing page, on the Page tab, in the Page Action group, select Page Layout.

3. Select a layout.

4. Save or save and publish the page.

To insert a picture, video, or audio

1. On the page where you want to display the picture, video, or audio, activate edit mode and position the cursor where you want to add the image or file.

2. On the Insert tab, select the Picture button, and then do one of the following:

• If the file is on your computer, select From Computer to open the Upload Image dialog, select Browse, navigate to the location on your computer where the file is stored, and select Open. In the Destination list, select the library where you want to upload the file, and then select OK.

• If the file is on the web, select From Address to open the Select Picture dialog. Enter the web address for the file you want to use, enter alternative text for the file, and then select OK.

• If the file is already in SharePoint on your site, select From SharePoint to open the Select an Asset dialog, navigate to the folder or library where the file is stored, select the file, and select Insert.

Or

On the Insert tab, select the Video and Audio button, and then do one of the following:

• If the file is on your computer, select From Computer to open the Upload Media dialog, select Browse, navigate to the location on your computer where the file is stored, and select Open. In the Destination list, select the library where you want to upload the file, and then select OK.

• If the file is on the web, select From Address to open the Link Media dialog. Enter the web address for the file you want to use, and then select OK.

• If the file is already in SharePoint on your site, select From SharePoint to open the Select An Asset dialog, navigate to the folder or library where the file is stored, select the file, and select Insert.

3. Save or save and publish the page.

To format a picture, video, or audio on a page

1. On the page where you want format a picture, video, or audio, activate edit mode.

2. On the Image or Media tab, use the commands to format as you want.

3. Save or save and publish the page.

To insert and edit HTML markup

1. On the page where you want to insert and edit web-related code—for example, if you want to insert new HTML tags or modify the properties of the HTML tags—activate edit mode.

2. Do one of the following:

• To amend code that was generated by using the Format or Insert tab, place the cursor in the content area where the content is displayed, and then on the Format Text tab, in the Markup group, select Edit Source. Amend or enter the code, and then select OK.

• To insert new code that is not directly related to content you inserted by using the Format or Insert tab, such as JavaScript or HTML code snippets, on the Insert tab, in the Embed group, select Embed. Enter the code, and select Insert.

3. Save or save and publish the page.

To embed code from another source into a page

1. Navigate to the source of the content (for example, a Bing Map or a YouTube video), and use the source site’s tools to generate the code you want to embed.

2. Copy the code to the clipboard.

3. Go to the SharePoint page on which you want to display the content, and activate edit mode.

4. On the Insert tab, do one of the following to open the Embed dialog:

• Select the Video and Audio arrow, and select Embed.

• In the Embed group, select Embed Code.

5. In the text area of the Embed dialog, paste the code from the clipboard, and then select Insert.

6. Save or save and publish the page.

Reusable content

On publishing pages, the Insert tab has an extra command, Reusable Content, that you can use to add predefined content to your page—for example, a copyright, a byline, or a quote, such as your company’s mission statement. Reusable content is stored in the Reusable Content list at the top-level site of a site collection and can consist of blocks of plain text and HTML elements, such as formatted text, images, tables, and lists. You can use this functionality to create content once, and then allow users who edit pages to reuse these pieces of content.

In the Reusable Content list, you can create categories and folders to help you organize the reusable content items. The items can be designated as automatically updated or not:

• Automatically updated items The reusable content is inserted into the page as a read-only reference. When the item is changed in the Reusable Content list, the page content is changed.

• Not automatically updated items The reusable content is copied in the page. The page is not updated if the reusable content item is updated in the list.

To create a reusable content category

1. Navigate to the top-level site of your site collection, and then on the Settings menu, select Site contents to display the Site Contents page.

2. Select Reusable Content to display the default view of the Reusable Content list.

3. On the List tab, in the Settings group, select List Settings.

4. Under Columns, select Content Category.

5. On the Edit Column page, under Type each choice on a separate line, enter a name for your new category.

6. At the bottom of the page, select OK.

To create a reusable content item

1. On the Site Contents page, select Reusable Content.

2. Do one of the following:

• Select new item to create a new reusable HTML item.

• On the Items tab, select the New Item arrow, and then do one of the following:

• To insert plain text, select Reusable Text.

• To insert another type of content, such as rich text or an image, select Reusable HTML.

3. Do the following:

1. In the Title box, enter the title of the reusable content item.

2. In the Content Category list, select a category.

3. If you want the item to be inserted in a page as a read-only reference, select Automatic Update; otherwise, leave this check box cleared.

4. Enter the reusable content.

5. If you chose to create a reusable HTML item, format the text and insert HTML elements.



Click to view larger image

Use reusable content for content that you find you have to create again and again

4. Select Save.

To use a reusable content item on a publishing page

1. On the publishing page where you want to use the reusable content, activate edit mode.

2. On the Insert tab, select Reusable Content, and then select the reusable content item you want to add to the page.