Professional Documents
Culture Documents
Chapter 1
Chapter 1
Page 1 of 46
Ch_1
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.
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
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.
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
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.
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
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
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.
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?
Page 17 of 46
Ch_1
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Page 18 of 46
Ch_1
<!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>
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>
6. Test your web page again. You should see the following rendered page.
Page 23 of 46
Ch_1
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).
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.
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>
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
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.
Page 30 of 46
Ch_1
Add to Cart
</div>
</article>
</section>
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.
15.Test the web page and you should see the following results.
Page 31 of 46
Ch_1
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
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
20.Test the web page and you should see the following results.
Page 36 of 46
Ch_1
Page 37 of 46
Ch_1
○ authorship information
○ copyright information
○ contact information
○ sitemap
○ back to top links
○ related documents
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.
Page 38 of 46
Ch_1
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
<footer>
<p>Our address is <address>500 Dover Rd, Singapore 139651</address>
</p>
<p class="textcontent">All site contents is copyright ©
<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
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
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.
Page 46 of 46