Thursday, December 28, 2017

Html Javascript


Hello dear readers! welcome back to another section of my tutorial on Html. For those following up on my tutorials, you all know we have really come a long way on Html and soon i will be rounding up on my tutorial on Html and going into another course on web design called the Cascading Style Sheets (CSS). In this tutorial post, am going to be discussing a little bit about Javascript.

Note: that Javascript is going to be treated properly on a separate tutorial. This tutorial is just to give you an idea of what Javascript is all about.

Monday, December 25, 2017

Html Stylesheet

Hello dear readers! welcome back to another section of my tutorial on Html. In my previous tutorial, i talked about the Html header. In this tutorial guide, am going to be discussing a little bit about Style Sheets. Although Cascading Style Sheets will be discussed in details in another part of my tutorial once I have rounded up my tutorial on Html. For now I will be introducing Cascading Style Sheets (Css) to you guys so you can have an idea about it.

Friday, December 22, 2017

Html Header


Hello dear readers! welcome back to another section of my tutorial on Html. In this tutorial guide, we are going to be discussing about the Html header. As you all know, i have actualy discussed a little bit about Html header before in my earlier post on Html. But in this post i want to discuss about it in full details.

We have already studied in my earlier tutorial post on Html that a typical Html document will have the structure as shown below :

Document declaration tag


<html>          

     <head>               
            Document header related tags          
     </head>                     

     <body>               
            Document body related tags            
     </body>
</html>

Like i already said from the very begining of this post, this tutorial guide will be giving a little more details about the header part which is represented by the Html <head> tag. This <head> tag is a container of different important tags like the <title>, <meta>, <link>, <base>, <style>, <script>, and also the <nonscript> tags.


The HTML <title> Tag

The Html <title> tag is used for specifying the title of the Html document. Below is an example to give a title to a Html document:

Example


<!DOCTYPE html>
<html>

     <head>
            <title>Title Tag Example</title>
     </head>

     <body>
            <p>This code was written by nkpara kennedy</p>
     </body>
</html>

You can try the above code out using your text editors to see the result for yourselves.

The HTML <meta> Tag

The Html <meta> tag is used to provide metadata about the Html document which includes the information about the page expiry date, page author, list of keywords, page description etc.

Example


<!DOCTYPE html>
<html>

     <head>
            <title>Meta Tag Example</title>


            <!-- Provide list of keywords -->
            <meta name="keywords"  content="Python, Html, Css, Php" >

            <!-- Provide page description -->
            <meta  name="description"  content="We teach web design courses" >

            <!-- Author information -->
            <meta name="author"  content="Nkpara Kennedy" >

            <!-- page content type -->
            <meta  http-equiv="content type"  content="text/html; charset-8" >

            <!-- page refreshing delay -->
            <meta http-equiv="refresh"  content="50"> 

            <!-- page expiry -->
            <meta http-equiv="expires"  content="mon, 25 december 2017 15:30:28 GMT" >  

            <!-- Tag to tell robot not to index the content of a page -->
            <meta name="robots"  content="nonindex, nofollow" >

     </head>

     <body>
            <p>This code was written by Nkpara Kennedy</p>
     </body>
</html>

The HTML <base> Tag

Html <base> tag is used to specify the base URL for all relative URLs in a page, which means all other URLs will be concatenated into a base URL while locating the given item. 

RECOMMENDED POST: Html Backgrounds

For example, all the given pages will be searched after prefixing the given URLs with the website's base URL https://www.webdesigntutorialz.com directory:

<html>

     <head>
            <title>Base Tag Example</title>
            <base href="https://www.webdesigntutorialz.com"  /> 
     </head>

     <body>
            <a href="/html/index.html"  title="web design tutorialz" >Html tutorial</a>  
     </body>
</html>

The HTML <link> Tag

The Html <link> tag is used to specify the relationship between the current Html document and the external resource or web page. The following below is an example to link an external Css file that is available in a css sub-directory within the web root:

<!DOCTYPE html>
<html>

     <head>
            <title>Link Tag Example</title>
            <base href="https://www.webdesigntutorialz.com"  /> 
            <link rel="stylesheet"  type="text/css"  href="/css/style.css" >   
     </head>

     <body>
            <p>This is the body of the HTML document.</p>
     </body>
</html>

The HTML <style> Tag

The Html <style> tag can be used for specifying Style Sheet for the current Html document. Below is an example to define a few style rules inside <style> tag.

<!DOCTYPE html>
<html>

     <head>
            <title>Style Tag Example</title>
            <base href="https://www.webdesigntutorialz.com"  /> 

            <style  type="text/css" >
                  .menubar   {             
                       background-color: blue;             
                       padding:20px;
                  }
            </style>
     </head>

     <body>
            <p class="menubar">This is the body of the HTML document.</p> 
     </body>
</html>

The HTML <script> Tag

The Html <script> tag can be used to include either external script file or to define an internal script for the Html document. The following is an example  where by we are making use of javascript to define a simple javascript function:


<!DOCTYPE html>
<html>

     <head>
            <title>Script Tag Example</title>
            <base href="https://www.webdesigntutorialz.com"  /> 

            <script  type="text/javascript" >
                  function Hello()   {             
                       alert("Hello, world");
                  } 
            </script>
     </head>

     <body>
            <input  type="button"  onclick="Hello();"  name="ok"  Value="ok"  />  
     </body>
</html>

You can try out all the above codes with your text editor and feel free to ask your questions.

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

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.

Wednesday, December 20, 2017

Html Marquees


Hello dear readers! welcome back to another section of my tutorial on Html. In this tutorial guide, we are going to be discussing about the Html Marquees.

A Html marquee is a scrolling piece of text displayed either horizontally across or vertically down your web page depending on the settings. This is created using Html <marquees> tag.

Note: The Html <marquees> tag may not be supported by different web browsers so it is not recommended to rely on this tag, instead you can use Javascript and Css in creating such effects.

RECOMMENDED POST: Html Basic Tags

Tuesday, December 19, 2017

How to Embed Multimedia into a Html web page


Hello dear readers! welcome to this section of my tutorial, in this post am going to be talking about how to embed various multimedia files such as videos and audios into a HTML web page.

Sometimes you need to add music or video into your web page. The best and easiest way to do that is by including the special Html tag called <embed> tag, this Html tag causes the web browser itself to automatically include controls for the multimedia files provided the browser supports <embed> tag and given media type.

You can include the <nonembed> tag for web browsers that do not support the <embed> tag. For example, you could use <embed> to display a movie of your choice, and then <nonembed> to display a single JPG image if the browser does not support <embed> tag.

Example

Here is a brief example on how to play an embed midi file on your web page:

<!DOCTYPE html>
<html>

     <head>
            <title>HTML embed Tag</title> 
     </head>

     <body>
            <embed  src="/html/yourfile.mid"  width="100%"  height="60">  
                  <nonembed><img src="your image.jpg"  alt="Alternative media"> </nonembed>   
            </embed>
     </body>
</html>

Try the above code out with an actual URL of your media files.

RECOMMENDED: Html-Comments

The <embed> Tag Attributes

Following is the list of the important attributes which can be used with <embed> tag.

Sr.NoAttribute & Description
1
align
Determines how to align the object. It can be set to either center, left or right.
2
autostart
This boolean attribute indicates if the media should start automatically. You can set it either true or false.
3
loop
Specifies if the sound should be played continuously (set loop to true), a certain number of times (a positive value) or not at all (false)
4
playcount
Specifies the number of times to play the sound. This is alternate option for loop if you are usiong IE.
5
hidden
Specifies if the multimedia object should be shown on the page. A false value means no and true values means yes.
6
width
Width of the object in pixels
7
height
Height of the object in pixels
8
name
A name used to reference the object.
9
src
URL of the object to be embedded.
10
volume
Controls volume of the sound. Can be from 0 (off) to 100 (full volume).

Supported Video Types

You can use various media types like flash movies (.swf), AVI's (.avi) and MOV's (.mov) file types inside embed tag.

.swf files - These are the file types created by Macromedia's Flash program.

.wmv files - These are microsoft Window's Media Video file types.

.mov files - These are the Apple's Quick Time Movie format.

.mpeg files - These are movie files created by the Moving Picture Expert Group.

RECOMMENDED: Html Image Links

Example


<!DOCTYPE html>
<html>

     <head>
            <title>HTML embed Tag</title> 
     </head>

     <body>
            <embed  src="/html/yourfile.swf"  width="140%"  height="80">  
                  <nonembed><img src="your image.jpg"  alt="Alternative media"> </nonembed>   
            </embed>
     </body>
</html>

You can also try the above code out for better understanding and feel free to ask your questions.

Background Audio

You can use the Html <bgsound> tag for playing a soundtrack or clip in the background of your webpage. This tag is supported by internet explorer only and most of the other browsers ignore this tag. Its downloads and plays an audio file when the host document is first downloaded by the user and displayed. The background sound file also will replay whenever the user refreshes the browser.

This tag having only two attributes which are loop and src. Both of these attribures have the same meaning as the once i explained above.

Let us take a look at a very brief example on how to play a small midi file.

Example


<!DOCTYPE htmll>
<html>

     <head>
            <title>HTML embed Tag</title> 
     </head>
   
     <body>
            <bgsound  src="/html/yourfile.mid">  
                  <nonembed><img src="your image.jpg"  alt="Alternative media"></nonembed>   
            </bgsound>
     </body>
</html>

HTML Object tag

Html 4 makes available <object> element, which offers to its users an all-purpose solution to a generic object inclusion. It allows authors to specify everything that is required by an object(obj) for its presentation by a user agent.

RECOMMENDED POST: Html Introduction

Below are few examples:

Example 1

You can embed a HTML document in a HTML document it self as follows:

<object  data="data/test.html"  type="text/html"  width="250" height="150" >    
        alt :  <a href="data/test.html">test.html</a>
</object>

In this case the attribute will come into picture if the browser does not support object tag.

Example 2

You can embed a PDF document in a HTML document as follows:

<object  data="data/test.pdf"  type="application/pdf"  width="200"  height="100" >     
       alt :  <a href="data/test.pdf">test.html</a>
</object>

Example 3

Some parameters that are related to the document can be specified using the <param> tag. Below is a simple example to embed a wav file:

<object  data="data/test.wav"  type="audio/x-wav"  width="200"  height="100" >    
       <param name="src"  value="data/test.wav" />
       <param name="autoplay"  value="false" />
       <param name="autostart"  value="0" />
       alt :  <a href="data/test.wav">test.wav</a>
</object>

RECOMMENDED: Html Text Links

Example 4
You can add a flash document as follows:

<object  classid="clasid:D27CDB6E-AE6D-11cf-96B8-444553540000"  id="penguin"    
       codebase="someplace/swflash.cab"  width="200"  height="100" >

       <param  name="movie"  value="flash/penguin.swf" />
       <param  name="quality"  value="high" />
       <img src="penguin.jpg"  width="200"  height="150"  alt="penguin" />
</object>

Example 5
You can add a java applet into a Html document as follows:

<object classid="clasid:8ad9c840-044e-11d1-b3e9-00805f499d93"  width="200"  height="100" >    
       <param name="code"  value="applet.class" />
 </object>

Well that is it on this tutorial, see you on my next tutorial and don't forget to subscribe to our email list, bye for now.

Wednesday, December 6, 2017

How to create Html Forms


Hello dear readers! welcome back to another section of my tutorial on Html. In my last tutorial guide we discussed about Html fonts and how to style your web pages with various fonts and also how to change font sizes. In this tutorial post, we will be discussing about how to create various Html forms.

Html Forms are required when you want to collect some data from your site's visitors. For example, during user registration you would like to collect some informations like name, email address, credit card, date of birth and so on.

Sunday, November 26, 2017

Html Fonts


Hello dear readers! welcome back to another section of my tutorial on Html. In my last tutorial guide, i talked about Html backgrounds and the different ways we can style our Html background using either colors or images.

In this tutorial guide, am going to be discussing about Html fonts and the various font sizes and font families supported by Html.

Saturday, October 14, 2017

Html Backgrounds


Hello guys! morning and welcome to this tutorial, in my last tutorial i talked about Html blocks and the types of Html blocks available. In this tutorial am gonna be talking about Html backgrounds.

By default, the background of your webpage is white in color, i know you won't like it and that is why we are going to discuss about how to change this default background color to any other color of our choice.

HTML provides you with two good ways of decorating your webpage background.

Friday, September 29, 2017

Html Blocks


Hello dear readers! welcome back to another section of my tutorial on Html. In my last tutorial guide, i talked about the Html iframes and how to apply it on a web page. In this tutorial guide am going to be talking about Html blocks and the types we have.

All Html elements can be grouped into two different categories (a) Block Level Elements (b) Inline Elements. Now without wasting much time lets quickly take a look at the both of them.

Sunday, September 10, 2017

Html Iframes


Hello dear readers!  welcome back to another section of my tutorial on Html. In my last tutorial guide, i talked about the Html frames and in this section am going to be talking about Html iframes.

An inline frame can be defined by using the Html <iframe> tag. The Html <iframe> tag is not somehow related to <frameset> tag, instead it can appear anywhere in your Html document.

The Html <iframe> tag defines a rectangular region within the Html document in which the browser can display a separate document, including scrollbar and borders.

Friday, September 1, 2017

Html Frames


Hello dear readers! welcome back to another section of my tutorial on Html. In this tutorial guide, am going to be discussing about Html frames.

Html frames are used in dividing your browser window into different sections where each section can load a seperate Html document. A collection of various frames in the browser window is known as a frameset.

Saturday, August 12, 2017

Introduction to Python Programming


Hello guys! welcome to this tutorial, this section of our tutorial is not meant for the newbies that are still learning basic web design courses, this section is meant for those that are already good at web design and want to integrate python into their web platforms to perform some additional special tasks. For example, the online payment platforms like interswitch, paypal, etc. all have python integrated in their platforms.

Thursday, August 10, 2017

Html Image Links


Hello dear readers! welcome back to another section of my tutorial on Html. In this tutorial guide, am going to be discussing about the Html image links. In my previous tutorial guide i treated Html text links and how they can be used to connect various webpages to form a complete website and also how to link the various sections of a particular webpage.

So quickly let us take a look at the Html image links, lets consider the example below.

Wednesday, August 9, 2017

Html - Text Links


Hello dear readers! welcome back to another section of my tutorial on Html. In my last tutorial guide, i talked about Html list and i hope you all now know about Html list and how to use them.

In this tutorial guide, am going to be discussing about the Html text links and how you can make use of them in your Html documents.

A webpage can be comprised of various links that take you directly to other pages and even specific parts of a given page. This links are called hyperlinks.

Saturday, August 5, 2017

Html List


Hello dear readers! welcome back to another section of my tutorial on Html. In this tutorial guide, am going to be discussing about Html list, am sure you all are conversant with what a list is. Without wasting much time lets get started.

Html offers web developers three different ways to specify lists of information. All lists must contain one or more list elements. The list may contain:

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.