CAP506
HTML and Graphics
CAP506
HTML and Graphics
| Web Page Making | Technical Review | Graphics and other details | Photography and Graphics | Accessibility on the Web |
You'll need to re-activate your public_html directory where you have 15 megabytes of space for projects. The best way to find out what is there is to use the WS_FTP program and if it connects for access to your public_html directory then you are fine. If not you will need to change your learn password. If you still have a portfolio there, don't delete it - you may want to build on what you created previously. Your past team projects may or may not be something you want to save. You'll want to do an inventory of what you have in your account and what might be worthy of including in your eportfolio. You can start to convert various artifacts you've collected over the past two years in the program that illustrate your creativity and skills.
To introduce yourself to the other students in this class, your first webpage making is to create your student web page use the form in Student Tools. You will probably remember how to do this from MRK224 class.
You are reminded once again, that in this course it is recommended that you keep your ideas in a notebook. I suggest that you keep this to record your progress in this course and with all of your work on the computer. In the notebook you'll keep up with your assignments, jot down questions you'd like to ask in class, sketch out ideas for your projects, record interesting URLs and resource materials. Some of you may decide to keep your notes online, creating a web page where you can edit and update your notes. Experiment and see what works best for you.
From time to time you may find web sites that five you important information for keeping your eportfolio up to date and looking its best. When you create a resource page(s) to support your job search, you may want to have a section called Hot Links or similar title to keep these links handy. Here are some examples.
Tara's Cheap Tricks - This website has a lot to look at. Tara Maginnis, a professor at the University of Alaska has links to information about downloads, web editors, making sites useful, and more. Have a look at her bio and resume as well. This is quite the professional portfolio - it gives us a rich resource as it informs us about Tara and her work.
Getting It Right - This informative page puts into perspective the transitory nature of the web page. It's essential to keep your pages error-free and up-to-date. There are a number of useful links on this page produced by Wired's webmonkey columnist, Jeffrey Veen
Designing with Web Standards - lecture by Jeffrey Zeldman who has been giving advice about designing for the Web for a long time.
Reviewing basics for creating web pages in case you've gotten a bit rusty.
TIP: When working in the lab, create a folder in My Documents on the hard drive of the computer and do your work there then before you leave class, transfer it to your diskette or FTP it to a directory you have created in your learn account on the server. Put your folder in the trash and empty the trash before leaving the lab.
The
simple nature of a basic web editor like Composer does not allow you to
do some forms of fine tuning like spacing. This can be accomplished easily
if you know basic HTML code and how to go about editing that code.
The
following is a reminder about how to access the code for your page in order
to edit it.
1.
Go to your page. On the Netscape Tool Bar, Go to VIEW. Then go to Page
Source.
2.
Use Control A to highlight all of the code for that page. Type Control
C for COPY.
3.
Open NotePad (not WordPad). Type Control V for PASTE.
You
have used keyboard commands because there is no editing menu in page source
and you have used NotePad so that you have plain text to work with.
4.
Make the editing changes you want to make. Save the text file as "all
files" using the same filename.html then open the file in Composer
to see your changes. If you want to keep them, save this file as the filename.html.
Here is some basic HTML that you may want to work with: (all code appears within right and left angle brackets < and >).
<A
HREF="http://nameof url/filename.html"> nameofpage</A> is
the HTML for a link.
<IMG
SRC="graphic.jpg"> is HTML for a graphic file.
<mailto:userid@emailaddress>
is HTML for an e-mail link
Internal
links within the same document (put inside of angle brackets)
<A
HREF="#internal link"> click on text </A>
<A
NAME="name of internal link"> section linked to </A>
Links
to other html documents within the same directory
<A
HREF= "filename.html"> click on text </A>
(only
the file name is necessary if the directory is the same as the other documents)
Using
images as hypertext links
<A
HREF = "url"><IMG SRC="image file name"></A>
<BODY
BACKGROUND="image.jpg "> will turn a picture into the background of
page
<BODY
BGCOLOR="# "> red=ff0000; green=00ff00;blue=0000ff; purple=9900dd;
white=ffffff; black=000000
<BODY
TEXT="# "> changes font color
<BODY
LINK="# "> changes link color
<BODY
VLINK="# "> changes visited link color
ALIGN="
" left, right, center
BGCOLOR="#
" background color
BORDER="
" border thickness in pixels
is the code for space that Composer uses - sometimes you need to delete
excess code
<BR>
is
for line break <P> is for paragraph break
<font
style> begins a style and </font style> ends a font style
HTML BASICS and BAREBONES GUIDE TO HTML and HTML STUFF are a sites that can help you with more tags.
Graphics:
When using graphics on the
web, it is best to consider download time when making your selection. You
can use PhotoShop to crop and resize photos. This is more effective than
resizing within the web editor. You can enhance the image by adjusting
the curve, color and light in the image. In some cases, filters are helpful,
like "sharpen".
DPI refers to the dots per inch in the resolution of a graphic. Since monitors only display 72 DPI, you do not need to have graphics with a higher resolution.
.jpg is for jpeg compression
of a graphic and is usually used for photographs where there are many colours
to be blended.
.gif is typically
used for original art work, cartoons and is the format for animated pictures.
.bmp art work as
is used in Power point clip art must be converted to .gif before it can
be used on the web.
Monitor Resolution
You need to be sure you have the resolution for your designed layout. In the lab, the default resolution for the projector is 800X600 so your layout designed for 1024X768 or 1280X1024 is not going to look the way you intended it to. Most browsers don't support using a fixed background - images will tile vertically as the browser is scrolled down. The best thing to do is design so it will look good for all resolutions.
In order to look at your page at different resolutions you need to go to the control panel of the computer and try different settings under Display Properties. Look at your page at 640X480, 800X600 and 1024X768
Backgrounds
It's important not to let
the background interfere with the content of the web page. Busy backgrounds
and large images can make text difficult to read. Try faded images behind
text.
HTML Color Pickers will help you set background and text colors. Convert to RGB and Hex codes to get more exact color selection. The following site will help you with selecting the best colors. Paletteman and RGB Color Charts
Still looking for Clip Art? Try this Yahoo Index to Clip Art and stuff.com (for animated gifs)
Image Maps Creating Transparent Gifs FramesIf you use Frames Beyond the Basics
Optimizing graphics for faster downloads.
Resources for Photography
Canon's photoworkshop.com
Focalfix Articles
on Digital Photography
Photography Skills Web
Links
Chuck Doswell has two sites
for outdoor photography: Basic
photography and Advanced
skills
Basic
Photography Skills for Web Developers by Genevieve Shiffrar
Resources for Web Graphics
Creating
Graphics for the Web by Jim Smith
Optimizing
Web Graphics
Yahoo's Web Page Design
and Layout > Graphics
Google's directory of free
graphics
In the same way that we now
have accomodations for people of differing mobility (handicap parking,
ramps, elevators, chirping traffic lights, Braille signs) we want to be
aware that not everyone has the same abilities to see and read a webpage
on the Internet. For this reason, there are sites that can analyze your
webpage to recommend ways in which you can make it more accessible to all
who may visit your page. These engines go through your page to see what
could be done to make it easier for others. ULtimately, it is your
choice to make these revisions. For example, if you have inserted images
in your site, it is best to give an alternate tag or name for the image
for those who are unable to see your graphic. Later versions of Netscape
Composer and more sophisticated web editors like DreamWeaver remind you
to do this. The following is an article on the WebMonkey site (sponsored
by Wired magazine) that tells you more about web page validation.
IF you are interested in the issues to do with accessibility on the
Web - visit the SNOW site at the University of Toronto.
to
learn about your web page's accessibility go to BOBBY
Check your links, HTML,
page load time, spelling, and more with Net
Mechanic
Questions? Please put your name/section/question in the subject line of your message. e-mail Selia