Starting your HTML Page: This section describes the steps to follow in order to create your HTML page.

Step 1: Gathering your materials

Before building a web page, it makes sense to gather all the parts you will need, (i.e. the images and documents you will link to) before you start writing the code. For this webpage, you need two additional files: a PDF and an image.

PDF

The PDF that you link to can be anything you choose, as long as you created it yourself. You will probably remember creating a PDF for the library screenshot assignment in TOR Part 1. If you need a refresher, please refer to the How to Create PDFs handout.

Image

You will also need to include an image on your page. Again, this needs to be either something that you own or something that is in the public domain, (i.e. not under copyright). There are many options for this, such as: creating one using Adobe Photoshop or another image-editing application; using a digital photo, or bringing a photo to the Lab to scan it; checking the Creative Commons at Flickr. Whatever you choose, it is important that your file is saved as either .jpg, .gif, or .png format (for definitions, consult Webopedia). These are the three image types that a web browser can display.

Step 2: Choose an HTML Editor

Next you need to decide which HTML editor you will use. You can start with one and change to another later, but that could get confusing. Once you've decided on a program, create a new document and save it to either your hard drive, or to your network folder (a.k.a. Y: drive) if you are on a Lab computer. Be sure that the file has a .html extension (.htm will work too). You should save your .html, PDF and image file to the same directory.

Step 3: Write your Code

With your new blank .html document and your additional materials on hand, you are ready to start writing the code. If you attended a workshop or completed the online tutorials, you can refer to your handouts and notes. You might also want to have some reference material handy, for instance a Web Glossary and HTML/XHTML Tag List. Since these two examples are online, you can leave them open in a second tab or browser window as you build your page. Remember to save your changes often, and check the results in a web browser from time to time.

Step 4: Proofread

When you have finished writing your code, check to be sure that you have included all of the required elements, and that your links work. If you notice problems, proofread your code! A small mistake like a misplaced slash can make your whole page fail. You should test by opening your page in both MS Internet Explorer (or Safari, on a Mac) and Firefox, since these are currently the most widely used browsers.

Step 5: Show your Page to the World

If everything looks good, it is time to upload your page and supporting documents to your public space on the Simmons web server. You will do this via FTP software, using the instructions on the next page, FTP and Making your Page Public.

Step 6: Test and Submit your URL

Once you have used FTP software to upload your files to your public web space, they will be visible online. As a final check, open a web browser and type the following URL (inserting your own Simmons username):

http://web.simmons.edu/~username

You should see all of the files you just uploaded. Click on the .html file to view your page. If this doesn't work, check to make sure that you don't have any typos, and that your file name does not include any spaces (underscores make a good replacement). Details really matter here.

If you can view your page successfully, congrats: it can now be viewed by anyone on the web! Once you have finished your wiki page (covered in the next section), you will want to copy and paste the URLs for both pages, and submit them in eLearning.