Hello World Mobile Website

Share This:

If you like my work show support on my PatreonHere I will talk about how to make a hello world mobile website using HTML5. Here is how a standard Hello World Website will look with HTML 5


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
Hello World
</body>
</html>

Of course the above will be viewable on a phone. But lets make it look nicer on a phone. To do this we will add the meta tag viewport to the code. Like so.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
</head>
<body>
Hello World
</body>
</html>

Lets add some mobile features. We will add the jquery mobile libraries between the <head></head>.


<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />

Lets make a two page website now. To do this we will first build two pages inside of one document. This can be done by using <div> tags.


<div data-role="page" id="myfirstpage"></div>

The data-role=”page” is a speacial attribute for jQuery Mobile. It lets jQuery Mobile know that anything in between these tags will be part of a page. And the tag that that data-role=”page” is in will be the start of the new page.




Lets add a header to the new page. To do this we will add code between the two <div></div> like so.


<div data-role="page" id="myfirstpage">
<div data-role="header">
<h1>Header of the first page</h1>
</div>
</div>

Once again pretty simple. Of course this time we use the data-role=”header” to identify that this section will be a header.

Now lets add some content.


<div data-role="page" id="myfirstpage">
<div data-role="header">
<h1>Header of the first page</h1>
</div>
<div role="main" class="ui-content">
<p><a href="#second" class="ui-btn ui-shadow ui-corner-all">Show the second page</a></p>
</div>
</div>

Great now add the second page. The second page we will give an id=”second” this way the link on the first page will open the second page. If we named the second page something else then we would need to change the link to #somethingelse.

Lets make one of the pages a popup instead of a page. This is very easy to achieve. We will give the link the following attributes data-rel=”dialog” data-transition=”pop”. We put this in the link because we need jQuery Mobile to know how to treat the page before it opens it up. If we want the dialog box to slide up instead of popup. We will change the data-transition=”pop” to data-transition=”slide” or data-transition=”slideup”

References

If you like my work show support on my Patreon