Scribd
Upload
193 views50 pages

BBA-108-E-Commerce Unit-TWO PDF

The document provides examples of various HTML elements and tags used to structure content including: ordered and unordered lists, tables with colspan and rowspan, forms, frames, image maps, links, and CSS styling. Ordered lists, tables, and forms are shown with basic, nested, and advanced formatting. The document also includes examples of HTML tags for headings, paragraphs, hyperlinks, images, text formatting, and more. CSS examples demonstrate styling of links, tables, text, and page background/layout.

Uploaded by

A1cyb Cafe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
193 views50 pages

BBA-108-E-Commerce Unit-TWO PDF

The document provides examples of various HTML elements and tags used to structure content including: ordered and unordered lists, tables with colspan and rowspan, forms, frames, image maps, links, and CSS styling. Ordered lists, tables, and forms are shown with basic, nested, and advanced formatting. The document also includes examples of HTML tags for headings, paragraphs, hyperlinks, images, text formatting, and more. CSS examples demonstrate styling of links, tables, text, and page background/layout.

Uploaded by

A1cyb Cafe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

BBA-108

E-Commerce
Unit 2

1. ORDERED LIST

1. ANIL
2. SUMIT
3. SUNIL
4. SANJAY
5. VIJAY

<html>

<body>

<ol>

<li>ANIL</li>

<li>SUMIT</li>

<li>SUNIL</li>

<li>SANJAY</li>

<li>VIJAY</li>

</ol>

</body>

</html>

A. ANIL
B. SUMIT
C. SUNIL
D. SANJAY
E. VIJAY

<html>

<body>
<ol type="A">

<li>ANIL</li>

<li>SUMIT</li>

<li>SUNIL</li>

<li>SANJAY</li>

<li>VIJAY</li>

</ol>

</body>

</html>

2. UNORDERED LIST

 ANIL
 SUMIT
 SUNIL
 SANJAY
 VIJAY

<html>

<body>

<ul>

<li>ANIL</li>

<li>SUMIT</li>

<li>SUNIL</li>

<li>SANJAY</li>

<li>VIJAY</li>

</ul>

</body>

</html>
o ANIL
o SUMIT
o SUNIL
o SANJAY
o VIJAY

<html>

<body>

<ul type="circle">

<li>ANIL</li>

<li>SUMIT</li>

<li>SUNIL</li>

<li>SANJAY</li>

<li>VIJAY</li>

</ul>

</body>

</html>

ORDERED & UNORDERED LIST

 IPU
1. KRCHE
 BBA
 BJMC
2. MAIMS
 BCA
 MCA
 DU
A. KMC
 BA
 MA
B. SRCC
 B.COM.
 M.COM.

<body>

<html>

<ul>

<li>IPU</li>

<ol TYPE="1">

<li>KRCHE</li>

<ul>

<li>BBA</li>

<li>BJMC</li>

</ul>

<li>MAIMS</li>

<ul>

<li>BCA</li>

<li>MCA</li>

</ul>

</ol>

<li>DU</li>

<ol type="A">

<li>KMC</li>

<ul type="disc">

<li>BA</li>

<li>MA</li>

</ul>

<li>SRCC</li>

<ul type="disc">
<li>B.COM.</li>

<li>M.COM.</li>

</ul>

</ol>

</ul>

</body>

</html>

3. SIMPLE TABLE

NAME ADDRESS SALARY

AMIT NARELA 2000

SUNIL ROHINI 4000

SUMIT PALAM 5000

<html>

<body>

<table border="2">

<tr>

<td>NAME</td>

<td>ADDRESS</td>

<td>SALARY</td>

</tr>

<tr>
<td>AMIT</td>

<td>NARELA</td>

<td>2000</td>

</tr>

<tr>

<td>SUNIL</td>

<td>ROHINI</td>

<td>4000</td>

</tr>

<tr>

<td>SUMIT</td>

<td>PALAM</td>

<td>5000</td>

</tr>

</table>

<html>

<body>

4. TABLE WITH COLSPAN & ROWSPAN

NORTH SOUTH
YEAR
SALES PURCHASE SALES PURCHASE

2001 200 100 600 500

2002 300 200 700 600

2003 400 300 800 700

<html>
<body>

<table border="2" bordercolor="BLUE">

<tr>

<td rowspan="2">YEAR</td>

<td colspan="2" align="center">NORTH</td>

<td colspan="2" align="center">SOUTH</td>

</tr>

<tr>

<td>SALES</td>

<td>PURCHASE</td>

<td>SALES</td>

<td>PURCHASE</td>

</tr>

<tr>

<td>2001</td>

<td>200</td>

<td>100</td>

<td>600</td>

<td>500</td>

</tr>

<tr>

<td>2002</td>

<td>300</td>

<td>200</td>

<td>700</td>

<td>600</td>

</tr>

<tr>

<td>2003</td>
<td>400</td>

<td>300</td>

<td>800</td>

<td>700</td>

</tr>

</table>

</html>

</body>

6. TABLE WITH CELL PADDING & CELL SPACING

YEAR SALES PURCHASE SALES PURCHASE

2001 200 100 600 500

2002 300 200 700 600

2003 400 300 800 700

<html>

<body>

<table border="2" bordercolor="#0000FF" cellspacing="10" cellpadding="5">

<tr>

<td>YEAR</td>

<td>SALES</td>

<td>PURCHASE</td>

<td>SALES</td>
<td>PURCHASE</td>

</tr>

<tr>

<td>2001</td>

<td>200</td>

<td>100</td>

<td>600</td>

<td>500</td>

</tr>

<tr>

<td>2002</td>

<td>300</td>

<td>200</td>

<td>700</td>

<td>600</td>

</tr>

<tr>

<td>2003</td>

<td>400</td>

<td>300</td>

<td>800</td>

<td>700</td>

</tr>

</table>

</html>

</body>

7. ADMISSION FORM
ADMISSION FORM

STUDENT NAME

FATHER NAME

MOBILE

ADDRESS

GENDER MALE FEMALE

HOBBIES CRICKET FOOTBALL HOCKEY

BBA
COURSE

Submit Reset

<html>

<title>FORM</title>

<Body>

<p align="center"><u><b>ADMISSION FORM</b></u>

<form method="POST">

STUDENT NAME <input type="text" name="sname" size="20">

FATHER NAME <input type="text" name="fname" size="20">

MOBILE <input type="text" name="phone" size="20">

ADDRESS <textarea rows="2" name="address" cols="20"></textarea>

GENDER <input type="radio" value="male" checked name="gender">MALE


<input type="radio" name="gender" value="female">FEMALE

HOBBIES <input type="checkbox" name="hobbies" value="cricket">CRICKET

<input type="checkbox" name="hobbies" value="football">FOOTBALL

<input type="checkbox" name="hobbies" value="hockey">HOCKEY

COURSE <select size="1" name="COURSE">

<option>BBA</option>

<option>BCA</option>

<option>MBA</option>

<option>MCA</option>

</select>

&nbsp;

&nbsp;

<input type="submit" value="Submit"


name="Button1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset" value="Reset" name="Button2">

</form>

</body>

</html>

8. HYPERLINK

ORDERED LIST

UNORDERED LIST

MIXED LIST

SIMPLE TABLE

ROWSPAN COLSPAN TABLE

<html>

<body>
<a href="ORDERED LIST.htm">ORDERED LIST</a>

<a href="UNORDERED LIST.htm">UNORDERED LIST</a>

<a href="MIXED LIST.htm">MIXED LIST</a>

<a href="SIMPLE TABLE.htm">SIMPLE TABLE</a>

<a href="COLSPAN AND ROWSPAN.htm">ROWSPAN COLSPAN TABLE</a>

&nbsp;

</body>

</html>

9. FRAMES

<html>

<head>

<title>FRAMES</title>

</head>

<frameset rows="30%,70%">

<frame name="TOP" src="TOP.HTML" SCROLLING="YES" target="contents">


<frameset cols="40%,60%">

<frame name="LINK" target="CONTENT" src="LINK.HTML">

<frame name="CONTENT" SCROLLING="YES" SRC="CONTENT.HTML">

</frameset>

</frameset>

</html>

10. IMAGE MAPS

<html>

<body>

<map name="Mymap">

<area href="TimeManagement.ppt" shape="rect" coords="30, 62, 135, 130">

<area href="Absent.xlsx" shape="circle" coords="103, 235, 56">

<area href="Index.docx" shape="polygon" coords="312, 200, 441, 327, 527, 189,


490, 99, 459, 201">

</map>

<img border="0" src="TULIPS.JPG" usemap="#Mymap" width="555" height="414">


</body>

</html>

Hotspots / Shapaes used in IMAGEMAP are: Circle, Rectangle, Polygon

11. CSS (Cascade Style Sheet)

Style1.css

a:link

color: rgb(51,153,255);

a:visited

color: rgb(51,102,204);

a:active

color: rgb(255,153,0);

table

table-border-color-light: rgb(255,204,102);

table-border-color-dark: rgb(204,153,102);

body

{
font-family: Verdana, Arial, Helvetica;

background-color: rgb(255,255,204);

color: rgb(102,102,51);

h1

font-family: Times New Roman, Times;

color: rgb(153,153,51);

h2

font-family: Times New Roman, Times;

color: rgb(204,153,0);

h3

font-family: Times New Roman, Times;

color: rgb(0,102,153);

h4

font-family: Times New Roman, Times;

color: rgb(153,153,0);

h5

font-family: Times New Roman, Times;

color: rgb(255,153,0);

}
h6

font-family: Times New Roman, Times;

color: rgb(51,102,204);

To Link the above file in any web page:

CSS files can be associated with HTML documents using the following syntax:

<link rel="stylesheet" href="http://example.com/css/style.css" type="text/css" />

<html>

<body>

<hr color="#0000FF" size="5">


<p>

<marquee scrollamount="20" behavior="slide" direction="right">THIS IS MOVING

TEXT</marquee>

</p>

<p><img border="5" src="file:///E:/TULIPS.JPG" width="187" height="167"></p>

</body>

</html>

username:

password:

username:<br>

<input type="text" size="25" maxlength="256" name="Username"> <br>

password:<br>

<input type="password" size="25" maxlength="256" name="Password">

HTML: Elements, Tags and Basic Structure


HTML stands for Hypertext Markup Language and is the basic structural element that is
used to create WebPages. HTML is a markup language, which means that it is used to
“mark up” the content within a document, in this case a webpage, with structural and
semantic information that tells a browser how to display a page. When an HTML
document is loaded by a web browser, the browser uses the HTML tags that have marked
up the document to render the page’s content.
There are three types of code that make up a basic website page. HTML governs the
structural elements, CSS styles those elements, and JavaScript enables dynamic
interaction between those elements.
HTML structure + CSS style + JS interaction = web page
Elements and Tags
HTML elements and tags work together to mark up content. HTML elements indicate the
purpose of a tag and tags indicate the beginning and the end of an element.
For example, here is a simple paragraph in HTML:
<p>This is a paragraph.</p>
The letter “p” represents the paragraph element. In this example, <p> is an opening tag
that tells the browser that the content that follows it is a paragraph. The slash in the
second tag, </p>, indicates that it is a closing tag that tells the browser that the paragraph
element is ending and that any content that appears after it is not part of the paragraph.
You may encounter serious display issues if you don’t remember to “close” each tag
because the browser will interpret this pattern as meaning that the element identified by
the opening tag should continue for the rest of the page.

Basic HTML Page Structure


A basic HTML page is a document that typically has the file extension .html, though
HTML frequently appears in the content of other file types as well. All HTML
documents follow the same basic structure so that the browser that renders the file knows
what to do. The basic structure on which all webpages are built looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Homepage Headline</h1>
<p>This is a paragraph.</p>
</body>
</html>
When this code is rendered by a browser, it will look like this:

Doctype
The first line of code, <!DOCTYPE html>, is called a doctype declaration and tells the
browser which version of HTML the page is written in. In this case, we’re using the
doctype that corresponds to HTML5, the most up-to-date version of the HTML language.
There are a number of different doctype declarations that correspond to various versions
of HTML.
HTML Root Element
Next, the <html> element wraps around all of the other code and content in our
document. This element, known as the HTML root element, always contains
one <head> element and one <body>element.
Head Element
The HTML head element is a container that can include a number of HTML elements
that are not visible parts of the page rendered by the browser. These elements are either
metadata that describe information about the page or are helping pull in external
resources like CSS stylesheets or JavaScript files.
The <title> element is the only element that is required to be contained within
the <head> tags. The content within this element is displayed as the page title in the tab
of the browser and is also what search engines use to identify the title of a page.
All of the HTML elements that can be used inside the <head> element are:
 <base>
 <link>
 <meta>
 <noscript>
 <script>
 <style>
 <title>(required)
Body Element
There can only be one <body> element in an HTML document because this element is
the container that holds the content of the document. All of the content that you see
rendered in the browser is contained within this element. In the example above, the
content of the page is a headline and simple paragraph.
Nesting
You might have noticed that I keep referring to HTML elements as “containers.” This is
because proper “nesting” is a key part of writing HTML that will work across all
browsers, will render all content, will be readable by screen readers, and will be able to
be targeted by CSS and JavaScript. In terms of HTML, nesting means exactly what you’d
think it might mean: each element goes inside another element, just like nesting dolls are
physically “nested” within each other.
For example, the basic page structure we outlined above is valid HTML because each
element’s opening tag has a closing tag and fully contain any other elements within it.
I’ve used HTML comments to label the example we’ve been using to show which tags
are opening tags and which tags are closing tags, so you can see how each element is
nested. In HTML, any content that is in between <!– and –> is a comment that will not be
rendered by the browser.
<!DOCTYPE html> <!– doctype declaration –>
<html> <!– opening HTML tag –>
<head> <!– opening head tag –>
<title>Page Title</title> <!– title tag –>
</head> <!– closing head tag –>
<body> <!– opening body tag –>
<h1>Homepage Headline</h1> <!– h1 headline –>
<p>This is a paragraph.</p> <!– paragraph –>
</body> <!– closing body tag –>
</html> <!– closing HTML tag –>
Keep in mind that indentation is used by developers to help make sure that their HTML is
nested properly and to ensure that all opening tags have a corresponding closing tag. Just
like HTML comments, the browser will not display indentations in the code, these
formatting patterns are there solely to help improve the readability of code.
The following version of the sample code is not nested correctly. Take a moment to look
and find the nesting errors here.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<body>
</head>
<h1><p>Homepage Headline</h1>
This is a paragraph.</p>
</body>
</html>
There are two nesting errors in the previous example:
1. The opening <body> tag is contained within the opening and closing <head> tags.
2. The opening <p> tag in the <body> content is contained within the opening and closing
<h1> tags.
This code actually will render in some browsers, but just because something renders
doesn’t mean that the code is syntactically correct.
Basic and Advanced Text Formatting
HTML BASIC TEXT FORMATTING
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
 <b> – Bold text
 <strong> – Important text
 <i> – Italic text
 <em> – Emphasized text
 <mark> – Marked text
 <small> – Small text
 <del> – Deleted text
 <ins> – Inserted text
 <sub> – Subscript text
 <sup> – Superscript text
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance.
Example :- <b>This text is bold</b>
HTML <i> and <em> Elements
The HTML <i> element defines italic text, without any extra importance.
Example :- <i>This text is italic</i>
HTML <small> Element
The HTML <small> element defines smaller text
Example :- <h2>HTML <small>Small</small> Formatting</h2>
HTML <mark> Element
The HTML <mark> element defines marked or highlighted text:
Example :- <h2>HTML <mark>Marked</mark> Formatting</h2>
HTML <del> Element
The HTML <del> element defines deleted (removed) text.
Example :- <p>My favorite color is <del>blue</del> red.</p>
HTML <ins> Element
The HTML <ins> element defines inserted (added) text.
Example :- <p>My favorite <ins>color</ins> is red.</p>
HTML <sub> Element
The HTML <sub> element defines subscripted text.
Example :- <p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element
The HTML <sup> element defines superscripted text.
Example :- <p>This is <sup>superscripted</sup> text.</p>
BASIC AND ADVANCED TEXT FORMATTING
1. Preformatted text
To force the editor to preserve your indents and spacing, try using the we use
the <pre> tag.
2. Extra line breaks
The Visual editor leaves one blank line between each paragraph by default. If you
attempt to add additional line breaks using the “enter” or “return” key, those spaces will
be stripped out when you publish.
To force the editor to keep those spaces, you can add the following code in the HTML
editor:
&nbsp;
You’d want to add that as many times as you want blank lines, so if you want three blank
lines between two paragraphs, you’d add the following in your HTML editor:
&nbsp;
&nbsp;
&nbsp;
This is HTML for a non-breaking space. But a word of warning! If, after adding those
spaces, you click back to the Visual editor before publishing or updating your post, those
spaces will be stripped out again.
If you have trouble getting those spaces to stay, you can also use a bit of inline CSS to
add extra line breaks.
To do this, wrap your paragraph in the following code:
<p style=”padding-top:14px;”>Your paragraph of text here.</p>
This tells the editor to leave 14 pixels of space above your paragraph. You can increase
the number for more space or decrease it for less. You can also use “padding-bottom”
rather than “padding-top” to add extra space below a paragraph instead of above it.
This looks a bit more complicated than the non-breaking space code discussed above, but
it gives you more flexibility and control.
4. Tables
Copying and pasting tables from other applications (such as Microsoft Word) into your
post or page doesn’t work. However, you can create simple HTML tables right in the
HTML editor.
To do this, try some HTML similar to the following:
<table><tr><td>Number of tables</td><td>1</td><td>2</td></tr></table>
Multimedia Components in HTML Documents
HTML has introduced two new multimedia tags, AUDIO and VIDEO, for displaying
the audio and video streams on a Web page.
You can play the multimedia files, which are stored in your local computer, on the Web
page by specifying their location. The src attribute is used to specify the multimedia file
to play it on the Web page.
If the Web browser does not support AUDIO and VIDEO tags, then the text defined
between the starting and the closing tags of these tags are displayed on the Web page.
Modern Media on the Web: HTML5 <audio> & <video>
With the release of HTML5, the need for browser plugins for audio and video content
began to go away. HTML5 introduced two new elements that include playback
functionality for supported media formats. These two new elements are audio and video.
In this tutorial we’ll cover how to use the new tags, the media formats supported by these
tags, and how to use the iframe element to embed media files hosted on an external
website.
HTML5 <audio>
The audio element can be used to add audio content to a web page. Files embedded in
this way are played by the audio playback engine built into all HTML5 compliant
browsers. The syntax can be very simple, or it can be made more complex by adding in
multiple file formats as well as fallback options for unsupported browsers.
At a minimum, to use the audio element the following attributes must be used:
 src defines the URL where the audio content is hosted.
 type defines the file format.
 controls must be specified or no visual element will appear to control playback of the
content.
A closing audio tag must be used, and additional content may optionally be nested
between the opening and closing tags. In the code below, the text between the tags would
appear in the event that the browser viewing the web page did not support the audio
element.
There are several other attributes that may be optionally added to the audio element
including:
 autoplay: If this attribute is used, the audio will begin to play as soon as enough has been
downloaded to begin playback.
 loop: When this attribute is present the audio file will automatically start over once it has
played through.
 muted: If you want audio content to be muted when initially loaded, use this attribute.
 preload: This element can be used with the value none, metadata, or auto to tell the
browser how much of the audio file to preload. Note that if autoplay is applied to an
audio element it will override the preload attribute.
HTML5 <video>
The video element follows the same basic syntax as the audio element. In it’s most basic
form, all we need to do is use the src element to identify the video URL and add the
controls attribute so that our website visitors can control video playback. We’re also
going to use the width and height attributes to set the size of the video player, but this is
optional.
There are several additional attributes which can be used to influence how video content
is loaded and appears in the browser. These attributes include:
 autoplay : If this attribute is used, the video will begin to play as soon as enough of the
video has been downloaded to begin playback.
 loop : When this attribute is present the video will automatically start over once it has
finished playing.
 muted : If you want the audio content of the video to be muted use this attribute.
 preload : This element can be used with the value none, metadata, or auto to tell the
browser how much of the video file to preload. Note that if autoplay is applied to a video
element it will override the preload attribute.
 poster : Use this attribute to select an image to display as the poster for the video until
playback begins.
Supported File Formats
A variety of different video and audio file formats can be used along with these HTML5
elements. However, support for different formats varies from one browser to the next.
Selecting File Formats for Audio Files
There are four audio formats with broad browser support. While support for other formats
is available on a more limited basis, these four formats are the ones commonly used for
delivering audio content to the web browser.
 Wav files are very high quality but also very large.
 The MP3 format is much smaller than Wav, but it is a proprietary format and quality
issues become apparent at low bitrates.
 AAC format is similar to the MP3 in that it is a proprietary format. It performs better at
bitrates above 100kbps.
 Ogg is an open-source standard, making it popular with developers, and sound quality is
much better at low bitrates than MP3.
Selecting File Formats for Video Files
There are two leading video file formats which can be used with the video element and
are supported by most web browsers:
 WebM is a newer open-source format developed by Google.
 MP4 higher quality and broader browser support than WebM.
Using <track> to Add Subtitles
The track element can be added as a child to any audio or video element to link a timed
text file to the media content. The file linked with the track element must be formatted in
WebVTT format. Quite often more than one track file is added to a video or audio
element to provide captions or subtitles in multiple languages.
The kind attribute is used to specify what type of data is contained in the attached file.
Values that can be applied to the kind attribute include subtitles, captions, descriptions,
chapters, and metadata.
Other attributes that may be used with the track element include:
 label: Used to add a label to help users identify the track best suited to meet their needs.
 src: Identifies the URL of the track file.
 srclang: This attribute is required if the kind attribute is set to subtitles and identifies the
language of the subtitles contained in the associated track file.
Designing of Web page: Document layout, List, Tables, Hyperlink, Working with
Frames, Forms and Control
Image Formats:

JPEG

JPEG is short for Joint Photographic Experts Group, and is the most popular among the image
formats used on the web. JPEG files are very ‘lossy’, meaning so much information is lost from
the original image when you save it in a JPEG file.

This is because JPEG discards most of the information to keep the image file size small; which
means some degree of quality is also lost.

Almost every digital camera can shoot and save in the JPEG format. JPEG is very web friendly
because the file is smaller, which means it takes up less room, and requires less time to transfer to
a site.

Pros of JPEG:
 24-bit color, with up to 16 million colors
 Rich colors, great for photographs that need fine attention to color detail
 Most used and most widely accepted image format
 Compatible in most OS (Mac, PC, Linux)
Cons of JPEG:
 They tend to discard a lot of data
 After compression, JPEG tends to create artifacts
 Cannot be animated
 Does not support transparency

GIF

GIF, short for Graphics Interchange Format, is limited to the 8 bit palette with only 256 colors.
GIF is still a popular image format on the internet because image size is relatively small
compared to other image compression types.

GIF compresses images in two ways: first, by reducing the number of colors in rich color images,
thus reducing the number of bits per pixel. Second, GIF replaces multiple occurring patterns
(large patterns) into one. So instead of storing five kinds of blue, it stores only one blue.

GIF is most suitable for graphics, diagrams, cartoons and logos with relatively few colors. GIF is
still the chosen format for animation effects.

Pros of GIF:
 Can support transparency
 Can do small animation effects
 ‘Lossless’ quality–they contain the same amount of quality as the original, except of
course it now only has 256 colors
 Great for images with limited colors, or with flat regions of color
Cons of GIF:
 Only supports 256 colors
 It’s the oldest format in the web, having existed since 1989. It hasn’t been updated since,
and sometimes, the file size is larger than PNG.

BMP

The Windows Bitmap or BMP files are image files within the Microsoft Windows operating
system. In fact, it was at one point one of the few image formats.

These files are large and uncompressed, but the images are rich in color, high in quality, simple
and compatible in all Windows OS and programs. BMP files are also called raster or paint
images.

BMP files are made of millions and millions of dots called ‘pixels,’ with different colors and
arrangements to come up with an image or pattern.

It might be an 8-bit, 16-bit or 24-bit image. Thus when you make a BMP image larger or smaller,
you are making the individual pixels larger, and thus making the shapes look fuzzy and jagged.

BMP files are not great and not very popular. Being oversized, bitmap files are not what you call
‘web friendly’, nor are they compatible in all platforms and they do not scale well.

Pros of BMP:
 Works well with most Windows programs and OS, you can use it as a Windows wallpaper
Cons of BMP:
 Does not scale or compress well
 Again, very huge image files making it not web friendly
 No real advantage over other image formats

TIFF

TIFF was created by Aldus for ‘desktop publishing’, and by 2009 it was transferred to the control
of Adobe Systems. TIFF is popular among common users, but has gained recognition in the
graphic design, publishing and photography industry. It is also popular among Apple users.

The TIFF image format is easy to use with software that deals with page layout, publishing and
photo manipulation via fax, scanning, word processing, etc. TIFF is very flexible, it can be lossy
or lossless. TIFF is a rich format and supported by many imaging programs.

It is capable of recording halftone image data with different pixel intensities, thus is the perfect
format for graphic storage, processing and printing. This makes TIFF the superior raster image
format.

Pros of TIFF:
 Very flexible format, it supports several types of compression like JPEG, LZW, ZIP or no
compression at all.
 High quality image format, all color and data information are stored
 TIFF format can now be saved with layers
Cons of TIFF:
 Very large file size–long transfer time, huge disk space consumption, and slow loading
time.

PNG

PNG or (Portable Network Graphics) is a recently introduced format, so not everyone is familiar
with it. But PNG has been approved as a standard since 1996. It is an image format specifically
designed for the web. PNG is, in all aspects, the superior version of the GIF.

Just like the GIF format, the PNG is saved with 256 colors maximum but it saves the color
information more efficiently. It also supports an 8 bit transparency.

PNG was actually created for the intent to replace the GIF as an image format that doesn’t require
a patent license. PNG can support 24 bit RGB color images, grayscale images, both with and
without alpha channels. RGB cannot support CMYK color spaces, and is not designed for print
graphics.

Pros of PNG:
 Lossless, so it does not lose quality and detail after image compression
 In a lot ways better then GIF. To start, PNG often creates smaller file sizes than GIF
 Supports transparency better than GIF
Cons of PNG:
 Not good for large images because they tend to generate a very large file, sometimes
creating larger files than JPEG.
 Unlike GIF however, it cannot be animated.
 Not all web browsers can support PNG.

List of Top 5 Most Popular Search Engines In the World

1. Google

No need for further introductions. The search engine giant holds the first place in search with a
stunning difference of 43% from second in place Bing.

According to the latest comscore report (February 2016) 64.0% of searches were powered by
Google and 21.4% by Bing.

Google is also dominating the mobile/tablet search engine market share with 89%!
2. Bing

Bing is Microsoft’s attempt to challenge Google in the area of search but despite their efforts they
still did not manage to convince users that their search engine can produce better results than
Google.

3. Yahoo

Since October 2011 Yahoo search is powered by Bing. Yahoo is still the most popular email
provider and according to reports holds the third place in search.

4. Ask.com

Formerly known as Ask Jeeves, Ask.com receives approximately 3% of the search share. ASK is
based on a question/answer format where most questions are answered by other users or are in the
form of polls.

It also has the general search functionality but the results returned lack quality compared to
Google or even Bing and Yahoo.

5. AOL.com

According to netmarketshare the old time famous AOL is still in the top 10 search engines with a
market share that is close to 0.6%. The AOL network includes many popular web sites like
engadget.com, techchrunch.com and the huffingtonpost.com.

E x a mp l e s o f W e b B r o w s e r s

Microsoft Internet Explorer

As the default browser provided with Windows, IE is the browser most users encounter first.
Although it's no longer the clear market leader -- 2014 statistics put it a second behind Chrome,
both in the U.S. and worldwide -- its widespread usage on the desktop means it's still a
heavyweight. Although rivals Chrome and Firefox have trumpeted their superior performance for
years, IE is now on par with its rivals. IE is tightly integrated with Windows, so you can drag a
favorite site right to your Windows taskbar and launch it like a program. However, as of June
2014 it didn't share its competitors' ability to sync favorites and bookmarks between computers.
Google Chrome

Chrome's combined position on the desktop and in mobile devices makes it the top browser
worldwide. Its calling cards have always been speed and security, and it consistently delivers on
both. Its tight integration with other Google services such as Gmail and its iconic search engine
are both a positive and a negative. On the upside, your personalizations can be synced across
every device you use; but privacy-minded gadget lovers worry that this tight integration gives
Google an uncomfortably close intimacy with their personal lives.

Mozilla Firefox

Unlike the other three leading browsers, Firefox is the product of an open-source, community-
based development process. These are the people who originally created the Web browser, and
their offering remains a superior product. Firefox boasts a stellar "ecosystem" of add-ons and
extensions, making it the most customizable of the major browsers. Its performance remains on
par with its peers, and its memory usage -- a longtime sore point, as security issues were with IE -
- has been corrected in versions 27 and onward. Firefox held 8.7 percent marketshare in the US in
early 2014, according to figures from Adobe.

Apple Safari

Apple's Safari browser is limited in its marketshare by the fact that it's sold only for the Apple
platform. This makes it the leading player in the mobile market, where iPhones and iPads
dominate, but an also-ran on the desktop where Macs are a niche player. Safari is a fast and
secure browser, comparable in performance and interface to the other leading competitors. Its
appearance is especially sleek and stylish, in keeping with Apple's design-centric ethos. Apple's
mobile dominance made Safari the number-three browser in the U.S. as of early 2014, with 25
percent market share.
WEB SERVER

What are is a “web server”? The term can refer to the hardware (the computer) or the software
that runs the World Wide Web. This page has a list of the most popular web server
software available in the market today.
And what does a web server software do? Well, in simple terms, it serves web pages. Each time
you open a web page, the browser program on your computer locates the server and then makes a
request. The web server sends the page back to your browser along with images and other
multimedia content it may have. FYI, your browser is known as the “client”.
Apache web server – the HTTP web server

Free and the most popular web server in the world developed by the Apache
Software Foundation. Apache web server is an open source software and can be installed and
made to work on almost all operating systems including Linux, Unix, Windows, FreeBSD, Mac
OS X and more. About 60% of the web server machines run the Apache web server.

Apache Tomcat

The Apache Tomcat has been developed to support servlets and JSP scripts.
Though it can serve as a standalone server, Tomcat is generally used along with the popular
Apache HTTP web server or any other web server. Apache Tomcat is free and open source and
can run on different operating systems like Linux, Unix, Windows, Mac OS X, Free BSD.
Microsoft’s Internet Information Services (IIS) Windows Server

IIS Windows Web Server has been developed by the software giant, Microsoft. It
offers higher levels of performance and security than its predecessors. It also comes with a good
support from the company and is the second most popular server on the web.
CGI programming

 CGI  Common Gateway Interface


 A protocol for interfacing local applications with a web server
 Sequence of steps
 Client sends URL request
 Program runs at the server side
 Output is collected and sent back to the client
 Often the output is an HTML “built” by the server

 CGI programs can be written in any language supported by the server.


 This includes compiled programming languages, such as C and C++; interpreted
languages, such as Perl, Python, Ruby, and languages, such as Java, that lie somewhere
in between.

Links with anchor text


Two sides of a hyperlink

 Anchor text
The highlighted text in the current document

 Hyperlink reference
The URL address

 Usage
<a href=“url”>anchor text</a>

e.g.,Click<a href=http://www.microsoft.com> here</a>

displays as: Click here

Links and URLs

 The link target, or href (hypertext reference) is in the form of a URL: Uniform Resource
Locator.
 A URL has 3 components, not all of which need to be supplied in every reference:
 A protocol
 An Internet address (either name or IP number)
 A file path

Example:

http://infographics.uoregon.edu/campusMaps/nightmap.pdf

URL address
 The Internet address portion of a URL can be either a name, e.g. www.uoregon.edu, or
an IP address, e.g. 128.223.142.125
 If omitted, the address of a URL reference within an HTML page is assumed to be the
same as the address for the document containing the link.
 Thus if the address is omitted from a link in a web page, the link refers to a
document on the same server that served that page.
 A URL without an address portion can be either absolute or relative, as explained next.

 The file path portion of a URL optionally specifies the chain of directories (folders) in
which the document is located, and the name of the file itself. The directory names in
the chain are separated by slash characters.
 If the file name portion of the path is omitted, then it defaults to a value that is defined
by the server, typically index.html.

 Example: the URL


 http://www.myplace.com/shopping/fruit/
 includes no filename, so a (typical) webserver inserts the default name:
 http://www.myplace.com/shopping/fruit/index.html

Relative vs Absolute links

 If a URL omits the Internet address portion, then the file path portion can be either
relative or absolute.
 Relative provides path directions to the browser relative to the folder where the
browser is currently looking (i.e., relative to the current folder)
 Absolute provides path directions to the browser starting from the absolute top
of the folder hierarchy
 How do you signal that you want your directions to be interpreted as the absolute or
relative type?
 If the directions are absolute, then start the directions with a slash /
 If relative, do not start with slash
 When starting with the slash / the browser will go to whatever folder is configured in
the webserver as the absolute top folder
 Sometimes that folder is set as public_html folder, but not always
 In the example, the server was configured such that the folder named home
was the highest folder
 So, the starting slash / took the browser into the home folder
It is standard to not type public_html within links, because it is by default the (only)
web-accessible folder, so the web-server automatically directs the browser to that
folder

What are Search Engines?

• Designed to assist you in searching through the enormous amount of information on the
Web
• No single search tool has everything
• Each engine is a large database which utilizes different search techniques and tools
(spiders or robots) to build indexes to the Internet (some also utilize submissions and
administration)
• Yahoo
• Altavista
• Excite
• Google
• NorthernLights
• Hotbot
• Infoseek

Web browsers
• Software programs that access web’s rich content
• www portion of the Internet
• hyperlinked documents written in XHTML and rich media
• Popular web browsers
• Microsoft’s Internet Explorer
• Mozilla’s Firefox
• Apple’s Safari
• Opera Software’s Opera
• Google Chrome

File Transfer Protocol (FTP)


• Set of rules by which computers transfer data over the Internet
• URL begins with ftp:// rather than http
• Accessed either with the web browser or software that supports FTP
• Filezilla (http://filezilla.sourceforge.net)
• FF2 FireFTP (http://fireftp.mozdev.org)
• FTP site can be browsed as though they were files on the local computer
• Files can be downloaded
• FTP site may require login
• FTP can also be used on the Internet for
• Uploading files
• Downloading files
• File-managing tasks
ISP – Internet Service Provider
• An ISP is a company that provides the connections and support to access the Internet.
• It can also provide additional services such as Email and web hosting.
• ISPs are essential to gaining access to the Internet
• ISPs range in size from small to very large and differ in terms of the area they service.
• ISPs also differ in the types of connection technologies and speeds they offer
PoP
• A POP is the connection point between the ISP's network and the particular
geographical region that the POP is servicing.
• An ISP may have many POPs depending on its size and the area it services
• The Internet is made up of very high-speed data links that interconnect ISP POPs and
ISPs to each other.
• These interconnections are part of the very large, high capacity network known as the
Internet Backbone.

SMTP

Simple Mail Transfer Protocol (SMTP) is the standard protocol for email services on a
TCP/IP network. SMTP provides the ability to send and receive email messages.

SMTP is an application-layer protocol that enables the transmission and delivery of


email over the Internet. SMTP is created and maintained by the Internet Engineering
Task Force (IETF).

SMTP is one of the most common and popular protocols for email communication over
the Internet and it provides intermediary network services between the remote email
provider or organizational email server and the local user accessing it.

SMTP is generally integrated within an email client application and is composed of four
key components:
1. Local user or client-end utility known as the mail user agent (MUA)
2. Server known as mail submission agent (MSA)
3. Mail transfer agent (MTA)
4. Mail delivery agent (MDA)

SMTP works by initiating a session between the user and server, whereas MTA and
MDA provide domain searching and local delivery services.

A Client/Server Model

• A server (Web server or Web site) is any computer that stores documents and furnishes
them upon request
• A client is any computer that requests services (requests and then displays documents )
• Every client must be able to display every document from every server and does so
through a browser (e.g., Netscape or Internet Explorer)

IIS – Internet Information Server

IIS 5.0 IIS 6.0 Apache Web server


Company Microsoft Microsoft Apache Software
Corporation Corporation Foundation
Version 5.0 6.0 2.0.47
Released 2/17/00 3/28/03 7/10/03
Platforms Windows 2000, Windows Server Windows
Windows XP 2003 NT/2000/XP, Mac OS
X, Linux and other
UNIX-based
platforms,
experimentally
supports Windows
95/98
Brief The most The newest release Currently the most
description popular Web of IIS from popular Web server.
server for Microsoft.
Windows 2000.
Price Included with Included with Freeware.
Windows 2000 Windows Server
and Windows 2003
XP.
Domain Name System (DNS)

• To access a website, you must enter the address of the web server in your browser.
• The IP address (the dotted quad) is one way to identify the server; however, most users
prefer to use domain names because they are easier to remember.
• The Domain Name System (DNS) translates IP addresses into easily recognizable names.
• Examples: IP address: 72.64.56.86

Domain name: www.microsoft.com

• Each domain name is unique. It consists of letters and numbers separated by dots and
includes two or more words (labels).
• The last label in a domain name is usually a two- or three-letter code called a top-level
domain.
• Example: www.microsoft.com

Server (Host) Name Registered Company Domain Category

Domain Name (Top-Level Domain)

• A domain name, read left to right, specifies general divisions, then specific companies,
and individual computers (web servers or e-mail servers)
com = a commercial site

microsoft = the name registered by the company

www = the name of the web server at the company, also called the web site host

• A fully qualified domain name (FQDN) is the complete domain name of an Internet
computer. It provides enough information to covert the domain name to an IP address.
• Top-Level Domains
.com = commercial or company sites

.edu = educational institutions

.gov = U. S. civilian government

.mil = U. S. military

.org = organizations
.net = network sites, including commercial ISPs

.int = international organizations

• Two-Letter Country Codes – categorize domains by country or region. For example: us


= United States
au = Australia

Uniform Resource Locators (URL)

• A URL is a text string that supplies an internet or intranet address and the method by
which the address can be accessed.
• URLs start with the http:// prefix which identifies them as web pages using the
Hypertext Transfer Protocol.
• For example, if you enter the following web address:

http://www.microsoft.com

The URL will access a web page because it begins with http. It then contacts the web server and
domain named www.icann.org. It will locate a file on the server.


Top-level domains include “edu,” “gov,” and “org,” but “com” is most common

Examples:
 www.microsoft.com
 www.nba.com
 www.whitehouse.gov
www.miami.edu

Cookies

• Cookies are small text files placed on a website visitor’s computer so website
managers can customize their site to a visitor’s preferences. They also gain information
about visitors that could be used for marketing needs.
• Unless you register with a site, cookies do not have access to any personal information
about you.
• The text is entered into the memory of the browser. The browser in turn stores the
cookie information on the hard drive so when the browser is closed and reopened at a
later date the cookie information is still available.

Web sites use cookies for several different reasons:


• To monitor advertisements. Web sites will often use cookies to keep track of what ads it
lets you see and how often you see ads.
• To collect demographic information about who is visiting the Web site. Sites often use
this information to track how often visitors come to the site and how long they remain
on the site.
• To personalize the user's experience on the Web site. Cookies can help store personal
information about you so that when you return to the site you have a more
personalized experience.

• Cookies do not act maliciously on computer systems. They are merely text files that can
be deleted at any time - they are not plug ins nor are they programs.
• Cookies cannot be used to spread viruses and they cannot access your hard drive. This
does not mean that cookies are not relevant to a user's privacy and anonymity on the
Internet.
• Cookies cannot read your hard drive to find out information about you; however, any
personal information that you give to a Web site, including credit card information, will
most likely be stored in a cookie unless you have turned off the cookie feature in your
browser. In only this way are cookies a threat to privacy.
• The cookie will only contain information that you freely provide to a Web site.

META TAG

Meta Document Information

 “meta” - information about


 Meta document - information about the document
 Meta data – information about the data

Meta tags

<META NAME="name" HTTP-EQUIV="FieldName" CONTENT="value" >


MetaTags

<META HTTP-EQUIV="Refresh" CONTENT="2;URL=http:nextdoc.html">

- in 2 sec. redirect browser to nextdoc.html.

<META NAME="keywords" CONTENT="Web, HTML, tags">

- Set keywords for the document, used by search engines to index your document

CGI – Common Gateway Interface

 An html web page is static (unchanging)


 Text document sent from server to browser
 CGI program creates dynamic information
 Program is executed upon demand
 Generates fresh content for each request
CGI Overview

 Developer creates an HTML page with a <FORM> on it


 Specifies the name of the program
 Names some variables that can hold data
 User enters information into the Web page (fills in the variables in the <FORM> and
clicks <SUBMIT>
 Browser sends the information to the URL
 Server unpacks the HTTP message
 Finds the name of the program to call
 Finds the data
 Server calls the program and passes in the data
 Program generates output and writes it to “standard out” (the screen, usually)
 Server takes the output and passes it along to the browser
 Browser displays the output on the user’s screen
Web Server

 Web server: Responds to client requests by providing resources


 URI (Uniform Resource Identifier)
 Web server and client communicate with platform-independent Hypertext Transfer
Protocol (HTTP)

HTTP Request Types

 get :
 Get (retrieves) information from a server
 i.e: retrieve HTML document or image, fetch search results
 Sends information as part of URL
 www.search-engine.com/search?name=value
 post:
 Post (sends) data to a server
 i.e: authentication information, form data.
 Sends form data as an HTTP message, not as part of URL

What is Internet ?

 It is a Global network of computers,


(servers or clients).

to exchange information.

 It is a "network of networks" that includes millions of private and public, academic,


business, and government networks (local or Global),
linked by copper wires, wireless connections, and other technologies.

Hardware and Software of Internet

 Modem
Device that enables computers to communicate through phone lines.

When we start internet the our modem communicates to modem of ISP.


 Computer
In addition to a modem, you need a client capable of handling multiple data types.

 Software
Two types of software’s required to enable your PC as an Internet PC.

 Communication software to establish connection


 Client software for browsing, e-mail, news.
Applications Of Internet

 Download programs and files


 E-Mail
 Voice and Video Conferencing
 E-Commerce
 File Sharing
 Information browsing
 Search the web addresses for access through search engine
 Chatting and many more…

Disadvantages of Internet

 Theft of personal information such as name, address, credit card number etc.
 Virus threats nothing but a program which disrupts the normal functioning of your
system.
 Spamming refers to receiving unwanted e-mails in bulk, which provide no purpose and
needlessly obstruct the entire system.
 Pornography This is perhaps the biggest threat related to children’s healthy mental life.
A very serious issue concerning the Internet.
Though, internet can also create havoc, destruction and its misuse can be very fatal,

the advantages of it outweigh its disadvantages.

What is Intranet ?
 Internal company network that uses Internet standards (HTML, HTTP & TCP/IP
protocols) & software.
 Accessed only by authorized persons, especially members or employees of the
organization
Intranet Security
Two levels of Security required:

 Internal
It can be imposed by Public Key Security & Encryption Key.

 External
Through Firewall.

What is Firewall ?

 Security device located between firm’s internal network (intranet) & external network
(internet).
 Regulates access into & out of a company’s network based on a set of rules.
Note : needs to be upgraded from time to time to check latest potential security problems.

Applications of Intranet

 Sharing of company policies/rules & regulations


 Access employee database
 Distribution of circulars/Office Orders
 Access product & customer data
 Sharing of information of common interest
 Launching of personal/departmental home pages
 Submission of reports
 Corporate telephone directories

Disadvantages

Management problem

 A company may not have person to update their


 Fear of sharing information and the loss of control
 Limited bandwidth for the business
Security problem

 Unauthorized access
 Abuse of access
 Denial of service

Productivity problem

 Information overload lowers productivity


 True purpose of the Intranet is unknown to many employees/departments
 Hidden or unknown complexity and costs

What is Extranet ?
 Extranet is an Intranet for outside authorized users using same internet technology.
 Inter-organizational information system.
 enable outsiders to work together with company’s employees.
 open to selected suppliers, customers & other business partners

Examples..

 Dealers/distributors have access to product files such as :-


1. product specification,
2. pictures,
3. images, etc.
to answer the queries of the customer.

Components of extranets ..

Some basic infrastructure components such as the internet Including :-

 TCP/IP protocols,
 E-mail,
 Web-browsers,
 External business partners &
 Tele-commuting employees place order, check status & send E-mail.
Benefits of Extranet
 Improved quality.
 lower travel costs.
 lower administrative & other overhead costs.
 reduction in paperwork.
 delivery of accurate information on time.
 improved customer service.
 better communication.
 overall improvement in business
effectiveness.

Disadvantages
 The suppliers & customer who don’t
have technical knowledge feel problem.
 Faceless contact.
 Information can be misused by other competitors.
 Fraud may be possible.
 Technical Employees are required.

WHAT IS E-COMMERCE?

• E-commerce consists of the buying and selling of products or services over electronic
systems such as the Internet and other computer networks.
• Electronic commerce commonly known as e-commerce or eCommerce.

• Electronic commerce was identified as the facilitation of commercial transactions


electronically, using technology such as Electronic Data Interchange (EDI) and Electronic
Funds Transfer (EFT).
• What is EDI?
• What is EFT?
•
• EDI is the structured transmission of data between organizations by electronic means. It
is used to transfer electronic documents or business data from one computer system to
another computer system.

• EFT is the electronic exchange or transfer of money from one account to another.

Advantages of E-commerce
• Faster buying/selling procedure, as well as easy to find products.
• Buying/selling 24/7.
• Low operational costs and better quality of services.
• Easy to start and manage a business.
• No need of physical company set-ups.
• Customers can easily select products from different providers without moving around
physically.

Disadvantages of E-commerce

• There is no guarantee of product quality.


• There are many hackers who look for opportunities, and thus an ecommerce site,
service, payment gateways, all are always prone to attack.

Types of E-comerce

 B2B (Business-to-Business)
 B2C (Business-to-Consumer)
 C2B (Consumer-to-Business)
 C2C (Consumer-to-Consumer)

BUSINESS TO BUSINESS (B2B)

• B2B can be open to all interested parties or limited to specific, pre-qualified participants
(private electronic market).
• Companies doing business with each other such as manufacturers selling to distributors
and wholesalers selling to retailers.

BUSINESS TO CONSUMER
(B2C)

• Businesses selling to the general public typically through catalogs utilizing shopping cart
software.
• B2C is the indirect trade between the company and consumers.
• It provides direct selling through online.
• If you want to sell goods and services to customer so that anybody can purchase any
products directly from supplier’s website.
CONSUMER TO BUSINESS (C2B)

• A consumer posts his project with a set budget online and within hours companies
review the consumer's requirements and bid on the project.
• The consumer reviews the bids and selects the company that will complete the project.
• C2B empowers consumers around the world by providing the meeting ground and
platform for such transactions.

CONSUMER TO CONSUMER (C2C)

• It facilitates the online transaction of goods or services between two people.


• Though there is no visible intermediary involved but the parties cannot carry out the
transactions without the platform which is provided by the online market maker such as
eBay.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy