Unit-1

Q1- Define Web

Sol:- The Web is another very powerful communication mode of recent origin. It has turned
out to be an increasingly important resource of encompassing all conceivable aspects of human
life like business, education, entertainment, governance, personal life, health and what not.
Web sites are hosted by anyone including individuals, organisations, business enterprises, and
voluntary organisations etc. who have an interest in telling the world about themselves or about
their products/services. While most Web sites are free, some are fee-based (subscription-
based). In case of the latter, the accesses to some or all of the contents are restricted by pass -
word. Such include business, academic journal, and entertainment Web sites.

Q2- Explain Types of Websites.

Sol:- There are basically two main types of website - static and dynamic.

A static site is one that is usually written in plain HTML and what is in the code of the page is
what is displayed to the user.

You don't need the knowledge of web programming and database design to create a static
website. Its web pages are coded in HTML.

The codes are fixed for each page so the information contained in the page does not change
and it looks like a printed page.

Web pages are returned by the server with no change therefore, static Websites are fast. There
is no interaction with databases. Also, they are less costly as the host does not need to support
server-side processing with different languages.

Note: Static does not mean that it will not respond to user actions, These Websites are called
static because these cannot be manipulated on the server or interaction with databases (which
is the case in Dynamic Websites).

A dynamic site is one that is written using a server-side scripting language such as PHP, ASP,
JSP, or Coldfusion. In such a site the content is called in by the scripting language from other
files or from a database depending on actions taken by the user.

In Dynamic Websites, Web pages are returned by the server which are processed during
runtime means they are not prebuilt web pages but they are built during runtime according to
the user’s demand with the help of server-side scripting languages such as PHP, Node.js,
ASP.NET and many more supported by the server. So, they are slower than static websites but
updates and interaction with databases are possible.
Q3- differentiate between Static and Dynamic Websites.
Sol:-

STATIC WEBSITE DYNAMIC WEBSITE

Content of Web pages can not be change

at runtime. Content of Web pages can be changed.

No interation with database possible. Interaction with database is possible

It is faster to load as compared to dynamic

website. It is slower then static website.

Cheaper Development costs. More Development costs.

Feature of Content Management

No feature of Content Management. System.

HTML, CSS, Javascript is used for Server side languages such as PHP,

developing the website. Node.js are used.

Same content is delivered everytime the Content may change everytime the

page is loaded. page is loaded.

Q4:- Explain Responsive Websites.

Sol:- Responsive web design is about creating web pages that look good on all devices!
A responsive web design will automatically adjust for different screen sizes and viewports.

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink,
or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).
The practice consists of a mix of flexible grids and layouts, images and an intelligent use of
CSS media queries. As the user switches from their laptop to iPad, the website should
automatically switch to accommodate for resolution, image size and scripting abilities.

In other words, the website should have the technology to automatically respond to the user’s
preferences. This would eliminate the need for a different design and development phase for
each new gadget on the market.

Q5:- What different techniques we used to make a website Responsive.

1. Sol:- CSS Transitions and Media Queries
Setting The Viewport:- To create a responsive website, add the
following <meta> tag to all your web page
Eg:- <meta name="viewport" content="width=device-width, initial-
scale=1.0">

2. Responsive Images:- Responsive images are images that scale nicely to fit any browser
size.

Using the width Property

If the CSS width property is set to 100%, the image will be responsive

and scale up and down:

Eg:- <img src="img_girl.jpg" style="width:100%;">

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

Show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different
images for different browser window sizes.
Resize the browser window to see how the image below change
depending on the width:
Eg:-
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>

3. Responsive Text Size

The text size can be set with a "vw" unit, which means the "viewport width".

That way the text size will follow the size of the browser window:
<h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is
50cm wide, 1vw is 0.5cm.

4. Media Queries
In addition to resize text and images, it is also common to use media
queries in responsive web pages.

With media queries you can define completely different styles for
different browser sizes.
Example: resize the browser window to see that the three div elements
below will display horizontally on large screens and stacked vertically on
small screens:

Q6:- What is Web Hosting?

Sol:- Web hosting is a service that allows organizations and individuals to post a website or
web page onto the Internet.
Web hosting is the place where all the files of your website live. It is like the home of your
website where it actually lives.
A web host, or web hosting service provider, is a business that provides the technologies and
services needed for the website or webpage to be viewed in the Internet. Websites are hosted,
or stored, on special computers called servers. When Internet users want to view your website,
all they need to do is type your website address or domain into their browser. Their computer
will then connect to your server and your webpages will be delivered to them through the
browser.

Most hosting companies require that you own your domain in order to host with them. If you
do not have a domain, the hosting companies will help you purchase one.

Q7:-Why we need Domains in web context?

Sol:- Domain name is the address of your website that people type in the browser’s URL bar
to visit your website.
Internet is basically a giant network of computers connected to each other through cables. To
easily identify them, each computer is assigned a series of numbers called IP Address.
Computers have no problem identifying and remembering these numbers. However, it is
impossible for humans to remember and use these numbers to connect to websites on the
internet.
To solve this problem, domain names were invented.
A domain name can have words which makes it easy to remember website addresses.

Now if you wanted to visit a website on the internet, you don’t need to type a string of numbers.
Instead, you can type in an easy to remember domain name, for example, website.com.
Q8:-Explain the steps involved in planning process of web designing.
Sol:- There are seven steps that should be followed from start to finish when developing
a website.
• Research and goal setting
• Planning
• Designing the layout
• Writing the content
• Coding
• Testing and launching
• Maintaining

1. RESEARCH AND GOAL SETTING

As with any project, it is important to do proper research and set goals before beginning. By
setting goals, it will help the website to have a direction and will also help your business to
achieve specific accomplishments. The planning and goal setting process could take about 1-2
weeks to complete. It is a very important first step to creating a website that sells. There are a
few questions you should ask yourself during this phase:

What do I hope for my website to accomplish?

Who is the audience I would like to target?

What are the main goals of the website?

By setting goals for your website, you will be helping the site to have a clear direction and
purpose. This is important to the rest of the steps. When setting your goals, you should think
about outlining what you would like the rest of the steps to look like. Step 1 will guide you
through the rest of the process smoothly.

The research part of this step has a few different purposes. There are so many examples out
there that it might be beneficial for you to look at and use some of the websites of your
competitors. This can help you to determine what you want and don’t want your website to
have. It is also important to do some research on the target audience you hope to draw in.

Different age groups may be looking for something different when they visit a website.
Understanding what your audience wants is crucial to planning the rest of your website. It is
also important to research keywords you’d like to use with your website. By developing your
website with SEO in mind, you will save yourself a lot of work in the future.

2. PLANNING THE SITE

Planning the website involves creating a wireframe and sitemap. This is an important step
because it is kind of like the skeleton of your site. This process can take about 2-6 weeks to
complete. The sitemap allows the developer to get an outline of what the site will look like,
what pages there will be and how they will interact with each other. This not only helps with
planning but is also beneficial to the user experience.

A user should be able to easily navigate a site, and this begins with the development of the
sitemap. Before you begin to plan content, a sitemap lets you design what the structure will
look like. Once the sitemap is completed, the other part of this step is to create a wireframe or
mock-up. These are just visual representations of what the site will look like. This does not
include the layout details. That comes next.

3. DESIGNING THE LAYOUT

The details of the layout are what will give your website character. This is the step where you
get to be creative with pictures, videos and what kinds of things the customer will notice when
they come to your site. This process can take about 4-12 weeks from start to finish. The timing
depends on experience, time spent on the project, and how thorough the developer is. During
this step, it is especially important to keep referring back to the target audience you wish to
focus on.

Consider colors, logos, and anything that will encourage your audience to interact with the site.
By considering how you will create the layout of the website, you are attempting to bring the
website to life. It should help the audience to get a feel for your business or product. Please
note this step does not yet involve written content. That is the next step. The written content is
so important that it needs its own step.

4. WRITING THE CONTENT

This step may be going on simultaneously with the other development planning steps. The
written content of a website is so important to its success. While this step may be happening
during other steps, it is one that is crucial and deserves a lot of expertise. It could take from 5
to 15 weeks. The written content on a website is going to help a visitor determine their next
steps. It is vital to drawing customers in and keeping them. There is a lot to consider when
working on the content of the website.

When determining what words to use, it is important that they are not too hard to understand.
A general rule is that you have to assume not everyone is going to want to read words that are
higher vocabulary. A website should have a vocabulary that the average person can understand.

Again, considering the target audience is extremely important, especially when it comes to the
text being used to give customers information. This can determine what kinds of words and
voice will be used in the writing, which can create the mood for the content, whether it be good
or bad. It also involves creating catchy titles and headlines to draw people in.

Additionally, it is also a good idea to be well-versed in writing a call-to-action. This is what

you want the user to do after reading the content on the site. The content should get customers
excited about buying a product or service. A website that has well-written content is going to
be much more successful than ones that do not.
5. CODING THE WEBSITE
Now that all aspects of your website have been created, you are ready to actually begin creating
the website itself. The coding typically begins with the homepage and gradually branches out
to the other pages included in the site. This would be where the sitemap is followed to ensure
everything is coded correctly. The coding step could take from 6 to 15 weeks, depending on
how much content and how intricate you would like your website to be. It is also important to
set up frameworks and CMS to make sure that everything will fit onto the server during the
installation process. You wouldn’t want to do all that work only to find out it doesn’t fit.

Once the website is laid out according to the sitemap, it should be tested before moving any
further. If all works well, then the rest of the content should be added, and formatting should
be completed. This phase involves having a deep understanding of the technology you are
using. In fact, if you are looking to do most of the work yourself, you should at least consider
getting a developer to code for you, so that you can make sure everything works as planned.

During coding, don’t forget to consider factors such as SEO, CMS plugins, and any additional
tools you might be using for analyzing and testing the website in the future. If you consider
these things now, you will save yourself time and energy later. By keeping SEO in mind, you
will get better results, and more people will be exposed to your page. Anything worth doing is
worth doing right.

6. TESTING AND LAUNCHING

Before the website is launched, it is crucial that it is tested out by real users. All the links and
content should be tested to see if it works. Not only is it important to test out all the buttons
and everything on the site, but it is also important to test out what users think of it. There is
user testing that can be completed to make sure the website is giving users what they need to
be successful on the test.

Again, there are tools that can be used to determine if anything needs to be changed. Make sure
to check all written content, including spelling and grammar. If your website has forms, ensure
that they are working correctly as well. These might be important ways the users can get in
touch with you or sign up for alerts and messages. Without these working properly, it can be
very difficult for the user and also will be difficult for you to have a successful website.

Don’t just check the website once, but check it over multiple times. When you are confident
that everything is in working order, you can go ahead and launch your website live. When it
comes to launching, you are finally ready and can do this by uploading it to the server. You
will need FTP (File Transfer Protocol) for this process. It is also important to make sure
everything is running smoothly immediately after launching. Testing and launching may take
2-4 weeks to complete.

7. MAINTENANCE
You might think your job is done once the website is launched, but this is not the case. Since
technology and products are changing more rapidly than ever before, it is important to stay up-
to-date with what is happening on the internet. Maintaining a website is hard work, but the
more effort put into its maintenance, the better. There are a few different pieces to website
upkeep.

For one, it should constantly be checked out for errors. When a user encounters an error, this
may be frustrating and may cause them to find what they are looking for somewhere else.
Errors can also completely block them from the information they need to make a decision on
purchasing a product or service. This is why it is important to not only test your website for
user experience before the launch, but after as well.

User-experience should be tested often, and it should be ongoing. This will ensure that if
something comes up, it can be fixed right away. A website that has constant broken links or
outdated content will not make its users happy. By having regular maintenance on a website,
bugs can be fixed as soon as they are detected. A problem cannot be fixed if it is not known.
An unhappy user means that you are losing current or potential customers.

Another important aspect of maintaining a website is to ensure that all content is current. This
means that the correct information is on the website such as contact information, pricing, and
customer reviews. By giving bad or outdated information, a customer will not be able to get in
touch with the business owner, complete a purchase, and it can be frustrating.

While maintaining a website can be important, it might seem like hard work. It is important to
know that there are many tools out there that can be downloaded right onto the website. Reports
can be sent daily or in other time increments to give you data and information about how the
site is performing.

Q9:- Explain the basic principles involved in designing a web site

Sol: Basically, users’ habits on the Web aren’t that different from customers’ habits in a store.
Visitors glance at each new page, scan some of the text, and click on the first link that catches
their interest or vaguely resembles the thing they’re looking for. In fact, there are large parts of
the page they don’t even look at.

• Users appreciate quality and credibility. If a page provides users with high-quality
content, they are willing to compromise the content with advertisements and the design
of the site. This is the reason why not-that-well-designed websites with high-quality
content gain a lot of traffic over years. Content is more important than the design which
supports it.
• Users don’t read, they scan. Analyzing a web-page, users search for some fixed points
or anchors which would guide them through the content of the page.
• Web users are impatient and insist on instant gratification. Very simple principle:
If a web-site isn’t able to meet users’ expectations, then designer failed to get his job
done properly and the company loses money. The higher is the cognitive load and the
less intuitive is the navigation, the more willing are users to leave the web-site and
search for alternatives. [JN / DWU]
 • Users don’t make optimal choices. Users don’t search for the quickest way to find the
information they’re looking for. Neither do they scan webpage in a linear fashion, going
sequentially from one site section to another one. Instead users satisfice; they choose
the first reasonable option. As soon as they find a link that seems like it might lead to
the goal, there is a very good chance that it will be immediately clicked. Optimizing is
hard, and it takes a long time. Satisficing is more efficient.
• Users follow their intuition. In most cases users muddle through instead of reading
the information a designer has provided. According to Steve Krug, the basic reason for
that is that users don’t care. “If we find something that works, we stick to it. It doesn’t
matter to us if we understand how things work, as long as we can use them. If your
audience is going to act like you’re designing billboard, then design great billboards.”
• Users want to have control. Users want to be able to control their browser and rely on
the consistent data presentation throughout the site. E.g. they don’t want new windows
popping up unexpectedly and they want to be able to get back with a “Back”-button to
the site they’ve been before: therefore, it’s a good practice to never open links in new
browser windows.

Q10:- Define the Structure of HTML

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

"Hypertext" refers to the hyperlinks that an HTML page may contain. "Markup language"
refers to the way tags are used to define the page layout and elements within the page.
Structure of HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1> First Heading</h1>

<p>first paragraph.</p>

</body>
</html>

• The <!DOCTYPE html> declaration defines that this document is an HTML5

document
• The <html> element is the root element of an HTML page
 • The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

Q11- Define the different tags used in head section of HTML

Sol:-
Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external
resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document
 Unit-2
Q1- Write a HTML Program that Shows The working of basic HTML tags
Sol:-
<html>
<head>
<title>My first Web page </title>
</head>
<body>
<b>This is my first paragraph</b><br>
<strong>This is my first paragraph</strong>
<p><font size=15 color="Red"> Hello this is bold text</font></p>
<i> Hello CSE II Year</i></br>
<em>Hello CSE II Year</em>
<del><h1>This is heading tag</h1></del>
<h2><font size=15>This is heading tag</font></h2>
<h3>This is heading tag</h3>
<h4>This is heading tag</h4>
<h5>This is heading tag</h5>
<h6>This is heading tag</h6>
<p>2^x</p>
H₂O
<hr>
<img src="2.png" width=80 height=70 alt="Image ie not available">
<pre>
Roll No Name Phone No
100001 ABC 123456789
</pre>
<a href="a.html">Link to connect to another page</a>

</body>
</html>

Q2- write a program to print the following List

Sol:-
<ul>
<li>Fruit
<ul>
<li>Bananas</li>
<li>Apples
<ul>
<li>Green</li>
<li>Red</li>
</ul>
</li>
<li>Pears</li>
</ul>
</li>
<li>Vegetables</li>
<li>Meat</li>
</ul>

Q3- Define the different Lists used in HTML.

HTML lists allow web developers to group a set of related items in lists.
In HTML there are three types of List
i) Ordered List
ii) Unordered List
iii) Description List
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Eg:- <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Eg:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Description HTML List

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd>
tag describes each term:
Eg:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Q4:- Define HTML Table Tags

Sol:- The <table> tag defines an HTML table.
Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each
table data/cell is defined with a <td> tag.
By default, the text in <th> elements are bold and centered.
By default, the text in <td> elements are regular and left-aligned.
Eg:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Q5:- Write the HTML code for the following table

Sol:-
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse
property.</p>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>
Q6:- Write the HTML code for the following Table.

Sol:-
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse
property.</p>

<table style="width:100%" bgcolor="lightgreen">

<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

Q7:- Design the table as given below.

Sol:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse
property.</p>

<table style="width:100%" bgcolor="lightgreen" >

<tr>
<th bgcolor="Red">Firstname</th>
<th bgcolor="Blue">Lastname</th>
<th bgcolor="Yellow">Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
 <td>John</td>
<td>Doe</td>
<td>80</td>
</tr>

</table>

</body>
</html>

Q8:-Design the HTML table as given below:

Sol:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>

<h2>Cell that spans two columns</h2>

<p>To make a cell span more than one column, use the colspan attribute.</p>

<table style="width:100%">
<tr>
<th Rowspan="2">Roll No</th>
<th colspan="2">Marks</th>
</tr>
<tr>
<td>WD</td>
<td>DAA</td>

</tr>
 <tr>
<td>100001</td>
<td>90</td>
<td>80</td>

</tr>
<tr>
<td>100002</td>
<td>91</td>
<td>70</td>

</tr>
</table>

</body>
</html>

Q9- Explain <img> tag.

Sol:-

The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

• src - Specifies the path to the image

• alt - Specifies an alternate text for the image, if the image for some reason cannot be
displayed

Note: Also, always specify the width and height of an image. If width and height are not
specified, the page might flicker while the image loads.

Tip: To link an image to another document, simply nest the <img> tag inside an <a> tag

Set Image Width/Height

<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>

Set Image Border

<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>

Q10:- Explain Hyperlinks used in HTML

HTML links are hyperlinks.

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

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

The HTML <a> tag defines a hyperlink. It has the following syntax:
Eg:
<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue

• A visited link is underlined and purple
• An active link is underlined and red

Q11:-Explain target attributes used in HTML anchor tag

Sol:-

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

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

• _self - Default. Opens the document in the same window/tab as it was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window

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

Q12:- Explain all frame attributes used in HTML

Sol:-

Sr.No Attribute & Description

1 src
 This attribute is used to give the file name that should be loaded in the frame. Its value can be any
URL. For example, src = "/html/top_frame.htm" will load an HTML file available in html directory.

name
This attribute allows you to give a name to a frame. It is used to indicate which frame a document
2
should be loaded into. This is especially important when you want to create links in one frame that
load pages into an another frame, in which case the second frame needs a name to identify itself as
the target of the link.

frameborder
3 This attribute specifies whether or not the borders of that frame are shown; it overrides the value
given in the frameborder attribute on the <frameset> tag if one is given, and this can take values
either 1 (yes) or 0 (no).

marginwidth
4
This attribute allows you to specify the width of the space between the left and right of the frame's
borders and the frame's content. The value is given in pixels. For example marginwidth = "10".

marginheight
5
This attribute allows you to specify the height of the space between the top and bottom of the frame's
borders and its contents. The value is given in pixels. For example marginheight = "10".

noresize
6
By default, you can resize any frame by clicking and dragging on the borders of a frame. The noresize
attribute prevents a user from being able to resize the frame. For example noresize = "noresize".

scrolling
7
This attribute controls the appearance of the scrollbars that appear on the frame. This takes values
either "yes", "no" or "auto". For example scrolling = "no" means it should not have scroll bars.
Q13:-Write a HTMl program to design the below Registration form.

Sol:-
<!DOCTYPE html>
<html>
<body>

<h1>The legend element</h1>

<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

</body>
</html>
 Unit-3
Q1- What is Cascading Style Sheet? Why to use CSS?

• Sol:- CSS stands for Cascading Style Sheets

• CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files

CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.

Q2- Explain different CSS Selector.

Sol:- CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

• Simple selectors (select elements based on name, id, class)

• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

Q3- Design the below web page using CSS

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

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>

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

</body>
</html>

Q4-What are different types of CSS?

Sol:- the three types of CSS styles: inline, external, and internal.
Internal CSS
Internal or embedded CSS requires you to add <style> tag in the <head> section of your
HTML document.

• Internal or embedded ⁠— add <style> tag in the <head> section of HTML document
• External ⁠— link the HTML sheet to a separate .css file
• Inline ⁠— apply CSS rules for specific elements.

This CSS style is an effective method of styling a single page. However, using this style for
multiple pages is time-consuming as you need to put CSS rules to every page of your
website.

Here’s how you can use internal CSS:

1. Open your HTML page and locate <head> opening tag.

2. Put the following code right after the <head> tag

<style type="text/css">
body {
 background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
</style>
Advantages of Internal CSS:

• You can use class and ID selectors in this style sheet. Here’s an example:
• You can use class and ID selectors in this style sheet. Here’s an example:

.class {
property1 : value1;
property2 : value2;
property3 : value3;
}

#id {
property1 : value1;
property2 : value2;
property3 : value3;
}

• Since you’ll only add the code within the same HTML file, you don’t need to upload
multiple files.

Disadvantages of Internal CSS:

• Adding the code to the HTML document can increase the page’s size and loading
time.

External CSS
With external CSS, you’ll link your web pages to an external .css file, which can be created
by any text editor in your device (e.g., Notepad++).

This CSS type is a more efficient method, especially for styling a large website. By editing
one .css file, you can change your entire site at once.

Follow these steps to use external CSS:

1. Create a new .css file with the text editor, and add the style rules. For example:

.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
 width: 34%;
background:#eff2df;
}

1. In the <head> section of your HTML sheet, add a reference to your external .css file
right after <title> tag:

<link rel="stylesheet" type="text/css" href="style.css" />

Don’t forget to change style.css with the name of your .css file.

Advantages of External CSS:

• Since the CSS code is in a separate document, your HTML files will have a cleaner
structure and are smaller in size.
• You can use the same .css file for multiple pages.

Disadvantages of External CSS:

• Your pages may not be rendered correctly until the external CSS is loaded.
• Uploading or linking to multiple CSS files can increase your site’s download time.

Don’t forget to change style.css with the name of your .css file.

Advantages of External CSS:

• Since the CSS code is in a separate document, your HTML files will have a cleaner
structure and are smaller in size.
• You can use the same .css file for multiple pages.

Disadvantages of External CSS:

• Your pages may not be rendered correctly until the external CSS is loaded.
• Uploading or linking to multiple CSS files can increase your site’s download time.

Q5-Explain different types of border we used in -model using CSS.

Sol:

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
• groove - Defines a 3D grooved border. The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
 • outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border,
bottom border, and the left border).

Q6-Write CSS Program to demonstrate the following border styles.

Sol:-
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

Q7:- Explain CSS Box-model.

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when
talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists
of: margins, borders, padding, and the actual content. The image below illustrates the box
model:

Explanation of the different parts:

• Content - The content of the box, where text and images appear
 • Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

Q8:-Write a CSS program to demonstrate the CSS Box model.

Sol:-
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It
consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a
15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>
Q9:- Write HTML program to design the list as given below using CSS.

Sol:-
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Example of unordered lists:</p>

<ul class="a">
 <li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>

<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

Q10:-Write a program to use image as list item marker.

Sol:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

Q11- Write the HTML program to design the list as given below:

Sol:
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
margin: 5px;
}
</style>
</head>
<body>

<h1>Styling Lists With Colors:</h1>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

Q12:- Write a program to Use the :hover selector on <tr> to highlight table rows on
mouse over.
Sol:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}
</style>
</head>
<body>

<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>

<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
 </tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>

</body>
</html>
 Unit- 4

Q-1: What is JavaScript?

Sol: It is a light-weighted programming language (“scripting language”) and used to develop

interactive web pages. It can insert dynamic text into HTML element. JavaScript is also known
as the browser’s language.

Q-2: What are JavaScript Data Types ?

Sol: There are three major Datatypes in JavaScript.

• Primitive
o Numbers
o Strings
o Boolean
• Trivial
o Null
o Undefined
• Composite
o Objects
o Functions
o Arrays

Q-3: What is comments? Which symbol is used for comments in JavaScript ?

Sol: Comments are used to prevent the execution of statements. Comments are ignored while
the compiler executes the code. There are two type of symbols used to represent comment in
JavaScript:
• Double slash: It is known as single line comment.

// Single line comment

• Slash with Asterisk: It is known as multi-line comment.

/*
Multi-line comments
...
*/

Q-4: What do you mean by NULL in JavaScript ?

Sol: The NULL value represents the no value or no object. It can be called as empty
value/object.
Q-5: What are all the looping structures in JavaScript

Sol: The looping structure in JavaScript are:

• while loop: A while loop is a control flow statement that allows code to be executed
repeatedly based on a given Boolean condition. The while loop can be thought of as a
repeating if statement.
• for loop: A for loop provides a concise way of writing the loop structure. Unlike a
while loop, for statement consumes the initialization, condition and
increment/decrement in one line thereby providing a shorter, easy to debug structure
of looping.
• do while: A do-while loop is similar to while loop with the only difference that it checks
the condition after executing the statements, and therefore is an example of Exit
Control Loop.
•

Q-6: Which keywords are used to handle exceptions ?

Sol: When executing JavaScript code, errors will almost definitely occur. These errors can
occur due to the fault from the programmer’s side due to the wrong input or even if there is a
problem with the logic of the program. But all errors can be solved by using the below
commands.
• The try statement lets you test a block of code to check for errors.
• The catch statement lets you handle the error if any are present.
• The throw statement lets you make your own errors.

Q-7: What will be the output of the following code ?

var output = (function(x) {
delete x;
return x;
})(0);

document.write(output);

Sol: The output will be 0. The delete operator is used to delete the operator of the object but
the X is not the object here it is a local variable. The delete operator doesn’t affect local
variables.

Q-8: In JavaScript, answer if the following expressions result is true or false.

1. "0" == 0 // true or false ?
2. "" == 0 // true or false ?
3. "" == "0" // true or false

Sol: The result will be True for 1st and 2nd case and False for the 3rd case.
Q-9: What is === operator?

Sol: === is called as strict equality operator which returns true when the two operands are
having the same value without any type conversion.

Q-10: What is === operator? And also explain the difference between "==" and "==="?
Sol: === is called as strict equality operator which returns true when the two operands are
having the same value without any type conversion.
"==" checks only for equality in value whereas "===" is a stricter equality test and returns false
if either the value or the type of the two variables are different.

Q-11: There are two arrays with individual values, write a JavaScript program to
compute the sum of each individual index value from the given arrays.
Sample array:
array1 = [1,0,2,3,4];
array2 = [3,5,6,7,8,13];
Expected Output:
[4, 5, 8, 10, 12, 13]
Sol:
function Arrays_sum(array1, array2)
{
var result = [];
var ctr = 0;
var x=0;

if (array1.length === 0)
return "array1 is empty";
if (array2.length === 0)
return "array2 is empty";

while (ctr < array1.length && ctr < array2.length)

{
result.push(array1[ctr] + array2[ctr]);
ctr++;
}

if (ctr === array1.length)

{
for (x = ctr; x < array2.length; x++) {
result.push(array2[x]);
}
}
else
{
for (x = ctr; x < array1.length; x++)
{
result.push(array1[x]);
}
}
return result;
}

console.log(Arrays_sum([1,0,2,3,4], [3,5,6,7,8,13]));
 Unit- 5

Q-1: What is Web Hosting?

Sol: Web hosting is a service that allows organizations and individuals to post a
website or web page onto the Internet. A web host, or web hosting service
provider, is a business that provides the technologies and services needed for the
website or webpage to be viewed in the Internet.

Q-2: What are the types of Web Hosting Services?

Sol: The different types of the Web hosting services are:
Internet Service Providers (ISPs)
Many people put up their first websites through their ISPs, because it's generally
easy and inexpensive. Most ISP service packages include a small amount of free
web space, along with tools to create and upload websites quickly and easily. ISP
websites are perfect for people who want to put up small sites with low amounts
of traffic. However, there are usually rate restrictions, and most ISPs don't offer
a lot of features, so they might not be the best choice for a thriving business
website.
Free Web Hosting
Free web hosting is another good option for smaller, personal websites. There are
many free hosting providers that offer all types of features; some include CGI
access and more. The drawback to most free hosting services is that they are
funded by advertising that appears on your site, so free web hosting so generally
best for personal, rather than business, websites.
Paid Hosting
With paid hosting, you pay a fee for space and services on a web hosting
provider's server. Monthly fees can range from a few dollars to several hundred
dollars. Obviously, the more you pay, the more features you should have at your
disposal. Services can include CGI access, database support, ASP, e-commerce,
SSL, additional space on the server, extra bandwidth, and more.
Domain Hosting
A good option for small businesses is to pay for domain hosting. Domain hosting
allows you to host your site anywhere you like: on an ISP, a free hosting service,
or even your own server. You buy a domain name and have the provider forward
all requests for that domain to the actual web location. This is often less expensive
than buying both the domain and the hosting service, and it allows businesses to
brand their URLs.
Collocation
Collocation is an option for businesses that want to run their own web servers and
machines, but don't want to have to maintain them directly. With collocation, the
website owner places its own server on the premises of its ISP or other host, where
it is stored, maintained, and provided with an uninterrupted power supply.
Collocation provides security and protection for your server while still giving you
control of your own equipment.
Direct Internet Access
Hosting your site yourself offers you the most control over your web server.
Companies with large data centers or that require high security in every aspect of
their web and Internet access should look into this type of hosting.

Q-3: What is Domain name system (DNS) ?

Sol: Domain name system (DNS) is the system that is used to translate human-
memorable domain names into the corresponding numeric Internet Protocol (IP)
addresses as well as to identify and locate computer systems and resources on the
Internet.

Q-4: What is Domain name servers ?

Sol: Domain name servers are a fundamental part of the Domain Name System.
Nameserver is a server on the Internet specialized in handling queries regarding
the location of the domain name’s various services. In easy words, name servers
define your domain’s current DNS provider.

Q-5: What is a domain name?

Sol: Domain names are the human-friendly forms of Internet addresses, and are
what is used to find your web site.
Domain name is the address of your website that people type in the browser’s
URL bar to visit your website.
Internet is basically a giant network of computers connected to each other through
cables. To easily identify them, each computer is assigned a series of numbers
called IP Address.
Computers have no problem identifying and remembering these numbers.
However, it is impossible for humans to remember and use these numbers to
connect to websites on the internet.
To solve this problem, domain names were invented.
A domain name can have words which makes it easy to remember website
addresses.

Now if you wanted to visit a website on the internet, you don’t need to type a
string of numbers. Instead, you can type in an easy to remember domain name,
for example, website.com.

Q-6: What is the domain name structure?

Sol: Domain names are made up of a series of strings, each separated by a dot.
The last string of a domain is referred to as the top-level domain (TLD), the
second level is the name, for example 'google' in www.google.com and a third
level refers to the www. Part.

Q-7: What is a gTLD?

Sol: A gTLD is a generic top level domain. It is the top-level domain of an
Internet address, for example: .com, .net and .org.

Q-8: What is SEO? What are the important types of SEO methods?
Sol: Search engine optimization or SEO is a process of keep changing the position
of a web page or website in a search engine results by using keywords or phrases.
Two Types of SEO are:
1. On Page Optimization
2. Off Page Optimization

Q-9: What is the importance of SEO ?

Sol: Search Engine Optimization (SEO) is the key tool for the website owners to
get more traffic to the website. Optimization of a website is crucial to get traffic
and maintain the level over the search engine. The main aim of the search engine
optimization is to get more traffic from diverse sources and to get repetitive
visitors.
Q-10: What is Onpage Optimization?
Sol: Onpage optimization (AKA on-page SEO) refers to all measures that can be
taken directly within the website in order to improve its position in the search
rankings. Examples of this include measures to optimize the content or improve
the meta description and title tags. Conversely, off-page SEO refers to links and
other signals.