Welcome to day 4 guys. I hope you are doing well. Today we are going to discuss more tags in HTML most probably we will be finishing with all the important tags in html and we will be starting with CSS in the next class.
Tables in HTML
Tables are used for different purposes in HTML. Generally they are used to create rows and columns like laying out the website. They also used to render the date from the database and show that in terms of tables neatly etc. Let’s see the different things we can do with tables.
Open your code editors and type in the following code.
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
</body>
</html>
Let’s see the output of the code and we will talk on those tags.
In the above code <table></table> are the opening and closing tags to create a table.
Each of the <tr></tr> tags represents a single row in the table.
Each of the <td></td> tags represents a single column in the table.
There are 3 rows and 3 columns in the above table as we have three <tr></tr> tags and inside each <tr> tag we have three <td><td> tags.
<table border=”1”> here border is called an attribute. It gives 1px border for each table row and column and also to the whole table.
Let’s see more about tables. Write the following code inside your editors.
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="10">
<tr>
<th colspan="3">Header</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
</body>
</html>
Output looks something like this.
Cellpadding and cellspacing are the two attributes for the tables. Cellpadding provides inner space for each column and cellspacing provides space between two columns.
<th></th> are the table header tags they represents the heading of the table. Here we have provided colspan attribute to it what it says is up to how many columns this heading is applicable. Here we have given colspan=”3” so it has applied that heading to three columns in our table.
Now your task is to change all the values to the attributes and play with them so that you will get to know about the use of different attributes.
Lists:
There are two kinds of lists in HTML
- Ordered List.
- . Unordered List.
Let’s see one by one. Firstly we will see what’s the ordered list is and then we will be moving to unordered list.
Ordered List:
Rather than talking about them I will show the both of them and I think you will get to know the difference.
Type in the following code in your code editor.
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<ol>
<li>One</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ol>
</body>
</html>
Output looks like this.
<ol></ol> are starting and ending tags of ordered list and each <li></li> tag is the each list item.
Unordered List:
Type the code in your code editor
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<ul>
<li>One</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</body>
</html>
Output looks like this.
<ul></ul> are the unordered list opening and closing tags.
Now, I hope you understood the difference between the two lists. Now it’s time to take this more further with link tags and image tags and after them we will see about most important tags for laying the webpages called <div> and <span> tags.
Link or Anchor tags:
Anchor tags are used to link between two webpages in the same website or two different websites. It helps to navigate from one page to other page or one website to other website. Let’s see its syntax and other things.
Open your code editor and type in the following code.
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<a href="http://www.ething4pc.blogspot.in">ETHING4PC</a> <br>
<a href="http://www.google.com">GOOGLE</a> <br>
<a href="http://www.facebook.com">FACEBOOK</a>
</body>
</html>
Output of the above code
<a></a> this is the anchor tag in HTML used to navigate between the websites. It takes one main attribute href. It’s value is the link reference. Click on the above links and check. Play around with them so that you can understand better.
Image Tag:
<img src=”” /> is used to put images in the website. It takes one attribute src (source) of the image. It takes the path of the image as it’s value. It takes three types of image formats .JPG, .PNG, .GIF. Just play with that tag and if you have any doubts you mail me @ ething4pc@gmail.com.
Okay guys that’s it for today. In the next class we will talk about Div’s and Span’s in HTML and we will directly jump into CSS. See you tomorrow bye.
No comments:
Post a Comment