Blog by Connie

Update 3-31-07

strewnpapers — Sat, 31 Mar 2007 12:46:45 +0000

I was hoping to be able to post the lessons I’m learning as I go along but there’s just no time. If I didn’t have to work I’d be able to do it So the only posts you’re likely to see here is my progress and what I’m doing. I just finished Intro to Linux and will soon begin Web Scripting and Intro to Database Management. I’m currently taking Algebra. Programming is something that I’ll need to practice frequently or I’ll forget commands and syntax, so I’ll keep working on Linux. I’ll post as I have time.

Freshman: Fireworks

strewnpapers — Tue, 09 Jan 2007 00:55:36 +0000

Last Thursday I began Session 1 of the Winter Term 2007 at Baker College. One of my classes is Intro to Graphic Imaging; we’re using Fireworks. This is my favorite class so far! The program is a little confusing but the text walks you through projects. I like Fireworks and am going to focus on Dreamweaver and Flash, as well. I think if I master these I’ll have a good foundation in Web Development.

I’m not sure if I’ll have time to walk you through Fireworks lessons, but I’ll try. Working full-time, college full-time, and kids full-time, leaves me with ‘no-time’. But doing this blog does reinforce skill learned.

You’ll need the Fireworks 8 program to do these lessons. I’m using the Fireworks program in Macromedia Studio 8; there’s a major discount when purchased through the college; $300 vs $750, or so I’m told. That’s for the whole bundle of Fireworks, Dreamweaver, Flash, Contribute, FlashPaper, and some other things. The text we’re using is Macromedia Fireworks MX 2004 by Thomson Course Technology; Barbara M. Waxer. You’ll need data files to do the projects.

When you unzip 18837-5d1.exe, you will have data files for units A-D.
When you unzip 18837-5d2.exe, you will have data files for units E-H.

Well, get started on the above and I’ll try to keep up with the blog. Good luck!

Freshman: Lesson 46–CSS Continued

strewnpapers — Wed, 27 Dec 2006 22:38:12 +0000

Follow along and you’ll learn what I’m learning as I pursue a Bachelor of Web Development degree. This blog helps both of us by reinforcing the skills I’m learning while helping you understand web development.

Now we’ll work on color and background before I cook a couple frozen pizzas. Our text tells us that any of the following styles work for specifying a color in CSS:

body {color:teal}

body {color:#008080}

body {color:0,128,128}

body {color:0%, 50%, 50%}

Now open Astro.htm so that we can change the h1-h6 headers from gold to rgb(153,102,6) This is an embedded style (a style applied to the entire html file, allowing the Web author to modify the appearance of any tag in the document), we’ll make the changes in Astro.htm.

Astronomical products at Maxwell Scientific

The background-color attribute can be applied to almost any element in the Web page. We’ll change the

tag to a silver background. We’ll do this for all blockquotes in the site so we’ll change it in the style sheet.
Now open mws.css and apply the following:

/* CSS Document */
body {color:green}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif}
address {font-size:0.6em; font-style:normal; text-align:center; text-transform:uppercase}
blockquote {background-color:silver}

Background images can also be applied to almost any element on the page.

background-image:url(image) The image is the URL or filename of the image file.

The background can be controlled using:

background-repeat:repeat_value The repeat_value can be repeat, repeat-x (the image image is tiled only horizontally across the width of the element), repeat-y (the image is tiled only vertically across the height of the element), or none.

background-position:horizontal_position vertical_position expressed as the horizontal and vertical distance form the upper-left corner of the background, using either length, percentages, or one of the following keywords: top, center, bottom, right, or left.

background-attachment:attach is where attach equals ‘scroll’, to allow the image to scroll along with the background, or ‘fixed’, to prevent the image from scrolling.

Now we will place a watermark “Draft.jpg” to our pages. Open mws.css and add the following to the body style:

/* CSS Document */
body {color:green; background:white url(Draft.jpg) no-repeat fixed, center center}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif}
address {font-size:0.6em; font-style:normal; text-align:center; text-transform:uppercase}
blockquote {background-color:silver}

With CSS we can also specify what type of label we want to use with lists:
,
, or
.

list-style-type:type is where ‘type’ equals disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, or upper alpha.

list-style-image:url(image) is where ‘image’ is the url or filename of the graphic file.

list-style-position:location is where ‘location’ is ‘inside’ to place the label inside the box, or ‘outside’ to place the label outside the box.

Now open mws.css and we’ll use the image ‘Apple.jpg’ in place of bullets. We’ll also add a list style type because some browsers may not support the image.

/* CSS Document */
body {color:green; background:white url(Draft.jpg) no-repeat fixed, center center}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif}
address {font-size:0.6em; font-style:normal; text-align:center; text-transform:uppercase}
blockquote {background-color:silver}
ul {list-style:circle url(Apple.jpg)outside}

Now we will change the color of the boldface type in our
to dark red. Open mws.css and enter:

/* CSS Document */
body {color:green; background:white url(Draft.jpg) no-repeat fixed, center center}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif}
address {font-size:0.6em; font-style:normal; text-align:center; text-transform:uppercase}
blockquote {background-color:silver}
ul {list-style:circle url(Apple.jpg)outside}
ul b {color:rgb(155,0,0)}

Save and check your work: Astro.htm and Chem.htm

Trouble? Post a comment or email me and I’ll get back to you as soon as I can.
References
Carey (2001) (Carey P 2001 Creating Web Pages with HTML) Carey, P. (2001). Creating Web Pages with HTML (2nd ed.). Cambridge, MA: Course Technology

Lesson 45: CSS, More Styles

strewnpapers — Wed, 27 Dec 2006 15:17:19 +0000

In lesson 44 we worked with font color and family, now our text will have us work more closely with font-family attributes. CSS works with two types of font faces: specific and generic. Specific font is a font that’s already installed on the computer, such as Arial. Generic font is a general description of a font type. The five generic font types are serif, sans-serif, monospace, cursive, and fantasy. Typically serif fonts are used for body text; sans-serif for headers; cursive or fantasy for special effects; and monospace for typewriter style. It’s best to specify a font because you can never be sure which one the browser will choose if using generic. Better yet, you should give the browser several fonts to choose from, ending with a generic font. Here’s an example:

body {font-family:times roman, century schoolbook, serif}

Now open MWS.css and edit:

/* CSS Document */

body {color:green}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif}

Now we will change font size; there are many options. Use:

font-size: size

Size can be mm, cm, in, pt, pc, em, ex, xx-small, x-small, small, medium, large, x-large, xx-large, larger, or smaller. Note: 0.6em is 60% of the size of normal body text.

Now open MWS.css and add the following:

/* CSS Document */

body {color:green}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif}
address {font-size:0.6em}

To change word spacing you’d use: word-spacing: size

To change line height use the style: line-height: size

Now we’ll change the font-style for the address in mws.css:

/* CSS Document */

body {color:green}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif}
address {font-size:0.6em; font-style:normal}

Note: font-weight:value can be a weight of 400 for normal text, 700=bold, 900=extra bold, 100=light.

Now we’ll center the address tag in mws.css: (text-align:alignment can be an alignment of left, center, right, or justify)

/* CSS Document */

body {color:green}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif}
address {font-size:0.6em; font-style:normal; text-align:center}

Vertical-align:alignment can be an alignment of baseline, bottom, middle, sub, super, text-bottom, text-top, or top; or can be a distance or percentage such as -50%.

Text-indent:indentation can be an indentation as a length or a percentage of the width of the paragraph.

Text-decoration:decoration can be a decoration of blink, line-through, overline, underline, or none.

Text-transform:transform can be a transform of capitalize, lowercase, uppercase, or none.

Text-variant:variant can be a variant of small-caps or none.

Now we’ll add upper-case to our address tag in mws.css:

/* CSS Document */
body {color:green}
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif}
address {font-size:0.6em; font-style:normal; text-align:center; text-transform:uppercase}

***************

Save and check your work: Astro.htm

Trouble? Post a comment or email me and I’ll get back to you as soon as I can.

References

Carey (2001) (Carey P 2001 Creating Web Pages with HTML) Carey, P. (2001). Creating Web Pages with HTML (2nd ed.). Cambridge, MA: Course Technology

Lesson 44: CSS

strewnpapers — Mon, 18 Dec 2006 13:51:45 +0000

Here’s the lesson I’ve been waiting for. I need to get this down so that I can “recreate” my miserable Web site. For now we’ll begin Tutorial 7. In this tutorial we’ll design a Web site that will be easy to apply, change, and aesthetically interesting. It will provide a consistent look and feel across the Web site.

Begin by changing Astrotxt.htm to Astro.htm This is in the data files downloaded from our text’s Web site:

Carey (2001) (Carey P 2001 Creating Web Pages with HTML) Carey, P. (2001). Creating Web Pages with HTML (2nd ed.). Cambridge, MA: Course Technology

A style is a rule that defines the appearance of an element in the document. A style sheet is the collection of styles. CSS (cascading style sheets) is the common language and rules that are followed; it augments html, but doesn’t replace it. There are three style types:

Inline styles add styles to each individual tag within the html file. Good if you need to format just a single section in your Web page. Tag is the name of the tag, such as: attribute1:value1; attribute2:value2; etc.
Embedded or global styles are applied to the entire html file, allowing the Web author to modify the appearance of any tag in the document. Good if you need to modify all instances of particular element in a Web page. Style sheet language is the language of the css; the fault is text/css. The style declaration uses selector {attribute1:value1; attribute2:value2; etc} Selector identifies an element in the document, such as a header or paragraph. Attribute 1 is the first style attribute and value 1 is the value assigned to the first attribute, etc. The type property is not included because text/css is the default style language.
Linked or external style sheets are a text file containing the style declaration. Styles for any tag in the html file is linked to the style sheet . Good if you need to control the style for an entire Web site.

We’ll practice with the linked style sheet. But first we’ll use an inline style for the initial

tag. Insert the following in your Astro.htm:

style=”color:gold; font-family:sans-serif”>Astronomy

Maxwell Scientific provides a wide range of astronomical products —
perfect for classroom demonstrations and projects. Choose from the finest equipment from Newton,^™ DC Optics,^™
and StarVision.^™

Now we’ll add an embedded style so that the style we just used for the

header is applied to other

headers. So we’ll need to insert a

Style sheet language identifies the type of style language used in the document. There are several types of style languages, the most common, and default, is text/css.

Now delete the inline style we just created and enter the following above the tag:

Astronomical products at Maxwell Scientific

Astronomy
Chemistry
Electronics
Engineering
Physics

Astronomy

Now apply the same declaration to a group of selectors, separated by commas. Enter the following to format all our headers the same:

Now we will create an external style sheet. We’ll need to create a text file containing our style declarations, and then we need to create a link to that file from each page of the Web site. So now open a new blank document and enter the following, and then save it as mws.css Note that you don’t need
stylesheet.css is the url of the style sheet file.
If you want to access a style sheet from within another style sheet, you add the command to your style sheet file:
@import url (stylesheet.css); styles
This allows you to easily combine different style sheets.
Note: If you’re using more than one style of CSS, inline style has precedence over embedded and external style sheets. Embedded has precedence over an external style sheet.
As a change is made to a style at one level, the changes are cascaded through to the other levels, this is cascading style sheets.
Now our text has us edit more code. In mws.css edit the style definition line:

/* CSS Document /
h1, h2, h3, h4, h5, h6 {font-family:sans-serif}

Now our text has us add

Now our text has us enter the following after the tag of chem.htm:

Chemistry products at Maxwell Scientific

Now we will change the default font color for our pages to green but leave the current header text color gold. Enter the following in mws.css:

/ CSS Document */
body {color:green}
h1, h2, h3, h4, h5, h6 {font-family:sans-serif}

***********

Save and check your work: Astro.htm

Trouble? Post a comment or email me and I’ll get back to you as soon as I can.
References
Carey (2001) (Carey P 2001 Creating Web Pages with HTML) Carey, P. (2001). Creating Web Pages with HTML (2nd ed.). Cambridge, MA: Course Technology

Lesson 43: Buttons, Properties, Elements

strewnpapers — Thu, 07 Dec 2006 01:15:21 +0000

Buttons are a type of form field that performs an action when activated or clicked; they can run programs, submit or reset forms.

To create a submit button: Value defines the text that appears on the button and specifies the value that is sent to the CGI script.

To create a cancel or reset button:

To create a button that performs an action by running a program or script:

Now open Register.htm and we’ll add a submit and reset button. Enter the following directly above the tag:

Comments?:

Another element you can add to a form is an inline image. They can act like a submit button. Here’s the syntax:

URL is the filename or URL of the inline image. Name assigns a name to the filed. Value assigns a value to the image.

Now we’ll create a hidden field in our form because the CGI script requires a field named “email” that contains the recipient’s email address, other wise the script won’t know what to do with the form when the user clicks Submit. The customer shouldn’t see this address. Here’s the syntax:

Since the field is hidden, it doesn’t matter where in the

tags we place it. We’ll add ours directly below the tag:

Registration Form

We’re done adding elements to our form, now we need to specify where to send the form data and how to send it.

The action property identifies the CGI script that will process the form. The url is the url of the CGI script.

The method property controls how the browser sends the data to the server running the CGI script. Type is either GET or POST.

The enctype property specifies the format of the data when it is transferred. Text is the data format.

The target property is used when the form is part of a framed Web site.

Now we’ll add these properties to our form. Insert the following properties within the tag:
Registration Form

action=”http://www.Jkson_Electronics.com/cgi/mailer” method=”post”>

Congratulations, you’re now done with the form. I found them fascinating when I made my first one.
Note: There is a way to send form information through e-mail without using a CGI script, you’d do it by using the user’s own mail program and mailing the form information to a specified e-mail address; this bypasses the need for using CGI scripts. Here’s the syntax:
mailto:e-mail_address method=post>
The e-mail message generated is full of special characters that must be interpreted by you or a program.
Buttons can also be added to your form with the
Name is the field’s name. Value is the default value. Type is “submit, reset, or button”. The default value for the “type property” is “button”.
***************
Save and check your work: Register.htm
Trouble? Post a comment or email me and I’ll get back to you as soon as I can.
References
Carey (2001) (Carey P 2001 Creating Web Pages with HTML) Carey, P. (2001). Creating Web Pages with HTML (2nd ed.). Cambridge, MA: Course Technology

Lesson 42: Form Lists, Buttons & Boxes

strewnpapers — Wed, 06 Dec 2006 00:52:13 +0000

We’ll continue working on our form by adding a selection list; this is a list box from which the user selects a value by clicking an arrow to open the list and then clicks an item.

allows the user to select multiple items.

Now open Register.htm and insert the following directly above the

tag:

Country:

Product:

Now we’ll add the Date Purchased and Serial # fields to the form:

Product:

Date Purchased:

Serial #:

Radio buttons are similar to selection lists in that they display a list of choices from which the user makes a selection, but only one radio button can be selected.

Text is the name assigned to the field containing the radio button. Value is the value of the radio button, which will be sent to the CGI script. The name property groups distinct radio button together, so that selection one radio button in the group automatically deselects all of the other radio buttons in that group.

Now let’s add radio buttons for product usage on the form. The name of the field will be “use”:

Serial #:

Used for:
Home

Business

Government

Educational Institution

Other

Now we’ll add check boxes to our form using

Used for:
Home

Business

Government

Educational Institution

Other

System (check all that apply):
Windows

Macintosh

UNIX

Other

Now we’ll add a second horizontal line to our form:

System (check all that apply):
Windows

Macintosh

UNIX

Other

The next item we’ll add to our form is a text box tag. This will allow users to enter comments. <textarea rows=value cols=value name=text>default text

Rows is the number of lines, and columns is the number of characters allowed in each line. The wrap property can also be set to either virtual or physical, to allow the text to automatically wrap within the text box.

Now we’ll add text area:

Comments?:

 

***************

Save and check your work: Register.htm

Trouble? Post a comment or email me and I’ll get back to you as soon as I can.
References
Carey (2001) (Carey P 2001 Creating Web Pages with HTML) Carey, P. (2001). Creating Web Pages with HTML (2nd ed.). Cambridge, MA: Course Technology

Lesson 41: Forms

strewnpapers — Tue, 05 Dec 2006 19:23:40 +0000

In this lesson, our text Creating Web Pages with HTML (2nd ed.) will have us create a registration form for Jackson Electronics. In order to process the information the form has collected is to send it to a program running on the Web server, called a CGI (Common Gateway Interface) script. It allows for:

online database containing customer information
publish catalogues for ordering and purchasing items online
published databases containing product support information
determine the number of times a Web page has been accessed
create server-side image maps
crate message boards for online discussion forums
manage e-mail for discussion groups

Languages used to write CGI scripts are:

AppleScript
C/C++
Perl
the UNIX shell
TCL
Visual Basic
ASP

The language you use will depend on the Web server. Some commonly used elements are: input boxes, radio (option) buttons, selections lists, drop-down list box, check boxes, text areas, submit & reset buttons. Each element has a field (where the user enters information). The information entered into the field is called field value or value. You will need to use the

tag, in the same way you used the tag, but you can’t nest forms like you can tables.

Form elements and layout tags

***************

To begin practicing you’ll need to download the data files for Tutorial 6. Open file Regtext.htm and save as Register.htm in the same folder.

Jackson Electronics Registration Form

Registration Form

You don’t need to use tables to create forms, but they help control the layout of form objects. We’ll be creating table rows and columns.

An input box is a single-line box into which the user can enter text or numbers. The general syntax of the tag is:

Option is the type of input field, and text is the name assigned to the input field. The type property uses one of the following values: button, checkbox, hidden, image, password, radio, reset, submit, text, textarea. The value you enter for the name property is not necessarily the “name” you see next to a form element.

Now we’ll insert a table between the
tags.

Jackson Electronics Registration Form

Registration Form

Now we’ll enter the following between the

tags:

First Name:	Last Name:
Address #1:
Address #2:
City:	State: Zip:
Country:

Now we’ll change the default input box size from 20 characters wide, to more appropriate sizes by using Value is the size of the input box in number of characters. Let’s size our input boxes:

First Name:
size=25>
Last Name:size=25>

Address #1:
size=50>

Address #2:
size=50>

City:
State:size=3>
Zip:size=10>

Country:

By setting the size of an input box, you are not putting limitations on the text that can be entered into that field. But if you want to limit the number of characters that the user can enter, for example, with a social security number, you would use the following syntax: We will use this in our Zip field:

City:
State:
Zip:maxlength=5>

Another property that we’ll use is the value property. It sets the default value of the field that appears when the input box is initially displayed. You’d use it when most people would be entering the same value into the input box. The syntax is: You’ll need to use quotation marks if the text is several words. We’ll enter “United States” into our file:

Country:
value=”United States”>

A password field uses It’s the same as an input box but the characters typed by the user are displayed as bullets or asterisks; it’s a security measure. For example, when a user types a credit card number. The password itself is not encrypted.

***************

Save and check your work: Register.htm

Trouble? Post a comment or email me and I’ll get back to you as soon as I can.

References

Carey (2001) (Carey P 2001 Creating Web Pages with HTML) Carey, P. (2001). Creating Web Pages with HTML (2nd ed.). Cambridge, MA: Course Technology

Lesson 40: Frame Appearance

strewnpapers — Tue, 05 Dec 2006 11:58:32 +0000

I’m back to wrestling with Dreamweaver changing my code, so instead of fighting with it, and to save time, I’ll just give you some basics without a Web page to check your work against.

There are three properties you can control in frames: scroll bars, the size of the margin between the source document and frame border, and whether you want the user to be allowed to change the frame’s width or height.

Scroll Bars: The value can be ‘yes’ (display scroll bars) or ‘no’ (remove scroll bars). If no value is set, scroll bars will appear as needed.

Space between frame source and frame boundary: The value is in pixels.

To keep users from resizing frames:

—————

Hypertext Links: By default, clicking a hyperlink within a frame will open the linked file inside the same frame. If you want links to open in another frame you’ll need to give each frame a name and point each hyperlink to one of those named framed. To name a frame use: You’ll then need to edit the tag:

So in the COLtext.htm or Colorado.htm (which is what the text actually said to save it as and I didn’t do), you could enter the following:

HTML>

The Colorado Experience

scrolling=no marginheight=0 noresize name=Logo>

noresize name=Links>

marginheight=0 marginwidth=10 noresize name=Documents>

Now in the Links.htm you’ll specify the default target:

The Colorado Experience Hypertext Links

Home Page

Our Philosophy

Climbing Lessons

Tours

Staff

Magic target names can be used in place of a frame name as a target for a hypertext link. They are case-sensitive; use lowercase.

_blank (Loads the document into a new browser window.)
_self (Loads the document into the same frame or window that contains the hyperlink tag)
_parent (In a layout of nested frames, loads the document into the frame that contains the frame with the hyperlink tag)
_top (Load the document into the full display area, replacing the current frame layout)

They can be used to override the tag. So if we wanted the Tours.htm file to appear in the Links frame, we’d enter:

The Colorado Experience Hypertext Links

Home Page

Our Philosophy

Climbing Lessons

target=_self>Tours

Staff

The

Here’s a couple extensions that can be used with and tags.

the value is the width of the border in pixels

***************

The last thing we’ll cover in frames is floating frames. A floating (internal) frame appears as a separate box or window within a Web page rather than on one side or the top or bottom. It’s placed like an inline image. The syntax for a floating frame is:

The height/width are in pixels. The url is the document that appears within the frame. You can also use the properties: align, hspace, vspace, frame border, marginheight, marginwidth, name, scrolling.

***************

Okay, that’s enough of frames; the next lesson will cover forms.

**************

Save and check your work: Sorry, I have no Web page available for you to check your work against, but I’m sure you did well.

Trouble? Post a comment or email me and I’ll get back to you as soon as I can.

References

Carey (2001) (Carey P 2001 Creating Web Pages with HTML) Carey, P. (2001). Creating Web Pages with HTML (2nd ed.). Cambridge, MA: Course Technology

Revised Schedule

strewnpapers — Mon, 04 Dec 2006 11:00:34 +0000

Here’s our latest schedule:

Week of Dec. 3: Frames & Forms

Week of Dec. 10: CSS

Week of Dec. 17: JavaScript

Week of Dec. 24: Sound, Video, & Java Applets

In January we’ll begin working with Macromedia’s Fireworks.