Vous êtes sur la page 1sur 20

1.

a) Discuss lists and table elements


Lists
• One of the most popular methods for organizing information is by using lists.
• HTML presents three basic kinds of lists: unordered lists, ordered lists, and definition
lists.
• In unordered lists, the list items are marked with bullets.
• In ordered lists, they are marked with numbers, Roman numerals, or letters.
• Definition lists are a little different; they have a pair of values, one for the term, the other
for its definition.

Unordered Lists
• Unordered lists are specified with the <UL> tag.
• Unordered lists are used when the order of the list items is unimportant.
• The type attribute defines the type of bullets used to denote the individual list items.
• The three options are: disc, circle and square.
Example
<UL type="disc">
<LH> UG Courses </LH>
<LI> BE (CSE) </LI>
<LI> BE (ECE) </LI>
<LI> BE (EEE) </LI>
</UL>
<UL type="square">
<LH> PG Courses </LH>
<LI> MCA </LI>
<LI> ME (CSE) </LI>
<LI> MBA </LI>
</UL>
Ordered Lists
• Ordered lists are specified with the <OL> tag.
• They are used when the order of the list item is significant.
• OL elements have the type and start attributes.
• The type attribute selects the kinds of numbering system utilized to order the list.
Example
<html>
<body>
<h4>An Ordered List:</h4>
<ol type=I>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Definition Lists
• Definition lists are specified with the <DL> tag.
• Definition lists consist of pairs of values, the first being the term to be defined, and the
second being the definition of the tem.
• Example
<DL>
<DT> Satellite Dish
<DD> Antenna like device which functions to receive and concentrate television
signals.
Nested Lists
• Any kind of list – ordered, unordered or definition – can be nested within another list.
<UL type=disc>
<LI> UG COurses </LI>
<OL type=i>
<LI> BE (CSE) </LI>
<LI> BE (ECE) </LI>
<LI> BE (EEE) </LI>
</OL>
<LI> PG COurses </LI>
<OL type=i>
<LI> ME (CSE) </LI>
<LI> MCA </LI>
<LI> MBA </LI>
</OL>
</UL>

What are the HTML Table Elements


• Html tables begin and end with the table tags, <table> and </table>
• They contain rows, defined with the row tags <tr> and </tr>.
• Cells defined with cell tags, <td> and </td>
• Captions for tables are created with the begin and end caption tags, <caption> and
</caption>.
• Some cells can be designated as table row headers with the use of the <th> and </th>
tags.

• The basic Table Elements

Attribute Description

Align How table aligns with other elements.


Bgcolor Background color for table
Width Width of table
Cols Number of columns within table.
Border Width in pixels of frame around table.
Frame Which sides of the frame surrounding table are visible.
Rules Which rules appear between table columns and rows
Cellspacing The space between cell border and table frame.
Cellpadding The space between cell border and cell contents.
• TH and TD element attributes

Attribute Description

Nowrap Disbale automatic text wrapping


Bgcolor Background color of cell
Rowspan Numbers of rows spanned by cell
Colspan Number of columns spanned by cell.

Column Grouping with COLGROUP and COL


• The columns of the table can be grouped by using the colgroup element.
• Once grouped, you can apply a width to all of the columns included within the group.
• A second element col, can also supply specific width and alignment information for one
or more columns within the group.
• Example
<table border="1">
<colgroup span="3">
<col width="50"></col>
<col width="100"></col>
<col width="20"></col>
</colgroup>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</table>
Row Grouping with thead, tfoot and tbody elements
• Each table has at least one row, and this becomes the default table body.
• However, the rows that make up the body can also be delimited with one or more tbody
elements.
• The rows that make up the table head for a specific row grouping can be delimited with
the thead element.
• The foot of the table row grouping can be delimited with the tfoot element.
• Example
<table width=60% frame=border border=8 rules=groups cols=3 cellspacing=3
cellpadding=5 align=center>
<caption> This is an example table </caption>
<thead align=left>
<tr>
<th> </th>
<th> second Value </th>
<th> Third Value </th> </tr>
<tfoot>
<tr> <td> Month Two Subtotals </td>
<td> 1446 </td>
<td> 18889 </td>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan=2> Month One Values: </td>
<td> 0.5 </td>
<td> .5 </td>
</tr>
<tr><td> 4.4 </td>
<td> 89.3 </td>
</tr>
<tfoot>
<tr>
<td> Month one Subtotals : </td>
<td> 1 </td>
<td> 1 94 </td>
</tr>
<tbody>
<tr>
<td rowspan=2> Month One Values: </td>
<td> 1.444 </td>
<td> .0005 </td>
</tr>
<tr><td> 1444.444 </td>
<td> 18889.003 </td>
</tr>
</tbody>
</table>

2 a) Discuss about <FORM>


• An HTML form is not a visual element.
• It is a container and can contain one or more buttons, textboxes or other form elements.
• The form elements can be used to access information from the reader and then process
that information within the webpage.
• The information can also be sent to a CGI or web server application for further
processing.
The FORM Objects and its Attributes
• A form is created using the begin and end form tags <FORM> and </FORM>.
• Though not required , there are form attributes that can control what happens to the
information, the method used to deliver this information and where feedback derived
from the form contents should be sent.
• Syntax for Creating Form
<Form name=“mailForm”
action = “url” Method=post>
……
</Form>
• Form attributes are:
i. name – Form name.
ii. target – Location of window where from responses are sent.
iii. action – URL of webserver application that process form information.
iv. enctype – By default this attribute has a value of application x/www-
form-urlencoded, but can be set to multipart/form-data if the file upload
element is used.
v. method – A value of get or post, which determines how form information is sent.
The forms array
• Each form has a separate entry in a built-in array called forms.
• This array can be accessed in script through the document object, which contains this
array as a property.
The FORM elements
• The Form elements are : button, check box, fileupload, hidden, password, radio, reset,
select, submit, text and textarea.
• Each element has a different look and performs a different function.
• The INPUT tag creates most of these elements. As an example of creating an element,
the following code creates a text field:
<INPUT type=“text” name=semefield>
The BUTTON Element
• Probably the most common of the form elements is the button element.
• You can create a button using the following code
<input type=“button” name=“somebutton” value=“PUSH ME”>

A simple form , button with the words “push me”


<html>
<head>
<title>but</title>
</head>
<body>
<input type="button" name="somebutton" value="push me">
</body>
</html>
• A selection list, or drop-down list box is really a couple of different element.
• The first is the select element, which is the box, and the second is one or more option
elements, which contain the box entries.
• Creating a selection list generates a text-field-sized element with an arrow.
• Clicking the down arrow in the box next to the list exposes the list elements in a drop-
down box big enough to hold all the elements.
Example:
<html>
<head>
<title>but</title>
</head>
<body>
<select name="selection">
<option> ONE
<option> TWO
<option selected> THREE
<option> FOUR
</body>
</html>
• There are three attributes for the SELECT object:
name – element name.
size – number of options visible when page opens, set to one by default.
multiple – specifies that more than one option can be selected.

2 b) discuss about <FRAME>


• Html frames slip the web page window into separate window views, each capable of holding
a different html document.
Creating and Working with Frames
• Frame windows are made from more than one html file.
• One file contains the Frameset definition, including which source files make up the
frames and how much space each will occupy.
The Frameset Element
Main.html
<frameset rows=“80,*”>
<frame src=“top.html”
<frame src=“content.html”>
</frameset>
• Instead of creating two rows, you can also create two columns and load the web page
contecnts into each.
<frameset cols=“80,*”>
<frame src=“menu.html”>
<frame src=“main.html”>
</frameset>
Nested Frameset
 Framesets that contain other framesets.
 Example
<frameset rows=“*,250”>
<frame src=“main.html”>
<frameset cols=“200,200,*”>
<frame src=rose.jpg>
<frame src=lily.jpg>
<frame src=tulip.jpg>
</frameset>
</frameset>
Frame Element Attributes

Attribute Description

Name Frame name


Src Frame source
Frameborder Setting this value to 1, draws a border around the frame. 0
removes the border.
Noresize Turns off frame resizing
Marginwidth Frame horizontal margin
Marginheight Frame vertical margin
Scrolling Setting this value to auto provides scrolling only when frame
content does not fit within the frame space. Setting this value
to yes always provides a scroll bar. Setting this value to no
always turns off the scroll bar.

Accessing External References from Frames


• One of the disadvantage to using frames is that including a hypertext link within a frame
page to a web page at an external web site loads that page into the frame, rather than
directly into the browser window.
• This problem can be resolved by the target attribute which can be used with link
elements.
• There are several different reserved keywords that can serve as the target attribute value:
• Blank - loads page to new unnamed window
• self - loads page to current frame or window
• Parent - loads page to parent window
• Top - loads page to original window
Inline Frames with IFrame
• Html 4.0 created a new frame element called the inline frame, which uses the tags
<iframe> and </iframe>.
• Inline frames have the same attributes regular frames have, except that each inline frame
window is embedded within a web page and attributes are specified directly for the frame
window.
• Example:
<html>
<body>
<h1> This demonstrate inline frames </h2>
<iframe src=“main.html” height=120 width=95%> </iframe>
<iframe src=“content.html” height=300 width=95%> </iframe>
</body>
</html>
HTML Frames
Frames allow for multiple ".html" documents to be displayed inside of one browser window at a
time. This means that one page has no content on it, but rather tells the browser which web pages
you would like to open. With the addition of CSS and PHP, frames have become outdated, but if
you wish to use them, read on.
Frames - A Generic Frame Page
Frames are most typically used to have a menu in one frame, and content in another frame. When
someone clicks a link on the menu that web page is then opened on the content page. Here is a
classic example of a basic "index" frameset with a menu on the left and content on the right.
HTML Code:
<html>
<head>
</head>
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
•frameset - The parent tag that defines the characteristics of this frames page. Individual frames
are defined inside it.
•frameset cols="#%, *"- Cols(columns) defines the width that each frame will have. In the above
example we chose the menu (the 1st column) to be 30% of the total page and used a "*", which
means the content (the 2nd column) will use the remaining width for itself.
•frame src="" -The location of the web page to load into the frame.

You probably noticed those ugly gray lines that appear between the frames. It is possible to
remove these and manipulate the spacing between frames with frameborder and framespacing.
These attributes appear within the frameset tag.

•frameborder="#" - A zero value shows no "window" border.


•border="#"- Modifies the border width, used by Netscape.
•framespacing="#" -Modifies the border width, used by Internet Explorer.
Here's an example of the same frameset without the borders.
HTML Code:
<html><head></head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="title.html">
<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
Frame Name and Frame Target
How nice would it be to make each menu link load into the content page? We do this by naming
each frame and setting the correct base target inside menu.html.
HTML Code:
<html><head></head>
<frameset rows="20%,*">
<frame name="title" src="title.html">
<frameset cols="30%,*">
<frame name="menu" src="menu.html">
<name="content" src="content.html">
</frameset>
</html>
HTML Code:
<html><head>
<base target="content">
</head>
...
</html>

3. a) Discuss about <img> and <marquee> tags

HTML - Images
Images are a staple of any web designer, so it is very important that you understand how to use
them properly. Use the <img /> tag to place an image on your web page.
<img src="sunset.gif" />
HTML - Image src
Above we have defined the src attribute. Src stands for source, the source of the image or more
appropriately, where the picture file is located. As with links described in a previous lesson, you
may use any standard URL to properly point the src attribute to a local or external source.
There are two ways to define the source of an image. First you may use a standard URL.
(src=http://www.Tizag.com/pics/htmlT/sunset.gif) As your second choice, you may copy or
upload the file onto your web server and access it locally using standard directory tree methods.
(src="../sunset.gif") The location of this picture file is in relation to your location of your .html
file.

URL Types

Fig : URL Types


A URL cannot contain drive letters, since a src URL is a relational source interpretation based on
the location of your .html file and the location of the picture file. Therefore something like
src="C:\\www\web\pics\" will not work. Pictures must be uploaded along with your .html file to
your web server.
Each method has its pros and cons, for instance using the URL of pictures on other sites poses a
problem if the web master(s) of the other site happen to change the physical location of the
picture file. Copying the file directly to your web server solves this problem, however, as you
continue to upload picture files to your system, you may eventually run short on hard drive
space. Use your best judgement to meet your needs.
HTML - Alternative Attribute
The alt attribute specifies alternate text to be displayed if for some reason the browser cannot
find the image, or if a user has image files disabled. Text only browsers also depend on the alt
attribute since they cannot display pictures.
HTML Code:
<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />
HTML - Image Height and Width
To define the height and width of the image, rather than letting the browser compute the size, use
the height and width attributes.
HTML Code:
<img src="sunset.gif" height="50" width="100">
Above we have defined the src, height and width attributes. By informing the browser of the
image dimensions it knows to set aside a place for that image. Without defining an image's
dimensions your site may load poorly; text and other images will be moved around when the
browser finally figures out how big the picture is supposed to be and then makes room for the
picture.

Vertically and Horizontally Align Images


Use the align and valign attributes to place images within your body, tables, or sections.
1.align (Horizontal)
 right
 left
 center

2.valign (Vertical)
 top
 bottom
 center

Below is an example of how to align an image to the right of a paragraph.


HTML Code:
<p>This is paragraph 1, yes it is...</p>
<p>
<img src="sunset.gif" align="right">
The image will appear along the...isn't it?
</p>
<p>This is the third paragraph that appears...</p>
Images as Links
This will be a quick review of the links - image lesson. Images are very useful for links and can
be created with the HTML below.
HTML Code:
<a href="http://www.gnits.ac.in">
<img src="sunset.gif">
</a>

<MARQUEE>

The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or
right automatically. Unlike its blinking counterpart, the marquee element has several attributes
that can be used to control and adjust the appearance of the marquee.

Align
Uses the same syntax as the img element.
Behavior
Allows the user to set the behavior of the marquee to one of three different types:
 Scroll (default) – Scrolls the text from right-to-left, and restarts at the right side of
the marquee when it has reached the left side. Text disappears when looping
finishes.
 Slide – When used in absence of the 'Behavior' attribute, contents to be scrolled
will slide the entire length of marquee but stops the moment it hits the end, so that
the contents will be displayed. But if it is used with attribute 'Behavior' then the
attribute 'Slide' will be ignored.

Loops are counted by each time it reaches each end of the marquee; a loop of 1 is different from
'Slide' attribute. when item is being scrolled with 'Slide' attribute, item will stop permanently at
the end of length of the marquee, displaying the entire item. However, when an item is being
scrolled without a 'Loop' attribute, the number of scrolls will be repeated according to what
number 'Loop' is equal to. If 'Loop=1' then item will scroll only once and will exit the length of
marquee completely, while the item being scrolled will stop would be the same as 'Slide'. By
default, 'Loop=infinite' so it is not needed to code the attribute 'Loop' is you want a non-stop
scroll. Note: 'Loop' will be ignored if attribute 'Behavior' is coded. Also, if 'Behavior=Alternate'
and 'Loop=2' then item will go from beginning of the Marquee to the end and back to the
beginning, counting a round trip as 2 loops.

Bgcolor
Sets the background color of the marquee.
Direction
Sets the direction of the marquee box to either left-to-right, right-to-left, up-to-down and
down-to-up.
Width
This sets how wide the marquee should be.
Loop
This sets how many times the marquee should 'Loop' its text. Each trip counts as one
loop.
Scrollamount
This is how many pixels the text moves between 'frames'. So scrollamount=1 gives you
the slowest scroll speed.
Scrolldelay
This sets the amount of time, in milliseconds, between 'frames'. Much like watching a
replay of a video where every frame of the video would be paused for x number of
miliseconds. So, 'Scrolldelay=1000' means a slow motion where every frame lasts one
thousand miliseconds or one second.

3.b) Local and Global links in a webpage

Linking is where it's at in the World Wide Web. A website typically begins at a 'home' page
which contains links to other pages local to itself and pages that are somewhere else on the
Internet. If you wish to provide a link to somewhere, then you use the <A HREF> tag. The A
stands for Anchor, it is an anchor point in a document elsewhere. There are a number of ways to
link and these are described next.

Typing the tag <A HREF="http://www.intel.com">Intel's Website</A> anywhere within the


body of your HTML document, will give you this Intel's Website. If you click on Intel's Website,
and you are connected to the internet, then you will be whisked away to view the delights of
Intel's Website. The http://www.intel.com bit is called the URL which stands for Uniform
Resource Locator. Unlike HTML, URLs are case sensitive.

Notice how that you have a little extra bit to the <A HREF> tag where you type in a description,
in this case 'Intel's Website'. This text is enclosed within the whole <A HREF....</A> tag and is
used by the browser to provide a 'click point'. This 'click point' is usually highlighted in a
particular colour such as blue (for unvisited) and red (for visited), this is your Hypertext Link.
These colours can be changed within Cascading Style Sheets. TARGET="_blank" and call the
new page something like 'New Window'. For example <A HREF="http://www.intel.com/"
TARGET="_blank">New Window</A>.

We don't have to go whizzing off across the world, we can link to another HTML document on
the Local Area Network or on your own hard disk.

Typing <A HREF="wwnever.htm">Never Never Land</A> gives you a link to Never Never
Land which is a another web page in the same directory as the current page. Click on it now! If
the page was in a directory called 'misc' then you would type <A
HREF="misc\wwnever.htm"> instead.

4.a)Explain use of XML schema.

XML Schemas are much more powerful than DTDs.


XML Schemas Support Data Types

One of the greatest strength of XML Schemas is the support for data types.

With support for data types:

 It is easier to describe allowable document content


 It is easier to validate the correctness of data
 It is easier to work with data from a database
 It is easier to define data facets (restrictions on data)
 It is easier to define data patterns (data formats)
 It is easier to convert data between different data types

XML Schemas use XML Syntax

Another great strength about XML Schemas is that they are written in XML.

Some benefits of that XML Schemas are written in XML:

 You don't have to learn a new language


 You can use your XML editor to edit your Schema files
 You can use your XML parser to parse your Schema files
 You can manipulate your Schema with the XML DOM
 You can transform your Schema with XSLT

XML Schemas Secure Data Communication

When sending data from a sender to a receiver, it is essential that both parts have the same
"expectations" about the content.

XML Schemas are Extensible

XML Schemas are extensible, because they are written in XML.

With an extensible Schema definition you can:

 Reuse your Schema in other Schemas


 Create your own data types derived from the standard types
 Reference multiple schemas in the same document.

Write short notes on DOM parser


The XML Document Object Model(DOM) is a programming interface for XML documents. It
define the way an XML document can be accessed and manipulated. The XMLDOM is
designed to be used with any programming language and any operating system. With the XML
DOM, a programmer can create an XML document, navigate its structure, and add, modify, or
delete its elements.

The DOM represents a tree view of the XML document. The documentElement is the top-level
of the tree. This element has one or many childNodes that represent the branches of the tree.
A Node Interface Model is used to access the individual elements in the node tree. As an
example, the childNodes property of the documentElement can be accessed with a for/each
construct to enumerate each individual node.

The Node Interface


Some node types examples:

Javascript datatypes

DataTypes
 Numbers - are values that can be processed and calculated. You don't enclose them in
quotation marks. The numbers can be either positive or negative.
 Strings - are a series of letters and numbers enclosed in quotation marks. JavaScript uses
the string literally; it doesn't process it. You'll use strings for text you want displayed or
values you want passed along.
 Boolean (true/false) - lets you evaluate whether a condition meets or does not meet
specified criteria.
 Null - is an empty value. null is not the same as 0 -- 0 is a real, calculable number,
whereas null is the absence of any value.

Data Types

TYPE EXAMPLE

Numbers Any number, such as 17, 21, or 54e7

Strings "Greetings!" or "Fun"

Boolean Either true or false

Null A special keyword for exactly that – the null value (that is, nothing)

Integers

In JavaScript, you can express integers in 3 different Bases:

 base 10,
 base 8 (octal), and
 base 16 (hexadecimal).

Base 8 numbers can have digits only up to 7, so a decimal value of 18 would be an octal value of
22.

Similarly, hexadecimal allows digits up to F, where A is equivalent to decimal 10 and F is 15.


So, a decimal value of 18 would be 12 in hexadecimal notation.

 Converting Numbers to Different Bases Table

In order to distinguish between these three bases, JavaScript uses the following notation.

Specifying bases in JavaScript

NUMBER SYSTEM NOTATION

Decimal (base 10) A normal integer without a leading 0 (zero) (ie, 752)

Octal (base 8) An integer with a leading 0 (zero) (ie, 056)

Hexadecimal (base 16) An integer with a leading 0x or 0X (ie, 0x5F or 0XC72)

Floating Point Values

Floating point values can include a fractional component. A floating-point literal includes a
decimal integer plus either a decimal point and a fraction expressed as another decimal number
or an expression indicator and a type suffix

 7.2945
 -34.2
 2e3 means 2 x 103 => 2000
 2E-3 means 2 x 10-3 => .002

Floating point literals must, at a minimum, include a decimal integer and either the decimal point
or the exponent indicator ("e" or "E"). As with integers, floating point values can be positive or
negative.

Strings

Technically, a string literal contains zero or more characters enclosed, as you know, in single or
double quotes:

 "Hello!"
 ‘245’
 ""  // This example is called the empty string.

NOTE: the empty string is distinct from the null value in JavaScript.

NOTE: Strings are different from other data types in JavaScript. Strings are actually Objects.
This will be covered later on.

Boolean

A Boolean value is either true or false.

Note: Unlike Java, C and other languages, in JavaScript Boolean values can only be represented
with true and false. Values of 1 and 0 are not considered Boolean values in JavaScript.

Null Value

The null value is a special value in JavaScript. The null value represents just that – Nothing. If
you try to reference a variable that isn’t defined and therefore has no value, the value returned is
the null value. Likewise, with the prompt() dialog box, if the user selects the Cancel button, a
null is returned. (example)

Beans Introspection

8
Beans support introspection in two ways:
– By adhering to specific rules, known as design patterns, when naming bean features
– By explicitly providing property, method, and event information with a related bean
information class.
Properties
Properties are the appearance and behavior characteristics of a bean that can be changed at
design time
Beans expose properties so they can be customized at design time
Builder tools introspect on a bean to discover its properties and expose those properties for
manipulation
Customization is supported in two ways:
– by using property editors
– by using more sophisticated bean customizers.

Persistence
Persistence enables beans to save and restore their state After changing a bean's properties, you
can save
the state of the bean and restore that bean at a later time with the property changes intact .The
JavaBeans architecture uses Java Object Serialization to support persistence.

Events
œ Beans use events to communicate with other beans
œ A bean that is to receive events (a listener bean) registers with the bean that fires the event (a
source bean)
Builder tools can examine a bean and determine which events that bean can fire (send) and
which it can handle (receive).

JavaBean Method
œ A bean's methods are no different from Java methods, and can be called from other beans or a
scripting environment
œBy default all public methods are exported.

Examples of Beans
œ GUI (graphical user interface) component
œ Non-visual beans, such as a spelling checker
œ Animation applet
œ Spreadsheet application.

Properties
œ A bean property is a named attribute of a bean that can affect its behavior or appearance
œ Examples of bean properties include color, label,font, font size, and display size.

Types of Properties
œ Simple – A bean property with a single value whose changes are independent of changes in
any other property.
œ Indexed – A bean property that supports a range of values instead of a single value.
œ Bound – A bean property for which a change to the property results in a notification being sent
to some other bean.
œ Constrained – A bean property for which a change to the property results in validation by
another bean. The other bean may reject the change if it is not appropriate.

Vous aimerez peut-être aussi