Unit 1 WEB DESIGNING

Internet
The internet is a huge collection of computers connected in a communication network. It is possible to access
almost any information, communicate with anyone else in the world, and do much more. These computers are
every imaginable size, configuration and manufacturer. In fact, some of the devices connected to the internet
such as plotters and printers are not computers at all. Transmission Control Protocol/Internet Protocol became
the standard for computer network connections in 1982 and it can be directly used to allow program on one
computer to communicate with a program on another computer via the internet.

WWW or Web
Web is a collection of software and protocols that have been installed on most if not all the computers on the
internet.
THREE TYPES OF ENTITIES OF INTERNET

Web Browser
A web browser is a software application for retrieving, presenting and traversing information, resources on
www. Some examples of web browsers are Internet Explorer, Google Chrome, Netscape Navigator, Safari,
Opera, and Mozilla Firefox etc.

URL
Uniform (or Universal) Resource Locators are used to identify documents on the internet. It is a special
character string that constitutes a reference to an internet address. http://www.example.com/index.html, which
indicates a protocol (http), a hostname (www.example.com), and a file name (index.html).
E-mail is a system for sending messages from one individual to another via telecommunications links between
computers or terminals using dedicated software.

Web Page a web page is a document that’s created in html that shows up on the internet when you type in or go
to the web page’s address. it’s any page that you see when you surf the internet.
Web Designing is defined as the tasks of designing HTML driven web pages to be displayed over the World
Wide Web.

Website is a location on web and is hosted on a web server. It is a set of related web pages. It is accessed using
Internet address known as Uniform Resource Locator.

Web design Process

There are 6 phases in Web designing process

Phase One: Information Gathering

The first step in designing a successful web site is to gather information. Many things need to be taken into
consideration .Certain things to consider are:

Purpose
What is the purpose of the site? Do you want to provide information, promote a service, sell a product… ?
Goals
What do you hope to accomplish by building this web site? Two of the more common goals are either to make
money or share information.

Target Audience
Is there a specific group of people that will help you reach your goals? It is helpful to picture the “ideal” person
you want to visit your web site. Consider their age, sex or interests – this will help us determine the best design
style for your site.

Content
What kind of information will the target audience be looking for on your site? Are they looking for specific
information, a particular product or service…?

Phase Two: Planning

Using the information gathered from phase one, we put together a plan for your web site.

Here we develop a site map – a list of all main topic areas of the site, as well as sub-topics. This gives us a
guide as to what content will be on the site, and is essential to developing a consistent, easy to understand
navigational system. This is also the point where we decide what technologies should be implemented.

Phase Three: Design

Drawing from the information gathered up to this point, we determine the look and feel of the site. Target
audience is one of the key factors taken into consideration here. A site aimed at teenagers, for example, will
look much different than one meant for a financial institution. We also incorporate elements such as the
company logo or colors to help strengthen the identity of your company on the web site.

In this phase, communication is crucial to ensure that the final web site will match your needs and taste. We
work together in this way, exchanging ideas, until we arrive at the final design for the site. Then development
can begin…

Phase Four: Development

This is where the web site itself is created. We take all of the individual graphic elements from the prototype
and use them to create the functional web site. We also take content and distribute it throughout the site, in the
appropriate areas.

Phase Five: Testing and Delivery

At this point, final details are checked and tested. They test things such as the complete functionality of forms
or other scripts, test for last minute compatibility issues ensuring that the site is optimized to be viewed properly
in the most recent browser versions.

Once final approval is recieved, it is time to deliver the site. upload the files to your server – in most cases, this
also involves installing and configuring.

Phase Six: Maintenance

The development of web site is not necessarily over, though. One way to bring repeat visitors to the site is to
offer new content or products on a regular basis
Categories of websites

There are mainly two categories of websites

1. Static website
2. Dynamic website

Static Websites

Static websites are also known as flat or stationary websites. They are loaded on the client’s browser as exactly
they are stored on the web server. Such websites contain only static information. User can only read the
information but can’t do any modification or interact with the information.

Static websites are created using only HTML. Static websites are only used when the information is no more
required to be modified.

Dynamic Websites

Dynamic websites shows different information at different point of time. It is possible to change a portion of a
web page without loading the entire web page. It has been made possible using Ajax technology.

Server-side dynamic web page

It is created by using server-side scripting. There are server-side scripting parameters that determine how to
assemble a new web page which also include setting up of more client-side processing.

Client-side dynamic web page

It is processed using client side scripting such as javascript. And then passed in to Document Object Model
(DOM).
Types of websites

1. Internet Forums

An internet forum is message board where people can hold conversation by posting messages.

Key Points

 A forum can contain several sub forums.

 Each of sub forums may contain a number of topics.
 Within a forum’s topic, each new discussion started is called a thread.
 This thread can be replied by as many people as so wish.

2. Blog

The term Blog is taken from web log. It is a kind of web site that is updated regularly, with content about
almost anything. In other words, blog is a Content Management System (CMS), an easy way of publishing
articles on the internet.
Blogging Terminologies
Blog

A type of website used to publish content on the internet.

Blogger

A person who writes for a blog.

Blogging

Writing for blogs is referred as blogging.

Blogosphere

A term is used to refer all the blogs on the web.

What to Blog about

Following discussion will help you to figure out what to write about and as well as what to name your blog.

 Write what you know about. For example, if you have good computer knowledge. You can write what
you know about the subject.
 You can share your experience. You can also write what you gained from that experience, what you
learned.
 Detail your personal research.

3. E-commerce

E-Commerce or Electronics Commerce is a methodology of modern business which addresses the need of
business organizations, vendors and customers to reduce cost and improve the quality of goods and services
while increasing the speed of delivery. E-commerce refers to paperless exchange of business information using
following ways.

 Electronic Data Exchange (EDI)

 Electronic Mail (e-mail)
 Electronic Bulletin Boards
 Electronic Fund Transfer (EFT)
 Other Network-based technologies

E-Commerce provides following features:

Non-Cash Payment

E-Commerce enables use of credit cards, debit cards, smart cards, electronic fund transfer via bank's website
and other modes of electronics payment.

24x7 Service availability

E-commerce automates business of enterprises and services provided by them to customers are available
anytime, anywhere. Here 24x7 refers to 24 hours of each seven days of a week.

Advertising / Marketing

E-commerce increases the reach of advertising of products and services of businesses. It helps in better
marketing management of products / services.

Improved Sales

Using E-Commerce, orders for the products can be generated anytime, anywhere without any human
intervention. By this way, dependencies to buy a product reduce at large and sales increases.
Support

E-Commerce provides various ways to provide pre sales and post sales assistance to provide better services to
customers.

4. Portfolio

Online portfolio is collection of images, multimedia, emails, blog entries, and hyperlinks that are managed
online. It can be seen as a kind of learning record that provides actual evidence of achievement.

Types

There are three types of online portfolio:

1. Developmental (e.g. working)

2. Reflective (e.g. learning)
3. Representational (e.g. showcase)

Developmental portfolio contains all the things that an individual has done over a period of time.

Reflective portfolio contains personal reflection on the content.

Representational online portfolio refers to learner’s achievement in a particular work.

Web Architecture
1. When client sends request for a web page, the web server search for the requested page if requested
page is found then it will send it to client with an HTTP response.
2. If the requested web page is not found, web server will the send an HTTP response:Error 404 Not
found

Architecture

Web Server Architecture follows the following two approaches:

 1. Concurrent Approach
2. Single-Process-Event-Driven Approach.

Concurrent Approach

Concurrent approach allows the web server to handle multiple client requests at the same time. It can be
achieved by following methods:

 Multi-process
 Multi-threaded
 Hybrid method.

Multi-processing

In this a single process (parent process) initiates several single-threaded child processes and distribute incoming
requests to these child processes. Each of the child processes are responsible for handling single request.

It is the responsibility of parent process to monitor the load and decide if processes should be killed or forked.

Multi-threaded

Unlike Multi-process, it creates multiple single-threaded process.

Hybrid

It is combination of above two approaches. In this approach multiple process are created and each process
initiates multiple threads. Each of the threads handles one connection. Using multiple threads in single process
results in less load on system resources.

Web Publishing

Web publishing is the process of publishing original content on the Internet.

The process includes building and uploading websites, updating the associated webpages, and posting content to
these web pages online. Web publishing comprises of personal, business, and community websites in addition
to e-books and blogs.

The content meant for web publishing can include text, videos, digital images, artwork, and other forms of
media.

Publishers must possess a web server, web publishing software, and an Internet connection to carry out web
publishing.

Web publishing is also known as online publishing.

HTML:

Stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web
pages.
HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification
which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999.
Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is an extension
to HTML 4.01, and this version was published in 2012.

What is HTML?

HTML is a markup language for describing web documents (web pages).

 HTML stands for Hyper Text Markup Language

 A markup language is a set of markup tags
 HTML documents are described by HTML tags
 Each HTML tag describes different document content

HTML Tags

HTML tags are keywords (tag names) surrounded by angle brackets:

<tagname>content goes here...</tagname>

 HTML tags normally come in pairs like <p> and </p>

 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward slash inserted before the tag name

The start tag is called the opening tag and the end tag is called the closing tag.

Basic HTML Document:

Example

<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Output:

My First Heading

My first paragraph.

<html> and </html>

The <html> tag tells the browser that this is an HTML document.

The <html> tag represents the root of an HTML document.

The <html> tag is the container for all other HTML elements

<head> and </head> provides information about the document

The <head> element is a container for all the head elements.

The <head> element can include a title for the document, scripts, styles, meta information, and more.

The following elements can go inside the <head> element:

 <title> <style> <link> <script> <noscript>

<title> and </title> provides a title for the document

The <title> tag is required in all HTML documents and it defines the title of the document.

The <title> element:

 defines a title in the browser toolbar

 provides a title for the page when it is added to favorites
 displays a title for the page in search-engine results

<body> and </body> describes the visible page content

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables,
lists, etc.

<h1> and </h1> describes a heading

<p> and </p> describes a paragraph

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading.

<h6> defines the least important heading:

Example
<html>
<head>
<title>html headings</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4/h4>
<h5>This is heading 5</h5>
<h6> This is heading 6 </h6>
</body>
</html>
Output:

This is heading 1

This is heading 2

This is heading 3
This is heading 4
This is heading 5
This is heading 6

HTML Paragraphs

HTML paragraphs are defined with the <p> tag

<html>

<head>

<title>html paragraphs</title>

</head>

<body>

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

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

</body>
</html>

Output:

This is a paragraph.

This is another paragraph.

HTML Marquee tag

HTML marquee tag is used for scrolling piece of text displayed either horizontally or vertically.

<html>

<head>

<title>html marquee</title>

</head>

<body>

<marquee>This is a basic example of marquee.</marquee>

<marquee direction=”up”>The direction of text will be from bottom to top </marquee>

</body>

</html>

HTML LINK’S:

Html links are hyperlinks you can click on a link and jump to another document.

The href attribute specifies the destination address of the link.

<html>

<body>

<a href="headings.html">this is a link</a>

</body>

</html>

Output:

This is a link
Once we click to “this is a link” ,the browser will link to headings.html and the contents of headings.html

Will be displayed as

This is heading 1

This is heading 2

This is heading 3
This is heading 4
This is heading 5

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), and size (width and height) are provided as attributes:

(if image is present in the same folder then right click on the image goto

properties copy the image name with extension jpeg)

<HTML>

<HEAD>

<TITLE>Image</TITLE>

</HEAD>

<BODY>

<img src="baby.jpeg" >

</img></body>

</html>

Output:
<!---(if image is not present in the same folder then

right click on the image go to properties copy the

image location\nameof the image with extension jpeg)

(relative path method)!>

<HTML>

<HEAD>

<TITLE>Image</TITLE>

</HEAD>

<BODY>

<img src="../img300.JPEG" >

</img></body>

</html>

Output:

HTML Line Breaks:

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph

<html>

<body>

<p>This is<br>a paragraph<br>with line breaks</p>

</body>

</html>
Output:

This is
a paragraph
with line breaks

HTML Formatting

If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined;
these are just three of the ten options available to indicate how text can appear in HTML and XHTML.

Bold Text

Anything that appears within <b>...</b> element, is displayed in bold as shown below:

Example
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a bold typeface.

Italic Text

Anything that appears within <i>...</i> element is displayed in italicized as shown below:

Example
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a italicized typeface.

Underlined Text

Anything that appears within <u>...</u> element, is displayed with underline as shown below:
Example
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a underlined typeface.

Strike Text

Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line
through the text as shown below:

Example
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a strikethrough typeface.

Superscript Text

The content of a ^... element is written in superscript; the font size used is the same size as the
characters surrounding it but is displayed half a character's height above the other characters.

Example
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a ^superscript typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a superscript typeface.

<html>

<head>

<title>Superscript Text Example</title>

</head>

<body>

<p>(a+b) ²m </p>

</body>

</html>

Output:

(a+b) 2m

Subscript Text

The content of a _... element is written in subscript; the font size used is the same as the characters
surrounding it, but is displayed half a character's height beneath the other characters.

Example
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a _subscript typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a subscript typeface.

<html>

<head>

<title>Subscript Text Example</title>

</head>

<body>

<p>h ₂o</p>
</body>

</html>

Output: h 2o

Larger Text

The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding
it as shown below:

Example
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a big typeface.

Smaller Text

The content of the <small>...</small> element is displayed one font size smaller than the rest of the text
surrounding it as shown below:

Example
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a small typeface.

HTML Comments

Comment is a piece of code which is ignored by any web browser. It is a good practice to add comments into
your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to
anyone looking at the code. Comments help you and others understand your code and increases code
readability.
HTML comments are placed in between <!-- ... --> tags. So any content placed with-in <!-- ... --> tags will be
treated as comment and will be completely ignored by the browser.

Example

<html>
<head> <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>

This will produce following result without displaying the content given as a part of comments:

Document content goes here....

HTML Tables

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and
columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td>
tag is used to create data cells.

Example

<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

This will produce following result:

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Here border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a
border then you can use border="0".

Table Heading

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent
actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use
<th> element in any row.

Example

<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

This will produce following result:

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

Cellpadding and Cellspacing Attributes

There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white space in your
table cells. The cellspacing attribute defines the width of the border, while cellpadding represents the distance
between cell borders and the content within a cell.
Example

<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

This will produce following result:

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single column. Similar way
you will use rowspan if you want to merge two or more rows.

Example

<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

This will produce following result:

Column 1 Column 2 Column 3

Row 1 Cell 2 Row 1 Cell 3

Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Tables Backgrounds

You can set table background using one of the following two ways:

 bgcolor attribute - You can set background color for whole table or just for one cell.
 background attribute - You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

Example

<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

This will produce following result:

Column 1 Column 2 Column 3

Row 1 Cell 2 Row 1 Cell 3

Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Here is an example of using background attribute. Here we will use an image available in /images directory.

<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

This will produce following result. Here background image did not apply to table's header.

Column 1 Column 2 Column 3

Row 1 Cell 2 Row 1 Cell 3

Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Table Height and Width

You can set a table width and height using width and height attributes. You can specify table width or height in
terms of pixels or in terms of percentage of available screen area.

Example

<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

This will produce following result:

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Table Caption

The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag
is deprecated in newer version of HTML.

Example

<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>

This will produce following result:

This is the caption

row 1, column 1 row 1, columnn 2

row 2, column 1 row 2, columnn 2

HTML Lists

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list
elements. Lists may contain:

 <ul> - An unordered list. This will list items using plain bullets.
 <ol> - An ordered list. This will use different schemes of numbers to list your items.
 <dl> - A definition list. This arranges your items in the same way as they are arranged in a dictionary.

HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list is created by
using HTML <ul> tag. Each item in the list is marked with a bullet.

Example

<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

This will produce following result:

 Beetroot
 Ginger
 Potato
 Radish

The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default it is a disc. Following
are the possible options:

<ul type="square">
<ul type="disc">
<ul type="circle">

Example

Following is an example where we used <ul type="square">

<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

This will produce following result:

 Beetroot
 Ginger
 Potato
 Radish

Example

Following is an example where we used <ul type="disc"> :

<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

This will produce following result:

 Beetroot
 Ginger
 Potato
  Radish

Example

Following is an example where we used <ul type="circle"> :

<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

This will produce following result:

o Beetroot
o Ginger
o Potato
o Radish

HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted then HTML ordered list will be used.
This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive
ordered list element tagged with <li>.

Example

<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

 1. Beetroot
2. Ginger
3. Potato
4. Radish

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default it is a number.
Following are the possible options:

<ol type="1"> - Default-Case Numerals.

<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.

Example

Following is an example where we used <ol type="1">

<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

1. Beetroot
2. Ginger
3. Potato
4. Radish

Example

Following is an example where we used <ol type="I"

<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="I">
 <li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

I. Beetroot
II. Ginger
III. Potato
IV. Radish

Example

Following is an example where we used <ol type="i">

<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

i. Beetroot
ii. Ginger
iii. Potato
iv. Radish

Example

Following is an example where we used <ol type="A">

<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="A">
 <li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

A. Beetroot
B. Ginger
C. Potato
D. Radish

Example

Following is an example where we used <ol type="a">

<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

a. Beetroot
b. Ginger
c. Potato
d. Radish

The start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the
possible options:

<ol type="1" start="4"> - Numerals starts with 4.

<ol type="I" start="4"> - Numerals starts with IV.
<ol type="i" start="4"> - Numerals starts with iv.
<ol type="a" start="4"> - Letters starts with d.
<ol type="A" start="4"> - Letters starts with D.
Example

Following is an example where we used <ol type="i" start="4" >

<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="i" start="4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

iv. Beetroot
v. Ginger
vi. Potato
vii. Radish

HTML Definition Lists

HTML and XHTML support a list style which is called definition lists where entries are listed like in a
dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other
name/value list.

Definition List makes use of following three tags.

 <dl> - Defines the start of the list

 <dt> - A term
 <dd> - Term definition
 </dl> - Defines the end of the list

Example

<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

This will produce following result:

HTML
This stands for Hyper Text Markup Language

HTTP
This stands for Hyper Text Transfer Protocol

Hspace and Vspace attributes

HSPACE sets the horizontal space between the image and surrounding text. VSPACE sets the vertical space
between the image and surrounding text.

Example for hspace

<html>

<head>

<title> image </title>

</head>

<body>

<img src="bca.jpeg" width="300px" height="300px" title="LILY IMAGE" hspace=300 align=left>

</body>

</html>
Example for vspace

<html>

<head>

<title> image </title>

</head>

<body>

<img src="bca.jpeg" width="300px" height="300px" title="LILY IMAGE" vspace=300 align=right>

</body>

</html>

Image as button

Image buttons have the same effect as submit buttons. When a visitor clicks an image button the form is sent to
the address specified in the action setting of the <form> tag.

Example
<html>

<head>

<title>My Page</title>

</head>

<body>

<form >

<div align="center">

<br><br>

<input type="text" size="25" value="Enter your name here!">

<br><input type="image" src="bca.jpeg" name="image" width="60" height="60"><br>

</div>

</form>

</body>

</html>

Frames

HTML frames are used to divide your browser window into multiple sections where each section can load a
separate HTML document. A collection of frames in the browser window is known as a frameset. The window
is divided into frames in a similar way the tables are organized: into rows and columns.

Advantages of Frames
  Frame Provides technical sophisticated appearance to the web site.
 It facility to reduce downloading time and improves the usability of the website.
 Frames generally include navigation link, header or footers, which help user to find and navigate to
required information.
 It separates content of website from navigation elements, which is useful for website maintenance and
content modification.

Disadvantages of Frames

There are few drawbacks with using frames, so it's never recommended to use frames in your web pages:

 Some smaller devices cannot cope with frames often because their screen is not big enough to be
divided up.
 Sometimes your page will be displayed differently on different computers due to different screen
resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.
 The web developer must be track of more HTML documents linked with main frame.
 It is difficult to print the entire page, which is developed using frame.

Creating Frames

To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines how to
divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols
attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML document
shall open into the frame.

Example

Following is the example to create three horizontal frames:

1. Row.html

<html>

<head>

<title>HTML Frames</title>

</head>

<frameset rows="10%,80%,10%">

<frame src="me.html" />

<frame src="ma.html" />

 <frame src="mi.html" />

</frameset>

</html>

2. Me.html

<html>

<head>

<title> Frames</title>

</head>

<body bgcolor="yellow">

<p> COMPUTER </p>

</body>

</html>

Ma.html

<html>

<head>

<title> Frames</title>

</head>

<body bgcolor="red">

<p>Definition </p>

<p>Computer is an electronic data processing device which</p>

Accepts and stores data input,<br/>

Processes the data input, and <br/>

Generates the output in a required format.<br/>

<p>Functionalities of a computer</p>

<p>Any digital computer carries out five functions in gross terms</p>

Takes data as input. <br/>

Stores the data/instructions in its memory and use them when required.<br/>

Processes the data and converts it into useful information. <br/>

Generates the output <br/>

Controls all the above four steps.<br/>

</p>

</body>

</html>

3. Mi.html

<html>
<head>
<title> Frames</title>
</head>
<body bgcolor="green">
<p>SUPERB DEVICE</p>
</body>
</html>

Output

Following is the example to create the vertical frames:

Cols.html

<html>

<head>

<title>HTML Frames</title>

</head>

<frameset cols="10%,80%,10%">

<frame src="me.html" />

<frame src="ma.html" />

<frame src="mi.html" />

</frameset>

</html>

1. Me.html

<html>

<head>

<title> Frames</title>

</head>

<body bgcolor="pink">

<p> COMPUTER </p>

</body>

</html>

2. Ma.html

<html>

<head>

<title> Frames</title>

</head>

<body bgcolor="red">
 <p> COMPUTER </p>

</body>

</html>

3. Mi.html

<html>

<head>

<title> Frames</title>

</head>

<body bgcolor="yellow">

<p> COMPUTER </p>

</body>

</html>

Output

Frame targeting

One of the most popular uses of frames is to place navigation bars in one frame and then load main pages into a
separate frame.

The target attribute specifies where to open the linked document

Example

1. Test.html

<html>
<head>

<title>HTML Target Frames</title>

</head>

<frameset cols="10%,*">

<frame src="menu.html" name="f1" />

<frame src="main.html" name="f2"/>

</frameset>

</html>

2. Menu.html

<html>

<body bgcolor="pink">

<br/>

<a href="http://www.google.com" target="f2" >Google</a>

<br /><br/>

<a href="http://www.microsoft.com" target="f2">Microsoft</a>

<br /><br/>

<a href="http://news.bbc.co.uk" target="f2">BBC News</a></a>

</body>

</html>

3. Main.html

<html>

<body bgcolor="pink">

<h3>This is main page and content from any link will be displayed here.</h3>

<p>So now click any link and see the result.</p>

</body>
</html>

Output

Frame targeting:
The target attribute specifies where to open the linked document

Example

<html>

<body>

<p>Open link in a new window or tab: <a href="https://www.w3schools.com" target="_blank">Visit

W3Schools!</a></p>

</body>

</html>

Attribute Values

Value Description
_blank Opens the linked document in a new window or tab

_self Opens the linked document in the same frame as it was clicked (this is default)

_parent Opens the linked document in the parent frame

_top Opens the linked document in the full body of the window

framename Opens the linked document in a named frame

Continuous Text scrolling

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left">Continuous scrolling text</marquee>
</body>
</html>

Slide Stop text

<html>
<head>
</head>
<body>
<marquee behavior="slide" direction="left">Slide Stop text</marquee>
</body>
</html>

Side Touch Margin Bounce Text

<html>
<head>
</head>
<body>
<marquee behavior="alternate" direction="left">Side Touch Margin Bounce Text</marquee>
</body>
</html>
Upside Text Scrolling
<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="up">Upside Text Scrolling</marquee>
</body>
</html>

Marquee Text Scrolling Speed

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="3">Slow speed scroll
speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Medium speed scroll
speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="17">Fast speed scroll
speed</marquee>
</body>
</html>
Marquee tag example with various behavior:

<html>

<head>

</head>

<body>

<marquee behavior="scroll" direction="left">Continuous scrolling text

<marquee behavior="slide" direction="left">Slide Stop text</marquee>

<marquee behavior="alternate" direction="left">Side Touch Margin Bounce Text

<marquee behavior="scroll" direction="up">Upside Text Scrolling

<marquee behavior="scroll" direction="left" scrollamount="3">Slow speed scroll speed

<marquee behavior="scroll" direction="left" scrollamount="10">Medium speed scroll speed

<marquee behavior="scroll" direction="left" scrollamount="17">Fast speed scroll speed

</marquee>

</body>

</html>