Optional HTML (Extra Credit 25 pts)
Description: Download three sample HTML files and edit them to introduce new content of your own.
Learning Objectives: Practice basic HTML coding, practice saving the correct iteration of files, practice file management and structure.
Discussion
As you discovered in this week’s readings, HTML (hypertext mark-up language) is the language of the web. In this assignment you will edit three sample web pages to see the effects of changing the content, syntax and tags on the page. You’re free to make your web pages about anything that you like by changing or adding new text and images as you edit the samples.
HTML is a language made out of plain text. You can write web pages with a very simple text editing application like Notepad (on the PC) or TextEdit (on the Mac). Developers often use these text editors to touch up html code. When you open a web page in Notepad or TextEdit, you’ll just see a whole bunch of text – letters and numbers. But when you open the same file in a Web Browser like Firefox, you’ll see a formatted page with background colors and designs, stylized text, pictures and even audio and videos. That’s because the Web Browser is designed to ‘read’ the html code, which consists of ‘tags’ that give the browser instructions about what color background to use, how to display text, where to find multimedia files, along with the written content of the page. If you don't believe me, just control-click on this page and choose 'See page source' to check out the html of this page.
Again, we write html code using a Text Editor application like Notepad or TextEdit; we look at web pages in an application called a Web Browser, like the one you are using to read this right now!
Practice HTML Coding
Before you get to work on the assignment, you should practice coding HTML on the w3 schools web site. This is a great online interactive resource that lets you edit html and see the results instantly. Here's the link:
http://www.w3schools.com/html/default.asp
Give it a try: From the left side column on the home page, click on HTML Introduction. A new window will open with some sample html code in it. Below the example of the code, click on the link that says "Try it Yourself >>. The Try it Yourself editor shows the html code on the left, and the results as they would be displayed in a web browser on the right. If you change what’s typed on the left, click the button that says “Edit and click me” above the html text, then you’ll see your new output on the right, just like it would appear in a browser.
Try experimenting with headings, paragraphs, links, bold and italic text, and images. Note the difference between tags that require an opening and closing tag (<body> requires the closing tag </body> at the end of the page to work) and those that work with only one tag (<br> makes a line break, all by itself). Try deleting one tag to see what happens on the page, and then restore it to bring things back to normal. This’ll help you understand why your code doesn’t work some times.
Doing the assignment
Now that you’ve had some practice using tags, and troubleshooting HTML syntax, it’s time to make a web page of your own, using a Text Editor application to edit three sample files that we provide. First, download and unzip the practice files and store them in a new folder that you create for this assignment.
Click here to download practice files: page 1, page 2, page 3
Now that you’ve got the sample files tucked away, it’s time to open your text editor application. If you’re using a Mac, you’ve got a very powerful text editor built in called TextEdit, but you’ll have to do a little bit of tweaking in the preferences to make it produce plain text so that you can edit your web page with it. If you’re using a PC, no changes to preferences are necessary, so just open up Notepad from the list of all applications that are on your PC and skip the next paragraph.
If you’re using a Mac with TextEdit, open the program and go TextEdit>Preferences. Once the Preferences panel opens, on the Open and Save tab, make sure that the box called “Ignore rich text commands in HTML files” is checked, and that the box named “Delete the automatic backup file” is also checked. The “Preserve white space” box should also be checked.
Then, in the “New Document” tab, under the heading “Format”, click on the ‘Plain text’ radio button. Now close the Preferences panel by clicking on the red button at the top of the panel window. Your preferences will be saved automatically. You might be asking: What did I just do? Well, you just set up TextEdit to display and save your work as plain text, without any additional formatting in it.
Mac AND PC users now do this:
Open the file called 119HTML_1.html, which is the first HTML page that you downloaded to your folder on your computer by double clicking. The file will open in your default web browser (which should be Firefox). Your operating system knows that any file name that ends in ‘htm’ or ‘html’ should be opened by a browser. You’ll see a very simple web page with some black text on an orange background.
Part 1: Controlling background color and text styles
Your first task is to change the color of the background. To edit the page, you’ll need to open it with a text editor by option clicking on the file in the finder, and choosing "Open with..." TextEdit (PC users will right click on the file in windows and choose “Open As” with Notepad as their application). Opening a file this way allows you to control which application will open it – and you want to use either TextEdit or Notepad.
You should have three windows open on your desktop: Your text editor, your web browser, and the Finder window.
Your task is to change the background color of the sample page that you opened in the text editor. Look for the following HTML code in the sample: <body bgcolor=”orange” text=”black”> Just change the name of the bgcolor. You can use a basic color name like 'green' or you can enter a hexadecimal color like '00ff00' - try both to see what the results are. You can also change what’s written on the page to something that’s more about your interests, if you like.
As you work, save the changes to the HTML page in your text editor. When you want to see how your code looks in the Web Browser, switch your active window to Firefox and go View>Reload to reload the web page in your browser. You can also use the shortcut Command-R to reload the web page. 'Reloading' forces your web browser to close and open the file again. This time, the page will open with all of the changes that you made to it so that you can see how the Browser will display them. In the picture below, I have TextEdit open on the left, and the Firefox Browser on the right.
Part 2: Using images
Open the second sample file that you downloaded, named 119HTML_2.html. It contains some text and a picture of a yawning cat. Your task is to substitute another image of your choice for the cat, and to change the written text to say something about the image.
A word about managing images in HTML:
Look at the folder that you downloaded for this assignment. It contains several files, and it also contains a folder called ‘images’ that contains all of the images that you’ll use in your web pages. When you want to display an image, the HTML code tells the browser to find the image that you want in the “images” folder. Needless to say, you cannot remove the picture from the folder or move the folder to a new location if you want your web page to be able to find the image.
In order to change the image of the yawning cat, you’ll need to place another image into the ‘images’ folder, and change the HTML tag in your text editor so that it refers to your new image. For example, if I want to show a picture of an audience named ‘audience.jpg’, I’ll need to put a copy of the picture in the images folder, and I’ll need to change the HTML code to <img border=”0” src= “images/audience.jpg” alt=”audience at a show” to make the changes work.
Part 3: Working with tables
Many HTML pages use tables to position elements that might otherwise be difficult to control. Our last sample contains several tables. Your task is to edit the tables, so that they have a different number of rows and/or columns than the sample file.
Once again, when you save your changes in the text editor, you can reload the page in the Web Browser and see the results.
Take note of how tables are formatted in html. Each row is nestled between the <tr></tr> tags, like this:
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
and each column on a row is nestled between the <td> and </td> like this:
<td>300</td>
So if you want to add an extra column to the table, add something like "<td>400</td>
If you want to add an extra row, add something like
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
To complete Part 3 of this assignment
- You should change each of the three tables in this file.
- You should also change the headings above the tables to reflect the changes - if you added a row to the first table, the heading should be 'two rows and three columns' or something like that.
- If you wish, you can experiment and add different content to the columns, such as pictures
If you mess up and want to start over again:
To keep things (relatively) simple, we've had you saving your changes over the sample files. If you make a mistake and you want to start from scratch, click on the link above and download the sample files again.
Submitting your work
When you have edited and saved the three files, and you have added any images that you use to the images folder, compress the html practice folder into a compressed archive, and submit it to me by email.
To compress the folder using a Mac, in the Finder window select the folder and right click (or control-click) and choose 'Compress.' A new file will be created with the extension .zip - this is the file that you want to submit to me by clicking on the button below.