One of the problems that you’ll almost certainly encounter when you’re trying to decipher how the sample index.html page and the style.css file work together, is how to tell which style or styles are governing the appearance of a certain item on the page. For example, look at the screenshot above, where I’ve added the "Welcome to my site" heading. Now look across to the Categories subheading on the left hand side of the screen, and particularly the "Web Development" line. If you wanted to change the appearance of that text, which entry in the css file would you need to change?
In an ideal world, the structure and content of the css file would tell you all you need to know. And indeed there’s a section in the file called #links, which, if you remember our first lesson on CSS, means that this is the style for the item on the page which has an id of "links". There is indeed such an item, namely a tag that consists of <div id="links">, but this, if
you look through the HTML code of the index page, clearly refers to the links under the Pages heading and not the entries under the Categories heading. So it’s back to square one. There are two techniques that can help you track down the css entry that affects an item on the page. Firstly, use Amaya’s status line. Load Amaya, open the page in question, place your cursor somewhere within the text that you’re interested in, and look at the very bottom of the screen. In the case of the page in question, you’ll see this:
The status line shows the hierarchy of HTML tags leading up to the item on which the cursor is positioned. So in this case, it’s the overall HTML tag, followed by body, then a selection of divs, then a div which is configured to use a class called "block". Within that div, we’re looking for an unordered list, and list item within that, and a hyperlink (the <a> tag) within that.
The second technique is to look at the HTML code near the text you’re interested in. View the HTML source with Amaya (or even load it into WordPad or Notepad, if you’d rather). Search for "Web Development" and what you actually see is:
As we can see again the Web Development entry is a link within a list item, within an unordered list, within a div that is to be formatted with the css class called "block".
Although this looks cut and dried, it’s not necessarily the end of the story. If you look further at the HTML source code, you will see that the above-mentioned div is actually contained entirely within another div that has an id of "menu", and that div itself is within yet another one called "contentwrapper". Any or all of which could be affecting our text, but at least we have some good clues as to where to look in the css file.
Let’s start with the entry at the very end of Amaya’s status line, and work backwards. It’s an <a> tag. The css file has only one mention of the <a> tag, so that’s a good place to start. Let’s change the entry from color: #990000 to color: #009900 and try viewing our index page again:
Success! Our links are now green rather than red.
Adding Pages and Navigation
With our downloaded template now tweaked so that it looks how we want, all that remains is to create additional pages and get the navigation (ie, the set of links down the left hand side) working.
When you download a template that includes links, it’s common for those links not to actually lead anywhere when clicked. If you look at the HTML source code for the page, and specifically the <a> tags which comprise the links, you’ll see lines that look something like
<a href="#"> or <a href="/">. The entry in quotes after the href command is the destination for the link, and would normally comprise a complete URL or at least an HTML file name. Instead, these links are all empty so we need to populate them.
First, we need to decide on the structure of our site. We don’t need the Categories section, so that can be deleted. In the Pages section, we’ll keep the first 3 (Home, Contact Us and About Us). We’ll delete the last 2, and replace them with a new entry called Blog.
So, to start, load the index.html page into Amaya. First look for the section of code that comprises the Categories block. It’s safer not to just select the whole block with the mouse and hit the Delete key, as you risk leaving a stray HTML tag in place. Much better to switch to HTML code view and do it properly.
We’re about to delete an entire section of the page, which starts with a <div> tag and ends with </div> . Don’t delete the second of the two </div> tags, as that closes a div which is opened earlier, and deleting it would lead to an imbalance. And a page that won’t validate correctly.
Press Backspace to delete the selected block of code, then save the HTML file. Open the page in your web browser, rather than Amaya, and the Categories section should now be gone:
To remove the final two entries in the Pages section, and add a link to an as-yet-nonexistent blog page, search for the Pages section in the HTML code and, using Amaya, change it to:
That’s the text of the links. Now we just need to set up the destinations. So, in Amaya’s page view (you can close the source code view for now), click somewhere on the green Home link and then, from the Links menu, choose Create Or Change Link. In the box, change the destination to index.html, as that’s our home page.
Change the Contact Us link to point to contact.html in the same way, and the About Us link to point to about.html too. Finally, set the Blog link to blog.html as well.
All that remains is to actually create the pages that we’ve now started referring to. So use the Save As option from Amaya’s File menu to save 3 more copies of the index page, called contact.html, about.html and blog.html. You can then edit those new pages, again with Amaya, to contain the relevant information according to the name of the page. Remember not to change any of the navigation elements because, if you do, you’ll need to make the same changes across all of your pages. That’s why we made sure that the page looked correct before we started to make the additional copies.