Lab 10 & 11 of CS 203
Dates given on course webpage, please complete by Friday.
Do some improvements to your page in each the the last 2
weeks, and tell me about it in the form
Tell me when your content is ready for final grading,
delicious. These people delight in creating tic-tac-toe games or
sudoku solvers. You may be one of them. On the other hand, suppose
you are not. You know that if you stop me from submitting your
it is as easy (or easier.) So may you. In 1. below, you can
welcome a user back to your index page simply by changing the file
name to index.php, and then finding what you want in $_COOKIE.
If you want to do changing pictures,
simple example on osiris. I made it while doing a video.
It uses setInterval()
1. You should by now have
set a cookie based upon your form, by using setcookie() in a php
page, or something similar. Now use it in some way in your pages.
For example: Access your
cookie on another page, preferably index.html, to "welcome" a user
who has previously filled out your form. Or, You could remember someone's language
preference, or create an on-line store, using cookies to represent
items in the "shopping cart" - and retrieve them from the $_COOKIE
array when checking out. (Alternatively, you can store "session"
information using php, on the server, using
and the special $_SESSION array.)
Remember that you may set a time to expire, 40 days would be
useful for the "end of the course." If you do not, the cookie
expires when browser is closed.
2. Also, you could position
a div (or other block element) with less than 100% width, by
floating it left or right, for example.
3. Create a picture gallery
in some way. You could have small versions of the pictures, which
when clicked on will show the larger version. You might also want to
put some text with each picture. Or, you could create a "slide show"
Make something appear in more than one language,
either based on a cookie of client choice give a different version of a page,
or use gettext in a php page to do the same.
Create a private directory
5. Perhaps you want some
pages that can only be accessed by those to whom you have given
passwords. For example, to add comments to one of your pages. See my
private folder for How To
(You will need to know the username cs203 and password, which is interactive)
SEO your pages
As we discussed, Optimize your pages for search engines, by, for example, all pages
The Internet consumes vast amounts of energy. Scale your images to the size you want to display. For example, if an image is 3000 pixels wide, and you want a width of 300, for each pixel displayed , 100 are transmitted. Each client computer must do the rescaling work, so instead you should do it once.
- have distinct, descriptive titles
- META tags for description, author, and perhaps keywords
- Links to other pages apper in <a href= tags, with descriptive link text
- images have an ALT attribute
- ONE <H1> tag, near the top, that corresponds to the title or subject of the page...
Besides, you shouldn't give away your possibly valuable full sized image!
Validate a page (For lab 11)
There are on-line validation services for both HTML and CSS at
.w3.org. (the world wide web consortium)
These services check that the syntax is valid, in other words,
they verify that it is correct, and otherwise give errors or warnings.
For html, you need to specify DOCTYPE, since
text/html can be either HTML or XHTML.
Pick a page with both html and css in it, be sure you have at the top:
Save it (Ctrl-S) to your computer if necessary, Then go to each validator page, and validate by file upload.
Click on "Browse..." and you will probably find the file you just saved, else locate it.
- For HTML, https://validator.w3.org/nu
- for CSS: https://jigsaw.w3.org/css-validator/
You will probably find some errors, and perhaps many warnings. Try
understand them, and correct what you can. If you get a successful
validation for CSS, you get a "sticker",
that you can put on
your page if you want to.
But since we can only validate by file upload, you will have to remove
check/referer from the href.
(Since HTML 5 is considered "experimental",
no sticker is available.)
In any case, tell me the page you attempted
to validate, in the form below.
Each week, do 2 out of
the 7 suggistions, OR
do some other significant things. ALSO for lab 11 a page should be fully validated. How will I notice what
you have done? You will tell me, using the form below.
Tell me your page content is ready for grading:
I would like to grade it soon. If you don't submit by December 9, I will mark it during that week.
Back to Web Design