COSC2430 - Web Programming

HTML 2

Please note:
- You can start the tutorial by opening the Visual Studio Code (VSC) on your lab computer or
on your laptop.
- We have recommended some important chrome extensions and visual studio code
extensions in the lecture so make sure you install them to maximise your learning
experience.
- Try your best to finish all the tutorial questions within the lab time as your tutor will go
through the solutions of these questions at the end.
- It's ok if you need more time as long as you can finish these tutorials by yourself by the end
of each week. This is important as doing these questions is a good practice to prepare you for
the upcoming assessments and project.
- If you are stuck with any question, please feel free to reach out to ask your friends sitting
next to you, your neighbours or your tutor.

Exercise 1: Make your own startup/shop website

Imagine you want to open your dream startup/business/shop selling products. You need to
create a website for your business. Overall, creating a website for your startup, business, or
shop can help you establish an online presence, increase sales and customer satisfaction,
build credibility, and provide valuable insights into customer behaviour.
Here are some ideas of what you want to sell:

● Clothing and accessories: selling trendy and stylish clothing from Gucci, Dior,
Chanel, Louis Vuitton, Hermes, Prada.
● Jewellery: Earrings, Bracelet, Necklace, Ring from popular brands like Swarovski,
Tiffany & Co, Harry Winston, and Pandora.
● Tech accessories: laptops, smartphones, and tablets.
● Health, wellness, beauty products: essential oils, yoga mats, relaxation aids,
skincare, hair care, and oral hygiene products.
● Gaming accessories: controllers, headsets, and gaming mouse pads.
● Anime/Gaming Items: Pokemons cards, Yugioh cards, animal characters figures.
● Snacks and beverages: refreshing beverages, snacks.
● Novelty items: quirky keychains, funny mugs, and unique phone cases.
● Sports and fitness products: soccer balls, basketballs, and yoga mats.
● Home decor: posters, wall art, and decorative pillows.
● Pet products: pet food, toys, and grooming products.
● Books: self-help, memoirs, and fiction books.
● AndMore

Remember, it's important to understand your target market's needs and interests before
deciding which products to sell. Offering a variety of products that cater to different interests
and preferences can help attract a wider customer base and increase sales.

For your website, there should be at least two HTML files (views):
● The product page (homepage):
○ Company information:
■ Mission statement or tagline: A brief statement that communicates
your company's mission or values can help visitors understand what
your company does and what sets it apart.
○ Product information:
■ Information about each of your products, including its image, product
name, features, and pricing.
○ [Optional] Multimedia embedded:
■ Videos
■ Maps
■ Sounds
● The product order page:
○ Product order form:
■ An order form where customers can enter their personal information
(name, birthdate, shipping address) and which product they wish to
purchase.
● Every page:
○ Branding:
■ Your homepage should feature your company's branding, including
your logo, slogan, and any other design elements that help establish
your brand identity.
○ Footer:
■ Include contact information: Include your business's address, phone
number, email address, and social media profiles so that visitors can
easily reach you.

Here is my example:
● Tom is a big fan of RMIT merchandise including lanyards, hoodies, T-shirts, cups,
etc. So he decided to open a RMIT Store to sell those glorious and wholesome RMIT
merchandise.
● The below are the screenshots of both of the main page (index.html) and product
order page (product-order.html).
● If you also would like to build a RMIT Store like Tom then here are the assets (RMIT
favicon, logo, banner, product images).
● This RMIT Store website is inspired from the actual real RMIT Store website in
Melbourne.
● The demo website link is here.
Also, make sure your form actually sends the data to the server by using Chrome inspector
to check:
It might look a bit plain and basic right now! Once we learn more about CSS then we can
make it fancy and beautiful!

So stay tuned till you learn enough CSS to make a glorious business website for an
awesome shopping experience!

[Questions] Please use Chrome Inspector for RMIT Store website and answer these
questions:
● In the index.html:
● In the <head>, there is this line of code, can you explain the purpose of this?

<link rel="icon" href="assets/images/rmit-favicon.png" type="image/png" />

● There is a special anchor link with href “#item-list", can you figure out the
purpose of it?

<a href="#item-list"><strong>Buy Now!</strong></a>

● Can you recognise some of the semantic HTML tags (<header>, <nav>,
<main>, <section>, <footer>) in the website? And figure out the reasons for
their locations? Can you compare the RMIT Store website to the biggest
e-commerce website tiki.com?
● Can you figure out how we use <table> <tr> <td> to manage the 3-columns
layout of our product view?
● In the product-order.html:
○ Should the order form have a “Get” method or “Post" method? Why?
○ Can you convert the select field to a checkbox field for users to select their
products they want to buy?
○ Can you improve the look of “Order Now!” button? What kind of colour for the
purchase button is usually the best for popular e-commerce websites?

Tool links:
- Image retouch and resize: https://www.befunky.com/create/resize-image/
- Crop image circle (for your profile avatar): https://crop-circle.imageonline.co/
- Free web hosting for images: https://imgbox.com/
- Emoji list: https://getemoji.com
- Free beautiful icon images: https://www.flaticon.com/

The resource/reference to learn HTML:

- Lecture 2 - HTML 2 demo links:
- https://tomhuynhsg.github.io/COSC2430-Web-Programming-materials/html-2/
lecture/
- MDN (Mozilla Developer Network) is widely considered one of the best websites to
learn HTML (and web development in general):
https://developer.mozilla.org/en-US/docs/Web/HTML
- HTML Reference IO: https://htmlreference.io/
- Comprehensive Reference Devdoc.io: https://devdocs.io/html/
- HTML Cheatsheet:
- http://www.simplehtmlguide.com/cheatsheet.php
 - https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf (from Stanford
University)

Exercise 2: Make the business open for the whole world!

Now, it’s time to make some profit! 💸💰

The website will go live with Github Pages!

For step by step instructions, please follow the link here: https://pages.github.com/

This will be different from last week since this is not your personal website anymore. This is
an actual project, so make sure to choose the “Project site” option to see the appropriate
instructions.

If you are not too familiar with Git commands then you can install Github Desktop like
instructed to help you push the index.html to the github repo.

Make sure you have a Github account for this exercise!

By the end of this exercise, your business website should be hosted on this url:
http://username.github.io/your_business_website_repository_name
Exercise 3: HTML Validator

Use this validator service to validate your HTML code. You should validate your work
gradually and not just when you finish it all.

Using an HTML validator can have several benefits:

● Ensuring compliance with web standards: HTML validators check your HTML
code against the official HTML specifications set by the World Wide Web Consortium
(W3C). By ensuring that your code adheres to these standards, you can ensure that
your website will be viewable on a wide variety of devices and browsers.
● Improving website accessibility: HTML validators can identify accessibility issues
such as missing alt attributes on images or invalid form markup. By fixing these
issues, you can make your website more accessible to users with disabilities.
● Improving website performance: Valid HTML code is often more streamlined and
efficient, which can lead to faster load times and better performance for your website.

Exercise 4: Test your website with Google PageSpeed

This exercise is optional, and you can only do it if your site is hosted online.
Use Google PageSpeed Insights to analyze your page. You can see how good your site is
according to the Google ranking algorithm, and you can use it to update/improve your site.
This is very important if you want your site to appear first in Google search results.

Google PageSpeed is a tool that analyzes the performance of your website and provides
suggestions on how to improve it. Here are some reasons why you should use Google
PageSpeed:
● Improve website speed: Google PageSpeed analyzes the performance of your
website and provides suggestions on how to improve its speed. This can help
improve the user experience of your website, as visitors are more likely to stay on a
site that loads quickly.
● Increase website visibility: Website speed is a key factor in search engine
rankings. By improving your website's speed, you can increase its visibility in search
engine results pages.
● Enhance mobile experience: Google PageSpeed also provides suggestions on
how to optimise your website for mobile devices. This can help improve the mobile
user experience and ensure that your website is accessible to users on all devices.
● Fix website issues: Google PageSpeed can identify website issues such as broken
links or missing images. By fixing these issues, you can improve the functionality and
usability of your website.
Overall, using Google PageSpeed can help improve the performance and usability of your
website, which can lead to a better user experience, increased visibility in search engine
results pages, and ultimately, more traffic and conversions.

Please note: in the final group project, Google PageSpeed will be one of the criteria
for your website as it is essential for the website to be acknowledged to be worthy for
Google Search results.

Exercise 5: Join the COSC2430 HTML Personal Website

Competition with your live resume!

You are making a great website! How do you know it is good enough? Or you want to earn
some activity points which accumulate for the free buffet vouchers later on?

We will vote for the best personal website using PollUnit! Please join this link:
https://pollunit.com/polls/toyvje348c2zdajo8ykwow
Likewise, you can scan this QR code to join the competition:

To join the competition, you need to:

1. Add a new option to add your website to the competition.

2. For the title, you can put your name or website name.
3. For the file, please upload the full screenshot image of your website.
4. For the subtitle, please put studentID so I know who the winners are later on.
5. In the link, please put in the live github page url of your website for the audience to
see it in action.

Voting is anonymous, so please feel free to vote for any website(s) you like!

The duration for the competition this time will be 2-week as there are quite a few tasks
you need to complete for your first business website. So the deadline is on the 27th
March, as I will announce the winners at the Monday lecture.

You can vote for other websites you like as well. By the deadline, Tom will finalise the top 3
winners with the most votes for some activity points. He will also select one extra winner by
one his preference. So 4 winners in total! Hopefully, we will do this for every tutorial so you
can have some motivation to work hard on your web development skill!

That’s it! Good job for completing all the lab questions! You are one step closer to an
amazing web developer!