Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Tuesday, 11 September 2012

How to Create Menus With HTML




To create a HTML Menu in HTML File, you just follows the below given steps :
1. Open a text Editor and type the following css code in it.

h1
{
border-bottom: 3px solid #cc9900;
font: Georgia, serif;
color: #996600;
}
body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
#main
{
padding: 30px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
}

ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}

ul#menu li
{
display: inline;
}

ul#menu li a
{
background-color: #e8eef4;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
color: #034af3;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}

ul#menu li a:hover
{
background-color: #ffffff;
}


Now save the above file with the name 'site1.css'

2. Now open text editor one more time and type the following code.

<html>
<head>
<title></title>
<link href="site1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
<h1>Hello</h1>
</div>

<ul id="menu">
<li><a href="try_webpages_cs_013.asp">Home</a></li>
<li><a href="try_webpages_cs_014.asp">About</a></li>
</ul>

<div id="main">
<h1>Welcome to Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
<p>&copy; 2012 W3Schools. All rights reserved.</p>
</div>
</body>

</html>




and save the above file as 'menubar.html'

3. Now when you run the menubar.html file in browser then this file is look like as follows :



To illustrate this i have given an example which is as follows :

Menu with HTML

Saturday, 25 August 2012

How can I show Messagebox with HTML Code


In HTML we cannot use not use 'vbscript' command 'msgbox' to display the messagebox or any other window message commands, becuse html viewed in web browser. So thewindow message not display on It.

We can display message on web form by use the following code.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
     alert("Hello! I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="Show alert box" />
</body>
</html>

In above html code we type a 'javascript functon' named 'myFunction()'. We use 'alert' command in this function. This command is used to display message on Web Browser. 

Playing Videos in HTML



To Play movie in HTML File Pls. use the following steps
    1. First create a folder i.e. we create a folder named  "Play movie with html code" 
    2. Now add two files in this folder in which one file is movie file which is of any format like '.mp4', '..webm','.ogg' etc. and second file is '.swf' format. We used two files 'movie.ogg' and 'movie.swf'
    3. Now open a notepad file and paste the following code


  <!DOCTYPE html>
  <html>
  <body>
  <video width="320" height="240" controls="controls" autoplay="autoplay">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
  <embed width="320" height="240" src="movie.swf" />
  </object>
  </video>
  </body>
  </html>

             Now saved the above file with any name along with .html' extension. i.e. we used 'playmovie.html'

             4     Now when we browse the 'playmovie.html' file in any browser then it play your movie.

Video play with HTML code



Twitter Bird Gadget