Building on what we did in class on Wednesday, September 16, add content to the Grizzly and Wolf Discovery Center website. Don’t forget to save your work early and often. Few things are more painful than losing a bevy of carefully crafted code because you forgot to Command-S or Control-S.
By the way, this is a rather long post, but I promise I’m not trying to make your scrolling finger fall off. I just want you to have all the information you need. If you prefer a printable version clicky click: CGA140_homework_due_09_21.
- Get the compressed file yourname_homework.zip from our class dropbox. It’s in the “Attendance” folder (even though it’s not attendance; my bad for overly specific folder naming 🙂 ). Click the file and select “Download” to transfer a copy to your computer.
- Unzip the file by double clicking it. Inside, you should see two familiar html files and four images. They’re baaaaack!
- Open a text editor. For Windows, it’s Notepad. For Mac it’s TextEdit. In TextEdit, be sure the preferences are set for plain text. Go to the TextEdit menu in the upper menu bar, and select “Preferences”. In the Preferences window under “New Document” select the toggle for “plain text” and uncheck the boxes next to “smart quotes” and “smart dashes”. We want our punctuation nice and dumb :D. Under “Open and Save”, select “Save HTML files as HTML code instead of formatted text” and uncheck the box that says “Add ‘.txt” extension to plain text files”.
- Open “index.html” and “meet_the_bears.html” in the text editor. Because these are .html files (essentially web pages) double clicking will open them by default in a browser. To bypass and open in a text editor instead, right click the files and “open with”.
Review the Code
Once the files are in your text editor, examine the code. This is what you were working on in class, and you’re probably a bit full of that deja-vu-all-over-again feeling. Hopefully, though, you’ve had enough time to digest that you are able to notice a few things.
- In my version, I added spaces between many of the lines by hitting return. This makes the code more readable for humans like you and me, and thus it has become rather common practice in hand coding. The browser treats returns in an html file like I treat my alarm clock on a weekend morning: it ignores them.
- Element names are lowercase.
- In choosing tags to markup the pages, I considered the content. If something is heading, I used <h1>. Subheadings are <h2> or <h3> (the larger the number, the more subordinate the heading). Paragraphs use <p>, unordered lists use <ul> and long quotations use <blockquote>.
- Sometimes, one element is nested inside another. You’ve seen this more than once now with lists. The list as a whole is bracketed by either ul or ol tags while each individual list item is surrounded by li tags.
There’s another example of nesting in this version of the index.html file. Some of the long quotations have multiple paragraphs inside the <blockquote> tags. As always with html, this is done to reflect the structure of the original content. And, as always, it should be done sandwich style. Two pieces of bread on the outside (blockquote tags in this case), two pieces of cheese just inside (p tags here) and some tasty meat in the center (the content). Don’t put your cheese or meat on the outside of the bread! That’s just messy lunchtime etiquette!
- This is not to say everything needs to be nested. All but one of the html elements we’ve seen so far can stand just dandy on its own when need be. The exception is <li> which must appear nested in either ol or ul tags. I bring this up because I don’t want you to go Cuckoo for Cocoa Puffs over nesting. Simple is always better so long as it accurately reflects the structure you’re trying to describe.
Check Out the <img> Tags
In meet_the_bears (which I now realize sounds like a campy 60’s sitcom), check out the img tags. You may remember that the img element doesn’t bookend content in the same way as, say, a p tag. It’s what we call an empty element… its job is to be a placeholder for something else we want to the browser to retrieve. Because of this, we only need one tag (just opening, not opening + closing).
So how do we tell the browser where else to look for content if we’re not sandwiching it between matching tags? We use what’s called an attribute. An attribute is a line of code that comes just after the element name in an opening tag and which gives directions about how to handle that tag. For img, the attribute most commonly used is src, which stands for source. That makes sense, because we’re telling the browser where to find the source of the image.
The code for adding an image looks like this:
That’s it… that’s all you need to insert an image to a web page. Well, that and imagename.jpg stored in the same folder as the html document, but we’ll talk more about that later.
Get Your Code On
Now it’s your turn to do some coding. You have two tasks.
Add a header image to the index.html file using the img element. The image is already in the yourname_homework folder and is titled header.jpg. Place it at the top of the page. Hint: wherever you write in your img tag in relation to the other structural tags is where it will appear when you load the website. Although img can be nested in other elements, for this exercise, let’s keep it standalone (ie no sandwich time)
Create a new page for the wolves of the Grizzly and Wolf Discovery Center. For the purposes of this educational exercise, we will borrow text and images from the actual GWDC website: http://www.grizzlydiscoveryctr.org/animals/wolves/.
- Copy the heading and introductory text as well as the text describing the wolf packs. Paste the copied content into a plain text editor and save the copied content as meet_the_wolves.html. Remember there cannot be spaces in an html filename, so we uses dashes or underscores instead.
- Markup the text with appropriate html tags. Your tags should describe the structure of the content as closely as possible. Don’t worry about style yet. HTML is not about style; it’s about as accurately as possible telling the browser what kind of content it’s dealing with.
- Also from GWDC’s website, choose a representative image for each wolf pack. Left click on the image to get an enlarged view, and then right click for “Save Image As” (Mac) or “Save Picture As” (Windows). For Macs without a two button mouse, right click by holding “Control” and clicking. Save images to the yourname_homework folder.
- Place images in the website by adding img tags to the meet_the_wolves document. This must be done in your text editor. You cannot edit in a browser. Make sure you’re clicked on TextEdit or Notepad to make changes or add code.
- Don’t forget, images will appear in whatever order you place img tags in relation to the other content, so code wisely.
When you are finished, you should have a page that looks similar to the meet_the_bears page, with organized text and several photos.
If you’re not quite there yet, don’t freak out. Any questions or issues should be put in a comment on this post. By putting questions in the comment thread, other people who may be having the same issue can see the solution. Navigate to the top of the post and read any existing comments to see if your problem has been addressed. If not, click “Leave a Comment”. Be as specific as possible in your query. I will get back to you as soon as possible.
For anyone who wants extra help, I will come in at 11:40am on Monday, September 21 to monitor the Mac Lab.
Have you successfully completed all the steps above? Hooray, way to go, you web designing machine, you! Pats on the back and sugary beverages all around! Now, just one more tiny hurdle…
Turn It In
- Make sure all files (3 .html files and seven .jpg files) are in the yourname_homework folder.
- Rename it with your last name (mine would be zartner_homework). To rename on Mac, select the file and hit return. It will change the name box at the bottom to an editable space, and you can type in the new information. To rename on Windows, right click the file and select “Rename”.
- Compress the file. On Mac, right click the folder icon and select “compress ‘foldername'”. On Windows. right click the folder icon, point to “Send to” and click Compressed (zipped) folder.
- Attach the .zip folder to an e-mail sent to me at email@example.com.