WT Unit1 - New Murali
WT Unit1 - New Murali
WT Unit1 - New Murali
ONGOLE
WEB TECHNOLOGIES-SYLLABAS
UNIT – I
1|Page N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
HTML: Basic HTML, Document body, Text, Hyper links, adding more formatting,
Lists, Tables using images. More HTML: Multimedia objects, Frames, Forms
towards interactive, HTML document heading detail
UNIT – II
Cascading Style Sheets: Introduction, using Styles, simple examples, your own
styles, properties and values in styles, style sheet, formatting blocks of
information, layers.
UNIT – III
Introduction to JavaScript: What is DHTML, JavaScript, basics, variables, string
manipulations, mathematical functions, statements, operators, arrays,
functions. Objects in JavaScript: Data and objects in JavaScript, regular
expressions, exception handling
UNIT – IV
DHTML with JavaScript: Data validation, opening a new window, messages and
confirmations, the status bar, different frames, rollover buttons, moving
images,
UNIT – V
XML: defining data for web applications, basic XML, document type definition,
presenting XML, document object model. Web Services
References:
1. Harvey M. Deitel and Paul J. Deitel, “Internet & World Wide Web How to
Program”, 4/e, Pearson Education.
2. Uttam Kumar Roy, Web Technologies from Oxford University Press
UNIT-i: HTML
All HTML documents follow the same basic structure. They have a head
which contains control information used by the browser and server and a large
body. The body contains the content that displays on the screen and tags
which control how that content is formatted by the browser. The basic
document is:
<html>
<head>
<title> Title to displayed on Title Bar </title>
</head>
<body>
Content to be displayed on the web page.
</body>
</html>
<html> … </html>
Starting an HTML page. It tells the browser that everything contained
between them is a HTML code for creating web pages. The <html> and </html>
tags should always be the first and last lines of code in the HTML file.
<head> … </head>
This tag contains the head of an HTML document, which holds information
about the document, such as its title. There are certain tags, like
<link>,<title>,<style > and <script> which can only appear in the page’s head.
<title> … </title>
It contains the title of HTML document which will appear in the web
browser’s title bar and is used by search engines to refer the document.
<body> … </body>
This tag contains the body of the HTML document, which includes the
contents that will actually appear in the web browser. It may include text,
images, links, forms etc.
HTML tags tell web browsers how to format and organize our web pages.
An attribute is a keyword that we use in an opening tag to give more
information to the web browser.
(a) Background: It is used to have an image file as a background of a
browser.
(b) Bgcolor: It specifies the color of the browser’s background. It may be
one of the predefined colors or a color value.
(c) Text: Color of the text in the document.
Example:
Bold tag: <b>: The <b> tag will bold the text inside the tag.
Italic tag: <i>: The <i> tag will italicize the text inside the tag.
Underline tag: <u>: The <u> tag will underline the text inside the tag.
Example:
This <b>example</b> shows how <i>important</i> it is to use
<u>tags</u>.
Header Tags
The header tags <h1>, ... <h6> allows us to place additional importance
on the text within such tags. <h1> has the largest size, and <h6> the smallest.
Many search engines put additional weight on the texts within the header tags.
Example:
<h1>This is h1 text.</h1>
<h2>This is h2 text.</h2>
<h3>This is h3 text.</h3>
<h4>This is h4 text.</h4>
<h5>This is h5 text.</h5>
<h6>This is h6 text.</h6>
<center>: The <center> tag causes all the text within the tag to be centered.
Example:
<center>This is centered text.</center>
<br>: The <br> tag indicates a line break. This tag is most often used by itself,
without a corresponding closing tag.
<p>: The <p> tag indicates a new paragraph. It is the same as <br><br>. This
tag is most often used by itself, without a corresponding closing tag.
Example:
A <sup> 2 </sup> : is outputted as A2
A <sub> 2 </sub> : is outputted as A2
Example:
<html>
<head>
<title>Text Formatting</title></head>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub>
<p> <sup>superscript</sup></p>
<p><u>underline</u>
<p> Hai this
Nalanda
Degree college</p>
<pre> Dono:1
House:1
IGMS COMPLEX </pre>
<font size=”15”>it set font size as 15</font>
<font color=”yellow”>text displayed in yellow color</font>
<basefont size=”15”>
<h1>ndc</h1>
<b>Vijayawada</b>
</basefont>
</body>
</html>
Ex: <ul>
<li>MURALI KRISHNA</li>
<li>SRI HARSHINI DEGREE COLLEGE</li>
8|Page N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
</ul>
Ordered list:
Syntax: <ol [ type=”1” | “a” | “A” | “I” | “i” ] [ start = “n” ] > … </ol>
Ex:
<ol>
<li>SHDC</li>
<li>ONGOLE</li>
</ol>
Note: <li>…</li>
The ordered or unordered lists are each made up of sets of list items.
Elements of a list may be formatted with any of the usual text formatting tags
and may be images or hyperlinks.
Definition list.:
<dl>…</dl>
Definition lists are different to the previous types in that they do not use
list items to contain their members. Elements within a definition list are either
items being defined or their definitions.
<dt>…</dt>
Definition terms mark items whose definition will be provided by the
next data definition. They can be formatted using any regular text formatting.
The closing tag is optional as it is assumed once a <dd> tag is reached.
<dd>…</dd>
Definitions of terms are enclosed within these tags. The definition can
include any text or block formatting elements. The text of a definition is usually
rendered indented and on the line below the preceding item.
Ex: <dl>
<dt>SHDC</dt>
<dd>DEGREE AND PG</dd>
</dl>
Example for list:
<html>
<body>
<H1>UN ordered list</H1>
<ul type="disc">
<li>C-LANGUAGE</li>
<li>JAVA</li>
<li>.NET</li>
</ul>
Definition List
<dl>
<dt>SHDC</dt>
<dd>SHDC have good management </dd>
</dl>
</body>
</html>
10 | P a g e N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
The table is one of the most useful HTML constructs. Tables have two
uses: structuring pieces of information and structuring the whole Web page.
<table>
The <table> tag specifies the presence of a table. This is very often used
in conjunction with the <tr> and the <td> tags.
The following attributes are commonly used to define the properties of
this table:
width: This specifies the width of the table. Can be specified in pixels or
in relative terms (for example, 100%).
border: This specifies whether the table will have a border. The number
indicates the thickness of the border.
cellspacing: The amount spacing between the cell wall and the cell
border. The area enclosed by the cell walls are the maximum amount of
area that text can be displayed in a cell.
cellpadding: The amount padding between cells and the each cell wall in
a table.
bgcolor: This specifies the background color for this table. The color
value may be specified as the color name or the six-character color code.
<tr>
The <tr> tag specifies the presence of a row. The following attributes are
commonly used to define the properties of this row:
bgcolor: This specifies the background color for this row. The color value
may be specified as the color name or the six-character color code.
height: This specifies the height of the row.
rowspan: This specifies the number of rows this particular row occupies.
<td>
The <td> tag specifies the presence of a column. Columns are specified
within each row. The following attributes are commonly used to define the
properties of the column:
11 | P a g e N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
<html>
<body>
<table border=2 cellspacing=10 cellpadding=10 height 100 width="500" >
<tr>
<th>sname</th>
<th>sno</th>
<th>scollege</th>
</tr>
<tr bgcolor=”red”>
<td>MURALI</td>
<td>111</td>
<td>SHDC</td>
</tr>
<tr bgcolor=”blue”>
<td>BABU</td>
<td>333</td>
<td>SHDC</td>
</tr>
</table>
</body></html>
12 | P a g e N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
A hyperlink (or link) is a word, group of words, or image that you can
click on to jump to a new document or a new section within the current
document. When you move the cursor over a link in a Web page, the arrow
will turn into a little hand. Links are specified in HTML using the <a> tag.
Syntax:
<a href="url">Link text</a> , where, href attribute specifies the destination of a
link.
Example:
<a href="http://www.GOOGLE.com/">Visit GOOGLE </a>
Note: The "Link text" need not have to be text. You can link from an image or
any other HTML element.
target Attribute
The target attribute specifies where to open the linked document. The
example below will open the linked document in a new browser window:
Example:
<a href="http:// www.ravithetutor.com" target="_blank"> Visit Ravi The Tutor
</a>
name Attribute
The name attribute specifies the name of an anchor. The name attribute
is used to create a bookmark inside an HTML document. Bookmarks are not
displayed in any special way. They are invisible to the reader.
13 | P a g e N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
Syntax:
A named anchor inside an HTML document:
<a name="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
Example:
<html>
<head>
<title>hyperlinks</title></head>
<body bgcolor=”yellow” text=”blue”>
//link to another document
<a href=”url”>hypertext</a>
//provide link in inside an HTML document
<a name="tips">Useful Tips Section</a>
// Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
</body>
</html>
Frameset Element
The frameset element holds two or more frame elements. Each frame
element holds a separate document. The frameset element states only HOW
MANY columns or rows there will be in the frameset.
Syn: <frameset cols="25%,75%">…….</frameset>
Frame Element:
The <frame> tag defines one particular window (frame) within a
frameset.
14 | P a g e N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
Example:
<html>
<head>
<title>frames rxample</title>
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
</html>
In the above example the first column is set to 25% of the width of the
browser window. The second column is set to 75% of the width of the browser
window. The document "frame_a.htm" is put into the first column, and the
document "frame_b.htm" is put into the second column
// Note: The frameset column size can also be set in pixels (cols="200,500"),
and one of the columns can be set to use the remaining space, with an asterisk
(cols="25%,*").
Nested frames:
Nested frames are process of subdividing already existing frames
i.e. for example if the webpage is divided into either row wise or column wise
frames first, and then again the row wise frames are subdivided into column
wise or column wise frames into row wise frames is called nested frames.
Example:
<html>
<head>
<title>frames example</title>
<frameset cols="25%,75%">
<frameset rows=”50,50”>
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
15 | P a g e N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
</frameset>
<frame src="frame_a.htm" />
</frameset>
</html>
Available Controls:
Controls are created using <INPUT> tag & TYPE attribute.
1. Form:
<form> … </form> creates an HTML form, used to enclose HTML
controls. The attributes are:
a) Action: Gives the URL which will handle the form data.
b) Method: Indicates a method or protocol for sending data to the
target URL. The Get method is the default.
2. Button:
<input type=”button”> creates an HTML button in a form. The attributes
are:
a) Value: set the caption of the element.
3. Text Fields:
<input type=”text”> creates a text field that the user can enter or edit
text inside it. The attributes are:
a) size: Sets the size of the control.
b) value: The value entered in the text field.
16 | P a g e N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
4. Password:
<input type=”password”> creates a password text field, which shows
asterisks on the text field. The attributes are:
a) maxlength: sets the maximum length f the data in the control.
b) Name: gives the name of the control.
c) Value: represents the value entered in the textfield.
5. Checkbox:
<input type=”checkbox”> creates a checkbox in a form. The attributes
are:
7. Selection lists:
<select> … </select> Creates a drop-down lists, where the user can
select choice from the list of elements. And <option>…..</option> tag is used
to provide values . The attributes are:
a) name: represents the name of the control.
b) value: the value of selected item.
17 | P a g e N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
8. Textarea:
<textarea> … </textarea> creates a textarea, much like a two
dimensional text field. The attributes are:
a) Rows: specifies the number of rows visible in the control.
b) Cols: Specifies the number of columns visible in the control.
9. Submit button:
<input type=”submit”> creates a submit button that the user can click to
send data in the form back to web server. The attributes are:
a) Name: sets the name of the control.
b) Value: Text to be displayed on the button.
18 | P a g e N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
19 | P a g e N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
Syntax:
<embed src=”url” height=”100” width=”100” autostart=”true/false”>
Example:
<html>
<head><title>including multimedia objects</title>
</head><body>
<embed src=”url” height=”100” width=”100” autostart=”true”>
</body></html>
Attributes of embedded tag is:
Height, width is two attributes defines the size of audio or video file in
web page.
Auto start defines that the multimedia objects automatically play or not when
we execute a program.
20 | P a g e N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
each applet in the web page. The space should allocate for applet is denoted
by the height and width parameters.
Example:
<head>
<title>including multimedia objects</title>
</head>
<body>
<applet code=”classfile” [name = “string” ] width=”n” height=”n”>
</body></html>
The head is a very important part of any HTML page as it contains lots of
control information that is needed by browsers and servers.
Document Type Declarations: The document type declaration for basic HTML
is:
<! doctype html public “-//w3c//dtd html 4.0//en”
“http://www.w3c.org/TR/PR-html4.0/loose.dtd”>
Control Information:
The head of the document contains control information to be used by
servers and browsers. It contains the title of the document which will be
displayed at the top of the browser and, optionally, a list of keywords, a
description of the document, any files to be linked into the document, and
information about how the document was prepared.
<title>…</title>
The title is used to display the text to be displayed in the title bar. It is
also used as the name in bookmark files and on search engines.
21 | P a g e N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
22 | P a g e N.MURALI KRISHNA
SRI HARSHINI DEGREE COLLEGE.ONGOLE
<head>
<title>image program</title>
</head>
<body background=”url”>
<h1>the bellow syntax is for to insert an image</h1>
<img src=”url” height=”n” width=”n” alt=”string”
align=”top/center/bottom”>
<h2> the bellow syntax for hyper link an image</h2>
<a href=”url”>hypertext</a>
</body>
</html>
23 | P a g e N.MURALI KRISHNA