DSC488/588 Tutorial 1

Tutorial 1

UP TO SPEED WITH HTML AND VISUAL STUDIO

TIPS
1. To refresh your memory of HTML, go to http://www.w3schools.com/html/default.asp. The “read about
…” links in the instruction point to references for specific elements.
2. Watch and follow along the step-by-step video help on Bb. Save them to your hard drive first.
3. Do not use spaces in file names or folder names.
4. If you see squiggly lines underneath your code, usually that indicates errors. Fix them before continuing.
5. View the page in browser often to make sure the code is correct.

BACKGROUND
Prime Properties is a small real estate company that specializes in residential properties. The owner, Maria
Valdez, would like a Web site to showcase her listings and provide a point of contact for her clients, who are mainly middle-class working adults who are looking for a home in the northwest Chicago suburbs. Maria would like a home page, a listings page that contains information about her properties, a financing page, and a contact page.
A site map for the Prime Properties Web site is shown on the right.
The site map describes the architecture of the Web site, a Home page with three main content pages: Listings, Financing, and Contact. A sample page layout is displayed on the right. It contains a site logo, a navigation area, a content area, and a footer area for copyright information.

CREATE A NEW SITE
1. Create a new ASP.NET website on your local computer
2. Rename your website from Website1 to your duckId plus tutorial number such as “fyin_tutorial01”.

CREATE HOME PAGE
3. Create a new page named default.aspx.
4. Enter the content as shown on next page. Use a descriptive page title such as “DSC488 | Your name | Tutorial 1” instead of “Untitled”.
5. Use <h1> for the Prime Properties logo.
6. Configure the following text to display within a paragraph using <p>.
Home Listings Financing Contact
7. Code anchor tags (read about anchor element) so that Home links to default.aspx, Listings links to
Page 1

DSC488/588 Tutorial 1

listings.aspx, Financing links to financing.aspx, and Contact links to contact.aspx. Alternatively you can use asp:HyperLink to accomplish the same
8. Content: Place each line of text shown below in its own paragraph (or in one paragraph and separate them with <br />).
Prime Properties is prepared to market and sell your property.
The philosophy of Prime Properties is to promote our clients, not ourselves.
We can also help you find the property that meets your needs:

Place the following content in an unordered list (read about unordered list) using <ul> and <li>: location price features
9. Contact information: The address and phone information should display in one paragraph with line breaks using <br />.
10. Footer: Place the copyright information (using © for the copyright symbol) and your name in an e-mail link (<a href=”mailto:emailaddress”>) in one paragraph with line break in between. (I forgot the mailto: part in the first video but corrected it later).
11. Save default.aspx.

CREATE FINANCING PAGE
12. In Solution Explorer, create a new page financing.aspx. Open this page and modify the title of this page to