Scribd
Upload
3 views47 pages

WD Unit 2

The document provides an overview of HTML and XHTML, highlighting their differences, syntax rules, and document structure. It includes detailed explanations of basic syntax, text markup, headings, font styles, character entities, images, and hyperlinks. Additionally, it offers guidance on XHTML document validation and the use of meta elements for document categorization.

Uploaded by

yallappabelgaonkar16
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views47 pages

WD Unit 2

The document provides an overview of HTML and XHTML, highlighting their differences, syntax rules, and document structure. It includes detailed explanations of basic syntax, text markup, headings, font styles, character entities, images, and hyperlinks. Additionally, it offers guidance on XHTML document validation and the use of meta elements for document categorization.

Uploaded by

yallappabelgaonkar16
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

WD PROGRAMMING THE WEBNOTES

ORIGINS AND EVOLUTION OF HTML AND XHTML


HTML Hyper Text Mark-up Language
XHTML eXtensible Hyper Text Mark-up Language
HTML XHTML
HTML is much easier to write XHTML requires a level of discipline many of us
naturally resist
huge number of HTML documents available on the some older browsers have problems with some parts
Web, browsers will continue to support HTML as far of XHTML.
as one can see into the future.
HTML has few syntactic rules, and HTML processors XHTML has strict syntactic rules that impose a
(e.g., browsers) do not enforce the rules it does have. consistent structure on all XHTML documents.
Therefore, HTML authors have a high degree of Another significant reason for using XHTML is that
freedom to use their own syntactic preferences to when you create an XHTML document, its syntactic
create documents. Because of this freedom, HTML correctness can be checked, either by an XML browser
documents lack consistency, both in low-level syntax or by a validationtool
and in overall structure.
Used for displaying the data Used for describing the data

BASIC SYNTAX
 The fundamental syntactic units of HTML are called tags.
 In general, tags are used to specify categories of content.
 The syntax of a tag is the tag’s name surrounded by angle brackets (<and>).
 Tag names must be written in all lowercase letters.
 Most tags appear in pairs: an opening tag and a closing tag.
 The name of a closing tag is the name of its corresponding opening tag with a slash attached to the
beginning. For example, if the tag’s name is p, the corresponding closing tag is named/p.
 Whatever appears between a tag and its closing tag is the content of the tag. Not all tags can have
content.
 The opening tag and its closing tag together specify a container for the content the enclose.
 The container and its content together are called an element.
 Example: <p> This is RNSIT Web Programming Notes.</p>
 The paragraph tag, <p>, marks the beginning of the content; the </p>tag marks the end of the content
of the paragraph element.
 Attributes, which are used to specify alternative meanings of a tag, can appear between an opening tag’s
name and its right angle bracket.
 They are specified in keyword form, which means that the attribute’s name is followed by an equal’s
sign and the attribute’s value.
 Attribute names, like tag names, are written in lowercase letters.
 Attribute values must be delimited by double quotes.
 Comments in programs increase the readability of those programs. Comments in XHTML have the same
purpose. They can appear in XHTML in the following form:
<!-- anything except two adjacent dashes -->
 Browsers ignore XHTML comments—they are for people only. Comments can be spread over as many
lines as are needed. For example, you could have the following comment:
<!--[Link]
This notes is prepared by Divya K of Information Science Department
RNSIT, Bangalore-->
WD PROGRAMMING THE WEBNOTES

Standard XHTML Document Structure


 Every XHTML document must begin with an xml declaration element that simply identifies the
document as being one based on XML. This element includes an attribute that specifies the version
number 1.0.
 The xml declaration usually includes a second attribute, encoding, which specifies the encoding used for
the document[utf-8].
 Following is the xml declaration element, which should be the first line of every XHTML document:
<?xml version = "1.0" encoding = "utf-8"?>
 Note that this declaration must begin in the first character position of the document file.
 The xml declaration element is followed immediately by an SGML DOCTYPE command, which specifies
the particular SGML document-type definition (DTD) with which the document complies, among other
things.
 The following command states that the document in which it is included complies with the XHTML 1.0
Strict standard:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
 An XHTML document must include the four tags <html>, <head>, <title>, and<body>.
 The <html> tag identifies the root element of the document. So, XHTML documents always havean
<html> tag immediately following the DOCTYPE command, and they always end with the closing html
tag, </html>.
 The html element includes an attribute, xmlns, that specifies the XHTML namespace, as shown in the
following element:
<html xmlns = "[Link]
 Although the xmlns attribute’s value looks like a URL, it does not specify a document. It is just a name
that happens to have the form of a URL.
 An XHTML document consists of two parts, named the head and the body.
 The <head> element contains the head part of the document, which provides information about the
document and does not provide the content of the document.
 The body of a document provides the content of the document.
 The content of the title element is displayed by the browser at the top of its display window, usually in
the browser window’s title bar.

BASIC TEXT MARKUP


We will have a look at a complete XHTML document:
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
<!-- [Link]
A document which must be followed throughout the notes
-->
<html xmlns = "[Link]
<head>
<title> My first program </title>
</head>
<body>
<p>
My Dear VTU Friends, All The Best..!! Have a Happy Reading of my notes..!!
</p>
</body>
</html>
WD PROGRAMMING THE WEBNOTES

PLEASE NOTE: From here onwards programming in XHTML will begin. Please add the following
compulsory document structure to all programs in the first 4 lines and skip the simple <html> tag of
first line because I have begun the coding part directly.
<?xml version = "1.0" encoding ="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
<html xmlns = "[Link]

Paragraphs:
It begins with <p> and ends with </p>. Multiple paragraphs may appear in a single document.
<html>
<head>
<title> Paragraph </title>
</head>
<body>
<p> Paragraph 1</p>
<p> Paragraph 2</p>
<p> Paragraph 3</p>
</body>
</html>

Line Breaks:
The break tag is specified as <br />. The slash indicates that the tag is both an opening and closing tag.
<html>
<head>
<title> br tag </title>
</head>
<body>
<p>
My Name is DIVYA K <br/>
I am from ISE Department<br/>
RNSIT, Bangalore
</p>
</body>
</html>
WD PROGRAMMING THE WEBNOTES

Preserving White Space


Sometimes it is desirable to preserve the white space in text—that is, to prevent the browser from eliminating
multiple spaces and ignoring embedded line breaks. This can be specified with the <pre>tag.
<html>
<head>
<title> Pre Tag </title>
</head>
<body>
<p><pre> My Name is DIVYA K
I am from ISE Department
RNSIT, Bangalore
</pre></p>
</body>
</html>

Headings:
In XHTML, there are six levels of headings, specified by the tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>,
where <h1>specifies the highest-level heading. Headings are usually displayed in a boldface font whose default
size depends on the number in the heading tag. On most browsers, <h1>, <h2>, and <h3>use font sizes that
are larger than that of the default size of text, <h4>uses the default size, and <h5>and <h6>use smaller sizes.
The heading tags always break the current line, so their content always appears on a new line. Browsers usually
insert some vertical space before and after all headings.
<html>
<head>
<title> Headings </title>
</head>
<body>
<h1> Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<h4> Heading 4</h4>
<h5> Heading 5</h5>
<h6> Heading 6</h6>
</body>
</html>
WD PROGRAMMING THE WEBNOTES

Block Quotations:
The <blockquote> tag is used to make the contents look different from the surrounding text.
<html>
<head><title> Blockquotes </title>
</head>
<body>
<p> Swami Vivekananda says </p>
<blockquote>
<p> "Arise..!! Awake..!!" </p>
</blockquote>
<p> He is my Role model </p>
</body>
</html>

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
WD PROGRAMMING THE WEBNOTES
<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:
XHTML provides a collection of special characters that are sometimes needed in a document but cannot be
typed as themselves. In some cases, these characters are used in XHTML in some special way—for example, >,
<, and &. In other cases, the characters do not appear on keyboards, such as the small raised circle that
represents “degrees” in a reference to temperature. These special characters are defined as entities, which are
codes for the characters. An entity in a document is replaced by its associated character by the browser.
<html>
<head><title> Character Entities </title>
</head>
<body>
<p><pre>
Illustration of character entities
if you get &gt 70%, then you will get FCD
if you get &lt 35%, then you are Fail
&frac12 of my classmates get very good marks
Now, the temperature in Bangalore is 30&deg C
</pre></p>
</body>
</html>
WD PROGRAMMING THE WEBNOTES

Horizontal Rules:
The parts of a document can be separated from each other, making the document easier to read, by placing
horizontal lines between them. Such lines are called horizontal rules. The block tag that creates them is <hr />.
The <hr /> tag causes a line break (ending the current line) and places a line across the screen.
Note again the slash in the <hr /> tag, indicating that this tag has no content and no closing tag.
<html>
<head>
<title> Horizontal Rule </title>
</head>
<body>
<p>
RNSIT was established in the year 2001 <hr/>
It was founded by our Chairman Dr. R N Shetty <hr/>
Dr. H N Shivshankar is our Director<hr/>
Dr. M K Venkatesha is our Principal<hr/>
</p>
</body>
</html>

The meta Element:


The meta element is used to provide additional information about a document. The meta tag has no content;
rather, all of the information provided is specified with attributes. The two attributes that are used to provide
information are name and content. The user makes up a name as the value of the name attribute and
specifies information through the content attribute. One commonly chosen name is keywords; the value of
the content attribute associated with the keywords are those which the author of a document believes
characterizes his or her document. An example is
<meta name = "Title" content = "Programming the Web" />
<meta name = "Author" content = "Divya K" />
Web search engines use the information provided with the meta element to categorize Web documents in
their indices.
WD PROGRAMMING THE WEBNOTES

IMAGES
 Image can be displayed on the web page using <img>tag.
 When the <img> tag is used, it should also be mentioned which image needs to be displayed. This is
done using src attribute.
 Attribute means extra information given to the browser
 Whenever <img> tag is used, alt attribute is also used.
 Alt stands for alert.
 Some very old browsers would not be having the capacity to display the images.
 In this case, whatever is the message given to alt attribute, that would be displayed.
 Another use of alt is when image display option has been disabled by user. The option is normally
disabled when the size of the image is huge and takes time for downloading.
<html>
<head>
<title>display image</title>
</head>
<body>
<img src="[Link]" alt="cannot display"/>
</body>
</html>

NOTE:
 JPEG Joint Photographic ExpertsGroup
 GIF Graphic InterchangeFormat
 PNG Portable NetworkGraphics

XHTML Document Validation:


The W3C provides a convenient Web-based way to validate XHTML documents against its standards.
Step 1: The URL of the service is [Link] Copy & paste this link.
Step 2: You will be driven to “Validate by File Upload” option automatically.
Step 3: Browse for a XHTML program file in your computer. (example: F:/[Link])
Step 4: Click on “More Options” and select your criteria like show source
Step 5: After all the settings, click on “Check” button

Now you will be navigated to another page which shows success or failure.
In our example, the file [Link] is a valid XHTML file. So the output shows success..!!
WD PROGRAMMING THE WEBNOTES

Output:
WD PROGRAMMING THE WEBNOTES

HYPERTEXT LINKS

Links:
 Hyperlinks are the mechanism which allows the navigation from one page to another.
 The term “hyper” means beyond and “link” means connection
 Whichever text helps in navigation is called hypertext
 Hyperlinks cam be created using <a>(anchor tag)
 The attribute that should be used for <a> is href
Program: [Link]
<html>
<head>
<title> hyperlink </title>
</head>
<a href = "[Link]"> CLICK HERE </a>
</html>

Program: [Link]
<html>
<body> This is Web Programming </body>
</html>
Now, execute “[Link]” file, you willget

After clicking on the above text, we can navigate to another page “[Link]” as shown below

Targets within Documents:


If the target of a link is not at the beginning of a document, it must be some element within the document, in
which case there must be some means of specifying it. The target element can include an id attribute, which can
then be used to identify it in an href attribute. (observe the scroll bar in the outputs given)
<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
WD PROGRAMMING THE WEBNOTES
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>
</html>

Actually, here we are not creating two separate files, but we are specifying a target within the same document
itself. If you click on the above link, you will be redirected to the bottom of the page which contains
Autobiography of Puneeth Rajkumar. This is useful for lengthy documents like e-newspaper, e-magazine etc.,
WD PROGRAMMING THE WEBNOTES

LISTS

Unordered Lists:
The <ul>tag, which is a block tag, creates an unordered list. Each item in a list is specified with an <li>tag (li is
an acronym for list item). Any tags can appear in a list item, including nested lists. When displayed, each list
item is implicitly preceded by a bullet.
<html>
<head>
<title> Unordered List </title>
</head>
<body>
<h1> Heroines acted with Puneeth Rajkumar </h1>
<ul>
<li>Rakshitha</li>
<li>Ramya</li>
<li>Nathasha</li>
<li>Meera Jasmine</li>
<li>Anuradha Mehtha</li>
<li>Parvathi Menon</li>
<li>Hansika</li>
<li>Nikitha</li>
<li>Nisha Kothari</li>
<li>Priya Mani</li>
<li>Bhavana Menon</li>
<li>RadhikaPandit</li>
<li>DeepaSannidhi</li>
</ul>
</body>
</html>
WD PROGRAMMING THE WEBNOTES

Ordered Lists:
Ordered lists are lists in which the order of items is important. This orderedness of a list is shown in the display
of the list by the implicit attachment of a sequential value to the beginning of each item. The default sequential
values are Arabic numerals, beginning with 1.
An ordered list is created within the block tag <ol>. The items are specified and displayed just as are those in
unordered lists, except that the items in an ordered list are preceded by sequential values instead of bullets.
<html>
<head>
<title> ordered List </title>
</head>
<body>
<h1>Chicken Masala</h1>
<ol>
<li>For 1 kg of chicken, add 20g Teju Chicken Masala</li>
<li>Fry 2 big onions with 3tbsp ghee/oil till golden brown</li>
<li>Add 2 tomato, 1tsp ginger garlic paste, 2-3 green chillies and fry</li>
<li>When tomato becomes soft, add chicken and 100ml water</li>
<li>Add 25g coriander leaves and cook till the chicken is soft and gravy turns thick</li>
<li>Ready to serve</li>
</ol>
</body>
</html>
WD PROGRAMMING THE WEBNOTES
Nested Lists:
<html>
<head>
<title> nested lists </title>
</head>
<ol>
<li> Information Science </li>
<ol>
<li>OOMD</li>
<li>Java & J2ee</li>
<ul>
<li>classes and methods</li>
<li>exceptions</li>
<li>applets</li>
<li>servelets</li>
</ul>
<li>Computer Networks</li>
<ul>
<li>Part1</li>
<li>Part2</li>
</ul>
<li>DBMS</li>
<li>Operations Research</li>
</ol>
<li> Computer Science</li>
<ol>
<li>Compiler Design</li>
<li>FLAT</li>
<ul>
<li>NFA</li>
<li>DFA</li>
<li>CFG</li>
</ul>
<li>Computer Graphics</li>
<li>Artificial Intelligence</li>
</ol>
</ol>
</html>
WD PROGRAMMING THE WEBNOTES

Definition Lists:
As the name implies, definition lists are used to specify lists of terms and their definitions, as in glossaries. A
definition list is given as the content of a <dl>tag, which is a block tag. Each term to be defined in the definition
list is given as the content of a <dt>tag. The definitions themselves are specified as the content of <dd>tags. The
defined terms of a definition list are usually displayed in the left margin; the definitions are usually shown
indented on the line or lines following the term.
<html>
<head>
<title> Definition List </title>
</head>
<body>
<h1> South Indian Film Heroes </h1>
<dl>
<dt> Puneeth Rajkumar </dt>
<dd>Top in Kannada Film Industry</dd>
<dt> Mahesh Babu </dt>
<dd>Top in Telugu Film Industry</dd>
<dt> Suriya </dt>
<dd>Top in Tamil Film Industry</dd>
</dl>
</body>
</html>

TABLES
A table is a matrix of cells. The cells in the top row often contain column labels, those in the leftmost column
often contain row labels, and most of the rest of the cells contain the data of the table. The content of a cell can
be almost any document element, including text, a heading, a horizontal rule, an image, and a nested table.

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 otherdata).
<html>
<head>
<title> Table with text and image </title>
WD PROGRAMMING THE WEBNOTES
</head>
<body>
<table border = "border">
<caption>PARAMATHMA Movie Details </caption>
<tr>
<th> Cast</th>
<th> Image </th>
</tr>
<tr>
<td> Puneeth Rajkumar </td>
<td><img src = "[Link]" alt = "cant display"/></td>
</tr>
<tr>
<td> Deepa Sannidhi</td>
<td><img src = "[Link]" alt = "cant display"/></td>
</tr>
</table>
</body>
</html>

The rowspan and colspan Attributes:


Multiple-level labels can be specified with 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>
WD PROGRAMMING THE WEBNOTES
<th rowspan="2"> RNSIT </th>
<th>ISE</th>
</tr>
<tr>
<th>CSE</th>
</tr>
</table>
<p> Illustration of Column span</p>
<table border="border">
<tr>
<th colspan="2"> RNSIT </th>
</tr>
<tr>
<th>ISE</th>
<th>CSE</th>
</tr>
</table>
</body>
</html>

The align and valign Attributes:


The placement of the content within a table cell can be specified with the align and valign attributes in the <tr>,
<th>, and <td>tags.
The align attribute has the possible values left, right, and center, with the obvious meanings for horizontal
placement of the content within a cell. The default alignment for th cells is center; for td cells, it is left.
The valign attribute of the <th>and <td>tags has the possible values top and bottom. The default vertical
alignment for both headings and data is center.
<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> Puneeth Rajkumar </th>
<th> Darshan Thoogudeep</th>
<th> Kichcha Sudeep </th>
WD PROGRAMMING THE WEBNOTES
</tr>
<tr>
<th> Ramya </th>
<td align = "left"> Akaash </td>
<td align = "center"> Datta </td>
<td align = "right"> Ranga </td>
</tr>
<tr>
<th><br/>Rakshitha <br/><br/><br/></th>
<td> Appu </td>
<td valign = "top"> Kalasipalya </td>
<td valign = "bottom"> Kaashi from village </td>
</tr>
</table>
</body>
</html>

The cell padding and cell spacing Attributes:


Cells pacing is the distance between cells.
Cell padding 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>
WD PROGRAMMING THE WEBNOTES

Table Sections:
Tables naturally occur in two and sometimes three parts: header, body, and footer. (Not all tables have a
natural footer.) These three parts can be respectively denoted in XHTML with the thead, tbody, and tfoot
elements. The header includes the column labels, regardless of the number of levels in those labels. The body
includes the data of the table, including the row labels. The footer, when it appears, sometimes has the column
labels repeated after the body. In some tables, the footer contains totals for the columns of data above. A table
can have multiple body sections, in which case the browser may delimit them with horizontal lines that are
thicker than the rule lines within a body section.

FORMS
The most common way for a user to communicate information from a Web browser to the server is through a
form. XHTML provides tags to generate the commonly used objects on a screen form. These objects are called
controls or widgets. There are controls for single-line and multiple-line text collection, checkboxes, radio
buttons, and menus, among others. All control tags are inline tags.

The <form> Tag:


All of the controls of a form appear in the content of a <form>tag. A block tag, <form>, can have several different
attributes, only one of which, action, is required. The action attribute specifies the URL of the application on the
Web server that is to be called when the user clicks the Submit button. Our examples of form elements will not
have corresponding application programs, so the value of their action attributes will be the empty string("").

The <input> Tag:


Many of the commonly used controls are specified with the inline tag <input>, including those for text,
passwords, checkboxes, radio buttons, and the action buttons Reset, Submit, and plain.

 Text Box
 It is a type of input which takes the text.
 Any type of input can be created using<input>
 The type attribute indicates what type of input is needed for the text box, the value should be given as
text.
 For any type of input, a name has to be provided which is done using name attribute.
 The size of the text can be controlled using size attribute.
 Every browser has a limit on the number of characters it can collect. If this limit is exceeded, the extra
characters are chopped off. To prevent this chopping, maxlength attribute can be used. When maxlength
is used, users can enter only those many characters that is given as a value to the attribute.
<html>
<head>
WD PROGRAMMING THE WEBNOTES
<title>Text Box</title>
</head>
<body>
<form action = " ">
<p>
<label>Enter your Name:
<input type = "text" name = "myname" size = "20" maxlength = "20" />
</label>
</p>
</form>
</body>
</html>

 Password Box
 If the contents of a text box should not be displayed when they are entered by the user, a password
control can be used.
 In this case, regardless of what characters are typed into the password control, only bullets or asterisks
are displayed by the browser.
<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>
WD PROGRAMMING THE WEBNOTES
 Radio Button
 Radio buttons are special type of buttons which allows the user to select only individual option
 Radio buttons are created using the input tag with the type attribute having the value radio.
 When radio buttons are created, values must be provided with the help of value attribute.
 All the radio buttons which are created would have same name. This is because the radio buttons are
group elements.
 If one of the radio buttons has to be selected as soon as the web page is loaded, checked attribute
should be used. The value also would be checked.
<html>
<head>
<title>Radio Button</title>
</head>
<body>
<h3>Who is your Favourite Actor?</h3>
<form action = " ">
<p>
<label><input type="radio" name="act" value="one"/>Puneeth Rajkumar</label>

<label><input type="radio" name="act" value="two"/>Sudeep</label>

<label><input type="radio" name="act" value="three"/>Darshan</label>

<label><input type="radio" name="act" value="four"/>ShivaRajkumar</label>


</p>
</form>
</body>
</html>

 Check Box
 Check box is a type of input using which multiple options can be selected.
 Check box can also be created using the <input> tag with the type having the value “checkbox”.
 During the creation of check box, the value should be provided using the value attribute.
 All the checkbox which are created would have the same name because they are group elements.
 If one of the check box have to be selected as soon as the page is loaded, checked attribute should be
used with the value checked.
<html>
<head>
<title>Check Box</title>
</head>
<body>
<h3>Who is your Favourite Actress?</h3>
<form action = " ">
<p>
<label><input type="checkbox" name="act" value="one"/>Ragini</label>

<label><input type="checkbox" name="act" value="two"/>Ramya</label>


WD PROGRAMMING THE WEBNOTES
<label><input type="checkbox" name="act" value="three"/>Aindritha</label>

<label><input type="checkbox" name="act" value="four"/>Radhika</label>

<label><input type="checkbox" name="act" value="four"/>Rakshitha</label>


</p>
</form>
</body>
</html>

The <select> Tag:


 Menu items is another type of input that can be created on the page.
 To create the menu item, <select> tag is used.
 To insert the item in the menu, <option> tag is used.
<html
<head><title> Menu </title>
</head>
<body>
<p>
RNSIT 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>

If you give <select name = "branches" size = “3”>, then you will get a scroll bar instead of drop down menu.
It is as shown in the output given below:
WD PROGRAMMING THE WEBNOTES

The <textarea> Tag:


 Text area is a type of input using which multiple statements can be entered.
 Text area is created using <text area>tag.
 Text area should have the name.
 During the creation of text area, it should be mentioned how many sentences can be entered. This is
done using rows attribute.
 Similarly,[Link]
cols attribute.
 [Link],thescrollbar
automatically appears.
<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>
WD PROGRAMMING THE WEBNOTES

The Action Buttons:


The Reset button clears all of the controls in the form to their initial states. The Submit button has two actions:
First, the form data is encoded and sent to the server; second, the server is requested to execute the server-
resident program specified in the action attribute of the <form>tag. The purpose of such a server-resident
program is to process the form data and return some response to the user. Every form requires a Submit
button. The Submit and Reset buttons are created with the <input>tag.
<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>

NOTE: A plain button has the type button. Plain buttons are used to choose an action.

Example of a Complete Form:


<html>
<head>
<title> Complete Form</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>
WD PROGRAMMING THE WEBNOTES
<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>

FRAMES
The browser window can be used to display more than one document at a time. The window can be divided
into rectangular areas, each of which is a frame. Each frame is capable of displaying its own document.

Framesets:
 The number of frames and their layout in the browser window are specified with the <frameset>tag.
 A frameset element takes the place of the body element in a document. A document has either a body or
a frameset but cannot have both.
 The <frameset> tag must have either a rows or a cols attribute. (or both)
 To create horizontal frames, rows attribute is used.
 To create vertical frames, cols attribute is used.
 The values for these attributes can be numbers, percentages and asterisks.
WD PROGRAMMING THE WEBNOTES
 Two or more values are separated by commas & given in quotedstring.
To Demonstrate Horizontal Frames
using rows Attribute
<html>
<head>
<title>Frameset Rows</title>
</head>
<frameset rows = "*,*">
<frame src ="[Link]"/>
<frame src ="[Link]"/>
</frameset>
</html>

To Demonstrate Vertical Frames using


cols Attribute
<html>
<head>
<title>Frameset Cols</title>
</head>
<frameset cols = "25%,25%,25%,25%">
<frame src ="[Link]"/>
<frame src ="[Link]"/>
<frame src ="[Link]"/>
<frame src ="[Link]"/>
</frameset>
</html>

Note: Here, the programs [Link], [Link], [Link], [Link], [Link], [Link] are
programs to display images. They must be coded separately.
<html> <html> <html>
<head> <head> <head>
<title>frame row 1</title> <title>frame col 1</title> <title>frame col 3</title>
</head> </head> </head>
<body> <body> <body>
<img src="[Link]" alt="cannot display"/> <img src="[Link]" alt="cannot display"/> <img src="[Link]" alt="cannot display"/>
</body> </body> </body>
</html> </html> </html>
<html> <html> <html>
<head> <head> <head>
<title>frame row 2</title> <title>frame col 2</title> <title>frame col 4</title>
</head> </head> </head>
<body> <body> <body>
<img src="[Link]" alt="cannot display"/> <img src="[Link]" alt="cannot display"/> <img src="[Link]" alt="cannot display"/>
</body> </body> </body>
</html> </html> </html>

<html>
<head>
<title>Frameset Rows and cols</title>
</head>
<frameset rows = "50,50" cols = "*,*,*">
<frame src = "[Link]"/>
<frame src = "[Link]"/>
<frame src ="[Link]"/>
<frame src ="[Link]"/>
<frame src ="[Link]"/>
<frame src ="[Link]"/>
</frameset>
</html>
WD PROGRAMMING THE WEBNOTES
Create two frames vertically on the browser window: the first frame should occupy 20% and the next
frame should occupy 80%. In the first frame, display a document which consists of hyperlinks. When
the hyperlinks are clicked, Image should be displayed on the secondframe.
[Link]
<html> [Link]
<head> <html>
<title>Frames</title> <head>
</head> <title>PRImage</title>
<frameset cols = "20%,80%"> </head>
<frame src = "[Link]"/> <body>
<frame name = "description"/> <img src="[Link]" alt="cannot display"/>
</frameset> </body>
</html> </html>

[Link]
<html> [Link]
<head> <html>
<title>Frames Target</title> <head>
</head> <title>MBImage</title>
<body> </head>
<h2>KINGS OF</h2> <body>
<h3> <img src="[Link]" alt="cannot display"/>
<a href="[Link]" target = "description"> </body>
SANDALWOOD</a> </html>
</h3>
<h3>
<a href="[Link]" target = "description"> [Link]
TOLLYWOOD</a> <html>
</h3> <head>
<h3> <title>SImage</title>
<a href="[Link]" target = "description"> </head>
KOLLYWOOD</a> <body>
</h3> <img src="[Link]" alt="cannot display"/>
</body> </body>
</html> </html>

You get this if


you click on
Sandalwood
RNSIT PROGRAMMING THE WEB NOTES

You get this if


you click on
Tollywood

You get this if


you click on
Kollywood

SYNTACTIC DI FFERENCES BETWEEN HTML ANDXHTML


PARAMETERS HTML XHTML
Case Sensitivity Tags and attributes names are case insensitive Tags and attributes names must be in
lowercase
Closing tags Closing tags may be omitted All elements must have closing tag
Quoted attribute Special characters are quoted. Numeric values All attribute values must be quoted
values are rarely quoted. including numbers
Explicit attribute Some attribute values are implicit. For All attribute values must be explicitly
values example: <table border>. A default valuefor stated
border is assumed
id and name Both id and name attributes are encouraged Use of id is encouraged and use of name is
attributes discouraged
Element nesting Rules against improper nesting of elements All nesting rules are strictly enforced
(for example: a form element cannot contain
another form element) are not enforced.

Prepared By:DIVYA K [1RN09IS016] Page 35


WD PROGRAMMING THE WEBNOTES

CASCADING STYLE SHEETS

INTRODUCTION
XHTML style sheets are called cascading style sheets because they can be defined at three different levels to
specify the style of a document. Lower level style sheets can override higher level style sheets, so the style of
the content of a tag is determined, in effect, through a cascade of style-sheet applications.

LEVELS OF STYLE SHEETS


 The three levels of style sheets, in order from lowest level to highest level, are inline, document level,
and external.
 Inline style sheets apply to the content of a single XHTML element.
 Document-level style sheets apply to the whole body of a document.
 External style sheets can apply to the bodies of any number of documents.
 Inline style sheets have precedence over document style sheets, which have precedence over external
style sheets.
 Inline style specifications appear within the opening tag and apply only to the content of that tag.
 Document-level style specifications appear in the document head section and apply to the entire body
of the document.
 External style sheets stored separately and are referenced in all documents that use them.
 External style sheets are written as text files with the MIME type text/css.
 They can be stored on any computer on the Web. The browser fetches external style sheets just as it
fetches documents.
 The <link>tag is used to specify external style sheets. Within <link>, the rel attribute is used to
specify the relationship of the linked-to document to the document in which the link appears. The href
attribute of <link>is used to specify the URL of the style sheet document.
EXAMPLE WHICH USES EXTERNAL STYLE SHEET [Link]
<html> h1
<head> {
<title>Sample CSS</title> font-family: 'LucidaHandwriting';
<link rel = "stylesheet" type = "text/css" font-size:50pt;
href = "[Link]" /> color: Red;
</head> }
<h1>Puneeth Rajkumar</h1>
</html>

EXAMPLE WHICH USES DOCUMENT LEVEL STYLE SHEET


<html>
<head>
<title>Sample CSS</title>
WD PROGRAMMING THE WEBNOTES
<style type = "text/css">
h1
{
font-family: 'LucidaHandwriting';
font-size:50pt;
color:Red;
}
</style>
</head>
<h1>Puneeth Rajkumar</h1>
</html>

EXAMPLE WHICH USES INLINE STYLE SHEET


<html>
<head>
<title>Sample CSS</title>
</head>
<h1 style ="font-family: 'Lucida Handwriting'; font-size: 50pt; color: Red;">
Puneeth Rajkumar </h1>
</html>

STYLE SPECIFICATION FORMATS

Inline Style Specification:


Style = “Property1:Value1; Property2:Value2; Property3:Value3; ..................... Property_n :Value_n;”

Document Style Specification:


<style type = “text/css”>
Rulelist
</style>
Each style rule in a rule list has two parts: a selector, which indicates the tag or tags affected by the rule, and a
list of property–value pairs. The list has the same form as the quoted list for inline style sheets, except that it is
delimited by braces rather than double quotes. So, the form of a style rule is as follows:

Selector { Property1 : Value1; Property2 : Value2; Property3:Value3; ......................Property_n : Value_n;}


[Forexamplesonallthreelevelsofstylesheetsalongwithspecifications,Pleasereferthepreviousexamples] .
WD PROGRAMMING THE WEBNOTES

SELECTOR FORMS

Simple Selector Forms:


In case of simple selector, a tag is used. If the properties of the tag are changed, then it reflects at all the places
when used in the program. The selector can be any tag. If the new properties for a tag are not mentioned within
the rule list, then the browser uses default behavior of a tag.
<html>
<head>
<title>Sample CSS</title>
<style type =
"text/css">p
{
font-family: 'Lucida Handwriting';
font-size: 50pt;
color: Red;
}
</style>
</head>
<body>
<p>Puneeth Rajkumar</p>
<p>Mahesh Babu</p>
<p>Suriya</p>
</body>
</html>

Class Selectors:
In class selector, it is possible to give different properties for different elements
<html>
<head>
<title>Sample CSS</title>
<style type = "text/css">
[Link]
{
font-family: 'Lucida Handwriting';
font-size: 25pt;
color: Red;
}
wo
{
font-family: 'Monotype Corsiva';
font-size: 50pt;
color: green;
}
</style>
</head>
WD PROGRAMMING THE WEBNOTES
<body>
<p class = "one">PuneethRajkumar</p>
<p class = "two">PuneethRajkumar</p>
</body>
</html>

Generic Selectors:
In case of generic selector, when the class is created, it would not be associated to any particular tag. In other
words, it is generic in nature.
<html>
<head>
<title>Sample CSS</title>
<style type = "text/css">
.one
{
font-family: 'Monotype Corsiva';
color: green;
}
</style>
</head>
<body>
<p class = "one">Puneeth Rajkumar</p>
<h1 class = "one">PuneethRajkumar</h1>
<h6 class = "one">PuneethRajkumar</h6>
</body>
</html>

id Selectors:
An id selector allows the application of a style to one specific element.
<html>
<head>
<title>Sample CSS</title>
<style type = "text/css">
#one
{
font-family: 'lucida calligraphy';
color: purple;
}
WD PROGRAMMING THE WEBNOTES
#two
{
font-family: 'comic sans ms';
color: orange;
}
</style>
</head>
<body>
<p id = "two">Puneeth Rajkumar</p>
<h1 id = "one">Puneeth Rajkumar</h1>
</body>
</html>

Universal Selectors:
The universal selector, denoted by an asterisk (*), applies its style to all elements in a document.
<html>
<head>
<title>Sample CSS</title>
<style type = "text/css">
*
{
font-family: 'times new roman';
color: purple;
}
</style>
</head>
<body>
<h1>PuneethRajkumar</h1>
<h2>PuneethRajkumar</h2>
<h3>PuneethRajkumar</h3>
<p>Puneeth Rajkumar</p>
</body>
</html>
WD PROGRAMMING THE WEBNOTES

Pseudo Classes:
Pseudo class selectors are used if the properties are to be changed dynamically. For example: when mouse
movement happens, in other words, hover happens or focus happens.
<html>
<head>
<title>Sample CSS</title>
<style type =
"text/css">input:focus
{
font-family: 'lucida calligraphy';
color: purple;
font-size:100;
}
input:hover
{
font-family: 'lucida handwriting';
color: violet;
font-size:40;
}
</style>
</head>
<body>
<form action = " ">
<p>
<label>
NAME:
<input type = "text" />
</label>
</p>
</form>
</body>
</html>
STEP 1: Initial STEP 3: Enter the data

STEP 2:After placing mouse pointer on text area STEP 4: After taking away the mouse pointer
WD PROGRAMMING THE WEBNOTES

PROPERTY VALUE FORMS


CSS includes 60 different properties in seven categories: fonts, lists, alignment of text, margins, colours,
backgrounds, and borders. Property values can appear in a variety of forms.
 Keyword property values are used when there are only a few possible values and they arepredefined.
 A number value can be either an integer or a sequence of digits with a decimal point and can be
preceded by a sign (+ or-).
 Length values are specified as number values that are followed immediately by a two-character
abbreviation of a unit name. The possible unit names are px, for pixels; in, for inches; cm, for
centimeters; mm, for millimeters; pt, for points.
 Percentage values are used to provide a measure that is relative to the previously used measure for a
property value. Percentage values are numbers that are followed immediately by a percent sign
(%).Percentage values can be signed. If preceded by a plus sign, the percentage is added to the previous
value; if negative, the percentage is subtracted.
 There can be no space between url and the left parenthesis.
 Color property values can be specified as color names, as six-digit hexadecimal numbers, or in RGB
form. RGB form is just the word rgb followed by a parenthesized list of three numbers that specify the
levels of red, green, and blue, respectively. The RGB values can be given either as decimal numbers
between 0 and 255 or as percentages. Hexadecimal numbers must be preceded with pound signs (#), as
in#43AF00.

FONT PROPERTIES

Font Families:
The font-family property is used to specify a list of font names. The browser uses the first font in the list
that it supports. For example, the property:
font-family: Arial, Helvetica,Futura
tells the browser to use Arial if it supports that font. If not, it will use Helvetica if it supports it. If the browser
supports neither Arial nor Helvetica, it will use Futura if it can. If the browser does not support any of the
specified fonts, it will use an alternative of its choosing.
If a font name has more than one word, the whole name should be delimited by single quotes, as in the
following example:
font-family: ‘Times NewRoman’

Font Sizes:
The font-size property does what its name implies. For example, the following property specification sets
the font size for text to 10 points:
font-size:10pt
Many relative font-size values are defined, including xx-small, x-small, small, medium, large, x-
large, and xx-large. In addition, smaller or larger can be specified. Furthermore, the value can be a
percentage relative to the current font size.

Font Variants:
The default value of the font-variant property is normal, which specifies the usual character font. This
property can be set to small-caps to specify small capital characters. These characters are all uppercase,
but the letters that are normally uppercase are somewhat larger than those that are normally lowercase.

Font Styles:
The font-style property is most commonly used to specify italic, as in
font-style:italic
WD PROGRAMMING THE WEBNOTES

Font Weights:
The font-weight property is used to specify the degree of boldness, as in
font-weight: bold
Besides bold, the values normal, bolder, and lighter can be specified. Specific numbers also can be given
in multiples of 100 from 100 to 900, where 400 is the same as normal and 700 is the same as bold.

Font Short hands:


If more than one font property must be specified, the values can be stated in a list as the value of the font
property. The order in which the property values are given in a font value list is important. The order must
be as follows: The font names must be last, the font size must be second to last, and the font style, font variant,
and font weight, when they are included, can be in any order but must precede the font size and font names.
font: bold 14pt ‘Times New Roman’

<html>
<head>
<title>Font Properties</title>
<style type = "text/css">
[Link]
{
font-family: 'lucida calligraphy';
font-weight:bold;
font-size:75pt;
color: purple;
}
[Link]
{
font-family: 'cambria';
color: violet;
font-style:italics;
}
[Link]
{
font: small-caps italic bold 50pt 'times new roman'
}
</style>
</head>
<body>
<p class = "one">Puneeth Rajkumar</p>
<h1 class = "two">Puneeth Rajkumar</h1>
<p class = "three">Puneeth Rajkumar</p>
</body>
</html>
WD PROGRAMMING THE WEBNOTES

Text Decoration:
The text-decoration property is used to specify some special features of text. The available values are
line-through, overline, underline, and none, which is the default.
<html>
<head>
<title>Text Decoration</title>
<style type = "text/css">
[Link]
{text-decoration: line-through;}
[Link]
{text-decoration: overline;}
[Link]
{text-decoration: underline;}
</style>
</head>
<body>
<h1 class = "one">Puneeth Rajkumar</h1><p>[This is line-through]</p><br/>
<h1 class = "two">Puneeth Rajkumar</h1><p>[This is overline]</p><br/>
<h1 class = "three">Puneeth Rajkumar</h1><p>[This is underline]</p><br/>
</body>
</html>

LIST PROPERTIES
Two presentation details of lists can be specified in XHTML documents: the shape of the bullets that precede
the items in an unordered list and the sequencing values that precede the items in an ordered list. The list-
style-type property is used to specify both of these.
The list-style-type property of an unordered list can be set to disc, circle, square, or none.
<html>
<head>
<title>CSS Bullets</title>
<style type = "text/css">
[Link] {list-style-type:disc}
[Link]{list-style-type:square}
[Link]{list-style-type:circle}
</style>
</head>
<body>
<h3>South Indian Kings</h3>
WD PROGRAMMING THE WEBNOTES
<ul>
<li class = "one"> Puneeth Rajkumar</li>
<li class = "two"> Mahesh Babu</li>
<li class = "three"> Suriya</li>
</ul>
</body>
</html>

Bullets in unordered lists are not limited to discs, squares, and circles. Any image can be used in a list item
bullet. Such a bullet is specified with the list-style-image property, whose value is specified with the
url form.
<html>
<head>
<title>CSS Bullets-Image</title>
<style type = "text/css">
[Link] {list-style-image: url([Link]); font-size:25pt;}
</style>
</head>
<body>
<h1>South Indian Kings</h1>
<ul>
<li class = "image"> Puneeth Rajkumar</li>
<li class = "image"> Mahesh Babu</li>
<li class = "image"> Suriya</li>
</ul>
</body>
</html>

The following example illustrates the use of different sequence value types in nested lists:
<html>
<head>
<title> CSS nested lists </title>
<style type = "text/css">
ol {list-style-type:upper-roman;}
ol ol{list-style-type:upper-alpha;}
ol ol ol{list-style-type:decimal;}
</style>
</head>
WD PROGRAMMING THE WEBNOTES
<ol>
<li> Information Science </li>
<ol>
<li>OOMD</li>
<li>Java & J2ee</li>
<ol>
<li>classes and methods</li>
<li>exceptions</li>
<li>applets</li>
<li>servelets</li>
</ol>
<li>Computer Networks</li>
<ol>
<li>Part1</li>
<li>Part2</li>
</ol>
<li>DBMS</li>
<li>Operations Research</li>
</ol>
<li> Computer Science</li>
<ol>
<li>Compiler Design</li>
<li>FLAT</li>
<ol>
<li>NFA</li>
<li>DFA</li>
<li>CFG</li>
</ol>
<li>Computer Graphics</li>
<li>Artificial Intelligence</li>
</ol>
</ol>
</html>
WD PROGRAMMING THE WEBNOTES

COLOR

Color Groups:
Three levels of collections of colors might be used by an XHTML document. The smallest useful set of colors
includes only those that have standard names and are guaranteed to be correctly displayable by all browsers on
all color monitors. This collection of 17 colors is called the named colors.

Larger set of colors, called the Web palette, consists of 216 colors. The colors of the Web palette can be viewed
at [Link]

Color Properties:
The color property is used to specify the foreground color of XHTML elements.
<html>
<head>
<title>Colors</title>
<style type = "text/css">
[Link]
{color: pink; }
[Link]
{color: # 9900FF; }
[Link]
{background-color:#99FF00;}
</style>
</head>
<body>
<p class = "one">PuneethRajkumar</p>
<p class = "two">PuneethRajkumar</p>
<p class = "three">Puneeth Rajkumar</p>
</body>
</html>
WD PROGRAMMING THE WEBNOTES

ALIGNMENT OF TEXT
 The text-indent property can be used to indent the first line of a paragraph. This property takes
either a length or a percentage value. The text-align property, for which the possible keyword values
are left, center, right, and justify, is used to arrange text horizontally.
 The float property is used to specify that text should flow around some element, often an image or a
table. The possible values for float are left, right, and none, which is the default.
<html>
<head>
<title>Text Alignment</title>
<style type = "text/css">
[Link]
{text-align: center}
[Link]
{text-indent: 0.5in; text-align: justify;}
img{float:right}
</style>
</head>
<body>
<h1 class = "one">Kannadada Kotyadhipathi</h1>
<p>
<img src = "[Link]" alt="error"/>
</p>
<p class = "two">Kannadada Kotyadhipathi is a Kannada primetime quiz show hosted by the power
star of Kannada cinema Mr. Puneet Rajkumar. This is the biggest game show ever on Kannada
Television. This show will be aired on Suvarna TV. This show gives the common man an opportunity to
win Rs 1 crore. Kannadada Kotyadipathi is a Kannada primetime quiz and human drama show hosted
by matinee idol Puneeth Rajkumar on Suvarna TV. Contestants participate in a game that allows them
to win up to Rs. 1 crore. Short-listed contestants play a ‘Fastest Finger First’ round to make it to the
main game. From there on, they play rounds with increasing levels of difficulty, and winning higher
amounts of money, culminating in the Rs. 1 crore prize. Contestants can stop at any time having viewed
the next question. Or they can avail of a 'Lifeline' and play on. Welcome to the world of high stakes chills
and thrills! Welcome to the world of thecrorepati!</p>
</body>
</html>
WD PROGRAMMING THE WEBNOTES

THE BOX MODEL


 On a given web page or a document, all the elements can have borders.
 The borders have various styles, color and width.
 The amount of space between the content of the element and its border is known as padding.
 The space between border and adjacent element is known as margin.

Borders:
Border-style
It can be dotted, dashed, double
Border-top-style
Border-bottom-style
Border-left-style
Border-right-style

Border-width
It can be thin, medium, thick or any length value
Border-top-width
Border-bottom-width
Border-left-width
Border-right-width

Border-color
Border-top-color
Border-bottom-color
Border-left-color
Border-right-color
<html>
<head>
<title> Table with border effects </title>
<style type = "text/css">
table
{
border-width:thick;
border-top-color:red;
border-left-color:orange;
border-bottom-color:violet;
border-right-color:green;
border-top-style:dashed;
WD PROGRAMMING THE WEBNOTES
border-bottom-style:double;
border-right-style:dotted;
}
</style>
</head>
<body>
<table border = "border">
<caption>PARAMATHMA </caption>
<tr>
<td> Puneeth Rajkumar </td>
<td><img src = "[Link]" alt = "cant display"/></td>
</tr>
</table>
</body>
</html>

Margins and Padding:


The margin properties are named margin, which applies to all four sides of an element: margin-left,
margin-right, margin-top, and margin-bottom. The padding properties are named padding, which
applies to all four sides: padding-left, padding-right, padding-top, and padding-bottom.
<html>
<head>
<title> Margins and Padding </title>
<style type = "text/css">
[Link]
{
margin:0.1in;
padding:0.5in;
background-color:#FF33FF;
border-style:dotted;
}
[Link]
{
margin:0.5in;
padding:0.1in;
background-color:#00FF33;
border-style:dashed;
}
[Link]
{
WD PROGRAMMING THE WEBNOTES
margin:0.3in;
background-color:#FFFF00;
}
[Link]
{
padding:0.3in;
background-color:#FF9900;
}
</style>
</head>
<body>
<p class = "one"> Puneeth Rajkumar is the Power Star of Sandalwood<br/>
[margin=0.1in,padding=0.5in]</p>
<p class = "two"> Puneeth Rajkumar is the Power Star of Sandalwood<br/>
[margin=0.5in,padding=0.1in]</p>
<p class = "three"> Puneeth Rajkumar is the Power Star of Sandalwood<br/>
[margin=0.3in, no padding, noborder]</p>
<p class = "four"> Puneeth Rajkumar is the Power Star of Sandalwood<br/>
[no margin, padding=0.3in, noborder]</p>
</body>
</html>

BACKGROUND IMAGES
The background-image property is used to place an image in the background of an element.
<html>
<head>
<title>Background Image</title>
<style type = "text/css">
body {background-image:url([Link]);}
p
{text-align: justify; color:white;font-size:25pt;}
</style>
</head>
<body>
<p >Kannadada Kotyadhipathi is a Kannada primetime quiz show hosted by the power star of Kannada
cinema Mr. Puneet Rajkumar. This is the biggest game show ever on Kannada Television. This show will be
aired on Suvarna TV. This show gives the common man an opportunity to win Rs 1 crore. Kannadada
Kotyadipathi is a Kannada primetime quiz and human drama show hosted by matinee idol Puneeth Rajkumar
[Link]-listed
WD PROGRAMMING THE WEBNOTES
contestants play a ‘Fastest Finger First’ round to make it to the main game. From there on, they play rounds
with increasing levels of difficulty, and winning higher amounts of money, culminating in the Rs. 1 crore prize.
Contestants can stop at any time having viewed the next question. Or they can avail of a 'Lifeline' and play on.
Welcome to the world of high stakes chills and thrills! Welcome to the world of the crorepati!</p>
</body>
</html>

In the example, notice that the background image is replicated as necessary to fill the area of the element. This
replication is called tiling. Tiling can be controlled with the background-repeat property, which can take
the value repeat (the default), no-repeat, repeat-x, or repeat-y. The no-repeat value specifies that
just one copy of the image is to be displayed. The repeat-x value means that the image is to be repeated
horizontally; repeat-y means that the image is to be repeated vertically. In addition, the position of a non-
repeated background image can be specified with the background-position property, which can take a
large number of different values. The keyword values are top, center, bottom, left, and right, all of
which can be used in many different combinations.

THE <span> AND <div> TAGS


In many situations, we want to apply special font properties to less than a whole paragraph of text. The
<span>tag is designed for just this purpose.
<html>
<head><title>span</title>
<style type = "text/css">
.spanviolet {font-size:25pt;font-family:'lucida calligraphy';color:violet;}
</style>
</head>
<body>
<p >Kannadada Kotyadhipathi is a Kannada primetime quiz show hosted by <span class = "spanviolet">
Puneeth Rajkumar </span>, the power star of Kannada cinema </p>
</body>
</html>
WD PROGRAMMING THE WEBNOTES
It is more convenient, however, to be able to apply a style to a section of a document rather than to each
paragraph. This can be done with the <div>tag. As with <span>, there is no implied layout for the content of
the <div>tag, so its primary use is to specify presentation details for a section or division of a document.
<html>
<head>
<title>div</title>
<style type = "text/css">
.one
{font-size:20pt;font-family:'lucida calligraphy';color:violet;}
.two
{font-size:25pt;font-family:'comic sans ms';color:green;}
</style>
</head>
<body>
<div class = "one">
<p>Paragragh 1 under division1</p>
<p>Paragragh 2 under division1</p>
<p>Paragragh 3 under division1</p>
</div>
<div class = "two">
<p>Paragragh 1 under division2</p>
<p>Paragragh 2 under division2</p>
<p>Paragragh 3 under division2</p>
</div>
</body>
</html>

CONFLICT RESOLUTION
 Sometimes on a web page, there can be two different values for the same property on the same element
leading to conflict.
 h3 {color: blue;}
body h3 {color:red;}
 The browser has to resolve this conflict.
 There can be one or more type of conflict: i.e. when style sheets at 2 or more levels specify different
value for same property on some element.
 This conflict is resolved by providing priority to the different levels of stylesheets.
 The inline level gets the highest priority over the document level.
WD PROGRAMMING THE WEBNOTES
 The document level gets the higher priority over the external level
 But the browser must be able to resolve the conflict in the first example using same technique.
 There can be several different origins of the specification of property values.
 One of the value may come from a style sheet created by the author or it can be specified by the user
using the options provided by the browser.
 The property values with different origin have different precedence.
 The precedence can also be set for a property by marking it as important.
 [Link] {font-style: italic !important; font-size:14}
 This means that font-style:italic is important [this is known as weight of specification]
 The process of conflict resolution is a multi-stage sorting process.
 The first step is to gather information about levels of stylesheet.
 Next, all the origins and weights are sorted. The following rules are considered:
1. Important declarations with user origin
2. Important declarations with author origin
3. Normal declarations with author origin
4. Normal declarations with user origin
5. Any declarations with browser (or other user agent)origin
 If there are other conflicts even after sorting, the next step is sorting by specificity. Rulesare:
1. Id selectors
2. Class and pseudo class selectors
3. Contextual selectors (more element type names means that they are more specific)
4. Universal selectors
 If there still conflicts, they are resolved by giving precedence to most recently seenspecification.

You might also like