Scribd
Upload
3 views42 pages

HTML

This document provides a comprehensive overview of HTML, including its definition, history, features, and basic structure for creating web pages. It covers essential HTML tags, attributes, and elements such as headings, paragraphs, lists, images, links, and forms, as well as the use of CSS for styling. Additionally, it explains how to create and save HTML documents and access them via web browsers.

Uploaded by

sakshamkundu737
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
3 views42 pages

HTML

This document provides a comprehensive overview of HTML, including its definition, history, features, and basic structure for creating web pages. It covers essential HTML tags, attributes, and elements such as headings, paragraphs, lists, images, links, and forms, as well as the use of CSS for styling. Additionally, it explains how to create and save HTML documents and access them via web browsers.

Uploaded by

sakshamkundu737
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

Unit 2: HTML

• Introduction to web page designing using HTML: create and save an HTML document, access
a web page using a web browser.
• HTML tags: html, head, title, body, (attributes: text, background, bgcolor, link, vlink, alink), br
(break), hr(horizontal rule), inserting comments, h1..h6 (heading), p (paragraph), b (bold), i
(italics), u (underline), ul (unordered list), ol (ordered list), and li (list item). Description lists: dl,
dt and dd. Attributes of ol (start, type), ul (type).
• Font tags (attributes: face, size, color).
• Insert images: img (attributes: src, width, height, alt), sup (super script), sub (subscript).
• HTML Forms: Textbox, radio buttons, checkbox, password, list, combobox.
• Embed audio and video in a HTML page.
• Create a table using the tags: table, tr, th, td, rowspan, colspan
• Links: significance of linking, anchor element (attributes: href, mailto), targets.
• Cascading style sheets: colour, background-colour, border-style, margin, height, width,
outline, font (family, style, size), align, float

WHAT IS HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for creating
web pages and web applications.

Hyper Text: HyperText simply means “Text within Text.” A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked
on a hypertext. HyperText 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 is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated by a
web browser. A web page can be identified by entering an URL. A Web page can be of the
static or dynamic type. With the help of HTML only, we can create static web pages.

1
HISTORY OF HTML
HTML was created by Tim Berners-Lee in 1991 so Tim Berners-Lee is known as the father of
HTML. The first-ever version of HTML was HTML 1.0, but the first standard version was HTML
2.0, published in [Link] latest version of HTML is HTML5.

FEATURES OF HTML
1) It is a very easy and simple language. It can be easily understood and modified.

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

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

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

5) It is platform-independent because it can be displayed on any platform like Windows, Linux,


and Macintosh, etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.

7) HTML is a case-insensitive language, which means we can use tags either in lower-case or
upper-case.

Q:- CREATING AND SAVING AN HTML DOCUMENT


An HTML document can be created using any text editor such as Notepad (Windows) , TextEdit
(Mac). Now write your HTML code in text editor file. Now save the text file using .html or
.htm.

Example of HTML Document-

Open your text editor or Notepad. Type the following code –

<!DOCTYPE html>

2
<html lang="en">

<head>

<title>A simple HTML document</title>

</head>

<body>

<p>Hello World!<p>

</body>

</html>

Now save the text file as ” [Link] ” on desktop.

ACCESSING A WEB PAGE USING WEB BROWSER


To open the html document / file in a browser. Navigate to your file then double click on it. It
will open in your default Web browser. If it does not, open your browser and drag the file to it.

To Open the document we created above go to your desktop and double Click on ”
[Link] ” OR Do Right Click on document and open the document with any web
browser.

Q:- HTML DOCUMENT STRUCTURE


HTML document defines the structure of web page.

HTML document begins with the <!DOCTYPE html> declaration, and the HTML documents
start and end with the <html> and </html> tags.

HTML document is split into two parts −

 Head
 Body

3
The first line <!DOCTYPE html> is the document type declaration. It instructs the web browser
that this document is an HTML5 document. It is case-insensitive.

The head which contains the information about the document title etc. The information inside
this tag does not display outside (on web page). The information of the head part is placed
between <head>…</head> tags. Also displayed in above example code.

The <body> element contains the document’s actual content (paragraphs, links, images,
tables, and so on) that is rendered in the web browser and displayed to the user.

Q:- HTML ELEMENTS OR TAGS


An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here… </tagname>

The HTML element is everything from the start tag to the end tag

CONTAINER AND EMPTY ELEMENTS


CONTAINER TAGS
Container tags are generally divided into three parts, i.e., opening tag, content(which will
display on the browser), and closing tag. In the content part, they can also contain some other
tags. These opening and closing tags are used in pairs which are start tag and end tag, which is
often called ON and OFF tags. If you forget to close the container tag, the browser applies the
effect of the opening tag until the end of the page.

Syntax – <tag_name> …. </tag_name>

Some examples of container tags are:

1. <html>….</html>: This marks the beginning and ending of the webpage.

2. <head>…</head>: This tag is used to define the head part of the document.

3. <body>….</body>: This tag is used to display all the information or data, i.e, text, images,
hyperlinks videos, etc., on the webpage to the user.

4
4. <h1>….</h1> to <h6>…</h6>: It is used for including headings of different sizes ranging
from 1 to 6.

5. <ol>…</ol>: This tag is used to create ordered lists.

EMPTY TAGS
The tags that do not contain any closing tags are known as empty tags. Empty tags contain
only the opening tag but they perform some action in the webpage. Syntax – <tag_name>

Some examples of empty tags are:

1. <br>: Inserts a line break in a webpage wherever needed.


2. <hr>: Inserts a horizontal line wherever needed in the webpage.
3. <img>: This tag is used to display the images on the webpage.
4. <input>: This is mainly used with forms to take the input from the user.

THE <HTML> TAG


This is main tag of HTML document. Every HTML code starts with <HTML> and ends with
</HTML>. Then developer can write the entire code in between <HTML> and </HTML>. It
tells the browser that the document is an HTML document. Along with HTML tag following
attributes can be used:

LANG ATTRIBUTE
It specifies the language used in HTML document. Mostly the value is the first two initial
letters of the language used in the web page.
For example:- <HTML lang="fr">

THE <HEAD> TAG


It defines the head section of the HTML web page. It consists of the header information such
as the title of the webpage, scripts like javascript or VBScript, styles used in the document,
and description tags. This tag has no attribute.
<Head>...............</Head>

5
THE <TITLE> TAG
It displays the title of your webpage on the title bar. It plays an important role to crawl your
webpage by Google or any other search engine. The title must be descriptive, unique, and
short for each document.
For example,
<html>
<head>
<title> HTML basic tags </title>
</Head>
<body>
Main content of the page goes here.
</body>
</html>

Q:- THE <BODY> TAG AND ITS ALL ATTRIBUTES


It is the main area where the user’s content will be displayed on the web page. Each and every
content like text, lists, tables, images, audio, video, frames, etc. will be inserted between
<html> and </html>. This element has the following attributes:

BACKGROUND
The background attribute is used to apply or change the background image of your webpage.
For example,
<html>
<head>
</head>
<body background="[Link]">
Your contents goes here.</body>
</html>
bgcolor
This attribute is also related to the background color of the webpage. The value can be any
color name or color code. The color code is made up of the hexadecimal code with #rrggbb
format. You can use the color code for light or dark color combinations. Let’s have look on this
code:

Note: The hexadecimal code is using 0 to 9 digits and A to F letters such as #0011DD.

6
<html>
<head>
<title>Background Color Demo</title>
</head>
<body bgcolor="blue">
Your contents goes here.</body>
</html>

TEXT
This attribute changes the color of text written into the webpage. The text which is not a part
of any other element or formatting styles can be displayed with the given color.
For example,
<html>
<head>
<title>Background Color Demo</title>
</head>
<body bgcolor="blue" text="white">
Your contents goes here.</body>
</html>

LINK
Indicates the color of hyperlink text within the document, which corresponds to documents
not already visited by the browser. Color names can substitute for the RGB hexadecimal
values.

<BODY BGCOLOR="pink" TEXT="blue" LINK="Green">

ALINK
Indicates the color of hyperlink text while the text is selected. Color names can substitute for
the RGB hexadecimal values.

<BODY BGCOLOR="pink" TEXT="blue" LINK="Green" VLINK="Yellow" ALINK="Black">

7
VLINK
Indicates the color of hyperlink text within the document, which corresponds to documents
already visited by the browser. Color names can substitute for the RGB hexadecimal values.

<BODY VLINK="Green">

LEFTMARGIN
Specifies the width (in pixels) of a margin of white space along the left edge of the entire
document.

<BODY LEFTMARGIN="30">

TOPMARGIN
Specifies the size (in pixels) of a margin of white space along the top edge of the entire
document.

<BODY TOPMARGIN="10">

Q:- <HR> TAG


HTML <hr> tag is a simple yet essential element used to insert a horizontal rule in an HTML
page. It serves to divide or separate different sections of a document. <hr> tag in HTML stands
for horizontal rule. The <hr> tag is an empty tag, and it does not require an end tag. The
primary purpose of the <hr> tag is to create a visual separation between content sections
within an HTML page.

Attributes of <hr> tag:-


Attribute Value Description
Align Left,right, center Deprecated − Specifies the alignment of the horizontal
rule.
Noshade Noshade Deprecated − Removes the usual shading effect that most
browsers display.
Size pixels or % Deprecated − Specifies the height of the horizontal rule.
Width pixels or % Deprecated − Specifies the width of the horizontal rule.

8
Q:- HTML <BR> TAG
The <br> tag in HTML document is used to create a line break in a text.

It is generally used in poem or address where the division of line is necessary. It is an


empty tag, which means it does not need a company of end tag. If you place the <br> tag
in the HTML code, then it works the same as pressing the enter key in a word processor.

SYNTAX:-
Text <br> Text

Q:- HTML COMMENTS


Comments are some text or code written in your code to give an explanation about the
code, and not visible to the user. Comments which are used for HTML file are known as
HTML comments. Anything written between these tags will be ignored by the browser, so
comments will not be visible on the webpage.

Comments of any code make code easy to understand and increase readability of code.

Comments are also part of the code, which gives an explanation of the code.

HOW TO ADD COMMENT IN HTML


You can add comments in your HTML file using <! -- ... --> tag. So if you will write
anything between theses comment tag that will be treated as comment and browser will
not read it.

SYNTAX:-
<! -- Write commented text here -->

9
Q: HTML HEADING TAGS
The HTML heading tag is used to define the headings of a page. There are six levels of
headings defined by HTML. These 6 heading elements are h1, h2, h3, h4, h5, and h6; with h1
being the highest level and h6 being the least.
 <h1> is used for the main heading. (Biggest in size)
 <h2> is used for subheadings, if there are further sections under the subheadings then
the <h3> elements are used.
 <h6> for the small heading (smallest one).
SYNTAX:
<h1>Heading1</h1>
<h2>Heading2</h2>
.
.
<h6>Heading6</h6>

Q:- HTML <p> tag


When writing in HTML (hypertext markup language), the <p> tag is a block element used to
designate a paragraph. It is useful because Internet browsers add a bit of margin before after
each element. The following sections contain information about this tag, including an example
of it in use, and related attributes and browser compatibility.

HTML Paragraph Syntax:


10
<p> Paragraph Content </p>
EXAMPLE OF <P> TAG:-
<p>Hey, I'm a paragraph with some text in me.</p>

Q:- HTML <B>, <STRONG> TAG


To make text bold in HTML, use the <b>…</b> tag or <strong>…</strong> tag. Both the tags
have the same functioning, but <strong> tag adds semantic strong importance to the text.
The <b> tag is a physical markup element, but do not add semantic importance.

SYNTAX:-
<B> ..........</B>
<STRONG>.....</STRONG>
EXAMPLE:-
<html>
<head>
<title>HTML text bold</title>
</head>
<body>
<h2>Our Products</h2>
</body>
</html>

Q: HTML <I> TAG


HTML <i> tag is used to represent a part of text in a different voice from the surrounding
text. The content within <i> tag usually renders in italic type on the browser. It can be
useful to represent some technical terms, phrase, fictional character thoughts, etc.

SYNTAX
<i>Write your Content here....</i>

11
Q: HTML <U> TAG
The HTML <u> tag stands for underline which helps to underline the text enclosed within the
<u> tag. Underlining the text is mainly done to indicate the unarticulated or styled differently
from normal text, i.e. to denote the misspelled words. The HTML <u> tag is supported by
HTML4.1 but deprecated in HTML5.

SYNTAX:-
<u> Contents... </u>

Q: HTML LISTS
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)


2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

1. HTML ORDERED LISTS OR NUMBERED LIST

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

EXAMPLE:
<html> Output:
<head> 1. Beetroot
<title>HTML Ordered List</title> 2. Ginger
</head> 3. Potato
<body> 4. Radish
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
12
</body></html>

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
Following is an example where we used <ol type = "i" start = "4" >

<html>
<head>
<title>HTML Ordered List</title>
</head>

13
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

2. Unordered List or Un-numbered List (ul)


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
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</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 −

14
<ul type = "square">

<ul type = "disc">

<ul type = "circle">

EXAMPLE:-
Following is an example where we used <ul type = "square">

<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
3. HTML DEFINITION LISTS

HTML and XHTML supports 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
EXAMPLE
<html>

15
<head>
<title>HTML Definition List</title>
</head>
<body>
<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>

Output:-

NESTED LISTS

It is possible to use one type of list within another type of list. There are called nested lists.
EXAMPLE:
<html>
<body>
<h1> Nested List </h1>
<ol><li> chocolates</li>
<ul type="square">
<li> dairy milk </li>
<li> bournvile </li>
<li> munch </li>
</ul>
16
<li> Games </li>
<ul type="disc">
<li> cricket </li>
<li> hockey </li>
<li> football </li>
</ul>
<li> fruit </li>
<ul type="circle">
<li> apple </li>
<li> orange </li>
<li> grapes </li>
</ul></ol>
</body></html>
OUTPUT:

Q:- <FONT> TAG IN HTML


<Font> Tag in HTML is one of the most important attributes used to make webpage or HTML
documents more attractive. It has the properties to change the size, color, and style of
included text. With the help of a font tag, one can make a web page’s size, color, and face in
17
the same text format. This tag mainly works on three major attributes like size, Face or Type
and color.

You can use a <basefont> tag to set all of your text to the same size, face,
and color.

Syntax:

<font size =" " face =" " color=" ">

Attribute Name Detail Description

Size This attribute is used to define a specific size for text in between 1 to 7.

Face or type This attribute is used to define the font type for the included text.

Color This attribute is used to show enclosed text in a different color.

Weight This attribute defines the boldness of the text of the font tag.

EXAMPLES OF FONT
<html>
<head></head>
<body>
<p> <font size="2" color="blue" face="Calibri"> </font>
</p>
</body>
<html>
Q:- HTML <IMG>, IMAGE TAG
Using HTML <img> tag we can insert images in our webpage. Almost all the webpages these
days have images.

There are various attributes of the <img> tag and these are src, lang, dir, alt, etc. which we will
cover in this tutorial along with examples.
18
Among all attributes of the <img> tag, only the src attribute is necessary while all other
attributes are optional, because the src attributes has the path of the image to be displayed as
the value.

This <img> tag can insert any kind of image. Different image formats supported
are: gif, jpeg, png, svg, etc.

HTML <IMG> TAG - SYNTAX AND USAGE:-

The <img> element is an empty tag which means it only requires a start tag or opening tag.

Also, this is an inline element.

Syntax:-

<img src=”URL Of The image”>

EXAMPLE OF <IMG> TAG:-


<html>

<head>
<title>HTML Tag</title>
</head>

<body>
<img src = "[Link]
alt = "HTML Tutorial" height = "150" width = "140" />
</body></html>

IMAGE TAG ATTRIBUTES

The HTML image tag supports the following attributes:

19
Attributes Values Description

src "image source url Required, Image path should be absolute path.
path"

width "size_px" Specifies the Width to display the image.

Height "size_px" Specifies the Height to display the image.

Align "left" Specifies the image align side.


"right"

Border "Size" Specifies the image border size.


eg. "0"

alt "alternate text" Required Attribute. Specifies text to be identify the image.

Hspace "size_px" Space from the left and right side

Vspace "size_px" Space from the top and bottom side

ismap It is used to indicate that the image is used as an Image


map. It is an optional attribute.

usemap It is used to associate an element with an Image map and it


is also optional.

Q:- HTML SUBSCRIPT AND SUPERSCRIPT TAGS


SUBSCRIPT
The <sub> tag is used to add a subscript text to the HTML document. The <sub> tag defines
the subscript text. Subscript text appears half a character below the normal line and is

20
sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like
H2O to be written as H2O.
Syntax:-
<sub>...............</sub>
EXAMPLE
<p>H<sub>2</sub>O</p>
<p>O<sub>2</sub></p>
<p>H<sub>2</sub>SO<sub><4/sub></p>

OUTPUT

SUPERSCRIPT:
The <sup> tag is used to add a superscript text to the HTML document. The <sup> tag defines
the 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.
Syntax:-
<sup>...............</sup>
EXAMPLE
(a+b)<sup>2 </sup>= a<sup>2</sup>+2ab+b<sup>2</sup>

Output

(a+b)2 = a2+2ab+b2

21
Q:- HTML FORM

An HTML Form is a section of the document that collects input from the user. The input from
the user is generally sent to a server (Web servers, Mail clients, etc). We use the
HTML <form> element to create forms in HTML.

Form Attributes
The HTML <form> tag also supports the following attributes −

Attribute Value Description


accept MIME_type Specifies a comma-separated list of content types
that the server accepts.
accept-charset charset list Specifies a list of character encodings that the
server accepts. The default value is "unknown".

action URL Specifies a URI/URL of the back-end script that will


process the form
enctype mimetypes The mime type used to encode the content of the
form.
method get Specifies the HTTP method to use when the form is
post submitted. Possible values −
 get (the form data is appended to the URL
when submitted)
 post (the form data is not appended to the
URL)
name form name Defines a unique name for the form.
target _blank Target to open the given URL.
_self _blank − the target URL will open in a new window.
_parent _self − the target URL will open in the same frame
_top as it was clicked.
_parent − the target URL will open in the parent
frameset.
_top − the target URL will open in the full body of
the window.

22
HTML FORM INPUT TYPES
In HTML <input type=" "> is an important element of HTML form. The "type" attribute of
input element can be various types, which defines information field. Such as <input
type="text" name="name"> gives a text box.

FOLLOWING IS A LIST OF ALL TYPES OF <INPUT> ELEMENT OF HTML.

1. <INPUT TYPE="TEXT">:
<input> element of type "text" are used to define a single-line input text field.

EXAMPLE:
<form>
<label>Enter first name</label><br>
<input type="text" name="firstname"><br>
<label>Enter last name</label><br>
<input type="text" name="lastname"><br>
<p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>
</form>

2. <INPUT TYPE="PASSWORD">:
The <input> element of type "password" allow a user to enter the password securely in a
webpage. The entered text in password filed converted into "*" or ".", so that it cannot be
read by another user.

EXAMPLE:
<form>
<label>Enter User name</label><br>
23
<input type="text" name="firstname"><br>
<label>Enter Password</label><br>
<input type="Password" name="password"><br>
<br><input type="submit" value="submit">
</form>

3. <INPUT TYPE="SUBMIT">:
The <input> element of type "submit" defines a submit button to submit the form to the
server when the "click" event occurs.

EXAMPLE:
<form action="[Link]
<label>Enter User name</label><br>
<input type="text" name="firstname"><br>
<label>Enter Password</label><br>
<input type="Password" name="password"><br>
<br><input type="submit" value="submit">
</form>

24
4. <INPUT TYPE="RESET">:
The <input> type "reset" is also defined as a button but when the user performs a click
event, it by default reset the all inputted values.

EXAMPLE:
<form>
<label>User id: </label>
<input type="text" name="user-id" value="user">
<label>Password: </label>
<input type="password" name="pass" value="pass"><br><br>
<input type="submit" value="login">
<input type="reset" value="Reset">
</form>

5. <INPUT TYPE="RADIO">:
The <input> type "radio" defines the radio buttons, which allow choosing an option
between a set of related options. At a time only one radio button option can be selected
at a time.

<form>
<p>Kindly Select your favorite color</p>
<input type="radio" name="color" value="red"> Red <br>
<input type="radio" name="color" value="blue"> blue <br>
<input type="radio" name="color" value="green">green <br>
<input type="radio" name="color" value="pink">pink <br>
<input type="submit" value="submit"> </form>

25
6. <INPUT TYPE="CHECKBOX">:
The <input> type "checkbox" are displayed as square boxes which can be checked or
unchecked to select the choices from the given options.

EXAMPLE:
<form>
<label>Enter your Name:</label>
<input type="text" name="name">
<p>Kindly Select your favourite sports</p>
<input type="checkbox" name="sport1" value="cricket">Cricket<br>
<input type="checkbox" name="sport2" value="tennis">Tennis<br>
<input type="checkbox" name="sport3" value="football">Football<br>
<input type="checkbox" name="sport4" value="baseball">Baseball<br>
<input type="checkbox" name="sport5" value="badminton">Badminton<br><br>
<input type="submit" value="submit">
</form>

7. <INPUT TYPE="BUTTON">:
The <input> type "button" defines a simple push button, which can be programmed to
control a functionally on any event such as, click event.

EXAMPLE:
<form>
<input type="button" value="Clcik me " onclick="alert('you are learning HTML')">
</form>

26
8. <INPUT TYPE="EMAIL">:
The <input> type "email" creates an input filed which allow a user to enter the e-mail
address with pattern validation. The multiple attributes allow a user to enter more than
one email address.

EXAMPLE:
<form>
<label><b>Enter your Email-address</b></label>
<input type="email" name="email" required>
<input type="submit">
<p><strong>Note:</strong>User can also enter multiple email addresses separating by comma or white
space as following: </p>
<label><b>Enter multiple Email-addresses</b></label>
<input type="email" name="email" multiple>
<input type="submit">

9. TEXTAREA
The HTML <textarea> tag is used to define a multi-line text input control.
It can hold unlimited number of characters and the texts are displayed in a fixed-width font
(usually courier).
The size of the HTML textarea is defined by <cols> and <rows> attribute, or it can also be
defined through CSS height and width properties.

Example
<textarea rows="9" cols="70">
JavaTpoint textarea tag example with rows and columns.
</textarea>

27
10. COMBOBOX
HTML Combobox is mainly used for building forms in HTML. In which users are able to select
an option from the list as per their preference. It is formed with a select element and input
type=”text” element. The functionality of the Combobox is as same as a select tag. It’s also
having a <option>tag attribute within the <select >tag to select the menu option from the list
so one can choose an option as per their choice.

Combobox is the HTML element that can easily support all kinds of browsers. It works as the
latest form of objects as a Combobox for filling data through options in a given textfield.

SYNTAX OF COMBOBOX:
<select name=" optionlist ">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option> option 4 </option>
<option> option 5 </option>
</select>
</html>

Example:-
<select>
<option value=”Hindi”>Hindi</option>
<option value=”English”>English</option>
<option value=”Math”>Math</option>
<option value=”Science”>Science</option>
<option value=”SST”>SST</option>
</select>

28
11. LIST BOX
The list box is a graphical control element in the HTML document that allows a user to
select one or more options from the list of options.

To create a list box, use the HTML element <select> which contains two
attributes Name and Size. The Name attribute is used to define the name for calling the
list box, and size attribute is used to specify the numerical value that shows the how many
options it contains.

SYNTAX:
<select Name="Name_of_list_box" Size="Number_of_options">
<option> List item 1 </option>
<option> List item 2 </option>
<option> List item 3 </option>
<option> List item N </option>
</select>
EXAMPLES:
<html>
<title>
Example of List Box
</title>
<body>
Customer Name: <input type="text" Placeholder="Enter the Customer Name"/>
<br>
<select name="Cars" size="6">
<option value="Merceders"> Merceders </option>
<option value="BMW"> BMW </option>
<option value="Jaguar"> Jaguar </option>
<option value="Lamborghini"> Lamborghini </option>
<option value="Ferrari"> Ferrari </option>
<option value="Ford"> Ford </option>
</select>
</body>
</html>

29
Output:

Q- Write the code of the given figure:-

__________________________________________________________________________________

________________________________________________________________________________

Answer:-
<html> <head> <title>Form in HTML</title> </head>
<body> <h2>Registration form</h2>
<form>

30
<h1>User personal information</h1>
<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>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female
<input type="radio" id="gender" name="gender" value="others"/>others <br/>
<br>
Subjects:- <input type="checkbox" name="subject" value="Hindi">Hindi
<input type="checkbox" name="subject" value="English">English
<input type="checkbox" name="subject" value="Maths">Maths
<input type="checkbox" name="subject" value="SST">SST
<input type="checkbox" name="subject" value="Science">Science
<input type="checkbox" name="subject" value="Computer">Computer<br><br>
Enter your Address:<br>
<textarea></textarea><br> <br>
<input type="submit" value="sign-up">
</form> </body> </html>

Q:- HTML TABLES

HTML Tables are used to organise information into rows and columns.

31
In HTML tables you can arrange data such as text, images or links. Using Tables you can get better
formatting of data.

LIST OF TABLE TAGS


Syntax &
Attribute Description
Example
Used to define table. All other table tags and data
Table Tag <table></table>
placed within Table tag.
Table Used to define table heading row. Mostly used for first
<th></th>
Heading table row.

Table Row Used to define each table row. <tr></tr>

Table Data Used to define table data in cells <td></td>

HTML TABLE TAG & ATTRIBUTES


You can make some changes in Table styles using given attributes.

For example, above simple html table program have a border attribute that draws border around
the table. Here, is the list of common table attributes.

HTML TABLE ATTRIBUTES


Attribute Description Syntax & Example

Border used to specify border around the table & cells border="2"

Cell specify amount of spacing between cell border cellpadding="5"


Padding and cell content.
Cell Spacing specify amount of spacing between two adjacent cellspacing="3"
cells.
Width used to set the width of the table. width="80%"

align used to set the alignment of table horizontally. align="centre"

bgcolor used to set the background color of the table. bgcolor="blue"

32
background used to set image in the table background. background="[Link]"

Example:-
<html> Output:
<head>
<title>HTML table Tag</title>
</head>
<body>
<table border = "1">
<tr>
<th>Team</th>
<th>Ranking</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
</tr>
<tr>
<td>South Africa</td>
<td>2</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
</tr>
</table></body></html>

COLSPAN AND ROWSPAN


A table is divided into rows and each row is divided into cells. In some situations we need the
Table Cells span across (or merged) more than one column or row. In these situations we can
use Colspan or Rowspan attributes.
33
COLSPAN
The colspan attribute defines the number of columns a cell should span (or merge)
horizontally. That is, you want to merge two or more Cells in a row into a single Cell.

The above code will merge two Cells as one Cell horizontally.

SYNTAX:-
<th colspan=” ”>
or
<td colspan=” ”>

ROWSPAN
The rowspan attribute specifies the number of rows a cell should span vertically. That is , you
want to merge two or more Cells in the same column as a single Cell vertically.

The above code will merge two Cells as one Cell vertically.

34
SYNTAX:-
<th rowspan=” ”>
or
<td rowspan=” ”>
Q:- Write the html code for the following figure:-

Ans:-
<html>
<head> <title> Example of a Table </title>
</head>
<body>
<table border=”1” cellspacing=”5”>
<caption> Ninja Details </caption>
<tr bgcolor=”yellow”>
<th>Name</th>
<th>Age</th>
<th>Grade</th> </tr>
<tr>
<td bgcolor=”Red”> Ninja A </td>

35
<td> 18 </td>
<td> B </td> </tr>
<tr>
<td> Ninja B </td>
<td>23 </td>
<td> C </td> </tr>
<tr>
<td> Ninja C </td>
<td>22 </td>
<td> A </td> </tr>
<tr>
<th colspan=”3”> Ninja C- the best learner! </th> </tr>
</table>
</body>
</html>

Q:- Inserting Audio or Video


Following tags can be used to insert audio,video files in a webpage:

1. Embed tag <EMBED>


2. Anchor tag <A>
3. Audio tag <AUDIO>,<VIDEO>

<EMBED> tag
Answer: <EMBED> is a tag in HTML, use to embed audio / sound clip into a web page.

Syntax:

36
<EMBED SRC = “URL OF AUDIO FILE” WIDTH=”VALUE” HEIGHT = “VALUE” LOOP
= TRUE/FALSE /> Embedded objects appear on their own lines, centered on the page.
Attributes of <EMBED> tag.

Answer: <EMBED> tag has following attributes: –

(i) SRC : attribute specifies the audio file location or URL.

(ii) HEIGHT : specify the height of controls in pixels.

(iii) WIDTH : specify the width of controls in pixels.

(iv) AUTOSTART : TRUE / FALSE, when set to TRUE starts the clip automatically on page-
load.

(v) LOOP : attribute when set to TRUE, forced media to loop continuously (play) on page.

Q:- What are the problems with the <EMBED> tag.

Answer: There are some problems with the <EMBED> tag. These are:-

(i) Different browsers support different audio formats.

(ii) If a browser does not support the file format, the audio will not play without plug-ins or the
helper application,

(iii) If the plug-in is not installed on the user’s computer, the audio will not play.

<AUDIO> tag
Answer: The HTML5 <AUDIO> tag is a native tag in HTML 5. It is use to embed the sound like
music or other audio streams.
It plays the audio linked file in a browser without using a third party plugin such as Flash.
HTML5 <AUDIO> tag is works with all modern browser only, not with the old web browsers.

Syntax of <AUDIO> tag:-

Answer: The Syntax of HTML5 <AUDIO> tag is :

<AUDIO SRC=”URL of sound file” CONTROLS = “CONTROLS”> </AUDIO>

37
OR

<AUDIO> <SOURCE SRC = “sound file” type = “audio mime-type/> </AUDIO>

Attributes of HTML5 <AUDIO> tag:-

Answer: The HTML5 <AUDIO> tag has following attributes :

(i) SRC : specify the URL of the audio file to embed.

(ii) AUTOPLAY : TRUE / FALSE, if TRUE, then audio will begin automatically, when page
load.

(iii) LOOP : TRUE / FALSE, if set TRUE, audio will start automatically, when it reached at
end.

(v)<SOURCE> element of <AUDIO> tag is also use to specify the audio to embed.
EMBEDDING VIDEO, <VIDEO> TAG

Here is the simplest form of embedding a video file in your webpage −

<video src = "foo.mp4" width = "300" height = "200" controls>


Your browser does not support the <video> element.
</video>

You can use <source> tag to specify media along with media type and many
other attributes. A video element allows multiple source elements and browser
will use the first recognized format −

<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/[Link]" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.

38
</video>
</body>
</html>

Q:- Linking
Answer: Linking means connecting a text or image with another document. Linking is the chief
power of HTML.

A browser highlights the identified text or image with color and /or underlines to indicate it is
a hypertext link or link or hyperlink.

Types of Linking:
1. Internal Linking

2. External Linking

INTERNAL LINKS IN HTML


An internal link is used in html page to navigate properly in the webpage. If you want to go
to any specific location in the same page by clicking on a link, you can create an internal
link in the webpage. <a> tag is used for link creation in html page.

Syntax:

<a href= “#link1”> MyLink</a>

39
Here “href” contain the location name where the link will navigate us when we click on
“MyLink”. The location is given a name for reference and the name contain “#” at the time
of creating link.

<a name= “Link1”> my link starts here </a>

This is the place where we will reach on click.

Example:

<html>
<head>
<title> Internal link example </title>
</head>
<body>
<p>Welcome to my web-page. This is an example of internal link creation in
html web-page.</p><br>
<a name= “HTML Introduction”> Introduction to Html </a>
<p> Html is hyper text mark-up language.</p><br><br>
<a name= “CSS Introduction”> Introduction to CSS </a>
<p> Cascading Style Sheet is used for styling the web pages</p><br><br>
<a href= “#HTML Introduction”> html</a><br>
<a href= “#CSS Introduction”> css</a>
</body>
</html>

EXTERNAL LINKS IN HTML


An external link is used to interconnect two html webpages. When you want to navigate to
some other page or any other URL by clicking on a link on webpage, external links are
created. An external link can be created by using anchor tag in html web page.

Syntax:

<a href= “[Link] or URL”> text to be written on link </a>

40
Here [Link] or URL is the name of the webpage or address where link will navigate
on click.

<html>
<head>
<title> External link example</title>
</head>
<body>
<h1> this page creates external links in html webpage</h1>
<br>
<a href= [Link] URL external link </a>
<br>
<a href= “[Link]”> Page1 external link</a>
</body>
</html>

Q:- ANCHOR TAG, <A> TAG


The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to
web pages, files, email addresses, locations in the same page, or anything else a URL can
address.

Content within each <a> should indicate the link's destination. If the href attribute is present,
pressing the enter key while focused on the <a> element will activate it.

ATTRIBUTES
href

41
The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can
use any URL scheme supported by browsers:

 Sections of a page with document fragments


 Specific text portions with text fragments
 Pieces of media files with media fragments
 Telephone numbers with tel: URLs
 Email addresses with mailto: URLs

target
Where to display the linked URL, as the name for a browsing context (a tab, window, or
<iframe>). The following keywords have special meanings for where to load the URL:

 _self: The current browsing context. (Default)


 _blank: Usually a new tab, but users can configure browsers to open a new window
instead.
 _parent: The parent browsing context of the current one. If no parent, behaves as
_self.
 _top: The topmost browsing context. To be specific, this means the "highest" context
that's an ancestor of the current one. If no ancestors, behaves as _self.

rel
The relationship of the linked URL as space-separated link types.

type
Hints at the linked URL's format with a MIME type. No built-in functionality.

42

You might also like