Linking to Zip Files & Using the Paragraph TagLinking to Zip Files & Using the Paragraph TagBy Vashti
So far we now have a completed page but it isn't linked to our zip file containing our Sims work yet. So for this tutorial we're going to learn how to link to a zip file, about using the paragraph tag, and adding the coding to make your page compliant with international standards. I left the compliance code until last so that you weren't scared or overwhelmed by it in any way.
Like images, zip files are best stored in subfolders so as not to make your site too confusing. Inside the folder where you have your html page stored, create a folder called "zipfiles".
For the purposes of this project, I have provided a zip file for you to practice linking to. It is the green coat pictured in the last tutorial. You can, however, use your own zip file. This zip file is provided for those who want to concentrate on learning html. You can download the zip file here.
When you download it, save it to the "zipfiles" folder we just created.
The code we are going to use to link to another file or html page is:
<a href="relative link to filename">
In this case, you'd use:
Open up your simscontent.html page we were working with in the last tutorial. Right after the first <td> and before the writing Aqua Coat by Vashti insert:
<a href="zipfiles/fullbody(vas)swirlycoat.zip"> as shown below.
We want both sets of text and the picture to be actively linked to the zip file. To do that correctly when you're dealing with a merged cell, we will need to put links to the zip file in each cell. We will be doing three sets of links in total.
Finish off the first link by typing </a> right after the words Aqua Swirly Coat by Vashti and right before </td> like so:
Repeat the process on the second row, placing the beginning of the zip file link right after <td rowspan="2"> and before the image link. Place the closing zip file link after the image link and before your </td> code.
We are using exactly the same zip file coding we used in the first link, so you may wish to just copy and paste the code onto the next row.
Begin your third zip file link after the <td> for the third cell and before the words Requires Sims 2 only, and end the link after the words and before the </td> for that cell.
Again, we're using exactly the same coding we used in instances 1 and 2, so you may just want to copy and paste the code into the third row. Hit "Enter" before the zip file link and again after it so you can more clearly see where the code is being inserted.
As we discussed in previous tutorials doing this is a wonderful way to help you keep track of your code, because the browser ignores spaces unless they're created with specific, special characters. We're going to work with another one of those codes in the next step.
When we looked at the last preview of our page, our table items were looking a little too close to our graphic bar, so we need to move it down the page a little. One way we can do this is by using the <br> tag that we used in previous tutorials. Another way we can do this is by turning our whole table into a paragraph.
The tag we use for that is<p>.
We are going to nest everything, including the coding we used to center our table, inside our paragraph tag. First, right before your <center> tag, at the start of your paragraph, hit "Enter", then type <p>. Next, right after your</center> tag hit "Enter" and then type </p>. Now save your work and we're going to preview it in our browser.
One last final step involves making your page compliant with current international standards. A body called the W3C administers HTML standards and code. A couple of years ago the code was becoming messy and misaligned. Not everything was working properly on everyone's computer. In an effort to standardize everything they made some modifications to the code which help the computer know which version of html it's dealing with.
This code belongs at the top of your page where we have <html> now. The reason why I left it until last is that it looks a little intimidating. When you need to use this code I would suggest simply copying and pasting this code into the relevant parts of your document. Remove <html> from the very top of your document and replace it with:
<!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">
Your page should now look as shown below. Save your html page in preperation for previewing it.
Preview your page in your browser as I taught you in the previous tutorials. Below you can see an example of what you should be looking at. The writing has turned blue and the blue border around the box shows us that the browser knows that it's linked to another file. We've also successfully managed to move our picture and words further down the page by using paragraphs.
We need to test the link to make sure that it is linking back to the zip file. We will test that link in the next step.
Click on each of the three linked areas on your page in turn.
In each case you should see a box come up like the one pictured below allowing you to save the file to your computer if you're using Firefox.
If you're using IE it may bring you straight to a screen that allows you to unzip your file. In either case, this means you've correctly linked the file and we are ready to move onto the next step!
In the next tutorial we will be creating our main site page and cross linking this page and that page with each other. In the final tutorial we will be teaching you all about CSS pages, which is the tool we use to format our pages and make them look pretty!