Saturday, July 29, 2017

Html Tables(CONCLUSION)


Hello guys morning and welcome to this section of my tutorials. In my last tutorial i talked about HTML tables though i didn't round up with it, so in this tutorial am gonna round up with the HTML tables we treated from the previous class and if their is any thing you didn't fully understand from the previous class, feel free to ask your questions. Without wasting time lets go straight to the point.

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.

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

The 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>

Here 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".

You can try the above code out using your text editor for better understanding and feel free to drop your questions. 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 attribute called  cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attributs defines 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

You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you is to use rowspan if you want 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 using 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 whole table or just one cell ( 1 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 a table height and width using height and width attributes. You can specify table height or width in terms of pixels or in terms of 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 we gonna stop here for today. We will talk about the conclusion of HTML tables in our next tutorial, bye for now.

Saturday, July 8, 2017

Html-Images


Hello guys! welcome to this section of my tutorials on html where am gonna be talking about HTML images and the various ways by which we can format these images.

Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. This tutorial 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 said in the previous tutorials we have had, the <img> tag is also one of the empty tags we have on HTML, which means that it can contain only list of attributes and it has no closing tag.

You can also read our tutorial post on: 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>

You can try the above code out with your text editor using any image on your computer. Note that it is very important to put all the images you wanna 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 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's keep HTML file text.html in our home directory and create a subdirectory for images inside the home directory where we will keep all our image test.png.

You can also read our tutorial post on: 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 image width and height based on your requirement using width and height attributes. You can specify the width and height of an image in terms of either pixels or percentage of its actual size. You will get to know more about pixels and percentage when we start talking about Cascading Style Sheets(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>

You can try the above code out for better understanding and feel free to drop your questions via the comment box below, they will be attended to as soon as possible. You can also interact with each other via the chat box for those of you viewing this blog via a computer. 

You can also read our tutorial post on: Html Attributes

Setting Image Border

By default, 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.

Well guys thats all we gonna be talking about in context to HTML images. See you in my next tutorial and goodluck!!

Thursday, July 6, 2017

Html-Comments


Hello and good morning, welcome to this new section of my tutorial. In this tutorial am gonna be talking about HTML comments, am guessing you all should know what a comment is so we gonna 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 good practice to always comment on 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 guys evening, for those of you that visit this blog for tutorials on web design, you all know we have gone a little bit far on HTML, though no topic on CSS have been treated but tutorials on CSS will commence once we round up tutorials on HTML. So for the purpose of this tutorial we gonna be talking about HTML meta tags.

HTML program allows you to specify metadata (additional important information about a document in a vast number of ways.) The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc.

You can also read our tutorial post on: Html Attribute 2