Module 2: Intro to XHTML

Purpose of This Module

In this module, you will be introduced to XHTML and you will use XHTML to create two basic web pages - which you'll save as module2.html and resume.html - including text, links, graphics, and a table. Use this module as the way to get a start on static pages for your portfolio.

Tools & Resources Needed for this Module

For this module and for nearly all of your web writing in this class, you will use basic web text editors. The Macs in 317 are equipped with TextWrangler. The PCs have Notepad++. You you should also download and install an editor on your personal machines. We will talk in class about the affordances of these tools. You will also need to use FTP to upload the files you create to your dev space. Practice this several times so that you are comfortable with the process.

Getting Started
  1. Launch your editor (either TextWrangler or NotePad++)
  2. Once you have a blank page, define the basic structure of your web page with the XHTML structural tags like this:
Save, FTP, & View on the Web!

Once you have typed in this information, FTP the file to your dev space. Name the file mod2.html. Then, launch a web browser; the URL of your page will be the path to your dev space, followed by a slash, and then the filename

More Editing Fun!

Head back to the HTML document in the text editor and add some additional structure. The changes should look like this:

Save the file & FTP again. Toggle back to your web browser, and click the Reload/Refresh button at the top of the browser window. This forces the browser to reload your file to screen. Notice how the changes you made in the code appear on screen.

Add an Image

Web browsers read three image formats: GIF/.gif, JPEG/.jpg, and .png (image files will be addressed in later modules); for this module, we'll primarily be working with GIF and JPEG files. For this module, we'll download graphics to use in our web pages.

MSU logos are available to download and use for free at the pages below; head to one of these pages and select an image you'd like to have on your web page: MSU Logos To download a copy of the image, follow these steps:

  1. On a PC: Right-click in the middle of the picture and hold until a menu box appears. On a Mac: Click in the middle of the picture and hold until a menu box appears.
  2. Drag to 'Save Image As...' or 'Save Picture As...' or 'Download Image to Disk' and save the image in the SAME PLACE as your module2.htm file.

NOTE: When you download an image, you may CHANGE the name of the file. For example, if one of the images is named 'msu_smlogo_GR.gif', you may change it to something else, like "msu.gif". Be sure to include the ".gif" or ".jpg" at the end of the file name.

Now Toggle back into your "module2.html" file and edit the file to include the image tag:

You can put the image whereever you like in the BODY of the file. Try moving it around to see what that does to the layout. When you are happy with where it is, save, FTP, and reload/refresh to view the file on the web.

Add External Links!

An external link is sometimes referred to as an absolute path, and is a complete link (with the http:// included) outside of and away from your site. Toggle into your module2.htm and add the following tag:

Note that you can put a link inside a paragraph or make it a list item. Or let it stand alone. What did you choose to do here? Do the save/FTP/refresh thing again now. Is it getting easier?

Add a Relative Link!

A relative link is a link to another file within your website. In this instance, we will make a link to another file that lives in your wa folder in your AFS space. is sometimes referred to as an absolute path, and is a complete link (with the http:// included) outside of and away from your site. You should always use a relative link path for internal links; don't include the protocol or server name (this makes it easier to move and maintain). Here's how your html file should be looking now:

You know the drill: save, FTP, refresh.

Post it, Get Credit! (and play around all you want)

Once you've carefully checked your web pages to make sure you've included all of the elements discussed above, feel free to play around a bit: moving text, adding images, changing colors, etc.

  1. FTP your XHTML pages to your web directory
  2. Test that the links work
  3. Then edit your Dev space main page to make links to the new files you created today.