0% found this document useful (0 votes)

5 views93 pages

Unit 2

HTML (Hyper Text Markup Language) is the primary language for creating web pages, with its first version developed in 1991 and the latest being HTML5 published in 2014. It allows for the development of websites, navigation, and responsive design, and includes various tags for structuring content. The document also contrasts HTML with XHTML, highlighting the stricter syntax rules of XHTML, and provides examples of commonly used HTML tags and their functions.

Uploaded by

nimas qushmi

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

0% found this document useful (0 votes)

5 views93 pages

Unit 2

Uploaded by

nimas qushmi

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

1

Unit-2: Markup Language

Introduction to HTML:
HTML stands for Hyper Text Markup Language, which is the most widely used
language on Web to develop web pages. 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 4.01 was a major version of HTML and it was published
in late 1999. Though HTML 4.01 version is widely used but currently we are having
HTML-5 version which is an extension to HTML 4.01, and this version was
published in 2012.

Different Version of HTML:

Version Years
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014

Advantage of HTML:
 Create Web site - You can create a website or customize an existing web
template if you know HTML well.
 Become a web designer - If you want to start a career as a professional web
designer, HTML and CSS designing is a must skill.
 Understand web - If you want to optimize your website, to boost its speed
and performance, it is good to know HTML to yield best results.
 Learn other languages - Once you understand the basic of HTML then other
related technologies like javascript, php, or angular are become easier to
understand.
2

Example: Hello world program

<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>This is my first web page</h1>
<p>Hello World !!</p>
</body>
</html>

Output:

Applications of HTML
 Web pages development - HTML is used to create pages which are rendered
over the web. Almost every page of web is having html tags in it to render its
details in browser.
 Internet Navigation - HTML provides tags which are used to navigate from
one page to another and is heavily used in internet navigation.
 Responsive UI - HTML pages now-a-days works well on all platform,
mobile, tabs, desktop or laptops owing to responsive design strategy.
 Offline support HTML pages once loaded can be made available offline on
the machine without any need of internet.
3

 Game development- HTML5 has native support for rich experience and is
now useful in gaming development arena as well.
Structure of HTML Document:
The first line of every HTML document is DOCTYPE i.e. DOCTYPE is declared at
the beginning of html document which specifies document type to be HTML and
helps the browser to display a webpage correctly. DOCTYPE stands for document
type and tells the browser which version of HTML we are using. HTML is not case
sensitive so all cases are accepted but we will use small case.
Syntax:
<!DOCTYPE html> : For html 5
After DOCTYPE, html documents must include the four tags <html>, <head>
<title> and <body>.
The <html> tag identifies the root element of the document and must be close at the
end of document by </html>. The html element includes an attribute “lang” which
specifies the language in which the document is written as shown below:
<html lang = “en”> where en means English.
After html tag, a html documents contains two parts head and body. The head
element provides information about the document but does not provide its content.
It always contains two elements, one is title element which is used to provide title
for document and is define by <title> tag.
Another is meta element which is used to provide additional information about
document. The meta element has no content but provides information through its
attribute. The charset attribute specifies the character encoding for the HTML
document. The HTML5 specification encourages web developers to use the UTF-8
(UTF-8 (Universal Character Set + Transformation Format—8-bit) is a character
encoding; capable of encoding all possible characters (called code points) in
Unicode. The encoding is variable-length and uses 8-bit code units.) character set,
which covers almost all of the characters and symbols in the world!
4

<head>
<title> this is html document </title>
<meta charset = “utf- 8” />
</head>
The body of the document provides the content of the documents and is specified by
<body> tag.
Complete syntax for structure of html document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>This is the heading section</h2>
</body>
</html>

In above example, the DOCTYPE defines the document type to be HTML. The text
between <html> and </html> describes an HTML documents. The text between
<head> and </head> provides information about the documents. The text between
<title> and </title> provide title for the document and display at the top of the page.
The text between <body> and </body> describes the visible page content. The text
between <h1> and </h1> describes heading.

HTML and XHTML:

HTML stands for Hyper Text Mark Up Language which means it is used to mark
part of documents to indicate how they should appear in print or in display. User of
the HTML document must use predefined set of tags and attributes but HTML
specifies loose syntax rule. As a result of loose syntax HTML document naturally
5

have been haphazardly written. The second problem with HTML 4.0 is that its
specification does not define how a user agent (HTML processor or browser) is to
recover when erroneous code is encountered because every browser uses its own
variation of error recovery. HTML author have high degree of freedom to use their
own syntactic preference to create documents. But this freedom will lack in
consistency both in low level syntax and in overall structure.
XHTML stands for Extended Hyper Text Mark Up Language based on XML have
three standards: strict, transitional and frame set. Strict syntactic rule of XHTML
imposed a consistent structure on all XHTML document. Strict syntactic rule implies
that all the syntax should be written without mistake i.e. all tags should be properly
closed, all attributes should be properly enclosed, all nested should be done properly
and all the empty tags should be closed properly.
For example:
<!DOCTYPE html>

<html>
<head>
<title> this is html document </html>
<meta charset = “utf- 8” />
</head>
<body>
<h1> this is heading one
<p> this is first paragraph
<br>
<img src = “[Link]” alt = “my text”>
</body>
6

</html>
In above example, the syntax for heading, paragraph, image and break is incorrect
because tags are not closed properly but the output is generated or displayed if
HTML is used. If XHTML is used then the above code will generate error because
strictness of code in XHTML needs every tag to be closed properly. All the tags and
attribute are required to be written in lower case in XHTML.

Basic HTML Tags:

Tags are fundamental syntactical unit of HTML and are used to specify category of
content. The syntax of tag is the tag’s name surrounded by angle brackets (< and >).
For every tag, a browser has default presentation specification for the specified
content. All the tags should be written in lower case. Whatever appears between an
opening and closing tags are content of the tag.
Attributes are used to specify alternative meaning of tags and are specified in
keyword form which means that attribute’s name is followed by equal sign and value
of such attributes. Attributes are written between opening tag name and its right -
angle bracket. Attributes are also written in lower case and its value must be written
between double quote.
For example;
<p> this is paragraph 1 </p>

Tag Content

Types of Tags:
Empty tag/ Singular Tags:
In this kind of tags in which there is no any content and are closed in single tag. For
example:
7

<hr/>: it will create horizontal line

<br/>: use for breaking a line of paragraph
Paired/container tags:
This type of tag general comes with pair i.e. opening tag and closing tag. The
opening tags and its closing tags together specify a container for the content they
enclosed. The container and its content together are called an element.

For example:
<html>
<head> </head>
<body>
<h1> this is heading 1 </h1>
<h2> this is heading 2 </h2>

element
</body>
</html>

Some of the commonly used HTML Tags are:

Heading Tags

Any document starts with a heading. You can use different sizes for your headings.
HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>,
<h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before
and one line after that heading.

Paragraph Tag

The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p> tag.
8

Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next
line. This tag is an example of an empty element, where you do not need opening
and closing tags, as there is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you
omit this space, older browsers will have trouble rendering the line break, while if
you miss the forward slash character and just use <br> it is not valid in XHTML.

Centering Content

You can use <center> tag to put any content in the center of the page or any table
cell.

Horizontal Lines

Horizontal lines are used to visually break-up sections of a document. The <hr> tag
creates a line from the current position in the document to the right margin and
breaks the line accordingly.
The <hr /> element has a space between the characters hr and the forward slash. If
you omit this space, older browsers will have trouble rendering the horizontal line,
while if you miss the forward slash character and just use <hr> it is not valid in
XHTML.

Preserve Formatting

Sometimes, you want your text to follow the exact format of how it is written in the
HTML document. In these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve
the formatting of the source document.

Nonbreaking Spaces
9

Suppose you want to use the phrase "I am a hunter" Here, you would not want a
browser to split the "I, am, a, and hunter" across two lines.
In cases, where you do not want the client browser to break text, you should use a
nonbreaking space entity   instead of a normal space.
Example: Demonstration of some commonly used html tags
<!DOCTYPE html>
<html>
<head>
<title>Tags Example</title>
</head>
<body>
<h1>Heading Tags</h1>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<h1>Paragraph Tags</h1>
<p>This is paragraph</p>

<h1>Line Breaking Tags</h1>

<p>
This is first paragraph <br>
This is second line of paragraph <br/>
This is last line. thank you..
</p>

<h1>Centering Tags</h1>
<center>
<h2>Im center tag :)</h2>
</center>

<h1>Horizental Line Tags</h1>

<h3>This before horizental line..</h3>
<hr/>
<h3>This after horizental line..</h3>

<h1>Preserve Formating Tags</h1>

<h1>Nonbreaking space Tags</h1>

<p>In this line "I am a hunter" should be always
together</p>

</body>
</html>

Character Entities:
HTML provides collection of special characters that are sometimes needed in a
document but cannot be typed as themselves.

Character Entity Meaning

& & Ampersand
< < Is less than
> > Is greater than
“ " Double quote
‘ ' Single quote
¼ ¼ One quarter
¾ ¾ Three quarter
° Degree
(space)   Non-breaking space
© Copyright
€ Euro

List of useful HTML Tag references:

Following tags have been introduced in older versions of HTML but all the tags
marked with 5 are part of HTML-5.
11

Tag Description Version

Specifies a comment

<!DOCTYPE> Specifies the document type

<a> Specifies an anchor used for hyperlink

<abbr> Specifies an abbreviation E.g.

<acronym> Specifies an acronym

<audio> Specifies a sound content 5

<b> Specifies bold text

<big> Specifies big text

<body> Specifies the body element

<br> Inserts a single line break

<button> Specifies a push button

<canvas> For making graphics with a script 5

<caption> Specifies a table caption

<center> Deprecated. Specifies centered text

<col> Specifies attributes for table columns

<colgroup> Specifies groups of table columns

<comment> Puts a comment in the document

<datalist> A list of options for input values 5

<dd> Specifies a definition description

<del> Specifies deleted text

<dfn> Specifiesa definition term

<dialog> Specifiesa dialog box or window 5

<dir> Deprecated. Specifies a directory list

<div> Specifies a section in a document

<dl> Specifies a definition list

<dt> Specifies a definition term

<em> Specifies emphasized text

Specifiesa container for an external (non-HTML) 5

<embed>
application

<fieldset> Specifies a fieldset

<figcaption> Specifiesa caption for a <figure> element 5

<figure> Specifies self-contained content 5

<font> Deprecated. Specifies text font, size, and color

<footer> Specifies a footer for a document or section 5

<form> Specifies a form

<frame> Specifies a sub window (a frame)

<frameset> Specifies a set of frames

<h1> to <h6> Specifies header 1 to header 6

<head> Specifies information about the document

<header> Specifies a header for a document or section 5

<hr> Specifies a horizontal rule

<html> Specifies an html document

<i> Specifies italic text

<iframe> Specifies an inline sub window (frame)

<ilayer> Specifies an inline layer

<img> Specifies an image

<input> Specifies an input field

<ins> Specifies inserted text

<isindex> Deprecated. Specifies a single-line input field

<kbd> Specifies keyboard text

<keygen> Generate key information in a form 5

<label> Specifies a label for a form control

<layer> Specifies a layer

<legend> Specifies a title in a fieldset

<li> Specifies a list item

<link> Specifies a resource reference

Specifies the main or important content in the document. 5

<main>
There is only oneelement in the document

<map> Specifies an image map

Specifies a text highlighted for reference purposes, that is 5

<mark>
for its relevance in another context

<marquee> Creates a scrolling-text marquee

<menu> Deprecated. Specifies a menu list

Specifies a command/menu item that the user can invoke 5

<menuitem>
from a popup menu

Specifies meta data of an html document which is not

<meter> Specifies a scalar measurement within a known range (a

gauge)

<multicol> Specifies a multicolumn text flow

<nav> Specifies a section that contains only navigation links 5

<nobr> No breaks allowed in the enclosed text

Specifies content to be presented by browsers that do not

<noembed>
support the <embed>tag
16

<noframes> Specifies a noframe section

<noscript> Specifies a noscript section

<object> Specifies an embedded object

<ol> Specifies an ordered list

<optgroup> Specifies an option group

<option> Specifies an option in a drop-down list

<output> Specifies the result of a calculation 5

<p> Specifies a paragraph

<param> Specifies a parameter for an object

Deprecated. Render the remainder of the document as

<plaintext>
preformatted plain text

<pre> Specifies preformatted text

<progress> Specifies a completion progress of a task 5

<q> Specifies a short quotation

Specifies to show browsers that do not support the ruby 5

<rp>
element
17

<rt> Specifies an text ruby annotation 5

<ruby> Specifies an ruby annotation 5

<s> Deprecated. Specifies strikethrough text

<samp> Specifies sample computer code

<script> Specifies a script

<section> Specifies a section in a document 5

<select> Specifies a selectable list

<spacer> Specifies a white space

<small> Specifies small text

Specifies a media resources for media elements, defined 5

<source>
inside video or audio elements

<span> Specifies a section in a document

<strike> Deprecated. Specifies strikethrough text

<strong> Specifies strong text

<style> Specifies a style definition

<sub> Specifies subscripted text

Specifies a summary, caption, or legend for a given 5

<sup> Specifies superscripted text

<table> Specifies a table

<tbody> Specifies a table body

<td> Specifies a table cell

<textarea> Specifies a text area

<tfoot> Specifies a table footer

<th> Specifies a table heading

<thead> Specifies a table header

<time> Specifies a date and time <details> 5

<title> Specifies the document title

<tr> Specifies a table row

<track> Specifies a text tracks used in mediaplayers 5

<tt> Specifies teletype text

<u> Deprecated. Specifies underlined text

<ul> Specifies an unordered list

<var> Specifies a variable

<video> Specifies a text tracks used in media players 5

Indicates a potential word break point within a <nobr>

<wbr>
section

<xmp> Deprecated. Specifies preformatted text

HTML Attributes:
We have seen few HTML tags and their usage like heading tags <h1>,
<h2>, paragraph tag <p> and other tags. We used them so far in their simplest form,
but most of the HTML tags can also have attributes, which are extra bits of
information.
An attribute is used to define the characteristics of an HTML element and is placed
inside the element's opening tag. All attributes are made up of two parts −
a name and a value

 The name is the property you want to set. For example, the
paragraph <p> element in the example carries an attribute whose name
is align, which you can use to indicate the alignment of paragraph on the page.
 The value is what you want the value of the property to be set and always put
within quotations. The below example shows three possible values of align
attribute: left, center and right.
20

Attribute names and attribute values are case-insensitive. However, the World Wide
Web Consortium (W3C) recommends lowercase attributes/attribute values in their
HTML 4 recommendation.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>

Attributes of <body> tag:

S.N Attributes Meanings Values Default

value
1 Bgcolor Specifies the background color Color White
of the webpage. The colors are
specified in two ways:
21

2 Text It defines the color of the text Color Black

within the page.
3 Background It specifies an image file as Path of the
background picture. image
4 Link It defines the color of the Color
hyperlinks, which have not yet
been visited.
5. Alink It defines the color of the Color
hyperlink, when you click on it.
6 Vlink It defines the color of the
hyperlinks which are already
visited.

Attributes of <p> tag:

S.N Attributes Meanings Values Default

value

1 Align Sets the alignment of text Left, right, center left

or justify

Attributes of <hr> tag:

Global Attributes
There are few HTML attributes which are standard and associated to all the HTML
tags. These attributes are called Global Attributes.
These are not valid in base, head, html, meta, script, style, and title elements.

Attribute HTML-5 Description

Accesskey Specifies a shortcut key for an element to be used in

place of keyboard.

Class The class of the element

contenteditable Yes Boolean attribute to specify whether the element is

editable or not.

Draggable Yes Boolean attribute to specify whether the element can

be dragged or not.

Dropzone Yes Specifies whether the dragged data is copied, moved,

or linked, when dropped.
23

Hidden Yes Specifies whether element should be visible or not.

Id A unique id for the element

Style An inline style definition

Tabindex Specifies the tab order of an element.

Title A text to display in a tool tip

HTML Text Formatting:

HTML Formatting is a process of formatting text for better look and feel. HTML
provides us ability to format text without using CSS. There are many formatting tags
in HTML. These tags are used to make text bold, italicized, or underlined. There are
almost 14 options available that how text appears in HTML and XHTML.
Some of the common Text Level formation tags are given bellow:

Element Description
name

<b> This is a physical tag, which is used to bold the text written between it.

<strong> This is a logical tag, which tells the browser that the text is important.

<i> This is a physical tag which is used to make text italic.

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<tt> This tag is used to appear a text in teletype. (not supported in HTML5)

<strike> This tag is used to draw a strikethrough on a section of text. (Not

supported in HTML5)

<sup> It displays the content slightly above the normal line.

<sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

<big> This tag is used to increase the font size by one conventional unit.

<small> This tag is used to decrease the font size by one unit from base font size.

Block Level Formatting:

Block elements appear on the screen as if they have a line break before and after
them. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>,
<dl>, <pre>, <div>,<hr />, <blockquote>, and <address> elements are all block level
elements. They all start on their own new line, and anything that follows them
appears on its own new line.
25

<div>
The HTML division tag, called "div" for short, is a special element that lets you
group similar sets of content together on a web page. You can use it as a generic
container for associating similar content.
The <div> tag is used as a container for HTML elements which is then styled with
CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class
or id attribute. Any sort of content can be put inside the <div> tag!
Note: By default, browsers always place a line break before and after
the <div> element.

Syntax:
<div>
Html elements
</div>
List Tags:
List tags are used to display the content in list view. There are some lists tags as:

Unordered list tag <ul>:

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
26

</head>
<body>
<ul>
<li>Web Tech</li>
<li>Math</li>
<li>DBMS</li>
<li>English</li>
</ul>
</body>
</html>

Output:

Ordered List:

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>Mo:Mo</li>
<li>Pizza</li>
<li>Chowmin</li>
<li>Chilly</li>
27

</ol>
</body>
</html>

Output:

Description List:

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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>BCA</dt>
<dd>IT Related Course</dd>
<dt>BBA</dt>
<dd>Business related course</dd>
<dt>BL</dt>
<dd>Rules and laws related course</dd>
</dl>
</body>
28

</html>

Output:

Hyperlink Tag:
A webpage can contain various links that take you directly to other pages and even
specific parts of a given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words,
phrases, and images. Thus you can create hyperlinks using text or images available
on a webpage.
A link is specified using HTML tag <a>. This tag is called anchor tag and anything
between the opening <a> tag and the closing </a> tag becomes part of the link and
a user can click that part to reach to the linked document. Following is the simple
syntax to use <a> tag.
Syntax: <a href="Document URL" ... attributes-list>Link Text</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body link="red" alink="yellow" vlink="blue">
<a href="[Link] target="_self">Google</a>
</body>
</html>
29

Target Attributes in link:

We have used target attribute in our previous example. This attribute is used to
specify the location where linked document is opened. Following are possible
options:

Option Description
_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same frame.
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.

Executable Content Tags:

One of the ways in which Web pages have become more dynamic is through their
support of executable content, such as Java applets and ActiveX controls. These page
elements are downloaded to the browser and run in its memory space to produce
dynamic content on the browser screen.
Actually executable content tags are used to embed the multimedia files and other
applications in the html page. Some of the common executable content tags are
<applet>, <embed>, <video>, <audio> etc.
<applet>
Applet is the one to the tag that create an environment in the html page to execute
java application in the web browsers. We have to insert plugins to use applet tag.
This tag is used in HTML 4 but not support in HTML 5.
Syntax:
<applet code= “video source url” width = “400px” height= “300px”> click to
watch video <\applet>
30

In HTML 5 applet is not support so instead of that embed, object, video, audio tags
are used to implement multimedia files and other applications in html page.
<embed>
The <embed> tag in HTML is used for embedding external applications which are
generally multimedia content like audio or video, web pages, pictures, or plug-in
applications into an HTML document. It is used as a container for embedding plug-
ins such as flash animations. This tag is a new tag in HTML 5, and it requires only
starting tag.
<object>
The <object> tag defines a container for an external resource. This tag is used to
embed multimedia files on webpage. The <object> tag can include multimedia files
such as video, audio, image, PDF, Java Applets, or another page on your page.
If you insert text between the <object> and </object> tags, then it will only be
displayed if the browser does not support the <object> tag.
Example:
<!DOCTYPE html>
<html>
<body>

<h1>Embed tag</h1>
<embed src="multimedia/[Link]" type="image/webp" width="200px"
height="150px">
<embed src="multimedia/ujyalo.mp3" type="audio/mp3" width="300px"
height="100px">
<embed src="multimedia/EC.mp4" type="video/mp4" width="300px" height="200px">
<embed src="[Link]" type="text/html" width="300px" height="300px">

<h1>Video Tag</h1>
<video src="multimedia/EC.mp4" width="300px" height="200px" controls></video>

<h1>Audio Tag</h1>
<audio src="multimedia/ujyalo.mp3" controls></audio>

<h2>Object tag</h2>
31

<object data="multimedia/EC.mp4" type="video/mp4" height="200" width="250">

Your browser does not support object tag, thank you.
</object>
</body>
</html>

Image and Imagemaps:

Image Tag:

HTML img tag is used to display image on the web page. HTML img tag is an
empty tag that contains attributes only, closing tags are not used in HTML image
element.
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image, if the image for some reason
cannot be displayed
Note: Also, always specify the width and height of an image. If width and height are
not specified, the page might flicker while the image loads.
Example:
<body>
<img src="multimedia/[Link]" alt="puppy" width="500px" height="400px">

<a href="[Link]
<img src="multimedia/[Link]" alt="google" width="100px" height="50px">
</a>
</body>
32

Client Side Image Mapping

In HTML, an element called MAP lets you associate URLs with various regions of
an image; then, when the image is clicked in one of the designated regions, the
browser loads the appropriate URL. This form of mapping is known as a client-side
image map, since the determination of which URL to contact is made on the client
and no server-side program is involved.
The <map> tag can include many <area> elements that define the coordinates and
type of the area. You can simply link any area of a picture to other pages using the
<map> tag without dividing the image.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Click on any clickable area of the image and see the result </h2>
<img src="multimedia/[Link]" alt="laptop" usemap="#imgmap"
width="400px" height="380" style="margin-left: 100px">
<map name="imgmap">
<area shape="rect" coords="34,44,270,350" href="[Link]"
alt="Computer">
<area shape="circle" coords="337,300,44" href="[Link]" alt="Coffee">
<area shape="rect" coords="290,172,333,250" href="[Link]" alt="Mobile
Phone">
<area shape="poly" coords="300,10,320,15,325,20,320,25,300,30,280,20"
href="[Link]" alt="Blank Space">
</map>
</body>
</html>
33

Server Side Image Mapping:

HTML also supports server-side image maps. With such maps, an image is drawn,
and when the user clicks on it, the coordinates of the click are sent to a server-side
program.
The ismap (a boolean attribute) is present in and image, it specifies that the image
is part of a server-side image map (an image map is an image with clickable areas).
When clicking on a server-side image map, the click coordinates are sent to the
server as a URL query string.
Note: The ismap attribute is allowed only if the <img> element is a descendant of
an <a> element with a valid href attribute.

Example:
<!DOCTYPE html>
<html>
<body>

<h1>The img ismap attribute</h1>

<a href="#">
<img src="multimedia/[Link]" alt="Laptop" width="200" height="150" ismap>
</a>
<p>Click the image, and the click coordinates will be sent to the server as a URL
query string.</p>
</body>
</html>

HTML Table:
The HTML tables allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells or columns. The elements
under <td> are regular and left aligned by default.
Example: Structure or syntax of table
34

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Syntax of table</h2>
<table border="1">
<tr>
<td>cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
</body>
</html>

Output:
35

The HTML Table tags

 tr> - represents rows
 <td> - used to create data cells/ columns
 <th> - used to add table headings
 <caption> - used to insert captions
 <thead> - adds a separate header to the table
 <tbody> - shows the main body of the table
 <tfoot> - creates a separate footer for the table

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<caption> This is the caption</caption>
<thead>
<tr>
<td colspan="3">This is the header of the table</td>
</tr>
</thead>

<tfoot>
<tr>
<td colspan="3"> This is the footer of the table</td>
</tr>
</tfoot>

<tbody>
<tr>
36

<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Content 1</td>
<td>Contant 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Contant 2</td>
<td>Content 3</td>
</tr>

</tbody>
</table>
</body>
</html>

Output:

Table Alignment:
The HTML <table> align Attribute is used to specify the alignment of the table
and its content.
Aligning Entire Table:
This is the horizontal alignment of the content in the table, to align entire table to
left or right or center we can use align attribute in the <table> tag.
Syntax:
37

<table align="left | right | center">

Attribute Values:

 left: It sets the left align to the table. It is a default value.

 right: It sets the right align to the table.
 center: It sets the center align to the table.
Alignment within a row:
To align only the content of row to left, right or center we can use align attribute in
the <tr> tag of table. This attribute align entire content of row.

Syntax;

<tr align= “left | right | center” > </tr>

Alignment within Cell:
To align only the content of a particular cell to left, right or center we can use align
attribute in the <tr> tag of table. This attribute align only the content of particular
cell.
Syntax;
<td align= “left | right | center” > </td>
valign attribute:
This is the vertical alignment, we can use valign attribute to align content of row or
cell to vertical manner.
Attribute values:
top = if sets the top align to the table
middle = it sets the middle align to the table, this it default alignment
bottom = it sets the bottom align to the table
syntax:
<tr valign = “top | middle | bottom”> </tr>
<td valign = “top | middle | bottom”> </td>
38

Table Attributes:
Some of the common attributes of tables are given bellow:
Content Summary:
The summary attribute specifies a summary of the content of a table. The summary
attribute makes no visual difference in ordinary web browsers. This attribute can be
used by screen readers.
Syntax:
<table summary = “this is the table related to list of student information”>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

Note: summary attribute is not supported in HTML5.

Background Color:
The HTML bgcolor attribute is used to set the background color of an HTML
element. Bgcolor is one of those attributes that has become deprecated with the
implementation of Cascading Style Sheets. We can use color value by name or RBG
color code.
We can implement this attributes in entire table through <table> tag, or in a specific
row through <tr> tag, or in specific cell through <td> tag.

Syntax:
<table bgcolor = “red” >
<tr bgcolor = “green” >
<td> </td>
39

Adding a caption:
This attribute is used to insert the caption of table.

Syntax:
<table>
<caption> This is the caption of table </caption>
</table>

Setting the width, height:

This attribute is used the set the specific width and height of table. We can apply this
attribute in entire table or specific rows and columns.
The value of width and height can be written in terms of either % or pixels.
Syntax:
<table width = “50%” height = “100px” >
<tr>
<td> </td>
<td> </td>
</tr>
<tr width = “300px” height = “50px”>
<td> </td>
<td> </td>
40

</tr>
</table>

Adding a border:
This attribute is used to enclose the contents of table by the line or border. The value
of border attribute can be written in px, em etc. This attribute is applied only in the
<table> tag.
Syntax:
<table border= “1px” >
<tr>
<td> </td>
<td> </td>
</tr>
</table>

Spacing within a cell:

Cellpadding attribute is used to make space between the cell content and edge of the
cell. This attribute is used in the <table> tag. The value of the attribute is written in
px.
Syntax:
<table cellpadding = “10px” >
<tr>
<td> </td>
<td> </td>
</tr>
</table>
41

Spacing between the cells:

Cellspacing attribute is used to make space between the table cells. This attribute is
used in the <table> tag. The value of the attribute is written in px.
Syntax:
<table cellspacing = “10px” >
<tr>
<td> </td>
<td> </td>
</tr>
</table>

Spanning Multiple Rows or Columns:

We can merge the multiple rows and columns using the spanning attribute. Colspan
is used to merge the columns of the table in the other hand rowspan is used to merge
the rows of table. This attribute is applied in the table cell only.
Value of the attribute is written in the integer number which defines number of rows
or column to merge.
Syntax:
<table>
<tr>
<td colspan= “2” > </td>
<td> </td>
</tr>
<tr>
<td rowspan= “2” > </td>
<td> </td>
</tr>
</table>
42

Global Attributes:
The global attributes are attributes that can be used with all HTML elements.
The HTML <table> tag also supports the following global attributes

Attribute Value Description

Abbr abbreviated_text Deprecated − Specifies an abbreviated

version of the content in a cell.

Align right Deprecated − Visual alignment.

left
center
justify
char

Bgcolor rgb(x,x,x) Deprecated − Specifies the

#hexcode background color of the table.
colorname

Border Pixels Deprecated − Specifies the border

width. A value of "0" means no border.

Cellpadding pixels or % Deprecated − Specifies the space

between the cell borders and their
contents.

Cellspacing pixels or % Deprecated − Specifies the space

between cells.
43

Frame void Deprecated − Used in conjunction

above with the border attribute, specifies
below which side of the frame that makes up
hsides the border surrounding the table is
lhs displayed.
rhs
vsides
box
border

Rules none Deprecated − Used in conjunction

groups with the border attribute, specifies
rows which rules appear between the cells
cols of the table.
all

Summary Text Deprecated − Specifies the summary

of the content.

Width pixels or % Deprecated − Specifies the width of

the table.

HTML Table Sections:

The HTMLTableSectionElement interface provides special properties and methods

(beyond the HTMLElement interface it also has available to it by inheritance) for
manipulating the layout and presentation of sections, that is headers, footers and
bodies, in an HTML table.
We can use all the global attributes within the sections like, bgcolor, alinment, width,
height etc.
44

Header Section:
This is the heading of the table, this can implement by using the <thead> tag. This
section comes first in the table which can include the Rows and Columns. This is the
optional part of the table.
Syntax:
<thead>
<tr>
<td colspan= “2” > This is heading of the table </td>
</tr>
</thead>

Footer Section:
Unlike the header section, footer section is comes in the last position of the table.
This is implemented by the <tfoot> tag. This section also contains the Rows and
Columns. This is the optional part of the table.
Syntax:
<tfoot>
<tr>
<td colspan= “2” > This is the footer of the table </td>
</tr>
</tfoot>

Body Section:
Body section is come in the middle of the table enclosed by the header and footer
section. This section contains all the table elements like, rows, columns, and
contents. This section contains multiple table tags like, <th>, <tr>, <td> etc. This is
the mandatory part of the table.
Syntax:
<tbody>
45

<tr>
<td> cotent 1 </td>
<td> cotent 2 </td>
</tr>
<tr>
<td> cotent 3 </td>
<td> cotent 4 </td>
</tr>
</tbody>

Column Properties:

HTML table column has some useful properties like colspan, colgroup. It also
supports the HTML global attributes like id, style, bgcolor etc.
Colspan:
This is used to merge the two or more column in a single one.
Syntax:

<tr>
<td colspan= “3”> It merge 3 columns </td>
</tr>
Colgroup:
This property is used to apply table attributes to the specific group of columns.
Syntax:
<colgroup>
<col span = “3” bgcolor= “red” >
<col span = “2” bgcolor = “green”>
</colgroup>
46

Here in the above code, first 3 columns are design as bgcolor as red and other had
corresponding 2 columns will design as bgcolor green.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width="50%">
<thead>
<tr>
<td colspan="5" align="center"> Table Heading </td>
</tr>
</thead>
<colgroup>
<col span="3" bgcolor="red" width="100px">
<col span="2" bgcolor="green">
</colgroup>
<tr>
<td>c1</td>
<td>c2</td>
<td>c2</td>
<td>c4</td>
<td>c5</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
47

Output:

Question 2: Create a table to display the salary of the listed employee using
necessary sections and attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width = "50%" height="100px">
<colgroup>
<col span="2" bgcolor="blue">
<col bgcolor="yellow">

</colgroup>
<caption>Salary of Employees</caption>
<thead bgcolor="red">
<tr>
<td colspan="3" align="center">Following are the salary of listed
employees</td>
</tr>
</thead>
<tfoot bgcolor="green">
48

<tr>
<td colspan="3" align="center">Medmax Inovation Pvt. Ltd.</td>
</tr>
</tfoot>
<tbody align="center">
<tr>
<th>SN</th>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>1</td>
<td>Ram</td>
<td>Rs.50000</td>
</tr>
<tr>
<td>2</td>
<td>Gopal</td>
<td>Rs.30000</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>Rs.40000</td>
</tr>
<tr>
<td>4</td>
<td>Sudan</td>
<td>Rs.50000</td>
</tr>
</tbody>
</table>
</body>
</html>

Output:
49

Question 2: Create following table apply different background color for each Row

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Syntax of table</h2>
<table border="1px" width="50%" height="200px">
<tr bgcolor="8D0909">
<th>SN</th>
<th>Name</th>
<th>Sal</th>
<th>Dob</th>
</tr>
<tr align="center" bgcolor="red">
<td rowspan="2">cel 1</td>
<td>cel 2</td>
50

</table>
</body>
</html>

Question 3: Write HTML code to draw following table, use section, header, footer,
body, and colgroup tags.

<!DOCTYPE html>
<html lang="en">
51

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width="50%" height="300px" border="1px" align="center">
<caption>Tabale 1: Table of Student</caption>
<thead>
<tr>
<td colspan="5" bgcolor="red" align="center"> DWIT</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" bgcolor="blue" align="center">© BCA-III</td>
</tr>
</tfoot>
<colgroup>
<col span="3">
<col bgcolor="purple">
</colgroup>
<tbody>
<tr>
<td colspan="2" bgcolor="yellow"></td>
<td></td>
<td></td>
<td rowspan="2" bgcolor="green"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2" bgcolor="pink"></td>
<td></td>
<td></td>
</tr>
</tbody>
52

</table>

</body>
</html>

HTML Frames:
HTML Frames are used to divide the web browser window into multiple sections
where each section can be loaded separately. A frameset tag is the collection of
frames in the browser window.
Creating Frames: Instead of using body tag, use frameset tag in HTML to use
frames in web browser. But this Tag is deprecated in HTML 5. The frameset tag is
used to define how to divide the browser. Each frame is indicated by frame tag and
it basically defines which HTML document shall open into the frame. To define the
horizontal frames use row attribute of frame tag in HTML document and to define
the vertical frames use col attribute of frame tag in HTML document.
Advantages:
 It allows the user to view multiple documents within a single Web page.
 It loads pages from different servers in a single frameset.
 The older browsers that do not support frames can be addressed using the tag.

Disadvantages:
Due to some of its disadvantage it is rarely used in web browser.
 Frames can make the production of website complicated.
 A user is unable to bookmark any of the Web pages viewed within a frame.
 The browser’s back button might not work as the user hopes.
 The use of too many frames can put a high workload on the server.
 Many old web browsers don’t support frames.
<frameset> tags
This tag is used to divide the frame in different rows and columns. The values of
rows and columns are written in either % or absolute value in pixels.
53

Syntax:
<frameset rows = “20%, 30%, 10” />
</framesett>
<frame> tag

This tag is used to create frame with contents, which are enclosed by frameset tag.
Syntax:
<frameset rows = “20%, 30%, 10” >
<frame name = “fram1” src= “url” />
<frame name = “fram1” src= “url” />
<frame name = “fram1” src= “url” />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</framesett>

Note: for Horizontal framing we use rows and for vertical framing, we use cols
attribute.

Nesting Frameset:

We can create frame inside the frame is called nesting of frame.

Syntax:
<frameset cols= 50%,50% >
<frame name = “frame1” src= “url”/>
<frameset rows = “50%, 50%”>
<frame name = “nestedframe1” src= “url”/>
54

<frame name = “nestedframe2” src= “url”/>

</frameset>
</frameset>

Since, frame tag is not supported by HTML5, instead we can use ifram or div in
HTML5 to do similar task.

<div>tag
Frame tag is not supported by HTML 5 instead we can use div tag to do similar
work.
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.

 Div tag is Block level tag

 It is a generic container tag
 It is used to the group of various tags of HTML so that sections can be created
and style can be applied to them.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
56

</head>
<body>
<div style="width: 200px; height: 100px; color:blue; border:1px outset red;
background-color: aqua; text-align: center;">
This is division
</div>
</body>
</html>

Output:

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

The <form> tag:

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>
Apart from common attributes, following is a list of the most frequently used form
attributes

SN Attribute & Description

1 Action
Backend script ready to process your passed data.

2 Method
Method to be used to upload data. The most frequently used are GET and POST
methods.

3 Target
Specify the target window or frame where the result of the script will be
displayed. It takes values like _blank, _self, _parent etc.

4 Enctype
You can use the enctype attribute to specify how the browser encodes the data
before it sends it to the server. Possible values are
58

application/x-www-form-urlencoded − This is the standard method most

forms use in simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the
form of files like image, word file etc.

The <input> tag:

In HTML, the input field can be specified using where a user can enter data. The
input tag is used within < form> element to declare input controls that allow users
to input data. An input field can be of various types depending upon the attribute
type. The Input tag is an empty element which only contains attributes. For defining
labels for the input element, < label> can be used.

Syntax:
<form action="#" method="get">
<input type="text" name="fname">
</form>

The <label> tag:

This tag is used to define the name of the input field.
Syntax:
<form action="#" method="get">
<label for="fname">Enter your name:</label><br>
<input type="text" name="fname">
</form>

The name attribute of <input> tag:

The name attribute specifies the name of an <input> element.
The name attribute is used to reference elements in a JavaScript, or to reference form
data after a form is submitted.
59

Note: Only form elements with a name attribute will have their values passed when
submitting a form.

Syntax:
<form action="#" method="get">
<input type="text" name="fname">
</form>

The value attribute of <input> tag:

The value attribute is used to specify the value of the input element.
Syntax:
<form action="#" method="get">
<label for="fname">Choose your gender:</label><br>
<input type="radio" name="gender" value="Male">
<label for="gender">Male</label>
</form>

The placeholder attribute of <input> tag:

Placeholder attribute is used to specify hint that describes the expected value of an
input field.
Syntax:
<form action="#" method="get">
<input type="text" name="name" placeholder="Enter your name">
</form>

The checked attribute of <input> tag:

The checked attribute specifies that an element should be pre-selected (checked)
when the page loads. The checked attribute can be used with < input type=
“checkbox” > and < input type= “radio” >.
Syntax:
60

<form action="#" method="get">

The autofocus attribute of <input> tag:

Autofocus attribute specifies that an element should automatically get focus when
the page loads.
Syntax:
<form action="#" method="get">
<input type="text" name="name" autofocus>
</form>

The disabled attribute of <input> tag:

The disabled attribute specifies that the element should be disabled. The disabled
attribute can be set to keep a user from using the < input > element until some other
condition has been met.

Syntax:
<form action="#" method="get">
<input type="text" name="name" disabled>
</form>

The max attribute of <input> tag:

The max attribute is used to specify the maximum value for an < input > element.
<form action="#" method="get">
<input type="number" name="num" max="100">
<input type="submit" value="Submit">
</form>

The min attribute of <input> tag:

The min attribute is used to specify the minimum value for an < input > element.
61

<form action="#" method="get">

The maxlength attribute of <input> tag:

This property is used to specifies the maximum number of characters allowed in an
<input> element
<form action="#" method="get">
<input type="text" name="name" maxlength="10">
<input type="submit" value="Submit">
</form>

The required attribute of <input> tag:

The required attribute specifies that an input field must be filled out before
submitting the form.
<form action="#" method="get">
<input type="text" name="name" maxlength="10" required>
<input type="submit" value="Submit">
</form>

The readonly attribute of <input> tag:

The readonly attribute specifies that an input field is read-only. A read-only input
field cannot be modified. A form will still submit an input field that is readonly, but
will not submit an input field that is disabled.
<form action="#" method="get">
<input type="text" name="name" maxlength="10" readonly>
<input type="submit" value="Submit">
</form>
62

The accept attribute of <input> tag:

It is used to specifies the type of file that the server accepts. This attribute can be
used with <input type=”file”> element only. This attribute is not used for validation
tool because file uploads should be validated on the Server.
Syntax:

<form action="#" method="get">

 file_extension: It Specify the file extension(s) like .gif, .jpg, .png, .doc) the
user can pick from.
 audio/*: The user can pick all sound files.
 video/*: The user can pick all video files.
 image/*: :A valid media type, with no parameters. Look at IANA Media
Types for a complete list standard media types
 media_type: A valid media type without parameters.

Different input types are describe bellow:

Single line text input:
This can accept the single line input value from the input field as the type= “text”
Syntax:
<form action="#" method="get">
<input type="text">
<input type="submit" value="Submit">
</form>
63

Multiline text input:

This can accept the multiline input value from the input field. <textarea> tag is used
to accept the multiline input.
Syntax:
<form action="#" method="get">
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="submit" value="Submit">
</form>

Dropdown and list box:

We can select a single item or multiple items from the dropdown list of items and
send to the server.
<select> tag is used to create dropdown and <option> tag is used to display the list
of items.

Syntax:
<form action="#" method="get">
<select name="drop" id="drop">
<option value="Nepal">Nepal</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="China">China</option>
</select>
<input type="submit" value="Submit">
</form>

Here, the value attribute is used to send the actual value when click on the submit
button.
Hidden:
The <input type="hidden"> defines a hidden input field (not visible to a user).
64

A hidden field lets web developers include data that cannot be seen or modified by
users when a form is submitted.
A hidden field often stores what database record that needs to be updated when the
form is submitted.
Note: While the value is not displayed to the user in the page's content, it is visible
(and can be edited) using any browser's developer tools or "View Source"
functionality. Do not use hidden inputs as a form of security!
Syntax:
<form action="#" method="get">
<label for="name">Enter your name:</label><br>
<input type="text" name="name">
<input type="hidden" id="myid" name="myid" value="123"><br>
<input type="submit" value="Submit">
</form>

Password:
The characters in a password field are masked (shown as asterisks or circles).
Syntax:
<form action="#" method="get">
<input type="password">
<input type="submit" value="Submit">
</form>

File Upload:
We can upload a file in the input field and send to the server. It has an accept attribute
to mention which type of file should be uploaded.
Syntax:
<form action="#" method="get">
<input type="file" accept=".png,.jpeg,.pdf">
65

<input type="submit" value="Submit">

</form>

If we do not use accept attribute then input field can accept all kinds of files.
Submit Button:
Submit button is used to send the input field data to the server.
Syntax:
<form action="#" method="get">
<input type="submit" value="Submit">
</form>

Here, type is the type of button and value is the display text over the button.
Reset Button:
Reset button is used to reset the input field in initial position. This is mostly used to
erase the data entered in the input fields.
Syntax:
<form action="#" method="get">
<input type="reset" value="Reset">
</form>

Radio Button:
Radio button is used to choose the one of the option to send the value as input data.
In this we can select only one option at a time. We can use checked attribute to set
default option.
Syntax:
<form action="#" method="get">
<input type="radio" value="Male" name="gender">
<label for="gender">Male</label>
<input type="radio" value="Female" name="gender">
66

<label for="gender">Female</label>
</form>

Checkbox:
Checkbox is used to choose multiple options to send the value as input data. In this
we can select more than one option together at same time. We can use checked
attribute to set default option.
Syntax:
<form action="#" method="get">
<input type="checkbox" value="HTML" name="html">
<label for="html">HTML</label>
<input type="checkbox" value="CSS" name="css">
<label for="css">CSS</label>
</form>

Email:
To enter the email with validation, we can use the email.
Syntax:
<form action="#" method="get">
<input type="email" name="email">
</form>

Number:
To insert the number only in the input field, we can use the number type.
Syntax:
<form action="#" method="get">
<input type="number" name="num">
</form>

In this type, we can set the limit as max and min to restrict the number.
67

Eg:
<form action="#" method="get">
<input type="number" name="num" max="100">
</form>

This well take the number less than or equals to 100.

If we set the limt as min = “100” then, it can take the number greater than or equals
to 100.
Date:
Date type is used to insert the data as input data. Here we can insert the day, month,
and year value manually or we can select the value from calendar.

Syntax:
<form action="#" method="get">
<input type="data" name="date">
</form>

Date time:
We can select or insert date and time together using datetime-local type of input
field.
Syntax:
<form action="#" method="get">

<input type="datetime-local" name="date">

</form>
68

Time:
To pick the specific time then we can use the time type.
Syntax:
<form action="#" method="get">
<input type="time" name="time">
</form>

Week:
To pick the specific week of the year, we can use week type.
Syntax:
<form action="#" method="get">
<input type="week" name="week">
</form>

Month:
To pick the specific month of the year, we can use the month type.
Syntax:
<form action="#" method="get">
<input type="month" name="mth">
</form>

Range:
The <input type="range"> defines a control for entering a number whose exact value
is not important (like a slider control). Default range is 0 to 100. However, you can
set restrictions on what numbers are accepted with the min, max, and step attributes:

Syntax:
69

<form action="#" method="get">

Tel:
The <input type="tel"> is used for input fields that should contain a telephone
number.
<form action="#" method="get">
<input type="tel" name="phn" pattern="[0-9]{2,3}-[0-9]{5}">
<input type="submit" value="Submit">
</form>

This required the data in the format like 01-23456 or 012-16289

If you want to validate the mobile number, then use the following pattern.

Url:
To submit the valid url to the input field, url type is used. It required the valid url
like [Link]
Syntax:
<form action="#" method="get">
<input type="tel" name="phn" pattern="[0-9]{10}">
<input type="submit" value="Submit">
</form>
<form action="#" method="get">
<input type="url" name="url">
<input type="submit" value="Submit">
</form>
70

Color:
To pick the color, we can use color type.
Syntax:
<form action="#" method="get">
<input type="color" name="color">
<input type="submit" value="Submit">
</form>

Form Validation Using Regular Expressions:

We can validate the form using regular expression, the rule is explained bellow:
[abc] it search for a,b, or c
[^abc] it search any character except a,b, or c
[a-z] it search all the lowercase characters
[A-Z] it search all the upper case characters
[a-zA-Z] it search all upper and lower case characters
[0-9] it search all the integer numbers
Quantifiers:
[ ]? occurs 0 or 1 times
[ ]* occurs 0 or more times
[ ]+ occurs 1 or more times
[ ]{n} occurs n times
[ ]{n, } occurs n or more times
[ ]{x,y} occurs at least x times but less than y times
71

Meta Characters:
\d [0-9]
\D [^0-9]
\w [a-zA-Z_0-9]
\W [^\w]
. any characters
^ position at start of line

$ position at ending of the line

(?=.*[a-z])[string pattern] at least one lower case letter in string pattern
(?=.*[A-Z])[string pattern] at least one upper case letter in string pattern
(?=.*[0-9])[string pattern] at least one digit in string pattern
(?=.*[@#!$%^&*])[string pattern] at least one special character in string pattern
Note: if you want to make special character like -,.,+,* etc. read as character then
write (\) before that special character eg: \. \+ \-

Example:
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
72

<h1>Form Validation using Regex</h1>

<label for="phone">Mobile No:</label><br>

<label for="tel">Telephone:</label><br>
<input type="text" name="tel" pattern="^[0][1-9]{1,2}[\-][1-9]{7}$"
required
title="first 2 or 3 digits then - then any 7 digits"><br><br>

<label for="email">Email:</label><br>
<input type="text" name="email" pattern="^[a-z0-9_\.]+[@][a-z]+[\.][a-
z\.]{3,}$" required
title="any lowercase alphanumeric followed by @ then lowercase
followed by dot"><br><br>

<label for="pw">Password:</label><br>
<input type="text" name="pw" pattern="^(?=.*[a-z])(?=.*[A-
Z])(?=.*[\d])(?=.*[!@#$%^&*-+=._])[a-zA-Z0-9!@#$%^&*-+=._]{6,}$" required
title="atleast 6 characte with one lowercase one uppercase and one
special character"><br><br>

<label for="web">Website:</label><br>
<input type="text" name="web" pattern="^https?::\/\/www\.[a-z0-9]+\.[a-
z\.]{2,}$" required
title="should start with https::// and followed by loweercase
alphanumeric and dot"><br><br>

<input type="submit" value="Submit">

</form>
</body>
</html>
73

Passing Form Data to Server Side Scripting:

We can pass the data from client side script like html page to server side script php
page using get or post method.
Example: following example demonstrate the login page with valid username and
password and Signup.
[Link]
Here form data will send to the server-side script [Link] page with get
method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="[Link]" method="get">
<label for="username">User Name:</label><br>
<input type="text" name="username" required><br><br>
<label for="pass">Password:</label><br>
<input type="password" name="pass" required><br><br>
<input type="submit" value="Login">
<a href="[Link]">Sign Up</a>
</form>
</body>
</html>

[Link]
Here in [Link], first data submitted by client side page [Link] will
compare with the data stored in $name and $pass variable, if it matches the stay in
welcome page otherwise redirect to the [Link] page.
74

<?php
$name = "prakash";
$pas = "kathmandu";
$uname = $_GET['username'];
$pass = $_GET['pass'];
if($uname==$name && $pass==$pas)
{
echo'Welcome to my page <br>
<a href="[Link]">logout</a>';
}
else
{
header("Location:[Link]");
}
?>

[Link]

If you are not registered yet, you can register the from the [Link] page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="[Link]" method="post">
<label for="fname">First Name:</label><br>
<input type="text" name="fname" pattern="[a-zA-Z ]+" required><br><br>
<label for="mname">Middle Name:</label><br>
<input type="text" name="mname" pattern="[a-zA-Z ]+"><br><br>
<label for="lname">Last Name:</label><br>
<input type="text" name="lname" pattern="[a-zA-Z ]+" required><br><br>
<label for="uname">User Name:</label><br>
<input type="text" name="uname" pattern="[a-zA-Z0-9]+" required><br><br>
<label for="pass">Password:</label><br>
<input type="text" name="pass" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-
9])(?=.*[!@#$%&*])[a-zA-Z0-9!@#$%&*]{6,}$" required><br><br>
<label for="dob">DOB:</label><br>
75

<input type="date" name="dob" required><br><br>

<input type="submit" value="Submit">

</form>
</body>
</html>

[Link]
When you submit the data from the register form, all the data will be display in
[Link] page.
<?php
$fname = $_POST['fname'];
$mname = $_POST['mname'];
$lname = $_POST['lname'];
$uname = $_POST['uname'];
$pass = $_POST['pass'];
$dob = $_POST['dob'];

echo'First Name: '.$fname.'<br/><br/>';

echo'Middle Name: '.$mname.'<br/><br/>';
echo'Last Name: '.$lname.'<br/><br/>';
echo'User Name: '.$uname.'<br/><br/>';
echo'Password: '.$pass.'<br/><br/>';
echo'DOB: '.$dob;
?>

Grouping related fields:

To place the related fields in a single box or group, <fieldset> tag is used.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
76

</head>
<body>
<h2>Placing the similar field in a single group</h2>
<form action="#">
<fieldset style="width: 300px;">
<legend align="center">Log Information</legend>
<label for="user">User Name:</label><br>
<input type="text" name="user"><br><br>
<label for="pass">Password:</label><br>
<input type="password" name="pass"><br><br>
<button type="submit">Log In</button>
</fieldset>
</form>
</body>
</html>

Output:
77

Form Field Event Handler:

Events triggered by actions inside a HTML form (applies to almost all HTML
elements, but is most used in form elements):

Attribute Value Description

onblur script Fires the moment that the element loses focus

onchange script Fires the moment when the value of the element is
changed

oncontextmenu script Script to be run when a context menu is triggered

onfocus script Fires the moment when the element gets focus

oninput script Script to be run when an element gets user input

oninvalid script Script to be run when an element is invalid

</head>
<body>
<form action="#">
<label for="ltu">Lower to upper:</label><br>
<input type="text" name="ltu" id="ltu" onblur="LowerToUpper()"><br><br>
<label for="change">Change the value:</label><br>
<select id="mySelect" onchange="changeValue()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select><br>
<p id="p1"></p><br>
<label for="focus">Focus:</label><br>
<input type="text" name="focus" id="focus" onfocus="myFocus()"><br><br>
<label for="input">Input:</label><br>
<input type="text" name="input" id="input" oninput="myInput()"><br>
<p id = "p2"></p><br>
<label for="invalid">Input Validation:</label><br>
<input type="text" name="invalid" pattern="[a-zA-Z]+"
oninvalid="alert('Your data is invalid..')">

<br><br><input type="submit" value="Submit">

</form>

[Link]("p2").innerHTML= "You Entered: "+x;

}
</script>
</body>
</html>

Style Sheet:
Introduction:
Style Sheet also known as CSS (Cascading Style Sheet) describes the HTML
elements which are displayed on screen, paper, or in other media. It saves a lot of
time. It controls the layout of multiple web pages at one time. It sets the font-size,
font-family, color, background color on the page.
It allows us to add effects or animations to the website. We use CSS to
display animations like buttons, effects, loaders or spinners, and also animated
backgrounds. Without using CSS, the website will not look attractive.
CSS selectors:
In CSS, selectors are patterns used to select the element(s) you want to style. There
are several selectors used in CSS, some of frequently used selectors are:
Class selector:
This will select the html element by their class name.
Syntax:
<style>
.classname{
color:red;
}
</style>
80

Id Selector:
This will select the html element by their id.
Syntax:
<style>
#id{
color:red;
}
</style>

Element Name Selector:

This will select the element by their name.
Syntax:
<style>
p{
color:red;
}
Body{
background-color:green;
}
</style>

Universal Selector:
This will select all the element of the html.
Syntax:
<style>
*{
color:red;
81

}
</style>

There are 3 types of CSS which are below:

 Inline CSS
 Internal/ Embedded CSS
 External CSS

Inline CSS:

Inline CSS is used to style a specific HTML element. Add a style attribute to each
HTML tag without using the selectors. Managing a website may difficult if we use
only inline CSS. However, Inline CSS in HTML is useful in some situations. We
have not access the CSS files or to apply styles to element.
In the following example, we have used the inline CSS in <body> <p> and <h1> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="background-color: #ffe6e6;">
<h1 style="color: green; font-family: Times New Roman; padding: auto;">
Inline CSS
</h1>
<p style="color:blue">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat
voluptate saepe nulla molestiae quibusdam, fugit sed ? Quae beatae harum possimus
odit officiis esse vero tempore explicabo libero voluptatibus! Doloribus, rem?
</p>
</body>
</html>
82

Pros of inline CSS:

 We can create CSS rules on the HTML page.
 It styles multiple elements at the same time which can reduce the page size
and download time of the page.
Cons of inline CSS:
 Inline CSS, adding CSS rules to HTML elements is time-
consuming and messes up the HTML structure.
 We cannot create and upload a separate document in inline CSS.

Internal CSS:

The Internal CSS has <style> tag in the <head> section of the HTML document.
This CSS style is an effective way to style single pages. Using the CSS style for
multiple web pages is time-consuming because we require placing the style on each
web page.
We can use the internal CSS by using the following steps:
1. Firstly, open the HTML page and locate the <head>
2. Put the following code inside the <head> section

Example 2: Adding internal CSS using id, class selector in the HTML tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

.para{
color: pink;
font-family: 'Courier New';
}

/* Id Selector */
#myhead{
color:blue;
font-style: italic;
text-align: center;
}
</style>
</head>
<body class="mybody">
<h1 id="myhead">
Inline CSS using selector
</h1>
<p class="para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore quod
magnam natus, fugiat harum explicabo exercitationem voluptatem, sequi possimus
odio ducimus distinctio eaque voluptatum architecto doloremque dolorem vitae cum
enim!
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae
quaerat necessitatibus inventore maiores reiciendis totam voluptatum accusamus
omnis molestiae dolores, eum dolorem, debitis illum consequuntur fugit d eserunt.
</p>
</body>
</html>

Example 3: Adding internal CSS using Universal selector in the HTML tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Univarsal selector */
85

*{
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Universal CSS Selector</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat ea
adipisci, harum earum ullam vitae fugit fuga quas ut numquam delectus voluptates
doloribus hic accusantium nisi mollitia quis minima est?
</p>
</body>
</html>

Pros of Internal CSS

 Adding code in the HTML document will reduce the page size and loading
time of the webpage.
Cons of Internal CSS:
 Internal CSS cannot upload multiple files when we add the code with the
HTML page.

External CSS:

In external CSS, we link the web pages to the external .css file. It is created by text
editor. The CSS is more efficient method for styling a website. By editing
the .css file, we can change the whole site at once.
To use the external CSS, follow the steps, given below:
1. Create a new .css file with text editor, and add CSS rules.
2. Add a reference to the external .css file right after <title> tag in the <head> section
of HTML sheet:

<link rel="stylesheet" type="text/css" href="[Link]" />

Example:
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body class="mybody">
<h1 id="myhead">
External CSS
</h1>
<p id="para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et hic veniam
reiciendis error totam sit impedit! Ab totam repellendus necessitatibus
dignissimos natus rem, ad eos ea? Eos reiciendis nobis et?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga
dignissimos reprehenderit assumenda atque aspernatur beatae deleniti, dolore
saepe eum! Impedit iste obaecati necessitatibus placeat perferendi.
</p>
</body>
</html>

[Link]
.mybody{
background-color: aliceblue;
}
body #myhead{
text-align: center;
font-style: italic;
color: green;
}
body p{
font-size: large;
87

font-family: Impact;
}
body #para{
color: red;
}

Pros of External CSS:

 Our files have a cleaner structure and smaller in size.
 We use the same .css file for multiple web pages in external CSS.
Cons of External CSS:
 The pages cannot be delivered correctly before the external CSS is loaded.
 In External CSS, uploading many CSS files can increase the download time
of a website.
88

HTML (HyperText Markup Language) is the standard language for creating web
pages.

 It structures content using tags (e.g., <p>, <div>, <h1>).

Example
html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
<p>This is a paragraph.</p>
</body>
</html>

2. HTML Documents

Structure of an HTML Document

1. Doctype Declaration: Declares HTML version (<!DOCTYPE html>).

2. HTML Element: Contains the entire document.
3. Head Section: Metadata, links to styles/scripts, etc.
4. Body Section: Main content displayed on the page.
89

Example
html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document Structure</title>
</head>
<body>
<header>
<h1>Site Header</h1>
</header>
<main>
<p>Content goes here.</p>
</main>
<footer>
<p>Footer Information</p>
</footer>
</body>
</html>

3. HTML Elements and Attributes

Common Tags and Their Attributes

 <a>: Hyperlink (href).

 <img>: Image (src, alt).
 <table>: Table elements (<tr>, <td>).

Example
html

<a href="[Link] Example</a>

<img src="[Link]" alt="Sample Image" width="300">
90

4. CSS Basics

CSS Syntax

CSS styles HTML elements using selectors and properties.

css

selector {
property: value;
}
Example
html

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Styled Heading</h1>
</body>
</html>

5. CSS Layout Techniques

Float Layout
html
91

<div style="float: left; width: 50%; background-color: lightblue;">

Left Column
</div>
<div style="float: right; width: 50%; background-color: lightcoral;">
Right Column
</div>
Flexbox
html

<div style="display: flex; justify-content: space-between;">

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
CSS Grid
html

<div style="display: grid; grid-template-columns: 1fr 1fr;">

6. Responsive Web Design

Media Queries
css

@media (max-width: 600px) {

body {
background-color: lightgray;
}
}
Example
html
92

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-size: 16px;
}
@media (max-width: 600px) {
body {
font-size: 12px;
}
}
</style>
</head>
<body>
<p>Resize the browser to see the effect!</p>
</body>
</html>

7. Frontend Frameworks

Bootstrap Example
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="[Link]
rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
</div>
</div>
</body>
93

</html>

Understanding HTML Document Structure
No ratings yet
Understanding HTML Document Structure
67 pages
Basic HTML Document Structure Guide
No ratings yet
Basic HTML Document Structure Guide
9 pages
HTML Basics: Structure and Usage Guide
No ratings yet
HTML Basics: Structure and Usage Guide
6 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
67 pages
HTML CSS
No ratings yet
HTML CSS
52 pages
Assign User Input to String Size
No ratings yet
Assign User Input to String Size
79 pages
Web-Module I
No ratings yet
Web-Module I
35 pages
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
No ratings yet
Visit:: Join Telegram To Get Instant Updates: Contact: MAIL: Instagram: Instagram: Whatsapp Share
36 pages
Intro - To - HTML PDF
No ratings yet
Intro - To - HTML PDF
48 pages
HTML Basics: Structure and Syntax Guide
No ratings yet
HTML Basics: Structure and Syntax Guide
58 pages
Overview of HTML Basics and History
No ratings yet
Overview of HTML Basics and History
62 pages
HTML - Become A Master
No ratings yet
HTML - Become A Master
18 pages
HTML Anchor Elements Guide
No ratings yet
HTML Anchor Elements Guide
56 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
34 pages
HTML - New With Html5 Controls
No ratings yet
HTML - New With Html5 Controls
136 pages
HTML - Overview
No ratings yet
HTML - Overview
39 pages
Understanding HTML Basics and Structure
No ratings yet
Understanding HTML Basics and Structure
6 pages
Understanding HTML: Basics and Applications
No ratings yet
Understanding HTML: Basics and Applications
14 pages
Understanding HTML Basics and Structure
No ratings yet
Understanding HTML Basics and Structure
48 pages
History and Basics of HTML
No ratings yet
History and Basics of HTML
30 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
66 pages
Create a Personal Web Portfolio
No ratings yet
Create a Personal Web Portfolio
29 pages
Introduction to HTML and CSS Basics
No ratings yet
Introduction to HTML and CSS Basics
41 pages
Understanding HTML: Basics & Benefits
No ratings yet
Understanding HTML: Basics & Benefits
41 pages
XHTML 1.0: HTML Basics and Syntax
No ratings yet
XHTML 1.0: HTML Basics and Syntax
31 pages
Understanding XHTML Structure and Syntax
No ratings yet
Understanding XHTML Structure and Syntax
574 pages
HTML and CSS Basics Overview
No ratings yet
HTML and CSS Basics Overview
148 pages
Understanding HTML Basics and Structure
No ratings yet
Understanding HTML Basics and Structure
4 pages
Introduction to HTML Basics and Usage
No ratings yet
Introduction to HTML Basics and Usage
52 pages
Understanding HTML and Hyperlinks
No ratings yet
Understanding HTML and Hyperlinks
41 pages
What Is HTML
No ratings yet
What Is HTML
19 pages
Front-End Development: HTML, CSS, JS Guide
No ratings yet
Front-End Development: HTML, CSS, JS Guide
143 pages
Understanding HTML and XHTML Basics
No ratings yet
Understanding HTML and XHTML Basics
60 pages
HTML Fundamentals for Web Development
No ratings yet
HTML Fundamentals for Web Development
28 pages
Introduction to HTML and XHTML Basics
No ratings yet
Introduction to HTML and XHTML Basics
13 pages
HTML, CSS, and PHP Basics Guide
No ratings yet
HTML, CSS, and PHP Basics Guide
48 pages
HTML Basics for Beginners
No ratings yet
HTML Basics for Beginners
43 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
26 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
146 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
12 pages
HTML Basics: Structure & Syntax Guide
No ratings yet
HTML Basics: Structure & Syntax Guide
88 pages
Understanding XHTML Basics and Syntax
No ratings yet
Understanding XHTML Basics and Syntax
5 pages
HTML and CSS Web Development Guide
No ratings yet
HTML and CSS Web Development Guide
73 pages
HTML and DHTML Overview
No ratings yet
HTML and DHTML Overview
25 pages
Comprehensive HTML Tutorial Guide
No ratings yet
Comprehensive HTML Tutorial Guide
42 pages
Understanding HTML Basics and Structure
No ratings yet
Understanding HTML Basics and Structure
174 pages
WDT UNIT I
No ratings yet
WDT UNIT I
24 pages
Unit1 HTML
No ratings yet
Unit1 HTML
35 pages
History and Basics of HTML
No ratings yet
History and Basics of HTML
42 pages
Understanding HTML Basics for Web Development
No ratings yet
Understanding HTML Basics for Web Development
64 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
27 pages
HTML Document Structure Explained
No ratings yet
HTML Document Structure Explained
16 pages
Unit I HTML
No ratings yet
Unit I HTML
37 pages
Understanding HTML: Basics and Evolution
No ratings yet
Understanding HTML: Basics and Evolution
60 pages
WEB PROG - Prelim
No ratings yet
WEB PROG - Prelim
9 pages
Basic HTML Document Structure Guide
No ratings yet
Basic HTML Document Structure Guide
16 pages
WT Unit I
No ratings yet
WT Unit I
36 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
12 pages
HTML Basics Using Notepad
No ratings yet
HTML Basics Using Notepad
13 pages
Interactive Bookmarklet Menu
No ratings yet
Interactive Bookmarklet Menu
1 page
Online Bookstore HTML Development Guide
No ratings yet
Online Bookstore HTML Development Guide
50 pages
Introduction to CSS Basics and Syntax
No ratings yet
Introduction to CSS Basics and Syntax
50 pages
Full Stack Web Development Curriculum
No ratings yet
Full Stack Web Development Curriculum
8 pages
Build Mobile Apps with Ionic and Drupal
No ratings yet
Build Mobile Apps with Ionic and Drupal
9 pages
2 Client Server
No ratings yet
2 Client Server
53 pages
Web-Based Weather App Development Report
No ratings yet
Web-Based Weather App Development Report
11 pages
GameCenter Application Startup Log
No ratings yet
GameCenter Application Startup Log
34 pages
Online Book Page Micro-Project Report
No ratings yet
Online Book Page Micro-Project Report
20 pages
Front-End & Back-End Development Guide
No ratings yet
Front-End & Back-End Development Guide
4 pages
JSX Syntax and Examples in React
No ratings yet
JSX Syntax and Examples in React
1 page
Web Designing Lab Manual 2023
No ratings yet
Web Designing Lab Manual 2023
20 pages
Certified SEO Professional Course Guide
No ratings yet
Certified SEO Professional Course Guide
0 pages
Project Report 1
No ratings yet
Project Report 1
36 pages
Full Stack Web Development Training Report
No ratings yet
Full Stack Web Development Training Report
3 pages
Manuj Bishnoi CV
No ratings yet
Manuj Bishnoi CV
1 page
HTML Assessment Questions and Answers
No ratings yet
HTML Assessment Questions and Answers
19 pages
GameCenter Application Startup Log
No ratings yet
GameCenter Application Startup Log
6 pages
DevOps Engineer Resume - Sanatan Kumar
No ratings yet
DevOps Engineer Resume - Sanatan Kumar
6 pages
Ayush Kumar's Tech Skills & Projects
No ratings yet
Ayush Kumar's Tech Skills & Projects
1 page
CSS Box Model and Display Tricks
No ratings yet
CSS Box Model and Display Tricks
8 pages
Serviceabläufe Automatisieren: Basic Information
0% (1)
Serviceabläufe Automatisieren: Basic Information
4 pages
Understanding the Navigator Object
No ratings yet
Understanding the Navigator Object
15 pages
Python Doctor Appointment System Report
No ratings yet
Python Doctor Appointment System Report
24 pages
Sneaker World Mini Project Report
No ratings yet
Sneaker World Mini Project Report
31 pages
Social Media Project Overview
No ratings yet
Social Media Project Overview
14 pages
Tumblr Fluid Theme HTML Guide
100% (1)
Tumblr Fluid Theme HTML Guide
21 pages
Understanding Bitcoin Core and BitPay
No ratings yet
Understanding Bitcoin Core and BitPay
147 pages
Full-Stack Developer Profile: Chaitanya
No ratings yet
Full-Stack Developer Profile: Chaitanya
1 page
SEO Tools and Affiliate Programs Guide
100% (1)
SEO Tools and Affiliate Programs Guide
1 page