Web Development Lab

Rajat Goyal 1 14IT056

Web Development Lab

Experiment: - 1
Aim: - To study about basic terms used on Web.

World Wide Web (WWW): - August 6 is celebrated as the day when the 'Web' was
born. On August 6, 1991, Tim Berners-Lee published a report of 'World Wide Web' (WWW)
and made internet available to the public. WWW took technology to a different direction and
connected people in a way which was beyond imagination.

Timeline of WWW and how Internet has evolved:

 Tim Berners-Lee had made a project in 1980 which was about readable texts,
embedded in links.
 In 1989, Tim Berners-Lee submitted his proposal of WWW in a descriptive
format. Initially he thought of the names like, 'Information Mesh', 'The
Information Mine' and 'Mine of Information'
 In 1990, with the help of Robert Cailliau, Lee built a 'Hypertext project' World
Wide Web which could be only accessed through a browser
 In 1991, Tim published a short summary of WWW and internet was made
accessible to the public
 In 1993, CERN announced that internet would be free to everyone and there
would be no fee for its use
 In 1994, many websites erupted and the internet service got popular
 In 1999, Darci DiNucci coined the term 'Web 2.0', which was later popularised
in the year 2004
 It's due to Web 2.0 that we see user-generated content, better usability, user
friendly and two-way communication on the Web
 Berners Lee was knighted by Queen Elizabeth II in 2004 for his work
 In 1991, there was just one website and now, in 2015, there are about a billion
websites on the web.

World Wide Web Consortium (W3C): - Stands for "World Wide Web
Consortium." The W3C is an international community that includes a full-time staff, industry
experts, and several member organizations. These groups work together to develop standards
for the World Wide Web.
The mission of the W3C is to lead the Web to its full potential by developing
relevant protocols and guidelines. This is achieved primarily by creating and publishing Web
standards. By adopting the Web standards created by the W3C, hardware manufacturers
and software developers can ensure their equipment and programs work with the latest Web
technologies. For example, most Web browsers incorporate several W3C standards, which
allows them to interpret the latest versions of HTML and CSS code. When browsers conform
to the W3C standards, it also helps Web pages appear consistent across different browsers.
Besides HTML and CSS standards, the W3C also provides standards for Web graphics (such
as PNG images), as well as audio and video on the Web. The organization also develops

Rajat Goyal 2 14IT056

Web Development Lab

HTML

XML

Rajat Goyal 3 14IT056

Web Development Lab

standards for Web applications, Web scripting, and dynamic content. Additionally, the W3C
provides privacy and security guidelines that websites should follow.
The World Wide Web Consortium has played a major role in the development of the Web
since it was founded in 1994. As Web technologies continue to evolve, the W3C continues to
publish new standards. For example, many of the technologies included in Web 2.0 websites
are based on standards developed by the W3C. To learn more about the W3C and the current
standards published by the organization, visit the W3C website.

What are HTML, XML and XHTML?

The original language of the World Wide Web is HTML (HyperText Markup Language),
often referred to by its current version, HTML 4.01 or just HTML4 for short. HTML was
originally an application of SGML (Standard Generalized Markup Language), a sort of meta-
language for making markup languages. SGML is quite complicated, and in practice most
browsers do not actually follow all of its oddities. HTML as actually used on the web is best
described as a custom language influenced by SGML.
Another important thing to note about HTML is that all HTML user agents (this is a catchall
term for programs that read HTML, including web browsers, search engine web crawlers,
and so forth) have extremely lenient error handling. Many technically illegal constructs, like
misnested tags or bad attribute names, are allowed or safely ignored. This error-handling is
relatively consistent between browsers. But there are lots of differences in edge cases,
because this error handling behavior is not documented or part of any standard. This is why it
is a good idea to validate your documents.
XML and XHTML are quite different. XML (eXtensible Markup Language) grew out of a
desire to be able to use more than just the fixed vocabulary of HTML on the web. It is a
meta-markup language, like SGML, but one that simplifies many aspects to make it easier to
make a generic parser. XHTML (eXtensible HyperText Markup Language) is a reformulation
of HTML in XML syntax. While very similar in many respects, it has a few key differences.
First, XML always needs close tags, and has a special syntax for tags that don’t need a close
tag. In HTML, some tags, such as img are always assumed to be empty and close themselves.
Others, like p may close implicitly based on other content. And others, like div always need
to have a close tag. In XML (including XHTML), any tag can be made self-closing by
putting a slash before the code angle bracket, for example <img src="funfun.jpg"/>. In
HTML that would just be <img src="funfun.jpg">
Second, XML has draconian error-handling rules. In contrast to the leniency of HTML
parsers, XML parsers are required to fail catastrophically if they encounter even the simplest
syntax error in an XML document. This gives you better odds of generating valid XML, but
it also makes it very easy for a trivial error to completely break your document.

HTML-compatible XHTML
When XML and XHTML were first standardized, no browser supported them natively. To
enable at least partial use of XHTML, the W3C came up with something called “HTML-

Rajat Goyal 4 14IT056

Web Development Lab

Rajat Goyal 5 14IT056

Web Development Lab

compatible XHTML”. This is a set of guidelines for making valid XHTML documents that
can still more or less be processed as HTML. The basic idea is to use self-closing syntax for
tags where HTML doesn’t want a close tag, like img, br or link, with an extra space before
the slash. So our ever-popular image example would look like this: <img src="funfun.jpg" />.
The details are described in the Appendix C of the XHTML 1.0 standard.
It’s important to note that this is kind of a hack, and depends on the de facto error handling
behavior of HTML parsers. They don’t really understand the XML self-closing syntax, but
writing things this way makes them treat / as an attribute, and then discard it because it’s not
a legal attribute name. And if you tried to do something like <div />, they wouldn’t
understand that the div is supposed to be empty.
There are also many other subtle differences between HTML and XHTML that aren’t
covered by this simple syntax hack. In XHTML, tag names are case sensitive, scripts behave
in subtly different ways, and missing implicit elements like <tbody> aren’t generated
automatically by the parser.
So if you take an XHTML document written in this style and process it as HTML, you aren’t
really getting XHTML at all – and trying to treat it as XHTML later may result in all sorts of
breakage.

What determines if my document is HTML or XHTML?

You may be a bit thrown off by the last sections talk of treating an XHTML as HTML. After
all, if my document is XHTML, that should be the end of the story, right? After all, I put an
XHTML doctype! But it turns out that things are not so simple.
So what really determines if a document is HTML or XHTML? The one and only thing that
controls whether a document is HTML or XHTML is the MIME type. If the document is
served with a text/html MIME type, it is treated as HTML. If it is served
as application/xhtml+xmlor text/xml, it gets treated as XHTML. In particular, none of the
following things will cause your document to be treated as XHTML:

 Using an XHTML doctype declaration

 Putting an XML declaration at the top
 Using XHTML-specific syntax like self-closing tags
 Validating it as XHTML

In fact, the vast majority of supposedly XHTML documents on the internet are served
as text/html. Which means they are not XHTML at all, but actually invalid HTML that’s
getting by on the error handling of HTML parsers. All those “Valid XHTML 1.0!” links on
the web are really saying “Invalid HTML 4.01!”.

Rajat Goyal 6 14IT056

Web Development Lab

Rajat Goyal 7 14IT056

Web Development Lab

Experiment: - 2

Aim: - To study about basic table in HTML.

Program: -

<html>
<head>
<title> Web Development Experment 2 </title>
</head>
<body>
<center><table border="2" cellpadding="10">

<tr>
<td colspan="4" bgcolor="red"><center>Sandeep goyal</center></td>

</tr>
<tr>
<td bgcolor="yellow">1</td>
<td colspan="2" rowspan="2" bgcolor="red"><img src="wd1.jpg"
height="100" width="100"></td>
<td bgcolor="yellow">3</td>
</tr>
<tr>
<td bgcolor="yellow">1</td>

<td bgcolor="yellow">3</td>
</tr>
<tr>
<td colspan="2" bgcolor="yellow"><center>4</center></td>
<td colspan="2" bgcolor="yellow"><center>5</center></td>
</tr>
<tr>
<td bgcolor="red">6</td>
<td bgcolor="red"><center>7</center></td>
<td bgcolor="red"><center>8</center></td>
<td bgcolor="red"><center>9</center></td>
</tr>

</table></center>
</body>
</html>

Rajat Goyal 8 14IT056

Web Development Lab

Rajat Goyal 9 14IT056

Web Development Lab

Experiment: - 3

Aim: - To study about basic table attributes in HTML.

Program: -

<html>

<head>

<title> Web Development Experiment 3 </title>

</head>

<body>

<center><table border="2" cellpadding="10">

<tr>
<td bgcolor="yellow">1</td>
<td rowspan="2" bgcolor="yellow">1</td>
<td rowspan="2" bgcolor="yellow"><center>1</center></td>
</tr>
<tr>
<td bgcolor="red">2</td>

</tr>
<tr>
<td bgcolor="yellow">3</td>
<td rowspan="2" bgcolor="yellow">3</td>
<td bgcolor="yellow"><img src="wd1.jpg" height="100"
width="100"></td>
</tr>
<tr>
<td bgcolor="red">4</td>

<td bgcolor="red"><center>4</center></td>
</tr>
</table></center>

</body>

</html>

Rajat Goyal 10 14IT056

Web Development Lab

Rajat Goyal 11 14IT056

Web Development Lab

Experiment: - 4

Aim: - To study about meta tag in HTML.

How To Use HTML Meta Tags

Want top search engine rankings? Just add meta tags and your website will magically rise to
the top, right? Wrong. Meta tags are one piece in a large algorithmic puzzle that major search
engines look at when deciding which results are relevant to show users who have typed in a
search query.
While there is still some debate about which meta tags remain useful and important to search
engines, meta tags definitely aren’t a magic solution to gaining rankings in Google, Bing,
Yahoo, or elsewhere – so let’s kill that myth right at the outset. However, meta tags help tell
search engines and users what your site is about, and when meta tags are implemented
incorrectly, the negative impact can be substantial and heartbreaking.
Let’s look at what meta tags are, what meta tags matter, and how to avoid mistakes when
implementing meta tags on your website

What Are Meta Tags?

HTML meta tags are officially page data tags that lie between the open and closing head tags
in the HTML code of a document.
The text in these tags is not displayed, but parsable and tells the browsers (or other web
services) specific information about the page. Simply, it “explains” the page so a browser can
understand it.
Here’s a code example of meta tags:
The Title Tag
Although the title tag appears in the head block of the page, it isn’t actually a meta tag.
What’s the difference? The title tag is a required page “element” according to the W3C. Meta
tags are optional page descriptors.

The Description Meta Tag

This is what the description tag looks like:
Ideally, your description should be no longer than 155 characters (including spaces).
However, check the search engine results page (SERP) of choice to confirm this. Some are
longer and some are shorter. This is only a rule of thumb, not a definite “best practice”
anymore.
The “description” meta tag helps websites in three important ways:
 “Description” tells the search engine what your page or site is about: For the
search engine to understand what your page is about, you need to write a good
description. When Google’s algorithm decides a description is badly written or
inaccurate, it will replace that description with its own version of what is on the page.
Wouldn’t you prefer to describe your site to potential customers or visitors using your
own words rather than leaving it in Google’s artificial hands? Look at this example
and judge for yourself:
 “Description” helps with click through rates to your site: Writing a good description
not only helps keep Google from rewriting it, but also helps you get good more
people clicking through to your site. A well-written description not

Rajat Goyal 12 14IT056

Web Development Lab

Rajat Goyal 13 14IT056

Web Development Lab

 only tells users what is on your page, but also entices them to visit your site. A
description is what shows up here in the search engine results. It is like good
window dressing. Sites with poor descriptions will get less click throughs and the
search engines will demote your site in favor of other sites.
 “Description” helps with site rankings: The common belief (based on what Google
said in 2009) is that nothing in the description will help you get rankings.
However, I have seen evidence to the contrary. Is it heavily weighted? No, but if
you want some value on a secondary keyword (say an –ing –ed or –s), use it here.
 Two other quick notes on meta description tags:
 Empty Descriptions: Can a description be empty? Yes. When it is empty Google
and Bing will fill it in for you. In fact, sometimes (e.g., for blogs) you may prefer
Google’s or Bing’s version. (Personally though, I always fill it in whenever
possible, preferring my version to theirs, but if you have a small staff, this isn’t
always practical.)
 Quotes: Don’t use full quotation marks (“”) in your description. It will likely cut
off your description. Use single quotes to avoid this issue.
The Keywords Meta Tag
A long time ago in a galaxy far, far away, the “keywords” meta tag was a critical element for
early search engines. Much like the dinosaurs, this tag is a fossil from ancient search engine
times.
The only search engine that looks at the keywords anymore is Microsoft’s Bing – and they
use it to help detect spam. To avoid hurting your site, your best option is to never add this
tag.
Or, if that’s too radical for you to stomach, at least make sure you haven’t stuffed 300
keywords in the hopes of higher search rankings. It won’t work. Sorry.
If you already have keyword meta tags on your website, but they aren’t spammy, there’s no
reason to spend the next week hurriedly taking them out. It’s OK to leave them for now – just
take them out as you’re able, to reduce page weight and load times.

Other Meta Tags

There are many other meta tags, but none are really considered useful nowadays. Many of the
tags that we used did things like:
 Told the spider when to come back
 Told the browser the distribution
 Told the page to refresh
 Told the page to redirect/refresh
We don’t use these anymore, either because there are better ways (such as schema tagging or
server side methods) or because the engines they used to work on are no longer in existence
or Google has explicitly told us they are not great ideas (such as redirects at the page level).
NOTE: Schema tagging and rich data snippets are single-handedly the most important (and
somewhat quietly announced) change to how your site interacts with the search engines and
the search spiders. Learn it. Know it. Implement it.

Rajat Goyal 14 14IT056

Web Development Lab

Rajat Goyal 15 14IT056

Web Development Lab

Robots Meta Tag

The robots tag is still one of the most important tags. Not so much for the proper
implementation, but the improper.
The robots meta tag lets you specify that a particular page should not be indexed by a search
engine or if you do or do not want links on the page followed.
Believe it or not, it is still common for a site to be deindexed because someone accidentally
added a noindex tag to the entire site. Understanding this tag is vitally important.
Here are the four implementations of the Robots Meta Tag and what they mean.
This means: “Do not Index this page. Do not follow the links on the page.” Your page will
drop OUT of the search index AND your links to other pages will not be followed. This will
break the link path on your site from this page to other pages.
This tag is most often used when a site is in development. A developer will noindex/nofollow
the pages of the site to keep them from being picked up by the search engines, then forget to
remove the tag. When launching your new website, do not trust it has been removed.
DOUBLE CHECK!

The Charset Tag

Finally, all sites must validate charset. In the U.S., that is the UTF-8 tag. Just make sure this
is on your page if you’re delivering HTML using English characters.

Rajat Goyal 16 14IT056

Web Development Lab

Rajat Goyal 17 14IT056

Web Development Lab

Experiment: - 5

Aim: - To study about FRAME tag in HTML.

Program: -

Index.html
<html>

<head>
<frameset cols="50%,50%">

<frame src="abc.html">
<frame name="1" src="aa.html">

</frameset>
</head>

</html>

Abc.html

<html>

<body>
<center>
<a href="aa.html" target="1"><h3>Page AA</h3></a><br><br>
<a href="bb.html" target="1"><h3>Page BB</h3></a><br><br>
<a href="cc.html" target="1"><h3>Page CC</h3></a><br><br>
<a href="dd.html" target="1"><h3>Page DD</h3></a><br><br>
</center>
</body>

</html>

Rajat Goyal 18 14IT056

Web Development Lab

Rajat Goyal 19 14IT056

Web Development Lab

aa.html
<html>

<body>

<h1>This is page AA</h1>

</body>

</html>

BB.html
<html>

<body>

<h1>This is page BB</h1>

</body>

</html>

CC.html
<html>

<body>

<h1>This is page CC</h1>

</body>

</html>

DD.html
<html>

<body>

<h1>This is page DD</h1>

</body>

</html>

Rajat Goyal 20 14IT056