INTRODUCTION TO

HYPER TEXT MARKUP LANGUAGE

C.NagaRaju
B.Tech(CSE),M.Tech(CSE),PhD(CSE),MIEEE,MCSI,MISTE
Professor
Department of CSE
YSR Engineering College of YVU
Proddatur

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 1

 Contents
I
• What is Web?
• Types of websites
• How to access the Web?
• How to Addressing the Web
• Domain Name Addressing
• Uniform Resource Locators(URL)
• Domains and protocols
• Structure of HTTP Protocol

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 2

 What is Web?
• The WWW (World Wide Web) is collection of information organized into Web
pages
Web Page: A mixture of text, graphics, sound and animation in the HTML
format, to access information through internet in easy way.
• A collection of linked Web pages that has a common theme or focus is called a
Web site.
• The main page that all of the pages on a particular Web site are organized
around and link back to is called the site’s home page.
• There are two types of web applications:1)Presentation-oriented(HTML, XML
pages) 2)Service-oriented(Web services)

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 3

Types of websites : 1)static 2)dynamic
Static website

•Static website
•Static website is the basic type of website that is easy to create.
•You don't need the knowledge of web programming and database
design to create a static website.
•Its web pages are coded in HTML.
•The codes are fixed for each page so the information contained in
the page does not change and it looks like a printed page.
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 4
Dynamic website

• Dynamic website is a collection of dynamic web pages whose content

changes dynamically.
• It accesses content from a database or Content Management System
(CMS).
• Therefore, when you alter or update the content of the database, the
content of the website is also altered or updated.
• Dynamic website uses client-side scripting or server-side scripting, or
both to generate dynamic content.
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 5
 How to access the Web?
• After a web site is designed it must be stored on a computer called Web server
that can be accessed through the Internet

• Once you have your Internet connection, then you need special software called a
browser called client to access the Web.
• Web browsers are used to connect you to remote computers, open and transfer
files, display text and images.
• Web browsers are specialized programs.
• Examples of Web browser: Netscape Navigator chrome, mozillafirefox and
Internet
28/02/2022Explorer. Prof.C.NagaRaju YSREC,9949218570 6
 How to Addressing the Web:IP Address
• Each computer on the internet does have a unique identification number, called
an IP (Internet Protocol) address.
• The internet IP addressing system currently using a four-part number.
• Each part of the address is a number ranging from 0 to 255, and each part is
separated by period / Dot
• For example, 106.29.242.17
• The combination of the four IP address parts provides 4.2 billion possible
addresses (256 x 256 x 256 x 256).

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 7

 IP addresses
• IP addresses are 32 bits long
10010011 10000110 00000010 00010100
↓ written as a dotted sequence
147.134.2.20

• divided into 5 classes

• class A: start with 0, then 7-bit code
• 224 = 16,777,216 hosts in subnetwork
• class B: start with 10, then 14-bit code
• 216 = 65,536 hosts in subnetwork
• class C: start with 110, then 21-bit code
• 28 = 256 hosts in subnetwork
• class D: start with 1110
• used for multicasting
• class E: start with 11110
• reserved for future use

• IPv6 extends address size to 128 bits

• extensions
28/02/2022 support authentication, data integrity, confidentiality
Prof.C.NagaRaju YSREC,9949218570 8
Domain Name Addressing
• Most web browsers do not use the IP address to locate Web sites and
individual pages.
• They use domain name addressing.
• A domain name is a unique name associated with a specific IP address run by
host computers.
• The program, which coordinates the IP addresses and domain names for all
computers is called DNS (Domain Name System ) software.
• The host computer which runs this software is called a domain name server.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 9

• Domain names can include any number of parts separated by periods.

• For example, the domain name gsb.uchicago.edu is the computer connected to

the Internet at the Graduate School of Business (gsb), which is an academic unit
of the University of Chicago (uchicago), which is an educational institution
(edu).
• however most domain names currently in use have only three or four parts.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 10

Uniform Resource Locators
• The IP address and the domain name each identify a particular computer on the Internet.
• However, they do not indicate where a Web pages are residing on that computer.
• To identify a Web page’s exact location, Web browsers rely on Uniform Resource Locator (URL).
• URL is a four-part addressing scheme that tells the Web browser that:
What transfer protocol to use for transporting the file
The domain name of the computer on which the file resides
The pathname of the folder or directory on the computer on which the file resides
The name of the file pathname
protocol

http://www.chicagosymphony.org/civicconcerts/index.htm
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 11
Domain name filename
Domain (s)
• On the Internet, a domain is basically a registration category identifying geographic or
purpose commonality.
• There are seven top-level domains currently in use:
• com - A commercial organization. The largest domain extension currently used.
• edu - An educational establishment such as a school or university.
• gov - A branch of the U.S government that is strictly reserved for that purpose.
• int - An international organization such as the United Nations.
• net - A network organization.
• org - A non-profit organization.
• mil - A branch of the U.S military that is strictly reserved for that purpose.
• In other parts of the world the final part of the domain name represents the
country in which the server is located like my for Malaysia, bb for Barbados, ca
for Canada and uk for Great Britain.
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 12
PROTOCALS GOVERING THE WEB
• HTTP (hyper text transfer protocol)
• TCP (transfer control protocol)
• IP (internet protocol)
• UDP (user data gram protocol)
• FTP ( file transfer protocol)
• Telnet (telecommunication network)
• IMAP (internet message access protocol)
• NNTP (network news transfer protocol)
• NTP (network time protocol)
• SMTP (simple mail transfer protocol)
• Ssh (secure shell)
• Rsh (remote shell )
• , Rlogin (remote login)
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 13
 Hyper Text Markup Language
UNIT-I

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 14

 Brief History of HTML
• Tim Berners-Lee is known as father of HTML.
• The first available description of HTML was called "HTML Tags" proposed by Tim
in late 1991.
• HTML stands for Hyper Text Markup Language.
• HTML is the standard markup language for creating Web pages and web
applications.
• We can create static website by HTML only.
• HTML describes the structure of Web pages
• HTML elements are represented by tags

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 15

What is Hyper Text & what is Markup Language?

• Hyper Text: Hyper Text simply means "Text within Text".

• A text has a link within it, is called as hypertext.
• ex: www.gmail.com NEXT PAGE

• Hyper Text is a way to link two or more web pages (HTML documents) with
each other.
• Markup language: A markup language is a computer language that represents
specified layout and format of a text document.
• Markup language uses tags for markup and makes text more interactive and
dynamic.
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 16
 HTML Versions

• HTML 1.0: The first version of HTML was 1.0, which was released in1991.

• HTML 2.0: This was released in 1995, and it was standard language version for website design. HTML 2.0 supports extra

features such as form-based file upload, form elements such as text box, option button, etc.
• HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was capable of creating tables and

provides support for extra options for form elements. It also supports a web page with complex mathematical equations.

It became an official standard for any browser till January 1997. Today it is practically supported by most of the browsers.
• HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very stable version of HTML language. This

version is the current official standard, and it provides added support for stylesheets (CSS) and scripting ability for various

multimedia elements.
• HTML5 : HTML5 is the newest version of Hypertext Markup language, announced in January 2008. There are two major

organizations one is W3C (World Wide Web Consortium), and another one is WHATWG( Web Hypertext Application

Technology Working Group) which are involved in the development of HTML 5 version, and still, it is under development.
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 17
Features of HTML
• It is a very easy and simple language. It can be easily understood and modified.

• It is very easy to make effective presentation with HTML because it has a lot of formatting tags.

• It is semi Structured

• It contains predefined tags only. Every tag must be opened and closed properly.

• It is a markup language so it provides a flexible way to design web pages along with the text.

• It facilitates programmers to add link on the web pages (by html anchor tag) , so it enhances the interest of browsing of the user.

• It is platform-independent because it can be displayed on any platform like Windows, Linux and Macintosh etc.

• It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more attractive and

interactive.
• HTML is not case-insensitive language, which means we can use tags either in lower-case or upper-case.

• Acts as host language for CSS, JavaScript

• HTML File Extension is .htm (or) .html

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 18

Structure of HTML Web Page
<!DOCTYPE html 5.0> CS
<html> Jav S,VB
Co a scr Scrip
<head> ntr ipt ts,
ol
Inf and
o. /
<title> Sample Web Page</title>
<meta name="author" content="John Doe">
</head>
<body>
<h1>My First Heading</h1> da An
ta/ y u
vis info ser
<p>My first paragraph. </p> ibl
e o rmati
pa n w on
</body> ge eb

</html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 19
 Description of HTML Example
• <!DOCTYPE>: It defines the document type or it instruct the browser about the version of HTML.
• <html> :This tag inform the browser that it is an HTML document. Text between html tag describes the
web document. It is a container for all other elements of HTML except <!DOCTYPE>
• <head> : It's should be the first element inside the <html> element, which contains the metadata
(information about the document). It must be closed before the body tag opens.
• <title> : As its name suggested, it is used to add title of that HTML page which appears at the top of the
browser window. It must be placed inside the head tag and should close immediately. (Optional)
• <body> : Text between body tag describes the body content of the page that is visible to the end user
This tag contains the main content of the HTML document.
• <h1> : Text between <h1> tag describes the first level heading of the webpage.
• <p> : Text between <p> tag describes the paragraph of the webpage.
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 20
HTML text Editors
• An HTML file is a text file, so to create an HTML file we can use any text
editors.
• 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.

• Step 1: Open Notepad (Windows)

• Step 2: Write code in HTML
• Step 3: Save the HTML file with .htm or .html extension
• Step 4: Open the HTML page in your web browser (Output)

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 21

 Building blocks of
HTML
• Tag: Tag is a unique letter or word enclosed with in angular brackets.
• It represents a formatted HTML command for a Web page designing
• Ex: <html> …</html>
• The opening tag may contains attributes and values to decorate the web page
• Ex: <body bgcolor=“red”> ….</body>
• Ex <br>
• There are two type of tags 1)paired tags 2) single tags
• Basically, a computer sees "A" as simply "A" but not whether it is bold, italic,
big or small.
• To tell the browser that an "A" should be bold we need to put a markup in
front of the A. Such a markup is called a Tag.
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 22
• Elements: HTML element is a component of an HTML document that tells a web
browser how to structure and interpret a part of the HTML document.
• HTML elements can contain formatting instructions, semantic meaning, and content.

Ex: <p class=“gfg”> This is my webpage </p>

<a href="https://www.eenadu.net">Eenadu Paper</a>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 23
• Types of elements :
• 1)nested elements
• 2) Empty elements
• 3)Unclosed elements

• Nested Elements: if an element is within another element is called nested

element.
• All HTML documents consist of nested HTML elements.
• <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 24
• Empty HTML Elements
• HTML elements with no content are called empty elements.
• <br> is an empty element without a closing.
• It is a line break tag
• Unclosed HTML Tags
• Some HTML tags are not closed, for example br and hr.
• <br> Tag: br stands for break line, it breaks the line of the code.
• <hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across
the webpage.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 25

• Attribute: HTML attributes are special words used inside the opening tag to control
the element's behavior.
• attributes provide extra information about the element.
• An HTML attribute contains two fields: name & value.
• Syntax:
<tag name attribute_name= "attr_value"> content </ tag name>
• Types of attributes
• (1) required attributes, needed by a particular element type for that element type
to function correctly;
• (2) optional attributes, used to modify the default functionality of an element type;
• (3) standard attributes, supported by many element types;
• (4) event attributes, used to cause element types to specify scripts to be run under
specific circumstances.
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 26
 HTML – Header Related Tags
• The <head> tag is a container of various important tags like
• <title>,
• <meta>,
• <link>,
• <base>,
• <style>,
• <script>, and
• <noscript> tags.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 27

 The HTML <title> Tag

• The HTML <title> tag is used for specifying the title of the HTML document. Following is an

example to give a title to an HTML document −

• <!DOCTYPE html>
• <html>
• <head>
• <title>HTML Title Tag Example</title>
• </head>
• <body>
• <p>Hello, World!</p>
• </body>

• </html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 28
The HTML <meta> Tag

• The HTML <meta> tag is used to provide metadata about the HTML document which
includes information about page expiry, page author, list of keywords, page description
etc.
• <meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">
• <!-- Provide description of the page -->
• <meta name = "description" content = “Easy Learning ">
• <!-- Author information -->
• <meta name = "author" content = “raja">
• <!-- Page content type -->
• <meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 29
The HTML <base> Tag

• The HTML <base> tag is used for specifying the base URL for all relative
URLs in a page, which means all the other URLs will be concatenated into
base URL while locating for the given item.
• Ex:
• <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 30

The HTML <link> Tag

• The HTML <link> tag is used to specify relationships between the current
document and external resource.
• Following is an example to link an external style sheet file available
in css sub-directory within web root.
• <link rel = "stylesheet" type = "text/css" href = "/css/style.css">

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 31

The HTML <style> Tag

• The HTML <style> tag is used to specify style sheet for the current HTML
document.
• Following is an example to define few style sheet rules inside <style> tag −
• <style type = "text/css">
• .myclass
• {
• background-color: cyan;
• padding: 10px;
• }
• </style>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 32
 The HTML <script> Tag

• The HTML <script> tag is used to include either external script file or to define internal
script for the HTML document.
• Following is an example where we are using JavaScript to define a simple JavaScript
function −
• <script type = "text/JavaScript">
• function Hello()
• {
• alert("Hello, World");
• }
• </script>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 33
 Body tag and attributes
<BODY>...</BODY> Contains the viewed portion of the document

<BODY bgcolor=”color”> Sets the color of the background in hexadecimal code

<BODY Sets an image as a page’s background (wallpaper)

background=”filename.xxx”>
<BODY text=”color”> Specifies the color of normal text in hexadecimal code

<BODY link=”color”> Specifies the default color of unvisited links in

hexadecimal code
<BODY alink=”color”> Specifies the color of links on click in hexadecimal code

<BODY vlink=”color”> Specifies the color of followed links in hexadecimal

28/02/2022 code YSREC,9949218570
Prof.C.NagaRaju 34
Basic Text formatting
<h1> heading 1 <h1>Heading 1 Example</h1>

<h2> heading 2 <h2>Heading 2 Example</h2>

<h3> heading 3 <h3>Heading 3 Example</h3>

<h4> heading 4 <h4>Heading 4 Example</h4>

<h5> heading 5 <h5>Heading 5 Example</h5>

<h6> heading 6 <h6>Heading 6 Example</h6>

The contents of your web
<br> line break The contents of your page<br>The contents page
of your page The contents of your web
page

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 35

 This is an example displaying the use of the paragraph tag. This is an example displaying the
<p> This will create a line break and a space between lines. use of the paragraph tag.
Attributes: This will create a line break and a
Example 1:<br> space between lines.
<br>
<p align="left">
This is an example<br> displaying the use<br> Attributes:
of the paragraph tag.<br>
<br> Example 1:
paragraph Example 2:<br> This is an example displaying
<br> the use
<p align="right"> This is an example<br> of the paragraph tag.
<p> displaying the use<br>
of the paragraph tag.<br>
<br> Example 2:

Example 3:<br> This is an example displaying

<br> the use
<p align="center"> This is an example<br> of the paragraph tag.
displaying the use<br> of the paragraph tag.
Example 3:

This is an example displaying the

use
of the paragraph tag.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 36

Preformatted text tag: <pre> </pre>

The HTML <pre> tag is used for indicating preformatted text. The code tag surrounds the code being marked up. Browsers
normally render pre text in a fixed-pitched font, with whitespace intact, and without word wrap.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML pre Tag</title>
</head>
<body>
<pre>

This text is
Output:
in a fixed-pitch This text is

font, and it preserves in a fixed-pitch

both spaces and line breaks
</pre></body></html> font, and it preserves
both spaces and line
breaks
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 37
 Presentational Elements
<b> bold <b>Example</b> Example
<i> italic <i>Example</i> Example
<u> underline <u>Example</u> Example
(deprecated)
<strike> or deleted text <strike>Example</strike> Example
<s> Or
(deprecated)
<s>Example</s>
<tt> teletype <tt>Example</tt> Example
<sup> Super Script Written on the 31 ^st Written on the 31st.
<sub> Sub script The ER paradox₂ was The ER paradox2 was devised by
devised by Einstein, Podolsky and
Rosen Einstein, Podolsky and Rosen
<big> big (text) <big>Example</big> Example (Tip)
<small> small (text) <small>Example</small> Example (Tip)

<hr> horizonta l rule <hr width="25%" color="#6699ff"

moving size="6“ />
Marquee <marquee>hello</marquee>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 38
HTML - Marquees

• An HTML marquee is a scrolling piece of text displayed

either horizontally across or vertically down your
webpage depending on the settings.
• This is created by using HTML <marquees> tag.
Syntax:
<marquee attribute_name = "attribute_value"....more
attributes> One or more lines or text message or image
</marquee>

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 39

 The <marquee> Tag Attributes
Sr.No Attribute Description

width This specifies the width of the marquee. This can be a value like 10 or 20%
1 etc.

height This specifies the height of the marquee. This can be a value like 10 or
2 20% etc.

direction This specifies the direction in which marquee should scroll. This can be a
3 value like up, down, left or right.

behavior This specifies the type of scrolling of the marquee. This can have a value
4 like scroll, slide and alternate.

scrolldelay This specifies how long to delay between each jump. This will have a value
5 like 10 etc.

scrollamount This specifies the speed of marquee text. This can have a value like 10 etc.
6

loop This specifies how many times to loop. The default value is INFINITE,
7 which means that the marquee loops endlessly.

bgcolor This specifies background color in terms of color name or color hex value.
8

hspace This specifies horizontal space around the marquee. This can be a value
9 like 10 or 20% etc.

vspace This specifies vertical space around the marquee. This can be a value like
10 10 or 20% etc. Prof.C.NagaRaju YSREC,9949218570
28/02/2022 40
• TEXT EDIT ELEMENTS
• <Del> is used to delete the word or text from the document
• <ins> is used to insert word or text in the document
• <html>
• <body>
This is my <del>python</del> program
This is <ins> not </ins> my program
</body>
</html>
This is my pythonprogram
• Output : this is my program
• Output : this is not my program
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 41
Phrase elements
1).<em>
2) .<strong>
3). <blockquote>
4.<cite>
5. <q>
6.<abbr>
7. <acronym>
8. <dfn>
9. <code>
10. <kbd>
11. <samp>
12. <var>
13. <address>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 42
1)Emphasized Text tag: <em>...</em> :Anything that appears within
<em>...</em> element is displayed as emphasized text in italic form.
Example:
<!DOCTYPE html>
<html>
<body>
The following word uses a <em>emphasized</em> typeface.
</body>
</html>
This will produce the following result:
The following word uses an emphasized typeface.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 43

2)Strong Text tag: <strong>...</strong>
Anything that appears within <strong>...</strong> element is displayed as important text strong bold.
Example
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
The following word uses a <strong>strong</strong> typeface.
</body>
</html>
This will produce the following result:
The following word uses a strong typeface.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 44

3.<blockquote> : The HTML <blockquote> element defines a section that is quoted from another source.
Browsers usually indent <blockquote> elements.
Example:
<!DOCTYPE html>
<html><body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For nearly 60 years, WWF has been protecting the future of nature. The world's leading conservation
organization, WWF works in 100 countries and is supported by more than one million members in the
United States and close to five million globally.
Output:
</blockquote>
Browsers usually indent blockquote elements.
</body> </html>
For nearly 60 years, WWF has been protecting the future of nature. The world's leading
conservation organization, WWF works in 100 countries and is supported by more than one
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 45
million members in the United States and close to five million globally.
HTML <cite> for Work Title
The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting,
a sculpture, etc.).
Note: A person's name is not the title of a work.
The text in the <cite> element usually renders in italic.
Example: <!DOCTYPE html>
<html><body>
<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>
<p> <cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
</body></html>

Output:
The HTML cite element defines the title of a work.
Browsers usually display cite elements in italic.

The28/02/2022
Scream by Edvard Munch. Painted in 1893.
Prof.C.NagaRaju YSREC,9949218570 46
Short Quotations tag: <q>...</q>
The <q>...</q> element is used when you want to add a double quote within a sentence.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML blockquote Tag</title>
</head>
<body>
<q>Welcome to html </q>
</body>
</html>

output
“Welcome to html”

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 47

<abbr> for Abbreviations
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.",
"Dr.", "ASAP", "ATM".
Marking up abbreviations can give useful information to browsers, translation systems and
search-engines.
Example:
<p>The <abbr title="World Health Organization">WHO</abbr> was founded
in 1948.</p>

Output:
The WHO was founded in 1948.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 48

• <acronym> deprecated
• The <acronym> HTML element allows authors to clearly
indicate a sequence of characters that compose an acronym or
abbreviation for a word.
• <p>The <acronym title="World Wide
Web">WWW</acronym> is only a component of the
Internet.</p>

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 49

The <dfn> tag stands for the "definition element", and it specifies a term that is going
to be defined within the content.
The nearest parent of the <dfn> tag must also contain the definition/explanation
for the term.
<!DOCTYPE html>
<html>
<body>
<p> <dfn>HTML</dfn> is the standard markup language for creating web
pages.</p>
</body>
</html>
Output::
HTML is the standard markup language for
28/02/2022
creating web pages.
Prof.C.NagaRaju YSREC,9949218570 50
Computer Code tag: <code>...</code> :Any programming code to appear on a Web page should be placed inside
<code>...</code>tags.
Usually the content of the <code> element is presented in a monospaced font, just like the code in most programming
books.
Example
<!DOCTYPE html>
<html>
<body>
<code>
void main(){
printf(“hello world”);
getch();
}
</code>
</body>
</html>
void main(){
printf(“hello world”);
getch();
}
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 51
<kbd> this tag is used to define keyboard input. The content
inside is displayed in the browser's default monospace font.
<!DOCTYPE html>
<html>
<body>
<h1>The kbd element</h1>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>
</body>
</html>

The kbd element

Press Ctrl + C to copy text (Windows).
Press Cmd + C to copy text (Mac OS).
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 52
<var> this tag is used to defines a variable in programming or in a
mathematical expression. The content inside is typically displayed in italic.
<!DOCTYPE html>
<html>
<body>
<h1>The var element</h1>
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where
<var>b</var> is the base, and <var>h</var> is the vertical height.</p>
</body>
</html>
Output:
The var element
The area of a triangle is: 1/2 x b x h, where b is the base,
and h is the vertical height.
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 53
<samp> this tag is used to define sample output from a computer program. The content
inside is displayed in the browser's default monospace font.

Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS.
<!DOCTYPE html>
<html>
<body>
<h1>The samp element</h1>
<p>Message from my computer:</p>
<p> <samp>File not found.<br>Press F1 to continue</samp> </p>
</body>
</html>
The samp element
Message from my computer:
File not found.
Press F1 to continue
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 54
<address> :The HTML <address> tag defines the contact information for the author/owner of a document or an
article.
The contact information can be an email address, URL, physical address, phone number, social media handle, etc.
The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the
<address> element.
Example
<address>
Written by John Doe.<br>
Visit us at:<br> Output:
Example.com<br> The HTML address element defines contact information
(author/owner) of a document or article.
Box 564, Disneyland<br> Written by John Doe.
USA Visit us at:
</address> Example.com
Box 564, Disneyland
USA

Section Divisions
<div> ... </div> Division or Section of Page Content
<span> ... </span> Section of text withinProf.C.NagaRaju
28/02/2022 other content YSREC,9949218570 55
Font tag and attributes
<FONT>...</FONT> Changes font attributes for text within the tags

<FONT size=”value”>...</FONT> Sets the font to a size from 1 to 7, with 1 the smallest and 7
the largest

<FONT face=”name”>...</FONT>Sets the font face

<FONT color=”color”>...</FONT> Sets the font color using hexadecimal code

<font face="Calibri" size=1 color="blue"> hello world </font>

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 56
 Setting Font Color - Methods
• We can set any font color you like using color attribute.
• There are following three different methods to set colors in your web page
1.Color names − You can specify color names directly like green, blue or red.
2.Hex codes − A six-digit code representing the amount of red, green, and blue that
makes up the color.
3.Color decimal or percentage values − This value is specified using the rgb( )
property.
For Example:
4. <font color = "red">
5. <font color = "#FF00FF"> Note: #rrggbb
6. <font color = "rgb(0,0,0)"> Note: rgb(red,green,blue)
Note − All the browsers does not support rgb() property of color so it is
recommended
28/02/2022 not to use it. Prof.C.NagaRaju YSREC,9949218570 57
Anchor tag and attributes
<A>...</A> Designates the origin and destination of a hyperlink

<A HREF=”url”>...</A> Creates a hyperlink

<A HREF=”#NAME”>...</A> Links to a target location in the current page

<A HREF=”URL#NAME”>...</A> Links to a target location in a page outside your site

<A NAME=”NAME”>...</A> Sets a target location within a document

<A HREF=”mailto:email”>...</A> Creates a mailto link

Optional Attributes

<A HREF=”?” target=”?”>...</A> Specifies where the linked-to document is to be placed

<A HREF=”?” rel=”?”>...</A> Sets up a relationship between the linked-to document

and the current page

<A HREF=”?” rev=”?”>...</A> Sets up a reverse relationship between the current page and the
linked-to document
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 58
<HTML> <BODY>
Text link<BR>
<A HREF="http://www.yahoo.com">Click here to visit Yahoo</A> <BR>
<BR>Click on below image to visit my homepage:<BR><BR>
<A HREF="http://www.gmail.com/"><IMG SRC="cnr.jpg" width=50 height=50 border=2></A>
<BR> <BR> Click on below link to send an email to me <BR>
<A HREF="mailto:[email protected]">Email Me</A>
<BR> Click on below link to send us your comments. <BR>
<A HREF="mailto:[email protected]?subject:comments about your site">Email Me</A>
where to open link _self , _blank,_parent, _top
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
<h2>Relative URLs</h2>
<p><a href=“aa.html">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
<button onclick="document.location='https://www.w3schools.com/html/html_links.asp’>
HTML Tutorial </button>
</BODY> </HTML>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 59
 Image tag and attributes
<IMG> Embeds an image in the document at the location of the tag

<IMG src=”url” alt=”text”> Adds an image with a text description

<IMG src=”url” alt=”text” align=”direction”> Aligns an image to the left, right, center, bottom, or top

<IMG src=”url” alt=”text” border=”number”> Sets the size of the border around an image

<IMG src=”url” alt=”text” height=”pixels”> Sets the height of an image

<IMG src=”url” alt=”text” width=”pixels”> Sets the width of an image

<IMG src=”url” alt=”text” hspace=”pixels”> Sets a horizontal margin to be placed around an image

<IMG src=”url” alt=”text” vspace=”pixels”> Sets a vertical margin to be placed around an image

<IMG src=”url” alt=”text” usemap=”map- Designates an image as a client-side image map

name”>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 60
• IMAGE PROPERTIES
• <!DOCTYPE html>
• <html>
• <body>
• <h2>HTML Image</h2>
• <img src="18.jpg" alt="Trulli“ align=“right” width="500" height="333" border=10 hspace=10 vspace=10>
• <img src="18.jpg" alt="Girl in a jacket">
• <img src="18.jpg" alt="Flowers in Chania">
• <img src="18.jpg" alt="Flowers in Chania">
• </body>
• </html>

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 61

• IMAGE WITH AREA SHAPE
• <html>
• <body>
• <img src="workplace.jpg"alt="Workplace" usemap="#workmap">
• <map name="workmap">
• <area shape="rect" coords="200,200,40,40" alt="abc1" href="abc.html">
• <area shape="rect" coords="300,300,50,50" alt="abc5" href="abc5.html">
• <area shape="circle" coords="400,400,50" alt="textproperties" href="textproperties.html">
• </map>
• </body>
• </html>

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 62

<picture> tag is more flexible way to display image than <img>tag
• <!DOCTYPE html>
• <html>
• <head>
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
• </head>
• <body>
• <h2>The picture Element</h2>
• <picture>
• <source media="(min-width: 650px)" srcset="img_food.jpg">
• <source media="(min-width: 465px)" srcset="img_car.jpg">
• <img src="img_girl.jpg" style="width:auto;">
• </picture>
• </body>
• </html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 63
• Video
• <video width="200" height="150" controls>
• <source src="vid.mp4" type="video/mp4">
• <source src="vid.ogg" type="video/ogg">
• No video support.
• </video>

• Audio
• <audio controls>
• <source src="sound.ogg" type="audio/ogg">
• <source src="sound.mp3" type="audio/mpeg">
• No audio support.
• </audio>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 64
• <IFRAME> tag for accessing YOUTUBE VIDEO
• <html>
• <body>
• hello
• <iframe width="420" height="315"
• src="https://www.youtube.com/embed/tgbNymZ7vqY">
• </iframe>
• </body>
• </html>

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 65

 Frame tag and attributes
<FRAMESET>...</FRAMESET> Specifies the layout of subsections in the main browser window

<FRAMESET rows=”value,value”> Defines the rows within a frameset

<FRAMESET cols=”value,value”> Defines the columns within a frameset

<NOFRAMES>...</NOFRAMES> Provides alternate content for browsers that do not support

frames
<FRAME src=”?”> Defines the appearance and content of a single frame

<FRAME name=”name”> Labels the frame for targeting by other frames

<FRAME marginwidth=”#”> Sets the margin width of a frame

<FRAME marginheight=”#”> Sets the margin height of a frame

<FRAME scrolling=”value”> Creates a frame scrollbar

<FRAME noresize> Prevents the resizing of a frame

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 66
• Frames
• <frameset> ... </frameset> Define the set of Frames
• <frameset> Tag Attributes:
• rows="??,??, ..." Define row sizes & number of rows (size in pixels or %)
• cols="??,??, ..." Define column sizes & number of columns (size in pixels or %)
• noresize="noresize" User cannot resize any frames in frameset
• <frame> ... </frame> Define a frame within the frameset
• <frame> Tag Attributes:
• src="url" Location of HTML File for a frame
• name="***"Unique name of frame window
• marginwidth="?" Horizontal margin spacing inside frame (pixels)
• marginheight="?" Vertical margin spacing inside frame (pixels)
• noresize="noresize" Declare all frameset sizes as fixed
• scrolling="***" Can the user scroll inside the frame: yes, no, auto
• frameborder="?" Frame Border: (1=yes, 2=no)
• bordercolor="#??????" Border Colour (*)
• <noframes>
28/02/2022
... </noframes> Unframed content (for browsers not supporting frames)
Prof.C.NagaRaju YSREC,9949218570 67
<!DOCTYPE html>
<html>
<frameset rows="25%,50%,25%">
<frame src="otp.html">
<frame src="abc.html">
<frame src="list.html">
</frameset>
</html>

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 68

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 69
<!DOCTYPE html>
<html>
<frameset cols="25%,50%,25%">
<frame src="otp.html">
<frame src="abc.html">
<frame src="list.html">
</frameset>
</html>

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 70

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 71
<HTML>
<HEAD>
<TITLE> Frameset Exmaple </TITLE>
</HEAD>
<frameset cols="30%, 70%" bordercolor="blue" noresize="noresize">
<frameset rows="100, 200" bordercolor="red">
<frame name="first-frame" src="cnr1.jpg">
<frame name="second-frame" src="list.html">
</frameset>
<frameset rows="100, 200" bordercolor="red">
<frame name="first-frame" src="cnr2.jpg">
<frame name="second-frame" src="table.html">
</frameset>
<frame name="third-frame" src=“cnr3.html">
<noframes>
<p> This document contains frames content. You browser does not support it. </p>
</noframes>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 72
</frameset> </HTML>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 73
 Disadvantages of Frames

There are few drawbacks with using frames, so it's never recommended to use frames in your
webpages −
• Some smaller devices cannot cope with frames often because their screen is not big enough
to be divided up.
• Sometimes your page will be displayed differently on different computers due to different
screen resolution.
• The browser's back button might not work as the user hopes.
• There are still few browsers that do not support frame technology.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 74

HTML Lists
• HTML offers web authors three ways for specifying lists of information.
• All lists must contain one or more list of elements.
• Lists may contain:
• <ul> - An unordered list. This will list items using plain bullets.
• <ol> - An ordered list. This will use different schemes of numbers to list your items.
• <dl> - A definition list. This arranges your items in the same way as they are arranged in a
dictionary.
• HTML Unordered Lists: An unordered list is a collection of related items that have no special
order or sequence.
• This list is created by using HTML <ul> tag.
• Each item in the list is marked with a bullet
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 75
Following is an example where we used <ul>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
This will produce following result:
<li>Beetroot</li>
• Beetroot
<li>Ginger</li>
• Ginger
<li>Potato</li> • Potato
<li>Radish</li> • Radish
</ul>
</body>
</html28/02/2022 Prof.C.NagaRaju YSREC,9949218570 76
The type Attribute
• You can use type attribute for <ul> tag to specify the type of bullet you like.
• By default it is a disc.
• Following are the possible options:
• <ul type="square">
• <ul type="disc">
• <ul type="circle">

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 77

Following is an example where we used <ul type="square">
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
This will produce following result:
<ul type="square">
 Beetroot
<li>Beetroot</li>
 Ginger
<li>Ginger</li>
 Potato
<li>Potato</li>
 Radish
<li>Radish</li>
</ul>
</body>
</html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 78
Following is an example where we used <ul type="disc"> :
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body> This will produce following result:
• Beetroot
<ul type="disc">
• Ginger
<li>Beetroot</li>
• Potato
<li>Ginger</li> • Radish
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 79
• Following is an example where we used <ul type="circle"> :
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
This will produce following result:
<body>
<ul type="circle">
o Beetroot
<li>Beetroot</li> o Ginger
<li>Ginger</li> o Potato
<li>Potato</li> o Radish
<li>Radish</li>
</ul>
</body>
</html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 80
• HTML Ordered Lists
• If you are required to put your items in a numbered list instead of bulleted
then HTML ordered list will be used.
• This list is created by using <ol> tag.
• The numbering starts at one and is incremented by one for each successive
ordered list element tagged with <li>.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 81

Example of Ordered Lists
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
This will produce following result:
<ol>
1. Beetroot
<li>Beetroot</li> 2. Ginger
<li>Ginger</li> 3. Potato
<li>Potato</li> 4. Radish
<li>Radish</li>
</ol>
</body>
</html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 82
• The type Attribute
• You can use type attribute for <ol> tag to specify the type of numbering you like.
• By default it is a number.
• Following are the possible options:
• <ol type="1"> - Default-Case Numerals.
• <ol type="I"> - Upper-Case Numerals.
• <ol type="i"> - Lower-Case Numerals.
• <ol type="a"> - Lower-Case Letters.
• <ol type="A"> - Upper-Case Letters
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 83
• Following is an example where we used <ol type="1">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
This will produce following result:
</head> 1. Beetroot
<body> 2. Ginger
<ol type="1"> 3. Potato
<li>Beetroot</li> 4. Radish
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 84
• Following is an example where we used <ol type="I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body> This will produce following
<ol type="I"> result:
<li>Beetroot</li> I. Beetroot
<li>Ginger</li> II. Ginger
<li>Potato</li> III. Potato
<li>Radish</li> IV. Radish
</ol>
</body>
</html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 85
• Following is an example where we used <ol type="i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head> This will produce following result:
<body> i. Beetroot
<ol type="i"> ii. Ginger
<li>Beetroot</li> iii. Potato
<li>Ginger</li> iv. Radish
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 86
• Following is an example where we used <ol type="A">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="A"> This will produce following result:
<li>Beetroot</li> A. Beetroot
<li>Ginger</li> B. Ginger
<li>Potato</li> C. Potato
D. Radish
<li>Radish</li>
</ol>
</body>
</html>28/02/2022 Prof.C.NagaRaju YSREC,9949218570 87
• Following is an example where we used <ol type="a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
This will produce following result:
<ol type="a">
a. Beetroot
<li>Beetroot</li>
b. Ginger
<li>Ginger</li>
c. Potato
<li>Potato</li>
d. Radish
<li>Radish</li>
</ol>
</body>
</html>

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 88

• The start Attribute
• You can use start attribute for <ol> tag to specify the starting point of numbering
you need.
• Following are the possible options:
• <ol type="1" start="4"> - Numerals starts with 4.
• <ol type="I" start="4"> - Numerals starts with IV.
• <ol type="i" start="4"> - Numerals starts with iv.
• <ol type="a" start="4"> - Letters starts with d.
• <ol type="A" start="4"> - Letters starts with D
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 89
• Following is an example where we used <ol type="i" start="4" >
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head> This will produce following result:
iv. Beetroot
<body>
v. Ginger
<ol type="i" start="4">
vi. Potato
<li>Beetroot</li> vii. Radish
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 90
• HTML Definition Lists

• HTML and XHTML support a list style which is called definition lists where entries are

listed like in a dictionary or encyclopedia.

• The definition list is the ideal way to present a glossary, list of terms, or other

name/value list.
• Definition List makes use of following three tags.

• <dl> - Defines the start of the list

• <dt> - A term

• <dd> - Term definition

• </dl> - Defines the end of the list

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 91
• Example
<!DOCTYPE html>
<html>
<head>
This will produce following result:
<title>HTML Definition List</title> HTML
</head> This stands for Hyper Text Markup Language
HTTP
<body> This stands for Hyper Text Transfer Protocol
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 92
• Lists
• <ol> ... </ol>Ordered List
• <ul> ... </ul>Un-ordered List
• <li> ... </li> List Item (within ordered or unordered)
• <ol type="?"> Ordered list type: A, a, I, i, 1
• <ol start="??"> Ordered list starting value
• <ul type="?"> Unordered list bullet type: disc, circle, square
• <li value="??"> List Item Value (changes current and subsequent items)
• <li type="??"> List Item Type (changes only current item)
• <dl> ... </dl>Definition List
• <dt> ... </dt> Term or phrase being defined
• <dd> ... </dd> Detailed Definition of term
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 93
HTML TABLES

• The HTML tables allow web authors to arrange data like text, images, links,

other tables, etc. into rows and columns of cells.

• The HTML tables are created using the <table> tag in which the <tr> tag is

used to create table rows and <td> tag is used to create data cells

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 94

• <!DOCTYPE html>
• <html>
• <head>
• <title>HTML Table Header</title>
• </head>
• <body>
• <h1> TABLE EXAMPLE</h1>
• <table border=1>
• <th> rno </th>
• <th> name </th>
• <tr>
• <td>2001</td>
• <td>adnan </td>
• </tr>
• <tr>
• <td>2002</td>
• <td>amrutha</td>
• </tr>
• </table>
• </body>
• </html>28/02/2022 Prof.C.NagaRaju YSREC,9949218570 95
 Table tags and attributes
<TABLE>...</TABLE> Generates a table
<TABLE border=”pixels”> Sets the size of cell borders
<TABLE cellspacing=”pixels”> Sets the amount of space between cells
<TABLE cellpadding=”pixels”> Sets the amount of space between a border and cell content
<TABLE height=”pixels” or “%”> Sets the height of a table
<TABLE width=”pixels” or “%”> Sets the width of a table
<TD>...</TD> Defines a table data cell
<TD colspan=”columns”> Sets a cell to span columns
<TD rowspan=”rows”> Sets a cell to span rows
<TD nowrap> Prevents the lines within a cell from wrapping
<TH>...</TH> Defines a table header with bold, centered table data
<TR>...</TR> Defines a table row
<TR align=”?”> or <TD align=”?”> Aligns the contents of a row or cell to the left, right, or center
<TR valign=”?”> or <TD valign=”?”> Sets the vertical alignment of a row or cell to the top,
middle, or bottom
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 96
• Table attributes
• 1. border // no border =0 border=1
• 2.bgcolor //background color of table
• 3.background // background image
• 4.cellspacing // cell size pixels or
• 5.cellpadding // spce around cell
• 6.align //left ,right, center ,justify,char
• 7.valign // top,middle ,bottom baseline
• 8.width // width= 100px or width=100%
• 9.height // height= 100px or height=100%
• 10.frame // frame=“void” ,above, below, hsides, vsides, rhs, lhs, box, border
• 11.rules // rules=“none” , groups, cols, rows all
• 12. caption //caption=“hello”
• 13. 28/02/2022
summary // summary=“hffjgjgjgj” Prof.C.NagaRaju YSREC,9949218570 97
• <tr> or <td> or <th> Tags Attributes:
• colspan="?" Number of columns the cell spans across (cell merge)
• rowspan="?" Number of row a cell spans across (cell merge)
• width="??" Cell Width (pixels or %) (*)
• height="??" Cell Height (pixels or %) (*)
• bgcolor="#??????”Background Colour (*)
• align="??" Horizontal Alignment: left, center, right (*)
• valign="??" Vertical Alignment: top, middle, bottom (*)
• nowrap Force no line breaks in a particular cell
• Scope // scope=“row” row,col,rowgroup,colgroup
• Axis // axis=“heavy old valuable”
• Header // header=“vnvjgjhgj”
• Abbr // abbr=“abbruvation”
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 98
 <h1> tbody thead tfoot </h1>
<table border="1" >
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
</table>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 99
• <!DOCTYPE html>
• <html>
• <head>
• <title>HTML Table Header</title>
• </head>
• <body>
• <h1> border bgcolor align</h1>
• <table border="1" bgcolor="red" align="center" >
• <tr>
• <td>Row 1, Column 1</td>
• <td>Row 1, Column 2</td>
• </tr>
• <tr>
• <td>Row 2, Column 1</td>
• <td>Row 2, Column 2</td>
• </tr>
• </table>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 100
• <h1> background cellpadding cellspacing </h1>
• <table border="1" background="cnr.jpg" cellpadding="5" cellspacing="5">
• <tr>
• <th>Name</th>
• <th>Salary</th>
• </tr>
• <tr>
• <td>Ramesh Raman</td>
• <td>5000</td>
• </tr>
• <tr>
• <td>Shabbir Hussein</td>
• <td>7000</td>
• </tr>
• </table>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 101
• <h1> rowspan colspan width height</h1>
• <table border="1" width="50%" height="100%">
• <tr>
• <th>Column 1</th>
• <th>Column 2</th>
• <th>Column 3</th>
• </tr>
• <tr>
• <td rowspan="2">Row 1 Cell 1</td>
• <td>Row 1 Cell 2</td>
• <td>Row 1 Cell 3</td>
• </tr>
• <tr>
• <td>Row 2 Cell 2</td>
• <td>Row 2 Cell 3</td></tr>
• <tr>
• <td colspan="3">Row 3 Cell 1</td>
• </tr>
• </table>
• </body>
• </html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 102
 <h1> tbody thead tfoot </h1>
<table border="1" >
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
</table>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 103
Splitting table into three parts
• <Thead>… </Thead>
• <Tbody> .. </Tbody>
• <Tfoot>.. </Tfoot>

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 104

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<h1> TABLE EXAMPLE</h1>
<table border=1>
<thead>
<tr>
<td colspan="2">hellow thead </td>
</tr>
</thead>
<th> rno </th>
<th> name </th>
<tbody>
<tr>
<td>2001</td>
<td>adnan </td>
</tr>
</tbody>

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 105

• <tbody>
• <tr>
• <td>2002</td>
• <td>amrutha</td>
• </tr>
• </tbody>
• <tfoot>
• <tr>
• <td colspan="2">hellow tfoot </td>
• </tr>
• </tfoot>
• </table>
• </body>
• </html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 106
 HTML - Forms

• HTML Forms are required, when you want to collect some data from the site
visitor.
• For example, during user registration you would like to collect information
such as name, email address, credit card, etc.
• A form will take input from the site visitor and then will post it to a back-end
application
• The back-end application will perform required processing on the passed
data based on defined business logic inside the application.
• There are various form elements available like text fields, textarea fields,
drop-down menus, radio buttons, checkboxes, etc.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 107

HTML <form> tag
• HTML <form> tag is used to create an HTML form and it has following
syntax
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 108

Form tag and attributes
<FORM>...</FORM> Generates a container for all form elements
<FORM action=”url”> Designates the path of the script to process input from the form
<FORM method=”get|post”> Instructs the browser how to interact with the form URL
<FORM accept=”media type”> Defines which MIME types are supported by the server processing the
form
<FORM accept-charset=”text”> Defines which character sets are supported by the server processing
the form
<FORM enctype=”media type”> Defines the format of the submitted data
<OPTION> Defines each menu item
<SELECT name=”NAME”>...</SELECT> Generates a pull-down menu
<INPUT type=”checkbox”> Generates a check box
<INPUT type=”hidden”> Conceals a field from view
<INPUT type=”image”> Generates an image that acts like a Submit button
<INPUT type=”password”> Generates a one-line password box
<INPUT type=”radio”> Generates a radio button
<INPUT type=”text”> Generates a one-line text box
<INPUT type=”submit”> Generates a Submit button (send form)
<INPUT type=”reset”>
28/02/2022 Generates
Prof.C.NagaRaju a Reset button
YSREC,9949218570 (clear form) 109
HTML Form Controls
• There are different types of form controls that you can use to
collect data using HTML form −
1.Text Input Controls
2.Checkboxes Controls
3.Radio Box Controls
4.Select Box Controls
5.File Select boxes
6.Hidden Controls
7.Clickable Buttons
8.Submit and Reset Button

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 110

 1) Text Input Controls

There are three types of text input used on forms −

a)Single-line text input controls − This control is used for items that require only one line of
user input, such as search boxes or names. They are created using HTML <input> tag.
b)Password input controls − This is also a single-line text input but it masks the character as
soon as a user enters it. They are also created using HTMl <input> tag.
c)Multi-line text input controls − This is used when the user is required to give details that
may be longer than a single sentence. Multi-line input controls are created using
HTML <textarea> tag.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 111

 a) Single-line text input controls

• This control is used for items that require only one line of user input, such as
search boxes or names. They are created using HTML <input> tag.
First name: <input type = "text" name = "first_name" />
Last name: <input type = "text" name = "last_name" />

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 112

Attributes

Sr.No Attribute Description

type Indicates the type of input control and for text
1 input control it will be set to text.

name Used to give a name to the control which is sent to

2 the server to be recognized and get the value.

value This can be used to provide an initial value inside

3 the control.
size Allows to specify the width of the text-input control
4 in terms of characters.

maxlength Allows to specify the maximum number of

5 characters a user can enter into the text box.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 113

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 114
 b) Password input controls

• This is also a single-line text input but it masks the character as soon as a
user enters it. They are also created using HTML <input>tag but type
attribute is set to password.

Syntax:
Password: <input type = "password" name = "password" />

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 115

Attributes

Sr.No Attribute Description

type Indicates the type of input control and for text

1 input control it will be set to password.
name Used to give a name to the control which is sent to
2 the server to be recognized and get the value.
value This can be used to provide an initial value inside
3 the control.
size Allows to specify the width of the text-input
4 control in terms of characters.
maxlength Allows to specify the maximum number of
5 characters a user can enter into the text box.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 116

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 117
c) Multiple-Line Text Input Controls

• This is used when the user is required to give details that may be
longer than a single sentence. Multi-line input controls are
created using HTML <textarea> tag.
Syntax:
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 118

Attributes

Sr.No Attribute Description

1 name
Used to give a name to the control which is sent
to the server to be recognized and get the value.
rows Indicates the number of rows of text area box.
2
cols Indicates the number of columns of text area box
3

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 119

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 120
2) Checkbox Control

• Checkboxes are used when more than one option is

required to be selected. They are also created using HTML
<input> tag but type attribute is set to checkbox..
• Syntax:
• <input type = "checkbox" name = "SUB1" value = “wt"> WT
• <input type = "checkbox" name = "SUB2" value = “rs"> RS

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 121

Attributes

Sr.No Attribute Description

1 type
Indicates the type of input control and for
checkbox input control it will be set
to checkbox..
2 name
Used to give a name to the control which is
sent to the server to be recognized and get
the value.
3 value
The value that will be used if the checkbox
is selected.
4 checked
Set to checked if you want to select it by
default.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 122

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 123
 3) Radio Button Control
• Radio buttons are used when out of many options, just one option is required
to be selected. They are also created using HTML <input> tag but type
attribute is set to radio.
• Syntax:
<input type = "radio" name = "Course" value = " BTECH "> BTECH
<input type = "radio" name = "Course" value = " MTECH "> MTECH
<input type = "radio" name = "Course" value = " MCA "> MCA
<input type = "radio" name = "Course" value = " MBA "> MBA

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 124

Attributes

Sr.No Attribute Description

type Indicates the type of input control and for radio
1 input control it will be set to radio..

name Used to give a name to the control which is

2
sent to the server to be recognized and get
the value.

value The value that will be used if the checkbox

3
is selected.
checked Set to checked if you want to select it by
4
default.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 125

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 126
 4) Select Box Control
• A select box, also called drop down box which provides option to
list down various options in the form of drop down list, from
where a user can select one or more options.
• Syntax:
• <select name = "dropdown">
• <option value = "ECE" selected>ECE</option>
• <option value = "CSE">CSE</option>
• <option value = "EEE" >EEE</option>
• <option value = "MECH">MECH</option>
• </select>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 127
 Attributes of <select> tag
Sr.No Attribute Description

1 name
Used to give a name to the control which is sent
to the server to be recognized and get the value.

size This can be used to present a scrolling list box.

2
Eg: size=“5”

3 multiple
If set to "multiple" then allows a user to select
multiple items from the menu.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 128

Attributes of <option> tag
Sr.No Attribute Description

1 value
The value that will be used if an option
in the select box is selected.

2 selected
Specifies that this option should be the
initially selected value when the page
loads.
3 label
An alternative way of labeling options

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 129

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 130
5) File Upload Box

• If you want to allow a user to upload a file to your web

site, you will need to use a file upload box, also known
as a file select box.
• This is also created using the <input> element but type
attribute is set to file.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 131

 Attributes
Sr.No Attribute Description

1 name
Used to give a name to the control which is
sent to the server to be recognized and get the
value.
2 accept
Specifies the types of files that the server
accepts.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 132

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 133
6) Button Controls

• There are various ways in HTML to create

clickable buttons.
• You can also create a clickable button using
<input>tag by setting its type attribute to button.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 134

 Attributes
Sr.No Type Description
1 submit
This creates a button that automatically submits a
form.
2 reset
This creates a button that automatically resets
form controls to their initial values.
3 button
This creates a button that is used to trigger a
client-side script when the user clicks that button.
4 image
This creates a clickable button but we can use an
image as background of the button.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 135

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 136
7) Hidden Form Controls

• Hidden form controls are used to hide data inside the page which
later on can be pushed to the server.
• This control hides inside the code and does not appear on the
actual page.
• For example, following hidden form is being used to keep current
page number.
• When a user will click next page then the value of hidden control
will be sent to the web server and there it will decide which page
will be displayed next based on the passed current page.

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 137

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 138
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 139
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 140
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 141
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 142
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 143
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 144
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 145
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 146
• <html>
• <body>
• <form>
• <h1>Text</h1>
• <input type="text" name="text" value="textbox"><br>
• <h1>password</h1>
• <input type="password" name="text" value="password"><br>
• <h1>textarea</h1>
• <textarea rows = "5" cols = "5" name = "textarea">
• Enter textarea description here...
• </textarea> <br>
• <h1>button</h1>
• <input type="button" name="abc" id="xyz" value="button"><br>
• <h1>hidden</h1>
• <input type="hidden" value="click here hidden button"><br>
• <h1>submit</h1>
• <input type="submit" value="submit button"><br>
• <h1>reset</h1>
• <input28/02/2022
type="reset" value="reset button"><br>Prof.C.NagaRaju YSREC,9949218570 147
• <h1>checkbox</h1>
• <input type="checkbox"> checkbox<br>
• <h1>radio button</h1>
• <input type = "radio" name = "Course" value = " BTECH "> BTECH
• <input type = "radio" name = "Course" value = " MTECH "> MTECH
• <input type = "radio" name = "Course" value = " MCA "> MCA<br>
• <h1>dropdown box</h1>
• <select name = "dropdown">
• <option value = "ECE" selected>ECE</option>
• <option value = "CSE">CSE</option>
• <option value = "EEE" >EEE</option>
• <option value = "MECH">MECH</option>
• </select> <br>
• <h1>color</h1>
• <input type="color"><br>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 148
• <h1>date</h1>
• <input type="date"><br>
• <h1>datetime-local</h1>
• <input type="datetime-local"><br>
• <h1>email</h1>
• <input type="email"><br>
• <h1>file</h1>
• <input type="file"><br>
• <h1>image</h1>
• <input type="image"><br>
• <h1>time</h1>
• <input type="time"><br>
• <h1>url</h1>
• <input type="url"><br>
• <h1>week</h1>
• <input type="week"><br>
• </form>
• </body>
• </html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 149
• Special Characters
• &lt; < - Less-Than Symbol
• &gt; >- Greater-Than Symbol
• &amp; & - Ampersand, or 'and' sign
• &quot; " - Quotation Mark
• &copy; © - Copyright Symbol
• &trade; ™ - Trademark Symbol
• &nbsp; - A space (non-breaking space)
• &#??; ISO 8859-1 character - replace ?? with the iso code

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 150

<html>
<body>
hello&lt world<br>
hello&gt world<br>
hello&amp world<br>
hello&quot world &quot<br>
hello&copy; world<br>
hello&nbsp;world<br>
hello&#??; world<br>
</body>
</html>
28/02/2022 Prof.C.NagaRaju YSREC,9949218570 151
 Thank you

28/02/2022 Prof.C.NagaRaju YSREC,9949218570 152