WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP

LANGUAGE

CHAPTER 1:
Hypertext Mark Up Language

INTRODUCTION:

HTML is a fairly simple language made up of elements, which can be applied

to pieces of text to give them different meaning in a document (Is it a paragraph? Is it

a bulleted list? Is it part of a table?), structure a document into logical sections (Does

it have a header? Three columns of content? A navigation menu?), and embed

content such as images and videos into a page. This module will introduce the first

two of these and introduce fundamental concepts and syntax you need to know to

understand HTML.

Before starting this module, you don't need any previous HTML knowledge,

but you should have at least basic familiarity with using computers and using the web

passively (i.e., just looking at it and consuming content). You should have a basic

work environment set up (as detailed in Installing basic software), and understand

how to create and manage files (as detailed in Dealing with files). Both are parts of

our Getting started with the web complete beginner's module.

1|P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

LESSON 1
INTRODUCTION TO HTML

OBJECTIVES

At the end of the lesson, you should be able to:

 Understand the advantages of HTML

 Learn the HTML basic document HTML

 Define HTML

 Identify the application of HTML

PRE-ASSESSMENT

A. Multiple Choice:

Directions: Encircle the letter of the correct answer.

1. HTML stands for _________.

a. Hypertext Mark Language

b. Hyper Mark Up Language

c. Hypertext Mark Up Language

2|P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

d. Hypertext Marking Up Language

2. Who created HTML?

a. Bill Gates

b. Berners-Lee

c. Lady Ada Lovelace

d. Charles Babbage

3. HTML is being widely used to format web pages with the help of different _______
available in HTML language.

a. Tags

b. Version

c. Code

d. Syntax

4. What was the first standard HTML specification which was published in 1995?

a. HTML 1.0

b. HTML 2.0

c. HTML 3.0

d. HTML 4.0

5. What HTML version we currently used?

a. HTML 4

b. HTML 4.1

c. HTML 5.1

d. HTML 5

B. ENUMERATION:

Directions: List down the Applications of HTML

1. _______________

3|P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

2. _______________

3. _______________

4. _______________

5. _______________

STUDY

HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to

develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first

standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML

and it was published in late 1999. Though HTML 4.01 version is widely used but currently we are

having HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.

Why to Learn HTML?

Originally, HTML was developed with the intent of defining the structure of

documents like headings, paragraphs, lists, and so forth to facilitate the sharing of

scientific information between researchers. Now, HTML is being widely used to

format web pages with the help of different tags available in HTML language.

HTML is a MUST for students and working professionals to become a great

Software Engineer specially when they are working in Web Development Domain. I

will list down some of the key advantages of learning HTML:

 Create Web site - You can create a website or customize an existing web

template if you know HTML well.

4|P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

 Become a web designer - If you want to start a career as a professional web

designer, HTML and CSS designing is a must skill.

 Understand web - If you want to optimize your website, to boost its speed

and performance, it is good to know HTML to yield best results.

 Learn other languages - Once you understand the basic of HTML then other

related technologies like JavaScript, php, or angular are become easier to

understand.

Hello World using HTML.

Just to give you a little excitement about HTML, I'm going to give you a small

conventional HTML Hello World program

<!DOCTYPE html>

<html>

<head>

<title>This is document title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>Hello World!</p>

</body>

</html>

5|P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

Applications of HTML

As mentioned before, HTML is one of the most widely used language over the web.

I'm going to list few of them here:

 Web pages development - HTML is used to create pages which are

rendered over the web. Almost every page of web is having html tags in it to

render its details in browser.

 Internet Navigation - HTML provides tags which are used to navigate from

one page to another and is heavily used in internet navigation.

 Responsive UI - HTML pages now-a-days works well on all platform, mobile,

tabs, desktop or laptops owing to responsive design strategy.

 Offline support HTML pages once loaded can be made available offline on

the machine without any need of internet.

 Game development- HTML5 has native support for rich experience and is

now useful in gaming developent arena as well.

Audience

This HTML tutorial is designed for the aspiring Web Designers and Developers

with a need to understand the HTML in enough detail along with its simple

overview, and practical examples. This tutorial will give you enough ingredients to

start with HTML from where you can take yourself at higher level of expertise.

Prerequisites

6|P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

Before proceeding with this tutorial you should have a basic working knowledge

with Windows or Linux operating system, additionally you must be familiar with −

 Experience with any text editor like notepad, notepad++, or Edit plus etc.

 How to create directories and files on your computer.

 How to navigate through different directories.

 How to type content in a file and save them on a computer.

 Understanding about images in different formats like JPEG, PNG format.

SELF CHECK 1.1-1

C. Multiple Choice:

Directions: Encircle the letter of the correct answer.

1. HTML stands for _________.

a. Hypertext Mark Language

b. Hyper Mark Up Language

c. Hypertext Mark Up Language

d. Hypertext Marking Up Language

2. Who created HTML?

a. Bill Gates

b. Berners-Lee

c. Lady Ada Lovelace

d. Charles Babbage

7|P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

3. HTML is being widely used to format web pages with the help of different _______
available in HTML language.

a. Tags

b. Version

c. Code

d. Syntax

4. What was the first standard HTML specification which was published in 1995?

e. HTML 1.0

f. HTML 2.0

g. HTML 3.0

h. HTML 4.0

5. What HTML version we currently used?

a. HTML 4

b. HTML 4.1

c. HTML 5.1

d. HTML 5

II. ENUMERATION:

Directions: List down the Applications of HTML

6. _______________

7. _______________

8. _______________

9. _______________

10. _______________

8|P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

LESSON 2
HTML TEXT EDITORS

OBJECTIVES

At the end of the lesson, you should be able to:

 Demonstrate the steps how to open HTML Text editors

 Install HTML Editors

 Describe the HTML Environment

PRE-ASSESSMENT

A. Enumeration:z`

1. Give the steps how to manipulate a Web page using Notepad.

a.

b.

c.

d.

2. Give the steps how to manipulate a Web page using Sublime.

a.

9|P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

b.

c.

d.

STUDY

HTML text Editors

o An HTML file is a text file, so to create an HTML file we can use any text

editors.

o Text editors are the programs which allow editing in a written text, hence to

create a web page we need to write our code in some text editor.

o There are various types of text editors available which you can directly

download, but for a beginner, the best text editor is Notepad (Windows) or

TextEdit (Mac).

o After learning the basics, you can easily use other professional text editors

which are, Notepad++, Sublime Text, Vim, etc.

o In our lesson, we will use Notepad and sublime text editor. Following are

some easy ways to create your first web page with Notepad, and sublime text

A. HTML code with Notepad. (Recommended for Beginners)

Notepad is a simple text editor and suitable for beginners to learn HTML. It is

available in all versions of Windows, from where you easily access it.

10 | P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

Step 1: Open Notepad (Windows)

Step 2: Write code in HTML

Step 3: Save the HTML file with .htm or .html extension.

11 | P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

Step 4: Open the HTML page in your web browser.

To run the HTML page, you need to open the file location, where you have saved the

file and then either double-click on file or click on open with option

12 | P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

B. HTML code with Sublime Text-editor.(Recommended after learning basics of

HTML)

When you will learn the basics of HTML, then you can use some professional text

editors, which will help you to write an efficient and fast code. So to use Sublime

Text editors, first it needs to download and install from internet. You can easily

download it from this https://www.sublimetext.com/download link and can install in

your PC. When installation of Sublime text editor done then you can follow the

simple steps to use it:

Step 1: Open Sublime Text editor:

13 | P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

To open Sublime Text editor, go to Start screen ⤏ type Sublime Text⤏ Open it.

To open a new page press CTRL+N.

Step 2: Save the page before writing any code.

To save your page in Sublime Text press Ctrl+S or go to File option ⤏ save, to save

a file use extension .htm or .html. We recommend to save the file first then write the

14 | P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

code because after saving the page sublime text editor will give you suggestions to

write code.

Step 3: Write the code in Sublime Text editor

Step 4: Open the HTML page in your Browser

To execute or open this page in Web browser just right click by mouse on sublime

text page and click on Open in Browser.

15 | P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

Note: You can execute HTML file in any browser, but there are some tags

which are not supported by Some Web browser

16 | P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

SELF CHECK 2.1-1

B. Enumeration:

3. Give the steps how to manipulate a Web page using Notepad.

a.

b.

c.

d.

4. Give the steps how to manipulate a Web page using Sublime.

a.

b.

c.

d.

17 | P a g e
WEB DEVELOPMENT CHAPTER 1: HYPERTEXT MARK UP
LANGUAGE

18 | P a g e