Scribd
Upload
2 views34 pages

HTML Notes

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, defining their content and structure using tags. An HTML document consists of elements, attributes, and is divided into head and body sections, with various tags for formatting text, creating lists, and adding styles. HTML is case-insensitive, requires a .html or .htm file extension, and is designed to be cross-platform compatible.

Uploaded by

Praneet singh Lashkari
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views34 pages

HTML Notes

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, defining their content and structure using tags. An HTML document consists of elements, attributes, and is divided into head and body sections, with various tags for formatting text, creating lists, and adding styles. HTML is case-insensitive, requires a .html or .htm file extension, and is designed to be cross-platform compatible.

Uploaded by

Praneet singh Lashkari
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

HTML

Introduction
HTML is an acronym for Hyper Text Markup Language. It is the standard markup
language for documents designed to be displayed in a web browser. it defines the content
and structure of web content. A Markup Language is a set of instructions often called tags
which can be added to text files. HTML is only a formatting language are not a
programming language.
 Hyper Text refers to the way in which Web pages (HTML documents)
are linked together. Thus, the link available on a webpage is called
"HyperText".
 Markup Language, which means you use HTML to simply "mark up" a
text document with tags that tell a Web browser how to structure it to
display.
What is an HTML Element?
An HTML element is a basic building block to create a webpage, and It is created by
a start tag, content, and end tag. In an HTML element, the content is placed between
a start and end tag.
The basic syntax of an HTML element is

Attributes
Tags have properties that can optionally be assigned values to change default behaviour
of these tags. These properties are called attributers. Attributes are placed within the
starting tag. So, even standalone tags may have attributes.
For example
<hr width=”150”>
This tag represents horizontal rule whose length is specuified by the attribute width
as 150 pixels. Multiple attributes can be specified by separting them by white
space(s).
B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)
For Example
<hr width=150” color=”red”>

The following points should be noted


1. An HTML file must have an htm or html file extension
2. An HTML file can be created using a simple text editor
3. HTML tags are case-Insensitive. So browsers do not distinguish between <i> and <I>.
4. Tags that are not known to the browser are ignored.
5. Tags must be properly nested.
6. It is recommended that double quotation marks should be used to specify attribute
value.
Advantages of HTML:-
 A HTML document is small and hence easy to send over the internet. It is small
because it doesn’t include format information.
 HTML documents are cross platform compatible and device independent. We need a
HTML readable browser to view them.

STRUCTURE OF THE HTML PROGRAM:-


The HTML Program is generally divided into two sections i.e head and body. We use
<head> and <body> tags to indicate these two sections.

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


Where,
1. <!DOCTYPE html> − It defines the document type as HTML.
2. <html> − It is a root element for an HTML document. All elements are placed
inside this element.
3. <head> − The head tag may contain scripts and styles that are useful page
functionalities. Meta tags are also placed inside this tag.
4. <title> − It defines the webpage's title.
5. <body> − It defines the body of the webpage, all elements that are used to
display content on the browser placed inside the body tag.
6. <h1> and <p> − The h1 tag defines page heading, and p tag defines paragraph.

Example:
<html>
<head>
<title>First Webpage</title>
</head>
<body>
This is my first page
</body>
</html>

Steps for creation and execution of HTML document.


1. Open Notepad or any other editor.

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


2. Type the HTML code as mentioned above.
3. Save the file with .html extension.
4. Open any browser, type the name of document in URL.
5. Enjoy the output.

Attributes of <body> tag


1. background:- The URL or a graphic file to be used in the filling the browser’s
Background.
2. bgcolor:- The color of the browser’s background.

3. bgproperties:- It Indicates if the background should scroll when text does. If we set
it to“FIXED”, the background will not scroll when the text does.
4. text:- specifies color of text in the browser.
5. link:-specifies color of hyperlink that have not yet visited.
6. alink:- specifies the color of link that is being clicked.
7. vlink:-specifies the color of hyperlinks as they have been visited.

HTML Basic tags


[Link] comment

<!-- comment -->

Everything within these characters sequences will be ignored by the browsers and
will not be parsed. Comments are used to explain the purpose of critical tahgs in a
HTML

[Link] Breaks

Browsers ignore the new line characters in the HTML source file and text is
displayed continuously. The tag <br> is used to insert a line break.
< br>

[Link] tag
When content was enclosed within <center> and </center> tags, web browsers
would render that content centered horizontally on the page or within its parent
element.
Example
<center>
<h1>This heading is centered using the center tag.</h1>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


<p>This paragraph is also centered.</p>
</center>

4.<Marquee> tag

The <marquee> tag allows content enclosed within it to scroll horizontally (left or
right) or vertically (up or down) across the screen. Its behavior can be customized
using various attributes:
 direction: Specifies the scrolling direction (e.g., "left", "right", "up", "down").
 scrollamount: Controls the speed of the scrolling content.
 behavior: Defines how the marquee behaves (e.g., "scroll", "slide", "alternate").
 loop: Determines how many times the animation repeats (e.g., "infinite" or a
number).
 bgcolor: Sets the background color of the scrolling area.
 height and width: Control the dimensions of the marquee box.

Example
<marquee direction="right" scrollamount="5" behavior="alternate" loop="infinite"
bgcolor="#f0f0f0"> This is a scrolling message!
</marquee>

Text Styles

1. Changing base font

To set default font style, color etc, we use the <basefont> ta. The face, size and color
attributes are used to specify font style, font size and font color respectively. The
following code sets the font style “arail” , font size “2” and font color “red”.

<basefont face=”arial” size=2” color=”red”>

2. Changing style of a specific text


The <basefont> tag changes the style of the entire text of the page. If you want to
change the style of va specific text, use the <font> tag.

<font face=”verdana” size=”10 ” color=”red”> Welcome</font>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


The Font type can be set by using face attribute with font tag in HTML document. But
the fonts used by the user need to be installed in the system first.

The Font size attribute is used to adjust the size of the text in the HTML document using
a font tag with the size attribute. The range of size of the font in HTML is from 1 to 7 and
the default size is 3.

The Font color is used to set the text color using a font tag with the color attribute in an
HTML document. Color can be specified either with its name or with its hex code.

3. Bold Text
The tag <b> makes the enclosed text bold.
Example:
<b> SVIT </b>

4. Underline text
The tag <u> tag makes the enclosed text underlined.
Example
<u> SVIT</u>

5. Italicized text
The <i> is used to make the enclosed text italic.
Example
<i> SVIT</i>

6. Combining styles
The styles tags can be combined. To get a bold and underlined text, <b> tag and <u>
tag can be combined in any order as long as they are nested correctly.
Example
HTML = <b><u><i>Hyper Text MarkUp Language<i></u></b>.
7. Heading
HTML provided tags for section headings. There are total six levels of headings
h1 through h6. The h1 heading has the largest and h6 has the smallest font size.
The exact size is determined by the browser used. Consider the following HTML
code.

<h1>Svit is an Engineering College</h1>


<h2>Svit is an Engineering College</h2>
<h3>Svit is an Engineering College</h3>
B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)
<h4>Svit is an Engineering College</h4>
<h5>Svit is an Engineering College</h5>
<h6>Svit is an Engineering College</h6>
8. Strikethrough Text
The strikethrough text is created using the <strike> tag as follows
Example
<strike>SVIT</strike>

9. Paragraph
Web browsers ignore new line characters encountered in the HTML document.
HTML provides a paragrapgh tag <p> which is used to start a fresh paragrapg. The
tag <p> inserts a blank line immediately before the new paragraph.

<p> SVIT is an Engineering Collge</p>.

10. Preformatted Text


Browsers consecutive white spaces by on espace. If you want to keep them as
thet are. Use the <pre> tag. It is essential to create table like layout also.

Example
<pre> SVIT is an Engineering Collge</pre>.

11. SubScript Tag

The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H2O:

Example
H<sub>2 </sub>O

12. SuperScript
The HTML <sup> element defines superscript text. Superscript text appears half a
character above the normal line, and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like WWW[1]:
Example
(a+b)<sup>2 </sup>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


HTML Lists
A list is a collection of one or more items. HTML supports effectively three types of
lists for formatting text: Unordered (bulleted), Ordered(numbered) and Definition Lists.
The lists can also be nested. For example you can use an unordered list in ordered list
and vice-versa.
Unordered Lists
An unordered list is created using the <ul> tag. Items in the list are created using the
<li> tag and are displayed using bullets. Note that an item itself may be separated
ordered or unordered list.

<ul>
<li>unordered List</li>
<li>ordered List</li>
<li>Definition List</li>
</ul>
Output
 unordered List
 ordered List
 Definition List
This code creates an unordered list of three items. The type attribute of the <ul>
tag specifies the bullet option.

Bullet Options Meaning Result


B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)
<ul> Default bullet shape  One
is disc  Two
<ul type=”disc”> Disc shaped bullets  One
are used  Two
<ul type=”circle”> Circle shaped bullets oOne
are used o Two

<ul type=”square”> Square shaped bullets  One


are used  Two

Unordered List
In this type of list, items are displayed using numbers. The list is created using the
<ol> tag and items are created using the <li> tag. Note that an item itself may
be a separate ordered or unordered list.
<ol>
<li>unordered List</li>
<li>ordered List</li>
<li>Definition List</li>
</ol>
Output
1. unordered List
2. ordered List
3. Definition List

This HTML code creates the same list of ordered items. The different numbering
options for ordered list is shown below

Numbering Numbering
Meaning Result Meaning Result
options options
Use small
Use default 1. One a. One
<ol> <ol type=’a’> letters for
number type 2. Two b. Two
numbering
Use small
1. One d. One
<ol use default <ol type=’a’ letters
2. Two e. Two
type=’1> number type start ‘4’> starting
from d

Use capital A. One Use small i. One


<ol
letters for B. Two <ol type=’i’> roman ii. Two
type=’A>
numbering numbers

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


Use default
Use small
<ol number 3. One <ol type=’i’ ii. One
roman
start=3> starting 4. Two start=2> iii. Two
numbers
from 3
Use capital C. One
Use capital I. One
<ol letters D. Two
<ol type=”I”> roman II. Two
start=3> starting from
numbers
D

Definition Lists
A definition list is one where list items consists of two parts: a term and its
description. It is created using the <dl> tag. The term part and the definition part
and the definition part of each item are created using <dt> (Definition term) and
<dd> (definition description) tags respectively.

<dl>
<dt>dl tags</dt>
<dd> it is the outermost tag of definition list</dd>
<dt>dt tags</dt>
<dd>contains item to be described</dd>
<dt>dd tags</dt>
<dd> contains description of the item</dd>
<dd> each term may have multiple description</dd>
</dl>

OUPUT

dl tags
it is the outermost tag of definition list
dt tags
contains item to be described
dd tags
contains description of the item
each term may have multiple description.

Nested Lists

Nested lists may be used to display sub-elements of an item. Any of the three
types of lists may be nested in another. Arbitrary levels of nesting is possible. In the
following example n ordered list is nested in a unordered list.

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


Example

<body bgcolor="pink">
<h1 align=center><b><u>Nested List</u></b></h1>
<font size=5>
<ol>
<li>Subjects
<ol>
<li>Mathematics</li>
<li>Science</li>
<li>Literature</li>
</ol>
</li>
<li>Programming languages
<ol>
<li>C</li>
<li>Java</li>
<li>python</li>
<li>Ruby</li>
<li>swift</li>
</ol>
</li>
</li>
<li>Computer Science Concepts
<ol>
<li>Data structures</li>
<li>Algorithms</li>
<li>Operating systems</li>
<li>Database management</li>
<li>Networking</li>
</ol>
</li>
<li>web technologies</li>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>javaScript
<ol>
<li>React</li>
<li>Angular</li>
<li>Vue</li>
</ol>
</li>
<li>BootSTrap</li>
</ol>
</ol>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


</font>
</body>

Anchor Tag <a> in HTML


The <a> tag defines a hyperlink, which is used to link from one page to another. The
most important attribute of the <a> element is the href attribute, which indicates the
link's destination. This attribute determines where the user is directed upon clicking
the link. The text between the opening and closing tags is what users will see and
click on.
Syntax
<a href=”url”> link text</a>
Example:
<a href=[Link] Bank<a>
By default, links appear as follows in all browsers:
 Unvisited links: Underlined and blue.
 Visited links: Underlined and purple.
 Active links: Underlined and red.
Another attribute of <a> tag is target attribute
target attribute:- target attribute specifies where to open the linked
document.
Possible values are
1. target=_self:- open the document in the same window/Tab as it was clicked (default).
B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)
2. target=_blank:- open the document in a new window/Tab.
3. target=_parent:- open the document in the parent Frame.
4. target=_top:- open the document in the full body of the window.
Uses of HyperLinks
1. To create the link which navigates from one page to another page.
2. To create link which open user’s mail program.
3. To create a link which navigates within the current page.

1. creates a link which navigates from one page to another page


<html>
<head>
<title> Anchor tag Demo</title>
</head>
<body bgcolor="pink">
<a href="[Link]
</body>
</html>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


2. creates a link that opens users mail program

<html>
<head>
<title> Anchor tag Demo</title>
</head>
<body bgcolor="pink">
<a href="mailto: abc@[Link]">Click here to mail</a>
</body>
</html>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


3. To create a link which navigates within the current page.
<html>
<head>
<title> Anchor tag Demo</title>
</head>
<body>
<a href="#HTML"><font size="10">Introduction to HTML</font></a><br>
<a href="#CSS"><font size="10">Introduction to CSS</font></a><br>
<a href="#JAVASCRIPT">
<font size="10">Introduction to JavaScript</font></a>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</
p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</
p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<pre id="HTML">
<font size="12">
<b>HTML</b> Stands for <b><i>HyperText Markup Language</b></i>,
where,
HyperText stands for Link between web pages.
Markup Language means Text between tags that define the structure.
HTML is a markup language that is used to create web pages. It defines how the
web page looks and how to display content with the help of elements. It forms
or defines the structure of our Web Page, thus it forms or defines the structure of
our Web Page. We must remember to save your file with .html extension.
</font>
</pre>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</
p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</
p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</
p><p>&nbsp;</p>

<pre id="CSS">
<font size="12">

What is CSS?
CSS stands for Cascading Style Sheets. It is the language for describing the
presentation of Web pages, including colours, layout, and fonts, thus making our
web pages presentable to the users.
CSS is designed to make style sheets for the web. It is independent of HTML
and can be used with any XML-based markup language. Now let’s try to break
the acronym:
Cascading: Falling of Styles
Style: Adding designs/Styling our HTML tags
Sheets: Writing our style in different documents
</font></pre>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</
p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>z<p>&nbsp;</p><p>&nbsp;</
p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<pre id="JAVASCRIPT">
<font size="12">
JavaScript is an open-source programming language designed for creating web-
centric applications. It is lightweight and interpreted which makes it much faster
than other languages and is integrated with HTML making it easier to
implement in web applications.
In this Introduction to JavaScript article, you will learn all about JavaScript, the
backbone of web development, and understand what exactly this language is
and why and how this language is used across various fields.
JavaScript is critical for web development, and if you’ve ever thought about
choosing that career path, you’d surely have come across this language. And
probably, that’s why you are here in the first place.
</font>
</pre>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


</body>
</html>

Onclicking the Introduction to HTML HyperLink, the control navigates to the section
where Introduction to HTML is available.

Onclicking the Introduction to CSS HyperLink, the control navigates to the


section where Introduction to CSS is available.

Introduction to Frames
HTML frames are used to divide your browser window into multiple sections
called frames where each frame can load a separate HTML document
independently. So, frames allows us display multiple HTML document in one
browser window simultaneously. They are refreshed separately. A collection of
frames in the browser window is known as frameset.

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


Syntax
<frameset ["cols=%,%"] [rows="%,%"] bodercolor="color name"]
<frame [name="name"] [src="filename"] [scrolling="yes"|no"|"auto"]
frameborder="0"|"1"] noresize >
<frameset>

Where,
name  refers to name of the frame
src  specifies the location of the intital web page to be loaded.
scrolling specifies the scroll information about the frame. It can
have the following values
1. auto----specifies that the scroillbar will be added as and
when necessary
2. yes------specifies that scrollbars are to be added always.
3. No --- specified that no scrollbars will be provided.
noresize if present, indicates that the frame is not resizable
Frameborder  specifies the border information about the frame. It can
have the following values
1. "1" indicates that a border will be drawn
2. "0" indicates that the frame will not any border.
Example 1: Dividing the browser into two vertical frames

[Link]
<html>
<head>
<frameset cols="30%,70%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</head>
<body>
</body>
</html>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


[Link]

<html>
<body bgcolor="pink">
<title>Frame demonstration</title>
<h1 align="center"> First Frame</h1>
</body>

[Link]

<body bgcolor="green">
<h1 align="center"> second Frame</h1>
</body>

Example 1: output screen shot

Example 2: Dividing the browser into two Horizontal frames

[Link]
<html>
<head>
<frameset cols="30%,70%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</head>
</html>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


[Link]
<html>
<body bgcolor="pink">
<title>Frame demonstration</title>
<h1 align="center"> First Frame</h1>
</body>
</html>

[Link]
<html>
<body bgcolor="green">
<h1 align="center"> second Frame</h1>
</body>
</html>

Example 2: output screen shot

Example 3: Dividing frame into two rows and then in second row was divided
vertically into two.
[Link] [Link]
<html> <html>
<head> <body bgcolor="green">
<title>Frame demonstration</title> <p>&nbsp;</p>
<frameset rows="30%,70%"> <p>&nbsp;</p>
<frame src="[Link]"> <p>&nbsp;</p>
<frameset cols=50%,50%> <h1 align="center"> second Frame</h1>
<frame src="[Link]"> </body>
<frame src="[Link]"> </html>
</frameset>
</frameset>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


[Link] [Link]
<body bgcolor="pink"> <body bgcolor="green">
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<p>&nbsp;</p> <p>&nbsp;</p>
<h1 align="center"> First Frame</h1> <h1 align="center">Third Frame</h1>
</body> </body>

Example 3: output screen shot

Example 4: A hyperlink in one frame loads a new page in another frame.

In this example you have to do two things:


1. Use the name attribute to give each of your frames a special identity.
2. Use the target attribute in your hyperlinks.

HTML form
The HTML <form> tag is very important tag, it is used to create an HTML form for
user input. It acts as a container for various input element allowing you to collect
data from users on a web page.
Its primary purpose is to gather information provided by users,. When a form is
submitted the data collected within the form is sent to a specified location for
processing.
Attributes
1. action:-specifies the URL where the form data should be sent upon submission.
2. method:- which specifies the HTTP method to be used.
3. name:- used to name the form

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


Get Post
1. We can use Get method to we can use POST method to post
get information from server. information to server.
2. Usually Get method are Usually POST request are write or
READ-ONLY. update operations
3. End user provided information End-user provided information will
will be appended to the URL be encapsulated in the request body
as part of QueryString and and send to server.
send to server.
4. Using Get request we can Using POST request we can send
send only character both Binary and character data to
data(ASCILL) and we cannot the server.
send binary data like images.
5. By using GET request we Using POST request we can send
can send only limited huge amount of information to the
information (usually 2KB) server.
6. Security is less and hence we Security is more and hence we can
cannot send sensitive send sensitive information.
information (password, credit
card no etc)
7. Caching of GET request is Caching of POST request is not
possible. possible.
8. GET request is idempotent. POST request is not Idempotent.
9. There are multiple ways to There is only one way to send
send GET Request. POST Request, submitting the
1. Typing URL in the address HTML FORM with method
bar and press enter. Attribute of POST value.
2. Clicking hyperlink.
3. Submitting the HTML
FORM without method
attribute.
4. Submitting the HTML
FORM with GET method
attribute.
Differences between Get and Post methods of action attribute in form tag

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


Form Elements
Data are collected using different types of control elements. Each control element
should have a name which is specified by the attribute name. each element has a
initial value which is typically specified by the value attribute. users may however
change this value.
Whenever a form is submitted, the name-value pair of some control is sent. Most of
the controls elements are created using<input> tag. It has attribute type that specifies
the type of the input. There are 10 input types :text, password, checkbox, radio, submit,
reset, hidden, file etc
1. Text Field
The most commonly used input element is text field. It is used to get single-line
textual data. Its common usage include name, email address, login name etc.
<input type=”text” name=t1 >
Attributes:-
[Link]:-it prevents changes to the text.
[Link]:-specifies max. no. of characters a user can enter in text field
[Link]:-specifies the maximum number of characters that can be viewed.
[Link]:-specifies name of the control element, submitted as a part of form.
[Link]:- specifies the initial value of the textfield.
[Link]:-disables textfield from the user input.

2. Password field
Password field are similar to text field except that characters entered are displayed
as dots or asterisk. This allows us to hide information from others. It is commonly
used to accept sensitive information such as passwords, credit card numbers etc.

<input type=”password” name=”t2” >


All attributes of textfield are also valid for a password field.

3. Checkbox
A checkbox is like a toggle switch i.e it can be either of the two states checked
or unchecked. Checkboxes allow visitors to select one( or more) options from a
set of related alternatives.

Which of the following items do you have


<input type=”checkbox” name =c1 value=”yes”>Car

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


<input type=”checkbox” name =c2 value=”yes”>Computer
<input type=”checkbox” name =c3 value=”yes”>Camera

The value attribute stores the value to be returned when the checkbox is [Link]
the attribute value is not present and checkbox is checked, the value “on” is
returned. However if it is not checked, no value is returned.
A check box by default is off. If you want to turn it on use the checked
keyword

4. Radio Button
Radio button allow visitors to select any one among a set of related alternatives.
A radio button like a checkbox, can be in either two states: on(Checked) or
off(unchecked). A group of radio buttons is created by giving the same name to each
button in the group. when one radio button is selected, the previous selected radio
button(if any) is unselected.
A radio button is created using the <input> tag and specifying type=”radio”. The
following code allows you to choose any one among the four options.
<input type=”radio” name=”gender” value=”M”>Male<br>
<input type=”radio” name=”gender” value=”F”>FeMale<br>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


5. Selection List
A selection list( also called drop down list), like a group of radio buttons or
checkboxes, allows a visitors to choose one 9lor more) options among a set of
options. The advantage of selection list is that, it takes less space than check
boxes or radio buttons. The disadvantage is that users cannot see all the options
until they click on it.
A selection list is created using the <List> tag, items of a selection list are created
using the <option> tag. Bt default the first option is displayed, although any item
can be displayed using the selected attribute for it.
1. The size attribute specifies how many items are to be displayed.
2. if keyword multiple in select tag is given then user may select multiple
items.
3. To make an item to be selected by default we use selected inside the
option tag.

6. TextArea
A text area is an extension of a text field, where the text can span multiple lines.
It is used when visitors want to enter a large amount of text. Unlike other form
fields, a text area is created using the <textaraea> and </textarea> tags. Everything
within the tag pair is displayed in the text area. The number of rows and columns
may be set using the attributes rows and cols respectively. The wrap attribute
specifies how the text in a text area is to be wrapped when submitted in a form
If wrap=”soft”
This is the default value. When wrap="soft" is used, the text displayed in the text
area will visually wrap within the element's width, but no newline characters are
added to the submitted value. The submitted text will be a single continuous string,
even if it appears wrapped in the browser.

If Wrap=”hard”,
when wrap="hard" is used, the browser will insert newline characters into the
submitted value at the points where the text visually wraps within the text area. This
means that the submitted text will retain its line breaks as they appeared in the
browser.

Example
<textarea cols=5 rows=5>
SVIT is an acronym for Swami Vivekananda Institute of technology
</textarea>

7. Action Buttons
B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)
In HTML, "action buttons" primarily refer to elements that trigger an event or
perform an action when a user interacts with them. The most common way to
create such buttons is using an <input> element with
1. type="submit",
2. type="reset".
3. type="button",
4. type=file
1. Submit Button is used to send information to the server script whose URL is
specified by the action attribute of the <form> tag. A submit button is created as
follows
<input type=”submit” value=”Submit”>
This code creates a button with caption “Submit” which when clicked sends
form’s data to the server.
2. Reset Button when a reset button is clicked, form field are assigned their
default initial values. It is created as follows
<input type=”reset” value=”Reset”>
3. Button used for general-purpose buttons that typically trigger JavaScript. It is
created as follows
<input type=”button” value=”Click”>
4. File Button: in HTML creates a file upload control on a web page. This allows
users to select one or more files from their local device to be submitted with a
form.
<input type=”file” value=”file”>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


The Image Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has no
closing tag.
To display an image on a page, you need to use the src attribute. src stands for
"source". The value of the src attribute is the URL of the image you want to display on
your page.

The syntax of defining an image:


<img src="url">
The URL points to the location where the image is stored. An image named
"[Link]".
The browser puts the image where the image tag occurs in the document.

The Alt Attribute


The alt attribute is used to define an "alternate text" for an image. The value of
the alt attribute is an author-defined text:
<img src="[Link]" alt="beautiful flower">

The "alt" attribute mainly used to tells the reader what he or she is missing on a
page if the browser can't load images. The browser will then display the alternate
text instead of the image. It is a good practice to include the "alt" attribute for each
image on a page, to improve the display and usefulness of your document for

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


people who have text-only browsers. It is also useful for
1. It is good for search engines to search.
2. For visually impaired, alt gives some idea about the image.
3. For text only browsers, it gives idea about the image.
Example 1:
<html>
<body>
<img src=”[Link]” alt=”beautiful flower”>
</body>
</html>

width and height attributes


These attributes specifies the height and width of the image.
1. If only width is given, then height is automatically adjusted.
2. If only height is given, then width is automatically adjusted.
3. If both are absent, then original size becomes the size of the image.

Example 2
<html>
<body>
<img src=”[Link]” alt=”beautiful flower” width=500 heght=500>
</body>
</html>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


Tables in HTML
Tabular structure was first introduced in HTML 3.2. It is sometimes useful to display
data in a two-dimensional tabular format. Tables are also powerful tools for
formatting your web page.
A table is created using three tags <table>, <tr> and <td>. The tag table is the
container of the whole table. The opening tag <table> tells the browser that a table
is to be created. Table specific properties are also defined here. The closing </table>
tells browser that it is the end of the table. Everything else is contained within the
<table> and </table> tag pair.
A table consists of a number of rows each of which is made of a number of
cells. The tag <tr> creates a row. The total number of rows in a table is equal to
the number of <tr> elements. The opening tag <tr> and closing tag </tr>
indicates the beginning and ending of a table row respectively.
<table>
<tr>… </tr>
<tr>…</tr>
….
</table>
A table or arrow cannot contain data. To add data, cells are created within a row.
Each cell in a row is defined by the tag <td>. The number of columns in a row is
equal to the number of <td> elements. The content of cell is written the <td>
and </td> tag pair. Textual as well as graphical content can be used in a cell.
Usual tags such as <p>,<br>, <b> and <u> may be used within a cell.

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


<table>
<tr>
<td>…</td>
<td>…</td>
</tr>
</table>
Two other tags are defined <th> and <caption>. To add a column header, the <th> tag
is used. The title of a table is added using the <caption> tag.

Attributes of Table tag:


1. align : specifies the horizontal alignment of the table in the browser window,
set to ”left, center, right”.
2. background : specifies the URL of a background image to be used as
background for the table.
3. bgcolor : sets the background color of the table cells.
4. border : sets the border width.
Tag : sets the
5. bordercolor Meaning
external border color of the entire table.
table: sets the
6. cellpadding Represents the whole
spacing between table
cell walls and content.
tr : sets theRepresents
7. cellspacing row table cells.
spacing between
8. height : td
sets the height of the whole
Represents table.
a cell in a row
9. width : sets
th the width of the table.
Column header
Caption Title of the table

Attributes of <tr> tag:


1. align : specifies the horizontal alignment content in the table cells set to “left,
center, right”.
2. bgcolor : sets the background color of the table cells.
3. bordercolor : sets the external border color of the entire table.
4. Valign : sets the vertical alignment of data, set to top, middle, bottom.
Attributes of <td> tag
1. align : specifies the horizontal alignment content in the table cells set to “left,
center, right”.
2. bgcolor : sets the background color of the table cells.
3. bordercolor : sets the external border color of the entire table.
4. colspan : indicates the how many cell columns of the table this cell should
span.
5. rowspan : indicates the how many cell rows of the table this cell should span.

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)
HTML Code
<body>
<table border=1 bordercolor=red align=center width=50% height=50%
cellspacing=0 cellpadding=10>

<caption align=right> Student information</caption>


<tr>
<td colspan=4 align=center> Student information</td>
</tr>

<tr>
<td align=center>[Link]</td>
<td>Student name</td>
<td>RollNo</td>
<td>Branch</td>
</tr>

<tr>
<td>1</td>
<td>SriRam</td>
<td>001</td>
<td>IOT</td>
</tr>
<tr>
<td>2</td>
<td>Krishna</td>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


<td>002</td>
<td>IOT</td>
</tr>
</table>
</body>

Example 2:

HTML Code
<body>
<table border=1>
<tr>
<td rowspan=3>Student marks</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>

<tr>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)


<td>A</td>
<td>B</td>
<td>C</td>
</tr>

<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>

B. JOGA RAO SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY(SVIT)DEPT. CSE(IOT)

You might also like