how to create a simple,elegant food receipe website????

 Food… Its one of the basic needs of our life. without food,we cant live. If you know cooking, then its fine. We design a food receipe website with following features.

Here, a food receipe website. let us name it as “foodie”. It has Home page, about us,enquiry form and receipes page.

Home page displays the title, logo and categories along with a welcome message.About us page displays the details of the website owning authority.

Receipes page has many categories. They are divided into 4 types as follows…

  • ·       South special
  • ·       North Indian combo
  • ·       Continental menus
  • ·       Italy receipes

At last, enquiry form is used to collect the user queries.

Steps to follow:

  1. ·       Create a folder and name it as “foodie”.
  2. ·       Create a two logos. one for the top and another one for the welcoming page.
  3. ·       Now, create a file “home.html” which divides the webpage into three parts. first part is “top.html”. it displays the logo and title with menu’s like home, About us and enquiry.
  4. ·       Left part of the web page includes the receipe categories.
  5. ·       Right part of the web page includes the welcoming message.  

Html coding is given below.

“home.html”

<frameset rows="30%,*"> 

<frame src="top.html" noresize scrolling="NO" name="topframe"> 

<frameset cols="15%,*"> 

<frame src="left.html" noresize scrolling="NO" name="leftframe"> 

<frame src="right.html" noresize name="rightframe" scrolling="auto">  </frameset> 

</frameset>

 

“top.html”

<html> 

  <head> 

      <title>Top Frame</title> 

  </head> 

 <body bgcolor="Skyblue "> 

      <img src="foodie.jpg" width="125" height="115" align="left"> 

      <marquee bgcolor="yellow" width="650" behavior="alternate"> 

    <font face="Brush Script MT" size="8" color="green"><b><i>Foodie- Receipes encyclopedia</i></b>  

         </font>

     </marquee> <br>

<font face="Brush Script" size="4" color="white"><b>Created & Maintained By

rajeeva84@blogspot.com</b></font> 

   </center>

<br> 

<table width="100%" height="50%" cellspacing=10> 

<tr align="center"> 

 <td>  <a href="Home.html" target="_parent"><font face="Brush Script" size="6" color="navy">HOME </a> </td>

 <td> <a href="Aboutus.html" target="rightframe"> <font face="Brush Script" size="6" color="navy">ABOUT US</a> </td>

 <td> <a href="Enquiry.html" target="rightframe"> <font face="Brush Script" size="6" color="navy">ENQUIRY</a>

</td> 

    </tr>

   </table>

  </body>

 </html>

 

“Left.html”

<html> 

   <body align="center" bgcolor="bisque"> <br> 

      <a href="SouthSpecial.html" target="rightframe"><font size="6">Southindian Specials</font></a><br><br> 

      <a href="Northindiancombo.html" target="rightframe"><font size="6">Northindian Combo</font></a><br><br> 

      <a href="Continentalmenu.html" target="rightframe"><font size="6">Continental Menu</font></a><br><br> 

      <a href="Italyreceipes.html" target="rightframe"><font size="6">Italy Receipes</font></a><br> 

    </body> 

</html>

 

“Right.html”

<html>

   <body bgcolor="yellow">

     <center>

       <img src="Healthy food.jpg" height="170"><br> 

        <font face="Brush Script MT" size="5" color="blue">

          <h1><b>Welcome to foodie!!!</b></font><br /> 

        <font face="Brush Script MT" size="5" color="red">

          <h2><b> "A Huge Collection Of receipes of delicious foods"</b></h2></font>

     </center> 

   </body>  

</html>

 

The output is


Image: Output for foodie 
This is a simple,elegant website for a food receipe .

No comments:

Post a Comment