Wednesday, December 12, 2012

Web Class is over. Where to from here?

Take the class again…

Date: 2/13/2013 - 3/13/2013  (Five weeks only)

In the Spring the class will be expanded to nine weeks… an additional 4 days!

 

Keep Looking for a Web Editor you like

Most software companies allow up to 30 day free trail periods for their software... Try them ALL out!

If you haven't tried Adobe's Muse… (a visual editor)  Learn More about it here

Any time you try out a new editor make sure the software knows where your Master Website folder is located… all of the programs will work better if you set up the master site first.

 

Subscribe to the latest News/blogs, Take On-Line Classes, Search the Web

The following web sites are my favorite sources of information. They offer free classes, tutorials, resources, newsletters, the latest web news... join up, book mark these web sites! Subscribe to the Newsletters… 

http://www.sitepoint.com/blogs/?source=homepage

http://www.smashingmagazine.com/

http://webdesign.about.com/gi/pages/stay.html

http://www.sitepoint.com/newsletter/

 

Lurk on Forums

An Internet forum, or message board, is an online discussion site about specific subjects or software. Members share information, and seek solutions to problems with the subject matter or specific software.
At some point you will be able to contribute to the forum by answering someones question!

http://www.sitepoint.com/forums/

http://www.coffeecup.com/forums/welcome/

http://forums.adobe.com/community/dreamweaver

You can find forums on just about any subject... just do a google search.

But, most of all, just build web pages, and… Best wishes for the New Year!

Practice, practice, practice


And should you have a question, 'holler anytime! I'm happy to help!

See you on the web!

Tuesday, December 11, 2012

Web Class Bonus

Howdy

Making your website interactive

Of all the articles the most important item is how to improve the ranking of your web sight SEO (Search Engine Optimization)

http://uofgts.com/BasicWD/SEO.html

 

I'll send you all at least one more e-mail, and if you send me a question, I'll be very happy to send you a reply.

In the mean time,

Practice, Practice, Practice!

Friday, December 07, 2012

Week 5: Finishing Layout, Contact Forms, and Widgets

Howdy

Wednesday was indeed the last scheduled class. Starting in the spring this class will be in 2 parts for a total of 9 weeks

I will send you 2 more e-mails, the next one will give tips on SEO and more…
If you have any questions at any time I'll be happy to answer your questions and help you…

CLASS #5 tip: When designing your web pages and browsing...Always ask yourself these questions: Where am I? Where have I been? Where can I go?

 Layout

Finish building your web page The Layout Tutorial  
In the week 5 folder it's "banner8.html, banner9.html and banner10.html, The above linked web page has links to all the pages. Tip! Read the source!  It's annotated with comments telling you what I did and why.

On the  banner10.html  page you'll see that the web page is centered. How it's done is in the source, you'll also find the answer at the following  links… Its all about position.

Using the Position Rules

This layout generator is easy to use, you can make web page wireframes quickly and easily

A CSS Layout Generator

Layout001


Contact!

At the bottom of the following linked page are the download links for the free CoffeeCup Form Builder Lite
The Contact Form Tutorial

More Help

Wizards that generate HTML5 and CSS3 markup that you can copy and paste into your web page Generator Resources 

From Adobe (You don't need to own any Adobe products, just signup for an Adobe account) is something called the
Widget Browser (You need to install Adobe Air on your computer to make the wizard work) You'll have access to over 60 interactive "elements" some is html/css some are java scripts… you can paste them right into your web pages

Layout002

Free Slideshows/Gallery programs

My favorite "Gallery generator" is  called Highslide. 
http://www.highslide.com  for a commercial web site the fee is $29.00
This page was generated using Highslide
This is the mobile device version

Inserting Video (Other than Adobe Widgets)

There is a lot of material here and it will save you time in the long run…

More real soon…

 

Sunday, December 02, 2012

Week4 Review, CSS, and Menus for Navigation

CLASS #4 tip: 

“Don't make it hard for your clients
to contact you" --anon

Week 4

Banners, links, and menus for navigation.


Objective:  To build a web site consisting of at least 3 web pages.

This week

  • Banner -Inserting backgrounds, images.
  • Links and Menus/navigation
    • Coming up next..
    • The Position Rules
      • Making Layouts
    • Contact Forms!

Resources for this week -- go to these URL's

The Banner Tutorial -images & backgrounds and html5

The following linked web pages show you how to construct a banner/header for your web pages. If you can build a banner/header you can assemble the rest of your web page!!
The Banner Tutorials

Make Your Own Menus

Making your own Navigation menus can be time consuming. There is a lot of help available on the web. 

All About Links The Menu Tutorials
In class we used Ian Lloyd's world famous List-o-matic menu generator to make our menus for navigation
List-o-matic

The linked web page shows you how to insert a horizontal or a vertical menu bar.

Garry's Menu insertion example  (Look at the source FOR THE COMMENTS I ADDED!)

Layout
Using the Position Rules
Making layouts

Homework

  1. Generate a menu, and insert on your web page
  2. Finish the layout of your "home" (index.html) web page (Try the menus in the above menu insertion example for clues!
  3. Duplicate your index.html web page 3 times… and re-name them Contact.html, About.html, and Product.html

Tuesday, November 20, 2012

Week 3 Review --Working with CSS

 

The Box Model! Div's and CSS

Subjects

  1. The Box Model
  2. Div's
  3. CSS, some simple rules

CLASS #3 Notes: 

“People don't read web pages, they scan them!" --anon

Tip of the Day

When you are going to insert a new element, or "widget" you are not familiar with, try it out first on a simple blank xhtml/html5 page.

Resources for this week -- go to these URL's

The Box Model
http://uofgts.com/BasicWD/BoxModel.html

Basic CSS Rules
http://uofgts.com/BasicWD/CSSRules.html

Homework

Style your web page. Use the following web page links to build your banner/header for you web site…

Build your Banner in Coffeecup, then try editing it in Blue Griffon… The free WYSIWYG editor

 

On-Line and desktop References for html and CSS

The following is one of the best on-line HTML and CSS resource anywhere!

CSS at Sitepoint.com

HTML at Sitepoint.com

Sitepoint also offers a "plug-in called Code Burner, it's a quick interface that resides on your desktop or in your FireFox Browser. It is linked to the sitepoint on-line references for CSS and HTML. Check out Code Burner!

Graphically Challenged?

The Cool Text web site will help you design a logo. The Cool Text Wizard

 

Enjoy your Thanks giving… we'll see you in class next week!

Thursday, November 08, 2012

Week2 Review --Create a Website Class

Class Objective

To build a web site consisting of at least 3 interactive web pages.

This weeks Goal

  • --Add content and format  with xhtml
  • --Adding images to a web page

The xhtml rules

Before you can add html elements to a web page you need to know the rules!

http://uofgts.com/BasicWD/xhtml.html

Oh no, more rules! A few more things you need to know!
TYNTK

Add your content for your web page using the Web Editor of your Choice

Use this blank html5 page 

Basic Blank HTML5 Page 

When this above page loads in the browser, view the source, and copy it.

Paste it into a blank page in your web editor.

Then add your content in the order you want to see it displayed on the page

How? The following web page is a tutorial on how to add content and format it.

Just follow the steps and instructions. Got a question, send me an e-mail!

Building a Web Page-- How to add and format the content

(You will find the above web page in the class folder named week2… )

If you didn't attend the class, when the above page loads in the browser use the view source menu to copy the page and paste it into a blank page in your web editor.

HomeWork

after you do the above tutorial work on the following

1. Insert your content into an html5 wireframe
html5-3col.html

or
html5-2colindex.html

Those two files are already in your master folder!

2. Play with Sumo Paint and Make an image or graphic or logo

AND add it to your web page content!

An Image editor for everyone… SumoPaint

A free online paint program 

3. How to Insert an image on a web page

How to Insert an Image

 

Most of all have fun!

Monday, November 05, 2012

Uploading and Downloading files to and from your Host

Local remote copy

 

1. Using FTP Programs

On the class disk you'll find an FTP Program (File Transfer Protocol). It's a utility program that is designed to upload/download web assets. It's Called Filezilla, and it's FREE (Open Source)

You can download FileZilla from here… FileZilla

You can find instructions on how to use FileZilla at this URL http://uofgts.com/BasicWD/lesson04.html

You can also find a FileZilla tutorial here… http://wiki.filezilla-project.org/FileZilla_Client_Tutorial_(en) 

2. Site Managers

Most web editors have ftp programs built in to Manage web site files… However the free CoffeeCup Editor does not have the capability to do ftp. That capability is reserved for the commercial version of Coffee Cup.

Bring your questions to class.

Tuesday, October 30, 2012

A Reminder and some homework

Just a reminder that there will be NO CLASS this Wednesday, October 31, 2012

Home work? !

Visit this website The Zen Garden http://www.csszengarden.com

The author is Dave Shea, a web designer from Vancouver, Canada. 

He issued a challenge… use the SAME content as found at the above link http://www.csszengarden.com 

But, make your own design

This link takes you to a gallery of the results… http://www.mezzoblue.com/zengarden/alldesigns/

Enjoy and have a "happy" halloween" and a productive week writing out the content for YOUR website!

Creepy Trees

Friday, October 26, 2012

Welcome to How to Create A Website

Web Browsers (Test Early, Test Often)

Turns out Apple Dropped support for the Window's version of Safari.  There is a version available, but it was last updated in July of 2012… 

If you have a PC, to test your web page to see what it looks like on an Apple Computer using Safari, you can use a Web Site testing service at Sauce Labs https://saucelabs.com

This link takes you to a list of Web Browser publishers Download browsers! Do Install them (Except for Window's Safari)!
  1. The Web Editors

    If you already have a Web Editor, by all means, use it! The following is a link to a web page that discusses the various kinds of web editors and give you some choices. The goal here is to find a web editor that you like, and that will help you build your web site. The Web Editors

    We'll start of using the HTML editors from Coffee Cup so you can get familiar with how html editors work..  You can always download and use these editors for free for 30 days or so…

    Windows:  Coffeecup HTML Editor

    Mac:  CoffeeCup HTML Editor

    Homework:  

    Write out Content and or ideas you want to see on your web pages…

    You can start off with a pencil and paper!… Then write it out in a text editor. 

    Go a head and install one of the above html editors and try using it to write out your content…

    Save the file as a .txt file and put it in your master website folder. We'll use it in class…

     Most of all have fun! Get stuck, send an e-mail…

    Navigation Links for what was discussed in class

    • Week 1 (That's this page on my web site at the bottom of the page you'll see an RSS News feed that displays links to the last 5 articles on the class website blog)
    • Home   (Class Portal page)
    • Lesson 1 (Interesting stuff)
    • Domains and Hosts
    • Resources 
    • Contact

    Some Vocabulary 

    URL ---Uniform Resource Locator
    HTML & CSS
    --- HTML, Hyper Text Markup Language, creates the headings, paragraphs and other content for  a web page.
    --- CSS, Cascading Style Sheets, Creates the Styling for a web page.
    Provider
    --- Physically links your computer to the Internet.
    Host
    --- Provides the Computers (servers) to store and host your web site on the internet.
    Domain Name (Server) (DNS)
    --- makes a recognizable name for the actual numerical Internet address.
    Got a question? Send me an e-mail

Wednesday, June 13, 2012

Web Classes are over! Where to from here?

Keep Looking for a Web Editor you like

Most software companies allow up to 30 day free trail periods for their software... Try them out!

If you haven't tried Adobe's Muse… (a visual editor)  Learn More about it here

Any time you try out a new editor make sure the software knows where your Master Website folder is located… all of the programs will work better if you set up the master site first.

 

Subscribe to the latest News/blogs, Take On-Line Classes

The following web sites are my favorite sources of information. They offer free classes, tutorials, resources, newsletters, the latest web news... join up, book mark these web sites! Subscribe to the Newsletters...

http://www.sitepoint.com/blogs/?source=homepage

http://www.smashingmagazine.com/

http://webdesign.about.com/gi/pages/stay.html

http://www.sitepoint.com/newsletter/

 

Lurk on Forums

An Internet forum, or message board, is an online discussion site about specific subjects or software. Members share information, and seek solutions to problems with the subject matter or specific software.
At some point you will be able to contribute to the forum by answering someones question!

http://www.sitepoint.com/forums/

http://www.coffeecup.com/forums/welcome/

http://forums.adobe.com/community/dreamweaver

You can find forums on just about any subject... just do a google search.

But, most of all, just build web sites, and...

Practice, practice, practice


And should you have a question, 'holler anytime!

See you on the web!

Friday, June 08, 2012

Final Class - How to Make a Website interactive

Howdy

Here's the link to what I demonstrated and talked about in class...

The links are "fixed"!  But, if you happen to find one that doesn't work… let me know!

Making your website interactive

I'll send you all at least one more e-mail, and if you send me a question, I'll be very happy to send you a reply.

In the mean time,

Practice, Practice, Practice!

Friday, June 01, 2012

Week 4 - Review and Homework

Building a banner, positioning content, and menus 

Layout Review

Using the Position Rules
Making layouts

The Banner Tutorial -images & backgrounds

This tutorial uses Xhtml strict a good exercise would be for you to convert it to html5
The Banner Tutorials

For WYSIWYG users -- use an existing wireframe? Start here...

Homework

  1. Finish building the layout/wire frame of your "home" (index.html) web page
  2. Use this layout generator---  CSS Layout Generator it can make equal height columns regardless of content… This is an example…URL is http://uofgts.com/BasicWD/layout/index.html
  1. Add YOUR content for the JUST the header (banner)
  2. Make Your Own Menus use the The Menu Tutorials (There are cut and paste examples)
  3. Or use The List-o-matic menu generator List-o-matic
  4. Don't like List-o-matic Try this generator try Pure CSS Generator
  5. Make menus for Home, Contact, About and Products
  6. Insert the menus on your web page
  7. Now duplicate your index.html page 4 times, rename 3 of them: about.html, contact.html and products.html
  8. Congratulations, you now have the beginnings of a web site!

You can use Wizards and Widgets to embellish your web site!
Web Tools, Wizards and Widgets

 

On-Line and desktop References for html and CSS

CSS at Sitepoint.com

HTML at Sitepoint.com

Sitepoint also offers a "plug-in called Code Burner, it's a quick interface that resides on your desktop or in your FireFox Browser. It is linked to the Sitepoint on-line references for CSS and HTML. Check out Code Burner!

Graphically Challenged?

The Cool Text web site will help you design a logo. The Cool Text Wizard

 

Gota question? 'Holler

Thursday, May 31, 2012

Web Design - Font Relief

Adding More Fonts to your web pages

You can never have enough fonts! --Anon

There are several ways to add more fonts to your web page...One is to use a font you already have, and hope that the "client"  visiting your web page also has that same font. Another is to use Fonts that are in the public domain and are "free" to use on your web page.  Yet another alternative is to use "free" fonts or purchase them from a font foundry for web use.

Common Fonts

1. Code Style did a Windows-Mac-Linux font survey and lists the most common fonts across those platforms.

This web page at Code Style lists the most Common Fonts. If you visit the web site you'll find they list "common" font stacks to use for your web pages.

Copy the font stacks into your snippet library for later use...

Now all you have to do is hope your client has the fonts listed in your font stack on their computer.

font-family: Zapf Chancery, Brush Script MT, cursive; 

Public Domain - Free Fonts

2. The best place to start is with Google's Font Directory

In 2010 when Google first started this project they only listed 23 fonts… They now list 501 font-families! Google provides you with the Markup that you'll need to snip and paste to embed into your web pages.  Google is working with Type Kit to make some of the fonts available.

You don't get to "download" the fonts... Instead  you paste a script (the embedded markup) that goes out and gets the font from Googles servers so that your client's browser can display 'em...

 

Screen shot 2010-10-18 at 12.13.09 AM.jpg

 

Professional Fonts

2. Buy the fonts from a font foundry.  TypeKit offers a service that links you up with font foundries and the fonts of course...

TypeKit also offers "free" fonts for your use... You can use the Free service to try it out...

You'll have to sign up for an account, but the result may be "Font Relief!"

 

Screen shot 2010-10-18 at 12.35.01 AM.jpg

 

 

 

Mystery of the Dead Banner

Yah, it was one of those days, no it wasn't dark, dreary and stormy. Not a chance, it was time for Web Class and out side it was even partially sunny with a slight evening breeze.

We we're learning how to divide, section, slice-up  --layout a web page. Instead of using the old xhtml style of using well named div's we were implementing features from the new kid on the block, html5.

In html5 it's a really good idea to contain or wrap ALL the sections of the layout with a <div> element. This changes the relationship of the pages sections from being related directly to the <body> of the page. The sections will now be the "child" of the containing wrapper <div>. That way we can move the entire layout by simply centering the wrapper div, or making the entire layout fluid so it always fills the page 100% no matter the size of the browser window.

So, to begin, our markup looked like this… We gave the wrapper a specific size and background color so we could actually see it on the page… we also decided the layout would be fixed and centered in the browser's screen.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Very Basic HTML5 Web Page</title>
<style type="text/css" media="screen">
html, body, div, header, footer, aside, nav, article, section, { margin: 0; padding: 0; }
header, footer, aside, nav, article, section { display: block; }

#wrapper {width: 960px;
height: 768px;
background-color: #ddd;
margin: 0 auto;
banner {width: 960px;
height: 160px;
background-color: yellow; }

</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>

<body>
<div id="wrapper">

</div> <!-- Comment:   closing div for the wrapper --> 

</body>

</html>

 But, you'll notice a very interesting declaration in the embedded styles 

header, footer, aside, nav, article, section { display: block; }

and, this where we found the dead banner!  Let me explain.

The first "thing" that appears on a web page, I like to call the "banner" in xhtml that's what I name the id for that part of the page, <div  id = "banner">!  

In html5 there are very specific, well defined names for dividing up a web page.  Google searched and analyzed 3 Billion web pages to find common id names for web page divisions, and later the html5 consortium searched and anaylsed 3 Million web pages… and, the common division names are: header, nav and footer.

Somewhere, a long time ago, in the mists of the past I had read that you could, if you wanted to, you could use any name for a division of an html5 web page and long as you declared it, and told the browsers to make it display like a block element… So as an <aside> (to me, anyway) using <banner> instead of <header>, is much less confusing, since in html5, headings and <head> also exist.

Even possibly more confusing is the fact that in html5 a <header> is defined to contain heading elements, namely <h1> and even <h2>, <h3>, etc., Also, if necessary, there can be more than one <header> on a single page! Maybe confusing for humans, not so for computers.

So, I went a head and added <banner> to the above declarations, and added some styles to the <banner> 

The page markup now looked like this… but when displayed in a browser, the <banner> was no where to be seen, not at all visible, it was dead….  Try it and see for yourself (just cut and paste)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Very Basic HTML5 Web Page</title>
<style type="text/css" media="screen">
html, body, div, banner, header, footer, aside, nav, article, section, { margin: 0; padding: 0; }
banner, header, footer, aside, nav, article, section { display: block; }

#wrapper {width: 960px;
height: 768px;
background-color: #ddd;
margin: 0 auto;
banner {width: 960px;
height: 160px;
background-color: yellow; }

banner { width: 960px;
              height:150px;
back-ground-color: yellow;}

</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>

<body>
<div id="wrapper">

<banner>

<h1>An h1 heading for our web page</h1>
<h2>A slug line for our banner</h2> 

</banner>

</div> <!-- Comment:   closing div for the wrapper --> 

</body>

</html>

As, you can see the <banner> , does not show up in a browser, it's gone, missing, it's dead!

In html5 the parts or divisions of the layout on a web page are well defined. Html5 uses a very precise language called semantics to describe the various parts of the layout.

Semantics, definition: the meaning, or an interpretation of the meaning of a word… 

One of the reasons for using well defined words is so that a computer (not humans?) can find a "section," an  "article" or the "header" on any web page easily and quickly…

The well defined words for html5 layout are:  header, footer, aside, nav, article, section

In our markup above, if you replace <banner> with <header> The header for our web page will display in all browsers just fine.

It was Sematics that killed the <banner>!
Using html5's well defined words, well,  puts us all on the same page...

To learn more about the sematics for header, footer, aside, nav, article, and section read this document. (It's also on your class disk.)

There are many articles written about the html5 semantics, just do a Google search using the phrase
html5 semantics

Today the sun is shinning on our web pages, even though it's raining outside, again, in dreary Vancouver, WA

Friday, May 25, 2012

Web Class --The Layout Jumpstart

The easiest and best way to setup a website is with well designed layout, a wireframe that let's you plug-in YOUR content whether you are editing with an html editor or a WYSIWYG web editor.
Preview
Preview
The Free Coffee Cup Html Editor offers some free html5 layouts. They are the best I have found to date and, there is no reason why you can't use those layouts in other editors...

Remember, one of our criteria is that our web pages support html5...

You can open these in the Free Coffee Cup Editor with the menu item:
ThemeLayouts
File > New from Theme/Layout

You can use these html5 layouts in any web editor including Blue Griffon.

If the layout isn't what you want, perhaps you need to have your navigation/menus horizontal. You can use Blue Griffon to generate your layout...



Step one (Blue Griffon):


In Blue Griffon you should first set the following in preferences
Prefs styles
Menu:
Mac: Blue Griffon > Preferences
PC : Tools > Preferences




Step 2 Blue Griffon:

File > New wizard
First panel Choose xhtml5
Next panel (Continue to General document properties)
Fill out Title, Author, Description (what your web page is about  in a  paragraph) Key words (separated by a comma),  Language (American English), Characterset: Unicode (UTF-8) (continue to Colors and Background)
Leave alone (click Continue)
Document Background (Leave alone, Click Continue)
And here we are At Page Layouts
Page Layouts



















You'll need to experiment a bit to get what you want,
The results The set up at the left yields a page that looks like this...










There are other layout generators… (all on line wizards) These are the best… give them a try! You'll like one of them!

 Turns out Blue Griffon uses a simpler version of the YUI Development module (Yahoo User Interface) More control here!
A more robust layout generator can be had  at CSS Creator
And, here's another one called CSS Layout Generator
All of these will work in any web editor. Amazing what neat tools you can find on the internet!
Have fun filling in your content and building your home index web page!
Have a really nice long week end!

Thursday, May 24, 2012

Week 3 --Web Class

 


CLASS #3 Notes:
“People don't read web pages,
they scan them!" --anon

The Box Model! Div's and CSS and HTML5

Subjects

  1. The <a> </a> element
  2. The Box Model
  3. Div's
  4. CSS, some simple rules
  5. Layout

Tip of the Day
When you are going to insert a new element, or "widget" you are not familiar with, try it out first on a simple blank xhtml/html5 page.

This week

  • How to use the <div></div> element. The Box Model
  • CSS Styling Rules 

Resources

Links
http://uofgts.com/BasicWD/links.html 

The Box Model
http://uofgts.com/BasicWD/BoxModel.html

Basic CSS Rules
http://uofgts.com/BasicWD/CSSRules.html

How to add Color
http://uofgts.com/BasicWD/lesson02.html 

Some On-Line and desktop References for html and CSS

CSS at Sitepoint.com

HTML at Sitepoint.com

Sitepoint also offers a "plug-in called Code Burner, it's a quick interface that resides on your desktop or in your FireFox Browser. It is linked to the sitepoint on-line references for CSS and HTML. Check out Code Burner!

Graphically Challenged? Need a Logo?

The Cool Text web site will help you design a logo. The Cool Text Wizard

Homework
Install and try out Blue Griffon (a free WYSIWYG Web Editor)

Next e-mail/blog --- how to use Blue Griffon to layout a web page...

 

 

 

Friday, May 18, 2012

Web Class -- Week 2, Your Very First Web Page

Week 2 

CLASS #2 Notes:
“If you really want to know if your
Web site works, ask your next
door neighbor to try using it, while
you watch.
(You bring the beer.)”
http://www.sensible.com/

Content and xhtml

Subjects

  1. Adding Content to a basic Web Page
  2. xhtml - some rules
  3. (x)html elements - defined
  4. Formatting your content
  5. The <img /> element
    • Image editing
    • Inserting a graphic on a web page

Objective This week

  • --Adding Content and formatting content with xhtml
  • Working with images

Resources for this week -- The Links

The xhtml rules
http://uofgts.com/BasicWD/xhtml.html

Oh no, more rules! Things you need to know!
TYNTK

At the very least this week

Go through this xhtml tutorial...

The Building Blocks of a Web Page

You should be able to Format your content
Using the Web Editor of your Choice 

and the basic elements
start with this very Basic html5  Blank Page

(It's in your class Master website folder)

or you can get it here

http://uofgts.com/BasicWD/Basicxhtmlpage5.html

 After you have gone through the tutorial you can use one of these wire "frame" templates to insert your content...

html5-3col.html, html5-2colindex.html

In your class master web site folder there are a few others wire frames...

Play with Sumo Paint

SumoPaint If you know a little Photoshop, you'll know how to use this free on-line paint program.
Use it to add an image or graphic or logo to your content!

Here's a More detailed tutorial on how to insert an image on a page using <img>
Inserting Images

 

What we will look at next week...

Some vocabulary 

.php
- Personal Home Page is actually a server side scripting language
An xhtml element
is made up of an opening tag like <h1> and a closing tag </h1>.
Depreciation
- deprecation is applied to software features that are superseded and should be avoided. Deprecation may indicate that the feature will be removed in the future. Features are deprecated—rather than being removed.
http
- hyper text transfer protocol.
ftp
- file transfer protocol
XHTML
– The Extensible Hypertext Markup Language.
a markup language that has the same depth of expression as HTML but also conforms to XML syntax.
The intersection of HTML and XML a reformulation of HTML in XML.

 Got a question?  'holler… 

Thursday, May 17, 2012

Partial and Annular Solar Eclipse

Howdy

Here's the details  Data from  http://www.timeanddate.com/eclipse/in/usa/vancouver

Partial Solar Eclipse from Vancouver, WAEclipse


Partial eclipse begins May 20 at 5:04 PM 263° 35.4° above horizon
Maximum Eclipse May 20 at 6:21 PM 277° 22.1° above horizon
Partial Eclipse ends May 20 at 7:29 PM 288° 10.5° above horizon 
Times are local for Vancouver (PDT - Pacific Daylight Time).



Annular Solar Eclipse

Between Medford and Redding CA

Maximum for about 5 minutes in the center of the path
Time for Redding Annular
Maximum Eclipse May 20 at 6:29 PM 280° 19.7° above the horizon

 

Also Annular in Brookings, OR  to Eureka, CA

The Google Map is interactive and will give times (UT) for any location in the path

 Click the Map (it's pretty and neat!)

GoogleMap

 

 

 

Remember DO NOT LOOK DIRECTLY AT THE SUN!

Wednesday, May 09, 2012

Welcome to How To Build a Website!

Our Objective

  • To build a web site consisting of at least 3 web pages.
  • Acquire a domain name
  • Sign up with a HOST

How?

Discussion
Domain Names and registration
Signing up with a host

Domains and Hosts

What's the most important "THING" on a web page? What are the main parts of a web page?

Can you List them?

Write THEN CHECK OUT THIS LIST...

How do you put a web page together?

  1. The Content First
    • Create it with a text editor
    • Later we will mark it up with xhtml/html5 in your web editor
  2. The Layout
    • Will be Created with CSS3 in your web editor
  3. The Style
    • Will be Created with CSS3 in your web editor

Web Page Creation: The Preparation

You'll need 2 folders on YOUR flash drive and/or Home computer

  1. Make a "Master" website folder
      1. Name it with "Your name" something like "Garry-MasterWebsite"
        1. This folder only contains the files that makes your website work.
      2. And Make A "Webstuff" folder.
        1. This folder will contain the parts you collect to make your website...
          1. Things like, IDEAS, Text files, widgets, lists of links, graphics, pictures, videos... etc...

    Web browsers

    Here's a list that links you to web browser publishing sites Download all the browsers! Install them!

    The Web Editors

    If you already have a Web Editor, by all means, use it! The following is a link to a web page that discusses the various kinds of web editors and give you some choices. The goal here is to find a web editor that you like, and that will help you build your web site. The Web Editors

    Homework:  Write the most important part of your web pages

    The Content
    Always write the content first as plain text with no formatting.

    You'll find some ideas at this web page that will help you "layout" your web page. Lesson 1: Penciling it out!

     

    Most of all have fun! Get stuck, send an e-mail…

    Navigation Links

    • Week 1 (That's this page on my web site at the bottom of the page you'll see an RSS News feed that displays links to the last 5 articles on the class website blog)
    • Home   (Class Portal page)
    • Lesson 1 (Interesting stuff)
    • Domains and Hosts Resources 
    • Contact

    Vocabulary 

    URL
    ---Uniform Resource Locator
    HTML & CSS
    --- HTML, Hyper Text Markup Language, creates the content of a web page.
    --- CSS, Cascading Style Sheets, Creates the Styling for a web page.
    Provider
    --- Physically links your computer to the Internet.
    Host
    --- Provides the Computers (servers) to store and host your web site on the internet.
    Domain Name (Server) (DNS)
    --- makes a recognizable name for the actual numerical Internet address.
    Got a question? 'Holler!