Scribd
Upload
39 views35 pages

Unit 1

Uploaded by

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

Unit 1

Uploaded by

savixo2871
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

UNIT- I

HTML: Introduction, Basic structure of an HTML document, Mark up Tags, Heading-Paragraphs, Line
Breaks, HTML Tags, Elements of HTML, Working with Text, Working with Lists, Tables and Frames,
Working with Hyperlinks, Images and Multimedia, Working with Forms and controls.

HTML Introduction
• HTML stands for Hyper Text Markup Language.
• HTML describes the structure of a Web page.
• HTML consists of a series of elements.
• HTML elements tell the browser how to display the content.
• HTML elements are represented by tags.
• HTML tags label pieces of content such as "heading", "paragraph", "table", and so on.
• Browsers do not display the HTML tags, but use them to render the content of the page.
• Hypertext Markup Language (HTML) is the standard markup language for creating web pages and
web applications.
• A markup language is a set of markup tags.
• HTML documents are described by HTML tags.
• Each HTML tag describes different document content.
• Publish online documents with headings, text, tables, lists, photos, etc.
• Retrieve online information via hypertext links, at the click of a button.
• Design forms for conducting transactions with remote services, for use in searching for information,
making reservations, ordering products, etc.
• Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
• HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML
specification which was published in 1995.
• HTML is used to create electronic documents (called pages) that are displayed on the World Wide
Web.
• Each page contains a series of connections to other pages called hyperlinks.
• Every web page you see on the Internet is written using one version of HTML code or another.
• Without HTML, a browser would not know how to display text as elements or load images or other
elements.
• HTML is not a complex programming language.

Example-1:- Simple Html Program


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
1 BHAWANA CHOUDHARY
Output:-

Example Explained:-
o The <!DOCTYPE html> declaration defines this document to be HTML5
o The <html> element is the root element of an HTML page
o The <head> element contains meta information about the document
o The <title> element specifies a title for the document
o The <body> element contains the visible page content
o The <h1> element defines a large heading
o The <p> element defines a paragraph

HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
• HTML tags normally come in pairs like <p> and </p>.
• The first tag in a pair is the start tag, the second tag is the end tag.
• The end tag is written like the start tag, but with a forward slash inserted before the tag name.

Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display
them. The browser does not display the HTML tags, but uses them to determine how to display the
document.

HTML Page Structure

2 BHAWANA CHOUDHARY
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages
correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:


<!DOCTYPE html>

HTML Versions
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.0 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"

HTML Heading
There are six levels of headings defined by HTML. These six heading elements are H1, H2, H3, H4, H5,
and H6; with H1 being the highest level and H6 the least.

3 BHAWANA CHOUDHARY
Importance of Heading:
1. Search Engines use headings for indexing the structure and content of the webpage.
2. Headings are used for highlighting important topics.
3. They provide valuable information and tell us about the structure of the document.

Example-2
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

Output:-

HTML Paragraph
A paragraph always starts on a new line, and is usually a block of text. The HTML <p> element defines a
paragraph. These have both opening and closing tag. So anything mentioned within <p> and </p> is
treated as a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin)
before and after a paragraph.

Example-3
<!DOCTYPE html>
<html>
<body>
<h1>The p element</h1>
<p>This is a paragraph.</p>
4 BHAWANA CHOUDHARY
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

Output:-

HTML Line Breaks


The HTML <br> element defines a line break. Use <br> if you want a line break (a new line) without
starting a new paragraph. The <br> tag is an empty tag, which means that it has no end tag.

Example-4
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a paragraph<br>with line breaks</p>
</body>
</html>

Output:- This is
a paragraph
with line breaks

The HTML <pre> Element


The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both
spaces and line breaks:

Example-5
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.


5 BHAWANA CHOUDHARY
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>

Output:- The pre tag preserves both spaces and line breaks:
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

HTML Text Formatting


Formatting elements were designed to display special types of text:

1. Bold Text:- The HTML <b> element defines bold text.


Eg. :- <b>This text is bold</b>

2. Italic:- The HTML <i> element defines italic text.


Eg. :- <i>This text is italic</i>

3. Underline:- It is used to underline the given content.


Eg. :- <u> hello world </u>

➢ HTML Text Formatting Elements:

Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

6 BHAWANA CHOUDHARY
<mark> Defines marked/highlighted text

Example-6

<html>
<body>
<b>Bold text</b>
<br>
<em>Emphasized text </em>
<br>
<i>Italic text</i>
<br>
<small>Small text</small>
<br>
<strong>Strong text</strong>
<br>
log<sub>2</sub>
<br>
x<sup>2</sup>
<br>
<ins>hello inserted text</ins>
<br>
<del>Deleted text</del>
<br>
<mark>Highlighted Text </mark>

</body>
</html>

Output:-

7 BHAWANA CHOUDHARY
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

The HTML Style Attribute: -


Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has
the following syntax:
<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

1. Background Color:
The background-color property defines the background color for an HTML element.
Example:- <body style="background-color:powderblue;">

2. Text Color:
The color property defines the text color for an HTML element:

Example:- <h1 style="color:blue;">This is a heading</h1>

3. Fonts:
The font-family property defines the font to be used for an HTML element:

Example:- <p style="font-family:verdana;">This is a paragraph.</p>

4. Text Size:
The CSS font-size property defines the text size for an HTML element:

Example:- <h1 style="font-size:300%;">This is a heading</h1>

5. Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:

Example:- <p style="text-align:center;">Centered paragraph.</p>

HTML Comments
HTML comments are not displayed in the browser, but they can help document your HTML source code.
You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag. With comments
you can place notifications and reminders in your HTML.

HTML Colors
HTML colors are specified using predefined color names, or RGB, HEX, values.

8 BHAWANA CHOUDHARY
• Color Names
In HTML, a color can be specified by using a color name, for eg.- Red, Green, Orange etc.

Background Color Example:- <h1 style="background-color:Blue;">Hello World</h1>

Text Color Example:- <p style="color:Green;">Hello World</p>

• Color Values
In HTML, colors can also be specified using RGB values, Hex values.

o RGB Color Values


In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For eg:- <h1 style="background-color:rgb(255, 99, 71);">...</h1>

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others
are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

o HEX Color Values


In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-
255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set
to the lowest value (00).

For eg:- <h1 style="background-color:#ff6347;">...</h1>

Example-7

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body style="background-color:powderblue;">

<h1 style="background-color:yellow; color:red">My First Heading</h1>

9 BHAWANA CHOUDHARY
<h2 style="color:blue; font-size:400%;">This is a heading</h2>

<p style="font-family:algerian; color:red; text-align:center;">My first paragraph</p>

</body>
</html>

Output:-

HTML Images
Images can improve the design and the appearance of a web page.In HTML, images are defined with
the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute specifies the URL (web address) of the image:
<img src="url">

• The alt Attribute


The alt attribute provides an alternate text for an image, if the user for some reason cannot view it
(because of slow connection, an error in the src attribute, or if the user uses a screen reader). If a browser
cannot find an image, it will display the value of the alt attribute:

<img src="img_chania.jpg" alt="Flowers in Chania">

• Image Size - Width and Height


You can use the style attribute to specify the width and height of an image. Alternatively, we can use
the width and height attributes as in the following example:-

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">


10 BHAWANA CHOUDHARY
Example-8

<!DOCTYPE html>
<html>
<body>
<img src="Flower.jpg" alt="Flower Image" width="500" height="600">
</body>
</html>

HTML Links
Links allow users to click their way from page to page.
Hyperlinks:- HTML links are hyperlinks. You can click on a link and jump to another document. When
you move the mouse over a link, the mouse arrow will turn into a little hand. A link does not have to be
text. It can be an image or any other HTML element.

HTML Links - Syntax

Hyperlinks are defined with the HTML <a> tag: <a href="url">link text</a>

Example
<a href="https://www.tutorials.com/html/">Visit our tutorial</a>
The href attribute specifies the destination address of the link.

The link text is the visible part (Visit our tutorial).

Clicking on the link text will send you to the specified address.

➢ Local Links
A local link (link to the same web site) is specified with a relative URL (without https://www....).

Example:- <a href="file.html">HTML Images</a>

➢ The target Attribute


The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

• _blank - Opens the linked document in a new window or tab

• _self - Opens the linked document in the same window/tab as it was clicked (this is default)

• _parent - Opens the linked document in the parent frame

• _top - Opens the linked document in the full body of the window

• framename - Opens the linked document in a named frame

11 BHAWANA CHOUDHARY
➢ HTML Links - Image as a Link
<!DOCTYPE html>
<html>
<body>
<h2>Image Links</h2>
<p>The image is a link. You can click on it.</p>
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial">
</a>
</body>
</html>

Example-9

<html>
<head> </head>
<body>
<a href="text format.html">
<img src="Flower.jpg">
</a>
<br>
<a href="E:\WEB Practical\Flower.jpg"> click here </a>
</body>
</html>

➢ HTML Links - Create Bookmarks


HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.
Bookmarks can be useful if a web page is very long.

To create a bookmark - first create the bookmark, then add a link to it. When the link is clicked, the page
will scroll down or up to the location with the bookmark.

Example: First, create a bookmark with the id attribute:


<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
<a href="#C4">Jump to Chapter 4</a>

HTML Tables
HTML tables allow web authors to arrange data into rows and columns.

An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table
header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is
defined with the <td> tag.

12 BHAWANA CHOUDHARY
Example:-
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

❖ Adding a Border
If you do not specify a border for the table, it will be displayed without borders.

A border is set using the CSS border property: <table border=”1”>

❖ Cellpadding and Cellspacing Attributes


There are two attributes called cellpadding and cellspacing which you will use to adjust the white space
in your table cells. The cellspacing attribute defines space between table cells, while cellpadding
represents the distance between cell borders and the content within a cell.
Example:- <table border=”1” cellpadding=”5” cellspacing=”5”>

13 BHAWANA CHOUDHARY
❖ Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column. Similar
way you will use rowspan if you want to merge two or more rows.

Example:- <td rowspan=”2”>……</td>

❖ Tables Backgrounds
You can set table background using one of the following two ways −

• bgcolor attribute − You can set background color for whole table or just for one cell.
Eg:- <table border=”1” bgcolor=”red”>

• background attribute − You can set background image for whole table or just for one cell. You can
also set border color also using bordercolor attribute.

Eg:- <table border=”1” bordercolor=”green” background=”image.jpg”>

❖ Table Height and Width

You can set a table width and height using width and height attributes. You can specify table width or
height in terms of pixels or in terms of percentage of available screen area.
Eg:- <table border=”1” height=”150px” width=”200px”>

❖ Table Caption

The caption tag will serve as a title or explanation for the table and it shows up at the top of the table.
Eg:-<caption>This is a caption </caption>

Example-10

<!DOCTYPE html>
<html>
<body>
<h2 style="color:red;">Basic HTML Table</h2>

<table border="1" bgcolor="red" bordercolor=”green” height=250px width=300px


style="padding:10px;">
<caption>Student Details</caption>

<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
14 BHAWANA CHOUDHARY
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John</td>
<td>Dooooe</td>
<td>50</td>
</tr>
<tr>
<td colspan="3">Total Students = 3</td>
</tr>
</table>
</body>
</html>
Output:-

HTML Lists

HTML lists allow web authors to group a set of related items in lists.
HTML offers web authors three ways for specifying lists of information. All lists must contain one or
more list 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.

15 BHAWANA CHOUDHARY
1. HTML Unordered Lists
An unordered list is a collection of related items that have no special order or sequence. This list is
created by using HTML <ul> tag. Each item in the list is marked with a bullet.

Example:- <ul>
<li>….</li>
<li>….</li>
</ul>

• 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">

Example:-
<html>
<body>
<ul>
<li> CPU</li>
<li> Moniter</li>
<li> Keyboard</li>
</ul>
<ul type="circle">
<li> pooja</li>
<li> Harshita</li>
<li> Kajal</li>
<li> Arpita</li>
</ul>
</body>
</html>

Output:

2. 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>.

16 BHAWANA CHOUDHARY
Example:- <ol>
<li>….</li>
<li>….</li>
</ol>

• 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"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

• 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.

Example:-
<html>
<body>
<ol>
<li> CPU</li>
<li> Moniter</li>
<li> Keyboard</li>
</ol>
<ol type="I" start = "4">
<li> pooja</li>
<li> Harshita</li>
<li> Kajal</li>
<li> Arpita</li>
</ol>
</body>
</html>

3. HTML Description Lists


HTML also supports description lists. A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes
each term.

Example:- <dl>
<dt>Coffee</dt>
17 BHAWANA CHOUDHARY
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Output:- Coffee
- black hot drink
Milk
- white cold drink

❖ Nested HTML Lists


Example-11
List can be nested (lists inside lists):
<html>
<body>
<h1>MGC Courses</h1>
<h2>A Nested List</h2>
<ol>
<li>BBA</li>
<li>Computer Science
<ul>
<li>BCA</li>
<li>PGDCA</li>
<li>COPA</li>
</ul>
</li>
<li>BSC(Biotech)</li>
<li>Fashion Design</li>
<li>BBA</li>
<li>BCOM</li>
</ol>
</body>
</html>

Output:-

18 BHAWANA CHOUDHARY
HTML ATTRIBUTE
An attribute is additional information that a tag needs in order to better display its intended object. An
attribute is created inside the start tag, after the name of the tag and before the >. A tag can have one or
more attributes. You will have to decide when and why to use an attribute.

Syntax:- <tagname attributename=”value”>.........</tagname>

The formula of an attribute is:- attribute_name=”value”

The following syntax is used for more than one attribute:

<tagname attribute1=value1 attribute2=value2 attribute n=value n>.........</tagname>

• We can write the value in simple form or in single quotes or in double quote.
• An attribute is used to define the characteristics of an HTML element & is placed inside the element’s
opening tag.
• Attribute names and attribute values are case-insensitive.

Core Attributes
There are 4 core attributes that can be used on the majority of HTML elements are:-
1. Id
2. Title
3. Class
4. Style

1. The id Attribute
➢ The id attributes of an HTML tag can be used to uniquely identify any element within an HTML page.
➢ There are 2 primary reason to use an id attribute:-
• If an element carries an id attribute as a unique identifier it is possible to identify just that element
and its content.
• If you have 2 elements of the same name within a web page, you can use the id attribute to
distinguish b/w elements that have the same name.
Example:-
<p id=”html”>this paragraph explains what is HTML </p>
<p id=”cas”>this paragraph explains what is CSS </p>

2. The title Attribute


➢ The title attribute gives a suggested title for the element. The syntax for the title attribute is similar as
explained for id attribute.
➢ The behaviour of this attribute will depend upon the element that carries it, although it is often
displayed as a tooltip when cursor comes over the element or while the element is loading.

Example:- <h3 title=”hello html!”>title heading tag example</h3>

19 BHAWANA CHOUDHARY
3. The class Attribute
➢ The class attribute is used to associate an element with a style sheet and specify the class of element.
➢ The value of the attribute may also be a space separated list of class names.

Example:- <h3 class=”className”>heading tag example</h3>

4. The style Attribute

The style attribute allows you to specify cascading style sheet (CSS) rules within the element.

Example:- <p style=”color:red;”>some text</p>

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 <marquee> tag.

Syntax:
A simple syntax to use HTML <marquee> tag is as follows −
<marquee attribute_name = "attribute_value"....more attributes>
One or more lines or text message or image
</marquee>

❖ The <marquee> Tag Attributes

Following is the list of important attributes which can be used with <marquee> tag.

Sr.No Attribute & Description

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

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

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

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

20 BHAWANA CHOUDHARY
Scrolldelay
5
This specifies how long to delay between each jump. This will have a value like 10 etc.

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

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

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

Example-12:

<html>
<head>
<title>HTML Marquee</title>
</head>
<body>

<marquee>MEWAR GIRLS COLLEGE</marquee>

<marquee><h1>MEWAR GIRLS COLLEGE</h1></marquee>

<marquee width="50%">MEWAR GIRLS COLLEGE</marquee>

<marquee direction="right">MEWAR GIRLS COLLEGE</marquee>

<marquee behavior=alternate>MEWAR GIRLS</marquee>

<marquee bgcolor="yellow">MEWAR GIRLS COLLEGE</marquee>

<marquee scrollamount="15">MEWAR GIRLS COLLEGE</marquee>

<marquee direction="down" height="100%">MEWAR GIRLS COLLEGE</marquee>

</body>
</html>

Output:-

21 BHAWANA CHOUDHARY
HTML - Frames
HTML frames are used to divide your browser window into multiple sections where each section can load
a separate HTML document. A collection of frames in the browser window is known as a frameset. The
window is divided into frames in a similar way the tables are organized: into rows and columns.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines how
to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames
and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which
HTML document shall open into the frame.

Example-13:- Following is the example to create three vertical frames –

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "30%,40%,30%" border="10">
<frame src = "text format.html">
<frame src = "list.html">
<frame src = "flower.jpg" noresize = "noresize">
</frameset>
</html>

Output:-

22 BHAWANA CHOUDHARY
❖ The <frameset> Tag Attributes

Following are important attributes of the <frameset> tag −


Sr.No Attribute & Description

Cols
Specifies how many columns are contained in the frameset and the size of each column.

A percentage of the browser window. For example, to create three vertical frames, use cols
1 = "10%, 80%, 10%".

Using a wildcard symbol. For example, to create three vertical frames, use cols = "10%, *,
10%". In this case wildcard takes remainder of the window.

Rows
This attribute works just like the cols attribute and takes the same values, but it is used to
specify the rows in the frameset.
2
For example, to create two horizontal frames, use rows = "10%, 90%". You can specify
the height of each row in the same way as explained above for columns.

Border
3 This attribute specifies the width of the border of each frame in pixels. For example,
border = "5". A value of zero means no border.

Frameborder
This attribute specifies whether a three-dimensional border should be displayed between
4
frames. This attribute takes value either 1 (yes) or 0 (no). For example frameborder = "0"
specifies no border.

Framespacing
This attribute specifies the amount of space between frames in a frameset. This can take
5
any integer value. For example framespacing = "10" means there should be 10 pixels
spacing between each frames.

23 BHAWANA CHOUDHARY
❖ The <frame> Tag Attributes

Following are the important attributes of <frame> tag −

Sr.No Attribute & Description

Src
This attribute is used to give the file name that should be loaded in the frame. Its value can
1
be any URL. For example, src = "/html/top_frame.htm" will load an HTML file available
in html directory.

Name
This attribute allows you to give a name to a frame. It is used to indicate which frame a
2 document should be loaded into. This is especially important when you want to create
links in one frame that load pages into an another frame, in which case the second frame
needs a name to identify itself as the target of the link.

Frameborder
3
This attribute specifies whether or not the borders of that frame are shown.

Noresize
By default, you can resize any frame by clicking and dragging on the borders of a frame.
4
The noresize attribute prevents a user from being able to resize the frame. For example
noresize = "noresize".

Scrolling
This attribute controls the appearance of the scrollbars that appear on the frame. This takes
5
values either "yes", "no" or "auto". For example scrolling = "no" means it should not have
scroll bars.

Example-14

<html>
<head>
<title>HTML Frames</title>
</head>

<frameset cols = "30%,40%,30%">


<frame src = "text format.html">
<frame src = "list.html">
<frameset rows="50%,50%">
<frame src="flower.jpg">
<frame src="flower.jpg">
</frameset>
</html>

Output:-
24 BHAWANA CHOUDHARY
❖ Frame's name and target attributes
One of the most popular uses of frames is to place navigation bars in one frame and then load main pages
into a separate frame.
▪ Let's see following example where a frameName.html file has following code –
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "25,50,25">
<frame src="demo.html">
<frame name="frame2" >
<frame src="list.html">
</frameset>
</html>

▪ Following is the content of demo.html file


<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<body>
<a href="flower.jpg" target="frame2">click here</a>
</body>
</html>

Output:-

25 BHAWANA CHOUDHARY
HTML - Iframes
You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not somehow related to
<frameset> tag, instead, it can appear anywhere in your document. The <iframe> tag defines a
rectangular region within the document in which the browser can display a separate document, including
scrollbars and borders. An inline frame is used to embed another document within the current HTML
document.

The src attribute is used to specify the URL of the document that occupies the inline frame.

Syntax:
<iframe src = "URL" width = "size" height = "size"> content </iframe>

• The <Iframe> Tag Attributes


Most of the attributes of the <iframe> tag, including name, class, frameborder, id, name, scrolling, style
etc. behave exactly like the corresponding attributes for the <frame> tag.
Example-15

<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>

<iframe src = "flower.jpg" width = "300" height = "400">


Sorry your browser does not support inline frames.
</iframe>

<h1>MGC</h1>
26 BHAWANA CHOUDHARY
</body></html>

Output:-

HTML - <form> Tag


An HTML form is used to collect user input. The user input can then be sent to a server for processing.
The HTML <form> tag is used for creating a form for user input. Forms are used to pass user-data to a
specified URL. There are various form elements available like text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc.

The 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>

Why use HTML Form


HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping
address and credit/debit card details so that item can be sent to the given address.

HTML Form Tags

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

27 BHAWANA CHOUDHARY
<fieldset> It groups the related element in a form.

<select> It defines a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML Form Controls


1. TextField Control
The type="text" attribute of input tag creates textfield control also known as single line textfield control.
The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc.

Example:- <form>
First Name: <input type="text" name="firstname"/> <br/>
Last Name: <input type="text" name="lastname"/> <br/>
</form>

2. Label Tag in Form


It is considered better to have label in form. As it makes the code parser/browser/user friendly. If you
click on the label tag, it will focus on the text control. To do so, you need to have for attribute in label tag
that must be same as id attribute of input tag.

Example:- <form>
<label for="firstname">First Name: </label>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>

3. HTML Password Field Control


The password is not visible to the user in password field control.
Example:- <form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>

4. HTML Email Field Control


The email field in new in HTML 5. It validates the text for correct email address. You must use @ and .
in this field.
Example: <form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>
28 BHAWANA CHOUDHARY
5. Radio Button Control
The radio button is used to select one option from multiple options. It is used for selection of gender, quiz
questions etc. If you use one name for all the radio buttons, only one radio button can be selected at a
time. Using radio buttons for multiple options, you can only choose a single option at a time.

Example: <form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>

6. Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.

Example: <form>Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>

Example-16

<html>
<body>
<form>
<table>
<tr>
<td><label for="firstname">First Name: </label></td>
<td><input type="text" id="firstname" name="firstname"/></td>
</tr>
<tr>
<td><label for="lastname">Last Name: </label></td>
<td><input type="text" id="lastname" name="lastname"/></td>
</tr>
<tr>
<td><label for="password">Password: </label></td>
<td><input type="password" id="password" name="password"/> </td>
</tr>
<tr>
<td><label for="email">Email: </label></td>
<td><input type="email" id="email" name="email"/></td>
</tr>
<tr>
<td><label for="gender">Gender: </label></td>
29 BHAWANA CHOUDHARY
<td><input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female </td>
</tr>
<tr>
<td>Hobby:</td>
<td><input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label> </td>
</tr>
<tr>
<td>Enter your Address:</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td><label for="city">city:</label></td>
<td><select name="city" id="city" style="width:160px">
<option></option>
<option value="chittorgarh">chittorgarh</option>
<option value="udaipur">udaipur</option>
<option value="bhilwara">bhilwara</option>
<option value="ajmer">ajmer</option>
<option value="other">other</option>
</select></td>
</tr>
<tr> <td><input type="submit" value="submit"></td>
</tr>
</table>
</form>
</body>
</html>

Output:-

30 BHAWANA CHOUDHARY
Example-17

<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<h2>Registration form</h2>
<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>
</body>
</html>
Output:-

31 BHAWANA CHOUDHARY
HTML Block and Inline Elements
Every HTML element has a default display value, depending on what type of element it is.

The two display values are: block and inline.

1. Block-level Elements
A block-level element always starts on a new line and takes up the full width available.
Block level elements in HTML:
• <dd>
• <div>
• <dl>
• <dt>
• <form>
• <h1>-</h1>
• <li>
• <ol>
• <p>
• <pre>
• <table>
• <ul>

2. Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

Inline elements in HTML:


• <b>
• <br>
• <i>
• <img>
• <label>
• <select>
• <span>
• <strong>
• <sub>
• <sup>

❖ The <div> Element


The HTML <div> tag is used to group the large section of HTML elements together.

We know that every tag has a specific purpose e.g. “p” tag is used to specify paragraph, <h1> to <h6> tag
are used to specify headings but the <div> tag is just like a container unit which is used to encapsulate
other page elements and divides the HTML documents into sections.

32 BHAWANA CHOUDHARY
The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the
web page like (text, images, header, footer, navigation bar, etc). Div tag has both open(<div>) and closing
(</div>) tag and it is mandatory to close the tag. The Div is the most usable tag in web development
because it helps us to separate out data in the web page and we can create a particular section for
particular data or function in the web pages.

Example:-
<html>
<body>
<div style="background-color:red; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England.It is the most populous city in the United Kingdom</p>
<p> Div tag is Block level tag. It is a generic container tag. </p>
</div>
</body>
</html>

Output:

❖ The <span> Element


The HTML <span> tag is used for grouping and applying styles to inline elements.

There is a difference between the span tag and the div tag. The span tag is used with inline elements
while the div tag is used with block-level content.

Example:-
<html>
<body>
<h1>My <span style="color:red">Important</span> Heading</h1>
</body>
</html>

Output:- My Important Heading

33 BHAWANA CHOUDHARY
HTML TAGS
TAG NAME DESCRIPTION
Href Specifies the URL (web address) for a link
Src Specifies the URL (web address) for an image
Title Specifies extra information about an element (displayed as a tool tip)
Style Specifies an inline CSS style for an element
Alt Specifies an alternative text for an image, when the image cannot be
displayed
<html> Defines the root of an HTML document
<body> Defines the document's body
<head> A container for all the head elements (title, scripts, styles, meta
information, and more)
<h1> to <h6> Defines HTML headings
<hr> Defines a thematic change in the content
<p> Defines a paragraph
<br> Inserts a single line break
<pre> Defines pre-formatted text
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
<a> Defines a hyperlink
<img> Defines an image
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)

34 BHAWANA CHOUDHARY
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<lable> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<select> Defines a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button

35 BHAWANA CHOUDHARY

You might also like