Thursday, December 28, 2017

Html Javascript


Hello guys! welcome back to another section of my tutorial on Html, for those of you guys 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 am going to be talking a little bit about Javascript.

Note: that Javascript will 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 guys! welcome back to another section of my tutorial on Html, i also want to use this medium to wish you all a happy xmas. In my last tutorial i talked about Html header, now in this tutorial am going to be discussing a little bit about Style Sheets, although Cascading Style Sheets (Css) will be discussed in details in another part of my tutorial once this tutorial on Html have been rounded up with. 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 guys, 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 talked 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 learnt in my earlier tutorial 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 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

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

Html <meta> tag is used to provide metadata about the Html document which includes 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: 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. The following below is an example to link an external Css file 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 few style sheet 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 in defining 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, that is 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! welcome back to another section of my tutorial. In this tutorial, 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 guys morning, 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 to include the special Html tag called <embed>, this Html tag causes the browser itself to include controls for the multimedia files automatically provided browser supports <embed> tag and given media type.

You can also include a <nonembed> tag for browsers that do not support <embed> tag. For example, you could use <embed> in displaying a movie of your choice, and then <nonembed> in displaying 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 - 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.

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 same meaning as the once explained above.

Let us now 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 the <object> element, which offers an all-purpose solution to a generic object inclusion. It allows Html authors in specifying everything required by an object for its presentation by a user agent.

RECOMMENDED: 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 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.