Acharya Institute of Technology
Department of Information Science & Engineering
Programming the web lab
2
BRAIN MAPPING
3
4
5
6
7
8
9
Outcome
Students can ability to
Creating title inside heading tag
Creating headings inside a body tag
Creating paragraph inside a body tag
Creating pre paragraph inside a body tag
Creating bold text , italic text, underline to text etc
Understand what is HTML and XHTML
write HTML Documents
OUTLINE OF AN HTML DOCUMENT
• HTML stands for HyperText Markup Language. It is
used to display the document in the web browsers.
• HTML is considered to be the global publishing format
for Internet. It is not a programming language.
• HTML was developed by Tim Berners-Lee. HTML
standards are created by a group of interested
organizations called W3C(world wide web consortium).
11
Device Independence
The audience may view the HTML page with
many different devices.
12
WEB DOCUMENT OR WEB PAGE
DOCUMENT
Type of Content
IMAGE AND VEDIO
TEXT CONTENT AUDIO CONTENT CONTENT
ACHARYA INSTITUTE MOVIEVI
OF TECHNOLOGY MP3 SONGS DEO
13
OUTLINE OF AN HTML DOCUMENT
HTML DOCUMENT
ELEMENT = CONTROL + CONTENT
An HTML document is a mixture of content and controls. The controls are
specified by the tags of HTML.
14
OUTLINE OF AN HTML DOCUMENT
<STARTING TAG or CONTROL> CONTENT < /ENDING TAG or CONTROL>
EXAMPLE:
<h1> RWANDA AND MALDIVES </h1>
15
Structure of an HTML document
All HTML documents follow the same basic structure. They have the root tag as
<html>, which contains <head> tag and <body> tag. The head tag is used for
control information by the browser and the body tag contains the actual user
information that is to be displayed on the screen. The basic document is shown
below.
<html>
<head>
<title> Basic HTML document </title>
</head>
<body>
<h1> Welcome to the world of Web Technologies</h1>
<p> A sample HTML program written by Sudarsanan </p>
</body>
</html>
16
OUTLINE OF AN HTML DOCUMENT
Some tags include attribute specifications that provide some additional information for the
browser.
•< body bgcolor=“red” > rwanda and maldives </body>
Points to be remembered for HTML tags:
• Tags are delimited by angled brackets.
• They are not case sensitive i.e., <head>, <HEAD> and
<Head> is equivalent.
• If a browser not understands a tag it will usually ignore it.
• White spaces, tabs and new lines are ignored by the Browser
17
HEAD SECTION
<HEAD>---------------</HEAD>
<title> tag <script> tag <style> tag
18
<title> web page title </title>
19
BODY SECTION
<body> ------------</body>
Purpose: Body element is where you place the
content of the page. What casual users thinks of
as your web page, all goes into the body element
like
• heading
•Sub heading
•Text
•Images
•Multimedia elements and more
20
Structure Tags
Function Start Attributes End Tag
Tag
HTML File <html> none </html>
File <head> none </head>
Header
File Title <title> none </title>
Comment <!-- Your comments go between the start and end -->
s tags. Put a space between the -- and your
comments.
Body <body> background="filename" </body>
bgcolor="color value"
text="color value"
link="color value"
vlink="color value"
Division <div> align="right/left/center" </div>
style="property:value;"
class="classname"
Span <span> style="property:value;" </span>
(inline) class="classname"
21
Using to create static web page
BODY tag
Heading Paragraph Italic tag Bold tag
tag tag
Pre paragrah
Bullet tag Table tag
tag
22
BODY SECTION
• Heading tag
•These are formatting tags to vary the text size. There are six header tags
from h1 to h6
•Syntax
•<h1 align=“left”/”center”/”right”>
………………………
………………………
……………………….
</h1>
Basic Text Tags
Function Start Tag Attributes End Tag
Headline <h1-h6> align="center/right" </h1-h6>
23
BODY SECTION
<html>
<head>
<title> header example </title>
</head>
<body bgcolor="yellow">
<center>
<h1> Acharya Institute of technology</h1>
<h2> Acharya Institute of technology</h2>
<h3> Acharya Institute of technology</h3>
<h4> Acharya Institute of technology</h4>
<h5> Acharya Institute of technology</h5>
<h6> Acharya Institute of technology</h6>
</body>
</html>
24
output
25
BODY SECTION
•Paragraph tag
most text is part of a paragraph of information.
Every paragraph has to be explicitly tagged within
the source of the document.
Syntax:
<p align=“left”|”center”|”right”>
………………….
………………….
………………….
</p>
26
Basic Text Tags
Function Start Tag Attributes End Tag
paragraph <p> align=“/left/center/right" </p>
27
BODY SECTION
<html>
<head>
<title> header example </title>
</head>
<body bgcolor="yellow">
<h1 align="center">Motto</h1>
<p align="center">"Nurturing Excellence"</p>
<h2 align="center">VISION</h2>
<p align="center">to act as the nurturing ground for young professionals
who seek to make their mark and to create a talent pool for various
industries so that there may be synergistic growth for both</p>
</body>
</html>
28
Output
29
BODY SECTION contd..
Pre paragraph tag
Purpose: Tells the browser that the enclosed text is preformated and should not
be reformatted
<pre >
…………………………….
…………………………….
……………………………..
……………………………..
</pre>
30
EEXAMPLE
<html>
<head>
<title> break page</title>
</head>
<body bgcolor="yellow">
<pre>
Mary
had a
little
lamb
</pre>
</body>
</html>
31
OOUTPUT
32
TEXT FORMATING TAGS
Working with TEXT like UNDERLINE , BOLD, ITALIC TEXT, MARGUEE
<BODY>
<U> ………………………</U>
< B>………………………..</B>
<I> …………………………</I>
</BODY>
33
Basic Text Tags
Function Start Tag Attributes End Tag
Line Break <br> clear="left/right/all" </br> or
<br />
Bold <b> none </b>
Italic <i> none </i>
Typewriter <tt> none </tt>
Text
Font <font> size=“fixed size" </font>
color="color value"
Note: the font tag is being phased out
in favor of CSS styles.
Horizontal <hr> size="XX" </hr> or
Rule width="XX/XX%" <hr />
noshade
34
<MARQUEE attribute1 attribute2> Acharya Institute of Technology < /MARQUEE> (IE)
Places a scrolling text marquee into the document.
Attributes are:
ALIGN="...“ -- Possible values of "TOP", "MIDDLE", or "BOTTOM". Specifies the alignment of the text
around the marquee with respect to the marquee.
BEHAVIOR="...“ --Possible values of "SCROLL" (default), "SLIDE", or "ALTERNATE". Specifies the
behavior of the marquee text. "SCROLL" is the default, "SLIDE" makes the text start from off the
screen and then stick, "ALTERNATE" makes the text alternate back and forth repeatedly.
BGCOLOR="...“ --Specifies the background color of the marquee.
DIRECTION="...“ --Possible values are "LEFT" (default) or "RIGHT". Specifies the direction for the
text to scroll.
HEIGHT="...“ --Specifies the height of the marquee in number of pixels or % of screen.
HSPACE="n“ --Specifies the left and right margins of the outside of the marquee in pixels.
LOOP="n“ --Specifies the number of times the marquee will loop. Values of "-1" or "INFINITE"
make the marquee loop indefinitely.
SCROLLAMOUNT="n“ --Specifies the number of pixels between each successive draw of the
marquee text.
SCROLLDELAY="n“ --Specifies the number of milliseconds between each successive draw of the
marquee text.
VSPACE="n“ --Specifies the top and bottom margin for the outside of the marquee.
WIDTH="...“ --Specifies the width of the marquee either in pixel or in a percentage of the screen.
35
EXAMPLE
html>
<head>
<title> text formating tags</title>
</head>
<body bgcolor="hotpink">
<center>
<u> <h1> MORNING PRAYERS </h1> </u>
<br>
<b> In the name of the Father, and of the Son, + and of the Holy Sprit. Amen</b>
<br>
<i> where there is hatred, let me sow love</i>
<br>
<marquee><h2>Where there is sadness, joy</h2></marquee>
</body>
</html>
36
OUTPUT
37
CREATING LIST or BULLET TAGS
Order List:
Purpose: creates an ordered list. You use this element to surround <li> list iteam
<ol>
<li> …………………….</li>
<li>……………………..</li>
</ol>
Unorder list:
<ul>
<li> ……………………..</li>
<li> ……………………..</li>
</ul>
38
List Tags
Function Start Tag Attributes End Tag
Unordered <ul> type="disc/circle/square" </ul>
List
Ordered List <ol> type="I/A/1/a/i" </ol>
start="value to start counting at"
List Item <li> type=all ul and ol options </li>
Definiton List <dl> none </dl>
Definition List <dt> none </dt>
Item
Definition List <dd> none </dd>
Definition
39
Example 1: HTML code showing list tags.
<html>
<head>
<title> list page </title>
</head>
<body>
<h3> Course details </h3><br>
<ul type="disc">
<li> Computer Science and Engineering </li>
<li> Information Technology</li>
<li> Electronics and Communication </li>
</ul>
<br>
<ol type="I" start=4>
<li> Mechanical Engineering</li>
<li> Electronics and Electrical Engineering</li>
</ol>
<br>
<h3> Subject Details </h3>
<br>
<dl>
<dt> Web Technologies</dt>
<dd> This subject is related to the technologies used in web
applications</dd> 40
</dl>
EXAMPLE
<html>
<head>
<title> list tags</title>
</head>
<body bgcolor="limegreen">
<h3> country name </h3>
<ol>
<li>INDIA</li>
<li>MALDIVES</li>
<li>RWANDA</li>
</ol>
<h3>web tools </h3>
<ul>
<li>Hyper Text Markup Language(HTML)</li>
<li>Cascading Style Sheet(CSS)</li>
<li>JavaScript (JS)</li>
</body>
</html>
41
OUTPUT
42
CREATING TABLE
PURPOSE: Tables have two uses: structuring
pieces of information and structuring the
whole web page.
<table>
<caption> ………………..</caption>
<tr>
<th>……………….</th>
<th>……………….</th>
</tr>
<tr>
<td> ……………….</td>
<td>…………………</td>
</tr>
</table>
43
Table Tags
Function Start Tag Attributes End Tag
Table <table> border="X" </table>
width="XX/X%"
cellspacing="XX"
cellpadding="XX"
bgcolor="color value"
background="filename"
Table Row <tr> align="left/center/right" </tr>
valign="top/middle/bottom“ bgcolor="color value"
Table Data <td> align="left/center/right" valign="top/middle/bottom" </td>
width=X
nowrap
colspan="X"
rowspan="X“ bgcolor="color value"
Table <th> align="left/center/right" </th>
Header valign="top/middle/bottom"
width=X
nowrap
colspan="X"
rowspan="X"
bgcolor="color value"
Caption <caption> align="left/center/right“ valign="top/middle/bottom" </caption>
44
Example
<html>
<head>
<title> table tags</title>
</head>
<body bgcolor="orange">
<table border="4">
<caption> Department of ISE & CSE</caption>
<tr>
<th> Department Name</th>
<th> Number of faculty</th>
</tr>
<tr>
<td> ISE </td>
<td> 21 </td>
</tr>
<tr>
<td> CSE </td>
<td> 25 </td>
</tr>
</table>
</body>
</html>
45
output
46
Using to create DYNAMIC web page
BODY tag
IMAGE STYLE BGSOUND EMBED
Tag tag SCRIPT tag tag
tag
47
Image tag
Image Tags
Function Start Tag Attributes End Tag
Insert Image <img> src="filename" </img>
align="left/right"
width="XXX"
height="XXX"
alt="text that desribes image“
click
48
EXAMPLE
<html >
<head> <title> Images </title>
</head>
<body bgcolor="pink">
<h1 align="center"> ACHARYA INSTITUTE OF TECHNOLOGY </h1>
<h2 align="center"> DEPARTMENT OF INFORMATION SCIENCE </h2>
<div align="center">
<p>
<img src = "[Link]" alt = "Picture of a Rwanda and maldives" />
</p>
</div>
</body>
</html>
49
OUTPUT
50
Multimedia tag
Embedding multimedia and plug-Ins in a web page
<embed src=“ file name” width=145 height=60>
<noembed>
sorry, your browser doesn’t handle embeds !
</noembed>
</embed>
[Link]
51
EXAMPLE
<html >
<head>
<title> break page</title>
</head>
<body>
<p> <pre>
Mary
had a
little
lamb
</pre>
</p>
<embed src="[Link]" >
<marquee align="top" loop="infinite" behavior="bounce" bgcolor="red" direction="right">
<h2>
here's a marquee!
</h2>
</body>
</html>
52
OUTPUT
53
HEAD SECTION
• style tag (DYNAMIC WEB PAGE)
This tag specifies the style information for
the document.
<style type =“mime_type“>
Example
<style type=“text/css”>
Style statement
…………..style statement
</style>
Sudarsanan D 54
EXAMPLE
<html>
<head>
<title>cascading style sheet</title>
<style type="text/css">
h1{
color:red;
background-color:lightgreen;
border:thin groove;
text-align:center;
}
</style>
</head>
<body>
<h1> ACHARYA INSTITUTE OF TECHNOLOGY</h1>
</body>
</html>
55
OUTPUT
56
HEAD SECTION
• script tag (DYNAMIC WEB PAGE)
•Purpose: scripting languages like javascript
enables web programmer to write small scripts
that execute on the browser. This will make web
page act as dynamic.
<script type=“ text/javascript”>
…………..script code
</script>
57
EXAMPLE
<html>
<head>
<title>
addition of two number
</title>
<script type="text/javascript">
function add()
{
a=prompt("enter the value of a","");
b=prompt("enter the value of b","");
no1=parseInt(a);
no2=parseInt(b);
c= no1+no2;
alert("the sum of two number is ="+ c);
}
</script>
</head>
<body bgcolor="green">
<form>
<input type="button" value="click this button to add the number" onclick="add()"; />
</form>
</body>
</html>
58
OUTPUT
59
OUTPUT
60
OUTPUT
61
OUTPUT
62
XHTML
[Link] must conform to XML rules.
a. Elements must be properly nested.
In HTML, some elements can be improperly
nested within each other like this:
<b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested
within each other like this:
<b><i>This text is bold and italic</i></b>
63
XHTML
b. Documents must be well-formed.
All XHTML elements must be nested within the <html>
root element. All other elements can have sub elements
(children). Sub elements must be in pairs and correctly nested
within their parent element. The basic document structure is:
<html>
<head> . . . </head>
<body> . . . </body>
</html>
64
BASIC TAGS
2. Tag names must be in lowercase.
This is because XHTML documents are XML applications. XML
is case-sensitive. Tags like <br> and <BR> are interpreted as
different
tags.
This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph.</p>
</body>
65
XHTML
[Link] XHTML elements must be closed.
Non-empty elements must have an end tag.
This is wrong:
<p>This is a paragraph.
<li>This is a list item.
This is correct:
<p>This is a paragraph.</p>
<li>This is a list item.</li>
66
BASIC TAGS
4. Empty elements must also be closed.
Empty elements must either have an end tag, or the start tag must end with />.
This is wrong:
This is a line break<br>
Check out this horizontal rule:<hr>
What a cool image! <img src=”[Link]”>
This is correct:
This is a line break<br></br>
Check out this horizontal rule:<hr />
What a cool image! <img src=”[Link]” />
Important Compatibility Note:
To make your XHTML compatible with today’s browsers, you should add
an extra space before the “/” symbol like this: <br /> or this <hr />.
67
XHTML
5. Attribute names must be in lowercase.
This is wrong:
<table WIDTH=”100%”>
<div ALIGN=”center”>
This is correct:
<table width=”100%”>
<div align=”center”>
68
XHTML
6. Attribute values must be in quotes.
This is wrong:
<table width=100%>
<img height=200 width=250>
This is correct:
<table width=”100%”>
<img height=”200” width=”250” />
69
XHTML
7. Attribute minimization is forbidden.
This is wrong:
<input checked>
<option selected>
This is correct:
<input checked=”checked” />
<option selected=”selected” />
70
XHTML
8. The id attribute replaces the name attribute.
HTML 4.01 defines a “name” attribute for the elements an,
applet, frame, iframe, img, and map. In XHTML the “name”
attribute is deprecated.
Use “id” instead.
This is wrong:
<img src=”[Link]” name=”picture1” />
<a name=”namedanchor”></a>
This is correct:
<img src=”[Link]” id=”picture1” />
<a id=”namedanchor”></a>
71
xhtml
[Link] XHTML DTD defines mandatory elements.
All XHTML documents must have a DOCTYPE declaration. The html,
head and body elements must be present, and the title must be present
inside the head element.
This is a minimum XHTML document template:
<!DOCTYPE Doctype goes here>
<html>
<head>
<title>Title goes here</title>
</head>
<body>
Body text goes here
</body>
</html>
Note: the DOCTYPE declaration is not a part of the XHTML document
itself. It is not an XHTML element, and it should not have a closing tag.
72
DOCTYPE declarations (DTDs)
Every XHTML document must begin with one of
the DOCTYPE declarations (DTDs):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"[Link]
73
DOCTYPE declaration, II
The three main DTDs are as follows:
Strict
Use for really clean markup, with no display information
(no font, color, or size information)
Use with CSS (Cascading Style Sheets) if you want to
define how the document should look
Transitional
Use with standard HTML and/or with CSS
Allows deprecated HTML elements
Frameset
Use if your document uses HTML frames
74
XHTML Document Structure
<?xml version= "1.0" encoding= " UTF-8 " ?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN"
"[Link]
< html xmlns = "[Link] >
<head>
…..
</head>
<body>
…..
</body>
</html>
75
XHTML FRAME TAGS
Frame Tags
Function Start Tag Attributes End Tag
Set Frames <frameset> cols="XX/XX%/*" </frameset>
rows="XX/XX%/*"
Frame Definition <frame> src="filename" </frame>
name="framename"
noresize
scroll=auto/yes/no
marginwidth="XX"
marginheight="XX"
76
XHTML
Frames:
Frames provide a pleasing interface which makes your web site easy to
navigate. When we talk about frames actually we are referring to frameset,
which is a special type of web page. The frameset contains a set of
references to HTML files, each of which is displayed inside a separate frame.
There are two tags related to frames i.e., frameset and frame
<frameset cols=” % , %” | rows=” % , %”>……..</frameset>
<frame name=”name” src=”filename” scrolling =” yes” | “no” frame
border =”0”|”1”>
77
XHTML
<html>
<head>
<title> My page </title>
</head>
<frameset rows="25%,50%“ bordercolor=“red”>
<frame name="a" src="[Link]
<frameset cols="25%,50%">
<frame name="b" src="[Link]
<frame name="abc" src="[Link]
</frameset>
</frameset>
</html>
78
OUTPUT
79
THANK YOU
80
FOR FURTHER QUERIES PLEASE CONTACT :
sudarsanan@[Link]
81
HTTP-Hyper Text Transport Protocol
FTP- File Transfer Protocol
Telnet-a remote login to other computers on the internet
WWW –World Wide Web
URL- Uniform Resource Locator
E-mail- A service that helps to send and receive message and to attach file
MIME-Multipurpose Internet Mail Extensions
Internet- the collection of computer and other devices.
82
www- it is collection of software and protocol.
SGML- Standard General Markup Language
CSS – Cascading Style Sheet
XSL- eXtensible Style Langauge
XHTML- eXtensible HyperText Markup Langauge
XML- eXtensible Markup Language
83