Saturday, July 29, 2017

Html Tables(CONCLUSION)


Hello dear readers! welcome back to another section of my tutorial on Html. In my last tutorial guide, i talked about Html tables though i did not round up with the tutorial guide. In this tutorial guide am going to be rounding up with the Html tables that we treated from the previous tutorial.

Saturday, July 15, 2017

Html Tables


Hello guys, morning and welcome to this new tutorial section. In this tutorial am gonna be talking about HTML tables, half of it will be discussed now and the conclusion will be in my next tutorial.

Html tables allows web developers to arrange data like text, images, links, other tables, etc. Into rows and columns of cells.

Html tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. Here is an example below.

Example


<!DOCTYPE html>
<html>

     <head>
            <title>HTML Tables</title>
     </head>

     <body>
            <table border="3">
                  <tr>
                       <td>Row 1, Column 1</td>
                       <td>Row 1, Column 2</td>
                  </tr>

                  <tr>
                       <td>Row 2, Column 1</td>
                       <td>Row 2, Column 2</td>
                  </tr>
            </table>
     </body>

</html>

In the above code, the border is an attribute of <table> tag and it is used to put a border accross all the cells. If you do not need border, then you can use border="0".

Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box below. Now having known that lets move on to the next phase.

You can also read our tutorial post on: Html Images

Table Heading

Table heading can be defind using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below

Example


<!DOCTYPE html>
<html>

     <head>
            <title>HTML Tables Header</title>
     </head>

     <body>
            <table border="3">
                  <tr>
                       <th>Name</th>
                       <th>Matric Number</th>
                  </tr>
                  <tr>
                       <td>Nkpara Kennedy</td>
                       <td>1602062080</td>
                  </tr>  
                  <tr>
                       <td>Bamidele</td>
                       <td>1602062060</td>
                  </tr>
            </table>
     </body>

</html>

Try to practice using your text editor.

Cellpadding and Cellspacing Attribute

There are two attributes called the cellpadding and cellspacing which you will make use of in adjusting the white space in your table cells. The cellspacing attribute is used to define the width of the border, while cellpadding represents the distance between cell borders and the content within a cell.

Example


<!DOCTYPE html>
<html>

     <head>
            <title>HTML Tables Cellpadding</title>
     </head>

     <body>
            <table border="3" cellpadding="6" cellspacing="8">  
                  <tr>
                       <th>Name</th>
                       <th>Matric Number</th>
                  </tr>
                  <tr>
                       <td>Nkpara Kennedy</td>
                       <td>1602062080</td>
                  </tr>  
                  <tr>
                       <td>Bamidele</td>
                       <td>1602062060</td>
                  </tr>
            </table>
     </body>

</html>

Try to practice using your text editor.

Colspan and Rowspan Attribute

The colspan attribute can be used if you want to merge two or more columns into a single column. The rowspan is used in a similar way to merge two or more rows.

You can also read our tutorial post on: Html Document Structure

Example


<!DOCTYPE html>
<html>

     <head>
            <title>HTML Tables Colspan/Rowspan</title>
     </head>

     <body>
            <table border="3">
                  <tr>
                       <th>Column 1</th>
                       <th>Column 2</th>
                       <th>Column 3</th> 
                  </tr>
                  <tr>
                       <td rowspan="2">Row 1 Cell 1</td>
                       <td>Row 1 Cell 2</td>
                       <td>Row 1 Cell 3</td>
                  </tr>  
                  <tr>
                       <td>Row 2 Cell 2</td>
                       <td>Row 2 Cell 3</td>
                  </tr>
                  <tr>
                       <td colspan="3">Row 3 Cell 1</td>
                  </tr> 
            </table>
     </body>

</html>

Try to practice using your text editor.

Tables Backgrounds

You can set table background by making use one of the following two ways:
1. bgcolor attribute - You can set background color for a whole table or for just one cell.
2. background attribute - You can also set background image for a whole table or just one cell. You can also set border color using the bordercolor attribute.

Example


<!DOCTYPE html>
<html>

     <head>
            <title>HTML Tables Background</title>
     </head>

     <body>
            <table border="3" bordercolor="blue" bgcolor="red">   
                  <tr>
                       <th>Column 1</th>
                       <th>Column 2</th>
                       <th>Column 3</th> 
                  </tr>
                  <tr>
                       <td rowspan="2">Row 1 Cell 1</td>
                       <td>Row 1 Cell 2</td>
                       <td>Row 1 Cell 3</td>
                  </tr>
                  <tr>
                       <td>Row 2 Cell 2</td>
                       <td>Row 2 Cell 3</td>
                  </tr>
                  <tr>
                       <td colspan="3">Row 3 Cell 1</td>
                  </tr> 
            </table>
     </body>

</html>

Here is an example of background attribute

Example


<!DOCTYPE html>
<html>

     <head>
            <title>HTML Tables Background</title>
     </head>

     <body>
            <table border="3" bordercolor="blue" background="/images/test.png"> 
                  <tr>
                       <th>Column 1</th>
                       <th>Column 2</th>
                       <th>Column 3</th> 
                  </tr>
                  <tr>
                       <td rowspan="2">Row 1 Cell 1</td>
                       <td>Row 1 Cell 2</td>
                       <td>Row 1 Cell 3</td>
                  </tr>
                  <tr>
                       <td>Row 2 Cell 2</td>
                       <td>Row 2 Cell 3</td>
                  </tr>
                  <tr>
                       <td colspan="3">Row 3 Cell 1</td>
                  </tr> 
            </table>
     </body>

</html>

You can try the above code out using your text editor and feel free to drop your questions.

You can also read our tutorial post on: Html Basic Tags2

Table Height and Width
You can set the table height and width by making use of the height and width attributes. The table height or width can be specified in terms of pixels or percentage of available screen area.

Example

<!DOCTYPE html>
<html>

     <head>
            <title>HTML Tables Height and Width</title>
     </head>

     <body>
            <table border="3" width="500"  height="200">           
                  <tr>
                       <td>Row 1, Column 1</td>
                       <td>Row 1, Column 2</td>
                  </tr>
                  <tr>
                       <td>Row 2, Column 1</td>
                       <td>Row 2, Column 2</td>
                  </tr>
            </table>
     </body>

</html>

Alright guys! this is where we are going to be wrapping it up for this tutorial guide. We will discuss about the rest of the Html table in our next tutorial, bye for now.

Saturday, July 8, 2017

Html-Images


Hello dear readers! welcome back to another section of my tutorial on Html. In this tutorial guide, we will be discussing about the Html images and the various ways that can be made use of in formating these images.

Images are important to beautify as well as to depict many complex concepts in a simple way on your web page. This tutorial post will take you through the simple steps involved in making use of images on your web pages.

Insert Image

You can insert any image on your web page by using the <img> tag. Following is the simple syntax for using this tag.

<img  src="image url"  .......   attribute-list />

Just like i have said in the previous tutorials we have had, the <img> tag is also one of the empty tags we have on Html, which means it can contain only list of attributes and it has no closing tag.

RECOMMENDED: HTML-Phrase Tags

Example


<DOCTYPE html>
<html>

     <head>
            <title>Inserting Images In Web Pages</title>
     </head>

     <body>
            <p>simple image insert</p>
            <img src="test.png" alt="Test Image" />
     </body>

</html>

Feel free to try the above code out using your text editor for a better understanding. Note that it is very important practice to put all the images you want to work with in a particular folder for efficiency.

You can use different format of images like JPEG or GIF image file based on your comfort but make sure you specify correct image file name in src attribute. Image name is always case sensitive.

The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the actual image can not be displayed.

Setting Image Location

Usually we keep all the images in a seperate directory. So let us keep the Html file text.html in our home directory and create a subdirectory for images in the home directory where we will keep all our image test.png.

RECOMMENDED: Html-Comments

Example

Assuming our image location is "image/test.png", try the following code below:

<DOCTYPE html>
<html>

     <head>
            <title>Inserting Images In Web Pages</title>
     </head>

     <body>
            <p>simple image insert</p>
            <img src="image/test.png" alt="Test Image" />
     </body>

</html>

Note that its not compulsory to make use of the test.png that am using in this tutorial, you can make use of any image on your laptop or desktop.

Setting Image Width/Height

You can set an image width and height based on your requirements using width and height attributes. You can specify width and height of an image in terms of either the pixels or percentage of its actual size. You will get to know more about pixels and percentage when we start our tutorials on Css.

Example


<DOCTYPE html>
<html>

     <head>
            <title>Setting Image Width and Height</title>
     </head>

     <body>
            <p>Setting image width and height</p>
            <img src="test.png" alt="Test Image" width="80"  height="150" />  
     </body>

</html>

Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box below.

RECOMMENDED: Html Attributes

Setting Image Border

By default, an image has a border around it, you can specify border thickness in terms of pixels using border attribute. With a thickness of 0, it means their will be no border around the image.

Example


<DOCTYPE html>
<html>

     <head>
            <title>Setting Image Border</title>
     </head>

     <body>
            <p>Setting image width and height</p>
            <img src="test.png" alt="Test Image"  border="5" />  
     </body>

</html>

You can try the above code out for better understanding.

Setting Image Alignment
By default, image will be aligned to the left side of the page, but you can use align attribute to set it in the center or right.

Example

<DOCTYPE html>
<html>

     <head>
            <title>Setting Image Align</title>
     </head>

     <body>
            <p>Setting image width and height</p>
            <img src="test.png" alt="Test Image"  border="5"  align="right" />   
     </body>

</html>

You can try the above code out for better understanding.

Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be studying about Html Tables.

Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Thursday, July 6, 2017

Html-Comments


Hello and good morning, welcome to this new section of my tutorial. In this tutorial am going to be talking about Html comments, am guessing you all should know what a comment is so we are going to discuss how these comments can be used on a Html document.

Comment is a piece of code which is ignored by the web browser. It is a very good practice to always comment on all your Html codes, especially in complex documents, in order to be able to indicate sections of the document, and any other important note to any other persons looking at the Html code. Comments also helps you and others understand your code and increases code readability.

Sunday, July 2, 2017

Html-Meta Tags


Hello dear readers! welcome back to another section of my tutorial on Html. In my last tutorial guide, we rounded up with our tutorial on Html phrase tags. For the purpose of this tutorial, we are going to be discussing about the Html Meta Tags.

Html allows it's users to specify metadata (an additional important information about a document in a broad number of ways.) The meta elements can be used to include name/value pairs which describes properties of the Html document, such as author, expiry date, a list of keywords, document author etc.

RECOMMENDED: Html Attribute 2