First create a project in Visual Studio.

Go to File => New => Project and select Blank App (Windows Phone).

blank app

Then make a HTML file and CSS file. Then write the code that you want to display in the Windows Phone App.

The following is the HTML page code:

  1. <html>
  2. <link href="design.css" rel="stylesheet" type="text/css" />
  3. <body>
  4. <p class="first">This is demo for HTML page in Windows Phone App</p>
  5. <p class="second">My Name is : NeErAj KuMaR</p>
  6. <p class="third">My Image :
  7. <img src="neeraj.jpg" class="img" />
  8. </p>
  9. <p class="fourth">
  10. <a href="http://www.twitter.com/sainipray" >Follow On Twitter </a>
  11. </p>
  12. <p>
  13. <a href="https://plus.google.com/u/0/+NeErAjKuMaR1234" >See my Profile on Google+ </a>
  14. </p>
  15. </body>
  16. <html>
The following is the CSS file code:
  1. .first {
  2. background-color: Black;
  3. font-size: 20px;
  4. color: White;
  5. }
  7. .second {
  8. background-color: White;
  9. font-size: 30px;
  10. color: Black;
  11. }
  13. .third {
  14. background-color: GREEN;
  15. font-size: 20px;
  16. color: Yellow;
  17. }
  19. .fourth {
  20. background-color: Gray;
  21. font-size: 30px;
  22. color: RED;
  23. }
  25. .img {
  26. width: 100px;
  27. height: 100px;
  28. }
The following is the HTML page design in a browser:

HTML page design

Create a folder in the Asset folder in Solution Explorer and copy the HTML and CSS files and one image to the new folder.

HTML

Then open the MainPage.xaml file and drag a ”WebView” element from the Toolbox to the Windwos Phone App GUI.

The following is the MainPage.xaml file code:
  1. <Page
  2. x:Class="HTMLAPP.MainPage"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:local="using:HTMLAPP"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. mc:Ignorable="d"
  9. Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  10. <Grid>
  11. <WebView HorizontalAlignment="Left" Height="620" Margin="10,10,0,0" VerticalAlignment="Top" Width="380"/>
  12. </Grid>
  13. </Page>
Create a Loaded Event on “WebView” as in the following:

properties

Add code to the WebView event:
  1. private void WebView_Loaded(object sender, RoutedEventArgs e)
  2. {
  3. Web.Source = new Uri("ms-appx-web:///assets/HTML/demo.html"); ;
  4. }
Debug this project and the output is:

output