Develop Mobile Websites in HTML5


Part Two Chapter 01

HTML5

To develop your mobile website, the first step is to code the web pages in HTML5.

What is HTML5?

HTML has long been a markup language used for structuring and presenting content for web pages. HTML5 is the next version to HTML4, and is the latest version of HTML.

Nowadays, users will visit your website on desktop, tablet or mobile devices. HTML5 is different to all the previous HTML versions because it is intended for developing cross-device websites.

HTML5 has new features in which HTML4 and other previous versions do not have. The new features is intended to make it easy for handling multimedia and graphical content on web pages without having to install browser plugins.

Building Blocks: HTML, CSS and JavaScript

A typical website consists of multiple web pages. A single web page is made up of:

Website Building Blocks

HTML

On a web page, HTML is the backbone (or skeleton) that holds all content (i.e. text, images and videos through hyperlinks, etc), the CSS, and the JavaScript.

For example, a web page can be written in pure HTML5, without any CSS or JavaScript.

<!doctype html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
</head>
<body>
  <h1></h1>
  <p></p>
  </body>
</html>

CSS

CSS provides the visual presentation of a web page.

JavaScript

JavaScript takes care of the interactive features (or behavior) of the web page.

An Example: HTML5 Web Page

A typical HTML5 web page should have the structure below.

<!doctype html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://www.example.com/css/stylesheet.css">
  <script src=" http://www.example.com/js/scripts.js"></script>
  </head>
<body>
  <h1></h1>
  <p></p>
  </body>
</html>

The first line specifies the document type of the web page: Coded in HTML5.

<!doctype html>

The character set of the page is specified by the META charset tag. “utf-8” enables the use of English words and characters of other languages (e.g. Chinese Simplified, Chinese Traditional, etc) on your web pages.

<meta charset="utf-8">

All web pages need a proper interface that is visual to users. CSS provides the visual presentation of the page. The “ref” attribute in the “link” tag retrieves the CSS from the external file “stylesheet.css”.

<link rel="stylesheet" href="http://www.example.com/css/stylesheet.css">

The web page makes use of JavaScript for user interactions. The “src” attribute in the “script” tag retrieves the JavaScript from the external file “scripts.js”.

<script src="http://www.example.com/js/scripts.js"></script>

Launch Mobile Websites with WordPress or Shopify

Wordpress and Shopify are two commonly used website builders for anyone to develop and launch mobile friendly websites.

  • You can install WordPress on Siteground after buying a domain name and an inexpensive hosting package.
  • Shopify is a website builder in which you won’t have to manage the web hosting. But refer to this Shopify setup checklist to ensure your website is optimally set up.


Gordon Choi's Mobile Website Book has been available since November 2016.







Content on Gordon Choi's Mobile Website Book is licensed under the CC Attribution-Noncommercial 4.0 International license.

Gordon Choi's Mobile Website Book

Gordon Choi’s Other Websites:
SEO Expert in Hong Kong (Gordon Choi’s Blog)
Analytics Book