Lesson No. 1 Web Publishing
1. What do you mean by Frames. Explain
<frame>, <frameset> and <noframe> tags.
FRAMES are used to divide the browser window into several parts
through which we can see more than one web page at a time. Each HTML document
is called frame.
A frame is an individual, independently scrolling region of a web
page.
To create frames, tags used are: 1. <frameset> 2.
<frame>
<frameset> tag
·
It is a container tag for defining
frames.
·
It replaces the <body> tag in
frameset documents
·
It defines how to divide the window
into frames.
·
Each frameset defines a set of rows or
columns.
·
To divide screen horizontally we use
rows.
·
To divide screen vertically we use
cols.
The rows/cols values indicate the amount of screen area, each
row/column will occupy
Attributes of frameset tag
i) Rows : It divides the screen into horizontal frames.
ii) Cols : It divides the screen into vertical frames.
Values of area can be given in % or pixels or by relative value
using * (asterisk) symbol.
<frame> tag
It is used to create frame within frameset. It defines what HTML
document to put into the frame.
Attributes of <frame>
Name : assigns a name to the frame.
Src : specifies the html page you want to display.
Frameborder : specifies the border around frame. By default value
is 1. 0 value for no border.
Marginwidth : sets left an right margins.
Marginheight : sets top and bottom margins.
Noresize : This attribute prevents the user from resizing the frame.
Scrolling : specifies whether to display scrollbar. It can have
one of the three values : YES, NO, AUTO.
<noframes> tag
The <noframes> tag is a fallback tag for browsers that do
not support frames. It can contain all the HTML elements that you can find
inside the <body> element of a normal HTML page.
The <noframes> element can be used to link to a non:frameset
version of the web site or to display a message to users that frames are
required.
The <noframes> element goes inside the <frameset>
element.
2. Explain the <iframe> tag along with
its attributes.
An inline frame
is a frame that is displayed in a box within a web page. <iframe> tag is
used to create inline frame. The inline frame can display images or web pages
within it.
Attributes of <iframe>
Attributes of <iframe>
Attribute
|
Value
|
Description
|
src
|
URL
|
Specifies the
address of the document to embed in the <iframe>
|
align
|
Left / right /
top middle / bottom
|
Specifies the
alignment of an <iframe> according to surrounding elements
|
frameborder
|
1 / 0
|
Specifies
whether or not to display a border around an <iframe>
|
height
|
pixels
|
Specifies the
height of an <iframe>
|
longdesc
|
URL
|
Specifies a
page that contains a long description of the content of an <iframe>
|
marginheight
|
pixels
|
Specifies the
top and bottom margins of the content of an <iframe>
|
marginwidth
|
pixels
|
Specifies the
left and right margins of the content of an <iframe>
|
name
|
text
|
Specifies the
name of an <iframe>
|
scrolling
|
Yes /no auto
|
Specifies
whether or not to display scrollbars in an <iframe>
|
width
|
pixels
|
Specifies the
width of an <iframe>
|
3. Explain <img> tag along with its
attributes.
The <img> tag is used to insert image on a web page. The
various attributes of <img> tag are as follows:
Src – Specifies the location of the image.
Alt – provides alternate text for the image. If the image is not
loaded in the web page alternate text is displayed.
Height – Specifies the height of the image given in pixels or
percentage.
Width – specifies the width of the image given in pixels or percentage.
Border – Specifies the width of the border around an image.
Align – specifies the alignment of the image. The values are left,
center or right.
Hspace – Specifies the amount of white space to be left on left
and right side of an image.
Vspace – Specifies the amount of white space to be left on top and
bottom side of an image.
4. Explain Image Mapping. Explain its two
types.
IMAGE MAPPING
It is a single graphic image that consists of number of hyperlinks incorporated within an image. The specific areas mapped within an image are known as hotspots which are links to a resource.
Map contains the information of an image and the mapped areas of an image. These areas can be rectangles, circles or polygons defined in an image specified by coordinates in pixels of the image.
There are two ways to do image mapping
1) Client Side mapping : They are executed on client machine from web browser itself. All information is loaded along with the image. It executes quickly. In Client side mapping, the image map is mentioned by using USEMAP attribute in the <img> tag. The map is specified in the <map> and <area> tags, which defines the hotspot in an image. For specifying the areas of the hotspot, the <area> tag is used within <map> tag.
2) Server side mapping : In this the program that executes the links is placed on the server. The browser activates program on the server by sending x and y coordinates of the position where hyperlink was created. On receiving the coordinates the program on the server looks at the map file for close match and then loads the file that is closet to coordinates. In Server side mapping, the image map is mentioned by using ISMAP attribute in the <img> tag. The map details are save in a text file with the extension .map and place this file in the same folder in which html document containing the image is placed.
It is a single graphic image that consists of number of hyperlinks incorporated within an image. The specific areas mapped within an image are known as hotspots which are links to a resource.
Map contains the information of an image and the mapped areas of an image. These areas can be rectangles, circles or polygons defined in an image specified by coordinates in pixels of the image.
There are two ways to do image mapping
1) Client Side mapping : They are executed on client machine from web browser itself. All information is loaded along with the image. It executes quickly. In Client side mapping, the image map is mentioned by using USEMAP attribute in the <img> tag. The map is specified in the <map> and <area> tags, which defines the hotspot in an image. For specifying the areas of the hotspot, the <area> tag is used within <map> tag.
2) Server side mapping : In this the program that executes the links is placed on the server. The browser activates program on the server by sending x and y coordinates of the position where hyperlink was created. On receiving the coordinates the program on the server looks at the map file for close match and then loads the file that is closet to coordinates. In Server side mapping, the image map is mentioned by using ISMAP attribute in the <img> tag. The map details are save in a text file with the extension .map and place this file in the same folder in which html document containing the image is placed.
5. Explain forms and list the different tags
used to construct web form.
A webform, web form or HTML form on a web page allows a user to
enter data that is sent to a server for processing. Forms can resemble paper or
database forms because web users fill out the forms using checkboxes, radio
buttons, or text fields. The HTML <form> element defines a form that is
used to collect user input. An HTML form contains form elements.
Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.
The list of different tags used to create form elements are:
<form> </form> : container tag for all form elements
<input> tag : To create textbox, password field, radio button, buttons, check box, submit button, reset button using the type attribute. HTML5 added several new input types: color,date, datetime-local, email, month, number, range, search, tel, time, url, week, etc..
<textarea> </teaxtarea> : To create multiline text box. The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.
<select> : used to create a drop-down list. The <option> tags inside the <select> element define the available options in the list.
Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.
The list of different tags used to create form elements are:
<form> </form> : container tag for all form elements
<input> tag : To create textbox, password field, radio button, buttons, check box, submit button, reset button using the type attribute. HTML5 added several new input types: color,date, datetime-local, email, month, number, range, search, tel, time, url, week, etc..
<textarea> </teaxtarea> : To create multiline text box. The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.
<select> : used to create a drop-down list. The <option> tags inside the <select> element define the available options in the list.
6. Explain popular audio formats.
Popular Sound/Audio formats:
.WAV - developed by Microsoft and IBM. It is the standard format for Windows.
.AIFF - (Audio Interchange File Format) developed by Apple for MAC platform
.Ra - (Real Audio Format) is lower quality audio format (smaller in size)
.MPEG/.MPG - (Moving Picture Experts Group) popular format used for web. Smaller in size but good quality
.AU - (Audio) developed by Sun Microsystems for UNIX platform
.MIDI - (Musical Instrumental Digital Interface) - format used for instrumental music, very small in size
.WAV - developed by Microsoft and IBM. It is the standard format for Windows.
.AIFF - (Audio Interchange File Format) developed by Apple for MAC platform
.Ra - (Real Audio Format) is lower quality audio format (smaller in size)
.MPEG/.MPG - (Moving Picture Experts Group) popular format used for web. Smaller in size but good quality
.AU - (Audio) developed by Sun Microsystems for UNIX platform
.MIDI - (Musical Instrumental Digital Interface) - format used for instrumental music, very small in size
7. Explain popular video formats.
Popular Video formats:
.AVI (Audio Video
Interleave) - format developed by Microsoft for Windows platform.
.WMV (Windows Media video) - developed by Mircosoft
.QT (Quick Time) - format developed by Apple for MAC platform
.MPG / .MPEG / .MP4 - formats developed by Moving Picture experts group, popular format on web.
.flv - FLV is a file format used by Adobe Flash Player and Adobe AIR for storing and delivering synchronized audio and video streams.
.swf - is a file extension for a Shockwave Flash file format created by Macromedia and now owned by Adobe. SWF stands for Small Web Format. SWF files can contain video and vector based animations and sound and are designed for efficient delivery over the web. SWF files can be viewed in a web browser using the Flash plug in.
.WMV (Windows Media video) - developed by Mircosoft
.QT (Quick Time) - format developed by Apple for MAC platform
.MPG / .MPEG / .MP4 - formats developed by Moving Picture experts group, popular format on web.
.flv - FLV is a file format used by Adobe Flash Player and Adobe AIR for storing and delivering synchronized audio and video streams.
.swf - is a file extension for a Shockwave Flash file format created by Macromedia and now owned by Adobe. SWF stands for Small Web Format. SWF files can contain video and vector based animations and sound and are designed for efficient delivery over the web. SWF files can be viewed in a web browser using the Flash plug in.
8. What is Cross Browser and give examples.
Testing your website on different browsers is knows as Cross
Browser Testing. Cross Browser Testing is a process to test web
applications across multiple browsers. It involves checking compatibility of
your application across multiple web browsers and ensures that your web
application works correctly across different web browsers. It involves testing
both the client side and server side behavior of your Web application when it
is accessed using different Web Browsers. It shows limitation of the web site
and functional features.
Examples:
1. <bgsound> tag is only supported by Internet Explorer and not by Netscape Navigator, Chrome, Firefox, Opera, etc..
Examples:
1. <bgsound> tag is only supported by Internet Explorer and not by Netscape Navigator, Chrome, Firefox, Opera, etc..
2. Broken image
- an image in a web page whose path is not found or path is wrong or file name
is given is wrong. Internet Explorer shows broken images with a red color sign
along with alternative text. In Netscape Navigator, it shows 3 color dots with
alternative text.
3. <hr> tag
Horizontal rule - The appearance is different in browsers. In Internet Explorer
it shows 3D effect, whereas in Netscape Navigator it show rule (line) in
regular manner.
4. bordercolorlight and bordercolordark
- attributes of tag are supported in Internet Explorer but not supported in
Netscape Navigator.
5. bgproperties=fixed - This attribute used in tag makes background image water marked in Internet Explorer, but moves with text in Netscape Navigator.
6. Outset Border - Outset border style given to paragraph tag is shown in Internet Explorer and not in Netscape navigator.
7. <blink> tag is not supported in Internet Explorer and other browsers which blinks the text, but supported in Netscape Navigator.
5. bgproperties=fixed - This attribute used in tag makes background image water marked in Internet Explorer, but moves with text in Netscape Navigator.
6. Outset Border - Outset border style given to paragraph tag is shown in Internet Explorer and not in Netscape navigator.
7. <blink> tag is not supported in Internet Explorer and other browsers which blinks the text, but supported in Netscape Navigator.
9. What is Unicode?
·
Unicode is a computing industry
standard for the consistent encoding, representation, and handling of text
expressed in most of the world's writing systems.
·
It is a standard character set
encoding developed and maintained by The Unicode Consortium.
·
It can support over one million
characters.
·
It supports all characters from all
scripts, as well as many symbols.
·
Unicode also knows as UTF-8 (Unicode
Transformation Format-8) or the Universal Alphabet.
·
Today all the web browser and
operating systems includes Unicode support.
10. What is CSS? Explain ways to include CSS
in web pages.
·
CSS stands for Cascading Style
Sheets, used for styling of a web page.
·
CSS
describes how HTML elements are to be displayed on screen, paper, or in
other media
·
CSS
saves a lot of work. It can control the layout of multiple web pages all
at once
·
CSS
is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
There are three ways of inserting a style
sheet:
1) External
style sheet
With an external style sheet, you can change
the look of an entire website by changing just one file!
Each page must include a reference to the
external style sheet file inside the <link> element. The <link> element
goes inside the <head> section:
An external style sheet can be written in any
text editor. The file should not contain any html tags. The style sheet file
must be saved with a .css extension.
Example:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Here is how the
"myStyle.css" looks:
body {
background-color: lightblue; }
h1 {
color: navy;
margin-left: 20px;
}
h1 {
color: navy;
margin-left: 20px;
}
2) Internal style sheet
An internal style sheet may be used if one
single page has a unique style.
Internal styles are defined within the
<style> element, inside the <head> section of an HTML page:
Example:
<head>
<style>
body { background-color: linen; }
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<style>
body { background-color: linen; }
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
3) Inline style
An inline style may be used to apply a unique
style for a single element.
To use inline styles, add the style attribute
to the relevant element. The style attribute can contain any CSS property.
The example below shows how to change the
color and the left margin of a <h1> element:
Example:
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
11. What is Web Server?
A Web server is a
program running on a Computer that uses HTTP (Hypertext Transfer Protocol) to
serve the files that form Web pages to users, in response to their requests,
which are forwarded by their computers' HTTP clients (Web Browsers).
Web server is a
computer that hosts websites and web pages i.e. where the web content is
stored.
A web server
consists of a physical server, server operating system (OS) and software used
to facilitate HTTP communication like IIS, Apache, etc.
When you type a
Web site address into your browser, Web servers are doing the work of
getting you the page you request.
Every Web
server has an IP address and possibly a domain name.
Examples of Web
Server Programs:
- Microsoft Internet Information Services (IIS)
- Microsoft Personal Web Server (PWS)
- Apache HTTP Server
- Sun Java System Web Server
- Lighttpd
12. Write a note on CGI Scripting?
CGI stands for Common
Gateway Interface. It is a standard for interfacing external programs with an
HTTP server. CGI is a part of the HTTP protocol. It is set or rules resident at
web server. It provides path or way for the web page to communicate with the
web server. CGI converts data input and formats the data so that the browser
can display the result.
CGI programs are
used to publish and process forms so that readers can submit comments, order a
product, or search for information from a web page.
