DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Unit 1:- Introduction

client server communication:-

Clients

A client is whatever you’re using to interact with the internet. It’s the web browser you’re
using to read this page. The web browser on your computer is one client, the web
browser on your phone is another client. There are other types of clients (like watching
Netflix or listening to Spotify), but we’ll focus on web browsers for now.

One important property of a client is that they run locally on your computer (or phone,
or game console). When we talk about “client-side”, or something that happens “in the
client”, we mean it happens on your computer. This distinction will become important
when we start talking about servers.

Servers

A server is a computer that responds to requests by serving responses.

How does a server respond to a request for a URL?

At a high level, there are two types of content:

 Static content that doesn’t change much. The tutorials at HappyCoding.io are an
example of this type of content. When you view them, you see the same thing as
everybody else, and they don’t change much over time. Other types of files like
images are often static as well.
 Dynamic content that changes over time, or based on who’s viewing the page.
For example, the content of stackoverflow.com changes every time somebody
posts a question. Your Twitter feed is unique to you, based on who you follow
and what they’ve posted.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Requests and Responses

Now we know that a client is a web browser that renders HTML and runs JavaScript
locally. Where does that HTML and JavaScript come from?

This content generally comes from a URL like happycoding.io/index.html or google.com.

When you type a URL into the address bar of your web browser, your web browser
sends a request to that URL, and the server sends back a response that contains the
content at that URL.

World Wide Web Communication

The World Wide Web is about communication between web clients and web servers.

Clients are often browsers (Chrome, Edge, Safari), but they can be any type of
program or device.

Servers are most often computers in the cloud.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

What is HTTP?

HTTP stands for Hyper Text Transfer Protocol

WWW is about communication between web clients and servers

Communication between client computers and web servers is done by sending HTTP
Requests and receiving HTTP Responses

HTTP Request / Response

Communication between clients and servers is done by requests and responses:

1. A client (a browser) sends an HTTP request to the web

2. A web server receives the request
3. The server runs an application to process the request
4. The server returns an HTTP response (output) to the browser
5. The client (the browser) receives the response

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

File transfer protocol (FTP)

 File transfer protocol (FTP) is a set of rules that computers follow for the
transferring of files from one system to another over the internet. It may be used
by a business to transfer files from one computer system to another, or websites
may use FTP to upload or download files from a website's server

 Using FTP allows you to transfer multiple directories at one time. If you regularly
transfer files, you know how advantageous this feature can be. Instead of
sending single files or even single directories at a time, you can send numerous
directories all at once

World Wide Web

The World Wide Web is a system for displaying text, graphics, and audio retrieved
over... A hypertext document with its corresponding text and hyperlinks is written in
HyperText Markup Language (HTML) and is assigned an online address called a
Uniform Resource Locator (URL)

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

World Wide Web, which is also known as a Web, is a collection of websites or web
pages stored in web servers and connected to local computers through the internet.
These websites contain text pages, digital images, audios, videos, etc. Users can
access the content of these sites from any part of the world over the internet using their
devices such as computers, laptops, cell phones, etc. The WWW, along with internet,
enables the retrieval and display of text and media to your device.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

How the World Wide Web Works?

Now, we have understood that WWW is a collection of websites connected to the

internet so that people can search and share information. Now, let us understand how it
works!

The Web works as per the internet's basic client-server format as shown in the following
image. The servers store and transfer web pages or information to user's computers on
the network when requested by the users. A web server is a software program which
serves the web pages requested by web users using a browser. The computer of a user
who requests documents from a server is known as a client. Browser, which is installed
on the user' computer, allows users to view the retrieved documents.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Difference between World Wide Web and Internet:

Some people use the terms 'internet' and 'World Wide Web' interchangeably. They think
they are the same thing, but it is not so. Internet is entirely different from WWW. It is a
worldwide network of devices like computers, laptops, tablets, etc. It enables users to
send emails to other users and chat with them online. For example, when you send an
email or chatting with someone online, you are using the internet.

But, when you have opened a website like google.com for information, you are using
the World Wide Web; a network of servers over the internet. You request a webpage
from your computer using a browser, and the server renders that page to your browser.
Your computer is called a client who runs a program (web browser), and asks the other
computer (server) for the information it needs.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Unit 2 :- Web Design

An effective website design

An effective website design should fulfil its intended function by conveying its particular
message whilst simultaneously engaging the visitor. Several factors such as
consistency, colours, typography, imagery, simplicity and functionality all contribute to
good website design.

When designing a website there are many key factors that will contribute to how it is
perceived. A well designed website can help build trust and guide visitors to take action.
Creating a great user experience involves making sure your website design is optimised
for usability (form and aesthetics) and how it easy is it to use (functionality).

Below are some guidelines that will help you when considering your next web project.

1. WEBSITE PURPOSE
What is the purpose of your website? Are you imparting practical information like a ‘How
to guide’? Is it an entertainment website like sports coverage or are you selling a
product to the user? There are many different purposes that websites may have but
there are core purposes common to all websites;

1. Describing Expertise
2. Building Your Reputation
3. Generating Leads
4. Sales and After Care

2. SIMPLICITY
Simplicity is the best way to go when considering the user experience and the usability
of your website. Below are ways to achieve simplicity through design.

3. NAVIGATION
Navigation is the way finding system used on websites where visitors interact and find
what they are looking for. Website navigation is key to retaining visitors

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

4. F-SHAPED PATTERN READING

The F- based pattern is the most common way visitors scan text on a website. Eye
tracking studies have found that most of what people see is in the top and left area of
the screen.

5. VISUAL HIERARCHY
Visual hierarchy is the arrangement of elements is order of importance. This is done
either by size, colour, imagery, contrast, typographically, whitespace, texture and style.

6. CONTENT
An effective web design has both great design and great content

7. GRID BASED LAYOUT

Grids help to structure your design and keep your content organised. The grid helps to
align elements on the page and keep it clean.

8 LOAD TIME
Waiting for a website to load will lose visitors. Nearly half of web visitors expect a site to
load in 2 seconds or less and they will potentially leave a site that isn’t loaded within 3
seconds.

9. MOBILE FRIENDLY
More people are using their phones or other devices to browse the web. It is important
to consider building your website with a responsive layout where your website can
adjust to different screens.

Brower :-

The definition of a browser is a software program used to view websites or files. An

example of a browser is Firefox. ... Also known as Web browser. A client software
program that runs against a Web server or other Internet server and enables a user to
navigate the World Wide Web (WWW) to access and display data.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Mobile browsers
 Amazon Silk.
 Apple Safari.
 Brave.
 Dolphin browser.
 Google Chrome.
 Microsoft Edge.
 Mozilla Firefox.
 Opera Mobile.

Cache memory:- is an extremely fast memory type that acts as a buffer

between RAM and the CPU. It holds frequently requested data and instructions so that
they are immediately available to the CPU when needed. Cache memory is used to
reduce the average time to access data from the Main memory

Cache memory is a chip-based computer component that makes retrieving data from
the computer's memory more efficient. It acts as a temporary storage area that the
computer's processor can retrieve data from easily. This temporary storage area, known
as a cache, is more readily available to the processor than the computer's main memory
source, typically some form of DRAM.

Cache memory is sometimes called CPU (central processing unit) memory because it is
typically integrated directly into the CPU chip or placed on a separate chip that has a
separate bus interconnect with the CPU. Therefore, it is more accessible to the
processor, and able to increase efficiency, because it's physically close to the
processor.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Bandwidth :- bandwidth is expressed as a bitrate and measured in bits per second

(bps). The term bandwidth refers to the transmission capacity of a connection and is an
important factor when determining the quality and speed of a network or
the internet connection. There are several different ways to measure bandwidth.

Bandwidth describes the maximum data transfer rate of

a network or Internet connection. It measures how much data can be sent over a
specific connection in a given amount of time. For example, a
gigabit Ethernet connection has a bandwidth of 1,000 Mbps (125 megabytes per
second). An Internet connection via cable modem may provide 25 Mbps of bandwidth.

display resolution :- The display resolution or display modes of a digital

television, computer monitor or display device is the number of distinct pixels in each
dimension that can be displayed

One use of the term display resolution applies to fixed-pixel-array displays such
as plasma display panels (PDP), liquid-crystal displays (LCD), Digital Light
Processing (DLP) projectors, OLED displays, and similar technologies, and is simply the
physical number of columns and rows of pixels creating the display (e.g. 1920 × 1080)

Page layout :- Page layout refers to the arrangement of text, images, and other
objects on a page. The term was initially used in desktop publishing (DTP), but is now
commonly used to describe the layout of WebPages as well. ... The page layout of a
printed or electronic document encompasses all elements of the page

What is a sitemap?

A sitemap is a file where you provide information about the pages, videos, and other
files on your site, and the relationships between them. Search engines like Google read
this file to more intelligently crawl your site. A sitemap tells Google which pages and
files you think are important in your site, and also provides valuable information about
these files: for example, for pages, when the page was last updated, how often the page
is changed, and any alternate language versions of a page.

You can use a sitemap to provide information about specific types of content on your
pages, including video and image content. For example:

PROF. YOGESH DESHMUKH www.dacc.edu.in

 DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

A sitemap video entry can specify the video running time, category, and age-
appropriateness rating.
A sitemap image entry can include the image subject matter, type, and license.

You might need a sitemap if:

Your site is really large. As a result, it's more likely Google web crawlers might overlook
crawling some of your new or recently updated pages.
Your site has a large archive of content pages that are isolated or not well linked to
each other. If your site pages do not naturally reference each other, you can list them in a
sitemap to ensure that Google does not overlook some of your pages.
Your site is new and has few external links to it. Googlebot and other web crawlers
crawl the web by following links from one page to another. As a result, Google might not
discover your pages if no other sites link to them.
Your site has a lot of rich media content (video, images) or is shown in Google
News. If provided, Google can take additional information from sitemaps into account for
search, where appropriate.

You might not need a sitemap if:

Your site is "small". By small, we mean about 500 pages or less on your site. (Only pages
that you think need to be in search results count toward this total.)
You're on a simple site hosting service like Blogger or Wix. If your site is on a service
that helps you set up a site quickly with pre-formatted pages and navigation elements, your
service might create a sitemap for your site automatically, and you don't need to do
anything. Search your service's documentation for the word "sitemap" to see if a sitemap is
generated automatically, or if they recommend creating your own (and if so, how to submit
a sitemap on your hosting service).
Your site is comprehensively linked internally. This means that Google can find all the
important pages on your site by following links starting from the homepage.
You don't have many media files (video, image) or news pages that you need to appear
in the index. Sitemaps can help Google find and understand video and image files, or news
articles, on your site, if you want them to appear in Google Search results. If you don't need
these results to appear in Image, Video, or News results, you might not need a sitemap.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Web navigation :- refers to the process of navigating a network of information

resources in the World Wide Web, which is organized
as hypertext or hypermedia The user interface that is used to do so is called a web
browser.
Website navigation (a.k.a., internal link architecture) are the links within your website
that connect your pages. The primary purpose of website navigation is to help users
easily find stuff on your site.

Search engines use your website navigation to discover and index new pages. Links
help search engines to understand the content and context of the destination page, as
well as the relationships between pages.

What Is the Look and Feel of a Website?

In web development, it takes time to briefly explain business needs and features
regarding the look and feel of a website to allows that everybody is on the same page
earlier web development work starts.

The “look and feel” of a website or portion of software designates its entrance and
functionality. People may use this period to discuss how website appearances and how
it feels to steer it. The term can be used for any boundary, but it is often used in telling
websites.

Lo ok and F eel of a Web sit e?

In its most common terms, the “look and feel” of a website is in what way the site looks
to the user and just how it feels once he or she is cooperating through it.

The “look” is defined by the following workings of your website:

– Color themes

– Images

– Design

– Font size and style

– Complete designing

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Why is t he L oo k and F eel of a W ebsit e Impo rtant ?

Your website’s overall look and feel is significant because it rapidly conveys an attitude
to your customers before they even start an interpretation of the content on the site.
Before you start a website rewrite, check your areas against business standards by
looking at your participants’ websites. A capability website should look new, powerful
and well planned. A website for a group of a fashion designer can be more creative with
colors, surface and pictures choices.

Ho w to Use “Lo o k an d Feel” t o Improv e Y o ur W eb Desi gn

Look and feel can be defined using adjectives just like you would define a friend or
business assistant. By using exact adjectives, you can support the team at your
selected web development company in their layout and plan choices before they
existing their work to you.

T ips to I mprov e Lo ok an d F eel of a Web sit e

Keep the Layout Simple

The modest way to start a plan is to draft out an idea before you exposed any tool such
as Photoshop or Canva. Set sketch to paper or create a wireframe in software such
as OmniGraffle or Balsamic. A blueprint is where you work out all the facts about
functionality or outline before you start the project in Photoshop or other design
software. With a plan for a house, you would control where the holes and doors will go
and work from it. A wireframe is the same object for a website. Determine wherever
each piece of content will go on to each website page before starting your website
design.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Keep Your Design Balanced

Balance is all around ensuring that your plan does not tip to one side or the other. It is
similar to the balance of bulk in achieving symmetry or asymmetry.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Design Website Using Grids

The impression of grids is strictly related to that of stability. Grids are a sequence of
horizontal and vertical leaders that help you “classify” a design. Think of columns.
Columns expand readability, creating a leaf’s content calmer to engage. Space and the
custom of the Rule of Thirds make all easier on the eye.

Choose A Color Theme

Color is the primary place we use this material. Color can help carry a mood or a
sensation. The designer wants to be mindful of national differences as well when
making global websites because colors that mean one gadget in the United States can
mean something entirely different in another nation.

Create Graphics

great design doesn’t require decorative graphics. But poor graphics will certainly hurt a
plan. Graphics add to the pictorial message. Websites like Web Designer Wall have
imposing illustrations, while others are understated.

Improve Website Typography

The art of type is a complicated subject to a conversation about typography because it

covers so many fundamentals. While it can be observed as a division of design, one
can spend a lifetime understanding all of its features.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Unit 3:- HTML

What is HTML?

 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

A Simple HTML Document

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML
documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display
the document:

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

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

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Try it Yourself »

TAGS:-

• <TAGS> tages are divided into 2 types

1) Paired tag:-<html > </html>

2) Single tag:-

• <br>

• <hr>

• <li>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

The <!DOCTYPE> Declaration

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

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

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

<!DOCTYPE html>

<html>

<body>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

</html>

HTML Paragraphs

The HTML <p> element defines a paragraph.

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

<!DOCTYPE html>

<html>

<body>

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

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

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

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as
a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

<!DOCTYPE html>

<html>

<body>

<h1>This is heading 1</h1>

<p>This is some text.</p>

<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

HTML Line Breaks

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph

HTML <pre> Element

The HTML <pre> element defines preformatted text.

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

<!DOCTYPE html>

<html>

<body>

<p>The pre tag preserves both spaces and line breaks:</p>

<pre>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

</body>

</html>

Physical Tags :

Definition : Physical tags are used to indicate exactly how specific characters are
to be formatted.

Logical Tags :

Definition : Logical tags are used to indicate to the visually impaired that there is
some emphasizes on the text. Each browser has its own technique as to how to
indicate to its viewer that the text between the tags are different.

HTML Formatting Elements

Formatting elements were designed to display special types of text:

 <b> - Bold text

 <strong> - Important 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

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<html>

<head>

<TITLE> this is my first page</title>

</head>

<body bgcolor="yellow">

<h1>Web -Technology</h1>

<h2> Web -Technology</h2>

<h3> Web -Technology</h3>

<font face="book antiqua" size="12" color="red">

<p> computer is an electronic machine in which we input the data

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

computer processing it and gives output to the user.</p>

<hr>

</font>

<font face="book antiqua" size="12" color="green">

this is my second line<br>

this is my third line

</font> </body></html>

computer processing it and give output to the user</p>

i am not wel<br>

i am not going to college

<h1> list of fruits</h1>

<ol type="i">

<li>apple

<li> banana

<li>graps

</ol>

<h1> list of vigitable </h1>

<ul >

<li type="disc">patato

<li type ="square">ginger

<li type="circle">palak

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

</ul>

<font face="arial" >

<hr>

Table tag:-

Definition of table tag <table>

• The HTML <table> eletent represents tabular data — that is, information
presented in a two-dimensional table comprised of rows and columns of cells
containing data.

• The <table> tag defines an HTML table.

• An HTML table consists of the <table> element and one or more <tr>, <th>,
and <td> elements.

Caption tag:-

The <caption> tag defines a table caption

The <caption> tag must be inserted immediately after the <table> tag.

SYNTAX:- <CAPTION>……………</CAPTION>

ATTRIBUTES IN Caption

<html>

<head>

<title>table</title>

</head>

<body bgcolor="yellow">

<font face="arial" color="blue" size="12">

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<marquee behavior="alternate" bgcolor="pink" > welcome to table world</marquee>

</font >

<center>

<font face="arial" color="#red" size=12>

<table border=12 cellspacing="55" cellpadding="7" bordercolor="red">

<tr>

<td>rollno

<td>name</td>

<td>marks</td>

</tr>

<tr>

<td> 101</td>

<td>yogesh</td>

<td>420</td>

</tr>

</font>

</center>

</table>

</body></html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Colspan

<html>

<head>

<title>table</title>

</head>

<body bgcolor="yellow">

<center>

<font face="arial" size=18 color="red">

<table border="9" bordercolor="silver" size=33>

<tr>

<th>rollno</th>

<th colspan=3 > total practical marks</th>

<th rowspan=2> total</th>

</tr>

<tr>

<td> </td>

<td>viva</td> <td>theory</td> <td>practical</td>

</tr>

</font>

</center>

</table>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

HTML LINKING (concept)

* The real power of HTML is its ability to link to other documents

And pieces of text , images, video or audio.

* Links are usually highlighted or underlined in a documents so that we know their

existence.

* Clicking on the link opens up the documents for viewing.

* Web page can contain links that directly goes to other pages

And even specific parts of given page.

* LINK is a connection from one web resource to another .

A link has two ends ,an Anchor and Direction .

* The LINKS starts at the ((Source)) anchor and points to the ((Destination)) anchor.
These LINKIS are called as hyperlinks.

<html>

<head>

<title > ddd</title>

</head>

<body bgcolor="yellow">

<a href= "D:\tybba(ca)-5th sem-web technology\HTML\table1.html" >

click me to link another page </a><br> <hr><br>

<br><hr>

<a href="D:\sybba(ca)_3rd_sem_PHP\angular js\angu1.html"> click me to open angular

gs file </a>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<a href="https://www.youtube.com"> click here to open </a><br>

<a href="https://www.facebook.com"> click here to open face book </a><br>

<a href="https://www.dacc.edu.in"> click here to open college </a>

//here <a> </a> is the anchor tag, it is used to link the page and doucment .....//

//it also link the another web site .//

</body>

</html>

HYPER LINKS

*HYPER LINKS allow visitors to navigate between websites by clicking on words,

phrases, and images .

*Thus , we can create hyper links using text or images available on our any web pages.

* A HYPER LINK (OR LINK) is a word, group of words, or image that we can click on to
jump to a new document or new section within the current document.

HYPER LINKS

• HTML Links - The target Attribute

• By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.

• The target attribute specifies where to open the linked document.

• The target attribute can have one of the following values:

• _self - Default. Opens the document in the same window/tab as it was clicked

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

• _parent - Opens the document in the parent frame

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

•
PROF. YOGESH DESHMUKH www.dacc.edu.in
DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

• Example

* When we move the cursor over a link in a web page, the arrow will turn in to a little
hand.

• Links are specified in HTML using the

< Anchor tag >

• The < Anchor tag > are use in two ways

I. To create a link to another documents by using href attribute

II. To create a book mark inside a document by using name attribute

Syntax :

< a href =“document URL ”> text link </a>

syntax explanation :

href : is the attribute use to specify the destination address of the link used.

text link : is the visible part of the link .

<!DOCTYPE html>

<html>

<body>

<h2>The target Attribute</h2>

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

<p>If target="_blank", the link will open in a new browser window or tab.</p>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

HTML Form

The <input> Element

One of the most used form element is the <input> element.

The <input> element can be displayed in several ways, depending on the type attribute

1. text :-- accept the any text in intput box..

2. readio button :- accept the only 0 and 1 value

We can select only one option out of given option

3. checkbox :- accept only true or false we can select more then one option out of
given option

4. List :- it is use to give the list wise data to the user…

5. textarea:- it is used to give the show the input box with multiple rows and column.

6. password :- it is used with text , when we use to hide the text matter …

7. submit (button ):- it is used to submit the button ( accept the data) to upload.

8. Reset (button) :- it is used to reset the button ( cancel the data) to upload

example of forms

<html>

<head>

<title>form</title>

</head>

<body bgcolor="yellow">

<center>

<b><i>

<font face="arial" size="8" color="green">

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<marquee behavior="alternate" direction="right" bgcolor="pink" width="300" height="50"

>yog.com </marquee>

</b></i>

</center>

<left>

<font face="arial" size=8 color="red">

<form>

<h2>

a)NAME:-<TEXTAREA ROWS="2" COLS="45"> </TEXTAREA><BR>

b)ADDRESS:-<input type="text" name="r1"> <br>

c)STATUS:-<input type="radio" name="sname" value="r1">MALE

<input type="radio" name="sname" value="r1">FEMELE <br>

d) CITY:- <select name="CITY">

<option value="1" selected="r1"> Akola

<option value="2"> wardha

<option value="3"> nagpur

<option value="4"> balapur

<option value="5">bhopal

</select><br>

(e) What is your faverate program<br>

<input type="checkbox" name="sname">Big Boss

<input type="checkbox" name="sname">news

<input type="checkbox" name="sname"> 9xm<br>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<input type="checkbox" name="sname">pavitra rishta<br>

</form>

</left></body>

</html>

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

<!DOCTYPE html>

<html>

<body>

<h1>HTML Links</h1>

<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in
the href attribute.

A local link (a link to a page within the same website) is specified with a relative
URL (without the "https://www" part):

<!DOCTYPE html>

<html>

<body>

<h2>Absolute URLs</h2>

<p><a href="https://www.w3.org/">W3C</a></p>

<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>

<p><a href="html_images.asp">HTML Images</a></p>

<p><a href="/css/default.asp">CSS Tutorial</a></p>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

<!DOCTYPE html>

<html>

<body>

<h2>Image as a Link</h2>

<p>The image below is a link. Try to click on it.</p>

<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial"

style="width:42px;height:42px;"></a>

</body>

</html>

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source.

<!DOCTYPE html>

<html>

<body>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<p>Browsers usually indent blockquote elements.</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">

For nearly 60 years, WWF has been protecting the future of nature. The world's leading
conservation organization, WWF works in 100 countries and is supported by more than
one million members in the United States and close to five million globally.

</blockquote>

</body>

</html>

HTML <cite> for Work Title

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a
movie, a painting, a sculpture, etc.).

HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

HTML Colors
Background Color

You can set the background color for HTML elements:

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<p style="background-color:Tomato;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.

</p>

</body>

</html>

RGB Color Values

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

rgb(red, green, blue)

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

This means that there are 256 x 256 x 256 = 16777216 possible colors!

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

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>

<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>

<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>

<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>

<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

</body>

</html>

=================================================================

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>

<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Block-level Elements

A block-level element always starts on a new line.

A block-level element always takes up the full width available (stretches out to the left
and right as far as it can).

A block level element has a top and a bottom margin, whereas an inline element does
not.

<!DOCTYPE html>

<html>

<body>

<div style="border: 1px solid black">Hello World</div>

<p>The DIV element is a block element, and will always start on a new line and take up
the full width available (stretches out to the left and right as far as it can).</p>

</body>

</html>

Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

This is a <span> element inside a paragraph.

<!DOCTYPE html>

<html>

<body>

<p>This is an inline span <span style="border: 1px solid black">Hello World</span>

element inside a paragraph.</p>

<p>The SPAN element is an inline element, and will not start on a new line and only
takes up as much width as necessary.</p>

</body>

</html>

The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of
content:

HTML class Attribute

The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class

Using The class Attribute

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

The class attribute is often used to point to a class name in a style sheet. It can also be
used by a JavaScript to access and manipulate elements with the specific class name.

In the following example we have three <div> elements with a class attribute with the
value of "city". All of the three <div> elements will be styled equally according to
the .city style definition in the head section:

<!DOCTYPE html>

<html>

<head>

<style>

.city {

background-color: tomato;

color: white;

border: 2px solid black;

margin: 20px;

padding: 20px;

</style>

</head>

<body>

<div class="city">

<h2>London</h2>

<p>London is the capital of England.</p>

</div>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<div class="city">

<h2>Paris</h2>

<p>Paris is the capital of France.</p>

</div>

<div class="city">

<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

.note {

font-size: 120%;

color: red;

</style>

</head>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<body>

<h1>My <span class="note">Important</span> Heading</h1>

<p>This is some <span class="note">important</span> text.</p>

</body>

</html>

HTML Forms
The <form> Element

The HTML <form> element is used to create an HTML form for user input:

The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Text Fields

The <input type="text"> defines a single-line input field for text input.

<!DOCTYPE html>

<html>

<body>

<h2>Text input fields</h2>

<form>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe">

</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of text input fields is 20 characters.</p>

</body>

</html>

==========================================================

The <label> Element

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will
read out loud the label when the user focus on the input element.

The <label> element also help users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.

=================================================================

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

<!DOCTYPE html>

<html>

<body>

<h2>Radio Buttons</h2>

<form>

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label><br>

<input type="radio" id="other" name="gender" value="other">

<label for="other">Other</label>

</form>

</body>

</html>

=============================================================

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<!DOCTYPE html>

<html>

<body>

<h2>Checkboxes</h2>

<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/action_page.php">

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">

<label for="vehicle1"> I have a bike</label><br>

<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">

<label for="vehicle2"> I have a car</label><br>

<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">

<label for="vehicle3"> I have a boat</label><br><br>

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

</form>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-
handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

<!DOCTYPE html>

<html>

<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe"><br><br>

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

</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

<!DOCTYPE html>

<html>

<body>

<h2>The name Attribute</h2>

<form action="/action_page.php">

<label for="fname">First name:</label><br>

<input type="text" id="fname" value="John"><br><br>

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

</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>

<p>Notice that the value of the "First name" field will not be submitted, because the
input element does not have a name attribute.</p>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

The <select> Element

The <select> element defines a drop-down list:

<!DOCTYPE html>

<html>

<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="/action_page.php">

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

<input type="submit">

</form>

</body>

</html>

=================================================================

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Unit 4 :- Style sheets

Styling HTML with CSS

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in

other media.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS can be added to HTML elements in 3 ways:

 Inline - by using the style attribute in HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using an external CSS file

The most common way to add CSS, is to keep the styles in separate CSS files.
However, here we will use inline and internal styling, because this is easier to
demonstrate, and easier for you to try it yourself.

Tip: You can learn much more about CSS in our CSS Tutorial.

types
1) Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

<h1 style="color:blue;">This is a Blue Heading</h1>

<!DOCTYPE html>

<html>

<body>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<h1 style="color:blue;">This is a Blue Heading</h1>

<h1 style ="color:red;"> ygesh</h1>

</body>

</html>

output

This is a Blue Heading

=============================================================

2) Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within

a <style> element:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
This is a heading

====================================================
PROF. YOGESH DESHMUKH www.dacc.edu.in
DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

3) External CSS

An external style sheet is used to define the style for many HTML pages.

With an external style sheet, you can change the look of an entire web site, by
changing one file!

To use an external style sheet, add a link to it in the <head> section of the HTML page:

1) this file is save by samir1.css

<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
h2 {color:pink;}
</style>
</head>
<html>

=================================================================
2) this is another file it is save by bca1.html file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="samir1.css">
</head><body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<h2> yogesh deshmukh</h2>
</body>
</html>
out put isTry it Yourself »

This is a heading

This is a paragraph.
yogesh deshmukh
PROF. YOGESH DESHMUKH www.dacc.edu.in
DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

==============================================================

An external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension.

Here is how the "styles.css" looks:

================================================================

CSS Fonts

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example internal type

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

This is a heading
PROF. YOGESH DESHMUKH www.dacc.edu.in
DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

This is a paragraph.

CSS Border internal type

The CSS border property defines a border around an HTML element:

<!DOCTYPE html>

<html>

<head>

<style>

p{

border: 1px solid powderblue;

</style>

</head>

<body>

<h1>This is a heading</h1>

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

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

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

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

This is a heading

This is a paragraph.

This is a paragraph.

This is a paragraph.

CSS Margin

The CSS margin property defines a margin (space) outside the border:

Example
<!DOCTYPE html>

<html>

<head>

<style>

p{

border: 1px solid powderblue;

margin: 50px;

</style>

</head>

<body>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<h1>This is a heading</h1>

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

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

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

</body>

</html>

This is a heading

This is a paragraph.

This is a paragraph.

This is a paragraph.

the id Attribute

To define a specific style for one special element, add an id attribute to the element:

<p id="p01">I am different</p>

then define a style for the element with the specific id:

<!DOCTYPE html>

<html>

<head>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<style>

#p01 {

color: blue;

</style>

</head>

<body>

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

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

<p id="p01">I am different.</p>

</body>

</html>

This is a paragraph.

This is a paragraph.

I am different.

Note: The id of an element should be unique within a page, so the id selector is used to
select one unique element!

====================================================

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

The class Attribute

To define a style for special types of elements, add a class attribute is apply to the
element:

<p class="error">I am different</p>

then define a style for the elements with the specific class:

Example
p.error {
color: red;

<!DOCTYPE html>

<html>

<head>

<style>

p.error {

color: red;

</style>

</head>

<body>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

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

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

<p class="error">I am different.</p>

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

<p class="error">I am different too.</p>

</body>

</html>

This is a paragraph.

This is a paragraph.

I am different.

This is a paragraph.

I am different too.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Unit 5: java script

What is JavaScript?

javaScript is the world's most popular programming language.

JavaScript is the programming language of the Web.

JavaScript is easy to learn.

This tutorial will teach you JavaScript from basic to advanced.

The <script> Tag

In HTML, JavaScript code is inserted between <script> and </script> tags.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = "My First JavaScript";

</script>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

JavaScript Display Possibilities

JavaScript can "display" data in different ways:

 Writing into an HTML element, using innerHTML.

 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().

Using innerHTML

To access an HTML element, JavaScript can use

the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML
content:

<!DOCTYPE html>

<html>

<body>

<h2>My First Web Page</h2>

<p>My First Paragraph.</p>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = 5 + 6;

</script>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

</body>

</html>

Using document.write()

For testing purposes, it is convenient to use document.write():

<!DOCTYPE html>

<html>

<body>

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<p>Never call document.write after the document has finished loading.

It will overwrite the whole document.</p>

<script>

document.write(5 + 6);

</script>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

Using window.alert()

You can use an alert box to display data:

<!DOCTYPE html>

<html>

<body>

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<script>

window.alert(5 + 6);

</script>

</body>

</html>

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<script>
alert(5 + 6);
</script>

</body>
</html>

Using console.log()

For debugging purposes, you can call the console.log() method in the browser to
display data.

<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>

JavaScript Variables

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Variables</h2>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<p>In this example, x, y, and z are variables.</p>

<p id="demo"></p>

<script>

var x = 5;

var y = 6;

var z = x + y;

document.getElementById("demo").innerHTML =

"The value of z is: " + z;

</script>

</body>

</html>

Global Scope

Variables declared Globally (outside any function) have Global Scope.

<!DOCTYPE html>

<html>

<body>
PROF. YOGESH DESHMUKH www.dacc.edu.in
DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<h2>JavaScript Scope</h2>

<p>A GLOBAL variable can be accessed from any script or function.</p>

<p id="demo"></p>

<script>

var carName = "Volvo";

myFunction();

function myFunction() {

document.getElementById("demo").innerHTML = "I can display " + carName;

</script>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript const</h2>

<p>You cannot change a primitive value.</p>

<p id="demo"></p>

<script>

try {

const PI = 3.141592653589793;

PI = 3.14;

catch (err) {

document.getElementById("demo").innerHTML = err;

</script>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

JavaScript Operators
JavaScript Arithmetic Operators

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

JavaScript Assignment Operators

JavaScript String Operators

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Operators</h2>

<p>The + operator concatenates (adds) strings.</p>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<p id="demo"></p>

<script>

var txt1 = "John";

var txt2 = "Doe";

document.getElementById("demo").innerHTML = txt1 + " " + txt2;

</script>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

javaScript Comparison Operators

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

JavaScript Data Types

The Concept of Data Types

In programming, data types is an important concept.

To be able to operate on variables, it is important to know something about the type.

Without data types, a computer cannot safely solve this:

<html>

<body>

<h2>JavaScript</h2>

<p>When adding a number and a string, JavaScript will treat the number as a
string.</p>

<p id="demo"></p>

<script>

var x = 16 + "Volvo";

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

JavaScript Strings

A string (or a text string) is a series of characters like "John Doe".

Strings are written with quotes. You can use single or double quotes:

Example
var carName1 = "Volvo XC60"; // Using double quotes
var carName2 = 'Volvo XC60'; // Using single quotes

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Strings</h2>

<p>Strings are written with quotes. You can use single or double quotes:</p>

<p id="demo"></p>

<script>

var carName1 = "Volvo XC60";

var carName2 = 'Volvo XC60';

document.getElementById("demo").innerHTML =

carName1 + "<br>" +

carName2;

</script>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

</body>

</html>

JavaScript Numbers

JavaScript has only one type of numbers.

Numbers can be written with, or without decimals:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Numbers</h2>

<p>Numbers can be written with, or without decimals:</p>

<p id="demo"></p>

<script>

var x1 = 34.00;

var x2 = 34;

var x3 = 3.14;

document.getElementById("demo").innerHTML =

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

x1 + "<br>" + x2 + "<br>" + x3;

</script>

</body>

</html>

JavaScript Booleans

Booleans can only have two values: true or false.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Booleans</h2>

<p>Booleans can have two values: true or false:</p>

<p id="demo"></p>

<script>

var x = 5;

var y = 5;

var z = 6;

document.getElementById("demo").innerHTML =

(x == y) + "<br>" + (x == z);

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

</script>

</body>

</html>

JavaScript Arrays

JavaScript arrays are written with square brackets.

Array items are separated by commas.

The following code declares (creates) an array called cars, containing three items (car
names):

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p>Array indexes are zero-based, which means the first item is [0].</p>

<p id="demo"></p>

<script>

var cars = ["Saab","Volvo","BMW"];

document.getElementById("demo").innerHTML = cars[0];

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

</script>

</body>

</html>

JavaScript Functions

==================================================================

A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when "something" invokes it (calls it).

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function which performs a calculation, and returns the
result:</p>

<p id="demo"></p>

<script>

function myFunction(p1, p2) {

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

return p1 * p2;

document.getElementById("demo").innerHTML = myFunction(4, 3);

</script>

</body>

</html>

Function Return

When JavaScript reaches a return statement, the function will stop executing.

If the function was invoked from a statement, JavaScript will "return" to execute the
code after the invoking statement.

Functions often compute a return value. The return value is "returned" back to the
"caller":

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function which performs a calculation and returns the
result:</p>

<p id="demo"></p>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<script>

var x = myFunction(4, 3);

document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {

return a * b;

</script>

</body>

</html>

JavaScript Events
HTML Events

An HTML event can be something the browser does, or something a user does.

Here are some examples of HTML events:

 An HTML web page has finished loading

 An HTML input field was changed
 An HTML button was clicked

Often, when events happen, you may want to do something.

JavaScript lets you execute code when events are detected.

HTML allows event handler attributes, with JavaScript code, to be added to HTML
elements.

<!DOCTYPE html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<html>

<body>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time

is?</button>

<p id="demo"></p>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>

function displayDate() {

document.getElementById("demo").innerHTML = Date();

</script>
PROF. YOGESH DESHMUKH www.dacc.edu.in
DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<p id="demo"></p>

</body>

</html>

Common HTML Events

Here is a list of some common HTML events:

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

JavaScript Strings

A JavaScript string is zero or more characters written inside quotes.

Example
var x = "John Doe";

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Strings</h2>

<p>Strings are written inside quotes. You can use single or double quotes:</p>

<p id="demo"></p>

<script>

var carName1 = "Volvo XC60"; // Double quotes

var carName2 = 'Volvo XC60'; // Single quotes

document.getElementById("demo").innerHTML =

carName1 + " " + carName2;

</script>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

</body>

</html>

JavaScript Arrays
<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>

var cars = ["Saab", "Volvo", "BMW"];

document.getElementById("demo").innerHTML = cars;

</script>

</body>

</html>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>

var cars = ["Saab", "Volvo", "BMW"];

document.getElementById("demo").innerHTML = cars;

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

<script>

var cars = ["Saab", "Volvo", "BMW"];

document.getElementById("demo").innerHTML = cars;

</script>

</body>

</html

JavaScript vs. PHP: Comparison Chart

Javascript is the scripting language designed primarily for adding interactively to

web pages and creating web applications.

A scripting is a light weight programming language.

Scripting language are of two type:

CLIENT SIDE

SERVER SIDE

Javascript runs on the client side, as opposed by server side.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

ADVANTAGES OF JAVASCRIPT.

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 in the web.

Rich interfaces: Drag and drop components or slider may give a rich interface to
your website.

DISADVANTAGES OF JAVASCRIPT
Client side Javascript does not allow the reading and writing of files.

Javascript does not have any multipurpose capabilities.

Data types are divided into two groups:

Primitive Data Types.

Non-Primitive Data Types.

Primitive number types are divided into two groups:

Integer types

Floating point types

Integer types:Integer types stores whole numbers, positive or negative (such as

123 or -456), without decimals. Valid types are byte, short, int and long. Which
type you should use, depends on the numeric value.

Floating types:Floating point types represents numbers with a fractional part,

containing one or more decimals. There are two types: float and double.

Primitive Datatype:

Non-Primitive data types refer to objects and hence they are called reference
types. Examples of non-primitive types include Strings, Arrays, Classes, Interface,
etc. Below image depicts various non-primitive data types.

PROF. YOGESH DESHMUKH www.dacc.edu.in

DNYANSAGAR ARTS AND COMMERCE COLLEGE, BALEWADI,PUNE – 45

Subject: Web Technology (HTML-JSS-CSS) Subject code 205 Class: FYBBA(CA)

PROF. YOGESH DESHMUKH www.dacc.edu.in