Scribd
Upload
49 views36 pages

Web Desingning

The document discusses various aspects of web design and development including: 1. The basic principles of developing a website include keeping it simple, consistent, readable, mobile compatible with proper text size, font, images, and videos. 2. Planning website development involves research and goal setting, site planning, designing layouts, defining the purpose and content, coding, testing, and maintenance. 3. Domains name websites and provide identification while hosting stores and delivers website content through servers connected to by browsers. 4. Responsive websites provide optimal experiences across devices like laptops, desktops, phones and tablets using flexible HTML and CSS.

Uploaded by

faiyazalamofficialwork
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
49 views36 pages

Web Desingning

The document discusses various aspects of web design and development including: 1. The basic principles of developing a website include keeping it simple, consistent, readable, mobile compatible with proper text size, font, images, and videos. 2. Planning website development involves research and goal setting, site planning, designing layouts, defining the purpose and content, coding, testing, and maintenance. 3. Domains name websites and provide identification while hosting stores and delivers website content through servers connected to by browsers. 4. Responsive websites provide optimal experiences across devices like laptops, desktops, phones and tablets using flexible HTML and CSS.

Uploaded by

faiyazalamofficialwork
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

WEB DESIGNING

UNIT – 1
Q, No – 1. Describe the basic principle of developing a website.
 There are various principle of developing a website.
a) Simple is the best
b) Consistency
c) Readability
d) Mobile Compa bility
e) Text of size
f) Types of font
g) Image
h) Videos etc…

Q, No – 2. Describe the planning of developing a web designing.


 There are various planning a developing a web site.
a) Research and Goal Se ng
b) Planning a Site
c) Designing the Layout
d) Purpose of Developing
e) Wri ng the Content
f) Coding the website
g) Tes ng and Lunching
h) Maintenance

Q, No – 3. Write the short note of Domin and Web Hos ng.


 Domain
 The domain is the name of address of website that allow to visit visitor on your website.
 The domain name is the iden fy of the IP address on the internet.
 The domain name is the string of characters that gives the website an iden fy.
 Example of domain name is a Google.com and facebook.com etcc..

 Hos ng
 The web hos ng is a storage loca on that is use to store content of your website.
 The website hos ng and stored content of your website that are also known as servers.
 The computer will connect to the sever and the web pages will be delivered through the browser.

Q, No – 3. Discuss responsive website.


 The responsive web site is provide service to the user and get every respond to the user.
 The responsive web site provides an op mal experience and easy reading and easy naviga on.
 They are suitable for every devices as for example Laptop, Dekstop, Mobile and Tablets etc.
 The responsive web design are use HTML and CSS to automa cally resize hide, shrink all devises
likes Mobiles, PC, Tablets etc…
Q, No – 4. Difference between Sta c and dynamic website.
 Sta c Website
a) In the sta c website the webpages are returned by the server which are prebuilt source code files.
Such as CSS, HTML and Javascript.
b) Content of webpages cannot change at the run me.
c) No interac on with database is responsible.
d) It is faster to load as a dynamic website.
e) Lower development cost.

 Dynamic Website
a) In dynamic website the web pages are returned by server which are process during the run me
and source are wri en in run me.
b) Content of webpages can be changed.
c) Interac on with database is possible.
d) It is slower than sta c website.
e) Higher development cost.

Q, No – 5. Describe HTML documents and suitable example of structure of content of html.


 An HTML document is a file containing hypertext markup language. HTML code is based on tags, or
hidden keywords, which provide instruc ons for forma ng the document.

 HEAD: This contains the informa on about the HTML document. For Example, the Title of the page,
version of HTML, Meta Data, etc.
 BODY: This contains everything you want to display on the Web Page.

 Example :-

HTML Document Structure


Q, No – 6. Write HTML all Tags with meaning.
Tag Descrip on
<!--...--> Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<address> Defines contact informa on for the author/owner of a document
<area> Defines an area inside an image map
<ar cle> Defines an ar cle
<audio> Defines embedded sound content
<b> Defines bold text
<body> Defines the document's body
<br> Defines a single line break
<bu on> Defines a clickable bu on
<form> Defines an HTML form for user input
<h1> to <h6> Defines HTML headings
<head> Contains metadata/informa on for the document
<header> Defines a header for a document or sec on
<hr> Defines a thema c change in the content
<html> Defines the root of an HTML document
<i> Defines a part of text in an alternate voice or mood
<iframe> Defines an inline frame

Q, No 7. Root Element :- The <html> element is the root element and it defines the whole HTML
document. It has a start tag <html> and an end tag </html> . The <body> element defines the document's
body. It has a start tag <body> and an end tag </body> .
Q, No – 8 . Parsing Element :- The following elements have varying levels of special parsing rules: HTML's
address , applet , area , ar cle , aside , base , basefont , bgsound , blockquote , body , br , bu on ,
cap on , center , col , colgroup , command , dd , details , dir , div , dl , dt , embed , fieldset , figcap on ,
figure , footer , form ...
UNIT – 2
Q, No – 1. How to define MARK Element, STRONG Element, CODE Element and SMALL Element.
MARK Element :- Mark element are used to mark and highlight the text in html documents for
reference purposes.
CLASS – Indicate class name for the mark element
ID – Indicate a unique id for the mark element.
STYLE – Indicate a inline element for the mark element.
TITLE – Indicate the tle element for the mark element.

STRONG ELEMENT :- The strong element are used are used to emphasize important text.

CODE ELEMENT :- Code element are used to computer code in html documents.

SMALL ELEMNT :- Small element are used to represent small element in documents.

Q, No – 2 Explain and embedded and interac ve elements.


 Embedded elements :- Embedded elements are used to import content from other sources into
the html documents.
 List of embedded elements.
AUDIO :- Audio represent the sound stream.
CANVAS :- Canvas represent the graphics designs.
EMBEDDED :- Embedded represent the plugin content in the html documents.

 Interac ve Element :- Interac ve element are intended for user interac on


 List of interac ve elements.
IFRAME :- Represent the inline frame.
LABEL :- Represent label for and input element.
BUTTOM :- Represent a push bu on

Q, No – 3. Described the HTML Tags.


 Tags are the instruc ons that are embedded directly into the text of the documents.
 There are tow types of Tags
1. Paired Tage :- A tag is said to be a paired tag if it, along with a companion tag flanks the tag.
For example <B> tag is paired tag.
2. Singular Tag :- A singular tag is not companion tag.
Example with <BR> tag insert a line break.
Q, No – 4. Describe the Ordered and Unordered list.
 Ordered List :- An ordered list defines a list of items in which the order of the items are ma ers. An
ordered list is also called a number list.
 ordered list tag is used to create an ordered list.
Example :-
<html>
<head>
< tle>ordered list</ tle>
</head>
<body>
<h1>Example of ordered list in default</h1>
<ol >
<li>Sachin</li>
<li>Manoj</li>
<li>Parth</li>
<li>sujay</li>
<li>Amraditya</li>
</ol>
</body>
</html>
 Unordered List :- An unordered list defines a list of items in which the order of the items does not.
Or in other words, an unordered list tag is used to create an unordered list.
 It is also known as bulleted list. In an unordered list each element in the list is defined using <li>
tag.
Example :-
<html>
<head>
< tle>unordered list</ tle>
</head>
<body>
<h1>Example of unordered list in default</h1>
<ul>
<li>Sachin</li>
<li>Manoj</li>
<li>Parth</li>
<li>sujay</li>
<li>Amraditya</li>
</ul>
</body>
</html>

Q, No – 4. Discuss about HTML Table.


 What is table tag in HTML with example?
 HTML table tag is used to display data in tabular form (row * column). There can be many columns
in a row. We can create a table to display data in tabular form, using <table> element, with the help
of <tr> , <td>, and <th> elements.
 The HTML table tag (<table>) is used to represent data in a structured way by crea ng a table. For
example,

Example :-
<table border="1" >
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Harry Depp</td>
<td>28</td>
<td>Britain</td>
</tr>
<tr>
<td>John Smith</td>
<td>35</td>
<td>USA</td>
</tr>
<tr>
<td>Ram Krishna</td>
<td>19</td>
<td>Nepal</td>
</tr>
</table>
Q, No – 5. Write short note on image and how to insert image in web pages.
IMAGE :- The HTML <img> tag is used to embed an image in a web page. Images are not technically
inserted into a web page; images are linked to web pages. The <img> tag creates a holding space
for the referenced image.
The <img> tag is empty, it contains a ributes only, and does not have a closing tag.
The <img> tag has two required a ributes:

src - Specifies the path to the image


alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
<img src="images/dinosaur.jpg" alt="Dinosaur" />

Q, No – 6. Define different format of image.


Image Format describes how data related to the image will be stored. Data can be stored in
compressed, Uncompressed, or vector format. Each format of the image has a different advantage and
disadvantage. Image types such as TIFF are good for printing while JPG or PNG, are best for the web.
 TIFF(.tif, .tiff) Tagged Image File Format this format store image data without losing any data.
It does not perform any compression on images, and a high-quality image is obtained but the
size of the image is also large, which is good for printing, and professional printing.
 JPEG (.jpg, .jpeg) Joint Photographic Experts Group is a loss-prone (lossy) format in which
data is lost to reduce the size of the image. Due to compression, some data is lost but that
loss is very less. It is a very common format and is good for digital cameras, nonprofessional
prints, E-Mail, Powerpoint, etc., making it ideal for web use.
 GIF (.gif) GIF or Graphics Interchange Format files are used for web graphics. They can be
animated and are limited to only 256 colors, which can allow for transparency. GIF files are
typically small in size and are portable.
 PNG (.png) PNG or Portable Network Graphics files are a lossless image format. It was
designed to replace gif format as gif supported 256 colors unlike PNG which support 16
million colors.
 Bitmap (.bmp) Bit Map Image file is developed by Microsoft for windows. It is same as TIFF
due to lossless, no compression property. Due to BMP being a proprietary format, it is
generally recommended to use TIFF files.
 EPS (.eps) Encapsulated PostScript file is a common vector file type. EPS files can be opened
in applications such as Adobe Illustrator or CorelDRAW.
 RAW Image Files (.raw, .cr2, .nef, .orf, .sr2) These Files are unprocessed and created by a
camera or scanner. Many digital SLR cameras can shoot in RAW, whether it be a .raw, .cr2, or
.nef.
Q, No – 7. Described about Frame and all Disadvantage and Advantage.
 HTML frames are used to divide your browser window into mul ple sec ons where each sec on can
load a separate HTML document. A collec on of frames in the browser window is known as a
frameset. The window is divided into frames in a similar way the tables are organized: into rows and
columns.
 HTML Frame used to split the browser window in several individual frames that can contain a
separate HTML web document.
 Frame is use to improve appearance and usability of a site.
 HTML document within frame include a other web pages link can be opened in the desired frame.

 Advantages of Frames
 Frame Provides technical sophis cated appearance to the web site.
 It facility to reduce downloading me and improves the usability of the website.
 Frames generally include naviga on link, header or footers, which help user to find and navigate to
required informa on.
 It separates content of website from naviga on elements, which is useful for website maintenance
and content modifica on.

 Disadvantages of Frames
 The web developer must be track of more HTML documents linked with main frame.
 It is difficult to print the en re page, which is developed using frame.

Example :-
<html>
<head>
< tle>Frameset Example 1< tle>
</head>
<frameset rows="35%, 65%">
<frame src ="frame_1.html" />
<frame src ="frame_2.html" />
</frameset>
</html>

Q, No – 8. Define audio and video.


Audio - The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from.
The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support
the <audio> element.
Video - The <video> tag is used to embed video content in a document, such as a movie clip or other
video streams.
The <video> tag contains one or more <source> tags with different video sources. The browser will choose
the first source it supports.
The text between the <video> and </video> tags will only be displayed in browsers that do not support the
<video> element.
UNIT – 3

Q, No – 1. Describe about all things in CSS.


 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of mul ple web pages all at once
 External stylesheets are stored in CSS files.
 CSS is defined as a method sheet language that provides web designers control over how an internet
site communicates with web browsers including the forma ng and display of their HTML
documents.

Advantage
 It is less complex therefore the effort are significantly reduced.
 It helps to form spontaneous and consistent changes.
 Easy for the user to customize the online page
 It reduces the file transfer size.
Disadvantage
 There exists a scarcity of security.
 Browser compatibility.
 There might be cross-browser issues while using CSS.
 There are multiple levels which creates confusion for non-developers and beginners.

Three way to insert CSS.

External CSS
With an external style sheet, you can change the look of an entire website by changing just one file!

Each HTML page must include a reference to the external style sheet file inside the <link> element,
inside the head section.

Example
External styles are defined within the <link> element, inside the <head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

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

Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section.

Example
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

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

</body>
</html>

Inline CSS
An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any
CSS property.

Example
Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Q, No – 2. Describe CSS Syntax.


 CSS syntax refers to the way we write CSS code. In order to write CSS, you need to first identify the
element in your HTML page that you want to style before adding styles using a plethora of built-in
CSS properties.
 There are multiple ways to identify and tell CSS which element in your HTML page it should style.
Example
h1 {
color: blue;
font-size: 12px;
}

Q, No – 3. What is selector and explain different types of selector.


 CSS Selectors are used to describe which HTML element(s) you want to style. CSS provides multiple
ways to describe the selectors:

The CSS element Selector


The element selector selects HTML elements based on the element name.

Example
Here, all <p> elements on the page will be center-aligned, with a red text color:

p {
text-align: center;
color: red;
}

The CSS id Selector


The id selector uses the id attribute of an HTML element to select a specific element.

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

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example
The CSS rule below will be applied to the HTML element with id="para1":

#para1 {
text-align: center;
color: red;
}

The CSS class Selector


The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example
In this example all HTML elements with class="center" will be red and center-aligned:

.center {
text-align: center;
color: red;
}

The CSS Universal Selector


The universal selector (*) selects all HTML elements on the page.

Example
The CSS rule below will affect every HTML element on the page:

* {
text-align: center;
color: blue;
}

Q, N0 – 4. Explain the CSS property.


Q, No – 5. Define font and different types of font.
 Font represent the style and size of the text that displayed in a web browser.
1) Serif
2) Sans-Serif
3) Cursive
4) Fantasy
5) Monospace

Q, No – 6. Types of font property.


1. Font-family property
2. Font-size property
3. Font-size adjacent property
4. Font-style property
5. Font weight property

Q, No – 7. Define the list and table.

 Table

 A table contains rows and columns.


 tr tag and end of tr tag are used to create rows in the table.
 The number of tr tags in the syntax specify the number of horizontal rows in the table.
 The columns and content in the table is created using td tag and end of td tag.

 List
 Lists are used to group together related pieces of information.
 It is used for ranking the data; I mean numbering or bulleting the data according to its rank.
 It can also be used for designing and layout formatting.
 For an example: You can design a menu on webpage using lists.

HTML contains three types of lists.


1. Ordered List
2. Un-ordered List
3. Definition List
Q, No – 8. Describe the various property of list.
 There are various CSS properties that can be used to control lists. Lists can be classified as ordered
lists and unordered lists. In ordered lists, marking of the list items is with alphabet and numbers,
whereas in unordered lists, the list items are marked using bullets.

The CSS properties to style the lists are given as follows:

o list-style-type: This property is responsible for controlling the appearance and shape of the marker.
o list-style-image: It sets an image for the marker instead of the number or a bullet point.
o list-style-position: It specifies the position of the marker.
o list-style: It is the shorthand property of the above properties.
o marker-offset: It is used to specify the distance between the text and the marker. It is unsupported in IE6 or
Netscape 7.

Q, No – 9. Describe the property of table.


 Table Properties allows you to set general properties of a table, set cell styles for various parts of a
table, and save a set of those properties as a TableLook. You can: Control general properties, such
as hiding empty rows or columns and adjusting printing properties.
1. The table-layout property
2. The caption-side property
3. The border-collapse property
4. The border-spacing property
5. The empty cell property

Q, No – 10. Write CSS ID and Class.


 CSS ID :- The id selector is used to select the id attribute of an HTML element for selecting a
particular element. An id is always unique within the page, so it is chosen to select a single, unique
element.
 It is written with the hash character (#), followed by the id of the element.
 Syntax:
#id{
// declarations of CSS
}

 CSS Class :- The class selector is used to select the HTML elements with a specific class attribute. It is
written with a period character . (full stop symbol) followed by the class name.

 Syntax:
.class{
// declarations of CSS
}
Q, No – 11. Explain Box model and its dimension.
 The CSS box model is a container that contains multiple properties including borders, margins,
padding, and the content itself. It is used to create the design and layout of web pages. It can be used
as a toolkit for customizing the layout of different elements. The web browser renders every element
as a rectangular box according to the CSS box model.

 Box-Model has multiple properties in CSS.


 content: This contains the actual data in the form of text, images, or other media forms and it
can be sized using the width & height property.
 padding: This property is used to create space around the element, inside any defined border.
 border: This property is used to cover the content & any padding, & also allows setting the
style, color, and width of the border.
 margin: This property is used to create space around the element ie., around the border area.

CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of any
defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each
side of an element (top, right, bottom, and left).

CSS has properties for specifying the padding for each side of an element:

 padding-top
 padding-right
 padding-bottom
 padding-left

 Example
 Set different padding for all four sides of a <div> element:
 div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each
side of an element (top, right, bottom, and left).

CSS has properties for specifying the margin for each side of an element:

 margin-top
 margin-right
 margin-bottom
 margin-left

Example
Set different margins for all four sides of a <p> element:

p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element's border.

CSS Border Style


The border-style property specifies what kind of border to display.

The following values are allowed:

 dotted - Defines a dotted border


 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border

 Example
 Demonstration of the different border styles:
 p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
Q, No – 12. Discuss CSS advanced and grouping dimension.
Dimensions in CSS: To specify the height and width of an element you can use height and width
properties. It does not specify the borders, margins, and padding, it just sets the height and width inside
the border, margins, and padding for an HTML element.

CSS Dimension Properties


PROPERTY DESCRIPTION

height Sets the height of an element

max-height Sets the maximum height of an element

max-width Sets the maximum width of an element

min-height Sets the minimum height of an element

min-width Sets the minimum width of an element

width Sets the width of an element

CSS Height and Width Values


The CSS height and width properties might have the following values

Auto This is the default. The browser calculates the height and width

Length Specify the height and width in px, cm, etc.

% Specify the height and width in percent of the containing block

Initial Provides the height and width to its default value

Inherit The height and width will be inherited from its parent value

Q, No – 13. Explain the Alignment used in CSS.

The text-align property in CSS is used for the alignment of text. This CSS property is used to set the horizontal
alignment of a table-cell box or the block element. It is similar to the vertical-align property but in the horizontal
direction.

The text-align property includes values like justify, center, right, left, initial, and inherit. It specifies the horizontal
alignment of text in an element.

Syntax

1. text-align: justify | center | left | right | initial |inherit;


The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

Example
h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}

Q, No – 14. Write about Pseudo Code and write down common categories of pseudo class in CSS.
A Pseudo class in CSS is used to define the special state of an element. It can be combined with a CSS
selector to add an effect to existing elements based on their states. For Example, changing the style of
an element when the user hovers over it, or when a link is visited. All of these can be done using
Pseudo Classes in CSS.
Note that pseudo-class names are not case-sensitive.
Syntax:
selector: pseudo-class{
property: value;
}

There are various types of pseudo class.


1. Dynamic Pseudo Classes
2. Target Pseudo Classes
3. Language pseudo-Class
4. UI element state pseudo class
5. Structural Pseudo Class
6. Negative Pseudo Class

Q, No – 15. Explain Color property in CSS.

The color property in CSS is used to set the color of HTML elements. Typically, this property is used
to set the background color or the font color of an element. In CSS, we use color values for
specifying the color. We can also use this property for the border-color and other decorative effects.

Text Color

The color property is used to apply foreground color (which includes text color).
body {
color: black;
}

Text Color

The background-color property is used to apply a background color to an element. You can also
use the background shorthand property.
body {
background-color: green;
}

Border Color

The border-color is a shorthand property for setting the color on all sides of an element's
border. There are actually quite a few different properties for doing this (these are included
in the above list).
aside {
border-color: blue;
}

Text Decoration Color

The text-decoration-color allows you to set the color of the text-decoration property.
a:link {
text-decoration: underline;
text-decoration-color: orange;
}

Q, No – 16. How to create web page design.


UNIT – 4

Q, No – 1. Client side scripting :- A client-side script is a small program (or set of instructions) that is
embedded (or inserted) into a web page. It is processed within the client browser instead of the web
server.
The client side script downloads at the client end from the server along with the HTML web page it is
embedded in. The web browser interprets and executes the code and then displays the results on the
monitor.
The script that executes on the user’s computer system is called client. It is embedded (or inserted)
within the HTML document or can be stored in an external separate file (known as external script).
The script files are sent to the client machine from the web server (or severs) when they are requested.
The client’s web browser executes the script, then displays the web page, including any visible output
from the script.
Q, No – 2. What is JavaScript :- JavaScript is a dynamic computer programming language. It is lightweight
and most commonly used as a part of web pages, whose implementations allow client-side script to interact
with the user and make dynamic pages. It is an interpreted programming language with object-oriented
capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of
the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with
the name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet
Explorer, and other web browsers.

> Advantages of JavaScript

 Less server interaction − You can validate user input before sending the page off to the server. This
saves server traffic, which means less load on your server.
 Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have
forgotten to enter something.
 Increased interactivity − You can create interfaces that react when the user hovers over them with a
mouse or activates them via the keyboard.
 Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and
sliders to give a Rich Interface to your site visitors.

> JavaScript has 8 Datatypes


1. String
2. Number
3. Bigint
4. Boolean
5. Undefined
6. Null
7. Symbol
8. Object

> The Object Datatype


The object data type can contain:

1. An object
2. An array
3. A date

Q, No – 2. What is an Operator?
In JavaScript, an operator is a special symbol used to perform operations on operands (values and
variables). For example,

2 + 3; // 5
Here + is an operator that performs addition, and 2 and 3 are operands.

JavaScript Operator Types


Here is a list of different operators you will learn in this tutorial.

 Assignment Operators

 Arithmetic Operators

 Comparison Operators

 Logical Operators

 Bitwise Operators

 String Operators

 Other Operators

 JavaScript Assignment Operators


 Assignment operators are used to assign values to variables. For example,

 const x = 5;

 Here, the = operator is used to assign value 5 to variable x .


 Here's a list of commonly used assignment operators:

Operator Name Example

= Assignment operator a = 7; // 7

JavaScript Arithmetic Operators


Arithmetic operators are used to perform arithmetic calculations. For example,

const number = 3 + 5; // 8

Here, the + operator is used to add two operands.


Operator Name Example

+ Addition x + y
- Subtraction x - y

* Multiplication x * y

/ Division x / y

% Remainder x % y

++ Increment (increments by 1) ++x or x++

-- Decrement (decrements by 1) --x or x--

** Exponentiation (Power) x ** y

Q, No – 3. Describe the various conditional statement.


Conditional statements in JavaScript allow you to execute specific blocks of code based on conditions.
If the condition meets then a particular block of action will be executed otherwise it will execute
another block of action that satisfies that particular condition.
There are several methods that can be used to perform Conditional Statements in JavaScript.
 if Statement
 if-else Statement
 else if Statement
 switch Statement
 Ternary Operator

JavaScript if Statement
The if statement is used to evaluate a particular condition. If the condition holds true, the associated
code block is executed.

Syntax:
if ( condition ) {
// If the condition is met,
//code will get executed.
}

JavaScript if-else Statement


The if-else statement will perform some action for a specific condition. Here we are using the else
statement in which the else statement is written after the if statement and it has no condition in their
code block.
Syntax:
if (condition1) {
// Executes when condition1 is true
if (condition2) {
// Executes when condition2 is true
}
}
JavaScript else if Statement
The else if statement in JavaScript allows handling multiple possible conditions and outputs,
evaluating more than two options based on whether the conditions are true or false.

Example :
1. const num = 0;

2. if (num > 0) {
a. console.log("Given number is positive.");
3. } else if (num < 0) {
a. console.log("Given number is negative.");
4. } else {
a. console.log("Given number is zero.");
5. };
Q, No – 4. Described Loops in Javascript.
The JavaScript loops are used to iterate the piece of code using for, while, do while or for-in loops. It makes the code
compact. It is mostly used in array.
There are four types of loops in JavaScript.
1. for loop
2. while loop
3. do-while loop
4. for-in loop

1) JavaScript For loop


The JavaScript for loop iterates the elements for the fixed number of times. It should be used if number of iteration
is known. The syntax of for loop is given below.

1. for (initialization; condition; increment)


2. {
3. code to be executed
4. }

2) JavaScript while loop


The JavaScript while loop iterates the elements for the infinite number of times. It should be used if number of
iteration is not known. The syntax of while loop is given below.

1. while (condition)
2. {
3. code to be executed
4. }
JavaScript do while loop
The JavaScript do while loop iterates the elements for the infinite number of times like while loop. But, code
is executed at least once whether condition is true or false. The syntax of do while loop is given below.

1. do{
2. code to be executed
3. }while (condition);

Example :

1. <script>
2. var i=21;
3. do{
4. document.write(i + "<br/>");
5. i++;
6. }while (i<=25);
7. </script>

Q, No – 5. What are three kinds of boxes in JS.


Prompt Box
 A prompt box is often used if you want the user to input a value before entering a page.
 When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after
entering an input value.
 If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

Syntax :
window.prompt("sometext","defaultText");

Confirm Box
 A confirm box is often used if you want the user to verify or accept something.
 When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
 If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

Syntax
window.confirm("sometext");

Alert Box
 An alert box is used if we want to make sure information comes through the authenticate user.
Q, No – 6. What is an Event ?
JavaScript's interaction with HTML is handled through events that occur when the user or the browser
manipulates a page.
When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other
examples include events like pressing any key, closing a window, resizing a window, etc.

Mouse events:

Event Performed Event Handler Description

click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over the element

mouseout onmouseout When the cursor of the mouse leaves an element

mousedown onmousedown When the mouse button is pressed over the element

mouseup onmouseup When the mouse button is released over the element

mousemove onmousemove When the mouse movement takes place.

Keyboard events:

Event Performed Event Handler Description

Keydown & Keyup onkeydown & onkeyup When the user press and then release the key

Form events:

Event Event Description


Performed Handler

focus onfocus When the user focuses on an element

submit onsubmit When the user submits the form

blur onblur When the focus is away from a form element

change onchange When the user modifies or changes the value of a form element

Window/Document events

Event Event Description


Performed Handler
load onload When the browser finishes the loading of the page

unload onunload When the visitor leaves the current webpage, the browser
unloads it

resize onresize When the visitor resizes the window of the browser

Q, No – 7. JavaScript array, Property and Method.

The JavaScript Array Object


The JavaScript Array object is a global object that is used in the construction of arrays. An array is a special
type of variable that allows you to store multiple values in a single variable.

To learn more about Arrays, please check out the JavaScript array chapter.

Array Properties
The following table lists the standard properties of the Array object.

Property Descrip on

length Sets or returns the number of elements in an array.

prototype Allows you to add new proper es and methods to an Array object.

Array Methods
The following table lists the standard methods of the Array object.

Method Description

concat() Merge two or more arrays, and returns a new array.

copyWithin() Copies part of an array to another location in the same array and returns it.

entries() Returns a key/value pair Array Iteration Object.

every() Checks if every element in an array pass a test in a testing function.

fill() Fill the elements in an array with a static value.

filter() Creates a new array with all elements that pass the test in a testing function.

find() Returns the value of the first element in an array that pass the test in a testing function.

findIndex() Returns the index of the first element in an array that pass the test in a testing function.
Q, No – 8. Javascript Object :- In JavaScript, objects are king. If you understand objects, you understand
JavaScript.

In JavaScript, almost "everything" is an object.

 Booleans can be objects (if defined with the new keyword)


 Numbers can be objects (if defined with the new keyword)
 Strings can be objects (if defined with the new keyword)
 Dates are always objects
 Maths are always objects
 Regular expressions are always objects
 Arrays are always objects
 Functions are always objects
 Objects are always objects

Q, No – 9. JavaScript Functions
JavaScript functions are used to perform operations. We can call JavaScript function many times to reuse the code.

Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.

1. Code reusability: We can call a function several times so it save coding.


2. Less coding: It makes our program compact. We don’t need to write many lines of code each time to perform a common
task.

JavaScript Function Syntax


The syntax of declaring function is given below.

1. function functionName([arg1, arg2, ...argN]){


2. //code to be executed
3. }

JavaScript Functions can have 0 or more arguments.

JavaScript Function Example


Let’s see the simple example of function in JavaScript that does not has arguments.

1. <script>
2. function msg(){
3. alert("hello! this is message");
4. }
5. </script>
6. <input type="button" onclick="msg()" value="call function"/>

Q, No – 10. Define Javascript Validation and form validation :-


 This was really a lengthy process which used to put a lot of burden on the server.
 JavaScript provides a way to validate form's data on the client's computer before sending it to the web
server. Form validation generally performs two functions.

1. Basic Validation − First of all, the form must be checked to make sure all the mandatory fields
are filled in. It would require just a loop through each field in the form and check for data.
2. Data Format Validation − Secondly, the data that is entered must be checked for correct form
and value. Your code must include appropriate logic to test correctness of data.

JavaScript Form Validation


HTML form validation can be done by JavaScript.

If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form
from being submitted:

JavaScript Example
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}

UNIT – 5

Q, No – 1. Describe web hosting and types of web hosting.


Web hosting is an online service that enables you to publish your website or web application on the internet.
When you sign up for a web hosting service, you basically rent some space on a physical server where you
can store all the files and data necessary for your website to work properly.

The server that hosts your website is a physical computer that runs continuously to make the site available
for visitors all the time. Buying servers for web hosting will allow you to store all the data of your website in
the those servers of your provider.
> Types of websites.
1. Shared Hosting :- With shared hosting, multiple users share the same server resources, including memory,
processing power, and storage space.

Pros
 Cost-effective, ideal for small-scale websites
 Technical expertise is not required
 Pre-configured server options
 No need to take care of maintenance and server administration

Cons
 Minimal access to server configuration
 Increased traffic on other websites can affect your website’s speed

2. Virtual Private server web hosting :- VPS web hosting is a great option for medium-sized sites,
eCommerce shops, and large blogs with a rapidly growing number of visitors.
Pros

 Dedicated server space


 Increased traffic on other websites has no impact on your site’s performance
 Root access to the server
 High customizability
Cons

 Users need technical expertise to manage it


 Even though it’s relatively affordable, some users may have to hire a developer to manage
the virtual server, increasing the overall costs
3. Cloud Hosting web server :- cloud based web hosting relies on a cluster of web servers to
function, businesses with multiple websites and large-scale sites like eCommerce shops can
benefit the most from it, as it provides little to no downtime.
Pros

 Reduced likelihood of downtime and hardware failure


 Uses load balancing to handle high traffic and prevent DDoS attacks
 Scalability – your website is not limited to the resources of a single server
Cons

 Root access is not always provided


 It is more expensive than VPS and shared hosting.
4. Dedicated Hosting.
5. WordPress Hosting.

Q, no – 2. What is Domain Name and Important and types.


A domain name is a string of text that maps to an alphanumeric IP address, used to access a website from
client software. In plain English, a domain name is the text that a user types into a browser window to reach
a particular website. For instance, the domain name for Google is ‘google.com’.

 Top-Level Domain (TLD) refers to the suffix or the last part of a domain name. There’s a limited list of
predefined suffixes which includes:

 .com – commercial business (the most common TLD)


 .org – organizations (typically, nonprofit)
 .gov – government agencies
 .edu – educational institutions
 .net – network organizations
 .mil – military

 TLDs are classified into two broad categories: generic top-level domains (gTLDs) and country-code
top-level domains (ccTLDs).

 Generic Top-Level Domain (gTLDs) is a generic top-level domain name that identifies the domain class
it is associated with (.com, .org, .edu, etc).

 Country Code Top-Level Domain (ccTLD) is a two-letter domain extension, such as .uk or .fr, assigned
to a country, geographic location or territory.
Q, No – 3. Explain Name Server.
A nameserver is a server in the DNS that translates domain names into IP addresses. Nameservers store and
organize DNS records, each of which pairs a domain with one or more IP addresses. These servers act as the
bridge between domain names, which we humans can remember, with IP addresses, which computers can
process.

Q, No – 4. Define control panel.


The Control Panel in Microsoft Windows enables a user to change various computer hardware and software
features. Settings for the mouse, display, sound, network, and keyboard represent a few examples of what
may be modified in the Control Panel. Below are examples of how the Control Panel appeared in Windows.

Sections of the Windows Control Panel


There are eight main areas on the Control Panel, containing different tools designed to optimize your
computer.

 System and Security - A section to check your computer's status, backup and restore, and others.
 Network and Internet - View network status.
 Hardware and Sound - View which devices are on your computer and add devices.
 Programs - Uninstall programs.
 User Accounts - Change user accessibility.
 Appearance and Personalization - Change desktop options, like fonts and screen readers.
 Clock and Region - Change date and time.
 Ease of access - Optimize your display settings.

Q, No – 5. How to publish a website using FTP :-

1. Step 1: install an FTP program.


2. Step 2: Search for your FTP data in the control panel.
3. Step 3: Connect to your hosting package via FTP.
4. Step 4: Transfer your files via FTP.

Publish Website using FTP


1. FTP server Address
2. FTP Username
3. FTP Password

Q, No – 6. Described all things about SEO.


SEO stands for search engine optimization. SEO practitioners optimize websites, web pages and content for
the purposes of ranking higher in search engines, like Google. SEO is a set of practices designed to improve
the appearance, positioning, and usefulness of multiple types of content in the organic search results. This
content can include web pages, video media, images, local business listings, and other assets. Because
organic search is the top method via which people discover and access online content, utilizing SEO best
practices is essential for ensuring that the digital content you publish can be found and chosen by the public,
increasing your website’s organic traffic.
Why is SEO important?
A significant reason that SEO matters is because it helps online publishers appear within the results
displayed by search engines. Search engines like Google and Bing each have their own methods of surfacing
and formatting the content they display when a user enters a query into a search box, like this:

Types of SEO.
1. On-Page SEO (On-Site SEO):
2. Off-Page SEO (Off-Site SEO):
3. Technical SEO
4. International SEO
5. Local SEO
6. E-commerce SEO
7. Content SEO
8. Mobile SEO
9. White-Hat SEO
10. Black-Hat SEO
11. Gray-Hat SEO
12. Negative SEO
> White Hat SEO :- White hat SEO is the opposite of Black Hat SEO. Generally, white hat SEO refers
to any practice that improves your search rankings on a search engine results page (SERP)
while maintaining the integrity of your website and staying within the search engines’ terms of
service. These tactics stay within the bounds as defined by Google. Examples of white hat SEO
include:
 Offering quality content and services

 Fast site loading times and mobile-friendliness


 Using descriptive, keyword-rich meta tags
 Making your site easy to navigate

> Black Hat SEO :- Black hat SEO refers to a set of practices that are used to increases a site or
page’s rank in search engines through means that violate the search engines’ terms of
service. The term “black hat” originated in Western movies to distinguish the “bad guys” from
the “good guys,” who wore white hats (see white hat SEO). Recently, it’s used more commonly
to describe computer hackers, virus creators, and those who perform unethical actions with
computers.

The following SEO tactics are considered black hat and should not be exercised at all if you
want to stay above board with Google and other search engines:

 Content Automation
 Doorway Pages
 Hidden Text or Links
 Keyword Stuf ing
 Reporting a Competitor (or Negative SEO)
 Sneaky Redirects
 Cloaking

> Advantage and disadvantage Of SEO :-


Advantages
Free
SEO is totally free of cost, and it depends on how much time you spend researching keywords and utilizing
them in your high-quality content.

Localized Traffic
Using local SEO tools such as Google My Business can help you improve your localized traffic.

Mobile Friendly
Good SEO means your site is responsive, your site speed is good, and there’s no latency for mobile users.
Expert Status
Following best SEO practices means your site is an authority. You only have one article per keyword, and you
only have backlinks from high-quality sites.

Customer Friendly
Potential customers find your site because of your SEO. They come to your site and see that you’re
professional. There are no grammatical errors in your content. You’re using the latest technology on a
secure site, and they only need to locate the buy button.

Disadvantages

Targeted by Competitors
Effective SEO means you rank high. Sites that rank high are targeted by competitors who want a slice of the
SEO pie, which means you’re always on your toes.

Changes
SEO can change. Just say the word “panda” and watch business owners frown. One small change to SEO, and
you can be at the top of the search results one day and the next day find your site greatly demoted.

Penalties
You need to always be on top of your game, which may require some financial investment. One example is
websites that haven’t been upgraded to responsive design will be penalized.

Slow Results
SEO isn’t a fast-moving process. You can update your site and use best practices and not see results for
months.

No Promises
You could update all your content and website features and still not find that your site has improved. SEO
doesn’t promise results.

> How do search engines actually work :-


Step 1: Crawling
The first step is crawling. Search engines send out web crawlers to find new pages and record information
about them.

Step 2: Indexing
The second step is indexing. Indexing is when a search engine decides whether or not it is going to use the
content that it has crawled.

Step 3: Ranking
The third step is really the most important step, and that is ranking. Ranking can only happen after the
crawling and indexing steps are complete.
> Discuss the three types of SEO :-
Technical Optimization:- Technical Optimization is the process of completing activities on your site that are
designed to improve SEO but are not related to content. It often happens behind the scenes.

On-Page Optimization:- On-Page Optimization is the process of ensuring the content on your site is relevant
and provides a great user experience. It includes targeting the right keywords within your content and can
be done through a content management system. Common examples of content management systems
include WordPress, Wix, Drupal, Joomla, Magento, Shopify, and Expression Engine.

Off-Page Optimization:- Off-Page Optimization is the process of enhancing your site’s search engine rankings
through activities outside of the site. This is largely driven by backlinks, which help to build the site’s
reputation.

> Describe On-page Optimization :-

1. Technical optimization:- There are three main technical components.


a. server Speed
b. Source Code
c. IP Address

2. Content
Content, in this context, doesn’t only refer to visible on-screen elements like texts and
images.
a. Text
b. Structural text elements
c. Graphics
d. Videos
e. Metatags

3. Internal links and structure


4. Design

You might also like