Web Lab

WEB APPLICATION DEVELOPMENT RECORD
1) Introduction to HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. Let's see what is meant by Hypertext Markup
Language, and Web page.
Brief History of HTML

In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a
system for CERN researchers. In 1989, he wrote a memo proposing an internet based
hypertext system
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have
clicked on a hypertext. HyperText is a way to link two or more web pages (HTML
documents) with each other.
Markup language: A markup language is a computer language that is used to apply layout
and formatting conventions to a text document. Markup language makes text more interactive
and dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and translated
by a web browser. A web page can be identified by entering an URL. A Web page can be of
the static or dynamic type. With the help of HTML only, we can create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages with the
help of styling, and which looks in a nice format on a web browser. An HTML document is
made of many HTML tags and each HTML tag contains different content.
Structure of html
1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>
Test it Now
Description of HTML Example
<!DOCTYPE>: It defines the document type or it instruct the browser about the version of
HTML.
<html > :This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except <!
DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears at the
top of the browser window. It must be placed inside the head tag and should close
immediately. (Optional)
<body> : Text between body tag describes the body content of the page that is visible to the
end user. This tag contains the main content of the HTML document.
<h1> : Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
2) Browsers and HTML
A web browser is a software application specifically for the purpose of

reading HTML instructions and displaying the resulting Web page. It is
a fully functional software that can interpret and display HTML Web
pages, applications, JavaScript, AJAX and other content hosted on Web
servers. HTML is responsible for telling a Web browser how text and
other objects in a Web document should appear. Hypertext Transfer
Protocol (HTTP) is define how browsers should request Web pages and
how Web servers should respond to those requests.
How to Web Browsers Work ?
A web browser typically reads and renders HTML documents. This
happens inside the browser as two stages - the parsing stage and the
rendering stage. During the parsing stage, the browser reads the markup
in the document, breaks it down into components, and builds a
document object model (DOM). When the DOM tree has been
constructed, and any CSS style sheets have been loaded and parsed, the
browser starts the rendering stage. Each node in the DOM tree will be
rendered and displayed in the browser.
Web Browser - Brief History

The first web browser was invented in 1990 by Sir Tim Berners Lee. It
was called WorldWideWeb and was later renamed as Nexus. After that
the world's first popular browser Mosaic innovated by Marc Andreessen
in 1993, which made the World Wide Web system easy to use and more
accessible to the average person. Over the years many other browsers
were developed , but Microsoft Internet Explorer , Mozilla Firefox and
Google's Chrome continue to dominate todays market
Internet Explorer
Internet Explorer (IE) is a product from software giant Microsoft. This is the most
commonly used browser in the universe. This was introduced in 1995 along with
Windows 95 launch and it has passed Netscape popularity in 1998.
Google Chrome
This web browser is developed by Google and its beta version was first released on
September 2, 2008 for Microsoft Windows. Today, chrome is known to be one of the
most popular web browser with its global share of more than 50%.
Mozilla Firefox
Firefox is a new browser derived from Mozilla. It was released in 2004 and has
grown to be the second most popular browser on the Internet.
Safari
Safari is a web browser developed by Apple Inc. and included in Mac OS X. It was
first released as a public beta in January 2003. Safari has very good support for
latest technologies like XHTML, CSS2 etc.
Opera
Opera is smaller and faster than most other browsers, yet it is full- featured. Fast,
user-friendly, with keyboard interface, multiple windows, zoom functions, and more.
Java and non Java-enabled versions available.
3) Editor’s Offline and Online

HTML editors are an integral part of creating websites. Whether you like
to code your own HTML, or prefer to simply click and drag elements
around the page, a good HTML editor will make your life easier.
You can use any of the online HTML editors on this website, or if you
prefer, you can download a commercial HTML editor for use on your own
computer.
Free Editor
This free HTML editor lets you create HTML codes for your website or
blog. Click on the "Source" button to view the generated code. Also see
the Full HTML Editor which has more buttons, and check out our range
of HTML Generators.
Source StylesFormat
◢
More Online Editors

The following HTML editors are also available for free.
● HTML Editor
● HTML Text Editor
● HTML Bold Editor
● Text Color Editor
● HTML Link Editor
● Image Code Editor
Offline Editor
An offline editor allows you to create websites directly from your own
computer (as opposed to generating the HTML online, then copy/pasting
like an online editor). A good offline HTML editor will provide you with a
vast array of functionality that you can configure to your own personal
liking.
KompoZer, CoffeeCup, and HTML-Kit are popular HTML editors that

contain features that you'd expect in most HTML editors, plus a few more.
Typical features include HTML and CSS support, split screen view,
HTML entities library, built-in FTP client and more.
Online Website Builder

Also try this online website builder at our partner site, ZappyHost. This is
a "one-stop-shop" for building your own website. Using this option, you
don't need to keep a copy of your website on your own computer - you can
maintain your website from any computer. Also, you don't even need to
know HTML. The website builder uses a "point and click" method and
generates all the HTML behind the scenes.
4 Tags, Attribute and Elements
HTML Tags: Tags are the starting and ending parts of an HTML element.
They begin with < symbol and end with > symbol. Whatever written inside <
and > are called tags.
Example:
<b> </b>
HTML elements: Elements enclose the contents in between the tags. They
consist of some kind of structure or expression. It generally consists of a start
tag, content and an end tag.
Example:
<b>This is the content.</b>
This is the content.

Where, <b> is the starting tag and </b> is the ending tag.
HTML Attributes: It is used to define the character of an HTML element. It

always placed in the opening tag of an element. It generally provides
additional styling (attribute) to the element.
Example:
<p align="center">This is paragraph.</p>
This is paragraph.
HTML Tags HTML Elements HTML Attributes
HTML attributes are used to

HTML tags are used to HTML element holds
describe the characteristic of an
hold the HTML element. the content.
HTML element in detail.
Whatever written
HTML tag starts with < and HTML attributes are found
within a HTML tag are
ends with > only in the starting tag.
HTML elements.
HTML tags are almost like

HTML elements HTML attributes specify
keywords where every
specifies the general various additional properties to
single tag has unique
content. the existing HTML element.
meaning.
What are Tags and Attributes?

Tags and attributes are the basis of HTML.
They work together but perform different functions – it is worth investing 2
minutes in differentiating the two.
What Are HTML Tags?
Tags are used to mark up the start of an HTML element and they are usually
enclosed in angle brackets. An example of a tag is: <h1>.
Most tags must be opened <h1> and closed </h1> in order to function.
What are HTML Attributes?
Attributes contain additional pieces of information. Attributes take the form of
an opening tag and additional info is placed inside.
● An example of an attribute is:
<img src=”1.jpg" alt="A photo of mine.">
In this instance, the image source (src) and the alt text (alt) are attributes of
the <img> tag.
Golden Rules To Remember
● The vast majority of tags must be opened (<tag>) and closed (</tag>) with
the element information such as a title or text resting between the tags.
● When using multiple tags, the tags must be closed in the order in which
they were opened. For example:
Example: <strong><em>This is really important!</em></strong>
5) Doctype Element
All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an "information" to the browser

about what document type to expect.
In HTML 5, the declaration is simple:
<!DOCTYPE html>
Older HTML Documents

In older documents (HTML 4 or XHTML), the declaration is more complicated
because the declaration must refer to a DTD (Document Type Definition).
HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.abc.org/TR/html4/loose.dtd">
XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.abc.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML Elements and Doctypes

Look at our table of all HTML elements, and what Doctype each element
appears in.
Tips and Notes

Tip: The <!DOCTYPE> declaration is NOT case sensitive.
Examples
<!DOCTYPE html>
<!DocType html>
<!Doctype html>
<!doctype html>
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
6) Comments
The comment tag is used to insert comments in the HTML code. It is a good
practice of coding, so that coder and the reader can get help to understand
the code. It is useful to understand steps of the complex code. The comment
tag is helpful while the debugging of codes.
● It is a simple piece of code that is wiped off (ignore) by web browsers i.e. ,
not displayed by the browser.
● It helps the coder and reader to understand the piece of code used for
especially in complex source code.
Syntax:

Types of HTML Comments: There are three types of comments in HTML
which are:
● Single-line comment
● Multi-lines comment
● Using <comment> tag
<!DOCTYPE html>
<html>
<body>

<h1>LIMAT</h1>

<h2>This is single line comment</h2>
</body>
</html>
7) Headings, Paragraphs, and Formatting Text
<html>
<body>
<h1>This is heading 1</h1>

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


</body>
</html>
<html>
<body>
<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
8) Lists and Links
<!DOCTYPE html>
<html>
<body bgcolor="orange">
<h2><center>LIMAT</center></h2>
<h2>B.TECH BRANCHES</h2>
<ol>
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
</ol>
<h2>M.TECH COURSES</h2>
<ul>
<li>CSE</li>
<li>AI</li>
<li>ML</li>
</ul>
<a href="https://www.google.com">CLICK FOR MORE INFO</a>
</body>
</html>
9) Images and Tables
IMAGE PROGRAM
<html>
<body>
<h2>HTML Image</h2>
<img src="p.png">
</body>
</html>
TABLE PROGRAM
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the

table.</p>
</body>
</html>

Web Lab

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Lab

Uploaded by

Copyright:

Available Formats

WEB APPLICATION DEVELOPMENT RECORD

Brief History of HTML

2) Browsers and HTML

A web browser is a software application specifically for the purpose of

Web Browser - Brief History

3) Editor’s Offline and Online

More Online Editors

KompoZer, CoffeeCup, and HTML-Kit are popular HTML editors that

Online Website Builder

4 Tags, Attribute and Elements

<b>This is the content.</b>

This is the content.

HTML Attributes: It is used to define the character of an HTML element. It

<p align="center">This is paragraph.</p>

HTML Tags HTML Elements HTML Attributes

HTML attributes are used to

HTML tags are almost like

What are Tags and Attributes?

All HTML documents must start with a <!DOCTYPE> declaration.

The declaration is not an HTML tag. It is an "information" to the browser

In HTML 5, the declaration is simple:

Older HTML Documents

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

HTML Elements and Doctypes

Tips and Notes

<title>Title of the document</title>

The content of the document......

<h2>This is single line comment</h2>

7) Headings, Paragraphs, and Formatting Text

<h1>This is heading 1</h1>

<p><b>This text is bold</b></p>

<a href="https://www.google.com">CLICK FOR MORE INFO</a>

9) Images and Tables

border:1px solid black;

<h2>A basic HTML table</h2>

<td>Centro comercial Moctezuma</td>

<p>To understand the example better, we have added borders to the

You might also like