Write Your First Page¶

Create a static information panel. Define the content using HTML, set the layout and colors using external CSS, and finally preview it in the engine editor. After completion, you should be able to see a title, explanatory text, and a display area. Ready The status area.

1. Create the file directory¶

Establish the following structure in the Design-Time Directory:

first-page/
  pages/
    index.html
  styles/
    main.css

first-page/ serves as the Design-Time Directory for this example. You can adjust the folder name, but the reference path in HTML must match the actual file location.

2. Write HTML code¶

Save the following file as pages/index.html, encoded in UTF-8:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>First page</title>
  <link rel="stylesheet" href="../styles/main.css">
</head>
<body>
  <main class="panel">
    <h1>Hello, Markup UI</h1>
    <p>This page is loaded from an HTML document.</p>
    <div class="status">Ready</div>
  </main>
</body>
</html>

The main section contains the panel content. The class="panel" attribute is used to match the style rules. The link tag is used to import the style sheet: it returns to the parent level from pages/, and then enters styles/. Therefore, the path is ../styles/main.css.

This example uses static English text. No data context is required. ¹

3. Add CSS code¶

Save the following file as styles/main.css:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 24px;
  background-color: transparent;
  color: #edf4fa;
  font-family: sans-serif;
  font-size: 16px;
}

.panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  padding: 24px;
  background-color: rgba(27, 42, 56, 0.3);
  border: 2px solid #55b7ff;
  border-radius: 12px;
}

h1 {
  margin: 0 0 16px;
  font-size: 28px;
}

p {
  margin: 0 0 24px;
  line-height: 1.5;
}

.status {
  padding: 8px 12px;
  background-color: #55b7ff;
  color: #101820;
}

The body element uses a transparent background and Flex layout. The panel is centered on the page. Elements with class .panel are used to set the width, padding, and border of the panel. Elements with class .status are used to set the color of the status area. The max-width property limits the maximum content width of the panel. When the preview area is small, it is necessary to check whether the content can still be displayed completely.

You can directly download the HTML example and CSS example. Keep the above directory structure when saving the files.

4. Import the resources and preview the results¶

5. Verify the modifications¶

1. Change the HTML title text to Hello, Markup UI and save it. My First UI Change the border color in the CSS to
2. Change the border color in CSS to .panel Change the border color to #83d7ff Change the border color in the CSS to
3. Re-synchronize assets.
4. Reload the preview to check the title and border color.

Expected result: A dark-colored panel with a blue border is displayed in the center of the transparent page. Inside the panel, there are a title, description, and a light blue Ready status area. The status text is fixed text in HTML, and does not represent the loading status at runtime.

Common problems¶

Subsequent operations¶

• Display the page in the game: UE first game interface, Unity first game interface.
• Continue writing the page: HTML Document Structure, Layout and Sizing, CSS Styles.
• Use game data: Data Binding Overview.