Ch_1

Chapter 1

Creating a HTML5 Site:

Understanding the Basic of HTML5

Chapter 1

Page 1 of 46
Ch_1

Creating a HTML5 Site: Understanding the Basic of HTML5

Overview

As the title of this workshop implies, this is a workshop aimed at sharing with you all
the aspects of HTML5 in a very practical way. Along the way, we will be building a
website which uses the most commonly used features of HTML5.

Most of the theories and concepts of HTML5 will be explained along the way as we
built the website. Therefore, by the end of the workshop, we will end up with a fully-
working website that you can use as a template for your own HTML5 works in the
future.
We will be begin by exploring some basic topics of HTML5. To be more precise
about what will be covered in this workshop, let us look at the outline first. As the
workshop is very practical, we will be building a site with HTML5 together
systematically.

It is a very good idea to start by exploring what we will be working towards. So let us
take a look at the end result first and we will discuss the high level overview of what
HTML5 really is and why it is such an important thing for the web today and
tomorrow. After that somewhat more theoretical part, we will begin the creation of
our web site. We are going to start by building the skeleton for a couple of pages.
When we reach the end of this first session, we will have an understanding of what
HTML5 brings to the table and at that point, we will already have a couple of pages
created in a somewhat rough first version. We will of course, continue working on the
site in the following sessions to make it more polished.

Exploring the Final Result

This is a very practical oriented work because I think the best way of learning is by
doing. This workshop accompanied by additional material that gives you the ability to
follow along with most of things that the instructors would be doing throughout the
workshop.

Another aspect that is important is seeing how everything fits together to get the
bigger picture. For this reason, we will be building together a working website. There
will not be stand-alone features. After you see a feature in the slides, we will
immediately add it to our site to make it more functional. I hope you will have a good
time learning HTML5 and its companions.

Page 2 of 46
Ch_1

We choose to build throughout this workshop an imaginary furniture store named

Wood Premium Furniture.

As the name implies, Wood is selling Premium Furniture online, and he wants to give
his visitors the best experience possible. For this reason, we are tasked to build a
site, using the newest features available so we will answer his question by building
an HTML5 focused website. Note that in this course I am focusing on the HTML5
side of things, so I will not be using any system to store orders or read database to
fetch our furniture types. We however will be building the home page, a page where
Wood's furniture are listed, a detailed page per furniture, the ability to drag furniture
to the shopping cart, and a checkout page.

We are going to spend just a little bit of time explaining the basics of HTML. Instead,
we are focusing on the new features, which HTML5 brings to the web. To create
Wood Premium Furniture, we will be using most HTML5 features. This includes the
new HTML5 elements and their attributes, as well as the new form controls. We will
look at how we can use most of the new CSS3 features to make layout of the site
even easier than before. For example, we will look at the new CSS3 selectors that
were added. We will also integrate audio and video into our site to display different
types of furniture.

We will be building the shopping cart using two features that come with HTML5,
namely web storage and the drag and drop feature. We will also give the user an
easy way to find the physical Wood Premium Furniture using geolocation, which also
comes out of the box with HTML5. As we can see, we will have a lot of work adding
all these features into a real working site. Before we continue, I want to give you a
peek at the working site, which we will build together in this and the following
sessions.

Demo: Looking at the End Product

In the first demo of this session, I am going to show you the finalized Wood Premium
Furniture website.

The following few figures shows the final design of the web site of this workshop.
You’ll be working on throughout the modules of this course this site. Let us look at
the pages that have been implemented.

The figure below shows the design of the default web page. It is a simple page,
which consists of the logo and the name of the store. Following that, it has a simple
menu that links to the different other pages such as collections, contact us, about us,

Page 3 of 46
Ch_1

and also the shopping cart. It also show the best sellers and the associated
accessories of the furniture.

There is also a search box here on the right. Then we have the navigation, and the
background is a gradient. Then we have a lead image here and an image for the
furniture of the month.

Page 4 of 46
Ch_1

A bit lower, we see a multicolumn text, which is now a lorem ipsum text, but this
could be a welcome text explaining what Wood Premium Furniture is. On the right,
we have an extra block that contains some extra links, perhaps some news updates
about Wood Premium Furniture.

Still on the home page, there are a couple of furniture here, and we can click on Add
To Cart button, and there are also a couple of accessories. On the bottom of the
page in Figure 2, we have Wood Premium Furniture physical address, a copyright
notice, and the time at which this page was generated.

There is a product detail page which shows the details of the product when it is
clicked.

Page 5 of 46
Ch_1

As mentioned, you have a couple of pages that we will be implementing throughout

this course. One of those pages is the Our Collection page as shown in the figure
below. The Our Collection page is where the shopping is done.

In one of the later session, we can actually use drag and drop to add products to our
shopping cart.

Page 6 of 46
Ch_1

Then we also have the Contact Us page as shown in the figure below, and this page
shows a map to show you the location to Wood Premium Furniture.

Page 7 of 46
Ch_1

We also have a Cart checkout page, which is basically a large form where the user
can enter his details. All of these fields are actually using quite a number of HTML5
features.

Page 8 of 46
Ch_1

Understanding HTML5

Before we get started learning the specifics of HTML, let us take a moment to
explain the importance of HTML and why it is so critical to web design. The advice to
every web designers is that they need to learn at least the three core languages of
HTML, CSS, and JavaScript. These three languages form the backbone of all
websites and web content, and they are critical skills for any web designer to learn.
However, if you were ask me which of those three was the most important to learn, I
would say, without any hesitation, that it's HTML.

CSS controls how a page looks, and JavaScript controls how it behaves, HTML
provides the essential structure for web pages. Take away the CSS, and you simply

Page 9 of 46
Ch_1

have an unstyled page. Take away the JavaScript, and certain behaviours may
cease to function. Take away the HTML however, and you are left with nothing at all,
no web page, no content, nothing. In fact, to have a website, all you really need is
HTML. A properly written HTML document will not only be readable to the user, but
will also convey the structure of the document, the relationship of its content to each
other, and allow the user to link to other pages and sites.

HTML can do all of this because it is a markup language. That means that HTML is
used to mark-up content in order to explain what that content is and how it relates to
other content on the page. It does this with tags, which are used to identify specific
types of content. A p tag, for example, identifies the content as a paragraph, while
the nav tag would identify its content as being part of the page's navigation. By
knowing the rules of how tags work together, and which tags to use, it is simple to
author an HTML page.

In the early days of the web, this made it easy for developers to write browsers to
display web content and for authors to learn how to structure their pages. Although
HTML has grown and evolved over the years, it hasn't really changed that
dramatically at all since the first version. This consistency has helped grow the
adoption of the web, and we will continue to feel its growth as it moves beyond
browsers and into a connected world of devices and applications. The growth of
connected devices like tablets, phones, appliances, and wearable tech are creating a
much larger ecosystem for HTML content.

Regardless of how complex the site or web application is, or how many other
technologies might be involved with it, at the core of the page, you are going to find
HTML. That is why regardless of which skills you choose to focus on, HTML is an
essential skill for you to learn and master.

Building the Framework

Now that you have an idea on what is HTML it is time to get practical. Now typically
before any code is written, a design of a mock up is the figure below which shows
the mock-up for the landing page we are going to create.

Mockup can be easily draw on a paper using a pencil or it can be done using a
simple computer software such as paint. for this mockup, I do it using the online
Google Drawing app.

Page 10 of 46
Ch_1

Page 11 of 46
Ch_1

Preparing for the development

Before you begin the development it is necessary to check that you have the
appropriate tools. For this workshop, we will be using:
1. Visual Studio Code
https://code.visualstudio.com/
Setup : https://code.visualstudio.com/docs/setup/setup-overview

2. Chrome Browser
https://www.google.com/chrome/browser/desktop/index.html
Setup:
https://support.google.com/chrome/answer/95346?co=GENIE.Platform%3DD
esktop&hl=en
The trainer will guide you through the installation using the official information from
the product website.
Using the Visual Studio Code to create a html document
We will be using Visual Studio Code as the default editor for this workshop. Before
we start the visual studio, go to your Windows Explorer and create a working
directory in a location at your conveniences. Call this folder Workshop1.For myself, I
will create a folder in D: drive.

In your program menu of your Windows. Look for the following icon or Visual Studio
Code application and launch it.

Once it is launched, you will see the editor shown in the figure below. You will see
the Welcome screen on a default Welcome tab that show some of the commands,
helps and tip.
Let’s begin by opening up the folder and create the necessary web pages.

Page 12 of 46
Ch_1

Page 13 of 46
Ch_1

1. Click on the file icon and select Open folder.

2. Choose the Working Folder that you have just created.

3. You should see the empty directory on the left. Close the Welcome page by
click on the X button as shown below.

Page 14 of 46
Ch_1

4. To add a new file, move your cursor over to the label show your working
folder, a new set of icon will appear. Select the one (New File) as shown
below. Enter index.html at the prompt and hit Enter.

5. A blank file will be created in the work folder and the file will be opened on the
right side of the editor. Enter the filename index.html.

You have successfully create a new html page in the Visual Studio Code. From now
on, you can use this method to create the rest of the html files in the project.

Importing the images

We will be using a set of fonts and images in our project. We have supplied the
imageWS1.zip which contains all the images and fonts that you will need in this
workshop.

Page 15 of 46
Ch_1

1. Get a copy of the file from your instructor or you can download it via
https://goo.gl/5zuDCW

2. Use Windows Explorer to open up the imageWS1.zip and you should see the
following content.

3. Copy the content in imagesWS1.zip to the working folder that you have
created for the project (i.e. where the index.html is placed)

Page 16 of 46
Ch_1

4. Once the copying is complete, go back to Visual Studio Code and you should
see the folder on the left updated with the content from the zip file. If you do
not see the content, click on the refresh button as shown below.

What is HTML?

HTML is the standard markup language for creating Web pages.

HTML stands for Hyper Text Markup Language

HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the
page
The following list of code shows the structure of a simple HTML page
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

Page 17 of 46
Ch_1

</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

● The <!DOCTYPE html> declaration defines this document to be HTML5

● The <html> element is the root element of an HTML page
● The <head> element contains meta information about the document
● The <title> element specifies a title for the document
● The <body> element contains the visible page content
● The <h1> element defines a large heading
● The <p> element defines a paragraph
Each of these tag requires a opening tag enclosed using the angle bracket < >. The
definition of the tag ends with a similar angle bracket but with a added backslash </
>.
Adding the skeleton of a html page
To start the coding for the project, we now going to add the basic skeleton of the
html. I have broken down the index.html page into the following segments.
● Header
○ Logo, Title, Search and Menu
● Welcome Image
○ Big Image to enliven the web page
● Welcome Text
○ Some description of the store.
● Furniture of the Month
○ An image showing a popular furniture
● Events
○ List some of the events in the store
● Best Sellers
○ Featuring furnitures and accessories
● Footer
○ Address of the store
In the subsequent section of the code we will create the each of the segment
systematically.

Page 18 of 46
Ch_1

1. Creating the main structure of the index.html

Add to index.html.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Welcome to Wood Premium Furniture Store!</title>
</head>
<body>

Page 19 of 46
Ch_1

</body>
</html>

2. Adding the header

Next, add the logo image here as well as Wood Premium Furniture header.
For the moment we will leave out the simple textbox for searching.

Add the following in between the body tags.

<body>
<header>
<div>
<a class="headerlogo" href="index.html">
<img src="images/logo.png" />
</a>
<span id="headername">Wood Premium Furniture</span>
</div>
</header>
</body>

● The <header> specifies a header for a document or section and should

be used as a container for introductory content.
● The <div> tag defines a division or a section in an HTML document and
is used to group block-elements to format them with CSS.
● The <a> element is html link to another HTML page.
● The href attribute specifies the destination address of the link. The link
text is the visible part and clicking on the link text will send you to the
specified address.

Page 20 of 46
Ch_1

● The class attribute specifies one or more class names for an HTML
element and is used by CSS and JavaScript to perform certain tasks for
elements with the specified class name.
● The <img> tag is empty, the src attribute specifies the URL of the image, and
does not have a closing tag.
● The <span> is used to contain some text and has no required attributes.

3. It is time to test your web page to see if it is working. Goto your explorer, right
click on index.html ➣Open With➣Google Chrome. (Note that you need to
have Google Chrome installed.

4. You should see the following web page. You will notice the appropriate size of
the logo. It is deliberately done in this way and we will use a common
technique to fix that later.

Page 21 of 46
Ch_1

5. Now go back to Visual Studio Code and add the section in bold for the menu.
Note that the menu is a collection of unordered list of url links.
<header>
...
<nav class="backgroundgradient">
<ul>
<li><a class="navlink" href="index.html">Home</a></li>
<li><a class="navlink"
href="collections.html">Collections</a></li>
<li><a class="navlink" href="contactus.html">Contact Us</a></li>
<li><a class="navlink" href="aboutus.html">About Us</a></li>
<li><a class="navlink" href="checkout.html">Cart
<img src="images/cart.png"/></a></li>
</ul>
</nav>
</header>

Page 22 of 46
Ch_1

● The <nav> tag defines a set of navigation links. NOT all links of a document
should be inside a <nav> element. The <nav> element is intended only for
major block of navigation links so that browsers, such as screen readers for
disabled users, can use this element to determine whether to omit the initial
rendering of this content.
● An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag.
● Following show an example of the use of unordered list.
<!DOCTYPE html>
<html>
Unordered List of Fruits
<body>
● Orange
<h2>Unordered List of Fruits</h2>
● Durian
<ul> ● Banana
<li>Orange</li>
<li>Durian</li>
<li>Banana</li>
</ul>
</body>
</html>

● In HTML, images are defined with the <img> tag.

● The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
● The src attribute specifies the URL (source) of the image:
<img src="images/cart.png"/>

6. Test your web page again. You should see the following rendered page.

Page 23 of 46
Ch_1

7. Adding the Welcome and Furniture of the Month

In the next step, we are going to add 2 images to the page (see mockup
below).
The first image is the Welcome image to bring visitors to the context of
furniture store.
The second image depicts the furniture of the month. It is a way to bring to the
visitor’s attention on what is popular in the store.

8. Add the following section of code after the header segment in the index.html.
<header> ...
</header>
<div id="welcomeimage">
<img src="images/furnitureheader.png" />
</div>
<div id="furnitureofthemonth">
<img src="images/fotm.jpg" />
</div>

● The id attribute specifies a unique id for an HTML element (the value must
be unique within the HTML document).

● The id attribute is most used to point to a style in a style sheet, and by

JavaScript (via the HTML DOM) to manipulate the element with the specific
id.

Page 24 of 46
Ch_1

9. Test the web page and you should see the following results. For now, we are
interested in getting the content into the web page, we will use CSS to
decorate the web page.

10.Adding the Welcome Text and Event listing

Next, we will add both the Welcome text and the event listing just after the
image section.

Page 25 of 46
Ch_1

<div id="furnitureofthemonth">
<img src="images/fotm.jpg" />
</div>
<section id="welcometext">
<header>Welcome to Wood Premium Furniture!</header>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in
lobortis ex. Suspendisse vestibulum varius porta. Ut ligula risus, fermentum
nec elit eget, feugiat consequat diam. Donec accumsan tristique convallis.
Curabitur sit amet facilisis sapien. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Quisque sollicitudin augue et
metus volutpat pellentesque. Maecenas dui quam, iaculis at massa in, varius
varius lectus.
Fusce efficitur justo sed lobortis efficitur. Sed vel quam at mi
tristique convallis non id justo. Vestibulum molestie odio sed congue
tempor. Mauris at nisl a risus finibus efficitur. Mauris quis luctus erat,
id auctor tellus. Nulla vel suscipit metus. Donec porta dapibus eros et
finibus. Maecenas suscipit nisl sed dictum luctus. Proin suscipit laoreet
ante a dictum. Donec ornare, erat quis dignissim maximus, neque ex laoreet
massa, sed convallis turpis turpis ut elit. Suspendisse varius augue ante,
sed fermentum dui facilisis non. Nulla neque leo, placerat ut tempor quis,
ornare sed lorem. Mauris egestas sem non magna semper lobortis.
<p><mark>Note that our store is closed on Christmas eve and Christmas
day.</mark></p>
</span>
</section>
<aside id="events">
<header>Here's what happening!</header>
<ul>
<li><a href="#">New Furniture added</a></li>
<li><a href="#">Store redecorated</a></li>
<li><a href="#">New website launched</a></li>
</ul>
</aside>

● The <section> tag defines sections in a document, such as chapters,

headers, footers, or any other sections of the document.

● The <section> tag is new in HTML5.

Page 26 of 46
Ch_1

● Note that in the Welcome text section, there is also a <header> tag
containing the heading of the Welcome section.

● Both <div> and <span> encapsulate segments of wording and html element
as well. So what is the difference between the two?
The <div> element is a block-level element. A block-level element always
starts on a new line and takes up the full width available (stretches out to the
left and right as far as it can).
The <span> element is an inline element. An inline element does not start on
a new line and only takes up as much width as necessary.

● The <p> tag defines a paragraph. Browsers automatically add some space
(margin) before and after each <p> element. <p> tag is a block-level element.

● The <mark> tag defines marked text which will highlight the text between the
tag.

● The <aside> tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.
The <aside> tag is new in HTML5 and the <aside> content could be placed
as a sidebar in an article.

10.Test the web page and you should see the following results.

Page 27 of 46
Ch_1

Page 28 of 46
Ch_1

11.Adding the Best Seller segment

Next, we will add both the Best Seller segment into the Best Selling Furniture
section and Best Selling Accessories section.

12.Add the following code in bold, just after the Event listing in the Visual Studio
Code.
<aside id="events">
<header>Here's what happening!</header>
<ul>
<li><a href="#">New Furniture added</a></li>
<li><a href="#">Store redecorated</a></li>
<li><a href="#">New website launched</a></li>
</ul>
</aside>
<section id="bestsellers">
<header>Bestsellers @ Wood Furniture</header>
<section class="furniturebestsellers">

</section>
<section class="accessoriesbestsellers">

Page 29 of 46
Ch_1

</section>
</section>

13.Note that you have 2 sections contained within a section. Let us add the
details to the Furniture Best Seller section.

14.Add The Best Seller Furniture

Add the following code in within the Best Seller section. Here we are going to
add an article which describes the furniture that we are selling.
<section class="furniturebestsellers">
<header class="backgroundgradient">
Furniture
</header>
<article class="productarticle">
<figure>
<img class="productarticlethumbnail"
src="Images/furniture/row_dt001_0.jpg" />
</figure>
<header>
<span class="productarticlename">
<a href="productdetails.html">furniture 1</a>
</span>
</header>
<p class="productarticleprice">$120</p>
<div class="button" id="testButton">

Page 30 of 46
Ch_1

Add to Cart
</div>
</article>
</section>

● The <article> tag specifies independent, self-contained content. It should

contain information that is complete in itself and it should be possible to
distribute it independently from the rest of the site.

Following are example of how the <article> element can be used:

Forum post
Blog post
News story
Comment.

The <article> tag is new in HTML5 and it is a block level element.

● The <figure> tag specifies self-contained content, like illustrations,

diagrams, photos, code listings, etc.

Although the content of the <figure> element is related to the content of the
web page, its position is independent of the content flow, such that if it is
removed it should not affect the flow of the document.

The <figure> tag is new in HTML5 and it is a block level element.

15.Test the web page and you should see the following results.

Page 31 of 46
Ch_1

Adding More Furniture Articles

In this section, we would like you to try out for yourself by adding more furnitures to
the Furniture Best Seller.
1. Goto the images folder in your working folder and select 3 furnitures that you
want to add. For myself, I have chosen:
a. row_dt002_0.jpg
b. row_dt003_0.jpg
c. row_sb001_0.jpg

2. Add to the code so that each furniture details in an article and each other is
next to each other in the hierarchy.
1. Section
a. Header
b. Article
c. Article
d. Article
e. Article

3. Test the web page and you should see the following results.

Page 32 of 46
Ch_1

Page 33 of 46
Ch_1

16.Add the Best Seller Accessories segment

Remember that you have 2 sections contained within a Best Seller section.
Let us add the details to the Accessories Best Seller section.

Page 34 of 46
Ch_1

17.Add the following code in within the Best Seller section. Here we are going to
add an article which describes the Accessories that we are selling. You will
notice that code is similar to that of the best selling furniture.
<section class="accessoriesbestsellers">
<header class="backgroundgradient">
Accessories
</header>
<article class="productarticle">
<figure>
<img class="productarticlethumbnail"
src="Images/furniture/row_ac001_0.jpg" />
</figure>
<header>
<span class="productarticlename">furniture 1</span>
</header>
<p class="productarticleprice">$10</p>
<div class="button">
Add to Cart
</div>
</article>
</section>

18.Test the web page and you should see the following results.

Page 35 of 46
Ch_1

Adding More Accessories Articles

In this section, we would like you to try out for yourself by adding more accessories
to the Accessories Best Seller.
19.Goto the images folder in your working folder and select 2 accessories that
you want to add. For myself, I have chosen:
a. row_ac002_0.jpg
b. row_ac003_0.jpg

20.Test the web page and you should see the following results.

Page 36 of 46
Ch_1

Adding The Footer

We have come to the last section of the web page. It is called the <footer> section.
In this section, we are going to show the address of our shop and in this case we will
use Singapore Polytechnic as the address.
21.Add the following code next to the Best Seller Section in the index.html page.
<footer>
<p>Our address is <address>500 Dover Rd, Singapore 139651</address></p>
<p class="textcontent">All site contents is copyright &copy;
<a class="mainlink" href="http://www.woodfurniturestore.com">
Wood Premium Furniture Store
</a>
</p>
<p class="smalltext">
This page was generated on <time>09:25:04.123</time>.
</p>
</footer>

● The <footer> tag defines a footer for a document or section.

● A <footer> element should contain information about its containing

element.

● A <footer> element typically contains:

Page 37 of 46
Ch_1

○ authorship information
○ copyright information
○ contact information
○ sitemap
○ back to top links
○ related documents

● You can have several <footer> elements in one document.

22.Test the web page and you should see the following results.

23.Congratulations! You have just completed the content for the index.html page.

Adding the skeleton of a product detail page

Now that we have successfully created the index.html page, we will create the
product details page. The product detail page is very similar to the index html and
the main different is that it show the product in greater details such as giving
explanation. I have broken down the index.html page into the following segments.
● Header
○ Logo, Title, Search and Menu
● Welcome Image
○ Big Image to enliven the web page
● Furniture Details

Page 38 of 46
Ch_1

○ Header for furniture

○ Figure for furniture
■ Main Image
■ Sample Images
○ Some description of the furniture.
■ Price
■ Add to Cart button
● Footer
○ Address of the store
In the subsequence section of the code we will create the each of the segment
systematically.
Following shows the mock-up for the product details age we are going to create.

1. To add a new file for the product detail, move your cursor over to the label
show your working folder, a new set of icon will appear. Select the one (New
File) as shown below. Enter index.html at the prompt and hit Enter.

Page 39 of 46
Ch_1

2. A blank file will be created in the work folder and the file will be opened on the
right side of the editor. Enter the filename productdetails.html.

3. Copy from the index.html, the code for the header, welcome image and footer
into the productdetails.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Welcome to Wood Premium Furniture Store!</title>
</head>
<body>
<header>
<div>
<a class="headerlogo" href="index.html">
<img src="images/logo.png" />
</a>
<span id="headername">Wood Premium Furniture</span>
</div>
<nav class="backgroundgradient">
<ul>
<li><a class="navlink" href="index.html">Home</a></li>
<li><a class="navlink" href="collections.html">Collections
</a></li>
<li><a class="navlink" href="contactus.html">Contact Us</a>
</li>

Page 40 of 46
Ch_1

<li><a class="navlink" href="aboutus.html">About Us</a></li>

<li><a class="navlink" href="checkout.html">Cart
<img src="images/cart.png"/></a></li>
</ul>
</nav>
</header>
<div id="welcomeimage">
<img src="images/furnitureheader.png" />
</div>
<div id="furnitureofthemonth">
<img src="images/fotm.jpg" />
</div>

<footer>
<p>Our address is <address>500 Dover Rd, Singapore 139651</address>
</p>
<p class="textcontent">All site contents is copyright &copy;
<a class="mainlink" href="http://www.woodfurniturestore.com">
Wood Premium Furniture Store
</a>
</p>
<p class="smalltext">
This page was generated on <time>09:25:04.123</time>.
</p>
</footer>
</body>
</html>

Note that we are copying the following into the new page.

Page 41 of 46
Ch_1

Adding the Header And the Product Details

1. Next we will add the details of the product. Try and see if you know where this
section is added to?
<section class="furnituredetails">
<header class="blockheader">
<span>Furniture 1</span>
</header>
<figure class="productarticlelargefigure">
<img id="expandedImg" class="productarticlelargeimage"
src="Images/furniture/row_dt001_0.jpg" />
<figcaption>Furniture 1</figcaption>
<!-- The grid: four columns -->
<div class="row">

Page 42 of 46
Ch_1

<div class="column">
<img src="Images/furniture/row_dt001_0.jpg"
onclick="openImg(this);">
</div>
<div class="column">
<img src="Images/furniture/row_dt001_1.jpg"
onclick="openImg(this);">
</div>
<div class="column">
<img src="Images/furniture/row_dt001_2.jpg"
onclick="openImg(this);">
</div>
</div>
</figure>
<div class="productarticlecontent">
<p class="productarticledescription">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ut tortor non ante vehicula vehicula sed
at enim. Suspendisse a odio odio. Vestibulum ac lorem nec ligula semper
fermentum eu semper massa. Quisque convallis id sapien at varius. Praesent
sed rhoncus ex, eget fringilla enim. Maecenas varius quam vitae ipsum
sagittis sagittis. Mauris purus nunc, finibus sit amet finibus quis, posuere
ut velit. Mauris consectetur nunc nec ornare scelerisque. Praesent et
maximus nunc. Suspendisse nec placerat ex. Sed ut metus bibendum, pretium
quam id, viverra ex. Ut rutrum lacus urna, vitae suscipit lorem eleifend ut.
Nunc a risus tincidunt, blandit odio sed, ullamcorper nisi. Mauris ultrices
id orci sed rhoncus. Vivamus ut velit urna. Vestibulum faucibus ultricies
risus, ut rhoncus odio mollis non. <br />Suspendisse varius bibendum
suscipit. Sed metus tellus, accumsan vitae sollicitudin suscipit, vestibulum
eget eros. Ut lacinia eleifend nisi, ultrices consectetur nulla facilisis
vitae. Curabitur accumsan non ante accumsan gravida. Maecenas ornare magna
non lacinia sollicitudin. Phasellus tincidunt dolor at imperdiet blandit. In
hac habitasse platea dictumst. Duis nec magna facilisis, mattis enim
posuere, pretium ligula. Aliquam eu accumsan ante, et porta erat.
Suspendisse potenti. Donec lobortis risus quis ligula bibendum cursus. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nulla efficitur volutpat
tempus. Suspendisse faucibus nec ex at maximus. Cras non libero ut ipsum
interdum porta. Vivamus condimentum, nibh at porttitor placerat, metus nisl
cursus orci, tempor maximus est dui bibendum ex. </p>
<p class="productarticleprice">$120</p>

Page 43 of 46
Ch_1

<div class="addtocartbutton button">

Add to Cart
</div>
<br>
</div>
</section>

● The onclick attribute fires on a mouse click on the element. It applies to

the onclick attribute is part of the Event Attributes, and can be used on any
HTML elements.
● In this case, by clicking the small image, we will be able to show it on the big
image. Since the backend coding is not finished, nothing will happen when it
is clicked.

2. Test and run the web page, you should see the following display.

Page 44 of 46
Ch_1

Page 45 of 46
Ch_1

Conclusion
With the side skeleton ready, we have arrived at the end of this first module. The
pages are still extremely basic, but we'll work on that, of course, in the next sessions.
Let's quickly recap what we have seen in this first module. We have seen that
HTML5 is adding quite a lot of new features and is actually much more than just
HTML. The HTML5 has dramatically extended availmany able tags. Many of the
newly added tags are there to give semantic meaning. To the content they contain.
In general, the HTML5 standard is a very strong evolution of HTML, and it enables
us to build web applications of today and tomorrow. These sites not only run in a
desktop browser. Indeed, with HTML5, we are ready to build web apps which run on
many devices and platforms.

--- End ---

Page 46 of 46