Homepage for Introduction to Web Application Design (DIFD 141)
Spring, 2012
[Announcements] [Assignments and labs] [Homework assignments] [Notes]
[Student Projects 08s] [Student Projects 09s] [Student Projects 10s]
For the week starting 2/9, spend some time working with the javascript Array and String objects. You can find them at http://www.w3schools.com/js.
For the week of 1/31, spend some time at http://www.w3schools.com/htmldom. There are a gazillion small tutorials here. Do a couple, three of the ones involving images as they'll help cement what we're doing in class. Also start doing the tutorials at http://www.w3schools.com/js. The first several, right through for loops, will be useful almost immediately.
New partners for 1/31: Dominique & Julie, Raven & VincentB, Elizabeth & Step, Donteka & VincentC, Keith & Tori, Kayla & Jayvon, Chav & Rose, Rory & Ladson, Elliott & James, Zac & Jace, Alex & Edward, Andrew & Wendrah, Marcus & PatrickM, Joe & Day, Reymond & PatrickR, Dianne & Jeff, Krissy & Spencer, Breana & Jonathan, ....Byron? Seth?
For the week of 1/24, continue through http://www.w3schools.com/css. Pay special attention to the sections on floating, positioning and aligning. Do some of the try it yourself examples.
Things to do outside of class for the week of 1/17:
Go to http://www.w3schools.com/css. Read the tutorial through the section on class selector and id selector style rules. Practice some.
Background Reading Assignment: For some dated but very well explained discussions go to the extropia tutorials page. On the left you'll see a bunch of tutorials and on the right you'll see the table of contents for one of those tutorials. Read the first four documents on the right: The History of the Web; The Nuts and Bolts of the Web; The Basics of HTTP; and HTML The Language of the Web. These are all short and should be easy to read for most of you. Back at the extropia page look down the tutorials on the left and find Web Programming 101. This is a somewhat more challenging article, but with a couple of readings you should have a good handle on the early part and understand the gist of the latter part. Unfortunately many of the links in this tutorial are broken (more likely they're only available to people who pay for the courses), but the explanations that are here are very good. Also, be aware that the author lets his opinions show. Don't take those too seriously. You'll get to try out some of these technologies and can form your own biases later.
Reminder: Monday the 16th is Martin Luther King Day and no classes will meet.
Partners for lab on 1/10: Jonathan & VincentB, Elizabeth & Seth, Julie & Raven, Step & Keith, Donteka & VincentC, Tori & Kayla, Rose & Rory, Ladson & Zac, Jayvon & Edward, Chav & James, Elliott & Jace, Alex & Byron, Wendrah & PatrickM, Day & Andrew, Joe & Dianne, Spencer & Reymond, PatrickR & Jeff, Krissy & Breana.
Things to do outside of class for the week of 1/10:
Go to http://www.w3schools.com/html/ and begin working your way through the basic tutorials on the left hand side. Try to get through Images this week, the rest next week. Most of this will be review for most of you. Move quickly through the parts you know, spend more time on the parts you're less sure about. Note that some parts of sections or even whole sections are expected to go obsolete in the near future. You should be aware of these, but in this course we'll work entirely with code that we expect to meet standards for the foreseeable future.
If you do not already have a birdnest account, apply for one at http://www.birdnest.org. If you do this on Tuesday (1/10), your account should be ready before class on Thursday (1/12). This service allows you to serve up web pages to the world. By Thursday I'll expect all lab assignments to be submitted via your birdnest account.
Welcome!! I'll post late breaking news in this section, such as new partner and reading assignments.
The goal for the lab on 2/9 and 2/14 is to add documentation to the code and then play a complete game of hangman on a single word puzzle, including changing the image on each bad guess. Make sure both partners have access to all new code and images at the end of the first day.
New partners see above. Check out your javascript code and if one looks better than the other work with that one.
Outside of class please update and send in your partner evaluation forms.
Make sure both members of the team have working copies on your separate Birdnest accounts. As you work today, make changes to one account, but once the changes work, add them in to the other account as well. The idea is that you both have the same version at the end of the day.
Add the boiler plate from the handout. You should be able to copy it right from here.
First line of script: //<![CDATA[
Last line of script: // ]]>
Add documentation. This can largely just mirror the comments from the handout, but get them into your code. Good documentation practice is to have a comment on each routine (or other logically related lines of code) to say what that routine is about, one on each branch of each if..else statement, and one on each for loop. At this point we only have one loop and it's currently the whole routine that it's in. So the routine comment covers it, but the if..else branches in checkLetter() all need comments.
As we add to the code both today and in the future, I'll expect you to keep it properly documented.
Make sure all code is properly indented. And keep it that way going forward.
Preload the winning and progressively dire images into the page as shown in class and below. You can find the first of James's and Elliott's pictures here. Just change the name to get the rest.
// The next couple of lines preload the winning image. var winPic = new Image(); winPic.src = "images/win.jpg"; // The next few lines preload the sequence of images. These are needed // because each bad guess should result in a direr image being displayed. var picArray = new Array(); picArray[0] = new Image(); picArray[0].src = "images/gallows.jpg"; picArray[1] = new Image(); picArray[1].src = "images/head.jpg"; picArray[2] = new Image(); picArray[2].src = "images/body.jpg"; picArray[3] = new Image(); picArray[3].src = "images/onearm.jpg"; picArray[4] = new Image(); picArray[4].src = "images/twoarms.jpg"; picArray[5] = new Image(); picArray[5].src = "images/oneleg.jpg"; picArray[6] = new Image(); picArray[6].src = "images/dead.jpg";
Change the code to use these images. The tricky part will be changing the bad guess code to show the next image. Notice that you already have a variable that's counting from 0 to 6 so use it.
Change the solution to be the word "CIVILIZATION". Actually any long word that starts with C will work.
Write a writeBlanks() routine that will write the same number of underscores to the puzzle area of your page as there are letters in your solution. Call it from initialize(). If you're using "CIVILIZATION", we should see 12 underscores. You'll need the length property of String to do this. Note that in the future we'll need to get rid of any previous puzzle before writing the new set of underscores so be sure to take that into account.
Change the checkLetter() code so that it checks to see if the letter the user selected is the first letter in your solution. We now have a game where the user just has to guess the first letter to win.
Add a checkSolution() routine and inSolution variable to the code as we did in class. At this point the user still wins if they guess the first letter in the puzzle.
Add a loop to checkSolution() so that inSolution is set to true if the letter is anywhere in the puzzle.
You should be about here by the end of the first day. Maybe not quite this far, maybe a little farther.
Revise the checkLetter() code so that the game doesn't end on the first good guess. Have it print something like Good guess, the letter C is in the solution. 'Course it won't necessarily be C; it'll be whatever the guess was. Note: Don't delete the code that effected the win, just comment it out.
Back inside the if statement in checkSolution(), use the trick involving substrings discussed in class to replace the appropriate underscore(s) with the guessed letter.
At this point the user should be able to guess all the letters and have them all show up, but it's impossible to win.
We need an if statement back in checkLetter() that will check for winning. What should it check? How do we know when we've won? Hint: If answerElement.innerHTML is completely filled in then it'll equal our solution.
Change the solution to MISSISSIPPI. All of your code should still work. Check both winning and losing. If it doesn't work go back and fix it. If it does, you're done!
Check documentation, standards and indenting.
E-mail me both links.
The goal for the lab on 2/7 is to learn about if..else statements along with more javascript and use that knowledge to play hangman. Well, as long as the puzzle is just one letter.
Same partners.
Obtain an image to use as a starter and call it gallows.png. It's important we all use the same file names so that partners are using the same code. The actual image in the file can be anything you want. The file should go in your images folder. For today, we'll need two other images as well. Call one win.png and the other dead.png. Note that I don't really care about the extensions as differences there never seem to cause problems, but please use gallows, win and dead as the actual names.
Change the puzzleID element so that it just shows one character.
Declare a solution variable and set it equal to 'Q'. (Really make it Q so it's easy for me to check).
Check for a win. Change the image and the message appropriately depending on whether you won or lost.
At this point we have a very rudimentary game working. We only allow one guess and we only have a one-letter puzzle, but it's something.
The next step is to allow 6 wrong guesses before a loss occurs. And to stop the game (allow no more clicking) if either
The player guesses right on or before that 6th guess OR
The player makes 6 wrong guesses.
To accomplish the above, start by declaring a badGuesses variable. Set it to 0 in initialize() and increment it each time the player guesses wrong.
Change the message on each wrong guess to reflect how many guesses remain. The player should not lose the game until all the guesses have been used up. Obviously if the player wins a message to that effect should pop up.
Use a gameOver boolean to stop the play on either a win or loss. This is a little tricky. You'll need to set gameOver to false in initialize(), check it each time checkLetter() is called and set it to true when the game is either won or lost.
If the player keeps clicking after the game is over set the message to something like: "It's over, dude, give it up!"
Change the puzzleID element when the game is over. Have it display the solution.
Load the final results onto both your birdnest accounts, including all images, and e-mail me the links.
The goal for the lab on 2/2 is twofold. First we want to move to the "standard" version, put together by Krissy and PatrickR. Then we want to get the selection of letters into our hangman project. Rather than type 26 slightly different html elements, we'll use Javascript.
Same partners, switch roles.
Download hangman.html, hangman.css. You'll also need the images jelly.jpg, sb.jpg, clam.png, sign.png, and creepy.jpg.
Keep in mind that part of the goal is to make it easy to switch partners without having to change a whole lot of code. If we all at least start with the same html, the same css and the same names for our images, we've got a chance.
In the body tag add onload = "initialize()" as in class. Then write the initialize function. Put code in here that only needs to run once at the very beginning. Note: You'll actually be moving code from checkLetter() rather than writing new code.
Once you've got that working, put in the writeAlphabet code as we did in class. If you took really good notes this will be just copying them into the system, but this code involves the single most complicated line we'll probably have in our project, so I want to be sure you think about it carefully.
Send me both links.
The goal for the lab on 1/31 is to understand how javascript may be used to dynamically change elements on the page.
New partners, see above. Please update your partner evaluations and send 'em in.
By Tuesday I should have a standard version for you to work from. For today the simplest thing to do is pick one partners' version and work on that. If you wish to save your old version for later reference make a copy.
Be sure your directory structure is correct. Recall you need a hangman directory. Inside it you should have hangman.html, hangman.css and an images subdirectory. All images should be in this subdirectory. I will grade you on your directory structure and file names this time.
Add a script element in the <head> section of your code.
It's safer to pretty much follow the class work, so first just get the onclick behavior into one of the letter elements. Just have it pop up an alert at first.
Declare a variable named messageElement and a function named checkLetter(). Recall you'll need an id on the actual html element where the message is on the page.
Make it so the message changes when you click a letter.
Then get the id parameter into play as we did in class so that the changed message includes the letter you clicked. Repeat for all four HTML letter elements.
Make the letters vanish when you click on them. This will take a little more thought. You have the id of the element you want to change so you'll need to use getElementById and store the result in a new variable called letterElement. Then you can change the style of that element by starting with letterElement.style and seeing what Expression Web pops up for you. If Expression Web's not cooperating do a search for HTML DOM visibility and see what pops up.
Add some code in checkLetter() so that the image changes when you click a letter. You'll need a variable, maybe hangmanPictureElement, to represent the image element. You'll need to use getElementById to connect that variable to the img element. Then change the source by setting hangmanPictureElement.src to whatever image you choose. Any image will do for today.
In the body tag add onload = "initialize()". Then write the initialize function. Put code in here that only needs to run once at the very beginning. Note: You'll actually be moving code from checkLetter() rather than writing new code.
Send me links to the hangman.html files in both your birdnest accounts.
The goal for the lab on 1/26 is to design and implement your style sheet for the hangman game. I have a copy of the mockup you gave me last time and I'll compare that against what you accomplish today. Some of you may want to negotiate to do something a little different for various reasons. We'll handle those on a case by case basis. For comparison purposes you can find a version similar to what we did in class today (Thursday) here (html) and here (css).
In addition work on your directory structure and file names. This will facilitate partnerships in the future. Somewhere under your birdnest account, have a hangman directory. Inside that directory have hangman.html, hangman.css, and an images subdirectory. All images should be in the images subdirectory. Make any necessary changes in code to reflect the new structure.
Same partners.
You have considerable leeway in the design you select but pay attention to the following.
You need to maintain at least the five different divs shown in class: title, gaming, links, categories, and validator. You can have more if you wish. We also need a place for the main hangman picture, the puzzle, the alphabet, and a message. Most of you have these inside the gaming area, but don't feel bound by that.
The gaming area should be big compared to the others. We need plenty of room to play the game.
The layout should not look strictly gridlike. That is, it shouldn't look like a table.
Use the :hover pseudoclass on the categories and for the individual letters. Most of you have this already for the categories, think about what the letters should do when we hover over them.
Spend some time working on the styles and spacing for the letters and the dashes (which will gradually be replaced by letters as the game goes on). Come up with a detailed font (family, color, etc) for these.
Ideally by the end of the day you'll have all the above implemented on both your birdnest accounts. You'll send me both html links. I'll check them in both IE and FF and I'll check both html and css standards.
I'll then go on to consolidate the best ideas from all of you into a single style that we'll use as a basis through most of the remainder of the course.
The goal for the lab on 1/24 is to move away from the table layout so that in the future we can rearrange the elements on the page by changing only the style sheet. Note: Straight lecture will be short today, then work with your partner to design a layout, just on paper for now, for the future Hangman game. Come up with a theme that will drive the styling (and perhaps the content) down the road. Beyond that the main criteria are: 1) The result should not look like a table , 2) It should include at least all the major sections we have now, namely Title, Categories, Links, Game, and Certificate areas, 3) The gaming area should be large compared to the others. Show where the letters, blank puzzle, and messages will go and think about their styles. Hand in your paper designs before you disappear today. Make sure both names are on it.
For lab today, same partners. Two ways to work:
Work on one person's version at a time. Get it working. Then get it up on both your birdnest accounts. This probably means the second person will have to bring up both the html and css code, save it to their Z drive and then upload to birdnest.
Work on one person's account, but once you have a bit working, have the other person type in the same stuff in their account. Repeat until finished.
In either case you should not leave the lab until both versions are up and running. Anything else is unfair to your partner.
And once again, no phones while class or lab is in session.
Start with the version you had last time that had the external style sheet. We'll always work with external style sheets from here on.
Remove the <table> and <tr> tags from your Hangman game and replace the <td> tags with a series of <div> tags.
Revisit your old styles during this assignment to make sure they don't conflict with the new and to get rid of anything you no longer need.
For today, go for a "striped" look by using the display:inline style along with some padding so that lists and links appear horizontally. Note: You'll lose the numbers in the list. Don't worry about that for today.
Use the pseudoclass hover to change the appearance of the links and categories when the cursor hovers over them. This will be useful for the categories because we'll eventually want them to be clickable and this will provide a visual cue to that effect.
Include at least four letters (for later guessing) and at least four dashes (representing the puzzle) in the gamearea of the page. Also include some message here about the game. E.g. Pick a letter and we'll do the rest. Most of you already have this, so you're fine.
Add a background image. Check w3schools to see how to do this. Note that background images should generally be relaxing and subtle as they should not distract from the informational part of the page.
Double check that the result is substantially the same in both IE and FF.
Get everything working on both partners' birdnest accounts and send one message with the links to both partners' html pages. I'll pick one at random to grade.
If you wish, make a copy and begin experimenting with floats and widths to rearrange the divs.
The goal for the lab on 1/19 is to introduce styles and style sheets to our Hangman project.
Please download (save first, then open) and fill out the first few lines of the partner form and then e-mail it to me. We'll do this every time we change partners. Don't delete the old form, we'll update it each time. Note that the only requirement is that you fill out the form. You get a point each time you submit the form when asked, but the information you provide will not affect either your or your partner's grade. If a person receives low ratings from more than one partner, I will likely have a chat with that person to see if there's something I can do to improve the situation, but that's the extent to which they'll be used. Finally, you don't have to do this during class time. Better to get the lab work done during class and do this later on your own time.
New partners, see above. Decide whose version to work on, or whether you want to keep two slightly different versions extant. Remember I'll only grade one, so it's safer to work on the same version.
If class ends early, please meet with your partner before leaving the classroom. Use that time to decide whether you want to get started on the lab early. Today, we'll be out early so you can meet with your partner and plan out some styles to use on your page. Don't get carried away today (save that for next week), but figure out some stylish ways your version will be different from everyone else's today.
Fix any problems from last time. There weren't many.
In the game area add in three new paragraphs with ids.
One of these is for the puzzle, so use puzzleID. This one will consist of four or five underscores (preferably) or dashes. If underscores you'll need to separate them.
We also need one for the alphabet (use alphabetID). Just the first few letters of the alphabet is enough for now.
And we need a message area (messageID) to tell the user how they're doing and what to do next.
Include a span element with a style attribute somewhere on the page. You decide just what this will be. We did this once before, just reinforcement. This is an example of an inline style, 'cause the style is given right inside an HTML tag.
Construct an internal style sheet as shown in the class meeting. Use it to accomplish all of the following. Don't just copy what I did in class. I'll be looking for some distance between what I show you and what you submit.
Show that you understand tag selectors by using one in an appropriate way.
Show that you understand class selectors by using one in an appropriate way. Make sure that at least two elements share the same class.
Show that you understand id selectors by using one in an appropriate way.
Develop a color scheme for the page and use the style sheet to enforce it. Use at least one predefined color and one that's not predefined.
Develop a style for the text in the game section. Include information about the text that will appear here: font family, font size, color, style (as in bold, italics, etc). Show enough text so I can get an idea what you have in mind.
Finally, make a copy of your html file. Modify the new one so that the style sheet is in an external file. Make sure the names of these files make sense. For example mine will be hangman.html and hangman.css. These two files should be in the same directory.
To do this, remove the style sheet from the html file and replace it with something like <link rel="stylesheet" type="text/css" href="hangman.css" />
Reminder: Only css code need go in the css file. No html at all.
Move the html and css files to both of your birdnest accounts and send me links to the two html files.
The goal for the lab on 1/17 is to continue reviewing HTML skills with a particular emphasis on lists and tables. We'll also set the stage for an early version of Hangman.
Same partners, switch roles.
Start a web page that will contain our Hangman game. Begin by downloading hangman.html.
Note the strict DTD notation at the top and the boiler plate at the bottom. This is the same strict standard we used for the Master assignments. Our goal will be to maintain strict standards throughout the project unless there is a very good reason to deviate from them. Until further notice keep those validation icons at the bottom of the page. Their presence should be relatively subtle and not intrude on the content of the page.
Use a table to divide the web page into the four sections described below. You'll need to include a border, at least for now.
The table should span the width of the whole page.
There should be a section at the top that gives the title of the site, welcomes people, and tells people about the site. For now this can just be a nice big title (use a Header 1 tag, <h1>) with a sentence or two of explanation/welcome in a paragraph tag, <p>. This section should span the whole table as shown in class.
Some of you will be tempted to add some style elements (alignment, centering, fonts, color, etc.) Resist this for now (except for the limited requirement at the bottom) as we'll discuss styles next time and you might end up just having to undo anything you do today. Alternatively make an unofficial copy and use it to experiment with styles.
Below the title section, we'll have three parts. Use Header 2 tags, <h2> for the heading of each section.
On the left put an ordered list of categories. The idea is that the Hangman puzzles may be categorized. Typical categories might be Movie Titles, Book Titles, Famous Quotations, and so on. Pick at least three of these. Don't obsess over just exactly what they are, you'll probably change that later anyway.
The middle section under the title should be the Gaming area. Eventually, we'll put the code for actually playing Hangman in here. For today, just hold the place with a Hangman related picture.
On the right side, we'll maintain a collection of links to other Hangman sites. Two links is enough for today. Put these in separate paragraphs (<p> tags).
Add an id attribute to each of the four major sections of the page. These id's allow us to refer to particular html elements both in style sheets and in javascript. You get to pick the values of the id attributes. E.g. for the section that contains the categories it would be natural to include id = "categoryID".
Use an internal style sheet to add a color to at least one of the HTML elements on your page.
Move the code to both of your birdnest sites. Send me one e-mail with both links. CC your partner on the e-mail so I can respond to you both at the same time. I'll pick one of them to grade including checking the standards. For the other, I'll just check that the birdnest account is active.
The goal of the lab on 1/12 is to make sure your master.html code meets the strictest standards, fix any problems, and add a bit more HTML to the page. Finally we'll want to move your code to your birdnest accounts.
Same partners, change roles.
I was perhaps a little too kind to you on the first lab, so if you need to:
Fix your code so that it's easy to see that the internal link actually works. The simplest way to do that is via a bunch of line breaks between the link and the target.
Make sure your image is in a folder called 'images' and that you're referencing it appropriately.
Fix any other known problems. E.g. In a couple of cases the external link didn't work correctly.
To continue exercising some of your HTML muscles:
Include a header element somewhere on your page. Recall the possible header tags run from h1 through h6. Use one of the larger ones.
Put something into italics, bold face or color, your choice. While this could be done using, for example, an <i> tag, do it using a <span> tag and a 'style' attribute to get practice with them.
Change the hr element so that it displays across half the page, has a color, and is left-justified. For the color use the border-color attribute for best results across browsers. For the justification, use the ideas from class.
Now we want to make sure that all the elements of master.html meet the standards. To start with, pay attention to the tooltips that Expression Web provides for you. For example, line breaks are expected to be inside paragraphs or some other form of block element. Expression Web won't find all the standards problems sooo....
Check that all standards have been met by uploading the file to the w3 consortium's checker. As shown in class, click on the appropriate icon. When the validator complains (because the page is coming from your z drive not an actual server), go to the validator home page. Click on 'validate by file upload' then browse for your file.
Make any necessary revisions to standardize your file. The most likely problem is with your hr tag. You'll need to handle the width and alignment settings via a style attribute, if you're not already.
Upload your file to both of your birdnest accounts. (If only one of you has an account just work with that one for today, but be sure to get your account activated before next Wednesday). I am not an expert on birdnest and so may ask those of you who have already done this kind of thing to help the others. Following is what I would do to move a file to the faculty server. I expect that the same technique will work for you folks.
Within Expression Web go to file -> open site
When prompted type in http://birdnest.org/yourusername
You'll be prompted to log in. In this case you need to precede your user name with acc\. For me that would be acc\mckimj.
Off to the left you should see your current birdnest site. If you're new to birdnest it'll be empty.
Resize your windows so that you can see both your z drive and your Expression Web window.
Drag and drop your difd141 directory into your birdnest site.
In a browser, bring up http://birdnest.org/yourusername/difd141/master.html.
Note that if you click on the standards checker from here (and you should), you don't have to mess with file uploads.
E-mail your partner and me the link to the file on your birdnest account.
The goal of the first lab (1/10) is to review HTML skills from earlier courses. A secondary goal is for me to collect some info about you. So....
Please send me e-mail (mckimj@winthrop.edu) that includes your
Name as you'd like me to address you.
Major/Specialty
Computer Science experience. Should be at least the equivalent of CSCI 101 with some programming experience. (CSCI 151 or CSCI 101P work just fine).
Reason for taking the course
Interests. Tell me something that will help me get to know you better. I'm especially interested in any extra curricular activities at Winthrop.
See above for teammates. One person should be the driver and do all the typing on the official version, the other should kibitz. This is pair programming and while it can occasionally be frustrating for the kibitzer, studies show that it is a very productive way to both learn and produce software.
Make a directory on your Z drive for all the work you do for this class. You can call it anything you want, but I recommend difd141. You may wish to make a subdirectory for each day's work, but I'll leave that to you.
Download master.html into your difd141 directory (or subdirectory) on your z drive. Note: Just save it at this point. If you open it first the system assigns a different name to it and you may get confused later.
If you double click on the file, it should pop up in Internet Explorer. Later we'll work on your Birdnest account, but for today we can just stay on your z drive.
To edit the code, right click on the icon and select "open with" Expression Web. You may have to browse a bit to find Expression Web. If you worked with Frontpage in an earlier life, Expression Web is an updated version.
Note that you can use Expression Web in such a way (Design Mode) that you just type and it fills in the html code it thinks you want. In this course we need to take control of the html code so we will work in Code mode.
Click the Code button at the bottom left of the screen to be sure you're in Code mode. Once again, we'll always work in code mode in this class.
You should now have Expression Web up showing the code for master.html and Internet Explorer up showing the presentation of that code that could potentially be served up to any client in the world.
Make a change in either the title or the body of the code. Then refresh the page in the browser to see the result. Unlike in Java or C++ there is no compiling to do.
Add the following elements to the page along with some content to put the elements in context:
An external link to a web page of your choosing. Use the <a> tag for this.
An image. If you don't have one on your z drive, just download one. Put the image in a subdirectory named "images". Use the <img> tag. Include an "alt" property.
A horizontal rule.
Line breaks. <br /> tags
An internal link. Use <a name = whatever> to set the target and then <a href = #whatever> to create the link.
Be sure the code is all well formed. Every element that needs to has both a beginning and ending tag (e.g. <a> content </a>) and each stand alone tag ends in /> (e.g. <br />. Also be sure tags are properly nested.
Check your code in both IE and Firefox.
E-mail the html file as an attachment to me and to your partner. Please send one message to both of us so that when I respond the message goes to both of you. Note that if either or both of you have birdnest accounts you can put the page up there and just send me the link. This approach will be SOP for submitting lab assignments starting Thursday.
Most out of class assignments will be reading or tutorial assignments from the web and covered in the announcements section. However, if you fail to finish a lab during the allotted class time then your homework is to complete that lab before the next class. This may entail meeting with your partner outside of class. Note that such "meetings" could take place via electronic means.
Notes: Following are notes from the first class meeting.
1/10: On working with a partner
In lab use strict paired programming. One person drives (does all the typing), the other kibitzes (makes suggestions on what to type, catches errors, etc.)
Outside of lab, the ideal would be that you physically meet, use the same paired programming technique. But the ideal might not always be possible. Use your best judgment.
No sharing of code with anyone except your current partner. Get help from your partner, from me, from passive sources such as your text, tutorials on the internet, etc.
Implicit in every assignment is that you work hard with your partner. If you're the stronger person on a team I expect that you explain as you go, solicit suggestions from your partner, and so on. If you're the weaker person on the team I expect you to demand such explanations and work hard to contribute. Every time we switch partners I will ask you to evaluate your previous partner, so I will get a pretty good idea of who's behaving appropriately and who's not.
1/10: XML vs XHTML vs HTML
Everybody knows what HTML is: Hypertext Markup Language. The actual markup is specified by tags and tells us how information is formatted on the page. Original HTML was developed with some guidelines but with no real standards attached. Typical guidelines include paired tags always having a beginning and an end, proper nesting, etc. Also, HTML is limited in the number and kinds of tags that can be used.
XML was developed to provide standards to existing HTML users but also to provide a standard for writing new tags. By adhering to the standards, we can (theoretically) be assured that the code we write will be displayed by all existing and future browsers in the same way. And we can be assured that new tags developed for specialized applications will all be interpreted in the same way. Another name for XML is eXtensible Markup Language, but this is a misnomer. XML isn't a markup language; it's a set of standards to which we expect markup languages to adhere.
XHTML is HTML that conforms to the XML standard. For right now, for us, that means being careful that paired tags have beginnings and ends, that code is properly nested. Right now browsers are forgiving, but it's not clear they should be (eventually that sloppy code will bite you) or that they will remain so in the future.
We will probably not use XML to invent new tags in this course, but we may use XML tags that others have invented. Some of these are used in news feeds, for example.
1/10: Block elements vs Inline elements
Block elements always start on a new line and usually have content. Examples include paragraphs, headings, and tables.
Inline elements, sometimes called text elements, are usually expected to be inside block elements. Examples include anchors, line breaks, and spans. A span element does nothing by itself; it just spans some content. By applying attributes to the <span> tag you can affect that content.
1/20. We talked about id attributes. Then spent some time at http://www.w3schools.com/html looking at lists and tables. We then went on to a short example of an internal style sheet. See http://www.w3schools.com/css for examples.
