Lesson 3:
Today is the 3rd lesson of HTML. Today we discuss about the Tables, Lists and Images in HTML.
Table:
Here you learn that how to make Table using HTML.
1. Its start with TABLE tag and end with /TABLE.
2. Border show the thickness of table lines.
3. For no border set border value to “0”.
4. Then to start first Row of Table, write TR (Table Row) tag.
5. To start new Row Close TR and start New TR tag.
6. To Add Columns, start TD (Table Data) within TR tag.
Following are the Tags of Table, copy and paste the following tags to NOTEPADE and save file as FileName.html
<html>
<head>
<title>Table</title>
</head>
<body>
<h1> Table, Lists, Images </h1>
<h2>Here is table Exemple </h2>
<table border="1">
<tr>
<td>
Row 1 Column 1
</td>
<td>
Row 1 Column 2
</td>
<td>
Row 1 Column 3
</td>
</tr>
<tr>
<td>
Row 2 Column 1
</td>
<td>
Row 2 Column 2
</td>
<td>
Row 2 Column 3
</td>
</tr>
</table>
</body>
</html>
Lists:
Here you learn about the Ordered LISTS and Unordered LISTS using HTML.
1. Ordered List start with OL tag and end with /OL tag.
2. Following are the types of Order Lists;
1, 2, 3, 4……
a, b, c, d…….
A, B, C, D……
I, II, III, IV……
i, ii, iii, iv…….
3. Whatever type you want, just write the first letter of above given types as, TYPE=”1” OR TYPE=”A” etc.
4. In case you didn’t write the TYPE, the default type is 1, 2, 3…
5. To write different lines just start LI tag within OL tag, as given below.
Unordered Lists:
6. UnOrdered List start with UL tag and end with /UL tag.
7. Following are the types of Unordered Lists;
Circle….
Disc….. (Default)
Square….
8. To write different lines just start LI tag within UL tag, as given below.
Definition List:
9. Definition List start with DL tag and end with /DL tag.
10. It define the items.
11. DT (Definition Table) is the Item to define, and written on left side of the page.
12. DD (Definition Data) is the definition of the Item and written on right side with little margin.
Images:
Now I am going to tell you how to add IMAGES in a page.
13. It start with IMAGE tag with no close.
14. SRC stands for source or location of image.
15. If you want to show the name of image on mouse over, then add ALT tag within IMAGE tag and written as, ALT=”Name of the image that you want to show to user”.
16. You can adjust the WIDTH & HEIGHT of image as you want (px = pixel).
17. To show default size of image just remove WIDTH & HEIGHT attribute from the IMAGE tag.
Here is an example of Ordered, Unordered and Definition lists & IMAGE.
<html>
<head>
<title>Listst</title>
</head>
<body>
<h1>Lists </h1>
<h2>Here is the Examle of Lists </h2>
<h2> Order List </h2>
<OL type="A">
<LI>
Order List Item 1
</LI>
<LI>
Order List Item 2
</LI>
<LI>
Order List Item 3
</LI>
</OL>
<h2> UnOrdered List </h2>
<UL type="circle">
<LI>
UnOrder List Item 1
</LI>
<LI>
UnOrder List Item 2
</LI>
<LI>
UnOrder List Item 3
</LI>
</UL>
<H2> Definition List </H2>
<DL>
<DT>
Item 1
</DT>
<DD>
This is the definition of item 1
</DD>
<DT>
Item 2
</DT>
<DD>
This is the definition of item 2
</DD>
</DL>
<h2> Add Image </h2>
<img src="Images/image1.jpg" width="400px" height="250px" />
</body>
</html>
Today is the 3rd lesson of HTML. Today we discuss about the Tables, Lists and Images in HTML.
Table:
Here you learn that how to make Table using HTML.
1. Its start with TABLE tag and end with /TABLE.
2. Border show the thickness of table lines.
3. For no border set border value to “0”.
4. Then to start first Row of Table, write TR (Table Row) tag.
5. To start new Row Close TR and start New TR tag.
6. To Add Columns, start TD (Table Data) within TR tag.
Following are the Tags of Table, copy and paste the following tags to NOTEPADE and save file as FileName.html
<html>
<head>
<title>Table</title>
</head>
<body>
<h1> Table, Lists, Images </h1>
<h2>Here is table Exemple </h2>
<table border="1">
<tr>
<td>
Row 1 Column 1
</td>
<td>
Row 1 Column 2
</td>
<td>
Row 1 Column 3
</td>
</tr>
<tr>
<td>
Row 2 Column 1
</td>
<td>
Row 2 Column 2
</td>
<td>
Row 2 Column 3
</td>
</tr>
</table>
</body>
</html>
Lists:
Here you learn about the Ordered LISTS and Unordered LISTS using HTML.
1. Ordered List start with OL tag and end with /OL tag.
2. Following are the types of Order Lists;
1, 2, 3, 4……
a, b, c, d…….
A, B, C, D……
I, II, III, IV……
i, ii, iii, iv…….
3. Whatever type you want, just write the first letter of above given types as, TYPE=”1” OR TYPE=”A” etc.
4. In case you didn’t write the TYPE, the default type is 1, 2, 3…
5. To write different lines just start LI tag within OL tag, as given below.
Unordered Lists:
6. UnOrdered List start with UL tag and end with /UL tag.
7. Following are the types of Unordered Lists;
Circle….
Disc….. (Default)
Square….
8. To write different lines just start LI tag within UL tag, as given below.
Definition List:
9. Definition List start with DL tag and end with /DL tag.
10. It define the items.
11. DT (Definition Table) is the Item to define, and written on left side of the page.
12. DD (Definition Data) is the definition of the Item and written on right side with little margin.
Images:
Now I am going to tell you how to add IMAGES in a page.
13. It start with IMAGE tag with no close.
14. SRC stands for source or location of image.
15. If you want to show the name of image on mouse over, then add ALT tag within IMAGE tag and written as, ALT=”Name of the image that you want to show to user”.
16. You can adjust the WIDTH & HEIGHT of image as you want (px = pixel).
17. To show default size of image just remove WIDTH & HEIGHT attribute from the IMAGE tag.
Here is an example of Ordered, Unordered and Definition lists & IMAGE.
<html>
<head>
<title>Listst</title>
</head>
<body>
<h1>Lists </h1>
<h2>Here is the Examle of Lists </h2>
<h2> Order List </h2>
<OL type="A">
<LI>
Order List Item 1
</LI>
<LI>
Order List Item 2
</LI>
<LI>
Order List Item 3
</LI>
</OL>
<h2> UnOrdered List </h2>
<UL type="circle">
<LI>
UnOrder List Item 1
</LI>
<LI>
UnOrder List Item 2
</LI>
<LI>
UnOrder List Item 3
</LI>
</UL>
<H2> Definition List </H2>
<DL>
<DT>
Item 1
</DT>
<DD>
This is the definition of item 1
</DD>
<DT>
Item 2
</DT>
<DD>
This is the definition of item 2
</DD>
</DL>
<h2> Add Image </h2>
<img src="Images/image1.jpg" width="400px" height="250px" />
</body>
</html>
0 comments:
Post a Comment