PHP
HTML
Dr. Amar Nath Singh
Professor, CSE Department
1
Web Technology
Outline
• HTML
• Tags
• Form Attribute
• File Path
• Types of file path
• Iframe
• Class and id
28-01-2026 Dr. Amar Nath Singh 2
Web Technology
Objectives
1. Learn the HTML and key components like functions, headers, and
syntax.
2. Explore HTML and its various component to design the
interactive layout
3. Gain skills in designing of web pages and enhance the document
visibility.
28-01-2026 Dr. Amar Nath Singh 3
Web Technology
Lecture Structure
05
Outline & Objectives
Minutes
05
Recap of Previous Lecture
Minutes
30 Delivery of Actual Content as per
Minutes Lesson Plan
05
Industry Relevance
Minutes
10
Interactive Activities
Minutes
02
Importance of Discipline
Minutes
03
Recording of Attendance
Minutes
28-01-2026 Dr. Amar Nath Singh 4
Web Technology
Recap of Previous Lecture
1. Things You Should Know First:
2. Basic computer skills (using keyboard, files, software).
3. Logical thinking to break problems into steps.
4. Familiarity with flowcharts or step-by-step instructions.
28-01-2026 Dr. Amar Nath Singh 5
Introduction to C- Programming
HTML
1. HTML is a language for describing web pages.
2. HTML stands for Hyper Text Markup Language
3. HTML is not a programming language, it is a markup
language
4. A markup language is a set of markup tags
5. HTML uses markup tags to describe web pages
28-01-2026 Dr. Amar Nath Singh 6
Web Technology
OBJECTIVE OF HTML
1. create, save and view a HTML document
2. format a web page using section heading tags
3. describe Ordered and Unordered lists
4. explain graphics in HTML document
5. describe hypertext links and making text/image link
28-01-2026 Dr. Amar Nath Singh 7
Web Technology
WORLD WIDE WEB
The World Wide Web (abbreviated
as WWW or W3 and commonly known as the
Web)is a system of
interlinked hypertext documents accessed via
the Internet. With a web browser, one can
view web pages that may contain text, images,
videos, and other multimedia and navigate
between them via hyperlinks.
28-01-2026 Dr. Amar Nath Singh 8
Web Technology
HTML TOOLS
There are two tools of HTML.
a) HTML Editor: it is the program that one uses to
create and save HTML documents. They fall into two
categories:
- Text based or code based which allows one to see the
HTML code as one is creating a document.e.g.
Notepad.
- Netscape composer
28-01-2026 Dr. Amar Nath Singh 9
Web Technology
HTML TOOLS
b) Web Browser:
It is the program that one uses to view and test the
HTML documents. They translate Html encoded files
into text, image, sounds and other features user see.
Microsoft Internet Explorer, Netscape, Mosaic Chrome
are examples of browsers that enables user to view
text and images and many more other World Wide Web
features. They are software that must be installed on
user computer.
28-01-2026 Dr. Amar Nath Singh 10
Web Technology
HTML TERMINOLGY
Some commonly used terms in HTML are:
a)Tag: Tags are always written within angles brackets. it is a piece of
text is used to identify an element so that the browser realizes how to
display its contents. e.g.<HTML> tag indicates the start of an HTML
document .HTML tag can be two types. They are:-
-Paired Tags :A tag is said to be a paired tag if text is placed
between a tag and its companions [Link] paired tag ,the first tag is
referred to as opening tag and the second tag is referred to as
closing tag.
-Unpaired Tags: An unpaired tag does not have a companion tag
.unpaired tag also known as singular or Stand-Alone tags.
e.g:<br>,<hr> etc.
28-01-2026 Dr. Amar Nath Singh 11
Web Technology
HTML TERMINOLGY
b) Attribute: Attribute is the property of a tag that specified
in the opening angle brackets. It supplies additional information
like color, size, home font-style etc to the browser about a tag.
E.g. most of the common attributes are height, color, width,
src, border, align etc.
c) DTD: Document Type Definition is a collection of rules
written in standard Generalized Markup Language(SGML).HTML
is defined in terms of its DTDS. All the details of HTML tags,
entities and related document structure are defined in the
DTDS.
d) ELEMENT: Element is the component of a document’s
structure such as a title, a paragraph or a list. It can include an
opening and a closing tag and the contents within it.
28-01-2026 Dr. Amar Nath Singh 12
Web Technology
HOW TO CREATE AN HTML DOCUMENT
The essential tags that are required to create a HTML document are:
<HTML>.............</HTML>
<HEAD>.............</HEAD>
<BODY>.............</BODY>
28-01-2026 Dr. Amar Nath Singh 13
Web Technology
HTML Tag <HTML>
1. The <HTML> tag encloses all other HTML tags and associated text within
your document. It is an optional tag. You can create an HTML document
that omits these tags, and your browser can still read it and display it.
But it is always a good form to include the start and stop tags. The
format is:
<HTML>
Your Title and Document (contains text with HTML tags) goes here
</HTML>
2. Most HTML tags have two parts, an opening tag and closing tag. The
closing tag is the same as the opening tag, except for the slash
mark e.g. </HTML>. The slash mark is always used in closing tags.
28-01-2026 Dr. Amar Nath Singh 14
Web Technology
HTML document distinct parts HEAD and BODY
<HTML>
<HEAD>
.............
.............
.............
</HEAD>
<BODY>
.............
.............
.............
</BODY>
</HTML>
28-01-2026 Dr. Amar Nath Singh 15
Web Technology
HEAD Tag <HEAD>
HEAD tag comes after the HTML start tag. It contains TITLE tag to give the document a
title that displays on the browsers title bar at the top. The Format is:
<HEAD>
<TITLE>
Your title goes here
</TITLE>
</HEAD>
28-01-2026 Dr. Amar Nath Singh 16
Web Technology
Attributes used with <BODY>
BGCOLOR: It is used to set the background color for the document Example:
<BODY BGCOLOR="yellow">
Your document text goes here.
</BODY>
TEXT: used to set the color of the text of the document Example:
<BODY TEXT="red">Introduction to HTML
Document text changed to red color
</BODY>
Document text changed to red color
28-01-2026 Dr. Amar Nath Singh 17
Web Technology
Attributes used with <BODY>
MARGINS: set the left hand/right hand margin of the document.
LEFTMARGIN: set the left hand margin of the document Example:
<BODY LEFTMARGIN="60">
This document is indented 60 pixels from the left hand side
of the page.
</BODY>
TOPMARGIN: set the left hand margin of the document Example:
<BODY TOPMARGIN="60">
This document is indented 60 pixels from the top of the page.
</BODY>
28-01-2026 Dr. Amar Nath Singh 18
Web Technology
Attributes used with <BODY>
BACKGROUND: It is used to point to an image file (the files with an extension .gif, .jpeg)
that will be used as the background of the document. The image file will be tiled across
the document. Example:
<BODY BACKGROUND="filename. if">
Your document text goes here
</BODY>
28-01-2026 Dr. Amar Nath Singh 19
Web Technology
Example: An HTML document, [Link]
shows the different section headings
.
<HTML>
<HEAD>
<TITLE>
Section Heading
</TITLE>
</HEAD>
<BODY>
<H1> This is Section Heading 1 </H1>
<H2> This is Section Heading 2 </H2>
<H3> This is Section Heading 3 </H3>
<H4> This is Section Heading 4 </H4>
<H5> This is Section Heading 5 </H5>
<H6> This is Section Heading 6 </H6>
</BODY>
</HTML>
28-01-2026 Dr. Amar Nath Singh 20
Web Technology
SPECIAL CHARTACTER
There are certain special characters that can be used while creating
[Link] are some special character:
Symbols Entity
©, ® ©, ®
¼, ½, ¾ ¼, ½, ¾
÷, <, >, ≤,≥ ÷, <, >, &le, &ge
& &
&spades, &clubs, &hearts
All these special character must be ended with a semicolon;
28-01-2026 Dr. Amar Nath Singh 21
Web Technology
Example:
<PRE>
The copyright symbol is: ©
The registered rank is: ®
</PRE>
Output:
The copyright symbol is:©
The registered rank is:®
28-01-2026 Dr. Amar Nath Singh 22
Web Technology
ADVANTAGES OF HTML
1. Easy to use
2. Loose syntax (although, being too flexible will not comply with standards).
3. Supported on almost every browser, if not all browsers.
4. Widely used; established on almost every website, if not all websites.
5. Very similar to XML syntax, which is increasingly used for data storage.
6. Free - You need not buy any software.
7. Easy to learn & code even for novice programmers.
28-01-2026 Dr. Amar Nath Singh 23
Web Technology
DISADVANTAGES OF HTML
1. It cannot produce dynamic output alone, since it is a static language
2. Sometimes, the structuring of HTML documents is hard to grasp
3. You have to keep up with deprecated tags, and make sure not to use
them
4. Deprecated tags appear because another language that works with
HTML has replaced the original work of the tag; thus the other
language needs to be learned (most of the time, it is CSS)
5. Security features offered by HTML are limited
28-01-2026 Dr. Amar Nath Singh 24
Web Technology
Connecting to real world scenario
1. SIZE: Sets the size of the text, takes value between 1 and 7, default is 3.
Size can also be set relative to default size
for example; SIZE=+X, where X is any integer value and it will add with the
default size.
Example:
<FONT SIZE=5> Font Size changes to 5 </FONT>
2. FACE: Sets the normal font type, provided it is installed on the user’s
machine.
Example:
<FONT FACE="ARIAL"> the text will be displayed in Arial</FONT>
28-01-2026 Dr. Amar Nath Singh 25
Web Technology
Interactive Activities
1. create a HTML page, which has properly aligned
paragraphs with image, display list of items in
different styles .
2. various text formatting tags available in
HTML.(i.e.<h1>,<b>,<u> etc…), special characters.
3. Create a
HTML file which displays 3 images at LEFT, RIGHT
and CENTER
respectively in the browser.
28-01-2026 Dr. Amar Nath Singh 26
Web Technology
Discipline Guidelines
• DCS & GSFCU Portal: Remind students to use DCS, talk about it’s features and instruct all to visit GSFCU website
• Discipline, Values and Ethics.
• GSFC University – My University: Emphasize the importance of taking ownership of the University.
• Respect & Courtesy: Remind students to be respectful to peers, teachers, and staff. Encourage polite language
and behavior.
• Punctuality: Emphasize the importance of arriving on time to class and completing assignments by deadlines.
• Classroom Rules: Reinforce basic classroom rules, such as keeping mobile phones on silent and maintaining a
clean environment.
• Safety: Remind students about safety protocols, whether it's physical safety in the classroom or digital safety when
using online resources.
• Positive Attitude: Encourage a positive mindset, cooperation and supporting one another.
28-01-2026 Dr. Amar Nath Singh 27
Web Technology
GSFCU & Values
Respect & Courtesy
28-01-2026 Dr. Amar Nath Singh 28
Thank You..
28-01-2026 Dr. Amar Nath Singh 29