Quantcast
Home / SOFTWARE DEVELOPMENT / WEB DEVELOPMENT / DOT NET / Create a simple website by using Visual Studio Express for Web

Create a simple website by using Visual Studio Express for Web

Exercise 1: Create additional pages

In this practice, you create a simple website by using Visual Studio Express 2012 for Web. The quality of the webpages produced will be less than desirable because CSS hasn’t been discussed yet.

You start by creating an ASP.NET website by using Visual Studio Express 2012 for Web, and then you add to and modify the home page.

1. If you haven’t installed Visual Studio Express 2012 for Web, do so now. You can download this from the Microsoft website.

2. Start Visual Studio Express 2012 for Web. Navigate to file and choose New Project. Navigate to Installed | Templates | Visual Basic | Web and select ASP.NET Empty Web Application.
3. Set the name of your application to ContosoWebSite.
4. Select a location for your application.
5. Set the solution name to ContosoWebSiteSolution.
6. Be sure to keep the Create Directory For Solution check box selected.
7. Click OK to create your new project.
8. When the application is created, click Debug and select Start Debugging. (The shortcut key is usually F5 but can vary based on your installation settings.) The ASP.NET Empty Web Application doesn’t include a home page, so an error page is displayed, showing an HTTP Error 403.14 – Forbidden error. The error page indicates (in a rather indirect way) that you don’t have a default page on your website, so the web server tries to display a list of all files in the directory. However, the security settings on the website will not permit directory browsing to display the directory contents.
9. Close the error page, which should automatically stop debugging. If you need to, you can stop debugging by clicking Debug and choosing Stop Debugging (or pressing Shift+F5).
10. Add a home page. In the Solution Explorer window, right-click the ContosoWebSite project, choose Add, and select HTML Page. Set the name to default.html and click OK.

The home page is added to your website and contains the following HTML.

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
</head>
<body>
</body>
</html>

11. In the <title> element, set the title to Contoso Ltd. Home Page.
12. In the Solution Explorer window, right-click the project, choose Add, select New Folder, and name the folder Images.
13. In the Solution Explorer window, right-click the Images folder that you just added,choose Add, select Existing Item, and select the ContosoLogo.jpg
14. In the <body> element, add a comment and set the text to Add <img> with Contoso logo.

15. Using the <h1> element to create a heading, add the Welcome to Contoso Ltd. heading to the body after the comment.
16. After the <h1> element, add a comment. Set the comment text to Add <iframe>

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Contoso Ltd. Home Page</title>
</head>
<body>
<!–Add <img> with Contoso logo–>
<h1>Welcome to Contoso Ltd.</h1>
<!–Add <iframe> here–>
</body>
</html>

17. In the Solution Explorer window, right-click the default.html page and choose Set As Start Page.
18. Click Debug and choose Start Debugging (F5). You should see the rendered screen, Using the <h1> element produced a heading with a large font. Notice that comments are not displayed, but if you right-click the page and choose View Source, you see the HTML source, which has the comments. The text in the browser tab contains Contoso Ltd. Home Page, which is the text that you entered in the <title> element.

Exercise 2: Create additional pages

In this exercise, you add pages to the website you created in Exercise 1. If you didn’t perform Exercise 1, you can use the files in the Exercise2\LabStart folder to start. You won’t be able to get to the new pages from the home page yet because you add that functionality in Exercise 3.

1. In the Solution Explorer window, right-click the project, choose Add, and select HTML Page. Set the name to MainContent.html and click OK. The content will be kept simple.
2. In the <body> element of the MainContent.html page, add the following text: Here is the main content for the home page. Set the title to Main Content.

Your HTML should look like the following.

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Main Content</title>
</head>
<body>
Here is the main content for the home page.
</body>
</html>

To view this page, right-click the middle of the source and choose View In Browser (Internet Explorer). You should see the rendered screen, . Note that almost nothing is on this page. It doesn’t have a heading or logo. In Exercise 3 you combine this content with the home page to obtain the header and logo.

iframe 1

4. Close the browser window.
5. Add a new HTML file and name it HumanResources.html. In the <body> element, add the following text: Human Resource content here.
6. Right-click the middle of the source and choose View In Browser (Internet Explorer). You should see the rendered screen with the text you entered.
7. Add another HTML file and name it ExpenseReports.html. In the <body> element, add the following text: Expense Report content here.
8. Right-click the middle of the source and choose View In Browser (Internet Explorer). You should see the rendered screen with the text you entered.

Exercise 3: Embedding Content

In this practice, you extend the Contoso, Ltd., website that you created in Exercise 1 by linking the pages and displaying pages in an inline frame. If you didn’t perform Exercise 1, you can use the files in the Exercise3Start folder to start.

1. Open the default.html file and locate the comment that states that an <img> tag is to be added. Add an <img> tag after the comment. Set the src attribute to Images/ ContosoLogo.jpg.
2. Locate the comment that states that an <iframe> tag is to be added. Add an <iframe> element with a name attribute set to iframeContent and an src attribute set to MainContent.html.

Your default.html page should look like the following.

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Contoso Ltd. Home Page</title>
</head>
<body>
<!–Add <img> with Contoso logo–>
<img src=”Images/ContosoLogo.jpg” />
<h1>Welcome to Contoso Ltd.</h1>
<!–Add <iframe> here–>
<iframe name=”iframeContent” src=”MainContent.html”></iframe>
</body>
</html>

3. Click Debug and choose Start Debugging (F5).
You should see the Contoso logo, and the MainContent.html file is now included on the page.

4. Stop debugging.
5. On the default.html page, after the <h1> element, add a hyperlink for Human Resources that references the HumanResources.html file and targets the <iframe> element called iframeContent.
6. After the Human Resources hyperlink, add a hyperlink for Expense Reports that references the ExpenseReports.html file and targets the <iframe> element called iframeContent.
7. Add a <br /> element after the Expense Reports hyperlink.

The completed default.html file should look like the following.

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Contoso Ltd. Home Page</title>
</head>
<body>
<!–Add <img> with Contoso logo–>
<img src=”Images/ContosoLogo.jpg” />
<h1>Welcome to Contoso Ltd.</h1>
<a href=”HumanResources.html” target=”iframeContent”>Human Resources</a>
<a href=”ExpenseReports.html” target=”iframeContent”>Expense Reports</a>
<br />
<!–Add <iframe> here–>

<iframe name=”iframeContent” src=”MainContent.html”></iframe>
</body>
</html>

8. In the HumanResources.html and ExpenseReports.html files, add a <br /> tag to the end of the body text, and then add a hyperlink to the home page that references MainContent.html.

Note that you don’t need to target the current frame because the default behavior of the hyperlink is to replace the current page with the new page. The following is an example of the completed ExpenseReports.html file.

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
</head>
<body>
Expense Reports content here.
<br />
<a href=”MainContent.html” >Home</a>
</body>
</html>

9. Click Debug and choose Start Debugging (F5).
You should see the new home page with hyperlinks. If you click the Human Resources hyperlink, you should see the HumanResources.html content load into the <iframe> element, the <iframe> content, you should see a hyperlink
to the home page that you can click to reload the MainContent.html file into the <iframe> element.

Facebook Comments

0

User Rating: 4.43 ( 2 votes)

About Shalini Rawat

Check Also

ASP.NET Interview Question Part-2

1) How does the cookies work in asp.net? When a cookie is created it will …

ASP.NET Interview Question Part-1

1) What’s a bubbled event? The event processing routine for each object in complex control …

ADO.NET interview Questions-Part 2

1.What are the advantages of ADO.NET? The advantages of ADO.NET are as follows:- It is …

Leave a Reply

Your email address will not be published. Required fields are marked *