Scribd
Upload
53 views

Unit 2 Notes

The document discusses various HTML tags used to embed images, create hyperlinks, and structure tables. It describes the <img> tag and its attributes to embed images on a page. The <a> tag is used to define hyperlinks and its href attribute specifies the link destination. HTML tables are created using <table>, <tr>, <td>, <th> tags to arrange data into rows and columns. Optional <thead>, <tbody>, <tfoot> tags group header, body and footer content in tables.

Uploaded by

7733nishanthks
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
53 views

Unit 2 Notes

The document discusses various HTML tags used to embed images, create hyperlinks, and structure tables. It describes the <img> tag and its attributes to embed images on a page. The <a> tag is used to define hyperlinks and its href attribute specifies the link destination. HTML tables are created using <table>, <tr>, <td>, <th> tags to arrange data into rows and columns. Optional <thead>, <tbody>, <tfoot> tags group header, body and footer content in tables.

Uploaded by

7733nishanthks
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

Introduction to Web Programming 22PLC15a

Unit 2: HTML
2.1 <img> Tag

• The <img> tag is used to embed an image in an HTML page.


• Images are not technically inserted into a web page; images are linked to web
pages.The <img> tag creates a holding space for the referenced image.
• The <img> tag has two required attributes:
o src - Specifies the path to the image
o alt - Specifies an alternate text for the image (which holds a text description of
the image), if the image can't be loaded for some reason: for example, network
errors, content blocking, or linkrot.
• Note: Also, always specify the width and height of an image. If width and height are not
specified, the page might flicker while the image loads.

Example: To insert an image


<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Example: To insert images from another folder or from another web site
<img src="/images/stickman.gif" alt="Stickman" width="24" height="39">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32"
height="32">

Example: To add a hyperlink to an image


<a href="https://www.w3schools.com">
<img src="w3html.gif" alt="W3Schools.com" width="100" height="132">
</a>

Example: To create an image map, with clickable regions. Each region is a hyperlink
<!DOCTYPE html>
<html>
<body>
<h1>The map and area elements</h1>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read
moreabout the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap"


width="400"height="379">

Department of ISE, BMSCE 1|Page


Introduction to Web Programming 22PLC15a

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>

The image file formats that are most commonly used on the web are:
APNG (Animated Portable Network Graphics) — Good choice for lossless animation
sequences (GIF is less performant)
AVIF (AV1 Image File Format) — Good choice for both images and animated images
due to high performance.
GIF (Graphics Interchange Format) — Good choice for simple images and animations.
JPEG (Joint Photographic Expert Group image) — Good choice for lossy compression
of still images (currently the most popular).
PNG (Portable Network Graphics) — Good choice for lossless compression of still
images (slightly better quality than JPEG).
SVG (Scalable Vector Graphics) — Vector image format. Use for images that must be
drawn accurately at different sizes.
WebP (Web Picture format) — Excellent choice for both images and animated images

• Formats like WebP and AVIF are recommended as they perform much better than PNG,
JPEG,GIF for both still and animated images. WebP is widely supported while AVIF
lacks support in Safari.
• SVG remains the recommended format for images that must be drawn accurately at
different sizes.

Identifying SVG as an image


Due to a VoiceOver bug, VoiceOver does not correctly announce SVG images as images.
Include role="img" to all <img> elements with SVG source files to ensure assistive
technologies correctly announce the SVG as image content.
<img src="mdn.svg" alt="MDN logo" role="img" />

Department of ISE, BMSCE 2|Page


Introduction to Web Programming 22PLC15a

2.2 a Element
• The <a> tag defines a hyperlink, which is used to link from one page to another.
• The most important attribute of the <a> element is the href attribute, which indicates the
link'sdestination.
• Example: To create a link to W3Schools.com
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

• Example: To use an image as a link


<a href="https://www.w3schools.com">

<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">


</a>

• Example: To open a link in a new browser window

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

2.3 HTML Tables


• HTML tables allow web developers to arrange data into rows and columns. A table in
HTML consists of table cells inside rows and columns.
• Each table cell is defined by a <td> and a </td> tag. td stands for table data. Everything
between <td> and </td> are the content of the table cell.
• Each table row starts with a <tr> and ends with a </tr> tag. tr stands for table row.
• You can have as many rows as you like in a table; just make sure that the number of
cells are the same in each row.
• Sometimes you want your cells to be table header cells. In those cases, use the <th> tag
insteadof the <td> tag. th stands for table header.
• By default, the text in <th> elements are bold and centered, but you can change that with
CSS.
Example:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>

Department of ISE, BMSCE 3|Page


Introduction to Web Programming 22PLC15a

<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

Output:
Person 1 Person 2 Person 3
Emil Tobias Linus
16 14 10

<table> attributes flow in this order:


1. an optional <caption> element,
2. zero or more <colgroup> elements,
3. an optional <thead> element,
4. either one of the following:
• zero or more <tbody> elements
• one or more <tr> elements
5. an optional <tfoot> element

2.3.1 <thead> Tag


• The <thead> tag is used to group header content in an HTML table.
• The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to
specifyeach part of a table (header, body, footer).
• Browsers can use these elements to enable scrolling of the table body independently of
the header and footer. Also, when printing a large table that spans multiple pages, these
elements can enable the table header and footer to be printed at the top and bottom of
each page.
• Note: The <thead> element must have one or more <tr> tags inside.
• The <thead> tag must be used in the following context: As a child of a <table> element,
after any <caption> and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr>
elements.

Department of ISE, BMSCE 4|Page


Introduction to Web Programming 22PLC15a

2.3.2 <tbody> tag


• The <tbody> tag is used to group the body content in an HTML table.
• The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to
specify each part of a table (body, header, footer).
• Note: The <tbody> element must have one or more <tr> tags inside.
• The <tbody> tag must be used in the following context: As a child of a <table>
element, afterany <caption>, <colgroup>, and <thead> elements.

2.3.3 <thead> tag


• The <thead> tag is used to group header content in an HTML table.
• The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to
specifyeach part of a table (header, body, footer).
• Note: The <thead> element must have one or more <tr> tags inside.
• The <thead> tag must be used in the following context: As a child of a <table>
element, afterany <caption> and <colgroup> elements, and before any <tbody>,
<tfoot>, and <tr> elements.

2.3.4 <tfoot> tag


• The <tfoot> tag is used to group footer content in an HTML table.
• The <tfoot> element is used in conjunction with the <thead> and <tbody> elements to
specifyeach part of a table (footer, header, body).
• Note: The <tfoot> element must have one or more <tr> tags inside.
• The <tfoot> tag must be used in the following context: As a child of a <table>
element, afterany <caption>, <colgroup>, <thead>, and <tbody> elements.

Example:
<!DOCTYPE html>
<html>
<body>
<h1>The thead, tbody, and tfoot elements</h1>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>

Department of ISE, BMSCE 5|Page


Introduction to Web Programming 22PLC15a

<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html>

Output:
The thead, tbody, and tfoot elements
Month Savings
January $100
February $80
Sum $180

2.3.5 <caption> tag


• The <caption> tag defines a table caption.
• The <caption> tag must be inserted immediately after the <table> tag.Tip: By default, a
table caption will be center-aligned above a table.

Example:
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

Department of ISE, BMSCE 6|Page


Introduction to Web Programming 22PLC15a

2.3.6 <colgroup> tag


• The <colgroup> tag specifies a group of one or more columns in a table for formatting.
• The <colgroup> tag is useful for applying styles to entire columns, instead of
repeating thestyles for each cell, for each row.
• Note: The <colgroup> tag must be a child of a <table> element, after any <caption>
elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.
• Tip: To define different properties to a column within a <colgroup>, use the <col> tag
withinthe <colgroup> tag.

2.3.7 Table Colspan & Rowspan


• HTML tables can have cells that span over multiple rows and/or columns.

• To make a cell span over multiple columns, use the colspan attribute.
• The value of the colspan attribute represents the number of columns to span.

Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
Output:
Name Age
Jill Smith 43
Eve Jackson 57

• To make a cell span over multiple rows, use the rowspan attribute.
• The value of the rowspan attribute represents the number of rows to span.

Department of ISE, BMSCE 7|Page


Introduction to Web Programming 22PLC15a

Example
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>

Output:

Name Jill
555-1234
Phone
555-8745
Other Attributes of Table Tag

Border Attribute

The HTML <table> border Attribute is used to specify the border of a table. It sets the
border around the table cells.

Syntax:
<table border="1|0">
Attribute Values:
• 1: It sets the border around the table cells.
• 0: It removes (not set) the border around the table cells.

Cell Padding Attribute


The HTML <table> cellpadding Attribute is used to specify the space between the cell
content and cell wall. The cellpadding attribute is set in terms of pixels.

Syntax: <table cellpadding="pixels">

pixels: It holds the space between the cell content and cell wall in terms of pixels.

Note: The <table> cellpadding Attribute is not supported by HTML 5.


Example:
<table border="1" cellpadding="15">

Cell Spacing Attribute

The HTML <table> cellspacing Attribute is used to specify the space between the cells. The
cellspacing attribute is set in terms of pixels.

Department of ISE, BMSCE 8|Page


Introduction to Web Programming 22PLC15a

Syntax: <table cellspacing="pixels">

Attribute Values:
• pixels: It sets the space between the cells in terms of pixels.

Note: The <table> cellspacing Attribute is not supported by HTML 5.

Example: <table border="1" cellspacing="15">

(Note:
Cellpadding: Cellpadding specifies the space between the border of a table cell and its contents
(i.e) it defines the whitespace between the cell edge and the content of the cell.
Cellspacing: Cellspacing specifies the space between cells (i.e) it defines the whitespace between
the edges of the adjacent cells.)

Bgcolor Attribute

The HTML <table> bgcolor Attribute is use to specify the background color of a table.

Syntax: <table bgcolor="color_name | hex_number | rgb_number">

Attribute Values:

• color_name: It sets the text color by using the color name. For example “red”.
• hex_number: It sets the text color by using the color hex code.
For example “#0000ff”.
• rgb_number: It sets the text color by using the rgb code.
For example: “RGB(0, 153, 0)” .

Note: The <table> bgcolor Attribute is not supported by HTML 5 instead of using this we can
use CSS background-color property.

Example: <table border="1" bgcolor="green">

Width Attribute

The HTML <table> width Attribute is used to specify the width of a table. If width attribute
is not set then it takes default width according to content.

Syntax: <table width="pixels | %">

Attribute Values:
• pixels: It sets the width of table in terms of pixels.
• %: It sets the width of table in terms of percentage (%).
Note: The <table> width Attribute is not supported by HTML 5.

<table border="1" width="250">

Department of ISE, BMSCE 9|Page


Introduction to Web Programming 22PLC15a

Example Program 1:

<!DOCTYPE html>
<html>
<body>

<h2>100% wide HTML Table</h2>

<table border="1" width="100%">


<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>

Output:

100% wide HTML Table


Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

Department of ISE, BMSCE 10 | P a g e


Introduction to Web Programming 22PLC15a

Example Program 2:

<!DOCTYPE html>
<html>
<body>

<h2>Set the first column to 70% of the table width</h2>

<table border="1" width="50%">


<tr>
<th width="70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>

Output:

Example Program 3:

<!DOCTYPE html>
<html>
<body>

<h2>Set the height of the second row to 200 pixels</h2>


<table border="1" width="100%">

Department of ISE, BMSCE 11 | P a g e


Introduction to Web Programming 22PLC15a

<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr height="200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>

Output:

Alignment Attribute

HTML | <table> align Attribute

The HTML <table> align Attribute is used to specify the alignment of the table and its
content.

Note: This attribute is not supported by HTML5.

Syntax: <table align="left | right | center">

Department of ISE, BMSCE 12 | P a g e


Introduction to Web Programming 22PLC15a

Attribute Values:
• left: It sets the left align to the table. It is a default value.
• right: It sets the right align to the table.
• center: It sets the center align to the table.

Example: <table border="1" align="right">

HTML | <td> align Attribute

The HTML <td> valign Attribute is used to specify the vertical alignment of text content in a
cell.

Syntax: <td valign="top | middle | bottom | baseline">

Attribute Value:
• top: It sets the content to top-align.
• middle: It sets the content to middle-align.
• bottom: It sets the content to bottom-align.
• baseline: It sets the content to baseline. The baseline is the line where most of the
characters sit. It is a default value.

Note: The <td> valign Attribute is not supported by HTML 5.

Example: <td valign="top">

HTML | <tr> align Attribute

The HTML <tr> align Attribute is used to set the horizontal alignment of text content inside
the table row. It is not supported by HTML 5.

Syntax: <tr align= "left | right | center | justify | char">

Attribute Values:
• left: It sets the text left-align.
• right: It sets the text right-align.
• center: It sets the text center-align. It is a default value.
• justify: It stretches the text of paragraph to set the width of all lines equal.
• char: It sets the text-align to a specific character.

Example: <tr align="center">

Sample Program
<!DOCTYPE html>
<html>
<head>
<title>HTML tr align Attribute</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML tr align Attribute</h2>
<table width="500" border="1">

Department of ISE, BMSCE 13 | P a g e


Introduction to Web Programming 22PLC15a

<tr align="right">
<th>Name</th>
<th>Expenses</th>
</tr>
<tr align="center">
<td>BITTU</td>
<td>2500.00</td>
</tr>
<tr>
<td align="right">RAKESH</td>
<td>1400.00</td>
</tr>
</table>
</body>

</html>

Nested Tables in HTML

Nested tables are referred as tables inside another table. This makes HTML tables visually more
interesting and leads to complex table layout.

Example:
<table>
<caption>Nested Tables</caption>
<tr>
<th>Header of Table 1</th>
<th>Header of Table 2</th>
</tr>

<tr>
<td>
<table>
<tr>
<th>1st Header of nested table 1</th>
<th>2st Header of nested table 1</th>
</tr>
<tr>
<td>1st cell of nested table</td>
<td>2st cell of nested table</td>

Department of ISE, BMSCE 14 | P a g e


Introduction to Web Programming 22PLC15a

</tr>
<td>3rd cell of nested table</td>
<td>4th cell of nested table</td>
</tr>

</table>
</td>
<td>
<table>
<tr>
<th>1st Header of nested table 2</th>
<th>2st Header of nested table 2</th>
</tr>
<tr>
<td>1st cell of nested table</td>
<td>2st cell of nested table</td>
</tr>
<td>3rd cell of nested table</td>
<td>4th cell of nested table</td>
</tr>
</table>
</td>
</tr>
</table>

Output:

2.4 HTML Forms


• An HTML form is used to collect user input. The user input is most often sent to a
server forprocessing.
• The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>

Department of ISE, BMSCE 15 | P a g e


Introduction to Web Programming 22PLC15a

• The <form> element is a container for different types of input elements, such as: text
fields,checkboxes, radio buttons, submit buttons, etc.

2.4.1 The <label> Element


• Notice the use of the <label> element in the example above.The <label> tag defines a
label for many form elements.
• The <label> element is useful for screen-reader users, because the screen-reader will
read outloud the label when the user focus on the input element.
• The <label> element also help users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text
withinthe <label> element, it toggles the radio button/checkbox.
• The for attribute of the <label> tag should be equal to the id attribute of the <input>
element to bind them together.

2.4.2 The <input> Element


• The HTML <input> element is the most used form element.
• An <input> element can be displayed in many ways, depending on the type
attribute. Here are some examples:
Type Description
<input type="text"> Displays a single-line text input field
<input Displays a radio button (for selecting one of many choices)
type="radio">
<input Displays a checkbox (for selecting zero or more of many
type="checkbox"> choices)
<input Displays a submit button (for submitting the form)
type="submit">
<input Displays a clickable button
type="button">

2.4.2.1 Text Fields

• The <input type="text"> defines a single-line input field for text input.
• The default width of an input field is 20 characters.
Example:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

Department of ISE, BMSCE 16 | P a g e


Introduction to Web Programming 22PLC15a

Output
First name:

Last name:

2.4.2.2 Radio Buttons


• The <input type="radio"> defines a radio button.
• Radio buttons let a user select ONE of a limited number of choices.
Example
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

Output
Choose your favorite Web language:

HTML

CSS

JavaScript

2.4.2.3 Checkboxes
• The <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example: A form with checkboxes
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

Department of ISE, BMSCE 17 | P a g e


Introduction to Web Programming 22PLC15a

Output:

I have a bike

I have a car

I have a boat

2.4.2.4 The Submit Button


• The <input type="submit"> defines a button for submitting the form data to a form-
handler.

• The form-handler is typically a file on the server with a script for processing input
data.
• The form-handler is specified in the form's action attribute.

Example: A form with a submit button


<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Output:
First name:

Last name:

2.4.2.5 The Name Attribute for <input>


• Notice that each input field must have a name attribute to be submitted.
• If the name attribute is omitted, the value of the input field will not be sent at all.

2.4.3 HTML <form> action Attribute


• The action attribute specifies where to send the form-data when a form is submitted.
• Usually, the form data is sent to a file on the server when the user clicks on the submit
button.

Department of ISE, BMSCE 18 | P a g e


Introduction to Web Programming 22PLC15a

Syntax: <form action="URL">


Attribute Values

Value Description
URL Where to send the form-data when the form is
submitted.Possible values:
• An absolute URL - points to another web site
(likeaction="http://www.example.com/example.htm")
• A relative URL - points to a file within a web site (like
action="example.htm")

Example
• On submit, send the form-data to a file named "action_page.php" (to process the input):
• In the example below, the form data is sent to a file called "action_page.php". This file
containsa server-side script that handles the form data:
<!DOCTYPE html>
<html>
<body>
<h1>The form action attribute</h1>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".</p>
</body>
</html>

Output:
The form action attribute

First name:

Last name:

Department of ISE, BMSCE 19 | P a g e


Introduction to Web Programming 22PLC15a

• Click the "Submit" button and the form-data will be sent to a page on the server
called"action_page.php"
2.4.4 The Method Attribute
• The method attribute specifies the HTTP method to be used when submitting the form
data.
• The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction(with method="post").
• The default HTTP method when submitting form data is GET.
<form action="/action_page.php" method="get">

Example
<!DOCTYPE html>
<html>
<body>
<h2>The method Attribute</h2>
<p>This form will be submitted using the GET method:</p>
<form action="/action_page.php" target="_blank" method="get">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>After you submit, notice that the form values is visible in the address bar
of the newbrowser tab.</p>
</body>
</html>

Output:
This form will be submitted using the GET method:
First name:

Last name:

• After you submit, notice that the form values are visible in the address bar of the new
browsertab.
• The default HTTP method when submitting form data is GET.

<form action="/action_page.php" method="post">

Department of ISE, BMSCE 20 | P a g e


Introduction to Web Programming 22PLC15a

Notes on GET:
• Appends the form data to the URL, in name/value pairs
• NEVER use GET to send sensitive data! (the submitted form data is visible in the
URL!)
• The length of a URL is limited (2048 characters)
• Useful for form submissions where a user wants to bookmark the result
• GET is good for non-secure data, like query strings in Google
Notes on POST:
• Appends the form data inside the body of the HTTP request (the submitted form data
is not shown in the URL)
• POST has no size limitations, and can be used to send large amounts of data.
• Form submissions with POST cannot be bookmarked

Tip: Always use POST if the form data contains sensitive or personal information!

2.5 <div> Tag


• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is used as a container for HTML elements - which is then styled with CSS
or manipulated with JavaScript.
• It has no effect on the content or layout until styled in some way using CSS.
• The <div> tag is easily styled by using the class or id attribute.
• Since <div> is a block-level element, a line break is placed before and after it.
• It is possible to place any HTML element within a <div> tag, including another <div>.
• To apply styles inside a paragraph use <span> tag, which is used with inline elements.

Example:
<!DOCTYPE>
<html>
<body>
<div style="border:1px solid black; padding:20px; background-color:lightblue; text-
align:center; font-size:20px">
<p>Welcome to web classes.</p>
<p>This is second paragraph</p>
</div>
</body>
</html>

Department of ISE, BMSCE 21 | P a g e


Introduction to Web Programming 22PLC15a

Output:

2.6 <section> Tag


• The <section> tag defines a section in a document.
• The section tag divides the content into section and subsections.
• It is used to create standalone sections within a webpage containing logically connected
content.
• Sections should always have a heading.
• HTML <section> is one of the HTML5 elements.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Using the section tag</title>
</head>
<body>
<section>
<h2>Hypertext markup language HTML</h2>
<p>HTML is the standard markup language for creating web pages and
web applications. Browsers receive HTML documents from a web server
or from local storage and render the documents into multimedia web
pages. HTML describes the structure of a web page semantically and
originally included cues for the appearance of the document.</p>
</section>
<section>
<h2>CSS</h2>
<p>Formal language, which is used as a description zone, formatting the
appearance of a web page, written by the help of markup languages
HTML and XHTML, but it can be applied to any XML-document, for
example, to SVG or XUL.</p>
</section>
</body>
</html>

Output:

Hypertext markup language HTML


HTML is the standard markup language for creating web pages and web applications. Browsers
receive HTML documents from a web server or from local storage and render the documents

Department of ISE, BMSCE 22 | P a g e


Introduction to Web Programming 22PLC15a

into multimedia web pages. HTML describes the structure of a web page semantically and
originally included cues for the appearance of the document.

CSS
Formal language, which is used as a description zone, formatting the appearance of a web page,
written by the help of markup languages HTML and XHTML, but it can be applied to any
XML-document, for example, to SVG or XUL.

Difference between <div> tag and <section> tag

• The div element has no special meaning. It is often used as a block of children elements.
• The section element introduced in HTML5 standard is used to group related elements,
such as a subsection of a long article.
• In short, the section element provides more semantic syntax than the div element.

2.7 <meta> Tag


• The <meta> tag defines metadata about an HTML document. Metadata is data
(information) about data.
• <meta> tags always go inside the <head> element, and are typically used to specify
character set, page description, keywords, copyright, language, author of the document,
and viewport settings.
• Metadata will not be displayed on the page, but is machine parsable.
• Metadata is used by browsers (how to display content or reload page), search engines
(keywords), and other web services which scan the site or webpage to know about the
webpage.
• There is a method to let web designers take control over the viewport (the user's visible
area of a web page), through the <meta> tag.
• With the help of meta tag, we can experiment and preview that how your webpage will
render on the browser.
• It can be used more than one times in a document.

Attributes

Attribute Value Description

charset character_set Specifies the character encoding for the HTML


document

Department of ISE, BMSCE 23 | P a g e


Introduction to Web Programming 22PLC15a

content text Specifies the value associated with the http-


equiv or name attribute

http- content-security- Provides an HTTP header for the


equiv policy information/value of the content attribute
content-type
default-style
refresh

name application-name Specifies a name for the metadata


author
description
generator
keywords
viewport

Examples:
• Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">
• Define a description of your web page:
<meta name="description" content="Free Web tutorials for HTML and CSS">
• Define the author of a page:
<meta name="author" content="John Doe">
• Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
• Setting the Viewport to make your website look good on all devices:
o The viewport is the user's visible area of a web page. It varies with the device - it
will be smaller on a mobile phone than on a computer screen.
o You should include the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
o This gives the browser instructions on how to control the page's dimensions and
scaling.
o The width=device-width part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).
o The initial-scale=1.0 part sets the initial zoom level when the page is first loaded
by the browser.
o Here is an example of a web page without the viewport meta tag, and the same web
page with the viewport meta tag:

Department of ISE, BMSCE 24 | P a g e


Introduction to Web Programming 22PLC15a

Without the viewport meta tag With the viewport meta tag
Example program:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="HTML, CSS, JavaScript, Tutorials">
<meta name="description" content="Free Online tutorials">
<meta name="author" content="thisauthor">
<meta http-equiv="refresh" content="5; url=https://www.javatpoint.com/html-tags-
list">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Example of Meta tag</h2>
<p>This example shows the use of meta tag within an HTML document</p>
</body>
</html>

Output:

After 5secs, https://www.javatpoint.com/html-tags-list webpage will be displayed, which


is refreshed every 5secs.

Department of ISE, BMSCE 25 | P a g e


Introduction to Web Programming 22PLC15a

2.8 <title> Tag

• The <title> tag defines the title of the document. The title must be text-only, and it is shown
in the browser's title bar or in the page's tab.

• The <title> tag is required in HTML documents!

• The contents of a page title is very important for search engine optimization (SEO).

• The page title is used by search engine algorithms to decide the order when listing pages
in search results.

• Here are some tips for creating good titles:


o Go for a longer, descriptive title (avoid one- or two-word titles)
o Search engines will display about 50-60 characters of the title, so try not to have
titles longer than that.

o Don't use "keyword blobs." If your title is just a list of words, algorithms often
reduce your page's position in the search results.
o Try to make sure your titles are as unique as possible within your own site.
Duplicate—or near-duplicate—titles can contribute to inaccurate search results.

• So, try to make the title as accurate and meaningful as possible!

• Note: You can NOT have more than one <title> element in an HTML document.

Department of ISE, BMSCE 26 | P a g e


Introduction to Web Programming 22PLC15a

2.9 <style> Tag

• The <style> HTML element contains style information for a document, or part of a
document. It contains CSS, which is applied to the contents of the document containing
the <style> element.
• Inside the <style> element you can specify how HTML elements should render in a
browser.
• The <style> element must be included inside the <head> of the document. In general, it is
better to put styles in external stylesheets and apply them using <link> elements.
• Note: When a browser reads a style sheet, it will format the HTML document according
to the information in the style sheet. If some properties have been defined for the same
selector (element) in different style sheets, the value from the last read style sheet will be
used.
• If you include multiple <style> and <link> elements in your document, they will be
applied to the DOM in the order they are included in the document - make sure you include
them in the correct order, to avoid unexpected cascade issues.
• In the same manner as <link> elements, <style> elements can include media attributes that
contain media queries, allowing to selectively apply internal stylesheets to document
depending on media features such as viewport width.

• Attributes

Attribute Value Description

media media_query Specifies what media/device the media


resource is optimized for

type text/css Specifies the media type of the <style> tag

• Example:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
<style>
h1 {color:green;}
p {color:pink;}
</style>
</head>
<body>
<h1>This is a heading</h1>

Department of ISE, BMSCE 27 | P a g e


Introduction to Web Programming 22PLC15a

<p>This is a paragraph.</p>
</body>
</html>

(Note: The Document Object Model (DOM) is a programming API for HTML and XML
documents. It defines the logical structure of documents and the way a document is accessed and
manipulated.)

HTML style Attribute


• The style attribute specifies an inline style for an element.
• The style attribute will override any style set globally, e.g. styles specified in
the <style> tag or in an external style sheet.
• Applies to
The style attribute is part of the Global Attributes, and can be used on any HTML element.

Element Attribute

All HTML elements style

• Example
Use of the style attribute in an HTML document:

<h1 style="color:blue;text-align:center">This is a header</h1>


<p style="color:green">This is a paragraph.</p>

2.10 <script> Tag

• The <script> tag is used to embed a client-side script (JavaScript).

• The HTML <script> tag declares client-side script (JavaScript) in an HTML document.
When defining a client-side script the script tag is used for image manipulation, form
validation, and dynamic changes of content.

• The tag can include either the script itself or a link to an external file containing scripts.
The path to the external file is specified with src attribute. If you connect an external file
with scripts, don’t embed script into the same <script> tag.

• The HTML <script> tag can be placed in the <head> element, as well as within
the <body> element.

• The script execution doesn’t depend on its location in an HTML document, but the scripts,
that must be executed first, must be placed in the heading of the document.

• The <script> tag can be used in an HTML document many times.

Department of ISE, BMSCE 28 | P a g e


Introduction to Web Programming 22PLC15a

• Attributes
Attribute Value Description

Defines that the script is executed asynchronously. (For external


async async
scripts only).

Defines character encoding, used in an external file with the


charset charset
JavaScript code.

Defines, that the script must be executed after the loading of the
defer defer
page. (For external scripts only).

Defines the URL of an external file with the JavaScript code.


src URL
(Can be defined either relative, or an absolute URL).

type media_type Defines the MIME-type of the script.

• There can be two usage of HTML script tag:


1. to embed script code
2. to link script file
• Embed script code
The script tag can be used within <body> or <head> tag to embed the scripting code.
Example to have script tag within HTML body:

<script type="text/javascript">
document.write("JavaScript is a simple language for javatpoint learners")
</script>
Output:
JavaScript is a simple language for javatpoint learners

Example to have script tag within HTML head tag:


<script type="text/javascript">
function msg(){
alert("Hello Javatpoint");
}
</script>
Output:
Welcome to Javascript

• Link script file


The script tag can be used to link external script file by src attribute. It must be used within
the <head> tag only.

Department of ISE, BMSCE 29 | P a g e


Introduction to Web Programming 22PLC15a

<script type="text/javascript" src="message.js" />


• Default CSS Settings
Most browsers will display the <script> element with the following default values:
script {
display: none;
}

2.11 <link> Tag

• The <link> tag defines the relationship between the current document and an external
resource.

• The <link> element is an empty element; it contains attributes only.

• The <link> tag is most often used to link to external style sheets or to add a favicon to your
website.

• All <link> elements should be placed in the <head> section of the document (commonly
before the closing </head> tag), and they can be used many times.

• The <link> tag can be used to link different versions of a page. This is useful if there are
several translations of content.

• An HTML document can have several <link> elements for loading different types of script
or page.

• Example

Link to an external style sheet:

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

(Note: A favicon is a small, 16x16 pixel icon used on web browsers to represent a website or a
web page. Short for “favorite icon,”’ favicons are commonly displayed on tabs at the top of a web
browser, - but they’re also found on your browser’s bookmark bar, history and in search results,
alongside the page url.

When favicon is created, it serves as website’s icon, or a visual identifier for users to spot website
around the web.

A favicon may also be referred to as a shortcut icon, tab icon, URL icon or bookmark icon.)

Department of ISE, BMSCE 30 | P a g e


Introduction to Web Programming 22PLC15a

• Attributes
Attribute Value Description

Defines the coding of the linked document.


charset char_encoding Not supported in HTML5.

href URL Defines the URL of the external file.

hreflang language_code Defines the text language of the linked document.

media media_query Defines the device, for which the styles will be applied.

alternate
archives
author
bookmark
external
first
help
icon
last
license
Defines the relationship between the current document and the
rel next
linked file.
nofollow
noreferrer
pingback
prefetch
prev
search
sidebar
stylesheet
tag
up

Defines the relationship between the current and linked


reversed documents.
rev relationship Not supported in HTML5.

sizes HeightxWeight Sets the size of associated icons. Used only with rel = "icon".

Defines how the link should be opened:

_blank In a new window.

_self In the current window.

_top To the full width of the window.

_parent In the parent frame.

target frame_name In the frame.

Department of ISE, BMSCE 31 | P a g e


Introduction to Web Programming 22PLC15a

Attribute Value Description

Not supported in HTML5.

Defines the MIME-type (specification for network transfer of


type media_type various types of files) of the linked document.

2.12 Introduction to XHTML


Basic Understanding

Before we proceed to XHTML, let us have a quick view on what are HTML, XML, and
SGML.
• What is SGML?
This is Standard Generalized Markup Language (SGML) application conforming to
International Standard ISO 8879.
This is a language for describing markup languages, particularly those used in electronic
document exchange, document management, and document publishing. HTML is an
example of a language defined in SGML. HTML is widely regarded as the standard
publishing language of the World Wide Web.

• What is XML?
XML stands for EXtensible Markup Language. XML is a markup language much like
HTML and it was designed to describe data. XML tags are not predefined. You must define
your own tags according to your needs.

• What is HTML?
HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. It describes the structure of a Web page and
consists of series of elements (the building blocks of a web page) such as tags and
attributes. These elements tell the browser how to display the content. HTML elements
label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

• Let's see what is meant by Hypertext Markup Language, and Web page.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have
clicked on a hypertext. HyperText is a way to link two or more web pages (HTML
documents) with each other.

Department of ISE, BMSCE 32 | P a g e


Introduction to Web Programming 22PLC15a

Markup language: A markup language is a computer language that is used to apply layout
and formatting conventions to a text document. Markup language makes text more
interactive and dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and translated
by a web browser. A web page can be identified by entering an URL. A Web page can be
of the static or dynamic type. With the help of HTML only, we can create static web pages.
XHTML

• XHTML stands for extensible hypertext markup language which is a connection between
HTML (hypertext mark-up language) and XML (extensible markup language) also at most
of the places XHTML is considered superior than HTML.

• It is the next step in the evolution of the internet. The XHTML 1.0 is the first document
type in the XHTML family.

• XHTML is almost identical to HTML 4.01 with only few differences. This is a cleaner and
stricter version of HTML 4.01. Therefore, it is more compatible with most browsers, and
it maintains a standard of code that can be used for various devices.

• XHTML was developed by World Wide Web Consortium (W3C) to help web developers
make the transition from HTML to XML.

• XHTML is easy to use with other data formats, and it creates more neat code as it is stricter
than HTML.
• XHTML syntax is very similar to HTML syntax and almost all the valid HTML elements
are valid in XHTML as well. But when writing an XHTML document, need to pay extra
attention to make HTML document compliant to XHTML.
• Here are the important points to remember while writing a new XHTML document or
converting existing HTML document into XHTML document −
o Write a DOCTYPE declaration at the start of the XHTML document.
o Write all XHTML tags and attributes in lower case only.
o Close all XHTML tags properly.
o Nest all the tags properly.
o Quote all the attribute values.
o Forbid Attribute minimization.
o Replace the name attribute with the id attribute.
o Deprecate the language attribute of the script tag.

Department of ISE, BMSCE 33 | P a g e


Introduction to Web Programming 22PLC15a

• Every XHTML document is validated against a Document Type Definition. Before


validating an XHTML file properly, a correct DTD must be added as the first or second
line of the file.
• Once you are ready to validate your XHTML document, you can use W3C Validator to
validate your document. This tool is very handy and helps to fix the problems with
document.
• This tool does not require any expertise to perform validation.
• The following statement in the text box shows you details. You need to give complete
URL of the page, which you want to validate and then click Validate Page button.
Input your page address in the box below –

http://www.tutorialspoint.com/xhtml/index.htm

Validate Page

• This validator checks the markup_validity of web documents with various formats
especially in HTML, XHTML, SMIL, MathML, etc.
• There are other tools to perform different other validations.
o RSS/Atom feeds Validator
o CSS stylesheets Validator
o Find Broken Links
o Other validators and tools

Advantages of XHTML
• While using XHTML, the code of web applications becomes more stylish and easier to
reuse.
• It can help the developer create more advanced web projects due to the compatibility with
various devices, and it also supports self-created markups like SVG (scalable vector
graphics).
• XHTML code can easily be converted to PDFs, RSS, and RFT, which allows the developer
to work with a vast range of files.
• XHTML reduce the loading time required by the browser to load an event which can result
in overall speedy development, thus reducing time and energy
• It contains closing tags which is an advantage for beginners, and this also makes the code
look clean and easy to reuse.
• Since XHTML is an official standard of the W3C, your website becomes more compatible
with many browsers and it is rendered more accurately.

Department of ISE, BMSCE 34 | P a g e


Introduction to Web Programming 22PLC15a

• XHTML combines strength of HTML and XML. Also, XHTML pages can be rendered by
all XML enabled browsers.
• XHTML defines quality standard for your webpages and if you follow that, then your web
pages are counted as quality web pages. The W3C certifies those pages with their quality
stamp.

XHTML 1.1 Modules


The XHTML 1.1 document type is made up of the following XHTML modules.
• Structure Module − The Structure Module defines the major structural elements for
XHTML. These elements effectively act as the basis for the content model of many
XHTML family document types. The elements and attributes included in this module are
− body, head, html, and title.
• Text Module − This module defines all of the basic text container elements, attributes,
and their content model − abbr, acronym, address, blockquote, br, cite, code, dfn, div, em,
h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, and var.
• Hypertext Module − The Hypertext Module provides the element that is used to define
hypertext links to other resources. This module supports element a.
• List Module − As its name suggests, the List Module provides list-oriented elements.
Specifically, the List Module supports the following elements and attributes − dl, dt, dd,
ol, ul, and li.
• Object Module − The Object Module provides elements for general-purpose object
inclusion. Specifically, the Object Module supports − object and param.
• Presentation Module − This module defines elements, attributes, and a minimal content
model for simple presentation-related markup − b, big, hr, i, small, sub, sup, and tt.
• Edit Module − This module defines elements and attributes for use in editing-related
markup − del and ins.
• Bidirectional Text Module − The Bi-directional Text module defines an element that can
be used to declare the bi-directional rules for the element's content − bdo.
• Forms Module − It provides all the form features found in HTML 4.0. Specifically, it
supports − button, fieldset, form, input, label, legend, select, optgroup, option, and
textarea.
• Table Module − It supports the following elements, attributes, and content model −
caption, col, colgroup, table, tbody, td, tfoot, th, thead, and tr.
• Image Module − It provides basic image embedding and may be used in some
implementations of client-side image maps independently. It supports the element − img.

Department of ISE, BMSCE 35 | P a g e


Introduction to Web Programming 22PLC15a

• Client-side Image Map Module − It provides elements for client-side image maps − area
and map.
• Server-side Image Map Module − It provides support for image-selection and
transmission of selection coordinates. The Server-side Image Map Module supports −
attribute ismap on img.
• Intrinsic Events Module − It supports all the events discussed in XHTML Events.
• Meta information Module − The Meta information Module defines an element that
describes information within the declarative portion of a document. It includes element
meta.
• Scripting Module − It defines the elements used to contain information pertaining to
executable scripts or the lack of support for executable scripts. Elements and attributes
included in this module are − noscript and script.
• Style Sheet Module − It defines an element to be used when declaring internal style
sheets. The element and attribute defined by this module is − style.
• Style Attribute Module (Deprecated) − It defines the style attribute.
• Link Module − It defines an element that can be used to define links to external resources.
It supports link element.
• Base Module − It defines an element that can be used to define a base URI against which
relative URIs in the document are resolved. The element and attribute included in this
module is − base.
• Ruby Annotation Module − XHTML also uses the Ruby Annotation module as defined
in RUBY and supports − ruby, rbc, rtc, rb, rt, and rp

2.13 Syntactic Differences between HTML and XHTML


• DOCTYPE Declaration:

All XHTML documents must contain a DOCTYPE declaration at the start. There are three
types of DOCTYPE declarations:
o Strict
o Transitional
o Frameset
XHTML 1.0 Strict

o If you are planning to use Cascading Style Sheet (CSS) strictly and avoiding to write most
of the XHTML attributes, then it is recommended to use this DTD. A document
conforming to this DTD is of the best quality.

Department of ISE, BMSCE 36 | P a g e


Introduction to Web Programming 22PLC15a

o If you want to use XHTML 1.0 Strict DTD then you need to include the following line at
the top of your XHTML document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional

o If you are planning to use many XHTML attributes as well as few Cascading Style Sheet
properties, then you should adopt this DTD and you should write your XHTML document
accordingly.
o If you want to use XHTML 1.0 Transitional DTD, then you need to include the following
line at the top of your XHTML document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

o You can use this when you want to use HTML Frames to partition the browser window
into two or more frames.
o If you want to use XHTML 1.0 Frameset DTD, then you need to include following line at
the top of your XHTML document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset

• Case sensitivity:
In HTML, tag and attribute names are case insensitive, meaning that <FORM>, <form>,
and <Form> are equivalent. In XHTML, tag and attribute names must be all lowercase.

<!-- This is invalid in XHTML -->


<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>

<!-- Correct XHTML way of writing this is as follows -->


<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>

• Closing tags:

In HTML, closing tags may be omitted if the processing agent (usually a browser) can infer
their presence. For example, in HTML, paragraph elements often do not have closing tags.
The appearance of another opening paragraph tag is used to infer the closing tag on the
previous paragraph. Thus, in HTML we could have

Department of ISE, BMSCE 37 | P a g e


Introduction to Web Programming 22PLC15a

<p>
During Spring, flowers are born. ...
<p>
During Fall, flowers die. ...

In XHTML, all elements must have closing tags. For elements that do not include content, in
which the closing tag appears to serve no purpose, a slash can be included at the end of the
opening tag as an abbreviation for the closing tag. For example, the following two lines are
equivalent in XHTML:
<input type = ”text” name = ”address”> < / input>
and
<input type = ”text” name = ”address” / >

Some browsers can become confused if the slash at the end is not preceded by a space.

• Quoted attribute values:

In HTML, attribute values must be quoted only if there are embedded special characters or
white-space characters. Numeric attribute values are rarely quoted in HTML. In XHTML, all
attribute values must be double quoted, regardless of what characters are included in the
value.
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" width=250 height=50 />

<!-- Correct XHTML way of writing this is as follows -->


<img src="/images/xhtml.gif" width="250" height="50" />

• Explicit attribute values:

In HTML, some attribute values are implicit; that is, they need not be explicitly stated. For
example, if the multiple attribute appears in a select tag without a value, it specifies that
multiple items can be selected. The following is valid in HTML:

<select multiple = “multiple”>

<!-- This is invalid in XHTML -->


<option selected>

<!-- Correct XHTML way of writing this is as follows -->


<option selected="selected">

Here is a list of the minimized attributes in HTML and the way to write them in XHTML.

Department of ISE, BMSCE 38 | P a g e


Introduction to Web Programming 22PLC15a

HTML Style XHTML Style

compact compact="compact"

checked checked="checked"

declare declare="declare"

readonly readonly="readonly"

disabled disabled="disabled"

selected selected="selected"

defer defer="defer"

ismap ismap="ismap"

nohref nohref="nohref"

noshade noshade="noshade"

nowrap nowrap="nowrap"

multiple multiple="multiple"

noresize noresize="noresize"

• id and name attributes:


HTML markup often uses the name attribute for elements. This attribute was deprecated
for some elements in HTML 4.0, which added the id attribute to nearly all elements. In
XHTML, the use of id is encouraged and the use of name is discouraged. However, form
elements must still use the name attribute because it is employed in processing form data
on the server.
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" name="xhtml_logo" />

<!-- Correct XHTML way of writing this is as follows -->


<img src="/images/xhtml.gif" id="xhtml_logo" />

• Element nesting:

Although HTML has rules against improper nesting of elements, they are not enforced.
Examples of nesting rules are:
(1) an anchor element cannot contain another anchor element, and a form element cannot

Department of ISE, BMSCE 39 | P a g e


Introduction to Web Programming 22PLC15a

contain another form element;


(2) if an element appears inside another element, the closing tag of the inner element must
appear before the closing tag of the outer element;
(3) block elements cannot be nested in inline elements;
(4) text cannot be directly nested in body or form elements; and
(5) list elements cannot be directly nested in list elements. In XHTML, these nesting rules are
strictly enforced.
<!-- This is invalid in XHTML -->
<b><i> This text is bold and italic</b></i>

<!-- Correct XHTML way of writing this is as follows -->


<b><i> This text is bold and italic</i></b>

• The language Attribute


The language attribute of the script tag is deprecated.
The following example shows this difference.
<!-- This is invalid in XHTML -->

<script language="JavaScript" type="text/JavaScript">


document.write("Hello XHTML!");
</script>

<!-- Correct XHTML way of writing this is as follows -->

<script type="text/JavaScript">
document.write("Hello XHTML!");
</script>

Example Program 1:

Strict DTD: It is used when XHTML page contains only markup language. Strict DTD is used
together with cascading style sheets, because this attribute does not allow CSS property in body
tag.

<?xml version="1.0" encoding="UTF-8"?>


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Strict DTD XHTML</title>
</head>
<body>
<div style="color:#090;font-size:40px;
font-weight:bold;text-align:center;

Department of ISE, BMSCE 40 | P a g e


Introduction to Web Programming 22PLC15a

margin-bottom:-25px;">GeeksforGeeks</div>
<p style="text-align:center;font-size:20px;">
A computer science portal</p>
<p style="text-align:center;font-size:20px;">
Option to choose month:
<select name="month">
<option selected="selected">January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>Augusy</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</p>
</body>
</html>

Output:

Example Program 2:

Transitional DTD: It is supported by the older browsers which does not have inbuilt cascading
style sheets supports. There are several attributes enclosing the body tag which are not allowed
in strict DTD.

<?xml version="1.0" encoding="UTF-8"?>


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Transitional DTD XHTML</title>
</head>
<body bgcolor="#dae1ed">
<div style="color:#090;font-size:40px;
font-weight:bold;text-align:center;
margin-bottom:-25px;">GeeksforGeeks
</div>

Department of ISE, BMSCE 41 | P a g e


Introduction to Web Programming 22PLC15a

<p style="text-align:center;font-size:20px;">
A computer science portal</p>
<p style="text-align:center;font-size:20px;">
Option to choose month:
<select name="month">
<option selected="selected">January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>Augusy</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</p>
</body>
</html>

Output:

Example Program 3:

Frameset DTD: The frameset DTD is used when XHTML page contains frames.

<?xml version="1.0" encoding="UTF-8"?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Frameset DTD XHTML</title>
</head>
<frameset cols="30%, 20%, *">
<frameset rows="40%, 30%, *">
<frame src="gfg.html" />
<frame src="gfg1.html" />
<frame src="geeks.html" />
</frameset>
<frameset rows="40%, 60%">

Department of ISE, BMSCE 42 | P a g e


Introduction to Web Programming 22PLC15a

<frame src="g4g.html" />


<frame src="g4g1.html" />
</frameset>
<frameset rows="20%, 20%, 30%, *">
<frame src="geeksforgeeks.html" />
<frame src="geeksforgeeks1.html" />
<frame src="geeksforgeeks2.html" />
<frame src="geeksforgeeks3.html" />
</frameset>
</frameset>
</html>

Output:

Department of ISE, BMSCE 43 | P a g e

You might also like