Thursday, December 28, 2017

Html Javascript


Hello guys, welcome to this section of my tutorial on HTML, for those of your following up on my tutorials, you all know we have realy come a long way on HTML and soon i will be rounding up on my tutorial on HTML and will be going into another part of this tutorial which is Cascading Style Sheets (CSS). Now in this tutorail am going to be talking a little bit about Javascript.
Note: that Javascript will be treated properly on a seperate tutorial. This is just to give you an idea of what Javascript is all about.

Monday, December 25, 2017

Html Stylesheet

Hello guys evening and welcome to this section of my tutorial, i also wanna use this medium to wish you all a happy xmas. In my last tutorial i talked about HTML header and all the tags that can be found in a HTML header and how to use them, now in this tutorial am gonna talk a little bit about Style Sheet, though Cascading Style Sheets (CSS) will be thought in details in another part of my tutorial once the tutorial on HTML is rounded up. For now let me introduce Cascading Style Sheets (CSS) to you guys so you can have an idea about it.



Friday, December 22, 2017

Html Header


Hello guys, morning and welcome to this section of my tutorial on HTML, in this tutorial i wanna talk about HTML header, as you all know have actualy talked a little bit about HTML header before in my early post on HTML. But in this post i wanna talk about it in full details.

We have already learnt in my early tutorial on HTML that a typical HTML document will have the following structure:

Document declaration tag

<html>          

     <head>               
            Document header related tags          
     </head>                     

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



Like i said from the begining of this post, this section of my tutorial will give little more details about the header part which is represented by HTML <head> tag. The <head> tag is a container of various important tags like <title>, <meta>, <link>, <base>, <style>, <script>, and <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 your self.



The HTML <meta> Tag 
The HTML <meta> tag is used to provide metadata about the HTML document which includes information about page expiry, 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
The HTML <base> tag is used for specifying the base URL for all relative URLs in a page, which means all other URLs will be concatenated into a base URL while locating for the given item. 

You can also read: Html Backgrounds



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

<html>

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

     <body>
            <a href="/html/index.html"  title="google" >Html tutorial</a>  
     </body>
</html>

The HTML <link> Tag 
The HTML <link> tag is used to specify relationships between the current document and external resource. Following is an example to link an external style sheet file available in css sub-directory within the web root:

<!DOCTYPE html>
<html>

     <head>
            <title>Link Tag Example</title>
            <base href="https://www.google.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 is used to specify style sheet for the current HTML document. Below is an example to define few style sheet rules inside <style> tag.

<!DOCTYPE html>
<html>

     <head>
            <title>Style Tag Example</title>
            <base href="https://www.google.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 is used to include either external script file or to define an internal script for the HTML document. Following is an example  where we are using javascript to define a simple javascript function:

You can also read: Html Formatting[CONTINUATION]

<!DOCTYPE html>
<html>

     <head>
            <title>Script Tag Example</title>
            <base href="https://www.google.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 thats it for this tutorial, don't forget to subscribe with us, see you in my next tutorial.

Wednesday, December 20, 2017

Html Marquees


Hello guys afternoon and welcome to this section of my tutorial, in this tutorial i wanna be talking about HTML Marquees.
A HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. This is created by using HTML <marquees> tag.

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

You can also read: Html Basic Tags

Tuesday, December 19, 2017

How to Embed Multimedia into a Html web page


Hello guys morning, welcome to this section of my tutorial, in this post am gonna 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 tha is to include the special HTML tag called <embed>, this tag causes the browser itself to include controls for the multimedia automatically provided browser supports <embed> tag and given media type.

You can also include a <nonembed> tag for browsers that don't support the <embed> tag. You could, for example use <embed> to display a movie of your choice, and <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>

You can try the above code out with an actual URL of your media and images, feel free to drop your questions in the comment box below if you having any difficulties.

You can also read: Html-Comments

The <embed> Tag Attributes 
Below are the list of 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 - are the file types created by Macromedia's Flash program.
     
.wmv files - are Microsoft's Window's Media Video file types.

.mov files - are Apple's Quick Time Movie format.
.mpeg files - are movie files created by the Moving Picture Expert Group.

You can also read: 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 HTML<bgsound>tag to play a soundtrack 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 reply whenever the user refreshes the browser.

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

Let take a look at a brief examole below 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 introduces the <object> element, which offers an all-purpose solution to generic object inclusion. The <object> element allows HTML authors to specify everything required by an object for its presentation by a user agent.

You can also read: Html Introduction

Below are few examples:

Example 1
You can embed a HTML document in a HTML document itself 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
You can specify some parameters related to the document with the <param> tag. Below is a brief 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>

You can also read: Html Text Links

Example 4
You can add 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 thats 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 guys, morning, welcome you all to this section of my tutorial, in my last tutorial i talked about HTML fonts and how to style your web pages with various fonts and also how to change font sizes. So today lets talk about how to creat various HTML forms.

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



Sunday, November 26, 2017

Html Fonts


Hello guys! morning to you all, before i continue i wanna apologise to you all for not making any post for so long now, without wasting much time in my previous tutorial i talked about HTML backgrounds and the different ways we can style our HTML background using either colors or images.
So in this tutorial am going to be talking about HTML fonts and the various font sizes and font families supported by HTML.

Sunday, November 12, 2017

DATA TYPE PART TWO


Numbers
In programming, we often need to use number in various ways like keeping scores of game, recording the number of a visit to a website, recording the number of downloaded application, store information on web applications etc.

Python works on numbers in several ways depending on how the numbers are used. Let take a look at the different ways python treats numbers.

Friday, November 10, 2017

DATA TYPE PART 1


DATA TYPE PART 1
Data type is the classification of data based on what we can do with them in our program and based on this data can be classified into various categories. Lets take a look at some of this classifications below and also some examples.

Strings data types
The first data type we will consider is the string. A string is a series of characters. In python, anything within a quote is considered a string. The quote could be a single quote (‘’) or double quote (“”). Example of string are:

Wednesday, November 8, 2017

VARIABLE

U

In today episode on our python tutorial, we will be talking about the different kind of data we can work with in our python program. We will learn how to store data in variables and how to use variables in our program.

The word variableis the same across all programming language. A variable is a named memory location. All computer programs interact with our computer memory. Think of memory as an empty room where you would like to keep different boxes of the same shape, size and color. If we store different things in the boxes, it will be hard for us to know which box contains which element. Therefore, we need to name our boxes. Giving names to the boxes is called variable naming.

Tuesday, November 7, 2017

PYTHON ON WINDOW


Unlike the Linux and OSX operating system, windows doesn’t always come with python, we will have to download and install python and download and install a text editor.

Installing python
Before installing python, we need to verify that python does not exist on our system already by opening a command prompt by typing cmd in start menu. When the command window comes up, type “python” into it in lowercase.

Monday, November 6, 2017

PYTHON ON OS X


Just like the Linux operating system, python is already installed on most OS X systems. We need to check whether it is installed or not. And when we are certain that python is installed, we’ll need to install a text editor and ensure to configure it correctly. Their are different types of text editor in the net, you just have to select any one of your choice to work with.

Sunday, November 5, 2017

PYTHON ON DIFFERENT OPERATING SYSTEM


Python runs on all major operating system. Any python code written should run on a computer with python installed on it.

Installing python on our systems may sometimes be complicated if we are not familiar with its installations. In order to enlighten us on how to install the python compiler and interpreter, this tutorial was brought up.
The method for setting and installing python on various operating system differs. Let check the installation on the various operating system.



Saturday, November 4, 2017

­­GETTING STARTED WITH PYTHON


Today we are going to talk about the various version of python we have. You may be wondering that, how many version of python do we have? The answer to that is “we presently have two version of python which are Python 2 and Python 3”.

Every programming language evolves as new innovations and inventions are come by daily by various inventors and innovators and python case isn’t an exceptional case which lead to the movement from python 2 to python 3. The python developer community have therefore made the language more changeable and powerful.



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, your webpage background is white in color, i know you won't like it and that why we gonna discuss 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 guys! it's realy been a while, in my previous tutorial i talked about HTML iframes and how to apply it on a web page. Now today am gonna be talking about HTML blocks and the types we have.

All the 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 guys, evening and you all welcome to this section of my tutorial. In my last tutorial i talked about HTML frames and in this section am gonna be talking about HTML iframes.

You can define an inline frame with the HTML <iframe> tag. The <iframe> tag is not somehow related to <frameset> tag, instead it can appear anywhere in your HTML document.

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



Friday, September 1, 2017

Html Frames


Hello guys, morning , its realy been a while since i made any tutorial post and am realy sorry about that, have been kind of busy lately. Today i wanna talk about Html frames and am guessing you all have an idea of what a frame is.
Html frames are used to divide your browser window into different sections or layers 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! morning and welcome to this tutorial, this section is actualy not meant for the newbies that are still learning basic web design programming, this section is meant for those that are already good at web design and wanna integrate python programming into their web platforms to perform some additional special task eg online payment platforms like interswitch, paypal and the likes all have various programming languages integrated in their platforms.

Thursday, August 10, 2017

Html Image Links


Hello every one! welcome to this section of my HTML tutorial. In this tutorial i wanna be talking about HTML image links. You all know that in my last tutorial i treated HTML text links and how to use these links to connect various webpages to form a complete website and also how to link various sections of a particular webpage.
So quickly lets looks at HTML image links, lets consider the example below.

Wednesday, August 9, 2017

Html - Text Links


Hello guys! good morning and welcome to this section of my HTML tutorials. Last time i talked about HTML list and i hope you all now know about HTML list and how to use them.
In this tutorial am gonna be discussing HTML text links and how to 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 every one, good morning and welcome to this section of my tutorial. Today am gonna be talking about HTML list, am sure you all are conversant with what a list is. Without wasting much time lets go down to business.

HTML offers web designers three different ways for specifying lists of information. All lists must contain one or more list elements. List may contain:

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 tho 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: Html Images

Table Heading
Table heading can be defind using <th> tag. This tag willl 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: 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. You can also set border color using 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: 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.