Scribd
Upload
12 views25 pages

Web Notes 2

The document discusses different types of HTML lists like ordered, unordered and description lists and provides examples of how to create them using HTML tags. It also covers other HTML table related tags and attributes like border, padding, width etc and provides code samples to demonstrate their usage.

Uploaded by

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

Web Notes 2

The document discusses different types of HTML lists like ordered, unordered and description lists and provides examples of how to create them using HTML tags. It also covers other HTML table related tags and attributes like border, padding, width etc and provides code samples to demonstrate their usage.

Uploaded by

Aarush Gaind
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 25

HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. 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)

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.

1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>

Output:

1. Aries
2. Bingo
3. Leo
4. Oracle

HTML Unordered List or Bulleted List


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. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>

Output:

o Aries
o Bingo
o Leo
o Oracle

HTML Description List or Definition List


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).

1. <dl>
2. <dt>Aries</dt>
3. <dd>-One of the 12 horoscope sign.</dd>
4. <dt>Bingo</dt>
5. <dd>-One of my evening snacks</dd>
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd>
8. <dt>Oracle</dt>
9. <dd>-It is a multinational technology corporation.</dd>
10. </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 border attribute




The HTML border attribute is used to set the visible border width to most HTML
elements within the body.
Syntax:
<tag border="value">
In this example, we will see code for the table border attribute in an HTML
document.
 HTML

<!DOCTYPE html>

<html>
<head>

<title>

HTML table border Attribute

</title>

</head>

<body>

<h1>GeeksforGeeks</h1>

<h2>HTML table border Attribute</h2>

<table border="1">

<caption>Author Details</caption>

<tr>

<th>NAME</th>

<th>AGE</th>
<th>BRANCH</th>

</tr>

<tr>

<td>BITTU</td>

<td>22</td>

<td>CSE</td>

</tr>

<tr>

<td>RAM</td>

<td>21</td>

<td>ECE</td>

</tr>

</table>

</body>

</html>

Output:
HTML width Attribute
Definition and Usage
The width attribute specifies the width of the element, in pixels.

The width attribute can be used on the following elements:

Elements Attribute

<canvas> width

<embed> width

<iframe> width

<img> width
<input> width

<object> width

<video> width

HTML align Attribute


HTML align Attribute in HTML is used to specify the alignment of the text content of The
Element. This attribute is used in all elements. The Align attribute can also be set using the
CSS property “text-align: ” or in <img> “vertical-align: “. For horizontal alignment,
use align with values like “left,” “center,” or “right” within appropriate tags.
Note: The align attribute is deprecated in HTML5, and styles should be used via CSS for
better practices.

Syntax:
<element_name align="left | right | center | justify">
Attribute Values:
Attribute Values Description

left It sets the text left-align.

right It sets the text right-align.

center It sets the text center-align.

It stretches the text of a paragraph to set


justify the width of all lines equal.

HTML alt Attribute


Definition and Usage

The alt attribute provides alternative information for an image if a user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user uses
a screen reader).
Note: The alt attribute is required for the <img> element.

Note: For <input> elements, the alt attribute can only be used with <input type="image">.

Attribute Values: It contains single value text which is used to specify the alternative
text for the supported element if the image is not displaying.
Example: Img alt attribute.

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.

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.

HTML Table with Border


There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML

1) HTML Border attribute


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

1. <table border="1">
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>
Test it Now
Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

HTML Table with cell padding


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

1. By cellpadding attribute of table in HTML


2. 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.

1. <style>
2. table, th, td {
3. border: 1px solid pink;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>

Output:

Name Last Name Marks

Sonoo Jaiswal 60
James William 80

Swati Sironi 82

Chetna Singh 72

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.

1. table{
2. width: 100%;
3. }

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>table</title>
5. <style>
6. table{
7. border-collapse: collapse;
8. width: 100%;
9. }
10. th,td{
11. border: 2px solid green;
12. padding: 15px;
13. }
14.
15. </style>
16. </head>
17. <body>
18. <table>
19. <tr>
20. <th>1 header</th>
21. <th>1 header</th>
22. <th>1 header</th>
23. </tr>
24. <tr>
25. <td>1data</td>
26. <td>1data</td>
27. <td>1data</td>
28. </tr>
29. <tr>
30. <td>2 data</td>
31. <td>2 data</td>
32. <td>2 data</td>
33. </tr>
34. <tr>
35. <td>3 data</td>
36. <td>3 data</td>
37. <td>3 data</td>
38. </tr>
39. </table>
40. </body>
41. </html>

Output:
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.

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 5px;
8. }
9. </style>

HTML code:

1. <table style="width:100%">
2. <tr>
3. <th>Name</th>
4. <th colspan="2">Mobile No.</th>
5. </tr>
6. <tr>
7. <td>Ajeet Maurya</td>
8. <td>7503520801</td>
9. <td>9555879135</td>
10. </tr>
11. </table>

Output:

Name Mobile No.

Ajeet Maurya 7503520801 9555879135

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:

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>
HTML code:

1. <table>
2. <tr><th>Name</th><td>Ajeet Maurya</td></tr>
3. <tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
4. <tr><td>9555879135</td></tr>
5. </table>

Output:

Name Ajeet Maurya

7503520801
Mobile No.
9555879135

HTML table with caption


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

1. <table>
2. <caption>Student Records</caption>
3. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>
6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>
7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
8. </table>

HTML Background-color
9. The <bgcolor> is the attribute to set the background color of an HTML element.
This attribute is used with the following tags:
o <body>
o <table>
o <marquee>
o <td>
o <th>
o <tr>

Syntax
<"tag" bgcolor="Color_name|rgb number|Hex number">

Example 1: Use the <bgcolor> attribute with the <body> tag

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of Background color Attribute
6. </title>
7. </head>
8. <body bgcolor="lightblue">
9. <!-- The attribute bgcolor use with the body tag to set the background of web page as lightblue
-->
10. <center>
11. <h1> javaTpoint</h1>
12. <br> <br>
13. <center>
14. <h2> Hyper Text Markup Language </h2>
15. </center>
16. </body>
17. </html>

Output:
HTML <link> tag
HTML <link> tag is used to specify the relationship between the current document and
external source.

The <link> tag is commonly used to link the external Stylesheet for the current
document, but it can also use with link site icons. It is placed on the head section of the
document.

Types of Html Hyperlink:


Html Hyperlinks are generally divided into following types:-

External Links:
The html Hyperlink that links to another website or web page is called
external link.

Internal Links:
The html Hyperlink that links to another web page located in the same
website, is called internal link.

How to use an image as a link in HTML?

We can add image as a link and other HTML elements as a link. A link is a
connection from one Web page to another web page.
We can add page links to a web page. HTML links are hyperlinks. The <a> tag
defines a hyperlink and used to link from one page to another.
The href attribute is used with the <a> tag, which indicates the link's
destination.
To make page links in an HTML page, use the <a> and </a> tags,
with href attribute used to define the links. We should use the <a>…</a> tags
inside <body>…</body> tags.

Syntax

Following is the syntax to add image as a link on the web page.

<a href="link address"><img src="image destination"></a>

HTML <frame> tag


HTML <frame> tag define the particular area within an HTML file where another HTML
web page can be displayed.

A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections
or frames, and each frame can contain different web pages.

The window is divided into frames in a similar way the tables are
organized: into rows and columns.

Example 1
Create Vertical frames:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset cols="25%,50%,25%">
7. <frame src="frame1.html" >
8. <frame src="frame2.html">
9. <frame src="frame3.html">
10. </frameset>
11. </html>
Test it Now

Output:

Frame1.html

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #7fffd4;
7. height: 500px;
8. }
9. </style>
10. </head>
11. <body>
12. <div>
13. <h2>This is first frame</h2>
14. </div>
15. </body>
16. </html>
Frame2.html

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #2f4f4f;
7. height: 500px;
8.
9. }
10. </style>
11. </head>
12. <body>
13. <div>
14. <h2>This is Second frame</h2>
15. </div>
16. </body>
17. </html>

Frame3.html

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. div{
6. background-color: #c1ffc1;
7. height: 500px;
8. }
9. </style>
10. </head>
11. <body>
12. <div>
13. <h2>This is Third frame</h2>
14. </div>
15. </body>
16. </html>

Example 2:
Create Horizontal frames:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Frame tag</title>
5. </head>
6. <frameset rows="30%, 40%, 30%">
7. <frame name="top" src="frame1.html" >
8. <frame name="main" src="frame2.html">
9. <frame name="bottom" src="frame3.html">
10. </frameset>
11. </html>
Test it Now

Output:
Attribute
Tag-specific attribute
Attribute Value Description

frameborder 0 It specifies whether to display a border around the frame or not, and its
1 default value is 1

longdsec URL It specifies a page which contains the long description of the content of the
frame.

marginheigh pixels It specifies the top and bottom margins of the frame.
t

marginwidth pixels It defines the height of the margin between frames.

name text It is used to assign the name to the frame.

noresize noresize It is used to prevent resizing of the frame by the user.

scrolling yes It specifies the existence of the scrollbar for overflowing content.
no
auto

src URL It specifies the URL of the document which we want to display in a frame.

Supporting Browsers
Element Chrome IE Firefox Opera Safari

<frame> Yes Yes Yes Yes Yes


HTML frameset Tag
Read
Courses
Jobs



The <frameset> tag in HTML is used to define the frameset. The <frameset> element
contains one or more frame elements. It is used to specify the number of rows and
columns in frameset with their pixel of spaces. Each element can hold a separate
document.
Note: The <frameset> tag is not supported in HTML5.
Syntax:
<frameset cols = "pixels|%|*">
Attributes: The list of frameset attributes are given below:

 cols: The cols attribute is used to create vertical frames in a web browser.
This attribute is basically used to define the no. of columns and their size
inside the frameset tag.
 rows: The rows attribute is used to create horizontal frames in the web
browser. This attribute is used to define the no. of rows and their size inside
the frameset tag.
 border: This attribute of frameset tag defines the width of the border of each
frame in pixels. Zero value is used for no border.
 frameborder: This attribute of frameset tag is used to specify whether a
three-dimensional border should be displayed between the frames or not for
this use two values 0 and 1, where 0 defines no border and value 1 signifies
for yes there will be a border.
 framespacing: This attribute of frameset tag is used to specify the amount
of spacing between the frames in a frameset. This can take any integer
value as a parameter which basically denotes the value in pixel.
Below examples illustrate the <frameset> element in HTML:
Example 1:
 HTML

<!DOCTYPE html>
<html>

<head>

<title>frameset attribute</title>

</head>

<!-- frameset attribute starts here -->

<frameset rows = "20%, 60%, 20%">

<frame name = "top" src = "attr1.png" />

<frame name = "main" src = "gradient3.png" />

<frame name = "bottom" src = "col_last.png" />

<noframes>

<body>The browser you are working does not

support frames.</body>

</noframes>

</frameset>

<!-- frameset attribute ends here -->

</html>

Output:
The above example basically used to create three horizontal frames: top,
middle, and bottom using row attribute of frameset tag, and the noframe tag is
used for that browser that doesn’t support noframe.

You might also like