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.

You can also read our tutorial post on: How to Embed Multimedia into a Html web page

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 our tutorial post on: 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 our tutorial post on: 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 our tutorial post on: 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 that 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 our tutorial post on: 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 our tutorial post on: 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 example 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 our tutorial post on: 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

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 our tutorial post on: 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.