Hi,
Hope everyone ready to start developing on Windows 8 ?? I'm sure it will be a great fun for you :)
Lets start from the base.
More styling will be post soon :) keep in touch..
Hope everyone ready to start developing on Windows 8 ?? I'm sure it will be a great fun for you :)
Lets start from the base.
Requirements
- Windows 8
- Windows 8 SDK
- Visual Studio 2012
Display Hello World on screen using HTML and JS
First of all ope Visual studio 2012 for start your windows 8 app development. And start a new project in Java Script.
Here some predefined templates are available, according to our use we can choose any of the template. Here i'm choosing Blank App.
Before you starting your project you should aware about the different interface and views of windows 8. The windows 8 is mainly developed for touch interfaces and it is compact able in all type of PC's or Tabs. For this Windows 8 sdk have some predefined features so we can use it for different alignments.
Now your VS looks like this. Your machine is ready for developing apps.
In the solution explorer you can see many files. Open "default.html" file for designing your app user interface (main page). Now you can see a page with pure html pages.
As same as a html page it has two parts.
Now your VS looks like this. Your machine is ready for developing apps.
As same as a html page it has two parts.
- Header
- Body
Header is to declare style sheets, js file, add title etc. In the body par we are coding the designs,styles and events for our application.
Find out the <body></body> part
And add the message to be displayed. Here i'm adding my message in a heading tag.So i'm adding the code
<h1>Hello World #AppsLabs</h1>
in the <body></body> part.
Now you can run your app in your Local machine. Just click the Run button in the menu bar to run your app.
Your output will be like the following image.
Now you can run your app in your Local machine. Just click the Run button in the menu bar to run your app.
Styling Your Message
Now the time to your message to your own ways.
For that we replacing the heading message (<h1>HelloWorld #AppsLabs</h1>) with
<div>Hello World #AppsLabs</div>
Now we will be able to customize our message. Here i'm placing the text to the center of the screen first.
For that i'm adding a style to the <div> tag. The code will looks like following.
<div style="text-align:center">Hello World #AppsLabs</div>
Now the output will be
Next step i'm going to increase the text size and changing the color of the text using div style.
Now the output will be like<div style="text-align:center; font-size:55px; color:#b6ff00;">Hello World #AppsLabs</div>
0 comments: