Really Easy HTML5 Video

Howdy

Couldn't resist telling you about this free program.

It makes placing video on your web pages, well really easy! And, it's free, EasyHTML5video! There is a paid version that produces the video watermarked with your URL or not.

 

 

What makes it real easy to use is that it encodes all the different video formats you need for each html 5 capable browser as each browser has its own built in video player!

One thing to watch for, this program puts an extension on the Firefox compatable video that gave my Mac and Firefox a problem (the video would play locally, but when I uploaded it, it wouldn't play in Firefox)

It's easily fixed. Just rename the video with the .ovg extension to .ogg  and in the generated html5 markup change the .ovg extension to .ogg (There will only be one occurrence of .ovg to change)

Here's an example video on my curling clubs web page using this program by http://easyhtml5video.com/

If you use the different browsers, Safari, iPhone, smart phone, Firefox, Chrome or Internet Explorer you'll see the different players used by each of the browsers.

Enjoy!!!!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Week 5 Review ---MailTo: Contact Forms

Week 5 Outline

 

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

 

Contact forms, widgets and where to from here?

Subjects

1. Adding to the 1 trillion web pages
2. Contact Forms!
   • Site Search Engines
3. html5/CSS3
4. Widgets
5. What do I do now?

Objective

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

This week

• Contact Forms!
• html5 and css3
• The Adobe Widget Browser
• Other widgets
• Resources

How! Web Page Creation Preparation for Week 5

A Tip:
When you are working on something new to insert in your web page, try it out first on a blank basic web page, like BasicCSSpage.html or Basichtmlpage.html in your Class Master folder!

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

Contact!
The Contact Form Tutorial

Google Search Engine
Google Search Wizard

HTML5 and CSS3
Class Resource

AIDS To Help You Build Your Web Site

Adobe (You don't need to own any Adobe products)
Widget Browser (You'll need to install Adobe Air first)

Free Slideshows (other than Adobe Widgets)

• Visual Light Box
• Visual Slide Show
• Wow Slider

Inserting Video (Other than Adobe Widgets)

• Easiest way ---Embed YouTube Code
• Video Light Box Wizard
• The right way --Using HTML5 Video insert

Homework! And, what do I do now?

1. Copy the Huggins Contact form and edit it to work on your web page
   1. If your web host provides either a "Mailto: Form" script or a cgi email script you may use that instead.
2. Test your web Site
3. Maintain your web site (keep it up to date!)
4. Subscribe to the Sitepoint.com's newsletters
5. Subscribe to Ask's, Jennifer Kyrnin's newsletters
6. There is no try, Do! Practice, practice, practice
7. Take more classes

 

Navigation Here

• Week 5
• Home

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

Got A Question? 'Holler!

Have a great Thanks Giving...

 

Drop Caps --Add some flair to your web pages

The web page below is located here

Pull Quotes --Try This!

 

Want to know how?

Go to this web page Read the source, load it into your web editor... and have fun!

Border TRouBLe, a CSS shorthand tip!

TRouBLe is a mnemonic, a learning aid... for CSS values for border, padding and margins

Instead of writing:

• border-top-width: 2px;
• border-right-width: 3px;
• border-bottom-width:4px;
• border-left-width:3px;

 

 

 

 

You can just write border-width: 2px 4px 6px 8px;

The order is Top, Right, Bottom, Left easily remembered with the word TRouBLe!

Also if you don't want the right side to have a  value at all, instead of writing 0px, don't add the unit, just write 0

For example:

border-width: 2px 0 6px 8px;

 

Week 4 -Outline and Resources

Week 4 Outline

 

CLASS #4 Notes:
“Don't make it hard for your clients
to contact you" --anon

 

Building a banner, positioning content, menu layout and contact forms.

Subjects

1. Banner -Inserting backgrounds, images.
2. TRouBLe --Position Rules
3. Menus/navigation
4. Layout
5. Contact Forms! (Next week)

Objective

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

This week

• Banner -Inserting backgrounds, images.
• Menus/navigation
• Layout TRouBLe --Using the Position Rules

How! Web Page Creation Preparation for Week 4

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

The Banner Tutorial -images & backgrounds and html5
The Banner Tutorials

Generating Menus
The Menu Tutorials
The List-o-matic menu generator
List-o-matic

Layout
Using the Position Rules
Try some simple layouts

Homework

1. Generate a menu, and insert on your web page
2. Finish the layout of your "home" (index.html) web page
3. Duplicate your index.html web page 3 times... and re-name them Contact.html, About.html, Product.html
4. Read all about Contact e-mails and Contact Forms!
   The Contact Form Tutorial

Navigation Here

• Week 4
• Home

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

WYSIWYG --Visual Web Editors

Is there a way to edit a web page directly without using an html text editor? Is there a way to design a web page visually?

The answer is, YES! Sometimes a visual editor is real handy to have  around!

If you have purchased the Coffee Cup HTML Editor, you'll discover that it comes with a visual editor. You might not notice it as it might be "turned off!"  I found this "Faq" on the Coffee Cup web site.

Visual Editor Tab not displaying at all.

Solution: With the update to the latest version of the HTML Editor, the Visual Editor has been turned off by default. We did this to provide the best possible user experience. But don't fret — this is an easy issue to fix. To re-enable the Visual Editor, launch the Editor and go to the Tools > Preferences > General tab. Once there, uncheck the Hide Visual tab option...

 

When you click on the Visual Editor Tab you can edit directly on the web page.

Insert HTML elements just like using a word processor...

Give it a try!

Coffee Cup has another Wed Editor that could be better described as a web designer.  It's called Visual Site Designer.

If you are visually oriented this might be a great editor for you.  You can download a free trial from Coffee Cup's web site

 

If you have a Mac (or a PC) you can try the Open Source program Kompozer (It's Free)

Click the link below to start the Download and give it a try.! Load a web page and start adding your content directly on the web page!

• kompozer-0.8b3.en-US.win32.exe (Windows™ installer)
• kompozer-0.8b3.en-US.mac-universal.dmg (Mac OS X™)

 

 

There is other software, noteablely Adobe's  Dreamweaver, but this class is not about web editors, it's about  creating a web site!

Web Editors are our tools of the trade!

Got a question,? 'Holler!

 

 

Week 3 Review -The Box Model and Basic CSS

Week 3 Outline

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

 

The Box Model. Div's and CSS

Subjects

1. The Box Model
2. Div's
3. CSS, some simple rules
4. How to Make a Banner/Header

---

 

Objective

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

This week

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

---

How! Web Page Creation Preparation for Week 3

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

Work through the Banner Tutorials

---

Navigation Here

• Week 3
• Home
• The Box Model
• Basic CSS Rules
• The Banner, Parts 1 - 7

 

---

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

Week 2: Check List and Homework

Howdy

Where we are at, a check list:

Week 1

1. Your web editing environment should be setup. 
   1. For this class the Master Web Site Folder should be on your Thumb Drive
2. Downloaded and installed your web editor of choice
   1. It is important that your web editor, when it opens can access the files in your Web Site Master Folder.
   2. Otherwise your web site just won't work!
   3. Your web editor knows how  to link to your Web Site Server (if you don't have one yet, that's okay)
3. Downloaded and installed at least 3 web browsers

You can access all the information you need to achieve above from the web page for Week 1: Getting Started

The result is that when you come to class you can startup Coffee Cup or Dreamweaver, or the editor of choice on your laptop and be ready to work.

 

Week 2

You should now be able to:

1. Load a web page located in your Master Folder to edit in your html editor.
2. Insert between <body> and </body>  using your web page html editor your content as text  and image(s)
3. You should be able to format the inserted material as html elements. Especially:
   1. Headings
   2. paragraphs
   3. lists

You can access all the information you need from the web page Week 2: Content and xhtml

Other Homework

On the CLASS CD is a .pdf file called textbook-short version.pdf read up to Splitting Up the Page on page 42.

If you have the book, Build Your Own Web Site The Right Way by Ian Lloyd,  read up to page 59

You can download the first 4 chapters of the book from Sitepoint.com for free. It's a really good book.

I'd also like you to just read about "links" on the class web site Links: It's what makes the Internet Work!

 

Next: Is there an "other" way to edit make web pages?

 

 

 

 

 

 

 

 

 

Create a Web site - Weeks 2 outline

Week 2 Outline

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

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

This week

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

How! Web Page Creation Preparation for Week 2

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

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

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

A VERY basic xhtml web page
The Basic Web Page

SumoPaint SumoPaint

Homework:

An xhtml tutorial
The Building Blocks of a Web Page

Format your content
Using the Web Editor of your Choice
Either start with a Basic Blank Page
BasicCSSpage.html, Basic-xHTML-page.html

Or Choose one of these layouts.

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

Basic-layout.html

Play with Sumo Paint

SumoPaint
add an image or graphic or logo to your content!

An image tutorial
Inserting Images

Navigation Here

• Week 2 (this link is this page rendered in html5)
• Home
• xhtml rules
• Oh No, More Rules!
• Lesson 2 (color)
• Inserting Images
• xhtml Cheatsheet
• Links, key to the web

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.

 

Create A Web Site. What you need to do first review.

Howdy

Rule #1 Test early, test often.

I hope you all enjoyed the first Create A Web Site Class and you are looking forward to next weeks class as we are going to make a web page!

Yes, I know, in the mean time... there is a lot of busy work... it'll get better, I promise!

Setup
The first thing you need to do is finish setting up your "work" environment. 

1. You need to install on your computer several web browsers, so you can follow Rule #1
"Test early, test often"

Setting up our work environment on your computer.
Install at least 3 browsers, Internet Explorer, Firefox and Chrome (You might also consider Safari and Opera)
If you have a Mac--- there is NO Internet Explorer for a Mac!

So, how do you test your web pages for IE? 
For now you can use Adobe's Browser labs... (you don't need to own any Adobe Software!)

After April 12, 2012 Adobe Browser Labs  will be a subscription service.

https://browserlab.adobe.com/en-us/index.html

2. Install your editor

Install CoffeeCups Free HTML Editor, you can download it from CoffeeCup's Website

Or install the web Editor of your choice.

I ENCOURAGE you to experiment and try different web editors, so if you have a preferred Web Editor, by all means use it!

You might find this article interesting, I wrote it a while back

http://stasiuk.blogspot.com/2008/10/web-page-editing-nirvana.html

Step 2:
Setting up your Master "Local" website

From the Class CD Copy the YourWeb-Site Folder to a Flash Drive (USB Stick Drive) so you can work on your site at school or at home or at work!


Also maker an "empty" Website-Parts" folder on your flash drive.
(After you are done with class you can copy the folders  to where ever you want on your computer.

Step 3:
Sit down and write out what you think you want on YOUR home Web Page --The Content.
You can use pencil and paper, Word, or the Web Editor of you choice like coffee cup.

Don't worry about Xhtml or CSS, we'll do the formatting in class.

Save your "content" information and bring it to class...

remember, its the most important information on YOUR web page... the content!

We'll make our first web page in class Wednesday!

Resources

Read the online Lesson 1 for help in figuring out your content.

I highly recommend the following book
Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition by Ian Lloyd Edition: ISBN: 978-0-9804552-7-4 Published: December 2008

(It's now in it's 3rd edition.)

If you have the book, Read Chapter 1 and Chapter 2 through to the end of page 47ish

If you don't have the book, On the Class CD disk in the folder "Articles" read The BeginnersGuide.pdf, it is a terrific synopsis of the above Ian Lloyd's book, of all things written by Ian Lloyd!

You can also down load the sample pdf for the book at  sitepoint.com. The Sample download has at least the complete chapters 1 and 2!

Have fun!
If you have any questions 'holler
but, I think a post (comment) here works much better

Got a question, Post a comment or send me an e-mail

Coffee Cup Video Tutorials no longer exist!

Thanks to Garland Holt for informing me that the Coffee Cup Setup video no longer exists!

Darn!

I contacted the folks at Coffee Cup and here's the response

 

Hi Garry

Our traffic to the videos was so low we decided it just was not worth the effort to continue. It just became more work then it was worth.

On a plus side, we have a great many tutorials on our website at

http://www.coffeecup.com/help that will answer anything and everything about our software. 

~_~_~_~_~_~_~_~_~_~_~_~_~_~_~_~
Scott A. Swedorski - VP of Product Development
CoffeeCup Software Inc.
Phone: 678.495.3480Hi Garry

 

 

Garland stated in his e-mail that there are lots of Coffee Cup users that have made videos on how to use the software. Here's the link

Garland sent http://youtu.be/A8qCy3o7hso it's by instructor Teresa Pelkie at Palomar College. There are other videos too!

Perhaps you can view the videos and let us know which ones you like the most.

This link will take you to the step-by-step instructions for setting up your Master website

http://www.coffeecup.com/help/articles/working-with-website-projects/#creating

 

at this link you can explore all the tutorials that Coffee Cup has posted

http://www.coffeecup.com/help/articles/

Got a question, comment or send that e-mail!

 

 

 

Setting up your Mac

Howdy

The Mac folks want you to place your  master "website"  in a folder called Sites. It's a shared folder located in your home folder

Yourmacusername > Sites

If you have an index file in the Sites folder you'll see it In your browser if you type

http://127.0.0.1/~yourmacusername/index.html

(127.0.0.1 is the same as the phrase "localhost") so you can also type

http://localhost/~yourmacusername/index.html

You'll see your index.html page in the browser

This works as the Mac comes with server software built-in, it's called Apache.

If you need to run PHP and a SQL database, there is a different configuration... For now the above works! But, if you need help setting up PHP and SQL let me know...

On my Mac I use a program called Coda

I like Coda, as it can display the markup, the css and a preview, all at the same time.

It looks like this, Files on the left, the html next, a preview and a CSS editor on the right.

It would look much better, and less cluttered on a larger monitor... (one day I'll get the 27 inch iMac)

Here's a link on  to how to setup Coda. It's from their developer user page...

You can try it out for free for a 30 day period. Panic, the publisher/authors are local, they live in Portland.

Here's the link

http://www.panic.com/coda/developer/

 

If you have any questions, send that e-mail!

 

 

Setting up Dreamweaver for Macs and PC's

It's really important to setup Dreamweaver BEFORE you begin any project.

Here's a link to my "Dreamweaver" website for setting up Adobe's Dreamweaver

 

First.
Click on the "File Management" tab, it's a link to a really good Adobe tutorial movie...

(You'll need the ftp address from your host, and your log-in password for your website.)

Second.
Click on the "Set Up" tab. Each menu listed in the tab will popup specific instructions for the listed menus. The popups are:

Preferences > General

AP Elements

File Types Editor

New Document

Preview In Browser

Status Bar

Got a question? Send that e-mail! or leave a comment!

 

 

 

 

Setting up Coffee Cup's FREE html Editor

Howdy
This video from the CoffeeCup Website takes you through the steps to set up Your website project(s), For our Class the Your "Master-website" Folder on your computer.
After you have copied the "YourWeb-site" Folder to your USB drive, and renamed it.  Watch the video and follow the steps.


When you are done with the video the Editor's MY Website Tab, Local Disk, should look like this...

except I added some html5 layouts... "html5-3col.html" and "html5-2colindex.html"

Have fun playing with the free HTML Editor, and working on formatting the content.for your website.

Questions?  Send an e-mail

Signup Now! Next Class starts Oct 5th

Next Class begins October 5, 2011 Register Now!

Week 5 -- Review

Making Web Pages and a Web Site

Now you know that making a web page and a web site involves many different things...
Having a good Web Editor really helps. I hope you have found the free Coffee Cup HTML editor useful.


Web Page Layout Using CSS

CSS layout uses the "Box Model" to "contain" the major parts of a web page.

But, just because we call it the box model, doesn't mean that a web page has to look "boxy!" This web site, the Zen Garden shows how the same content can styled differently! You can see a collection of the different styles here!   Here's a couple of thumbnails that will give you the idea... there are hundreds of examples at the above link.

However, building a layout can be tricky as we have to apply "Position Rules", to move elements into different positions.

To speed up your web page building, you can start out with a basic preset CSS layout. I have found the following preset CSS layouts at http://www.code-sucks.com/ to be quite useful, On this web page I compare the differences between the two kinds of layouts, Faux and Fixed...  Basic Preset CSS Layouts

CSS Layouts are a good way to start building a web page and site ... the links on the basic preset css layout page will take you to the code-sucks.com web site CSS layout pages. You'll find a variety of layouts from single to four columns, headers footers and spaces for navigation and footers.  Choose a preset that fits how you want your web page to look, oops, to be layed out!

Sample look of layouts

Fill in your content in the appropriate spaces... then add the styling!
The possibilities are only limited by your imagination!
If you do a Google search for CSS Layouts you will find many, many more CSS Layout possibilities...

Good Luck, Have fun and
Practice, Practice, Practice

and if you need help or have a question, just 'holler

Garry Stasiuk

Week 3 Review -- Building Menus

Now that we have finished building the banner for a web page (Banner Tutorial) we need to add our Navigation Menus.

On the web page that we are building, we are now ready to add the menus. You can start, as we did in class, using the menus generated by Ian Lloyd's "List-o-matic" at accessify.com. You can choose Horizontal Menus or vertical menus.

I added both to the following web page. To see the steps read the pages "Source"  in your Browser (Usually menu item: View > Source.

This is the link to the actual page you see below

Read the source to see how a vertical list was made to line up in a line horizontally...





You, can find more info about how Navigation menus work, samples that you can use and other places on the web where you can build fancy custom menus or download free menu generators. More Menu Tutorials  Don't forget to read the commented source.

Finishing your home web page.

1. Adding the Content

2. Centering the web page in a browser (read the source)

Questions?  Send that e-mail!

Week 2 Review -Building a Web Page

1. Some Simple Rules

Before we begin we need to follow the "rules" for xhtml (Formatting your content)

and Styling the content with CSS

The Basic xhtml Rules

Please read about the basic xhtml rules on the class website

The Basic CSS Rules

Please read about the basic CSS rules on the class website

2. Building A Web Page - The Banner

I put together a step by step tutorial, it begins by building your web sites banner.

All the parts necessary to build a "demo" web page are in your "master" web site folder.

This is the link where you will find The class "Build a page tutorial -Part 1, The Banner" 
There are 7 steps

Have Fun!  I'll be going over the rules and tutorial steps in the class, and then we'll advance to Part 2, building the navigation menus. 

Got a question,email me or if you are ready for part 2, I'll send you the link.