Web Technology

WEB TECHNOLOGY
Conetens
1. Web
2. Working of web
3. Web Technology
4. Website
What is Web
• Web, is a way of accessing information over the medium of
the Internet.
वेब, इंटरनेट के माध्यम पर जानकारी प्राप्त करने का एक तरीका है।
• It is an information-sharing model that is built on top of the

Internet.
• यह एक इनफॉरमेशन शेयरिंग मॉडल है जो इंटरनेट के शीर्ष पर बनाया गया है।
Google Server
• The Web uses the HTTP( Hypertext Transfer Protocol )
protocol, only one of the languages spoken over the
Internet, to transmit data.
• वेब HTTP ( हाइपरटेक्स ट्रांसफर प्रोटोकॉल) प्रोटोकॉल का उपयोग करता है, डेटा प्रसारित
करने के लिए HTTP इंटरनेट पर बोली जाने वाली एक भाषा।
• The Web also utilizes browsers, such as Internet Explorer
or Firefox, to access Web documents called Web pages
that are linked to each other via hyperlinks.
• वेब उन वेब पेजों को एक्सेस करने के लिए इंटरनेट एक्सप्लोरर या फ़ायरफ़ॉक्स जैसे ब्राउज़रों का
उपयोग करता है, जिन्हें वेब पेज कहा जाता है जो हाइपरलिंक के माध्यम से एक दूसरे से जुड़े होते
हैं।
● Web documents also contain graphics, sounds, text and
video.
वेब दस्तावेज़ों में ग्राफिक्स, ध्वनियाँ, टैक्स और वीडियो भी होते हैं।
Welcome to
My Website
How it works
• A Web page on the World Wide Web normally begins by

typing the URL (Uniform Resource Locator) of the page into a
Web browser.
• वर्ल्ड वाइड वेब पर, एक वेब पेज आमतौर पर पेज के URL (यूनिफ़ॉर्म रिसोर्स लोके टर ) को
वेब ब्राउजर में टाइप करने से शुरू होता है।
How it works
• The Web browser then initiates a series of communication

messages, behind the scenes, in order to fetch and display it.
• वेब पेज को लाने और प्रदर्शित करने के लिए,वेब ब्राउज़र तब पर्दे के पीछे कम्युनिके शन
मैसेज की एक श्रृंखला शुरू करता है।
How it works
• First, the server-name portion of the URL is resolved into an

IP address using the domain name system.
• सबसे पहले डोमेन नाम प्रणाली का उपयोग करके URL के सर्वर-नाम भाग को को आईपी
एड्रेस में बदलते हैं।
www.rgpvdiploma.in ==== > 192.168.3.40
• This IP address is necessary to contact and send data packets

to the Web server.
• यह आईपी एड्रेस वेब सर्वर से संपर्क करने और डेटा पैके ट भेजने के लिए आवश्यक है।
• The browser then requests the resource by sending an HTTP
request to the Web server at that particular address.
• ब्राउज़र उस विशेष पते पर वेब सर्वर के लिए HTTP अनुरोध भेजकर संसाधन का
अनुरोध करता है।
• The browser translates the data it has been given in to HTML

and displays the results to the user.
• ब्राउज़र HTML में दिए गए डेटा का अनुवाद करता है और उपयोगकर्ता को परिणाम
दिखाता है।
Web Technology:-
• Web Technology is a way to represent the information on the
web page.
• वेब प्रौद्योगिकी वेब पेज पर जानकारी का प्रतिनिधित्व करने का एक तरीका है।
• Web Technology uses the markup languages(HTML),
programming interfaces and languages(Javascript), and standards
for document identification and display(CSS,DOM)
वेब प्रौद्योगिकी मार्क अप भाषाओं, प्रोग्रामिंग इंटरफे स और भाषाओं और दस्तावेज़ पहचान और
प्रदर्शन के लिए मानकों का उपयोग करती है
HTML Javascript CSS

Web Technology:-
• Web technologies provide the interface between web servers

and their clients.
वेब प्रौद्योगिकियां वेब सर्वर और उनके ग्राहकों के बीच इंटरफे स प्रदान करती हैं
• Web page :-A web page is a document that is suitable for the
World Wide Web and can be accessed through a web browser
and displayed on a monitor or mobile device. This information is
usually in HTML or XHTML format, and may provide navigation to
other web pages via hypertext links. Web pages frequently
subsume other resources such as style sheets, scripts and images
into their final presentation.
• वेब पेज: -एक वेब पेज एक दस्तावेज़ है जो वर्ल्ड वाइड वेब के लिए उपयुक्त है और इसे वेब ब्राउज़र के माध्यम से
एक्सेस किया जा सकता है और मॉनिटर या मोबाइल डिवाइस पर प्रदर्शित किया जा सकता है। यह जानकारी
आमतौर पर HTML या XHTML प्रारूप में होती है, और हाइपरटेक्स्ट लिंक के माध्यम से अन्य वेब पृष्ठों पर
नेविगेशन प्रदान कर सकती है। वेब पेज अक्सर अपनी अंतिम प्रस्तुति में स्टाइल शीट, स्क्रिप्ट और छवियों जैसे अन्य
संसाधनों को ग्रहण करते हैं।
• Web pages may be retrieved from a local server or from a remote
web server. The web server may restrict access only to a private
network, e.g. a corporate intranet, or it may publish pages on the
World Wide Web. Web pages are requested from the clinet and
served from web servers using Hypertext Transfer Protocol
(HTTP).
• वेब पृष्ठों को स्थानीय सर्वर से या दूरस्थ वेब सर्वर से पुनर्प्राप्त किया जा सकता है। वेब सर्वर के वल
एक निजी नेटवर्क तक पहुंच को प्रतिबंधित कर सकता है, उदा। एक कॉर्पोरेट इंट्रानेट, या यह
वर्ल्ड वाइड वेब पर पेज प्रकाशित कर सकता है। हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल (एचटीटीपी) का
उपयोग कर वेब पेजों को क्लीनिक से मंगाया जाता है और वेब सर्वरों से परोसा जाता है।
• Every Web page is identified by a unique URL (Uniform Resource
Locator).
• प्रत्येक वेब पेज की पहचान एक अद्वितीय URL (यूनिफ़ॉर्म रिसोर्स लोके टर) द्वारा की जाती है।
• Web pages may consist of static text or dynamic pages.

• वेब पृष्ठों में स्थिर पाठ या गतिशील पृष्ठ शामिल हो सकते हैं।
• Website:-A website is a set of related web pages containing
content such as text, images, video, audio, etc.
• वेबसाइट: -एक वेबसाइट संबंधित वेब पेजों का एक सेट है जिसमें टेक्स्ट, चित्र, वीडियो, ऑडियो
आदि जैसी सामग्री होती है।
a website may be
एक वेबसाइट हो सकती है
✔ a personal website
एक निजी वेबसाइट
✔ a E-commercial website-Amazon.com
एक ई-व्यावसायिक वेबसाइट-Amazon.com
✔ a government website- www.mp.gov.in
एक सरकारी वेबसाइट- www.mp.gov.in
✔ a nonprofit organization website.
एक गैर-लाभकारी संगठन वेबसाइट।
✔ Community site- Facebook, orkut
सामुदायिक साइट- फे सबुक, ऑरकु ट
✔ Gaming website
गेमिंग वेबसाइट
• A website is hosted on at least one web server, accessible via a
network such as the Internet or a private local area network
through an Internet address known as a
Uniform Resource Locator.
एक वेबसाइट को कम से कम एक वेब सर्वर पर होस्ट किया जाता है, जो एक नेटवर्क के माध्यम
से सुलभ होता है जैसे कि इंटरनेट या एक निजी स्थानीय क्षेत्र का नेटवर्क जो कि एक यूनिफॉर्म
रिसोर्स लोके टर के रूप में जाना जाता है।
• All publicly accessible websites collectively constitute the
World Wide Web.
सभी सार्वजनिक रूप से सुलभ वेबसाइटें सामूहिक रूप से वर्ल्ड वाइड वेब का गठन करती हैं।
• A website is actually a collection of files and documents which is
saved in a server (it's a specific computer that is connected to the
internet all the time).
• एक वेबसाइट वास्तव में फाइलों और दस्तावेजों का एक संग्रह है जो एक सर्वर में सहेजा जाता है
(यह एक विशिष्ट कं प्यूटर है जो हर समय इंटरनेट से जुड़ा होता है)।
Website
Web server
There is an easiest language to make a website file is HTML (Hyper
Text Mark up Language). Even you know nothing about this HTML
languange programming, you still can make a simple website file by
using a regular word processor software just like Microsoft Office
Word, Microsoft Office Excell, Microsoft frontpage or Openoffice for
Linux.
HTML (हाइपर टेक्स्ट मार्क अप लैंग्वेज) वेबसाइट फ़ाइल बनाने के लिए एक आसान भाषा है। यहां
तक कि
आप इस HTML प्रोग्रामिंग के बारे में कु छ भी नहीं जानते हैं, आप अभी भी Microsoft
Office Word, Microsoft Office Excell, Microsoft frontpage या
Linux के लिए Openoffice की तरह एक नियमित वर्ड प्रोसेसर सॉफ्टवेयर का उपयोग करके
एक साधारण वेबसाइट फ़ाइल बना सकते हैं।
The only thing you have to do is saving your file as HTML document
with .html extension by clicking "save as" tab and chose .html file
option
के वल एक चीज जो आपको करनी है, वह है अपनी फ़ाइल को HTML डॉक्यूमेंट के रूप में .html
एक्सटेंशन के साथ "save as" टैब और ".html फ़ाइल" विकल्प पर क्लिक करके ।
Save As myweb.html
• you must name your file with index.html if you want to make that
file become the first page (home page) of your website.
यदि आप उस फ़ाइल को अपनी वेबसाइट का पहला पृष्ठ (होम पेज) बनाना चाहते हैं, तो आपको
अपनी फ़ाइल को index.html के साथ नाम देना चाहिए।
• Website Address (URL = Uniform Resource Locator):
वेबसाइट का पता (URL = यूनिफ़ॉर्म रिसोर्स लोके टर):
• There are different parts of URL.URL के विभिन्न भाग हैं।
• The first part is called Protocol, we know it as http:// stands for
Hyper Text Transfer Protocol.HTTP protocaol is used to transmit
the data between server and client devices.
• पहले भाग को प्रोटोकॉल कहा जाता है, हम इसे http: // के रूप में जानते हैं जिसका उद्देश्य
हाइपर टेक्स्ट ट्रांसफर प्रोटोकॉल है।HTTP प्रोटोकॉल का उपयोग सर्वर और क्लाइंट डिवाइस के
बीच डेटा संचारित करने के लिए किया जाता है।
• The Second is www stands for World Wide Web. This means that
the page you're looking for is somewhere on the World Wide
Web.
• दूसरा www वर्ल्ड वाइड वेब के लिए है। इसका मतलब है कि आप जिस पेज को देख रहे हैं वह
वर्ल्ड वाइड वेब पर कहीं है।
• The third is the domain. This tells you where the web page is
registered, and often tells you what kind of web site it is.
• For instance, .com usually means that you're looking at a
commercial site, .edu sites for educational institutions, .org (sites
belonging to organizations), and .gov sites sponsored by local,
state governments.
• तीसरा डोमेन है। यह आपको बताता है कि वेब पेज कहां पंजीकृ त है, और अक्सर आपको बताता है
कि यह किस तरह की वेब साइट है।
• उदाहरण के लिए, .com का आमतौर पर मतलब है कि आप एक व्यावसायिक साइट, शैक्षिक
संस्थानों के लिए .edu साइट्स, .org (संगठनों से संबंधित साइट) और स्थानीय, राज्य
सरकारों द्वारा प्रायोजित .gov साइट्स देख रहे हैं।
Website Publishing Process
Web publishing, or "online publishing," is the process of

publishing content on the Internet.
It includes creating and uploading websites, updating
webpages
Creation of Website
• Steps for creation & publishing the Website
Gathering Information
Planning
Organizing /Designing
v
v v v
Hierarchical Linear Webbed

v v v
v
Implementing
Testing
Published
Maintenance
1. Gathering Information
• First of all , we gather the following information about the
website.
• Purpose:- purpose of the site like provide information, promote a
service or sell a product.
• Target Audience
• Find out the audience there a specific group of people that will
help you reach your goals? It is helpful to picture the “ideal”
person you want to visit your web site. Consider their age, gender
or interests – this will help us determine the best design style for
your site.
Content
• The Content on the website may be a specific information, online
service, online ordering of particular product .
2. Planning
• Using the information gathered from phase one, it is time to put
together a plan for your web site. This is the point where a site
map is developed.
• The site map is a list of all main topic areas of the site, as well as
sub-topics, if applicable. This serves as a guide as to what content
will be on the site, and is essential to developing a consistent,
easy to understand navigational system.
• During the planning phase, web designer will also help you decide
what technologies should be implemented. Elements such as
interactive forms, ecommerce, flash, etc. are discussed when
planning your web site.
3. Organizing / Design
• During the design phase, your website takes shape. All the
visual content, such as images, photos, and videos is
created at this step.
• The website layout is the result of a designer’s work
● It can be a graphic sketch or an actual graphic design. The

primary function of the layout is to represent the
information structure, visualize the content, and
demonstrate the basic functionality. Layouts contain
colors, logos, images and can give a general understanding
of the future product.
● According to the contents, there are three types of website
designing
Hierarchical Linear Organization Webbed
3.1Hierarchical
• Hierarchical Organization: This organizational pattern is

frequently used on the Web, particularly sites that provide
categories of information, such as informative Web sites,
government sites, and commercial sites.
• Hierarchy offers limited navigational choices to readers: they can
move up to a higher level in the hierarchy or down to pages lower
in the hierarchy. They cannot, however, move across the site to
other pages that are at the same level in the hierarchy.
An Example of a Web Site Organized in a Hierarchical Structure
3.2 Linear Organization
• Linear Organization: A linear organization offers limited choices
to a reader: forward and backward. A linear, or sequential,
organizational pattern is similar to that found in a book.
• Linear Web sites are well suited to step-by-step instructions.
3.3 Webbed Organization
• Webbed :- Webbed design also called an interlinked site, it is
possible to reach every other page in the Web site from a given
page. This organizational structure is sometimes used in smaller
sites, or in sites that use a navigational menu on each page. This
organizational structure becomes difficult to support when the
site grows to more than a handful of pages.
• Implementation :- The design of the website must be translated
into a machine-readable form using HTML and other scripting
language. The implementation stage is the point where the web
site itself is created
• Testing :- Website testing is a process of validating and verifying
the content of the website.Web testing is a software testing
practice to test websites for finding bugs,performance and
functional outcome . It's a complete testing of web-based
applications before making live.
4. Publishing Web pages -
• After you have created your pages with your editor, you'll need to
upload your web site files, including all pages and images, to your
Server. Web Server
Website Upload
GWPCI
• Maintenance:- Website Maintenance is the modification of a
website product after hosting to improve performance or
updating information.
Unit –II
• HTML is a language for describing the web pages.
• HTML stands for Hyper Text Mark-up Language
• It provides a means to create structured documents by
denoting structural semantics for text such as headings,
paragraphs, lists etc as well as for links, quotes, and other
items.
Heading Paragraph
Example
HTML TUTORIAL HTML tags
list 1. HTML tags HTML tag is an instruction

2. HTML links
3. HTML tables
to the browser for displaying
the “ formatted output ” .
• It allows images and objects to be embedded and can be used to
create interactive forms. It is written in the form of HTML elements
consisting of "tags" surrounded by angle brackets within the web
page content. <html>

<head>
</head>
Name:- <body>
<img src=”sun.jpeg”>
class:- <form name=”reg”>
Name:-<input type=”text”>
</body>
OK CANCEL </html>
• HTML is not a programming language, it is a mark-up language
• A mark-up language usage set of mark-up tags .

• A Web browser interpret the set of HTML tags within the
page in order to display the page on your screen.

• HTML documents contain HTML tags and plain text
• The purpose of a web browsers (like Internet Explorer) is to
read HTML documents and display them as web pages. The
browser does not display the HTML tags.
<html>
<head>
</head>
<body>
<img src=”sun.jpeg”> Name:-
<form name=”reg”>
Name:-<input type=”text”> class:-
</body>
</html> OK CANCEL
An HTML tag
An HTML tag is a code element that tells the Web browser what
to do with your text. Each tag will appear as letters or words
between an angular bracket < >.
• Any Web page you create will contain the following tags at the
start of the page:
• <HTML>: tells the Web browser that this is the beginning of
an HTML document
• <HEAD>: tells that Web browser that this is the header for the
page.
• <TITLE>: tells the Web browser that this is the title of the page
• <BODY>: tells the Web browser that this is the beginning of
the Web page content -- everything you want to see on your
page will follow this tag.
Head Section
Not visible in the browser
Title Bar
Body Section
Visible in the browser
<html>
<head>
<title>Polytechnic College </title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
Example Explained
The text between <html> and </html>
describes the web page
The text between <body> and </body> is the
visible page content
The text between <h1> and </h1> is displayed
as a heading
The text between <p> and </p> is displayed as
a paragraph
• HTM or HTML Extension?
• When you save an HTML file, you can use either the .htm or
the .html extension.
• HTML Links
• HTML links are defined with the <a> tag.
<a href="http://www.w3schools.com">This is a link</a>
• Note: The <a> tag contains an attribute (href) to provide the
link address.
Head section –
The <head> element is a container for metadata (data
about data) and is placed between the <html> tag and the
<body> tag. Metadata is data about the HTMLdocument.
Metadata is not displayed. Metadata typically define the
document title, character set, styles, scripts, and other
meta information.
<html>
<head>
Document Title,Prologue, Link, Base,character
--------- set,styles,scripts
</head>
<body>
• Head section –
• The head of the web page consist of the following section
Prologue, Link, Base, Meta, Script, Style
• Prologue (प्रस्तावना) :- The prologue appears at the beginning of every
HTML page, allowing browsers and other special software to
distinguish HTML documents from other types (DTDs) of SGML
(Standard Generalized Markup Language)
• HTML, XHTML, and XML are all examples of SGML-based languages.
• All HTML documents written according to the current HTML
specification (Version 4.01) should use the prologue tag displayed
below.
The prologue tag displayed below.
1 2 3 4 5 6 7
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
• The <!DOCTYPE> declaration must be the very first thing in your

HTML document, before the <html> tag.
• The <!DOCTYPE> declaration is not an HTML tag; it is an
instruction to the web browser about what version of HTML the
page is written in.
• HTML - The SGML document type being declared: <HTML> ...
</HTML>
• PUBLIC - The given information is identified as a PUBLIC
information.
• "-" - The minus sign designates unregistered organization. ISO,
registered (+) or unregistered (-) are possible here. W3C(World
Wide Web Consortium) is not currently registered with ISO,
therefore the (-) is used.

• W3C - identifies the party responsible for creation/maintenance
of the DTD (Document Type Definition).
• DTD - The DTD specifies the rules for the markup language
• HTML 4.01 Transitional - is the Public Text Description. Here you'll
find the DTD's name, plus flavors such as version numbers,
"strict", "draft," "transitional," etc.
• EN - identifies the Public Text Language, describing the natural
language in which the public text is written, represented by two,
uppercase-only characters from ISO 639. "EN"= English.
<link>
• The <link> tag defines the relationship between a document and
an external resource.
• The <link> tag is most used to link to style sheets.
• The <link> element must be embedded in the head section.
• In HTML the <link> tag has no end tag.
<head>
<link ….. ….. >
</head>
Style sheet
HTML Document External Resource

Attributes of Link tag
• Rel:- Specifies the relationship between the current document

and the linked document.
• Type:- Specifies the MIME (Multipurpose Internet Mail
Extensions) type of the linked document.
text/css text/javascript image/jpeg
• Href:- Specifies the location of the linked document
hello.html
styles.css
<html> h1
<head> {
<link rel="stylesheet" color:darkblue;
type="text/css" text-align:center;
href="styles.css"> }
</head> h2
<body> {
color:darkgreen;
text-align:center;
<h1>Hello World!</h1>
}
<h2>I am formatted with a p

linked style sheet.</h2> {
color:red;
<h1>Chapter-1</h1> text-align:center;
}
<p>This is a paragraph</p>
<h1>Chapter-2</h1>
</body>
</html>
The HTML <base> Element
• The HTML <base> tag is used to specify a base URL, for relative
links.
For example, you can set the base URL once at the top of your
page in header section, then all subsequent relative links
will use that URL as a starting point.
<html>
<head>
<title>HTML base Tag</title>
<base href = "https://www.tutorialspoint.com" />
</head>
<body>
HTML: <img src = "/images/html.gif" />
</body>
</html>
<html>
<head>
<title>My Link Demo</title>
<base
href="/media/adtmintadmin/4A7EB3637EB3470B/backup/Teaching
Odd Sem"/>
<base target="_self"/>
</head>
<body>
<a href="cssem5.pdf"> Cilck to open PDF</a>
</body>
</html>
The HTML <base> tag supports the following attributes −

Attribute Value Description
href URL Specifies the URL of a page or the name of
the anchor that the link goes to.
_blank _blank − the target URL will open in a new
window.
_parent _parent − the target URL will open in the
parent frameset
target _self _self − the target URL will open in the same
frame as it was clicked.
_top _top − the target URL will open in the full body
of the window
Metadata
• Metadata is information about data.
• The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be machine
readable.
• Meta elements are typically used to specify page description,
keywords, author of the document, last modified, and other
metadata.
• The <meta> tag always goes inside the head element.
• The metadata can be used by browsers (how to display content or
reload page), search engines (keywords), or other web services.
charset character_set Specifies the character encoding

for the HTML document
content text Specifies the value associated
with the name attribute
name application-name Specifies a name for the metadata
author
description
keywords
viewport
http-eq content-security- Provides an HTTP

uiv policy header for the
information/value of the
content-type
content attribute
default-style
refresh
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> (8-bit Unicode Transformation Format)
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="ABC">
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> The initial-scale=1.0 part sets the initial
zoom level when the page is first loaded by the
browser.
<meta http-equiv="refresh" content="30">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
• The HTML <script> Element
• The <script> tag is used to define a client-side script, such as a
JavaScript.
• The script element either contains scripting statements or it
points to an external script file through the src attribute.
• You can place any number of scripts in an HTML
document. Scripts can be placed in the <body> , or in the
<head> section of an HTML page, or in both.
• The required type attribute specifies the MIME (Multi-purpose
Internet Mail Extensions) type of the script.
• Common uses for JavaScript are image manipulation, form
validation, and dynamic changes of content.
<body>
<head>
<script type="text/javascript">
<script type="text/javascript">
document.write("Hello
___________
World!")
_______
< /script>
< /script>
</head> </body>
JS External
• The HTML <style> Element
• The <style> tag is used to define style information for an HTML
document.
• Inside the style element you specify how HTML elements should
render in a browser:
< head>
< style type="text/css">
body {background-color:yellow}
p {color:blue}
< /style>
< /head>
• Body Section
• The body of the document contains all element that can be seen
when the user loads the page.
• It will include Header, Paragraphs, Text Formatting, Linking,
Internal Linking, Embedding Images, Lists, Tables, Frames. Other
Special Tags and Characters
Header
• Headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least
important heading.
• H1 headings should be used as main headings, followed by H2
headings, then the less important H3 headings, and so on.
• Example
• <h1>This is a heading 1</h1> == Most important heading
• < h2>This is a heading 2</h2>
• < h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
< h5>This is a heading 5</h5>
< h6>This is a heading 6</h6> == Least important heading
This is a heading 1
This is a heading 2
This is a heading 3
This is a heading 4
This is a heading 5
This is a heading 6
HTML Paragraph
• HTML documents are divided into paragraphs.
• The <p> tag defines a paragraph.
• The <p> tag supports the following standard attributes:
Attribute Description
class Specifies the class name for <p> tag.
id Specify a unique id for an element
style specify an inline CSS style for an element
title Specify extra information about an element
• HTML Paragraphs
• Example
< p >This is a paragraph</p> This is a paragraph
< p>This is another paragraph</p> This is another paragraph

<p>
The number of lines in a
The number of lines in a paragraph paragraph depends on the
depends on the size of the browser size of the browser window.
If you resize the browser
window. If you resize the browser window, the number of lines
window, the number of lines in this in this paragraph will
change.
paragraph will change.
</p>
Text formatting
• The following HTML tags are used to format the appearance of
the text on your web page.
● <b> - Bold text

● <strong> - Important text
● <u> - Underline Text
● <i> - Italic text
● <em> - Emphasized text
● <mark> - Marked text
● <small> - Smaller text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
● <sup> - Superscript text
Text formatting
• Bold - <b> </b>:- The HTML <b> element defines bold

text, without any extra importance.
<b> My first web Page </b> My first web Page
• strong - <strong> </strong>:-The HTML <strong> element

defines text with strong importance. The content
inside is typically displayed in bold.
<strong> My first</strong> web My first web Page
Page
<strong> stands for semantically emphasized text,

while <b> stands for presentationally bold text.
Text formatting
• Underline - <u> </u>:- The text in between the tags will be display
as a underline text.
<u> My first web Page </u> My first web Page
• italic - <i> </i>:- The HTML <i> element defines italic

text.
<i> My first web Page </i> My first web Page

Text formatting
• The HTML <em> element defines emphasized text.

The content inside is typically displayed in italic.
<em> My first web Page </em> My first web Page
• The HTML <i> element defines italic text.
<i> My first web Page </i> My first web Page

Text formatting
• The HTML <mark> element defines text that should

be marked or highlighted:
<p>Diploma Theory exam is Diploma Theory exam is

held in <mark>May held in May month.
month.</mark> </p>
• The HTML <small> element defines smaller text:
<p>This is some normal

text.</p> This is some normal text.
<p><small>This is some This is some smaller text.
smaller text.</small></p>
Text formatting
• The HTML <del> element defines text that has been

deleted from a document. Browsers will usually
strike a line through deleted text:
<p>My favorite color is My favorite color is blue red.
<del>blue</del> red.</p>
● The HTML <ins> element defines a text that has

been inserted into a document. Browsers will
usually underline inserted text:
<p>My favorite color is <del> blue My favorite color is blue red.

</del><ins> red</ins>.</p>
Text formatting
• The HTML <sub> element defines subscript text.

Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller
<p>H <sub>2</sub>O</p> H2 O
font.
● he HTML <sup> element defines superscript text.

T
Superscript text appears half a character above the

normal line, and is sometimes rendered in a smaller
<p>2<sup>5</sup>=32 </p> 25=32
font
Text formatting
• Font Colour <font color= red"> </font>

The text in between the tags will be display as a red colore text.
<p><font color= red"> This This is a paragraph

is a paragraph</font></p>
Centre :- <center> </center>

The text in between the tags will be display in a center of the web
page.
<center> This is a This is a paragraph
paragraph</center>
HTML Hyperlinks (Links)
• A hyperlink (or link) is a word, group of words, or image that you
can click on to jump to a new document or a new section within
the current document.
• When you move the cursor over a link in a Web page, the arrow
will turn into a little hand.
• Links are specified in HTML using the <a> tag.
• The <a> tag can be used in two ways:
• To create a link to another document, by using the href attribute,
this link is called as an external link.
• To create a bookmark inside a document, by using the name
attribute, this link is called as an internal link.
HTML External Link Syntax
• The HTML code for a link is simple. It looks like this:
• < a href="url">Link text</a>
• The href attribute specifies the destination of a link.
Example
• <a href="https://www.rgpvdiploma.in">Visit RGPV Diploma
Website</a>
internal link
• An internal link allows you to link to another section on the same
web page, so it basically scrolls the page up or down to the
desired location. This is helpful to the user to quickly jump to the
desired information.
Chapter 1
Chapter 2
-------------
-------------
Chapter 1
In this chapter,we study the webpage
-------
Chapter 2
In this chapter,we study the website
-------
• To link to a specific spot on a web page, you need to use a pair of
anchors. One where you are linking from, and one where you
would like to link to. The first one, is where you are linking from.
It is very similar to the normal link tag.
• The starting tag looks like <a href="#name"> and the closing tag
looks like </A>. The text between the two tags is what is the link.
The text "name" identifies the anchor, giving it a name.
<a href=“#Next"> Go To The Next Page </a>

• The second anchor identifies where you are linking to. This tag
must be placed in your HTML in the location where you would like
to link to. The starting tag is <a name=“Next"> and the closing tag
is </A>. It is not necessary that any text goes between these two
tags as it is just identifying an area. The text "name", must match
that in the first anchor, for the link to work. Here is an example of
an internal link.
<a name=“Next“></a>
<HTML>
<BODY>
<A HREF=“#Next"> Go To The
Next Page </A>
-------------------------------------
-------------------------------------
-------------------------------------
-------------------------------------
<A NAME=“Next“></A>
</BODY>....
</HTML>
Embedding Images
• The <img> tag defines an image in an HTML page.
• The <img> tag has two required attributes: src and alt.
• In HTML the <img> tag has no end tag.
src URL Specifies the URL of an image
alt text Specifies an alternate text for an
iamge,if the image for some
reason cannot be displayed
height pixel Specifies the height of an image
width pixel Specifies the width of an image

<html>
<head>
<style>
img
{
border: 5px solid;
border-color: yellow;
height: 400px;
width: 600px;
border-radius:30px;
}
</style>
</head>
<body>
<img src = "/media/adtmintadmin/4A7EB3637EB3470B/backup/pic/poly.jpg"
alt= polycollege>
<img src = "/media/adtmintadmin/4A7EB3637EB3470B/backup/pic/poly1.jpg"
alt= polycollege-garden>
<p>Welcome to my College </p>
</html>
</body>
Lists
• HTML lists allow web developers to group a set of

related items in lists.
• HTML arrange list of information in three ways
1. Ordered list 2. Unordered list 3. Definition list
1.Coffee • Coffee Coffee

2.Milk • Milk - black hot drink
Milk
- white cold drink
• Ordered list :- An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
• The list items are marked with numbers.
Attributes of ordered list
Attribut Value Description

e
reserved reversed Specifies that the list order should be
reversed (9,8,7...)
start number Specifies the start value of an ordered

list
type 1,A,a,I,i Specifies the kind of marker to use in
the list
• Example
< ol> < ol type=”A”> < ol start=”10”>

< li>Coffee</li> < li>Coffee</li> < li>Coffee</li>
< li>Milk</li> < li>Milk</li> < li>Milk</li>
< /ol> < /ol> < /ol>
1.Coffee A.Coffee 10.Coffee

2.Milk B.Milk 11.Milk
HTML Unordered Lists
• An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
• The list items are marked with bullets (typically small black
circles).
• Example
<ul <ul style="list- <ul style="list-

<li>Tea</li> style- style-
<li>Milk</li> type:circle"> type:square">
</ul> <li>Tea</li> <li>Tea</li>
<li>Milk</li> <li>Milk</li>
</ul> </ul>
● Coffee ○ Coffee ❏ Coffee

● Milk ○ Milk ❏ Milk
HTML Definition Lists
• A definition list is a list of items, with a description of each

item.
• The <dl> tag defines a definition list.
• The <dl> tag is used in conjunction with <dt> (defines the

item in the list) and <dd> (describes the item in the list):
HTML Definition Lists example
< dl>
< dt>Coffee</dt>
< dd>- black hot drink</dd>
< dt>Milk</dt>
< dd>- white cold drink</dd>
< /dl>
The above HTML code looks in a browser:
Coffee
- black hot drink
Milk
- white cold drink
HTML Tables
• HTML tables allow web developers to arrange data
into rows and columns.
• Tables are defined with the <table> tag.
• A table is divided into rows (with the <tr> tag), and each row is
divided into data cells (with the <td> tag). td stands for "table
data," and holds the content of a data cell.
• A <td> tag can contain text, links, images, lists, forms, other
tables, etc.
<table>
<tr> Roll No Photo URL </tr>
<td>-----</td> 12345 visit Site

HTML Tables
● Each table header is defined with a <th>

● By default, the text in <th> elements are bold and
centered.
● The <caption> tag defines a table caption.
● The <caption> tag must be inserted immediately
after the <table> tag.
<Caption> Tag
Registration Details
<th>----</th> Roll No Photo
12345
}
border property border-collapse Cell Padding

property property
text-align property HTML Table colspan attribute
properties
Attributes
border-spacing rowspan attribute

property background-color
property
1. HTML Table - Add a Border
To add a border to a table, use the CSS border
property:
table, th, td {
border: 1px solid
black;
}
<table
style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr><td>abc</td>
<td>xyz</td>
<td>50</td></tr>
</table>
2. HTML Table - Collapsed Borders
To let the borders collapse into one border, add the CSS border-
collapse property:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr><td>abc</td>
<td>xyz</td>
<td>50</td></tr>
</table>
3. HTML Table - Add Cell Padding
Cell padding specifies the space between the cell
content and its borders.
table, th, td {
padding: 15px;
}
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr><td>abc</td>
<td>xyz</td>
<td>50</td></tr>
</table>
4. HTML Table - align property
To align the table contents, use the CSS text-align property:
table, th, td {
text-align: center;
}
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr><td>abc</td>
<td>xyz</td>
<td>50</td></tr>
</table>
5. HTML Table - Add Border Spacing
Border spacing specifies the space between the cells.
table, th, td {
text-align: center;
border-spacing: 5px;
}
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr><td>abc</td>
<td>xyz</td>
<td>50</td></tr>
</table>
6. HTML Table - Background-color
Background-color property specify the background color of
the table
table, th, td {
text-align: center;
border-collapse:collapse;
background-color: yellow;
}
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr><td>abc</td>
<td>xyz</td>
<td>50</td></tr>
</table>
7.HTML Table - Cell that Span Many Rows
To make a cell span more than one row, use the
rowspan attribute:
table, th, td {
}
<tr>
<th>Name</th>
<th ="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
8.HTML Table - Cell that Span Many Columns
To make a cell span more than one column, use the
colspan attribute:
table, th, td {
}
<tr>
<th>Name</th>
<th
colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Frames
• HTML frames are used to divide your browser window into
multiple sections where each section can load a separate
HTML document. A collection of frames in the browser
window is known as a frameset. The window is divided into
frames in a similar way the tables are organized: into rows
and columns.
Creating Frames
• To use frames on a page we use <frameset> tag instead of
<body> tag. The <frameset> tag defines, how to divide the
window into frames. The rows attribute of <frameset> tag
defines horizontal frames and cols attribute defines vertical
frames. Each frame is indicated by <frame> tag and it
defines which HTML document shall open into the frame.
The <frame> Tag Attributes
S.N. Attribute Description

1 src This attribute is used to give the file
name that should be loaded in the
frame. Its value can be any URL
2 name This attribute allows you to give a
name to a frame. It is used to indicate
which frame a document should be
loaded into.
3 frameborder This attribute specifies whether or not
the borders of that frame are shown
<frameset cols="25%,*,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
Frame A Frame B Frame C

HTML: Special Characters
• HTML Entities and/or ISO Latin-1 codes can be placed in source

code like any other alphanumeric characters to produce special
characters and symbols that cannot be generated in HTML with
normal keyboard commands.
• If you use the less than (<) or greater than (>)
signs in your text, the browser might mix them with
tags.
• To display a less than sign (<) we must write: <
or <
Some Useful HTML Character Entities
Character Entity Entity Description

Name Number
non-breaking space
< < < less than
> > > greater than
& & & ampersand
" " " double quotation
mark
' ' ' single quotation

mark (apostrophe)
¢ ¢ ¢ cent
£ £ £ pound

Some Useful HTML Character Entities
Character Entity Entity Description

Name Number
¥ ¥ ¥ yen
€ € € euro
₹ ₹
INDIAN RUPEE SIGN
© © © copyright
® ® ® registered

trademark
Entity names are case sensitive.

<html>
<body>
<p>Salary of " John "

is > 200 £
</p>
<p>The contents of website is ©
GWPC, Indore, Rajendra Nagar AB
Output
Road
</p> Salary of " John " is > 200 £
<p>registered trademark ®</p> The contents of website is ©
<p>₹ Indain Rupee</p> GWPC, Indore, Rajendra Nagar
AB Road
</body>
registered trademark ®
</html>
₹ Indain Rupee
• An HTML form is a section of a document containing normal
content, mark-up, special elements called controls
(checkboxes, radio buttons, menus, etc.), and labels on those
controls.
• Form elements are elements that allow the user to enter
information (like text fields, textarea fields, drop-down menus,
radio buttons, checkboxes, etc.) in a form.
• A form is defined with the <form> tag.
•
<form>
.
input elements
.
</form>
Input
• The most used form tag is the <input> tag. The type of input is
specified with the type attribute.
• The most commonly used input types are
Text Fields
• Text fields are used when you want the user to type letters,
numbers, etc. in a form.
<form>
First name:
<input type="text" name="firstname" />
</br >
Last name:
<input type="text" name="lastname" />
</form>
Password Field
• <input type="password" /> defines a password field:
< form>
Password:< input type="password" name="pwd" />
< /form>
• The HTML code above looks in a browser:

• Password:
• Note: The characters in a password field are masked (shown as
asterisks or circles).
• Radio Buttons
• <input type="radio" /> defines a radio button. Radio buttons let a
user select ONLY ONE of a limited number of choices:
• < form>
• < input type="radio" name=“gender" value="male" /> Male<br />
• < input type="radio" name=“gender " value="female" /> Female
• < /form>
• The HTML code above looks in a browser:
Male
Female
Checkboxes
• <input type="checkbox" /> defines a checkbox. Checkboxes let a
user select ZERO or MORE options of a limited number of choices.
• < form>
• < input type="checkbox" name="vehicle" value="Bike" /> I have a
bike<br >
• < input type="checkbox" name="vehicle" value="Car" /> I have a
car
• < /form>
• How the HTML code above looks in a browser:
• I have a bike
I have a car
• Submit Button
• <input type="submit" /> defines a submit button.
• A submit button is used to send form data to a server. The data is
sent to the page specified in the form's action attribute. The file
defined in the action attribute usually does something with the
received input:
• < form name="input" action="html_form_action.asp"
method="get">
• Username:< input type="text" name="user" />
• < input type="submit" value="Submit" />
• < /form>
• the HTML code above looks in a browser:
• Username:
Submit
● The <select> Element
● The <select> element defines a drop-down list:
● The <option> elements defines an option that can be
selected one option from many options.
● By default, the first item in the drop-down list is selected.
● To define a pre-selected option, add the selected attribute
to the option:
● Example
● <select name="cars">
● <option value="volvo">Volvo</option>
● <option value="saab">Saab</option>
● <option value="fiat">Fiat</option>
● <option value="audi">Audi</option>
● </select>
● TextArea
● The <textarea> tag defines a multi-line text input control.
● A text area can hold an unlimited number of characters,
and text in a fixed-width font (usually Courier).
● The size of a text area can be specified by the cols and
rows attributes, or even better; through CSS' height and
width properties.
● <p> Address</p>
● <textarea name=”address” rows="4" cols="50">
● </textarea>
●
● Address:-
Unit -3
Java Script
• JavaScript is the scripting language of the Web.
• JavaScript is used in billions of Web pages to add functionality,
validate forms, communicate with the server.
Sum Age
• JavaScript is loosely based on Java and it is built into all the major
modern browsers.
• JavaScript is a scripting language produced by Netscape for use
within HTML Web pages.
• JavaScript is a lightweight, interpreted programming language

with object-oriented capabilities that allows you to build
interactivity into static HTML pages.
• Using javaScript HTML can include programs that interact with
the user, control the browser, and dynamically create HTML
content.
• The JavaScript code is executed when the user submits the form,
and only if all the entries are valid they would be submitted to the
Web Server.
Advantages of JavaScript:
• The merits of using JavaScript are:
• Less server interaction: You can validate user input before
sending the page to the server. This saves server traffic, which
means less load on your server.
Javascript Validation
• Immediate feedback to the visitors: They don't have to wait for a

page reload to see if they have forgotten to enter something.
• Richer interfaces: You can use JavaScript to include such items as
drag-and-drop components and sliders to give a Rich Interface to
your site visitors.
• Speed. Client-side JavaScript is very fast because it can be

run immediately within the client-side browser
• Simplicity. JavaScript is relatively simple to learn and
implement.
• Popularity. JavaScript is used everywhere on the web.
• Interoperability. JavaScript plays nicely with other

languages and can be used in a huge variety of
applications.
Limitations with JavaScript:
• We can not treat JavaScript as a full fledged programming
language. It lacks the following important features:
• Client-side JavaScript does not allow the reading or writing of
files. This has been kept for security reason.
• JavaScript can not be used for Networking applications because
there is no such support available.
• JavaScript doesn't have any multithreading or multiprocess
capabilities.
Language Elements
JavaScript support the following language Element such as

• Identifiers,
• Expressions,
• Keywords,
• Operators,
• Statements,
• Functions.
Identifiers
• An identifier is simply a name. In JavaScript, identifiers are used to
name variables and functions and to provide labels for certain
loops in JavaScript code.
• The rules for legal identifier names are the same in JavaScript as
they are in Java and many other languages.
• The first character must be a letter, an underscore (_), or a dollar
sign ($).
• The Subsequent characters may be any letter or digit or an
underscore or dollar sign.
var num1 = 5;
var $num2= 6;
Expressions
• Expression return the result of a calculation.
• Two things make up a mathematical expression: operands
(numbers, strings, or variables) and operators. When you add two
numbers using a calculator, the numbers are the operands, and
the plus sign (+) is the operator. Likewise, the minus (-),
multiplication (*), and division signs (/) are operators.
• In most cases, you assign the result of a mathematical expression
to a variable so that you can recall the result later.
Example of expression
• 8 + 4 Adds 8 and 4, returning 12 as a result.
• 2 * 3 + 1 Multiplies 2 by 3 and adds 1, returning 7 as a result.
• 3 + 2 * 5 Multiplies 2 by 5 because the multiplication operator
has a higher order of precedence and adds 3, returning 13 as a
result.
• (3 + 2) * 5 Adds 3 to 2 because they're grouped together in
parentheses and multiplies by 5, returning 25 as a result.
• x = 1 + 2 Adds 1 and 2, storing the results in a variable called x.
• x = y + 2 Adds 2 to the value stored in y and assigns the result to
a variable called x.
Types of Expression
• Arithmetic Expression
• Boolean Expressions
• Conditional Expression
Boolean Expressions
• Boolean expressions are used to make decisions.
• They always evaluate to one of two values: True or False.
• The following are some examples that use comparison operators:
• 2 < 3 The result is True because 2 is indeed less than 3.
• 4 > 5 The result is False because 4 is not greater than 5.
• 4 <= 4 The result is True because 4 is less than or equal to 4.
• x < 10 The result is True if x is any value less than 10; otherwise,
the result is False.
• y = x The result is True if y and x contain the same value;
otherwise, the result is False.
• The following are some examples of logical Expression:
• 2 < 3 And 4 > 5 Returns False because this expression evaluates to
True And False.
• 1 > 0 And 4 < 5 Returns True because this expression evaluates to
True And True.
• 2 < 3 Or 4 > 5 Returns True because this expression evaluates to
True Or False.
• x < 0 And y > 0 Returns True if x is negative and y is positive.
• x Or y Returns True if either variable contains a True value.
• The following example If...Then..Else statement written in
JavaScript. The condition is x < 3. If that condition is True, the
interpreter executes the first alert statement. If that condition is
False, the interpreter executes the second alert statement.
• if( x < 3 )
• alert( "x was less than 3" );
• else
• alert( "x was equal to 3 or greater" );
Keywords
• Keywords are the word which have predefined meaning.
• Keywords are words that is reserved for JavaScript for its own
use.
• keywords are not used as object, function names, variable names
or methods.
• The following keywords are available in JavaScript
1. break
• Breaks out of the current loop, switch, or labeled statement.
2. condition ? ifTrue : ifFalse
• Evaluates an expression, and does the first statement if the
expression is true, or the second statement if the expression is
false.
3. delete
• Deletes an object, a property of an object, or an element in an
array at the specified index.
4. do...while
• Acts as a loop that continues to execute the do This statement till
the while expression is true.
5. export
• Allows properties, functions, and objects from one script to be
accessed by other scripts.
6 for
• Executes a loop so that while expression A is true, executes
statement A and then evaluates expression B, then executes
statement B if expression B is true.
6. function
• Declares a function.
7. if...else
• If the expressionA is true, executes statementA. If the expression
is false, evaluates expressionB.
8. new
• Creates an instance of an object type that has a constructor
function.
9. return
• Specifies the value to be returned by a function.
10 switch
• Evaluates an expression, and executes the statement(s)
associated with the appropriate case for the value of the
expression.
11. void
• Evaluates the specified expression without returning a value.
12 while
• Executes a statement while the specified expression is true.
• Operator:- Java script allow the following operator
Operator Category Operator Description
Arithmetic Operators + Adds 2 numbers.
++ Increment by 1
- Subtracts 2 numbers.
-- Decrement by 1
* Multiplies 2 numbers.
/ Divides 2 numbers.
% Computes the integer remainder of
dividing 2 numbers.
Comparison == Returns true if the operands are equal.

Operators
!= Returns true if the operands are not equal.
> Returns true if left operand is greater than

right operand.
>= Returns true if left operand is greater than
or equal to right operand.
< Returns true if left operand is less than

right operand.
<= Returns true if left operand is less than or
equal to right operand.
Logical operators && (Logical AND) Returns true if both logical

operands are true. Otherwise, returns
false.
|| (Logical OR) Returns true if either logical
expression is true. If both are false, returns
false.
! (Logical negation) If its single operand is
true, returns false; otherwise, returns true.
Bitwise Operator & (Bitwise AND) Returns a one in each bit

position if bits of both operands are ones.
^ (Bitwise XOR) Returns a one in a bit

position if bits of one but not both
operands are one.
| (Bitwise OR) Returns a one in a bit if bits of
either operand is one.
Assignment Operator = Assigns the value of the second operand to

the first operand.
+= Adds 2 numbers and assigns the result to
the first.
-= Subtracts 2 numbers and assigns the result
to the first.
*= Multiplies 2 numbers and assigns the
result to the first.
/= Divides 2 numbers and assigns the result
to the first.
%= Computes the modulus of 2 numbers and
assigns the result to the first.
• JavaScript Statements
• JavaScript is a sequence of statements to be executed by the
browser.
• JavaScript statements are "commands" to the browser. The
purpose of the statements is to tell the browser what to do.
• Each statement is executed by the browser in the sequence they
are written.
• JavaScript statements can be grouped together in blocks.
• Blocks start with a left curly bracket, and end with a right curly
bracket.
The Following statements are used in java script
• The if statement
• Iterative statements
• Labeled statements
• The break and continue statements
• The switch statement
• The if statement has the following syntax:
if (condition)
statement1
else
statement2
• If the condition evaluates to true, statement1 is executed;
• if the condition evaluates to false, statement2 is executed
Example
Var A,B
if (A < B)
{
Document.write(A is less than B)
}
Else
{
Document.write(A is Greater than or Equal to B)
}
Iterative statements
• Iterative statements, also called loop statements, specify certain
commands to be executed repeatedly until some condition is met
do-while
In do while loop the body of the loop is always
executed at least once before the expression is evaluated.
Syntax:
do {
statement
} while (expression);
var i=0
do
{
document.write(i)
i++
} while (i<10);
Output:- 0 1 2 3 4 5 6 7 8 9
2. while
• The while statement is a pretest loop. This means the evaluation
of the escape condition is done before the code inside the loop
has been executed.
Syntax:
while(expression)
statement
Example
Var i=0
while( i<10)
{
document.write(i)
}
0 1 2 3 4 5 6 7 8 9
3. for
• The for statement is also a pretest loop
• Syntax:
• for (initialization; expression; post-loop-expression)
{
statement
}
Example
var iNum = 0;
for (var i=1; i < 10; i++)
{
document.write(i+"<br />")
}
Output 01 2 3 4 5 6 7 8 9
The break and continue statements
• The break and continue statements provide stricter control over
the execution of code in a loop.
• The break statement exits the loop immediately, preventing any
further repetition of the code while the continue statement exits
the current repetition. It does, however, allow further repetition
based on the control expression.
For example:
var iNum = 0;
for (var i=1; i < 10; i++)
{
if (i % 5 == 0) {
break;
}
alert(i);
var iNum = 0;
for (var i=1; i < 10; i++) {
if (i % 5 == 0) {
continue;
}
iNum++;
}
alert(iNum); //outputs “8”
Here, the alert displays “8”, the number of times the loop has
been executed. The total number of times that the loop can
possibly be executed is 9, but when i reaches a value of 5, the
continue statement is executed, causing the loop to skip the
expression iNum++ and return to the top
The switch statement
The switch statement, allows a developer to provide a series of
cases for an expression.
The syntax for the switch statement is:

switch (expression)
{
case value: statement
break;
case value: statement
break;
default: statement
}
<html>
<body>
<h2>JavaScript switch</h2>
<p id="demo"></p>
<script>
var x = 0; Off
switch (x) {
case 0:
text = "Off";
break;
case 1:
text = "On";
break;
default:
text = "No value found";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
JavaScript Functions
• A function can be executed by an event, like clicking a button.
• A function is a block of code that executes only when you tell it to
execute.
• It can be executed when an event occurs, like when a user clicks a
button, or from a call within your script, or from a call within
another function.
• Functions can be placed both in the <head> and in the <body>
section of a document.
Syntax
function functionname()
{
some code
}
<html>
< head>
< script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
< body>
< button onclick="myFunction()">Try it</button>
</body>
</html>
The above Code display the following result
Object of Java Scripts:-
• Everything" in JavaScript is an Object: a String, a Number, an
Array, a Date.
• An object is just a special kind of data, with properties and
methods.
Properties:
Methods:
name=Fiat
start()
model=500
drive()
weight=850kg
brake()
color=white
Objects in Real Life:
• If a car is an object:
• The properties of the car include name, model, weight, color,
etc.
• All cars have these properties, but the values of those
properties differ from car to car.
• The methods of the car could be start(), drive(), brake(), etc.
• All cars have these methods, but they are performed at
different times.
Java Script contain the following object
• Window Object
• Document Object
• Forms Objects
• Text Boxes
• Text Areas
• Buttons
• Radio Buttons
• Check Boxes,
• The Select Object
Window Object
1. The window object represents an entire browser window
• The window object represents an open window in a browser.
• If a document contain frames (<frame> or <iframe> tags), the
browser creates one window object for the HTML document,
and one additional window object for each frame.
S.N. Properties Description
1 Closed Returns a Boolean value indicating whether a

window has been closed or not
2 defaultStatus Sets or returns the default text in the statusbar of a
window
3 document Returns the Document object for the
window
4 history Returns the History object for the window
5 location Returns the Location object for the window
6 name Sets or returns the name of a window
7 innerHeight Returns the height of the window's
content area (viewport) including
scrollbars
8 innerWidth Returns the width of a window's content
area (viewport) including scrollbars
9 length Returns the number of frames in a window
S.N. Method Description
1 alert() Displays an alert box with a message and an OK

button
2 blur() Removes focus from the current window
3 close() Closes the current window
4 confirm() Displays a dialog box with a message and an OK and
a Cancel button
5 focus() Sets focus to the current window
6 open() Opens a new browser window
7 print() Prints the content of the current window
8 resizeBy() Resizes the window by the specified pixels
9 prompt() Displays a dialog box that prompts the
visitor for input
10 stop() Stops the window from loading
Document object.
• Each HTML document loaded into a browser window becomes

a Document object.
• The document is a part of the window object and can be
accessed as window.document.
• The Document object has various properties and
methods that allow to access and modification of
document content.
Window Object
Document Object
HTML
Document
If you want to access any element in an HTML page,
you always start with accessing the document object.
The document object is the root node of the HTML

document.
Document object properties
1 activeElement Returns the currently focused element in

the document
2 body Sets or returns the document's body (the
<body> element)
3 URL The URL property returns the full URL of
the current HTML document.
4 anchors The anchors collection returns a
collection of all <a> elements in the
document that have a name attribute.
5 form The forms collection returns a collection
of all <form> elements in the document.
6 image The images collection returns a collection
of all <img> elements in the document.
S.N. Methods Description
1
getElementByI The getElementById() method returns
d() the element that has the ID attribute
with the specified value.
2 The createElement() method creates an
createElement(
) Element Node with the specified name.
3 write() The write() method writes HTML
expressions or JavaScript code to a
document.
4 writeln() The writeln() method is identical to the
document.write() method, with the
addition of writing a newline character
after each statement.
5 Remove an HTML element
Form Object
• The Form object represents an HTML form.
• For each <form> tag in an HTML document, a Form object is
created.
• Forms are used to collect user input, and contain input
elements like text fields, checkboxes, radio-buttons, submit
buttons and more. A form can also contain select menus,
textarea, fieldset, and label elements.
• Forms are used to pass data to a server.
1
action Sets or returns the value of the action attribute in a
form
2
enctype Sets or returns the value of the enctype attribute in
a form
3
length Returns the number of elements in a form
4 Sets or returns the value of the method

method
attribute in a form
5
name Sets or returns the value of the name attribute in a
form
6
target Sets or returns the value of the target attribute in a
form
S.N. Method Description
1 reset() Resets a form
2 submit() Submits a form

Text fields object
• The Text object represents a single-line text input field in an

HTML form.
• For each <input type="text"> tag in an HTML form, a Text
object is created.
• You can access an <input> element with
type="text" by using getElementById():
First Name:
Create an Input Text Object
You can create an <input> element with type="text"
by using the document.createElement() method:
<script>
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("value", "Hello World!");
document.body.appendChild(x);
</script>
Text Object Properties

1
value Sets or returns the default value of
a text field
2
disabled Sets or returns whether the text
field is disabled, or not
3
form Returns a reference to the form
that contains the text field
4
maxLengt Sets or returns the maximum
h number of characters allowed in a
text field
5
pattern Sets or returns the value of the
pattern attribute of a text field
6
placeholde Sets or returns the value of the
r placeholder attribute of a text field
Text Object Properties
7 readOnly Sets or returns whether a text

field is read-only, or not
8 required Sets or returns whether the text
field must be filled out before
submitting a form
9 size Sets or returns the value of the
size attribute of a text field
10 type Returns which type of form
element a text field is
11 autocomple Sets or returns the value of the
te autocomplete attribute of a text
field
12 autofocus Sets or returns whether a text
Text Object Methods
S.N. Methods Description

1 Select() Selects the content of a text field
Textarea Object
• The Textarea object represents a text-area in an HTML form.
• For each <textarea> tag in an HTML form, a Textarea object is
created.
Textarea Object properties
1 Sets or returns whether a text area

autofocus
should automatically get focus when the
page loads
2 Sets or returns the value of the cols
cols
attribute of a text area
3 Sets or returns whether the text area is
disabled
disabled, or not
4 Sets or returns the value of the
maxLengt
h maxlength attribute of a text area
5 Sets or returns the name of a text area
name
5
placeholde Sets or returns the value of the
r placeholder attribute of a text area
6 Sets or returns whether the contents of a
readOnly
text area is read-only
7 require Sets or returns whether the text

d area must be filled out before
submitting a form
8 rows Sets or returns the value of the
rows attribute of a text area
9 type Returns the type of the form
element the text area is
10 value Sets or returns the contents of a
text area
11 wrap Sets or returns the value of the
wrap attribute of a text area
12 form Returns a reference to the form
that contains the text area
• Textarea Object Method
Method Description
select() Selects the entire contents of a text area

Button Object
• The Button object represents a clickable button in an HTML
form.
• A button is often used to activate a JavaScript when a user
clicks on it.
• For each instance of an <input type="button"> tag in an HTML
form, a Button object is created.
Save
Button Object Properties
S.n Property Description
1 autofoc Sets or returns whether a
us button should automatically get
focus when the page loads, or
not
2 disabled Sets or returns whether a
button is disabled, or not
3 form Returns a reference to the form
that contains a button
4 name Sets or returns the value of the
name attribute of a button
5 type Sets or returns the type of a
button
6 value Sets or returns the value of the
Radio Object
• The Radio object represents a radio button in an HTML form.
• Radio buttons allow the user to select only ONE of a predefined
set of options.
• For each <input type="radio"> tag in an HTML form, a Radio
object is created.
Radio Object Properties
S.no. Property Description

1 autofocus Sets or returns whether a radio
button should automatically get focus
when the page loads
2 checked Sets or returns the checked state of a
radio button
3 disabled Sets or returns whether the radio button is
disabled, or not
4 form Returns a reference to the form that contains
the radio button
5 name Sets or returns the value of the name attribute
of a radio button
6 type Returns which type of form element the radio
button is
7 value Sets or returns the value of the value attribute
of the radio button
8. required Sets or returns whether the radio
button must be checked before
Checkbox Object
• The Checkbox object represents a checkbox in an HTML form.
• In Checkboxes user select one or more options of choices.
• For each instance of an <input type="checkbox"> tag in an
HTML form, a Checkbox object is created.
Checkbox Object Properties
S.n Property Description

o.
1 autofocus Sets or returns whether a checkbox
page loads
2 checked Sets or returns the checked state of a
checkbox
3 disabled Sets or returns whether a checkbox is disabled, or
not
4 form Returns a reference to the form that contains the
checkbox
5 name Sets or returns the value of the name attribute of
a checkbox
6 type Returns which type of form element the checkbox
is
7 value Sets or returns the value of the value attribute of a
checkbox
8 required Sets or returns whether the checkbox
Select Object
• The Select object represents a dropdown list in an HTML form.
• In dropdown list user select one or more options from the
given choice.
• For each <select> tag in an HTML form, a Select object is
created.
Select Object Properties
S.N Property Description

1 autofocus Sets or returns whether a drop-down list
page loads
2 disabled Sets or returns whether the dropdown list is disabled, or
not
3 form Returns a reference to the form that contains the
dropdown list
4 length Returns the number of options in a dropdown list
5 multiple Sets or returns whether more than one item can be
selected from the dropdown list
6 name Sets or returns the name of a dropdown list
7 selectedIn Sets or returns the index of the selected option in a
dex dropdown list
8 size Sets or returns the number of visible options in a
dropdown list
Select Object Properties
S.N Property Description

9 type Returns which type of form element a dropdown list is
10 value Sets or returns the value of the selected

option in a drop-down list
Select Object Methods
S.N Methods Description

1 add() Adds an option to a drop-down list
2 remove() Removes an option from a drop-down list

Date Object
• The Date object is used to work with dates and times.
Date objects are created with new Date().
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
Date Object Properties
S.No Property Description

1 Returns the function that created the Date
construc object's prototype
2
tor Allows you to add properties and methods to
prototyp an object
e
• Date Object Methods
S.No Methods Description
1 getFullYear() Get the year as a four digit

number (yyyy)
2 getMonth() Get the month as a number
(0-11)
3 getDate() Get the day as a number (1-
31)
4 getHours() Get the hour (0-23)
5 getMinutes() Get the minute (0-59)
6 getSeconds() Get the second (0-59)
7 getMilliseconds() Get the millisecond (0-999)
• Date Object Methods
S.N Methods Description
o
8 getTime() Get the time (milliseconds since
January 1, 1970)
2 getDay() Get the weekday as a number
(0-6)
3 Date.now() Get the time
JavaScript Math Object
• The Math object allows you to perform mathematical tasks.
• Math is not a constructor. All properties/methods
of Math can be called by using Math as an object,
without creating it:
Math Object Properties
Property Description
Example
1. PI Returns PI (approx. 3.14) Math.PI;
2. SQRT1_2 Returns the square root of

1/2 (approx. 0.707)
Math.SQRT1_2;
3. SQRT2 Returns the square root of

Math.SQRT2;
2 (approx. 1.414)
Math Object Methods
Methods Description
1. abs(x) Returns the absolute value of x
Example
x= -10 ---> Maths.abs(x) -----> 10
2. floor(x) Returns x, rounded downwards to the

nearest integer
Example
x= 1.4 ---------> Maths.floor(x) ---- 1
3. ceil(x) Returns x, rounded upwards to the

nearest integer
x=1.4
ceil(x) ---------> Maths.ceil(x) -------- 2
Math Object Methods
Methods Description
4. max(x, y, z, ..., n) Returns the number with
the highest value
Example
Math.max(20,45,60,10,50) ----- > 60
5. min(x, y, z, ..., n) Returns the number with

the lowest value
Example
Math.min(20,45,60,10,50) ----- > 10
6. pow(x, y) Returns the value of x to the power of y

Example
Math.pow(4,3) ----- > 64
Math Object Methods
Methods Description
7. random() Returns a random number between 0 and 1
Example
Math.random() ----- > 0.30969614797148415
8. round(x) Rounds x to the nearest

integer
Example
x= 3.6 y = 3.4 z =3.5
Math.round(x) ----- > 4
Math.round(y) ----- > 3
Math.round(z) ----- > 4
Math Object Methods
<html>
<body>
<p>Click the button to round the number its nearest integer.</p>
<button onclick="myFunction()">Round The Number</button>
<p id="demo"></p>
<script>
function myFunction() {
var x =3.4
document.getElementById("demo").innerHTML = Math.round(x);
}
</script>
</body>
</html> 3
String Object
• The String object is used to manipulate a stored piece of text.
• String objects are created with new String().
Properties of String objects
Property Description
constructor Returns the string's constructor function
length Returns the length of a string
prototype Allows you to add properties and methods to

an object
String object Methods
Method Description
1. charAt() Returns the character at the specified

index (position)
Example
var str = "HELLO WORLD";
var res = str.charAt(0)
output
H
Method Description
2. concat() Joins two or more strings, and returns a

new joined
strings
Example
var str1 = "Hello ";
var str2 = "world!";
var res = str1.concat(str2);
output
Hello world
Method Description
3.endsWith() Checks whether a string ends with

specified
string/characters
Example
var str = "Computer Science Engineering";
var n = str.endsWith("Engineering");
output
true
Method Description
4. fromCharCode() Converts Unicode values to

characters
Example
var res = String.fromCharCode(65);
output
A
Method Description
5. includes() Checks whether a string

contains the specified
string/characters
Example
var str = "18049C0401";
var n = str.includes("C04");
output
True
Method Description
6. indexOf() Returns the position of the first

found occurrence
of a specified value in a string
Example
var str = "18049C0401";
var n = str.indexOf("C04");
output
5
Method Description
7. match() Searches a string for a match against a

regular
expression, and returns the matches
Example
var str = "18049C0401";
var n = str.match("\C04\g");
output
C04
Method Description
8. repeat() The repeat() method returns a new string with

a specified
number of copies of the string it was called
on.
Example
var str = "Hello world!";
Output
Hello world!Hello world!
Method Description
9.replace() Searches a string for a specified value, or a

regular expression,
and returns a new string where the specified
values are
replaced
Example
str= “Welcome Indore”
var res = str.replace("Indore", "Bhopal");
Output
Welcome Bhopal
Method Description
10 slice() Extracts a part of a string and

returns a new string
Example
var res = str.slice(0, 5);
Output
Hello
Method Description
11 split() Splits a string into an array of

substrings
Example
var str = "Welcome Indore";
var res = str.split(" ");
Output
Welcome,Indore
Method Description
12 startsWith() Checks whether a string begins

with specified
characters
Example
var str = "Hello world, welcome to the universe.";
var n = str.startsWith("Hello");
Output
true
Method Description
13 substr() Extracts the characters from a string,

beginning at a
specified start position, and through
the specified
number of character
Example:-
var res = str.substr(1, 4);
regular expression
• A regular expression is a sequence of characters that forms a
search pattern.
• The search pattern can be used for text search and text replace
operations.
• A regular expression can be a single character, or a more
complicated pattern.
Modifiers
• Modifiers are used to perform case-insensitive and global
searches:
S.No Modifier Description

1 i Perform case-insensitive matching
2 g Perform a global match (find all matches
rather than stopping after the first match)
3 m Perform multiline matching

Brackets
• Brackets are used to find a range of characters:
1. [ABC] Find any character between the brackets
2. [^ABC] Find any character not between the brackets
3 [0-9] Find any digit from 0 to 9

4 [A-Z] Find any character from uppercase A to uppercase
Z
5 [a-z] Find any character from lowercase a to lowercase
z
6 [A-z] Find any character from uppercase A to lowercase
z
Arrays
• The Array object is used to store multiple values in a single
variable.
• If you have a list of items (a list of student’s rollno, for
example), storing the in single variables could look like
this:
rollno1=1002
rollno2=1004
rollno3=1005
rollno4=1008
In this way , if we have 100 roll no then we have to

specify 100 variables
An array can hold many values under a single name, and

you can access the values by referring to an index
number.
Creating an Array
Syntax:
var array_name = [item1, item2, ...];
var roll_no=[1002,1004,1005,1008];
We can also create Array Using the JavaScript Keyword new

var roll_no=new array(1002,1004,1005,1008);
Access the Elements of an Array
You access an array element by referring to the index

number.
This statement accesses the value of the first element in

roll_no :
<p id="demo"></p>
<script>
var roll_no = [1002,1004,1005,1008];
document.getElementById("demo").innerHTML =
roll_no[0]; Note: Array indexes start with 0.
</script> [0] is the first element. [1] is the

second element.
Output
Access the Full Array
With JavaScript, the full array can be accessed by

referring to the array name:
<p id="demo"></p>
<script>
var roll_no = [1002,1004,1005,1008];
document.getElementById("demo").innerHTML = roll_no;
</script>
Output
1002,1004,1005,1008
Array Object Properties

1 Returns the function that created the Array
object's prototype
2 Sets or returns the number of elements in
an array
3 Allows you to add properties and methods
to an Array object
• Array Object Methods
S.No Methods Description

1 Joins two or more arrays, and returns a copy
of the joined arrays
2 Search the array for an element and returns
it's position
3 Search the array for an element, starting at
the end, and returns it's position
4 Removes the last element of an array, and

returns that element
5 Adds new elements to the end of an array,
and returns the new length
6 Reverses the order of the elements in an
array
indexOf() : -Search the array for an element and returns
its position
var fruits = ["Banana", "Orange", "Apple",

"Mango"];
var a = fruits.indexOf("Apple");
Output
2
isArray()
Checks whether an object is an array

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
</script>
Output
true
join()
Joins all elements of an array into a string

<script>
x.innerHTML = fruits.join();
}
</script>
Output
Banana,Orange,Apple,Mango
lastIndexOf()
Search the array for an element, starting at the end, and

returns its position
<script>
var a = fruits.lastIndexOf("Apple");
x.innerHTML = a;
</script> output- 02
pop()
Removes the last element of an array, and returns that

element
<script>
document.getElementById("demo").innerHTML = fruits;
fruits.pop();
}
</script>
push()
Adds new elements to the end of an array, and returns

the new length
<script>
fruits.push("Kiwi");
}
</script>
output ----> Banana,Orange,Apple,Mango,Kiwi

UNIT-IV
DHTML
• DHTML stands for Dynamic HTML.
• DHTML is a TERM used to describe the technologies used to
make web pages dynamic and interactive.
• DHTML combines HTML, JavaScript, DOM, and CSS.
• DHTML is often used to make rollover buttons or drop-down
menus on a web page.
• disadvantages of DHTML are that it is difficult to develop and
debug due to varying degrees of support among web
browsers of the technologies involved.
Static vs. Dynamic HTML
● Static HTML once ● on the other hand
rendered cannot be dynamic HTML can be
changed changed.
● Static web pages cannot ● dynamic pages can be
have database access. connected to database.
● Using static HTML no ● dynamic HTML has
interactions persist capability to interact with
between user and server the user.
● Static HTML does not ● dynamic HTML requires
require server side coding server side coding
● No animation, games can ● on the other hand
be developed using the dynamic HTML can
static HTML perform this task.
●
• The DOM defines a standard for accessing and manipulating
HTML documents.
• DOM is platform- and language-independent.
• Advantages:-
• 1. Fast : - DHTML loads content on fly. Your whole page does
not loads but only the content part that needs to be altered,
so saving the crucial time for the users.
• 2. Plug-ins:- DHTML uses most of the features already present
in the browsers, so there is no need to download any sort of
Plug-ins.
• 3. Great Utility:- The dynamic features are compact looks,
have graphic effects, downloads fast, provides greater
functionality and can hold much more text or content all at
the same time.
• Disadvantages:-
• 1. Costly Editing tools: - although dHTML provides great
functionality but the editors' available for that in market are
expensive.
• 2. Long and Complex coding: - dHTML coding is long and
complex. Only the expert Javascript and HTML programmers
can write them and edit them with good degree of
functionality.
• 3. Browser Support problems: - dHTML suffers from browser
support problems for different browsers. For example, a code
written for Netscape might not work in Internet Explorer and
Vice-Versa. The problem arises due to the different features of
browsers.
•
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS) : –
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0
• Cascading Style Sheets (CSS) is a simple mechanism for adding
style such as fonts, colors, spacing to Web documents.
• CSS can improve content accessibility, provide more flexibility and
enable multiple pages to share formatting, and reduce complexity
and repetition in the structural content
CSS Coding
• A CSS Coding has two main parts: a selector, and one or more
declarations:
Selector Declaration
h1 {Color :Blue;Font-size:12px}
Property Value
• The selector is normally the HTML elements(tags) you want to
style.
• Each declaration consists of a property and a value.
• The property is the style attribute you want to change. Each
property has a value.
•
CSS Example
• A CSS declaration always ends with a semicolon, and
declaration groups are surrounded by curly brackets:
• Example
• p
• {<html>
<head>
• color:red;
<style>
• p
text-align:center;
{
} color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
Output
Hello World!
This paragraph is styled with CSS.
Properties of Text
• Text is styled with some of the text formatting properties.
• There are different text properties are available in CSS
1. Text Color
• The color property is used to set the color of the text.
• With CSS, a color is most often specified by:
✔ a HEX value - like "#ff0000"
✔ an RGB value - like "rgb(255,0,0)"
✔ a color name - like "red"
Example
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.{color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. </p>
</body>
</html>
2. Text Alignment
• The text-align property is used to set the horizontal alignment
of a text.
• Text can be centered, or aligned to the left or right, or justified.
• When text-align is set to "justify", each line is stretched so that
every line has equal width, and the left and right margins are
straight
Example
h1 {text-align:center;}
p.date {text-align:right;}
• p.main {text-align:justify;}
3. Text Decoration
• The text-decoration property is used to set or remove
decorations from text.
• The text-decoration property is mostly used to remove
underlines from links for design purposes:
• Example
• a {text-decoration:none;}
•
It can also be used to decorate text:
Example
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
4.Text Transformation
• The text-transform property is used to specify uppercase and
lowercase letters in a text.
• It can be used to turn everything into uppercase or lowercase
letters, or capitalize the first letter of each word.
Example
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Property Values of CSS
• In CSS there are different property value is available
Text property
S No Properties Values Examples
1 font-family family-name Arial, Time

Roman
2 font-size (pt), (px), (percent) pt is Point, i.e.
12pt.
Color/Background Properties
1 background- (color), transparent Color is in
color hex code.
2 background- none, (location)
image
3 background- (percent), (length),
position top, center, bottom,
left, center, right
Property Values
Box Properties
1 margin-bottom (length), (percent), auto Length is in pixels.
2 margin-top (length), (percent), auto Length is in pixels.

List properties
1 list-style-type disc, circle, square, decimal,
2 list-style-position outside, inside
3 list-style-image none, (url)

Property Values
Visual Effects
1 clip auto, (shape)

2 outline-width medium, thin, thick, (length),
inherit
3 outline-style none, dotted, dashed, solid,
double, groove, ridge, inset,
outset
Tables property
1 border-collapse collapse, separate, inherit
2 caption-side top, bottom, left, right, inherit
3 empty-cells show, hide, inherit

Three Ways to Insert CSS
• There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
External Style Sheet

• An external style sheet is used when the style is applied to
many pages.
• With an external style sheet, you can change the look of an
entire Web site by changing one file.
• Each page must link to the style sheet using the <link> tag.
• The <link> tag goes inside the head section:
• An external style sheet can be written in any text editor. Your
style sheet should be saved with a .css extension.
Internal Style Sheet
• An internal style sheet should be used when a single document
has a unique style. You define internal styles in the head section
of an HTML page, by using the <style> tag
Inline Styles
• An inline style loses many of the advantages of style sheets by
mixing content with presentation.
• To use inline styles you use the style attribute in the relevant tag.
The style attribute can contain any CSS property.
• Inline style sheets is used to style the current element and you
can only apply the style to the instance you want the style to
apply .
• The example shows how to change the color and the left margin
of a paragraph:
< p style="color:red;margin-left:20px">This is a paragraph.</p>

Embedded Style Sheet
• Embedded Style Sheets refer to when you embed style sheet
information into an HTML document using the <style> element.
You do this by embedding the style sheet information within
<style></style> tags in the head of your document.
Syntax of Embedded Style Sheet
• The CSS syntax for embedded style sheets is exactly the same as
other CSS code.
• For example, to use the following code, simply place it between
the <head></head> tags of your HTML document:
• this method can only specify style information for the current
document.
Example
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.{color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. </p>
</body>
</html>
Grouping Selectors
• In style sheets there are often elements with the same style.
• h1
• {
• color:green;
• }
• h2
• {
• color:green;
• }
• p
• {
• color:green;
}
• To minimize the code, you can group selectors.
• Separate each selector with a comma.
• In the example below we have grouped the selectors from the
code above:
Example
h1,h2,p
{
color:green;
}
• Inheritance
• Some styles, like font family, text-alignment etc., are
automatically inherited by child elements from their parent
element.
• Others are not automatically inherited.
The id and class Selectors

• In addition to setting a style for a HTML element, CSS allows you
to specify your own selectors called "id" and "class".
The class Selector
• The class selector is used to specify a style for a group of
elements.
• The class selector is most often used on several elements.
• This allows you to set a particular style for many HTML elements
with the same class.
• The class selector uses the HTML class attribute, and is defined
with a "."
• In the example below, all HTML elements with class="c1" will be
center-aligned:
• Example
• .c1 {text-align:center;}
The id Selector
• The id selector is used to specify a style for a single, unique
element.
• The id selector uses the id attribute of the HTML element, and is
defined with a "#".
• The style rule below will be applied to the element with
id="para1":
• Example
• #para1
• {
• text-align:center;
• color:red;
Contextual Selector
• <html>
• <head>
• <style>
• pb
• {
• color:red;
• }
• </style>
• </head>
• <body>
• <p><b>Welcome</b></p>
pseudo-classes
• CSS pseudo-classes are used to add special effects to some
selectors.
• Syntax
• The syntax of pseudo-classes:
• selector:pseudo-class {property:value;}
Example
a:link {color:green;} /* unvisited link */
a:visited {color:blue;} /* visited link */
a:hover {color:red;} /* mouse over link */
a:active {color:yellow;} /* selected link */
pseudo-elements
• CSS pseudo-elements are used to add special effects to some
selectors.
Syntax
• The syntax of pseudo-elements:
selector:pseudo-element {property:value;}
• The "first-line" pseudo-element is used to add a special style to

the first line of a text.
• In the following example the browser formats the first line of
text in a p element according to the style in the "first-line"
pseudo-element
Example
p:first-line
{
color:red;
font-variant:small-caps;
}
Positioning
• The CSS positioning properties allow you to position an element.
• Elements can be positioned using the top, bottom, left, and right
properties.
• There are different positioning methods
1. Static Positioning
Static is the default position for any element on a Web page. If
you don't define the position, it will be static and will display on
the screen based on where it is in the HTML document and
how it would display inside the normal flow of the document.
• If you apply positioning rules like top or left to an element that
has a static position, those rules will be ignored.
2. Fixed Positioning
• An element with fixed position is positioned relative to the
browser window.
• It will not move even if the window is scrolled:
• Fixed positioned elements can overlap other elements.
3. Relative Positioning
• A relative positioned element is positioned relative to its normal
position.
• The content of relatively positioned elements can be moved and
overlap other elements, but the reserved space for the element
is still preserved in the normal flow.
4. Absolute Positioning
• An absolute position element is positioned relative to the first
parent element
• Absolutely positioned elements can overlap other elements.
• In Absolute position element should be removed from the
normal flow of the document and will be placed in an exact
location on the page.
CSS Background
• CSS background properties are used to define the background
effects of an element.
CSS properties used for background effects:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
Background Color
• The background-color property specifies the background color
of an element.
• The background color of a page is defined in the body selector:
• Example
• body {background-color:#b0c4de;}
Background Image
• The background-image property specifies an image to use as the
background of an element.
• By default, the image is repeated so it covers the entire element.
• The background image for a page can be set like this:
• Example
• body {background-image:url('paper.gif');}
• background-repeat
• The background-repeat property specifies the
repeation of image.
• Repeat
• The image is repeated both horizontally and
vertically.
•
• repeat-x
The image is repeated horizontally only.
repeat-y
• The image is repeated vertically only.
•
• no-repeat
• If a background-image is specified, the background-
attachment CSS property determines whether that image's
position is fixed within the viewport, or scrolls along with its
containing block.
• background-attachment: scroll
• background-attachment: fixed
• The background-position property sets the starting position of
a background image
CSS Dimension
• The CSS dimension properties allow you to control the height
and width of an element.
• CSS Dimension Properties
Property Description Values

Sets the height of an element Auto
length
%
inherit
Sets the maximum height of an none

element length
%
inherit
Sets the maximum width of an none

element length
%
inherit
Property Description Values
Sets the minimum height of an length
element %
inherit
Sets the minimum width of an length
element %
inherit
Sets the width of an element auto
length
%
inherit
• DHTML Document Object Model and Collections
• The Document Object Model is a platform that will allow
programs and scripts to dynamically access and update the
content, structure and style of documents
• The HTML DOM defines a standard way for accessing and
manipulating HTML documents.
• The DOM presents an HTML document as a tree-structure.
DHTML Object Model
window
document all
frames document anchors
history document applets
navigator body
plugins
location embeds
event filters
screen forms
images
Ke links
y
object plugins
collection scripts
styleSheets
Fig. 13.10 DHTML Object

Model.
DOM Object
DOM Collection
DOM Collection
• DHTML Event
• Event:- An event is an action detected by the program.
• Events can be user actions, such as
• When a user clicks the mouse
• When a web page has loaded
• When an image has been loaded
• When the mouse moves over an element
• When an input field is changed
• When an HTML form is submitted
• When a user strokes a key
• Event handler:- A function or routine written in a scripting

language that receives control when the event corresponding to
the handler occurs.
DHTML EVENT Handler
Event Handler Event

onabort a user aborts page loading
onblur a user leaves an object
onchange a user changes the value of an object
onclick a user clicks on an object

ondblclick a user double-clicks on an object
onfocus a user makes an object active
onkeydown a keyboard key is on its way down
onkeypress a keyboard key is pressed
onkeyup a keyboard key is released
Event Handler Event
onload a page is finished loading. Note: In
Netscape this event occurs during the
loading of a page!
onmousedown a user presses a mouse-button
onmousemove a cursor moves on an object
onmouseover a cursor moves over an object
onmouseout a cursor moves off an object
onmouseup a user releases a mouse-button
onreset a user resets a form
onselect a user selects content on a page
onsubmit a user submits a form
onunload a user closes a page
Assigning Event Handlers
Event handling has been part of JavaScript
• The two traditional ways of assigning event handlers
• 1. Via HTML, using attributes
• We can define an event handler directly inside the relevant
HTML tag, by embedding it as a attribute. A piece of JavaScript is
also included to tell the browser to perform something when
the event occurs.
<html>
< body>
<button onclick="document.write(Date())“>Today’s Date</button>
< /body>
• < /html>
2 Via scripting
• You can also assign and set up event handlers to elements using
scripting, and inside your script . This allows for the event
handlers to be dynamically set up, without having to mess
around with the HTML codes on the page.
• When setting up event handlers for an element directly inside
your script, the code to execute for the events must be defined
inside a function.
<html>
<body>
<button onclick="displayDate()">Today's Date
</button>
<script>
Function displayDate()
{
document.write(Date())
}
</script>
</body>
</html>
Event bubbling.
• standard Visual Basic programming, where each object must
have its own unique event handler, objects in Dynamic HTML
can share event handlers. When an event occurs on a child
object, the event can travel up the chain of hierarchy within the
page until it encounters an event handler to process the event.
This process is called event bubbling.
• The following figure shows the process of event bubbling.
Event Bubbling Process

• In this picture, the diagram displays a portion of the structure of
an HTML page within a DHTML application. The top level is the
Document object, which contains the HTML page. The Body
element is the top-level tag in the HTML page. Within the body
is a table, and within the table is a hyperlink. In a sense, the
hyperlink can be said to be the child of the table, which is in turn
a child of the body tag, and so forth.
<html>
<body>
<button onclick="displayDate(event)">Today's Date
</button>
<script>
Function displayDate(e)
{
document.write(Date())
Alert(e.bubbles)
}
</script>
</body>
</html>
visual Filters
• Alpha
• Adjusts the opacity of the content of the object.
•
•
•
• Blur
• Blurs the content of the object so that it appears out of focus.
• Chroma
• Displays a specific color of the content of the object as
transparent.
• Compositor
• Displays new content of the object as a logical color combination
of the new and original content.
• Glow
• Adds radiance around the outside edges of the content of the
object so that it appears to glow.
● Invert filter:-Invert filter effect is used to map the colors of
the object to their opposite values in the color spectrum.
● Grayscale:- Change the color of all images to black and
white :
● Brightness(%) :- Adjusts the brightness of the image.
● 0% will make the image completely black.
● 100% (1) is default and represents the original image.
● Values over 100% will provide brighter results.
● Contrast(%) :- Adjusts the contrast of the image.
● 0% will make the image completely black.
● 100% (1) is default and represents the original image.
● Values over 100% will provide results with less contrast.
• Matrix
• Resizes, rotates, or reverses the content of the
object using matrix transformation.
• Shadow
• Creates a Shadow the content of the object,
• Wave
• Performs a sine wave distortion of the content
of the object along the vertical axis.
• Transitions
• Fade
• content of the object is fading out the original
content.
• Blinds
• content of the object with a motion that
appears to open or close blinds.
• CheckerBoard
• content of the object is uncovering squares
placed like a checkerboard over the original
content.
• RadialWipe
• content of the object with a radial wipe, like a
windshield-wiper blade.
• RandomBars
• content of the object is exposing random lines
of pixels.
• Strips
• content of the object is moving successive
strips into place, like a diagonal saw blade
passing across the original content.
• Wheel
• content of the object with a rotating motion,
like spokes of a wheel covering the original
content.
Filtering a Tabular Data Control
Besides sorting it, a Tabular Data Control can
also be filtered, meaning the data can be
displayed selectively depending on the value of
the columns. For example, you may wish to
only show the first 5 students within a list of
student records, or only students with a grade
of 80% or higher. The ability to control how
much information gets displayed at once in a
TDC is very useful.
Unit-V
XML Basics
• XML stands for Extensible Mark-up Language
• XML is a mark-up language much like HTML
• XML was designed to carry data, not to display data
• XML tags are not predefined. You must define your own tags
• XML is designed to be self-descriptive
• XML data is stored in plain text format.
• This provides a software- and hardware-independent way of
storing data.
• With XML, data can easily be exchanged between
incompatible systems.
• XML Simplifies Platform Changes
• XML Makes Your Data More Available
• The syntax rules of XML are very simple and logical. The rules
are easy to learn, and easy to use.
• With XML, data can be stored in separate XML files.
• A lot of new Internet languages are created with XML.
• XML documents form a tree structure that starts at "the root"
and branches to "the leaves".
The Difference Between XML and HTML
HTML XML
1. HTML was designed to 1. XML was designed to
display data transport and store data
2. HTML is a markup 2. XML provides a framework
language itself for defining markup
languages.
3. HTML is a presentation 3. XML is neither a
language programming language
nor a presentation
4. HTML is not case sensitive
language.
4. XML is case sensitive .
5.
6.
HTML XML
5. HTML is used for designing 5. XML is used basically to
a web-page on the client transport data between
side the application and the
database
6. HTML has it own predefined 6. XML flexible is that custom
tags tags can be defined and
the tags are invented by
the author of the XML
document.
7. XML makes it mandatory for
7. HTML is not strict if the user the user the close each tag
does not use the closing that has been used.
tags
HTML XML
8. HTML does not preserve 8. XML preserves white space
white space . .
9. HTML is about displaying 9. XML is about carrying
data, hence static information, hence
dynamic.
Syntax of the XML Document
• The syntax rules of XML are very simple and logical. The rules
are easy to learn, and easy to use.
1. All XML Elements Must Have a Closing Tag
2. <p>This is a paragraph.</p>
2. XML Tags are Case Sensitive
• XML tags are case sensitive. The tag <Letter> is different from
the tag <letter>.
• Opening and closing tags must be written with the same case:
<Message>This is incorrect</message>
< message>This is correct</message>
3. XML Elements Must be Properly Nested
• In XML, all elements must be properly nested within each
other:
< b><i>This text is bold and italic</i></b>

4. XML Documents Must Have a Root Element
• XML documents must contain one element that is the parent
of all other elements. This element is called the root element.
< root>
<child>
<subchild>.....</subchild>
</child>
< /root>
5. XML Attribute Values Must be Quoted
• In XML, the attribute values must always be quoted.
<note date="12/11/2007">
< to>John</to>
< from>jony</from
< /note>
6. Entity References
• Some characters have a special meaning in XML.
• If you place a character like "<" inside an XML element, it will
generate an error because the parser interprets it as the start
of a new element.
• This will generate an XML error:
< message>if salary < 1000 then</message>
• To avoid this error, replace the "<" character with an entity

reference:
< message>if salary < 1000 then</message>

• There are 5 predefined entity references in XML:
< < less than

> > greater than
& & ampersand
' ' apostrophe
" " quotation mark
7. Comments in XML
• The syntax for writing comments in XML is similar to that of
HTML.
• 
8. White-space is Preserved in XML

• XML Attributes
• Attributes provide additional information about an element.
• An attribute specifies a single property for an element, using a
name/value pair.
• Example
• <person name=“ram">
• Every attribute assignment consists of two parts: the attribute
name (for example, name), and the attribute value (for
example, ram).
• There are a few rules to remember about XML attributes:
1. Attribute names in XML (unlike HTML) are case sensitive:
2. You may not provide two values for the same attribute in the
same start tag. The following example is not well-formed
because the b attribute is specified twice:
• <a b="x" c="y" b="z">....</a>
3. Attribute names should never appear in quotation marks, but
attribute values must always appear in quotation marks in XML
Problems with using attributes are:
• Attributes cannot contain multiple values
• Attributes cannot contain tree structures
• Attributes are not easily expandable
Unit-8
Publishing The Site
• Uploading Web pages
• You can upload HTML files to your site to share for download.
• To make your pages visible to the world. You need to upload
your web pages to your web host.
• Uploading can be perform in two ways Using FTP and Web
Page Editors
Web page uploading using FTP
• FTP stands for File Transfer Protocol.
• The best way to upload your web site is using FTP.
• You will need the IP address of your web host, your username
and your password.
• FTP programs allow you to see your files on the web host.
Steps for uploading file using FTP
1. Most graphical operating systems have a browser installed by
default.
2. The basic idea is to first establish a connection with server
and your computer and then upload the files. This will transfer
your website to the servers so that others can view your site
on the internet.
3. Open your web browser and enter ftp address of the website
in the address bar.
4. You will be prompted to enter the password for this account.
5. Once you successfully login you will see a listing of the files in
your website on our server.
6. You can now drag or copy files from your local computer into
this folder to upload files to our server or drag or copy files
from this folder to your local computer to download files off
your website.
• Uploading Web pages - using Web Page Editors
• After you have created your pages with your editor, you'll need
to upload your web site files, including all pages and images, to
your Server.
• You can upload files to File Manager using our Easy Upload
utility.
• To upload files to your File Manager with Easy Upload:
1. Open Easy Upload by clicking the "Easy Upload" link on the
Create & Update of your Web Hosting Control Panel,then
selecting the "Upload Files" link in the upper-right corner of
the File Manager.
2. Click the first "Browse..." button to locate a file on your
computer's hard drive. (Use the "Choose file" dialog to browse
for and select a file.)
3 Repeat step 2 for each file you'd like to upload. If you want to
upload more than five files, change the value of the "Number
of Files to Upload:" menu and click the corresponding "Display"
button. The total size of the files may not exceed 5MB.
4. If you like Easy Upload to automatically convert all of your file
names into lowercase (recommended), select the
corresponding checkbox near the bottom of the page.
5. If you'd like Easy Upload to convert all instances of the .htm
extension in your files to .html, select that corresponding
checkbox.
6. When you're ready to upload your files, choose the "Upload
Files" button.
On the following page, you should see a confirmation that
your file(s) have been uploaded successfully.
• Web hosting
• There are many choices available for Domain Registration and
Hosting Services.
• A web hosting is a type of service that allows individuals and
organizations to make their website accessible via the
World Wide Web .
• Web hosts are companies that provide space on a server
owned for use by clients, as well as providing Internet
connectivity.
Shared hosting Running a Local Web server
• A shared web hosting service or virtual hosting
service or derive host refers to a web hosting service where
many websites reside on one web server connected to the
Internet. Each site "sits" on its own partition, or section/place
on the server, to keep it separate from other sites. This is
generally the most economical option for hosting, as many
people share the overall cost of server maintenance.
• Shared Hosting is one of the most popular web hosting plan
among bloggers and webmasters because it permits to host
more than one web site on the same server and it is useful for
small websites and also for static websites.
• Shared hosting normally provides you a web-based control
panel system, such as cPanel, Direct Admin, and includes
some of the features like file manager, email accounts,
webmail, email forwarding and autoresponders, FTP access,
password-protected directories, database and much more.
Advantages of Shared Web Hosting
1. Cheap and affordable
2. Convenience and good for small sites
3. Fast Setup and easily customizable
4. Extremely Good Support and Maintenance.
5. Includes features such as ASP, PHP, MySQL, large bandwidth
and multiple e-mail address capability.
6. Shared hosting is very cheap in comparison to other hosting
plans like Dedicated or VPS.
7. You don’t required high technical capabilities to maintenance
the server, each account have a very simple, user friendly
admin control panel, where users can easily manage their
Disadvantages of Shared Hosting
• Low Security Level
• Non-dedicated IP
• Resource limitation – everybody uses the same memory, CPU
and Hard drive
• System Crashes or Server Overload Issues.
• Performance Issues
• Risk of Cross Contamination
• When any user website is draining lots of resources, hosting
company tends to suspend such account in order to preserve
other websites.

Web Technology

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technology

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGY

वेब, इंटरनेट के माध्यम पर जानकारी प्राप्त करने का एक तरीका है।

• It is an information-sharing model that is built on top of the

वेब दस्तावेज़ों में ग्राफिक्स, ध्वनियाँ, टैक्स और वीडियो भी होते हैं।

• A Web page on the World Wide Web normally begins by

• The Web browser then initiates a series of communication

• First, the server-name portion of the URL is resolved into an

• This IP address is necessary to contact and send data packets

• The browser translates the data it has been given in to HTML

HTML Javascript CSS

• Web technologies provide the interface between web servers

• Web pages may consist of static text or dynamic pages.

Web publishing, or "online publishing," is the process of

Hierarchical Linear Webbed

● It can be a graphic sketch or an actual graphic design. The

• Hierarchical Organization: This organizational pattern is

• HTML stands for Hyper Text Mark-up Language

• It provides a means to create structured documents by

denoting structural semantics for text such as headings,

paragraphs, lists etc as well as for links, quotes, and other

HTML TUTORIAL HTML tags

list 1. HTML tags HTML tag is an instruction

create interactive forms. It is written in the form of HTML elements

consisting of "tags" surrounded by angle brackets within the web

page content. <html>

• HTML is not a programming language, it is a mark-up language

• A mark-up language usage set of mark-up tags .

page in order to display the page on your screen.

• The <!DOCTYPE> declaration must be the very first thing in your

therefore the (-) is used.

HTML Document External Resource

• Rel:- Specifies the relationship between the current document

<h2>I am formatted with a p

The HTML <base> tag supports the following attributes −

charset character_set Specifies the character encoding

http-eq content-security- Provides an HTTP

<p>All meta information goes in the head section...</p>

< p >This is a paragraph</p> This is a paragraph

< p>This is another paragraph</p> This is another paragraph

● <b> - Bold text

• Bold - <b> </b>:- The HTML <b> element defines bold

<b> My first web Page </b> My first web Page

• strong - <strong> </strong>:-The HTML <strong> element

<strong> stands for semantically emphasized text,

<u> My first web Page </u> My first web Page

• italic - <i> </i>:- The HTML <i> element defines italic

<i> My first web Page </i> My first web Page

• The HTML <em> element defines emphasized text.

<em> My first web Page </em> My first web Page

• The HTML <i> element defines italic text.

<i> My first web Page </i> My first web Page

• The HTML <mark> element defines text that should

<p>Diploma Theory exam is Diploma Theory exam is

• The HTML <small> element defines smaller text:

<p>This is some normal

• The HTML <del> element defines text that has been

● The HTML <ins> element defines a text that has

<p>My favorite color is <del> blue My favorite color is blue red.

• The HTML <sub> element defines subscript text.

● he HTML <sup> element defines superscript text.

Superscript text appears half a character above the

• Font Colour <font color= red"> </font>

<p><font color= red"> This This is a paragraph

Centre :- <center> </center>

' ' ' single quotation

£ £ £ pound

€ € € euro

© © © copyright

® ® ® registered

<p>Salary of " John "