Scribd
Upload
2 views

frontend4

The document outlines the different types of lists in HTML, including ordered lists, unordered lists, and description lists, along with their respective tags and examples. It also covers HTML tables, detailing the structure and tags used to create tables, and provides examples of various table formats. Additionally, the document discusses HTML forms, including form components and attributes such as action and target.

Uploaded by

Thallapalli Gayathri
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

frontend4

The document outlines the different types of lists in HTML, including ordered lists, unordered lists, and description lists, along with their respective tags and examples. It also covers HTML tables, detailing the structure and tags used to create tables, and provides examples of various table formats. Additionally, the document discusses HTML forms, including form components and attributes such as action and target.

Uploaded by

Thallapalli Gayathri
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 13

Types of List in HTML

=====================
We have three types of list in HTML.

1) Ordered List

2) Unordered List

3) Description List

1) Ordered List
----------------
Ordered list contains numerics and alphabets.

A <ol> tag is used to represent ordered list.

Ordered list contains list of items.

A <li> tag is used to represent list of item.

ex:
---
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
Courses:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ol>
</body>
</html>

ex:
----
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
Courses:
<ol start="101">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ol>
</body>
</html>

ex:
---
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
Courses:
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ol>
</body>
</html>

ex:
---
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
Courses:
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ol>
</body>
</html>

ex:
----
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
Courses:
<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ol>
</body>
</html>

ex:
----
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
Courses:
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ol>
</body>
</html>

2) Unordered List
------------------
Unordered list contains bullets.

A <ul> tag is used to represent unordered list.

Unordered list contains list of items.

A <li> tag is used to represent list of item.

ex:
----
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
Courses:
<ul type="desc">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ul>
</body>
</html>

ex:
----
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
Courses:
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ul>
</body>
</html>

ex:
---
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
Courses:
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ul>
</body>
</html>

3) Description List
---------------------
A <dl> tag is used to represent description list.

A description list contains description term and description definition.

A <dt> tag is used to represent description term.

A <dd> tag is used to represent description definition.

ex:
---
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>It is widely used language on web to develop web pages</dd>
</dl>
</body>
</html>

HTML Tables
============
A table is used to represent the data.

A table is a collection of rows and columns.

A <table> tag is used to represent a table.

A <tr> tag is used to represent table row.

A <th> tag is used to represent table heading

A <td> tag is used to represent table data.

A table row comes in bold and centered.

A table data comes is normal text and left align.


ex:
---
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<table border="0">
<tr>
<th>No</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr>
<td>101</td>
<td>Alan</td>
<td>Texas</td>
</tr>
<tr>
<td>102</td>
<td>Jose</td>
<td>Florida</td>
</tr>
<tr>
<td>103</td>
<td>Mark</td>
<td>Chicago</td>
</tr>
<tr>
<td>104</td>
<td>James</td>
<td>Vegas</td>
</tr>

</table>
</body>
</html>

ex:
---
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<table border="1" width="50%">
<tr>
<th>No</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr>
<td>101</td>
<td>Alan</td>
<td>Texas</td>
</tr>
<tr>
<td>102</td>
<td>Jose</td>
<td>Florida</td>
</tr>
<tr>
<td>103</td>
<td>Mark</td>
<td>Chicago</td>
</tr>
<tr>
<td>104</td>
<td>James</td>
<td>Vegas</td>
</tr>

</table>
</body>
</html>

ex:
----
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<table border="1" cellpadding="10px" cellspacing="10px">
<tr>
<th>No</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr>
<td>101</td>
<td>Alan</td>
<td>Texas</td>
</tr>
<tr>
<td>102</td>
<td>Jose</td>
<td>Florida</td>
</tr>
<tr>
<td>103</td>
<td>Mark</td>
<td>Chicago</td>
</tr>
<tr>
<td>104</td>
<td>James</td>
<td>Vegas</td>
</tr>

</table>
</body>
</html>

ex:
----
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<table border="1" width="50%" align="center">
<tr bgcolor="cyan">
<th>No</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr>
<td>101</td>
<td>Alan</td>
<td>Texas</td>
</tr>
<tr>
<td>102</td>
<td>Jose</td>
<td>Florida</td>
</tr>
<tr>
<td>103</td>
<td>Mark</td>
<td>Chicago</td>
</tr>
<tr>
<td>104</td>
<td>James</td>
<td>Vegas</td>
</tr>

</table>
</body>
</html>

ex:
----
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<table border="1" width="50%" align="center">
<caption>Employee Details</caption>
<tr bgcolor="cyan">
<th>No</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr>
<td>101</td>
<td>Alan</td>
<td>Texas</td>
</tr>
<tr>
<td>102</td>
<td>Jose</td>
<td>Florida</td>
</tr>
<tr>
<td>103</td>
<td>Mark</td>
<td>Chicago</td>
</tr>
<tr>
<td>104</td>
<td>James</td>
<td>Vegas</td>
</tr>

</table>
</body>
</html>

ex:
---
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<table border="1" width="50%" align="center">
<caption>Employee Details</caption>
<tr bgcolor="cyan">
<th>No</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr>
<td>101</td>
<td>Alan</td>
<td>Texas</td>
</tr>
<tr>
<td>102</td>
<td>Jose</td>
<td>Florida</td>
</tr>
<tr>
<td>103</td>
<td>Mark</td>
<td>Chicago</td>
</tr>
<tr>
<td>104</td>
<td>James</td>
<td>Vegas</td>
</tr>
<tr>
<td colspan="3"><center>Thank You</center></td>
</tr>
</table>
</body>
</html>

HTML Forms
===========
HTML forms are used to accept the data from the user.

HTML forms will forward the data to database or server for processing.

A <form> tag is used to represent HTML form.

We have following list of form components.

ex:
Label
TextField
PasswordField
Radio Button
Checkbox
SelectBox
TextArea
Buttons
and etc.

ex:
---
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<form>
<label>UserName:</label>
<input type="text" name="t1"/>

<br>
<label>Password:</label>
<input type="password" name="t2"/>

<br>
<label>Gender</label>
<input type="radio" name="t3" value="male"/> MALE
<input type="radio" name="t3" value="female"/> FEMALE

<br>
<label>Maritial Status:</label>
<input type="checkbox" name="t4" value="married"/> MARRIED
<input type="checkbox" name="t4" value="single"/> SINGLE

<br>
<label>Country:</label>
<select name="t5">
<option value="">none</option>
<option value="india">India</option>
<option value="australia">Australia</option>
<option value="canada">Canada</option>
</select>

<br>
<label>Address:</label>
<textarea name="t6" rows="5" cols="15"> </textarea>

<br>
<input type="reset" value="reset"/>
<input type="submit" value="submit"/>
</form>
</body>
</html>

A action attribute describes what action has to be performed when user clicked on
submit button.

ex:
----
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<form action="#">
<label>UserName:</label>
<input type="text" name="t1"/>

<br>
<label>Password:</label>
<input type="password" name="t2"/>

<br>
<label>Gender</label>
<input type="radio" name="t3" value="male"/> MALE
<input type="radio" name="t3" value="female"/> FEMALE

<br>
<label>Maritial Status:</label>
<input type="checkbox" name="t4" value="married"/> MARRIED
<input type="checkbox" name="t4" value="single"/> SINGLE

<br>
<label>Country:</label>
<select name="t5">
<option value="">none</option>
<option value="india">India</option>
<option value="australia">Australia</option>
<option value="canada">Canada</option>
</select>

<br>
<label>Address:</label>
<textarea name="t6" rows="5" cols="15"> </textarea>

<br>
<input type="reset" value="reset"/>
<input type="submit" value="submit"/>
</form>
</body>
</html>

A target attribute describes a submitted data must be open in a same window or new
window.

ex:
---
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<form action="#" target="_self">
<label>UserName:</label>
<input type="text" name="t1"/>

<br>
<label>Password:</label>
<input type="password" name="t2"/>

<br>
<label>Gender</label>
<input type="radio" name="t3" value="male"/> MALE
<input type="radio" name="t3" value="female"/> FEMALE

<br>
<label>Maritial Status:</label>
<input type="checkbox" name="t4" value="married"/> MARRIED
<input type="checkbox" name="t4" value="single"/> SINGLE

<br>
<label>Country:</label>
<select name="t5">
<option value="">none</option>
<option value="india">India</option>
<option value="australia">Australia</option>
<option value="canada">Canada</option>
</select>

<br>
<label>Address:</label>
<textarea name="t6" rows="5" cols="15"> </textarea>

<br>
<input type="reset" value="reset"/>
<input type="submit" value="submit"/>
</form>
</body>
</html>

ex:
---
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<form action="#" target="_blank">
<label>UserName:</label>
<input type="text" name="t1"/>

<br>
<label>Password:</label>
<input type="password" name="t2"/>

<br>
<label>Gender</label>
<input type="radio" name="t3" value="male"/> MALE
<input type="radio" name="t3" value="female"/> FEMALE

<br>
<label>Maritial Status:</label>
<input type="checkbox" name="t4" value="married"/> MARRIED
<input type="checkbox" name="t4" value="single"/> SINGLE

<br>
<label>Country:</label>
<select name="t5">
<option value="">none</option>
<option value="india">India</option>
<option value="australia">Australia</option>
<option value="canada">Canada</option>
</select>

<br>
<label>Address:</label>
<textarea name="t6" rows="5" cols="15"> </textarea>

<br>
<input type="reset" value="reset"/>
<input type="submit" value="submit"/>
</form>
</body>
</html>

HTML Colors
============
HTML supports two values in color.

1) Valid color name

2) Hexavalue

1) Valid color name


--------------------
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body bgcolor="forestgreen">
<h1>
<font color="tomato"> This is HTML Colors Example </font>
</h1>
</body>
</html>

2) Hexavalue
------------
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body bgcolor="#FFFF00">
<h1>
<font color="#FF0000"> This is HTML Colors Example </font>
</h1>
</body>
</html>

You might also like