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.
Update 3-31-07
March 31, 2007 · Leave a Comment
→ Leave a CommentCategories: Beginner's Notebook
Freshman: Fireworks
January 8, 2007 · Leave a Comment
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!
→ Leave a CommentCategories: Beginner's Notebook
Freshman: Lesson 46–CSS Continued
December 27, 2006 · Leave a Comment
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.
<HTML>
<HEAD>
<TITLE>Astronomical products at Maxwell Scientific</TITLE>
<link href=”mws.css” rel=”stylesheet” type=”text/css”>
<style>
h1, h2, h3, h4, h5, h6 {color:rgb(153,102,6)}
</style>
</HEAD>
<BODY>
The background-color attribute can be applied to almost any element in the Web page. We’ll change the <blockquote> 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: <ul>, <ol>, or <lI>.
- 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 <ul> 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
→ Leave a CommentCategories: Beginner's Notebook
Lesson 45: CSS, More Styles
December 27, 2006 · Leave a Comment
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.
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
→ Leave a CommentCategories: Beginner's Notebook
Lesson 44: CSS
December 18, 2006 · Leave a Comment
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 style=”style declarations”> Tag is the name of the tag, such as: <h1, p, etc.). Style declarations are the styles you’ll define for that tag, such as: font size, color, and type followed by a colon and the attribute’s value: 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 type=”style sheet language”>style declarations</style> 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 <h1> tag. Insert the following in your Astro.htm:
<HR> <H1 style=”color:gold; font-family:sans-serif”>Astronomy</H1>
<P>Maxwell Scientific provides a wide range of astronomical products —
perfect for classroom demonstrations and projects. Choose from the finest equipment from Newton,<SUP>™</SUP> DC Optics,<SUP>™</SUP>
and StarVision.<SUP>™</SUP></P>
Now we’ll add an embedded style so that the style we just used for the <h1> header is applied to other <h1> headers. So we’ll need to insert a <style> tag within the head section of our html file. Here’s the syntax:
<style type=”style sheet language”>style declarations</style>
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 </head> tag:
<HTML>
<HEAD>
<TITLE>Astronomical products at Maxwell Scientific</TITLE>
<style>
h1 {color:gold; font-family:sans-serif}
</style>
</HEAD>
<BODY>
<CENTER><IMG SRC=”MWSLogo.gif”><BR>
<A HREF=”Astro.htm”>Astronomy</A>
<A HREF=”Chem.htm”>Chemistry</A>
<A HREF=”Elect.htm”>Electronics</A>
<A HREF=”Eng.htm”>Engineering</A>
<A HREF=”Physics.htm”>Physics</A></CENTER>
<HR><H1>Astronomy</H1>
Now apply the same declaration to a group of selectors, separated by commas. Enter the following to format all our headers the same:
<style>
h1, h2, h3, h4, h5, h6 {color:gold; font-family:sans-serif}
</style>
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 <style> tags, just the declarations:
/* CSS Document */
h1, h2, h3, h4, h5, h6 {color:gold; font-family:sans-serif}
Note: Dreamweaver entered the /*CSS Document*/ into my file.
Now we have to link our Web pages to the style sheet. We’ll need to add a <link> tag to the head section of our html file. Here’s the syntax:
<link href=url rel=”relation_type” type=”link_type”>
Url is the url of the linked document. Relation_type establishes the relationship between the linked document and the Web page. Link_type indicates the language used in the linked document. In order to link to a style sheet, the value of the REL property should be “stylesheet” and the value of the TYPE property should be “text/css”.
Now delete the embedded style we entered earlier because we don’t need it, and enter the following before the </head> tag in Astro.htm:
<HTML>
<HEAD>
<TITLE>Astronomical products at Maxwell Scientific</TITLE>
<link href=”mws.css” rel=”stylesheet” type=”text/css”>
</HEAD>
<BODY>
Now we’ll add the style sheet to the Chemistry page. Save Chemtxt.htm and save as Chem.htm and then add the same link to it as you did with Astro.htm:
It’s possible to link to other style sheets using @import. This would be added within the embedded <style> tags:
<style>@import url (stylesheet.css); style declarations</style>
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 <style> in astro.htm:
<HEAD>
<TITLE>Astronomical products at Maxwell Scientific</TITLE>
<link href=”mws.css” rel=”stylesheet” type=”text/css”
<style>
h1, h2, h3, h4, h5, h6 {color:gold}
</style></head>
Now our text has us enter the following after the <link> tag of chem.htm:
<HTML>
<HEAD>
<TITLE>Chemistry products at Maxwell Scientific</TITLE>
<link href=”mws.css” rel=”stylesheet” type=”text/css”>
<style>
h1, h2, h3, h4, h5, h6 {color:red}
</style>
</HEAD>
<BODY>
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
→ Leave a CommentCategories: Beginner's Notebook
Lesson 43: Buttons, Properties, Elements
December 6, 2006 · Leave a Comment
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: <input type=submit value=”text”> 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: <input type=reset>
To create a button that performs an action by running a program or script: <input type=button>
Now open Register.htm and we’ll add a submit and reset button. Enter the following directly above the </table> tag:
<tr>
<td valign=top>Comments?:</td>
<td>
<textarea rows=4 cols=50 name=comments wrap=virtual>
</textarea>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=submit value=”Send Registration”>
<input type=reset value=”Cancel”>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Another element you can add to a form is an inline image. They can act like a submit button. Here’s the syntax:
<input type=image src=url name=text value=text>
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:
<input type=hidden name=text value=value>
Since the field is hidden, it doesn’t matter where in the <form> tags we place it. We’ll add ours directly below the <form> tag:
<H2>Registration Form</H2>
<form name=reg>
<!–email address of the person handling this form—>
<input type=hidden name=email value=”adavis@Jkson_Electronics.com”>
<table>
<tr>
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 <form action=url> identifies the CGI script that will process the form. The url is the url of the CGI script.
- The method property <form method=type> controls how the browser sends the data to the server running the CGI script. Type is either GET or POST.
- The enctype property <form enctype=text> 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 <form> tag:
<H2>Registration Form</H2>
<form name=reg action=”http://www.Jkson_Electronics.com/cgi/mailer” method=”post”>
<!–email address of the person handling this form—>
<input type=hidden name=email value=”adavis@Jkson_Electronics.com”>
<table>
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:
<form action=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 <button> tag. They are more versatile because they support both character and graphic elements. Here’s the syntax:
<button name=name value=value type=type>button text and html tags</button>
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
→ Leave a CommentCategories: Beginner's Notebook
Lesson 42: Form Lists, Buttons & Boxes
December 5, 2006 · Leave a Comment
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.
<select name=text>
<option>Option 1
<option>Option 2
etc.
The name property is the field name of the selection list. The <option> tag represents an entry in the list. <select multiple> allows the user to select multiple items.
Now open Register.htm and insert the following directly above the </table> tag:
<tr>
<td>Country:</td>
<td><input name=country value=”United States”></td>
</tr>
<tr>
<td>Product:</td>
<td><Select name=product>
<option>ScanMaster
<option>ScanMaster II
<option>LaserPrint 1000
<option>LaserPrint 5000
<option>Print/Scan 150
<option>Print/Scan 250
</select></td>
</tr>
</table>
</form>
</BODY>
</HTML>
Now we’ll add the Date Purchased and Serial # fields to the form:
<tr>
<td>Product:</td>
<td><Select name=product>
<option>ScanMaster
<option>ScanMaster II
<option>LaserPrint 1000
<option>LaserPrint 5000
<option>Print/Scan 150
<option>Print/Scan 250
</select></td>
</tr>
<tr>
<td>Date Purchased:</td>
<td><input name=date></td>
</tr>
<tr>
<td>Serial #:</td>
<td><input name=serial></td>
</tr>
</table>
</form>
</BODY>
</HTML>
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.
<input type=radio name=text value=value>
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”:
<tr>
<td>Serial #:</td>
<td><input name=serial></td>
</tr>
<tr>
<td valign=top>Used for:</td>
<td><input type=radio name=use value=home>Home<br>
<input type=radio name=use value=bus>Business<br>
<input type=radio name=use value=gov>Government<br>
<input type=radio name=use value=ed>Educational Institution<br>
<input type=radio name=use value=other>Other</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Now we’ll add check boxes to our form using <input type=checkbox name=text>
<tr>
<td valign=top>Used for:</td>
<td><input type=radio name=use value=home>Home<br>
<input type=radio name=use value=bus>Business<br>
<input type=radio name=use value=gov>Government<br>
<input type=radio name=use value=ed>Educational Institution<br>
<input type=radio name=use value=other>Other</td>
</tr>
<tr>
<td valign=top>System (check all that apply):</td>
<td><input type=checkbox name=windows>Windows<br>
<input type=checkbox name=mac>Macintosh<br>
<input type=checkbox name=unix>UNIX<br>
<input type=checkbox name=other_system>Other</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Now we’ll add a second horizontal line to our form:
<tr>
<td valign=top>System (check all that apply):</td>
<td><input type=checkbox name=windows>Windows<br>
<input type=checkbox name=mac>Macintosh<br>
<input type=checkbox name=unix>UNIX<br>
<input type=checkbox name=other_system>Other</td>
</tr>
<tr>
<td colspan=2><hr></td>
</tr>
</table>
</form>
</BODY>
</HTML>
The next item we’ll add to our form is a text box <textarea> tag. This will allow users to enter comments.
<textarea rows=value cols=value name=text>default text</textarea>
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:
<tr>
<td colspan=2><hr></td>
</tr>
<tr>
<td valign=top>Comments?:</td>
<td>
<textarea rows=4 cols=50 name=comments wrap=virtual>
</textarea>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
***************
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
→ Leave a CommentCategories: Beginner's Notebook
Lesson 41: Forms
December 5, 2006 · Leave a Comment
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 <form> tag, in the same way you used the <table> tag, but you can’t nest forms like you can tables.
<form properties>
Form elements and layout tags
</form>
***************
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.
<HTML>
<HEAD>
<TITLE>Jackson Electronics Registration Form</TITLE>
</HEAD>
<BODY BGCOLOR=#99FFCC>
<CENTER><IMG SRC=”Jackson.gif”></CENTER>
<H2>Registration Form</H2>
<form name=reg>
</form>
</BODY>
</HTML>
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 <input> is a single-line box into which the user can enter text or numbers. The general syntax of the <input> tag is:
<input type=option name=text>
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 <form> tags.
<HTML>
<HEAD>
<TITLE>Jackson Electronics Registration Form</TITLE>
</HEAD>
<BODY BGCOLOR=#99FFCC>
<CENTER><IMG SRC=”Jackson.gif”></CENTER>
<H2>Registration Form</H2>
<form name=reg>
<table>
</table>
</form>
</BODY>
</HTML>
Now we’ll enter the following between the <table> tags:
<form name=reg>
<table>
<tr>
<td width=100>First Name:</td>
<td><input name=First Name>
Last Name:<input name=lastname></td>
</tr>
<tr>
<td>Address #1:</td>
<td><input name=address1></td>
</tr>
<tr>
<td>Address #2:</td>
<td><input name=address2></td>
</tr>
<tr>
<td>City:</td>
<td><input name=city>State:<input name=state>
Zip:<input name=zip></td>
</tr>
<tr>
<td>Country:</td>
<td><input name=country></td>
</tr>
</table>
</form>
Now we’ll change the default input box size from 20 characters wide, to more appropriate sizes by using <input size=value> Value is the size of the input box in number of characters. Let’s size our input boxes:
<tr>
<td width=100>First Name:</td>
<td><input name=First Name size=25>
Last Name:<input name=lastname size=25></td>
</tr>
<tr>
<td>Address #1:</td>
<td><input name=address1 size=50></td>
</tr>
<tr>
<td>Address #2:</td>
<td><input name=address2 size=50></td>
</tr>
<tr>
<td>City:</td>
<td><input name=city>State:<input name=state size=3>
Zip:<input name=zip size=10></td>
</tr>
<tr>
<td>Country:</td>
<td><input name=country></td>
</tr>
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: <input maxlength=value> We will use this in our Zip field:
<tr>
<td>City:</td>
<td><input name=city>State:<input name=state size=3>
Zip:<input name=zip size=10 maxlength=5></td>
</tr>
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: <input value=”value”> You’ll need to use quotation marks if the text is several words. We’ll enter “United States” into our file:
<tr>
<td>Country:</td>
<td><input name=country value=”United States”></td>
</tr>
A password field uses <input type=password> 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
→ Leave a CommentCategories: Beginner's Notebook
Lesson 40: Frame Appearance
December 5, 2006 · Leave a Comment
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: <frame src=document scrolling=value> 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: <frame src=document marginwidth=value marginheight=value> The value is in pixels.
To keep users from resizing frames: <frame=src=document noresize>
—————
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: <frame src=document name=frame_name> You’ll then need to edit the <a> tag: <a href=url target=frame_name>
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>
<HEAD>
<TITLE>The Colorado Experience</TITLE>
</HEAD>
<frameset rows=”60,*”>
<!—Company Logo—>
<frame src=”head.htm” scrolling=no marginheight=0 noresize name=Logo>
<!—Nested frames—>
<frameset cols=”140,*”>
<!—List of Colorado Experience hyperlinks—>
<frame src=”links.htm” noresize name=Links>
<!—Colorado Experience Web pages—>
<frame src=”TCE.htm” marginheight=0 marginwidth=10 noresize name=Documents>
</frameset>
</frameset>
</HTML>
Now in the Links.htm you’ll specify the default target:
<HTML>
<HEAD>
<TITLE>The Colorado Experience Hypertext Links</TITLE>
<base target=Documents>
</HEAD>
<BODY BACKGROUND=”Wall2.jpg”>
<FONT SIZE=2><B>
<A HREF=”TCE.htm”>Home Page</A><BR>
<A HREF=”Philosph.htm”>Our Philosophy</A><BR>
<A HREF=”Lessons.htm”>Climbing Lessons</A><BR>
<A HREF=”Tours.htm”>Tours</A><BR>
<A HREF=”Staff.htm”>Staff</A>
</B></FONT>
</BODY>
</HTML>
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 <base> tag. So if we wanted the Tours.htm file to appear in the Links frame, we’d enter:
<HTML>
<HEAD>
<TITLE>The Colorado Experience Hypertext Links</TITLE>
<base target=Documents>
</HEAD>
<BODY BACKGROUND=”Wall2.jpg”>
<FONT SIZE=2><B>
<A HREF=”TCE.htm”>Home Page</A><BR>
<A HREF=”Philosph.htm”>Our Philosophy</A><BR>
<A HREF=”Lessons.htm”>Climbing Lessons</A><BR>
<A HREF=”Tours.htm” target=_self>Tours</A><BR>
<A HREF=”Staff.htm”>Staff</A>
</B></FONT>
</BODY>
</HTML>
The <noframes> tag allows your page to be viewable by browsers that don’t support frames, as well as those that do. So in your COLtext.htm or Colorado.htm file you’d enter the following: (you’ll need to also open Noframes.htm and copy/paste the html code, including the <body> tag)
HTML>
<HEAD>
<TITLE>The Colorado Experience</TITLE>
</HEAD>
<frameset rows=”60,*”>
<!—Company Logo—>
<frame src=”head.htm” scrolling=no marginheight=0 noresize name=Logo>
<!—Nested frames—>
<frameset cols=”140,*”>
<!—List of Colorado Experience hyperlinks—>
<frame src=”links.htm” noresize name=Links>
<!—Colorado Experience Web pages—>
<frame src=”TCE.htm” marginheight=0 marginwidth=10 noresize name=Documents>
</frameset>
</frameset><!—Frameless version of this page—>
<noframes>
<BODY BACKGROUND=”Wall.jpg”>
<TABLE WIDTH=610>
<TR>
<!— Company Logo —>
<TD ALIGN=CENTER COLSPAN=2>
<IMG SRC=”Logo.jpg” WIDTH=550 HEIGHT=60 ALT=”The Colorado Experience”>
</TD>
</TR>
<TR>
<!— List of Colorado Experience Links —>
<TD WIDTH=140 VALIGN=TOP>
<FONT SIZE=2 COLOR=BLUE><B>*****Omitted Code*****
<P>So call us today, and enjoy The Colorado Experience tomorrow!</P>
<CENTER><FONT SIZE=2><B>
The Colorado Experience<BR>
2411 Agnes Avenue<BR>
Vale Park, CO     80517<BR>
(970) 555-2341 · FAX: (970) 555-2342
</B></FONT></CENTER>
</TD>
</TR>
</TABLE></BODY>
</noframes>
</HTML>
Here’s a couple extensions that can be used with <frame> and <frameset> tags.
<frameset bordercolor=color>
<frame bordercolor=color>
<frameset border=value> 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:
<iframe width=value height=value src=url>
</iframe>
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
→ Leave a CommentCategories: Uncategorized
Revised Schedule
December 4, 2006 · Leave a Comment
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.
→ Leave a CommentCategories: Beginner's Notebook
