WEB PROGRAMMING
Traditional HTML and XHTML
First Look at HTML and XHTML
• In the case of HTML, markup instructions found within a Web page relay the
structure of the document to the browser software. For example, if you want to
emphasize a portion of text, you enclose it within the tags <em> and </em>, as
shown here:
<em>This is important text!</em>
• When a Web browser reads a document that has HTML markup in it, it
determines how to render it onscreen by considering the HTML elements
embedded within the document:
• Under traditional HTML (not XHTML), the close tag for some elements is optional
because their closure can be inferred. For example, a <p> tag cannot enclose
another <p> tag, and thus the closing </p> tag can be inferred when markup like
this is encountered:
<p>This is a paragraph.
<p>This is also a paragraph.
<p>This is a paragraph.</p>
<p>This is also a paragraph.</p>
Hello HTML and XHTML World
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello HTML 4 World</title>
<!-- Simple hello world in HTML 4.01 strict example -->
</head>
<body>
<h1>Welcome to the World of HTML</h1>
<hr>
<p>HTML <em>really</em> isn't so hard!</p>
<p>Soon you will ♥ using HTML.</p>
<p>You can put lots of text here if you want.
We could go on and on with fake text for you
to read, but let's get back to the book.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello HTML5 World</title>
<!-- Simple hello world in HTML5 example -->
</head>
<body>
<h1>Welcome to the Future World of HTML5</h1>
<hr>
<p>HTML5 <em>really</em> isn't so hard!</p>
<p>Soon you will ♥ using HTML.</p>
<p>You can put lots of text here if you want.
We could go on and on with fake text for you
to read, but let's get back to the book.</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello XHTML World</title>
<!-- Simple hello world in XHTML 1.0 strict example -->
</head>
<body>
<h1>Welcome to the World of XHTML</h1>
<hr />
<p>XHTML <em>really</em> isn't so hard either!</p>
<p>Soon you will ♥ using XHTML too.</p>
<p>There are some differences between XHTML
and HTML but with some precise markup you'll
see such differences are easily addressed.</p>
</body>
</html>
The preceding examples use some of the most common elements used in (X)HTML documents,
including:
• The <!DOCTYPE> statement, which indicates the particular version of HTML or XHTML being
used in the document. The first example uses the strict 4.01 specification, the second uses a
reduced form for HTML5 the meaning of which will be explained a bit later on, and the final
example uses the XHTML 1.0 strict specification.
• The <html>, <head>, and <body> tag pairs are used to specify the general structure of the
document. The required inclusion of the xmlns attribute in the <html> tag is a small difference
required by XHTML.
• The <meta> tag used in the examples indicates the MIME type of the document and the character
set in use. Notice that in the XHTML example, the element has a trailing slash to indicate that it
is an empty element.
• The <title> and </title> tag pair specifies the title of the document, which generally appears in the
title bar of the Web browser.
• A comment is specified by <!-- -->, allowing page authors to provide notes for future reference.
• The <h1> and </h1> header tag pair indicates a headline specifying some important information.
• The <hr> tag, which has a self-identifying end tag (<hr />) under XHTML, inserts a horizontal
rule, or bar, across the screen.
• The <p> and </p> paragraph tag pair indicates a paragraph of text.
• A special character is inserted using a named entity (♥), which in this case inserts a heart
dingbat character into the text.
• The <em> and </em> tag pair surrounds a small piece of text to emphasize which a
browser typically renders in italics.
Viewing Markup with a Web Server
HTML and XHTML: Version History
HTML and XHTML DTDs: The
Specifications Up Close
• Document Type Statements and Language Versions
(X)HTML Document Structure
The Document Head
• The title Element
<title>Simple HTML Title Example</title>
• <meta>: Specifying Content Type, Character Set, and More
• A <meta> tag has a number of uses.
• For example, it can be used to specify values that are equivalent to HTTP
response headers.
• For example, if you want to make sure that your MIME type and character set
for an English-based HTML document is set, you could use
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1“>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Page title here</title>
</head>
• Other Elements in the head
• In addition to the title and meta elements, under the HTML 4.01 and XHTML 1.0
strict DTDs, the elements allowed within the head element include base, link,
object, script, and style. Comments are also allowed.
• <base> :A <base> tag specifies an absolute URL address that is used to provide
server and directory information for partially specified URL addresses, called
relative links, used within the document:
<base href="http://htmlref.com/basexeample" >
• <link> A <link> tag specifies a special relationship between the current document
and another document. Most commonly, it is used to specify a style sheet used by
the document.
<link rel="stylesheet" media="screen" href="global.css" type="text/css"
>
• <object> An <object> tag allows programs and other binary objects to be directly
embedded in a Web page.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="0"
height="0" id="HiddenFlash" > <param name="movie" value="flashlib.swf"
/> </object>
• <script> A <script> tag allows scripting language code to be either directly
embedded within,
<script type="text/javascript">
alert("Hi from JavaScript!");
/* more code below */
</script>
<script type="text/javascript" href="ajaxtcr.js"></script>
• <style> A <style> tag is used to enclose document-wide style specifications,
typically in Cascading Style Sheet (CSS) format, relating to fonts, colors,
positioning, and other aspects of content presentation
<style type="text/css" media="screen">
h1 {font-size: xx-large; color: red; font-style: italic;}
/* all h1 elements render as big, red and italic */
</style>
• Comments Finally, comments are often found in the head of a document.
Following SGML syntax, a comment starts with <!-- and ends with --> and may
encompass many lines
<!-- Hi I am a comment -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Head Element</title>
<!-- Some example meta tags -->
<meta name="keywords" content="Fake, Head Example, HTML Ref" />
<meta name="description" content="A simple head example that shows a number
of the elements presented in action." />
<meta name="author" content="Thomas A. Powell" />
<!-- Set a global URI stem for all references -->
<base href="http://htmlref.com/baseexample" />
<!-- Linked and document specific styles -->
<link rel="stylesheet" href="screen.css" media="screen" />
<link rel="stylesheet" href="printer.css" media="print" />
<style type="text/css">
<!--
h1 {font-size: xx-large; color: red; font-style: italic;}
-->
</style>
<!-- Embedded and linked scripts -->
<script type="text/javascript">
<!--
var globalDebug = true;
//-->
</script>
<script src="ajaxtcr.js" type="text/javascript"></script>
<script src="effects.js" type="text/javascript"></script>
</head>
<body>
<p>Some body content here.</p>
</body>
</html>
The Document Body
Browsers and (X)HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello HTML World</title>
<!-- Simple hello world in HTML 4.01 strict example -->
</head>
<body>
<h1>Welcome to the World of HTML</h1>
<hr>
<p>HTML <em>really</em> isn't so hard!</p>
<p>Soon you will ♥ using HTML.</p>
<p>You can put lots of text here if you want.
We could go on and on with fake text for you
to read, but let's get back to the book.</p>
</body>
</html>
<TITLE>Hello HTML World</title>
<!-- Simple hello malformed world -- example -->
</head>
<body>
<h1>Welcome to the World of HTML</H1>
<hr />
<p>HTML <eM>really</Em> isn't so hard!
<P>Soon you will ♥ using HTML.
<p>You can put lots of text here if you want.
We could go on and on with fake text for you
to read, <foo>but</foo> let's get back to the book.
</html>
Validation
• A DTD defines the actual elements, attributes, and element relationships
that are valid in documents.
• Now you can take a document written in (X)HTML and then check
whether it conforms to the rules specified by the DTD used. This process
of checking whether a document conforms to the rules of the DTD is called
validation.
• An easy way to validate a document is simply to use an online service such
as the W3C Markup Validation Service, at http://validator.w3.org. If the
malformed example from the previous section is passed to this service, it
clearly shows that the page has errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fhtmlref.com%2Fch1%2Fmalformedhelloworld.html
The Doctype Switch and Browser
Rendering Modes
• Modern Web browsers generally have two rendering modes: quirks mode
and standards compliance mode.
• quirks mode is more permissive and standards compliance mode is stricter.
The Rules of (X)HTML
• HTML Is Not Case Sensitive, XHTML Is
<B>Go boldly</B>
<B>Go boldly</b>
<b>Go boldly</B>
<b>Go boldly</b>
• Attribute Values May Be Case Sensitive
<img SRC="test.gif"> and <IMG src="test.gif">
<img src="test.gif"> and
<img src="TEST.GIF">
• (X)HTML Is Sensitive to a Single Whitespace Character
• (X)HTML Follows a Content Model
<ul>
<p>What a simple way to break the content model!</p>
</ul>
• Elements Should Have Close Tags Unless Empty
<p>This isn't closed
<p>This is</p>
• Unused Elements May Minimize
<p></p><p></p><p></p>
• Elements Should Nest
<b><i>is in error as tags cross</b></i>
<b><i>is not since tags nest</i></b>
• Attributes Should Be Quoted
<img src=robot.gif height=10 width=10 alt=robot>
<img src="robot.gif" height="10" width="10" alt="robot" />
• Entities Should Be Used for Special Characters
• Browsers Ignore Unknown Attributes and Elements
Major Themes of (X)HTML
• Misconceptions
• WYSIWYG Works on the Web
• HTML Is a Programming Language
• XHTML Is the Only Future
• XHTML Is Dead
• Myths
• Traditional HTML Is Going Away
• Someday Standards Will Alleviate All Our Problems
• Hand-Coding of HTML Will Continue Indefinitely
• (X)HTML Is the Most Important Technology Needed to Create Web Pages
normal tags
Paragraphs: <p></p>
Line Breaks: <br></br>
Preserving White Space: <pre></pre>
Headings:<h1></h1> to <h6></h6>
Block Quotations:<blockquote></blockquote>
Font Styles and Sizes:
• <b>, <i> and <u> specifies bold, italics and underline respectively.
• The emphasis tag, <em>, specifies that its textual content is special and should be
displayed in some
• way that indicates this distinctiveness. Most browsers use italics for such content.
• The strong tag, <strong> is like the emphasis tag, but more so. Browsers often set
the content of
• strong elements in bold.
• The code tag, <code>, is used to specify a monospace font, usually for program
code.
<html>
<head> <title> font styles and sizes </title>
</head>
<body>
<p><pre>
Illustration of Font Styles
<b> This is Bold </b>
<i> This is Italics </i>
<u> This is Underline </u>
<em> This is Emphasis </em>
<strong> This is strong </strong>
<code> Total = Internals + Externals //this is code</code>
</pre></p>
<p><pre>
Illustration of Font Sizes (subscripts and superscripts)
x<sub>2</sub><sup>3</sup> + y<sub>1</sub><sup>2</sup>
</pre></p>
</body>
</html>
• Character Entities:
<html>
<head> <title> Character Entities </title>
</head>
<body>
<p><pre>
Illustration of character entities
if you get > 70%, then you will get FCD
if you get < 35%, then you are Fail
½ of my classmates get very good marks
Now, the temperature in Bangalore is 30° C
</pre></p>
</body>
</html>
• Horizontal Rules:<hr/>
• IMAGES:
<html>
<head>
<title>display image</title>
</head>
<body>
<img src="java.png" alt="cannot display"/>
</body>
</html>
• JPEG - Joint Photographic Experts Group
• GIF -Graphic Interchange Format
• PNG-Portable Network Graphics
• HYPERTEXT LINKS
Links:
<html>
<head>
<title> hyperlink </title>
</head>
<a href = "link.html"> CLICK HERE </a>
</html>
<html>
<body> This is Web Programming </body>
</html>
• Targets within Documents
<html>
<head>
<title> target link</title>
</head>
<body>
<h1> Puneeth Rajkumar </h1>
<a href = "#bottom"> Click Here For His Autobiography </a>
<p><pre>
Appu
Abhi
Veera Kannadiga
Maurya
Akaash
Namma Basava
Ajay
Arasu
Milana
Bindaas
Vamshi
Raaj
Raam
Prithvi
Jackie
Hudugaru
Paramathma
Anna Bond
</pre></p>
<h2> AutoBiography </h2>
<p id = "bottom"> <pre>
Puneeth Rajkumar was born on 17th of March, 1975.
His father Dr. Rajkumar is the Legend of Kannada Film Industry.
His mother is Smt. Parvathamma Rajkumar who is a renowned producer in the industry.
His brothers ShivaRajkumar and RaghavendraRajkumar are very popular heroes.
He is married to Smt. Ashwini Revnath
He has two daughters namely Dhrithi and Vanditha..
At present, Puneeth is the greatest star of Kannada Film Industry.
</pre></p>
</body>
• LISTS
Unordered Lists:<ul></ul>
Ordered Lists:<ol></ol>
Nested Lists
• Tables
A table is a matrix of cells.
Basic Table Tags:
• A table is specified as the content of the block tag <table>.
• There are two kinds of lines in tables: the line around the outside of the
whole table is called the border; the lines that separate the cells from each
other are called rules.
• It can be obtained using border attribute. The possible values are “border” or
any number.
• The table heading can be created using <caption> tag.
• The table row can be created using <tr> tag.
• The column can be created either by using <th> tag (stands for table header
which is suitable for headings) or <td> tag (stands for table data which is
suitable for other data).
<html>
<head>
<title> Table with text and image </title>
</head>
<body>
<table border = "border">
<caption>tiger & flower </caption>
<tr>
<th> name</th>
<th> Image </th>
</tr>
<tr>
<td> tiger</td>
<td> <img src = “tiger.jpg" alt = "cant display"/></td>
</tr>
<tr>
<td> flower</td>
<td> <img src = “flower.jpg" alt = "cant display"/></td>
</tr>
</table>
</body>
</html>
• The rowspan and colspan Attributes:
<html>
<head>
<title>row-span and column-span</title>
</head>
<body>
<p> Illustration of Row span</p>
<table border="border">
<tr>
<th rowspan="2"> PESCE </th>
<th>ISE</th>
</tr>
<tr>
<th>CSE</th>
</tr>
</table>
<p> Illustration of Column span</p>
<table border="border">
<tr>
<th colspan="2"> PESCE </th>
</tr>
<tr>
<th>ISE</th>
<th>CSE</th>
</tr>
</table>
</body>
</html>
• The align and valign Attributes:
<html>
<head>
<title> Align and valign </title>
</head>
<body>
<p>Table having entries with different alignments</p>
<table border="border">
<tr align = "center">
<th> </th>
<th> shashi </th>
<th> Raju</th>
<th> thimma </th>
</tr>
<tr>
<th> shakthi </th>
<td align = "left"> shanthi </td>
<td align = "center"> sudha </td>
<td align = "right"> somu </td>
</tr>
<tr>
<th> <br/>rani <br/><br/><br/></th>
<td> Appu </td>
<td valign = "top"> hari </td>
<td valign = "bottom"> prasad </td>
</tr>
</table>
</body>
</html>
• The cellpadding and cellspacing Attributes
• Cellspacing is the distance between cells.
• Cellpadding is the distance between the edges of the cell to its content.
<html>
<head>
<title> cell spacing and cell padding </title>
</head>
<body>
<h3>Table with space = 10, pad = 50</h3>
<table border = "7" cellspacing = "10" cellpadding = "50">
<tr>
<td> Divya </td>
<td>Chethan </td>
</tr>
</table>
<h3>Table with space = 50, pad = 10</h3>
<table border = "7" cellspacing = "50" cellpadding = "10">
<tr>
<td> Divya </td>
<td>Chethan </td>
</tr>
</table>
</body>
</html>
• FORMS
The <form> Tag:
The <input> Tag:
• Text Box
<html>
<head>
<title>Text Box</title>
</head>
<body>
<form action = " ">
<p>
<label>Enter your Name:
<input type = "text" name = "myname" size = "10" maxlength = "20" />
</label>
</p>
</form>
</body>
</html>
• Password Box
<html>
<head>
<title>Password Box</title>
</head>
<body>
<form action = " ">
<p>
<label>Enter the email id:
<input type = "text" name = "myname" size = "24" maxlength = "25" />
</label>
</p>
<p>
<label>Enter the password:
<input type = "password" name = "mypass" size = "20" maxlength = "20" />
</label>
</p>
</form>
</body>
</html>
• Radio Button
<html>
<head>
<title>Radio Button</title>
</head>
<body>
<h3>Which is ur department?</h3>
<form action = " ">
<p>
<label><input type="radio" name="dept" value="one"/>ISE</label>
<label><input type="radio" name="dept" value="two"/>CSE</label>
<label><input type="radio" name="dept" value="three"/>ECE</label>
<label><input type="radio" name="dept" value="four"/>CE</label>
</p>
</form>
</body>
</html>
• Check Box
<head>
<title>Check Box</title>
</head>
<body>
<h3>Who is your Favourite food?</h3>
<form action = " ">
<p>
<label><input type="checkbox" name="food" value="one"/>chapathi</label>
<label><input type="checkbox" name="food" value="two"/>dosa</label>
<label><input type="checkbox" name="food" value="three"/>pongal</label>
<label><input type="checkbox" name="food" value="four"/>idly</label>
<label><input type="checkbox" name="food" value="four"/>rice bath</label>
</p>
</form>
</body>
</html>
• The <select> Tag:
<html
<head> <title> Menu </title>
</head>
<body>
<p>
PESCE Branches - Information Science, Computer Science, Electronics, Electrical, Mechanical
</p>
<form action = "">
<p>
With size = 1 (the default)
<select name = "branches">
<option> Information Science </option>
<option> Computer Science </option>
<option> Electronics </option>
<option> Electrical </option>
<option> Mechanical </option>
</select>
</p>
</form>
</body>
</html>
• The <textarea> Tag:
<html>
<head>
<title> text area </title>
</head>
<body>
<form action=" ">
<h3> Enter your comments</h3>
<p>
<textarea name="feedback" rows="5" cols="100">
</textarea>
</p>
</form>
</body>
</html>
• The Action Buttons:
<html>
<head>
<title> action buttons </title>
</head>
<body>
<form action=" ">
<p>
<input type="SUBMIT" value="SUBMIT"/>
<input type="RESET" value="RESET"/>
</p>
</form>
</body>
</html>
<html>
<head>
<title> CompleteForm</title>
</head>
<body>
<h1>Registration Form</h1>
<form action=" ">
<p>
<label>Enter your email id:
<input type = "text" name = "myname" size = "24" maxlength = "25" />
</label>
</p>
<p>
<label>Enter the password:
<input type = "password" name = "mypass" size = "20" maxlength = "20" />
</label>
</p>
<p>Sex</p>
<p>
<label><input type="radio" name="act" value="one"/>Male</label>
<label><input type="radio" name="act" value="two"/>Female</label>
</p>
<p>Which of the following Accounts do you have?</p>
<p>
<label><input type="checkbox" name="act" value="one"/>Gmail</label>
<label><input type="checkbox" name="act" value="two"/>Facebook</label>
<label><input type="checkbox" name="act" value="three"/>Twitter</label>
<label><input type="checkbox" name="act" value="four"/>Google+</label>
</p>
<p> Any Suggestions?</p>
<p>
<textarea name="feedback" rows="5" cols="100">
</textarea>
</p>
<p>Click on Submit if you want to register</p>
<p>
<input type="SUBMIT" value="SUBMIT"/>
<input type="RESET" value="RESET"/>
</p>
</form>
</body>
</html>
