UNIT 1: WEB DEVELOPMENT ESSENTIALS

1.1 COMPUTER HARDWARE AND SOFTWARE

A computer is an electronic device which can perform varieties of
operations in accordance with certain instructions called program.
Computers come in various forms, including desktops, laptops, tablets, and
smartphones, and they typically consist of the following key components.

1. Central Processing Unit (CPU): The CPU is the "brain" of the computer,
responsible for executing instructions and performing calculations.
2. Memory (RAM): Random Access Memory (RAM) provides temporary storage
for data and instructions that the CPU is currently working on. It allows for
quick access to data, enhancing a computer's performance.
3. Storage: Computers have various types of storage, including hard disk drives
(HDDs) or solid-state drives (SSDs), for long-term data storage. These devices
store operating systems, software, files, and more.
4. Input Devices: Input devices, such as keyboards, mouse, and touchscreens,
allow users to interact with the computer by providing input, such as text or
commands.
5. Output Devices: Output devices, like monitors, printers, and speakers,
display or produce results from the computer's operations.
6. Operating System: The operating system (e.g., Windows, macOS, or Linux)
manages the computer's hardware resources and provides a user interface for
running software applications.
7. Software: Software includes programs and applications that run on the
computer to perform specific tasks, such as word processing, web browsing,
gaming, and more.
8. Peripherals: These are additional devices that can be connected to the
computer, such as external hard drives, webcams, printers, and more, to
expand its functionality.
Characteristics of Computer
 Speed
 Accuracy
 Huge Storage
 Versatility (Ability to perform different jobs)
 Diligence (While doing same work repeatedly for long time, it does not feel
boredom, as we feel)
 Lack of IQ
 No decision-making power
 Block Diagram of Computer

CPU
Control
INPUT UNIT Unit
OUTPUT UNIT
ALU

Registers

Main
Memory

Input Unit: This unit gives data in to computer for processing. Examples:
Keyboard, Mouse, Scanner, Microphone

Output Unit: The result from computer is obtained or displayed on this unit.
Example: Monitor, Printer, Speaker

CPU(Central Processing Unit): It is called the ‘brain of computer’. Data

processing is taking place in this unit. It is subdivided in to 3 units

ALU(Arithmetic and Logic Unit): All arithmetic operations( addition,

subtraction, multiplication, division…) and Logical operations (less than,
greater than….) are done in this unit

Control Unit: It controls all the operations in the computer. It generates

control signals for operations

Registers: These are small memory cells inside CPU. Intermediate results are
temporarily stored in it

Main Memory: Primary memory can be of two types

RAM (Random Access Memory): It is called Volatile Memory. When power is

switched off, data stored in RAM will be lost. It allows Read and write
operations.

ROM (Read Only Memory): Stored data can only be read from ROM.

Secondary Memory: Features of secondary memory is huge storage and non-

volatile. Examples: Hard Disc, Compact Disk, Pen drive, Flash Drive, SSDs,
Optical drives etc
 1.2 COMPUTER NETWORK AND INTERNET
Computer Network: A network is a collection of interconnected computers,
devices, or systems that can share data and resources.
Types of Networks:
LAN (Local Area Network): A network that covers a small geographic
area, like a home, school, or office.
WAN (Wide Area Network): A network that spans a larger geographical
area, often connecting multiple LANs across cities or even countries.
Internet: The global network that connects billions of devices and
networks worldwide.
Network Components:
 Nodes: Devices connected to a network, such as computers, printers, and
routers.
 Routers: Devices that route data between networks.
 Switches: Devices that connect devices within the same network.
 Modem: Converts digital data from a computer into analogue signals for
transmission over phone lines or vice versa.
INTERNET: Arpanet (Advanced Research Projects Administration NET) is the
ancestor of the Internet. This project was introduced by Department of
Defence (DOD) of US in 1969. In the 1980s, Tim Berners-Lee in the United
Kingdom, introduce World Wide Web, marking the beginning of the modern
Internet.
Terminologies:
 Web page: Web page is a hypertext document on the World Wide Web.
 Hypertext document: Document contain text, pictures, graphics, sounds,
special effects etc
 Website: A set of related web pages located under a single domain name
known as Website
 Web servers: A Web Server is a computer on the World Wide Web that stores
web sites and related files that can be retrieved via a Web browser. A web
server stores and delivers the content for a website.
 Web portals: Web portals are special kind of websites which offers so many
services to its users. Eg:- [Link]
 Protocols: Network protocols are rules and conventions that govern how data
is transmitted and received on a network. Examples include TCP/IP, HTTP,
and FTP.
 IP Addresses: IP (Internet Protocol) addresses are unique numerical labels
assigned to devices on a network. IPv4 and IPv6 are the two main IP address
versions.
 Internet Service Providers (ISP): ISPs are companies that provide access to the
internet, typically through broadband or dial-up connections.
 World Wide Web (WWW): The web is a system of interconnected documents
and resources that are accessed via the internet using web browsers.
 Web Browsers: Software applications like Google Chrome, Mozilla Firefox,
and Microsoft Edge used to access websites and web content.
 URL (Uniform Resource Locator): A URL is the web address used to identify
and locate resources on the internet. It consists of a protocol (e.g., [Link]
domain name (e.g., [Link]), and path.
 Eg.-URL for VHS Examination site: [Link]
 Search Engines: Tools like Google, Bing, and Yahoo help users to find
information on the internet by searching through vast amounts of web
content.
 Email: Email is a common method of electronic communication. Users have
email addresses and use email clients (e.g., Gmail, Outlook) to send and
receive messages.
 Social Media: Platforms like Facebook, Twitter, and Instagram enable users
to connect and share content with others over the internet.
 Web Programming Languages: Programming languages for web development
include: JavaScript, HTML5, CSS3, PHP, Java.
 E-commerce: E-commerce is a method of buying and selling goods and
services through internet.
 Client: Client is a piece of computer hardware or software that accesses a
service made available by a server as part of the client–server model of
computer networks.
 Server: A server is a computer or system that provides resources, data,
services, or programs to other computers, known as clients, as part of the
client–server model of computer networks.
 Client-Server Model: The client-server model describes the communication
between two computing entities over a network. Clients are requesting a
resource or service and Servers are providing that resource or service. Internet
is one of the main application areas of client-server model.
 Static web pages: Static web pages are made of fixed code, and unless the site
developer makes changes, nothing will change on the webpage. Static
websites are build of HTML, CSS, and JavaScript.
 Dynamic web page: A dynamic web page is a web page that includes content
that is updated regularly. The Content of pages is different for different
visitors. Dynamic websites are build of PHP, Python and SQL.
 Client-side scripting: Client-side scripting is a process in which scripts are
executed by web browsers. HTML, CSS, JavaScript and jQuery are most
important client-side scripting languages
 Server-side scripting: The server-side scripting has complete access to all the
files present in any web server. It is used to deliver dynamic content to
webpages in response to user actions. Java, C#, PHP, Python, and Node. JS
are server-side programming languages.
 1.3 IT-ITES INDUSTRY
The IT/ITeS industry is the Information Technology Enabled Services
industry. ITeS is a term that refers to all services and activities that depend
on information technology (IT). IT involves creating, managing, storing, and
exchanging information using technology.
Segments of IT/ITeS Industry
IT and ITeS industry is divided into four major segments:
 IT services
 Business process management (BPM)
 Software products and engineering services
 Hardware
Relevance of IT/ITeS Industry
The IT industry is important for organizations to increase productivity,
ease of doing business, and grow efficiently and economically. IT-enabled
services (ITES) are also called web-enabled services, remote services, or
teleworking. ITES helps global companies meet their business goals and
provide a valuable service with the aid of information technology.
Subsectors: Here are some subsectors of IT application development:
Healthcare, Ecommerce, Education, Manufacturing, Tourism sector, Media and
entertainment
Different types of application development in IT industry
 Mobile app development
 Web development
 Application development
 Security software development
 Cloud computing
 Desktop development
1.4 CAREER PATH AND GROWTH OPPORTUNITIES FOR WEB DEVELOPER
Web developers can specialize in many areas, including: Front-end
development, Back-end development, Full-stack development, Game
development, Mobile applications
Other career paths for web developers include Computer and
information systems management, Computer programmer, Web designer,
Software engineer, Graphic web designer, Applications developer, Multimedia
programmer, Multimedia specialist.
Web developers can progress through job titles such as:
 Junior front-end developer
 Front-end developer
 Senior front-end developer
 Front-end architect
 User experience (UX) designer
Roles and responsibilities of Web Developer: Web developers are
responsible for ensuring that websites look good and function properly. They
work with website and graphic designers, monitor website traffic,
troubleshoot website problems, and update websites as necessary.
 1.5 WEB DESIGN AND DEVELOPMENT
It involves two major skill sets: web design and web development. Web
design determines the look and feel of a website, while web development
determines how it functions. It involves a combination of design, coding, and
content creation.
BASIC ELEMENTS OF WEB DESIGN:
 Typography: The style or font of the written content. Typography can make a
website look polished and professional.
 Navigation: The way users interact with and use a website or app. Navigation
design involves creating, analyzing, and implementing ways for users to
navigate through a website or app.
 Color scheme: The selection of colors used throughout the website.
 Responsive design: Enables your site to adjust to fit the screen on the device
where it appears.
 Content: Involves written pages on the website
Constraints in Web Design
Constraints are limitations on the design, such as available funds,
resources, or time. Together, the criteria and constraints are referred to as
the requirements for a successful solution.
Coding and programming for website
Here are some steps to code a website:
 Choose a code editor
 Write your HTML
 Create your CSS stylesheet
 Put your HTML and CSS together
 Code a responsive or static website

1.6 WEB DEVELOPMENT TOOLS

 PHP: Popular general-purpose scripting language that is especially suited to

web development.
 JavaScript: Programming language of HTML and the web.
 HTML5: Markup language, the latest version of HTML and XHTML.
 SQL: Stands for structured query language used with relational databases.
 MySQL: An open-source relational database management system
 Sublime Text: A sophisticated text editor for code, markup, and prose with
great performance.
 Notepad++: A free source code editor which supports several programming
languages running under the MS Windows environment.
 Visual Studio Code: Code editing redefined and optimized for building and
debugging modern web and cloud applications.
 WampServer: Windows web development environment. It allows you to create
web applications with Apache2, PHP and a MySQL database.
 jQuery: A fast, small, and feature-rich JavaScript library.
 Bootstrap: HTML, CSS, and JS framework for developing responsive, mobile
first projects on the web.
 CodeIgniter: Powerful and lightweight PHP framework built for developers who
need a simple and elegant toolkit to create full-featured web applications.
 Laravel: A free, open-source PHP web application framework to build web
applications on MVC pattern.
 CSS preprocessor: is basically a scripting language that extends CSS and
then compiles it into regular CSS.
Content Management Systems (CMS):
 WordPress: An open-source CMS for building blogs and websites, based on
PHP and MySQL.
 Joomla: Another open-source CMS for creating web content, also built with
PHP and MySQL.
Front-end development: Front-end development focuses on the visual
aspects of a website. This is the part that users see and interact with websites.
Languages used for the front end are HTML, CSS, and JavaScript
Back-end development: Back-end development combine a site's structure,
system, data, and logic. Back-end means the server applications and
database. Languages used for the back end are PHP, [Link], and SQL.
Full stack development: Full stack development is the process of designing,
creating, testing, and deploying a complete web application from start to
finish. It includes front-end web development, back-end web development,
and database development.
Responsive web design: A responsive web design automatically adjusts for
different-sized screens and viewports. It changes its layout and display of
information depending on the size of the browser.

1.7 SOFTWARE DEVELOPMENT LIFECYCLE

The Software Development Life Cycle (SDLC) is a structured process used
in the field of software development to plan, design, build, test, and maintain
software systems. It helps ensure that software projects are completed on
time, within budget, and with high quality.
 Planning: In this initial phase, the software project is defined. Developers,
stakeholders, and users collaborate to determine the project's goals, scope,
and requirements.
 Analysis: During this phase, detailed requirements are gathered from users
and documented. This includes what the software needs to do, its features,
and how it should behave.
 Design: In this phase, software architects and designers create a detailed plan
for the software. They define the system's structure, components, and how
they interact.
 Implementation: This is where the actual coding takes place. Developers
write the source code based on the designs and specifications created in the
previous phases.
 Testing: After development, the software undergoes extensive testing to
identify and fix defects or issues. This includes unit testing (testing individual
components), integration testing (testing how components work together), and
system testing (testing the entire system).
 Deployment: Once the software passes all tests and is deemed ready, it is
deployed to a production environment, making it accessible to users.
Deployment can involve installing the software on servers, configuring it, and
making it available over the internet or a network.
 Maintenance and Support: After deployment, the software needs ongoing
maintenance. This includes fixing bugs, updating the software to address
changing needs, and providing user support. Enhancements and new
features may also be added during this phase.
The SDLC can take different forms, and various methodologies, such as
Agile, Waterfall, and Iteration offer different approaches to software
development. Depending on the project's size, complexity, and requirements,
the SDLC can be adapted to fit the specific needs of a project.
1.8 URS, BRS and SRS
URS (User Requirements Specification): The User Requirements
Specification, or URS, is the first document created during the software
development process. It outlines the high-level needs and objectives of the
software from the user's perspective. URS is generally required for new
facilities, process equipment, laboratory equipment, computerized systems,
and utilities.
Here are some steps to create a URS:
 Draft the URS document.
 Sign the URS approval section.
 Forward the URS document to the Department Head for review.
 Include the source of each requirement in the URS.
 Spend time developing solid user requirements.
BRS (Business Requirements Specification): The Business Requirements
Specification, or BRS, is a document that focuses on the broader business
goals and objectives that the software project aims to fulfil. It provides a
strategic perspective on why the software is being developed.
A BRS document generally consists of:
 The complete scope of the project
 The performance requirements and usability
 The purpose of the product
 The functions of the product
 The features of the product and the users
 The scope of the work
 The humanity requirements

SRS (Software Requirements Specification): The Software Requirements

Specification, or SRS, is a detailed technical document that follows the URS
and BRS. It provides specific information about how the software will be built
to meet the user and business requirements.
An SRS includes:
 The software's intended purpose and environment
 The functionality the product needs to fulfill the needs of all stakeholders
 The project's features, design, limitations, and goals
 Use cases of how users will interact with the software system
1.9 DESIGN DEFECTS
A design defect is a flaw in a product's design that makes it dangerous
to the user. Design defects are not the result of a manufacturing error, but
rather occur in the design stage. They generally affect the entire product line,
rather than just one unit.
Causes of defects: Defects can be caused by many factors, including:
 Software defects: Human errors, environmental issues, technical
problems, communication gaps, requirements ambiguity, inadequate
testing, poor quality control, and lack of skills or knowledge
 Manufacturing defects: Errors made during the production process,
inadequate quality control measures
Other causes of defects include:
 Lack of collaboration
 Lack of code coverage
 Choosing a wrong testing framework
 Not having a proper test reporting system in place
 Lack of a proper defect management process
 Not considering real user conditions when testing
Design thinking is important for the future because it helps people solve
complex problems in creative ways. As the world becomes more complex,
there will be an increasing need for people who can think outside the box and
come up with innovative solutions.
Recording and documentation of Design Defects
A defect report is a document that includes details about software defects,
their sources, and the actions needed to resolve them. Developers can use
defect reports to understand the problem and its solution, and make
improvements.
UNIT 2: DESIGNING OF WEB PAGES USING HTML

2.1 Introduction to HTML

Web documents known as web pages are created using simple language
HTML. HTML stands for Hyper Text Mark-up Language, developed by Tim
Berners Lee in 1980. It is used by web browsers to interpret
and compose text, images, and other material into visual or audible web
pages.
HTML tags: An HTML tag is a code element that tells the browser what to do
with the text. It is a set of symbols defined in HTML with special meaning. Tag
starts with a less than symbol (<) followed by a keyword and conclude with a
greater than symbol (>).
Attributes and values: An attribute is a keyword separated by a space within
angle brackets along with the tag which provides additional information such
as background colour, height, width etc. to the browser.
Consider the eg. <BODY text=”red”>,
here text is an attribute of the tag body and it take value as red for changing
the font color to red.
Container tag and empty tag: Tags that requires both opening tag and
closing tag are known as container tag. For eg. <html> tag is used with a pair
tag </html>.
Tag that does not require closing tag is known empty tag and it doesn’t span
over a section. <BR>, <HR> etc. are examples of Empty tag.
HTML tags vs Elements:
HTML elements are
components of an HTML page
that are defined by HTML tags.
HTML tags are the building
blocks of an HTML page. An
HTML element is made up of:
 A start tag
 Attributes
 An end tag
BASIC HTML TAGS
Structure tag is used to create the structure of an HTML document.
There are four types of Structure tags.
<HTML> Tag: It is the beginning of an HTML document. The whole document
is bounded with in <HTML> and </HTML> tag and is used to identify that the
document is a web page.
<HEAD> Tag: The <HEAD> tag contains information about the document.
<TITLE> Tag: This tag contains the title of the web page. The title will be visible
on the title bar of the page.
<BODY> Tag: The actual contents of the web page contains in this section.
This section start with <BODY> and end with </BODY>
 Simple HTML document that demonstrates structure of HTML code.
<html><head><title>
My first page
</title></head><body>
My First program
</body></html>
Attributes in <Body> Tag
Body Description
Attributes
Specifies background colour for the document body. We
can specify a colour name or equivalent hexadecimal
BGCOLOR
number.
Eg:- <BODY BGCOLOR=”red”>
To set an image as background for the web page.
BACKGROUND
Eg:- <BODY BACKGROUND = “[Link]”>
To specifies the font colour of the [Link]:- <BODY
TEXT
TEXT=”yellow”>
Specifies the horizontal alignment of the line as LEFT,
ALIGN
RIGHT or CENTER
Specifies the colour of the unvisited hyperlinks. Default
LINK colour is blue.
Eg:- <BODY LINK = “red”>
Specifies the colour of the visited links. Standard colour is
VLINK magenta
Eg:- < BODY VLINK = “blue”>
Specifies the colour of the currently Active hyperlink.
ALINK
Eg:- < BODY ALINK = “yellow”>
LEFTMARGIN specifies the left margin from where the text
LEFTMARGIN in the body appears in a web page
& TOPMARGIN TOPMARGIN Specifies the top margin of the document
window. The values are specified in pixel.

2.1 HTML FORMATTING TAGS

HTML formatting tags are used to change how text appears on a web
page. Some examples of HTML formatting tags include:
<b>: Bold text
<i>: Italic text
<u>: Underlined text
<strong>: Important text
<em>: Emphasized text
<mark>: Highlighted text
<sup>: Superscript text
<sub>: Subscript text
<small>: Smaller text
 <html><head>
<title>Bold and strong</title>
</head><body>
<!--Normal text-->
<p>Normal Text</p>
<!--Text in Bold-->
<p><b>Bold Text</b></p>
<!--Text in Strong-->
<p><strong> Strong Text</strong></p>
</body></html>
Start a new paragraph - <p> tag: A paragraph can be created by enclosing
text with in <p>… </p> tag.
Line breaking - <br> tag: The purpose of this tag is to wrap the text to a new
line. <br> tag is an empty tag which means it has no closing tag.
Centering the text - <center> tag: <center> …… </center>, is container tag
which used for centralising the content enclosed. The content may be text,
image, table, etc. Eg:-<center> …… </center>
<html><head>
<title>Italic and emphasized</title>
</head><body>
<!--Normal text-->
<p>Normal Text</p>
<!--Text in Italics-->
<p><i>The Text inside italic Tag</i></p>
<!--Text in Emphasize-->
<p><em>Emphasized Text</em></p>
</body></html>
<marquee> tag: This tag displays a piece of text or image scrolling
horizontally or vertically in the web page. Given below is the list of important
attributes that are used with <marquee> tag.
<font> tag: The <font> tag enables to change the properties of just some part
of the text without affecting the rest of the document. The default size used is
3.
<basefont> tag: The default font size can be changed to any value between 1
and 7 using the <BASEFONT> tag
Eg:- <BASEFONT SIZE=5>
Add a heading - <hn>…….. </hn>: HTML uses 6 levels of headings starting
from H1 to H6. Level 1 is the largest and level 6 is the smallest.
<Hn>…….. </Hn> Where n=1 to 6
Eg:- <H1>Vocational Higher Secondary </H1>
Comments in html <!-- -->: HTML comments are placed within <!-- -->tag.
So any content placed within <!-- --> tag will be treated as a comment and
will be completely ignored by the browser.
Eg:- <!—This is my first web page --!>
 <html> <head>
<title>Basefont tag</title>
<basefont color="blue" size="5" face="arial">
</head> <body>
<h2>Example of Basefont tag</h2>
<p>The basefornt tag is not supported in HTML5 use CSS to style the d
ocument</p>
</body> </html>
HTML color coding: HTML color codes are hexadecimal triplets that
represent the colors red, green, and blue. The most popular color coding
method is hex codes, which are six-digit codes that represent the amount of
red, green, and blue that makes up the color.
Here are some examples of HTML color codes:
 #FF0000: Red
 #00FF00: Green
 #0000FF: Blue
 #FFFF00: Yellow
Div and Span tags: <div> and <span> are both HTML elements that group
related parts of a web page. They are two of the most used HTML components.
<div> is a block-level tag that groups other HTML tags and applies CSS to a
group of elements. It's used to Divide sections
<span> is an inline element that groups inline elements in an HTML
document. It's usually used for a small chunk of HTML inside a line, such as
inside a paragraph.

2.3 LIST IN HTML

Lists are often used to present information in an easy way. There are
three types of lists in HTML. They are unordered lists, ordered lists, and
definition lists.
UNORDERED LIST: In Unordered list the list items are arranged with bullet
mark. Unordered list is created by using container tag <UL>, </UL>. List
items are specified by <LI>. The main attribute used with this tag is TYPE and
can take values DISC, CIRCLE OR SQUARE.
ORDERED LIST: In Ordered list the list items are arranged with numbers of
different format. Ordered list is created by using container pair <OL>, </OL>.
List items are specified by <LI>. The main attributes used with this tag is
TYPE and START. TYPE specifies numbering type and START specifies the
starting number of the list items.
Type = A, for A, B,C…..
Type =a, for a, b, c…..
Type =I, for I, II,III……
Type =I, for i, ii, iii…..
DEFINITION LIST: Definition list is formed by a group of definitions and their
description. Definition list are created by the container pair <DL>, </DL> tag.
Definition term is defined by <DT>and Description is defined by <DD>.
HTML document that demonstrates List tag
[Link]
<html>
<head><title>SAVE ENVIRONMENT</title></head>
<BODY BGCOLOR=#6699FF TEXT=#CC6666>
<h1><FONT COLOR =660000><CENTER> We are the ENDANGERED
</CENTER></font></h1>
<IMG SRC="[Link]" HEIGHT =180 WIDTH=230>
<IMG SRC="[Link]" HEIGHT =180 WIDTH=230><BR><BR>
<font size=4 COLOR="RED"><p align="left">Our 10 Most Endangered
Animals List
<OL TYPE=A>
<LI>Ivory-Billed Woodpecker
<UL><LI>A North American bird so endangered it may actually be extinct
</UL>
<LI>Amur Leopard
<UL> <LI>The world’s rarest cat: Only 40 left in Russia’s Far East </UL>
<LI>Javan Rhinoceros
<UL> <LI>No more than 60 of these swamp-dwelling Asian rhinos exist
</UL>
<LI> Northern Sportive Lemur
<UL> <LI>Here’s the scarcest of Madagascar’s fast-dwindling lemur species
</UL>
<LI> Western Lowland Gorilla
<UL> <LI>Disease and illegal hunting are wiping out this gentle
giant</UL></OL>
<OL TYPE =I START=6>
<LI>TheSaola-An Asian Unicorn
<UL TYPE="DISC"><LI>So rare it is almost mythological, the saola hangs on
by its hoof tips in a forest full of poachers’ snares</UL>
<LI> Leatherback Sea Turtle</OL>
Six Critically Endangered Species From Our Previous Lists
<DL><DT>Kakapo Parrot
<DD>These flightless New Zealand birds are so rare they all have names
Greater Bamboo Lemur
<DT>Greater Bamboo Lemur<DD>Fewer than 100 of these Critically
Endangered animals remain
<DT>Mountain Gorilla<DD>Their habitat is shrinking, and fewer than 700
remain</DL>
</font></body></html>
2.4 EMBED IMAGE AND HYPERLINKS IN WEBPAGE

The <img> tag is used to embed an image in an HTML page. Images are
not technically inserted into a web page; images are linked to web pages. The
<img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image, if the image for some reason
cannot be displayed
<img src="[Link]" alt="Workplace" width="400" height="379">

HYPER LINKING - <A> TAG

In an HTML document we can create hyperlink to other documents,
Image, Email, audio or video with the help of an Anchor Tag <A>. The attribute
HREF specifies hyper reference. The following are some examples of hyper
reference.
To Insert an e-mail link: <A HREF = “[Link] Email Me
</A>
Open a link in a new window: <A HREF = “[Link]”>Courses</A>
An HTML hyperlink connects one web resource to another. The resource can
be An image or A web page
URL encoding: URL encoding converts characters into a format that can be
transmitted over the Internet. URLs can only be sent over the Internet using
the ASCII character-set.

2.5 TABULAR DATA IN WEBPAGE

<TABLE> Tag: Tables arrange the contents in the form of Rows and columns.
Tables are defined with the <TABLE> tag. Tables are divided into table
rows with the <TR> tag. A table row can be divided into table headings with
the <TH> tag. Table rows are also divided into table data with the <TD> tag.
Attributes and description of <TABLE> tag
Attributes Description
The value 0 is equivalent to no border. The larger the value
BORDER specified the thicker will be the border. Eg. <TABLE
BORDER = 10>
BORDERCOLOR Assigns a colour to the border
HEIGHT Table eight can be specified in pixels or as percentage
Table width can be specified in pixels or as percentage
WIDTH <TABLE BORDER = 5 WIDTH = 600 HEIGHT =300>
<TABLE BORDER = 5 WIDTH = 50% HEIGHT = 75%>
Specifies the space between cell border and table frame in
CELLSPACING pixel.
<TABLE BORDER = 8 CELLSPACING = 10>
 Specifies space between cell border and cell contents in
CELLPADDING pixel.
<TABLE BORDER =8 CELLPADDING =10>
Specifies Background colour. Colour name or RGB values
BGCOLOR
can be given.
Specified the alignment of the table. Alignment can be left,
ALIGN
center, right.
Frame specifies which sides of the tables outer border are
FRAME
visible in the browser window
Set an image to the background of a table. <TABLE
BACKGROUND
BACKGROUND= “[Link]”>
Attributes and description of <TH> tag
Attributes Description
To combine one or more columns
COLSPAN
<TH COLSPAN = 3 > Product list and prices </TH>
To combine one or more rows. <TH
ROWSPAN
ROWSPAN=3>VHSE</TH>
HEIGHT &
<TH WIDTH = 200 HEIGHT = 100> ITEMCODE </TH>
WIDTH
Attributes of <TR> tag
Attributes Description
To align cell content horizontally. Alignment can be left, center,
ALIGN
right. <TR ALIGN = right>
To align cell content vertically. Values are top, middle, bottom. Eg.
VALIGN
<TR VALIGN = Top>
BGCOLOR Background [Link]. <TR BGCOLOR = “#FF0000”>
To combine one or more columns. <TR COLSPAN = 3 > Product
COLSPAN
list and prices </TH>
ROWSPAN To combine one or more rows. <TR ROWSPAN=3>Banner</TH>

HTML document that demonstrates Table Tag & Hyper Link

[Link]
<head>
<title>Untitled 1</title>
</head>
<body>
<table BORDER=1 width=80% bgcolor=#ffff99>
<tr>
<td colspan="3"><img alt="banner" height="150" src="[Link]"
width="100%" /></td></tr>
<tr><td rowspan="4" ><h1><a href=[Link] target="support">Support
these animals!</a></h1>
<h2>Click on the image for further details</h2></td>
<td><h2>Giraffe</h2></td>
<td width=100><a href="[Link]" target="giraffe">
<img alt="giraffe" height="110" src="[Link]" width="250"
align="right"/></a></td></tr>
<tr><td> <h2>Tiger</h2></td><tdwidth=100><a href="[Link]"
target="giraffe">
<img alt="tiger" height="110" src="[Link]" width="250"
align="right"/></td></tr>
<tr><td> <h2>Sable antelope&nbsp;</h2> </td>
<td> <img alt="sable antelope" height="110" src="[Link]" width="250"
align="right"/></td></tr>
<tr><td><h2>Wallaby</h2></td>
<td><img alt="wallaby" height="110" src="[Link]" width="250"
align="right"/></td></tr>
</table></body></html>

2.6 FRAMES IN HTML

<FRAMESET>&<FRAME> Tag: We can create frames to divide a web browser

window into sections that will display a different web page. A collection of
frames in the browser window is known as a frameset.
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. Each frame is
indicated by <frame> tag and it defines which HTML document shall open into
the frame.
Attributes of <FRAMESET> Tag
Attributes Description

Specifies number of columns contained in the frameset and

COLS the size of each column.
Eg: <FRAMESET COLS = “50%,150,*”>

It is used to specify the rows in the frameset. For example to

ROWS create two horizontal frames, use
<FRAMESET ROWS="10%, 90% ">

Assigns a colour to the border. Colour name or code can be

BORDERCOLOR
given.

This attribute specifies the thickness of the border of each

BORDER frame in pixels. A value of zero means no border. For example
<FRAMESET BORDER ="5">
 Attributes of <FRAME> Tag
Attributes Description

Specifies the URL of the document to be loaded in the frame.

SRC
Eg:<FRAME SRC = “[Link]”>

NAME Gives names for the frame

Specifies the target for hyperlink. On clicking the hyperlinks in

TARGET the frame, the linked page will be loaded in the frame specified
by the target attribute.

Disable the resizing of the frame. Eg: <FRAME SRC=”[Link]”

NORESIZE
NORESIZE >

SCROLLING Indicate whether the scrollbar is to be shown or not.

2.7 FORMS IN HTML

Forms allow us to gather information from users who visit our web
pages. Forms contain elements like button, text field, radio button, check
boxes and combo box.

<FORM> Tag: A form start and end with <FORM> tag. The attributes used
with <FORM> tag are ACTION and METHOD.
ACTION - Where the data to get or to be posted.
METHOD – Method for dealing the form
The METHOD attribute may get one of the following values.
o Get - with this method, the form data set is appended to URL specified by the
action attribute with a question mark. This new URL is sent for processing.
o Post- With this method, the form data set is included in the body of the form
and sent for processing
Eg:-<FORM METHOD = “POST” ACTION = “[Link]”>

<INPUT> Tag: The <INPUT> tag can be used to create a number of input
controls such as text, password box, checkbox, radio button, submit button,
reset button etc. The main attribute is TYPE. INPUT – Tells the computer that
a form item is going to be placed here.
Type – Tells the computer what type of form item here it is a text box.
Name – is the name we assign to the box.
SIZE – denotes how many characters long this box will be.
 Attribute Values Description

TEXT Create a text box for accepting character input

Create a password box. Characters will be displayed

as symbols
PASSWORD
<INPUT TYPE = “password” NAME = password”
SIZE = “10” MAXLENGTH = “10”>

Create a check box control and can be used for

selecting more than one option from a group of
CHECKBOX option.
TYPE <INPUT TYPE = “checkbox” NAME = “hobbies”
VALUE = “PAINTING“ CHECKED> PAINTING

Create a radio button control and can be used for

selecting only one option from a group of option.
RADIO
<INPUT TYPE = “radio” NAME = “rating” VALUE =
“Very good “ CHECKED> good

SUBMIT Used for submission of form control

RESET Clear all entries and bring it to the initial state.

<TEXTAREA> Control: Text Area will allow for as many words as we want.
Information such as address, which is more than single line, can be accepted
through text area control.
<TEXTAREA ROWS =6 COLS =40> Address </TEXTAREA>
<SELECT> Control: The popup box provides a selection list from which the
input option can be selected. The following attributes are used with
<SELECT> control.
SELECT: Tells the computer another form is going here.
NAME: This is the heading of the form item.
Size: denotes the size of the box
Option selected: denotes which option will appear in the box
Option: denotes another choice that will be visible when we click on item.
< SELECT NAME = “AGE” SIZE = “4”>
<OPTION VALUE = “child “ > Under 12
<OPTON VALUE = “teen”> 13-19
<OPTION VALUE = “adult” SELECTED> 20 – 64
<OPTION VALUE = “Senior”> 65 or order
</SELECT>
<LABEL> Tag: <LABEL> tag provides a label for the form control. The for
attribute connects the label with the input control.
<LABEL for=REGNO> Reg. No. </LABEL><INPUT TYPE=”TEXT”
ID=”REGNO”>
HTML document that demonstrate Form Tag

[Link]

<html>
<head>
<title> contact us </title></head>

<body text = maroon><font size=5>&nbsp<b> contact form

</b></font><br><br>
<font size=4> thank you for your interest in contacting the wild life
conservation foundation.<br> please use the form below to contact us at
any time or see our contact details below the form.<br><br>required fields
are marked with a star: * </font><br>

<form name=”f1” action="/action_page.html">

<p align="left">
<label for ="fname"> *first name </label>&nbsp&nbsp&nbsp
<input type="text" name="fname" value="your first name" id="fname"
size="20"><br><br>
<label for ="sname"> *surname
</label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input
type="text" name="sname" id="sname" size="20"><br><br> email id
&nbsp&nbsp<input type="text" size="30"><br><br>
sex &nbsp&nbsp&nbsp<label for ="male"> male: </label>
<input type="radio" name="sex" value="male" id="male">&nbsp;&nbsp;
<label for ="female"> female: </label>
<input type="radio" name="sex" value="female" id="female"><br><br>
<label for ="query"> *comment/query: </label><br>&nbsp;
&nbsp&nbsp&nbsp&nbsp&nbsp
<textarea name="query" cols=60 rows=5 id="query">query
</textarea><br><br>
<label for ="heardsite"> how did you hear about us?:</label>
<select id="heardsite">
<option> search engine
<option> magazine
<option> other site
</select>&nbsp; &nbsp;&nbsp; <br><br>
<input type="submit" value="submit">&nbsp; &nbsp; <input type="reset">
</form>
</body>
</html>
2.8 METADATA IN HTML
Metadata is data about data. In HTML, the <head> element contains
metadata about the document, such as: Title, Scripts, Style sheets, Page
description, Keywords.
The <head> element is placed between the <html> and <body> tags. It's
primarily for machine processing, not human-readability.
The <meta> element appears inside the <head> element. It has
attributes like: Charset, Content, Http-equiv, Name, Scheme.
Here are some examples of <meta> tag syntax:
<meta charset="utf-8">
<meta name="keywords" content="HTML, CSS, JavaScript, Tutorials">
<meta name="description" content="Free Online tutorials">
<meta name="author" content="thisauthor">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Metadata can be used by browsers, social media platforms, and search
engines to provide useful information about a webpage

2.9 HTML MULTIMEDIA TAGS

Audio files: The <audio> tag is used to embed sound content in a document,
such as music or other audio streams. The <audio> tag contains one or more
<source> tags with different audio sources.
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
Video files: The <video> tag is used to embed video content in a document,
such as a movie clip or other video [Link] <video> tag contains one or
more <source> tags with different video sources.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
</video>
HTML program to connect audio video and YouTube files
<html><head><title>video</title></head>
<body>
<video controls loop muted height="250px" width="350px">
<source src="WhatsApp Video1.mp4">
</video>
<audio controls>
<source src="WhatsApp [Link]" type="mp3/mpeg">
</audio>
</body></html>
 UNIT-3 : DESIGNING OF WEB PAGES USING CSS
3.1 Introduction to CSS

CSS stands for Cascading Style Sheets. It's a computer language

that's used to lay out and structure web pages. Cascading style sheet is
used for webpage formatting. With the use of CSS, we can change the
color , font, fontsize, positioning, background etc of a webpage.

Use of CSS:

 Create a layout.

 Create CSS for the layout.

 Create CSS to style individual elements.

 Add background color and style.

Benefits of CSS: Cascading Style Sheets (CSS) are a method sheet

language that gives web designers control over how a website
communicates with web browsers. CSS has many benefits, including

 Easier to maintain and update

 Greater consistency in design

 More formatting options

 Faster download times

 Ease of presenting different styles to different viewers

 Greater accessibility

 Better user experience

 Easy formatting changes

 Support for the latest browsers

CSS syntax: CSS syntax consists of a set of rules that have three parts:

 Selector: Points to the HTML element where the CSS style is to be

applied

 Property: The style to be applied

 Value: The value of the property

Types of CSS: There are three types of CSS

1. Inline CSS

2, Internal CSS

3. External

Inline CSS: Here style attribute is used inside html elements (tags)

<body>

<h1 style=”color:red;”>html</h1>

<h2 style=”color:blue;”>php</h2>

</body>

Internal CSS: Here<style>element (tag)is used inside<head>tag

<html><head><style>

H1{color :red;}

P{color:blue;}

Body{background-color: light blue;

Font-size:25 px;

Text-align:center;}

</style>

</head><body>

<h1 >computer</html

<p>computer is an electronic device</p>

</body></html>
<html><head><title>list</title><h1>my details</h1><br>

<style>

body{background-color:lightblue;

font-style:italic;

text-align:left;

border:5px solid black;}

h1{color:red;}

dl{color:yellow;

font-size:50px;

border:4px dotted blue;}</style>

</head><body>

<dl><dt>html</dt>

<dd>hyper text<br> markup language

</dd></dl>my friends

<ul style="color:red;">

<li>pranav</li>

<li>jagath</li>

<li>rijul</li>

</ul>

my friends

<ul type="disk" style="color:blue;">

<li>pranav</li>

<li>jagath</li><li>rijul</li>

</ul></body></html>
External CSS: Here we use an external CSS file and link this file to our
original html.

To link to an external style sheet, we can:

 Create a link within the head section of the webpage.

 Use the <link> tag.

 Use the rel attribute to explain the relation the link has to the
document. The value in this case will always be stylesheet.

 Use the href attribute to specify the link to the stylesheet.

Multiple Style Sheets: We can apply multiple style sheets to an HTML

file. You can link them in the <head> section using <link> elements. For
each stylesheet you link to a page, you would just need to add an
additional <link> element

3.2 DESIGN A WEBPAGE USING CSS

CSS Syntax: A CSS syntax consists of a selector and a declaration

block. The selector points to the HTML tag/element you want to style.
The declaration block contains one or more declarations separated by
semicolons.

Each declaration includes a CSS property name and a value,

separated by a colon. Multiple CSS declarations are separated with
semicolons, and declaration blocks are surrounded by curly braces.

[Link]

h1{

color:aliceblue;

font-size:35px;

background-color: black;}

h2{

color:blue;

background-color: brown;}
 HTML:

<html><head><title>gokul gowri</title>

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

</head><body bgcolor="green">

<center><h1>gokul</center></h1><br><br>

<center><h2>gowri</center></h2>

</body></html>

3.3 CSS SELECTORS:

CSS selectors are used to "find" (or select) the HTML elements you want
to style.
CSS element Selector: The element selector selects HTML tags based
on the tag name.
p { text-align: center;
color: red;}
CSS id Selector: The id selector uses the id attribute of an HTML tag
to select a specific [Link] select an element with a specific id, write a
hash (#) character, followed by the id of the tag.

HTML tag with id="para1":

#para1 { text-align: center;

color: red;}
CSS class Selector: The class selector selects HTML tag with a specific
class [Link] select elements with a specific class, write a period (.)
character, followed by the class name.
HTML tag with class="header"
.header {
text-align: center;
color: red;
}
 Example to demonstrate CSS Selectors:

HTML

<HTML><HEAD>

<TITLE>GOKUL GOWRI</TITLE>

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

</HEAD><BODY>

<CENTER><H1 id="name1">GOKUL</CENTER></H1><br>

<p>Gokul is very smart and dynamic student</p><br><br>

<CENTER><H1 id="name2">GOWRI</CENTER></H1><br>

<p>Gouri is very smart and dynamic student</p>

</BODY></HTML>

CSS

#name1{color:brown;

font-size:35px;

margin-left: 50px; }

#name2{color:red;}

p{ color:blue;

font-size: 25px;

margin-left: 350px;}

*{background-color: yellow;}
CSS Universal Selector: The universal selector (*) selects all HTML
elements on the page.
The CSS rule below will affect every HTML tag on the page:
* { text-align: center;

color: blue;

}
CSS Comments: A CSS comment is placed inside the <style> element,
and starts with /* and ends with */

<html><head><style>

p { color: red; /* Set text color to red */}

</style></head><body>

<h2>My Heading</h2>

<!-- These paragraphs will be red -->

<p>Hello World!</p>

<p>This paragraph is styled with CSS.</p>

<p>CSS comments are not shown in the output.</p>

</body></html>

3.4 FONT FORMATTING USING CSS

Text Properties:

Property Description Values

color Sets the color of a text RGB, hex, keyword

line-height Sets the distance between lines normal, number, length, %

letter- Increase or decrease the space

normal, length
spacing between characters

text-align Aligns the text in an element left, right, center, justify

text- none, underline, overline,

Adds decoration to text
decoration line-through

Indents the first line of text in

text-indent length, %
an element

text- Controls the letters in an none, capitalize, uppercase,

transform element lowercase
CSS Basic Properties: Here are some basic CSS properties to work with.

List Properties

Property Description Values

Sets all the properties for a list-style-type, list-style-position,

list-style
list in one declaration list-style-image, inherit

list-style- Specifies an image as the

URL, none, inherit
image list-item marker

list-style- Specifies where to place the

inside, outside, inherit
position list-item marker

Border Properties

Property Description Values

Sets all the border

border-width, border-style, border-
border properties in one
color
declaration

Sets all the bottom

border- border-bottom-width, border-bottom-
border properties in
bottom style, border-bottom-color
one declaration

border- Sets the color of the

border-color
bottom-color bottom border

border- Sets the style of the

border-style
bottom-style bottom border

border- Sets the width of the

border-width
bottom-width bottom border

Sets the color of the color_name, hex_number,

border-color
four borders rgb_number, transparent, inherit

Sets all the left border

border-left-width, border-left-style,
border-left properties in one
border-left-color
declaration

border-left- Sets the color of the

border-color
color left border
border-left- Sets the style of the
border-style
style left border

border-left- Sets the width of the

border-width
width left border

Sets all the right

border-right-width, border-right-style,
border-right border properties in
border-right-color
one declaration

none, hidden, dotted, dashed, solid,

Sets the style of the
border-style double, groove, ridge, inset, outset,
four borders
inherit

Sets all the top border

border-top-width, border-top-style,
border-top properties in one
border-top-color
declaration

Sets the width of the

border-width thin, medium, thick, length, inherit
four borders

CSS Border Style:

 dotted - Defines a dotted border.
 dashed - Defines a dashed border.
 solid - Defines a solid border.
 double - Defines a double border.
Applications of background colour, Border, <div> etc
HTML
<HTML><HEAD><TITLE>GOKUL GOWRI</TITLE>
<link href="[Link]" type="text/css" rel="stylesheet">
</HEAD><BODY>
<div class="outer">
<div class="box">
<div class="inner">
</div>
</div>
</div></BODY></HTML>
CSS
*{background-color: yellow;}
.outer{
width: 900px;
height: 700px;
background-color: green;
border: 5px solid;
 border-color: red;
margin: 100px;
padding: 100px; }
.box{
width: 600px;
height: 450px;
background-color: aqua;
padding: 100px;
border: 5px solid;
border-color: blue; }
.inner{
width: 400px;
height: 200px;
background-color: brown;
padding: 100px;
border: 30px dotted;
border-color: blueviolet; }

Font Properties

Property Description Values

font-style, font-variant, font-weight,

Sets all the font
font-size/line-height, font-
font properties in one
family, caption, icon, menu, message-
declaration
box, small-caption, status-bar, inherit

font- Specifies the font family

family-name, generic-family, inherit
family for text

xx-small, x-small, small, medium,

Specifies the font size of
font-size large, x-large, xx-large, smaller, larger,
text
length, %, inherit

Specifies the font style

font-style normal, italic, oblique, inherit
for text

Specifies whether or not

font- a text should be
normal, small-caps, inherit
variant displayed in a small-
caps font
Application of border, float
HTML
<html><head><title>div</title>
<link rel='stylesheet' type='text/css' media='screen' href='[Link]'>
</head><body>
<div class="outer">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
</div>
</body></html>
CSS
.outer{ idth:100%;
height: 500px;
background-color:cyan;
padding: 10px; }
.box1{ width:40%;
height: 30%;
background-color:blue;
float: left;
margin: 10px; }
.box2{width:40%;
height: 30%;
background-color:blueviolet;
float: left;
margin: 10px; }
.box3{ width:40%;
height: 30%;
background-color:brown;
float: left;
margin: 10px; }
.box4{
width:40%;
height: 30%;
background-color:gold;
float: left;
margin: 10px; }
 3.5 TABLE FORMATTING USING CSS

Layout the table data using CSS List Table

The table-layout property in CSS sets the algorithm that lays out table
cells, rows, and columns. The syntax is table-layout:
auto|fixed|initial|inherit;. The default value is auto.
The table-layout: fixed option renders the table faster. When this option
is applied, the browser uses any defined widths from the table's first
row to define column widths. If no widths are present on the first row,
the column widths are divided equally across the table.
To create a table using CSS, you can:
 Create a master div for the table.
 Add a table caption.
 Create a table header row.
 Add table header cells.
 Create the table body.
 Create table rows.
 Create table cells in the rows.

3.6 USE CSS BOX MODEL

The CSS Box Model is a container that defines how HTML elements
are organized on a screen. It includes properties such as: Margins,
Padding, Borders, Content. The CSS Box Model can be used to
customize the layout of different elements on a web page. For example,
you can use the border property to specify the:
 Border size
 Border style (solid, dotted, or dashed)
 Border color
CSS box model to define rectangular boxes. The CSS box model
is a set of rules that define how elements are rendered on web pages.
The model describes how rectangular boxes are laid out on a web page.
The box model is composed of four parts:

 Content area: Where any text, images, or other HTML elements are
displayed
 Padding area: Optionally surrounds the content area
 Border area: Optionally surrounds the content area
 Margin area: Optionally surrounds the content area
3.7 Use CSS to display positioning

The CSS position property defines the position of an element in a

document. The position property can be set to: Static, Relative,
Absolute, Fixed.

The position property works with the following properties to

determine the final position of an element on a page: Left, Right, Top,
Bottom, Z-index. The distance of an HTML element from the edge of the
viewport is specified by the top, right, bottom, and left properties.

CSS Positioning – Static, Fixed, Relative, Absolute

 Static - this is the default value, all elements are in order as they
appear in the document.

 Relative - the element is positioned relative to its normal position.

 Absolute - the element is positioned absolutely to its first positioned

parent.

 Fixed - the element is positioned related to the browser window.

3.8 Use CSS Float property

The CSS float property controls the positioning and formatting of

content on a page. It's most commonly used to wrap text around images.

The float property can have one of the following values:

 left: The element floats to the left of its container.

 right: The element floats to the right of its container.

Application of <div>(3)
HTML
<html><head><title>div</title>
<link rel='stylesheet' type='text/css' href='[Link]'>
</head><body>
<div class="main_body">
<div class="header"> </div>
<div class="content">
 <div class="left"> </div>
<div class="right"> </div>
</div>
<div class="footer"> </div>
</div>
</body></html>

CSS
.header{ width: 100%;
height: 150px;
background-color:gold;
border-bottom: 5px solid;
border-color: cyan; }
.left{ width: 20%;
height: 500px;
background-color: blueviolet;
float: left; }
.right{ width: 80%;
height: 500px;
background-color:brown;
float: left; }
.footer{ width: 100%;
height: 150px;
background-color:green;
float: left;
border-top: 5px solid;
border-color: bisque; }
 UNIT 4: JAVA SCRIPT

JavaScript is one of the most popular client-side scripting language.

Now a days most of the webpage contains JavaScript. JavaScript provides a
large number of built-in functions for the programmers. JavaScript is mainly
used in all websites for the validation purpose. Now a days JavaScript is not
only limited to client side scripting but then it has steps in server side
scripting too.
SCRIPT tag: Scripts are program codes written inside HTML pages. In an
HTML page, JavaScript is written inside <SCRIPT>and </SCRIPT>tags.
DISPLAY ELEMENTS: JavaScript can "display" data in different ways:
Writing into an HTML element, using inner HTML.

 Writing content into document using [Link]().

<html><head><title>Document</title></head>
<body>
<script>
[Link](5 + 6);
</script>
</body></html>

 Writing into an alert box, using alert().

We can use an alert box to display data:

<html><head><title>Document</title></head>
<body>
<script>
alert(5 + 6);
</script>
</body></html>

 The [Link]() method in JavaScript is used to print messages and values

to the console. This is useful for debugging and verifying the values of
variables in code.
The syntax for using [Link]() is:

[Link](message);

[Link]("Hello, World!");
var x = 10;
[Link](x);

 To access an HTML element, JavaScript can use the

[Link](id) method.
The id attribute defines the HTML element. The innerHTML property defines
the HTML content:

<html><body>
<p>My First Paragraph.</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = 5 + 6;
</script>
</body></html>

prompt() to input data

The prompt() method displays a dialog box that prompts the user for input.

Syntaxt:

Variable_name=prompt(Message to be prompted, default text);

Prompt arguments are optional.

VARIABLES and CONSTANTS

Variables are containers for storing Data.
JavaScript Variables can be declared in 3 ways:
 Automatically
 Using var
 Using let
JavaScript constant can be created using keyword const
 Usage is given below.

<html><body>
<script>
var x=5;
var x=100;
[Link](“value of x is”+x);
</script>
</body></html>
output
x=100
Note:- In the previous example, if the x were declared using let , we get
nothing.
MATHEMATICAL OPERATORS
The operators used for mathematical operations like addition,
subtraction, multiplication, division etc are called Arithmetic operators.
JavaScript uses the following arithmetic operators for various mathematical
operations.

Operator Name Description

+ Addition Adds two operands
- Subtraction Subtracts the second operand from the first
* Multiplication Multiply both operands
/ Division Divide the numerator by the denominator
% Modulus Results the remainder of an integer division
++ Increment Increases an integer value by one
-- Decrement Decreases an integer value by one

<html><head></head><body>
<script>
var num1=10
var num2=20
sum=num1+num2
[Link]("sum ="+sum)
</script>
</body></html>
OPERATOR PRECEDENCE

Operator precedence describes the order in which operations are performed

in an arithmetic expression.
The arithmetic operators below are listed in the order of highest precedence
to the lowest precedence.

++ Increment
-- Decrement
/ Division
* Multiplication
% Modulus
+ Addition
- Subtraction
CONDITIONAL LOGIC
Conditional logic in JavaScript allows to run different blocks of code
depending on a condition.
If Statement: It is used to execute a group of statements when a given
condition is true.
Syntax
if(test expression)
{
Statements to be executed when test expression is True;
}
if… else: It is used to execute a group of statements based on some conditions
Syntax
if(test_expression)
{
Statements to be executed when test expression is True;
}
else
{
Statements to be executed when test expression is False;
}
<html >
<head>
<title>Document</title>
</head><body>
<script>
var age=prompt("Enter your Age");
if(age>=18)
{
[Link]("Eligible for voting");
}
else
{
[Link]("Not eligible for voting");
}
</script></body></html>

if....elseif: It allows to execute different codes for more than two conditions
Syntax
if (condition1)
{
code to be executed if condition1 is true;}
elseif (condition2) {
code to be executed if condition2 is true;}
elseif (condition3) {
code to be executed if condition3 is true;}
…………..
…………
else
{
code to be executed if all conditions are false;
}
JavaScript program to show simple if
<html><head></head><body>
<button onclick="show()">Click Me</button>
<script>
function show(){
var num1= prompt("Enter a Number");
if(num1%2==0){
[Link]("The number is Even") }
else{
[Link]("The number is odd")
}
}
</script></body></html>

Conditional Operator(Ternary Operator)

The conditional operator in JavaScript is a ternary operator, that
operates on 3 operands.
The symbols ? and : together is called as conditional operator.
Syntax:
condition ? expression1 : expression2;
expression1 is executed when condition is true ,otherwise expression2 will be
executed.

Example: Result=(x>10)?1:0;

Comparison operator (Relational operators)

Comparisons are used to check the relationship between variables and/or
values. Result of comparison will always be true or false.
Operator Meaning Example Result
== Equal To $x = = $y FALSE
!= Not Equal To $x != $y TRUE
< Less Than $x < $y TRUE
> Greater Than $x > $y FALSE
<= Less Than or Equal To $x <= $y TRUE
>= Greater Than or Equal to $x >= $y FALSE
Switch operator

The switch statement to select one of many code blocks to be executed. if..else
if can be replaced by switch.
Syntax:
switch(expression)
{
case x:
 //block
break;
case y:
//block
break;
.. . . . .
default:
// block
}
Logical Operators: Logical operators are used with one or more relational
expressions. It returns either True or False.
Logical operators used in JavaScripts are

Operator Description Example

&& Logical and (x < 10 && y > 1) is true

|| Logical or (x == 5 || y == 5) is false

! Logical not !(x == y) is true

FLOW CONTROL IN JAVASCRIPT

There are number of ways to control or alter the normal flow of execution in
a JavaScript program. Some of them are looping statements. Loops can
execute a block of code a number of times.

while loop: While loop execute a block of statement based on a condition.

The condition is evaluated first and execution follows till the condition is true

Syntax
while (condition)
{
Code to be executed;
}
<html><head><title>Document</title></head><body>
<script>
var i=1;
while(i<=10)
{
[Link](i);
i++;
} </script></body></html>
The above code prints first 10 natural numbers.
for loop: The "for" loop in JavaScript is a type of loop that allows you to
execute a block of code repeatedly for a specified number of times. It has a
specific syntax that consists of three parts: the initialization, the condition,
and the increment.
Syntax
for (initialisation; test condition; increment)
{
code to be executed while condition is true;
}
<html><head><title>Document</title>
</head>
<body>
<script>
var i;
for(i=1;i<=20;i++)
{
[Link](i);
}
</script></body></html>
The above code prints first 20 natural numbers.
break statement
The break statement is used within loop to jump out of a loop. It
forcefully ends the execution of loop even if condition is true.
When a break is added to the above while loop program. The statements are
not executed repeatedly.
<html><head>
<title>Document</title>
</head>
<body>
<script>
var i=1;
while(i<=15)
{
[Link](i);
i++;
break;
}
</script>
</body>
</html>
 ARRAYS IN JAVASCRIPT

An array is a special variable, which can hold more than one value.

If we have a list of items (a list of car names, for example), storing the cars in
single variables could look like this:

let car1= "Saab";

let car2= "Volvo";
let car3 = "BMW";
However, what if you want to loop through the cars and find a specific one?
And what if you had not 3 cars, but 300?

The solution is an array!

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:

array_name = [item1, item2, ...];

Example: const cars = ["Saab", "Volvo", "BMW"];

JavaScript program to show an array and select via index

<html><head></head><body>
<button onclick="show()">Click Me</button>
<script>
function show(){
var arr=["Apple","Orange","Mango",12];
[Link](arr);
[Link](arr[1]);
}
</script></body></html>
The first item in array is at index 0 and is accessed as cars[0]
The second item in array is at index 1 and is accessed as cars[1]
and so on.
FUNCTIONS IN JAVASCRIPT
A function is defined using the keyword function as follows...
function function_name( arguments)
{
statement block ;
}
The statement block is only executed when the function is called by name
elsewhere in the script.
JavaScript program to show a function
<html><head></head><body>
<button onclick="show()">Click Me</button>
<script>
function show(){
var num1=10
var num2=20
sum=num1+num2
[Link]("sum ="+sum)
}
</script>
</body></html>

Function call: Function call is a statement which invokes a function.

Function Arguments: A function argument is a value that is passed to a
function when it is called. The function can then use the value to perform its
operation.
PASSING of ARGUMENTS:
We can pass both variables and literals as arguments when calling a
function. Functions can return results using the return statement.
In JavaScript, arguments are passed by value. This means that when
we pass a variable to a function, the function receives a copy of the variable's
value, not the variable itself. This means that any changes you make to the
variable inside the function will not affect the variable outside the function

<html><head> <title>Document</title>
</head>
<body>
<script>
var x = 5;
function changeValue(x)
{
x = 10;
}
[Link]("Value of x before call : "+x);
changeValue(x);
[Link]("Value of x after call : "+x);
</script></body></html>

BUILT-IN FUNCTIONS
The length property returns the length of a string.
str=”Hello”;
[Link]([Link])
The above returns 5
Built in functions means keywords with predefined meaning.
JavaScript specifications include several built-in functions.
charAt() : Returns the character at the specified position.
Eg: var s= “Welcome”;
alert([Link](3));
The output will be ‘c’ since the fourth character is ‘c’
toLowerCase() : Returns the calling string value converted to lower case.
var s= “Welcome”;
alert([Link]());
The output will be “welcome”
toUpperCase() : Returns the calling string value converted to uppercase.
var s= “Welcome”;
alert([Link]());
The output will be “WELCOME”
substring() : Returns the characters in between two indexes in the string.
var s= “Welcome”;
alert([Link](0,5));
The output will be “Welco”
trim() : Removes the spaces.
let text = " Hello World! ";
let result = [Link]();
[Link](text);
[Link](result);
Output:
Hello World!

Hello World!

JavaScript program to show simple calculator

<html><head> <title>Document</title></head>
<body><center><h1><u>SIMPLE CALCULATOR</u></h1>
<h2>Enter first number : </h2><input type="text" id="first">
<h2>Enter second number : </h2><input type="text" id="second">
<h2>Result : </h2><input type="text" id="result">
<button onclick="Display()">Click Me</button>
<script>
function Display(){
var num1=[Link]("first").value
var num2=[Link]("second").value
var sum=parseInt(num1)+parseInt(num2)
[Link]("result").value=sum
alert(sum)
}
</script></center></body></html>
USAGE OF EVAL ( ) METHOD
The eval( ) method evaluates a numeric expression given as a string into a
numeric value.
let x = 10;
let y = 20;
let text = "x * y";
let result = eval(text);
[Link]("demo").innerHTML = result;

output:
200

The following example accepts the expression in a user prompt and evaluates
the expression using the eval( ) method. The script illustrates the usage of
the eval() method,

The following program finds the square root of a number ;which is input
through a textbox.
<html><body><script>
function validateForm()
{
var num=[Link];
[Link]=sqrt(num);

}
</script>
<form name="myForm" method="POST">
Enter Num: <input type="text" name="txtnum"><br>
Square root: <input type="text" name="txtsqrt">
<input type="button" value="Calculate" onclick="validateForm()">
</form>
</body></html>
Output:
INPUT FORM VALIDATION
Here we have a form 'myForm' and needs to be validated. If a form field
(fname) is empty, this function alerts a message, and returns false, to prevent
the form from being submitted:
For that a javascript function called 'validateForm' is written and assigned to
the onsubmit event handler of the 'myForm'. When a user hits the submit
button, the javascript code runs and checks if the input field, ie Name is
empty or not.

<html><body><script>
function validateForm()
{
let x = [Link]["myForm"]["fname"].value;
if (x == "")
{
alert("Name must be filled out");
return false;
}
}
</script>
<form name="myForm" action="/action_page.php" onsubmit="return
validateForm()" method="post">

Name: <input type="text" name="fname">

<input type="submit" value="Submit">
</form></body></html>

IMAGE MANIPULATION with JAVASCRIPT

Create Image: We can create an <img> element by using the
[Link]() method.
var x = [Link]("IMG");

Some important properties of Image Object.

Property Description

Alt: Sets or returns the value of the alt attribute of an image

Height: Sets or returns the value of the height attribute of an image

Src: Sets or returns the value of the src attribute of an image

Width: Sets or returns the value of the width attribute of an image

The above properties can be set by using setAttribute( )
Syntax:
[Link](name, value)
Example:
[Link]("src", "img_pulpit.jpg");
[Link]("width", "304");
The image can be inserted in the webpage using appendChild( )
[Link](x);
Image Rollover Effect: An image rollover is basically two different images.
One is displayed after the page loaded up, the other one is displayed only
when the user moves his mouse over the first one.

<html><head><title>JavaScript Image Rollovers</title>

<script>
function move_in(img_name,img_src)
{
document[img_name].src=img_src;
}
function move_out(img_name,img_src)
{
document[img_name].src=img_src;
}
</script></head>
<body>
<a OnMouseOver="move_in('image1','[Link]')"
OnMouseOut="move_out('image1','[Link]')">

<img src="[Link]"
alt="Move your mouse over here!" name="image1">
</a></body></html>

JAVASCRIPT LIBRARIES
A JavaScript library is a collection of pre-written JavaScript code that
can be used to perform common tasks. Libraries can be used to add
functionality to a website, such as the ability to add a search bar or a slider.

Here are some popular JavaScript libraries:

jQuery: A library that makes it easier to select and manipulate elements on a
web page.

React: A library that is used to build user interfaces.

Angular: A framework that is used to build single-page applications.

[Link]: A framework that is used to build user interfaces.

jQuery library sample program:
<html><head>
<script
src="[Link]
/script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body></html>

CANVAS IN JAVASCRIPT

The HTML5 canvas tag is used to draw graphics on a web page using
JavaScript. The <canvas> element is a container for graphics, and we need
JavaScript to draw the graphics.

Attributes of <canvas>:
The <canvas> element must have an id attribute so it can be referred to by
JavaScript.
The width and height attribute is necessary to define the size of the canvas

<canvas id="myCanvas" width="200" height="100"></canvas>

To add a border to canvas, use a style attribute:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
grey"> </canvas>
Initially, the canvas is blank. To draw something, we need to access the
rendering context and use it to draw on the canvas.
getContext() method that returns a render context object.
The getContext() takes one argument which is the type of context.

[Link]('2d')

To draw a rectangular shape, we use fillRect() method and fillStyle() is used

to fill colour
fillRect(0, 0, 100, 100);
fillStyle = "red";
 <html><head>
<title>HTML5 Canvas</title>
<script>
function draw() {
var canvas = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link] = "red";
[Link](0, 0, 100, 100);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="500" style="border:3px solid
grey"></canvas>
<button onclick="draw()">Draw Rectangle</button>
</body></html>
Sample program contain HTML, CSS and JavaScript
program to show COLOUR CHANGES
<html><head><title>Document</title></head>
<style>
#screen{
width: 300px;
height: 300px;
border: 5px solid;
}</style>
<body>
<div id="screen">
</div><br>
<button onclick="color('Red')">Red</button>
<button onclick="color('Green')">Green</button>
<button onclick="color('Orange')">Orange</button>
<button onclick="color('yellow')">yellow</button>
<script>
function color(col)
{
[Link]("screen").[Link]=col
}
</script></body></html>