Basic Calendar Something that would make your web page look very nice is a basic calendar. A basic calendar shows the currents days of the month. This uses CSS in order to change its appearance. Everything from calendar dimensions, colors, down to the font used to highlight the current day.

 .main {  width:200px;  border:1px solid black;  } .month {  background-color:black;  font:bold 12px verdana;  color:white;  } .daysofweek {  background-color:gray;  font:bold 12px verdana;  color:white;  } .days {  font-size: 12px;  font-family:verdana;  color:black;  background-color: lightyellow;  padding: 2px;  } .days #today{  font-weight: bold;  color: red;  }   /***********************************************  * Basic Calendar-By Brian Gosselin at  * Script featured on Dynamic Drive (  * This notice must stay intact for use  * Visit for full source code  ***********************************************/ 

Code for basic calendar: Step 2 insert the code below where your wish the calendar to appear on you page   var todaydate=new Date()  var curmonth=todaydate.getMonth()+1 //get current month (1-12)  var curyear=todaydate.getFullYear() //get current year  document.write(buildCal(curmonth,curyear, "main", "month", "daysofweek", "days", 1)); 

 Create an html document called 23.htm  Create a head and body  Place the head and body code with copy and paste in the correct places  Check the directions to make it work and link to give credit to the original author

Review  Basic Calendar  Code for the head section  Code for the web page (body section)  Calendar Directions/Rubric

 Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers. Thumbnail images are small images that members may have posted in the gallery section of the sort of category pages on a website.

Step 1: Insert the below code in the HEAD section of your page: 

Step 2: Create your "thumbnail" HTML code. Three basic flavors are supported: Dan

Check out the actual directions at /index.htm to make sure the LightBox actually works /index.htm Make sure the body and head section function correctly Cite the original author with a link Make sure that the overall page aesthetics look professional

Review  Lightbox image viewer  Lightbox imagine viewer code step 1  Lightbox image viewer code step 2  Directions/Rubric 5 points each

CSS background color Text can have a color in the background. This is a heading Use this example to change the background for some of the text on your page.

Using CSS to change the whole page  In the section, before the section, there can be some design for the whole page.  body {background-color:yellow;} p {color:blue;}  Use the style command in the head section to set up a nice background color for the page.

Using the Embed command The embed command can place a file from a location on the page. It is different from a link because it loads the object onto the current page rather than going to a separate thing.

Gaining access to earlier project  The embed command can be used to access another html page.  If a student submitted an html page as their project 19 assignment, it would be saved as 19.html.   Try embedding a previous project onto the web page.

Review/Rubric, 5 points each CSS background color Using css to change the whole page Using the embed command Gaining access to earlier project

Adding music to the page  The embed command can also be used to have the web page play music.  Line link a music file to play for your page. Look for a.mid file to play some music. 

Making the page interesting The page should contain some good information about topics the student is interested in. It should contain pictures on what the student is interested in. It should have music and colors so that a person looking at the page will be impressed.

Making the page professional  Web pages should not only look fun, they should have a sleek aesthetic design. Having stuff all over the place and unorganized will make a person reading the page get confused or annoyed. There are a LOT of other people posting web pages on the Internet. Be sure to take care and have the page show some intelligent design.

Using Forms to add buttons Some times we want a person to be able to click things on the page to see things happen. A great way to do this is to add a nice button. Try the following code on your page. Click Me! The code won’t do anything for now.

Review/Rubric 5 points each  Adding music to the page  Making the page interesting  Making the page professional  Using forms to add buttons

Using Forms To Get Names The following code will enable a reader to type in their name. Add it to your page. First name: Last name:

Using Forms to get checks  The following code will enable a person to check boxes. Add a version to your page.  I have a bike I have a car

Form Passwords The following will enable a user to put in a password without the password being shown. Add it to your page. Password:

More programming  To make the buttons and boxes and text entered do stuff, we will need other programming languages.  We can use things like php or javascript to expand on our web page power.  To make the best pages will require work and dedication.  The best pages of tomorrow will be made of students from today.

Review/Rubric 5 Points each Using form to get names Using forms to get checks Form passwords More programming (no need to include in project, free 5 points)