UWP: Making Your First UWP App Using HTML And JavaScript

How to make your first UWP Application using HTML and JavaScript ?

If you have had experience in HTML and JavaScript and always wanted to dive in Application Development, you’re at the right place. With the advent of UWP(Universal Windows Platform), you can now leverage what you have already learnt and make awesome applications for Windows Desktop and Mobiles. Without even wasting even a second, let’s jump right into the cool stuff.

Let’s make our first “Hello World” UWP Application using HTML and JavaScript.

Step 1: Open Visual Studio -> Click on File -> New -> Project. Then click on JavaScript -> Windows -> Universal and select Blank App(Universal Windows) Template, Give the Name and Path as you like and hit OK as shown below.

Step 2: You should see the following structure in solution explorer.

Step 3: Now open the index.html and view the contents of it. It should look something like this:

Step 4: Put whatever you want instead of “Content goes here!” (see highlighted part in the previous step). 

Step 5: That’s it! Now run the Application on Local Machine (your PC or Laptop) or on a Windows Phone and the results will be like this:

On PC/Laptop:

On Windows Phone:

You must be wondering how the application navigates to “index.html”. Well, just open the “package.appxmanifest” and have a look at it.You can see the Start Page points to the “index.html”. Likewise you can point to a local(Within your App) Web page or even a hosted Web Page(e.g. www.yourwebsite.com) and the application will open that Web Page when it launches.

As you can see, how easy and intuitive it is to develop an App using HTML and JavaScript on the Universal Windows Platform (UWP). I encourage you to explore more on this topic and stay tuned for more articles to follow. Cheers!

You can download the source code from the following link:

Download Hello World JS App

HOW TO ADD IMAGES TO MY WEBSITE/HTML SCRIPT

HOW TO ADD IMAGES TO MY WEBSITE/HTML SCRIPT 

This is the fifth tutorial of HTML.Earlier tutorials are as follows:

1.BASIC HTML SCRIPT

2.BACKGROUND OF AN HTML PAGE

3.FORMATTING HTML ELEMENTS

4.USING LINKS IN HTML SCRIPT

It would be great if you can add images to your website.And you will learn it today within minutes!!!

Before we continue let us first talk about the different types of images you can have or link to your website.

The three famous types are:

1. GIF(Graphics interchange format)

2. JPG/JPEG(Joint photographic experts group)

3. PNG(Portable network graphics)

Some key facts about them in short:

1. GIF - Best for Graphics and Drawing(256 colors).

2. JPEG - Better for photographs (millions of colors).

3. PNG - The PNG format contains in many ways the best of both JPEG and GIF format.It has millions of colors and effective compressing.

NOTE: An image editor program is one of the most essential tools that you will need to create BEAUTIFUL WEBSITES.There are many image editors in the market for which you have to pay.Want it for free?Try Irfan-view then.

Enough of theory,now something practical.

All that you have to do to have an image on your website is to add this code to your HTML script.

 <img src="abc.jpg" alt="it is image abc"/>

Please note the opening and closing of image tag in the same line.It has to be done like this only.

You can't use something of this kind:

<image>

.

.

.<image/>

This is wrong and will not work.

Here in the above example i am assuming that the image abc.jpg is in the root folder where my HTML script also resides.alt is the alternate description of the image.

If your image is in a subfolder then you can write:

<img src="subfoldername/abc.jpg" />

Not only this!!You cann attach/use images from other sites also.Try this:

<img src="http://www.anysitename.com/image.png  />

Here i have not mentioned any specific URL to get an image so it depends on you.You can use  two webpages of yourself one containing the image or you can have a link of an image from your friend's web page or blog.There are many other ways and you are smart enough to do that.

Most important : Images can be links too.Try this:

<a href="http://prac-code.blogspot.com"> <img src="abc.jpg" /> <a/>

Now if you click on the image you will go to prac-code.blogspot.com.

Please note that it is always a good practice to use alt attribute so that others can come to know what the image signifies.

Using title attribute with image

Have you noticed while browsing the internet that when you place your mouse cursor on an image,a description of image pops up.Best example is Google's Doodles.

Even you can do that to your image in this way:

<img src="abc.jpg" title="You did it!!!" />

Two other important attributes: width and height

<img src="abc.jpg" width="141px" height="141px" />

Please note that the above line of code only changes the dimensions of the image and not the image size i.e. if the image is of 80kb then you can only resize the image using

width and height but cannot change the picture size.Even if you make the dimensions of the image small,the image size will be still 80kb.So use them smartly as and when they are needed.

Here is a sample code and sample output for attaching image to a website:

CODE:

<html>

 <head>
 <title>THIS IS MY FIRST WEB SITE</title>
 </head>

 <body style="background-color:#ff0000;">
 <h1 style="background-color: red;">Hurrah!!!<br /><hr /> This is my first step toward success!!!</h1>
<img src="code.jpg" title="YOU ENJOYED IT" />
<a href="http://prac-code.blogspot.com/">I LOVE THIS BLOG</a>
 </body>


</html>

Here the image code.jpg is in the root folder where my HTML script resides.The expected output would be:

ADDING IMAGES TO WEB PAGE

Try the above code and make changes according to you and experiment.As you can see when you will place the mouse cursor on the image,a pop up will appear showing YOU ENJOYED IT.

If you have any problem feel free to notify me.

USING LINKS IN AN HTML SCRIPT

USING LINKS - IN AN HTML SCRIPT

Having links on a web page is probably the most outstanding feature of a web page. Wouldn't it be great if you too have links on your webpage pointing to different web pages.Yeah!! Sounds great,but is it easy? Yes it is.Before i teach you to link other web pages to your web page,let us have a quick flashback of what we have learnt so far-

1.CREATING A SIMPLE WEB PAGE

2.GIVING BACKGROUND COLOR TO YOUR WEBPAGE

3.FORMATTING THE ELEMENTS OF A WEB PAGE

You can see the three links above also.Just click on them and they will take you where you want.What if your web page has a link to Google search engine and any one can go to the Google search engine by clicking the web link on your webpage.Sounds cool right?

So let us see the script to do so:

<html>

  <head>

  <title>I LOVE BLOGGING</title>

</head>

    <body style="background-color: #ff0000";>

      

     <h1 style="background-color: #00FF00">ALL ABOUT BLOGGING</h1>

     <h2 style="background-color: #00ffcc">MY BLOG</h2>

     <p style="background-color: #00ff99">blogging is great!!!!!</p>

     <a href="http://www.google.com/">This is a link to Google search engine</a> 

    

    <body/>

  

</html>

And this would be the expected output:

Please note that you can use notepad or any similar text editor to write the code and then test the code by opening it in any browser.

You can see the underlined link in your web page.Just take your mouse pointer over the link and it converts into hand showing that it is a link.Click on the link and you will be redirected to Google's search page.Whoa!!!!!!!!!!!!! It worked!!! Are you happy now?

Look at the code carefully:

 <a href="http://www.google.com/">This is a link to Google search engine</a>

Here,  

a - means anchor, and 

href - means hypertext reference.

One more practice for good understanding - Please save all the web pages that you make in a single folder.If you have them in a single folder you can link one page to another web page.For example i have two web pages in my folder namely: wepage1.htm and webpage2.htm,then i can link to webpage2 from my webpage1 by using the line:

 <a href="webpage2.html">This is a link to webpage 2</a>

And if your webpage is in a sub folder then the line will be:

 <a href="subfolder/webpage2.html">This is a link to webpage 2</a>

If you have all the files in a single folder it will be easier for you to link them.Later we would see that we can link other web pages,images(in your folder or from other websites),and many other types of files.I hope this would increase your interest in learning HTML.

Please try to link to various web pages and have fun.If you have any query feel free to comment and i will get back to you as soon as possible.Till then Keep up the good work.Take care.

FORMATTING HTML ELEMENTS

HOW TO MAKE YOUR WEBSITE BEAUTIFUL AND AWESOME

This simple thing can be done by formatting the HTML ELEMENTS.In the previous posts i have told how to create a simple webpage and how to give it a background color.If you have not read them,then it would be helpful if you have a look at them.They are as usual very simple so do have a look for better understanding.Here are the links:

1. CREATING A SIMPLE WEB PAGE

2. GIVING BACKGROUND COLOR TO YOUR WEBPAGE

In this post we would be learning to format elements like heading,paragraphs,etc.Though there are various formatting options but we will learn them slowly and perfectly as the main concern is understanding.As you are now familiar with writing a simple HTML script,this post will be cakewalk for you.Now we will learn about giving background colors to elements.Following script illustrates the concept:

<html>

  <head>

  <title>I LOVE BLOGGING</title>

</head>

    <body style="background-color: #ff0000";>

      

     <h1 style="background-color: #00FF00">ALL ABOUT BLOGGING</h1>

     <h2 style="background-color: #00ffcc">MY BLOG</h2>

     <p style="background-color: #00ff99">blogging is great!!!!!</p> 

    

    <body/>

  

</html>

BACKGROUND OF AN HTML PAGE

BACKGROUND OF AN HTML PAGE

In my first post about generating a simple HTML script i had showed you how to easily make a simple web page.Here is the link-MAKING A SIMPLE WEB PAGE.

In this post,we will move on to the next level and will create a more precise and more informative web page.  

Before starting let us understand the importance and meaning of two important terms-Element and Attribute.

Element: As the name suggests elements are the constituents that together form the web page.In short elements are the ingredients and webpage is the recipe.For example,title,heading,sub-heading,paragraphs are some of the elements of a website.I hope the explanation is pretty simple and clear.

Attribute: Yet again the meaning is self explanatory.The attributes are nothing but the properties of elements.For example if heading is the element then the size of heading,color of heading,border of heading are some of the attributes.

Without wasting time let us create our next interesting webpage:

<html>

  <head>


  <title>I LOVE BLOGGING</title>


</head>

    <body bgcolor= "#FF0000">

      

     <h1>ALL ABOUT BLOGGING</h1>

     <h2>MY BLOG</h2>

     <p>blogging is great!!!!!</p> 

    

    <body/>

  

</html>

Open notepad or any other text editor and type the code above.Save it as anyname.htm or anyname.html at an appropriate place.Please note that anyname means you can give any name to the HTML file but the extension should be .htm or .html.Now open the file in a web browser or simply double click the file and you would see a fascinating output like this:

Looks great !!!! Right? The various tags and properties  used in the above code are explained below:

• Every HTML script should start with a <html> opening tag and should end with a closing </html> tag and same is the case with <head>,<title>,<body>,<h1>,<h2>,<p>,etc.
• It is a good practice to first write the opening and closing tags and then add content between them which will reduce the chances of making silly mistakes and errors.
• <head>:It is the head of webpage.You can govern the whole webpage i.e. control the properties of various elements of the webpage from within the head section(that we will learn later).One of the most important use of head section is to give title to the web page.Look carefully at the image and notice what is written in the title bar-I LOVE BLOGGING.
• <body>:Body is the part where everything you want to show in a website generally exists.For example in the above code the RED color is given to the body.Also body contains-headings,sub-headings,paragraphs,ordered-lists,etc.
• <h1>: Used for giving the HEADING.Please note the size of the heading.
• <h2>:Used for giving the Sub-Heading.Again note the size of the sub heading.It is smaller than the heading which is obvious.Similarly you can have <h3>,<h4>,<h5> and <h6> but as you move on the size of the headings go on decreasing.
• <p>:It is used to add paragraphs.Usually contains most of the text present on the web page.
• <body bgcolor= "#FF0000">:Using this bgcolor inside the opening body tag we can give different colors to the websites . The #FF0000 is the hexadecimal value for red color.Try giving your own 6-digit hexadecimal values to see different background colors. 

Please keep in mind that here we are discussing everything with respect to static websites.Issues and concepts related to dynamic websites will be discussed later.Just try to put different texts and of varying lengths in the corresponding tags.Also try to change background colors.Have some fun and experiment.

In the next post we would discuss about how to give background color to individual elements like heading,paragraphs,etc.Till then continue the hard work and keep smiling. 

BASIC HTML SCRIPT

MAKING MONEY ONLINE

EARN BY ADVERTISEMENTS

FREE WEB HOSTING

Well!Well!Well!Am i going to talk about the HEADINGS written above?

Normal people do that!! But you and i are not normal.Just wrote them because they are the most searched keywords on search engines which is one of the tricks of SEO (Search Engine Optimization).Since this blog is devoted to codes i will try to stick to it.So if the blog does not correspond to the headings above, what is it for?

One thing is for sure-For all the headings stated above, you will be on the wheels if you know how to code.

Let it be an online shopping,a niche site,a forum,etc that you own or you want to own,you will be healthy if you code for it yourself and guess what!!!! You can save lots of money and spend it on other useful things.

                                      Let's look at it from another side.You could code for someone else and make money.You can also impress your GIRLFRIEND by devoting a website to her.Make a website for her with lots of HEARTS,LOVE CALCULATOR,etc and she will be so happy that..............................Well!! That's your personal life.Now coming back to coding,you should take your first step towards success by learning HTML.The reason is that it's very essential and easy to learn if you want to make a big name and earn some hard cash. OK! So without wasting time here is a very general  script of HTML.All the HTML SCRIPTS would have this general format more or less.

Remember-HTML is a scripting language.

<html>

  <head>

  <title>I LOVE BLOGGING</title>

</head>
    <body>
     <p>BLOGGING IS GREAT!!!!!</p> 
    
    <body/>
  
</html>