Educators: Earn a free Gold upgrade by joining the PBwiki Back To School Challenge.
Questions? Get live answers at PBwiki's weekly office hours (1 PM Eastern, Weds September 3)
Basic Concepts
From HTML
- Tables
*
General Nuts & Bolts
Take a look at this page: http://www.howtocreate.co.uk/tutorials/positionExample.php
- Your job is write a produce a web page using the same positioning features that you see on this page.
- The big block should contain the text of the biography and one image floated.
- Your page should also have three sidebar blocks.
- The top sidebar block should be a "menu" with just one link to an exact copy of the biography page except with sidebars on the opposite side.
- The other two sidebar blocks should contain quotes from the biography, but in largers font.
Biography In Blocks
Book Review Project
Requirements for the Book Review Project
_____At least three paragraphs of text. Can be original or copied from another source.
_____At least one image.
_____Use the HTML paragraph tags
and
to separate the paragraphs._____Style the paragraph tag in your CSS file to control the font-size. Make it big enough to see easily.
_____Style the paragraph tag to control the font-family. Pick a font appropriate to the book.
_____Style the paragraph tag to control the margins.
_____Use the border property somewhere in your style sheet. For example: body {border:2px dashed #99ccff}
_____Use at least one large heading tag in your HTML and style the tag in your CSS to control font-size, and color.
_____Set a background color in your CSS.
_____Try to "float" an image. Read the tutorial here: http://css.maxdesign.com.au/floatutorial/tutorial0101.htm
_____Add a border to your images.
_____Look for a subtle image to use as a background image.
_____Look at this tutorial: http://www.w3schools.com/css/css_background.asp and try some on your page.
CSS Zen Garden
- Read the CSS Zen Garden page so that you understand the basic idea.
- Check out some CSS designs in the right sidebar menu.
- Check out the CSS Zen Garden archive.
- Download the basic html for the CSS Zen Garden and put it on your workspace on the server in a folder called "zen"
- Try to get your own CSS page to connect to the html.
Color Quiz One
Name: __________________________
1) Write a CSS statement to give text color of red in three different ways:
a) _____________________ b) ___________________ c) _________________
2) Write a CSS statement to give a background color of a fairly light gray using the hexadecimal notation:
______________________________________
3) Write a CSS statement to give a background color of a fairly pure black using the hexadecimal notation:
______________________________________
4) Write a CSS statement to give a background color of a fairly pure green using the hexadecimal notation:
______________________________________
Editing Tips
Some Tips on Writing in the Wiki
For the most part, just click on Edit text of this page at the bottom of the page, type new text into the box, and click the Save button. Presto! You've just changed a web page. There's a lot you can do to fancy things up, but basic editing is as simple as click, type, and click.
To see how a certain page was formatted, use Edit text of this page just to see how it was done. On this page, you can see that two equal signs on either side of text makes a "headline" and that three single quotes makes bold text. (BTW: It's OK to just use your browser's back button to leave an edit box unsaved.)
Simple editing is one of the major benefits of Wiki. You can edit pages without knowing HTML, but still use many formatting features of HTML. Some HTML "tags", like , , , and To try these rules for yourself, please feel free to edit the SandBox page. To see how any page is formatted, just follow the link "Edit text of this page" at the bottom of the page. The "Preview" button on the editing page may also be helpful for finding formatting errors before saving.
Basic Text Formatting:
Here are a few basic rules:
Bold and Italic Text:
To mark text as bold or italic, you just use a bunch of single quotes before and after the text:
Two single quotes are italics,
'three single quotes are bold',
'five single quotes are bold and italic.'
looks like:
Two single quotes are italics, three single quotes are bold, five single quotes are bold and italic.
Wiki links
You can link to a page by removing the spaces between two or more words, and starting each word with a capital letter. For instance, WikiName and TextFormattingExamples are samples of page links.
Non-existing pages, like SampleUndefinedPage, will be displayed with a question-mark for a link. The question mark link indicates the page doesn't exist yet -- follow the link to create and edit the page. [The sample page used here is a special example page -- you can't define it.]
URL links
Write the URL: http://www.usemod.com/cgi-bin/mb.pl?SandBox
Result: http://www.usemod.com/cgi-bin/mb.pl?SandBox
In nearly all cases trailing punctuation is ignored, so you can safely make links like http://www.usemod.com/, without the trailing comma being part of the link.
If the URL itself is long and ugly, you could use a bracketed link.
Bracketed Links
Just enclose a URL with square brackets, like this: [http://www.yahoo.com/]
Result: 1
The URL will be replaced with a number. Note that is often considered bad style to replace the name of something (book, author, paper, web site) with the reference in square brackets.
Example
If you can't read it out loud, don't write it. Use the active voice, instead.
Example
Bracketed Links with Custom Text
Just follow the URL inside the square brackets with the text you want to act as the link, like this: Yahoo Search Engine
Result: Yahoo Search Engine
Inline images:
Write the URL to the image: http://www.usemod.com/wiki.gif
Result:
ISBN links
Just write the ISBN Number, like this: ISBN 0-471-25311-1
Result: ISBN 0-471-25311-1 (amazon.com, search)
Avoiding links
If you want to avoid linking, enclose the text with nowiki tags, like this: are allowed within a page, but there are also non-HTML ways to accomplish the same thing.
Overview
Here's an overview of Wiki text formatting rules you can use.
...which looks like:
Numbered lists:
- Text for a numbered list item.
- Text for another numbered list item.
- Text for a third numbered list item.
- Text for second-level list.
- Text for third level, etc.
Definition lists Terms with indented definitions: without a blank line between term and definition ;Term One:Definition for One (indented) ;Term Two:Definition for Two (indented) ;Term Three:Definition for Three (indented) ;;Term (indented):Definition (indented two levels) ;;;Term (indented twice):Definition (indented to third level) ...which looks like: Term One
Term Two
Term Three
Indented Text: Simple indented text: : Paragraph to be indented (quote-block) :: Paragraph indented more ::: Paragraph indented to third level ...which looks like:
Preformatted Text Individual lines can be displayed as preformatted (fixed-width or "typewriter"-font) text by placing one or more spaces at the start of the line. Other Wiki formatting (like links) will be applied to this kind of preformatted text. Alternatively, multi-line sections can be marked as pre-formatted text with all other formatting suppressed by surrounding the text section with lines starting with
(to start pre-formatted text), and(to end preformatted text). The
andtags are not displayed. Wiki links and other formatting is not done within a
formatted section. (If you want wiki formatting, use spaces at the start of the line instead of theandtags.)For instance:
Pre-formatted section here. No other link
or format processing
is done on pre-formatted sections.
For instance, PalmGrantWiki is not a link here, and 'this is not bold'.and:
This is the starting-spaces version of
preformatted text. Note that links like
PalmGrantWiki still work.
Miscellaneous rules:
* A line which ends in a backslash character (\) will be joined with the next line before most formatting rules are applied. This can be useful for breaking up long sections of text in line-sensitive sections (like lists or indented text).
* Most of the formatting rules are order-independent. On rare occasions the order of processing may be important.
Famous Scientist Site
The Assignment: Make a single-page web site celebrating the life and accomplishments of a famous scientist.Project Criteria:
* Put all your work in a new folder called science on the server.
* Name your page index.html so that I can find it easily without typing a file name.
* Use good HTML practice.
* Link your HTML to a separate CSS page.
* Have at least two images on you page: one a portrait of the scientist of you choice, and a second illustrating that scientist's work.
* Float the images, one to the left and one to the right so that the text flows nicely around the images.
* Use the "bigBox" idea so that your page appears against a contrasting body background.
* Use font size and font family to make your page more attractive.
Final Exam 2007
You may work alone or with one partner. Put your name (or names if working with a partner) on the line below:Put your work on the classroom server: Put your work in a folder called final'. The home page should be called index.html. Write the complete URL to that page on the line below. Here's an example: 10.10.4.83/~iteach/final/index.html
Basic Idea: For your final exam, your assignment is to make a web site for a used car dealer that demonstrates your knowledge of HTML and CSS.
Minimum Requirements: At a minimum, your web site should have a front page and two other pages linked to it. The front page should be the company's "home page" and other pages linking to it should be for individual cars that are for sale.
List of design elements that you should try to use:
* Tables
* Background images and/or colors
* Different font sizes, colors, and families
* Borders and boxes
* Padding to make things look better
* Images floated left and right
* Margins
* Links between pages
* Lists
* Company logo
* Page header
* Menu on each page linking all pages
* Page title
* Good HTML formatting
To Pass In: Pass in this page, a printed copy of the HTML for the front page, and a printed copy of your style sheet, all stapled together.
Final Exam Project
Project Description: Imagine that you have been hired by the author of a newly published book or by a singer or musician with a newly released CD. Your new boss wants you to design a web site to help sell the book or the CD.Requirements: The web site should include several pages. There should be a "home page" that catches the attention of anyone who browses to it. The home page should link to at least two other pages, maybe a page about the author or singer, maybe a page of "reviews," and, for sure, a page about where and how to buy the product.
Nuts and Bolts: Your work should end up on the classroom server (10.10.4.83) in a directory called "exam" under your "home" directory. The home page of your web site should be a file called "index.html" Your web site should be styled using CSS in a file called "exam.css"
Name:__________________________ Username on server:___________________________
Grading Rubric:
* ____ (50 points) Home page on the server as "index.html" in the "exam" folder.
* ____ (10 points) An "exam.css" file making use of at least 5 different CSS elements.
* ____ (10 points) A second page about the author or musician linked to the home page.
* ____ (10 points) A third page of either "reviews" or purchasing info linked to the home page.
* ____ (10 points) Use of graphics, one or more images on each page, at least one "floated" left or right.
* ____ (10 points) Style points for good use of color, fonts, backgrounds, layout, etc.
* ____ (5 points "Extra Credit") In the space below, identify one element of your web site that you are most proud of. Tell me what it is and why you think it deserves some special attention and extra credit.
Final Project
You're in the Web Design Business
Based on all you've learned in web design, you've decided to go into the web design business for fun and profit. Your first step is to design a web site advertising your business on the Internet.Requirements
* At least three pages: A Home page, a Services, a Contact page.
* A company logo on each page.
* Some kind of menu on each page linking to the other pages.
* A CSS file controlling colors and fonts.
* Everything on the server in a "final" directory
Some Hints
* Keep It Simple Seniors, you don't have much time.
* Keep it Readable
* Be careful with color
* Demonstrate what you've learned.
HTML And CSS Projects
Purpose: The purpose is to give you a chance to expand and demonstrate your knowledge of HTML and CSS and to exercise your creativity.Point Value: These projects are worth 50 points each.
Topics: The choice of topic is pretty much open, but should be related to a favorite something: favorite play, favorite music, favorite rock group, favorite TV show, favorite vehicle, favorite food, favorite toy, favorite historical figure, favorite sport, favorite athlete. You get the idea. The only requirement is that you page be in good taste. Nothing rude or offensive in any way or you'll get no credit for it.
Grading: Total points on each project will be based on the number of HTML and CSS "elements" you use. Here are some of the elements. There are others. I'll get a more complete list to you soon.
* Background image (2 points) -- fixed image (2 more points).
* Floating images (5 up to 10 points).
* Font sizes (2 up to 3 points).
* Font families (2 up to 3 points).
* Tables (5 up to 10).
* CSS positioning of elements (5 up to 10).
* Borders, margins, padding (1 up to 5).
* Embedded video (2 pts)
* Embedded audio (2 pts)
* Class, IDs, divs with modular design (5 up to 15 points).
Staying on task: Because you'll be working on your own, it's important that you stay on task. So 5 of your 50 points will be dedicated to that. Stay on task for the entire project, and you'll get the full five points.
HTML Forms
* Make a directory called myforms in your web space on the server.
* Create an HTML document called form1.html with the code below. Note that I had to use ? instead of < to keep the browser from actually making the form instead of showing the code. When you type this in, you should change the ? back to a <:
?html>
?form method=post>
First Name:
?input type='text' name='first_name'>
Last Name:
?input type='text' name='last_name'>
?input type='submit'>
?/form>
?/html>
* Now ftp form1.html up to the myforms directory and look at the page with a browser.
* Type in a first and last name and press submit. What happens?
Home Page
My Year
Assignment: On your own PmWiki in your own web space on the classroom server, make a new group called MyYear to document this past school year.SideBar Menu: Make a group side bar menu for the MyYear group that contains a link to each page in the group.
Wiki Trails: Look up the "Wiki Trails" through at PmWiki.com or through the search engine on your own wiki. Add Wiki Trails to the MyYear group to carry you through the pages in chronological order.
Attractive Pages: Make good use of available wiki markup to make attractive, well-designed pages. This could include floated and bordered images, change of font sizes, change of font colors, and whatever other wiki magic you can find.
PmWiki Project
* Take a look at http://pmwiki.org
* Go to the download page and download the latest zip file to your local computer desktop.
* Open the zipped folder and drag the folder inside to your desktop.
* While it's on the desktop, rename that folder to just pmwiki.
* Ftp the pmwiki folder on your desktop up to your webspace.
* Open the folder. You should see a file called pmwiki.php That's the main program that runs pmwiki.
* Now, "hit" the pmwiki.php file with your web browser: http://10.10.4.83/~yourname/pmwiki/pmwiki.php
* That should almost work, but pmwiki does not have permission to create a folder in your web space.
* Create a new folder called wiki.d inside the pmwiki folder.
* Right click on the wiki.d folder and view the Properties.
* Fill in all the boxes to allow pmwiki to write into that folder. Then click OK.
* Now go back to the browser and hit the pmwiki.php script again.
* Say "Hooray!"
PmWiki Project - Part 2
* Don't start this until you have PmWiki installed and a skin working.
* You may work with one other person on this if you'd like. But you don't have to.
* Go back to the PmWiki.com site and click on the Success Stories link in the left side bar menu. Look at some of the success stories to get an idea of how some people have been able to use PmWiki to build "real" web sites. Be sure to look at the Old Concrete Street Amphitheater.
* Now use your PmWiki to create an online catalog of some product of interest to you. The only restriction on the type of product is that it must be "school appropriate." No weapons, no nudity, nothing offensive or off-color. I will be the final judge on what is or is not appropriate.
* Your catalog should have a minimum of 10 pages.
* Your catalog should include text and graphics.
* Your catalog should make use of some of the many PmWiki features.
* You should study the template and CSS files for the skin you chose for PmWiki and try your hand with at least a few simple modifications.
Project Ideas
* Used car lot
* Team Page
* Music Group Page
* Book Web Page
* Famous Scientist Site
* Movie Review Page
* School Sports
* School Drama
* Product Marketing
* Vacation spots, travel agency
Quiz 1
Name:______________________________________________
* Write the line of HTML code that will link your web page to a style sheet called myStyle.css.
* Write the line of HTML code that begins a table that takes up seventy percent of the width of the page and has a fairly thick border.
* Write some HTML code (possibly several lines) that makes the top row of headings for a table for a student schedule showing the DAY, the CLASS, and the ROOM.
* What does "HTML" stand for?
* What does "CSS" stand for?
* What does "FTP" stand for?
* Explain the "big idea" behind CSS:
Spring Quiz
Name:___________________________Make a single HTML web page with the theme of "Spring." Save your page on the server in a folder called "spring" and in a file called "spring.html". Store your CSS in a separate file called "spring.css".
The quiz will be graded on the following criteria:
( - 0 + ) Theme
( - 0 + ) Background
( - 0 + ) Color
( - 0 + ) Fonts size and family
( - 0 + ) Images
( - 0 + ) Borders
( - 0 + ) HTML Formatting
( - 0 + ) CSS Formatting
( - 0 + ) Balance
( - 0 + ) Readability
( - 0 + ) Effective use of available time
( - 0 + ) Following instructions
( - 0 + ) Presentation
Spring Quiz Presentations
* http://10.10.4.83/~sbarges/spring/spring.html
* http://10.10.4.83/~mberlinguet/spring/spring.html
* http://10.10.4.83/~mlbernard/spring/spring.html
* http://10.10.4.83/~dbuck/spring/spring.html
* http://10.10.4.83/~ccalabro/spring/spring.html
* http://10.10.4.83/~pdacey/spring/spring.html
* http://10.10.4.83/~gdewolf/spring/spring.html
* http://10.10.4.83/~bduffy/spring/spring.html
* http://10.10.4.83/~cdunphy/spring/spring.html
* http://10.10.4.83/~cmartin/spring/spring.html
* http://10.10.4.83/~amelvin/spring/spring.html
* http://10.10.4.83/~dmichelson/spring/spring.html
* http://10.10.4.83/~cnicolau/spring/spring.html
* http://10.10.4.83/~snicolau/spring/spring.html
* http://10.10.4.83/~vniles/spring/spring.html
* http://10.10.4.83/~nodonovan/spring/spring.html
* http://10.10.4.83/~cpopoloski/spring/spring.html
* http://10.10.4.83/~kpowers/spring/spring.html
* http://10.10.4.83/~rrittenour/spring/spring.html
* http://10.10.4.83/~troberts/spring/spring.html
* http://10.10.4.83/~mrobillard/spring/spring.html
* http://10.10.4.83/~cstrand/spring/spring.html
* http://10.10.4.83/~mtedeschi/spring/spring.html
* http://10.10.4.83/~pwhalen/spring/spring.html
* http://10.10.4.83/~eyanulis/spring/spring.html
Edit this page Home Page Recent Changes Index
Survey Says
Design a web page survey with the following:
1. Text fields for first name, last name, and complete address.
2. At least two survey questions with multiple radio buttons.
3. At least two survey questions with multiple (3 or more) check boxes that can take multiple checks.
4. At least one survey question with a pull-down menu with five or more choices.
5. At least one survey question with a textarea with room for at least five lines of text.
6. A submit button that says "Save the Survey"
Tables With Style
The Task:
* Make a simple table using HTML that shows your classes with room numbers for each of the seven periods. Then use CSS to add style to the table and the page.
The Goals:
* To learn basic HTML table markup.
* To see how much you can change the look of your page through CSS
Requirements:
* Name your schedule page "mysked.html" and keep it at the top level of your workspace on the server.
* Link your schedule page to a CSS file called "mysked.css" also in the top level of your workspace.
* Keep your HTML page as simple as possible with just a title, a headline, and the table.
* Use CSS to make you page look as stylish as you can.
Grading: This will be graded on a 10 point scale:
* 10 points: Meets all technical requirements and is clearly superior in style.
* 9 points: Meets all technical requirements and shows good style.
* 8 points: Meets all technical requirements and shows some style.
* 7 points: Fails to meet one technical requirement but still shows some style.
* 0-6 points: Fails to meet several technical requirements and/or fails to show any style.
Two Column Basic Page Layout
1) Start a new directory on the server called "2col"2) Follow the tutorial here: http://www.pmob.co.uk/faqcss/tutorial01/tt1.htm to make a two-column page layout.
* At step 1 in the tutorial, you can just use the simple HTML-HEAD-BODY page setup.
* At step 2 in the tutorial, start right off with a separate CSS page.
Usemod Project
* With Usemod wiki, write an online catalog for some "product" that you are interested in.
* Each item in the catalog should be on a different page.
* Your catalog should have an index of all pages, and a link to the index on each page.
* Your home page should be like a "company" homepage.
Usemod Wiki Installation
Background Info: There's an old and simple wiki "engine" called usemod. Here's how to set it up.
- usemod is just a single file. There's a copy of that file in the public ftp directory of the classroom server. Download a copy onto your local machine. How? Use Firefox to ftp to the classroom server with no username or password. Then just grab the file called wiki.cgi from the pub directory.
- Once you have wiki.cgi on your local machine, make a folder called usemod in your user space on the classroom server.
- Copy wiki.cgi from your local machine to your usemod folder on the server.
- Use a web browser
- The file wiki.cgi is just a textfile. It's actually a program or a script written in the Perl programming language. Once you get wiki.cgi on your local
Vacation
Project Description: Make a multi-page web site documenting a planned week-long vacation. It can be the vacation you actually plan for next week, a vacation you once had, or a totally imaginary vacation.
Project Requirements:
- The project should be stored in a "vacation" directory on the server.
- Ideally, the web site should have eight files, one file of CSS and seven files of HTML, one for each day. You may not have time to finish all seven days before vacation really does start. So let's say that you have to have at least three days, and more time permits.
- Your pages should have a common "look and feel" including a common navigation system that can get you from any page to any other page with a single click.
- Each page should have images and text attractively layed out on the page.
- The text should be readable by older folks with somewhat impaired vision (like me).
- The project must be finished by the end of class on Friday, 12/22/06.
Web Page Grading Rubric
Scoring Rubric
- 10 points: Very high quality. Good attention to all the elements of design. Every avenue for improvement addressed.
- 9 points: Very high quality. Good attention to all the elements of design. Slight improvement possible.
- 8 points: Good quality. Many elements of design incorporated. Several routes for improvement unexplored.
- 7 points: Some elements of design used. Several important considerations ignored.
- 6 points: Some effort shown, but many weaknesses.
- Balance
- Color
- Fonts
- Separation of content and style
- Content Readability
- Source Code Readability
- Creativity
- Understandability
What We Know
- How to link a CSS page to an HTML page.
- To use and tags in matched pairs.
- To put the title and CSS link in the section.
- To put everything else in the section.
- How to use Internet Explorer to ftp to your web account.
- That index.html is a "magic" name.
- That HTML colors can be identified by a hexadecimal number like #d9d9d9.
- How to interpret colors expressed as hexadecimal numbers.
- To keep your style in the CSS file and your content in the HTML file.
- How to use the tag to make a link.
- How to style links, visited links, and hovering links.
- How to use a tag to make a big box.
- How to float an image to the left or to the right.
What You Learned - Term 1
Purpose: Write a web page that not only says what you've learned this first term in web design, but also demonstrates what you learned.Some Ideas: Let's say that one thing you learned is how to float an image to the right and why that sometimes makes for a more attractive web page. So maybe you make a headline that says: "Floating Images." That headline says that you learned something. Now demonstrate what it says by actually adding an image floated to the right. To demonstrate how text wraps in to fill the blank space beside the image, you could just copy and paste some text from the internet into your page. Better yet, maybe you would write a short blurb about the advantages of floating images and let that fill in the space.
Setting the Table: You learned about tables. So make a headline and do a small table.
A Daily Dose of CSS: You learned how important CSS is to making a good page. Make the headline and demonstrate the use of CSS right in your page. For example, fancy up the table you just made by writing some CSS to style the table heading and table data tags.
Use your own brain: I'm only trying to give you some ideas to get started. You need to add a lot more than my few suggestions. There are a thousand ways to do a good job on this. But they all require that you think for yourself and use your imagination.
Good Luck!
Page Information
- 6 months ago [history]
- View page source
- You're not logged in
- learn more
Wiki Information
Recent PBwiki Blog Posts
Create your own educational wiki!
