text:
Web Design/Responding to HTML forms with PHP

One of the simplest and yet most useful things we can do on a Dynamic site is interact with the information provided through our HTML forms!

A simple response
If you haven't already created a form for selling a product or service as part of the Intro to programming with JavaScript, create a form now... be creative! You may want to use HTMLDog or W3Schools as references as you go.

Make sure that your form:
 * includes at lease two normal input fields where your users can enter their first and last names (they should have name="firstname" and name="lastname" respectively).
 * allows a visitor to select a product to purchase,
 * allows a visitor to indicate the quantity of the product ("I'd like to buy 4 T-shirts").
 * allows visitors to include their billing information.
 * you've uploaded your form onto your website (or if you are using your own computer as a web-server, that you've put it in the right place) and test it out.

Responding to your form
When your form is submitted, we want to let our user know that we've received their submission. Create a new file with the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  My web site: Thanks for that! Processing your request

You might want to read through the code to see if it gives you any hints as to what it will do, but don't worry too much about the details just yet.

Save this file as response.php and upload it to the same folder as your form. Test it out by submitting your form again (but don't be disappointed if nothing happens!)

Connecting your form to your php file
Nothing happened? That's right! We haven't yet connected our form to our php file! All that's left to do is modify our html form tag so that it includes the following two attributes:  Note: you might have other attributes such as onsubmit="checkForm" inside your form tag—make sure you leave them there!

This now tells our form that the action it should take when the form is submitted is to send all the info to a file called response.php. There are two ways that this can be done with a web form, one is called "post" the other is called "get". We'll learn more about these later, but for the moment it's enough to know that we're "posting" our form information.

Submit your form again and you should now see a result!

Which method is better to use for your form: Get or Post?
While using HTML forms you can set form methods: "GET" (default) or "POST". Which one to use?

When using the GET method you can access all form variables with the $_GET array in PHP and when using POST you can access all the variables with the help of $_POST. You can also access all variables with the help of the $_REQUEST array. When using the GET method all the submitted data is displayed in the address bar. You will notice that information which is displayed after “?”, will be something like this: http://domain.com/script.php?name1=value1&name2=value2 According to PHP Form Tutorials it can be useful, where you want to bookmark a page with some specific query string values. However, the GET method is limited by the URL length (2083 characters in Internet Explorer according to Microsoft) and each of the input values must not override 100 chars. Maybe you also don't want to use the GET method because when submitting important data like passwords, etc, it will be displayed in the address bar.

The POST method has the possibility of much more volume in data sending (usually only limited by the server settings) and it may be used unless it represents benefits in comparing GET method. Some browsers can not correctly bookmark pages which are displayed after HTTP POST method, because the submitted data is displayed in the address bar. When you need the query string, which is retrieved by using the GET method (ineffective by it’s limits), try to use POST method for your forms. You can use the POST method to submit the important information which shouldn’t be displayed in the address bar.

Sending an email with the form information
In the past, we have used the action attribute of our form to automatically email our forms, like follows:  but this way of collecting information is pretty limited. (TODO:Add limitations)

Now that we're handling our form from PHP, it's really easy to send an email automatically. Try adding the following bit of code to the PHP code in response.php: // First set the subject of the email: $subject = "A new order from website";

// Then set the message text of the email. The \n character is for a new line // so that our email doesn't appear as one big line. $message = "A new order has been submitted by $firstname $lastname.\n Please respond ASAP"; // Then send it off using the php mail function! Find out the scary details // at: http://www.php.net/manual/en/function.mail.php mail("me@myemail.com", $subject, $message);

Make sure you substitute your own email address instead of "me@myemail.com", and then test it out!

The following activities need to be filled out in more detail TODO: Activity 1: Include more of your form information in your email.

TODO: Activity 2: (advanced), try sending an HTML email.

TODO: Activity 3: Use the "Redirect after Post" protocol to avoid the "double submit" problem.


text:
Web Design/Dynamic websites

Dynamic websites are type of websites that use one or more computer programming languages that allow the content to be managed or somehow outputted using a server-side application. Dynamic websites are mostly rich of content and manageable. Most Open Source website applications are competitive in the part of managing the content with an ease. Dynamic websites are examples like Wikibooks, Wikipedia, or blog portals. They allow the usage of custom templates and actions in the server-site, such as logging and adding new data. Today, it's quite hard to find a website that wouldn't be dynamic-content based.

Most dymanic websites are built on top of programming languages that are fast and can be used straight out of the box. Most of them are compatible with CGI to be used with Apache, or other powerful web servers.

Most used programming languages on the web today:
 * PHP -- Dynamic websites with PHP
 * ASP Including the .NET Framework
 * Perl
 * Python
 * Ruby

Note that Perl was the whole start of the server-side scripting for people who couldn't afford to buy or to learn the alternatives. Perl is now most portable solution that is the most widely available in the world. (add more)

Powerful dynamic website applications can also be built using almost any bigger programming language (C, C++, Pascal for example) which speeds up overall execution time of the script. Using PHP or other applications is a bit of pain as the applications are quite slow because they need to interpretate the source code, compile and execute it. Whereas, compiled applications are only executed either using SAPI or CGI interface. An example of powerful applications would be eBay - though the author is not sure but there are .DLL files. Also, Borland embeds .exe applications inside their search engine.

Web Servers
Webservers compatible with CGI/FastCGI applications:
 * Apache HTTP Server
 * lighttpd
 * Sun Java System Web Server
 * Zeus Web Server
 * IIS (ISAPI Only?)

license: Creative Commons - Attribution Share-Alike - https://creativecommons.org/licenses/by-sa/4.0/

title: Web Design/Dynamic websites


text:
Web Design/Emerging Technologies

As a developing technology, there's always a bunch of tools and techniques that are emerging into the world of Web Standards. Here's your chance to find an emerging technology that interests you, and start playing with it!

eXtensible Markup Language
Currently this is a stub. Activities:
 * XML Challenges will get you started creating your own SVG, rolling your own RSS feed, displaying maths in your browser.

AJAX (a.k.a. XMLHTTPRequest)
Experiment with those fancy dynamic widgets in your site! Get started learning AJAX with the Javascript AJAX Challenges. For the true power of AJAX, familiarise yourself with dynamic server side scripting as well.

Activities

 * Web Design/Emerging Technologies Research Activities

title: Web Design/Emerging Technologies


text:
Web Design/Emerging Technologies Research Activities

You are a member of an IT services team within a medium sized Sydney office of a large international Human Resources company called KorTech. Kortech's flagship product is a Human Resource Information System, called Humanet. This system has a web-interface and was built using PHP together with a database back-end. Yet there are plans for a totally-revamped version of the product, Humanet 2.0. But you don't get to work on that project! You're just fixing peoples problems with their desktop PC's.

Being sick and tired of your day-to-day duties, you've been looking for a move within the company for a while now. You'd love to be able to work with the developers and designers on the Humanet 2.0 project.

Activity 1: Gary's email
And then one Monday morning, you discover the following in your inbox:

G'day Look, I know you people in the IT department don't like to be disturbed ;), but the MD seems to think that you're pretty well-informed. We're going to  need another web-developer in a months time for the Humanet 2.0 project, so  I thought I'd pop this question your direction. I'm quite familiar with HTML from my experience on the Humanet project, but one of our web developers keeps insisting on us using XHTML rather than HTML. He's new on the job and so I don't want to make a big decision based on a new recruit's insistence. Is XHTML a new language? How does it relate to HTML and why should we use it? And what is the Document Object Model (DOM) that the newby keeps referring to? And finally, how do you keep up with your tech-information? I don't have much time, but I want to be able to keep up with developments in the industry, especially new web-standards. As I said, I do want to look into these things myself, but am quite busy at the moment. It would be extremely helpful if you could answer my questions and provides links so I can find out more over the weekend. Thanks in advance, Gary Project Manager - Humanet KorTech Pty. Ltd.

Write a brief informal reply to Gary, making sure you include links and explain things in terms that Gary will understand.

Activity 2: Protocols and RFC's
Impressed with your previous effort, three weeks later you come in on a Monday morning to discover the following email: Hi again,

Look, the managers at our last meeting were pretty impressed with your last email (I hope you don't mind, but I printed off a few copies so that other managers could get up-to-speed as well).

The boss has decided that our monthly management meetings should include a short 10 minute tech-segment, as a way to help us managers keep our foot in the door with technologies and standards. Again, I hope you don't mind, but I volunteered you and your desk-buddy as the ideal people to give the first presentation next week.

The boss has requested that we all learn a bit about the HyperText Transfer Protocol (we know that it's the http that we always type in our web-browsers, but that's about it). I guess you'd want to include: * most importantly, a demo of some kind, showing HTTP in action, * a bit about the history of HTTP (including what these RFC things are), * the most common features/requests/responses of http that we'd be used to seeing, * some time for a few questions, * A few recommendations if people want to find out more.

Sorry to put you in the hotseat, but I thought it might be a great way for you to show the other managers that you really do know your stuff!

Gary

Prepare your presentation for the managers meeting next week! (OK, so you may not really have to give your presentation, but learn everything you'd need to learn to give the presentation and go over the outline of your presentation with your facilitator).


text:
Web Design/Web design group learning activities

If you are lucky enough to be learning together with a group of people, you might want to break up your class or project work with some fun group activities related to your Web Design course that challenge the way the web is used for learning!

 * Web Design/Group Activities/Paired Bio Pages - Find your first client from within the group (preferably someone you don't know well), prepare for your interview, conduct the interview (and take photo?), before creating your Bio page (HTML or Word). Good way to get to know each other and find out different levels of skill in both design and technical areas.

 * Web Design/Group Activities/Scoping a Small Project - In small groups (3 or 4) plan a small project (quote, tasks, timeline).

 * Web Design/Group Activities/Discovering the Skills that are 'Web Design' - Working in groups (or a group) to put together a prioritised list of skills and technologies a web designer needs to learn. Quick activity for learning more about each others different background knowledge.

 * Wikipedia Worktank - Getting into groups, choosing an article and verifying/correcting it's validity. See how collaboration works on a global scale! Check one week later to see how any edits have been received by others and reflect on the experience.

 * Web Design/Group Activities/Weekly Team Meetings

 * Web Design/Group Activities/Ordering Tasks for a Web Project - Work in pairs to order and set the precedence for all the tasks required to build a website!

 * Web Design/Group Activities/A WebDesign Quiz show - Here's a chance to go over lots of things that you've learned in a fun way with your class!

 * Web design challenges - Small design/coding challenged based on a 3hr turn-around.


text:
Web Design/Group Activities/A WebDesign Quiz show

Generating the questions for your Quiz Show
Creating questions on your own is hard, so it might be best to decide on small teams of two or three people for the quiz show, and then create your questions in your teams.

Each individual is to come up with 3 questions each using the resources below and the help of their team. After reviewing each question with your team, write it up on an individual piece of card (or paper) with your name at the bottom (so you won't be asked your own question!).

Topics
The topics you choose from will depend on what you've been learning to-date. Below is an outline that you might want to choose from, but feel free to choose questions that are related to other experiences in your class that may not be related to web design (they might add some fun!)
 * html -
 * tags (e.g. which of the following is not a valid tag)
 * attributes
 * using tags meaningfully
 * validating
 * Clients
 * css
 * font choices
 * selectors
 * debugging
 * Documentation
 * Photoshop
 * javascript
 * events
 * functions
 * if-statements
 * debugging
 * Flash
 * php
 * Information Architecture
 * stake-holders in a project
 * how you can
 * Accessability and Usability
 * Search Engine Optimisation
 * managing your time effectively

Types of questions

 * multiple-choice
 * Which of the following HTML is incorrect: a) blah... b) ...
 * short-answer
 * List 3 rules of XHTML, (for example, Every opening tag must have a corresponding closing tag).
 * After coding your CSS, you test it in the browser and find that it looks wrong in IE. Describe a strategy for fixing your CSS (in outline, what are the first steps you would take?)
 * Problem solving
 * How many errors can you find in the following piece of HTML?
 * True or False
 * Jeopardy (Give the answer, find the question)
 * Jeopardy (Give the answer, find the question)

Different types of rounds
Ideas?
 * 1) quick answer (as many questions in a minute)
 * 2) topic-based (ie. HTML round, CSS round)
 * 3) Charades
 * 4) Pictionery-type
 * 5) Listing
 * 6) Benefits and Disadvantages
 * 7) Other team picks the topic
 * 8) New Price is Right - style where the winner has to order a list of statements

Running your Quiz Show

 * Team competitions- like trivia nights
 * All compete against each other
 * Teams, with reps from each team answering for the team
 * Working as a whole group to achieve a goal or prize


text:
Web Design/Group Activities/Ordering Tasks for a Web Project

Even though BaseCamp comes highly recommended from current web professionals, it's also useful (and sometimes necessary) for us to use other Project management software... and as per usual, the most used application is the Microsoft product: Microsoft Project.

Here's a task for a bit of fun that will introduce some of the fundamental skills required to use MS Project. Your task is to produce a gantt chart using the tasks listed below. To do so, we'll need to
 * 1) Order the tasks below into something sensible (you might find it easiest to copy the list into a word-processor to do this).
 * 2) Group the tasks smaller lists (such as 1. Requirements gathering, 2. Design phase, 3. Implementation/Testing phase, 4. Evaluation phase). Again, probably easiest to do this in a word-processor.
 * 3) Add the tasks to the project
 * 4) Estimate the time required for each task (don't worry too much about accuracy at this stage!), and finally
 * 5) Set the precedence for each task (that is, identifying any previous tasks that need to be completed before this task can start).

Example (unordered) list of tasks
(if you can add a task that hasn't been thought of here, please do!):
 * Code HTML/CSS
 * Final product sign-off
 * Develop content listing and labels
 * Website performance testing
 * Develop Page Mockups in Photoshop
 * Test links for website
 * Monitor website traffic patterns
 * Initial client interview
 * Develop web-based prototype
 * Organize hosting for website
 * Usability testing with subset of target users
 * Develop content (with searching in mind)
 * Define user audience
 * Determine site structure
 * Evaluate site's performance against set goals
 * Develop Competitive Analysis
 * Describe example scenarios
 * Obtain sign off for design and scope
 * Monitor ranking in major search engines
 * Specify goals for website
 * Document design sketches
 * Validate HTML/CSS
 * Register site's domain name
 * Upload files to registered domain


text:
Web Design/Group Activities/Paired Bio Pages

The whole web design class has been approached by a local newspaper and asked if we could put together a bunch of (brief) biographical pages about us - the local web design students at the local college.

The purpose of each biographical page is to enable readers to see a little into the life of a student, their goals and aspirations, likes, world-views, hobbies or views on current events. They've asked also if an aspect of each page-design could reflect something of the persons character (such as the choice of colours, font or theme graphics).

The newspaper has asked for the pages to be in either a word-processor format or HTML.

Outline of Activity
In this group activity you'll get the chance to:
 * interview another participant in the class - finding about their interests and passions - as well as,
 * demonstrate any background skills in design, communication or technology that you've picked up in school or work (none assumed!)
 * learn from each other!

Duration (suggestion only):
 * Planning client interview - 10 mins
 * Conduct interview (and possibly take photo of your client or for background image of your page) - 30 mins
 * Report back results of interviews to the group - 10 mins
 * Create Bio page - 60 mins (or longer, depending on your page!)
 * Discuss final bio pages (both from designer and clients perspective) together with whole group.

Planning your client interview
As well as the normal details such as names, interests, motivations etc., you may want to run with a theme or metaphor for your client's bio page and interview. Be as creative as you feel comfortable, but remember that the person you're interviewing is your client - you are creating the page to reflect their personality, not your own!

There's some interesting personal interview-type questions on Everything you ever wanted to know about each other.

Relationship to Qualifications
If you already have substantial HTML/CSS skills and knowledge, you may be able to use this activity to demonstrate your skills for assessment purposes. Talk to your facilitator for more information.


text:
Web Design/Group Activities/Scoping a Small Project

This activity is best suited to small groups of 3-4 people.

Time required: 30 minutes in groups, then 20mins+ discussion, reflection.

Scenario
Bluetech is a small factory automation company with three employees, situated in your local area. The owner of the company, Jillian, is a friend of your Uncle's. Jillian has mentioned to your Uncle a number of times over the past 8 months that she's wanting to contact you to talk about "putting a site together" for Bluetech.

After a phonecall, you finally meet up with Jillian for an initial discussion about his website. The meeting is only 15mins long (due to Jillian's busy schedule) and is interrupted a number of times by one of Jillian's employees. You come away from this initial meeting with the following details:

 * Jillian just wants a small website (3-5 pages)
 * The purpose of this website is to expand Bluetech's customer base.
 * The specific goals are:
 * 1) Demonstrate Bluetech's professional work through an online portfolio of recent work.
 * 2) Enable users to find out more about the company (history, mission statement, etc.)
 * 3) Encourage users to contact Bluetech for a quote
 * 4) Entice users to re-visit the page every so often.
 * Jillian would also like the site to include a bio of her own education, experience and background.

Other points you've noticed:
 * Jillian doesn't understand a lot about web design, but is keen to understand your needs.
 * The company is quite busy.

You leave the meeting a little dazed and with more questions than when you first entered.

Your group's task

 * Create a list of tasks for this project.
 * Create an initial quote based on one person working on this project (cost and deadline).
 * Design a very brief prototype (storyboard or wireframe, no images/designs required just your ideas for structuring the information).
 * If you have time, create a list of further information that you need from Jillian.

Reflection
As each group presents their project outline, you might find it helpful to discuss how you came to your decisions in each area. Remember, there's no 'right' answer - our aim here is more to discover the problems!


text:
Web Design/HTML Challenges

Use the following HTML Challenges to hone your decision making skills in HTML Programming. Should you use a <h2> element or a <strong> element? Hopefully, these challenges will help you figure out the right answer for each situation.

It's important while doing these challenges to not think about how the page will be displayed yet, but instead focus on creating meaningful mark-up!

Challenge 1: Which heading to choose?
OK, let's get started! This first challenge builds on the skills you developed in What is HTML.

Copy-n-paste the following html into a new text-file (in Notepad or your preferred text editor) and save your file with the name html_challenge1.html.

Open your file in a web browser and compare it to the image displayed here (you can right-click on the image to open a larger version in another window or tab).

Your challenge is to add so that your page looks like the one in the image!
 * Headings (, ,  , etc.>)
 * Paragraphs
 * Emphasis and strong ( and  )

Note: Yes, it's true, a web browser will display the  heading very large, and the   heading quite small. But don't get into the habit of selecting an  heading because it displays with the size that you're after! You can always modify the size of your elements using your stylesheet (more on that later).

The key is to use the headings to structure your information in a useful (and meaningful) way! For example, every page should only ever have one main heading - your  heading. An  heading should only ever be a sub-heading of your   heading. Similarly, an  heading should only ever be a sub-heading of an   heading etc.

Once you are happy with your work (and have checked it in your browser), read through Paragraphs and Headings tutorial over at Wikibooks and compare your markup! Make sure you chat about the decisions you made with someone around you if possible!

Once you're all finished, read through the following excellent snippets from HTML dog as a summary of what you've learned:
 * Paragraphs and how to emphasize text!
 * All about headings

Challenge 2: Hyperlinks
For help with this challenge, you can refer to the HTML Dog Link Tutorial.

Local Links
Save your page as links.html and add a link to another page (if you already have an index.html page this would be a good candidate).

Global Links
Add some links to Google.com and this HTML challenges page (don't forget the http:// bit at the beginning! Try it without and see what happens)

Internal Links
Internal links let you link to parts of the same page, like the table of contents at the top of this page.

Create a longish page (use the Lorem Generator or the Lipsum Generator to painlessly create a big block of text), add an identifier about halfway down the page, and put a link to it at the top of the page.

Now add another identifier to the top of the page, and add a 'Top of page' link at your halfway mark so you can quickly navigate from top to halfway and back again. (For bonus points, make a link that goes straight to the Hyperlinks heading on this page! How can you find out what identifier you need to link to?)

Creating an email hyperlink
Add a hyperlink to your email address. When a visitor clicks on the link it should open up their email software with your email address filled in and the subject line set to say "Hello".

You'll have to search to find out how to do this one! What words are best to get the information you need? Hint!.

For merit points consider:
 * Why email links might not be such a good idea.
 * How to avoid some of the problems they create.

Challenge 3: Tables for tabular data

Use the HTML Dog intermediate tutorial on tables to re-create this table.

Notes:
 * If you don't have a border, check the  tag for an attribute you may have missed.
 * You shouldn't need to add any bold to get your heading looking like a heading.
 * As always, validate your page to make sure you've got everything in the right place.

Numbers, bullets and definitions

Re-create the html page shown here (click on the image to see it full size).

For this challenge, you might want to refer to Tizag's list tutorial.

There are 3 lists on the page; a definition list, an unordered list, and an odd looking ordered list.

To re-create the ordered list you'll need to add a 'type' attribute to each  tag. Note that adding this attribute will make your code not validate as HTML 4 Strict, but it can be replaced later when you start working with Cascading Style Sheets.

Nested lists

A 'nested' list is a list that contains another list. On the web, they're commonly used for indexes or tables of contents (such as the one at the top of his page!) or menus that show all the pages inside of a section of a website.

Try recreating the nested list to the right. Use your HTML validation software to check errors as you go along -- it's better to pick up problems early on, especially with how lists must be nested in others.

Hint: To recreate the nested list from the image, you'll need to use the 'type' attribute on the  or   tags. Like the previous list, adding this attribute will make your code invalid, but we can correct it later by using CSS instead.

Challenge 5: A simple form

For this challenge, you might want to refer to HTML Dog's Beginner tutorial for Forms.

Create a small online survey with four questions of your own. Your survey should first collect the participants details (name, address, gender, D.O.B., a password etc), followed by four questions to answer.

Ensure that your survey includes:
 * Simple text inputs
 * A password input.
 * Select drop-down boxes (for State, or within your questions).
 * Radio buttons and checkboxes (as part of your form design).
 * A large text area for comments at the end.
 * A submit button with your own text (such as "Send Survey")
 * A reset button.

Worth 1024 Words
Find a copyright free image on Flickr using Flickr's Creative Commons section. Download the pic into an images directory and then write up a page that includes the image on the left hand side, along with a heading and some descriptive text (perhaps from Wikipedia). The text and heading should appear to the right of the image, and wrap around the picture.

For bonus marks:
 * Have the picture link to the original image on flickr.
 * Prevent the blue/purple border from appearing around the hyperlinked image.
 * Add a 15 pixel margin around the picture using CSS.
 * Add a drop shadow to the image using CSS. (There's a few ways to do this; you may like to check out the box-shadow examples at CSS3.info.)
 * Add an attribution for your image and text (a link back to the original photographer, author or source of your image and text).
 * Add some alt text to your image for accessibility. This will be read to people, so make sure it's accurate and descriptive.

Save your code as images.html and link to your new page from your index page.

Creating an Image Map

Using some free third party software of your choice such as MapEdit (or Online Image Map Editor for Mediawiki or hand code it if you're really keen. You can find a tutorial on how to do that here), use the map of Australia (or your own country) as a graphical table-of-contents. When a user clicks on a state, they should be taken to a separate page just for that state.

You will need to create:
 * An index.html containing your image map.
 * Links to pages in the wikipedia from at least two different states (e.g. NSW, Queensland) to demonstrate that you can link the image map.
 * You should be able to explain how the html for the image map works.
 * And of course, all your pages should validate.

Challenge 7: Some advanced table features
Tables can get quite a bit more stylish (and accessible) than the previous challenge! For some examples ranging from no-style to pretty tables, check out FluidMind's Styling tables with CSS.

Work through Veerle's CSS Styled Table tutorial, trying it out as you go (you'll need to download the provided images). To do this you will need to know how the basics of how to use CSS - see HTML Dog's Basic CSS tutorial for more information.

Once you've got your beautiful table working from the example,
 * Open up your HTML Challenge 3 - Tables for tabular data and save it as challenge7.html.
 * Add an extra column of data to your table.
 * In this column add the missing city data (each row of data was for the three cities: Sydney, Melbourne and Adelaide)
 * Add another row of data for Hobart, with the following temperatures: January: 24.8, February: 25.2, March: 19.8
 * Apply the styles from your example to your own table (this should only require a few changes to your markup!)

Challenge 8: An accessible form with style

Have a go at creating a new webpage that displays a form with the fields in the image. You might need to read through HTML Dog's Accessible forms tutorial for this challenge.

 * Note that fieldsets are being used to group the form fields.
 * Since we may not yet know how to process the information on a form, for the moment just use the form attribute  to send yourself an email (modify with your own address).
 * As always, ensure that your page validates!
 * Oh, and you'll need to add a submit button!

Once you have your form displaying, we'll take it one step further by adding some accessibility:
 * Identify all the labels for your fields using the  element.
 * Add access keys for your fields and test them!

title: Web Design/HTML Challenges


text:
Web Design/Build a small website

So far we should feel confident to Build a basic web page using headings (
...
) and paragraphs (
...
), images (), lists (
...
) and links (...). We should also be okay with linking our HTML to a stylesheet (<link />) and setting up some basic styles (fonts, sizes, colours, margins and padding). If you're unsure, have a look through the check-list on Build a basic web page and see if you are confident with the skills listed there, or see if you can answer the basic HTML exam questions or CSS exam questions!

Now we're ready to learn more about structuring our HTML so we can control more of the style with our CSS as we create our first small website from scratch! We'll also learn why it's worthwhile creating semantic (i.e. meaningful) markup.

Checklist
The activities here aim to get us creating our first small website while at the same time raising our awareness of the different types of HTML documents that we can create – as well as how we can check (validate) our HTML to make sure it's correct. We'll also learn how to divide our content into meaningful sections that we can style with our CSS. Specifically we'll investigate how to:

 * Use semantic (ie. meaningful) markup (something we're already doing, but realising why we're doing it!).
 * Use HTML tables for tabular data (not for page-layout!)
 * Group HTML content using
...
's.
 * Use id's and class selectors.
 * Use more complex CSS selectors.
 * Create user forms for gathering user input.
 * Create navigational elements using simple lists
 * Learn the strengths and weakness of the different HTML 4.01 and XHTML 1.0 DOCTYPEs

Suggested Activities
The following activities (together with the learning resources below) may help you apply the skills outlined above as you learn them in the context of a small project. If you can improve them, please do!- Web Redesign

 * HTML Challenges - Challenges 3 - 5 will get you started with html tables, lists and forms (each challenge includes links to tutorials).
 * CSS challenges - Gradually build your CSS skills for page layout as you attempt challenges 3 and 4.
 * A small website project - After your demonstration of your step-by-step web design project you might feel ready to take on your first small website project (scenarios available).
 * Choose 2 of the HTML or CSS tutorials below that you haven't yet seen and work through.
 * Find out why you should learn about current standards for HTML and CSS (see articles below)

Your learning resources
There's lots of excellent tutorials out there for learning HTML, but there's also lots of old or even obsolete tutorials too. Here's a few resources that some of us have found useful: (please feel free to recommend others, but try to limit each list to 5).

Videos worth watching

 * Live CSS editing and debugging with Firebug - the first part of this video shows an excellent way to debug your CSS! (Warning: source leads to adult site)
 * Using the Web Developer Toolbar - A video demo of the Web developer toolbar for Firefox.

Articles worth reading

 * 22 steps to create a good website - Written by experience webmaster on good practices for creating good websites.
 * Fix your site with the right DOCTYPE - Find out a bit about DOCTYPEs and why you should use them!
 * A roadmap to Standards - An excellent introduction to the 'extra-bits' required for designing sites with XHTML/CSS. Includes a pop-quiz for removing presentation stuff from your code!
 * CSS Problem Solving - Some very practical tips for solving those CSS issues with your site!

CSS Techniques

 * A simple 2 column layout - A great tutorial for creating a fixed-width 2 column layout with CSS (that shows you some of the bugs to avoid!)
 * Suckerfish Dropdowns - Step-by-step instructions for creating CSS-based drop-down menus.
 * Mountaintop Corners - How to create rounded corners for elements of your pages.
 * Robust CSS Drop Shadows - Creating drop-shadows for images or any other element of your page.

CSS/HTML tutorials

 * MaxDesign's Select Tutorial - Excellent tutorial for learning how CSS selectors work, giving you more control over your page's style!
 * CSS Selectors - Work through this excellent chapter of the CSS Wikibook.
 * HTML tables - From WebDesignFromScratch... yet another excellent resource from Ben Hunt showing you how to create HTML tables!
 * htmlDog - Includes intro, intermediate and advanced tutorials/reference on HTML tables, div's, spans, forms and DOCTYPE's
 * Web development lessons, tutorials, and much more

Online Reference

 * CSS Cheat Sheet - everything you'll ever need to remember about CSS all packed onto one page!
 * Web Design References - A huge mega-reference (nearly 6,000 links) of information and articles about web design and development. It is dedicated to disseminating news and information about web design and development with emphasis on elements of CSS, accessibility, web standards, user experience, and much more.
 * - Web Design Update A a plain text email digest newsletter. It typically goes out once a week.  All web designers and developers are invited to join.

Books

 * - Books -List includes CSS, Accessibility, Color, Dreamweaver, Information Architecture, Evaluation, JavaScript, Navigation, PHP, Project Management, Typography, Usability, Web Standards, Writing, (X)HTML.

Related Qualifications

 * Cert IV Websites Qualification in Australia

title: Web Design/Build a small website


text:
Web Design/JavaScript Challenges

Are you ready for the Javascript challenges? These challenges aim to build your Javascript skills with practical activities that can be immediately useful for your own websites!

Please make sure you are familiar with the window and document objects in Javascript before taking on these challenges (see the activities Getting to know Javascript events and Getting to know the Document Object Model with Javascript.)

Challenge 1: Peekaboo Elements
Paste the following code into a new HTML document and view it in your browser.

The aim of this challenge is to only display the email paragraph when the checkbox is checked, but we'll break that down into smaller tasks!

Step 1: Hiding the email fields by default

Add some plain old CSS style so that the "emailpara" paragraph isn't displayed when the page first loads (using the CSS 'display' property). Test to make sure this works.

Step 2: Adding a function template

Create a new function called  that simply displays an alert, ie.

Add an  event so that when the checkbox is clicked your function is called and test that it works!

Step 3: Display the email fields

Now we'll replace that  code so that our function actually does something useful! Using JavaScript, we can change the style of any element on our page using the style object. Every element has a style object and we can access it like this:

In plain English, the above JavaScript statement says:
 * 1) Get the element on my document that has the id of "subscribepara",
 * 2) Grab its style object,
 * 3) and set the backgroundColor of this style to "blue".

Try copy-n-pasting the above code into your function and see what it does! Notice that the style property names are slightly different to those that we use in CSS (backgroundColor vs. background-color). W3Schools has a great reference for the HTML DOM Style object that outlines all the property names and values.

Now modify your function so that it unhides your "emailpara" paragraph when it runs. To do this, set the  property to "inline".

Step 4: Making the email field toggle

When you test your form at the moment, you'll notice that you can click on the checkbox and the email field displays, but when you un-check the checkbox the extra paragraph doesn't hide itself again!

Our challenge is to add an if-else statement to our  function that checks to see if the checkbox is currently checked. If it is, we want to display our "emailpara" paragraph, otherwise we want to hide it.

To do this, we need to know if the checkbox is currently checked... luckily for us, W3Schools's HTML DOM Checkbox reference tells us that a checkbox element has a property called  that is either true or false (ie. we can use,   to find out the value of a checkbox, either true or false).

Step 5: When Javascript is disabled

At the moment if a user views the page with CSS enabled but Javascript disabled they will never see the email field. Add another CSS code to show the email field inside an element that fires when Javascript is disabled.

You may want to take a look at your earlier if-else statements from your input validation to see how you might complete this challenge! When you get it working, yell out "JavaScript is way cool" and stand up and point to yourself (and take a break!)

Challenge 2: 'Same as above' Postal Address boxes
Add the following fieldset to a form of your own (the one from Challenge 1 is fine) and preview it in your browser:

The aim of this challenge is to automatically copy the postal address to the home address field if a user checks the "Same as above" checkbox. In addition to this, we'll disable the home address field when the checkbox is checked.

Step 1: Adding a function template

Add a JavaScript function to your page called  that simply displays an alert, ie.

Add an event so that when the checkbox is clicked your function is called and test that it works!

Step 2: Getting the Postal Address

Before we can copy the address over, we need to know how to read it using JavaScript. In Challenge 1 we used the  property to test whether a checkbox was checked; it contained either a true or false. If we're typing text into a  then   isn't going to help much.

Instead, we'll use the  property of the. It contains the text typed into a form field. In your  function, write a line of code to display the Postal Address textarea's value in an alert box. W3Schools Textarea value page has a useful example close to what you'll write.

Step 3: Setting the value for the Home Address

Now that we know how to find the value of any element in our document, the trick is to set our home address element's value equal to the postal address element's value. To set the home address we could do something like:

Test and see if it works! You should find that when you click on your checkbox, the home address is set to the text "Hi there".

Now see if you can modify the above line so that instead of placing "Hi there" in the box, it inserts the postal address.

Step 4: Disabling the Home Address field

Use the W3Schools page about the HTML DOM TextArea object and see if you can find a property that will allow us to disable our field.

Try setting this property for your home address element in your  function. Make sure you test it out!

Step 5: Toggling the Home Address

Now when you test your form, you'll notice that when you un-check your checkbox, the home address field isn't enabled.

Have a go at adding an if-else statement to your  function so that when the checkbox is un-checked the home address field is re-enabled. (You may want to review your solution to Challenge 1!)

Challenge 3: Radio Buttons
As you saw in Challenge 2, some form fields work differently than others when we're getting information about their contents. uses,   and   use.

Luckily for us there's not many other variants to learn, and we can use very similar code to check whether a user has left a field empty, eg.

First Name is a text input, so we're testing. But how do we do this for radio buttons? They don't take a value that our user types in... a radio button is either checked or not checked! Sound familiar?

Paste the following form into a file of your own (Challenge 2's is fine) and view it in a browser:

Step 1: Setting up your input validation

First, create a blank checkForm function for your form and make sure that your function is being called when the form is submitted (using a simple window.alert). Hopefully we're starting to see why we always do this! W3Schools' Events page will help with using the submit event.

Step 2: Finding out if a radio button has been checked

Once you're convinced that your checkForm function is being called, fill out your checkForm function so that it looks like this:

Note that this function is not complete. We need to find out what the radio button's property is that will tell us whether the radio button has been checked or not. Take a look at W3Schools' HTML DOM Radio Object and see if you can find out what that property is. When you find it, replace the [what property should go here?] in the code above accordingly!

Test out your code and see if it does what you expect.

Step 3: Getting it to work properly!

You might have noticed that our code is not really doing what we want, even though it's doing exactly what we've asked it to! It currently forces the user to select the strawberry option.

We need to modify our code so that it alerts the user only if the strawberry option is false and the blueberry option is false (ie. neither radio button has been checked). Looking at the logical operators on W3Schools' Javascript Comparison and Logical Operators page, see if you can find out how to make sure that both radio buttons are un-checked before alerting the user.

Step 4: Halting progress

You might have noticed that our program tries to send an email regardless of whether we've filled the form in correctly. Not exactly ideal!

Since this is our first Challenge using the  event, you may not have seen   before. Take a look at the two  statements in the code above. See how  is used when we have an error, and   at the end if everything's ok?

JavaScript's  statement lets you immediately drop out of a program if there's no reason to continue. In our case, when we find that the user hasn't selected an option we want to cancel submitting the incomplete form. will tell JavaScript to cancel submitting, but there's one little chunk of code missing.

Take a read through JavaScript Kit's Accessing and Validating Forms page to find what you're missing to complete this puzzle.

Challenge 4: Better input validation
So far our form input validation has consisted of some annoying  boxes when users enter in the wrong information, but surely there's a more user-friendly way?!

This challenge will help you create in-line error messages that only appear when they need to! Paste the following form into a page:

Step 1: Some plain old styling

First, just some plain old CSS! Add some style so that the error messages use red text, and make them dramatic! Note how the error messages have been given a.

Once they look the way you want them, use CSS to hide them by default.

Step 2: Setting up your checkForm function

Just a blank function that simply displays a window.alert so that you know it's connected ok! You'll need to add an event so that your function is called when you press the Submit button.

Step 3: Displaying your error messages

This step will be similar to the Peekaboo challenge above (Challenge 1). When the form is submitted, our  function is called. If the "fullname" field is empty, then we want to display the "nameerrormsg" paragraph.

After you've got that working, add a similar check for the street address.

Step 4: Changing our program's logic

You might notice at the moment two issues that are not ideal:
 * 1) When you submit the form with blank fields, only the first input's error message appears.
 * 2) When you add text to one field and re-submit, the error message doesn't go away!

To fix this, you'll need to change the logic of your function... this can be tricky (so ask for help!), but here's some hints:
 * Are you using  straight after showing the first error message? This means your program will never run the second check if the first one gives an error.
 * You'll need a variable, such as "is_valid" that will be set to  or   depending on the outcome of your checks. You'll then return this variable at the end of your function, rather than returning true or false as soon as you find an error.
 * You're showing the message if there's an error, but you'll also need to hide the error message if everything's ok!

Challenge 5: Making sure a number is entered
So far we've worked out how to check whether a field is empty or not. Now we want to take this one step further and verify that whatever was entered is actually a number. Imagine you've got a Quantity field where the visitor specifies how many of a certain product they want to buy. You don't want them to enter 'a' or 'Hi there'.

Step 1: Updating your form

Add an input field to your form that has the name "quantity" and modify your checkForm function so that the value can't be empty.

Step 2: Checking for a number

Javascript has a special function called, short for "is Not a Number", that can be used to test whether a value can be understood as a number. For example, isNaN(1.5) will return false (as it *is* a number), whereas isNaN("hi there") will return true (as it is not a number).

Take a few minutes to experiment with the W3Schools demo of isNaN until you are comfortable that you understand what it does.

In your  function, right after you've made sure that the quantity field isn't empty, add another if-statement as follows:

Step 3: Adding a postcode field

Now add a another field to your form named 'postcode'. Update your  function so that:
 * 1) the postcode cannot be left blank.
 * 2) the postcode field must contain numbers only (see step 2 above).

Step 4: Checking the length of the postcode field

Everything in JavaScript that can have a length has a special  property. This can be used to tell us how many characters a user has typed into a field. For example, the following JavaScript code gets the "fullname" input element from the document and then displays an alert message telling the user how many characters were entered into it:

Take a few minutes to see how the length property is used in this W3Schools Example.

 * Modify the W3Schools example so that the field can have up to 8 characters.

 * Now modify your checkForm function so that the postcode field can only contain 4 characters.

Time for a re-cap
So far, you've managed to:
 * 1) Test whether a checkbox or radio button is checked;
 * 2) Test whether a text field is empty;
 * 3) Test whether entered text is a number using the   function;
 * 4) Test the length of the entered text in a field (ie, how many characters have been entered) using the length property;
 * 5) Improve your input validation so that it displays error messages within the page (rather than the rather ugly   message box) by hiding and showing your own error messages with the style object.

Not bad! If you feel that you need more practice with the above, try adding some of those features to another existing form (such as the one created in the HTML Challenges). This can help you catch areas that you've struggled with and build your confidence with the syntax of JavaScript.

If you use Firefox and haven't yet tried Firebug, take some time out to play with it's awesomely helpful JavaScript debugger.

Challenge 6: Getting started with email validation
Checking to see if a postcode is valid required us to check that:
 * 1) the entered postcode was a number
 * 2) the entered postcode had exactly 4 digits (depending on your country!)

What can we check to make sure that an entered email address is actually a valid email address? Take a piece of paper and see if you can come up with two or three things that email addresses always need to contain to be valid.

Step 1: Adding an email field

Add a new input to your form named 'email' (make sure to set 'name' and 'id' attributes). Q:What type of form field is best for email addresses?

A: Perhaps might work? You know, the form field input designed specifically for this use case, that does everything below automatically and more reliably?

Step 2: Making sure that the '@' symbol is present

Every email address contains one, and only one, "at" symbol (@). The email address entered into your form is just a bunch of characters strung together inside quotes, such as "Hi there". All programming languages refer to this bunch of characters as a String.

The great thing about Javascript is that every string has a whole bunch of built-in properties and methods that we can use. In fact, we've already used the  property back in Challenge 5 to work out how many characters our postcode contained.

Take a few minutes to read through the Quirksmode Strings overview. As you read through it, test some examples from the W3School JS String page.

One of the methods that you should have seen there is the indexOf method. We can use it to find out where the "@" symbol appears in our email address, if at all! Note that the  method returns a number corresponding to the index or position of the text you are looking for. If the text isn't in the string,  will return -1. For example:

If you want to test the above, try the example of indexOf at W3Schools.

Add the following code to your  function, then have a go at modifying it to get it to work.

Step 2: Ensuring there's something before the @

Now we're sure that there's an @ inside the email, but there's an outstanding problem: what if the user doesn't put anything before the @?

Write an extra if-else statement into  that ensures that the @ doesn't come right at the beginning of the string. Remember,  will give you the position starting from 0.

Step 3: Ensuring there's a full stop (.) after the @

Another required part of an email address is the server name (the bolded part in someone@somewhere.com) which always comes after the @. To ensure the user enters a server name, we can check whether a full stop is part of the email.

An additional complication is that some email addresses include a dot as part of the user name (the bolded part in james.smith@somewhere.com). We can't use  to search for the full stop because it'll pick up the first one instead of the second.

JavaScript gives us an easy way around that with, which works just like   except that it finds the last occurrence instead of the first.

Write an extra if-else statement into  that ensures that the last full stop in the email address comes after the @. You might like to create variables to hold the two positions to make the if-else statement easier to read.

Step 4: Ensuring there's at least two characters after the dot

With our current validation checks a user can't enter something silly like "@." or "some.one@" as their email address, but they could get away with "someone@somewhere." What's missing at the end?

We used  to get the position of the last full stop. How can you tell if there's more characters after it? What other property will you need to compare?

Write some extra code into  that ensures there's at least two characters after the last full stop.

Advanced: doing it all with a Regular Expression (regex)

As you can see, writing validation code can get very long and messy, even for something that appears simple like an email address. For validating complicated fields that need to be exactly right, a technique called Regular Expressions can be much shorter and faster to write.

If you've ever typed "*.*" to find all files in DOS, or selected "*.doc" in the File Type box in Windows, you've already used a simplified Regular Expression. They're a way to match words based on a pattern; in the case of "*.doc" we're looking for any word, followed by a full stop, followed by "doc".

Regular Expressions (Regex) are found in almost all programming languages, and what you learn in JavaScript will work in other programming languages such as PHP and Perl with only minor adjustments.

Aivosto's introduction to Regular Expressions is a good read to get acquainted with the basics of Regex, and also includes an email validation example. When you're ready to try them in JavaScript, check out the Dev Articles Regex in JavaScript guide. Page 5 onwards demonstrates how to use them in JS with examples, whereas pages 1 to 4 are an overview of Regex features.

Challenge 7: Unobtrusive Javascript
So far we've been mixing our JavaScript throughout our HTML... and this is the way Javascript has been done for years because it's a bit simpler (just as using  tags in HTML is a little simpler than using CSS!) But it's not the best way!

Just like we separate our HTML content and our CSS presentation of our web page, it's also worthwhile separating our Javascript behaviour. Why? You can find out more in the Digital Web Magazine article Separating Behaviour and Structure, but if you think about how separating our CSS means that we can re-use the same stylesheet very easily, it's the same with Javascript! By separating our Javascript from the actual page, we can apply the same Javascript code to lots of pages (usually) without having to modify the page itself.

Here's how it works: Normally we connect our Javascript code (like our  function) to a specific HTML element with an attribute like  :

And it does the job. Now what we want to do is remove that  chunk completely. Do it! Delete it from your own page!

How then are we going to link our form to our  function? Well, we can actually set events for our HTML elements using Javascript itself like this:

This piece of Javascript code will replace the  that we've included in our HTML up until this point! We've probably got two questions now:
 * 1) Why does our   function here not have the brackets after it?
 * 2) Where do I put this code?

The easiest answer to the first question is just "it doesn't" - it's an exception where you'll see a function without the after it! (still curious? When you omit the brackets you're passing a pointer to the function, rather than calling the function). As for the second question, let's try putting it inside our script at the start of our document as follows:

Reload your page and see what happens. In your browser's error console, you should see an error message along the lines of not being able to find an element with the  - even though you may definitely have one! (If not, add the id to your form now!)

The problem now is that our Javascript is in the head of our HTML document and is run before the rest of the document has even been read by the browser! So, we need a way to make sure our new bit of code is only run after the document has fully loaded... any ideas? Hopefully you're thinking something along the lines of:

and you're half right! We do want to use the onload event, but not written in HTML or we're back at square one! Instead we'll pack our new line of JavaScript into its own function:

and then link this function with the  event with the special line of code:

So our final Javascript code will look something like:

Try it out with your own form now!

The last step to separate our Javascript is to remove the whole shebang to a separate file, so that our script tag points to the  file instead:

Voila! Now you're on your way to learning Javascript the Unobtrusive way! Take some time to read the Digital Web Magazine article Separating Behaviour and Structure, as it might explain things with more clarity than you found here!

Challenge 8: Mapping Application
Google has provided a tool that enables you to include their rich Map functionality on your own website - all you need is a little bit of Javascript! (OK, to do some of the more useful things you'll need to learn a bit more Javascript, but that's a good thing!)

If you would like to use an open alternative, such as OpenStreetMap, try this step-by-step guide to OpenLayers.

Start by looking at the Hello World example for Google Maps. As you read through their JavaScript examples, you'll notice that some parts will look familiar (if-statements, functions, events etc), but other bits will be new (variables beginning with google.maps).

 * 1) The first part of this challenge is to get the map working on your own page. You'll need to copy-and-paste the code provided, and change the statement sensor=set_to_true_or_false to sensor=false  Then open in your web browser and/or upload to your web server.
 * 2) Modify the code so that it displays a map of your local area instead of the default Australian map (if you're from Australia, center on a major city in another country). To do this, you'll need to find latitude/longitude coordinates. ( Try http://geohash.org )
 * 3) Modify your code to customize map controls and/or add a marker.

That's just scratching the surface, but has hopefully started you thinking about the possibilities!

Challenge 9: An intro to YUI - A Calendar Control
Imagine that you've got an HTML form that requires the user to enter a date. There are a number of different formats that could be used by the user, some which are ambiguous, such as 08/06/2007 (is that the 8th of June 2007 or the 6th of August 2007? Depends where you live!)

These days, there's lots of Javascript solutions that allow your users to click on a calendar control to choose the date instead of typing it, which is a much safer way to get user input! We're going to get started using the Yahoo! User Interface libraries Calendar control.

Now the YUI library is very extensive, and very extensively documented. For the moment we'll just use the Calender control without going into too much YUI detail, but if you want to know more, there's documentation galore (with lots of cheat sheets too!) and videos such as YUI Basics and DOM hacking.

To get started:
 * Create a new blank HTML file with your,  ,  ,  ,   tags, as well as an appropriate   header and intro paragraph (such as, "A test of the YUI calendar control").
 * Add a small form with one field, including a label "Enter the name of your event:" followed by a text input field and a submit button.
 * Read through the introduction at YUI Calendar control and follow the Getting Started instructions point-by-point. If you get stuck and are unsure of a certain step, check the code below to find out what to do, but resist the urge to cut-n-paste!

Once you have your calendar control displaying on your page:
 * Add a new function to your Javascript, called, link it to your forms   event and verify that the link works (ie. add an alert that says "Yep, this was called").
 * Have a quick read of the "Obtaining selected dates" section of the YUI documentation, but note that we know that only one date can be selected, so we can grab our date into a variable like this:
 * Use the above code in your  function to display the date using window.alert. You might need to use the ,   and   methods of the date object (ie.   to get the month). See the W3Schools reference for the date object for more details.

Only if you're really keen:
 * Add a new text field to your form with the label "Selected Date", and see if you can use the Calendar's own  to transfer the selected date to your new field (note: quite a lot of new learning if you've not used YUI events before!)

Challenge 10: An intro to jQuery - Peekaboo revisited
The Yahoo! User Interface library that was used in the previous challenge has an incredible number of useful features, but this can also create a higher barrier to entry for some of us who just want to do a few simple things, like hide/unhide a form input!

Enter jQuery:
 * jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

So, let's get started! A good place to start is the tutorial Getting started with jQuery. It includes a downloadable starter kit and will work you through a hello-world example. After completing the first two sections (Setup and Hello jQuery), you're ready to start the first challenge, Peekaboo revisited!

 * Copy and paste the following HTML page into a new file - notice that it's the same form from Challenge 1 - Peekaboo elements (and we're aiming for the same functionality too).
 * Make sure that you've got the latest version of jQuery saved in the same folder as your file, with the filename jquery.js
 * Read through the Javascript code to check that you know what it's intending to do,
 * Test it out! Does it work as expected? What doesn't it do properly yet (think: "Oops, I didn't mean to check that")
 * Now for the challenge, take a look at the jQuery Event documentation, and see if you can fix the problem you identified in the previous step.

Once you're done, take a look at the Javascript code that you've used in this challenge and compare it to your code for Challenge 1... which would you prefer to write?

Finally, revisit Challenge 4 above (better input validation), and have a go at rewriting your solution using jQuery!

See also: Project Euler and Edabit

title: Web Design/JavaScript Challenges


text:
Web Design/JavaScript pen-n-paper activities

Sometimes it's more beneficial to think through your learning away from the computer! These activities are designed for exacly that. You might want to print them out and get together with some other learners in a sunny spot!

Spot the errors
See how many JavaScript errors you can spot in the following page: Testing your Javascript skills  function checkform {     // First check whether anything has been entered // in the required field if (document.getElementById("lastname").value = "") {        / Uh-oh, the lname field was blank! Let's let the user know! window alert("Please enter your last name"); document.getElementById("lname").focus; return true; }     // If our code gets this far, then both fields // must have had some text! Let onsubmit know // that all is ok by returning true! return true;  The fields marked with an asterisk (*) are required fields: *First Name:  *Last Name:

Hint: There's currently 10 errors (if you edit this activity, please update this!).

When you think you've found all the errors you're going to find:
 * 1) go back to your computer,
 * 2) copy-n-paste the code into your text editor,
 * 3) fix all the errors that you've found,
 * 4) and test the code to see if your web browser can help you find any remaining errors!

Fill in the blanks
In the following web page, there are 10 blanks (..........) to fill in! Without looking at your own code (or anyone elses!) have a go at filling in all the blanks! Fill in the blanks!  .......... toggleEmail {     var mycheckbox = document.getElementById(".........."); var myhiddenpara = document.getElementById(".........."); if (mycheckbox........... == ..........) {       myhiddenpara.style.display=".........."; }     else {       myhiddenpara.style.display=".........."; }   }   /* make the email paragraph hidden to begin with */ #emailpara {.......... : ..........}

Email subscriptions

 Yes! I would like to receive the occasional newsletter via email

Email Address:

When you've filled in all ten blanks, you might want to check with someone else's answers, or:
 * 1) go back to your computer,
 * 2) copy-n-paste the above code,
 * 3) fill in the blanks,
 * 4) test your code to see if your web browser finds any mistakes!

JavaScript Tag Soup
This activity may help learners work out some of the activities from Getting to know your Window, Getting to know your Document or the JavaScript Challenges in small groups, hopefully discussing what goes where and why!

Copy the following list of statements and print them out in a large font.

Javascript: function function var var document document window window alert("Yep, it's working") alert("                 ") open("           ") open("           ") style display checked getElementById("       ") getElementById("        ") getElementById("        ") if if elseif style style display display value value return return return true true false false ( ) == == = = { { { { } } } } . . . . . . . . toggleEmail checkForm mycheckbox myhiddenpara

HTML:       <textarea name="         " id="              " > <textarea name="         " id="              " >

CSS: display: none; { { { } } } After cutting out, use these bits of paper to do Getting to Know your Document and JavaScript Challenges in small groups (3-4) or individually.
 * 1) emailpara

JavaScript Operators Activity sheet
From our experience in school, we are usually only familiar with one group of operators – the maths operators (such as plus, minus, multiply and divide). But there are other types of operators that we need to use when creating computer programs, such as logical operators, assignment operators and string operators.

Why are they called operators? Well, they operate on numbers or strings in the same way that a doctor operates on people!

Maths (or Arithmetic) operators
Fill-in the following table, writing your own examples of the maths operators in JavaScript. The first row has been completed as an example.

If you are already familiar with these operators, create your own complete list of JavaScript arithmetic operators on the back of this page.

Assignment Operators
We will only be learning one assignment operator: equals. Can you guess what symbol is used for this operator?

Comparison (or logical) operators
The comparison operators are used to compare two objects to see if they are equal, or whether one value is greater than another. Comparison operators always return either true or false. Have a go at filling in the following table:

Confusion between the '=' assignment operator and the '= =' operator is a constant source of program bugs for every programmer, so consider yourself warned!

String operators
We'll only be learning one string operator in JavaScript too... it's call the concatenation operator, as it concatenates (or joins? Why do engineers have to make everything so complicated?) two strings together.

Remember: a string is just a bunch of letters that have been strung together, like a name-necklace where the individual letters are strung together to form your name. So “Michael” is just a string where the letters 'M', 'i', 'c', 'h', 'a', 'e' and 'l' have been strung together. A string must always be enclosed in double-quotes.

Even though this JavaScript symbol is also used for adding two numbers together, you can see, its behaviour is totally different when used with strings.


text:
Web Design/JavaScript/Web Programming Intro

Introduction
You've been sitting in class for three hours now and have had an earful of theory about “computer programming”. It seems that your teacher hasn't yet realised that he could have just left a tape of his voice droning through the room and done something more useful with his time. Just one analogy to compare programming to the real world! As your teacher answers another of his own questions in his monotone drone, you begin dozing off...

Waking up slowly – a situation that is familiar enough for you to wipe the drool from your desk before you even open your eyes – you look around to see if anyone noticed...phew, there's no one here to notice.

Wondering what exciting transmissions of information you missed, you open a browser and go to http://www.w3schools.com to find out what kind of introduction to programming they have on their site. Hey, this is quite useful, I wonder what other introductions to programming are around on the Internet...

Task
Being the nice person that you are, and knowing that there's a 99% chance that no-one else learned any more than you did during the lesson, you decide to create your own "introduction to programming – a student perspective", with links to useful sites on the net where your study-buddies can find further information.

Using your newly found HTML/CSS skills, create a small site that can serve as a tutorial to others wanting to learn about Web Programming. Feel free to make digress and make your site as interesting and/or interactive as you can, but make sure that you touch-base with the following points (remember, always include links to your resources):

General programming principles

 * Why might we want to learn computer programming to design webpages... isn't HTML and CSS enough?
 * How can you describe a "variable" to someone who hasn't done programming before?
 * What are control structures and what are they good for?

Object-Oriented programming principles

 * What is Object Oriented programming in every-day terms?
 * Describe the difference between an object's properties and an object's methods, using an visual example (a drawing, photo or diagram)!
 * Referring back to your diagram, describe how the 'dot syntax' works (eg. window.alert ) with examples from your own drawing of setting properties and using methods.
 * Provide examples of 3 objects used in Javascript Web programming, describing some corresponding properties and methods for each object.

Web Programming languages
Investigate 3 of the following languages, describing a bit about their history, popularity and what they're used for. Feel free to choose other web-programming languages if you know of any others!
 * php
 * asp
 * aspx
 * ruby on rails
 * jsp

Remember to keep your post fun and easy to read - other people might learn a lot from your site too!

Examples of other student sites
None of these links are currently active

 * Adam's Introduction to Programming - Created June 2006 as a series of blog posts (which is why the sections are in reverse order).
 * Brigitte's Introduction to programming - Created May 2006
 * Rob's Introduction to Programming - Created May 2006
 * Addye's Introduction to Programming - Created May 2006


text:
Web Design/Introductory algorithm challenges

One of the most difficult things about learning any new language (spoken or computer) is learning how to express yourself!

Most people seem to think that it's much easier to learn to read another language - or even listen and understand bits and pieces - but much more difficult to use that new language to express your own ideas! Why do you think this is? It's no different for us when we're learning computer programming... it is a totally new language - a new way of expressing ideas. It takes a lot of time and practice to be able to express simple ideas, let alone become fluent! These activities are designed to help you start speaking your first words in computer programming.

An algorithm is a process used to solve a specific problem. It's just like a recipe - a small set of instructions in a language that takes some ingredients and does something with them to produce a cake! We're not going to learn anything too complicated about algorithms (if you're after more detail, you can read the Wikipedia article on Algorithms), we're going to instead focus on learning to think like a computer and express our ideas to a computer!

We actually use algorithms all the time in our lives, from serving people a cup of coffee, through to making a decision whether to go out on Saturday night... but we do it all without thinking because it's so familiar to us. For the following tasks, we might need to slow down and examine our own thinking (also called metacognition) to find out exactly what goes on in our minds!

If you find it helpful for revision, you might also be interested in the Introductory algorithm quiz questions

Challenge 1: Be specific and in the right order!
We'll start with something that you've done so often in life that it's probably hard to actually define what you do - serving coffee! Here's the scenario:

You've just purchased a new toy called a Servitude3000 - a small robot that can handle most tasks around the house and understands plain English. After adoringly giving him the name "ScrapMetal', you decide to invite a few friends around to show off!

Note: Even though Scrappy understands plain English, he needs everything spelled out very precisely. Any ambiguity and he starts doing his dance routine for "Do the Locomotion", so be very careful!

After inviting Neville, Bhim and Addye over for some coffee, you decide to get Scrappy ready. Using the examples below from Scrappy's instruction manual, write down the steps that you will take to make a cup of coffee for your friend Neville who's always early.

Note to self: you remember that Neville doesn't take any sugar, but can't quite remember whether he has milk in his coffee!

Example statements to use (not in order, and not exhaustive - you'll probably need more!)
 * Pour ...... into ......;
 * Get ...... from ......;
 * Give ...... to ......;
 * Put ...... in/on .......;
 * Fill ...... with ......;
 * Move to ......;
 * If Neville takes milk then do the following:

Once you've got your algorithm down, give it a name, such as ServeNevilleCoffee and get someone else to follow your algorithm to see if it works! It should look something like this: PROCEDURE ServeNevilleCoffee

Get mug from cupboard; ... (lots of instructions here) ... Give mug to Neville;

END PROCEDURE

Isn't it amazing how complicated a simple process like making a cup of coffee can be!

Challenge 2: Writing Algorithms Visually
Some people are much better at thinking visually - with pictures and lines. Flowcharts provide a way for us to do exactly that: visualise our algorithms! You can read more about Flowcharts on Wikipedia.

Click on the provided image and print out the full size version (or just draw it yourself!), and then have a go at adding arrows to indicate how our ServeNevilleCoffee algorithm works!

As usual, test your algorithm by running through it using your flowchart. If it seems to work, take a few minutes to convert this into pseudo-code. Did you find it easier to write your pseudo-code from the flowchart? If so, perhaps flowcharts are the way to go for you!

Challenge 3: Making decisions in an algorithm
The doorbell rings and it's your next friend, Bhim, who has a sweet tooth. Now you'll need to modify your algorithm so that you can put a teaspoon of sugar into our coffee as required by your friends! Although, you can't quite remember how many sugars Bhim takes...

Create a new algorithm called ServeBhimCoffee using the pattern above, but adding the following commands for Scrappy:
 * Put a teaspoon of sugar into mug;
 * If Bhim likes 1 sugar then do the following:
 * If Bhim likes 2 sugars then do the following:
 * End If

Your new algorithm should follow this pattern (you'll need to fill in the instructions!): PROCEDURE ServeBhimCoffee

Get mug from cupboard; ... (lots of instructions here) ... Give mug to Bhim;

END PROCEDURE

As always, test your code by pretending to follow it yourself. When you are happy with your code, create a visual flowchart for your ServeBhimCoffee algorithm.

Challenge 4: Loops are repetitions
You might have noticed when testing your algorithm above that it works fine if Bhim likes 1 or 2 sugars, but if he likes 3 sugars then we've got a problem. Of course we could always add the following to our algorithm: If Bhim likes 3 sugars then do the following: Put teaspoon of sugar in mug; Put teaspoon of sugar in mug; Put teaspoon of sugar in mug; End if but then what if he asks for 4 sugars? 5 sugars? We can't keep adding more and more code to our algorithm like this! We need to ask our friends how many sugars they would like and then remember this value (we might use a variable called 'numsugars' to remember this). But how will we modify our algorithm so that it puts this many sugars in the cup? Unfortunately we can't just say to scrappy "put 4 sugars in the cup" - if you think about your own thought process, you count out each spoon without thinking too much. If you don't think this is the case, imagine if a friend asked for 13 sugars in their coffee!

Try arranging the following statements in an algorithm for putting the right amount of sugar in cup:
 * Set numSugarsInCup to 0;
 * Add one teaspoon of sugar to cup;
 * Add 1 to numSugarsInCup;
 * Ask Bhim how many sugars he likes and remember this as numSugars;
 * While numSugarsInCup < (is less than) numSugars, do the following:
 * End While

Re-write your ServeBhimCoffee algorithm using this new way of adding sugar. Again, try getting someone else to follow your execute your algorithm for you and see if it works!

Once you're happy with your algorithm, let us see how Repitition works with a flowchart! Try re-arranging the displayed flowchart symbols to describe an algorithm that adds the correct amount of sugar to your cup:
 * click on the "How many sugars?" image,
 * print out the full resolution version,
 * cut out the shapes
 * have a go at arranging them on a blank sheet of paper
 * when you're happy with your arrangement, stick them with glue and add your arrows!

As always, test your algorithm by going through your flowchart yourself, or ask others to test it for you! Make sure that you try it with both 0 sugars and 3 sugars.

Making toast for your friends
You're away on a holiday weekend with a bunch of 15 friends. You're in charge of programming Scrappy the robot to toast the bread slices in the morning! Initially, let's assume that your toaster can only toast one slice at a time.

You will need:
 * a variable to store how many slices of toast we need to make
 * a variable to store how many slices of toast have been made already (you'll need to set it to 0 initially)
 * a "while-loop" that keeps on going until Scrappy's made all the toast required.

Here's some suggested statements (not in the right order):
 * Press Toaster down
 * Put slice of bread in toaster
 * add 1 to .............
 * Set .............. to 0
 * While .......... is less than .............
 * Ask how many people would like toast and remember as .............

Have a go at working together with a few others to write your procedure for Scrappy! Make sure you test it by running through your code with real examples!

If you get a working procedure, try the following extra challenges:
 * 1) Modify your procedure to work with a new toaster that can toast 4 slices at a time. Initially, don't worry if you toast a few extra slices than required.
 * 2) Modify your procedure so that it toasts only the exact number of pieces in the most efficient way!

Setting the table for a dinner party
Everything you need is stacked on the bench. 8 Forks, 8 knives, 8 spoons, 8 plates and 8 glasses. Scrappy knows the seats as Seat 0, Seat 1, Seat 2, ...., Seat 7.

Here's some suggested statements:
 * Put .......... on ..........
 * Set .......... to 0
 * Move to seat number ..........
 * Get .......... from ..........
 * Add 1 to ..........
 * while .......... is less than ............

To make this one really efficient, we'll need to learn what an Array is, but we can still do it without this knowledge.

Adding up the numbers from 1-50
You might want to try this one in a group! Have a go at designing an algorithm to add all the numbers between 1 and 50! Try doing this with a flowchart first, then convert your flowchart into pseudo-code.

Hint: Make sure that you break this problem down into two smaller problems:
 * 1) Design your algorithm to count from 1 to 50 (you will need statements like "set myCounter to 0" and "Add 1 to myCounter".
 * 2) Modify your algorithm to keep a running tally, adding up the numbers as you go through.

Challenge 6: Something from your everyday life
Take 5-10 minutes to choose a simple task from your own everyday life (it could be "leaving the house", "rolling a cigarette", or "tending the garden") and create an algorithm describing your task! Try to find something that involves making simple decisions as well as repeating some steps.

If you find it difficult to write pseudo-code, have a go at creating a flowchart instead! Once you have described your algorithm using a flowchart, you can then turn it into pseudo-code a lot easier.

Challenge 7: Passing arguments!
Finally your friend Addye arrives - and she's brought 4 other friends too! We don't really want to create a separate algorithm for every person...

We need to quickly generalise our ServeNevilleCoffee and ServeBhimCoffee algorithms into something like: PROCEDURE ServeFriendCoffee(friend) ...  If friend has milk then do the following: ...    ...   ... END PROCEDURE

That way we can just call ServeFriendCoffee(Neville) or ServeFriendCoffee(Bhim) and it should work. Use this template to create your own ServeFriendCoffee algorithm.

Challenge 10: Ordering objects (a sorting algorithm)
(Too hard for here!) Alls these every-day tasks seem a long way from our JavaScript, but bear with us! What we're learning is how to use the fundamental structures of all computer programming languages:
 * Sequence (executing our statements in order)
 * Selection (if-statements, or decision statements)
 * Repetition (loops such as while or for-each loops)

One last task before we move out of the real world! If you're in a class, get a bunch (say 8) people to stand up in a row. (If you're not in a class, any bunch of objects of different heights will do!)

Sorting without thinking
First, just have a go at re-arranging yourselves into order - from tallest to shortest.

What strategy or algorithm did you use? Would this work with Scrappy?

Your first sorting algorithm
We want to see if we can get scrappy to arrange your friends into order! Working in small groups where possible, see if you can come up with an algorithm together!

In addition to the statements we've already used, you may need some of the following:
 * currentPerson is person number 1
 * If ..... > ...... then do the following:
 * tallestPerson is person number 1
 * Remove tallestPerson out of the group
 * Measure the height of the currentPerson and store the measurement as currentPersonHeight
 * set tallestPerson equal to the currentPerson
 * set maxheight equal to currentPersonHeight

Note: This activity is quite difficult! Don't worry if you need lots of help! It's pretty amazing to think that we do all this automatically without even thinking much about it!


text:
Web Design/Getting to know the Document Object Model with JavaScript

The Document Object
So far we've been playing with the Window object... This has allowed us to do things like open new windows, close old windows, bring up 'alert' boxes (window.open, window.close, window.alert respectively).

But the window object isn't the only useful object around! Using your new-found JavaScript awareness, see if you can find out what the 'document' object is used for! You might want to check your JavaScript Cheat Sheet or a W3Schools tutorial...

Finding out what's on our document
Open up a form that you've created and do the following:

 * 1) Choose a simple Text field on your form, and give it an id="firstname"
 * 2) Add an 'onsubmit' event to your form tag, and write the code as follows: onsubmit="window.alert('The value is ' + document.getElementById('firstname').value);"
 * 3) Now test out your form by typing in your field then clicking submit!

What's happening when I click submit?

 * 1) The browser checks whether there's an onsubmit event on the form
 * 2) The browser breaks down the onsubmit JavaScript into these pieces:
 * 3) Search through the entire document for an element with an ID of 'firstname'
 * 4) Get the text typed into the 'firstname' element (the value of the text field)
 * 5) Display the value in an alert box

This kind of code is extremely common, especially the document.getElementById bit. Let's find out how it works.

A short description of document.getElementById

When we give a tag an ID, it gives the browser a way to specifically identify the tag over all the other <input>s,
s or
s on the page. We'll often write CSS that targets an ID (eg. #firstname { color: blue }) and the browser hunts down the tag by its ID to apply the style. JavaScript's document.getElementById is similar, except that we can do a lot more with it afterward than just styling.

When we write code like document.getElementById("firstname") the browser gives us back a 'reference' to the tag (referred to as an element in JS). We can access (and change) almost every aspect of the element including its attributes, styling, position in the document, or even its ID. For example, document.getElementById("firstname").type = 'checkbox'; would find 'firstname', then change its type to 'checkbox' (instantly turning your text field into a checkbox!).

These properties (such as 'type', 'value', 'style', 'tagName' and 'className') all belong to the element, and are part of the Document Object Model that describes how the browser sees and works with your page.

Creating functions in Javascript
We've got a problem now... it would be great to do a lot more than just one window.alert when the user submits their form. In fact, we need to do a lot more. For this reason, we'll need to create our own function in JavaScript.

To do this, add the following code somewhere inside your ... tags:

 function checkForm {   window.alert('The value is ' + document.getElementById('firstname').value); }

Now we can modify our form's onsubmit to just call our new function, checkForm.

 ... all your other form elements go here ...

Give it a try... it should behave exactly like it did before, but now we'll be ready to add more statements to our program!

Input Validation in JavaScript
Now that we've tested our function to see that it works, we now want to change it so that it will actually test the value of our field to see if it's empty, and if it is, then let the user know! To do this, we'll need to use an if-else statement.  function checkForm {   if (document.getElementById("fullname").value == "") {     window.alert("Please enter your fullname"); }   else if (document.getElementById("address").value == "") {     window.alert("Please enter your address"); } }

Our JavaScript code isn't perfect yet, but it's a good start!

Have a go at building on this to check the rest of your form's input boxes (Note: only the input boxes for the moment, don't worry about radio buttons or check boxes or the like). You might also want to learn more about the if-else statement at w3schools.

More on Functions
Before we can finish off our input validation, we need to learn a little more about JavaScript Functions. It would be worth reading w3schools JS Functions page right now to find out a bit more about how functions work.

In particular, take notice of how functions can return a value... spend some time playing with the W3Schools Try It Interactive Demo for Javascript functions.

Try the following:
 * 1) modify the demo so that multiplies 4 and 5 instead of 4 and 3.
 * 2) modify the product function so that it adds the two numbers instead of multiplying them.

Stopping your form from being submitted
When you test your form, you'll notice that even though your input validation picks up the fact that there's stuff missing, it still goes ahead and tries to submit the form! We need to stop our form from being submitted if the input validation fails (ie, if the user has left some required field blank!)

Luckily for us, our form's onsubmit event controls this! If the JavaScript code that is run on our onsubmit event evaluates to 'false', then the browser won't submit the form. Make the following modification to your onsubmit event:

 ... all your other form elements are here ...

Now all you have to figure out is where you can put the JavaScript statement: return false; in your checkForm function. In plain English, if you can figure out at which points your if-else statement should say "OK! The input validation failed, don't let the form be submitted!", then that's where your return false should go. Give it a try!

You might also need to have a situation where your checkForm function has this bit of code: return true; Step through your checkForm code mentally, and see if you can find the point where you can say: "OK! Everything was entered correctly on the form, let it be submitted!" If you can find this spot, that's where you want to return the value 'true'.

Putting the Focus back in the field
Wouldn't it be nice to put the cursor back into the right spot for our user after we have just asked them to enter their name? For example, the user didn't fill in their fullname, so when they tried to submit the form, our input validation pops up saying "Please enter your fullname". We already know how to get our hands on an object for the fullname input element using the document object's getElementById method (see above code), but we don't have any idea how we can get this to put the cursor back in this input field (this is called: receiving the focus).

Have a look at W3Schools JavaScript HTML DOM Reference and see if you can find the reference for our input text field.

When you find the right reference (the one that corresponds to our text input box), scroll down to take a look at the methods for this object, and you will find that it has a built-in focus method! Click on the focus method and look at the example you find there.

Can you figure out whereabouts you will need to put this code (with a small modification) in your own checkForm function? Have a go... and if you get stuck, ask for help! (Hint: we want to put the focus on our fullname field right after we alert the user to the fact that they haven't entered their full name!)

Copy-n-paste-n-edit this so that it works for the rest of your input validation fields too.


text:
Web Design/Getting to know JavaScript events

OK: Sorry this isn't formatted yet or presented nicely - but it's late and I want to get away from the computer! Feel free to update it!

We're going to start our JavaScript experience by getting to know our browser window a bit better... before you know it, you'll be able to describe what:

is all about, you'll be able to describe a few events that your web browser allows you to use, and you'll be able to make those annoying popup ads happen!

Getting Started
If you haven't already, it would be a good idea to follow through the excellent intro tutorial Intro to programming (including Part 2) either before starting this activity, or after the activity to help bring some of the ideas together.

You may also want to print out the Javascript Cheat Sheet - but don't be overwhelmed by the amount of info that's been squashed onto this one sheet... grab your highlighter and highlight the following bits to start with:

 * Under 'Window' (at the bottom left of the page), highlight 'alert' and 'open'
 * the entire "Event Handlers" section.

Now simply:
 * 1) choose an HTML file that you've been working on lately,
 * 2) take a copy of it (and it's stylesheet if it has one),
 * 3) and open the HTML file up in your favourite editor.

You're ready to go!

Your first Javascript
Pick a paragraph of your choice and modify the opening tag so it looks like this:

Leave the rest of your paragraph (the text and the closing tag) as is. View your page and click on that paragraph. Simple?

You may put the above javascript statement on other attributes of the  (paragraph) tag. Try putting the same statement on "onkeydown" or for that matter "onmousedown". So your paragraph html will look like.

Now the trigger will occur when the mouse button is pressed down. Just continue experimenting.

For your information you may put the same effect on any object (button, hyperlink) on the page. Here goes another (though slightly complicated) example (from working application code) for you to understand.

Firstly we have the html tag for link  that provides a link over the image resetstuff.jpg, it programs the browser to call the js method clearstuff when the image is clicked.

This is a simple way of creating you custom buttons.

''Now here you can have the same action by not using the  tag. Try finding out how (Hint look at the properties of img tag).''

A good way is to use a html editor. It will show the available attributes on a tag automatically in a drop down as you type. It's an easier way to code. For learning though you may still prefer to use a text editor.

(Re)-read over how-to-build-website's explanation of this window.alert statement before going any further... and if you're in class, make sure you talk about what exactly is going on!

Activities

 * 1) Modify your code so that it says 'Hi [yourname]' (using your own name) and test it!
 * 2) Use your cheat sheet to see if you can add some similar code to another paragraph, but this time modify the code so that you don't need to click on the paragraph, but can simply roll the mouse over it.
 * 3) Have a go at modifying your page so that when it first loads, it pops a message saying "Welcome to my site!"
 * 4) Lastly, using your cheat sheet, see if you can modify your page so that when you click on a certain paragraph, it closes your window!

Opening a new browser window
Your first challenge is to see if you can modify your page so that when you click on a paragraph, it will open a new browser window!

Activities
Once you've got that working, try the following:
 * 1) Modify your code so that a popup window displays as soon as your page is loaded (Hint: you'll need to use the 'onload' event on your body element).
 * 2) See if you can find out a bit more about the window.open method so that you can set the size of your window and make sure it looks like a real ad by getting rid of all the guff (menus, address bar etc). Hint: You'll need to do a bit of research to find out more, try using google!
 * 3) Modify your code so that when your page loads, three small windows open up at different points on the screen, all without toolbars etc.

Now you know how to create annoying popup ads!


text:
Web Design/Learning Basic HTML and CSS/Quals

The Learning Basic HTML and CSS module is related to qualifications in the following countries:

Australia
The following units of competency from the ICA40305 Certificate IV in Information Technology (Websites) are related but not fulfilled
 * ICAB4135A Create a simple mark-up language document to specification
 * ICAB4171A Develop cascading style sheets

To demonstrate competence in these two units you will additionally need to demonstrate:
 * Document Type Declarations
 * Successful validation of your HTML pages using the W3 Validation service.