First time visitor? The tutorials start here.

Download the Practice Files

Now it’s time for your first test and a little bit of practice. I zipped together a butt-ugly web page, two blank CSS files and an image, then uploaded them so you can download, unzip, and work with them on your computer’s hard drive.

Download the practice files here.

Unzip and save those files to your desktop, or to another folder on your computer where you will find them easily.

As your first test, I left a link open for you to close, and hid the solution within the page itself in case you have trouble figuring it out on your own. Open “practice1.htm” in Crimson Editor (right-click on the file and choose “open with”), where you will see the “source code” to edit (you’ll find an explanation of “source code” below). If you don’t have Crimson Editor, read about it here and then download it. Or, if for some reason you can’t install a new program, you can use Notepad, which isn’t nearly as good.

What is “source code”? In this case, it is merely the code within a web page. You can actually go to any web page and view its source code by clicking on “View” in your browser’s toolbar and choosing “Page source” or “Source” depending on your browser, or right-clicking on a blank area of the page and choosing “View page source” or “View source”. Some webmasters will disable right-clicking on a page, but the other option is always available.

Anyway, back to the practice page, “practice1.htm.” Feel free to add or change those links, save more images to the /images/ folder and display those in your page, change the headings, add a horizontal rule or two, etc., until you are comfortable with these basic xHTML commands. If you have trouble with anything, refer back to xHTML Basics, Basic xHTML Tags, and Absolute, Relative, and Root-relative URLs. Note: Root-relative urls won’t work on your home computer unless you have server software installed on it, so don’t worry about making those work right now.

After you are comfortable with this exercise, I will teach you how to style your page with CSS.

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Comments (2)

bchitalaAugust 26th, 2015 at 10:57 pm

Hi Lesa,

If you wish to display just one paragraph out of several, what code do you use tell the reader there is more to read?

Thanks,

bchitala

LesaAugust 27th, 2015 at 2:53 am

Hi bchitala,

I’m going to take a huge leap here and guess that you’re asking about WordPress? If so, just put <!–more–> where you want the break to be.

If my guess is incorrect, please supply more information and I’ll see if I can help.

Cheers!
Lesa

Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.