Nuance Online Store

school email: rbower@apps.fluco.org

CLICK HERE to translate the site to Spanish with Google Translate

Web Design and Development

UPDATE FOR STUDENTS 2016-2017:

Unfortunately, I am not able to offer this course this school year.  For students interested in learning web design, I hope to create and post some online video lessons during the second semester.

Mr. Bower offers Introduction to Web Design and Development classes for 5th, 6th, and 7th grade.  Students will learn the basics of creating pages in HTML, creating code for text, graphics, and links, and designing fuctional web pages.

Update 12/9/13    Ironically with our Web design classes canceled this week for testing, ayone who has visited Google today may have noticed that today, Google, other tech companies, and many leaders are promoting the "hour of code."  It is gratifying to see business and political leaders recognizing the importance of learning what my students have been doing in Web Design for years!  Congratulations to my current and former web students for being ahead of the curve!

Update 10/6/13    Because of testing, 6th period will be cancelled next week.  Student are reminded that they have already gotten their study guides with the scheduled test date of Monday, Dec 16, and they have all been told that the best test prep is to practice coding using the HTML attributes on the study guide.  Students with questions should e-mail me, and I will also answer questions on Monday, Dec. when we next meet, and I am rescheduling the "Dreaded HTML Test" until Tuesday, Dec. 17.  Please be aware that the class ends on Thursday, Dec. 19.  Grades for students who are unable to complete the test because of absences will have their grades computed based on previous grades, with the final test grade counted as excused.

Update 10/15/13    It was a pleasure working with my 5th grade Web class during the first 9 weeks.  I hope that despite the many interruptions, you got a good introduction to web design that you carry forward.  I look forward to the new 6th grade class starting today.

UPDATE 10/3/13:    Students will take the "Dreaded HTML TEST" on Wednesday, Oct. 9 and Thursday Oct. 10.  The test will assess students' mastery of HTML coding.  Students will receive a print-out of a web page and then have to recreate that page in HTML.  To successfully complete it, students will have to know how to change text sizes and colors, grab graphics and add them to a page, and create working links and lists.  The best way students can study and prepare for the test is by practicing with coding together web pages.  The tags and commands students should know are on the STUDY GUIDE.  CLICK HERE to get a copy.

 UPDATE  9/17/13:    Have your student practice their HTML code at home if possible:  

A fast glance at today's HTML quiz on links showed that several students had not spent much time creating links to web pages as practice, and had not mastered the code to create those links as a result.  We are going to switch gears for the rest of the week and practice links in class, then retake the link quiz on Moday, September 23.

 

Basic HMTL page template:

 

You can copy and paste this code as a timesaver to properly start your HTML page:

<HTML>
<HEAD>
<TITLE>Web Site Title</TITLE>
</HEAD>
<BODY>
Contents of Web Site
</BODY>
</HTML>

 

 

DreamTemplate - Web Templates

 HMTL text tag library:

<H?></H?> Quick Header - Sizes 1 (largest) to 6 (smallest).
<B></B> Bold Text
<I></I> Italic Text
<U></U> Underline Text
<CENTER></CENTER> Center
<STRIKE></STRIKE> Strikeout
<SUB></SUB> Subscript - Smaller text placed below normal text
<SUP></SUP> Superscript - Smaller text placed above normal text
<FONT> Tag Attributes
COLOR="#??????" Font Color - Use Hex color codes to replace question marks
SIZE="?" Font Size: 1 (smallest) to 7 (largest)
SIZE="+/-?" Font Size change - with respect to the text preceding it
POINT-SIZE="?" Font Point Size (Netscape Navigator)
FACE="***" Font Face (or just font) eg. Arial etc.
<TT></TT> Typewriter Text
<PRE></PRE> Preformatted Text
<BLOCKQUOTE></BLOCKQUOTE> Block Quote
<EM></EM> Emphasis - Shown in italics on most browsers
<STRONG></STRONG> Strong - Shown in bold on most browsers

Basic HMTL graphics tag library:

 

Basic HMTL link tag library:

<IMG SRC="url."> Name and url of image
Tag Attributes
ALIGN="***" Image Alignment (center, right, left)
WIDTH="??" Image Width (in pixels or %)
HEIGHT="??" Image Height (in pixels or %)
ALT="text " Alternate Text (what you want it to say inside the quotes)
LOWSRC="url " Low Res Image name and url
BORDER="?" Border size in pixels
VSPACE="?" Space above and below Image (in pixels)
HSPACE="?" Space on sides of Image (in pixels)

 

AnimationFactory.com

HTML COLOR CODE CHART

 

Basic link code Library:

<A HREF="url"> your text </A> Link to another page


More Advanced:

Tables

<table></table> Creates a table

<tr></tr> Sets off each row in a table

<td></td> Sets off each cell in a row

<th></th> Sets off the table header (a normal cell with bold, centered text)

Table Attributes

<table border="1"> Sets width of border around table cells

<table cellspacing="1"> Sets amount of space between table cells

<table cellpadding="1"> Sets amount of space between a cell's border and its contents

<table width="500" or "80%"> Sets width of table, in pixels or as a percentage of document width

<tr align="left"> or <td align="left"> Sets alignment for cell(s) (left, center, or right)

<tr valign="top"> or <td valign="top"> Sets vertical alignment for cell(s) (top, middle, or bottom)

<td colspan="2"> Sets number of columns a cell should span (default=1)

<td rowspan="4"> Sets number of rows a cell should span (default=1)

<td nowrap> Prevents the lines within a cell from being broken to fit

Example of a simple 2X3 table:

Fred Smith 555-1234 Male
Jane Doe 555-9876 Female

and the code for it:

<table border="1" width="62%" id="table1">
<tr>
<td align="center">Fred Smith</td>
<td align="center">555-1234</td>
<td align="center">Male</td>
</tr>
<tr>
<td align="center">Jane Doe</td>
<td align="center">555-9876</td>
<td align="center">Female</td>
</tr>
</table>

Access Your Files Anywhere, Anytime with Just Cloud. Try it Free Today

 

 

 

Domain.com, Domain Names, Domains, Hosting  Yahoo! Small Business

Emails for Small Business with Constant Contact BigCommerce: The easiest way to sell online! Reach More Audiences with GetResponse

Related resources:

Mr. Bower reccomends iPower Website Hosting, the host for mrbower.com and his favorite webhosting company for over 10 years!

Microsoft will no longer produce Expression Web, their web design software.  They are making Expression Web 4 available for free download.  CLICK HERE to download a free copy.  Note: this is reccomended for experienced web students only.  Current students in an introductory class are likely to have difficulty with this software.

Microsoft is also making Expression Design 4 available as a free download.  CLICK HERE to downlaod a free copy.  This is reccomended for experienced students looking to work with web graphics design.  Current students in an introductory class are likely to have difficulty with this software.

Make a Free Mobile Website with DudaMobile

www.1and1.com

Web Hosting Starting from $4.95

Limited Time Only 99 Cent Domains from Register.com