Exercise - Edit webpages
The purpose of this hands-on-lab is to edit webpage source code by using Power Apps portals Studio.
At the end of these exercises, you'll be able to:
- Open portals Studio to edit your portal.
- View the source code of a webpage section.
- Add your own HTML code directly to a portal page or section.
For this exercise, you'll need to have the following parameters in your environment:
- A Power Apps portal that is provisioned. If you don't have a Power Apps portal available, follow the Create Portal instructions to create one.
- Access to the Power Apps maker portal.
Scenario
To ensure a consistent website appearance and define the accessible content that can be located and indexed, it's important to be able to edit HTML content of a page. In this exercise, you'll add HTML code to the webpage copy section by using the Power Apps portals Studio Code Editor, and then you'll follow these processes:
- Open your portal in Power Apps portals Studio.
- Create a new landing webpage.
- Add HTML code that contains various elements such as headings, paragraphs, and so on.
- Save the page and browse the website to view the results.
Launch portals Studio
To launch the Power Apps portals Studio, follow these steps:
Sign in to Power Apps.
Select a target environment by using the environment selector in the upper-right corner.
On the left menu, select Apps.
Select your portal app (Type = Portal).
Select Edit, which will launch the portals Studio.

Locate the webpage
To locate the webpage, follow these steps:
Select New page.
Select Landing page layout.

Edit source code
To edit the source code, follow these steps:
Select column in the first section on the webpage canvas.
Select the Source code editor (</>) icon.

Insert the following HTML code into the content of the first column:
<h2>This is a large header title</h2> <p>This is a regular line of text</p> <p style="color: red;">This is red line of text</p> <p style="color: blue;">This is a blue line of text</p> <p style="font-size: xxx-large;">This is big text!</p>
Select Save.

You should see the formatted text on the canvas.

View the webpage
To view the webpage, on the Command bar, select Browse website. You should now see your page with the formatted text.
Потрібна допомога? Перегляньте наш посібник із виправлення неполадок або повідомте про конкретну проблему.