NIELIT (DOEACC) 'O' Level Syllabus

January 2020 of Revision-V

'O'level
Module-2[M2-R5]
Web Designing &
Publishing
Study Material &

Objective Question Bank

Chief Editor
A. K. Mahajan
Compiled and Edited by
Mahima Tripathi
Computer Graphics by
Balkrishna, Charan Singh, Anurag Pandey
Editorial Office
12, Church Lane Prayagraj-211002
Mob. : 9415650134
Email : [email protected]
website : www.yctbooks.com / www.yctfastbook.com
© All rights reserved with Publisher
Publisher Declaration :
Edited and Published by A.K. Mahajan for YCT Publications Pvt. Ltd. and printed by Roop
Printing Press, Prayagraj. In order to Publish the book,
full care has been taken by the Editor and the Publisher,
still your suggestions and queries are welcomed.
In the event of any dispute, the judicial area will be Prayagraj. Rs. : 295/-
 Contents
M2R5
Web Designing & Publishing

2.3 Sublime Text Editor -----------------------------18

1. (i) Procedure of Downloading Sublime Text
INTRODUCTION TO WEB DESIGN Editor -------------------------------------------------18
1.0 Introduction ----------------------------------------- 6 (ii) Linting in Sublime Text Editor--------------19
1.1 Introduction to Internet -------------------------- 6 2.4 File Creation and Editing in Notepad++ --19
(i) History of Internet ------------------------------- 6 (i) Saving File in Notepad++ --------------------19
(ii) Features of Internet ----------------------------- 6 2.5 File Creation and Editing in Sublime Text
(iii) Applications of Internet ----------------------- 7 Editor -------------------------------------------------20
(iv) Applications of Internet's Advantages or
(i) Saving file in Sublime Text Editor ---------20
Disadvantages ---------------------------------------- 7
(v) How Internet Works? --------------------------- 7 2.6 Other Useful Text Editors ---------------------21
1.2 WWW------------------------------------------------- 8 Practice Questions with Explanatory
(i) Difference between World Wide Web & Solutions --------------------------------------- 22-23
Internet ------------------------------------------------- 8
(ii) Evolution of the www -------------------------- 9 3.
(iii) Web Browsing Software ---------------------- 9 HTML BASICS
1.3 Website --------------------------------------------- 10
3.0 Introduction ----------------------------------------24
(i) Protocol ------------------------------------------ 10
(ii) Domain Name --------------------------------- 11 3.1 Introduction of HTML Basics ----------------24
(iii) Web Server ------------------------------------ 11 (i) Basic Structure of HTML --------------------24
1.4 How Website Works? -------------------------- 11 3.2 Head Section & It's Elements ----------------25
1.5 Web Page ------------------------------------------ 12 3.3 Writing a program using HTML in
(i) URL (Uniform Resource Locator)---------- 12 Notepad ----------------------------------------------26
1.6 Front End ------------------------------------------ 13 (i) What is Element -------------------------------27
1.7 Back End ------------------------------------------- 13 3.4 Formatting Tags ----------------------------------28
1.8 Client and Server Scripting Language ---- 13 (i) Bold <b> Element ------------------------------28
1.9 Responsive Web Design----------------------- 14 (ii) Strong Text Element --------------------------28
1.10 Types of Website ------------------------------- 14 (iii) Italic Text Element ---------------------------29
Practice Questions with Explanatory (iv) Emphasized Text Element ------------------29
Solutions---------------------------------------- 15-16 (v) Strikethrough Text Element -----------------29
2. (vi) Underline Text Element ---------------------29
EDITORS (vii) Marked Text Element -----------------------29
(viii) Deleted Text Element ----------------------30
2.0 Introduction --------------------------------------- 17 (ix) Inserted Text Element------------------------30
2.1 Notepad --------------------------------------------- 17 (x) Superscript Text Element --------------------30
(i) Advantages of using Notepad --------------- 17
(xi) Subscript Text Element ----------------------30
2.2 Downloading free Editors : Notepad++ - 17
(xii) Bigger Text Element ------------------------30
(i) Process of Downloading Notepad++ ------ 18
(ii) Features of Notepad++ ----------------------- 18 (xiii) Small Text Element-------------------------31
(iii) Pros & Cons of Notepad++ ---------------- 18 (xiv) HTML DIV Element -----------------------31
2
 (xv) Preformat Element -------------------------- 31 4.4 CSS Properties ------------------------------------59
(xvi) Line Break <br> Element ---------------- 31 (i) CSS Background Properties ------------------59
(xvii) Drawing Line <hr> Element------------- 32 (ii) CSS Selectors Properties ---------------------61
(xviii) Quote Element----------------------------- 32 (iii) CSS Box Properties --------------------------63
(xix) Anchor Links <a> Element -------------- 32 (iv) CSS List ----------------------------------------65
(xx) Links-Colors & Download link----------- 33 (v) CSS Tables --------------------------------------66
(A) Border-Collapse -----------------------------67
(xxi) Image Tag Element ------------------------ 33
(B) Striped Table ---------------------------------67
(xxii) Comments ----------------------------------- 33
(C) Table Padding --------------------------------68
3.5 HTML Tables ------------------------------------ 34 (D) Background Image in table ----------------68
(i) Creating Tables -------------------------------- 34 (vi) CSS Menu Design ----------------------------71
(ii) Table Attributes------------------------------- 34 (vii) CSS Image Gallery---------------------------74
A. Captioning the table -------------------------- 34 Practice Questions with Explanatory
B. Creating headings in tables ------------------ 34 Solutions --------------------------------------- 75-76
C. Setting a border on a table ------------------ 35
D. Changing the background of the table ---- 35 5.
E. Setting the alignment ------------------------- 35 CSS FRAMEWORK
F. Using Cell Padding and Cell Spacing
Attributes -------------------------------------------- 36 5.1 Introduction of W3.CSS -----------------------77
G. Using Colspan and Rowspan Attributes -- 36 (i) Features of W3.CSS ---------------------------77
H. Setting the height and width of the table - 37 5.2 Use of W3.CSS in website Development -77
3.6 HTML List ---------------------------------------- 37 (i) How to Use W3.CSS --------------------------77
3.7 HTML Forms------------------------------------- 38 5.3 W3.CSS Colors Basics -------------------------77
3.8 Forms Element ----------------------------------- 38 (i) W3.CSS Colors ---------------------------------78
3.9 HTML Form Program ------------------------- 41 (ii) W3.CSS Text Colors--------------------------78
(iii) W3.CSS hover Colors -----------------------78
3.10 HTML Frame ------------------------------------ 42
(iv) W3-hover-text Colors ------------------------78
3.11 Introduction of HTML5 ---------------------- 43
(v) W3.CSS Container ----------------------------79
3.12 New Element of HTML5--------------------- 43
(vi) Article and Section ---------------------------79
(i) HTML 5 Form Validation ------------------- 46
5.4 W3.CSS Pannel -----------------------------------79
(ii) New Input Types in HTML 5 -------------- 46
(i) Using Panel to make notes -------------------80
3.13 HTML 5 Embed Tag -------------------------- 48
(ii) Panels for Quotes ------------------------------80
3.14 HTML Layout ----------------------------------- 49 (iii) Panel for Alerts --------------------------------80
(i) Create HTML Layout Using Table -------- 49 (iv) Panel as Cards ---------------------------------81
(ii) To Make Website Layout in HTML Using (v) W3.CSS Round Panels ------------------------81
DIV, Span -------------------------------------- 49 (vi) W3.CSS Opening & Closing Panels ------81
Practice Questions with Explanatory 5.5 W3.CSS Border ------------------------------------82
Solutions---------------------------------------- 50-52 (i) W3.CSS Thick Border-------------------------82
(ii) W3.CSS Round Border -----------------------83
4. (iii) W3.CSS Hoverable Border -----------------83
CASCADING STYLE SHEETS (iv) W3.CSS Fonts ---------------------------------83
(v) W3.CSS External Fonts-----------------------84
4.1 Introduction of CSS----------------------------- 53 5.6 W3.CSS Text --------------------------------------84
(i) Features of CSS -------------------------------- 53 (i) W3.CSS Text Alignement --------------------84
(ii) Advantages of CSS --------------------------- 53 (ii) Wide & Slim Text -----------------------------84
4.2 Types of CSS ------------------------------------- 53 (iii) Shadow------------------------------------------85
4.3 CSS Selectors ------------------------------------- 55 (iv) Opacity ------------------------------------------85
3
5.7 W3.CSS Tables ---------------------------------- 85
7.
5.8 W3.CSS List -------------------------------------- 90
PHOTO EDITOR
5.9 W3.CSS Images --------------------------------- 92
7.0 Introduction -------------------------------------- 127
(i) Images as a Card ------------------------------ 93
7.1 Main Features of Photo Editing------------ 127
5.10 W3. CSS Images Effect----------------------- 93 7.2 To Use Selection ------------------------------- 127
5.11 W3. CSS Grid ----------------------------------- 95 (i) Selection tool --------------------------------- 127
(i) Columns for small screens (Smart phones)95 (ii) To Use Selection tool for using Lasso
Tool ------------------------------------------------- 128
(ii) Columns for medium screens (Tablets) -- 95
(iii) Combination of Tools ---------------------- 129
(iii) Column for large screen (laptop) ---------- 96 (iv) To Use Edit Brush -------------------------- 129
(iv) W3. CSS Mixed Grid Layout -------------- 97 (v) Text Tool-------------------------------------- 130
(v) Mixed Layout for Mobile, Tablet & (vi) Layers ----------------------------------------- 130
(vii) Brightness/Contrast ------------------------ 131
Desktop ---------------------------------------------- 97
(viii) Using Basic Tab --------------------------- 131
Practice Questions with Explanatory (ix) To use Standard Tab ------------------------ 131
Solutions---------------------------------------- 98-99 (x) To Improve Color & Tone ----------------- 132
(xi) Filters ------------------------------------------ 132
6. Practice Questions with Explanatory
Solutions ------------------------------------ 133-134
JAVASCRIPT AND ANGULAR JS
8.
6.1 Introduction --------------------------------------100
WEB PUBLISHING AND
6.2 JavaScript and Angular JS -------------------100 BROWSING
6.3 Client Side Scripting language -------------100
8.0 Introduction -------------------------------------- 135
(i) Advantages and Disadvantages of Client 8.1 World Wide Web------------------------------- 135
side Scripting Language -------------------------100 8.2 _Standard Generalized Markup Language135
6.4 Variables in JavaScript -----------------------101 8.3 Basics of Web Hosting ----------------------- 135
(i) Type of Hosting ------------------------------ 136
6.5 Data Type in JavaScript ----------------------102
(ii) Basic Features of Web Hosting ----------- 136
6.6 Operators in JavaScript -----------------------104 8.4 Document Interchange Standard ---------- 137
6.7 Conditional Statement in Javascript ------109 (i) Connectionless and Connection-Oriented
Protocol --------------------------------------------- 137
(i) Different types of conditional statement -109
(ii) Stateless and Stateful Protocol ------------ 137
(ii) To Display pop-up Message box ----------111 8.5 Components of Web Publishing ----------- 138
6.8 Javascript Events -------------------------------111 8.6 Document Management ---------------------- 139
(i) Important Events -----------------------------112 8.7 Web Page design Ideas and Principels -- 139
(i) Planing of Website Design ----------------- 139
(ii) HTML Events --------------------------------114
8.8 Search Engine ----------------------------------- 141
(iii) Form Events ----------------------------------115 8.9 Meta Search Engine --------------------------- 141
6.9 Form validation in JavaScript --------------117 8.10 World Wide Web (WWW) ----------------- 141
6.10 Angular JS ---------------------------------------119 8.11 Web Browser ----------------------------------- 142
8.12 HTTP---------------------------------------------- 142
6.11 Angular JS Expressions----------------------122
8.13 Publishing Tool -------------------------------- 142
Practice Questions with Explanatory Practice Questions with Explanatory
Solutions------------------------------------- 125-126 Solutions ------------------------------------ 143-144
4
 SYLLABUS
M2-R5 (Web Designing & Publishing)
Outline of Course
1. Introduction to Web Design and Editors, HTML Basis 25
2. Cascading Style Sheets (CSS) 20
3. CSS Framework 15
4. JavaScript and Angular Js I 20
5. Photo Editor, Web Publishing and Browsing 20
Total 100

Detailed Syllabus

(i) Introduction to Web Design

Introduction of Internet, WWW, What is Website? How the Website Works?, Web pages, Front End, Back
End, Client and Server Scripting Languages, Responsive Web Designing, Types of Websites (Static and
Dynamic Websites)
(ii) Editors
Notepad, Downloading free editors: Notepad++, Sublime Text Editor, Making use of Editors, File creation
and editing, saving
(iii) HTML
HTML: Introduction, Basic Structure of HTML, Head Section and Elements of Head Section,
Formatting Tags : Bold, Italic, Underline, Strikethrough, Div, Pre Tag Anchor links and Named Anchors
Image Tag, Paragraphs, Comments,
Tables : Attributes – (Border, Cellpadding, Cellspacing, Height, width), TR, TH, TD, Rowspan, Colspan
Lists : Ordered List, Unordered List, Definition List, Forms, Form Elements, Input types, Input Attributes,
Text Input Text Area, Dropdown, Radio buttons, Check boxes, Submit and Reset Buttons
Frames : Frameset, nested Frames HTML5 Introduction, HTML5 New
Elements: Section, Nav, Article, Aside, Audio Tag, Video Tag, HTML5 Form
Validations: Require Attribute, Pattern Attribute, Autofocus Attribute, email, number type, date type, Range
type
(iv) CSS
Introduction to CSS, Types of CSS, CSS Selectors : Universal Selector, ID selector, Tag Selector, Class
Selector, Sub Selector, Attribute Selector, Group Selector, CSS Properties: Back Ground properties, Block
Properties, Box properties, List properties, Border Properties, Positioning Properties, CSS List CSS Tables,
CSS Menu Design CSS Image Gallery,
(v) CSS Framework
Web Site Development using W3.CSS Framework, W3.CSS Intro, W3.CSS Colors, W3.CSS Containers,
W3.CSS Panels, W3.CSSBorders, W3.CSSFonts, W3.CSS Text, W3.CSS Tables, W3.CSS List,
W3.CSSImages, W3.CSS Grid
(vi) JavaScript and Angular Js
Introduction to Client Side Scripting Language, Variables in JavaScript, Operators in JS, Conditions
Statements, JS Popup Boxes, JS Events, Basic Form Validations in JavaScript
(vii) Photo Editor
Features of Photo Editing: Tools: Selection tools, Paint Tools, Transform Tools, Text Tool, Layers,
Brightness/Contrast, Improve Colors and tone, Filters
(viii) Web Publishing and Browsing
Overview, SGML, Web hosting Basics, HTML, CGL, Documents Interchange Standards, Components of
Web Publishing, Document management, Web page Design Consideration and Principles, Search and Meta
Search Engines, WWW, Browser, HTTP, Publishing Tools.

5
 1 INTRODUCTION TO WEB DESIGN

1.0 Introduction: The expansion of the Internet occurred due to the

The process of creating a website is called web usefulness of the World Wide Web, which is the largest
designing. This includes many things such as web pages, source of information today. Any person can search
layout, content production and graphic design. This can required information at very low cost.
also be called web development process. Content for web
publishing can include text, video, digital images, media,
etc. Web designing focuses on factors like user interface
and other visual images to make the website attractive
and easy to use. A web designer uses many software
tools and languages to create a website. Publishers must
have a web server, a web publishing software, and an
Internet connection.
1.1 Introduction to Internet:
The full name of Internet is International Network. It Figure-1.1 Internet
was started by VintCurf in 1950, hence he is also called
the father of Internet. Internet is a network of networks. 1.1(ii) Features of Internet:
It connects all computers at a global level, thereby The Internet is a global service and available for
helping people exchange data among themselves. Data everyone to use. Even people located far away can use
available on the Internet is controlled with the help of the Internet very easily. Following are the main features
protocols. Services provided through internet are- email, of Internet–
web portals chat, social networking, blogging, online • It is easy to use. The web browser is designed very
transactions etc. simple so it can be learned and used easily.
1.1(i) History of Internet: • Internet services have a high degree of interaction with
The full name of Internet is International Network. It other media.
was started by VintCurf in 1950, hence he is also called
• The cost of development and maintenance of Internet
the father of Internet.
services is low comparatively.
Internet is a global system of interconnected
computer networks which is made up of many small and • Communication through the Internet is quite flexible.
big computer networks spread across the world It also provides communication facility through text,
connected through various communication mediums. It audio and video.
includes personal, public, educational, business and • The world’s fastest postal service called e-mail and we
government networks etc. It uses a common set of can communicate with any other person through
protocols for data transmission known as TCP/IP. The chatting anywhere in the world with in moment.
primary purpose of the Internet is to facilitate the
• Through internet, any one can get information about
transmission of information. To make this possible, many
any recognized person, institution, country, product
different tools are used on the Internet, important tools
etc.
among them are e-mail newsgroups, Telnet, Gopher, FTP
and Wide Area Network. World Wide Web (www) is • Online shopping of products can be through internet
known as most popular internet tool. from anywhere in the country or abroad.

M2R5 6 YCT
1.1(iii) Applications of Internet: ● In terms of finding a new job, you can search and
The services received through internet are called apply for many jobs in a very short time.
internet services. Internet services are as follows–
● Communication: Contacting through internet has Disadvantages of internet– Internet is a main
become easy, fast and cheap. In the Internet, one can assistant of human life. As many advantages, its
communicate with more than one person disadvantages are also seen–
simultaneously through e-mail, chat etc. ● Many businesses use email to market their products.
● Education– There have been many changes in the They send spam messages to our e-mail inbox. Many
field of education through the Internet. People can get times important e-mails get deleted due to spamming.
information about any topic through internet. ● There is a lot of wrong information available on the
Education can be obtained from home through virtual internet.
classes. ● A lot of time is wasted while surfing the internet.
● Business: There has been also a revolution in the field ● There is a danger of malware or virus, it removes all
of business through the Internet. With this, maximum the important files of the computer and the system
profit can be earned by business on a larger scale. crashes
● Entertainment: Through internet one can entertain at ● Internet distracts students.
home by downloading any movie, song etc. ● Internet reduces work productivity.
● Online Transaction: Online transactions can be using ● Due to excessive use of internet, one has to face health
the Internet. This is an easy way to do transactions related problems like migraine, effect on eyesight,
sitting at home. back pain, weight gain, depression etc.
● E-commerce: We can buy and sell anything online ● Important files can be easily taken by hackers.
through the internet. There are a huge number of web Hacking can take place to extract personal information
portals available for buying and selling. from people’s e-mail accounts, bank accounts and
mobile phones.
1.1(iv) Applications of Advantages or
● Pornography easily available into the hands of even
Disadvantages Internet: small children through the Internet.
Internet has become a necessity today, and we have ● Sometimes you end up spending too much while
felt this need because of the benefits we get from it. shopping online on the internet.
Advantages of internet– 1.1 (v) How Internet Works?:
● Through the Internet we are able to access various Internet is a type of interconnected network of many
types of online services. computers which are connected to each other through
● Important documents like Aadhar Card, PAN Card, various mediums. All these computers which are
Ration Card and Voter ID can be obtained online. connected to the Internet are divided into two types on
● Through social media sites, you can stay connected the basis of their function. One is called server and other
and communicate with your family, relatives, friends is called client. Both server and client are types of
and can also share photos and videos of events. computers which connect to each other through the
● From your phone you can pay water bill, electricity Internet, but the function of the server is to provide
bill, train ticket, hotel booking, taxi booking etc. Internet service and the client is the computer which
● Tasks like admission in college, filling forms for connects to the server through the Internet and receives
competitive examinations, submitting scholarship service. Like we use computers to explore the Internet or
forms can be completed without going to the to use various Internet services. Therefore, our computer
government office. will be considered a client computer in the Internet. At
● If you want to get detailed information about any new the same time, a server is also a computer but it is used
topic, the Internet is beating the library in this matter. as a server, in simple language, it is used as storage. This
You can get information about any topic within a computer is also connected to the Internet like our
minute. computer i.e. the client. Generally, web content is saved
M2R5 7 YCT
in these computers. When a client needs web content, the WWW (World Wide Web) is also called Web. This
client computer obtains that content by making a is the most popular service available on the internet. It is
connection to the server. This process is facilitated by thea huge group of information interconnected through
web browser and several Internet protocols. Whatever hyperlinks which can be accessed on the Internet with
we see on the Internet like website, video, image, song, the help of a web browser. It is the second most popular
movie etc are stored on any server. To show or use all Internet service after e-mail.
this content on the Internet, our computer (client) makes World Wide Web is a system that is connected to
a connection with that server and start communicating many computers with the help of Hyper Text documents.
It connects information together and to send this
among them selves. After which our computer receives
information from one place to another, Hyper text
the data from that server and shows it as per our
transfer protocol is used which exchanges data with the
instructions. When two computers connect together then
help of hyperlink.
they use TCP/IP to communicate with each other. The
Every page stored on the World Wide Web is called a
full name of TCP is Transmission Control Protocol. It
web page which is created using HTML (hyper text
transfers information or data in the form of small packets markup language).
from one computer to another. The full name of IP The World Wide Web is based on the client/server
(Internet Protocol) is Internet Protocol. It works as the model. The computer providing Internet service is called
address of the computer, that is, it tells the location of the
Web server and the user of this service is called Web
computer. Every computer throughout the Internet has its Client. Client Software is called web browser which runs
own Internet protocol. With its help, every computer on on the local computer.
the Internet can be identified, due to which information Server software runs on a web host, takes an
or data can reach the right computer. Internet connection and then launches a web browser to
That is, TCP transfers information or data in the access the web.
form of small packets and IP transmits that information 1.2(i) Difference between World Wide Web
or data to the right computer. It may have taken you time & Internet:
to read this and understand each process, but it is so fast
Internet (www) World Wide
that here you send the information and it gets there.
Web
Generally it depends on the speed of your internet data or
The estimated year of The World Wide Web,
internet connection. For example, you can take
origin of the Internet is Started in 1993.
WhatsApp which is very popular in India for messaging. 1969, although the
Similarly, communication takes place through the opening of the network to
internet and this is how the internet works. Because all commercial interests
the content present on the Internet is stored somewhere began only in 1988.
on another computer, like if they run a website then that The name of the first First version of the
website is stored on a server. version of the Internet World Wide Web is
1.2 WWW : was ARPANET. called NSFnet.
The Internet is a global system of interconnected Internet is a network of It holds files, folders
computer networks that connect various small and large computers, in which and documents stored
computer networks spread across the world. Personal, copper wire, fiber optic in different computers.
public, educational, business and government networks cable and wireless
etc are connected to it. It uses a common set of protocols network are used.
for data transmission known as TCP/IP. Primary This works by internet It works through
objective of internet is to ease the transmission of protocol. Hyper text transfer
information. Many different tools are used on the Protocol (HTTP).
Internet to make this possible. E-mail, newsgroup, telnet, It is base and It depends on the
gopher, FTP and wide area network are important tools. independent of the World Internet to function.
The World Wide Web (WWW) is the most popular Wide Web.
Internet tool. This is hardware. Its form is software.
M2R5 8 YCT
1.2(ii) Evolution of the www: can be used in operating systems like Windows, Linux,
www is a group of documents which are linked to Macintosh etc. It can also be downloaded from its
each other by hypertext. In hypertext document, Text official website.
Image, sound etc are included. www is a service of Opera– Opera is a free internet browser available
internet. www was first used by TIM BERNERS LEE at for mobile phones and computers. It includes features
CERN laboratory in 1989. In the World Wide Web, like tab browsing, page zooming, mouse gestures and an
information is stored in the form of websites. This integrated download manager etc. Opera comes pre-
website is stored on web server in the form of hypertext designed with a free Virtual Private Network (VPN) that
files. The World Wide Web is a system by which each works on both private and public free internet and
website is given a unique name. That is identified on the protects your location from hackers. Opera’s VPN blocks
web by the same name. your location when using the public Internet, providing
The full name of www is World Wide Web. Internet additional protection against malware. The Opera
and World Wide Web are connected closely and both are Portable browser which is, available for Windows, stores
dependent on each other. The World Wide Web is a your browsing history, bookmarks extensions and other
storage of information, which is in the form of links. private data on a portable storage device such as a USB
Actually, it is a technology due to which computers drive.
arround the world are connected to each other. The
Google Chrome– This is a web browser developed
World Wide Web works on HTML, HTTP, web servers,
by Google Company in 2008 which is becoming popular
and web browsers.
for its fast speed and better security provisions. It is a
1.2(iii) Web Browsing Software: web browser released primarily for Microsoft Windows.
A web browser is a software application that allows
■ To open Microsoft Edge;
a user to view and display web pages. Text and images
can be a hyperlink presented on a web page which can be • Click the Microsoft Windows icon on the taskbar.
clicked to move another web page easily. Web browsing
software is a client of an Internet server that is provided
free of cost by Microsoft Corporation and many other
companies. Through this, any information can be sent,
received or retrieved on the Internet. When URL is given
to web browser it identifys the location of the requested
page.
Following are some of the famous web browsers–
Microsoft Internet Explorer– It is a popular web
browser which is manufactured by Microsoft Company.
It is also a type of Windows component which is used to
access and navigate web pages.
Figure-1.2 Selecting Microsoft Edge
Internet Explorer supports HTML4.01, CSS Level 1,
XML 1.0 and DOM Level. It is the default browser of
Windows which is now replaced by Microsoft edges. Following are the parts of Microsoft Edge–
Microsoft Edge– This is the latest web browser of Title bar– It is located at the top of the Internet
Windows 10. Internet Explorer 11 is also available with Explorer window, displays the name of the current web
Windows 10 for compatibility. The browser includes page. Minimize, Maximize and Restore buttons are
integrated Adobe Flash Player and a PDF reader. Web displayed on the right side of the title bar.
user can make annotations on pages that can be stored Address bar– It displays the address of the web
with a drive, But can not save HTML pages. page you are currently viewing. You can also use the
Mozilla Firefox– It is a free open source web address bar for navigation. Type the address of the page
browser which is developed by Mozilla Corporation. It you want to visit in the address bar and press Enter.

M2R5 9 YCT
 There are following buttons– display the Internet addresses of files on client computers
• Back: Displays pages from the list of previously connected to the Internet.
viewed pages. Enter the web page address you want to visit on the
• Forward: Displays a page from the list of next address bar.
viewed pages. To type a web page address,
• Stop: Stops the downloading of the current page. • Click on the address bar.
• Refresh: Displays the updated version of the current • Type the web page address.
web page. Lik– https://www.featurepics.com
Reading View– Click on the book icon to go to
reading mode. It displays a clean view of the main
content of the page by removing distraction.
Reading List– This allows to save web pages for
later viewing. Such as in the Favorites folder, you can
also add web pages to the reading list.
Pinning sites to the Start menu– Open your
favorite website and click the Settings button. Now click
on "Pin to start" option from the displayed settings menu.
Now your favorite website will be displayed on the start
menu. Figure-1.3 Typing an address in the address bar
Sharing– Regularly opened web pages can be • The web page is displayed as shown below.
shared by sending a link.
Advanced Tab Management Options in Edge
Browser– Edge has focused on tab browsing in tab
management options. Right click on any browser tab.
Due to which a context menu option will be displayed.
This can be used to refresh tabs reopen a closed tab.
Close all tabs etc.
1.3 Website:
A website is a collection of web pages related to a
particular person or organization, found under a single Figure-1.4 FeaturePic homepage is displayed
domain name. Different pages of the website are Internet Addressing Scheme– Many computers are
connected to each other through hyper links. connected together on the Internet. But for
A website may contain a few or many webpages. communication, every connected computer is provided a
The steps to connect to a website are as follows– unique address which is called IP addressing system. IP
• Type the URL of any website in the web browser address is an address that is used to uniquely identify a
like– www.youthcompetitiontimes.com device on an IP network. The directory system available
• The browser attempts to connect to the web server. in IP addressing is called Domain Name System (DNS)
• The web server accepts the request. which converts a name into a numeric address.
• The homepage of a website is downloaded from a 1.3(i) Protocol:
web server on your personal computer. Protocol is a set of rules used for digital
• The web page is displayed by the web browser and communication. The protocol decides how data will be
the connection is closed between the server and your transmitted and received over the computer network.
browser. There are several levels of protocols available in a
Website Address– Web address is also called URL. telecommunications connection.
It identifies the location of a specific web page. URLs Following are the common networking protocols–

M2R5 10 YCT
 FTP (File Transfer Protocol)– FTP protocol is a connectionless protocol that transfers data over the
standard for transmitting files between computers over network. This protocol does not ensure that data reaches
the Internet protocol. Transferring or copying files from the destination properly. Therefore, it is used only in
one place to another over the network is possible only those situations where data security is not important but
through the FTP protocol. FTP uses port 21 for transmission speed is important.
connection control and port 20 for connections. Gohper– Gohper is an application-layer protocol
HTTP (Hyper Text Transfer Protocol)– It is a that provides the ability to search and view web
stateless protocol i.e. all requests sent by the client are documents stored on remote web servers. It works on
Executed separately and after responding to the client/server principal.
request the connection is closed. 1.3(ii) Domain Name:
TCP– Transmission Control Protocol is used for It is a set of network resources that are assigned to
communication in a network. It converts the message users. Through this, computers which are connected to
into a set of packets at the sender. It is also called
the Internet, are identified and located. Domain name is
connection oriented protocol and it is an important
always unique and written separated by dot (⋅).
protocol which works at the transport layer of OSI.
Example– google.com, yahoo.com etc.
POP– Post Office Protocol is used to receive e-mail.
The Domain Name System is used to identify
Because POP is in version 3, it is called POP3. This
servers and translates domain names into IP addresses. It
protocol works at the application layer of the OSI model
is a two-letter abbreviation denoting the name of a
that allows clients to download and send mail from the
server. Once the e-mail is downloaded, it can also be country and a three-letter abbreviation denoting the name
read offline. of an organization.
SMTP– Simple Mail Transfer Protocol is a standard Following are some of the key identifiers–
protocol used for e-mail service over TCP/IP networks. .com – Commercial business
This protocol helps in sending e-mail messages. SMTP .edu – Educational Institutions
protocol works at the application layer of the OSI model. .org – Organizations
It helps in transmission and delivery of e-mail over the .gov – Government entities
Internet. It is used for e-mail applications in the same .net – Internet service provider
network as well as in different networks. .info – Information services
IP– Internet Protocol, also known as TCP, was
1.3(iii) Web Server:
developed in the 1970s. It is an addressing protocol that
Web server is a software that delivers web pages to
allows different computers to communicate with each
users and serves web pages to visitors. Web server is the
other by establishing a network. It maintains the
program of any website which performs the task of
addresses of packets based on each standard and knows
the source and destination of each IP packet. searching the web pages of that website. Generally, the
software that delivers web pages to its users, is called
Telnet– Telnet is a set of rules for connecting one
web server. It helps in searching any website data with
system to another. The connecting process in this is
called remote login. Entering the user name and the help of HTTP Protocol.
password starts the Telnet session. The computer Types of Web Server–
requesting the connection is called the local computer • Apache Web Server
and the computer accepting the connection is called the • Internet Information Server
remote computer. • Nginx Service Server
WAP– Wireless Application Protocol provides • Light Speed Web Server
services to web browsers. It is a browser used in mobile
1.4 How Website Works:
devices.
UDP– User Datagram Protocol is a transport layer Figure-1.5 below shows the travel of web pages
protocol for client server network applications. It is a through networking equipment and telecommunication
systems.
M2R5 11 YCT
 for information. A web page can contain text, images,
graphs, audio, video or hyperlinks.
Every web page has a unique address called a URL
that identifies its location on the network. Web pages are
of two types: static and dynamic. Static web pages have
the same content every time when they are accessed, and
dynamic web pages change content every time it is
accessed.
Figure-1.5 shows the travel of web pages through
the networking equipment and telecommunication To open a web page,
systems of the Internet. • Type the URL in the search bar of the browser.
In the web browser, a page can be visited by • After typing, press Enter or Ok button.
typing a URL or clicking on a link. The URL takes the • The web page starts displaying.
user to the appropriate location to provide the desired
1.5(i) URL (Uniform Resource Locator):
information. URL (Uniform Resource Locator) is the
Uniform resource locators (URLs) are used to
name of a web location, through which web browsers
specify addresses on the World Wide Web. It provides
and web servers are able to communicate with each
network identification for any resource connected to the
other.
web.
A URL consists of several parts. The first part
Any document or page available on the World Wide
contains the name of the transfer protocol (http) followed
Web can be easily accessed using URL.
by a colon and two slashes (://). In the second part, the
name of the server is known, it is also called the domain The format of URL is as follows–
name of the host computer which is www. The third part Protocol://host name/other_information
identifies the web server for connection. Its last part For example,
contains google.com to identify the specific directory, http://featurepics.com
document and other objects on the web server. In its last The protocol in a URL describes how information is
part, specific directories, documents and other objects are transferred through the link. The protocol used for web
identified on the web server. resources is Hypertext Transfer Protocol (HTTP). Apart
http://
← →← www →←

google.com/
→← index → from this, HTTPS, FTP, Telnet, Newsgroup and Gopher

Part I Part II Part III Part IV protocols are also used in most web browsers.
The protocol is followed by a colon (:), two slashes
Figure-1.6 Example of URL
(//) and then the domain name. The domain name itself
Internet routers examine requests to determine
tells the location of the resource. After the domain name,
which server the request is intended for. URL, it is sent
there are links to files or subdirectories.
to the Internet on a Web Server. Tells which request is
Absolute URL– An absolute URL contains all the
being searched, if a valid request is returned on HTTP://.
information needed to locate a resource available on the
By receiving the request through the HTTP
Internet. This is a complete path including the domain
protocol, the web server tells which document has
file name.
requested by the user.
Example–http://www.sparkpay.com/images/img.jpg
When the requested document or object is
It locates the image file named img.jpg which is
received on the main page of the server, then this home
available in the Images directory and has the domain
page sends that document back to the client which is
www.sparkpay.com.
displayed on the computer screen.
Relative URL– A relative URL usually contains
1.5 Web Page: only the path to a particular file, which is relative to the
A web page is an electronic page created by using absolute URL.
HTML (Hyper Text Markup Language). It provides links Example– http://www.domain.com/default.html

M2R5 12 YCT
 an example of a relative URL. 1. Client Side Scripting Language– Client side
Through this you can easily create a set of hypertext scripting is used to generate a code that can run on a
documents. Connect them together by hyperlink through browser (client end) without the need for server side
file name. So that the user can go to another file while processing. This type of script is placed inside an HTML
reading a document by clicking on the file name document. It is usually associated with a language that is
available in it. compatible with the browser. HTML, CSS and
JavaScript languages are used for client side but
1.6 Front End:
JavaScript is the most used language for client side
Front end and back end are very important units
scripting. It has the ability to run on any browser. The
used in web development– front end is also called client
browser downloads that code permanently and processes
side and sometimes it is considered as web design.
it without a server. Scripting is used to check a user’s
The front end of a website is what we can see and form for errors before additional information is required
interact with on the browser. That is, it is a part of the and to change the content according to user input.
website by using this users interact directly. It is created
Client Side Scripting Languages–
by combining technologies such as Hyper Text Markup
• HTML: It provides the frame to the website and
Language (HTML), JavaScript, and Cascading Style
describes content management.
Sheets (CSS). Front end developers create and design the
• CSS: It provides a way to design graphic elements
buttons, menus, page links, graphics, and more elements
that help in making the appearance of a web
on a web page. This enables User to access and request
application more attractive.
features and services of the underlying Website.
• JavaScript– It is essentially client side scripting
1.7 Back End:
designed for specific purpose but currently various
The back end of the web industry is called the client JavaScript frameworks are used as server side
side. The back end and server side are the parts of the scripting technology.
website that you don’t see. People who work on the 2. Server-Side Scripting Language– Server side
backend are called programmers or developers. The back scripting creates a way for the website to work with the
end developers are mostly responsible for security, database and backend, which organizes and runs the
structure and content management. It establishes website. Server side scripting is a programming
communication between the server side of an technique for creating code that can run software on the
application, the database, and the browser. It stores and server side. Server side scripting creates the
manages data and everything is created on the client side communication link between the server and the client.
of the website. This is the part of the website that you Server side includes three parts – server, database, API
can only view but can not interact. Must have some skills and back end software, which is developed through
in back end programming language or framework, server side scripting language.
accessibility and security, understanding of front end Server Side Scripting Languages–
technology like HTML, CSS and hosting management
• PHP: This is the most popular server-side language
ability. used on the web, which was designed to extract and
The backend part is built using to a few languages manipulate information from databases. It is used in
like PHP, C+, Java, Python, JavaScript etc. Facebook, WordPress and Wikipedia.
1.8 Client and Server Scripting Language: • Python: It works well in object oriented
A script is a type of program in which a number of environment and used in famous sites like YouTube,
programming instructions, i.e. code, are written, which Google etc.
are interpreted at runtime. This means that when an • RUBY: It is a complex logic language that packages
application is running, the code is read and executed. a back end with database utility, which is also
Scripting languages can be embedded within HTML provided by PHP and SQL.
itself. Apart from this ASP.NET, Cold Fusion, C#, Java,
All websites generally run on two components– C++ etc are server side scripting languages.

M2R5 13 YCT
 Difference between client and server side 2. Flexible Visuals– Unless all the components of
scripting language– Following are the important the page are flexible, it cannot render well on the
differences between client side scripting and server side browser. Images also have to be flexible so that they can
scripting– adjust to almost all screen sizes. The use of flexible
visuals makes the media scalable by changing the media
⇒ Client side scripting works on the front end and is
size and view port size.
visible to the user whereas server side scripting
3. Media Queries– CSS media queries allow
works on the back end and not visible on the client
targeting certain device classes as well as inspecting the
end.
user's device physical features. You can display the
⇒ Client side scripting is when the browser contains all layout in different ways using media queries.
the code and the page is later changed according to
1.10 Types of Website:
the user's input. Server side scripting occurs when
A website is a collection of many web pages. A
the user's browser initiates a server request. Non-
website contains many web pages and each page has
dynamic pages are created based on several
different types of information. There are mainly two
conditions. types of websites– 1. Static website, 2. Dynamic website.
⇒ The browser can perform client side scripting after 1. Static Website– A static website represents a
accessing the page sent by the server. The server can collection of web pages whose content is fixed and is
perform a server side script but cannot perform same for every user.
client side scripting. Advantages–
⇒ Server side scripting helps to connect to databases • It is made by coding with simple HTML.
that already exist on the web server. Client side • It loads fast on any web browser.
scripting does not connect to the database available • The cost of creating a static website is very cheap.
on the web server. • Saves time.
⇒ The scripting process for the server side is done on a • It can get dedicated servers also at low cost.
remote computer. Therefore the response from the Disadvantages–
client is relatively slow compared to the request. In • Its content cannot be changed easily unless its code
server side scripting, the response is faster because is changed, its content also does not change.
the script is executed on the local computer. • These are not suitable for long periods of time.
⇒ Languages used in server side are Ruby, PHP, ASP • It contains non-interactive web pages.
Python, C# Java, C++ etc. Generally languages like • Complex tasks like transactions cannot be done in
HTML, CSS, Java Script etc. are used for client side web pages.
scripting. 2. Dynamic Website– A dynamic website is a set of
1.9 Responsive Web Design: web pages whose content changes dynamically. A
Responsive web design is a process in which a dynamic website accesses data from the database, so
website is designed in such a way that it adjusts its layout when the content of the database changes, the content of
according to screen size and orientation on desktop, the website also changes. It is written in server side
coding languages like PHP, ASP, JSP, Ruby etc.
laptops, tablets, and small-screen mobile devices.
Advantages–
Using a responsive website is also liked by mobile
visitors as the webpage does not take much time to open • It is easy to add content to the website even without
using coding.
and the speed of the site is further improved.
• Dynamic websites contain interactive web pages.
Responsive website design has the following three
main elements– • It is easy to use in online stores, social media
platforms etc.
1. Fluid Grids– The size of the elements of most
websites is set in pixels, which is fixed, but according to Disadvantages–
Fluid Grid, the height and width of the website layout is • Creating a dynamic website costs more.
defined in percentage instead of pixels so that it can fit • Security issues and risks are high.
on any screen. You can resize your height and width
according to the size. • There is more complexity in developing them.

M2R5 14 YCT
 Practice Questions with Explanatory Solutions
1. Browser is– (a) IPVI (b) IPV2
(a) Line, which delineates the edge of a (c) IPV6 (d) 1PV4
programming window. Ans.(d) IPV4 is the most used Internet protocol which
(b) Device, which is used to modify the window. was developed in 1970. This is the fourth version of
(c) Software programs specifically designed for the Internet Protocol. An IPv4 address is 32-bit.
viewing web pages on the Internet. 192.168.0.1–192.168.0.255 range can be easily
(d) None of these. identified. Each three-number group can contain
Ans.(c) Web browser is a software which helps you in numbers from 0-255. It is used to deliver data packets
viewing the content available on the internet like in the network from the host device to the destination
blogs, articles available on websites, images, videos, device.
audios etc. Tim Berners Lee created the first web 8. What is Cookie?
browser in 1991, which was named World Wide Web. (a) Computer code used to show animation and
Some of the major and popular web browsers are play sound.
Mozilla Firefox, Internet Explorer, Safari, Google (b) Computer code that automatically records all
Chrome Opera, Epic etc. user transactions.
2. On which model is www based? (c) An advertisement displayed on the user’s
(a) Local Server (b) Client Server screen.
(c) 3 tier (d) None of these (d) Information sent to a computer which is
Ans. (b) The full form of www is World Wide Web. It used to return information to the website being
is a collection of websites or web pages, stored in a accessed.
web server and it is connected to local computers Ans. (d) Web cookies are text files that are sent by the
through the Internet. It is based on the client server server to the browser. This file is sent back to the
model. The client is a web browser that communicates server by the browser all the time so that it can remain
with the web server that hosts website. connected to the server. Web cookies are used for
3. A web robot in a web crawler is– security and user information. This is information sent
(a) Crawler robot (b) crawl bot to the computer, which is then used to return
(c) Web bot (d) Web robot information to the visited website.
Ans.(c) Crawler is a program that reads the webpages 9. The first page of the website is called–
of a website and sends the details of the webpages to (a) Design (b) First page
the search engine so that the search engine can add (c) Home page (d) Main page
that webpage in its database. A web bot is a web robot Ans.(c) The first page of the website is called the
in a web crawler. homepage where visitors can find hyperlinks to other
4. How many bits does the IP address have in IPv4? pages of the site. That is, the home page is the starting
(a) 16 bits (b) 64 bits page of a website, which is the “point of entry” for all
(c) 128 bits (d) 32 bits the information stored on it.
Ans.(d) Full name of IPV4 is Internet Protocol 10. Software that prevents external access to a
Version 4, it is the fourth version of Internet Protocol. system is called–
It is a connectionless protocol used in packet switched (a) Gateway (b) Firewall
layer networks such as Ethernet. (c) Intution Prevention System (d) Anti-Virus
5. Which of the following is a web server? Ans. (b) Firewall is software that acts as a network
(a) Mozilla Firefox (b) Postfix security system whose job is to protect a computer
(c) Bind (d) Apache network from external access. It is installed at the
Ans. (d) Apache is an open source and free web gateway of the computer network and filters the traffic
server software that provides HTTP server services. going in and out of the network.
HTTP server is such server software, which saves and 11. What is the full form of HTTP–
hosts web pages and website files. Apache Server (a) Hyper Text Transfer Protocol
supports various operating system platforms like (b) HTTP Text Transfer Protocol
Windows, Linux, Macintosh etc. Apache server (c) High Transfer Tier Program
software can host both static and dynamic websites. (d) HTML Type Transfer Protocol
6. The applet is– Ans. (a) The full form of HTTP is Hyper Text
(a) Image displayed on a web page Transfer Protocol. This is a type of network Protocol
(b) HTML program (c) Security protocol that is used in the World Wide Web. HTTP uses a
(d) A program to be embedded in another server-client model. It is a protocol for transferring
application. information over the internet.
Ans.(d) Applet is a special type of computer program
whose purpose is to run (Embed) inside another 12. Connecting the website to the backend, processing
software application. An applet is a Java program that data and controlling the behavior of the top
runs in a web browser. layers, etc is all done by whom?
7. Which version of Internet Protocol is most used (a) HTML language (b) Javascript
on the Internet? (c) CSS Scripts (d) None of these
M2R5 15 YCT
 Ans. (b) Java Script is a dynamic computer language. Ans.(a) Static web page is stored in the web server
It is also an interpreted/oriented language. Java script and loaded in the client’s browser. These webpages
client also known as side/server side scripts. can only be read by the user and no modification can
Connecting the website to the backend, processing be done by the user. This web page only holds static
data and using the top layers. All the work like information and loads the same content every time it
controlling behavior etc is done through JavaScript. is reloaded. Static web pages can be created only
13. Telnet is– using HTML. A static web page is created only when
(a) Terminal network we do not have to make any changes to it later.
(b) Telecommunication network 20. The function of modem is–
(c) Telephone network (d) Local network (a) Modulation (b) Demodulation
Ans.(b) Telnet is a network communication protocol, (c) Both (a) and (b) (d) None of these
which is used to communicate and manage various Ans. (c) The full form of modem is
devices present on the network such as servers, modulator/demodulator. It is a hardware component
computers, routers, switches and firewalls etc. This is that allows a computer to connect to the Internet.
completely command based communication. Modem is used to send data to the computer via
14. TCP is a commonly used protocol in– telephone or cable. It converts analog and digital data
(a) Application layer (b) Transport layer for two-way network communication in real time.
(c) Network layer (d) Physical layer 21. Pieces of information sent over the Internet–
Ans. (c) TCP means Transmission Control Protocol. It (a) Piece (b) Packet
transfers information between two computers and (c) Byte (d) None of these
makes transmission possible. It is generally used in Ans. (b) A small part of someone’s message on the
the transport layer. Internet is called a packet. Data sent over a computer
15. A website address is a unique name that identifies network is divided into packets. These packets can be
a specific…..... on the web. retrieved by the computer or device by reassembling
(a) Web browser (b) PDA them.
(c) Website (d) None of these 22. Protocol used to receive mail from remote
Ans.(c) The unique name used to identify a website on mailbox–
the web is called website address or URL. The web (a) IMAP (b) HTTP
address itself displays a website or a page of a website (b) POP3 (d) SMTP
or leads to a web page. Ans. (b) POP 3 (Post Office Protocol) is an Internet
16. Leader of the World Wide Web Consortium– standard protocol used by local e-mail software clients
(a) Mark Zuckerberg (b) Elon Musk to receive e-mail from remote mail servers over a
(c) Tim Berners Lee (d) None of these TCP/IP connection.
Ans. (c) World Wide Web Consortium (W3C) is an 23. IP protocol is an implementation of which layer
international community. It has many members, of OSI?
organizations, and experts who work together to (a) Network layer (b) Physical layer
establish standards for the World Wide Web. It was (c) Data Link Layer (d) None of these
led by Tim Berners Lee. Ans.(a) The IP protocol is an implementation of the
17. The address of a permanently assigned router network layer of OSI. It is the third layer of the open
connected to the Internet is called– system interconnection model whose main function is
(a) Dynamic IP address (b) Static IP address routing and delivering data packets from one host to
(c) Mixed IP address (d) None of these another between different networks.
Ans.(a) A dynamic IP address is an IP address that is 24. The protocol used to access the Internet is–
automatically assigned to each node or connection in (a) SLIP (b) POP
the network—like your smartphone, desktop PC or (c) IMAP (d) SMTP
wireless tablet. Dynamic IP addresses keep changing Ans.(a) The full name of SLIP is Serial Line Internet
with time in the network. Dynamic addresses are Protocol. SLIP is an Internet protocol through which
assigned as needed by Dynamic Host Configuration users can access the Internet using a computer
Protocol (DHCP) servers. modem.
18. Netscape Navigator has been developed by– 25. What is the other name for front end?
(a) Server side (b) Client side
(a) Microsoft (b) Google
(c) Receiving Office (d) None of these (c) Both (a) and (b) (d) None of these
Ans. (b) Front end is also called client side and
Ans. (d) Netscape Navigator was first commercially sometimes it is considered as web design. The front
successful web browser. It was based out of the end of the website is what we can see on the browser
Mosaic browser and was created by a team led by and can also interact with it. That is, it is a part of the
Mark Andreesen. Netscape Navigator helped website that users interact with directly. It is built by
influence the development of the Web as a graphical combining technologies such as Hyper Text Markup
user experience rather than text based. Language (HTML), JavaScript, and Cascading Style
Sheets (CSS). Front end developers create and design
19. Loads the same content every time the page is the buttons, menus, page links, graphics, and more
reloaded– elements on a web page. This enables the User to
(a) Static web page (b) Dynamic web page access and request features and services of the
(c) Both (a) and (b) (d) None of these underlying Website.
M2R5 16 YCT
 2 EDITORS

2.0 Introduction: • Insertion Point: It is like a small line blinking in the

A text editor is a computer program that allows a text area, which is also called cursor. This displays
user to add, delete and rearrange letters, words, sentences next typing point.
and paragraphs in text. Text editors are provided with
• Scroll Bar: It is like a slider on the side of the
operating systems and software development packages
and used to modify files such as configuration files, Notepad window, whose function is to scroll the large
documentation files, and programming language source file up-down or left-right.
code. • Text Area: This is the entire empty area in which text
Notepad, Wordpad, TextEdit, Emacs, vi and vim,
Writer, Notepad++ etc. are some examples of text is typed.
editors. Usage of Notepad– It is mainly used to create plain
Some text editors are small and simple, while others text note files, plain text used for reading files, editing
have large and complex functions. Most word processors text files, simple coding and editing code. The
can read and write files in plain text format.
executable file name of Notepad is notepad ⋅exe, which
2.1 Notepad:
Notepad is a text editor program that becomes is the extension of notepad file.
inbuilt with the Microsoft Windows operating system. It How to open notepad–
is a simple text editor which is mainly used to write, read • First of all, click on the Start button and go to 'All
and edit any simple note. It is very useful as it can be Programs...'
used for everything from text editing to simple coding or
even for editing code. • Then click on Accessories….
Notepad is very easy to work, especially for • Click on Notepad here...
beginners because it does not have many functions and • After that Notepad will open.
tools to format created notes. Therefore, there is not
much complexity in it and it is also a light weight simple 2.1(i) Advantages of using Notepad:
program, due to which it can be used very easily on an This is a free software which anyone can download
ordinary computer. and use for free. In which you can also code from text
Notepad Window Elements– and it works exactly like a code editor. Code editors are
mostly paid, so Notepad can give you more experience
than a coding editor. With this, it can be connected with
many coding plugins so that the code can be converted
from one format to another whenever required. Like a
code editor, the code gets highlighted in it.
2.2 Downloading free Editors : Notepad++ :
Notepad++ was developed by Don Ho in September
2003. It is a free open source code editor used with
Microsoft Windows. It is a replacement for Notepad. It
supports multiple languages and its use is governed by
the GPL license. It features syntax highlighting, code
Figure- 2.1 Notepad Elements folding, and limited autofill for programming, scripting,
and markup languages. Notepad++ is written in C++
• Title Bar: It is at the top of the entire window on based on cintila, a powerful component, and uses Win32
which file name is shown. By default its name shows API and STL that ensure high execution speed and small
Untitled-Notepad. program size. It is trying to reduce Carbon-di-Oxide
• Menu Bar: It is below the title bar which contains emissions by optimizing as many functions as possible
some menus inside which there are commands related without compromising on its user-friendly nature. It
to that menu. supports tabbed editing, which allows working with
• Program Window Control: It is on the right side of multiple open files in a single window. It uses less
the title bar which includes Minimize, Maximize /
resource like less CPU usage, reduction in CPU power
Restore and Close. There are buttons used to which the
can be minimized or closed the notepad window. consumption etc.
M2R5 17 YCT
2.2(i) Process of Downloading Notepad++: • It is used on Windows platform but apart from
The process to download Notepad++ text editor is as Windows, it can also run on Linux, Unix, Mac OS.
follows– • Notepad is also used to create text files and later those
files can also be edited.
• In Notepad, users can change the font style while
creating text files as many prebuilt fonts are available
in Notepad.
• This software is free to download and takes less
storage to install.
• A large directory of plugins available to extend the
functionality of the text editor.
• Notepad++ interface supports tabbed editing.
• Auto indentation and auto complete facility is
available in it.
• In Notepad++, smart syntax highlighting feature is
available.
Figure- 2.2 Notepad Text Editor
• Type the official website address https://notepad-plus- Cons of Notepad++
plus.org in your browser. • Notepad++ cannot handle very large files.
• Select the latest Notepad++ version in the left side • Available for installation exclusively on Microsoft
frame and click on Download. environments.
• Open the folder with the downloaded package on your • Remote file editing does not support HTTP, SSH, or
computer and double click on the ⋅exe file to run the Web DAV.
installer and follow all the installation steps. • Notepad++ app becomes unresponsive when opening
• Select the installation language. large log files.
• Click on "Agree to the terms of License Agreement".
• Wait for the system installation. 2.3 Sublime Text Editor:
• After the installation is finished you can use the Sublime Text Editor is a fully featured editor for
Notepad++ software. editing source code with a cross platform application
2.2(ii) Features of Notepad++: programming interface. It includes many features to edit
Notepad++ has a variety of features that make to the code base. It supports multiple programming
much easier to programming and debugging code. Some languages and markup languages. Its functions can be
key features of Notepad are the following– added by the user with plugins, which are created by the
community and organized under the Free Software
• It is a source code editor.
License. Sublime Text Editor is used as an integrated
• Text files up to 2GB in size can be edited. (Maximum development environment (IDE) such as Visual Studio
size in Windows Notepad is 58MB). Code and Net Beans. The current version of Sublime
• It supports line numbering. Text Editor is 3.0 and it is compatible with various
• Multiple files organised in this tabs can be edited. operating systems like Mac OS, Windows, Linux.
• It supports syntax highlighting and syntax folding for
over 70 programming languages including html and Following are the features of Sublime Text Editor–
windows batch files. • Using the multiple features available in it, users are
• It provides the facility to create and edit text files for able to change multiple lines at once, rename variables
various operating systems including Mac OS and etc.
Linux. • Autocompletion attempts to complete entries
• Supports lines for bookmarks. automatically based on user typing language and also
• It supports zoom in and zoom out. auto-completes variables created by the user.
• Supports multi language environment. • The purpose of the dark background on Sublime Text
• It has the facility of recording and playback of is to reduce eye strain and increase the amount of
repeatedly executed editing commands through macro contrast with the text.
commands. • The Snippets features allow users to save frequently
• It supports auto completion which provides indication used blocks of code and assign keywords to them.
of word completion, function completion and function • When required, users can simply type the keyword and
parameter completion. paste the block of code.
• It supports advanced find and replace with regular • It has the facility of macros through which you can
expression support. record your tasks.
2.2(iii) Pros & Cons of Notepad++ : 2.3(i) Procedure of Downloading Sublime
Notepad++ is a useful text editor which has some Text Editor:
advantages and disadvantages. Sublime Text Editor is a proprietary source code
Pros of Notepad++ editor based on Python application programming
• You can use Notepad++ to create web pages but you interface (API) that supports multiple programming
need to have knowledge of HTML language for this. languages and markup languages.
18
 Following are the steps to download Sublime Text
Editor–
• Type the official website address https://
www.sublimetext.com in your browser.
• Download Sublime Text Editor as per your operating
system by following the link available on the official
website.
• Open the folder of the downloaded package in the
computer and double click on the ⋅exe file to run the
installer and follow all the installation steps.
• After running the executable file, click on Next.
• To install Sublime Text 3 Editor, select the location
and click on next to verify the destination folder and Figure- 2.4 Selecting language
click install button. Step-3 Write the code in Notepad++ and save this
• After the installation is complete, click on the Finish
button. After this you can use Sublime Text Editor file using -html extension.
Software.
2.3(ii) Linting in Sublime Text Editor:
Linting is the ability to flag suspicious constructs
and likely bugs in any programming language. Sublime
Linter is a package for Sublime Text that helps users to
perform linting in Sublime. It helps to creating files in
different modes for manipulation of the code base. This
is not an inbuilt package and has to be installed
manually. Any package control can be installed in
Sublime Text Editor using the shortcut key combination
Ctrl + Shift + P.
Different Modes of Sublime Linting– Sublime
Linter runs in four modes, which are as follows–
⇒ Background Mode– When the Sublime Linter key
is set to True, linting is performed continuously in
the background every time the file is modified.
⇒ Load Save Mode– When the Sublime Linter key is
set to Load Save Mode, lintings are saved at load Figure- 2.5 Selecting file save as type
when a file is loaded from the repository. File Editing:
⇒ Save Only Mode– When the Sublime Linter key is
Step-4 To add some lines to the file, place the
set to Save Only Mode, linting is performed when
saving a particular file to the working repository. cursor at the place where you want to add text.
⇒ On Demand Mode– The Sublime Linter key will be
set to True using the Ctrl + Alt + L shortcut key
combination which sets the linter to detect bugs in
the code.

2.4 File Creation and Editing in Notepad++:

Step-1 Open Notepad++ Text editor.

Figure- 2.6 Editing code in a file

After finishing editing, save the file as a web page.
2.4(i) Saving File in Notepad++ :
Figure- 2.3 Notepad window To save the written code as a file, follow the
Step-2 Select the language in which you want to following steps–
write the code. To write an HTML program, select
HTML under H from the Language menu. Step-1 Click on Save as in file menu.
M2R5 19 YCT
 Figure- 2.10 Selecting coding language
Figure- 2.7 Saving the file Step-3 Now go to your page where you have to
Step-2 Type the name of the file in file name box. write the code.
Step-4 After writing the code, save the file with
⋅html extension.
Follow the following steps for file editing process–
Step-5 Open the file which you want to edit. For
this, click on Open File/Open Folder under the File menu
or press Ctrl + O button.

Figure- 2.8 Notepad Save As dialog box

Step-3 Click on the drop down button under Save as
type and click on "Hyper text markup language file" to
save in HTML format.
Step-4 Select the destination folder where you want
to save the web page.
Step-5 Click on Save button. Figure- 2.11 Opening the saved file
Now the file is saved in HTML format. Step-6 Select the file you want to Open and click on
2.5 File Creation and Editing in Sublime Open.
Text Editor: 2.5(i) Saving file in Sublime Text Editor:
To create a file in Sublime Text Editor, follow the After creating a file in Sublime Text Editor, follow
following steps– the following steps to save it–
Step-1 Open Sublime Text Editor. Step-1 Under File menu, click on Save As. A dialog
box will appear as shown in Figure 2.12.

Figure- 2.9 Sublime Text Editor Window

Step-2 Select the language in which you want to
write the code. To write HTML program, selet HTML
from syntax option in view menu. Figure- 2.12 Sublime Save as dialog box
20
 Step-2 Type the name of the file in the Filename • Kite– It is an AI-powered coding assistant that
box. supports 13 languages and 16 editors. It provides
autocomplete plugins for code and text editors, as well as
Step-3 Click on the drop down button under Save
a desktop app for searching Python codes. These are
As type and click on "Hyper Text Markup Language available for free use. Most developers use it because it
File" to select HTML format. is safe and easy to use.
Step-4 Select the destination folder. Where you • Bluefish – It is a powerful code editor for web
want to save the web page. designers and programmers. Bluefish supports multiple
Step-5 Click on the button. Now file is saved in programming and markup languages. Bluefish is a very
HTML format. stable and easy to use code editor. This software has easy
programming tools that allow the user to edit text with
2.6 Other Useful Text Editors:
There are many good text editors available with ease. It can be used in Windows as well as in operating
systems like Ubuntu and Linux etc. It can handle dozens
various features to make code writing easier for the user,
of files simultaneously.
some of the major ones are the following–
• Atom– Atom is an open source text editor created
• Bracket– Bracket is an open source and free-to-
by Git Hub. It is a useful code editor for programmers
download text editor that is used for Mac operating
due to its simple interface compared to other editors.
system. It is a light weight tool developed by Adobe,
Each phase can be easily customized. Available in
which supports many platforms like Mac OS, Windows,
thousands of open source packages and Atom with new
Linux. It allows the user to toggle between source code
features and functionality. This feature makes Atom the
and browser views. best code editor. It allows cross platform execution and
Bracket provides live preview preprocessor support supports command palette.
and in-line editors. It comes with inbuilt extension • Vim– It is a highly configurable text editor which
manager for fast and efficient extension management. It's is very efficient software for creating and changing any
an easy to customize and free HTML editor. The extract type of text. Using this editor, you can access all the files
feature available in brackets allows you to extract and folders of the computer from the terminal itself. It is
information like font, color size directly from the PSD(s) a very user friendly and powerful code editor.
without explicit CSS code reference. It is very easy to • IDLE– It is a simple IDE which is a good text and
implement JavaScript, HTML and CSS. code editor software for beginners. It works cross-
• Netbeans– Netbeans is a free open source HTML platform. It is written in Python. It is the software
editor and a powerful Java IDE that enables users to environment that resides in the software development
create powerful web applications. NetBeans IDE can be package. IDLE is not available by default in Python
installed on many operating systems like Linux, distributions for Linux.
Windows, Mac OS. You can develop your code using • Text Wrangler– It is a powerful and feature-rich
HTML5, C++, JavaScript, PHP and many other text editor. This text editor is a freeware. It comes with a
very intuitive user interface that makes it easy to work on
languages. Netbeans is most helpful in developing web browser files and projects. It can execute and save files
applications, desktop applications and mobile directly in FTP, SFTP. It provides syntax highlighting
applications. for many programming languages, supports UTF-8 and
allows you to change the character encoding of a text
• Visual Studio Code– It is an open source editor document.
software. Visual Studio Code is a multi-language and • Ultra edit– This is a powerful, fast and secure text
multi-platform program and multi-code free HTML editor whose helpful features make daily life easier for
editing tool with a wide range of customizable features. any user type and programming language. It is a
Visual Studio Code provides built-in support for IT powerful HTML and code editor available for Mac,
Scripts, JavaScript, and Node.js. It provides developers Windows and Linux. It comes with inbuilt file compare
with a rich programming experience, allowing them to usage, auto complete layout, multi tab, multipane editor
download large-scale Visual Studio version files that are and syntax highlighting for most popular programming
approximately 3GB in size. languages.

M2R5 21 YCT
 Practice Questions with Explanatory Solutions
1. Features of Sublime Text Editor are– 7. Which menu in Notepad has only two options,
(a) Column selection and multi select editing Word wrap and font?
(b) Syntax highlight and high contrast display (a) Format (b) insert
(c) Auto complete, code building, snippets (c) Edit (d) title
(d) All of the above. Ans. (a) Under the Format menu of Notepad, there are
Ans. (d) Sublime Text Editor is a cross-platform two options: Word Wrap and Font. Word wrap is an
source code editor with an application programming extremely useful command. Word wrap is used in
interface. It natively supports multiple programming Notepad to view text without scrolling.
and markup languages and can be added by the user Font color, font command is used to change the
with function plugins. Features like column selection, font style of the document, through this you can
multi select editing, syntax highlight and high contrast
display, auto complete, code building, snippets etc. are change the font size, font name etc. as per your
available in Sublime Text Editor. choice.
2. The extension of the file saved in Notepad 8. Compare plugin in Notepad++ helps to find out
document is– the difference between–
(a) ⋅txt (b) ⋅pnd (a) Two versions of files
(c) ⋅xmt (d) ⋅doc (b) Two versions of the folder
Ans. (a) Notepad is a simple but useful text editor (c) Applications
program, which is included in every version of (d) None of these
Microsoft Windows. Notepad helps users to create and
read plain text. Files prepared in this text editor are Ans. (a) Compare plugin is used to compare between
saved with ⋅txt extension. two versions of files in Notepad++.
3. What is not supported by Notepad? 9. There is no text editor–
(a) Read text (b) Write text (a) Notepad++ (b) Notepad
(c) Read and write text (c) Wordpad (d) Photoshop
(d) Graphics Ans. (d) Text editor is a software tool that edits text.
Ans.(d) Notepad is a simple but useful text editor Adding, deleting, changing, finding and replacing
program included in every version of Microsoft something new in the text is called text editing.
Windows. Notepad supports both read and write text. WordPad, Notepad and Notepad++ are text editors.
Graphics cannot be used in Notepad files. 10. Notepad++ supports–
4. What is not true about Notepad++? (a) Regular expression
(a) Proprietary text editor (b) Syntax highlighting
(b) free (c) Auto Complete
(c) open source (d) cross platform (d) All of the above
Ans.(a) Notepad++ is a free open source, cross Ans. (d) Notepad++ is a free source code editor that
platform text editor that is used in place of Notepad. supports multiple languages. Notepad++ supports
Notepad++ is written in C++ and uses the Win32 API syntax highlighting and syntax folding. It supports
and STL, ensuring high execution speed and small regular expressions and auto complete including word
program size. completion, function completion and function
5. Which platforms does Bracket text editor parameters indicate completion.
support? 11. The option used to save the Notepad window is–
(a) Mac OS (b) Windows (a) edit (b) save
(c) Linux (d) All of the above (c) format (d) save as
Ans.(d) Bracket text editor is used for Mac operating Ans. (b) Notepad is a simple text editor included with
system. It is open source and can be downloaded for versions of Microsoft Windows that allows you to edit
free. Brackets support multiple platforms like Mac plain text files. Allows to create, open and read. Save
OS, Windows, Linux etc. option is used to save the Notepad window.
6. It is a powerful text editor available for all 12. Which of the following is not available in the
platforms. Notepad menu bar?
(a) Emacs (b) Vim (a) file (b) edit
(c) Bluefish (d) IDLE (c) insert (d) format
Ans. (a) The text editor available with all platforms is
Emacs but it is most widely used on Unix and Linux Ans. (c) There are many options for editing text in the
platforms. It can be downloaded for free from the menu bar of Notepad which are called menus. Each
GNU site. Emacs, in addition to being a text editor, menu has a different use. File, Edit, Format, View and
can also issue shell commands, access the Internet, Help menus are available in the menu bar of Notepad.
write and test programs, etc. It can also read and send 13. HTML code can be written by using which of the
e-mail. It is a cross platform program and can run on following?
many operating systems like Windows, Mac Osx, (a) VLC media (b) Notepad++
Linux, Free BSD, SUN OS etc. (c) Microsoft PowerPoint (d) None of these
22
 Ans. (b) Notepad++ is a text editor and source editor Ans. (b) Notepad is a simple text editor included with
application used by Windows computer users. HTML versions of Microsoft Windows that allows you to edit
code can be written using Notepad++. plain text files. Allows to create, open and read the
14. Notepad++ is a .......... software– option used to save the Notepad window is Save.
(a) Free and open source (b) Paid
(c) Trialware (d) Shareware 21. Which of the following is not available in the
Ans. (a) Notepad++ is a free and open source notepad menu bar?
software. Apart from the general features of a text (a) file (b) edit
editor, Notepad++ has features like syntax (c) insert (d) format
highlighting, autocompletion etc. for different
Ans. (c) There are many options for editing text in the
programming languages, making it very useful for
programming and scripting. menu bar of Notepad, which are called menus. Each
15. In Notepad++, highlight a block of code by menu has different uses. In the menu bar of Notepad,
commenting it out using the………… shortcut File, Edit, Format, View and Help menus are
key. available.
(a) Ctrl + O (b) Ctrl + Q 22. HTML code can be written using which of the
(c) Ctrl+H (d) Ctrl + G
following?
Ans. (b) Using the Ctrl + Q shortcut key, a block of
code in Notepad + is commented out and highlighted. (a) VLC Media (b) Notepad++
16. Extension of Wordpad file is– (c) Microsoft PowerPoint
(a) ⋅txt (b) ⋅rtf (d) None of these
(c) ⋅doc (d) ⋅text Ans. (b) Notepad++ is a text editor and source editor
Ans. (b) Microsoft WordPad is a rich text editor first application used by Windows computer users. HTML
introduced by Microsoft in Microsoft Windows 95 code can be written using Notepad.
and available in all subsequent versions. WordPad
uses rtf (Rich Text Format) file extension to save files 23. Notepad++ one. ………Software is–
by default but it can also save documents in docx (a) Free and open source
(Office Open XML), ODT (Open Document) formats. (b) tree
17. ........... is not text editor. (c) trialware (d) shareware
(a) Notepad++ (b) Notepad Ans. (a) Notepad++ is a free and open source
(c) Wordpad (d) Photoshop
software. Apart from the general features of a text
Ans. (d) Text editor is a software tool that edits text.
editor, Notepad++ has features like syntax
Adding, deleting, changing, finding and replacing
something new in the text is called text editing. highlighting, autocompletion etc. for different
Wordpress, Notepad and Notepad++ are text editors. programming languages, making it very useful for
18. Notepad++ supports– programming and scripting.
(a) Regular expression (b) Syntax highlighting 24. In addition to Preferences, what else can be used
(c) Auto Complete (d) All of the above
to personalize the appearance of Notepad++?
Ans.(d) Notepad++ is a free source code editor that
(a) style (b) edit Menu
supports multiple languages. Notepad++ supports
syntax highlighting and syntax folding. It supports (c) style configurator (d) file
regular expressions and auto complete, including word Ans.(c) While using Notepad++, if the user wants to
completion, function completion, and function personalize the appearance, then apart from the
parameter completion. preferences, they can use the style configurator
19. Which option in Notepad allows you to search for available just below the Settings button.
any text and then replace it with new text?
(a) edit (b) format 25. To insert a function from the function list…
(c) go-to (d) Find and replace shortcut is used.
Ans. (d) The Find and replace option available in the (a) Alt + Space (b) Shift+Space
Edit menu of Notepad allows finding every instance of (c) Ctrl + Space (d) Ctrl + Shift + Space
a certain text in the entire document and replacing
Ans. (c) Function can be inserted from the function
each instance with a new text.
list by using Ctrl + Space shortcut key. This feature
20. The option used to save the Notepad window is–
(a) edit (b) apple displays to the user all the functions built into a
(c) format (d) Save As program.

M2R5 23 YCT
 3 HTML BASICS

3.0 Introduction: 3.1(i) Basic Structure of HTML:

HTML is a markup language, developed for creating There is a basic structure of an HTML document
web documents (web pages). It was developed in 90s. It which is used to create a webpage. The basic structure of
is the base of a web page and web pages are base of a an HTML document consists of 5 elements.
website. HTML uses "Tags" to create web documents. <DOCTYPE html>
3.1 Introduction of HTML Basics: <html>
The full form of HTML is Hyper Text Markup <head>
Language. This is the computer language which is used <title> </title>
to create a website and CSS is used to give it a look. </head>
After the website is created with the help of HTML, any <body>
person can view the website through the internet. It is a <h1> </h1>
platform independent language which can be used in any <p> </p>
platform like Windows, Linux, Macintosh. It is very easy
</body>
to create a webpage using HTML, it requires a simple
text editor (like Notepad) in which the HTML code is </html>
written and a browser (like Internet Explorer, Mozilla ♦ <!DOCTYPE>
Firefox, Google Chrome) is also required. In which the DOCTYPE tells the web browser that in which
website gets recognized and can be viewed by users on HTML version the web page is written. In this case, the
the Internet. Each page on a website contains a series of language used now is HTML 5. A DOCTYPE
connections to other pages, called hyperlinks. Every web declaration is made on the first line of every web
page visited on the Internet is written using HTML code. document.
HTML is called a language because it has keywords and ♦ <HTML>
syntax like other languages. HTML is made up of a This HTML tag indicates that from here we are
series of small codes, these codes are called tags. HTML going to write HTML code. The <html> element tells the
tag tells the browser how to display the elements on the browser that the web page will be formatted in HTML
website written inside that tag. HTML provides many and optionally in which language the page content is
tags that give an attractive look to the website through written.
the use of graphics, font size and colors. Hypertext and ♦ <head>
markup are two different words in the full form of The head element is a web document's container that
HTML (Hypertext Markup Language) in which contains complete information about the web document's
hypertext is called text which contains a link to another metadata. Most elements are not displayed directly on
web page. As soon as the user clicks on that hypertext, the webpage. This information is mostly for search
he reaches on another webpage. engines and other computer programs. Metadata
Hypertext is the method by which the web page is typically defines document titles, character sets, styles,
explored. It is just simple text but hypertext keeps some scripts, and other meta information.
other text attached with it, which is activated by mouse <HEAD>
click. This feature differentiates it from ordinary text. <TITLE>DOCUMENT Title </TITLE>
Hypertext is called hyperlink. </HEAD>
Any text can be made a hyperlink through HTML's
</HTML>
Anchor (<a>) tags. Apart from this, images, videos,
sounds etc. can also be made hyperlinks. This type of ♦ <title>
link data is called Hypermedia. The most important element in an HTML document
Another characteristic of hypertext is that it is not is the body, which contains all the content that is visible
linear, that is, hypertext can be activated in any order. to the browser, such as Headings, paragraphs, images,
Mark up– HTML uses HTML tags to create a web hyperlinks, tables, lists, etc.
document. Defines the text in some way, this is called <TITLE>Document Title </TITLE >
Mark up."<i>" is an HTML Tags' which Italics the text. ♦ <body>
Language–HTML is a language because it uses The most important element in an HTML document
code-words called tags to create web documents. There is the body, which contains all the content that is visible
is also HTML syntax for writing these tags, hence it is to the browser such as headings, paragraphs, images,
also a language. hyperlinks, tables, list etc.

M2R5 24 YCT
 </BODY> • Top Margin– This sets the top margin of the
˙˙˙ document.
˙˙˙ • Link – Sets the text color of an unvisited hyperlink.
• VLink – Determines the text color of the visited
</BODY>
hyperlink.
Body Tag is the main Tag and our actual coding • ALink – Sets the selected hyperlink text color.
starts from here. There are some characteristics of a web • <h1>– It is the heading tag of HTML page. You can
page which the attributes of the <body> tag are specified use <h1> to <h6> tags to give heading.
as – Background, BGCOLOR, Text, LINK, ALINK and • <p>– This is Paragraph tag, you can use it to write
VLINK and left margin upper margin. Paragraph in HTML web page.
♦ Bg Color 3.2 Head Section & It's Elements:
We use this property to give color to the background
The <head> tag is a container tag that is placed
in the body. To use it, we first need to add bg in the body inside the <html> element and before the <body> tag. the
tag. After writing color, the name of the color has to be data written in this container which is not shown to the
written in double quotes ("") followed by equal sign (=). user is known as metadata. Title character set in
Syntax: metadata, Styles, links, scripts and other meta
<body attribute = "values"> information are stored. For this we use itle> <style>,
<body> <meta>, <link>, <script> and use elements like base>.
for example HTML <title> Element– It is used to give title to
<body bg color = "red"> an HTML document. This is displayed on the user's
browser. It is used to provide the title of that page when
......
the user saves the page or adds it to favorites. This title is
...... displayed as a result in search engines so that users can
...... know the gist of the document.
</body> Example:
<html>
By writing like this, the color of the body will be <head>
change. We can either give the color name in the value <title> Youth Competition Times </title>
or can also give the hexacode. </head>
♦ Back ground <body>
It is used when we have to put an image in the ˙˙˙
background of the body, this is also written on the bg </body>
color side. But in this we have to enter the path or Ui of </html>
the image instead of color.
for example,
<body background = "sample - image ⋅ jpg">
...... HTML <style> Element– Using this, CSS of any
...... page can be set. This element can be used anywhere but
...... according to coding standards it should be placed inside
the <head> element only. The <style> tag provides style
<body> for HTML tags.
♦ Text Example:
The text attribute is used to change the color of the <!DOCTYPE html>
text written inside the body. In this, the color code has to <html>
be given in the value. If we enter color name in text then <head>
we will see text of the same color.
<title> HTML document </title>
for example,
<style>
<body bg color = "blue" text = "white">
body{background-color : Yellow}
...... P{background-color : skyblue}
...... </style>
...... </head>
<body> <body>
Similarly, <p> Paragraph Tag </p>
• Left Margin– This sets the left margin of the web </body>
document. </html>
M2R5 25 YCT
 Output:

HTML <meta> Element– It is used to specify HTML <Script> Element– In this tag, JavaScript
character set, page description, author name and similar code is given on the HTML document and external-js file
meta information used in HTML document. is also given on the HTML document with 'src' attribute.
Metadata is used by the browser and all the details This element is used to define client side scripts. The
of how to display the HTML document through the syntax is written with <script> </script>, with the script
HTML browser are given in the metadata itself. inserted between the beginning and end tags.
Example: <!DOCTYPE ⋅ html>
To define character set, <html>
<meta <head>
char set="UTF – 8"> <title> HTML Document </title>
To HTML Page description define, <script type = "text/javascript">
<meta bocument⋅write ("Hello World"):
name = "description" </script>
content = "free HTML </head>
tutorials Hindi"> <body>
To define keywords in search engines, </body>
<meta </html>
name = "key words" HTML <base> Element– The <base> tag specifies
content = "HTML, CSS, XML, Javascript, the base URL for all URLs in HTML document. After
Tutorial, Hindi"> this the user does not need to write the complete URL.
To define author, Whenever users add a URL, the Base URL is
<meta automatically prefixed before that URL.
name = "author"
Example:
content = "John Doe"> <html>
To automatically refresh the page every 30 seconds, <head>
<meta http – <title> HTML base tag Demo </title>
equiv = "refresh" <base href = "c:/documents/web-files">
content = "30"> </head>
HTML <link> Element– This tag is used to load an <body>
external link sheet into an HTML document, but it can
also be used by search engines to provide links to related <img src = "my Image ⋅ Png">
resources on a website's navigational structure. </body>
</html>
Mystyle ⋅ CSS
hl {background - Color : red}
h2 {background - Color : Blue}
h3 {background - Color : Yellow}
h4 {background - Color : Purple}
Sample ⋅ html
<!DOCTYPE html> 3.3 Writing a program using HTML in
<html> Notepad:
<head> Notepad text editor is generally used to write HTML
<title>HTML Document </title> programs. To create a webpage on Notepad, follow the
<link rel = "Stylesheet" href = "mystyle ⋅ css"/> following steps–
</head>
<body> Step-1: Click on Start button. Select All Programs.
<h1> Header </h1>
<h2> Header </h2> Step 2: Write HTML code on Notepad–
<h3> Header </h3>
<h4> Header </h4> <!DOCTYPE html>
</body> <html>
</html> <body>
M2R5 26 YCT
 <h1> My First Heading </h1> 3.3(i) What is Element:
<p> My First Paragraph </p> The combination of HTML tag and content is called
</body> HTML element. It is called a start HTML element. A
</html> start HTML tag, an end HTML tag and the content
between them are collectively called an HTML element.
HTML elements are made up of HTML tags. An element
has no separate existence. Every part of a web page such
as a paragraph, image link etc. is an element. Each type
of element has its own behavior. For example, you can
click on a link or type in a text box.

Step-3: Save the document by selecting Save As option

under File menu in Notepad application.
Elements and tags are not the same things. The tag
of an element is open or close in the source code while
the elements are part of the document object model. The
browser has a document model for displaying pages.
To perform default and styling in HTML file, all the
elements are divided into two categories-

(i) Block-level Element− A block level element is

any element that starts a new line (such as a paragraph)
and uses the full width of the page or container. This
element can be one or two lines and there is a line break
before and after the element.
Examples of block level elements– <address>,
Step 4: Save the file by typing "File.html" or any name <aside>, <article>, <blackquote>, <canvas>, <div>,
<figcaption>, <table>, <header>, <form>, <main>,
ending with⋅html or⋅htm.
<nav>, noscript>, <p>, <footer> etc.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style = "background-color : Pink">
Block level element </P>
<div style = "background-color : Green">
This is first div </div>
<div style = "background-color : Blue">
This is second div </div>
</body>
</html>
Output:

Step 5: Open the saved HTML file in a web browser.

The result will be displayed in the browser
window.

(ii) Inline Element– It does not start on a new line.

An inline element takes only as much space as necessary
and mostly used with other elements. Examples of inline
elements– <a>, <b>, <br>, <button>, <Code>, <img>,
<script>, <span>, <strong> etc.
M2R5 27 YCT
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body> 3.4(i) Bold <b> Element:
<a href = "https://www.youth competition times.com
Bold element is used to define Bold text in HTML,
/html-elements-hindi"> Learn HTML
due to this the text will be different from the text next to
elements in Hindi </a>
it. It becomes darker and thicker in comparison. Bold
<span style = "background-color : Pink">
text in HTML is written like this–
this in Inline element </span>
<!DOCTYPE html>
<p> This will take width of Text only</p>
<html>
</body>
<head>
</html>
<title>Text formatting Example </title> </head>
Output: <body>
<p> This is Normal Text.</p>
<p><b> This is Bold Text:</b> </p>
</body>
</html>
When the above code is run in the browser, it will be
displayed like this–
HTML tags can be classified as container tags and
empty tags–
Container Tag– Similarly, a container tag must
have an opening tag as well as a closing tag. The
container tag only affects the content between the
opening and closing. Examples of container tags <html>
</html>,<body> </body>,<b></b>, <u> </u>etc.
Empty Tag– An empty tag is just an opening tag.
There is no closing tag in it. The empty tag has an effect
only at the place where it is used, it has no effect on the
rest of the content. Example of empty tag, <img> <BR>, 3.4(ii) Strong Text Element:
<hr> etc. An important word/syllable is defined with Strong
Element. Strong Element also makes the words darker
3.4 Formatting Tags: and thicker than the words adjacent to it. Strong Element
HTML Formatting is a process of formatting text to is defined in HTML as follows–
look better. HTML provides the ability to format text <!DOCTYPE html>
without using CSS. HTML has many formatting tags. <html>
These tags can be used to make text bold and italicized <head>
or used to underline. There are about 14 options
<title>Text formatting Example </title> </head>
available for how text appears in HTML and XHTML.
<body>
The following formatting elements are designed to
display specific types of text– <p> This is Normal Text.</p>
Different Types of HTML and Formatting Tags <p> <b> This is Important Text.</b> </p>
<b> – Bold Text </body>
<strong> – strong Text </html>
<i> – Italic Text in HTML When the above code is run in the browser, this type
<em> – Emphasized Text of output will be displayed–
<strike> – Strikethrough Text
<u> – Under line Text
<mark> – Marked Text
<del> – Deleted Text
<ins> – Inserted Text
<sup> – Superscript Text
<sub> – Subscript Text
<big> – Bigger Text
<small> – Small Text
M2R5 28 YCT
3.4 (iii) Italic Text Element: <title>Text formatting Example </title> </head>
Italic element is used to write words in HTML <body>
document in italic form. The Italic element is defined as <p> This is Normal Text.</p>
making it slightly slanted compared to other words. <p><strike>This is strikethroughText.</strike> </p>
<!DOCTYPE html> </body>
<html> </html>
<head> When the above code is run in the browser, this type
<title>Text formatting Example </title> </head> of output will be displayed–
<body>
<p> This is Normal Text.</p>
<p> <i> This is Italic Text.</i></p>
</body>
</html>

When the above code is run in the browser, this type

of output will be displayed–
3.4(vi) Underline Text Element:
Just as while writing notes, we draw a line below
important words or lines. Due to which that word
appears different. The same work is done in HTML
document with Under Line Element. Under Line
Element draws a horizontal line below the text it is
defined as follows.
<!DOCTYPE html>
<html>
3.4(iv) Emphasized Text Element: <head>
Words are also made italic with the Emphasized <title>Text formatting Example </title> </head>
element, but an Emphasized Text has more importance <body>
than an Italic Text. The Emphasized element is defined <p> This is Normal Text.</p>
in this way. <p> <u> This is Under lined Text.</strike> </p>
<!DOCTYPE html> </body>
<html> </html>
<head> When the above code is run in the browser, this type
<title>Text formatting Example </title> </head> of output will be displayed–
<body>
<p> This is Normal Text.</p>
<p> <em> This is Emphasized Text.</em> </p>
</body>
</html>

When the above code is run in the browser, this type

of output will be displayed–

3.4(vii) Marked Text Element:

Marked text is defined by the Mark element, through
which specific words are highlighted. The Mark element
is defined in this way.
<!DOCTYPE html>
<html>
<head>
<title>Text formatting Example </title> </head>
3.4(v) Strikethrough Text Element: <body>
Strikethrough element is defined by drawing a line <p> This is Normal Text.</p>
through the middle of the word syllable. <p> <mark> This is Marked Text.</mark> </p>
<!DOCTYPE html> </body>
<html> </html>
<head> When the above code is run in the browser, this type
of output will be displayed–
M2R5 29 YCT
 <!DOCTYPE html>
<html>
<head>
<title>Text formatting Example </title> </head>
<body>
<p> This is Normal Text.</p>
<p> This is ^Superscript Text. </p>
</body>
3.4(viii) Deleted Text Element: </html>
Delete Element defines a word that is removed from
the document. The word to which the delete element is When the above code is run in the browser, this type
applied is cut through the middle by a line. of output will be displayed–
<!DOCTYPE html>
<html>
<head>
<title>Text formatting Example </title> </head>
<body>
<p> This is Normal Text.</p>
<p> <del> This is Delete Text.</del> </p>
</body>
</html>

When the above code is run in the browser, this type

of output will be displayed– 3.4(xi) Subscript Text Element:
Subscript Text is defined by Subscript Element. This
text is completely opposite to Superscript Text. Because
this text appears lower than the word next to it. Subscript
text is defined like this.
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example </title> </head>
<body>
3.4(ix) Inserted Text Element: <p>This is Normal Text.</p>
Another word is defined in place of the deleted word <p>This is _Subscript Text. </p>
by the inserted element. </body>
</html>
<!DOCTYPE html> When the above code is run in the browser, this type
<html> of output will be displayed–
<head>
<title>Text formatting Example </title> </head>
<body>
<p> This is Normal Text.</p>
<p> <ins> This is Inserted Text.</ins> </p>
</body>
</html>
When the above code is run in the browser, this type
of output will be displayed–
3.4(xii) Bigger Text Element:
Larger Text is defined by Big Element. Larger Text
becomes slightly larger than the text adjacent to it. Big
Text is defined this way.
<!DOCTYPE html>
<html>
<head>
<title>Text formatting Example </title> </head>
3.4(x) Superscript Text Element: <body>
Superscript text is defined by the Supscript element. <p> This is Normal Text.</p>
This text is placed above the adjacent word, and is <p> This is <big> Big </big> Text. </p>
visible to the user above the adjacent word. Superscript </body>
text is defined as follows. </html>
M2R5 30 YCT
 When the above code is run in the browser, this type Output:
of output will be displayed–

3.4(xv) Preformat Element:

While creating a website, HTML <pre> tag is used
3.4(xiii) Small Text Element: to display the code exactly as it is written in the same
Small Text is defined by Small Element. Small Text place and on the same line. <pre> </pre> is a closing tag,
becomes slightly smaller than the text next to it. Small similar to other tags in HTML. In this, the user writes
Text is defined in this way. text as per his choice. It gets displayed in the same
<!DOCTYPE html> manner.
<html> Example:
<head> <!DOCTYPE html>
<title> Text Formatting Example </tittle> </head> <html>
<body> <head>
<p> This is Normal Text.</p> <title> HTML pre tag </title>
<p> This is <small> Small </small> Text. </p> </head>
</body>
<body>
</html>
When the above code is run in the browser, this type <pre>
of output will be displayed– Hello, I am
Learning HTML in Hindi
</pre>
function my fan (strvar) {
Print (str Text)
}
</pre>
</body>
</html>
Output:
3.4(xiv) HTML DIV Element:
The <div> tag is used to group a large section of
elements together. The <div> tag is a container used to
encapsulate other page elements and divide HTML
documents into sections.
The div tag is commonly used by web developers to
group together HTML elements and apply CSS styles to
multiple elements at once.
Example:
<!DOCTYPE html> 3.4(xvi) Line Break <br> Element:
<html> In HTML, the <br> tag is used to break a line in a
<head> text or paragraph. These tags are important in that
</head> conditions where line breaks are important. This tag has
<title> HTML <div> element </title> the importance of a break in HTML. An advanced
<style> version of this tag is available in HTML5. Which is
known as <wbr> tag, where the text line is broken
header{ through <br> tag, whereas through <wbr> tag, you can
height : 100px; suggest to the browser where to break the text line when
width : 400px; the screen size is reduced.
background-color : green; Example:
color : white; <!DOCTYPE html>
</style> <html>
</head> <head>
<body>
<div class = "header"> <title> HTML br tag in Hindi </title>
<h1> This is a heading <h1> </head>
<p> Paragraph goes here </p> <body>
</div> <p> Hello Dear Lerners! <br> you are learning
</body> HTML in Hindi with Youth Competition Times.</p>
</html> </body>
M2R5 31 YCT
 </html>
Output will be displayed– 3.4(xix) Anchor Links <a> Element:
With the help of anchor tag <a>, we can link
different web pages together. Hyperlink is given on any
text or image. <a> tag is used to create links in HTML
which is called anchor tag. To link any text, the link is
given between <a> and </a> and the href attribute is used
for that.
Example:
3.4(xvii) Drawing Line <hr> Element: <!DOCTYPE html>
The HTML horizontal tag is used to break sections. <html>
This element is used to draw a line between contents <head>
(Paragraph, image, table, cell etc). <hr> does not use any <title> Anchor Tag </title>
closing tag. </head>
Example: <body>
<!DOCTYPE html> <p> click on <a href = "https://www.yct.com/">
<html> this-link </a> to go on home
<head> page of https://www.yct.com/.</p>
<title> HTML hr tag in Hindi </title> </body>
</head> </html>
<body> Output:
<p> Hello, I am a Student. Learning
<Strong> HTML in Hindi </Strong>..</p>
<hr>
<p> Hey Dear! You are Learning HTML in Hindi
with better resource. </p>
</body> Target Attribute– With the help of this attribute the
</html> browser is instructed where to open the destination
Output will be displayed– address. Different values can be given in the target
attribute like–

•_blank–This value opens the URL in a new

tab/window.
•_self–This value opens the URL on the same
tab/window.
•_parent_This value works to open the URL in the
3.4(xviii) Quote Element: parent frame.
<q> element is used to insert HTML quotation in •_top– This value opens the URL to the entire window.
HTML file. This is a way to define short quotes. •_framename–Opens the linked document in the named
Example: frame.
<!DOCTYPE html>
<html> Example:
<head> <!DOCTYPE html>
<title> HTML q tag in Hindi </title> <html>
</head> <head>
<title> Anchor Tag </title>
<body> </head>
<h1> Drupal </h1> <body>
<p> Drupal Community Say, </P> <p> click on <a href = "https.//www.yct.com/" target
<q> Drupal is built on principles like Collaboration, ="_blank"> this link <a/>
globalism, and innovation. </q> to go on home page" of https://www yct.oom/.<p>
</body> </body>
</html> </html>
Output: Output:

M2R5 32 YCT
3.4(xx) Links-Colors & Download link: Creating Image Links– Images can also be
You can set the colors of your links, active links, converted into links. <a> tag is used for this. This makes
and visited links by using the link, alink, and vlink the image clickable and on clicking the image another
attributes of the <body> tag. URL opens there.
Hovering over a link; Example:
• The mouse arrow will change to the shape of a small <!DOCTYPE html>
hand. <html>
<head>
• The color of the link element changes. <title> Image Hyperlink </title>
By default the link looks like this in all browsers;
</head>
• An unvisited link will be underlined and blue. <body>
• A visited link will be underlined and purple. <p> click following Image Hyperlink </p>
• An active link will be underlined and red. <a herf = "http://www.yct.com" target = _self">
There are four types of HTML links like– <img src = "yct⋅Png" alt = "Image Hyperlink" border
Internal link– In internal link, another URL of a = "0"/>
website is given by clicking on which you can go to </a>
another page of the same website.
External link– By clicking on the external link, we </body>
come to the page of another website. </html>
Download link– This link is used to make different Output:
files downloadable. Therefore, you will have to add the
download attribute in it.
E-mail link– You can also give the link by creating
an e-mail link, hence the e-mail address has to be written
in the href attribute. Like–
<a href = "[email protected]"mail us </a>

3.4(xxi) Image Tag Element:

The image element is used to insert a picture into an 3.4(xxii) Comments:
HTML document. The image is defined by the <img> A comment is an HTML code written inside the
tag. It is an empty tag, that has no closing tag. content HTML comment tag. It can only be seen by
The <img> tag has required two attributes named src browsers and developers. End users cannot view this
and alt. Apart from these some other attributes are also content. A comment is defined by the comment tag in an
used as per requirement. HTML document. Although the HTML5 comment tag
The names, values and uses of attributes commonly has been deprecated, some browsers still support the
used with image elements are as follows– comment tag. Internet Explorer is the best example.
Attribute Value Use The syntax of a comment tag has three parts–
src URL It is used to define the Opening– In the opening comment consists of less
source or URL of the than symbol (<), Exclamation Mark (!) and two Dash (-),
image. you can also call it Opening.
alt text It is used to describe the Closing– Closing consists of two Dash (-) and a
image. Greater than symbol (>), you can also call it Closing
Tag.
Height pixels It is used to specify the Comment Text– Whatever is written within
height of the image. Opening and Closing is called Comment Text, this part is
width pixels It is used to specify the not visible to us in the web page.
width of the image. When we write these three together, Comment Tag
Align Top It is used to specify the is formed, which looks like this.
Bottom alignment of an image <!Comment Text–>
Middle according to surrounding Example:
Left elements. <!DOCTYPE html>
Right <html>
Border pixels It is used to specify the <head>
border width around the <title> HTML Comment Example </title>
image. </head>
Title text It is used to give title to the <body>
image. <p> <!– Paragraph Starting.–>
hspace pixels It is used to specify the This is yct. Here you can Learn in Hindi
blank space on the left and </p> <!–paragraph Ending.–>
right sides of the image.
</body>
Vspace pixels It is used to define the </html>
blank space above and Output will be displayed–
below the image. This is yct. Here your can Learn in Hindi

M2R5 33 YCT
 Output:

Comments can be divided into three types–

(i) Single Line Comment– When only one line is
commented in the HTML document, it is called Single 3.5(ii) Table Attributes:
Line Comment, HTML tables have some features that are very
useful when creating tables in web documents.
(ii) Multi Line Comment– When more than one
line is commented in an HTML document, it is called A. Captioning the table– The <Caption> element
Multi Line Comment. is used to define the title of an HTML table giving a title
(iii) Conditional Comment– These types of to the table makes it easier to identify the table. Different
comments are treated differently by Internet Explorer types of tables can be given different titles.
Browser and IE Browser. Conditional instructions are Example:
written for versions. <!DOCTYPE html>
<html>
<head>
3.5 HTML Tables: </head>
HTML tables allow web developers to arrange data <title>HTML Table Example </title>
(text links, images, etc.) into rows and columns of cells, <body>
It means users can arrange data in rows and columns in <table border="1">
<Caption> My First HTML Table </caption>
an HTML document by creating their own table. <td> Row 1, Column 2 </td>
<table> tag is used to create an HTML table in <td> Row 1, Column 2 </td>
which the tag is used to create data cells. <TH> is used </tr>
for table heading and CAPTION element is used for <td> Row 2, Column 1 </td>
table title. <td> Row 2, Column 2 </td>
</tr>
</table>
3.5(i) Creating Tables: </body>
To create a simple table in an HTML document, </html>
<!DOCTYPE html> Output:
<html lang = "en">
<head>
<title> Example of HTML Table </title>
</head>
<body>
<h2> Example of HTML Table </h2>
<table> B. Creating headings in tables– <th> is used to
<tr> create headings in HTML tables. The full name of this
<th> Employee First Name </th> element is Table Heading. In the heading of the table,
<th> Employee Last Name </th> each column is given a different name so that it becomes
easy to identify the data available in the column. Table
</tr>
headings are bold and center aligned by default. Table
<tr> headings are usually defined in the first row of the table.
<td> Mr. John</td> Example:
<td> Singh </td> <!DOCTYPE html>
</tr> <html>
<tr> <head>
<td> Mr. Mohan</td> </head>
<td> Kumar </td> <title> HTML Table Example </title>
</tr> <body>
</table> <table border = "1">
</body> <Caption> Heading in HTML Table </caption>
<tr>
</html>
<th> First Name </th>
M2R5 34 YCT
 <th> Last Name </th> Output:
</tr>
<tr>
<td> Sohan </td>
<td> Kumar </td>
</tr>
<tr>
<td> Subodh </td>
<td> Kapoor </td>
</tr> D. Changing the background of the table– To
<table> set the background in the table, two attributes named bg
color and background are used. With bg color you can
</body> change the background color of the entire table or a
</html> particular cell and with table background you can use
Output: any image as table background.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<title> HTML Table Example </title>
<body>
<table border = "1"
border color = "red" height = "200" width = "300">
bg color = "# FFFF66"
<Caption> Background in HTML Table </Caption>
<tr>
C. Setting a border on a table– The border <th> First Name </th>
attribute is used to create a border around the table. If <th> Last Name </th>
you want to show a border in the table then set the value </tr>
to "1" and if you do not want to display a border then set <tr>
the value to "0". <td> Subodh </td>
Example: <td> Kumar </td>
<!DOCTYPE html> </tr>
<html> <tr>
<head> <td> Sohan </td>
</head> <td> Kapoor </td>
</tr>
<title> HTML Table Example </title>
</table>
<body> </body>
<table border = "1" </html>
border color = "red"> Output:
<Caption> Heading in HTML Table </caption>
<tr>
<th> First Name </th>
<th> Last Name </th>
</tr>
<tr>
<td> Sohan </td>
<td> Kumar </td>
</tr>
<tr>
<td> Subodh </td>
<td> Kapoor </td>
</tr> E. Setting the alignment– While designing a web
page, setting the position of the text in the page is called
<table> alignment. In HTML coding language it is called text
</body> alignment tag. There are four types of text alignment–
</html> Left, Center, Right, Justify.
M2R5 35 YCT
 Left Alignment– Left alignment is used to set any <th> Last Name </th>
text, image, paragraph etc. on the left side of the page. </tr>
According to HTML coding, it is called paragraph align <tr>
<P align = "left">. <td>Rohan</td>
Center Alignment– Center Alignment is used to <td>Gautam</td>
set any text, image, paragraph etc. on the center area of
the page. According to HTML coding, it is called </tr>
Paragraph align or p align="center">. <td>Subodh</td>
Right Alignment– To set any text, image, <td>Kumar</td>
paragraph etc on the right side of the page. Use right </tr>
alignment. According to HTML coding, it is called </table>
Paragraph align or <p align="right">. </body>
Justify Alignment– To keep equal a paragraph on </html>
the page on both sides (left and right sides), We use Output:
Justify alignment. According to HTML coding this is
called paragraph align <p align = "justify">
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<title> Alignment Example </title>
</head>
<body>
<p align = "left">
This in an example of left Alignment </p> G. Using Colspan and Rowspan Attributes–
<p align = "center"> When you want to write data in the table in more than
This in an example of Center Alignment </p> one row and column, then Colspan and Rowspan
<p align="Right"> attributes are used for this. The colSpan attribute merges
This in an example of Right Alignment </p> two or more columns into one column and the rowspan
<p align="justify"> attribute merges two or more rows into one.
This is an example of Justify Alignment <p> Example:
</body> <!DOCTYPE html>
</html> <html>
Output: <head>
</head>
<title> HTML. Table Example </title>
<body>
<table border = "1">
<border color = "red" width = "300" height = "200">
<Caption> colspan and Rowspan in HTML Table
<tr>
<th> First Name </th>
<th> Last Name </th>
F. Using Cell Padding and Cell Spacing <th> City </th>
Attributes– Cell padding and cell spacing are </tr>
used to adjust the white space between table cells and <d> Rohan </td>
text. Cell padding defines the distance between the cell <td> Gautam </td>
border and content, and cell spacing defines the distance <d> Delhi </td>
between cells. </tr>
Example: <d> Subodh </td>
<d> Kumar </td>
<!DOCTYPE html> <td> Colspan = "3"> sanjay </td>
<html> </tr>
<head> </table>
<title> Alignment Example </title> </body>
</head> </html>
<body> Output:
<table border = "1"
border color = "red"
cell padding = "15"
cell spacing = "15">
<Caption> Cell padding and cellspacing in HTML
Table
<tr>
<th>First Name </th>
M2R5 36 YCT
H. Setting the height and width of the table– <ul type = "disc">
Height and Width attributes are used to set the height and <li> javed </li>
width of the table. Users can create the height and width <li> prabhar </li>
of the table as per their requirement. </ul>
Example: <ul type = "square">
<!DOCTYPE html> <li> vinay </li>
<html> <li> rohan </li>
<head> </ul>
</head> </body>
<title> HTML Table Example </title> </html>
<body> Output:
<table border = "1">
<border color = "red" height = "200" width = "300">
<caption> Border in HTML Table </caption>
<tr>
<th> First Name </th>
<th> Last Name </th>
</tr>
<tr>
<td> Rohan </td> (ii) Ordered List– Ordered List is in the form of
<td> Gautam </td> numbers. To add numbers to any list, we use Ordered
</tr> list. In HTML, ordered list is defined with <ol> tag. Here
<tr> o means Ordered and l means List. In this also <li> tag is
<td> Subodh </td> used to insert the list item. Whenever the ordered list is
<td> Kumar </td> displayed in the browser, the next number is shown after
</tr> each sequence like- 1, 2, 3, 4,......A, B, C, D.......a, b, c, d
.......i, ii, iii, iv, v……etc can be added to the list. This is
</table> called ordered list.
</body> Example:
</html> <html>
Output: <head>
<title> Ordered list </title>
</head>
<body>
<ol>
<li> Rahul </li>
<li> Rohan </li>
<li> Vinay </li>
3.6 HTML List: <li> Umesh </li>
HTML list is very important. Apart from articles, list </ol>
is also used to create navigate menu in the website. </body>
(i) Unordered List – To add symbols to any list, we </html>
use Unordered List. Output:
Example– Circle, bullet, Square etc. can be added to
the list. This is called Unordered List. In HTML, it is
made of <ul>tag. There are 2 tags used in it; <ul> tag
and <i> tag. There are no numbers in it, rather the list is
represented by bullets. Its short formula is Unordered list
is defined with <ul> tag. Its syntax is something like this.
<li> tag is used to create any list. <ul> tag is used
inside <i> tag.
Circle– This sets the list item in a circle.
Square– By this the list item is set in square. (ii) Definition List– This list is rather different from
None– It is used to remove the embedded bullet, both the lists. It is divided into 2 parts. The first part is
circle or square. This is the list style of CSS Property
To use these three properties, you will have to use defined with <dt>, dt means definition term and the
the style attribute. second part is defined with <dd>. Meaning of dd
Example: definition description.
<html> Example:
<html>
<head> <head>
<title> Unordered list </title> <title> definition list <title>
</head> </head>
<body> <body>
M2R5 37 YCT
 <dt> A </dt> (ii) Method Attribute– Data is stored through this
<dd> First Letter </dd> attribute, that is, through which method the data will be
<dr> B </dt> pass, it is defined in this attribute and only 2 values are
<dd> Second Leter </dd>
</dl> passed in the method attribute. GET or POST
</body> (iii) Target Attribute– This attribute is used when
<html> the form is submitted, that is, which page will open after
Output: the form is submitted, we define it in the target attribute.
(iv) Enctype Attribute– It specifies how the data
should be encoded and it has three types of possible
values.
X-WWW-form-Urlencoded– This is the default
value of the enctype attribute in the form element. It
replaces all spaces with plus (+) symbol and converts all
special characters to ASCII HEX values. It encodes all
character before sending it to the server.
3.7 HTML Forms: multi part/form-data: Use enctype = "multipart /
form data" use is necessary to allow user upload images
HTML form is a document that stores user from the form.
information on a web server using interactive controls. text/plain: This value converts spaces to "+" but
An HTML form contains various types of information does not convert special characters.
like user name, mobile number, email ID and password
etc. In simple words, HTML forms are used to collect 3.8 Forms Element:
user input. This means that when you want to collect HTML forms are defined by form elements. The
some data from website visitors, HTML forms are form works like a container tag within which other form
required. elements are defined to create the form. The form
Example: element consists of the following parts–
<!DOCTYPE html> (i) Select– Using this element, a drop down list can
<html> be created using which the user can give information
with a single click and to create the list, options are
<body> required which the user can select and to create the
<form> option <Option> tag is placed inside the <Select> tag.
User name: <br> The attributes for selecting tags are as follows–
<input type ="text" • Name: This attribute is used to create a label in the
name ="user name"> data structure. It is functionally similar to a radio
<br> button, that is, when used, only one option is selected.
Email id: <br> • Size: This attribute determines how many options are
<input type ="text" visible at one time. The default value of size is 1 but it
name = email_id"> can be changed to 2.
<br> <br> • Displays the selection as a scrolled list if the size is
<input type = "submit" greater than 2.
value = "submit"> • Multiple/Single: The default value to select the option
</form> is SINGLE but by adding the MULTIPLE attribute the
</body> user can select more than one option.
</html> Example:
Output: <!DOCTYPE html>
<html>
<body>
<h3>Pre-Select Element</h3>
<p>HTML Form Elements</p>
<form action = "get-data.php" target ="_blank">
<label for = "languages"> choose a languages;
</label>
<select name = "languages" size = "u" multiple>
<option value = "C languages"> Clanguage
<Form> Tag: <Form> tag is used to create a form </option>
in any web page. It is a kind of container which is the <option value = "C++"> C++ </option>
starting and ending of the HTML form. All the tags come <option value = "python" selected> python
inside the form tag. Form tags also have some attributes.
Like– action method, target etc. </option>
Form Attributes Some of the major attributes used <option value = "java"> Java </option>
with the form tag are as follows– </select>
(i) Action Attribute– With this attribute you can <input type ="submit">
define what should happen after the form is submitted, </form>
like you can show a thank you message or execute a PHP </body>
script as soon as the form is submitted. </html>
M2R5 38 YCT
Output: Output:

Although text fields can be defined by input

elements, multiline data fields can be defined only by
(ii) Option: This tag is only inside the select textarea elements because only single-line data fields can
element. The option element is defined for a drop-down be created from input elements.
list. The attributes of the option are– (iv) Input Option: This is the most used element in
• Selected: Displays that this option is initially selected. the form. The <input> element is used to give input by
• Value: This is the value returned by select when this the users. The <input> element can be used for different
option is selected. purposes through the Type attribute. Different types of
The <option > tag is accompanied by a closing tag type attributes are as follows–
</option>. <input type = "button">
Example: <input type = "checkbox">
<!DOCTYPE html> <input type = "color">
<html> <input type = "date">
<head> <input type = "date time–local">
<title> HTML option </title> <input type = "email">
</head> <input type = "file">
<body> <input type = "hidden">
<form> <input type = "image">
<div> Enter your favorite food;press any character <input type = "month">
</div> <input type = "number">
<input type = "text" id = "favfood" list = "food"> <input type = "password">
<datalist id = "food"> <input type = "radio">
<option value = "chinese"> <input type = "range">
<option value = "Indian"> <input type = "search">
<option value = "Italian"> <input type = "submit">
<option value = "South Indian"> <input type = "text">
<option value = "Japanes"> <input type = "url">
</select>
</datalist>
</form>
</body>
</html>
Output:
The default type of input is "Text", that is, if no type
is added to the input, its default type is "Text".
The Input tag can be used to create a variety of user
interface features. The following in the input element
(iii) Text Area: Text area is used to write multiple Features are–
lines, whose default size is more than all the fields. The • Align: Used only with the Image type. It can be set in
Top, Bottom and Middle.
text area element is used for fields such as message
• Accept: This filter specifies what types of files the
because the message can be of any length. In this, users user can select from the input dialog box.
can also give fixed height as per their choice. • Checked: This is only suitable for checkboxes and
Example: radio buttons. By default this specifies that the
<form> checkbox or radio button is checked.
<label> Share your Feedback </label> <br> <br> • Maxlength: The maximum number of characters
accepted as input. It is only suitable for text input
<textarea placeholder = "Message" cols = "10" rows fields and password input fields.
= "10"> </text Area> • Name: specifies a symbolic name used to identify and
</form> transfer the output from this element of the form.
M2R5 39 YCT
• Size: It is suitable only for text input fields and Output:
password input fields. It is set to 20 by default. Multi-
text input fields can be specified by Size = width,
Height.
• Src: Defines the source file for the image when the
attribute type is set to Image.
• Text: It is used for single line text. If the only element
in the form is attribute text, the user can submit the
form by pressing a key on the keyboard.
Some major types of input elements are as follows–
Text– <input type = "text"> Defines a single line
text input field.
Example:
<!DOCTYPE html>
<html>
<body>
<h2> Text field </h2> • Input type Submit: This defines a button to submit
<p> The <strong>input type = "text" </strong> the form data to the form handler. A form handler is
defines a one-line Text input field: </p> usually a server page that contains a script to process
<form action = "/action_page⋅php"> the input data.
<label for = "fname"> first name: </label> <!DOCTYPE html>
<br>
<input type = "text" id = fname" name= "f name"> <html>
<br> <body>
<label for = "I name"> Last name : </label> <br> <h2> Submit button </h2>
<input type = "text" id ="fname" name = "f name"> <p> The <strong> input type = "submit" </strong>
<br> <defines a button for submitting from data
<input type = "text" id = "1 name" name = "1 to a form_page.php"> </p>
name"> <label for = "fname"> first name:</label>
<br> <br> <br>
<input type = "Submit" value "submit"> <input type = "text" id = "fname" name = "fname"
</form> value = "John"> <br>
<p> Note that the default width of a Text field is 20 <label for = "lname"> Last name:</label>
charcters </p> <br>
</body> <input type = "text" id = "lname" name = "lname"
</html> value = "Doe"> <br> <br>
Output: <input type = "Submit" value = "Submit">
</form>
</body>
</html>
Output:

● Input type Password: This defines the password field.

<!DOCTYPE html>
<html>
<body>
<h2> Password field </h2>
<p> The <strong> input type = "password"
</strong> degines a password field : </p>
<form action="/action_page-php"> • Input type Reset: This defines a reset button that
<label for ="username"> user name: </label> <br> resets the default values to other values.
<input type ="text" id ="user name" name="user <!DOCTYPE html>
name"> <br> <html>
<label for ="pwd"> password: </label> <br> <body>
<input type ="password" id ="pwd" name ="pwd"> <h2>Reset button </h2>
<br> <br> <p>The <strong> input type = "reset" </strong>
<input type="submit" value="submit"> defines areset button that resets all form values
</form> to their default values: </p>
</body> <form action="/action page⋅php">
</html> <label for="fname"> first name:</label>
M2R5 40 YCT
 <br> <p> The <strong> input type = "Checkboxes
<input type = "text" id = "fname" name = "fname" </strong>defines a checkbox : </p>
value = "John"> <br> <form action = "/action_page⋅php">
<input type = "text" id = "Iname" name = "Iname" <input type = "checkbox" id = "vehicle 1"
value = "Doc"> <br> <br> name = "vehicl 1" value = "Bike">
<input type = "Submit" value = "submit"> <label for = "vehicle 1"> I have a bike </label>
<input type = "reset">
</form> <br>
</body> <input type = "Checkbox" id = "vehicle 2"
</html> name = "vehicle 2" value = "car">
Output: <label for = "vehical2"> I have a car </label>
<br>
<input type = "checkbox" id = "vehicle 3"
name = "vehicle 3" value = "Boat">
<label for = "vehicle 3"> I have a boat
</label> <br> <br>
<input type = "submit" value = "Submit">
</form>
</body>
</html>
• Input type Radio: This defines the radio button. It Output:
allows the user to select only one choice.
<!DOCTYPE html>
<html>
<body>
<h2> Radio Buttons </h2>
<p> The <strong> input type = "radio" </strong>
defines a radio button: </p>
<form action ="/action_page⋅php>
<input type="radio" id = "html" name = "fav
language" value = "HTML">
<label for = "html"> HTML </label> <br>
<input type="radio" id="CSS" name="fav language"
value="CSS"> • Input type Button: It defines button.
<label for="CSS"> CSS </label> <br> <!DOCTYPE html>
<input type="radio" id="javascript" name= <html>
"fav_lagnuage" value="Javascript"> <label <body>
for = "javascript"> Javascript </label> <br> <h2> Input Button </h2>
<br> <input type = "button" on click = "alert ('Hello
<input type="submit" value="submit"> World!')" value = "click me!">
</form> </body>
</body> </html>
</html> Output:
Output:

3.9 HTML Form Program:

HTML <form> tags are used to create user input that
begins with an open <form> tag and ends with a closed
</form> tag. The <form> element can contain one or
more form elements. Like– <input> <label>, <select>,
<text Area>, <button>, <fieldset>, <legend>
Syntax:
<form>
• Input type Checkbox: This defines the checkbox. It content....
allows the user to select zero or many options. ..............
<!DOCTYPE html> </form>
<html> Example:
<body> <!DOCTYPE html>
<h2> Checkboxes </h2> <html>
M2R5 41 YCT
 <head> Output:
<meta charset = "utf-8">
<title> form example </title>
</head>
<body bg color = "#CCFF66">
<form align = "center">
<h3 style = "color:# Foo"> Personal Details </h3>
Name:
<input type = "text" name = "name" id = "name"
<br> <br>
Password:
<input type = "Password" name = "Password" id =
"Password" <br> <br>
Email id : <input type = "text" name = "name" id =
"name"> <br> <br>
Gender : <input type = "radio" name = "radigroup1"
value = "radio" id = "radiogroup 1"> male
<input type = radio name ="radio group1" value =
"radio" id = "radio group2"> Female <br> <br>
Contact#:<input type = "text" name = "mobile" id =
"mobile">
<h3 style= "Color:#Foo"> Educational Qualification
</h3>
Degree: <select name = "degree" id = "degree">
<option selected>–select Group–</option>
<option> B.Com </option>
<option> B.Sc </option>
<option> B.Com Computers </option>
<option> B.A </option>
</select> <br>
<br> 3.10 HTML Frame:
Engineering: <select name = "eng" id = "eng"> A web page can be divided into several sections.
These sections are called frames. These sections are
<option selected>– select Group–</option> independent from each other. Each section represents a
<otption> CSE </option> different web page. That is, a separate web page is
<option> ECE </option> reloaded in each section. A header can be created in one
<option> CIVIL </otion> frame and a menu can be created in the other frame.
<option> EEE </option> Similarly, one webpage can be made a footer and the
</select> <br> <br> other webpage can be used as the main window.
When using Frames, <body> tag is not used.
Hobbies: <frameset> tag is used to define the frame in any
<input type = "checkbox" name = "check box webpage. There are two attributes of this tag, rows and
Group1" Cols, their value are given. If a webpage is considered
Playing Chess 100%, then the frame covers as much space as the value
given by the user.
<input type = "checkbox" name = "checkbox <FRAMESET>TAG
Group1" value = "checkbox" id = "check box To create a frame definition document, the
Group2"> Reading books <br> <br> <frameset> tag is used. <Body> tag in HTML document
<h3 style = "color : # Foo"> Address </h3> <FRAMESET> tag is used instead of <Bodey>tasgs.
Both tags cannot be used together.
<text area name = "text area" Cols = "35" row = "5" The <frameset> tag has some features using which
id = "text area"> </text area> <br> the user can configure all the frames–
<br> • Cols: Cols feature is used to create vertical frames in
Attach Resume: web browsers. How many columns does the user
<input type = "file" name = "file field" id = "file create a frameset, what you want to do is defined by
the Cols attribute. Besides, the size of all the columns
field" <br> <br> is also defined.
<input type = "image" src = " / images / submit _ btn Example– To create three particle frames,
⋅png"> = Use "100, 200, 300".
</form> • Rows: The rows attribute is used to define the web
page into frames. That is, how many parts can a web
</body> page be divided into, the value you want to divide is
</html> given in the row attribute.
M2R5 42 YCT
Example– To make two horizontal frames,
= "20%, 80%". • <FRAME SCROLLING>: The scrollbar attribute is
used in the frame tag to control the appearance of
Border– This attribute of the frameset tag defines scroll bars in the frame. It happens. The value of this
the border of the frame in pixels. attribute can be Yes, No, Auto. Where no value is
Example– <framset border = "5" framset> specified there will be no scroll bar will not be present
• Frame border: Through this attribute it is defined any scroll bar.
whether the border of the frame is to be defined or not.
The value of this attribute is given only in yes or no. • <NORESIZE>: Through this attribute, users manage
• Frames spacing: Through this attribute the space their frames, that is, they can resize the frame and we
between the frames is defined. It can take any integer give its value in the noresize attribute. This prevents
value as parameter which basically represents the them from being transferred by locking the frame
value in pixels. borders. This is an optional attribute.

Creating Columns (<FRAMESET COLS>)– • <NOFRAMES>: If users open a frame definition

<html> document in a web browser that does not support
<head> frames, only a blank page is shown. The noframes tag
<itle> HTML Frames </title> enables body text to be included as part of the
</head> document. Frame-enabled browsers ignore all tags and
<frameset cols = "25%, 50%, 25%"> data contained in the Noframe element.
<frame name = "left" Src = "image1.jpeg"/>
<fram name = "center" src = "image2.jpeg"/> 3.11 Introduction of HTML5:
The full name of HTML is Hyper Text Markup
<fram name = "right" src = "image3.jpeg"/> Language. It is used to design web pages using markup
</frameset.> </html> language. HTML is a combination of plaintext and
markup language. Hypertext defines the links between
Creating Rows (<FRAMESET Rows>)– web pages. Markup language is used to define text
<html> documents within tags that define the structure of web
<head> pages. HTML5 is the fifth and current version of HTML.
<title> HTML Frames </title> It has introduced application programming interfaces
</head> (API) and Document Object Model (DOM) available for
<frameset row = "10%. 80%, 10%"> documents.
<frame name = "top" src = "image1⋅jpeg:"/> Features of HTML 5– New multimedia features
<frame name = "main" src = "image2⋅jpeg:"/> have been introduced in HTML 5 that support audio and
video. For this, <audio> and <video> tags are used. New
<frame name = "bottom" src = "image3⋅jpeg:"/> Graphics elements including vector graphics and tags
</frameset> have been added to it.
</html> <header>, <footer>, <article>, <section> and
<figures> etc. are included.
Frame Tag Attributes– Its attributes are as Drag and Drop– Users can grab an object and drag
following– it to a new location.
• <FRAME SRC>: In the frame tag this attribute is Geo-location Services– It helps in locating the
basically used to define the source file that will be geographical location of the client. Web storage feature
included in the frame to be loaded. The SRC value can that provides web application methods to store data on
be any URL. The syntax of SRC attribute is as the Internet. It uses SQL databases to store offline data.
follows– This is triangle, rectangle, circle etc. Allows to draw
<FRAME SRC = "document URL"> various shapes. It is capable of handling incorrect syntax.
In this, easy DOC TYPE declaration i.e. <!Doctype
• <FRAME NAME>: This attribute is used to name the html> and easy character encoding is created <meta
frame. It separates one frame from another. It is also charset = "UTF-8e>
used to indicate into which frame the document should
be loaded. 3.12 New Element of HTML 5:
<FRAME SRC = "main⋅htm" NAME= "main"> The new elements of HTML are as follows–
• <audio> The <audio> element has been added to link
• <FRAME MARGINHEIGHT>: This attribute audio in HTML 5, to play the audio on a web page.
defines the space in pixels between the border and the <!DOCTYPE html>
content of the top and bottom frames. Used to specify <html>
black space. <body>
<h2> Example of audio element </h2>
<Fram Marginheight = "value"> <p> Click on the play button to play a sound: </p>
<audio controls>
• <FRAME MARGINWIDTH: This attribute is used <source sre = "horse-ogg"
in the frame tag to define the width in pixels between type="audio/ogg">
the border and the left and right frame content. Blank <source-src = "horse⋅mp3"
space is used to specify the width of the frame. type = "audio/mpeg">
<Fram Marginwidth = "20"> your browser does not support the audio element.
M2R5 43 YCT
 </audio> Output:
</body>
</html>
Output:

• <canvas>: Canvas is used to draw graphics on the

website.
• <header>: The header part of the website in which all
• <video>: The video element is also a part of the the code at the top of the website except the body
multimedia feature which has been added in HTML 5. included in the <header> element. The header part (top
Due to this feature, the video can also be easily linked of the website) can be seen in <headers>.
and displayed and can also be easily played by linking. <!DOCTYPE html>
<!DOCTYPE html> <html>
<html> <body>
<body> <h1> The canvas element </h1>
<h1> The video element <h1> <canvas id = my canvas> your browser does not
<video width = "320" height = "240" controls> spport the canvas tag. </canvas>
<source src = "movie⋅mp4" type = video/mp4"> <script>
<source sre = "movie⋅ogg" type = "video/ogg>" var c = document-get Element Byled ("my canvas");
Your browser does not support the video tag. var ctx = C⋅get Contaext ("2d");
</video> ctx⋅fill style="#ff0000":
</body> ctx.fill Rect (0, 0, 80, 100);
</html> </script>
Output: </body>
Output:

• <SVG>: HTML 5 supports scalable vector graphics • <nav>: Whenever you view a website, you see a menu
(SVG). This feature is a very special feature. Any which contains page links. Website menus are defined
graphic can be easily draw through SVG. <SVG> is inside the <nav> element in HTML 5.
known as an element. <!DOCTYPE html>
<!DOCTYPE html> <html>
<html> <body>
<body> <h1> The nav element </1h1>
<svg width = "100" height = "100"> <p>The nav element defines a set of navigation
<circle cx "50" cy = "50" r = "40" link:</p>
<nav>
stroke = "green" stroke⋅width = "4" <a href = "/html"/> HTML </a>/
fill = "yellow"/> <a href = "/CSS/">CSS</a>
sorry, your browser does not support inline SVG. <a href = "/js/"> Javascript</a=/
</svg> <a href="/python/"> Python </a>
</body> </body>
</html> </html>
M2R5 44 YCT
Output: <h2> Microsoft Edge </h2>
<p>Microsoft Edge is a web browser developed by
Microsoft, released in 2015. microsoft Edge
replaced internet.
Explorer. </p>
</article>
</body>
<html>
Output:
• <section>: Any number of sections can be created in a
website. Section works like a blog in which it works
like a complete blog and HTML code is defined for a
complete block. The advantage of section is that we
can define the HTML code for the block. The
advantage of the section is that we can easily
understand and read that block code.
<!DOCTYPE html>
<html>
<head>
<title> using the section tag </title>
</head>
<body> • <aside>-<aside>: element is a good structure feature
<section> of HTML 5 in which we define the sidebar. Whatever
<h2> Hypertext markup language HTML </h2> the code of the sidebar is. All that is written in <aside
<p>HTML is the standard markup langage for > element. This feature of HTML5 is being used a lot.
rating web pages and web applications browsers <!DOCTYPE html>
receive HTML documents from a web server or <html>
from local storage and render the documents into <body>
multimedia web pages </p> <h1> The aside element </h1>
</section> <p> my family and I visited The Epcot center this
<section> summer⋅</p>
<h2>CSS </h2> </aside>
<p>formal language, which is used as a description <h4> Epcot center </h4>
</section> <p> Epcot is a theme park at walt Disney world
</body> Resort featuring exciting attraction international
</html> pavillions </p>
Output: </aside>
</body>
</html>
Output:

• <article: The article element defines the article. By

using article element, different article HTML codes
can be used in different article elements.
<!DOCTYPE html>
<html>
<body>
<h1> The article element </h1> • <footer>: There is also a part of footer in the website.
<article> The part of footer is that which is the bottom part of
<h2> Google Chrome </h2> the website in which information about the website
<p> Google Chrome is a web browser developed by like numbers, address etc. is given at the bottom.
Google, released in 2008. Chrome is the world's
most popular web browser today!</p> <!DOCTYPE html>
</article> <html>
<article> <body>
<h2> Mozilla fire fox </h2> <h1> The footer element <h1>
Open-Source web brower developed y Mozilla. Fire <footer>
<p> Author : YCT <br>
fox has been the second most popular web
<a href = "mail to : [email protected]">
browser since January, 2018. </p>
<p> Mozilla fire fox is an [email protected]</a></p></footer>
</article> </body>
<article> </html>
M2R5 45 YCT
Output: • We want to get the data in right format. If our users
data is in wrong format then want to get the correct
data. If our users' data is stored in the wrong format, is
incorrect, or is omitted altogether, our applications
may not function properly, or will not work. We want
to protect our users' data .
• Forcing users to enter a secure password makes it
easier to protect their account information.
• We want to protect ourselves. There are several ways
malicious users can abuse vulnerable forms to cause
harm to applications.

3.12(ii) New Input Types in HTML 5:

Advantages of HTML 5– It is supported in all Input types are used to receive input from the user.
browsers, it is more device friendly. It is easy to use. The input type is defined inside the <form> element.
HTML 5 along with CSS, JavaScript etc can help in Apart from textbox radio buttons, buttons, checkboxes,
developing good and beautiful websites. there are also some new input types in HTML5. In input
Disadvantages of HTML 5– It requires writing types, by using different types of inputs can be obtained
long code which takes more time. Only the latest from the users which are as follows–
browsers support it. Color– Color input type is used to input color from
the user. If the browser supports the new input type, then
3.12(i) HTML 5 Form Validation: Color Picker will be shown, otherwise a simple text box
Client side validation is an initial check and an will be displayed in which the hex value of the color is
important feature of good user experience, on the client given as input.
side. By catching invalid data, the user can fix it Example:
immediately. If it reaches the server and rejected, there is <html>
a noticeable delay due to a round trip to the server and <head>
then asking the user to recover their data comes back to <title> HTML 5 Color Input type Demo </title>
the client side. However, client side verification should </head>
not be considered a complete security measure. Your
apps should always perform security checks on any form <body>
submitted data on the server side as well as on the client <h1> HTML 5 Color Input type Demo </h1>
side, because it is very easy to bypass client-side <h2> What is your favorite color? </h2>
validation, so malicious users can still easily get through <form>
to your server can send bad data. <input type = "Color" name = "my color">
Form validation– Visit any popular site with a <br> <br>
registration form and you'll notice that they provide <input type = "Submit">
feedback when you don't enter your data in their </form>
expecting format. </body>
User will receive messages like this– </html>
• "These fields are required" (You cannot leave this field Output:
blank).
• "Please enter your phone number in the format xxx–
xxxx" (this requires a specific data format to be
considered valid).
• "Please enter a valid e-mail address" (The data you
entered is not in the correct format).
• “Your password must be between 8 to 30 characters
and contain a capital letter, a symbol, and a number.”
(A very specific data format is required for your data).
This is called form validation. When data is entered,
the browser and web server will check to see that the Date– The new date input type is used to receive
data are in the correct format and within the constraints date as input. If the browser supports this input type then
set by the application. Validation performed in the the Date Picker is shown to the user. Users can also add
browser is called client side validation, while limitations on the date to be entered using the max and
validation performed on the server is called server side min attributes.
validation. In this chapter we are focusing on client Example:
side validation. If the information is correctly <html>
formatted, the application allows the data to be <head>
submitted to a server and usually saved to a database; <title> HTML Date Input type Demo </title>
If the information is not formatted correctly, it gives an </head>
error message to the user. Which explains what needs <body>
to be fixed, letting them try again. <h1> HTML Date Input type Demo </h1>
We want to make filling out web documents as easy <h2> What is your birthdate ? </h2>
as possible so there are three main reasons we emphasize <form>
validating our forms– <input type = "date" name = "my Date" max =
M2R5 46 YCT
 "1999–1–1"> <br> <br> <input type = "Submit">
<input type = "submit"> </form>
</form> </body>
</body> </html>
</html> Output:
Output:

Range– Input type Range is used in the situation

Email– If you are getting the user to input email when the user has to enter any value of the given range
then you should use email input type. If your browser instead of the exact value. The default range in this input
supports this input type, the e-mail is automatically type is between 0 to 100 but you can define any range
validated when the form is submitted. using min max attribute.
Example: Example:
<html> <html>
<head> <head>
<title> HTML 5 Email Input type Demo </title> <title> Range Input type Demo </title>
</head> </head>
<body> <body>
<h1> HTML 5 Email Input Demo </h1> <h1> Range Input type Demo </h1>
<h2> Enter your Email Address: </h2> <h2>How do you rate yct between 1 to 10</h2>
<form> <form>
<input type = "email" name = "my Email"> <input type = "range" name = "Range" min = "1"
<br> <br> max = "10"> <br> <br>
<input type = "Submit"> <input type = "Submit">
</form> </form>
</body> </body>
</html> </html>
Output: Output:

Search– If you want to create a search box in the

Number– If you want to input numeric value from webpage, then you can use input type search for this. It
user, then input type number is used for this. You can works just like input type text.
also bound the values input by the user to a certain range Example:
using the min and max attributes. <html>
Example: <head>
<html> <title> Search Input Type </title>
</head>
<head> <body>
<title> HTML 5 Number Input type Type </title> <h2> Search yet </h2> <br> <br>
</head> <form>
<body> <input type = "Search" name = "yct search">
<h1> number Input type Demo </h1> <br> <br>
<h2> Enter a number </h2> <input type = "Submit" value = "Search">
<form> </form>
<input type = "number" name = "Number"> </body>
<br> <br> </html>
M2R5 47 YCT
Output: Output:

Time– Time input type is used to get time from the 3.13 HTML 5 Embed Tag:
user. The inputted time has no time zone. If the browser If you want to add any multimedia file in your
webpage like Audio, Video or Flash etc., then <embed>
supports this input type then it becomes Time Picker. tag is used for this. Using this tag, you can easily add any
Example: multimedia file to the webpage.
<html> The <embed> tag creates a panel inside the webpage
<head> that displays your multimedia files. When <embed> tag
<title> Time Input Type Demo </title> is used, its controls are automatically provided by the
browser in the panel. For example, if a video is added,
</head> then controls like Play, Pause etc. are automatically
<body> provided by the browser.
<h2> What time did you woke up today? </h2> There are 4 required attributes used with the HTML
<form> <embed> tag. Which are as follows–
• Src: Through this attribute you give the address of the
<input type = "time" name = "WK Time"> file that you want to include in the webpage.
<br> <br> • Height: This attribute defines the height of the created
<input type = "Submit"> panel.
</form> • Width: This attribute defines the width of the created
</body> panel.
• Type: With this attribute you can define the type of
</html> the included file.
Output: Example:
<html>
<head>
<title> Embed Tag Example </title>
</head>
<body>
<h2> my favorite movie </h1>
<embed src = "/media/video/myfile"
height = "300" width = "300">
</body>
</html>
Output:

URL– The input type can be used to receive a URL

as input from the user in browsers that support this input.
They automatically validate the URL.
Example:
<html>
<head>
<title>Time Input Type Demo </title>
</head>
<body>
<h2> Enter a URL </h2>
<form>
<input type = "url" name = "WeUrl">
<br> <br>
<input type = "Submit">
</form>
</body>
</html>
M2R5 48 YCT
3.14 HTML Layout: <td colspan = "2" bgcolor = 3f 3f 3f>
HTML layout is a blueprint which is used to <font color = "white">
organize web pages in a defined manner. It makes <center>
HTML documents easier to navigate and understand and This is footer
uses HTML tags to customize web design element. Web </center>
page layout is very essential to give a better look to the </font>
website. Most websites primarily consist of a header, </td>
navigation bar content area, sidebar, and a footer. Html </tr>
layout elements are as follows–
</table>
• <header>: This element is used to define the header
for a document or section. </center>
• <nav>: It is used to define a container for navigation </body>
links. </html>
• <section>: This defines a section in the web Output:
document.
• <article: This layout element is the primary element
that contains information about the web page.
• <aside>: It is used to define content separate from the
content (eg-sidebar).
• <details>: This defines additional details that can be
opened and closed on user demand.
• <summary>: This is used to define the title for the
<details element.
• <footer>: Defines the footer for a web document or
section.

3.14(i) Create HTML Layout Using Table:

Designing the layout using the HTML <table> tag is
the simplest and most popular way to create the layout of
a webpage. HTML tables are organized into columns and
rows so you can use these rows and columns in any way 3.14(ii) To Make Website Layout in HTML
as per your requirment. Using DIV, Span:
Example: <div> and <span> tags can be used to create website
<!DOCTYPE html> layout. <div> element is a block level element used to
<html> group HTML elements whereas <span> element is a
<head> block level element, HTML element is used to group
<title> HTML Layout using Tables </title> elements at inline level. .
</head> Example:
<body> <!DOCTYPE html>
<Center> <html>
<table width = "80%" border = "1"> <head>
<tr> <title> HTML Layout using DIV, SPAN </title>
<td Colspan = "2" bgcolor = fff 3c2> </head>
<center> <body>
<h1>HTML layout using tables </h1> <div style = "margin-top:auto; margin-bottom:auto ;
</center> margin-left:50PX ; margin:50px">
</td> <div style = "background-color:#fff 3c2;
</tr> width:100%">
<tr valign = "top"> <h1 style = "text-align:center">Make Website
Layout in HTML-Using DIV, Span </h1>
<td bgcolor = fff 8dc width = "20%"> <div style = "background-color:rgb(255,24,1,225);
<b> Main Menu </b> <br> height:200Px ; width:150Px ; float:left ;">
Course 1 <br> <div> <b> Main menu </b> </div>
Course 2 <br> HTML <br>
Course 3 <br> CSS <br>
Course 4 <br> Javascript.
</td> </div>
<td bgcolor = Snow width = "150" height = "200"> <div style= "background-color:#eee ; height:200Px ;
Main content area : <br> width:500Px ; float left ;">
Welcome to <a href = "http://yct.com/"> <p> Main Content area:Welcome to <a href =
Youth Competition.com </a> <br> "https://youthcompetitiontimes.com/">yct.com</a>
</td> <br>
<tr> This in an example layout using the tables. <br>
<tr> </p>
M2R5 49 YCT
 </div>
<div style = "background-color:rgb (255, 252, 228) ;
height:200Px ; width:150Px ; float:right ;">
<div> <b> Right Sidebar </b> </div>
HTML Tutorial <br>
CSS Tutorial <br>
Javascript...
</div>
<div style=background-color:#caege 8 ; clear:both">
<center>
Footnote...yct.com
</center>
</div>
<div>
</body>
</html>
Output:

Practice Questions with Explanatory Solutions

1. HTML tags are– 5. The container tag must contain the following
(a) Case insensitive (b) Case sensitive tags:
(c) Sentence case (d) None of these (a) Opening tag (b) closing tag
Ans. (a) The full name of href is Hyper Text (c) Both (a) and (b) (d) none of these
Reference. href is an essential attribute of the anchor Ans.(c) HTML tags are a type of code which is
tag, which defines the webpage address. Destination
represented by writing their name between two
URLs must be defined in standard format. The symbol
singular brackets (< >). Tags that are used in pairs are
used at the beginning of Href text is #.
called container tags. It is necessary to have opening
2. Cell Padding attribute is used with which of the
and closing tags in these.
following tags–
(a) <tr> (b) <select> 6. Which tag should be the first in any HTML
(c) <td> (d) <Table> document?
(a) <head> (b) <title>
Ans. (d) Cell padding and cell spacing attributes are (c) <html> (d) <document>
used to adjust the white space between table cells and
Ans.(c) The first and last tag in an HTML document
text. Cell Padding defines the distance between the
should be <html> because it is the main tag of the
cell border and content. The cell Padding attribute is HTML document within which all the HTML code are
used inside the <Table> tag. written.
3. What is used with <td> tag to set data alignment 7. Tags should be written in HTML documents–
in a cell? (a) in upper case (b) in lower case
(a) align (b) valign (c) In proper case
(c) (a) and (b) both (d) galign (d) In both upper case and lower case
Ans. (c) The full name of <td> element is table data. It Ans. (d) The keyword of a tag in an HTML document
is used to define a cell of the table. Valign is used with is not case sensitive. This means that you can write the
the <td> tag to set data alignment in cells, which is tag name in both upper case (capital letter) or lower
used in each cell of a row, Locates the data at a case (small letter). It completely depends on the user
specific location within the cell. using the <td Valign how they want to write the tag.
= "Value"> syntax data can be aligned in a cell where 8. Which of the following is a container?
Top, Bottom or Enter can be kept as value. (a) <SELECT> (b) <BODY>
(c) <INPUT> (d) both a and b
4. Used to embed inline frame in web page.
(a) <frame> (b) <base> Ans. (d) Tags which are used in pairs. That is, the tags
which are opened and closed are called container tags.
(c) Both (a) and (b) (d) None of these
<html> </html> <b> </b>, <title> </title>, <h1>
Ans.(c) Frames are defined by <frame> tag in HTML </h1>, <p> </p> <Body> </Body> <Select>
document and base element is used to define a base </Select> etc are some container tags. <input> is an
URL for related URLs in a document. empty tag.

M2R5 50 YCT
9. The attribute that defines the relationship 15. What is the correct HTML tag for smallest
between the current document and the HREF'ed heading size–
URL– (a) <h6> (b) <h1>
(a) REL (b) URL (c) <heading> (d) <header>
(c) REV (d) All of the above Ans. (a) To define the document structure properly in
Ans. (a) REL defines the relationship between the HTML language, 6 types of headings are given which
current linked document and the HREFed URL. REL are H1, H2, H3, H4, H5, H6 level headings. To create
is the short form of Relation and the full form of href the smallest size heading, 6th level heading is used, it
is Hypertext Reference. This is the source file used by is also helpful in dividing the content deeply. This is
the tag. You can use both of these when connecting the heading of least importance. It is defined by H6
external CSS files as well as when using the <> tag for element and <h6> tag.
hyperlinks.
16. <a> Tag is used in HTML for–
10. Apart from <b> tag, which HTML tag makes the
(a) list (b) Links
text bold–
(d) none of these (c) address
(a) <blank'> (b) <strong>
(c) <bold> (d) none of these Ans. (b) In HTML, <a> represents an anchor tag and a
link is defined from the opening anchor tag and </a>
Ans. (b) Bold element is used to define bold text in
tag is used to close it.
HTML. This makes the text darker and thicker than
the text next to it. In addition to the <strong> tag in 17. Which tag inserts horizontal lines in your web
HTML, the <Strong> tag can also be used to bold text. page.
11. Bulleted list can be created using which of the (a) <hr> (b) <line>
following tags? (c) <line direction = "horizontal">
(a) <dl> (b) <nl> (d) <tr>
(c) <ul> (d) <ol> Ans. (a) The full name of <hr> element is Horizontal
Ans.(c) UL stands for unordered list of elements. A Line. The hr element defines a horizontal line in an
bulleted or unordered list is created by the Unordered HTML document.
List element. 18. The <DT> tag is designed to contain a single line
12. Which of the following is not a screen frame in of our web page but the <DD> tag will accept a --
HTML? --------.
(a) iframe (b) noframe (a) line of text
(c) frameset (d) uframe (b) Complete paragraph
Ans. (d) HTML frames are used to divide the browser (c) word
window into multiple sections where each section can (d) request
load a separate HTML document. A collection of Ans. (b) The full name of the <dt> element is
frames in a browser window is known as a frameset.
Definition Term and through it the definition list is
iframe, noframe, framset screen frame in html.
defined that accepts a single line and the full name of
13. What is the correct HTML to create a hyperlink?
the <dd> element is Definition Description, through it
(a) https://yctonline.com</a>
the description of the definition term is defined and
(b) <a href="http://yctonline.com">Book
(c) url = https://yctonline.com>Book store</a> can accept complete paragraphs.
(d) <a name = "https://yctonline.com> Book store 19. What is required to create HTML document–
Ans.(c) The correct HTML code to create a hyperlink (a) Webpage editing software
is– (b) High power computer
<a href = "http://yctonline.com">Book Store </a> (c) Can use only notepad.
14. What is meant by Vlink attribute in the (d) None of these
following? Ans. (c) To create an HTML document, first of all it is
(a) Viewed links (b) Virtual link
necessary to have a simple text editor. Notepad is used
(c) very good link (d) Active link
for this.
Ans. (a) Full form of Vlink attribute is Visited Link.
This refers to previously viewed links. The link which 20. The correct HTML tag for the largest heading is–
has been clicked by the user. Its color is purple and it (a) <head> (b) <h6>
is also underlined. (c) <heading> (d) <h1>

M2R5 51 YCT
 Ans. (d) Headings are defined in an HTML document Ans. (c) The full name of <DL> element is Definition
through the heading element. Heading can be created List. The definition list is defined by the definition list
in HTML from H1 to H6 level. The <H1> tag is used element.
for the largest heading. This is the main part of the 25. The tag used for superscript in HTML is–
HTML document. There is a heading and it is also the (a) <Super> (b) <Spr>
most important. The title of a blog post or webpage is (c) <Sup> (d) <up>
defined by the H1 level heading. It is recommended to Ans.(c) <Sup> tag is used to superscript text in
use this heading only once in the document. HTML. Full name of <Sup> element is Superscript.
21. The special formatting code in HTML document 26. HTML used tag for line breaks–
used to present content is– (a) <B> (b) <br>
(a) Tags (b) Attributes (c) <break> (d) <Line>
(c) Values (d) none of these Ans. (b) The full name of <Br> element is break. It is
Ans.(a) The special formatting codes used in HTML used to give single line break.
documents to present content are called tags. Whereas 27. To write headings in HTML ............ Heading tags
HTML attributes are used to define the characteristics are available.
of HTML tags and all HTML tags are displayed in (a) 4 (b) 5
their default values. Attributes are used only to change (d) 3 (c) 6
this default value. Ans. (c) Heading is a word, syllable or sentence.
22. What is the correct HTML code to add color to Which is written first in any document, article, blog
the background? post etc. Heading is similar to page title. To write
(a) <body bgeolor = "Blue"> headings in HTML, we have 6 heading tags (H1, H2,
(b) <body background = "Blue"> H3, H4, H5 and H6). HTML headings are used based
(c) <body color = "Blue"> on their importance. <h1> level heading is used for the
(d) <background > Blue < /background> most important heading and <h6> level heading is
used for the least important heading.
Ans.(a) To add background color to an HTML
document, the HTML code should be as follows– 28. ......... feature is used to combine cells vertically.
<html> (a) Rowspan (b) Colspan
(c) Table (d) Merge
<head>
Ans. (a) Rowspan is an attribute of <table> tag.
<title>youth competition times.com</title>
Rowspan attribute merges two or more rows into one
</head>
row.
<body bgcolor = "Blue">
29. The main container for <TR><TD> and <TH>
</body>
is–
</html> (a) <table> (b) <base>
When the above code is run, the document (c) <main> (d) <section >
background will be displayed in blue color. Ans. (a) The main container for <TR><TD> and
23. HTML is– <TH> is <table>. The full name of <TR> element is
(a) Hypertext Markup Language Table Row. Through this the table row is defined. The
(b) Hypertext Markup Language full name of <TD> element is Table Data, through
(c) Hypertext Marked Language which table data is defined and the full name of <TH>
is Table Header, through which table header i.e. cells
(d) Hyper Text Marking Language
are defined.
Ans. (b) Full form of HTML is Hypertext Markup
30. How to create order list in HTML–
Language. It is a markup language. Which was (a) <ul> (b) <ol>
developed in the 90s to create web documents (web (c) <href> (d) <b>
pages). It is the base of a web page and web pages are Ans. (b) Order list is defined by <ol> tag and list item
the basis of a website. HTML uses tag to create web is defined by <li> element. In the order list, they are
documents. also called number list because the list items are
24. The tag used for definition list in HTML is– written in order of number before them. This type of
(a) <OL> (b) <Dt> list is used to display same type of information in a
(c) <DL> (d) <Unorder> fixed order.
M2R5 52 YCT
 4 CASCADING STYLE SHEET

4.1 Introduction of CSS: same style to any HTML elements then you can
CSS (Cascading Style Sheet) is used to design a easily style them together in one file, thus it reduces
website. This is used by web designers and the HTML code and loads the web page faster.
programmers. It works to make attractive to any (iv) The same style sheet can be used on multiple web
elements in the web page. CSS is coding. It was pages so if the user ever wants to change the design
developed by the World Wide Web (www) Consortium of all their web pages then just a few code lines have
in 1996 for website designing. It is always used with to be updated in the same file and then the entire
HTML. The use of HTML gives a shape to the webpage website is designed automatically. It will be
and the use of CSS gives a new and attractive look to the updated.
web page. (v) CSS can also allow an HTML document to be
The latest version of CSS is CSS3. CSS is a way to optimized for more than one type of device or
turn a web page into a dynamic webpage. It can be used media. Using CSS you can create a good responsive
with any type of XML document, including SVG and design which can render your website in different
XUL. From Web to multiple mobile apps CSS is used styles for different types of devices like mobile,
along with HTML and JavaScript in most websites for tablet, laptop, desktop, printer etc.
applications and user interfaces. 4.1(ii) Advantages of CSS:
Like HTML and other computer languages, CSS By using CSS we can display the text of the
rules also have a syntax for writing. Through which CSS webpage in good color. You can control the styles of
declaration is written for HTML document. CSS syntax fonts and the space between paragraphs. CSS, adds style
is also called style rule. It has mainly two parts– to your web pages by interacting with HTML elements.
With CSS you can create a responsive website. Like
HTML, we also need a text editor (like Notepad or
Notepad++) to write CSS.
Following are the benefits of CSS–
• CSS provides a lot of flexibility for setting properties.
Once you write CSS, you can apply the same code to
multiple groups of HTML elements. We can say that
by using CSS we can save our time.
Selector– A selector is a word group/letter for which • It reduces page load time because designing pages
the style rule is written, it is written as a bracket. This is with CSS requires very little code. Less code in a web
usually an HTML tag but it can be written with any page means it will load faster.
name. • It is quite easy to maintain a document through CSS.
Declaration– This is the part of the style rule in With just one change in CSS, you can instantly update
which the style for a selector is declared. This also has multiple pages in that document.
two parts– • Using CSS, the same web page can be given
• Property: This is the part of the style rule that shows compatibility across multiple devices. So that the web
the style we want to apply to a selector. This is written page can be viewed on all devices, computers, the
within the curly bracket. This is called an attribute of phone can be viewed according to them.
the HTML tag. • Traffic comes to a website only when the pages of that
• Value: The third part of the style rule is value. This is website rank first in a search engine. With the use of
also written inside curly brackets. Set value for CSS, it becomes easier for the search engine to access
property in this. that website, due to which it can quickly access and
4.1(i) Features of CSS: rank that page.
Some important features of CSS are as follows– 4.2 Types of CSS:
(i) Web pages can be made beautiful and attractive by There are three types of HTML pages–
using animation and transitions in CSS. (i) Inline CSS (ii) Internal CSS (iii) External CSS
(ii) A lot of time can be saved by using CSS. Viewing HTML web page is designed using the CSS of that
every page even, if a website has a maximum structure. Using CSS in HTML there are three types.
number of pages each page is similar in appearance (i) Inline CSS– Inline CSS is the way of using CSS
and design. The same CSS file can be used on in one line as the name suggests- (Inline) in one line.
multiple HTML pages. When you need to use CSS within a single HTML
(iii) Using CSS there is no need to add attributes to each line or paragraph you can use CSS within a DIV or with
tag to style HTML elements. If you want to give the an HTML tag.
M2R5 53 YCT
Example: <p> This is a paragraph. This is a paragraph. This is
<!DOCTYPE html> a paragraph. This is a paragraph. This is a
<html> paragraph. </p>
<head> </div>
<title>Inline CSS in HTML </title> </body>
</head> </html>
<div> Output:
<style> = "height : 100PX ; width : 400PX;
background - color : grey ; color : white ;">
</style>
<h1> welcome to our website <h1>
<P Style = "color:red;"> This is a paragraph.
This is a paragraph. This is a paragraph. This is a
paragraph. </p>
</div>
</body> (iii) External CSS– This is the third type of CSS in
</html> which a separate file is created for CSS and that file is
Output: linked to the HTML page. All the CSS code is written in
the CSS file. This one is the best and the most used
method.
To create external CSS, style it by writing CSS code
in a new file of Notepad and save the CSS like this and
Linked in HTML. You can name the CSS file anything
but the extension of CSS along with the name of the file,
the file is saved after writing.
Example–
style.CSS
header.CSS
footer CSS etc.
To create a CSS file and link it in HTML, link it like
(ii) Internal CSS– Internal CSS means creating and this with the help of HTML link tag.
using CSS on an HTML page, which means we <link rel = "style sheet" type = "text/CSS"
create a CSS inside the HTML <head> tag and use it href = "my file.CSS">
by calling the class and ID. Internal CSS means Create the CSS file like this.
when we create CSS in html head tag and use it in my file.html
the same page, such CSS is called internal CSS. It is <!DOCTYPE html>
very simple to create and use an html page. Intemal <html>
CSS is used in HTML by creating <style> </style> <head>
in the head tag of HTML. Creating and using CSS in <title> Internal CSS in HTML </title>
the same HTML page is called internal CSS. Inline <ink rel = "sylesheet" type="text/CSS" hert =
CSS is used in code with only one line or one tag. "myfile. CSS">
HTML is created inside the head tag. Which can be </head>
used anywhere on the entire page, <div class= "header">
Example: <h1> Welcome to our webite <h1>
<!DOCTYPE html> <p> This is a paragraph.This is a paragraph.
<html> </p>
<head> </div>
<title>internal CSS in HTML</title> </body>
<style> </html>
header { Output:
height : 100PX ;
Widh : 400PX ;
background-color : grey ; color : white ;
}
p{
Color : red ;
}
</style> In the above example, we have created an HTML
</head> page and used the html link tag to link the CSS file.
When you link a CSS file to an HTML page, the effect of
<div class = "header">
CSS is seen on the HTML page. In this way, the effect of
<h1> Welcome to our website </h1> CSS can be seen in HTML by using the CSS type.
M2R5 54 YCT
4.3 CSS Selectors: • ID Selector: ID Selector selects elements on the basis
The CSS selector selects the content for which we of ID defined in HTML elements. #id name (hash) is
want to write CSS rules. CSS rules of Selectors' are a used to select elements defined with ID.
part of syntax, which can be an HTML element attribute. Example:
CSS selectors select HTML elements according to their <!DOCTYPE html>
ID, class, type, attribute, etc. Thus the selected elements <html>
can be styled as per the requirement of the users. <head>
CSS selectors can be divided in five categories as <meta charset = "utf-8">
follows– <title> CSS ID Selector </title>
(i) Simple Selectors: In this, elements are selected <style>
on the basis of id, class and name. /*Select according to ID*/
(ii) Attribute Selectors: In this, selection is on the #myheading {color: red;}
basis of attribute and attribute value. </style>
(iii) Pseudo-elements Selectors: It is used to style a <body
part of the elements by selecting them. <h2 id = "my heading">CSS ID Selector </h2>
(iv) Combinator Selectors: Elements are selected </body>
on the basis of a specific relationship between the </html>
elements. Output:
(v) Pseudo-Class Selectors: It is used to select
elements based on a certain condition.
Some important selectors in CSS are as follows–
• Element/Tag Selector
• ID Selector • CSS Class Selector: It selects elements on the basis of
• Class Selector the class defined in the details. Class (dot) is used to
• Universal Selctors select the element defined with class.
• Group Selector Example:
• Attribute Selector <!DOCTYPE html>
• Element/Tag Selector: In this Type of Selectors, we <html>
apply style by selecting the HTML element directly <head>
from its name. <meta charset = "utf-8">
Example: <title>CSS Class Selector </title>
<!DOCTYPE html> <Style>
/*Select according to class*/
<html>
my class {color: red :)
<head> </style>
<meta charset = "utf-8"> </head>
<title>CSS Element/Tag Selector</title> <body>
<style> <h2 class = "my class"> CSS class selector </h2>
/*change page background color : black*/ </body>
body{background-color : black ;} </html>
/*all h3 headings color : red*/ Output:
h2{color : red ;}
</style>
</head>
<body>
<h2>CSS Element Tag Selector</h2>
</body> • CSS Universal Selector: All the elements present in
</html> the webpage are selected through universal selector.
Output: Example:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>CSS Universal Selector </title>
<Style>
/*select all element*/
*{Color: Blue; font-weight: bolder;}
</style>
</head>
<body>
M2R5 55 YCT
 <h2>Heading Tag</h2> webpage for which target attribute has been defined and
<p> paragraph </p> value_blank of that attribute has been defined, then you
<div> Div </div> cannot do this through normal selectors. But it is very
<span> span </span> easy to do this through attribute selectors.
</body> Example:
</html>
<!DOCTYPE html>
Output:
<html>
<head>
<meta charset = "utf-8">
<title>CSS attribute Selector </title>
<style>
body {background-color:Pink;}
h2 [test-'attribute'] {color : red ;}
CSS Group Selector: When we want to apply the </style>
same style on an element we can select multiple elements </head>
together by using tag, ID or class.
Don't use it for same style <body>
#my ID {color: blue; font-weight: bolder ;} <h2 test = 'attribute'> Test Attribute </h2>
my class {color: blue; font-weight: bolder;} </body>
Span (color: blue; font-weight bolder;} </html>
Instead you should use this.
#my ID, my class, span {color: blue; font-weight: Output:
bolder ;}
To select more than one element simultaneously,
select the elements by separating the selectors with
Comma (,).
<!DOCTYPE html>
<html> CSS [attribute] Selector: This selector targets
<head> elements that have an attribute defined in angular
<meta charset="utf-8"> brackets. The general syntax of this selector is as
<title>CSS Group Selector </title> follows–
<Style> [attribute-name]
/*Select needed elements at once*/
#my ID, my class, span (color: blue, font: weight: {
bolder :) property: value;
</style> }
</head> You can see in the above syntax that should be
<body> match with defined attribute in angular brackets.
<h2 id="my ID"> My Heading </h2> Example:
<p class ="my class"> my paragraph</p>
<html>
<span> Normal paragraph </span>
</body> <head>
</html> <style>
Output: [target]
{
bacground-color : yellow ;
}
</style>
</head>
<body>
<a href = "http://www.yct.com "target"=_blank">
CSS Attribute Selectors: CSS provides the ability
Best Hindi Tutorials </a>
to design elements according to user attribute values.
That is, any element can be targeted in which a specific <a href "http://www.google.com in"> Google india
attribute or attribute values have been defined. For this </a>
there are many attribute selectors available in CSS. For </body>
example, if you want to target all those anchor tags of a </html>
M2R5 56 YCT
Output: <style>
[class∼ = "Animal"]
{
width: 50px;
height: 50px
background-color: blue;
}
CSS [attribute = "value"] Selector: This Selector [class ∼ = "Flowers"]
targets the elements specified in angular brackets. The {
attribute and its same value are defined. In this selector, width: 100px;
the value of the attribute is also defined by the height: 100px;
assignment operator before its name. While defining this background ∼ color: red;
selector, the value of the attribute is defined in double </style>
quotes. The general syntax of this selector is as follows– </head>
[attribute-name="value"] <body>
{ <div class = "Animal Div"> </div>
Property value; <div class = "Flowers Div"> </div>
} </body>
This selector affects only those elements whose </html>
attribute and the one defined for it have an exact match. CSS [attribute | = "value"] Selector: This selector
Example: targets elements in which the value of the attribute
<html> specified in angular brackets starts with the specified
<head> word. In this selector, after the name of the attribute, the
<style> vertical (|) line symbol is written in double quotes which
[class = "p1"] you want to match with the value of the attribute.
{ After that it is important to keep in mind that the
bacground-color: yellow ; word should be complete. If hypen has been used before
} the word while defining the attribute, then while defining
</style> the word, hypen should be used in front of it also. If you
</head> do not write a complete word then no element will be
<body> targeted.
<p class="p1"> This paragraph will be effected.</a> For example, if you want to select a Paragraph
<p> This paragraph will not be effected.</p> element whose Class attribute's starts with first value,
</body> then you can do so through this selector. The general
</html> syntax of this selector is as follows–
Output: [attribute-name | = "Containing-word"]
{
property : value;
}
Example:
<html>
<head>
CSS [attribute ~ = "value"] Selector: This selector <style>
targets elements that include the specified word in the [class = "First"]
value of the attribute. While defining this selector, a tilde {
(∼) symbol is defined after the name of the attribute. And Color: blue;
after that by applying assignment operator it is specified }
in double quotes which can be included in the value of </stlyle>
any element. </head>
For example, you want to target some div in which <body>
the class attribute is defined and the value of that <p class = "First-paragraph"> This is first
attribute includes the words animal and flowers, then in paragraph. </p>
such a situation you can use this selector. </body>
The general syntax of this selector is as follows– </html>
[attribute-name = "containing-word"]
{ CSS [attribute^ = "value"] Selector: This selector
Property: value; also targets elements whose specified attribute value
} starts with the specified word. The only difference is that
Example: in this selector you do not need to define the word
<html> completely. As if some letters are also defined then this
<head> selector targets the elements.
M2R5 57 YCT
 While defining this selector, circumflex (^) accent Output:
symbol is defined after the name of the attribute and after
that, by applying assignment operator, the word is
written in double quotes which you want to match with
the value of the attribute.
The general syntax of this selector is as follows–
[attribute-name∧ = "containing-word"]
Property: value; CSS [attribute*= "value"] Selector: This selector
} also targets elements whose specified attribute value
Example: contains the specified word. This selector is similar to
<html> the [attribute = "value"] selector, the only difference is
<head> that you do not need to specify the entire value exactly.
<style> You can define only some letters which will match the
[class^= "ed"] value of the element's attribute and that element will
{
become the target.
back ground : yellow ;
} While defining this selector, asterisk (*) symbol is
</style> defined after the name of the attribute and after that by
</head> applying assignment (=) operator, the word which you
<body> want to match is specified in double quotes.
<p class ="red-paragraph">This is red paragraph The general syntax of this selector is as follows–
</p> [attribute-name* = "containing - word"]
<p class ="green-paragraph">This is green {
paragraph.</p> Property: name:
</body> }
</html> Example:
Output:
<html>
<head>
<style>
[class * = "rst"]
{
background-color : gold ;
CSS [attribute $ = "value"] Selector: This }
Selector targets elements whose specified attribute
values end with the specified word. While defining this </style>
selector, doller ($) symbol is defined after the name of </head>
the attribute and after that the word is defined in double <body>
quotes by applying assignment (=) operator. Which you <p class = "first-paragraph"> This is first Paragraph.
want to match with the value of the attribute. It is not </p>
necessary that the Word should be complete.
The general syntax of this selector is as follows. <p class = "second-paragraph">This is second
[attribute-name $ = "value"] paragraph</p>
{ </body>
property: value; </html>
}
Example: Output:
<html>
<head>
<style>
[class $ = "graph"]
{
back ground-color:green;
}
</style> Sub Selector– A CSS selector can contain more
</head>
<body> than one simple selector. There are four different
<span class = "first-span"> This is first span combinations in CSS. If you want to apply CSS on top of
</span> <br/> an element, then the sub element selector is used when it
<p class = "first-paragraph"> This is first Paragraph has to be applied to the sub elements of that element.
</p> First of all, the name of the main element is defined in
<span class "=second-span"> This is second span the body of the <style> tag, after that, by giving space,
</span> </br> write the name of the sub-element on which you want to
</body>
</html> apply.
M2R5 58 YCT
Example: Output:
<html>
<head>
<title> sub-element selector </title>
<style>
h1 span {
Color : blue ;
}
</style>
</head>
<body> The above example will apply, p+p means that the
<h2>element<span>selector</span>apply tags</h2> style rule on the second and third <p> elements
immediately after the first <p> element
</body>
(iii) Child Selector– It is similar to Descendant
</html> Selector but if you want to apply CSS rule on the child of
Different selectors allow the user to perform any element, then Child Selector is used. In this, Greater
different functions. These are four different combinators than Symbol (>) is put after Parents Selector and then
in CSS as follows– Child Selector is written.
Example:
(i) Descendant Selector– When there is another <html>
element inside one element then, to apply style rule on <head>
the inner element we use Descendant Selector. <style>
Example: div>b{
<html> Color: red;
<head> }
<style> </style>
pb{ </head>
Color: red; <body>
} <div>
</style> <b> This is first paragraph </b>
</head> <p> This is <b> second paragraph.</b> </p>
<body> </div>
</body>
<p> we are learning <b> CSS
</html>
tutorial in Hindi By yct </b> </p>
Output:
</body>
</html>
Output:

4.4 CSS Property:

(ii) Adjacent Sibling Selector– When a style rule HTML Elements are styled through CSS Properties.
has to be applied to another element placed next after a Different HTML elements can have different CSS
specific element, then Adjacent Sibling Selector is used. properties that the user can set.
Example: A CSS property shows some style, such as changing
<html> the font of an element or adding a background to it. The
<head> CSS property name and its value are written separated by
<style> a colon.
p+p { Syntax: Selector {property name: property-value:}
Color : red ;
</style>
</head> 4.4(i) CSS Background Properties:
<body> CSS background properties are very useful by using
<p> This is first paragraph </p> which users can make their web page attractive and can
<p> This is second paragraph </p> present any HTML element or selector like Class, ID by
<p> This is Third paragraph </p> adding color or image. There are many properties in CSS
</body> to control the background, which we can use as per
</html> requirement to make the web page attractive.
M2R5 59 YCT
⇒ CSS background-color: If you want to set color Output:
background in HTML document or element. The
background-color property is used. Here are three ways
to specify color in CSS.
(i) Color name like "red"
(ii) HEX Code like "#FF0000"
(iii) RGB value such as "rgb (255,0,0)"
Example:
<!DOCTYPE html>
<html>
<head> ⇒ CSS background-shorthand property– You can
<style> define all the background properties in a single line.
body { Example:
background-color : gray; <!DOCTYPE html>
hl <html>
color: orange; <head>
color: red; <style>
{ body{
P{ background:#ffffff
</style> url("https://compressjpeg.com
</head> /images/compressjpeg/icon.png")no repeat right top;
<body> </style>
<h1> This is a heading </h1> </head>
<p> CSS background properties </p> <body>
</body> <h1> This is a heading </h1>
</html> <p> CSS background properties </p>
Output: </body>
</html>
Output:

⇒ Background-image: If you want to set an image as

⇒ Background-attachment: With this property you a background in the background of any element, then the
can scroll or fix the image. When the value of this background image property is used.
property is scrolled, the background image will also Example:
scroll up or down if the page moves up or down. And in <!DOCTYPE html>
fixed value the background image remains at one place. <html>
Example: <head>
<!DOCTYPE html> <style>
<html> body{
<head> background-image:url ("https: // Compressjpeg.com
<style> /images/compressjpeg/icon.png");
<body>{ </style>
background-image:url("https://comprssjpeg. }
com/images/compressjpeg/icon.png"); </head>
background-attachment:fixed; <body>
} <h1> This is a heading </h1>
</style> <p> CSS background properties </p>
</head> </body>
<body> </html>
<h1>This is a heading </h1>
<p>CSS background properties</p> Here in the value of background-image property we
</body> have to tell the URL ( ) i.e. the location of the image. For
</html> which URL has to be used.
M2R5 60 YCT
⇒ Background-Repeat: If the size of your }
background image is small and you want to cover the <style>
entire background, then you can use the background- </head>
repeat property. With this property you can rotate the <body>
image horizontally, vertically or can repeat on both sides. <h1> This is a heading </h1>
Background-repeat property has four values which <p> CSS background properties </p>
are as follows. </body>
repeat– With this you can repeat the image on both </html>
horizontal and vertical sides. 4.4(ii) CSS Selectors Properties:
no-repeat– you cannot repeat the image.
The border of any element separates it from other
repeat-x– With this, you can repeat the image
elements. You can make the webpage more attractive by
horizontally.
designing the border. CSS provides 4 properties. With
repeat-y– With this you can repeat the image
the help of which you can do advanced designing of
vertically.
borders which is like this–
Example:
border-style
<!DOCTYPE html>
border-width
<html>
border-color
<head>
border-radius
<style>
border-(shorthand)
body{
border-style: Through this property you define the
background-image:url("https://compressjpeg.com /
style of the border. The values of this property are
images/compressjpeg/icon.png");background-
predefined, the list of which is given below. If you give
repeat: repeat-x;
the value of this property to None then you do not get the
</style>
displayed border.
</head>
None– This value does not show the border of the
<body>
element.
<h1>
Solid– With this value you can define a solid border.
<p> CSS background properties </p>
Double– When you give this value, the border shows
</body>
double lines.
</html>
Dashed– When you give this value, the border made up
Output:
of - (dash) is shown.
Dotted– With this value you can show the border dotted.
Groove– With this value the border appears grooved.
Ridge– Using this value you can make the border
ridged.
Inset – With this value you can show inset border.
Outset – With this value you can show outset border.
In above example, image is repeating vertically. Example:
<html>
⇒ Background-Position set: If you want to set the <head>
position of the background, then you can do it by using <title>border-style demo </title>
the background-position property. <style>
By default the background position is left-top. If you div
set it manually then the first value tells the distance from {
the left side and the second value tells the distance from
border-style : double ;
the right side.
width : 20% ;
Example:
}
<!DOCTYPE html>
</style>
<html>
</head>
<head>
<body>
<style>
<div style>
body{
<p> India is the best country in the world. I Love
background image : url ("https : //compressjpeg.com my India </p>
/images/compressjpeg/icon.png") ;
</div>
background-repeat : no repeat ; </body>
background-position : 100px × 100px ; </html>
M2R5 61 YCT
Output: Output:

In the example given above, the border color has

been defined as lime. By default it remains black. With
In the above example the style of the border has this the color of the border will become lime.
been defined double. This will display double border Border Radius– If you want to give curve or shape
around the Div. to the border corners of an element, then you can use
border-radius property. You can give the value of this
Border-Width– If you do not want to use the property in pixels as well as in % (Percentage).
default width of the border and want to change it, then
you can do through the border-width property. Through Example:
this property you can customize the width of the border <html>
as per your choice. You give the value of this property in <head>
pixels. <title>border-radius</title>
Example: <style>
<html> #My Div {
<head> border-style : solid ;
<title> border-width </title> border-width : 2px ;
<style> border-color : blue ;
#My Div { border-radius : 10px ;
border-style : solid ; width : 20% ;
border-width : 10px ; }
width : 20%; </style>
} </head>
</style> <body>
</head> <div id = "My Div">
<body> <p> CSS is very powerful. We can design every
<div id = "My Div"> element of a webpage using CSS.</p>
<p> Once upon a time there was crow.
</div>
He was very thirsty. </p>
</div> </body>
</body> </html>
</html> Output:
In this example the width of the border has been
defined as 10px. With this the thickness of the border
will become 10px.
Border-Color–If you want to change the color of Border (Short hand)–If you want to define the
the entire border, then you can do so by using border- above property through a single statement then you can
color property. The value of this property can be given in use the border (Short hand) property. Through this
plain English as well as in hex. property you can define the value of all the properties
Example: given above. The syntax of this property is given below.
<html> border : <border-width>
<head> <border-style> <border-color> ;
<title>border-color demo </title>
<style> As you can see above, first of all you give the value
#My Div{ of border width as the value of border property. After
border-style : solid ; this you can define the border style and then the color of
border-width : 2px ; the border is defined. Border radius property is not
border-color : lime ; included.
width : 20% Example:
} <!DOCTYPE html>
</style> <html>
</head> <head>
<body> <aitle> Border Shorthand Property demo </title>
<div id = "My Div"> <style>
<p> This is an example showing use of border color #My Div {
property in CSS </p> border : 1px solid lime ;
</div> width= 20%
</body> }
</html> </style>
M2R5 62 YCT
 </head> • Margin: The empty space inside the browser window
<body> and outside the border is called Margin. By default,
<div id = "My Div"> Margin is set for all elements, which you can change
<p> Border short hand property is a short version of through the following Margin Properties.
include a value for border-radius property. (i) Margin; Through this, Marging is set together.
</p> all the properties defined above. (ii) Margin-top; Top margin of the element is set by
</div> this property.
</body> (iii) Margin-right; Right margin of the element is set
</html> by this property.
Output: (iv) Margin-bottom; Bottom margin of the element is
set by this property.
(v) Margin-left; The left margin of the element is set
by this property.

Width and Height of Elements: The width and

4.4(iii) CSS Box Property: height property of CSS is used to declare the height and
According to the CSS box model, every HTML width of an element. In fact, this height and width is only
element is a rectangular box. This rectangular box of the content area.
element contents, padding. It is made up of border and The actual width and height of an element depends
margin. This is known as the box model in CSS. CSS on other elements of the Box Model. You can find out
box Model is the common model for the layout of the actual width and height of an element with the help
elements in webpages. Whatever elements you add to the of the calculator given below.
Total width = Element width + Padding Right &
webpage such as links, images, paragraphs, buttons, text
Left + Boder Right & Left + Margin Right & Left.
etc. all have their layout according to this model. Total Height – Element Height + Padding Top &
The CSS box model has different parts which are as Bottom + Border Top & Bottom + Margin Top &
follows– Bottom.
• Content: In the Box model, Content is the part which Example:
is defined by the Element. Content includes text, <!DOCTYPE html>
media etc. It is in the center of the Box model. Content <html>
in the Box model is a visible part, which is always <head>
visible to users unless it is hidden. <title> CSS Box Model Demo </title>
• Padding: The empty space around the content is <style type="text/CSS">
called padding. Padding is shown outside the content div {
and inside the border. width : 300 px ; padding : 20px ; border : 5px
You can declare padding for each element through solid green ; margin : 0 ;
CSS. For which the following properties are used by }
CSS– </style>
(i) Padding; It is also called short hand property of <body>
padding, through this the padding of the element is <div> This div is 350px wide and 20px padding
width 5px border.</div>
set.
</body>
(ii) Padding-top; The top padding of the element is set </html>
by this property. Output:
(iii) Padding-right; The right padding of the element is
set by this property.
(iv) Padding-Bottom it; The bottom padding of the
element is set by this property.
(v) Padding-left: The left padding of the element is set
by this property. Postioning Properties:
• Border: Border is declared around the content and Static: By default the static position is set. This is
padding, border is shown around the padding and normal flow. It doesn't matter if top right, bottom, left or
inside the margin. By default the border is hidden, z-index is given along with it.
which you can set through the following properties– <!DOCTYPE html>
(i) Boder; By this, all the Boder styles are set together. <html>
(ii) Boder-top; The top border of the element is set by <head>
this property. <title> position static </title>
<style>
(iii) Boder-right; The right border of the element is set
div {
by this property. Color : # 2f3790 ;
(iv) Boder-left; The left border of the element is set by Position : static ;
this property. }
M2R5 63 YCT
 </style> position : relative ;
</head> Left : 30px ;
<body> top : 40px ;
<div> This is by befault Position static </div> }
</body> </style>
<html> </head>
Output: <body>
<div>This is by default position relative </div>
</body>
</html>
Output:

Absolute: Normal page flow is removed from the

element. It takes position according to its close relative
parent element. If there is no relative parent element then
the browser takes the position according to the window.
Top, right, bottom, left and z-index can be used to
change the position of an element. Fixed: It is same as absolute. Position is according
<!DOCTYPE html> to the view point of the screen. Its position cannot be
<html> changed even after scrolling the page.
<head> <!DOCTYPE html>
<title> position absolute </title> <html>
<style> <head>
first color : # 6125C; <title>position fixed</title>
position : relative; <style>
border : 1px solid red; body {
height : 200px; height : 1000px ;
width : 400px; }
left : 80px ; div {
Top : 100px ; Color : # 6125C ;
⋅ second { position : fixed ;
color : # 6125C ; left : 80px ;
position : absolute ; top : 100px ;
border : 1px ; }
left : 40px ; </style>
top: 50px ; </head>
height : 100px; <body>
width : 200px; <div> This is by default position fixed </div>
} <body>
</style> </html>
</head> Output:
<body>
<div class = "first">This element is position relative
<div class="second"> This element is position
absolute </div>
</div>
</body>
</html>
Relative: Psition is according to the normal flow of Sticky: Position is according to the user's scrolling.
the page. Top, right, bottom, left or z-index can be used. This position can be relative or fixed. Mostly 'top'
To change position of an element. It can chage its property is used with this.
Position without changing the postion of any other <!DOCTYPE html>
element. <html>
<!DOCTYPE html> <head>
<html>
<title> position sticky </title>
<head>
<style>
<title> position relative </title>
body {
<style>
div { height : 100px ;
color : #2f3790 ; }
M2R5 64 YCT
 ⋅ first { • Upper–alpha– In this value capital alphabets are
color : # 6125C ; shown like- A, B, C, D etc.
Position : sticky ; • Lower-roman– In this value, style marker is shown
border : IPx solid red; in Roman Number which is displayed in smaller i.e.
top : 50px; lower size. Like- iii, iv etc.
} • Upper-roman– In this value Roman Number
⋅ second { Capitals are displayed like- i, ii, iii, iv etc.
color : # 6125C ; Example:
Position : relative ; <!DOCTYPE html>
border : 1Px solid blue: <html>
Left : 0px ; <head>
top : 100px ; <title> CSS List Type Examples</title>
</style> <style type = "text/CSS">
</head> ul {
<body>
List-style-type : circle ;
<div class = "first"> This element is position sticky
</div> }
<div class = "second"> This element is position ol{
rehtive </div> List-style-type : upper-alpha ;
</body> }
</html> </style>
<body>
4.4(iv) CSS List: <ul>
You can create mainly two types of lists through <li>Computer<li>
HTML, first, Unordered List which is also called Bullet <li>Tablet<li>
List and second, Ordered List which is also called <li>Mobile<li>
Number List. </ul>
CSS List property has been created to customize <ol>
HTML List. Through the list property of CSS, you can <li>Mango<li>
customize the list style, position, color etc. as per your
<li>Banana<li>
choice.
Various CSS List Properties– <li>Grapes<li>
To customize the HTML List as per requirement, </ol>
many properties are provided, the names of which are </body>
given below. </html>
• List-style-type Output:
• List-style-position
• List-style-image
• List-style:
List–style–type property–list– Through this
property, the style of bullets and numbers of the list is
defined. It is also called list style marker. The style of the
marker depends on the style list type.
Unordered List can have four possible values.
i. none– With this value the marker is removed.
ii. disc– That value is the default value of the unordered
list. It is a filled circle like a CD or DVD.
iii.circle–You can compare this Style Maker with a
circle, its structure looks similar.
iv. Square- This places a filled square as a list marker.
Similarly, there are many values in Order List also.
The most commonly used values are as follows–
• none– This removes all markers. List-style-Position property– By using this
• decimal– In this value, Order List Numbers are property you can set position of List makers it has two
shown i.e. 1.2.3.4. This marker style is default in possible values.
Order List. (i) OutSide–If the position of the marker is set out
• decimal-leading-zero– It is clear from the name of side, then there is a lot of distance between the list
this value that in this marker style 0 is shown before content and the marker and the second line of text also
the number like– 01, 02, 03 etc. starts below the first line.
• Lower–alpha– In this value the marker style shows (ii) Inside–Marker Position inside set Marker Tee
lower alphabets characters like a, b, c, d etc. Line indent line starts from below the marker.
M2R5 65 YCT
Example: } </style>
<!DOCTYPE html> <body>
<html> <ul>
<head> <li> computer <li>
<title> CSS List style position Examples </title> <li> Tablet <li>
<style>
<li> Mobile <li>
<type = "text/CSS">
ul { </ul>
List-style-position : outside; </body>
} </html>
ol { Output:
list-style-position : inside;
}
</style>
<body>
<ul>
<li>This is a list of internet Devices. First is
computer, second is tablet and last one is mobile. This is
a list of Internet Devices. First is computer, second is
tablet and last one is mobile.<li>
<li> computer <li> If the browser does not find the image, it shows the
<li>Tablet <li> default marker as per the List type.
<li> Mobile <li> Note: While using an image as a style marker,
</ul> consider image size, it should be as per the marker style.
<o> List-style property– Through this property, all List
<li>This is a list of fruits. first is mango, second is styles can be declared together. This is called shorthand
banana and last one is grapes. This is a list of fruits. first property.
is mango, second is banana and last one is grapes. <li> When using list style properties, list properties have
<li> mango <li> to be declared in the proper order, if not declared then
<li>Banana <li> the property after that is declared.
</ol> The order of List properties in Shorthand style rule
</body> is as follows.
</html> List-style-type→list-style-poition→list-syle-image
Output:
4.4(v) CSS Tables:
Tables are used to display any information category
wise and CSS is used to make the table attractive. When
HTML tables are created without any style or attributes,
the browser displays them without any border. Styling a
table with CSS improves its appearance.
Syntax:
Column width : td {width : value (width values);}
Column height : td (height : value (height values);}
Row heigth : tr (line height : value (height values)}
Table Border– The border property is used to
define the border in the table. User, can defined border
List-style-Image–With this property you can use for each element of table. AS– Like table border, head
any image for the list marker which can make your list border, table description border etc.
content quite attractive. The syntax of using an image as Example:
a list marker is exactly the same as the Background <!DOCTYPE html>
Image property. <html>
Example: <head>
<!DOCTYPE html> <title> CSS Table Border </title>
<html> <style type = "text/CSS">
<head> table, th, td {
<title> CSS List style image Examples</title> border : 1px Solid green ;
<style> }
type = "text/CSS"> </style>
ul { </head>
List-style-image: <body>
url ('greenarrow.png') ; <table>
M2R5 66 YCT
 <td> Ashok </td> </head>
<td> John </td> <body>
<td> Harry </td> <table>
</tr> <tr>
<tr> <th> SR No </th>
<td> Wason </td>
<th> Name </th>
<td> Potter </td>
<td> Singal </td> <th> Course </th>
</tr> <th> Price </th>
</table> </tr>
</body> <tr>
</html> <td>1</td>
Output: <td> Rohan Sahani </td>
<td> BCA </td>
<td> Rs. 30000 </td>
</tr>
<tr>
<td> 2 </td>
<td> RL Sahani </td>
<td> B.Tech </td>
<td> Rs. 40000 </td>
Table Border Radius– If you add a border radius </tr>
properties, you can make rounded to the corners of the
</table>
table border.
Example: </body>
<style> </html>
#able border radius, th, td { Output:
Border : 6Px Solid black ;
Border radius : 10PX ;
Padding : 6PX ;
}
</style>

Color in Table: You can set the background color

of a table or the text color of any content. Table, row, or B. Striped Table:
column headings can have different colors. Even rows in the table (2, 4, 6.....) can be set to a
Example: different color and odd rows (1, 3, 5, 7.....) can be set to a
table th { different and special color. This is a way of applying the
background-color : blue ; same color to alternate rows.
color : yellow ; odd table strip syntax:–
} tr : nth-child (odd) {
background color : red ;
A. Border-Collapse: color : white ;
When you apply a border in a table, a border is }
applied on every table data and a border is applied on the This will set all the odd rows with background as red
entire table, which is the border of our table, in such a and font color as white.
situation our table is not visible well. But if you want a even table strip syntax:–
single border to be applied on table and also merged with tr : nth-child (even) {
each other, then the Border-Collapse property is used for background color : blue ;
this. color : green ;
The value of Border-Collapse property is Collapse }
and Separate. That will set all the even rows with the background
Example: color as blue and the font color as green.
<!DOCTYPE html> Example:
<html> <!DOCTYPE html>
<head> <html>
<style type = "text/CSS"> <title> yct </title>
table, th, td {border : 2px solid red ; <meta name = "viewport"
border-collapse : collapse ; } contaent = "width=device-width, initial-scale=1">
</style> <body>
M2R5 67 YCT
 <h2> striped table </h2> <h3> CSS Table Padding </h3>
<p> To add zebra stripes on a table : </p> <table>
<table class = "table striped"> <tr>
<tr> <th> First Name </th>
<th> First Name </th> <th> Last Name </th>
<th> Last Name </th> <th> Salary </th>
<th> points </th> </tr>
</tr> <tr>
<tr> <td> Ramesh </td>
<td> Jill </td> <td> Joshi </td>
<td> Smith </td> <td> 10000 </td>
<td> 50 </td> </tr>
</tr> <tr>
<tr> <td> Vikas </td>
<td> Eve </td> <td> Sinha </td>
<td> Jackson </td> <td> 15000 </td>
<td> 84 </td> </tr>
</tr> <tr>
<tr> <td> Sheema </td>
<td> Adom </td> <td> Rastogi </td>
<td> Johnson </td> <td> 20000 </td>
<td> 67 </td> </tr>
</tr> </table>
</table> </body>
</body> </html>
</html> Output:
Output:

C. Table Padding: D. Background Image in table:

You can specify padding for table headers and table To set the background image for a table, the
data using the CSS padding property. background image property is used.
Example: Syntax– background-image : url ( ) ;
<!DOCTYPE html> The url ( ) value allows to provide a file path to any
<html> image and it will appear as the background for that
<head> element.
<style> To add background-image to Section tag of CSS
file, write the following code.
table, th, td { Section {
border : 5Px solid black background-image:
border collapse : collapse ; url ("images/background ⋅ png") ;
} }
th, td {
padding : 15Px ; Section– This specifies the tag in which you want to
} add the image,
</style> url ( )–This is used to specify CSS where our image
</head> is located.
<body> "images/background ⋅ png"–This is image of path.
M2R5 68 YCT
 Table Hover– By bringing the mouse cursor to tr of Output:
a table, it can be highlighted using the hover selector.
Select the <tr> Selector to highlight a table row, a table
head, or a particular cell.
Example:
<!DOCTYPE html>
<html>
<head>
<style> Table-layout property– Through this we give
table { instructions to our table that How it will appear in the
border-collapse : collapse ; browser and window. Table-layout property has only two
width : 100% ; values. The first value is Auto and the second value is
} Fixed but the function of both the values is different.
th, td { If you use Auto value then your table automatically
padding : 9px ; adjusts according to the browser and if you use fixed
text-aligh : left ; value then your table becomes fixed.
border-bottom : 1px solid # add ; <html>
} <head>
tr : hover {background-color : coral;} <style type = "text/CSS">
</style> table, th, td {border : 2px solid red ;
</head> border-collapse : separate ;
<body> border-spacing : 60px ;
<h2>Hoverable Table </h2> table-layout : outo ;}
<P> move the mouse over the table </style>
rows to see the effect.</p> </head>
<table>
<tr> <body>
<th> First Name </th> <table>
<th> Last Name </th> <tr>
<th> Points </th> <th> Srl No. </th>
</tr> <th> Name </th>
<tr> <th> Course </th>
<td> Peter </td> <th> Prices </th>
<td> Griffin </td> </tr>
<td> $ 100 </td> <tr>
</tr> <td> 1 </tb>
<tr> <td> Rahul Rss </td>
<td>Lois </td> <td> BCA </td>
<td> Griffin </td> <td> Rs.30000 </td>
<td> $150 </td> </tr>
</tr> <tr>
<tr> <td> 2 </td>
<td> Joe </td> <td> RL Sahani </td>
<td> Jha </td> <td> B.Tech </td>
<td> $300 </td> <td> Rs.40000 </td>
</tr> </tr>
</table> </table>
</body> </body>
</html> </html>
M2R5 69 YCT
Output: Output:

Caption-side property– This property is used for

<caption > tag and Caption-side property applied only
when <caption > tag is used inside the table. There can
Empty-Cells property– When you use empty-cells be only two caption-side properties, the first value can be
property and if any cell is empty in your table then the top, which we also get by default through <captions>,
cells will either be hidden or displayed. Because we can and the second value is bottom, which is used to move
the caption to the bottom.
use only two values in empty-cells property. The first
value is hidden and the second value is shown. <html>
Hide: When you use hide value and any cell is <head>
empty inside your table, then the border of that cell is <style type = "text/CSS">
hidden. table, th, td {border : 2px solidred ; border-
Show: When you use the Show value, if any cell collapse : separate
inside your table is blank, then the border of that cell border-spacing : 60px ;
becomes visible to us. table-layout : outo ; empty-cells : hide;
<html> caption-side : bottom ;
<head> </style>
<style type = "text/CSS" table, th, </head>
td {border ; 2px solid red ; <body>
border-collapse:separate;> <table>
<caption> My Table </caption>
border-spacing:60px;
<tr>
table-layout:auto; <th> Srl No. </th>
empty-cells:hide;} <th> Name </th>
</style> <th> Coruse </th>
</head> <th> Price </th>
<body> </tr>
<table> <tr>
<tr> <td> 1 </td>
<th>Srl No. </th> <td> Rahul Rss </td>
<td> BCA </td>
<th>Name </th>
<td> Rs. 30000 </td>
<th>Course </th>
</tr>
<th> price </th> <tr>
</tr> <td> 2 </td>
<tr> <td> RL Sahani </td>
<td> 1 </td> <td> B.Tech </td>
<td> Rahul Rss </td> <td> Rs. 40000 </td>
<td> BCA </td> </tr>
<td> Rs.30000 </td> </tr>
</tr> </table>
<tr> </body>
<td> 2 </td> </html>
Output:
<td> RL Sahani </td>
<td> B.Tech </td>
<td> Rs.40000 </td>
</tr>
</table>
</body>
</html>
M2R5 70 YCT
4.4(vi) CSS Menu Design: Step 5: Add hover effect ;
Navigation bar is important in any website. What is nav ul li a : hover {
displayed at the top or sides of the website is navigation. background-color : # 2C4584 ;
Through this you can set important links and categories. color : #fff ;
It is quite difficult to navigate the website without }
navigation menu which means that one cannot move
from one page to another in the website. Step-6: Setting border in navigation
Navigation bars <Nav> are either vertical or nav ul {
horizontal in CSS. 1px solid # 999 ;
Step-1: HTML structure contains list of links for the nav ul li {
menu navigation bar so create an un-ordered list <ul> in border-bottom : 1px solid # 999 ;
which we need to add as many links as we need, use <li> }
element inside it and <a> tag will create a link. nav ul li {
border-bottom : last-child {
<nav> border-bottom : none ;
<ul> }
<li> <a href = "index.html"> Home </a> </li> Example: Creating navigation bar
<li> <a href = "articles.html"> Articles </a> </li> <!DOCTYPE html>
<li> <a href = "about.html"> About </a> </li> <html>
<li> <a href = "Contact.html"> contact. <head>
</a> </li> <style>
</ul> #ul-nb {
</nav> list-style : none ;
margin : 0 ;
Padding : 0 ;
}
# ul-nb li {
float : left ;
Padding : 10px ;
background : orange ;
text align : center ;
Step-2: Changing the navigation background color margin left : 5px ;
and width: To make the navigation menu attractive, you
can add some color to the background. }
nav { # ul-nb li : hover {
background : # CCC ; background : red ;
width : 200px ; opacity : 0.8 ;
} color : white ;
Step 3: Removing the browser's default setting
}
whenever you use the <ul> element, by default some
margin and padding are set for it in the browser. Apart </style>
from this, bullets are already set in the list. These are not </head>
needed in the menu bar. <body>
nav ul { <ul id = "ul nb">
list-style-type : none ; <li> <a href = "# Home"> Home </a> </li>
padding : 0 ;
<li> <a href = "# Article"> Article </a> </li>
margin : 0 ;
} <li> <a href = "#About"> About </a> </li>
Use list-style-type: none to remove bullets from list <li> <a href = "#Contact"> Contact </a> </li>
items and to remove margin and padding value is set to </ul>
zero. <br> <br>
Step 4: <a> Styling the element; will add color to </body>
the text and set the alignment to center and the underline </html>
will remove from the text.
Output:
nav ul li a {
display : block ;
color # 000 ;
padding : 15px ;
text-decoration : none ;
text-align : center ;
}
M2R5 71 YCT
 Horizontal Navigation Bar; The horizontal bar is Example:
the horizontal direction along the x-axis. There are three <!DOCTYPE html>
ways to make the navigation bar horizontal– <html>
i. Creating a horizontal navigation bar using float
and display as blocks; <head>
Example: <style>
<!DOCTYPE html> navigation-menu ul{
<html> margin: 0px ;
<head> padding : 0px ;
<style>
#ul }
nb { #ul-nb li a{
list text align : center ;
style: padding : 1 opx ;
overflow:hidden ; width : 100px ;
background : red ;
}
margin : opx ;
padding : opx ; ul {
} padding : 0 ;
#ul overflow : hidden :
nb li a { background color : blue ;
text align : center ; }
padding : 10px; li { float : left ;
#ul li a {
nb li a { display : inline block ;
text align : center ;
padding : 10px ; color : black ;
width : 100px ; text align : center ;
} padding : 10 px 20 px ;
#ul text decoration : none ;
nb li a{ }
float : left;
} li a : hover {
#ul backgroun color : orange :
nb li : hover { }
background : Green ; # navigation ul
a{ {
display : block ;
</style> </head> font size : 1.5em ;
<body> }
<ul id = "ul nb"> # navigation ul li
<li> <a href = " # Home"> Home </a> </li> { display : inline ;
<li> <a href = "# Article"> Article </a> </li> color : white ;
<li> <a href = "# About"> About </a> </li>
}
<li> <a href = "# Contact"> Contact </a> </li>
</ul> # navigation li:not (:first-child) : before
</body> { content : "1" ;
</html> }
Output: </style>
</head>
<body>
<div class = "navigation menu">
<div id = "navigation">
<ul>
<li> <a href = "# Home"> </a> </li>
<li> <a href = "# Article"> Article </a> </li>
ii. Creating a navigation bar using a display as <li> <a href = "# About"> About </a> </li>
horizontal Inline When you create a horizontal <li> <a href = "# Contact"> Contact </a> </li>
navigation bar using a display as inline, you cannot apply </ul>
width and height, but you can create dividers between <body>
menus. </html>
M2R5 72 YCT
Output: Output:

iii. Vertical Navigation Bar; It creates a basic

vertical navigation bar with a background color and
changes the background color when the user moves the
mouse up. Fixed Navigation Bar– You can create a navigation
Example: bar at the top, bottom, or side of the page whenever the
<!DOCTYPE html> user scrolls through the page.
<html> Example:
<!DOCTYPE html>
<head> <html>
<style> <head>
ul { <style>
line style type : none ; body {margin : 0 ;}
margin : opx ; ul {
padding : opx ; list style type : none ;
width : 200px margin : 0 ;
padding : 0;
background color : yellow ;
overflow : hidden ;
li a { background color : pink ;
display : block ; position : fixed ;
color : red ; top : 0;
padding : 8px 16px ; width : 100% ;
text decoration : none ; }
li { li {
text align : center ; float : left ;
}
border bottom : 1px solid black ;
li a {
} display : block ;
li : last-child { color : white ;
border bottom : none ; text align : center ;
} pading : 14px 16px;
li.active { text decoration : none;
background color : Orange ; li a : hover : not (.active) {
color : white ; background color : yellow ;
}
}
.active {
li a : hover : not (active) { background color : purple ;
background color : black ; }
color : white ; </style>
} </head>
</style> <body>
</head> <h3> Fixed Top Navigation bar </h3>
<body> <ul>
<li> <a class = "active" href = "#Hmoe">
<h3>vertical navigation bar </h3> Home</a> </li>
<ul> <li> <a href = "#Article">Article</a> </li>
<li> <a class = "active" href = "#Home"> Home <li> <a href = "#About">About</a> </li>
</a> </li> <li> <a href = "#Contact">Contact</a> </li> </ul>
<li> <a href = "# Articles"> Article </a> </li> <div style = "padding : 20px; margin top : 20px ;
<li> <a href = "#About"> About </a> </li> background color : red ; height : 1500 px ;">
<li> <a href = "# Contacts"> contact <p> custom text goes here.........</p>
<p> text goes here..........</p>
</a> </li>
<p> text goes here...........</p>
</ul> </div>
</body> </body>
</html> </html>
M2R5 73 YCT
Output: </a>
<div class = "desc"> Add description of image here
</div>
<div class = "gallery">
<a target = "_blank">
href = "img_forest.jpg">
<img src = "img_forest.jpg" alt = "Forest">
width = "600" height = "400">
</a>
<div class = "desc"> Add description of image here
</div>
<div class = "gallery">
4.4(vii) CSS Image Gallery:
<a target = "_blank" href = "img_lights.jpg">
Image galleries are used to store and display pictures <img src = "img_lights.jpg" alt = "Northern Lights"
in a website. Each gallery has a number of div sections. width="600" height="400">
Each div section contains an image and its description. </a>
Example: <div class = "desc"> Add description of image here
<!DOCTYPE html> </div>
<html> </div>
<head> </body>
<style> </html>
div.gallery { Output:
margin : 5px ;
border : 1px solid # CCC ;
float : left ;
width : 180 px ;
}
div.gallery : hover {
border : 1 px solid # 777 ;
}
div.gallery img {
width : 100%
height : auto :
}
div. desc {
padding : 15px ;
text-align : center ;
}
</style>
</head>
<body>
<div class = "gallery">
<a target = "_blank">
href = "img-Sterre.jpg">
<img src = "img-5 terre.jpg" alt = "cinque Terre"
width = "600" height = "400">

M2R5 74 YCT
 Practice Questions with Explanatory Solutions
1. The full form of CSS is– Ans.(c) not ( ) selector is used to find the elements
(a) Cascade Style Sheet that do not match the given element. The not (S)
(b) Cascading short sheet selector selects only those elements that do not match
(c) Cascading Style Sheets the selector S.
(d) None of these 8. Which attribute can be added to HTML/XHTML
Ans. (c) The full form of CSS is Cascading Style elements to identify them as members of a
Sheets. It is a style sheet language that is used to make specific group?
documents beautiful and attractive, written in markup (a) ID (b) div
language which includes elements like layout, color (c) Class (d) Span
and font. Ans.(c) Class is a global attribute which can be used
2. A CSS rule set contains– for CSS selector. The class is defined by the class
(a) Selector (b) Declaration block attribute on all elements to which you want to apply a
(c) Both (a) and (b) (d) none of these style. The class attribute can be associated with
Ans. (c) Full name of XML is Extensible Markup HTML/XHTML elements.
Language. It is a dynamic markup language. It is used 9. What should be the width of the table, so that the
to convert data from one form to another. CSS can be width of the table adjusts to the current width of
used to display the content of an XML document
clearly and accurately. It gives design and style to the the browser window?
entire XML document. (a) 640 pixels (b) 100%
3. Extension of CSS file is– (c) fullscreen (d) 1024PX
(a) ⋅CS (b) ⋅CSS Ans. (b) When the table width is 100%, the table
(c) ⋅CSSX (d) ⋅CX width adjusts to the current width of the browser
window.
Ans. (b) While saving a new file, it is necessary to
pay attention to the file extension. The extension of 10. Which element is used in the <Head> section on
CSS file is ⋅CSS. an HTML/XHTML page if you want to use an
external style sheet to decorate the page?
4. What is true about XML? (a) <src> (b) <link>
(a) Extensible Markup Language (c) style (d) <ess>
(b) Markup language
(c) Gives design and style to the document. Ans. (c) A web page can be decorated with an
(d) None of these external style sheet using the <link> element under the
HTML/XHTML page <head> section.
Ans. (b) Full name of XML is Extensible Mark
Language. It is a dynamic markup language. It is used 11. Which of the following selectors selects any tag
to convert data from one form to another. CSS can be with the ID attribute set–
used to display the content of an XML document (a) E#id (b) Class
clearly and accurately. It gives design and style to the (c) #id (d) None of these
entire XML document. Ans.(c) #id selector selects any tag with id attribute
5. What can be used as wild card character– set. The id selector selects the id attribute of an HTML
(a) Element selector (b) Universal selector element to select a specific element. ID is always
(c) Both (a) and (b) (d) None of these unique within the page therefore it is chosen to select
a single unique element.
Ans.(b) Universal selector is used to apply the same
style rule to all the elements available in an HTML 12. Character coding is–
document. The universal selector is represented by (a) Method used to represent numbers in a
*(Asterisk). It can be used as a wild card character. If character
you declare a separate CSS rule for an element, the (b) The method used to represent a character in a
universal selector has no effect on that particular number
element. (c) A system consisting of a code that pairs each
6. Which of the following selectors selects the character with a pattern, sequence of natural
element that is the first child of the parent? numbers, or electrical pulse to transmit data.
(a) :first-of-type (b) :last-child (d) none of these
(c) :first-line (d) :first-letter Ans.(c) Character coding is a system that consists of a
Ans.(a) Web masters get flexibility through the code that pairs each character with a pattern, sequence
different types of selectors available in CSS. The first- of natural numbers, or electrical pulse to transmit data.
That is, we can say that character encoding is the
of-type selector is used to style each first child of a system which tells the computer how to display binary
parent element according to the given type. codes in characters.
7. Which of the following selectors selects elements 13. Which property is used to change the
that do not match selector S ? background color in CSS.
(a) : (S) (b) nth Child (S) (a) bg Color (b) background
(c) not (S) (d) none of these (c) color (d) back color

M2R5 75 YCT
 Ans. (b) Through Background Color, you can change Ans. (a) A border can be displayed around a cell
the background of the web page to a different color. without any content by using the empty cell attribute.
Normally the background of a web page is always Users can also remove cells without content using the
white. In CSS, the background color is defined with empty cell hide attribute.
background-Color. 20. Which of the following functions flips the color of
14. Which of the following CSS list properties is an element for use by filter property–
correct? (a) Image ( ) (b) flip ( )
(a) Set individual list item markers for the order (c) invert ( ) (d) contrast ( )
list. Ans.(c) The values of filter properties are called filter
(b) Set a separate list item marker for the unordered functions. When invert ( ) is used it changes the color
list. of an element. The invert (%) value is used to set the
(c) Set an image as a list item marker. invert setting of the image. Its default value is (0%)
(d) All of the above. and 100% value completely inverts the image.
Ans. (d) List is like a container. Through this you can 21. Used to select all elements with similar style
display information in the form of structure on the definitions.
web page. In this, set different list items for the order (a) Group selector (b) Grouping selector
list. Set separate list item markers for unordered lists (c) Universal selector (d) none of these
and can set an image as a list item marker. Ans. (b) Group selector is used to apply CSS on more
15. If we do not want to allow floating div on the left than one tag simultaneously. The grouping selector is
side of an element, which CSS property would used to select all elements with the same style
you use– definition. Grouping selector is used to reduce the
(a) Margin (b) clear code.
(c) float (d) padding 22. The way to use CSS in one line is–
Ans. (b) Clear property is used to clear left float, right (a) Inline CSS (b) Internal CSS
float or both. By default the element can float to the (c) External CSS (d) none of these
left or right side. The Left clear property is used to Ans.(a) When CSS is written inside an HTML tag, it
disallow padding div on the left side of an element. is called inline CSS. In this method, CSS properties
16. Which of the following color formats is a CSS are written inside the "style" attribute. Inline CSS is a
color that can be defined using the keyword RGB way of using CSS in one line. If you need to use CSS
followed by three numbers in parentheses within an HTML line or paragraph, you can use the
between 0 and 255 separated by commas– CSS with a DIV or a html tag.
(a) RGB color (b) RGBa color 23. Color can be declared using the color property
(c) HSL color (d) HSLa color ............ available in CSS.
Ans.(a) It is very important to have color in the (a) foreground (b) background
website because it makes the webpage look beautiful (c) Both (a) and (b) (d) none of these
and attractive. There are many types of color codes in Ans.(c) The color property available in CSS is used to
CSS like RGB color, RGBA color, HSL color, HSLA declare the color for both foreground and background.
color and HEX color. RGB means Red, Green, Blue Foreground color means the color setting of elements
and color is changed with the help of these three. The like font color, border color, outlines, text color etc.
intensity of these three colors ranges between 0-255. Through color property you can easily declare color
Define the RGB color format by using the keyword for any html element.
RGB, followed by three numbers between 0-255,
separated by commas. 24. Value can be given in text transform property–
(a) test-transform: Upper case
17. CSS is.............language–
(a) Structural (b) Presentational (b) text-transform: lower case
(c) Mark up (d) Behavioral (c) text-transform: capitalize
Ans. (b) The full form of CSS is Cascading Style (d) All of the above.
Sheets. It is a language for styling web documents Ans. (d) Through CSS text transformation property,
developed by W3C (World Wide Web Consortiun). Its you can convert the text given in HTML into
first version was published in 1996. CSS3 is the latest uppercase or lowercase. The text transfer property has
version. It is used along with HTML to decorate a three values- text-transform.uppercase, text- transform
webpage. CSS is a presentational language.
: lowercase and text-transformcapitalize. Text-
18. When we write <img src = "img.png">, what transform : capitalize is used to start a word with a
"img.png" indicates inside the double quote–
(a) element (b) attribute capital letter.
(c) value (d) operator 25. The default value in the position property is ........
Ans. (c) When user writes <img src="img.png">, (a) static (b) Relative
displays the value "img.png" written inside double (c) fixed (d) Absolute
quotes. And img src denotes an attribute. Ans. (a) Through the position property, users can
19. Which of the following properties can be used to design the layout as per their choice. Static, relative,
display a border around a cell without any fixed and absolute position properties are available in
content?
(a) Empty cell (b) Blank cell CSS. The default position in an HTML document is
(c) Non-content (d) any cell static.
M2R5 76 YCT
 5 CSS FRAMEWORK

5.1 Introduction of W3.CSS: <link rel = "style sheet" href ="../lib/W3.CSS">

W3.CSS stands for Cascading Style Sheets <body>
developed by w3 schools.com. It is used to create <header class = "W3.Container W3-Blue">
attractive and responsive websites. It supports <h1> Header </h1>
“Responsive Mobile Design First” by default. It is </header>
smaller and faster than similar CSS frameworks. W3. <img src = "img-car.png" alt = "nice car" style=
CSS can make web development faster and easier. It is "width : 100%>
easier to use than other frameworks. W3.CSS is free to <div class = "W3-container">
use and requires no license. A responsive website can be <p> A car is a wheeled, self powered motor vehicle.
developed easily using the W3.CSS framework. used for transportation.</p>
5.1(i) Features of W3.CSS: </div>
<footer class = "W3-container W3-red">
Following are the features of W3.CSS– <h5> Footer </h5>
● W3-Container class is the most important among W3. <p> Footer information goes here </p>
CSS classes which provides common margins, </footer>
common padding, common fonts etc. </body>
● W3.Color classes are inspired by modern colors which <html>
are used in marketing, road signs and sticky notes. Output:
● W3.button and w-btn classes provide buttons of all
sizes and types like wide button, circular or square
button.
● W3. table classes can manage all types of tables.
● The W3.tooltip class can display all types of tooltips.
● W3.Card classes are suitable for both images and
notes. It has inbuilt responsive web designing.
● It provides standard CSS.
● It is free to use.
● It is inspired by Google Material Design.
5.2 Use of W3.CSS in website Development:
W3.CSS is a modern, responsive mobile CSS All CSS classes start with a W3 prefix and you can
framework. It is developed by w3school.com this is a add it inline inside the tag class.
mode RN CSS frames. Due to which there is built-in <div class = "W3-container"> </div>
responsibility. It supports responsive mobile design by 5.3 W3.CSS Colors Basics:
default and are smaller and faster than typical CSS The attractive aspect of a website's view is its color.
frameworks. W3.CSS supports all browsers (Chrome, The website can be made attractive by selecting the right
Firefox, Edge, Opera, etc.) and Provides equality across color combination. W3.CSS comes with a variety of
all devices (laptop, desktop, etc.). W3.CSS is just colors that can be used to perform different tasks. There
standard CSS. There is no J Query or JavaScript library. are four different classes to do these tasks–
5.2(i) How to Use W3.CSS: ● W3. color: Used to set the background color of an
There are two ways to use W3.CSS– HTML element.
(i) Local Installation– You can download the ● W3.text color: Used to set the text color of an
W3.CSS file to your local machine and include it in your element.
HTML code. ● W3.CSS hover color: Also used to set the background
(ii) CDN based version– You can include the color of an element when the mouse is hovered over it.
W3.CSS file in your HTML code for direct installation ● W3.CSS-hover-text-color: Used to change the text
from CDN (Content Distribution - Network). color when the mouse is hovered over the text.
You can do local installation by downloading the All modern browsers support 140 color names. The
latest version through https : // www.w3schools.com / list of shortened color names by color groups is as
W3CSS_download.asp. To use W3.CSS, add a link to follows–
W3.css to your web pages. Pink colors: Pink | Light pink | Hot pink | Deep
Example: pink | Pale violet red | Medium violet Red
<!DOCTYPE html> Purple colors: Lavender | Thistle | Plum | Orchid
<html> violet | Fuchsia | Magenta | Medium orchid | Dark orchid
<title> W3.CSS </title> | Blue violet | Dark magenta | Purple | Medium purple |
<meta name = "view port" Medium slate blue | Slate blue | Dark slate blue |
content = "width = device-width, initial-scale=1"> Rebecca purple | Indigo
M2R5 77 YCT
 Red colors: Light salmon | Salmon | Dark salmon | 5.3(ii) W3.CSS Text Colors:
Light coral | Indian red | Crimson red | Fire Brick | Dark This class is used to set the text color of an element.
red Example:
Orange colors: Orange | Dark orange | Coral <!DOCTYPE html>
tomato | Orange red <html>
Yellow colors: Gold | Yellow | Light yellow | <body>
Lemon chiffon | Light golden rod yellow | Papaya whip | <h3 style = "color:orange;"> Tut Orialln Hindi.com!
Moccasin | Peach puff | Pale golden rod | Khaki | Dark with yct </h3>
Khaki <p style = "color : Tomato ; "> India is democratic
Green colors: Green yellow | Chartreuse | Lawn country.</p>
green | Lime | Lime green | Pale green | Light green | </body>
Medium spring green | Spring green | Medium sea green </html>
| Forest green | Green | Drak green | Yellow green | Olive Output:
drab | Dark olive green | Medium aqua marine | Dark sea
green | Light sea green | Dark cyan | Teal
Cyan colors: Aqua | Cyan | Light cyan | Pale
turquoise | Aquamarine | Turquoise | Medium Turquoise
| Dark turquoise
Blue colors: Cadet blue | Steel blue | Light steel
blue | Light blue | Powder blue | Light sky blue | Sky
blue | Cornflower blue | Deep sky blue | Dodger blue | 5.3(iii) W3.CSS hover Colors:
Royal blue | Blue | Medium blue | Dark blue | Navy | Mid This class is used to set the background color when
night blue the mouse is hovered over an element.
Brown colors: Corn silk | Blanched Almond | Example:
Bisque | Navajowhite | wheat | Burly wood | Tan | Rosy <!DOCTYPE html>
brown | Sandy brown | Golden rod | Dark golden rod | <html>
Peru | Chocolate | Olive | Saddle Brown | sienna | Brown <title>W3.CSS </title>
| Maroon <meta name = "view port">
White colors: White | Snow | Honey dew | Mint content = "width = device-width, initial-scale = 1">
cream | Azure | Alice blue | Ghost white | White smoke | <link rel = "style sheet" href = "https:// www.W3
Sea shell | Beige | Old lace | Floral white | Lvory | schools.com/W3 CSS/4/W3.CSS">
Antique white | Linen | Lavender blush | Misty Rose <body>
Grey colors: Gainoboral | Light gray | Silver dark <div class = "W3 - container W3 -hover-red">
gray | Dim gray | Gray | Light Slate gray | Slate gray | <h2> Hover colors </h2>
Dark Slate gray | Black <p> change the background color when hovering
5.3(i) W3.CSS Colors: over this element.</p>
The W3 Color class sets the background color for </div>
any HTML element. </body>
</html>
Example: Output:
<!DOCTYPE html>
<html>
<body>
<style> = "background-color : Ddger blue ;
coloer : white ;" </style>
<h2> welcome to yct.com! </h2>
<style> ="background-color : slate blue ; color :
white ;"</style> 5.3(iv) W3-hover-text Colors:
<p>London is the most populous city in the united This class is used to change the text color when the
kingdom, with a metropolitan area of over 9 mouse is hovered over any text.
million inhabitants. Example:
</p> <!DOCTYPE html>
</body> <html>
</html> <title> W3.CSS </title>
<meta name = "view port"
Output:
content = "width = device-width,
initial-scale = 1">
<link rel = "style sheet" href = "https://
www.W3 schools.com/W3 CSS/4/W3.CSS">
<body>
M2R5 78 YCT
 <div class = "W3-container"> Example:
<h1> Hover colors </h1> <!DOCTYPE html>
<p> change the text color when hovering over an <html>
element : </p> <title> W3.CSS </title>
<div class = "W3-container W3-orange W3-hover- <meta name = "view port"
text-white"> content = "width = device-width, initial-scale = 1">
<h2> London </h2> <link rel = "style sheet" href = https://www.W3
<p> London is the most populous city in the United school.com/W3 CSS/u/W3.CSS">
<body>
Kingdom, with a metropolitan area of over 9
<div class = "W3-container">
million inhabitants.</p>
<h2> London </h2>
</div> <p> London is the most populous city in the United
Output: Kingdom,
with a metropolitan area of over 9 million
inhabitants.</p>
<hr>
</div>
<article class = "W3-container">
<h2> paris </h2>
<p> The paris is one of the largest population
centers in Europe, with more than 2 million
5.3(v) W3.CSS Container: inhabitants. </p>
<hr>
Like the Color class, there is a class in the W3.CSS </article>
framework that can be used to style elements of the <section class = W3-container">
container type. <h2> Tokyo </h2>
The w3-container class adds 16px left and right <p> Tokyo is the center of the Greater Tokyo Area
padding to any HTML element. and the most populous meteropolitan area in the
<div>, <Article>, <Section>, <Header>, <Footer> world. </p>
etc are used for HTML container elements. W3- <hr>
Container provides equality for all HTML container </section>
elements - common margins, common padding, common </body>
alignment, Common font and common color. </html>
Example: Output:
<!DOCTYPE html>
<html>
<title>W3.CSS </title>
<meta name = "view port"
content = "width = device-width, initial-scale = 1">
<link rel = "style sheet" href = "https:// www.W3
schools.com/W3 CSS/u/W3.CSS">
<body>
div class = "W3-container W3-teal">
<h1> youth competition times </h1>
</div>
<div class = "W3 container"> 5.4 W3.CSS Pannel:
<p> The W3-container class can be used to display W3 CSS panels are a type of container. The W3-
headers.</p> panel class adds a 16px top and bottom margin and a
</div> 16px left and right padding to any HTML element. It is
</body> used to display notes, quotes, alerts, cards etc.
</html> Example:
Output: <!DOCTYPE html>
<html>
<title> W3.CSS </title>
<meta name = "viewport"
content = "width = device-width, initial - scale =1">
<link rel="style sheet" href = "https : // www.W3
schools.com/W3.CSS/4/W3.CSS">
<body>
<button class = "W3.button W3-red" on click = "do
5.3(vi) Article and Section: cument.get element Byled ('idol"), style display
W3 container classes can also add predefined styles = "block"> show panel </button
to <article> and <section > elements. <div id = "i do l" class = "W3-panel
M2R5 79 YCT
 W3.green W-display-container" content = "width = device-width, initial-scale = 1">
Style = "display:none"> <link rel = "style sheet" href = "http:s//www.W3
<span on click = "this.parent element.style.display Schools.com/W3 CSS/u/W3.CSS">
="none"> <div class = "W3-container">
<class = "W3-button W3-red <h2> panels for Quotes </h2>
W3-display-topright"> x </span> <p> The W3-panel class can be used to display
<p> click on the x to close this panel. </p> quotes.</p>
<p>click on the x to close this panel. </p> <div class = "W3-panel W3-left bar W3-Sans W3-
</div>
XX large W3-serif">
</body>
</html> <p> <i> "Make it as simple as possible, but not
simpler." </i> </p>
Output: </div>
</div>
<body>
</html>
Output:

5.4(i) Using Panel to make notes:

W3-Panel is best suited for creating class notes.
Light colors are normally used to make notes.
Example:
<!DOCTYPE html>
<html>
5.4(iii) Panel for Alerts:
<title> W3.CSS </title> The Panel class can be used to display alerts. Strong
<meta name = "viewport" content = "width = colors are generally used to display alerts.
device-width, initial-scale=1"> Example:
<link rel = " stylesheet" href = "https : // www.W3 <!DOCTYPE html>
schools.com/W3 CSS/w/W3.CSS"> <html>
<div class = "W3-container"> <title> W3.CSS </title>
<h2> Panels for notes </h2> <meta name = "view port"
<p> The W3-panel class can be used to display content = "width = device-width, initial-scale = 1">
notes:</p> <link rel = "style sheet" href = "https:// www.W3
<div class = "W3-panel W3-pale-green"> Schools.com/W3 CSS/u/W3.CSS">
<p> India, officially the Republic of India, is a <body>
country in south Asia. It is the Seventh-largest <div class = "W3-container">
by area, the second-most populous country, and
<h2> panels for Alerts </h2>
the most populous democracy in the world.
</p> <p> The W3-panel class can be used to display
</div> alerts : </p>
</div> <div class = "W3 panel W3-red">
</body> <h3> Danger! </h3>
</html> <p> Red often indicates a dengerous negative
Output:
situation. </p>
</div>
</div>
</body>
</html>
Output:

5.4(ii) Panels for Quotes:

It can be used to create quotes in a web document.
Example:
<!DOCTYPE html>
<html>
<title> W3.CSS </title>
<meta name = "view port"

M2R5 80 YCT
5.4(iv) Panel as Cards: Output:
W3.CSS Card is used to create effects like greeting
cards. These are containers with shadow borders. To
create these cards W3-Card-x is used where x is the
number of pixels of the shaded border which can be 2, 4,
8 or 12.
Example:
<!DOCTYPE html> 5.4(vi) W3.CSS Opening & Closing Panels:
<html> Here you have a button whose On click event ID
<title> W3.CSS </title> opens a div with ID "Panel div". This button opens a
<meta name = "view port" panel.
content "width=device-width, initial-scale=1"> Example:
<link rel = "style sheet href = " https://www.W3. <!DOCTYPE html>
Schools.com/W3.CSS/4/W3.CSS"> <html>
<body> <title> W3.CSS </title>
<div class = "W3-container"> <meta name = "view port"
<h2> panels as cards </h2>
content = "width = device-width, initial-scale = 1">
<p> The W3-panel class can be used to display
cards:</p> <link rel = "style sheet href =" https://www.W3
<div class = "W3-Panel W3-blue W3-Card-u"> schools.com/W3⋅CSS/4/W3.CSS">
<p> London is the most populous city in the united <body>
kingdom, with a metropolitan area of over 9 <button> <class = "W3-button W3-red" on click =
million inhabitants.</p> "document.getElementByld('id01')⋅style
</div> display = 'block'"> show panel </button>
</div> <button> <class " = W3-button W3-red"
</body> on click = "document.get Element Byld ('id01') style
</html> display = 'block'">show panel
Output: </button>
<div id = "id01" class = "W3-panel W-green W3-
display-container" style = "display : none">
<span onclick = "this.parent Element.style.display =
"none">
class = "W3-button W3-red
W3-display-topright> x </span>
<p> click on the x to close this panel. </p>
5.4(v) W3.CSS Round Panels: <p> click on the x to close this panel. </p>
Creating a round panel is very simple, you need to </div>
add the class W3 Round Size, where you have to change </body>
the size⋅ You want the roundness to be displayed with the </html>
size. Output:
Example:
<!DOCTYPE html>
<html>
<title> W3.CSS </title>
<meta name = "view port"
Similarly, if you look at the panel div, there is
cntent = "width = device-width, initial-scale = 1"> element span tag with W3-close btn. This closes the
<link rel = "style sheet" href = "https://www.w3 panel.
schools.com/W3 CSS/u/W3.CSS"> Example:
<body> <!DOCTYPE html>
<div class = "W3-container"> <html>
<h2> Rounded panels </h2> <title> W3.CSS </title>
<div class = W3-panel W3-blue W3-round-xlarge"> <meta name = "view port"
<p>London is the most populous city in the united content = "Width = device-width, initial-scale = 1">
kingdom, <link rel = "style sheet" href = "https://www.W3
with a metro politan area of over 9 million schools.com/W3 CSS/u/W3.CSS">
inhabitants. </p> <body>
</div> <div class = "W3-container">
</div> <h2> Hidding panels </h2>
</body> <p> Hiding a panel can be done using an on click
</html> event on a W3-button:</p>
M2R5 81 YCT
 </div> <div class = W3-panel W3-border">
<div class = "W3-panel W3-red W3-display- <p> I have borders.</p>
container"> </div>
<span on click = "this.parent Element.style display <div class = "W3-panel W3-border-right">
= 'none'">
<p> I have only a right border.</p> </div>
<class = "W3-button W3-red W3-large W3-display-
to right"> x </span> <div class = "W3-panel W3-border-top W3-border-
<p> click on the x to close this panel.</p> bottom">
<p> click on the x to close this panel.</p> <p> I have top and bottom borders.
</div> </p>
</body> </div>
</html> </div>
Output: </body>
</html>
Output:

5.5 W3.CSS Border:

W3.CSS allows different types of borders. W3.CSS 5.5(i) W3.CSS Thick Border:
borders are implemented through 12 different classes To add a wide border around an HTML element, the
which are as follows– W3 RightBar, Left Bar, Top Bar and Bottom Bar classes
• W3-border: This class adds a border on all sides of are used.
the element.
Example:
• W3-border-right: Adds a border to the right side of
the element. <!DOCTYPE html>
• W3-border-left: Adds a border to the left of the <html>
element. <title> W3.CSS </title>
• W3-border-top: Adds a border to the top of the <meta name = "view port"
element. content = "width = device-width, initial-scale = 1">
• W3.border.bottom: Adds a border to the bottom of
<link rel = "stylesheet" href = "https://www.W3
the element.
• W3.border.0: It removes the border from the element. schools.com/W3 CSS/u/W3.CSS">
• W3.right bar: Adds a wide border to the right side of <body>
the element. <div class ="W3-container">
• W3.left bar: adds a wide border on the left side of the <h2> Thick Border Bars </h2>
element. <div class = "W3-panel W3-light-grey W3-leftbar">
● W3.bottom bar: Adds a wide border to the bottom of <p> I have a thick left border.</p> </div>
the element.
● W3.top bar: Adds a wide border at the top of the <div class = "W3-panel W3-left bar W3-border-
element. green W3-text-green">
• W3.border.color: Adds specified colored border. <p> I have a thick green left border. </p>
• W3.hover.border.color: It changes the border color </div>
on mouse hover. <div class = "W3-panel W3-leftbar W3-border-
Example: yellow">
<!DOCTYPE html> <p> I have a thick yellow left border.</p>
<html>
</div>
<title> W3.CSS </title>
<meta name = "view port" <div class = "W3-panel W3-leftbar
content = "width = device-width, initial-scale = 1"> W3-border-yellow W3-text-yellow">
<link rel ="style sheet" href = "https://www.W3 <p> I have a thick yellow left border.</p>
schools.com/W3 CSS/u/W3.CSS"> </div>
<body> </div>
<div class = "w3-container"> </body>
<h2> Borders </h2> </html>
M2R5 82 YCT
Output: Output:

5.5(ii) W3.CSS Round Border:

A round border can be created around an HTML
element very easily. To add a round border the W3- 5.5(iii) W3.CSS Hoverable Border:
round-size class is used with any size. The W3-hover-border-color class is used with
Example: Element to create a hoverable border effect. When the
<!DOCTYPE html> hoverable effect is applied, its color changes when you
<html> move the mouse over the border.
Example:
<title> W3.CSS </title> <!DOCTYPE html>
<meta name = "view port" <html>
content = "width = device-width, initial-scale = 1"> <title> W3.CSS </title>
<link rel = "style sheet" href = "https://www.W3 <meta name = "viewport"
content = "width = device-width, initial-scale = 1">
schools.com/W3CSS/4/W3.CSS"> <link rel = "stylesheet" href = "https://
<body> www.W3 shcools.com/W3 CSS/u/W3.CSS">
<div class = "W3-container"> <body>
<h2> Border </h2> <div class = "W3-container">
<h2> Hoverable Borders </h2>
<div class = "W3-panel W3-border"> <div class = "W3-panel W3-border 3-hover-
<p> My border are normal.</p> </div> border-red">
<div class=W3-panel W3-border W3-round-small"> <p> Border that turns red on hover.</p>
<p> My border are rounded (small).</p> </div> </div>
<div class = "W3-panel W3-border W3-border-red
<div class = W3-panel W3-border W3-round W3-hover-border-green">
small"> <p> Red border that turns green on hover. </p>
<p> My border are rounded (small).</p> </div> </div>
</div>
<div class = "W3-panel W3-border W3- round">
</body>
<p> My borders are rounded.</p> </div> </html>
<div class = "W3-panel W3-border W3-round- Output:
large">
<p> I have large rounded border. </p>
</div>
</body>
<html>
</div>
<div class = "W3-panel W3-border W3-round- 5.5(iv) W3.CSS Fonts:
xlarge"> W3.CSS fonts have different classes which are used
<p> I have xlarge rounded borders. </p> to style the font size and font style ⋅W3.CSS has 8 font
</div> size style like as– Tiny, Small, Medium, Large, XLarge,
<div class = "W3-panel W3-border W3-round- XXLarge, XXXLarge, Jumbo. W3⋅ medium is default
class which is 15PX. The default font for headings is
xxlarge"> segoe VI and default font is verdana.
<p> I have xxlarge rounded borders. </p> </div> Example:
</div> <!DOCTYPE html>
<html>
</body>
<meta name = "viewport" content = "width =
</html> device-width, initial-scale = 1">
M2R5 83 YCT
 <link rel = "stylesheet" href = "https://www.w3 <p class = "W3-large">
schools.com/w3css/4/w3.css"> Norway has a tatal area of 385,252 square
<body> kilometers and a population of 5,438, 657
<div class = "w3-container"> (December 2020)
<h2> Font-size classes </h2> </p>
<P Class = "w3-tiny"> w3-tiny </P> </div>
<P Class = "w3-small"> w3-small </P> </body>
<P Class = "w3-medium"> w3-medium (Default) </html>
</P> Output:
<P Class = "w3-large"> w3-large </P>
<P Class = "w3-xlarge"> w3-xlarge </P>
<P Class = "w3-xxlarge"> w3-xxlarge </P>
<p class = "w3-xxxlarge"> w3-xxxlarge </P>
<P Class = "w3-jumbo"> w3-jumbo </P> </div>
</body>
</html>
Output:
5.6 W3.CSS Text:
The W3.CSS text framework contains several
classes that are used to style text and add text effects.
With the help of these classes, text alignment and
shadow can be added to the text.

5.6(i) W3.CSS Text Alignement:

There are three classes used to align text in a
container element. The w3-left-align class aligns text to
the left. The W3-right-align class aligns text to the right
and the W3-Center class aligns text or objects to the
center.
Example:
<!DOCTYPE html>
<html>
<title> W3.CSS </title>
5.5(v) W3.CSS External Fonts: <meta name="viewport"
Apart from the available fonts, you can also add content="width=devie-width, initial-scale=1">
fonts of your choice to the webpage from external <link rel="stylesheet" href="w3.CSS">
sources like Google Fonts. Google Photos is available <body>
free to use. More than 1000 Google Fonts are available. <div class = "W3-container">
You can select any font as per your choice. Add a link to <h2> Text Alignments </h2>
the external stylesheet for the font you want to add. <div class = "W3-container W3-borderr W3-large">
Example: <div class = "W3-left-align"> <p>
<!DOCTYPE html> Left aligned text </p> </div>
<html> <div class = "W3-center"> <p>
<title> W3.CSS </title> Center aligned text.</p> </div>
</div>
<meta name = "view port" content = "width = </div>
device-width, initial-scale=1"> </body>
<link rel = "style sheet href = https://www.W3 </html>
Schools.com/W3 CSS/u/W3.CSS"> Output:
<link rel = "style sheet" href = https :// fonts.google
leapis.com/CSS? "family = sofia">
<style>
body, h1, h2, h3, h4, h5, h6 {
font-family:sofia,serif;
}
</style>
<body> 5.6(ii) Wide & Slim Text:
<div class = "W3-container"> Wide text has extra space between each character
<h2> font sofia </h2> while slim text has space between words.
<p> Example:
Norway has a total area of 385,252 square <!DOCTYPE html>
kilometers and a population of 5,438,657 <html>
(December 2020) <title> W3.CSS </title>
</p> <meta name = "view port"
M2R5 84 YCT
 content = "width = device-width, initial-scale =1"> content = "width = device-width, initial-scale = 1">
<href = "W3.CSS"> <dink rel = "styleseet" href = "W3.CSS">
<body> <body>
<div class = "W3-container"> <div class = "W3-container">
<h2> Wider Text </h2> <h2> Text Opacity </h2>
<p> The W3-wide class specifies a wider text.</p> <div class = "W3-panel W3-pnik">
<h2 class = "W3-Opacity"> Text Opacity </h2>
<p class = "W3-wide"> The W3-wide class specifies </div>
a wider text.</p> </div>
</div> </body>
<div class = "W3 slim"> slim class specifies </html>
compressed space </div> Output:
</body>
</html>
Output:

5.7 W3.CSS Tables:

It is used to display different types of tables using
different styles on W3 tables. W3.CSS provides a series
of classes that can be used to apply various styles to
5.6(iii) Shadow: tables such as changing the appearance of headings,
Using text-shadow property you can add a shadow making rows stripped, adding or removing borders,
or blur effect to your text. making rows hoverable, etc. class <table> tag is used to
Example: create a table.
<!DOCTYPE html> (I) W3. Table: It represents a basic table without
<html> any borders.
<title> W3.CSS </title> Example:
<meta name = "view port" <!DOCTYPE html>
content = "width = device-width, initial-scale = 1"> <html>
<link rel = "style sheet"> <title> W3.CSS </title>
<href = "W3.CSS"> <meta name = "view port"
<body> content = "width = device-width,
<div class = "W3-container W3-light-rey"> initial-scale = 1">
<h2.style = "text-shadow:1px 1px o#444"> <link rel = "style sheet" href = "W3.CSS">
Text shadow </h2> <body>
</div> <div class = "W3-container">
<div class = "W3-container W3-blue"> <h2> Basic Table </h2>
<h2 style = "text-shadow : 1px 1px 0#444"> text <p> The W3-table class defines a basic table : </p>
shadow </h2> <table class = "W3-table">
</div> <tr>
</body> <th> First Name </th>
</html> <th> Last Name </th>
Output: <th> Points </th>
</tr>
<tr>
<td>Jill</td>
<td> Smith </td>
<td> 50 </td>
</tr>
5.6(iv) Opacity: <tr>
You can add opacity to text through the W3-Opacity <td> Eve </td>
class. This class is designed to work with all colors.
<td> Jackson </td>
Example:
<!DOCTYPE html> <td> 94 </td>
<html> </tr>
<title> W3.CSS </title> <tr>
<meta name = "view port" <td> Adam </td>
M2R5 85 YCT
 <td> Johnson </td> Output:
<td> 67 </td>
</tr>
</table>
</div>
</body>
</html>
Output:

(III) W3. Bordered: This is used in everyday life to

draw a table with a border.
Example:
<!DOCTYPE html>
<html>
<title> W3.CSS </title>
<meta name = "view port"
(II) W3. Stripped: It is used to display stripped content = "width = device-width,
initial-scale = 1">
table.
<link rel = "Style sheet" href ="W3.CSS">
Example: <body>
<!DOCTYPE html> <div class = "W3-container">
<html> <h2> Bordered Table </h2>
<title> W3.CSS </title> <p> The W3-bordered class adds a bottom border to
<meta name = "viewport" each table row : </p>
content = "width = device-width, <table class = "W3-table W3-bordered">
initial-scale = 1"> <tr>
<link rel = "style sheet" href = "https://www.W3 <th> First Name </th>
schools.com/W3 CSS/4/W3.CSS"> <th> Last Name </th>
<body> <th> points </th>
</tr>
<div class = "W3-container"> <tr>
<h2> Striped Table </h2> <td> Jill </td>
<p> The W3-striped class adds zebra-stripes to a <td> smith </td>
table:</p> <td> 50 </td>
<table class = "W3-table W3-striped"> </tr>
<th> First Name </th> <tr>
<th> Last Name </th> <td> Eve </td>
<th> Points </th> <td> Jack son </td>
</tr> <td> 94 </td>
<tr> </tr>
<d> Jill </td> <tr>
<td> Adam </td>
<d> Smith </td>
<td> Johnson </td>
<d> 50 </td> <td> 67 </td>
</tr> </tr>
<tr> </table>
<d> Eve </td> </div>
<d> Jackson </td> </body>
<td> 94 </td> </html>
</tr> Output:
<tr>
<td> Adam </td>
<td> Johnson </td>
<td> 67 </td>
</tr>
</table>
</div>
</body>
</html>
M2R5 86 YCT
 (IV) W3. Striped Bordered Table: This class is <div class = "W3-container">
used to draw a table with a striped border. <h2> Hoverable Table </h2>
Example: <table class = "W3-table-all W3-hoverable">
<!DOCTYPE html> <thead>
<html> <tr class = "W3-light-grey">
<title> W3.CSS </title> <th> Last Name </th>
<meta name = "view port" <th> Points </th>
content= "width = device - width, initial-scale =1"> </tr>
<link rel = "style sheet" href = "W3.CSS"> </thead>
<body> <tr>
<div class = "W3-container"> <td> jill </td>
<h2> Striped Bordered Table </h2> <td> smith </td>
<table class ="W3-table W3-striped W3-boredred"> <td> 50 </td>
<tr> </tr>
<th> First Name </th> <tr>
<th> Last Name </th> <td> Eve </td>
<th> Point </th> <td> Jackson </td>
</tr> <td> 94 </td>
<tr> </tr>
<td> Jill </td> <tr>
<td> Smith </td> <td> Adam </td>
<td> 50 </td> <td> Johnson </td>
</tr> <td> 67 </td>
<tr> </tr>
<td> Eve </td> </table>
<td> Jackson </td> </div>
<td> 94 </td> </body>
</tr> </html>
<tr> Output:
<td> Adam </td>
<td> Jackson </td>
<td> 67 </td>
</tr>
</table>
</div>
<body>
</html>
Output:
(VI) Colored Table Header: W3 Color class is
used to add color to the table header.
Example:
<!DOCTYPE html>
<html>
<title> W3.CSS </title>
<meta name = "view port"
content = "width = device-width, initial-scale = 1">
<link rel = "style sheet" href = "https://www- W3
(V) Hoverable Table: To enhance the display schools.com/ W3 CSS/4/W3.CSS">
appearance of a table, use the W3⋅hoverable class. This <body>
class adds an effect to the table that changes the color of <div class = "W3-container">
the table on mouse hover. <h2> colored table heading </h2>
Example: <p> Use any of the W3-<em> color </em> classes
<!DOCTYPE html> to display a colored row: </p>
<html> <table class = "W3-table-all">
<title> W3.CSS </title> <thead>
<meta name = "view port" <tr class = "W3-red">
content = "width = device-width, initial-scale = 1"> <th> First Name </th>
<link rel = "style sheet" href = "W3.CSS"> <th> Last Name </th>
<body> <th> Points </th>
M2R5 87 YCT
 </tr> <td> 50 </td>
</thead> </tr>
<tr> <tr>
<td> jill </td> <td> Eve </td>
<td> smith </td> <td> Jackson </td>
<td> 50 </td> <td> 94 </td>
</tr> </tr>
<tr> <tr>
<td> Eve </td> <td>
<td> Jackson </td> <td> Adam </td>
<td> 94 </td> <td> Johnson </td>
</tr> <td> 67 </td>
<tr> </tr>
<td> </table>
<td> Adam </td> </div>
<td> Johnson </td> </body>
<td> 67 </td> </html>
</tr> Output:
</table>
</div>
</body>
</html>
Output:

(VIII) Responsive Table: If the screen is too small

to display the entire content, a responsive table will
display a horizontal scrollbar.
Example:
<!DOCTYPE html>
<html>
(VII) Table as a Card: W card classes create tables <title> W3.CSS </title>
like cards. <meta name = "view port"
Example: content = "width = device-width, initial scale = 1">
<!DOCTYPE html> <link rel = "style sheet">
<html> <href = "https : //www.W3 schools.com/W3 CSS/u/
<title> W3.CSS </title> W3.CSS">
<meta name = "view port" <body>
content = "width = device-width, initial-scale = 1"> <div clas = "W3-container">
<link rel = "style sheet" href = "https://www- W3 <h2> Responsive Table </h2>
shools.com/ W3 CSS/4/W3.CSS"> <div class = "W3-responsive">
<body> <table class = "W3-table-all">
<div class = "W3-container"> <tr>
<h2> colored table heading </h2> <th> First Name </th>
<p> Use any of the W3-<em> color </em> classes <th> Last Name </th>
to display a colored row: </p> <th> points </th>
<table class = "W3-table-all"> <th> points </th>
<thead> <th> points </th>
<tr class = "W3-red"> <th> points </th>
<th> First Name </th> <th> points </th>
<th> Last Name </th> <th> points </th>
<th> Points </th> <th> points </th>
</tr> </tr>
</thead> <tr>
<tr> <td> Jill </td>
<td> jill </td> <td> smith </td>
<td> smith </td> <td> 50 </td>
M2R5 88 YCT
 <td> 50 </td> content = "width = device-width, initial-scale = 1"
<td> 50 </td> <link rel = "style sheet" href = "W3.CSS">
<td> 50 </td> <body>
<td> 50 </td> <div class = "W3-container">
<td> 50 </td> <h2> XX Large Table </h2>
<td> 50 </td> <p> The W3-xx large class creates an extra extra
</tr> large table : </p>
<tr> <table class = "W3-table-all W3-xx large">
<td> Eve </td> <tr>
<td> Jackson </td> <th> first Name </th>
<td> 94 </td> <th> Last Name </th>
<td> 94 </td> <th> Points </th>
<td> 94 </td> </tr>
<td> 94 </td> </tr>
<td> 94 </td> <tr>
<td> 94 </td> <td> Jill </td>
<td> 94 </td> <td> Smith </td>
</tr> <td> 50 </td>
<tr> </tr>
<td> Adam </td> <tr>
<td> Jahnson </td> <td> Eve </td>
<td> 67 </td> <td> Jackson </td>
<td> 67 </td> <td> 94 </td>
<td> 67 </td> </tr>
<td> 67 </td> <tr>
<td> 67 </td> <td> Adam </td>
<td> 67 </td> <td> Jockson </td>
<td> 67 </td> <td> 67 </td>
</tr> </tr>
</table> </table>
</div> </div>
<div class = "W3-panel W3-red"> </body>
<p> A responsive table will display a horizontal </html>
scroll bar if the screen is too small to display Output:
the full content.
</p>
<p> Resize the screen to see the effect.
</p>
</div>
</div>
</body>
</html>
Output:
(X) Jumbo Table: W3-Jumbo class is used to
display jumbo large table.
Example:
<!DOCTYPE html>
<html>
<title> W3.CSS </title>
<meta name = "view port"
content ="width = device-width, initial-scale = 1">
<link rel = "style sheet" href = "https:// www.W3
(IX) XX Large Table: The W3 XX large class is schools.com/W3/u/W3.CSS">
used to draw tables with extra large fonts. <div class = "W3-container">
Example: <h2> Jumbo Table </h2>
<!DOCTYPE html> <p> The W3-jumbo class creates an enormous
<html> "jumbo" table : </p>
<title> W3.CSS </title> <table class = "W3-table-all W3-jumbo">
<meta name = "view port" <tr>
M2R5 89 YCT
 <th> First Name </th> Output:
<th> Last Name </th>
</tr>
<tr>
<td> Jill </td>
<td> Smith </td>
</tr>
<tr>
<td> Ev </td>
<td> Jackson </td> (I) Bordered List: W3.border class is used to create
a border around a list.
</tr> Example:
<tr> <!DOCTYPE html>
<td> Adam </td> <html>
<td> Johnson </td> <title> W3.CSS </title>
<meta name = "viewport"
</tr> content = "width = device-width, initial-scale=1">
</table> <linkrel = "style sheet" href = "W3.CSS">
</div> <body>
</body> <div class = "W3-container">
</html> <h2> Bordered List </h2>
<p> The W3-border class adds a border around the
Output: list:</p>
<ul class = "W3-ul W3-border">
<li> Jack fruit </li>
<li> Mango </li>
</ul>
<div>
</body>
</html>
Output:

5.8 W3. CSS List:

The W3.CSS List class is used to display list data in
HTML. The simplest way to create a W3.CSS list is by
creating an ordered list or adding the W3.CSS class to
the ul tag. This creates a very basic list.
Example:
<!DOCTYPE html> (II) List as a Card: W3.card.number classes are
<html> used to display the list in the form of a card.
<title> W3.CSS </title> Example:
<meta name = "view port" <!DOCTYPE html>
<html>
content = "width = device-width, initial-scale = 1"> <title> W3.CSS </title>
<link rel = "style sheet" href ="https://www.W3 <meta name = "viewport"
schools.com/W3 CSS/u/ W3.CSS"> content = "width = device-width, initial-scale =1">
<body> <link rel = "style sheet" href = "W3.CSS">
<h2> Bordered List</h2> <body>
<div class = "W3-container"> <div class = "W3-container">
<p> The W3-border class adds a border around the <h2> List as a card </h2>
<p> The W3-card class makes the list look like a
list: </p>
card: </p>
<ul class = "W3-ul W3-border"> <ul class = "W3-ul W3-card" style = "width:50%">
<li> Jill </li> <li> Eraser </li>
<i> Eve </li> <li> Pencil </li>
<li> Adam </li> <li> pen </li>
</ul> </ul>
</div> </div>
</body> </body>
</html> </html>
M2R5 90 YCT
Output: Output:

(III) Colored List: W3.Color class is used to add (V) Closable List Item: Add span tag with a button
color to the list. You can create a colorful list by of list item, it displays cross. You can close/hide the up
changing the background of the table or individual items list item by clicking on 'x' (cross).
as per your choice. Example:
Example: <!DOCTYPE html>
<!DOCTYPE html> <html>
<html> <title> W3.CSS </title>
<title> W3.CSS </title> <meta name = "view port"
<meta name = "view port" content = "width = device-width, initial scale =1">
content = "width = device-width, initial-scale = 1"> <body>
<link rel = "style sheet" href = "W3.CSS"> <div class = "W3-container">
<body> <h2> Clasable List Items </h2>
<div class = "W3-container"> <p> to close/hide the list items, click on the "x":</p>
<h2> Colored List </h2> <ul class = "W3-ul W3.card-4">
<p> use any W3-color class to add a color to the <li class = "W3-display-container"> kindergarden
list:</p> <span on click = "this. Parent Element, style, display
<ul class = "W3-ul W3-red"> = "none" class "W3-button W3-transparent W3-
<li> Pizza </li> display-right"> & times;
<li> Burger </li> </span> </li>
<li> Dosa </li> <li class = "W3-dispalay-container"> school <span
</ul> on click = "this. Parent Element.style.display
<div> = "none" class = "W3-button W3-transpatent
</body> W3-display-right"> & times; </span> </li>
</html> <li class ="W3-display-container"> college
Output: <span on click = "this, parent Element, style,
display = 'none" class = "W3-button W3-
transparent W3-dislay-right"> & times;
display-right"> & times;
</span> </li>
</ul>
</div>
</body>
</html>

(IV) Hoverable List: W3 hoverable class is used to Output:

add a different background color to each list item on
mouse hover.
Example:
<!DOCTYPE html>
<html>
<title> W3.CSS </title>
<meta name = "viewport"
content = "width = device-width, initial-scale =1">
<div class = "W3-container">
<h2> Hoverable List </h2> (VI) List with Padding: W3. Padding class is used
<p> The W3-hoverable class adds a grey to increase or decrease the space between list items.
background color to all list items when you Example:
mouse over them: </p> <!DOCTYPE html>
<ul class = "W3-ul W3-hoverable"> <html>
<li> Jil </li> <title> W3.CSS </title>
<li> Eve </li> <meta name = "view port"
</ul>
content ="width = device-width, initial-scal-1">
</div>
<body> <linkrel = "style sheet" href ="W3.CSS">
</html> <body>
M2R5 91 YCT
 <div class ="W3-container"> <ul class = "W3 ul W3-Tiny">
<h2> Padded List </h2> <li> Tiny </li> </ul>
<p> Use any of the W3-padding classes to increase <ul class = "W3 ul W3-small">
of decrease the padding of each list item:</p> <li> Small </li> </ul>
<p> padding small: <ul class = "W3 ul W3-Large">
<ul class ="W3-ul W3-border" style ="width:50%"> <li> large </li> </ul>
<li class = "W3-padding g = small"> Swimming </ <ul class = "W3 ul W3-x large">
li> <li> x large </li> </ul>
<li class ="W3-padding-small"> POLO <li> <ul class = "W3 ul W3- xx large">
<li <li> xx lage </li> </ul>
</ul> <ul class = "W3.ul W3-xxx large">
<p> Default : </p> <li> xxx large </li> </ul>
<ul class "W3-ul W3-border" <ul class = "W3 ul W3-jumbo">
style ="width:50%"> <li> Jumbo </li> </ul>
<li> Swimming </li> </body>
<li> Polo </li> </html>
<li> Horse riding </li> Output:
</ul>
<p> Padding Large : </p>
<ul class ="W3-ul W3-border"
style ="width:50%">
<li class ="W3-Padding-large"> Swimming </li>
<li class ="W3-Padding-large"> Polo </li>
<li class ="W3-Padding-large"> Horse riding </li>
</ul>
</div>
</body>
</html>
Output:

5.9 W3. CSS Images:

Images are the most important building block of any
website. The "img" tag is used to add images to a
website. You can create round border images, border
images or even images within a card as per your choice.
Example:
<!DOCTYPE html>
<html>
<title> W3.CSS </title>
<meta name = "view port"
content = "width = device
width, initial scale = 1">
<link rel = "style sheet" href = "W3.CSS">
</head>
<h2> Different types of Image </h2>
(VII) W3.CSS List Size: You can also change the
<p> Image in a circle </p>
list size as per your choice like– Tiny, Small, X large,
XX large, XXX large, jumbo. <img src = "img-snowtops.jpg"
Example: class = "W3 circle"
<!DOCTYPE html> alt = "Hills" style = "width:30%">
<html> <p> Image in a Rounded </p>
<title> W3.CSS </title> <img src = "img-snowtops. jpg" Class ="W3
<head> round" alt ="Hills" style ="width:30%">
<meta name = "view point" content = "width = <p> Bordered Image </p>
device width, initial scale = 1"> <img src = img-snowtops.jpg" class = "W3 border
<link rel = "stlesheet" href = "W3.CSS"> W3 padding 16"alt= "Hills" style = "width:30%">
</head> </body>
<h2> Different types of Lists Size </h2> </html>
M2R5 92 YCT
Output: <p> More shadows:</p>
<div class ="W3-card-4" style ="width:50%">
<img src ="img-avatar 5.png">
<alt ="Person" style ="width:100%">
<div clas ="W3-container">
<h4> <b> Jane </b> </h4>
<p> The other boss </p>
</div>
</div>
</div>
</body>
</html>
Output:

5.9(i) Images as a Card:

You can also create the picture as a card with a drop
shadow below. Create a div and add markup for your
image in "W3-card-number".
Example:
<!DOCTYPE html>
<html> 5.10 W3. CSS Images Effect:
<title> W3.CSS </title> You can make your image more attractive by adding
<meta name = "view port" some effects like– Opacity, Gray Scale, Sepia effect,
Hover effect etc. These effects are difficult to create
content = "width = device
without W3.CSS and also require a lot of extensive
width, initial scale = 1">
JavaScript coding.
<link rel="style sheet" href ="https://www.W3 (I) To add Opacity in Images: To create a certain
schools.com/W3 CSS/u/W3.CSS"> effect, you can add Opacity to the image. W3 Opacity,
<body> W3⋅Opacity min and W3⋅Opacity max are used in
<div class ="W3-container"> W3.CSS.
<h2> Image as a card </h2> Example:
<p> Wrap any of the W3-card classes around the <!DOCTYPE html>
image to display it as a card:</p> <html>
<div class ="W3-card" style="width:50%"> <title> W3.CSS </title>
<img src = "img-avatar 3.png"> <meta name = "view port"
<alt ="Person" style ="width:100%"> content = "width = device
<h4> <b> Simon </b> </h4> width, initial-scale = 1">
<p> The boss of all bosses </p> <link rel ="style sheet" href = W3.CSS">
</div> <body>
</div> <div class ="W3-container">
<br> <h2> opacity/Transparency </h2>
M2R5 93 YCT
 <p> The W3-opacity classes adds transparency to <body>
an element. </p> <div class = "W3-container">
<p> Normal (100% opacity):</p> <h2> Gray scale Effect </h2>
<img src ="img-forest.jpg"> <p> The W3 gray scale classes add a gray scale
<alt ="forest" style ="width:150px"> effect to an element. </p>
<p> W3-opacity-min (75% opacity):</p> <p> Normal: </p>
<img src ="img-forest.jpg" <img src = "img-work shop.jpg"
alt = "snow" style = "width : 150px">
alt ="forest" class ="W3-opacity-min" style
<p> W3-gray scale-min:</p>
="width:150px">
<img src = "img-work shop.jpg"
<p> W3-opacity (60% opacity) : </p> alt = "snow" class = "W3-gray scale-min"
<img src ="img-forest.jpg" style = "width:150px">
alt ="forest" class ="W3-opacity" style <p> W3-gray scale-male (black and white) : </p>
="width:150px"> </div>
<p>W3-opacity-max (25% opacity):</p> <img src = "min-work shop.jpg" alt = "snow" class
<img src ="img-forest.jpg" = "W3-gray scale-max" style = "width:150px">
alt ="forest" class ="W3-opacity-max" style = </div>
"width:150px"> </body>
</div> </html>
</body> Output:
</html>
Output:

(III) Sepia Image Effect: To create sepia image

effect, W3⋅Sepia, W3⋅Sepia min and W3. Sepia max
classes are used.
Example:
<!DOCTYPE html>
<html>
<title> W3.CSS </title>
<meta name = "view port"
(II) Creating Gray Scale Image: W3gray scale, content = "width = device-width, initial-scale =1">
W3⋅gray scale min and W3⋅gray scale min classes are <link rel = "style sheet" href = "W3.CSS">
used to create gray scale image. <body>
Example: <div class = "W3-container">
<!DOCTYPE html> <h2> Sepia Effect </h2>
<html> <p> The W3-sepia classes add a sepia effect an
<title> W3.CSS </title> element </p>
<meta name = "viewport" <p> <stong> Note: </strong> The W3-sepia classes
content = "width = device-width, initial-scale = 1"> are not supported in IE 11 and earlier versions.</p>
<link rel = "style sheet" href = "W3.CSS"> <p> Normal : </p>
M2R5 94 YCT
 <img src = "img-work shop.jpg" Output:
alt = "snow" style = "width:150px">
<p> W3-sepia-min:</p>
<img src = "img-work shop.jpg"
alt = "snow" class = "W3-sepia-min"
style = "width:150px">
<p> W3-sepia-max : </p>
<img src = "img-work shop.jpg"
alt = "snow" class = "W3-sepia-max"
style="width: 150px">
</div>
</body>
</html>
Output:

5.11 W3. CSS Grid:

W3.CSS Grid Structured supports 12 columns. This
W3.CSS grid system targets three screen sizes – small
screens like mobiles, medium screens like tablets and
large screens like desktops. A responsive layout adjusts
itself as per screen size Rows are created by using the
W3-Row class. You can create up to 12 columns within
each row. A column is specified by the W3-Col class.
W3.CSS provides a separate class for each screen size.
For small size the class name starts with 'S' followed
by the number of columns. For medium size the class
name starts M followed by the number of columns and
for large sizes the class name starts with 'ℓ' followed by
(IV) Hover Effect: Opacity, scale and sepia effects number of columns.
can also be created in the image by hovering the mouse.
For this, W3⋅Hover gray scale, W3⋅Hover Opacity or 5.11(i) Columns for small screens
W3⋅Hover Sepia classes are used.
Example: (Smart phones):
<!DOCTYPE html> S1: This defines 1 of 12 columns for smaller screens.
<html> Whose width is 8.33%.
<title> W3⋅CSS</title> S2: This defines 2 of the 12 columns for smaller screens.
<meta name="viewport" Whose width is 16.66%.
content = "width = device-width, initial-sale = 1">
S3: This defines 3 out of 12 columns for the width of the
<link rel = "styl sheet" href = "W3⋅CSS">
<body> small screen. Whose width is 25.00%.
<div class = "W3-container"> S12:This defines 12 of 12 columns with 100% width for
<h2> you can also add special effects on smaller screens.
hover/mouse-over.</p> 5.11(ii) Columns for medium screens
<img src = img-work shop jpg" class = "W3-hover-
opacity" style = "width:150px"> (Tablets):
<p> W3-hover-gray scale: </p> M1:This defines 1 of 12 columns for the middle screen
<img src = "img-work shop.jpg" width. Its width is 8.33%.
class ="W3-hover-gray scale" style="width:150px"> M2: This Defines columns 2 out of 12 for medium
<p> W3-hover-sepia: </p> screen width. Its width is 16.66%.
<img src="img-work shop.jpg"
M3:That defines 3 of the 12 columns for the middle
class = "W3-hover-sepia" style = "width:150px">
</div> screen. Whose width is 25.00%.
</body> M12:This defines the full 12 out of 12 columns for the
</html> medium screen.
M2R5 95 YCT
 <div class ="W3-col S9 W3-dark-grey W3-center">
5.11(iii) Column for large screen (laptop):
<p> S9 </p>
L1: This defines 1 of 12 columns for large screens with a </div>
width of 8.33%. </div>
L2: This defines 2 of the 12 columns for larger screens. </body>
Whose width is 16.66%. </html>
L3: This defines 3 of 12 columns for large screens with a Output:
width of 25.00%.
L12:This defines 12 columns out of 12 for larger
screens.
Two Equal Columns–
<!DOCTYPE html>
<html>
<title> W3.CSS </title>
<meta name = "view port"
content ="width = device-width, initial-scale = 1">
<link rel ="style sheet" href ="W3.CSS"> Six Columns– six equal width columns (16% each)
<body> on tablets, laptops and desktops and Columns will
<div class ="W3-container"> automatically stack with 100%.
<h2> Two equal columns </h2> <!DOCTYPE html>
<p> Two equal-width columns (50% / 50%) <html>
on all screen sizes : </p> <title> W3.CSS </title>
</div> <meta name = "view port"
<div class ="W3-row"> content = "width = device-width, = 1">
<div class ="W3-col S6 W3-green W3-center"> <link rel = "stylesheet" href ="W3.CSS">
<p> S6 </p> <body>
</div> <div class ="W3-container">
</div> <h2> Six columns </h2>
</body> <p> six equal-width columns (16% each) on tablets,
</html> laptops and desktops. on Mobile phones, the
Output: columns will automatically stack (100% width):</p>
<p> Try to resize the browser window to see the
effect </p>
</div>
<div class = "W3-row">
<div class = "W3-col m2 W3-green W3-center">
<p> m2 </p>
<div>
<div class ="W3-col m2 W3-red W3-center">
Two Unequal Columns– <p> me </p>
<!DOCTYPE html> </div>
<html> <div class ="W3-col m2 W3-blue W3-center">
<title> W3.CSS </title> <p> me </p>
<meta name = "view port" </div>
content ="width = device-width, initial-scale = 1"> <div class="W3-col m2 W3-drark-grey w3-center">
<link rel ="style sheet" href ="W3.CSS"> <p> me </p>
<body> </div>
<div class ="W3-container"> <div class ="W3-col m2-black W3-centers">
<h2> Two unequal columns </h2> <p> m2 </p>
<p> Two columns of unequal width (25% / 75%) on </div>
all screen size : </p> <div class ="W3-col m2 W3-purple W3-center">
</div> <p> m2 </p>
<div class ="W3-row"> </div>
<div class ="W3-col S3 W3-green W3-center"> </div>
<p> S3 </p> </body>
</div> </html>
M2R5 96 YCT
Output: 5.11(v) Mixed Layout for Mobile, Tablet &
Desktop:
To create mixed layout for mobile, tablet and
desktop screens, S, M, L have to be used. It is used to
specify the column size for small screens or mobiles
while the latter specifies the screen size for desktop or
larger screens.
Example:
<!DOCTYPE html>
<html>
<title> W3.CSS </title>
<meta name = "view port"
content ="width = device-width, initial scale =1">
5.11(iv) W3. CSS Mixed Grid Layout: <link rel ="stylesheet" href ="W3.CSS">
W3⋅CSS mixed grid layout means these appear <body>
different on different screens. S and L are used for <div class ="W3-container">
mobile and desktop screens to create mixed layouts. <h2> Mixed:Mobile Tablet and Laptops </h2>
Example: <p> This example will produce a three column
<!DOCTYPE html> layout with a 25% / 58.34% / 16.66% (13, 17, 12)
<html> split on large on medium screens and a 33.3% /
<title> W3.CSS </title> 33.3% / 33.3% (S4, S4, S4) split on small
<meta name = "view port" screens:</p>
content ="width = device-width, initial-scale = 1"> </div>
<link rel ="stylesheet" href ="W3.Css"> <div class ="W3-row">
<body> <div class ="W3-col 13 ml 54 W3-green
<div class = "W3-Container"> W3-center"> <p> 17 m3 54 </p> </div>
<h2> Mixed:Mobile, Tablets and Laptops </h2> <div class ="W3 col 12 m3 54 W3-red W3-center">
<p> you can combine classes to create a dynamic <p> 12 m3 54 </p> </div> </div>
and flexible layout. This example will procedure a </div class ="W3-row W3-container">
two column layout with a 83.34% / 16.66% (l10, l2) <p> Inside a container : </p>
split on a large screens and a 50% / 50% (S6, S6) <div class = "W3-Col 13 m6 54 W3-green W3-
split on a small screens : </p> center"> <p>13 m6 54</p> </div>
<p> try to resize the browser window to see the <div class ="W3-col 17 m3 54 W3-dark-gray W3-
effect the effect </p> center"> <p> 17 m3 54 </p> </div>
</div> <div class ="W3-col 12 m3 54 W3-red W3-center">
<div class ="W3-row"> <p> 12 m3 54 </p> </div>
<div class ="W3-col l10 S6 W3-green W3-center> </div>
<p> l10 S6 </p> </div> </div>
<div class ="W3-col l2 S6 W3-dark-gey W3- </body>
center"> <p> l2 S6 </p> </div> </html>
</div> Output:
</body>
</html>
Output:

M2R5 97 YCT
 Practice Questions with Explanatory Solutions
1. W3.CSS is a ........... Ans.(d) CSS frameworks are libraries that allows
(a) Website creating simple web designs using the Cascading Style
(b) DTP software Sheets language. The framework includes font size,
(c) Web publishing tool CSS reset, button styles, etc.
(d) Framework
6. One of the basic principles of W3.CSS is–
Ans.(d) W3.CSS is the most used framework for in- (a) Similarity for all browsers
built responsive website. The CSS Framework is a (b) Parity across all devices
library that allows standard compliment web design (c) Only Standard CSS
using the Cascading Style Sheets language. (d) All of the above.
2. How many columns are there in the basic grid Ans. (d) W3.CSS is equally useful for all browsers
box of the skeleton? and all types of devices (mobile, computer etc.) It uses
(a) 17 (b) 12 only standard CSS.
(c) 16 (d) 10
7. Which class is there to determine the color of text
Ans. (b) The grid box has 12 columns with a
element?
maximum width of 1200PX, which is smaller in size
(a) w3.text.color
to shrink with the browser or device. The max width
(b) w3.css text color
can also be changed with a single row of CSS. And
(c) w3.text color
the column sizes also change accordingly.
(d) w3.text.color
3. Which of the following classes is appropriate to
Ans. (a) The w3.text.color class is used to set the text
display quotes–
color of an element.
(a) w3-Panel class
(b) W3-Panel class 8. Which of the following class is used to set the
(c) W3-Container class background color displayed by W3.CSS?
(d) none of these (a) w3.color
(b) w3 background color
Ans. (b) W3-Panel is used to display class quotes.
(c) bg color
Quotes are often displayed with a background, a left
(d) w3.color
border bar, and an italic font style.
Ans.(c) Color is an important aspect of the view of a
4. Which of the W3-Container class is not used for
website. The website can be made more attractive by
HTML container elements?
selecting the right color combination. The w3.color
(a) <div>
(b) <span> class is used to set the background color for any
(c) <footer> HTML element.
(d) <item> 9. Which class is used in W3.CSS to set the
Ans. (b) W3-Container is used to store container type background color when the mouse is hovered
elements in W3.CSS framework. HTML containers over an element?
like <div>, <article>, <section>, <header>, <footer>, (a) w3 hover : color
<form> etc. are used under W3-container class. The (b) W3 color hover
W3.CSS container class adds 16PX padding to the left (c) w3 hover : color
and right sides of an HTML element. This is also used (d) w 3 hover color
for many styles. Container type elements have Ans. (d) There are two classes of color change on
uniform padding, margin, font, color, and alignment. mouse hover. The first is the w3 hover color class.
5. Which of the following is not included in the This happens when the mouse hovers over it. Class
framework– Sets the background color of an element. The second
(a) font size class is W3 Hover Text, which sets the text color
(b) CSS reset when the mouse is hovered over. That is, to set the
(c) button style background color when the mouse is hovered over an
(d) forms element, the W3 hover color class is used in W3.CSS.

M2R5 98 YCT
10. When creating a website with W3.CSS, there is 15. The suitable class for mono spaced font is–
no need for.............. (a) W3-Code
(a) JavaScript (b) W3-Quotes
(b) HTML (c) W3-Container
(d) W3-Panel
(c) W3.CSS Properties
(d) W3.CSS Attributes Ans.(a) W3-Code class is used to display the code in
readable mono spaced font.
Ans.(a) HTML, W3.CSS properties and W3.CSS
16. What is the default font size in W3.CSS?
attributes are required when creating a website with
(a) 10Px
W3.CSS. Designing a website with W3.CSS does not (b) 15Px
require JavaScript. (c) 20Px
11. W3.CSS can– (d) 25Px
(a) Speeding up and simplifying web development Ans. (b) The default font size in W3.CSS is 15PX.
(b) Slowing down web development There are eight classes in W3.CSS fonts which are
(c) Making web development complicated used to set font size and font styling. These eight
(d) None of the above classes are-W3 tiny, W3-small, w3-medium, w3-large,
w3xlarge, w3xxlarge, w3-xxx large, w3-jumbo.
Ans.(a) W3.CSS is One of the most used CSS
frameworks for built-in responsive websites. It is 17. How much padding does the W3-Container class
add to the left and right sides of an HTML
based on standard CSS. It makes web development
element?
faster and simpler. (a) 10Px
12. .............. class can handle all types of lists– (b) 15Px
(a) w3-List (c) 16Px
(b) w3-items (d) 20Px
(c) w3-ul Ans.(c) The W3-container class adds 16PX padding to
(d) w3-collections the right and left sides of an HTML element. The W3-
Container class is used to style the container type
Ans.(c) The simplest way to create a W3.CSS list is to
element.
create an ordered list and then add the W3-list class to
the "ul" tag. This makes a very basic list. all types of18. To Limit a responsive image to a maximum size,
It is used–
lists can be displayed using w3-ul classes.
(a) max-width property
13. ........... is a modern CSS framework with built-in (b) min width property
responsiveness– (c) high-width property
(a) Java (d) low-width property
(b) Perl Ans. (a) The max-width property is used to limit a
(c) W3.CSS responsive image to a maximum size.
(d) Python 19. W3-CSS is developed by?
Ans.(d) W3.CSS is a modern CSS framework with (a) http//.in
built-in responsiveness. It is based on plain CSS, (b) W3schools.com
(c) www.com
which makes it fast. It does not use any additional
(d) none of these
libraries.
Ans. (b) W3.CSS is a CSS developed by
14. The class is used for all types of alerts–
w3schools.com. It supports responsive mobile design
(a) W3-Notes by default.
(b) W3-Quotes
20. The default line spacing in W3-CSS is–
(c) W3-Container (a) single
(d) W3-Panel
(b) 1.3
Ans.(c) W3.CSS Panels are a type of container and in (c) 1.7
addition, panels add 16PX top and bottom margins (d) 1.5
and also add 16PX padding on the left and right sides. Ans.(d) The default line spacing in W3.CSS is 1.5. It
It is used to display notes, quotes, alerts, cards etc. provides one letter spacing.

M2R5 99 YCT
 6 JAVASCRIPT AND ANGULAR JS

6.1 Introduction: • JavaScript has rich user interface designs like sliders.
JavaScript is called JS in programming language. It Angular JS is a full data-driven approach to
is an interpreted programming language with object developing web applications.
oriented capabilities. It is also called dynamic computer • JavaScript takes less time when fixing bugs and errors
programming language. JavaScript programs are called on a large scale. Angular JS takes more time than
scripts. By using this, different types of things can be JavaScript.
applied in the web page. Its scripts can be provided and • JavaScript gives us immediate response while running
executed as plain text. the application on the browser and Angular JS does not
JavaScript is one of the three main technologies of have this feature.
the World Wide Web, after HTML and CSS. All the
major websites use it which are available on the Internet 6.3 Client Side Scripting language:
because it enables interactive web pages, hence it is used Client side scripting is used to generate a code that
more in creating web applications. JavaScript is a client- can run on a browser (client end) without requiring
side scripting language whose source code is processed server side processing. This type of script is placed
by the server rather than the client's web browser. Using inside an HTML document. It is associated with a
JavaScript, you can add HTML to a web page, as well as language that is compatible with the browser. HTML,
change the existing content and modify the page style. It CSS and JavaScript languages are used for client side but
was originally developed to add dynamic and interactive JavaScript is the most used language for client side
scripting. It has the ability to run on any browser. The
elements to the website. It is an open and cross-platform
browser downloads that code permanently and processes
which aims to provide a better experience for the user.
it without the server. Scripting is used to check a user's
Just like PHP and ASP, JavaScript code can be inserted
form for errors before additional information is required
anywhere within the HTML of a web page. Cookies can and to change the content according to user input.
be obtained and set with the help of JavaScript. It is also
used to ask questions to visitors and display messages. Client Side Scripting Languages–
6.2 Javascript and Angular JS: • HTML: It provides frame to the website and describes
Following are the differences between JavaScript the content management.
and Angular JS– • CSS: It provides a way to design graphic elements that
(i) JavaScript is a client side scripting language as well makes more attractive to the appearance of a web
as a server side scripting language for creating web application.
applications. • JavaScript: It is client side scripting essentially
Angular JS is a framework written in JavaScript designed for specific purposes but currently various
for building single page applications. JavaScript frameworks are used as server side scripting
(ii) JavaScript is a language which is used to manipulate technology.
the document object model.
Angular extends its features with other 6.3(i) Advantages and Disadvantages of
technologies like JS, HTML. Client side Scripting Language:
• JavaScript has the facility to validate user input at the Following are the major advantages of client side
browser level before submitting the page. Angular JS scripting language–
is a good technology which is used as server side. • Client side scripting language is easy to learn and
• JavaScript makes websites more interactive. Angular understand.
JS makes building applications simple and intuitive • This language is very light and very easy to apply.
from the start. • It takes less time to edit the code.
• JavaScript is a multi-dimensional and complex • The execution process of this language is quite fast. In
language whereas Angular JS is simple and efficient. this, after the script is downloaded from the server, its
• JavaScript code is generally faster and Angular JS code is executed on the user's computer through the
applications are generally slower. browser.
• JavaScript does not support Dependency injection and • Client side scripting makes easler to complex tasks.
Angular JS does not support data binding and • It does not require any server to execute the code.
Dependency injection. • It takes less time to execute the code.
M2R5 100 YCT
• In this language the user gets immediate response. 6.4 Variables in Javascript:
Following are the major disadvantages of client side A variable is a type of container in which you can
scripting language– store values and the values are executed when the
• The biggest disadvantage of client side scripting is that program is run and the output is displayed. In JavaScript,
its code can be seen by anyone, due to which it is not variables are defined by var.
secure. To define variables in JavaScript, you can use
letters, numbers, underscore (_) or doller ($). Variables
• In this, it is difficult to transfer sensitive data over the
cannot be initialized with numbers. Keywords cannot be
internet.
used for variables and the name of the variable is case
• Client side scripting depends on the user's browser. If sensitive i.e. both Num and num are different. There is
for some reason the browser malfunctions, it will no need to define the datatype in JavaScript, it
affect it. automatically recognizes the data type of the variable.
• Debugging is difficult in this. There are two types of variables in JavaScript. Both
• It is quite difficult to maintain it. of these variables are used in different situations. Local
• It has less functions than server side scripting variables can be used only in any function and global
language. variables can be accessed from any function.
Example– Var x = 30;
Var is the keyword that tells JavaScript that you are
To add Javascript in HTML Page–The below
declaring a variable. The name of that variable is x.
example shows how JavaScript is used to write text on a = (equal to) is an operator that indicates JavaScript
web page. next upcoming value. 30 is the value of the variable to
store.
Example:
<html> Local Variables– Local variables are those variables
<body> whose scope is limited to any function. In such a
<script type = "text/javascript"> situation the variables are created inside a function and
document.write ("My First Javascript"); they work only in that function. You cannot use these
variables outside the function, when these variables are
</script>
created in a block or function they work only in what is
</body>
called their scope. An undefined variable error is
</html> generated if you try to access local variables outside their
The example given below shows how to add HTML scope.
tags in JavaScript– Example:
<html> <!DOCTYPE html>
<body> <html>
<script type = "text/javascript"> <head>
document.write ("<h1> My First Javascript </h1>"); <title> Local variable Example </title>
</script> </head>
</body> <body>
</html> <h2> Local variable Example </h2>
To add a JavaScript to an HTML page you can use <script>
var my var = "Local"; //Declare a local variable
the <script> tag, inside the <script> tag you can use the
docment.write (my var);
type attribute to define the scripting language. </script>
<script type = "text/javascript"> and </script> </body>
defines where the JavaScript starts and ends. </html>
Global Variables– Global variables are variables
<html> whose scope is in the entire program, so in such a
<body> situation, the variables are created at the beginning of the
<script type="text/javascript">..... program and you can use them anywhere in the entire
</script> program. The scope of such variables is the entire
</body> program.
</html> Example:
The document.write command is a JavaScript <!DOCTYPE html>
<html>
command to write output to a page.
<head>
By inputting the document.write command between
<title> Global varible Example </title>
the <script> and </script> tags, the browser recognizes it. <body>
Executes Javascript commands and code lines. <h2> Global variable Example </h2>
M2R5 101 YCT
 <script> let age = 46 ;
var data = 400 ; || global variable function a ( ) { let Address = Banglore ;
document.writeln (data); //printing variable values
} document.write (name + "<br>">) ;
function b ( ) {
document.write (age + "<br>") ;
document.write In (data);
} document.write (address + "<br>") ;
a ( ); //calling Java script function //Declaring constant
b ( ); const PI = 3.14 ;
</script> //Printing constant value
</body> document.write (PI); //3.14
</html> </script>
</body>
Loosely Type Variables – JavaScript variables are
</head>
of loose type, that is, no data type is required to declare
it. You can specify any literal value to a variable. String, </html>
Integer, Float, Boolean etc.
Example: 6.5 Data Type in Javascript:
<!DOCTYPE html> There are two types of data types in Javascript–
<html> <body> (i) Primitive Data Type
<h1> Javascript Loosely-typed variables </h1> (ii) Non-primitive (reference) Data Type
<p id = "d1"> </p>
<script> (i) Primitive Data Type: There are five types in
var basket = 5; //Number value JavaScript – 1.String, 2. Number, 3. Boolean, 4. Null, 5.
basket = 7.33; //decimal value Underfined.
basket = null; //null value 1. String: Represents a sequence of string characters
basket = False; //boolean value like– "New", "Hello"
basket = 'basket' ; // string value 2. Number: Represents Number. Numeric Values
document.get Element by Id("d1".innerHTML= like– 200.
two); 3. Boolean: Represents Boolean values whether these
</script> values are False or True.
</body> 4. Null: Represents Null values and checks that there is
</html> no value.
5.Underfined: It represents underfined values.
Let & Const Keyword– Let keyword is also like
var but through it we can create block Scoped Variable. Example:
let variable can be updated but cannot be redeclared <!DOCTYPE html>
repeatedly in the same block like var, but the same
<html>
variable can be declared in different blocks.
If the value of a variable is to always be kept <head>
constant, that is, it is not to be changed, then in such a <title> primitive data type example </title>
situation constant variable is used. In this, once the value </head>
is assigned, it cannot be updated again. It cannot be re- <body>
declared. While declaring a const variable it is necessary <h2> primitive data type example </h2>
to assign a value to it. Const variable is also block scope, <p id ="demo" </p>
that is, it can be accessed only within the block within <script type ="text/javascript">
which it is declared. document.get element
By ID ("demo").inner HTML
Example:
type "John" + "<br"> +
<!DOCTYPE html>
type 3.14 + "<br>" + type of true + "<br>" +
<html>
type of false ;
<head>
</script>
<title> Declaring variables with let and const
</body>
keywords in Javascript </title>
</html>
</head>
Object: Object represents an instance through which
<body>
we can use numbers.
<script> //Declaring variables Reg Exp–Reg Exp– Represents a regular
let name ="Smith" ; expression.
M2R5 102 YCT
 Array: Array represents a group of similar values. var d=-5.10;//Negative floating-point Numeric value
Example: document.write ("value of a is" + a +"<br/>");
<!DOCTYPE html> document.write ("value of b is" + b + "<br/>");
<html> document.write ("value of d is" + d + "<br/>");
<head> document.write ("value of c is" + c + "<br/>");
<title> Non-primitive Data Type Example </title> </script>
</head> Output:
<body> value of a is 5
<h2> Non-primitive data type example </h2> value of b is 5.1
<pid = "demo"> </p> value of c is -5
<script type = "text/javas script">
var my var = 100 ; Boolean data type– Boolean data type can have two
my var = true ; values TRUE and FALSE in Javascript and is used in
my var underfined ; conditional statements in the program. Conditional
my var = "steve" ; statements like– if else, while, do while, switch
alert (my var); Example:
</script> var yes = true;
</body> var no = false;
</html> <script type = "text/javascript">
var a = true;
String data type– Javascript string can be single var b = false;
character or character sequence. In JavaScript, strings </script>
can always be written in single quotes (' ') or (" ").
For example; Single quotes "double quote" Null: Null is a special value in JavaScript, which
Example: represents empty and unknown value.
let string1 = 'Hi this is single quote string"; We assign Null to a variable and there is no value in
let string2 = "Hi this is double quote string"; that variable. Null means no value.
Example:
Operators are used in Javascript to concatenate two var new var = null;
strings together. alert (new var);
Example:
let string1 = "javascript"; You can see in the above example that we have
let string2 = string1 + "news string"; assigned null to the variable of new var name. Which
//output:javascript newstring means we have assigned null to the variable but it does
<script type = "text/javascript"> not contain any value.
var strl = 'Hello'; //single quoted string Example:
var str2 = "world"; //Double quoted string <script type = "text/java script">
var str3 = " "; // Empty string var a = null;
document.write ("value of strl:" + strl + "<br/>"); document.write (a = = undefined);
document.write ("value of str2:" + str2 + "<br/>"); </script>
document.write ("value of str3:" + str3 + "<br/>"); Output:
</script> true
Output: var new var = null;
value of strl : Hello if (new var) {
value of str2 : World alert ("new var is not null");}
value of str3 : else {
alert ("new var is null");}
Number data type– Javascript number data type
represents integer, float, hexadecimal, octal number Undefined data type–Undefined data type in
value. The integral value can be positive or negative. JavaScript represents a value not assigned to a variable.
Example: This means that the variable has been declared but no
var int = 50; // integer value has been assigned to it. Due to that the value of
var float = 50.5 // float value that variable is called undefined.
var hex = Oxfff; Undefined is a primitive value. Variable and object
var octal = O40; has undefined value when we use it before assigning the
<script type = "text/java script"> value.
var a = 5; //Integer Numeric value Example:
var b = 5.10; //floating-point Numeric value var new var;
var c = -5; //Negative Integer Numeric value alert (new var);
M2R5 103 YCT
 You can see in the above example that if we have (i) Arithmetic Operators– Arithmetic operators
not assigned any value to the variable of new var name, are used to perform arithmetic calculations. It takes the
then it will undefined. form of operands (values/variables) and returns a single
Example: value. +, – *, /, % ++, – – operators are called arithmetic
function sum (value1, value2) operators. If two numeric values are x = 10, y = 5 then,
{ Operators Description Example Output
var result = value1 + value2; + Addition x+y 15
}
var result = sum (5, 5); – Subtraction x–y 5
alert (result); //undefined * Multiplication x*y 50
In the above example you can see that in the sum( ) / Division x/y 2
function we have passed (5, 5) value to the function, but % Modulus x%y 0
in the function If we do not return that value operation
++ Increment ×++ 11
then it will return us undefined value in the result.
(increase
Non-primitive Data Type– Non-primitive Data
operand
Type object, can be Array and RegExp, object
value by
Represents the instance through which we can use
one)
Numbers.
Array is used to represent values of the same type, –– Decrement ×–– 9
whereas Reg. Exp represents a regular expression. (Decrease
Object: It represents an instance through which we operand
can use numbers. value by
Reg Exp–Reg Exp represents a regular expression. one)
Array–Array represents a group of similar values. Example:
Example: <html>
<html> <head>
<head> <script type ="text/java script"> <!–
<title> Non-Primitive Data Type Example </title> var a = 33;
</head> var b = 10;
<body> var link break ="br/>";
<h2> Non-primitive Data Type Example </h2> document.write ("a + b =");
<p id = "demo"> </p> result = a+b;
<script type = "text/java script"> document.write (result);
var my var = 100; document.write (line break);
my var = true; document.write ("a-b=");
my var = null; result = a–b;
my var = undefined; document.write (result);
my var = "steve"; document.write(line break);
alert (my var); document.write("a/b=");
</script> result = a/b;
</body> document.write (result);
</html> document.write (line break);
6.6 Operators in Javascript: document.write ("a%b=");
Operator is a special symbol in JavaScript used for result = a%b;
manipulating variables values which is used for docment.write (result);
manipulating JS variables values. They are used only to document.write (line break);
perform operations on operands. document write ("a+b+c=");
There are following types of operators in result = a+b+c;
JavaScript– document.write (result);
i. arithmetic operator
document.write (line break);
ii. assignment operators
iii. Comparison Operator / Relational Operator a = + + a;
iv. Logical operator document.write ("++a=");
v. String operator result = ++a;
vi. Bitwise operator document.write (result);
vii. Special Operator document.write (line break);
viii. Type of operator b+-b;
M2R5 104 YCT
 document.write ("-b="); Example:
result = --b; <html>
document.write (result); <head>
document.write (line break); <script type = "text/javascript"> <!...
//....> var a = 33;
</script> var b = 10;
set the variables to different values and then try... var line break = "<br/>";
</body> document.write ("value of a = > (a = b) = >");
</html> result = (a + b);
Output: document.write (result);
a+b = 43 document.write (line break);
a-b = 23 document.write ("Value of a = > (a + b = b) = >");
a/b = 3.3 result = (a + = b);
a%b = 3 document.write (result);
a+b+c = 43 Test document.write (line break);
++ a = 35 document.write (line break);
..b = 8 document.write ("value of a = > (a – = b) = >");
Set the variables to different values and then try.... result = (a-=b);
document.write (result);
(ii) Assignment Operators– This operator is used document.write (line break);
to assign values to variables. = is assign operator which docment.write ("value of a => (a*=b)=>");
is used to assign the value of variable x. It assigns a result = (a*=b);
value to the left operand. Equals Controller (=) is used to document.write (result);
assign the value, = , + = , – =, * = , % = operators are document.write (line break);
called assignment operators.
document.write ("value of a => (a/=b)=>");
Taking x = 10, y = 5.
result = (a/=b);
Operators Description Example Output
document.write (result);
Assigns one document.write (line break);
operand to x=y document.write ("value of a = > (a%=b)= >");
= another. x=y x=5 result = (a%=b);
Sum of x=x+y document.write (result)
operands and x = 10+5 document.write (line break);
+= finally assign x+=y x = 15 //-->
to the left </script>
operand </body>
Subtraction x=x–y </html>
and assign the x =10 – 5 Output:
–= left operand in x–=y x=5 value of a = > (a = b) = > 10
the end value of a = > (a + b) = > 20
Multiplication x=x*y value of a = > (a = b) = > 10
of operands value of a = > (a * = b) = > 100
x =10 × 5 value of a = > (a / = b) = > 10
*= and finally x*=y x = 50 value of a = > (a % = b) = > 0
Assigns to the Conditional Operator (?:)
left operand. The conditional operator first evaluates an
Division of the expression for a true or false value and then executes one
operand and x=x*y of the two given statements depending upon the result of
/= finally assigns x*=y x = 10×5 the evaluation.
to the left x = 50 Sr.No Operator and Description
operand 1
Modulus of the ?: (conditional)
operand and x=x%y If condition is true? Then value x: otherwise value y
%= finally assigns x%=y x =10 %5 Example:
it to the left x=0 <html>
operand. <body>
<script type = "text/javascript"> <!--
M2R5 105 YCT
 var a = 10; Example:
var b = 20; <html>
var link break = "<br/>"; <head>
document.write ("((a > b) ? 100 : 200) = >"); <script type ="text/javascript"> <!--
result = (a > b)? 100:200; var a = 10;
document.write (result);
var b = 20;
document.write (line break);
var line break ="<br/>";
document.write ("((a < b) ? 100 : 200) = >");
result = (a < b) ? 100 : 200; document.write ("(a= =b)=>");
document.write (result); result = (a= =b);
document.write (line break); document.write (result);
//--> document.write (line break);
</script> docment.write ("(a<b)=>");
<p> set the variables to different values and result = (a<b);
different operators and then try... document.write (result);
</p> document.write (line break);
</body> document.write ("(a>b)=>");
</html> result = (a>b);
Output:
document.write (line break);
((a>b)? 100:200) = > 200
((a<b)? 100:200) = > 100 docment.write ("(a! = b)=>");
Set the variables to different values and different result = (a!=b);
operators and then try... document.write (result);
document.write (line break);
(iii) Comparison Operators– It determines the two document.write ("(a>=b)=>">;
operands that satisfy the given condition. It compares result = (a> = b);
two values then returns a Boolean value True or False. = document.write (result);
=, = = = ! =, ! = =, <, >, > =, < = operators are called document.write (line break);
comparison operators. document.write("(a<=b=)=>");
result = (a<=b);
Operator Name Example Result document.write (line break);
== equal x==y True; If x is //-->
equal to y. </script>
True: If x is </body>
equal to y </html>
=== same x===y and they Output:
belong to the
(a= =b) = > false
same type.
(a < b) = > true
True; If x is (a > b) = > false
!= equal not x! = y not equal to
(a! = b) = > true
y.
(a > = b) = > false
True: If y is a < = b) = > true
not equal or
the variables (iv) Special Logical Operators– Logical operators
!== same not x!==y are generally used with Boolean values hence they are
are not of the
same type. called logical. These can be applied to any type of values
&&, ||, ! are called logical operator.
True; If x is
< less than x<y less than y.
Operator Name Example Result
greater True; If x is
True; If both
> than x>y greater than
y. && AND x && y x and y are
true.
greater or True: If x is
>= equal to x>=y greater than || OR x || y True; if x or
or equal to y. y both are
less or True; If x is correct
<= equal to x<=y less than or ! NOT !x True; If x is
equal to y. not true.

M2R5 106 YCT

Example: (vi) Bitwise Operators– Bitwise operators are used
<html> to evaluate and perform bitwise expressions. &, |, ^, ∼,
<body> <<, >>, >>> operators are called bitwise operators.
<script type = text/javascript"> <! Sign Operator Description
var a = true;
& Bitwise AND Returns bitwise AND
var b = false; operation for two given
var line break ="<br/>"; operands.
document.write("(a&&b)=>");
result = (a&&b); | Bitwise OR Returns bitwise OR
document.write (result); operation for two given
document.write (line break); operands.
document.write ("(a||b)=>"); ^ Bitwise XOR Bitwise XOR operation for
result = (a||b); two given operands
document.write (result); ∼ Bitwise NOT Bitwise return, no
document.write (line break); operation for given
document.write ("!(a&&b)=>"); operand
result =(!(a&&b)); << Bitwise Shift Left shift of given operand
document.write (result); Left
documet.write (result);
>> Bitwise Shift Right shift of given
document.write (line break);
Right operand
//-->
</script> >>> Bitwise Return, right shift without
<p> set the variables to different values and assigned shift symbol of given operands.
different operators and then try... Right
</p> Bitwise AND (&)– It accepts two operands. If both
</body> bits are set to 1,
</html> A B A & B (Output)
(v) String Operators– + and × = operators have 0 0 0
been designed for strings in JavaScript, which are used 0 1 0
for concatenation assignment respectively.
Operator Name Example Result 1 0 0
1 1 1
Concatenation
+ Concatenation Str1+Str2 of Strl and Bitwise OR (|)– It accepts two operands. If any
Str2 operand is set to 1 and 0 in any other case then bitwise
OR returns 1.
Concatenation str1 + = Connects Str2 A B A | B (Output)
x= assignment str2 to Strl 0 0 0
0 1 1
Example: 1 0 1
<!DOCTYPE HTML> 1 1 1
<html>
Bitwise XOR (^) – It concatenates two operands. If
<body>
both operands are different and 0 in any other case.
<head>
Returns bitwise XOR (^).
<title> javascript </title>
</head> A B A ^ B (Output)
<body> 0 0 0
<h2> string operators </h2> 0 1 1
<p id ="S1"> </p> 1 0 1
<script>
1 1 0
var text 1 ="John";
Bitwise NOT (~)– It is a unary operator that accepts
var text 2 ="Smith";
a single operand. Bitwise NOT flips the bits making
document.get Element By Id ("S1").inner HTML
0→1 become 1→0.
= txt 1 + " " + txt 2;
A (~ A)
</script>
</body> 0 1
</head> 1 0
</html>
M2R5 107 YCT
 Left Shift (<<)– It accepts two operands. The first (a / b) = > 3
operator specifies the number and the second operator (a ^ b) = > 1
specifies the number of bits to shift. Each bit is shifted to (∼ b) = > –4
the left and 0 bits are added to the right. The extra bits on (a < < b) = >16
the left are discarded. (a > > b) = > 0
Right Shift (>>)– It accepts two operands. The first set the variables to different values and different
operator specifies the number and the second operator operators and then try...
specifies the number of bits to shift. Each bit is shifted to
the right and the extra bit is left. The right shift bits that
(vii) Operators– Delete, instance of, type of zero,
are added from the left depend on the symbol of the
New (?) are known as special operators in JavaScript and
number (i.e. 0 for positive and 0 for negative)
these operators perform different functions as per their
Unsigned Right Shift (>>>)– It accepts two name.
operands. The first operand specifies the number and the
second operand specifies the number of bits to shift. Operator Description
Each bit is shifted to the right and extra bits are shifted to (?:) Condition operator returns a value
the left. It is shifted to the right as the 0 bit is added to based on a condition like-if else
the left. , The comma operator is used to
Example: evaluate multiple expressions as a
<html> single expression.
<body> delete The delete operator removes a
<script type ="text/javascript"> <!... property from the object.
var a = 2;// Bit presentation 10 in In operator checks whether an object
var b = 3;// Bit presentation 11 has the given property.
var line break = "<br/>"; instance of Checks whether the object is an
document.write ("a & b) = >"); instance of the given type.
result = (a & b); new Creates an object.
document.write (result); type of Checks the type of object. (String,
document.write (line break); number, Boolean, Object, function,
document.write ("(a/b) = >"); Undefined)
result = (a/b); void It displays the return value of the
document.write (result); expression.
document.write (line break); yield Checks what is returned by iterator
document.write ("(a ^ b) = >); to the generator.
result = (a ^ b);
document.write (result); (viii) Type of Operator– This operator is very helpful
document.write (line break); for debugging. The data type of any variable can be
document.write ("(∼b) = >); determined using this operator. After writing type of, the
result = (∼b); value or variable is written next to it whose data type has
document.write (result); to be found.
document.write (line break); Like– str ="hello world"
document.write ("a < < b) = >"); document.write (type of str);
result = (a < < b); Example:
document.write (result); <html>
document.write (line break); <body>
document.write ("(a > > b) = >"); <script>
result = (a > > b) ; var a = 10;
document.write (result); var b = "string";
document.write (line break); var line break = "<br/>";
//...> resutl = (type of b = = "string" ? "B is string";
</script> "B is Numeric");
<p> set the variables to different values and document.write ("Result = >");
different operators and then try...</p> document.write (result);
</body> document.write (line break);
</html> result = (tipe of a ="string "?" A istring":A is
(a & b) = > 2 numeric");
M2R5 108 YCT
 document.write ("Result = >"); <script>
document.write (result); var = 5, b = 3;
document.write (line break); if (a < b) {
</script> document.write ("a is less than b");
</body> }
else {
</html>
document.write ("a is greater than b");
6.7 Conditional Statement in Javascript: }
Conditional statements are used to determine the </script>
flow of execution based on various conditions. A </body>
conditional statement is used. You can execute the first </html>
statement if a condition is true and if the condition is
false then the second statement is executed. (iii) Else if Statement: With its help you can check
multiple conditions.
6.7(i) Different types of conditional statement: Syntax:
There are mainly four types of conditional if (condition){
statements in JavaScript– // When condition 1 is true then the code will
(i) If statement: when the condition is true then the execute.
code is executed. } else {
Syntax: if (condition 2)
if (condition){ // When condition is false and condition 2 is true
// When the condition is true then the code will Then the code will execute.
execute. } else {
} // execute code when all conditions are false.
Example: }
<!DOCTYPE html> Example:
<html> <!DOCTYPE html>
<body> <html>
<p> javascript conditional statements </p> <body>
<p> if statement </p> <p> java script conditional statements </p>
<p id ="One"> </p> <p> else if statement </p>
<script> <p id = "One"> </p>
var a = 5, b = 7; <script>
if (a < b){ var a = 5, b = 3;
document.write ("a is less than b"); if (a < b){
} document.write ("a is less than b");
</script> }
</body> else if (a > b){
</html> document. write ("a is greater than b");
}
(ii) Else Statement: If statement code is executed else{
when the condition is true. If the condition is false then document.write ("a is equal to b");
else the code will execute. }
Syntax: </script>
if (condition){ </body>
// When the condition is true then the code will </html>
execute.
} elese {
(iv) Switch Statement: With the help of Switch
// When the condition is false then the code will be
Statement you can switch from many code blocks to one
executed.
code block.
Example:
Syntax:
<!DOCTYPE html>
<html> if (condition){
<body> switch (expression){
<p> java script conditional statements </p> case 1:
<p> else statement </p> //code block
<p id = "One"> </p> break;
M2R5 109 YCT
 case 2: var text;
//code block switch (new Date ( ).get Day ( )){
break; case 1:
case3: case 2:
//code block case 3:
break; case 4:
default:
case 5:
//code block
text ="it is working day";
}
break;
After that the value of the expression is compared case 0:
with the value of the case. If the value of the expression case 6:
matches the value of any case then that code will be text ="It is Weekend";
executed. break;
Here you exit the execution through break keyword. }
If no case matches then default the code block containing
the keyword will be executed. document.get Element By ID ("one").inner
Example: HTML = text;
<!DOCTYPE html> </script>
<html> </body>
<body> </html>
<p> javascript conditional statement </p>
<p> switch statement </p> Here case 1,2,3,4 and 5 have the same code block
<p id ="One"> </p> and case 0, 6 both have the same code block.
<script> If you have not used break keyword then the
var num; statement which is true will not stop the execution.
switch (32){ Where there is break Keyword the same statement will
case 28: be true.
num ="This is 28"; Example:
break; <!DOCTYPE html>
case 32: <html>
num ="This is 32"; <body>
break; <p> switch statement </p>
case 56: <p id ="one"> </p>
num ="This is 65";
<script>
break;
var num;
default:
num ="Number is not valid"; switch (32){
} case 28:
document.get Element By ID"(one)".inner num ="This is 28";
HTML = num; break;
</script> case 32:
</body> num ="This is 32";
</html> case 65;
num ="This is 65";
Same Code Blocks: Sometimes there is a need to break;
use the same code block for different cases, then you can
default:
use it can be defined like this.
Example: num ="Number is not valid";
<!DOCTYPE html> }
<html> document.get Element By ID ("one")
<body> inner HTML = num;
<p> switch statement </p> </script>
<p id ="one"> </p> </body>
<script> </html>
M2R5 110 YCT
6.7(ii) To Display pop-up Message box: //print message when if user clicks ok
A popup is a small second window that is generated document.write ("user wants to buy the book");
by JavaScript inside the current window. These are also }
called Popup boxes. Three types of work can be done </script>
through Popup. </body>
• You can display any alert. </html>
• You can confirm with the user before doing any work. In the above example, if the user selects Yes in the
• You can take input from the user when input is confirm box, then the web page message is printed given
required. in the if statement. If the user clicks on Ok, the message
There are 3 types of popups in JavaScript according is shown otherwise nothing is shown.
to their function. (iii) Prompt Dialog Box: If you want to take any
(i) Alert Dialog Box: Alert box is used to display input from the user then you can use prompt dialog box.
important messages to the user. When you want the user The prompt dialog box contains a text-box and an Ok
to read your message, in such a situation you can use button. The user inputs values in the text box. To prompt
alert box. a dialog box you call the prompt method. In this method
This box removes focus from the current window 2 parameters are passed. The first parameters are the
and only the message is displayed. Additionally, there is label, which displays what value to enter in the text box.
an Ok button in the alert box, clicking on which removes The default value of the text box is passed in other
the alert box. To generate an alert dialog box in parameters.
JavaScript, you can call the alert function. In this Example:
function, you write the message which you want to <html>
display as an argument. <head>
Example: <title> prompt box demo </title>
<!DOCTYPE html> </head>
<html> <body>
<body> <script type ="text/javascript">
<html> //creating a prompt dialog
<head> var age = prompt ("Enter your age",18);
<title> Alert box demo </title> document.write ("Age is:", age);
</head> </script>
<body> </body>
<script type ="text/java script"> </html>
alert ("This is an alert box"); The value given by the user as input will be printed
</script> with the appropriate message on clicking Ok.
</body>
</html>
6.8 Javascript Events:
(ii) Confirm Dialog Box: Confirm dialog box is With the help of JavaScript events, you can design
used to confirm about a task from the browser. This is a your webpage in such a way that your webpage can
respond to user activity and make necessary changes
small window with Yes and No buttons. Out of which
accordingly. Using events make your webpage dynamic
the Yes button indicates the user's consent and the No
and interactive. Events are executed upon user action.
button indicates that the user does not want to proceed. Most events are user generated. Generally, our created
To generate a confirm dialog box in JavaScript, you webpages are loaded completely in one time. Meaning,
call the confirm method. In this method you pass a there is no part of the webpage that is yet to be loaded.
message like a comment, it asks for confirmation from But it can happen. That you want to load some
the user. Like as– you ask the user, do you want buy a information according to the user, such as when the user
book? clicks on a link or selects an item from the menu, the
Example: page changes accordingly. You can do this with the help
<html> of JavaScript events. You can use each event as an
<head> attribute in HTML and handle all events related to that
<title> confirm dialog demo </title> tag. For example, you can use on click event ( ) related to
</head> the button. As soon as the user clicks on the button, user
can take any action.
<body>
For example, if you add an alert box to a webpage, it
<script type ="text/javascript">
displays as soon as the webpage loads. But if you want
//setting confirm box that alert box to be displayed when the user clicks on a
if (confirm ("Do you want to buy this book?")) button or link, then for this you will use JavaScript
{ events.
M2R5 111 YCT
 There are many types of HTML events, also known This event is
as JavaScript events. Oncut clipboard occured when the
Window Event: Window events work for window text of an element
objects. This is written for body tag. On load, On unload, is cut.
On resize, On message, On before print, On after print When text is
etc. are window events. Ondblclic mouse double clicked than
Form Event: If any activity has to be done on the these event
form or any trigger has to be activated, then form events activated.
are written and it is written inside the form tag. Some This event is
examples of form events are On blur, On change, Ondurationchange media activated when the
Onsubmit. duration of the
Mouse Events: The events that activates on mouse video or audio
click are called mouse events. On click, On blink, On changes.
mouse down, On mouse up, On mouse move etc. are This event is
mouse events. Onended media occured when the
Keyboard Events: Events that activate on keyboard video or audio
keys are called keyboard events. On key down, On key reaches the end.
up, on mouse move are keyboard events like up, On key
This event is
press etc. activated when an
Onerror form
Media Events: Events related to media elements external file fails
like <audio>, <video> <embed> tag are called media to load.
events. On abort, On canplay, On canplay through, On
cue change, On play, On progress. This event is
Onfocusin form activated when
Clipboard Events: These are the events which
element is focused.
work on clipboard actions like– Cut, Copy, Paste. On
copy, on paste etc are clipboard events. This event is
Onfocusout form activated when the
focus of element is
6.8(i) Important Events: lost.
Event Type Description
The event is
This event Oninput form activated when the
Onbeforeunload document activates when the <input>
document is about content/text is
to be unloaded. changed.
focus; loses then This event is
Onblur form this event gets activated if the
activated. form is submitted
This event occurs Oninvalid form by giving some
Oncanplay media when the video or invalid content on
audio is ready to the <input>
start. element of the
form.
This event
Onchange form activates when a This event is
value is changed Onkeydown keyboard activated when any
on the element. key is pressed
from keyboard.
This event is
Onclick mouse activated when the This event is
element is clicked. Onkeypress keyboard activated when any
key from the
This event is alphabets numeric
Oncontextmenu mouse activated when the special symbols of
element is right the keyboard is
clicked. pressed.
This event is This event is
Oncopy clipboard activated when the Onkeyup Keyboard activated when the
text of an element keyboard key is
is copied. released.

M2R5 112 YCT

 This event is whenever the
activated when all video or audio
Onload Document the external files stops due to
are loaded on the buffering.
web page given in This event is
the document. activated when
This event is Onprogress media video or audio is in
Onloadeddata media activated when the progress or
current frame of downloading.
video or audio is Whenever the form
loaded. Onreset form is reset then this
This event is event gets
Onloadedstart media activated when the activated.
video or audio This event is
starts loading. Onresize Document activated
This event is whenever the
Onmousedown mouse activated when any browsing window
mouse button is is resized.
pressed on the This event activates
element. Onscroll Document whenever scrolling
This event is is done.
Onmouseenter mouse activated when the This event gets
mouse cursor is activated when
hovered over the Onsearch form Enter or × button is
element. clicked after typing
This event is something is
activated when the <input type =
On mouse leave mouse
mouse cursor on "Search-in-hindi">
the element is left This event is
or removed. activated when the
When element the Onseeked media video or audio
cursor is moved reaches the end by
Onmousemove mouse
then this event seeking/pushing it
becomes active. forward or
backward.
When on element
or its child This event is
elements when activated when the
Onmouseout mouse
mouse cursor on is Onseeking media video/audio starts
given out then this seeking/pushing
event is activated. forward or
This event is backward.
activated when any This event is
Onmouseup mouse mouse button on Onselect form activated
the element is whenever the
released. content of <input>
Event activated and <text area> is
Onpaste clip board when an element's selected.
text is cut or When the form is
copied and pasted. Onsubmit form submitted then this
This event activates event would be
Onpause clip board whenever the video activated.
or audio is paused. This event is
This event Ontimeupdate media activated when the
activates whenever audio/video/key
video or audio is play back position
Onplaying media
played and changes.

M2R5 113 YCT

 This event is OnSubmit Event– OnSubmit is an event that occurs
Ononline activated when the when you try to submit a form. You can put your form
browser becomes validation against this event type.
online. The following example shows how to use onSubmit.
This event activates Here we are calling a validate function ( ) before
Onoffline when the browser submitting the form data to the webserver. If validate
is offline. function ( ) returns true then the form will be submitted,
This event is otherwise it will not submit the data.
activated when the <html>
Onvolumechange media volume of the <head>
video/audio is <script type ="text/javascript"> <!....
changed or muted. function validation ( ){
This event is all validation goes here
activated when the return either true of false
Onwaiting media video/audio pauses ................
due to buffering of </script>
the next frame. </head>
This event activates <body>
when the mouse <form method = "POST" action = "t.cgi"
Onwheel mouse scrolls, the up or onsubmit="return validate ( )">
down button, or the <input type =submit" value = "submit"/>
laptop's touchpad </form>
zooms in or out. </body>
6.8(ii) HTML Events: </html>
JavaScript uses events to provide a dynamic Output:
interface to a web page. Any event can be used in
HTML. These events are associated with elements of the
Document Object Model (DOM).
On Click Event– This is the most commonly used
event type that occurs when a user clicks their mouse
clicks the left button. You can put your validation, alerts,
etc. against this event type. Onmouse Over and Onmouse Out– These two
Example: types of events will help you create nice effects with
<html> images or even with text. The onmouseover event is
<head> triggered when you bring your mouse over an element
<script type ="text/javascript> <!.. and the onmouseout event is triggered when you move
function say Hello ( ){ your mouse away from that element.
alert ("Hello World") <html>
} <head>
//--> <script type = "text/javascript"> <!..
</script> function over ( ) {
</head> document.write ("Mouse Over");
<body> }
<p> click the following button and see result </p> function out ( ) {
<form> document.write ("Mouse Out");
<input type ="button" onclick ="Say Hello ( )" }
//-->
value ="say Hello"/>
</script>
</form>
</head>
</body> <body>
</html> <p> Bring your mouse inside the division to see the
Output: result:</p>
<div onmouse over="over ( )" on mouse out =
"out ( )">
<h2> This is inside the division </h2>
</div>
</body>
</html>
M2R5 114 YCT
Output: Example:
<!DOCTYPE html>
<html>
<head>
<title> Event : onfocus </title>
<body>
<script type ="text/javascript">
function on focus event (color){
color.style.background ="red";
On key press–This event is activated when any }
button among the alphabets, numeric and special </script>
symbols of the keyboard is pressed. These events affect
<input type ="text" onfocus="onfocusevent (this)">
all keys except Caps Lock, Tab, Ctrl, Alt, Shift and Esc.
For example, On key press event in HTML </body>
Syntax: </head>
<Element on key press = "script code"> </html>
source code: Output:
<input type = "text">
<on key press = "func ( )">
<div id ="test"> </div>
<script type ="text/java script">
function func ( ){
alert ("you pressed key"); On Blur Event– This is managed by the On Blur
} event when the user moves the focus away from a form
</script> element or window, or as soon as an HTML element
Output: loses focus.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function blur function ( ){
On context menu– This event is activated when the var x = document.get Element by ld ("full name");
element is right clicked. x.value = x.value.to upper case ( );
For example, On context menu event in HTML }
Syntax: </script>
<Element oncontext menu ="script code"> </head>
Source code: <body>
<div on context menu ="context ( )" > Enter your name:<input type="text" id="full name"
right click on me to open context menu. </div> on blur ="blur function ( )">
<div id ="test"> </div> </body>
<script type ="text/java script"> </html>
function context ( ){ Output:
document.get Element By ID ("test").inner
HTML ="context menu is opened";
}
</script>

6.8(iii) Form Events:

A form event is occured on their event handler to On Change Event–When the state of an input
cause an option in a select box to be selected when a element changes, such as when we select an option in a
form control is received or the user modifies any form dropdown list or click on a radio button, then the On
control value. change event occurs. This event is for <input> <text
On Focus Event– This event occurs when the user area> and <select>.
focuses to an element on a web page. Focus events can Example:
be managed with the Onfocus Event Handler. <!DOCTYPE html>

M2R5 115 YCT

 <html> <head>
<head> <script>
<title> Event: On Change </title> function my function ( ) {alert ("page is loaded").
<script type ="text/javascript"> }
function on changeevent (input) {alert </script>
</head>
("you entered" + input);
<body on load ="my Function ( )">
} <h1> Hello World! </h1>
</script> </body>
<body> </html>
<form> Output:
<input type = "text" value ="10" On Change ="On
Change event (this.value)">
</body>
</head>
</html>: On Unload Event– This event is activated when the
Output: browser unloads the webpage.
Example:
<html>
<head>
<title>
HTML On unload Event Attribute
</title>
<script>
On Submit Event– This event is occured when the function yct ( ){
form document is submitted. alert ("On unload event attribute called");
Example: }
</script>
<!DOCTYPE html>
</head>
<html>
<body on unload ="yct ( )">
<body> <h1> youth competition times </h1>
<p> when you submit the form, a function is <h2> onunload Event Attribute </h2>
triggered which alert some text.</p> </body>
<form action ="/action-page.php"> </html>
<onsumbmit ="my function ()"> Output:
Enter name: <input type ="text" name ="fname">
<input type ="submit" value ="submit">
</form>
<script>
function my function (){
alert ("The form was submitted"); On Resize Event– This event is activated when the
} size of the web page is changed in the browser.
</script> Example:
</body> <!DOCTYPE html>
</html> <html>
Output: <body on resize ="my function ( )">
<p>Try to resize the browser window to display the
windows height and width. </p>
<p id = "demo"> </p>
<script>
function my function ( ){
var W = window.outer width;
4. Window Events– When the page is loaded or the var h = window.outer height;
user changes the size of the browser window, in these var txt ="window size:width ="twt", height = "+h;
conditions the window event is activated. document.get EIement By ld ("demo") inner
On Load Event– On Load Event works when the HTML = txt;
webpage is completely loaded on the browser. }
Example: </script>
<!DOCTYPE html> </body>
<html> </html>
M2R5 116 YCT
Output: </head>
<body>
<form name ="my form">
Enter your name : <input type ="text"
id ="name" name ="Name">
6.9 Form validation in Javascript: <input type ="button" value ="submit" onclick
Through forms, you get information from the user, ="my function ( );">
but it is important for you to check whether the value </form>
input by the user is appropriate or not. There should </body>
always be valid values in the database, this does not </html>
create any difficulty in processing.
Output:
If the values input by the user are not appropriate
then a message is shown to the user and user is asked to
input valid values. This process validation is performed
on the server side when the user submits the form. But
JavaScript provides you the ability to perform validation
on the client side.
Steps of Javascript form validation: Whenever
The above script generates the web page given
you validate a form, first of all you check that all below. If you submit the form without entering any value
whether the values have been input in the field or not. If then you will have to display a message otherwise the
not, then a message is shown to the user to input the entered value will be displayed with welcome message.
values that all the values entered in the fields should be Validating appropriate form of input: For along
in the appropriate form like no string should be input in
with checking the empty field, you also have to check
the age field etc.
whether the value entered by the user is valid or not. For
Validating for empty fields: There are some fields example, you have a password field in the form and you
in a form which are necessary to be filled like name, cannot input less than 8 characters in it, so for this you
email etc. If you want that the user should not leave that can take a decision by comparing the validity of the
important field blank, then for this you can perform user's input with the criteria, an example of which is
validation on that field. You can check whether there are
given below.
values in that required field or not. If there is no value,
Example:
you can show any message. <html>
DOM is used for this because whether there is any <head>
value in the field or not is checked dynamically while <title> form validation demo </title>
submitting the form. You can create a function in which
<script type ="text/javascript">
you can check the value of that field through the
function my function ( )
document object. This is a very easy process but you
{
should apply it only on those fields in which it is var name = document.myform.name.value;
necessary to enter value, an example is given below. var
Example: pass = document.my form.pass.value;
<html> If (name ="")
<head> {
<title> form validation demo </title> Alert ("please enter your name!!");
<script type ="text/javascript"> }
function my function (){ {Alert ("password must be at least 8 character
var long!!")
val = document.my form.Name.value; }
If (val = =" ") Else
{ {
Document.write ("welcome", name);
Alert ("this field can not be left blank");
}
}
}
Else </script>
{ </head>
Document.write ("welcome", document.get <body>
Element by ld ("name").value); <form name ="my form">
} Enter your name:<input type ="text"
} Name ="Name"> </br>
</script> Enter your password:<input type ="password" name
M2R5 117 YCT
 ="pass"> <br/> ="comment">
<input type ="button" value ="submit" </text area> </p>
on click="my function ( );"> <p> <input type ="submit" value ="send"
</form> name = "submit"
</body> <input type ="reset">
</html>
<value ="Reset" name ="Reset">
Output:
</p>
</form>
</body>
Output:

1. To Create HTML Form– When the user clicks

on the submit button, first create a simple HTML form
which will be validated on the client side using
JavaScript. Create an HTML file named application-
form.html and save it by writing the following code.
Example:
<!DOCTYPE html>
<head>
<title> simple HTML form </title>
<link rel ="style sheet" href = style.CSS">
<script>
src ="h:/Web_Design_pub_2022/java Form Validation Script– Create a JavaScript file
script/validator.js"> </script> named validator.js and place the code inside it and then
save it at the same location. Place the code inside and
<head>
then save it at the same location where you have saved
<body> the previous HTML file.
<h1 style ="text-align.center">REGISTRATION <script>
FORM </h1> function validate form ( )
<form name ="Reg Form" action ="/submit.php" {
Onsubmit = "return validate form ( )" var name = document.form ["Reg form"] ["Name"];
method ="post"> var email = document.forms ["Reg form"]["Eamil"];
<p> Name: var phone = document.forms ["Reg form"]
</b> <input> ["subject"];
<p> Address : </b> var password = document.forms ["Reg form"]
<input type="text" size=70 name ="Address"> </p> ["Password"];
<p> E-mail Address: </b> var address = document.form ["Reg Form"]
<input type ="text" size = 70 name ="Email> </p> ["Address"];
<p> pass word : </b> <input type = "text" size = 70 if (name.value = = " ")
name ="Password"> </p> {
<p> Telephone : </b> window.alert ("Pleas enter your name.");
<input type ="text" size = 70 name. focus ( );
name = Telephone"> </p> return false;
<p> select your course : </b> }
<select type ="text" value =" " name ="subject"> if (address.value = =" ")
<option> BCA </option> {
<option> BBA </option> window.alert("please enter a valid e-mail address.");
<option> B.tech </option> email.focus ( );
<option> MBA </option> return false;
<option> MCA </option> }
<select> </p> </br> if (phone.value = =" ")
<p> <b> comments:</b> <text area name {
M2R5 118 YCT
 window.alert ("please enter your telephone margin : 50px auto θ;
number."); border-radius:5px;
phone.focus ( ); input [type ="Submit"] {
return false; font-size : 110%;
} font-weight:100;
if (password.value = =" ") background:#006dcc;
{ border-color:#016BC1;
window.alert ("pleas enter your password"); box-shadow:03px 0# 0165b6;
password.focus ( ); color:#fff;
return false; margin-top:10px;
} cursor:pointer;
If (What.selected Index <1) }
{ input[type ="submit"]:hover{
alert ("please enter your course.");
background : #0165b6;
what.focus ( );
}
return false;
input [type ="Reset"]:hover{
}
background:blue;
return true;
} </script>
Now, open the “Application Form .html” file in a
web browser.
The value of an individual form created can be
accessed and retrieved using the syntax Document.form 6.10 Angular JS:
name.fieldname value. Angular JS is an open source JavaScript MVC
Adding a style sheet to the form– Finally, create a framework for web applications or websites. It is used to
file called "style.CSS" and place the following code in it, create single page applications. Angular JS can be added
then copy it to the same location also save where you to HTML pages with <Script> tag. It extends HTML
saved the previous two files. through directives and binds data in HTML with
body { expressions– Angular JS supports many important
font-size:14px; features like Two Way Data Binding, It dependency
color:bold injection and makes it easier to create interactive web
background:# f9 f9 f9; applications. Angular JS is used to create single page
font-family: "segoe UI", "Helvetica Neue", Arial, applications. Single page application means an
sans-serif; applications in which we can move from one page to
another and do not need to refresh the page.
}
It was created in 2009 by Misko Hevery and Adom,
div {
which is now maintained by Google. The latest version
box-sizing: border–box;
of Angular JS is 1.8.x.
width:100%
border:100px solid black; 1. Core Features of Angular JS– They are as
float : left; follows–
align-content : center; • It uses the feature of data binding, which means that
align-items : center; synchronization of data between the model and view
} components is automatic.
input, select { • It uses the feature of scapes, scape are objects that
border:1px solid # CCC; reference the model. It uses a controller that connects a
padding : 10px; JavaScript function to Scape.
display : block; • Angular JS comes with many built-in services such as
width : 100% &http to handle XMLHTTP requests.
box-sizing : border-box; • It comes with routing feature, routing view switching
border-radius:2px; technology.
} • It uses the MVW (Model view whatever) design
form{ pattern and divides the application into different parts,
width : 300px; Like– Model, View, Controller, it does not use MVC
background : # fff ; in the old way, but works a little like MVVM (Model-
padding : 15px 40px 40px; –View–View–Model) and the Angular JS team calls it
border : 1px solid # CCC; MVW.
M2R5 119 YCT
• Angular JS comes with a pre-built dependency (ix) Angular JS helps in directly combining data and
injection subsystem, which makes it easier for models with expressions.
developers to build, understand, and test applications. (x) With Angular JS, developers can achieve more
2. Concepts of Angular JS– Before using Angular functionality by writing short codes.
JS, it is important to know some things which are as
follows– 4. Disadvantages of Angular JS– Angular JS
(A) Module– It is a container for different parts of comes with many features but it also has some
the Angular JS application. These different parts are shortcomings, which are as follows–
controllers, filters, services, directives, and factories. It is (i) Applications written in Angular JS are not secure.
a set of functions defined in JavaScript files and modules
(ii) If JavaScript is disabled in the application then will
that define an application into smaller and reusable
be displayed nothing except the basic page.
components. The module is case sensitive.
(B) Directives– Directives are a new attributes in (iii) Sometimes it becomes complicated to manage as
Angular JS which is used to extend HTML. It has a set of there are many ways to do the same thing and this
built-in instructions that provide functionality to your creates confusion and requires a lot of efforts.
application. Also allows you to define your own
instructions. There are several directives in Angular JS– 5. Model View Controller (MVC)– MVC is a
ng-app. ng-controller, ng-view, ng-if etc. framework designed to organize the source code of a
(C) Expressions– These are used to bind data to software application or web-based project. In this, to
HTML. Expressions in Angular JS are like JavaScript simplify the process of building a software project, the
but they are enclosed inside expressions {( )}. source code is organized into it. According to the work,
(D) Controller – The controller does the work of it is divided into three logical parts, which are as
controlling the data of Angular JS. Controller function ( ) follows–
is used for this. JavaScript object is defined using ng- Model: It contains only the data related code, such
controller. It can contain factors and variables. as the code related to submitting the user's information to
(E) Scope– Scope in Angular JS is an object that the database and the code related to accessing the
works as a link between views and controllers and scope information stored in the database as required.
enables two layers to exchange information related to the
View: How to present information to the user. The
application model.
code related to this is in the view i.e. database by model.
(F) Data Binding– Data binding involves data
Beautiful designs, charts, diagrams, tables are used to
synchronization between the model and view. Data
present the information accessed from the page, these are
binding is used for software development and
also represented by views. Any code related to how
technology.
information is being stored in the database or how
(G) Filter– Filters are used in Angular JS to
information is being brought into the database is not
improve the data. Returns the matching elements of the
visible. The view contains only code related to
given array in form of array.
presenting information.
(H) Services– Angular JS has a lot of in-built
Controller: Its main function is to establish
services and custom services are also created. It is a
coordination between the view and the model. Whenever
function or object. The service handles communication
a user gives any instruction to an application created
between the browser and the server. It is a single object
using MCV, it first moves to the controller and this
that provides the functionality of a web application.
controller executes this instruction and sends the
necessary data request to the model and then takes the
3. Advantages of Angular JS– Following are the
data from the model and provides it to the view. After
benefits of using Angular JS–
which the data is presented to the user. We can also say
(i) It is an open source framework which has minimum
that the work of Model and View is controlled by
errors and problems while using it.
Control.
(ii) Angular JS is supported by Google.
<html ng-app>
(iii) Angular JS works very fast because it works with
<body of-controller ="Text Controller">
Ajax and loads only the required content.
<p>{{msg}} </p>
(iv) It supports MVC design pattern.
(v) We do not need to learn any other scripting to <script src ="https://ajax.googleapis.com/ajax/
understand Angular JS framework. In this, the entire libs/Angular JS>1.3.14/Angular.min.js">
work is done through JavaScript and HTML. </script>
(vi) Angular JS is a great framework for building single <script> function Text Controller ($Scope) {
page applications. $scope.msg ='Hello Angular JS';}
(vii) Angular JS uses Dependency injection. </script>
(viii) It has built-in attributes which make HTML </body>
dynamic. <html>
M2R5 120 YCT
 An Angular JS application has three main parts– (i) ng-app Directive: It is used to initialize the
i. ng-app: Defines and links applications in HTML. Angular JS application. This is a starting point. This is
ii. ng-model: Binds the values of HTML application the root element of the application. There is only one ng-
data to the HTML input control. app directive on an HTML document.
iii. ng-bind: Binds application data to HTML tags. Syntax: <html/body/div of-app = " ">
..............
6. Steps to Create Angular JS Application– </html/body/div>
• Load Framework <script> tag is used. <html/body/div ng-app = "myapp">
<script src ="http://ajax.googleapis.com / ..............
ajax/libs/angularjs/1.6.4/angular.min.js"> </html/body/div>
</script> The value of the ng-app attribute is optional.
• Define the application using the ng-application The module name is given based on the value.
directive. Example:
<div ng-app =" "> <html>
// code <head>
</div <script src = "angular j.s.js"> </script>
• Define a model name using the ng-model directive. <script src = "https : // ajax.googleapis.com / ajax /
<p> Enter text: <input type ="text" libs / angular js/1.6.4/angular.min.js">
ng-model ="name"> </p> </script>
• Bind values of the above model defined using ng- </head>
bind directive. <body>
<p> Hello <span ng-bind = "name"> </span> <div ng-app=" ">
</p> Enter Name:<input type="text" ng-model="name">
Example: </br>
<!DOCTYPE html> Hii ! <span ng-bind ="name"> </span> </br>
<html> </div>
<head> </body>
<title> Angular js expression.example </html>
</title> Output:
</head>
<body>
<div ng-app=" ">
<p> Angular js example </p>
<p> Name : <input type = "text" ng-model = "name"
place holder = "Enter your name here"> </p>
<h1> Hello {{name}} </h1>
</div> (ii) ng-init Directive: It is used to initialize
</body> variables in Angular JS applications. It is used to assign
</html> values to different variables.
Output: Syntax: <element ng-init ="expression">
</element>
Here the variable is given in the expression. If more
than one variable has to be initialized, then each variable
are separated by semicolon (:).
Example:
<html>
<head>
<script src = "https: //ajax.googleapis.com/ajax /
7. Angular JS Directives– Directives are markers libs/angular js / 1.6.4 / angular.min.js">
on a DOM element, which tell Angular JS to attach a </script>
specific behavior to that element. Directive is used to it </head>
to extend HTML is initialized with ng prefix. <body ng-app =" " ng-init = "var 1 = John';
The directive may begin with x- or data. var2 = "Smith"">
{{var1}}</br>
Example– The ng-model directive can be written as
{{var2}}</br>
Data-ng-model or x-ng-model.
</body>
Angular JS includes the following directives–
</html>
M2R5 121 YCT
 (iii) ng-model Directive: This directive is used to Output:
add the value of HTML control with the application data.
That is, it is used to bind form elements (<input>
<textarea>, <select>) to variables in the scope.
Syntax: <model-element ="name">
</element>
name: Here the name is given to bind something on
the form element.
Example:
<html>
<head> (v) ng-bind Directive: This directive binds the
<script src = "https://ajax.googleapis.com/ajax / content of the HTML element to the application data.
libs / angular js / 1.6.4/angular.min. js"> </script> Syntax: As Attribute:
</head> <element ng-bind ="expression">
<body> </element class ="ng-bind : expression">
<div ng-app ="app" ng-controller ="ctrl"> As class:
Name : <input type ng-model ="my name"> </br> <element class = "ng-bind:expression">
Name is {{my name}} </element>
</div> expression: Here expression or variable is given.
<script type ="text/javascript"> Example:
var my app = angular.moduler ('app', [ ]); <html>
my app.controller ('ctrl', function ($ scope) { <head>
$ scop.my name ="UD" ; <script src ="https://ajax.googleapis.com/ajax/libs/
}); angularjs/1.6.4/angular.min.js">
</script> </script>
</body> <div ng-app =" "ng-init ="fruits =
</html> ['Orang', 'Mango', 'Banana', Pine Apple']">
Output: Enter Name: <input type ="text" ng-model
="name"> </br>
Hii ! <span ng-bind ="name.toupper case ( )">
</span> </br>
<ol>
<li ng-repeat ="f in fruits">
{{"fruit : " + f }}
(iv) ng-repeat Directive: It is used to repeat </li>
multiple items from a collection. Collections can be </ol>
arrays or objects in which only one item can be repeated. </div>
Syntax: <element ng-repeat ="expression"> </body>
</element> </html>
expression is given here. Output:
Example:
<html>
<head>
<script src ="https; // ajax.googleapis.com / ajax /
libs / angularjs / 1.6.4 / angular.min.js"> </script>
</head>
<body>
<div ng-app = " " ng-init = "arr = ["Fruit',
'Vegitables', 'Food']">
Array : {{arr}}<br> <br> 6.11 Angular JS Expressions:
arr [0] : {{arr [0]}}<br> Expressions in Angular JS are used to bind
arr [1] : {{[1]}}> <br> <br> application data to HTML. This is done to bind data to
<div ng-repeat = "a in arr"> the model, similar to HTML DOM elements and ng-bind
{{a}} <br> instructions. Expressions also allow you to use variables,
</div> objects, operators, and literals. Expressions are written in
</body> double brackets {{expression}}. This can also be written
</html> inside the instruction.
M2R5 122 YCT
 Angular JS expressions are like JavaScript code Output:
expressions except for the following difference. Position
in JS expression is like loop, exception or regular
expression. Angular JS expressions cannot contain
conditionals, loops, exceptions, or regular expressions.
Example– if-else, ternary for loop, while loop etc.
3. Angular JS Objects– Angular JS objects are like
• It cannot make function declaration.
JavaScript objects.
• It cannot contain commas or zeros.
• It cannot contain return keyword. </!DOCTYPE html>
• Users can write the expression wherever they want, <html>
Angular JS will simply resolve the expression and <script src ="https://ajax.gooleapis.com/ajax/libs/
return the result. angularjs//1.6.9/angular.min.js">
Changes the value of Angular JS CSS properties. </script>
1. Angular JS Numbers– Angular expressions can <body>
use numbers or numeric values and numerical values can
<div ng-app =" " ng-init ="person ={first Name:
also contain decimal values. Angular JS Numbers is like
JavaScript Numbers using ng-bind. 'John', last Name; "Smith'}">
Example: <p> The name is {{person last name}}</p>
<html> </div>
<head> </body>
<head> </html>
<title>Angular expressions number example</title>
Output:
<script src ="https://ajax.googleapis.com/ajax/libs/
angular js/1.6.4/angular.min.js">
</script>
</head>
<body>
<div ng-app =" " ng-init ="quantity = 6; cost = 6">
<p> Total in dollar : {{quantity * cost}}
</p>
</div> 4. Angular JS Array– Angular JS arrays are similar
</body> to JavaScript arrays.
</html> Example:
Output:
<!DOCTYPE html>
<html>
<script src ="https://ajax.googleapis.com/ajax/libs/
angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app =" " ng-init =" points =
{1, 15, 19, 2, 40]">
2. Angular JS Strings–Angular JS Strings are
<p> The third result is {{points[2]}}</p>
similar to JavaScript strings.
Example: </div>
<!DOCTYPE html> </body>
<html> </html>
<script src ="https://ajax.google.apis.com/ajax/libs/ Output:
angular js/1.6.9/angular.min.js"> </script>
<body>
<div ng-app =" "
ng-init ="first name ='John'; last name ='Doe"">
<p>The full name is : {{first name + " " + last
name}} </p> Difference between Javascript Expression &
</div> Angular JS– Following are the main differences
</body> between Angular JS Expression and JavaScript
</html> Expression–
M2R5 123 YCT
 • Angular JS expressions can be written inside HTML $scop.Last Name = "Smith";
whereas JavaScript expressions cannot be written });
inside HTML. </script>
• Angular does not support JS expressions, </body>
conditional, loop and exceptions whereas JavaScript </html>
supports expressions Conditional, loop and Output:
exceptions.
• Angular JS includes literals, operators and variables
and JavaScript expressions also include literals
operators and variables.
• Angular JS supports expression filters, whereas
JavaScript does not support expression filters.

6. Modules and Controllers in Files– It is common

5. Angular JS Module– An Angular JS module
for Angular JS applications to place modules and
defines an application. A module is a container for
controllers in JavaScript files. In the given example, "my
different parts of an application. A module is a container
app.js" contains an application module definition,
for application controllers. Controllers always belong to
a module. Whereas "my ctrl.js" contains the controller.
Creating a Module– A module is created using <!DOCTYPE html>
Angular JS functions. <html>
angular.module <div ng-app="my app"> <html>
<script> <script src ="https://ajax.googleapis.com/ajax/libs/
var app =angular.module ("my app",[ ]); angular js/1.6.9/angular.min.js">
</script> </script>
The "my app" parameter refers to an HTML <body>
element. In which the application will run. Now you can <div ng-app ="my app" ng-controller ="my ctrl">
use your Angular JS, you can add controllers, directive {{first Name + " " + last Name}}
filters, and more to your app. </div>
Adding a Controller– Add a controller to your app <script src ="my app.js"> </script>
with the ng-controller directive and refer to controller. <script src="my ctrl.js"> </script>
Example: </body>
<!DOCTYPE html> </html>
<html> my app.js
<script.src ="https://ajax.googleapis.com/ajax/libs/ var.app = angular.module ("may app". [ ]);
angularjs/1.6.9/angular.min.js">
</script> The [ ] parameter is used to define a dependent
<body> module in the module definition without [ ] parameters,
<div ng-app ="my app" ng-controller ="my ctrl"> you can not create a new module, but can retrieve an
{{first name + " " + Last Name}} existing module.
</div> my ctrl.js
<script> app.controller ("my ctrl", function ($ scope) {
var app = angular.module ("my app", [ ]); $ scope.first Name = "John";
app.controller ("my ctrl", function ($ scope) $ scope.last Name = "Doe";
{
});
$scope. First Name ="John";
M2R5 124 YCT
 Practice Questions with Explanatory Solutions
1. Angular JS application is mix of ............ Ans.(b) Script tag is defined by <script>. The script
(a) html & Javascript (b) Javascript tag of Java Script is defined as starting with <script>
(c) C++ (d) html and ending tag with </script>. Script tags can be
Ans. (a) Angular JS is a JavaScript-based open source placed in both head and body.
front end web framework designed to overcome the 6. By which symbol can multiple declarations be
problems faced in developing single page separated?
applications. Angular JS is a mix of HTML and (a) Semicolon (;) (b) colon (:)
JavaScript. (c) comma (, ) (d) Astrik (*)
2. What is the correct JavaScript syntax to write Ans.(a) Multiple variables can be declared in Java
"Helloworld"? Script. Separats multiple declarations with semi colon
(a) System.out.printIn ("Hello World") (:).
(b) PrintIn("Hello World") 7. JavaScript is a language.
(c) document.write("Hello World") (a) Machine (b) C language
(d) response.write("Hello World" ) (c) PHP (d) Interpreted
Ans.(c) Program to print "Hello World"– Ans. (d) JavaScript is a dynamic computer
<!DOC TYPE HTML> programming language. It is Interpreted/Oriented
<html> Language. With its help a dynamic web page is
<body> created.
<script> 8. Which of the following attributes is used to
document write ("Hello World") include external code inside an HTML
</script> document?
</body> (a) src (b) Ext
</html> (c) script (d) Link
Ans. (a) The URL of the external code is given inside
3. Which types of variables appears in JavaScript
the HTML document using the SRC attribute. this file
code everywhere?
user can be hosted in third party website. Only the
(a) Global variable (b) Local variable
path of the JavaScript file is given in the SRC attribute
(c) Both (a) and (b) (d) None of these
and the URL always given inside double quotes ("").
Ans. (a) Global variables appear everywhere in
9. JavaScript is designed for the following
JavaScript code. This is a variable which is declared
purposes–
outside the function and global variable can be used in
(a) To execute queries related to DB on the server.
all functions.
(b) To style HTML pages.
4. Which of the following is not a logical operator?
(c) To add interactivity to HTML pages.
(a ) ! (b) &
(c) && (d) || (d) To perform server side scripting operations.
Ans.(b) If there is a situation in the program in which Ans.(c) JavaScript is a powerful scripting language, it
a task has to be completed on the basis of more than is also called dynamic computer programming
one condition, then logical operator is used. There are language. JavaScript is basically developed to add
mainly three logical operators– AND(&&). OR(II) dynamic and interactive elements to the website.
and NOT(!) 10. Under what name was JavaScript originally
5. Where should the script tag be placed– developed–
(a) head (b) Head and body (a) Actionscript (b) Sencha
(c) Title and head (d) All of the above. (c) Oak (d) Mocha
M2R5 125 YCT
 Ans.(d) JavaScript was invented in 1995 by Netscape 16. The extension of JavaScript file is–
Communication Corporation programmer (Brendon (a) html (b) .js
Eich). Its initial name was Mocha, after which it was (c) ajs (d) ess
changed to Live Script and finally JavaScript. Now its Ans. (b) JavaScript is called JS in programming
the official name has been changed to 'ECMA Script' language. These are interpreted programming
but is still popular by the name Java Script. languages with object-oriented capabilities. The
extension of JavaScript file is js.
11. What is the proper syntax to declare an integer
variable in JavaScript? 17. Which of the following is not considered a
(a) int num (b) integer num; JavaScript operator?
(c) integer number; (d) Var nums (a) New (b) this
(c) Delete (d) type of
Ans. (d) Variables are used to store information.
Variable is like a container in which we can store the Ans. (b) There are following types of operators in
JavaScript – Arithmetic Operators, Comparison or
value and use it when required. To declare integer
Relational Operators, Bitwise Operators, Logical
variable in JavaScript var num; syntax is used.
Operators, Assignment Operators, Special Operators.
Normally, to create a variable in JavaScript, there is
Operators like New, delete, type of in, instance of etc
no need to specify the data type of the variable. Any
are called special operator and this is called any type
type of data can be stored in a variable. Javascript
of operator is not considered.
datatype of that data understands automatically.
18. What types of image maps are used with
12. Variable can hold value at a time– JavaScript–
(a) multiple (b) single (a) Server side image map
(c) double (d) none of these (b) Client side image map
Ans. (b) Variable is used to store information. It can (c) Both a and b
hold a single value at a time. (d) none of these
13. Who invented JavaScript? Ans.(b) Client side image map is used with
(a) Helsinki Linus (b) W3 Group JavaScript. Client side image maps are enabled via the
(c) Brandon Inch (d) James Gosling useMap attribute and the <img> tag. The map
definition file is usually stored in CGI-BIN.
Ans.(c) JavaScript was invented in 1995 by Netscape
Communication Corporation programmer, Brendan 19. Scripting language is not an assembly level
programming language?
Inch. JavaScript enables interactive web pages and is
(a) C# (b) CoBoL
therefore used to create web applications. Nowadays (c) Java script (d) Interpreted
JavaScript is used as a large part of web pages. Ans.(d) Scripting language is called high level
14. Operators are used to identify arrays. language. High level language is a programming
(a) typed (b) typedef language used for computer programming designed to
(c) keys (d) none of these be simple. Common programming languages like C#,
Ans. (b) JavaScript Type of operator is used to C++, CoBoL, Java Fortran, Java script, Pascal, Perl,
identify arrays in JavaScript. Type of operator returns PHP Python etc. are mostly considered as high level
a variable or expression type. languages.

15. ............ is the first browser to support JavaScript. 20. Which keyword is used to declare variables in
JavaScript?
(a) IE (b) Netscape (a) caps (b) scap
(c) Google Chrome (d) Mozilla Firefox (c) var (d) &
Ans.(b) JavaScript was first used in Netscape browser Ans.(c) Information is stored at one place in
version 2.083 in December 1995, netscape JavaScript variables. Any type of value is stored in a
variable. “Var” keyword is used to declare the
communicator, which was NCSA's first browser. It
variable. While declaring the variable, any letter (A-Z)
became quite popular but later its popularity decreased (1-2), underscore (_) or dollar ($) can be used as the
significantly after Microsoft created Internet Explorer. first character.

M2R5 126 YCT

 7 PHOTO EDITOR

7.0 Introduction: Repair: Skin Tune

Photo editing software is used to create visual Add: Vignette, Special Effects, Tilde-Shift
images. You can create, manipulate, and touch-up digital Exposition/Lighting: Exposure, Levels, Auto Levels,
images using a variety of image processing tools Tone, Curves, Light EQTM, Dehaze, Dodge and Burn.
available in photo editing software. This category of Color: White Balance, Color EQ Color Balance, Black
software ranges from apps that easily resize images and and White Expand: Sharpness, Blur, Noise, Clarity,
add basic effects to industry standard programs used by Expand Brush
professional photographers. Most software is used to 7.2(i) Selection tool:
manipulate the available images. Generally, Sketch,
Selection tool is used to select a particular part of the
Draw or Paint programs are used to create new images.
image to cut, copy, delete or edit the image, shapes,
In this, image can be simple or 3D realistic. Bitmap
graphics. It provides a variety of selection tools. Which
editing programs are the simplest image editing software.
the user can see by click on down button or right
A bitmap is a collection of pixels arranged in a grid
clicking. Following are the three selection tools available
pattern. Adobe Photoshop is a bitmap editing program.
in Photoshop photo editor–
7.1 Main Features of Photo Editing:
i. Marquee Tool– The function of Marquee tool is
Following are the features of photo editing
software– to make selection, which provides tools like Rectangle,
• Imports and exports, various graphic formats including Elliptical, Single Row, Single Column etc. for selection.
BMP, GIF, JPG, PNG, PDE, TIFF, PCX, TGA, J2K, Without causing any harm to the selected area by this the
WMF, EMF and RAS. image can be edited and the image can also be cropped.
• In image editors, the size of images can be changed, ii. Move Tool– Move tool is used to move any
which is called image scaling, by 90º, 180° rotated and image, layer or part of the photo from one place to
can also be flipped horizontally or vertically. another. To carry up to this tool is most used. Through
• The colors of the image can be easily adjusted with
this you can transfer any image from one file to another.
different adjustment commands like Saturation RGB
channel, Invert etc. You can also drag and drop on the file. Keyboard
• The images scanned by the scanner can be directly shortcut is used for move tool.
manipulated as per your requirement. iii. Lasso Tool– With this, any part of the photo can
• It applies unique filters like Blur, Sharpen, Spade, be selected very closely. Among lakhs of tools, three
Mosaic Emboss etc. tools are available–
• Photos can be printed and archived with full • Regular Lasso Tool: It works like a free transform
functionality. tool. To make a selection, hold down the left mouse
• EPC Photo Editor is provided as freeware for non- button and move the mouse forward. Move the mouse to
commercial or non-profit organization use. In this case
the area you want to select and release the left mouse
user can create and use an unlimited number of copies.
button when the selection is complete. This creates a
7.2 To Use Selection:
complete path.
Selection is used to apply editing or filters to a
specific area without affecting the entire photo. There are • Polygonal Lasso: This tool makes selections only in
different tools for selection which select an area of the straight lines, so it is better used to select angular
photo in different ways. Changes occur depending on the graphics.
tool selected by user. • Magnetic Lasso: This tool makes selections
To use the selection tool; automatically. When the user moves it to the selection
• Select one of the selection tools available at the top of area with the mouse, it keeps making marks by finding
the toolbar on the left Brush Selection Tool, Rectangle the corners according to the pixel and by connecting the
Selection Tool, Elliptical Selection Tool, Lasso starting point with the ending point, the selection is
Selection Tool, Magic Band Selection Tool. completed. Which users can identify by 'Marching Ants'
• You can use selection with the following tools– i.e. moving lines.
M2R5 127 YCT
7.2(ii) To Use Selection tool for using Lasso
Tool:
• Select the Lasso button.
• Click left mouse button on the photo.
Hold and drag around the area which you want to
select.

Figure- 7.3 Select multiple areas

You can combine multiple different areas into one
selection as long as they don't touch any other
Figure- 7.1 Using selection tools. selection lines.
• Release the mouse button to complete the selection. • To abstract the selection, press the Control button and
• To externalize the selection, click anywhere on the create a shape that includes part of the original
image (Lasso for Rectangle or Oval selection). selection, or completely surrounds it.
• To add an existing selection, hold down Shift or the
Add Reference to Selection button. Draw another
shape that includes any part of the original selection
line. When the mouse is released it expands to include
the additional external end.

Figure- 7.4 Select all areas

• If you want to apply effect to the external area of the
photo, then you will have to clip the selected area by
clicking on the selection.
The selection now includes all the outer areas of the
image along with the outer central area.
To Use Magic Band–
• Select the Magic Band tool.
• In the tool options bar, specify a selection tool new
selection, add to selection subtract from selection or
Figure- 7.2 Add to selection intersect with selection.
• To add other areas to your selection, hold down Shift • Move the pointer across your canvas and click on the
or the Add Selection button in the reference bar and image color you want to select.
drag around any part of the image. • Do one of the following–
M2R5 128 YCT
 – Slide the Threshold slider to include pixels, this To use the edit brush,
determines how many pixels should be included in (i) In edit mode select the tool which you want to use.
the selection. (ii) To enter brushing mode, click on the brush edit
– How should it be similar to the pixel which you button and open brush controls or use the shortcut
clicked. key B to Open and close the Brush panel.
– Click the Connect checkbox if you want to include (iii) Specify brush settings in the panel.
only pixels that are touching the one you clicked. Option Explanation
– Hold down shift and click on the selection to include Add Brush Stroke Brush while holding down
more pixels. the left mouse button.
– Hold down Control and click on the selection to Erase Brush Stroke Brush while holding down
remove pixels from the selection. the right mouse button.
• Select one of the following from the Band Type drop– Nib Width Adjusts the brush size. You
down list: can use the mouse wheel to
Whiteness– Your selected pixels of equal brightness adjust the nib width.
in the area of the image clicked. Feathering Adjust the softness of the
Color– Selects pixels of similar color and brightness transition between the brush
in the area of the image which you clicked. stroke and the image. Shift +
RGB– Selects pixels with the same red, green, and Mouse Wheel is used for
blue coordinates as the area of the image on which you this.
clicked. Pressure Adjust the slider to control
To use the Rectimate or Elliptical Selection tool–
brush strength.
1. Select the Rectangle or Elliptical button.
Alternating between Filters, that require clicking
2. Click and drag to draw a selection on the image.
brush mode and on a drawing or image. And
3. Do any one of the following–
Cursor-applied tools to use the White Balance
• To add to an existing selection, hold down Shift and
tool, hold down the Alt
drag another selection that includes any part of the
button to switch from brush
original selection line. Release the mouse and the
mode.
selection now includes the additional area.
Clear all Brush Removes all brush strokes
• To add multiple areas to your selection, hold down
Stroke from the image.
Shift and drag as many as you want. You can continue
Invert all Brush Toggle this option to reverse
adding areas to the selection as long as the edges don't
Strokes a brushed stroke. It brushes
touch.
the brushed area and brushes
• To reduce from the current selection, hold down
the untouched area. This is
Control and drag to another selection that you want to
useful if you want to brush
reduce. Release the mouse, whatever part was inside
out most of the image and
the new selection will be removed.
leave a small portion
7.2(iii) Combination of Tools: untouched. Brush only the
Users can use selection tools individually or in small area you don't want to
combination as per their requirement.
affect and reverse the brush
To combine selection tools,
strokes.
• Select a tool and make a selection. Load last applied Applies the effect to the most
• Switch to another tool. brush strokes recently brushed and applied
• Press the Select button to end selection. area.
• Make another selection. Show Brush Stroke When this option is checked
7.2(iv) To Use Edit Brush: the user's brush strokes will
Tools in edit mode allow a variety of global be displayed in the color
adjustments to be made. Sometimes users want to adjust shown. This is helpful when
only specific areas of their photo, such as blurring some brushing a complex area with
areas of the image instead of blurring the entire image. a subtle effect, as it can be
You can use the Edit Brush to do this. The Edit Brush difficult to tell if you missed
allows you to selectively edit your photo by simply a spot.
brushing on the effect. Table- 7.1 Edit Brush Option
M2R5 129 YCT
 (iv) Start applying effects to your image. Border Specify the text bubble
(v) Adjust Sliders to get effects as per your choice. border color. Click on the
(vi) Press 'Done' to apply your brush strokes. arrow for color selection.
7.2(v) Text Tool: Specify the effect you want
You can use the Add Text tool to add formatted text Effect Effect: to apply to the text. Each
to the photo. You can also adjust the opacity of the text Settings effect has different options
to create a watermark effect, which is useful for placing that control its appearance.
copyright information on your images. Drag the slider for this.
To add text in Image– Specify the distance between
(i) Choose one of the following, Shadow the drop shadow and the text.
Click on Filter menu to highlight Add and select Settings Distance High value shadows are
text. farther away and text is
Click the Add icon in the toolbar and select Text visible higher.
from the menu. Blur Specify the blur effect
(ii) Type the text you want to add in the text field. applied to the drop shadow.
(iii) In the Font area, specify the font you want to use. Specify the darkness of the
Like- Italic or Justicfication and font color. Drag the Opascity drop shadow where it falls
Size slider to specify a point size and drag the on the image.
Opacity slider to specify the transparency of the text. Specify the direction of the
(iv) Click or drag the text marquee anywhere on your imaginary light source that
image to reposition it, or drag to change the handle Angle creates the drop shadow.
size of the marquee. Drive the arrows to adjust
(v) Select an option from the Blend Mode drop-down the angle.
list to specify how you want the text to blend into Table - 7.2 Add Text Options
the underlying image.
(vi) Select one of the following options– (vii) Select one of the following–
• Select the Bubble Text checkbox to set bubble text • To add text to your image, click on Apply and keep
settings. the text tool open so that you can add more text. The
• Other text effects cannot be applied to bubble text. Text tool creates a new, blank marquee and return to
• Select one or more of the drop shadow and bubble Step 3.
effect checkboxes to customize your text. • Click the drop tool to add text to your image. If you
• Click the Settings button to adjust the settings for still have an empty marquee open then it will be left.
each option described in the table below: • Click Cancel to discard your changes and the tool.
Bubble Talk to Comic Book Text Bubble
Text through Encloses your text in a 7.2(vi) Layers:
Settings: comic book text bubble with Selection tool is used to select a particular part of the
a sharp stem. image so that the image, shapes, graphics etc. can be cut,
Thought: Encloses your text in a copied, deleted or edited. It provides a variety of
comic book text bubble with selection tools. Which users can also see by clicking on
a dotted stem. the down button or by right clicking. Following are the
three selection tools available in Photoshop photo editor–
Stem Specify the direction of the
i. Marquee Tool– The work of Marquee tool is to
Angle text bubble stem. Drag the
make selection, which is rectangular for selection,
arrows to adjust the angle.
Provides tools like Elliptical, Single Row, Single
Thickness Specify the thickness of the Column etc. Without causing any harm to the area
text bubble border. selected by this the image can be edited and the image
length Specify the length of the text can also be cropped.
bubble stem. ii. Move Tool– Move tool is used to move any
Fill Specify the background image, layer or any part of the photo from one place to
color of the text bubble. another. This tool is most used. Through this you can
Click on the arrow for color also drag and drop an image from one file to another.
selection. Keyboard shortcut is used for move tool.

M2R5 130 YCT

 iii. Lasso Tool– With this, any part of the photo can Basic Tab– Using three sliders makes editing very
be selected very closely. Among lakhs of tools, three quick and easy. Photo editor, photo editor analyzes and
tools are available– automatically changes adjustments across the entire
● Regular Lasso Tool: It works like a free transform
image.
tool. To make a selection, hold down the left mouse
button and move mouse forward. Move the mouse to Standard Tab: It acts as a sound equivalent factor
the area which you want to select and release the left along with light. For each tone band use the sliders to
mouse button when the selection is complete. This independently edit the brightness and contrast of
creates a complete path. different tones of the image.
● Polygonal Lasso: This tool makes selections only in Advanced Tab– Provides the final control over
straight lines, so it is better used to select angular brightness and contrast in an image. A basic adjustment
graphics.
● Magnetic Lasso: This tool makes selections curve can be constructed using four sliders. You can
automatically. When the user moves it to the adjust the constraints manually by clicking and dragging
selection area with the mouse, it keeps making inside the graph area or on the image.
marks by finding the corners according to the pixel 7.2(viii) Using Basic Tab:
and by connecting the starting point to the ending
To add brightness to dark areas;
point, the selection is completed. Which users can
identify by 'Marching Ants' i.e. moving lines. (i) Drag the Highlight slider to the right.
(ii) Adjust the settings using any of the controls from
To Open Layers Pane– the table given below–
● With an image open, select Layers from the view Right click on a Right click on a slider to reset it.
menu. slider
● In Open Image, you will see Layers with your image Exposure alert Click on exposure alert to make
on it. any unexpected areas visible do
To add a layer; it. Overexposed pixels turn red
● Press the add layers button at the bottom of the Layers and unexposed pixels turn green.
pane. Auto Click to allow the software to
● Or go to layers and select add new layers.
analyze the photo and apply
● To edit a layer, select the layer in the Layers pane.
settings based on the amount of
To set layer visibility;
light and dark pixels in the photo.
● Select the layer and press Show/hide button.
Done Click to apply your changes and
To delete a layer;
● Select the layer and press the Delete Layer button. close the tool.
To duplicate the layer; Cancel Click to cancel all changes and
● Select the layer you want to duplicate and press the close the tool.
Duplicate button. Table - 7.3 Control Settings
To transfer a layer; (i) Move the shadow slider to the right to lighten areas
● Select the layer in the Layers pane and drag it up or that are too dark.
down. (ii) Adjust the settings using any of the controls
To rename a layer. available in Table 7.3.
● To rename a layer with 'Layer' etc., select the layer and To adjust for dark or very light mildstone;
right click. (i) Drag the mildstone slider to the right to lighten it.
Rename, select layer. (ii) Adjust the settings using any of the controls
● Enter a name for your layer and press the OK button. available in Table 7.3.
7.2(vii) Brightness/Contrast: 7.2(ix) To use Standard Tab:
You can use the Light EQTM tool to edit areas in an The Standard tab has two sets of sliders. The top set
image without affecting other areas of the photo, which is for brightening and the bottom set is for darkening.
is too dark or too light. By using this you can lighten Each slider indicates a dark-to-light slope. Moving the
dark areas as well as very light areas can also be made slider up darkens that tone band.
dark. There are three tabs with this option, each of which There are two horizontal lines between the two sets
helps in achieving results in different ways. Apart from of sliders that are categorised from black to white.
this, adjustments can also be made to specific areas of To use the Standard tab,
the photo using keyboard and mouse shortcuts. (i) Select one of the following–
M2R5 131 YCT
 ● Drag the Tone Band sliders up or down depending Tone Curve Adjustment– You can use the Tone
on which Light Band you want to adjust. Curve tool to change the image tone curve. Select an
● Type the number to adjust the perfect in the number RGB color channel or select a specific color to adjust the
box. entire image.
● Click the # Tone drop down list to increase or To adjust the brightness curve in an image,
decrease the number of tone band sliders. (i) Do one of the following,
● Press the E button to view any overexposed or ● Click the Filter menu Highlight Exposure/Lighting
underexposed pixels. and select Tone Curves.
● Click the Auto button to apply settings ● Click the Exposure/Lightening icon on the toolbar
automatically. and select Tone Curve from the menu.
● Drag the Darkening slider to darken light areas of (ii) Set the options given below,
the image. ● Click on Apply to apply your changes.
● Drag the Contrast slider to brighten the image. ● Click on Done to apply your changes and close the
● Drag the Light slider to lighten dark areas of the tool.
● Click on Cancel to cancel all changes and close the
image.
tool.
● Left-click and drag upward to brighten dark areas of
the photo. 7.2(xi) Filters:
● Right-click and drag downwards to darken bright Images can be cleared by using filters. There are
areas of the photo. some filters available under the Filter menu of
(ii) Click on Done to apply your settings and close the Photoshop. Some filters provided by third-party
tool or Click on Done to cancel your changes and developers are available as plug-ins. Filters cannot be
close the tool click on Cancel to do so. applied to bitmap mode or index color images. Some
filters can only be applied to RGB images. All filters can
7.2(x) To Improve Color & Tone:
be applied to 8-image bits.
You can use the Auto levels tool to automatically
16 images at bit can be applied like as– Liquify,
correct the exposure layers of the image. Auto level
Vanishing point, Average Blur, Blur, Blur More, Box
darkest makes image pixels darker and the brightest
Blur, Shape Blur, Lens Image filters like correction, Add
pixels brighter.
noise, Fibers, De-Interlace, NTSC Colors, High Pass etc
To automatically fix an image layer;
and 32 images faz Average Blur, Box Blur, Gaussion
(i) Under the Filter menu click on Highlight Blur, Radial Blur, Lens Flare, Smart Sharpen, Unsharp
Exposure/Lighting and select Auto Levels. Filters like Mask, Maximum, Minimum and offset etc.
(ii) Click on the exposure/Lightening icon on the toolbar Some filters are processed entirely in RAM so if
and select Auto Levels from the menu. there is not enough available RAM to improve the filter
(iii) Select one of the following options, effect, an error message may be received.
● Auto Contrast & Color: adjusts the color difference, Some important points to keep in mind while
brightness and balance of the RGB channels. selecting filters are as follows–
● Auto Contrast: Adjusts color differences and ● Filters are always applied to the active, visible layer
brightness only. or a selection.
● Auto Color: Balances the RGB channels in the ● Most filters are applied through the Filter Gallery.
image without changing brightness or contrast. All filters can be applied individually.
● Filters cannot be applied to bitmap mode images.
(iv) You can adjust the amount using the strength slider.
● Some filters can only be applied to RGB images.
(v) Click on Exposure Warning to create Overexposed
● All filters can be applied to 8-bit images.
and Unexposed pixels. ● Filters applied on 16-bit images are– Liquity,
(vi) Select one of the following– Vanishing point, Average blur Blur more, Box blur,
● Click on Done to accept your changes and close the Gaucy blur, Lense blur, motion blur, Radial blur,
panel. Surface blur, Shape blur, Lense Correction, Shore
● Click Cancel to discard your changes and close the etc.
panel. ● Filters applied on 32-bit images are– Average blur,
● You can right click on a slider to reset it to the Box blur, Gaucy blur Shape blur, Surface blur,
default value. Shore cloud, Smart sharpen etc.

M2R5 132 YCT

 Practice Questions with Explanatory Solutions
1. What is the keyboard shortcut for blur in Ans. (a) The Standard tab has two sets of sliders, the
Photoshop? top set for brightening and the bottom set for
(a) B (b) L darkening. Each slider represents a dark-to-light slope.
(c) R (d) M Between the two sets of sliders are two horizontal
Ans. (c) Blur tool is used to blur the image. The strips marked black is classified as white.
keyboard shortcut for blur in Photoshop is R. 7. The full meaning of TIFF is–
2. What does luminance mean in Photoshop? (a) Total Inclusion File Format
(a) Brightness of color(b) Contrast (b) Tagged Image File Format
(c) RGB (d) JPEG (c) Table Index File Format
(d) Temporary Instruction File Format
Ans. (a) Luminance means brightness of color. It
allows the user to control gradients and adjustments Ans. (b) The full name of TIFF is Tagged Image File
based on the tonal range of the image. Format. Due to the very high quality of images in this
format, it is used in desktop publishing and
3. What is the extension of Photoshop file?
professional photography. It does not allow the quality
(a) default (b) doc.
of scanned documents and photos to reduce.
(c) html (d) ⋅psd
8. Which of the following menus contains
Ans.(d) Images created in Photoshop are saved in commands to adjust the brightness and color of
PSD format by default. PSD is a Photoshop document the picture?
but the file created in Photoshop can also be saved in (a) filter (b) Image
(c) Select (d) layer
any other format like GIF, IMG, PNG, JPG, WPG,
Ans. (b) Under the Image menu of Photoshop photo
tiff, EPS etc.
editor, commands for adjusting the brightness and
4. What is the typical size required for graphic color of the picture are included. This command
design? adjusts the tone range of the image.
(a) in cm. (b) in inches 9. Which tool is used to add formatted text to a
(c) pixel (d) none of these photo–
Ans.(c) When an image is viewed by zooming too (a) Text tool (b) To edit
much, the image appears in small square pixels, which (c) Image tool (d) None of these
are made up of the typical size for graphic design is Ans. (a) Formatted text can be added to the photo by
sought in pixels. Photoshop controls these pixels using using the text tool available under the filter menu. You
PPi (Pixel-Per-inch). Determined by, which represents can also adjust the opacity of the text to create a
how many total pixels will be in each inch. watermark.
5. Which of the following is the latest version of 10. Graphic editing is performed by–
photo editor? (a) To improve the attributes of the existing image
(a) version 7 (b) version 8 (b) To remove unwanted parts of the image
(c) To add special effects
(c) version 9 (d) version 10
(d) All of the above.
Ans.(d) Image creation and editing is done through Ans. (d) Graphic editing is used to improve the
photo editor software. Latest version of photo editor is attributes of an already existing image and graphic
10. editing. Unwanted parts of the image can be removed.
6. The Standard tab contains sets of sliders: Special effects which are not possible with real
(a) 2 (b) 3 photography can also be added through graphic
(c) 4 (d) 5 editing.

M2R5 133 YCT

11. Which tool is used to trace a free hand selection Ans.(c) The image created in Photoshop is saved in
like a drawing with a pencil? PSd format by default. PSD is an extension of
(a) Lasso Dool (b) free hand Photoshop, whose full name is Photoshop Document,
(c) Drawing tool (d) Edit Brush but we can convert the file created in Photoshop into
Ans. (b) Using the free hand tool to trace a free hand any file like GIF, IMG, PNG, Jpg, Tiff etc can save in
selection, like drawing with a pencil. format.
12. Which of the following is not a color specification 17. Under which menu Stroke option is available in
format? photoshop?
(a) RGB (b) HSB
(a) Select Menu (b) Filter Menu
(c) GIF (d) CMYK
(c) Edit Menu (d) None of these
Ans.(c) The full name of GIF is Graphics Interchange
Ans. (c) Color can be added to the stroke through the
Format. GIF is a type of image format used for web
Stroke option available in the Edit menu of
images and also commonly used in software
Photoshop. Made inside the photo the color or pattern
programs. RGB, HSB and CMYK are color
of the border can be changed in the selection.
specification formats.
18. How many color modes are there in Photoshop?
13. ..............Transformation command displays the
result in reverse in the selection– (a) 5 (b) 2
(a) Rotate (b) Skew (c) 6 (d) 3
(c) Opposite (d) Flip Ans.(a) Five color modes are available in Photoshop–
Ans. (d) The Flip transformation command inverts the RGB, CMYK Gray Scale, Bitmap and Index etc.
result of the selection by applying a mirror effect and 19. Photoshop is used for............–
the Rotate command rotates the image in 90° (a) Graphics
increments (ie one fourth of a circle). (b) Animation
14. What does CMYK mean? (c) Programming
(a) Cream Magenta Yellow Colle (d) Typing
(b) Ciwan Magenta Yellow Blue
Ans.(a) Photoshop is a photo editing, image creation
(c) Cyan Magenta Yellow Brown
and graphics designing program developed by Adobe
(d) Cyan Magenta Below Black
System, Which is designed for Raster Image Editing
Ans. (d) CMYK is a color mode which includes Cyan, with Multilayer.
Magenta, Yellow and Black colors, which are used for
20. Whose menu options are Twirl, ripple and
photo editing. CMYK is used for printing vouchers,
Spherize, distortion ?
visiting cards etc. These colors are not very bright. (a) Bitmap (b) filter
15. Full form of RGB is– (c) Insert (d) none of these
Ans. (b) Filters are used to clear the image. Twirl,
(a) Red Green Blue (b) Red Green Black
(c) Red Black (d) Red Blue ripple and Spherize, distortion etc. options are
available under the filter menu of Photoshop. You can
Ans. (a) RGB is a type of color curve which includes
rotate the image according to Twirl and can be used
Red, Green, Blue colors. RGB color is used for digital
communication such as television or websites. RGB by mixing the photo inside ripple, it adds automatic
colors are bright. Scanner, Digital Camera and effect to the photo. Under Spherize, the photo can be
Computer Monitors use RGB to display color. rotated according to pinch. Diffuse Glow, Glass,
Texture, Scaling, Ocean ripple etc. in the image
16. What is file extension in Photoshop?
(a) ⋅Bmp (b) ⋅Tiff through Distortion. Filters enhance the quality of an

(c) ⋅Psd (d) ⋅Txt image without distorting it.

M2R5 134 YCT

 8 WEB PUBLISHING AND BROWSING

8.0 Introduction: may vary depending on output medium and style

Web publishing or online publishing is a process of preferences. Benefits of SGML based documents are as
publishing content on the Internet. Which includes follows–
creating a website and uploading, updating webpages • They can be created by thinking in terms of the
and posting online blogs. Web publishing is the process document rather than its appearance characteristics
of uploading text, images, videos, and audio to a website. (which may change over time).
To publish any type of content on the Internet, a web • They will be more portable because an SGML
server is required, without a server we cannot publish the compiler can interpret any document in terms of its
content on the Internet. The main objective of web DTD.
publishing is to make data communication easier so that Documents originally intended for print medium can
users can easily communicate with each other and share be easily re-adapted for other media such as computer
their data with each other. Any person needs three things display screens.
to publish content on the Internet– web development The language that, this web browser uses, Hypertext
software, Internet connection and web server. Markup Language (HTML), is an example of an SGML-
based language. There is a document type definition for
8.1 World Wide Web: HTML (and reading the HTML specification is
World Wide Web is also called Web. This is the effectively reading an extended version of the document
most popular service available on the internet. It is a type definition. Many documents in today's distributed
huge group of information interconnected through networking environments are being described with
hyperlinks which can be accessed on the Internet with Extensible Markup Language (XML). Which is a data
the help of a web browser. It is the second most popular description language (and can be viewed a document as a
Internet service after e-mail. collection of data) that uses SGML principles.
Internet is a global system of interconnected SGML is based in part on earlier generalized
computer networks which is made up of many small and markup languages developed at IBM, including General
big computer networks spread across the world Markup Language, GML and ISIL are involved.
connected through various communication mediums. It
includes personal, public, educational, business and
8.3 Basics of Web Hosting:
government networks etc. It uses a common set of
protocols for data transmission known as TCP/IP. The Web hosting is a type of Internet service, which
primary purpose of the Internet is to facilitate the provides users the facility to store and save their websites
transmission of information. There are many different on the Internet. Storing your website securely on the
tools used on the Internet to make this possible. Among Internet and making your website available 24 hours a
these, e-mail, newsgroup, telnet, gopher, FTP and wide day to your readers requires a reliable web hosting.
area network are important tools. The World Wide Web When we open a website, we see contents like
(WWW) is the most popular Internet tool. audio, video, image, text, document etc., all of them are
stored in the online location. That location itself is called
web hosting. The physical system used for web hosting
8.2 Standard Generalized Markup is called web server. Web server is a high level
Language: computer. When someone enters the URL of your
SGML is a standard for specifying a document website in his browser, then on his request, the web
markup language or tag set. Such a specification is itself server delivers a copy of the webpage of your website to
a Document Type Definition (DTD). SGML is not a him, due to which your website opens on that computer.
document language in itself. Rather, it is a description of The basic requirements for hosting a website are as
how to specify one. This is metadata. follows–
SGML is based on the idea that documents contain • Website file
structural and other semantic elements that can be • Domain name
described without reference to how such elements should • Hosting place to store files
be represented. Actual performance of such documents • FTP Customer
M2R5 135 YCT
 To create any company or our own personal website, 8.3(ii) Basic Features of Web Hosting:
we have to upload all its files on web hosting. When All those web hosting features vary according to the
your website is connected to the hosting, whenever a plan and web hosting company. Some basic features are
user searches your website on the internet browser, after as follows–
searching the domain name of the website, the internet Disk Space/Storage – You should take special care
connects the domain of your website to the web server of your disk space/storage while purchasing web hosting.
where your website is hosted. All the files of the website This is a server occupied for hosting your data. Whatever
are uploaded. data you upload on your website, it is saved in the
After this all the data becomes visible to the user. storage of all hosting. Whenever a visitor comes to your
Now the user can see whatever he wants on your web website and searches something, it appears in the search
site. When you connect your website with hosting, for results. While buying hosting, take special care of
this you need DNS (Domain Name System), which you storage. Always buy hosting with a little more storage.
get from the hosting provider company only. This lets Bandwidth– Bandwidth refers to the amount of
you know which web server is hosted on your website time it takes to transfer data between visitors to a
because each hosting has a different DNS. website. If you have chosen low bandwidth when
8.3(i) Type of Hosting: purchasing hosting, it may not handle a large number of
visitors to your website. Whenever more visitors come to
Web hosting is a service that allows any
your website the speed of your website may decrease.
organization or individual to post their website or
Whereas if you choose high bandwidth, then it can
webpage on the Internet.
handle all the visitors to your website. Due to which
Following are the different types of web hosting–
there is no impact on the speed of the website.
(i) Shared Web Hosting– In shared web hosting, many Uptime– This is one of the important features that
websites are stored in a single web server this type every hosting providing company provides. Uptime
of service is good for beginners. Because they will means that your website will be available to visitors
not get much traffic in the beginning but when a 99.9% of the time. All hosting companies claim
website becomes popular and when the traffic guaranteed uptime. Some hosting companies also
increases, the load on the server will increase and provide 24×7 Support.
the website will work in slow speed and it will take Control Panel Features: It is very important for the
a lot of time to load the page. hosting control panel to be user friendly because if you
(ii) Virtual Private Servers [VPS]– Virtualization have a website, then the control panel is where you have
technology is used in VPS in which there is only one to do most of the work, in which you have to upload web
physical computer system as a server but it is pages, manage domain and subdomain, etc., protect the
divided into many parts virtually. In this, all the website from spam. All the work is done through the
websites reside in the same physical server but are control panel only.
stored virtually in separate divided spaces and are E-mail– You can also purchase e-mail hosting from
not able to use the space of other websites. For this the hosting company. This is very useful for creating
reason, the speed of the website will be maintained customer e-mail addresses of your company. Due to
even if there is high traffic in this type of web which all your work becomes professional. You also get
hosting. many extra features in this.
(iii) Dedicated Server Hosting– In this type of web Backups– While purchasing web hosting, keep
hosting, the server works at a very fast speed and is special care whether the hosting provider is giving you
for only one website. In this, the server stores all the the option of backups or not. Because sometimes some
content of only one website like photos, videos, problem occurs in your website. Because of which you
documents. There is no sharing in it and there is no have to delete the entire website. If you have backups,
you can restore your website again.
content of any other website, it is mostly used for e-
Customer Support–Before purchasing web hosting,
Commerce websites like Amazon, eBay, Snapdeal
it is very important to get complete information about
etc.
customer support. Because many times when there is a
(iv) Cloud Web Hosting– In this type of web hosting,
problem in our hosting, we have to get it rectified by the
many servers work together for only one website
customer executive of the hosting company. Because
and provide the best service along with securing the
they have lots of rights which solve your problem in very
website. When a group of servers work together, it is short time. Then it is very important for you to always
called cloud. With this, high traffic websites can be check the customer support of the company before
controlled very easily. purchasing hosting.
M2R5 136 YCT
 Monthly traffic– Small or medium website will 8.4(i) Connectionless and Connection-
require between 1GB and 10GB data transfer on monthly
Oriented Protocol:
basis. You can check various options depending on your
With connectionless protocols, clients connect to the
requirement.
server, make requests, receive responses, and then
Connection Speed– Nowadays most service disconnect. HTTP is a connectionless protocol for the
providers allow very fast connection speeds. Select a Internet. In contrast, with connection-oriented protocols,
service provider that is offering better connection speed clients connect to the server, make a request, receive a
in terms of bits per second. You can choose connection response, and then maintain the connection to handle
speeds from 64KB per second to 2.488GB per second. future requests.
Programming Services– Website hosting provides The differences between connectionless and
the facility to create web pages with programming connection oriented services are as follows–
languages including packaged HTML PHP, ASP as well • Connection oriented service is related to telephone
as database. system whereas connectionless service is related to
Internet Service Provider (ISP)– You must sign up post office system.
with an Internet Service Provider to access your Internet • Connection oriented service is preferred by long and
Service Provider (ISP). A company that provides Internet stable communication and connection less service is
access to individuals and businesses for a monthly or preferred by bursty communication.
annual fee. It supports one or more forms of Internet • Connection oriented service is essential and
access. Ranging from traditional modem dial up to connection less service is not essential.
dedicated T1/T3 lines to DSL and cable modem • Traffic is not possible in connection oriented service
broadband services. Apart from internet connection, it whereas traffic is possible in connectionless service.
also provides services like– website hosting and • Connection oriented services are reliable, while
development, e-mail hosting, domain name registration connectionless services guarantee reliability.
etc. • Connection oriented services require high range
Web Publishing on Internet– You can use many bandwidth, while connectionless services require
methods for web publishing on the Internet Cute FTP low range bandwidth.
from://ftp.cuteftp.com/pub/cuteftp/ First of all, create a • Connection oriented service guarantees reliability.
page for the website and then select the file. Save as Connectionless service does not guarantee
HTML. Enter the folder name and click on Save. It saves reliability.
your web page as an HTML document in a specified • In connection oriented service, packets follow the
same route whereas in connectionless service,
folder. Now start Cute FTP software, it is user friendly
packets do not follow that route.
and reliable. After this, all the files are uploaded from
folder to folder on the internet web server, in which
space is reserved for your site. This the simple process
8.4(ii) Stateless and Stateful Protocol:
Network protocols for web browsers and servers are
may take 10 minutes to complete.
classified into two types– stateless protocols and stateful
protocols. These two protocols are divided based on the
8.4 Document Interchange Standard: need to save state or session information.
The full form of EDI is Electronic Data Interchange. (i) Stateless Protocol– Stateless protocol is the type
It is a communication system in which data is transferred of network protocol in which the client sends the request
from one computer to another in electronic form. to the server and the server returns the response
Spreadsheets and documents are used instead of paper. according to the current state. Multiple requests do not
Nowadays EDI is most commonly used in B2B e- require the server to maintain session information or
commerce. A lot of data is transferred through EDI. state about each communication participant.
Working of Electronic Data Interchange– HTTP (Hypertext Transfer Protocol), UDP (User
• First of all, we collect and organize the documents Datagram Protocol) DNS (Domain Name System) are
or data which we want to transfer. examples of stateless protocols.
• These documents are translated then into EDI format Features of stateless protocol–
through translator software. • Stateless protocols simplify server design.
• Stateless protocols require fewer resources because
• After translating the documents into EDI format, the
the system does not need to keep track of multiple
documents are ready to be sent. Users can send these
link communications and session details.
documents by connecting to the internet. To transfer
• In stateless protocols, each information packet
documents HTTP, HTTPS and FTP protocols are travels on its own without reference to any other
communication methods. packet.
M2R5 137 YCT
 • In stateless protocols each communication is discrete 8.5 Components of Web Publishing:
and unrelated to those that precede or follow it. After creating a website, to make your website
(ii) Stateful Protocol– In stateful protocol, if the available to everyone on the web, you have to publish it
client sends a request to the server, it expects some kind on a web server. Common web publishing components
of response, if it does not get any response, it resends the are–
Web Browser– Web browser or simple browser is
request. FTP (File Transfer Protocol) and Telnet are
specialized software that allows users to read or view
examples of stateful protocols.
web pages and Enables to jump from web page to
Features of stateful protocol– another web page. This is the software needed to search,
• Stateful protocols provide better performance to the retrieve, view, and send information over the Internet.
client by keeping track of connection information. The process of using a browser to view information on
• Stateful applications require backing storage. the Internet is known as browsing or surfing. Browser is
• Stateful requests always depend on server side state. also called web client.
Web Cookies– Web 'cookie', refers to a piece of
• TCP sessions follow the stateful protocol because both information sent by a web server to a web browser,
systems maintain information about the session during which the browser software is expected to save and send
its life. back to the server when the server makes additional
Difference between stateless protocol and stateful requests. Web cookies allow a website to store
protocol–The differences between stateless protocol and information about you as well as track your data travels
stateful protocol are as follows– over a long period of time.
Web Server– A web server is a program that runs
• Stateless protocols do not require the server to
on a website and is responsible for responding to web
maintain server information or session details. Stateful
browser requests files. To publish documents on the Web
protocols require the server to save state and session you need a Web server.
information. Advantages of Web Publishing–Following are the
• In stateless protocols there is no strict dependency advantages of web publishing–
between the server and the client. In stateful protocols, • With the help of web publishing, people can access
there is a strict dependency between the server and the online websites and read and comment on any type of
client. posts.
• This saves people's time because they can access any
• Stateless protocol design simplifies server design.
website by searching.
Stateful protocol design makes the design of the server
• There is very little cost in web publishing, only the
very complex and heavy. cost of hosting and internet is involved.
• Stateless protocols work better in times of crashes • One advantage of web publishing is that we can edit
because there is no state that must be restored the content even after publishing it.
following a failure. The server can simply restart after • We can access the content uploaded on the Internet
a crash. The stateful protocol does not work well in from any corner of the world.
times of crush because the stateful server has to • Publishers can also earn money through web
maintain knowledge of internal state and session publishing. Publishers can earn money by placing ads
details. in the website.
• It requires less memory to store the content.
• Stateless protocols handle transactions much faster.
Stateful protocols handle transactions very slowly. Netscape Navigator Gold– Netscape Gold provides
• Stateless protocols are easy to implement in the a visual editing environment that closely approximates a
Internet. Stateful protocols are logically heavy to Web page as well as adopts many of the concepts used
implement in the Internet. Scaling the architecture is by word processors and document publishing tools.
relatively easy. Measuring architecture is difficult and Macromedia's Backstage Desktop Studio–
complex. Backstage Desktop Studio consists of a suite of tools for
• Different servers can be used to process different assembling and managing websites and end-to-end
websites. The advantage of micromedia is its excellence
information at one time. Process each request to do
in multimedia web documents. Micro Media Backstage
this, the same server must be used.
Desktop Studio is one of the new generation tools that
• Examples of stateless are UDP, DNS, HTTP etc. combine dynamic web page document features with
Examples of stateful are FTTP, Telnet etc. website management features.
M2R5 138 YCT
 Adobe PageMill and SiteMill– SiteMill are the • Navigation; It is a search engine used on websites
right choices for both managing and editing web pages where visitors communicate what they are searching
on a SiteMill server. This catalog website checks each for. Website navigation is the key to retaining visitors.
link and displays all errors. Both programs currently So it's important to keep navigation simple, intuitive
support HTML as well as Netscape plugins. on each page.
PageMill is a great option for creating web pages. It • F shaped pattern reading; That's the most common
allows you to create web pages that contain forms, way to scan text on a website. Most of what people see
backgrounds, internal links, external links, images, in the upper and left area of the screen. The F-shaped
image maps, and detailed text formats. layout copies our natural pattern of reading.
• Visual Hierarchy; This is the order of arrangement
8.6 Document Management: based on the importance of elements. This could be
Document management is a system or process used either size, colour, this is done by imagery, contrast,
to track and store electronic documents. It provides typographic, whitespace, texture and style. Among the
document security, access control, centralized storage, most important works of visual hierarchs establish a
and streamlined search and retrieval. Document focal point that shows visitors where the most
management may include file organization, uploading important information is.
etc. which are described as follows– • Content; An effective web design consists of both
File Organization– When organizing files on your good design and good content. Good content using
site, keep files in separate folders. The site is easy to compelling language can attract and influence visitors,
update when organized this way. The site maintains converting them into customers.
separate folders for images, HTML files, videos, sounds, • Grid-based layout; Grids help structure your design
and Common Gateway Interface (CGI) scripts. and keep your content organized. Grid based layout
File Name– While keeping the file name, the organizes content in a rigid grid structure with
extension should also be kept in mind. To make your columns that are lined up and balanced.
website visible to as many people as possible, include • Load Time; Often many web visitors expect a site to
those who can't see long file names. load in 2 seconds or less and will likely abandon a
Uploading– Transferring files from your computer website that does not load in under 3 seconds.
to the Internet is called uploading. Always upload the file Optimizing image size will help your site load faster.
in the correct format HTML and text files must be • Mobile Friendly; Nowadays people are using phones
uploaded in ASCII format while images, CGI scripts, or other tools to browse the web. It is important to
Flash Files, sounds and videos must all be uploaded in consider building your website with a responsive
binary format. layout where your website can adjust to different
Backup– You should always make sure to backup screens.
your files on your website. Store them in a safe place by 8.7(i) Planing of Website Design:
placing them on a CD or zip disk. In case of loss, you
When the user decides to keep the website business
can upload it again on the side.
or personal, it is necessary to consider many points
before creating the website which are as follows–
8.7 Web Page design Ideas and Principels: (i) Identify your website goals.
An effective website design should accomplish its (ii) Identify your target audience.
intended function by attracting visitors as well as (iii) Define your Unique Selling Proposition.
conveying its specific message. Consistency, colors, (iv) Secure a domain name and hosting.
typography, imagery, simplicity and functionality and (v) Choose a website builder.
many more factors contribute to design good website. (vi) Create and assemble design elements.
Following are some principles about web page (vii) Specify content for your core website pages.
design that help you design effective web pages– (i) Identify your website goals– Before you start
• Purpose of the website; Your website needs to adjust building a website, you need to know why you are
to the needs of the users. Websites can have many building it. Is it purely informational, or are you selling a
different purposes but all websites have the same main product? Are you looking to increase customer
purposes like describing expertise, building your engagement through your site? Knowing the answers to
reputation, Lead generation etc. these questions will help you create a plan that is
• Simplicity; Simplicity is the best solution when strategically linked to your business goals, which is why
considering user experience and the usability of your it's important to always start at square one; The purpose
website. You can simplify your website by keeping in of your website is the somewhat obvious reason what
mind factors like color, type, imagery etc. you think a website can do for you.
M2R5 139 YCT
 You need to highlight your expertise through blog Website builders allow you to easily add structural
posts and drive users to your contact page. Build your components (like blank space, dividers, background
newsletter subscriber base. images, custom titles, footers, and menus) as well as
You need to create interesting and engaging lead design elements like– images, videos, text blocks, titles,
magnets and add opt-in forms to your site. forms, slides show, button etc.
(ii) Identify your target audience– It is important Option 2: Custom code, this method offers a lot of
to clearly identify the target audience of your website flexibility. However, coding your own website requires
while planning your website. Only then you can make specialized knowledge and is almost certainly
strategic plans to take action to get website visitors. impractical for your needs. You will need to use a web
If you're trying to attract everyone to your website, programming or scripting language that is "client side"
you're probably not going to attract anyone. Casting a (the user's web. Browser) or "server" side (the server
broad, net doesn't help drive traffic, connect with where your site's files are stored). Those languages
audiences, or increase conversions. So, you need to know include–
who you are trying to reach. ASP/ASP.NET, CSS, HTML, JavaScript, Perl, PHP,
If you skip this step and fail to clearly identify your Python, Ruby on Rails, XML, etc.
target audience, it can lead to a variety of marketing Option 3: Hire a professional website designer. If
problems. you don't want to go either of these routes, you have
You won't know how to talk to your audience. If you another option. You can hire an expert web designer to
don't know who are your customers and what they like, create your website. A professional web designer will
need, and don't want, it's hard to know how to speak to take the information you have gathered and build your
them directly. When you can clearly imagine your site for you. That site can be created through one of the
audience, it becomes much easier to create, copy that options mentioned above. Could the designer can use a
resonates with them. website builder, content management system, or custom
(iii) Define your Unique Selling Proposition– A code for your site. Your site will cost more for the
unique selling proposition, or USP, is something special project and be less expensive when the designer uses
that makes your brand, products or services different and prebuilt themes and drag and drop tools.
better than your competitors. It explains the selling (vi) Create and collect design elements– Now you
points that get prospects to act and take one step closer to have a strategy, domain name, and platform to build your
becoming your customer. site. The next step in this website plan template is to put
To develop your unique selling proposition, think together the content you will need to populate your site.
about your brand products and services and answer the Start the process by creating and collecting design
following questions. How are you different from your elements.
competitors? Why does this difference matter to Create and collect branding design elements. Choose
customers? What specific benefits do customers get by the theme/template of your choice.
choosing you over the competition? (vii) Create content for your main website pages–
(iv) Secure a domain name– You need a domain For a standard website, you should have content ready
and web hosting to make your website visible online. for five key pages, Home, About, Product/Service,
When you choose a domain, you have two parts of Review/Application and Contact Page if you are
the domain to consider– The custom phrase that starts planning to create a blog, you should have at least one
with the "dot" and the domain comes before extension. blog post ready.
Example– Domain names are .com, net, info.co and Home Page– The home page is a way for you to tell
⋅org. These were the first domain extensions that existed, your business story and guide website visitors toward the
which is why many sites use them. They are also in high end goal, you set for the site. The first opportunity is to
demand because they are the most recognizable. take the lead (to get them to add you to your list, buy the
But, there are now hundreds of new domain product, etc.).
extensions known as generic top level domain names As you create your home page content, remember,
(gTLDs) that you can use. You can now choose domain keep it simple. Don't go into too much detail. Use short,
extensions that are highly relevant to your brand. scannable blurbs and then lead users to longer pages for
(v) Choose a website builder– When it comes to more information.
building your website, you have options– Put important information first. Users usually don't
Option 1: DIY Website Builder tools are usually scroll very far down the page so keep all the important
drag and drop tools. This means they don't require you to information near the top of the homepage.
learn or write any custom code. You select a theme or Explain how you help. Grab attention immediately
website layout and drag preset elements where you want by clearly explaining what you do and how you help
them on each page. your audience to solve a problem.
M2R5 140 YCT
 Present your unique value proposition. Quickly • Develop sub directories.
show what makes you different from competitors. • Plan to expand your website.
Include a call-to-action. Design strategic calls-to-action • Organize your directories links.
that guide users through your site Move toward the end • Use simple file names.
goal. • Develop and maintain a permanent file address.
About Page– Your about page is your opportunity • If you have to change an address after your
to go in-depth about who your brand is, what you do, and website, place a redirect page or link in the old
why. Tell a story that answers the following questions. location.
Who is the site for?– What can visitors do on the
site? What makes the site different from others of its
8.8 Search Engine:
kind? Why did you start this venture? Was there a A search engine is software that helps Internet users
moment or event that sparked your desire to bring your search for information on the World Wide Web. Google,
idea to the web? Bing, Yahoo, Baidu etc. are popular search engines.
Your about page will probably be one of the most The search engine does its search with the help of a
visited pages on your site. particular keyword or phrase and returns results related
Product/Service Pages– Most likely you're using to these keywords or phrases. Displays in the form of
your site to sell something, whether it's a service that lists which are called SERPs (Search Engine Result
customers must call to schedule or a product that Pages).
customers can purchase directly on the site. So you How does a search engine work?– There are many
should have a landing page for your services or an e- types of search engines and the way each search engine
commerce product page for your items for sale. This works is different. Every search engine has its own
page use it as an opportunity to showcase and promote mathematical formula, which is called algorithm. This
and provide your offers. algorithm decides which website will come first and last
Information; General details about the when searched, that is, it is the algorithm that decides the
product/service ranking of a website on the result page.
Assurance; Assurance of reasons customers will The main function of a search engine is to search for
benefit from the product/service. information by visiting different web pages, organize
Inspiration; Words that guide interested prospects them and rank the content according to its quality. A
to the next step toward doing business with you. crawler based search engine has to follow crawling,
Connected; How to strategically use copy and indexing and ranking steps.
visuals on product landing pages.
Praise/review pages; Customers need to learn to 8.9 Meta Search Engine:
trust your brand before they choose to do business with Meta search engines are programs that submit the
you. search query simultaneously to multiple search engines
You can build that trust by creating a page full of and display the executed results sequentially. This search
customer testimonials or reviews. engine removes duplicate files. These search engines are
Genuine reviews and testimonials connect with time-saving and provide users with access to multiple
readers in a way that sales copy can't because the search engines from one place.
message is authentic views of other people's experiences Dogpile, meta crawler etc. are examples of meta
with your brand. search engines.
Contact Page– The Contact page may seem like a 8.10 World Wide Web (WWW):
boring, thought-provoking page, but it one of the most World Wide Web is also called Web. This is the
visited pages on a website. It's usually one of the first most popular service available on the internet. It is a
touchpoints customers encounter when they decide huge group of information interconnected through
whether to work with you or buy from you. So don't hyperlinks which can be accessed on the Internet with
ignore this page. it is necessary to– the help of a web browser. It is the second most popular
To Develop Websites– Website design and Internet service after e-mail.
development should be a thorough ongoing and planned Internet is a global system of interconnected
process. One of the most effective ways to do this is to computer networks which is made up of many small and
create a website outline. A website outline helps you big computer networks spread across the world
control the growing database of files that accumulate as connected through various communication mediums. It
you develop your site. includes personal, public, educational, business and
government networks etc. It uses a common set of
• Organize your files.
protocols for data transmission known as TCP/IP. The
• Create a root directory. primary purpose of the Internet is to facilitate the
M2R5 141 YCT
transmission of information. There are many different builder provides a friendly interface for selecting
tools used on the Internet to make this possible. Among elements of that type, which you want to add to a form.
these, e-mail, newsgroup, telnet, gopher, FTP and wide HotDog has user-friendly tools for managing links,
area network are important tools. The World Wide Web creating tables, and creating frames. With Hotdock Pro,
(WWW) is the most popular Internet tool. you can not only customize the toolbar, but you can also
8.11 Web Browser: choose icons and labels for the toolbar buttons. Another
A web browser is a software application that allows nice feature of Hotdog Pro is that it allows you to define
a user to view and display web pages. Text and images your own tags or tag sets. Ability that can be accessed
present on a web page can be a hyperlink which can be through the menu.
clicked to easily go to another web page. Web browsing Hot Metal and Hot metal Pro: Hot metal is an
software is a client of an Internet server that is provided editor from SoftQuad Software, which is a specialized
free of charge by Microsoft Corporation and many other (Standard General Markup Language) SGML editor.
companies. It is through this that any information can be There are two versions of Hot Metal. Hot Metal is
sent, received or retrieved on the Internet. Web browser available for free. What's even better is that the software
the location of the requested page only after providing
has made a serious commitment to developing and
the URL identify.
Some famous web browsers are Microsoft Internet improving this freeware editor.
Explorer, Microsoft Edge, Mozilla Firefox, Opera, Hot Metal Pro supports features that put it in the
Google Chrome etc. same league as Microsoft Front Page and Micromedia
Backstage. Versions of this editor are available for
8.12 HTTP: Windows, Macintosh, Power Macintosh and UNIX.
HTTP stands for Hypertext Transfer Protocol which Hot Metal Pro is an advanced document system that
was invented by Tim Berners Lee and his team. It is a supports the most current HTML specifications and
stateless protocol, that is, all requests sent by the client extensions. It supports HTML, Java, Active X objects,
are executed individually and the connection is closed scripts and even Shockwave. Hot Metal Pro is an
after the request is responded to. HTTP is used to deliver integrated follows WYSIWYG and tag marker approach.
data (e.g. HTML files, images, plain text, hypertext, Some of the best features of Xsite Pro are–
audio, video, etc.) over the World Wide Web. • Simple and straight forward designed interface.
HTTP provides a set of rules and standards that • Hundreds of website templates available.
govern how information can be transmitted over the • A well thought through interactive layout.
World Wide Web. HTTP provides standard rules for web • Create unlimited websites.
browsers and servers to communicate. It is an application
layer protocol based on TCP. It uses a client server • Scripts can be run on multiple pages. It allows you to
communication model. HTTP is a connectionless track events and report factors on your pages. Allows,
protocol because once the connection is closed there is such as on its web page on returns on investment
no connection between server and client. • No HTML coding required.
8.13 Publishing Tool: • Audio and video in a few simple clicks.
There are many web publishing tools developed by • Websites become more powerful when they have
various corporations. Some of the more popular ones relevant links to other sites. With site Pro, you can
are– create multi-directories of your links, with categories,
• Netscape navigator gold subcategories, automatically generated screen shots
• Macromedia's backstage desktop studio and more.
• Adobe pagemill and sitemill • Use the host and domain name of your choice.
• Other web publishing tools like– Hot Dog, Hot • Ideal for any size site.
Metal and Web Edit l • Windows Compatibility.
Other Web Publishing Tools– There are a wide Adobe Dream Weaver: The latest version of
variety of web publishing tools. Some other web Dream weaver is Adobe Dream Weaver CS5 and there
publishing tools are as follows– are four different solutions to choose from so you can
Go Live: Adobe GoLive has drag-and-drop purchase the package that fulfill your needs.
authoring features that will building your site in no time.
Features of Dream Weaver–
It also includes state-of-the-art facilities.
Live View; You can design your web pages under
HotDog: It supports HTML, Netscape extensions to
HTML, and Internet Explorer extensions to HTML. real web browser conditions with this new function.
When you have multiple documents open in the editor, Simple code editing is required, and the effect of changes
you can quickly switch between them using the tabs at can be seen in real time.
the bottom of the document window. Hot Dog has a • 3D Transformation Tool– Bring your website live
friendly interface. using Flash Professional software.
HotDog lets you preview your pages without saving • Faster design tools– Photoshop extended software
the page. Creating forms with HotDog is easy by simply allows you to exercise more with images, while
displaying the form builder on the toolbar. The document making changes quickly.
M2R5 142 YCT
 Practice Questions with Explanatory Solutions
1. A web browser is known as a web client– Ans. (a) Full form of CMS is Content Management
(a) application (b) Software System. This is a type of software which can be used
(c) app (d) link
without any special knowledge. Website content can
Ans.(b) Client computer is a type of software, which
works to provide service to us through the server. A be created, updated or managed. CMS is a type of
web browser is known as a web client. ready-made system where no coding is required, you
2. What is the meaning of www? just have to write and post your content in an easy
(a) World Wide Web interface.
(b) Wide Web World 7. Which of the following software can be used to
(c) World Wide Web create a website–
(d) none of these (a) Power point (b) Excel
Ans. (c) The full name of www is World Wide Web. (c) Dream Weaver (d) ERP
It is a group of documents, which are connected to Ans. (c) Dream weaver is a software application that
each other through hypertext. Hypertext document is used by web developers and designers to develop
contains text, images, audio etc. www is a service of websites and applications. Dream Weaver supports
the internet. many web and programming languages like HTML,
3. A web page is a document– C# VB, ASP, XML etc. Dream Weaver's interface is
(a) html (b) http WYSIWYG (What you see is what you get). That is,
(c) www (d) none of these whenever we make any change in the page, we see it
Ans.(a) A web page is a document, which is usually immediately.
written in HTML (Hypert Markup Language) and it is 8. Full form of SGML is–
accessed in the browser through the Internet and other (a) Standalone Generalized Markup Language
networks. (b) Standard Generalized Markup Language
4. Coaxial cable is useful for? (c) Standard General Markup Language
(a) LAN (b) Wi-Fi (d) Standalone General Markup Language
(c) Broad band (d) Bus topology Ans. (b) Full form of SGML is Standard Generalized
Ans. (d) In bus topology, only one wire is used and all Markup Language. It is a standard for specifying a
the computers are connected sequentially through the document markup language or tag set. Such a
same wire. Coaxial cable is useful for bus topologies. specification is itself a Document Type Definition
In this, a device is installed at the beginning and end (DTD). SGML is not a document language in itself
of the wire which is called terminator. Its function is but a description of how to specify one. This is
to control the signal. metadata.
5. A standard protocol for receiving e-mail is– 9. Web crawler is called–
(a) POP2 (b) WiFi (a) Link directory (b) All optimizers
(c) POP3 (d) none of these
(c) Web spider (d) Web Manager
Ans. (c) POP3 (Post Office Protocol) is an Internet
Ans.(c) Almost all types of information are available
standard protocol used to send remote mail servers
on the Internet in the form of online web pages. Web
over TCP/IP connections. To receive e-mail from a
pages are stored on databases of servers spread across
local e-mail software client. Hosted by Internet
the world. When a user searches for a certain
Service Providers Mail servers also use POP3 to
information on a search engine, the programs built on
receive and hold e-mail for their subscribers.
the search engine search for that information on all the
6. What is CMS in web design?
updated and new pages available on the Internet with
(a) Content Management System
(b) Creative Management System the help of search algorithms. Such programs are
(d) Creative Mengerial System called search engine bots, web crawlers or web
(c) Content Mixing System spiders.

M2R5 143 YCT

10. The full form of SEO is– (c) It is a software.
(a) Search engine operation (d) It is a database.
(b) Search entry optimization Ans.(a) The full form of PHP is "PHP: Hypertext
(c) Search engine optimization Preprocessor". It is a server side scripting language
(d) None of these. used in web development. The program written in
Ans.(c) Full form of SEO is Search engine PHP always runs in the server and whatever is output
optimization. This is a technique by which bring our is converted as an HTML page and displayed on the
page to the top in the search engine. SEO helps to user's web browser.
bring our blog to No. 1 rank in Google. This is a 16. Computer crime comes under–
technique that increases the number of visitors to your (a) Fake chatting (b) stealing computer
website by placing it at the top of the search results of
(c) hacking (d) none of these
the search engine.
Ans. (c) A person who obtains information illegally
11. Which of the following is a search engine?
from other people's computer and computer network
(a) Twitter (b) Facebook
for his personal gain. The person who obtains
(c) MySpace (d) Google
information from someone to cause harm is called a
Ans. (d) Search engine is a software, which helps hacker and the process of hacking is called hacking.
Internet users to search information on the World Hacking comes under computer crime.
Wide Web. Google, Bing, Yahoo, Baidu etc. are
popular search engines. 17. What are the terms Document Node, Node List,
12. Search engines are capable of searching…….. Element Node?
types of information– (a) Software (b) Animation
(a) Document (b) Audio (c) Clipart (d) interface
(c) Video (d) All of the above Ans. (d) Word, Document Node, Node List, Element
Ans. (d) Search engines do their searches with the Node etc are interfaces.
help of a particular keyword or phrase and display the
results related to these keywords or phrases in the 18. What is the full form of ASP?
form of a list which are called SERPs (Search Engine (a) Actual Save Page (b) Activete Service Page
Result Page). In the search engine result page, (c) Active Serve Pages (d) none of these
different types of information related to the query Ans. (c) ASP (Active Server Pages) was developed by
searched by the users are searched. In this includes
Microsoft to enable programmers to create dynamic
text documents, media files (images, videos, audio
animations), etc. websites. It is the first server side script engine and
13. To make the website mobile friendly, Website can has now been superseded by ASP.NET. ASP
be made.......... and ASP.NET are programs that run on Windows.
(a) Responsive (b) reactive This script can be written with HTML code but this
(c) fast loading (d) light code can be interpreted only on the web server and
Ans.(a) To make the website mobile friendly, the data can also be stored in the database.
website can be made responsive. Responsive web 19. Internet surfing software is–
design is a process in which the website is designed in
(a) Lynx (b) Google
such a way that it adjusts its layout according to the
screen size and orientation on desktop, laptop, tablet (c) Yahoo (d) E-mail
and even small screen mobile devices. Ans. (a) Lynx is Internet surfing software and was a
14. What is Word Press? text-based web browser that did not display graphic
(a) It is software used to press text. content. It can be configured quite easily.
(b) It is a text formatting software.
(c) It is a CMS (Content Management System). 20. What is Microsoft FrontPage?
(d) It is a mail service. (a) Document format
Ans.(c) WordPress is a type of Content Management (b) Web development tools
System (CMS) that is used to create websites. It is an (c) Insert Page Tool
open source software program built with PHP and (d) None of these
MYSQL. It can be downloaded for free from the Ans. (b) Microsoft FrontPage is a web development
internet and by installing it on your web server, you tool used to create web pages or websites. It is a visual
can easily create a website or blog. tool, meaning you do not need to do HTML coding to
15. Which of the following is correct about PHP? create a website. You can also design just by drag and
(a) It is a server side scripting language.
drop.
(b) It is a client side scripting language.
M2R5 144 YCT