Show TOC

Step 1: Hello World!Locate this document in the navigation structure

As you know SAPUI5 is all about HTML5. Let’s get started with building a first “Hello World” with only HTML.

Preview
Figure 1: The browser shows the text "Hello World"
Coding

You can view and download all files in the Explored app in the Demo Kit under Walkthrough - Step 1.

webapp/index.html (New)
<!DOCTYPE html >
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Walkthrough</title>
   </head>
   <body>
      <p>Hello World</p>
   </body>
</html>

Create a new folder webapp which will contain all sources of the app we will create throughout this tutorial. Therefore, we refer to this folder as “app folder”.

Now create a new root HTML file called index.html in your app folder. An HTML document consists basically of two sections: head and body. The head part will be used by the browser to process the document. Using meta tags we can influence the behavior of the browser.

In this case we will tell Microsoft Internet Explorer to use the latest rendering engine (edge) and the document character set will be UTF-8. We will also give our app a title that will be displayed in the browser. Be aware that our hard-coded title can be overruled by the app, for example to show a title in the language of the user.

The body part describes the layout of the page. In our case we simply display “Hello World” by using a p tag.

Tip

Typically, the content of the webapp folder is deployed to a Web server as an application package. When deploying the webapp folder itself the URL for accessing the index.html file contains webapp in the path.

Conventions
  • Name the root HTML file of the app index.html and locate it in the webapp folder.