- By Steve Suehring
If you choose to not use Visual Studio, I’ll assume you have a way (and the knowledge) to view the HTML pages you produce in a web browser. Many of the early examples won’t require a web server, but the later chapters do require a web server. (Visual Studio includes a suitable web server.)
Within Visual Studio, choose File, New Web Site.
In the New Web Site dialog that appears (shown in Figure 1-4), select the ASP.NET Empty Web Site. In the Web location text box, type StartHere as the name, (you might need to scroll to the right to get to the end of the File System and then click OK to create the website).
Figure 1-4 Creating an ASP.NET Empty Web Application project in Visual Studio 11.
A blank, empty project opens, like the one shown in Figure 1-5.
Now it’s time to add a file to the project.
Figure 1-5 An empty web project in Visual Studio 11.
For this first example, add an HTML file. On the File menu, select New File.
The New File dialog box appears, such as the one shown in Figure 1-6.
Figure 1-6 The New File dialog within Visual Studio 11 is where you add new files to your project.
Click HTML Page, change the name to index.html, and then click Add.
Depending on the version of Visual Studio you’re using, you might see a basic HTML page that uses an XHTML document type similar to that in Figure 1-7. Some versions of Visual Studio use an HTML5 doctype as you’ve seen throughout the chapter, so your screen might look different than this.
Figure 1-7 A beginning page with Visual Studio 11.
If your version of Visual Studio has the XHTML doctype as shown, the first thing you need to do is switch the DOCTYPE for the page. If your doctype is already the HTML5 doctype (<!DOCTYPE html>), there’s nothing to change and you can skip this step. If you need to change it, highlight the entire DOCTYPE declaration in Visual Studio and delete it. Replace that long (and ugly) DTD with the following:
Within the <html> declaration, remove the xmlns namespace attribute. This applies only if it’s present. Some versions of Visual Studio don’t have this attribute present. If it’s not there in yours, you don’t need to change it.
Regardless of the version of Visual Studio you have, you need to change the <title> tag so that it contains the words Start Here. With those three changes (which you can find in the companion content as index.html), the page should look like this:
<!DOCTYPE html> <html> <head> <title>Start Here</title> </head> <body> </body> </html>
The file is still unsaved and will have the default name chosen by Visual Studio, as seen in Figure 1-8. It’s time to save the file and view it in a web browser.
Figure 1-8 Making basic edits on your first webpage through Visual Studio.
If you haven’t already saved the file, save it now. On the File menu, click Save or use the Ctrl+S keyboard shortcut. In some versions of Visual Studio, you’ll see a Save File As dialog, as shown in Figure 1-9. Save the file within your project, and name it index.html. Note that you might not see this dialog at all if you’re using Visual Studio Express Edition for Web.
Figure 1-9 . Saving the webpage as index.html within the project.
With the file saved, the next step is to view it in a browser. The easiest way to do this in Visual Studio is to click the Run button on the toolbar or select Start Debugging from the Debug menu. When you do so, Visual Studio performs some background tasks, starts a web server (Internet Information Services, or IIS), and launches your default web browser. Note that you might see a dialog indicating that debugging isn’t enabled. Accept the default, and click OK to modify the web.config to enable debugging.
If all goes well, you eventually see a page like that shown in Figure 1-10.
Figure 1-10 A successful run of your first webpage.
If you see a screen like that in Figure 1-10, your project ran successfully. Even though the page itself is blank, notice that the title bar reads “Start Here,” thanks to the change you made to the <title> tag in the page.
Close your web browser.
Closing your browser has the effect of stopping the project from running, and you’ll be back at the source window for your index.html page.
Within index.html, add the following code between the opening <body> tag and the closing </body> tag (saved as index-wjs.html in the companion content):
The code for the final page will look like this:
To run that code, on the Debug menu, click Start Debugging, or on the toolbar, click the green Run button.
You’ll now see a webpage like the one in Figure 1-11.
In the Solution Explorer (normally on the right), right-click the name of the site, StartHere, click Add, and then click New Folder. Name the folder js.
Add another folder by using the same process: in Solution Explorer, right-click the StartHere project, click Add, and then click New Folder. Call this folder css. Your final Solution Explorer should look like Figure 1-12.
Figure 1-12 The final Solution Explorer with two folders added.
One common misconception is that using a POST request rather than a GET request will keep the data secure. This is not true. Data sent by using POST is just as vulnerable as that sent through a GET (where the parameters show up in the address bar). So what can you do? Check the data in the server program.
This problem is slowly becoming less and less important. Inside organizations that standardize on specific browsers and versions, it’s a minor problem. However, if your application will be used on the Internet, you need to accommodate differences between web browsers. The primary way to find out if your page works in other browsers is to test it in other browsers. This is not terribly difficult to do, but recently it has become even more cumbersome with the advent of mobile devices, which have their own browser implementations.
Microsoft provides free Application Compatibility images for Virtual PC. These are full operating systems with various versions of Internet Explorer installed on them. The current link for these is http://www.microsoft.com/download/details.aspx?id=11575, but if that link changes, an Internet search for “Internet Explorer Application Compatibility VPC” should result in the updated location for those images.
Other browsers such as Chrome, Firefox, and Safari are free downloads. I recommend that you acquire them and test your applications in those browsers, as well.