Thursday, December 28, 2017

Html Javascript

 |  No comments

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.

Continue Reading

Monday, December 25, 2017

Html Stylesheet

 |  No comments
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.

Continue Reading

Friday, December 22, 2017

Html Header

 |  2 comments

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.
Continue Reading

Wednesday, December 20, 2017

Html Marquees

 |  No comments

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
Continue Reading

Tuesday, December 19, 2017

How to Embed Multimedia into a Html web page

 |  No comments

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.
Continue Reading

Wednesday, December 6, 2017

How to create Html Forms

 |  No comments

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.

Continue Reading