HTML Lists:

HTML Lists are used to specify lists of information. There are three different types of
HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)

3. Description List or Definition List (dl)

1. HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is
known as numbered list also. The ordered list starts with <ol> tag and the list items start
with <li> tag.

example

<ol type="1">

<li>Aries</li>

<li>Bingo</li>

<li>Leo</li>

<li>Oracle</li>

</ol>

Output:

1. Aries

2. Bingo

3. Leo

4. Oracle

2. Unordered List or Bulleted List (ul)

In HTML Unordered list, all the list items are marked with bullets. It is also known as
bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li>
tag.

1
example

<ul>

<li>Aries</li>

<li>Bingo</li>

<li>Leo</li>

<li>Oracle</li>

</ul>

Output:

⦁ Aries

⦁ Bingo

⦁ Leo

⦁ Oracle

3. Description List or Definition List (dl):

HTML Description list is also a list style which is supported by HTML and XHTML. It is also known
as definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms or other
name-value list.

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.

2. <dt> tag defines a term.

3. <dd> tag defines the term definition (description).

2
example:

<dl>

<dt>Aries</dt>

<dd>One of the 12 horoscope sign.</dd>

<dt>Bingo</dt>

<dd>One of my evening snacks</dd>

<dt>Leo</dt>

<dd>It is also an one of the 12 horoscope sign.</dd>

<dt>Oracle</dt>

<dd>It is a multinational technology corporation.</dd>

</dl>

Output:

Aries

One of the 12 horoscope sign.

Bingo

One of my evening snacks

Leo

It is also an one of the 12 horoscope sign.

Oracle

It is a multinational technology corporation.

HTML Table:
HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.

We can create a table to display data in tabular form, using <table> element, with the help
of <tr> , <td>, and <th> elements.

3
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table
data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section, navigation
bar, body content, footer section etc. But it is recommended to use div tag over table to
manage the layout of the page .

HTML Table Tags:

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for

formatting.

<col> It is used with <colgroup> element to specify column properties for each
column.

<tbody> It is used to group the body content in a

table.

<thead> It is used to group the header content in a

table.

<tfooter> It is used to group the footer content in a table.

example:

<table>

<tr>

<th>First_Name</th>

<th>Last_Name</th>

<th>Marks</th>

4
 </tr>

<tr>

<td>Sonoo</td>

<td>Jaiswal</td>

<td>60</td>

</tr>

<tr>

<td>James</td>

<td>William</td>

<td>80</td>

</tr>

<tr>

<td>Swati</td>

<td>Sironi</td>

<td>82</td>

</tr>

<tr>

<td>Chetna</td>

<td>Singh</td>

<td>72</td>

</tr>

</table>

Output:

5
First_Name

Last_Name

Marks

Sonoo

Jaiswal

60

James

William

80

Swati

Sironi

82

Chetna

Singh

72

1. HTML Table with Border.

There are two ways to specify border for HTML tables.

⦁ By border attribute of table in HTML

⦁ By border property in CSS

1) HTML Border attribute:

You can use border attribute of table tag in HTML to specify border. But it is not
recommended now.

example:

6
<table border="1">

<tr>

<th>First_Name</th>

<th>Last_Name</th>

<th>Marks</th>

</tr>

<tr>

<td>Sonoo</td>

<td>Jaiswal</td>

<td>60</td>

</tr>

<tr>

<td>James</td>

<td>William</td>

<td>80</td>

</tr>

<tr>

<td>Swati</td>

<td>Sironi</td>

<td>82</td>

</tr>

<tr>

<td>Chetna</td>

<td>Singh</td>

7
 <td>72</td>

</tr>

</table>

Output:

2) CSS Border property:

1.It is now recommended to use border property of CSS to specify border in table.

example:

<style>

table, th, td {

border: 1px solid black;

</style>

2. You can collapse all the borders in one border by border-collapse property. It will
collapse the border into one.

example:

<style>

table, th, td {

border: 2px solid black;

border-collapse: collapse;

</style>

HTML Table with cell padding:

You can specify padding for table header and table data by two ways:

⦁ By cellpadding attribute of table in HTML

8
 ⦁ By padding property in CSS

The cellpadding attribute of HTML table tag is obselete now. It is recommended to use
CSS. So let's see the code of CSS.

example:

<style>

table, th, td {

border: 1px solid pink;

border-collapse: collapse;

th, td {

padding: 10px;

</style>

HTML Table width:

We can specify the HTML table width using the CSS width property. It can be specify in
pixels or percentage.

We can adjust our table width as per our requirement. Following is the example to display
table with width.

example:

table{

width: 100%;

Example:

<!DOCTYPE html>

<html>

9
<head>

<title>table</title>

<style>

table{

border-collapse: collapse;

width: 100%;

th,td{

border: 2px solid green;

padding: 15px;

</style>

</head>

<body>

<table>

<tr>

<th>1 header</th>

<th>1 header</th>

<th>1 header</th>

</tr>

<tr>

<td>1data</td>

<td>1data</td>

10
 <td>1data</td>

</tr>

<tr>

<td>2 data</td>

<td>2 data</td>

<td>2 data</td>

</tr>

<tr>

<td>3 data</td>

<td>3 data</td>

<td>3 data</td>

</tr>

</table>

</body>

</html>

HTML Table with colspan:

If you want to make a cell span more than one column, you can use the colspan attribute.

It will divide one cell/row into multiple columns, and the number of columns depend on
the value of colspan attribute.

Let's see the example that span two columns.

CSS code:

<style>

table, th, td {

border: 1px solid black;

11
 border-collapse: collapse;

th, td {

padding: 5px;

</style>

HTML code:

<table style="width:100%">

<tr>

<th>Name</th>

<th colspan="2">Mobile No.</th>

</tr>

<tr>

<td>Ajeet Maurya</td>

<td>abc</td>

<td>xyz</td>

</tr>

</table>

HTML Table with rowspan:

If you want to make a cell span more than one row, you can use the rowspan attribute.

It will divide a cell into multiple rows. The number of divided rows will depend on
rowspan values.

Let's see the example that span two rows.

CSS code:

12
<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 10px;

</style>

HTML code:

<table>

<tr><th>Name</th><td>Ajeet Maurya</td></tr>

<tr><th rowspan="2">Mobile No.</th><td>abc</td></tr>

<tr><td>xyz</td></tr>

</table>

HTML table with caption:

HTML caption is diplayed above the table. It must be used after table tag only.

example:

<table>

<caption>Student Records</caption>

<tr>

<th>First_Name</th>

<th>Last_Name</th>

<th>Marks</th>

13
 </tr>

<tr>

<td>Vimal</td>

<td>Jaiswal</td>

<td>70</td>

</tr>

<tr>

<td>Mike</td>

<td>Warn</td>

<td>60</td>

</tr>

<tr>

<td>Shane</td>

<td>Warn</td>

<td>42</td>

</tr>

<tr>

<td>Jai</td>

<td>Malhotra</td>

<td>62</td>

</tr>

</table>

Styling HTML table even and odd cells:

CSS code:

14
<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 10px;

table#alter tr:nth-child(even) {

background-color: #eee;

table#alter tr:nth-child(odd) {

background-color: #fff;

table#alter th {

color: white;

background-color: gray;

</style>

HTML Image:

HTML img tag is used to display image on the web page. HTML img tag is an empty tag
that contains attributes only, closing tags are not used in HTML image element.

Syntax of <img> tag:

<img src= "url">

15
example of HTML image.

<h2>HTML Image Example</h2>

<img src="good_morning.jpg" alt="Good Morning Friends"/>

Attributes of HTML img tag:

1) src

It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.

2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value
of the alt attribute describe the image in words.

3) width

It is an optional attribute which is used to specify the width to display the image. It is not
recommended now. You should apply CSS in place of width attribute.

4) height

It h3 the height of the image. The HTML height attribute also supports iframe, image and
object elements. It is not recommended now. You should apply CSS in place of height
attribute.

Use of height and width attribute with img tag:

If we want to display image according to our requirement, then we can set height and
width attributes of image. Both of these attributes are optional. If you do not specify these
attributes, the browser will shown an image width its original size. You can set the value
of height and width attribute in pixels or in percentage ranging from 1 to 100.

Example:

<img src="animal.jpg" height="180" width="300" alt="animal image">

5) hspace attribute:

The hspace attribute is used to inserts an equal space on the left and right side of an
image.

6) vspace attribute:

16
The vspace attribute is used to inserts an equal space on the top and bottom of an image.

Example:

<!DOCTYPE>

<html>

<body>

<h2>HTML Image Example using vspace and haspce attribute </h2>

<img src="good-morning.jpg" alt="Good Morning Friends"/ vspace="30" hspace="20">

</body>

</html>

7) border attribute:

If you want to create a frame around an image then it is possible using border attribute of
<img> tag. By default, no border appears around an image unless the image is a link. In
order to include border of specific width, we assign the border attribute to some numeric
value in the <img> tag.

Example:

<!DOCTYPE>

<html>

<body>

<h2> HTML Image Example using border attribute </h2>

<img src = "good-morning.jpg" alt = "Good Morning Friends"/ border=3>

</body>

</html>

FRAMES:

Frames allow to split the browser window into the multiple rectangular areas. Each area
has its own html webpage, which functions independently.

A frameset is a collection of frames that spans the wntire browser. It instructs the

17
browser on how to devide the browser window into frames and which web page should
be loaded in each frame.

Tag Description

⦁ <frameset>----------</frameset> It takes the place of the body > tag , it

does not have the tag found in the body> tag;

instead , it has the frame tag , which is used to add each

frame.

⦁ <frame>----------</frame> The content of various frames in a web

page may be

defined.

⦁ <base>----------</base> It's used to set the deafult target frame in any

page

with links to content that's displayed in a different

frame.

FORMS:

Forms are used to input the values. These values are send to the server for processing.
Forms use input elements such as text fields, check boxes, radio buttons, lists, submit
buttons etc.to enter the data into it.

Tag Description

⦁ <Form>----------</Form> It is used to create HTML forms.

⦁ <Input>----------</Input> Specifies the input fields.

⦁ <textarea>----------</textarea> This property specifies a text area control

that

enables multiline text to be entered.

HTML Form:

An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.

18
An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. .

Why use HTML Form:

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form
such as shipping address and credit/debit card details so that item can be sent to the given
address.

<form action="server url" method="get|post">

//input controls e.g. textfield, textarea, radiobutton, button

</form>

HTML <input> element:

The HTML <input> element is fundamental form element. It is used to create form fields,
to take input from user. We can apply different input filed to gather different information
form user. Following is the example to show the simple text input.

Example:

<body>

<form>

Enter your name <br>

<input type="text" name="username">

</form>

</body>

HTML TextField Control:

The type="text" attribute of input tag creates textfield control also known as single line
textfield control. The name attribute is optional, but it is required for the server side
component such as JSP, ASP, PHP etc.

<form>

First Name: <input type="text" name="firstname"/> <br/>

19
 Last Name: <input type="text" name="lastname"/> <br/>

</form>

HTML <textarea> tag in form

The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of
<textarea> can be specify either using "rows" or "cols" attribute or by CSS.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Form in HTML</title>

</head>

<body>

<form>

Enter your address:<br>

<textarea rows="2" cols="20"></textarea>

</form>

</body>

</html>

Label Tag in Form:

It is considered better to have label in form. As it makes the code parser/browser/user

friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to have
for attribute in label tag that must be same as id attribute of input tag.

Example:

<form>

20
 <label for="firstname">First Name: </label> <br/>

<input type="text" id="firstname" name="firstname"/> <br/>

<label for="lastname">Last Name: </label>

<input type="text" id="lastname" name="lastname"/> <br/>

</form>

HTML Password Field Control:

The password is not visible to the user in password field control.

Example:

<form>

<label for="password">Password: </label>

<input type="password" id="password" name="password"/> <br/>

</form>

HTML 5 Email Field Control:

The email field in new in HTML 5. It validates the text for correct email address. You
must use @ and . in this field.

Example:

<form>

<label for="email">Email: </label>

<input type="email" id="email" name="email"/> <br/>

</form>

Radio Button Control:

The radio button is used to select one option from multiple options. It is used for selection
of gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a
time.

21
Using radio buttons for multiple options, you can only choose a single option at a time.

Example:

<form>

<label for="gender">Gender: </label>

<input type="radio" id="gender" name="gender" value="male"/>Male

<input type="radio" id="gender" name="gender" value="female"/>Female <br/>

</form>

Checkbox Control:

The checkbox control is used to check multiple options from given checkboxes.

<form>

Hobby:<br>

<input type="checkbox" id="cricket" name="cricket" value="cricket"/>

<label for="cricket">Cricket</label> <br>

<input type="checkbox" id="football" name="football" value="football"/>

<label for="football">Football</label> <br>

<input type="checkbox" id="hockey" name="hockey" value="hockey"/>

<label for="hockey">Hockey</label>

</form>

Submit button control:

HTML <input type="submit"> are used to add a submit button on web page. When user
clicks on submit button, then form get submit to the server.

Syntax:

<input type="submit" value="submit">

The type = submit , specifying that it is a submit button

22
The value attribute can be anything which we write on button on web page.

The name attribute can be omit here.

Example:

<form>

<label for="name">Enter name</label><br>

<input type="text" id="name" name="name"><br>

<label for="pass">Enter Password</label><br>

<input type="Password" id="pass" name="pass"><br>

<input type="submit" value="submit">

</form>

HTML <fieldset> element:

The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped elements.

Example:

<form>

<fieldset>

<legend>User Information:</legend>

<label for="name">Enter name</label><br>

<input type="text" id="name" name="name"><br>

<label for="pass">Enter Password</label><br>

<input type="Password" id="pass" name="pass"><br>

<input type="submit" value="submit">

</fieldset>

lt;/form>

23
XML:

XML (eXtensible Markup Language) is a markup language that defines rules for
encoding documents in a format that is both human-readable and machine-readable. It is
widely used to structure, store, and transport data, especially in situations where data
needs to be shared across different systems or platforms.

Characteristics of XML:

Self-descriptive: XML documents contain data and describe the structure of that data
using custom tags.

Extensible: You can define your own tags. There is no fixed set of predefined tags
(unlike HTML, which has predefined tags like <h1>, <p>, etc.).

Hierarchical Structure: XML data is structured in a tree-like format, with elements

nested within each other.

Platform-independent: XML is not tied to any specific operating system or software. It

is text-based and can be read by any system that understands the XML standard.

Supports Unicode: XML supports character encoding schemes like UTF-8 and UTF-16,
making it compatible with a wide range of languages and symbols.

Basic Structure of an XML Document:

An XML document consists of the following key components:

⦁ XML Declaration: An optional declaration at the beginning of the document that

specifies the version and character encoding.

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

⦁ Root Element: The root element encloses all other elements in the document. An
XML document must have exactly one root element.

<root> ... </root>

⦁ Elements: Elements represent the data in the XML document. They are enclosed
by start (<element>) and end (</element>) tags.

<book>XML for Beginners</book>

⦁ Attributes: Elements can have attributes that provide additional information

24
 about an element.

<book genre="programming">XML for Beginners</book>

⦁ Text: Data that is enclosed within an element is considered the text content of that
element.

<book>XML for Beginners</book>

⦁ Comments: Comments are written inside <!-- --> tags and are not part of the data.

<!-- This is a comment -->

⦁ CDATA: Used to escape text that might otherwise be treated as XML code.

<![CDATA[<html><body></body></html>]]>

Example of an XML Document:

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

<library>

<book id="1">

<title>XML for Beginners</title>

<author>John Doe</author>

<year>2024</year>

<genre>Programming</genre>

</book>

<book id="2">

<title>Advanced XML</title>

<author>Jane Smith</author>

<year>2025</year>

<genre>Technology</genre>

</book>

25
</library>

Root element: <library> is the root element, and it contains all other elements.

Child elements: <book> is a child element of <library>. Each <book> element contains
other child elements like <title>, <author>, <year>, and <genre>.

Attributes: The id attribute in the <book> element provides additional information about
each book.

Advantages of XML:

⦁ Human-Readable and Machine-Readable: XML is both easy for humans to

understand and processable by machines.

⦁ Platform Independent: XML is language- and platform-independent, making it

ideal for data exchange between different systems.

⦁ Supports Complex Data Structures: With its hierarchical nature, XML can
represent complex, nested data structures.

Disadvantages of XML:

⦁ Verbose: XML files can become quite large and complex because each data
element needs to be wrapped in tags.

⦁ Performance Issues: Parsing XML can be slower compared to more compact

data formats (such as JSON or Protocol Buffers).

⦁ No Built-In Data Types: XML itself does not define data types for elements,
though this can be handled with XML Schema (XSD).

Uses of XML:

⦁ Web Services: XML is commonly used in web services (such as SOAP) for
exchanging data between clients and servers.

⦁ Configuration Files: Many software applications use XML for configuration

(e.g., .xml files for settings in software like Eclipse).

⦁ Document Representation: XML is used for representing structured documents

in a wide range of applications (e.g., Microsoft Word, OpenOffice, etc.).

⦁ Data Interchange: XML is used as a standard format for exchanging data

26
 between different applications or systems.

Document Type Definition (DTD):

A Document Type Definition (DTD) is a set of rules that define the structure and the legal
elements and attributes of an XML document. DTDs specify what elements are allowed
in the document, the order of those elements, and the attributes that can be assigned to the
elements.

DTD can be specified in two ways:

Internal DTD: The DTD is defined directly within the XML document itself.

External DTD: The DTD is defined in a separate file and referenced by the XML
document.

Elements of a DTD:

1. Element Declaration: Specifies the structure of an element. It defines what kind of

data an element can contain (text, other elements, etc.).

Example:

<!ELEMENT book (title, author, year)>

This defines a book element that must contain title, author, and year elements in that
order.

2. Attribute Declaration: Defines attributes that can be associated with elements, along
with constraints (like data type or whether the attribute is required).

Example:

<!ATTLIST book id ID #REQUIRED>

This indicates that the book element must have an id attribute of type ID and that it is
required.

3. Entity Declaration: Allows you to define shortcuts for commonly used content (like
special characters or reusable text).

<!ENTITY copy "©">

4. Notation Declaration: Describes the format of data or external documents associated

with elements.

27
<!NOTATION pdf SYSTEM "application/pdf">

EXAMPLE:

<?xml version="1.0"?>

<!DOCTYPE library [

<!ELEMENT library (book+)>

<!ELEMENT book (title, author, year)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT author (#PCDATA)>

<!ELEMENT year (#PCDATA)>

]>

<library>

<book>

<title>XML Fundamentals</title>

<author>John Doe</author>

<year>2024</year>

</book>

<book>

<title>Advanced XML</title>

<author>Jane Smith</author>

<year>2025</year>

</book>

</library>

Advantages of Using DTD:

⦁ Data Structure Validation: Ensures XML documents conform to a specified

28
 structure, promoting consistency.

⦁ Standardization: Allows shared understanding of how to structure XML

documents across systems.

Limitations of DTD:

⦁ Limited Data Type Support: DTDs only support a small set of data types and
lack full data validation features compared to XML Schema.

⦁ No Namespace Support: DTDs don't support XML namespaces, which can cause
conflicts in documents that use multiple vocabularies.

XML Schema (XSD):

XML Schema Definition (XSD) is a language used for describing the structure, content,
and data types of XML documents. It defines the rules for what elements and attributes
are allowed, their data types, relationships between elements, and other constraints,
providing a more powerful way of validating XML documents than DTD (Document
Type Definition).

Benefits of XML Schema (XSD) Over DTD:

⦁ Data Types: Unlike DTD, which only supports basic types (like text or numbers),
XSD provides a rich set of data types (e.g., string, integer, date, boolean).

⦁ Namespaces: XML Schema supports namespaces, which helps avoid element

name conflicts when combining different XML vocabularies.

⦁ Better Validation: XSD offers more precise control over data validation,
allowing for constraints like maximum length, ranges, and pattern matching.

⦁ Extensibility: XSD is extensible and can handle complex data structures,

including nested elements, lists, and choice models.

Components of an XML Schema:

1. Element Declaration: Specifies the structure of an element.

2. Attribute Declaration: Defines the attributes that elements can have.

3. Complex Types: Describes elements that contain other elements or attributes.

4. Simple Types: Defines elements that contain only text data.

29
5. Data Types: Specifies the type of data (e.g., string, integer, date).

6. Restrictions: Applies constraints to the data (e.g., patterns, min/max values).

30