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!

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...

• Inserting (color)
• Inserting Images
• Links, the 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.

 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?

 

 

 

 

 

 

 

 

 

Finding Web Page Editing Nirvana

Is there an easier way to make and edit web pages???

I think the WYSIWYG (What You See, Is What You Get) Open Source Web Editor Komposer is a great place to start making web pages, especially if you are just starting out. It's available for PC, Mac and more... There are better alternatives but they are NOT all free or open source like Kompozer. The best part is that Kompozer is currently being updated.

Several many years ago (once upon a time?) there were only a few solid web editors. Today there are many more choices and the competition is growing...

The combination that I use on my Mac are
Smultron, Komodo Edit, Kompozer Coda and Dreamweaver
For the specific task of making photo web galleries I have used iWeb, Lightroom and JAlbum.
In the past I tried Shutterbug (Mac) and Picasa (pc).

JAlbum is free, it's available for PC and Mac. It's a great web album utility and time saver, you can check it out and download it from here...
http://jalbum.net/

Here's a sample JAlbum Gallery

The reason I like the following programs is that I have existing web pages to edit, some of the web editors out there cannot load and edit straight html pages!
These 'Graphical" editors use an intermediate step... between html text editors and wysiwyg editors... they save the Web pages/projects in their own format... Then, when you upload to the web these programs convert their graphical formatted versions to html!

These editors can load and edit HTML pages
Komodo Edit (an HTML ope source and free editor) for PC and Mac
For PC's
The CoffeeCup HTML Editor 2010 ----is 2 Editors in 1 !
http://www.coffeecup.com/html-editor/

TopStyle (this is one terrific CSS/HTML textstyle editor a lot like Coda on the Mac)http://www.blogger.com/img/blank.gif
http://www.newsgator.com/Individuals/TopStyle/Default.aspx

MicroSoft's Web Expression 3 ---The price has come way down...It's now $149.00
http://www.microsoft.com/expression/products/overview.aspx?key=web
(it's a real long download)

Adobe's Dreamweaver CS 5
http://tryit.adobe.com/us/cs4/dreamweaver/index.html?sdid=DOPEY

These Graphical Editors are fun to use but Can not edit existing web sites

A free Graphical Web Editor called WebDwarf (PC Only)
http://www.virtualmechanics.com/products/dwarf/

Kinda fun to use, especially if you are artistically inclined...

it's big brother/sisters are SiteSpinner and SitesSpinnerPro
http://www.virtualmechanics.com/webhelp/sitespinner.html

For Photoshop Users there is a plugin called SiteGrinder
http://www.medialab.com/sitegrinder/

On the Mac there several graphical oriented editors
RapidWeaver
http://www.realmacsoftware.com/rapidweaver/

and
Freeway - Freeway Pro
http://www.softpress.com/products/index.php

And, there are others, but the ones mentioned have caught my attention so far
Oh, so many choices, so little time...

My current main working environment is Coda on the Mac

and I love it!

What you say?

--
Mo Eb , Garry
http://uofgts.com


o "It's the reason we came from the mud, don't you know/'Cause we wanted to climb to the stars." --- David Crosby