Computing Fundamentals 1

Getting Started with HTML5 Program

Module 008 Getting Started with HTML5 Program

At the end of this module you are expected to:
1. Explain what is HTML
2. Discuss the history of HTML
3. Explain how HTML programs work

Lesson 1: What is HTML?

The World Wide Web and Websites
A website is a collection of information located on a server connected to the World Wide Web
(WWW). Websites include links to other sites in the form of hypertext, highlighted or
colored text that a user can click on using the mouse cursor, instructing their computer to
jump to a certain web page or website.

Every website has a specific web address on the WWW. These addresses end with extensions
that indicate the type of organization providing the website, for example, .gov for
government agencies, .edu for academic institutions, and .com for commercial enterprises. A
user’s computer must have an Internet connection and a browser to retrieve and read
information from a website.

Figure 1: Examples of Famous Websites

Source:
https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2017%2F
10%2Fwebsites.jpg&w=1600&q=70
Date Retrieved: October 15, 2018

Course Module
HTML Defined
HTML or Hypertext Markup Language is mark-up language used to create webpages
and/or websites. A markup language is being utilized to create a webpage to show the
multimedia documents. The Hypertext Markup language is the standard language used on
web for developing websites

Hypertext is the method by which you move around on the web by clicking on special text
called hyperlinks which bring you to the next page. While markup is used to format the
appearance of your website. Basically, HTML describes what a website looks like.

HTML was developed by Tim Berners-Lee in 1991 and has since been the standard for
creating and designing websites. It now constantly goes through changes that is maintained
by the W3C (World Wide Web Consortium). The W3C is the organization in-charge with
designing and maintaining HTML

HTML is consist of a series of short codes typed into a text-file. These short codes usually
contain HTML tags. HTML tags are symbols that tell your browser how to display the text of
a webpage. Programmers use HTML tags to design and create websites. We will discuss more
on HTML tags in the next chapter.

Figure 2: Examples of an HTML Program

Source: https://www.w3schools.com/html/img_notepad.png
Date Retrieved: October 15, 2018

In figure 2, you can see an example of an HTML program. The words enclosed with “<” and
“>” symbols are the HTML tags. These play an important role in designing websites.

HTML files are usually created using text editors. These files are usually saved with a “.html”
extension. In this way, you are telling your computer that the file is an HTML document.
These files can then be viewed by using Internet Browsers.
 Computing Fundamentals 3
Getting Started with HTML5 Program

Lesson 2: History of HTML

HTML and its History

Figure 3: Timeline of Web Technologies

Source: http://www.tipsforyourwebsite.com/wp-content/uploads/2017/02/html5-timeline.jpg
Date Retrieved: October 15, 2018

In the 1980s, a physicist named Tim Berners-Lee, who was working for CERN (European
Organization for Nuclear Research) at the time, prototyped and proposed a system called
ENQUIRE. This system will allow Berners-Lee and his fellow researchers at CERN to share
and used documents. This was known as the predecessor of HTML.

Figure 4: Tim Berners-Lee at CERN

Source: https://home.cern/sites/home.web.cern.ch/files/image/featured/2013/12/berners-lee.jpg
Date Retrieved: October 15, 2018
Course Module
In 1989, Berners-Lee proposed yet another kind of system. This system is an internet-based
hypertext system which he then called HTML. The following year, 1990, he began to develop
the browser and the server software.

In late 1991, he released a document called “HTML tags”. This was the first publicly available
description of HTML which he first mentioned over the internet.

In early 1994, Berners-Lee began working with the IETF (Internet Engineering Task
Force), and created an HTML Working Group. And by 1995, they completed HTML 2.0. This
version of HTML was the first to be set as the standard for future HTML implementations.

Figure 5: This logo indicated that a Web site was HTML 2.0 compliant and adhered to HTML 2.0 standards.
Source: https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Valid_HTML_2.0.svg/2000px-
Valid_HTML_2.0.svg.png
Date Retrieved: October 15, 2018

In 1996, specifications of HTML have been since maintained by the W3C.

Figure 6: This logo indicated that a Web site was HTML 2.0 compliant and adhered to HTML 2.0 standards.
Source: https://aws.amazon.com/blogs/opensource/amazon-joins-w3c/
Date Retrieved: October 15, 2018

In 2000, HTML also became an international standard (ISO/IEC 15445:2000). Also in late
1999 up to 2001, HTML 4.01 has been published and refined.
 Computing Fundamentals 5
Getting Started with HTML5 Program

Figure 7: This logo indicated that a Web site was HTML 4.0 compliant and adhered to HTML 4.0 standards.
Source: https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Valid_HTML_4.0.svg/2000px-
Valid_HTML_4.0.svg.png
Date Retrieved: October 15, 2018

In 2004, development for HTML5 has begun in the WHATWG ( Web Hypertext
Application Technology Working Group). This became a joint deliverable with the W3C
in 2008 which was completed and standardized on October 28, 2014.

HTML5 is the current version of HTML being used today. HTML5 also supports mobile web
browsers.

Figure 8: HTML5 Logo

Source: https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTs_cfnVxYXl95EfsyjHYQnnlBmOVmTqNsWdMpY7XItadu1E5Yw
Date Retrieved: October 15, 2018

Course Module
Lesson 3: How Does HTML5 Work?
HTML Files and Tags
As mentioned above, HTML files are consists of tags. These tags are used to format the
appearance of your webpage.

Figure 8: Example of an HTML file and its Tags

Source: https://www.w3schools.com/html/img_notepad.png
Date Retrieved: October 15, 2018

In figure 8, the tags are shown in boxes. These tags do not appear on the actual webpage
because they are used for formatting purposes only. However, the texts “My First Heading”
and “My First paragraph.” are not tags and therefore will be displayed on your webpage.

There are a number of tags available for your to use. We will discuss these tags in the next
module.

Creating HTML Programs

Creating HTML Programs can be done by using any text editors. Here are some example.
a. Notepad
This is one of the most popular text editors used for creating HTML programs. It’s found
on any version of Windows and is easy to use.
 Computing Fundamentals 7
Getting Started with HTML5 Program

Figure 9: Windows Notepad

b. TextEdit
This is the default text editor for Mac Computers. It can also be used for creating HTML
programs.

Figure 10: Text Edit

For professional website development, a number of advance tools can be used. These
applications are usually equipped with features that can make development easier.

Course Module
a. Notepad++
Notepad++ is an advanced text editor that can be used for creating HTML programs.

Figure 11: Notepad++

Source: https://cdn.mos.cms.futurecdn.net/416543cec21b3758ae43072bfa3e52eb-650-80.png
Date Retrieved: October 15, 2018

b. Atom
A powerful text editor that can be used by any platform. It is designed to be simple to
use out of the box, but also easily expandable using hundreds of packages.

Figure 12: Atom

Source: https://cdn.mos.cms.futurecdn.net/bf4798ba31b7c9e32439df59e5169c75-650-80.jpg
Date Retrieved: October 15, 2018
 Computing Fundamentals 9
Getting Started with HTML5 Program

c. Vim
This text editor is for the more advance users. It might be a little difficult to learn at first
but can be a useful tool for web design once mastered.

Figure 13: Vim

Source: https://cdn.mos.cms.futurecdn.net/f4b7a1789dd4942dd25f8c04c7b00ff4-650-80.png
Date Retrieved: October 15, 2018

Viewing HTML Programs

You already know how HTML files are created and the tools used to create them. But how do
you view HTML Programs as Web pages? This is where a web-browser comes into play. Web-
browsers are applications used to view web pages.

There are a number of popular web-browsers that you can use. Here are some of them.

a. Mozilla Firefox
This is the browser developed by Mozilla. It has a lot of features that can make web
browsing smooth.

Course Module
 Figure 14: Mozilla Firefox
Source: https://www.mozilla.org/media/img/firefox/home/new-tab.a1c9f06dcebe.png
Date Retrieved: October 15, 2018

b. Google Chrome
A browser launched by Google. It’s one of the popular web-browser of choice today.

Figure 15: Google Chrome

Source: https://sfogliare.com/wp-content/uploads/2018/09/8683__google_chrome-_for_mac_1_2_12_16.png
Date Retrieved: October 15, 2018
 Computing Fundamentals 11
Getting Started with HTML5 Program

c. Opera
Another alternative web-browser you can use. It has a clean UI and is easy to use. But it
has lesser plugins than its rivals.

Figure 16: Google Chrome

Source: https://sfogliare.com/wp-content/uploads/2018/09/8683__google_chrome-_for_mac_1_2_12_16.png
Date Retrieved: October 15, 2018

d. Microsoft Edge
A browser by Microsoft that is built-in with Windows 10.

Course Module
 Figure 17: Microsoft Edge
Source: https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/449d6486-96d2-11e6-b4e2-
00163ec9f5fa/4033389997/microsoft-edge-screenshot.png
Date Retrieved: October 15, 2018

e. Safari
A browser built-in with every Mac OS.

Figure 18: Safari

References and Supplementary Materials

Books and Journals
1. Jain, R.K. (2015). IT Tools and Business Systems. Delhi, India: Khanna Book Publishing

2. McFedries, P. (2016). My Office 2016. Pearson Education

3. Rich, J.R. (2017). Working in the Cloud: Using Web-Based Applications and Tools to
Collaborate Online. Indianapolis, Indiana: QUE Publishing

Online Supplementary Reading Materials

1. HTML Introduction. https://www.w3schools.com/html/html_intro.asp Date of
Access: October 15, 2018

2. A Brief History of HTML. https://www.wired.com/1997/04/a-brief-history-of-

html/ Date of Access: October 15, 2018

3. How Does HTML Work. http://www.tech-faq.com/how-does-html-work.html Date

of Access: October 15, 2018

4. HTML5 Tutorial. https://www.tutorialspoint.com/html5 Date of Access: October

15, 2018
 Computing Fundamentals 13
Getting Started with HTML5 Program

Online Instructional Videos

1. HTML Crash Course for Beginners. https://www.youtube.com/watch?v=UB1O30fR-
EE Date of Access: October 15, 2018
2. HTML5 Tutorial. https://www.youtube.com/watch?v=kDyJN7qQETADate of
Access: October 15, 2018
3. Learn HTML5. https://www.youtube.com/watch?v=DPnqb74Smug Date of Access:
October 15, 2018

Course Module