Week 2 Review -Formatting your content

Class Objective

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

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

The xhtml rules

html elements are the building blocks of a web page. You can find a really good html reference guide at Sitepoint.com
The building blocks of a web page are html(5) elements The graphic shows the structure of an element using the heading element which is made up of an open tag <h1> and a closing tag </h1>
(Your content goes between the tags)

Before you can add html elements to a web page you need to know the basic rules!
http://uofgts.com/BasicWD/xhtml.html
Oh no, more rules! A few more things you need to know before we begin making a web page.
TYNTK
Add your content for your web page using the Web Editor of your Choice
Using a blank html5 page, you can find one in your Master Site folder named Basicxhtml5page.html
Use it in your web editor to add your content in the order you want to see it displayed on the page
How? Just following the tutorial (link below) on how to add content and format it.
Got a question, send me an e-mail!
This is the link to the tutorial Building a Web Page-- How to add and format the content
(You will also find the above web tutorial page in the class folder named week2… its named xhtmltut.html )

HomeWork

after you do the above tutorial work on the following
1.Try to Insert your content into an html5 pre layout
html5-3col.html
or
html5-2colindex.html
Those two files are already in your master folder!
2. Have some fun and Play with Sumo Paint or Pixlr and try to make an image or graphic or logo
AND add it to your web page content!
Image editors for everyone… SumoPaint or Pixlr
Free online paint programs.
If you are ready to place pictures on your web page read How to Insert an image on a web page How to Insert an Image
For information about adding color to your web page check out Inserting color
Most of all have fun!

Setting up web editors

Trying out web editors

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 local site first.

Here's some help with the Coffeecup editors

But, First: Make Extensions visible in WindowsXP, Vista, Win7 or Win 8

Mac and Windows OS's by default hide the 3 letter file extension for all files…  the extensions are part of the filename, the extensions tell web browsers to do with the file… Here's how you set that up…

On Windows XP

• Open My Computer, and select Folder Options from the Tools menu
• Don't see Menu's, press the Alt key
• Click on the View tab, turn off Hide MS-DOS file extensions for known file types, by unchecking the box
• Press OK.

On Windows Vista

• Go to My Computer and choose Organize > Folder and Search Optionsv
• Select the View tab and deselect "Hide extensions" for known file types
• Press OK.

On Windows 7

• Open an Explorer window and choose Organize > Folder and Search Options
• Select the View tab -- and deselect the Hide extensions for known file types
• Press OK.

Same for Win 8

Making Extensions visible in OS X (Mac)

• open the Finder, then choose Menu Finder > Preferences
• Choose the Advanced Tab
• Check the Show all file extensions box

 

 

 

 

 

The extensions to tell us and the browsers which files are web pages, graphics or scripts)  The extension for a web page is .html or .htm Use one to the other, but be consistent! Graphic or picture files recognized by a browser use the extensions .jpg, .png or .gif, a new member of the graphic family is .svg.  Script files usually have the extension .css, .php, .js, or .cgi (there are many others).

Setting up Windows Coffee Cup Web Editor

The files in Your-Master-Site folder are called "Local" files, these file will eventually be uploaded to your "Server". The files located at the server are called "Remote" files

You can setup The CoffeeCup HTML editor using the menu item

My Websites > Website Project Settings…

You'll see this requester (If you need further help click the question mark)

 

1. Give the project a name   2. Use the "browser" to locate Your-MasterWebsite folder on your flash drive

That's all you need to do for now. We'll set up the servers later…

In Coffeecup you'll see what's in the Local site folder on the left.

 

Setting up a Mac for Coffeecup's Web Editor

It's a bit easier ???

In the Web Editor choose the menu item

File > New Project  > From Files and Folders

You'll get a Finder requester… Browse to your Local Site folder on your Flash Drive

But, title your project first…

Then open the local site folder

and click next

Highlight the files you want to edit or open and click okay

Your Web Editor will look like this… (well sorta… )

and have fun!

We'll go over this in class… When we are ready we'll link your web editor to your hosting server!

 

 

 

 

 

 

Recommended Text book

I highly recommend

Start Building Web Sites Like a Pro!

BUILD YOUR OWNWEBSITETHE RIGHT WAYUSING HTML & CSS, 3RD EDITION

BY IAN LLOYD

 You can download a sample chapter at

http://www.sitepoint.com/books/html3/?SID=30d796cee0d8a39c91d9015939a2ad7e

On Your Flash(thumb drive)

You'll find a synopsis that Ian Lloyd wrote about this book (for The First edition) in the folder on your flash drive TheRightWay-shortversion.pdf, you'll also find the book sample there too… for Version 3… TheRightWay-booksample2-8-12.pdf

Reading assignment!  Read Chapter 1.

You can purchase the book or an e book version of the book at Sitepoint.com.

 

 

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 teasing service at Sauce Labs https://saucelabs.com

This links takes you to a list of Web Browser publishers Download browsers! Install them!

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:  

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