Quiz #4: HTML and CSS – Due April 5 or 6

Read p 26-39 in Chapter 1 of JournalismNext. To review what I covered in class, see Intro to HTML and CSS

Follow the instructions beginning on p. 27 under the heading “Build An HTML Page Quickly.” Create the HTML page as shown in the book. When you are done, create a CSS document beginning with the instructions on p.34. Link the two documents together.

Your finished product should look like the picture on p. 35.

Print out your finished Web page and bring it to class on Monday, April 5 or Tuesday, April 6.

Here are some tips for doing Quiz #4

Getting Started:
Stick with one kind of computer (PC or Mac) and one kind of text editor (Notepad or TextEdit). You might hit problems if you try to go between the two.

If you are doing this in Boz 134 or if using a Mac and have the MacOS X operating system, then you need to change the preferences in TextEdit. Follow these instructions.

Step-by-Step
1. Create the HTML document as shown in the book. Save as simple.html. Save it to your desktop.

2. Open Firefox or another browser. Select File, then Open File. Open you simple.html file.

3. When you get the the part about images, you need to get an image off the Web.
-Create a folder  on your desktop called “images.”
-Do a Google image search for PBS. Download the image file. Save it as picture.jpg and put it in the “images” folder.

4. Put the image code into your simple.html document as shown on p. 31. See the line that starts <img alt=”PBS” src=”images/picture.jpg”…etc> This is the command to call in the image. View it in your browser to make sure it works.

5. Then create the stylesheet.css as described on p. 33-35. Save it to your desktop.

6. Put the code to link your HTML document to your CSS document. View it in a browser. It should change the appearance as described in the book.

7. If something is not working or does not look right, go back and look at the code and figure out what you did wrong. This is how you learn HTML. By making mistakes and then figuring out how to fix them.

8. Print out your finished Web page. It should look like the p. 35.

Advertisements
This entry was posted in Quizzes, Tutorials. Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s