XHTML USING VISUAL STUDIO 2008 TUTORIAL

(updated: 7/21/09)

GETTING AN ACCOUNT WITH A WEB SERVER:

Park’s ITS (Information Technology Services) department provides a web server computer named kidd that you can use
for your web programming classes. If you’d like to use kidd for this class, you’ll need to create a personal account on kidd
and a password-protected cs321 folder within your account. You will need password protection because if you don’t have
it, you will run the risk of someone stealing your homework answers and then you will be severely penalized (even
though you might be unaware of the other person’s illicit behavior).

To create your password-protected cs321 folder on kidd, go to http://kidd.park.edu. Once there, click on the Request a
Web Site link. On the next page, log in. On the next page, select the kidd server. Fill out the form.

Your account might be created immediately or it might take up to four business days. To find out your account’s
username and password, go to http://kidd.park.edu/username.aspx. You'll need that information in order to upload your
files to the web server and also to view your uploaded web pages over the Internet. If you have questions about Park's web
server, contact kidd webmaster Scott Davis at [email protected].

If you’d prefer to not use Park’s web server and you already have an account with an Internet Service Provider (ISP), ask
your ISP whether they can provide web-hosting services.

As another alternative, you’re welcome to search for web service providers on your own. You may want to check out this
web site to see reviews of free and inexpensive web service providers:
http://100best-free-web-space.com/

No matter what web service provider you choose, you’ll need to obtain this information:

• The URL for the site that will receive your uploaded web files.
• Your web-server home-page folder; this is the folder that contains all of your web site's files and subfolders.
• user name
• password

If you've already applied for a site on Park's kidd web server as described above, then you should know this information
as a result of that application process, and it should look something like this:

web site URL: https://kidd.park.edu

home-page folder: your choice
user name: ######@park.edu, where ###### is replaced with your Park ID number.
password: your Park password (which is used for the OPEN system)

If you don't yet have an account with a web server, for the purposes of getting through this tutorial right now, you can use
a temporary account on Park's kidd web server. Here is the information for kidd's temporary accounts:

web site URL: https://kidd.park.edu

home-page folder: student_a, student_b, … student_z (pick one of the 26 folders)
user name: student_a, student_b, …, student_z (user name = home-page folder name)
password: a_student, b_student, …, z_student (password = reversed user name)

Note:
 2.
• If you and other people are doing this tutorial simultaneously, communicate among yourselves so that you choose
unique accounts.
• Don't use the temporary accounts for anything other than this tutorial.
o The temporary accounts are periodically wiped clean.
o Uploads to the temporary accounts can be traced to the source, so you will be held accountable for any
material that you upload. No hardcore pornography, please.

A home page is a web page that is considered to be a starting point for web navigation. A home-page folder is a folder
that contains a home page. If you apply for an account on kidd, you'll be asked for a user name and your user name will be
used for your home-page folder. My home-page folder is jdean.

VISUAL STUDIO BACKGROUND INFORMATION:

There are many different ways to upload web page documents to a web server. In this course, you are allowed to use any
tools that you like to accomplish these tasks. Since our lab has Visual Studio 2008 and Visual Studio 2008 is popular in
industry, I’ll describe how to use that tool. Although you may use tools other than Visual Studio 2008 for future
homework assignments, you must use Visual Studio 2008 for this tutorial. You are responsible for knowing how to use
Visual Studio; i.e., I may ask you questions about it on the exams.

Park is a member of the Microsoft Development Network Academic Alliance (MSDNAA), and, as such, Park computer
students are eligible to download many Microsoft products for free. See the Information and Computer Science (ICS) web
site, http://www.park.edu/ics, for a link to the MSDNAA site. To download Visual Studio 2008, you’ll need to login using
a password that you should have received in an email from Park ITS sometime within the past 6 months. If you can’t
recall such an email, contact Park’s ITS help desk and ask for access to the MSDN Academic Alliance site.

VISUAL STUDIO TUTORIAL:

When doing your homework assignments, you’ll probably want to use this Visual Studio tutorial as a guide. It is up to you
to carefully reread this Visual Studio tutorial and figure out how to do things for your homework assignments.

This tutorial uses x: to refer to the drive that you're saving your work on. In the lab, x: should be replaced by the USB
flash drive (do not specify the hard drive!). At home, x: should be replaced by the USB flash drive or the hard drive,
whichever you prefer.

To help with the big picture, here's a summary of what you'll be doing in this tutorial:
• On your local computer:
○ Create a web site named cs321.
○ Create a tutorial folder within your web site.
○ Create a simple hello web page in your tutorial folder.
○ Preview your web page.
• On your web server:
○ Open up your default web site (or create a new web site if there's no default web site).
○ In your web-server web site’s cs321 folder, create a tutorial folder.
○ Upload your local computer's hello web page.
• View your web page on the Internet.
• On your local computer:
○ Create a copy of your hello web page and name it hello2.html.
○ Edit your hello2 web page so that it uses an image file.
• On your web server:
○ Upload your local computer's hello2 web page.
 3.
○ Create an images folder.
○ Upload your local computer's image file.
• View your hello2 web page on the Internet.

Whenever you are asked to perform an action (left column below) that you've done before, I will refrain from providing
the supplemental information (right column below). If you don't remember the details of how to do something, look for it
earlier in the tutorial. I expect you to have to look up a lot of previously covered material. This is my attempt to force you
to start memorizing how to do things.

Actions Supplemental Information

Load Visual Studio. Click on the Start button.

Select All Programs.
Navigate the menus until you find Microsoft Visual Studio 2008 and click it.

Set general coding-style In the Tools menu, select Options.

preferences. In the Options dialog (window), if the Show all settings check box is unchecked,
check it.
In the options tree at the left, expand the Text Editor container.
Inside the Text Editor container, expand the All Languages sub-container.
Click the Tabs option.
In the Tab size box, type 2.
In the Indent size box, type 2.
If the Insert spaces radio button is unchecked, check it.
Click OK to close the Options dialog.

Create a new web site. Select File / New Web Site….

In the New Web Site dialog, in the Templates area, select Empty Web Site.
In the Location box, type x:\cs321.
In the Language box, select Visual C#. (Neither Visual C# nor Visual Basic are
used in CS321, but choosing Visual C# prepares you for CS322, where Visual C# is
used extensively).
Click OK.

Save the web site. You should see a Solution Explorer pane on the right side of your Visual Studio
window. If you don’t see it, select View / Solution Explorer.

Within the Solution Explorer pane, make sure that your cs321 web site folder is
selected.

Click on the save icon. That should save the item that’s highlighted in the Solution
Explorer pane (i.e., that should save the cs321 web site).

Verify web site creation. Go to Windows Explorer and locate the x:\cs321 folder. If you don't see the cs321
folder, try selecting the x:\ folder and clicking on the Windows Explorer refresh button
near the top of the window.
 4.
Actions Supplemental Information

Create a web page. Verify that your cs321 folder is still highlighted in the Solution Explorer pane.
Select File / New File….

In the Add New Item dialog, select HTML Page.

In the Name box, type index.html.
Click Add.

The index.html filename should appear in the Solution Explorer pane, and
index.html’s default body should appear in the window’s center pane.

What is index.html? The index.html file is the standard file for a web site's home page. It's typically the
first page that someone sees when visiting a web site.

Aside: Microsoft’s web server product, IIS, allows not only index.html, but also
index.htm, default.html, and default.htm, to be used as a web site’s home
page.

What are the viewing tabs? Note the tabs at the bottom of the index.html pane – Design, Split, and Source.
They determine the manner in which the user views the file's contents.

Click on the Design view tab. The Design view shows approximately how the file
will be displayed when viewed on the Internet. Since the Design view is blank at this
point (right?), that means that your current index.html page will display nothing when
viewed on the Internet. Although many web developers (especially new web developers)
use the Design view extensively, I require that you refrain from doing so. Got it? Never
use the Design view!

Click the Source tab.

Note that the Source view shows the actual HTML in the index.html file.

The problem with the Design view is that it allows users to edit the file with Visual
Studio commands that generate poor HTML code. To compound the problem, the
Design view hides HTML code so the user is unaware of the poorly written HTML
code that he/she is generating.

More specifically, Design view HTML code tends to be poorly written in that:
• It tends to be unnecessarily verbose (which means large files which means long
download times).
• It sometimes does not follow proper HTML coding standards (which can lead to
display problems on certain browsers).
• It tends to produce rigid code that doesn't adapt well to varying browsers and
browser settings.
 5.
Actions Supplemental Information

For all future homework To keep things organized throughout the semester, I'd like you to put your web pages in
assignments, use this naming separate folders. Later on when you learn about links, you'll use index.html files to
scheme. link your folders and web pages together.

For this tutorial, you'll create two web pages and store them in a folder named
tutorial. For homework 1, you'll store web pages in a folder named hw1, for
homework 2, you'll store web pages in a folder named hw2, and so on. The tutorial,
hw1, hw2, etc. folders should all be inside your cs321 folder. For all future homework
assignments, use that naming scheme!

Create a tutorial folder. In the Solution Explorer pane, right click on the cs321 folder and select New
Folder from the pop-up menu.
A newly generated folder should appear in your Solution Explorer pane. The name
of the new folder is New Folder by default.

You now need to rename the folder to tutorial:

1. If the name New Folder is already selected/highlighted, you should be able to
immediately enter tutorial, and it should overlay New Folder.
2. If that doesn’t work, then right click on the New Folder icon. That should cause a
menu to pop up. Select Rename from the pop-up menu. Immediately enter
tutorial, and it should overlay New Folder.

Create a new page within the Make sure that the tutorial folder is highlighted in the Solution Explorer pane.
tutorial folder. Select File / New File….

In the Add New Item dialog, select HTML Page.

In the Name box, type hello.html.
Click Add.

Enter content for the new Make sure the hello.html pane is in Source view mode.
page. Delete the entire contents of the hello.html pane (i.e., delete all the code).
Enter this, where your-name is replaced with your actual name:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="your-name" />
<title>Hello world tutorial</title>
</head>

<body>
Hello, world!
</body>
</html>
 6.
Actions Supplemental Information

Understand the code. Note the following items in the hello.html page:
• The xml element tells the browser the version of XML that's being used and the
character set that's being used.
• The DOCTYPE element tells the browser the type of document that's being
displayed.
• meta elements are used to help search engines locate relevant web pages.
• The title container's contents should display in the browser's title bar. So, for this
hello.html page, the browser will display "Hello world tutorial" in its title bar.
• The body container's contents should display in the browser's content area.

Save your web page. As always, it behooves you to save often.

Click the Save icon (it looks like a diskette).

Preview the page. Click on the Split tab.

Hello, world! should be displayed in the bottom of the split window.

Load a new Visual Studio Load a new Visual Studio session.

session.
The goal of the next several steps is to open a Visual Studio session for your web
server's web site. You’ll then go back and forth between your web server’s web site and
your local computer's web site.
 7.
Actions Supplemental Information

On your web server Visual If your web service provider creates a web site for you, then you should perform this
Studio session, open your user step. Since Park's kidd web server does create a default web site for you, those of you
name web site and then your using Park's kidd web server should perform this step.
cs321 web site.
Select File / Open Web Site…
In the Open Web Site dialog, click on the Remote Site button.
In the Web site location box, enter the URL for your user name web site. For
example, to access your user name web site on Park's web server, you would enter
https://kidd.park.edu/######, where ###### is replaced with your Park ID number. Note
the “s” in https, which stands for “secure socket layer.” It’s OK to omit the s when you
load one of your kidd web pages in a browser, but you are required to include the s when
you open your kidd site in Visual Studio.

Click Open.

You should be prompted to log onto the web server. Enter your user name and
password.
(If you are asked whether you’d like to upgrade your web site to use the .NET
framework version 3.5, choose yes.)

In applying for a site on kidd, kidd's webmaster should have automatically created a
password-protected cs321 web site inside your user name web site. In the Solution
Explorer pane, look for a cs321 folder. If it’s there, then you already have a cs321 web
site within your user name web site. If it’s not there, contact the kidd webmaster and ask
for a password-protected cs321 web site within your user name web site.

In the Solution Explorer pane, double click on the cs321 folder.

(If you are asked how to open the web site – (1) by first closing the current solution or
(2) by adding to the current solution – choose to first close the current solution.)

That should generate a new window for your cs321 web site with cs321 at the root of the
Solution Explorer folder list.
 8.
Actions Supplemental Information

On your web server Visual If your web service provider does not create a default web site for you, then you should
Studio session, create a new perform this step. Since Park's kidd web server does create a default web site for you,
web site and then create a those of you using Park's kidd web server should skip this step.
cs321 web site within it.
Select File / New Web Site…
In the New Web Site dialog, click on the Empty Web Site button.
In the Location box, type the URL for your home-page folder on your web server.
Click OK.

You should be prompted to log onto the web server. Enter your user name and
password.

In the Solution Explorer pane, select the home-page folder for your web site.
Select File / New Web Site…
In the New Web Site dialog, click on the Empty Web Site button.
In the Location box, type the URL for your home-page folder plus “/cs321”
appended to the right side.
Click OK.

That should generate a new window for your cs321 web site with cs321 at the root of the
Solution Explorer folder list.

Create a tutorial In the Solution Explorer pane, select your cs321 folder.
subfolder. Create a subfolder named tutorial inside your cs321 folder.

Open and close folders For practice purposes, click on the + and – icons in the Solution Explorer pane to
open and close folders.

On your web server Visual Make sure that your tutorial folder is highlighted in the Solution Explorer pane.
Studio session, upload your
local computer's In the Solution Explorer pane, right click the tutorial folder.
hello.html web page. In the pop-up menu, select Add Existing Item….
In the resulting dialog, select your local hello.html web page and click the Add
button to initiate the upload process.
Be patient during the upload – it may take several seconds.

Go to your web page on the Select File / View in Browser or, as a shortcut alternative, click on the View in
Internet. Browser icon at the top of the Visual Studio window.

If your web site is password-protected, you should be prompted to log in. Enter your
user name and password.

View your uploaded page. In the browser window’s title bar, you should see Hello world tutorial.
In the browser window’s content area, you should see Hello, world!

Go to your local computer's

Visual Studio session.
 9.
Actions Supplemental Information

On your local computer's In the Solution Explorer pane, look for your hello.html file.
Visual Studio session, create a Right click on your hello.html file and select Copy from the pop-up menu.
copy of your hello.html
file. In the Solution Explorer pane, right click on the tutorial folder and select Paste
from the pop-up menu.

The paste operation should have created a file named something like
Copy_of_hello.html.

Rename your copied file to You now need to rename the new file to hello2.html:
hello2.html. Right click on the Copy_of_hello.html icon. That should cause a menu to pop up.
Select Rename from the pop-up menu. Immediately enter hello2.html, and it
should overlay Copy_of_hello.html.

Display hello2.html in Even though you just created hello2.html, your edit pane doesn't automatically
the edit pane. contain its contents. To display hello2.html in the edit pane, double click on the
hello2.html file in the Solution Explorer pane.

Edit your hello2.html Edit the contents of your hello2.html file so that it contains the following where
page. yourName is replaced with your actual name:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="yourName" />
<title>Hello world tutorial</title>
</head>

<body>
Hello,
<img src="../images/earth.gif" width="40" height="40"
alt="world" />!
</body>
</html>

Preview the page. After saving your hello2.html file, click on the Split tab.
Depending on your browser, either “Hellow, world!” will be displayed or “Hello, *!",
where the “*” is replaced with an icon that indicates that the browser can't find the
specified item.

Understand the images In your HTML code, note that the img element's src attribute refers to the file
folder. ../images/earth.gif. That means that the browser will attempt to find a file
named earth.gif. It attempts to find the file by going up to its parent folder (the
".." specifies the parent folder), then going down to an images folder. The
earth.gif file should be stored in the images folder.

It is standard practice to have an images folder in a web site’s root folder.

 10.
Actions Supplemental Information

Create an images folder in Create an images folder within x:\cs321 (not within x:\cs321\tutorial).
your cs321 web site’s root
folder.

Load earth.gif into the Use a browser to find an earth icon file. I found earth icon files by going to Google’s
images folder. image library at http://images.google.com.
Once you find an earth icon file on the Web, right click on the picture itself and select
Save Image As… for FireFox or Save Picture As… for Internet Explorer. Save
the file to x:\cs321\images with the name earth.gif.

Note that you could have saved the file to any folder as long as your img element's src
attribute points to it. I'm asking you to use an images folder because that's a standard
folder and following standards helps with maintainability.

For all future homework assignments that use image files, you must store image files in
an images subfolder that’s inside your cs321 folder. Don't forget!

Preview the page. "Hello, * !" should be displayed, where the "*" is replaced with an earth icon. If the earth
icon isn't displayed, try refreshing the view by switching to the Code view and then
switching back to the Split view.

Go to your web server's Visual

Studio session.

On your web server Visual Make sure that your tutorial folder is highlighted in the Solution Explorer pane.
Studio session, upload your
local computer's Using the techniques explained above, upload the hello2.html file.
hello2.html web page.
On your web server Visual Make sure that your cs321 folder web site is highlighted in the Solution Explorer
Studio session, create an pane.
images folder. In your cs321 folder, look for an images folder, and if it’s not there, create it.

On your web server Visual Make sure that your images folder is highlighted in the Solution Explorer pane.
Studio session, upload your Upload the earth.gif file to the images folder.
local computer's earth.gif
file.

Go to your web server's

hello2.html file on the
Internet.

View your uploaded page. Hello world tutorial should be displayed in the title bar.
Hello, *! should be displayed in the browser content area, where the "*" is replaced
with an earth icon.

Exit from both Visual Studio For each Visual Studio window, click the File menu and then select Exit.
sessions.