Chapter 1 Introduction to HTML
Uploaded by
c nagarajuChapter 1 Introduction to HTML
Uploaded by
c nagarajuINTRODUCTION 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
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
Back end tool
• The back end portion is built by using some libraries, frameworks, and languages
which are discussed below
• PHP:
• C++
• Java:
• Python:
• Node.js:
• Back End Frameworks: The list of back end frameworks are:
Express, Django, Rails, Laravel, Spring etc.
• The other back end program/scripting languages are: C#, Ruby,
REST, GO etc.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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)
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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
27/02/2025Explorer. Prof.C.NagaRaju YSREC phone: 9949218570
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).
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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 support authentication, data integrity, confidentiality
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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
27/02/2025 Britain.
Prof.C.NagaRaju YSREC phone: 9949218570
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)
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
Hyper Text Markup
Language
UNIT-I
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• HTML File Extension is .htm (or) .html
Structure of HTML Web Page
<!DOCTYPE html 5.0> CS
S,V
<html> J ava B Sc
Co scr rip
<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 A n
ta/ y u
vis info ser
<p>My first paragraph. </p> ibl
e o rmati
pa n w on
</body> ge eb
</html>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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)
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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.Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025
HTML – Header Related Tags
• The <head> tag is a container of various important tags like
• <title>,
• <meta>,
• <link>,
• <base>,
• <style>,
• <script>, and
• <noscript> tags.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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 -->
• 27/02/2025
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
Prof.C.NagaRaju YSREC phone: 9949218570
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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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">
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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");
• }
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• </script>
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
27/02/2025 code YSREC phone: 9949218570
Prof.C.NagaRaju
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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> <p align="right"> This is an example<br> of the paragraph tag.
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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-
both spaces and line breaks
pitch
</pre></body></html>
27/02/2025 Prof.C.NagaRaju YSREC font, and it preserves
phone: 9949218570
both spaces and line
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 <sup>st</sup> Written on the 31st.
<sub> Sub script The ER paradox<sub>2</sub> 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
27/02/2025
<marquee>hello</marquee>
Prof.C.NagaRaju YSREC phone: 9949218570
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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
The27/02/2025
Scream by Edvard Munch. Painted inProf.C.NagaRaju
1893. YSREC phone: 9949218570
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”
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
<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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• <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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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
27/02/2025
creating web pages.
Prof.C.NagaRaju YSREC phone: 9949218570
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();
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
}
<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).
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
<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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
<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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
<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>
27/02/2025 Section of text within other content
Prof.C.NagaRaju YSREC phone: 9949218570
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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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
27/02/2025
not to use it. Prof.C.NagaRaju YSREC phone: 9949218570
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
<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:nagaraju.c@yogivemanauniversity.ac.in">Email Me</A>
<BR> Click on below link to send us your comments. <BR>
<A HREF="mailto:webmaster@learnem.com?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>
<A HREF=“Tel:9949218570"> call me </A>
<a href=“javascript:alert(“helloworld”);">
27/02/2025
java scripts </a>
Prof.C.NagaRaju YSREC phone: 9949218570
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”>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
<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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• <IFRAME> tag for accessing YOUTUBE VIDEO
• <html>
• <body>
• hello
• <iframe width="420" height="315"
• src="https://www.youtube.com/embed/tgbNymZ7vqY">
• </iframe>
• </body>
• </html>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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>
27/02/2025
... </noframes> Unframed content (for browsers not supporting frames)
Prof.C.NagaRaju YSREC phone: 9949218570
<!DOCTYPE html>
<html>
<frameset rows="25%,50%,25%">
<frame src="otp.html">
<frame src="abc.html">
<frame src="list.html">
</frameset>
</html>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
<!DOCTYPE html>
<html>
<frameset cols="25%,50%,25%">
<frame src="otp.html">
<frame src="abc.html">
<frame src="list.html">
</frameset>
</html>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
<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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
</frameset> </HTML>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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 withProf.C.NagaRaju
27/02/2025 a bullet YSREC phone: 9949218570
Following is an example where we used <ul>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
This will produce following result:
<ul>
• Beetroot
<li>Beetroot</li>
• Ginger
<li>Ginger</li>
• Potato
<li>Potato</li>
• Radish
<li>Radish</li>
</ul>
</body>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
</html
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">
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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>27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
Following is an example where we used <ul type="disc"> :
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
This will produce following result:
<body>
• Beetroot
<ul type="disc"> • Ginger
<li>Beetroot</li> • Potato
<li>Ginger</li> • Radish
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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> o Beetroot
<ul type="circle">
o Ginger
<li>Beetroot</li>
o Potato
<li>Ginger</li>
o Radish
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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>.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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
3. Potato
<ol type="1">
4. Radish
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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
B. Ginger
<li>Ginger</li> C. Potato
<li>Potato</li> D. Radish
<li>Radish</li>
</ol>
</body>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
</html>
• 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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• Following is an example where we used <ol type="i" start="4" >
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
This will produce following result:
</head>
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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• Example
<!DOCTYPE html>
<html>
<head>
This will produce following result:
<title>HTML Definition List</title> HTML
This stands for Hyper Text Markup Language
</head> 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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• <!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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• </html>
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• 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.27/02/2025
summary // summary=“hffjgjgjgj”Prof.C.NagaRaju YSREC phone: 9949218570
• <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”
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
<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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• <!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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• </table>
• <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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• <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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• </html>
<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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
Splitting table into three parts
• <Thead>… </Thead>
• <Tbody> .. </Tbody>
• <Tfoot>.. </Tfoot>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
<!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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• <tbody>
• <tr>
• <td>2002</td>
• <td>amrutha</td>
• </tr>
• </tbody>
• <tfoot>
• <tr>
• <td colspan="2">hellow tfoot </td>
• </tr>
• </tfoot>
• </table>
• </body>
</html>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
•
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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”>
27/02/2025 Generates
Prof.C.NagaRaju a Reset
YSREC phone: button
9949218570 (clear form)
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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" />
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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" />
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
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.
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• <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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• <input type="reset" value="reset button"><br>
• <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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• <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>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
• </html>
• Special Characters
• < < - Less-Than Symbol
• > >- Greater-Than Symbol
• & & - Ampersand, or 'and' sign
• " " - Quotation Mark
• © © - Copyright Symbol
• ™ ™ - Trademark Symbol
• - A space (non-breaking space)
• &#??; ISO 8859-1 character - replace ?? with the iso code
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
<html>
<body>
hello< world<br>
hello> world<br>
hello& world<br>
hello" world "<br>
hello© world<br>
hello world<br>
hello&#??; world<br>
</body>
</html>
27/02/2025 Prof.C.NagaRaju YSREC phone: 9949218570
Thank you
