Question and Answers notes of Advanced internet technologies

1. Explain in detail SEO objectives. 10M
SEO gives surprisingly effective results in a short time if done efficiently.
SEO is used for generating traffic to site but there are also other applications of SEO like
branding, marketing and ideological influence of the website.
SEO has proven to be an effective tool in achieving a number of important marketing
objectives, making it a universally-beneficial marketing tactic for a wide variety of
organizations, regardless of their objectives.
SEO, once the domain of specialists, has now become a mainstream marketing activity.
SEO can have a dramatic effect on the traffic that you draw to your website; the perceived
quality, relevance, and trustworthiness of your brand; and the amount of revenue that can
generate through your website.
Like any other marketing activity, it is important to set specific goals and objectives — and if the
goal is not measurable, it is not useful.
As you can see, increased website traffic is rated as the most effective objective for SEO and
increased brand or product awareness is also rated extremely well.
However, increased website traffic and awareness are soft metrics that lead to an improvement
in bottom-line metrics such as increased online and offline sales revenue.
The goals of SEO are:
1. Generating Traffic
i. Content that is keyword targeted produces direct traffic to your website.
ii. Content provides great results in less time. SEO generates direct traffic to your website when
your site is optimized for relevant keywords typed by user.
iii. Keywords should be unique, not common, because competition is very high for common and
popular keywords rather than unique and different keywords.
2. Branding
i. Branding is less popular application of SEO. Branding means brand recognition or brand
awareness among people.
ii. A website pages which are consistently at the top of search engine ranking get traffic,
popularity and profit.

2. iii. There may be certain terms that are closely related to your brand that you want to dominate
in the search rankings.
3. Marketing
i. SEO is also used for marketing the products and services of any e-commerce website.
ii. SEO builds customers and generates revenue for the e- commerce website.
4. Ideological Impact
i. Ideological impact is the public opinion about their websites on a particular topic.
ii. SEO is very powerful tool to promote your ideas and content of your website.
5. E- Commerce Purpose
i. SEO drives relevant traffic to e-commerce websites.
ii. It boosts the sale of the products and services offered by the websites.
6. Target Customers
i. Define the audience that you are trying to reach.
ii. For example, it could be a specific income level, geographic area, or decorating style.
7. Competition
i. The competitive landscape is a major consideration in determining your SEO goals. Depending
on your competitor’s product line and SEO strategy, you may have to make adjustments.
ii. If you are the market leader, you may want to fend off certain competitors. On the other
hand, if the competition is firmly entrenched, you may want to focus on another segment of
the market.
8. Your Potential Customers Search for Your Products
i. It is important to understand which search terms your prospects use to find the products or
services that you supply.
ii. This involves mapping the actual search queries that your target customers use when they
employ a search engine to find what they are looking for.
Discuss in detail Algorithm-Based Ranking system. 10M

3. 1. Understanding how crawling, indexing, and ranking works is helpful to SEO practitioners, as it
helps them determine what actions to take to meet their goals.
2. This primarily covers the way Google and Bing operate. The search engines must execute
multiple tasks very well to provide relevant search results.
3. Put simplistically, you can think of these as Crawling and indexing billions of documents
(pages and files) on the Web.
4. Responding to user queries by providing lists of relevant pages.
5. Crawling and Indexing:
i. The web has link structure which serves to bind all the pages that were made public during
linking with other pages.
ii. The search engine automated robots also known as crawlers or spiders have capability to
reach billions of into connected documents.
iii. Once the engine finds these pages, its next job is to parse the code and store selected pieces
in the form of array on hard drives.
iv. The retrieval is done when it is called through query
.
6. Retrieval and Ranking:

4. i. After crawling and indexing the search engine returns a list of relevant pages on the web to
satisfy user requirement.
ii. Two things are involved in this process:
A. Only related result should be returned which is asked in users query.
B. Rank the result as per importance taking into account the trust and authority associated with
the site.
iii. Relevance: It is degree of matches found in any document returned by search or the amount
of data related to the users query intention. Relevance is the first step if the web pages are not
relevant to the search query as the search engine does not consider them for search results.
iv. Importance or popularity: It refers to the relative importance which is measured through
citation. It can also be considered as out of one work referencing another. If a given document
matches with users query the citation increases with number of other document that
references it. Popularity and relevance cannot be determined manually, to achieve these search
engines which have algorithms and several mathematical equations.
What is media query? How is a media query used? 5M
Media query:
1. Media query is a CSS technique introduced in CSS3.
2. It uses the @media rule to include a block of CSS properties only if a certain condition is true.
3. Media query allows you to specify when certain CSS rules should be applied.
4. This allows you to apply a special CSS for mobile, or adjust a layout for print.
5. All modern browser support Media Queries. All modern mobile browsers are supports media
query including Blackberry 7.0 and 10.0.
6. Types of media those are available:
i. All: All devices listen to this
ii. Braille: Used for Braille tactile feedback devices.
iii. Embossed: Used for paged Braille printers.
iv. Handheld: Used for handheld devices (Smartphone’s and tablets do NOT listen to this!).

5. v. Print: Used for paged material and for documents viewed on screen in print preview mode.
vi. Projection: Used for projected presentations, for example projectors.
vii. Screen: Used primarily for color computer screens and smart phones.
viii. Speech: Used for speech synthesizers.
ix. tty: Used for media using a fixed-pitch character grid (such as teletypes, terminals, or
portable devices with limited display capabilities).
x. TV: Used for television-type devices (low resolution, color, limited-scrollability screens, sound
available).
7. Available expressions for media:
i. width: The width of the current window.
ii. height: The height of the current window.
iii. device-width: The width of the device.
iv. device-height: The height of the device.
v. orientation: Either landscape or portrait.
vi. aspect-ratio: The aspect ratio of the current window.
vii. device-aspect-ratio: The aspect ratio of the device.
viii. color: The number of color bits per color component.
ix. color-index: The number of available colors on the device.
x. monochrome: The number of bits per pixel in a monochrome frame buffer.
xi. resolution: The resolution of the device.
xii. scan: Either progressive or interlace.
xiii. grid: Is the device grid-based.
Using media queries:
1. Media Queries are used to make any website responsive.
2. You can use simple set of media query to make your website responsive.

6. 3. Start media query with following line:
@media only screen and (min-width:480px) and (max-width:650px){}
4. Insert css text within these {} brackets.
5. If one wish to make only one display then use @media only screen and (max-width:999px)
and Convert everything into % for better flexibility.
6. Only write css for class you wish to modify and only write properties that you want to
convert, like .header-text {float:left; width:700px; padding: 10px 5px 0 10px; color:#fff;} now if
you are writing media query for this .header-text{width:96%; padding: 2%; } since the color and
float etc would be same.
7. For Multi display don't include that media query to @media only screen and (max-
width:999px) and write separate css for each screen size.
8. If you are using jquery, you need to find jquery which support responsive design, since no of
item to be displayed need to done dynamically and cannot be controlled through css.
9. Convert your menu into a responsive menu.
Define Media Query? Explain Media Query with an example. 10M
<html>
<head><title>media query</title>
<style>
ul { list-style-type: none;}
ul li a { color: green;
text-decoration: none;
padding: 3px;
display: block;}
@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
ul li a { padding-left: 30px;
background: url(email.png) left center no-repeat; }}

7. @media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
@media screen and (min-width: 1001px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<ul>
<li><a data-email="patilchirag42@gmail.com" href="mailto:patilchirag42@gmail.com">Chirag
Patil</a></li>
<li><a data-email="rmalviya461@gmail.com" href="mailto:rmalviya461@gmail.com">Ramesh
Malviya</a></li>

8. <li><a data-email="singh.aditya2294@gmail.com"
href="mailto:singh.aditya2294@gmail.com">Aditya Singh</a></li>
</ul>
</body>
</html>
Output:

9. List and explain the audio and video file formats used in RWD. 10M
Audio file formats:
i. .wav
ii. .ra
iii. .mp3
iv. .midi
i. .wav (wave):
1. .wav is the most popular audio file format used in web design.
2. .wav files are supported by most platforms.
ii. .ra (real audio):
1. .ra is audio compression and streaming technology used on the internet.
2. ra stands for real audio.
iii. .mp3 (media picture expert group layer 3):

10. 1. .mp3 is also audio compression and streaming technology on the internet.
2. Long audio files can be created by using .mp3 file format.
iv. .midi (musical instrument digital interface):
1. .midi files are smaller than .wav files.
2. User has good sound card quality and then the performance is much better.
Video file formats:
i. .swf & .flv
ii. .wmv
iii. .mov
iv. .mpeg or .mpg
v. .mp4
i. .swf (shock wave flash) & .flv:
1. .swf and .flv file are created by macromedia flash program.
2. These files requires extra plug-in to play in browser.
ii. .wmv:
1. .wmv stands for windows media video.
2. .wmv file is developed by Microsoft.
iii. .mov:
1. .mov stands for movie file.
2. This file is apple’s quick time movie format.
iv. .mpeg or .mpg (moving picture experts group):
1. It is most commonly used formats for the internet.
2. It supports HTML5.
v. .mp4:

11. 1. This is new and upcoming format for internet.
2. This format is recommended by YouTube and supported by flash player.
3. It supports HTL5.
RIA 5M
1. RIA stands for Rich Internet Application.
2. RIA is a Web application that has many characteristics of desktop application software,
typically delivered by way of a site-specific browser, browser plug-in, independent sandbox,
extensive use of JavaScript or virtual machine.
3. Rich internet application provides business with an affordable option for deployment of
desktop, web applications and communication.
4. This approach allows client systemto handle local activities, calculations, reformatting and so
on.
5. Rich internet applications combine technologies for a fascinating interface that enhances
user experience in web interactions.
6. The advantages offered by Rich Internet Applications can be widely used for various
industrial purposes.
7. One of the most important feature of the RIA is the client engine that intermediates between
the user and the application server.
8. Sometimes RIA is also called as installable internet application.
9. RIA normally runs inside web browser and usually does not require software installation on
the client side to work.
10. RIAs dominate in browser based gaming as well as applications that require access to video
capture.
11. Skill set of RIA includes: Adobe Flash, Adobe Flex, AJAX, Flash Media Server, HTML5, Flex
Chart, Flex Builder and Microsoft Silverlight.
12. Web standards such as HTML5 have developed and the compliance of Web browsers with
those standards has improved.
What are the advantages/disadvantages of the various style methods? 5M

12. Various style methods:
i. External style sheet
ii. Embedded style sheet
iii. Inline style sheet
i. External Style Sheet:
Advantages:
1. External style sheet can control styles for multiple documents at a time.
2. Classes of this style sheet can be created for use on multiple HTML element types in many
documents.
3. Selector and grouping methods of this style sheet can be used to apply styles under complex
contexts.
Disadvantages:
1. For each document an extra download is require to import style information.
2. The rendering of the document may be delayed until the external style sheet is loaded.
3. External style sheet becomes slightly unwieldy for small quantities of style definitions.
ii. Embedded Style Sheet:
Advantages:
1. Classes can be created for use on multiple tag types in the document.
2. In this style sheet selector and grouping methods can be used to apply styles under complex
contexts.
3. To receive style information additional downloads are not necessary.
Disadvantages:
1. This method can not control styles for multiple documents at a time.
iii. Inline Style:
Advantages:

13. 1. Inline styles are useful for small quantities of style definitions.
2. This styles can override other style specification methods at the local level.
Disadvantages:
1. This method does not distance style information from content.
2.Inline style cannot control styles for multiple documents at a time.
3. Author of the document or file cannot create or control classes of elements to control
multiple element types within the document.
4. Selector grouping methods cannot used to create complex element addressing scenarios in
inline style.
Draw the diagram for AJAX application model and traditional web application model
and compare them. 10M
AJAX application model:
Traditional application model:

14. Comparison of AJAX application model and traditional application model:
N0. AJAX application model Traditional application model
1 Request in this application model doesn’t
block the client.
Requests in this application model blocks the
client until operation completes.
2 In this case JavaScript engine of the
browser is not blocked.
In such case JavaScript engine of the browser
is blocked.
3 AJAX web application model is
asynchronous.
Traditional web application model is
synchronous.
4 The page is loaded entirely only once that
is the first time it is requested.
The page is loaded every time when new
request comes.
5 It consist JAVASCRIPT and XML file. It consist HTML and CSS file.
6 Full page is not refreshed at request time
and user gets response from the AJAX
machine.
Full page is refreshed at request time and
user is blocked until request completes.
What do you mean by XML? What are its Differences and similarities from HTML &
CSS? Also explain the concept of Entities & Attributes in XML? 10M
XML:
1. XML is abbreviation for Extensible Markup Language.
2. XML was developed to describe data and to focus on what the data represent.

15. 3. XML is a resembling language with HTML. It was developed for describing data.
4. The XML tags are not pre-defined in XML. Users have to create tags according to their needs.
5. XML is self descriptive coding language as well as XML is extensible.
6. XML uses DDT principle (Defining the Document Type) to formally describe the data.
7. XML provides a facility to define tags and the structural relationships between them.
Differences and similarities of XML from HTML and CSS:
Difference:
No. XML HTML and CSS
1 XML was developed to describe data and to
focalize on what the data represent.
HTML and CSS was developed to display
data about to focalize on the way that data
looks.
2 XML is used to describe information. HTML and CSS are used to format data.
3 It is generally used to store text data only. They are used to format structure of the
webpage.
4 You can create your own tags. You cannot create your own tags.
5 An XML document cannot be HTML. An HTML document can be XML.
Similarities:
1. XML and HTML both are markup language.
2. XML, HTML and CSS are used to create webpage.
3. XML and HTML/CSS have closing element for each opening element.
4. XML, HTML and CSS represent data in proper format using tags and selectors.
Entities and attributes in XML:
Entities:
1. Entities are placeholders for other values that are reserved in the language or it may be
misinterpreted.
2. The less than (<) and greater than (>) symbols are reserved for demarking the tags.
3. The ampersand (&) symbol is reserved to indicate start of an entity.
4. The various predefined entities are as: less than (<), greater than (>), ampersand (&),
quotations (“) and apostrophe (&apos).

16. Attributes:
1. Attributes give the information about the elements.
2. Attributes can be specified in the elements start tag and values of attributes are enclosed in
double quotation mark.
3. Syntax: <tag attribute=”value”>description</tag>
4. Example: <problem size=”small” cause=”unknown”>This is problem</problem>
What is DOM? Draw the detailed DOM objects structure. Explain with its usage. 10M
DOM:
1. DOM stands for Document Object Model.
2. The way by which document content is accessed, manipulates and modified is called the
Document Object Model or DOM.
3. The Document Object Model is a programming API for HTML and XML documents.
4. It defines the logical structure of documents.
5. With the Document Object Model programmers can create and build documents, navigate
their structure, and add, modify or delete elements and content of the document.
6. Objects of DOM:
i. Window object: It is the outmost element of the object hierarchy.
ii. Document object: Each HTML document that gets loaded into a window becomes a
document object. The document contains the contents of the page.
iii. Form object: Everything enclosed in the <form>...</form> tags sets the form object.
iv. Form control elements: The form object contains all the elements defined for that object
such as text fields, buttons, radio buttons, and checkboxes.
7. The Document Object Model can be used with any programming language.
Objects structure of document object model:

17. Usage of document object model:
1. It applies to all documents, HTML pages, XML files, etc.
2. In the developer sphere it applies mainly in the HTML and XML domains.
3. In HTML, DOMwas introduced to support revolution called as dynamic HTML.
4. More modern navigating techniques like JQuery have shorthand notation for the DOM.
5. The DOMis the concept which is applicable to any document showing a hierarchical
structure in which user needs to navigate.
6. It is used as a programming API for HTML and XML documents.
Define and describe mashups. What are the primary reasons for the success of mashups? 5M
1. A mashup is a Web page or application that integrates complementary elements from two or
more sources.
2. A content mashup brings together various types of content for presentation through an
interface.
3. An enterprise mashup typically combines internal corporate data and applications with
externally sourced data, SaaS (software as a service) and Web content.
4. Business mashups also provides integration with the business computing environment, data
governance, business intelligence (BI)/ business analytics (BA), more sophisticated
programming tools and more stringent security measures.

18. 5. In blogs and social media, mashups became popular.
6. Mashups are created by using AJAX.
7. The term mashup originated in the music industry, where it referred to songs that were
combined from two or more other songs.
Primary reasons for success of mashup:
Explain in detail different CSS3 stylesheet with an example. 10M
There are three different CSS3 stylesheet:
1. Internal stylesheet
2. External stylesheet
3. Inline stylesheet
1. Internal stylesheet:
i. The stylesheet which is used in between HTML document is called as internal stylesheet.
ii. The code of this stylesheet is inserted in between <head> and </head> tags using <style> tag
and its attributes.
iii. Internal stylesheet is also called as embedded stylesheet.
iv. Syntax:
<head><style>
Selector
{
Property:value;
}
</style></head>
v. Example:
<head><style>

19. P
{
Font-family:verdana;
Font-size:20;
}
vi. To receive style information additional downloads are not necessary.
2. External stylesheet:
i. The stylesheet which is separate from HTML document is called as external stylesheet.
ii. The external stylesheet is stored with .css extension.
iii. External stylesheet is linked to the HTML document using <link> tag.
iv. Syntax:
Selector
{
Property:value;
}
v. Example: file.css
P
{
Font-family:verdana;
Font-size:20;
}
File .html
<html><head>
<link rel=”text/css” href=”file.css”>

20. </head></html>
vi. External stylesheet can be used for multiple documents.
3. Inline stylesheet:
i. The stylesheet which is used to format particular object of the HTML document is called as
inline stylesheet.
ii. This stylesheet is inserted in a particular tag.
iii. To insert code of inline stylesheet, style attribute is used with any tag in HTML document.
iv. Syntax:
<tag style=”property:value;”>
v. Example:
<html><body>
<p style=”font-family:verdana;font-size:20;”>
vi. Inline styles are useful for small quantities of style definitions.
Explain the different types of CSS3 selectors with an example. 10M
Types of CSS3 selectors:
1. Universal selector
2. Type selector
3. Class selector
4. ID selector
5. Child selector
6. Descendent selector
7. Adjacent selector
8. Attribute selector
9. Query selector

21. 1. Universal selector:
i. The universal selector works like a wild card character, selecting all elements on a page.
ii. Every set of tags represents an element on the page.
iii. Example:
*{
Color:green;
Font-size:20px;
Line-height:25px;
}
2. Type selector:
i. This selector must match one or more HTML elements of the same name.
ii. A selector of <ul> would match all HTML unordered lists or <ul> elements.
iii. Example:
ul{
list-style:none;
border:solid 1px #cc;
}
iv. This CSS file applies only to the <ul> element in HTML and it will not apply to other.
3. Class selector:
i. The class selector is the most useful of all the CSS3 selectors.
ii. It is declared with a dot preceding a string of one or more characters.
iii. Example:
.box{
Padding:20px;

22. Margin:10px;
Width:240px;
}
4. ID selector:
i. An ID selector is declared using a hash symbol.
ii. The string of characters is defined by the developers.
iii. This selector matches any HTML element that has an ID attribute with the same value as that
of the selector.
iv. Example:
#container{
Width:960px;
Margin:0 auto;
}
5. Child selector:
i. A child selector only targets immediate child element.
ii. It is similar to descendent selector.
iii. Example:
#container >.box{
Float:left;
Padding-bottom:15px;
}
HTML file:
<div id=”container”>
<div class=”box”></div>

23. <div>
<div class=”box”></div>
</div>
</div>
6. Descendent selector:
i. The descendent selector is used to combine two or more selectors.
ii. Example:
#container .box{
Float:left;
Padding-bottom:15px;
}
HTML file:
<div id=”container”>
<div></div>
<div class=”box”></div>
</div>
7. Adjacent selector:
i. Adjacent selector uses the plus(+) symbol.
ii. Adjacent selector is same as general sibling selector.
iii. Example:
p +p{
text-indent:1.5em;
margin-bottom:0;
}

24. HTML file:
<h2>Title</h2>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
<div class=”box”>
<p>Fourth Paragraph</p>
<p>Fifth Paragraph</p>
</div>
iv. The style will apply only the second, third and fifth paragraph.
8. Attribute selector:
i. The attribute selector targets elements based on the presence and value of HTML attribute.
ii. It is declared using square brackets.
iii. Example:
Input[type=”text”]
Background-color:#444;
Width:200px;
}
iv. The above CSS would match with the following eleent:
<input type=”text”>
Write the code in JavaScript toopen a new window when a link on a page is clicked.
The new window opened, is closed by placing a button on the window and writing
JavaScript code on the On Click event of the button. 10M
Javascript.html:
<html>

25. <head><title>javascript</title>
<script language="javascript" type="text/javascript">
function window.open()
var win = window.open('file:///C:/Users/DELL/Desktop/2.html', '_blank');
if (win)
{
win.focus();
}
else
{
alert('Please allow popups for this website');
}
</script>
</head>
<body>
<a href="#" onclick="window.open('file:///C:/Users/DELL/Desktop/2.html')">Click here to open
new window</a>
</body>
</html>
2.html:
<html>
<head><title>new window</title>
<script type="text/javascript" language="javascript">
function close_window()

26. {
if (confirm("Close Window?"))
{
close();
}
}
</script></head>
<body>
<input type="button" onclick="close_window()" name="button" value="click here to close this
window">
</body>
</html>
Define DOM. Explain in detail node tree for HTML document. Also explain the
different levels of DOM. 10M
DOM:
1. DOM stands for Document Object Model.
2. The way by which document content is accessed, manipulates and modified is called the
Document Object Model or DOM.
3. The Document Object Model is a programming API for HTML and XML documents.
4. It defines the logical structure of documents.
5. With the Document Object Model programmers can create and build documents, navigate
their structure, and add, modify or delete elements and content of the document.
Node tree for HTML document:

27. 1. Ancestor:
i. Ancestor refers to any element that is connected but further up the document tree.
ii. In the diagram, the <body> element is the ancestor of all other elements on the page.
2. Descendant:
i. A descendant refers to any element that is connected but lower down the document tree.
ii. In the diagram, all elements that are connected below the <div> element are descendants of
that <div>.
3. Parent and Child:
i. A parent is an element that is directly above and connected to an element in the document
tree.
ii. In the diagram, the <div> is a parent to the <ul>.
iii. A child is an element that is directly below and connected to an element in the document
tree. In the diagram above, the <ul> is a child to the <div>.
4. Sibling:
i. A sibling is an element that shares the same parent with another element.
ii. In the diagram, the <li>'s are siblings as they all share the same parent <ul>.
Different levels of DOM:
The Document Object Model has three levels.
1. Level 1:
i. It was first released in 1998.

28. ii. This level was released in part as an effort to define a common API implemented by web
browsers.
iii. DOMlevel 1 is supported by all the mainstream browsers.
2. Level 2:
i. It was first released in 2000.
ii. It is supported by all the mainstream browsers except Internet Explorer.
iii. If you are developing an application targeting the browsers deployed, level 2
recommendations is best.
3. Level 3:
i. It is still a work in progress.
ii. Most browsers support a minimal subset of level 3 and Internet Explorer does not support
level 3.
iii. Most web developers consider that it is still too early to use the DOMlevel 3.
Create a web page to show how you can apply the transformation effect so that the image
rotates by 75degree. Assume suitable parameters if required. 10M
Transition.css:
img:hover
{
cursor: default;
transform: rotate(75deg);
transition: all 0.3s ease-in-out 0s;
}
Transition.html:
<html>
<head><title>css transition</title>
<link rel="stylesheet" type="text/css" media="screen, projection" href="transition.css">

29. </head>
<body>
<br><br>
<center>
<h1>Move the cursor on the image to see the transition</h1><br><br>
<img height="200" width="200" src="1668.jpg">
</center>
</body>
</html>
Output: