March 30

You can work on your Google Pages for the first 30 minutes of class.

We are then going to start cascading style sheets.

CSS

Cascading Style Sheets.

The newest standards require html to be the code for the content and CSS will take on the responsibility or decorating your page. Coding for CSS can be within the html body but most often is in the head section of your page.
You can also write individual css files when you want your styles to apply to several webpages in one site

CSS Order

A browser style sheet….all browsers have default style sheets. These are common to all white background, black text in Times New Roman, blue links and purple visited links.

A user style sheet ….a view of the a website has the ability to change the settings on the browser of their computer. You can change your browser’s default text font and size and even color

Author style sheets the person who develops the webpage controls the look of the page using < style> </style> tags

Html….if you code design information into your webpage …this will dominate all of the above.

CCS….1.html
2 author creating style
3 user style settings in browser-
4 default settings in browser.


Why use CSS?

Author created style sheets
Are easy to maintain, one change can change several areas of your site or even several pages
Take less code so the file size is smaller
Work better with other media such as cell phones and web page readers for the blind
When used properly advanced CSS with give you more control over the design of the page




You first need a selector . The selector selects the elements in html that will be affected by the rule set. This is everything up to but not including the {


h1
h2
p

are examples of selectors

Next you need the declaration block
h1{…}
h2{…}
p{…}

are examples of selectors with declaration blocks

Next you will need declarations in the declaration blocks
h1{ text-align: center;}
h2{ font-style: italic; }
p{color: maroon; }

You can have multiple declarations for a selector

h1{text-align: center; font-style: italic; color: maroon;}


Go to http://www.w3schools.com/css/css_examples.asp
And then to Text “select the color of text”
You can practice the text CSS styles



Assignment
Create a basic web page following the requirements below.
Do not format the text, alignment or color. Your paragraphs should have 5 sentences

Your page should have the following elements:
• Your name as a level one header
• "About me" as a level two header
• A short paragraph describing something interesting about yourself
• a level two heading saying something like "My Favorite Things on the Internet"
• A paragraph describing the things you like to do on the Internet
• Save it as aboutme.htm

Now create css and locate it between in the head tags
Create css for the text in h1, h2 and p. Use the tutorial at http://www.w3schools.com/css/css_examples.asp to help you.

March 28th

You should upload your frames page TODAY.
Please check out the domain extensions
http://www.computeruser.com/resources/dictionary/noframes/nf.domains.html

code for framesetpage http://www.mhsstudents.org/randall/teachers/

March 27

By now you should have published a frames project to your folder in mhsstudents.org.

Your menu page of your frames project should link to at least 4 pages or external sites.

Have you found a good domain name?

Go to http://www.goddady.comand create a good domain name.
You should look on the Internet to find out what is a domain name? A host or server? A server IP address.

What is the function of Interic? http://www.internic.net/

Where can you host your website? If you have Comcast or Verizon you have server space.

What is ftp software?
A free version called Smart FTP is available from Smart FTP

March 23

I'm back.
Today I want you to check your grades.
You can access these grades at http://home.comcast.net/~christine.randall/grades/
You will need to log in with your name and your ID-YOG
Christine Randall 5555-05 Capitals count!
Angelo, Dan and Robert. Since I have you in 2 classes you will need to put a G at the end of your last name.

Today we will tie up loose ends,

Document Type Declaration Read about Document Type Declaration at http://en.wikipedia.org/wiki/Document_Type_Declaration

Download and save a text file with Document Type Declarations from http://mhsstudents.org/randall/declaration.html View the source and copy it to a text file. Save this where you can always find it. Document type declaration is entered before the opening html tag...believe it or not!

Meta Tags Read about Meta tags at http://en.wikipedia.org/wiki/Meta_tagGenerate code for Meta tags at http://vancouver-webpages.com/META/mk-metas.html

March 21

Sorry I am out once again. I promise I will be back for the block on Friday. In the meantime please continue to work on you frames pages. By the end of this class you should have uploaded via ftp://www.mhsstudents.org both of your tables pages. The color version and the grayscale or sepia version.

You should also have finished and uploaded a frames page. Four files are needed, the frameset, the menu page and 2 main pages. Check the previous blog entry for links to my frames pages. Just a reminder... the reference to top in the frameset is the top or side menu. The reference to main is the place where the main content of you site is visable.

Now you need to create a tables page without borders. This is done in the frameset file. Go to http://www.echoecho.com/htmlframes04.htmfor help creating a frames page without borders.


Can you create a directory like mine? http://www.mhsstudents.org/randall/teachers ? I know you can be creative and develop your own idea...perhaps a photo album.....or a team roster click a name and the frame reveals the player.

Jason!!! go to http://www.mhsstudents.org/jason/forjason.html and use this to help you set up your favorite author page.

March 16

I can't leave html without showing you frames. At one time they were to pinical of website design!
There is a minimum of 3 files required
.....frameset
.....frame top or sidebar
.....frame main for the chosen file


The frameset page controls how the 2(or more) frames will be displayed.

Go to http://www.mhsstudents.org/randall/framesetrow.html and you will see a frames page set in rows.
Go to http://www.mhsstudents.org/randall/framesetcol.html and you will see a frames page set in columns.

Create your own.

You can do red white and blue, white top, blue page and red page for the main pages.
Or Dark Green, Light Green and a white top....Sort of St. Patrick's Day Theme!

make a directory called frames in your folder.
3 files will be located there.

More info can be found at

http://www.htmlcodetutorial.com/frames/frames_famsupp_5.html

March 12, 2007

Hello everyone!
Sorry I had to miss today due to a family crisis....I'd much rather be in school!

Let's finish all work on tables today and then we can move on. I can see a few of you applauding as you read this is the end of tables!

Please help your neighbor. If you are finished before the others help someone else!
(Jason if you can continue to work on the table tutorial please do so. go to http://www.mhsstudents.org/jason/forjason.html save this file and play around with it.)

You are to create a colorful table page for your theme. Similar to http://www.mhsstudents.org/randall/colorfruits.html It must have links to the larger graphics and the thumbnails are in a table. Position the table data cell. This is called nested tables.

When this is done upload your page to mhsstudents.org using ftp://www.mhsstudents.org
Be careful to only upload into your folder. Yours will have a name that relates to your theme. Make sure your images and your thumbnails are in your image folder.

Now let's make another version. I chose to go grayscale.http://www.mhsstudents.org/randall/grayfruits.html. I used Irfanview to make a gray thumbnail of each color thumbnail.

Notice how I made my address hyperlinked. This anchor tag a href="mailto:christine.randall@gmail.com" will cause the user's computer to open the default mail program. Upload your second version.

Please spend the last 10-15 minutes looking for a "How'd they do that site!" We will check those out tomorrow!

March 7

Continue to work on your tables.

We will use tables to design the structure of the webpage
http://home.comcast.net/~christine.randall/fruits/tablelayout1.html
http://home.comcast.net/~christine.randall/fruits/tablelayout2.html

View the source and save it to your computer.
Now work with this file and customize it to make it your own

Possibilites include 2 rows on the top with one large area underneath....1 row across the top and 3 columns under.

You can now incorporate your "theme page" into a tables page.

Change the colors. Remember to use color scheme sites from previous classes

March 6

Continue to work on tables.
http://www.htmlcodetutorial.com/tables/index_famsupp_27.html
Is a great tutorial
Today we will cover rowspan and colspan
Add a gif background to your table

March 2

If you have not uploaded your first web page, and images in an image folder to Geocities please do so now. If you cannot accomplish this see me.
I want you to have your site in our mhsstudents.org site (a paid hosting service) and a free hosting service Geocities

Please finish your theme site with thumbnails.
You must include in your img tags the size of the images. Whenever you include images you should always include image sizes.

Why can't I just make my html code change the large image to a thumbnail size you ask.

Resizing images with an image editor to thumbnails will reduce the size of the file. Just entering image size code does not. The goal is to have you page load as quickly as possible. When you have smaller image file sizes this will happen.

Once you have finished this page print the code page. Use the comment tag to include you name in the heading of your page. Please pass this in.

Now we will start tables.
I am going to try an online tutorial for this activity go to
http://www.tubetorial.com/code-tables-html/
Follow the instructions (the pause button is on the lower left corner of the movie)

Please name your file "tables.html"

Bring your books in on Monday. We will be working on chapter 16 page 227 "Tables"