Tutorial – Nightfall – Step 2

An Ode to An Old Friend
“ has passed away. Kicked the bucked. Been buried. Sung it’s last hurrah. Let it be remembered for many long nights of ‘search and replace’ and for having one heck of an ability to pack on the kilobytes. We shall remember you, as we look back upon what the web once was. Adios.”

Relearning fonts.

So you may have heard that the  tag is dead, but if you haven’t had the time to study up on the standards, you may be keeping it around for lack of a substitute. Worry not, I’m going to show you exactly how to transfer over what you used to do with in a way that will validate properly as standardized code.

First, take a look at something that you should find interesting. Reload your working copy of Nightfall – the version with the changes you made in Step 1. You should see that something curious has happened to the navigation links on the left hand side of the page. Look up a little higher on the left, and you’ll see that the alignment of the graphic is now gapped. Why did this happen? The answer is this: You added in the document type definition (DTD). That told the browser to interpret the code following HTML 4.01 Strict definitions. Since much of that area of the code consists of non-validating code — it is not showing properly. We’ll fix that little by little.

Let’s begin by opening up our code again. We are going to jump down to around line 28, which is our first instance of the  tag. It looks like this:

<td width="100%" valign="top" background="images/waterfallmenu.jpg" height="395"> 
 
 
 
<a href="#">Home</a> 
<a href="#">Latest News</a> 
<a href="#">Information</a> 
<a href="#">Designs</a> 
<a href="#">Contact Us</a> 
<a href="#">Links</a>
 </td>

This will be the section we’ll be working in. Now, you should see something quite obvious about these links, and I’m sure you’ve seen and done the same thing before. All of these links are the same colors and sizes and font face. So… let’s examine what we actually have here. We have a <td> that is a container for this section and is holding one of the images on the left for the background. Then inside that is an empty paragraph break, then the paragraph section starts for our links. When we are done with the links, it closes the paragraph and the <td>. Okay. So every thing inside that <td> (except the background image) is about our links. No question about it. Did you notice this little chunk of text?

If so, give yourself a brownie point. This is a snippet of CSS called inline style (because it’s writting within a line of code). However, it’s been used incorrectly. Take a look at that line and ask yourself… 50 what? Percent? Pixels? There was a percent used for the line-height… What does the 50 mean? Yep, that’s what the browser wondered too, and that is why the links have no left margin now that the DTD says to read this strictly. That part is improper code, so it was ignored. Let’s take a wild guess that they don’t mean that they want the margin to be huge, so it’s not percent. Change it to say:

Now save and refresh your page. Voila! You have fixed that part. See, CSS isn’t so terrible eh? 😉 Now we’re going to use this little style section again, but back to the  tag for a bit. Right after that section you just set the margin is a  tag. At the end of the links section you’ll see that the tag is closed. Okay, so we want all of these links to be bold. Gotcha. Let’s do it a different way, because the tag is another one you’ll have to unlearn – might as well start now. The equivalent to the  tag is to use <style= font-weight: bold">. To see how this will work, first go ahead and delete both the start and end bold tags (lines 28 and 35). Now, we already have a style started for this paragraph, so let’s just add that in to there. You can see that you separate attributes in there with a ‘;’ sign, so just change it to:

Save and refresh your page. It should look the same as before with nicely bolded text without the tag. Now let’s take a look at that first tag after the style:  and see how we put the size of text into the style. The conversion is pretty easy. But again, I ask you… 2 what? Pixels? Em’s? Ex’s? Points? You have to be specific because there are many things it can be. We’ll just say it’s supposed to be 2ex because 2px would be far too small. (Note: 2ex would be approximately 12px, so you can use whichever you prefer.) The conversion from the old  tag to the new one is <style="font-size: 2ex">. So, that considered, let’s delete the  on line 28, as well as that last  before the closing paragraph tag on line 35. Now let’s add in that new way of writing the size into the existing style, as follows:

Good. Now save and refresh. Should look about the same. I think it might look a bit better at a 13px size, but it really doesn’t matter for this. We’ll cover aesthetics later. Now, moving on. Let’s do something about that font face and color in the next lines – and this is where you will really see the power of CSS. Starting on line 30, let’s learn the conversion for this:

Can be easily converted to a style as this:

So, let’s go ahead and do the most fun part of all of this. Strip out all of the tags in that section of code. Then add in those new styles for the font family and color to the existing style. While you are at it, please change all of those   tags to their actually proper format as   (yes, the space is important). Those break tags are openers but they are assumed to be self closing, we need to make them actually be self-closing tags, and that is how you do it. This is what your code should now look like:

<a href="#">Home</a> 
<a href="#">Latest News</a> 
<a href="#">Information</a> 
<a href="#">Designs</a> 
<a href="#">Contact Us</a> 
<a href="#">Links</a>

Wow. Looks a lot neater doesn’t it? Save and reload. Eep! My text is blue! Actually, that’s what it should be because they are links and not just plain text and we haven’t set the color for the links yet. Not to worry, it’s super simple to do. But look first at how much cleaner that code is and imagine how easy you can change things.

Think you can do the same thing on your own to this chunk of code that you’ll find on lines 52 – 57? I bet so. Just put the style information for line 52 in the paragraph style that is already started, and then put the other style for the text below inside the blockquote tag. It should start like this:

More Info
<blockquote>
Delete this text, but keep the formatting and colours if you wish.
It is recommended that you give this page your own title and description.
Good luck with your site :)
</blockquote>

And end up looking like this:

More Info
<blockquote style="font-family: Arial; font-size: 13px; color:#FFFFFF;">
Delete this text, but keep the formatting and colours if you wish.
It is recommended that you give this page your own title and description.
Good luck with your site :)
</blockquote>

Notice that I did add the px to the margin that was listed just as a number again, so now that ‘More Info’ text is aligned as it was in the original. Also, I did decide to use the 13px for the font this time, and I think it looks a better size than the 2ex. I suggest going back and changing that text size in your links. But! The good part is that you don’t have to change it for every single  tag 🙂 Are you feeling a bit less sad to have buried the ? Hopefully. And now if you go back to what we did in Step 1, and run the page through the W3C validator – you should come up with only 28 errors, from where we started at 45. Progress.

Step 1 <– Back -OR- Continue on: Step 3

~Nicole

Relearning fonts.

Published by Nicole Hernandez