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… 

Create A Web Site - Week 2

Howdy

One component of making a web page is obtaining/making/inserting photos and "graphics" .
(did I tell you that there is a lot of busy work involved in making a web page?)
To make graphics and edit your photos for the web you need software specifically designed for that purpose, like Photoshop.
SumoPaint a free "on-line" Paint program that runs in your browser, and is one of the best available...
If you need help with Sumo Paint you can find many amazing Video Tutorials

If you don't have any artistic skills, you can hire a graphic artist, but you might be able to find the components you need on-line. Instead of doing a "plain" keyword search, use "image" mode instead...
his link takes you to a google "image" search for gradient backgrounds. Some "free" art web sites offer graphics that are "free" to use after you pay for the "right" to use them... and sometimes that is a good solution! You can find backgrounds, buttons and all kinds of Clip Art on the web...
Best advise? Support your local artist.

Tip: HTML On-Line References (your best friend)
To learn more about the image <img> HTML tag/element check out Sitepoint.com's on-line reference book "HTML Elements"

Links - Hyper Reference Links are what make the internet work.
This class web page defines "Links" and demonstrates how they work.

TIP
Read the page... and Remember!!! if you want to see how the "markup" for that or any web page works you can always look at the web pages source!!!
In Internet Explorer the menu is
View > Source
In Fire Fox it's
View > Page Source
In Chrome it's
View > Developer > View Source

I have placed comments in the markup to help you find what you are looking for.
You can cut a paste the source code and use it on your web page!!!!

For more info on how the "box" model works read this...

Your Home work
Make or find the graphics/photos you want for your web page (an on going project).

Work through the rest of Chapter 2 and At least Read ALL of Chapter 3
There is a lot going on in Chapter 3, but I will cover the key parts in the next class...
Try and work out the examples, if you get stuck, thatsl be a good place to stop... and post your question here!

Most of all, have fun!