HTML 1

COSC2430 - Web Programming

Tom Huynh
School of Science, Engineering & Technology
RMIT University Vietnam
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

—
History of The Internet & World Wide Wide (WWW) 🌐
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

What is the internet?

• The internet is an international network of connected computers. No
company owns the internet; it is a cooperative effort governed by a
system of standards and rules. The purpose of the internet is to share
information.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Internet History

https://www.vox.com/a/internet-maps
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Submarine Cable Map

https://www.submarinecablemap.com
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

The internet map

http://internet-map.net/
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

The creator of the world wide web

• Tim Berners-Lee is a computer scientist and the inventor of the
World Wide Web 1989.
• In 1989, he proposed the concept of a global system for sharing
and accessing information over the Internet.for what would
become the World Wide Web.
• Berners-Lee went on to develop
the first web browser and server.
• In 1991 he made the World Wide
Web freely available to the public.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

—
How the internet works? ⚙
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

HTTP Protocol
• HTTP stands for Hypertext Transfer Protocol, and it is a protocol used for transmitting
data over the World Wide Web.
• It is the underlying protocol that governs the communication between web servers
and web browsers, allowing users to access and interact with websites.
• HTTPS stands for Hypertext Transfer Protocol Secure, it is a more secure version of
the HTTP protocol that uses encryption to protect the privacy and sensitive data such
as passwords, credit card numbers, and other personal information.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

First Step: get the IP Address from DNS

• ISP (Internet Service Provider) is a company that provides Internet access services to individuals or
organizations.
o Example in Vietnam: Viettel, FPT Telecom, VNPT.
• DNS (Domain Name System) which is a system that translates human-readable domain names (like
www.example.com) into IP addresses (like 192.0.2.1) that computers use to identify each other on the
internet.
o Popular examples: Google Public DNS, Cloudflare DNS and OpenDNS.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Second Step: get web resources of the website

 RMIT
RMIT Classification:
Classification: Trusted
Trusted

NS Lookup
• NsLookup.io allows you to check the IP address of a website.
• Keep in mind, some websites do not allow you to access their
websites using their IP Address of the web server directly.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Web page addresses (URLs)

• Every page and resource on the web has its own special address called a URL, which
stands for Uniform Resource Locator.
• The W3C and the development community are moving away from the term URL
(Uniform Resource Locator) and toward the more generic and technically accurate
URI (Uniform Resource Identifier). On the street and even on the job, however, you’re
still likely to hear URL.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

The future of websites

• As we design websites, we will also focus on the idea of
responsive web design (RWD) which make sure our web
applications looking good and functional on all screen sizes.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

—
What time is it? ⏰
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

It's a lucky draw fun time! 🧧🎲

▪ It’s time to test your luck of this semester!
▪ Pick a random number of your choice from 1 to 130.
▪ Send it in the chat (You got 3 minutes!).
▪ I will pick 3 random numbers from the lucky wheel.
▪ I will spin the wheel until we got at least 3 winners.
▪ People with the same winning number, I will spin create a new
spin to pick a winner among them.
▪ So choose an unique number is better!

https://wheelofnames.com/j8j-nzf
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

—
HTML 🆚 CSS 🆚 Javascript
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

HTML 🆚 CSS 🆚 Javascript

➕ ➕

HTML CSS Javascript

=
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Front-end Web Development

• The front-end of the web is based on three major technologies:
• HTML as "Content & Structure":
o HyperText Markup Language (HTML) defines the structure,
content and semantics of web pages on the web.

• CSS as "Presentation & Styling":

o Cascading Style Sheets (CSS) sets the look and style of a
web page.
o CSS provides style to the structure provided by HTML.

• JavaScript (js) as "Interaction & Behavior":

o JavaScript allows us to define interaction in our pages.
o What happens when a user clicks on a certain area?
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Rainbow Calculator
• Let’s look at an example to see HTML, CSS and
Javascript in action in Codepen.
• Link: https://codepen.io/TomHuynhSG/pen/qBMRNLV
• Let's experiment:
o Remove CSS? What happens?
o Remove Javascript? What happens?
o Remove HTML? What happens?
o Which ones are essential to have a functional
calculator?
o Which one is more difficult for students to do?
Why?
 RMIT Classification: Trusted

What tools do we need to start?

• A Web Browser (Pick One) • A Text Editor (Pick One)
o Google Chrome (Recommended) o Visual Studio Code (Recommended)
o Mozilla Firefox o Sublime Text
o Apple Safari o Atom.io
o Brackets
o Microsoft Edge
o Notepad ++
o Internet Explorer (IE) (Don’t!!!)
o TextMate
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Recommended Chrome Extensions

• Here are a few recommended Chrome Extensions for
beginner web developers:
o Web Developer: Adds a toolbar button with various web
developer tools. Link here!
o Wappalyzer: a technology profiler that shows you what
websites are built with. Link here!
o Pesticide for Chrome: outline each HTML element to better
see the locations of them on the page. Link here!
o ColorZilla: helps you get a color reading from any point in
your browser. Link here!
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Recommended Visual Studio Code Extensions

• Live Server: Launch a development local Server on your
laptop with live reload feature for web pages. Link here!
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Chrome Inspector is your new best friend!

• Chrome Inspector, also known as Chrome
DevTools, is a set of debugging and web
development tools built into the Google
Chrome browser.
• It allows developers to inspect and debug
web pages and web applications in
real-time.
• The tool provides a range of features,
including a console for running JavaScript
commands, inspecting HTML and CSS,
analyzing network traffic, debugging
JavaScript code, and simulating mobile
devices.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

—
HTML - HyperText Markup Language
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

HyperText Markup Language (HTML)

• HTML stands for HyperText Markup Language.
• To understand it, let's break it down into two parts:
o HyperText.
o Markup Language.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

HyperText
• Hypertext is a way of organizing and presenting information
in a document by using links that connect different parts of
the document or different documents together.
• These links allow users to easily navigate and access
related information across different pages on the web.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Hypertext in action
• This is the first website in the world made by Tim Berners-Lee in 1991.

[Question] Open the RMIT Vietnam website

(https://www.rmit.edu.vn/), can you see some of hypertexts?
http://info.cern.ch/hypertext/WWW/TheProject.html
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Wayback Machine
• Wayback Machine to find out what websites used to look like in the olden
days:
o Link: https://archive.org/web/
[Question] Can you
figure out what the
website of RMIT
Vietnam looked like
in 2002? or RMIT
Melbourne Website
looks like in 2001?

yahoo.com website now in 2023 yahoo.com website in 1996

 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Markup Language
• Markup language is a way to add structure and formatting to plain
text documents.
• Markup languages like HTML are used to add meaning and
structure to content, making it easier to read and understand for
both humans and machines.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Famous computer scientists' resume websites

https://www.cs.dartmouth.edu/~thc/
http://www.cs.cornell.edu/home/kleinber/ Let's learn to make a better resume website by the
https://www-cs-faculty.stanford.edu/~knuth/
http://www.robotics.stanford.edu/~ang/contact.html end of this course! 🤞
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Modern Resume Website

• Hopefully, by the end of the course, you will learn enough to
make this kind of resume website:
o Link: https://www.pascalvangemert.nl/#/experiences
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Anatomy of a HTML Tag

• An HTML tag consists of several parts, including:
o Opening tag: The opening tag is the first part of an HTML tag and consists of the tag
name surrounded by angle brackets (< >).
• For example, the opening tag for the biggest header 1 is "<h1>".
o Content: The content of an HTML tag is the information that appears between the opening
and closing tags.
• For example, the content of a header 1 tag (<h1>) might be a sentence or a block of text.
o Closing tag: The closing tag is the last part of an HTML tag and is identical to the opening
tag, except that it includes a forward slash before the tag name.
• For example, the closing tag for a header 1 is "</h1>".
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

HTML Tag Attributes

• HTML tag attributes are additional properties that can be added to
an HTML tag to provide extra information about the tag's content or
behavior.
• In the below example, "href" attribute for links, which specifies the
URL the link points to.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Basic structure of HTML document

1. DOCTYPE tells browsers
which HTML version to use.
2. HTML element is the root and
contains all other elements.
3. Head and body elements
divide the document.
4. Meta elements provide
document metadata, including
character encoding.
5. Title element is required and
provides a descriptive title.
6. Body element contains
content to display in the
browser.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

HTML Version History 📖

1. HTML 1.0 (1993): This was the first version of HTML, and it included basic tags
such as <head>, <title>, and <body>. It also supported linking to other documents
with the <a> tag.
2. HTML 2.0 (1995): This version added support for tables and image maps, as well
as improved forms.
3. HTML 3.2 (1997): This version included support for frames and improved table
support, as well as new form controls.
4. HTML 4.0 (1999): This version added support for Cascading Style Sheets (CSS),
which allowed for more control over the visual presentation of documents.
5. HTML5 (2014 - Latest Version): This version introduced many new features,
such as native video and audio support, new form controls, and new semantic
tags to better structure content. It also provided better support for accessibility
and mobile devices.

➜ We will only focus only HTML5 tags and features onward in this course!
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

HTML5 Tags You Need To Know!

• <a> • <hr> • <script>
• <body> • <html> • <section>
• <br> • <iframe> • <select>
• <button> • <img> • <span>
• <canvas> • <input> • <strong>
• <div> • <label> • <style>
• <em> • <li> • <textarea>
• <embed> • <link> • <title>
• <footer> • <meta> • <ul>
• <form> • <nav>
• <head> • <ol> It may seems a lot of tags to learn but these are
• <header> • <option> essential if you want to build a good website! So
take your time to go through each of them in the
• <h1> to <h6> • <p>
reference HTML links I provided in the next slide.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

The best resource/reference to learn HTML

• MDN (Mozilla Developer Network) is widely considered one of the
best websites to learn HTML (and web development in general)
o Link: https://developer.mozilla.org/en-US/docs/Web/HTML
• HTML Reference IO:
o Link: https://htmlreference.io/
• Comprehensive Reference Devdoc.io:
o Link: https://devdocs.io/html/
• HTML Cheatsheet:
o Link: http://www.simplehtmlguide.com/cheatsheet.php
o Link: https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf (from
Stanford University)
• Wayback Machine to find out what websites used to look like in the olden days:
o Link: https://archive.org/web/
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

—
Let's dive deeper with some basic HTML Tags
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

<h1> to <h6> tags (Heading elements)

• The <h1> to <h6> HTML elements represent six levels of section
headings.
o <h1> is the highest section level and <h6> is the lowest.

[Question] Do we have header level 7, 8 or 9? Can you try?

Why does it work or work not?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

<p> tag (Paragraph element)

• The <p> HTML element represents a paragraph.
• By default, browsers separate paragraphs with a single blank line.

[Question] What is the attribute of <p> tag to present extra

information to readers as a pop-up tooltip? (hint: check MDN)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

<br> tag (Line Break element)

• The <br> HTML element produces a line break in text (add a new line).
• It is useful for writing a poem or an address, where the division of lines is
significant.

[Question] Can you notice of the break space difference

between two <p> elements and <br> tags?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

<hr> tag (Horizontal Rule)

• The <hr> HTML element represents a thematic break
between paragraph-level elements: for example, a change of
scene in a story, or a shift of topic within a section.

[Question] What is the special attribute of <hr> tag to adjust the

thickness of the line? (hint: check MDN)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Example with some HTML tags

• With a few basic HTML tags, you can start to organize
content in some logical and neat ways and sections.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

Comments in HTML
• In HTML, comments are used to add notes or explanations about a
piece of code that are not meant to be displayed on the webpage.
• Comments start with <!-- and end with -->.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

<ul> tag (Unordered List element)

• The <ul> HTML element represents an unordered list of
items, typically rendered as a bulleted list.

[Question] Can you customize or select

how the bulleted points look like instead
of just boring circle? (hint: check MDN)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

<ol> tag (Ordered List element)

• The <ol> HTML element represents an ordered list of items —
typically rendered as a numbered list.

[Question] What attributes of ol tag helps you to

customize how the orderer list should look like instead
of just numbering from 1 to n?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

<a> tag (Anchor “hyperlink” element)

• The <a> HTML element (or anchor element), with its href attribute, creates a
hyperlink to web pages, files, email addresses, locations in the same page,
or anything else a URL can address.

[Question] The above anchor link for the

website will replace your current website
with the SSET website instead of opening it
in a new tab, can you figure out why and
how? (Hint: check MDN website)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

<a> tag (Linking to another local HTML file)

• anchor tag can also link (hyperlink) to another local HTML file in a
different folder like so:

a-subpage-anchor.html

Folder structure:
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

<img> tag (Image Embed element)

• The <img> HTML element embeds an image into the document.

✅ ❌

[Explanation] When <img> tag

cannot load the image then the
alt text will be shown instead.

[Question] Hmmm, the cat image is pretty huge,

is there any special attributes of img tag to resize
an image display? (Hint: check MDN website)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

COSC2430 Materials Github Repo

• All of the file examples of the lectures and tutorials will be uploaded
weekly and available for everyone to check them out.
• Github repository link.
• Live demo link of HTML 1 lecture.
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

—
Let's create your first simple HTML website in the tutorial! 🤯
 RMIT
RMIT Classification:
Classification: Trusted
Trusted

More history of the Internet (Optional)

• If you're still eager to learn about the fascinating origins of
the internet and the world wide web, I've got you covered!
• Trust me, the entire Crash Course series on computer
science is a must-see!
• Here are the links:
o Computer Networks.
o Internet.
o World Wide Web.
 RMIT Classification: Trusted

“Motivation is what gets you started.

Habit is what keeps you going.”
Jim Ryun
 RMIT Classification: Trusted

Copyright © 2022 RMIT University Vietnam