Post
Ask Question

Create a Web Form Layout Using HTML5

Introduction

 
This is a simple application for beginners that shows how to format a web form using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically, HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to format web form applications. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document. I hope this article helps to develop a format of a web form using HTML 5 and CSS tools.
 
Step 1: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "Page.aspx".
new.gif
 
When the user clicks a header menu such as Home or Forums, a new window is opened.
 
application.gif
 
Step 2: Add an HTML file to your web application.
  • Right-click on the Solution Explorer.
  • Add->add new item->HTML form.
  • The Name of the HTML form is "Form.html".
css.gif
 
html.gif
 
Step 3: In this section, we set a style used to set a color, margin, content of a body.
 
Code
  1. <style>  
  2.    body { margin: 0 auto; width:655px;background-color:Gray; }  
  3.    sec { display: block; }  
  4.    sec#art { width: 440px; float: left; padding: 10px; background-color:Silver; }  
  5.    art > header { text-decoration: underline; margin-bottom: 10px;  background-color:Aqua;}  
  6.    Asi { float: left; width: 100px; padding: 10px; }  
  7.    footer { overflow: hidden; clear: both; text-align: center; padding: 20px; }  
  8.    N li { float: left; width: 100px; text-align:center; padding: 10px; color:Lime; }  
  9.    N ul { list-style: none; overflow: hidden; padding: 0; margin: 0; background-color: #424242; }  
  10.    a { color:Fuchsia; }  
  11.    N li a { color:Red; }  
  12. </style> 
Step 4:  In this section, we set a title of menu and set a link of a menu.
 
Code 
  1. <N>  
  2.   <ul style="background-color: Purple">  
  3.   <li><a href="http://www.c-sharpcorner.com/" style="background-color: #66FFFF">  
  4.   <h2>  
  5.   Home</h2>  
  6.   </a></li>  
  7.   <li><a href="http://www.c-sharpcorner.com/Forums/">  
  8.   <h2>  
  9.   Fourms</h2>  
  10.   </a></li>  
  11.   <li><a href="http://www.c-sharpcorner.com/Media/ContactUs.aspx">  
  12.   <h2>  
  13.   Adverties</h2>  
  14.   </a></li>  
  15.  <li><a href="http://www.c-sharpcorner.com/Downloads/">  
  16.  <h2>  
  17.   Downlodes</h2>  
  18.  </a></li>  
  19.   </ul>  
  20. </N> 
b.gif
 
Step 5:  In this section, we set an introduction to a related title.
 
Code
  1. <sec id="arts">  
  2.  <art>  
  3.  <header>  
  4.  <h2>  
  5.  <a href="http://www.mindcracker.com/">Mindcracker</a></h2>  
  6.  </header>  
  7.  <h2>  
  8.   Mindcracker is a news based site<sec>  
  9.   that provide a information related to what's new come in a information  
  10.   technology worlds.  
  11.   It provide a information some fields that is  
  12.   product,web,programming,database,mobile etc.  
  13.  </sec>  
  14.  </h2>  
  15.  </art>  
  16.  <art>  
  17.  <header>  
  18.  <h2>  
  19.  <a href="http://www.c-sharpcorner.com/">CsharpCorner</a></h2>  
  20.  </header>  
  21.  <sec>  
  22.   <h2>  
  23.   Csharpcorner is a tutorials site that provide a information of a some programming  
  24.   language that is .NET,Java,PHP and etc. I am manish kumar singh auther of Csharpcorner.  
  25.   I am write a art of technology that name is a HTML5. This is a Page format Developed  
  26.   in HTML5.    
  27.   </sec>  
  28.   </h2>  
  29.   </art>  
  30. </sec> 
Step 6: In this section, we set a link of a side menu title.
 
Code
  1. <Asi>  
  2.  <h2 style="background-color: #66CCFF">  
  3.  Top links</h2>  
  4.  <ul>  
  5.  <li><a ref="external" href="http://www.mindcracker.com/">Home</a></li>  
  6.  <li><a ref="external" href="http://www.mindcracker.com/Videos/">Videos</a></li>  
  7.  <li><a ref="external" href="http://www.mindcracker.com/Story/">All Stories</a></li>  
  8.  <li><a ref="external" href="http://www.mindcracker.com/Beginners/">Beginners</a></li>  
  9.  <li><a ref="external" href="http://www.mindcracker.com/UserRegistration/LoginCheck.aspx?ReturnURL=/story/createstory.aspx">  
  10.  Share a Story</a></li>  
  11.  </ul>  
  12. </Asi> 
Step 7: Press "Ctrl+F5" to run the application in a browser.
 
Output
 
This is a format of a web form.
 
ouu
 
When the user clicks a header menu such as Home or Forums, a new window is opened.
 
out2.gif
 
out3.gif
 
out4.gif
 
Resources
 
Here are some useful resources:


Similar Articles